@blakesteve/roster 4.9.0 → 4.10.0

package/dist/roster.es.js

@@ -9395,16 +9395,66 @@ const Eg = st("rst:flex rst:flex-col rst:text-left", {
     })
   ] }) });
 }, Pg = st(
-  "rst:font-ui rst:relative rst:flex rst:flex-col rst:gap-4 rst:overflow-hidden rst:rounded-lg rst:border rst:p-6 rst:shadow-sm rst:transition-all rst:md:flex-row rst:md:items-center rst:md:justify-between",
+  /* `@container` on the card itself, with the flex layout moved to an inner
+       element. The row/column switch is a CONTAINER query, not `md:`: `md:`
+       asks how wide the WINDOW is, so a 228px card on a 1200px page laid itself
+       out as a row, put the action beside the content, and squeezed the text
+       column until it overflowed the `overflow-hidden` here.
+  
+       An element cannot query itself, which is why the layout is one level in
+       rather than on this element. An earlier pass wrapped the card in a
+       container instead — that worked, and made the card a grandchild, so a
+       consumer's `className` with `col-span-2` or `flex-1` landed on something
+       that was no longer the grid or flex item. */
+  "rst:@container rst:font-ui rst:relative rst:overflow-hidden rst:rounded-lg rst:border rst:p-6 rst:shadow-sm rst:transition-all",
   {
     variants: {
+      /* Light-mode fills moved -50 -> -100 and borders -200 -> -600.
+               Reported as "light mode is too white", and measured: the old surface
+               was primary-50 on a gray-50 page at 1.03:1, with a 1.30:1 border. A
+               call to action that cannot be seen as a distinct block is not one.
+      
+               The fill is the smaller half. Nothing in the -50 to -100 range
+               separates from a near-white page by ratio — -100 only reaches 1.12:1 —
+               so it buys colour, and the BORDER is what makes the surface exist.
+      
+               Why -600 rather than the -200/-300 the rest of the library uses on
+               filled surfaces: NOT 1.4.11, which does not reach a tinted banner any
+               more than it reaches `Pill`. This is a prominence decision. A call to
+               action is the one component whose job is to be looked at first, so it
+               is deliberately the most defined bordered block on the page, and being
+               louder than `Card` or `ErrorState` is the intent rather than a
+               drift. -500 was the alternative and was rejected for being uneven
+               across schemes: amber lands at 2.06 there while primary is at 6.10.
+      
+               Measured against the gray-50 page, every figure read from
+               `src/tokens.css` rather than assumed — an earlier pass quoted
+               Tailwind's ramp for `error` and `success` and was wrong by a third:
+      
+                 border -600   primary 8.34  error 7.96  gray 7.30
+                               success 4.80  info 3.92   amber 3.05
+                 text -900 on its own -100 fill
+                               gray 16.03  primary 14.02  error 13.22
+                               success 8.30  info 8.24   amber 8.15
+      
+               `neutral` keeps `bg-white`. Deepening it to gray-100 measured 1.04:1
+               against the page — exactly what white already measured — so it changed
+               the "raised white card" reading for no contrast at all.
+      
+               `info` takes `info-*`, not Tailwind's stock `blue-*` it used before.
+               Roster ships `--roster-info-600`, and the old classes resolved to a
+               palette a consumer cannot retheme through `--roster-*`, which is the
+               one thing every other variant here allows.
+      
+               Dark mode is untouched. The complaint was specific to light, and the
+               dark surfaces already separate from a dark page. */
       variant: {
-        primary: "rst:border-primary-200 rst:bg-primary-50 rst:text-primary-900 rst:dark:border-primary-800 rst:dark:bg-primary-900/30 rst:dark:text-primary-200",
-        neutral: "rst:border-gray-200 rst:bg-white rst:text-gray-900 rst:dark:border-gray-700 rst:dark:bg-gray-800 rst:dark:text-gray-100",
-        warning: "rst:border-amber-200 rst:bg-amber-50 rst:text-amber-900 rst:dark:border-amber-800 rst:dark:bg-amber-900/30 rst:dark:text-amber-200",
-        error: "rst:border-error-200 rst:bg-error-50 rst:text-error-900 rst:dark:border-error-800 rst:dark:bg-error-900/30 rst:dark:text-error-200",
-        success: "rst:border-success-200 rst:bg-success-50 rst:text-success-900 rst:dark:border-success-800 rst:dark:bg-success-900/30 rst:dark:text-success-200",
-        info: "rst:border-blue-200 rst:bg-blue-50 rst:text-blue-900 rst:dark:border-blue-800 rst:dark:bg-blue-900/30 rst:dark:text-blue-200"
+        primary: "rst:border-primary-600 rst:bg-primary-100 rst:text-primary-900 rst:dark:border-primary-800 rst:dark:bg-primary-900/30 rst:dark:text-primary-200",
+        neutral: "rst:border-gray-600 rst:bg-white rst:text-gray-900 rst:dark:border-gray-700 rst:dark:bg-gray-800 rst:dark:text-gray-100",
+        warning: "rst:border-amber-600 rst:bg-amber-100 rst:text-amber-900 rst:dark:border-amber-800 rst:dark:bg-amber-900/30 rst:dark:text-amber-200",
+        error: "rst:border-error-600 rst:bg-error-100 rst:text-error-900 rst:dark:border-error-800 rst:dark:bg-error-900/30 rst:dark:text-error-200",
+        success: "rst:border-success-600 rst:bg-success-100 rst:text-success-900 rst:dark:border-success-800 rst:dark:bg-success-900/30 rst:dark:text-success-200",
+        info: "rst:border-info-600 rst:bg-info-100 rst:text-info-900 rst:dark:border-info-800 rst:dark:bg-info-900/30 rst:dark:text-info-200"
       }
     },
     defaultVariants: {
@@ -9420,15 +9470,15 @@ const Eg = st("rst:flex rst:flex-col rst:text-left", {
   onDismiss: o,
   className: a,
   ...i
-}) => /* @__PURE__ */ f.jsxs("div", { className: C(Pg({ variant: n }), a), ...i, children: [
-  /* @__PURE__ */ f.jsxs("div", { className: "rst:flex rst:items-start rst:gap-4", children: [
-    s && /* @__PURE__ */ f.jsx("div", { className: "rst:mt-1 rst:shrink-0 rst:text-current", children: s }),
-    /* @__PURE__ */ f.jsxs("div", { className: "rst:flex rst:flex-col rst:gap-1.5 rst:w-full", children: [
+}) => /* @__PURE__ */ f.jsx("div", { className: C(Pg({ variant: n }), a), ...i, children: /* @__PURE__ */ f.jsxs("div", { className: "rst:flex rst:flex-col rst:gap-4 rst:@[32rem]:flex-row rst:@[32rem]:items-center rst:@[32rem]:justify-between", children: [
+  /* @__PURE__ */ f.jsxs("div", { className: "rst:flex rst:flex-col rst:items-center rst:gap-4 rst:@[32rem]:flex-row rst:@[32rem]:items-start", children: [
+    s && /* @__PURE__ */ f.jsx("div", { className: "rst:shrink-0 rst:text-current rst:@[32rem]:mt-1", children: s }),
+    /* @__PURE__ */ f.jsxs("div", { className: "rst:flex rst:min-w-0 rst:flex-col rst:gap-1.5 rst:w-full", children: [
       /* @__PURE__ */ f.jsx("h3", { className: "rst:text-lg rst:font-bold rst:leading-tight rst:tracking-tight rst:text-current", children: t }),
       r && /* @__PURE__ */ f.jsx("div", { className: "rst:max-w-prose rst:text-sm rst:leading-relaxed rst:text-current rst:opacity-90 rst:dark:opacity-80", children: r })
     ] })
   ] }),
-  e && /* @__PURE__ */ f.jsx("div", { className: "rst:shrink-0 rst:pt-2 rst:md:pt-0", children: e }),
+  e && /* @__PURE__ */ f.jsx("div", { className: "rst:flex rst:w-full rst:shrink-0 rst:pt-2 rst:[&>*]:w-full rst:@[32rem]:w-auto rst:@[32rem]:pt-0 rst:@[32rem]:[&>*]:w-auto", children: e }),
   o && /* @__PURE__ */ f.jsx("div", { className: "rst:absolute rst:right-2 rst:top-2", children: /* @__PURE__ */ f.jsx(
     oe,
     {
@@ -9440,7 +9490,7 @@ const Eg = st("rst:flex rst:flex-col rst:text-left", {
       children: /* @__PURE__ */ f.jsx(gt, { icon: xe, className: "rst:h-4 rst:w-4" })
     }
   ) })
-] }), Ig = st(
+] }) }), Ig = st(
   "rst:font-ui rst:flex rst:flex-col rst:items-center rst:justify-center rst:text-center rst:p-8 rst:rounded-lg rst:transition-colors",
   {
     variants: {
@@ -9917,7 +9967,11 @@ const th = (t) => {
     }
   }
 ), rh = st(
-  "rst:uppercase rst:tracking-widest rst:mt-1 rst:transition-colors rst:text-gray-500 rst:dark:text-gray-400",
+  /* Tracking steps down in a narrow container. The labels are what set each column's
+     width — "SECONDS" is wider than any digit pair — and dropping 0.1em to
+     0.025em across those 23 characters recovers about 17px, measured. The
+     tracked-out look is kept everywhere it fits. */
+  "rst:uppercase rst:tracking-wide rst:@[22rem]:tracking-widest rst:mt-1 rst:transition-colors rst:text-gray-500 rst:dark:text-gray-400",
   {
     variants: {
       size: {
@@ -9934,7 +9988,16 @@ const th = (t) => {
   }
 ), Br = ({ value: t, label: r, size: e, variant: s }) => /* @__PURE__ */ f.jsxs("div", { className: "rst:flex rst:flex-col rst:items-center", children: [
   /* @__PURE__ */ f.jsx("span", { className: C(eh({ size: e, variant: s })), children: String(t).padStart(2, "0") }),
-  /* @__PURE__ */ f.jsx("span", { className: C(rh({ size: e })), children: r })
+  /* @__PURE__ */ f.jsx(
+    "span",
+    {
+      className: C(
+        rh({ size: e }),
+        "rst:@max-[22rem]:text-[9px]"
+      ),
+      children: r
+    }
+  )
 ] }), sh = S.forwardRef(
   ({
     targetDate: t,
@@ -9957,7 +10020,7 @@ const th = (t) => {
         ...a,
         children: /* @__PURE__ */ f.jsx("h3", { className: C(ca({ size: e }), "rst:mb-0"), children: o })
       }
-    ) : null : /* @__PURE__ */ f.jsxs(
+    ) : null : /* @__PURE__ */ f.jsx(
       "div",
       {
         ref: i,
@@ -9966,9 +10029,9 @@ const th = (t) => {
           n
         ),
         ...a,
-        children: [
+        children: /* @__PURE__ */ f.jsxs("div", { className: "rst:@container rst:w-full", children: [
           r && /* @__PURE__ */ f.jsx("h3", { className: C(ca({ size: e })), children: r }),
-          /* @__PURE__ */ f.jsxs("div", { className: "rst:flex rst:justify-center rst:gap-4 rst:sm:gap-6 rst:md:gap-8", children: [
+          /* @__PURE__ */ f.jsxs("div", { className: "rst:flex rst:justify-center rst:gap-3 rst:@[22rem]:gap-6 rst:@[35rem]:gap-8", children: [
             /* @__PURE__ */ f.jsx(
               Br,
               {
@@ -10006,7 +10069,7 @@ const th = (t) => {
               }
             )
           ] })
-        ]
+        ] })
       }
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blakesteve/roster",
-  "version": "4.9.0",
+  "version": "4.10.0",
   "description": "A production-grade atomic component library: accessible, theme-aware, and documented in Storybook. React 19, TypeScript, Tailwind CSS v4.",
   "keywords": [
     "react",