@vielzeug/refine 2.3.0 → 2.4.0

package/dist/sidebar.js

@@ -21,65 +21,78 @@ var w = (e) => {
 }, E = (e) => {
 	let t = T(e)?.clientWidth ?? 0;
 	return t > 0 ? t : e.offsetWidth;
-}, D = s("SidebarContext"), O = "ore-sidebar";
-c(O, {
+}, D = () => {
+	let e = document.activeElement;
+	for (; e?.shadowRoot?.activeElement instanceof HTMLElement;) e = e.shadowRoot.activeElement;
+	return e;
+}, O = s("SidebarContext"), k = "ore-sidebar";
+c(k, {
 	props: {
 		"bottom-nav-at": m.string(),
+		"close-on-select": m.bool(!1),
+		"collapse-label": m.string("Collapse sidebar"),
 		collapsed: m.bool(!1),
 		collapsible: m.bool(!1),
 		"container-breakpoints": m.bool(!1),
 		"default-collapsed": m.bool(!1),
+		"expand-label": m.string("Expand sidebar"),
 		label: m.string("Sidebar navigation"),
+		"mobile-close-label": m.string("Close sidebar"),
 		responsive: m.string(),
 		variant: m.string()
 	},
 	setup(e) {
-		let t = l(), n = g(), r = _(), i = () => r.has("header").value, a = () => r.has("footer").value, s = () => r.has("logo").value, c = y(t.hasAttribute("collapsed")), d = y(c.value ? t.hasAttribute("collapsed") : e["default-collapsed"].value), m = y(!1), O = y(!1), k = y([]), A = y(!1), j = y(!1), M = y(w(e.responsive.value)), N = y(!!String(e.responsive.value ?? "").trim()), P = y(!1), F = y(!1), I = y(w(e["bottom-nav-at"].value)), L = y(!1), R = () => d.value, z = v(() => m.value ? "bottom-nav" : d.value ? "collapsed" : "default"), B = () => {
-			let t = e["container-breakpoints"].value, n = t ? j.value : A.value || j.value, r = t ? F.value : P.value || F.value;
-			O.value || (m.value = r), !r && !O.value && U(!1, "responsive"), N.value && H(n, "responsive");
-		}, V = () => {
-			let e = r.elements().value.filter((e) => e instanceof HTMLElement && e.tagName.toLowerCase() === "ore-sidebar-item").map((e, t) => {
-				let n = e.querySelector(":scope > [slot=\"icon\"]") ?? e.querySelector("[slot=\"icon\"]"), r = n?.tagName.toLowerCase() === "ore-icon" ? n.getAttribute("name") : null, i = n?.querySelector("ore-icon")?.getAttribute("name") ?? null, a = (e.textContent ?? "").trim();
+		let t = l(), n = g(), r = _(), i = () => r.has("header").value, a = () => r.has("footer").value, s = () => r.has("logo").value, c = y(t.hasAttribute("collapsed")), d = y(c.value ? t.hasAttribute("collapsed") : e["default-collapsed"].value), m = y(!1), k = y(!1), A = y([]), j = y(!1), M = y(!1), N = y(w(e.responsive.value)), P = y(!!String(e.responsive.value ?? "").trim()), F = y(!1), I = y(!1), L = y(w(e["bottom-nav-at"].value)), R = y(!1), z = null, B = () => d.value, V = v(() => m.value ? "bottom-nav" : d.value ? "collapsed" : "default"), H = () => {
+			let t = e["container-breakpoints"].value, n = t ? M.value : j.value || M.value, r = t ? I.value : F.value || I.value;
+			k.value || (m.value = r), !r && !k.value && G(!1, "responsive"), P.value && W(n, "responsive");
+		}, U = () => {
+			let e = r.elements().value.filter((e) => e instanceof HTMLElement && e.tagName.toLowerCase() === "ore-sidebar-item"), n = [...t.querySelectorAll("ore-sidebar-item[bottom-nav]")], i = (n.length > 0 ? n : e).map((e, t) => {
+				let n = e, r = n.querySelector(":scope > [slot=\"icon\"]") ?? n.querySelector("[slot=\"icon\"]"), i = r?.tagName.toLowerCase() === "ore-icon" ? r.getAttribute("name") : null, a = r?.querySelector("ore-icon")?.getAttribute("name") ?? null, o = (n.textContent ?? "").trim();
 				return {
-					active: e.hasAttribute("active"),
-					disabled: e.hasAttribute("disabled"),
-					href: e.getAttribute("href") ?? void 0,
-					iconName: r ?? i ?? void 0,
-					label: a || `Item ${t + 1}`,
-					source: e
+					active: n.hasAttribute("active"),
+					disabled: n.hasAttribute("disabled"),
+					href: n.getAttribute("href") ?? void 0,
+					iconName: i ?? a ?? void 0,
+					label: n.getAttribute("bottom-nav-label")?.trim() || o || `Item ${t + 1}`,
+					source: n
 				};
 			});
-			k.value = e;
+			A.value = i;
 		};
-		h(D, {
+		h(O, {
+			closeMobile: () => G(!1, "toggle"),
+			closeOnSelect: e["close-on-select"],
 			collapsed: v(() => !m.value && d.value),
-			mobileOpen: v(() => m.value && O.value),
-			mode: z,
+			mobileOpen: v(() => m.value && k.value),
+			mode: V,
 			variant: e.variant
 		});
-		let H = (e, t) => {
-			R() !== e && (c.value || (d.value = e), n("collapsed-change", {
+		let W = (e, t) => {
+			B() !== e && (c.value || (d.value = e), n("collapsed-change", {
 				collapsed: e,
 				source: t
 			}));
-		}, U = (e, t) => {
-			let r = !!e;
-			if (r && !m.value && (m.value = !0), !m.value && !r) {
-				O.value &&= !1;
+		}, G = (e, r) => {
+			let i = !!e;
+			if (i && !m.value && (m.value = !0), !m.value && !i) {
+				k.value &&= !1;
 				return;
 			}
-			O.value !== r && (O.value = r, r || B(), n("mobile-open-change", {
-				open: r,
-				source: t
+			k.value !== i && (i && (z = D()), k.value = i, i ? queueMicrotask(() => t.shadowRoot?.querySelector("nav")?.focus()) : (H(), queueMicrotask(() => {
+				z?.isConnected && z.focus(), z = null;
+			})), n("mobile-open-change", {
+				open: i,
+				source: r
 			}));
-		}, W = () => {
-			H(!R(), "toggle");
-		}, G = t;
-		return G.setCollapsed = (e) => H(!!e, "api"), G.toggle = W, G.openMobile = () => U(!0, "api"), G.closeMobile = () => U(!1, "api"), G.toggleMobile = () => U(!O.value, "toggle"), o({ attr: {
+		}, K = () => {
+			W(!B(), "toggle");
+		}, q = t;
+		return q.setCollapsed = (e) => W(!!e, "api"), q.toggle = K, q.openMobile = () => G(!0, "api"), q.closeMobile = () => G(!1, "api"), q.toggleMobile = () => G(!k.value, "toggle"), o({ attr: {
 			"data-bottom-nav": () => m.value ? !0 : void 0,
-			"data-collapsed": () => R() && !m.value ? !0 : void 0,
-			"data-mobile-open": () => m.value && O.value ? !0 : void 0,
-			"data-preview-mode": () => L.value ? !0 : void 0
+			"data-collapsed": () => B() && !m.value ? !0 : void 0,
+			"data-has-logo": () => s() ? !0 : void 0,
+			"data-mobile-open": () => m.value && k.value ? !0 : void 0,
+			"data-preview-mode": () => R.value ? !0 : void 0
 		} }), p(() => {
 			t.setAttribute("data-no-transition", "");
 			let n = !1, i = () => {
@@ -87,19 +100,23 @@ c(O, {
 			};
 			requestAnimationFrame(() => requestAnimationFrame(i));
 			let a, o, s = /* @__PURE__ */ new Map(), l = new MutationObserver(() => {
-				!t.hasAttribute("collapsed") && !c.value || (c.value = !0, d.value = t.hasAttribute("collapsed"));
+				(t.hasAttribute("collapsed") || c.value) && (c.value = !0, d.value = t.hasAttribute("collapsed"));
 			});
 			l.observe(t, {
 				attributeFilter: ["collapsed"],
 				attributes: !0
-			}), b(e.responsive, (n) => {
+			});
+			let u = (e) => {
+				e.key === "Escape" && k.value && (e.preventDefault(), G(!1, "toggle"));
+			};
+			t.addEventListener("keydown", u), b(e.responsive, (n) => {
 				a?.(), a = void 0;
 				let r = String(n ?? "").trim();
-				N.value = !!r, M.value = w(r), A.value = !1;
+				P.value = !!r, N.value = w(r), j.value = !1;
 				let i = E(t);
-				if (j.value = i > 0 && M.value != null && i <= M.value, B(), !(e["container-breakpoints"].value && M.value != null) && r) try {
+				if (M.value = i > 0 && N.value != null && i <= N.value, H(), !(e["container-breakpoints"].value && N.value != null) && r) try {
 					let e = C(r), t = (e) => {
-						e && (A.value = e.matches, B());
+						e && (j.value = e.matches, H());
 					};
 					t(e.value);
 					let n = b(e, t);
@@ -112,11 +129,11 @@ c(O, {
 			}, { immediate: !0 }), b(e["bottom-nav-at"], (n) => {
 				o?.(), o = void 0;
 				let r = String(n ?? "").trim();
-				I.value = w(r), P.value = !1;
+				L.value = w(r), F.value = !1;
 				let i = E(t);
-				if (F.value = i > 0 && I.value != null && i <= I.value, B(), !(e["container-breakpoints"].value && I.value != null) && r) try {
+				if (I.value = i > 0 && L.value != null && i <= L.value, H(), !(e["container-breakpoints"].value && L.value != null) && r) try {
 					let e = C(r), t = (e) => {
-						e && (P.value = e.matches, B());
+						e && (F.value = e.matches, H());
 					};
 					t(e.value);
 					let n = b(e, t);
@@ -127,7 +144,7 @@ c(O, {
 					if (!(e instanceof x)) throw e;
 				}
 			}, { immediate: !0 });
-			let u = typeof ResizeObserver == "function" ? (() => {
+			let p = typeof ResizeObserver == "function" ? (() => {
 				let e = S(t);
 				f(() => e.dispose());
 				let n = t.parentElement, r = T(t), a = n ? S(n) : void 0, o = r && r !== n ? S(r) : void 0;
@@ -142,33 +159,42 @@ c(O, {
 					o?.value?.height
 				]), () => {
 					s !== void 0 && cancelAnimationFrame(s), s = requestAnimationFrame(() => {
-						let e = T(t), n = E(t), r = j.value, a = F.value, o = e?.clientWidth ?? 0;
-						L.value = o > 0 && o < window.innerWidth, j.value = n > 0 && M.value != null && n <= M.value, F.value = n > 0 && I.value != null && n <= I.value, (r !== j.value || a !== F.value) && B(), i();
+						let e = T(t), n = E(t), r = M.value, a = I.value, o = e?.clientWidth ?? 0;
+						R.value = o > 0 && o < window.innerWidth, M.value = n > 0 && N.value != null && n <= N.value, I.value = n > 0 && L.value != null && n <= L.value, (r !== M.value || a !== I.value) && H(), i();
 					});
 				});
-			})() : void 0, p = (e) => {
+			})() : void 0, h = (e) => {
 				let t = new Set(e);
 				for (let [e, n] of s) t.has(e) || (n.disconnect(), s.delete(e));
 				for (let t of e) {
 					if (s.has(t)) continue;
 					let e = new MutationObserver(() => {
-						m.value && V();
+						m.value && U();
 					});
 					e.observe(t, {
 						attributeFilter: [
 							"active",
+							"bottom-nav",
+							"bottom-nav-label",
 							"disabled",
 							"href"
 						],
-						attributes: !0
+						attributes: !0,
+						characterData: !0,
+						childList: !0,
+						subtree: !0
 					}), s.set(t, e);
 				}
+			}, g = () => {
+				h([...t.querySelectorAll("ore-sidebar-item")]), U();
 			};
-			return b(r.elements(), (e) => {
-				let t = e.filter((e) => e instanceof HTMLElement && e.tagName.toLowerCase() === "ore-sidebar-item");
-				p(t), V();
-			}, { immediate: !0 }), () => {
-				l.disconnect(), a?.(), o?.(), u?.dispose();
+			b(r.elements(), g, { immediate: !0 });
+			let _ = new MutationObserver(g);
+			return _.observe(t, {
+				childList: !0,
+				subtree: !0
+			}), () => {
+				l.disconnect(), _.disconnect(), t.removeEventListener("keydown", u), a?.(), o?.(), p?.dispose();
 				for (let e of s.values()) e.disconnect();
 				s.clear();
 			};
@@ -177,10 +203,10 @@ c(O, {
         class="mobile-backdrop"
         part="mobile-backdrop"
         type="button"
-        aria-label="Close sidebar"
-        ?hidden=${() => !m.value || !O.value}
-        @click=${() => U(!1, "toggle")}></button>
-      <nav aria-label="${e.label}" part="nav">
+        aria-label="${e["mobile-close-label"]}"
+        ?hidden=${() => !m.value || !k.value}
+        @click=${() => G(!1, "toggle")}></button>
+      <nav aria-label="${e.label}" part="nav" tabindex="-1">
         <div class="sidebar-header" part="header" ?hidden=${() => !i() && !e.collapsible.value}>
           <span class="sidebar-logo" ?hidden=${() => !s()}>
             <slot name="logo"></slot>
@@ -193,12 +219,15 @@ c(O, {
             part="toggle-btn"
             type="button"
             ?hidden=${() => !e.collapsible.value}
-            aria-label="${() => R() ? "Expand sidebar" : "Collapse sidebar"}"
-            aria-expanded="${() => !R()}"
-            @click="${W}">
-            <span class="toggle-icon" aria-hidden="true">
-              <ore-icon name="chevron-left" size="16" stroke-width="2" aria-hidden="true"></ore-icon>
-            </span>
+            aria-label="${() => B() ? e["expand-label"].value : e["collapse-label"].value}"
+            aria-expanded="${() => !B()}"
+            @click="${K}">
+            <ore-icon
+              class="toggle-icon"
+              name=${() => B() ? "panel-left-open" : "panel-left-close"}
+              size="18"
+              stroke-width="2"
+              aria-hidden="true"></ore-icon>
           </button>
         </div>
         <div class="sidebar-content" part="content">
@@ -210,7 +239,7 @@ c(O, {
       </nav>
 
       <div class="bottom-bar" part="bottom-bar" ?hidden=${() => !m.value}>
-        ${() => k.value.map((e) => {
+        ${() => A.value.map((e) => {
 			let t = `bottom-tab${e.active ? " bottom-tab-active" : ""}`;
 			return e.href && !e.disabled ? u`
                 <a
@@ -247,8 +276,8 @@ c(O, {
 		r
 	]
 });
-var k = "ore-sidebar-group";
-c(k, {
+var A = "ore-sidebar-group";
+c(A, {
 	props: {
 		collapsible: m.bool(!1),
 		"default-open": m.bool(!0),
@@ -260,7 +289,7 @@ c(k, {
 		}
 	},
 	setup(e) {
-		let t = _(), n = () => t.has("icon").value, r = d(D);
+		let t = _(), n = () => t.has("icon").value, r = d(O);
 		o({ attr: {
 			"sidebar-bottom-nav": () => r?.mode.value === "bottom-nav" && !r?.mobileOpen.value || void 0,
 			"sidebar-collapsed": () => r?.collapsed.value ? !0 : void 0
@@ -293,22 +322,26 @@ c(k, {
 	},
 	styles: [t, i]
 });
-var A = "ore-sidebar-item";
-c(A, {
+var j = "ore-sidebar-item";
+c(j, {
 	props: {
 		active: m.bool(!1),
+		"bottom-nav": m.bool(!1),
+		"bottom-nav-label": m.string(),
 		disabled: m.bool(!1),
 		href: m.string(),
 		rel: m.string(),
 		target: m.string()
 	},
 	setup(e) {
-		let t = _(), r = () => t.has("icon").value, i = () => t.has("end").value, a = d(D);
+		let t = _(), r = () => t.has("icon").value, i = () => t.has("end").value, a = d(O);
 		o({ attr: {
 			"sidebar-bottom-nav": () => a?.mode.value === "bottom-nav" && !a?.mobileOpen.value || void 0,
 			"sidebar-collapsed": () => a?.collapsed.value ? !0 : void 0
 		} });
-		let s = () => !!e.href.value && !e.disabled.value, c = v(() => n(e.rel.value, e.target.value)), l = () => u`
+		let s = () => !!e.href.value && !e.disabled.value, c = v(() => n(e.rel.value, e.target.value)), l = (e) => {
+			a?.closeOnSelect.value && a.mobileOpen.value && (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || queueMicrotask(a.closeMobile));
+		}, f = () => u`
       <span class="item-icon" part="item-icon" ?hidden=${() => !r()} aria-hidden="true">
         <slot name="icon"></slot>
       </span>
@@ -325,8 +358,9 @@ c(A, {
               href="${e.href}"
               rel="${c}"
               target="${e.target}"
-              aria-current="${() => e.active.value ? "page" : null}">
-              ${l()}
+              aria-current="${() => e.active.value ? "page" : null}"
+              @click=${l}>
+              ${f()}
             </a>
           ` : e.disabled.value ? u`
             <div
@@ -335,7 +369,7 @@ c(A, {
               aria-disabled="true"
               tabindex="-1"
               aria-current="${() => e.active.value ? "page" : null}">
-              ${l()}
+              ${f()}
             </div>
           ` : u`
           <button
@@ -343,8 +377,9 @@ c(A, {
             part="item"
             type="button"
             ?disabled="${e.disabled}"
-            aria-current="${() => e.active.value ? "page" : null}">
-            ${l()}
+            aria-current="${() => e.active.value ? "page" : null}"
+            @click=${l}>
+            ${f()}
           </button>
         `}
     `;
@@ -352,6 +387,6 @@ c(A, {
 	styles: [e, a]
 });
 //#endregion
-export { D as SIDEBAR_CTX, k as SIDEBAR_GROUP_TAG, A as SIDEBAR_ITEM_TAG, O as SIDEBAR_TAG };
+export { O as SIDEBAR_CTX, A as SIDEBAR_GROUP_TAG, j as SIDEBAR_ITEM_TAG, k as SIDEBAR_TAG };
 
 //# sourceMappingURL=sidebar.js.map

package/dist/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":[],"sources":["../src/layout/sidebar/sidebar.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, watch } from '@vielzeug/ripple';\nimport { createElementSize, createMediaQuery, SentinelUnavailableError } from '@vielzeug/sentinel';\n\nimport '../../content/icon/icon';\nimport { coarsePointerMixin, reducedMotionMixin } from '../../styles';\nimport { computeSafeRel } from '../../utils';\nimport sidebarStyles from './sidebar.css?inline';\nimport groupStyles from './sidebar-group.css?inline';\nimport itemStyles from './sidebar-item.css?inline';\n\n// ─── Types ────────────────────────────────────────────────────────────────\n\ntype SidebarVariant = 'floating' | 'inset';\ntype SidebarCollapseSource = 'api' | 'responsive' | 'toggle';\ntype SidebarMobileSource = 'api' | 'responsive' | 'toggle';\ntype SidebarMode = 'bottom-nav' | 'collapsed' | 'default';\n\ntype BottomNavItem = {\n  active: boolean;\n  disabled: boolean;\n  href?: string;\n  iconName?: string;\n  label: string;\n  source: HTMLElement;\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\n/** Context provided by `ore-sidebar` to its `ore-sidebar-group` and `ore-sidebar-item` children. */\nexport type SidebarContext = {\n  collapsed: Readable<boolean>;\n  mobileOpen: Readable<boolean>;\n  mode: Readable<SidebarMode>;\n  variant: Readable<SidebarVariant | undefined>;\n};\n\n/** Injection key for the sidebar context. */\nexport const SIDEBAR_CTX = createContext<SidebarContext>('SidebarContext');\n\n// ─── ore-sidebar styles ──────────────────────────────────────────────────────\n\n/** ore-sidebar element interface */\nexport type SidebarElement = HTMLElement &\n  OreSidebarProps & {\n    /** Close the drawer in bottom-nav mode. */\n    closeMobile(): void;\n    /** Open the drawer in bottom-nav mode. */\n    openMobile(): void;\n    /** Set collapsed state imperatively. */\n    setCollapsed(next: boolean): void;\n    /** Toggle between collapsed and expanded. */\n    toggle(): void;\n    /** Toggle the drawer in bottom-nav mode. */\n    toggleMobile(): void;\n  };\n\n/** Sidebar component properties */\n\nexport type OreSidebarEvents = {\n  'collapsed-change': { collapsed: boolean; source: SidebarCollapseSource };\n  'mobile-open-change': { open: boolean; source: SidebarMobileSource };\n};\n\nexport type OreSidebarGroupEvents = {\n  'open-change': { open: boolean };\n};\n\nexport type OreSidebarProps = {\n  /** CSS media query that switches the sidebar to bottom navigation mode */\n  'bottom-nav-at'?: string;\n  /** Controlled collapsed state */\n  collapsed?: boolean;\n  /** Whether the sidebar supports collapsing */\n  collapsible?: boolean;\n  /** Evaluate responsive and bottom-nav breakpoints against container width only. */\n  'container-breakpoints'?: boolean;\n  /** Initial collapsed state in uncontrolled mode */\n  'default-collapsed'?: boolean;\n  /**\n   * Accessible label for the navigation landmark.\n   * Use to distinguish multiple navigation regions on a page.\n   * @default 'Sidebar navigation'\n   */\n  label?: string;\n  /**\n   * CSS media query that, when it matches, automatically collapses the sidebar.\n   * Unset by default — no automatic collapse.\n   * @example 'responsive=\"(max-width: 768px)\"'\n   */\n  responsive?: string;\n  /** Visual style variant */\n  variant?: SidebarVariant;\n};\n\n/**\n * `ore-sidebar` — A collapsible navigation sidebar with group and item support.\n *\n * @element ore-sidebar\n * @element ore-sidebar-group - Labelled group of navigation items\n * @element ore-sidebar-item - Individual navigation link or button\n *\n * @attr {boolean} collapsed - Controlled collapsed state\n * @attr {boolean} default-collapsed - Initial collapsed state for uncontrolled sidebars\n * @attr {boolean} collapsible - Show the collapse toggle button\n * @attr {string} variant - Visual variant: 'floating' | 'inset'\n * @attr {string} label - Accessible aria-label for the nav landmark\n *\n * @fires collapsed-change - Fired when collapsed state changes. detail: { collapsed: boolean; source: string }\n * @fires mobile-open-change - Fired when mobile overlay open state changes. detail: { open: boolean; source: string }\n *\n * @slot header - Branding or logo content above the nav\n * @slot - Navigation content (ore-sidebar-group / ore-sidebar-item)\n * @slot footer - Footer content below the nav (user info, settings, etc.)\n *\n * @cssprop --sidebar-width - Expanded sidebar width (default: 16rem)\n * @cssprop --sidebar-collapsed-width - Collapsed sidebar width (default: 3.5rem)\n * @cssprop --sidebar-bg - Sidebar background color\n * @cssprop --sidebar-border-color - Border color\n *\n * @part mobile-backdrop - Backdrop shown for mobile overlays.\n * @part nav - Navigation container.\n * @part header - Header container.\n * @part toggle-btn - Shadow part for the `toggle-btn` element.\n * @part content - Content container.\n * @part footer - Footer container.\n * @part bottom-bar - Bottom bar container.\n * @part group - Group container.\n * @part group-header - Group header container.\n * @part group-icon - Group icon container.\n * @part group-label - Group label container.\n * @part group-items - Group items container.\n * @part item-icon - Leading item icon container.\n * @part item-label - Item label container.\n * @part item-end - Trailing item content container.\n * @part item - Item root element.\n * @example\n * ```html\n * <ore-sidebar collapsible label=\"App navigation\">\n *   <span slot=\"header\">My App</span>\n *   <ore-sidebar-group label=\"Main\">\n *     <ore-sidebar-item href=\"/dashboard\" active>Dashboard</ore-sidebar-item>\n *     <ore-sidebar-item href=\"/settings\">Settings</ore-sidebar-item>\n *   </ore-sidebar-group>\n * </ore-sidebar>\n *\n * <!-- Auto-collapse on mobile -->\n * <ore-sidebar collapsible responsive=\"(max-width: 768px)\">...</ore-sidebar>\n * ```\n */\nexport const SIDEBAR_TAG = 'ore-sidebar' as const;\ndefine<OreSidebarProps>(SIDEBAR_TAG, {\n  props: {\n    'bottom-nav-at': prop.string(),\n    collapsed: prop.bool(false),\n    collapsible: prop.bool(false),\n    'container-breakpoints': prop.bool(false),\n    'default-collapsed': prop.bool(false),\n    label: prop.string('Sidebar navigation'),\n    responsive: prop.string(),\n    variant: prop.string<SidebarVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreSidebarEvents>();\n    const slots = useSlots();\n\n    const hasHeader = () => slots.has('header').value;\n    const hasFooter = () => slots.has('footer').value;\n    const hasLogo = () => slots.has('logo').value;\n\n    const isControlled = signal(el.hasAttribute('collapsed'));\n    const collapsedState = signal(isControlled.value ? el.hasAttribute('collapsed') : props['default-collapsed'].value);\n    const isBottomNav = signal(false);\n    const isMobileOpen = signal(false);\n    const bottomNavItems = signal<BottomNavItem[]>([]);\n    const responsiveMediaMatches = signal(false);\n    const responsiveSizeMatches = signal(false);\n    const responsiveMaxWidthPx = signal<number | undefined>(parseMaxWidthPx(props.responsive.value));\n    const hasResponsiveQuery = signal(Boolean(String(props.responsive.value ?? '').trim()));\n    const bottomNavMediaMatches = signal(false);\n    const bottomNavSizeMatches = signal(false);\n    const bottomNavMaxWidthPx = signal<number | undefined>(parseMaxWidthPx(props['bottom-nav-at'].value));\n    const isPreviewMode = signal(false);\n\n    const isCollapsed = () => collapsedState.value;\n    const mode = computed<SidebarMode>(() => {\n      if (isBottomNav.value) return 'bottom-nav';\n\n      return collapsedState.value ? 'collapsed' : 'default';\n    });\n\n    const applyResponsiveState = () => {\n      const useContainerBreakpoints = props['container-breakpoints'].value;\n      const responsiveMatched = useContainerBreakpoints\n        ? responsiveSizeMatches.value\n        : responsiveMediaMatches.value || responsiveSizeMatches.value;\n      const bottomMatched = useContainerBreakpoints\n        ? bottomNavSizeMatches.value\n        : bottomNavMediaMatches.value || bottomNavSizeMatches.value;\n\n      // If the mobile drawer is currently open, stay in bottom-nav mode\n      // regardless of the responsive match. This prevents the drawer from\n      // disappearing mid-animation or if forced open via the API on desktop.\n      if (!isMobileOpen.value) {\n        isBottomNav.value = bottomMatched;\n      }\n\n      if (!bottomMatched && !isMobileOpen.value) {\n        setMobileOpen(false, 'responsive');\n      }\n\n      if (hasResponsiveQuery.value) {\n        setCollapsed(responsiveMatched, 'responsive');\n      }\n    };\n\n    const readBottomNavItems = () => {\n      const next = slots\n        .elements()\n        .value.filter(\n          (el): el is HTMLElement => el instanceof HTMLElement && el.tagName.toLowerCase() === 'ore-sidebar-item',\n        )\n        .map((el, index) => {\n          const iconSlotEl =\n            (el.querySelector(':scope > [slot=\"icon\"]') as HTMLElement | null) ??\n            (el.querySelector('[slot=\"icon\"]') as HTMLElement | null);\n          const directIconName =\n            iconSlotEl?.tagName.toLowerCase() === 'ore-icon' ? iconSlotEl.getAttribute('name') : null;\n          const nestedIconName = iconSlotEl?.querySelector('ore-icon')?.getAttribute('name') ?? null;\n          const rawLabel = (el.textContent ?? '').trim();\n\n          return {\n            active: el.hasAttribute('active'),\n            disabled: el.hasAttribute('disabled'),\n            href: el.getAttribute('href') ?? undefined,\n            iconName: directIconName ?? nestedIconName ?? undefined,\n            label: rawLabel || `Item ${index + 1}`,\n            source: el,\n          } satisfies BottomNavItem;\n        });\n\n      bottomNavItems.value = next;\n    };\n\n    provide(SIDEBAR_CTX, {\n      collapsed: computed(() => !isBottomNav.value && collapsedState.value) as Readable<boolean>,\n      mobileOpen: computed(() => isBottomNav.value && isMobileOpen.value) as Readable<boolean>,\n      mode: mode as Readable<SidebarMode>,\n      variant: props.variant,\n    });\n\n    const setCollapsed = (next: boolean, source: SidebarCollapseSource) => {\n      if (isCollapsed() === next) return;\n\n      if (!isControlled.value) {\n        collapsedState.value = next;\n      }\n\n      emit('collapsed-change', { collapsed: next, source });\n    };\n\n    const setMobileOpen = (next: boolean, source: SidebarMobileSource) => {\n      const open = Boolean(next);\n\n      if (open && !isBottomNav.value) {\n        isBottomNav.value = true;\n      }\n\n      if (!isBottomNav.value && !open) {\n        if (isMobileOpen.value) {\n          isMobileOpen.value = false;\n        }\n\n        return;\n      }\n\n      if (isMobileOpen.value === open) return;\n\n      isMobileOpen.value = open;\n\n      // If closing, re-evaluate responsive state to potentially exit forced bottom-nav mode\n      if (!open) {\n        applyResponsiveState();\n      }\n\n      emit('mobile-open-change', { open, source });\n    };\n\n    const doToggle = () => {\n      setCollapsed(!isCollapsed(), 'toggle');\n    };\n\n    const sidebarEl = el as SidebarElement;\n\n    sidebarEl.setCollapsed = (next) => setCollapsed(Boolean(next), 'api');\n    sidebarEl.toggle = doToggle;\n    sidebarEl.openMobile = () => setMobileOpen(true, 'api');\n    sidebarEl.closeMobile = () => setMobileOpen(false, 'api');\n    sidebarEl.toggleMobile = () => setMobileOpen(!isMobileOpen.value, 'toggle');\n\n    bind({\n      attr: {\n        'data-bottom-nav': () => (isBottomNav.value ? true : undefined),\n        'data-collapsed': () => (isCollapsed() && !isBottomNav.value ? true : undefined),\n        'data-mobile-open': () => (isBottomNav.value && isMobileOpen.value ? true : undefined),\n        'data-preview-mode': () => (isPreviewMode.value ? true : undefined),\n      },\n    });\n\n    onMounted(() => {\n      // Suppress transitions during initial layout so the sidebar doesn't\n      // animate from a collapsed/0 state before the first ResizeObserver fires.\n      el.setAttribute('data-no-transition', '');\n\n      let transitionUnlocked = false;\n      const unlockTransition = () => {\n        if (transitionUnlocked) return;\n\n        transitionUnlocked = true;\n        el.removeAttribute('data-no-transition');\n      };\n\n      // Fallback: unlock after two frames in case ResizeObserver doesn't fire.\n      requestAnimationFrame(() => requestAnimationFrame(unlockTransition));\n\n      let mediaCleanup: (() => void) | undefined;\n      let bottomNavCleanup: (() => void) | undefined;\n      const itemObservers = new Map<HTMLElement, MutationObserver>();\n      const observer = new MutationObserver(() => {\n        if (!el.hasAttribute('collapsed') && !isControlled.value) return;\n\n        isControlled.value = true;\n        collapsedState.value = el.hasAttribute('collapsed');\n      });\n\n      observer.observe(el, {\n        attributeFilter: ['collapsed'],\n        attributes: true,\n      });\n\n      watch(\n        props.responsive,\n        (query) => {\n          mediaCleanup?.();\n          mediaCleanup = undefined;\n\n          const mediaQuery = String(query ?? '').trim();\n\n          hasResponsiveQuery.value = Boolean(mediaQuery);\n          responsiveMaxWidthPx.value = parseMaxWidthPx(mediaQuery);\n          responsiveMediaMatches.value = false;\n\n          const width = readContainerWidth(el);\n\n          responsiveSizeMatches.value =\n            width > 0 && responsiveMaxWidthPx.value != null ? width <= responsiveMaxWidthPx.value : false;\n          applyResponsiveState();\n\n          // For parseable max-width queries, keep behavior container-driven.\n          // This avoids preview viewport controls being overridden by window width.\n          if (props['container-breakpoints'].value && responsiveMaxWidthPx.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                responsiveMediaMatches.value = state.matches;\n                applyResponsiveState();\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        { immediate: true },\n      );\n\n      watch(\n        props['bottom-nav-at'],\n        (query) => {\n          bottomNavCleanup?.();\n          bottomNavCleanup = undefined;\n\n          const mediaQuery = String(query ?? '').trim();\n\n          bottomNavMaxWidthPx.value = parseMaxWidthPx(mediaQuery);\n          bottomNavMediaMatches.value = false;\n\n          const width = readContainerWidth(el);\n\n          bottomNavSizeMatches.value =\n            width > 0 && bottomNavMaxWidthPx.value != null ? width <= bottomNavMaxWidthPx.value : false;\n          applyResponsiveState();\n\n          // For parseable max-width queries, keep behavior container-driven.\n          // This avoids preview viewport controls being overridden by window width.\n          if (props['container-breakpoints'].value && bottomNavMaxWidthPx.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                bottomNavMediaMatches.value = state.matches;\n                applyResponsiveState();\n              }\n            };\n\n            syncMedia(mediaHandle.value);\n\n            const mediaCleanupFn = watch(mediaHandle, syncMedia);\n            bottomNavCleanup = () => {\n              mediaCleanupFn.dispose();\n              mediaHandle.dispose();\n            };\n          } catch (error) {\n            if (!(error instanceof SentinelUnavailableError)) throw error;\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              let rafId: number | undefined;\n\n              const onResize = () => {\n                if (rafId !== undefined) cancelAnimationFrame(rafId);\n\n                rafId = requestAnimationFrame(() => {\n                  const resolvedContainer = resolveContainerElement(el);\n                  const width = readContainerWidth(el);\n                  const responsiveWasMatched = responsiveSizeMatches.value;\n                  const bottomNavWasMatched = bottomNavSizeMatches.value;\n                  const parentWidth = resolvedContainer?.clientWidth ?? 0;\n\n                  isPreviewMode.value = parentWidth > 0 && parentWidth < window.innerWidth;\n\n                  responsiveSizeMatches.value =\n                    width > 0 && responsiveMaxWidthPx.value != null ? width <= responsiveMaxWidthPx.value : false;\n                  bottomNavSizeMatches.value =\n                    width > 0 && bottomNavMaxWidthPx.value != null ? width <= bottomNavMaxWidthPx.value : false;\n\n                  if (\n                    responsiveWasMatched !== responsiveSizeMatches.value ||\n                    bottomNavWasMatched !== bottomNavSizeMatches.value\n                  ) {\n                    applyResponsiveState();\n                  }\n\n                  unlockTransition();\n                });\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                onResize,\n              );\n            })()\n          : undefined;\n\n      const bindItemObservers = (items: HTMLElement[]) => {\n        const set = new Set(items);\n\n        for (const [item, cleanup] of itemObservers) {\n          if (set.has(item)) continue;\n\n          cleanup.disconnect();\n          itemObservers.delete(item);\n        }\n\n        for (const item of items) {\n          if (itemObservers.has(item)) continue;\n\n          const itemObserver = new MutationObserver(() => {\n            // Only update if in bottom-nav mode to minimize re-renders\n            if (isBottomNav.value) {\n              readBottomNavItems();\n            }\n          });\n\n          // Only watch attributes that affect bottom-nav rendering; skip childList/subtree/characterData\n          itemObserver.observe(item, {\n            attributeFilter: ['active', 'disabled', 'href'],\n            attributes: true,\n          });\n          itemObservers.set(item, itemObserver);\n        }\n      };\n\n      watch(\n        slots.elements(),\n        (elements) => {\n          const directItems = elements.filter(\n            (el): el is HTMLElement => el instanceof HTMLElement && el.tagName.toLowerCase() === 'ore-sidebar-item',\n          );\n\n          bindItemObservers(directItems);\n          readBottomNavItems();\n        },\n        { immediate: true },\n      );\n\n      return () => {\n        observer.disconnect();\n        mediaCleanup?.();\n        bottomNavCleanup?.();\n        stopResizeEffect?.dispose();\n\n        for (const itemObserver of itemObservers.values()) {\n          itemObserver.disconnect();\n        }\n\n        itemObservers.clear();\n      };\n    });\n\n    return html`\n      <button\n        class=\"mobile-backdrop\"\n        part=\"mobile-backdrop\"\n        type=\"button\"\n        aria-label=\"Close sidebar\"\n        ?hidden=${() => !isBottomNav.value || !isMobileOpen.value}\n        @click=${() => setMobileOpen(false, 'toggle')}></button>\n      <nav aria-label=\"${props.label}\" part=\"nav\">\n        <div class=\"sidebar-header\" part=\"header\" ?hidden=${() => !hasHeader() && !props.collapsible.value}>\n          <span class=\"sidebar-logo\" ?hidden=${() => !hasLogo()}>\n            <slot name=\"logo\"></slot>\n          </span>\n          <span class=\"sidebar-header-content\">\n            <slot name=\"header\"></slot>\n          </span>\n          <button\n            class=\"toggle-btn\"\n            part=\"toggle-btn\"\n            type=\"button\"\n            ?hidden=${() => !props.collapsible.value}\n            aria-label=\"${() => (isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar')}\"\n            aria-expanded=\"${() => !isCollapsed()}\"\n            @click=\"${doToggle}\">\n            <span class=\"toggle-icon\" aria-hidden=\"true\">\n              <ore-icon name=\"chevron-left\" size=\"16\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n            </span>\n          </button>\n        </div>\n        <div class=\"sidebar-content\" part=\"content\">\n          <slot></slot>\n        </div>\n        <div class=\"sidebar-footer\" part=\"footer\" ?hidden=${() => !hasFooter()}>\n          <slot name=\"footer\"></slot>\n        </div>\n      </nav>\n\n      <div class=\"bottom-bar\" part=\"bottom-bar\" ?hidden=${() => !isBottomNav.value}>\n        ${() =>\n          bottomNavItems.value.map((item) => {\n            const className = `bottom-tab${item.active ? ' bottom-tab-active' : ''}`;\n\n            if (item.href && !item.disabled) {\n              return html`\n                <a\n                  class=\"${className}\"\n                  href=\"${item.href}\"\n                  aria-current=\"${item.active ? 'page' : null}\"\n                  data-active=\"${item.active ? 'true' : null}\">\n                  <span class=\"bottom-tab-icon\" aria-hidden=\"true\" ?hidden=${() => !item.iconName}>\n                    <ore-icon name=\"${item.iconName}\" size=\"18\" stroke-width=\"2\"></ore-icon>\n                  </span>\n                  <span class=\"bottom-tab-label\">${item.label}</span>\n                </a>\n              `;\n            }\n\n            return html`\n              <button\n                class=\"${className}\"\n                type=\"button\"\n                ?disabled=${item.disabled}\n                aria-current=\"${item.active ? 'page' : null}\"\n                data-active=\"${item.active ? 'true' : null}\"\n                @click=${() => item.source.click()}>\n                <span class=\"bottom-tab-icon\" aria-hidden=\"true\" ?hidden=${() => !item.iconName}>\n                  <ore-icon name=\"${item.iconName}\" size=\"18\" stroke-width=\"2\"></ore-icon>\n                </span>\n                <span class=\"bottom-tab-label\">${item.label}</span>\n              </button>\n            `;\n          })}\n      </div>\n    `;\n  },\n  styles: [coarsePointerMixin, reducedMotionMixin, sidebarStyles],\n});\n\n// ─── ore-sidebar-group styles ────────────────────────────────────────────────\n\n/** Sidebar group properties */\nexport type OreSidebarGroupProps = {\n  /** Whether this group can be collapsed */\n  collapsible?: boolean;\n  /** Initial open state in uncontrolled mode */\n  'default-open'?: boolean;\n  /** Accessible label for the group */\n  label?: string;\n  /** Controlled open state */\n  open?: boolean;\n};\n\n/**\n * `ore-sidebar-group` — A labelled section within `ore-sidebar`.\n *\n * @element ore-sidebar-group\n *\n * @attr {string} label - Group label text\n * @attr {boolean} collapsible - Whether this group can be toggled open/closed\n * @attr {boolean} open - Controlled expanded state\n * @attr {boolean} default-open - Initial expanded state in uncontrolled mode\n *\n * @fires open-change - Fired when the group open state changes (collapsible groups only). detail: { open: boolean }\n *\n * @slot - Navigation items (`ore-sidebar-item`)\n * @slot icon - Icon displayed before the label\n *\n * @example\n * ```html\n * <ore-sidebar-group label=\"Main\" collapsible open>\n *   <ore-sidebar-item href=\"/home\">Home</ore-sidebar-item>\n * </ore-sidebar-group>\n * ```\n */\nexport const SIDEBAR_GROUP_TAG = 'ore-sidebar-group' as const;\ndefine<OreSidebarGroupProps>(SIDEBAR_GROUP_TAG, {\n  props: {\n    collapsible: prop.bool(false),\n    'default-open': prop.bool(true),\n    label: prop.string(),\n    open: {\n      default: undefined as boolean | undefined,\n      parse: (value: string | null) => (value == null ? undefined : value === '' || value === 'true'),\n      reflect: false,\n    },\n  },\n  setup(props) {\n    const slots = useSlots();\n\n    const hasIcon = () => slots.has('icon').value;\n    const sidebarCtx = inject(SIDEBAR_CTX);\n\n    bind({\n      attr: {\n        'sidebar-bottom-nav': () =>\n          sidebarCtx?.mode.value === 'bottom-nav' && !sidebarCtx?.mobileOpen.value ? true : undefined,\n        'sidebar-collapsed': () => (sidebarCtx?.collapsed.value ? true : undefined),\n      },\n    });\n\n    const isControlled = () => props.open.value !== undefined;\n    const openState = signal(props['default-open'].value);\n    const isOpen = computed(() => {\n      if (!props.collapsible.value) return true;\n\n      if (isControlled()) return props.open.value ?? false;\n\n      return openState.value;\n    });\n\n    watch(props.open, (value) => {\n      if (value === undefined) return;\n\n      openState.value = value;\n    });\n\n    bind({\n      attr: {\n        open: () => (isOpen.value ? true : undefined),\n      },\n    });\n\n    return html`\n      <details class=\"group\" part=\"group\" ?open=${isOpen}>\n        <summary\n          class=\"group-header\"\n          part=\"group-header\"\n          aria-expanded=\"${() => (props.collapsible.value ? String(props.open.value) : null)}\"\n          @click=${(e: MouseEvent) => {\n            if (!props.collapsible.value) {\n              e.preventDefault();\n            }\n          }}>\n          <span class=\"group-icon\" part=\"group-icon\" ?hidden=${() => !hasIcon()} aria-hidden=\"true\">\n            <slot name=\"icon\"></slot>\n          </span>\n          <span class=\"group-label\" part=\"group-label\">${props.label}</span>\n          <span class=\"chevron\" ?hidden=${() => !props.collapsible.value} aria-hidden=\"true\">\n            <ore-icon name=\"chevron-right\" size=\"12\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </span>\n        </summary>\n        <div class=\"group-items\" part=\"group-items\" role=\"list\">\n          <slot></slot>\n        </div>\n      </details>\n    `;\n  },\n  styles: [reducedMotionMixin, groupStyles],\n});\n\n// ─── ore-sidebar-item styles ─────────────────────────────────────────────────\n\n/** Sidebar item properties */\nexport type OreSidebarItemProps = {\n  /** Whether this item represents the current page/section */\n  active?: boolean;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Navigation href — renders an `<a>` when set, otherwise a `<button>` */\n  href?: string;\n  /**\n   * Relationship of the linked URL (`rel` attribute on the inner `<a>`).\n   * Only applies when `href` is set.\n   */\n  rel?: string;\n  /**\n   * Browsing context for the link (`target` attribute on the inner `<a>`).\n   * Only applies when `href` is set.\n   */\n  target?: string;\n};\n\n/**\n * `ore-sidebar-item` — An individual navigation item in a `ore-sidebar`.\n *\n * Renders as an `<a>` when `href` is provided, otherwise as a `<button>`.\n * Marks the active page via `aria-current=\"page\"` when the `active` attribute is set.\n *\n * @element ore-sidebar-item\n *\n * @attr {string} href - Link URL; renders an anchor when set\n * @attr {boolean} active - Marks the item as the current page\n * @attr {boolean} disabled - Disables the item\n * @attr {string} rel - Anchor `rel` attribute (links only)\n * @attr {string} target - Anchor `target` attribute (links only)\n *\n * @slot - Label text\n * @slot icon - Leading icon\n * @slot end - Trailing content (badge, shortcut, arrow, etc.)\n *\n * @cssprop --sidebar-item-color - Default text color\n * @cssprop --sidebar-item-hover-bg - Hover background\n * @cssprop --sidebar-item-hover-color - Hover text color\n * @cssprop --sidebar-item-active-bg - Active background\n * @cssprop --sidebar-item-active-color - Active text color\n * @cssprop --sidebar-item-indicator - Active indicator bar color\n *\n * @part item - The inner anchor or button element\n * @part item-icon - The icon wrapper\n * @part item-label - The label wrapper\n * @part item-end - The trailing content wrapper\n *\n * @example\n * ```html\n * <ore-sidebar-item href=\"/dashboard\" active>\n *   <span slot=\"icon\">🏠</span>\n *   Dashboard\n * </ore-sidebar-item>\n *\n * <ore-sidebar-item href=\"/users\">\n *   <span slot=\"icon\">👤</span>\n *   Users\n *   <ore-badge slot=\"end\" color=\"primary\">3</ore-badge>\n * </ore-sidebar-item>\n * ```\n */\nexport const SIDEBAR_ITEM_TAG = 'ore-sidebar-item' as const;\ndefine<OreSidebarItemProps>(SIDEBAR_ITEM_TAG, {\n  props: {\n    active: prop.bool(false),\n    disabled: prop.bool(false),\n    href: prop.string(),\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 sidebarCtx = inject(SIDEBAR_CTX);\n\n    bind({\n      attr: {\n        'sidebar-bottom-nav': () =>\n          sidebarCtx?.mode.value === 'bottom-nav' && !sidebarCtx?.mobileOpen.value ? true : undefined,\n        'sidebar-collapsed': () => (sidebarCtx?.collapsed.value ? true : undefined),\n      },\n    });\n\n    const isLink = () => !!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    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              ${renderItemContent()}\n            </a>\n          `;\n        }\n\n        if (props.disabled.value) {\n          return html`\n            <div\n              class=\"item\"\n              part=\"item\"\n              aria-disabled=\"true\"\n              tabindex=\"-1\"\n              aria-current=\"${() => (props.active.value ? 'page' : null)}\">\n              ${renderItemContent()}\n            </div>\n          `;\n        }\n\n        return html`\n          <button\n            class=\"item\"\n            part=\"item\"\n            type=\"button\"\n            ?disabled=\"${props.disabled}\"\n            aria-current=\"${() => (props.active.value ? 'page' : null)}\">\n            ${renderItemContent()}\n          </button>\n        `;\n      }}\n    `;\n  },\n  styles: [coarsePointerMixin, itemStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","names":[],"sources":["../src/layout/sidebar/sidebar.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, watch } from '@vielzeug/ripple';\nimport { createElementSize, createMediaQuery, SentinelUnavailableError } from '@vielzeug/sentinel';\n\nimport '../../content/icon/icon';\nimport { coarsePointerMixin, reducedMotionMixin } from '../../styles';\nimport { computeSafeRel } from '../../utils';\nimport sidebarStyles from './sidebar.css?inline';\nimport groupStyles from './sidebar-group.css?inline';\nimport itemStyles from './sidebar-item.css?inline';\n\n// ─── Types ────────────────────────────────────────────────────────────────\n\ntype SidebarVariant = 'floating' | 'inset';\ntype SidebarCollapseSource = 'api' | 'responsive' | 'toggle';\ntype SidebarMobileSource = 'api' | 'responsive' | 'toggle';\ntype SidebarMode = 'bottom-nav' | 'collapsed' | 'default';\n\ntype BottomNavItem = {\n  active: boolean;\n  disabled: boolean;\n  href?: string;\n  iconName?: string;\n  label: string;\n  source: HTMLElement;\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 deepActiveElement = (): HTMLElement | null => {\n  let active = document.activeElement as HTMLElement | null;\n\n  while (active?.shadowRoot?.activeElement instanceof HTMLElement) {\n    active = active.shadowRoot.activeElement;\n  }\n\n  return active;\n};\n\n/** Context provided by `ore-sidebar` to its `ore-sidebar-group` and `ore-sidebar-item` children. */\nexport type SidebarContext = {\n  closeMobile: () => void;\n  closeOnSelect: Readable<boolean>;\n  collapsed: Readable<boolean>;\n  mobileOpen: Readable<boolean>;\n  mode: Readable<SidebarMode>;\n  variant: Readable<SidebarVariant | undefined>;\n};\n\n/** Injection key for the sidebar context. */\nexport const SIDEBAR_CTX = createContext<SidebarContext>('SidebarContext');\n\n// ─── ore-sidebar styles ──────────────────────────────────────────────────────\n\n/** ore-sidebar element interface */\nexport type SidebarElement = HTMLElement &\n  OreSidebarProps & {\n    /** Close the drawer in bottom-nav mode. */\n    closeMobile(): void;\n    /** Open the drawer in bottom-nav mode. */\n    openMobile(): void;\n    /** Set collapsed state imperatively. */\n    setCollapsed(next: boolean): void;\n    /** Toggle between collapsed and expanded. */\n    toggle(): void;\n    /** Toggle the drawer in bottom-nav mode. */\n    toggleMobile(): void;\n  };\n\n/** Sidebar component properties */\n\nexport type OreSidebarEvents = {\n  'collapsed-change': { collapsed: boolean; source: SidebarCollapseSource };\n  'mobile-open-change': { open: boolean; source: SidebarMobileSource };\n};\n\nexport type OreSidebarGroupEvents = {\n  'open-change': { open: boolean };\n};\n\nexport type OreSidebarProps = {\n  /** CSS media query that switches the sidebar to bottom navigation mode */\n  'bottom-nav-at'?: string;\n  'close-on-select'?: boolean;\n  /** Controlled collapsed state */\n  collapsed?: boolean;\n  /** Whether the sidebar supports collapsing */\n  collapsible?: boolean;\n  'collapse-label'?: string;\n  /** Evaluate responsive and bottom-nav breakpoints against container width only. */\n  'container-breakpoints'?: boolean;\n  /** Initial collapsed state in uncontrolled mode */\n  'default-collapsed'?: boolean;\n  'expand-label'?: string;\n  /**\n   * Accessible label for the navigation landmark.\n   * Use to distinguish multiple navigation regions on a page.\n   * @default 'Sidebar navigation'\n   */\n  label?: string;\n  'mobile-close-label'?: string;\n  /**\n   * CSS media query that, when it matches, automatically collapses the sidebar.\n   * Unset by default — no automatic collapse.\n   * @example 'responsive=\"(max-width: 768px)\"'\n   */\n  responsive?: string;\n  /** Visual style variant */\n  variant?: SidebarVariant;\n};\n\n/**\n * `ore-sidebar` — A collapsible navigation sidebar with group and item support.\n *\n * @element ore-sidebar\n * @element ore-sidebar-group - Labelled group of navigation items\n * @element ore-sidebar-item - Individual navigation link or button\n *\n * @attr {boolean} collapsed - Controlled collapsed state\n * @attr {boolean} default-collapsed - Initial collapsed state for uncontrolled sidebars\n * @attr {boolean} collapsible - Show the collapse toggle button\n * @attr {string} variant - Visual variant: 'floating' | 'inset'\n * @attr {string} label - Accessible aria-label for the nav landmark\n *\n * @fires collapsed-change - Fired when collapsed state changes. detail: { collapsed: boolean; source: string }\n * @fires mobile-open-change - Fired when mobile overlay open state changes. detail: { open: boolean; source: string }\n *\n * @slot header - Branding or logo content above the nav\n * @slot - Navigation content (ore-sidebar-group / ore-sidebar-item)\n * @slot footer - Footer content below the nav (user info, settings, etc.)\n *\n * @cssprop --sidebar-width - Expanded sidebar width (default: 16rem)\n * @cssprop --sidebar-collapsed-width - Collapsed sidebar width (default: 3.5rem)\n * @cssprop --sidebar-bg - Sidebar background color\n * @cssprop --sidebar-border-color - Border color\n *\n * @part mobile-backdrop - Backdrop shown for mobile overlays.\n * @part nav - Navigation container.\n * @part header - Header container.\n * @part toggle-btn - Shadow part for the `toggle-btn` element.\n * @part content - Content container.\n * @part footer - Footer container.\n * @part bottom-bar - Bottom bar container.\n * @part group - Group container.\n * @part group-header - Group header container.\n * @part group-icon - Group icon container.\n * @part group-label - Group label container.\n * @part group-items - Group items container.\n * @part item-icon - Leading item icon container.\n * @part item-label - Item label container.\n * @part item-end - Trailing item content container.\n * @part item - Item root element.\n * @example\n * ```html\n * <ore-sidebar collapsible label=\"App navigation\">\n *   <span slot=\"header\">My App</span>\n *   <ore-sidebar-group label=\"Main\">\n *     <ore-sidebar-item href=\"/dashboard\" active>Dashboard</ore-sidebar-item>\n *     <ore-sidebar-item href=\"/settings\">Settings</ore-sidebar-item>\n *   </ore-sidebar-group>\n * </ore-sidebar>\n *\n * <!-- Auto-collapse on mobile -->\n * <ore-sidebar collapsible responsive=\"(max-width: 768px)\">...</ore-sidebar>\n * ```\n */\nexport const SIDEBAR_TAG = 'ore-sidebar' as const;\ndefine<OreSidebarProps>(SIDEBAR_TAG, {\n  props: {\n    'bottom-nav-at': prop.string(),\n    'close-on-select': prop.bool(false),\n    'collapse-label': prop.string('Collapse sidebar'),\n    collapsed: prop.bool(false),\n    collapsible: prop.bool(false),\n    'container-breakpoints': prop.bool(false),\n    'default-collapsed': prop.bool(false),\n    'expand-label': prop.string('Expand sidebar'),\n    label: prop.string('Sidebar navigation'),\n    'mobile-close-label': prop.string('Close sidebar'),\n    responsive: prop.string(),\n    variant: prop.string<SidebarVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreSidebarEvents>();\n    const slots = useSlots();\n\n    const hasHeader = () => slots.has('header').value;\n    const hasFooter = () => slots.has('footer').value;\n    const hasLogo = () => slots.has('logo').value;\n\n    const isControlled = signal(el.hasAttribute('collapsed'));\n    const collapsedState = signal(isControlled.value ? el.hasAttribute('collapsed') : props['default-collapsed'].value);\n    const isBottomNav = signal(false);\n    const isMobileOpen = signal(false);\n    const bottomNavItems = signal<BottomNavItem[]>([]);\n    const responsiveMediaMatches = signal(false);\n    const responsiveSizeMatches = signal(false);\n    const responsiveMaxWidthPx = signal<number | undefined>(parseMaxWidthPx(props.responsive.value));\n    const hasResponsiveQuery = signal(Boolean(String(props.responsive.value ?? '').trim()));\n    const bottomNavMediaMatches = signal(false);\n    const bottomNavSizeMatches = signal(false);\n    const bottomNavMaxWidthPx = signal<number | undefined>(parseMaxWidthPx(props['bottom-nav-at'].value));\n    const isPreviewMode = signal(false);\n    let focusReturnTarget: HTMLElement | null = null;\n\n    const isCollapsed = () => collapsedState.value;\n    const mode = computed<SidebarMode>(() => {\n      if (isBottomNav.value) return 'bottom-nav';\n\n      return collapsedState.value ? 'collapsed' : 'default';\n    });\n\n    const applyResponsiveState = () => {\n      const useContainerBreakpoints = props['container-breakpoints'].value;\n      const responsiveMatched = useContainerBreakpoints\n        ? responsiveSizeMatches.value\n        : responsiveMediaMatches.value || responsiveSizeMatches.value;\n      const bottomMatched = useContainerBreakpoints\n        ? bottomNavSizeMatches.value\n        : bottomNavMediaMatches.value || bottomNavSizeMatches.value;\n\n      // If the mobile drawer is currently open, stay in bottom-nav mode\n      // regardless of the responsive match. This prevents the drawer from\n      // disappearing mid-animation or if forced open via the API on desktop.\n      if (!isMobileOpen.value) {\n        isBottomNav.value = bottomMatched;\n      }\n\n      if (!bottomMatched && !isMobileOpen.value) {\n        setMobileOpen(false, 'responsive');\n      }\n\n      if (hasResponsiveQuery.value) {\n        setCollapsed(responsiveMatched, 'responsive');\n      }\n    };\n\n    const readBottomNavItems = () => {\n      const directItems = slots\n        .elements()\n        .value.filter(\n          (item): item is HTMLElement =>\n            item instanceof HTMLElement && item.tagName.toLowerCase() === 'ore-sidebar-item',\n        );\n      const promotedItems = [...el.querySelectorAll<HTMLElement>('ore-sidebar-item[bottom-nav]')];\n      const sourceItems = promotedItems.length > 0 ? promotedItems : directItems;\n      const next = sourceItems.map((item, index) => {\n        const el = item;\n        const iconSlotEl =\n          (el.querySelector(':scope > [slot=\"icon\"]') as HTMLElement | null) ??\n          (el.querySelector('[slot=\"icon\"]') as HTMLElement | null);\n        const directIconName =\n          iconSlotEl?.tagName.toLowerCase() === 'ore-icon' ? iconSlotEl.getAttribute('name') : null;\n        const nestedIconName = iconSlotEl?.querySelector('ore-icon')?.getAttribute('name') ?? null;\n        const rawLabel = (el.textContent ?? '').trim();\n\n        return {\n          active: el.hasAttribute('active'),\n          disabled: el.hasAttribute('disabled'),\n          href: el.getAttribute('href') ?? undefined,\n          iconName: directIconName ?? nestedIconName ?? undefined,\n          label: el.getAttribute('bottom-nav-label')?.trim() || rawLabel || `Item ${index + 1}`,\n          source: el,\n        } satisfies BottomNavItem;\n      });\n\n      bottomNavItems.value = next;\n    };\n\n    provide(SIDEBAR_CTX, {\n      closeMobile: () => setMobileOpen(false, 'toggle'),\n      closeOnSelect: props['close-on-select'],\n      collapsed: computed(() => !isBottomNav.value && collapsedState.value) as Readable<boolean>,\n      mobileOpen: computed(() => isBottomNav.value && isMobileOpen.value) as Readable<boolean>,\n      mode: mode as Readable<SidebarMode>,\n      variant: props.variant,\n    });\n\n    const setCollapsed = (next: boolean, source: SidebarCollapseSource) => {\n      if (isCollapsed() === next) return;\n\n      if (!isControlled.value) {\n        collapsedState.value = next;\n      }\n\n      emit('collapsed-change', { collapsed: next, source });\n    };\n\n    const setMobileOpen = (next: boolean, source: SidebarMobileSource) => {\n      const open = Boolean(next);\n\n      if (open && !isBottomNav.value) {\n        isBottomNav.value = true;\n      }\n\n      if (!isBottomNav.value && !open) {\n        if (isMobileOpen.value) {\n          isMobileOpen.value = false;\n        }\n\n        return;\n      }\n\n      if (isMobileOpen.value === open) return;\n\n      if (open) focusReturnTarget = deepActiveElement();\n\n      isMobileOpen.value = open;\n\n      // If closing, re-evaluate responsive state to potentially exit forced bottom-nav mode\n      if (!open) {\n        applyResponsiveState();\n        queueMicrotask(() => {\n          if (focusReturnTarget?.isConnected) focusReturnTarget.focus();\n          focusReturnTarget = null;\n        });\n      } else {\n        queueMicrotask(() => el.shadowRoot?.querySelector<HTMLElement>('nav')?.focus());\n      }\n\n      emit('mobile-open-change', { open, source });\n    };\n\n    const doToggle = () => {\n      setCollapsed(!isCollapsed(), 'toggle');\n    };\n\n    const sidebarEl = el as SidebarElement;\n\n    sidebarEl.setCollapsed = (next) => setCollapsed(Boolean(next), 'api');\n    sidebarEl.toggle = doToggle;\n    sidebarEl.openMobile = () => setMobileOpen(true, 'api');\n    sidebarEl.closeMobile = () => setMobileOpen(false, 'api');\n    sidebarEl.toggleMobile = () => setMobileOpen(!isMobileOpen.value, 'toggle');\n\n    bind({\n      attr: {\n        'data-bottom-nav': () => (isBottomNav.value ? true : undefined),\n        'data-collapsed': () => (isCollapsed() && !isBottomNav.value ? true : undefined),\n        'data-has-logo': () => (hasLogo() ? true : undefined),\n        'data-mobile-open': () => (isBottomNav.value && isMobileOpen.value ? true : undefined),\n        'data-preview-mode': () => (isPreviewMode.value ? true : undefined),\n      },\n    });\n\n    onMounted(() => {\n      // Suppress transitions during initial layout so the sidebar doesn't\n      // animate from a collapsed/0 state before the first ResizeObserver fires.\n      el.setAttribute('data-no-transition', '');\n\n      let transitionUnlocked = false;\n      const unlockTransition = () => {\n        if (transitionUnlocked) return;\n\n        transitionUnlocked = true;\n        el.removeAttribute('data-no-transition');\n      };\n\n      // Fallback: unlock after two frames in case ResizeObserver doesn't fire.\n      requestAnimationFrame(() => requestAnimationFrame(unlockTransition));\n\n      let mediaCleanup: (() => void) | undefined;\n      let bottomNavCleanup: (() => void) | undefined;\n      const itemObservers = new Map<HTMLElement, MutationObserver>();\n      const observer = new MutationObserver(() => {\n        if (!el.hasAttribute('collapsed') && !isControlled.value) return;\n\n        isControlled.value = true;\n        collapsedState.value = el.hasAttribute('collapsed');\n      });\n\n      observer.observe(el, {\n        attributeFilter: ['collapsed'],\n        attributes: true,\n      });\n      const closeOnEscape = (event: KeyboardEvent) => {\n        if (event.key !== 'Escape' || !isMobileOpen.value) return;\n\n        event.preventDefault();\n        setMobileOpen(false, 'toggle');\n      };\n      el.addEventListener('keydown', closeOnEscape);\n\n      watch(\n        props.responsive,\n        (query) => {\n          mediaCleanup?.();\n          mediaCleanup = undefined;\n\n          const mediaQuery = String(query ?? '').trim();\n\n          hasResponsiveQuery.value = Boolean(mediaQuery);\n          responsiveMaxWidthPx.value = parseMaxWidthPx(mediaQuery);\n          responsiveMediaMatches.value = false;\n\n          const width = readContainerWidth(el);\n\n          responsiveSizeMatches.value =\n            width > 0 && responsiveMaxWidthPx.value != null ? width <= responsiveMaxWidthPx.value : false;\n          applyResponsiveState();\n\n          // For parseable max-width queries, keep behavior container-driven.\n          // This avoids preview viewport controls being overridden by window width.\n          if (props['container-breakpoints'].value && responsiveMaxWidthPx.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                responsiveMediaMatches.value = state.matches;\n                applyResponsiveState();\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        { immediate: true },\n      );\n\n      watch(\n        props['bottom-nav-at'],\n        (query) => {\n          bottomNavCleanup?.();\n          bottomNavCleanup = undefined;\n\n          const mediaQuery = String(query ?? '').trim();\n\n          bottomNavMaxWidthPx.value = parseMaxWidthPx(mediaQuery);\n          bottomNavMediaMatches.value = false;\n\n          const width = readContainerWidth(el);\n\n          bottomNavSizeMatches.value =\n            width > 0 && bottomNavMaxWidthPx.value != null ? width <= bottomNavMaxWidthPx.value : false;\n          applyResponsiveState();\n\n          // For parseable max-width queries, keep behavior container-driven.\n          // This avoids preview viewport controls being overridden by window width.\n          if (props['container-breakpoints'].value && bottomNavMaxWidthPx.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                bottomNavMediaMatches.value = state.matches;\n                applyResponsiveState();\n              }\n            };\n\n            syncMedia(mediaHandle.value);\n\n            const mediaCleanupFn = watch(mediaHandle, syncMedia);\n            bottomNavCleanup = () => {\n              mediaCleanupFn.dispose();\n              mediaHandle.dispose();\n            };\n          } catch (error) {\n            if (!(error instanceof SentinelUnavailableError)) throw error;\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              let rafId: number | undefined;\n\n              const onResize = () => {\n                if (rafId !== undefined) cancelAnimationFrame(rafId);\n\n                rafId = requestAnimationFrame(() => {\n                  const resolvedContainer = resolveContainerElement(el);\n                  const width = readContainerWidth(el);\n                  const responsiveWasMatched = responsiveSizeMatches.value;\n                  const bottomNavWasMatched = bottomNavSizeMatches.value;\n                  const parentWidth = resolvedContainer?.clientWidth ?? 0;\n\n                  isPreviewMode.value = parentWidth > 0 && parentWidth < window.innerWidth;\n\n                  responsiveSizeMatches.value =\n                    width > 0 && responsiveMaxWidthPx.value != null ? width <= responsiveMaxWidthPx.value : false;\n                  bottomNavSizeMatches.value =\n                    width > 0 && bottomNavMaxWidthPx.value != null ? width <= bottomNavMaxWidthPx.value : false;\n\n                  if (\n                    responsiveWasMatched !== responsiveSizeMatches.value ||\n                    bottomNavWasMatched !== bottomNavSizeMatches.value\n                  ) {\n                    applyResponsiveState();\n                  }\n\n                  unlockTransition();\n                });\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                onResize,\n              );\n            })()\n          : undefined;\n\n      const bindItemObservers = (items: HTMLElement[]) => {\n        const set = new Set(items);\n\n        for (const [item, cleanup] of itemObservers) {\n          if (set.has(item)) continue;\n\n          cleanup.disconnect();\n          itemObservers.delete(item);\n        }\n\n        for (const item of items) {\n          if (itemObservers.has(item)) continue;\n\n          const itemObserver = new MutationObserver(() => {\n            // Only update if in bottom-nav mode to minimize re-renders\n            if (isBottomNav.value) {\n              readBottomNavItems();\n            }\n          });\n\n          // Watch attributes and content that affect bottom-nav rendering.\n          itemObserver.observe(item, {\n            attributeFilter: ['active', 'bottom-nav', 'bottom-nav-label', 'disabled', 'href'],\n            attributes: true,\n            characterData: true,\n            childList: true,\n            subtree: true,\n          });\n          itemObservers.set(item, itemObserver);\n        }\n      };\n\n      const syncBottomNavItems = () => {\n        bindItemObservers([...el.querySelectorAll<HTMLElement>('ore-sidebar-item')]);\n        readBottomNavItems();\n      };\n      watch(slots.elements(), syncBottomNavItems, { immediate: true });\n      const nestedItemsObserver = new MutationObserver(syncBottomNavItems);\n      nestedItemsObserver.observe(el, { childList: true, subtree: true });\n\n      return () => {\n        observer.disconnect();\n        nestedItemsObserver.disconnect();\n        el.removeEventListener('keydown', closeOnEscape);\n        mediaCleanup?.();\n        bottomNavCleanup?.();\n        stopResizeEffect?.dispose();\n\n        for (const itemObserver of itemObservers.values()) {\n          itemObserver.disconnect();\n        }\n\n        itemObservers.clear();\n      };\n    });\n\n    return html`\n      <button\n        class=\"mobile-backdrop\"\n        part=\"mobile-backdrop\"\n        type=\"button\"\n        aria-label=\"${props['mobile-close-label']}\"\n        ?hidden=${() => !isBottomNav.value || !isMobileOpen.value}\n        @click=${() => setMobileOpen(false, 'toggle')}></button>\n      <nav aria-label=\"${props.label}\" part=\"nav\" tabindex=\"-1\">\n        <div class=\"sidebar-header\" part=\"header\" ?hidden=${() => !hasHeader() && !props.collapsible.value}>\n          <span class=\"sidebar-logo\" ?hidden=${() => !hasLogo()}>\n            <slot name=\"logo\"></slot>\n          </span>\n          <span class=\"sidebar-header-content\">\n            <slot name=\"header\"></slot>\n          </span>\n          <button\n            class=\"toggle-btn\"\n            part=\"toggle-btn\"\n            type=\"button\"\n            ?hidden=${() => !props.collapsible.value}\n            aria-label=\"${() => (isCollapsed() ? props['expand-label'].value : props['collapse-label'].value)}\"\n            aria-expanded=\"${() => !isCollapsed()}\"\n            @click=\"${doToggle}\">\n            <ore-icon\n              class=\"toggle-icon\"\n              name=${() => (isCollapsed() ? 'panel-left-open' : 'panel-left-close')}\n              size=\"18\"\n              stroke-width=\"2\"\n              aria-hidden=\"true\"></ore-icon>\n          </button>\n        </div>\n        <div class=\"sidebar-content\" part=\"content\">\n          <slot></slot>\n        </div>\n        <div class=\"sidebar-footer\" part=\"footer\" ?hidden=${() => !hasFooter()}>\n          <slot name=\"footer\"></slot>\n        </div>\n      </nav>\n\n      <div class=\"bottom-bar\" part=\"bottom-bar\" ?hidden=${() => !isBottomNav.value}>\n        ${() =>\n          bottomNavItems.value.map((item) => {\n            const className = `bottom-tab${item.active ? ' bottom-tab-active' : ''}`;\n\n            if (item.href && !item.disabled) {\n              return html`\n                <a\n                  class=\"${className}\"\n                  href=\"${item.href}\"\n                  aria-current=\"${item.active ? 'page' : null}\"\n                  data-active=\"${item.active ? 'true' : null}\">\n                  <span class=\"bottom-tab-icon\" aria-hidden=\"true\" ?hidden=${() => !item.iconName}>\n                    <ore-icon name=\"${item.iconName}\" size=\"18\" stroke-width=\"2\"></ore-icon>\n                  </span>\n                  <span class=\"bottom-tab-label\">${item.label}</span>\n                </a>\n              `;\n            }\n\n            return html`\n              <button\n                class=\"${className}\"\n                type=\"button\"\n                ?disabled=${item.disabled}\n                aria-current=\"${item.active ? 'page' : null}\"\n                data-active=\"${item.active ? 'true' : null}\"\n                @click=${() => item.source.click()}>\n                <span class=\"bottom-tab-icon\" aria-hidden=\"true\" ?hidden=${() => !item.iconName}>\n                  <ore-icon name=\"${item.iconName}\" size=\"18\" stroke-width=\"2\"></ore-icon>\n                </span>\n                <span class=\"bottom-tab-label\">${item.label}</span>\n              </button>\n            `;\n          })}\n      </div>\n    `;\n  },\n  styles: [coarsePointerMixin, reducedMotionMixin, sidebarStyles],\n});\n\n// ─── ore-sidebar-group styles ────────────────────────────────────────────────\n\n/** Sidebar group properties */\nexport type OreSidebarGroupProps = {\n  /** Whether this group can be collapsed */\n  collapsible?: boolean;\n  /** Initial open state in uncontrolled mode */\n  'default-open'?: boolean;\n  /** Accessible label for the group */\n  label?: string;\n  /** Controlled open state */\n  open?: boolean;\n};\n\n/**\n * `ore-sidebar-group` — A labelled section within `ore-sidebar`.\n *\n * @element ore-sidebar-group\n *\n * @attr {string} label - Group label text\n * @attr {boolean} collapsible - Whether this group can be toggled open/closed\n * @attr {boolean} open - Controlled expanded state\n * @attr {boolean} default-open - Initial expanded state in uncontrolled mode\n *\n * @fires open-change - Fired when the group open state changes (collapsible groups only). detail: { open: boolean }\n *\n * @slot - Navigation items (`ore-sidebar-item`)\n * @slot icon - Icon displayed before the label\n *\n * @example\n * ```html\n * <ore-sidebar-group label=\"Main\" collapsible open>\n *   <ore-sidebar-item href=\"/home\">Home</ore-sidebar-item>\n * </ore-sidebar-group>\n * ```\n */\nexport const SIDEBAR_GROUP_TAG = 'ore-sidebar-group' as const;\ndefine<OreSidebarGroupProps>(SIDEBAR_GROUP_TAG, {\n  props: {\n    collapsible: prop.bool(false),\n    'default-open': prop.bool(true),\n    label: prop.string(),\n    open: {\n      default: undefined as boolean | undefined,\n      parse: (value: string | null) => (value == null ? undefined : value === '' || value === 'true'),\n      reflect: false,\n    },\n  },\n  setup(props) {\n    const slots = useSlots();\n\n    const hasIcon = () => slots.has('icon').value;\n    const sidebarCtx = inject(SIDEBAR_CTX);\n\n    bind({\n      attr: {\n        'sidebar-bottom-nav': () =>\n          sidebarCtx?.mode.value === 'bottom-nav' && !sidebarCtx?.mobileOpen.value ? true : undefined,\n        'sidebar-collapsed': () => (sidebarCtx?.collapsed.value ? true : undefined),\n      },\n    });\n\n    const isControlled = () => props.open.value !== undefined;\n    const openState = signal(props['default-open'].value);\n    const isOpen = computed(() => {\n      if (!props.collapsible.value) return true;\n\n      if (isControlled()) return props.open.value ?? false;\n\n      return openState.value;\n    });\n\n    watch(props.open, (value) => {\n      if (value === undefined) return;\n\n      openState.value = value;\n    });\n\n    bind({\n      attr: {\n        open: () => (isOpen.value ? true : undefined),\n      },\n    });\n\n    return html`\n      <details class=\"group\" part=\"group\" ?open=${isOpen}>\n        <summary\n          class=\"group-header\"\n          part=\"group-header\"\n          aria-expanded=\"${() => (props.collapsible.value ? String(props.open.value) : null)}\"\n          @click=${(e: MouseEvent) => {\n            if (!props.collapsible.value) {\n              e.preventDefault();\n            }\n          }}>\n          <span class=\"group-icon\" part=\"group-icon\" ?hidden=${() => !hasIcon()} aria-hidden=\"true\">\n            <slot name=\"icon\"></slot>\n          </span>\n          <span class=\"group-label\" part=\"group-label\">${props.label}</span>\n          <span class=\"chevron\" ?hidden=${() => !props.collapsible.value} aria-hidden=\"true\">\n            <ore-icon name=\"chevron-right\" size=\"12\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          </span>\n        </summary>\n        <div class=\"group-items\" part=\"group-items\" role=\"list\">\n          <slot></slot>\n        </div>\n      </details>\n    `;\n  },\n  styles: [reducedMotionMixin, groupStyles],\n});\n\n// ─── ore-sidebar-item styles ─────────────────────────────────────────────────\n\n/** Sidebar item properties */\nexport type OreSidebarItemProps = {\n  /** Whether this item represents the current page/section */\n  active?: boolean;\n  'bottom-nav'?: boolean;\n  'bottom-nav-label'?: string;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Navigation href — renders an `<a>` when set, otherwise a `<button>` */\n  href?: string;\n  /**\n   * Relationship of the linked URL (`rel` attribute on the inner `<a>`).\n   * Only applies when `href` is set.\n   */\n  rel?: string;\n  /**\n   * Browsing context for the link (`target` attribute on the inner `<a>`).\n   * Only applies when `href` is set.\n   */\n  target?: string;\n};\n\n/**\n * `ore-sidebar-item` — An individual navigation item in a `ore-sidebar`.\n *\n * Renders as an `<a>` when `href` is provided, otherwise as a `<button>`.\n * Marks the active page via `aria-current=\"page\"` when the `active` attribute is set.\n *\n * @element ore-sidebar-item\n *\n * @attr {string} href - Link URL; renders an anchor when set\n * @attr {boolean} active - Marks the item as the current page\n * @attr {boolean} disabled - Disables the item\n * @attr {string} rel - Anchor `rel` attribute (links only)\n * @attr {string} target - Anchor `target` attribute (links only)\n *\n * @slot - Label text\n * @slot icon - Leading icon\n * @slot end - Trailing content (badge, shortcut, arrow, etc.)\n *\n * @cssprop --sidebar-item-color - Default text color\n * @cssprop --sidebar-item-hover-bg - Hover background\n * @cssprop --sidebar-item-hover-color - Hover text color\n * @cssprop --sidebar-item-active-bg - Active background\n * @cssprop --sidebar-item-active-color - Active text color\n * @cssprop --sidebar-item-indicator - Active indicator bar color\n *\n * @part item - The inner anchor or button element\n * @part item-icon - The icon wrapper\n * @part item-label - The label wrapper\n * @part item-end - The trailing content wrapper\n *\n * @example\n * ```html\n * <ore-sidebar-item href=\"/dashboard\" active>\n *   <span slot=\"icon\">🏠</span>\n *   Dashboard\n * </ore-sidebar-item>\n *\n * <ore-sidebar-item href=\"/users\">\n *   <span slot=\"icon\">👤</span>\n *   Users\n *   <ore-badge slot=\"end\" color=\"primary\">3</ore-badge>\n * </ore-sidebar-item>\n * ```\n */\nexport const SIDEBAR_ITEM_TAG = 'ore-sidebar-item' as const;\ndefine<OreSidebarItemProps>(SIDEBAR_ITEM_TAG, {\n  props: {\n    active: prop.bool(false),\n    'bottom-nav': prop.bool(false),\n    'bottom-nav-label': prop.string(),\n    disabled: prop.bool(false),\n    href: prop.string(),\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 sidebarCtx = inject(SIDEBAR_CTX);\n\n    bind({\n      attr: {\n        'sidebar-bottom-nav': () =>\n          sidebarCtx?.mode.value === 'bottom-nav' && !sidebarCtx?.mobileOpen.value ? true : undefined,\n        'sidebar-collapsed': () => (sidebarCtx?.collapsed.value ? true : undefined),\n      },\n    });\n\n    const isLink = () => !!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    const closeMobileOnSelect = (event: MouseEvent) => {\n      if (!sidebarCtx?.closeOnSelect.value || !sidebarCtx.mobileOpen.value) return;\n      if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;\n\n      queueMicrotask(sidebarCtx.closeMobile);\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=${closeMobileOnSelect}>\n              ${renderItemContent()}\n            </a>\n          `;\n        }\n\n        if (props.disabled.value) {\n          return html`\n            <div\n              class=\"item\"\n              part=\"item\"\n              aria-disabled=\"true\"\n              tabindex=\"-1\"\n              aria-current=\"${() => (props.active.value ? 'page' : null)}\">\n              ${renderItemContent()}\n            </div>\n          `;\n        }\n\n        return html`\n          <button\n            class=\"item\"\n            part=\"item\"\n            type=\"button\"\n            ?disabled=\"${props.disabled}\"\n            aria-current=\"${() => (props.active.value ? 'page' : null)}\"\n            @click=${closeMobileOnSelect}>\n            ${renderItemContent()}\n          </button>\n        `;\n      }}\n    `;\n  },\n  styles: [coarsePointerMixin, itemStyles],\n});\n"],"mappings":"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"}

package/dist/slider.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/field-base.cjs"),a=require("./core/slider.cjs"),o=require("./shared/prop-bundles.cjs"),s=require("./shared/size-presets.cjs"),c=require("./inputs/shared/templates.cjs"),l=require("./inputs/shared/native-field-event.cjs"),u=require("./inputs/slider/slider.css.cjs");let d=require("@vielzeug/ore"),f=require("@vielzeug/ripple");var p=(e,t)=>n=>{e()&&t(n)},m=`ore-slider`;(0,d.define)(m,{formAssociated:!0,props:{...o.themableBundle,...o.sizableBundle,...o.disablableBundle,error:d.prop.string(),from:d.prop.number(0),"from-value-text":d.prop.string(),fullwidth:d.prop.bool(!1),helper:d.prop.string(),max:d.prop.number(100),min:d.prop.number(0),name:d.prop.string(),range:d.prop.bool(!1),step:d.prop.number(1),to:d.prop.number(100),"to-value-text":d.prop.string(),value:d.prop.number(0),"value-text":d.prop.string()},setup(e){let t=(0,d.getHost)(),n=(0,d.useSlots)(),r=e.range.value,o=a.createSliderControl({max:e.max,min:e.min,step:e.step}),s=(0,f.signal)(!1),u=(0,f.computed)(()=>!!e.disabled.value),m=(0,f.signal)(void 0),h=(0,d.createStableId)(`helper`),g=i.createErrorHelperState({error:e.error,helper:e.helper}),_=(0,f.computed)(()=>g.value.errorText),v=(0,f.computed)(()=>g.value.helperText),y=(0,f.computed)(()=>_.value||v.value?h:null);(0,d.bind)({attr:{"data-dragging":()=>s.value?!0:void 0,size:e.size}});let b=(0,f.signal)(`0`);r||((0,d.useField)({disabled:u,value:b}),(0,f.watch)(e.value,e=>{b.value=String(e)},{immediate:!0}),(0,d.bind)({attr:{ariaDescribedby:()=>y.value??null,ariaDisabled:()=>u.value?`true`:null,ariaLabelledby:()=>m.value??null,ariaValuemax:()=>o.max(),ariaValuemin:()=>o.min(),ariaValuenow:()=>Number(b.value||0),ariaValuetext:()=>e[`value-text`].value??null,role:()=>`slider`,tabindex:()=>u.value?null:`0`}}));let x=(0,f.signal)(0),S=(0,f.signal)(100);l.defineFieldValue(t,()=>r?`${x.value},${S.value}`:b.value,e=>{if(r){let[t,n]=e.split(`,`).map(Number);Number.isFinite(t)&&(x.value=o.snap(t)),Number.isFinite(n)&&(S.value=o.snap(n));return}let t=Number(e);Number.isFinite(t)&&(b.value=String(o.snap(t)))}),r&&((0,d.useField)({disabled:u,toFormValue:({from:t,to:n})=>{let r=e.name.value;if(!r)return null;let i=new FormData;return i.append(`${r}[from]`,String(t)),i.append(`${r}[to]`,String(n)),i},value:(0,f.computed)(()=>({from:x.value,to:S.value}))}),(0,f.watch)(e.from,e=>{x.value=o.snap(Number(e))},{immediate:!0}),(0,f.watch)(e.to,e=>{S.value=o.snap(Number(e))},{immediate:!0}));let C=(0,d.ref)(),w=(0,d.ref)(),T=(0,d.ref)(),E=(0,d.ref)(),D=(0,d.ref)(),O=(0,d.createStableId)(`slider-start`),k=(0,d.createStableId)(`slider-end`),A=e=>{let n=o.toPercent(e);t.style.setProperty(`--_thumb-pos`,`${n}%`),t.style.setProperty(`--_fill-start`,`0%`),t.style.setProperty(`--_fill-width`,`${n}%`)},j=()=>{let e=o.toPercent(x.value),n=o.toPercent(S.value);t.style.setProperty(`--_thumb-start`,`${e}%`),t.style.setProperty(`--_thumb-end`,`${n}%`),t.style.setProperty(`--_fill-start`,`${e}%`),t.style.setProperty(`--_fill-width`,`${n-e}%`)},M=()=>{let e=r?`${x.value},${S.value}`:b.value;l.setFieldValue(t,e),l.dispatchNativeFieldEvent(t,`input`),l.dispatchNativeFieldEvent(t,`change`)},N=(t,n)=>{j();let r=e=>{let t=n.getBoundingClientRect();return o.fromClientX(e,t)},i=null,a=e=>{i===`start`?x.value=Math.min(o.snap(e),S.value):i===`end`&&(S.value=Math.max(o.snap(e),x.value)),x.value=o.clamp(x.value),S.value=o.clamp(S.value),j(),M()};(0,d.onEvent)(t,`pointerdown`,p(()=>!u.value,e=>{e.preventDefault();let t=r(e.clientX);i=Math.abs(t-x.value)<=Math.abs(t-S.value)?`start`:`end`,e.target.setPointerCapture(e.pointerId),a(t)})),(0,d.onEvent)(t,`pointermove`,p(()=>!!i,e=>{e.preventDefault(),s.value||=!0,a(r(e.clientX))})),(0,d.onEvent)(t,`pointerup`,p(()=>!!i,e=>{e.preventDefault(),i=null,s.value=!1,e.target.releasePointerCapture(e.pointerId)}));let c=(e,t)=>n=>{if(u.value)return;let r=o.nextFromKey(n.key,e());r!==null&&(n.preventDefault(),t(o.snap(r)),j(),M())},l=E.value,f=D.value;l&&((0,d.onEvent)(l,`keydown`,c(()=>x.value,e=>{x.value=Math.min(e,S.value)})),(0,d.onCleanup)((0,d.bind)({aria:{label:`Range start`,valuemax:()=>S.value,valuemin:()=>o.min(),valuenow:()=>x.value,valuetext:()=>e[`from-value-text`].value??null}},{target:l}))),f&&((0,d.onEvent)(f,`keydown`,c(()=>S.value,e=>{S.value=Math.max(e,x.value)})),(0,d.onCleanup)((0,d.bind)({aria:{label:`Range end`,valuemax:()=>o.max(),valuemin:()=>x.value,valuenow:()=>S.value,valuetext:()=>e[`to-value-text`].value??null}},{target:f})))},P=(e,n)=>{A(Number(b.value));let r=e=>{if(u.value)return;let t=n.getBoundingClientRect(),r=o.fromClientX(e,t);Number(b.value)!==r&&(b.value=r.toString(),A(r),M())},i=!1;(0,d.onEvent)(e,`pointerdown`,p(()=>!u.value,e=>{e.preventDefault(),i=!0,r(e.clientX),e.target.setPointerCapture(e.pointerId)})),(0,d.onEvent)(e,`pointermove`,p(()=>i,e=>{e.preventDefault(),s.value||=!0,r(e.clientX)})),(0,d.onEvent)(e,`pointerup`,p(()=>i,e=>{e.preventDefault(),i=!1,s.value=!1,e.target.releasePointerCapture(e.pointerId)})),(0,d.onEvent)(t,`keydown`,p(()=>!u.value,e=>{let t=Number(b.value||0),n=o.nextFromKey(e.key,t);if(n===null)return;e.preventDefault();let r=o.clamp(n);r!==t&&(b.value=r.toString(),A(r),M())}))};return(0,d.onMounted)(()=>{let e=C.value,t=T.value;if(!(!e||!t)){if(n.has().value&&w.value){let e=(0,d.createStableId)(`slider-label`);w.value.id=e,r||(m.value=e)}r?N(e,t):P(e,t)}}),d.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/field-base.cjs"),a=require("./core/slider.cjs"),o=require("./shared/prop-bundles.cjs"),s=require("./shared/size-presets.cjs"),c=require("./inputs/shared/templates.cjs"),l=require("./inputs/shared/native-field-event.cjs"),u=require("./inputs/slider/slider.css.cjs");let d=require("@vielzeug/ore"),f=require("@vielzeug/ripple");var p=(e,t)=>n=>{e()&&t(n)},m=`ore-slider`;(0,d.define)(m,{formAssociated:!0,props:{...o.themableBundle,...o.sizableBundle,...o.disablableBundle,error:d.prop.string(),from:d.prop.number(0),"from-value-text":d.prop.string(),fullwidth:d.prop.bool(!1),helper:d.prop.string(),max:d.prop.number(100),min:d.prop.number(0),name:d.prop.string(),range:d.prop.bool(!1),step:d.prop.number(1),to:d.prop.number(100),"to-value-text":d.prop.string(),value:d.prop.number(0),"value-text":d.prop.string()},setup(e){let t=(0,d.getHost)(),n=(0,d.useSlots)(),r=e.range.value,o=a.createSliderControl({max:e.max,min:e.min,step:e.step}),s=(0,f.signal)(!1),u=(0,f.computed)(()=>!!e.disabled.value),m=(0,f.signal)(void 0),h=(0,d.createStableId)(`helper`),g=i.createErrorHelperState({error:e.error,helper:e.helper}),_=(0,f.computed)(()=>g.value.errorText),v=(0,f.computed)(()=>g.value.helperText),y=(0,f.computed)(()=>_.value||v.value?h:null);(0,d.bind)({attr:{"data-dragging":()=>s.value?!0:void 0,size:e.size}});let b=(0,f.signal)(`0`);r||((0,d.useField)({disabled:u,value:b}),(0,f.watch)(e.value,e=>{b.value=String(e)},{immediate:!0}),(0,d.bind)({attr:{ariaDescribedby:()=>y.value??null,ariaDisabled:()=>u.value?`true`:null,ariaLabelledby:()=>m.value??null,ariaValuemax:()=>o.max(),ariaValuemin:()=>o.min(),ariaValuenow:()=>Number(b.value||0),ariaValuetext:()=>e[`value-text`].value??null,role:()=>`slider`,tabindex:()=>u.value?null:`0`}}));let x=(0,f.signal)(0),S=(0,f.signal)(100);l.defineFieldValue(t,()=>r?`${x.value},${S.value}`:b.value,e=>{if(r){let[t,n]=e.split(`,`).map(Number);Number.isFinite(t)&&(x.value=o.snap(t)),Number.isFinite(n)&&(S.value=o.snap(n));return}let t=Number(e);Number.isFinite(t)&&(b.value=String(o.snap(t)))}),r&&((0,d.useField)({disabled:u,toFormValue:({from:t,to:n})=>{let r=e.name.value;if(!r)return null;let i=new FormData;return i.append(`${r}[from]`,String(t)),i.append(`${r}[to]`,String(n)),i},value:(0,f.computed)(()=>({from:x.value,to:S.value}))}),(0,f.watch)(e.from,e=>{x.value=o.snap(Number(e))},{immediate:!0}),(0,f.watch)(e.to,e=>{S.value=o.snap(Number(e))},{immediate:!0}));let C=(0,d.ref)(),w=(0,d.ref)(),T=(0,d.ref)(),E=(0,d.ref)(),D=(0,d.ref)(),O=(0,d.createStableId)(`slider-start`),k=(0,d.createStableId)(`slider-end`),A=e=>{let n=o.toPercent(e);t.style.setProperty(`--_thumb-pos`,`${n}%`),t.style.setProperty(`--_fill-start`,`0%`),t.style.setProperty(`--_fill-width`,`${n}%`)},j=()=>{let e=o.toPercent(x.value),n=o.toPercent(S.value);t.style.setProperty(`--_thumb-start`,`${e}%`),t.style.setProperty(`--_thumb-end`,`${n}%`),t.style.setProperty(`--_fill-start`,`${e}%`),t.style.setProperty(`--_fill-width`,`${n-e}%`)},M=()=>{let e=r?`${x.value},${S.value}`:b.value;l.setFieldValue(t,e),l.dispatchNativeFieldEvent(t,`input`),l.dispatchNativeFieldEvent(t,`change`)},N=(t,n)=>{j();let r=e=>{let t=n.getBoundingClientRect();return o.fromClientX(e,t)},i=null,a=e=>{i===`start`?x.value=Math.min(o.snap(e),S.value):i===`end`&&(S.value=Math.max(o.snap(e),x.value)),x.value=o.clamp(x.value),S.value=o.clamp(S.value),j(),M()};(0,d.onEvent)(t,`pointerdown`,p(()=>!u.value,e=>{e.preventDefault();let t=r(e.clientX);i=Math.abs(t-x.value)<=Math.abs(t-S.value)?`start`:`end`,e.target.setPointerCapture(e.pointerId),a(t)})),(0,d.onEvent)(t,`pointermove`,p(()=>!!i,e=>{e.preventDefault(),s.value||=!0,a(r(e.clientX))})),(0,d.onEvent)(t,`pointerup`,p(()=>!!i,e=>{e.preventDefault(),i=null,s.value=!1,e.target.releasePointerCapture(e.pointerId)}));let c=(e,t)=>n=>{if(u.value)return;let r=o.nextFromKey(n.key,e());r!==null&&(n.preventDefault(),t(o.snap(r)),j(),M())},l=E.value,f=D.value;l&&((0,d.onEvent)(l,`keydown`,c(()=>x.value,e=>{x.value=Math.min(e,S.value)})),(0,d.onCleanup)((0,d.bind)({aria:{label:`Range start`,valuemax:()=>S.value,valuemin:()=>o.min(),valuenow:()=>x.value,valuetext:()=>e[`from-value-text`].value??null}},{target:l}))),f&&((0,d.onEvent)(f,`keydown`,c(()=>S.value,e=>{S.value=Math.max(e,x.value)})),(0,d.onCleanup)((0,d.bind)({aria:{label:`Range end`,valuemax:()=>o.max(),valuemin:()=>x.value,valuenow:()=>S.value,valuetext:()=>e[`to-value-text`].value??null}},{target:f})))},P=(e,n)=>{A(Number(b.value));let r=e=>{if(u.value)return;let t=n.getBoundingClientRect(),r=o.fromClientX(e,t);Number(b.value)!==r&&(b.value=r.toString(),A(r),M())},i=!1;(0,d.onEvent)(e,`pointerdown`,p(()=>!u.value,e=>{e.preventDefault(),i=!0,r(e.clientX),e.target.setPointerCapture(e.pointerId)})),(0,d.onEvent)(e,`pointermove`,p(()=>i,e=>{e.preventDefault(),s.value||=!0,r(e.clientX)})),(0,d.onEvent)(e,`pointerup`,p(()=>i,e=>{e.preventDefault(),i=!1,s.value=!1,e.target.releasePointerCapture(e.pointerId)})),(0,d.onEvent)(t,`keydown`,p(()=>!u.value,e=>{let t=Number(b.value||0),n=o.nextFromKey(e.key,t);if(n===null)return;e.preventDefault();let r=o.clamp(n);r!==t&&(b.value=r.toString(),A(r),M())}))};return(0,d.onMounted)(()=>{let e=C.value,t=T.value;if(e&&t){if(n.has().value&&w.value){let e=(0,d.createStableId)(`slider-label`);w.value.id=e,r||(m.value=e)}r?N(e,t):P(e,t)}}),d.html`
       <div class="slider-container" part="slider" ref=${C}>
         <div class="slider-track" part="track" ref=${T}>
           <div class="slider-fill" part="fill"></div>