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

package/dist/custom-elements.json

@@ -1794,25 +1794,6 @@
           "kind": "mixin",
           "description": "Mixin that adds support for custom event attributes.",
           "name": "EventAttribute",
-          "members": [
-            {
-              "kind": "method",
-              "name": "dispatchEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
           "parameters": [
             {
               "name": "base",
@@ -2110,6 +2091,17 @@
           "description": "Mixin to augment an element with behavior used to submit a form.",
           "name": "FormSubmitter",
           "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "true",
+              "description": "Indicates that this custom element participates in form submission, validation, and form state restoration."
+            },
             {
               "kind": "field",
               "name": "name",

package/dist/src/TabElement.d.ts

@@ -0,0 +1,90 @@
+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;
+/**
+ * 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.
+ *
+ * @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/TabElement.d.ts.map

@@ -0,0 +1 @@
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;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

@@ -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/TabHeaderPosition.d.ts.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,45 @@
+import { CSSResultGroup, LitElement } from "lit";
+declare const M3eTabPanelElement_base: import("node_modules/@m3e/core/dist/src/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/TabPanelElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanelElement.d.ts","sourceRoot":"","sources":["../../src/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/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/TabVariant.d.ts.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,116 @@
+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;
+/**
+ * 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

@@ -0,0 +1 @@
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;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

@@ -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/index.d.ts.map

@@ -0,0 +1 @@
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/tabs",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.3",
   "description": "Tabs for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -27,8 +27,8 @@
     "clean": "rimraf dist"
   },
   "peerDependencies": {
-    "@m3e/core": "1.0.0-rc.2",
-    "@m3e/slide-group": "1.0.0-rc.2",
+    "@m3e/core": "1.0.0-rc.3",
+    "@m3e/slide-group": "1.0.0-rc.3",
     "lit": "^3.3.0"
   },
   "devDependencies": {