@m3e/web 2.0.0

package/dist/src/slide-group/SlideGroupElement.d.ts

@@ -0,0 +1,91 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+/**
+ * Presents pagination controls used to scroll overflowing content.
+ *
+ * @description
+ * The `m3e-slide-group` component presents directional pagination controls for navigating overflowing content.
+ * It orchestrates scrollable layouts with expressive slot-based icons and adaptive orientation, revealing navigation
+ * affordances only when content exceeds a defined threshold.  It supports both horizontal and vertical flows, and
+ * encodes accessibility through customizable labels and interaction states.
+ *
+ * @example
+ * The following example illustrates a horizontally scrollable group of items with directional pagination buttons.
+ * The scroll controls appear when content exceeds the `48px` threshold.
+ * ```html
+ * <m3e-slide-group threshold="48">
+ *  <div>Item 1</div>
+ *  <div>Item 2</div>
+ *  <div>Item 3</div>
+ *  <div>Item 4</div>
+ *  <div>Item 5</div>
+ * </m3e-slide-group>
+ * ```
+ *
+ * @tag m3e-slide-group
+ *
+ * @slot - Renders the content to paginate.
+ * @slot next-icon - Renders the icon to present for the next button.
+ * @slot prev-icon - Renders the icon to present for the previous button.
+ *
+ * @attr disabled - Whether scroll buttons are disabled.
+ * @attr next-page-label - The accessible label given to the button used to move to the previous page.
+ * @attr previous-page-label - The accessible label given to the button used to move to the next page.
+ * @attr threshold - A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.
+ * @attr vertical - Whether content is oriented vertically.
+ *
+ * @cssprop --m3e-slide-group-button-icon-size - Sets icon size for scroll buttons; overrides default small icon size.
+ * @cssprop --m3e-slide-group-button-size - Defines scroll button size; used for width (horizontal) or height (vertical).
+ * @cssprop --m3e-slide-group-divider-top - Adds top border to content container for visual separation.
+ * @cssprop --m3e-slide-group-divider-bottom - Adds bottom border to content container for visual separation.
+ */
+export declare class M3eSlideGroupElement extends LitElement {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @internal A reference to the container used to scroll content. */
+    scrollContainer: HTMLElement;
+    /** @private */ private _canPage;
+    /** @private */ private _canPageStart;
+    /** @private */ private _canPageEnd;
+    /**
+     * Whether scroll buttons are disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Whether content is oriented vertically.
+     * @default false
+     */
+    vertical: boolean;
+    /**
+     * A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.
+     * @default 0
+     */
+    threshold: number;
+    /**
+     * The accessible label given to the button used to move to the previous page.
+     * @default "Previous page"
+     */
+    previousPageLabel: string;
+    /**
+     * The accessible label given to the button used to move to the next page.
+     * @default "Next page"
+     */
+    nextPageLabel: string;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+    /** @private */
+    private _updatePaging;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-slide-group": M3eSlideGroupElement;
+    }
+}
+//# sourceMappingURL=SlideGroupElement.d.ts.map

package/dist/src/slide-group/SlideGroupElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideGroupElement.d.ts","sourceRoot":"","sources":["../../../src/slide-group/SlideGroupElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAMrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,oBAAqB,SAAQ,UAAU;;IAClD,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA+CpC;IAUF,qEAAqE;IAClD,eAAe,EAAG,WAAW,CAAC;IAEjD,eAAe,CAAU,OAAO,CAAC,QAAQ,CAAS;IAClD,eAAe,CAAU,OAAO,CAAC,aAAa,CAAS;IACvD,eAAe,CAAU,OAAO,CAAC,WAAW,CAAS;IAErD;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyB,SAAS,SAAK;IAE1C;;;OAGG;IAC6C,iBAAiB,SAAmB;IAEpF;;;OAGG;IACyC,aAAa,SAAe;IAExE,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;cACC,MAAM,IAAI,OAAO;IA4EpC,eAAe;IAEf,OAAO,CAAC,aAAa;CA2BtB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,oBAAoB,CAAC;KACzC;CACF"}

package/dist/src/slide-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SlideGroupElement";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/slide-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/slide-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/src/slider/SliderElement.d.ts

@@ -0,0 +1,144 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { M3eSliderThumbElement } from "./SliderThumbElement";
+import { SliderSize } from "./SliderSize";
+/**
+ * Allows for the selection of numeric values from a range.
+ *
+ * @description
+ * The `m3e-slider` component enables users to select a numeric value from a continuous or discrete range.
+ * Designed according to Material 3 principles, it supports labeled value indicators, tick marks, and
+ * snapping behavior.
+ *
+ * @example
+ * The following example illustrates a labelled slider with thumb used to select a single numeric value.
+ * ```html
+ * <m3e-slider labelled>
+ *  <m3e-slider-thumb value="50"></m3e-slider-thumb>
+ * </m3e-slider>
+ * ```
+ *
+ * @example
+ * The next example illustrates a labelled range slider with two thumbs used to select a minimum and maximum numeric value.
+ * ```html
+ * <m3e-slider labelled>
+ *  <m3e-slider-thumb value="25"></m3e-slider-thumb>
+ *  <m3e-slider-thumb value="75"></m3e-slider-thumb>
+ * </m3e-slider>
+ * ```
+ *
+ * @tag m3e-slider
+ *
+ * @attr disabled - Whether the element is disabled.
+ * @attr discrete - Whether to show tick marks.
+ * @attr labelled - Whether to show value labels when activated.
+ * @attr max - The maximum allowable value.
+ * @attr min - The minimum allowable value.
+ * @attr step - The value at which the thumb will snap.
+ * @attr size - The size of the slider.
+ *
+ * @cssprop --m3e-slider-min-width - Minimum inline size of the slider host.
+ * @cssprop --m3e-slider-small-height - Height of the slider when size is small or extra-small.
+ * @cssprop --m3e-slider-medium-height - Height of the slider when size is medium.
+ * @cssprop --m3e-slider-large-height - Height of the slider when size is large.
+ * @cssprop --m3e-slider-extra-large-height - Height of the slider when size is extra-large.
+ * @cssprop --m3e-slider-small-active-track-shape - Corner shape of the active track for small sliders.
+ * @cssprop --m3e-slider-small-inactive-active-track-start-shape - Corner shape of the inactive track start for small sliders.
+ * @cssprop --m3e-slider-small-inactive-track-end-shape - Corner shape of the inactive track end for small sliders.
+ * @cssprop --m3e-slider-medium-active-track-shape - Corner shape of the active track for medium sliders.
+ * @cssprop --m3e-slider-medium-inactive-active-track-start-shape - Corner shape of the inactive track start for medium sliders.
+ * @cssprop --m3e-slider-medium-inactive-track-end-shape - Corner shape of the inactive track end for medium sliders.
+ * @cssprop --m3e-slider-large-active-track-shape - Corner shape of the active track for large sliders.
+ * @cssprop --m3e-slider-large-inactive-active-track-start-shape - Corner shape of the inactive track start for large sliders.
+ * @cssprop --m3e-slider-large-inactive-track-end-shape - Corner shape of the inactive track end for large sliders.
+ * @cssprop --m3e-slider-extra-large-active-track-shape - Corner shape of the active track for extra-large sliders.
+ * @cssprop --m3e-slider-extra-large-inactive-active-track-start-shape - Corner shape of the inactive track start for extra-large sliders.
+ * @cssprop --m3e-slider-extra-large-inactive-track-end-shape - Corner shape of the inactive track end for extra-large sliders.
+ * @cssprop --m3e-slider-extra-small-track-height - Height of the track for extra-small sliders.
+ * @cssprop --m3e-slider-small-track-height - Height of the track for small sliders.
+ * @cssprop --m3e-slider-medium-track-height - Height of the track for medium sliders.
+ * @cssprop --m3e-slider-large-track-height - Height of the track for large sliders.
+ * @cssprop --m3e-slider-extra-large-track-height - Height of the track for extra-large sliders.
+ * @cssprop --m3e-slider-tick-size - Size of each tick mark.
+ * @cssprop --m3e-slider-tick-shape - Corner shape of each tick mark.
+ * @cssprop --m3e-slider-inactive-track-color - Background color of the inactive track when enabled.
+ * @cssprop --m3e-slider-disabled-inactive-track-color - Base color of the inactive track when disabled.
+ * @cssprop --m3e-slider-disabled-inactive-track-opacity - Opacity of the inactive track when disabled.
+ * @cssprop --m3e-slider-active-track-color - Background color of the active track when enabled.
+ * @cssprop --m3e-slider-disabled-active-track-color - Base color of the active track when disabled.
+ * @cssprop --m3e-slider-disabled-active-track-opacity - Opacity of the active track when disabled.
+ * @cssprop --m3e-slider-tick-active-color - Color of active ticks when enabled.
+ * @cssprop --m3e-slider-disabled-tick-active-color - Color of active ticks when disabled.
+ * @cssprop --m3e-slider-tick-inactive-color - Color of inactive ticks when enabled.
+ * @cssprop --m3e-slider-disabled-tick-inactive-color - Color of inactive ticks when disabled.
+ */
+export declare class M3eSliderElement extends LitElement {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */
+    private readonly _base?;
+    /** @private */
+    private _ticks;
+    constructor();
+    /**
+     * The size of the slider.
+     * @default "extra-small"
+     */
+    size: SliderSize;
+    /**
+     * Whether the element is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Whether to show tick marks.
+     * @default false
+     */
+    discrete: boolean;
+    /**
+     * The minimum allowable value.
+     * @default 0
+     */
+    min: number;
+    /**
+     * The maximum allowable value.
+     * @default 100
+     */
+    max: number;
+    /**
+     * The value at which the thumb will snap.
+     * @default 1
+     */
+    step: number;
+    /**
+     * Whether to show value labels when activated.
+     * @default false
+     */
+    labelled: boolean;
+    /** The function used to format display values. */
+    displayWith: ((value: number | null) => string) | null;
+    /** The thumbs used to select values. */
+    get thumbs(): readonly M3eSliderThumbElement[];
+    /** Whether the slider is a range slider. */
+    get isRange(): boolean;
+    /** The thumb used to select a value. */
+    get thumb(): M3eSliderThumbElement | null;
+    /** The thumb used to select the lower value of a range slider. */
+    get lowerThumb(): M3eSliderThumbElement | null;
+    /** The thumb used to select the upper value of a range slider. */
+    get upperThumb(): M3eSliderThumbElement | null;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected updated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-slider": M3eSliderElement;
+    }
+}
+//# sourceMappingURL=SliderElement.d.ts.map

package/dist/src/slider/SliderElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderElement.d.ts","sourceRoot":"","sources":["../../../src/slider/SliderElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAOvF,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,qBACa,gBAAiB,SAAQ,UAAU;;IAC9C,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA+QpC;IAIF,eAAe;IACC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IAErD,eAAe;IACN,OAAO,CAAC,MAAM,CAAmD;;IAa1E;;;OAGG;IAC0B,IAAI,EAAE,UAAU,CAAiB;IAE9D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyB,GAAG,SAAK;IAEpC;;;OAGG;IACyB,GAAG,SAAO;IAEtC;;;OAGG;IACyB,IAAI,SAAK;IAErC;;;OAGG;IAC0B,QAAQ,UAAS;IAE9C,kDAAkD;IAClB,WAAW,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,MAAM,CAAC,GAAG,IAAI,CAAQ;IAE9F,wCAAwC;IACxC,IAAI,MAAM,IAAI,SAAS,qBAAqB,EAAE,CAE7C;IAED,4CAA4C;IAC5C,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,wCAAwC;IACxC,IAAI,KAAK,IAAI,qBAAqB,GAAG,IAAI,CAExC;IAED,kEAAkE;IAClE,IAAI,UAAU,IAAI,qBAAqB,GAAG,IAAI,CAE7C;IAED,kEAAkE;IAClE,IAAI,UAAU,IAAI,qBAAqB,GAAG,IAAI,CAE7C;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IASlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ1E,kBAAkB;cACC,MAAM,IAAI,OAAO;CA8VrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/dist/src/slider/SliderSize.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible sizes of a slider. */
+export type SliderSize = "extra-small" | "small" | "medium" | "large" | "extra-large";
+//# sourceMappingURL=SliderSize.d.ts.map

package/dist/src/slider/SliderSize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderSize.d.ts","sourceRoot":"","sources":["../../../src/slider/SliderSize.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC"}

package/dist/src/slider/SliderThumbElement.d.ts

@@ -0,0 +1,80 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { formValue } from "@m3e/web/core";
+declare const M3eSliderThumbElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").DirtyMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").TouchedMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").FormAssociatedMixin> & import("../core/shared/mixins/Constructor").Constructor & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").DisabledMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & typeof LitElement;
+/**
+ * A thumb used to select a value in a slider.
+ *
+ * @description
+ * The `m3e-slider-thumb` component is used within a `m3e-slider` to represent and select a specific value.
+ * This component supports continuous and discrete input, form association, and accessibility semantics.
+ * It emits `input` and `change` events to reflect value updates.
+ *
+ * @example
+ * The following example illustrates a labelled slider with thumb used to select a single numeric value.
+ * ```html
+ * <m3e-slider labelled>
+ *  <m3e-slider-thumb value="50"></m3e-slider-thumb>
+ * </m3e-slider>
+ * ```
+ *
+ * @example
+ * The next example illustrates a labelled range slider with two thumbs used to select a minimum and maximum numeric value.
+ * ```html
+ * <m3e-slider labelled>
+ *  <m3e-slider-thumb value="25"></m3e-slider-thumb>
+ *  <m3e-slider-thumb value="75"></m3e-slider-thumb>
+ * </m3e-slider>
+ * ```
+ *
+ * @tag m3e-slider-thumb
+ *
+ * @attr disabled - Whether the element is disabled.
+ * @attr name - The name that identifies the element when submitting the associated form.
+ * @attr value - The value of the thumb.
+ *
+ * @fires input - Emitted when the value changes.
+ * @fires change - Emitted when the value changes.
+ * @fires click - Emitted when the element is clicked.
+ *
+ * @cssprop --m3e-slider-thumb-width - Width of the slider thumb.
+ * @cssprop --m3e-slider-thumb-padding - Horizontal padding around the thumb.
+ * @cssprop --m3e-slider-thumb-color - Active color of the slider thumb when enabled.
+ * @cssprop --m3e-slider-thumb-pressed-width - Width of the thumb when pressed.
+ * @cssprop --m3e-slider-thumb-disabled-color - Color of the thumb when disabled.
+ * @cssprop --m3e-slider-thumb-disabled-opacity - Opacity of the thumb when disabled.
+ * @cssprop --m3e-slider-label-width - Width of the floating label above the thumb.
+ * @cssprop --m3e-slider-label-container-color - Background color of the label container.
+ * @cssprop --m3e-slider-label-color - Text color of the label.
+ * @cssprop --m3e-slider-label-font-size - Font size of the label text.
+ * @cssprop --m3e-slider-label-font-weight - Font weight of the label text.
+ * @cssprop --m3e-slider-label-line-height - Line height of the label text.
+ * @cssprop --m3e-slider-label-tracking - Letter spacing of the label text.
+ */
+export declare class M3eSliderThumbElement extends M3eSliderThumbElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private readonly _focusRing?;
+    /**
+     * The value of the thumb.
+     * @default null
+     */
+    value: number | null;
+    /** @inheritdoc */
+    get [formValue](): string | File | FormData | null;
+    /** @inheritdoc */
+    focus(options?: FocusOptions): void;
+    /** @inheritdoc */
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-slider-thumb": M3eSliderThumbElement;
+    }
+}
+export {};
+//# sourceMappingURL=SliderThumbElement.d.ts.map

package/dist/src/slider/SliderThumbElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderThumbElement.d.ts","sourceRoot":"","sources":["../../../src/slider/SliderThumbElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAGvF,OAAO,EAOL,SAAS,EAIV,MAAM,eAAe,CAAC;;AAEvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,qBACa,qBAAsB,SAAQ,0BAE1C;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA+GpC;IAEF,eAAe,CACf,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IAElD;;;OAGG;IACwC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEvE,kBAAkB;IAClB,IAAa,CAAC,SAAS,CAAC,IAAI,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,CAE1D;IAOD,kBAAkB;IACT,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAY5C,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK/E,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAUrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}

package/dist/src/slider/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./SliderElement";
+export * from "./SliderSize";
+export * from "./SliderThumbElement";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/slider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC"}

package/dist/src/snackbar/Snackbar.d.ts

@@ -0,0 +1,62 @@
+/** Encapsulates options used to present a snackbar message. */
+export interface SnackbarOptions {
+    /** The length of time, in milliseconds, to wait before automatically dismissing the snackbar. */
+    duration?: number;
+    /** The accessible label given to the close button used to dismiss the snackbar. */
+    closeLabel?: string;
+    /** The callback function invoked when the action is clicked. */
+    actionCallback?: () => void;
+}
+/**
+ * Presents short updates about application processes at the bottom of the screen from anywhere in an application.
+ * @example
+ * The following example illustrates basic usage.
+ * ```js
+ * M3eSnackbar.open("File deleted");
+ * ```
+ * @example
+ * The next example illustrates presenting a snackbar with an action and callback.
+ * ```js
+ * M3eSnackbar.open("File deleted", "Undo", {
+ *   actionCallback: () => {
+ *     // Undo logic here
+ *   },
+ * });
+ */
+export declare class M3eSnackbar {
+    /**
+     * Opens a snackbar with a message.
+     * @param {string} message The message to show in the snackbar.
+     * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.
+     */
+    static open(message: string, options?: SnackbarOptions): void;
+    /**
+     * Opens a snackbar with a message and action.
+     * @param {string} message The message to show in the snackbar.
+     * @param {string} action The label for the snackbar action.
+     * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.
+     */
+    static open(message: string, action: string, options?: SnackbarOptions): void;
+    /**
+     * Opens a snackbar with a message, action and optional close affordance.
+     * @param {string} message The message to show in the snackbar.
+     * @param {string} action The label for the snackbar action.
+     * @param {boolean} dismissible Whether to present close affordance.
+     * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.
+     */
+    static open(message: string, action: string, dismissible: boolean, options?: SnackbarOptions): void;
+    /**
+     * Opens a snackbar with a message and optional close affordance.
+     * @param {string} message The message to show in the snackbar.
+     * @param {boolean} dismissible Whether to present close affordance.
+     * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.
+     */
+    static open(message: string, dismissible: boolean, options?: SnackbarOptions): void;
+    /** Dismisses the currently visible snackbar. */
+    static dismiss(): void;
+}
+declare global {
+    /** Presents short updates about application processes at the bottom of the screen from anywhere in an application. */
+    var M3eSnackbar: M3eSnackbar;
+}
+//# sourceMappingURL=Snackbar.d.ts.map

package/dist/src/snackbar/Snackbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/snackbar/Snackbar.ts"],"names":[],"mappings":"AAMA,+DAA+D;AAC/D,MAAM,WAAW,eAAe;IAC9B,iGAAiG;IACjG,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,mFAAmF;IACnF,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,gEAAgE;IAChE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,WAAW;IACtB;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI;IAE7D;;;;;OAKG;IACH,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI;IAE7E;;;;;;OAMG;IACH,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI;IAEnG;;;;;OAKG;IACH,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI;IA0DnF,gDAAgD;IAChD,MAAM,CAAC,OAAO,IAAI,IAAI;CAGvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,sHAAsH;IACtH,IAAI,WAAW,EAAE,WAAW,CAAC;CAC9B"}

package/dist/src/snackbar/SnackbarElement.d.ts

@@ -0,0 +1,79 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+declare const M3eSnackbarElement_base: import("../core/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * Presents short updates about application processes at the bottom of the screen.
+ * @tag m3e-snackbar
+ *
+ * @slot - Renders the content of the snackbar.
+ * @slot close-icon - Renders the icon of the button used to close the snackbar.
+ *
+ * @attr action - The label of the snackbar's action.
+ * @attr close-label - The accessible label given to the button used to dismiss the snackbar.
+ * @attr dismissible - Whether a button is presented that can be used to close the snackbar.
+ * @attr duration - The length of time, in milliseconds, to wait before automatically dismissing the snackbar.
+ *
+ * @fires beforetoggle - Dispatched before the toggle state changes.
+ * @fires toggle - Dispatched after the toggle state has changed.
+ *
+ * @cssprop --m3e-snackbar-margin - Vertical offset from the bottom of the viewport.
+ * @cssprop --m3e-snackbar-container-shape - Border radius of the snackbar container.
+ * @cssprop --m3e-snackbar-container-color - Background color of the snackbar.
+ * @cssprop --m3e-snackbar-padding - Internal spacing of the snackbar container.
+ * @cssprop --m3e-snackbar-min-width - Minimum width of the snackbar.
+ * @cssprop --m3e-snackbar-max-width - Maximum width of the snackbar.
+ */
+export declare class M3eSnackbarElement extends M3eSnackbarElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ static __current: M3eSnackbarElement | null;
+    /** The currently open snackbar. */
+    static get current(): M3eSnackbarElement | null;
+    /**
+     * The length of time, in milliseconds, to wait before automatically dismissing the snackbar.
+     * @default 3000
+     */
+    duration: number;
+    /**
+     * The label of the snackbar's action.
+     * @default ""
+     */
+    action: string;
+    /**
+     * Whether a button is presented that can be used to close the snackbar.
+     * @default false
+     */
+    dismissible: boolean;
+    /**
+     * The accessible label given to the button used to dismiss the snackbar.
+     * @default "Close"
+     */
+    closeLabel: string;
+    /** Whether the user clicked the action. */
+    get isActionTaken(): boolean;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected render(): import("lit-html").TemplateResult<1>;
+    /** @inheritdoc */
+    protected updated(_changedProperties: PropertyValues): void;
+}
+interface M3eSnackbarElementEventMap extends HTMLElementEventMap {
+    beforetoggle: ToggleEvent;
+    toggle: ToggleEvent;
+}
+export interface M3eSnackbarElement {
+    addEventListener<K extends keyof M3eSnackbarElementEventMap>(type: K, listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof M3eSnackbarElementEventMap>(type: K, listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-snackbar": M3eSnackbarElement;
+    }
+}
+export {};
+//# sourceMappingURL=SnackbarElement.d.ts.map

package/dist/src/snackbar/SnackbarElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarElement.d.ts","sourceRoot":"","sources":["../../../src/snackbar/SnackbarElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;;AAKhG;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,kBAAmB,SAAQ,uBAA0B;;IAehE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA0IpC;IAEF,eAAe,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,GAAG,IAAI,CAAQ;IAMnE,mCAAmC;IACnC,MAAM,KAAK,OAAO,IAAI,kBAAkB,GAAG,IAAI,CAE9C;IAED;;;OAGG;IACyB,QAAQ,SAAQ;IAE5C;;;OAGG;IACS,MAAM,SAAM;IAExB;;;OAGG;IACyC,WAAW,UAAS;IAEhE;;;OAGG;IACqC,UAAU,SAAW;IAE7D,2CAA2C;IAC3C,IAAI,aAAa,IAAI,OAAO,CAE3B;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAQlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAMrC,kBAAkB;cACC,MAAM;IAOzB,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;CAqDrE;AAED,UAAU,0BAA2B,SAAQ,mBAAmB;IAC9D,YAAY,EAAE,WAAW,CAAC;IAC1B,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,gBAAgB,CAAC,CAAC,SAAS,MAAM,0BAA0B,EACzD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,EAAE,EAAE,0BAA0B,CAAC,CAAC,CAAC,KAAK,IAAI,EAC/E,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,MAAM,0BAA0B,EAC5D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,EAAE,EAAE,0BAA0B,CAAC,CAAC,CAAC,KAAK,IAAI,EAC/E,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}

package/dist/src/snackbar/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Snackbar";
+export * from "./SnackbarElement";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/snackbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/snackbar/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC"}

package/dist/src/split-button/SplitButtonElement.d.ts

@@ -0,0 +1,106 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { ButtonSize } from "@m3e/web/button";
+import { SplitButtonVariant } from "./SplitButtonVariant";
+declare const M3eSplitButtonElement_base: import("../core/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * A button used to show an action with a menu of related actions.
+ *
+ * @description
+ * The `m3e-split-button` component presents a primary action alongside a menu of related actions,
+ * uniting two buttons in a single expressive surface. Designed for Material 3, it supports `elevated`,
+ * `filled`, `tonal`, and `outlined` variants, and adapts to all button sizes. The leading button triggers
+ * the main action, while the trailing icon button reveals additional options, enabling efficient workflows
+ * and clear visual hierarchy. The split button ensures accessible, adaptive, and visually harmonious
+ * interactions, reflecting Material 3’s principles of clarity, flexibility, and expressive design.
+ *
+ * @example
+ * The following example illustrates use of the `m3e-split-button` to combine the `m3e-button`,
+ * `m3e-icon-button`, and `m3e-menu` components into a split button.
+ *
+ * ```html
+ * <m3e-split-button>
+ *  <m3e-button slot="leading-button">
+ *    <m3e-icon slot="icon" name="edit"></m3e-icon>Edit
+ *  </m3e-button>
+ *  <m3e-icon-button slot="trailing-button">
+ *  <m3e-icon name="keyboard_arrow_down"></m3e-icon>
+ *  <m3e-menu-trigger for="menu1"></m3e-menu-trigger>
+ * </m3e-icon-button>
+ * ```
+ *
+ * @tag m3e-split-button
+ *
+ * @slot leading-button - The leading button used to perform the primary action.
+ * @slot trailing-button - The trailing icon button used to open a menu of related actions.
+ *
+ * @attr variant - The appearance variant of the button.
+ * @attr size - The size of the button.
+ *
+ * @cssprop --m3e-split-button-extra-small-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-small, unselected).
+ * @cssprop --m3e-split-button-extra-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-small, unselected).
+ * @cssprop --m3e-split-button-small-trailing-button-unselected-leading-space - Leading space for the trailing button (small, unselected).
+ * @cssprop --m3e-split-button-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (small, unselected).
+ * @cssprop --m3e-split-button-medium-trailing-button-unselected-leading-space - Leading space for the trailing button (medium, unselected).
+ * @cssprop --m3e-split-button-medium-trailing-button-unselected-trailing-space - Trailing space for the trailing button (medium, unselected).
+ * @cssprop --m3e-split-button-large-trailing-button-unselected-leading-space - Leading space for the trailing button (large, unselected).
+ * @cssprop --m3e-split-button-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (large, unselected).
+ * @cssprop --m3e-split-button-extra-large-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-large, unselected).
+ * @cssprop --m3e-split-button-extra-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-large, unselected).
+ * @cssprop --m3e-split-button-extra-small-trailing-button-selected-leading-space - Leading space for the trailing button (extra-small, selected).
+ * @cssprop --m3e-split-button-extra-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-small, selected).
+ * @cssprop --m3e-split-button-small-trailing-button-selected-leading-space - Leading space for the trailing button (small, selected).
+ * @cssprop --m3e-split-button-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (small, selected).
+ * @cssprop --m3e-split-button-medium-trailing-button-selected-leading-space - Leading space for the trailing button (medium, selected).
+ * @cssprop --m3e-split-button-medium-trailing-button-selected-trailing-space - Trailing space for the trailing button (medium, selected).
+ * @cssprop --m3e-split-button-large-trailing-button-selected-leading-space - Leading space for the trailing button (large, selected).
+ * @cssprop --m3e-split-button-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (large, selected).
+ * @cssprop --m3e-split-button-extra-large-trailing-button-selected-leading-space - Leading space for the trailing button (extra-large, selected).
+ * @cssprop --m3e-split-button-extra-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-large, selected).
+ * @cssprop --m3e-split-button-extra-small-inner-corner-size - Inner corner size for the leading/trailing button (extra-small).
+ * @cssprop --m3e-split-button-small-inner-corner-size - Inner corner size for the leading/trailing button (small).
+ * @cssprop --m3e-split-button-medium-inner-corner-size - Inner corner size for the leading/trailing button (medium).
+ * @cssprop --m3e-split-button-large-inner-corner-size - Inner corner size for the leading/trailing button (large).
+ * @cssprop --m3e-split-button-extra-large-inner-corner-size - Inner corner size for the leading/trailing button (extra-large).
+ * @cssprop --m3e-split-button-extra-small-inner-corner-hover-size - Inner corner size on hover (extra-small).
+ * @cssprop --m3e-split-button-small-inner-corner-hover-size - Inner corner size on hover (small).
+ * @cssprop --m3e-split-button-medium-inner-corner-hover-size - Inner corner size on hover (medium).
+ * @cssprop --m3e-split-button-large-inner-corner-hover-size - Inner corner size on hover (large).
+ * @cssprop --m3e-split-button-extra-large-inner-corner-hover-size - Inner corner size on hover (extra-large).
+ * @cssprop --m3e-split-button-extra-small-inner-corner-pressed-size - Inner corner size on press (extra-small).
+ * @cssprop --m3e-split-button-small-inner-corner-pressed-size - Inner corner size on press (small).
+ * @cssprop --m3e-split-button-medium-inner-corner-pressed-size - Inner corner size on press (medium).
+ * @cssprop --m3e-split-button-large-inner-corner-pressed-size - Inner corner size on press (large).
+ * @cssprop --m3e-split-button-extra-large-inner-corner-pressed-size - Inner corner size on press (extra-large).
+ * @cssprop --m3e-split-button-extra-small-between-spacing - Spacing between leading and trailing buttons (extra-small).
+ * @cssprop --m3e-split-button-small-between-spacing - Spacing between leading and trailing buttons (small).
+ * @cssprop --m3e-split-button-medium-between-spacing - Spacing between leading and trailing buttons (medium).
+ * @cssprop --m3e-split-button-large-between-spacing - Spacing between leading and trailing buttons (large).
+ * @cssprop --m3e-split-button-extra-large-between-spacing - Spacing between leading and trailing buttons (extra-large).
+ */
+export declare class M3eSplitButtonElement extends M3eSplitButtonElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    private readonly _base?;
+    /**
+     * The appearance variant of the button.
+     * @default "filled"
+     */
+    variant: SplitButtonVariant;
+    /**
+     * The size of the button.
+     * @default "small"
+     */
+    size: ButtonSize;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-split-button": M3eSplitButtonElement;
+    }
+}
+export {};
+//# sourceMappingURL=SplitButtonElement.d.ts.map

package/dist/src/split-button/SplitButtonElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButtonElement.d.ts","sourceRoot":"","sources":["../../../src/split-button/SplitButtonElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5E,OAAO,EAAoB,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AACH,qBACa,qBAAsB,SAAQ,0BAAyB;;IAClE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAyPpC;IAEc,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IAoCrD;;;OAGG;IAC0B,OAAO,EAAE,kBAAkB,CAAY;IAEpE;;;OAGG;IAC0B,IAAI,EAAE,UAAU,CAAW;IAExD,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQxE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAoFrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}

package/dist/src/split-button/SplitButtonVariant.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible appearance variants of a split button. */
+export type SplitButtonVariant = "elevated" | "filled" | "tonal" | "outlined";
+//# sourceMappingURL=SplitButtonVariant.d.ts.map

package/dist/src/split-button/SplitButtonVariant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButtonVariant.d.ts","sourceRoot":"","sources":["../../../src/split-button/SplitButtonVariant.ts"],"names":[],"mappings":"AAAA,oEAAoE;AACpE,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAC"}

package/dist/src/split-button/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./SplitButtonElement";
+export * from "./SplitButtonVariant";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/split-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/split-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC"}