@apliteni/apliteni-ui 0.12.0 → 0.23.1

package/src/styles/callout.css

@@ -13,18 +13,18 @@
   color: var(--dim);
 }
 .ui-callout__icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--muted); }
-.ui-callout__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; }
+.ui-callout__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.1; } /* 2.1 of a 24 box drawn at 18px = 1.58 CSS px, which is what buys the 3:1 graphic bar rather than the 4.5:1 text one. docs/specification.md#icons-and-glyphs */
 .ui-callout b { color: var(--text); font-weight: var(--weight-semibold); }
 .ui-callout code { font-family: var(--font-mono); font-size: 0.92em; color: var(--text); }
 
 .ui-callout--info { background: var(--glow-cyan); }
-.ui-callout--info .ui-callout__icon { color: var(--cyan); }
+.ui-callout--info .ui-callout__icon { color: var(--chip-info-ink); } /* the chip inks, not the raw signals: in light the raw signal cleared the graphic bar by a tenth on its own wash and read as a smudge, and a stroke is read the way text is. The two are the same value in dark by construction, so only light moves. #206 */
 .ui-callout--success { background: var(--glow-green); }
-.ui-callout--success .ui-callout__icon { color: var(--green); }
+.ui-callout--success .ui-callout__icon { color: var(--chip-success-ink); }
 .ui-callout--warn { background: color-mix(in srgb, var(--amber) 13%, transparent); }
-.ui-callout--warn .ui-callout__icon { color: var(--amber); }
+.ui-callout--warn .ui-callout__icon { color: var(--chip-warn-ink); }
 .ui-callout--danger { background: var(--glow-pink); }
-.ui-callout--danger .ui-callout__icon { color: var(--pink); }
+.ui-callout--danger .ui-callout__icon { color: var(--chip-danger-ink); }
 
 /* ----------------------------------------------------------------------------
  * Toast — a floating, dismissible notification.
@@ -42,9 +42,9 @@
   color: var(--text);
   font-size: var(--text-base);
   width: 100%;
-  max-width: 400px;
+  max-width: var(--panel-md);
   overflow: hidden; /* clips the timer bar + left marker to the rounded corners */
-  animation: ui-toast-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
+  animation: ui-toast-in var(--dur-med) var(--ease-out) both;
 }
 
 /* status → the paint tokens every style below consumes.
@@ -57,15 +57,15 @@
    fill is: the accent is a graphic colour, sized for a 3px rule and a 22px
    circle, and in the light theme it is not a colour text can be set in. The
    trailing action is the one part of a toast that is BOTH the status colour and
-   a piece of text, so it takes the chip inks, which are the text-grade version
-   of the same five statuses. In the dark theme the two are the same value by
-   construction — --chip-success-ink IS --green there — so this splits the light
-   theme apart and leaves the dark one exactly as it was. */
+   a piece of text, so it takes the chip inks — the text-grade version of the
+   same five statuses, and the same value as the accent in dark by construction.
+   neutral's --toast-on is --signal-solid-ink because the neutral circle IS
+   --signal-solid-neutral: one fill, so one ink, chosen once. #206 */
 .ui-toast--success { --toast-accent: var(--green); --toast-action-ink: var(--chip-success-ink); --toast-glow: var(--glow-green); --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-success); }
 .ui-toast--danger  { --toast-accent: var(--pink);  --toast-action-ink: var(--chip-danger-ink);  --toast-glow: var(--glow-pink);  --toast-on: var(--danger-contrast); --toast-solid: var(--signal-solid-danger); }
 .ui-toast--warn    { --toast-accent: var(--amber); --toast-action-ink: var(--chip-warn-ink);    --toast-glow: color-mix(in srgb, var(--amber) 14%, transparent); --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-warn); }
 .ui-toast--info    { --toast-accent: var(--cyan);  --toast-action-ink: var(--chip-info-ink);    --toast-glow: var(--glow-cyan);  --toast-on: var(--signal-contrast); --toast-solid: var(--signal-solid-info); }
-.ui-toast--neutral { --toast-accent: var(--muted); --toast-action-ink: var(--muted);            --toast-glow: var(--surface-2); --toast-on: var(--strong); --toast-solid: var(--signal-solid-neutral); }
+.ui-toast--neutral { --toast-accent: var(--muted); --toast-action-ink: var(--muted);            --toast-glow: var(--surface-2); --toast-on: var(--signal-solid-ink); --toast-solid: var(--signal-solid-neutral); }
 
 /* left status marker (soft + outline; solid is already a full fill) */
 .ui-toast--soft::before,
@@ -75,7 +75,7 @@
 }
 
 .ui-toast__icon { width: 22px; height: 22px; flex: none; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--toast-accent); color: var(--toast-on); }
-.ui-toast__icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
+.ui-toast__icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.8; } /* 2.8 of a 24 box drawn at 13px = 1.52 CSS px. The circle has no room for a bigger glyph, so the weight comes out of the stroke. docs/specification.md#icons-and-glyphs */
 .ui-toast__body { flex: 1; min-width: 0; }
 .ui-toast__title { font-weight: var(--weight-medium); color: var(--strong); }
 .ui-toast__text { color: var(--dim); }
@@ -91,13 +91,32 @@
 .ui-toast__action { flex: none; align-self: center; background: none; border: 0; padding: 4px 9px; border-radius: var(--radius-xs); font: inherit; font-weight: var(--weight-medium); color: var(--toast-action-ink); cursor: pointer; }
 .ui-toast__action:hover { background: color-mix(in srgb, var(--bg) 55%, transparent); }
 
-.ui-toast__close { flex: none; align-self: flex-start; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; }
-.ui-toast__close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
+.ui-toast__close { flex: none; align-self: flex-start; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; position: relative; }
+.ui-toast__close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; }
+/* The target, not the ink. WCAG 2.5.8 measures what a pointer can land on, and
+   the drawn button is 19x19 — a 15px glyph in 2px of padding. Growing the box
+   to 24 would push the glyph 2.5px off the corner it is aligned to, so the
+   TARGET grows instead and the glyph does not move at all.
+   Centred, so the overhang is 2.5px on every side. It has 12px of flex gap to
+   .ui-toast__action beside it and 12px between stacked toasts, so it reaches no
+   neighbouring target; .ui-toast's overflow: hidden clips at 15px of padding,
+   well outside it. Measured, not asserted:
+   stories/guidelines/accessibility-floor.test.js reads this rule out of the
+   sheet and reports the target it makes. #219 */
+.ui-toast__close::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 24px;
+  height: 24px;
+  transform: translate(-50%, -50%);
+}
 .ui-toast__close:hover { color: var(--text); }
 
 /* auto-dismiss progress bar — .is-running is added by wireToastStack() */
 .ui-toast__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--toast-accent); opacity: 0.85; transform-origin: left; }
-.ui-toast__timer.is-running { animation: ui-toast-timer var(--toast-dur, 5s) linear forwards; }
+.ui-toast__timer.is-running { animation: ui-toast-timer var(--toast-dur, 5s) linear forwards; /* motion: ambient — the bar spends the toast's dismiss timer, which the caller sets */ }
 
 /* style: soft — tinted surface */
 .ui-toast--soft { background: var(--toast-glow); box-shadow: var(--shadow-sm); }
@@ -142,7 +161,7 @@
 @keyframes ui-toast-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
 @keyframes ui-toast-out { to { opacity: 0; transform: translateX(24px); } }
 @keyframes ui-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
-.ui-toast.is-leaving { animation: ui-toast-out 0.2s ease forwards; }
+.ui-toast.is-leaving { animation: ui-toast-out var(--dur-fast) var(--ease-sharp) forwards; }
 
 @media (prefers-reduced-motion: reduce) {
   .ui-toast, .ui-toast.is-leaving { animation: none; }
@@ -150,7 +169,7 @@
 }
 
 /* stack container for queued toasts */
-.ui-toast-stack { display: flex; flex-direction: column; gap: 12px; width: 400px; max-width: 100%; }
+.ui-toast-stack { display: flex; flex-direction: column; gap: 12px; width: var(--panel-md); max-width: 100%; }
 
 /* Success panel — centered confirmation, used after form submit */
 .ui-success {

package/src/styles/card.css

@@ -89,4 +89,4 @@
   color: var(--accent);
   flex: none;
 }
-.ui-card__icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; }
+.ui-card__icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; }

package/src/styles/code.css

@@ -42,10 +42,16 @@
   align-items: center;
   gap: 6px;
   padding: 2px 4px;
+  /* WCAG 2.5.8's 24 CSS px target floor, taken as a real box rather than as an
+     overlay: 2 + a 12px label at line-height 1.62 + 2 came to 23.44, so the
+     drawn button grows by 0.56px and the bar it sits in grows with it. Nothing
+     smaller than a rounding error moves, which is why this one is not a hit
+     area. Measured in stories/guidelines/accessibility-floor.test.js. #219 */
+  min-height: 24px;
   transition: color var(--dur-fast) var(--ease);
 }
 .ui-snippet__copy:hover { color: var(--accent); }
-.ui-snippet__copy svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }
+.ui-snippet__copy svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.8; }
 
 /* Shell token highlighting (matches viz/account.mjs classes) */
 .ui-snippet pre .k { color: var(--purple-mid); font-weight: var(--weight-medium); }

package/src/styles/confirm.css

@@ -19,7 +19,7 @@
   --confirm-surface: var(--surface-2);
   --confirm-shadow: var(--shadow-lg);
   --confirm-scrim: var(--scrim);
-  --confirm-w: 420px;
+  --confirm-w: var(--panel-md);
 
   position: fixed;
   inset: 0;

package/src/styles/drawer.css

@@ -14,7 +14,7 @@
   --drawer-surface: var(--surface-2);
   --drawer-shadow: var(--shadow-lg);
   --drawer-scrim: var(--scrim);
-  --drawer-w: 420px;   /* left|right panels: width  */
+  --drawer-w: var(--panel-md);   /* left|right panels: width  */
   --drawer-h: 45vh;    /* top|bottom panels: height */
 
   position: fixed;
@@ -102,9 +102,9 @@
 
 /* -- Sizes ----------------------------------------------------------------- */
 /* left|right → width; top|bottom → height. Same names, axis chosen by side. */
-.ui-drawer--right.ui-drawer--sm, .ui-drawer--left.ui-drawer--sm { --drawer-w: 320px; }
-.ui-drawer--right.ui-drawer--md, .ui-drawer--left.ui-drawer--md { --drawer-w: 420px; }
-.ui-drawer--right.ui-drawer--lg, .ui-drawer--left.ui-drawer--lg { --drawer-w: 560px; }
+.ui-drawer--right.ui-drawer--sm, .ui-drawer--left.ui-drawer--sm { --drawer-w: var(--panel-sm); }
+.ui-drawer--right.ui-drawer--md, .ui-drawer--left.ui-drawer--md { --drawer-w: var(--panel-md); }
+.ui-drawer--right.ui-drawer--lg, .ui-drawer--left.ui-drawer--lg { --drawer-w: var(--panel-lg); }
 .ui-drawer--top.ui-drawer--sm, .ui-drawer--bottom.ui-drawer--sm { --drawer-h: 30vh; }
 .ui-drawer--top.ui-drawer--md, .ui-drawer--bottom.ui-drawer--md { --drawer-h: 45vh; }
 .ui-drawer--top.ui-drawer--lg, .ui-drawer--bottom.ui-drawer--lg { --drawer-h: 72vh; }
@@ -138,11 +138,14 @@
   background: transparent;
   border: 1px solid transparent;
   border-radius: var(--radius-sm);
-  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+  transition:
+    color var(--dur-fast) var(--ease),
+    background var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease);
 }
 .ui-drawer__close:hover { color: var(--strong); background: var(--surface); }
 .ui-drawer__close:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
-.ui-drawer__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
+.ui-drawer__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.1; }
 
 .ui-drawer__body {
   flex: 1 1 auto;

package/src/styles/dropdown.css

@@ -21,7 +21,7 @@
   border: 1px solid var(--border);
   border-radius: var(--radius-pill);
   padding: 7px 11px 7px 13px;
-  transition: border-color 0.2s ease, background 0.2s ease;
+  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
 .ui-dropdown__trigger:hover { border-color: var(--accent); }
 .ui-dropdown__trigger:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
@@ -34,7 +34,7 @@
   border-right: 1.6px solid var(--muted);
   border-bottom: 1.6px solid var(--muted);
   transform: rotate(45deg) translateY(-1px);
-  transition: transform 0.2s ease;
+  transition: transform var(--dur-fast) var(--ease);
   flex: none;
 }
 .ui-dropdown.open .ui-dropdown__chevron { transform: rotate(-135deg) translateY(2px); }
@@ -53,7 +53,12 @@
   opacity: 0;
   visibility: hidden;
   transform: translateY(-6px);
-  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
+  transition:
+    opacity var(--dur-med) var(--ease),
+    transform var(--dur-med) var(--ease),
+    /* `linear`, not var(--ease): visibility is discrete, so easing it buys nothing and a
+       curve leaving [0, 1] flips it mid-fade. Same rule the drawer states at length. */
+    visibility var(--dur-med) linear;
   z-index: var(--z-dropdown);
 }
 .ui-dropdown__panel.is-end { left: auto; right: 0; }
@@ -70,7 +75,7 @@
   cursor: pointer;
   text-decoration: none;
   color: var(--text);
-  transition: background 0.15s ease;
+  transition: background var(--dur-fast) var(--ease);
 }
 .ui-dropdown__item:hover { background: var(--surface); }
 .ui-dropdown__item:focus-visible { outline: none; background: var(--surface); box-shadow: var(--ring); }
@@ -78,11 +83,11 @@
 .ui-dropdown__label { font-family: var(--font-sans); font-size: 12.5px; color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
 .ui-dropdown__desc { font-size: 11px; color: var(--muted); line-height: 1.35; }
 .ui-dropdown__ic { display: inline-flex; flex: none; color: var(--muted); }
-.ui-dropdown__ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
+.ui-dropdown__ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.1; }
 
 /* Trailing selected tick (listbox variant) */
 .ui-dropdown__tick { margin-left: auto; flex: none; display: none; color: var(--accent); }
-.ui-dropdown__tick svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; }
+.ui-dropdown__tick svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; }
 .ui-dropdown__item.is-selected .ui-dropdown__tick { display: inline-flex; }
 .ui-dropdown__item.is-selected .ui-dropdown__label { color: var(--accent); }
 
@@ -106,7 +111,9 @@
 .ui-dropdown__badge.is-accent { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
 
 /* Disabled + danger rows */
-.ui-dropdown__item.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
+.ui-dropdown__item.is-disabled { color: var(--disabled-ink); cursor: not-allowed; pointer-events: none; }
+.ui-dropdown__item.is-disabled .ui-dropdown__label,
+.ui-dropdown__item.is-disabled .ui-dropdown__desc { color: inherit; }
 .ui-dropdown__item.is-danger .ui-dropdown__label { color: var(--muted); }
 .ui-dropdown__item.is-danger:hover .ui-dropdown__label { color: var(--pink); }
 

package/src/styles/empty.css

@@ -56,7 +56,7 @@
 }
 .ui-empty__sub {
   font-size: var(--text-sm);
-  max-width: 340px;
+  max-width: var(--prose-caption);
   margin: 0;
   line-height: 1.55;
 }

package/src/styles/feedback.css

@@ -27,7 +27,10 @@
   box-shadow: 0 10px 26px var(--ui-fb-pill-glow),
               0 2px 6px color-mix(in srgb, var(--shadow-ink) 28%, transparent),
               inset 0 1px 0 color-mix(in srgb, var(--sheen) 28%, transparent);
-  transition: transform .2s var(--easing-spring, cubic-bezier(.34,1.56,.64,1)), opacity .16s ease, box-shadow .2s ease;
+  transition:
+    transform var(--dur-fast) var(--ease-spring),
+    opacity var(--dur-fast) var(--ease),
+    box-shadow var(--dur-fast) var(--ease);
 }
 .ui-fbpill.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -100%) translateY(-9px) scale(1); }
 .ui-fbpill:hover {
@@ -37,19 +40,19 @@
 }
 .ui-fbpill.show:hover { transform: translate(-50%, -100%) translateY(-12px) scale(1.04); }
 .ui-fbpill:active { transform: translate(-50%, -100%) translateY(-8px) scale(.98); }
-.ui-fbpill svg { width: 16px; height: 16px; color: currentColor; filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--shadow-ink) 25%, transparent)); }
+.ui-fbpill svg { width: 16px; height: 16px; stroke-width: 2.4; color: currentColor; filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--shadow-ink) 25%, transparent)); }
 .ui-fbpill::before {
   content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
   background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--sheen) 55%, transparent), transparent); transform: skewX(-18deg);
 }
-.ui-fbpill.show::before { animation: uiFbSheen 1.15s ease .12s 1; }
-.ui-fbpill:hover::before { animation: uiFbSheen .7s ease 1; }
+.ui-fbpill.show::before { animation: uiFbSheen 1.15s ease .12s 1; } /* motion: ambient — a decorative sheen crossing the pill; its length is the width it travels, not a response */
+.ui-fbpill:hover::before { animation: uiFbSheen .7s ease 1; } /* motion: ambient — the same sweep, quicker on hover so it finishes inside the gesture */
 @keyframes uiFbSheen { 0% { left: -60%; } 100% { left: 130%; } }
 
 /* Scrim behind the open composer */
 .ui-fbscrim {
   position: fixed; inset: 0; z-index: 70; background: var(--scrim);
-  opacity: 0; pointer-events: none; transition: opacity .2s ease;
+  opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease);
 }
 .ui-fbscrim.show { opacity: 1; pointer-events: auto; }
 
@@ -58,47 +61,53 @@
   position: fixed; z-index: 71; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px);
   width: min(520px, calc(100vw - 32px)); background: var(--bg-elevated); border-radius: 18px;
   box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
-  transition: opacity .2s ease, transform .2s ease; overflow: hidden;
+  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); overflow: hidden;
 }
 .ui-fbcomposer.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
 
 .ui-fbc__head { display: flex; align-items: center; gap: 12px; padding: 17px 20px 0; }
 .ui-fbc__chip { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: .01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-.ui-fbc__chip svg { width: 14px; height: 14px; flex: none; opacity: .85; }
+.ui-fbc__chip svg { width: 14px; height: 14px; flex: none; opacity: .85; stroke-width: 2.7; }
 .ui-fbc__x { margin-left: auto; background: var(--surface-2); color: var(--dim); border: 0; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; flex: none; }
 .ui-fbc__x:hover { color: var(--strong); }
-.ui-fbc__x svg { width: 14px; height: 14px; }
+.ui-fbc__x svg { width: 14px; height: 14px; stroke-width: 2.7; }
 .ui-fbc__quote { margin: 14px 20px 0; background: var(--surface-2); border-radius: 12px; padding: 12px 15px; display: flex; gap: 11px; }
 .ui-fbc__qm { color: var(--accent); font-size: 22px; font-weight: var(--weight-bold); line-height: .9; flex: none; opacity: .55; }
 .ui-fbc__quote q { quotes: none; color: var(--dim); font-style: italic; font-size: 13.5px; line-height: 1.55; }
 .ui-fbc__body { padding: 14px 20px 0; }
 .ui-fbcomposer textarea {
   width: 100%; min-height: 96px; resize: vertical; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55;
-  color: var(--strong); background: var(--surface-2); border: 0; border-radius: 12px; padding: 13px 15px; transition: box-shadow .18s ease;
+  color: var(--strong); background: var(--surface-2); border: 0; border-radius: 12px; padding: 13px 15px; transition: box-shadow var(--dur-fast) var(--ease);
 }
 .ui-fbcomposer textarea::placeholder { color: var(--muted); }
 .ui-fbcomposer textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
 .ui-fbc__foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px 20px 18px; }
 
-.ui-fbbtn { font-family: var(--font-sans); font-size: 13.5px; font-weight: var(--weight-semibold); border-radius: 10px; padding: 9px 17px; cursor: pointer; border: 0; transition: filter .15s, background .15s, color .15s; }
+.ui-fbbtn { font-family: var(--font-sans); font-size: 13.5px; font-weight: var(--weight-semibold); border-radius: 10px; padding: 9px 17px; cursor: pointer; border: 0; transition: filter var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
 .ui-fbbtn.ghost { background: transparent; color: var(--dim); }
 .ui-fbbtn.ghost:hover { color: var(--strong); background: var(--surface-2); }
 .ui-fbbtn.primary { background: var(--accent-strong); color: var(--accent-contrast); display: inline-flex; align-items: center; gap: 9px; }
 .ui-fbbtn.primary:hover { filter: brightness(1.08); }
-.ui-fbbtn.primary:disabled { opacity: .6; cursor: default; filter: none; }
+/* Same flat pair as .ui-btn:disabled, for the same reason (#220). */
+.ui-fbbtn.primary:disabled {
+  background: var(--disabled-surface);
+  color: var(--disabled-ink);
+  cursor: default;
+  filter: none;
+}
 .ui-fbc__send { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
-.ui-fbspin { flex: none; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 40%, transparent); border-top-color: currentColor; animation: uiFbSpin .7s linear infinite; }
+.ui-fbspin { flex: none; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 40%, transparent); border-top-color: currentColor; animation: uiFbSpin .7s linear infinite; } /* motion: ambient — a spinner turns until the request answers */
 @keyframes uiFbSpin { to { transform: rotate(360deg); } }
 
 /* Success state */
 .ui-fbc__done { padding: 30px 26px 24px; text-align: center; background: radial-gradient(112% 60% at 50% 0%, var(--glow-green), transparent 62%); }
 .ui-fbc__ck { width: 88px; height: 88px; margin: 0 auto 13px; display: grid; place-items: center; }
-.ui-fbck { width: 88px; height: 88px; overflow: visible; display: block; transform-origin: center; animation: uiFbCkSpring 1s cubic-bezier(.22,1,.3,1) both; }
+.ui-fbck { width: 88px; height: 88px; overflow: visible; display: block; transform-origin: center; animation: uiFbCkSpring 1s cubic-bezier(.22,1,.3,1) both; } /* motion: choreographed — the frame the mark and the comet are timed against */
 .ui-fbck-t { fill: none; stroke: var(--surface-2); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
-.ui-fbck-m { fill: none; stroke: var(--green); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 118; stroke-dashoffset: 118; animation: uiFbCkDraw .6s cubic-bezier(.5,0,.3,1) .1s forwards; }
-.ui-fbck-s { fill: none; stroke: var(--sheen); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15 400; stroke-dashoffset: 133; filter: drop-shadow(0 0 8px var(--green)) drop-shadow(0 0 15px var(--green)); opacity: 0; animation: uiFbCkComet .6s cubic-bezier(.5,0,.3,1) .1s forwards; }
+.ui-fbck-m { fill: none; stroke: var(--green); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 118; stroke-dashoffset: 118; animation: uiFbCkDraw .6s cubic-bezier(.5,0,.3,1) .1s forwards; /* motion: choreographed — the mark draws while the spring is still settling */ }
+.ui-fbck-s { fill: none; stroke: var(--sheen); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15 400; stroke-dashoffset: 133; filter: drop-shadow(0 0 8px var(--green)) drop-shadow(0 0 15px var(--green)); opacity: 0; animation: uiFbCkComet .6s cubic-bezier(.5,0,.3,1) .1s forwards; /* motion: choreographed — the comet rides the mark, so it shares its duration and delay exactly */ }
 .ui-fbc__done h4 { color: var(--strong); font-size: 19px; font-weight: var(--weight-semibold); letter-spacing: -.01em; margin-bottom: 7px; }
-.ui-fbc__done p { color: var(--dim); font-size: 13.5px; line-height: 1.55; max-width: 38ch; margin: 0 auto; }
+.ui-fbc__done p { color: var(--dim); font-size: 13.5px; line-height: 1.55; max-width: var(--prose-caption); margin: 0 auto; }
 .ui-fbc__done p b { color: var(--text); font-weight: var(--weight-semibold); }
 .ui-fbc__done .row { margin-top: 18px; display: flex; gap: 10px; justify-content: center; }
 @keyframes uiFbCkDraw { to { stroke-dashoffset: 0; } }

package/src/styles/footer.css

@@ -21,7 +21,7 @@
 }
 .ui-footer__in {
   width: 100%;
-  max-width: 1180px;
+  max-width: var(--container);
   margin: 0 auto;
   padding: 40px clamp(14px, 2.4vw, 26px) 30px;
 }
@@ -34,6 +34,10 @@
   flex-wrap: wrap;
   padding-bottom: 30px;
 }
+/* Under --panel-sm, and deliberately: this is a flex TRACK in a wrapping
+   row, not a panel and not a paragraph — its width is what decides when the
+   footer breaks into columns, so it answers to the row rather than to a
+   scale. The one width below the floor the measure gate draws. See #208. */
 .ui-footer__brand { max-width: 300px; }
 .ui-footer .ui-footer__brand .brand { font-size: 15px; }
 .ui-footer__tagline {
@@ -52,7 +56,10 @@
   border: 1px solid var(--footer-border);
   color: var(--footer-link);
   background: var(--surface);
-  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
+  transition:
+    color var(--dur-fast) var(--ease),
+    border-color var(--dur-fast) var(--ease),
+    transform var(--dur-fast) var(--ease);
 }
 .ui-footer__social:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
 .ui-footer__social svg { width: 17px; height: 17px; display: block; }
@@ -76,7 +83,7 @@
   font-size: 13.5px;
   color: var(--footer-link);
   text-decoration: none;
-  transition: color 0.15s ease;
+  transition: color var(--dur-fast) var(--ease);
 }
 .ui-footer__links a:hover { color: var(--footer-link-hover); }
 
@@ -94,7 +101,7 @@
 }
 .ui-footer__legal { color: var(--footer-link); }
 .ui-footer__legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
-.ui-footer__legal-links a { color: var(--footer-link); text-decoration: none; transition: color 0.15s ease; }
+.ui-footer__legal-links a { color: var(--footer-link); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
 .ui-footer__legal-links a:hover { color: var(--footer-link-hover); }
 .ui-footer__switcher { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
 
@@ -110,13 +117,15 @@
 .ui-footer--app .ui-footer__in { max-width: none; padding: 12px clamp(14px, 2.4vw, 22px); }
 .ui-footer--app .ui-footer__bar { padding-top: 0; border-top: 0; font-size: 12.5px; }
 
-/* Responsive — columns collapse to a stacked layout on narrow screens. */
+/* Responsive — columns collapse to a stacked layout on narrow screens. Two of
+   the kit's three steps, and the second one is the phone step rather than a
+   fourth value of the footer's own: docs/specification.md#breakpoints. */
 @media (max-width: 720px) {
   .ui-footer__top { flex-direction: column; gap: 30px; }
   .ui-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; }
   .ui-footer__brand { max-width: none; }
 }
-@media (max-width: 460px) {
+@media (max-width: 560px) {
   .ui-footer__nav { grid-template-columns: 1fr; }
   .ui-footer__bar { flex-direction: column; align-items: flex-start; }
   .ui-footer__switcher { margin-left: 0; }

package/src/styles/input.css

@@ -15,6 +15,7 @@
 .ui-field__req { color: var(--pink); margin-left: 4px; }
 .ui-field__hint { color: var(--muted); font-size: var(--text-sm); margin-top: 7px; line-height: 1.5; }
 .ui-field__error { color: var(--pink); font-size: var(--text-sm); margin-top: 7px; display: flex; align-items: center; gap: 6px; }
+.ui-field__error svg { width: 16px; height: 16px; flex: none; stroke-width: 2.4; }
 
 .ui-input,
 .ui-textarea,
@@ -46,8 +47,15 @@
 .ui-input::placeholder,
 .ui-textarea::placeholder { color: var(--muted); opacity: 0.9; }
 
+/* The value a reader typed is still the value; it goes quiet, it does not fade
+   into the field under it the way an opacity would take both down together. #220 */
 .ui-input:disabled,
-.ui-textarea:disabled { opacity: 0.5; cursor: not-allowed; }
+.ui-textarea:disabled {
+  background: var(--disabled-surface);
+  border-color: var(--disabled-border);
+  color: var(--disabled-ink);
+  cursor: not-allowed;
+}
 
 .ui-input.is-invalid,
 .ui-textarea.is-invalid { border-color: var(--pink); }
@@ -64,7 +72,7 @@
   color: var(--muted);
   pointer-events: none;
 }
-.ui-input-group__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; }
+.ui-input-group__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.2; }
 
 .ui-select {
   appearance: none;
@@ -98,6 +106,24 @@
   transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
   position: relative;
 }
+/* The target, not the ink. The box above is drawn at 19x19 because that is what
+   sits beside a 15px label without shouting; WCAG 2.5.8 wants 24 CSS px of
+   pointer target, which is a different question. This overlay answers it and
+   the checkbox keeps its size. ::after is the tick and the dot, so the target
+   is ::before — it paints first, under both, and is transparent anyway.
+   Centred, so the overhang is 2.5px on every side: 11px of gap to the label
+   inside the same <label> (which toggles the same input, so an overlap there
+   would cost nothing) and 14px between stacked rows in the specimen. Measured
+   in stories/guidelines/accessibility-floor.test.js. #219 */
+.ui-check input::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 24px;
+  height: 24px;
+  transform: translate(-50%, -50%);
+}
 .ui-check input[type="radio"] { border-radius: 50%; }
 .ui-check input:hover { border-color: var(--accent); }
 .ui-check input:checked { background: var(--accent); border-color: var(--accent); }

package/src/styles/layout.css

@@ -114,12 +114,14 @@
    The width is what keeps the auto margins honest: an auto inline margin takes
    a grid item out of stretch, and Chrome then lays it out at its max-content
    width, which is how the payout ledger pushed the page 529px sideways at 375.
-   The 860px is the floor for hand-written markup — shell.js validates what it
-   writes into --ui-app-main and falls back to this same number. */
+   --measure is the ONE source for this width now. shell.js used to carry its
+   own copy of the number and a test held the two in step; it now omits the
+   property rather than writing a default, so an absent or unparseable maxWidth
+   lands here, on the token, instead of on a second literal. See issue #198. */
 .ui-app__main {
   min-width: 0;
   width: 100%;
-  max-width: var(--ui-app-main, 860px);
+  max-width: var(--ui-app-main, var(--measure));
   margin-inline: auto;
   padding: 40px clamp(24px, 4vw, 56px) 72px;
 }
@@ -134,7 +136,7 @@
   letter-spacing: var(--tracking-tight);
   margin-bottom: 8px;
 }
-.ui-app__sub { color: var(--dim); font-size: 15px; line-height: 1.6; max-width: 60ch; margin-bottom: 32px; }
+.ui-app__sub { color: var(--dim); font-size: 15px; line-height: 1.6; max-width: var(--prose-body); margin-bottom: 32px; }
 .ui-app__body { display: flex; flex-direction: column; gap: var(--space-5); }
 /* A flex child's min-width is its content by default, so one wide block — a
    ledger, a code sample — pushes the whole page sideways instead of scrolling
@@ -219,7 +221,7 @@
   position: relative;
   z-index: 1;
   width: 100%;
-  max-width: 420px;
+  max-width: var(--panel-md);
   background: var(--surface);
   border-radius: 22px;
   padding: 38px 36px 32px;
@@ -245,7 +247,7 @@
   background: var(--glow-purple);
   color: var(--accent);
 }
-.ui-scope__icon svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; }
+.ui-scope__icon svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; }
 .ui-scope__t { color: var(--strong); font-size: 14px; font-weight: 500; }
 .ui-scope__d { color: var(--dim); font-size: 13px; margin-top: 2px; line-height: 1.5; }
 
@@ -275,7 +277,7 @@
   letter-spacing: -0.025em;
   font-weight: 700;
   color: var(--strong);
-  max-width: 14ch;
+  max-width: var(--prose-display);
   margin: 0 auto 22px;
 }
 .ui-hero__title .grad {
@@ -287,7 +289,7 @@
 .ui-hero__sub {
   font-size: clamp(16px, 2.1vw, 20px);
   color: var(--dim);
-  max-width: 52ch;
+  max-width: var(--prose-lede);
   margin: 0 auto 34px;
   line-height: 1.6;
 }
@@ -298,7 +300,9 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 20px;
-  max-width: 1080px;
+  /* Was 1080px — a third page-scale number with nothing arguing for it. The
+     feature row is a top-level band and lines up with the page it sits on. */
+  max-width: var(--container);
   margin: 0 auto;
   padding: 0 26px;
 }
@@ -314,6 +318,6 @@
 .ui-feature h3 { color: var(--strong); font-size: 17px; font-weight: 600; margin-bottom: 7px; }
 .ui-feature p { color: var(--dim); font-size: 14.5px; line-height: 1.6; }
 
-.ui-section-head { text-align: center; max-width: 620px; margin: 0 auto clamp(40px, 6vh, 64px); }
+.ui-section-head { text-align: center; max-width: var(--panel-lg); margin: 0 auto clamp(40px, 6vh, 64px); }
 .ui-section-head h2 { color: var(--strong); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
 .ui-section-head p { color: var(--dim); font-size: 17px; line-height: 1.6; }