@redvars/peacock 3.8.1 → 3.8.2

package/dist/menu.js

@@ -0,0 +1,534 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e } from './query-CHb9Ft_d.js';
+import { e as e$1 } from './class-map-DG7CA1et.js';
+import { F as FloatingController } from './floating-controller-CnUZnOhK.js';
+import { MenuItem } from './menu-item.js';
+import './base-Cl6v8-BZ.js';
+import './directive-ZPhl09Yt.js';
+import './if-defined-BXZpRQ4P.js';
+import './NativeHyperlinkMixin-D9J4aBTy.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+.menu {
+  display: flex;
+  position: fixed;
+  z-index: var(--menu-z-index, 1000);
+  width: var(--menu-width, max-content);
+  max-width: 100vw;
+  min-width: 112px;
+  padding-block: var(--spacing-050);
+  transform-origin: top center;
+  --_menu-enter-duration: var(--duration-medium1);
+  --_menu-exit-duration: var(--duration-medium2);
+  --_menu-enter-easing: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --_menu-exit-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
+  transition-property: opacity, transform, visibility;
+  transition-duration: var(--_menu-exit-duration), var(--_menu-exit-duration), 0ms;
+  transition-delay: 0ms, 0ms, var(--_menu-exit-duration);
+  transition-timing-function: var(--_menu-exit-easing), var(--_menu-exit-easing), linear;
+}
+.menu.closed {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(-4px) scale(0.97);
+}
+.menu.open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+  transition-duration: var(--_menu-enter-duration), var(--_menu-enter-duration), 0ms;
+  transition-delay: 0ms, 0ms, 0ms;
+  transition-timing-function: var(--_menu-enter-easing), var(--_menu-enter-easing), linear;
+}
+.menu.preview {
+  position: relative;
+  pointer-events: auto;
+}
+.menu .menu-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-050);
+  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(: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(wc-divider) {
+  --divider-spacing: var(--spacing-100);
+  padding-inline: var(--spacing-050);
+}
+.menu .background {
+  display: block;
+  position: absolute;
+  inset: 0;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity, 1);
+  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);
+  border-end-end-radius: var(--_container-shape-end-end);
+  pointer-events: none;
+}
+.menu .elevation {
+  --elevation-level: 2;
+  transition-duration: 280ms;
+  --elevation-container-shape-start-start: var(
+    --_container-shape-start-start
+  );
+  --elevation-container-shape-start-end: var(--_container-shape-start-end);
+  --elevation-container-shape-end-start: var(--_container-shape-end-start);
+  --elevation-container-shape-end-end: var(--_container-shape-end-end);
+  --elevation-container-shape-variant: var(--_container-corner-shape-variant);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .menu {
+    transition: none;
+    transform: none;
+  }
+}
+.menu {
+  --_container-shape-start-start: var(--shape-corner-large);
+  --_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 {
+  --_container-color: var(--color-surface-container);
+}
+.menu.variant-vibrant {
+  --_container-color: var(--color-tertiary-container);
+}`;
+
+var Menu_1;
+/**
+ * @label Menu
+ * @tag wc-menu
+ * @rawTag menu
+ * @summary A list of menu items.
+ * @tags navigation
+ *
+ * @example
+ * ```html
+ * <wc-menu preview>
+ *   <wc-menu-item>Item 1</wc-menu-item>
+ *   <wc-menu-item selected>Item 2</wc-menu-item>
+ * </wc-menu>
+ * ```
+ */
+let Menu = Menu_1 = class Menu extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** Whether the menu is currently visible. */
+        this.open = false;
+        /** Visual variant of the menu. `"vibrant"` applies stronger color emphasis. */
+        this.variant = 'standard';
+        /** ID of the anchor element the menu is positioned relative to. */
+        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. */
+        this.stayOpenOnOutsideClick = false;
+        /** When true, the menu will not close when focus leaves it. */
+        this.stayOpenOnFocusout = false;
+        /** 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';
+        /** 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. */
+        this.activeIndex = -1;
+        /** Direct reference to the anchor element; takes precedence over the `anchor` ID property. */
+        this.anchorElement = null;
+        /** Controller managing floating-UI positioning. */
+        this._floatingController = new FloatingController(this, {
+            trigger: 'manual',
+            closeOnClickOutside: false,
+            strategy: 'fixed',
+            onOpenChange: isOpen => {
+                if (isOpen || !this.open) {
+                    return;
+                }
+                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._onClick = (event) => {
+            if (!this.open) {
+                return;
+            }
+            const item = this._ownedItemFromEvent(event);
+            if (!item) {
+                return;
+            }
+            this._setActiveItem(item);
+            this._dispatchItemActivate(item);
+            if (item.keepOpen) {
+                return;
+            }
+            this.close({ kind: 'click-selection' });
+        };
+        this._onKeyDown = (event) => {
+            if (!this.open) {
+                return;
+            }
+            if (!this._isEventFromThisMenu(event)) {
+                return;
+            }
+            const eventItem = this._ownedItemFromEvent(event);
+            if (eventItem) {
+                this._setActiveItem(eventItem);
+            }
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this._setActiveByOffset(1);
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this._setActiveByOffset(-1);
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    this._setBoundaryActive(0);
+                    break;
+                case 'End': {
+                    event.preventDefault();
+                    const last = Math.max(this._enabledItems().length - 1, 0);
+                    this._setBoundaryActive(last);
+                    break;
+                }
+                case 'Escape':
+                    event.preventDefault();
+                    this.close({ kind: 'keydown', key: 'Escape' });
+                    break;
+                case 'Tab':
+                    this.close({ kind: 'keydown', key: 'Tab' });
+                    break;
+                case 'Enter':
+                case ' ': {
+                    event.preventDefault();
+                    const activeItem = this._getActiveItem() ?? this._getFirstEnabledItem();
+                    if (!activeItem) {
+                        return;
+                    }
+                    this._setActiveItem(activeItem);
+                    activeItem.click();
+                    break;
+                }
+            }
+        };
+        this._onSlotChange = () => {
+            this._syncRovingTabIndex();
+        };
+    }
+    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._syncAnchorAria();
+    }
+    disconnectedCallback() {
+        this.removeEventListener('keydown', this._onKeyDown);
+        this.removeEventListener('click', this._onClick);
+        this._floatingController.close();
+        super.disconnectedCallback();
+    }
+    get items() {
+        const slot = this.shadowRoot?.querySelector('slot');
+        const elements = slot?.assignedElements({ flatten: true }) ?? [];
+        const items = [];
+        for (const element of elements) {
+            if (element instanceof MenuItem) {
+                items.push(element);
+            }
+            else {
+                const maybeItem = element.item;
+                if (maybeItem instanceof MenuItem) {
+                    items.push(maybeItem);
+                }
+            }
+        }
+        return items;
+    }
+    show() {
+        if (this.open) {
+            return;
+        }
+        this._closeReason = { kind: 'programmatic' };
+        this.open = true;
+    }
+    close(reason = { kind: 'programmatic' }) {
+        if (!this.open) {
+            return;
+        }
+        this._closeReason = reason;
+        this.open = false;
+    }
+    focus() {
+        const target = this._getActiveItem() ?? this._getFirstEnabledItem();
+        target?.focus();
+    }
+    _resolveAnchorElement() {
+        if (this.anchorElement) {
+            return this.anchorElement;
+        }
+        if (!this.anchor) {
+            return null;
+        }
+        const root = this.getRootNode();
+        if ('getElementById' in root) {
+            return root.getElementById(this.anchor);
+        }
+        return document.getElementById(this.anchor);
+    }
+    _syncAnchorAria() {
+        const anchorEl = this._resolveAnchorElement();
+        if (!anchorEl) {
+            return;
+        }
+        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));
+    }
+    _enabledItems() {
+        return this.items.filter(item => !item.disabled);
+    }
+    _syncRovingTabIndex() {
+        const ownedItems = this.items;
+        const enabledItems = this._enabledItems();
+        for (const item of ownedItems) {
+            item.tabIndex = -1;
+        }
+        if (!enabledItems.length) {
+            this.activeIndex = -1;
+            return;
+        }
+        if (this.activeIndex < 0 || this.activeIndex >= enabledItems.length) {
+            this.activeIndex = 0;
+        }
+        enabledItems[this.activeIndex].tabIndex = 0;
+    }
+    _setActiveByOffset(offset) {
+        const enabledItems = this._enabledItems();
+        if (!enabledItems.length) {
+            return;
+        }
+        if (this.activeIndex < 0) {
+            this.activeIndex = 0;
+        }
+        else {
+            const count = enabledItems.length;
+            this.activeIndex = (this.activeIndex + offset + count) % count;
+        }
+        this._syncRovingTabIndex();
+        enabledItems[this.activeIndex]?.focus();
+    }
+    _setBoundaryActive(index) {
+        const enabledItems = this._enabledItems();
+        if (!enabledItems.length) {
+            return;
+        }
+        this.activeIndex = index;
+        this._syncRovingTabIndex();
+        enabledItems[this.activeIndex]?.focus();
+    }
+    _getActiveItem() {
+        const enabledItems = this._enabledItems();
+        if (!enabledItems.length || this.activeIndex < 0) {
+            return null;
+        }
+        return enabledItems[this.activeIndex] ?? null;
+    }
+    _getFirstEnabledItem() {
+        return this._enabledItems()[0] ?? null;
+    }
+    _isEventFromThisMenu(event) {
+        const path = event.composedPath();
+        const sourceMenu = path.find(target => target instanceof Menu_1);
+        return sourceMenu === this;
+    }
+    _ownedItemFromEvent(event) {
+        if (!this._isEventFromThisMenu(event)) {
+            return null;
+        }
+        const path = event.composedPath();
+        const ownedItems = this.items;
+        for (const target of path) {
+            if (target instanceof MenuItem) {
+                const ownedItem = ownedItems.find(item => item === target);
+                if (ownedItem) {
+                    return ownedItem;
+                }
+            }
+        }
+        return null;
+    }
+    _setActiveItem(item) {
+        const enabledItems = this._enabledItems();
+        const nextIndex = enabledItems.indexOf(item);
+        if (nextIndex < 0) {
+            return;
+        }
+        this.activeIndex = nextIndex;
+        this._syncRovingTabIndex();
+    }
+    _dispatchItemActivate(item) {
+        this.dispatchEvent(new CustomEvent('menu-item-activate', {
+            bubbles: true,
+            composed: true,
+            detail: { item },
+        }));
+    }
+    _applyPositioning() {
+        if (!this.open || !this.menuListElement) {
+            return;
+        }
+        const anchorEl = this._resolveAnchorElement();
+        if (!anchorEl) {
+            return;
+        }
+        this._floatingController.setOptions({
+            placement: this.placement,
+            offset: this.offset,
+            strategy: 'fixed',
+            closeOnClickOutside: !this.stayOpenOnOutsideClick,
+        });
+        this._floatingController.setElements(anchorEl, this.menuListElement);
+        this._floatingController.open();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('anchor') || changedProperties.has('open')) {
+            this._syncAnchorAria();
+        }
+        if (changedProperties.has('open')) {
+            if (this.open) {
+                this._lastFocusedElement = document.activeElement;
+                this._syncRovingTabIndex();
+                this.dispatchEvent(new CustomEvent('opened', {
+                    bubbles: true,
+                    composed: true,
+                }));
+                this._applyPositioning();
+            }
+            else {
+                this._floatingController.close();
+                const reason = this._closeReason;
+                this.dispatchEvent(new CustomEvent('close-menu', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        reason,
+                        itemPath: [],
+                    },
+                }));
+                this.dispatchEvent(new CustomEvent('closed', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { reason },
+                }));
+                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')) &&
+            this.open) {
+            this._applyPositioning();
+        }
+    }
+    render() {
+        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>
+      <wc-elevation class="elevation"></wc-elevation>
+
+      <div class="menu-content">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+    </div>`;
+    }
+};
+Menu.styles = [css_248z];
+Menu.Item = MenuItem;
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Menu.prototype, "open", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], Menu.prototype, "variant", void 0);
+__decorate([
+    n({ type: String })
+], Menu.prototype, "anchor", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Menu.prototype, "preview", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'stay-open-on-outside-click' })
+], Menu.prototype, "stayOpenOnOutsideClick", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'stay-open-on-focusout' })
+], Menu.prototype, "stayOpenOnFocusout", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'is-submenu' })
+], Menu.prototype, "isSubmenu", void 0);
+__decorate([
+    n({ type: String })
+], Menu.prototype, "placement", void 0);
+__decorate([
+    n({ type: Number })
+], Menu.prototype, "offset", void 0);
+__decorate([
+    r()
+], Menu.prototype, "activeIndex", void 0);
+__decorate([
+    e('.menu')
+], Menu.prototype, "menuListElement", void 0);
+Menu = Menu_1 = __decorate([
+    IndividualComponent
+], Menu);
+
+export { Menu };
+//# sourceMappingURL=menu.js.map

package/dist/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sources":["../../src/menu/menu/menu.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport type { Placement } from '@floating-ui/dom';\nimport styles from './menu.scss';\nimport { FloatingController } from '../../__internal/controllers/floating-controller.js';\nimport { MenuItem } from '../menu-item/menu-item.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\ntype CloseReason =\n  | { kind: 'click-selection' }\n  | { kind: 'keydown'; key: string }\n  | { kind: 'outside-click' }\n  | { kind: 'focusout' }\n  | { kind: 'programmatic' };\n\n/**\n * @label Menu\n * @tag wc-menu\n * @rawTag menu\n * @summary A list of menu items.\n * @tags navigation\n *\n * @example\n * ```html\n * <wc-menu preview>\n *   <wc-menu-item>Item 1</wc-menu-item>\n *   <wc-menu-item selected>Item 2</wc-menu-item>\n * </wc-menu>\n * ```\n */\n@IndividualComponent\nexport class Menu extends LitElement {\n  static styles = [styles];\n\n  static Item = MenuItem;\n\n  /** Whether the menu is currently visible. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Visual variant of the menu. `\"vibrant\"` applies stronger color emphasis. */\n  @property({ type: String, reflect: true }) variant: 'standard' | 'vibrant' =\n    'standard';\n\n  /** ID of the anchor element the menu is positioned relative to. */\n  @property({ type: String }) anchor = '';\n\n  /** When true, renders the menu in a static preview state (always visible, no animation). */\n  @property({ type: Boolean, reflect: true }) preview = false;\n\n  /** When true, the menu will not close when a click occurs outside it. */\n  @property({ type: Boolean, attribute: 'stay-open-on-outside-click' })\n  stayOpenOnOutsideClick = false;\n\n  /** When true, the menu will not close when focus leaves it. */\n  @property({ type: Boolean, attribute: 'stay-open-on-focusout' })\n  stayOpenOnFocusout = false;\n\n  /** Set to true when this menu is being used as a submenu inside another menu. */\n  @property({ type: Boolean, attribute: 'is-submenu' }) isSubmenu = false;\n\n  /** Floating UI placement of the menu relative to its anchor. */\n  @property({ type: String }) placement: Placement = 'bottom-start';\n\n  /** Distance in pixels between the menu and its anchor element. */\n  @property({ type: Number }) offset = 6;\n\n  /** Index of the currently focused/active item within the enabled items list. */\n  @state() private activeIndex = -1;\n\n  @query('.menu') private readonly menuListElement!: HTMLElement;\n\n  /** Direct reference to the anchor element; takes precedence over the `anchor` ID property. */\n  anchorElement: HTMLElement | null = null;\n\n  /** Controller managing floating-UI positioning. */\n  private readonly _floatingController = new FloatingController(this, {\n    trigger: 'manual',\n    closeOnClickOutside: false,\n    strategy: 'fixed',\n    onOpenChange: isOpen => {\n      if (isOpen || !this.open) {\n        return;\n      }\n\n      this.close({ kind: 'outside-click' });\n    },\n  });\n\n  /** Element that had focus before the menu opened; restored on close. */\n  private _lastFocusedElement: HTMLElement | null = null;\n\n  /** Reason that triggered the most recent close, included in the `closed` event detail. */\n  private _closeReason: CloseReason = { kind: 'programmatic' };\n\n  connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n\n    this.addEventListener('keydown', this._onKeyDown);\n    this.addEventListener('click', this._onClick);\n    this._syncAnchorAria();\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('keydown', this._onKeyDown);\n    this.removeEventListener('click', this._onClick);\n    this._floatingController.close();\n    super.disconnectedCallback();\n  }\n\n  get items(): MenuItem[] {\n    const slot = this.shadowRoot?.querySelector('slot');\n    const elements = slot?.assignedElements({ flatten: true }) ?? [];\n    const items: MenuItem[] = [];\n\n    for (const element of elements) {\n      if (element instanceof MenuItem) {\n        items.push(element);\n      } else {\n        const maybeItem = (element as { item?: unknown }).item;\n        if (maybeItem instanceof MenuItem) {\n          items.push(maybeItem);\n        }\n      }\n    }\n\n    return items;\n  }\n\n  show() {\n    if (this.open) {\n      return;\n    }\n\n    this._closeReason = { kind: 'programmatic' };\n    this.open = true;\n  }\n\n  close(reason: CloseReason = { kind: 'programmatic' }) {\n    if (!this.open) {\n      return;\n    }\n\n    this._closeReason = reason;\n    this.open = false;\n  }\n\n  override focus() {\n    const target = this._getActiveItem() ?? this._getFirstEnabledItem();\n    target?.focus();\n  }\n\n  private _resolveAnchorElement() {\n    if (this.anchorElement) {\n      return this.anchorElement;\n    }\n\n    if (!this.anchor) {\n      return null;\n    }\n\n    const root = this.getRootNode() as Document | ShadowRoot;\n    if ('getElementById' in root) {\n      return root.getElementById(this.anchor);\n    }\n\n    return document.getElementById(this.anchor);\n  }\n\n  private _syncAnchorAria() {\n    const anchorEl = this._resolveAnchorElement();\n    if (!anchorEl) {\n      return;\n    }\n\n    if (!this.id) {\n      this.id = `wc-menu-${Math.random().toString(36).slice(2, 9)}`;\n    }\n\n    anchorEl.setAttribute('aria-haspopup', 'menu');\n    anchorEl.setAttribute('aria-controls', this.id);\n    anchorEl.setAttribute('aria-expanded', String(this.open));\n  }\n\n  private _enabledItems() {\n    return this.items.filter(item => !item.disabled);\n  }\n\n  private _syncRovingTabIndex() {\n    const ownedItems = this.items;\n    const enabledItems = this._enabledItems();\n    for (const item of ownedItems) {\n      item.tabIndex = -1;\n    }\n\n    if (!enabledItems.length) {\n      this.activeIndex = -1;\n      return;\n    }\n\n    if (this.activeIndex < 0 || this.activeIndex >= enabledItems.length) {\n      this.activeIndex = 0;\n    }\n\n    enabledItems[this.activeIndex].tabIndex = 0;\n  }\n\n  private _setActiveByOffset(offset: 1 | -1) {\n    const enabledItems = this._enabledItems();\n    if (!enabledItems.length) {\n      return;\n    }\n\n    if (this.activeIndex < 0) {\n      this.activeIndex = 0;\n    } else {\n      const count = enabledItems.length;\n      this.activeIndex = (this.activeIndex + offset + count) % count;\n    }\n\n    this._syncRovingTabIndex();\n    enabledItems[this.activeIndex]?.focus();\n  }\n\n  private _setBoundaryActive(index: number) {\n    const enabledItems = this._enabledItems();\n    if (!enabledItems.length) {\n      return;\n    }\n\n    this.activeIndex = index;\n    this._syncRovingTabIndex();\n    enabledItems[this.activeIndex]?.focus();\n  }\n\n  private _getActiveItem() {\n    const enabledItems = this._enabledItems();\n    if (!enabledItems.length || this.activeIndex < 0) {\n      return null;\n    }\n\n    return enabledItems[this.activeIndex] ?? null;\n  }\n\n  private _getFirstEnabledItem() {\n    return this._enabledItems()[0] ?? null;\n  }\n\n  private _isEventFromThisMenu(event: Event) {\n    const path = event.composedPath();\n    const sourceMenu = path.find(target => target instanceof Menu);\n\n    return sourceMenu === this;\n  }\n\n  private _ownedItemFromEvent(event: Event) {\n    if (!this._isEventFromThisMenu(event)) {\n      return null;\n    }\n\n    const path = event.composedPath();\n    const ownedItems = this.items;\n\n    for (const target of path) {\n      if (target instanceof MenuItem) {\n        const ownedItem = ownedItems.find(item => item === target);\n        if (ownedItem) {\n          return ownedItem;\n        }\n      }\n    }\n\n    return null;\n  }\n\n  private _setActiveItem(item: MenuItem) {\n    const enabledItems = this._enabledItems();\n    const nextIndex = enabledItems.indexOf(item);\n    if (nextIndex < 0) {\n      return;\n    }\n\n    this.activeIndex = nextIndex;\n    this._syncRovingTabIndex();\n  }\n\n  private _dispatchItemActivate(item: MenuItem) {\n    this.dispatchEvent(\n      new CustomEvent('menu-item-activate', {\n        bubbles: true,\n        composed: true,\n        detail: { item },\n      }),\n    );\n  }\n\n  private _onClick = (event: Event) => {\n    if (!this.open) {\n      return;\n    }\n\n    const item = this._ownedItemFromEvent(event);\n    if (!item) {\n      return;\n    }\n\n    this._setActiveItem(item);\n    this._dispatchItemActivate(item);\n    if (item.keepOpen) {\n      return;\n    }\n\n    this.close({ kind: 'click-selection' });\n  };\n\n  private _onKeyDown = (event: KeyboardEvent) => {\n    if (!this.open) {\n      return;\n    }\n\n    if (!this._isEventFromThisMenu(event)) {\n      return;\n    }\n\n    const eventItem = this._ownedItemFromEvent(event);\n    if (eventItem) {\n      this._setActiveItem(eventItem);\n    }\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this._setActiveByOffset(1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this._setActiveByOffset(-1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        this._setBoundaryActive(0);\n        break;\n      case 'End': {\n        event.preventDefault();\n        const last = Math.max(this._enabledItems().length - 1, 0);\n        this._setBoundaryActive(last);\n        break;\n      }\n      case 'Escape':\n        event.preventDefault();\n        this.close({ kind: 'keydown', key: 'Escape' });\n        break;\n      case 'Tab':\n        this.close({ kind: 'keydown', key: 'Tab' });\n        break;\n      case 'Enter':\n      case ' ': {\n        event.preventDefault();\n        const activeItem = this._getActiveItem() ?? this._getFirstEnabledItem();\n        if (!activeItem) {\n          return;\n        }\n\n        this._setActiveItem(activeItem);\n        activeItem.click();\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  private _onSlotChange = () => {\n    this._syncRovingTabIndex();\n  };\n\n  private _applyPositioning() {\n    if (!this.open || !this.menuListElement) {\n      return;\n    }\n\n    const anchorEl = this._resolveAnchorElement();\n    if (!anchorEl) {\n      return;\n    }\n\n    this._floatingController.setOptions({\n      placement: this.placement,\n      offset: this.offset,\n      strategy: 'fixed',\n      closeOnClickOutside: !this.stayOpenOnOutsideClick,\n    });\n    this._floatingController.setElements(anchorEl, this.menuListElement);\n    this._floatingController.open();\n  }\n\n  protected override updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('anchor') || changedProperties.has('open')) {\n      this._syncAnchorAria();\n    }\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._lastFocusedElement = document.activeElement as HTMLElement | null;\n        this._syncRovingTabIndex();\n        this.dispatchEvent(\n          new CustomEvent('opened', {\n            bubbles: true,\n            composed: true,\n          }),\n        );\n\n        this._applyPositioning();\n      } else {\n        this._floatingController.close();\n\n        const reason = this._closeReason;\n        this.dispatchEvent(\n          new CustomEvent('close-menu', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              reason,\n              itemPath: [],\n            },\n          }),\n        );\n        this.dispatchEvent(\n          new CustomEvent('closed', {\n            bubbles: true,\n            composed: true,\n            detail: { reason },\n          }),\n        );\n\n        const shouldRestoreFocus =\n          reason.kind !== 'keydown' || reason.key !== 'Tab';\n\n        if (!this.isSubmenu && shouldRestoreFocus) {\n          this._lastFocusedElement?.focus();\n        }\n      }\n    }\n\n    if (\n      (changedProperties.has('open') ||\n        changedProperties.has('anchor') ||\n        changedProperties.has('placement') ||\n        changedProperties.has('offset')) &&\n      this.open\n    ) {\n      this._applyPositioning();\n    }\n  }\n\n  render() {\n    return html`<div\n      class=${classMap({\n        menu: true,\n        open: !this.preview && this.open,\n        closed: !this.preview && !this.open,\n        preview: this.preview,\n        [`variant-${this.variant}`]: true,\n      })}\n      aria-hidden=${String(!this.open)}\n    >\n      <div class=\"background\"></div>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n\n      <div class=\"menu-content\">\n        <slot @slotchange=${this._onSlotChange}></slot>\n      </div>\n    </div>`;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property","state","query"],"mappings":"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"}

package/dist/modal.js

@@ -1,7 +1,7 @@
-import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, A, b } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
-import { r } from './state-DwbEjqVk.js';
-import { e } from './class-map-YU7g0o3B.js';
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, A, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e } from './class-map-DG7CA1et.js';
 import './directive-ZPhl09Yt.js';
 
 var css_248z = i`@charset "UTF-8";
@@ -13,6 +13,10 @@ var css_248z = i`@charset "UTF-8";
   display: none !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 :host {
   display: contents;
   --modal-container-color: var(--color-surface-container-high);
@@ -216,7 +220,7 @@ var css_248z = i`@charset "UTF-8";
  * @label Modal
  * @tag wc-modal
  * @rawTag modal
- * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.
+ * @summary A dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.
  *
  * @cssprop --modal-container-color - Background color of the dialog container.
  * @cssprop --modal-scrim-color - Color of the scrim backdrop.

package/dist/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../src/modal/modal.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './modal.scss';\n\ntype ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';\n\n/**\n * @label Modal\n * @tag wc-modal\n * @rawTag modal\n * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.\n *\n * @cssprop --modal-container-color - Background color of the dialog container.\n * @cssprop --modal-scrim-color - Color of the scrim backdrop.\n * @cssprop --modal-shape - Corner radius of the dialog container.\n * @cssprop --modal-min-width - Minimum width of the dialog.\n * @cssprop --modal-max-width - Maximum width of the dialog.\n * @cssprop --modal-max-height - Maximum height of the dialog.\n *\n * @example\n * ```html\n * MODAL\n * ```\n * @tags overlay, dialog, feedback\n */\n@IndividualComponent\nexport class Modal extends LitElement {\n  static styles = [styles];\n\n  /** Whether the modal is open. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Heading text shown in the modal header. */\n  @property({ type: String, reflect: true }) heading = '';\n\n  /** Optional subheading / label text shown above the heading. */\n  @property({ type: String, reflect: true }) subheading = '';\n\n  /**\n   * Size of the modal dialog.\n   * - `\"xs\"`: Extra-small.\n   * - `\"sm\"`: Small.\n   * - `\"md\"`: Medium (default).\n   * - `\"lg\"`: Large.\n   * - `\"fullscreen\"`: Full-screen dialog.\n   */\n  @property({ type: String, reflect: true }) size: ModalSize = 'md';\n\n  /** When true, hides the close button in the header. */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close' })\n  hideClose = false;\n\n  /** When true, renders a loading overlay inside the modal. */\n  @property({ type: Boolean, reflect: true, attribute: 'show-loader' })\n  showLoader = false;\n\n  /** When true, clicking the scrim will not close the modal. */\n  @property({ type: Boolean, attribute: 'no-scrim-close' }) noScrimClose = false;\n\n  @state() private _visible = false;\n\n  show() {\n    this.open = true;\n  }\n\n  hide() {\n    this._close('programmatic');\n  }\n\n  private _close(reason: string) {\n    if (!this.open) return;\n    this.open = false;\n    this.dispatchEvent(\n      new CustomEvent('modal-close', {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleScrimClick() {\n    if (!this.noScrimClose) {\n      this._close('scrim');\n    }\n  }\n\n  private _handleCloseClick() {\n    this._close('close-button');\n  }\n\n  private readonly _handleKeydown = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this._close('escape');\n    }\n  };\n\n  protected updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._visible = true;\n        document.body.style.overflow = 'hidden';\n        document.addEventListener('keydown', this._handleKeydown);\n      } else {\n        document.body.style.overflow = '';\n        document.removeEventListener('keydown', this._handleKeydown);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.body.style.overflow = '';\n    document.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  private _handleAnimationEnd(e: AnimationEvent) {\n    if (e.animationName === 'modal-exit') {\n      this._visible = false;\n    }\n  }\n\n  render() {\n    if (!this.open && !this._visible) return nothing;\n\n    const hasHeader = this.heading || this.subheading || !this.hideClose;\n\n    return html`\n      <div\n        class=${classMap({ scrim: true, visible: this.open })}\n        @click=${this._handleScrimClick}\n        aria-hidden=\"true\"\n      ></div>\n\n      <div class=\"dialog-wrapper\" role=\"presentation\">\n        <div\n          class=${classMap({\n            dialog: true,\n            open: this.open,\n            [`size-${this.size}`]: true,\n            'show-loader': this.showLoader,\n          })}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=${this.heading ? 'modal-heading' : nothing}\n          @animationend=${this._handleAnimationEnd}\n        >\n          ${hasHeader\n            ? html`\n                <div class=\"dialog-header\">\n                  <div class=\"dialog-heading-section\">\n                    ${this.subheading\n                      ? html`<p class=\"dialog-subheading\">${this.subheading}</p>`\n                      : nothing}\n                    ${this.heading\n                      ? html`<h2 id=\"modal-heading\" class=\"dialog-heading\">\n                          ${this.heading}\n                        </h2>`\n                      : nothing}\n                  </div>\n                  ${!this.hideClose\n                    ? html`<wc-icon-button\n                        class=\"dialog-close\"\n                        variant=\"text\"\n                        aria-label=\"Close dialog\"\n                        @click=${this._handleCloseClick}\n                      >\n                        <wc-icon name=\"close\"></wc-icon>\n                      </wc-icon-button>`\n                    : nothing}\n                </div>\n              `\n            : nothing}\n\n          <div class=\"dialog-content\">\n            <slot></slot>\n          </div>\n\n          <div class=\"dialog-footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n\n          ${this.showLoader\n            ? html`<div class=\"dialog-loader\" aria-hidden=\"true\">\n                <div class=\"dialog-loader-scrim\"></div>\n                <wc-spinner></wc-spinner>\n              </div>`\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../src/modal/modal.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './modal.scss';\n\ntype ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';\n\n/**\n * @label Modal\n * @tag wc-modal\n * @rawTag modal\n * @summary A dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.\n *\n * @cssprop --modal-container-color - Background color of the dialog container.\n * @cssprop --modal-scrim-color - Color of the scrim backdrop.\n * @cssprop --modal-shape - Corner radius of the dialog container.\n * @cssprop --modal-min-width - Minimum width of the dialog.\n * @cssprop --modal-max-width - Maximum width of the dialog.\n * @cssprop --modal-max-height - Maximum height of the dialog.\n *\n * @example\n * ```html\n * MODAL\n * ```\n * @tags overlay, dialog, feedback\n */\n@IndividualComponent\nexport class Modal extends LitElement {\n  static styles = [styles];\n\n  /** Whether the modal is open. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Heading text shown in the modal header. */\n  @property({ type: String, reflect: true }) heading = '';\n\n  /** Optional subheading / label text shown above the heading. */\n  @property({ type: String, reflect: true }) subheading = '';\n\n  /**\n   * Size of the modal dialog.\n   * - `\"xs\"`: Extra-small.\n   * - `\"sm\"`: Small.\n   * - `\"md\"`: Medium (default).\n   * - `\"lg\"`: Large.\n   * - `\"fullscreen\"`: Full-screen dialog.\n   */\n  @property({ type: String, reflect: true }) size: ModalSize = 'md';\n\n  /** When true, hides the close button in the header. */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close' })\n  hideClose = false;\n\n  /** When true, renders a loading overlay inside the modal. */\n  @property({ type: Boolean, reflect: true, attribute: 'show-loader' })\n  showLoader = false;\n\n  /** When true, clicking the scrim will not close the modal. */\n  @property({ type: Boolean, attribute: 'no-scrim-close' }) noScrimClose = false;\n\n  @state() private _visible = false;\n\n  show() {\n    this.open = true;\n  }\n\n  hide() {\n    this._close('programmatic');\n  }\n\n  private _close(reason: string) {\n    if (!this.open) return;\n    this.open = false;\n    this.dispatchEvent(\n      new CustomEvent('modal-close', {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleScrimClick() {\n    if (!this.noScrimClose) {\n      this._close('scrim');\n    }\n  }\n\n  private _handleCloseClick() {\n    this._close('close-button');\n  }\n\n  private readonly _handleKeydown = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this._close('escape');\n    }\n  };\n\n  protected updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._visible = true;\n        document.body.style.overflow = 'hidden';\n        document.addEventListener('keydown', this._handleKeydown);\n      } else {\n        document.body.style.overflow = '';\n        document.removeEventListener('keydown', this._handleKeydown);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.body.style.overflow = '';\n    document.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  private _handleAnimationEnd(e: AnimationEvent) {\n    if (e.animationName === 'modal-exit') {\n      this._visible = false;\n    }\n  }\n\n  render() {\n    if (!this.open && !this._visible) return nothing;\n\n    const hasHeader = this.heading || this.subheading || !this.hideClose;\n\n    return html`\n      <div\n        class=${classMap({ scrim: true, visible: this.open })}\n        @click=${this._handleScrimClick}\n        aria-hidden=\"true\"\n      ></div>\n\n      <div class=\"dialog-wrapper\" role=\"presentation\">\n        <div\n          class=${classMap({\n            dialog: true,\n            open: this.open,\n            [`size-${this.size}`]: true,\n            'show-loader': this.showLoader,\n          })}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=${this.heading ? 'modal-heading' : nothing}\n          @animationend=${this._handleAnimationEnd}\n        >\n          ${hasHeader\n            ? html`\n                <div class=\"dialog-header\">\n                  <div class=\"dialog-heading-section\">\n                    ${this.subheading\n                      ? html`<p class=\"dialog-subheading\">${this.subheading}</p>`\n                      : nothing}\n                    ${this.heading\n                      ? html`<h2 id=\"modal-heading\" class=\"dialog-heading\">\n                          ${this.heading}\n                        </h2>`\n                      : nothing}\n                  </div>\n                  ${!this.hideClose\n                    ? html`<wc-icon-button\n                        class=\"dialog-close\"\n                        variant=\"text\"\n                        aria-label=\"Close dialog\"\n                        @click=${this._handleCloseClick}\n                      >\n                        <wc-icon name=\"close\"></wc-icon>\n                      </wc-icon-button>`\n                    : nothing}\n                </div>\n              `\n            : nothing}\n\n          <div class=\"dialog-content\">\n            <slot></slot>\n          </div>\n\n          <div class=\"dialog-footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n\n          ${this.showLoader\n            ? html`<div class=\"dialog-loader\" aria-hidden=\"true\">\n                <div class=\"dialog-loader-scrim\"></div>\n                <wc-spinner></wc-spinner>\n              </div>`\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":"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"}