feat: add new M3 UI components and their corresponding Angular application pages.

Author: Banegasn

apps/angular-app/package.json

@@ -22,8 +22,17 @@
     "@angular/platform-server": "^20.3.7",
     "@angular/router": "^20.3.7",
     "@angular/ssr": "^20.3.7",
+    "@banegasn/m3-badge": "workspace:*",
     "@banegasn/m3-button": "workspace:*",
     "@banegasn/m3-card": "workspace:*",
+    "@banegasn/m3-checkbox": "workspace:*",
+    "@banegasn/m3-chip": "workspace:*",
+    "@banegasn/m3-dialog": "workspace:*",
+    "@banegasn/m3-progress": "workspace:*",
+    "@banegasn/m3-slider": "workspace:*",
+    "@banegasn/m3-tabs": "workspace:*",
+    "@banegasn/m3-text-field": "workspace:*",
+    "@banegasn/m3-tooltip": "workspace:*",
     "@banegasn/m3-fab-menu": "workspace:^",
     "@banegasn/m3-loading-indicator": "workspace:^",
     "@banegasn/m3-menu": "workspace:^",

apps/angular-app/src/app/app.component.html

@@ -4,61 +4,50 @@
     <m3-navigation-rail-toggle></m3-navigation-rail-toggle>
 
     <app-seo-link href="home">
-      <m3-navigation-rail-item label="Home"
-        [active]="currentRoute() === '/home'">
+      <m3-navigation-rail-item label="Home" [active]="currentRoute() === '/home'">
         <span slot="icon" class="material-symbols-outlined">home</span>
       </m3-navigation-rail-item>
     </app-seo-link>
 
     <app-seo-link href="quick-start">
-      <m3-navigation-rail-item label="Quick Start"
-        [active]="currentRoute() === '/quick-start'">
+      <m3-navigation-rail-item label="Quick Start" [active]="currentRoute() === '/quick-start'">
         <span slot="icon" class="material-symbols-outlined">rocket_launch</span>
       </m3-navigation-rail-item>
     </app-seo-link>
 
-    <div class="desktop-components-trigger"
-      (mouseenter)="onDesktopComponentsMouseEnter()"
-      (mouseleave)="onDesktopComponentsMouseLeave()"
-      (menu-item-select)="onComponentsMenuItemSelect($event)">
+    <div class="desktop-components-trigger" (mouseenter)="onDesktopComponentsMouseEnter()"
+      (mouseleave)="onDesktopComponentsMouseLeave()" (menu-item-select)="onComponentsMenuItemSelect($event)">
       <app-seo-link href="components">
-        <m3-navigation-rail-item label="Components"
-          [active]="isComponentsRoute()">
+        <m3-navigation-rail-item label="Components" [active]="isComponentsRoute()">
           <span slot="icon" class="material-symbols-outlined">browse</span>
         </m3-navigation-rail-item>
       </app-seo-link>
 
-      <m3-menu
-        placement="right-start"
-        [offset]="railExpanded() ? 24 : 8"
-        [open]="componentsMenuOpen()"
-        (mouseenter)="onDesktopComponentsMouseEnter()"
-        (mouseleave)="onDesktopComponentsMouseLeave()"
-        (menu-dismiss)="onComponentsMenuDismiss($event)"
-        style="--md-menu-max-height: calc(100vh - 200px);">
+      <m3-menu placement="right-start" [offset]="railExpanded() ? 24 : 8" [open]="componentsMenuOpen()"
+        (mouseenter)="onDesktopComponentsMouseEnter()" (mouseleave)="onDesktopComponentsMouseLeave()"
+        (menu-dismiss)="onComponentsMenuDismiss($event)" style="--md-menu-max-height: calc(100vh - 400px);">
         @for (item of componentMenuItems; track item.path) {
-          <app-seo-link [href]="item.path.substring(1)">
-            <m3-menu-item [value]="item.path">
-              <span slot="leading-icon" class="material-symbols-outlined">{{ item.icon }}</span>
-              {{ item.label }}
-            </m3-menu-item>
-          </app-seo-link>
+        <app-seo-link [href]="item.path.substring(1)">
+          <m3-menu-item [value]="item.path">
+            <span slot="leading-icon" class="material-symbols-outlined">{{ item.icon }}</span>
+            {{ item.label }}
+          </m3-menu-item>
+        </app-seo-link>
         }
       </m3-menu>
     </div>
 
     <app-seo-link href="contact">
-      <m3-navigation-rail-item label="Contact"
-        [active]="currentRoute() === '/contact'">
+      <m3-navigation-rail-item label="Contact" [active]="currentRoute() === '/contact'">
         <span slot="icon" class="material-symbols-outlined">person</span>
       </m3-navigation-rail-item>
     </app-seo-link>
 
     <m3-navigation-rail-item label="Theme" slot="bottom" (item-click)="toggleTheme()">
       @if(currentTheme !== 'dark') {
-        <span slot="icon" class="material-symbols-outlined">dark_mode</span>
+      <span slot="icon" class="material-symbols-outlined">dark_mode</span>
       } @else {
-        <span slot="icon" class="material-symbols-outlined">light_mode</span>
+      <span slot="icon" class="material-symbols-outlined">light_mode</span>
       }
     </m3-navigation-rail-item>
 
@@ -67,7 +56,8 @@
     </m3-navigation-rail-item>
 
     <m3-navigation-rail-item label="GitHub" slot="bottom" (item-click)="openGitHub()">
-      <svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+      <svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+        fill="currentColor">
         <path
           d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
       </svg>
@@ -81,66 +71,49 @@
   </div>
 </div>
 
-<div class="mobile-nav-shell"
-  (menu-item-select)="onComponentsMenuItemSelect($event)">
+<div class="mobile-nav-shell" (menu-item-select)="onComponentsMenuItemSelect($event)">
   <div class="mobile-components-anchor">
-    <m3-menu
-      placement="top-center"
-      [offset]="12"
-      [open]="componentsMenuOpen()"
-      (menu-dismiss)="onComponentsMenuDismiss($event)"
-      style="--md-menu-max-height: calc(100dvh - 120px);">
+    <m3-menu placement="top-center" [offset]="12" [open]="componentsMenuOpen()"
+      (menu-dismiss)="onComponentsMenuDismiss($event)" style="--md-menu-max-height: calc(100dvh - 200px);">
       @for (item of componentMenuItems; track item.path) {
-        <app-seo-link [href]="item.path.substring(1)">
-          <m3-menu-item [value]="item.path">
-            <span slot="leading-icon" class="material-symbols-outlined">{{ item.icon }}</span>
-            {{ item.label }}
-          </m3-menu-item>
-        </app-seo-link>
+      <app-seo-link [href]="item.path.substring(1)">
+        <m3-menu-item [value]="item.path">
+          <span slot="leading-icon" class="material-symbols-outlined">{{ item.icon }}</span>
+          {{ item.label }}
+        </m3-menu-item>
+      </app-seo-link>
       }
     </m3-menu>
   </div>
 
   <m3-navigation-bar class="mobile-nav" auto-layout>
     <app-seo-link href="home">
-      <m3-navigation-bar-item
-        label="Home"
-        [active]="currentRoute() === '/home'">
+      <m3-navigation-bar-item label="Home" [active]="currentRoute() === '/home'">
         <span slot="icon" class="material-symbols-outlined">home</span>
       </m3-navigation-bar-item>
     </app-seo-link>
 
     <app-seo-link href="quick-start">
-      <m3-navigation-bar-item
-        label="Quick Start"
-        [active]="currentRoute() === '/quick-start'">
+      <m3-navigation-bar-item label="Quick Start" [active]="currentRoute() === '/quick-start'">
         <span slot="icon" class="material-symbols-outlined">rocket_launch</span>
       </m3-navigation-bar-item>
     </app-seo-link>
 
     <app-seo-link href="components">
-      <m3-navigation-bar-item
-        id="mobile-components-trigger"
-        label="Components"
-        [active]="isComponentsRoute()"
-        (pointerdown)="onMobileComponentsPointerDown($event)"
-        (pointerup)="onMobileComponentsPointerUp($event)"
-        (pointercancel)="onMobileComponentsPointerCancel($event)"
-        (contextmenu)="onMobileComponentsContextMenu($event)">
+      <m3-navigation-bar-item id="mobile-components-trigger" label="Components" [active]="isComponentsRoute()"
+        (pointerdown)="onMobileComponentsPointerDown($event)" (pointerup)="onMobileComponentsPointerUp($event)"
+        (pointercancel)="onMobileComponentsPointerCancel($event)" (contextmenu)="onMobileComponentsContextMenu($event)">
         <span slot="icon" class="material-symbols-outlined">browse</span>
       </m3-navigation-bar-item>
     </app-seo-link>
 
     <app-seo-link href="contact">
-      <m3-navigation-bar-item
-        label="Contact"
-        [active]="currentRoute() === '/contact'">
+      <m3-navigation-bar-item label="Contact" [active]="currentRoute() === '/contact'">
         <span slot="icon" class="material-symbols-outlined">person</span>
       </m3-navigation-bar-item>
     </app-seo-link>
 
-    <m3-navigation-bar-item label="Settings"
-      (item-click)="openSettings()">
+    <m3-navigation-bar-item label="Settings" (item-click)="openSettings()">
       <span slot="icon" class="material-symbols-outlined">settings</span>
     </m3-navigation-bar-item>
   </m3-navigation-bar>

apps/angular-app/src/app/app.component.ts

@@ -51,6 +51,15 @@ export class AppComponent implements OnInit, OnDestroy {
     { path: '/navigation-bar', label: 'Navigation Bar', icon: 'bottom_navigation' },
     { path: '/switches', label: 'Switches', icon: 'toggle_on' },
     { path: '/radio-buttons', label: 'Radio Buttons', icon: 'radio_button_checked' },
+    { path: '/checkboxes', label: 'Checkboxes', icon: 'check_box' },
+    { path: '/sliders', label: 'Sliders', icon: 'linear_scale' },
+    { path: '/text-fields', label: 'Text Fields', icon: 'text_fields' },
+    { path: '/chips', label: 'Chips', icon: 'label' },
+    { path: '/dialog', label: 'Dialog', icon: 'chat_bubble' },
+    { path: '/tooltip', label: 'Tooltip', icon: 'info' },
+    { path: '/badge', label: 'Badge', icon: 'badge' },
+    { path: '/progress', label: 'Progress', icon: 'hourglass_empty' },
+    { path: '/tabs', label: 'Tabs', icon: 'tab' },
     { path: '/search-bar', label: 'Search Bar', icon: 'search' },
     { path: '/split-button', label: 'Split Button', icon: 'arrow_split' },
     { path: '/menu', label: 'Menu', icon: 'menu' },

apps/angular-app/src/app/app.routes.ts

@@ -14,6 +14,15 @@ import { LoadingIndicatorComponent } from '../pages/loading-indicator/loading-in
 import { FabMenuComponent } from '../pages/fab-menu/fab-menu.component';
 import { MenuComponent } from '../pages/menu/menu.component';
 import { QuickStartComponent } from '../pages/quick-start/quick-start.component';
+import { CheckboxComponent } from '../pages/checkbox/checkbox.component';
+import { SliderComponent } from '../pages/slider/slider.component';
+import { TextFieldComponent } from '../pages/text-field/text-field.component';
+import { DialogComponent } from '../pages/dialog/dialog.component';
+import { ChipsComponent } from '../pages/chips/chips.component';
+import { TooltipComponent } from '../pages/tooltip/tooltip.component';
+import { BadgeComponent } from '../pages/badge/badge.component';
+import { ProgressComponent } from '../pages/progress/progress.component';
+import { TabsComponent } from '../pages/tabs/tabs.component';
 
 export const routes: Routes = [
     { path: '', redirectTo: 'home', pathMatch: 'full' },
@@ -85,6 +94,78 @@ export const routes: Routes = [
             description: 'Material 3 Expressive Radio Button components for selecting a single option from a list.'
         }
     },
+    {
+        path: 'checkboxes',
+        component: CheckboxComponent,
+        title: 'Checkboxes',
+        data: {
+            description: 'Material 3 Expressive Checkbox components for selecting multiple options.'
+        }
+    },
+    {
+        path: 'sliders',
+        component: SliderComponent,
+        title: 'Sliders',
+        data: {
+            description: 'Material 3 Expressive Slider components for selecting from a range of values.'
+        }
+    },
+    {
+        path: 'text-fields',
+        component: TextFieldComponent,
+        title: 'Text Fields',
+        data: {
+            description: 'Material 3 Expressive Text Field components for entering text.'
+        }
+    },
+    {
+        path: 'chips',
+        component: ChipsComponent,
+        title: 'Chips',
+        data: {
+            description: 'Material 3 Expressive Chip components for entering information, making selections, filtering content, or triggering actions.'
+        }
+    },
+    {
+        path: 'dialog',
+        component: DialogComponent,
+        title: 'Dialog',
+        data: {
+            description: 'Material 3 Expressive Dialog component for important prompts in a user flow.'
+        }
+    },
+    {
+        path: 'tooltip',
+        component: TooltipComponent,
+        title: 'Tooltip',
+        data: {
+            description: 'Material 3 Expressive Tooltip component for informative text on hover or focus.'
+        }
+    },
+    {
+        path: 'badge',
+        component: BadgeComponent,
+        title: 'Badge',
+        data: {
+            description: 'Material 3 Expressive Badge component for conveying dynamic information like counts or status.'
+        }
+    },
+    {
+        path: 'progress',
+        component: ProgressComponent,
+        title: 'Progress Indicator',
+        data: {
+            description: 'Material 3 Expressive Linear Progress Indicator for displaying operation status.'
+        }
+    },
+    {
+        path: 'tabs',
+        component: TabsComponent,
+        title: 'Tabs',
+        data: {
+            description: 'Material 3 Expressive Tabs component for organizing content across screens.'
+        }
+    },
     {
         path: 'search-bar',
         component: SearchBarComponent,

apps/angular-app/src/pages/badge/badge.component.css

@@ -0,0 +1,13 @@
+.demo-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 1rem;
+}
+
+.page-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+}

apps/angular-app/src/pages/badge/badge.component.html

@@ -0,0 +1,28 @@
+<div class="page-container docs-page">
+  <header class="page-header">
+    <h1>Badge</h1>
+    <p class="subtitle">Badges convey dynamic information, such as a count or status.</p>
+  </header>
+
+  <section class="demo-section">
+    <h2>Dot Badge</h2>
+    <div class="interactive-demo">
+      <div class="demo-row" style="gap: 32px;">
+        <m3-badge><span class="material-symbols-outlined" style="font-size:32px; color: var(--md-sys-color-on-surface)">mail</span></m3-badge>
+        <m3-badge><span class="material-symbols-outlined" style="font-size:32px; color: var(--md-sys-color-on-surface)">notifications</span></m3-badge>
+      </div>
+      <app-code-block [code]="dotExample" language="html" variant="sample"></app-code-block>
+    </div>
+  </section>
+
+  <section class="demo-section">
+    <h2>Labeled Badge</h2>
+    <div class="interactive-demo">
+      <div class="demo-row" style="gap: 48px;">
+        <m3-badge label="3"><span class="material-symbols-outlined" style="font-size:32px; color: var(--md-sys-color-on-surface)">mail</span></m3-badge>
+        <m3-badge label="99+"><span class="material-symbols-outlined" style="font-size:32px; color: var(--md-sys-color-on-surface)">notifications</span></m3-badge>
+      </div>
+      <app-code-block [code]="labelExample" language="html" variant="sample"></app-code-block>
+    </div>
+  </section>
+</div>

apps/angular-app/src/pages/badge/badge.component.ts

@@ -0,0 +1,10 @@
+import { Component, ChangeDetectionStrategy, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+import { CodeBlockComponent } from "../../app/components/code-block/code-block.component";
+import '@banegasn/m3-badge';
+import '@banegasn/m3-button';
+
+@Component({ selector: 'app-badge', schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, templateUrl: './badge.component.html', styleUrls: ['./badge.component.css'], imports: [CodeBlockComponent] })
+export class BadgeComponent {
+  readonly dotExample = `<m3-badge><span class="material-symbols-outlined">mail</span></m3-badge>`;
+  readonly labelExample = `<m3-badge label="3"><span class="material-symbols-outlined">notifications</span></m3-badge>`;
+}

apps/angular-app/src/pages/checkbox/checkbox.component.css

@@ -0,0 +1,13 @@
+.demo-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 1rem;
+}
+
+.page-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+}