@m3e/core 1.0.0-rc.2 → 1.0.0-rc.4

package/dist/src/shared/primitives/ElevationToken.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Component design tokens that control the `M3eElevationElement`.
+ * @internal
+ */
+export declare const ElevationToken: {
+    readonly liftDuration: import("lit").CSSResult;
+    readonly liftEasing: import("lit").CSSResult;
+    readonly settleDuration: import("lit").CSSResult;
+    readonly settleEasing: import("lit").CSSResult;
+    readonly level: import("lit").CSSResult;
+    readonly hoverLevel: import("lit").CSSResult;
+    readonly focusLevel: import("lit").CSSResult;
+    readonly pressedLevel: import("lit").CSSResult;
+};
+//# sourceMappingURL=ElevationToken.d.ts.map

package/dist/src/shared/primitives/ElevationToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElevationToken.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/ElevationToken.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;CASjB,CAAC"}

package/dist/src/shared/primitives/FocusRingElement.d.ts

@@ -0,0 +1,77 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+declare const M3eFocusRingElement_base: import("../mixins/Constructor").Constructor<import("..").HtmlForMixin> & import("../mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * A focus ring used to depict a strong focus indicator.
+ *
+ * @description
+ * The `m3e-focus-ring` component is an absolute positioned element used to provide a strong focus indicator.
+ * The parenting element must be a relative positioned focusable element and allow for overflow.
+ *
+ * The component can be attached to an interactive element using the `for` attribute or programmatically using the `attach` method.
+ * The focus ring is displayed when the interactive element receives visible focus and hidden when focus is lost.
+ * This can be disabled using the `disabled` attribute.
+ *
+ * Alternately, you can use the `show` and `hide` methods to programmatically control the focus ring.
+ *
+ * @example
+ * The following example illustrates attaching a focus ring to an interactive element. In this example, the parenting div
+ * has relative positioning and is given an `id` referenced by `m3e-focus-ring` using the `for` attribute.  Note that `#myDiv`
+ * is not used when specifying the attached element's identifier.  The `#` is inferred.
+ *
+ * ```html
+ * <div id="myDiv" tabindex="0" style="position: relative;">
+ *  <m3e-focus-ring for="myDiv"></m3e-focus-ring>
+ * <div>
+ * ```
+ *
+ * @tag m3e-focus-ring
+ *
+ * @attr disabled - Whether the focus events will not trigger the focus ring. Focus rings can be still controlled manually by using the `show` and `hide` methods.
+ * @attr inward - Whether the focus ring animates inward instead of outward.
+ *
+ * @cssprop --m3e-focus-ring-color - The color of the focus ring.
+ * @cssprop --m3e-focus-ring-duration - The duration of the focus ring animation.
+ * @cssprop --m3e-focus-ring-growth-factor - The factor by which the focus ring grows.
+ * @cssprop --m3e-focus-ring-thickness - The thickness of the focus ring.
+ * @cssprop --m3e-focus-ring-visibility - The visibility of the focus ring.
+ */
+export declare class M3eFocusRingElement extends M3eFocusRingElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private readonly _outline?;
+    /**
+     * Whether the focus ring animates inward instead of outward.
+     * @default false
+     */
+    inward: boolean;
+    /**
+     * Whether the focus events will not trigger the focus ring.
+     * Focus rings can be still controlled manually by using the `show` and `hide` methods.
+     * @default false
+     */
+    disabled: boolean;
+    /** Launches a manual focus ring. */
+    show(): void;
+    /** Hides the focus ring. */
+    hide(): void;
+    /** @inheritdoc */
+    attach(control: HTMLElement): void;
+    /** @inheritdoc */
+    detach(): void;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+    /** @inheritdoc */
+    protected updated(_changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-focus-ring": M3eFocusRingElement;
+    }
+}
+export {};
+//# sourceMappingURL=FocusRingElement.d.ts.map

package/dist/src/shared/primitives/FocusRingElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusRingElement.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/FocusRingElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;;AAQ5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,mBAAoB,SAAQ,wBAAiC;;IACxE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA8DpC;IAQF,eAAe,CAAoB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAc;IAE3E;;;OAGG;IACyC,MAAM,UAAS;IAE3D;;;;OAIG;IACyC,QAAQ,UAAS;IAE7D,oCAAoC;IACpC,IAAI,IAAI,IAAI;IAIZ,4BAA4B;IAC5B,IAAI,IAAI,IAAI;IAIZ,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAK3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAOvB,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,MAAM,IAAI,OAAO;IAIpC,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAkB3E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/dist/src/shared/primitives/FocusRingToken.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Component design tokens that control the `M3eFocusRingElement`.
+ * @internal
+ */
+export declare const FocusRingToken: {
+    /** The color of the focus ring. */
+    readonly color: import("lit").CSSResult;
+    /** The duration of the focus ring animation. */
+    readonly duration: import("lit").CSSResult;
+    /** The thickness of the focus ring. */
+    readonly thickness: import("lit").CSSResult;
+    /** The visibility of the focus ring. */
+    readonly visibility: import("lit").CSSResult;
+    /** The factor by which the focus ring grows. */
+    readonly growthFactor: import("lit").CSSResult;
+};
+//# sourceMappingURL=FocusRingToken.d.ts.map

package/dist/src/shared/primitives/FocusRingToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusRingToken.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/FocusRingToken.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,cAAc;IACzB,mCAAmC;;IAGnC,gDAAgD;;IAGhD,uCAAuC;;IAGvC,wCAAwC;;IAGxC,gDAAgD;;CAExC,CAAC"}

package/dist/src/shared/primitives/PseudoCheckboxElement.d.ts

@@ -0,0 +1,49 @@
+import { CSSResultGroup, LitElement } from "lit";
+declare const M3ePseudoCheckboxElement_base: import("../mixins/Constructor").Constructor<import("..").CheckedIndeterminateMixin> & import("../mixins/Constructor").Constructor<import("..").DisabledMixin> & import("../mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * An element which looks like a checkbox.
+ *
+ * @description
+ * The `m3e-pseudo-checkbox` component is a pseudo-checkbox supporting checked, indeterminate, and disabled
+ * states. It is customizable via CSS properties for expressive, accessible UI design.
+ *
+ * @example
+ * The following example illustrates how to render a checked pseudo-checkbox.
+ * ```html
+ * <m3e-pseudo-checkbox checked></m3e-pseudo-checkbox>
+ * ```
+ *
+ * @tag m3e-pseudo-checkbox
+ *
+ * @attr checked - A value indicating whether the element is checked.
+ * @attr disabled - A value indicating whether the element is disabled.
+ * @attr indeterminate - A value indicating whether the element's checked state is indeterminate.
+ *
+ * @cssprop --m3e-checkbox-icon-size - Size of the checkbox icon.
+ * @cssprop --m3e-checkbox-container-shape - Border radius of the checkbox container.
+ * @cssprop --m3e-checkbox-unselected-outline-thickness - Outline thickness for unselected state.
+ * @cssprop --m3e-checkbox-unselected-outline-color - Outline color for unselected state.
+ * @cssprop --m3e-checkbox-selected-container-color - Background color for selected state.
+ * @cssprop --m3e-checkbox-selected-icon-color - Icon color for selected state.
+ * @cssprop --m3e-checkbox-unselected-disabled-outline-color - Outline color for unselected disabled state.
+ * @cssprop --m3e-checkbox-unselected-disabled-outline-opacity - Outline opacity for unselected disabled state.
+ * @cssprop --m3e-checkbox-selected-disabled-container-color - Background color for selected disabled state.
+ * @cssprop --m3e-checkbox-selected-disabled-container-opacity - Background opacity for selected disabled state.
+ * @cssprop --m3e-checkbox-selected-disabled-icon-color - Icon color for selected disabled state.
+ * @cssprop --m3e-checkbox-selected-disabled-icon-opacity - Icon opacity for selected disabled state.
+ */
+export declare class M3ePseudoCheckboxElement extends M3ePseudoCheckboxElement_base {
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-pseudo-checkbox": M3ePseudoCheckboxElement;
+    }
+}
+export {};
+//# sourceMappingURL=PseudoCheckboxElement.d.ts.map

package/dist/src/shared/primitives/PseudoCheckboxElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PseudoCheckboxElement.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/PseudoCheckboxElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;;AAMrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBACa,wBAAyB,SAAQ,6BAAwD;IACpG,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA6CpC;IAEF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;cACC,MAAM,IAAI,OAAO;CAarC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}

package/dist/src/shared/primitives/PseudoRadioElement.d.ts

@@ -0,0 +1,40 @@
+import { CSSResultGroup, LitElement } from "lit";
+declare const M3ePseudoRadioElement_base: import("../mixins/Constructor").Constructor<import("..").CheckedMixin> & import("../mixins/Constructor").Constructor<import("..").DisabledMixin> & import("../mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * An element which looks like a radio button.
+ *
+ * @description
+ * The `m3e-pseudo-radio` component is a pseudo-radio supporting checked and disabled
+ * states. It is customizable via CSS properties for expressive, accessible UI design.
+ *
+ * @example
+ * The following example illustrates how to render a checked pseudo-radio.
+ * ```html
+ * <m3e-pseudo-radio checked></m3e-pseudo-radio>
+ * ```
+ *
+ * @tag m3e-pseudo-radio
+ *
+ * @attr checked - A value indicating whether the element is checked.
+ * @attr disabled - A value indicating whether the element is disabled.
+ *
+ * @cssprop --m3e-radio-icon-size - Size of the radio icon.
+ * @cssprop --m3e-radio-unselected-icon-color - Color of the unselected radio icon.
+ * @cssprop --m3e-radio-selected-icon-color - Color of the selected radio icon.
+ * @cssprop --m3e-radio-disabled-icon-color - Color of the disabled radio icon.
+ */
+export declare class M3ePseudoRadioElement extends M3ePseudoRadioElement_base {
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-pseudo-radio": M3ePseudoRadioElement;
+    }
+}
+export {};
+//# sourceMappingURL=PseudoRadioElement.d.ts.map

package/dist/src/shared/primitives/PseudoRadioElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PseudoRadioElement.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/PseudoRadioElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAM5D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,qBAAsB,SAAQ,0BAA2C;IACpF,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAwBpC;IAEF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;cACC,MAAM,IAAI,OAAO;CAUrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}

package/dist/src/shared/primitives/RippleElement.d.ts

@@ -0,0 +1,109 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+declare const M3eRippleElement_base: import("../mixins/Constructor").Constructor<import("..").HtmlForMixin> & import("../mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * Connects user input to screen reactions using ripples.
+ *
+ * @description
+ * The `m3e-ripple` component is an absolute positioned element used to depict a ripple.
+ * The parenting element must be a relative positioned element.
+ *
+ * The component can be attached to an interactive element using the `for` attribute or programmatically using the `attach` method.
+ * The ripple is displayed when the interactive element is pressed and hidden when released.  This can be disabled using the `disabled` attribute.
+ *
+ * The pressed state actives either using both pointer and keyboard events. For keyboard events, `SPACE` and `ENTER` activate a ripple.
+ * You can disabled whether the `ENTER` key actives a ripple using the `disable-enter` attribute.
+ *
+ * Alternately, you can use the `show` and `hide` methods to programmatically control the ripple.
+ *
+ * @example
+ * The following example illustrates attaching a ripple to an interactive element. In this example, the parenting div
+ * has relative positioning and is given an `id` referenced by `m3e-ripple` using the `for` attribute.  Note that `#myDiv`
+ * is not used when specifying the attached element's identifier.  The `#` is inferred.
+ *
+ * ```html
+ * <div id="myDiv" tabindex="0" style="position: relative;">
+ *  <m3e-ripple for="myDiv"></m3e-ripple>
+ * <div>
+ * ```
+ *
+ * @tag m3e-ripple
+ *
+ * @attr centered - Whether the ripple always originates from the center of the element's bounds, rather than originating from the location of the click event.
+ * @attr disable-enter - Whether the ripple is disabled when the enter key is pressed.
+ * @attr disabled - Whether click events will not trigger the ripple.  Ripples can be still controlled manually by using the `show` and 'hide' methods.
+ * @attr for - The identifier of the interactive control to which this element is attached.
+ * @attr radius - The radius, in pixels, of the ripple.
+ * @attr unbounded - Whether the ripple is visible outside the element's bounds.
+ *
+ * @cssprop --m3e-ripple-color - The color of the ripple.
+ * @cssprop --m3e-ripple-enter-duration - The duration for the enter animation (expansion from point of contact).
+ * @cssprop --m3e-ripple-exit-duration - The duration for the exit animation (fade-out).
+ * @cssprop --m3e-ripple-opacity - The opacity of the ripple.
+ * @cssprop --m3e-ripple-scale-factor - The factor by which to scale the ripple.
+ * @cssprop --m3e-ripple-shape - The shape of the ripple.
+ */
+export declare class M3eRippleElement extends M3eRippleElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /**
+     * Whether click events will not trigger the ripple.
+     * Ripples can be still controlled manually by using the `show` and 'hide' methods.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Whether the ripple is disabled when the enter key is pressed.
+     * @default false
+     */
+    disableEnter: boolean;
+    /**
+     * Whether the ripple always originates from the center of the element's bounds, rather
+     * than originating from the location of the click event.
+     * @default false
+     */
+    centered: boolean;
+    /**
+     * Whether the ripple is visible outside the element's bounds.
+     * @default false
+     */
+    unbounded: boolean;
+    /**
+     * The radius, in pixels, of the ripple.
+     * @default null
+     */
+    radius: number | null;
+    /**
+     * The element that triggers the ripple when click events are received.
+     * @default null
+     */
+    trigger: string | HTMLElement | null;
+    /** Whether the ripple is currently visible to the user. */
+    get visible(): boolean;
+    /**
+     * Launches a manual ripple.
+     * @param {number} x The x-coordinate, relative to the viewport, at which to present the ripple.
+     * @param {number} y The y-coordinate, relative to the viewport, at which to present the ripple.
+     * @param {boolean} [persistent=false] Whether the ripple will persist until hidden.
+     */
+    show(x: number, y: number, persistent?: boolean): void;
+    /** Manually hides the ripple. */
+    hide(): void;
+    /** @inheritdoc */
+    attach(control: HTMLElement): void;
+    /** @inheritdoc */
+    detach(): void;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected updated(_changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-ripple": M3eRippleElement;
+    }
+}
+export {};
+//# sourceMappingURL=RippleElement.d.ts.map

package/dist/src/shared/primitives/RippleElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RippleElement.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/RippleElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;;AAStE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBACa,gBAAiB,SAAQ,qBAAiC;;IACrE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAmEpC;IAUF;;;;OAIG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACqE,YAAY,UAAS;IAE7F;;;;OAIG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,SAAS,UAAS;IAE9D;;;OAGG;IACyB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzD;;;OAGG;IACS,OAAO,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAQ;IAExD,2DAA2D;IAC3D,IAAI,OAAO,YAEV;IAED;;;;;OAKG;IACH,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,UAAU,GAAE,OAAe,GAAG,IAAI;IAqC7D,iCAAiC;IACjC,IAAI,IAAI,IAAI;IAIZ,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAK3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAOvB,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAiC3E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/dist/src/shared/primitives/RippleToken.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Component design tokens that control the `M3eRippleElement`.
+ * @internal
+ */
+export declare const RippleToken: {
+    readonly color: import("lit").CSSResult;
+    readonly opacity: import("lit").CSSResult;
+    readonly enterDuration: import("lit").CSSResult;
+    readonly exitDuration: import("lit").CSSResult;
+    readonly scaleFactor: import("lit").CSSResult;
+};
+//# sourceMappingURL=RippleToken.d.ts.map

package/dist/src/shared/primitives/RippleToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RippleToken.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/RippleToken.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC"}

package/dist/src/shared/primitives/ScrollContainerElement.d.ts

@@ -0,0 +1,61 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { ScrollDividers } from "./ScrollDividers";
+/**
+ * A vertically oriented content container which presents dividers above and below content when scrolled.
+ *
+ * @description
+ * The `m3e-scroll-container` component provides a vertically oriented scrollable container with dynamic
+ * dividers above and below content. Designed according to Material 3 principles, it supports custom scrollbar
+ * thickness, divider styling, and focus ring theming via CSS custom properties.
+ *
+ * @example
+ * This example shows a scrollable container with dividers above and below the content, and thin scrollbars enabled.
+ * ```html
+ * <m3e-scroll-container dividers="above-below" thin>
+ *   <div>Scrollable content goes here</div>
+ * </m3e-scroll-container>
+ * ```
+ *
+ * @tag m3e-scroll-container
+ *
+ * @slot - Renders the scrollable content.
+ *
+ * @attr dividers - The dividers used to separate scrollable content.
+ * @attr thin - Whether to present thin scrollbars.
+ *
+ * @cssprop --m3e-divider-thickness - Thickness of the divider lines above and below content.
+ * @cssprop --m3e-divider-color - Color of the divider lines when visible.
+ * @cssprop --m3e-focus-ring-color - Color of the focus ring outline.
+ * @cssprop --m3e-focus-ring-thickness - Thickness of the focus ring outline.
+ * @cssprop --m3e-focus-ring-factor - Animation factor for focus ring thickness.
+ * @cssprop --m3e-focus-ring-duration - Duration of the focus ring animation.
+ */
+export declare class M3eScrollContainerElement extends LitElement {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /**
+     * The dividers used to separate scrollable content.
+     * @default "above-below"
+     */
+    dividers: ScrollDividers;
+    /**
+     * Whether to present thin scrollbars.
+     * @default false
+     */
+    thin: boolean;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+    /** @private */
+    private _updateScroll;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-scroll-container": M3eScrollContainerElement;
+    }
+}
+//# sourceMappingURL=ScrollContainerElement.d.ts.map

package/dist/src/shared/primitives/ScrollContainerElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollContainerElement.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/ScrollContainerElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM5E,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,yBAA0B,SAAQ,UAAU;;IACvD,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAmDpC;IAIF;;;OAGG;IACS,QAAQ,EAAE,cAAc,CAAiB;IAErD;;;OAGG;IACyC,IAAI,UAAS;IAEzD,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAWxE,kBAAkB;cACC,MAAM,IAAI,OAAO;IAIpC,eAAe;IAEf,OAAO,CAAC,aAAa;CAStB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}

package/dist/src/shared/primitives/ScrollDividers.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible dividers used to separate scrollable content. */
+export type ScrollDividers = "above" | "below" | "above-below" | "none";
+//# sourceMappingURL=ScrollDividers.d.ts.map

package/dist/src/shared/primitives/ScrollDividers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollDividers.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/ScrollDividers.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,GAAG,MAAM,CAAC"}

package/dist/src/shared/primitives/SlideElement.d.ts

@@ -0,0 +1,46 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+/**
+ * A carousel-like container used to horizontally cycle through slotted items.
+ *
+ * @example
+ * The following example illustrates the use of `m3e-slide` to cycle through content.
+ * In this example, `selected-index` is set to `1` so that "Content at index 1" is presented
+ * by the component.
+ * ```html
+ * <m3e-slide selected-index="1">
+ *  <div>Content at index 0</div>
+ *  <div>Content at index 1</div>
+ *  <div>Content at index 2</div>
+ *  <div>Content at index 3</div>
+ * </m3e-slide>
+ * ```
+ *
+ * @tag m3e-slide
+ *
+ * @attr selected-index - The zero-based index of the visible item.
+ *
+ * @cssprop --m3e-slide-animation-duration - The duration of transitions between slotted items.
+ */
+export declare class M3eSlide extends LitElement {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private readonly _items;
+    /**
+     * The zero-based index of the visible item.
+     * @default null
+     */
+    selectedIndex: number | null;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-slide": M3eSlide;
+    }
+}
+//# sourceMappingURL=SlideElement.d.ts.map

package/dist/src/shared/primitives/SlideElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideElement.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/SlideElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAKvF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,QAAS,SAAQ,UAAU;;IACtC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAsCpC;IAEF,eAAe,CAA2C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAa;IAE9F;;;OAGG;IACqE,aAAa,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE5G,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAoBxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAcrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/src/shared/primitives/StateLayerElement.d.ts

@@ -0,0 +1,76 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+declare const M3eStateLayerElement_base: import("../mixins/Constructor").Constructor<import("..").HtmlForMixin> & import("../mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * Provides focus and hover state layer treatment for an interactive element.
+ *
+ * @description
+ * The `m3e-state-layer` component is an absolute positioned element used to depict hover and focus overlays.
+ * The parenting element must be a relative positioned element.
+ *
+ * This element can be attached to an interactive element using the `for` attribute or programmatically using the `attach` method.
+ * The state layer is displayed when the interactive element is either hovered or focused.  This can be disabled using
+ * the `disabled` attribute.
+ *
+ * @example
+ * The following example illustrates attaching a state layer to an interactive element. In this example, the parenting div
+ * has relative positioning and is given an `id` referenced by `m3e-state-layer` using the `for` attribute.  Note that `#myDiv`
+ * is not used when specifying the attached element's identifier.  The `#` is inferred.
+ *
+ * ```html
+ * <div id="myDiv" tabindex="0" style="position: relative;">
+ *  <m3e-state-layer for="myDiv"></m3e-state-layer>
+ * <div>
+ * ```
+ *
+ * @tag m3e-state-layer
+ *
+ * @attr disabled - Whether hover and focus event will not trigger the state layer.Whether hover and focus event will not trigger the state layer. State layers can still be controlled manually using the `show` and `hide` methods.
+ *
+ * @cssprop --m3e-state-layer-duration - Duration of state layer changes.
+ * @cssprop --m3e-state-layer-easing - Easing curve of state layer changes.
+ * @cssprop --m3e-state-layer-focus-color - Color on hover.
+ * @cssprop --m3e-state-layer-focus-opacity - Opacity on focus.
+ * @cssprop --m3e-state-layer-hover-color - Color on hover.
+ * @cssprop --m3e-state-layer-hover-opacity - Opacity on hover.
+ */
+export declare class M3eStateLayerElement extends M3eStateLayerElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private readonly _layer?;
+    /**
+     * Whether hover and focus event will not trigger the state layer. State layers can still
+     * be controlled manually using the `show` and `hide` methods.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Launches a manual state layer.
+     * @param {"hover" | "focused"} state The state of the layer to show.
+     */
+    show(state: "hover" | "focused"): void;
+    /**
+     * Hides the state layer.
+     * @param {"hover" | "focused"} state The state of the layer to hide.
+     */
+    hide(state: "hover" | "focused"): void;
+    /** @inheritdoc */
+    attach(control: HTMLElement): void;
+    /** @inheritdoc */
+    detach(): void;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected updated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-state-layer": M3eStateLayerElement;
+    }
+}
+export {};
+//# sourceMappingURL=StateLayerElement.d.ts.map

package/dist/src/shared/primitives/StateLayerElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateLayerElement.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/StateLayerElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;;AAQvF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBACa,oBAAqB,SAAQ,yBAAiC;;IACzE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAkCpC;IAcF,eAAe,CAAkB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAc;IAEvE;;;;OAIG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI;IAItC;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI;IAItC,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAM3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAQvB,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS1E,kBAAkB;cACC,MAAM,IAAI,OAAO;CAyBrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/dist/src/shared/primitives/StateLayerToken.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Component design tokens that control the `M3eStateLayerElement`.
+ * @internal
+ */
+export declare const StateLayerToken: {
+    readonly hoverColor: import("lit").CSSResult;
+    readonly hoverOpacity: import("lit").CSSResult;
+    readonly focusColor: import("lit").CSSResult;
+    readonly focusOpacity: import("lit").CSSResult;
+    readonly duration: import("lit").CSSResult;
+    readonly easing: import("lit").CSSResult;
+};
+//# sourceMappingURL=StateLayerToken.d.ts.map

package/dist/src/shared/primitives/StateLayerToken.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateLayerToken.d.ts","sourceRoot":"","sources":["../../../../src/shared/primitives/StateLayerToken.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;;CAOlB,CAAC"}