@m3e/web 2.3.1 → 2.4.0

package/dist/src/tree/TreeElement.d.ts

@@ -0,0 +1,150 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { SelectionManager, selectionManager } from "@m3e/web/core/a11y";
+import { M3eTreeItemElement } from "./TreeItemElement";
+declare const M3eTreeElement_base: import("../core/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * Presents hierarchical data in a tree structure.
+ *
+ * @description
+ * The `m3e-tree` component presents hierarchical data in a structure that users can
+ * navigate, with nested levels that open and collapse as needed.
+ *
+ * @example
+ * The following example illustrates a simple tree with nested child items.
+ * ```html
+ * <m3e-tree>
+ *   <m3e-tree-item open>
+ *     <span slot="label">Getting Started</span>
+ *     <m3e-tree-item>
+ *       <span slot="label">Overview</span>
+ *     </m3e-tree-item>
+ *     <m3e-tree-item>
+ *       <span slot="label">Installation</span>
+ *     </m3e-tree-item>
+ *   </m3e-tree-item>
+ *   <m3e-tree-item>
+ *     <span slot="label">Components</span>
+ *     <m3e-tree-item>
+ *       <span slot="label">Button</span>
+ *     </m3e-tree-item>
+ *     <m3e-tree-item>
+ *       <span slot="label">Card</span>
+ *     </m3e-tree-item>
+ *   </m3e-tree-item>
+ * </m3e-tree>
+ * ```
+ *
+ * @example
+ * The next example demonstrates multi-selection with cascading selection state.
+ * ```html
+ * <m3e-tree multi cascade>
+ *   <m3e-tree-item>
+ *     <span slot="label">Fruits</span>
+ *     <m3e-tree-item>
+ *       <span slot="label">Apples</span>
+ *     </m3e-tree-item>
+ *     <m3e-tree-item>
+ *       <span slot="label">Oranges</span>
+ *     </m3e-tree-item>
+ *     <m3e-tree-item>
+ *       <span slot="label">Bananas</span>
+ *     </m3e-tree-item>
+ *   </m3e-tree-item>
+ *   <m3e-tree-item>
+ *     <span slot="label">Vegetables</span>
+ *     <m3e-tree-item>
+ *       <span slot="label">Carrots</span>
+ *     </m3e-tree-item>
+ *     <m3e-tree-item>
+ *       <span slot="label">Broccoli</span>
+ *     </m3e-tree-item>
+ *     <m3e-tree-item>
+ *       <span slot="label">Spinach</span>
+ *     </m3e-tree-item>
+ *   </m3e-tree-item>
+ * </m3e-tree>
+ * ```
+ *
+ * @tag m3e-tree
+ *
+ * @slot - Renders the items of the tree.
+ *
+ * @attr multi - Whether multiple items can be selected.
+ * @attr cascade -Whether multiple item selection cascades to child items.
+ *
+ * @fires change - Emitted when the selected state changes.
+ *
+ * @cssprop --m3e-tree-scrollbar-width - Width of the tree scrollbar.
+ * @cssprop --m3e-tree-scrollbar-color - Color of the tree scrollbar.
+ */
+export declare class M3eTreeElement extends M3eTreeElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private static __nextId;
+    /** @private */
+    readonly [selectionManager]: SelectionManager<M3eTreeItemElement>;
+    constructor();
+    /**
+     * Whether multiple items can be selected.
+     * @default false
+     */
+    multi: boolean;
+    /**
+     * Whether multiple item selection cascades to child items.
+     * @default false
+     */
+    cascade: boolean;
+    /** The selected items of the tree. */
+    get selected(): readonly M3eTreeItemElement[];
+    /** All the items of the tree. */
+    get items(): readonly M3eTreeItemElement[];
+    /**
+     * Expands all items, and optionally, all descendants.
+     * @param {boolean} [descendants=false] Whether to expand all descendants.
+     */
+    expand(descendants?: boolean): void;
+    /**
+     * Expands the specified items, and optionally, all descendants.
+     * @param {M3eTreeItemElement[]} items The items to expand.
+     * @param {boolean} [descendants=false] Whether to expand all descendants.
+     */
+    expand(items: M3eTreeItemElement[], descendants?: boolean): void;
+    /**
+     * Collapses all items, and optionally, all descendants.
+     * @param {boolean} [descendants=false] Whether to collapse all descendants.
+     */
+    collapse(descendants?: boolean): void;
+    /**
+     * Collapses the specified items, and optionally, all descendants.
+     * @param {M3eTreeItemElement[]} items The items to collapse.
+     * @param {boolean} [descendants=false] Whether to collapse all descendants.
+     */
+    collapse(items: M3eTreeItemElement[], descendants?: boolean): void;
+    /**
+     * Selects the specified item.
+     * @param {M3eTreeItemElement} item The item to select.
+     * @param {boolean} [activate=false] A value indicating whether to activate the item.
+     */
+    select(item: M3eTreeItemElement, activate?: boolean): void;
+    /**
+     * Deselects the specified item.
+     * @param {M3eTreeItemElement} item The item to deselect.
+     */
+    deselect(item: M3eTreeItemElement): void;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected willUpdate(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-tree": M3eTreeElement;
+    }
+}
+export {};
+//# sourceMappingURL=TreeElement.d.ts.map

package/dist/src/tree/TreeElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeElement.d.ts","sourceRoot":"","sources":["../../../src/tree/TreeElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAavF,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AACH,qBACa,cAAe,SAAQ,mBAAwB;;IAU1D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAkBpC;IAEF,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAK;IAI5C,eAAe;IACf,QAAQ,CAAC,CAAC,gBAAgB,CAAC,uCAWtB;;IAmBL;;;OAGG;IACyC,KAAK,UAAS;IAE1D;;;OAGG;IACyC,OAAO,UAAS;IAE5D,sCAAsC;IACtC,IAAI,QAAQ,IAAI,SAAS,kBAAkB,EAAE,CAE5C;IAED,iCAAiC;IACjC,IAAI,KAAK,IAAI,SAAS,kBAAkB,EAAE,CAEzC;IAED;;;OAGG;IACH,MAAM,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI;IAEnC;;;;OAIG;IACH,MAAM,CAAC,KAAK,EAAE,kBAAkB,EAAE,EAAE,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI;IAShE;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI;IAErC;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,kBAAkB,EAAE,EAAE,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI;IAmBlE;;;;OAIG;IACH,MAAM,CAAC,IAAI,EAAE,kBAAkB,EAAE,QAAQ,GAAE,OAAe,GAAG,IAAI;IAgBjE;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,kBAAkB,GAAG,IAAI;IAaxC,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAUlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAQrC,kBAAkB;cACC,UAAU,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAa7E,kBAAkB;cACC,MAAM,IAAI,OAAO;CA+LrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/dist/src/tree/TreeItemElement.d.ts

@@ -0,0 +1,131 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { M3eFocusRingElement, M3eRippleElement, M3eStateLayerElement } from "@m3e/web/core";
+declare const M3eTreeItemElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").SelectedMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").DisabledMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & import("../core/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * An expandable item in a tree.
+ *
+ * @description
+ * The `m3e-tree-item` component represents a single item within an `m3e-tree`.
+ * It supports nested child items, expand/collapse behavior, selection,
+ * disabled state, and interaction styling. Items may contain a child group
+ * that hosts additional `m3e-tree-item` elements.
+ *
+ * @tag m3e-tree-item
+ *
+ * @slot - Renders the nested child items.
+ * @slot label - Renders the label of the item.
+ * @slot icon - Renders the icon of the item.
+ * @slot selected-icon - Renders the icon of the item when selected.
+ * @slot toggle-icon - Renders the toggle icon.
+ * @slot open-toggle-icon - Renders the toggle icon when selected.
+ *
+ * @attr disabled - Whether the element is disabled.
+ * @attr indeterminate - Whether the element's checked state is indeterminate.
+ * @attr open - Whether the item is expanded.
+ * @attr selected - Whether the item is selected.
+ *
+ * @fires opening - Emitted when the item begins to open.
+ * @fires opened - Emitted when the item has opened.
+ * @fires closing - Emitted when the item begins to close.
+ * @fires closed - Emitted when the item has closed.
+ * @fires click - Emitted when the element is clicked.
+ *
+ * @cssprop --m3e-tree-item-font-size - Font size for the item label.
+ * @cssprop --m3e-tree-item-font-weight - Font weight for the item label.
+ * @cssprop --m3e-tree-item-line-height - Line height for the item label.
+ * @cssprop --m3e-tree-item-tracking - Letter spacing for the item label.
+ * @cssprop --m3e-tree-item-padding - Inline padding for the item.
+ * @cssprop --m3e-tree-item-height - Height of the item.
+ * @cssprop --m3e-tree-item-shape - Border radius of the item and focus ring.
+ * @cssprop --m3e-tree-item-icon-size - Size of the icon.
+ * @cssprop --m3e-tree-item-inset - Indentation for nested items.
+ * @cssprop --m3e-tree-item-label-color - Text color for the item label.
+ * @cssprop --m3e-tree-item-selected-label-color - Text color for selected item label.
+ * @cssprop --m3e-tree-item-selected-container-color - Background color for selected item.
+ * @cssprop --m3e-tree-item-selected-container-focus-color - Focus color for selected item container.
+ * @cssprop --m3e-tree-item-selected-container-hover-color - Hover color for selected item container.
+ * @cssprop --m3e-tree-item-selected-ripple-color - Ripple color for selected item.
+ * @cssprop --m3e-tree-item-unselected-container-focus-color - Focus color for unselected item container.
+ * @cssprop --m3e-tree-item-unselected-container-hover-color - Hover color for unselected item container.
+ * @cssprop --m3e-tree-item-unselected-ripple-color - Ripple color for unselected item.
+ * @cssprop --m3e-tree-item-disabled-color - Text color for disabled item.
+ * @cssprop --m3e-tree-item-disabled-color-opacity - Opacity for disabled item text color.
+ */
+export declare class M3eTreeItemElement extends M3eTreeItemElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @internal */ readonly stateLayer?: M3eStateLayerElement;
+    /** @internal */ readonly focusRing?: M3eFocusRingElement;
+    /** @internal */ readonly ripple?: M3eRippleElement;
+    /** @private */ private readonly _base?;
+    /** @private */ private _hasChildItems;
+    /** @private */ private _multi;
+    /**
+     * Whether the item is expanded.
+     * @default false
+     */
+    open: boolean;
+    /**
+     * A value indicating whether the element's selected / checked state is indeterminate.
+     * @default false
+     */
+    indeterminate: boolean;
+    /** A reference to the nested `HTMLAnchorElement`. */
+    get link(): HTMLAnchorElement | null;
+    /** A reference to the element used to present the label of the item. */
+    get label(): HTMLElement | null;
+    /** Whether the item is visible. */
+    get visible(): boolean;
+    /** The full path of the item, starting with the top-most ancestor, including this item. */
+    get path(): ReadonlyArray<M3eTreeItemElement>;
+    /** Whether the item has child items. */
+    get hasChildItems(): boolean;
+    /** The parenting item. */
+    get parentItem(): M3eTreeItemElement | null;
+    /** The items that immediately descend from this item. */
+    get childItems(): readonly M3eTreeItemElement[];
+    /** The one-based level of the item. */
+    get level(): number;
+    /**
+     * Expands this item, and optionally, all descendants.
+     * @param {boolean} [descendants=false] Whether to expand all descendants.
+     */
+    expand(descendants?: boolean): void;
+    /**
+     * Collapses this item, and optionally, all descendants.
+     * @param {boolean} [descendants=false] Whether to collapse all descendants.
+     */
+    collapse(descendants?: boolean): void;
+    /** Toggles the expanded state of the item. */
+    toggle(): void;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues): void;
+    /** @inheritdoc */
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+interface M3eTreeItemElementEventMap extends HTMLElementEventMap {
+    opening: Event;
+    opened: Event;
+    closing: Event;
+    closed: Event;
+}
+export interface M3eTreeItemElement {
+    addEventListener<K extends keyof M3eTreeItemElementEventMap>(type: K, listener: (this: M3eTreeItemElement, ev: M3eTreeItemElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof M3eTreeItemElementEventMap>(type: K, listener: (this: M3eTreeItemElement, ev: M3eTreeItemElementEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-tree-item": M3eTreeItemElement;
+    }
+}
+export {};
+//# sourceMappingURL=TreeItemElement.d.ts.map

package/dist/src/tree/TreeItemElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItemElement.d.ts","sourceRoot":"","sources":["../../../src/tree/TreeItemElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;AAIhG,OAAO,EAOL,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,EAKrB,MAAM,eAAe,CAAC;;AAMvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,qBACa,kBAAmB,SAAQ,uBAIvC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAyJpC;IAEF,gBAAgB,CAAwB,QAAQ,CAAC,UAAU,CAAC,EAAE,oBAAoB,CAAC;IACnF,gBAAgB,CAAuB,QAAQ,CAAC,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChF,gBAAgB,CAAmB,QAAQ,CAAC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IACtE,eAAe,CAAiB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IAErE,eAAe,CAAU,OAAO,CAAC,cAAc,CAAS;IACxD,eAAe,CAAU,OAAO,CAAC,MAAM,CAAS;IAgBhD;;;OAGG;IACyC,IAAI,UAAS;IAEzD;;;OAGG;IACyC,aAAa,UAAS;IAElE,qDAAqD;IACrD,IAAI,IAAI,IAAI,iBAAiB,GAAG,IAAI,CAEnC;IAED,wEAAwE;IACxE,IAAI,KAAK,IAAI,WAAW,GAAG,IAAI,CAE9B;IAED,mCAAmC;IACnC,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,2FAA2F;IAC3F,IAAI,IAAI,IAAI,aAAa,CAAC,kBAAkB,CAAC,CAE5C;IAED,wCAAwC;IACxC,IAAI,aAAa,IAAI,OAAO,CAE3B;IAED,0BAA0B;IAC1B,IAAI,UAAU,IAAI,kBAAkB,GAAG,IAAI,CAE1C;IAED,yDAAyD;IACzD,IAAI,UAAU,IAAI,SAAS,kBAAkB,EAAE,CAE9C;IAED,uCAAuC;IACvC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED;;;OAGG;IACH,MAAM,CAAC,WAAW,GAAE,OAAe,GAAG,IAAI;IAS1C;;;OAGG;IACH,QAAQ,CAAC,WAAW,GAAE,OAAe,GAAG,IAAI;IAS5C,8CAA8C;IAC9C,MAAM,IAAI,IAAI;IAMd,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAqBlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IASrC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAiClE,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS/E,kBAAkB;cACC,MAAM,IAAI,OAAO;CAsJrC;AAED,UAAU,0BAA2B,SAAQ,mBAAmB;IAC9D,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;IACd,OAAO,EAAE,KAAK,CAAC;IACf,MAAM,EAAE,KAAK,CAAC;CACf;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,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}

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

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

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

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

package/dist/stepper.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';

package/dist/stepper.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__decorate as e,__classPrivateFieldGet as t,__classPrivateFieldSet as s}from"tslib";import{LitElement as i,html as o,css as r,nothing as l}from"lit";import{state as a,query as n,property as d}from"lit/decorators.js";import{Role as c,customElement as p,Selected as h,KeyboardClick as m,Focusable as v,HtmlFor as f,Disabled as b,AttachInternals as u,DesignToken as g,ActionElementBase as y,ReconnectedCallback as x,addCustomState as w,hasCustomState as $,deleteCustomState as k,setCustomState as _,registerStyleSheet as S}from"@m3e/web/core";import{addAriaReferencedId as E,removeAriaReferencedId as I,selectionManager as z,SelectionManager as C}from"@m3e/web/core/a11y";import{ifDefined as q}from"lit/directives/if-defined.js";import{M3eBreakpointObserver as P,Breakpoint as Z}from"@m3e/web/core/layout";let T=class extends(c(i,"tabpanel")){constructor(){super(...arguments),this.active=!1}connectedCallback(){this.slot="panel",super.connectedCallback()}render(){return o`<m3e-collapsible ?open="${this.active}"><div class="content"><div><slot></slot></div><slot name="actions"></slot></div></m3e-collapsible>`}};var B,W,L,j,A;T.styles=r`:host { display: block; } .content { display: flex; flex-direction: column; padding: var(--m3e-step-panel-padding, 1rem 1.5rem 1.5rem 1.5rem); row-gap: var(--m3e-step-panel-spacing, 0.5rem); } ::slotted([slot="actions"]) { flex: none; display: flex; align-items: center; min-height: var(--m3e-step-panel-actions-height, 3rem); } ::slotted([slot="actions"][end]) { justify-content: flex-end; }`,e([a()],T.prototype,"active",void 0),T=e([p("m3e-step-panel")],T);let H=A=class extends(h(m(v(f(b(u(c(i,"tab")))))))){constructor(){super(...arguments),B.add(this),W.set(this,e=>t(this,B,"m",j).call(this,e)),this.optional=!1,this.editable=!1,this.completed=!1,this.invalid=!1,this.index=-1}get panel(){return this.control instanceof T?this.control:null}get stepper(){return this.closest("m3e-stepper")}reset(){this.invalid=!1,this.completed=!1,this.panel?.querySelector("form")?.reset()}attach(e){e instanceof T&&(e.id=e.id||"m3e-step-panel-"+A.__nextId++,E(this,"aria-controls",e.id),e.style.order=this.style.order),super.attach(e)}detach(){this.control&&(this.control.style.order="",this.control.id&&I(this,"aria-controls",this.control.id)),super.detach()}connectedCallback(){this.slot="step",super.connectedCallback(),this.addEventListener("click",t(this,W,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",t(this,W,"f"))}update(e){super.update(e),e.has("selected")&&this.closest("m3e-stepper")?.[z].notifySelectionChange(this)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}render(){const e=o`<slot name="hint">${this.optional?o`<span class="hint">(Optional)</span>`:l}</slot>`,s=o`<slot name="error">${e}</slot>`;return o`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="wrapper"><div class="icon" aria-hidden="true">${t(this,B,"m",L).call(this)}</div><div class="label"><slot></slot>${this.invalid?s:e}</div></div></div>`}};var M,O,U,D,N,R,V,X,F,K,G,J;W=new WeakMap,B=new WeakSet,L=function(){if(!this.selected){if(this.invalid)return o`<slot name="error-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg></slot>`;if(this.completed)return this.editable?o`<slot name="edit-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/></svg></slot>`:o`<slot name="done-icon"><svg viewBox="0 -960 960 960" fill="currentColor"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg></slot>`}return o`<slot name="icon">${this.index+1}</slot>`},j=function(e){this.disabled&&(e.preventDefault(),e.stopImmediatePropagation()),e.defaultPrevented||this.selected||(this.selected=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))&&this.closest("m3e-stepper")?.moveTo(this.index)?this.dispatchEvent(new Event("change",{bubbles:!0})):this.selected=!1)},H.styles=r`:host { display: block; outline: none; min-width: 0px; position: relative; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { min-width: inherit; position: relative; border-radius: var(--m3e-step-shape, ${g.shape.corner.medium}); padding: var(--m3e-step-padding, 1.5rem); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .icon { flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--m3e-step-icon-shape, 50%); width: var(--m3e-step-icon-size, 1.5rem); height: var(--m3e-step-icon-size, 1.5rem); } .icon svg, ::slotted([slot="icon"]), ::slotted([slot="edit-icon"]), ::slotted([slot="done-icon"]), ::slotted([slot="error-icon"]) { width: 1em; font-size: var(--m3e-step-icon-size, 1.5rem) !important; } :host(:not([aria-disabled="true"])[selected]) .icon { background-color: var(--m3e-step-selected-icon-container-color, ${g.color.primary}); color: var(--m3e-step-selected-icon-color, ${g.color.onPrimary}); } :host(:not([aria-disabled="true"])[completed]:not([invalid])) .icon { background-color: var(--m3e-step-completed-icon-container-color, ${g.color.primary}); color: var(--m3e-step-completed-icon-color, ${g.color.onPrimary}); } :host(:not([aria-disabled="true"]):not([selected]):not([completed]):not([invalid])) .icon { background-color: var(--m3e-step-unselected-icon-container-color, ${g.color.inverseSurface}); color: var(--m3e-step-unselected-icon-color, ${g.color.inverseOnSurface}); } :host(:not([aria-disabled="true"]):not([selected])[invalid]) .icon { color: var(--m3e-step-icon-error-color, ${g.color.error}); } :host([aria-disabled="true"]) .icon { background-color: color-mix( in srgb, var(--m3e-step-disabled-icon-container-color, ${g.color.onSurface}) 10%, transparent ); color: color-mix(in srgb, var(--m3e-step-disabled-icon-color, ${g.color.onSurface}) 38%, transparent); } :host(:not([aria-disabled="true"])) .label { color: var(--m3e-step-label-color, ${g.color.onSurface}); } :host(:not([aria-disabled="true"]):not([selected])[invalid]) .label { color: var(--m3e-step-label-error-color, ${g.color.error}); } :host([aria-disabled="true"]) .label { color: color-mix(in srgb, var(--m3e-step-disabled-label-color, ${g.color.onSurface}) 38%, transparent); } .wrapper { display: flex; align-items: center; height: 100%; border-radius: inherit; font-size: var(--m3e-step-font-size, ${g.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-step-font-weight, ${g.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-step-line-height, ${g.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-step-tracking, ${g.typescale.standard.title.small.tracking}); flex-direction: var(--_step-direction, row); gap: var(--m3e-step-icon-label-space, 0.5rem); justify-content: flex-start; } .label { display: flex; flex-direction: column; align-items: var(--_step-label-align-items, flex-start); } ::slotted([slot="hint"]), .hint, ::slotted([slot="error"]) { font-size: var(--m3e-step-hint-font-size, ${g.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-step-hint-font-weight, ${g.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-step-hint-line-height, ${g.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-step-hint-tracking, ${g.typescale.standard.body.small.tracking}); } :host(:not([aria-disabled="true"]):not([invalid])) ::slotted([slot="hint"]), :host(:not([aria-disabled="true"]):not([invalid])) .hint { color: var(--m3e-step-hint-color, ${g.color.onSurfaceVariant}); } :host([aria-disabled="true"]) ::slotted([slot="hint"]), :host([aria-disabled="true"]) .hint { color: color-mix(in srgb, var(--m3e-step-disabled-hint-color, ${g.color.onSurface}) 38%, transparent); }`,H.__nextId=0,e([n(".focus-ring")],H.prototype,"_focusRing",void 0),e([n(".state-layer")],H.prototype,"_stateLayer",void 0),e([n(".ripple")],H.prototype,"_ripple",void 0),e([d({type:Boolean,reflect:!0})],H.prototype,"optional",void 0),e([d({type:Boolean,reflect:!0})],H.prototype,"editable",void 0),e([d({type:Boolean,reflect:!0})],H.prototype,"completed",void 0),e([d({type:Boolean,reflect:!0})],H.prototype,"invalid",void 0),e([a()],H.prototype,"index",void 0),H=A=e([p("m3e-step")],H);class Q extends y{constructor(e){super(),M.set(this,void 0),s(this,M,e,"f")}_onClick(){switch(t(this,M,"f")){case"next":this.closest("m3e-stepper")?.moveNext();break;case"previous":this.closest("m3e-stepper")?.movePrevious();break;case"reset":this.closest("m3e-stepper")?.reset()}}}M=new WeakMap;let Y=class extends(x(u(i))){constructor(){super(...arguments),O.add(this),U.set(this,void 0),this._selectedIndex=null,this[J]=(new C).withHomeAndEnd().withWrap().onSelectedItemsChange(()=>t(this,O,"m",X).call(this)),this.headerPosition="above",this.labelPosition="end",this.linear=!1,this.orientation="horizontal"}get steps(){return this[z]?.items??[]}get selectedStep(){return null!==this._selectedIndex?this.steps[this._selectedIndex]??null:null}get selectedIndex(){return this._selectedIndex??-1}movePrevious(){return this.moveTo((this._selectedIndex??1)-1)}moveNext(){return this.moveTo((this._selectedIndex??-1)+1)}moveTo(e){const s=this.selectedStep;if(s&&s.index===e)return!0;if(this.steps[e]?.disabled)return!1;if(e>=0&&e<this.steps.length){if(s){const i=t(this,O,"m",F).call(this);if(this.linear)if(e<s.index){const t=this[z].items[e];if(!t||t.completed&&!t.editable)return!1}else if(e>s.index+1){const t=this[z].items[e];if(!t||!t.completed)return!1}else if(!i&&!s.optional)return!1;s.completed=!0}return this._selectedIndex=e,this[z].select(this.selectedStep),this.dispatchEvent(new Event("change",{bubbles:!0})),!0}return s&&(this[z].deselect(s),this.dispatchEvent(new Event("change",{bubbles:!0}))),!1}reset(){this.steps.forEach(e=>e.reset());const e=this.steps.findIndex(e=>!e.disabled);e!==this._selectedIndex&&(this._selectedIndex=e,this[z].select(this.selectedStep),this.dispatchEvent(new Event("change",{bubbles:!0})))}connectedCallback(){super.connectedCallback(),w(this,"-no-animate")}disconnectedCallback(){super.disconnectedCallback(),this._orientation=void 0,t(this,U,"f")?.call(this)}reconnectedCallback(){super.reconnectedCallback(),"auto"===this.orientation&&t(this,O,"m",K).call(this)}willUpdate(e){super.willUpdate(e),e.has("orientation")&&(t(this,U,"f")?.call(this),"auto"===this.orientation?t(this,O,"m",K).call(this):(this._orientation=void 0,t(this,O,"m",G).call(this))),e.has("_orientation")&&t(this,O,"m",G).call(this)}render(){let e;return this.selectedStep?.panel&&(e=[...this.querySelectorAll("[slot='panel']")].indexOf(this.selectedStep.panel),-1===e&&(e=void 0)),this[z].vertical?o`${t(this,O,"m",D).call(this)}<slot name="panel"></slot>`:o`${"above"===this.headerPosition?t(this,O,"m",D).call(this):l}<m3e-slide class="steps" selected-index="${q(e)}"><slot name="panel"></slot></m3e-slide>${"below"===this.headerPosition?t(this,O,"m",D).call(this):l}`}};U=new WeakMap,O=new WeakSet,J=z,D=function(){return o`<div class="header" role="tablist" aria-orientation="${q(this[z].vertical?"vertical":void 0)}" @change="${t(this,O,"m",N)}"><slot name="step" @slotchange="${t(this,O,"m",R)}" @keydown="${t(this,O,"m",V)}"></slot></div>`},N=function(e){e.stopPropagation()},R=function(){const{added:e,removed:s}=this[z].setItems([...this.querySelectorAll("m3e-step")]);if(e.length>0||s.length>0){this.querySelectorAll(".-m3e-step-divider").forEach(e=>e.remove());for(let e=0;e<this[z].items.length;e++){const t=this[z].items[e];if(t.index=e,e>0){const e=document.createElement("div");e.ariaHidden="true",e.classList.add("-m3e-step-divider"),e.slot="step",t.insertAdjacentElement("beforebegin",e)}}t(this,O,"m",G).call(this),0==this[z].selectedItems.length&&this[z].select(this[z].items.find(e=>!e.disabled))}},V=function(e){this[z].onKeyDown(e)},X=function(){const e=this[z].selectedItems[0];let t=e?this.steps.indexOf(e):null;-1===t&&(t=null),this._selectedIndex=t;for(const e of this[z].items)e.panel&&(e.panel.active=e.index===t);e&&this.matches(":focus-within")&&!e.matches(":focus")&&e.focus(),$(this,"-no-animate")&&requestAnimationFrame(()=>k(this,"-no-animate"))},F=function(){let e=!1;return this.selectedStep&&(e=this.selectedStep.panel?.querySelector("form")?.checkValidity()??!0,this.selectedStep.optional&&(e=!0),this.selectedStep.invalid=!e),e},K=function(){s(this,U,P.observe([Z.XSmall],e=>{this._orientation=e.get(Z.XSmall)?"vertical":"horizontal",t(this,O,"m",G).call(this)}),"f")},G=function(){this[z].vertical="vertical"===(this._orientation??this.orientation),_(this,"-vertical",this[z].vertical),this[z].vertical?this.steps.forEach((e,t)=>{e.style.order=`${t}`,e.panel&&(e.panel.style.order=`${t}`)}):this.steps.forEach(e=>{e.style.order="",e.panel&&(e.panel.style.order="")})},S(r`m3e-stepper:not(:state(-vertical)) > .-m3e-step-divider::before { border-bottom-width: var(--m3e-step-divider-thickness, 1px); border-bottom-style: solid; border-bottom-color: var(--m3e-step-divider-color, ${g.color.outline}); } m3e-stepper:not(:state(-vertical)) > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:not(:state(-vertical)) > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { border-bottom-width: var(--m3e-step-divider-thickness, 1px); border-bottom-style: solid; border-bottom-color: var(--m3e-step-divider-color, ${g.color.outline}); } m3e-stepper:not(:state(-vertical))[label-position="end"] > .-m3e-step-divider { margin-block: auto; } m3e-stepper:not(:state(-vertical))[label-position="below"] > .-m3e-step-divider::before, m3e-stepper:not(:state(-vertical))[label-position="below"] > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:not(:state(-vertical))[label-position="below"] > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { margin-block-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } m3e-stepper:state(-vertical) > [slot="panel"] { margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); } m3e-stepper:state(-vertical) > [slot="panel"]:not(:last-of-type) { border-inline-start-width: var(--m3e-step-divider-thickness, 1px); border-inline-start-style: solid; border-inline-start-color: var(--m3e-step-divider-color, ${g.color.outline}); } m3e-stepper:state(-vertical) > [slot="step"]:not(.-m3e-step-divider):not(:first-of-type)::before, m3e-stepper:state(-vertical) > [slot="step"]:not(.-m3e-step-divider):not(:last-of-type)::after { margin-inline-start: calc(var(--m3e-step-padding, 1.5rem) + calc(var(--m3e-step-icon-size, 1.5rem) / 2)); border-inline-start-width: var(--m3e-step-divider-thickness, 1px); border-inline-start-style: solid; border-inline-start-color: var(--m3e-step-divider-color, ${g.color.outline}); }`),Y.styles=r`:host { display: flex; flex-direction: column; position: relative; } :host(:not(:state(-vertical))) .header { display: flex; align-items: flex-start; flex-wrap: nowrap; } :host(:not(:state(-vertical))) ::slotted(.-m3e-step-divider) { flex: 1 1 auto; position: relative; min-width: 2rem; } :host(:not(:state(-vertical))) ::slotted(.-m3e-step-divider)::before { content: ""; position: absolute; left: 0; right: 0; } :host(:not(:state(-vertical)):not([label-position="below"])) ::slotted(.-m3e-step-divider)::before { top: 50%; } :host(:not(:state(-vertical))) ::slotted([slot="step"]) { align-self: stretch; } :host(:not(:state(-vertical))) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(:state(-vertical))) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; top: 0; } :host(:not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: 50%; } :host(:not(:dir(rtl)):not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { left: 0; right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:dir(rtl):not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { right: 0; left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:not(:dir(rtl)):not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { left: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); right: 0; } :host(:dir(rtl):not(:state(-vertical))[label-position="end"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { right: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); left: 0; } :host(:not(:dir(rtl)):not(:state(-vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { left: 0; right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:dir(rtl):not(:state(-vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { right: 0; left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:not(:dir(rtl)):not(:state(-vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { left: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); right: 0; } :host(:dir(rtl):not(:state(-vertical))[label-position="below"]) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { right: calc(50% + calc(var(--m3e-step-icon-size, 1.5rem) / 2) + var(--m3e-step-divider-inset, 0.5rem)); left: 0; } :host(:not(:state(-vertical))[label-position="below"]) { --_step-direction: column; --_step-label-align-items: center; } :host(:state(-vertical)) .header { display: contents; } :host(:state(-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider)) { flex: none; } :host(:state(-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before, :host(:state(-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { content: ""; display: block; position: absolute; left: 0; } :host(:state(-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:first-of-type))::before { top: 0; bottom: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); } :host(:state(-vertical)) ::slotted([slot="step"]:not(.-m3e-step-divider):not(:last-of-type))::after { top: calc(100% - var(--m3e-step-padding, 1.5rem) + var(--m3e-step-divider-inset, 0.5rem)); bottom: 0; } :host(:not(:state(-vertical))) { --m3e-collapsible-animation-duration: 0ms; } :host(:state(-no-animate)) { --m3e-collapsible-animation-duration: 0ms; }`,e([a()],Y.prototype,"_orientation",void 0),e([a()],Y.prototype,"_selectedIndex",void 0),e([d({attribute:"header-position",reflect:!0})],Y.prototype,"headerPosition",void 0),e([d({attribute:"label-position",reflect:!0})],Y.prototype,"labelPosition",void 0),e([d({type:Boolean,reflect:!0})],Y.prototype,"linear",void 0),e([d({reflect:!0})],Y.prototype,"orientation",void 0),Y=e([p("m3e-stepper")],Y);let ee=class extends Q{constructor(){super("next")}};ee=e([p("m3e-stepper-next")],ee);let te=class extends Q{constructor(){super("previous")}};te=e([p("m3e-stepper-previous")],te);let se=class extends Q{constructor(){super("reset")}};se=e([p("m3e-stepper-reset")],se);export{H as M3eStepElement,T as M3eStepPanelElement,Y as M3eStepperElement,ee as M3eStepperNextElement,te as M3eStepperPreviousElement,se as M3eStepperResetElement,Q as StepperButtonElementBase};

package/dist/switch.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __classPrivateFieldGet, __decorate } from 'tslib';

package/dist/switch.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{unsafeCSS as o,css as r,LitElement as c,html as a}from"lit";import{query as s,property as n}from"lit/decorators.js";import{DesignToken as i,Labelled as d,Dirty as l,Touched as h,ConstraintValidation as u,Checked as k,FormAssociated as p,KeyboardClick as b,Focusable as $,Disabled as m,AttachInternals as f,Role as v,HoverController as w,PressedController as g,formValue as y,customElement as x}from"@m3e/web/core";const C=o(`var(--m3e-switch-selected-icon-color, ${i.color.onPrimaryContainer})`),E=o("var(--m3e-switch-selected-icon-size, 1rem)"),_=o(`var(--m3e-switch-unselected-icon-color, ${i.color.surfaceContainerHighest})`),L=o("var(--m3e-switch-unselected-icon-size, 1rem)"),S=o("var(--m3e-switch-track-height, 2rem)"),H=o("var(--m3e-switch-track-width, 3.25rem)"),T=o(`var(--m3e-switch-track-outline-color, ${i.color.outline})`),X=o("var(--m3e-switch-track-outline-width, 2px)"),z=o(`var(--m3e-switch-track-shape, ${i.shape.corner.full})`),P=o(`var(--m3e-switch-selected-track-color, ${i.color.primary})`),B=o(`var(--m3e-switch-unselected-track-color, ${i.color.surfaceContainerHighest})`),G=o("var(--m3e-switch-unselected-handle-height, 1rem)"),M=o("var(--m3e-switch-unselected-handle-width, 1rem)"),W=o("var(--m3e-switch-with-icon-handle-height, 1.5rem)"),j=o("var(--m3e-switch-with-icon-handle-width, 1.5rem)"),V=o("var(--m3e-switch-selected-handle-height, 1.5rem)"),R=o("var(--m3e-switch-selected-handle-width, 1.5rem)"),U=o("var(--m3e-switch-pressed-handle-height, 1.75rem)"),D=o("var(--m3e-switch-pressed-handle-width, 1.75rem)"),K=o(`var(--m3e-switch-handle-shape, ${i.shape.corner.full})`),Z=o(`var(--m3e-switch-selected-handle-color, ${i.color.onPrimary})`),q=o(`var(--m3e-switch-unselected-handle-color, ${i.color.outline})`),A=o("var(--m3e-switch-state-layer-size, 2.5rem)"),F=o(`var(--m3e-switch-state-layer-shape, ${i.shape.corner.full})`),I=o(`var(--m3e-switch-disabled-selected-icon-color, ${i.color.onSurface})`),J=o("var(--m3e-switch-disabled-selected-icon-opacity, 38%)"),N=o(`var(--m3e-switch-disabled-unselected-icon-color, ${i.color.surfaceContainerHighest})`),O=o("var(--m3e-switch-disabled-unselected-icon-opacity, 38%)"),Q=o("var(--m3e-switch-disabled-track-opacity, 12%)"),Y=o(`var(--m3e-switch-disabled-selected-track-color, ${i.color.onSurface})`),ee=o(`var(--m3e-switch-disabled-unselected-track-color, ${i.color.surfaceContainerHighest})`),te=o(`var(--m3e-switch-disabled-unselected-track-outline-color, ${i.color.onSurface})`),oe=o("var(--m3e-switch-disabled-unselected-handle-opacity, 38%)"),re=o("var(--m3e-switch-disabled-selected-handle-opacity, 100%)"),ce=o(`var(--m3e-switch-disabled-selected-handle-color, ${i.color.surface})`),ae=o(`var(--m3e-switch-disabled-unselected-handle-color, ${i.color.onSurface})`),se=o(`var(--m3e-switch-selected-hover-icon-color, ${i.color.onPrimaryContainer})`),ne=o(`var(--m3e-switch-unselected-hover-icon-color, ${i.color.surfaceContainerHighest})`),ie=o(`var(--m3e-switch-selected-hover-track-color, ${i.color.primary})`),de=o(`var(--m3e-switch-selected-hover-state-layer-color, ${i.color.primary})`),le=o("var(--m3e-switch-selected-hover-state-layer-opacity, 8%)"),he=o(`var(--m3e-switch-unselected-hover-track-color, ${i.color.surfaceContainerHighest})`),ue=o(`var(--m3e-switch-unselected-hover-track-outline-color, ${i.color.outline})`),ke=o(`var(--m3e-switch-unselected-hover-state-layer-color, ${i.color.onSurface})`),pe=o("var(--m3e-switch-unselected-hover-state-layer-opacity, 8%)"),be=o(`var(--m3e-switch-selected-hover-handle-color, ${i.color.surfaceContainerHighest})`),$e=o(`var(--m3e-switch-unselected-hover-handle-color, ${i.color.onSurfaceVariant})`),me=o(`var(--m3e-switch-selected-focus-icon-color, ${i.color.onPrimaryContainer})`),fe=o(`var(--m3e-switch-unselected-focus-icon-color, ${i.color.surfaceContainerHighest})`),ve=o(`var(--m3e-switch-selected-focus-track-color, ${i.color.primary})`),we=o(`var(--m3e-switch-selected-focus-state-layer-color, ${i.color.primary})`),ge=o("var(--m3e-switch-selected-focus-state-layer-opacity, 10%)"),ye=o(`var(--m3e-switch-unselected-focus-track-color, ${i.color.surfaceContainerHighest})`),xe=o(`var(--m3e-switch-unselected-focus-track-outline-color, ${i.color.outline})`),Ce=o(`var(--m3e-switch-unselected-focus-state-layer-color, ${i.color.onSurface})`),Ee=o("var(--m3e-switch-unselected-focus-state-layer-opacity, 10%)"),_e=o(`var(--m3e-switch-selected-focus-handle-color, ${i.color.primaryContainer})`),Le=o(`var(--m3e-switch-unselected-focus-handle-color, ${i.color.onSurfaceVariant})`),Se=o(`var(--m3e-switch-selected-pressed-icon-color, ${i.color.onPrimaryContainer})`),He=o(`var(--m3e-switch-unselected-pressed-icon-color, ${i.color.surfaceContainerHighest})`),Te=o(`var(--m3e-switch-selected-pressed-track-color, ${i.color.primary})`),Xe=(o(`var(--m3e-switch-selected-pressed-state-layer-color, ${i.color.primary})`),o("var(--m3e-switch-selected-pressed-state-layer-opacity, 10%)"),o(`var(--m3e-switch-unselected-pressed-track-color, ${i.color.surfaceContainerHighest})`)),ze=o(`var(--m3e-switch-unselected-pressed-track-outline-color, ${i.color.outline})`),Pe=(o(`var(--m3e-switch-unselected-pressed-state-layer-color, ${i.color.onSurface})`),o("var(--m3e-switch-unselected-pressed-state-layer-opacity, 10%)"),o(`var(--m3e-switch-selected-pressed-handle-color, ${i.color.primaryContainer})`)),Be=o(`var(--m3e-switch-unselected-pressed-handle-color, ${i.color.onSurfaceVariant})`),Ge=r`.handle { position: relative; display: flex; align-items: center; justify-content: center; pointer-events: none; transform-origin: center center; border-radius: ${K}; transition: ${o(`background-color ${i.motion.duration.short4} ${i.motion.easing.standard},\n      transform var(--_switch-handle-effect),\n      width ${i.motion.spring.fastEffects},\n      height ${i.motion.spring.fastEffects}`)}; } .track:not(.pressed) .handle { --_switch-handle-effect: ${i.motion.spring.fastSpatial}; } .track.pressed .handle { --_switch-handle-effect: ${i.motion.spring.fastEffects}; } :host(:not([aria-disabled="true"]):not([checked])[icons="both"]) .track:not(.pressed) .handle { width: ${j}; height: ${W}; } :host(:not([checked]):not([icons="both"])) .track:not(.pressed) .handle, :host([aria-disabled="true"]:not([checked])) .handle { width: ${M}; height: ${G}; } :host([checked]) .track:not(.pressed) .handle { width: ${R}; height: ${V}; } .track.pressed .handle { width: ${D}; height: ${U}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle { background-color: ${q}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle { background-color: ${$e}; } :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .handle { background-color: ${Le}; } :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .handle { background-color: ${Be}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle { background-color: ${Z}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .handle { background-color: ${be}; } :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .handle { background-color: ${_e}; } :host(:not([aria-disabled="true"])[checked]) .track.pressed .handle { background-color: ${Pe}; } :host([aria-disabled="true"]:not([checked])) .handle { background-color: color-mix( in srgb, ${ae} ${oe}, transparent ); } :host([aria-disabled="true"][checked]) .handle { background-color: color-mix( in srgb, ${ce} ${re}, transparent ); } :host(:not(:dir(rtl))[checked]) .track:not(.pressed) .handle { transform: translateX( calc(${H} - ${R} - calc(${X} * 2)) ); } :host(:dir(rtl)[checked]) .track:not(.pressed) .handle { transform: translateX( calc( 0px - calc( ${H} - ${R} - calc(${X} * 2) ) ) ); } :host(:not(:dir(rtl))[checked]) .track.pressed .handle { transform: translateX( calc(${H} - ${D} - ${X}) ); } :host(:dir(rtl)[checked]) .track.pressed .handle { transform: translateX( calc(0px - calc(${H} - ${D} - ${X})) ); } :host(:not(:dir(rtl)):not([checked]):not([icons="both"])) .track:not(.pressed) .handle, :host(:not(:dir(rtl))[aria-disabled="true"]:not([checked])) .handle { transform: translateX( calc( ${X} + calc(${D} - ${j}) ) ); } :host(:dir(rtl):not([checked]):not([icons="both"])) .track:not(.pressed) .handle, :host(:dir(rtl)[aria-disabled="true"]:not([checked])) .handle { transform: translateX( calc( 0px - calc( ${X} + calc(${D} - ${j}) ) ) ); } :host(:not(:dir(rtl)):not([aria-disabled="true"]):not([checked])[icons="both"]) .track:not(.pressed) .handle { transform: translateX(${X}); } :host(:dir(rtl):not([aria-disabled="true"]):not([checked])[icons="both"]) .track:not(.pressed) .handle { transform: translateX(calc(0px - ${X})); } @media (forced-colors: active) { .handle { transition: ${o(`transform var(--_switch-handle-effect),\n      width ${i.motion.spring.fastEffects},\n      height ${i.motion.spring.fastEffects}`)}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .handle { background-color: ButtonText; } :host([aria-disabled="true"]:not([checked])) .handle { background-color: GrayText; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .handle, :host(:not([aria-disabled="true"])[checked]) .track.pressed .handle { background-color: Canvas; } :host([aria-disabled="true"][checked]) .handle { background-color: Canvas; } } @media (prefers-reduced-motion) { .handle { transition: none; } }`,Me=r`:host([icons="none"]) .icon, :host([icons="selected"]:not([checked])) .icon, :host([aria-disabled="true"]:not([checked])) .icon { display: none; } .icon { width: 1em; transition: ${o(`color ${i.motion.duration.short4} ${i.motion.easing.standard}`)}; } :host(:not([checked])) .icon { font-size: ${L}; } :host([checked]) .icon { font-size: ${E}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon { color: ${_}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon { color: ${ne}; } :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .icon { color: ${fe}; } :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .icon { color: ${He}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon { color: ${C}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .icon { color: ${se}; } :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .icon { color: ${me}; } :host(:not([aria-disabled="true"])[checked]) .track.pressed .icon { color: ${Se}; } :host([aria-disabled="true"]:not([checked])) .icon { color: color-mix( in srgb, ${N} ${O}, transparent ); } :host([aria-disabled="true"][checked]) .icon { color: color-mix( in srgb, ${I} ${J}, transparent ); } @media (forced-colors: active) { :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"]):not([checked])) .track.pressed .icon { color: Canvas; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) .icon, :host(:not([aria-disabled="true"])[checked]) .track.pressed .icon { color: CanvasText; } :host([aria-disabled="true"]:not([checked])) .icon { color: Canvas; } :host([aria-disabled="true"][checked]) .icon { color: GrayText; } } @media (prefers-reduced-motion) { .icon { transition: none; } }`,We=r`.state-layer { width: ${A}; height: ${A}; border-radius: ${F}; transition: ${o(`top ${i.motion.spring.fastEffects},\n          left ${i.motion.spring.fastEffects},\n          right ${i.motion.spring.fastEffects}`)}; } :host(:not([checked])[icons="both"]) .track:not(.pressed) .state-layer { inset-inline-start: calc(0px - calc(calc(${A} - ${j}) / 2)); top: calc(0px - calc(calc(${A} - ${W}) / 2)); } :host(:not([checked]):not([icons="both"])) .track:not(.pressed) .state-layer { inset-inline-start: calc( 0px - calc(calc(${A} - ${M}) / 2) ); top: calc(0px - calc(calc(${A} - ${G}) / 2)); } :host([checked]) .track:not(.pressed) .state-layer { inset-inline-start: calc(0px - calc(calc(${A} - ${R}) / 2)); top: calc(0px - calc(calc(${A} - ${V}) / 2)); } .track.pressed .state-layer { inset-inline-start: calc(0px - calc(calc(${A} - ${D}) / 2)); top: calc(0px - calc(calc(${A} - ${D}) / 2)); } :host(:not([checked])) .state-layer { --m3e-state-layer-hover-color: ${ke}; --m3e-state-layer-hover-opacity: ${pe}; --m3e-state-layer-focus-color: ${Ce}; --m3e-state-layer-focus-opacity: ${Ee}; } :host([checked]) .state-layer { --m3e-state-layer-hover-color: ${de}; --m3e-state-layer-hover-opacity: ${le}; --m3e-state-layer-focus-color: ${we}; --m3e-state-layer-focus-opacity: ${ge}; }`,je=r`:host { display: inline-block; position: relative; outline: none; height: fit-content; width: fit-content; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) { cursor: pointer; } .focus-ring { border-radius: ${z}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .base { display: flex; align-items: center; justify-content: center; }`,Ve=r`.track { display: flex; align-items: center; position: relative; box-sizing: border-box; border-radius: ${z}; width: ${H}; height: ${S}; transition: ${o(`background-color ${i.motion.duration.short4} ${i.motion.easing.standard}`)}; } :host(:not([checked])) .track { border-width: ${X}; border-style: solid; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed) { border-color: ${T}; background-color: ${B}; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed) { border-color: ${ue}; background-color: ${he}; } :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed) { border-color: ${xe}; background-color: ${ye}; } :host(:not([aria-disabled="true"]):not([checked])) .track.pressed { border-color: ${ze}; background-color: ${Xe}; } :host([aria-disabled="true"]:not([checked])) .track { border-color: color-mix( in srgb, ${te} ${Q}, transparent ); background-color: color-mix( in srgb, ${ee} ${Q}, transparent ); } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed) { background-color: ${P}; } :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed) { background-color: ${ie}; } :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed) { background-color: ${ve}; } :host(:not([aria-disabled="true"])[checked]) .track.pressed { background-color: ${Te}; } :host([aria-disabled="true"][checked]) .track { background-color: color-mix( in srgb, ${Y} ${Q}, transparent ); } @media (forced-colors: active) { .track { transition: none; } :host(:not([aria-disabled="true"]):not([checked]):not(:focus):not(:hover)) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked]):not(:focus):hover) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked]):focus) .track:not(.pressed), :host(:not([aria-disabled="true"]):not([checked])) .track.pressed { border-color: ButtonText; background-color: Canvas; } :host([aria-disabled="true"]:not([checked])) .track { border-color: GrayText; background-color: Canvas; } :host(:not([aria-disabled="true"])[checked]:not(:focus):not(:hover)) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]:not(:focus):hover) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]:focus) .track:not(.pressed), :host(:not([aria-disabled="true"])[checked]) .track.pressed { background-color: ButtonText; } :host([aria-disabled="true"][checked]) .track { background-color: GrayText; } } @media (prefers-reduced-motion) { .track { transition: none; } }`;var Re,Ue,De,Ke,Ze,qe;let Ae=class extends(d(l(h(u(k(p(b($(m(f(v(c,"switch")))))))))))){constructor(){super(),Re.add(this),Ue.set(this,t=>e(this,Re,"m",qe).call(this,t)),De.set(this,new w(this,{target:null,callback:e=>{this.disabled||(e?this._stateLayer?.show("hover"):this._stateLayer?.hide("hover"))}})),Ke.set(this,new g(this,{target:null,callback:e=>this._track?.classList.toggle("pressed",e&&!this.disabled)})),this.icons="none",this.value="on",new g(this,{isPressedKey:e=>" "===e,callback:e=>this._track?.classList.toggle("pressed",e&&!this.disabled)})}get[(Ue=new WeakMap,De=new WeakMap,Ke=new WeakMap,Re=new WeakSet,y)](){return this.checked&&!this.disabled?this.value:null}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,Ue,"f"));for(const t of this.labels)e(this,De,"f").observe(t),e(this,Ke,"f").observe(t)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,Ue,"f"));for(const t of this.labels)e(this,De,"f").unobserve(t),e(this,Ke,"f").unobserve(t)}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer].forEach(e=>e?.attach(this))}render(){return a`<m3e-focus-ring class="focus-ring"></m3e-focus-ring><div class="track" aria-hidden="true"><div class="touch" aria-hidden="true"></div><div class="handle"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><div class="base">${e(this,Re,"m",Ze).call(this)}</div></div></div>`}};Ze=function(){return this.checked?a`<svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z"></path></svg>`:a`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>`},qe=function(e){e.defaultPrevented||(this.checked=!this.checked,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?this.dispatchEvent(new Event("change",{bubbles:!0})):this.checked=!this.checked,this.closest("label")&&e.preventDefault())},Ae.styles=[je,We,Ve,Ge,Me],t([s(".track")],Ae.prototype,"_track",void 0),t([s(".focus-ring")],Ae.prototype,"_focusRing",void 0),t([s(".state-layer")],Ae.prototype,"_stateLayer",void 0),t([n({reflect:!0})],Ae.prototype,"icons",void 0),t([n()],Ae.prototype,"value",void 0),Ae=t([x("m3e-switch")],Ae);export{Ae as M3eSwitchElement};

package/dist/tabs.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __classPrivateFieldGet, __decorate, __classPrivateFieldSet } from 'tslib';

package/dist/tabs.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__classPrivateFieldGet as e,__decorate as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as a,html as o,css as s,nothing as r,unsafeCSS as l}from"lit";import{query as n,state as c,property as d}from"lit/decorators.js";import{Selected as h,HtmlFor as b,KeyboardClick as p,Focusable as v,Disabled as m,AttachInternals as u,Role as f,DesignToken as g,customElement as y,ResizeController as x,addCustomState as _,hasCustomState as $,deleteCustomState as w}from"@m3e/web/core";import{addAriaReferencedId as k,removeAriaReferencedId as I,selectionManager as P,SelectionManager as S}from"@m3e/web/core/a11y";import{ifDefined as C}from"lit/directives/if-defined.js";import{M3eDirectionality as z}from"@m3e/web/core/bidi";import"@m3e/web/slide-group";var L,T,B,E;let W=E=class extends(h(b(p(v(m(u(f(a,"tab"),!0))))))){constructor(){super(...arguments),L.add(this),T.set(this,t=>e(this,L,"m",B).call(this,t))}attach(e){super.attach(e),e.id=e.id||"m3e-tab-panel-"+E.__nextId++,k(this,"aria-controls",e.id)}detach(){this.control&&this.control.id&&I(this,"aria-controls",this.control.id),super.detach()}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,T,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,T,"f"))}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){super.update(e),e.has("selected")&&this.closest("m3e-tabs")?.[P].notifySelectionChange(this)}render(){return o`<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>`}};T=new WeakMap,L=new WeakSet,B=function(e){this.disabled&&(e.preventDefault(),e.stopImmediatePropagation()),e.defaultPrevented||this.selected||(this.selected=!0,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-tabs")?.[P].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.selected=!1)},W.styles=s`:host { display: inline-block; outline: none; user-select: none; height: calc(var(--_tab-height) + ${g.density.calc(-3)}); font-size: var(--m3e-tab-font-size, ${g.typescale.standard.title.small.fontSize}); font-weight: var(--m3e-tab-font-weight, ${g.typescale.standard.title.small.fontWeight}); line-height: var(--m3e-tab-line-height, ${g.typescale.standard.title.small.lineHeight}); letter-spacing: var(--m3e-tab-tracking, ${g.typescale.standard.title.small.tracking}); flex-grow: var(--_tab-grow); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :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, ${g.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, var(--_tab-selected-color, ${g.color.primary})); --m3e-state-layer-hover-color: var( --m3e-tab-selected-container-hover-color, var(--_tab-selected-container-hover-color, ${g.color.primary}) ); --m3e-state-layer-focus-color: var( --_tab-selected-container-focus-color, var(--m3e-tab-selected-container-focus-color, ${g.color.primary}) ); --m3e-ripple-color: var( --_tab-selected-ripple-color, var(--m3e-tab-selected-ripple-color, ${g.color.primary}) ); } :host(:not([selected]):not(:disabled)) .base { color: var(--m3e-tab-unselected-color, ${g.color.onSurfaceVariant}); --m3e-state-layer-hover-color: var(--m3e-tab-unselected-container-hover-color, ${g.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-tab-unselected-container-focus-color, ${g.color.onSurface}); --m3e-ripple-color: var(--m3e-tab-unselected-ripple-color, ${g.color.onSurface}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tab-disabled-color, ${g.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; } }`,W.__nextId=0,t([n(".focus-ring")],W.prototype,"_focusRing",void 0),t([n(".state-layer")],W.prototype,"_stateLayer",void 0),t([n(".ripple")],W.prototype,"_ripple",void 0),t([n(".label")],W.prototype,"label",void 0),W=E=t([y("m3e-tab")],W);let j=class extends(f(a,"tabpanel")){connectedCallback(){super.connectedCallback(),this.slot="panel"}render(){return o`<slot></slot>`}};var M,Z,q,A,D,U,V,G,H;j.styles=s`:host { display: block; overflow-y: auto; scrollbar-width: ${g.scrollbar.width}; scrollbar-color: ${g.scrollbar.color}; }`,j=t([y("m3e-tab-panel")],j);let O=class extends(u(a)){constructor(){super(),M.add(this),Z.set(this,void 0),this._selectedIndex=null,this[H]=(new S).onSelectedItemsChange(()=>e(this,M,"m",V).call(this)).withHomeAndEnd().withWrap().withDirectionality(z.current),this.disablePagination=!1,this.headerPosition="before",this.variant="secondary",this.stretch=!1,this.previousPageLabel="Previous page",this.nextPageLabel="Next page",new x(this,{skipInitial:!0,callback:()=>{_(this,"-no-animate"),e(this,M,"m",G).call(this)}})}get tabs(){return this[P]?.items??[]}get selectedTab(){return null!==this._selectedIndex?this.tabs[this._selectedIndex]??null:null}get selectedIndex(){return this._selectedIndex??-1}set selectedIndex(e){if(e>=0&&e<this.tabs.length)this.tabs[e].selected=!0;else{const e=this.selectedTab;e&&(e.selected=!1)}}connectedCallback(){super.connectedCallback(),_(this,"-no-animate"),i(this,Z,z.observe(()=>{this.requestUpdate(),this[P].directionality=z.current}),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,Z,"f")?.call(this)}updated(t){super.updated(t),(t.has("variant")||t.has("stretch"))&&null!==this._selectedIndex&&e(this,M,"m",G).call(this)}render(){let t;return this.selectedTab?.control&&(t=[...this.querySelectorAll("[slot='panel']")].indexOf(this.selectedTab.control),-1===t&&(t=void 0)),o`${"before"===this.headerPosition?e(this,M,"m",q).call(this):r}<m3e-slide class="tabs" selected-index="${C(t)}"><slot name="panel"></slot></m3e-slide>${"after"===this.headerPosition?e(this,M,"m",q).call(this):r}`}};Z=new WeakMap,M=new WeakSet,H=P,q=function(){return o`<m3e-slide-group class="tablist" threshold="8" previous-page-label="${this.previousPageLabel}" next-page-label="${this.nextPageLabel}" ?disabled="${this.disablePagination}"><slot name="prev-icon" slot="prev-icon">${"ltr"===z.current?o`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`:o`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`}</slot><slot name="next-icon" slot="next-icon">${"ltr"===z.current?o`<svg class="next icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`:o`<svg class="prev icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`}</slot><div class="header" role="tablist"><div class="tabs"><slot @slotchange="${e(this,M,"m",A)}" @keydown="${e(this,M,"m",D)}" @change="${e(this,M,"m",U)}"></slot></div><div class="ink-bar" aria-hidden="true"><div class="active-indicator"></div></div></div></m3e-slide-group>`},A=function(){this[P].setItems([...this.querySelectorAll("m3e-tab")])},D=function(e){this[P].onKeyDown(e)},U=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},V=function(){const t=this[P].selectedItems[0];let i=t?this.tabs.indexOf(t):null;-1===i&&(i=null),this._selectedIndex=i,e(this,M,"m",G).call(this)},G=function(){if(!this._tablist)return;const e=this[P].selectedItems[0];let t=0,i=0;if(e&&null!==this._selectedIndex){for(let e=0;e<this._selectedIndex;e++)t+=this.tabs[e].clientWidth;i=e.clientWidth,"primary"===this.variant&&e.label&&(t+=e.label.offsetLeft,i=e.label.clientWidth,i<24&&(t-=(24-i)/2,i=24))}this._tablist.style.setProperty("--_tabs-active-tab-position",`${t}px`),this._tablist.style.setProperty("--_tabs-active-tab-size",`${i}px`),i>0&&$(this,"-no-animate")&&setTimeout(()=>w(this,"-no-animate"))},O.styles=s`:host { display: flex; flex-direction: column; position: relative; } .tablist { position: relative; box-sizing: border-box; flex: none; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-tabs-paginator-button-icon-size, var(--m3e-icon-button-icon-size, 1.5rem)) !important; } .header { display: flex; flex-direction: column; } .tabs { display: flex; flex-wrap: nowrap; align-items: center; } .ink-bar { box-sizing: border-box; height: var(--_tabs-active-indicator-thickness); } .active-indicator { position: relative; height: var(--_tabs-active-indicator-thickness); left: calc(var(--_tabs-active-tab-position) + var(--_tabs-activate-indicator-inset, 0px)); width: calc(var(--_tabs-active-tab-size) - calc(var(--_tabs-activate-indicator-inset, 0px) * 2)); background-color: var(--m3e-tabs-active-indicator-color, ${g.color.primary}); transition: ${l(`left var(--m3e-slide-animation-duration, ${g.motion.duration.long2}) ${g.motion.easing.standard},\n        width var(--m3e-slide-animation-duration, ${g.motion.duration.long2}) ${g.motion.easing.standard}`)}; } :host([header-position="after"]) .header { flex-direction: column-reverse; } :host([header-position="before"]) .ink-bar { margin-top: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="before"]) .tablist { --m3e-slide-group-divider-bottom: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${g.color.outlineVariant}); } :host([header-position="after"]) .ink-bar { margin-bottom: calc(0px - var(--_tabs-active-indicator-thickness)); } :host([header-position="after"]) .tablist { --m3e-slide-group-divider-top: var(--m3e-divider-thickness, 1px) solid var(--m3e-divider-color, ${g.color.outlineVariant}); } :host([header-position="before"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-before-active-indicator-shape, ${g.shape.corner.extraSmallTop}); } :host([header-position="after"][variant="primary"]) .active-indicator { border-radius: var(--m3e-tabs-primary-after-active-indicator-shape, ${g.shape.corner.extraSmallBottom}); } .tabs { flex: 1 1 auto; } :host([variant="primary"]) .tablist { --_tabs-activate-indicator-inset: var(--m3e-tabs-primary-active-indicator-inset, 0.125rem); --_tabs-active-indicator-thickness: var(--m3e-tabs-primary-active-indicator-thickness, 3px); --_tab-height: 4rem; } :host([header-position="before"]) .tablist { --_tab-focus-ring-bottom-offset: calc(var(--_tabs-active-indicator-thickness) + 1px); } :host([header-position="after"]) .tablist { --_tab-focus-ring-top-offset: calc(var(--_tabs-active-indicator-thickness) + 2px); } :host([header-position="before"][variant="primary"]) .tablist { --_tab-direction: column; } :host([header-position="after"][variant="primary"]) .tablist { --_tab-direction: column-reverse; } :host([variant="secondary"]) .tablist { --_tabs-active-indicator-thickness: var(--m3e-tabs-secondary-active-indicator-thickness, 2px); --_tab-height: 3rem; --_tab-selected-color: ${g.color.onSurface}; --_tab-selected-container-hover-color: ${g.color.onSurface}; --_tab-selected-container-focus-color: ${g.color.onSurface}; --_tab-selected-ripple-color: ${g.color.onSurface}; } :host([stretch]) .header { width: 100%; --_tab-grow: 1; } :host(:state(-no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } } @media (forced-colors: active) { .active-indicator { background-color: ButtonText; --m3e-divider-color: GrayText; } }`,t([n(".tablist")],O.prototype,"_tablist",void 0),t([c()],O.prototype,"_selectedIndex",void 0),t([d({attribute:"disable-pagination",type:Boolean})],O.prototype,"disablePagination",void 0),t([d({attribute:"header-position",reflect:!0})],O.prototype,"headerPosition",void 0),t([d({reflect:!0})],O.prototype,"variant",void 0),t([d({type:Boolean,reflect:!0})],O.prototype,"stretch",void 0),t([d({attribute:"previous-page-label"})],O.prototype,"previousPageLabel",void 0),t([d({attribute:"next-page-label"})],O.prototype,"nextPageLabel",void 0),O=t([y("m3e-tabs")],O);export{W as M3eTabElement,j as M3eTabPanelElement,O as M3eTabsElement};

package/dist/textarea-autosize.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __classPrivateFieldSet, __classPrivateFieldGet, __decorate } from 'tslib';

package/dist/textarea-autosize.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__classPrivateFieldSet as t,__classPrivateFieldGet as e,__decorate as i}from"tslib";import{LitElement as s,css as o}from"lit";import{property as n}from"lit/decorators.js";import{HtmlFor as h,Role as l,debounce as r,customElement as a}from"@m3e/web/core";

package/dist/theme.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';

package/dist/theme.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__decorate as t,__classPrivateFieldGet as e,__classPrivateFieldSet as r}from"tslib";import{css as a,LitElement as n,html as o}from"lit";import{property as i}from"lit/decorators.js";import{DesignToken as s,customElement as c}from"@m3e/web/core";

package/dist/toc.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';

package/dist/toc.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__decorate as e,__classPrivateFieldGet as t,__classPrivateFieldSet as i}from"tslib";import{LitElement as o,html as a,unsafeCSS as n,css as s,nothing as l}from"lit";import{query as r,state as c,property as d}from"lit/decorators.js";import{Selected as h,Disabled as m,AttachInternals as p,Role as v,DesignToken as g,customElement as f,getTextContent as u,guid as b,HtmlFor as y,setCustomState as w,scrollIntoViewIfNeeded as $,hasCustomState as k,IntersectionController as x,ScrollController as I,MutationController as _,hasAssignedNodes as z,debounce as S}from"@m3e/web/core";import{SelectionManager as W}from"@m3e/web/core/a11y";let T=class extends(h(m(p(v(o,"link"))))){update(e){super.update(e),e.has("selected")&&(this.ariaSelected=null,this.ariaCurrent=this.selected?"true":null),e.has("node")&&(this.node?this._base?.style.setProperty("--_level",""+(this.node.level-1)):this._base?.style.removeProperty("--_level"))}firstUpdated(e){super.firstUpdated(e),this._stateLayer?.attach(this)}render(){return a`<m3e-state-layer class="state-layer"></m3e-state-layer><div class="base"><slot></slot></div>`}};var M,A,H,N,E,V,D,U,C,L,P,j,q;T.styles=s`:host { display: inline-block; position: relative; user-select: none; outline: none; border-radius: var(--m3e-toc-item-shape, ${g.shape.corner.largeIncreased}); padding-block: var(--m3e-toc-item-padding-block, 0.5rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not(:disabled)) { cursor: pointer; } .base { padding-inline-start: calc( var(--m3e-toc-item-padding, 1rem) + calc(var(--m3e-toc-item-inset, 0.75rem) * var(--_level, 0)) ); padding-inline-end: var(--m3e-toc-item-padding, 1rem); transition: ${n(`color var(--m3e-toc-active-indicator-animation-duration, ${g.motion.duration.long1}) ${g.motion.easing.standard}`)}; } :host(:not([selected])) { font-size: var(--m3e-toc-item-font-size, ${g.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-toc-item-font-weight, ${g.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-toc-item-line-height, ${g.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-tracking, ${g.typescale.standard.body.large.tracking}); color: var(--m3e-toc-item-color, ${g.color.onSurfaceVariant}); } :host([selected]) { font-size: var(--m3e-toc-item-selected-font-size, ${g.typescale.emphasized.body.large.fontSize}); font-weight: var(--m3e-toc-item-selected-font-weight, ${g.typescale.emphasized.body.large.fontWeight}); line-height: var(--m3e-toc-item-selected-line-height, ${g.typescale.emphasized.body.large.lineHeight}); letter-spacing: var(--m3e-toc-item-selected-tracking, ${g.typescale.emphasized.body.large.tracking}); color: var(--m3e-toc-item-selected-color, ${g.color.onSecondaryContainer}); } .base { justify-content: unset; } .state-layer { --m3e-state-layer-focus-opacity: 0; } @media (prefers-reduced-motion) { .base { transition: none; } }`,e([r(".base")],T.prototype,"_base",void 0),e([r(".state-layer")],T.prototype,"_stateLayer",void 0),e([c()],T.prototype,"node",void 0),T=e([f("m3e-toc-item")],T);class O{static generate(e,i=6){let o=6;const a=new Array;e.querySelectorAll("h1:not([m3e-toc-ignore]),h2:not([m3e-toc-ignore]),h3:not([m3e-toc-ignore]),h4:not([m3e-toc-ignore]),h5:not([m3e-toc-ignore]),h6:not([m3e-toc-ignore]),m3e-heading[level]:not([m3e-toc-ignore])").forEach(e=>{const i=t(M,M,"m",A).call(M,e);o=Math.min(i,o),a.push({id:e.id||b(),element:e,level:i,label:u(e,!0),nodes:new Array})});for(let e=o+i-1;e>o;e--)for(let t=0;t<a.length;t++){const i=a[t];if(i.level===e)for(let o=t;o>=0;o--){const t=a[o];if(t.level<e){t.nodes.push(i);break}}}return a.forEach(e=>e.level-=o-1),a.filter(e=>1===e.level)}}M=O,A=function(e){return e.tagName.startsWith("H")?parseInt(e.tagName.substring(1)):parseInt(e.getAttribute("level")??"0")};let R=class extends(y(p(v(o,"navigation")))){constructor(){super(...arguments),H.add(this),this._toc=[],N.set(this,!1),E.set(this,(new W).withHomeAndEnd().withVerticalOrientation().disableRovingTabIndex().onSelectedItemsChange(()=>{if(this._activeIndicator){const e=t(this,E,"f").selectedItems[0];e?($(e,this,{block:"nearest",behavior:"smooth"}),this._activeIndicator.style.top=`${e.offsetTop}px`,this._activeIndicator.style.height=`${e.clientHeight}px`,this._activeIndicator.style.visibility=0==e.clientHeight?"hidden":"",k(this,"-no-animate")&&setTimeout(()=>w(this,"-no-animate",!1),40)):(w(this,"-no-animate",!0),this._activeIndicator.style.top="0px",this._activeIndicator.style.height="0px",this._activeIndicator.style.visibility="hidden")}})),V.set(this,new x(this,{target:null,callback:e=>{if(!this.control||t(this,N,"f"))return;const i=this.control.scrollTop;let o=null,a=Number.POSITIVE_INFINITY;if(e.filter(e=>e.isIntersecting).map(e=>e.target).forEach(e=>{const t=e.offsetTop,n=Math.abs(t-i);n<a&&(a=n,o=e)}),o){const e=t(this,E,"f").items.find(e=>e.node?.element===o);e&&t(this,E,"f").select(e)}}})),D.set(this,new I(this,{target:null,callback:()=>i(this,N,!1,"f"),debounce:!0})),U.set(this,new _(this,{target:null,config:{childList:!0,subtree:!0},callback:()=>this._updateToc()})),this.maxDepth=2}attach(e){super.attach(e),t(this,U,"f").observe(e),t(this,D,"f").observe(e),t(this,H,"m",q).call(this)}detach(){this.control&&(t(this,U,"f").unobserve(this.control),t(this,D,"f").unobserve(this.control)),super.detach(),t(this,H,"m",q).call(this)}willUpdate(e){super.willUpdate(e),e.has("maxDepth")&&t(this,H,"m",q).call(this)}updated(e){if(super.updated(e),e.has("_toc")){const{added:e,removed:i}=t(this,E,"f").setItems([...this.shadowRoot?.querySelectorAll("m3e-toc-item")??[]]);t(this,E,"f").activeItem||(w(this,"-no-animate",!0),t(this,E,"f").updateActiveItem(e.find(e=>!e.disabled)));for(const i of e)i.node&&t(this,V,"f").observe(i.node.element);for(const e of i)e.node&&t(this,V,"f").unobserve(e.node.element)}}render(){return a`<div class="header"><div class="overline"><slot name="overline" @slotchange="${t(this,H,"m",L)}"></slot></div><div class="title"><slot name="title" @slotchange="${t(this,H,"m",P)}"></slot></div></div><slot></slot><ul class="list">${this._toc.map(e=>t(this,H,"m",C).call(this,e))}</ul><div class="active-indicator" aria-hidden="true"></div>`}_updateToc(){t(this,H,"m",q).call(this)}};N=new WeakMap,E=new WeakMap,V=new WeakMap,D=new WeakMap,U=new WeakMap,H=new WeakSet,C=function e(i){return a`<li><m3e-toc-item tabindex="-1" .node="${i}" @click="${t(this,H,"m",j)}">${i.label}</m3e-toc-item>${0==i.nodes.length?l:a`<ul>${i.nodes.map(i=>t(this,H,"m",e).call(this,i))}</ul>`}</li>`},L=function(e){w(this,"-with-overline",z(e.target))},P=function(e){w(this,"-with-title",z(e.target))},j=function(e){e.target instanceof T&&!e.target.disabled&&e.target.node?.element&&(i(this,N,!0,"f"),e.target.node.element.scrollIntoView({block:"start",behavior:"smooth"}),t(this,E,"f").updateActiveItem(e.target),t(this,E,"f").select(e.target))},q=function(){this._toc=this.control?O.generate(this.control,Math.max(1,Math.min(this.maxDepth,6))):[]},R.styles=s`:host { display: inline-block; position: relative; overflow-y: auto; scrollbar-width: ${g.scrollbar.thinWidth}; scrollbar-color: ${g.scrollbar.color}; width: var(--m3e-toc-width, 9.75rem); } ul { list-style: none; padding-inline-start: unset; margin-block-start: unset; margin-block-end: unset; } ul, li { display: flex; flex-direction: column; align-items: stretch; } m3e-toc-item { flex: none; } .active-indicator { position: absolute; pointer-events: none; box-sizing: border-box; left: 0; right: 0; border-radius: var(--m3e-toc-item-shape, ${g.shape.corner.largeIncreased}); border: 1px solid var(--m3e-toc-active-indicator-color, ${g.color.outline}); transition: ${n(`visibility var(--m3e-toc-active-indicator-animation-duration, ${g.motion.duration.long1})\n          ${g.motion.easing.standard},\n        height var(--m3e-toc-active-indicator-animation-duration, ${g.motion.duration.long1})\n          ${g.motion.easing.standard},\n        top var(--m3e-toc-active-indicator-animation-duration, ${g.motion.duration.long1})\n          ${g.motion.easing.standard}`)}; } .header { display: flex; flex-direction: column; align-items: stretch; padding-inline-start: var(--m3e-toc-item-padding, 1rem); padding-block-end: var(--m3e-toc-header-space, 0.5rem); row-gap: var(--m3e-toc-header-space, 0.5rem); } .overline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; } :host(:not(:state(-with-overline))) .overline, :host(:not(:state(-with-title))) .title, :host(:not(:state(-with-overline)):not(:state(-with-title))) .header { display: none; } ::slotted([slot="overline"]) { font-size: var(--m3e-toc-overline-font-size, ${g.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-toc-overline-font-weight, ${g.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-toc-overline-line-height, ${g.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-toc-overline-tracking, ${g.typescale.standard.label.small.tracking}); color: var(--m3e-toc-overline-color, ${g.color.onSurfaceVariant}); } ::slotted([slot="title"]) { font-size: var(--m3e-toc-title-font-size, ${g.typescale.standard.headline.small.fontSize}); font-weight: var(--m3e-toc-title-font-weight, ${g.typescale.standard.headline.small.fontWeight}); line-height: var(--m3e-toc-title-line-height, ${g.typescale.standard.headline.small.lineHeight}); letter-spacing: var(--m3e-toc-title-tracking, ${g.typescale.standard.headline.small.tracking}); color: var(--m3e-toc-title-color, ${g.color.onSurface}); } :host(:state(-no-animate)) .active-indicator { transition: none; } @media (prefers-reduced-motion) { .active-indicator { transition: none; } }`,e([c()],R.prototype,"_toc",void 0),e([r(".active-indicator")],R.prototype,"_activeIndicator",void 0),e([d({attribute:"max-depth",type:Number})],R.prototype,"maxDepth",void 0),e([S(40)],R.prototype,"_updateToc",null),R=e([f("m3e-toc")],R);export{R as M3eTocElement,T as M3eTocItemElement,O as TocGenerator};

package/dist/toolbar.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __classPrivateFieldSet, __classPrivateFieldGet, __decorate } from 'tslib';

package/dist/toolbar.min.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import{__classPrivateFieldSet as e,__classPrivateFieldGet as t,__decorate as a}from"tslib";import{LitElement as o,html as r,css as i}from"lit";import{property as s}from"lit/decorators.js";import{Vertical as n,Role as l,DesignToken as c,customElement as d}from"@m3e/web/core";import{RovingTabIndexManager as h,M3eInteractivityChecker as v}from"@m3e/web/core/a11y";import{M3eDirectionality as m}from"@m3e/web/core/bidi";var b,p,u,f,y,g;let k=class extends(n(l(o,"toolbar"))){constructor(){super(...arguments),b.add(this),p.set(this,void 0),u.set(this,(new h).withHomeAndEnd().withDirectionality(m.current)),this.variant="standard",this.shape="square",this.elevated=!1}connectedCallback(){super.connectedCallback(),e(this,p,m.observe(()=>t(this,u,"f").directionality=m.current),"f")}disconnectedCallback(){super.disconnectedCallback(),t(this,p,"f")?.call(this)}update(e){super.update(e),e.has("vertical")&&(t(this,u,"f").vertical=this.vertical)}render(){return r`<m3e-state-layer class="state-layer"></m3e-state-layer><m3e-elevation class="elevation" level="${this.elevated?3:0}"></m3e-elevation><div class="base"><slot @click="${t(this,b,"m",g)}" @keydown="${t(this,b,"m",y)}" @slotchange="${t(this,b,"m",f)}"></slot></div>`}};p=new WeakMap,u=new WeakMap,b=new WeakSet,f=function(){const{added:e}=t(this,u,"f").setItems(v.findInteractiveElements(this));if(!t(this,u,"f").activeItem){const a=e.find(e=>!e.hasAttribute("disabled"));a&&t(this,u,"f").updateActiveItem(a)}},y=function(e){t(this,u,"f").onKeyDown(e)},g=function(e){const a=e.composedPath().find(e=>e instanceof HTMLElement&&t(this,u,"f").items.includes(e));a&&t(this,u,"f").updateActiveItem(a)},k.styles=i`:host { display: inline-block; position: relative; } .base { display: flex; align-items: center; box-sizing: border-box; border-radius: inherit; } :host(:not([vertical])) { height: fit-content; } :host(:not([vertical])) .base { height: calc(var(--m3e-toolbar-size, 4rem) + ${c.density.calc(-3)}); column-gap: var(--m3e-toolbar-spacing, 0.25rem); } :host([vertical]) { width: fit-content; } :host([vertical]) .base { width: calc(var(--m3e-toolbar-size, 4rem) + ${c.density.calc(-3)}); } :host([vertical]) .base { flex-direction: column; justify-content: center; row-gap: var(--m3e-toolbar-spacing, 0.25rem); } :host([shape="rounded"]) { border-radius: var(--m3e-toolbar-rounded-shape, ${c.shape.corner.full}); } :host([shape="rounded"]) .base { padding: var(--m3e-toolbar-rounded-padding, 0.5rem); } :host(:not([vertical])[shape="square"]) .base { padding-inline: var(--m3e-toolbar-square-padding, 1rem); } :host([vertical][shape="square"]) .base { padding-block: var(--m3e-toolbar-square-padding, 1rem); } :host([variant="standard"]) .state-layer { background-color: var(--m3e-toolbar-standard-container-color, ${c.color.surfaceContainer}); } :host([variant="standard"]) .base { color: var(--m3e-toolbar-standard-color, ${c.color.onSurface}); } :host([variant="vibrant"]) .state-layer { background-color: var(--m3e-toolbar-vibrant-container-color, ${c.color.primaryContainer}); } :host([variant="vibrant"]) .base { color: var(--m3e-toolbar-vibrant-color, ${c.color.onPrimaryContainer}); } @media (forced-colors: active) { :host([variant]) .state-layer { background-color: Canvas; } :host([variant]) .base { color: CanvasText; outline: 1px solid CanvasText; } }`,a([s({reflect:!0})],k.prototype,"variant",void 0),a([s({reflect:!0})],k.prototype,"shape",void 0),a([s({type:Boolean,reflect:!0})],k.prototype,"elevated",void 0),k=a([d("m3e-toolbar")],k);export{k as M3eToolbarElement};

package/dist/tooltip.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __decorate, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';