@cahyo-dimas/freeday 2.2.0 → 3.1.0

package/docs/getting-started.md

@@ -191,7 +191,7 @@ live docs also have a copy button per component.
 ```bash
 npm i @cahyo-dimas/freeday
 ```
-Lands in `package.json` as `"@cahyo-dimas/freeday": "^2.2.0"` (public npm package). `dist/` is
+Lands in `package.json` as `"@cahyo-dimas/freeday": "^3.1.0"` (public npm package). `dist/` is
 committed and published → no build step; `npm ci` runs without auth.
 
 ### 2. Import the CSS + enhancers **once** in your entry (`src/main.ts`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "2.2.0",
+  "version": "3.1.0",
   "description": "Freeday: token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",
@@ -92,11 +92,12 @@
   "scripts": {
     "build": "node tokens/build.mjs",
     "test": "node --test",
-    "test:browser": "node --test --test-concurrency=3 browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/cfl-multi.mjs browser/crowding.mjs browser/over-dialog.mjs browser/chart-scale.mjs browser/overlay-stack.mjs browser/chart-a11y.mjs browser/app-shell.mjs browser/picker-states.mjs",
+    "test:browser": "node --test --test-concurrency=3 browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/field-width.mjs browser/cfl-multi.mjs browser/crowding.mjs browser/over-dialog.mjs browser/chart-scale.mjs browser/overlay-stack.mjs browser/chart-a11y.mjs browser/app-shell.mjs browser/picker-states.mjs browser/harness-contract.mjs",
     "prepack": "node tokens/build.mjs",
     "version": "node tokens/build.mjs && git add dist",
     "typecheck:react": "tsc -p adapters/react/tsconfig.json --noEmit",
-    "test:blazor": "dotnet test test/blazor -v quiet --nologo"
+    "test:blazor": "dotnet test test/blazor -v quiet --nologo",
+    "test:blazor-server": "node --test browser/blazor-server.mjs"
   },
   "devDependencies": {
     "@types/react": "^19.2.17",

package/src/components/app-shell.css

@@ -6,7 +6,7 @@
  * > (.fdy-app__topbar, .fdy-app__main)). The __content wrapper gives the sticky
  * topbar a tall containing block so it can travel, a bare grid cell can't. */
 .fdy-app{display:flex;align-items:stretch;min-height:100vh;background:var(--color-surface-2);}
-.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:15.5rem;box-sizing:border-box;background:var(--color-surface);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
+.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:15.5rem;box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
 .fdy-app__content{flex:1;min-width:0;display:flex;flex-direction:column;}
 /* Brand is a fixed header, same height as the topbar so they align, and only
  * the nav below it scrolls. Bare text (no children) renders as one bold
@@ -79,7 +79,23 @@
 /* Desktop collapse: animate width -> 0 (content clips via overflow:hidden; the content area
  * flexes in to fill). Not display:none, so the collapse/expand slides instead of snapping. */
 @media (min-width:721px){.fdy-app--nav-collapsed .fdy-app__sidebar{width:0;border-right-width:0;}}
-.fdy-app__topbar{position:sticky;top:0;z-index:20;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface);border-bottom:var(--bw) solid var(--color-border);}
+/* Desktop OVERLAY: the nav floats over the content instead of displacing it, the arrangement a
+ * "menu mode" preference offers on a wide screen. The declarations below are the mobile off-canvas
+ * ones repeated, and that repetition is not an oversight: the two conditions are
+ * `(max-width:720px)` and `(min-width:721px) and .fdy-app--nav-overlay`, which no single selector
+ * can express, and the mobile path has to keep working with no JS and no class at all. What the
+ * modifier changes is the LAYOUT; every behaviour (backdrop, Escape, close-on-follow, focus return,
+ * inert, the Tab trap) is the same code path the drawer already used. */
+@media (min-width:721px){
+  .fdy-app--nav-overlay .fdy-app__sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:16rem;z-index:60;transform:translateX(-100%);box-shadow:var(--shadow-4);transition:transform var(--dur-base) var(--ease-standard);}
+  .fdy-app--nav-overlay.fdy-app--nav-open .fdy-app__sidebar{transform:translateX(0);}
+  .fdy-app--nav-overlay .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--color-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base) var(--ease-standard);}
+  .fdy-app--nav-overlay.fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;pointer-events:auto;}
+  /* In overlay mode the sidebar is out of flow, so the collapse-to-zero-width rule above must not
+     also apply — it would fight the transform for the same panel. */
+  .fdy-app--nav-overlay.fdy-app--nav-collapsed .fdy-app__sidebar{width:16rem;border-right-width:var(--bw);}
+}
+.fdy-app__topbar{position:sticky;top:0;z-index:20;min-height:var(--space-16);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-8);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-bottom:var(--bw) solid var(--color-border);}
 .fdy-app__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-app__main{flex:1;padding:var(--space-8);}
 .fdy-skip{position:absolute;left:var(--space-2);top:var(--space-2);background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:100;transform:translateY(-250%);transition:transform var(--dur-fast) var(--ease-standard);}
@@ -88,13 +104,21 @@
  * drop sticky so nothing escapes the box; sidebar stretches to fill it. */
 .fdy-app--static .fdy-app__sidebar{position:static;height:auto;align-self:stretch;}
 .fdy-app--static .fdy-app__topbar{position:static;}
-/* Mobile: the sidebar becomes an off-canvas drawer opened by the topbar toggle. */
+/* `pointer-events` on the backdrop is load-bearing, not a belt-and-braces extra. `visibility` is a
+ * TRANSITIONED property here, so a backdrop on its way out stays `visible` for the whole duration
+ * and keeps swallowing clicks aimed at the topbar underneath it — and switching INTO overlay mode is
+ * worse, because the element goes display:none -> display:block with its visibility animating from
+ * the initial `visible`, so a mode switch alone hands the page ~200ms of dead clicks. Measured: with
+ * only `visibility:hidden`, elementFromPoint over the nav toggle returned the backdrop.
+ * Mobile: the sidebar becomes an off-canvas drawer opened by the topbar toggle. */
 .fdy-app__backdrop{display:none;}
 @media (max-width:720px){
   .fdy-app__sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:16rem;z-index:60;transform:translateX(-100%);transition:transform var(--dur-base) var(--ease-standard);box-shadow:var(--shadow-4);}
   .fdy-app--nav-open .fdy-app__sidebar{transform:translateX(0);}
-  .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:rgba(8,10,20,.45);opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base) var(--ease-standard);}
-  .fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;}
+  /* --color-scrim, not a literal: this was the last raw colour left in a component stylesheet, and
+     it also means the drawer behind the nav dims exactly like every other overlay in the kit. */
+  .fdy-app__backdrop{display:block;position:fixed;inset:0;z-index:55;background:var(--color-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-standard),visibility var(--dur-base) var(--ease-standard);}
+  .fdy-app--nav-open .fdy-app__backdrop{opacity:1;visibility:visible;pointer-events:auto;}
   .fdy-app__main{padding:var(--space-5);}
   .fdy-app__topbar{padding:0 var(--space-4);}
 }

package/src/components/appbar.css

@@ -1,9 +1,9 @@
 /* Freeday. App bar (standalone top bar: brand · actions · spacer).
  * Distinct from .fdy-app__topbar (which is bound to the shell grid). Use anywhere;
  * sticky / elevated / dense / coloured via modifiers. Pure CSS. */
-.fdy-appbar{display:flex;align-items:center;gap:var(--space-3);height:var(--space-16);padding:0 var(--space-4);background:var(--color-surface);color:var(--color-text);border-bottom:var(--bw) solid var(--color-border);}
+.fdy-appbar{display:flex;align-items:center;gap:var(--space-3);height:var(--space-16);padding:0 var(--space-4);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);border-bottom:var(--bw) solid var(--color-border);}
 .fdy-appbar--sticky{position:sticky;top:0;z-index:90;}
-.fdy-appbar--elevated{border-bottom:0;box-shadow:var(--shadow-2);}
+.fdy-appbar--elevated{border-bottom:0;box-shadow:var(--shadow-2),var(--surface-inset);}
 .fdy-appbar--dense{height:var(--space-12);}
 .fdy-appbar--primary{background:var(--color-primary);color:var(--color-on-primary);border-bottom-color:transparent;}
 .fdy-appbar__brand{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:inherit;white-space:nowrap;}

package/src/components/busy.css

@@ -0,0 +1,42 @@
+/* Freeday. Busy overlay */
+/* The blocking "the app is working" state, for an operation the reader must not interrupt or
+ * double-submit. There is deliberately NO markup contract to hand-write: it is created by
+ * `Freeday.busy()` and removed by `Freeday.idle()`, because two of these on screen at once — with
+ * two different captions, from two components that each thought they owned it — is the exact bug
+ * this component exists to prevent. One owner, enforced by there being only one way in.
+ *
+ * It is not a dialog. Nothing here asks a question and nothing can be dismissed; interaction is
+ * removed with `inert` on everything else, not with a focus trap. */
+
+/* `display` is gated on `.is-open` rather than on `:popover-open`, and that is load-bearing. The UA
+ * sheet hides a popover with `[popover]:not(:popover-open){display:none}`, but AUTHOR rules beat UA
+ * rules whatever the specificity, so a bare `.fdy-busy{display:flex}` would paint the overlay
+ * permanently the moment the element existed. Gating on a class instead also means the overlay
+ * still works where the Popover API does not: it falls back to a plain fixed layer at this
+ * z-index, which cannot clear an open <dialog> but does everything else. */
+.fdy-busy{display:none;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:var(--color-scrim);z-index:190;}
+.fdy-busy.is-open{display:flex;align-items:center;justify-content:center;}
+/* The popover's own backdrop would double the dim; this element paints its own. */
+.fdy-busy::backdrop{background:transparent;}
+
+/* The caption sits on a solid surface, not on the scrim. A scrim is semi-transparent over unknown
+ * content, so text on it has no computable contrast ratio and no gate could ever cover it. On
+ * --color-surface it is the same pair the contrast suite already checks.
+ *
+ * THIS IS ALSO WHY THIS PANEL DOES NOT JOIN THE GLASS AXIS, and the omission is a decision rather
+ * than an oversight. Every other raised panel reads --color-surface-raised and frosts under
+ * [data-style="glass"]; this one stays opaque. The glass gate asserts its ink against the panel
+ * composited over the PAGE GROUND (--color-surface-2), which is what sits behind a card or a modal.
+ * Behind this one is the scrim, over arbitrary content — the very case that has no computable
+ * ratio. A frosted busy panel would be the one surface in the kit whose caption nothing could
+ * verify, while it is up precisely because the app is doing something the reader must not
+ * interrupt. Left opaque on purpose; do not "fix" it for consistency. */
+.fdy-busy__panel{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-6) var(--space-8);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-lift);max-width:min(20rem,calc(100vw - var(--space-8)));}
+.fdy-busy__mark{display:flex;align-items:center;justify-content:center;min-height:2.5rem;}
+.fdy-busy__caption{margin:0;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);text-align:center;}
+
+/* Nothing travels under reduced motion. The spinner keeps turning (slowed by spinner.css): a
+ * loading indicator that stops moving reads as "finished", which is the opposite of the message. */
+@media (prefers-reduced-motion:reduce){
+  .fdy-busy{transition:none;}
+}

package/src/components/card.css

@@ -1,7 +1,7 @@
 /* Freeday. Card */
 /* position:relative, containing block for out-of-flow card content (see base.css); it also gives
    consumers the anchor a corner ribbon/badge needs. */
-.fdy-card{position:relative;background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lift);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);}
+.fdy-card{position:relative;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lift),var(--surface-inset);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);}
 .fdy-card--elevated{box-shadow:var(--shadow-lift-hover);}
 .fdy-card--interactive{cursor:pointer;}
 .fdy-card--interactive:hover{box-shadow:var(--shadow-lift-hover);transform:translateY(-3px);}

package/src/components/composition.css

@@ -60,9 +60,22 @@
    grid track, `container-type:inline-size` on a standalone .fdy-stat would stop it sizing to its
    own content. The unconditional rule above stays as the fallback wherever @container is missing. */
 @supports (container-type:inline-size){
-  .fdy-stats>.fdy-stat{container-type:inline-size;}
-  .fdy-stats>.fdy-stat .fdy-stat__value{font-size:clamp(var(--text-xl),11cqw,var(--text-3xl));}
+  .fdy-stats:not(.fdy-stats--inline)>.fdy-stat{container-type:inline-size;}
+  .fdy-stats:not(.fdy-stats--inline)>.fdy-stat .fdy-stat__value{font-size:clamp(var(--text-xl),11cqw,var(--text-3xl));}
 }
+/* The price of that container, and the reason --inline opts out of it (#050). `container-type`
+   applies inline-size CONTAINMENT: the tile's min-content and max-content contributions are both
+   ZERO. So the 11rem floor above is not a taste choice, it is the only thing giving these tracks a
+   size, and re-tracking the grid on content (`auto`, `max-content`, `minmax(0,…)`) resolves every
+   track to 0. `justify-items` is the sharper edge: anything but the default `stretch` sizes the
+   tile to that zero contribution even when the track is correctly wide, and three labels paint on
+   top of each other. Measured from IDU_EMATE_ACCT_WEB's page header, where a hugging strip came out
+   40px wide, all of it gap.
+   --inline is the shape that header wanted: a strip that hugs its numbers and sits beside a page
+   title, instead of a full-width band whose 11rem floor collapses to one column at 390px. It cannot
+   have both, so it drops the container and keeps the flat --text-3xl the base rule already sets;
+   a track sized to its own content is never the narrow track the clamp exists for. */
+.fdy-stats--inline{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);}
 .fdy-stats--boxed{background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);gap:0;}
 .fdy-stats--boxed .fdy-stat{padding:var(--space-5);border-right:var(--bw) solid var(--color-border-muted);}
 .fdy-stats--boxed .fdy-stat:last-child{border-right:0;}

package/src/components/drawer.css

@@ -4,7 +4,7 @@
 /* display is gated behind [open] so the native <dialog> stays hidden until opened.
  * An unconditional display here would beat the UA `dialog:not([open]){display:none}`
  * rule (author origin wins over user-agent) and leave the drawer visible on load. */
-.fdy-drawer{position:fixed;inset:0 auto 0 0;margin:0;padding:0;height:100vh;max-height:none;width:min(20rem,82vw);flex-direction:column;border:0;background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-4);overflow:hidden;transform:translateX(-100%);transition:transform var(--dur-slow) var(--ease-standard),overlay var(--dur-slow) allow-discrete,display var(--dur-slow) allow-discrete;}
+.fdy-drawer{position:fixed;inset:0 auto 0 0;margin:0;padding:0;height:100vh;max-height:none;width:min(20rem,82vw);flex-direction:column;border:0;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-4),var(--surface-inset);overflow:hidden;transform:translateX(-100%);transition:transform var(--dur-slow) var(--ease-standard),overlay var(--dur-slow) allow-discrete,display var(--dur-slow) allow-discrete;}
 .fdy-drawer[open]{display:flex;transform:none;}
 .fdy-drawer--right{inset:0 0 0 auto;transform:translateX(100%);}
 .fdy-drawer::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--dur-slow) var(--ease-standard),overlay var(--dur-slow) allow-discrete,display var(--dur-slow) allow-discrete;}

package/src/components/filterbar.css

@@ -13,8 +13,9 @@
 /* Fields are direct children. Drop the standalone field's 22rem cap; default to the
  * medium column width with no unbounded growth (that's what caused the raggedness). */
 .fdy-filterbar>.fdy-field{max-width:none;flex:0 0 auto;width:12rem;}
-/* Controls fill their field's column (drop the standalone input-group/combo caps). */
-.fdy-filterbar>.fdy-field .fdy-input-group,.fdy-filterbar>.fdy-field .fdy-combo{max-width:none;width:100%;}
+/* Controls fill their field's column: released in input.css for every field, not just this one.
+   The rule used to live here, naming the input group and the combo only, which is why an
+   .fdy-autocomplete or an .fdy-cascade in a --w-2xl field still stopped 48px short of it (#051). */
 /* Column-width rhythm, pick one per field so bars across the app line up. */
 .fdy-filterbar>.fdy-field--w-sm{width:9rem;}
 .fdy-filterbar>.fdy-field--w-lg{width:15rem;}

package/src/components/input.css

@@ -1,5 +1,14 @@
 /* Freeday. Field & Input */
 .fdy-field{display:flex;flex-direction:column;gap:var(--space-2);max-width:22rem;}
+/* Inside a labelled field, a control fills the field (#051). The 22rem cap those controls carry is
+   for one standing on its own, with no field to take a width from; #017 already released the date
+   and time pickers here for exactly this reason, and its comment claims a picker then fills its
+   field "like every other control". That was not true of these four: a `--full` row in a
+   .fdy-form-grid held a 352px combo under a 600px label, and a 26rem toolbar search field hid 64px
+   of dead space INSIDE itself, so an author who wrote `gap:var(--space-3)` measured 76px on screen.
+   The field's own max-width above is what governs, and it still caps a field nobody has widened, so
+   this changes nothing wherever the cap was already doing its job. */
+.fdy-field>.fdy-input-group,.fdy-field>.fdy-combo,.fdy-field>.fdy-autocomplete,.fdy-field>.fdy-cascade{max-width:none;}
 /* A grouped field is legitimately a <fieldset> (it needs a <legend>), e.g. a radio/checkbox group.
    Neutralise the UA groove border / padding / min-inline-size so it lays out identically to the
    <div> form (min-inline-size:min-content would otherwise block the filterbar column widths). */

package/src/components/menu.css

@@ -1,6 +1,6 @@
 /* Freeday. Menu (action popup) + Split button. Enhanced by freeday-menu.js. */
 .fdy-menu-wrap{position:relative;display:inline-flex;}
-.fdy-menu{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:130;min-width:11rem;margin:0;padding:var(--space-1);list-style:none;background:var(--color-surface);color:var(--color-text);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);}
+.fdy-menu{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:130;min-width:11rem;margin:0;padding:var(--space-1);list-style:none;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3),var(--surface-inset);}
 .fdy-menu[hidden]{display:none;}
 .fdy-menu--end{left:auto;right:0;}
 .fdy-menu__item{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);border:0;background:transparent;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);text-align:left;cursor:pointer;white-space:nowrap;}

package/src/components/modal.css

@@ -1,5 +1,5 @@
 /* Freeday. Modal (native <dialog>) */
-.fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-lift-hover);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);transition:opacity var(--dur-base) var(--ease-spring),transform var(--dur-base) var(--ease-spring),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
+.fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-lift-hover),var(--surface-inset);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);transition:opacity var(--dur-base) var(--ease-spring),transform var(--dur-base) var(--ease-spring),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
 .fdy-modal--sm{width:min(24rem,calc(100vw - var(--space-8)));}
 .fdy-modal--md{width:min(32rem,calc(100vw - var(--space-8)));}
 .fdy-modal--lg{width:min(48rem,calc(100vw - var(--space-8)));}

package/src/components/stepper.css

@@ -17,7 +17,18 @@
 .fdy-step.is-active .fdy-step__marker{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-strong);}
 .fdy-step.is-complete .fdy-step__marker{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-on-primary);}
 .fdy-step.is-error .fdy-step__marker{border-color:var(--color-danger);background:var(--color-danger-btn);color:var(--color-on-danger);}
+/* The error badge. Colour alone cannot carry "this step has a problem" — the marker already turns
+   red and that is exactly the signal a colour-blind reader loses — so the badge holds a COUNT and
+   the step names it in text. Positioned against `.fdy-step` rather than `__btn`, because the
+   indicator-only variant has no `__btn` and the badge has to land in the same place in both.
+   It is a SIBLING of the marker, never a child: the enhancer rewrites `__marker.innerHTML` on
+   every render, so a badge inside it would be destroyed the first time the reader moved a step. */
+.fdy-step__badge{position:absolute;top:0;left:50%;z-index:2;transform:translate(.45rem,-.3rem);min-width:1.05rem;height:1.05rem;padding:0 .25rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-danger-btn);color:var(--color-on-danger);font-size:var(--text-xs);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;line-height:1;}
 .fdy-step__label{font-size:var(--text-sm);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
+.fdy-step.is-error .fdy-step__label{color:var(--color-danger-strong);}
+/* While a guard is deciding, the whole control is spoken for: the nav buttons are disabled by the
+   enhancer, and this dims the header so a second click has nothing to aim at. */
+.fdy-stepper[aria-busy="true"]{opacity:.72;}
 .fdy-step.is-active .fdy-step__label{color:var(--color-text);font-weight:var(--weight-semibold);}
 .fdy-step__btn:focus-visible{outline:none;}
 .fdy-step__btn:focus-visible .fdy-step__marker{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 30%,transparent);}

package/src/components/table.css

@@ -9,6 +9,13 @@
 .fdy-table td{padding:var(--space-3) var(--space-4);border-bottom:var(--bw) solid var(--color-border-muted);color:var(--color-text);}
 .fdy-table tbody tr:last-child td{border-bottom:0;}
 .fdy-table tbody tr{transition:background-color var(--dur-fast) var(--ease-standard);}
+/* Zebra rows. Sits BEFORE :hover and [aria-selected] on purpose: all three land on the same
+   specificity (0,2,2), so source order is what decides, and a stripe that won would make hover
+   invisible on every second row. The tint is HALF a surface step rather than --color-surface-2
+   itself, for the same reason: hover paints the full step, so the two must not be the same colour.
+   Exposed as a Tier-3 token through the var() FALLBACK, never as a declaration — a custom property
+   set here would outrank a host's own :root override. */
+.fdy-table--striped tbody tr:nth-child(even){background:var(--fdy-table-stripe,color-mix(in srgb,var(--color-surface-2) 55%,var(--color-surface)));}
 .fdy-table tbody tr:hover{background:var(--color-surface-2);}
 /* Monospace data, ids, codes, IPs, timestamps. Alignment-neutral so it works in any cell
    or inline (`<span class="fdy-mono">`), not just numeric columns. */
@@ -73,6 +80,12 @@
    a hovered row should band unbroken across the freeze line, says so itself. */
 .fdy-table--sticky tbody .fdy-table__freeze{z-index:1;}
 .fdy-table--sticky tbody td.fdy-table__freeze{background:var(--color-surface);}
+/* A frozen cell has to paint an OPAQUE background of its own (it scrolls over its neighbours), so
+   on a striped table it would cut a plain column straight through the zebra. Repaint it with the
+   stripe — and deliberately WITHOUT `.fdy-table--sticky` in the selector, which would push this to
+   (0,4,3) and beat the hover rule below. At (0,3,3) it ties, and the later rule wins, so a hovered
+   row still bands unbroken across the freeze line. */
+.fdy-table--striped tbody tr:nth-child(even) td.fdy-table__freeze{background:var(--fdy-table-stripe,color-mix(in srgb,var(--color-surface-2) 55%,var(--color-surface)));}
 .fdy-table--sticky tbody tr:hover td.fdy-table__freeze{background:var(--color-surface-2);}
 /* A frozen header cell is stuck on both axes wherever the head is frozen too, so
    it has to outrank both. */

package/tokens/tokens.json

@@ -7,6 +7,8 @@
     "800": { "$value": "#1c398c" }, "900": { "$value": "#1c336e" },
     "950": { "$value": "#131e42" }
   },
+  "primary": { "_comment": { "$value": "Alias ramp. The primary semantics read THESE, never a brand ramp directly, so swapping a palette is eight declarations under [data-primary] instead of re-deriving every semantic token twice (once per theme). Only the eight shades the semantics actually consume are aliased." },
+    "50": { "$value": "{azure.50}" }, "100": { "$value": "{azure.100}" }, "300": { "$value": "{azure.300}" }, "400": { "$value": "{azure.400}" }, "500": { "$value": "{azure.500}" }, "600": { "$value": "{azure.600}" }, "700": { "$value": "{azure.700}" }, "800": { "$value": "{azure.800}" } },
   "slate": {
     "0": { "$value": "#ffffff" }, "50": { "$value": "#f7f8fa" },
     "100": { "$value": "#eef0f4" }, "200": { "$value": "#e0e3ea" },
@@ -23,9 +25,47 @@
     "800": { "$value": "#004d88" }, "900": { "$value": "#003a67" }
   },
   "red":   { "100": { "$value": "#fee2e2" }, "300": { "$value": "#fca5a5" }, "400": { "$value": "#f87171" }, "500": { "$value": "#ef4444" }, "600": { "$value": "#dc2626" }, "700": { "$value": "#b91c1c" } },
-  "amber": { "100": { "$value": "#fef3c7" }, "400": { "$value": "#fbbf24" }, "500": { "$value": "#f59e0b" }, "600": { "$value": "#d97706" }, "700": { "$value": "#b45309" }, "800": { "$value": "#92400e" } },
-  "green": { "100": { "$value": "#dcfce7" }, "400": { "$value": "#4ade80" }, "500": { "$value": "#22c55e" }, "600": { "$value": "#16a34a" }, "700": { "$value": "#15803d" }, "800": { "$value": "#166534" } },
-  "blue":  { "100": { "$value": "#dbeafe" }, "300": { "$value": "#93c5fd" }, "400": { "$value": "#60a5fa" }, "500": { "$value": "#3b82f6" }, "600": { "$value": "#2563eb" }, "700": { "$value": "#1d4ed8" } },
+  "amber": { "50": { "$value": "#fffbeb" }, "100": { "$value": "#fef3c7" }, "300": { "$value": "#fcd34d" }, "400": { "$value": "#fbbf24" }, "500": { "$value": "#f59e0b" }, "600": { "$value": "#d97706" }, "700": { "$value": "#b45309" }, "800": { "$value": "#92400e" } },
+  "green": { "50": { "$value": "#f0fdf4" }, "100": { "$value": "#dcfce7" }, "300": { "$value": "#86efac" }, "400": { "$value": "#4ade80" }, "500": { "$value": "#22c55e" }, "600": { "$value": "#16a34a" }, "700": { "$value": "#15803d" }, "800": { "$value": "#166534" } },
+  "blue":  { "50": { "$value": "#eff6ff" }, "100": { "$value": "#dbeafe" }, "300": { "$value": "#93c5fd" }, "400": { "$value": "#60a5fa" }, "500": { "$value": "#3b82f6" }, "600": { "$value": "#2563eb" }, "700": { "$value": "#1d4ed8" }, "800": { "$value": "#1e40af" } },
+
+  "emerald": { "50": { "$value": "#ecfdf5" }, "100": { "$value": "#d1fae5" }, "300": { "$value": "#6ee7b7" }, "400": { "$value": "#34d399" }, "500": { "$value": "#10b981" }, "600": { "$value": "#059669" }, "700": { "$value": "#047857" }, "800": { "$value": "#065f46" } },
+  "lime": { "50": { "$value": "#f7fee7" }, "100": { "$value": "#ecfccb" }, "300": { "$value": "#bef264" }, "400": { "$value": "#a3e635" }, "500": { "$value": "#84cc16" }, "600": { "$value": "#65a30d" }, "700": { "$value": "#4d7c0f" }, "800": { "$value": "#3f6212" } },
+  "orange": { "50": { "$value": "#fff7ed" }, "100": { "$value": "#ffedd5" }, "300": { "$value": "#fdba74" }, "400": { "$value": "#fb923c" }, "500": { "$value": "#f97316" }, "600": { "$value": "#ea580c" }, "700": { "$value": "#c2410c" }, "800": { "$value": "#9a3412" } },
+  "yellow": { "900": { "$value": "#713f12" }, "50": { "$value": "#fefce8" }, "100": { "$value": "#fef9c3" }, "300": { "$value": "#fde047" }, "400": { "$value": "#facc15" }, "500": { "$value": "#eab308" }, "600": { "$value": "#ca8a04" }, "700": { "$value": "#a16207" }, "800": { "$value": "#854d0e" } },
+  "teal": { "50": { "$value": "#f0fdfa" }, "100": { "$value": "#ccfbf1" }, "300": { "$value": "#5eead4" }, "400": { "$value": "#2dd4bf" }, "500": { "$value": "#14b8a6" }, "600": { "$value": "#0d9488" }, "700": { "$value": "#0f766e" }, "800": { "$value": "#115e59" } },
+  "cyan": { "50": { "$value": "#ecfeff" }, "100": { "$value": "#cffafe" }, "300": { "$value": "#67e8f9" }, "400": { "$value": "#22d3ee" }, "500": { "$value": "#06b6d4" }, "600": { "$value": "#0891b2" }, "700": { "$value": "#0e7490" }, "800": { "$value": "#155e75" } },
+  "indigo": { "200": { "$value": "#c7d2fe" }, "50": { "$value": "#eef2ff" }, "100": { "$value": "#e0e7ff" }, "300": { "$value": "#a5b4fc" }, "400": { "$value": "#818cf8" }, "500": { "$value": "#6366f1" }, "600": { "$value": "#4f46e5" }, "700": { "$value": "#4338ca" }, "800": { "$value": "#3730a3" } },
+  "violet": { "200": { "$value": "#ddd6fe" }, "50": { "$value": "#f5f3ff" }, "100": { "$value": "#ede9fe" }, "300": { "$value": "#c4b5fd" }, "400": { "$value": "#a78bfa" }, "500": { "$value": "#8b5cf6" }, "600": { "$value": "#7c3aed" }, "700": { "$value": "#6d28d9" }, "800": { "$value": "#5b21b6" } },
+  "purple": { "50": { "$value": "#faf5ff" }, "100": { "$value": "#f3e8ff" }, "300": { "$value": "#d8b4fe" }, "400": { "$value": "#c084fc" }, "500": { "$value": "#a855f7" }, "600": { "$value": "#9333ea" }, "700": { "$value": "#7e22ce" }, "800": { "$value": "#6b21a8" } },
+  "fuchsia": { "50": { "$value": "#fdf4ff" }, "100": { "$value": "#fae8ff" }, "300": { "$value": "#f0abfc" }, "400": { "$value": "#e879f9" }, "500": { "$value": "#d946ef" }, "600": { "$value": "#c026d3" }, "700": { "$value": "#a21caf" }, "800": { "$value": "#86198f" } },
+  "pink": { "50": { "$value": "#fdf2f8" }, "100": { "$value": "#fce7f3" }, "300": { "$value": "#f9a8d4" }, "400": { "$value": "#f472b6" }, "500": { "$value": "#ec4899" }, "600": { "$value": "#db2777" }, "700": { "$value": "#be185d" }, "800": { "$value": "#9d174d" } },
+  "rose": { "50": { "$value": "#fff1f2" }, "100": { "$value": "#ffe4e6" }, "300": { "$value": "#fda4af" }, "400": { "$value": "#fb7185" }, "500": { "$value": "#f43f5e" }, "600": { "$value": "#e11d48" }, "700": { "$value": "#be123c" }, "800": { "$value": "#9f1239" } },
+
+  "$primaries": {
+    "_comment": "The primary palette axis. Each entry redefines the eight-shade `primary` ALIAS ramp under [data-primary=\"name\"], so the semantic mapping (which shade is the fill, which is hover, which is the soft wash) is written once and never per palette. `on`/`onDark` are the label ink on a primary fill; both are MEASURED, and every pair is asserted by the contrast suite. `darkShift` pulls the dark aliases one step lighter, for a hue whose 500 sits in the luminance band where neither white nor ink reaches 4.5:1.",
+    "azure": { "ramp": "azure", "on": "{slate.0}", "onDark": "{slate.0}" },
+    "sky": { "ramp": "sky", "on": "{slate.0}", "onDark": "{slate.950}" },
+    "blue": { "ramp": "blue", "on": "{slate.0}", "onDark": "{slate.950}" },
+    "indigo": { "ramp": "indigo", "on": "{slate.0}", "onDark": "{slate.950}", "darkShift": true },
+    "violet": { "ramp": "violet", "on": "{slate.0}", "onDark": "{slate.950}", "darkShift": true },
+    "purple": { "ramp": "purple", "on": "{slate.0}", "onDark": "{slate.950}" },
+    "fuchsia": { "ramp": "fuchsia", "on": "{slate.0}", "onDark": "{slate.950}" },
+    "pink": { "ramp": "pink", "on": "{slate.0}", "onDark": "{slate.950}" },
+    "rose": { "ramp": "rose", "on": "{slate.0}", "onDark": "{slate.950}" },
+    "orange": { "ramp": "orange", "on": "{slate.950}", "onDark": "{slate.950}" },
+    "amber": { "ramp": "amber", "on": "{slate.950}", "onDark": "{slate.950}" },
+    "yellow": { "on": "{slate.0}", "onDark": "{slate.950}",
+      "light": { "50": "{yellow.50}", "100": "{yellow.100}", "300": "{yellow.300}", "400": "{yellow.400}", "500": "{yellow.500}", "600": "{yellow.700}", "700": "{yellow.800}", "800": "{yellow.900}" } },
+    "lime": { "ramp": "lime", "on": "{slate.950}", "onDark": "{slate.950}" },
+    "green": { "ramp": "green", "on": "{slate.950}", "onDark": "{slate.950}" },
+    "emerald": { "ramp": "emerald", "on": "{slate.950}", "onDark": "{slate.950}" },
+    "teal": { "ramp": "teal", "on": "{slate.950}", "onDark": "{slate.950}" },
+    "cyan": { "ramp": "cyan", "on": "{slate.950}", "onDark": "{slate.950}" },
+    "noir": { "on": "{slate.0}", "onDark": "{slate.950}",
+      "light": { "50": "{slate.100}", "100": "{slate.200}", "300": "{slate.500}", "400": "{slate.700}", "500": "{slate.800}", "600": "{slate.900}", "700": "{slate.800}", "800": "{slate.950}" },
+      "dark":  { "50": "{slate.800}", "100": "{slate.700}", "300": "{slate.300}", "400": "{slate.200}", "500": "{slate.100}", "600": "{slate.50}", "700": "{slate.200}", "800": "{slate.300}" } }
+  },
 
   "font": {
     "display": { "$value": "'Sora', ui-sans-serif, system-ui, sans-serif" },
@@ -61,12 +101,12 @@
   "bw": { "$value": "1px" },
 
   "color": {
-    "primary":        { "$value": "{azure.600}", "$dark": "{azure.500}" },
-    "primary-hover":  { "$value": "{azure.700}", "$dark": "{azure.400}" },
-    "primary-active": { "$value": "{azure.800}", "$dark": "{azure.300}" },
+    "primary":        { "$value": "{primary.600}", "$dark": "{primary.500}" },
+    "primary-hover":  { "$value": "{primary.700}", "$dark": "{primary.400}" },
+    "primary-active": { "$value": "{primary.800}", "$dark": "{primary.300}" },
     "on-primary":     { "$value": "{slate.0}",    "$dark": "{slate.0}" },
-    "primary-soft":   { "$value": "{azure.50}",  "$dark": "rgba(32,80,216,.20)" },
-    "primary-border": { "$value": "{azure.100}", "$dark": "rgba(92,139,246,.28)" },
+    "primary-soft":   { "$value": "{primary.50}",  "$dark": "color-mix(in srgb, {primary.600} 20%, transparent)" },
+    "primary-border": { "$value": "{primary.100}", "$dark": "color-mix(in srgb, {primary.400} 28%, transparent)" },
 
     "accent":       { "$value": "{sky.600}", "$dark": "{sky.400}" },
     "accent-hover": { "$value": "{sky.700}", "$dark": "{sky.300}" },
@@ -77,6 +117,8 @@
     "surface":   { "$value": "{slate.0}",   "$dark": "{slate.950}" },
     "surface-2": { "$value": "{slate.50}",  "$dark": "{slate.900}" },
     "surface-3": { "$value": "{slate.100}", "$dark": "{slate.800}" },
+    "surface-raised": { "$comment": "How transparent glass may be is decided by the CONTRAST GATE, not by taste: below .79 (light) / .88 (dark) the muted ink and primary-strong stop clearing 4.5:1 once the panel is composited over an arbitrary ground. Measured, and asserted in test/contrast.test.mjs. The frost people actually see comes from --surface-filter's blur, not from the alpha.", "$value": "{color.surface}", "$dark": "{color.surface}", "$glass": "rgba(255,255,255,.82)", "$glassDark": "rgba(23,27,38,.90)" },
+    "scrim":     { "$value": "rgba(10,12,25,.5)", "$comment": "Overlay dim. Deliberately the SAME in both themes: a scrim darkens whatever sits behind it, so it does not flip with the palette. The literal matches the modal/drawer ::backdrop, which states it literally because ::backdrop does not inherit a custom property in every engine." },
 
     "text":        { "$value": "{slate.900}", "$dark": "{slate.100}" },
     "text-muted":  { "$value": "{slate.600}", "$dark": "{slate.400}" },
@@ -98,7 +140,7 @@
     "danger":  { "$value": "{red.600}",   "$dark": "{red.400}" },  "danger-soft":  { "$value": "{red.100}",   "$dark": "rgba(248,113,113,.18)" },
     "info":    { "$value": "{blue.600}",  "$dark": "{blue.400}" }, "info-soft":    { "$value": "{blue.100}",  "$dark": "rgba(96,165,250,.18)" },
 
-    "primary-strong": { "$value": "{azure.700}", "$dark": "{azure.300}" },
+    "primary-strong": { "$value": "{primary.700}", "$dark": "{primary.300}" },
     "success-strong": { "$value": "{green.800}", "$dark": "{green.400}" },
     "warning-strong": { "$value": "{amber.800}", "$dark": "{amber.400}" },
     "danger-strong":  { "$value": "{red.700}",   "$dark": "{red.300}" },
@@ -130,6 +172,8 @@
     "8": { "$value": "{chart.8}" }
   },
 
-  "focus-ring": { "$value": "{azure.600}", "$dark": "{azure.400}" },
+  "surface-filter": { "$value": "none", "$glass": "blur(14px) saturate(150%)" },
+  "surface-inset":  { "$comment": "No-op is a transparent zero-size shadow, NOT `none`: this token is appended to box-shadow lists that already have entries, and `box-shadow: 0 1px 2px rgba(0,0,0,.1), none` is invalid CSS — the whole declaration would be dropped, taking the real shadow with it.", "$value": "inset 0 0 0 0 transparent", "$glass": "inset 0 1px 0 rgba(255,255,255,.55)", "$glassDark": "inset 0 1px 0 rgba(255,255,255,.09)" },
+  "focus-ring": { "$value": "{primary.600}", "$dark": "{primary.400}" },
   "focus-ring-width": { "$value": "2px" }
 }