@m3e/web 2.0.0

package/dist/src/menu/MenuItemElement.d.ts

@@ -0,0 +1,130 @@
+import type { M3eMenuElement } from "./MenuElement";
+import { MenuItemElementBase } from "./MenuItemElementBase";
+declare const M3eMenuItemElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").LinkButtonMixin> & import("../core/shared/mixins/Constructor").Constructor & typeof MenuItemElementBase;
+/**
+ * An item of a menu.
+ *
+ * @description
+ * The `m3e-menu-item` component represents a single actionable item within a menu, supporting standard
+ * click behavior, optional link semantics, and flexible icon placement for navigation, commands, or
+ * contextual actions. It behaves as a button or link depending on its attributes, and can trigger a submenu
+ * when a nested `m3e-menu-trigger` is present—enabling hierarchical flows.
+ *
+ * @example
+ * The following example illustrates a basic menu.  The `m3e-menu-trigger` is used to trigger a `m3e-menu` specified
+ * by the `for` attribute when its parenting element is activated.
+ * ```html
+ * <m3e-button>
+ *   <m3e-menu-trigger for="menu1">Basic menu</m3e-menu-trigger>
+ * </m3e-button>
+ * <m3e-menu id="menu1">
+ *   <m3e-menu-item>Apple</m3e-menu-item>
+ *   <m3e-menu-item>Apricot</m3e-menu-item>
+ *   <m3e-menu-item>Avocado</m3e-menu-item>
+ *   <m3e-menu-item>Green Apple</m3e-menu-item>
+ *   <m3e-menu-item>Green Grapes</m3e-menu-item>
+ *   <m3e-menu-item>Olive</m3e-menu-item>
+ *   <m3e-menu-item>Orange</m3e-menu-item>
+ * </m3e-menu>
+ * ```
+ *
+ * @example
+ * The next example illustrates nested menus.  Submenus are triggered by placing a `m3e-menu-trigger` inside a `m3e-menu-item`.
+ * ```html
+ * <m3e-button>
+ *   <m3e-menu-trigger for="menu2">Nested menus</m3e-menu-trigger>
+ * </m3e-button>
+ * <m3e-menu id="menu2">
+ *   <m3e-menu-item>
+ *     <m3e-menu-trigger for="menu3">Fruits with A</m3e-menu-trigger>
+ *   </m3e-menu-item>
+ *   <m3e-menu-item>Grapes</m3e-menu-item>
+ *   <m3e-menu-item>Olive</m3e-menu-item>
+ *   <m3e-menu-item>Orange</m3e-menu-item>
+ * </m3e-menu>
+ * <m3e-menu id="menu3">
+ *   <m3e-menu-item>Apricot</m3e-menu-item>
+ *   <m3e-menu-item>Avocado</m3e-menu-item>
+ *   <m3e-menu-item>
+ *     <m3e-menu-trigger for="menu4">Apples</m3e-menu-trigger>
+ *   </m3e-menu-item>
+ * </m3e-menu>
+ * <m3e-menu id="menu4">
+ *   <m3e-menu-item>Fuji</m3e-menu-item>
+ *   <m3e-menu-item>Granny Smith</m3e-menu-item>
+ *   <m3e-menu-item>Red Delicious</m3e-menu-item>
+ * </m3e-menu>
+ * ```
+ *
+ * @tag m3e-menu-item
+ *
+ * @slot - Renders the label of the item.
+ * @slot icon - Renders an icon before the items's label.
+ * @slot trailing-icon - Renders an icon after the item's label.
+ *
+ * @attr disabled - Whether the element is disabled.
+ * @attr download - Whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.
+ * @attr href - The URL to which the link button points.
+ * @attr rel - The relationship between the `target` of the link button and the document.
+ * @attr target - The target of the link button.
+ *
+ * @fires click - Emitted when the element is clicked.
+ *
+ * @cssprop --m3e-menu-item-container-height - Height of the menu item container.
+ * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.
+ * @cssprop --m3e-menu-item-container-hover-color - State layer hover color for unselected items.
+ * @cssprop --m3e-menu-item-container-focus-color - State layer focus color for unselected items.
+ * @cssprop --m3e-menu-item-ripple-color - Ripple color for unselected items.
+ * @cssprop --m3e-menu-item-selected-color - Text color for selected items.
+ * @cssprop --m3e-menu-item-selected-container-color - Background color for selected items.
+ * @cssprop --m3e-menu-item-selected-container-hover-color - State layer hover color for selected items.
+ * @cssprop --m3e-menu-item-selected-container-focus-color - State layer focus color for selected items.
+ * @cssprop --m3e-menu-item-selected-ripple-color - Ripple color for selected items.
+ * @cssprop --m3e-menu-item-active-state-layer-color - State layer color for expanded items.
+ * @cssprop --m3e-menu-item-active-state-layer-opacity - State layer opacity for expanded items.
+ * @cssprop --m3e-menu-item-disabled-color - Base color for disabled items.
+ * @cssprop --m3e-menu-item-disabled-opacity - Opacity percentage for disabled item color mix.
+ * @cssprop --m3e-vibrant-menu-item-color - Text color for unselected, enabled menu items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-container-hover-color - State layer hover color for unselected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-container-focus-color - State layer focus color for unselected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-ripple-color - Ripple color for unselected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-color - Text color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-container-color - Background color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-container-hover-color - State layer hover color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-container-focus-color - State layer focus color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-ripple-color - Ripple color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-active-state-layer-color - State layer color for expanded items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-disabled-color - Base color for disabled items for vibrant variant.
+ * @cssprop --m3e-menu-item-icon-label-space - Horizontal gap between icon and content.
+ * @cssprop --m3e-menu-item-padding-start - Start padding for the item wrapper.
+ * @cssprop --m3e-menu-item-padding-end - End padding for the item wrapper.
+ * @cssprop --m3e-menu-item-label-text-font-size - Font size for menu item text.
+ * @cssprop --m3e-menu-item-label-text-font-weight - Font weight for menu item text.
+ * @cssprop --m3e-menu-item-label-text-line-height - Line height for menu item text.
+ * @cssprop --m3e-menu-item-label-text-tracking - Letter spacing for menu item text.
+ * @cssprop --m3e-menu-item-focus-ring-shape - Border radius for the focus ring.
+ * @cssprop --m3e-menu-item-icon-size - Font size for leading and trailing icons.
+ * @cssprop --m3e-menu-item-shape - Base shape of the menu item.
+ * @cssprop --m3e-menu-item-first-child-shape - Shape for the first menu item in a menu.
+ * @cssprop --m3e-menu-item-last-child-shape - Shape for the last menu item in a menu.
+ */
+export declare class M3eMenuItemElement extends M3eMenuItemElement_base {
+    #private;
+    /** @private */ private _hasSubmenu;
+    constructor();
+    /** The submenu triggered by the item. */
+    get submenu(): M3eMenuElement | null;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @internal @inheritdoc */
+    protected _renderContent(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-menu-item": M3eMenuItemElement;
+    }
+}
+export {};
+//# sourceMappingURL=MenuItemElement.d.ts.map

package/dist/src/menu/MenuItemElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemElement.d.ts","sourceRoot":"","sources":["../../../src/menu/MenuItemElement.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAG5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AACH,qBACa,kBAAmB,SAAQ,uBAAiD;;IAKvF,eAAe,CAAU,OAAO,CAAC,WAAW,CAAS;;IAiBrD,yCAAyC;IACzC,IAAI,OAAO,IAAI,cAAc,GAAG,IAAI,CAEnC;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAQlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAQrC,4BAA4B;cACT,cAAc,IAAI,OAAO;CAyE7C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}

package/dist/src/menu/MenuItemElementBase.d.ts

@@ -0,0 +1,21 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import type { M3eMenuElement } from "./MenuElement";
+declare const MenuItemElementBase_base: import("../core/shared/mixins/Constructor").Constructor & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").DisabledMixin> & typeof LitElement;
+/** A base implementation for an item of a menu. This class must be inherited. */
+export declare abstract class MenuItemElementBase extends MenuItemElementBase_base {
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private readonly _focusRing?;
+    /** @private */ private readonly _stateLayer?;
+    /** @private */ private readonly _ripple?;
+    /** The menu to which this item belongs. */
+    get menu(): M3eMenuElement | null;
+    /** @inheritdoc */
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    render(): unknown;
+    /** @internal Renders the content of the item. */
+    protected abstract _renderContent(): unknown;
+}
+export {};
+//# sourceMappingURL=MenuItemElementBase.d.ts.map

package/dist/src/menu/MenuItemElementBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemElementBase.d.ts","sourceRoot":"","sources":["../../../src/menu/MenuItemElementBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;AAgBhG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAEpD,iFAAiF;AACjF,8BAAsB,mBAAoB,SAAQ,wBAEjD;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAyIpC;IAEF,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACxF,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;IAC3F,eAAe,CAAmB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAmB;IAE9E,2CAA2C;IAC3C,IAAI,IAAI,IAAI,cAAc,GAAG,IAAI,CAEhC;IAED,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK/E,kBAAkB;IACT,MAAM,IAAI,OAAO;IAW1B,iDAAiD;IACjD,SAAS,CAAC,QAAQ,CAAC,cAAc,IAAI,OAAO;CAC7C"}

package/dist/src/menu/MenuItemGroupElement.d.ts

@@ -0,0 +1,27 @@
+import { CSSResultGroup, LitElement } from "lit";
+declare const M3eMenuItemGroupElement_base: import("../core/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * Groups related items (such a radios) in a menu.
+ *
+ * @description
+ * The `m3e-menu-item-group` component groups related items within a menu, establishing a shared
+ * context for interaction and selection. It enables separation of concerns—such as organizing radio
+ * items into mutually exclusive sets.
+ *
+ * @tag m3e-menu-item-group
+ *
+ * @slot - Renders the contents of the group.
+ */
+export declare class M3eMenuItemGroupElement extends M3eMenuItemGroupElement_base {
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-menu-item-group": M3eMenuItemGroupElement;
+    }
+}
+export {};
+//# sourceMappingURL=MenuItemGroupElement.d.ts.map

package/dist/src/menu/MenuItemGroupElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemGroupElement.d.ts","sourceRoot":"","sources":["../../../src/menu/MenuItemGroupElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AAG5D;;;;;;;;;;;GAWG;AACH,qBACa,uBAAwB,SAAQ,4BAAyB;IACpE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAIpC;IAEF,kBAAkB;cACC,MAAM,IAAI,OAAO;CAGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,uBAAuB,CAAC;KAChD;CACF"}

package/dist/src/menu/MenuItemRadioElement.d.ts

@@ -0,0 +1,95 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { MenuItemElementBase } from "./MenuItemElementBase";
+declare const M3eMenuItemRadioElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").CheckedMixin> & import("../core/shared/mixins/Constructor").Constructor & typeof MenuItemElementBase;
+/**
+ * An item of a menu which supports a mutually exclusive checkable state.
+ *
+ * @description
+ * The `m3e-menu-item-radio` component represents a selectable menu item that participates in a mutually exclusive group.
+ * It reflects a singular choice within a shared context—such as sort order, theme selection, or view mode—and updates
+ * group state when selected. This component can be nested within an `m3e-menu-item-group`, allowing multiple exclusive
+ * groups to coexist within a single menu.
+ *
+ * @example
+ * The following example illustrates use of the `m3e-menu-item-radio` in a `m3e-menu` to allow a user to select a sort order.
+ * The `m3e-menu-trigger` is used to trigger a `m3e-menu` specified by the `for` attribute when its parenting element is activated.
+ * ```html
+ * <m3e-button>
+ *  <m3e-menu-trigger for="menu">Sort order</m3e-menu-trigger>
+ * </m3e-button>
+ * <m3e-menu id="menu">
+ *  <m3e-menu-item-radio>Ascending</m3e-menu-item-radio>
+ *  <m3e-menu-item-radio>Descending</m3e-menu-item-radio>
+ * </m3e-menu>
+ * ```
+ *
+ * @tag m3e-menu-item-radio
+ *
+ * @slot - Renders the label of the item.
+ * @slot icon - Renders an icon before the items's label.
+ * @slot trailing-icon - Renders an icon after the item's label.
+ *
+ * @attr disabled - Whether the element is disabled.
+ * @attr checked - Whether the element is checked.
+ *
+ * @fires click - Emitted when the element is clicked.
+ *
+ * @cssprop --m3e-menu-item-container-height - Height of the menu item container.
+ * @cssprop --m3e-menu-item-color - Text color for unselected, enabled menu items.
+ * @cssprop --m3e-menu-item-container-hover-color - State layer hover color for unselected items.
+ * @cssprop --m3e-menu-item-container-focus-color - State layer focus color for unselected items.
+ * @cssprop --m3e-menu-item-ripple-color - Ripple color for unselected items.
+ * @cssprop --m3e-menu-item-selected-color - Text color for selected items.
+ * @cssprop --m3e-menu-item-selected-container-color - Background color for selected items.
+ * @cssprop --m3e-menu-item-selected-container-hover-color - State layer hover color for selected items.
+ * @cssprop --m3e-menu-item-selected-container-focus-color - State layer focus color for selected items.
+ * @cssprop --m3e-menu-item-selected-ripple-color - Ripple color for selected items.
+ * @cssprop --m3e-menu-item-active-state-layer-color - State layer color for expanded items.
+ * @cssprop --m3e-menu-item-active-state-layer-opacity - State layer opacity for expanded items.
+ * @cssprop --m3e-menu-item-disabled-color - Base color for disabled items.
+ * @cssprop --m3e-menu-item-disabled-opacity - Opacity percentage for disabled item color mix.
+ * @cssprop --m3e-vibrant-menu-item-color - Text color for unselected, enabled menu items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-container-hover-color - State layer hover color for unselected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-container-focus-color - State layer focus color for unselected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-ripple-color - Ripple color for unselected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-color - Text color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-container-color - Background color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-container-hover-color - State layer hover color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-container-focus-color - State layer focus color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-selected-ripple-color - Ripple color for selected items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-active-state-layer-color - State layer color for expanded items for vibrant variant.
+ * @cssprop --m3e-vibrant-menu-item-disabled-color - Base color for disabled items for vibrant variant
+ * @cssprop --m3e-menu-item-icon-label-space - Horizontal gap between icon and content.
+ * @cssprop --m3e-menu-item-padding-start - Start padding for the item wrapper.
+ * @cssprop --m3e-menu-item-padding-end - End padding for the item wrapper.
+ * @cssprop --m3e-menu-item-label-text-font-size - Font size for menu item text.
+ * @cssprop --m3e-menu-item-label-text-font-weight - Font weight for menu item text.
+ * @cssprop --m3e-menu-item-label-text-line-height - Line height for menu item text.
+ * @cssprop --m3e-menu-item-label-text-tracking - Letter spacing for menu item text.
+ * @cssprop --m3e-menu-item-focus-ring-shape - Border radius for the focus ring.
+ * @cssprop --m3e-menu-item-icon-size - Font size for leading and trailing icons.
+ * @cssprop --m3e-menu-item-shape - Base shape of the menu item.
+ * @cssprop --m3e-menu-item-selected-shape - Shape used for a selected menu item.
+ * @cssprop --m3e-menu-item-first-child-shape - Shape for the first menu item in a menu.
+ * @cssprop --m3e-menu-item-last-child-shape - Shape for the last menu item in a menu.
+ */
+export declare class M3eMenuItemRadioElement extends M3eMenuItemRadioElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @internal @inheritdoc */
+    protected _renderContent(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-menu-item-radio": M3eMenuItemRadioElement;
+    }
+}
+export {};
+//# sourceMappingURL=MenuItemRadioElement.d.ts.map

package/dist/src/menu/MenuItemRadioElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemRadioElement.d.ts","sourceRoot":"","sources":["../../../src/menu/MenuItemRadioElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAO3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,qBACa,uBAAwB,SAAQ,4BAAmD;;IAC9F,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAAqC;IAS3E,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IASlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IASrC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAcxE,4BAA4B;cACT,cAAc,IAAI,OAAO;CAuD7C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,uBAAuB,CAAC;KAChD;CACF"}

package/dist/src/menu/MenuPosition.d.ts

@@ -0,0 +1,5 @@
+/** Specifies the possible positions for a menu, on the x-axis, relative to its trigger. */
+export type MenuPositionX = "before" | "after";
+/** Specifies the possible positions for a menu, on the x-axis, relative to its trigger. */
+export type MenuPositionY = "above" | "below";
+//# sourceMappingURL=MenuPosition.d.ts.map

package/dist/src/menu/MenuPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuPosition.d.ts","sourceRoot":"","sources":["../../../src/menu/MenuPosition.ts"],"names":[],"mappings":"AAAA,2FAA2F;AAC3F,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/C,2FAA2F;AAC3F,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,CAAC"}

package/dist/src/menu/MenuTriggerElement.d.ts

@@ -0,0 +1,78 @@
+import { ActionElementBase } from "@m3e/web/core";
+import type { M3eMenuElement } from "./MenuElement";
+declare const M3eMenuTriggerElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").HtmlForMixin> & typeof ActionElementBase;
+/**
+ * An element, nested within a clickable element, used to open a menu.
+ *
+ * @description
+ * The `m3e-menu-trigger` component is used to open a menu when nested within a clickable element
+ * such as a button or menu item. It anchors the menu to its invoker, enabling contextual flows and
+ * nested hierarchies.
+ *
+ * @example
+ * The following example illustrates a basic menu.  The `m3e-menu-trigger` is used to trigger a `m3e-menu` specified
+ * by the `for` attribute when its parenting element is activated.
+ * ```html
+ * <m3e-button>
+ *   <m3e-menu-trigger for="menu1">Basic menu</m3e-menu-trigger>
+ * </m3e-button>
+ * <m3e-menu id="menu1">
+ *   <m3e-menu-item>Apple</m3e-menu-item>
+ *   <m3e-menu-item>Apricot</m3e-menu-item>
+ *   <m3e-menu-item>Avocado</m3e-menu-item>
+ *   <m3e-menu-item>Green Apple</m3e-menu-item>
+ *   <m3e-menu-item>Green Grapes</m3e-menu-item>
+ *   <m3e-menu-item>Olive</m3e-menu-item>
+ *   <m3e-menu-item>Orange</m3e-menu-item>
+ * </m3e-menu>
+ * ```
+ *
+ * @example
+ * The next example illustrates nested menus.  Submenus are triggered by placing a `m3e-menu-trigger` inside a `m3e-menu-item`.
+ * ```html
+ * <m3e-button>
+ *   <m3e-menu-trigger for="menu2">Nested menus</m3e-menu-trigger>
+ * </m3e-button>
+ * <m3e-menu id="menu2">
+ *   <m3e-menu-item>
+ *     <m3e-menu-trigger for="menu3">Fruits with A</m3e-menu-trigger>
+ *   </m3e-menu-item>
+ *   <m3e-menu-item>Grapes</m3e-menu-item>
+ *   <m3e-menu-item>Olive</m3e-menu-item>
+ *   <m3e-menu-item>Orange</m3e-menu-item>
+ * </m3e-menu>
+ * <m3e-menu id="menu3">
+ *   <m3e-menu-item>Apricot</m3e-menu-item>
+ *   <m3e-menu-item>Avocado</m3e-menu-item>
+ *   <m3e-menu-item>
+ *     <m3e-menu-trigger for="menu4">Apples</m3e-menu-trigger>
+ *   </m3e-menu-item>
+ * </m3e-menu>
+ * <m3e-menu id="menu4">
+ *   <m3e-menu-item>Fuji</m3e-menu-item>
+ *   <m3e-menu-item>Granny Smith</m3e-menu-item>
+ *   <m3e-menu-item>Red Delicious</m3e-menu-item>
+ * </m3e-menu>
+ * ```
+ *
+ * @tag m3e-menu-trigger
+ *
+ * @slot - Renders the contents of the trigger.
+ */
+export declare class M3eMenuTriggerElement extends M3eMenuTriggerElement_base {
+    /** The menu triggered by the element. */
+    get menu(): M3eMenuElement | null;
+    /** @inheritdoc */
+    attach(control: HTMLElement): void;
+    /** @inheritdoc */
+    detach(): void;
+    /** @inheritdoc */
+    _onClick(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-menu-trigger": M3eMenuTriggerElement;
+    }
+}
+export {};
+//# sourceMappingURL=MenuTriggerElement.d.ts.map

package/dist/src/menu/MenuTriggerElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTriggerElement.d.ts","sourceRoot":"","sources":["../../../src/menu/MenuTriggerElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAW,MAAM,eAAe,CAAC;AAG3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,qBACa,qBAAsB,SAAQ,0BAA0B;IACnE,yCAAyC;IACzC,IAAI,IAAI,IAAI,cAAc,GAAG,IAAI,CAEhC;IAED,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAkB3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAcvB,kBAAkB;IACT,QAAQ,IAAI,IAAI;CAS1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}

package/dist/src/menu/MenuVariant.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible appearance variants of a menu. */
+export type MenuVariant = "standard" | "vibrant";
+//# sourceMappingURL=MenuVariant.d.ts.map

package/dist/src/menu/MenuVariant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuVariant.d.ts","sourceRoot":"","sources":["../../../src/menu/MenuVariant.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC"}

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

@@ -0,0 +1,9 @@
+export * from "./MenuElement";
+export * from "./MenuItemCheckboxElement";
+export * from "./MenuItemElement";
+export * from "./MenuItemGroupElement";
+export * from "./MenuItemRadioElement";
+export * from "./MenuPosition";
+export * from "./MenuTriggerElement";
+export * from "./MenuVariant";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC"}

package/dist/src/nav-bar/NavBarElement.d.ts

@@ -0,0 +1,73 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import { SelectionManager, selectionManager } from "@m3e/web/core/a11y";
+import { M3eNavItemElement } from "./NavItemElement";
+import { NavItemOrientation } from "./NavItemOrientation";
+import { NavBarMode } from "./NavBarMode";
+declare const M3eNavBarElement_base: import("../core/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * A horizontal bar, typically used on smaller devices, that allows a user to switch between 3-5 views.
+ *
+ * @description
+ * The `m3e-nav-bar` component provides a horizontal navigation bar for switching between primary destinations in
+ * an application. Designed for smaller devices, it supports 3-5 interactive items, orientation, and theming
+ * via CSS custom properties.
+ *
+ * @example
+ * The following example illustrates a nav bar with vertically oriented items.
+ * ```html
+ * <m3e-nav-bar>
+ *   <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-bar>
+ * ```
+ *
+ * @tag m3e-nav-bar
+ *
+ * @slot - Renders the items of the bar.
+ *
+ * @attr mode - The mode in which items in the bar are presented.
+ *
+ * @fires change - Emitted when the selected state of an item changes.
+ *
+ * @cssprop --m3e-nav-bar-height - Height of the navigation bar.
+ * @cssprop --m3e-nav-bar-container-color - Background color of the navigation bar container.
+ * @cssprop --m3e-nav-bar-vertical-item-width - Minimum width of vertical nav items.
+ */
+export declare class M3eNavBarElement extends M3eNavBarElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @internal */ readonly [selectionManager]: SelectionManager<M3eNavItemElement>;
+    /** @private */ private _mode?;
+    /**
+     * The mode in which items in the bar are presented.
+     * @default "compact"
+     */
+    mode: NavBarMode;
+    /** The items of the bar. */
+    get items(): readonly M3eNavItemElement[];
+    /** The selected item. */
+    get selected(): M3eNavItemElement | null;
+    /** The current mode applied to the bar. */
+    get currentMode(): Exclude<NavBarMode, "auto">;
+    set currentMode(value: Exclude<NavBarMode, "auto">);
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+    /** @internal */
+    protected _updateItems(): void;
+    /** @internal */
+    protected _updateOrientation(orientation: NavItemOrientation): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-nav-bar": M3eNavBarElement;
+    }
+}
+export {};
+//# sourceMappingURL=NavBarElement.d.ts.map

package/dist/src/nav-bar/NavBarElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBarElement.d.ts","sourceRoot":"","sources":["../../../src/nav-bar/NavBarElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5E,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,gBAAiB,SAAQ,qBAA8B;;IAClE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAoBpC;IAEF,gBAAgB,CAAC,QAAQ,CAAC,CAAC,gBAAgB,CAAC,sCAAqE;IAEjH,eAAe,CAAU,OAAO,CAAC,KAAK,CAAC,CAA8B;IAErE;;;OAGG;IAC0B,IAAI,EAAE,UAAU,CAAa;IAE1D,4BAA4B;IAC5B,IAAI,KAAK,IAAI,SAAS,iBAAiB,EAAE,CAExC;IAED,yBAAyB;IACzB,IAAI,QAAQ,IAAI,iBAAiB,GAAG,IAAI,CAEvC;IAED,2CAA2C;IAC3C,IAAI,WAAW,IAAI,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,CAE7C;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,EAEjD;IAED,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAqBlE,kBAAkB;cACC,MAAM,IAAI,OAAO;IAkBpC,gBAAgB;IAChB,SAAS,CAAC,YAAY,IAAI,IAAI;IAM9B,gBAAgB;IAChB,SAAS,CAAC,kBAAkB,CAAC,WAAW,EAAE,kBAAkB,GAAG,IAAI;CAGpE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,gBAAgB,CAAC;KACjC;CACF"}

package/dist/src/nav-bar/NavBarMode.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible modes in which to present items in a navigation bar. */
+export type NavBarMode = "compact" | "expanded" | "auto";
+//# sourceMappingURL=NavBarMode.d.ts.map

package/dist/src/nav-bar/NavBarMode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBarMode.d.ts","sourceRoot":"","sources":["../../../src/nav-bar/NavBarMode.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC"}

package/dist/src/nav-bar/NavItemElement.d.ts

@@ -0,0 +1,105 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import type { M3eNavBarElement } from "./NavBarElement";
+import { NavItemOrientation } from "./NavItemOrientation";
+declare const M3eNavItemElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").LinkButtonMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").SelectedMixin> & import("../core/shared/mixins/Constructor").Constructor & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").DisabledInteractiveMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").DisabledMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & typeof LitElement;
+/**
+ * An item, placed in a navigation bar or rail, used to navigate to destinations in an application.
+ *
+ * @description
+ * The `m3e-nav-item` component represents an interactive navigation item for use in navigation bars
+ * or rails. Designed according to Material 3 principles, it supports icon and label slots, selection state,
+ * orientation, and extensive theming via CSS custom properties.
+ *
+ * @example
+ * The following example illustrates a nav bar with vertically oriented items.
+ * ```html
+ * <m3e-nav-bar>
+ *   <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-bar>
+ * ```
+ *
+ * @tag m3e-nav-item
+ *
+ * @slot - 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.
+ *
+ * @attr disabled - A value indicating whether the element is disabled.
+ * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.
+ * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.
+ * @attr href - The URL to which the link button points.
+ * @attr orientation - The layout orientation of the item.
+ * @attr rel - The relationship between the `target` of the link button and the document.
+ * @attr selected - A value indicating whether the element is selected.
+ * @attr target - The target of the link button.
+ *
+ * @fires input - Emitted when the selected state changes.
+ * @fires change - Emitted when the selected state changes.
+ * @fires click - Emitted when the element is clicked.
+ *
+ * @cssprop --m3e-nav-item-label-text-font-size - Font size for the label text.
+ * @cssprop --m3e-nav-item-label-text-font-weight - Font weight for the label text.
+ * @cssprop --m3e-nav-item-label-text-line-height - Line height for the label text.
+ * @cssprop --m3e-nav-item-label-text-tracking - Letter spacing for the label text.
+ * @cssprop --m3e-nav-item-shape - Border radius of the nav item.
+ * @cssprop --m3e-nav-item-icon-size - Size of the icon.
+ * @cssprop --m3e-nav-item-spacing - Spacing between icon and label.
+ * @cssprop --m3e-nav-item-inactive-label-text-color - Color of the label text when inactive.
+ * @cssprop --m3e-nav-item-inactive-icon-color - Color of the icon when inactive.
+ * @cssprop --m3e-nav-item-inactive-hover-state-layer-color - State layer color on hover when inactive.
+ * @cssprop --m3e-nav-item-inactive-focus-state-layer-color - State layer color on focus when inactive.
+ * @cssprop --m3e-nav-item-inactive-pressed-state-layer-color - State layer color on press when inactive.
+ * @cssprop --m3e-nav-item-active-label-text-color - Color of the label text when active/selected.
+ * @cssprop --m3e-nav-item-active-icon-color - Color of the icon when active/selected.
+ * @cssprop --m3e-nav-item-active-container-color - Container color when active/selected.
+ * @cssprop --m3e-nav-item-active-hover-state-layer-color - State layer color on hover when active.
+ * @cssprop --m3e-nav-item-active-focus-state-layer-color - State layer color on focus when active.
+ * @cssprop --m3e-nav-item-active-pressed-state-layer-color - State layer color on press when active.
+ * @cssprop --m3e-nav-item-focus-ring-shape - Border radius for the focus ring.
+ * @cssprop --m3e-nav-item-disabled-label-text-color - Color of the label text when disabled.
+ * @cssprop --m3e-nav-item-disabled-label-text-opacity - Opacity of the label text when disabled.
+ * @cssprop --m3e-nav-item-disabled-icon-color - Color of the icon when disabled.
+ * @cssprop --m3e-nav-item-disabled-icon-opacity - Opacity of the icon when disabled.
+ * @cssprop --m3e-horizontal-nav-item-padding - Padding for horizontal orientation.
+ * @cssprop --m3e-horizontal-nav-item-active-indicator-height - Height of the active indicator in horizontal orientation.
+ * @cssprop --m3e-vertical-nav-item-active-indicator-width - Width of the active indicator in vertical orientation.
+ * @cssprop --m3e-vertical-nav-item-active-indicator-height - Height of the active indicator in vertical orientation.
+ * @cssprop --m3e-vertical-nav-item-active-indicator-margin - Margin for the active indicator in vertical orientation.
+ */
+export declare class M3eNavItemElement extends M3eNavItemElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private readonly _focusRing?;
+    /** @private */ private readonly _stateLayer?;
+    /** @private */ private readonly _ripple?;
+    /**
+     * The layout orientation of the item.
+     * @default "vertical"
+     */
+    orientation: NavItemOrientation;
+    /** The navigation bar to which this item belongs. */
+    get navBar(): M3eNavBarElement | null;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    protected update(changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected updated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected firstUpdated(_changedProperties: PropertyValues<this>): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-nav-item": M3eNavItemElement;
+    }
+}
+export {};
+//# sourceMappingURL=NavItemElement.d.ts.map

package/dist/src/nav-bar/NavItemElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItemElement.d.ts","sourceRoot":"","sources":["../../../src/nav-bar/NavItemElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAqBrF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,qBACa,iBAAkB,SAAQ,sBAEtC;;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAwOpC;IAGF,eAAe,CAAuB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAsB;IACxF,eAAe,CAAwB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAuB;IAC3F,eAAe,CAAmB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAmB;IAE9E;;;OAGG;IAC0B,WAAW,EAAE,kBAAkB,CAAc;IAE1E,qDAAqD;IACrD,IAAI,MAAM,IAAI,gBAAgB,GAAG,IAAI,CAEpC;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAcxE,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ1E,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK/E,kBAAkB;cACC,MAAM,IAAI,OAAO;CAsCrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,iBAAiB,CAAC;KACnC;CACF"}

package/dist/src/nav-bar/NavItemOrientation.d.ts

@@ -0,0 +1,3 @@
+/** Specifies the possible layout orientations of a navigation item. */
+export type NavItemOrientation = "vertical" | "horizontal";
+//# sourceMappingURL=NavItemOrientation.d.ts.map

package/dist/src/nav-bar/NavItemOrientation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavItemOrientation.d.ts","sourceRoot":"","sources":["../../../src/nav-bar/NavItemOrientation.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,YAAY,CAAC"}

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

@@ -0,0 +1,5 @@
+export * from "./NavBarElement";
+export * from "./NavBarMode";
+export * from "./NavItemElement";
+export * from "./NavItemOrientation";
+//# sourceMappingURL=index.d.ts.map

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

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