@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/src/app/components/modus-collapse.component.ts

@@ -0,0 +1,118 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcCollapse } from '@trimble-oss/moduswebcomponents-angular';
+
+/**
+ * Collapse size variant
+ */
+export type CollapseSize = 'xs' | 'sm' | 'md' | 'lg';
+
+/**
+ * Collapse options interface for configuring the collapse header
+ */
+export interface ICollapseOptions {
+  /** The title to render in the collapse header */
+  title: string;
+  /** The description to render in the collapse header */
+  description?: string;
+  /** The Modus icon name to render in the collapse header */
+  icon?: string;
+  /** The icon's aria-label */
+  iconAriaLabel?: string;
+  /** The size of the collapse header */
+  size?: CollapseSize;
+}
+
+/**
+ * Props for the ModusCollapse component
+ */
+export interface ModusCollapseProps {
+  /** Indicates that the component should have a border */
+  bordered?: boolean;
+  /** Custom CSS class to apply to the outer div */
+  className?: string;
+  /** Controls whether the collapse is expanded or not */
+  expanded?: boolean;
+  /** A unique identifier used to set the id attributes of various elements */
+  collapseId?: string;
+  /** Configuration options for rendering the pre-laid out collapse component */
+  options?: ICollapseOptions;
+}
+
+/**
+ * Renders a Modus collapse component for showing and hiding content.
+ *
+ * The collapse component supports two slots:
+ * - `header` slot: For custom header content (when options is not set)
+ * - `content` slot: For the collapsible content
+ *
+ * @example
+ * ```html
+ * <!-- Basic collapse with options -->
+ * <modus-collapse [options]="collapseOptions">
+ *   <div slot="content">Collapse content</div>
+ * </modus-collapse>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Custom header collapse -->
+ * <modus-collapse>
+ *   <div slot="header">Custom Header</div>
+ *   <div slot="content">Collapse content</div>
+ * </modus-collapse>
+ * ```
+ */
+@Component({
+  selector: 'modus-collapse',
+  standalone: true,
+  imports: [CommonModule, ModusWcCollapse],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-collapse
+      [bordered]="bordered()"
+      [customClass]="className()"
+      [expanded]="expanded()"
+      [collapseId]="collapseId()"
+      [options]="options()"
+      [attr.aria-label]="ariaLabel()"
+      (expandedChange)="handleExpandedChange($event)"
+    >
+      <ng-content></ng-content>
+    </modus-wc-collapse>
+  `,
+})
+export class ModusCollapseComponent {
+  /** Indicates that the component should have a border */
+  readonly bordered = input<boolean | undefined>(false);
+
+  /** Custom CSS class to apply to the outer div */
+  readonly className = input<string | undefined>();
+
+  /** Controls whether the collapse is expanded or not */
+  readonly expanded = input<boolean | undefined>(false);
+
+  /** A unique identifier used to set the id attributes of various elements */
+  readonly collapseId = input<string | undefined>();
+
+  /** Configuration options for rendering the pre-laid out collapse component */
+  readonly options = input<ICollapseOptions | undefined>();
+
+  /** The ARIA label for the collapse */
+  readonly ariaLabel = input<string | undefined>();
+
+  /**
+   * Event emitted when the expanded prop is internally changed.
+   * Emits an object with `expanded` (boolean) property.
+   */
+  readonly expandedChange = output<{ expanded: boolean }>();
+
+  /**
+   * Handles expanded change events from the Modus Collapse Web Component
+   *
+   * @param event - The custom event from the collapse containing expanded state
+   */
+  handleExpandedChange(event: CustomEvent<{ expanded: boolean }>): void {
+    this.expandedChange.emit(event.detail);
+  }
+}

package/templates/angular/src/app/components/modus-date.component.ts

@@ -0,0 +1,165 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcDate } from '@trimble-oss/moduswebcomponents-angular';
+import type {
+  Components,
+  DaisySize,
+  IInputFeedbackProp,
+  WeekStartDay,
+} from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusDateComponent}.
+ */
+export interface ModusDateProps {
+  /** Enables the bordered input style. */
+  bordered?: Components.ModusWcDate['bordered'];
+  /** Custom CSS class applied to the host element. */
+  className?: Components.ModusWcDate['customClass'];
+  /** Disables input interaction. */
+  disabled?: Components.ModusWcDate['disabled'];
+  /** Feedback message displayed below the control. */
+  feedback?: IInputFeedbackProp;
+  /** Date format pattern. */
+  format?: 'yyyy-mm-dd' | 'dd-mm-yyyy' | 'yyyy/mm/dd' | 'dd/mm/yyyy' | 'MMM DD, YYYY';
+  /** Identifier applied to the native input. */
+  inputId?: Components.ModusWcDate['inputId'];
+  /** Tab index applied to the native input. */
+  inputTabIndex?: Components.ModusWcDate['inputTabIndex'];
+  /** Input label text. */
+  label?: Components.ModusWcDate['label'];
+  /** Maximum allowed date value. */
+  max?: Components.ModusWcDate['max'];
+  /** Minimum allowed date value. */
+  min?: Components.ModusWcDate['min'];
+  /** Name attribute submitted in forms. */
+  name?: Components.ModusWcDate['name'];
+  /** Puts the input in read-only mode. */
+  readOnly?: Components.ModusWcDate['readOnly'];
+  /** Marks the input as required. */
+  required?: Components.ModusWcDate['required'];
+  /** Control size token. */
+  size?: DaisySize;
+  /** Current date value. */
+  value?: Components.ModusWcDate['value'];
+  /** First day of the week for the calendar view. */
+  weekStartDay?: WeekStartDay;
+}
+
+/**
+ * Angular wrapper for the Modus date input web component.
+ */
+@Component({
+  selector: 'modus-date',
+  imports: [CommonModule, ModusWcDate],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-date
+      [bordered]="bordered()"
+      [customClass]="className()"
+      [disabled]="disabled()"
+      [feedback]="feedback()"
+      [format]="format()"
+      [inputId]="inputId()"
+      [inputTabIndex]="inputTabIndex()"
+      [label]="label()"
+      [max]="max()"
+      [min]="min()"
+      [name]="name()"
+      [readOnly]="readOnly()"
+      [required]="required()"
+      [size]="size()"
+      [value]="value()"
+      [weekStartDay]="weekStartDay()"
+      (inputBlur)="handleBlur($event)"
+      (inputChange)="handleChange($event)"
+      (inputFocus)="handleFocus($event)"
+      (calendarMonthChange)="handleCalendarMonthChange($event)"
+      (calendarYearChange)="handleCalendarYearChange($event)"
+    />
+  `,
+})
+export class ModusDateComponent {
+  /** Enables the bordered input style. */
+  readonly bordered = input<boolean | undefined>(true);
+
+  /** Custom CSS class applied to the host element. */
+  readonly className = input<string | undefined>();
+
+  /** Disables input interaction. */
+  readonly disabled = input<boolean | undefined>(false);
+
+  /** Feedback message displayed below the control. */
+  readonly feedback = input<IInputFeedbackProp | undefined>();
+
+  /** Date format pattern. */
+  readonly format = input<'yyyy-mm-dd' | 'dd-mm-yyyy' | 'yyyy/mm/dd' | 'dd/mm/yyyy' | 'MMM DD, YYYY' | undefined>('dd-mm-yyyy');
+
+  /** Identifier applied to the native input. */
+  readonly inputId = input<string | undefined>();
+
+  /** Tab index applied to the native input. */
+  readonly inputTabIndex = input<number | undefined>();
+
+  /** Input label text. */
+  readonly label = input<string | undefined>();
+
+  /** Maximum allowed date value. */
+  readonly max = input<string | undefined>();
+
+  /** Minimum allowed date value. */
+  readonly min = input<string | undefined>();
+
+  /** Name attribute submitted in forms. */
+  readonly name = input<string | undefined>('');
+
+  /** Puts the input in read-only mode. */
+  readonly readOnly = input<boolean | undefined>(false);
+
+  /** Marks the input as required. */
+  readonly required = input<boolean | undefined>(false);
+
+  /** Control size token. */
+  readonly size = input<DaisySize | undefined>('md');
+
+  /** Current date value. */
+  readonly value = input<string | undefined>();
+
+  /** First day of the week for the calendar view. */
+  readonly weekStartDay = input<WeekStartDay | undefined>('sunday');
+
+  /** Emits when the input loses focus. */
+  readonly inputBlur = output<FocusEvent>();
+
+  /** Emits when the value changes. */
+  readonly inputChange = output<InputEvent>();
+
+  /** Emits when the input gains focus. */
+  readonly inputFocus = output<FocusEvent>();
+
+  /** Emits when the calendar month selection changes. */
+  readonly calendarMonthChange = output<number>();
+
+  /** Emits when the calendar year selection changes. */
+  readonly calendarYearChange = output<number>();
+
+  handleBlur(event: CustomEvent<FocusEvent>): void {
+    this.inputBlur.emit(event.detail);
+  }
+
+  handleChange(event: CustomEvent<InputEvent>): void {
+    this.inputChange.emit(event.detail);
+  }
+
+  handleFocus(event: CustomEvent<FocusEvent>): void {
+    this.inputFocus.emit(event.detail);
+  }
+
+  handleCalendarMonthChange(event: CustomEvent<number>): void {
+    this.calendarMonthChange.emit(event.detail);
+  }
+
+  handleCalendarYearChange(event: CustomEvent<number>): void {
+    this.calendarYearChange.emit(event.detail);
+  }
+}

package/templates/angular/src/app/components/modus-dropdown-menu.component.ts

@@ -0,0 +1,108 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcDropdownMenu, ModusWcMenu } from '@trimble-oss/moduswebcomponents-angular';
+import type {
+  Components,
+  DaisySize,
+  ModusSize,
+  PopoverPlacement,
+} from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusDropdownMenuComponent}.
+ */
+export interface ModusDropdownMenuProps {
+  /** Accessible label for the trigger button. */
+  buttonAriaLabel?: Components.ModusWcDropdownMenu['buttonAriaLabel'];
+  /** Button color token. */
+  buttonColor?: Components.ModusWcDropdownMenu['buttonColor'];
+  /** Button size token. */
+  buttonSize?: DaisySize;
+  /** Button visual variant. */
+  buttonVariant?: Components.ModusWcDropdownMenu['buttonVariant'];
+  /** CSS class applied to the host element. */
+  className?: Components.ModusWcDropdownMenu['customClass'];
+  /** Disables the dropdown trigger. */
+  disabled?: Components.ModusWcDropdownMenu['disabled'];
+  /** Adds a border to the menu panel. */
+  menuBordered?: Components.ModusWcDropdownMenu['menuBordered'];
+  /** Pixel offset between the button and menu. */
+  menuOffset?: Components.ModusWcDropdownMenu['menuOffset'];
+  /** Menu placement relative to the button. */
+  menuPlacement?: PopoverPlacement;
+  /** Menu size token. */
+  menuSize?: ModusSize;
+  /** Controls menu visibility. */
+  menuVisible?: Components.ModusWcDropdownMenu['menuVisible'];
+}
+
+/**
+ * Angular wrapper for the Modus dropdown menu web component.
+ */
+@Component({
+  selector: 'modus-dropdown-menu',
+  imports: [CommonModule, ModusWcDropdownMenu],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-dropdown-menu
+      [buttonAriaLabel]="buttonAriaLabel()"
+      [buttonColor]="buttonColor()"
+      [buttonSize]="buttonSize()"
+      [buttonVariant]="buttonVariant()"
+      [customClass]="className()"
+      [disabled]="disabled()"
+      [menuBordered]="menuBordered()"
+      [menuOffset]="menuOffset()"
+      [menuPlacement]="menuPlacement()"
+      [menuSize]="menuSize()"
+      [menuVisible]="menuVisible()"
+      (menuVisibilityChange)="handleVisibilityChange($event)"
+    >
+      <ng-content select="[slot='button']" slot="button" />
+      <ng-content select="[slot='menu']" slot="menu" />
+    </modus-wc-dropdown-menu>
+  `,
+})
+export class ModusDropdownMenuComponent {
+  /** Accessible label for the trigger button. */
+  readonly buttonAriaLabel = input<string | undefined>();
+
+  /** Button color token. */
+  readonly buttonColor = input<Components.ModusWcDropdownMenu['buttonColor'] | undefined>(
+    'primary'
+  );
+
+  /** Button size token. */
+  readonly buttonSize = input<DaisySize | undefined>('md');
+
+  /** Button visual variant. */
+  readonly buttonVariant = input<'borderless' | 'filled' | 'outlined' | undefined>('filled');
+
+  /** CSS class applied to the host element. */
+  readonly className = input<string | undefined>();
+
+  /** Disables the dropdown trigger. */
+  readonly disabled = input<boolean | undefined>(false);
+
+  /** Adds a border to the menu panel. */
+  readonly menuBordered = input<boolean | undefined>(true);
+
+  /** Pixel offset between the button and menu. */
+  readonly menuOffset = input<number | undefined>(10);
+
+  /** Menu placement relative to the button. */
+  readonly menuPlacement = input<PopoverPlacement | undefined>('bottom-start');
+
+  /** Menu size token. */
+  readonly menuSize = input<ModusSize | undefined>('md');
+
+  /** Controls menu visibility. */
+  readonly menuVisible = input<boolean | undefined>(false);
+
+  /** Emits when the menu visibility changes. */
+  readonly menuVisibilityChange = output<{ isVisible: boolean }>();
+
+  handleVisibilityChange(event: CustomEvent<{ isVisible: boolean }>): void {
+    this.menuVisibilityChange.emit(event.detail);
+  }
+}

package/templates/angular/src/app/components/modus-file-dropzone.component.ts

@@ -0,0 +1,121 @@
+import { ChangeDetectionStrategy, Component, ElementRef, ViewChild, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcFileDropzone } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusFileDropzoneComponent}.
+ */
+export interface ModusFileDropzoneProps {
+  /** Accepted file types (e.g. `.jpg,.png`). */
+  acceptFileTypes?: Components.ModusWcFileDropzone['acceptFileTypes'];
+  /** Optional CSS class applied to the dropzone. */
+  className?: Components.ModusWcFileDropzone['customClass'];
+  /** Disables the dropzone interaction. */
+  disabled?: Components.ModusWcFileDropzone['disabled'];
+  /** Instructions displayed while dragging files. */
+  fileDraggedOverInstructions?: Components.ModusWcFileDropzone['fileDraggedOverInstructions'];
+  /** Shows contextual icons for upload, success, and error states. */
+  includeStateIcon?: Components.ModusWcFileDropzone['includeStateIcon'];
+  /** Default instructions displayed in the dropzone. */
+  instructions?: Components.ModusWcFileDropzone['instructions'];
+  /** Error message shown for invalid file type. */
+  invalidFileTypeMessage?: Components.ModusWcFileDropzone['invalidFileTypeMessage'];
+  /** Maximum number of files allowed. */
+  maxFileCount?: Components.ModusWcFileDropzone['maxFileCount'];
+  /** Maximum file name length. */
+  maxFileNameLength?: Components.ModusWcFileDropzone['maxFileNameLength'];
+  /** Maximum total file size in bytes. */
+  maxTotalFileSizeBytes?: Components.ModusWcFileDropzone['maxTotalFileSizeBytes'];
+  /** Allow multiple file selection. */
+  multiple?: Components.ModusWcFileDropzone['multiple'];
+  /** Success message shown after valid upload. */
+  successMessage?: Components.ModusWcFileDropzone['successMessage'];
+}
+
+/**
+ * Angular wrapper for the Modus file dropzone web component.
+ */
+@Component({
+  selector: 'modus-file-dropzone',
+  imports: [CommonModule, ModusWcFileDropzone],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-file-dropzone
+      [acceptFileTypes]="acceptFileTypes()"
+      [customClass]="className()"
+      [disabled]="disabled()"
+      [fileDraggedOverInstructions]="fileDraggedOverInstructions()"
+      [includeStateIcon]="includeStateIcon()"
+      [instructions]="instructions()"
+      [invalidFileTypeMessage]="invalidFileTypeMessage()"
+      [maxFileCount]="maxFileCount()"
+      [maxFileNameLength]="maxFileNameLength()"
+      [maxTotalFileSizeBytes]="maxTotalFileSizeBytes()"
+      [multiple]="multiple()"
+      [successMessage]="successMessage()"
+      (fileSelect)="handleFileSelect($event)"
+    >
+      <ng-content select="[slot='dropzone']" slot="dropzone" />
+    </modus-wc-file-dropzone>
+  `,
+})
+export class ModusFileDropzoneComponent {
+  @ViewChild(ModusWcFileDropzone, { read: ElementRef })
+  private readonly dropzoneElement?: ElementRef<HTMLElement>;
+
+  /** Accepted file types (e.g. `.jpg,.png`). */
+  readonly acceptFileTypes = input<string | undefined>();
+
+  /** Optional CSS class applied to the dropzone. */
+  readonly className = input<string | undefined>();
+
+  /** Disables the dropzone interaction. */
+  readonly disabled = input<boolean | undefined>(false);
+
+  /** Instructions displayed while dragging files. */
+  readonly fileDraggedOverInstructions = input<string | undefined>();
+
+  /** Shows contextual icons for upload, success, and error states. */
+  readonly includeStateIcon = input<boolean | undefined>(true);
+
+  /** Default instructions displayed in the dropzone. */
+  readonly instructions = input<string | undefined>();
+
+  /** Error message shown for invalid file type. */
+  readonly invalidFileTypeMessage = input<string | undefined>();
+
+  /** Maximum number of files allowed. */
+  readonly maxFileCount = input<number | undefined>();
+
+  /** Maximum file name length. */
+  readonly maxFileNameLength = input<number | undefined>();
+
+  /** Maximum total file size in bytes. */
+  readonly maxTotalFileSizeBytes = input<number | undefined>();
+
+  /** Allow multiple file selection. */
+  readonly multiple = input<boolean | undefined>(false);
+
+  /** Success message shown after valid upload. */
+  readonly successMessage = input<string | undefined>();
+
+  /** Emits selected files when the user drops or chooses files. */
+  readonly fileSelect = output<FileList>();
+
+  /**
+   * Resets the dropzone to its initial state.
+   */
+  async reset(): Promise<void> {
+    const element = this.dropzoneElement?.nativeElement as
+      | (HTMLElement & { reset?: () => Promise<void> })
+      | undefined;
+    if (element?.reset) {
+      await element.reset();
+    }
+  }
+
+  handleFileSelect(event: CustomEvent<FileList>): void {
+    this.fileSelect.emit(event.detail);
+  }
+}

package/templates/angular/src/app/components/modus-handle.component.ts

@@ -0,0 +1,96 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcHandle } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusHandleComponent}.
+ */
+export interface ModusHandleProps {
+  /** Custom CSS class applied to the handle. */
+  className?: Components.ModusWcHandle['customClass'];
+  /** Initial split percentage for the left/top panel. */
+  defaultSplit?: Components.ModusWcHandle['defaultSplit'];
+  /** Density token controlling handle spacing. */
+  density?: Components.ModusWcHandle['density'];
+  /** Left/top target element or selector. */
+  leftTarget?: Components.ModusWcHandle['leftTarget'];
+  /** Right/bottom target element or selector. */
+  rightTarget?: Components.ModusWcHandle['rightTarget'];
+  /** Orientation of the handle. */
+  orientation?: Components.ModusWcHandle['orientation'];
+  /** Size of the handle bar. */
+  size?: Components.ModusWcHandle['size'];
+  /** Handle type (bar or button). */
+  type?: Components.ModusWcHandle['type'];
+  /** Button color for button-style handles. */
+  buttonColor?: Components.ModusWcHandle['buttonColor'];
+  /** Button size for button-style handles. */
+  buttonSize?: Components.ModusWcHandle['buttonSize'];
+  /** Button variant for button-style handles. */
+  buttonVariant?: Components.ModusWcHandle['buttonVariant'];
+  /** Accessible label for the handle. */
+  ariaLabel?: string;
+}
+
+/**
+ * Angular wrapper for the Modus handle web component.
+ */
+@Component({
+  selector: 'modus-handle',
+  imports: [CommonModule, ModusWcHandle],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-handle
+      [customClass]="className()"
+      [defaultSplit]="defaultSplit()"
+      [density]="density()"
+      [leftTarget]="leftTarget()"
+      [rightTarget]="rightTarget()"
+      [orientation]="orientation()"
+      [size]="size()"
+      [type]="type()"
+      [buttonColor]="buttonColor()"
+      [buttonSize]="buttonSize()"
+      [buttonVariant]="buttonVariant()"
+      [attr.aria-label]="ariaLabel()"
+    />
+  `,
+})
+export class ModusHandleComponent {
+  /** Custom CSS class applied to the handle. */
+  readonly className = input<string | undefined>();
+
+  /** Initial split percentage for the left/top panel. */
+  readonly defaultSplit = input<Components.ModusWcHandle['defaultSplit'] | undefined>();
+
+  /** Density token controlling handle spacing. */
+  readonly density = input<Components.ModusWcHandle['density'] | undefined>();
+
+  /** Left/top target element or selector. */
+  readonly leftTarget = input<Components.ModusWcHandle['leftTarget'] | undefined>();
+
+  /** Right/bottom target element or selector. */
+  readonly rightTarget = input<Components.ModusWcHandle['rightTarget'] | undefined>();
+
+  /** Orientation of the handle. */
+  readonly orientation = input<Components.ModusWcHandle['orientation'] | undefined>('horizontal');
+
+  /** Size of the handle bar. */
+  readonly size = input<Components.ModusWcHandle['size'] | undefined>('default');
+
+  /** Handle type (bar or button). */
+  readonly type = input<Components.ModusWcHandle['type'] | undefined>('bar');
+
+  /** Button color for button-style handles. */
+  readonly buttonColor = input<Components.ModusWcHandle['buttonColor'] | undefined>('tertiary');
+
+  /** Button size for button-style handles. */
+  readonly buttonSize = input<Components.ModusWcHandle['buttonSize'] | undefined>('md');
+
+  /** Button variant for button-style handles. */
+  readonly buttonVariant = input<Components.ModusWcHandle['buttonVariant'] | undefined>('filled');
+
+  /** Accessible label for the handle. */
+  readonly ariaLabel = input<string | undefined>();
+}

package/templates/angular/src/app/components/modus-icon.component.ts

@@ -0,0 +1,81 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcIcon } from '@trimble-oss/moduswebcomponents-angular';
+
+/**
+ * Available variant styles for Modus icons.
+ */
+export type ModusIconVariant = 'outlined' | 'solid' | undefined;
+
+/**
+ * Supported icon size tokens.
+ */
+export type ModusIconSize = 'xs' | 'sm' | 'md' | 'lg';
+
+/**
+ * Input properties for the ModusIconComponent wrapper.
+ */
+export interface ModusIconProps {
+  /** The icon glyph name from the Modus icon font. */
+  name: string;
+  /** Optional variant that selects the icon font family. */
+  variant?: ModusIconVariant;
+  /** Configures the size utility applied to the icon element. */
+  size?: ModusIconSize;
+  /** Indicates whether the icon is decorative-only. */
+  decorative?: boolean;
+  /** Custom CSS class applied to the `<modus-wc-icon>` host. */
+  className?: string;
+  /** Accessible label exposed when `decorative` is false. */
+  ariaLabel?: string;
+}
+
+/**
+ * Angular wrapper for the Modus Web Component icon.
+ *
+ * Provides a typed, signal-driven API and supports projecting the icon name from Angular templates.
+ *
+ * @example
+ * ```html
+ * <modus-icon name="check_circle" variant="outlined" ariaLabel="Success" />
+ * ```
+ */
+@Component({
+  selector: 'modus-icon',
+  imports: [CommonModule, ModusWcIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-icon
+      [name]="name()"
+      [variant]="variant()"
+      [size]="size()"
+      [decorative]="decorative()"
+      [customClass]="className()"
+      [attr.aria-label]="computedAriaLabel()"
+    />
+  `,
+})
+export class ModusIconComponent {
+  /** The icon glyph name from the Modus icon font. */
+  readonly name = input.required<string>();
+
+  /** Optional variant that selects the icon font family. */
+  readonly variant = input<ModusIconVariant>(undefined);
+
+  /** Configures the size utility applied to the icon element. */
+  readonly size = input<ModusIconSize>('md');
+
+  /** Indicates whether the icon is decorative-only. */
+  readonly decorative = input<boolean>(true);
+
+  /** Custom CSS class applied to the `<modus-wc-icon>` host. */
+  readonly className = input<string | undefined>();
+
+  /** Accessible label exposed when `decorative` is false. */
+  readonly ariaLabel = input<string | undefined>();
+
+  /** Determines the correct aria-label binding based on decorative state. */
+  readonly computedAriaLabel = computed(() =>
+    this.decorative() ? undefined : this.ariaLabel() ?? `${this.name()} icon`
+  );
+}