@cahyo-dimas/freeday 2.2.0 → 3.1.0

package/dist/freeday.css

@@ -85,7 +85,7 @@ a { color: var(--color-primary); }
  * > (.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
@@ -158,7 +158,23 @@ a { color: var(--color-primary); }
 /* 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);}
@@ -167,13 +183,21 @@ a { color: var(--color-primary); }
  * 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);}
 }
@@ -182,9 +206,9 @@ a { color: var(--color-primary); }
 /* 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;}
@@ -317,6 +341,49 @@ a { color: var(--color-primary); }
 @media (min-width:960px){.fdy-hide-above-md{display:none !important;}}
 @media (min-width:1280px){.fdy-hide-above-lg{display:none !important;}}
 
+/* 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;}
+}
+
 /* Freeday. Button */
 .fdy-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
   height:var(--control-h);padding:0 var(--space-4);
@@ -420,7 +487,7 @@ a { color: var(--color-primary); }
 /* 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);}
@@ -734,9 +801,22 @@ a { color: var(--color-primary); }
    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;}
@@ -865,7 +945,7 @@ a { color: var(--color-primary); }
 /* 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;}
@@ -942,8 +1022,9 @@ a { color: var(--color-primary); }
 /* 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;}
@@ -1020,6 +1101,15 @@ a { color: var(--color-primary); }
 
 /* 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). */
@@ -1108,7 +1198,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 
 /* 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;}
@@ -1139,7 +1229,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-btn-split__toggle svg{display:block;width:1rem;height:1rem;}
 
 /* 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)));}
@@ -1289,7 +1379,18 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .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);}
@@ -1308,6 +1409,13 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .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. */
@@ -1372,6 +1480,12 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
    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/dist/freeday.js

@@ -62,7 +62,13 @@
 
     function isOverlayOpen() { return app.classList.contains('fdy-app--nav-open'); }
     function isCollapsed() { return app.classList.contains('fdy-app--nav-collapsed'); }
-    function navVisible() { return mqWide.matches ? !isCollapsed() : isOverlayOpen(); }
+    /* Whether the nav FLOATS. Two ways to be true, and only one of them is the viewport: below the
+       breakpoint it is off-canvas by definition, and above it `--nav-overlay` says the app chose to
+       float a nav that could have been a column. Everything downstream — which class means visible,
+       what the toggle does, whether the content goes inert — asks this instead of the media query,
+       so overlay mode reuses the drawer's whole code path rather than growing a second one. */
+    function isOverlayMode() { return !mqWide.matches || app.classList.contains('fdy-app--nav-overlay'); }
+    function navVisible() { return isOverlayMode() ? isOverlayOpen() : !isCollapsed(); }
 
     /* aria-expanded answers "is the nav showing?" in BOTH modes, the two state classes are the
        kit's business, not the reader's. */
@@ -70,7 +76,7 @@
       var visible = navVisible();
       toggle.setAttribute('aria-expanded', String(visible));
       setInert(sidebar, !visible);
-      setInert(content, !mqWide.matches && visible);
+      setInert(content, isOverlayMode() && visible);
       /* Announce only real changes. The first sync() runs at init to describe the state the markup
          arrived in, which is not something a host asked for and must not look like one. */
       if (lastVisible !== null && visible !== lastVisible) {
@@ -108,7 +114,7 @@
     }
 
     toggle.addEventListener('click', function () {
-      if (mqWide.matches) {
+      if (!isOverlayMode()) {
         app.classList.toggle('fdy-app--nav-collapsed');
         sync();
       } else if (isOverlayOpen()) {
@@ -156,7 +162,10 @@
        content inert forever: the panel becomes a static column again, and the page it is covering
        can no longer be clicked or read. */
     mqWide.addEventListener('change', function () {
-      if (mqWide.matches && isOverlayOpen()) close(false);
+      /* Only when the panel stops floating. In overlay MODE it floats at every width, so widening
+         must leave an open panel exactly as it is — closing it there would be the shell overruling
+         a reader who never asked for anything. */
+      if (mqWide.matches && !isOverlayMode() && isOverlayOpen()) close(false);
       else sync();
     });
 
@@ -166,9 +175,14 @@
        own state needs to drive this without reaching for the class names the kit reserves. */
     app._fdyAppShell = {
       isVisible: navVisible,
+      /* Re-read the DOM and reconcile `inert` + `aria-expanded`. Needed when something OUTSIDE the
+         enhancer changes what the state classes mean — switching `--nav-overlay` on or off does
+         exactly that, because it moves the answer to "is the nav visible?" from `--nav-collapsed`
+         to `--nav-open`. Without this a mode switch leaves a visible sidebar marked inert. */
+      refresh: sync,
       setVisible: function (visible) {
         if (visible === navVisible()) return;
-        if (mqWide.matches) {
+        if (!isOverlayMode()) {
           app.classList.toggle('fdy-app--nav-collapsed', !visible);
           sync();
         } else if (visible) {
@@ -205,6 +219,10 @@
     isVisible: function (root) {
       return !!(root && root._fdyAppShell && root._fdyAppShell.isVisible());
     },
+    /* Call after changing `--nav-overlay` from outside; see the note on the handle above. */
+    refresh: function (root) {
+      if (root && root._fdyAppShell) root._fdyAppShell.refresh();
+    },
   };
 })();
 
@@ -415,6 +433,175 @@
   };
 })();
 
+/* Freeday, busy overlay (optional, zero-dependency).
+ *
+ * Freeday.busy({ caption, delay, mark })  block the screen while an operation runs
+ * Freeday.idle()                          release it
+ *
+ * Imperative on purpose, like Freeday.toast(): a component API invites two instances, and two
+ * blocking overlays with two captions is the failure this exists to prevent. A second busy() while
+ * one is up REPLACES the caption rather than stacking.
+ *
+ *   caption  what is happening. Announced politely, so make it a sentence a reader would want read
+ *            out, not a spinner label. Omitted, it falls back to the kit default, which a page
+ *            overrides once with `data-fdy-text-caption` on <html>.
+ *   delay    ms to wait before it appears (default 120; 0 shows immediately). An operation that
+ *            finishes in 80ms should never flash a scrim — that reads as a glitch, not as progress.
+ *   mark     an Element to use instead of the default spinner. Element only, never an HTML string:
+ *            a string here would be an injection point in every app that passed user text through.
+ *
+ * Not a dialog. Interaction is removed with `inert` on everything else, so there is nothing to trap
+ * focus against and nothing to dismiss. Focus is parked on the panel and given back on idle(),
+ * because the element it was on is inert by then and the browser would otherwise drop it to <body>.
+ */
+(function () {
+  'use strict';
+
+  var DEFAULT_DELAY = 120;
+
+  var TEXT = {
+    caption: 'Working…'
+  };
+  /* The overlay has no root of its own to carry an override — it is created, not hydrated — so the
+     lookup goes to <html>, the one element every page has before this runs. Kebab-cased for the
+     same reason as everywhere else: HTML lowercases attribute names, so a camelCase key could only
+     ever be written run-together and the override would fail silently. */
+  function textOf(key) {
+    var root = document.documentElement;
+    var kebab = root.getAttribute('data-fdy-text-' + key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); }));
+    var custom = kebab != null && kebab !== '' ? kebab : root.getAttribute('data-fdy-text-' + key);
+    return custom != null && custom !== '' ? custom : TEXT[key];
+  }
+
+  var node = null;
+  var showTimer = null;
+  var inerted = [];
+  var returnFocusTo = null;
+
+  function build() {
+    var el = document.createElement('div');
+    el.className = 'fdy-busy';
+    el.setAttribute('popover', 'manual');
+    el.setAttribute('aria-busy', 'true');
+    el.tabIndex = -1;
+
+    var panel = document.createElement('div');
+    panel.className = 'fdy-busy__panel';
+
+    var mark = document.createElement('div');
+    mark.className = 'fdy-busy__mark';
+    // aria-hidden: the caption below is the message. A second announcement from the spinner's own
+    // role="status" would say "busy" twice and name nothing.
+    mark.setAttribute('aria-hidden', 'true');
+    mark.appendChild(defaultMark());
+
+    var caption = document.createElement('p');
+    caption.className = 'fdy-busy__caption';
+    // role="status" rather than a dialog role: this reports a state, it does not ask a question.
+    caption.setAttribute('role', 'status');
+
+    panel.appendChild(mark);
+    panel.appendChild(caption);
+    el.appendChild(panel);
+    return el;
+  }
+
+  function defaultMark() {
+    var spinner = document.createElement('span');
+    spinner.className = 'fdy-spinner fdy-spinner--lg';
+    return spinner;
+  }
+
+  /** inert everything else, remembering ONLY what we set so an app's own inert is never cleared. */
+  function block(on) {
+    var i;
+    if (on) {
+      var kids = document.body.children;
+      for (i = 0; i < kids.length; i++) {
+        var child = kids[i];
+        if (child === node || child.hasAttribute('inert')) continue;
+        child.setAttribute('inert', '');
+        inerted.push(child);
+      }
+      return;
+    }
+    for (i = 0; i < inerted.length; i++) inerted[i].removeAttribute('inert');
+    inerted = [];
+  }
+
+  function isOpen() {
+    return node !== null && node.classList.contains('is-open');
+  }
+
+  function setCaption(text) {
+    node.querySelector('.fdy-busy__caption').textContent = text;
+  }
+
+  function setMark(el) {
+    var slot = node.querySelector('.fdy-busy__mark');
+    while (slot.firstChild) slot.removeChild(slot.firstChild);
+    slot.appendChild(el instanceof Element ? el : defaultMark());
+  }
+
+  function show(opts) {
+    showTimer = null;
+    setCaption(opts.caption == null ? textOf('caption') : String(opts.caption));
+    if (opts.mark !== undefined) setMark(opts.mark);
+
+    returnFocusTo = document.activeElement;
+    document.body.appendChild(node);
+    node.classList.add('is-open');
+    // Top layer, so it also covers an open <dialog>. Where the API is missing the z-index in
+    // busy.css is the fallback; it cannot clear a modal, and that is stated in COMPONENTS.md.
+    if (typeof node.showPopover === 'function') {
+      try { node.showPopover(); } catch (e) { /* already open, or not connected yet */ }
+    }
+    block(true);
+    node.focus();
+  }
+
+  function busy(options) {
+    var opts = options || {};
+    if (node === null) node = build();
+
+    // Already up: this is a second owner talking. Update what it says, do not stack.
+    if (isOpen()) {
+      if (opts.caption != null) setCaption(String(opts.caption));
+      if (opts.mark !== undefined) setMark(opts.mark);
+      return node;
+    }
+
+    var delay = opts.delay == null ? DEFAULT_DELAY : Number(opts.delay);
+    if (showTimer !== null) clearTimeout(showTimer);
+    if (delay > 0) showTimer = setTimeout(function () { show(opts); }, delay);
+    else show(opts);
+    return node;
+  }
+
+  function idle() {
+    // Cancels a pending show too: an operation that beat the delay must leave nothing behind.
+    if (showTimer !== null) { clearTimeout(showTimer); showTimer = null; }
+    if (node === null || !isOpen()) return;
+
+    block(false);
+    if (typeof node.hidePopover === 'function') {
+      try { node.hidePopover(); } catch (e) { /* was never in the top layer */ }
+    }
+    node.classList.remove('is-open');
+    if (node.parentNode !== null) node.parentNode.removeChild(node);
+
+    // Give focus back to whatever had it, now that its ancestor is no longer inert.
+    if (returnFocusTo !== null && typeof returnFocusTo.focus === 'function' && returnFocusTo.isConnected) {
+      returnFocusTo.focus();
+    }
+    returnFocusTo = null;
+  }
+
+  window.Freeday = window.Freeday || {};
+  window.Freeday.busy = busy;
+  window.Freeday.idle = idle;
+})();
+
 /* Freeday, carousel enhancer (optional, zero-dependency).
  * Scroll-snap slider with prev/next arrows, generated dot indicators, keyboard (←/→),
  * and optional autoplay (data-fdy-autoplay="4000", pauses on hover/focus). Auto-inits
@@ -3474,7 +3661,9 @@
  *     <div class="fdy-step-panel">…</div>… </div>
  *   <div class="fdy-step-nav"><button data-fdy-step-prev>…</button>
  *     <button data-fdy-step-next>…</button></div></div>
- * Emits bubbling "fdy-step-change" {index} and "fdy-step-finish" (Next on the last step).
+ * Emits bubbling "fdy-step-change" {index} and "fdy-step-finish" (Next on the last step), and a
+ * cancelable "fdy-step-before-change" {from, to, waitFor} that a guard refuses with
+ * preventDefault() or defers by assigning a promise to detail.waitFor.
  */
 (function () {
   'use strict';
@@ -3553,14 +3742,62 @@
       render();
     }
 
+    /* Leaving a step is REFUSABLE, because a wizard whose Next cannot be stopped is a wizard that
+     * validates nothing. Two ways to refuse, and the second is why an event alone was not enough:
+     *
+     *   sync   handler calls ev.preventDefault()      — the answer is already known
+     *   async  handler sets ev.detail.waitFor = promise — the answer is a server round-trip away
+     *
+     * Resolving to `false` refuses; anything else advances, so a handler that forgets to return is
+     * not read as a rejection. HOW validity is decided stays entirely with the app: the kit has no
+     * opinion about form libraries and this is the line that keeps it that way. */
+    var deciding = false;
+
+    function lock(on) {
+      deciding = on;
+      var list = root.querySelector('.fdy-stepper');
+      if (list) { if (on) list.setAttribute('aria-busy', 'true'); else list.removeAttribute('aria-busy'); }
+      if (prevBtn) prevBtn.disabled = on || active === 0;
+      if (nextBtn) nextBtn.disabled = on;
+    }
+
+    function request(to, onAllowed) {
+      if (deciding) return;
+      var ev = new CustomEvent('fdy-step-before-change', {
+        bubbles: true,
+        cancelable: true,
+        detail: { from: active, to: to, waitFor: null },
+      });
+      root.dispatchEvent(ev);
+      if (ev.defaultPrevented) return;
+
+      var pending = ev.detail.waitFor;
+      if (pending === null || typeof pending.then !== 'function') { onAllowed(); return; }
+
+      lock(true);
+      pending.then(
+        function (ok) { lock(false); if (ok !== false) onAllowed(); },
+        // A guard that THREW decided nothing, so it must not advance. Staying put with the nav
+        // released is the only safe reading; the app's own error handling reports the failure.
+        function () { lock(false); },
+      );
+    }
+
     if (prevBtn) prevBtn.addEventListener('click', function () { go(active - 1); });
     if (nextBtn) nextBtn.addEventListener('click', function () {
-      if (active < steps.length - 1) go(active + 1);
-      else root.dispatchEvent(new CustomEvent('fdy-step-finish', { bubbles: true }));
+      if (active < steps.length - 1) request(active + 1, function () { go(active + 1); });
+      else request(active + 1, function () { root.dispatchEvent(new CustomEvent('fdy-step-finish', { bubbles: true })); });
     });
     steps.forEach(function (s, i) {
       var btn = s.querySelector('.fdy-step__btn');
-      if (btn) btn.addEventListener('click', function () { if (i <= maxReached) go(i); });
+      if (!btn) return;
+      btn.addEventListener('click', function () {
+        if (i > maxReached) return;
+        // Going BACK is always allowed — nothing is being committed. Jumping forward to a step
+        // already reached still leaves the current one behind, so it asks the guard like Next does.
+        if (i <= active) go(i);
+        else request(i, function () { go(i); });
+      });
     });
 
     render();
@@ -3668,6 +3905,13 @@
     var countEl = root.querySelector('[data-fdy-table-count]');
     var infoEl = root.querySelector('[data-fdy-table-info]');
     var pagerEl = root.querySelector('[data-fdy-table-pagination]');
+    /* COMPONENTS.md documents the wrapper as <nav class="fdy-pagination" data-fdy-table-pagination>
+       and nothing in the kit ever wrote that class, here or in the three typed footers (#050 §2).
+       It carries no rule (NEXT-UP #9), so nothing rendered differently, but a consumer selector or
+       an e2e assertion on the block passed against hand-written markup and failed against the kit's
+       own output, and the raw and typed paths are supposed to be interchangeable. Set once at init,
+       not per render: the wrapper outlives every pager we build into it. */
+    if (pagerEl) pagerEl.classList.add('fdy-pagination');
     var pageSizeEl = root.querySelector('[data-fdy-table-page-size]');
     var selectAll = root.querySelector('[data-fdy-select-all]');
     var pageSize = parseInt(root.getAttribute('data-page-size'), 10) || 0; // 0 = no pagination