@momentum-design/components 0.96.3 → 0.97.0

package/dist/components/stepper/index.d.ts

@@ -0,0 +1,7 @@
+import Stepper from './stepper.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-stepper']: Stepper;
+    }
+}
+export default Stepper;

package/dist/components/stepper/index.js

@@ -0,0 +1,4 @@
+import Stepper from './stepper.component';
+import { TAG_NAME } from './stepper.constants';
+Stepper.register(TAG_NAME);
+export default Stepper;

package/dist/components/stepper/stepper.component.d.ts

@@ -0,0 +1,46 @@
+import type { CSSResult, PropertyValueMap } from 'lit';
+import { Provider } from '../../models';
+import type { OrientationType } from '../stepperconnector/stepperconnector.types';
+import type { VariantType } from '../stepperitem/stepperitem.types';
+import StepperContext from './stepper.context';
+/**
+ * Stepper component, which orchestrates stepperitem and stepperconnector components, is a wrapper for the stepper functionality.
+ * It provides the context for the stepper items and connectors, allowing them to adapt to the stepper's orientation and variant.
+ *
+ * @tagname mdc-stepper
+ *
+ * @slot default - Pass the list of `mdc-stepperitem` and `mdc-stepperconnector` elements to be rendered inside the stepper.
+ *
+ */
+declare class Stepper extends Provider<StepperContext> {
+    /**
+     * The orientation of the stepperconnector (vertical or horizontal)
+     * @default "horizontal"
+     */
+    orientation: OrientationType;
+    /**
+     * The variant of the stepper item, which can be `inline` or `stacked`.
+     * @default 'inline'
+     */
+    variant: VariantType;
+    constructor();
+    connectedCallback(): void;
+    /**
+     * Get the context for the stepper component.
+     * This context provides the orientation and variant for the stepper items and connectors.
+     */
+    static get Context(): {
+        __context__: StepperContext;
+    };
+    protected updated(changedProperties: PropertyValueMap<Stepper>): void;
+    /**
+     * Update all observing components of this
+     * provider to update the values
+     *
+     * Is called on every re-render, see Provider class
+     */
+    protected updateContext(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Stepper;

package/dist/components/stepper/stepper.component.js

@@ -0,0 +1,85 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Component, Provider } from '../../models';
+import { ROLE } from '../../utils/roles';
+import { DEFAULTS } from './stepper.constants';
+import StepperContext from './stepper.context';
+import styles from './stepper.styles';
+/**
+ * Stepper component, which orchestrates stepperitem and stepperconnector components, is a wrapper for the stepper functionality.
+ * It provides the context for the stepper items and connectors, allowing them to adapt to the stepper's orientation and variant.
+ *
+ * @tagname mdc-stepper
+ *
+ * @slot default - Pass the list of `mdc-stepperitem` and `mdc-stepperconnector` elements to be rendered inside the stepper.
+ *
+ */
+class Stepper extends Provider {
+    constructor() {
+        super({
+            context: StepperContext.context,
+            initialValue: new StepperContext(DEFAULTS.ORIENTATION, DEFAULTS.VARIANT),
+        });
+        /**
+         * The orientation of the stepperconnector (vertical or horizontal)
+         * @default "horizontal"
+         */
+        this.orientation = DEFAULTS.ORIENTATION;
+        /**
+         * The variant of the stepper item, which can be `inline` or `stacked`.
+         * @default 'inline'
+         */
+        this.variant = DEFAULTS.VARIANT;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.role = ROLE.LIST;
+    }
+    /**
+     * Get the context for the stepper component.
+     * This context provides the orientation and variant for the stepper items and connectors.
+     */
+    static get Context() {
+        return StepperContext.context;
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('orientation') || changedProperties.has('variant')) {
+            this.updateContext();
+        }
+    }
+    /**
+     * Update all observing components of this
+     * provider to update the values
+     *
+     * Is called on every re-render, see Provider class
+     */
+    updateContext() {
+        if (this.context.value.variant !== this.variant || this.context.value.orientation !== this.orientation) {
+            this.context.value.variant = this.variant;
+            this.context.value.orientation = this.orientation;
+            this.context.updateObservers();
+        }
+    }
+    render() {
+        return html ` <slot></slot> `;
+    }
+}
+Stepper.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Stepper.prototype, "orientation", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Stepper.prototype, "variant", void 0);
+export default Stepper;

package/dist/components/stepper/stepper.constants.d.ts

@@ -0,0 +1,6 @@
+declare const TAG_NAME: "mdc-stepper";
+declare const DEFAULTS: {
+    ORIENTATION: "horizontal";
+    VARIANT: "inline";
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/stepper/stepper.constants.js

@@ -0,0 +1,9 @@
+import utils from '../../utils/tag-name';
+import { ORIENTATION } from '../stepperconnector/stepperconnector.constants';
+import { VARIANT } from '../stepperitem/stepperitem.constants';
+const TAG_NAME = utils.constructTagName('stepper');
+const DEFAULTS = {
+    ORIENTATION: ORIENTATION.HORIZONTAL,
+    VARIANT: VARIANT.INLINE,
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/stepper/stepper.context.d.ts

@@ -0,0 +1,11 @@
+import type { OrientationType } from '../stepperconnector/stepperconnector.types';
+import type { VariantType } from '../stepperitem/stepperitem.types';
+declare class StepperContext {
+    orientation?: OrientationType;
+    variant?: VariantType;
+    static context: {
+        __context__: StepperContext;
+    };
+    constructor(defaultOrientation?: OrientationType, defaultVariant?: VariantType);
+}
+export default StepperContext;

package/dist/components/stepper/stepper.context.js

@@ -0,0 +1,10 @@
+import { createContext } from '@lit/context';
+import { TAG_NAME } from './stepper.constants';
+class StepperContext {
+    constructor(defaultOrientation, defaultVariant) {
+        this.orientation = defaultOrientation;
+        this.variant = defaultVariant;
+    }
+}
+StepperContext.context = createContext(TAG_NAME);
+export default StepperContext;

package/dist/components/stepper/stepper.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/stepper/stepper.styles.js

@@ -0,0 +1,41 @@
+import { css } from 'lit';
+import { hostFitContentStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    gap: 0.5rem;
+  }
+
+  ::slotted(mdc-stepperitem) {
+    flex-shrink: 0;
+  }
+
+  :host([orientation='horizontal']) {
+    width: 100%;
+  }
+
+  :host([orientation='vertical']) {
+    flex-direction: column;
+    height: 100%;
+  }
+
+  :host([orientation='vertical'][variant='inline']),
+  :host([orientation='horizontal'][variant='stacked']) {
+    align-items: flex-start;
+  }
+
+  :host([orientation='vertical'][variant='stacked']) ::slotted(mdc-stepperconnector) {
+    display: flex;
+    justify-content: center;
+  }
+
+  :host([orientation='vertical'][variant='inline']) ::slotted(mdc-stepperconnector) {
+    display: flex;
+    padding-left: 0.875rem;
+  }
+
+  :host([orientation='horizontal'][variant='stacked']) ::slotted(mdc-stepperconnector) {
+    padding-top: 0.9375rem;
+    margin: 0 -3rem;
+  }
+`;
+export default [hostFitContentStyles, styles];

package/dist/components/stepperconnector/stepperconnector.component.d.ts

@@ -24,6 +24,10 @@ declare class StepperConnector extends Component {
      * @default "horizontal"
      */
     orientation: OrientationType;
+    /**
+     * @internal
+     */
+    private readonly stepperContext;
     updated(changedProperties: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;

package/dist/components/stepperconnector/stepperconnector.component.js

@@ -10,6 +10,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Component } from '../../models';
+import providerUtils from '../../utils/provider';
+import Stepper from '../stepper/stepper.component';
 import { DEFAULTS } from './stepperconnector.constants';
 import styles from './stepperconnector.styles';
 /**
@@ -37,12 +39,21 @@ class StepperConnector extends Component {
          * @default "horizontal"
          */
         this.orientation = DEFAULTS.ORIENTATION;
+        /**
+         * @internal
+         */
+        this.stepperContext = providerUtils.consume({ host: this, context: Stepper.Context });
     }
     updated(changedProperties) {
+        var _a;
         super.updated(changedProperties);
         if (changedProperties.has('orientation')) {
             this.ariaOrientation = this.orientation;
         }
+        const context = (_a = this.stepperContext) === null || _a === void 0 ? void 0 : _a.value;
+        if (!context || !context.orientation)
+            return;
+        this.orientation = context.orientation;
     }
     render() {
         return html ` <div part="connector"></div> `;

package/dist/components/stepperitem/stepperitem.component.d.ts

@@ -63,6 +63,11 @@ declare class StepperItem extends StepperItem_base {
      * @default ''
      */
     stepNumber?: number;
+    /**
+     * @internal
+     */
+    private readonly stepperContext;
+    updated(changedProperties: Map<string, unknown>): void;
     connectedCallback(): void;
     constructor();
     /**

package/dist/components/stepperitem/stepperitem.component.js

@@ -14,6 +14,8 @@ import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import { ROLE } from '../../utils/roles';
 import { KEYS } from '../../utils/keys';
+import providerUtils from '../../utils/provider';
+import Stepper from '../stepper/stepper.component';
 import styles from './stepperitem.styles';
 import { DEFAULT, STATUS, STATUS_ICON } from './stepperitem.constants';
 /**
@@ -49,6 +51,14 @@ import { DEFAULT, STATUS, STATUS_ICON } from './stepperitem.constants';
  * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.
  */
 class StepperItem extends TabIndexMixin(Component) {
+    updated(changedProperties) {
+        var _a;
+        super.updated(changedProperties);
+        const context = (_a = this.stepperContext) === null || _a === void 0 ? void 0 : _a.value;
+        if (!context || !context.variant)
+            return;
+        this.variant = context.variant;
+    }
     connectedCallback() {
         super.connectedCallback();
         this.role = ROLE.LISTITEM;
@@ -71,6 +81,10 @@ class StepperItem extends TabIndexMixin(Component) {
          * @default ''
          */
         this.label = '';
+        /**
+         * @internal
+         */
+        this.stepperContext = providerUtils.consume({ host: this, context: Stepper.Context });
         this.addEventListener('keydown', this.handleKeyDown.bind(this));
         this.addEventListener('keyup', this.handleKeyUp.bind(this));
     }

package/dist/components/stepperitem/stepperitem.styles.js

@@ -47,8 +47,10 @@ const styles = css `
   }
 
   :host([variant='stacked'])::part(label-container) {
-    max-width: 8.75rem;
+    width: 8.75rem;
+    padding: 0.25rem 0;
   }
+
   :host([variant='stacked'])::part(label),
   :host([variant='stacked'])::part(help-text) {
     overflow: hidden;
@@ -66,6 +68,7 @@ const styles = css `
   :host([status='error-incomplete'])::part(help-text-container) {
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: 0.25rem;
   }
 
@@ -91,6 +94,7 @@ const styles = css `
   :host([status='error-current'])::part(help-icon),
   :host([status='error-incomplete'])::part(help-icon) {
     --mdc-icon-fill-color: var(--mds-color-theme-text-error-normal);
+    flex-shrink: 0;
   }
 
   :host(:hover) {

package/dist/custom-elements.json

@@ -31981,6 +31981,103 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/stepper/stepper.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Stepper component, which orchestrates stepperitem and stepperconnector components, is a wrapper for the stepper functionality.\nIt provides the context for the stepper items and connectors, allowing them to adapt to the stepper's orientation and variant.",
+          "name": "Stepper",
+          "slots": [
+            {
+              "description": "Pass the list of `mdc-stepperitem` and `mdc-stepperconnector` elements to be rendered inside the stepper.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "OrientationType"
+              },
+              "description": "The orientation of the stepperconnector (vertical or horizontal)",
+              "default": "\"horizontal\"",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "VariantType"
+              },
+              "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
+              "default": "'inline'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "description": "Get the context for the stepper component.\nThis context provides the orientation and variant for the stepper items and connectors.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "orientation",
+              "type": {
+                "text": "OrientationType"
+              },
+              "description": "The orientation of the stepperconnector (vertical or horizontal)",
+              "default": "\"horizontal\"",
+              "fieldName": "orientation"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "VariantType"
+              },
+              "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
+              "default": "'inline'",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Provider",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-stepper",
+          "jsDoc": "/**\n * Stepper component, which orchestrates stepperitem and stepperconnector components, is a wrapper for the stepper functionality.\n * It provides the context for the stepper items and connectors, allowing them to adapt to the stepper's orientation and variant.\n *\n * @tagname mdc-stepper\n *\n * @slot default - Pass the list of `mdc-stepperitem` and `mdc-stepperconnector` elements to be rendered inside the stepper.\n *\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Stepper",
+            "module": "components/stepper/stepper.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/stepperconnector/stepperconnector.component.js",

package/dist/index.d.ts

@@ -66,8 +66,9 @@ import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
 import Listheader from './components/listheader';
 import SelectListbox from './components/selectlistbox';
-import Stepperitem from './components/stepperitem';
+import StepperItem from './components/stepperitem';
 import StepperConnector from './components/stepperconnector';
+import Stepper from './components/stepper';
 import type { BadgeType } from './components/badge/badge.types';
 import type { ButtonColor, ButtonVariant, IconButtonSize, PillButtonSize } from './components/button/button.types';
 import type { PopoverPlacement } from './components/popover/popover.types';
@@ -80,6 +81,6 @@ import type { MenuSectionChangeEvent } from './components/menusection/menusectio
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Stepperitem, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, StepperConnector, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, StepperConnector, Stepper, };
 export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, TextType, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/index.js

@@ -68,13 +68,14 @@ import Tooltip from './components/tooltip';
 import VirtualizedList from './components/virtualizedlist';
 import Listheader from './components/listheader';
 import SelectListbox from './components/selectlistbox';
-import Stepperitem from './components/stepperitem';
+import StepperItem from './components/stepperitem';
 import StepperConnector from './components/stepperconnector';
+import Stepper from './components/stepper';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Components Exports
-export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, Stepperitem, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, StepperConnector, };
+export { AlertChip, Animation, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, LinkButton, Linksimple, List, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Select, SideNavigation, Skeleton, Spinner, StaticCheckbox, StaticRadio, StaticToggle, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toggle, ToggleTip, Tooltip, VirtualizedList, Listheader, SelectListbox, StepperConnector, Stepper, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIIconsCache, };

package/dist/react/index.d.ts

@@ -59,6 +59,7 @@ export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';
 export { default as StaticToggle } from './statictoggle';
+export { default as Stepper } from './stepper';
 export { default as StepperConnector } from './stepperconnector';
 export { default as StepperItem } from './stepperitem';
 export { default as Tab } from './tab';

package/dist/react/index.js

@@ -59,6 +59,7 @@ export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';
 export { default as StaticToggle } from './statictoggle';
+export { default as Stepper } from './stepper';
 export { default as StepperConnector } from './stepperconnector';
 export { default as StepperItem } from './stepperitem';
 export { default as Tab } from './tab';

package/dist/react/stepper/index.d.ts

@@ -0,0 +1,12 @@
+import Component from '../../components/stepper';
+/**
+ * Stepper component, which orchestrates stepperitem and stepperconnector components, is a wrapper for the stepper functionality.
+ * It provides the context for the stepper items and connectors, allowing them to adapt to the stepper's orientation and variant.
+ *
+ * @tagname mdc-stepper
+ *
+ * @slot default - Pass the list of `mdc-stepperitem` and `mdc-stepperconnector` elements to be rendered inside the stepper.
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/stepper/index.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/stepper';
+import { TAG_NAME } from '../../components/stepper/stepper.constants';
+/**
+ * Stepper component, which orchestrates stepperitem and stepperconnector components, is a wrapper for the stepper functionality.
+ * It provides the context for the stepper items and connectors, allowing them to adapt to the stepper's orientation and variant.
+ *
+ * @tagname mdc-stepper
+ *
+ * @slot default - Pass the list of `mdc-stepperitem` and `mdc-stepperconnector` elements to be rendered inside the stepper.
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Stepper',
+});
+export default reactWrapper;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.96.3",
+  "version": "0.97.0",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"