@julianoczkowski/create-trimble-app 2.0.0

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

@@ -0,0 +1,303 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcNavbar } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Text replacements for the navbar.
+ */
+export interface INavbarTextOverrides {
+  /** Replaces the text for "Apps" in the condensed menu. */
+  apps?: string;
+  /** Replaces the text for "Help" in the condensed menu. */
+  help?: string;
+  /** Replaces the text for "Notifications" in the condensed menu. */
+  notifications?: string;
+  /** Replaces the text for "Search" in the condensed menu. */
+  search?: string;
+}
+
+/**
+ * Controls the visibility of individual navbar buttons.
+ */
+export interface INavbarVisibility {
+  /** Controls the visibility of the AI button. */
+  ai?: boolean;
+  /** Controls visibility of the apps button. */
+  apps?: boolean;
+  /** Controls visibility of the help button. */
+  help?: boolean;
+  /** Controls visibility of the main menu button. */
+  mainMenu?: boolean;
+  /** Controls visibility of the notifications button. */
+  notifications?: boolean;
+  /** Controls visibility of the search button. */
+  search?: boolean;
+  /** Controls visibility of the search input. */
+  searchInput?: boolean;
+  /** Controls visibility of the user button. */
+  user?: boolean;
+}
+
+/**
+ * User information used to render the user card.
+ */
+export interface INavbarUserCard {
+  /** The alt value to set on the avatar. */
+  avatarAlt?: string;
+  /** The avatar image source value. */
+  avatarSrc?: string;
+  /** The email address of the user. */
+  email: string;
+  /** Text override for the Access MyTrimble button. */
+  myTrimbleButton?: string;
+  /** The name of the user. */
+  name: string;
+  /** Text override for the Sign out button. */
+  signOutButton?: string;
+}
+
+/**
+ * Props supported by the {@link ModusNavbarComponent}.
+ */
+export interface ModusNavbarProps {
+  /** The open state of the apps menu. */
+  appsMenuOpen?: Components.ModusWcNavbar['appsMenuOpen'];
+  /** Applies condensed layout and styling. */
+  condensed?: Components.ModusWcNavbar['condensed'];
+  /** The open state of the condensed menu. */
+  condensedMenuOpen?: Components.ModusWcNavbar['condensedMenuOpen'];
+  /** Custom CSS class applied to the host element. */
+  className?: Components.ModusWcNavbar['customClass'];
+  /** The open state of the main menu. */
+  mainMenuOpen?: Components.ModusWcNavbar['mainMenuOpen'];
+  /** The open state of the notifications menu. */
+  notificationsMenuOpen?: Components.ModusWcNavbar['notificationsMenuOpen'];
+  /** Debounce time in milliseconds for search input changes. */
+  searchDebounceMs?: Components.ModusWcNavbar['searchDebounceMs'];
+  /** The open state of the search input. */
+  searchInputOpen?: Components.ModusWcNavbar['searchInputOpen'];
+  /** Text replacements for the navbar. */
+  textOverrides?: INavbarTextOverrides;
+  /** User information used to render the user card. */
+  userCard: INavbarUserCard;
+  /** The open state of the user menu. */
+  userMenuOpen?: Components.ModusWcNavbar['userMenuOpen'];
+  /** The visibility of individual navbar buttons. */
+  visibility?: INavbarVisibility;
+}
+
+/**
+ * Angular wrapper for the Modus navbar web component.
+ *
+ * The navbar component supports projecting custom content into several slots:
+ * - `main-menu` slot: For custom main menu content
+ * - `notifications` slot: For custom notifications menu content
+ * - `apps` slot: For custom apps menu content
+ * - `start` slot: For custom content at the start of the navbar
+ * - `center` slot: For custom content at the center of the navbar
+ * - `end` slot: For custom content at the end of the navbar
+ *
+ * @example
+ * ```html
+ * <modus-navbar
+ *   [userCard]="userInfo"
+ *   [visibility]="{ user: true, search: true }"
+ *   (userMenuOpenChange)="handleUserMenuChange($event)"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'modus-navbar',
+  imports: [CommonModule, ModusWcNavbar],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-navbar
+      [appsMenuOpen]="appsMenuOpen()"
+      [condensed]="condensed()"
+      [condensedMenuOpen]="condensedMenuOpen()"
+      [customClass]="className()"
+      [mainMenuOpen]="mainMenuOpen()"
+      [notificationsMenuOpen]="notificationsMenuOpen()"
+      [searchDebounceMs]="searchDebounceMs()"
+      [searchInputOpen]="searchInputOpen()"
+      [textOverrides]="textOverrides()"
+      [userCard]="userCard()"
+      [userMenuOpen]="userMenuOpen()"
+      [visibility]="visibility()"
+      (aiClick)="handleAiClick($event)"
+      (appsClick)="handleAppsClick($event)"
+      (appsMenuOpenChange)="handleAppsMenuOpenChange($event)"
+      (condensedMenuOpenChange)="handleCondensedMenuOpenChange($event)"
+      (helpClick)="handleHelpClick($event)"
+      (mainMenuOpenChange)="handleMainMenuOpenChange($event)"
+      (myTrimbleClick)="handleMyTrimbleClick($event)"
+      (notificationsClick)="handleNotificationsClick($event)"
+      (notificationsMenuOpenChange)="handleNotificationsMenuOpenChange($event)"
+      (searchChange)="handleSearchChange($event)"
+      (searchClick)="handleSearchClick($event)"
+      (searchInputOpenChange)="handleSearchInputOpenChange($event)"
+      (signOutClick)="handleSignOutClick($event)"
+      (trimbleLogoClick)="handleTrimbleLogoClick($event)"
+      (userMenuOpenChange)="handleUserMenuOpenChange($event)"
+    >
+      <ng-content select="[slot='main-menu']" slot="main-menu" />
+      <ng-content select="[slot='notifications']" slot="notifications" />
+      <ng-content select="[slot='apps']" slot="apps" />
+      <ng-content select="[slot='start']" slot="start" />
+      <ng-content select="[slot='center']" slot="center" />
+      <ng-content select="[slot='end']" slot="end" />
+    </modus-wc-navbar>
+  `,
+})
+export class ModusNavbarComponent {
+  /** The open state of the apps menu. */
+  readonly appsMenuOpen = input<boolean | undefined>(false);
+
+  /** Applies condensed layout and styling. */
+  readonly condensed = input<boolean | undefined>(false);
+
+  /** The open state of the condensed menu. */
+  readonly condensedMenuOpen = input<boolean | undefined>(false);
+
+  /** Custom CSS class applied to the host element. */
+  readonly className = input<string | undefined>();
+
+  /** The open state of the main menu. */
+  readonly mainMenuOpen = input<boolean | undefined>(false);
+
+  /** The open state of the notifications menu. */
+  readonly notificationsMenuOpen = input<boolean | undefined>(false);
+
+  /** Debounce time in milliseconds for search input changes. */
+  readonly searchDebounceMs = input<number | undefined>(300);
+
+  /** The open state of the search input. */
+  readonly searchInputOpen = input<boolean | undefined>(false);
+
+  /** Text replacements for the navbar. */
+  readonly textOverrides = input<INavbarTextOverrides | undefined>();
+
+  /** User information used to render the user card. */
+  readonly userCard = input.required<INavbarUserCard>();
+
+  /** The open state of the user menu. */
+  readonly userMenuOpen = input<boolean | undefined>(false);
+
+  /** The visibility of individual navbar buttons. */
+  readonly visibility = input<INavbarVisibility | undefined>({
+    ai: false,
+    apps: false,
+    help: false,
+    mainMenu: false,
+    notifications: false,
+    search: false,
+    searchInput: false,
+    user: true,
+  });
+
+  /** Emits when the AI button is clicked or activated via keyboard. */
+  readonly aiClick = output<MouseEvent | KeyboardEvent>();
+
+  /** Emits when the apps button is clicked or activated via keyboard. */
+  readonly appsClick = output<MouseEvent | KeyboardEvent>();
+
+  /** Emits when the apps menu open state changes. */
+  readonly appsMenuOpenChange = output<boolean>();
+
+  /** Emits when the condensed menu open state changes. */
+  readonly condensedMenuOpenChange = output<boolean>();
+
+  /** Emits when the help button is clicked or activated via keyboard. */
+  readonly helpClick = output<MouseEvent | KeyboardEvent>();
+
+  /** Emits when the main menu open state changes. */
+  readonly mainMenuOpenChange = output<boolean>();
+
+  /** Emits when the user profile Access MyTrimble button is clicked. */
+  readonly myTrimbleClick = output<MouseEvent | KeyboardEvent>();
+
+  /** Emits when the notifications button is clicked or activated via keyboard. */
+  readonly notificationsClick = output<MouseEvent | KeyboardEvent>();
+
+  /** Emits when the notifications menu open state changes. */
+  readonly notificationsMenuOpenChange = output<boolean>();
+
+  /** Emits when the search input value is changed. */
+  readonly searchChange = output<{ value: string }>();
+
+  /** Emits when the search button is clicked or activated via keyboard. */
+  readonly searchClick = output<MouseEvent | KeyboardEvent>();
+
+  /** Emits when the search input open state changes. */
+  readonly searchInputOpenChange = output<boolean>();
+
+  /** Emits when the user profile sign out button is clicked. */
+  readonly signOutClick = output<MouseEvent | KeyboardEvent>();
+
+  /** Emits when the Trimble logo is clicked or activated via keyboard. */
+  readonly trimbleLogoClick = output<MouseEvent | KeyboardEvent>();
+
+  /** Emits when the user menu open state changes. */
+  readonly userMenuOpenChange = output<boolean>();
+
+  handleAiClick(event: CustomEvent<MouseEvent | KeyboardEvent>): void {
+    this.aiClick.emit(event.detail);
+  }
+
+  handleAppsClick(event: CustomEvent<MouseEvent | KeyboardEvent>): void {
+    this.appsClick.emit(event.detail);
+  }
+
+  handleAppsMenuOpenChange(event: CustomEvent<boolean>): void {
+    this.appsMenuOpenChange.emit(event.detail);
+  }
+
+  handleCondensedMenuOpenChange(event: CustomEvent<boolean>): void {
+    this.condensedMenuOpenChange.emit(event.detail);
+  }
+
+  handleHelpClick(event: CustomEvent<MouseEvent | KeyboardEvent>): void {
+    this.helpClick.emit(event.detail);
+  }
+
+  handleMainMenuOpenChange(event: CustomEvent<boolean>): void {
+    this.mainMenuOpenChange.emit(event.detail);
+  }
+
+  handleMyTrimbleClick(event: CustomEvent<MouseEvent | KeyboardEvent>): void {
+    this.myTrimbleClick.emit(event.detail);
+  }
+
+  handleNotificationsClick(event: CustomEvent<MouseEvent | KeyboardEvent>): void {
+    this.notificationsClick.emit(event.detail);
+  }
+
+  handleNotificationsMenuOpenChange(event: CustomEvent<boolean>): void {
+    this.notificationsMenuOpenChange.emit(event.detail);
+  }
+
+  handleSearchChange(event: CustomEvent<{ value: string }>): void {
+    this.searchChange.emit(event.detail);
+  }
+
+  handleSearchClick(event: CustomEvent<MouseEvent | KeyboardEvent>): void {
+    this.searchClick.emit(event.detail);
+  }
+
+  handleSearchInputOpenChange(event: CustomEvent<boolean>): void {
+    this.searchInputOpenChange.emit(event.detail);
+  }
+
+  handleSignOutClick(event: CustomEvent<MouseEvent | KeyboardEvent>): void {
+    this.signOutClick.emit(event.detail);
+  }
+
+  handleTrimbleLogoClick(event: CustomEvent<MouseEvent | KeyboardEvent>): void {
+    this.trimbleLogoClick.emit(event.detail);
+  }
+
+  handleUserMenuOpenChange(event: CustomEvent<boolean>): void {
+    this.userMenuOpenChange.emit(event.detail);
+  }
+}

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

@@ -0,0 +1,174 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcNumberInput } from '@trimble-oss/moduswebcomponents-angular';
+import type {
+  Components,
+  IInputFeedbackProp,
+  ModusSize,
+} from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusNumberInputComponent}.
+ */
+export interface ModusNumberInputProps {
+  /** HTML autocomplete hint for the control. */
+  autoComplete?: Components.ModusWcNumberInput['autoComplete'];
+  /** Indicates that the input should render its border. */
+  bordered?: Components.ModusWcNumberInput['bordered'];
+  /** Currency symbol displayed before the input value. */
+  currencySymbol?: Components.ModusWcNumberInput['currencySymbol'];
+  /** Custom CSS class applied to the input. */
+  className?: Components.ModusWcNumberInput['customClass'];
+  /** Disables the input. */
+  disabled?: Components.ModusWcNumberInput['disabled'];
+  /** Feedback configuration rendered below the input. */
+  feedback?: IInputFeedbackProp;
+  /** Identifier applied to the underlying input element. */
+  inputId?: Components.ModusWcNumberInput['inputId'];
+  /** Tab index applied to the input. */
+  inputTabIndex?: Components.ModusWcNumberInput['inputTabIndex'];
+  /** Label text displayed above the input. */
+  label?: Components.ModusWcNumberInput['label'];
+  /** Maximum value accepted. */
+  max?: Components.ModusWcNumberInput['max'];
+  /** Minimum value accepted. */
+  min?: Components.ModusWcNumberInput['min'];
+  /** Name attribute submitted in forms. */
+  name?: Components.ModusWcNumberInput['name'];
+  /** Hint for mobile keyboard type. */
+  inputMode?: 'decimal' | 'numeric' | 'none';
+  /** Placeholder text displayed when empty. */
+  placeholder?: Components.ModusWcNumberInput['placeholder'];
+  /** Prevents editing when true. */
+  readOnly?: Components.ModusWcNumberInput['readOnly'];
+  /** Marks the field as required. */
+  required?: Components.ModusWcNumberInput['required'];
+  /** Control size token. */
+  size?: ModusSize;
+  /** Step interval for the input value. */
+  step?: Components.ModusWcNumberInput['step'];
+  /** Input type variant. */
+  type?: Components.ModusWcNumberInput['type'];
+  /** Current input value. */
+  value?: Components.ModusWcNumberInput['value'];
+}
+
+/**
+ * Angular wrapper for the Modus number input web component.
+ */
+@Component({
+  selector: 'modus-number-input',
+  imports: [CommonModule, ModusWcNumberInput],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-number-input
+      [autoComplete]="autoComplete()"
+      [bordered]="bordered()"
+      [currencySymbol]="currencySymbol()"
+      [customClass]="className()"
+      [disabled]="disabled()"
+      [feedback]="feedback()"
+      [inputId]="inputId()"
+      [inputTabIndex]="inputTabIndex()"
+      [label]="label()"
+      [max]="max()"
+      [min]="min()"
+      [name]="name()"
+      [attr.inputmode]="inputMode()"
+      [placeholder]="placeholder()"
+      [readOnly]="readOnly()"
+      [required]="required()"
+      [size]="size()"
+      [step]="step()"
+      [type]="type()"
+      [value]="value()"
+      (inputBlur)="handleBlur($event)"
+      (inputChange)="handleChange($event)"
+      (inputFocus)="handleFocus($event)"
+    >
+      <ng-content />
+    </modus-wc-number-input>
+  `,
+})
+export class ModusNumberInputComponent {
+  /** HTML autocomplete hint for the control. */
+  readonly autoComplete = input<'on' | 'off' | undefined>();
+
+  /** Indicates that the input should render its border. */
+  readonly bordered = input<boolean | undefined>(true);
+
+  /** Currency symbol displayed before the input value. */
+  readonly currencySymbol = input<string | undefined>('');
+
+  /** Custom CSS class applied to the input. */
+  readonly className = input<string | undefined>();
+
+  /** Disables the input. */
+  readonly disabled = input<boolean | undefined>(false);
+
+  /** Feedback configuration rendered below the input. */
+  readonly feedback = input<IInputFeedbackProp | undefined>();
+
+  /** Identifier applied to the underlying input element. */
+  readonly inputId = input<string | undefined>();
+
+  /** Tab index applied to the input. */
+  readonly inputTabIndex = input<number | undefined>();
+
+  /** Label text displayed above the input. */
+  readonly label = input<string | undefined>();
+
+  /** Maximum value accepted. */
+  readonly max = input<number | undefined>();
+
+  /** Minimum value accepted. */
+  readonly min = input<number | undefined>();
+
+  /** Name attribute submitted in forms. */
+  readonly name = input<string | undefined>();
+
+  /** Hint for mobile keyboard type. */
+  readonly inputMode = input<'decimal' | 'numeric' | 'none' | undefined>('numeric');
+
+  /** Placeholder text displayed when empty. */
+  readonly placeholder = input<string | undefined>('');
+
+  /** Prevents editing when true. */
+  readonly readOnly = input<boolean | undefined>(false);
+
+  /** Marks the field as required. */
+  readonly required = input<boolean | undefined>(false);
+
+  /** Control size token. */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** Step interval for the input value. */
+  readonly step = input<number | undefined>();
+
+  /** Input type variant. */
+  readonly type = input<'number' | 'range' | undefined>('number');
+
+  /** Current input value. */
+  readonly value = input<string | undefined>('');
+
+  /** 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>();
+
+  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);
+  }
+}

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

@@ -0,0 +1,74 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcPagination } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components, IAriaLabelValues, IPageChange, ModusSize } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusPaginationComponent}.
+ */
+export interface ModusPaginationProps {
+  /** ARIA label values for navigation controls. */
+  ariaLabelValues?: IAriaLabelValues;
+  /** Total number of pages. */
+  count: Components.ModusWcPagination['count'];
+  /** Custom CSS class applied to the root element. */
+  className?: Components.ModusWcPagination['customClass'];
+  /** Text label for the next button. */
+  nextButtonText?: Components.ModusWcPagination['nextButtonText'];
+  /** Current active page number. */
+  page: Components.ModusWcPagination['page'];
+  /** Text label for the previous button. */
+  prevButtonText?: Components.ModusWcPagination['prevButtonText'];
+  /** Pagination size token. */
+  size?: ModusSize;
+}
+
+/**
+ * Angular wrapper for the Modus pagination web component.
+ */
+@Component({
+  selector: 'modus-pagination',
+  imports: [CommonModule, ModusWcPagination],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-pagination
+      [ariaLabelValues]="ariaLabelValues()"
+      [count]="count()"
+      [customClass]="className()"
+      [nextButtonText]="nextButtonText()"
+      [page]="page()"
+      [prevButtonText]="prevButtonText()"
+      [size]="size()"
+      (pageChange)="handlePageChange($event)"
+    />
+  `,
+})
+export class ModusPaginationComponent {
+  /** ARIA label values for navigation controls. */
+  readonly ariaLabelValues = input<IAriaLabelValues | undefined>();
+
+  /** Total number of pages. */
+  readonly count = input.required<number>();
+
+  /** Custom CSS class applied to the root element. */
+  readonly className = input<string | undefined>();
+
+  /** Text label for the next button. */
+  readonly nextButtonText = input<string | undefined>();
+
+  /** Current active page number. */
+  readonly page = input.required<number>();
+
+  /** Text label for the previous button. */
+  readonly prevButtonText = input<string | undefined>();
+
+  /** Pagination size token. */
+  readonly size = input<ModusSize | undefined>('md');
+
+  /** Emits when the page changes. */
+  readonly pageChange = output<IPageChange>();
+
+  handlePageChange(event: CustomEvent<IPageChange>): void {
+    this.pageChange.emit(event.detail);
+  }
+}

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

@@ -0,0 +1,61 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcPanel } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusPanelComponent}.
+ */
+export interface ModusPanelProps {
+  /** Custom CSS class applied to the panel. */
+  className?: Components.ModusWcPanel['customClass'];
+  /** Panel width (any valid CSS width value). */
+  width?: Components.ModusWcPanel['width'];
+  /** Panel height (any valid CSS height value). */
+  height?: Components.ModusWcPanel['height'];
+  /** Enable floating mode with elevated shadow. */
+  floating?: Components.ModusWcPanel['floating'];
+  /** Accessible label for the panel. */
+  ariaLabel?: string;
+}
+
+/**
+ * Angular wrapper for the Modus panel web component.
+ */
+@Component({
+  selector: 'modus-panel',
+  imports: [CommonModule, ModusWcPanel],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-panel
+      [customClass]="className()"
+      [width]="width()"
+      [height]="height()"
+      [floating]="floating()"
+      [attr.aria-label]="ariaLabel()"
+    >
+      <ng-content select="[slot='header']" slot="header" />
+      <div slot="body" class="w-full">
+        <ng-content select="[slot='body']" />
+        <ng-content />
+      </div>
+      <ng-content select="[slot='footer']" slot="footer" />
+    </modus-wc-panel>
+  `,
+})
+export class ModusPanelComponent {
+  /** Custom CSS class applied to the panel. */
+  readonly className = input<string | undefined>();
+
+  /** Panel width (any valid CSS width value). */
+  readonly width = input<Components.ModusWcPanel['width'] | undefined>('350px');
+
+  /** Panel height (any valid CSS height value). */
+  readonly height = input<Components.ModusWcPanel['height'] | undefined>('700px');
+
+  /** Enable floating mode with elevated shadow. */
+  readonly floating = input<Components.ModusWcPanel['floating'] | undefined>(false);
+
+  /** Accessible label for the panel. */
+  readonly ariaLabel = input<string | undefined>();
+}

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

@@ -0,0 +1,62 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModusWcProgress } from '@trimble-oss/moduswebcomponents-angular';
+import type { Components } from '@trimble-oss/moduswebcomponents';
+
+/**
+ * Props supported by the {@link ModusProgressComponent}.
+ */
+export interface ModusProgressProps {
+  /** Optional CSS class applied to the progress element. */
+  className?: Components.ModusWcProgress['customClass'];
+  /** Displays the indeterminate animation when true. */
+  indeterminate?: Components.ModusWcProgress['indeterminate'];
+  /** Label displayed within the progress track. */
+  label?: Components.ModusWcProgress['label'];
+  /** Maximum value of the progress component. */
+  max?: Components.ModusWcProgress['max'];
+  /** Current progress value. */
+  value?: Components.ModusWcProgress['value'];
+  /** Visual variant (default or radial). */
+  variant?: Components.ModusWcProgress['variant'];
+}
+
+/**
+ * Angular wrapper for the Modus progress web component.
+ */
+@Component({
+  selector: 'modus-progress',
+  imports: [CommonModule, ModusWcProgress],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <modus-wc-progress
+      [customClass]="className()"
+      [indeterminate]="indeterminate()"
+      [label]="label()"
+      [max]="max()"
+      [value]="value()"
+      [variant]="variant()"
+    >
+      <ng-content />
+    </modus-wc-progress>
+  `,
+})
+export class ModusProgressComponent {
+  /** Optional CSS class applied to the progress element. */
+  readonly className = input<string | undefined>();
+
+  /** Displays the indeterminate animation when true. */
+  readonly indeterminate = input<boolean | undefined>(false);
+
+  /** Label displayed within the progress track. */
+  readonly label = input<string | undefined>();
+
+  /** Maximum value of the progress component. */
+  readonly max = input<number | undefined>(100);
+
+  /** Current progress value. */
+  readonly value = input<number | undefined>(0);
+
+  /** Visual variant (default or radial). */
+  readonly variant = input<'default' | 'radial' | undefined>('default');
+}