@ultimat3/ui 3.0.0 → 4.0.0

package/CLAUDE.md

@@ -31,9 +31,11 @@ Tier 5. Imports `@ultimat3/core`, `schema`, `i18n`, `money`, `time`. Never `http
 - Formatting logic lives in a pure `*-view.ts` next to the component (`money-view.ts`, `date-time-view.ts`) so it is testable with no renderer. Every other renderer-free core follows the same rule under its own name (`sort-state.ts`, `image-source.ts`) — the `.tsx` holds markup, never a rule.
 - **The rule being pure is not enough — the WIRING has to be tested too.** `createRovingTabindex` was correct and `Menu` handed it `[role="menuitem"]`, so a disabled item made every item after it unreachable and every assertion in the package still passed. `src/jsx-probe.ts` reads the props an element actually carries (a `tabindex`, an `aria-live`, an `onKeyDown`, a `ref`) and `src/fake-dom.ts` gives it a DOM where a disabled control REFUSES focus, exactly as the real one does. Both are test-only and neither is in `index.ts`. `components/interaction.test.ts` is where a keyboard or form-participation claim gets proven; asserting the pure helper alone is how these shipped.
 - **A roving group excludes disabled items from both answers** — the set arrows walk and the one item holding the tab stop (`src/roving.ts`). `focus()` on a disabled control is a no-op, so a disabled item left in the list pins the reducer on its index forever. And a control that answers arrows itself (`handlesOwnArrowKeys`) keeps them: a `Toolbar` exists to hold a search field.
+- **A single-winner state attribute is decided by POSITION, never by a missing prop.** `Breadcrumb` gives `aria-current="page"` to the last item and to nothing else; an href-less ancestor renders as plain text with no `aria-current` at all. Reading "no href" as "is the current page" put two of them in one `<nav>`. `Tabs.tsx` is the same rule for `tabindex`, and `Breadcrumb.test.ts` proves it through `jsx-probe` rather than through the pure helper.
 - **Live semantics belong to the container that outlives the message.** `ToastRegion`'s `<ol>` carries `aria-live`; a `Toast` is a plain `<li>`. A region created with its content already inside it is not announced, and a `role="status"` on the `<li>` also strips its `listitem` semantics.
 - **`aria-checked` never mirrors a native `checked`.** ARIA outranks host state in the accessibility tree, and on the no-JS path this package supports there is nothing to rewrite the attribute after the user ticks the box. `Checkbox` writes only `'mixed'` (an IDL property with no attribute form, so ARIA is the only server-side lever); `Switch` writes none at all, over a `biome-ignore` that says why.
 - **Generated source is a CODE sink.** `build-icons.ts` writes modules every app EXECUTES at import, from data fetched over the network, so an attribute value goes through `JSON.stringify` and never `'${value}'` — and `SAFE_ATTR_VALUE` refuses anything that is not glyph geometry one layer earlier. `iconElements` guards tags and attribute NAMES; it has never guarded a value. Malformed upstream data is `X_UI_INVALID_VALUE`; only the generator's real environment faults (no network, no biome binary) are `X_UI_RUNTIME_MISSING`.
+- **The icon NAME is the third sink, and it has no escape.** The upstream map key becomes a filesystem path under `GLYPHS_DIR`, an exported identifier and a `//` banner, and `buildIcons` clears `GLYPHS_DIR` before it writes — so `../../index` was a delete of the glyph tree followed by an overwrite of a hand-written module, and a key carrying `;` produced a module that typechecked and ran. `SAFE_ICON_NAME` (`/^[a-z0-9]+(-[a-z0-9]+)*$/`) is checked in `parseIconNodes` BEFORE `out.set`, the same allowlist-over-a-sink shape as `SAFE_ATTR_VALUE` one layer down; all 1767 committed names pass it and `build-icons.test.ts` asserts that.
 
 ## Files
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultimat3/ui",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "SolidJS design system: semantic design tokens, dark/RTL-ready SCSS modules, a11y primitives",
   "license": "MIT",
   "type": "module",
@@ -39,10 +39,10 @@
     "icons": "bun run src/icons/build-icons.ts"
   },
   "dependencies": {
-    "@ultimat3/core": "3.0.0",
-    "@ultimat3/i18n": "3.0.0",
-    "@ultimat3/money": "3.0.0",
-    "@ultimat3/time": "3.0.0"
+    "@ultimat3/core": "4.0.0",
+    "@ultimat3/i18n": "4.0.0",
+    "@ultimat3/money": "4.0.0",
+    "@ultimat3/time": "4.0.0"
   },
   "peerDependencies": {
     "solid-js": "^1.9.0"

package/src/components/Breadcrumb.module.scss

@@ -43,3 +43,9 @@
   color: t.role('fg-strong');
   font-weight: t.weight(medium);
 }
+
+// An ancestor with no href: reads as trail, not as a control, and carries no
+// `aria-current` — only the last item is the current page.
+.text {
+  color: t.role('fg-muted');
+}

package/src/components/Breadcrumb.tsx

@@ -32,10 +32,15 @@ export function Breadcrumb(props: BreadcrumbProps): JSX.Element {
       <ol class={styles['list']}>
         {props.items.map((item, index) => (
           <li class={styles['item']}>
-            {item.href === undefined || index === props.items.length - 1 ? (
+            {/* POSITION decides `aria-current`, never the presence of an href: an ancestor with no
+                link is still an ancestor, and a second `aria-current="page"` in one nav announces
+                the current page on a node that is not it. A trail carries exactly one. */}
+            {index === props.items.length - 1 ? (
               <span class={styles['current']} aria-current="page">
                 {item.label}
               </span>
+            ) : item.href === undefined ? (
+              <span class={styles['text']}>{item.label}</span>
             ) : (
               <a class={styles['link']} href={linkTarget(item.href).href}>
                 {item.label}

package/src/components/ErrorState.tsx

@@ -63,10 +63,17 @@ export function ErrorState(props: ErrorStateProps): JSX.Element {
   return (
     <div class={cx(styles['error'], props.class)} role="alert">
       <p class={styles['head']}>
-        <code class={styles['code']}>{parts().code}</code>
-        <span class={styles['title']}>{parts().title}</span>
+        {/* The heading is the ONE string here the design system owns, so it is translated;
+            `parts()` carries the error's own three, which are English by construction — a code's
+            registry title, its cause and its fix are the same text the terminal prints. */}
+        <span class={styles['title']}>{ui.t(UI_KEYS.error)}</span>
       </p>
       <dl class={styles['detail']}>
+        {/* A bare code with no label reads as noise to anyone who is not the author of the throw. */}
+        <dt>{ui.t(UI_KEYS.errorCode)}</dt>
+        <dd>
+          <code class={styles['code']}>{parts().code}</code> {parts().title}
+        </dd>
         <dt>{ui.t(UI_KEYS.errorCause)}</dt>
         <dd>{parts().cause}</dd>
         <dt>{ui.t(UI_KEYS.errorFix)}</dt>

package/src/icons/build-icons.ts

@@ -37,11 +37,28 @@ export function parseIconNodes(text: string): ReadonlyMap<string, IconGlyph> {
   }
   const out = new Map<string, IconGlyph>();
   for (const [name, value] of Object.entries(parsed as Record<string, unknown>)) {
+    // Checked BEFORE the map holds it: the key reaches three sinks downstream — a filesystem path,
+    // a TypeScript identifier and a `//` banner — and `buildIcons` clears GLYPHS_DIR before it
+    // writes, so `../../index` is a delete plus an overwrite of a hand-written module.
+    if (!SAFE_ICON_NAME.test(name)) {
+      throw invalidIconDataError(
+        `carries ${renderCauseValue(name)} as an icon name, which is not the kebab-case shape every Lucide icon uses; the name becomes a file path and an exported identifier, so it cannot be escaped. lucide-static@${LUCIDE_VERSION} is the pin that published it, so a re-run against the same pin repeats this`,
+        'bun run --filter @ultimat3/ui icons   # after raising LUCIDE_VERSION in packages/ui/src/icons/build-icons.ts',
+      );
+    }
     out.set(name, toGlyph(name, value));
   }
   return out;
 }
 
+/**
+ * An icon name, as characters: lowercase kebab-case, no leading, trailing or doubled hyphen. The
+ * same allowlist-over-a-sink shape as `SAFE_ATTR_VALUE`, one layer up — the name is interpolated
+ * into a PATH and an IDENTIFIER, neither of which has an escape, so refusing is the only move.
+ * Measured against the whole committed set: all 1767 names pass (`build-icons.test.ts` asserts it).
+ */
+export const SAFE_ICON_NAME = /^[a-z0-9]+(-[a-z0-9]+)*$/;
+
 /**
  * Glyph geometry, as characters: digits, the path-command letters, `currentColor`/`none`, and the
  * separators between them. Deliberately not "anything that is not a quote" — an allowlist over a