@m3e/nav-menu 1.0.0-rc.4 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/css-custom-data.json +1 -1
- package/dist/custom-elements.json +1 -1
- package/dist/html-custom-data.json +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +2 -2
- package/dist/index.min.js.map +1 -1
- package/dist/src/NavMenuItemElement.d.ts +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -204,7 +204,7 @@ This section details the attributes, slots, events, and CSS custom properties av
|
|
|
204
204
|
| `--m3e-nav-menu-item-badge-font-size` | Font size for badge slot. |
|
|
205
205
|
| `--m3e-nav-menu-item-badge-font-weight` | Font weight for badge slot. |
|
|
206
206
|
| `--m3e-nav-menu-item-badge-line-height` | Line height for badge slot. |
|
|
207
|
-
| `--m3e-nav-menu-badge-
|
|
207
|
+
| `--m3e-nav-menu-item-badge-tracking` | Letter spacing for badge slot. |
|
|
208
208
|
| `--m3e-nav-menu-divider-margin` | Margin for divider elements. |
|
|
209
209
|
| `--m3e-nav-menu-item-vertical-inset` | Vertical margin for first/last child items. |
|
|
210
210
|
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
},
|
|
11
11
|
{
|
|
12
12
|
"name": "m3e-nav-menu-item",
|
|
13
|
-
"description": "An expandable item, selectable item within 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- **badge** - Renders the badge 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-
|
|
13
|
+
"description": "An expandable item, selectable item within 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- **badge** - Renders the badge 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-item-badge-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)_",
|
|
14
14
|
"attributes": [
|
|
15
15
|
{
|
|
16
16
|
"name": "disabled",
|
package/dist/index.js
CHANGED
|
@@ -219,7 +219,7 @@ var M3eNavMenuItemElement_1;
|
|
|
219
219
|
* @cssprop --m3e-nav-menu-item-badge-font-size - Font size for badge slot.
|
|
220
220
|
* @cssprop --m3e-nav-menu-item-badge-font-weight - Font weight for badge slot.
|
|
221
221
|
* @cssprop --m3e-nav-menu-item-badge-line-height - Line height for badge slot.
|
|
222
|
-
* @cssprop --m3e-nav-menu-badge-
|
|
222
|
+
* @cssprop --m3e-nav-menu-item-badge-tracking - Letter spacing for badge slot.
|
|
223
223
|
* @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements.
|
|
224
224
|
* @cssprop --m3e-nav-menu-item-vertical-inset - Vertical margin for first/last child items.
|
|
225
225
|
*/
|
|
@@ -484,7 +484,7 @@ M3eNavMenuItemElement.styles = css `
|
|
|
484
484
|
font-size: var(--m3e-nav-menu-item-badge-font-size, ${DesignToken.typescale.standard.label.large.fontSize});
|
|
485
485
|
font-weight: var(--m3e-nav-menu-item-badge-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});
|
|
486
486
|
line-height: var(--m3e-nav-menu-item-badge-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});
|
|
487
|
-
letter-spacing: var(--m3e-nav-menu-badge-
|
|
487
|
+
letter-spacing: var(--m3e-nav-menu-item-badge-tracking, ${DesignToken.typescale.standard.label.large.tracking});
|
|
488
488
|
}
|
|
489
489
|
.toggle {
|
|
490
490
|
transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
|
|
@@ -929,7 +929,7 @@ _M3eNavMenuElement_updateFocusVisible = function _M3eNavMenuElement_updateFocusV
|
|
|
929
929
|
});
|
|
930
930
|
};
|
|
931
931
|
_M3eNavMenuElement_updateItemFocusVisible = function _M3eNavMenuElement_updateItemFocusVisible(item, focused, focusVisible) {
|
|
932
|
-
if (focused) {
|
|
932
|
+
if (focused && focusVisible) {
|
|
933
933
|
item.stateLayer?.show("focused");
|
|
934
934
|
}
|
|
935
935
|
else {
|