@momentum-design/components 0.96.2 → 0.96.4

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) {