highsoft-ui 1.0.174 → 1.0.175

package/CLAUDE.md

@@ -964,7 +964,38 @@ A page that has a site `<Header>` already spends the top of a phone screen on th
 - The grab handle is `aria-hidden` — it's the touch affordance, and the labelled close button is the control. Under `prefers-reduced-motion: reduce` the sheet arrives and leaves instantly; dragging it still tracks the finger, since that's direct manipulation rather than authored motion.
 - Widening past 760px retires the sheet without moving focus — a resize isn't a dismissal.
 
-### PrevNextNav
+### Breadcrumb
+The trail to the current page: linked items are the plain `Button` at size 100, the current page is a label marked `aria-current="page"`, separators are `Icon`s. Everything sits on one 24px row. Pass your router link as `link`.
+```tsx
+import Link from 'next/link'
+import { Tool02 } from '@untitled-ui/icons-react'
+
+<Breadcrumb
+  link={Link}
+  items={[
+    { label: 'Build', icon: Tool02, iconColor: 'brand' },   // a section name, not a link
+    { label: 'Charts', href: '/docs/charts' },
+    { label: 'Core chart types', href: '/docs/charts/chart-types' },
+    { label: '3D pyramid' }                                  // the current page, no href
+  ]}
+/>
+
+// Arrows or slashes instead of chevrons
+<Breadcrumb items={items} separator="arrow" />
+<Breadcrumb items={items} separator="slash" />
+```
+- **`items`:** `{ label, href?, icon?, iconColor? }`, first to last. An item with `href` is a link; the last item is the current page and never a link; an item without `href` elsewhere (a section name) is a plain label. `icon` is an `@untitled-ui/icons-react` component drawn through `Icon` at 12px; `iconColor="brand"` gives it `--HS-text-brand-default-alt`, the text stays as it is.
+- **`separator`:** `chevron` (default), `arrow`, `slash`. Icons sit in the tertiary tone, 2px from the items.
+- **`link`:** the component for links (Next's `Link`, a router's link); default `"a"`.
+- **`collapse`** (default `true`): with more than three items, the middle ones fold into an ellipsis below 760px (the Sidebar's drawer point) so the first and the last two stay.
+- **`label`:** the `<nav>`'s accessible name (default "Breadcrumb").
+- Labels longer than 28 characters are cut with an ellipsis so a long page title does not push the trail onto three lines.
+
+**Accessibility:**
+- A `<nav aria-label="Breadcrumb">` holding an `<ol>`, so a screen reader hears the trail in order and can jump to or skip it as a landmark.
+- Links are real links (the Button as `<a>` or the router's link), keyboard reachable with the Button's shared focus ring. The current page is not a link and carries `aria-current="page"`, so it is announced as where you are.
+- Separators and icons are `aria-hidden`; the folded middle items are `display: none`, so assistive technology gets the full trail only when it is visible. Nothing animates beyond the Button's own hover.
+
 Previous / next footer navigation — two link cards in a three-slot grid (`1fr auto 1fr`) with an optional centered back-to-overview button. For sequential content: docs articles, changelog versions, API option pages.
 
 ```tsx
@@ -1213,6 +1244,12 @@ All components use the same `iconLeft` / `iconRight` naming:
 - **Do** pass an icon component to `icon` for a custom bullet
 - **Don't** write bullets or numbers into the item text (`•`, `1.`) — the component draws them
 
+### Breadcrumb
+- **Do** end with the current page as a plain item — never link the page you are on
+- **Don't** put the site root in the trail when the header already links it; start at the section
+- **Do** pass `link={Link}` in a Next app so the trail routes client-side
+- **Don't** add icons to every item — one on the section name is enough to mark the band
+
 ### Figure
 - **Do** put the explanation in `caption` and what the image shows in `alt`
 - **Don't** repeat the caption as the alt text, or leave the alt as a file name

package/dist/Breadcrumb-CyaMrJfW.js

@@ -0,0 +1,80 @@
+import { t as e } from "./clsx-BWCAbrjV.js";
+import { Q as t, st as n } from "./esm-DQBytmnt.js";
+import { t as r } from "./Button-DFcjZsF4.js";
+import { t as i } from "./Icon-DJTgdvsG.js";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+var c = {
+	brandIcon: "SKL1XW_brandIcon",
+	current: "SKL1XW_current",
+	ellipsis: "SKL1XW_ellipsis",
+	folds: "SKL1XW_folds",
+	item: "SKL1XW_item",
+	label: "SKL1XW_label",
+	list: "SKL1XW_list",
+	nav: "SKL1XW_nav",
+	sep: "SKL1XW_sep",
+	slash: "SKL1XW_slash",
+	text: "SKL1XW_text"
+}, l = a(({ items: a, separator: l = "chevron", link: u = "a", collapse: d = !0, label: f = "Breadcrumb", className: p, ...m }, h) => {
+	if (a.length === 0) return null;
+	let g = a.length - 1, _ = d && a.length > 3, v = l === "slash" ? /* @__PURE__ */ o("span", {
+		className: e(c.sep, c.slash),
+		"aria-hidden": "true",
+		children: "/"
+	}) : /* @__PURE__ */ o(i, {
+		name: l === "arrow" ? n : t,
+		size: 12,
+		className: c.sep,
+		"aria-hidden": "true"
+	});
+	return /* @__PURE__ */ o("nav", {
+		ref: h,
+		className: e("hsui-breadcrumb", c.nav, p),
+		"aria-label": f,
+		...m,
+		children: /* @__PURE__ */ o("ol", {
+			className: c.list,
+			children: a.map((t, n) => {
+				let a = n === g, l = _ && n > 0 && n < g - 1, d = t.icon ? /* @__PURE__ */ o(i, {
+					name: t.icon,
+					size: 12,
+					className: e(t.iconColor === "brand" && c.brandIcon),
+					"aria-hidden": "true"
+				}) : null, f = t.href && !a ? /* @__PURE__ */ o(r, {
+					as: u,
+					href: t.href,
+					variant: "plain",
+					size: 100,
+					iconLeft: d ?? void 0,
+					children: t.label
+				}) : /* @__PURE__ */ s("span", {
+					className: a ? c.current : c.text,
+					"aria-current": a ? "page" : void 0,
+					children: [d, /* @__PURE__ */ o("span", {
+						className: c.label,
+						children: t.label
+					})]
+				});
+				return /* @__PURE__ */ s("li", {
+					className: e(c.item, l && c.folds),
+					children: [
+						n > 0 && v,
+						f,
+						_ && n === 0 && /* @__PURE__ */ s("span", {
+							className: c.ellipsis,
+							"aria-hidden": "true",
+							children: [v, /* @__PURE__ */ o("span", {
+								className: c.text,
+								children: "…"
+							})]
+						})
+					]
+				}, n);
+			})
+		})
+	});
+});
+l.displayName = "Breadcrumb";
+//#endregion
+export { l as t };

package/dist/components/Breadcrumb/index.js

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