@vielzeug/refine 2.1.3 → 2.2.4

package/dist/menu.js

@@ -2,28 +2,29 @@ import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
 import { colorThemeMixin as t, forcedColorsMixin as n } from "./styles/mixins/theme.css.js";
 import { createInteraction as r } from "./core/keyboard.js";
 import { lifecycleSignal as i } from "./core/ore.js";
-import { createOutsidePointerDismissal as a, restoreTriggerFocus as o } from "./core/overlay.js";
-import { createListControl as s } from "./core/nav.js";
-import { createDropdownPositioner as c } from "./core/positioner.js";
-import { disablableBundle as l, sizableBundle as u } from "./shared/prop-bundles.js";
-import { MENU_SIZE_PRESET as d } from "./shared/size-presets.js";
-import f from "./overlay/menu/menu.css.js";
-import p from "./overlay/menu/menu-item.css.js";
-import m from "./overlay/menu/menu-separator.css.js";
-import { bind as h, createStableId as g, define as _, getHost as v, html as y, onCleanup as b, onMounted as x, prop as S, useEmit as C, useSlots as w, watchEffect as T } from "@vielzeug/ore";
-import { computed as E, signal as D, watch as O } from "@vielzeug/ripple";
+import { createOutsidePointerDismissal as a } from "./core/overlay.js";
+import { createListControl as o } from "./core/nav.js";
+import { createDropdownPositioner as s } from "./core/positioner.js";
+import { disablableBundle as c, sizableBundle as l } from "./shared/prop-bundles.js";
+import { MENU_SIZE_PRESET as u } from "./shared/size-presets.js";
+import d from "./overlay/menu/menu.css.js";
+import f from "./overlay/menu/menu-item.css.js";
+import p from "./overlay/menu/menu-separator.css.js";
+import { bind as m, createStableId as h, define as g, getHost as _, html as v, onCleanup as y, onMounted as b, prop as x, useEmit as S, useSlots as C, watchEffect as w } from "@vielzeug/ore";
+import { computed as T, signal as E, watch as D } from "@vielzeug/ripple";
+import { restoreFocus as O } from "@vielzeug/focus";
 //#region src/overlay/menu/menu.ts
 var k = "ore-menu-item";
-_(k, {
+g(k, {
 	props: {
-		checked: S.bool(!1),
-		disabled: S.bool(!1),
-		type: S.string(),
-		value: S.string()
+		checked: x.bool(!1),
+		disabled: x.bool(!1),
+		type: x.string(),
+		value: x.string()
 	},
 	setup(e) {
 		let t = () => e.type.value === "checkbox" || e.type.value === "radio", n = () => t() && e.checked.value;
-		return t() ? y`
+		return t() ? v`
           <div
             class="${() => {
 			let t = e.type.value;
@@ -42,33 +43,33 @@ _(k, {
             <span class="icon-slot"><slot name="icon"></slot></span>
             <span class="item-label"><slot></slot></span>
           </div>
-        ` : y`
+        ` : v`
           <div class="item" tabindex="-1" role="menuitem" aria-disabled="${e.disabled}">
             <span class="icon-slot"><slot name="icon"></slot></span>
             <span class="item-label"><slot></slot></span>
           </div>
         `;
 	},
-	styles: [t, p]
+	styles: [t, f]
 });
 var A = "ore-menu-separator";
-_(A, {
+g(A, {
 	setup() {
-		return y``;
+		return v``;
 	},
-	styles: [m]
+	styles: [p]
 });
 var j = (e) => e === "checkbox" || e === "radio", M = (e) => e == null ? void 0 : e === "" || e === "true", N = "ore-menu";
-_(N, {
+g(N, {
 	props: {
-		...u,
 		...l,
-		"default-open": S.bool(!1),
+		...c,
+		"default-open": x.bool(!1),
 		open: {
 			default: void 0,
 			parse: M
 		},
-		placement: S.oneOf([
+		placement: x.oneOf([
 			"bottom",
 			"bottom-start",
 			"bottom-end",
@@ -78,7 +79,7 @@ _(N, {
 		], "bottom-start")
 	},
 	setup(e) {
-		let t = v(), n = C(), l = w(), u = T, d = g("menu"), f = E(() => !!e.disabled.value), p = i(b), m = null, _ = null, S = null;
+		let t = _(), n = S(), c = C(), l = w, u = h("menu"), d = T(() => !!e.disabled.value), f = i(y), p = null, g = null, x = null;
 		function k() {
 			return Array.from(t.querySelectorAll("ore-menu-item:not([disabled])"));
 		}
@@ -91,29 +92,28 @@ _(N, {
 				return e === document.activeElement || t === document.activeElement;
 			});
 		}
-		let N = D(!1), P = null, F = c({
-			getFloating: () => _,
+		let N = E(!1), P = null, F = s({
+			getFloating: () => g,
 			getPlacement: () => e.placement.value ?? "bottom-start",
-			getReference: () => m,
+			getReference: () => p,
 			matchWidth: !1,
 			offsetPx: 4,
 			padding: 6
-		}), I = s({
-			disabled: E(() => !N.value),
+		}), I = o({
+			disabled: T(() => !N.value),
 			getItems: k,
 			isItemDisabled: (e) => e.hasAttribute("disabled"),
-			onNavigate: (e, t) => {
-				let n = k()[t];
-				A(n)?.focus();
+			onNavigate: ({ item: e }) => {
+				A(e)?.focus();
 			},
-			signal: p
+			signal: f
 		}), L = (e = "programmatic", t = !0) => {
-			N.value && (N.value = !1, I.reset(), P?.(), P = null, t && o(() => m), n("open-change", {
+			N.value && (N.value = !1, I.reset(), P?.(), P = null, t && O(() => p), n("open-change", {
 				open: !1,
 				reason: e
 			}));
 		}, R = (e = "programmatic") => {
-			f.value || N.value || (N.value = !0, F.update(), P = F.startAutoUpdate?.() ?? null, n("open-change", {
+			d.value || N.value || (N.value = !0, F.update(), P = F.startAutoUpdate?.() ?? null, n("open-change", {
 				open: !0,
 				reason: e
 			}));
@@ -121,15 +121,15 @@ _(N, {
 			N.value ? L("trigger") : R("click");
 		};
 		a({
-			getTargets: () => [t, _],
+			getTargets: () => [t, g],
 			isActive: () => N.value,
 			onDismiss: () => L("outsideClick"),
-			signal: p
+			signal: f
 		});
 		let B = !1;
-		O(e.open, (t) => {
+		D(e.open, (t) => {
 			t === void 0 ? B ? L("programmatic") : e["default-open"].value && R("programmatic") : t ? R("programmatic") : L("programmatic"), B = !0;
-		}, { immediate: !0 }), p.addEventListener("abort", () => {
+		}, { immediate: !0 }), f.addEventListener("abort", () => {
 			N.value && (N.value = !1, I.reset(), P?.(), P = null);
 		}, { once: !0 });
 		let V = (e) => {
@@ -155,7 +155,7 @@ _(N, {
 			e && V(e);
 		} });
 		function W(e) {
-			if (f.value) return;
+			if (d.value) return;
 			if (!N.value) {
 				H.handleKeydown(e);
 				return;
@@ -173,53 +173,53 @@ _(N, {
 				e.key === "Tab" && L("programmatic");
 			}
 		}
-		h({ on: { click: (e) => {
+		m({ on: { click: (e) => {
 			let t = e.composedPath();
 			if (!N.value) return;
 			let n = t.find((e) => e instanceof HTMLElement && e.tagName === "ORE-MENU-ITEM") ?? e.target?.closest("ore-menu-item") ?? null;
 			!n || n.hasAttribute("disabled") || V(n);
-		} } }), u(() => {
+		} } }), l(() => {
 			let e = N.value;
-			_ && _.toggleAttribute("data-open", e);
+			g && g.toggleAttribute("data-open", e);
 		});
 		function G() {
-			if (S?.(), S = null, m = l.elements("trigger").value?.[0] ?? null, !m) return;
-			let e = [], t = h({ aria: {
-				controls: () => d,
-				disabled: () => f.value,
+			if (x?.(), x = null, p = c.elements("trigger").value?.[0] ?? null, !p) return;
+			let e = [], t = m({ aria: {
+				controls: () => u,
+				disabled: () => d.value,
 				expanded: () => String(N.value),
 				haspopup: "menu"
-			} }, { target: m }), n = (e) => {
-				e.stopPropagation(), !f.value && z();
+			} }, { target: p }), n = (e) => {
+				e.stopPropagation(), !d.value && z();
 			}, r = (e) => {
 				W(e);
 			};
-			m.addEventListener("click", n), m.addEventListener("keydown", r), e.push(() => m?.removeEventListener("click", n)), e.push(() => m?.removeEventListener("keydown", r)), S = () => {
+			p.addEventListener("click", n), p.addEventListener("keydown", r), e.push(() => p?.removeEventListener("click", n)), e.push(() => p?.removeEventListener("keydown", r)), x = () => {
 				t();
 				for (let t of e) t();
 			};
 		}
-		return O(l.elements("trigger"), G, { immediate: !0 }), x(() => (G(), () => {
-			S?.(), S = null;
-		})), y`
+		return D(c.elements("trigger"), G, { immediate: !0 }), b(() => (G(), () => {
+			x?.(), x = null;
+		})), v`
       <slot name="trigger"></slot>
       <div
         class="menu-panel"
         part="panel"
-        id="${d}"
+        id="${u}"
         role="menu"
         aria-orientation="vertical"
         @keydown="${W}"
         ref="${(e) => {
-			_ = e, _?.toggleAttribute("data-open", N.value);
+			g = e, g?.toggleAttribute("data-open", N.value);
 		}}">
         <slot></slot>
       </div>
     `;
 	},
 	styles: [
-		f,
-		e(d),
+		d,
+		e(u),
 		n
 	]
 });

package/dist/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport {\n  bind,\n  createStableId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onMounted,\n  prop,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, watch as rippleWatch, signal } from '@vielzeug/ripple';\nimport {\n  createDropdownPositioner,\n  createInteraction,\n  createListControl,\n  createOutsidePointerDismissal,\n  type DropdownCloseReason,\n  lifecycleSignal,\n  type OverlayOpenChangeDetail,\n  type OverlayOpenReason,\n  restoreTriggerFocus,\n} from '../../core';\nimport { disablableBundle, MENU_SIZE_PRESET, sizableBundle } from '../../shared';\nimport { colorThemeMixin, forcedColorsMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize } from '../../types';\nimport componentStyles from './menu.css?inline';\nimport menuItemStyles from './menu-item.css?inline';\nimport menuSeparatorStyles from './menu-separator.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\nexport interface MenuSelectDetail {\n  checked?: boolean;\n  value: string;\n}\n\nexport type OreMenuItemType = 'checkbox' | 'radio';\n\nexport type OreMenuEvents = {\n  'open-change': OverlayOpenChangeDetail;\n  select: MenuSelectDetail;\n};\n\nexport type OreMenuItemProps = {\n  checked?: boolean;\n  disabled?: boolean;\n  type?: OreMenuItemType;\n  value?: string;\n};\n\nexport type OreMenuProps = {\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\n  disabled?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n  size?: ComponentSize;\n};\n\n// ── Styles ─────────────────────────────────────────────────────────────\n\n// ── Menu Item Component ─────────────────────────────────────────────────────────────\n\n/**\n * A selectable action item used inside `<ore-menu>`.\n *\n * @element ore-menu-item\n *\n * @attr {boolean} checked - Checked state for `checkbox` and `radio` item types\n * @attr {boolean} disabled - Disables selection and pointer interaction\n * @attr {'checkbox'|'radio'} type - Optional checkable menu item mode\n * @attr {string} value - Value emitted by parent menu on selection\n *\n * @slot - Item label/content\n * @slot icon - Optional leading icon content\n *\n * @cssprop --menu-item-hover-bg - Background on hover\n * @cssprop --menu-item-focus-color - Text color when keyboard-focused\n * @cssprop --menu-item-focus-bg - Background when keyboard-focused\n * @cssprop --menu-item-selection-bg - Background for checkbox/radio items (unselected)\n * @cssprop --menu-item-checked-color - Text color when checked\n * @cssprop --menu-item-checked-bg - Background when checked\n *\n * @part item - Root item container element.\n * @part item-label - Label text container.\n * @part icon-slot - Leading icon slot container.\n *\n * @example\n * ```html\n * <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n * <ore-menu-item value=\"delete\" disabled>Delete</ore-menu-item>\n * <ore-menu-item type=\"checkbox\" value=\"wrap\" checked>Word wrap</ore-menu-item>\n * <ore-menu-item type=\"radio\" value=\"left\">Align left</ore-menu-item>\n * ```\n */\nexport const MENU_ITEM_TAG = 'ore-menu-item' as const;\ndefine<OreMenuItemProps>(MENU_ITEM_TAG, {\n  props: {\n    checked: prop.bool(false),\n    disabled: prop.bool(false),\n    type: prop.string<OreMenuItemType>(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const isCheckable = () => props.type.value === 'checkbox' || props.type.value === 'radio';\n    const isChecked = () => isCheckable() && props.checked.value;\n    const itemRole = () => {\n      if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n      if (props.type.value === 'radio') return 'menuitemradio';\n\n      return 'menuitem';\n    };\n    const itemClass = () => {\n      const type = props.type.value;\n\n      return [\n        'item',\n        type === 'checkbox' ? 'is-checkbox' : '',\n        type === 'radio' ? 'is-radio' : '',\n        isChecked() ? 'is-checked' : '',\n      ]\n        .filter(Boolean)\n        .join(' ');\n    };\n\n    return isCheckable()\n      ? html`\n          <div\n            class=\"${itemClass}\"\n            tabindex=\"-1\"\n            role=\"${itemRole}\"\n            aria-checked=\"${() => String(isChecked())}\"\n            aria-disabled=\"${props.disabled}\">\n            <span class=\"item-check\" aria-hidden=\"true\"></span>\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `\n      : html`\n          <div class=\"item\" tabindex=\"-1\" role=\"menuitem\" aria-disabled=\"${props.disabled}\">\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `;\n  },\n  styles: [colorThemeMixin, menuItemStyles],\n});\n\n// ── Menu Separator ─────────────────────────────────────────────────────────────\n\n/**\n * Visual separator used to group menu items inside `<ore-menu>`.\n *\n * @element ore-menu-separator\n *\n * @example\n * ```html\n * <ore-menu-item value=\"cut\">Cut</ore-menu-item>\n * <ore-menu-separator></ore-menu-separator>\n * <ore-menu-item value=\"paste\">Paste</ore-menu-item>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-menu-separator' as const;\ndefine(SEPARATOR_TAG, {\n  setup() {\n    return html``;\n  },\n  styles: [menuSeparatorStyles],\n});\n\n// ── Menu Component ─────────────────────────────────────────────────────────────\n\nconst isCheckableItemType = (value: string | null): value is OreMenuItemType =>\n  value === 'checkbox' || value === 'radio';\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\n/**\n * Action dropdown menu triggered by a slotted trigger element.\n *\n * @element ore-menu\n * @element ore-menu-item - Clickable menu option (place in default slot)\n * @element ore-menu-separator - Visual divider between menu groups\n *\n * @attr {boolean} disabled - Disables opening and keyboard interaction\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} placement - Panel placement: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' (default: 'bottom-start')\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n *\n * @fires open-change - Fired when the menu state changes. detail: { open, reason }\n * @fires select - Fired when an item is selected. detail: { value: string, checked?: boolean }\n *\n * @slot trigger - Trigger element that toggles menu visibility\n * @slot - Menu content (`<ore-menu-item>` and `<ore-menu-separator>`)\n *\n * @part panel - Floating menu panel container\n *\n * @cssprop --menu-panel-bg - Background of the floating panel\n * @cssprop --menu-panel-border-color - Border color of the floating panel\n * @cssprop --menu-panel-shadow - Box shadow of the floating panel\n * @cssprop --menu-panel-blur - Backdrop blur amount for the floating panel\n * @cssprop --menu-panel-min-width - Minimum width of the floating panel\n * @cssprop --menu-panel-max-height - Maximum height of the floating panel before it scrolls\n * @cssprop --menu-panel-radius - Border radius of the floating panel\n *\n * @example\n * ```html\n * <ore-menu>\n *   <button slot=\"trigger\">Actions</button>\n *   <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n *   <ore-menu-item value=\"delete\">Delete</ore-menu-item>\n * </ore-menu>\n * ```\n */\nexport const MENU_TAG = 'ore-menu' as const;\ndefine<OreMenuProps>(MENU_TAG, {\n  props: {\n    ...sizableBundle,\n    ...disablableBundle,\n    'default-open': prop.bool(false),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    placement: prop.oneOf(\n      ['bottom', 'bottom-start', 'bottom-end', 'top', 'top-start', 'top-end'] as const,\n      'bottom-start',\n    ),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreMenuEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const menuId = createStableId('menu');\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const abortSignal = lifecycleSignal(onCleanup);\n    let triggerEl: HTMLElement | null = null;\n    let panelEl: HTMLElement | null = null;\n    let cleanupTrigger: (() => void) | null = null;\n\n    // ── Helpers ───────────────────────────────────────────────────────────────\n    function getItems(): HTMLElement[] {\n      return Array.from(el.querySelectorAll<HTMLElement>('ore-menu-item:not([disabled])'));\n    }\n\n    function getItemFocusable(item: HTMLElement | null | undefined): HTMLElement | null {\n      if (!item) return null;\n\n      return item.shadowRoot?.querySelector<HTMLElement>('[role^=\"menuitem\"]') ?? item;\n    }\n\n    function getFocusedItemIndex(): number {\n      const items = getItems();\n\n      return items.findIndex((item) => {\n        const focusable = getItemFocusable(item);\n\n        return item === document.activeElement || focusable === document.activeElement;\n      });\n    }\n\n    const isOpenSignal = signal(false);\n    let stopPositioning: (() => void) | null = null;\n    const positioner = createDropdownPositioner({\n      getFloating: () => panelEl,\n      getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n      getReference: () => triggerEl,\n      matchWidth: false,\n      offsetPx: 4,\n      padding: 6,\n    });\n    const list = createListControl<HTMLElement>({\n      disabled: computed(() => !isOpenSignal.value),\n      getItems: getItems,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      onNavigate: (_action, index) => {\n        const nextItem = getItems()[index];\n\n        getItemFocusable(nextItem)?.focus();\n      },\n      signal: abortSignal,\n    });\n\n    const close = (reason: DropdownCloseReason = 'programmatic', shouldRestoreFocus = true): void => {\n      if (!isOpenSignal.value) return;\n\n      isOpenSignal.value = false;\n      list.reset();\n      stopPositioning?.();\n      stopPositioning = null;\n\n      if (shouldRestoreFocus) restoreTriggerFocus(() => triggerEl);\n\n      emit('open-change', { open: false, reason });\n    };\n\n    const open = (reason: OverlayOpenReason = 'programmatic'): void => {\n      if (isDisabled.value || isOpenSignal.value) return;\n\n      isOpenSignal.value = true;\n      positioner.update();\n      stopPositioning = positioner.startAutoUpdate?.() ?? null;\n      emit('open-change', { open: true, reason });\n    };\n\n    const toggle = (): void => {\n      if (isOpenSignal.value) close('trigger');\n      else open('click');\n    };\n\n    createOutsidePointerDismissal({\n      getTargets: () => [el, panelEl],\n      isActive: () => isOpenSignal.value,\n      onDismiss: () => close('outsideClick'),\n      signal: abortSignal,\n    });\n\n    let initialized = false;\n\n    rippleWatch(\n      props.open,\n      (value) => {\n        if (value === undefined) {\n          if (!initialized) {\n            if (props['default-open'].value) open('programmatic');\n          } else {\n            close('programmatic');\n          }\n        } else if (value) {\n          open('programmatic');\n        } else {\n          close('programmatic');\n        }\n\n        initialized = true;\n      },\n      { immediate: true },\n    );\n    abortSignal.addEventListener(\n      'abort',\n      () => {\n        if (!isOpenSignal.value) return;\n\n        isOpenSignal.value = false;\n        list.reset();\n        stopPositioning?.();\n        stopPositioning = null;\n      },\n      { once: true },\n    );\n\n    const activateItem = (item: HTMLElement): void => {\n      const type = item.getAttribute('type');\n      const isCheckable = isCheckableItemType(type);\n\n      if (type === 'checkbox') {\n        item.toggleAttribute('checked', !item.hasAttribute('checked'));\n      } else if (type === 'radio') {\n        for (const radio of el.querySelectorAll<HTMLElement>('ore-menu-item[type=\"radio\"]')) {\n          radio.toggleAttribute('checked', radio === item);\n        }\n      }\n\n      const value = item.getAttribute('value') ?? '';\n      const checked = isCheckable ? item.hasAttribute('checked') : undefined;\n\n      emit('select', { checked, value });\n\n      if (!isCheckable) {\n        close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createInteraction({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        open('keyboard');\n        requestAnimationFrame(() => list.set(0));\n      },\n    });\n\n    const activateFocusedFromKeyboardPress = createInteraction({\n      onPress: () => {\n        const focused = list.getActiveItem();\n\n        if (focused) activateItem(focused);\n      },\n    });\n\n    // ── Keyboard Navigation ───────────────────────────────────────────────────\n    function handleMenuKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      const open = isOpenSignal.value;\n\n      // When closed: open on Enter / Space / ArrowDown\n      if (!open) {\n        openFromKeyboardPress.handleKeydown(e);\n\n        return;\n      }\n\n      const currentFocusedIndex = getFocusedItemIndex();\n\n      if (currentFocusedIndex >= 0) list.set(currentFocusedIndex);\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        close('escape');\n\n        return;\n      }\n\n      if (list.handleKeydown(e)) return;\n\n      // When open: navigate and activate\n      if (e.key === ' ' || e.key === 'Enter') {\n        activateFocusedFromKeyboardPress.handleKeydown(e);\n\n        return;\n      }\n\n      if (e.key === 'Tab') {\n        close('programmatic');\n      }\n    }\n\n    // ── Lifecycle ─────────────────────────────────────────────────────────────\n    bind({\n      on: {\n        click: (e: MouseEvent) => {\n          const path = e.composedPath();\n\n          if (!isOpenSignal.value) return;\n\n          const itemFromPath = path.find(\n            (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'ORE-MENU-ITEM',\n          );\n          const item = itemFromPath ?? (e.target as HTMLElement | null)?.closest<HTMLElement>('ore-menu-item') ?? null;\n\n          if (!item || item.hasAttribute('disabled')) return;\n\n          activateItem(item);\n        },\n      },\n    });\n\n    watch(() => {\n      const open = isOpenSignal.value;\n\n      if (!panelEl) return;\n\n      panelEl.toggleAttribute('data-open', open);\n    });\n\n    function resolveTrigger() {\n      cleanupTrigger?.();\n      cleanupTrigger = null;\n\n      const assigned = slots.elements('trigger').value;\n\n      triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n\n      if (!triggerEl) return;\n\n      const cleanups: Array<() => void> = [];\n      const removeAria = bind(\n        {\n          aria: {\n            controls: () => menuId,\n            disabled: () => isDisabled.value,\n            expanded: () => String(isOpenSignal.value),\n            haspopup: 'menu',\n          },\n        },\n        { target: triggerEl },\n      );\n\n      const onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        if (isDisabled.value) return;\n\n        toggle();\n      };\n      const onTriggerKeydown = (event: KeyboardEvent) => {\n        handleMenuKeydown(event);\n      };\n\n      triggerEl.addEventListener('click', onTriggerClick);\n      triggerEl.addEventListener('keydown', onTriggerKeydown);\n      cleanups.push(() => triggerEl?.removeEventListener('click', onTriggerClick));\n      cleanups.push(() => triggerEl?.removeEventListener('keydown', onTriggerKeydown));\n\n      cleanupTrigger = () => {\n        removeAria();\n\n        for (const cleanup of cleanups) cleanup();\n      };\n    }\n\n    rippleWatch(slots.elements('trigger'), resolveTrigger, { immediate: true });\n\n    onMounted(() => {\n      resolveTrigger();\n\n      return () => {\n        cleanupTrigger?.();\n        cleanupTrigger = null;\n      };\n    });\n\n    return html`\n      <slot name=\"trigger\"></slot>\n      <div\n        class=\"menu-panel\"\n        part=\"panel\"\n        id=\"${menuId}\"\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        @keydown=\"${handleMenuKeydown}\"\n        ref=\"${(el: HTMLElement | null) => {\n          panelEl = el;\n          panelEl?.toggleAttribute('data-open', isOpenSignal.value);\n        }}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles, sizeVariantMixin(MENU_SIZE_PRESET), forcedColorsMixin],\n});\n"],"mappings":"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"}
+{"version":3,"file":"menu.js","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import { restoreFocus } from '@vielzeug/focus';\nimport type { Placement } from '@vielzeug/orbit';\nimport {\n  bind,\n  createStableId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onMounted,\n  prop,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, watch as rippleWatch, signal } from '@vielzeug/ripple';\nimport {\n  createDropdownPositioner,\n  createInteraction,\n  createListControl,\n  createOutsidePointerDismissal,\n  type DropdownCloseReason,\n  lifecycleSignal,\n  type OverlayOpenChangeDetail,\n  type OverlayOpenReason,\n} from '../../core';\nimport { disablableBundle, MENU_SIZE_PRESET, sizableBundle } from '../../shared';\nimport { colorThemeMixin, forcedColorsMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize } from '../../types';\nimport componentStyles from './menu.css?inline';\nimport menuItemStyles from './menu-item.css?inline';\nimport menuSeparatorStyles from './menu-separator.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\nexport interface MenuSelectDetail {\n  checked?: boolean;\n  value: string;\n}\n\nexport type OreMenuItemType = 'checkbox' | 'radio';\n\nexport type OreMenuEvents = {\n  'open-change': OverlayOpenChangeDetail;\n  select: MenuSelectDetail;\n};\n\nexport type OreMenuItemProps = {\n  checked?: boolean;\n  disabled?: boolean;\n  type?: OreMenuItemType;\n  value?: string;\n};\n\nexport type OreMenuProps = {\n  /** Initial uncontrolled open state. Ignored when `open` is set. */\n  'default-open'?: boolean;\n  disabled?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n  size?: ComponentSize;\n};\n\n// ── Styles ─────────────────────────────────────────────────────────────\n\n// ── Menu Item Component ─────────────────────────────────────────────────────────────\n\n/**\n * A selectable action item used inside `<ore-menu>`.\n *\n * @element ore-menu-item\n *\n * @attr {boolean} checked - Checked state for `checkbox` and `radio` item types\n * @attr {boolean} disabled - Disables selection and pointer interaction\n * @attr {'checkbox'|'radio'} type - Optional checkable menu item mode\n * @attr {string} value - Value emitted by parent menu on selection\n *\n * @slot - Item label/content\n * @slot icon - Optional leading icon content\n *\n * @cssprop --menu-item-hover-bg - Background on hover\n * @cssprop --menu-item-focus-color - Text color when keyboard-focused\n * @cssprop --menu-item-focus-bg - Background when keyboard-focused\n * @cssprop --menu-item-selection-bg - Background for checkbox/radio items (unselected)\n * @cssprop --menu-item-checked-color - Text color when checked\n * @cssprop --menu-item-checked-bg - Background when checked\n *\n * @part item - Root item container element.\n * @part item-label - Label text container.\n * @part icon-slot - Leading icon slot container.\n *\n * @example\n * ```html\n * <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n * <ore-menu-item value=\"delete\" disabled>Delete</ore-menu-item>\n * <ore-menu-item type=\"checkbox\" value=\"wrap\" checked>Word wrap</ore-menu-item>\n * <ore-menu-item type=\"radio\" value=\"left\">Align left</ore-menu-item>\n * ```\n */\nexport const MENU_ITEM_TAG = 'ore-menu-item' as const;\ndefine<OreMenuItemProps>(MENU_ITEM_TAG, {\n  props: {\n    checked: prop.bool(false),\n    disabled: prop.bool(false),\n    type: prop.string<OreMenuItemType>(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const isCheckable = () => props.type.value === 'checkbox' || props.type.value === 'radio';\n    const isChecked = () => isCheckable() && props.checked.value;\n    const itemRole = () => {\n      if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n      if (props.type.value === 'radio') return 'menuitemradio';\n\n      return 'menuitem';\n    };\n    const itemClass = () => {\n      const type = props.type.value;\n\n      return [\n        'item',\n        type === 'checkbox' ? 'is-checkbox' : '',\n        type === 'radio' ? 'is-radio' : '',\n        isChecked() ? 'is-checked' : '',\n      ]\n        .filter(Boolean)\n        .join(' ');\n    };\n\n    return isCheckable()\n      ? html`\n          <div\n            class=\"${itemClass}\"\n            tabindex=\"-1\"\n            role=\"${itemRole}\"\n            aria-checked=\"${() => String(isChecked())}\"\n            aria-disabled=\"${props.disabled}\">\n            <span class=\"item-check\" aria-hidden=\"true\"></span>\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `\n      : html`\n          <div class=\"item\" tabindex=\"-1\" role=\"menuitem\" aria-disabled=\"${props.disabled}\">\n            <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n            <span class=\"item-label\"><slot></slot></span>\n          </div>\n        `;\n  },\n  styles: [colorThemeMixin, menuItemStyles],\n});\n\n// ── Menu Separator ─────────────────────────────────────────────────────────────\n\n/**\n * Visual separator used to group menu items inside `<ore-menu>`.\n *\n * @element ore-menu-separator\n *\n * @example\n * ```html\n * <ore-menu-item value=\"cut\">Cut</ore-menu-item>\n * <ore-menu-separator></ore-menu-separator>\n * <ore-menu-item value=\"paste\">Paste</ore-menu-item>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-menu-separator' as const;\ndefine(SEPARATOR_TAG, {\n  setup() {\n    return html``;\n  },\n  styles: [menuSeparatorStyles],\n});\n\n// ── Menu Component ─────────────────────────────────────────────────────────────\n\nconst isCheckableItemType = (value: string | null): value is OreMenuItemType =>\n  value === 'checkbox' || value === 'radio';\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n  value == null ? undefined : value === '' || value === 'true';\n\n/**\n * Action dropdown menu triggered by a slotted trigger element.\n *\n * @element ore-menu\n * @element ore-menu-item - Clickable menu option (place in default slot)\n * @element ore-menu-separator - Visual divider between menu groups\n *\n * @attr {boolean} disabled - Disables opening and keyboard interaction\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} placement - Panel placement: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' (default: 'bottom-start')\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n *\n * @fires open-change - Fired when the menu state changes. detail: { open, reason }\n * @fires select - Fired when an item is selected. detail: { value: string, checked?: boolean }\n *\n * @slot trigger - Trigger element that toggles menu visibility\n * @slot - Menu content (`<ore-menu-item>` and `<ore-menu-separator>`)\n *\n * @part panel - Floating menu panel container\n *\n * @cssprop --menu-panel-bg - Background of the floating panel\n * @cssprop --menu-panel-border-color - Border color of the floating panel\n * @cssprop --menu-panel-shadow - Box shadow of the floating panel\n * @cssprop --menu-panel-blur - Backdrop blur amount for the floating panel\n * @cssprop --menu-panel-min-width - Minimum width of the floating panel\n * @cssprop --menu-panel-max-height - Maximum height of the floating panel before it scrolls\n * @cssprop --menu-panel-radius - Border radius of the floating panel\n *\n * @example\n * ```html\n * <ore-menu>\n *   <button slot=\"trigger\">Actions</button>\n *   <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n *   <ore-menu-item value=\"delete\">Delete</ore-menu-item>\n * </ore-menu>\n * ```\n */\nexport const MENU_TAG = 'ore-menu' as const;\ndefine<OreMenuProps>(MENU_TAG, {\n  props: {\n    ...sizableBundle,\n    ...disablableBundle,\n    'default-open': prop.bool(false),\n    open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n    placement: prop.oneOf(\n      ['bottom', 'bottom-start', 'bottom-end', 'top', 'top-start', 'top-end'] as const,\n      'bottom-start',\n    ),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreMenuEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const menuId = createStableId('menu');\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const abortSignal = lifecycleSignal(onCleanup);\n    let triggerEl: HTMLElement | null = null;\n    let panelEl: HTMLElement | null = null;\n    let cleanupTrigger: (() => void) | null = null;\n\n    // ── Helpers ───────────────────────────────────────────────────────────────\n    function getItems(): HTMLElement[] {\n      return Array.from(el.querySelectorAll<HTMLElement>('ore-menu-item:not([disabled])'));\n    }\n\n    function getItemFocusable(item: HTMLElement | null | undefined): HTMLElement | null {\n      if (!item) return null;\n\n      return item.shadowRoot?.querySelector<HTMLElement>('[role^=\"menuitem\"]') ?? item;\n    }\n\n    function getFocusedItemIndex(): number {\n      const items = getItems();\n\n      return items.findIndex((item) => {\n        const focusable = getItemFocusable(item);\n\n        return item === document.activeElement || focusable === document.activeElement;\n      });\n    }\n\n    const isOpenSignal = signal(false);\n    let stopPositioning: (() => void) | null = null;\n    const positioner = createDropdownPositioner({\n      getFloating: () => panelEl,\n      getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n      getReference: () => triggerEl,\n      matchWidth: false,\n      offsetPx: 4,\n      padding: 6,\n    });\n    const list = createListControl<HTMLElement>({\n      disabled: computed(() => !isOpenSignal.value),\n      getItems: getItems,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      onNavigate: ({ item }) => {\n        getItemFocusable(item)?.focus();\n      },\n      signal: abortSignal,\n    });\n\n    const close = (reason: DropdownCloseReason = 'programmatic', shouldRestoreFocus = true): void => {\n      if (!isOpenSignal.value) return;\n\n      isOpenSignal.value = false;\n      list.reset();\n      stopPositioning?.();\n      stopPositioning = null;\n\n      if (shouldRestoreFocus) restoreFocus(() => triggerEl);\n\n      emit('open-change', { open: false, reason });\n    };\n\n    const open = (reason: OverlayOpenReason = 'programmatic'): void => {\n      if (isDisabled.value || isOpenSignal.value) return;\n\n      isOpenSignal.value = true;\n      positioner.update();\n      stopPositioning = positioner.startAutoUpdate?.() ?? null;\n      emit('open-change', { open: true, reason });\n    };\n\n    const toggle = (): void => {\n      if (isOpenSignal.value) close('trigger');\n      else open('click');\n    };\n\n    createOutsidePointerDismissal({\n      getTargets: () => [el, panelEl],\n      isActive: () => isOpenSignal.value,\n      onDismiss: () => close('outsideClick'),\n      signal: abortSignal,\n    });\n\n    let initialized = false;\n\n    rippleWatch(\n      props.open,\n      (value) => {\n        if (value === undefined) {\n          if (!initialized) {\n            if (props['default-open'].value) open('programmatic');\n          } else {\n            close('programmatic');\n          }\n        } else if (value) {\n          open('programmatic');\n        } else {\n          close('programmatic');\n        }\n\n        initialized = true;\n      },\n      { immediate: true },\n    );\n    abortSignal.addEventListener(\n      'abort',\n      () => {\n        if (!isOpenSignal.value) return;\n\n        isOpenSignal.value = false;\n        list.reset();\n        stopPositioning?.();\n        stopPositioning = null;\n      },\n      { once: true },\n    );\n\n    const activateItem = (item: HTMLElement): void => {\n      const type = item.getAttribute('type');\n      const isCheckable = isCheckableItemType(type);\n\n      if (type === 'checkbox') {\n        item.toggleAttribute('checked', !item.hasAttribute('checked'));\n      } else if (type === 'radio') {\n        for (const radio of el.querySelectorAll<HTMLElement>('ore-menu-item[type=\"radio\"]')) {\n          radio.toggleAttribute('checked', radio === item);\n        }\n      }\n\n      const value = item.getAttribute('value') ?? '';\n      const checked = isCheckable ? item.hasAttribute('checked') : undefined;\n\n      emit('select', { checked, value });\n\n      if (!isCheckable) {\n        close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createInteraction({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        open('keyboard');\n        requestAnimationFrame(() => list.set(0));\n      },\n    });\n\n    const activateFocusedFromKeyboardPress = createInteraction({\n      onPress: () => {\n        const focused = list.getActiveItem();\n\n        if (focused) activateItem(focused);\n      },\n    });\n\n    // ── Keyboard Navigation ───────────────────────────────────────────────────\n    function handleMenuKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      const open = isOpenSignal.value;\n\n      // When closed: open on Enter / Space / ArrowDown\n      if (!open) {\n        openFromKeyboardPress.handleKeydown(e);\n\n        return;\n      }\n\n      const currentFocusedIndex = getFocusedItemIndex();\n\n      if (currentFocusedIndex >= 0) list.set(currentFocusedIndex);\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        close('escape');\n\n        return;\n      }\n\n      if (list.handleKeydown(e)) return;\n\n      // When open: navigate and activate\n      if (e.key === ' ' || e.key === 'Enter') {\n        activateFocusedFromKeyboardPress.handleKeydown(e);\n\n        return;\n      }\n\n      if (e.key === 'Tab') {\n        close('programmatic');\n      }\n    }\n\n    // ── Lifecycle ─────────────────────────────────────────────────────────────\n    bind({\n      on: {\n        click: (e: MouseEvent) => {\n          const path = e.composedPath();\n\n          if (!isOpenSignal.value) return;\n\n          const itemFromPath = path.find(\n            (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'ORE-MENU-ITEM',\n          );\n          const item = itemFromPath ?? (e.target as HTMLElement | null)?.closest<HTMLElement>('ore-menu-item') ?? null;\n\n          if (!item || item.hasAttribute('disabled')) return;\n\n          activateItem(item);\n        },\n      },\n    });\n\n    watch(() => {\n      const open = isOpenSignal.value;\n\n      if (!panelEl) return;\n\n      panelEl.toggleAttribute('data-open', open);\n    });\n\n    function resolveTrigger() {\n      cleanupTrigger?.();\n      cleanupTrigger = null;\n\n      const assigned = slots.elements('trigger').value;\n\n      triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n\n      if (!triggerEl) return;\n\n      const cleanups: Array<() => void> = [];\n      const removeAria = bind(\n        {\n          aria: {\n            controls: () => menuId,\n            disabled: () => isDisabled.value,\n            expanded: () => String(isOpenSignal.value),\n            haspopup: 'menu',\n          },\n        },\n        { target: triggerEl },\n      );\n\n      const onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        if (isDisabled.value) return;\n\n        toggle();\n      };\n      const onTriggerKeydown = (event: KeyboardEvent) => {\n        handleMenuKeydown(event);\n      };\n\n      triggerEl.addEventListener('click', onTriggerClick);\n      triggerEl.addEventListener('keydown', onTriggerKeydown);\n      cleanups.push(() => triggerEl?.removeEventListener('click', onTriggerClick));\n      cleanups.push(() => triggerEl?.removeEventListener('keydown', onTriggerKeydown));\n\n      cleanupTrigger = () => {\n        removeAria();\n\n        for (const cleanup of cleanups) cleanup();\n      };\n    }\n\n    rippleWatch(slots.elements('trigger'), resolveTrigger, { immediate: true });\n\n    onMounted(() => {\n      resolveTrigger();\n\n      return () => {\n        cleanupTrigger?.();\n        cleanupTrigger = null;\n      };\n    });\n\n    return html`\n      <slot name=\"trigger\"></slot>\n      <div\n        class=\"menu-panel\"\n        part=\"panel\"\n        id=\"${menuId}\"\n        role=\"menu\"\n        aria-orientation=\"vertical\"\n        @keydown=\"${handleMenuKeydown}\"\n        ref=\"${(el: HTMLElement | null) => {\n          panelEl = el;\n          panelEl?.toggleAttribute('data-open', isOpenSignal.value);\n        }}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles, sizeVariantMixin(MENU_SIZE_PRESET), forcedColorsMixin],\n});\n"],"mappings":"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"}

package/dist/navbar.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./styles/mixins/variants.css.cjs"),i=require("./utils/link.cjs"),a=require("./layout/navbar/navbar.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");var c=(e,t,n,r)=>e?(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)):()=>{},l=e=>!(e instanceof HTMLElement)||e.tagName.includes(`-`)||e.childElementCount>0?!0:(e.textContent??``).trim().length>0,u=e=>{let t=String(e??``).trim();if(!t)return;let n=/max-width\s*:\s*([0-9]+(?:\.[0-9]+)?)px/i.exec(t);if(!n)return;let r=Number.parseFloat(n[1]);return Number.isFinite(r)?r:void 0},d=e=>{let t=e.parentElement;for(;t?.tagName.toLowerCase()===`ore-grid-item`;)t=t.parentElement;return t},f=e=>{let t=d(e)?.clientWidth??0;return t>0?t:e.offsetWidth},p=e=>{let t=e.parentElement;for(;t;){let e=window.getComputedStyle(t).overflowY;if(e===`auto`||e===`scroll`||e===`overlay`)return t;t=t.parentElement}return null},m=(0,o.createContext)(`NavbarContext`),h=`ore-navbar`;(0,o.define)(h,{props:{breakpoint:o.prop.string(`(max-width: 768px)`),color:o.prop.string(),"container-breakpoints":o.prop.bool(!1),elevation:o.prop.number(),floating:o.prop.bool(!1),label:o.prop.string(`Main navigation`),"mobile-sidebar":o.prop.string(),rounded:o.prop.string(),"scroll-threshold":o.prop.number(80),sticky:o.prop.bool(!1),variant:o.prop.string()},setup(e){let t=(0,o.getHost)(),n=(0,o.useEmit)(),r=(0,o.useSlots)(),i=r.has(`logo`),a=r.elements(`mobile-menu`),h=(0,s.signal)(!1),g=(0,s.signal)(null),_=(0,s.signal)(!1),v=(0,s.signal)(!1),y=(0,s.signal)(!1),b=(0,s.signal)(!1),x=(0,s.signal)(!1),S=(0,s.signal)(!1),C=(0,s.signal)(0),w=(0,s.signal)(!1),T=(0,s.signal)(!1),E=(0,s.signal)(u(e.breakpoint.value)),D=(0,s.signal)(!1),O=()=>{let n=String(e[`mobile-sidebar`].value??``).trim();if(!n)return null;let r=t.getRootNode();return(r instanceof ShadowRoot||r instanceof Document?r.querySelector(n):null)??document.querySelector(n)};(0,o.provide)(m,{closeMobileMenu:()=>j(),isMobile:(0,s.computed)(()=>y.value),mobileMenuOpen:(0,s.computed)(()=>b.value)});let k=()=>{if(e.floating.value&&e.sticky.value)return S.value?`sticky`:`floating`;if(e.floating.value)return`floating`;if(e.sticky.value)return`sticky`},A=e=>{let t=!!e;if(!h.value){let e=g.value??O();if(e){t?e.openMobile?.():e.closeMobile?.();return}}t&&!h.value||b.value!==t&&(b.value=t,n(`mobile-menu-change`,{open:t}))},j=()=>A(!1),M=()=>A(!0),N=()=>{if(!h.value){let e=g.value??O();if(e){typeof e.toggleMobile==`function`?e.toggleMobile():typeof e.openMobile==`function`&&typeof e.closeMobile==`function`&&(e.hasAttribute(`data-mobile-open`)?e.closeMobile():e.openMobile());return}}A(!b.value)},P=()=>{let e=(g.value&&!h.value?_.value:!1)||w.value||T.value;y.value=e,e||j()},F=e=>e?e.scrollTop||0:window.scrollY||document.documentElement.scrollTop||0,I=e=>{C.value=F(e)},L=(t=null)=>{if(!(e.floating.value&&e.sticky.value)){S.value&&=!1;return}let n=Math.max(0,Number(e[`scroll-threshold`].value)||0),r=F(t)-C.value;S.value=r>n};return(0,o.bind)({attr:{"data-mobile":()=>y.value?!0:void 0,"data-mobile-open":()=>y.value&&b.value?!0:void 0,"data-mode":()=>k()??null,"data-mode-transitioning":()=>x.value?!0:void 0,"data-preview-mode":()=>D.value?!0:void 0,"data-scrolled":()=>e.floating.value&&e.sticky.value&&S.value?!0:void 0}}),(0,o.onMounted)(()=>{let n=t,r=p(t);n.closeMobileMenu=j,n.openMobileMenu=M,n.toggleMobileMenu=N;let i=c(window,`scroll`,()=>{L(r)},{passive:!0}),m=r?c(r,`scroll`,()=>{L(r)},{passive:!0}):void 0,y=c(t,`keydown`,e=>{e.key!==`Escape`||!b.value||j()}),C,A,F,R,z=()=>{if(A?.(),A=void 0,g.value=null,_.value=!1,v.value=!1,!String(e[`mobile-sidebar`].value??``).trim())return;let n=O();if(!n){let e=t.getRootNode(),n=e instanceof Document||e instanceof ShadowRoot?e:document,r=new MutationObserver(()=>{O()&&z()});r.observe(n,{childList:!0,subtree:!0}),A=()=>r.disconnect();return}let r=e=>{let t=n.hasAttribute(`data-bottom-nav`),r=n.hasAttribute(`data-mobile-open`);_.value=t,v.value=e?.detail?e.detail.open:r,v.value&&!_.value&&(_.value=!0),P()},i=new MutationObserver(()=>{r()});r(),i.observe(n,{attributeFilter:[`data-bottom-nav`,`data-mobile-open`],attributes:!0}),n.addEventListener(`mobile-open-change`,r),A=()=>{i.disconnect(),n.removeEventListener(`mobile-open-change`,r)},g.value=n},B=()=>{x.value=!0,F!=null&&clearTimeout(F),F=setTimeout(()=>{x.value=!1,F=void 0},220)},V=(0,s.watch)((0,s.computed)(()=>e.floating.value&&e.sticky.value),e=>{if(!e){S.value&&=!1,x.value&&=!1,R=void 0,F!=null&&(clearTimeout(F),F=void 0);return}I(r),L(r),R=k()},{immediate:!0}),H=(0,s.watch)(e[`mobile-sidebar`],()=>{z()},{immediate:!0}),U=(0,s.watch)((0,s.computed)(()=>k()),t=>{if(!(e.floating.value&&e.sticky.value)){R=t??void 0;return}let n=t??void 0;R&&n&&R!==n&&B(),R=n},{immediate:!0}),W=(0,s.watch)(h,e=>{!e&&b.value&&j()},{immediate:!0}),G=()=>{h.value=a.value.some(l)},K=(0,s.watch)(a,G,{immediate:!0}),q=new MutationObserver(()=>{G()});q.observe(t,{childList:!0,subtree:!0}),(0,s.watch)(e.breakpoint,n=>{C?.(),C=void 0;let r=String(n??``).trim();E.value=u(r),w.value=!1;let i=f(t);if(T.value=i>0&&E.value!=null&&i<=E.value,P(),e[`container-breakpoints`].value&&E.value!=null||!r||typeof window.matchMedia!=`function`)return;let a=window.matchMedia(r),o=e=>{w.value=e,P()},s=e=>{o(e.matches)};o(a.matches),a.addEventListener(`change`,s),C=()=>{a.removeEventListener(`change`,s)}},{immediate:!0});let J=typeof ResizeObserver==`function`?(()=>{let e=(0,o.resizeObserver)(t),n=t.parentElement,r=d(t),i=n?(0,o.resizeObserver)(n):void 0,a=r&&r!==n?(0,o.resizeObserver)(r):void 0;return(0,s.watch)((0,s.computed)(()=>[e.value.width,e.value.height,i?.value.width,i?.value.height,a?.value.width,a?.value.height]),()=>{let e=f(t),n=d(t)?.clientWidth??0;T.value=e>0&&E.value!=null&&e<=E.value,D.value=n>0&&n<window.innerWidth,P()})})():void 0;return()=>{y?.(),i?.(),m?.(),V?.dispose(),U?.dispose(),W?.dispose(),K?.dispose(),H?.dispose(),q.disconnect(),C?.(),A?.(),J?.dispose(),F!=null&&(clearTimeout(F),F=void 0)}}),o.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./styles/mixins/variants.css.cjs"),i=require("./utils/link.cjs"),a=require("./layout/navbar/navbar.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple"),c=require("@vielzeug/sentinel");var l=(e,t,n,r)=>e?(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)):()=>{},u=e=>!(e instanceof HTMLElement)||e.tagName.includes(`-`)||e.childElementCount>0?!0:(e.textContent??``).trim().length>0,d=e=>{let t=String(e??``).trim();if(!t)return;let n=/max-width\s*:\s*([0-9]+(?:\.[0-9]+)?)px/i.exec(t);if(!n)return;let r=Number.parseFloat(n[1]);return Number.isFinite(r)?r:void 0},f=e=>{let t=e.parentElement;for(;t?.tagName.toLowerCase()===`ore-grid-item`;)t=t.parentElement;return t},p=e=>{let t=f(e)?.clientWidth??0;return t>0?t:e.offsetWidth},m=e=>{let t=e.parentElement;for(;t;){let e=window.getComputedStyle(t).overflowY;if(e===`auto`||e===`scroll`||e===`overlay`)return t;t=t.parentElement}return null},h=(0,o.createContext)(`NavbarContext`),g=`ore-navbar`;(0,o.define)(g,{props:{breakpoint:o.prop.string(`(max-width: 768px)`),color:o.prop.string(),"container-breakpoints":o.prop.bool(!1),elevation:o.prop.number(),floating:o.prop.bool(!1),label:o.prop.string(`Main navigation`),"mobile-sidebar":o.prop.string(),rounded:o.prop.string(),"scroll-threshold":o.prop.number(80),sticky:o.prop.bool(!1),variant:o.prop.string()},setup(e){let t=(0,o.getHost)(),n=(0,o.useEmit)(),r=(0,o.useSlots)(),i=r.has(`logo`),a=r.elements(`mobile-menu`),g=(0,s.signal)(!1),_=(0,s.signal)(null),v=(0,s.signal)(!1),y=(0,s.signal)(!1),b=(0,s.signal)(!1),x=(0,s.signal)(!1),S=(0,s.signal)(!1),C=(0,s.signal)(!1),w=(0,s.signal)(0),T=(0,s.signal)(!1),E=(0,s.signal)(!1),D=(0,s.signal)(d(e.breakpoint.value)),O=(0,s.signal)(!1),k=()=>{let n=String(e[`mobile-sidebar`].value??``).trim();if(!n)return null;let r=t.getRootNode();return(r instanceof ShadowRoot||r instanceof Document?r.querySelector(n):null)??document.querySelector(n)};(0,o.provide)(h,{closeMobileMenu:()=>M(),isMobile:(0,s.computed)(()=>b.value),mobileMenuOpen:(0,s.computed)(()=>x.value)});let A=()=>{if(e.floating.value&&e.sticky.value)return C.value?`sticky`:`floating`;if(e.floating.value)return`floating`;if(e.sticky.value)return`sticky`},j=e=>{let t=!!e;if(!g.value){let e=_.value??k();if(e){t?e.openMobile?.():e.closeMobile?.();return}}t&&!g.value||x.value!==t&&(x.value=t,n(`mobile-menu-change`,{open:t}))},M=()=>j(!1),N=()=>j(!0),P=()=>{if(!g.value){let e=_.value??k();if(e){typeof e.toggleMobile==`function`?e.toggleMobile():typeof e.openMobile==`function`&&typeof e.closeMobile==`function`&&(e.hasAttribute(`data-mobile-open`)?e.closeMobile():e.openMobile());return}}j(!x.value)},F=()=>{let e=(_.value&&!g.value?v.value:!1)||T.value||E.value;b.value=e,e||M()},I=e=>e?e.scrollTop||0:window.scrollY||document.documentElement.scrollTop||0,L=e=>{w.value=I(e)},R=(t=null)=>{if(!(e.floating.value&&e.sticky.value)){C.value&&=!1;return}let n=Math.max(0,Number(e[`scroll-threshold`].value)||0),r=I(t)-w.value;C.value=r>n};return(0,o.bind)({attr:{"data-mobile":()=>b.value?!0:void 0,"data-mobile-open":()=>b.value&&x.value?!0:void 0,"data-mode":()=>A()??null,"data-mode-transitioning":()=>S.value?!0:void 0,"data-preview-mode":()=>O.value?!0:void 0,"data-scrolled":()=>e.floating.value&&e.sticky.value&&C.value?!0:void 0}}),(0,o.onMounted)(()=>{let n=t,r=m(t);n.closeMobileMenu=M,n.openMobileMenu=N,n.toggleMobileMenu=P;let i=l(window,`scroll`,()=>{R(r)},{passive:!0}),h=r?l(r,`scroll`,()=>{R(r)},{passive:!0}):void 0,b=l(t,`keydown`,e=>{e.key!==`Escape`||!x.value||M()}),w,j,I,z,B=()=>{if(j?.(),j=void 0,_.value=null,v.value=!1,y.value=!1,!String(e[`mobile-sidebar`].value??``).trim())return;let n=k();if(!n){let e=t.getRootNode(),n=e instanceof Document||e instanceof ShadowRoot?e:document,r=new MutationObserver(()=>{k()&&B()});r.observe(n,{childList:!0,subtree:!0}),j=()=>r.disconnect();return}let r=e=>{let t=n.hasAttribute(`data-bottom-nav`),r=n.hasAttribute(`data-mobile-open`);v.value=t,y.value=e?.detail?e.detail.open:r,y.value&&!v.value&&(v.value=!0),F()},i=new MutationObserver(()=>{r()});r(),i.observe(n,{attributeFilter:[`data-bottom-nav`,`data-mobile-open`],attributes:!0}),n.addEventListener(`mobile-open-change`,r),j=()=>{i.disconnect(),n.removeEventListener(`mobile-open-change`,r)},_.value=n},V=()=>{S.value=!0,I!=null&&clearTimeout(I),I=setTimeout(()=>{S.value=!1,I=void 0},220)},H=(0,s.watch)((0,s.computed)(()=>e.floating.value&&e.sticky.value),e=>{if(!e){C.value&&=!1,S.value&&=!1,z=void 0,I!=null&&(clearTimeout(I),I=void 0);return}L(r),R(r),z=A()},{immediate:!0}),U=(0,s.watch)(e[`mobile-sidebar`],()=>{B()},{immediate:!0}),W=(0,s.watch)((0,s.computed)(()=>A()),t=>{if(!(e.floating.value&&e.sticky.value)){z=t??void 0;return}let n=t??void 0;z&&n&&z!==n&&V(),z=n},{immediate:!0}),G=(0,s.watch)(g,e=>{!e&&x.value&&M()},{immediate:!0}),K=()=>{g.value=a.value.some(u)},q=(0,s.watch)(a,K,{immediate:!0}),J=new MutationObserver(()=>{K()});J.observe(t,{childList:!0,subtree:!0}),(0,s.watch)(e.breakpoint,n=>{(0,s.untrack)(()=>{w?.(),w=void 0;let r=String(n??``).trim();D.value=d(r),T.value=!1;let i=p(t);if(E.value=i>0&&D.value!=null&&i<=D.value,F(),!(e[`container-breakpoints`].value&&D.value!=null)&&r)try{let e=(0,c.createMediaQuery)(r),t=e=>{e&&(T.value=e.matches,F())};t(e.value);let n=(0,s.watch)(e,t);w=()=>{n.dispose(),e.dispose()}}catch(e){if(!(e instanceof c.SentinelUnavailableError))throw e}})},{immediate:!0});let Y=typeof ResizeObserver==`function`?(()=>{let e=(0,c.createElementSize)(t);(0,o.onCleanup)(()=>e.dispose());let n=t.parentElement,r=f(t),i=n?(0,c.createElementSize)(n):void 0,a=r&&r!==n?(0,c.createElementSize)(r):void 0;return i&&(0,o.onCleanup)(()=>i.dispose()),a&&(0,o.onCleanup)(()=>a.dispose()),(0,s.watch)((0,s.computed)(()=>[e.value?.width,e.value?.height,i?.value?.width,i?.value?.height,a?.value?.width,a?.value?.height]),()=>{let e=p(t),n=f(t)?.clientWidth??0;E.value=e>0&&D.value!=null&&e<=D.value,O.value=n>0&&n<window.innerWidth,F()})})():void 0;return()=>{b?.(),i?.(),h?.(),H?.dispose(),W?.dispose(),G?.dispose(),q?.dispose(),U?.dispose(),J.disconnect(),w?.(),j?.(),Y?.dispose(),I!=null&&(clearTimeout(I),I=void 0)}}),o.html`
       <nav part="nav" aria-label="${e.label}">
         <div class="navbar" part="bar">
           <div class="navbar-logo" part="logo" ?hidden=${()=>!i.value}>
@@ -21,13 +21,13 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             class="mobile-toggle"
             part="mobile-toggle"
             type="button"
-            aria-label="${()=>h.value?b.value?`Close navigation menu`:`Open navigation menu`:v.value?`Close navigation menu`:`Open navigation menu`}"
+            aria-label="${()=>g.value?x.value?`Close navigation menu`:`Open navigation menu`:y.value?`Close navigation menu`:`Open navigation menu`}"
             aria-controls="mobile-menu-panel"
-            aria-expanded="${()=>String(h.value?b.value:v.value)}"
-            ?hidden=${()=>!y.value||!h.value&&!g.value}
-            @click="${N}">
+            aria-expanded="${()=>String(g.value?x.value:y.value)}"
+            ?hidden=${()=>!b.value||!g.value&&!_.value}
+            @click="${P}">
             <ore-icon
-              name="${()=>(h.value?b.value:v.value)?`x`:`menu`}"
+              name="${()=>(g.value?x.value:y.value)?`x`:`menu`}"
               size="18"
               stroke-width="2.5"
               aria-hidden="true"></ore-icon>
@@ -40,11 +40,11 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           part="mobile-menu"
           role="navigation"
           aria-label="${()=>`${e.label.value} mobile menu`}"
-          ?hidden=${()=>!y.value||!b.value||!h.value}>
+          ?hidden=${()=>!b.value||!x.value||!g.value}>
           <slot name="mobile-menu"></slot>
         </div>
       </nav>
-    `},styles:[n.colorThemeMixin,n.elevationMixin,t.roundedVariantMixin,e.coarsePointerMixin,e.reducedMotionMixin,r.frostVariantMixin(`.navbar`),a.default]});var g=`ore-navbar-item`;(0,o.define)(g,{props:{active:o.prop.bool(!1),disabled:o.prop.bool(!1),href:o.prop.string(),"icon-only":o.prop.bool(!1),rel:o.prop.string(),target:o.prop.string()},setup(e){let t=(0,o.useSlots)(),n=()=>t.has(`icon`).value,r=()=>t.has(`end`).value,a=(0,o.inject)(m);(0,o.bind)({attr:{"navbar-mobile":()=>a?.isMobile.value?!0:void 0,"navbar-mobile-open":()=>a?.mobileMenuOpen.value?!0:void 0}});let c=()=>!!e.href.value&&!e.disabled.value,l=(0,s.computed)(()=>i.computeSafeRel(e.rel.value,e.target.value)),u=()=>{a?.mobileMenuOpen.value&&a.closeMobileMenu()},d=()=>o.html`
+    `},styles:[n.colorThemeMixin,n.elevationMixin,t.roundedVariantMixin,e.coarsePointerMixin,e.reducedMotionMixin,r.frostVariantMixin(`.navbar`),a.default]});var _=`ore-navbar-item`;(0,o.define)(_,{props:{active:o.prop.bool(!1),disabled:o.prop.bool(!1),href:o.prop.string(),"icon-only":o.prop.bool(!1),rel:o.prop.string(),target:o.prop.string()},setup(e){let t=(0,o.useSlots)(),n=()=>t.has(`icon`).value,r=()=>t.has(`end`).value,a=(0,o.inject)(h);(0,o.bind)({attr:{"navbar-mobile":()=>a?.isMobile.value?!0:void 0,"navbar-mobile-open":()=>a?.mobileMenuOpen.value?!0:void 0}});let c=()=>!!e.href.value&&!e.disabled.value,l=(0,s.computed)(()=>i.computeSafeRel(e.rel.value,e.target.value)),u=()=>{a?.mobileMenuOpen.value&&a.closeMobileMenu()},d=()=>o.html`
       <span class="item-icon" part="item-icon" ?hidden=${()=>!n()} aria-hidden="true">
         <slot name="icon"></slot>
       </span>
@@ -69,5 +69,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           `:o.html`
           <button class="item" part="item" type="button" @click=${u}>${d()}</button>
         `}
-    `},styles:[e.coarsePointerMixin,a.default]}),exports.NAVBAR_CTX=m,exports.NAVBAR_ITEM_TAG=g,exports.NAVBAR_TAG=h;
+    `},styles:[e.coarsePointerMixin,a.default]}),exports.NAVBAR_CTX=h,exports.NAVBAR_ITEM_TAG=_,exports.NAVBAR_TAG=g;
 //# sourceMappingURL=navbar.cjs.map