@momentum-design/components 0.12.6 → 0.13.0

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

@@ -0,0 +1,128 @@
+import { CSSResult, PropertyValueMap } from 'lit';
+import { Component } from '../../models';
+import { DividerOrientation, DividerVariant } from './divider.types';
+/**
+ * `mdc-divider` is a component that provides a line to separate and organize content.
+ * It can also include a button or text positioned centrally, allowing users to interact with the layout.
+ *
+ * **Divider Orientation:**
+ * - **Horizontal**: A thin, horizontal line.
+ * - **Vertical**: A thin, vertical line.
+ *
+ * **Divider Variants:**
+ * - **solid**: Solid line.
+ * - **gradient**: Gradient Line.
+ *
+ * **Divider Types:**
+ * - The type of divider is inferred based on the kind of slot present.
+ *  - **Primary**: A simple horizontal or vertical divider.
+ *  - **Text**: A horizontal divider with a text label in the center.
+ *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.
+ *
+ * **Accessibility:**
+ * - When the slot is replaced by an `mdc-button`:
+ *   - `aria-label` should be passed to the `mdc-button`.
+ *   - `aria-expanded` should be passed to the `mdc-button`.
+ *
+ * **Notes:**
+ * - If the slot is replaced by an invalid tag name or contains multiple elements,
+ *   the divider defaults to the **Primary** type.
+ * - To override the styles of the divider, use the provided CSS custom properties.
+ *
+ * @tagname mdc-divider
+ *
+ * @cssproperty --mdc-divider-background-color - background color of the divider
+ * @cssproperty --mdc-divider-width - width of the divider
+ * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider
+ * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider
+ * @cssproperty --mdc-divider-text-size - font size of label in the text divider
+ * @cssproperty --mdc-divider-text-color - font color of label in the text divider
+ * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
+ * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
+ * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
+ */
+declare class Divider extends Component {
+    /**
+     * Two orientations of divider
+     * - **horizontal**: A thin, horizontal line with 0.0625rem width.
+     * - **vertical**: A thin, vertical line with 0.0625rem width.
+     *
+     * Note: We do not support "Vertical Text Divider" as of now.
+     * @default horizontal
+     */
+    orientation: DividerOrientation;
+    /**
+     * Two variants of divider
+     * - **solid**: Solid line.
+     * - **gradient**: Gradient Line that fades on either sides of the divider.
+     * @default solid
+     */
+    variant: DividerVariant;
+    /**
+     * Direction of the arrow icon, if applicable.
+     * - **positive**
+     * - **negative**
+     *
+     * Note: Positive and Negative directions are defined based on Cartesian plane.
+     * @default 'negative'
+     */
+    arrowDirection: string;
+    /**
+     * Position of the button, if applicable.
+     * - **positive**
+     * - **negative**
+     *
+     * Note: Positive and Negative directions are defined based on Cartesian plane.
+     * @default 'negative'
+     */
+    buttonPosition: string;
+    /**
+     * Sets the variant attribute for the divider component.
+     * If the provided variant is not included in the DIVIDER_VARIANT,
+     * it defaults to the value specified in DEFAULTS.VARIANT.
+     *
+     * @param variant - The variant to set.
+     */
+    private setVariant;
+    /**
+     * Sets the orientation attribute for the divider component.
+     * If the provided orientation is not included in the DIVIDER_ORIENTATION,
+     * it defaults to the value specified in DEFAULTS.ORIENTATION.
+     *
+     * @param orientation - The orientation to set.
+     */
+    private setOrientation;
+    /**
+     * Sets the buttonPosition and arrowDirection attribute for the divider component.
+     * If the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,
+     * it defaults to the value specified in DIRECTIONS based on the ORIENTATION.
+     *
+     * @param buttonPosition - The buttonPosition to set.
+     * @param arrowDirection - The arrowDirection to set.
+     */
+    private ensureValidDirections;
+    /**
+     * Configures the grabber button within the divider.
+     *
+     * - Sets the `prefix-icon` attribute for the grabber button based
+     * on the `arrow-direction` and `orientation` properties.
+     *
+     * This method updates the DOM element dynamically if a grabber button is present.
+     */
+    private setGrabberButton;
+    /**
+     * Determines the arrow icon based on the consumer-defined `arrowDirection`.
+     *
+     * @returns The icon that represents the arrow direction.
+     */
+    private getArrowIcon;
+    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    /**
+     * Infers the type of divider based on the kind of slot present.
+     * @param slot - default slot of divider
+     */
+    private inferDividerType;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Divider;

package/dist/components/divider/divider.component.js

@@ -0,0 +1,222 @@
+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 styles from './divider.styles';
+import { Component } from '../../models';
+import { ARROW_ICONS, BUTTON_TAG, DEFAULTS, DIRECTIONS, DIVIDER_ORIENTATION, DIVIDER_VARIANT, TEXT_TAG, } from './divider.constants';
+/**
+ * `mdc-divider` is a component that provides a line to separate and organize content.
+ * It can also include a button or text positioned centrally, allowing users to interact with the layout.
+ *
+ * **Divider Orientation:**
+ * - **Horizontal**: A thin, horizontal line.
+ * - **Vertical**: A thin, vertical line.
+ *
+ * **Divider Variants:**
+ * - **solid**: Solid line.
+ * - **gradient**: Gradient Line.
+ *
+ * **Divider Types:**
+ * - The type of divider is inferred based on the kind of slot present.
+ *  - **Primary**: A simple horizontal or vertical divider.
+ *  - **Text**: A horizontal divider with a text label in the center.
+ *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.
+ *
+ * **Accessibility:**
+ * - When the slot is replaced by an `mdc-button`:
+ *   - `aria-label` should be passed to the `mdc-button`.
+ *   - `aria-expanded` should be passed to the `mdc-button`.
+ *
+ * **Notes:**
+ * - If the slot is replaced by an invalid tag name or contains multiple elements,
+ *   the divider defaults to the **Primary** type.
+ * - To override the styles of the divider, use the provided CSS custom properties.
+ *
+ * @tagname mdc-divider
+ *
+ * @cssproperty --mdc-divider-background-color - background color of the divider
+ * @cssproperty --mdc-divider-width - width of the divider
+ * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider
+ * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider
+ * @cssproperty --mdc-divider-text-size - font size of label in the text divider
+ * @cssproperty --mdc-divider-text-color - font color of label in the text divider
+ * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
+ * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
+ * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
+ */
+class Divider extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * Two orientations of divider
+         * - **horizontal**: A thin, horizontal line with 0.0625rem width.
+         * - **vertical**: A thin, vertical line with 0.0625rem width.
+         *
+         * Note: We do not support "Vertical Text Divider" as of now.
+         * @default horizontal
+         */
+        this.orientation = DEFAULTS.ORIENTATION;
+        /**
+         * Two variants of divider
+         * - **solid**: Solid line.
+         * - **gradient**: Gradient Line that fades on either sides of the divider.
+         * @default solid
+         */
+        this.variant = DEFAULTS.VARIANT;
+        /**
+         * Direction of the arrow icon, if applicable.
+         * - **positive**
+         * - **negative**
+         *
+         * Note: Positive and Negative directions are defined based on Cartesian plane.
+         * @default 'negative'
+         */
+        this.arrowDirection = DEFAULTS.ARROW_DIRECTION;
+        /**
+         * Position of the button, if applicable.
+         * - **positive**
+         * - **negative**
+         *
+         * Note: Positive and Negative directions are defined based on Cartesian plane.
+         * @default 'negative'
+         */
+        this.buttonPosition = DEFAULTS.BUTTON_DIRECTION;
+    }
+    /**
+     * Sets the variant attribute for the divider component.
+     * If the provided variant is not included in the DIVIDER_VARIANT,
+     * it defaults to the value specified in DEFAULTS.VARIANT.
+     *
+     * @param variant - The variant to set.
+     */
+    setVariant(variant) {
+        this.setAttribute('variant', Object.values(DIVIDER_VARIANT).includes(variant) ? variant : DEFAULTS.VARIANT);
+    }
+    /**
+     * Sets the orientation attribute for the divider component.
+     * If the provided orientation is not included in the DIVIDER_ORIENTATION,
+     * it defaults to the value specified in DEFAULTS.ORIENTATION.
+     *
+     * @param orientation - The orientation to set.
+     */
+    setOrientation(orientation) {
+        this.setAttribute('orientation', Object.values(DIVIDER_ORIENTATION).includes(orientation) ? orientation : DEFAULTS.ORIENTATION);
+    }
+    /**
+     * Sets the buttonPosition and arrowDirection attribute for the divider component.
+     * If the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,
+     * it defaults to the value specified in DIRECTIONS based on the ORIENTATION.
+     *
+     * @param buttonPosition - The buttonPosition to set.
+     * @param arrowDirection - The arrowDirection to set.
+     */
+    ensureValidDirections() {
+        const defaultDirection = this.orientation === DIVIDER_ORIENTATION.HORIZONTAL
+            ? DIRECTIONS.NEGATIVE
+            : DIRECTIONS.POSITIVE;
+        if (!Object.values(DIRECTIONS).includes(this.buttonPosition)) {
+            this.buttonPosition = defaultDirection;
+        }
+        if (!Object.values(DIRECTIONS).includes(this.arrowDirection)) {
+            this.arrowDirection = defaultDirection;
+        }
+    }
+    /**
+     * Configures the grabber button within the divider.
+     *
+     * - Sets the `prefix-icon` attribute for the grabber button based
+     * on the `arrow-direction` and `orientation` properties.
+     *
+     * This method updates the DOM element dynamically if a grabber button is present.
+     */
+    setGrabberButton() {
+        const buttonElement = this.querySelector('mdc-button');
+        if (!buttonElement)
+            return;
+        this.ensureValidDirections();
+        const iconType = this.getArrowIcon();
+        buttonElement.setAttribute('variant', 'secondary');
+        buttonElement.setAttribute('prefix-icon', iconType);
+    }
+    /**
+     * Determines the arrow icon based on the consumer-defined `arrowDirection`.
+     *
+     * @returns The icon that represents the arrow direction.
+     */
+    getArrowIcon() {
+        const isHorizontal = this.orientation === DIVIDER_ORIENTATION.HORIZONTAL;
+        const isPositive = this.arrowDirection === DIRECTIONS.POSITIVE;
+        if (isHorizontal) {
+            return isPositive ? ARROW_ICONS.UP : ARROW_ICONS.DOWN;
+        }
+        return isPositive ? ARROW_ICONS.RIGHT : ARROW_ICONS.LEFT;
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('orientation')) {
+            this.setOrientation(this.orientation);
+        }
+        if (changedProperties.has('variant')) {
+            this.setVariant(this.variant);
+        }
+        if (changedProperties.has('orientation')
+            || changedProperties.has('arrowDirection')
+            || changedProperties.has('buttonPosition')) {
+            this.setGrabberButton();
+        }
+    }
+    /**
+     * Infers the type of divider based on the kind of slot present.
+     * @param slot - default slot of divider
+     */
+    inferDividerType() {
+        var _a;
+        this.setAttribute('data-type', 'mdc-primary-divider');
+        const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const assignedElements = (slot === null || slot === void 0 ? void 0 : slot.assignedElements({ flatten: true })) || [];
+        if (assignedElements.length > 1)
+            return;
+        const hasTextChild = assignedElements.some((el) => el.tagName === TEXT_TAG.toUpperCase());
+        const hasButtonChild = assignedElements.some((el) => el.tagName === BUTTON_TAG.toUpperCase());
+        if (hasTextChild && !hasButtonChild) {
+            this.setAttribute('data-type', 'mdc-text-divider');
+        }
+        else if (!hasTextChild && hasButtonChild) {
+            this.setAttribute('data-type', 'mdc-grabber-divider');
+            this.setGrabberButton();
+        }
+    }
+    render() {
+        return html `
+      <div></div>
+      <slot @slotchange=${this.inferDividerType}></slot>
+      <div></div>
+    `;
+    }
+}
+Divider.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Divider.prototype, "orientation", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Divider.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, attribute: 'arrow-direction', reflect: true }),
+    __metadata("design:type", String)
+], Divider.prototype, "arrowDirection", void 0);
+__decorate([
+    property({ type: String, attribute: 'button-position', reflect: true }),
+    __metadata("design:type", String)
+], Divider.prototype, "buttonPosition", void 0);
+export default Divider;

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

@@ -0,0 +1,32 @@
+import { TAG_NAME as BUTTON_TAG } from '../button/button.constants';
+import { TAG_NAME as TEXT_TAG } from '../text/text.constants';
+declare const TAG_NAME: "mdc-divider";
+declare const DIVIDER_ORIENTATION: {
+    readonly HORIZONTAL: "horizontal";
+    readonly VERTICAL: "vertical";
+};
+declare const DIVIDER_VARIANT: {
+    readonly SOLID: "solid";
+    readonly GRADIENT: "gradient";
+};
+/**
+ * Direction types for both the arrow and button component.
+ * These directions are dependent on the divider's orientation.
+ */
+declare const DIRECTIONS: {
+    readonly POSITIVE: "positive";
+    readonly NEGATIVE: "negative";
+};
+declare const ARROW_ICONS: {
+    readonly UP: "arrow-up-regular";
+    readonly DOWN: "arrow-down-regular";
+    readonly LEFT: "arrow-left-regular";
+    readonly RIGHT: "arrow-right-regular";
+};
+declare const DEFAULTS: {
+    readonly ORIENTATION: "horizontal";
+    readonly VARIANT: "solid";
+    readonly ARROW_DIRECTION: "negative";
+    readonly BUTTON_DIRECTION: "negative";
+};
+export { TAG_NAME, DEFAULTS, DIVIDER_VARIANT, DIVIDER_ORIENTATION, DIRECTIONS, BUTTON_TAG, TEXT_TAG, ARROW_ICONS, };

package/dist/components/divider/divider.constants.js

@@ -0,0 +1,33 @@
+import utils from '../../utils/tag-name';
+import { TAG_NAME as BUTTON_TAG } from '../button/button.constants';
+import { TAG_NAME as TEXT_TAG } from '../text/text.constants';
+const TAG_NAME = utils.constructTagName('divider');
+const DIVIDER_ORIENTATION = {
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical',
+};
+const DIVIDER_VARIANT = {
+    SOLID: 'solid',
+    GRADIENT: 'gradient',
+};
+/**
+ * Direction types for both the arrow and button component.
+ * These directions are dependent on the divider's orientation.
+ */
+const DIRECTIONS = {
+    POSITIVE: 'positive',
+    NEGATIVE: 'negative',
+};
+const ARROW_ICONS = {
+    UP: 'arrow-up-regular',
+    DOWN: 'arrow-down-regular',
+    LEFT: 'arrow-left-regular',
+    RIGHT: 'arrow-right-regular',
+};
+const DEFAULTS = {
+    ORIENTATION: DIVIDER_ORIENTATION.HORIZONTAL,
+    VARIANT: DIVIDER_VARIANT.SOLID,
+    ARROW_DIRECTION: DIRECTIONS.NEGATIVE,
+    BUTTON_DIRECTION: DIRECTIONS.NEGATIVE,
+};
+export { TAG_NAME, DEFAULTS, DIVIDER_VARIANT, DIVIDER_ORIENTATION, DIRECTIONS, BUTTON_TAG, TEXT_TAG, ARROW_ICONS, };

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

@@ -0,0 +1,5 @@
+/**
+ * Divider component styles
+ */
+declare const styles: import("lit").CSSResult[];
+export default styles;

package/dist/components/divider/divider.styles.js

@@ -0,0 +1,155 @@
+import { css } from 'lit';
+import { hostFitContentStyles } from '../../utils/styles';
+/**
+ * Divider component styles
+ */
+const styles = [
+    hostFitContentStyles,
+    /* Host styles */
+    css `
+    :host {
+      --mdc-divider-background-color: var(--mds-color-theme-outline-secondary-normal);
+      --mdc-divider-width: 0.0625rem;
+      --mdc-divider-horizontal-gradient: var(--mds-color-theme-gradientdivider-default-normal);
+      --mdc-divider-vertical-gradient: var(--mds-color-theme-gradientdivider-vertical-normal);
+      --mdc-divider-text-size: var(--mds-font-size-body-midsize);
+      --mdc-divider-text-color: var(--mds-color-theme-text-secondary-normal);
+      --mdc-divider-text-line-height: var(--mds-font-lineheight-body-midsize);
+      --mdc-divider-text-margin: 1.5rem;
+      --mdc-divider-grabber-button-border-radius: 0.5rem;
+
+      display: flex;
+      justify-content: center;
+    }
+
+    /* Primary and grabber divider styles */
+    :host([data-type='mdc-primary-divider']),
+    :host([data-type='mdc-grabber-divider']) {
+      background-color: var(--mdc-divider-background-color);
+    }
+
+    /* Orientation-specific styles */
+    :host([orientation='horizontal']) {
+      flex-direction: row;
+      height: var(--mdc-divider-width);
+      width: 100%;
+    }
+
+    :host([orientation='vertical']:not([data-type='mdc-text-divider'])) {
+      flex-direction: column;
+      height: 100%;
+      width: var(--mdc-divider-width);
+    }
+
+    /* Gradient styles for primary and grabber dividers */
+    :host([orientation='horizontal'][variant='gradient'][data-type='mdc-primary-divider']),
+    :host([orientation='horizontal'][variant='gradient'][data-type='mdc-grabber-divider']) {
+      background: var(--mdc-divider-horizontal-gradient);
+    }
+
+    :host([orientation='vertical'][variant='gradient'][data-type='mdc-primary-divider']),
+    :host([orientation='vertical'][variant='gradient'][data-type='mdc-grabber-divider']) {
+      background: var(--mdc-divider-vertical-gradient);
+    }
+
+    /* Hiding slotted content for primary dividers */
+    :host([data-type='mdc-primary-divider']) ::slotted(*) {
+      display: none;
+    }
+
+    /** Button divider styles */
+    :host([orientation='vertical']) ::slotted(mdc-button) {
+      width: 1.25rem;
+      height: 2.5rem;
+      border-radius: 0 
+          var(--mdc-divider-grabber-button-border-radius) 
+          var(--mdc-divider-grabber-button-border-radius) 
+          0;
+    }
+
+    :host([orientation='horizontal']) ::slotted(mdc-button) {
+      height: 1.25rem;
+      width: 2.5rem;
+      border-radius: 0 
+          0 
+          var(--mdc-divider-grabber-button-border-radius) 
+          var(--mdc-divider-grabber-button-border-radius);
+    }
+
+    :host([orientation='horizontal'][button-position='positive']),
+    :host([orientation='vertical'][button-position='negative']) {
+      align-items: end;
+    }
+
+    :host([orientation='horizontal'][button-position='negative']),
+    :host([orientation='vertical'][button-position='positive']) {
+      align-items: start;
+    }
+
+    :host([orientation='horizontal'][button-position='positive']) ::slotted(mdc-button) {
+      border-radius: var(--mdc-divider-grabber-button-border-radius) 
+          var(--mdc-divider-grabber-button-border-radius) 
+          0 
+          0;
+      border-bottom-color: transparent;
+    }
+
+    :host([orientation='horizontal'][button-position='negative']) ::slotted(mdc-button) {
+      border-top-color: transparent;
+    }
+
+    :host([orientation='vertical'][button-position='negative']:dir(ltr)) ::slotted(mdc-button),
+    :host([orientation='vertical'][button-position='negative']:dir(rtl)) ::slotted(mdc-button) {
+      border-radius: var(--mdc-divider-grabber-button-border-radius) 
+          0 
+          0 
+          var(--mdc-divider-grabber-button-border-radius);
+      border-right-color: transparent;
+    }
+
+    :host([orientation='vertical'][button-position='positive']:dir(ltr)) ::slotted(mdc-button),
+    :host([orientation='vertical'][button-position='positive']:dir(rtl)) ::slotted(mdc-button) {
+      border-left-color: transparent;
+    }
+
+    :host([orientation='vertical'][button-position='positive']:dir(rtl)) ::slotted(mdc-button) {
+      border-radius: 0 
+          var(--mdc-divider-grabber-button-border-radius) 
+          var(--mdc-divider-grabber-button-border-radius) 
+          0;
+      transform: rotate(180deg);
+    }
+
+    :host([orientation='vertical'][button-position='negative']:dir(rtl)) ::slotted(mdc-button) {
+      transform: rotate(180deg);
+    }
+
+    /** Text divider styles */
+    :host([orientation='horizontal'][variant='gradient'][data-type='mdc-text-divider']),
+    :host([orientation='horizontal'][variant='solid'][data-type='mdc-text-divider']) {
+      align-items: center;
+    }
+
+    :host([data-type='mdc-text-divider']) > div {
+      width: 100%;
+      height: 100%;
+      background-color: var(--mdc-divider-background-color);
+    }
+
+    :host([orientation='horizontal'][variant='gradient'][data-type='mdc-text-divider']) > div:first-of-type {
+      background: linear-gradient(to right, transparent, 30%, var(--mdc-divider-background-color));
+    }
+
+    :host([orientation='horizontal'][variant='gradient'][data-type='mdc-text-divider']) > div:last-of-type {
+      background: linear-gradient(to left, transparent, 30%, var(--mdc-divider-background-color));
+    }
+
+    :host([data-type='mdc-text-divider']) ::slotted(mdc-text) {
+      margin: 0 var(--mdc-divider-text-margin);
+      color: var(--mdc-divider-text-color);
+      font-size: var(--mdc-divider-text-size);
+      line-height: var(--mdc-divider-text-line-height);
+    }
+  `,
+];
+export default styles;

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

@@ -0,0 +1,6 @@
+import type { ValueOf } from '../../utils/types';
+import { DIVIDER_ORIENTATION, DIVIDER_VARIANT, DIRECTIONS } from './divider.constants';
+type DividerOrientation = ValueOf<typeof DIVIDER_ORIENTATION>;
+type DividerVariant = ValueOf<typeof DIVIDER_VARIANT>;
+type Directions = ValueOf<typeof DIRECTIONS>;
+export { DividerOrientation, DividerVariant, Directions };

package/dist/components/divider/divider.types.js

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

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

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

package/dist/components/divider/index.js

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

package/dist/custom-elements.json

@@ -938,6 +938,236 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/divider/divider.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n  - `aria-label` should be passed to the `mdc-button`.\n  - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n  the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
+          "name": "Divider",
+          "cssProperties": [
+            {
+              "description": "background color of the divider",
+              "name": "--mdc-divider-background-color"
+            },
+            {
+              "description": "width of the divider",
+              "name": "--mdc-divider-width"
+            },
+            {
+              "description": "gradient of the horizontal divider",
+              "name": "--mdc-divider-horizontal-gradient"
+            },
+            {
+              "description": "gradient of the vertical divider",
+              "name": "--mdc-divider-vertical-gradient"
+            },
+            {
+              "description": "font size of label in the text divider",
+              "name": "--mdc-divider-text-size"
+            },
+            {
+              "description": "font color of label in the text divider",
+              "name": "--mdc-divider-text-color"
+            },
+            {
+              "description": "left and right margin of label in the text divider",
+              "name": "--mdc-divider-text-margin"
+            },
+            {
+              "description": "line height of label in the text divider",
+              "name": "--mdc-divider-text-line-height"
+            },
+            {
+              "description": "border radius of the grabber button",
+              "name": "--mdc-divider-grabber-button-border-radius"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "DividerOrientation"
+              },
+              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
+              "default": "horizontal",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "DividerVariant"
+              },
+              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
+              "default": "solid",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "arrowDirection",
+              "type": {
+                "text": "string"
+              },
+              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "attribute": "arrow-direction",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "buttonPosition",
+              "type": {
+                "text": "string"
+              },
+              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "attribute": "button-position",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "setVariant",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "variant",
+                  "type": {
+                    "text": "DividerVariant"
+                  },
+                  "description": "The variant to set."
+                }
+              ],
+              "description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
+            },
+            {
+              "kind": "method",
+              "name": "setOrientation",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "orientation",
+                  "type": {
+                    "text": "DividerOrientation"
+                  },
+                  "description": "The orientation to set."
+                }
+              ],
+              "description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
+            },
+            {
+              "kind": "method",
+              "name": "ensureValidDirections",
+              "privacy": "private",
+              "description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
+              "parameters": [
+                {
+                  "description": "The buttonPosition to set.",
+                  "name": "buttonPosition"
+                },
+                {
+                  "description": "The arrowDirection to set.",
+                  "name": "arrowDirection"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setGrabberButton",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
+            },
+            {
+              "kind": "method",
+              "name": "getArrowIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
+            },
+            {
+              "kind": "method",
+              "name": "inferDividerType",
+              "privacy": "private",
+              "description": "Infers the type of divider based on the kind of slot present.",
+              "parameters": [
+                {
+                  "description": "default slot of divider",
+                  "name": "slot"
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "orientation",
+              "type": {
+                "text": "DividerOrientation"
+              },
+              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
+              "default": "horizontal",
+              "fieldName": "orientation"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "DividerVariant"
+              },
+              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
+              "default": "solid",
+              "fieldName": "variant"
+            },
+            {
+              "name": "arrow-direction",
+              "type": {
+                "text": "string"
+              },
+              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "fieldName": "arrowDirection"
+            },
+            {
+              "name": "button-position",
+              "type": {
+                "text": "string"
+              },
+              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "fieldName": "buttonPosition"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-divider",
+          "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n *  - **Primary**: A simple horizontal or vertical divider.\n *  - **Text**: A horizontal divider with a text label in the center.\n *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n *   - `aria-label` should be passed to the `mdc-button`.\n *   - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n *   the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Divider",
+            "module": "components/divider/divider.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/icon/icon.component.js",

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

@@ -0,0 +1,43 @@
+import Component from '../../components/divider';
+/**
+ * `mdc-divider` is a component that provides a line to separate and organize content.
+ * It can also include a button or text positioned centrally, allowing users to interact with the layout.
+ *
+ * **Divider Orientation:**
+ * - **Horizontal**: A thin, horizontal line.
+ * - **Vertical**: A thin, vertical line.
+ *
+ * **Divider Variants:**
+ * - **solid**: Solid line.
+ * - **gradient**: Gradient Line.
+ *
+ * **Divider Types:**
+ * - The type of divider is inferred based on the kind of slot present.
+ *  - **Primary**: A simple horizontal or vertical divider.
+ *  - **Text**: A horizontal divider with a text label in the center.
+ *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.
+ *
+ * **Accessibility:**
+ * - When the slot is replaced by an `mdc-button`:
+ *   - `aria-label` should be passed to the `mdc-button`.
+ *   - `aria-expanded` should be passed to the `mdc-button`.
+ *
+ * **Notes:**
+ * - If the slot is replaced by an invalid tag name or contains multiple elements,
+ *   the divider defaults to the **Primary** type.
+ * - To override the styles of the divider, use the provided CSS custom properties.
+ *
+ * @tagname mdc-divider
+ *
+ * @cssproperty --mdc-divider-background-color - background color of the divider
+ * @cssproperty --mdc-divider-width - width of the divider
+ * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider
+ * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider
+ * @cssproperty --mdc-divider-text-size - font size of label in the text divider
+ * @cssproperty --mdc-divider-text-color - font color of label in the text divider
+ * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
+ * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
+ * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/divider/index.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/divider';
+import { TAG_NAME } from '../../components/divider/divider.constants';
+/**
+ * `mdc-divider` is a component that provides a line to separate and organize content.
+ * It can also include a button or text positioned centrally, allowing users to interact with the layout.
+ *
+ * **Divider Orientation:**
+ * - **Horizontal**: A thin, horizontal line.
+ * - **Vertical**: A thin, vertical line.
+ *
+ * **Divider Variants:**
+ * - **solid**: Solid line.
+ * - **gradient**: Gradient Line.
+ *
+ * **Divider Types:**
+ * - The type of divider is inferred based on the kind of slot present.
+ *  - **Primary**: A simple horizontal or vertical divider.
+ *  - **Text**: A horizontal divider with a text label in the center.
+ *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.
+ *
+ * **Accessibility:**
+ * - When the slot is replaced by an `mdc-button`:
+ *   - `aria-label` should be passed to the `mdc-button`.
+ *   - `aria-expanded` should be passed to the `mdc-button`.
+ *
+ * **Notes:**
+ * - If the slot is replaced by an invalid tag name or contains multiple elements,
+ *   the divider defaults to the **Primary** type.
+ * - To override the styles of the divider, use the provided CSS custom properties.
+ *
+ * @tagname mdc-divider
+ *
+ * @cssproperty --mdc-divider-background-color - background color of the divider
+ * @cssproperty --mdc-divider-width - width of the divider
+ * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider
+ * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider
+ * @cssproperty --mdc-divider-text-size - font size of label in the text divider
+ * @cssproperty --mdc-divider-text-color - font color of label in the text divider
+ * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
+ * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
+ * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Divider',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -2,6 +2,7 @@ export { default as Avatar } from './avatar';
 export { default as Badge } from './badge';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
+export { default as Divider } from './divider';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Presence } from './presence';

package/dist/react/index.js

@@ -2,6 +2,7 @@ export { default as Avatar } from './avatar';
 export { default as Badge } from './badge';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
+export { default as Divider } from './divider';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Presence } from './presence';

package/package.json

@@ -35,5 +35,5 @@
     "@momentum-design/tokens": "*",
     "lit": "^3.2.0"
   },
-  "version": "0.12.6"
+  "version": "0.13.0"
 }