@m3e/menu 1.0.0-rc.1 → 1.0.0-rc.3

package/dist/html-custom-data.json

@@ -26,7 +26,7 @@
     },
     {
       "name": "m3e-menu-item-checkbox",
-      "description": "An item of a menu which supports a checkable state.\n---\n\n\n### **Slots:**\n - _default_ - Renders the label of the item.\n- **icon** - Renders an icon before the items's label.\n- **trailing-icon** - Renders an icon after the item's label.\n\n### **CSS Properties:**\n - **--m3e-menu-item-container-height** - Height of the menu item container. _(default: undefined)_\n- **--m3e-menu-item-color** - Text color for unselected, enabled menu items. _(default: undefined)_\n- **--m3e-menu-item-container-hover-color** - State layer hover color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-container-focus-color** - State layer focus color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-ripple-color** - Ripple color for unselected items. _(default: undefined)_\n- **--m3e-menu-selected-color** - Text color for selected or expanded items. _(default: undefined)_\n- **--m3e-menu-selected-container-color** - Background color for selected or expanded items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-hover-color** - State layer hover color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-focus-color** - State layer focus color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-ripple-color** - Ripple color for selected items. _(default: undefined)_\n- **--m3e-menu-item-disabled-color** - Base color for disabled items. _(default: undefined)_\n- **--m3e-menu-item-disabled-opacity** - Opacity percentage for disabled item color mix. _(default: undefined)_\n- **--m3e-menu-item-icon-label-space** - Horizontal gap between icon and content. _(default: undefined)_\n- **--m3e-menu-item-padding-start** - Start padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-padding-end** - End padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-size** - Font size for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-weight** - Font weight for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-line-height** - Line height for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-tracking** - Letter spacing for menu item text. _(default: undefined)_\n- **--m3e-menu-item-focus-ring-shape** - Border radius for the focus ring. _(default: undefined)_\n- **--m3e-menu-item-icon-size** - Font size for leading and trailing icons. _(default: undefined)_",
+      "description": "An item of a menu which supports a checkable state.\n---\n\n\n### **Events:**\n - **click** - Emitted when the element is clicked.\n\n### **Slots:**\n - _default_ - Renders the label of the item.\n- **icon** - Renders an icon before the items's label.\n- **trailing-icon** - Renders an icon after the item's label.\n\n### **CSS Properties:**\n - **--m3e-menu-item-container-height** - Height of the menu item container. _(default: undefined)_\n- **--m3e-menu-item-color** - Text color for unselected, enabled menu items. _(default: undefined)_\n- **--m3e-menu-item-container-hover-color** - State layer hover color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-container-focus-color** - State layer focus color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-ripple-color** - Ripple color for unselected items. _(default: undefined)_\n- **--m3e-menu-selected-color** - Text color for selected or expanded items. _(default: undefined)_\n- **--m3e-menu-selected-container-color** - Background color for selected or expanded items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-hover-color** - State layer hover color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-focus-color** - State layer focus color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-ripple-color** - Ripple color for selected items. _(default: undefined)_\n- **--m3e-menu-item-disabled-color** - Base color for disabled items. _(default: undefined)_\n- **--m3e-menu-item-disabled-opacity** - Opacity percentage for disabled item color mix. _(default: undefined)_\n- **--m3e-menu-item-icon-label-space** - Horizontal gap between icon and content. _(default: undefined)_\n- **--m3e-menu-item-padding-start** - Start padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-padding-end** - End padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-size** - Font size for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-weight** - Font weight for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-line-height** - Line height for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-tracking** - Letter spacing for menu item text. _(default: undefined)_\n- **--m3e-menu-item-focus-ring-shape** - Border radius for the focus ring. _(default: undefined)_\n- **--m3e-menu-item-icon-size** - Font size for leading and trailing icons. _(default: undefined)_",
       "attributes": [
         {
           "name": "disabled",
@@ -43,7 +43,7 @@
     },
     {
       "name": "m3e-menu-item",
-      "description": "An item of a menu.\n---\n\n\n### **Slots:**\n - _default_ - Renders the label of the item.\n- **icon** - Renders an icon before the items's label.\n- **trailing-icon** - Renders an icon after the item's label.\n\n### **CSS Properties:**\n - **--m3e-menu-item-container-height** - Height of the menu item container. _(default: undefined)_\n- **--m3e-menu-item-color** - Text color for unselected, enabled menu items. _(default: undefined)_\n- **--m3e-menu-item-container-hover-color** - State layer hover color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-container-focus-color** - State layer focus color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-ripple-color** - Ripple color for unselected items. _(default: undefined)_\n- **--m3e-menu-selected-color** - Text color for selected or expanded items. _(default: undefined)_\n- **--m3e-menu-selected-container-color** - Background color for selected or expanded items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-hover-color** - State layer hover color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-focus-color** - State layer focus color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-ripple-color** - Ripple color for selected items. _(default: undefined)_\n- **--m3e-menu-item-disabled-color** - Base color for disabled items. _(default: undefined)_\n- **--m3e-menu-item-disabled-opacity** - Opacity percentage for disabled item color mix. _(default: undefined)_\n- **--m3e-menu-item-icon-label-space** - Horizontal gap between icon and content. _(default: undefined)_\n- **--m3e-menu-item-padding-start** - Start padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-padding-end** - End padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-size** - Font size for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-weight** - Font weight for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-line-height** - Line height for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-tracking** - Letter spacing for menu item text. _(default: undefined)_\n- **--m3e-menu-item-focus-ring-shape** - Border radius for the focus ring. _(default: undefined)_\n- **--m3e-menu-item-icon-size** - Font size for leading and trailing icons. _(default: undefined)_",
+      "description": "An item of a menu.\n---\n\n\n### **Events:**\n - **click** - Emitted when the element is clicked.\n\n### **Slots:**\n - _default_ - Renders the label of the item.\n- **icon** - Renders an icon before the items's label.\n- **trailing-icon** - Renders an icon after the item's label.\n\n### **CSS Properties:**\n - **--m3e-menu-item-container-height** - Height of the menu item container. _(default: undefined)_\n- **--m3e-menu-item-color** - Text color for unselected, enabled menu items. _(default: undefined)_\n- **--m3e-menu-item-container-hover-color** - State layer hover color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-container-focus-color** - State layer focus color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-ripple-color** - Ripple color for unselected items. _(default: undefined)_\n- **--m3e-menu-selected-color** - Text color for selected or expanded items. _(default: undefined)_\n- **--m3e-menu-selected-container-color** - Background color for selected or expanded items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-hover-color** - State layer hover color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-focus-color** - State layer focus color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-ripple-color** - Ripple color for selected items. _(default: undefined)_\n- **--m3e-menu-item-disabled-color** - Base color for disabled items. _(default: undefined)_\n- **--m3e-menu-item-disabled-opacity** - Opacity percentage for disabled item color mix. _(default: undefined)_\n- **--m3e-menu-item-icon-label-space** - Horizontal gap between icon and content. _(default: undefined)_\n- **--m3e-menu-item-padding-start** - Start padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-padding-end** - End padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-size** - Font size for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-weight** - Font weight for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-line-height** - Line height for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-tracking** - Letter spacing for menu item text. _(default: undefined)_\n- **--m3e-menu-item-focus-ring-shape** - Border radius for the focus ring. _(default: undefined)_\n- **--m3e-menu-item-icon-size** - Font size for leading and trailing icons. _(default: undefined)_",
       "attributes": [
         {
           "name": "disabled",
@@ -68,7 +68,7 @@
         {
           "name": "target",
           "description": "The target of the link button.",
-          "values": []
+          "values": [{ "name": "LinkTarget" }]
         }
       ],
       "references": []
@@ -81,7 +81,7 @@
     },
     {
       "name": "m3e-menu-item-radio",
-      "description": "An item of a menu which supports a mutually exclusive checkable state.\n---\n\n\n### **Slots:**\n - _default_ - Renders the label of the item.\n- **icon** - Renders an icon before the items's label.\n- **trailing-icon** - Renders an icon after the item's label.\n\n### **CSS Properties:**\n - **--m3e-menu-item-container-height** - Height of the menu item container. _(default: undefined)_\n- **--m3e-menu-item-color** - Text color for unselected, enabled menu items. _(default: undefined)_\n- **--m3e-menu-item-container-hover-color** - State layer hover color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-container-focus-color** - State layer focus color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-ripple-color** - Ripple color for unselected items. _(default: undefined)_\n- **--m3e-menu-selected-color** - Text color for selected or expanded items. _(default: undefined)_\n- **--m3e-menu-selected-container-color** - Background color for selected or expanded items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-hover-color** - State layer hover color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-focus-color** - State layer focus color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-ripple-color** - Ripple color for selected items. _(default: undefined)_\n- **--m3e-menu-item-disabled-color** - Base color for disabled items. _(default: undefined)_\n- **--m3e-menu-item-disabled-opacity** - Opacity percentage for disabled item color mix. _(default: undefined)_\n- **--m3e-menu-item-icon-label-space** - Horizontal gap between icon and content. _(default: undefined)_\n- **--m3e-menu-item-padding-start** - Start padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-padding-end** - End padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-size** - Font size for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-weight** - Font weight for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-line-height** - Line height for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-tracking** - Letter spacing for menu item text. _(default: undefined)_\n- **--m3e-menu-item-focus-ring-shape** - Border radius for the focus ring. _(default: undefined)_\n- **--m3e-menu-item-icon-size** - Font size for leading and trailing icons. _(default: undefined)_",
+      "description": "An item of a menu which supports a mutually exclusive checkable state.\n---\n\n\n### **Events:**\n - **click** - Emitted when the element is clicked.\n\n### **Slots:**\n - _default_ - Renders the label of the item.\n- **icon** - Renders an icon before the items's label.\n- **trailing-icon** - Renders an icon after the item's label.\n\n### **CSS Properties:**\n - **--m3e-menu-item-container-height** - Height of the menu item container. _(default: undefined)_\n- **--m3e-menu-item-color** - Text color for unselected, enabled menu items. _(default: undefined)_\n- **--m3e-menu-item-container-hover-color** - State layer hover color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-container-focus-color** - State layer focus color for unselected items. _(default: undefined)_\n- **--m3e-menu-item-ripple-color** - Ripple color for unselected items. _(default: undefined)_\n- **--m3e-menu-selected-color** - Text color for selected or expanded items. _(default: undefined)_\n- **--m3e-menu-selected-container-color** - Background color for selected or expanded items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-hover-color** - State layer hover color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-container-focus-color** - State layer focus color for selected items. _(default: undefined)_\n- **--m3e-menu-item-selected-ripple-color** - Ripple color for selected items. _(default: undefined)_\n- **--m3e-menu-item-disabled-color** - Base color for disabled items. _(default: undefined)_\n- **--m3e-menu-item-disabled-opacity** - Opacity percentage for disabled item color mix. _(default: undefined)_\n- **--m3e-menu-item-icon-label-space** - Horizontal gap between icon and content. _(default: undefined)_\n- **--m3e-menu-item-padding-start** - Start padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-padding-end** - End padding for the item wrapper. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-size** - Font size for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-font-weight** - Font weight for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-line-height** - Line height for menu item text. _(default: undefined)_\n- **--m3e-menu-item-label-text-tracking** - Letter spacing for menu item text. _(default: undefined)_\n- **--m3e-menu-item-focus-ring-shape** - Border radius for the focus ring. _(default: undefined)_\n- **--m3e-menu-item-icon-size** - Font size for leading and trailing icons. _(default: undefined)_",
       "attributes": [
         {
           "name": "disabled",
@@ -98,8 +98,14 @@
     },
     {
       "name": "m3e-menu-trigger",
-      "description": "An element, nested within a clickable element, used to open a menu.\n---\n\n\n### **Slots:**\n - _default_ - Renders the contents of the trigger.",
-      "attributes": [],
+      "description": "An element, nested within a clickable element, used to open a menu.\n---\n\n\n### **Methods:**\n - **attach(control: _HTMLElement_): _void_** - Attaches the element to an interactive control.\n- **detach(): _void_** - Detaches the element from its current interactive control.\n\n### **Slots:**\n - _default_ - Renders the contents of the trigger.",
+      "attributes": [
+        {
+          "name": "for",
+          "description": "The identifier of the interactive control to which this element is attached.",
+          "values": []
+        }
+      ],
       "references": []
     }
   ]

package/dist/index.js

@@ -4,7 +4,7 @@
  * See LICENSE file in the project root for full license text.
  */
 import { LitElement, nothing, html, css, unsafeCSS } from 'lit';
-import { KeyboardClick, Focusable, AttachInternals, Disabled, isLinkButtonMixin, renderPseudoLink, DesignToken, HtmlFor, Role, LinkButton, HoverController, hasAssignedNodes, ScrollController, Checked } from '@m3e/core';
+import { KeyboardClick, Focusable, AttachInternals, Disabled, isLinkButtonMixin, renderPseudoLink, DesignToken, HtmlFor, LinkButton, Role, HoverController, hasAssignedNodes, ScrollController, Checked } from '@m3e/core';
 import { addAriaReferencedId, removeAriaReferencedId, RovingTabIndexManager } from '@m3e/core/a11y';
 import { positionAnchor } from '@m3e/core/anchoring';
 
@@ -235,7 +235,6 @@ __decorate([
 
 var _M3eMenuTriggerElement_instances, _M3eMenuTriggerElement_clickHandler, _M3eMenuTriggerElement_handleClick;
 /**
- * @summary
  * An element, nested within a clickable element, used to open a menu.
  *
  * @description
@@ -293,7 +292,7 @@ var _M3eMenuTriggerElement_instances, _M3eMenuTriggerElement_clickHandler, _M3eM
  *
  * @slot - Renders the contents of the trigger.
  */
-let M3eMenuTriggerElement = class M3eMenuTriggerElement extends HtmlFor(Role(LitElement, "none")) {
+let M3eMenuTriggerElement = class M3eMenuTriggerElement extends HtmlFor(LitElement) {
     constructor() {
         super(...arguments);
         _M3eMenuTriggerElement_instances.add(this);
@@ -375,7 +374,6 @@ M3eMenuTriggerElement = __decorate([
 var _M3eMenuItemElement_instances, _M3eMenuItemElement_clickHandler, _M3eMenuItemElement_keyDownHandler, _M3eMenuItemElement_mouseEnterHandler, _M3eMenuItemElement_submenuTrigger, _M3eMenuItemElement_defaultSlotChangeHandler, _M3eMenuItemElement_iconSlotChangeHandler, _M3eMenuItemElement_trailingIconSlotChangeHandler, _M3eMenuItemElement_handleClick, _M3eMenuItemElement_handleKeyDown, _M3eMenuItemElement_handleMouseEnter;
 var M3eMenuItemElement_1;
 /**
- * @summary
  * An item of a menu.
  *
  * @description
@@ -442,6 +440,8 @@ var M3eMenuItemElement_1;
  * @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.
@@ -563,7 +563,6 @@ M3eMenuItemElement = M3eMenuItemElement_1 = __decorate([
 var _M3eMenuElement_instances, _M3eMenuElement_trigger, _M3eMenuElement_anchorCleanup, _M3eMenuElement_listManager, _M3eMenuElement_keyDownHandler, _M3eMenuElement_documentClickHandler, _M3eMenuElement_scrollController, _M3eMenuElement_toggleHandler, _M3eMenuElement_handleSlotChange, _M3eMenuElement_handleKeyDown, _M3eMenuElement_handleDocumentClick, _M3eMenuElement_getAbsolutePosition;
 var M3eMenuElement_1;
 /**
- * @summary
  * Presents a list of choices on a temporary surface.
  *
  * @description
@@ -938,7 +937,6 @@ M3eMenuElement = M3eMenuElement_1 = __decorate([
 
 var _M3eMenuItemCheckboxElement_instances, _M3eMenuItemCheckboxElement_clickHandler, _M3eMenuItemCheckboxElement_keyDownHandler, _M3eMenuItemCheckboxElement_keyUpHandler, _M3eMenuItemCheckboxElement_mouseEnterHandler, _M3eMenuItemCheckboxElement_spacePressed, _M3eMenuItemCheckboxElement_handleIconSlotChange, _M3eMenuItemCheckboxElement_handleTrailingIconSlotChange, _M3eMenuItemCheckboxElement_handleClick, _M3eMenuItemCheckboxElement_handleKeyDown, _M3eMenuItemCheckboxElement_handleKeyUp, _M3eMenuItemCheckboxElement_handleMouseEnter;
 /**
- * @summary
  * An item of a menu which supports a checkable state.
  *
  * @description
@@ -970,6 +968,8 @@ var _M3eMenuItemCheckboxElement_instances, _M3eMenuItemCheckboxElement_clickHand
  * @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.
@@ -1096,7 +1096,6 @@ M3eMenuItemCheckboxElement = __decorate([
 ], M3eMenuItemCheckboxElement);
 
 /**
- * @summary
  * Groups related items (such a radios) in a menu.
  *
  * @description
@@ -1126,7 +1125,6 @@ M3eMenuItemGroupElement = __decorate([
 
 var _M3eMenuItemRadioElement_instances, _M3eMenuItemRadioElement_clickHandler, _M3eMenuItemRadioElement_keyDownHandler, _M3eMenuItemRadioElement_keyUpHandler, _M3eMenuItemRadioElement_mouseEnterHandler, _M3eMenuItemRadioElement_spacePressed, _M3eMenuItemRadioElement_handleIconSlotChange, _M3eMenuItemRadioElement_handleTrailingIconSlotChange, _M3eMenuItemRadioElement_handleClick, _M3eMenuItemRadioElement_handleKeyDown, _M3eMenuItemRadioElement_handleKeyUp, _M3eMenuItemRadioElement_handleMouseEnter;
 /**
- * @summary
  * An item of a menu which supports a mutually exclusive checkable state.
  *
  * @description
@@ -1157,6 +1155,8 @@ var _M3eMenuItemRadioElement_instances, _M3eMenuItemRadioElement_clickHandler, _
  * @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.