@m3e/tabs 1.0.0-rc.1 → 1.0.0-rc.2

package/dist/src/TabElement.d.ts

@@ -1,87 +0,0 @@
-import { CSSResultGroup, LitElement, PropertyValues } from "lit";
-declare const M3eTabElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").SelectedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").HtmlForMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").DisabledMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & typeof LitElement;
-/**
- * @summary
- * 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 query selector used to specify the element related to this element.
- * @attr selected - Whether the element is selected.
- *
- * @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/TabElement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabElement.d.ts","sourceRoot":"","sources":["../../src/TabElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;;AAmB5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,qBACa,aAAc,SAAQ,kBAElC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAkFpC;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/TabHeaderPosition.d.ts

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

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

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

package/dist/src/TabPanelElement.d.ts

@@ -1,46 +0,0 @@
-import { CSSResultGroup, LitElement } from "lit";
-declare const M3eTabPanelElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
-/**
- * @summary
- * 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/TabPanelElement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabPanelElement.d.ts","sourceRoot":"","sources":["../../src/TabPanelElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAK5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;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/TabVariant.d.ts

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

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

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

package/dist/src/TabsElement.d.ts

@@ -1,117 +0,0 @@
-import { CSSResultGroup, LitElement, PropertyValues } from "lit";
-import { SelectionManager, selectionManager } from "@m3e/core/a11y";
-import { TabVariant } from "./TabVariant";
-import { M3eTabElement } from "./TabElement";
-import { TabHeaderPosition } from "./TabHeaderPosition";
-declare const M3eTabsElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & typeof LitElement;
-/**
- * @summary
- * 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 */
-    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/TabsElement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabsElement.d.ts","sourceRoot":"","sources":["../../src/TabsElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;AAIhG,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;;AAIxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,cAAe,SAAQ,mBAA2B;;IAC7D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA0GpC;IAEF,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,kCAGb;;IAad;;;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;IAKlC,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ1E,kBAAkB;cACC,MAAM,IAAI,OAAO;CA2GrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/dist/src/index.d.ts

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

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

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

package/eslint.config.mjs

@@ -1,13 +0,0 @@
-import eslint from "@eslint/js";
-import tseslint from "typescript-eslint";
-import { fileURLToPath } from "url";
-import { dirname } from "path";
-
-export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
-  languageOptions: {
-    parserOptions: {
-      project: true,
-      tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
-    },
-  },
-});

package/rollup.config.js

@@ -1,32 +0,0 @@
-import resolve from "@rollup/plugin-node-resolve";
-import terser from "@rollup/plugin-terser";
-import typescript from "@rollup/plugin-typescript";
-
-const banner = `/**
- * @license MIT
- * Copyright (c) 2025 matraic
- * See LICENSE file in the project root for full license text.
- */`;
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: "dist/index.js",
-        format: "esm",
-        sourcemap: true,
-        banner: banner,
-      },
-      {
-        file: "dist/index.min.js",
-        format: "esm",
-        sourcemap: true,
-        banner: banner,
-        plugins: [terser({ mangle: true })],
-      },
-    ],
-    external: ["@m3e/core", "@m3e/core/a11y", "@m3e/slide-group", "lit"],
-    plugins: [resolve(), typescript()],
-  },
-];

package/src/TabElement.ts

@@ -1,252 +0,0 @@
-import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
-import { customElement, query } from "lit/decorators.js";
-
-import {
-  AttachInternals,
-  DesignToken,
-  Disabled,
-  Focusable,
-  HtmlFor,
-  KeyboardClick,
-  M3eFocusRingElement,
-  M3eRippleElement,
-  M3eStateLayerElement,
-  Role,
-  Selected,
-} from "@m3e/core";
-
-import { addAriaReferencedId, removeAriaReferencedId, selectionManager } from "@m3e/core/a11y";
-
-/**
- * @summary
- * 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 query selector used to specify the element related to this element.
- * @attr selected - Whether the element is selected.
- *
- * @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.
- */
-@customElement("m3e-tab")
-export class M3eTabElement extends Selected(
-  HtmlFor(KeyboardClick(Focusable(Disabled(AttachInternals(Role(LitElement, "tab"), true)))))
-) {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = css`
-    :host {
-      display: inline-block;
-      outline: none;
-      user-select: none;
-      height: calc(var(--_tab-height) + ${DesignToken.density.calc(-3)});
-      font-size: var(--m3e-tab-font-size, ${DesignToken.typescale.standard.title.small.fontSize});
-      font-weight: var(--m3e-tab-font-weight, ${DesignToken.typescale.standard.title.small.fontWeight});
-      line-height: var(--m3e-tab-line-height, ${DesignToken.typescale.standard.title.small.lineHeight});
-      letter-spacing: var(--m3e-tab-tracking, ${DesignToken.typescale.standard.title.small.tracking});
-      flex-grow: var(--_tab-grow);
-    }
-    :host(:not(:disabled)) {
-      cursor: pointer;
-    }
-    .base {
-      box-sizing: border-box;
-      vertical-align: middle;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      width: 100%;
-      height: 100%;
-      padding-inline-start: var(--m3e-tab-padding-start, 1.5rem);
-      padding-inline-end: var(--m3e-tab-padding-end, 1.5rem);
-    }
-    .touch {
-      position: absolute;
-      height: 3rem;
-      left: 0;
-      right: 0;
-    }
-    .focus-ring {
-      border-radius: var(--m3e-tab-focus-ring-shape, ${DesignToken.shape.corner.large});
-    }
-    :host([selected]:focus-within) .focus-ring {
-      top: var(--_tab-focus-ring-top-offset, 0);
-      bottom: var(--_tab-focus-ring-bottom-offset, 0);
-    }
-    :host([selected]:not(:disabled)) .base {
-      color: var(--m3e-tab-selected-color, ${DesignToken.color.primary});
-      --m3e-state-layer-hover-color: var(--m3e-tab-selected-container-hover-color, ${DesignToken.color.primary});
-      --m3e-state-layer-focus-color: var(--m3e-tab-selected-container-focus-color, ${DesignToken.color.primary});
-      --m3e-ripple-color: var(--m3e-tab-selected-ripple-color, ${DesignToken.color.primary});
-    }
-    :host(:not([selected]):not(:disabled)) .base {
-      color: var(--m3e-tab-unselected-color, ${DesignToken.color.onSurface});
-      --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${DesignToken.color.onSurface});
-      --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${DesignToken.color.onSurface});
-      --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${DesignToken.color.onSurface});
-    }
-    :host(:disabled) .base {
-      color: color-mix(
-        in srgb,
-        var(--m3e-tab-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-tab-disabled-opacity, 38%),
-        transparent
-      );
-    }
-    .wrapper {
-      display: inline-flex;
-      align-items: center;
-      white-space: nowrap;
-      flex-direction: var(--_tab-direction);
-      justify-content: center;
-      column-gap: var(--m3e-tab-spacing, 0.5rem);
-    }
-    ::slotted([slot="icon"]) {
-      width: 1em;
-      font-size: var(--m3e-tab-icon-size, 1.5rem) !important;
-    }
-    @media (forced-colors: active) {
-      :host([selected]:not(:disabled)) .base {
-        color: ButtonText;
-      }
-      :host(:not([selected]):not(:disabled)) .base {
-        color: ButtonText;
-      }
-      :host(:disabled) .base {
-        color: GrayText;
-      }
-    }
-  `;
-
-  /** @private */ private static __nextId = 0;
-
-  /** @private */ @query(".focus-ring") private readonly _focusRing?: M3eFocusRingElement;
-  /** @private */ @query(".state-layer") private readonly _stateLayer?: M3eStateLayerElement;
-  /** @private */ @query(".ripple") private readonly _ripple?: M3eRippleElement;
-  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);
-
-  /** @internal A reference to the element that wraps the label of the tab. */
-  @query(".label") readonly label!: HTMLElement;
-
-  /** @inheritdoc */
-  override attach(control: HTMLElement): void {
-    super.attach(control);
-
-    control.id = control.id || `m3e-tab-panel-${M3eTabElement.__nextId++}`;
-    addAriaReferencedId(this, "aria-controls", control.id);
-  }
-
-  /** @inheritdoc */
-  override detach(): void {
-    if (this.control && this.control.id) {
-      removeAriaReferencedId(this, "aria-controls", this.control.id);
-    }
-
-    super.detach();
-  }
-
-  /** @inheritdoc */
-  override connectedCallback(): void {
-    super.connectedCallback();
-    this.addEventListener("click", this.#clickHandler);
-  }
-
-  /** @inheritdoc */
-  override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.removeEventListener("click", this.#clickHandler);
-  }
-
-  /** @inheritdoc */
-  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {
-    super.firstUpdated(_changedProperties);
-    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));
-  }
-
-  /** @inheritdoc */
-  protected override update(changedProperties: PropertyValues<this>): void {
-    super.update(changedProperties);
-
-    if (changedProperties.has("selected")) {
-      this.closest("m3e-tabs")?.[selectionManager].notifySelectionChange(this);
-    }
-  }
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<div class="base">
-      <m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer>
-      <m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring>
-      <m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple>
-      <div class="touch" aria-hidden="true"></div>
-      <div class="wrapper">
-        <slot name="icon" aria-hidden="true"></slot><span class="label"><slot></slot></span>
-      </div>
-    </div>`;
-  }
-
-  /** @private */
-  #handleClick(e: Event): void {
-    if (this.disabled) {
-      e.preventDefault();
-      e.stopImmediatePropagation();
-    }
-
-    if (e.defaultPrevented || this.selected) return;
-
-    this.selected = true;
-    if (this.dispatchEvent(new Event("input", { bubbles: true, composed: true, cancelable: true }))) {
-      this.closest("m3e-tabs")?.[selectionManager].notifySelectionChange(this);
-      this.dispatchEvent(new Event("change", { bubbles: true }));
-    } else {
-      this.selected = false;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-tab": M3eTabElement;
-  }
-}

package/src/TabHeaderPosition.ts

@@ -1,2 +0,0 @@
-/** Specifies the possible positions of a tab header. */
-export type TabHeaderPosition = "before" | "after";

package/src/TabPanelElement.ts

@@ -1,63 +0,0 @@
-import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement } from "lit/decorators.js";
-
-import { DesignToken, Role } from "@m3e/core";
-
-/**
- * @summary
- * 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.
- */
-@customElement("m3e-tab-panel")
-export class M3eTabPanelElement extends Role(LitElement, "tabpanel") {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = css`
-    :host {
-      display: block;
-      overflow-y: auto;
-      scrollbar-width: ${DesignToken.scrollbar.width};
-      scrollbar-color: ${DesignToken.scrollbar.color};
-    }
-  `;
-
-  /** @inheritdoc */
-  override connectedCallback(): void {
-    super.connectedCallback();
-    this.slot = "panel";
-  }
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<slot></slot>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-tab-panel": M3eTabPanelElement;
-  }
-}

package/src/TabVariant.ts

@@ -1,2 +0,0 @@
-/** Specifies the possible appearance variants of a tab. */
-export type TabVariant = "primary" | "secondary";