haze-ui 1.24.0 → 1.25.0

package/README.md

@@ -14,6 +14,14 @@ English | [简体中文](./README-zh_CN.md)
 - Support themes customization
 - Support Tree-shaking
 
+## Why npm-distributed (not copy-paste)
+
+**Interaction states are formulas, not values.** Every hover/active/subtle/focus-ring color is a CSS relative-color expression — `oklch(from var(--haze-color-primary) calc(l - 0.045) c h)` — baked into `tokens.css`. Override `--haze-color-primary` on a theme class and the entire interaction-state family re-derives at runtime in the browser, no rebuild, no codegen. In a copy-paste setup every pasted file owns its own copy of that formula, and each theme tweak means re-applying it by hand, file by file.
+
+**`haze-ui/css-manifest.json` is machine-readable data.** The authoritative export → CSS-file mapping (family absorption included) is regenerated on every build, so bundler plugins and codemods read one source of truth instead of re-deriving kebab-case file names. A directory of pasted components has no equivalent — the mapping exists only in your head or your fork, and it drifts.
+
+**The `ControlOrValue<T>` protocol needs a real runtime.** One prop — `checked?: Control<T> | T` — covers controlled *and* uncontrolled usage because `react-use-control` carries the wiring; a published package is the contract that keeps that behavior identical across every component and version. None of this is hostile to the shadcn / Base UI ecosystem: haze-ui tokens are plain CSS custom properties, so they interoperate with a Tailwind v4 `@theme` block, and haze components compose alongside copy-pasted primitives wherever each fits.
+
 ## Getting Started
 
 ### Installation
@@ -152,6 +160,29 @@ function SettingsView() {
 }
 ```
 
+## Design tokens export (Figma)
+
+`toDesignTokens()` converts the token registry into a [W3C Design Tokens](https://tr.designtokens.org/) JSON file — grouped by category (`color` / `font` / `spacing` / `dimension` / `shadow`), each token carrying a W3C `$type` and the source CSS variable in `$extensions['haze-ui.css-var']`, with `$value` being the resolved value of the chosen theme (`light` by default). The Theme Editor ships a one-click entry: the **Export W3C tokens (.json)** button in the toolbar downloads the file for the mode currently being edited, live edits included. The exported file can be imported directly into Figma Tokens / Tokens Studio.
+
+```json
+{
+  "color": {
+    "color-primary": {
+      "$value": "oklch(0.563 0.241 260.8)",
+      "$type": "color",
+      "$extensions": { "haze-ui.css-var": "--haze-color-primary" }
+    }
+  },
+  "spacing": {
+    "space-2": {
+      "$value": "8px",
+      "$type": "dimension",
+      "$extensions": { "haze-ui.css-var": "--haze-space-2" }
+    }
+  }
+}
+```
+
 ## react-f0rm Integration
 
 react-f0rm owns form field state, and its headless `useField` hook is
@@ -424,6 +455,89 @@ All three are optional; omit them and the field behaves exactly as
 before (immediate validation per the form's `mode`, immediate error
 display, `validate`-only).
 
+## Accessibility & RTL
+
+haze-ui supports RTL via CSS logical properties wherever a side is
+semantic (the *start/end* of reading flow), not just decorative. Set
+`dir="rtl"` (or `direction: rtl`) on an ancestor and those sides mirror
+automatically — no component props change. A regression smoke test
+(`src/lib/rtl.test.tsx`) renders Progress, Alert, Badge, Tag and Dialog
+in a `dir="rtl"` subtree asserting rendering, axe cleanliness and
+unchanged aria contracts.
+
+### Direction-responsive by construction (no physical CSS)
+
+- **Progress (bar)** — the fill is a normal-flow block with a percentage
+  `width`, so it grows from the inline-start edge (right in RTL) with no
+  `left`/`right` in its CSS.
+- **Slider** — a native `<input type="range">`; the browser mirrors fill
+  and thumb under `dir="rtl"`.
+- **Flex gap / `flex-direction: row`** — gap and row order follow the
+  writing mode, so icon-to-label spacing in Tag, ChatMessage, Alert, etc.
+  mirrors for free.
+- **Carousel track scrolling** — uses `scrollIntoView({ inline: 'start' })`,
+  a logical scroll position.
+
+### Fixed: physical → logical conversions
+
+| File | Change |
+| --- | --- |
+| `Carousel.tsx` | prev/next buttons `left`/`right` → `inset-inline-start`/`inset-inline-end`, plus a `[dir='rtl']` `scale: -1 1` mirror so the `‹`/`›` glyphs point along the reading direction |
+| `ChatMessage.tsx` | bubble tail corners `border-bottom-right-radius` / `border-bottom-left-radius` → `border-end-end-radius` / `border-end-start-radius` (tail follows the bubble's anchored side) |
+| `Chip.tsx` | close-button `margin-left` → `margin-inline-start` |
+| `Container.tsx` | `margin-left/right: auto` → `margin-inline: auto`; `padding-left/right` → `padding-inline` |
+| `ContextMenuItem.tsx`, `DropdownMenuItem.tsx`, `MenuItem.tsx`, `ConversationItem.tsx` | `text-align: left` → `text-align: start` |
+| `DiffViewer.tsx` | line-number gutter `text-align: right` → `end`, `border-right` → `border-inline-end` (gutter stays on the leading side) |
+| `List.tsx` | `padding-left` → `padding-inline-start` (list indent), both variants |
+| `NavigationBar.tsx` | end-slot `margin-left: auto` → `margin-inline-start: auto` |
+| `StepTimeline.tsx` | connector line `left` → `inset-inline-start` (stays under the inline-start marker column) |
+| `Stepper/Step.tsx` | connector `left: 50%` → `inset-inline-start: 50%` (extends toward the next step) |
+| `TableHead.tsx` | `th { text-align: left }` → `start` |
+| `TreeItem.tsx` | checkbox/icon `margin-right` → `margin-inline-end`; indent guide `border-left` → `border-inline-start` |
+
+Kept physical on purpose — glyph geometry or symmetric layout, not
+reading-flow sides: the rotated border chevrons in Accordion/Disclosure,
+Checkbox's rotated checkmark, Radio's centered dot, Affix's symmetric
+`left: 0; right: 0` stretch.
+
+### Partial support: known gaps
+
+- **Floating panels (Popover, DropdownMenu, Tooltip, ContextMenu,
+  Combobox, Datepicker)** — placements are physical sides
+  (`'left'`/`'right'`/`'bottom-end'`, …). The CSS anchor-positioning
+  `position-area` grid keywords and the JS collision math
+  (`utils/collision.ts`, viewport coordinates) are physical; migrating to
+  logical `position-area` keywords is a tracked future change. In RTL the
+  panels position identically to LTR.
+- **Input adornments** — `SelectCore` / `ModelPicker` chevrons
+  (`background-position: right …` + `padding-right`) and
+  `PasswordInputCore`'s absolute reveal button sit on the physical right
+  with matching padding. Consistent under RTL, but not mirrored.
+- **Progress (circle)** — SVG `stroke-dashoffset` fill runs clockwise
+  regardless of direction (SVG has no inline axis).
+- **Physical-by-design placement APIs** — `Drawer` `placement`
+  (`'left'`/`'right'`), `Toast` placement (`'top-left'`, …),
+  `SwipeAction` left/right action edges, `BackToTop`'s bottom-right
+  corner, `CodeBlock`'s top-right language badge: the side is the API,
+  so it stays physical.
+
+### Workaround for remaining gaps
+
+Wrap with `dir="rtl"` for everything above; for the physical-by-design
+cases, override with logical insets through the `className` every
+component accepts:
+
+```jsx
+<Drawer placement="right" className="rtl-drawer" />
+```
+
+```css
+[dir='rtl'] .rtl-drawer {
+  /* nudge a physical placement back to the reading-flow side */
+  inset-inline-end: 0;
+}
+```
+
 ## Related Projects
 
 - [react-use-control](https://github.com/wmzy/react-use-control)
@@ -458,3 +572,28 @@ import 'haze-ui/css/button.css';
 
 No — haze-ui is ESM-only (`"type": "module"`). Use a bundler or runtime
 with ESM support (Vite, webpack 5, Next.js, Node ≥ 18, …).
+
+### How do I detect (or degrade) the relative-color syntax?
+
+Since v1.13, theme interaction states are derived with CSS relative
+colors, so the browser baseline from [Browser support](#browser-support)
+applies — Chrome/Edge 119+, Safari 16.4+, Firefox 128+, with no HSL/hex
+fallbacks shipped. To gate your own fallback styling on support, probe
+the syntax in CSS:
+
+```css
+@supports (color: oklch(from red calc(l + 0.05) 0 h)) {
+  /* relative colors available: derive custom states from tokens */
+}
+```
+
+or from JS before deciding which stylesheet to load:
+
+```js
+if (CSS.supports('color: oklch(from red calc(l + 0.05) 0 h)')) {
+  // relative colors available — load the v1.13+ token sheet
+} else {
+  // below baseline: pin a pre-OKLCH version or ship your own fallbacks
+}
+```
+

package/dist/components/Alert/Alert.js

@@ -1,37 +1,38 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useControl as i } from "react-use-control";
 //#region src/lib/components/Alert/Alert.tsx
-var i = "haze-Alert__base", a = {
+var a = "haze-Alert__base", o = {
 	info: "haze-Alert__info",
 	success: "haze-Alert__success",
 	warning: "haze-Alert__warning",
 	danger: "haze-Alert__danger"
-}, o = "haze-Alert__contentStyle", s = "haze-Alert__closeBtn";
-function c({ visible: c, onClose: l, variant: u = "info", closable: d = !1, className: f, children: p }) {
-	let [m, h] = r(c, !0);
-	return m ? /* @__PURE__ */ n("div", {
+}, s = "haze-Alert__contentStyle", c = "haze-Alert__closeBtn";
+function l({ visible: l, onClose: u, variant: d = "info", closable: f = !1, className: p, children: m }) {
+	let [h, g] = i(l, !0), _ = t("alert");
+	return h ? /* @__PURE__ */ r("div", {
 		role: "alert",
 		className: e([
-			i,
-			a[u],
-			f
+			a,
+			o[d],
+			p
 		]),
-		children: [/* @__PURE__ */ t("div", {
-			className: o,
-			children: p
-		}), d && /* @__PURE__ */ t("button", {
-			type: "button",
+		children: [/* @__PURE__ */ n("div", {
 			className: s,
-			"aria-label": "Close",
+			children: m
+		}), f && /* @__PURE__ */ n("button", {
+			type: "button",
+			className: c,
+			"aria-label": _.close,
 			onClick: () => {
-				h(!1), l?.();
+				g(!1), u?.();
 			},
 			children: "×"
 		})]
 	}) : null;
 }
 //#endregion
-export { c as default };
+export { l as default };

package/dist/components/ApprovalCard/ApprovalCard.js

@@ -1,43 +1,45 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                       */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/ApprovalCard/ApprovalCard.tsx
-var r = "haze-ApprovalCard__card", i = "haze-ApprovalCard__header", a = "haze-ApprovalCard__body", o = "haze-ApprovalCard__desc", s = "haze-ApprovalCard__content", c = "haze-ApprovalCard__actions", l = "haze-ApprovalCard__btn", u = "haze-ApprovalCard__denyBtn", d = "haze-ApprovalCard__approveBtn";
-function f({ title: f = "Approval Required", description: p, onApprove: m, onDeny: h, approveText: g = "Approve", denyText: _ = "Deny", children: v, className: y }) {
-	return /* @__PURE__ */ n("div", {
-		className: e([r, y]),
+var i = "haze-ApprovalCard__card", a = "haze-ApprovalCard__header", o = "haze-ApprovalCard__body", s = "haze-ApprovalCard__desc", c = "haze-ApprovalCard__content", l = "haze-ApprovalCard__actions", u = "haze-ApprovalCard__btn", d = "haze-ApprovalCard__denyBtn", f = "haze-ApprovalCard__approveBtn";
+function p({ title: p, description: m, onApprove: h, onDeny: g, approveText: _, denyText: v, children: y, className: b }) {
+	let x = t("approvalCard"), S = p ?? x.title, C = _ ?? x.approve, w = v ?? x.deny;
+	return /* @__PURE__ */ r("div", {
+		className: e([i, b]),
 		children: [
-			/* @__PURE__ */ t("div", {
-				className: e([i]),
-				children: f
-			}),
 			/* @__PURE__ */ n("div", {
 				className: e([a]),
-				children: [p && /* @__PURE__ */ t("div", {
-					className: e([o]),
-					children: p
-				}), v && /* @__PURE__ */ t("div", {
+				children: S
+			}),
+			/* @__PURE__ */ r("div", {
+				className: e([o]),
+				children: [m && /* @__PURE__ */ n("div", {
 					className: e([s]),
-					children: v
+					children: m
+				}), y && /* @__PURE__ */ n("div", {
+					className: e([c]),
+					children: y
 				})]
 			}),
-			/* @__PURE__ */ n("div", {
-				className: e([c]),
-				children: [/* @__PURE__ */ t("button", {
+			/* @__PURE__ */ r("div", {
+				className: e([l]),
+				children: [/* @__PURE__ */ n("button", {
 					type: "button",
-					onClick: h,
-					className: e([l, u]),
-					children: _
-				}), /* @__PURE__ */ t("button", {
+					onClick: g,
+					className: e([u, d]),
+					children: w
+				}), /* @__PURE__ */ n("button", {
 					type: "button",
-					onClick: m,
-					className: e([l, d]),
-					children: g
+					onClick: h,
+					className: e([u, f]),
+					children: C
 				})]
 			})
 		]
 	});
 }
 //#endregion
-export { f as default };
+export { p as default };

package/dist/components/AsyncSection/AsyncSection.js

@@ -1,62 +1,64 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                       */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/AsyncSection/AsyncSection.tsx
-var r = "haze-AsyncSection__base", i = "haze-AsyncSection__placeholder", a = "haze-AsyncSection__spin", o = "haze-AsyncSection__errorBox", s = "haze-AsyncSection__errorMessage", c = "haze-AsyncSection__retryButton";
-function l({ loading: l = !1, error: u, onRetry: d, loadingText: f = "Loading…", errorText: p, retryText: m = "Retry", className: h, children: g }) {
-	if (l) return /* @__PURE__ */ t("section", {
+var i = "haze-AsyncSection__base", a = "haze-AsyncSection__placeholder", o = "haze-AsyncSection__spin", s = "haze-AsyncSection__errorBox", c = "haze-AsyncSection__errorMessage", l = "haze-AsyncSection__retryButton";
+function u({ loading: u = !1, error: d, onRetry: f, loadingText: p, errorText: m, retryText: h, className: g, children: _ }) {
+	let v = t("asyncSection"), y = p ?? v.loading, b = h ?? v.retry;
+	if (u) return /* @__PURE__ */ n("section", {
 		"aria-busy": "true",
-		className: e([r, h]),
-		children: n("div", {
+		className: e([i, g]),
+		children: r("div", {
 			role: "status",
-			className: e([i]),
-			children: [/* @__PURE__ */ t("span", {
+			className: e([a]),
+			children: [/* @__PURE__ */ n("span", {
 				"aria-hidden": "true",
-				className: e([a]),
-				children: /* @__PURE__ */ n("svg", {
+				className: e([o]),
+				children: /* @__PURE__ */ r("svg", {
 					viewBox: "0 0 24 24",
 					fill: "none",
 					xmlns: "http://www.w3.org/2000/svg",
-					children: [/* @__PURE__ */ t("circle", {
+					children: [/* @__PURE__ */ n("circle", {
 						cx: "12",
 						cy: "12",
 						r: "10",
 						stroke: "var(--haze-color-border)",
 						strokeWidth: "3"
-					}), /* @__PURE__ */ t("path", {
+					}), /* @__PURE__ */ n("path", {
 						d: "M12 2a10 10 0 0 1 10 10",
 						stroke: "var(--haze-color-primary)",
 						strokeWidth: "3",
 						strokeLinecap: "round"
 					})]
 				})
-			}), f]
+			}), y]
 		})
 	});
-	if (u != null) {
-		let i = p ?? (u instanceof Error && u.message ? u.message : void 0) ?? "Something went wrong";
-		return /* @__PURE__ */ t("section", {
-			className: e([r, h]),
-			children: n("div", {
+	if (d != null) {
+		let t = m ?? (d instanceof Error && d.message ? d.message : void 0) ?? v.error;
+		return /* @__PURE__ */ n("section", {
+			className: e([i, g]),
+			children: r("div", {
 				role: "alert",
-				className: e([o]),
-				children: [/* @__PURE__ */ t("p", {
-					className: e([s]),
-					children: i
-				}), d && /* @__PURE__ */ t("button", {
-					type: "button",
-					onClick: d,
+				className: e([s]),
+				children: [/* @__PURE__ */ n("p", {
 					className: e([c]),
-					children: m
+					children: t
+				}), f && /* @__PURE__ */ n("button", {
+					type: "button",
+					onClick: f,
+					className: e([l]),
+					children: b
 				})]
 			})
 		});
 	}
-	return /* @__PURE__ */ t("section", {
-		className: e([r, h]),
-		children: g
+	return /* @__PURE__ */ n("section", {
+		className: e([i, g]),
+		children: _
 	});
 }
 //#endregion
-export { l as default };
+export { u as default };

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,29 @@
+
+import { classnames as e } from "../../utils/classnames.js";
+import { formatString as t } from "../LocaleProvider/locale.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+/* empty css                      */
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Children as a } from "react";
+//#region src/lib/components/AvatarGroup/AvatarGroup.tsx
+var o = "haze-AvatarGroup__base", s = "haze-AvatarGroup__item", c = "haze-AvatarGroup__itemStacked", l = "haze-AvatarGroup__overflowChip";
+function u({ max: u, total: d, className: f, children: p, ...m }) {
+	let h = n("avatarGroup"), g = a.toArray(p), _ = u === void 0 ? g.length : Math.max(u, 0), v = g.length > _, y = v ? g.slice(0, _) : g, b = d ?? g.length - _;
+	return /* @__PURE__ */ i("div", {
+		...m,
+		className: e([o, f]),
+		children: [y.map((t, n) => /* @__PURE__ */ r("span", {
+			className: e([s, n > 0 && c]),
+			children: t
+		}, n)), v && /* @__PURE__ */ r("span", {
+			className: e([
+				s,
+				l,
+				y.length > 0 && c
+			]),
+			children: t(h.more, { count: b })
+		})]
+	});
+}
+//#endregion
+export { u as default };

package/dist/components/AvatarGroup/index.js

@@ -0,0 +1,2 @@
+import e from "./AvatarGroup.js";
+export { e as AvatarGroup };

package/dist/components/BackToTop/BackToTop.js

@@ -1,29 +1,30 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                    */
-import { jsx as t } from "react/jsx-runtime";
-import { useCallback as n, useEffect as r, useState as i } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { useCallback as r, useEffect as i, useState as a } from "react";
 //#region src/lib/components/BackToTop/BackToTop.tsx
-var a = "haze-BackToTop__button", o = "haze-BackToTop__hidden";
-function s({ threshold: s = 300, children: c = "↑", className: l }) {
-	let [u, d] = i(!1), f = n(() => {
-		d(window.scrollY > s);
-	}, [s]);
-	return r(() => (window.addEventListener("scroll", f, { passive: !0 }), () => window.removeEventListener("scroll", f)), [f]), /* @__PURE__ */ t("button", {
+var o = "haze-BackToTop__button", s = "haze-BackToTop__hidden";
+function c({ threshold: c = 300, children: l = "↑", className: u }) {
+	let [d, f] = a(!1), p = t("backToTop"), m = r(() => {
+		f(window.scrollY > c);
+	}, [c]);
+	return i(() => (window.addEventListener("scroll", m, { passive: !0 }), () => window.removeEventListener("scroll", m)), [m]), /* @__PURE__ */ n("button", {
 		onClick: () => {
 			window.scrollTo({
 				top: 0,
 				behavior: "smooth"
 			});
 		},
-		"aria-label": "Back to top",
+		"aria-label": p.label,
 		className: e([
-			a,
-			!u && o,
-			l
+			o,
+			!d && s,
+			u
 		]),
-		children: c
+		children: l
 	});
 }
 //#endregion
-export { s as default };
+export { c as default };

package/dist/components/Banner/Banner.js

@@ -1,37 +1,38 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                 */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useControl as i } from "react-use-control";
 //#region src/lib/components/Banner/Banner.tsx
-var i = "haze-Banner__banner", a = {
+var a = "haze-Banner__banner", o = {
 	info: "haze-Banner__info",
 	success: "haze-Banner__success",
 	warning: "haze-Banner__warning",
 	danger: "haze-Banner__danger"
-}, o = "haze-Banner__closeBtn", s = "haze-Banner__content";
-function c({ visible: c, onClose: l, variant: u = "info", children: d, className: f }) {
-	let [p, m] = r(c, !0);
-	return p ? /* @__PURE__ */ n("div", {
+}, s = "haze-Banner__closeBtn", c = "haze-Banner__content";
+function l({ visible: l, onClose: u, variant: d = "info", children: f, className: p }) {
+	let [m, h] = i(l, !0), g = t("banner");
+	return m ? /* @__PURE__ */ r("div", {
 		role: "alert",
 		className: e([
-			i,
-			a[u],
-			f
+			a,
+			o[d],
+			p
 		]),
-		children: [/* @__PURE__ */ t("div", {
-			className: e([s]),
-			children: d
-		}), l && /* @__PURE__ */ t("button", {
+		children: [/* @__PURE__ */ n("div", {
+			className: e([c]),
+			children: f
+		}), u && /* @__PURE__ */ n("button", {
 			type: "button",
 			onClick: () => {
-				m(!1), l?.();
+				h(!1), u?.();
 			},
-			"aria-label": "Close",
-			className: e([o]),
+			"aria-label": g.close,
+			className: e([s]),
 			children: "x"
 		})]
 	}) : null;
 }
 //#endregion
-export { c as default };
+export { l as default };

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,27 +1,28 @@
 
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                     */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Children as r } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Children as i } from "react";
 //#region src/lib/components/Breadcrumb/Breadcrumb.tsx
-var i = "haze-Breadcrumb__nav", a = "haze-Breadcrumb__list", o = "haze-Breadcrumb__sep";
-function s({ separator: s = "/", className: c, children: l }) {
-	let u = r.toArray(l);
-	return /* @__PURE__ */ t("nav", {
-		"aria-label": "Breadcrumb",
-		className: e([i, c]),
-		children: t("ol", {
-			className: a,
-			children: u.map((e, r) => /* @__PURE__ */ n("li", {
-				"aria-current": r === u.length - 1 ? "page" : void 0,
-				children: [e, r < u.length - 1 && /* @__PURE__ */ t("span", {
-					className: o,
+var a = "haze-Breadcrumb__nav", o = "haze-Breadcrumb__list", s = "haze-Breadcrumb__sep";
+function c({ separator: c = "/", className: l, children: u }) {
+	let d = t("breadcrumb"), f = i.toArray(u);
+	return /* @__PURE__ */ n("nav", {
+		"aria-label": d.label,
+		className: e([a, l]),
+		children: n("ol", {
+			className: o,
+			children: f.map((e, t) => /* @__PURE__ */ r("li", {
+				"aria-current": t === f.length - 1 ? "page" : void 0,
+				children: [e, t < f.length - 1 && /* @__PURE__ */ n("span", {
+					className: s,
 					"aria-hidden": "true",
-					children: s
+					children: c
 				})]
-			}, r))
+			}, t))
 		})
 	});
 }
 //#endregion
-export { s as default };
+export { c as default };