@apliteni/apliteni-ui 0.31.0 → 0.33.0

package/src/components/stat.js

@@ -0,0 +1,75 @@
+// Stat band — a row of key figures, as an HTML string.
+// why: docs/specification.md#stat-bands
+//
+// A band is a <dl>: each figure is a <div> holding its label as a <dt> and its
+// value, change and trend as <dd>s, which is the grouping HTML allows inside a
+// description list and the one a screen reader reads as "term, then its values".
+import { esc } from './index.js';
+import { icon } from '../assets/icons.js';
+
+export const STAT_VARIANTS = ['band', 'tiles', 'open'];
+export const STAT_TONES = ['good', 'bad', 'neutral'];
+
+const cx = (...a) => a.filter(Boolean).join(' ');
+let seq = 0;
+
+// The arrow is read off the sign the caller printed, so the figure and the
+// glyph beside it cannot disagree. U+2212, the en dash and an accounting
+// bracket are negatives too: a formatter that typesets its figures uses them.
+const directionOf = (text) => {
+  const t = text.trim();
+  return /^[-−–(]/.test(t) ? 'down' : /^\+/.test(t) ? 'up' : 'flat';
+};
+const GLYPH = { up: 'arrowUp', down: 'arrowDown', flat: 'minus' };
+const hasChange = (delta) => delta && delta.value != null && delta.value !== '';
+
+const deltaHtml = (delta, basisId) => {
+  if (!delta) return '';
+  if (!hasChange(delta)) {
+    return `<dd class="ui-stat__delta ui-stat__delta--none">${esc(delta.none || 'No earlier figure')}</dd>`;
+  }
+  const text = String(delta.value);
+  const dir = GLYPH[delta.direction] ? delta.direction : directionOf(text);
+  const own = delta.basis ? ` <span class="ui-stat__basis">${esc(delta.basis)}</span>` : '';
+  const describedby = !delta.basis && basisId ? ` aria-describedby="${basisId}"` : '';
+  return `<dd class="ui-stat__delta"${describedby}>${icon(GLYPH[dir])}<span class="ui-stat__change">${esc(text)}</span>${own}</dd>`;
+};
+
+// `tone` says whether the change is good news, and nothing else. It is never
+// inferred from the direction: costs going up and unclassified rows going down
+// are both real, and a band that paints every rise green is editorialising.
+// A figure with no change has no news to colour.
+const figure = ({ label = '', value = '', delta, trend = '' }, tile, basisId) => {
+  const tone = hasChange(delta) && STAT_TONES.includes(delta.tone) && delta.tone !== 'neutral' ? delta.tone : '';
+  const cls = cx('ui-stat', tone && `ui-stat--${tone}`, tile && 'ui-card ui-card--pad-sm');
+  // `trend` is trusted markup — an <svg> the caller drew. The kit sizes and
+  // colours it and draws no chart of its own.
+  return `<div class="${cls}">`
+    + `<dt class="ui-stat__label">${esc(label)}</dt>`
+    + `<dd class="ui-stat__value">${esc(value)}</dd>`
+    + deltaHtml(delta, basisId)
+    + (trend ? `<dd class="ui-stat__trend">${trend}</dd>` : '')
+    + '</div>';
+};
+
+// `basis` is the band's caption, said once above the figures: what every change
+// is measured against, or on a band with no changes, what the figures cover. A
+// figure measured against something else carries its own `delta.basis`, printed
+// beside the change.
+//
+// The caption comes before the list, the way a table's <caption> does, in every
+// layout. It is one statement about all the figures, so it is read before them
+// and it sits outside every one of them — under a row of tiles it would read as
+// a note on the last card. why: docs/specification.md#stat-bands
+export function statBand({ stats = [], variant = 'tiles', basis = '', label, id } = {}) {
+  const v = STAT_VARIANTS.includes(variant) ? variant : 'tiles';
+  const base = id ? esc(id) : `ui-stats-${++seq}`;
+  const basisId = basis ? `${base}-basis` : '';
+  const cls = cx('ui-stats', `ui-stats--${v}`, v === 'band' && 'ui-card');
+  const named = label ? ` role="group" aria-label="${esc(label)}"` : '';
+  const items = stats.map((s) => figure(s, v === 'tiles', basisId)).join('');
+  return `<div class="${cls}"${named}>`
+    + (basis ? `<p class="ui-stats__basis" id="${basisId}">${esc(basis)}</p>` : '')
+    + `<dl class="ui-stats__list">${items}</dl>`
+    + '</div>';
+}

package/src/components/success.js

@@ -64,6 +64,7 @@ function countdownEl({ seconds = 5, label = 'Redirecting' } = {}) {
 // changing one never moves the other.
 export function success({
   layout = 'hero',          // 'hero' | 'split' | 'compact'
+  level,                    // heading level of the title; see the note below
   backdrop = 'aurora',      // 'aurora' | 'glow' | 'flat'
   eyebrow = '',
   title = 'All done',
@@ -76,6 +77,16 @@ export function success({
   const cls = ['ui-sx', `ui-sx--${layout}`, `ui-sx--bd-${backdrop}`, confetti && 'ui-sx--confetti', className]
     .filter(Boolean).join(' ');
 
+  // The title's rank follows the layout, because the layout is the question
+  // "how much of the screen does this own": hero and split ARE the page a flow
+  // lands on, so their title is its h1; compact sits beside other content and
+  // takes h2. It was an h3 either way, which left a page whose whole content is
+  // a success() with no h1 at all — the fault Guidelines / The page names.
+  // A caller who knows better passes `level`. The look is the class's.
+  // why: docs/specification.md#the-page
+  const rank = [1, 2, 3, 4, 5, 6].includes(Number(level)) ? Number(level) : (layout === 'compact' ? 2 : 1);
+  const h = `h${rank}`;
+
   const bd = backdrop === 'aurora'
     ? `<div class="ui-sx__aurora" aria-hidden="true">
         <span class="ui-sx__glow ui-sx__glow--a"></span>
@@ -99,7 +110,7 @@ export function success({
     <div class="ui-sx__visual">${successCheck()}</div>
     <div class="ui-sx__content">
       ${eyebrowEl}
-      <h3 class="ui-sx__title">${esc(title)}</h3>
+      <${h} class="ui-sx__title">${esc(title)}</${h}>
       ${bodyEl}
       ${actionsEl}
       ${countEl}

package/src/index.css

@@ -16,6 +16,7 @@
 @import "./tokens/accents.css";
 @import "./styles/base.css";
 @import "./styles/reduced-motion.css";
+@import "./styles/field-zoom.css";
 @import "./styles/motion.css";
 @import "./styles/button.css";
 @import "./styles/card.css";
@@ -32,6 +33,7 @@
 @import "./styles/command-palette.css";
 @import "./styles/table.css";
 @import "./styles/pagination.css";
+@import "./styles/stat.css";
 @import "./styles/empty.css";
 @import "./styles/callout.css";
 @import "./styles/code.css";

package/src/index.js

@@ -17,6 +17,7 @@ export * from './components/toasts.js';
 export * from './components/success.js';
 export * from './components/loading.js';
 export * from './components/pagination.js';
+export * from './components/stat.js';
 export * from './assets/icons.js';
 export * from './assets/brand.js';
 export * from './motion.js';

package/src/inline.js

@@ -29,6 +29,7 @@ export const topbarCss = read('styles/topbar.css');
 export const styles = {
   base: baseCss,
   reducedMotion: read('styles/reduced-motion.css'),
+  fieldZoom: read('styles/field-zoom.css'),
   motion: read('styles/motion.css'),
   button: read('styles/button.css'),
   card: read('styles/card.css'),
@@ -45,6 +46,7 @@ export const styles = {
   commandPalette: read('styles/command-palette.css'),
   table: read('styles/table.css'),
   pagination: read('styles/pagination.css'),
+  stat: read('styles/stat.css'),
   empty: read('styles/empty.css'),
   callout: read('styles/callout.css'),
   code: read('styles/code.css'),
@@ -61,6 +63,7 @@ export const cssText = [
   tokensCss,
   styles.base,
   styles.reducedMotion,
+  styles.fieldZoom,
   styles.motion,
   styles.button,
   styles.card,
@@ -77,6 +80,7 @@ export const cssText = [
   styles.commandPalette,
   styles.table,
   styles.pagination,
+  styles.stat,
   styles.empty,
   styles.callout,
   styles.code,

package/src/styles/button.css

@@ -102,11 +102,12 @@
   border-color: transparent;
   color: var(--disabled-ink-bare);
 }
-/* With no box, the ink is read on whatever is behind it. --disabled-ink read
-   5.18:1 on a card and 4.66:1 on --surface-3 in dark, under #220's 5.56, so the
-   ghost takes an ink set for the dullest ground: in dark 7.00 / 6.24 / 6.69 /
-   5.62 on --bg / --surface / --surface-2 / --surface-3, in light 6.50 / 6.50 /
-   6.01 / 5.60. The enabled ghost's --dim reads 1.5 times that in dark, 1.6 in light.
+/* With no box, the ink is read on whatever is behind it, so the ghost takes an ink
+   set for the dullest ground: in dark 7.49 / 6.31 / 7.00 / 5.44 on --bg / --surface /
+   --surface-2 / --surface-3, in light 5.70 / 6.17 / 5.20 / 5.39. The enabled ghost's
+   --dim reads about 1.5 times that in both themes. #273 cut this ink to rescue two
+   dark pairs from under #220's floor; #295 re-picked --muted against the elevation
+   ladder and lifted both clear, so it is the margin now rather than the rescue.
 
    #273 got here the long way. It first gave the ghost the flat disabled box
    instead, on the claim that nothing would get less readable. That was false:

package/src/styles/callout.css

@@ -110,8 +110,12 @@
 .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; /* 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); }
+/* style: soft — tinted surface. The shadow used to be its edge, so it takes the
+   status-tinted hairline the outline style carries, at half the weight. #295 */
+.ui-toast--soft {
+  background: var(--toast-glow);
+  border: 1px solid color-mix(in srgb, var(--toast-accent) 22%, transparent);
+}
 
 /* style: solid — the status at fill strength, inked with the pole opposite it.
    The fill and the ink are one pair, taken together from --signal-solid-*: dark
@@ -124,7 +128,6 @@
   --toast-ink: var(--signal-solid-ink);
   background: var(--toast-solid);
   color: var(--toast-ink);
-  box-shadow: var(--shadow-lg);
 }
 .ui-toast--solid .ui-toast__title { color: var(--toast-ink); }
 /* The body copy is the quieter of the two, but it stays quiet by dilution the
@@ -144,7 +147,7 @@
 .ui-toast--solid .ui-toast__timer { background: color-mix(in srgb, var(--toast-ink) 55%, transparent); }
 
 /* style: outline — elevated card with a status-tinted border */
-.ui-toast--outline { background: var(--bg-elevated); box-shadow: var(--shadow-md); border: 1px solid color-mix(in srgb, var(--toast-accent) 40%, transparent); }
+.ui-toast--outline { background: var(--bg-elevated); border: 1px solid color-mix(in srgb, var(--toast-accent) 40%, transparent); }
 
 /* compact — single line, no body text */
 .ui-toast--compact { align-items: center; padding-top: 10px; padding-bottom: 10px; }

package/src/styles/card.css

@@ -1,25 +1,18 @@
 /* ============================================================================
- * Card — .ui-card  (filled surface, no borders — the deck groups with
- *                   surface + radius, never outlines)
+ * Card — .ui-card  (a filled surface one step off the page, edged by a hairline)
  * Rows: .ui-card__row  /  headers: .ui-card__title / .ui-card__sub
  * ========================================================================== */
 
+/* Flat since #284 and edged in both themes since #295: the surface is the step, the
+   line is what makes it legible. why: docs/specification.md#elevation */
 .ui-card {
   background: var(--surface);
+  border: 1px solid var(--border);
   border-radius: var(--radius-xl);
   padding: var(--space-6) 26px;
   position: relative;
 }
 
-/* Light theme is an all-white app, so a filled card can't rely on a darker-
-   than-page surface the way the dark deck does — a hairline border delineates
-   it instead. Flat, no drop shadow (#284). `none` rather than no declaration:
-   at (0,3,0) it outranks .ui-card--accent's inset ring, which light never showed. */
-:root[data-theme="light"] .ui-card {
-  border: 1px solid var(--border);
-  box-shadow: none;
-}
-
 /* A table wider than its card scrolls INSIDE the card instead of bleeding past
    the rounded corners / clipping its last column. Clipping to the card's
    border-box also keeps zebra stripes from escaping the radius. */
@@ -32,10 +25,11 @@
 .ui-card--pad-sm { padding: var(--space-5); }
 .ui-card--pad-lg { padding: var(--space-8) var(--space-10); }
 
-/* An accent-tinted card, e.g. a highlighted plan / success surface */
+/* An accent-tinted card, e.g. a highlighted plan / success surface. The accent edge is
+   the card's own hairline re-coloured: an inset ring over it would draw two. #295 */
 .ui-card--accent {
   background: color-mix(in srgb, var(--accent) 9%, var(--surface));
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
 }
 .ui-card--live {
   background: color-mix(in srgb, var(--green) 10%, var(--surface));
@@ -44,16 +38,15 @@
 /* Interactive card (link / button semantics) */
 .ui-card--interactive {
   cursor: pointer;
-  /* Written as a <button>, the card would take the browser's frame, centred text
-     and `font: 400 13.3333px Arial` — a shorthand, so `font: inherit` and not the
-     family longhand. .ui-card already states its own background, and the light
-     theme's border rule is (0,3,0) so `border: 0` here cannot reach it. #251 */
-  border: 0;
+  /* Written as a <button>, the card would take the browser's frame, centred text and
+     `font: 400 13.3333px Arial` — a shorthand, so `font: inherit` and not the family
+     longhand. .ui-card states the background and, since #295, the border, so a
+     `border: 0` here would only delete the hairline. #251 */
   text-align: left;
   font: inherit;
   transition: transform var(--dur-fast) var(--ease);
 }
-/* The lift alone, no shadow: cards are flat (#284), and light never showed one. */
+/* The lift alone: the kit casts no shadow anywhere (#295), and cards are flat (#284). */
 .ui-card--interactive:hover { transform: translateY(-2px); }
 
 /* card() emits the title as an h2, so the text face is named here rather than

package/src/styles/command-palette.css

@@ -15,8 +15,8 @@
  * why: docs/specification.md#the-command-palette */
 
 .ui-cmdk {
-  --cmdk-surface: var(--surface-2);
-  --cmdk-shadow: var(--shadow-lg);
+  /* The floating step; nothing casts. why: docs/specification.md#elevation */
+  --cmdk-surface: var(--bg-elevated);
   --cmdk-scrim: var(--scrim);
   --cmdk-w: 560px;
   --cmdk-top: 12vh;
@@ -71,7 +71,6 @@
   background: var(--cmdk-surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  box-shadow: var(--cmdk-shadow);
   overflow: hidden;
   opacity: 0;
   transform: translate(-50%, -8px);
@@ -80,7 +79,7 @@
     transform var(--dur-med) var(--ease);
 }
 .ui-cmdk.is-open .ui-cmdk__panel { opacity: 1; transform: translate(-50%, 0); }
-.ui-cmdk__panel:focus-visible { outline: none; box-shadow: var(--cmdk-shadow), var(--ring); }
+.ui-cmdk__panel:focus-visible { outline: none; box-shadow: var(--ring); }
 
 /* -- The text box --------------------------------------------------------- */
 
@@ -250,7 +249,9 @@
   padding: 2px 5px;
   border: 1px solid var(--border);
   border-radius: var(--radius-xs);
-  background: var(--surface);
+  /* A key cap reads as raised, so it takes the step above the panel rather than
+     the card step below it. why: docs/specification.md#elevation */
+  background: var(--surface-3);
   font-family: var(--font-sans);
   font-size: var(--text-xs);
   line-height: 1.5;

package/src/styles/confirm.css

@@ -1,20 +1,11 @@
 /* Confirm — the kit's confirmation dialog: a centred panel over a scrim, for the
- * question a destructive action has to ask. Fully token-driven, and it shares
- * its scrim and focus-trap behaviour with the drawer (see overlay.js).
- *
- * `visibility` is SWITCHED rather than transitioned: transitioned, it is still
- * `hidden` in the frame the class lands, so openConfirm()'s focus() would have
- * nothing to focus. The root owns the switch; panel and scrim inherit it.
- *
- * Local tokens so the panel and scrim re-theme cleanly:
- *   --confirm-surface  panel background     --confirm-shadow  panel elevation
- *   --confirm-scrim    backdrop colour
- *
+ * question a destructive action has to ask. Shares its scrim and focus trap with
+ * the drawer (see overlay.js). Local tokens: --confirm-surface, --confirm-scrim.
  * why: docs/specification.md#motion */
 
 .ui-confirm {
-  --confirm-surface: var(--surface-2);
-  --confirm-shadow: var(--shadow-lg);
+  /* The floating step; nothing casts. why: docs/specification.md#elevation */
+  --confirm-surface: var(--bg-elevated);
   --confirm-scrim: var(--scrim);
   --confirm-w: var(--panel-md);
 
@@ -26,10 +17,11 @@
   z-index: calc(var(--z-overlay) + 2);
   pointer-events: none; /* container never blocks; scrim/panel opt back in */
 
-  /* Only the hide is transitioned, so the panel is still on screen while it
-     fades out; the show is instant, because focus moves in the same frame.
-     `linear` and not var(--ease): visibility is discrete, easing a step buys
-     nothing, and a curve that leaves [0, 1] would flip it mid-fade. */
+  /* SWITCHED, not transitioned: transitioned, the panel is still `hidden` in the
+     frame the class lands and openConfirm()'s focus() has nothing to focus. Only
+     the hide is timed, so the panel is on screen while it fades out. `linear` and
+     not var(--ease): visibility is discrete, and a curve leaving [0, 1] flips it
+     mid-fade. The root owns the switch; panel and scrim inherit it. */
   visibility: hidden;
   transition: visibility var(--dur-med) linear;
 }
@@ -72,7 +64,6 @@
   background: var(--confirm-surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  box-shadow: var(--confirm-shadow);
   opacity: 0;
   transform: translateY(8px);
   transition:
@@ -80,7 +71,7 @@
     transform var(--dur-med) var(--ease);
 }
 .ui-confirm.is-open .ui-confirm__panel { opacity: 1; transform: none; }
-.ui-confirm__panel:focus-visible { outline: none; box-shadow: var(--confirm-shadow), var(--ring); }
+.ui-confirm__panel:focus-visible { outline: none; box-shadow: var(--ring); }
 
 /* -- Slots ----------------------------------------------------------------- */
 /* The question and the answers keep their size; the consequence between them is

package/src/styles/drawer.css

@@ -6,13 +6,14 @@
  * (reduced-motion.css) makes the slide and the fade instant.
  *
  * Local tokens (surface/shadow/scrim) so the panel + scrim re-theme cleanly:
- *   --drawer-surface  panel background      --drawer-shadow  panel elevation
+ *   --drawer-surface  panel background
  *   --drawer-scrim    backdrop colour (--scrim already re-themes per theme)
  * ========================================================================== */
 
 .ui-drawer {
-  --drawer-surface: var(--surface-2);
-  --drawer-shadow: var(--shadow-lg);
+  /* The floating step; the edge is the hairline each --drawer--<edge> rule below draws.
+     why: docs/specification.md#elevation */
+  --drawer-surface: var(--bg-elevated);
   --drawer-scrim: var(--scrim);
   --drawer-w: var(--panel-md);   /* left|right panels: width  */
   --drawer-h: 45vh;    /* top|bottom panels: height */
@@ -57,10 +58,9 @@
   display: flex;
   flex-direction: column;
   background: var(--drawer-surface);
-  box-shadow: var(--drawer-shadow);
   transition: transform var(--dur-med) var(--ease);
 }
-.ui-drawer__panel:focus-visible { outline: none; box-shadow: var(--drawer-shadow), var(--ring); }
+.ui-drawer__panel:focus-visible { outline: none; box-shadow: var(--ring); }
 .ui-drawer.is-open .ui-drawer__panel { transform: none; }
 
 /* -- Edge anchoring + slide-in direction ---------------------------------- */
@@ -149,7 +149,7 @@
     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:hover { color: var(--strong); background: var(--surface-3); }
 .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: 2.1; }
 

package/src/styles/dropdown.css

@@ -57,13 +57,18 @@
   top: calc(100% + var(--ui-dropdown-gap));
   left: 0;
   min-width: 240px;
-  background: var(--surface-2);
+  /* The floating step, not the sunken one — a panel held open over a card cannot be
+     painted the colour of an inset. why: docs/specification.md#elevation */
+  background: var(--bg-elevated);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: 6px;
-  box-shadow: var(--shadow-lg);
   opacity: 0;
   visibility: hidden;
+  /* Drawn for the whole of the fade out, so the rows do not vanish mid-fade — and a
+     box that is drawn is a box that is hit. The open rules take this back.
+     why: docs/specification.md#the-dropdown-panel */
+  pointer-events: none;
   transform: translateY(-6px);
   transition:
     opacity var(--dur-med) var(--ease),
@@ -88,7 +93,13 @@
   transform: translateY(6px);
 }
 
-.ui-dropdown.open .ui-dropdown__panel { opacity: 1; visibility: visible; transform: translateY(0); }
+.ui-dropdown.open .ui-dropdown__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
+/* Open, the panel is visible AT ONCE: `visibility` is off the list, so it is not
+   held at `hidden` for the frame a key opens the panel in — the frame the focus
+   call happens in. Closing still fades on every property it always did.
+   why: docs/specification.md#the-dropdown-panel */
+.ui-dropdown.open .ui-dropdown__panel,
+.ui-dropdown__panel--portal.is-open { transition-property: opacity, transform; }
 
 /* Portalled panel — wireDropdown() moves it onto <body>, clear of every
    ancestor's overflow and every ancestor's stacking context. The descendant
@@ -100,7 +111,7 @@
   position: fixed;
   top: auto; right: auto; bottom: auto; left: auto;
 }
-.ui-dropdown__panel--portal.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
+.ui-dropdown__panel--portal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
 
 /* Item row — [icon] [main: label + desc] [badge] [tick]. A row is a <div>, an
    <a href> or a <button>: `is-selected` and __tick below mean a row gets
@@ -126,8 +137,9 @@
   color: var(--text);
   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); }
+/* A row in a raised panel lifts: the step above it, never the card step below. why: docs/specification.md#elevation */
+.ui-dropdown__item:hover { background: var(--surface-3); }
+.ui-dropdown__item:focus-visible { outline: none; background: var(--surface-3); box-shadow: var(--ring); }
 .ui-dropdown__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .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; }
@@ -153,17 +165,26 @@
   margin-left: auto;
   flex: none;
   color: var(--muted);
-  background: var(--surface);
+  /* A chip is the top step. why: docs/specification.md#elevation */
+  background: var(--surface-3);
 }
 .ui-dropdown__badge.is-live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
-.ui-dropdown__badge.is-accent { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
+/* The accent counter keeps the badge's flat surface and changes only the ink — the shape
+   src/styles/nav.css:163 `.ui-nav__item.is-active .ui-nav__badge.is-accent` already holds.
+   The accent wash goes on a base surface, never a raised one, and #295 made this panel a
+   raised one. why: docs/specification.md#elevation */
+.ui-dropdown__badge.is-accent { color: var(--accent); background: var(--surface-3); }
 
 /* Disabled + danger rows */
 .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; }
+/* Quiet at rest, --pink on the way to being pressed. Both states, not hover alone:
+   the ring says where the reader is, not that this row ends something.
+   why: docs/specification.md#a-dropdown-row-is-a-div-a-link-or-a-button */
 .ui-dropdown__item.is-danger .ui-dropdown__label { color: var(--muted); }
-.ui-dropdown__item.is-danger:hover .ui-dropdown__label { color: var(--pink); }
+.ui-dropdown__item.is-danger:hover .ui-dropdown__label,
+.ui-dropdown__item.is-danger:focus-visible .ui-dropdown__label { color: var(--pink); }
 
 /* Grouped sections. `~` and :not([hidden]), because `+` counts a group a search
    query has hidden and drew the divider above the first group left showing. */
@@ -193,11 +214,6 @@
    variant emits, so the plain dropdown renders as it did.
    why: docs/specification.md#a-dropdown-with-a-search-field */
 .ui-dropdown__panel--search { min-width: 280px; }
-/* Open, the panel is visible at once instead of at the first step of the
-   `visibility` transition, because a browser will not focus a field in a box
-   that is still `hidden` and opening puts focus in the field. Closing still fades. */
-.ui-dropdown.open .ui-dropdown__panel--search,
-.ui-dropdown__panel--search.is-open { transition-property: opacity, transform; }
 
 .ui-dropdown__search { position: relative; display: flex; align-items: center; margin-bottom: 6px; }
 .ui-dropdown__search-ic {
@@ -209,12 +225,16 @@
 }
 /* 16px at 2.4 paints 1.6px, over the 1.5px floor stories/glyph-stroke.test.js holds. */
 .ui-dropdown__search-ic svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; }
+/* 12.5px with a mouse only. On a touch screen the touch-zoom net in
+   src/styles/field-zoom.css takes this field, and every other field the kit
+   ships, to 16px. why: docs/specification.md#a-field-is-16px-on-a-touch-screen */
 .ui-dropdown__search-input {
   width: 100%;
   font: inherit;
   font-size: 12.5px;
   color: var(--strong);
-  background: var(--surface);
+  /* A field is the sunken step, the same one .ui-input takes. why: docs/specification.md#elevation */
+  background: var(--surface-2);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   padding: 8px 12px 8px 34px;
@@ -223,10 +243,6 @@
   min-height: 38px;
   transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
 }
-/* iOS Safari zooms the page into a focused field under 16px, and opening the
-   panel focuses this one. A real 16px, not a scaled one: the zoom reads the
-   computed size, and a transform would shrink the ring and border with it. */
-@media (pointer: coarse) { .ui-dropdown__search-input { font-size: 16px; } }
 .ui-dropdown__search-input::placeholder { color: var(--muted); }
 .ui-dropdown__search-input:hover { border-color: var(--border-strong); }
 .ui-dropdown__search-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
@@ -238,7 +254,7 @@
 
 /* The row Enter would pick. Focus stays in the field, which carries the ring,
    so this row takes the hover fill and a bar rather than a second ring. */
-.ui-dropdown__item.is-active { background: var(--surface); box-shadow: inset 2px 0 0 var(--accent); }
+.ui-dropdown__item.is-active { background: var(--surface-3); box-shadow: inset 2px 0 0 var(--accent); }
 
 /* No match — a nudge and no action, per Guidelines / Microcopy. Empty while
    anything matches, so it takes no room. */

package/src/styles/feedback.css

@@ -9,7 +9,6 @@
 
 :root {
   --ui-fb-pill-grad: linear-gradient(135deg, var(--accent), var(--accent-strong));
-  --ui-fb-pill-glow: color-mix(in srgb, var(--accent) 45%, transparent);
   --ui-fb-sel: color-mix(in srgb, var(--accent) 22%, transparent);
 }
 
@@ -34,23 +33,21 @@
   border: 0; text-align: center; font: inherit;
   font-family: var(--font-sans); font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: .01em;
   padding: 9px 17px 9px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap; overflow: hidden;
-  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);
+  /* The pill cast two layers of ink and an accent glow until #295, and grew both on
+     hover. Nothing casts now, and it takes no hairline either: it is the accent at full
+     fill strength on the page, found the way the solid toast is found. What is left is an
+     inset sheen — gloss on the surface, not a shadow under it — so the hover is the travel
+     alone and the box-shadow it transitioned went with it.
+     why: docs/specification.md#elevation */
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sheen) 28%, transparent);
   transition:
     transform var(--dur-fast) var(--ease-spring),
-    opacity var(--dur-fast) var(--ease),
-    box-shadow var(--dur-fast) var(--ease);
+    opacity var(--dur-fast) var(--ease);
 }
 .ui-fbpill.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -100%) translateY(-9px) scale(1); }
-.ui-fbpill:hover {
-  box-shadow: 0 14px 34px var(--ui-fb-pill-glow),
-              0 3px 9px color-mix(in srgb, var(--shadow-ink) 30%, transparent),
-              inset 0 1px 0 color-mix(in srgb, var(--sheen) 34%, transparent);
-}
 .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; stroke-width: 2.4; 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; }
 .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);
@@ -70,7 +67,8 @@
 .ui-fbcomposer {
   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;
+  /* The shadow was its only edge until #295; now it takes the hairline. */
+  border: 1px solid var(--border); opacity: 0; pointer-events: none;
   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); }

package/src/styles/field-zoom.css

@@ -0,0 +1,20 @@
+/* apliteni-ui — touch-zoom net. iOS Safari zooms the page into a focused field
+ * whose text is under 16px and does not zoom back out, so under (pointer: coarse)
+ * every field the kit ships is 16px. Element selectors rather than kit classes,
+ * and !important for the reason reduced-motion.css takes it; left out are the
+ * controls with nothing to type into, which never zoom.
+ *
+ * The two costs, argued in the spec below: a 16px scaled back down with a
+ * transform still zooms, and this is a flat size rather than a floor, so a host
+ * field designed ABOVE 16px is shrunk here. The override recipe is there too.
+ *
+ * why: docs/specification.md#a-field-is-16px-on-a-touch-screen */
+
+@media (pointer: coarse) {
+  input:not(:where(
+    [type="button"], [type="checkbox"], [type="color"], [type="file"], [type="hidden"],
+    [type="image"], [type="radio"], [type="range"], [type="reset"], [type="submit"]
+  )),
+  select,
+  textarea { font-size: 16px !important; }
+}