@m3e/web 2.0.0

package/dist/src/switch/SwitchElement.d.ts

@@ -0,0 +1,147 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { formValue } from "@m3e/web/core";
+import { SwitchIcons } from "./SwitchIcons";
+declare const M3eSwitchElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").LabelledMixin> & 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").ConstraintValidationMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").CheckedMixin> & 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;
+/**
+ * An on/off control that can be toggled by clicking.
+ *
+ * @description
+ * The `m3e-switch` component is a semantic, accessible toggle control that reflects a binary state.
+ * Designed according to Material Design 3 guidelines, it supports shape transitions, and adaptive color
+ * theming across selected, unselected, and disabled states. The component responds to user interaction
+ * with smooth motion and expressive feedback. It supports optional icons (`none`, `selected`, or `both`)
+ * and integrates with form-associated behavior, emitting `input` and `change` events when toggled.
+ *
+ * @example
+ * The following example illustrates a switch wrapped by a `label`.
+ *
+ * ```html
+ * <label>Switch label&nbsp;<m3e-switch></m3e-switch></label>
+ * ```
+ *
+ * @example
+ * By default, icons are not presented. Use the `icons` attribute to control which icons to show. The next
+ * example illustrates showing both the unselected and selected icons.
+ *
+ * ```html
+ * <label>Switch label&nbsp;<m3e-switch icons="both"></m3e-switch></label>
+ * ```
+ *
+ * @tag m3e-switch
+ *
+ * @attr checked - Whether the element is checked.
+ * @attr disabled - Whether the element is disabled.
+ * @attr icons - The icons to present.
+ * @attr name - The name that identifies the element when submitting the associated form.
+ * @attr value - A string representing the value of the switch.
+ *
+ * @fires input - Emitted when the checked state changes.
+ * @fires change - Emitted when the checked state changes.
+ * @fires click - Emitted when the element is clicked.
+ *
+ * @cssprop --m3e-switch-selected-icon-color - Color of the icon when the switch is selected.
+ * @cssprop --m3e-switch-selected-icon-size - Size of the icon in the selected state.
+ * @cssprop --m3e-switch-unselected-icon-color - Color of the icon when the switch is unselected.
+ * @cssprop --m3e-switch-unselected-icon-size - Size of the icon in the unselected state.
+ * @cssprop --m3e-switch-track-height - Height of the switch track.
+ * @cssprop --m3e-switch-track-width - Width of the switch track.
+ * @cssprop --m3e-switch-track-outline-color - Color of the track’s outline.
+ * @cssprop --m3e-switch-track-outline-width - Thickness of the track’s outline.
+ * @cssprop --m3e-switch-track-shape - Corner shape of the track.
+ * @cssprop --m3e-switch-selected-track-color - Track color when selected.
+ * @cssprop --m3e-switch-unselected-track-color - Track color when unselected.
+ * @cssprop --m3e-switch-unselected-handle-height - Height of the handle when unselected.
+ * @cssprop --m3e-switch-unselected-handle-width - Width of the handle when unselected.
+ * @cssprop --m3e-switch-with-icon-handle-height - Height of the handle when icons are present.
+ * @cssprop --m3e-switch-with-icon-handle-width - Width of the handle when icons are present.
+ * @cssprop --m3e-switch-selected-handle-height - Height of the handle when selected.
+ * @cssprop --m3e-switch-selected-handle-width - Width of the handle when selected.
+ * @cssprop --m3e-switch-pressed-handle-height - Height of the handle during press.
+ * @cssprop --m3e-switch-pressed-handle-width - Width of the handle during press.
+ * @cssprop --m3e-switch-handle-shape - Corner shape of the handle.
+ * @cssprop --m3e-switch-selected-handle-color - Handle color when selected.
+ * @cssprop --m3e-switch-unselected-handle-color - Handle color when unselected.
+ * @cssprop --m3e-switch-state-layer-size - Diameter of the state layer overlay.
+ * @cssprop --m3e-switch-state-layer-shape - Corner shape of the state layer.
+ * @cssprop --m3e-switch-disabled-selected-icon-color - Icon color when selected and disabled.
+ * @cssprop --m3e-switch-disabled-selected-icon-opacity - Icon opacity when selected and disabled.
+ * @cssprop --m3e-switch-disabled-unselected-icon-color - Icon color when unselected and disabled.
+ * @cssprop --m3e-switch-disabled-unselected-icon-opacity - Icon opacity when unselected and disabled.
+ * @cssprop --m3e-switch-disabled-track-opacity - Track opacity when disabled.
+ * @cssprop --m3e-switch-disabled-selected-track-color - Track color when selected and disabled.
+ * @cssprop --m3e-switch-disabled-unselected-track-color - Track color when unselected and disabled.
+ * @cssprop --m3e-switch-disabled-unselected-track-outline-color - Outline color when unselected and disabled.
+ * @cssprop --m3e-switch-disabled-unselected-handle-opacity - Handle opacity when unselected and disabled.
+ * @cssprop --m3e-switch-disabled-selected-handle-opacity - Handle opacity when selected and disabled.
+ * @cssprop --m3e-switch-disabled-selected-handle-color - Handle color when selected and disabled.
+ * @cssprop --m3e-switch-disabled-unselected-handle-color - Handle color when unselected and disabled.
+ * @cssprop --m3e-switch-selected-hover-icon-color - Icon color when selected and hovered.
+ * @cssprop --m3e-switch-unselected-hover-icon-color - Icon color when unselected and hovered.
+ * @cssprop --m3e-switch-selected-hover-track-color - Track color when selected and hovered.
+ * @cssprop --m3e-switch-selected-hover-state-layer-color - State layer color when selected and hovered.
+ * @cssprop --m3e-switch-selected-hover-state-layer-opacity - State layer opacity when selected and hovered.
+ * @cssprop --m3e-switch-unselected-hover-track-color - Track color when unselected and hovered.
+ * @cssprop --m3e-switch-unselected-hover-track-outline-color - Outline color when unselected and hovered.
+ * @cssprop --m3e-switch-unselected-hover-state-layer-color - State layer color when unselected and hovered.
+ * @cssprop --m3e-switch-unselected-hover-state-layer-opacity - State layer opacity when unselected and hovered.
+ * @cssprop --m3e-switch-selected-hover-handle-color - Handle color when selected and hovered.
+ * @cssprop --m3e-switch-unselected-hover-handle-color - Handle color when unselected and hovered.
+ * @cssprop --m3e-switch-selected-focus-icon-color - Icon color when selected and focused.
+ * @cssprop --m3e-switch-unselected-focus-icon-color - Icon color when unselected and focused.
+ * @cssprop --m3e-switch-selected-focus-track-color - Track color when selected and focused.
+ * @cssprop --m3e-switch-selected-focus-state-layer-color - State layer color when selected and focused.
+ * @cssprop --m3e-switch-selected-focus-state-layer-opacity - State layer opacity when selected and focused.
+ * @cssprop --m3e-switch-unselected-focus-track-color - Track color when unselected and focused.
+ * @cssprop --m3e-switch-unselected-focus-track-outline-color - Outline color when unselected and focused.
+ * @cssprop --m3e-switch-unselected-focus-state-layer-color - State layer color when unselected and focused.
+ * @cssprop --m3e-switch-unselected-focus-state-layer-opacity - State layer opacity when unselected and focused.
+ * @cssprop --m3e-switch-selected-focus-handle-color - Handle color when selected and focused.
+ * @cssprop --m3e-switch-unselected-focus-handle-color - Handle color when unselected and focused.
+ * @cssprop --m3e-switch-selected-pressed-icon-color - Icon color when selected and pressed.
+ * @cssprop --m3e-switch-unselected-pressed-icon-color - Icon color when unselected and pressed.
+ * @cssprop --m3e-switch-selected-pressed-track-color - Track color when selected and pressed.
+ * @cssprop --m3e-switch-selected-pressed-state-layer-color - State layer color when selected and pressed.
+ * @cssprop --m3e-switch-selected-pressed-state-layer-opacity - State layer opacity when selected and pressed.
+ * @cssprop --m3e-switch-unselected-pressed-track-color - Track color when unselected and pressed.
+ * @cssprop --m3e-switch-unselected-pressed-track-outline-color - Outline color when unselected and pressed.
+ * @cssprop --m3e-switch-unselected-pressed-state-layer-color - State layer color when unselected and pressed.
+ * @cssprop --m3e-switch-unselected-pressed-state-layer-opacity - State layer opacity when unselected and pressed.
+ * @cssprop --m3e-switch-selected-pressed-handle-color - Handle color when selected and pressed.
+ * @cssprop --m3e-switch-unselected-pressed-handle-color - Handle color when unselected and pressed.
+ */
+export declare class M3eSwitchElement extends M3eSwitchElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private readonly _track?;
+    /** @private */ private readonly _focusRing?;
+    /** @private */ private readonly _stateLayer?;
+    constructor();
+    /**
+     * The icons to present.
+     * @default "none"
+     */
+    icons: SwitchIcons;
+    /**
+     * A string representing the value of the switch.
+     * @default "on"
+     */
+    value: string;
+    /** @inheritdoc @private */
+    get [formValue](): string | File | FormData | null;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-switch": M3eSwitchElement;
+    }
+}
+export {};
+//# sourceMappingURL=SwitchElement.d.ts.map

package/dist/src/switch/SwitchElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchElement.d.ts","sourceRoot":"","sources":["../../../src/switch/SwitchElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGvE,OAAO,EAOL,SAAS,EAUV,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AACH,qBACa,gBAAiB,SAAQ,qBAQrC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAMpC;IAEF,eAAe,CAAkB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAc;IACvE,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACxF,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;;IA6B3F;;;OAGG;IAC0B,KAAK,EAAE,WAAW,CAAU;IAEzD;;;OAGG;IACS,KAAK,SAAQ;IAEzB,2BAA2B;IAC3B,IAAa,CAAC,SAAS,CAAC,IAAI,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,CAE1D;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAUlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAUrC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAgCrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/dist/src/switch/SwitchIcons.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible icons to display in a switch. */
+export type SwitchIcons = "none" | "selected" | "both";
+//# sourceMappingURL=SwitchIcons.d.ts.map

package/dist/src/switch/SwitchIcons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchIcons.d.ts","sourceRoot":"","sources":["../../../src/switch/SwitchIcons.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC"}

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

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

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

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

package/dist/src/switch/styles/SwitchHandleStyle.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Handle styles for `M3eSwitchElement`.
+ * @internal
+ */
+export declare const SwitchHandleStyle: import("lit").CSSResult;
+//# sourceMappingURL=SwitchHandleStyle.d.ts.map

package/dist/src/switch/styles/SwitchHandleStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchHandleStyle.d.ts","sourceRoot":"","sources":["../../../../src/switch/styles/SwitchHandleStyle.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,eAAO,MAAM,iBAAiB,yBA8J7B,CAAC"}

package/dist/src/switch/styles/SwitchIconStyle.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Icon styles for `M3eSwitchElement`.
+ * @internal
+ */
+export declare const SwitchIconStyle: import("lit").CSSResult;
+//# sourceMappingURL=SwitchIconStyle.d.ts.map

package/dist/src/switch/styles/SwitchIconStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchIconStyle.d.ts","sourceRoot":"","sources":["../../../../src/switch/styles/SwitchIconStyle.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,eAAO,MAAM,eAAe,yBA+E3B,CAAC"}

package/dist/src/switch/styles/SwitchStateLayerStyle.d.ts

@@ -0,0 +1,6 @@
+/**
+ * State layer styles for `M3eSwitchElement`.
+ * @internal
+ */
+export declare const SwitchStateLayerStyle: import("lit").CSSResult;
+//# sourceMappingURL=SwitchStateLayerStyle.d.ts.map

package/dist/src/switch/styles/SwitchStateLayerStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchStateLayerStyle.d.ts","sourceRoot":"","sources":["../../../../src/switch/styles/SwitchStateLayerStyle.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,qBAAqB,yBAyCjC,CAAC"}

package/dist/src/switch/styles/SwitchStyle.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Baseline styles for `M3eSwitchElement`.
+ * @internal
+ */
+export declare const SwitchStyle: import("lit").CSSResult;
+//# sourceMappingURL=SwitchStyle.d.ts.map

package/dist/src/switch/styles/SwitchStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchStyle.d.ts","sourceRoot":"","sources":["../../../../src/switch/styles/SwitchStyle.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,WAAW,yBA2BvB,CAAC"}

package/dist/src/switch/styles/SwitchToken.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Component design tokens that control `M3eSwitchElement`.
+ * @internal
+ */
+export declare const SwitchToken: {
+    readonly selectedIconColor: import("lit").CSSResult;
+    readonly selectedIconSize: import("lit").CSSResult;
+    readonly unselectedIconColor: import("lit").CSSResult;
+    readonly unselectedIconSize: import("lit").CSSResult;
+    readonly trackHeight: import("lit").CSSResult;
+    readonly trackWidth: import("lit").CSSResult;
+    readonly trackOutlineColor: import("lit").CSSResult;
+    readonly trackOutlineWidth: import("lit").CSSResult;
+    readonly trackShape: import("lit").CSSResult;
+    readonly selectedTrackColor: import("lit").CSSResult;
+    readonly unselectedTrackColor: import("lit").CSSResult;
+    readonly unselectedHandleHeight: import("lit").CSSResult;
+    readonly unselectedHandleWidth: import("lit").CSSResult;
+    readonly withIconHandleHeight: import("lit").CSSResult;
+    readonly withIconHandleWidth: import("lit").CSSResult;
+    readonly selectedHandleHeight: import("lit").CSSResult;
+    readonly selectedHandleWidth: import("lit").CSSResult;
+    readonly pressedHandleHeight: import("lit").CSSResult;
+    readonly pressedHandleWidth: import("lit").CSSResult;
+    readonly handleShape: import("lit").CSSResult;
+    readonly selectedHandleColor: import("lit").CSSResult;
+    readonly unselectedHandleColor: import("lit").CSSResult;
+    readonly stateLayerSize: import("lit").CSSResult;
+    readonly stateLayerShape: import("lit").CSSResult;
+    readonly disabledSelectedIconColor: import("lit").CSSResult;
+    readonly disabledSelectedIconOpacity: import("lit").CSSResult;
+    readonly disabledUnselectedIconColor: import("lit").CSSResult;
+    readonly disabledUnselectedIconOpacity: import("lit").CSSResult;
+    readonly disabledTrackOpacity: import("lit").CSSResult;
+    readonly disabledSelectedTrackColor: import("lit").CSSResult;
+    readonly disabledUnselectedTrackColor: import("lit").CSSResult;
+    readonly disabledUnselectedTrackOutlineColor: import("lit").CSSResult;
+    readonly disabledUnselectedHandleOpacity: import("lit").CSSResult;
+    readonly disabledSelectedHandleOpacity: import("lit").CSSResult;
+    readonly disabledSelectedHandleColor: import("lit").CSSResult;
+    readonly disabledUnselectedHandleColor: import("lit").CSSResult;
+    readonly selectedHoverIconColor: import("lit").CSSResult;
+    readonly unselectedHoverIconColor: import("lit").CSSResult;
+    readonly selectedHoverTrackColor: import("lit").CSSResult;
+    readonly selectedHoverStateLayerColor: import("lit").CSSResult;
+    readonly selectedHoverStateLayerOpacity: import("lit").CSSResult;
+    readonly unselectedHoverTrackColor: import("lit").CSSResult;
+    readonly unselectedHoverTrackOutlineColor: import("lit").CSSResult;
+    readonly unselectedHoverStateLayerColor: import("lit").CSSResult;
+    readonly unselectedHoverStateLayerOpacity: import("lit").CSSResult;
+    readonly selectedHoverHandleColor: import("lit").CSSResult;
+    readonly unselectedHoverHandleColor: import("lit").CSSResult;
+    readonly selectedFocusIconColor: import("lit").CSSResult;
+    readonly unselectedFocusIconColor: import("lit").CSSResult;
+    readonly selectedFocusTrackColor: import("lit").CSSResult;
+    readonly selectedFocusStateLayerColor: import("lit").CSSResult;
+    readonly selectedFocusStateLayerOpacity: import("lit").CSSResult;
+    readonly unselectedFocusTrackColor: import("lit").CSSResult;
+    readonly unselectedFocusTrackOutlineColor: import("lit").CSSResult;
+    readonly unselectedFocusStateLayerColor: import("lit").CSSResult;
+    readonly unselectedFocusStateLayerOpacity: import("lit").CSSResult;
+    readonly selectedFocusHandleColor: import("lit").CSSResult;
+    readonly unselectedFocusHandleColor: import("lit").CSSResult;
+    readonly selectedPressedIconColor: import("lit").CSSResult;
+    readonly unselectedPressedIconColor: import("lit").CSSResult;
+    readonly selectedPressedTrackColor: import("lit").CSSResult;
+    readonly selectedPressedStateLayerColor: import("lit").CSSResult;
+    readonly selectedPressedStateLayerOpacity: import("lit").CSSResult;
+    readonly unselectedPressedTrackColor: import("lit").CSSResult;
+    readonly unselectedPressedTrackOutlineColor: import("lit").CSSResult;
+    readonly unselectedPressedStateLayerColor: import("lit").CSSResult;
+    readonly unselectedPressedStateLayerOpacity: import("lit").CSSResult;
+    readonly selectedPressedHandleColor: import("lit").CSSResult;
+    readonly unselectedPressedHandleColor: import("lit").CSSResult;
+};
+//# sourceMappingURL=SwitchToken.d.ts.map

package/dist/src/switch/styles/SwitchToken.d.ts.map

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

package/dist/src/switch/styles/SwitchTrackStyle.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Track styles for `M3eSwitchElement`.
+ * @internal
+ */
+export declare const SwitchTrackStyle: import("lit").CSSResult;
+//# sourceMappingURL=SwitchTrackStyle.d.ts.map

package/dist/src/switch/styles/SwitchTrackStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchTrackStyle.d.ts","sourceRoot":"","sources":["../../../../src/switch/styles/SwitchTrackStyle.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,eAAO,MAAM,gBAAgB,yBA8F5B,CAAC"}

package/dist/src/switch/styles/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./SwitchHandleStyle";
+export * from "./SwitchIconStyle";
+export * from "./SwitchStateLayerStyle";
+export * from "./SwitchStyle";
+export * from "./SwitchTrackStyle";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/switch/styles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/switch/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC"}

package/dist/src/tabs/TabElement.d.ts

@@ -0,0 +1,90 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+declare const M3eTabElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").SelectedMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").HtmlForMixin> & 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;
+/**
+ * An interactive element that, when activated, presents an associated tab panel.
+ *
+ * @description
+ * The `m3e-tab` component is an interactive control used within a tabbed interface to activate and
+ * reveal an associated tab panel. It supports accessible labeling, optional iconography, and selection
+ * state styling consistent with Material 3 guidance. Tabs may be disabled, selected, or linked to a
+ * specific panel via the `for` attribute, enabling declarative control and semantic clarity.
+ *
+ * @example
+ * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present
+ * secondary tabs.
+ * ```html
+ * <m3e-tabs>
+ *  <m3e-tab selected for="videos"><m3e-icon slot="icon" name="videocam"></m3e-icon>Video</m3e-tab>
+ *  <m3e-tab for="photos"><m3e-icon slot="icon" name="photo"></m3e-icon>Photos</m3e-tab>
+ *  <m3e-tab for="audio"><m3e-icon slot="icon" name="music_note"></m3e-icon>Audio</m3e-tab>
+ *  <m3e-tab-panel id="videos">Videos</m3e-tab-panel>
+ *  <m3e-tab-panel id="photos">Photos</m3e-tab-panel>
+ *  <m3e-tab-panel id="audio">Audio</m3e-tab-panel>
+ * </m3e-tabs>
+ * ```
+ *
+ * @tag m3e-tab
+ *
+ * @slot - Renders the label of the tab.
+ * @slot icon - Renders an icon before the tab's label.
+ *
+ * @attr disabled - Whether the element is disabled.
+ * @attr for - The identifier of the interactive control to which this element is attached.
+ * @attr selected - Whether the element is selected.
+ *
+ * @fires input - Emitted when the selected state changes.
+ * @fires change - Emitted when the selected state changes.
+ * @fires click - Emitted when the element is clicked.
+ *
+ * @cssprop --m3e-tab-font-size - Font size for tab label.
+ * @cssprop --m3e-tab-font-weight - Font weight for tab label.
+ * @cssprop --m3e-tab-line-height - Line height for tab label.
+ * @cssprop --m3e-tab-tracking - Letter spacing for tab label.
+ * @cssprop --m3e-tab-padding-start - Padding on the inline start of the tab.
+ * @cssprop --m3e-tab-padding-end - Padding on the inline end of the tab.
+ * @cssprop --m3e-tab-focus-ring-shape - Border radius for the focus ring.
+ * @cssprop --m3e-tab-selected-color - Text color for selected tab.
+ * @cssprop --m3e-tab-selected-container-hover-color - Hover state-layer color for selected tab.
+ * @cssprop --m3e-tab-selected-container-focus-color - Focus state-layer color for selected tab.
+ * @cssprop --m3e-tab-selected-ripple-color - Ripple color for selected tab.
+ * @cssprop --m3e-tab-unselected-color - Text color for unselected tab.
+ * @cssprop --m3e-tab-unselected-container-hover-color - Hover state-layer color for unselected tab.
+ * @cssprop --m3e-tab-unselected-container-focus-color - Focus state-layer color for unselected tab.
+ * @cssprop --m3e-tab-unselected-ripple-color - Ripple color for unselected tab.
+ * @cssprop --m3e-tab-disabled-color - Text color for disabled tab.
+ * @cssprop --m3e-tab-disabled-opacity - Text opacity for disabled tab.
+ * @cssprop --m3e-tab-spacing - Column gap between icon and label.
+ * @cssprop --m3e-tab-icon-size - Font size for slotted icon.
+ */
+export declare class M3eTabElement extends M3eTabElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private static __nextId;
+    /** @private */ private readonly _focusRing?;
+    /** @private */ private readonly _stateLayer?;
+    /** @private */ private readonly _ripple?;
+    /** @internal A reference to the element that wraps the label of the tab. */
+    readonly label: HTMLElement;
+    /** @inheritdoc */
+    attach(control: HTMLElement): void;
+    /** @inheritdoc */
+    detach(): void;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-tab": M3eTabElement;
+    }
+}
+export {};
+//# sourceMappingURL=TabElement.d.ts.map

package/dist/src/tabs/TabElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabElement.d.ts","sourceRoot":"","sources":["../../../src/tabs/TabElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;;AAmB5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,qBACa,aAAc,SAAQ,kBAElC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAmFpC;IAEF,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAK;IAE5C,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACxF,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;IAC3F,eAAe,CAAmB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAmB;IAG9E,4EAA4E;IAC3D,QAAQ,CAAC,KAAK,EAAG,WAAW,CAAC;IAE9C,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAO3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAQvB,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,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;CA6BrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}

package/dist/src/tabs/TabHeaderPosition.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible positions of a tab header. */
+export type TabHeaderPosition = "before" | "after";
+//# sourceMappingURL=TabHeaderPosition.d.ts.map

package/dist/src/tabs/TabHeaderPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabHeaderPosition.d.ts","sourceRoot":"","sources":["../../../src/tabs/TabHeaderPosition.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,OAAO,CAAC"}

package/dist/src/tabs/TabPanelElement.d.ts

@@ -0,0 +1,45 @@
+import { CSSResultGroup, LitElement } from "lit";
+declare const M3eTabPanelElement_base: import("../core/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * A panel presented for a tab.
+ *
+ * @description
+ * The `m3e-tab-panel` component represents the content region associated with a selected tab.
+ * It is conditionally rendered based on tab selection and provides a structured surface for
+ * displaying contextual information, media, or interactive elements. Panels are linked to their
+ * corresponding tabs via the `for` attribute on `m3e-tab`, enabling declarative control and
+ * accessible navigation consistent with Material 3 guidance.
+ *
+ * @example
+ * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present
+ * secondary tabs.
+ * ```html
+ * <m3e-tabs>
+ *  <m3e-tab selected for="videos"><m3e-icon slot="icon" name="videocam"></m3e-icon>Video</m3e-tab>
+ *  <m3e-tab for="photos"><m3e-icon slot="icon" name="photo"></m3e-icon>Photos</m3e-tab>
+ *  <m3e-tab for="audio"><m3e-icon slot="icon" name="music_note"></m3e-icon>Audio</m3e-tab>
+ *  <m3e-tab-panel id="videos">Videos</m3e-tab-panel>
+ *  <m3e-tab-panel id="photos">Photos</m3e-tab-panel>
+ *  <m3e-tab-panel id="audio">Audio</m3e-tab-panel>
+ * </m3e-tabs>
+ * ```
+ *
+ * @tag m3e-tab-panel
+ *
+ * @slot - Renders the content of the panel.
+ */
+export declare class M3eTabPanelElement extends M3eTabPanelElement_base {
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-tab-panel": M3eTabPanelElement;
+    }
+}
+export {};
+//# sourceMappingURL=TabPanelElement.d.ts.map

package/dist/src/tabs/TabPanelElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanelElement.d.ts","sourceRoot":"","sources":["../../../src/tabs/TabPanelElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAK5D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,kBAAmB,SAAQ,uBAA4B;IAClE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAOpC;IAEF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;cACC,MAAM,IAAI,OAAO;CAGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}

package/dist/src/tabs/TabVariant.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible appearance variants of a tab. */
+export type TabVariant = "primary" | "secondary";
+//# sourceMappingURL=TabVariant.d.ts.map

package/dist/src/tabs/TabVariant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabVariant.d.ts","sourceRoot":"","sources":["../../../src/tabs/TabVariant.ts"],"names":[],"mappings":"AAAA,2DAA2D;AAC3D,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC"}

package/dist/src/tabs/TabsElement.d.ts

@@ -0,0 +1,118 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { SelectionManager, selectionManager } from "@m3e/web/core/a11y";
+import { TabVariant } from "./TabVariant";
+import { M3eTabElement } from "./TabElement";
+import { TabHeaderPosition } from "./TabHeaderPosition";
+declare const M3eTabsElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & typeof LitElement;
+/**
+ * Organizes content into separate views where only one view can be visible at a time.
+ *
+ * @description
+ * The `m3e-tabs` component provides a structured navigation surface for organizing content into distinct views,
+ * where only one view is visible at a time. It supports scrollable tab headers with optional pagination,
+ * accessible labeling for navigation controls, and configurable header positioning to suit various layout
+ * contexts. Two visual variants are available: `primary`, which emphasizes active indicators and shape styling
+ * for prominent navigation, and `secondary`, which offers a more subtle presentation with reduced indicator
+ * thickness. Stretch behavior allows tabs to expand and align rhythmically within their container, consistent
+ * with Material 3 guidance.
+ *
+ * @example
+ * The following example illustrates using the `m3e-tabs`, `m3e-tab`, and `m3e-tab-panel` components to present
+ * secondary tabs.
+ * ```html
+ * <m3e-tabs>
+ *  <m3e-tab selected for="videos"><m3e-icon slot="icon" name="videocam"></m3e-icon>Video</m3e-tab>
+ *  <m3e-tab for="photos"><m3e-icon slot="icon" name="photo"></m3e-icon>Photos</m3e-tab>
+ *  <m3e-tab for="audio"><m3e-icon slot="icon" name="music_note"></m3e-icon>Audio</m3e-tab>
+ *  <m3e-tab-panel id="videos">Videos</m3e-tab-panel>
+ *  <m3e-tab-panel id="photos">Photos</m3e-tab-panel>
+ *  <m3e-tab-panel id="audio">Audio</m3e-tab-panel>
+ * </m3e-tabs>
+ * ```
+ *
+ * @tag m3e-tabs
+ *
+ * @slot - Renders the tabs.
+ * @slot panel - Renders the panels of the tabs.
+ * @slot next-icon - Renders the icon to present for the next button used to paginate.
+ * @slot prev-icon - Renders the icon to present for the previous button used to paginate.
+ *
+ * @attr disable-pagination - Whether scroll buttons are disabled.
+ * @attr header-position - The position of the tab headers.
+ * @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 stretch - Whether tabs are stretched to fill the header.
+ * @attr variant - The appearance variant of the tabs.
+ *
+ * @fires change - Emitted when the selected tab changes.
+ *
+ * @cssprop --m3e-tabs-paginator-button-icon-size - Overrides the icon size for paginator buttons.
+ * @cssprop --m3e-tabs-active-indicator-color - Color of the active tab indicator.
+ * @cssprop --m3e-tabs-primary-before-active-indicator-shape - Border radius for active indicator when header is before and variant is primary.
+ * @cssprop --m3e-tabs-primary-after-active-indicator-shape - Border radius for active indicator when header is after and variant is primary.
+ * @cssprop --m3e-tabs-primary-active-indicator-inset - Inset for primary variant's active indicator.
+ * @cssprop --m3e-tabs-primary-active-indicator-thickness - Thickness for primary variant's active indicator.
+ * @cssprop --m3e-tabs-secondary-active-indicator-thickness - Thickness for secondary variant's active indicator.
+ */
+export declare class M3eTabsElement extends M3eTabsElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private readonly _tablist;
+    /** @private */ _selectedIndex: number | null;
+    /** @internal */
+    readonly [selectionManager]: SelectionManager<M3eTabElement>;
+    constructor();
+    /**
+     * Whether scroll buttons are disabled.
+     * @default false
+     */
+    disablePagination: boolean;
+    /**
+     * The position of the tab headers.
+     * @default "before"
+     */
+    headerPosition: TabHeaderPosition;
+    /**
+     * The appearance variant of the tabs.
+     * @default "secondary"
+     */
+    variant: TabVariant;
+    /**
+     * Whether tabs are stretched to fill the header.
+     * @default false
+     */
+    stretch: boolean;
+    /**
+     * 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;
+    /** The tabs. */
+    get tabs(): readonly M3eTabElement[];
+    /** The selected tab. */
+    get selectedTab(): M3eTabElement | null;
+    /** The zero-based index of the selected tab. */
+    get selectedIndex(): number;
+    set selectedIndex(value: number);
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected updated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-tabs": M3eTabsElement;
+    }
+}
+export {};
+//# sourceMappingURL=TabsElement.d.ts.map

package/dist/src/tabs/TabsElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsElement.d.ts","sourceRoot":"","sources":["../../../src/tabs/TabsElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;AAKhG,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGxE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;;AAIxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,qBACa,cAAe,SAAQ,mBAA2B;;IAC7D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA0GpC;IAGF,eAAe,CAAoB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAe;IAC3E,eAAe,CAAU,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE9D,gBAAgB;IAChB,QAAQ,CAAC,CAAC,gBAAgB,CAAC,kCAIsB;;IAajD;;;OAGG;IAC2D,iBAAiB,UAAS;IAExF;;;OAGG;IACwD,cAAc,EAAE,iBAAiB,CAAY;IAExG;;;OAGG;IAC0B,OAAO,EAAE,UAAU,CAAe;IAE/D;;;OAGG;IACyC,OAAO,UAAS;IAE5D;;;OAGG;IAC6C,iBAAiB,SAAmB;IAEpF;;;OAGG;IACyC,aAAa,SAAe;IAExE,gBAAgB;IAChB,IAAI,IAAI,IAAI,SAAS,aAAa,EAAE,CAEnC;IAED,wBAAwB;IACxB,IAAI,WAAW,IAAI,aAAa,GAAG,IAAI,CAEtC;IAED,gDAAgD;IAChD,IAAI,aAAa,IAAI,MAAM,CAE1B;IACD,IAAI,aAAa,CAAC,KAAK,EAAE,MAAM,EAS9B;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAUlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAMrC,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ1E,kBAAkB;cACC,MAAM,IAAI,OAAO;CAmHrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

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

@@ -0,0 +1,6 @@
+export * from "./TabElement";
+export * from "./TabHeaderPosition";
+export * from "./TabPanelElement";
+export * from "./TabVariant";
+export * from "./TabsElement";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}