@momentum-design/components 0.95.6 → 0.95.8

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -13,6 +13,7 @@ import { Component } from '../../models';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import { AutoFocusMixin } from '../../utils/mixins/AutoFocusMixin';
+import { KEYS } from '../../utils/keys';
 import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
 import styles from './buttonsimple.styles';
 /**
@@ -181,9 +182,9 @@ class Buttonsimple extends AutoFocusMixin(TabIndexMixin(DisabledMixin(Component)
      * @param event - The keyboard event.
      */
     handleKeyDown(event) {
-        if (['Enter', ' '].includes(event.key)) {
+        if ([KEYS.ENTER, KEYS.SPACE].includes(event.key)) {
             this.classList.add('pressed');
-            if (event.key === 'Enter') {
+            if (event.key === KEYS.ENTER) {
                 this.triggerClickEvent();
             }
             // preventing the default event behavior for space key
@@ -201,9 +202,9 @@ class Buttonsimple extends AutoFocusMixin(TabIndexMixin(DisabledMixin(Component)
      * @param event - The keyboard event.
      */
     handleKeyUp(event) {
-        if (['Enter', ' '].includes(event.key)) {
+        if ([KEYS.ENTER, KEYS.SPACE].includes(event.key)) {
             this.classList.remove('pressed');
-            if (event.key === ' ') {
+            if (event.key === KEYS.SPACE) {
                 this.triggerClickEvent();
             }
         }

package/dist/components/cardcheckbox/cardcheckbox.component.js

@@ -13,6 +13,7 @@ import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import Card from '../card/card.component';
 import { ROLE } from '../../utils/roles';
+import { KEYS } from '../../utils/keys';
 import { CHECK_MARK, DEFAULTS, SELECTION_TYPE } from './cardcheckbox.constants';
 import styles from './cardcheckbox.styles';
 /**
@@ -89,7 +90,7 @@ class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
      * @param event - The keyboard event
      */
     toggleOnEnter(event) {
-        if (event.key === 'Enter') {
+        if (event.key === KEYS.ENTER) {
             this.toggleChecked();
         }
     }
@@ -98,7 +99,7 @@ class CardCheckbox extends DisabledMixin(TabIndexMixin(Card)) {
      * @param event - The keyboard event
      */
     toggleOnSpace(event) {
-        if (event.key === ' ') {
+        if (event.key === KEYS.SPACE) {
             this.toggleChecked();
         }
     }

package/dist/components/cardradio/cardradio.component.js

@@ -14,6 +14,7 @@ import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import Card from '../card/card.component';
 import { ROLE } from '../../utils/roles';
+import { KEYS } from '../../utils/keys';
 import styles from './cardradio.styles';
 /**
  * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.
@@ -126,7 +127,7 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
             const prevIndex = (currentIndex - 1 + enabledCards.length) % enabledCards.length;
             this.updateCardRadio(enabledCards, prevIndex);
         }
-        if (event.key === 'Enter') {
+        if (event.key === KEYS.ENTER) {
             this.toggleChecked();
         }
     }
@@ -135,7 +136,7 @@ class CardRadio extends DisabledMixin(TabIndexMixin(Card)) {
      * @param event - The keyboard event
      */
     toggleOnSpace(event) {
-        if (event.key === ' ') {
+        if (event.key === KEYS.SPACE) {
             this.toggleChecked();
         }
     }

package/dist/components/checkbox/checkbox.component.js

@@ -10,6 +10,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { KEYS } from '../../utils/keys';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
@@ -140,7 +141,7 @@ class Checkbox extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper))
      */
     handleKeyDown(event) {
         var _a;
-        if (event.key === 'Enter') {
+        if (event.key === KEYS.ENTER) {
             (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
         }
     }

package/dist/components/input/input.component.js

@@ -15,6 +15,7 @@ import FormfieldWrapper from '../formfieldwrapper';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
+import { KEYS } from '../../utils/keys';
 import { AUTO_CAPITALIZE, AUTO_COMPLETE, DEFAULTS, PREFIX_TEXT_OPTIONS } from './input.constants';
 import styles from './input.styles';
 /**
@@ -193,7 +194,7 @@ class Input extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      */
     handleKeyDown(event) {
         var _a;
-        if (event.key === 'Enter') {
+        if (event.key === KEYS.ENTER) {
             (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
         }
     }

package/dist/components/option/option.styles.js

@@ -3,6 +3,8 @@ const styles = css `
   :host {
     --mdc-option-icon-width: 1rem;
 
+    flex-shrink: 0;
+
     display: flex;
     flex-direction: row;
     align-items: center;

package/dist/components/radio/radio.component.js

@@ -16,6 +16,7 @@ import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { DEFAULTS as FORMFIELD_DEFAULTS } from '../formfieldwrapper/formfieldwrapper.constants';
 import { ROLE } from '../../utils/roles';
+import { KEYS } from '../../utils/keys';
 import styles from './radio.styles';
 /**
  * Radio allow users to select single options from a list or turn an item/feature on or off.
@@ -238,11 +239,11 @@ class Radio extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
             const prevIndex = (currentIndex - 1 + enabledRadios.length) % enabledRadios.length;
             this.updateRadio(enabledRadios, prevIndex, event);
         }
-        else if (event.key === ' ') {
+        else if (event.key === KEYS.SPACE) {
             this.updateRadio(enabledRadios, currentIndex, event);
         }
         this.updateTabIndex();
-        if (event.key === 'Enter') {
+        if (event.key === KEYS.ENTER) {
             (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
         }
     }

package/dist/components/searchfield/searchfield.component.js

@@ -11,6 +11,7 @@ import { html } from 'lit';
 import { queryAssignedElements, state } from 'lit/decorators.js';
 import { classMap } from 'lit-html/directives/class-map.js';
 import Input from '../input/input.component';
+import { KEYS } from '../../utils/keys';
 import styles from './searchfield.styles';
 import { DEFAULTS } from './searchfield.constants';
 /**
@@ -110,8 +111,8 @@ class Searchfield extends Input {
           <div
             part="filters-container"
             @click=${() => this.inputElement.focus()}
-            @keydown=${(e) => (e.key === 'Enter' ? this.inputElement.focus() : null)}
-            @keyup=${(e) => (e.key === ' ' ? this.inputElement.focus() : null)}
+            @keydown=${(e) => (e.key === KEYS.ENTER ? this.inputElement.focus() : null)}
+            @keyup=${(e) => (e.key === KEYS.SPACE ? this.inputElement.focus() : null)}
           >
             <slot name="filters" @slotchange=${this.renderInputChips}></slot>
           </div>

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

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

package/dist/components/stepperconnector/index.js

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

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

@@ -0,0 +1,31 @@
+import type { CSSResult } from 'lit';
+import { Component } from '../../models';
+import type { OrientationType, StatusType } from './stepperconnector.types';
+/**
+ * StepperConnector component visually represents the connection between two stepper items.
+ * Indicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.
+ * They are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.
+ *
+ * @tagname mdc-stepperconnector
+ *
+ * @csspart connector - The main connector line between steps
+ *
+ * @cssproperty --mdc-stepperconnector-complete-background - Background color for the complete connector
+ * @cssproperty --mdc-stepperconnector-incomplete-background - Background color for the incomplete connector
+ */
+declare class StepperConnector extends Component {
+    /**
+     * The status of the connector (complete or incomplete)
+     * @default "incomplete"
+     */
+    status: StatusType;
+    /**
+     * The orientation of the connector (vertical or horizontal)
+     * @default "horizontal"
+     */
+    orientation: OrientationType;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default StepperConnector;

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

@@ -0,0 +1,60 @@
+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 } from '../../models';
+import { DEFAULTS } from './stepperconnector.constants';
+import styles from './stepperconnector.styles';
+/**
+ * StepperConnector component visually represents the connection between two stepper items.
+ * Indicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.
+ * They are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.
+ *
+ * @tagname mdc-stepperconnector
+ *
+ * @csspart connector - The main connector line between steps
+ *
+ * @cssproperty --mdc-stepperconnector-complete-background - Background color for the complete connector
+ * @cssproperty --mdc-stepperconnector-incomplete-background - Background color for the incomplete connector
+ */
+class StepperConnector extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * The status of the connector (complete or incomplete)
+         * @default "incomplete"
+         */
+        this.status = DEFAULTS.STATUS;
+        /**
+         * The orientation of the connector (vertical or horizontal)
+         * @default "horizontal"
+         */
+        this.orientation = DEFAULTS.ORIENTATION;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('orientation')) {
+            this.ariaOrientation = this.orientation;
+        }
+    }
+    render() {
+        return html ` <div part="connector"></div> `;
+    }
+}
+StepperConnector.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], StepperConnector.prototype, "status", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], StepperConnector.prototype, "orientation", void 0);
+export default StepperConnector;

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

@@ -0,0 +1,14 @@
+declare const STATUS: {
+    readonly COMPLETE: "complete";
+    readonly INCOMPLETE: "incomplete";
+};
+declare const ORIENTATION: {
+    readonly VERTICAL: "vertical";
+    readonly HORIZONTAL: "horizontal";
+};
+declare const DEFAULTS: {
+    readonly STATUS: "incomplete";
+    readonly ORIENTATION: "horizontal";
+};
+declare const TAG_NAME: "mdc-stepperconnector";
+export { TAG_NAME, STATUS, ORIENTATION, DEFAULTS };

package/dist/components/stepperconnector/stepperconnector.constants.js

@@ -0,0 +1,15 @@
+import utils from '../../utils/tag-name';
+const STATUS = {
+    COMPLETE: 'complete',
+    INCOMPLETE: 'incomplete',
+};
+const ORIENTATION = {
+    VERTICAL: 'vertical',
+    HORIZONTAL: 'horizontal',
+};
+const DEFAULTS = {
+    STATUS: STATUS.INCOMPLETE,
+    ORIENTATION: ORIENTATION.HORIZONTAL,
+};
+const TAG_NAME = utils.constructTagName('stepperconnector');
+export { TAG_NAME, STATUS, ORIENTATION, DEFAULTS };

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

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

package/dist/components/stepperconnector/stepperconnector.styles.js

@@ -0,0 +1,38 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-stepperconnector-complete-background: var(--mds-color-theme-outline-theme-normal);
+    --mdc-stepperconnector-incomplete-background: var(--mds-color-theme-outline-primary-normal);
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  :host::part(connector) {
+    width: 100%;
+    height: 0.0625rem;
+    background: var(--mdc-stepperconnector-incomplete-background);
+  }
+  :host([status='complete'])::part(connector) {
+    background: var(--mdc-stepperconnector-complete-background);
+  }
+  :host([orientation='vertical'])::part(connector) {
+    width: 0.0625rem;
+    height: 100%;
+  }
+
+  @media (forced-colors: active) {
+    :host([orientation='horizontal'])::part(connector) {
+      border-top: 1px solid var(--mdc-stepperconnector-incomplete-background);
+    }
+    :host([status='complete'][orientation='horizontal'])::part(connector) {
+      border-top: 1px solid var(--mdc-stepperconnector-complete-background);
+    }
+    :host([orientation='vertical'])::part(connector) {
+      border-left: 1px solid var(--mdc-stepperconnector-incomplete-background);
+    }
+    :host([status='complete'][orientation='vertical'])::part(connector) {
+      border-left: 1px solid var(--mdc-stepperconnector-complete-background);
+    }
+  }
+`;
+export default [styles];

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

@@ -0,0 +1,5 @@
+import type { ValueOf } from '../../utils/types';
+import { ORIENTATION, STATUS } from './stepperconnector.constants';
+type StatusType = ValueOf<typeof STATUS>;
+type OrientationType = ValueOf<typeof ORIENTATION>;
+export type { StatusType, OrientationType };

package/dist/components/stepperconnector/stepperconnector.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+import StepperItem from './stepperitem.component';
+import '../icon';
+import '../text';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-stepperitem']: StepperItem;
+    }
+}
+export default StepperItem;

package/dist/components/stepperitem/index.js

@@ -0,0 +1,6 @@
+import StepperItem from './stepperitem.component';
+import { TAG_NAME } from './stepperitem.constants';
+import '../icon';
+import '../text';
+StepperItem.register(TAG_NAME);
+export default StepperItem;

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

@@ -0,0 +1,107 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+import type { StatusType, VariantType } from './stepperitem.types';
+declare const StepperItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/TabIndexMixin").TabIndexMixinInterface> & typeof Component;
+/**
+ * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.
+ * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.
+ * The component supports various visual styles and can be customized with labels, help text, and step numbers.
+ *
+ * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.
+ * Make sure to set `aria-current="step"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ *
+ * @tagname mdc-stepperitem
+ *
+ * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.
+ *
+ * @csspart status-container - The container for the status icon or step number.
+ * @csspart label-container - The container for the label and help text.
+ * @csspart help-text-container - The container for the help text and error icon when applicable.
+ * @csspart status-icon - The icon representing the status of the stepper item.
+ * @csspart step-number - The text representing the step number.
+ * @csspart label - The text representing the label of the stepper item.
+ * @csspart help-text - The text providing additional information about the stepper item.
+ * @csspart help-icon - The icon representing an error in the stepper item.
+ *
+ * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.
+ * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.
+ * @cssproperty --mdc-stepperitem-label-color - The color of the label text.
+ * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.
+ * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.
+ */
+declare class StepperItem extends StepperItem_base {
+    /**
+     * The variant of the stepper item, which can be `inline` or `stacked`.
+     * @default 'inline'
+     */
+    variant: VariantType;
+    /**
+     * The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.
+     * @default 'not-started'
+     */
+    status: StatusType;
+    /**
+     * The label for the stepper item, which is displayed as the main text of the step.
+     * This label is typically used to describe the step or action that the step represents.
+     * @default ''
+     */
+    label: string;
+    /**
+     * Additional informational text that appears below the label
+     * This text is optional and can be used to provide more context or instructions for the step.
+     * @default ''
+     */
+    helpText?: string;
+    /**
+     * The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.
+     * This is useful for indicating the order of steps in a process.
+     * @default ''
+     */
+    stepNumber?: number;
+    connectedCallback(): void;
+    constructor();
+    /**
+     * Handles the keydown event on the stepperitem.
+     * If the key is 'Enter' or 'Space', the stepperitem is pressed.
+     * If the key is 'Enter', the stepperitem is pressed. The native HTML button works in the same way.
+     * If the key is 'Space', the stepperitem's default is prevent to avoid scrolling etc in the host application.
+     *
+     * @param event - The keyboard event.
+     */
+    private handleKeyDown;
+    /**
+     * Triggers a click event on the stepper item.
+     */
+    private triggerClickEvent;
+    /**
+     * Handles the keyup event on the stepperitem.
+     * If the key is 'Enter' or 'Space', the stepperitem is clicked.
+     * If the key is 'Space', the stepperitem is pressed. The native HTML button works in the same way.
+     *
+     * @param event - The keyboard event.
+     */
+    private handleKeyUp;
+    /**
+     * Renders the status icon based on the current status of the stepper item.
+     * - If the status is `completed`, it renders a check icon.
+     * - If the status is `current` or `error-current`, it renders a pencil icon.
+     * - If the status is `not-started` or `error-incomplete`, it renders the step number.
+     * - If the status is anything else, it renders nothing.
+     * @returns A template literal that renders the status icon based on the current status of the stepper item.
+     */
+    private renderStatusIcon;
+    /**
+     * Renders the help text for the stepper item.
+     * If the `helpText` property is not set, it returns nothing.
+     * @returns A template literal that renders the help text for the stepper item.
+     */
+    private renderHelpText;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default StepperItem;