@vielzeug/refine 1.1.3 → 1.3.0

package/dist/menu.js

@@ -4,23 +4,23 @@ import { disablableBundle as n, sizableBundle as r } from "./shared/prop-bundles
 import { lifecycleSignal as i } from "./headless/ore.js";
 import { createInteraction as a } from "./headless/keyboard.js";
 import { createOptionList as o } from "./headless/option-list.js";
-import s from "./overlay/menu/menu-item.css?inline.js";
-import c from "./overlay/menu/menu-separator.css?inline.js";
-import l from "./overlay/menu/menu.css?inline.js";
-import { createStableId as u, define as d, html as f, prop as p } from "@vielzeug/ore";
-import { computed as m, watch as h } from "@vielzeug/ripple";
+import s from "./overlay/menu/menu-item.css.js";
+import c from "./overlay/menu/menu-separator.css.js";
+import l from "./overlay/menu/menu.css.js";
+import { aria as u, bind as d, createStableId as f, define as p, getHost as m, html as h, onCleanup as g, onMounted as _, prop as v, useEmit as y, useSlots as b, watchEffect as x } from "@vielzeug/ore";
+import { computed as S, watch as C } from "@vielzeug/ripple";
 //#region src/overlay/menu/menu.ts
-var g = "ore-menu-item";
-d(g, {
+var w = "ore-menu-item";
+p(w, {
 	props: {
-		checked: p.bool(!1),
-		disabled: p.bool(!1),
-		type: p.string(),
-		value: p.string()
+		checked: v.bool(!1),
+		disabled: v.bool(!1),
+		type: v.string(),
+		value: v.string()
 	},
 	setup(e) {
 		let t = () => e.type.value === "checkbox" || e.type.value === "radio", n = () => t() && e.checked.value;
-		return t() ? f`
+		return t() ? h`
           <div
             class="${() => {
 			let t = e.type.value;
@@ -39,7 +39,7 @@ d(g, {
             <span class="icon-slot"><slot name="icon"></slot></span>
             <span class="item-label"><slot></slot></span>
           </div>
-        ` : f`
+        ` : h`
           <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>
@@ -48,19 +48,19 @@ d(g, {
 	},
 	styles: [s]
 });
-var _ = "ore-menu-separator";
-d(_, {
+var T = "ore-menu-separator";
+p(T, {
 	setup() {
-		return f``;
+		return h``;
 	},
 	styles: [c]
 });
-var v = (e) => e === "checkbox" || e === "radio", y = "ore-menu";
-d(y, {
+var E = (e) => e === "checkbox" || e === "radio", D = "ore-menu";
+p(D, {
 	props: {
 		...r,
 		...n,
-		placement: p.oneOf([
+		placement: v.oneOf([
 			"bottom",
 			"bottom-start",
 			"bottom-end",
@@ -69,117 +69,117 @@ d(y, {
 			"top-end"
 		], "bottom-start")
 	},
-	setup(e, { aria: t, bind: n, el: r, emit: s, onCleanup: c, onMounted: l, slots: d, watch: p }) {
-		let g = u("menu"), _ = m(() => !!e.disabled.value), y = i(c), b = null, x = null, S = null;
-		function C() {
-			return Array.from(r.querySelectorAll("ore-menu-item:not([disabled])"));
+	setup(e) {
+		let t = m(), n = y(), r = b(), s = x, c = f("menu"), l = S(() => !!e.disabled.value), p = i(g), v = null, w = null, T = null;
+		function D() {
+			return Array.from(t.querySelectorAll("ore-menu-item:not([disabled])"));
 		}
-		function w(e) {
+		function O(e) {
 			return e ? e.shadowRoot?.querySelector("[role^=\"menuitem\"]") ?? e : null;
 		}
-		function T() {
-			return C().findIndex((e) => {
-				let t = w(e);
+		function k() {
+			return D().findIndex((e) => {
+				let t = O(e);
 				return e === document.activeElement || t === document.activeElement;
 			});
 		}
-		let E = o({
-			getBoundary: () => r,
-			getItems: C,
-			getPanel: () => x,
-			getReference: () => b,
-			getTrigger: () => b,
-			isDisabled: () => _.value,
+		let A = o({
+			getBoundary: () => t,
+			getItems: D,
+			getPanel: () => w,
+			getReference: () => v,
+			getTrigger: () => v,
+			isDisabled: () => l.value,
 			isItemDisabled: (e) => e.hasAttribute("disabled"),
-			onClose: (e) => s("close", { reason: e }),
+			onClose: (e) => n("close", { reason: e }),
 			onNavigate: (e, t) => {
-				let n = C()[t];
-				w(n)?.focus();
+				let n = D()[t];
+				O(n)?.focus();
 			},
-			onOpen: (e) => s("open", { reason: e }),
+			onOpen: (e) => n("open", { reason: e }),
 			positioning: {
 				getPlacement: () => e.placement.value ?? "bottom-start",
 				matchWidth: !1,
 				offsetPx: 4,
 				padding: 6
 			},
-			signal: y
-		}), { isOpen: D } = E, O = (e) => {
-			let t = e.getAttribute("type"), n = v(t);
-			if (t === "checkbox") e.toggleAttribute("checked", !e.hasAttribute("checked"));
-			else if (t === "radio") for (let t of r.querySelectorAll("ore-menu-item[type=\"radio\"]")) t.toggleAttribute("checked", t === e);
-			let i = e.getAttribute("value") ?? "";
-			s("select", {
-				checked: n ? e.hasAttribute("checked") : void 0,
-				value: i
-			}), n || E.close("programmatic");
-		}, k = a({
+			signal: p
+		}), { isOpen: j } = A, M = (e) => {
+			let r = e.getAttribute("type"), i = E(r);
+			if (r === "checkbox") e.toggleAttribute("checked", !e.hasAttribute("checked"));
+			else if (r === "radio") for (let n of t.querySelectorAll("ore-menu-item[type=\"radio\"]")) n.toggleAttribute("checked", n === e);
+			let a = e.getAttribute("value") ?? "", o = i ? e.hasAttribute("checked") : void 0;
+			n("select", {
+				checked: o,
+				value: a
+			}), i || A.close("programmatic");
+		}, N = a({
 			keys: [
 				"Enter",
 				" ",
 				"ArrowDown"
 			],
 			onPress: () => {
-				E.open("keyboard"), requestAnimationFrame(() => E.set(0));
+				A.open("keyboard"), requestAnimationFrame(() => A.set(0));
 			}
-		}), A = a({ onPress: () => {
-			let e = E.getActiveItem();
-			e && O(e);
+		}), P = a({ onPress: () => {
+			let e = A.getActiveItem();
+			e && M(e);
 		} });
-		function j(e) {
-			if (_.value) return;
-			if (!D.value) {
-				k.handleKeydown(e);
+		function F(e) {
+			if (l.value) return;
+			if (!j.value) {
+				N.handleKeydown(e);
 				return;
 			}
-			let t = T();
-			if (t >= 0 && E.set(t), !E.handleKeydown(e)) {
+			let t = k();
+			if (t >= 0 && A.set(t), !A.handleKeydown(e)) {
 				if (e.key === " " || e.key === "Enter") {
-					A.handleKeydown(e);
+					P.handleKeydown(e);
 					return;
 				}
-				e.key === "Tab" && E.close("programmatic");
+				e.key === "Tab" && A.close("programmatic");
 			}
 		}
-		n({ on: { click: (e) => {
+		d({ on: { click: (e) => {
 			let t = e.composedPath();
-			if (!D.value) return;
+			if (!j.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") || O(n);
-		} } }), p(() => {
-			let e = D.value;
-			x && x.toggleAttribute("data-open", e);
+			!n || n.hasAttribute("disabled") || M(n);
+		} } }), s(() => {
+			let e = j.value;
+			w && w.toggleAttribute("data-open", e);
 		});
-		function M() {
-			if (S?.(), S = null, b = d.elements("trigger").value?.[0] ?? null, !b) return;
-			let e = [], n = t(b, {
-				controls: () => g,
-				disabled: () => _.value,
-				expanded: () => String(D.value),
+		function I() {
+			if (T?.(), T = null, v = r.elements("trigger").value?.[0] ?? null, !v) return;
+			let e = [], t = u(v, {
+				controls: () => c,
+				disabled: () => l.value,
+				expanded: () => String(j.value),
 				haspopup: "menu"
-			}), r = (e) => {
-				e.stopPropagation(), !_.value && E.toggle();
+			}), n = (e) => {
+				e.stopPropagation(), !l.value && A.toggle();
 			}, i = (e) => {
-				j(e);
+				F(e);
 			};
-			b.addEventListener("click", r), b.addEventListener("keydown", i), e.push(() => b?.removeEventListener("click", r)), e.push(() => b?.removeEventListener("keydown", i)), S = () => {
-				n();
+			v.addEventListener("click", n), v.addEventListener("keydown", i), e.push(() => v?.removeEventListener("click", n)), e.push(() => v?.removeEventListener("keydown", i)), T = () => {
+				t();
 				for (let t of e) t();
 			};
 		}
-		return h(d.elements("trigger"), M, { immediate: !0 }), l(() => () => {
-			S?.(), S = null;
-		}), f`
+		return C(r.elements("trigger"), I, { immediate: !0 }), _(() => () => {
+			T?.(), T = null;
+		}), h`
       <slot name="trigger"></slot>
       <div
         class="menu-panel"
         part="panel"
-        id="${g}"
+        id="${c}"
         role="menu"
         aria-orientation="vertical"
-        @keydown="${j}"
+        @keydown="${F}"
         ref="${(e) => {
-			x = e;
+			w = e;
 		}}">
         <slot></slot>
       </div>
@@ -192,6 +192,6 @@ d(y, {
 	]
 });
 //#endregion
-export { g as MENU_ITEM_TAG, y as MENU_TAG, _ as SEPARATOR_TAG };
+export { w as MENU_ITEM_TAG, D as MENU_TAG, T as SEPARATOR_TAG };
 
 //# sourceMappingURL=menu.js.map

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 { createStableId, define, html, prop } from '@vielzeug/ore';\nimport { computed, watch as rippleWatch } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\nimport {\n  lifecycleSignal,\n  createInteraction,\n  createOptionList,\n  type DropdownCloseReason,\n  type OverlayOpenDetail,\n} from '../../headless';\nimport { disablableBundle, sizableBundle } from '../../shared';\nimport { forcedColorsMixin, sizeVariantMixin } from '../../styles';\nimport menuItemStyles from './menu-item.css?inline';\nimport menuSeparatorStyles from './menu-separator.css?inline';\nimport componentStyles from './menu.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\nexport interface MenuSelectDetail {\n  value: string;\n  checked?: boolean;\n}\n\nexport type OreMenuItemType = 'checkbox' | 'radio';\n\nexport type OreMenuEvents = {\n  close: { reason: DropdownCloseReason };\n  open: OverlayOpenDetail;\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  disabled?: 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: [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\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 {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 - Fired when the menu opens. detail: { reason: 'trigger' | 'programmatic' }\n * @fires close - Fired when the menu closes. detail: { reason: 'escape' | 'outsideClick' | 'programmatic' | 'trigger' }\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, OreMenuEvents>(MENU_TAG, {\n  props: {\n    ...sizableBundle,\n    ...disablableBundle,\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, { aria, bind, el, emit, onCleanup, onMounted, slots, watch }) {\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 optionList = createOptionList<HTMLElement>({\n      getBoundary: () => el,\n      getItems: getItems,\n      getPanel: () => panelEl,\n      getReference: () => triggerEl,\n      getTrigger: () => triggerEl,\n      isDisabled: () => isDisabled.value,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      onClose: (reason) => emit('close', { reason }),\n      onNavigate: (_action, index) => {\n        const nextItem = getItems()[index];\n\n        getItemFocusable(nextItem)?.focus();\n      },\n      onOpen: (reason) => emit('open', { reason }),\n      positioning: {\n        getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n        matchWidth: false,\n        offsetPx: 4,\n        padding: 6,\n      },\n      signal: abortSignal,\n    });\n    const { isOpen: isOpenSignal } = optionList;\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        optionList.close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createInteraction({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        optionList.open('keyboard');\n        requestAnimationFrame(() => optionList.set(0));\n      },\n    });\n\n    const activateFocusedFromKeyboardPress = createInteraction({\n      onPress: () => {\n        const focused = optionList.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) optionList.set(currentFocusedIndex);\n\n      if (optionList.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        optionList.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 = aria(triggerEl, {\n        controls: () => menuId,\n        disabled: () => isDisabled.value,\n        expanded: () => String(isOpenSignal.value),\n        haspopup: 'menu',\n      });\n\n      const onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        if (isDisabled.value) return;\n\n        optionList.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      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        }}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles, sizeVariantMixin(), forcedColorsMixin],\n});\n"],"mappings":"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"}
+{"version":3,"file":"menu.js","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import type { Placement } from '@vielzeug/orbit';\n\nimport {\n  createStableId,\n  define,\n  html,\n  prop,\n  aria,\n  bind,\n  getHost,\n  onCleanup,\n  onMounted,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, watch as rippleWatch } from '@vielzeug/ripple';\n\nimport type { ComponentSize } from '../../types';\n\nimport {\n  lifecycleSignal,\n  createInteraction,\n  createOptionList,\n  type DropdownCloseReason,\n  type OverlayOpenDetail,\n} from '../../headless';\nimport { disablableBundle, sizableBundle } from '../../shared';\nimport { forcedColorsMixin, sizeVariantMixin } from '../../styles';\nimport menuItemStyles from './menu-item.css?inline';\nimport menuSeparatorStyles from './menu-separator.css?inline';\nimport componentStyles from './menu.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\nexport interface MenuSelectDetail {\n  value: string;\n  checked?: boolean;\n}\n\nexport type OreMenuItemType = 'checkbox' | 'radio';\n\nexport type OreMenuEvents = {\n  close: { reason: DropdownCloseReason };\n  open: OverlayOpenDetail;\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  disabled?: 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: [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\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 {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 - Fired when the menu opens. detail: { reason: 'trigger' | 'programmatic' }\n * @fires close - Fired when the menu closes. detail: { reason: 'escape' | 'outsideClick' | 'programmatic' | 'trigger' }\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    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 optionList = createOptionList<HTMLElement>({\n      getBoundary: () => el,\n      getItems: getItems,\n      getPanel: () => panelEl,\n      getReference: () => triggerEl,\n      getTrigger: () => triggerEl,\n      isDisabled: () => isDisabled.value,\n      isItemDisabled: (item) => item.hasAttribute('disabled'),\n      onClose: (reason) => emit('close', { reason }),\n      onNavigate: (_action, index) => {\n        const nextItem = getItems()[index];\n\n        getItemFocusable(nextItem)?.focus();\n      },\n      onOpen: (reason) => emit('open', { reason }),\n      positioning: {\n        getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n        matchWidth: false,\n        offsetPx: 4,\n        padding: 6,\n      },\n      signal: abortSignal,\n    });\n    const { isOpen: isOpenSignal } = optionList;\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        optionList.close('programmatic');\n      }\n    };\n\n    const openFromKeyboardPress = createInteraction({\n      keys: ['Enter', ' ', 'ArrowDown'],\n      onPress: () => {\n        optionList.open('keyboard');\n        requestAnimationFrame(() => optionList.set(0));\n      },\n    });\n\n    const activateFocusedFromKeyboardPress = createInteraction({\n      onPress: () => {\n        const focused = optionList.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) optionList.set(currentFocusedIndex);\n\n      if (optionList.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        optionList.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 = aria(triggerEl, {\n        controls: () => menuId,\n        disabled: () => isDisabled.value,\n        expanded: () => String(isOpenSignal.value),\n        haspopup: 'menu',\n      });\n\n      const onTriggerClick = (event: MouseEvent) => {\n        event.stopPropagation();\n\n        if (isDisabled.value) return;\n\n        optionList.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      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        }}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles, sizeVariantMixin(), forcedColorsMixin],\n});\n"],"mappings":"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"}

package/dist/navbar.cjs

@@ -1,7 +1,7 @@
-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("./ore/dist/observers/resize-observe.cjs");require("./ore/dist/observers.cjs");const o=require("./layout/navbar/navbar.css?inline.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple");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,s.createContext)(`NavbarContext`),g=`ore-navbar`;(0,s.define)(g,{props:{breakpoint:s.prop.string(`(max-width: 768px)`),color:s.prop.string(),"container-breakpoints":s.prop.bool(!1),elevation:s.prop.number(),floating:s.prop.bool(!1),label:s.prop.string(`Main navigation`),"mobile-sidebar":s.prop.string(),rounded:s.prop.string(),"scroll-threshold":s.prop.number(80),sticky:s.prop.bool(!1),variant:s.prop.string()},setup(e,{bind:t,el:n,emit:r,onMounted:i,provide:o,slots:g}){let _=()=>g.has(`logo`).value,v=()=>g.elements(`mobile-menu`).value.some(u),y=(0,c.signal)(null),b=(0,c.signal)(!1),x=(0,c.signal)(!1),S=(0,c.signal)(!1),C=(0,c.signal)(!1),w=(0,c.signal)(!1),T=(0,c.signal)(!1),E=(0,c.signal)(0),D=(0,c.signal)(!1),O=(0,c.signal)(!1),k=(0,c.signal)(d(e.breakpoint.value)),A=(0,c.signal)(!1),j=()=>{let t=String(e[`mobile-sidebar`].value??``).trim();if(!t)return null;let r=n.getRootNode();return(r instanceof ShadowRoot||r instanceof Document?r.querySelector(t):null)??document.querySelector(t)};o(h,{isMobile:(0,c.computed)(()=>S.value),mobileMenuOpen:(0,c.computed)(()=>C.value)});let M=()=>{if(e.floating.value&&e.sticky.value)return T.value?`sticky`:`floating`;if(e.floating.value)return`floating`;if(e.sticky.value)return`sticky`},N=e=>{let t=!!e;if(!v()){let e=y.value??j();if(e){t?e.openMobile?.():e.closeMobile?.();return}}t&&!v()||C.value!==t&&(C.value=t,r(`mobile-menu-change`,{open:t}))},P=()=>N(!1),F=()=>N(!0),I=()=>{if(!v()){let e=y.value??j();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}}N(!C.value)},L=()=>{let e=(y.value&&!v()?b.value:!1)||D.value||O.value;S.value=e,e||P()},R=e=>e?e.scrollTop||0:window.scrollY||document.documentElement.scrollTop||0,z=e=>{E.value=R(e)},B=(t=null)=>{if(!(e.floating.value&&e.sticky.value)){T.value&&=!1;return}let n=Math.max(0,Number(e[`scroll-threshold`].value)||0),r=R(t)-E.value;T.value=r>n};return t({attr:{"data-mobile":()=>S.value?!0:void 0,"data-mobile-open":()=>S.value&&C.value?!0:void 0,"data-mode":()=>M()??null,"data-mode-transitioning":()=>w.value?!0:void 0,"data-preview-mode":()=>A.value?!0:void 0,"data-scrolled":()=>e.floating.value&&e.sticky.value&&T.value?!0:void 0}}),i(()=>{let t=n,r=m(n);t.closeMobileMenu=P,t.openMobileMenu=F,t.toggleMobileMenu=I;let i=l(window,`scroll`,()=>{B(r)},{passive:!0}),o=r?l(r,`scroll`,()=>{B(r)},{passive:!0}):void 0,s=l(n,`keydown`,e=>{e.key!==`Escape`||!C.value||P()}),u,h,g,_,S=()=>{h?.(),h=void 0,y.value=null,b.value=!1,x.value=!1;let e=j();if(!e)return;let t=t=>{let n=e.hasAttribute(`data-bottom-nav`),r=e.hasAttribute(`data-mobile-open`);b.value=n,x.value=t?.detail?t.detail.open:r,x.value&&!b.value&&(b.value=!0),L()},n=new MutationObserver(()=>{t()});t(),n.observe(e,{attributeFilter:[`data-bottom-nav`,`data-mobile-open`],attributes:!0}),e.addEventListener(`mobile-open-change`,t),h=()=>{n.disconnect(),e.removeEventListener(`mobile-open-change`,t)},y.value=e},E=()=>{w.value=!0,g!=null&&clearTimeout(g),g=setTimeout(()=>{w.value=!1,g=void 0},220)},N=(0,c.watch)((0,c.computed)(()=>e.floating.value&&e.sticky.value),e=>{if(!e){T.value&&=!1,w.value&&=!1,_=void 0,g!=null&&(clearTimeout(g),g=void 0);return}z(r),B(r),_=M()},{immediate:!0}),R=(0,c.watch)(e[`mobile-sidebar`],()=>{S()},{immediate:!0}),V=(0,c.watch)((0,c.computed)(()=>M()),t=>{if(!(e.floating.value&&e.sticky.value)){_=t??void 0;return}let n=t??void 0;_&&n&&_!==n&&E(),_=n},{immediate:!0}),H=(0,c.watch)((0,c.computed)(()=>v()),e=>{!e&&C.value&&P()},{immediate:!0});(0,c.watch)(e.breakpoint,t=>{u?.(),u=void 0;let r=String(t??``).trim();k.value=d(r),D.value=!1;let i=p(n);if(O.value=i>0&&k.value!=null?i<=k.value:!1,L(),e[`container-breakpoints`].value&&k.value!=null||!r||typeof window.matchMedia!=`function`)return;let a=window.matchMedia(r),o=e=>{D.value=e,L()},s=e=>{o(e.matches)};o(a.matches),a.addEventListener(`change`,s),u=()=>{a.removeEventListener(`change`,s)}},{immediate:!0});let U=typeof ResizeObserver==`function`?(()=>{let e=a.resizeObserver(n),t=n.parentElement,r=f(n),i=t?a.resizeObserver(t):void 0,o=r&&r!==t?a.resizeObserver(r):void 0;return(0,c.watch)((0,c.computed)(()=>[e.value.width,e.value.height,i?.value.width,i?.value.height,o?.value.width,o?.value.height]),()=>{let e=p(n),t=f(n)?.clientWidth??0;O.value=e>0&&k.value!=null?e<=k.value:!1,A.value=t>0&&t<window.innerWidth,L()})})():void 0;return()=>{s?.(),i?.(),o?.(),N?.dispose(),V?.dispose(),H?.dispose(),R?.dispose(),u?.(),h?.(),U?.dispose(),g!=null&&(clearTimeout(g),g=void 0)}}),s.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("./ore/dist/observers/resize-observe.cjs");require("./ore/dist/observers.cjs");const o=require("./layout/navbar/navbar.css.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple");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,s.createContext)(`NavbarContext`),g=`ore-navbar`;(0,s.define)(g,{props:{breakpoint:s.prop.string(`(max-width: 768px)`),color:s.prop.string(),"container-breakpoints":s.prop.bool(!1),elevation:s.prop.number(),floating:s.prop.bool(!1),label:s.prop.string(`Main navigation`),"mobile-sidebar":s.prop.string(),rounded:s.prop.string(),"scroll-threshold":s.prop.number(80),sticky:s.prop.bool(!1),variant:s.prop.string()},setup(e){let t=(0,s.getHost)(),n=(0,s.useEmit)(),r=(0,s.useSlots)(),i=()=>r.has(`logo`).value,o=()=>r.elements(`mobile-menu`).value.some(u),g=(0,c.signal)(null),_=(0,c.signal)(!1),v=(0,c.signal)(!1),y=(0,c.signal)(!1),b=(0,c.signal)(!1),x=(0,c.signal)(!1),S=(0,c.signal)(!1),C=(0,c.signal)(0),w=(0,c.signal)(!1),T=(0,c.signal)(!1),E=(0,c.signal)(d(e.breakpoint.value)),D=(0,c.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,s.provide)(h,{isMobile:(0,c.computed)(()=>y.value),mobileMenuOpen:(0,c.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(!o()){let e=g.value??O();if(e){t?e.openMobile?.():e.closeMobile?.();return}}t&&!o()||b.value!==t&&(b.value=t,n(`mobile-menu-change`,{open:t}))},j=()=>A(!1),M=()=>A(!0),N=()=>{if(!o()){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&&!o()?_.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,s.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,s.onMounted)(()=>{let n=t,r=m(t);n.closeMobileMenu=j,n.openMobileMenu=M,n.toggleMobileMenu=N;let i=l(window,`scroll`,()=>{L(r)},{passive:!0}),s=r?l(r,`scroll`,()=>{L(r)},{passive:!0}):void 0,u=l(t,`keydown`,e=>{e.key!==`Escape`||!b.value||j()}),h,y,C,A,F=()=>{y?.(),y=void 0,g.value=null,_.value=!1,v.value=!1;let e=O();if(!e)return;let t=t=>{let n=e.hasAttribute(`data-bottom-nav`),r=e.hasAttribute(`data-mobile-open`);_.value=n,v.value=t?.detail?t.detail.open:r,v.value&&!_.value&&(_.value=!0),P()},n=new MutationObserver(()=>{t()});t(),n.observe(e,{attributeFilter:[`data-bottom-nav`,`data-mobile-open`],attributes:!0}),e.addEventListener(`mobile-open-change`,t),y=()=>{n.disconnect(),e.removeEventListener(`mobile-open-change`,t)},g.value=e},R=()=>{x.value=!0,C!=null&&clearTimeout(C),C=setTimeout(()=>{x.value=!1,C=void 0},220)},z=(0,c.watch)((0,c.computed)(()=>e.floating.value&&e.sticky.value),e=>{if(!e){S.value&&=!1,x.value&&=!1,A=void 0,C!=null&&(clearTimeout(C),C=void 0);return}I(r),L(r),A=k()},{immediate:!0}),B=(0,c.watch)(e[`mobile-sidebar`],()=>{F()},{immediate:!0}),V=(0,c.watch)((0,c.computed)(()=>k()),t=>{if(!(e.floating.value&&e.sticky.value)){A=t??void 0;return}let n=t??void 0;A&&n&&A!==n&&R(),A=n},{immediate:!0}),H=(0,c.watch)((0,c.computed)(()=>o()),e=>{!e&&b.value&&j()},{immediate:!0});(0,c.watch)(e.breakpoint,n=>{h?.(),h=void 0;let r=String(n??``).trim();E.value=d(r),w.value=!1;let i=p(t);if(T.value=i>0&&E.value!=null?i<=E.value:!1,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),h=()=>{a.removeEventListener(`change`,s)}},{immediate:!0});let U=typeof ResizeObserver==`function`?(()=>{let e=a.resizeObserver(t),n=t.parentElement,r=f(t),i=n?a.resizeObserver(n):void 0,o=r&&r!==n?a.resizeObserver(r):void 0;return(0,c.watch)((0,c.computed)(()=>[e.value.width,e.value.height,i?.value.width,i?.value.height,o?.value.width,o?.value.height]),()=>{let e=p(t),n=f(t)?.clientWidth??0;T.value=e>0&&E.value!=null?e<=E.value:!1,D.value=n>0&&n<window.innerWidth,P()})})():void 0;return()=>{u?.(),i?.(),s?.(),z?.dispose(),V?.dispose(),H?.dispose(),B?.dispose(),h?.(),y?.(),U?.dispose(),C!=null&&(clearTimeout(C),C=void 0)}}),s.html`
       <nav part="nav" aria-label="${e.label}">
         <div class="navbar" part="bar">
-          <div class="navbar-logo" part="logo" ?hidden=${()=>!_()}>
+          <div class="navbar-logo" part="logo" ?hidden=${()=>!i()}>
             <slot name="logo"></slot>
           </div>
 
@@ -21,13 +21,13 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
             class="mobile-toggle"
             part="mobile-toggle"
             type="button"
-            aria-label="${()=>v()?C.value?`Close navigation menu`:`Open navigation menu`:x.value?`Close navigation menu`:`Open navigation menu`}"
+            aria-label="${()=>o()?b.value?`Close navigation menu`:`Open navigation menu`:v.value?`Close navigation menu`:`Open navigation menu`}"
             aria-controls="mobile-menu-panel"
-            aria-expanded="${()=>String(v()?C.value:x.value)}"
-            ?hidden=${()=>!S.value||!v()&&!y.value}
-            @click="${I}">
+            aria-expanded="${()=>String(o()?b.value:v.value)}"
+            ?hidden=${()=>!y.value||!o()&&!g.value}
+            @click="${N}">
             <ore-icon
-              name="${()=>(v()?C.value:x.value)?`x`:`menu`}"
+              name="${()=>(o()?b.value:v.value)?`x`:`menu`}"
               size="18"
               stroke-width="2.5"
               aria-hidden="true"></ore-icon>
@@ -40,29 +40,29 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           part="mobile-menu"
           role="navigation"
           :aria-label="${()=>`${e.label.value} mobile menu`}"
-          ?hidden=${()=>!S.value||!C.value||!v()}>
+          ?hidden=${()=>!y.value||!b.value||!o()}>
           <slot name="mobile-menu"></slot>
         </div>
       </nav>
-    `},styles:[n.colorThemeMixin,n.elevationMixin,t.roundedVariantMixin,e.coarsePointerMixin,e.reducedMotionMixin,r.frostVariantMixin(`.navbar`),o.default]});var _=`ore-navbar-item`;(0,s.define)(_,{props:{active:s.prop.bool(!1),disabled:s.prop.bool(!1),href:s.prop.string(),rel:s.prop.string(),target:s.prop.string()},setup(e,{bind:t,slots:n}){let r=()=>n.has(`icon`).value,a=()=>n.has(`end`).value,o=(0,s.inject)(h);t({attr:{"navbar-mobile":()=>o?.isMobile.value?!0:void 0,"navbar-mobile-open":()=>o?.mobileMenuOpen.value?!0:void 0}});let l=()=>!!e.href.value&&!e.disabled.value,u=(0,c.computed)(()=>i.computeSafeRel(e.rel.value,e.target.value)),d=()=>s.html`
-      <span class="item-icon" part="item-icon" ?hidden=${()=>!r()} aria-hidden="true">
+    `},styles:[n.colorThemeMixin,n.elevationMixin,t.roundedVariantMixin,e.coarsePointerMixin,e.reducedMotionMixin,r.frostVariantMixin(`.navbar`),o.default]});var _=`ore-navbar-item`;(0,s.define)(_,{props:{active:s.prop.bool(!1),disabled:s.prop.bool(!1),href:s.prop.string(),rel:s.prop.string(),target:s.prop.string()},setup(e){let t=(0,s.useSlots)(),n=()=>t.has(`icon`).value,r=()=>t.has(`end`).value,a=(0,s.inject)(h);(0,s.bind)({attr:{"navbar-mobile":()=>a?.isMobile.value?!0:void 0,"navbar-mobile-open":()=>a?.mobileMenuOpen.value?!0:void 0}});let o=()=>!!e.href.value&&!e.disabled.value,l=(0,c.computed)(()=>i.computeSafeRel(e.rel.value,e.target.value)),u=()=>s.html`
+      <span class="item-icon" part="item-icon" ?hidden=${()=>!n()} aria-hidden="true">
         <slot name="icon"></slot>
       </span>
       <span class="item-label" part="item-label"><slot></slot></span>
-      <span class="item-end" part="item-end" ?hidden=${()=>!a()}>
+      <span class="item-end" part="item-end" ?hidden=${()=>!r()}>
         <slot name="end"></slot>
       </span>
     `;return s.html`
-      ${()=>l()?s.html`
+      ${()=>o()?s.html`
             <a
               class="item"
               part="item"
               href="${e.href}"
-              :rel="${u}"
+              :rel="${l}"
               :target="${e.target}"
               aria-current="${()=>e.active.value?`page`:null}">
-              ${d()}
+              ${u()}
             </a>
-          `:e.disabled.value?s.html`<div class="item" part="item" tabindex="-1" aria-disabled="true">${d()}</div>`:s.html`<button class="item" part="item" type="button">${d()}</button>`}
+          `:e.disabled.value?s.html`<div class="item" part="item" tabindex="-1" aria-disabled="true">${u()}</div>`:s.html`<button class="item" part="item" type="button">${u()}</button>`}
     `},styles:[e.coarsePointerMixin,o.default]}),exports.NAVBAR_CTX=h,exports.NAVBAR_ITEM_TAG=_,exports.NAVBAR_TAG=g;
 //# sourceMappingURL=navbar.cjs.map