@repraze/kernelkit 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/hooks/use-time-format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-time-format.js","sourceRoot":"","sources":["../../src/hooks/use-time-format.ts"],"names":[],"mappings":"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"}

package/dist/lib/color.d.ts

@@ -6,9 +6,13 @@
  * - `--c-tint` opaque wash behind foreground text
  * - `--c-fill` / `--c-fill-fg` vivid solid surface and its text (TermiColor "fills are the brand":
  *   in light mode the text tier is darkened for contrast, the fill tier stays vivid)
+ * - `--c-soft-text` text on a wash of its own color (soft variants, soft status surfaces): `--c` mixed 25%
+ *   toward the foreground with its chroma restored, which keeps hue and saturation and passes WCAG AA
+ *   4.5:1 for every color, in light, dark and both hc modes, on background, card and popover (plain `--c`
+ *   on its own wash fell to ~3.6)
  *
  * Spread `colorVariants` into a cva `variants.color` map, then write variants against the vars
- * (`bg-(--c) text-(--c-fg)`, `bg-(--c)/12 text-(--c)`, …).
+ * (`bg-(--c) text-(--c-fg)`, `bg-(--c)/12 text-(--c-soft-text)`, …).
  */
 export declare const STATUS_COLORS: readonly ["danger", "warning", "success", "info"];
 export declare const HUES: readonly ["red", "orange", "yellow", "green", "cyan", "blue", "purple", "pink"];

package/dist/lib/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/lib/color.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,aAAa,mDAAoD,CAAC;AAC/E,eAAO,MAAM,IAAI,iFAAkF,CAAC;AACpG,eAAO,MAAM,MAAM,+IAA6D,CAAC;AAEjF,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAG5C,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAmB/C,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,aAAa,yIAAwC,CAAC;AAEnE,uEAAuE;AACvE,eAAO,MAAM,aAAa,wDAAyD,CAAC;AACpF,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,yCAAyC;AACzC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,CAAC;AAiBvE,uDAAuD;AACvD,wBAAgB,WAAW,CACvB,OAAO,EAAE,WAAW,GAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,EAC1D,KAAK,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,EAC/B,QAAQ,GAAE,WAAqB,GAChC;IAAC,OAAO,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAC,CAItC"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/lib/color.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,eAAO,MAAM,aAAa,mDAAoD,CAAC;AAC/E,eAAO,MAAM,IAAI,iFAAkF,CAAC;AACpG,eAAO,MAAM,MAAM,+IAA6D,CAAC;AAEjF,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAiC5C,eAAO,MAAM,aAAa,EAErB,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3B,oFAAoF;AACpF,eAAO,MAAM,aAAa,yIAAwC,CAAC;AAEnE,uEAAuE;AACvE,eAAO,MAAM,aAAa,wDAAyD,CAAC;AACpF,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,yCAAyC;AACzC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,CAAC;AAiBvE,uDAAuD;AACvD,wBAAgB,WAAW,CACvB,OAAO,EAAE,WAAW,GAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,EAC1D,KAAK,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,EAC/B,QAAQ,GAAE,WAAqB,GAChC;IAAC,OAAO,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,KAAK,CAAA;CAAC,CAItC"}

package/dist/lib/color.js

@@ -6,15 +6,26 @@
  * - `--c-tint` opaque wash behind foreground text
  * - `--c-fill` / `--c-fill-fg` vivid solid surface and its text (TermiColor "fills are the brand":
  *   in light mode the text tier is darkened for contrast, the fill tier stays vivid)
+ * - `--c-soft-text` text on a wash of its own color (soft variants, soft status surfaces): `--c` mixed 25%
+ *   toward the foreground with its chroma restored, which keeps hue and saturation and passes WCAG AA
+ *   4.5:1 for every color, in light, dark and both hc modes, on background, card and popover (plain `--c`
+ *   on its own wash fell to ~3.6)
  *
  * Spread `colorVariants` into a cva `variants.color` map, then write variants against the vars
- * (`bg-(--c) text-(--c-fg)`, `bg-(--c)/12 text-(--c)`, …).
+ * (`bg-(--c) text-(--c-fg)`, `bg-(--c)/12 text-(--c-soft-text)`, …).
  */
 export const STATUS_COLORS = ["danger", "warning", "success", "info"];
 export const HUES = ["red", "orange", "yellow", "green", "cyan", "blue", "purple", "pink"];
 export const COLORS = ["neutral", "primary", ...STATUS_COLORS, ...HUES];
+/**
+ * Derived from `--c` on the same element, so it is set alongside every color (a :root rule would see no `--c`).
+ * The mix toward the (neutral) foreground sets the lightness for contrast but also scales chroma by 0.75, so
+ * where relative color syntax is supported the chroma is multiplied back by 1/0.75: same lightness and hue,
+ * the original saturation (≥ 5.08:1 everywhere, vs ≥ 5.68 for the plain mix kept as the fallback).
+ */
+const SOFT_TEXT = "[--c-soft-text:color-mix(in_oklab,var(--c)_75%,var(--foreground))] supports-[color:oklch(from_red_l_c_h)]:[--c-soft-text:oklch(from_color-mix(in_oklab,var(--c)_75%,var(--foreground))_l_calc(c*1.333)_h)]";
 // Literal strings on purpose: Tailwind only generates classes it can read in the source.
-export const colorVariants = {
+const baseColorVariants = {
     neutral: "[--c:var(--foreground)] [--c-fg:var(--background)] [--c-tint:var(--secondary)] [--c-fill:var(--foreground)] [--c-fill-fg:var(--background)]",
     primary: "[--c:var(--primary-text)] [--c-fg:var(--tc-on-accent)] [--c-tint:var(--accent)] [--c-fill:var(--primary)] [--c-fill-fg:var(--primary-foreground)]",
     danger: "[--c:var(--danger)] [--c-fg:var(--danger-foreground)] [--c-tint:var(--danger-tint)] [--c-fill:var(--tc-red-fill)] [--c-fill-fg:var(--tc-red-on-fill)]",
@@ -30,6 +41,7 @@ export const colorVariants = {
     purple: "[--c:var(--tc-purple)] [--c-fg:var(--tc-purple-on)] [--c-tint:var(--tc-purple-tint)] [--c-fill:var(--tc-purple-fill)] [--c-fill-fg:var(--tc-purple-on-fill)]",
     pink: "[--c:var(--tc-pink)] [--c-fg:var(--tc-pink-on)] [--c-tint:var(--tc-pink-tint)] [--c-fill:var(--tc-pink-fill)] [--c-fill-fg:var(--tc-pink-on-fill)]",
 };
+export const colorVariants = Object.fromEntries(Object.entries(baseColorVariants).map(([color, vars]) => [color, `${vars} ${SOFT_TEXT}`]));
 /** Every color except neutral: the ones whose outline/ghost variants are tinted. */
 export const TINTED_COLORS = COLORS.filter((c) => c !== "neutral");
 /** Fill styles shared by Button, Badge, Toggle… (GUIDELINES.md §2). */

package/dist/lib/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","sourceRoot":"","sources":["../../src/lib/color.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAU,CAAC;AAC/E,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AACpG,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE,GAAG,IAAI,CAAU,CAAC;AAIjF,yFAAyF;AACzF,MAAM,CAAC,MAAM,aAAa,GAA0B;IAChD,OAAO,EACH,6IAA6I;IACjJ,OAAO,EACH,mJAAmJ;IACvJ,MAAM,EAAE,uJAAuJ;IAC/J,OAAO,EACH,gKAAgK;IACpK,OAAO,EACH,8JAA8J;IAClK,IAAI,EAAE,mJAAmJ;IACzJ,GAAG,EAAE,+IAA+I;IACpJ,MAAM,EAAE,8JAA8J;IACtK,MAAM,EAAE,8JAA8J;IACtK,KAAK,EAAE,yJAAyJ;IAChK,IAAI,EAAE,oJAAoJ;IAC1J,IAAI,EAAE,oJAAoJ;IAC1J,MAAM,EAAE,8JAA8J;IACtK,IAAI,EAAE,oJAAoJ;CAC7J,CAAC;AAEF,oFAAoF;AACpF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC;AAEnE,uEAAuE;AACvE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,CAAU,CAAC;AAMpF,MAAM,OAAO,GAAoE;IAC7E,OAAO,EAAE,EAAC,OAAO,EAAE,OAAO,EAAC;IAC3B,SAAS,EAAE,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAC;IAC/C,WAAW,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAC;CAClD,CAAC;AAEF,oGAAoG;AACpG,MAAM,aAAa,GAA+B;IAC9C,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;CACnB,CAAC;AAEF,uDAAuD;AACvD,MAAM,UAAU,WAAW,CACvB,OAA0D,EAC1D,KAA+B,EAC/B,WAAwB,OAAO;IAE/B,MAAM,KAAK,GAAG,OAAO,IAAI,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAA2B,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/F,MAAM,CAAC,GAAG,KAAK,EAAE,OAAO,IAAK,OAA0C,IAAI,QAAQ,CAAC;IACpF,OAAO,EAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI,KAAK,EAAE,KAAK,IAAI,aAAa,CAAC,CAAC,CAAC,EAAC,CAAC;AAC1E,CAAC"}
+{"version":3,"file":"color.js","sourceRoot":"","sources":["../../src/lib/color.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,CAAU,CAAC;AAC/E,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AACpG,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE,GAAG,IAAI,CAAU,CAAC;AAIjF;;;;;GAKG;AACH,MAAM,SAAS,GACX,4MAA4M,CAAC;AAEjN,yFAAyF;AACzF,MAAM,iBAAiB,GAA0B;IAC7C,OAAO,EACH,6IAA6I;IACjJ,OAAO,EACH,mJAAmJ;IACvJ,MAAM,EAAE,uJAAuJ;IAC/J,OAAO,EACH,gKAAgK;IACpK,OAAO,EACH,8JAA8J;IAClK,IAAI,EAAE,mJAAmJ;IACzJ,GAAG,EAAE,+IAA+I;IACpJ,MAAM,EAAE,8JAA8J;IACtK,MAAM,EAAE,8JAA8J;IACtK,KAAK,EAAE,yJAAyJ;IAChK,IAAI,EAAE,oJAAoJ;IAC1J,IAAI,EAAE,oJAAoJ;IAC1J,MAAM,EAAE,8JAA8J;IACtK,IAAI,EAAE,oJAAoJ;CAC7J,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,WAAW,CAC3C,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,IAAI,IAAI,SAAS,EAAE,CAAC,CAAC,CACnE,CAAC;AAE3B,oFAAoF;AACpF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC;AAEnE,uEAAuE;AACvE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,CAAU,CAAC;AAMpF,MAAM,OAAO,GAAoE;IAC7E,OAAO,EAAE,EAAC,OAAO,EAAE,OAAO,EAAC;IAC3B,SAAS,EAAE,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAC;IAC/C,WAAW,EAAE,EAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAC;CAClD,CAAC;AAEF,oGAAoG;AACpG,MAAM,aAAa,GAA+B;IAC9C,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;CACnB,CAAC;AAEF,uDAAuD;AACvD,MAAM,UAAU,WAAW,CACvB,OAA0D,EAC1D,KAA+B,EAC/B,WAAwB,OAAO;IAE/B,MAAM,KAAK,GAAG,OAAO,IAAI,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAA2B,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/F,MAAM,CAAC,GAAG,KAAK,EAAE,OAAO,IAAK,OAA0C,IAAI,QAAQ,CAAC;IACpF,OAAO,EAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI,KAAK,EAAE,KAAK,IAAI,aAAa,CAAC,CAAC,CAAC,EAAC,CAAC;AAC1E,CAAC"}

package/dist/lib/recipes.d.ts

@@ -25,8 +25,12 @@ export declare const listItem = "after:pointer-events-none after:absolute after:
 export declare const listLabel = "px-2 py-1.5 text-xs font-medium text-muted-foreground";
 /** Separator inside a popup or list. */
 export declare const listSeparator = "-mx-1 my-1 h-px bg-border";
-/** Modal backdrop for dialog, alert dialog, sheet, drawer. */
-export declare const backdrop = "fixed inset-0 isolate z-50 bg-black/40 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0";
+/**
+ * Modal backdrop for dialog, alert dialog, sheet, drawer. A transition on Base UI's starting/ending styles,
+ * not a keyframe: the backdrop stays mounted until the slower panel finishes, and a finished keyframe
+ * (no fill) snapped it back to full dim and blur for that wait, a flash on close.
+ */
+export declare const backdrop = "fixed inset-0 isolate z-50 bg-black/40 transition-opacity duration-150 ease-out motion-reduce:transition-none supports-backdrop-filter:backdrop-blur-xs data-starting-style:opacity-0 data-ending-style:opacity-0";
 /** Title in cards, dialogs, sheets, popovers, empty states, alerts (§5). */
 export declare const heading = "font-heading font-medium tracking-tight";
 /** Empty track / placeholder: progress & meter tracks, skeletons, unlit segments. bg-muted vanishes on cards. */
@@ -35,12 +39,13 @@ export declare const placeholderFill = "bg-foreground/10 hc:bg-border";
 export declare const selectedRow = "bg-accent text-accent-foreground shadow-[inset_2px_0_0_var(--primary-text)]";
 /**
  * Status surface shared by Alert and Callout (§2): one `soft` / `outline` axis, same values in both.
- * Expects a color variant (`--c`, `--c-tint`) on the same element. Neutral swaps the hue border for the
+ * Expects a color variant (`--c`, `--c-tint`) on the same element. Text, icons and links on it use
+ * `--c-text`, which each variant sets to the color that passes 4.5:1 on that surface. Neutral swaps the hue border for the
  * plain border on a card surface (`statusSurfaceNeutral`).
  */
 export declare const statusSurface: {
-    readonly soft: "border-(--c)/30 bg-(--c-tint) hc:border-(--c)";
-    readonly outline: "border-(--c)/50 bg-card hc:border-(--c)";
+    readonly soft: "border-(--c)/30 bg-(--c-tint) hc:border-(--c) [--c-text:var(--c-soft-text)]";
+    readonly outline: "border-(--c)/50 bg-card hc:border-(--c) [--c-text:var(--c)]";
 };
-export declare const statusSurfaceNeutral = "border-border bg-card hc:border-border";
+export declare const statusSurfaceNeutral = "border-border bg-card hc:border-border [--c-text:var(--c)]";
 //# sourceMappingURL=recipes.d.ts.map

package/dist/lib/recipes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"recipes.d.ts","sourceRoot":"","sources":["../../src/lib/recipes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wDAAwD;AACxD,eAAO,MAAM,SAAS,2FAA2F,CAAC;AAElH,2CAA2C;AAC3C,eAAO,MAAM,WAAW,gHACyF,CAAC;AAElH,iGAAiG;AACjG,eAAO,MAAM,YAAY,qNAC6L,CAAC;AAEvN,iFAAiF;AACjF,eAAO,MAAM,YAAY,+GACuF,CAAC;AAEjH,oCAAoC;AACpC,eAAO,MAAM,WAAW,yWACkV,CAAC;AAE3W;;;;GAIG;AACH,eAAO,MAAM,YAAY,8JACsI,CAAC;AAEhK,iFAAiF;AACjF,eAAO,MAAM,QAAQ,6nBAAmf,CAAC;AAEzgB,0CAA0C;AAC1C,eAAO,MAAM,SAAS,0DAA0D,CAAC;AAEjF,wCAAwC;AACxC,eAAO,MAAM,aAAa,8BAA8B,CAAC;AAEzD,8DAA8D;AAC9D,eAAO,MAAM,QAAQ,0LACsK,CAAC;AAE5L,4EAA4E;AAC5E,eAAO,MAAM,OAAO,4CAA4C,CAAC;AAEjE,iHAAiH;AACjH,eAAO,MAAM,eAAe,kCAAkC,CAAC;AAE/D,yGAAyG;AACzG,eAAO,MAAM,WAAW,gFAAgF,CAAC;AAEzG;;;;GAIG;AACH,eAAO,MAAM,aAAa;;;CAKhB,CAAC;AAEX,eAAO,MAAM,oBAAoB,2CAA2C,CAAC"}
+{"version":3,"file":"recipes.d.ts","sourceRoot":"","sources":["../../src/lib/recipes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wDAAwD;AACxD,eAAO,MAAM,SAAS,2FAA2F,CAAC;AAElH,2CAA2C;AAC3C,eAAO,MAAM,WAAW,gHACyF,CAAC;AAElH,iGAAiG;AACjG,eAAO,MAAM,YAAY,qNAC6L,CAAC;AAEvN,iFAAiF;AACjF,eAAO,MAAM,YAAY,+GACuF,CAAC;AAEjH,oCAAoC;AACpC,eAAO,MAAM,WAAW,yWACkV,CAAC;AAE3W;;;;GAIG;AACH,eAAO,MAAM,YAAY,8JACsI,CAAC;AAEhK,iFAAiF;AACjF,eAAO,MAAM,QAAQ,6nBAAmf,CAAC;AAEzgB,0CAA0C;AAC1C,eAAO,MAAM,SAAS,0DAA0D,CAAC;AAEjF,wCAAwC;AACxC,eAAO,MAAM,aAAa,8BAA8B,CAAC;AAEzD;;;;GAIG;AACH,eAAO,MAAM,QAAQ,sNACkM,CAAC;AAExN,4EAA4E;AAC5E,eAAO,MAAM,OAAO,4CAA4C,CAAC;AAEjE,iHAAiH;AACjH,eAAO,MAAM,eAAe,kCAAkC,CAAC;AAE/D,yGAAyG;AACzG,eAAO,MAAM,WAAW,gFAAgF,CAAC;AAEzG;;;;;GAKG;AACH,eAAO,MAAM,aAAa;;;CAMhB,CAAC;AAEX,eAAO,MAAM,oBAAoB,+DAA+D,CAAC"}

package/dist/lib/recipes.js

@@ -25,8 +25,12 @@ export const listItem = `${rowIndicator} data-highlighted:after:opacity-100 rela
 export const listLabel = "px-2 py-1.5 text-xs font-medium text-muted-foreground";
 /** Separator inside a popup or list. */
 export const listSeparator = "-mx-1 my-1 h-px bg-border";
-/** Modal backdrop for dialog, alert dialog, sheet, drawer. */
-export const backdrop = "fixed inset-0 isolate z-50 bg-black/40 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0"; // lint-design-ignore: scrim is not a role
+/**
+ * Modal backdrop for dialog, alert dialog, sheet, drawer. A transition on Base UI's starting/ending styles,
+ * not a keyframe: the backdrop stays mounted until the slower panel finishes, and a finished keyframe
+ * (no fill) snapped it back to full dim and blur for that wait, a flash on close.
+ */
+export const backdrop = "fixed inset-0 isolate z-50 bg-black/40 transition-opacity duration-150 ease-out motion-reduce:transition-none supports-backdrop-filter:backdrop-blur-xs data-starting-style:opacity-0 data-ending-style:opacity-0"; // lint-design-ignore: scrim is not a role
 /** Title in cards, dialogs, sheets, popovers, empty states, alerts (§5). */
 export const heading = "font-heading font-medium tracking-tight";
 /** Empty track / placeholder: progress & meter tracks, skeletons, unlit segments. bg-muted vanishes on cards. */
@@ -35,14 +39,16 @@ export const placeholderFill = "bg-foreground/10 hc:bg-border";
 export const selectedRow = "bg-accent text-accent-foreground shadow-[inset_2px_0_0_var(--primary-text)]";
 /**
  * Status surface shared by Alert and Callout (§2): one `soft` / `outline` axis, same values in both.
- * Expects a color variant (`--c`, `--c-tint`) on the same element. Neutral swaps the hue border for the
+ * Expects a color variant (`--c`, `--c-tint`) on the same element. Text, icons and links on it use
+ * `--c-text`, which each variant sets to the color that passes 4.5:1 on that surface. Neutral swaps the hue border for the
  * plain border on a card surface (`statusSurfaceNeutral`).
  */
 export const statusSurface = {
-    // status tint behind foreground text; the hue lives in the border, icon and accents (TermiColor rule)
-    soft: "border-(--c)/30 bg-(--c-tint) hc:border-(--c)",
+    // status tint behind foreground text; the hue lives in the border, icon and accents (TermiColor rule).
+    // `--c-text` is the hue for text, icons and links on it: on the tint it is the soft text (4.5:1)
+    soft: "border-(--c)/30 bg-(--c-tint) hc:border-(--c) [--c-text:var(--c-soft-text)]",
     // no wash: card surface with a hue border, for dense layouts
-    outline: "border-(--c)/50 bg-card hc:border-(--c)",
+    outline: "border-(--c)/50 bg-card hc:border-(--c) [--c-text:var(--c)]",
 };
-export const statusSurfaceNeutral = "border-border bg-card hc:border-border";
+export const statusSurfaceNeutral = "border-border bg-card hc:border-border [--c-text:var(--c)]";
 //# sourceMappingURL=recipes.js.map

package/dist/lib/recipes.js.map

@@ -1 +1 @@
-{"version":3,"file":"recipes.js","sourceRoot":"","sources":["../../src/lib/recipes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wDAAwD;AACxD,MAAM,CAAC,MAAM,SAAS,GAAG,wFAAwF,CAAC;AAElH,2CAA2C;AAC3C,MAAM,CAAC,MAAM,WAAW,GACpB,6GAA6G,CAAC;AAElH,iGAAiG;AACjG,MAAM,CAAC,MAAM,YAAY,GACrB,kNAAkN,CAAC;AAEvN,iFAAiF;AACjF,MAAM,CAAC,MAAM,YAAY,GACrB,4GAA4G,CAAC;AAEjH,oCAAoC;AACpC,MAAM,CAAC,MAAM,WAAW,GACpB,sWAAsW,CAAC;AAE3W;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GACrB,2JAA2J,CAAC;AAEhK,iFAAiF;AACjF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,YAAY,ieAAie,CAAC;AAEzgB,0CAA0C;AAC1C,MAAM,CAAC,MAAM,SAAS,GAAG,uDAAuD,CAAC;AAEjF,wCAAwC;AACxC,MAAM,CAAC,MAAM,aAAa,GAAG,2BAA2B,CAAC;AAEzD,8DAA8D;AAC9D,MAAM,CAAC,MAAM,QAAQ,GACjB,uLAAuL,CAAC,CAAC,0CAA0C;AAEvO,4EAA4E;AAC5E,MAAM,CAAC,MAAM,OAAO,GAAG,yCAAyC,CAAC;AAEjE,iHAAiH;AACjH,MAAM,CAAC,MAAM,eAAe,GAAG,+BAA+B,CAAC;AAE/D,yGAAyG;AACzG,MAAM,CAAC,MAAM,WAAW,GAAG,6EAA6E,CAAC;AAEzG;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IACzB,sGAAsG;IACtG,IAAI,EAAE,+CAA+C;IACrD,6DAA6D;IAC7D,OAAO,EAAE,yCAAyC;CAC5C,CAAC;AAEX,MAAM,CAAC,MAAM,oBAAoB,GAAG,wCAAwC,CAAC"}
+{"version":3,"file":"recipes.js","sourceRoot":"","sources":["../../src/lib/recipes.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wDAAwD;AACxD,MAAM,CAAC,MAAM,SAAS,GAAG,wFAAwF,CAAC;AAElH,2CAA2C;AAC3C,MAAM,CAAC,MAAM,WAAW,GACpB,6GAA6G,CAAC;AAElH,iGAAiG;AACjG,MAAM,CAAC,MAAM,YAAY,GACrB,kNAAkN,CAAC;AAEvN,iFAAiF;AACjF,MAAM,CAAC,MAAM,YAAY,GACrB,4GAA4G,CAAC;AAEjH,oCAAoC;AACpC,MAAM,CAAC,MAAM,WAAW,GACpB,sWAAsW,CAAC;AAE3W;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GACrB,2JAA2J,CAAC;AAEhK,iFAAiF;AACjF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,YAAY,ieAAie,CAAC;AAEzgB,0CAA0C;AAC1C,MAAM,CAAC,MAAM,SAAS,GAAG,uDAAuD,CAAC;AAEjF,wCAAwC;AACxC,MAAM,CAAC,MAAM,aAAa,GAAG,2BAA2B,CAAC;AAEzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GACjB,mNAAmN,CAAC,CAAC,0CAA0C;AAEnQ,4EAA4E;AAC5E,MAAM,CAAC,MAAM,OAAO,GAAG,yCAAyC,CAAC;AAEjE,iHAAiH;AACjH,MAAM,CAAC,MAAM,eAAe,GAAG,+BAA+B,CAAC;AAE/D,yGAAyG;AACzG,MAAM,CAAC,MAAM,WAAW,GAAG,6EAA6E,CAAC;AAEzG;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IACzB,uGAAuG;IACvG,iGAAiG;IACjG,IAAI,EAAE,6EAA6E;IACnF,6DAA6D;IAC7D,OAAO,EAAE,6DAA6D;CAChE,CAAC;AAEX,MAAM,CAAC,MAAM,oBAAoB,GAAG,4DAA4D,CAAC"}

package/dist/site/suite-header.d.ts

@@ -17,7 +17,10 @@ export interface SuiteHeaderProps {
     nav: SuiteNavItem[];
     /** Accessible name of the nav (default "Main"). */
     navLabel?: string;
-    /** The search (DocsSearch, or the site's own), before the separator. */
+    /**
+     * The search (DocsSearch, or the site's own built on SearchTrigger), before the separator. Below `md`
+     * it moves to the top of the phone menu: a full-width trigger there opens the same dialog.
+     */
     search?: React.ReactNode;
     /** Replaces the default `<ThemeMenu />`. */
     themeMenu?: React.ReactNode;

package/dist/site/suite-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suite-header.d.ts","sourceRoot":"","sources":["../../src/site/suite-header.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,kGAAkG;IAClG,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6FAA6F;IAC7F,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC7B,4EAA4E;IAC5E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,+DAA+D;IAC/D,UAAU,EAAE,MAAM,CAAC;IACnB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,GAAG,EAAE,YAAY,EAAE,CAAC;IACpB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,6CAA6C;IAC7C,UAAU,CAAC,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;KAAC,CAAC;IACpE,2EAA2E;IAC3E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,UAAU,EACV,IAAI,EACJ,GAAG,EACH,QAAiB,EACjB,MAAM,EACN,SAAS,EACT,UAAU,EACV,IAAI,EACJ,WAAW,GACd,EAAE,gBAAgB,qBAgDlB"}
+{"version":3,"file":"suite-header.d.ts","sourceRoot":"","sources":["../../src/site/suite-header.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,kGAAkG;IAClG,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6FAA6F;IAC7F,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC7B,4EAA4E;IAC5E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,+DAA+D;IAC/D,UAAU,EAAE,MAAM,CAAC;IACnB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,GAAG,EAAE,YAAY,EAAE,CAAC;IACpB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,6CAA6C;IAC7C,UAAU,CAAC,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;KAAC,CAAC;IACpE,2EAA2E;IAC3E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,UAAU,EACV,IAAI,EACJ,GAAG,EACH,QAAiB,EACjB,MAAM,EACN,SAAS,EACT,UAAU,EACV,IAAI,EACJ,WAAW,GACd,EAAE,gBAAgB,qBAiElB"}

package/dist/site/suite-header.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "@repraze/kernelkit/components/button";
+import { SearchRelay, SearchTrigger } from "@repraze/kernelkit/components/search-trigger";
 import { Separator } from "@repraze/kernelkit/components/separator";
 import { SiteHeader, SiteHeaderActions, SiteHeaderBrand, SiteHeaderContent, SiteHeaderMenu, SiteNav, SiteNavLink, } from "@repraze/kernelkit/components/site-header";
 import { ThemeMenu } from "@repraze/kernelkit/components/theme-menu";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { GithubIcon } from "./github-icon";
 /**
  * The suite's site header (GUIDELINES §7b): phone menu, brand, mono nav, then search · theme · repository.
@@ -13,7 +14,11 @@ import { GithubIcon } from "./github-icon";
 export function SuiteHeader({ brand, brandLabel, home, nav, navLabel = "Main", search, themeMenu, repository, menu, locationKey, }) {
     const [menuOpen, setMenuOpen] = useState(false);
     useEffect(() => setMenuOpen(false), [locationKey]);
+    const openSearch = useRef(null);
     const navLinks = nav.map((item) => (_jsx(SiteNavLink, { href: item.href, "aria-current": item.current ? "page" : undefined, render: item.render, children: item.label }, item.label)));
-    return (_jsx(SiteHeader, { children: _jsxs(SiteHeaderContent, { children: [_jsxs(SiteHeaderMenu, { title: brand, open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx("nav", { "aria-label": navLabel, className: "flex flex-col gap-1 px-2 pt-2", children: navLinks }), menu] }), _jsx(SiteHeaderBrand, { "aria-label": brandLabel, href: home ? undefined : "/", render: home, children: brand }), _jsx(SiteNav, { "aria-label": navLabel, children: navLinks }), _jsxs(SiteHeaderActions, { children: [search, _jsx(Separator, { orientation: "vertical", className: "mx-1 hidden data-vertical:h-5 data-vertical:self-center sm:block" }), themeMenu ?? _jsx(ThemeMenu, {}), repository ? (_jsx(Button, { variant: "ghost", size: "icon", render: _jsx("a", { href: repository.href, "aria-label": repository.label ?? "GitHub" }), children: repository.icon ?? _jsx(GithubIcon, { className: "size-4" }) })) : null] })] }) }));
+    return (_jsx(SiteHeader, { children: _jsxs(SiteHeaderContent, { children: [_jsxs(SiteHeaderMenu, { title: brand, open: menuOpen, onOpenChange: setMenuOpen, children: [search ? (_jsx("div", { className: "px-2 pt-2", children: _jsx(SearchTrigger, { expanded: true, "aria-label": "Search", onClick: (event) => {
+                                    setMenuOpen(false);
+                                    openSearch.current?.(event);
+                                } }) })) : null, _jsx("nav", { "aria-label": navLabel, className: "flex flex-col gap-1 px-2 pt-2", children: navLinks }), menu] }), _jsx(SiteHeaderBrand, { "aria-label": brandLabel, href: home ? undefined : "/", render: home, children: brand }), _jsx(SiteNav, { "aria-label": navLabel, children: navLinks }), _jsxs(SiteHeaderActions, { children: [search ? (_jsx(SearchRelay, { handler: openSearch, children: _jsx("div", { className: "hidden md:contents", children: search }) })) : null, _jsx(Separator, { orientation: "vertical", className: "mx-1 hidden data-vertical:h-5 data-vertical:self-center md:block" }), themeMenu ?? _jsx(ThemeMenu, {}), repository ? (_jsx(Button, { variant: "ghost", size: "icon", render: _jsx("a", { href: repository.href, "aria-label": repository.label ?? "GitHub" }), children: repository.icon ?? _jsx(GithubIcon, { className: "size-4" }) })) : null] })] }) }));
 }
 //# sourceMappingURL=suite-header.js.map

package/dist/site/suite-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"suite-header.js","sourceRoot":"","sources":["../../src/site/suite-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAC,MAAM,EAAC,MAAM,sCAAsC,CAAC;AAC5D,OAAO,EAAC,SAAS,EAAC,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACH,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,OAAO,EACP,WAAW,GACd,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAC,SAAS,EAAC,MAAM,0CAA0C,CAAC;AAEnE,OAAO,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAiCzC;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,EACxB,KAAK,EACL,UAAU,EACV,IAAI,EACJ,GAAG,EACH,QAAQ,GAAG,MAAM,EACjB,MAAM,EACN,SAAS,EACT,UAAU,EACV,IAAI,EACJ,WAAW,GACI;IACf,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,SAAS,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC/B,KAAC,WAAW,IAER,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,MAAM,EAAE,IAAI,CAAC,MAAM,YAElB,IAAI,CAAC,KAAK,IALN,IAAI,CAAC,KAAK,CAML,CACjB,CAAC,CAAC;IAEH,OAAO,CACH,KAAC,UAAU,cACP,MAAC,iBAAiB,eACd,MAAC,cAAc,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,aACnE,4BAAiB,QAAQ,EAAE,SAAS,EAAC,+BAA+B,YAC/D,QAAQ,GACP,EACL,IAAI,IACQ,EACjB,KAAC,eAAe,kBAAa,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,YAC9E,KAAK,GACQ,EAClB,KAAC,OAAO,kBAAa,QAAQ,YAAG,QAAQ,GAAW,EACnD,MAAC,iBAAiB,eACb,MAAM,EACP,KAAC,SAAS,IACN,WAAW,EAAC,UAAU,EACtB,SAAS,EAAC,kEAAkE,GAC9E,EACD,SAAS,IAAI,KAAC,SAAS,KAAG,EAC1B,UAAU,CAAC,CAAC,CAAC,CACV,KAAC,MAAM,IACH,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,YAAG,IAAI,EAAE,UAAU,CAAC,IAAI,gBAAc,UAAU,CAAC,KAAK,IAAI,QAAQ,GAAI,YAE7E,UAAU,CAAC,IAAI,IAAI,KAAC,UAAU,IAAC,SAAS,EAAC,QAAQ,GAAG,GAChD,CACZ,CAAC,CAAC,CAAC,IAAI,IACQ,IACJ,GACX,CAChB,CAAC;AACN,CAAC"}
+{"version":3,"file":"suite-header.js","sourceRoot":"","sources":["../../src/site/suite-header.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@repraze/kernelkit",
-    "version": "0.1.0-alpha.4",
+    "version": "0.1.0-alpha.6",
     "description": "Modern, techy React components: every shadcn component on Base UI, Tailwind v4 and cva, themed by TermiColor.",
     "keywords": [
         "react",

package/src/components/alert-dialog.tsx

@@ -93,7 +93,10 @@ function AlertDialogMedia({
             data-color={color}
             className={cn(
                 "mb-2 inline-flex size-10 items-center justify-center rounded-lg border border-border bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-5",
-                color && [colorVariants[color], "border-(--c)/40 bg-(--c-tint) text-foreground *:[svg]:text-(--c)"],
+                color && [
+                    colorVariants[color],
+                    "border-(--c)/40 bg-(--c-tint) text-foreground *:[svg]:text-(--c-soft-text)",
+                ],
                 className,
             )}
             {...props}

package/src/components/alert.tsx

@@ -17,8 +17,8 @@ const alertCva = cva(
         variants: {
             color: colorVariants,
             variant: {
-                soft: [statusSurface.soft, "text-foreground *:[svg]:text-(--c)"],
-                outline: [statusSurface.outline, "text-card-foreground *:[svg]:text-(--c)"],
+                soft: [statusSurface.soft, "text-foreground *:[svg]:text-(--c-text)"],
+                outline: [statusSurface.outline, "text-card-foreground *:[svg]:text-(--c-text)"],
             },
         },
         compoundVariants: [
@@ -73,7 +73,7 @@ function AlertTitle({className, ...props}: React.ComponentProps<"div">) {
             data-slot="alert-title"
             className={cn(
                 heading,
-                "group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-(--c)",
+                "group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-(--c-text)",
                 className,
             )}
             {...props}

package/src/components/badge.tsx

@@ -25,7 +25,7 @@ const badgeCva = cva(
             color: colorVariants,
             variant: {
                 solid: "bg-(--c-fill) text-(--c-fill-fg) [a]:hover:bg-(--c-fill)/85",
-                soft: "bg-(--c)/12 text-(--c) dark:bg-(--c)/20 [a]:hover:bg-(--c)/20 dark:[a]:hover:bg-(--c)/30",
+                soft: "bg-(--c)/12 text-(--c-soft-text) dark:bg-(--c)/20 [a]:hover:bg-(--c)/20 dark:[a]:hover:bg-(--c)/30",
                 outline: "border-border text-foreground [a]:hover:bg-hover",
                 ghost: "text-foreground [a]:hover:bg-hover",
                 link: "text-(--c) underline-offset-4 hover:underline",

package/src/components/button.tsx

@@ -27,7 +27,7 @@ const buttonCva = cva(
             color: colorVariants,
             variant: {
                 solid: "bg-(--c-fill) text-(--c-fill-fg) hover:bg-(--c-fill)/85 aria-expanded:bg-(--c-fill)/85",
-                soft: "bg-(--c)/12 text-(--c) hover:bg-(--c)/20 aria-expanded:bg-(--c)/20 dark:bg-(--c)/20 dark:hover:bg-(--c)/30",
+                soft: "bg-(--c)/12 text-(--c-soft-text) hover:bg-(--c)/20 aria-expanded:bg-(--c)/20 dark:bg-(--c)/20 dark:hover:bg-(--c)/30",
                 outline: "border-input bg-transparent hover:bg-hover aria-expanded:bg-hover",
                 ghost: "text-foreground hover:bg-hover aria-expanded:bg-hover",
                 link: "text-(--c) underline-offset-4 hover:underline",

package/src/components/calendar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {Button, buttonVariants} from "@repraze/kernelkit/components/button";
+import {useLocale, weekStart} from "@repraze/kernelkit/components/locale";
 import {cn} from "cn";
 import {ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon} from "lucide-react";
 import * as React from "react";
@@ -13,6 +14,37 @@ import {type DayButton, DayPicker, getDefaultClassNames, type Locale} from "reac
  * - today: primary dot under the number + medium weight
  * - outside days: muted text; disabled: muted text + line-through
  */
+/** DayPicker props minus `locale`, keeping the `mode` union intact (a plain Omit would collapse it). */
+type CalendarBaseProps =
+    React.ComponentProps<typeof DayPicker> extends infer P ? (P extends unknown ? Omit<P, "locale"> : never) : never;
+
+/** DayPicker formatters from Intl: the caption, weekday names, day numbers (native digits) and dropdowns. */
+function intlFormatters(locale: string) {
+    try {
+        const caption = new Intl.DateTimeFormat(locale, {month: "long", year: "numeric"});
+        // "short" is the full name in some languages (Arabic): fall back to "narrow" when it won't fit a cell
+        const short = new Intl.DateTimeFormat(locale, {weekday: "short"});
+        const long = Array.from({length: 7}, (_, i) => short.format(new Date(2000, 0, 2 + i))).some(
+            (d) => d.length > 4,
+        );
+        const weekday = long ? new Intl.DateTimeFormat(locale, {weekday: "narrow"}) : short;
+        const day = new Intl.DateTimeFormat(locale, {day: "numeric"});
+        const month = new Intl.DateTimeFormat(locale, {month: "short"});
+        const year = new Intl.DateTimeFormat(locale, {year: "numeric"});
+        return {
+            formatCaption: (date: Date) => caption.format(date),
+            formatWeekdayName: (date: Date) => weekday.format(date),
+            // the day part only: ja formats "14日", the grid wants "14" (native digits kept: "١٤" in ar-EG)
+            formatDay: (date: Date) =>
+                day.formatToParts(date).find((p) => p.type === "day")?.value ?? String(date.getDate()),
+            formatMonthDropdown: (date: Date) => month.format(date),
+            formatYearDropdown: (date: Date) => year.format(date),
+        };
+    } catch {
+        return {};
+    }
+}
+
 function Calendar({
     className,
     classNames,
@@ -22,11 +54,20 @@ function Calendar({
     locale,
     formatters,
     components,
+    weekStartsOn,
     ...props
-}: React.ComponentProps<typeof DayPicker> & {
+}: CalendarBaseProps & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+    /**
+     * A BCP 47 tag (`"fr-FR"`) or nothing: month and weekday names, digits and the first day of the week
+     * come from `Intl` (prop › LocaleProvider › browser). A date-fns `Locale` object uses date-fns instead.
+     */
+    locale?: Partial<Locale> | string;
 }) {
     const defaultClassNames = getDefaultClassNames();
+    const dateFnsLocale = typeof locale === "object" ? locale : undefined;
+    const tag = useLocale(typeof locale === "string" ? locale : undefined);
+    const intl = React.useMemo(() => (dateFnsLocale ? null : intlFormatters(tag)), [dateFnsLocale, tag]);
 
     return (
         <DayPicker
@@ -38,9 +79,12 @@ function Calendar({
                 className,
             )}
             captionLayout={captionLayout}
-            locale={locale}
+            locale={dateFnsLocale}
+            lang={dateFnsLocale ? undefined : tag}
+            weekStartsOn={weekStartsOn ?? (dateFnsLocale ? undefined : weekStart(tag))}
             formatters={{
-                formatMonthDropdown: (date) => date.toLocaleString(locale?.code, {month: "short"}),
+                formatMonthDropdown: (date) => date.toLocaleString(dateFnsLocale?.code ?? tag, {month: "short"}),
+                ...intl,
                 ...formatters,
             }}
             classNames={{
@@ -128,7 +172,7 @@ function Calendar({
 
                     return <ChevronDownIcon className={cn("size-4", className)} {...props} />;
                 },
-                DayButton: ({...props}) => <CalendarDayButton locale={locale} {...props} />,
+                DayButton: ({...props}) => <CalendarDayButton locale={dateFnsLocale} {...props} />,
                 WeekNumber: ({children, ...props}) => {
                     return (
                         <td {...props}>

package/src/components/callout.tsx

@@ -41,10 +41,10 @@ const calloutVariants = cva(
 );
 
 const calloutHeader =
-    "flex min-h-8 w-full items-center gap-1.5 py-1.5 pr-3 pl-4 text-left text-xs text-(--c) group-data-[color=neutral]/callout:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
+    "flex min-h-8 w-full items-center gap-1.5 py-1.5 pr-3 pl-4 text-left text-xs text-(--c-text) group-data-[color=neutral]/callout:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
 
 const calloutBody =
-    "py-2 pr-3 pl-4 text-sm leading-relaxed [&_a]:text-(--c) [&_a]:underline [&_a]:underline-offset-3 group-data-[color=neutral]/callout:[&_a]:text-foreground [&_p:not(:last-child)]:mb-2 border-(--callout-line)";
+    "py-2 pr-3 pl-4 text-sm leading-relaxed [&_a]:text-(--c-text) [&_a]:underline [&_a]:underline-offset-3 group-data-[color=neutral]/callout:[&_a]:text-foreground [&_p:not(:last-child)]:mb-2 border-(--callout-line)";
 
 interface CalloutProps extends Omit<React.ComponentProps<"div">, "color" | "title"> {
     /** Status or hue of the indicator, header and border. */

package/src/components/combobox.tsx

@@ -229,7 +229,7 @@ function ComboboxChip({
         <ComboboxPrimitive.Chip
             data-slot="combobox-chip"
             className={cn(
-                "flex h-5.5 w-fit items-center justify-center gap-1 rounded-md border border-border bg-secondary px-1.5 text-xs font-medium whitespace-nowrap text-secondary-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0 outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50",
+                "flex h-5.5 w-fit items-center justify-center gap-1 rounded-md border border-border bg-foreground/10 px-1.5 text-xs font-medium whitespace-nowrap text-foreground hc:bg-transparent has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0 outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50",
                 className,
             )}
             {...props}

package/src/components/date-picker.tsx

@@ -2,6 +2,7 @@
 
 import {Button} from "@repraze/kernelkit/components/button";
 import {Calendar} from "@repraze/kernelkit/components/calendar";
+import {useLocale} from "@repraze/kernelkit/components/locale";
 import {Popover, PopoverContent, PopoverTrigger} from "@repraze/kernelkit/components/popover";
 import {cn} from "cn";
 import {format as formatDate} from "date-fns";
@@ -14,8 +15,13 @@ type CalendarProps = React.ComponentProps<typeof Calendar>;
 interface DatePickerBaseProps {
     /** Trigger text when nothing is picked. */
     placeholder?: React.ReactNode;
-    /** date-fns format string for the trigger label. */
-    format?: string;
+    /**
+     * Trigger label: `Intl.DateTimeFormat` options (default `{dateStyle: "long"}`, `"medium"` for ranges), a
+     * function, or a date-fns pattern string.
+     */
+    format?: DateFormat;
+    /** BCP 47 tag for the label and the calendar; defaults to LocaleProvider › browser. */
+    locale?: string;
     size?: "sm" | "default" | "lg";
     disabled?: boolean;
     "aria-invalid"?: boolean;
@@ -27,6 +33,27 @@ interface DatePickerBaseProps {
     align?: "start" | "center" | "end";
 }
 
+type DateFormat = Intl.DateTimeFormatOptions | string | ((date: Date) => string);
+
+/** One date in the trigger. */
+function formatOne(date: Date, format: DateFormat, locale: string) {
+    if (typeof format === "function") {
+        return format(date);
+    }
+    if (typeof format === "string") {
+        return formatDate(date, format);
+    }
+    return new Intl.DateTimeFormat(locale, format).format(date);
+}
+
+/** A range in the trigger: Intl's formatRange shares what both ends have in common ("Nov 14 – 20, 2026"). */
+function formatRange(from: Date, to: Date, format: DateFormat, locale: string) {
+    if (typeof format === "object") {
+        return new Intl.DateTimeFormat(locale, format).formatRange(from, to);
+    }
+    return `${formatOne(from, format, locale)} – ${formatOne(to, format, locale)}`;
+}
+
 function useControllable<T>(value: T | undefined, defaultValue: T | undefined, onChange?: (value: T) => void) {
     const [inner, setInner] = React.useState(defaultValue);
     const controlled = value !== undefined;
@@ -59,7 +86,8 @@ function DatePickerTrigger({
                     variant="outline"
                     size={size}
                     className={cn(
-                        "w-60 justify-start text-left font-normal data-empty:text-muted-foreground data-popup-open:bg-hover [&>svg]:text-muted-foreground",
+                        // a field like Select's trigger, not an outline button: it sits beside inputs and TimeInput
+                        "w-60 justify-start bg-field text-start font-normal hover:bg-field-hover aria-expanded:bg-field-hover data-empty:text-muted-foreground data-popup-open:bg-field-hover [&>svg]:text-muted-foreground",
                         className,
                     )}
                     {...props}
@@ -84,7 +112,8 @@ function DatePicker({
     defaultValue = null,
     onValueChange,
     placeholder = "Pick a date",
-    format = "PPP",
+    format = {dateStyle: "long"},
+    locale: localeProp,
     calendarProps,
     align = "start",
     className,
@@ -92,17 +121,19 @@ function DatePicker({
 }: DatePickerProps) {
     const [open, setOpen] = React.useState(false);
     const [date, setDate] = useControllable<Date | null>(value, defaultValue, onValueChange);
+    const locale = useLocale(localeProp);
 
     return (
         <Popover open={open} onOpenChange={setOpen}>
             <DatePickerTrigger
-                label={date ? formatDate(date, format) : undefined}
+                label={date ? formatOne(date, format, locale) : undefined}
                 placeholder={placeholder}
                 className={className}
                 {...trigger}
             />
             <PopoverContent data-slot="date-picker-content" className="w-auto p-0" align={align}>
                 <Calendar
+                    locale={locale}
                     {...calendarProps}
                     mode="single"
                     selected={date ?? undefined}
@@ -131,7 +162,8 @@ function DateRangePicker({
     defaultValue = null,
     onValueChange,
     placeholder = "Pick a date range",
-    format = "LLL d, y",
+    format = {dateStyle: "medium"},
+    locale: localeProp,
     numberOfMonths = 2,
     calendarProps,
     align = "start",
@@ -139,10 +171,11 @@ function DateRangePicker({
     ...trigger
 }: DateRangePickerProps) {
     const [range, setRange] = useControllable<DateRange | null>(value, defaultValue, onValueChange);
+    const locale = useLocale(localeProp);
     const label = range?.from
         ? range.to
-            ? `${formatDate(range.from, format)} – ${formatDate(range.to, format)}`
-            : formatDate(range.from, format)
+            ? formatRange(range.from, range.to, format, locale)
+            : formatOne(range.from, format, locale)
         : undefined;
 
     return (
@@ -150,6 +183,7 @@ function DateRangePicker({
             <DatePickerTrigger label={label} placeholder={placeholder} className={cn("w-72", className)} {...trigger} />
             <PopoverContent data-slot="date-picker-content" className="w-auto p-0" align={align}>
                 <Calendar
+                    locale={locale}
                     {...calendarProps}
                     mode="range"
                     numberOfMonths={numberOfMonths}
@@ -163,4 +197,4 @@ function DateRangePicker({
 }
 
 export {DatePicker, DatePickerTrigger, DateRangePicker};
-export type {DatePickerProps, DateRangePickerProps};
+export type {DateFormat, DatePickerProps, DateRangePickerProps};