@momentum-design/components 0.95.7 → 0.96.0

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/buttonsimple/buttonsimple.constants.d.ts

@@ -1,5 +1,8 @@
 declare const TAG_NAME: "mdc-buttonsimple";
 declare const BUTTON_SIZES: {
+    readonly 12: 12;
+    readonly 14: 14;
+    readonly 16: 16;
     readonly 20: 20;
     readonly 24: 24;
     readonly 28: 28;

package/dist/components/buttonsimple/buttonsimple.constants.js

@@ -1,6 +1,9 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('buttonsimple');
 const BUTTON_SIZES = {
+    12: 12,
+    14: 14,
+    16: 16,
     20: 20,
     24: 24,
     28: 28,

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/linkbutton/index.d.ts

@@ -0,0 +1,8 @@
+import LinkButton from './linkbutton.component';
+import '../icon';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-linkbutton']: LinkButton;
+    }
+}
+export default LinkButton;

package/dist/components/linkbutton/index.js

@@ -0,0 +1,5 @@
+import LinkButton from './linkbutton.component';
+import { TAG_NAME } from './linkbutton.constants';
+import '../icon';
+LinkButton.register(TAG_NAME);
+export default LinkButton;

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

@@ -0,0 +1,65 @@
+import { CSSResult, PropertyValues } from 'lit';
+import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import type { LinkButtonSize } from './linkbutton.types';
+declare const LinkButton_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof Buttonsimple;
+/**
+ * `mdc-linkbutton` visually mimics a hyperlink while functioning as a button. It blends the appearance of `mdc-link` with the accessibility and interaction capabilities of `mdc-button`.
+ *
+ * ### Features:
+ * - Looks like a link, behaves like a button.
+ * - Supports slots for a text label and an optional trailing icon.
+ * - Inherits accessibility and keyboard interaction behavior from `mdc-buttonsimple`.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-linkbutton
+ *
+ * @slot - Text label of the linkbutton.
+ *
+ * @event click - (React: onClick) This event is dispatched when the linkbutton is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the linkbutton.
+ * @event focus - (React: onFocus) This event is dispatched when the linkbutton receives focus.
+ *
+ * @cssproperty --mdc-link-border-radius - Border radius of the linkbutton.
+ * @cssproperty --mdc-link-color-active - Color of the linkbutton’s child content in the active state.
+ * @cssproperty --mdc-link-color-disabled - Color of the linkbutton’s child content in the disabled state.
+ * @cssproperty --mdc-link-color-hover - Color of the linkbutton’s child content in the hover state.
+ * @cssproperty --mdc-link-color-normal - Color of the linkbutton’s child content in the normal state.
+ * @cssproperty --mdc-link-inverted-color-active - Color of the inverted linkbutton’s child content in the active state.
+ * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted linkbutton’s child content in the disabled state.
+ * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted linkbutton’s child content in the hover state.
+ * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted linkbutton’s child content in the normal state.
+ */
+declare class LinkButton extends LinkButton_base {
+    /**
+     * Sets the size of the linkbutton.
+     * Acceptable values:
+     * - 12
+     * - 14
+     * - 16
+     * @default 16
+     */
+    size: LinkButtonSize;
+    /**
+     * The linkbutton can be inline or standalone.
+     * @default false
+     */
+    inline: boolean;
+    /**
+     * The linkbutton color can be inverted by setting the inverted attribute to true.
+     * @default false
+     */
+    inverted: boolean;
+    connectedCallback(): void;
+    update(changedProperties: PropertyValues): void;
+    /**
+     * Sets the `size` attribute for the linkbutton, falling back to the default if the value is invalid.
+     *
+     * @param size - The desired link size.
+     */
+    private setSize;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default LinkButton;

package/dist/components/linkbutton/linkbutton.component.js

@@ -0,0 +1,111 @@
+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, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
+import Buttonsimple from '../buttonsimple/buttonsimple.component';
+import Link from '../link/link.component';
+import { DEFAULTS, LINKBUTTON_SIZES } from './linkbutton.constants';
+import { getIconSize } from './linkbutton.utils';
+import styles from './linkbutton.styles';
+/**
+ * `mdc-linkbutton` visually mimics a hyperlink while functioning as a button. It blends the appearance of `mdc-link` with the accessibility and interaction capabilities of `mdc-button`.
+ *
+ * ### Features:
+ * - Looks like a link, behaves like a button.
+ * - Supports slots for a text label and an optional trailing icon.
+ * - Inherits accessibility and keyboard interaction behavior from `mdc-buttonsimple`.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-linkbutton
+ *
+ * @slot - Text label of the linkbutton.
+ *
+ * @event click - (React: onClick) This event is dispatched when the linkbutton is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the linkbutton.
+ * @event focus - (React: onFocus) This event is dispatched when the linkbutton receives focus.
+ *
+ * @cssproperty --mdc-link-border-radius - Border radius of the linkbutton.
+ * @cssproperty --mdc-link-color-active - Color of the linkbutton’s child content in the active state.
+ * @cssproperty --mdc-link-color-disabled - Color of the linkbutton’s child content in the disabled state.
+ * @cssproperty --mdc-link-color-hover - Color of the linkbutton’s child content in the hover state.
+ * @cssproperty --mdc-link-color-normal - Color of the linkbutton’s child content in the normal state.
+ * @cssproperty --mdc-link-inverted-color-active - Color of the inverted linkbutton’s child content in the active state.
+ * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted linkbutton’s child content in the disabled state.
+ * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted linkbutton’s child content in the hover state.
+ * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted linkbutton’s child content in the normal state.
+ */
+class LinkButton extends IconNameMixin(Buttonsimple) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the size of the linkbutton.
+         * Acceptable values:
+         * - 12
+         * - 14
+         * - 16
+         * @default 16
+         */
+        this.size = DEFAULTS.SIZE;
+        /**
+         * The linkbutton can be inline or standalone.
+         * @default false
+         */
+        this.inline = DEFAULTS.INLINE;
+        /**
+         * The linkbutton color can be inverted by setting the inverted attribute to true.
+         * @default false
+         */
+        this.inverted = DEFAULTS.INVERTED;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.active = undefined;
+        this.role = DEFAULTS.ROLE;
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('size')) {
+            this.setSize(this.size);
+        }
+    }
+    /**
+     * Sets the `size` attribute for the linkbutton, falling back to the default if the value is invalid.
+     *
+     * @param size - The desired link size.
+     */
+    setSize(size) {
+        this.setAttribute('size', Object.values(LINKBUTTON_SIZES).includes(size) ? `${size}` : DEFAULTS.SIZE.toString());
+    }
+    render() {
+        return html `
+      <slot></slot>
+      ${this.iconName
+            ? html ` <mdc-icon name=${this.iconName} size=${getIconSize(this.size)} length-unit="rem"></mdc-icon> `
+            : nothing}
+    `;
+    }
+}
+LinkButton.styles = [...Link.styles, ...styles];
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Number)
+], LinkButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], LinkButton.prototype, "inline", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], LinkButton.prototype, "inverted", void 0);
+export default LinkButton;

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

@@ -0,0 +1,13 @@
+declare const TAG_NAME: "mdc-linkbutton";
+declare const LINKBUTTON_SIZES: {
+    readonly 12: 12;
+    readonly 14: 14;
+    readonly 16: 16;
+};
+declare const DEFAULTS: {
+    SIZE: 16;
+    ROLE: "button";
+    INLINE: boolean;
+    INVERTED: boolean;
+};
+export { TAG_NAME, LINKBUTTON_SIZES, DEFAULTS };

package/dist/components/linkbutton/linkbutton.constants.js

@@ -0,0 +1,16 @@
+import { ROLE } from '../../utils/roles';
+import utils from '../../utils/tag-name';
+import { DEFAULTS as LINKSIMPLE_DEFAULTS } from '../linksimple/linksimple.constants';
+const TAG_NAME = utils.constructTagName('linkbutton');
+const LINKBUTTON_SIZES = {
+    12: 12,
+    14: 14,
+    16: 16,
+};
+const DEFAULTS = {
+    SIZE: LINKBUTTON_SIZES[16],
+    ROLE: ROLE.BUTTON,
+    INLINE: LINKSIMPLE_DEFAULTS.INLINE,
+    INVERTED: LINKSIMPLE_DEFAULTS.INVERTED,
+};
+export { TAG_NAME, LINKBUTTON_SIZES, DEFAULTS };

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

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

package/dist/components/linkbutton/linkbutton.styles.js

@@ -0,0 +1,66 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-link-color-disabled: var(--mds-color-theme-text-primary-disabled);
+    gap: 0.25rem;
+  }
+
+  :host([size='16']) {
+    font-size: var(--mds-font-apps-body-large-regular-font-size);
+    font-weight: var(--mds-font-apps-body-large-regular-font-weight);
+    line-height: var(--mds-font-apps-body-large-regular-line-height);
+    text-decoration: var(--mds-font-apps-body-large-regular-text-decoration);
+    text-transform: var(--mds-font-apps-body-large-regular-text-case);
+  }
+
+  :host([size='14']) {
+    font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+    font-weight: var(--mds-font-apps-body-midsize-regular-font-weight);
+    line-height: var(--mds-font-apps-body-midsize-regular-line-height);
+    text-decoration: var(--mds-font-apps-body-midsize-regular-text-decoration);
+    text-transform: var(--mds-font-apps-body-midsize-regular-text-case);
+  }
+
+  :host([size='12']) {
+    font-size: var(--mds-font-apps-body-small-regular-font-size);
+    font-weight: var(--mds-font-apps-body-small-regular-font-weight);
+    line-height: var(--mds-font-apps-body-small-regular-line-height);
+    text-decoration: var(--mds-font-apps-body-small-regular-text-decoration);
+    text-transform: var(--mds-font-apps-body-small-regular-text-case);
+  }
+
+  :host([size='16']:hover),
+  :host([size='16']:active),
+  :host([size='16'][inline]) {
+    font-size: var(--mds-font-apps-body-large-regular-underline-font-size);
+    font-weight: var(--mds-font-apps-body-large-regular-underline-font-weight);
+    line-height: var(--mds-font-apps-body-large-regular-underline-line-height);
+    text-decoration: var(--mds-font-apps-body-large-regular-underline-text-decoration);
+    text-transform: var(--mds-font-apps-body-large-regular-underline-text-case);
+  }
+
+  :host([size='14']:hover),
+  :host([size='14']:active),
+  :host([size='14'][inline]) {
+    font-size: var(--mds-font-apps-body-midsize-regular-underline-font-size);
+    font-weight: var(--mds-font-apps-body-midsize-regular-underline-font-weight);
+    line-height: var(--mds-font-apps-body-midsize-regular-underline-line-height);
+    text-decoration: var(--mds-font-apps-body-midsize-regular-underline-text-decoration);
+    text-transform: var(--mds-font-apps-body-midsize-regular-underline-text-case);
+  }
+
+  :host([size='12']:hover),
+  :host([size='12']:active),
+  :host([size='12'][inline]) {
+    font-size: var(--mds-font-apps-body-small-regular-underline-font-size);
+    font-weight: var(--mds-font-apps-body-small-regular-underline-font-weight);
+    line-height: var(--mds-font-apps-body-small-regular-underline-line-height);
+    text-decoration: var(--mds-font-apps-body-small-regular-underline-text-decoration);
+    text-transform: var(--mds-font-apps-body-small-regular-underline-text-case);
+  }
+
+  :host([soft-disabled]) {
+    color: var(--mdc-link-color-disabled);
+  }
+`;
+export default [styles];

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

@@ -0,0 +1,10 @@
+import type { ValueOf } from '../../utils/types';
+import { LINKBUTTON_SIZES } from './linkbutton.constants';
+type LinkButtonSize = ValueOf<typeof LINKBUTTON_SIZES>;
+interface Events {
+    onClickEvent: MouseEvent;
+    onKeyDownEvent: KeyboardEvent;
+    onFocusEvent: FocusEvent;
+    onBlurEvent: Event;
+}
+export type { Events, LinkButtonSize };

package/dist/components/linkbutton/linkbutton.types.js

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

package/dist/components/linkbutton/linkbutton.utils.d.ts

@@ -0,0 +1,3 @@
+import type { LinkButtonSize } from "./linkbutton.types";
+declare const getIconSize: (size: LinkButtonSize) => number;
+export { getIconSize };

package/dist/components/linkbutton/linkbutton.utils.js

@@ -0,0 +1,12 @@
+import { LINKBUTTON_SIZES } from "./linkbutton.constants";
+const getIconSize = (size) => {
+    switch (size) {
+        case LINKBUTTON_SIZES[12]:
+            return 0.75;
+        case LINKBUTTON_SIZES[14]:
+            return 0.875;
+        default:
+            return 1;
+    }
+};
+export { getIconSize };

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 };