@redvars/peacock 3.9.0 → 3.9.1

package/dist/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sources":["../../src/__internal/mixins/NativeButtonMixin.ts","../../src/menu/menu-item/menu-item.ts"],"sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { MixinConstructor } from './MixinConstructor.js';\n\n/**\n * 1. Define an interface for the members the mixin adds.\n * This makes the type annotation much cleaner.\n */\nexport interface NativeButtonInterface {\n  htmlType: 'button' | 'submit' | 'reset';\n  disabled: boolean;\n  softDisabled: boolean;\n  disabledReason: string;\n  form: string;\n  name: string;\n  value: string;\n}\n\n/**\n * 2. Apply the type annotation to the variable.\n */\nconst NativeButtonMixin: <T extends MixinConstructor<LitElement>>(\n  superclass: T,\n) => T & MixinConstructor<NativeButtonInterface> = <\n  T extends MixinConstructor<LitElement>,\n>(\n  superclass: T,\n) => {\n  // Naming the class (BaseButtonElement) instead of using 'Mixin' or anonymous\n  // prevents the \"__childPart\" visibility error.\n  class ButtonElement extends superclass implements NativeButtonInterface {\n    /**\n     * The type of the underlying `<button>` element. Maps to the native `type` attribute.\n     * Possible values are `\"button\"`, `\"submit\"`, `\"reset\"`. Defaults to `\"button\"`.\n     */\n    @property({ type: String }) htmlType: 'button' | 'submit' | 'reset' =\n      'button';\n\n    /**\n     * When `true`, the button is disabled and cannot be interacted with. Reflects to the `disabled` attribute. Defaults to `false`.\n     */\n    @property({ type: Boolean, reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * When `true`, the button is visually styled as disabled and cannot be interacted with, but remains focusable.\n     * Use this in combination with `disabledReason` to communicate why the button is unavailable.\n     * Reflects to the `soft-disabled` attribute. Defaults to `false`.\n     */\n    @property({ type: Boolean, reflect: true, attribute: 'soft-disabled' })\n    softDisabled: boolean = false;\n\n    /**\n     * A human-readable explanation of why the button is disabled or soft-disabled.\n     * Rendered as a visually hidden tooltip and linked via `aria-describedby` for accessibility.\n     * Maps to the `disabled-reason` attribute.\n     */\n    @property({ attribute: 'disabled-reason' })\n    disabledReason: string = '';\n\n    /**\n     * The `id` of the `<form>` element to associate the button with.\n     * If omitted, the button is associated with its nearest ancestor form.\n     * Maps to the native `form` attribute.\n     */\n    @property()\n    form: string = '';\n\n    /**\n     * The name of the button, submitted as part of a name/value pair when the associated form is submitted.\n     * Maps to the native `name` attribute.\n     */\n    @property()\n    name: string = '';\n\n    /**\n     * The value of the button, submitted as part of a name/value pair when the associated form is submitted.\n     * Maps to the native `value` attribute.\n     */\n    @property()\n    value: string = '';\n  }\n\n  return ButtonElement as T & MixinConstructor<NativeButtonInterface>;\n};\n\nexport default NativeButtonMixin;\n","import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport styles from './menu-item.scss';\nimport colorStyles from './menu-item-colors.scss';\nimport NativeButtonMixin from '@/__internal/mixins/NativeButtonMixin.js';\nimport NativeHyperlinkMixin from '@/__internal/mixins/NativeHyperlinkMixin.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * @label Menu Item\n * @tag wc-menu-item\n * @rawTag menu-item\n * @summary An item in a menu list.\n * @tags navigation\n *\n * @example\n * ```html\n * <wc-menu-item>Menu Item</wc-menu-item>\n * ```\n */\n@IndividualComponent\nexport class MenuItem extends NativeButtonMixin(\n  NativeHyperlinkMixin(LitElement),\n) {\n  // ── Static ───────────────────────────────────────────────────────────────\n\n  static styles = [styles, colorStyles];\n\n  // ── Properties ───────────────────────────────────────────────────────────\n\n  /** The value associated with this menu item, used to identify it on selection. */\n  @property({ type: String }) value = '';\n\n  /** Whether this menu item is currently selected/highlighted. */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /** When true, the menu stays open after this item is activated. */\n  @property({ type: Boolean, attribute: 'keep-open' }) keepOpen = false;\n\n  /** When true, indicates this item has an associated submenu. */\n  @property({ type: Boolean, attribute: 'has-submenu' }) hasSubmenu = false;\n\n  /** Whether the associated submenu is currently open. */\n  @property({ type: Boolean, attribute: 'submenu-open' }) submenuOpen = false;\n\n  /** Visual variant of the menu item. */\n  @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =\n    'standard';\n\n  // ── Queries ───────────────────────────────────────────────────────────────\n\n  @query('#menu-item') readonly itemElement!: HTMLElement | null;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** MutationObserver that triggers re-render when slotted content changes. */\n  private readonly _contentObserver = new MutationObserver(() => {\n    this.requestUpdate();\n  });\n\n  /** Roving tabindex value managed by the parent Menu. */\n  private _rovingTabIndex = -1;\n\n  connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n    this._contentObserver.observe(this, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n      attributes: true,\n      attributeFilter: ['slot'],\n    });\n  }\n\n  disconnectedCallback() {\n    this._contentObserver.disconnect();\n    super.disconnectedCallback();\n  }\n\n  override get tabIndex() {\n    return this._rovingTabIndex;\n  }\n\n  override set tabIndex(value: number) {\n    this._rovingTabIndex = value;\n    this.requestUpdate();\n  }\n\n  override focus() {\n    this.itemElement?.focus();\n  }\n\n  override blur() {\n    this.itemElement?.blur();\n  }\n\n  private _hasNamedSlot(...names: string[]) {\n    return names.some(name =>\n      Array.from(this.children).some(\n        child => child.getAttribute('slot') === name,\n      ),\n    );\n  }\n\n  private _hasDefaultSlot() {\n    return Array.from(this.childNodes).some(node => {\n      if (node.nodeType === Node.TEXT_NODE) {\n        return Boolean(node.textContent?.trim());\n      }\n\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute('slot')\n      );\n    });\n  }\n\n  render() {\n    const isElementLink = isLink(this);\n    const controls = this.getAttribute('aria-controls');\n\n    const cssClasses = {\n      'menu-item': true,\n      'native-button': !isElementLink,\n      'native-link': isElementLink,\n    };\n\n    if (isElementLink) {\n      return html`\n        <a\n          id=\"menu-item\"\n          class=${classMap(cssClasses)}\n          role=\"menuitem\"\n          href=${ifDefined(this.href)}\n          target=${this.target}\n          ?rel=${this.rel}\n          ?download=${this.download}\n          tabindex=${this.disabled ? '-1' : String(this.tabIndex)}\n          ?selected=${this.selected}\n          aria-disabled=${this.disabled || this.softDisabled ? 'true' : nothing}\n          aria-haspopup=${this.hasSubmenu ? 'menu' : nothing}\n          aria-controls=${ifDefined(\n            this.hasSubmenu && controls ? controls : undefined,\n          )}\n          aria-expanded=${ifDefined(\n            this.hasSubmenu ? String(this.submenuOpen) : undefined,\n          )}\n        >\n          ${this.renderContent()}\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        id=\"menu-item\"\n        class=${classMap(cssClasses)}\n        role=\"menuitem\"\n        type=${this.htmlType}\n        ?disabled=${this.disabled}\n        tabindex=${String(this.tabIndex)}\n        ?selected=${this.selected}\n        aria-disabled=${this.softDisabled ? 'true' : nothing}\n        aria-haspopup=${this.hasSubmenu ? 'menu' : nothing}\n        aria-controls=${ifDefined(\n          this.hasSubmenu && controls ? controls : undefined,\n        )}\n        aria-expanded=${ifDefined(\n          this.hasSubmenu ? String(this.submenuOpen) : undefined,\n        )}\n      >\n        ${this.renderContent()}\n      </button>\n    `;\n  }\n\n  renderContent() {\n    return html`\n      <div class=\"menu-item-background\"></div>\n      <wc-item class=\"menu-item-content\">\n        <wc-focus-ring\n          class=\"focus-ring\"\n          for=\"menu-item\"\n          slot=\"container\"\n        ></wc-focus-ring>\n        <div class=\"background\" slot=\"container\"></div>\n        <wc-ripple class=\"ripple\" for=\"menu-item\" slot=\"container\"></wc-ripple>\n\n        <slot name=\"start\" slot=\"start\"></slot>\n        <slot name=\"overline\" slot=\"overline\"></slot>\n        <slot name=\"headline\" slot=\"headline\"></slot>\n        <slot></slot>\n        <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n        <slot\n          name=\"trailing-supporting-text\"\n          slot=\"trailing-supporting-text\"\n        ></slot>\n        <slot name=\"end\" slot=\"end\"></slot>\n      </wc-item>\n    `;\n  }\n}\n"],"names":["property","LitElement","html","classMap","ifDefined","nothing","styles","colorStyles","query"],"mappings":"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"}
+{"version":3,"file":"menu-item.js","sources":["../../src/__internal/mixins/NativeButtonMixin.ts","../../src/menu/menu-item/menu-item.ts"],"sourcesContent":["import { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { MixinConstructor } from './MixinConstructor.js';\n\n/**\n * 1. Define an interface for the members the mixin adds.\n * This makes the type annotation much cleaner.\n */\nexport interface NativeButtonInterface {\n  htmlType: 'button' | 'submit' | 'reset';\n  disabled: boolean;\n  softDisabled: boolean;\n  disabledReason: string;\n  form: string;\n  name: string;\n  value: string;\n}\n\n/**\n * 2. Apply the type annotation to the variable.\n */\nconst NativeButtonMixin: <T extends MixinConstructor<LitElement>>(\n  superclass: T,\n) => T & MixinConstructor<NativeButtonInterface> = <\n  T extends MixinConstructor<LitElement>,\n>(\n  superclass: T,\n) => {\n  // Naming the class (BaseButtonElement) instead of using 'Mixin' or anonymous\n  // prevents the \"__childPart\" visibility error.\n  class ButtonElement extends superclass implements NativeButtonInterface {\n    /**\n     * The type of the underlying `<button>` element. Maps to the native `type` attribute.\n     * Possible values are `\"button\"`, `\"submit\"`, `\"reset\"`. Defaults to `\"button\"`.\n     */\n    @property({ type: String }) htmlType: 'button' | 'submit' | 'reset' =\n      'button';\n\n    /**\n     * When `true`, the button is disabled and cannot be interacted with. Reflects to the `disabled` attribute. Defaults to `false`.\n     */\n    @property({ type: Boolean, reflect: true })\n    disabled: boolean = false;\n\n    /**\n     * When `true`, the button is visually styled as disabled and cannot be interacted with, but remains focusable.\n     * Use this in combination with `disabledReason` to communicate why the button is unavailable.\n     * Reflects to the `soft-disabled` attribute. Defaults to `false`.\n     */\n    @property({ type: Boolean, reflect: true, attribute: 'soft-disabled' })\n    softDisabled: boolean = false;\n\n    /**\n     * A human-readable explanation of why the button is disabled or soft-disabled.\n     * Rendered as a visually hidden tooltip and linked via `aria-describedby` for accessibility.\n     * Maps to the `disabled-reason` attribute.\n     */\n    @property({ attribute: 'disabled-reason' })\n    disabledReason: string = '';\n\n    /**\n     * The `id` of the `<form>` element to associate the button with.\n     * If omitted, the button is associated with its nearest ancestor form.\n     * Maps to the native `form` attribute.\n     */\n    @property()\n    form: string = '';\n\n    /**\n     * The name of the button, submitted as part of a name/value pair when the associated form is submitted.\n     * Maps to the native `name` attribute.\n     */\n    @property()\n    name: string = '';\n\n    /**\n     * The value of the button, submitted as part of a name/value pair when the associated form is submitted.\n     * Maps to the native `value` attribute.\n     */\n    @property()\n    value: string = '';\n  }\n\n  return ButtonElement as T & MixinConstructor<NativeButtonInterface>;\n};\n\nexport default NativeButtonMixin;\n","import { html, LitElement, nothing } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport styles from \"./menu-item.scss\";\nimport colorStyles from \"./menu-item-colors.scss\";\nimport NativeButtonMixin from \"@/__internal/mixins/NativeButtonMixin.js\";\nimport NativeHyperlinkMixin from \"@/__internal/mixins/NativeHyperlinkMixin.js\";\nimport { isLink } from \"@/__internal/utils/is-link.js\";\nimport IndividualComponent from \"@/IndividualComponent.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\n/**\n * @label Menu Item\n * @tag wc-menu-item\n * @rawTag menu-item\n * @summary An item in a menu list.\n * @tags navigation\n *\n * @example\n * ```html\n * <wc-menu-item>Menu Item</wc-menu-item>\n * ```\n */\n@IndividualComponent\nexport class MenuItem extends NativeButtonMixin(\n  NativeHyperlinkMixin(LitElement),\n) {\n  // ── Static ───────────────────────────────────────────────────────────────\n\n  static styles = [styles, colorStyles];\n\n  // ── Properties ───────────────────────────────────────────────────────────\n\n  /** The value associated with this menu item, used to identify it on selection. */\n  @property({ type: String })\n  value = \"\";\n\n  /** Whether this menu item is currently selected/highlighted. */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  /** When true, the menu stays open after this item is activated. */\n  @property({ type: Boolean, attribute: \"keep-open\" })\n  keepOpen = false;\n\n  /** When true, indicates this item has an associated submenu. */\n  @property({ type: Boolean, attribute: \"has-submenu\" })\n  hasSubmenu = false;\n\n  /** Whether the associated submenu is currently open. */\n  @property({ type: Boolean, attribute: \"submenu-open\" })\n  submenuOpen = false;\n\n  // ── Queries ───────────────────────────────────────────────────────────────\n\n  @query(\"#menu-item\")\n  readonly itemElement!: HTMLElement | null;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** MutationObserver that triggers re-render when slotted content changes. */\n  private readonly _contentObserver = new MutationObserver(() => {\n    this.requestUpdate();\n  });\n\n  /** Roving tabindex value managed by the parent Menu. */\n  private _rovingTabIndex = -1;\n\n  connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n    this._contentObserver.observe(this, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n      attributes: true,\n      attributeFilter: [\"slot\"],\n    });\n  }\n\n  disconnectedCallback() {\n    this._contentObserver.disconnect();\n    super.disconnectedCallback();\n  }\n\n  override get tabIndex() {\n    return this._rovingTabIndex;\n  }\n\n  override set tabIndex(value: number) {\n    this._rovingTabIndex = value;\n    this.requestUpdate();\n  }\n\n  override focus() {\n    this.itemElement?.focus();\n  }\n\n  override blur() {\n    this.itemElement?.blur();\n  }\n\n  private _hasNamedSlot(...names: string[]) {\n    return names.some((name) =>\n      Array.from(this.children).some(\n        (child) => child.getAttribute(\"slot\") === name,\n      )\n    );\n  }\n\n  private _hasDefaultSlot() {\n    return Array.from(this.childNodes).some((node) => {\n      if (node.nodeType === Node.TEXT_NODE) {\n        return Boolean(node.textContent?.trim());\n      }\n\n      return (\n        node.nodeType === Node.ELEMENT_NODE &&\n        !(node as Element).hasAttribute(\"slot\")\n      );\n    });\n  }\n\n  render() {\n    const isElementLink = isLink(this);\n    const controls = this.getAttribute(\"aria-controls\");\n\n    const cssClasses = {\n      \"menu-item\": true,\n      \"native-button\": !isElementLink,\n      \"native-link\": isElementLink,\n    };\n\n    if (isElementLink) {\n      return html`\n        <a\n          id=\"menu-item\"\n          class=\"${classMap(cssClasses)}\"\n          role=\"menuitem\"\n          href=\"${ifDefined(this.href)}\"\n          target=\"${this.target}\"\n          ?rel=\"${this.rel}\"\n          ?download=\"${this.download}\"\n          tabindex=\"${this.disabled ? \"-1\" : String(this.tabIndex)}\"\n          ?selected=\"${this.selected}\"\n          aria-disabled=\"${this.disabled || this.softDisabled\n            ? \"true\"\n            : nothing}\"\n          aria-haspopup=\"${this.hasSubmenu ? \"menu\" : nothing}\"\n          aria-controls=\"${ifDefined(\n            this.hasSubmenu && controls ? controls : undefined,\n          )}\"\n          aria-expanded=\"${ifDefined(\n            this.hasSubmenu ? String(this.submenuOpen) : undefined,\n          )}\"\n        >\n          ${this.renderContent()}\n        </a>\n      `;\n    }\n\n    return html`\n      <button\n        id=\"menu-item\"\n        class=\"${classMap(cssClasses)}\"\n        role=\"menuitem\"\n        type=\"${this.htmlType}\"\n        ?disabled=\"${this.disabled}\"\n        tabindex=\"${String(this.tabIndex)}\"\n        ?selected=\"${this.selected}\"\n        aria-disabled=\"${this.softDisabled ? \"true\" : nothing}\"\n        aria-haspopup=\"${this.hasSubmenu ? \"menu\" : nothing}\"\n        aria-controls=\"${ifDefined(\n          this.hasSubmenu && controls ? controls : undefined,\n        )}\"\n        aria-expanded=\"${ifDefined(\n          this.hasSubmenu ? String(this.submenuOpen) : undefined,\n        )}\"\n      >\n        ${this.renderContent()}\n      </button>\n    `;\n  }\n\n  renderContent() {\n    return html`\n      <div class=\"menu-item-backdrop-background\"></div>\n      <wc-elevation class=\"menu-item-backdrop-elevation\"></wc-elevation>\n\n      <wc-item class=\"menu-item-content\">\n        <wc-focus-ring\n          class=\"focus-ring\"\n          for=\"menu-item\"\n          slot=\"container\"\n        ></wc-focus-ring>\n        <div class=\"background\" slot=\"container\"></div>\n        <wc-ripple class=\"ripple\" for=\"menu-item\" slot=\"container\"></wc-ripple>\n\n        <slot name=\"start\" slot=\"start\"></slot>\n        <slot name=\"overline\" slot=\"overline\"></slot>\n        <slot name=\"headline\" slot=\"headline\"></slot>\n        <slot></slot>\n        <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n        <slot\n          name=\"trailing-supporting-text\"\n          slot=\"trailing-supporting-text\"\n        ></slot>\n        <slot name=\"end\" slot=\"end\"></slot>\n      </wc-item>\n    `;\n  }\n}\n"],"names":["property","LitElement","html","classMap","ifDefined","nothing","styles","colorStyles","query"],"mappings":"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"}

package/dist/menu.js

@@ -67,23 +67,63 @@ var css_248z = i`* {
   z-index: 1;
   width: 100%;
 }
-.menu .menu-content ::slotted(:first-child) {
-  --menu-item-container-shape-start-start: var(--shape-corner-medium);
-  --menu-item-container-shape-start-end: var(--shape-corner-medium);
+.menu .menu-content ::slotted([data-position-after-divider]) {
+  --menu-item-backdrop-container-shape-start-start: var(
+    --shape-corner-small
+  );
+  --menu-item-backdrop-container-shape-start-end: var(--shape-corner-small);
+  --sub-menu-item-backdrop-container-shape-start-start: var(
+    --shape-corner-small
+  );
+  --sub-menu-item-backdrop-container-shape-start-end: var(
+    --shape-corner-small
+  );
+  --menu-item-backdrop-elevation-level-block-start: 1;
 }
-.menu .menu-content ::slotted(:last-child) {
-  --menu-item-container-shape-end-start: var(--shape-corner-medium);
-  --menu-item-container-shape-end-end: var(--shape-corner-medium);
+.menu .menu-content ::slotted([data-position-first]) {
+  --menu-item-backdrop-container-shape-start-start: var(
+    --shape-corner-large
+  );
+  --menu-item-backdrop-container-shape-start-end: var(--shape-corner-large);
+  --sub-menu-item-backdrop-container-shape-start-start: var(
+    --shape-corner-large
+  );
+  --sub-menu-item-backdrop-container-shape-start-end: var(
+    --shape-corner-large
+  );
+  --menu-item-backdrop-elevation-level-block-start: 1;
+}
+.menu .menu-content ::slotted([data-position-before-divider]) {
+  --menu-item-backdrop-elevation-level-block-end: 1;
+  --menu-item-backdrop-container-shape-end-start: var(--shape-corner-small);
+  --menu-item-backdrop-container-shape-end-end: var(--shape-corner-small);
+  --sub-menu-item-backdrop-container-shape-end-start: var(
+    --shape-corner-small
+  );
+  --sub-menu-item-backdrop-container-shape-end-end: var(
+    --shape-corner-small
+  );
+}
+.menu .menu-content ::slotted([data-position-last]) {
+  --menu-item-backdrop-elevation-level-block-end: 1;
+  --menu-item-backdrop-container-shape-end-start: var(--shape-corner-large);
+  --menu-item-backdrop-container-shape-end-end: var(--shape-corner-large);
+  --sub-menu-item-backdrop-container-shape-end-start: var(
+    --shape-corner-large
+  );
+  --sub-menu-item-backdrop-container-shape-end-end: var(
+    --shape-corner-large
+  );
 }
 .menu .menu-content ::slotted(wc-divider) {
-  --divider-spacing: var(--spacing-100);
+  --divider-spacing: 1px;
   padding-inline: var(--spacing-050);
+  --divider-color: transparent;
 }
 .menu .background {
   display: block;
   position: absolute;
   inset: 0;
-  border: 1px solid var(--color-red);
   border-start-start-radius: var(--_container-shape-start-start);
   border-start-end-radius: var(--_container-shape-start-end);
   border-end-start-radius: var(--_container-shape-end-start);
@@ -102,12 +142,6 @@ var css_248z = i`* {
   --_container-shape-start-end: var(--shape-corner-large);
   --_container-shape-end-start: var(--shape-corner-large);
   --_container-shape-end-end: var(--shape-corner-large);
-}
-.menu.variant-standard {
-  --menu-item-container-color: var(--color-surface-container);
-}
-.menu.variant-vibrant {
-  --menu-item-container-color: var(--color-tertiary-container);
 }`;
 
 var Menu_1;
@@ -132,9 +166,9 @@ let Menu = Menu_1 = class Menu extends i$1 {
         /** Whether the menu is currently visible. */
         this.open = false;
         /** Visual variant of the menu. `"vibrant"` applies stronger color emphasis. */
-        this.variant = 'standard';
+        this.variant = "standard";
         /** ID of the anchor element the menu is positioned relative to. */
-        this.anchor = '';
+        this.anchor = "";
         /** When true, renders the menu in a static preview state (always visible, no animation). */
         this.preview = false;
         /** When true, the menu will not close when a click occurs outside it. */
@@ -144,7 +178,7 @@ let Menu = Menu_1 = class Menu extends i$1 {
         /** Set to true when this menu is being used as a submenu inside another menu. */
         this.isSubmenu = false;
         /** Floating UI placement of the menu relative to its anchor. */
-        this.placement = 'bottom-start';
+        this.placement = "bottom-start";
         /** Distance in pixels between the menu and its anchor element. */
         this.offset = 6;
         /** Index of the currently focused/active item within the enabled items list. */
@@ -153,20 +187,20 @@ let Menu = Menu_1 = class Menu extends i$1 {
         this.anchorElement = null;
         /** Controller managing floating-UI positioning. */
         this._floatingController = new FloatingController(this, {
-            trigger: 'manual',
+            trigger: "manual",
             closeOnClickOutside: false,
-            strategy: 'fixed',
-            onOpenChange: isOpen => {
+            strategy: "fixed",
+            onOpenChange: (isOpen) => {
                 if (isOpen || !this.open) {
                     return;
                 }
-                this.close({ kind: 'outside-click' });
+                this.close({ kind: "outside-click" });
             },
         });
         /** Element that had focus before the menu opened; restored on close. */
         this._lastFocusedElement = null;
         /** Reason that triggered the most recent close, included in the `closed` event detail. */
-        this._closeReason = { kind: 'programmatic' };
+        this._closeReason = { kind: "programmatic" };
         this._onClick = (event) => {
             if (!this.open) {
                 return;
@@ -180,7 +214,7 @@ let Menu = Menu_1 = class Menu extends i$1 {
             if (item.keepOpen) {
                 return;
             }
-            this.close({ kind: 'click-selection' });
+            this.close({ kind: "click-selection" });
         };
         this._onKeyDown = (event) => {
             if (!this.open) {
@@ -194,33 +228,33 @@ let Menu = Menu_1 = class Menu extends i$1 {
                 this._setActiveItem(eventItem);
             }
             switch (event.key) {
-                case 'ArrowDown':
+                case "ArrowDown":
                     event.preventDefault();
                     this._setActiveByOffset(1);
                     break;
-                case 'ArrowUp':
+                case "ArrowUp":
                     event.preventDefault();
                     this._setActiveByOffset(-1);
                     break;
-                case 'Home':
+                case "Home":
                     event.preventDefault();
                     this._setBoundaryActive(0);
                     break;
-                case 'End': {
+                case "End": {
                     event.preventDefault();
                     const last = Math.max(this._enabledItems().length - 1, 0);
                     this._setBoundaryActive(last);
                     break;
                 }
-                case 'Escape':
+                case "Escape":
                     event.preventDefault();
-                    this.close({ kind: 'keydown', key: 'Escape' });
+                    this.close({ kind: "keydown", key: "Escape" });
                     break;
-                case 'Tab':
-                    this.close({ kind: 'keydown', key: 'Tab' });
+                case "Tab":
+                    this.close({ kind: "keydown", key: "Tab" });
                     break;
-                case 'Enter':
-                case ' ': {
+                case "Enter":
+                case " ": {
                     event.preventDefault();
                     const activeItem = this._getActiveItem() ?? this._getFirstEnabledItem();
                     if (!activeItem) {
@@ -234,24 +268,25 @@ let Menu = Menu_1 = class Menu extends i$1 {
         };
         this._onSlotChange = () => {
             this._syncRovingTabIndex();
+            this._syncItemPositions();
         };
     }
     connectedCallback() {
         // eslint-disable-next-line wc/guard-super-call
         super.connectedCallback();
-        this.setAttribute('role', 'menu');
-        this.addEventListener('keydown', this._onKeyDown);
-        this.addEventListener('click', this._onClick);
+        this.setAttribute("role", "menu");
+        this.addEventListener("keydown", this._onKeyDown);
+        this.addEventListener("click", this._onClick);
         this._syncAnchorAria();
     }
     disconnectedCallback() {
-        this.removeEventListener('keydown', this._onKeyDown);
-        this.removeEventListener('click', this._onClick);
+        this.removeEventListener("keydown", this._onKeyDown);
+        this.removeEventListener("click", this._onClick);
         this._floatingController.close();
         super.disconnectedCallback();
     }
     get items() {
-        const slot = this.shadowRoot?.querySelector('slot');
+        const slot = this.shadowRoot?.querySelector("slot");
         const elements = slot?.assignedElements({ flatten: true }) ?? [];
         const items = [];
         for (const element of elements) {
@@ -271,10 +306,10 @@ let Menu = Menu_1 = class Menu extends i$1 {
         if (this.open) {
             return;
         }
-        this._closeReason = { kind: 'programmatic' };
+        this._closeReason = { kind: "programmatic" };
         this.open = true;
     }
-    close(reason = { kind: 'programmatic' }) {
+    close(reason = { kind: "programmatic" }) {
         if (!this.open) {
             return;
         }
@@ -293,7 +328,7 @@ let Menu = Menu_1 = class Menu extends i$1 {
             return null;
         }
         const root = this.getRootNode();
-        if ('getElementById' in root) {
+        if ("getElementById" in root) {
             return root.getElementById(this.anchor);
         }
         return document.getElementById(this.anchor);
@@ -306,12 +341,12 @@ let Menu = Menu_1 = class Menu extends i$1 {
         if (!this.id) {
             this.id = `wc-menu-${Math.random().toString(36).slice(2, 9)}`;
         }
-        anchorEl.setAttribute('aria-haspopup', 'menu');
-        anchorEl.setAttribute('aria-controls', this.id);
-        anchorEl.setAttribute('aria-expanded', String(this.open));
+        anchorEl.setAttribute("aria-haspopup", "menu");
+        anchorEl.setAttribute("aria-controls", this.id);
+        anchorEl.setAttribute("aria-expanded", String(this.open));
     }
     _enabledItems() {
-        return this.items.filter(item => !item.disabled);
+        return this.items.filter((item) => !item.disabled);
     }
     _syncRovingTabIndex() {
         const ownedItems = this.items;
@@ -364,7 +399,7 @@ let Menu = Menu_1 = class Menu extends i$1 {
     }
     _isEventFromThisMenu(event) {
         const path = event.composedPath();
-        const sourceMenu = path.find(target => target instanceof Menu_1);
+        const sourceMenu = path.find((target) => target instanceof Menu_1);
         return sourceMenu === this;
     }
     _ownedItemFromEvent(event) {
@@ -375,7 +410,7 @@ let Menu = Menu_1 = class Menu extends i$1 {
         const ownedItems = this.items;
         for (const target of path) {
             if (target instanceof MenuItem) {
-                const ownedItem = ownedItems.find(item => item === target);
+                const ownedItem = ownedItems.find((item) => item === target);
                 if (ownedItem) {
                     return ownedItem;
                 }
@@ -393,12 +428,61 @@ let Menu = Menu_1 = class Menu extends i$1 {
         this._syncRovingTabIndex();
     }
     _dispatchItemActivate(item) {
-        this.dispatchEvent(new CustomEvent('menu-item-activate', {
+        this.dispatchEvent(new CustomEvent("menu-item-activate", {
             bubbles: true,
             composed: true,
             detail: { item },
         }));
     }
+    _syncItemPositions() {
+        const slot = this.shadowRoot?.querySelector("slot");
+        const elements = slot?.assignedElements({ flatten: true }) ?? [];
+        for (const el of elements) {
+            if (el instanceof HTMLElement) {
+                el.removeAttribute("data-position-first");
+                el.removeAttribute("data-position-last");
+                el.removeAttribute("data-position-after-divider");
+                el.removeAttribute("data-position-before-divider");
+            }
+        }
+        const items = elements.filter((el) => el.tagName.toLowerCase() !== "wc-divider");
+        if (items.length === 0) {
+            return;
+        }
+        const firstItem = items[0];
+        if (firstItem instanceof HTMLElement) {
+            firstItem.setAttribute("data-position-first", "");
+        }
+        const lastItem = items[items.length - 1];
+        if (lastItem instanceof HTMLElement) {
+            lastItem.setAttribute("data-position-last", "");
+        }
+        for (let i = 0; i < elements.length; i++) {
+            const el = elements[i];
+            if (el.tagName.toLowerCase() === "wc-divider") {
+                let prevItem = null;
+                for (let j = i - 1; j >= 0; j--) {
+                    if (elements[j].tagName.toLowerCase() !== "wc-divider") {
+                        prevItem = elements[j];
+                        break;
+                    }
+                }
+                if (prevItem instanceof HTMLElement) {
+                    prevItem.setAttribute("data-position-before-divider", "");
+                }
+                let nextItem = null;
+                for (let j = i + 1; j < elements.length; j++) {
+                    if (elements[j].tagName.toLowerCase() !== "wc-divider") {
+                        nextItem = elements[j];
+                        break;
+                    }
+                }
+                if (nextItem instanceof HTMLElement) {
+                    nextItem.setAttribute("data-position-after-divider", "");
+                }
+            }
+        }
+    }
     _applyPositioning() {
         if (!this.open || !this.menuListElement) {
             return;
@@ -410,21 +494,22 @@ let Menu = Menu_1 = class Menu extends i$1 {
         this._floatingController.setOptions({
             placement: this.placement,
             offset: this.offset,
-            strategy: 'fixed',
+            strategy: "fixed",
             closeOnClickOutside: !this.stayOpenOnOutsideClick,
         });
         this._floatingController.setElements(anchorEl, this.menuListElement);
         this._floatingController.open();
     }
     updated(changedProperties) {
-        if (changedProperties.has('anchor') || changedProperties.has('open')) {
+        if (changedProperties.has("anchor") || changedProperties.has("open")) {
             this._syncAnchorAria();
         }
-        if (changedProperties.has('open')) {
+        if (changedProperties.has("open")) {
             if (this.open) {
                 this._lastFocusedElement = document.activeElement;
                 this._syncRovingTabIndex();
-                this.dispatchEvent(new CustomEvent('opened', {
+                this._syncItemPositions();
+                this.dispatchEvent(new CustomEvent("opened", {
                     bubbles: true,
                     composed: true,
                 }));
@@ -433,7 +518,7 @@ let Menu = Menu_1 = class Menu extends i$1 {
             else {
                 this._floatingController.close();
                 const reason = this._closeReason;
-                this.dispatchEvent(new CustomEvent('close-menu', {
+                this.dispatchEvent(new CustomEvent("close-menu", {
                     bubbles: true,
                     composed: true,
                     detail: {
@@ -441,42 +526,45 @@ let Menu = Menu_1 = class Menu extends i$1 {
                         itemPath: [],
                     },
                 }));
-                this.dispatchEvent(new CustomEvent('closed', {
+                this.dispatchEvent(new CustomEvent("closed", {
                     bubbles: true,
                     composed: true,
                     detail: { reason },
                 }));
-                const shouldRestoreFocus = reason.kind !== 'keydown' || reason.key !== 'Tab';
+                const shouldRestoreFocus = reason.kind !== "keydown" ||
+                    reason.key !== "Tab";
                 if (!this.isSubmenu && shouldRestoreFocus) {
                     this._lastFocusedElement?.focus();
                 }
             }
         }
-        if ((changedProperties.has('open') ||
-            changedProperties.has('anchor') ||
-            changedProperties.has('placement') ||
-            changedProperties.has('offset')) &&
+        if ((changedProperties.has("open") ||
+            changedProperties.has("anchor") ||
+            changedProperties.has("placement") ||
+            changedProperties.has("offset")) &&
             this.open) {
             this._applyPositioning();
         }
     }
     render() {
-        return b `<div
-      class=${e$1({
+        return b `
+      <div
+        class="${e$1({
             menu: true,
             open: !this.preview && this.open,
             closed: !this.preview && !this.open,
             preview: this.preview,
             [`variant-${this.variant}`]: true,
-        })}
-      aria-hidden=${String(!this.open)}
-    >
-      <div class="background"></div>
+        })}"
+        aria-hidden="${String(!this.open)}"
+      >
+        <div class="background"></div>
 
-      <div class="menu-content">
-        <slot @slotchange=${this._onSlotChange}></slot>
+        <div class="menu-content">
+          <slot @slotchange="${this._onSlotChange}"></slot>
+        </div>
       </div>
-    </div>`;
+    `;
     }
 };
 Menu.styles = [css_248z];
@@ -494,13 +582,13 @@ __decorate([
     n({ type: Boolean, reflect: true })
 ], Menu.prototype, "preview", void 0);
 __decorate([
-    n({ type: Boolean, attribute: 'stay-open-on-outside-click' })
+    n({ type: Boolean, attribute: "stay-open-on-outside-click" })
 ], Menu.prototype, "stayOpenOnOutsideClick", void 0);
 __decorate([
-    n({ type: Boolean, attribute: 'stay-open-on-focusout' })
+    n({ type: Boolean, attribute: "stay-open-on-focusout" })
 ], Menu.prototype, "stayOpenOnFocusout", void 0);
 __decorate([
-    n({ type: Boolean, attribute: 'is-submenu' })
+    n({ type: Boolean, attribute: "is-submenu" })
 ], Menu.prototype, "isSubmenu", void 0);
 __decorate([
     n({ type: String })
@@ -512,7 +600,7 @@ __decorate([
     r()
 ], Menu.prototype, "activeIndex", void 0);
 __decorate([
-    e('.menu')
+    e(".menu")
 ], Menu.prototype, "menuListElement", void 0);
 Menu = Menu_1 = __decorate([
     IndividualComponent