@m3e/web 2.0.0

package/dist/src/nav-menu/NavMenuElement.d.ts

@@ -0,0 +1,113 @@
+import { CSSResultGroup, LitElement } from "lit";
+import { SelectionManager, selectionManager } from "@m3e/web/core/a11y";
+import { M3eNavMenuItemElement } from "./NavMenuItemElement";
+declare const M3eNavMenuElement_base: import("../core/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * A hierarchical menu, typically used on larger devices, that allows a user to switch between views.
+ *
+ * @description
+ * The `m3e-nav-menu` component provides a hierarchical, accessible navigation menu supporting
+ * nested expandable items, keyboard navigation, and focus management. It is highly customizable
+ * via slots and CSS custom properties, and is designed for use in sidebars, navigation drawers,
+ * and complex menu structures.
+ *
+ * @example
+ * The following example illustrates a navigation menu with a top-level group of menu items.
+ * ```html
+ * <m3e-nav-menu>
+ *   <m3e-nav-menu-item-group>
+ *     <m3e-heading slot="label" variant="label" size="large">Mail</m3e-heading>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="mail"></m3e-icon>
+ *       <span slot="label">Inbox</span>
+ *       <span slot="badge">24</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="send"></m3e-icon>
+ *       <span slot="label">Outbox</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="favorite"></m3e-icon>
+ *       <span slot="label">Favorites</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="delete"></m3e-icon>
+ *       <span slot="label">Trash</span>
+ *     </m3e-nav-menu-item>
+ *   </m3e-nav-menu-item-group>
+ * </m3e-nav-menu>
+ * ```
+ *
+ * @example
+ * The next example illustrates a multilevel navigation menu.
+ * ```html
+ * <m3e-nav-menu>
+ *   <m3e-nav-menu-item open>
+ *     <m3e-icon slot="icon" name="rocket_launch"></m3e-icon>
+ *     <span slot="label">Getting Started</span>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="widgets"></m3e-icon>
+ *       <span slot="label">Overview</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="package_2"></m3e-icon>
+ *       <span slot="label">Installation</span>
+ *     </m3e-nav-menu-item>
+ *   </m3e-nav-menu-item>
+ *   <m3e-nav-menu-item>
+ *     <span slot="label">Actions</span>
+ *     <m3e-nav-menu-item><span slot="label">Button</span></m3e-nav-menu-item>
+ *     <m3e-nav-menu-item><span slot="label">Icon</span></m3e-nav-menu-item>
+ *     <m3e-nav-menu-item><span slot="label">Icon Button</span></m3e-nav-menu-item>
+ *   </m3e-nav-menu-item>
+ * </m3e-nav-menu>
+ * ```
+ *
+ * @tag m3e-nav-menu
+ *
+ * @slot - Renders the items of the menu.
+ *
+ * @cssprop --m3e-nav-menu-padding-top - Top padding for the menu.
+ * @cssprop --m3e-nav-menu-padding-bottom - Bottom padding for the menu.
+ * @cssprop --m3e-nav-menu-padding-left - Left padding for the menu.
+ * @cssprop --m3e-nav-menu-padding-right - Right padding for the menu.
+ * @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements in the menu.
+ * @cssprop --m3e-nav-menu-scrollbar-width - Width of the menu scrollbar.
+ * @cssprop --m3e-nav-menu-scrollbar-color - Color of the menu scrollbar.
+ */
+export declare class M3eNavMenuElement extends M3eNavMenuElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private static __nextId;
+    /** @private */
+    readonly [selectionManager]: SelectionManager<M3eNavMenuItemElement>;
+    constructor();
+    /** The selected item of the menu. */
+    get selected(): M3eNavMenuItemElement | null;
+    /** All the items of the menu. */
+    get items(): readonly M3eNavMenuItemElement[];
+    /**
+     * Expands the specified items, or all items if no items are provided.
+     * @param {M3eNavMenuItemElement | undefined} items The items to expand.
+     */
+    expand(items?: M3eNavMenuItemElement[]): void;
+    /**
+     * Collapses the specified items, or all items if no items are provided.
+     * @param {M3eNavMenuItemElement | undefined} items The items to collapse.
+     */
+    collapse(items?: M3eNavMenuItemElement[]): void;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-nav-menu": M3eNavMenuElement;
+    }
+}
+export {};
+//# sourceMappingURL=NavMenuElement.d.ts.map

package/dist/src/nav-menu/NavMenuElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavMenuElement.d.ts","sourceRoot":"","sources":["../../../src/nav-menu/NavMenuElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAI5D,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGxE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,qBACa,iBAAkB,SAAQ,sBAAwB;;IAiB7D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAsBpC;IAEF,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAK;IAI5C,eAAe;IACf,QAAQ,CAAC,CAAC,gBAAgB,CAAC,0CAsBtB;;IAmBL,qCAAqC;IACrC,IAAI,QAAQ,IAAI,qBAAqB,GAAG,IAAI,CAE3C;IAED,iCAAiC;IACjC,IAAI,KAAK,IAAI,SAAS,qBAAqB,EAAE,CAE5C;IAED;;;OAGG;IACH,MAAM,CAAC,KAAK,CAAC,EAAE,qBAAqB,EAAE,GAAG,IAAI;IAI7C;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,qBAAqB,EAAE,GAAG,IAAI;IAc/C,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAUlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAQrC,kBAAkB;cACC,MAAM,IAAI,OAAO;CAwJrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,iBAAiB,CAAC;KACnC;CACF"}

package/dist/src/nav-menu/NavMenuItemElement.d.ts

@@ -0,0 +1,189 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { M3eFocusRingElement, M3eRippleElement, M3eStateLayerElement } from "@m3e/web/core";
+declare const M3eNavMenuItemElement_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, selectable item within a navigation menu.
+ *
+ * @description
+ * The `m3e-nav-menu-item` component represents an expandable, selectable item within a navigation menu.
+ * It supports nested child items, selection, disabled and indeterminate states, and emits events for
+ * open/close transitions. The component is highly customizable via slots and CSS custom properties, and
+ * is designed for accessible, keyboard-navigable menu structures.
+ *
+ *
+ * @example
+ * The following example illustrates a navigation menu with a top-level group of menu items.
+ * ```html
+ * <m3e-nav-menu>
+ *   <m3e-nav-menu-item-group>
+ *     <m3e-heading slot="label" variant="label" size="large">Mail</m3e-heading>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="mail"></m3e-icon>
+ *       <span slot="label">Inbox</span>
+ *       <span slot="badge">24</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="send"></m3e-icon>
+ *       <span slot="label">Outbox</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="favorite"></m3e-icon>
+ *       <span slot="label">Favorites</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="delete"></m3e-icon>
+ *       <span slot="label">Trash</span>
+ *     </m3e-nav-menu-item>
+ *   </m3e-nav-menu-item-group>
+ * </m3e-nav-menu>
+ * ```
+ *
+ * @example
+ * The next example illustrates a multilevel navigation menu.
+ * ```html
+ * <m3e-nav-menu>
+ *   <m3e-nav-menu-item open>
+ *     <m3e-icon slot="icon" name="rocket_launch"></m3e-icon>
+ *     <span slot="label">Getting Started</span>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="widgets"></m3e-icon>
+ *       <span slot="label">Overview</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="package_2"></m3e-icon>
+ *       <span slot="label">Installation</span>
+ *     </m3e-nav-menu-item>
+ *   </m3e-nav-menu-item>
+ *   <m3e-nav-menu-item>
+ *     <span slot="label">Actions</span>
+ *     <m3e-nav-menu-item><span slot="label">Button</span></m3e-nav-menu-item>
+ *     <m3e-nav-menu-item><span slot="label">Icon</span></m3e-nav-menu-item>
+ *     <m3e-nav-menu-item><span slot="label">Icon Button</span></m3e-nav-menu-item>
+ *   </m3e-nav-menu-item>
+ * </m3e-nav-menu>
+ * ```
+ *
+ * @tag m3e-nav-menu-item
+ *
+ * @slot - Renders the nested child items.
+ * @slot label - Renders the label of the item.
+ * @slot icon - Renders the icon of the item.
+ * @slot badge - Renders the badge of the item.
+ * @slot selected-icon - Renders the icon of the item when selected.
+ * @slot toggle-icon - Renders the toggle icon.
+ *
+ * @attr disabled - Whether the element is disabled.
+ * @attr indeterminate - Whether the element's selected / 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-nav-menu-item-font-size - Font size for the item label.
+ * @cssprop --m3e-nav-menu-item-font-weight - Font weight for the item label.
+ * @cssprop --m3e-nav-menu-item-line-height - Line height for the item label.
+ * @cssprop --m3e-nav-menu-item-tracking - Letter spacing for the item label.
+ * @cssprop --m3e-nav-menu-item-padding - Inline padding for the item.
+ * @cssprop --m3e-nav-menu-item-height - Height of the item.
+ * @cssprop --m3e-nav-menu-item-spacing - Spacing between icon and label.
+ * @cssprop --m3e-nav-menu-item-shape - Border radius of the item and focus ring.
+ * @cssprop --m3e-nav-menu-item-icon-size - Size of the icon.
+ * @cssprop --m3e-nav-menu-item-inset - Indentation for nested items.
+ * @cssprop --m3e-nav-menu-item-label-color - Text color for the item label.
+ * @cssprop --m3e-nav-menu-item-selected-label-color - Text color for selected item label.
+ * @cssprop --m3e-nav-menu-item-selected-container-color - Background color for selected item.
+ * @cssprop --m3e-nav-menu-item-selected-container-focus-color - Focus color for selected item container.
+ * @cssprop --m3e-nav-menu-item-selected-container-hover-color - Hover color for selected item container.
+ * @cssprop --m3e-nav-menu-item-selected-ripple-color - Ripple color for selected item.
+ * @cssprop --m3e-nav-menu-item-unselected-container-focus-color - Focus color for unselected item container.
+ * @cssprop --m3e-nav-menu-item-unselected-container-hover-color - Hover color for unselected item container.
+ * @cssprop --m3e-nav-menu-item-unselected-ripple-color - Ripple color for unselected item.
+ * @cssprop --m3e-nav-menu-item-open-container-color - Background color for open item with children.
+ * @cssprop --m3e-nav-menu-item-open-container-focus-color - Focus color for open item container.
+ * @cssprop --m3e-nav-menu-item-open-container-hover-color - Hover color for open item container.
+ * @cssprop --m3e-nav-menu-item-open-ripple-color - Ripple color for open item.
+ * @cssprop --m3e-nav-menu-item-disabled-color - Text color for disabled item.
+ * @cssprop --m3e-nav-menu-item-disabled-color-opacity - Opacity for disabled item text color.
+ * @cssprop --m3e-nav-menu-item-badge-font-size - Font size for badge slot.
+ * @cssprop --m3e-nav-menu-item-badge-font-weight - Font weight for badge slot.
+ * @cssprop --m3e-nav-menu-item-badge-line-height - Line height for badge slot.
+ * @cssprop --m3e-nav-menu-item-badge-tracking - Letter spacing for badge slot.
+ * @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements.
+ * @cssprop --m3e-nav-menu-item-vertical-inset - Vertical margin for first/last child items.
+ */
+export declare class M3eNavMenuItemElement extends M3eNavMenuItemElement_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;
+    /**
+     * Whether the item is expanded.
+     * @default false
+     */
+    open: 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<M3eNavMenuItemElement>;
+    /** Whether the item has child items. */
+    get hasChildItems(): boolean;
+    /** The parenting item. */
+    get parentItem(): M3eNavMenuItemElement | null;
+    /** The items that immediately descend from this item. */
+    get childItems(): readonly M3eNavMenuItemElement[];
+    /** 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 expand 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 M3eNavMenuItemElementEventMap extends HTMLElementEventMap {
+    opening: Event;
+    opened: Event;
+    closing: Event;
+    closed: Event;
+}
+export interface M3eNavMenuItemElement {
+    addEventListener<K extends keyof M3eNavMenuItemElementEventMap>(type: K, listener: (this: M3eNavMenuItemElement, ev: M3eNavMenuItemElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof M3eNavMenuItemElementEventMap>(type: K, listener: (this: M3eNavMenuItemElement, ev: M3eNavMenuItemElementEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-nav-menu-item": M3eNavMenuItemElement;
+    }
+}
+export {};
+//# sourceMappingURL=NavMenuItemElement.d.ts.map

package/dist/src/nav-menu/NavMenuItemElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavMenuItemElement.d.ts","sourceRoot":"","sources":["../../../src/nav-menu/NavMenuItemElement.ts"],"names":[],"mappings":"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"}

package/dist/src/nav-menu/NavMenuItemGroupElement.d.ts

@@ -0,0 +1,63 @@
+import { CSSResultGroup, LitElement } from "lit";
+declare const M3eNavMenuItemGroupElement_base: import("../core/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * A top-level semantic grouping of items in a navigation menu.
+ *
+ * @description
+ * The `m3e-nav-menu-item-group` is a top-level semantic grouping of items in a navigation menu.
+ * It encapsulates related items under a shared heading or label, supporting visual hierarchy and accessibility.
+ *
+ * @example
+ * The following example illustrates a navigation menu with a top-level group of menu items.
+ * ```html
+ * <m3e-nav-menu>
+ *   <m3e-nav-menu-item-group>
+ *     <m3e-heading slot="label" variant="label" size="large">Mail</m3e-heading>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="mail"></m3e-icon>
+ *       <span slot="label">Inbox</span>
+ *       <span slot="badge">24</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="send"></m3e-icon>
+ *       <span slot="label">Outbox</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="favorite"></m3e-icon>
+ *       <span slot="label">Favorites</span>
+ *     </m3e-nav-menu-item>
+ *     <m3e-nav-menu-item>
+ *       <m3e-icon slot="icon" name="delete"></m3e-icon>
+ *       <span slot="label">Trash</span>
+ *     </m3e-nav-menu-item>
+ *   </m3e-nav-menu-item-group>
+ * </m3e-nav-menu>
+ * ```
+ *
+ * @tag m3e-nav-menu-item-group
+ *
+ * @slot - Renders the items of the group.
+ * @slot label - Renders the label of the group.
+ *
+ * @cssprop --m3e-nav-menu-item-group-label-inset - Insets the label from the start edge of the group.
+ * @cssprop --m3e-nav-menu-item-group-label-space - Vertical spacing around the group's label.
+ */
+export declare class M3eNavMenuItemGroupElement extends M3eNavMenuItemGroupElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private static __nextId;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-nav-menu-item-group": M3eNavMenuItemGroupElement;
+    }
+}
+export {};
+//# sourceMappingURL=NavMenuItemGroupElement.d.ts.map

package/dist/src/nav-menu/NavMenuItemGroupElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavMenuItemGroupElement.d.ts","sourceRoot":"","sources":["../../../src/nav-menu/NavMenuItemGroupElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAK5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBACa,0BAA2B,SAAQ,+BAAyB;;IACvE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAoBpC;IAEF,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAK;IAI5C,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,MAAM,IAAI,OAAO;CA6BrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,0BAA0B,CAAC;KACvD;CACF"}

package/dist/src/nav-menu/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./NavMenuElement";
+export * from "./NavMenuItemElement";
+export * from "./NavMenuItemGroupElement";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/nav-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/nav-menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC"}

package/dist/src/nav-rail/NavRailElement.d.ts

@@ -0,0 +1,69 @@
+import { CSSResultGroup } from "lit";
+import { M3eNavBarElement, NavItemOrientation } from "@m3e/web/nav-bar";
+/**
+ * A vertical bar, typically used on larger devices, that allows a user to switch between views.
+ *
+ * @description
+ * The `m3e-nav-rail` component provides a vertical navigation rail for switching between views in
+ * an application. Designed for larger devices, it supports compact and expanded modes, interactive
+ * items, and theming via CSS custom properties.
+ *
+ * @example
+ * The following example illustrates a nav rail whose expanded state is automatically determined by the
+ * current screen size.  In addition, a toggle button is used to allow the user to manually toggle the
+ * expanded state.
+ *
+ * ```html
+ * <m3e-nav-rail id="nav-rail" mode="auto">
+ *   <m3e-icon-button toggle>
+ *     <m3e-icon name="menu"></m3e-icon>
+ *     <m3e-icon slot="selected" name="menu_open"></m3e-icon>
+ *     <m3e-nav-rail-toggle for="nav-rail"></m3e-nav-rail-toggle>
+ *   </m3e-icon-button>
+ *   <m3e-fab size="small">
+ *     <m3e-icon name="edit"></m3e-icon>
+ *     <span slot="label">Extended</span>
+ *   </m3e-fab>
+ *   <m3e-nav-item><m3e-icon slot="icon" name="news"></m3e-icon>News</m3e-nav-item>
+ *   <m3e-nav-item><m3e-icon slot="icon" name="globe"></m3e-icon>Global</m3e-nav-item>
+ *   <m3e-nav-item><m3e-icon slot="icon" name="star"></m3e-icon>For you</m3e-nav-item>
+ *   <m3e-nav-item><m3e-icon slot="icon" name="newsstand"></m3e-icon>Trending</m3e-nav-item>
+ * </m3e-nav-rail>
+ * ```
+ *
+ * @tag m3e-nav-rail
+ *
+ * @attr mode - The mode in which items in the rail are presented.
+ *
+ * @fires change - Emitted when the selected state of an item changes.
+ *
+ * @cssprop --m3e-nav-rail-top-space - Top block padding for the nav rail.
+ * @cssprop --m3e-nav-rail-bottom-space - Bottom block padding for the nav rail.
+ * @cssprop --m3e-nav-rail-compact-width - Width of the nav rail in compact mode.
+ * @cssprop --m3e-nav-rail-expanded-inline-padding - Inline padding for expanded nav rail.
+ * @cssprop --m3e-nav-rail-expanded-min-width - Minimum width of the nav rail in expanded mode.
+ * @cssprop --m3e-nav-rail-expanded-max-width - Maximum width of the nav rail in expanded mode.
+ * @cssprop --m3e-nav-rail-expanded-item-height - Height of nav items in expanded mode.
+ * @cssprop --m3e-nav-rail-button-item-space - Space below icon buttons and FABs.
+ * @cssprop --m3e-nav-rail-expanded-icon-button-inset - Inset for icon buttons in expanded mode.
+ */
+export declare class M3eNavRailElement extends M3eNavBarElement {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    constructor();
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc @internal */
+    protected _updateItems(): void;
+    /** @inheritdoc @internal */
+    protected _updateOrientation(orientation: NavItemOrientation): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-nav-rail": M3eNavRailElement;
+    }
+}
+//# sourceMappingURL=NavRailElement.d.ts.map

package/dist/src/nav-rail/NavRailElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavRailElement.d.ts","sourceRoot":"","sources":["../../../src/nav-rail/NavRailElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,qBACa,iBAAkB,SAAQ,gBAAgB;;IAoBrD,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAwCpC;;IAaF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAUrC,4BAA4B;cACT,YAAY,IAAI,IAAI;IAavC,4BAA4B;cACT,kBAAkB,CAAC,WAAW,EAAE,kBAAkB,GAAG,IAAI;CAI7E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,iBAAiB,CAAC;KACnC;CACF"}

package/dist/src/nav-rail/NavRailToggleElement.d.ts

@@ -0,0 +1,46 @@
+import { ActionElementBase } from "@m3e/web/core";
+declare const M3eNavRailToggleElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").HtmlForMixin> & typeof ActionElementBase;
+/**
+ * An element, nested within a clickable element, used to toggle the expanded state of a navigation rail.
+ *
+ * @example
+ * The following example illustrates a nav rail whose expanded state is automatically determined by the
+ * current screen size.  In addition, a toggle button is used to allow the user to manually toggle the
+ * expanded state.
+ *
+ * ```html
+ * <m3e-nav-rail id="nav-rail" mode="auto">
+ *   <m3e-icon-button toggle>
+ *     <m3e-icon name="menu"></m3e-icon>
+ *     <m3e-icon slot="selected" name="menu_open"></m3e-icon>
+ *     <m3e-nav-rail-toggle for="nav-rail"></m3e-nav-rail-toggle>
+ *   </m3e-icon-button>
+ *   <m3e-fab size="small">
+ *     <m3e-icon name="edit"></m3e-icon>
+ *     <span slot="label">Extended</span>
+ *   </m3e-fab>
+ *   <m3e-nav-item><m3e-icon slot="icon" name="news"></m3e-icon>News</m3e-nav-item>
+ *   <m3e-nav-item><m3e-icon slot="icon" name="globe"></m3e-icon>Global</m3e-nav-item>
+ *   <m3e-nav-item><m3e-icon slot="icon" name="star"></m3e-icon>For you</m3e-nav-item>
+ *   <m3e-nav-item><m3e-icon slot="icon" name="newsstand"></m3e-icon>Trending</m3e-nav-item>
+ * </m3e-nav-rail>
+ * ```
+ *
+ * @tag m3e-nav-rail-toggle
+ */
+export declare class M3eNavRailToggleElement extends M3eNavRailToggleElement_base {
+    #private;
+    /** @inheritdoc */
+    attach(control: HTMLElement): void;
+    /** @inheritdoc */
+    detach(): void;
+    /** @inheritdoc */
+    _onClick(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-nav-rail-toggle": M3eNavRailToggleElement;
+    }
+}
+export {};
+//# sourceMappingURL=NavRailToggleElement.d.ts.map

package/dist/src/nav-rail/NavRailToggleElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavRailToggleElement.d.ts","sourceRoot":"","sources":["../../../src/nav-rail/NavRailToggleElement.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,eAAe,CAAC;;AAK/E;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,uBAAwB,SAAQ,4BAA0B;;IAOrE,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAW3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAevB,kBAAkB;IACT,QAAQ,IAAI,IAAI;CAuB1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,uBAAuB,CAAC;KAChD;CACF"}

package/dist/src/nav-rail/index.d.ts

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

package/dist/src/nav-rail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/nav-rail/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC"}

package/dist/src/option/OptGroupElement.d.ts

@@ -0,0 +1,42 @@
+import { CSSResultGroup, LitElement } from "lit";
+declare const M3eOptGroupElement_base: import("../core/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * Groups options under a subheading.
+ *
+ * @description
+ * The `m3e-optgroup` component organizes related options within an option list,
+ * providing visual and semantic grouping through a customizable label. It manages `aria-labelledby`
+ * associations automatically and applies Material Design 3 typography and spacing conventions to
+ * the group label. The component maintains proper semantic structure by utilizing the ARIA `group` role,
+ * ensuring that assistive technologies correctly interpret the hierarchical relationship between the label
+ * and contained options.
+ *
+ * @tag m3e-optgroup
+ *
+ * @slot - Renders the options of the group.
+ * @slot label - Renders the label of the group.
+ *
+ * @cssprop --m3e-option-height - The height of the group label container.
+ * @cssprop --m3e-option-font-size - The font size of the group label.
+ * @cssprop --m3e-option-font-weight - The font weight of the group label.
+ * @cssprop --m3e-option-line-height - The line height of the group label.
+ * @cssprop --m3e-option-tracking - The letter spacing of the group label.
+ * @cssprop --m3e-option-padding-end - The right padding of the label.
+ * @cssprop --m3e-option-padding-start - The left padding of the label.
+ * @cssprop --m3e-option-color - The text color of the group label.
+ */
+export declare class M3eOptGroupElement extends M3eOptGroupElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private static __nextId;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-optgroup": M3eOptGroupElement;
+    }
+}
+export {};
+//# sourceMappingURL=OptGroupElement.d.ts.map

package/dist/src/option/OptGroupElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptGroupElement.d.ts","sourceRoot":"","sources":["../../../src/option/OptGroupElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAM5D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,kBAAmB,SAAQ,uBAAyB;;IAC/D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAgBpC;IAEF,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAK;IAI5C,kBAAkB;cACC,MAAM,IAAI,OAAO;CA0BrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}

package/dist/src/option/OptionElement.d.ts

@@ -0,0 +1,79 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { M3eFocusRingElement, M3eStateLayerElement } from "@m3e/web/core";
+import { typeaheadLabel } from "@m3e/web/core/a11y";
+declare const M3eOptionElement_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 & typeof LitElement;
+/**
+ * An option that can be selected.
+ *
+ * @description
+ * The `m3e-option` component represents an individual selectable item within an option list,
+ * adhering to Material Design 3 specifications. It provides visual feedback through state layers and ripple effects,
+ * supports single and multiple selection modes, and includes comprehensive accessibility features including
+ * keyboard navigation and focus management. The component automatically manages its visual appearance based on
+ * selection and disabled states, with configurable styling for interactive and non-interactive variants.
+ *
+ * @tag m3e-option
+ *
+ * @slot - Renders the label of the option.
+ *
+ * @attr disabled - Whether the element is disabled.
+ * @attr selected - Whether the element is selected.
+ * @attr value - A string representing the value of the option.
+ *
+ * @cssprop --m3e-option-container-height - The height of the option container.
+ * @cssprop --m3e-option-color - The text color of the option.
+ * @cssprop --m3e-option-container-hover-color - The color for the hover state layer.
+ * @cssprop --m3e-option-container-focus-color - The color for the focus state layer.
+ * @cssprop --m3e-option-ripple-color - The color of the ripple effect.
+ * @cssprop --m3e-option-selected-color - The text color when the option is selected.
+ * @cssprop --m3e-option-selected-container-color - The background color when the option is selected.
+ * @cssprop --m3e-option-selected-container-hover-color - The hover color for the selected state layer.
+ * @cssprop --m3e-option-selected-container-focus-color - The focus color for the selected state layer.
+ * @cssprop --m3e-option-selected-ripple-color - The ripple color when the option is selected.
+ * @cssprop --m3e-option-disabled-color - The text color when the option is disabled.
+ * @cssprop --m3e-option-disabled-opacity - The opacity level applied to the disabled text color.
+ * @cssprop --m3e-option-icon-label-space - The spacing between the icon and label.
+ * @cssprop --m3e-option-padding-start - The left padding of the option content.
+ * @cssprop --m3e-option-padding-end - The right padding of the option content.
+ * @cssprop --m3e-option-label-text-font-size - The font size of the option label.
+ * @cssprop --m3e-option-label-text-font-weight - The font weight of the option label.
+ * @cssprop --m3e-option-label-text-line-height - The line height of the option label.
+ * @cssprop --m3e-option-label-text-tracking - The letter spacing of the option label.
+ * @cssprop --m3e-option-focus-ring-shape - The corner radius of the focus ring.
+ * @cssprop --m3e-option-icon-size - The size of the option icons.
+ * @cssprop --m3e-option-shape - Base shape of the option.
+ * @cssprop --m3e-option-selected-shape - Shape used for a selected option.
+ * @cssprop --m3e-option-first-child-shape - Shape for the first option in a list.
+ * @cssprop --m3e-option-last-child-shape - Shape for the last option in a list.
+
+ */
+export declare class M3eOptionElement extends M3eOptionElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @internal */ readonly focusRing?: M3eFocusRingElement;
+    /** @internal */ readonly stateLayer?: M3eStateLayerElement;
+    /** @private */ private readonly _ripple?;
+    /** A string representing the value of the option. */
+    get value(): string;
+    set value(value: string);
+    /** @internal */
+    [typeaheadLabel](): string;
+    /** Whether the option represents an empty option. */
+    get isEmpty(): boolean;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-option": M3eOptionElement;
+    }
+}
+export {};
+//# sourceMappingURL=OptionElement.d.ts.map