@eifi1/ui-kit 0.33.0 → 0.34.0

package/src/landing/access.ts

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 
 import { DEFAULT_LANDING_LABELS, useLandingLabels } from "./landing-labels";
 import type { LandingLabels } from "./landing-labels";
+import type { LabelOverride } from "../i18n/kit-labels";
 
 /**
  * How a visitor gets an account (docs/landing-demo-harmonization.md §2.2, §4.2).
@@ -79,7 +80,7 @@ export function accessAction(access: AccessChoice, labels: Partial<AccessLabels>
 }
 
 /** {@link accessAction} with the `landing` words of the nearest provider (then `labels`). */
-export function useAccessAction(access: AccessChoice, labels?: Partial<LandingLabels>): AccessLink {
+export function useAccessAction(access: AccessChoice, labels?: LabelOverride<LandingLabels>): AccessLink {
   const words = useLandingLabels(labels);
   // `access` is usually an inline object; its fields are what the link depends on.
   const kind = access.kind;

package/src/landing/landing-actions.tsx

@@ -1,12 +1,13 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 
 import { cn } from "../lib/cn";
-import { Button } from "../components/ui";
-import type { ButtonSize } from "../components/ui";
+import { Button } from "../components/button";
+import type { ButtonSize } from "../components/button-look";
 import { useAccessAction } from "./access";
 import type { AccessChoice } from "./access";
 import { useLandingLabels } from "./landing-labels";
 import type { LandingLabels } from "./landing-labels";
+import type { LabelOverride } from "../i18n/kit-labels";
 
 /**
  * Who is looking at a public page (docs/landing-demo-harmonization.md §3.1, §4.1):
@@ -19,7 +20,7 @@ export type LandingSession = "none" | "demo" | "user";
  *  largest actions. */
 const LARGE = "px-5 py-2.5";
 
-export interface LandingActionsProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+export interface LandingActionsProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
   session: LandingSession;
   access: AccessChoice;
   /** "Try the demo" without a session, "Continue the demo" with a demo one. Default
@@ -34,7 +35,7 @@ export interface LandingActionsProps extends Omit<ComponentPropsWithoutRef<"div"
   size?: ButtonSize | "large";
   /** `start` (default) under the hero's copy; `center` in the CTA band. */
   align?: "start" | "center";
-  labels?: Partial<LandingLabels>;
+  labels?: LabelOverride<LandingLabels>;
 }
 
 /**

package/src/landing/landing-labels.ts

@@ -1,4 +1,4 @@
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 
 /**
  * The kit's words on the public landing page (docs/landing-demo-harmonization.md §4.1,
@@ -54,6 +54,6 @@ export const DEFAULT_LANDING_LABELS: LandingLabels = {
 };
 
 /** The `landing` namespace, resolved: English, then the provider, then `labels`. */
-export function useLandingLabels(labels?: Partial<LandingLabels>): LandingLabels {
+export function useLandingLabels(labels?: LabelOverride<LandingLabels>): LandingLabels {
   return useKitLabels("landing", DEFAULT_LANDING_LABELS, labels);
 }

package/src/landing/landing-sections.tsx

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 
 import { cn } from "../lib/cn";
 import { Chip } from "../components/chip";
@@ -8,6 +8,7 @@ import { LandingActions } from "./landing-actions";
 import type { LandingActionsProps } from "./landing-actions";
 import { useLandingLabels } from "./landing-labels";
 import type { LandingLabels } from "./landing-labels";
+import type { LabelOverride } from "../i18n/kit-labels";
 
 /**
  * The sections of the public landing page (docs/landing-demo-harmonization.md §4.1),
@@ -40,7 +41,7 @@ type ActionProps = Pick<LandingActionsProps, "session" | "access" | "demoHref" |
 
 /* ── Hero ────────────────────────────────────────────────────────────────── */
 
-export interface HeroProps extends Omit<ComponentPropsWithoutRef<"section">, "title" | "children">, ActionProps {
+export interface HeroProps extends Omit<ComponentPropsWithRef<"section">, "title" | "children">, ActionProps {
   /** The page's `h1`: what the app does, in a line. */
   title: ReactNode;
   /** Under it: for whom, and why. */
@@ -57,7 +58,7 @@ export interface HeroProps extends Omit<ComponentPropsWithoutRef<"section">, "ti
   actions?: ReactNode;
   /** Default `h1`; lower where the hero is embedded in another page. */
   headingAs?: HeadingLevel;
-  labels?: Partial<LandingLabels>;
+  labels?: LabelOverride<LandingLabels>;
 }
 
 /**
@@ -108,10 +109,10 @@ export function Hero({
     >
       <div>
         {shownBadge != null && <div className="mb-4">{shownBadge}</div>}
-        <Heading className="text-4xl font-bold tracking-tight text-balance text-[var(--text-primary)] sm:text-5xl">
+        <Heading className="text-4xl font-bold tracking-tight text-balance text-primary sm:text-5xl">
           {title}
         </Heading>
-        {subtitle != null && <p className="mt-4 max-w-xl text-lg text-[var(--text-secondary)]">{subtitle}</p>}
+        {subtitle != null && <p className="mt-4 max-w-xl text-lg text-secondary">{subtitle}</p>}
         <div className="mt-8">
           {actions ?? (
             <LandingActions
@@ -123,7 +124,7 @@ export function Hero({
             />
           )}
         </div>
-        {trust != null && <p className="mt-4 text-sm text-[var(--text-muted)]">{trust}</p>}
+        {trust != null && <p className="mt-4 text-sm text-muted">{trust}</p>}
       </div>
       {visual != null && <Visual className="max-w-sm">{visual}</Visual>}
     </section>
@@ -132,7 +133,7 @@ export function Hero({
 
 /* ── Feature rows ────────────────────────────────────────────────────────── */
 
-export type FeatureRowsProps = ComponentPropsWithoutRef<"section">;
+export type FeatureRowsProps = ComponentPropsWithRef<"section">;
 
 /**
  * The band that holds the feature rows (§4.1.3): two to four {@link FeatureRow}s on the
@@ -145,14 +146,14 @@ export function FeatureRows({ className, children, ...rest }: FeatureRowsProps)
     <section
       {...rest}
       data-slot="landing-feature-rows"
-      className={cn("border-t border-[var(--border)] bg-[var(--bg-surface)]", className)}
+      className={cn("border-t border-subtle bg-surface", className)}
     >
       <div className="mx-auto max-w-6xl px-4 py-8 sm:py-12">{children}</div>
     </section>
   );
 }
 
-export interface FeatureRowProps extends Omit<ComponentPropsWithoutRef<"div">, "title" | "children"> {
+export interface FeatureRowProps extends Omit<ComponentPropsWithRef<"div">, "title" | "children"> {
   /** A lucide icon (or any SVG) before the eyebrow. Decorative. */
   icon?: ReactNode;
   /** The small uppercase line above the heading: "Capture", "Plan". */
@@ -194,7 +195,7 @@ export function FeatureRow({
     >
       <div className="lg:group-even/feature:order-last">
         {(icon != null || eyebrow != null) && (
-          <p className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-[var(--brand)]">
+          <p className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-brand">
             {icon != null && (
               <span aria-hidden className="flex shrink-0 [&_svg]:size-4">
                 {icon}
@@ -203,15 +204,15 @@ export function FeatureRow({
             {eyebrow}
           </p>
         )}
-        <Heading className="mt-2 text-2xl font-semibold tracking-tight text-balance text-[var(--text-primary)] sm:text-3xl">
+        <Heading className="mt-2 text-2xl font-semibold tracking-tight text-balance text-primary sm:text-3xl">
           {title}
         </Heading>
-        {description != null && <p className="mt-3 max-w-xl text-[var(--text-secondary)]">{description}</p>}
+        {description != null && <p className="mt-3 max-w-xl text-secondary">{description}</p>}
         {shown.length > 0 && (
           <ul className="mt-4 space-y-2">
             {shown.map((bullet, i) => (
-              <li key={i} className="flex gap-2.5 text-sm text-[var(--text-secondary)]">
-                <span aria-hidden className="mt-1.5 size-1.5 shrink-0 rounded-full bg-[var(--brand)]" />
+              <li key={i} className="flex gap-2.5 text-sm text-secondary">
+                <span aria-hidden className="mt-1.5 size-1.5 shrink-0 rounded-full bg-brand" />
                 <span className="min-w-0">{bullet}</span>
               </li>
             ))}
@@ -234,7 +235,7 @@ export interface TrustItem {
   description: ReactNode;
 }
 
-export interface TrustStripProps extends Omit<ComponentPropsWithoutRef<"section">, "children"> {
+export interface TrustStripProps extends Omit<ComponentPropsWithRef<"section">, "children"> {
   /** Three or four (§4.1.4): hosting, security, data ownership, sharing. */
   items: readonly TrustItem[];
   /** The items' heading level. Default `h3`. */
@@ -253,12 +254,12 @@ export function TrustStrip({ items, headingAs: Heading = "h3", className, ...res
         {items.map((item, i) => (
           <li key={i}>
             {item.icon != null && (
-              <span aria-hidden className="flex text-[var(--brand)] [&_svg]:size-5">
+              <span aria-hidden className="flex text-brand [&_svg]:size-5">
                 {item.icon}
               </span>
             )}
-            <Heading className="mt-2 text-sm font-semibold text-[var(--text-primary)]">{item.title}</Heading>
-            <p className="mt-1 text-sm text-[var(--text-secondary)]">{item.description}</p>
+            <Heading className="mt-2 text-sm font-semibold text-primary">{item.title}</Heading>
+            <p className="mt-1 text-sm text-secondary">{item.description}</p>
           </li>
         ))}
       </ul>
@@ -268,7 +269,7 @@ export function TrustStrip({ items, headingAs: Heading = "h3", className, ...res
 
 /* ── CTA band ────────────────────────────────────────────────────────────── */
 
-export interface CtaBandProps extends Omit<ComponentPropsWithoutRef<"section">, "title" | "children">, ActionProps {
+export interface CtaBandProps extends Omit<ComponentPropsWithRef<"section">, "title" | "children">, ActionProps {
   /** The band's `h2`: the last ask. */
   title: ReactNode;
   subtitle?: ReactNode;
@@ -276,7 +277,7 @@ export interface CtaBandProps extends Omit<ComponentPropsWithoutRef<"section">,
   actions?: ReactNode;
   /** Default `h2`. */
   headingAs?: HeadingLevel;
-  labels?: Partial<LandingLabels>;
+  labels?: LabelOverride<LandingLabels>;
 }
 
 /**
@@ -300,13 +301,13 @@ export function CtaBand({
     <section
       {...rest}
       data-slot="landing-cta"
-      className={cn("border-t border-[var(--border)] bg-[var(--bg-surface)]", className)}
+      className={cn("border-t border-subtle bg-surface", className)}
     >
       <div className="mx-auto max-w-5xl px-4 py-16 text-center">
-        <Heading className="text-2xl font-semibold tracking-tight text-balance text-[var(--text-primary)] sm:text-3xl">
+        <Heading className="text-2xl font-semibold tracking-tight text-balance text-primary sm:text-3xl">
           {title}
         </Heading>
-        {subtitle != null && <p className="mx-auto mt-3 max-w-xl text-[var(--text-secondary)]">{subtitle}</p>}
+        {subtitle != null && <p className="mx-auto mt-3 max-w-xl text-secondary">{subtitle}</p>}
         <div className="mt-8">
           {actions ?? (
             <LandingActions

package/src/landing/public-header.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 
-import { Button } from "../components/ui";
+import { Button } from "../components/button";
 import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { TopBar } from "../shell/top-bar";
 import type { TopBarProps } from "../shell/top-bar";
@@ -10,6 +10,7 @@ import type { AccessChoice } from "./access";
 import { useLandingLabels } from "./landing-labels";
 import type { LandingLabels } from "./landing-labels";
 import type { LandingSession } from "./landing-actions";
+import type { LabelOverride } from "../i18n/kit-labels";
 
 /** The header's brand: what `TopBarBrand` draws. */
 export interface PublicHeaderBrand {
@@ -40,7 +41,7 @@ export interface PublicHeaderProps extends Omit<TopBarProps, "brand" | "actions"
   languageMenu?: ReactNode;
   /** The app's `ThemeToggle`, before the language menu. */
   themeToggle?: ReactNode;
-  labels?: Partial<LandingLabels>;
+  labels?: LabelOverride<LandingLabels>;
 }
 
 /**

package/src/landing/routing.tsx

@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import type { ReactNode } from "react";
 import { Navigate, Outlet, useLocation } from "react-router";
 
-import { readStored, writeStored } from "../lib/safe-storage";
+import { readStored, removeStored, writeStored } from "../lib/safe-storage";
 import type { LandingSession } from "./landing-actions";
 import { LoadingState } from "../components/loading-state";
 
@@ -142,12 +142,7 @@ export function readLastVisitedPage(key: string, fallback: string | null = null)
 /** Forget the remembered page — on an explicit sign-out, so the next account does not
  *  resume on the previous one's page. */
 export function clearLastVisitedPage(key: string): void {
-  if (typeof window === "undefined") return;
-  try {
-    window.localStorage.removeItem(key);
-  } catch {
-    // storage blocked: there is nothing to forget
-  }
+  removeStored(key);
 }
 
 /* ── RootEntry ───────────────────────────────────────────────────────────── */

package/src/lib/chip-edge-snap.ts

@@ -0,0 +1,212 @@
+// Chip's edge snapping: the module-level engine (one ResizeObserver, one `resize`
+// listener and one resolution query for every snapped chip on the page, and the state
+// they share) and the hook a chip hangs it on. Moved out of components/chip.tsx as it
+// was (MOD-9, refactor audit 2026-10); chip.tsx still exports `refreshChipEdges`.
+import { useCallback, useLayoutEffect, useRef } from "react";
+
+/* ── Edge snapping (fractional device-pixel ratios) ──────────────────────────
+ *
+ * WHY. At a device-pixel ratio of 1.25 (a 125 % Windows display, or 125 % browser
+ * zoom) Chrome snaps a box to whole CSS pixels and only then scales it, so a 1px
+ * border is 1.25 device pixels wide and starts at a quarter-pixel phase that depends
+ * on where the edge lands. A chip's left edge follows whatever stands before it, its
+ * right edge follows its own text, so the two land on unrelated phases: one rasterises
+ * as a crisp pixel, the other as a two-pixel smear at half strength — and a 60 %-alpha
+ * border (`--danger-border`) makes the smeared side read as a THINNER line (keksdose
+ * dev #576).
+ *
+ * WHAT FIXES IT. The two edges rasterise as mirror images exactly when their device
+ * positions sum to a whole number: `(2·left + width) · dpr` integral, `left` being the
+ * edge's snapped CSS x. Rounding the WIDTH alone to the ratio's grid (4px at 1.25)
+ * makes the phases EQUAL, which is not the same thing: measured with keksdose's
+ * playwright harness across every left phase at 1.25, width-only rounding mirrored the
+ * edges at two of the four phases and left the other two as lopsided as before (mean
+ * peak asymmetry 16.5, worse than the unsnapped 10.9 a random width gets by luck); the
+ * position-aware width below took it to 0 at every phase. Inset rings, whole-pixel
+ * starts, compositing hints and fractional border widths were measured by keksdose
+ * and do not help — Chrome rounds a sub-pixel border back up to 1px.
+ *
+ * So the fix needs the chip's position, which is why it is opt-in (`snapEdges`): it
+ * reads layout. Cheaply — every snapped chip on the page shares one ResizeObserver,
+ * one `resize` listener and one resolution media query, and a pass is batched into a
+ * frame as read-all / write-all, not a forced layout per chip. At an integer ratio,
+ * and at a half one (1.5, 2.5: grid 2 — measured symmetric already, both edges a
+ * pixel and a half on the same pattern), there is nothing to fix and a pass
+ * writes nothing.
+ */
+
+/** The smallest whole CSS-pixel count `n` with `n × dpr` whole — 4 at 1.25, 2 at 1.5,
+ *  1 at an integer ratio. 0 for a ratio no step up to 4px fits (110 % zoom wants 10px;
+ *  a chip growing by up to 9px is a layout change, not a hairline fix). */
+function chipEdgeGrid(dpr: number): number {
+  for (let n = 1; n <= 4; n++) if (Math.abs(n * dpr - Math.round(n * dpr)) < 1e-3) return n;
+  return 0;
+}
+
+/**
+ * The width (whole CSS px, at least `natural`) that mirrors a box's two edges at
+ * `dpr`, for a box whose left edge sits at CSS x `left`. `natural` back when the ratio
+ * needs nothing.
+ */
+function snappedChipEdgeWidth(natural: number, left: number, dpr: number): number {
+  const n = chipEdgeGrid(dpr);
+  if (n <= 2) return natural;
+  const l = Math.round(left);
+  // A hair under a whole pixel is that pixel: 59.999 is a 60px chip, not a 61px one.
+  let w = Math.ceil(natural - 0.01);
+  while ((((2 * l + w) % n) + n) % n !== 0) w++;
+  return w;
+}
+
+const snapped = new Set<HTMLElement>();
+/** The min-width each chip was given by a pass — so a pass only ever clears its own. */
+const written = new WeakMap<HTMLElement, string>();
+let snapFrame = 0;
+let snapObserver: ResizeObserver | null = null;
+let ratioQuery: MediaQueryList | null = null;
+
+function clearOwn(el: HTMLElement) {
+  const own = written.get(el);
+  if (own !== undefined && el.style.minWidth === own) el.style.minWidth = "";
+  written.delete(el);
+}
+
+/**
+ * Re-snap every chip rendered with `snapEdges`, now. The kit already re-snaps when a
+ * chip renders, resizes, or the window or the ratio changes; call this after moving
+ * chips some other way (a side panel sliding in beside a table of status chips),
+ * since a move is not something an observer can see.
+ */
+export function refreshChipEdges(): void {
+  if (snapFrame) {
+    cancelAnimationFrame(snapFrame);
+    snapFrame = 0;
+  }
+  if (typeof window === "undefined" || !snapped.size) return;
+  const dpr = window.devicePixelRatio || 1;
+  const els = [...snapped];
+  // Write: back to the natural width, so what is read below is the chip, not our pin.
+  for (const el of els) clearOwn(el);
+  const n = chipEdgeGrid(dpr);
+  if (n <= 2) return;
+  // A chip whose own end decides where it starts (RTL, `justify-end`) moves when it
+  // grows, so a pass re-reads what it wrote and steps on by a pixel until the edges
+  // agree — `n` steps cover every residue. Each pass is ONE layout for every chip
+  // together. A chip that never agrees (a centred one moves both edges at once) is
+  // given its natural width back rather than kept wider for nothing.
+  let pending = els;
+  for (let pass = 0; pass <= n && pending.length; pass++) {
+    const reads = pending.map((el) => {
+      const r = el.getBoundingClientRect();
+      // The text label (chip.tsx's CHIP_LABEL_TRUNCATE; `.truncate` before 0.33).
+      const label = el.querySelector<HTMLElement>(".truncate-until-large");
+      // Not laid out (a hidden ancestor, jsdom), or truncated at its container's edge,
+      // where a wider chip would overflow: leave it alone. So too a label wrapped onto
+      // a second line at Large (0.32.1): the chip is already as wide as its row lets it
+      // be, and a min-width past that would push it over the edge just the same.
+      if (!r.width || (label && (label.scrollWidth > label.clientWidth || labelWraps(label)))) return null;
+      const width = Math.round(r.width * 64) / 64;
+      const target = snappedChipEdgeWidth(width, r.left + window.scrollX, dpr);
+      return target === width ? null : target;
+    });
+    const next: HTMLElement[] = [];
+    pending.forEach((el, i) => {
+      const target = reads[i];
+      if (target == null) return;
+      if (pass === n) {
+        clearOwn(el);
+        return;
+      }
+      const own = written.get(el);
+      const value = `${pass > 0 && own !== undefined ? parseFloat(own) + 1 : target}px`;
+      el.style.minWidth = value;
+      written.set(el, value);
+      next.push(el);
+    });
+    pending = next;
+  }
+}
+
+/** Whether a chip's label runs to more than one line — taller than one and a half of
+ *  its line height. A line height of `normal` (no number to compare) counts as one line. */
+function labelWraps(label: HTMLElement): boolean {
+  const line = Number.parseFloat(getComputedStyle(label).lineHeight);
+  return line > 0 && label.clientHeight > 1.5 * line;
+}
+
+function scheduleChipEdges() {
+  if (snapFrame || typeof requestAnimationFrame === "undefined") return;
+  snapFrame = requestAnimationFrame(() => {
+    snapFrame = 0;
+    refreshChipEdges();
+  });
+}
+
+/** The resolution query for the CURRENT ratio: it stops matching when the ratio
+ *  changes (a window dragged to another display), which a `resize` need not fire. */
+function watchRatio() {
+  ratioQuery?.removeEventListener("change", onRatioChange);
+  ratioQuery =
+    typeof window.matchMedia === "function"
+      ? window.matchMedia(`(resolution: ${window.devicePixelRatio || 1}dppx)`)
+      : null;
+  ratioQuery?.addEventListener("change", onRatioChange);
+}
+
+function onRatioChange() {
+  watchRatio();
+  scheduleChipEdges();
+}
+
+function registerSnap(el: HTMLElement) {
+  if (snapped.has(el)) return;
+  if (!snapped.size) {
+    if (typeof ResizeObserver !== "undefined") snapObserver = new ResizeObserver(scheduleChipEdges);
+    window.addEventListener("resize", scheduleChipEdges);
+    watchRatio();
+  }
+  snapped.add(el);
+  snapObserver?.observe(el);
+  scheduleChipEdges();
+}
+
+function unregisterSnap(el: HTMLElement) {
+  if (!snapped.delete(el)) return;
+  snapObserver?.unobserve(el);
+  clearOwn(el);
+  if (snapped.size) return;
+  snapObserver?.disconnect();
+  snapObserver = null;
+  window.removeEventListener("resize", scheduleChipEdges);
+  ratioQuery?.removeEventListener("change", onRatioChange);
+  ratioQuery = null;
+}
+
+/** The ref a chip hangs on its visible pill, plus a re-snap after every render (its
+ *  label or its neighbours may have changed). */
+export function useSnapEdges(on: boolean) {
+  const node = useRef<HTMLElement | null>(null);
+  const ref = useCallback(
+    (el: HTMLElement | null) => {
+      if (el === node.current) return;
+      const prev = node.current;
+      node.current = el;
+      // React detaches and re-attaches a ref whose callback changed identity (a
+      // consumer's inline ref) — the same element, a moment apart. Unregistering on
+      // the detach would clear the pin and paint one frame unsnapped, so the drop
+      // waits a microtask and is skipped if the element came straight back.
+      if (prev) queueMicrotask(() => node.current !== prev && unregisterSnap(prev));
+      if (el && on) registerSnap(el);
+    },
+    [on],
+  );
+  useLayoutEffect(() => {
+    const el = node.current;
+    if (!el) return;
+    if (on) {
+      registerSnap(el);
+      scheduleChipEdges();
+    } else unregisterSnap(el);
+  });
+  return ref;
+}

package/src/lib/cn.ts

@@ -9,8 +9,20 @@ import { extendTailwindMerge } from "tailwind-merge";
  * "won" over it — and `cn("text-xs", "text-caption")` kept both sizes. Registered as
  * sizes, they merge like `text-xs`: a later size replaces an earlier one, a colour sits
  * beside them.
+ *
+ * The same for the focus frame's width (0.34, refactor audit DOC-7): `ring-focus` and
+ * `outline-focus` are `@theme inline` WIDTHS, and unknown, a `ring-<word>` is taken for a
+ * colour — so `cn(FOCUS_RING, "focus-visible:ring-strong")` dropped the width and the
+ * ring was gone. Registered as widths, they merge like `ring-2` / `outline-2`, as the
+ * arbitrary `length:` widths they replaced did. (No class is spelt out here: an app's
+ * Tailwind scans the built source maps too, and would generate it.)
  */
-const merge = extendTailwindMerge({ extend: { theme: { text: ["micro", "caption"] } } });
+const merge = extendTailwindMerge({
+  extend: {
+    theme: { text: ["micro", "caption"] },
+    classGroups: { "ring-w": [{ ring: ["focus"] }], "outline-w": [{ outline: ["focus"] }] },
+  },
+});
 
 /** Merge class lists with Tailwind conflict resolution (later wins). */
 export const cn = (...inputs: Parameters<typeof clsx>) => merge(clsx(inputs));

package/src/lib/dates.ts

@@ -126,10 +126,12 @@ export function parseIsoDate(s: string): Date | null {
 
 /** Format a "YYYY-MM-DD" string for display in `locale` (empty string when
  *  unparseable). Defaults to the locale's short numeric date; pass `options` to
- *  override (e.g. `{ dateStyle: "medium" }`). */
+ *  override (e.g. `{ dateStyle: "medium" }`). `locale` may be `undefined` since 0.34 —
+ *  the runtime's default, as `Intl` reads it and as every other kit formatter takes it
+ *  (DUP-11: DatePicker re-wrapped this function only to pass none). */
 export function formatIsoDate(
   iso: string,
-  locale: string,
+  locale: string | undefined,
   options?: Intl.DateTimeFormatOptions,
 ): string {
   const d = parseIsoDate(iso);

package/src/lib/decimal-marks.ts

@@ -40,7 +40,9 @@ export function decimalMark(locale: string | undefined): "," | "." {
  * - both marks present: the one that is not the locale's is grouping, and goes;
  * - in a "," locale, only "." present: grouping when it cannot be a decimal as a
  *   German reader writes it — twice ("1.234.567"), or in thousands shape ("1.234",
- *   "12.500") — otherwise a decimal ("1.5", typed by a dot-decimal habit);
+ *   "12.500") — otherwise a decimal ("1.5", typed by a dot-decimal habit). A first
+ *   group that starts with 0 is never thousands: "0.500" is a half, not five hundred
+ *   (BUG-6, refactor audit 2026-10);
  * - in a "." locale, only "," present: grouping when it appears twice ("1,234,567");
  *   once it stays a decimal, because Swiss and German typists write "1,5" in a
  *   de-CH form (kastlan 40) and a unit price "1,789" is a decimal.
@@ -56,7 +58,7 @@ export function normalizeTypedMarks(raw: string, mark: "," | "."): string {
     if (count === 0) return operand;
     const grouping = hasMark
       ? true
-      : count > 1 || (mark === "," && /^\d{1,3}(\.\d{3})+$/.test(operand));
+      : count > 1 || (mark === "," && /^[1-9]\d{0,2}(\.\d{3})+$/.test(operand));
     return grouping ? operand.split(other).join("") : operand;
   });
 }