@m3e/menu 1.0.0-rc.2 → 1.0.0-rc.4

package/README.md

@@ -27,7 +27,7 @@ Alternately, you can explicitly reference the `html-custom-data.json` and `css-c
 }
 ```
 
-## 🚀 Browser Usage
+## 🚀 Native Module Support
 
 This package uses [JavaScript Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#module_specifiers). To use it directly in a browser without a bundler, use a module script similar to the following.
 

package/dist/custom-elements.json

@@ -3129,25 +3129,6 @@
           "kind": "mixin",
           "description": "Mixin that adds support for custom event attributes.",
           "name": "EventAttribute",
-          "members": [
-            {
-              "kind": "method",
-              "name": "dispatchEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
           "parameters": [
             {
               "name": "base",
@@ -3445,6 +3426,17 @@
           "description": "Mixin to augment an element with behavior used to submit a form.",
           "name": "FormSubmitter",
           "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "true",
+              "description": "Indicates that this custom element participates in form submission, validation, and form state restoration."
+            },
             {
               "kind": "field",
               "name": "name",
@@ -3981,6 +3973,11 @@
       "kind": "javascript-module",
       "path": "../core/src/shared/mixins/Labelled.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "updateLabels",
+          "description": "A symbol through which to update labels to reflect a control's current state."
+        },
         {
           "kind": "function",
           "name": "isLabelledMixin",
@@ -4030,16 +4027,6 @@
               },
               "description": "The label elements that the element is associated with.",
               "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "[_updateLabels]",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
             }
           ],
           "parameters": [
@@ -4054,6 +4041,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "updateLabels",
+          "declaration": {
+            "name": "updateLabels",
+            "module": "../core/src/shared/mixins/Labelled.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "isLabelledMixin",

package/dist/src/MenuElement.d.ts

@@ -0,0 +1,142 @@
+import { CSSResultGroup, LitElement } from "lit";
+import { MenuPositionX, MenuPositionY } from "./MenuPosition";
+import { MenuItemElementBase } from "./MenuItemElementBase";
+declare const M3eMenuElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
+/**
+ * Presents a list of choices on a temporary surface.
+ *
+ * @description
+ * The `m3e-menu` component presents a list of choices on a temporary surface, typically anchored to a trigger element.
+ * It supports dynamic positioning via `position-x` and `position-y` attributes, and renders its contents through the default slot.
+ *
+ * @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
+ *
+ * @slot - Renders the contents of the menu.
+ *
+ * @attr position-x - The position of the menu, on the x-axis.
+ * @attr position-y - The position of the menu, on the y-axis.
+ *
+ * @fires beforetoggle - Dispatched before the toggle state changes.
+ * @fires toggle - Dispatched after the toggle state has changed.
+ *
+ * @cssprop --m3e-menu-container-shape - Controls the corner radius of the menu container.
+ * @cssprop --m3e-menu-container-min-width - Minimum width of the menu container.
+ * @cssprop --m3e-menu-container-max-width - Maximum width of the menu container.
+ * @cssprop --m3e-menu-container-max-height - Maximum height of the menu container.
+ * @cssprop --m3e-menu-container-padding-block - Vertical padding inside the menu container.
+ * @cssprop --m3e-menu-container-color - Background color of the menu container.
+ * @cssprop --m3e-menu-container-elevation - Box shadow elevation of the menu container.
+ * @cssprop --m3e-menu-divider-spacing - Vertical spacing around slotted `m3e-divider` elements.
+ */
+export declare class M3eMenuElement extends M3eMenuElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /**
+     * The position of the menu, on the x-axis.
+     * @default "after"
+     */
+    positionX: MenuPositionX;
+    /**
+     * The position of the menu, on the y-axis.
+     * @default "below"
+     */
+    positionY: MenuPositionY;
+    /** The items of the menu. */
+    get items(): ReadonlyArray<MenuItemElementBase>;
+    /** A value indicating whether the menu is open. */
+    get isOpen(): boolean;
+    /** A value indicating whether the menu is a submenu. */
+    submenu: boolean;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /**
+     * Opens the menu.
+     * @param {HTMLElement} trigger The element that triggered the menu.
+     * @returns {Promise<void>} A `Promise` that resolves when the menu is opened.
+     */
+    show(trigger: HTMLElement): Promise<void>;
+    /**
+     * Hides the menu.
+     * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.
+     */
+    hide(restoreFocus?: boolean): void;
+    /**
+     * Closes this menu and any parenting menus.
+     * @param {boolean} [restoreFocus=false] A value indicating whether to restore focus to the menu's trigger.
+     */
+    hideAll(restoreFocus?: boolean): void;
+    /**
+     * Toggles the menu.
+     * @param {HTMLElement} trigger The element that triggered the menu.
+     * @returns {Promise<void>} A `Promise` that resolves when the menu is opened or closed.
+     */
+    toggle(trigger: HTMLElement): Promise<void>;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+interface M3eMenuElementEventMap extends HTMLElementEventMap {
+    beforetoggle: ToggleEvent;
+    toggle: ToggleEvent;
+}
+export interface M3eMenuElement {
+    addEventListener<K extends keyof M3eMenuElementEventMap>(type: K, listener: (this: M3eMenuElement, ev: M3eMenuElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof M3eMenuElementEventMap>(type: K, listener: (this: M3eMenuElement, ev: M3eMenuElementEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-menu": M3eMenuElement;
+    }
+}
+export {};
+//# sourceMappingURL=MenuElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuElement.d.ts","sourceRoot":"","sources":["../../src/MenuElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAa,MAAM,KAAK,CAAC;AAQvE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,qBACa,cAAe,SAAQ,mBAAwB;;IAC1D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA0EpC;IA+BF;;;OAGG;IACoC,SAAS,EAAE,aAAa,CAAW;IAE1E;;;OAGG;IACoC,SAAS,EAAE,aAAa,CAAW;IAE1E,6BAA6B;IAC7B,IAAI,KAAK,IAAI,aAAa,CAAC,mBAAmB,CAAC,CAE9C;IAED,mDAAmD;IACnD,IAAI,MAAM,YAET;IAED,wDAAwD;IACZ,OAAO,UAAS;IAE5D,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAUlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAQrC;;;;OAIG;IACG,IAAI,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAgD/C;;;OAGG;IACH,IAAI,CAAC,YAAY,GAAE,OAAe,GAAG,IAAI;IAoBzC;;;OAGG;IACH,OAAO,CAAC,YAAY,GAAE,OAAe,GAAG,IAAI;IAa5C;;;;OAIG;IACG,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAQjD,kBAAkB;cACC,MAAM,IAAI,OAAO;CAiErC;AAED,UAAU,sBAAuB,SAAQ,mBAAmB;IAC1D,YAAY,EAAE,WAAW,CAAC;IAC1B,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,cAAc;IAC7B,gBAAgB,CAAC,CAAC,SAAS,MAAM,sBAAsB,EACrD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,IAAI,EACvE,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,sBAAsB,EACxD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,cAAc,EAAE,EAAE,EAAE,sBAAsB,CAAC,CAAC,CAAC,KAAK,IAAI,EACvE,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,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/dist/src/MenuItemCheckboxElement.d.ts

@@ -0,0 +1,77 @@
+import { CSSResultGroup } from "lit";
+import { MenuItemElementBase } from "./MenuItemElementBase";
+declare const M3eMenuItemCheckboxElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").CheckedMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof MenuItemElementBase;
+/**
+ * An item of a menu which supports a checkable state.
+ *
+ * @description
+ * The `m3e-menu-item-checkbox` component represents a menu item that supports an independent checkable state.
+ * It allows users to toggle options on or off without affecting other items in the menu, making it ideal for
+ * multi-select scenarios such as filters, visibility toggles, or feature flags. This component encodes a persistent
+ * selection contract and can coexist with other checkbox or radio items within the same menu.
+ *
+ * @example
+ * The following example illustrates use of the `m3e-menu-item-checkbox` to present multiple independent checkable
+ * items in a menu.
+ * ```html
+ * <m3e-button>
+ *   <m3e-menu-trigger for="menu">Format</m3e-menu-trigger>
+ * </m3e-button>
+ * <m3e-menu id="menu">
+ *   <m3e-menu-item-checkbox>Bold</m3e-menu-item-checkbox>
+ *   <m3e-menu-item-checkbox>Italic</m3e-menu-item-checkbox>
+ *   <m3e-menu-item-checkbox>Underline</m3e-menu-item-checkbox>
+ * </m3e-menu>
+ * ```
+ *
+ * @tag m3e-menu-item-checkbox
+ *
+ * @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-selected-color - Text color for selected or expanded items.
+ * @cssprop --m3e-menu-selected-container-color - Background color for selected or expanded 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-disabled-color - Base color for disabled items.
+ * @cssprop --m3e-menu-item-disabled-opacity - Opacity percentage for disabled item color mix.
+ * @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.
+ */
+export declare class M3eMenuItemCheckboxElement extends M3eMenuItemCheckboxElement_base {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @internal @inheritdoc */
+    protected _renderContent(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-menu-item-checkbox": M3eMenuItemCheckboxElement;
+    }
+}
+export {};
+//# sourceMappingURL=MenuItemCheckboxElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemCheckboxElement.d.ts","sourceRoot":"","sources":["../../src/MenuItemCheckboxElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,MAAM,KAAK,CAAC;AAMhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,qBACa,0BAA2B,SAAQ,+BAAsD;;IACpG,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAyBpC;IAQF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IASlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IASrC,4BAA4B;cACT,cAAc,IAAI,OAAO;CAmD7C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}

package/dist/src/MenuItemElement.d.ts

@@ -0,0 +1,114 @@
+import type { M3eMenuElement } from "./MenuElement";
+import { MenuItemElementBase } from "./MenuItemElementBase";
+declare const M3eMenuItemElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").LinkButtonMixin> & import("node_modules/@m3e/core/dist/src/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-selected-color - Text color for selected or expanded items.
+ * @cssprop --m3e-menu-selected-container-color - Background color for selected or expanded 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-disabled-color - Base color for disabled items.
+ * @cssprop --m3e-menu-item-disabled-opacity - Opacity percentage for disabled item color mix.
+ * @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.
+ */
+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/MenuItemElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemElement.d.ts","sourceRoot":"","sources":["../../src/MenuItemElement.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAG5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FG;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;CAyD7C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}

package/dist/src/MenuItemElementBase.d.ts

@@ -0,0 +1,21 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import type { M3eMenuElement } from "./MenuElement";
+declare const MenuItemElementBase_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/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/MenuItemElementBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemElementBase.d.ts","sourceRoot":"","sources":["../../src/MenuItemElementBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAgBrF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAEpD,iFAAiF;AACjF,8BAAsB,mBAAoB,SAAQ,wBAEjD;IACC,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAuGpC;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/MenuItemGroupElement.d.ts

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

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

@@ -0,0 +1,78 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { MenuItemElementBase } from "./MenuItemElementBase";
+declare const M3eMenuItemRadioElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").CheckedMixin> & import("node_modules/@m3e/core/dist/src/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-selected-color - Text color for selected or expanded items.
+ * @cssprop --m3e-menu-selected-container-color - Background color for selected or expanded 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-disabled-color - Base color for disabled items.
+ * @cssprop --m3e-menu-item-disabled-opacity - Opacity percentage for disabled item color mix.
+ * @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.
+ */
+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/MenuItemRadioElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemRadioElement.d.ts","sourceRoot":"","sources":["../../src/MenuItemRadioElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAO3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;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;CAmD7C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,uBAAuB,CAAC;KAChD;CACF"}

package/dist/src/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/MenuPosition.d.ts.map

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

@@ -0,0 +1,85 @@
+import { CSSResultGroup, LitElement } from "lit";
+import type { M3eMenuElement } from "./MenuElement";
+declare const M3eMenuTriggerElement_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").HtmlForMixin> & typeof LitElement;
+/**
+ * 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 {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** The menu triggered by the element. */
+    get menu(): M3eMenuElement | null;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    disconnectedCallback(): void;
+    /** @inheritdoc */
+    attach(control: HTMLElement): void;
+    /** @inheritdoc */
+    detach(): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-menu-trigger": M3eMenuTriggerElement;
+    }
+}
+export {};
+//# sourceMappingURL=MenuTriggerElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTriggerElement.d.ts","sourceRoot":"","sources":["../../src/MenuTriggerElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAM5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,qBACa,qBAAsB,SAAQ,0BAAmB;;IAC5D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAOpC;IAIF,yCAAyC;IACzC,IAAI,IAAI,IAAI,cAAc,GAAG,IAAI,CAEhC;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAkB3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAcvB,kBAAkB;cACC,MAAM,IAAI,OAAO;CAcrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}

package/dist/src/index.d.ts

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/menu",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.4",
   "description": "Menu for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "clean": "rimraf dist"
   },
   "peerDependencies": {
-    "@m3e/core": "1.0.0-rc.2",
+    "@m3e/core": "1.0.0-rc.4",
     "lit": "^3.3.0"
   },
   "devDependencies": {