@m3e/web 2.5.0 → 2.5.2

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.
Files changed (73) hide show
  1. package/dist/all.js +35 -19
  2. package/dist/all.js.map +1 -1
  3. package/dist/all.min.js +41 -41
  4. package/dist/all.min.js.map +1 -1
  5. package/dist/breadcrumb.js +1 -0
  6. package/dist/breadcrumb.js.map +1 -1
  7. package/dist/breadcrumb.min.js.map +1 -1
  8. package/dist/button.js +1 -1
  9. package/dist/button.js.map +1 -1
  10. package/dist/button.min.js +1 -1
  11. package/dist/button.min.js.map +1 -1
  12. package/dist/calendar.js +6 -2
  13. package/dist/calendar.js.map +1 -1
  14. package/dist/calendar.min.js +1 -1
  15. package/dist/calendar.min.js.map +1 -1
  16. package/dist/content-pane.js +2 -2
  17. package/dist/content-pane.js.map +1 -1
  18. package/dist/content-pane.min.js +1 -1
  19. package/dist/content-pane.min.js.map +1 -1
  20. package/dist/core.js +2 -0
  21. package/dist/core.js.map +1 -1
  22. package/dist/core.min.js.map +1 -1
  23. package/dist/css-custom-data.json +237 -237
  24. package/dist/custom-elements.json +2671 -2631
  25. package/dist/html-custom-data.json +175 -175
  26. package/dist/icon-button.js +1 -1
  27. package/dist/icon-button.js.map +1 -1
  28. package/dist/icon-button.min.js +1 -1
  29. package/dist/icon-button.min.js.map +1 -1
  30. package/dist/nav-bar.js +7 -4
  31. package/dist/nav-bar.js.map +1 -1
  32. package/dist/nav-bar.min.js +1 -1
  33. package/dist/nav-bar.min.js.map +1 -1
  34. package/dist/nav-menu.js +6 -5
  35. package/dist/nav-menu.js.map +1 -1
  36. package/dist/nav-menu.min.js +1 -1
  37. package/dist/nav-menu.min.js.map +1 -1
  38. package/dist/search.js +2 -2
  39. package/dist/search.js.map +1 -1
  40. package/dist/search.min.js +1 -1
  41. package/dist/search.min.js.map +1 -1
  42. package/dist/slider.js +2 -0
  43. package/dist/slider.js.map +1 -1
  44. package/dist/slider.min.js.map +1 -1
  45. package/dist/split-pane.js +3 -3
  46. package/dist/split-pane.js.map +1 -1
  47. package/dist/split-pane.min.js +1 -1
  48. package/dist/split-pane.min.js.map +1 -1
  49. package/dist/src/breadcrumb/BreadcrumbItemElement.d.ts +1 -0
  50. package/dist/src/breadcrumb/BreadcrumbItemElement.d.ts.map +1 -1
  51. package/dist/src/button/styles/ButtonStyle.d.ts.map +1 -1
  52. package/dist/src/calendar/MonthViewElement.d.ts.map +1 -1
  53. package/dist/src/content-pane/ContentPaneElement.d.ts.map +1 -1
  54. package/dist/src/core/shared/primitives/SlideElement.d.ts +2 -0
  55. package/dist/src/core/shared/primitives/SlideElement.d.ts.map +1 -1
  56. package/dist/src/icon-button/styles/IconButtonStyle.d.ts.map +1 -1
  57. package/dist/src/nav-bar/NavItemElement.d.ts.map +1 -1
  58. package/dist/src/nav-menu/NavMenuElement.d.ts.map +1 -1
  59. package/dist/src/nav-menu/NavMenuItemElement.d.ts.map +1 -1
  60. package/dist/src/slider/SliderElement.d.ts +2 -0
  61. package/dist/src/slider/SliderElement.d.ts.map +1 -1
  62. package/dist/src/split-pane/SplitPaneElement.d.ts.map +1 -1
  63. package/dist/src/theme/ThemeElement.d.ts +2 -0
  64. package/dist/src/theme/ThemeElement.d.ts.map +1 -1
  65. package/dist/src/tree/TreeElement.d.ts.map +1 -1
  66. package/dist/theme.js +2 -0
  67. package/dist/theme.js.map +1 -1
  68. package/dist/theme.min.js.map +1 -1
  69. package/dist/tree.js +5 -4
  70. package/dist/tree.js.map +1 -1
  71. package/dist/tree.min.js +1 -1
  72. package/dist/tree.min.js.map +1 -1
  73. package/package.json +1 -1
package/dist/nav-menu.min.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nav-menu.min.js","sources":["../../src/nav-menu/NavMenuItemElement.ts","../../src/nav-menu/NavMenuElement.ts","../../src/nav-menu/NavMenuItemGroupElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n AttachInternals,\r\n customElement,\r\n DesignToken,\r\n Disabled,\r\n EventAttribute,\r\n hasAssignedNodes,\r\n hasCustomState,\r\n M3eFocusRingElement,\r\n M3eRippleElement,\r\n M3eStateLayerElement,\r\n registerStyleSheet,\r\n Role,\r\n Selected,\r\n setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport type { M3eNavMenuElement } from \"./NavMenuElement\";\r\n\r\n/**\r\n * An expandable item, selectable item within a navigation menu.\r\n *\r\n * @description\r\n * The `m3e-nav-menu-item` component represents an expandable, selectable item within a navigation menu.\r\n * It supports nested child items, selection and disabled states, and emits events for open/close transitions.\r\n * The component is highly customizable via slots and CSS custom properties, and is designed for accessible,\r\n * keyboard-navigable menu structures.\r\n *\r\n * @example\r\n * The following example illustrates a navigation menu with a top-level group of menu items.\r\n * ```html\r\n * <m3e-nav-menu>\r\n * <m3e-nav-menu-item-group>\r\n * <m3e-heading slot=\"label\" variant=\"label\" size=\"large\">Mail</m3e-heading>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"mail\"></m3e-icon>\r\n * <span slot=\"label\">Inbox</span>\r\n * <span slot=\"badge\">24</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"send\"></m3e-icon>\r\n * <span slot=\"label\">Outbox</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"favorite\"></m3e-icon>\r\n * <span slot=\"label\">Favorites</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"delete\"></m3e-icon>\r\n * <span slot=\"label\">Trash</span>\r\n * </m3e-nav-menu-item>\r\n * </m3e-nav-menu-item-group>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates a multilevel navigation menu.\r\n * ```html\r\n * <m3e-nav-menu>\r\n * <m3e-nav-menu-item open>\r\n * <m3e-icon slot=\"icon\" name=\"rocket_launch\"></m3e-icon>\r\n * <span slot=\"label\">Getting Started</span>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"widgets\"></m3e-icon>\r\n * <span slot=\"label\">Overview</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"package_2\"></m3e-icon>\r\n * <span slot=\"label\">Installation</span>\r\n * </m3e-nav-menu-item>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <span slot=\"label\">Actions</span>\r\n * <m3e-nav-menu-item><span slot=\"label\">Button</span></m3e-nav-menu-item>\r\n * <m3e-nav-menu-item><span slot=\"label\">Icon</span></m3e-nav-menu-item>\r\n * <m3e-nav-menu-item><span slot=\"label\">Icon Button</span></m3e-nav-menu-item>\r\n * </m3e-nav-menu-item>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @tag m3e-nav-menu-item\r\n *\r\n * @slot - Renders the nested child items.\r\n * @slot label - Renders the label of the item.\r\n * @slot icon - Renders the icon of the item.\r\n * @slot badge - Renders the badge of the item.\r\n * @slot selected-icon - Renders the icon of the item when selected.\r\n * @slot toggle-icon - Renders the toggle icon.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr open - Whether the item is expanded.\r\n * @attr selected - Whether the item is selected.\r\n *\r\n * @fires opening - Emitted when the item begins to open.\r\n * @fires opened - Emitted when the item has opened.\r\n * @fires closing - Emitted when the item begins to close.\r\n * @fires closed - Emitted when the item has closed.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-nav-menu-item-font-size - Font size for the item label.\r\n * @cssprop --m3e-nav-menu-item-font-weight - Font weight for the item label.\r\n * @cssprop --m3e-nav-menu-item-line-height - Line height for the item label.\r\n * @cssprop --m3e-nav-menu-item-tracking - Letter spacing for the item label.\r\n * @cssprop --m3e-nav-menu-item-padding - Inline padding for the item.\r\n * @cssprop --m3e-nav-menu-item-height - Height of the item.\r\n * @cssprop --m3e-nav-menu-item-spacing - Spacing between icon and label.\r\n * @cssprop --m3e-nav-menu-item-shape - Border radius of the item and focus ring.\r\n * @cssprop --m3e-nav-menu-item-icon-size - Size of the icon.\r\n * @cssprop --m3e-nav-menu-item-inset - Indentation for nested items.\r\n * @cssprop --m3e-nav-menu-item-label-color - Text color for the item label.\r\n * @cssprop --m3e-nav-menu-item-selected-label-color - Text color for selected item label.\r\n * @cssprop --m3e-nav-menu-item-selected-container-color - Background color for selected item.\r\n * @cssprop --m3e-nav-menu-item-selected-container-focus-color - Focus color for selected item container.\r\n * @cssprop --m3e-nav-menu-item-selected-container-hover-color - Hover color for selected item container.\r\n * @cssprop --m3e-nav-menu-item-selected-ripple-color - Ripple color for selected item.\r\n * @cssprop --m3e-nav-menu-item-unselected-container-focus-color - Focus color for unselected item container.\r\n * @cssprop --m3e-nav-menu-item-unselected-container-hover-color - Hover color for unselected item container.\r\n * @cssprop --m3e-nav-menu-item-unselected-ripple-color - Ripple color for unselected item.\r\n * @cssprop --m3e-nav-menu-item-open-container-color - Background color for open item with children.\r\n * @cssprop --m3e-nav-menu-item-open-container-focus-color - Focus color for open item container.\r\n * @cssprop --m3e-nav-menu-item-open-container-hover-color - Hover color for open item container.\r\n * @cssprop --m3e-nav-menu-item-open-ripple-color - Ripple color for open item.\r\n * @cssprop --m3e-nav-menu-item-disabled-color - Text color for disabled item.\r\n * @cssprop --m3e-nav-menu-item-disabled-color-opacity - Opacity for disabled item text color.\r\n * @cssprop --m3e-nav-menu-item-badge-font-size - Font size for badge slot.\r\n * @cssprop --m3e-nav-menu-item-badge-font-weight - Font weight for badge slot.\r\n * @cssprop --m3e-nav-menu-item-badge-line-height - Line height for badge slot.\r\n * @cssprop --m3e-nav-menu-item-badge-tracking - Letter spacing for badge slot.\r\n * @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements.\r\n * @cssprop --m3e-nav-menu-item-vertical-inset - Vertical margin for first/last child items.\r\n */\r\n@customElement(\"m3e-nav-menu-item\")\r\nexport class M3eNavMenuItemElement extends Selected(\r\n Disabled(\r\n EventAttribute(AttachInternals(Role(LitElement, \"treeitem\"), true), \"opening\", \"opened\", \"closing\", \"closed\"),\r\n ),\r\n) {\r\n static {\r\n registerStyleSheet(css`\r\n m3e-nav-menu-item > m3e-divider {\r\n margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem);\r\n flex: none;\r\n }\r\n m3e-nav-menu-item > m3e-nav-menu-item:first-of-type {\r\n margin-block-start: var(--m3e-nav-menu-item-vertical-inset, 0.25rem);\r\n }\r\n m3e-nav-menu-item > m3e-nav-menu-item:last-of-type {\r\n margin-block-end: var(--m3e-nav-menu-item-vertical-inset, 0.25rem);\r\n }\r\n `);\r\n }\r\n\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: block;\r\n flex: none;\r\n outline: none;\r\n user-select: none;\r\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n }\r\n .base {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem);\r\n height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${DesignToken.density.calc(-3)});\r\n column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem);\r\n font-size: var(--m3e-nav-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n font-weight: var(--m3e-nav-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n line-height: var(--m3e-nav-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n letter-spacing: var(--m3e-nav-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n transition: ${unsafeCSS(\r\n `color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n )};\r\n }\r\n .base,\r\n .focus-ring {\r\n border-radius: var(--m3e-nav-menu-item-shape, ${DesignToken.shape.corner.full});\r\n }\r\n .label {\r\n flex: 1 1 auto;\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n overflow: hidden;\r\n vertical-align: middle;\r\n }\r\n .icon,\r\n .toggle {\r\n flex: none;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n vertical-align: middle;\r\n }\r\n ::slotted([slot=\"badge\"]) {\r\n flex: none;\r\n position: relative;\r\n font-size: var(--m3e-nav-menu-item-badge-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n font-weight: var(--m3e-nav-menu-item-badge-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n line-height: var(--m3e-nav-menu-item-badge-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n letter-spacing: var(--m3e-nav-menu-item-badge-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n }\r\n .toggle {\r\n transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})\r\n ${DesignToken.motion.easing.standard}`)};\r\n }\r\n :host(:not(:state(-with-icon))) .icon {\r\n display: none;\r\n }\r\n .icon {\r\n margin-inline-start: -0.5rem;\r\n }\r\n .toggle {\r\n margin-inline-end: -0.5rem;\r\n }\r\n .group {\r\n padding-inline-start: var(--m3e-nav-menu-item-inset, 1rem);\r\n }\r\n :host([open]) .toggle {\r\n transform: rotate(180deg);\r\n }\r\n :host(:not(:state(-with-items))) .toggle,\r\n :host(:not(:state(-with-items))) .group {\r\n display: none;\r\n }\r\n ::slotted([slot=\"selected-icon\"]),\r\n ::slotted([slot=\"icon\"]),\r\n ::slotted([slot=\"toggle-icon\"]),\r\n .toggle-icon {\r\n vertical-align: middle;\r\n width: 1em;\r\n height: 1em;\r\n font-size: var(--m3e-nav-menu-item-icon-size, 1.5rem);\r\n }\r\n :host(:not(:disabled)) .base {\r\n cursor: pointer;\r\n }\r\n :host(:not(:disabled)) .base {\r\n color: var(--m3e-nav-menu-item-label-color, ${DesignToken.color.onSurfaceVariant});\r\n }\r\n :host(:disabled) .base {\r\n color: color-mix(\r\n in srgb,\r\n var(--m3e-nav-menu-item-disabled-color, ${DesignToken.color.onSurface})\r\n var(--m3e-nav-menu-item-disabled-color-opacity, 38%),\r\n transparent\r\n );\r\n }\r\n :host([selected]:not(:state(-with-items)):not(:disabled)) .base {\r\n color: var(--m3e-nav-menu-item-selected-label-color, ${DesignToken.color.onSecondaryContainer});\r\n background-color: var(--m3e-nav-menu-item-selected-container-color, ${DesignToken.color.secondaryContainer});\r\n --m3e-state-layer-focus-color: var(\r\n --m3e-nav-menu-item-selected-container-focus-color,\r\n ${DesignToken.color.onSecondaryContainer}\r\n );\r\n --m3e-state-layer-hover-color: var(\r\n --m3e-nav-menu-item-selected-container-hover-color,\r\n ${DesignToken.color.onSecondaryContainer}\r\n );\r\n --m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n }\r\n :host(:not([selected]):not(:state(-with-items)):not(:disabled)) .base {\r\n --m3e-state-layer-focus-color: var(\r\n --m3e-nav-menu-item-unselected-container-focus-color,\r\n ${DesignToken.color.onSurface}\r\n );\r\n --m3e-state-layer-hover-color: var(\r\n --m3e-nav-menu-item-unselected-container-hover-color,\r\n ${DesignToken.color.onSurface}\r\n );\r\n --m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n }\r\n .state-layer {\r\n margin-inline: auto;\r\n }\r\n :host([selected]:state(-with-items):not(:disabled)) .base {\r\n background-color: var(--m3e-nav-menu-item-open-container-color, ${DesignToken.color.surfaceContainerHighest});\r\n --m3e-state-layer-focus-color: var(\r\n --m3e-nav-menu-item-open-container-focus-color,\r\n ${DesignToken.color.onSurface}\r\n );\r\n --m3e-state-layer-hover-color: var(\r\n --m3e-nav-menu-item-open-container-hover-color,\r\n ${DesignToken.color.onSurface}\r\n );\r\n --m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${DesignToken.color.onSurface});\r\n }\r\n ::slotted(a[slot=\"label\"]) {\r\n all: unset;\r\n }\r\n @media (prefers-reduced-motion) {\r\n .base,\r\n .toggle,\r\n .state-layer {\r\n transition: none !important;\r\n }\r\n }\r\n @media (forced-colors: active) {\r\n .base,\r\n .state-layer {\r\n transition: none !important;\r\n }\r\n\r\n :host(:disabled) .base {\r\n color: GrayText;\r\n }\r\n :host(:not([selected]):not(:disabled)) .base {\r\n color: ButtonText;\r\n }\r\n :host([selected]:not(:state(-with-items)):not(:disabled)) .base {\r\n forced-color-adjust: none;\r\n color: ButtonFace;\r\n background-color: ButtonText;\r\n }\r\n :host([selected]:state(-with-items):not(:disabled)) .base {\r\n background-color: unset;\r\n color: ButtonText;\r\n }\r\n }\r\n `;\r\n\r\n /** @internal */ @query(\".state-layer\") readonly stateLayer?: M3eStateLayerElement;\r\n /** @internal */ @query(\".focus-ring\") readonly focusRing?: M3eFocusRingElement;\r\n /** @internal */ @query(\".ripple\") readonly ripple?: M3eRippleElement;\r\n /** @private */ @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n /** @private */ @state() private _hasChildItems = false;\r\n\r\n /** @private */ #items: M3eNavMenuItemElement[] = [];\r\n /** @private */ #menu: M3eNavMenuElement | null = null;\r\n /** @private */ #path = new Array<M3eNavMenuItemElement>();\r\n /** @private */ #link: HTMLAnchorElement | null = null;\r\n\r\n /**\r\n * Whether the item is expanded.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) open = false;\r\n\r\n /** A reference to the nested `HTMLAnchorElement`. */\r\n get link(): HTMLAnchorElement | null {\r\n return this.#link;\r\n }\r\n\r\n /** A reference to the element used to present the label of the item. */\r\n get label(): HTMLElement | null {\r\n return this._base ?? null;\r\n }\r\n\r\n /** Whether the item is visible. */\r\n get visible(): boolean {\r\n return !this.#path.some((x) => !x.open);\r\n }\r\n\r\n /** The full path of the item, starting with the top-most ancestor, including this item. */\r\n get path(): ReadonlyArray<M3eNavMenuItemElement> {\r\n return [...this.#path, this];\r\n }\r\n\r\n /** Whether the item has child items. */\r\n get hasChildItems(): boolean {\r\n return this._hasChildItems;\r\n }\r\n\r\n /** The parenting item. */\r\n get parentItem(): M3eNavMenuItemElement | null {\r\n return this.#path[this.#path.length - 1] ?? null;\r\n }\r\n\r\n /** The items that immediately descend from this item. */\r\n get childItems(): readonly M3eNavMenuItemElement[] {\r\n return this.#items;\r\n }\r\n\r\n /** The one-based level of the item. */\r\n get level(): number {\r\n return this.#path.length + 1;\r\n }\r\n\r\n /**\r\n * Expands this item, and optionally, all descendants.\r\n * @param {boolean} [descendants=false] Whether to expand all descendants.\r\n */\r\n expand(descendants: boolean = false): void {\r\n if (this.hasChildItems) {\r\n this.open = true;\r\n if (descendants) {\r\n this.childItems.forEach((x) => x.expand(true));\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Collapses this item, and optionally, all descendants.\r\n * @param {boolean} [descendants=false] Whether to expand all descendants.\r\n */\r\n collapse(descendants: boolean = false): void {\r\n if (this.hasChildItems) {\r\n this.open = false;\r\n if (descendants) {\r\n this.childItems.forEach((x) => x.collapse(true));\r\n }\r\n }\r\n }\r\n\r\n /** Toggles the expanded state of the item. */\r\n toggle(): void {\r\n if (this.hasChildItems) {\r\n this.open = !this.open;\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this.#path.length = 0;\r\n for (\r\n let item = this.parentElement?.closest(\"m3e-nav-menu-item\");\r\n item;\r\n item = item.parentElement?.closest(\"m3e-nav-menu-item\")\r\n ) {\r\n this.#path.push(item);\r\n }\r\n this.#path.reverse();\r\n\r\n this.style.setProperty(\"--_nav-menu-item-level\", `${this.level}`);\r\n this.#menu = this.closest(\"m3e-nav-menu\");\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.#path.length = 0;\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues): void {\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"selected\")) {\r\n // Remove aria-selected and just use aria-current.\r\n this.ariaSelected = null;\r\n this.ariaCurrent = this.hasChildItems ? null : `${this.selected}`;\r\n for (const icon of this.querySelectorAll(\":scope > m3e-icon[slot]\")) {\r\n icon.toggleAttribute(\"filled\", this.selected);\r\n }\r\n\r\n this.#path.forEach((x) => (x.selected = this.selected));\r\n if (this.selected && !this.hasChildItems) {\r\n this.closest(\"m3e-nav-menu\")?.[selectionManager].notifySelectionChange(this);\r\n }\r\n }\r\n\r\n if (changedProperties.has(\"open\") || changedProperties.has(\"_hasChildItems\")) {\r\n this.ariaExpanded = this._hasChildItems ? `${this.open}` : null;\r\n }\r\n\r\n if ((changedProperties.has(\"_hasChildItems\") && this.disabled) || changedProperties.has(\"disabled\")) {\r\n this.#items.forEach((x) => (x.disabled = this.disabled));\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n super.firstUpdated(_changedProperties);\r\n\r\n const base = this._base;\r\n if (base) {\r\n [this.focusRing, this.stateLayer, this.ripple].forEach((x) => x?.attach(base));\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"base\" @click=\"${this.#handleClick}\">\r\n <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n <m3e-focus-ring class=\"focus-ring\" inward ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n <div class=\"icon\" aria-hidden=\"true\">${this.#renderIcon()}</div>\r\n <div class=\"label\">\r\n <slot name=\"label\" @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n </div>\r\n <slot name=\"badge\"></slot>\r\n <div aria-hidden=\"true\" class=\"toggle\">\r\n <slot name=\"toggle-icon\">\r\n <svg class=\"toggle-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"M480-360 280-560h400L480-360Z\" />\r\n </svg>\r\n </slot>\r\n </div>\r\n </div>\r\n <m3e-collapsible\r\n class=\"group\"\r\n role=\"group\"\r\n aria-hidden=\"${ifDefined(this._hasChildItems ? undefined : \"true\")}\"\r\n ?open=\"${this._hasChildItems && this.open}\"\r\n @opening=\"${this.#handleCollapsibleEvent}\"\r\n @opened=\"${this.#handleCollapsibleEvent}\"\r\n @closing=\"${this.#handleCollapsibleEvent}\"\r\n @closed=\"${this.#handleCollapsibleEvent}\"\r\n >\r\n <slot @slotchange=\"${this.#handleItemSlotChange}\"></slot>\r\n </m3e-collapsible>`;\r\n }\r\n\r\n /** @private */\r\n #renderIcon(): unknown {\r\n const icon = html`<slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>`;\r\n return this.selected && !this.hasChildItems\r\n ? html`<slot name=\"selected-icon\" @slotchange=\"${this.#handleIconSlotChange}\">${icon}</slot>`\r\n : icon;\r\n }\r\n\r\n /** @private */\r\n #handleIconSlotChange(e: Event) {\r\n setCustomState(this, \"-with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n }\r\n\r\n /** @private */\r\n #handleSlotChange(e: Event): void {\r\n this.#link =\r\n (<HTMLSlotElement>e.target).assignedElements({ flatten: true }).find((x) => x instanceof HTMLAnchorElement) ??\r\n null;\r\n\r\n this.#link?.setAttribute(\"tabindex\", \"-1\");\r\n }\r\n\r\n /** @private */\r\n #handleItemSlotChange(e: Event): void {\r\n this.#items = (<HTMLSlotElement>e.target)\r\n .assignedElements({ flatten: true })\r\n .filter((x) => x instanceof M3eNavMenuItemElement);\r\n\r\n const hadChildItems = this._hasChildItems;\r\n this._hasChildItems = this.#items.length > 0;\r\n setCustomState(this, \"-with-items\", this._hasChildItems);\r\n\r\n if (hadChildItems || this._hasChildItems) {\r\n this.selected = this.#items.some((x) => x.selected);\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleClick(): void {\r\n if (this.disabled) return;\r\n\r\n this.#menu?.[selectionManager].setActiveItem(this);\r\n if (!this._hasChildItems) {\r\n this.#menu?.[selectionManager].select(this);\r\n this.#path.forEach((x) => (x.selected = this.selected));\r\n this.#link?.click();\r\n\r\n const drawerContainer = this.closest(\"m3e-drawer-container\");\r\n if (drawerContainer) {\r\n const drawer = this.closest(\"[slot='start']\") ?? this.closest(\"[slot='end']\");\r\n if (\r\n drawer &&\r\n (hasCustomState(drawerContainer, `-${drawer.slot}-push`) ||\r\n hasCustomState(drawerContainer, `-${drawer.slot}-over`))\r\n ) {\r\n setTimeout(() => {\r\n drawerContainer.removeAttribute(drawer.slot);\r\n drawerContainer.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }, 300);\r\n }\r\n }\r\n } else {\r\n this.toggle();\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleCollapsibleEvent(e: Event): void {\r\n e.stopPropagation();\r\n this.dispatchEvent(new Event(e.type, { bubbles: true }));\r\n }\r\n}\r\n\r\ninterface M3eNavMenuItemElementEventMap extends HTMLElementEventMap {\r\n opening: Event;\r\n opened: Event;\r\n closing: Event;\r\n closed: Event;\r\n}\r\n\r\nexport interface M3eNavMenuItemElement {\r\n addEventListener<K extends keyof M3eNavMenuItemElementEventMap>(\r\n type: K,\r\n listener: (this: M3eNavMenuItemElement, ev: M3eNavMenuItemElementEventMap[K]) => void,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n addEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener<K extends keyof M3eNavMenuItemElementEventMap>(\r\n type: K,\r\n listener: (this: M3eNavMenuItemElement, ev: M3eNavMenuItemElementEventMap[K]) => void,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-nav-menu-item\": M3eNavMenuItemElement;\r\n }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport {\r\n customElement,\r\n DesignToken,\r\n FocusController,\r\n PressedController,\r\n registerStyleSheet,\r\n Role,\r\n scrollIntoViewIfNeeded,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eNavMenuItemElement } from \"./NavMenuItemElement\";\r\n\r\n/**\r\n * A hierarchical menu, typically used on larger devices, that allows a user to switch between views.\r\n *\r\n * @description\r\n * The `m3e-nav-menu` component provides a hierarchical, accessible navigation menu supporting\r\n * nested expandable items, keyboard navigation, and focus management. It is highly customizable\r\n * via slots and CSS custom properties, and is designed for use in sidebars, navigation drawers,\r\n * and complex menu structures.\r\n *\r\n * @example\r\n * The following example illustrates a navigation menu with a top-level group of menu items.\r\n * ```html\r\n * <m3e-nav-menu>\r\n * <m3e-nav-menu-item-group>\r\n * <m3e-heading slot=\"label\" variant=\"label\" size=\"large\">Mail</m3e-heading>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"mail\"></m3e-icon>\r\n * <span slot=\"label\">Inbox</span>\r\n * <span slot=\"badge\">24</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"send\"></m3e-icon>\r\n * <span slot=\"label\">Outbox</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"favorite\"></m3e-icon>\r\n * <span slot=\"label\">Favorites</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"delete\"></m3e-icon>\r\n * <span slot=\"label\">Trash</span>\r\n * </m3e-nav-menu-item>\r\n * </m3e-nav-menu-item-group>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates a multilevel navigation menu.\r\n * ```html\r\n * <m3e-nav-menu>\r\n * <m3e-nav-menu-item open>\r\n * <m3e-icon slot=\"icon\" name=\"rocket_launch\"></m3e-icon>\r\n * <span slot=\"label\">Getting Started</span>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"widgets\"></m3e-icon>\r\n * <span slot=\"label\">Overview</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"package_2\"></m3e-icon>\r\n * <span slot=\"label\">Installation</span>\r\n * </m3e-nav-menu-item>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <span slot=\"label\">Actions</span>\r\n * <m3e-nav-menu-item><span slot=\"label\">Button</span></m3e-nav-menu-item>\r\n * <m3e-nav-menu-item><span slot=\"label\">Icon</span></m3e-nav-menu-item>\r\n * <m3e-nav-menu-item><span slot=\"label\">Icon Button</span></m3e-nav-menu-item>\r\n * </m3e-nav-menu-item>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @tag m3e-nav-menu\r\n *\r\n * @slot - Renders the items of the menu.\r\n *\r\n * @cssprop --m3e-nav-menu-padding-top - Top padding for the menu.\r\n * @cssprop --m3e-nav-menu-padding-bottom - Bottom padding for the menu.\r\n * @cssprop --m3e-nav-menu-padding-left - Left padding for the menu.\r\n * @cssprop --m3e-nav-menu-padding-right - Right padding for the menu.\r\n * @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements in the menu.\r\n * @cssprop --m3e-nav-menu-scrollbar-width - Width of the menu scrollbar.\r\n * @cssprop --m3e-nav-menu-scrollbar-color - Color of the menu scrollbar.\r\n */\r\n@customElement(\"m3e-nav-menu\")\r\nexport class M3eNavMenuElement extends Role(LitElement, \"tree\") {\r\n static {\r\n registerStyleSheet(css`\r\n m3e-nav-menu > m3e-divider {\r\n margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem);\r\n flex: none;\r\n }\r\n `);\r\n }\r\n\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: block;\r\n outline: none;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n min-height: 0;\r\n scrollbar-width: ${DesignToken.scrollbar.width};\r\n scrollbar-color: ${DesignToken.scrollbar.color};\r\n }\r\n .base {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n min-height: inherit;\r\n box-sizing: border-box;\r\n padding-block-start: var(--m3e-nav-menu-padding-top, 0.5rem);\r\n padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem);\r\n padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem);\r\n padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem);\r\n }\r\n `;\r\n\r\n /** @private */ private static __nextId = 0;\r\n /** @private */ #ignoreFocusVisible = false;\r\n /** @private */ #ignoreFocus = false;\r\n\r\n /** @private */\r\n readonly [selectionManager] = new SelectionManager<M3eNavMenuItemElement>()\r\n .withVerticalOrientation()\r\n .withHomeAndEnd()\r\n .withTypeahead()\r\n .withSkipPredicate((x) => x.disabled || !x.visible)\r\n .disableRovingTabIndex()\r\n .onActiveItemChange(() => {\r\n if (this[selectionManager].activeItem) {\r\n this.#activateItem(this[selectionManager].activeItem);\r\n }\r\n })\r\n .onSelectedItemsChange(() => {\r\n const selected = this.selected;\r\n for (const item of this.items) {\r\n if (item !== selected) {\r\n this.#updateItemFocusVisible(item, false, false);\r\n }\r\n }\r\n\r\n if (selected?.label) {\r\n scrollIntoViewIfNeeded(selected.label, this, { block: \"start\", behavior: \"smooth\" });\r\n }\r\n });\r\n\r\n /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n /** @private */ readonly #keyUpHandler = (e: KeyboardEvent) => this.#handleKeyUp(e);\r\n /** @private */ readonly #pointerDownHandler = (e: Event) => this.#handlePointerDown(e);\r\n\r\n constructor() {\r\n super();\r\n\r\n new PressedController(this, { callback: (pressed) => (this.#ignoreFocus = pressed) });\r\n new FocusController(this, {\r\n callback: () => {\r\n if (!this.#ignoreFocus) {\r\n this.#updateFocusVisible();\r\n }\r\n },\r\n });\r\n }\r\n\r\n /** The selected item of the menu. */\r\n get selected(): M3eNavMenuItemElement | null {\r\n return this[selectionManager].selectedItems[0] ?? null;\r\n }\r\n\r\n /** All the items of the menu. */\r\n get items(): readonly M3eNavMenuItemElement[] {\r\n return this[selectionManager].items;\r\n }\r\n\r\n /**\r\n * Expands all items, and optionally, all descendants.\r\n * @param {boolean} [descendants=false] Whether to expand all descendants.\r\n */\r\n expand(descendants?: boolean): void;\r\n\r\n /**\r\n * Expands the specified items, and optionally, all descendants.\r\n * @param {M3eNavMenuItemElement[]} items The items to expand.\r\n * @param {boolean} [descendants=false] Whether to expand all descendants.\r\n */\r\n expand(items: M3eNavMenuItemElement[], descendants?: boolean): void;\r\n\r\n /** @internal */\r\n expand(itemsOrDescendants?: M3eNavMenuItemElement[] | boolean, maybeDescendants: boolean = false): void {\r\n const items = Array.isArray(itemsOrDescendants) ? itemsOrDescendants : this[selectionManager].items;\r\n const descendants = typeof itemsOrDescendants === \"boolean\" ? itemsOrDescendants : maybeDescendants;\r\n items.forEach((x) => x.expand(descendants));\r\n }\r\n\r\n /**\r\n * Collapses all items, and optionally, all descendants.\r\n * @param {boolean} [descendants=false] Whether to collapse all descendants.\r\n */\r\n collapse(descendants?: boolean): void;\r\n\r\n /**\r\n * Collapses the specified items, and optionally, all descendants.\r\n * @param {M3eNavMenuItemElement[]} items The items to collapse.\r\n * @param {boolean} [descendants=false] Whether to collapse all descendants.\r\n */\r\n collapse(items: M3eNavMenuItemElement[], descendants?: boolean): void;\r\n\r\n /** @internal */\r\n collapse(itemsOrDescendants?: M3eNavMenuItemElement[] | boolean, maybeDescendants: boolean = false): void {\r\n const items = Array.isArray(itemsOrDescendants) ? itemsOrDescendants : this[selectionManager].items;\r\n const descendants = typeof itemsOrDescendants === \"boolean\" ? itemsOrDescendants : maybeDescendants;\r\n\r\n items.forEach((x) => x.collapse(descendants));\r\n const activeItem = this[selectionManager].activeItem;\r\n if (activeItem && !activeItem.visible) {\r\n for (let parent = activeItem.parentItem; parent; parent = parent.parentItem) {\r\n if (parent.visible) {\r\n this[selectionManager].setActiveItem(parent);\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this.setAttribute(\"tabindex\", \"0\");\r\n\r\n this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n this.addEventListener(\"keyup\", this.#keyUpHandler);\r\n this.addEventListener(\"pointerdown\", this.#pointerDownHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n\r\n this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n this.removeEventListener(\"keyup\", this.#keyUpHandler);\r\n this.removeEventListener(\"pointerdown\", this.#pointerDownHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"base\">\r\n <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #handleSlotChange(): void {\r\n for (const divider of this.querySelectorAll<HTMLElement>(\"m3e-divider\")) {\r\n divider.ariaHidden = \"true\";\r\n }\r\n const { added } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-nav-menu-item\")]);\r\n for (const item of added) {\r\n item.id = item.id || `m3e-nav-menu-item-${M3eNavMenuElement.__nextId++}`;\r\n }\r\n if (this[selectionManager].activeItem) {\r\n this.setAttribute(\"aria-activedescendant\", this[selectionManager].activeItem.id);\r\n this.#updateFocusVisible();\r\n } else {\r\n this.removeAttribute(\"aria-activedescendant\");\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleKeyDown(e: KeyboardEvent): void {\r\n this.#ignoreFocusVisible = false;\r\n this.#updateFocusVisible();\r\n\r\n const item = this[selectionManager].activeItem;\r\n if (e.defaultPrevented || !item || item.disabled) return;\r\n\r\n switch (e.key) {\r\n case \"Enter\":\r\n case \" \":\r\n e.preventDefault();\r\n\r\n if (e.key === \" \" && item.ripple && !item.ripple.visible) {\r\n item.ripple.centered = true;\r\n item.ripple.show(0, 0, true);\r\n item.ripple.centered = false;\r\n }\r\n\r\n if (item.hasChildItems) {\r\n requestAnimationFrame(() => item.toggle());\r\n } else if (!item.selected) {\r\n this[selectionManager].select(item);\r\n item.link?.click();\r\n }\r\n break;\r\n\r\n case \"*\":\r\n e.preventDefault();\r\n item.expand(true);\r\n break;\r\n\r\n case \"Left\":\r\n case \"ArrowLeft\":\r\n e.preventDefault();\r\n if (M3eDirectionality.current === \"ltr\") {\r\n if (item.hasChildItems && item.open) {\r\n requestAnimationFrame(() => item.collapse());\r\n } else {\r\n const parent = item.parentItem;\r\n if (parent) {\r\n this[selectionManager].setActiveItem(parent);\r\n }\r\n }\r\n } else if (item.hasChildItems && !item.open) {\r\n item.expand();\r\n }\r\n\r\n break;\r\n\r\n case \"Right\":\r\n case \"ArrowRight\":\r\n e.preventDefault();\r\n if (M3eDirectionality.current === \"rtl\") {\r\n if (item.hasChildItems && item.open) {\r\n requestAnimationFrame(() => item.collapse());\r\n } else {\r\n const parent = item.parentItem;\r\n if (parent) {\r\n this[selectionManager].setActiveItem(parent);\r\n }\r\n }\r\n } else if (item.hasChildItems && !item.open) {\r\n item.expand();\r\n }\r\n break;\r\n\r\n default:\r\n this[selectionManager].onKeyDown(e);\r\n break;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleKeyUp(e: KeyboardEvent): void {\r\n const item = this[selectionManager].activeItem;\r\n if (!e.defaultPrevented && item && !item.disabled && e.key === \" \") {\r\n item.ripple?.hide();\r\n }\r\n }\r\n\r\n /** @private */\r\n #handlePointerDown(e: Event): void {\r\n if (!e.defaultPrevented && !this.#ignoreFocusVisible) {\r\n this.#ignoreFocusVisible = true;\r\n\r\n const item = e\r\n .composedPath()\r\n .reverse()\r\n .find((x) => x instanceof M3eNavMenuItemElement);\r\n\r\n if (item && !item.disabled) {\r\n this.#updateItemFocusVisible(item, true, false);\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #activateItem(item: M3eNavMenuItemElement): void {\r\n this.setAttribute(\"aria-activedescendant\", item.id);\r\n if (item.label) {\r\n scrollIntoViewIfNeeded(item.label, this, { block: \"nearest\", behavior: \"smooth\" });\r\n }\r\n this.#updateFocusVisible();\r\n }\r\n\r\n /** @private */\r\n #updateFocusVisible(): void {\r\n const focused = this.matches(\":focus\") || this.matches(\":focus-within\");\r\n const focusVisible = !this.#ignoreFocusVisible && this.matches(\":focus-visible\");\r\n this[selectionManager].items.forEach((x) => {\r\n const active = x === this[selectionManager].activeItem;\r\n this.#updateItemFocusVisible(x, active && focused, active && focusVisible);\r\n });\r\n }\r\n\r\n /** @private */\r\n #updateItemFocusVisible(item: M3eNavMenuItemElement, focused: boolean, focusVisible: boolean): void {\r\n if (focused && focusVisible) {\r\n item.stateLayer?.show(\"focused\");\r\n } else {\r\n item.stateLayer?.hide(\"focused\");\r\n }\r\n if (focusVisible) {\r\n item.focusRing?.show();\r\n } else {\r\n item.focusRing?.hide();\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-nav-menu\": M3eNavMenuElement;\r\n }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { AttachInternals, customElement, deleteCustomState, Role, setCustomState } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A top-level semantic grouping of items in a navigation menu.\r\n *\r\n * @description\r\n * The `m3e-nav-menu-item-group` is a top-level semantic grouping of items in a navigation menu.\r\n * It encapsulates related items under a shared heading or label, supporting visual hierarchy and accessibility.\r\n *\r\n * @example\r\n * The following example illustrates a navigation menu with a top-level group of menu items.\r\n * ```html\r\n * <m3e-nav-menu>\r\n * <m3e-nav-menu-item-group>\r\n * <m3e-heading slot=\"label\" variant=\"label\" size=\"large\">Mail</m3e-heading>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"mail\"></m3e-icon>\r\n * <span slot=\"label\">Inbox</span>\r\n * <span slot=\"badge\">24</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"send\"></m3e-icon>\r\n * <span slot=\"label\">Outbox</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"favorite\"></m3e-icon>\r\n * <span slot=\"label\">Favorites</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"delete\"></m3e-icon>\r\n * <span slot=\"label\">Trash</span>\r\n * </m3e-nav-menu-item>\r\n * </m3e-nav-menu-item-group>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @tag m3e-nav-menu-item-group\r\n *\r\n * @slot - Renders the items of the group.\r\n * @slot label - Renders the label of the group.\r\n *\r\n * @cssprop --m3e-nav-menu-item-group-label-inset - Insets the label from the start edge of the group.\r\n * @cssprop --m3e-nav-menu-item-group-label-space - Vertical spacing around the group's label.\r\n */\r\n@customElement(\"m3e-nav-menu-item-group\")\r\nexport class M3eNavMenuItemGroupElement extends AttachInternals(Role(LitElement, \"group\")) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: contents;\r\n }\r\n :host(:not(:state(-with-label))) .label {\r\n display: none;\r\n }\r\n .label {\r\n margin-inline-start: var(--m3e-nav-menu-item-group-label-inset, 1rem);\r\n margin-block-end: var(--m3e-nav-menu-item-group-label-space, 1rem);\r\n flex: none;\r\n }\r\n :host(:state(-divided)) .label {\r\n margin-block-start: calc(\r\n var(--m3e-nav-menu-item-group-label-space, 1rem) - var(--m3e-nav-menu-divider-margin, 0.25rem)\r\n );\r\n }\r\n :host(:not(:state(-divided))) .label {\r\n margin-block-start: var(--m3e-nav-menu-item-group-label-space, 1rem);\r\n }\r\n `;\r\n\r\n /** @private */ private static __nextId = 0;\r\n /** @private */ #labelId = `m3e-nav-menu-item-group-label-${M3eNavMenuItemGroupElement.__nextId++}`;\r\n /** @private */ #label?: Element;\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n setCustomState(this, \"-divided\", this.previousElementSibling?.tagName === \"M3E-DIVIDER\");\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n deleteCustomState(this, \"-divided\");\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"label\">\r\n <slot name=\"label\" @slotchange=\"${this.#handleLabelSlotChange}\"></slot>\r\n </div>\r\n <slot></slot>`;\r\n }\r\n\r\n /** @private */\r\n #handleLabelSlotChange(e: Event): void {\r\n const label = (e.target as HTMLSlotElement).assignedElements({ flatten: true })[0];\r\n if (label !== this.#label) {\r\n // If the label is changed and its id matched the reversed id,\r\n // clear the id in the event the element is moved elsewhere in the DOM.\r\n\r\n if (this.#label?.id === this.#labelId) {\r\n this.#label.id = \"\";\r\n }\r\n\r\n this.#label = label;\r\n\r\n if (this.#label) {\r\n this.#label.id = this.#label.id || this.#labelId;\r\n this.setAttribute(\"aria-labelledby\", this.#label.id);\r\n } else {\r\n this.removeAttribute(\"aria-labelledby\");\r\n }\r\n }\r\n setCustomState(this, \"-with-label\", this.#label !== undefined);\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-nav-menu-item-group\": M3eNavMenuItemGroupElement;\r\n }\r\n}\r\n"],"names":["M3eNavMenuItemElement","M3eNavMenuItemElement_1","Selected","Disabled","EventAttribute","AttachInternals","Role","LitElement","constructor","this","_hasChildItems","_M3eNavMenuItemElement_items","set","_M3eNavMenuItemElement_menu","_M3eNavMenuItemElement_path","Array","_M3eNavMenuItemElement_link","open","link","__classPrivateFieldGet","label","_base","visible","some","x","path","hasChildItems","parentItem","length","childItems","level","expand","descendants","forEach","collapse","toggle","connectedCallback","super","item","parentElement","closest","push","reverse","style","setProperty","__classPrivateFieldSet","disconnectedCallback","update","changedProperties","has","ariaSelected","ariaCurrent","selected","icon","querySelectorAll","toggleAttribute","selectionManager","notifySelectionChange","ariaExpanded","disabled","firstUpdated","_changedProperties","base","focusRing","stateLayer","ripple","attach","render","html","_M3eNavMenuItemElement_instances","_M3eNavMenuItemElement_handleClick","_M3eNavMenuItemElement_renderIcon","call","_M3eNavMenuItemElement_handleSlotChange","ifDefined","undefined","_M3eNavMenuItemElement_handleCollapsibleEvent","_M3eNavMenuItemElement_handleItemSlotChange","_M3eNavMenuItemElement_handleIconSlotChange","e","setCustomState","hasAssignedNodes","target","assignedElements","flatten","find","HTMLAnchorElement","setAttribute","filter","hadChildItems","setActiveItem","select","click","drawerContainer","drawer","hasCustomState","slot","setTimeout","removeAttribute","dispatchEvent","Event","bubbles","stopPropagation","type","registerStyleSheet","css","styles","DesignToken","density","calc","typescale","standard","large","fontSize","fontWeight","lineHeight","tracking","unsafeCSS","motion","duration","short4","easing","shape","corner","full","medium1","color","onSurfaceVariant","onSurface","onSecondaryContainer","secondaryContainer","surfaceContainerHighest","__decorate","query","prototype","state","property","Boolean","reflect","customElement","M3eNavMenuElement","M3eNavMenuElement_1","_M3eNavMenuElement_ignoreFocusVisible","_M3eNavMenuElement_ignoreFocus","_b","SelectionManager","withVerticalOrientation","withHomeAndEnd","withTypeahead","withSkipPredicate","disableRovingTabIndex","onActiveItemChange","activeItem","_M3eNavMenuElement_instances","_M3eNavMenuElement_activateItem","onSelectedItemsChange","items","_M3eNavMenuElement_updateItemFocusVisible","scrollIntoViewIfNeeded","block","behavior","_M3eNavMenuElement_keyDownHandler","_M3eNavMenuElement_keyUpHandler","_M3eNavMenuElement_pointerDownHandler","PressedController","callback","pressed","FocusController","_M3eNavMenuElement_updateFocusVisible","selectedItems","itemsOrDescendants","maybeDescendants","isArray","parent","addEventListener","removeEventListener","_M3eNavMenuElement_handleSlotChange","divider","ariaHidden","added","setItems","id","__nextId","defaultPrevented","key","preventDefault","centered","show","requestAnimationFrame","M3eDirectionality","current","onKeyDown","hide","composedPath","focused","matches","focusVisible","active","scrollbar","width","M3eNavMenuItemGroupElement","M3eNavMenuItemGroupElement_1","_M3eNavMenuItemGroupElement_labelId","_M3eNavMenuItemGroupElement_label","previousElementSibling","tagName","deleteCustomState","_M3eNavMenuItemGroupElement_instances","_M3eNavMenuItemGroupElement_handleLabelSlotChange"],"mappings":"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"}
1
+ {"version":3,"file":"nav-menu.min.js","sources":["../../src/nav-menu/NavMenuItemElement.ts","../../src/nav-menu/NavMenuElement.ts","../../src/nav-menu/NavMenuItemGroupElement.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n AttachInternals,\r\n customElement,\r\n DesignToken,\r\n Disabled,\r\n EventAttribute,\r\n hasAssignedNodes,\r\n hasCustomState,\r\n M3eFocusRingElement,\r\n M3eRippleElement,\r\n M3eStateLayerElement,\r\n registerStyleSheet,\r\n Role,\r\n Selected,\r\n setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport type { M3eNavMenuElement } from \"./NavMenuElement\";\r\n\r\n/**\r\n * An expandable item, selectable item within a navigation menu.\r\n *\r\n * @description\r\n * The `m3e-nav-menu-item` component represents an expandable, selectable item within a navigation menu.\r\n * It supports nested child items, selection and disabled states, and emits events for open/close transitions.\r\n * The component is highly customizable via slots and CSS custom properties, and is designed for accessible,\r\n * keyboard-navigable menu structures.\r\n *\r\n * @example\r\n * The following example illustrates a navigation menu with a top-level group of menu items.\r\n * ```html\r\n * <m3e-nav-menu>\r\n * <m3e-nav-menu-item-group>\r\n * <m3e-heading slot=\"label\" variant=\"label\" size=\"large\">Mail</m3e-heading>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"mail\"></m3e-icon>\r\n * <span slot=\"label\">Inbox</span>\r\n * <span slot=\"badge\">24</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"send\"></m3e-icon>\r\n * <span slot=\"label\">Outbox</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"favorite\"></m3e-icon>\r\n * <span slot=\"label\">Favorites</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"delete\"></m3e-icon>\r\n * <span slot=\"label\">Trash</span>\r\n * </m3e-nav-menu-item>\r\n * </m3e-nav-menu-item-group>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates a multilevel navigation menu.\r\n * ```html\r\n * <m3e-nav-menu>\r\n * <m3e-nav-menu-item open>\r\n * <m3e-icon slot=\"icon\" name=\"rocket_launch\"></m3e-icon>\r\n * <span slot=\"label\">Getting Started</span>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"widgets\"></m3e-icon>\r\n * <span slot=\"label\">Overview</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"package_2\"></m3e-icon>\r\n * <span slot=\"label\">Installation</span>\r\n * </m3e-nav-menu-item>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <span slot=\"label\">Actions</span>\r\n * <m3e-nav-menu-item><span slot=\"label\">Button</span></m3e-nav-menu-item>\r\n * <m3e-nav-menu-item><span slot=\"label\">Icon</span></m3e-nav-menu-item>\r\n * <m3e-nav-menu-item><span slot=\"label\">Icon Button</span></m3e-nav-menu-item>\r\n * </m3e-nav-menu-item>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @tag m3e-nav-menu-item\r\n *\r\n * @slot - Renders the nested child items.\r\n * @slot label - Renders the label of the item.\r\n * @slot icon - Renders the icon of the item.\r\n * @slot badge - Renders the badge of the item.\r\n * @slot selected-icon - Renders the icon of the item when selected.\r\n * @slot toggle-icon - Renders the toggle icon.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr open - Whether the item is expanded.\r\n * @attr selected - Whether the item is selected.\r\n *\r\n * @fires opening - Emitted when the item begins to open.\r\n * @fires opened - Emitted when the item has opened.\r\n * @fires closing - Emitted when the item begins to close.\r\n * @fires closed - Emitted when the item has closed.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-nav-menu-item-font-size - Font size for the item label.\r\n * @cssprop --m3e-nav-menu-item-font-weight - Font weight for the item label.\r\n * @cssprop --m3e-nav-menu-item-line-height - Line height for the item label.\r\n * @cssprop --m3e-nav-menu-item-tracking - Letter spacing for the item label.\r\n * @cssprop --m3e-nav-menu-item-padding - Inline padding for the item.\r\n * @cssprop --m3e-nav-menu-item-height - Height of the item.\r\n * @cssprop --m3e-nav-menu-item-spacing - Spacing between icon and label.\r\n * @cssprop --m3e-nav-menu-item-shape - Border radius of the item and focus ring.\r\n * @cssprop --m3e-nav-menu-item-icon-size - Size of the icon.\r\n * @cssprop --m3e-nav-menu-item-inset - Indentation for nested items.\r\n * @cssprop --m3e-nav-menu-item-label-color - Text color for the item label.\r\n * @cssprop --m3e-nav-menu-item-selected-label-color - Text color for selected item label.\r\n * @cssprop --m3e-nav-menu-item-selected-container-color - Background color for selected item.\r\n * @cssprop --m3e-nav-menu-item-selected-container-focus-color - Focus color for selected item container.\r\n * @cssprop --m3e-nav-menu-item-selected-container-hover-color - Hover color for selected item container.\r\n * @cssprop --m3e-nav-menu-item-selected-ripple-color - Ripple color for selected item.\r\n * @cssprop --m3e-nav-menu-item-unselected-container-focus-color - Focus color for unselected item container.\r\n * @cssprop --m3e-nav-menu-item-unselected-container-hover-color - Hover color for unselected item container.\r\n * @cssprop --m3e-nav-menu-item-unselected-ripple-color - Ripple color for unselected item.\r\n * @cssprop --m3e-nav-menu-item-open-container-color - Background color for open item with children.\r\n * @cssprop --m3e-nav-menu-item-open-container-focus-color - Focus color for open item container.\r\n * @cssprop --m3e-nav-menu-item-open-container-hover-color - Hover color for open item container.\r\n * @cssprop --m3e-nav-menu-item-open-ripple-color - Ripple color for open item.\r\n * @cssprop --m3e-nav-menu-item-disabled-color - Text color for disabled item.\r\n * @cssprop --m3e-nav-menu-item-disabled-color-opacity - Opacity for disabled item text color.\r\n * @cssprop --m3e-nav-menu-item-badge-font-size - Font size for badge slot.\r\n * @cssprop --m3e-nav-menu-item-badge-font-weight - Font weight for badge slot.\r\n * @cssprop --m3e-nav-menu-item-badge-line-height - Line height for badge slot.\r\n * @cssprop --m3e-nav-menu-item-badge-tracking - Letter spacing for badge slot.\r\n * @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements.\r\n * @cssprop --m3e-nav-menu-item-vertical-inset - Vertical margin for first/last child items.\r\n */\r\n@customElement(\"m3e-nav-menu-item\")\r\nexport class M3eNavMenuItemElement extends Selected(\r\n Disabled(\r\n EventAttribute(AttachInternals(Role(LitElement, \"treeitem\"), true), \"opening\", \"opened\", \"closing\", \"closed\"),\r\n ),\r\n) {\r\n static {\r\n registerStyleSheet(css`\r\n m3e-nav-menu-item > m3e-divider {\r\n margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem);\r\n flex: none;\r\n }\r\n m3e-nav-menu-item > m3e-nav-menu-item:first-of-type {\r\n margin-block-start: var(--m3e-nav-menu-item-vertical-inset, 0.25rem);\r\n }\r\n m3e-nav-menu-item > m3e-nav-menu-item:last-of-type {\r\n margin-block-end: var(--m3e-nav-menu-item-vertical-inset, 0.25rem);\r\n }\r\n `);\r\n }\r\n\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: block;\r\n flex: none;\r\n outline: none;\r\n user-select: none;\r\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n }\r\n .base {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem);\r\n height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${DesignToken.density.calc(-3)});\r\n column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem);\r\n font-size: var(--m3e-nav-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n font-weight: var(--m3e-nav-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n line-height: var(--m3e-nav-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n letter-spacing: var(--m3e-nav-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n transition: ${unsafeCSS(\r\n `color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},\r\n background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n )};\r\n }\r\n .base,\r\n .focus-ring {\r\n border-radius: var(--m3e-nav-menu-item-shape, ${DesignToken.shape.corner.full});\r\n }\r\n .label {\r\n flex: 1 1 auto;\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n overflow: hidden;\r\n vertical-align: middle;\r\n }\r\n .icon,\r\n .toggle {\r\n flex: none;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n vertical-align: middle;\r\n }\r\n ::slotted([slot=\"badge\"]) {\r\n flex: none;\r\n position: relative;\r\n font-size: var(--m3e-nav-menu-item-badge-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n font-weight: var(--m3e-nav-menu-item-badge-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n line-height: var(--m3e-nav-menu-item-badge-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n letter-spacing: var(--m3e-nav-menu-item-badge-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n }\r\n .toggle {\r\n transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})\r\n ${DesignToken.motion.easing.standard}`)};\r\n }\r\n :host(:not(:state(-with-icon))) .icon {\r\n display: none;\r\n }\r\n .icon {\r\n margin-inline-start: -0.5rem;\r\n }\r\n .toggle {\r\n margin-inline-end: -0.5rem;\r\n }\r\n .group {\r\n padding-inline-start: var(--m3e-nav-menu-item-inset, 1rem);\r\n }\r\n :host([open]) .toggle {\r\n transform: rotate(180deg);\r\n }\r\n :host(:not(:state(-with-items))) .toggle,\r\n :host(:not(:state(-with-items))) .group {\r\n display: none;\r\n }\r\n ::slotted([slot=\"selected-icon\"]),\r\n ::slotted([slot=\"icon\"]),\r\n ::slotted([slot=\"toggle-icon\"]),\r\n .toggle-icon {\r\n vertical-align: middle;\r\n width: 1em;\r\n height: 1em;\r\n font-size: var(--m3e-nav-menu-item-icon-size, 1.5rem);\r\n }\r\n :host(:not(:disabled)) .base {\r\n cursor: pointer;\r\n }\r\n :host(:not(:disabled)) .base {\r\n color: var(--m3e-nav-menu-item-label-color, ${DesignToken.color.onSurfaceVariant});\r\n }\r\n :host(:disabled) .base {\r\n color: color-mix(\r\n in srgb,\r\n var(--m3e-nav-menu-item-disabled-color, ${DesignToken.color.onSurface})\r\n var(--m3e-nav-menu-item-disabled-color-opacity, 38%),\r\n transparent\r\n );\r\n }\r\n :host([selected]:not(:state(-with-items)):not(:disabled)) .base {\r\n color: var(--m3e-nav-menu-item-selected-label-color, ${DesignToken.color.onSecondaryContainer});\r\n background-color: var(--m3e-nav-menu-item-selected-container-color, ${DesignToken.color.secondaryContainer});\r\n --m3e-state-layer-focus-color: var(\r\n --m3e-nav-menu-item-selected-container-focus-color,\r\n ${DesignToken.color.onSecondaryContainer}\r\n );\r\n --m3e-state-layer-hover-color: var(\r\n --m3e-nav-menu-item-selected-container-hover-color,\r\n ${DesignToken.color.onSecondaryContainer}\r\n );\r\n --m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n }\r\n :host(:not([selected]):not(:state(-with-items)):not(:disabled)) .base {\r\n --m3e-state-layer-focus-color: var(\r\n --m3e-nav-menu-item-unselected-container-focus-color,\r\n ${DesignToken.color.onSurface}\r\n );\r\n --m3e-state-layer-hover-color: var(\r\n --m3e-nav-menu-item-unselected-container-hover-color,\r\n ${DesignToken.color.onSurface}\r\n );\r\n --m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n }\r\n .state-layer {\r\n margin-inline: auto;\r\n }\r\n :host([selected]:state(-with-items):not(:disabled)) .base {\r\n background-color: var(--m3e-nav-menu-item-open-container-color, ${DesignToken.color.surfaceContainerHighest});\r\n --m3e-state-layer-focus-color: var(\r\n --m3e-nav-menu-item-open-container-focus-color,\r\n ${DesignToken.color.onSurface}\r\n );\r\n --m3e-state-layer-hover-color: var(\r\n --m3e-nav-menu-item-open-container-hover-color,\r\n ${DesignToken.color.onSurface}\r\n );\r\n --m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${DesignToken.color.onSurface});\r\n }\r\n ::slotted(a[slot=\"label\"]) {\r\n all: unset;\r\n }\r\n @media (prefers-reduced-motion) {\r\n .base,\r\n .toggle,\r\n .state-layer {\r\n transition: none !important;\r\n }\r\n }\r\n @media (forced-colors: active) {\r\n .base,\r\n .state-layer {\r\n transition: none !important;\r\n }\r\n\r\n :host(:disabled) .base {\r\n color: GrayText;\r\n }\r\n :host(:not(:disabled)) .base {\r\n color: LinkText;\r\n }\r\n :host([selected]:not(:state(-with-items)):not(:disabled)) .base,\r\n :host([selected]:state(-with-items):not(:disabled)) .base {\r\n forced-color-adjust: none;\r\n background-color: unset;\r\n color: Highlight;\r\n }\r\n :host([selected]:not(:state(-with-items)):not(:disabled)) .base::after {\r\n content: \"\";\r\n position: absolute;\r\n inset-inline-start: calc(calc(var(--m3e-nav-menu-item-padding, 1.5rem) / 2) - calc(0.375rem / 2));\r\n inset-block-start: 50%;\r\n width: 0.375rem;\r\n height: 0.375rem;\r\n border-radius: 50%;\r\n transform: translateY(-50%);\r\n background-color: currentColor;\r\n }\r\n }\r\n `;\r\n\r\n /** @internal */ @query(\".state-layer\") readonly stateLayer?: M3eStateLayerElement;\r\n /** @internal */ @query(\".focus-ring\") readonly focusRing?: M3eFocusRingElement;\r\n /** @internal */ @query(\".ripple\") readonly ripple?: M3eRippleElement;\r\n /** @private */ @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n /** @private */ @state() private _hasChildItems = false;\r\n\r\n /** @private */ #items: M3eNavMenuItemElement[] = [];\r\n /** @private */ #menu: M3eNavMenuElement | null = null;\r\n /** @private */ #path = new Array<M3eNavMenuItemElement>();\r\n /** @private */ #link: HTMLAnchorElement | null = null;\r\n\r\n /**\r\n * Whether the item is expanded.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) open = false;\r\n\r\n /** A reference to the nested `HTMLAnchorElement`. */\r\n get link(): HTMLAnchorElement | null {\r\n return this.#link;\r\n }\r\n\r\n /** A reference to the element used to present the label of the item. */\r\n get label(): HTMLElement | null {\r\n return this._base ?? null;\r\n }\r\n\r\n /** Whether the item is visible. */\r\n get visible(): boolean {\r\n return !this.#path.some((x) => !x.open);\r\n }\r\n\r\n /** The full path of the item, starting with the top-most ancestor, including this item. */\r\n get path(): ReadonlyArray<M3eNavMenuItemElement> {\r\n return [...this.#path, this];\r\n }\r\n\r\n /** Whether the item has child items. */\r\n get hasChildItems(): boolean {\r\n return this._hasChildItems;\r\n }\r\n\r\n /** The parenting item. */\r\n get parentItem(): M3eNavMenuItemElement | null {\r\n return this.#path[this.#path.length - 1] ?? null;\r\n }\r\n\r\n /** The items that immediately descend from this item. */\r\n get childItems(): readonly M3eNavMenuItemElement[] {\r\n return this.#items;\r\n }\r\n\r\n /** The one-based level of the item. */\r\n get level(): number {\r\n return this.#path.length + 1;\r\n }\r\n\r\n /**\r\n * Expands this item, and optionally, all descendants.\r\n * @param {boolean} [descendants=false] Whether to expand all descendants.\r\n */\r\n expand(descendants: boolean = false): void {\r\n if (this.hasChildItems) {\r\n this.open = true;\r\n if (descendants) {\r\n this.childItems.forEach((x) => x.expand(true));\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * Collapses this item, and optionally, all descendants.\r\n * @param {boolean} [descendants=false] Whether to expand all descendants.\r\n */\r\n collapse(descendants: boolean = false): void {\r\n if (this.hasChildItems) {\r\n this.open = false;\r\n if (descendants) {\r\n this.childItems.forEach((x) => x.collapse(true));\r\n }\r\n }\r\n }\r\n\r\n /** Toggles the expanded state of the item. */\r\n toggle(): void {\r\n if (this.hasChildItems) {\r\n this.open = !this.open;\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this.#path.length = 0;\r\n for (\r\n let item = this.parentElement?.closest(\"m3e-nav-menu-item\");\r\n item;\r\n item = item.parentElement?.closest(\"m3e-nav-menu-item\")\r\n ) {\r\n this.#path.push(item);\r\n }\r\n this.#path.reverse();\r\n\r\n this.style.setProperty(\"--_nav-menu-item-level\", `${this.level}`);\r\n this.#menu = this.closest(\"m3e-nav-menu\");\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.#path.length = 0;\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues): void {\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"selected\")) {\r\n // Remove aria-selected and just use aria-current.\r\n this.ariaSelected = null;\r\n this.ariaCurrent = this.hasChildItems ? null : `${this.selected}`;\r\n for (const icon of this.querySelectorAll(\":scope > m3e-icon[slot]\")) {\r\n icon.toggleAttribute(\"filled\", this.selected);\r\n }\r\n\r\n this.#path.forEach((x) => (x.selected = this.selected));\r\n if (this.selected && !this.hasChildItems) {\r\n this.closest(\"m3e-nav-menu\")?.[selectionManager].notifySelectionChange(this);\r\n }\r\n }\r\n\r\n if (changedProperties.has(\"open\") || changedProperties.has(\"_hasChildItems\")) {\r\n this.ariaExpanded = this._hasChildItems ? `${this.open}` : null;\r\n }\r\n\r\n if ((changedProperties.has(\"_hasChildItems\") && this.disabled) || changedProperties.has(\"disabled\")) {\r\n this.#items.forEach((x) => (x.disabled = this.disabled));\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n super.firstUpdated(_changedProperties);\r\n\r\n const base = this._base;\r\n if (base) {\r\n [this.focusRing, this.stateLayer, this.ripple].forEach((x) => x?.attach(base));\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"base\" @click=\"${this.#handleClick}\">\r\n <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n <m3e-focus-ring class=\"focus-ring\" inward ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n <div class=\"icon\" aria-hidden=\"true\">${this.#renderIcon()}</div>\r\n <div class=\"label\">\r\n <slot name=\"label\" @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n </div>\r\n <slot name=\"badge\"></slot>\r\n <div aria-hidden=\"true\" class=\"toggle\">\r\n <slot name=\"toggle-icon\">\r\n <svg class=\"toggle-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"M480-360 280-560h400L480-360Z\" />\r\n </svg>\r\n </slot>\r\n </div>\r\n </div>\r\n <m3e-collapsible\r\n class=\"group\"\r\n role=\"group\"\r\n aria-hidden=\"${ifDefined(this._hasChildItems ? undefined : \"true\")}\"\r\n ?open=\"${this._hasChildItems && this.open}\"\r\n @opening=\"${this.#handleCollapsibleEvent}\"\r\n @opened=\"${this.#handleCollapsibleEvent}\"\r\n @closing=\"${this.#handleCollapsibleEvent}\"\r\n @closed=\"${this.#handleCollapsibleEvent}\"\r\n >\r\n <slot @slotchange=\"${this.#handleItemSlotChange}\"></slot>\r\n </m3e-collapsible>`;\r\n }\r\n\r\n /** @private */\r\n #renderIcon(): unknown {\r\n const icon = html`<slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>`;\r\n return this.selected && !this.hasChildItems\r\n ? html`<slot name=\"selected-icon\" @slotchange=\"${this.#handleIconSlotChange}\">${icon}</slot>`\r\n : icon;\r\n }\r\n\r\n /** @private */\r\n #handleIconSlotChange(e: Event) {\r\n setCustomState(this, \"-with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n }\r\n\r\n /** @private */\r\n #handleSlotChange(e: Event): void {\r\n this.#link =\r\n (<HTMLSlotElement>e.target).assignedElements({ flatten: true }).find((x) => x instanceof HTMLAnchorElement) ??\r\n null;\r\n\r\n this.#link?.setAttribute(\"tabindex\", \"-1\");\r\n }\r\n\r\n /** @private */\r\n #handleItemSlotChange(e: Event): void {\r\n this.#items = (<HTMLSlotElement>e.target)\r\n .assignedElements({ flatten: true })\r\n .filter((x) => x instanceof M3eNavMenuItemElement);\r\n\r\n const hadChildItems = this._hasChildItems;\r\n this._hasChildItems = this.#items.length > 0;\r\n setCustomState(this, \"-with-items\", this._hasChildItems);\r\n\r\n if (hadChildItems || this._hasChildItems) {\r\n this.selected = this.#items.some((x) => x.selected);\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleClick(): void {\r\n if (this.disabled) return;\r\n\r\n this.#menu?.[selectionManager].setActiveItem(this);\r\n if (!this._hasChildItems) {\r\n this.#menu?.[selectionManager].select(this);\r\n this.#path.forEach((x) => (x.selected = this.selected));\r\n this.#link?.click();\r\n\r\n const drawerContainer = this.closest(\"m3e-drawer-container\");\r\n if (drawerContainer) {\r\n const drawer = this.closest(\"[slot='start']\") ?? this.closest(\"[slot='end']\");\r\n if (\r\n drawer &&\r\n (hasCustomState(drawerContainer, `-${drawer.slot}-push`) ||\r\n hasCustomState(drawerContainer, `-${drawer.slot}-over`))\r\n ) {\r\n setTimeout(() => {\r\n drawerContainer.removeAttribute(drawer.slot);\r\n drawerContainer.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n }, 300);\r\n }\r\n }\r\n } else {\r\n this.toggle();\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleCollapsibleEvent(e: Event): void {\r\n e.stopPropagation();\r\n this.dispatchEvent(new Event(e.type, { bubbles: true }));\r\n }\r\n}\r\n\r\ninterface M3eNavMenuItemElementEventMap extends HTMLElementEventMap {\r\n opening: Event;\r\n opened: Event;\r\n closing: Event;\r\n closed: Event;\r\n}\r\n\r\nexport interface M3eNavMenuItemElement {\r\n addEventListener<K extends keyof M3eNavMenuItemElementEventMap>(\r\n type: K,\r\n listener: (this: M3eNavMenuItemElement, ev: M3eNavMenuItemElementEventMap[K]) => void,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n addEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener<K extends keyof M3eNavMenuItemElementEventMap>(\r\n type: K,\r\n listener: (this: M3eNavMenuItemElement, ev: M3eNavMenuItemElementEventMap[K]) => void,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-nav-menu-item\": M3eNavMenuItemElement;\r\n }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport {\r\n customElement,\r\n DesignToken,\r\n FocusController,\r\n forcedColorsActive,\r\n PressedController,\r\n registerStyleSheet,\r\n Role,\r\n scrollIntoViewIfNeeded,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eNavMenuItemElement } from \"./NavMenuItemElement\";\r\n\r\n/**\r\n * A hierarchical menu, typically used on larger devices, that allows a user to switch between views.\r\n *\r\n * @description\r\n * The `m3e-nav-menu` component provides a hierarchical, accessible navigation menu supporting\r\n * nested expandable items, keyboard navigation, and focus management. It is highly customizable\r\n * via slots and CSS custom properties, and is designed for use in sidebars, navigation drawers,\r\n * and complex menu structures.\r\n *\r\n * @example\r\n * The following example illustrates a navigation menu with a top-level group of menu items.\r\n * ```html\r\n * <m3e-nav-menu>\r\n * <m3e-nav-menu-item-group>\r\n * <m3e-heading slot=\"label\" variant=\"label\" size=\"large\">Mail</m3e-heading>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"mail\"></m3e-icon>\r\n * <span slot=\"label\">Inbox</span>\r\n * <span slot=\"badge\">24</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"send\"></m3e-icon>\r\n * <span slot=\"label\">Outbox</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"favorite\"></m3e-icon>\r\n * <span slot=\"label\">Favorites</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"delete\"></m3e-icon>\r\n * <span slot=\"label\">Trash</span>\r\n * </m3e-nav-menu-item>\r\n * </m3e-nav-menu-item-group>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @example\r\n * The next example illustrates a multilevel navigation menu.\r\n * ```html\r\n * <m3e-nav-menu>\r\n * <m3e-nav-menu-item open>\r\n * <m3e-icon slot=\"icon\" name=\"rocket_launch\"></m3e-icon>\r\n * <span slot=\"label\">Getting Started</span>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"widgets\"></m3e-icon>\r\n * <span slot=\"label\">Overview</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"package_2\"></m3e-icon>\r\n * <span slot=\"label\">Installation</span>\r\n * </m3e-nav-menu-item>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <span slot=\"label\">Actions</span>\r\n * <m3e-nav-menu-item><span slot=\"label\">Button</span></m3e-nav-menu-item>\r\n * <m3e-nav-menu-item><span slot=\"label\">Icon</span></m3e-nav-menu-item>\r\n * <m3e-nav-menu-item><span slot=\"label\">Icon Button</span></m3e-nav-menu-item>\r\n * </m3e-nav-menu-item>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @tag m3e-nav-menu\r\n *\r\n * @slot - Renders the items of the menu.\r\n *\r\n * @cssprop --m3e-nav-menu-padding-top - Top padding for the menu.\r\n * @cssprop --m3e-nav-menu-padding-bottom - Bottom padding for the menu.\r\n * @cssprop --m3e-nav-menu-padding-left - Left padding for the menu.\r\n * @cssprop --m3e-nav-menu-padding-right - Right padding for the menu.\r\n * @cssprop --m3e-nav-menu-divider-margin - Margin for divider elements in the menu.\r\n * @cssprop --m3e-nav-menu-scrollbar-width - Width of the menu scrollbar.\r\n * @cssprop --m3e-nav-menu-scrollbar-color - Color of the menu scrollbar.\r\n */\r\n@customElement(\"m3e-nav-menu\")\r\nexport class M3eNavMenuElement extends Role(LitElement, \"tree\") {\r\n static {\r\n registerStyleSheet(css`\r\n m3e-nav-menu > m3e-divider {\r\n margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem);\r\n flex: none;\r\n }\r\n `);\r\n }\r\n\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: block;\r\n outline: none;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n min-height: 0;\r\n scrollbar-width: ${DesignToken.scrollbar.width};\r\n scrollbar-color: ${DesignToken.scrollbar.color};\r\n }\r\n .base {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n min-height: inherit;\r\n box-sizing: border-box;\r\n padding-block-start: var(--m3e-nav-menu-padding-top, 0.5rem);\r\n padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem);\r\n padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem);\r\n padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem);\r\n }\r\n `;\r\n\r\n /** @private */ private static __nextId = 0;\r\n /** @private */ #ignoreFocusVisible = false;\r\n /** @private */ #ignoreFocus = false;\r\n\r\n /** @private */\r\n readonly [selectionManager] = new SelectionManager<M3eNavMenuItemElement>()\r\n .withVerticalOrientation()\r\n .withHomeAndEnd()\r\n .withTypeahead()\r\n .withSkipPredicate((x) => x.disabled || !x.visible)\r\n .disableRovingTabIndex()\r\n .onActiveItemChange(() => {\r\n if (this[selectionManager].activeItem) {\r\n this.#activateItem(this[selectionManager].activeItem);\r\n }\r\n })\r\n .onSelectedItemsChange(() => {\r\n const selected = this.selected;\r\n for (const item of this.items) {\r\n if (item !== selected) {\r\n this.#updateItemFocusVisible(item, false, false);\r\n }\r\n }\r\n\r\n if (selected?.label) {\r\n scrollIntoViewIfNeeded(selected.label, this, { block: \"start\", behavior: \"smooth\" });\r\n }\r\n });\r\n\r\n /** @private */ readonly #keyDownHandler = (e: KeyboardEvent) => this.#handleKeyDown(e);\r\n /** @private */ readonly #keyUpHandler = (e: KeyboardEvent) => this.#handleKeyUp(e);\r\n /** @private */ readonly #pointerDownHandler = (e: Event) => this.#handlePointerDown(e);\r\n\r\n constructor() {\r\n super();\r\n\r\n new PressedController(this, { callback: (pressed) => (this.#ignoreFocus = pressed) });\r\n new FocusController(this, {\r\n callback: () => {\r\n if (!this.#ignoreFocus) {\r\n this.#updateFocusVisible();\r\n }\r\n },\r\n });\r\n }\r\n\r\n /** The selected item of the menu. */\r\n get selected(): M3eNavMenuItemElement | null {\r\n return this[selectionManager].selectedItems[0] ?? null;\r\n }\r\n\r\n /** All the items of the menu. */\r\n get items(): readonly M3eNavMenuItemElement[] {\r\n return this[selectionManager].items;\r\n }\r\n\r\n /**\r\n * Expands all items, and optionally, all descendants.\r\n * @param {boolean} [descendants=false] Whether to expand all descendants.\r\n */\r\n expand(descendants?: boolean): void;\r\n\r\n /**\r\n * Expands the specified items, and optionally, all descendants.\r\n * @param {M3eNavMenuItemElement[]} items The items to expand.\r\n * @param {boolean} [descendants=false] Whether to expand all descendants.\r\n */\r\n expand(items: M3eNavMenuItemElement[], descendants?: boolean): void;\r\n\r\n /** @internal */\r\n expand(itemsOrDescendants?: M3eNavMenuItemElement[] | boolean, maybeDescendants: boolean = false): void {\r\n const items = Array.isArray(itemsOrDescendants) ? itemsOrDescendants : this[selectionManager].items;\r\n const descendants = typeof itemsOrDescendants === \"boolean\" ? itemsOrDescendants : maybeDescendants;\r\n items.forEach((x) => x.expand(descendants));\r\n }\r\n\r\n /**\r\n * Collapses all items, and optionally, all descendants.\r\n * @param {boolean} [descendants=false] Whether to collapse all descendants.\r\n */\r\n collapse(descendants?: boolean): void;\r\n\r\n /**\r\n * Collapses the specified items, and optionally, all descendants.\r\n * @param {M3eNavMenuItemElement[]} items The items to collapse.\r\n * @param {boolean} [descendants=false] Whether to collapse all descendants.\r\n */\r\n collapse(items: M3eNavMenuItemElement[], descendants?: boolean): void;\r\n\r\n /** @internal */\r\n collapse(itemsOrDescendants?: M3eNavMenuItemElement[] | boolean, maybeDescendants: boolean = false): void {\r\n const items = Array.isArray(itemsOrDescendants) ? itemsOrDescendants : this[selectionManager].items;\r\n const descendants = typeof itemsOrDescendants === \"boolean\" ? itemsOrDescendants : maybeDescendants;\r\n\r\n items.forEach((x) => x.collapse(descendants));\r\n const activeItem = this[selectionManager].activeItem;\r\n if (activeItem && !activeItem.visible) {\r\n for (let parent = activeItem.parentItem; parent; parent = parent.parentItem) {\r\n if (parent.visible) {\r\n this[selectionManager].setActiveItem(parent);\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this.setAttribute(\"tabindex\", \"0\");\r\n\r\n this.addEventListener(\"keydown\", this.#keyDownHandler);\r\n this.addEventListener(\"keyup\", this.#keyUpHandler);\r\n this.addEventListener(\"pointerdown\", this.#pointerDownHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n\r\n this.removeEventListener(\"keydown\", this.#keyDownHandler);\r\n this.removeEventListener(\"keyup\", this.#keyUpHandler);\r\n this.removeEventListener(\"pointerdown\", this.#pointerDownHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"base\">\r\n <slot @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #handleSlotChange(): void {\r\n for (const divider of this.querySelectorAll<HTMLElement>(\"m3e-divider\")) {\r\n divider.ariaHidden = \"true\";\r\n }\r\n const { added } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-nav-menu-item\")]);\r\n for (const item of added) {\r\n item.id = item.id || `m3e-nav-menu-item-${M3eNavMenuElement.__nextId++}`;\r\n }\r\n if (this[selectionManager].activeItem) {\r\n this.setAttribute(\"aria-activedescendant\", this[selectionManager].activeItem.id);\r\n this.#updateFocusVisible();\r\n } else {\r\n this.removeAttribute(\"aria-activedescendant\");\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleKeyDown(e: KeyboardEvent): void {\r\n this.#ignoreFocusVisible = false;\r\n this.#updateFocusVisible();\r\n\r\n const item = this[selectionManager].activeItem;\r\n if (e.defaultPrevented || !item || item.disabled) return;\r\n\r\n switch (e.key) {\r\n case \"Enter\":\r\n case \" \":\r\n e.preventDefault();\r\n\r\n if (e.key === \" \" && item.ripple && !item.ripple.visible) {\r\n item.ripple.centered = true;\r\n item.ripple.show(0, 0, true);\r\n item.ripple.centered = false;\r\n }\r\n\r\n if (item.hasChildItems) {\r\n requestAnimationFrame(() => item.toggle());\r\n } else if (!item.selected) {\r\n this[selectionManager].select(item);\r\n item.link?.click();\r\n }\r\n break;\r\n\r\n case \"*\":\r\n e.preventDefault();\r\n item.expand(true);\r\n break;\r\n\r\n case \"Left\":\r\n case \"ArrowLeft\":\r\n e.preventDefault();\r\n if (M3eDirectionality.current === \"ltr\") {\r\n if (item.hasChildItems && item.open) {\r\n requestAnimationFrame(() => item.collapse());\r\n } else {\r\n const parent = item.parentItem;\r\n if (parent) {\r\n this[selectionManager].setActiveItem(parent);\r\n }\r\n }\r\n } else if (item.hasChildItems && !item.open) {\r\n item.expand();\r\n }\r\n\r\n break;\r\n\r\n case \"Right\":\r\n case \"ArrowRight\":\r\n e.preventDefault();\r\n if (M3eDirectionality.current === \"rtl\") {\r\n if (item.hasChildItems && item.open) {\r\n requestAnimationFrame(() => item.collapse());\r\n } else {\r\n const parent = item.parentItem;\r\n if (parent) {\r\n this[selectionManager].setActiveItem(parent);\r\n }\r\n }\r\n } else if (item.hasChildItems && !item.open) {\r\n item.expand();\r\n }\r\n break;\r\n\r\n default:\r\n this[selectionManager].onKeyDown(e);\r\n break;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleKeyUp(e: KeyboardEvent): void {\r\n const item = this[selectionManager].activeItem;\r\n if (!e.defaultPrevented && item && !item.disabled && e.key === \" \") {\r\n item.ripple?.hide();\r\n }\r\n }\r\n\r\n /** @private */\r\n #handlePointerDown(e: Event): void {\r\n if (!e.defaultPrevented && !this.#ignoreFocusVisible && !forcedColorsActive()) {\r\n this.#ignoreFocusVisible = true;\r\n\r\n const item = e\r\n .composedPath()\r\n .reverse()\r\n .find((x) => x instanceof M3eNavMenuItemElement);\r\n\r\n if (item && !item.disabled) {\r\n this.#updateItemFocusVisible(item, true, false);\r\n }\r\n }\r\n }\r\n\r\n /** @private */\r\n #activateItem(item: M3eNavMenuItemElement): void {\r\n this.setAttribute(\"aria-activedescendant\", item.id);\r\n if (item.label) {\r\n scrollIntoViewIfNeeded(item.label, this, { block: \"nearest\", behavior: \"smooth\" });\r\n }\r\n this.#updateFocusVisible();\r\n }\r\n\r\n /** @private */\r\n #updateFocusVisible(): void {\r\n const focusWithin = this.matches(\":focus-within\");\r\n const focused = focusWithin || this.matches(\":focus\");\r\n const focusVisible =\r\n focused &&\r\n !this.#ignoreFocusVisible &&\r\n (forcedColorsActive() ||\r\n this.matches(\":focus-visible\") ||\r\n (focusWithin && this.querySelector(\"a:focus-visible\") !== null));\r\n\r\n this[selectionManager].items.forEach((x) => {\r\n const active = x === this[selectionManager].activeItem;\r\n this.#updateItemFocusVisible(x, active && focused, active && focusVisible);\r\n });\r\n }\r\n\r\n /** @private */\r\n #updateItemFocusVisible(item: M3eNavMenuItemElement, focused: boolean, focusVisible: boolean): void {\r\n if (focused && focusVisible) {\r\n item.stateLayer?.show(\"focused\");\r\n } else {\r\n item.stateLayer?.hide(\"focused\");\r\n }\r\n if (focusVisible) {\r\n item.focusRing?.show();\r\n } else {\r\n item.focusRing?.hide();\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-nav-menu\": M3eNavMenuElement;\r\n }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement } from \"lit\";\r\n\r\nimport { AttachInternals, customElement, deleteCustomState, Role, setCustomState } from \"@m3e/web/core\";\r\n\r\n/**\r\n * A top-level semantic grouping of items in a navigation menu.\r\n *\r\n * @description\r\n * The `m3e-nav-menu-item-group` is a top-level semantic grouping of items in a navigation menu.\r\n * It encapsulates related items under a shared heading or label, supporting visual hierarchy and accessibility.\r\n *\r\n * @example\r\n * The following example illustrates a navigation menu with a top-level group of menu items.\r\n * ```html\r\n * <m3e-nav-menu>\r\n * <m3e-nav-menu-item-group>\r\n * <m3e-heading slot=\"label\" variant=\"label\" size=\"large\">Mail</m3e-heading>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"mail\"></m3e-icon>\r\n * <span slot=\"label\">Inbox</span>\r\n * <span slot=\"badge\">24</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"send\"></m3e-icon>\r\n * <span slot=\"label\">Outbox</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"favorite\"></m3e-icon>\r\n * <span slot=\"label\">Favorites</span>\r\n * </m3e-nav-menu-item>\r\n * <m3e-nav-menu-item>\r\n * <m3e-icon slot=\"icon\" name=\"delete\"></m3e-icon>\r\n * <span slot=\"label\">Trash</span>\r\n * </m3e-nav-menu-item>\r\n * </m3e-nav-menu-item-group>\r\n * </m3e-nav-menu>\r\n * ```\r\n *\r\n * @tag m3e-nav-menu-item-group\r\n *\r\n * @slot - Renders the items of the group.\r\n * @slot label - Renders the label of the group.\r\n *\r\n * @cssprop --m3e-nav-menu-item-group-label-inset - Insets the label from the start edge of the group.\r\n * @cssprop --m3e-nav-menu-item-group-label-space - Vertical spacing around the group's label.\r\n */\r\n@customElement(\"m3e-nav-menu-item-group\")\r\nexport class M3eNavMenuItemGroupElement extends AttachInternals(Role(LitElement, \"group\")) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: contents;\r\n }\r\n :host(:not(:state(-with-label))) .label {\r\n display: none;\r\n }\r\n .label {\r\n margin-inline-start: var(--m3e-nav-menu-item-group-label-inset, 1rem);\r\n margin-block-end: var(--m3e-nav-menu-item-group-label-space, 1rem);\r\n flex: none;\r\n }\r\n :host(:state(-divided)) .label {\r\n margin-block-start: calc(\r\n var(--m3e-nav-menu-item-group-label-space, 1rem) - var(--m3e-nav-menu-divider-margin, 0.25rem)\r\n );\r\n }\r\n :host(:not(:state(-divided))) .label {\r\n margin-block-start: var(--m3e-nav-menu-item-group-label-space, 1rem);\r\n }\r\n `;\r\n\r\n /** @private */ private static __nextId = 0;\r\n /** @private */ #labelId = `m3e-nav-menu-item-group-label-${M3eNavMenuItemGroupElement.__nextId++}`;\r\n /** @private */ #label?: Element;\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n setCustomState(this, \"-divided\", this.previousElementSibling?.tagName === \"M3E-DIVIDER\");\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n deleteCustomState(this, \"-divided\");\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<div class=\"label\">\r\n <slot name=\"label\" @slotchange=\"${this.#handleLabelSlotChange}\"></slot>\r\n </div>\r\n <slot></slot>`;\r\n }\r\n\r\n /** @private */\r\n #handleLabelSlotChange(e: Event): void {\r\n const label = (e.target as HTMLSlotElement).assignedElements({ flatten: true })[0];\r\n if (label !== this.#label) {\r\n // If the label is changed and its id matched the reversed id,\r\n // clear the id in the event the element is moved elsewhere in the DOM.\r\n\r\n if (this.#label?.id === this.#labelId) {\r\n this.#label.id = \"\";\r\n }\r\n\r\n this.#label = label;\r\n\r\n if (this.#label) {\r\n this.#label.id = this.#label.id || this.#labelId;\r\n this.setAttribute(\"aria-labelledby\", this.#label.id);\r\n } else {\r\n this.removeAttribute(\"aria-labelledby\");\r\n }\r\n }\r\n setCustomState(this, \"-with-label\", this.#label !== undefined);\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-nav-menu-item-group\": M3eNavMenuItemGroupElement;\r\n }\r\n}\r\n"],"names":["M3eNavMenuItemElement","M3eNavMenuItemElement_1","Selected","Disabled","EventAttribute","AttachInternals","Role","LitElement","constructor","this","_hasChildItems","_M3eNavMenuItemElement_items","set","_M3eNavMenuItemElement_menu","_M3eNavMenuItemElement_path","Array","_M3eNavMenuItemElement_link","open","link","__classPrivateFieldGet","label","_base","visible","some","x","path","hasChildItems","parentItem","length","childItems","level","expand","descendants","forEach","collapse","toggle","connectedCallback","super","item","parentElement","closest","push","reverse","style","setProperty","__classPrivateFieldSet","disconnectedCallback","update","changedProperties","has","ariaSelected","ariaCurrent","selected","icon","querySelectorAll","toggleAttribute","selectionManager","notifySelectionChange","ariaExpanded","disabled","firstUpdated","_changedProperties","base","focusRing","stateLayer","ripple","attach","render","html","_M3eNavMenuItemElement_instances","_M3eNavMenuItemElement_handleClick","_M3eNavMenuItemElement_renderIcon","call","_M3eNavMenuItemElement_handleSlotChange","ifDefined","undefined","_M3eNavMenuItemElement_handleCollapsibleEvent","_M3eNavMenuItemElement_handleItemSlotChange","_M3eNavMenuItemElement_handleIconSlotChange","e","setCustomState","hasAssignedNodes","target","assignedElements","flatten","find","HTMLAnchorElement","setAttribute","filter","hadChildItems","setActiveItem","select","click","drawerContainer","drawer","hasCustomState","slot","setTimeout","removeAttribute","dispatchEvent","Event","bubbles","stopPropagation","type","registerStyleSheet","css","styles","DesignToken","density","calc","typescale","standard","large","fontSize","fontWeight","lineHeight","tracking","unsafeCSS","motion","duration","short4","easing","shape","corner","full","medium1","color","onSurfaceVariant","onSurface","onSecondaryContainer","secondaryContainer","surfaceContainerHighest","__decorate","query","prototype","state","property","Boolean","reflect","customElement","M3eNavMenuElement","M3eNavMenuElement_1","_M3eNavMenuElement_ignoreFocusVisible","_M3eNavMenuElement_ignoreFocus","_b","SelectionManager","withVerticalOrientation","withHomeAndEnd","withTypeahead","withSkipPredicate","disableRovingTabIndex","onActiveItemChange","activeItem","_M3eNavMenuElement_instances","_M3eNavMenuElement_activateItem","onSelectedItemsChange","items","_M3eNavMenuElement_updateItemFocusVisible","scrollIntoViewIfNeeded","block","behavior","_M3eNavMenuElement_keyDownHandler","_M3eNavMenuElement_keyUpHandler","_M3eNavMenuElement_pointerDownHandler","PressedController","callback","pressed","FocusController","_M3eNavMenuElement_updateFocusVisible","selectedItems","itemsOrDescendants","maybeDescendants","isArray","parent","addEventListener","removeEventListener","_M3eNavMenuElement_handleSlotChange","divider","ariaHidden","added","setItems","id","__nextId","defaultPrevented","key","preventDefault","centered","show","requestAnimationFrame","M3eDirectionality","current","onKeyDown","hide","forcedColorsActive","composedPath","focusWithin","matches","focused","focusVisible","querySelector","active","scrollbar","width","M3eNavMenuItemGroupElement","M3eNavMenuItemGroupElement_1","_M3eNavMenuItemGroupElement_labelId","_M3eNavMenuItemGroupElement_label","previousElementSibling","tagName","deleteCustomState","_M3eNavMenuItemGroupElement_instances","_M3eNavMenuItemGroupElement_handleLabelSlotChange"],"mappings":"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"}
package/dist/search.js CHANGED
@@ -87,9 +87,9 @@ const SearchViewLightDomStyle = css`m3e-search-view input[slot="input"]::placeho
87
87
  * Styles for `M3eSearchViewElement`.
88
88
  * @internal
89
89
  */
90
- const SearchViewStyle = css`:host { display: block; } .base { position: relative; width: 100%; } .anchor { position: absolute; width: 100%; visibility: hidden; } .view { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; outline: none; padding: unset; margin: unset; border: unset; } .header { flex: none; display: flex; align-items: center; } .bar { flex: 1 1 auto; } :host(:state(-fullscreen)) .bar { transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } :host(:state(-fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${SearchViewToken.containedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedTrailingMargin}; } :host(:state(-fullscreen)[contained][open]) .bar, :host(:state(-fullscreen)[contained][open]) .results { margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin}; } .icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } ::slotted([slot="search-icon"]), .search-icon, ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } .results { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-color: ${DesignToken.scrollbar.color}; } .view:not(:popover-open) .results, .view.closing .results { display: none; } :host(:not(:is(:state(-clearable), [open]))) .clear { display: none; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } :host(:state(-fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:state(-fullscreen)) .view:popover-open:not(.closing) .header { height: ${SearchViewToken.fullScreenHeaderContainerHeight}; } :host(:state(-fullscreen):not([open])) .header, :host(:state(-fullscreen)[open]) .view.closing .header { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .anchor { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .view:popover-open { border-radius: ${SearchViewToken.fullScreenContainerShape}; } :host(:state(-fullscreen)[contained]) .view:popover-open { background-color: ${SearchViewToken.containedContainerColor}; } :host(:state(-fullscreen):not([contained])) .view:popover-open { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[open]) .header, :host(:state(-docked)) .anchor { height: ${SearchViewToken.dockedHeaderContainerHeight}; } :host(:not([contained])[open]) .results { border-top-width: ${SearchViewToken.dividerThickness}; border-top-style: solid; border-top-color: ${SearchViewToken.dividerColor}; } :host(:state(-docked)[contained]) .results { margin-top: ${SearchViewToken.containedDockedBarResultsGap}; } :host(:state(-docked):not([contained])[open]) .view { background-color: ${SearchViewToken.containerColor}; --m3e-search-bar-container-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[contained]) .results { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked):not([contained])[open]) .view, :host(:state(-docked)[contained]) .results { border-radius: ${SearchViewToken.dockedContainerShape}; } :host(:state(-docked)) .results { min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); } :host(:state(-docked)) .scroll-container { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:state(-docked):not([contained])) .scroll-container { padding-bottom: ${SearchViewToken.dockedResultsBottomSpace}; } :host(:state(-docked)[contained]) .scroll-container { padding: ${SearchViewToken.containedDockedResultsSpace}; } :host(:state(-docked)) .results { transform-origin: top; transition: ${unsafeCSS(`transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
90
+ const SearchViewStyle = css`:host { display: block; } .base { position: relative; width: 100%; } .anchor { position: absolute; width: 100%; visibility: hidden; } .view { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; outline: none; padding: unset; margin: unset; border: unset; } .header { flex: none; display: flex; align-items: center; } .bar { flex: 1 1 auto; } :host(:state(-fullscreen)) .bar { transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)}; } :host(:state(-fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${SearchViewToken.containedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedTrailingMargin}; } :host(:state(-fullscreen)[contained][open]) .bar, :host(:state(-fullscreen)[contained][open]) .results { margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin}; margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin}; } .icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } ::slotted([slot="search-icon"]), .search-icon, ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } .results { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-color: ${DesignToken.scrollbar.color}; } .view:not(:popover-open) .results, .view.closing .results { display: none; } :host(:not(:is(:state(-clearable), [open]))) .clear { display: none; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${SearchBarToken.iconSize} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${SearchBarToken.iconSize}; } :host(:state(-fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:state(-fullscreen)) .view:popover-open:not(.closing) .header { height: ${SearchViewToken.fullScreenHeaderContainerHeight}; } :host(:state(-fullscreen):not([open])) .header, :host(:state(-fullscreen)[open]) .view.closing .header { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .anchor { height: ${SearchViewToken.containedFullScreenBarContainerHeight}; } :host(:state(-fullscreen)) .view:popover-open { border-radius: ${SearchViewToken.fullScreenContainerShape}; } :host(:state(-fullscreen)[contained]) .view:popover-open { background-color: ${SearchViewToken.containedContainerColor}; } :host(:state(-fullscreen):not([contained])) .view:popover-open { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[open]) .header, :host(:state(-docked)) .anchor { height: ${SearchViewToken.dockedHeaderContainerHeight}; } :host(:not([contained])[open]) .results { border-top-width: ${SearchViewToken.dividerThickness}; border-top-style: solid; border-top-color: ${SearchViewToken.dividerColor}; } :host(:state(-docked)[contained]) .results { margin-top: ${SearchViewToken.containedDockedBarResultsGap}; } :host(:state(-docked):not([contained])[open]) .view { background-color: ${SearchViewToken.containerColor}; --m3e-search-bar-container-color: ${SearchViewToken.containerColor}; } :host(:state(-docked)[contained]) .results { background-color: ${SearchViewToken.containerColor}; } :host(:state(-docked):not([contained])) .view, :host(:state(-docked)[contained]) .results { border-radius: ${SearchViewToken.dockedContainerShape}; } :host(:state(-docked)) .results { min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight}); } :host(:state(-docked)) .scroll-container { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; } :host(:state(-docked):not([contained])) .scroll-container { padding-bottom: ${SearchViewToken.dockedResultsBottomSpace}; } :host(:state(-docked)[contained]) .scroll-container { padding: ${SearchViewToken.containedDockedResultsSpace}; } :host(:state(-docked)) .results { transform-origin: top; transition: ${unsafeCSS(`transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
91
91
  overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
92
- display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked):not([open])) .results { transform: scaleY(0.8); } :host(:state(-docked)[open]) .results { transform: scaleY(1); } @starting-style { :host(:state(-docked)[open]) .results { transform: scaleY(0.8); } } :host(:state(-docked)[contained]) .view { background-color: transparent; } :host(:state(-docked):not([open])) .view { transition: ${unsafeCSS(`border-radius ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},
92
+ display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked):not([open])) .results { transform: scaleY(0.8); } :host(:state(-docked)[open]) .results { transform: scaleY(1); } @starting-style { :host(:state(-docked)[open]) .results { transform: scaleY(0.8); } } :host(:state(-docked)) .view { background-color: transparent; } :host(:state(-docked):not([open])) .view { transition: ${unsafeCSS(`border-radius ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},
93
93
  background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}`)}; } :host(:state(-docked):not([open])) .view::backdrop { transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
94
94
  overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
95
95
  visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked)) .view::backdrop { background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent); margin-inline-end: -20px; } :host(:state(-docked)[open]) .view::backdrop { background-color: color-mix( in srgb, ${SearchViewToken.dockedScrimColor} ${SearchViewToken.dockedScrimOpacity}, transparent ); transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},