themelia-react-ui 1.0.2 → 2.0.0

package/dist/{navigation-DyytsLRB.js → navigation-Cbp5V8gG.js}

@@ -1,12 +1,12 @@
 "use client";
 import { useStrings as e } from "./lib/strings.js";
-import { t } from "./utils-BvH9PSmq.js";
-import { a as n, r } from "./typography-BxQgiZyw.js";
-import { t as i } from "./button-BZDasD04.js";
-import { t as a } from "./structure-CRdqVawd.js";
-import { n as o } from "./number-DasMFWEG.js";
-import { t as s } from "./badge-CzId1Wlm.js";
-import { c, i as l, n as u, o as d, r as f, t as p, u as m } from "./item-DE4YnuJx.js";
+import { t } from "./utils-Cospvlj1.js";
+import { a as n, s as r } from "./typography-CAr3dQhX.js";
+import { t as i } from "./button-BS3KDg00.js";
+import { t as a } from "./structure-hzCW-XsV.js";
+import { n as o } from "./number-CKRBYmZK.js";
+import { t as s } from "./badge-0tATj-tW.js";
+import { c, i as l, n as u, o as d, r as f, t as p, u as m } from "./item-xzh8Df65.js";
 import { forwardRef as h, useEffect as g, useMemo as _, useState as v } from "react";
 import { jsx as y, jsxs as b } from "react/jsx-runtime";
 import { Check as x, ChevronDown as S, ChevronRight as C } from "lucide-react";
@@ -23,7 +23,7 @@ function T({ steps: a, currentIndex: s, onStepClick: c, className: l, strings: u
 		className: t("breadcrumb-progress--component", "w-full", l),
 		children: [/* @__PURE__ */ b("div", {
 			className: "flex items-center justify-between mb-space-md",
-			children: [/* @__PURE__ */ b(r, { children: [
+			children: [/* @__PURE__ */ b(n, { children: [
 				d.stepLabel,
 				" ",
 				s + 1,
@@ -39,40 +39,39 @@ function T({ steps: a, currentIndex: s, onStepClick: c, className: l, strings: u
 			})]
 		}), /* @__PURE__ */ y("ol", {
 			className: "m-0 list-none p-0 font-sans flex items-center gap-space-md",
-			children: a.map((e, r) => {
-				let o = r < s, l = r === s, u = c && (o || l);
+			children: a.map((e, n) => {
+				let o = n < s, l = n === s, u = c && (o || l);
 				return /* @__PURE__ */ b("li", {
 					className: "flex min-w-0 flex-1 items-center gap-space-md",
 					children: [/* @__PURE__ */ b(i, {
 						type: "button",
-						"aria-label": `${d.stepLabel} ${r + 1}: ${e.label}`,
-						onClick: () => u && c?.(e.id, r),
+						"aria-label": `${d.stepLabel} ${n + 1}: ${e.label}`,
+						onClick: () => u && c?.(e.id, n),
 						disabled: !u,
 						tone: "secondary",
 						buttonStyle: "ghost",
 						size: "md",
 						className: t("min-w-0 justify-start gap-space-md text-left transition-colors", u && "hover:bg-muted/40", !u && "cursor-default"),
-						children: [/* @__PURE__ */ y(n, {
+						children: [/* @__PURE__ */ y(r, {
 							tag: "span",
 							size: "xs",
 							weight: "semibold",
-							numeric: !0,
-							className: t("flex size-6 shrink-0 items-center justify-center rounded-full", o && "bg-success text-success-foreground", l && "bg-primary text-primary-foreground ring-4 ring-primary/15", !o && !l && "bg-muted text-muted-foreground"),
-							children: o ? /* @__PURE__ */ y(x, { className: "size-icon-md" }) : r + 1
+							className: t("flex size-6 shrink-0 items-center justify-center rounded-full tabular-nums", o && "bg-success text-success-foreground", l && "bg-primary text-primary-foreground ring-4 ring-primary/15", !o && !l && "bg-muted text-muted-foreground"),
+							children: o ? /* @__PURE__ */ y(x, { className: "size-icon-md" }) : n + 1
 						}), /* @__PURE__ */ b("div", {
 							className: "hidden min-w-0 lg:block",
-							children: [/* @__PURE__ */ y(n, {
+							children: [/* @__PURE__ */ y(r, {
 								weight: "semibold",
 								className: t(!l && !o && "text-muted-foreground"),
 								children: e.label
-							}), !!e.hint && /* @__PURE__ */ y(n, {
+							}), !!e.hint && /* @__PURE__ */ y(r, {
 								size: "xs",
 								type: "discrete",
 								className: "truncate",
 								children: e.hint
 							})]
 						})]
-					}), r < a.length - 1 && /* @__PURE__ */ y("div", { className: t("h-px flex-1", o ? "bg-success" : "bg-border") })]
+					}), n < a.length - 1 && /* @__PURE__ */ y("div", { className: t("h-px flex-1", o ? "bg-success" : "bg-border") })]
 				}, e.id);
 			})
 		})]
@@ -107,7 +106,7 @@ function E({ title: e, items: n, activeId: r, onSelect: i, className: a }) {
 						children: e.hint
 					})] }),
 					/* @__PURE__ */ b(u, { children: [typeof e.count == "number" && /* @__PURE__ */ y(s, {
-						tone: a ? "primary" : "secondary",
+						tone: "secondary",
 						className: "tabular-nums",
 						children: e.count
 					}), /* @__PURE__ */ y(C, { className: t("size-icon shrink-0 text-muted-foreground/60", a && "text-primary-accent") })] })
@@ -119,8 +118,8 @@ function E({ title: e, items: n, activeId: r, onSelect: i, className: a }) {
 E.displayName = "CategoryNav";
 //#endregion
 //#region src/components/layout/navigation/section-nav/section-nav.tsx
-var D = { navigationLabel: "Section navigation" }, O = h(function({ items: r, rootMargin: i = "-40% 0px -50% 0px", className: o, onSelect: s, strings: c, "aria-label": l, ...u }, d) {
-	let f = e(D, c), [p, m] = v(r[0]?.id ?? null);
+var D = { navigationLabel: "Section navigation" }, O = h(function({ items: n, rootMargin: i = "-40% 0px -50% 0px", className: o, onSelect: s, strings: c, "aria-label": l, ...u }, d) {
+	let f = e(D, c), [p, m] = v(n[0]?.id ?? null);
 	return g(() => {
 		let e = new IntersectionObserver((e) => {
 			let t = e.find((e) => e.isIntersecting);
@@ -129,11 +128,11 @@ var D = { navigationLabel: "Section navigation" }, O = h(function({ items: r, ro
 			rootMargin: i,
 			threshold: 0
 		});
-		return r.forEach((t) => {
+		return n.forEach((t) => {
 			let n = document.getElementById(t.id);
 			n && e.observe(n);
 		}), () => e.disconnect();
-	}, [r, i]), /* @__PURE__ */ y("nav", {
+	}, [n, i]), /* @__PURE__ */ y("nav", {
 		ref: d,
 		className: t("section-nav--component", o),
 		"aria-label": l ?? f.navigationLabel,
@@ -141,8 +140,8 @@ var D = { navigationLabel: "Section navigation" }, O = h(function({ items: r, ro
 		children: /* @__PURE__ */ y(a, {
 			gap: "2xs",
 			className: "section-nav--items",
-			children: r.map((e) => {
-				let r = e.icon, i = p === e.id;
+			children: n.map((e) => {
+				let n = e.icon, i = p === e.id;
 				return /* @__PURE__ */ b("a", {
 					href: `#${e.id}`,
 					onClick: (t) => {
@@ -152,7 +151,7 @@ var D = { navigationLabel: "Section navigation" }, O = h(function({ items: r, ro
 						}), m(e.id), s?.(e.id);
 					},
 					className: t("flex items-center gap-space-md rounded-inner px-space-md py-row-y transition-colors", i ? "bg-primary/10 text-primary-accent" : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"),
-					children: [!!r && /* @__PURE__ */ y(r, { className: "size-icon-md shrink-0" }), /* @__PURE__ */ y(n, {
+					children: [!!n && /* @__PURE__ */ y(n, { className: "size-icon-md shrink-0" }), /* @__PURE__ */ y(r, {
 						tag: "span",
 						weight: i ? "semibold" : "medium",
 						children: e.label
@@ -204,7 +203,7 @@ var M = h(function({ items: o, groups: c, currentPath: l, className: u, itemClas
 				return /* @__PURE__ */ b(a, {
 					gap: "2xs",
 					className: "side-nav--group",
-					children: [!!c && (e.collapsible === !1 ? j(e.label) ? /* @__PURE__ */ y(r, {
+					children: [!!c && (e.collapsible === !1 ? j(e.label) ? /* @__PURE__ */ y(n, {
 						tag: "div",
 						className: "px-row-x py-row-y",
 						children: e.label
@@ -217,7 +216,7 @@ var M = h(function({ items: o, groups: c, currentPath: l, className: u, itemClas
 						onClick: () => O(e.id),
 						className: t("h-auto min-h-action-sm justify-between px-row-x py-row-y", "text-muted-foreground", "hover:text-foreground transition-colors"),
 						"aria-expanded": !o,
-						children: [j(e.label) ? /* @__PURE__ */ y(r, {
+						children: [j(e.label) ? /* @__PURE__ */ y(n, {
 							tag: "span",
 							children: e.label
 						}) : e.label, /* @__PURE__ */ y(S, {
@@ -228,15 +227,15 @@ var M = h(function({ items: o, groups: c, currentPath: l, className: u, itemClas
 						gap: "2xs",
 						className: "side-nav--items",
 						children: e.items.map((e) => {
-							let r = e.icon, i = A(e.href) === T;
+							let n = e.icon, i = A(e.href) === T;
 							return /* @__PURE__ */ b("a", {
 								href: e.disabled ? void 0 : e.href,
 								"aria-current": i ? "page" : void 0,
 								"aria-disabled": e.disabled || void 0,
 								className: t("group flex items-center gap-space-md rounded-inner px-row-x py-row-y", "text-sm transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "hover:bg-muted/60", e.disabled && "pointer-events-none opacity-50", i && M, d),
 								children: [
-									!!r && /* @__PURE__ */ y(r, { className: t("size-icon shrink-0", i ? "text-primary-accent" : "text-muted-foreground") }),
-									j(e.label) ? /* @__PURE__ */ y(n, {
+									!!n && /* @__PURE__ */ y(n, { className: t("size-icon shrink-0", i ? "text-primary-accent" : "text-muted-foreground") }),
+									j(e.label) ? /* @__PURE__ */ y(r, {
 										tag: "span",
 										size: "inherit",
 										weight: "medium",
@@ -245,7 +244,7 @@ var M = h(function({ items: o, groups: c, currentPath: l, className: u, itemClas
 										children: e.label
 									}) : e.label,
 									!!e.badge && /* @__PURE__ */ y(s, {
-										tone: i ? "primary" : "secondary",
+										tone: "secondary",
 										className: "shrink-0",
 										children: e.badge
 									})
@@ -262,4 +261,4 @@ M.displayName = "SideNav";
 //#endregion
 export { E as a, D as i, k as n, T as o, O as r, w as s, M as t };
 
-//# sourceMappingURL=navigation-DyytsLRB.js.map
+//# sourceMappingURL=navigation-Cbp5V8gG.js.map

package/dist/navigation-Cbp5V8gG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-Cbp5V8gG.js","names":["DisplayLabel","Text","Button","Stack","Percent","Badge","ItemDescription","ItemActions","ItemGroup","ItemContent","Item","ItemTitle","defaultBreadcrumbProgressStrings","BreadcrumbProgress","stringsProp","strings","useStrings","cn","className","currentIndex","steps","isCompleted","idx","isCurrent","isClickable","onStepClick","step","Check","CategoryNav","title","items","Icon","it","active","activeId","onSelect","ItemMedia","ChevronRight","defaultSectionNavStrings","SectionNav","forwardRef","ariaLabel","rootProps","setActive","useState","useEffect","obs","visible","entries","el","rootMargin","isActive","e","defaultSideNavStrings","normalizePath","rawUrl","baseOrigin","trimmed","isSimpleText","value","SideNav","groupsProp","groups","useMemo","activePath","currentPath","activeNormalized","g","item","normalizedPath","b","a","collapsed","setCollapsed","toggleGroup","prev","id","resolvedActive","activeItemClassName","isCollapsed","group","showLabel","shouldRenderItems","ChevronDown","itemClassName"],"sources":["../src/components/layout/navigation/breadcrumb-progress/types.ts","../src/components/layout/navigation/breadcrumb-progress/breadcrumb-progress.tsx","../src/components/layout/navigation/category-nav/category-nav.tsx","../src/components/layout/navigation/section-nav/section-nav.tsx","../src/components/layout/navigation/side-nav.tsx"],"sourcesContent":["import type { StringsProp } from '../../../../lib/strings';\n\nexport interface BreadcrumbProgressStep {\n\t/** Stable identity for this entry. */\n\tid: string;\n\t/** Display label. */\n\tlabel: string;\n\t/** Short guidance shown beneath the control. */\n\thint?: string;\n}\n\nexport interface BreadcrumbProgressStrings {\n\tstepLabel: string;\n\tofLabel: string;\n}\n\nexport const defaultBreadcrumbProgressStrings: BreadcrumbProgressStrings = {\n\tstepLabel: 'Step',\n\tofLabel: 'of',\n};\n\nexport interface BreadcrumbProgressProps {\n\t/** Steps in the flow, in order. */\n\tsteps: BreadcrumbProgressStep[];\n\t/** Zero-based position of the active step. */\n\tcurrentIndex: number;\n\tonStepClick?: (id: string, index: number) => void;\n\tclassName?: string;\n\t/** Overrides this surface's own copy. */\n\tstrings?: StringsProp<BreadcrumbProgressStrings>;\n}\n","/**\n * BreadcrumbProgress — wizard / multi-step navigation with completed,\n * current, and upcoming states. Click any completed step to jump back.\n */\nimport { Check } from 'lucide-react';\nimport { Button } from '../../../base/buttons';\nimport { Percent } from '../../../primitives';\nimport { DisplayLabel, Text } from '../../../typography';\nimport { useStrings } from '../../../../lib/strings';\nimport { cn } from '../../../../lib/utils';\n\nimport {\n\tdefaultBreadcrumbProgressStrings,\n\ttype BreadcrumbProgressProps,\n} from './types';\n\nexport function BreadcrumbProgress({ steps, currentIndex, onStepClick, className, strings: stringsProp }: BreadcrumbProgressProps) {\n\tconst strings = useStrings(defaultBreadcrumbProgressStrings, stringsProp);\n\n\treturn (\n\t\t<div className={cn('breadcrumb-progress--component', 'w-full', className)}>\n\t\t\t<div className=\"flex items-center justify-between mb-space-md\">\n\t\t\t\t<DisplayLabel>\n\t\t\t\t\t{strings.stepLabel} {currentIndex + 1} {strings.ofLabel} {steps.length}\n\t\t\t\t</DisplayLabel>\n\t\t\t\t<Percent value={Math.round(((currentIndex + 1) / steps.length) * 100)} scaled size=\"xs\" weight=\"semibold\" />\n\t\t\t</div>\n\t\t\t<ol className=\"m-0 list-none p-0 font-sans flex items-center gap-space-md\">\n\t\t\t\t{steps.map((step, idx) => {\n\t\t\t\t\tconst isCompleted = idx < currentIndex;\n\t\t\t\t\tconst isCurrent = idx === currentIndex;\n\t\t\t\t\tconst isClickable = onStepClick && (isCompleted || isCurrent);\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<li key={step.id} className=\"flex min-w-0 flex-1 items-center gap-space-md\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\taria-label={`${strings.stepLabel} ${idx + 1}: ${step.label}`}\n\t\t\t\t\t\t\t\tonClick={() => isClickable && onStepClick?.(step.id, idx)}\n\t\t\t\t\t\t\t\tdisabled={!isClickable}\n\t\t\t\t\t\t\t\ttone=\"secondary\"\n\t\t\t\t\t\t\t\tbuttonStyle=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t'min-w-0 justify-start gap-space-md text-left transition-colors',\n\t\t\t\t\t\t\t\t\tisClickable && 'hover:bg-muted/40',\n\t\t\t\t\t\t\t\t\t!isClickable && 'cursor-default',\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\ttag=\"span\"\n\t\t\t\t\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\t\t\t\t\tweight=\"semibold\"\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t'flex size-6 shrink-0 items-center justify-center rounded-full tabular-nums',\n\t\t\t\t\t\t\t\t\t\tisCompleted && 'bg-success text-success-foreground',\n\t\t\t\t\t\t\t\t\t\tisCurrent && 'bg-primary text-primary-foreground ring-4 ring-primary/15',\n\t\t\t\t\t\t\t\t\t\t!isCompleted && !isCurrent && 'bg-muted text-muted-foreground',\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{isCompleted ? <Check className=\"size-icon-md\" /> : idx + 1}\n\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t<div className=\"hidden min-w-0 lg:block\">\n\t\t\t\t\t\t\t\t\t<Text weight=\"semibold\" className={cn(!isCurrent && !isCompleted && 'text-muted-foreground')}>{step.label}</Text>\n\t\t\t\t\t\t\t\t\t{!!step.hint && <Text size=\"xs\" type=\"discrete\" className=\"truncate\">{step.hint}</Text>}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t{idx < steps.length - 1 && (\n\t\t\t\t\t\t\t\t<div className={cn('h-px flex-1', isCompleted ? 'bg-success' : 'bg-border')} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</li>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</ol>\n\t\t</div>\n\t);\n}\n\nBreadcrumbProgress.displayName = 'BreadcrumbProgress';\n","/**\n * CategoryNav — vertical icon + label list with optional count badge per row.\n * Use as a sidebar nav for filtering or category browsing.\n */\nimport { ChevronRight } from 'lucide-react';\nimport { Badge } from '../../../base/badge';\nimport {\n\tItem,\n\tItemActions,\n\tItemContent,\n\tItemDescription,\n\tItemGroup,\n\tItemMedia,\n\tItemTitle,\n} from '../../../base/item';\nimport { cn } from '../../../../lib/utils';\n\nimport type { CategoryNavProps } from './types';\n\nexport function CategoryNav({ title, items, activeId, onSelect, className }: CategoryNavProps) {\n\treturn (\n\t\t<nav\n\t\t\tdata-component=\"category-nav\"\n\t\t\tdata-slot=\"category-nav\"\n\t\t\taria-label={title}\n\t\t\tclassName={cn('category-nav--component min-w-0', className)}\n\t\t>\n\t\t\t<ItemGroup>\n\t\t\t\t{items.map((it) => {\n\t\t\t\t\tconst Icon = it.icon;\n\t\t\t\t\tconst active = it.id === activeId;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\tkey={it.id}\n\t\t\t\t\t\t\t// Not `size=\"sm\"`. That maps to the primitive `xs` scale, which\n\t\t\t\t\t\t\t// shrinks media icons to 12px for a genuinely compact row — but\n\t\t\t\t\t\t\t// this row carries a title, a description and a badge and stands\n\t\t\t\t\t\t\t// 58px tall. The result was a 12px leading icon beside a 16px\n\t\t\t\t\t\t\t// chevron, because a `size-` class opts an icon out of that\n\t\t\t\t\t\t\t// scaling rule. The default scale matches `base/item`'s own\n\t\t\t\t\t\t\t// reference row at the same height.\n\t\t\t\t\t\t\tonClick={() => onSelect?.(it.id)}\n\t\t\t\t\t\t\tdata-state={active ? 'active' : 'inactive'}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t// The selected tint spans the row, so the row needs horizontal\n\t\t\t\t\t\t\t\t// padding of its own or the icon sits 1px from the tint's edge.\n\t\t\t\t\t\t\t\t// `px-space-md` is what `SectionNav` uses for the same job.\n\t\t\t\t\t\t\t\t'cursor-pointer rounded-inner px-space-md transition-colors',\n\t\t\t\t\t\t\t\tactive ? 'bg-primary/10 text-primary-accent' : 'hover:bg-muted/50',\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{!!Icon && (\n\t\t\t\t\t\t\t\t<ItemMedia variant=\"icon\" className={cn(active ? 'text-primary-accent' : 'text-muted-foreground')}>\n\t\t\t\t\t\t\t\t\t<Icon />\n\t\t\t\t\t\t\t\t</ItemMedia>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<ItemContent>\n\t\t\t\t\t\t\t\t<ItemTitle bold={active}>{it.label}</ItemTitle>\n\t\t\t\t\t\t\t\t{!!it.hint && <ItemDescription clamp={1}>{it.hint}</ItemDescription>}\n\t\t\t\t\t\t\t</ItemContent>\n\t\t\t\t\t\t\t<ItemActions>\n\t\t\t\t\t\t\t\t{typeof it.count === 'number' && (\n\t\t\t\t\t\t\t\t\t<Badge tone=\"secondary\" className=\"tabular-nums\">\n\t\t\t\t\t\t\t\t\t\t{it.count}\n\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<ChevronRight\n\t\t\t\t\t\t\t\t\tclassName={cn('size-icon shrink-0 text-muted-foreground/60', active && 'text-primary-accent')}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ItemActions>\n\t\t\t\t\t\t</Item>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</ItemGroup>\n\t\t</nav>\n\t);\n}\n\nCategoryNav.displayName = 'CategoryNav';\n","/**\n * SectionNav — sticky in-page anchor nav. Pass a list of section ids; the active one\n * is tracked via IntersectionObserver and the matching item is highlighted. Click to\n * scroll to that section. Pure JS — no router required.\n */\nimport { forwardRef, useEffect, useState, type ComponentPropsWithoutRef } from 'react';\nimport type { LucideIcon } from 'lucide-react';\nimport { Text } from '../../../typography';\nimport { Stack } from '../../../base/structure';\nimport { useStrings, type StringsProp } from '../../../../lib/strings';\nimport { cn } from '../../../../lib/utils';\n\nexport interface SectionNavStrings {\n\tnavigationLabel: string;\n}\n\nexport const defaultSectionNavStrings: SectionNavStrings = {\n\tnavigationLabel: 'Section navigation',\n};\n\nexport interface SectionNavItem {\n\t/** Stable identity for this entry. */\n\tid: string;\n\t/** Display label. */\n\tlabel: string;\n\t/** Leading glyph. */\n\ticon?: LucideIcon;\n}\n\nexport interface SectionNavProps extends Omit<ComponentPropsWithoutRef<'nav'>, 'children' | 'onSelect'> {\n\t/** Entries to render, in order. */\n\titems: SectionNavItem[];\n\trootMargin?: string;\n\tonSelect?: (id: string) => void;\n\t/** Overrides this surface's own copy. */\n\tstrings?: StringsProp<SectionNavStrings>;\n}\n\nexport const SectionNav = forwardRef<HTMLElement, SectionNavProps>(function SectionNav({\n\titems,\n\trootMargin = '-40% 0px -50% 0px',\n\tclassName,\n\tonSelect,\n\tstrings: stringsProp,\n\t'aria-label': ariaLabel,\n\t...rootProps\n}, ref) {\n\tconst strings = useStrings(defaultSectionNavStrings, stringsProp);\n\tconst [active, setActive] = useState<string | null>(items[0]?.id ?? null);\n\n\tuseEffect(() => {\n\t\tconst obs = new IntersectionObserver(\n\t\t\t(entries) => {\n\t\t\t\tconst visible = entries.find((e) => e.isIntersecting);\n\t\t\t\tif (visible?.target.id) setActive(visible.target.id);\n\t\t\t},\n\t\t\t{ rootMargin, threshold: 0 },\n\t\t);\n\t\titems.forEach((it) => {\n\t\t\tconst el = document.getElementById(it.id);\n\t\t\tif (el) obs.observe(el);\n\t\t});\n\t\treturn () => obs.disconnect();\n\t}, [items, rootMargin]);\n\n\treturn (\n\t\t<nav\n\t\t\tref={ref}\n\t\t\tclassName={cn('section-nav--component', className)}\n\t\t\taria-label={ariaLabel ?? strings.navigationLabel}\n\t\t\t{...rootProps}\n\t\t>\n\t\t\t<Stack gap=\"2xs\" className=\"section-nav--items\">\n\t\t\t\t{items.map((it) => {\n\t\t\t\tconst Icon = it.icon;\n\t\t\t\tconst isActive = active === it.id;\n\t\t\t\treturn (\n\t\t\t\t\t<a\n\t\t\t\t\t\tkey={it.id}\n\t\t\t\t\t\thref={`#${it.id}`}\n\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\tdocument.getElementById(it.id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n\t\t\t\t\t\t\tsetActive(it.id);\n\t\t\t\t\t\t\tonSelect?.(it.id);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t'flex items-center gap-space-md rounded-inner px-space-md py-row-y transition-colors',\n\t\t\t\t\t\t\tisActive ? 'bg-primary/10 text-primary-accent' : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground',\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!!Icon && <Icon className=\"size-icon-md shrink-0\" />}\n\t\t\t\t\t\t<Text tag=\"span\" weight={isActive ? 'semibold' : 'medium'}>{it.label}</Text>\n\t\t\t\t\t</a>\n\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</Stack>\n\t\t</nav>\n\t);\n});\n\nSectionNav.displayName = 'SectionNav';\n","/**\n * SideNav — collapsible vertical sidebar navigation. Items can be grouped\n * with a heading and optionally collapsed; each item supports an icon, badge,\n * and active-state highlight. The active item is matched by deepest path\n * prefix so nested routes still highlight their parent group.\n *\n * Pass `items` for the short flat-list default. Use `groups` only when the\n * navigation needs headings or collapsible sections.\n */\nimport { ChevronDown, type LucideIcon } from 'lucide-react';\nimport { forwardRef, useMemo, useState, type ComponentPropsWithoutRef, type ReactNode } from 'react';\n\nimport { Badge } from '../../base/badge';\nimport { Button } from '../../base/buttons';\nimport { Stack } from '../../base/structure';\nimport { DisplayLabel, Text } from '../../typography';\nimport { useStrings, type StringsProp } from '../../../lib/strings';\nimport { cn } from '../../../lib/utils';\n\nexport interface SideNavStrings {\n\tnavigationLabel: string;\n}\n\nexport const defaultSideNavStrings: SideNavStrings = {\n\tnavigationLabel: 'Side navigation',\n};\n\nexport interface SideNavItem {\n\t/** Display label. */\n\tlabel: ReactNode;\n\t/** Destination for the entry, when it navigates. */\n\thref: string;\n\t/** Leading glyph. */\n\ticon?: LucideIcon;\n\t/** Chip rendered beside the label. */\n\tbadge?: ReactNode;\n\t/** Disables the control. */\n\tdisabled?: boolean;\n}\n\nexport interface SideNavGroup {\n\t/** Stable identity for this entry. */\n\tid: string;\n\t/** Display label. */\n\tlabel?: ReactNode;\n\t/** Entries to render, in order. */\n\titems: SideNavItem[];\n\tdefaultCollapsed?: boolean;\n\tcollapsible?: boolean;\n}\n\ninterface SideNavSharedProps extends Omit<ComponentPropsWithoutRef<'nav'>, 'children'> {\n\t/** Path of the active route, used to mark the current entry. */\n\tcurrentPath?: string;\n\titemClassName?: string;\n\tactiveItemClassName?: string;\n\t/** Overrides this surface's own copy. */\n\tstrings?: StringsProp<SideNavStrings>;\n}\n\nexport type SideNavProps = SideNavSharedProps & (\n\t| {\n\t\t/** Short default for one flat navigation list. */\n\t\titems: SideNavItem[];\n\t\t/** Sections of the settings navigation. */\n\t\tgroups?: never;\n\t}\n\t| {\n\t\t/** Grouped navigation with optional headings and collapse behavior. */\n\t\tgroups: SideNavGroup[];\n\t\titems?: never;\n\t}\n);\n\nfunction normalizePath(rawUrl: string): string {\n\tif (rawUrl.length === 0) return '/';\n\ttry {\n\t\tconst baseOrigin = typeof window !== 'undefined' ? window.location.origin : 'http://localhost';\n\t\tconst parsed = new URL(rawUrl, baseOrigin);\n\t\tconst trimmed = parsed.pathname.replace(/\\/+$/, '');\n\t\treturn trimmed.length > 0 ? trimmed : '/';\n\t} catch {\n\t\tconst clean = rawUrl.split('?')[0] ?? rawUrl;\n\t\tconst trimmed = clean.replace(/\\/+$/, '');\n\t\treturn trimmed.length > 0 ? trimmed : '/';\n\t}\n}\n\nfunction isSimpleText(value: ReactNode): value is string | number | bigint {\n\treturn typeof value === 'string' || typeof value === 'number' || typeof value === 'bigint';\n}\n\nexport const SideNav = forwardRef<HTMLElement, SideNavProps>(function SideNav({\n\titems,\n\tgroups: groupsProp,\n\tcurrentPath,\n\tclassName,\n\titemClassName,\n\tactiveItemClassName,\n\tstrings: stringsProp,\n\t'aria-label': ariaLabel,\n\t...rootProps\n}, ref) {\n\tconst strings = useStrings(defaultSideNavStrings, stringsProp);\n\tconst groups = useMemo<SideNavGroup[]>(\n\t\t() => groupsProp ?? [\n\t\t\t{ id: 'side-nav-items', items: items ?? [], collapsible: false },\n\t\t],\n\t\t[groupsProp, items],\n\t);\n\tconst rawActivePath = currentPath ?? (typeof window !== 'undefined' ? window.location.pathname : '');\n\tconst activePath = normalizePath(rawActivePath);\n\n\tconst allNormalized = useMemo(() => {\n\t\treturn groups.flatMap((g) =>\n\t\t\tg.items.map((item) => ({ groupId: g.id, normalizedPath: normalizePath(item.href) })),\n\t\t);\n\t}, [groups]);\n\n\tconst activeNormalized =\n\t\tallNormalized\n\t\t\t.filter(\n\t\t\t\t({ normalizedPath }) =>\n\t\t\t\t\tactivePath === normalizedPath || activePath.startsWith(`${normalizedPath}/`),\n\t\t\t)\n\t\t\t.sort((a, b) => b.normalizedPath.length - a.normalizedPath.length)[0]?.normalizedPath ??\n\t\tnull;\n\n\tconst [collapsed, setCollapsed] = useState<Record<string, boolean>>(() =>\n\t\tObject.fromEntries(groups.map((g) => [g.id, Boolean(g.defaultCollapsed)])),\n\t);\n\n\tconst toggleGroup = (id: string) =>\n\t\tsetCollapsed((prev) => ({ ...prev, [id]: !prev[id] }));\n\n\tconst resolvedActive =\n\t\tactiveItemClassName && activeItemClassName.length > 0\n\t\t\t? activeItemClassName\n\t\t\t: 'bg-primary/5 text-primary-accent';\n\n\treturn (\n\t\t<nav\n\t\t\tref={ref}\n\t\t\taria-label={ariaLabel ?? strings.navigationLabel}\n\t\t\tclassName={cn('side-nav--component', className)}\n\t\t\t{...rootProps}\n\t\t>\n\t\t\t<Stack gap=\"xl\" className=\"side-nav--groups\">\n\t\t\t\t{groups.map((group) => {\n\t\t\t\tconst isCollapsed = group.collapsible !== false && collapsed[group.id];\n\t\t\t\tconst showLabel = !!group.label;\n\t\t\t\tconst shouldRenderItems = !isCollapsed;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Stack key={group.id} gap=\"2xs\" className=\"side-nav--group\">\n\t\t\t\t\t\t{!!showLabel && (\n\t\t\t\t\t\t\tgroup.collapsible !== false ? (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\ttone=\"secondary\"\n\t\t\t\t\t\t\t\t\tbuttonStyle=\"ghost\"\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\t\t\tonClick={() => toggleGroup(group.id)}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t'h-auto min-h-action-sm justify-between px-row-x py-row-y',\n\t\t\t\t\t\t\t\t\t\t'text-muted-foreground',\n\t\t\t\t\t\t\t\t\t\t'hover:text-foreground transition-colors',\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\taria-expanded={!isCollapsed}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{isSimpleText(group.label) ? (\n\t\t\t\t\t\t\t\t\t\t<DisplayLabel tag=\"span\">\n\t\t\t\t\t\t\t\t\t\t\t{group.label}\n\t\t\t\t\t\t\t\t\t\t</DisplayLabel>\n\t\t\t\t\t\t\t\t\t) : group.label}\n\t\t\t\t\t\t\t\t\t<ChevronDown\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t'size-icon-md transition-transform',\n\t\t\t\t\t\t\t\t\t\t\tisCollapsed && '-rotate-90',\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tisSimpleText(group.label) ? (\n\t\t\t\t\t\t\t\t\t<DisplayLabel tag=\"div\" className=\"px-row-x py-row-y\">\n\t\t\t\t\t\t\t\t\t\t{group.label}\n\t\t\t\t\t\t\t\t\t</DisplayLabel>\n\t\t\t\t\t\t\t\t) : group.label\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!!shouldRenderItems && (\n\t\t\t\t\t\t\t<Stack gap=\"2xs\" className=\"side-nav--items\">\n\t\t\t\t\t\t\t\t{group.items.map((item) => {\n\t\t\t\t\t\t\t\t\tconst Icon = item.icon;\n\t\t\t\t\t\t\t\t\tconst itemPath = normalizePath(item.href);\n\t\t\t\t\t\t\t\t\tconst isActive = itemPath === activeNormalized;\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\t\tkey={item.href}\n\t\t\t\t\t\t\t\t\t\t\thref={item.disabled ? undefined : item.href}\n\t\t\t\t\t\t\t\t\t\t\taria-current={isActive ? 'page' : undefined}\n\t\t\t\t\t\t\t\t\t\t\taria-disabled={item.disabled || undefined}\n\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t'group flex items-center gap-space-md rounded-inner px-row-x py-row-y',\n\t\t\t\t\t\t\t\t\t\t\t\t'text-sm transition-colors',\n\t\t\t\t\t\t\t\t\t\t\t\t'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n\t\t\t\t\t\t\t\t\t\t\t\t'hover:bg-muted/60',\n\t\t\t\t\t\t\t\t\t\t\t\titem.disabled && 'pointer-events-none opacity-50',\n\t\t\t\t\t\t\t\t\t\t\t\tisActive && resolvedActive,\n\t\t\t\t\t\t\t\t\t\t\t\titemClassName,\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{!!Icon && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'size-icon shrink-0',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisActive ? 'text-primary-accent' : 'text-muted-foreground',\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t{isSimpleText(item.label) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<Text tag=\"span\" size=\"inherit\" weight=\"medium\" lineHeight=\"tight\" className=\"min-w-0 flex-1 truncate text-inherit\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t) : item.label}\n\t\t\t\t\t\t\t\t\t\t\t{!!item.badge && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\t\t\t\t\ttone=\"secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"shrink-0\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{item.badge}\n\t\t\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Stack>\n\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</Stack>\n\t\t</nav>\n\t);\n});\n\nSideNav.displayName = 'SideNav';\n"],"mappings":"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"}

package/dist/{navigation-DnQSNMT0.js → navigation-Cs1npsPm.js}

@@ -1,12 +1,12 @@
 "use client";
 import { useStrings as e } from "./lib/strings.js";
-import { t } from "./utils-BvH9PSmq.js";
-import { a as n } from "./typography-BxQgiZyw.js";
-import { t as r } from "./button-BZDasD04.js";
-import { t as i } from "./structure-CRdqVawd.js";
-import { n as a } from "./action-menu-Drxw_vJk.js";
-import { t as o } from "./badge-CzId1Wlm.js";
-import { a as s } from "./tabs-BNgu7g0u.js";
+import { t } from "./utils-Cospvlj1.js";
+import { s as n } from "./typography-CAr3dQhX.js";
+import { t as r } from "./button-BS3KDg00.js";
+import { t as i } from "./structure-hzCW-XsV.js";
+import { n as a } from "./action-menu-BTpyPWJ2.js";
+import { t as o } from "./badge-0tATj-tW.js";
+import { a as s } from "./tabs-Dk8E_knt.js";
 import { Fragment as c, forwardRef as l, useCallback as u, useLayoutEffect as d, useMemo as f, useRef as p, useState as m } from "react";
 import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 import { Globe as v, MoreHorizontal as y } from "lucide-react";
@@ -23,20 +23,22 @@ function b({ locales: e, onRenderLabel: a, variant: o = "buttons", onSelect: s }
 		wrap: !1,
 		className: "language-switcher--component",
 		children: [/* @__PURE__ */ g(v, {
-			className: "size-icon text-muted-foreground/70",
+			className: "size-icon shrink-0 text-muted-foreground",
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ g(i, {
 			direction: "horizontal",
 			align: "center",
 			justify: "center",
 			gap: "md",
-			wrap: !1,
+			wrap: !0,
+			className: "min-w-0",
 			children: e.map((r, i) => {
 				let o = a ? a(r) : r.nativeLabel;
 				return /* @__PURE__ */ _(c, { children: [/* @__PURE__ */ g("button", {
 					type: "button",
+					"aria-current": r.active ? "true" : void 0,
 					onClick: () => l(r.value, r.active),
-					className: t("border-0 bg-transparent p-0 font-sans text-pxs transition-colors", r.active ? "text-primary-accent font-medium" : "text-muted-foreground hover:text-foreground"),
+					className: t("cursor-pointer rounded-inner border-0 bg-transparent p-0 font-sans text-pxs outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", r.active ? "text-primary-accent font-medium" : "text-muted-foreground hover:text-foreground"),
 					children: /* @__PURE__ */ g(n, {
 						tag: "span",
 						size: "pxs",
@@ -62,6 +64,7 @@ function b({ locales: e, onRenderLabel: a, variant: o = "buttons", onSelect: s }
 				type: "button",
 				tone: "secondary",
 				buttonStyle: e.active ? "solid" : "ghost",
+				"aria-current": e.active ? "true" : void 0,
 				onClick: () => l(e.value, e.active),
 				className: t("min-w-18 justify-center transition-colors", e.active ? "text-primary-accent" : "text-muted-foreground"),
 				children: n
@@ -100,7 +103,7 @@ var C = l(function({ items: a, currentPath: c, variant: l = "default", scrollabl
 				buttonStyle: i ? "solid" : "ghost",
 				icon: a,
 				"aria-current": i ? "page" : void 0,
-				className: t("navigation-tabs--item shrink-0", "rounded-inner", !y && i && "bg-background text-foreground shadow-sm hover:bg-background/90", !y && !i && "text-muted-foreground hover:bg-background/50 hover:text-foreground"),
+				className: t("navigation-tabs--item shrink-0", "rounded-inner", !y && i && "bg-card text-foreground shadow-sm hover:bg-card", !y && !i && "text-muted-foreground hover:bg-card/60 hover:text-foreground"),
 				children: [
 					typeof e.icon == "string" && /* @__PURE__ */ g("span", {
 						className: "navigation-tabs--icon text-inherit",
@@ -140,48 +143,67 @@ C.displayName = "NavigationTabs";
 var w = {
 	more: "More",
 	navigationLabel: "Tab navigation"
-}, T = "box-border inline-flex h-action shrink-0 items-center gap-space-sm rounded-inner px-control text-pxs font-medium whitespace-nowrap transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
-function E(e) {
+}, T = "box-border inline-flex h-action-sm shrink-0 cursor-pointer items-center gap-space-sm rounded-inner border-0 bg-transparent px-control-sm font-sans text-sm font-medium whitespace-nowrap no-underline outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-icon [&_svg]:shrink-0", E = "text-muted-foreground hover:bg-card/60 hover:text-foreground", D = "bg-card text-foreground shadow-sm";
+function O(e) {
 	return typeof e == "string" || typeof e == "number" || typeof e == "bigint";
 }
-var D = l(function({ items: r, value: i, onValueChange: s, className: c, tabClassName: l, activeTabClassName: u, strings: v, ...b }, x) {
-	let S = e(w, v), C = p(null), D = p(null), [O, k] = m(r.length);
+function k(e, t, n, r) {
+	if (e.reduce((e, t) => e + t, 0) + n * Math.max(0, e.length - 1) <= t) return e.length;
+	let i = 0, a = 0;
+	for (let o of e) {
+		let e = i + (a > 0 ? n : 0) + o;
+		if (e + n + r > t) break;
+		i = e, a += 1;
+	}
+	return Math.max(1, a);
+}
+var A = l(function({ items: r, value: i, onValueChange: s, className: c, tabClassName: l, activeTabClassName: v, strings: b, ...x }, S) {
+	let C = e(w, b), A = p(null), j = p(null), M = p(null), [N, P] = m(r.length), F = u((e) => {
+		A.current = e, typeof S == "function" ? S(e) : S && (S.current = e);
+	}, [S]);
 	d(() => {
-		if (!C.current || !D.current) return;
-		let e = C.current, t = D.current, n = () => {
-			let n = e.clientWidth;
-			if (n === 0) {
-				k(r.length);
+		let e = A.current, t = j.current, n = M.current;
+		if (!e || !t || !n) return;
+		let i = () => {
+			let i = getComputedStyle(t), a = (parseFloat(i.paddingLeft) || 0) + (parseFloat(i.paddingRight) || 0), o = e.clientWidth - a;
+			if (o <= 0) {
+				P(r.length);
 				return;
 			}
-			let i = Array.from(t.querySelectorAll("[data-tab-id]")), a = 0, o = 0;
-			for (let e of i) {
-				let t = e.offsetWidth + 4;
-				if (a + t + 72 <= n) a += t, o += 1;
-				else break;
-			}
-			k(o === i.length ? o : Math.max(1, o));
+			let s = parseFloat(getComputedStyle(n).columnGap) || 0, c = Array.from(n.querySelectorAll("[data-tab-id]")).map((e) => e.offsetWidth), l = n.querySelector("[data-more-measure]")?.offsetWidth ?? 0;
+			P(k(c, o, s, l));
 		};
-		if (n(), typeof ResizeObserver > "u") return;
-		let i = new ResizeObserver(n);
-		return i.observe(e), () => i.disconnect();
-	}, [r]);
-	let A = f(() => {
+		if (i(), typeof ResizeObserver > "u") return;
+		let a = new ResizeObserver(i);
+		return a.observe(e), () => a.disconnect();
+	}, [r, C.more]);
+	let I = f(() => {
 		if (!i) return r;
 		let e = r.findIndex((e) => e.id === i);
-		if (e < 0 || e < O) return r;
-		let t = [...r], n = Math.max(0, O - 1);
+		if (e < 0 || e < N) return r;
+		let t = [...r], n = Math.max(0, N - 1);
 		return [t[e], t[n]] = [t[n], t[e]], t;
 	}, [
 		r,
 		i,
-		O
-	]), j = A.slice(0, O), M = A.slice(O), N = (e) => {
+		N
+	]), L = I.slice(0, N), R = I.slice(N), z = (e) => {
 		s?.(e.id), e.onClick?.();
-	}, P = (e, r, a) => {
-		let s = e.icon, c = t(T, r ? t("bg-card text-foreground shadow-sm", u) : "text-muted-foreground hover:bg-muted/60", l), d = /* @__PURE__ */ _(h, { children: [
-			!!s && /* @__PURE__ */ g(s, { className: "size-icon-sm" }),
-			E(e.label) ? /* @__PURE__ */ g(n, {
+	}, B = (e) => {
+		if (![
+			"ArrowLeft",
+			"ArrowRight",
+			"Home",
+			"End"
+		].includes(e.key)) return;
+		let t = Array.from(e.currentTarget.querySelectorAll("[role=\"tab\"]")), n = t.indexOf(e.target);
+		if (n < 0 || t.length === 0) return;
+		let r = getComputedStyle(e.currentTarget).direction === "rtl" ? "ArrowLeft" : "ArrowRight", i = e.key === "Home" ? 0 : e.key === "End" ? t.length - 1 : e.key === r ? (n + 1) % t.length : (n - 1 + t.length) % t.length;
+		e.preventDefault(), t[i]?.focus();
+	}, V = (e, r, a) => {
+		let s = e.icon, c = t(T, r ? t(D, v) : E, l), u = /* @__PURE__ */ _(h, { children: [
+			!!s && /* @__PURE__ */ g(s, { "aria-hidden": "true" }),
+			O(e.label) ? /* @__PURE__ */ g(n, {
 				tag: "span",
 				size: "inherit",
 				weight: "medium",
@@ -189,88 +211,90 @@ var D = l(function({ items: r, value: i, onValueChange: s, className: c, tabClas
 				className: "text-inherit",
 				children: e.label
 			}) : e.label,
-			!!e.badge && /* @__PURE__ */ g(o, {
+			e.badge !== void 0 && e.badge !== null && e.badge !== !1 && /* @__PURE__ */ g(o, {
 				size: "sm",
 				tone: "secondary",
-				className: t("ml-space-sm", r ? "bg-primary/10 text-primary-accent" : "bg-muted-foreground/10 text-muted-foreground"),
+				className: "overflow-tab-bar--badge",
 				children: e.badge
 			})
 		] });
-		return a?.measure ? /* @__PURE__ */ g("span", {
+		if (a?.measure) return /* @__PURE__ */ g("span", {
 			"data-tab-id": e.id,
 			className: t("overflow-tab-bar--measure", c),
-			children: d
-		}, e.id) : e.href ? /* @__PURE__ */ g("a", {
-			href: e.href,
+			children: u
+		}, e.id);
+		let d = {
 			"data-tab-id": e.id,
 			role: "tab",
 			"aria-selected": r,
 			tabIndex: r || !i ? 0 : -1,
-			onClick: () => N(e),
-			className: t("overflow-tab-bar--tab", c),
-			children: d
+			onClick: () => z(e),
+			className: t("overflow-tab-bar--tab", c)
+		};
+		return e.href ? /* @__PURE__ */ g("a", {
+			href: e.href,
+			...d,
+			children: u
 		}, e.id) : /* @__PURE__ */ g("button", {
 			type: "button",
-			"data-tab-id": e.id,
-			role: "tab",
-			"aria-selected": r,
-			tabIndex: r || !i ? 0 : -1,
-			onClick: () => N(e),
-			className: t("overflow-tab-bar--tab", c),
-			children: d
+			...d,
+			children: u
 		}, e.id);
-	};
+	}, H = /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(y, { "aria-hidden": "true" }), /* @__PURE__ */ g(n, {
+		tag: "span",
+		size: "inherit",
+		weight: "medium",
+		lineHeight: "tight",
+		className: "text-inherit",
+		children: C.more
+	})] });
 	return /* @__PURE__ */ _("div", {
-		ref: x,
+		ref: F,
 		className: t("overflow-tab-bar--component relative w-full min-w-0 max-w-full", c),
-		...b,
-		children: [/* @__PURE__ */ g("div", {
-			ref: D,
+		...x,
+		children: [/* @__PURE__ */ _("div", {
+			ref: M,
 			"aria-hidden": "true",
-			className: "pointer-events-none fixed left-0 top-0 z-[-1] flex h-0 w-0 items-center gap-space-xs overflow-hidden opacity-0",
-			children: r.map((e) => P(e, !1, { measure: !0 }))
+			className: "pointer-events-none invisible fixed left-0 top-0 z-[-1] flex h-0 w-0 items-center gap-space-2xs overflow-hidden",
+			children: [r.map((e) => V(e, !1, { measure: !0 })), /* @__PURE__ */ g("span", {
+				"data-more-measure": "",
+				className: t(T, E),
+				children: H
+			})]
 		}), /* @__PURE__ */ _("div", {
-			ref: C,
-			className: "overflow-tab-bar--viewport relative flex w-full min-w-0 max-w-full items-center gap-space-xs overflow-hidden rounded-inner bg-muted/40 p-space-xs",
+			ref: j,
+			className: "overflow-tab-bar--viewport inline-flex max-w-full min-w-0 items-center gap-space-2xs overflow-hidden rounded-inner bg-muted p-space-2xs align-top",
 			children: [/* @__PURE__ */ g("div", {
 				role: "tablist",
-				"aria-label": S.navigationLabel,
+				"aria-label": C.navigationLabel,
 				"aria-orientation": "horizontal",
-				className: "overflow-tab-bar--tablist flex min-w-0 flex-1 items-center gap-space-xs overflow-hidden",
-				children: j.map((e) => P(e, e.id === i))
-			}), M.length > 0 && /* @__PURE__ */ g(a, {
-				actions: M.map((e) => ({
+				onKeyDown: B,
+				className: "overflow-tab-bar--tablist flex min-w-0 items-center gap-space-2xs overflow-hidden",
+				children: L.map((e) => V(e, e.id === i))
+			}), R.length > 0 && /* @__PURE__ */ g(a, {
+				actions: R.map((e) => ({
 					id: e.id,
 					label: e.label,
 					icon: e.icon,
-					onClick: () => N(e),
-					className: t(e.id === i && "bg-primary/5 text-primary-accent")
+					onClick: () => z(e)
 				})),
 				align: "end",
-				density: "table",
 				contentClassName: "min-w-40",
 				width: "w-auto",
 				closeOnSelect: !0,
 				preserveOrder: !0,
-				renderTrigger: /* @__PURE__ */ _("button", {
+				renderTrigger: /* @__PURE__ */ g("button", {
 					type: "button",
-					"aria-label": S.more,
-					className: t(T, "text-muted-foreground hover:bg-muted/60"),
-					children: [/* @__PURE__ */ g(y, { className: "size-icon-sm" }), /* @__PURE__ */ g(n, {
-						tag: "span",
-						size: "inherit",
-						weight: "medium",
-						lineHeight: "tight",
-						className: "text-inherit",
-						children: S.more
-					})]
+					"aria-label": C.more,
+					className: t(T, E, "overflow-tab-bar--more"),
+					children: H
 				})
 			})]
 		})]
 	});
 });
-D.displayName = "OverflowTabBar";
+A.displayName = "OverflowTabBar";
 //#endregion
-export { b as a, x as i, w as n, C as r, D as t };
+export { b as a, x as i, w as n, C as r, A as t };
 
-//# sourceMappingURL=navigation-DnQSNMT0.js.map
+//# sourceMappingURL=navigation-Cs1npsPm.js.map