@vielzeug/refine 2.3.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -18
- package/dist/accordion-item.cjs +1 -1
- package/dist/accordion-item.cjs.map +1 -1
- package/dist/accordion-item.js +1 -1
- package/dist/accordion-item.js.map +1 -1
- package/dist/accordion.cjs.map +1 -1
- package/dist/accordion.js.map +1 -1
- package/dist/async.cjs +1 -1
- package/dist/async.cjs.map +1 -1
- package/dist/async.js +3 -3
- package/dist/async.js.map +1 -1
- package/dist/box.cjs.map +1 -1
- package/dist/box.js.map +1 -1
- package/dist/card.cjs +1 -1
- package/dist/card.cjs.map +1 -1
- package/dist/card.js +3 -3
- package/dist/card.js.map +1 -1
- package/dist/chat-message.cjs +1 -1
- package/dist/chat-message.cjs.map +1 -1
- package/dist/chat-message.js +1 -1
- package/dist/chat-message.js.map +1 -1
- package/dist/checkbox-group.cjs +1 -1
- package/dist/checkbox-group.cjs.map +1 -1
- package/dist/checkbox-group.js +1 -1
- package/dist/checkbox-group.js.map +1 -1
- package/dist/combobox.cjs +10 -8
- package/dist/combobox.cjs.map +1 -1
- package/dist/combobox.js +62 -51
- package/dist/combobox.js.map +1 -1
- package/dist/command-palette.cjs +1 -1
- package/dist/command-palette.cjs.map +1 -1
- package/dist/command-palette.js +6 -2
- package/dist/command-palette.js.map +1 -1
- package/dist/content/card/card.css.cjs +1 -1
- package/dist/content/card/card.css.cjs.map +1 -1
- package/dist/content/card/card.css.js +1 -1
- package/dist/content/card/card.css.js.map +1 -1
- package/dist/content/card/card.d.ts +2 -2
- package/dist/content/card/card.d.ts.map +1 -1
- package/dist/content/index.d.ts +2 -0
- package/dist/content/index.d.ts.map +1 -1
- package/dist/content/list/list-item.css.cjs +1 -1
- package/dist/content/list/list-item.css.cjs.map +1 -1
- package/dist/content/list/list-item.css.js +1 -1
- package/dist/content/list/list-item.css.js.map +1 -1
- package/dist/content/list/list-item.d.ts +9 -0
- package/dist/content/list/list-item.d.ts.map +1 -1
- package/dist/content/pagination/pagination.css.cjs +1 -1
- package/dist/content/pagination/pagination.css.cjs.map +1 -1
- package/dist/content/pagination/pagination.css.js +1 -1
- package/dist/content/pagination/pagination.css.js.map +1 -1
- package/dist/content/stats/stats.css.cjs +2 -0
- package/dist/content/stats/stats.css.cjs.map +1 -0
- package/dist/content/stats/stats.css.js +6 -0
- package/dist/content/stats/stats.css.js.map +1 -0
- package/dist/content/stats/stats.d.ts +72 -0
- package/dist/content/stats/stats.d.ts.map +1 -0
- package/dist/core/auto-resize.cjs +1 -1
- package/dist/core/auto-resize.cjs.map +1 -1
- package/dist/core/auto-resize.js +1 -1
- package/dist/core/auto-resize.js.map +1 -1
- package/dist/core/field-base.cjs +1 -1
- package/dist/core/field-base.cjs.map +1 -1
- package/dist/core/field-base.d.ts +1 -1
- package/dist/core/field-base.js +1 -1
- package/dist/core/field-base.js.map +1 -1
- package/dist/core/nav.cjs +1 -1
- package/dist/core/nav.cjs.map +1 -1
- package/dist/core/nav.d.ts +4 -1
- package/dist/core/nav.d.ts.map +1 -1
- package/dist/core/nav.js +41 -28
- package/dist/core/nav.js.map +1 -1
- package/dist/core/option-list.cjs +1 -1
- package/dist/core/option-list.cjs.map +1 -1
- package/dist/core/option-list.d.ts.map +1 -1
- package/dist/core/option-list.js +30 -28
- package/dist/core/option-list.js.map +1 -1
- package/dist/core/slider.cjs +1 -1
- package/dist/core/slider.cjs.map +1 -1
- package/dist/core/slider.js +1 -1
- package/dist/core/slider.js.map +1 -1
- package/dist/core/spinner.cjs +1 -1
- package/dist/core/spinner.cjs.map +1 -1
- package/dist/core/spinner.js +1 -1
- package/dist/core/spinner.js.map +1 -1
- package/dist/custom-elements.json +5471 -4977
- package/dist/datagrid.cjs +219 -199
- package/dist/datagrid.cjs.map +1 -1
- package/dist/datagrid.js +415 -302
- package/dist/datagrid.js.map +1 -1
- package/dist/disclosure/accordion/accordion.css.cjs +1 -1
- package/dist/disclosure/accordion/accordion.css.cjs.map +1 -1
- package/dist/disclosure/accordion/accordion.css.js +1 -1
- package/dist/disclosure/accordion/accordion.css.js.map +1 -1
- package/dist/disclosure/accordion/accordion.d.ts +5 -5
- package/dist/disclosure/accordion/accordion.d.ts.map +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.cjs +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.cjs.map +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.js +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.js.map +1 -1
- package/dist/disclosure/accordion-item/accordion-item.d.ts +3 -3
- package/dist/disclosure/accordion-item/accordion-item.d.ts.map +1 -1
- package/dist/disclosure/tab-item/tab-item.css.cjs +1 -1
- package/dist/disclosure/tab-item/tab-item.css.cjs.map +1 -1
- package/dist/disclosure/tab-item/tab-item.css.js +1 -1
- package/dist/disclosure/tab-item/tab-item.css.js.map +1 -1
- package/dist/disclosure/tab-item/tab-item.d.ts +6 -3
- package/dist/disclosure/tab-item/tab-item.d.ts.map +1 -1
- package/dist/disclosure/tabs/tabs.css.cjs +1 -1
- package/dist/disclosure/tabs/tabs.css.cjs.map +1 -1
- package/dist/disclosure/tabs/tabs.css.js +1 -1
- package/dist/disclosure/tabs/tabs.css.js.map +1 -1
- package/dist/disclosure/tabs/tabs.d.ts +9 -5
- package/dist/disclosure/tabs/tabs.d.ts.map +1 -1
- package/dist/drawer.cjs +1 -1
- package/dist/drawer.cjs.map +1 -1
- package/dist/drawer.js +1 -1
- package/dist/drawer.js.map +1 -1
- package/dist/feedback/toast/toast.d.ts.map +1 -1
- package/dist/file-input.cjs +1 -1
- package/dist/file-input.cjs.map +1 -1
- package/dist/file-input.js +2 -2
- package/dist/file-input.js.map +1 -1
- package/dist/frameworks/elements.d.ts +4 -85
- package/dist/frameworks/react.d.ts +5 -4
- package/dist/frameworks/vue.d.ts +4 -4
- package/dist/grid.cjs +2 -2
- package/dist/grid.cjs.map +1 -1
- package/dist/grid.js +21 -18
- package/dist/grid.js.map +1 -1
- package/dist/icon.cjs +1 -1
- package/dist/icon.cjs.map +1 -1
- package/dist/icon.js +1 -1
- package/dist/icon.js.map +1 -1
- package/dist/input.cjs +5 -4
- package/dist/input.cjs.map +1 -1
- package/dist/input.js +14 -8
- package/dist/input.js.map +1 -1
- package/dist/inputs/combobox/combobox-options.cjs +1 -1
- package/dist/inputs/combobox/combobox-options.cjs.map +1 -1
- package/dist/inputs/combobox/combobox-options.d.ts.map +1 -1
- package/dist/inputs/combobox/combobox-options.js +1 -0
- package/dist/inputs/combobox/combobox-options.js.map +1 -1
- package/dist/inputs/combobox/combobox.css.cjs +1 -1
- package/dist/inputs/combobox/combobox.css.cjs.map +1 -1
- package/dist/inputs/combobox/combobox.css.js +1 -1
- package/dist/inputs/combobox/combobox.css.js.map +1 -1
- package/dist/inputs/combobox/combobox.d.ts +13 -1
- package/dist/inputs/combobox/combobox.d.ts.map +1 -1
- package/dist/inputs/combobox/combobox.types.d.ts +7 -0
- package/dist/inputs/combobox/combobox.types.d.ts.map +1 -1
- package/dist/inputs/datagrid/datagrid-model.cjs +1 -1
- package/dist/inputs/datagrid/datagrid-model.cjs.map +1 -1
- package/dist/inputs/datagrid/datagrid-model.d.ts +17 -3
- package/dist/inputs/datagrid/datagrid-model.d.ts.map +1 -1
- package/dist/inputs/datagrid/datagrid-model.js +93 -70
- package/dist/inputs/datagrid/datagrid-model.js.map +1 -1
- package/dist/inputs/datagrid/datagrid.css.cjs +1 -1
- package/dist/inputs/datagrid/datagrid.css.cjs.map +1 -1
- package/dist/inputs/datagrid/datagrid.css.js +1 -1
- package/dist/inputs/datagrid/datagrid.css.js.map +1 -1
- package/dist/inputs/datagrid/datagrid.d.ts +78 -36
- package/dist/inputs/datagrid/datagrid.d.ts.map +1 -1
- package/dist/inputs/file-input/file-input-upload.cjs +1 -1
- package/dist/inputs/file-input/file-input-upload.cjs.map +1 -1
- package/dist/inputs/file-input/file-input-upload.js +1 -1
- package/dist/inputs/file-input/file-input-upload.js.map +1 -1
- package/dist/inputs/index.d.ts +3 -4
- package/dist/inputs/index.d.ts.map +1 -1
- package/dist/inputs/input/input.css.cjs +1 -1
- package/dist/inputs/input/input.css.cjs.map +1 -1
- package/dist/inputs/input/input.css.js +1 -1
- package/dist/inputs/input/input.css.js.map +1 -1
- package/dist/inputs/input/input.d.ts +3 -0
- package/dist/inputs/input/input.d.ts.map +1 -1
- package/dist/inputs/select/select.css.cjs +1 -1
- package/dist/inputs/select/select.css.cjs.map +1 -1
- package/dist/inputs/select/select.css.js +1 -1
- package/dist/inputs/select/select.css.js.map +1 -1
- package/dist/inputs/select/select.d.ts +5 -0
- package/dist/inputs/select/select.d.ts.map +1 -1
- package/dist/inputs/shared/field-binding.cjs +1 -1
- package/dist/inputs/shared/field-binding.cjs.map +1 -1
- package/dist/inputs/shared/field-binding.js +6 -6
- package/dist/inputs/shared/field-binding.js.map +1 -1
- package/dist/layout/box/box.css.cjs +1 -1
- package/dist/layout/box/box.css.cjs.map +1 -1
- package/dist/layout/box/box.css.js +1 -1
- package/dist/layout/box/box.css.js.map +1 -1
- package/dist/layout/box/box.d.ts +3 -3
- package/dist/layout/box/box.d.ts.map +1 -1
- package/dist/layout/grid/grid.d.ts.map +1 -1
- package/dist/layout/navbar/navbar.css.cjs +1 -1
- package/dist/layout/navbar/navbar.css.cjs.map +1 -1
- package/dist/layout/navbar/navbar.css.js +1 -1
- package/dist/layout/navbar/navbar.css.js.map +1 -1
- package/dist/layout/navbar/navbar.d.ts +3 -1
- package/dist/layout/navbar/navbar.d.ts.map +1 -1
- package/dist/layout/sidebar/sidebar.css.cjs +1 -1
- package/dist/layout/sidebar/sidebar.css.cjs.map +1 -1
- package/dist/layout/sidebar/sidebar.css.js +1 -1
- package/dist/layout/sidebar/sidebar.css.js.map +1 -1
- package/dist/layout/sidebar/sidebar.d.ts +8 -0
- package/dist/layout/sidebar/sidebar.d.ts.map +1 -1
- package/dist/list-item.cjs +6 -5
- package/dist/list-item.cjs.map +1 -1
- package/dist/list-item.js +23 -17
- package/dist/list-item.js.map +1 -1
- package/dist/list.cjs +1 -1
- package/dist/list.cjs.map +1 -1
- package/dist/list.js +1 -1
- package/dist/list.js.map +1 -1
- package/dist/menu.cjs +1 -1
- package/dist/menu.cjs.map +1 -1
- package/dist/menu.js +7 -7
- package/dist/menu.js.map +1 -1
- package/dist/navbar.cjs +2 -2
- package/dist/navbar.cjs.map +1 -1
- package/dist/navbar.js +91 -87
- package/dist/navbar.js.map +1 -1
- package/dist/navigation-menu.cjs +1 -1
- package/dist/navigation-menu.cjs.map +1 -1
- package/dist/navigation-menu.js +2 -2
- package/dist/navigation-menu.js.map +1 -1
- package/dist/number-input.cjs +1 -1
- package/dist/number-input.cjs.map +1 -1
- package/dist/number-input.js +1 -1
- package/dist/number-input.js.map +1 -1
- package/dist/overlay/popover/popover.css.cjs +1 -1
- package/dist/overlay/popover/popover.css.cjs.map +1 -1
- package/dist/overlay/popover/popover.css.js +1 -1
- package/dist/overlay/popover/popover.css.js.map +1 -1
- package/dist/overlay/popover/popover.d.ts +1 -0
- package/dist/overlay/popover/popover.d.ts.map +1 -1
- package/dist/overlay/shared/use-dialog.cjs +1 -1
- package/dist/overlay/shared/use-dialog.cjs.map +1 -1
- package/dist/overlay/shared/use-dialog.js +1 -1
- package/dist/overlay/shared/use-dialog.js.map +1 -1
- package/dist/overlay/shared/use-floating-trigger.cjs +1 -1
- package/dist/overlay/shared/use-floating-trigger.cjs.map +1 -1
- package/dist/overlay/shared/use-floating-trigger.js +1 -1
- package/dist/overlay/shared/use-floating-trigger.js.map +1 -1
- package/dist/overlay/tooltip/tooltip.d.ts.map +1 -1
- package/dist/popover.cjs +1 -1
- package/dist/popover.cjs.map +1 -1
- package/dist/popover.js +6 -6
- package/dist/popover.js.map +1 -1
- package/dist/radio-group.cjs +1 -1
- package/dist/radio-group.cjs.map +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/radio-group.js.map +1 -1
- package/dist/radio.cjs +1 -1
- package/dist/radio.cjs.map +1 -1
- package/dist/radio.js +15 -13
- package/dist/radio.js.map +1 -1
- package/dist/rating.cjs +1 -1
- package/dist/rating.cjs.map +1 -1
- package/dist/rating.js +2 -2
- package/dist/rating.js.map +1 -1
- package/dist/refine.cjs +373 -324
- package/dist/refine.cjs.map +1 -1
- package/dist/refine.iife.js +382 -333
- package/dist/refine.iife.js.map +1 -1
- package/dist/refine.js +417 -368
- package/dist/refine.js.map +1 -1
- package/dist/select.cjs +16 -14
- package/dist/select.cjs.map +1 -1
- package/dist/select.js +118 -112
- package/dist/select.js.map +1 -1
- package/dist/shared/types.d.ts +0 -2
- package/dist/shared/types.d.ts.map +1 -1
- package/dist/sidebar.cjs +28 -23
- package/dist/sidebar.cjs.map +1 -1
- package/dist/sidebar.js +143 -108
- package/dist/sidebar.js.map +1 -1
- package/dist/skeleton.cjs +1 -1
- package/dist/skeleton.cjs.map +1 -1
- package/dist/skeleton.js +11 -9
- package/dist/skeleton.js.map +1 -1
- package/dist/slider.cjs +1 -1
- package/dist/slider.cjs.map +1 -1
- package/dist/slider.js +21 -21
- package/dist/slider.js.map +1 -1
- package/dist/stats.cjs +18 -0
- package/dist/stats.cjs.map +1 -0
- package/dist/stats.js +88 -0
- package/dist/stats.js.map +1 -0
- package/dist/stepper.cjs +1 -1
- package/dist/stepper.cjs.map +1 -1
- package/dist/stepper.js +1 -1
- package/dist/stepper.js.map +1 -1
- package/dist/styles/mixins/animation.css.cjs +2 -0
- package/dist/styles/mixins/animation.css.cjs.map +1 -1
- package/dist/styles/mixins/animation.css.d.ts.map +1 -1
- package/dist/styles/mixins/animation.css.js +2 -0
- package/dist/styles/mixins/animation.css.js.map +1 -1
- package/dist/tab-item.cjs +1 -1
- package/dist/tab-item.cjs.map +1 -1
- package/dist/tab-item.js +3 -2
- package/dist/tab-item.js.map +1 -1
- package/dist/tabs.cjs +1 -1
- package/dist/tabs.cjs.map +1 -1
- package/dist/tabs.js +3 -1
- package/dist/tabs.js.map +1 -1
- package/dist/toast.cjs +8 -8
- package/dist/toast.cjs.map +1 -1
- package/dist/toast.js +32 -33
- package/dist/toast.js.map +1 -1
- package/dist/tooltip.cjs +1 -1
- package/dist/tooltip.cjs.map +1 -1
- package/dist/tooltip.js +2 -2
- package/dist/tooltip.js.map +1 -1
- package/dist/types/elements.d.ts +207 -0
- package/package.json +70 -62
package/dist/navbar.js
CHANGED
|
@@ -5,24 +5,24 @@ import { frostVariantMixin as a } from "./styles/mixins/variants.css.js";
|
|
|
5
5
|
import { computeSafeRel as o } from "./utils/link.js";
|
|
6
6
|
import s from "./layout/navbar/navbar.css.js";
|
|
7
7
|
import { bind as c, createContext as l, define as u, getHost as d, html as f, inject as p, onCleanup as m, onMounted as h, prop as g, provide as _, useEmit as v, useSlots as y } from "@vielzeug/ore";
|
|
8
|
-
import { computed as b,
|
|
9
|
-
import { SentinelUnavailableError as
|
|
8
|
+
import { computed as b, fromSubscribable as x, signal as S, untrack as C, watch as w } from "@vielzeug/ripple";
|
|
9
|
+
import { SentinelUnavailableError as T, createElementSize as E, createMediaQuery as D } from "@vielzeug/sentinel";
|
|
10
10
|
//#region src/layout/navbar/navbar.ts
|
|
11
|
-
var
|
|
11
|
+
var O = (e, t, n, r) => e ? (e.addEventListener(t, n, r), () => e.removeEventListener(t, n, r)) : () => {}, k = (e) => !(e instanceof HTMLElement) || e.tagName.includes("-") || e.childElementCount > 0 ? !0 : (e.textContent ?? "").trim().length > 0, A = (e) => {
|
|
12
12
|
let t = String(e ?? "").trim();
|
|
13
13
|
if (!t) return;
|
|
14
14
|
let n = /max-width\s*:\s*([0-9]+(?:\.[0-9]+)?)px/i.exec(t);
|
|
15
15
|
if (!n) return;
|
|
16
16
|
let r = Number.parseFloat(n[1]);
|
|
17
17
|
return Number.isFinite(r) ? r : void 0;
|
|
18
|
-
},
|
|
18
|
+
}, j = (e) => {
|
|
19
19
|
let t = e.parentElement;
|
|
20
20
|
for (; t?.tagName.toLowerCase() === "ore-grid-item";) t = t.parentElement;
|
|
21
21
|
return t;
|
|
22
|
-
}, j = (e) => {
|
|
23
|
-
let t = A(e)?.clientWidth ?? 0;
|
|
24
|
-
return t > 0 ? t : e.offsetWidth;
|
|
25
22
|
}, M = (e) => {
|
|
23
|
+
let t = j(e)?.clientWidth ?? 0;
|
|
24
|
+
return t > 0 ? t : e.offsetWidth;
|
|
25
|
+
}, N = (e) => {
|
|
26
26
|
let t = e.parentElement;
|
|
27
27
|
for (; t;) {
|
|
28
28
|
let e = window.getComputedStyle(t).overflowY;
|
|
@@ -30,8 +30,8 @@ var D = (e, t, n, r) => e ? (e.addEventListener(t, n, r), () => e.removeEventLis
|
|
|
30
30
|
t = t.parentElement;
|
|
31
31
|
}
|
|
32
32
|
return null;
|
|
33
|
-
},
|
|
34
|
-
u(
|
|
33
|
+
}, P = l("NavbarContext"), F = "ore-navbar";
|
|
34
|
+
u(F, {
|
|
35
35
|
props: {
|
|
36
36
|
breakpoint: g.string("(max-width: 768px)"),
|
|
37
37
|
color: g.string(),
|
|
@@ -39,6 +39,8 @@ u(P, {
|
|
|
39
39
|
elevation: g.number(),
|
|
40
40
|
floating: g.bool(!1),
|
|
41
41
|
label: g.string("Main navigation"),
|
|
42
|
+
"menu-close-label": g.string("Close navigation menu"),
|
|
43
|
+
"menu-open-label": g.string("Open navigation menu"),
|
|
42
44
|
"mobile-sidebar": g.string(),
|
|
43
45
|
rounded: g.string(),
|
|
44
46
|
"scroll-threshold": g.number(80),
|
|
@@ -46,75 +48,75 @@ u(P, {
|
|
|
46
48
|
variant: g.string()
|
|
47
49
|
},
|
|
48
50
|
setup(e) {
|
|
49
|
-
let t = d(), n = v(), r = y(), i = r.has("logo"), a = r.elements("mobile-menu"), o =
|
|
51
|
+
let t = d(), n = v(), r = y(), i = r.has("logo"), a = r.elements("mobile-menu"), o = S(!1), s = S(null), l = S(!1), u = S(!1), p = S(!1), g = S(!1), F = S(!1), I = S(!1), L = S(0), R = S(!1), z = S(!1), B = S(A(e.breakpoint.value)), V = S(!1), H = () => {
|
|
50
52
|
let n = String(e["mobile-sidebar"].value ?? "").trim();
|
|
51
53
|
if (!n) return null;
|
|
52
54
|
let r = t.getRootNode();
|
|
53
55
|
return (r instanceof ShadowRoot || r instanceof Document ? r.querySelector(n) : null) ?? document.querySelector(n);
|
|
54
56
|
};
|
|
55
|
-
_(
|
|
56
|
-
closeMobileMenu: () =>
|
|
57
|
+
_(P, {
|
|
58
|
+
closeMobileMenu: () => G(),
|
|
57
59
|
isMobile: b(() => p.value),
|
|
58
60
|
mobileMenuOpen: b(() => g.value)
|
|
59
61
|
});
|
|
60
|
-
let
|
|
61
|
-
if (e.floating.value && e.sticky.value) return
|
|
62
|
+
let U = () => {
|
|
63
|
+
if (e.floating.value && e.sticky.value) return I.value ? "sticky" : "floating";
|
|
62
64
|
if (e.floating.value) return "floating";
|
|
63
65
|
if (e.sticky.value) return "sticky";
|
|
64
|
-
},
|
|
66
|
+
}, W = (e) => {
|
|
65
67
|
let t = !!e;
|
|
66
68
|
if (!o.value) {
|
|
67
|
-
let e = s.value ??
|
|
69
|
+
let e = s.value ?? H();
|
|
68
70
|
if (e) {
|
|
69
71
|
t ? e.openMobile?.() : e.closeMobile?.();
|
|
70
72
|
return;
|
|
71
73
|
}
|
|
72
74
|
}
|
|
73
|
-
t
|
|
74
|
-
},
|
|
75
|
+
(!t || o.value) && g.value !== t && (g.value = t, n("mobile-menu-change", { open: t }));
|
|
76
|
+
}, G = () => W(!1), K = () => W(!0), q = () => {
|
|
75
77
|
if (!o.value) {
|
|
76
|
-
let e = s.value ??
|
|
78
|
+
let e = s.value ?? H();
|
|
77
79
|
if (e) {
|
|
78
80
|
typeof e.toggleMobile == "function" ? e.toggleMobile() : typeof e.openMobile == "function" && typeof e.closeMobile == "function" && (e.hasAttribute("data-mobile-open") ? e.closeMobile() : e.openMobile());
|
|
79
81
|
return;
|
|
80
82
|
}
|
|
81
83
|
}
|
|
82
|
-
|
|
83
|
-
},
|
|
84
|
-
let
|
|
85
|
-
p.value =
|
|
86
|
-
},
|
|
87
|
-
|
|
88
|
-
},
|
|
84
|
+
W(!g.value);
|
|
85
|
+
}, J = () => {
|
|
86
|
+
let t = (s.value && !o.value ? l.value : !1) || R.value || !!e["container-breakpoints"].value && z.value;
|
|
87
|
+
p.value = t, t || G();
|
|
88
|
+
}, Y = (e) => e ? e.scrollTop || 0 : window.scrollY || document.documentElement.scrollTop || 0, X = (e) => {
|
|
89
|
+
L.value = Y(e);
|
|
90
|
+
}, Z = (t = null) => {
|
|
89
91
|
if (!(e.floating.value && e.sticky.value)) {
|
|
90
|
-
|
|
92
|
+
I.value &&= !1;
|
|
91
93
|
return;
|
|
92
94
|
}
|
|
93
|
-
let n = Math.max(0, Number(e["scroll-threshold"].value) || 0), r =
|
|
94
|
-
|
|
95
|
+
let n = Math.max(0, Number(e["scroll-threshold"].value) || 0), r = Y(t) - L.value;
|
|
96
|
+
I.value = r > n;
|
|
95
97
|
};
|
|
96
98
|
return c({ attr: {
|
|
97
99
|
"data-mobile": () => p.value ? !0 : void 0,
|
|
98
100
|
"data-mobile-open": () => p.value && g.value ? !0 : void 0,
|
|
99
|
-
"data-mode": () =>
|
|
100
|
-
"data-mode-transitioning": () =>
|
|
101
|
-
"data-preview-mode": () =>
|
|
102
|
-
"data-scrolled": () => e.floating.value && e.sticky.value &&
|
|
101
|
+
"data-mode": () => U() ?? null,
|
|
102
|
+
"data-mode-transitioning": () => F.value ? !0 : void 0,
|
|
103
|
+
"data-preview-mode": () => V.value ? !0 : void 0,
|
|
104
|
+
"data-scrolled": () => e.floating.value && e.sticky.value && I.value ? !0 : void 0
|
|
103
105
|
} }), h(() => {
|
|
104
|
-
let n = t, r =
|
|
105
|
-
n.closeMobileMenu =
|
|
106
|
-
let i =
|
|
107
|
-
|
|
108
|
-
}, { passive: !0 }), c = r ?
|
|
109
|
-
|
|
110
|
-
}, { passive: !0 }) : void 0, d =
|
|
111
|
-
e.key
|
|
106
|
+
let n = t, r = N(t);
|
|
107
|
+
n.closeMobileMenu = G, n.openMobileMenu = K, n.toggleMobileMenu = q;
|
|
108
|
+
let i = O(window, "scroll", () => {
|
|
109
|
+
Z(r);
|
|
110
|
+
}, { passive: !0 }), c = r ? O(r, "scroll", () => {
|
|
111
|
+
Z(r);
|
|
112
|
+
}, { passive: !0 }) : void 0, d = O(t, "keydown", (e) => {
|
|
113
|
+
e.key === "Escape" && g.value && G();
|
|
112
114
|
}), f, p, h, _, v = () => {
|
|
113
115
|
if (p?.(), p = void 0, s.value = null, l.value = !1, u.value = !1, !String(e["mobile-sidebar"].value ?? "").trim()) return;
|
|
114
|
-
let n =
|
|
116
|
+
let n = H();
|
|
115
117
|
if (!n) {
|
|
116
118
|
let e = t.getRootNode(), n = e instanceof Document || e instanceof ShadowRoot ? e : document, r = new MutationObserver(() => {
|
|
117
|
-
|
|
119
|
+
H() && v();
|
|
118
120
|
});
|
|
119
121
|
r.observe(n, {
|
|
120
122
|
childList: !0,
|
|
@@ -124,7 +126,7 @@ u(P, {
|
|
|
124
126
|
}
|
|
125
127
|
let r = (e) => {
|
|
126
128
|
let t = n.hasAttribute("data-bottom-nav"), r = n.hasAttribute("data-mobile-open");
|
|
127
|
-
l.value = t, u.value = e?.detail ? e.detail.open : r, u.value && !l.value && (l.value = !0),
|
|
129
|
+
l.value = t, u.value = e?.detail ? e.detail.open : r, u.value && !l.value && (l.value = !0), J();
|
|
128
130
|
}, i = new MutationObserver(() => {
|
|
129
131
|
r();
|
|
130
132
|
});
|
|
@@ -135,72 +137,74 @@ u(P, {
|
|
|
135
137
|
i.disconnect(), n.removeEventListener("mobile-open-change", r);
|
|
136
138
|
}, s.value = n;
|
|
137
139
|
}, y = () => {
|
|
138
|
-
|
|
139
|
-
|
|
140
|
+
F.value = !0, h != null && clearTimeout(h), h = setTimeout(() => {
|
|
141
|
+
F.value = !1, h = void 0;
|
|
140
142
|
}, 220);
|
|
141
|
-
},
|
|
143
|
+
}, S = w(b(() => e.floating.value && e.sticky.value), (e) => {
|
|
142
144
|
if (!e) {
|
|
143
|
-
|
|
145
|
+
I.value &&= !1, F.value &&= !1, _ = void 0, h != null && (clearTimeout(h), h = void 0);
|
|
144
146
|
return;
|
|
145
147
|
}
|
|
146
|
-
|
|
147
|
-
}, { immediate: !0 }),
|
|
148
|
+
X(r), Z(r), _ = U();
|
|
149
|
+
}, { immediate: !0 }), P = w(e["mobile-sidebar"], () => {
|
|
148
150
|
v();
|
|
149
|
-
}, { immediate: !0 }),
|
|
151
|
+
}, { immediate: !0 }), L = w(b(() => U()), (t) => {
|
|
150
152
|
if (!(e.floating.value && e.sticky.value)) {
|
|
151
153
|
_ = t ?? void 0;
|
|
152
154
|
return;
|
|
153
155
|
}
|
|
154
156
|
let n = t ?? void 0;
|
|
155
157
|
_ && n && _ !== n && y(), _ = n;
|
|
156
|
-
}, { immediate: !0 }),
|
|
157
|
-
!e && g.value &&
|
|
158
|
-
}, { immediate: !0 }),
|
|
159
|
-
o.value = a.value.some(
|
|
160
|
-
},
|
|
161
|
-
|
|
158
|
+
}, { immediate: !0 }), W = w(o, (e) => {
|
|
159
|
+
!e && g.value && G();
|
|
160
|
+
}, { immediate: !0 }), Y = () => {
|
|
161
|
+
o.value = a.value.some(k);
|
|
162
|
+
}, Q = w(a, Y, { immediate: !0 }), $ = new MutationObserver(() => {
|
|
163
|
+
Y();
|
|
162
164
|
});
|
|
163
|
-
|
|
165
|
+
$.observe(t, {
|
|
164
166
|
childList: !0,
|
|
165
167
|
subtree: !0
|
|
166
|
-
}),
|
|
167
|
-
|
|
168
|
+
}), w(e.breakpoint, (n) => {
|
|
169
|
+
C(() => {
|
|
168
170
|
f?.(), f = void 0;
|
|
169
171
|
let r = String(n ?? "").trim();
|
|
170
|
-
|
|
171
|
-
let i =
|
|
172
|
-
if (
|
|
173
|
-
let e =
|
|
174
|
-
e && (
|
|
172
|
+
B.value = A(r), R.value = !1;
|
|
173
|
+
let i = M(t);
|
|
174
|
+
if (z.value = i > 0 && B.value != null && i <= B.value, J(), !(e["container-breakpoints"].value && B.value != null) && r) try {
|
|
175
|
+
let e = D(r), t = (e) => {
|
|
176
|
+
e && (R.value = e.matches, J());
|
|
175
177
|
};
|
|
176
|
-
t(e.
|
|
177
|
-
let n =
|
|
178
|
+
t(e.getSnapshot());
|
|
179
|
+
let n = w(x(e, { signal: e.disposalSignal }), t);
|
|
178
180
|
f = () => {
|
|
179
181
|
n.dispose(), e.dispose();
|
|
180
182
|
};
|
|
181
183
|
} catch (e) {
|
|
182
|
-
if (!(e instanceof
|
|
184
|
+
if (!(e instanceof T)) throw e;
|
|
183
185
|
}
|
|
184
186
|
});
|
|
185
187
|
}, { immediate: !0 });
|
|
186
|
-
let
|
|
187
|
-
let e =
|
|
188
|
+
let ee = typeof ResizeObserver == "function" ? (() => {
|
|
189
|
+
let e = E(t);
|
|
188
190
|
m(() => e.dispose());
|
|
189
|
-
let n = t.parentElement,
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
191
|
+
let n = x(e, { signal: e.disposalSignal }), r = t.parentElement, i = j(t), a = r ? E(r) : void 0, o = i && i !== r ? E(i) : void 0;
|
|
192
|
+
a && m(() => a.dispose()), o && m(() => o.dispose());
|
|
193
|
+
let s = a ? x(a, { signal: a.disposalSignal }) : void 0, c = o ? x(o, { signal: o.disposalSignal }) : void 0;
|
|
194
|
+
return w(b(() => [
|
|
195
|
+
n.value?.width,
|
|
196
|
+
n.value?.height,
|
|
197
|
+
s?.value?.width,
|
|
198
|
+
s?.value?.height,
|
|
199
|
+
c?.value?.width,
|
|
200
|
+
c?.value?.height
|
|
197
201
|
]), () => {
|
|
198
|
-
let e =
|
|
199
|
-
|
|
202
|
+
let e = M(t), n = j(t)?.clientWidth ?? 0;
|
|
203
|
+
z.value = e > 0 && B.value != null && e <= B.value, V.value = n > 0 && n < window.innerWidth, J();
|
|
200
204
|
});
|
|
201
205
|
})() : void 0;
|
|
202
206
|
return () => {
|
|
203
|
-
d?.(), i?.(), c?.(),
|
|
207
|
+
d?.(), i?.(), c?.(), S?.dispose(), L?.dispose(), W?.dispose(), Q?.dispose(), P?.dispose(), $.disconnect(), f?.(), p?.(), ee?.dispose(), h != null && (clearTimeout(h), h = void 0);
|
|
204
208
|
};
|
|
205
209
|
}), f`
|
|
206
210
|
<nav part="nav" aria-label="${e.label}">
|
|
@@ -225,11 +229,11 @@ u(P, {
|
|
|
225
229
|
class="mobile-toggle"
|
|
226
230
|
part="mobile-toggle"
|
|
227
231
|
type="button"
|
|
228
|
-
aria-label="${() => o.value ? g.value
|
|
232
|
+
aria-label="${() => (o.value ? g.value : u.value) ? e["menu-close-label"].value : e["menu-open-label"].value}"
|
|
229
233
|
aria-controls="mobile-menu-panel"
|
|
230
234
|
aria-expanded="${() => String(o.value ? g.value : u.value)}"
|
|
231
235
|
?hidden=${() => !p.value || !o.value && !s.value}
|
|
232
|
-
@click="${
|
|
236
|
+
@click="${q}">
|
|
233
237
|
<ore-icon
|
|
234
238
|
name="${() => (o.value ? g.value : u.value) ? "x" : "menu"}"
|
|
235
239
|
size="18"
|
|
@@ -260,8 +264,8 @@ u(P, {
|
|
|
260
264
|
s
|
|
261
265
|
]
|
|
262
266
|
});
|
|
263
|
-
var
|
|
264
|
-
u(
|
|
267
|
+
var I = "ore-navbar-item";
|
|
268
|
+
u(I, {
|
|
265
269
|
props: {
|
|
266
270
|
active: g.bool(!1),
|
|
267
271
|
disabled: g.bool(!1),
|
|
@@ -271,7 +275,7 @@ u(F, {
|
|
|
271
275
|
target: g.string()
|
|
272
276
|
},
|
|
273
277
|
setup(e) {
|
|
274
|
-
let t = y(), n = () => t.has("icon").value, r = () => t.has("end").value, i = p(
|
|
278
|
+
let t = y(), n = () => t.has("icon").value, r = () => t.has("end").value, i = p(P);
|
|
275
279
|
c({ attr: {
|
|
276
280
|
"navbar-mobile": () => i?.isMobile.value ? !0 : void 0,
|
|
277
281
|
"navbar-mobile-open": () => i?.mobileMenuOpen.value ? !0 : void 0
|
|
@@ -309,6 +313,6 @@ u(F, {
|
|
|
309
313
|
styles: [e, s]
|
|
310
314
|
});
|
|
311
315
|
//#endregion
|
|
312
|
-
export {
|
|
316
|
+
export { P as NAVBAR_CTX, I as NAVBAR_ITEM_TAG, F as NAVBAR_TAG };
|
|
313
317
|
|
|
314
318
|
//# sourceMappingURL=navbar.js.map
|
package/dist/navbar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navbar.js","names":[],"sources":["../src/layout/navbar/navbar.ts"],"sourcesContent":["import {\n bind,\n createContext,\n define,\n getHost,\n html,\n inject,\n onCleanup,\n onMounted,\n prop,\n provide,\n useEmit,\n useSlots,\n} from '@vielzeug/ore';\nimport { computed, type Readable, signal, untrack, watch } from '@vielzeug/ripple';\nimport { createElementSize, createMediaQuery, SentinelUnavailableError } from '@vielzeug/sentinel';\n\nimport type { ElevationLevel, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport {\n coarsePointerMixin,\n colorThemeMixin,\n elevationMixin,\n frostVariantMixin,\n reducedMotionMixin,\n roundedVariantMixin,\n} from '../../styles';\nimport { computeSafeRel } from '../../utils';\nimport navbarStyles from './navbar.css?inline';\n\nconst listen = <E extends Event = Event>(\n el: EventTarget | null | undefined,\n name: string,\n handler: (e: E) => void,\n options?: AddEventListenerOptions,\n): (() => void) => {\n if (!el) return () => {};\n\n el.addEventListener(name, handler as EventListener, options);\n\n return () => el.removeEventListener(name, handler as EventListener, options);\n};\n\ntype NavbarMode = 'floating' | 'sticky';\n\nconst hasElementContent = (el: Element): boolean => {\n if (!(el instanceof HTMLElement)) return true;\n\n if (el.tagName.includes('-')) return true;\n\n if (el.childElementCount > 0) return true;\n\n return (el.textContent ?? '').trim().length > 0;\n};\n\nconst parseMaxWidthPx = (query: string | undefined): number | undefined => {\n const value = String(query ?? '').trim();\n\n if (!value) return undefined;\n\n const match = /max-width\\s*:\\s*([0-9]+(?:\\.[0-9]+)?)px/i.exec(value);\n\n if (!match) return undefined;\n\n const parsed = Number.parseFloat(match[1]);\n\n return Number.isFinite(parsed) ? parsed : undefined;\n};\n\nconst resolveContainerElement = (el: HTMLElement): HTMLElement | null => {\n let container = el.parentElement;\n\n while (container?.tagName.toLowerCase() === 'ore-grid-item') {\n container = container.parentElement;\n }\n\n return container;\n};\n\nconst readContainerWidth = (el: HTMLElement): number => {\n const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n if (parentWidth > 0) return parentWidth;\n\n return el.offsetWidth;\n};\n\nconst findScrollContainer = (start: HTMLElement): HTMLElement | null => {\n let current: HTMLElement | null = start.parentElement;\n\n while (current) {\n const styles = window.getComputedStyle(current);\n const overflowY = styles.overflowY;\n\n if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {\n return current;\n }\n\n current = current.parentElement;\n }\n\n return null;\n};\n\n/** Context provided by `ore-navbar` to `ore-navbar-item` children. */\nexport type NavbarContext = {\n closeMobileMenu: () => void;\n isMobile: Readable<boolean>;\n mobileMenuOpen: Readable<boolean>;\n};\n\n/** Injection key for navbar context. */\nexport const NAVBAR_CTX = createContext<NavbarContext>('NavbarContext');\n\n/** Navbar component events */\nexport type OreNavbarEvents = {\n 'mobile-menu-change': { open: boolean };\n};\n\n/** Navbar component element interface */\nexport type NavbarElement = HTMLElement &\n OreNavbarProps & {\n closeMobileMenu(): void;\n openMobileMenu(): void;\n toggleMobileMenu(): void;\n };\n\ntype MobileSidebarElement = HTMLElement & {\n closeMobile?: () => void;\n openMobile?: () => void;\n toggleMobile?: () => void;\n};\n\n/** Navbar component properties */\nexport type OreNavbarProps = {\n /** CSS media query used for mobile layout switching */\n breakpoint?: string;\n /** Theme color */\n color?: ThemeColor;\n /** Evaluate mobile breakpoint against container width only when possible. */\n 'container-breakpoints'?: boolean;\n /** Shadow elevation level (0-5) */\n elevation?: ElevationLevel;\n /** Start as detached floating navbar */\n floating?: boolean;\n /** Accessible nav landmark label */\n label?: string;\n /** CSS selector for an external sidebar toggled by the mobile button */\n 'mobile-sidebar'?: string;\n /** Border radius size */\n rounded?: RoundedSize;\n /** Scroll threshold in px used by floating+sticky transition */\n 'scroll-threshold'?: number;\n /** Stick to top of viewport */\n sticky?: boolean;\n /** Visual style variant */\n variant?: Exclude<VisualVariant, 'ghost' | 'text'>;\n};\n\n/** Navbar item properties */\nexport type OreNavbarItemProps = {\n /** Whether this item represents the current page */\n active?: boolean;\n /** Whether this item is disabled */\n disabled?: boolean;\n /** Link target URL. Renders an anchor when provided. */\n href?: string;\n /**\n * Icon-only mode — hides the (empty) label region and switches to compact, symmetric\n * padding instead of the icon+label layout's wider horizontal padding. Set this whenever\n * the default slot is intentionally left empty (name conveyed via `aria-label` instead),\n * otherwise the empty label still reserves its inter-element gap and the item ends up\n * with lopsided padding around the icon.\n */\n 'icon-only'?: boolean;\n /** Relationship of linked URL (anchor-only) */\n rel?: string;\n /** Browsing context for link (anchor-only) */\n target?: string;\n};\n\n/**\n * `ore-navbar` — Responsive navigation with sticky/floating modes and a mobile overflow panel.\n *\n * @element ore-navbar\n * @element ore-navbar-item - Navigation link or button placed in the default or mobile-menu slot\n *\n * @attr {string} label - Accessible nav landmark label\n * @attr {boolean} sticky - Makes navbar sticky at top\n * @attr {boolean} floating - Makes navbar detached and floating\n * @attr {number} scroll-threshold - Scroll threshold for floating+sticky transition\n * @attr {string} breakpoint - CSS media query used for mobile mode\n * @attr {boolean} container-breakpoints - Evaluates parseable max-width breakpoints against container width\n * @attr {string} variant - Visual variant: 'flat' | 'solid' | 'bordered' | 'outline' | 'frost' | 'glass'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n *\n * @fires mobile-menu-change - Emitted when mobile menu open state changes. detail: { open: boolean }\n *\n * @slot logo - Brand/logo content rendered at the leading edge\n * @slot start - Content rendered in the left/start region\n * @slot - Center navigation content rendered between the start and end regions\n * @slot end - Content rendered in the right/end region\n * @slot mobile-menu - Controls and links rendered inside the mobile overflow panel\n *\n * @cssprop --navbar-height - Navbar bar height\n * @cssprop --navbar-width - Max width of the navbar content\n * @cssprop --navbar-offset - Horizontal offset for floating/sticky positioning\n * @cssprop --navbar-bg - Navbar background color\n * @cssprop --navbar-color - Navbar text color\n * @cssprop --navbar-border-color - Navbar border color\n * @cssprop --navbar-shadow - Navbar box shadow\n * @cssprop --navbar-radius - Border radius (floating/sticky modes)\n * @cssprop --navbar-backdrop-filter - Backdrop filter for blur effect\n * @cssprop --navbar-item-color - Nav item text color\n * @cssprop --navbar-item-hover-color - Nav item hover text color\n * @cssprop --navbar-item-hover-bg - Nav item hover background\n * @cssprop --navbar-item-active-color - Nav item active/current text color\n * @cssprop --navbar-item-active-bg - Nav item active/current background\n * @part nav - Outer navigation landmark\n * @part bar - Main navbar row container\n * @part logo - Logo slot container\n * @part start - Leading action/content region\n * @part center - Center content region\n * @part end - Trailing action/content region\n * @part mobile-toggle - Mobile menu toggle button\n * @part mobile-menu - Mobile overflow panel\n * @part item-icon - Leading icon inside navbar items\n * @part item-label - Label text inside navbar items\n * @part item-end - Trailing content inside navbar items\n * @part item - Clickable navbar item root\n * @example\n * ```html\n * <ore-navbar sticky elevation=\"1\">\n * <a href=\"/\" slot=\"logo\"><strong>MyApp</strong></a>\n * <ore-navbar-item href=\"/dashboard\">Dashboard</ore-navbar-item>\n * <ore-navbar-item href=\"/docs\">Docs</ore-navbar-item>\n * <ore-button slot=\"end\" variant=\"solid\" color=\"primary\" size=\"sm\">Sign in</ore-button>\n * </ore-navbar>\n * ```\n */\nexport const NAVBAR_TAG = 'ore-navbar' as const;\ndefine<OreNavbarProps>(NAVBAR_TAG, {\n props: {\n breakpoint: prop.string('(max-width: 768px)'),\n color: prop.string<ThemeColor>(),\n 'container-breakpoints': prop.bool(false),\n elevation: prop.number<ElevationLevel>(),\n floating: prop.bool(false),\n label: prop.string('Main navigation'),\n 'mobile-sidebar': prop.string(),\n rounded: prop.string<RoundedSize>(),\n 'scroll-threshold': prop.number(80),\n sticky: prop.bool(false),\n variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'frost'>(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreNavbarEvents>();\n const slots = useSlots();\n\n const hasLogo = slots.has('logo');\n const mobileMenuElements = slots.elements('mobile-menu');\n const hasMobileMenu = signal(false);\n const mobileSidebarTarget = signal<MobileSidebarElement | null>(null);\n const isExternalMobileMode = signal(false);\n const isExternalMobileOpen = signal(false);\n const isMobile = signal(false);\n const isMobileMenuOpen = signal(false);\n const isModeTransitioning = signal(false);\n const isScrolled = signal(false);\n const scrollBase = signal(0);\n const mediaMatches = signal(false);\n const sizeMatches = signal(false);\n const maxWidthPx = signal<number | undefined>(parseMaxWidthPx(props.breakpoint.value));\n const isPreviewMode = signal(false);\n\n const getExternalSidebar = () => {\n const selector = String(props['mobile-sidebar'].value ?? '').trim();\n\n if (!selector) return null;\n\n const root = el.getRootNode();\n const scopedTarget =\n root instanceof ShadowRoot || root instanceof Document\n ? (root.querySelector(selector) as MobileSidebarElement | null)\n : null;\n\n return scopedTarget ?? (document.querySelector(selector) as MobileSidebarElement | null);\n };\n\n provide(NAVBAR_CTX, {\n // Wrapped, not passed directly — `closeMobileMenu` (below) isn't defined yet at this point\n // in `setup()`; by the time `ore-navbar-item` actually calls this (a later click), it is.\n closeMobileMenu: () => closeMobileMenu(),\n isMobile: computed(() => isMobile.value) as Readable<boolean>,\n mobileMenuOpen: computed(() => isMobileMenuOpen.value) as Readable<boolean>,\n });\n\n const computeMode = (): NavbarMode | undefined => {\n if (props.floating.value && props.sticky.value) {\n return isScrolled.value ? 'sticky' : 'floating';\n }\n\n if (props.floating.value) return 'floating';\n\n if (props.sticky.value) return 'sticky';\n\n return undefined;\n };\n\n const setMobileMenu = (next: boolean) => {\n const open = Boolean(next);\n\n if (!hasMobileMenu.value) {\n const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n if (target) {\n if (open) {\n target.openMobile?.();\n } else {\n target.closeMobile?.();\n }\n\n return;\n }\n }\n\n if (open && !hasMobileMenu.value) return;\n\n if (isMobileMenuOpen.value === open) return;\n\n isMobileMenuOpen.value = open;\n emit('mobile-menu-change', { open });\n };\n\n const closeMobileMenu = () => setMobileMenu(false);\n const openMobileMenu = () => setMobileMenu(true);\n const toggleMobileMenu = () => {\n if (!hasMobileMenu.value) {\n const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n if (target) {\n if (typeof target.toggleMobile === 'function') {\n target.toggleMobile();\n } else if (typeof target.openMobile === 'function' && typeof target.closeMobile === 'function') {\n const isOpen = target.hasAttribute('data-mobile-open');\n\n if (isOpen) target.closeMobile();\n else target.openMobile();\n }\n\n return;\n }\n }\n\n setMobileMenu(!isMobileMenuOpen.value);\n };\n\n const syncMobileMode = () => {\n const next =\n (mobileSidebarTarget.value && !hasMobileMenu.value ? isExternalMobileMode.value : false) ||\n mediaMatches.value ||\n sizeMatches.value;\n\n isMobile.value = next;\n\n if (!next) closeMobileMenu();\n };\n\n const readScrollOffset = (scrollContainer: HTMLElement | null): number => {\n if (scrollContainer) {\n return scrollContainer.scrollTop || 0;\n }\n\n return window.scrollY || document.documentElement.scrollTop || 0;\n };\n\n const resetScrollBase = (scrollContainer: HTMLElement | null) => {\n scrollBase.value = readScrollOffset(scrollContainer);\n };\n\n const updateScrolled = (scrollContainer: HTMLElement | null = null) => {\n if (!(props.floating.value && props.sticky.value)) {\n if (isScrolled.value) isScrolled.value = false;\n\n return;\n }\n\n const threshold = Math.max(0, Number(props['scroll-threshold'].value) || 0);\n const currentOffset = readScrollOffset(scrollContainer);\n const delta = currentOffset - scrollBase.value;\n\n isScrolled.value = delta > threshold;\n };\n\n bind({\n attr: {\n 'data-mobile': () => (isMobile.value ? true : undefined),\n 'data-mobile-open': () => (isMobile.value && isMobileMenuOpen.value ? true : undefined),\n 'data-mode': () => computeMode() ?? null,\n 'data-mode-transitioning': () => (isModeTransitioning.value ? true : undefined),\n 'data-preview-mode': () => (isPreviewMode.value ? true : undefined),\n 'data-scrolled': () => (props.floating.value && props.sticky.value && isScrolled.value ? true : undefined),\n },\n });\n\n onMounted(() => {\n const navbarEl = el as NavbarElement;\n const scrollContainer = findScrollContainer(el);\n\n navbarEl.closeMobileMenu = closeMobileMenu;\n navbarEl.openMobileMenu = openMobileMenu;\n navbarEl.toggleMobileMenu = toggleMobileMenu;\n\n const stopScroll = listen(\n window,\n 'scroll',\n () => {\n updateScrolled(scrollContainer);\n },\n { passive: true },\n );\n const stopContainerScroll = scrollContainer\n ? listen(\n scrollContainer,\n 'scroll',\n () => {\n updateScrolled(scrollContainer);\n },\n { passive: true },\n )\n : undefined;\n const stopEscape = listen(el, 'keydown', (event: KeyboardEvent) => {\n if (event.key !== 'Escape' || !isMobileMenuOpen.value) return;\n\n closeMobileMenu();\n });\n\n let mediaCleanup: (() => void) | undefined;\n let mobileSidebarCleanup: (() => void) | undefined;\n let modeTransitionTimeout: ReturnType<typeof setTimeout> | undefined;\n let previousMode: NavbarMode | undefined;\n\n const resolveMobileSidebarTarget = () => {\n mobileSidebarCleanup?.();\n mobileSidebarCleanup = undefined;\n mobileSidebarTarget.value = null;\n isExternalMobileMode.value = false;\n isExternalMobileOpen.value = false;\n\n if (!String(props['mobile-sidebar'].value ?? '').trim()) return;\n\n const target = getExternalSidebar();\n\n if (!target) {\n const root = el.getRootNode();\n const discoveryRoot = root instanceof Document || root instanceof ShadowRoot ? root : document;\n const discoveryObserver = new MutationObserver(() => {\n if (getExternalSidebar()) resolveMobileSidebarTarget();\n });\n\n discoveryObserver.observe(discoveryRoot, { childList: true, subtree: true });\n mobileSidebarCleanup = () => discoveryObserver.disconnect();\n\n return;\n }\n\n const syncTargetState = (event?: CustomEvent<{ open: boolean }>) => {\n const hasBottomNav = target.hasAttribute('data-bottom-nav');\n const hasMobileOpen = target.hasAttribute('data-mobile-open');\n\n isExternalMobileMode.value = hasBottomNav;\n isExternalMobileOpen.value = event?.detail ? event.detail.open : hasMobileOpen;\n\n // If the sidebar is reporting it's open, it must be in bottom-nav mode\n // (either natural or forced). We honor this to avoid race conditions\n // where attributes haven't reflected yet.\n if (isExternalMobileOpen.value && !isExternalMobileMode.value) {\n isExternalMobileMode.value = true;\n }\n\n syncMobileMode();\n };\n\n const targetObserver = new MutationObserver(() => {\n syncTargetState();\n });\n\n syncTargetState();\n targetObserver.observe(target, {\n attributeFilter: ['data-bottom-nav', 'data-mobile-open'],\n attributes: true,\n });\n target.addEventListener('mobile-open-change', syncTargetState as EventListener);\n mobileSidebarCleanup = () => {\n targetObserver.disconnect();\n target.removeEventListener('mobile-open-change', syncTargetState as EventListener);\n };\n mobileSidebarTarget.value = target;\n };\n\n const triggerModeTransition = () => {\n isModeTransitioning.value = true;\n\n if (modeTransitionTimeout != null) clearTimeout(modeTransitionTimeout);\n\n modeTransitionTimeout = setTimeout(() => {\n isModeTransitioning.value = false;\n modeTransitionTimeout = undefined;\n }, 220);\n };\n\n const stopModeWatch = watch(\n computed(() => props.floating.value && props.sticky.value),\n (enabled) => {\n if (!enabled) {\n if (isScrolled.value) isScrolled.value = false;\n\n if (isModeTransitioning.value) isModeTransitioning.value = false;\n\n previousMode = undefined;\n\n if (modeTransitionTimeout != null) {\n clearTimeout(modeTransitionTimeout);\n modeTransitionTimeout = undefined;\n }\n\n return;\n }\n\n resetScrollBase(scrollContainer);\n updateScrolled(scrollContainer);\n\n const currentMode = computeMode();\n\n previousMode = currentMode;\n },\n { immediate: true },\n );\n\n const stopMobileSidebarWatch = watch(\n props['mobile-sidebar'],\n () => {\n resolveMobileSidebarTarget();\n },\n { immediate: true },\n );\n\n const stopModeTransitionWatch = watch(\n computed(() => computeMode()),\n (nextMode) => {\n const comboEnabled = props.floating.value && props.sticky.value;\n\n if (!comboEnabled) {\n previousMode = nextMode ?? undefined;\n\n return;\n }\n\n const next = nextMode ?? undefined;\n\n if (previousMode && next && previousMode !== next) {\n triggerModeTransition();\n }\n\n previousMode = next;\n },\n { immediate: true },\n );\n\n const stopMobileMenuSlotWatch = watch(\n hasMobileMenu,\n (hasContent) => {\n if (!hasContent && isMobileMenuOpen.value) {\n closeMobileMenu();\n }\n },\n { immediate: true },\n );\n const syncMobileMenuContent = () => {\n hasMobileMenu.value = mobileMenuElements.value.some(hasElementContent);\n };\n const stopMobileMenuElementsWatch = watch(mobileMenuElements, syncMobileMenuContent, { immediate: true });\n const mobileMenuContentObserver = new MutationObserver(() => {\n syncMobileMenuContent();\n });\n\n // Parser-created demo content can populate an already-assigned slot wrapper after this\n // custom element connects; `slotchange` alone does not observe that nested content.\n mobileMenuContentObserver.observe(el, { childList: true, subtree: true });\n\n watch(\n props.breakpoint,\n (query) => {\n // Untrack the callback body: the watch already tracks `props.breakpoint` via\n // its internal `read()`. Without untrack, signals read inside (e.g.\n // `mediaMatches` via `syncMobileMode()`) become dependencies of this watch\n // effect. When the sentinel updates `mediaMatches` on a viewport change, the\n // effect re-runs — `EffectNode.run()` disposes the previous scope (killing the\n // mediaHandle and its MediaQueryList listener) but the callback is NOT invoked\n // (source unchanged), so no new handle is created. The navbar is then deaf to\n // further MQ changes and stays stuck in mobile mode after resizing back to\n // desktop.\n untrack(() => {\n mediaCleanup?.();\n mediaCleanup = undefined;\n\n const mediaQuery = String(query ?? '').trim();\n\n maxWidthPx.value = parseMaxWidthPx(mediaQuery);\n mediaMatches.value = false;\n\n const width = readContainerWidth(el);\n\n sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n syncMobileMode();\n\n if (props['container-breakpoints'].value && maxWidthPx.value != null) {\n return;\n }\n\n if (!mediaQuery) {\n return;\n }\n\n try {\n const mediaHandle = createMediaQuery(mediaQuery);\n const syncMedia = (state: typeof mediaHandle.value) => {\n if (state) {\n mediaMatches.value = state.matches;\n syncMobileMode();\n }\n };\n\n syncMedia(mediaHandle.value);\n\n const mediaCleanupFn = watch(mediaHandle, syncMedia);\n mediaCleanup = () => {\n mediaCleanupFn.dispose();\n mediaHandle.dispose();\n };\n } catch (error) {\n if (!(error instanceof SentinelUnavailableError)) throw error;\n }\n });\n },\n { immediate: true },\n );\n\n const stopResizeEffect =\n typeof ResizeObserver === 'function'\n ? (() => {\n const hostSize = createElementSize(el);\n onCleanup(() => hostSize.dispose());\n\n const wrapperEl = el.parentElement;\n const containerEl = resolveContainerElement(el);\n const wrapperSize = wrapperEl ? createElementSize(wrapperEl) : undefined;\n const parentSize = containerEl && containerEl !== wrapperEl ? createElementSize(containerEl) : undefined;\n\n if (wrapperSize) {\n onCleanup(() => wrapperSize.dispose());\n }\n if (parentSize) {\n onCleanup(() => parentSize.dispose());\n }\n\n return watch(\n computed(() => [\n hostSize.value?.width,\n hostSize.value?.height,\n wrapperSize?.value?.width,\n wrapperSize?.value?.height,\n parentSize?.value?.width,\n parentSize?.value?.height,\n ]),\n () => {\n const width = readContainerWidth(el);\n const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n isPreviewMode.value = parentWidth > 0 && parentWidth < window.innerWidth;\n syncMobileMode();\n },\n );\n })()\n : undefined;\n\n return () => {\n stopEscape?.();\n stopScroll?.();\n stopContainerScroll?.();\n stopModeWatch?.dispose();\n stopModeTransitionWatch?.dispose();\n stopMobileMenuSlotWatch?.dispose();\n stopMobileMenuElementsWatch?.dispose();\n stopMobileSidebarWatch?.dispose();\n mobileMenuContentObserver.disconnect();\n mediaCleanup?.();\n mobileSidebarCleanup?.();\n stopResizeEffect?.dispose();\n\n if (modeTransitionTimeout != null) {\n clearTimeout(modeTransitionTimeout);\n modeTransitionTimeout = undefined;\n }\n };\n });\n\n return html`\n <nav part=\"nav\" aria-label=\"${props.label}\">\n <div class=\"navbar\" part=\"bar\">\n <div class=\"navbar-logo\" part=\"logo\" ?hidden=${() => !hasLogo.value}>\n <slot name=\"logo\"></slot>\n </div>\n\n <div class=\"navbar-start\" part=\"start\">\n <slot name=\"start\"></slot>\n </div>\n\n <div class=\"navbar-center\" part=\"center\">\n <slot></slot>\n </div>\n\n <div class=\"navbar-end\" part=\"end\">\n <slot name=\"end\"></slot>\n </div>\n\n <button\n class=\"mobile-toggle\"\n part=\"mobile-toggle\"\n type=\"button\"\n aria-label=\"${() =>\n hasMobileMenu.value\n ? isMobileMenuOpen.value\n ? 'Close navigation menu'\n : 'Open navigation menu'\n : isExternalMobileOpen.value\n ? 'Close navigation menu'\n : 'Open navigation menu'}\"\n aria-controls=\"mobile-menu-panel\"\n aria-expanded=\"${() => String(hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value)}\"\n ?hidden=${() => !isMobile.value || (!hasMobileMenu.value && !mobileSidebarTarget.value)}\n @click=\"${toggleMobileMenu}\">\n <ore-icon\n name=\"${() => ((hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value) ? 'x' : 'menu')}\"\n size=\"18\"\n stroke-width=\"2.5\"\n aria-hidden=\"true\"></ore-icon>\n </button>\n </div>\n\n <div\n id=\"mobile-menu-panel\"\n class=\"mobile-menu-panel\"\n part=\"mobile-menu\"\n role=\"navigation\"\n aria-label=\"${() => `${props.label.value} mobile menu`}\"\n ?hidden=${() => !isMobile.value || !isMobileMenuOpen.value || !hasMobileMenu.value}>\n <slot name=\"mobile-menu\"></slot>\n </div>\n </nav>\n `;\n },\n styles: [\n colorThemeMixin,\n elevationMixin,\n roundedVariantMixin,\n coarsePointerMixin,\n reducedMotionMixin,\n frostVariantMixin('.navbar'),\n navbarStyles,\n ],\n});\n\n/**\n * `ore-navbar-item` — Navigation item for navbar slots.\n *\n * Renders as an anchor when `href` is provided and item is not disabled.\n *\n * @element ore-navbar-item\n *\n * @attr {boolean} active - Marks item as the current active route\n * @attr {boolean} disabled - Disables interaction\n * @attr {string} href - Link URL; renders as `<a>` when set\n * @attr {boolean} icon-only - Compact, symmetric padding for items with no visible label\n * @attr {string} rel - Anchor `rel` attribute (links only)\n * @attr {string} target - Anchor `target` attribute (links only)\n *\n * @slot - Item label\n * @slot icon - Optional icon before the label\n *\n * @part item - Root clickable element (anchor or button).\n * @part item-icon - Leading icon container.\n * @part item-label - Label text container.\n * @part item-end - Trailing content container.\n *\n * @example\n * ```html\n * <ore-navbar-item href=\"/home\">Home</ore-navbar-item>\n * <ore-navbar-item href=\"/docs\" active>Docs</ore-navbar-item>\n * <ore-navbar-item href=\"/about\" target=\"_blank\" rel=\"noopener\">About</ore-navbar-item>\n * <ore-navbar-item disabled>Disabled</ore-navbar-item>\n * <ore-navbar-item icon-only aria-label=\"Search\"><ore-icon slot=\"icon\" name=\"search\"></ore-icon></ore-navbar-item>\n * ```\n */\nexport const NAVBAR_ITEM_TAG = 'ore-navbar-item' as const;\ndefine<OreNavbarItemProps>(NAVBAR_ITEM_TAG, {\n props: {\n active: prop.bool(false),\n disabled: prop.bool(false),\n href: prop.string(),\n 'icon-only': prop.bool(false),\n rel: prop.string(),\n target: prop.string(),\n },\n setup(props) {\n const slots = useSlots();\n\n const hasIcon = () => slots.has('icon').value;\n const hasEnd = () => slots.has('end').value;\n const navbarCtx = inject(NAVBAR_CTX);\n\n bind({\n attr: {\n 'navbar-mobile': () => (navbarCtx?.isMobile.value ? true : undefined),\n 'navbar-mobile-open': () => (navbarCtx?.mobileMenuOpen.value ? true : undefined),\n },\n });\n\n const isLink = () => Boolean(props.href.value) && !props.disabled.value;\n\n // Prevent reverse tabnapping: auto-inject noopener + noreferrer for _blank links.\n const effectiveRel = computed(() => computeSafeRel(props.rel.value, props.target.value));\n\n // Closes the mobile overflow panel when one of its items is activated — otherwise picking a\n // destination (or firing any other action placed in the `mobile-menu` slot) leaves the panel\n // open over the page until the user separately taps the toggle again. Only matters while\n // actually in mobile mode; on desktop `navbarCtx.mobileMenuOpen` is never true to begin with,\n // so `closeMobileMenu()` (idempotent — see `setMobileMenu`'s equality check) is a no-op there.\n const closeMobileMenuIfOpen = (): void => {\n if (navbarCtx?.mobileMenuOpen.value) navbarCtx.closeMobileMenu();\n };\n\n const renderItemContent = () => html`\n <span class=\"item-icon\" part=\"item-icon\" ?hidden=${() => !hasIcon()} aria-hidden=\"true\">\n <slot name=\"icon\"></slot>\n </span>\n <span class=\"item-label\" part=\"item-label\"><slot></slot></span>\n <span class=\"item-end\" part=\"item-end\" ?hidden=${() => !hasEnd()}>\n <slot name=\"end\"></slot>\n </span>\n `;\n\n return html`\n ${() => {\n if (isLink()) {\n return html`\n <a\n class=\"item\"\n part=\"item\"\n href=\"${props.href}\"\n rel=\"${effectiveRel}\"\n target=\"${props.target}\"\n aria-current=\"${() => (props.active.value ? 'page' : null)}\"\n @click=${closeMobileMenuIfOpen}>\n ${renderItemContent()}\n </a>\n `;\n }\n\n if (props.disabled.value) {\n return html`\n <div class=\"item\" part=\"item\" tabindex=\"-1\" aria-disabled=\"true\">${renderItemContent()}</div>\n `;\n }\n\n return html`\n <button class=\"item\" part=\"item\" type=\"button\" @click=${closeMobileMenuIfOpen}>${renderItemContent()}</button>\n `;\n }}\n `;\n },\n styles: [coarsePointerMixin, navbarStyles],\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"navbar.js","names":[],"sources":["../src/layout/navbar/navbar.ts"],"sourcesContent":["import {\n bind,\n createContext,\n define,\n getHost,\n html,\n inject,\n onCleanup,\n onMounted,\n prop,\n provide,\n useEmit,\n useSlots,\n} from '@vielzeug/ore';\nimport { computed, fromSubscribable, type Readable, signal, untrack, watch } from '@vielzeug/ripple';\nimport { createElementSize, createMediaQuery, SentinelUnavailableError } from '@vielzeug/sentinel';\n\nimport type { ElevationLevel, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport {\n coarsePointerMixin,\n colorThemeMixin,\n elevationMixin,\n frostVariantMixin,\n reducedMotionMixin,\n roundedVariantMixin,\n} from '../../styles';\nimport { computeSafeRel } from '../../utils';\nimport navbarStyles from './navbar.css?inline';\n\nconst listen = <E extends Event = Event>(\n el: EventTarget | null | undefined,\n name: string,\n handler: (e: E) => void,\n options?: AddEventListenerOptions,\n): (() => void) => {\n if (!el) return () => {};\n\n el.addEventListener(name, handler as EventListener, options);\n\n return () => el.removeEventListener(name, handler as EventListener, options);\n};\n\ntype NavbarMode = 'floating' | 'sticky';\n\nconst hasElementContent = (el: Element): boolean => {\n if (!(el instanceof HTMLElement)) return true;\n\n if (el.tagName.includes('-')) return true;\n\n if (el.childElementCount > 0) return true;\n\n return (el.textContent ?? '').trim().length > 0;\n};\n\nconst parseMaxWidthPx = (query: string | undefined): number | undefined => {\n const value = String(query ?? '').trim();\n\n if (!value) return undefined;\n\n const match = /max-width\\s*:\\s*([0-9]+(?:\\.[0-9]+)?)px/i.exec(value);\n\n if (!match) return undefined;\n\n const parsed = Number.parseFloat(match[1]);\n\n return Number.isFinite(parsed) ? parsed : undefined;\n};\n\nconst resolveContainerElement = (el: HTMLElement): HTMLElement | null => {\n let container = el.parentElement;\n\n while (container?.tagName.toLowerCase() === 'ore-grid-item') {\n container = container.parentElement;\n }\n\n return container;\n};\n\nconst readContainerWidth = (el: HTMLElement): number => {\n const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n if (parentWidth > 0) return parentWidth;\n\n return el.offsetWidth;\n};\n\nconst findScrollContainer = (start: HTMLElement): HTMLElement | null => {\n let current: HTMLElement | null = start.parentElement;\n\n while (current) {\n const styles = window.getComputedStyle(current);\n const overflowY = styles.overflowY;\n\n if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {\n return current;\n }\n\n current = current.parentElement;\n }\n\n return null;\n};\n\n/** Context provided by `ore-navbar` to `ore-navbar-item` children. */\nexport type NavbarContext = {\n closeMobileMenu: () => void;\n isMobile: Readable<boolean>;\n mobileMenuOpen: Readable<boolean>;\n};\n\n/** Injection key for navbar context. */\nexport const NAVBAR_CTX = createContext<NavbarContext>('NavbarContext');\n\n/** Navbar component events */\nexport type OreNavbarEvents = {\n 'mobile-menu-change': { open: boolean };\n};\n\n/** Navbar component element interface */\nexport type NavbarElement = HTMLElement &\n OreNavbarProps & {\n closeMobileMenu(): void;\n openMobileMenu(): void;\n toggleMobileMenu(): void;\n };\n\ntype MobileSidebarElement = HTMLElement & {\n closeMobile?: () => void;\n openMobile?: () => void;\n toggleMobile?: () => void;\n};\n\n/** Navbar component properties */\nexport type OreNavbarProps = {\n /** CSS media query used for mobile layout switching */\n breakpoint?: string;\n /** Theme color */\n color?: ThemeColor;\n /** Evaluate mobile breakpoint against container width only when possible. */\n 'container-breakpoints'?: boolean;\n /** Shadow elevation level (0-5) */\n elevation?: ElevationLevel;\n /** Start as detached floating navbar */\n floating?: boolean;\n /** Accessible nav landmark label */\n label?: string;\n 'menu-close-label'?: string;\n 'menu-open-label'?: string;\n /** CSS selector for an external sidebar toggled by the mobile button */\n 'mobile-sidebar'?: string;\n /** Border radius size */\n rounded?: RoundedSize;\n /** Scroll threshold in px used by floating+sticky transition */\n 'scroll-threshold'?: number;\n /** Stick to top of viewport */\n sticky?: boolean;\n /** Visual style variant */\n variant?: Exclude<VisualVariant, 'ghost' | 'text'>;\n};\n\n/** Navbar item properties */\nexport type OreNavbarItemProps = {\n /** Whether this item represents the current page */\n active?: boolean;\n /** Whether this item is disabled */\n disabled?: boolean;\n /** Link target URL. Renders an anchor when provided. */\n href?: string;\n /**\n * Icon-only mode — hides the (empty) label region and switches to compact, symmetric\n * padding instead of the icon+label layout's wider horizontal padding. Set this whenever\n * the default slot is intentionally left empty (name conveyed via `aria-label` instead),\n * otherwise the empty label still reserves its inter-element gap and the item ends up\n * with lopsided padding around the icon.\n */\n 'icon-only'?: boolean;\n /** Relationship of linked URL (anchor-only) */\n rel?: string;\n /** Browsing context for link (anchor-only) */\n target?: string;\n};\n\n/**\n * `ore-navbar` — Responsive navigation with sticky/floating modes and a mobile overflow panel.\n *\n * @element ore-navbar\n * @element ore-navbar-item - Navigation link or button placed in the default or mobile-menu slot\n *\n * @attr {string} label - Accessible nav landmark label\n * @attr {boolean} sticky - Makes navbar sticky at top\n * @attr {boolean} floating - Makes navbar detached and floating\n * @attr {number} scroll-threshold - Scroll threshold for floating+sticky transition\n * @attr {string} breakpoint - CSS media query used for mobile mode\n * @attr {boolean} container-breakpoints - Evaluates parseable max-width breakpoints against container width\n * @attr {string} variant - Visual variant: 'flat' | 'solid' | 'bordered' | 'outline' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n *\n * @fires mobile-menu-change - Emitted when mobile menu open state changes. detail: { open: boolean }\n *\n * @slot logo - Brand/logo content rendered at the leading edge\n * @slot start - Content rendered in the left/start region\n * @slot - Center navigation content rendered between the start and end regions\n * @slot end - Content rendered in the right/end region\n * @slot mobile-menu - Controls and links rendered inside the mobile overflow panel\n *\n * @cssprop --navbar-height - Navbar bar height\n * @cssprop --navbar-width - Max width of the navbar content\n * @cssprop --navbar-offset - Horizontal offset for floating/sticky positioning\n * @cssprop --navbar-bg - Navbar background color\n * @cssprop --navbar-color - Navbar text color\n * @cssprop --navbar-border-color - Navbar border color\n * @cssprop --navbar-shadow - Navbar box shadow\n * @cssprop --navbar-radius - Border radius (floating/sticky modes)\n * @cssprop --navbar-backdrop-filter - Backdrop filter for blur effect\n * @cssprop --navbar-item-color - Nav item text color\n * @cssprop --navbar-item-hover-color - Nav item hover text color\n * @cssprop --navbar-item-hover-bg - Nav item hover background\n * @cssprop --navbar-item-active-color - Nav item active/current text color\n * @cssprop --navbar-item-active-bg - Nav item active/current background\n * @part nav - Outer navigation landmark\n * @part bar - Main navbar row container\n * @part logo - Logo slot container\n * @part start - Leading action/content region\n * @part center - Center content region\n * @part end - Trailing action/content region\n * @part mobile-toggle - Mobile menu toggle button\n * @part mobile-menu - Mobile overflow panel\n * @part item-icon - Leading icon inside navbar items\n * @part item-label - Label text inside navbar items\n * @part item-end - Trailing content inside navbar items\n * @part item - Clickable navbar item root\n * @example\n * ```html\n * <ore-navbar sticky elevation=\"1\">\n * <a href=\"/\" slot=\"logo\"><strong>MyApp</strong></a>\n * <ore-navbar-item href=\"/dashboard\">Dashboard</ore-navbar-item>\n * <ore-navbar-item href=\"/docs\">Docs</ore-navbar-item>\n * <ore-button slot=\"end\" variant=\"solid\" color=\"primary\" size=\"sm\">Sign in</ore-button>\n * </ore-navbar>\n * ```\n */\nexport const NAVBAR_TAG = 'ore-navbar' as const;\ndefine<OreNavbarProps>(NAVBAR_TAG, {\n props: {\n breakpoint: prop.string('(max-width: 768px)'),\n color: prop.string<ThemeColor>(),\n 'container-breakpoints': prop.bool(false),\n elevation: prop.number<ElevationLevel>(),\n floating: prop.bool(false),\n label: prop.string('Main navigation'),\n 'menu-close-label': prop.string('Close navigation menu'),\n 'menu-open-label': prop.string('Open navigation menu'),\n 'mobile-sidebar': prop.string(),\n rounded: prop.string<RoundedSize>(),\n 'scroll-threshold': prop.number(80),\n sticky: prop.bool(false),\n variant: prop.string<Exclude<VisualVariant, 'ghost' | 'text'>>(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreNavbarEvents>();\n const slots = useSlots();\n\n const hasLogo = slots.has('logo');\n const mobileMenuElements = slots.elements('mobile-menu');\n const hasMobileMenu = signal(false);\n const mobileSidebarTarget = signal<MobileSidebarElement | null>(null);\n const isExternalMobileMode = signal(false);\n const isExternalMobileOpen = signal(false);\n const isMobile = signal(false);\n const isMobileMenuOpen = signal(false);\n const isModeTransitioning = signal(false);\n const isScrolled = signal(false);\n const scrollBase = signal(0);\n const mediaMatches = signal(false);\n const sizeMatches = signal(false);\n const maxWidthPx = signal<number | undefined>(parseMaxWidthPx(props.breakpoint.value));\n const isPreviewMode = signal(false);\n\n const getExternalSidebar = () => {\n const selector = String(props['mobile-sidebar'].value ?? '').trim();\n\n if (!selector) return null;\n\n const root = el.getRootNode();\n const scopedTarget =\n root instanceof ShadowRoot || root instanceof Document\n ? (root.querySelector(selector) as MobileSidebarElement | null)\n : null;\n\n return scopedTarget ?? (document.querySelector(selector) as MobileSidebarElement | null);\n };\n\n provide(NAVBAR_CTX, {\n // Wrapped, not passed directly — `closeMobileMenu` (below) isn't defined yet at this point\n // in `setup()`; by the time `ore-navbar-item` actually calls this (a later click), it is.\n closeMobileMenu: () => closeMobileMenu(),\n isMobile: computed(() => isMobile.value) as Readable<boolean>,\n mobileMenuOpen: computed(() => isMobileMenuOpen.value) as Readable<boolean>,\n });\n\n const computeMode = (): NavbarMode | undefined => {\n if (props.floating.value && props.sticky.value) {\n return isScrolled.value ? 'sticky' : 'floating';\n }\n\n if (props.floating.value) return 'floating';\n\n if (props.sticky.value) return 'sticky';\n\n return undefined;\n };\n\n const setMobileMenu = (next: boolean) => {\n const open = Boolean(next);\n\n if (!hasMobileMenu.value) {\n const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n if (target) {\n if (open) {\n target.openMobile?.();\n } else {\n target.closeMobile?.();\n }\n\n return;\n }\n }\n\n if (open && !hasMobileMenu.value) return;\n\n if (isMobileMenuOpen.value === open) return;\n\n isMobileMenuOpen.value = open;\n emit('mobile-menu-change', { open });\n };\n\n const closeMobileMenu = () => setMobileMenu(false);\n const openMobileMenu = () => setMobileMenu(true);\n const toggleMobileMenu = () => {\n if (!hasMobileMenu.value) {\n const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n if (target) {\n if (typeof target.toggleMobile === 'function') {\n target.toggleMobile();\n } else if (typeof target.openMobile === 'function' && typeof target.closeMobile === 'function') {\n const isOpen = target.hasAttribute('data-mobile-open');\n\n if (isOpen) target.closeMobile();\n else target.openMobile();\n }\n\n return;\n }\n }\n\n setMobileMenu(!isMobileMenuOpen.value);\n };\n\n const syncMobileMode = () => {\n const next =\n (mobileSidebarTarget.value && !hasMobileMenu.value ? isExternalMobileMode.value : false) ||\n mediaMatches.value ||\n (Boolean(props['container-breakpoints'].value) && sizeMatches.value);\n\n isMobile.value = next;\n\n if (!next) closeMobileMenu();\n };\n\n const readScrollOffset = (scrollContainer: HTMLElement | null): number => {\n if (scrollContainer) {\n return scrollContainer.scrollTop || 0;\n }\n\n return window.scrollY || document.documentElement.scrollTop || 0;\n };\n\n const resetScrollBase = (scrollContainer: HTMLElement | null) => {\n scrollBase.value = readScrollOffset(scrollContainer);\n };\n\n const updateScrolled = (scrollContainer: HTMLElement | null = null) => {\n if (!(props.floating.value && props.sticky.value)) {\n if (isScrolled.value) isScrolled.value = false;\n\n return;\n }\n\n const threshold = Math.max(0, Number(props['scroll-threshold'].value) || 0);\n const currentOffset = readScrollOffset(scrollContainer);\n const delta = currentOffset - scrollBase.value;\n\n isScrolled.value = delta > threshold;\n };\n\n bind({\n attr: {\n 'data-mobile': () => (isMobile.value ? true : undefined),\n 'data-mobile-open': () => (isMobile.value && isMobileMenuOpen.value ? true : undefined),\n 'data-mode': () => computeMode() ?? null,\n 'data-mode-transitioning': () => (isModeTransitioning.value ? true : undefined),\n 'data-preview-mode': () => (isPreviewMode.value ? true : undefined),\n 'data-scrolled': () => (props.floating.value && props.sticky.value && isScrolled.value ? true : undefined),\n },\n });\n\n onMounted(() => {\n const navbarEl = el as NavbarElement;\n const scrollContainer = findScrollContainer(el);\n\n navbarEl.closeMobileMenu = closeMobileMenu;\n navbarEl.openMobileMenu = openMobileMenu;\n navbarEl.toggleMobileMenu = toggleMobileMenu;\n\n const stopScroll = listen(\n window,\n 'scroll',\n () => {\n updateScrolled(scrollContainer);\n },\n { passive: true },\n );\n const stopContainerScroll = scrollContainer\n ? listen(\n scrollContainer,\n 'scroll',\n () => {\n updateScrolled(scrollContainer);\n },\n { passive: true },\n )\n : undefined;\n const stopEscape = listen(el, 'keydown', (event: KeyboardEvent) => {\n if (event.key !== 'Escape' || !isMobileMenuOpen.value) return;\n\n closeMobileMenu();\n });\n\n let mediaCleanup: (() => void) | undefined;\n let mobileSidebarCleanup: (() => void) | undefined;\n let modeTransitionTimeout: ReturnType<typeof setTimeout> | undefined;\n let previousMode: NavbarMode | undefined;\n\n const resolveMobileSidebarTarget = () => {\n mobileSidebarCleanup?.();\n mobileSidebarCleanup = undefined;\n mobileSidebarTarget.value = null;\n isExternalMobileMode.value = false;\n isExternalMobileOpen.value = false;\n\n if (!String(props['mobile-sidebar'].value ?? '').trim()) return;\n\n const target = getExternalSidebar();\n\n if (!target) {\n const root = el.getRootNode();\n const discoveryRoot = root instanceof Document || root instanceof ShadowRoot ? root : document;\n const discoveryObserver = new MutationObserver(() => {\n if (getExternalSidebar()) resolveMobileSidebarTarget();\n });\n\n discoveryObserver.observe(discoveryRoot, { childList: true, subtree: true });\n mobileSidebarCleanup = () => discoveryObserver.disconnect();\n\n return;\n }\n\n const syncTargetState = (event?: CustomEvent<{ open: boolean }>) => {\n const hasBottomNav = target.hasAttribute('data-bottom-nav');\n const hasMobileOpen = target.hasAttribute('data-mobile-open');\n\n isExternalMobileMode.value = hasBottomNav;\n isExternalMobileOpen.value = event?.detail ? event.detail.open : hasMobileOpen;\n\n // If the sidebar is reporting it's open, it must be in bottom-nav mode\n // (either natural or forced). We honor this to avoid race conditions\n // where attributes haven't reflected yet.\n if (isExternalMobileOpen.value && !isExternalMobileMode.value) {\n isExternalMobileMode.value = true;\n }\n\n syncMobileMode();\n };\n\n const targetObserver = new MutationObserver(() => {\n syncTargetState();\n });\n\n syncTargetState();\n targetObserver.observe(target, {\n attributeFilter: ['data-bottom-nav', 'data-mobile-open'],\n attributes: true,\n });\n target.addEventListener('mobile-open-change', syncTargetState as EventListener);\n mobileSidebarCleanup = () => {\n targetObserver.disconnect();\n target.removeEventListener('mobile-open-change', syncTargetState as EventListener);\n };\n mobileSidebarTarget.value = target;\n };\n\n const triggerModeTransition = () => {\n isModeTransitioning.value = true;\n\n if (modeTransitionTimeout != null) clearTimeout(modeTransitionTimeout);\n\n modeTransitionTimeout = setTimeout(() => {\n isModeTransitioning.value = false;\n modeTransitionTimeout = undefined;\n }, 220);\n };\n\n const stopModeWatch = watch(\n computed(() => props.floating.value && props.sticky.value),\n (enabled) => {\n if (!enabled) {\n if (isScrolled.value) isScrolled.value = false;\n\n if (isModeTransitioning.value) isModeTransitioning.value = false;\n\n previousMode = undefined;\n\n if (modeTransitionTimeout != null) {\n clearTimeout(modeTransitionTimeout);\n modeTransitionTimeout = undefined;\n }\n\n return;\n }\n\n resetScrollBase(scrollContainer);\n updateScrolled(scrollContainer);\n\n const currentMode = computeMode();\n\n previousMode = currentMode;\n },\n { immediate: true },\n );\n\n const stopMobileSidebarWatch = watch(\n props['mobile-sidebar'],\n () => {\n resolveMobileSidebarTarget();\n },\n { immediate: true },\n );\n\n const stopModeTransitionWatch = watch(\n computed(() => computeMode()),\n (nextMode) => {\n const comboEnabled = props.floating.value && props.sticky.value;\n\n if (!comboEnabled) {\n previousMode = nextMode ?? undefined;\n\n return;\n }\n\n const next = nextMode ?? undefined;\n\n if (previousMode && next && previousMode !== next) {\n triggerModeTransition();\n }\n\n previousMode = next;\n },\n { immediate: true },\n );\n\n const stopMobileMenuSlotWatch = watch(\n hasMobileMenu,\n (hasContent) => {\n if (!hasContent && isMobileMenuOpen.value) {\n closeMobileMenu();\n }\n },\n { immediate: true },\n );\n const syncMobileMenuContent = () => {\n hasMobileMenu.value = mobileMenuElements.value.some(hasElementContent);\n };\n const stopMobileMenuElementsWatch = watch(mobileMenuElements, syncMobileMenuContent, { immediate: true });\n const mobileMenuContentObserver = new MutationObserver(() => {\n syncMobileMenuContent();\n });\n\n // Parser-created demo content can populate an already-assigned slot wrapper after this\n // custom element connects; `slotchange` alone does not observe that nested content.\n mobileMenuContentObserver.observe(el, { childList: true, subtree: true });\n\n watch(\n props.breakpoint,\n (query) => {\n // Untrack the callback body: the watch already tracks `props.breakpoint` via\n // its internal `read()`. Without untrack, signals read inside (e.g.\n // `mediaMatches` via `syncMobileMode()`) become dependencies of this watch\n // effect. When the sentinel updates `mediaMatches` on a viewport change, the\n // effect re-runs — `EffectNode.run()` disposes the previous scope (killing the\n // mediaHandle and its MediaQueryList listener) but the callback is NOT invoked\n // (source unchanged), so no new handle is created. The navbar is then deaf to\n // further MQ changes and stays stuck in mobile mode after resizing back to\n // desktop.\n untrack(() => {\n mediaCleanup?.();\n mediaCleanup = undefined;\n\n const mediaQuery = String(query ?? '').trim();\n\n maxWidthPx.value = parseMaxWidthPx(mediaQuery);\n mediaMatches.value = false;\n\n const width = readContainerWidth(el);\n\n sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n syncMobileMode();\n\n if (props['container-breakpoints'].value && maxWidthPx.value != null) {\n return;\n }\n\n if (!mediaQuery) {\n return;\n }\n\n try {\n const mediaHandle = createMediaQuery(mediaQuery);\n const syncMedia = (state: ReturnType<typeof mediaHandle.getSnapshot>) => {\n if (state) {\n mediaMatches.value = state.matches;\n syncMobileMode();\n }\n };\n\n syncMedia(mediaHandle.getSnapshot());\n\n const mediaCleanupFn = watch(\n fromSubscribable(mediaHandle, { signal: mediaHandle.disposalSignal }),\n syncMedia,\n );\n mediaCleanup = () => {\n mediaCleanupFn.dispose();\n mediaHandle.dispose();\n };\n } catch (error) {\n if (!(error instanceof SentinelUnavailableError)) throw error;\n }\n });\n },\n { immediate: true },\n );\n\n const stopResizeEffect =\n typeof ResizeObserver === 'function'\n ? (() => {\n const hostSize = createElementSize(el);\n onCleanup(() => hostSize.dispose());\n const hostSizeSignal = fromSubscribable(hostSize, { signal: hostSize.disposalSignal });\n\n const wrapperEl = el.parentElement;\n const containerEl = resolveContainerElement(el);\n const wrapperSize = wrapperEl ? createElementSize(wrapperEl) : undefined;\n const parentSize = containerEl && containerEl !== wrapperEl ? createElementSize(containerEl) : undefined;\n\n if (wrapperSize) {\n onCleanup(() => wrapperSize.dispose());\n }\n if (parentSize) {\n onCleanup(() => parentSize.dispose());\n }\n\n const wrapperSizeSignal = wrapperSize\n ? fromSubscribable(wrapperSize, { signal: wrapperSize.disposalSignal })\n : undefined;\n const parentSizeSignal = parentSize\n ? fromSubscribable(parentSize, { signal: parentSize.disposalSignal })\n : undefined;\n\n return watch(\n computed(() => [\n hostSizeSignal.value?.width,\n hostSizeSignal.value?.height,\n wrapperSizeSignal?.value?.width,\n wrapperSizeSignal?.value?.height,\n parentSizeSignal?.value?.width,\n parentSizeSignal?.value?.height,\n ]),\n () => {\n const width = readContainerWidth(el);\n const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n isPreviewMode.value = parentWidth > 0 && parentWidth < window.innerWidth;\n syncMobileMode();\n },\n );\n })()\n : undefined;\n\n return () => {\n stopEscape?.();\n stopScroll?.();\n stopContainerScroll?.();\n stopModeWatch?.dispose();\n stopModeTransitionWatch?.dispose();\n stopMobileMenuSlotWatch?.dispose();\n stopMobileMenuElementsWatch?.dispose();\n stopMobileSidebarWatch?.dispose();\n mobileMenuContentObserver.disconnect();\n mediaCleanup?.();\n mobileSidebarCleanup?.();\n stopResizeEffect?.dispose();\n\n if (modeTransitionTimeout != null) {\n clearTimeout(modeTransitionTimeout);\n modeTransitionTimeout = undefined;\n }\n };\n });\n\n return html`\n <nav part=\"nav\" aria-label=\"${props.label}\">\n <div class=\"navbar\" part=\"bar\">\n <div class=\"navbar-logo\" part=\"logo\" ?hidden=${() => !hasLogo.value}>\n <slot name=\"logo\"></slot>\n </div>\n\n <div class=\"navbar-start\" part=\"start\">\n <slot name=\"start\"></slot>\n </div>\n\n <div class=\"navbar-center\" part=\"center\">\n <slot></slot>\n </div>\n\n <div class=\"navbar-end\" part=\"end\">\n <slot name=\"end\"></slot>\n </div>\n\n <button\n class=\"mobile-toggle\"\n part=\"mobile-toggle\"\n type=\"button\"\n aria-label=\"${() =>\n (hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value)\n ? props['menu-close-label'].value\n : props['menu-open-label'].value}\"\n aria-controls=\"mobile-menu-panel\"\n aria-expanded=\"${() => String(hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value)}\"\n ?hidden=${() => !isMobile.value || (!hasMobileMenu.value && !mobileSidebarTarget.value)}\n @click=\"${toggleMobileMenu}\">\n <ore-icon\n name=\"${() => ((hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value) ? 'x' : 'menu')}\"\n size=\"18\"\n stroke-width=\"2.5\"\n aria-hidden=\"true\"></ore-icon>\n </button>\n </div>\n\n <div\n id=\"mobile-menu-panel\"\n class=\"mobile-menu-panel\"\n part=\"mobile-menu\"\n role=\"navigation\"\n aria-label=\"${() => `${props.label.value} mobile menu`}\"\n ?hidden=${() => !isMobile.value || !isMobileMenuOpen.value || !hasMobileMenu.value}>\n <slot name=\"mobile-menu\"></slot>\n </div>\n </nav>\n `;\n },\n styles: [\n colorThemeMixin,\n elevationMixin,\n roundedVariantMixin,\n coarsePointerMixin,\n reducedMotionMixin,\n frostVariantMixin('.navbar'),\n navbarStyles,\n ],\n});\n\n/**\n * `ore-navbar-item` — Navigation item for navbar slots.\n *\n * Renders as an anchor when `href` is provided and item is not disabled.\n *\n * @element ore-navbar-item\n *\n * @attr {boolean} active - Marks item as the current active route\n * @attr {boolean} disabled - Disables interaction\n * @attr {string} href - Link URL; renders as `<a>` when set\n * @attr {boolean} icon-only - Compact, symmetric padding for items with no visible label\n * @attr {string} rel - Anchor `rel` attribute (links only)\n * @attr {string} target - Anchor `target` attribute (links only)\n *\n * @slot - Item label\n * @slot icon - Optional icon before the label\n *\n * @part item - Root clickable element (anchor or button).\n * @part item-icon - Leading icon container.\n * @part item-label - Label text container.\n * @part item-end - Trailing content container.\n *\n * @example\n * ```html\n * <ore-navbar-item href=\"/home\">Home</ore-navbar-item>\n * <ore-navbar-item href=\"/docs\" active>Docs</ore-navbar-item>\n * <ore-navbar-item href=\"/about\" target=\"_blank\" rel=\"noopener\">About</ore-navbar-item>\n * <ore-navbar-item disabled>Disabled</ore-navbar-item>\n * <ore-navbar-item icon-only aria-label=\"Search\"><ore-icon slot=\"icon\" name=\"search\"></ore-icon></ore-navbar-item>\n * ```\n */\nexport const NAVBAR_ITEM_TAG = 'ore-navbar-item' as const;\ndefine<OreNavbarItemProps>(NAVBAR_ITEM_TAG, {\n props: {\n active: prop.bool(false),\n disabled: prop.bool(false),\n href: prop.string(),\n 'icon-only': prop.bool(false),\n rel: prop.string(),\n target: prop.string(),\n },\n setup(props) {\n const slots = useSlots();\n\n const hasIcon = () => slots.has('icon').value;\n const hasEnd = () => slots.has('end').value;\n const navbarCtx = inject(NAVBAR_CTX);\n\n bind({\n attr: {\n 'navbar-mobile': () => (navbarCtx?.isMobile.value ? true : undefined),\n 'navbar-mobile-open': () => (navbarCtx?.mobileMenuOpen.value ? true : undefined),\n },\n });\n\n const isLink = () => Boolean(props.href.value) && !props.disabled.value;\n\n // Prevent reverse tabnapping: auto-inject noopener + noreferrer for _blank links.\n const effectiveRel = computed(() => computeSafeRel(props.rel.value, props.target.value));\n\n // Closes the mobile overflow panel when one of its items is activated — otherwise picking a\n // destination (or firing any other action placed in the `mobile-menu` slot) leaves the panel\n // open over the page until the user separately taps the toggle again. Only matters while\n // actually in mobile mode; on desktop `navbarCtx.mobileMenuOpen` is never true to begin with,\n // so `closeMobileMenu()` (idempotent — see `setMobileMenu`'s equality check) is a no-op there.\n const closeMobileMenuIfOpen = (): void => {\n if (navbarCtx?.mobileMenuOpen.value) navbarCtx.closeMobileMenu();\n };\n\n const renderItemContent = () => html`\n <span class=\"item-icon\" part=\"item-icon\" ?hidden=${() => !hasIcon()} aria-hidden=\"true\">\n <slot name=\"icon\"></slot>\n </span>\n <span class=\"item-label\" part=\"item-label\"><slot></slot></span>\n <span class=\"item-end\" part=\"item-end\" ?hidden=${() => !hasEnd()}>\n <slot name=\"end\"></slot>\n </span>\n `;\n\n return html`\n ${() => {\n if (isLink()) {\n return html`\n <a\n class=\"item\"\n part=\"item\"\n href=\"${props.href}\"\n rel=\"${effectiveRel}\"\n target=\"${props.target}\"\n aria-current=\"${() => (props.active.value ? 'page' : null)}\"\n @click=${closeMobileMenuIfOpen}>\n ${renderItemContent()}\n </a>\n `;\n }\n\n if (props.disabled.value) {\n return html`\n <div class=\"item\" part=\"item\" tabindex=\"-1\" aria-disabled=\"true\">${renderItemContent()}</div>\n `;\n }\n\n return html`\n <button class=\"item\" part=\"item\" type=\"button\" @click=${closeMobileMenuIfOpen}>${renderItemContent()}</button>\n `;\n }}\n `;\n },\n styles: [coarsePointerMixin, navbarStyles],\n});\n"],"mappings":";;;;;;;;;;AA+BA,IAAM,KACJ,GACA,GACA,GACA,MAEK,KAEL,EAAG,iBAAiB,GAAM,GAA0B,CAAO,SAE9C,EAAG,oBAAoB,GAAM,GAA0B,CAAO,WAJrD,CAAC,GASnB,KAAqB,MACrB,EAAE,aAAc,gBAEhB,EAAG,QAAQ,SAAS,GAAG,KAEvB,EAAG,oBAAoB,IAAU,MAE7B,EAAG,eAAe,GAAA,CAAI,KAAK,CAAC,CAAC,SAAS,GAG1C,KAAmB,MAAkD;CACzE,IAAM,IAAQ,OAAO,KAAS,EAAE,CAAC,CAAC,KAAK;CAEvC,IAAI,CAAC,GAAO;CAEZ,IAAM,IAAQ,2CAA2C,KAAK,CAAK;CAEnE,IAAI,CAAC,GAAO;CAEZ,IAAM,IAAS,OAAO,WAAW,EAAM,EAAE;CAEzC,OAAO,OAAO,SAAS,CAAM,IAAI,IAAS,KAAA;AAC5C,GAEM,KAA2B,MAAwC;CACvE,IAAI,IAAY,EAAG;CAEnB,OAAO,GAAW,QAAQ,YAAY,MAAM,kBAC1C,IAAY,EAAU;CAGxB,OAAO;AACT,GAEM,KAAsB,MAA4B;CACtD,IAAM,IAAc,EAAwB,CAAE,CAAC,EAAE,eAAe;CAIhE,OAFI,IAAc,IAAU,IAErB,EAAG;AACZ,GAEM,KAAuB,MAA2C;CACtE,IAAI,IAA8B,EAAM;CAExC,OAAO,IAAS;EAEd,IAAM,IADS,OAAO,iBAAiB,CACrB,CAAA,CAAO;EAEzB,IAAI,MAAc,UAAU,MAAc,YAAY,MAAc,WAClE,OAAO;EAGT,IAAU,EAAQ;CACpB;CAEA,OAAO;AACT,GAUa,IAAa,EAA6B,eAAe,GAoIzD,IAAa;AAC1B,EAAuB,GAAY;CACjC,OAAO;EACL,YAAY,EAAK,OAAO,oBAAoB;EAC5C,OAAO,EAAK,OAAmB;EAC/B,yBAAyB,EAAK,KAAK,EAAK;EACxC,WAAW,EAAK,OAAuB;EACvC,UAAU,EAAK,KAAK,EAAK;EACzB,OAAO,EAAK,OAAO,iBAAiB;EACpC,oBAAoB,EAAK,OAAO,uBAAuB;EACvD,mBAAmB,EAAK,OAAO,sBAAsB;EACrD,kBAAkB,EAAK,OAAO;EAC9B,SAAS,EAAK,OAAoB;EAClC,oBAAoB,EAAK,OAAO,EAAE;EAClC,QAAQ,EAAK,KAAK,EAAK;EACvB,SAAS,EAAK,OAAiD;CACjE;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAyB,GAChC,IAAQ,EAAS,GAEjB,IAAU,EAAM,IAAI,MAAM,GAC1B,IAAqB,EAAM,SAAS,aAAa,GACjD,IAAgB,EAAO,EAAK,GAC5B,IAAsB,EAAoC,IAAI,GAC9D,IAAuB,EAAO,EAAK,GACnC,IAAuB,EAAO,EAAK,GACnC,IAAW,EAAO,EAAK,GACvB,IAAmB,EAAO,EAAK,GAC/B,IAAsB,EAAO,EAAK,GAClC,IAAa,EAAO,EAAK,GACzB,IAAa,EAAO,CAAC,GACrB,IAAe,EAAO,EAAK,GAC3B,IAAc,EAAO,EAAK,GAC1B,IAAa,EAA2B,EAAgB,EAAM,WAAW,KAAK,CAAC,GAC/E,IAAgB,EAAO,EAAK,GAE5B,UAA2B;GAC/B,IAAM,IAAW,OAAO,EAAM,iBAAiB,CAAC,SAAS,EAAE,CAAC,CAAC,KAAK;GAElE,IAAI,CAAC,GAAU,OAAO;GAEtB,IAAM,IAAO,EAAG,YAAY;GAM5B,QAJE,aAAgB,cAAc,aAAgB,WACzC,EAAK,cAAc,CAAQ,IAC5B,SAEkB,SAAS,cAAc,CAAQ;EACzD;EAEA,EAAQ,GAAY;GAGlB,uBAAuB,EAAgB;GACvC,UAAU,QAAe,EAAS,KAAK;GACvC,gBAAgB,QAAe,EAAiB,KAAK;EACvD,CAAC;EAED,IAAM,UAA4C;GAChD,IAAI,EAAM,SAAS,SAAS,EAAM,OAAO,OACvC,OAAO,EAAW,QAAQ,WAAW;GAGvC,IAAI,EAAM,SAAS,OAAO,OAAO;GAEjC,IAAI,EAAM,OAAO,OAAO,OAAO;EAGjC,GAEM,KAAiB,MAAkB;GACvC,IAAM,IAAO,EAAQ;GAErB,IAAI,CAAC,EAAc,OAAO;IACxB,IAAM,IAAS,EAAoB,SAAS,EAAmB;IAE/D,IAAI,GAAQ;KACV,AAAI,IACF,EAAO,aAAa,IAEpB,EAAO,cAAc;KAGvB;IACF;GACF;GAEI,OAAS,EAAc,UAEvB,EAAiB,UAAU,MAE/B,EAAiB,QAAQ,GACzB,EAAK,sBAAsB,EAAE,QAAK,CAAC;EACrC,GAEM,UAAwB,EAAc,EAAK,GAC3C,UAAuB,EAAc,EAAI,GACzC,UAAyB;GAC7B,IAAI,CAAC,EAAc,OAAO;IACxB,IAAM,IAAS,EAAoB,SAAS,EAAmB;IAE/D,IAAI,GAAQ;KACV,AAAI,OAAO,EAAO,gBAAiB,aACjC,EAAO,aAAa,IACX,OAAO,EAAO,cAAe,cAAc,OAAO,EAAO,eAAgB,eACnE,EAAO,aAAa,kBAE/B,IAAQ,EAAO,YAAY,IAC1B,EAAO,WAAW;KAGzB;IACF;GACF;GAEA,EAAc,CAAC,EAAiB,KAAK;EACvC,GAEM,UAAuB;GAC3B,IAAM,KACH,EAAoB,SAAS,CAAC,EAAc,QAAQ,EAAqB,QAAQ,OAClF,EAAa,SACZ,EAAQ,EAAM,wBAAwB,CAAC,SAAU,EAAY;GAIhE,AAFA,EAAS,QAAQ,GAEZ,KAAM,EAAgB;EAC7B,GAEM,KAAoB,MACpB,IACK,EAAgB,aAAa,IAG/B,OAAO,WAAW,SAAS,gBAAgB,aAAa,GAG3D,KAAmB,MAAwC;GAC/D,EAAW,QAAQ,EAAiB,CAAe;EACrD,GAEM,KAAkB,IAAsC,SAAS;GACrE,IAAI,EAAE,EAAM,SAAS,SAAS,EAAM,OAAO,QAAQ;IACjD,AAAsB,EAAW,UAAQ;IAEzC;GACF;GAEA,IAAM,IAAY,KAAK,IAAI,GAAG,OAAO,EAAM,mBAAmB,CAAC,KAAK,KAAK,CAAC,GAEpE,IADgB,EAAiB,CACzB,IAAgB,EAAW;GAEzC,EAAW,QAAQ,IAAQ;EAC7B;EAuUA,OArUA,EAAK,EACH,MAAM;GACJ,qBAAsB,EAAS,QAAQ,KAAO,KAAA;GAC9C,0BAA2B,EAAS,SAAS,EAAiB,QAAQ,KAAO,KAAA;GAC7E,mBAAmB,EAAY,KAAK;GACpC,iCAAkC,EAAoB,QAAQ,KAAO,KAAA;GACrE,2BAA4B,EAAc,QAAQ,KAAO,KAAA;GACzD,uBAAwB,EAAM,SAAS,SAAS,EAAM,OAAO,SAAS,EAAW,QAAQ,KAAO,KAAA;EAClG,EACF,CAAC,GAED,QAAgB;GACd,IAAM,IAAW,GACX,IAAkB,EAAoB,CAAE;GAI9C,AAFA,EAAS,kBAAkB,GAC3B,EAAS,iBAAiB,GAC1B,EAAS,mBAAmB;GAE5B,IAAM,IAAa,EACjB,QACA,gBACM;IACJ,EAAe,CAAe;GAChC,GACA,EAAE,SAAS,GAAK,CAClB,GACM,IAAsB,IACxB,EACE,GACA,gBACM;IACJ,EAAe,CAAe;GAChC,GACA,EAAE,SAAS,GAAK,CAClB,IACA,KAAA,GACE,IAAa,EAAO,GAAI,YAAY,MAAyB;IAC7D,EAAM,QAAQ,YAAa,EAAiB,SAEhD,EAAgB;GAClB,CAAC,GAEG,GACA,GACA,GACA,GAEE,UAAmC;IAOvC,IANA,IAAuB,GACvB,IAAuB,KAAA,GACvB,EAAoB,QAAQ,MAC5B,EAAqB,QAAQ,IAC7B,EAAqB,QAAQ,IAEzB,CAAC,OAAO,EAAM,iBAAiB,CAAC,SAAS,EAAE,CAAC,CAAC,KAAK,GAAG;IAEzD,IAAM,IAAS,EAAmB;IAElC,IAAI,CAAC,GAAQ;KACX,IAAM,IAAO,EAAG,YAAY,GACtB,IAAgB,aAAgB,YAAY,aAAgB,aAAa,IAAO,UAChF,IAAoB,IAAI,uBAAuB;MACnD,AAAI,EAAmB,KAAG,EAA2B;KACvD,CAAC;KAGD,AADA,EAAkB,QAAQ,GAAe;MAAE,WAAW;MAAM,SAAS;KAAK,CAAC,GAC3E,UAA6B,EAAkB,WAAW;KAE1D;IACF;IAEA,IAAM,KAAmB,MAA2C;KAClE,IAAM,IAAe,EAAO,aAAa,iBAAiB,GACpD,IAAgB,EAAO,aAAa,kBAAkB;KAY5D,AAVA,EAAqB,QAAQ,GAC7B,EAAqB,QAAQ,GAAO,SAAS,EAAM,OAAO,OAAO,GAK7D,EAAqB,SAAS,CAAC,EAAqB,UACtD,EAAqB,QAAQ,KAG/B,EAAe;IACjB,GAEM,IAAiB,IAAI,uBAAuB;KAChD,EAAgB;IAClB,CAAC;IAYD,AAVA,EAAgB,GAChB,EAAe,QAAQ,GAAQ;KAC7B,iBAAiB,CAAC,mBAAmB,kBAAkB;KACvD,YAAY;IACd,CAAC,GACD,EAAO,iBAAiB,sBAAsB,CAAgC,GAC9E,UAA6B;KAE3B,AADA,EAAe,WAAW,GAC1B,EAAO,oBAAoB,sBAAsB,CAAgC;IACnF,GACA,EAAoB,QAAQ;GAC9B,GAEM,UAA8B;IAKlC,AAJA,EAAoB,QAAQ,IAExB,KAAyB,QAAM,aAAa,CAAqB,GAErE,IAAwB,iBAAiB;KAEvC,AADA,EAAoB,QAAQ,IAC5B,IAAwB,KAAA;IAC1B,GAAG,GAAG;GACR,GAEM,IAAgB,EACpB,QAAe,EAAM,SAAS,SAAS,EAAM,OAAO,KAAK,IACxD,MAAY;IACX,IAAI,CAAC,GAAS;KAOZ,AANA,AAAsB,EAAW,UAAQ,IAEzC,AAA+B,EAAoB,UAAQ,IAE3D,IAAe,KAAA,GAEX,KAAyB,SAC3B,aAAa,CAAqB,GAClC,IAAwB,KAAA;KAG1B;IACF;IAOA,AALA,EAAgB,CAAe,GAC/B,EAAe,CAAe,GAI9B,IAFoB,EAEL;GACjB,GACA,EAAE,WAAW,GAAK,CACpB,GAEM,IAAyB,EAC7B,EAAM,yBACA;IACJ,EAA2B;GAC7B,GACA,EAAE,WAAW,GAAK,CACpB,GAEM,IAA0B,EAC9B,QAAe,EAAY,CAAC,IAC3B,MAAa;IAGZ,IAAI,EAFiB,EAAM,SAAS,SAAS,EAAM,OAAO,QAEvC;KACjB,IAAe,KAAY,KAAA;KAE3B;IACF;IAEA,IAAM,IAAO,KAAY,KAAA;IAMzB,AAJI,KAAgB,KAAQ,MAAiB,KAC3C,EAAsB,GAGxB,IAAe;GACjB,GACA,EAAE,WAAW,GAAK,CACpB,GAEM,IAA0B,EAC9B,IACC,MAAe;IACd,AAAI,CAAC,KAAc,EAAiB,SAClC,EAAgB;GAEpB,GACA,EAAE,WAAW,GAAK,CACpB,GACM,UAA8B;IAClC,EAAc,QAAQ,EAAmB,MAAM,KAAK,CAAiB;GACvE,GACM,IAA8B,EAAM,GAAoB,GAAuB,EAAE,WAAW,GAAK,CAAC,GAClG,IAA4B,IAAI,uBAAuB;IAC3D,EAAsB;GACxB,CAAC;GAMD,AAFA,EAA0B,QAAQ,GAAI;IAAE,WAAW;IAAM,SAAS;GAAK,CAAC,GAExE,EACE,EAAM,aACL,MAAU;IAUT,QAAc;KAEZ,AADA,IAAe,GACf,IAAe,KAAA;KAEf,IAAM,IAAa,OAAO,KAAS,EAAE,CAAC,CAAC,KAAK;KAG5C,AADA,EAAW,QAAQ,EAAgB,CAAU,GAC7C,EAAa,QAAQ;KAErB,IAAM,IAAQ,EAAmB,CAAE;KAEnC,MAAY,QAAQ,IAAQ,KAAK,EAAW,SAAS,QAAO,KAAS,EAAW,OAChF,EAAe,GAEX,IAAM,wBAAwB,CAAC,SAAS,EAAW,SAAS,SAI3D,GAIL,IAAI;MACF,IAAM,IAAc,EAAiB,CAAU,GACzC,KAAa,MAAsD;OACvE,AAAI,MACF,EAAa,QAAQ,EAAM,SAC3B,EAAe;MAEnB;MAEA,EAAU,EAAY,YAAY,CAAC;MAEnC,IAAM,IAAiB,EACrB,EAAiB,GAAa,EAAE,QAAQ,EAAY,eAAe,CAAC,GACpE,CACF;MACA,UAAqB;OAEnB,AADA,EAAe,QAAQ,GACvB,EAAY,QAAQ;MACtB;KACF,SAAS,GAAO;MACd,IAAI,EAAE,aAAiB,IAA2B,MAAM;KAC1D;IACF,CAAC;GACH,GACA,EAAE,WAAW,GAAK,CACpB;GAEA,IAAM,KACJ,OAAO,kBAAmB,oBACf;IACL,IAAM,IAAW,EAAkB,CAAE;IACrC,QAAgB,EAAS,QAAQ,CAAC;IAClC,IAAM,IAAiB,EAAiB,GAAU,EAAE,QAAQ,EAAS,eAAe,CAAC,GAE/E,IAAY,EAAG,eACf,IAAc,EAAwB,CAAE,GACxC,IAAc,IAAY,EAAkB,CAAS,IAAI,KAAA,GACzD,IAAa,KAAe,MAAgB,IAAY,EAAkB,CAAW,IAAI,KAAA;IAK/F,AAHI,KACF,QAAgB,EAAY,QAAQ,CAAC,GAEnC,KACF,QAAgB,EAAW,QAAQ,CAAC;IAGtC,IAAM,IAAoB,IACtB,EAAiB,GAAa,EAAE,QAAQ,EAAY,eAAe,CAAC,IACpE,KAAA,GACE,IAAmB,IACrB,EAAiB,GAAY,EAAE,QAAQ,EAAW,eAAe,CAAC,IAClE,KAAA;IAEJ,OAAO,EACL,QAAe;KACb,EAAe,OAAO;KACtB,EAAe,OAAO;KACtB,GAAmB,OAAO;KAC1B,GAAmB,OAAO;KAC1B,GAAkB,OAAO;KACzB,GAAkB,OAAO;IAC3B,CAAC,SACK;KACJ,IAAM,IAAQ,EAAmB,CAAE,GAC7B,IAAc,EAAwB,CAAE,CAAC,EAAE,eAAe;KAIhE,AAFA,EAAY,QAAQ,IAAQ,KAAK,EAAW,SAAS,QAAO,KAAS,EAAW,OAChF,EAAc,QAAQ,IAAc,KAAK,IAAc,OAAO,YAC9D,EAAe;IACjB,CACF;GACF,EAAA,CAAG,IACH,KAAA;GAEN,aAAa;IAcX,AAbA,IAAa,GACb,IAAa,GACb,IAAsB,GACtB,GAAe,QAAQ,GACvB,GAAyB,QAAQ,GACjC,GAAyB,QAAQ,GACjC,GAA6B,QAAQ,GACrC,GAAwB,QAAQ,GAChC,EAA0B,WAAW,GACrC,IAAe,GACf,IAAuB,GACvB,IAAkB,QAAQ,GAEtB,KAAyB,SAC3B,aAAa,CAAqB,GAClC,IAAwB,KAAA;GAE5B;EACF,CAAC,GAEM,CAAI;oCACqB,EAAM,MAAM;;+DAEe,CAAC,EAAQ,MAAM;;;;;;;;;;;;;;;;;;;;iCAqB/D,EAAc,QAAQ,EAAiB,QAAQ,EAAqB,SACjE,EAAM,mBAAmB,CAAC,QAC1B,EAAM,kBAAkB,CAAC,MAAM;;mCAEd,OAAO,EAAc,QAAQ,EAAiB,QAAQ,EAAqB,KAAK,EAAE;4BACzF,CAAC,EAAS,SAAU,CAAC,EAAc,SAAS,CAAC,EAAoB,MAAO;sBAC9E,EAAiB;;6BAET,EAAc,QAAQ,EAAiB,QAAQ,EAAqB,SAAS,MAAM,OAAQ;;;;;;;;;;;;8BAY3F,GAAG,EAAM,MAAM,MAAM,cAAc;0BACvC,CAAC,EAAS,SAAS,CAAC,EAAiB,SAAS,CAAC,EAAc,MAAM;;;;;CAK3F;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA,EAAkB,SAAS;EAC3B;CACF;AACF,CAAC;AAiCD,IAAa,IAAkB;AAC/B,EAA2B,GAAiB;CAC1C,OAAO;EACL,QAAQ,EAAK,KAAK,EAAK;EACvB,UAAU,EAAK,KAAK,EAAK;EACzB,MAAM,EAAK,OAAO;EAClB,aAAa,EAAK,KAAK,EAAK;EAC5B,KAAK,EAAK,OAAO;EACjB,QAAQ,EAAK,OAAO;CACtB;CACA,MAAM,GAAO;EACX,IAAM,IAAQ,EAAS,GAEjB,UAAgB,EAAM,IAAI,MAAM,CAAC,CAAC,OAClC,UAAe,EAAM,IAAI,KAAK,CAAC,CAAC,OAChC,IAAY,EAAO,CAAU;EAEnC,EAAK,EACH,MAAM;GACJ,uBAAwB,GAAW,SAAS,QAAQ,KAAO,KAAA;GAC3D,4BAA6B,GAAW,eAAe,QAAQ,KAAO,KAAA;EACxE,EACF,CAAC;EAED,IAAM,UAAe,EAAQ,EAAM,KAAK,SAAU,CAAC,EAAM,SAAS,OAG5D,IAAe,QAAe,EAAe,EAAM,IAAI,OAAO,EAAM,OAAO,KAAK,CAAC,GAOjF,UAAoC;GACxC,AAAI,GAAW,eAAe,SAAO,EAAU,gBAAgB;EACjE,GAEM,UAA0B,CAAI;+DACuB,CAAC,EAAQ,EAAE;;;;6DAIb,CAAC,EAAO,EAAE;;;;EAKnE,OAAO,CAAI;cAEH,EAAO,IACF,CAAI;;;;sBAIC,EAAM,KAAK;qBACZ,EAAa;wBACV,EAAM,OAAO;oCACA,EAAM,OAAO,QAAQ,SAAS,KAAM;uBAClD,EAAsB;gBAC7B,EAAkB,EAAE;;cAKxB,EAAM,SAAS,QACV,CAAI;+EAC0D,EAAkB,EAAE;cAIpF,CAAI;kEAC+C,EAAsB,GAAG,EAAkB,EAAE;UAEvG;;CAEN;CACA,QAAQ,CAAC,GAAoB,CAAY;AAC3C,CAAC"}
|
package/dist/navigation-menu.cjs
CHANGED
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
|
|
|
3
3
|
`},styles:[o.default]});var f=`ore-navigation-menu-panel`;(0,c.define)(f,{props:{for:c.prop.string()},setup(){let e=(0,c.useSlots)();return c.html`
|
|
4
4
|
<div class="content" part="content"><slot></slot></div>
|
|
5
5
|
<div class="footer" part="footer" ?hidden=${()=>!e.has(`footer`).value}><slot name="footer"></slot></div>
|
|
6
|
-
`},styles:[s.default]});var p=`ore-navigation-menu`;(0,c.define)(p,{props:{...i.disablableBundle,"close-on-select":c.prop.bool(!0),columns:c.prop.number(),"default-open":c.prop.string(),label:c.prop.string(`Navigation menu`),open:{default:void 0,parse:u},placement:c.prop.oneOf([`bottom-end`,`bottom-start`],`bottom-start`)},setup(e){let i=(0,c.getHost)(),a=(0,c.useEmit)(),o=t.lifecycleSignal(c.onCleanup),s=(0,c.
|
|
6
|
+
`},styles:[s.default]});var p=`ore-navigation-menu`;(0,c.define)(p,{props:{...i.disablableBundle,"close-on-select":c.prop.bool(!0),columns:c.prop.number(),"default-open":c.prop.string(),label:c.prop.string(`Navigation menu`),open:{default:void 0,parse:u},placement:c.prop.oneOf([`bottom-end`,`bottom-start`],`bottom-start`)},setup(e){let i=(0,c.getHost)(),a=(0,c.useEmit)(),o=t.lifecycleSignal(c.onCleanup),s=(0,c.createId)(`navigation-menu`),u=(0,l.computed)(()=>e.disabled.value),p=(0,l.signal)(null),m=null,h=null,g=null,_=()=>Array.from(i.querySelectorAll(`${d}:not([disabled])`)),v=e=>e.getAttribute(`value`)??``,y=()=>Array.from(i.querySelectorAll(f)),b=e=>y().find(t=>t.getAttribute(`for`)===e)??null,x=()=>e.open.value!==void 0,S=e=>e.id||=(0,c.createId)(`navigation-menu-panel`),C=r.createDropdownPositioner({getFloating:()=>h,getPlacement:()=>e.placement.value??`bottom-start`,getReference:()=>m?.shadowRoot?.querySelector(`.trigger`)??m,matchWidth:!1,offsetPx:8,useClippingAncestor:!1}),w=()=>{let t=e.columns.value;return t===void 0?void 0:Math.max(1,Math.trunc(t))},T=e=>{if(e.hidden=!1,e.dataset.open=``,`showPopover`in e)try{e.matches(`:popover-open`)||e.showPopover()}catch{}},E=e=>{if(delete e.dataset.open,`hidePopover`in e)try{e.matches(`:popover-open`)&&e.hidePopover()}catch{}e.hidden=!0},D=e=>{let t=e===null?null:b(e);g?.(),g=null,p.value=e,m=e?_().find(t=>v(t)===e)??null:null,h=t;for(let t of _()){let n=v(t)===e,r=t.shadowRoot?.querySelector(`.trigger`);t.setAttribute(`aria-expanded`,String(n)),r?.setAttribute(`aria-expanded`,String(n))}for(let e of y())e!==t&&E(e);if(t){let e=w();e!==void 0&&t.style.setProperty(`--navigation-menu-panel-columns`,String(e)),t.setAttribute(`aria-labelledby`,m?.id??``),T(t),C.update(),g=C.startAutoUpdate?.()??null}},O=(e,t)=>{u.value||p.value===e||(e===null||b(e))&&(x()||D(e),a(`open-change`,{open:e!==null,reason:t,value:e}))};return(0,c.onCleanup)(()=>{g?.();for(let e of y())E(e)}),n.createOutsidePointerDismissal({getTargets:()=>[i,h],isActive:()=>p.value!==null,onDismiss:()=>O(null,`outsideClick`),signal:o}),(0,c.onMounted)(()=>{let t=new Set;for(let t of y())t.setAttribute(`popover`,`manual`),t.setAttribute(`role`,`region`),S(t),E(t),t.addEventListener(`click`,n=>{let r=n.target instanceof Element?n.target.closest(`a[href]`):null;if(!r||!t.contains(r))return;let i=p.value;i&&(a(`select`,{href:r.href,value:i}),e[`close-on-select`].value&&!r.closest(`[data-navigation-menu-keep-open]`)&&O(null,`select`))},{signal:o});document.addEventListener(`keydown`,e=>{e.key===`Escape`&&p.value!==null&&(e.preventDefault(),O(null,`escape`),m?.shadowRoot?.querySelector(`.trigger`)?.focus())},{signal:o});for(let e of _()){let n=v(e),r=b(n);if(!n||t.has(n)||!r)continue;t.add(n),e.id||=(0,c.createId)(`navigation-menu-trigger`);let i=e.shadowRoot?.querySelector(`.trigger`);i&&(i.setAttribute(`aria-controls`,S(r)),i.setAttribute(`aria-haspopup`,`true`),i.setAttribute(`aria-expanded`,`false`),e.setAttribute(`aria-expanded`,`false`),i.addEventListener(`click`,()=>O(p.value===n?null:n,`click`),{signal:o}),i.addEventListener(`keydown`,t=>{let r=_(),i=r.indexOf(e);t.key===`ArrowLeft`||t.key===`ArrowRight`||t.key===`Home`||t.key===`End`?(t.preventDefault(),(t.key===`Home`?r[0]:t.key===`End`?r.at(-1):r[(i+(t.key===`ArrowRight`?1:r.length-1))%r.length])?.shadowRoot?.querySelector(`.trigger`)?.focus()):t.key===`ArrowDown`&&(t.preventDefault(),O(n,`keyboard`),requestAnimationFrame(()=>h?.querySelector(`a, button, input, [tabindex]:not([tabindex="-1"])`)?.focus()))},{signal:o}))}e.open.value===void 0?e[`default-open`].value&&D(e[`default-open`].value):D(e.open.value)}),(0,l.watch)(e.open,e=>{e!==void 0&&D(e)}),(0,l.watch)(e.disabled,e=>{e&&D(null)}),c.html`
|
|
7
7
|
<nav class="triggers" aria-label="${e.label}" id="${s}"><slot></slot></nav>
|
|
8
8
|
<slot name="panel"></slot>
|
|
9
9
|
<slot name="footer"></slot>
|