@m3e/nav-menu 1.0.0-rc.1 → 1.0.0-rc.2

package/dist/html-custom-data.json

@@ -10,7 +10,7 @@
     },
     {
       "name": "m3e-nav-menu-item",
-      "description": "An expandable item in a navigation menu.\n---\n\n\n### **Events:**\n - **opening** - Emitted when the item begins to open.\n- **opened** - Emitted when the item has opened.\n- **closing** - Emitted when the item begins to close.\n- **closed** - Emitted when the item has closed.\n\n### **Methods:**\n - **expand(descendants: _boolean_): _void_** - Expands this item, and optionally, all descendants.\n- **collapse(descendants: _boolean_): _void_** - Collapses this item, and optionally, all descendants.\n- **toggle(): _void_** - Toggles the expanded state of the item.\n\n### **Slots:**\n - _default_ - Renders the nested child items.\n- **label** - Renders the label of the item.\n- **icon** - Renders the icon of the item.\n- **selected-icon** - Renders the icon of the item when selected.\n- **toggle-icon** - Renders the toggle icon.\n\n### **CSS Properties:**\n - **--m3e-nav-menu-item-font-size** - Font size for the item label. _(default: undefined)_\n- **--m3e-nav-menu-item-font-weight** - Font weight for the item label. _(default: undefined)_\n- **--m3e-nav-menu-item-line-height** - Line height for the item label. _(default: undefined)_\n- **--m3e-nav-menu-item-tracking** - Letter spacing for the item label. _(default: undefined)_\n- **--m3e-nav-menu-item-padding** - Inline padding for the item. _(default: undefined)_\n- **--m3e-nav-menu-item-height** - Height of the item. _(default: undefined)_\n- **--m3e-nav-menu-item-spacing** - Spacing between icon and label. _(default: undefined)_\n- **--m3e-nav-menu-item-shape** - Border radius of the item and focus ring. _(default: undefined)_\n- **--m3e-nav-menu-item-icon-size** - Size of the icon. _(default: undefined)_\n- **--m3e-nav-menu-item-inset** - Indentation for nested items. _(default: undefined)_\n- **--m3e-nav-menu-item-label-color** - Text color for the item label. _(default: undefined)_\n- **--m3e-nav-menu-item-selected-label-color** - Text color for selected item label. _(default: undefined)_\n- **--m3e-nav-menu-item-selected-container-color** - Background color for selected item. _(default: undefined)_\n- **--m3e-nav-menu-item-selected-container-focus-color** - Focus color for selected item container. _(default: undefined)_\n- **--m3e-nav-menu-item-selected-container-hover-color** - Hover color for selected item container. _(default: undefined)_\n- **--m3e-nav-menu-item-selected-ripple-color** - Ripple color for selected item. _(default: undefined)_\n- **--m3e-nav-menu-item-unselected-container-focus-color** - Focus color for unselected item container. _(default: undefined)_\n- **--m3e-nav-menu-item-unselected-container-hover-color** - Hover color for unselected item container. _(default: undefined)_\n- **--m3e-nav-menu-item-unselected-ripple-color** - Ripple color for unselected item. _(default: undefined)_\n- **--m3e-nav-menu-item-open-container-color** - Background color for open item with children. _(default: undefined)_\n- **--m3e-nav-menu-item-open-container-focus-color** - Focus color for open item container. _(default: undefined)_\n- **--m3e-nav-menu-item-open-container-hover-color** - Hover color for open item container. _(default: undefined)_\n- **--m3e-nav-menu-item-open-ripple-color** - Ripple color for open item. _(default: undefined)_\n- **--m3e-nav-menu-item-disabled-color** - Text color for disabled item. _(default: undefined)_\n- **--m3e-nav-menu-item-disabled-color-opacity** - Opacity for disabled item text color. _(default: undefined)_\n- **--m3e-nav-menu-item-badge-font-size** - Font size for badge slot. _(default: undefined)_\n- **--m3e-nav-menu-item-badge-font-weight** - Font weight for badge slot. _(default: undefined)_\n- **--m3e-nav-menu-item-badge-line-height** - Line height for badge slot. _(default: undefined)_\n- **--m3e-nav-menu-badge-item-tracking** - Letter spacing for badge slot. _(default: undefined)_\n- **--m3e-nav-menu-divider-margin** - Margin for divider elements. _(default: undefined)_\n- **--m3e-nav-menu-item-vertical-inset** - Vertical margin for first/last child items. _(default: undefined)_",
+      "description": "An expandable item in a navigation menu.\n---\n\n\n### **Events:**\n - **opening** - Emitted when the item begins to open.\n- **opened** - Emitted when the item has opened.\n- **closing** - Emitted when the item begins to close.\n- **closed** - Emitted when the item has closed.\n- **click** - Emitted when the element is clicked.\n\n### **Methods:**\n - **expand(descendants: _boolean_): _void_** - Expands this item, and optionally, all descendants.\n- **collapse(descendants: _boolean_): _void_** - Collapses this item, and optionally, all descendants.\n- **toggle(): _void_** - Toggles the expanded state of the item.\n\n### **Slots:**\n - _default_ - Renders the nested child items.\n- **label** - Renders the label of the item.\n- **icon** - Renders the icon of the item.\n- **selected-icon** - Renders the icon of the item when selected.\n- **toggle-icon** - Renders the toggle icon.\n\n### **CSS Properties:**\n - **--m3e-nav-menu-item-font-size** - Font size for the item label. _(default: undefined)_\n- **--m3e-nav-menu-item-font-weight** - Font weight for the item label. _(default: undefined)_\n- **--m3e-nav-menu-item-line-height** - Line height for the item label. _(default: undefined)_\n- **--m3e-nav-menu-item-tracking** - Letter spacing for the item label. _(default: undefined)_\n- **--m3e-nav-menu-item-padding** - Inline padding for the item. _(default: undefined)_\n- **--m3e-nav-menu-item-height** - Height of the item. _(default: undefined)_\n- **--m3e-nav-menu-item-spacing** - Spacing between icon and label. _(default: undefined)_\n- **--m3e-nav-menu-item-shape** - Border radius of the item and focus ring. _(default: undefined)_\n- **--m3e-nav-menu-item-icon-size** - Size of the icon. _(default: undefined)_\n- **--m3e-nav-menu-item-inset** - Indentation for nested items. _(default: undefined)_\n- **--m3e-nav-menu-item-label-color** - Text color for the item label. _(default: undefined)_\n- **--m3e-nav-menu-item-selected-label-color** - Text color for selected item label. _(default: undefined)_\n- **--m3e-nav-menu-item-selected-container-color** - Background color for selected item. _(default: undefined)_\n- **--m3e-nav-menu-item-selected-container-focus-color** - Focus color for selected item container. _(default: undefined)_\n- **--m3e-nav-menu-item-selected-container-hover-color** - Hover color for selected item container. _(default: undefined)_\n- **--m3e-nav-menu-item-selected-ripple-color** - Ripple color for selected item. _(default: undefined)_\n- **--m3e-nav-menu-item-unselected-container-focus-color** - Focus color for unselected item container. _(default: undefined)_\n- **--m3e-nav-menu-item-unselected-container-hover-color** - Hover color for unselected item container. _(default: undefined)_\n- **--m3e-nav-menu-item-unselected-ripple-color** - Ripple color for unselected item. _(default: undefined)_\n- **--m3e-nav-menu-item-open-container-color** - Background color for open item with children. _(default: undefined)_\n- **--m3e-nav-menu-item-open-container-focus-color** - Focus color for open item container. _(default: undefined)_\n- **--m3e-nav-menu-item-open-container-hover-color** - Hover color for open item container. _(default: undefined)_\n- **--m3e-nav-menu-item-open-ripple-color** - Ripple color for open item. _(default: undefined)_\n- **--m3e-nav-menu-item-disabled-color** - Text color for disabled item. _(default: undefined)_\n- **--m3e-nav-menu-item-disabled-color-opacity** - Opacity for disabled item text color. _(default: undefined)_\n- **--m3e-nav-menu-item-badge-font-size** - Font size for badge slot. _(default: undefined)_\n- **--m3e-nav-menu-item-badge-font-weight** - Font weight for badge slot. _(default: undefined)_\n- **--m3e-nav-menu-item-badge-line-height** - Line height for badge slot. _(default: undefined)_\n- **--m3e-nav-menu-badge-item-tracking** - Letter spacing for badge slot. _(default: undefined)_\n- **--m3e-nav-menu-divider-margin** - Margin for divider elements. _(default: undefined)_\n- **--m3e-nav-menu-item-vertical-inset** - Vertical margin for first/last child items. _(default: undefined)_",
       "attributes": [
         {
           "name": "disabled",

package/dist/index.js

@@ -4,7 +4,7 @@
  * See LICENSE file in the project root for full license text.
  */
 import { LitElement, html, css, unsafeCSS } from 'lit';
-import { Role, PressedController, FocusController, DesignToken, scrollIntoViewIfNeeded, Selected, Disabled, EventAttribute, AttachInternals, hasAssignedNodes } from '@m3e/core';
+import { Role, scrollIntoViewIfNeeded, PressedController, FocusController, DesignToken, Selected, Disabled, EventAttribute, AttachInternals, hasAssignedNodes } from '@m3e/core';
 import { SelectionManager, selectionManager } from '@m3e/core/a11y';
 
 /******************************************************************************
@@ -97,7 +97,6 @@ const e$2=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"obj
 var _M3eNavMenuElement_instances, _M3eNavMenuElement_ignoreFocusVisible, _M3eNavMenuElement_ignoreFocus, _M3eNavMenuElement_keyDownHandler, _M3eNavMenuElement_keyUpHandler, _M3eNavMenuElement_pointerDownHandler, _M3eNavMenuElement_handleSlotChange, _M3eNavMenuElement_handleKeyDown, _M3eNavMenuElement_handleKeyUp, _M3eNavMenuElement_handlePointerDown, _M3eNavMenuElement_activateItem, _M3eNavMenuElement_updateFocusVisible, _M3eNavMenuElement_updateItemFocusVisible, _b;
 var M3eNavMenuElement_1;
 /**
- * @summary
  * Presents a hierarchical menu.
  *
  * @description
@@ -168,6 +167,9 @@ let M3eNavMenuElement = M3eNavMenuElement_1 = class M3eNavMenuElement extends Ro
                     __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_updateItemFocusVisible).call(this, item, false, false);
                 }
             }
+            if (selected?.label) {
+                scrollIntoViewIfNeeded(selected.label, this, { block: "start", behavior: "smooth" });
+            }
         });
         /** @private */ _M3eNavMenuElement_keyDownHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_handleKeyDown).call(this, e));
         /** @private */ _M3eNavMenuElement_keyUpHandler.set(this, (e) => __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_handleKeyUp).call(this, e));
@@ -338,7 +340,9 @@ _M3eNavMenuElement_handlePointerDown = function _M3eNavMenuElement_handlePointer
 };
 _M3eNavMenuElement_activateItem = function _M3eNavMenuElement_activateItem(item) {
     this.setAttribute("aria-activedescendant", item.id);
-    scrollIntoViewIfNeeded(item, this, "instant");
+    if (item.label) {
+        scrollIntoViewIfNeeded(item.label, this, { block: "nearest", behavior: "smooth" });
+    }
     __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_updateFocusVisible).call(this);
 };
 _M3eNavMenuElement_updateFocusVisible = function _M3eNavMenuElement_updateFocusVisible() {
@@ -405,7 +409,6 @@ const t=globalThis,i=t.trustedTypes,s=i?i.createPolicy("lit-html",{createHTML:t=
 var _M3eNavMenuItemElement_instances, _M3eNavMenuItemElement_items, _M3eNavMenuItemElement_menu, _M3eNavMenuItemElement_path, _M3eNavMenuItemElement_link, _M3eNavMenuItemElement_renderIcon, _M3eNavMenuItemElement_handleIconSlotChange, _M3eNavMenuItemElement_handleSlotChange, _M3eNavMenuItemElement_handleItemSlotChange, _M3eNavMenuItemElement_handleClick, _M3eNavMenuItemElement_handleCollapsibleEvent;
 var M3eNavMenuItemElement_1;
 /**
- * @summary
  * An expandable item in a navigation menu.
  *
  * @description
@@ -456,6 +459,7 @@ var M3eNavMenuItemElement_1;
  * @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.
@@ -508,6 +512,10 @@ let M3eNavMenuItemElement = M3eNavMenuItemElement_1 = class M3eNavMenuItemElemen
     get link() {
         return __classPrivateFieldGet(this, _M3eNavMenuItemElement_link, "f");
     }
+    /** A reference to the element used to present the label of the item. */
+    get label() {
+        return this._base ?? null;
+    }
     /** Whether the item is visible. */
     get visible() {
         return !__classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").some((x) => !x.open);
@@ -671,6 +679,15 @@ _M3eNavMenuItemElement_handleClick = function _M3eNavMenuItemElement_handleClick
         __classPrivateFieldGet(this, _M3eNavMenuItemElement_menu, "f")?.[selectionManager].select(this);
         __classPrivateFieldGet(this, _M3eNavMenuItemElement_path, "f").forEach((x) => (x.selected = this.selected));
         __classPrivateFieldGet(this, _M3eNavMenuItemElement_link, "f")?.click();
+        const drawerContainer = this.closest("m3e-drawer-container");
+        if (drawerContainer) {
+            const drawer = this.closest("[slot='start']") ?? this.closest("[slot='end')");
+            if (drawer &&
+                (drawerContainer.classList.contains(`-${drawer.slot}-push`) ||
+                    drawerContainer.classList.contains(`-${drawer.slot}-over`))) {
+                setTimeout(() => drawerContainer.removeAttribute(drawer.slot), 300);
+            }
+        }
     }
     else {
         this.toggle();