@blakesteve/roster 4.8.1 → 4.8.2

package/dist/roster.es.js

@@ -4487,7 +4487,13 @@ const Jf = Z(
       },
       checked: {
         true: "",
-        false: "rst:bg-white rst:border-gray-300 rst:dark:bg-gray-900 rst:dark:border-gray-700 rst:text-transparent"
+        /* The unchecked box reads `--roster-control-border` like every other
+           field. It was gray-300 / gray-700 — 1.49:1 on white and 1.70:1 on a
+           gray-900 surface — which is the same hairline the 1.4.11 pass raised
+           on Input, Textarea and Select, on a control 1.4.11 covers at least as
+           squarely. Left alone it would have sat next to an `outline` field
+           with a visibly lighter edge. */
+        false: "rst:bg-white rst:border-[var(--roster-control-border)] rst:dark:bg-gray-900 rst:text-transparent"
       },
       colorScheme: {
         primary: "",
@@ -4692,18 +4698,30 @@ const e0 = Z(
     variants: {
       variant: {
         white: "rst:border-gray-300 rst:bg-white rst:text-gray-900 rst:placeholder:text-gray-400 rst:focus-visible:border-primary-500 rst:dark:border-gray-700 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:placeholder:text-gray-500",
-        soft: "rst:border-transparent rst:bg-gray-100 rst:text-gray-900 rst:placeholder:text-gray-400 rst:focus-visible:bg-white rst:focus-visible:border-primary-500 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:placeholder:text-gray-500 rst:dark:focus-visible:bg-gray-900",
+        /* A boundary that does not depend on what is behind it. `soft` used
+           `border-transparent` and leaned on its fill alone, which fails the
+           moment the fill matches the surface — exactly 1.00:1 inside a
+           `white` Dialog in dark mode, where both are gray-800, so the field
+           vanished until focus. Reported twice in one app before anyone read
+           the variant. The border is the same token `outline` reads, so a
+           consumer repaints both at once. */
+        soft: "rst:border-[var(--roster-control-border)] rst:bg-gray-100 rst:text-gray-900 rst:placeholder:text-gray-400 rst:focus-visible:bg-white rst:focus-visible:border-primary-500 rst:dark:focus-visible:border-primary-400 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:placeholder:text-gray-500 rst:dark:focus-visible:bg-gray-900",
         slate: "rst:border-transparent rst:bg-gray-700 rst:text-gray-100 rst:placeholder:text-gray-400 rst:focus-visible:bg-gray-600 rst:dark:bg-gray-900 rst:dark:placeholder:text-gray-500 rst:dark:focus-visible:bg-gray-800",
         /* The default variant, and the only one that reads tokens.
-           `Button`'s colors resolve through `--roster-*`, so remapping a palette
-           carries; these were hardcoded, so a consumer wanting a field border in
-           their own accent had no variant for it and no token to point at.
-           The four tokens default to exactly the values this variant used
-           before, so nothing moves for a consumer who sets none of them at
-           `:root`. The other four
-           variants stay opinionated on purpose: `white`, `soft`, `slate` and
-           `ghost` each name a specific surface, and a token that meant something
-           different in each would not be a token. */
+                   `Button`'s colors resolve through `--roster-*`, so remapping a palette
+                   carries; these were hardcoded, so a consumer wanting a field border in
+                   their own accent had no variant for it and no token to point at.
+                   Three of the four still default to what this variant used before.
+                   `--roster-control-border` does not: the 1.4.11 pass raised it two
+                   ramp steps, because gray-300 was a 1.49:1 hairline rather than a
+                   boundary — so field borders DO get heavier on a bump, deliberately.
+        
+                   `soft` reads that one token too. It is the only thing it borrows: a
+                   filled field cannot supply its own boundary on a surface it does not
+                   know, and `soft` leaning on fill alone made it invisible at 1.00:1
+                   inside a `white` Dialog in dark mode. `white`, `slate` and `ghost`
+                   stay fully opinionated — each names a specific surface, and a token
+                   that meant something different in each would not be a token. */
         outline: "rst:border-[var(--roster-control-border)] rst:bg-[var(--roster-control-bg)] rst:text-[var(--roster-control-text)] rst:placeholder:text-gray-400 rst:focus-visible:border-[var(--roster-control-border-focus)] rst:dark:placeholder:text-gray-500",
         ghost: "rst:border-transparent rst:bg-transparent rst:text-gray-900 rst:placeholder:text-gray-400 rst:hover:bg-gray-100 rst:focus-visible:bg-gray-100 rst:dark:text-gray-100 rst:dark:placeholder:text-gray-500 rst:dark:hover:bg-gray-800 rst:dark:focus-visible:bg-gray-800"
       },
@@ -4789,7 +4807,7 @@ const e0 = Z(
           {
             className: P(
               "rst:block rst:text-sm rst:font-medium rst:leading-none rst:text-left rst:mb-1.5 rst:transition-colors",
-              "rst:text-gray-900 rst:dark:text-gray-100",
+              "rst:text-[var(--roster-control-text)]",
               "rst:peer-disabled:cursor-not-allowed rst:peer-disabled:opacity-70"
             ),
             children: r
@@ -5295,7 +5313,9 @@ const y0 = Z(
     variants: {
       variant: {
         white: "rst:bg-white rst:text-gray-900 rst:ring-gray-300 rst:hover:bg-gray-50 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:ring-gray-700 rst:dark:hover:bg-gray-700",
-        soft: "rst:bg-gray-100 rst:text-gray-900 rst:ring-transparent rst:hover:bg-gray-200 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:hover:bg-gray-700",
+        /* Same reasoning as Input's and Textarea's `soft`; the trigger draws a
+           ring rather than a border, so the token lands there. */
+        soft: "rst:bg-gray-100 rst:text-gray-900 rst:ring-[var(--roster-control-border)] rst:hover:bg-gray-200 rst:dark:bg-gray-800 rst:dark:text-gray-100 rst:dark:hover:bg-gray-700",
         slate: "rst:bg-gray-700 rst:text-gray-100 rst:ring-transparent rst:hover:bg-gray-600 rst:dark:bg-gray-900 rst:dark:text-gray-100 rst:dark:hover:bg-gray-800",
         /* The default variant, and the only one that reads tokens, exactly as
                    in Input. It takes three of the four: focus on the trigger is the
@@ -5402,7 +5422,7 @@ const y0 = Z(
       className: P("rst:flex rst:flex-col rst:gap-1.5", l),
       ...g,
       children: [
-        d && /* @__PURE__ */ f.jsx(Fe, { className: "rst:block rst:text-sm rst:font-medium rst:text-inherit rst:text-left", children: d }),
+        d && /* @__PURE__ */ f.jsx(Fe, { className: "rst:block rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)] rst:text-left", children: d }),
         /* @__PURE__ */ f.jsx(
           Wd,
           {
@@ -5634,8 +5654,36 @@ const y0 = Z(
   {
     variants: {
       variant: {
-        outline: "rst:border-gray-300 rst:bg-white rst:text-gray-900 rst:focus-visible:border-primary-500 rst:dark:border-gray-700 rst:dark:bg-gray-950 rst:dark:text-gray-100 rst:dark:focus-visible:border-primary-400",
-        soft: "rst:border-transparent rst:bg-gray-100 rst:text-gray-900 rst:focus-visible:bg-white rst:focus-visible:border-primary-500 rst:dark:bg-gray-800/50 rst:dark:text-gray-100 rst:dark:focus-visible:bg-gray-900 rst:dark:focus-visible:border-primary-400",
+        /* Reads `--roster-control-*`, the same four `Input` and `Select` read.
+                   4.8.0 migrated those two and not this one, so an `Input` above a
+                   `Textarea` in the same form disagreed twice: light, the Input took
+                   the consumer's border token while this stayed gray-300; dark, the
+                   Input was transparent and followed its surface while this was
+                   gray-950, a near-black box on a gray-800 dialog. Both were reported
+                   by eye before anyone read the variants.
+        
+                   No `dark:placeholder:text-gray-500` here even though Input's
+                   `outline` carries one: Input has no placeholder rule in its base, so
+                   its variant supplies both scopes. This base already sets gray-400,
+                   and copying Input's line across darkened it to gray-500 — 3.30:1 on
+                   the page, under the 4.5:1 placeholder text needs.
+        
+                   The border and text defaults are the values this variant already
+                   used. The fill does change,
+                   from `bg-white` / `dark:bg-gray-950` to the token's `transparent` —
+                   which is invisible on the default page surfaces those two named, and
+                   is the entire point everywhere else: a field drawn inside a Dialog
+                   now takes the Dialog's surface instead of punching a white or
+                   near-black hole in it. */
+        outline: "rst:border-[var(--roster-control-border)] rst:bg-[var(--roster-control-bg)] rst:text-[var(--roster-control-text)] rst:focus-visible:border-[var(--roster-control-border-focus)]",
+        /* A boundary that does not depend on what is behind it. `soft` used
+           `border-transparent` and leaned on its fill alone, which fails the
+           moment the fill matches the surface — exactly 1.00:1 inside a
+           `white` Dialog in dark mode, where both are gray-800, so the field
+           vanished until focus. Reported twice in one app before anyone read
+           the variant. The border is the same token `outline` reads, so a
+           consumer repaints both at once. */
+        soft: "rst:border-[var(--roster-control-border)] rst:bg-gray-100 rst:text-gray-900 rst:focus-visible:bg-white rst:focus-visible:border-primary-500 rst:dark:bg-gray-800/50 rst:dark:text-gray-100 rst:dark:focus-visible:bg-gray-900 rst:dark:focus-visible:border-primary-400",
         ghost: "rst:border-transparent rst:bg-transparent rst:text-gray-900 rst:hover:bg-gray-100 rst:focus-visible:bg-gray-100 rst:dark:text-gray-100 rst:dark:hover:bg-gray-800 rst:dark:focus-visible:bg-gray-800",
         white: "rst:border-gray-200 rst:bg-white rst:text-gray-900 rst:focus-visible:border-primary-500 rst:dark:border-gray-800 rst:dark:bg-gray-900 rst:dark:text-gray-100 rst:dark:focus-visible:border-primary-400"
       },
@@ -5680,7 +5728,9 @@ const y0 = Z(
           only because it spaces with `gap`, and the hidden element is
           `display: none` so it is not a flex item. */
       /* @__PURE__ */ f.jsxs(Qr, { className: P("rst:w-full", t), children: [
-        e && /* @__PURE__ */ f.jsx(Fe, { className: "rst:block rst:text-sm rst:font-medium rst:leading-none rst:text-gray-900 rst:dark:text-gray-100 rst:peer-disabled:cursor-not-allowed rst:peer-disabled:opacity-70 rst:text-left rst:mb-1.5", children: e }),
+        e && /* `--roster-control-text`, matching Input's label — see the comment
+        there for why not `text-inherit`. */
+        /* @__PURE__ */ f.jsx(Fe, { className: "rst:block rst:text-sm rst:font-medium rst:leading-none rst:text-[var(--roster-control-text)] rst:peer-disabled:cursor-not-allowed rst:peer-disabled:opacity-70 rst:text-left rst:mb-1.5", children: e }),
         /* @__PURE__ */ f.jsx(
           Kf,
           {
@@ -8042,8 +8092,35 @@ const wm = Z(
            surface and stay opinionated — a token that meant something
            different inside each name would not be a token. */
         white: "rst:bg-[var(--roster-popover-bg)] rst:border-[var(--roster-popover-border)] rst:text-[var(--roster-popover-text)]",
-        slate: "rst:bg-gray-700 rst:border-gray-600 rst:text-gray-100 rst:dark:bg-gray-900 rst:dark:border-gray-800",
-        primary: "rst:bg-primary-700 rst:border-primary-600 rst:text-white rst:dark:bg-primary-950 rst:dark:border-primary-900",
+        /* These two carry their own ring, because they are the two that invert.
+                   `--roster-ring` and `--roster-ring-offset` are declared once at
+                   `:root` and once under `.dark`, so they follow the PAGE — and on a
+                   light page that hands a dark panel the light-mode ring, primary-500
+                   on gray-700: 1.61:1, which is not a focus indicator. A consumer found
+                   it by saying the focus "was just not noticeable".
+        
+                   So the variant states what it knows: it is dark regardless of the
+                   page. primary-400 gives 3.80 on the light-mode slate and 6.47 on the
+                   dark one, 4.04 and 6.75 on `primary`. The offset is set to each
+                   surface's own color so the gap between border and ring reads as a
+                   gap rather than as a stray white or black line — the offset was the
+                   most visible part of the indicator before, at 10.27:1 against slate
+                   while the ring itself sat at 1.61.
+        
+                   The `--roster-control-*` trio rides along for the same reason, and
+                   fixing only the ring would have been worse than fixing neither: an
+                   `outline` field on these panels draws `--roster-control-text`, which
+                   is `:root`'s gray-900 on a light page — 1.70:1 on slate, 1.60:1 on
+                   primary. That has been true of `Input` since 4.8.0 and was about to
+                   become true of `Textarea`, which previously drew its own white box
+                   and so escaped it. A correct focus ring around illegible text is not
+                   an improvement. Inverted values give 9.42 / 16.03 for the text and
+                   4.07 / 6.93 for the border.
+        
+                   `white` and `glass` are not here on purpose: both follow the page's
+                   scheme, so the page-level tokens are already right for them. */
+        slate: "rst:bg-gray-700 rst:border-gray-600 rst:text-gray-100 rst:dark:bg-gray-900 rst:dark:border-gray-800 rst:[--roster-ring:var(--roster-primary-400,#5ea3de)] rst:[--roster-ring-offset:var(--roster-gray-700,#44403c)] rst:dark:[--roster-ring-offset:var(--roster-gray-900,#1c1917)] rst:[--roster-control-text:var(--roster-gray-100,#f5f5f4)] rst:[--roster-control-border:var(--roster-gray-400,#a8a29e)] rst:[--roster-control-border-focus:var(--roster-primary-400,#5ea3de)]",
+        primary: "rst:bg-primary-700 rst:border-primary-600 rst:text-white rst:dark:bg-primary-950 rst:dark:border-primary-900 rst:[--roster-ring:var(--roster-primary-400,#5ea3de)] rst:[--roster-ring-offset:var(--roster-primary-700,#084063)] rst:dark:[--roster-ring-offset:var(--roster-primary-950,#021724)] rst:[--roster-control-text:var(--roster-gray-100,#f5f5f4)] rst:[--roster-control-border:var(--roster-gray-400,#a8a29e)] rst:[--roster-control-border-focus:var(--roster-primary-400,#5ea3de)]",
         glass: "rst:bg-white/80 rst:border-white/20 rst:backdrop-blur-xl rst:text-gray-900 rst:dark:bg-slate-900/80 rst:dark:border-slate-700/50 rst:dark:text-white rst:shadow-2xl rst:dark:shadow-black/50"
       },
       status: {

package/package.json

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