@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/src/app/demos/button-group/button-group-demo.component.ts

@@ -0,0 +1,215 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemoPageComponent } from '../shared/demo-page.component';
+import { DemoExampleComponent } from '../shared/demo-example.component';
+import { ModusButtonGroupComponent } from '../../components/modus-button-group.component';
+import { ModusButtonComponent } from '../../components/modus-button.component';
+
+/**
+ * Demo page showcasing the Modus Button Group component.
+ */
+@Component({
+  selector: 'app-button-group-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusButtonGroupComponent, ModusButtonComponent],
+  template: `
+    <demo-page
+      title="Modus Button Group"
+      description="Button groups organize multiple buttons together with support for single or multiple selection modes. Use them for toolbar actions, segmented controls, and toggle groups."
+    >
+      <demo-example title="Button Variants" description="Different visual styles for button groups.">
+        <div class="flex flex-col gap-4">
+          <div class="flex flex-col gap-2">
+            <div class="text-sm text-muted-foreground">Outlined (default)</div>
+            <modus-button-group variant="outlined" color="primary">
+              <modus-button variant="outlined" color="primary">Button 1</modus-button>
+              <modus-button variant="outlined" color="primary">Button 2</modus-button>
+              <modus-button variant="outlined" color="primary">Button 3</modus-button>
+            </modus-button-group>
+          </div>
+          <div class="flex flex-col gap-2">
+            <div class="text-sm text-muted-foreground">Filled</div>
+            <modus-button-group variant="filled" color="primary">
+              <modus-button variant="filled" color="primary">Button 1</modus-button>
+              <modus-button variant="filled" color="primary">Button 2</modus-button>
+              <modus-button variant="filled" color="primary">Button 3</modus-button>
+            </modus-button-group>
+          </div>
+          <div class="flex flex-col gap-2">
+            <div class="text-sm text-muted-foreground">Borderless</div>
+            <modus-button-group variant="borderless" color="primary">
+              <modus-button variant="borderless" color="primary">Button 1</modus-button>
+              <modus-button variant="borderless" color="primary">Button 2</modus-button>
+              <modus-button variant="borderless" color="primary">Button 3</modus-button>
+            </modus-button-group>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example title="Button Colors" description="Apply consistent colors across all buttons in the group.">
+        <div class="flex flex-wrap gap-4">
+          <modus-button-group variant="outlined" color="primary">
+            <modus-button variant="outlined" color="primary">Primary</modus-button>
+            <modus-button variant="outlined" color="primary">Buttons</modus-button>
+          </modus-button-group>
+          <modus-button-group variant="outlined" color="secondary">
+            <modus-button variant="outlined" color="secondary">Secondary</modus-button>
+            <modus-button variant="outlined" color="secondary">Buttons</modus-button>
+          </modus-button-group>
+          <modus-button-group variant="outlined" color="tertiary">
+            <modus-button variant="outlined" color="tertiary">Tertiary</modus-button>
+            <modus-button variant="outlined" color="tertiary">Buttons</modus-button>
+          </modus-button-group>
+          <modus-button-group variant="outlined" color="warning">
+            <modus-button variant="outlined" color="warning">Warning</modus-button>
+            <modus-button variant="outlined" color="warning">Buttons</modus-button>
+          </modus-button-group>
+          <modus-button-group variant="outlined" color="danger">
+            <modus-button variant="outlined" color="danger">Danger</modus-button>
+            <modus-button variant="outlined" color="danger">Buttons</modus-button>
+          </modus-button-group>
+        </div>
+      </demo-example>
+
+      <demo-example title="Orientation" description="Button groups can be arranged horizontally or vertically.">
+        <div class="flex flex-wrap gap-8">
+          <div class="flex flex-col gap-2">
+            <div class="text-sm text-muted-foreground">Horizontal (default)</div>
+            <modus-button-group orientation="horizontal" variant="outlined">
+              <modus-button variant="outlined">Option 1</modus-button>
+              <modus-button variant="outlined">Option 2</modus-button>
+              <modus-button variant="outlined">Option 3</modus-button>
+            </modus-button-group>
+          </div>
+          <div class="flex flex-col gap-2">
+            <div class="text-sm text-muted-foreground">Vertical</div>
+            <modus-button-group orientation="vertical" variant="outlined">
+              <modus-button variant="outlined">Option 1</modus-button>
+              <modus-button variant="outlined">Option 2</modus-button>
+              <modus-button variant="outlined">Option 3</modus-button>
+            </modus-button-group>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example title="Single Selection (Radio-like)" description="Only one button can be selected at a time.">
+        <modus-button-group selectionType="single" variant="outlined" color="primary">
+          <modus-button variant="outlined" color="primary" [pressed]="true">Option A</modus-button>
+          <modus-button variant="outlined" color="primary">Option B</modus-button>
+          <modus-button variant="outlined" color="primary">Option C</modus-button>
+        </modus-button-group>
+      </demo-example>
+
+      <demo-example
+        title="Multiple Selection (Checkbox-like)"
+        description="Multiple buttons can be selected simultaneously."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-button-group
+            selectionType="multiple"
+            variant="outlined"
+            color="primary"
+            (buttonSelectionChange)="handleSelectionChange($event)"
+          >
+            <modus-button variant="outlined" color="primary" [pressed]="true">Bold</modus-button>
+            <modus-button variant="outlined" color="primary">Italic</modus-button>
+            <modus-button variant="outlined" color="primary" [pressed]="true">Underline</modus-button>
+          </modus-button-group>
+          <div class="text-sm text-muted-foreground">
+            Selected: {{ selectedButtons().length > 0 ? selectedButtons().join(', ') : 'None' }}
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example title="Icon-Only Buttons" description="Compact toolbar actions with icon-only buttons.">
+        <div class="flex flex-col gap-4">
+          <div class="flex flex-col gap-2">
+            <div class="text-sm text-muted-foreground">Text Alignment</div>
+            <modus-button-group selectionType="single" variant="outlined" color="primary">
+              <modus-button
+                icon="align_left"
+                iconPosition="only"
+                ariaLabel="Align left"
+                variant="outlined"
+                color="primary"
+                [pressed]="true"
+              />
+              <modus-button
+                icon="text_centered"
+                iconPosition="only"
+                ariaLabel="Align center"
+                variant="outlined"
+                color="primary"
+              />
+              <modus-button
+                icon="align_right"
+                iconPosition="only"
+                ariaLabel="Align right"
+                variant="outlined"
+                color="primary"
+              />
+            </modus-button-group>
+          </div>
+          <div class="flex flex-col gap-2">
+            <div class="text-sm text-muted-foreground">Text Formatting</div>
+            <modus-button-group selectionType="multiple" variant="outlined" color="secondary">
+              <modus-button
+                icon="text_bold"
+                iconPosition="only"
+                ariaLabel="Bold"
+                variant="outlined"
+                color="secondary"
+              />
+              <modus-button
+                icon="text_italic"
+                iconPosition="only"
+                ariaLabel="Italic"
+                variant="outlined"
+                color="secondary"
+              />
+              <modus-button
+                icon="text_underlined"
+                iconPosition="only"
+                ariaLabel="Underline"
+                variant="outlined"
+                color="secondary"
+              />
+            </modus-button-group>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example title="Disabled State" description="Disable all buttons in the group at once.">
+        <modus-button-group variant="outlined" color="primary" [disabled]="true">
+          <modus-button variant="outlined" color="primary">Disabled</modus-button>
+          <modus-button variant="outlined" color="primary">Button</modus-button>
+          <modus-button variant="outlined" color="primary">Group</modus-button>
+        </modus-button-group>
+      </demo-example>
+
+      <demo-example title="Mixed Content" description="Button groups can contain buttons with text and icons.">
+        <modus-button-group variant="outlined" color="primary">
+          <modus-button icon="save_disk" iconPosition="left" variant="outlined" color="primary">
+            Save
+          </modus-button>
+          <modus-button icon="download" iconPosition="left" variant="outlined" color="primary">
+            Download
+          </modus-button>
+          <modus-button icon="share" iconPosition="left" variant="outlined" color="primary">
+            Share
+          </modus-button>
+        </modus-button-group>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class ButtonGroupDemoPageComponent {
+  readonly selectedButtons = signal<string[]>([]);
+
+  handleSelectionChange(event: { selectedButtons: HTMLElement[] }): void {
+    const values = event.selectedButtons
+      .map((button) => button.textContent?.trim())
+      .filter((value): value is string => Boolean(value));
+    this.selectedButtons.set(values);
+  }
+}

package/templates/angular/src/app/demos/card/card-demo.component.ts

@@ -0,0 +1,180 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemoPageComponent } from '../shared/demo-page.component';
+import { DemoExampleComponent } from '../shared/demo-example.component';
+import { ModusCardComponent } from '../../components/modus-card.component';
+import { ModusButtonComponent } from '../../components/modus-button.component';
+
+/**
+ * Demo page showcasing the Modus Card component.
+ *
+ * Demonstrates card features including:
+ * - Vertical and horizontal layouts
+ * - Cards with header images
+ * - Background figure cards with overlaid text
+ * - Cards with footer slots
+ * - Compact padding for dense layouts
+ */
+@Component({
+  selector: 'app-card-demo-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    DemoPageComponent,
+    DemoExampleComponent,
+    ModusCardComponent,
+    ModusButtonComponent,
+  ],
+  template: `
+    <demo-page
+      title="Modus Card"
+      description="Cards group related information into a contained surface. Keep each card focused on a single concept and align supporting actions to the bottom."
+    >
+      <demo-example
+        title="Project summary"
+        description="Vertical cards are ideal for key metrics or spotlighting a single project."
+      >
+        <modus-card>
+          <div slot="title" class="text-xl font-semibold text-foreground">Atlas Renewal</div>
+          <div slot="subtitle" class="text-sm text-foreground-80">Updated 2 hours ago</div>
+          <div slot="actions" class="flex gap-2">
+            <modus-button color="primary" size="sm">Open project</modus-button>
+            <modus-button color="tertiary" size="sm">Share</modus-button>
+          </div>
+          <div class="flex flex-col gap-3 text-sm text-foreground-80">
+            <div>Next milestone: Validate customer insights</div>
+            <div>Owner: Priya Malhotra</div>
+            <div>Team: Research, Field Ops</div>
+          </div>
+        </modus-card>
+      </demo-example>
+
+      <demo-example
+        title="Horizontal layout"
+        description="Use horizontal cards when imagery or a quick status pairs with copy."
+      >
+        <modus-card [layout]="'horizontal'" [padding]="'compact'" [bordered]="true">
+          <div slot="title" class="text-lg font-medium text-foreground">Field kit</div>
+          <div slot="subtitle" class="text-sm text-foreground-80">
+            Inventory: 18 units available
+          </div>
+          <div slot="actions">
+            <modus-button color="primary" size="sm">Reserve</modus-button>
+          </div>
+          <div class="text-sm text-foreground-80">
+            Includes GPS, survey equipment, and safety checklist. Recommended for teams working on
+            remote installs.
+          </div>
+        </modus-card>
+      </demo-example>
+
+      <demo-example
+        title="Card with Header Image"
+        description="Add an image or figure in the header slot to provide visual context."
+      >
+        <modus-card [layout]="'horizontal'" [bordered]="true">
+          <figure slot="header" class="w-full md:w-48 h-48 overflow-hidden">
+            <img
+              src="https://i.pravatar.cc/300?img=12"
+              alt="User avatar"
+              class="w-full h-full object-cover"
+            />
+          </figure>
+          <div slot="title" class="text-lg font-medium text-foreground">Team Member</div>
+          <div slot="subtitle" class="text-sm text-foreground-80">Senior Developer</div>
+          <div slot="actions">
+            <modus-button color="primary" size="sm">Contact</modus-button>
+          </div>
+          <div class="text-sm text-foreground-80">
+            Specializes in frontend architecture and design systems. Available for new projects
+            starting next quarter.
+          </div>
+        </modus-card>
+      </demo-example>
+
+      <demo-example
+        title="Background Figure Card"
+        description="Use background-figure to stretch header images across the entire card with overlaid text."
+      >
+        <modus-card [backgroundFigure]="true">
+          <figure slot="header" class="w-full h-64 overflow-hidden">
+            <img
+              src="https://picsum.photos/id/1045/600/400"
+              alt="Scenic view"
+              class="w-full h-full object-cover"
+            />
+          </figure>
+          <div
+            slot="title"
+            class="text-2xl font-semibold text-white [text-shadow:1px_1px_2px_rgba(0,0,0,0.8)]"
+          >
+            Featured Project
+          </div>
+          <div
+            slot="subtitle"
+            class="text-base text-white/80 [text-shadow:1px_1px_2px_rgba(0,0,0,0.8)]"
+          >
+            Launching Q2 2024
+          </div>
+          <div slot="actions">
+            <modus-button color="primary" size="sm">Learn More</modus-button>
+          </div>
+          <div
+            class="text-base text-white/80 [text-shadow:1px_1px_2px_rgba(0,0,0,0.8)]"
+          >
+            This project showcases innovative design patterns and modern user experiences. Join us
+            for the launch event.
+          </div>
+        </modus-card>
+      </demo-example>
+
+      <demo-example
+        title="Card with Footer"
+        description="Use the footer slot for metadata, tags, or additional information outside the main content area."
+      >
+        <modus-card [bordered]="true">
+          <div slot="title" class="text-xl font-semibold text-foreground">Document Review</div>
+          <div slot="subtitle" class="text-sm text-foreground-80">Last updated: 3 days ago</div>
+          <div slot="actions">
+            <modus-button color="tertiary" size="sm">Edit</modus-button>
+          </div>
+          <div class="text-sm text-foreground-80">
+            This document contains important project specifications and requirements. Please review
+            and provide feedback by end of week.
+          </div>
+          <div slot="footer" class="flex items-center justify-between pt-4 border-t border-border">
+            <div class="flex gap-2">
+              <span class="px-2 py-1 text-xs rounded bg-muted text-muted-foreground">Draft</span>
+              <span class="px-2 py-1 text-xs rounded bg-muted text-muted-foreground">Review</span>
+            </div>
+            <div class="text-xs text-muted-foreground">3 reviewers</div>
+          </div>
+        </modus-card>
+      </demo-example>
+
+      <demo-example
+        title="Compact Padding"
+        description="Use compact padding for dense dashboards or when space is limited."
+      >
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <modus-card [padding]="'compact'" [bordered]="true">
+            <div slot="title" class="text-base font-medium text-foreground">Active Users</div>
+            <div class="text-2xl font-bold text-foreground">1,234</div>
+            <div class="text-xs text-muted-foreground">+12% from last month</div>
+          </modus-card>
+          <modus-card [padding]="'compact'" [bordered]="true">
+            <div slot="title" class="text-base font-medium text-foreground">Revenue</div>
+            <div class="text-2xl font-bold text-foreground">$45.6K</div>
+            <div class="text-xs text-muted-foreground">+8% from last month</div>
+          </modus-card>
+          <modus-card [padding]="'compact'" [bordered]="true">
+            <div slot="title" class="text-base font-medium text-foreground">Tasks</div>
+            <div class="text-2xl font-bold text-foreground">89</div>
+            <div class="text-xs text-muted-foreground">12 pending review</div>
+          </modus-card>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class CardDemoPageComponent {}

package/templates/angular/src/app/demos/checkbox/checkbox-demo.component.ts

@@ -0,0 +1,71 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemoPageComponent } from '../shared/demo-page.component';
+import { DemoExampleComponent } from '../shared/demo-example.component';
+import { ModusCheckboxComponent } from '../../components/modus-checkbox.component';
+
+/**
+ * Demo page showcasing the Modus Checkbox component.
+ *
+ * Demonstrates checkbox features including:
+ * - Checked and unchecked states
+ * - Indeterminate state
+ * - Different sizes (sm, md, lg)
+ * - Disabled state
+ * - Required checkbox
+ */
+@Component({
+  selector: 'app-checkbox-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusCheckboxComponent],
+  template: `
+    <demo-page
+      title="Modus Checkbox"
+      description="Checkboxes allow users to select one or more options from a list. Use checkboxes for multiple selections and when users need to toggle individual options."
+    >
+      <demo-example
+        title="Checkbox States"
+        description="Different checkbox states: unchecked, checked, and indeterminate."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-checkbox label="Unchecked" [value]="false" />
+          <modus-checkbox label="Checked" [value]="true" />
+          <modus-checkbox label="Indeterminate" [indeterminate]="true" />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Checkbox Sizes"
+        description="Different sizes for various contexts and visual hierarchy."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-checkbox label="Small checkbox" size="sm" [value]="true" />
+          <modus-checkbox label="Medium checkbox (default)" size="md" [value]="true" />
+          <modus-checkbox label="Large checkbox" size="lg" [value]="true" />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Disabled State"
+        description="Checkboxes in disabled state for unavailable options."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-checkbox label="Disabled unchecked" [disabled]="true" [value]="false" />
+          <modus-checkbox label="Disabled checked" [disabled]="true" [value]="true" />
+          <modus-checkbox label="Disabled indeterminate" [disabled]="true" [indeterminate]="true" />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Required Checkbox"
+        description="Mark checkboxes as required for form validation."
+      >
+        <div class="flex flex-col gap-4">
+          <modus-checkbox label="I agree to the terms (required)" [required]="true" />
+          <modus-checkbox label="Confirm email subscription (required)" [required]="true" />
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class CheckboxDemoPageComponent {}

package/templates/angular/src/app/demos/chip/chip-demo.component.ts

@@ -0,0 +1,183 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemoPageComponent } from '../shared/demo-page.component';
+import { DemoExampleComponent } from '../shared/demo-example.component';
+import { ModusChipComponent } from '../../components/modus-chip.component';
+
+/**
+ * Demo page showcasing the Modus Chip component.
+ *
+ * Demonstrates chip features including:
+ * - Basic chips with labels
+ * - Chip variants (filled, outline)
+ * - Different sizes (sm, md, lg)
+ * - Active state for selections
+ * - Disabled state
+ * - Chips with remove button
+ * - Error state for validation
+ * - Interactive toggle/filter patterns
+ * - Deletable tag patterns
+ */
+@Component({
+  selector: 'app-chip-demo-page',
+  standalone: true,
+  imports: [CommonModule, DemoPageComponent, DemoExampleComponent, ModusChipComponent],
+  template: `
+    <demo-page
+      title="Modus Chip"
+      description="Compact visual elements for tags, selections, or status pills. Chips support filled/outline variants, three sizes, active/error/disabled states, and optional remove buttons."
+    >
+      <demo-example
+        title="Removable Tags"
+        description="Chips with remove buttons for deletable items like tags, filters, or selections."
+      >
+        <div class="p-6 rounded-lg bg-card border-default">
+          <div class="text-base font-semibold mb-2 text-foreground">Applied Tags</div>
+          <div class="text-sm text-muted-foreground mb-4">Click the X to remove tags</div>
+          @if (activeTags().length > 0) {
+            <div class="flex flex-wrap gap-3">
+              @for (tag of activeTags(); track tag.id) {
+                <modus-chip
+                  [label]="tag.label"
+                  [showRemove]="true"
+                  (chipRemove)="removeTag(tag.id)"
+                />
+              }
+            </div>
+          } @else {
+            <div class="text-sm text-muted-foreground italic">No tags applied</div>
+          }
+          @if (removedTags().length > 0) {
+            <div class="mt-4 pt-4 border-top-default flex items-center gap-3">
+              <div class="text-sm text-muted-foreground">Removed:</div>
+              @for (tag of removedTags(); track tag.id) {
+                <modus-chip [label]="tag.label" [disabled]="true" size="sm" />
+              }
+              <button class="text-sm text-primary hover:underline ml-2" (click)="restoreTags()">
+                Restore all
+              </button>
+            </div>
+          }
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Chip Variants"
+        description="Two visual styles: filled (solid background) and outline (transparent with border)."
+      >
+        <div class="flex flex-col gap-6">
+          <div>
+            <div class="text-sm font-medium mb-3 text-muted-foreground">Filled (Default)</div>
+            <div class="flex flex-wrap gap-3">
+              <modus-chip label="Default" variant="filled" />
+              <modus-chip label="Active" variant="filled" [active]="true" />
+              <modus-chip label="Removable" variant="filled" [showRemove]="true" />
+            </div>
+          </div>
+          <div>
+            <div class="text-sm font-medium mb-3 text-muted-foreground">Outline</div>
+            <div class="flex flex-wrap gap-3">
+              <modus-chip label="Default" variant="outline" />
+              <modus-chip label="Active" variant="outline" [active]="true" />
+              <modus-chip label="Removable" variant="outline" [showRemove]="true" />
+            </div>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Chip Sizes"
+        description="Three size options: sm (20px), md (24px), and lg (28px) for different contexts."
+      >
+        <div class="flex flex-wrap items-center gap-4">
+          <modus-chip label="Small" size="sm" />
+          <modus-chip label="Medium" size="md" />
+          <modus-chip label="Large" size="lg" />
+        </div>
+        <div class="flex flex-wrap items-center gap-4 mt-4">
+          <modus-chip label="Small" size="sm" variant="outline" [active]="true" />
+          <modus-chip label="Medium" size="md" variant="outline" [active]="true" />
+          <modus-chip label="Large" size="lg" variant="outline" [active]="true" />
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="States"
+        description="Active state for selections, disabled state for unavailable options, and error state for validation."
+      >
+        <div class="flex flex-col gap-6">
+          <div>
+            <div class="text-sm font-medium mb-3 text-muted-foreground">Active State</div>
+            <div class="flex flex-wrap gap-3">
+              <modus-chip label="Selected" [active]="true" />
+              <modus-chip label="Pressed" [active]="true" variant="outline" />
+            </div>
+          </div>
+          <div>
+            <div class="text-sm font-medium mb-3 text-muted-foreground">Disabled State</div>
+            <div class="flex flex-wrap gap-3">
+              <modus-chip label="Disabled" [disabled]="true" />
+              <modus-chip label="Disabled Outline" [disabled]="true" variant="outline" />
+              <modus-chip label="Disabled Active" [disabled]="true" [active]="true" />
+            </div>
+          </div>
+          <div>
+            <div class="text-sm font-medium mb-3 text-muted-foreground">Error State</div>
+            <div class="flex flex-wrap gap-3">
+              <modus-chip label="Invalid" [hasError]="true" />
+              <modus-chip label="Error" [hasError]="true" variant="outline" />
+              <modus-chip label="Remove Error" [hasError]="true" [showRemove]="true" />
+            </div>
+          </div>
+        </div>
+      </demo-example>
+
+      <demo-example
+        title="Status Pills"
+        description="Use chips as status indicators with appropriate styling."
+      >
+        <div class="flex flex-col gap-4">
+          <div class="flex items-center gap-4">
+            <div class="w-24 text-sm text-muted-foreground">Order Status:</div>
+            <modus-chip label="Pending" variant="outline" />
+          </div>
+          <div class="flex items-center gap-4">
+            <div class="w-24 text-sm text-muted-foreground">Active:</div>
+            <modus-chip label="In Progress" [active]="true" />
+          </div>
+          <div class="flex items-center gap-4">
+            <div class="w-24 text-sm text-muted-foreground">Completed:</div>
+            <modus-chip label="Done" variant="filled" />
+          </div>
+          <div class="flex items-center gap-4">
+            <div class="w-24 text-sm text-muted-foreground">Error:</div>
+            <modus-chip label="Failed" [hasError]="true" />
+          </div>
+        </div>
+      </demo-example>
+    </demo-page>
+  `,
+})
+export class ChipDemoPageComponent {
+  // Removable tags demo
+  readonly activeTags = signal([
+    { id: 'urgent', label: 'Urgent' },
+    { id: 'review', label: 'Needs Review' },
+    { id: 'approved', label: 'Approved' },
+    { id: 'archived', label: 'Archived' },
+  ]);
+  readonly removedTags = signal<Array<{ id: string; label: string }>>([]);
+
+  removeTag(tagId: string): void {
+    const tag = this.activeTags().find((t) => t.id === tagId);
+    if (tag) {
+      this.activeTags.update((tags) => tags.filter((t) => t.id !== tagId));
+      this.removedTags.update((tags) => [...tags, tag]);
+    }
+  }
+
+  restoreTags(): void {
+    this.activeTags.update((tags) => [...tags, ...this.removedTags()]);
+    this.removedTags.set([]);
+  }
+}