@apliteni/apliteni-ui 0.26.0 → 0.30.0

package/src/styles/command-palette.css

@@ -0,0 +1,321 @@
+/* ============================================================================
+ * Command palette — a text box and a ranked list, over a scrim, near the top of
+ * the window. Fully token-driven so it re-themes across accents + light/dark.
+ * Shares its scrim, its Escape and its focus trap with the drawer and the
+ * confirm (see overlay.js), and paints one layer above the drawer and one below
+ * the confirm a row opens.
+ *
+ * Local tokens so the panel and scrim re-theme cleanly:
+ *   --cmdk-surface  panel background     --cmdk-shadow  panel elevation
+ *   --cmdk-scrim    backdrop colour      --cmdk-w       panel width
+ *
+ * Two densities, one markup: the default packs a row onto one line, and
+ * `.ui-cmdk--roomy` gives the description a line of its own.
+ *
+ * why: docs/specification.md#the-command-palette */
+
+.ui-cmdk {
+  --cmdk-surface: var(--surface-2);
+  --cmdk-shadow: var(--shadow-lg);
+  --cmdk-scrim: var(--scrim);
+  --cmdk-w: 560px;
+  --cmdk-top: 12vh;
+  --cmdk-list-h: 332px;
+
+  position: fixed;
+  inset: 0;
+  /* One above the drawer, one below the confirm: a palette is summoned
+     deliberately and must be seen, so it paints over a drawer that was already
+     open; a confirm is a question about what is under it and paints over both. */
+  z-index: calc(var(--z-overlay) + 1);
+  pointer-events: none; /* container never blocks; scrim/panel opt back in */
+
+  /* One place owns "is this palette on screen at all", and the scrim and panel
+     inherit it. Only the HIDE is transitioned, so the panel is still on screen
+     while it fades out; the show is instant (`.is-open` cancels the transition)
+     because openCommandPalette() focuses the text box in the same frame it
+     opens, and focus() on a hidden element does nothing. `linear` and not
+     var(--ease): visibility is discrete, easing a step buys nothing, and a curve
+     that leaves [0, 1] would flip it in the middle of the fade. */
+  visibility: hidden;
+  transition: visibility var(--dur-med) linear;
+}
+.ui-cmdk.is-open { visibility: visible; transition: none; }
+
+/* Hit-testable only while open. The root stays visible for --dur-med after
+   closeCommandPalette() has stopped trapping, and a row still clickable in that
+   window runs the caller's command a second time. */
+.ui-cmdk.is-open .ui-cmdk__scrim,
+.ui-cmdk.is-open .ui-cmdk__panel { pointer-events: auto; }
+
+.ui-cmdk__scrim {
+  position: absolute;
+  inset: 0;
+  background: var(--cmdk-scrim);
+  opacity: 0;
+  transition: opacity var(--dur-med) var(--ease);
+}
+.ui-cmdk.is-open .ui-cmdk__scrim { opacity: 1; }
+
+/* Panel — near the top rather than centred: the list grows downward, and a
+   centred panel moves the text box every time the number of results changes. */
+.ui-cmdk__panel {
+  position: absolute;
+  top: var(--cmdk-top);
+  left: 50%;
+  width: min(var(--cmdk-w), calc(100vw - var(--space-8)));
+  max-height: min(72vh, calc(100vh - var(--cmdk-top) - var(--space-8)));
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-sans);
+  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);
+  transition:
+    opacity var(--dur-med) var(--ease),
+    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); }
+
+/* -- The text box --------------------------------------------------------- */
+
+.ui-cmdk__search {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 0 var(--space-4);
+  border-bottom: 1px solid var(--border);
+}
+.ui-cmdk__search-ic {
+  display: inline-flex;
+  color: var(--muted);
+  flex: none;
+}
+/* 2.2 of a 24 box drawn at 17px = 1.56 CSS px, which is what keeps the mark a
+   graphic rather than a smudge. why: docs/specification.md#icons-and-glyphs */
+.ui-cmdk__search-ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; }
+
+/* Not .ui-input: this one has no box of its own — the panel is the box — and a
+   second border inside a bordered panel reads as a form somebody has to submit. */
+.ui-cmdk__input {
+  flex: 1;
+  min-width: 0;
+  /* Literal px, and a line-height it does not inherit: the target-size gate
+     reads declarations rather than a laid-out box, and `var()` inside a padding
+     shorthand measures as nothing there.
+     why: CONTRIBUTING.md#an-unresolved-var-measures-nothing-and-reports-green */
+  padding: 16px 0;
+  line-height: 1.5;
+  font-family: inherit;
+  font-size: var(--text-md);
+  font-weight: var(--weight-normal);
+  color: var(--text);
+  background: none;
+  border: 0;
+  /* The one control in the kit that removes the indicator and puts no
+     box-shadow: var(--ring) back, against base.css. It is the only tab stop in
+     the dialog and it holds focus from the frame it opens, so a ring would be
+     painted the whole time the palette is up and would mark nothing; the panel
+     already carries one, and the caret says where the typing goes. */
+  outline: none;
+}
+.ui-cmdk__input::placeholder { color: var(--muted); }
+
+/* -- The list ------------------------------------------------------------- */
+
+.ui-cmdk__list {
+  flex: 1;
+  min-height: 0;
+  max-height: var(--cmdk-list-h);
+  overflow-y: auto;
+  padding: var(--space-2);
+}
+.ui-cmdk__group + .ui-cmdk__group { margin-top: var(--space-2); }
+
+/* Sentence case at 13px medium — the kit's label role, not a heading and not a
+   shout. A group name is the one word the reader scans for. */
+.ui-cmdk__group-head {
+  padding: var(--space-2) var(--space-3) var(--space-1);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  color: var(--muted);
+}
+
+/* Row — [icon] [label + description] [badge] [keys]. A <div role="option">, so
+   the reset a button or a link would need is not needed here. */
+/* The four declarations after `display` are the reset a row written as a
+   <button> needs: the browser gives one a 2px outset border, `font: 400
+   13.3333px Arial`, centred text and a shrink-to-fit width, and a consumer who
+   needs the row operable from the keyboard should get the row this sheet
+   describes rather than that. `font: inherit` comes before the line-height it
+   keeps. why: docs/specification.md#a-dropdown-row-is-a-div-a-link-or-a-button */
+.ui-cmdk__item {
+  display: flex;
+  border: 0;
+  font: inherit;
+  text-align: left;
+  width: 100%;
+  align-items: center;
+  gap: var(--space-3);
+  padding: 8px 12px;
+  line-height: 1.5;
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  cursor: pointer;
+  /* The active row is painted, never faded in: the row moves on every arrow
+     press and a transition would leave two rows looking half-chosen. */
+  background: none;
+}
+.ui-cmdk__item[hidden] { display: none; } /* motion: still — a row the query no longer answers is gone on the next keystroke */
+.ui-cmdk__item.is-active { background: var(--surface-3); }
+.ui-cmdk__item.is-active .ui-cmdk__label { color: var(--strong); }
+
+.ui-cmdk__ic {
+  display: inline-flex;
+  color: var(--dim);
+  flex: none;
+}
+/* 2.3 of a 24 box drawn at 16px = 1.53 CSS px. Same arithmetic as the dropdown's
+   row icon next door. why: docs/specification.md#icons-and-glyphs */
+.ui-cmdk__ic svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.3; }
+.ui-cmdk__item.is-active .ui-cmdk__ic { color: var(--accent); }
+
+.ui-cmdk__main {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-2);
+  min-width: 0;
+  flex: 1;
+}
+.ui-cmdk__label {
+  font-size: var(--text-base);
+  font-weight: var(--weight-medium);
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ui-cmdk__desc {
+  font-size: var(--text-sm);
+  /* --dim and not --muted: a row's note is how two rows called INV-4812 and
+     INV-4809 are told apart, which is not something a reader may skip.
+     why: docs/specification.md#colour-and-contrast */
+  color: var(--dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.ui-cmdk__badge {
+  flex: none;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+  border: 1px solid var(--border);
+  font-size: var(--text-xs);
+  color: var(--dim);
+}
+
+/* Destructive rows take the kit's danger ink, never the accent, and stay quiet
+   until the reader is on them — the same pair .ui-dropdown__item.is-danger
+   writes with :hover. A palette row is reached with an arrow key far more often
+   than with a pointer, so `.is-active` carries the signal beside :hover: it is
+   the same moment, and it is the row Enter would run.
+   why: docs/specification.md#colour-and-contrast */
+.ui-cmdk__item.is-danger .ui-cmdk__label { color: var(--muted); }
+.ui-cmdk__item.is-danger:hover .ui-cmdk__label,
+.ui-cmdk__item.is-danger.is-active .ui-cmdk__label { color: var(--pink); }
+.ui-cmdk__item.is-danger.is-active .ui-cmdk__ic { color: var(--pink); }
+
+/* A disabled row is painted, never faded. It takes --disabled-ink-bare, the ink
+   for a control with no box of its own: --disabled-surface IS --surface-2,
+   which is the panel behind it, so a disabled row paints no box a reader can
+   see and its label is read on whatever the panel is.
+   why: docs/specification.md#colour-and-contrast */
+.ui-cmdk__item.is-disabled { cursor: default; color: var(--disabled-ink-bare); }
+.ui-cmdk__item.is-disabled .ui-cmdk__label,
+.ui-cmdk__item.is-disabled .ui-cmdk__desc,
+.ui-cmdk__item.is-disabled .ui-cmdk__ic { color: var(--disabled-ink-bare); }
+
+/* -- Keys, empty state, legend -------------------------------------------- */
+
+.ui-cmdk__keys { display: inline-flex; gap: 4px; flex: none; }
+.ui-cmdk__key {
+  min-width: 20px;
+  padding: 2px 5px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xs);
+  background: var(--surface);
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  line-height: 1.5;
+  color: var(--dim);
+  text-align: center;
+}
+
+.ui-cmdk__empty {
+  margin: 0;
+  padding: var(--space-6) var(--space-4) var(--space-8);
+  text-align: center;
+  font-size: var(--text-base);
+  color: var(--dim);
+}
+
+.ui-cmdk__foot {
+  display: flex;
+  gap: var(--space-4);
+  align-items: center;
+  padding: var(--space-2) var(--space-4);
+  border-top: 1px solid var(--border);
+  font-size: var(--text-xs);
+  color: var(--muted);
+}
+.ui-cmdk__foot span { display: inline-flex; align-items: center; gap: 5px; }
+
+/* -- Roomy ---------------------------------------------------------------- */
+/* The same markup, two lines to a row: the description drops under the label
+   and the icon gets a tile of its own. For a palette whose rows need a sentence
+   to tell apart — an invoice from an invoice — rather than a list of verbs. */
+
+.ui-cmdk--roomy { --cmdk-w: 640px; --cmdk-list-h: 396px; }
+.ui-cmdk--roomy .ui-cmdk__item { padding: 9px 12px; gap: var(--space-3); }
+.ui-cmdk--roomy .ui-cmdk__main { display: block; }
+.ui-cmdk--roomy .ui-cmdk__label { display: block; }
+.ui-cmdk--roomy .ui-cmdk__desc { display: block; margin-top: 1px; }
+.ui-cmdk--roomy .ui-cmdk__ic {
+  width: 30px;
+  height: 30px;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  border: 1px solid var(--border);
+}
+.ui-cmdk--roomy .ui-cmdk__item.is-active .ui-cmdk__ic { background: var(--surface-2); }
+
+/* -- Narrow --------------------------------------------------------------- */
+/* At the kit's narrowest step the palette is the page: full width, off the top
+   edge, and the key legend goes — there is no keyboard to legend.
+   why: docs/specification.md#breakpoints */
+@media (max-width: 560px) {
+  .ui-cmdk { --cmdk-top: var(--space-4); --cmdk-list-h: 60vh; }
+  .ui-cmdk__panel { width: calc(100vw - var(--space-4)); }
+  .ui-cmdk__foot { display: none; }
+}
+
+/* Under reduced motion the net gives every element a 0.01ms transition, so a
+   child inherits `visible` one tick after the root: the text box
+   openCommandPalette() focuses is still hidden in that frame, and focus falls to
+   <body> — the arrows and every letter then reach nothing. So an open palette
+   carries no transition inside it at all — for as long as it is open, not only
+   in the frame it opens — which is what reduced motion asked for anyway: under
+   the net nothing inside had longer than 0.01ms to run.
+   why: docs/specification.md#reduced-motion-travels-with-the-stylesheet */
+@media (prefers-reduced-motion: reduce) {
+  .ui-cmdk.is-open * { transition: none !important; }
+}

package/src/styles/confirm.css

@@ -20,10 +20,10 @@
 
   position: fixed;
   inset: 0;
-  /* One above the drawer's own overlay level: a confirm asks a question about the
-     drawer it was opened over, so it has to be readable above it whatever order
-     the two are mounted in. */
-  z-index: calc(var(--z-overlay) + 1);
+  /* Top of the overlay stack — one above the palette, two above the drawer: a
+     confirm asks a question about whichever of them opened it, so it has to be
+     readable above both whatever order the three are mounted in. */
+  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
@@ -119,12 +119,12 @@
   margin-top: var(--space-2);
 }
 
-/* -- Reduced motion: no rise, just a fade --------------------------------- */
+/* Under reduced motion the net makes every change instant, and gives every
+   element a 0.01ms transition: a child inherits `visible` one tick after the
+   root, so the answer openConfirm() focuses is still hidden and focus falls to
+   <body>. So an open confirm carries no transition inside it at all — for as
+   long as it is open, not only in the frame it opens.
+   why: docs/specification.md#reduced-motion-travels-with-the-stylesheet */
 @media (prefers-reduced-motion: reduce) {
-  .ui-confirm { transition: visibility var(--dur-fast) linear; }
-  .ui-confirm__panel {
-    transform: none;
-    transition: opacity var(--dur-fast) linear;
-  }
-  .ui-confirm__scrim { transition: opacity var(--dur-fast) linear; }
+  .ui-confirm.is-open * { transition: none !important; }
 }

package/src/styles/drawer.css

@@ -2,8 +2,8 @@
  * Drawer — edge-anchored overlay panel (Sheet / Slide-over): a panel that
  * slides in from any screen edge over a scrim. Fully token-driven so it
  * re-themes across accents + light/dark. Shares its scrim + focus trap with
- * confirm() (see overlay.js). `prefers-reduced-motion` drops the slide for a
- * plain fade.
+ * confirm() (see overlay.js). Under `prefers-reduced-motion` the kit's net
+ * (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
@@ -58,10 +58,7 @@
   flex-direction: column;
   background: var(--drawer-surface);
   box-shadow: var(--drawer-shadow);
-  opacity: 1;
-  transition:
-    transform var(--dur-med) var(--ease),
-    opacity var(--dur-med) var(--ease);
+  transition: transform var(--dur-med) var(--ease);
 }
 .ui-drawer__panel:focus-visible { outline: none; box-shadow: var(--drawer-shadow), var(--ring); }
 .ui-drawer.is-open .ui-drawer__panel { transform: none; }
@@ -110,6 +107,10 @@
 .ui-drawer--top.ui-drawer--lg, .ui-drawer--bottom.ui-drawer--lg { --drawer-h: 72vh; }
 
 /* -- Slots ----------------------------------------------------------------- */
+/* The header keeps its rule, and the footer keeps its. A drawer's normal state is a
+   long record scrolling, and those two lines are what say where the scrolling body
+   ends: the one place inside the panel a line still earns.
+   why: docs/specification.md#the-drawer */
 .ui-drawer__header {
   display: flex;
   align-items: center;
@@ -174,14 +175,55 @@
   flex: none;
 }
 
-/* -- Reduced motion: no slide, just a fade -------------------------------- */
+/* -- Groups and rows ------------------------------------------------------- */
+/* drawerSection(): a heading over label/value rows. The value sits beside its
+   label rather than at the far edge, so nothing has to lead the eye across the
+   panel, and rows are held apart by space alone. Group from group is the one
+   division inside the body worth a line; the body's padding insets it, so it
+   parts the groups without cutting the panel in two.
+   why: docs/specification.md#the-drawer */
+.ui-drawer__section + .ui-drawer__section {
+  margin-top: var(--space-6);
+  padding-top: var(--space-6);
+  border-top: 1px solid var(--border);
+}
+/* An h3, and it opts out of the display face for the reason .ui-drawer__title does.
+   why: docs/specification.md#typefaces */
+.ui-drawer__section-title {
+  margin: 0 0 var(--space-2);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  /* Semibold, and so outside the rank table, which has nothing at this size and
+     weight. A group heading set in the label rank would match the row labels
+     under it in size and weight both, and differ from them by colour alone. */
+  font-weight: var(--weight-semibold);
+  color: var(--strong);
+}
+.ui-drawer__rows {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+  column-gap: var(--space-4);
+  margin: 0;
+}
+.ui-drawer__row { display: contents; }
+.ui-drawer__row dt,
+.ui-drawer__row dd {
+  margin: 0;
+  padding-block: var(--space-1);
+  overflow-wrap: anywhere;
+}
+.ui-drawer__row dt { color: var(--muted); }
+.ui-drawer__row dd { color: var(--text); font-variant-numeric: tabular-nums; }
+.ui-drawer__rows + * { margin-top: var(--space-3); }
+
+/* Under reduced motion the net gives every element a 0.01ms transition, so a
+   child inherits `visible` one tick after the root: the control openDrawer()
+   focuses is still hidden in that frame, and focus lands on the panel. So an
+   open drawer carries no transition inside it at all — for as long as it is
+   open, not only in the frame it opens — which is what reduced motion asked
+   for anyway: under the net nothing inside had longer than 0.01ms to run.
+   why: docs/specification.md#reduced-motion-travels-with-the-stylesheet */
 @media (prefers-reduced-motion: reduce) {
-  .ui-drawer { transition: visibility var(--dur-fast) linear; }
-  .ui-drawer__panel {
-    transform: none !important;
-    opacity: 0;
-    transition: opacity var(--dur-fast) linear;
-  }
-  .ui-drawer.is-open .ui-drawer__panel { opacity: 1; }
-  .ui-drawer__scrim { transition: opacity var(--dur-fast) linear; }
+  .ui-drawer.is-open * { transition: none !important; }
 }
+

package/src/styles/dropdown.css

@@ -137,7 +137,7 @@
 /* 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.4; }
-.ui-dropdown__item.is-selected .ui-dropdown__tick { display: inline-flex; }
+.ui-dropdown__item.is-selected .ui-dropdown__tick { display: inline-flex; } /* motion: still — a mark inside a row whose highlight already transitions; picking it closes the panel, which fades out over --dur-med */
 .ui-dropdown__item.is-selected .ui-dropdown__label { color: var(--accent); }
 
 /* When a row has both a badge and a tick, keep the badge from eating the margin */
@@ -145,10 +145,9 @@
 
 /* Trailing status badge */
 .ui-dropdown__badge {
-  font-size: 9.5px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  font-weight: 700;
+  /* rank: chip */
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
   padding: 2px 7px;
   border-radius: var(--radius-pill);
   margin-left: auto;
@@ -166,13 +165,13 @@
 .ui-dropdown__item.is-danger .ui-dropdown__label { color: var(--muted); }
 .ui-dropdown__item.is-danger:hover .ui-dropdown__label { color: var(--pink); }
 
-/* Grouped sections */
-.ui-dropdown__section + .ui-dropdown__section { border-top: 1px solid var(--border); margin-top: 5px; padding-top: 5px; }
+/* Grouped sections. `~` and :not([hidden]), because `+` counts a group a search
+   query has hidden and drew the divider above the first group left showing. */
+.ui-dropdown__section:not([hidden]) ~ .ui-dropdown__section:not([hidden]) { border-top: 1px solid var(--border); margin-top: 5px; padding-top: 5px; }
 .ui-dropdown__group {
-  font-size: 10px;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  font-weight: 700;
+  /* rank: label */
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
   color: var(--muted);
   padding: 7px 12px 4px;
 }
@@ -187,3 +186,63 @@
   border-bottom: 1px solid var(--border);
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
 }
+
+/* Search — `search: true` pins a field above the rows and filters them as the
+   reader types. The rows move into a list of their own, so the field stays put
+   while the list scrolls. Every rule below keys on a class only the search
+   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 {
+  position: absolute;
+  left: 11px;
+  display: inline-flex;
+  color: var(--muted);
+  pointer-events: none;
+}
+/* 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; }
+.ui-dropdown__search-input {
+  width: 100%;
+  font: inherit;
+  font-size: 12.5px;
+  color: var(--strong);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px 8px 34px;
+  /* The height Chromium paints (38.25px), stated so the target-size gate, which
+     cannot see an <input>'s line of text, reads the box a reader hits. */
+  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); }
+
+.ui-dropdown__list { max-height: 300px; overflow-y: auto; }
+/* A row is `display: flex`, which outranks the UA's [hidden], so a row the
+   query hides is put away here. */
+.ui-dropdown__list [hidden] { display: none; } /* motion: still — a row the query no longer matches is gone on the next keystroke */
+
+/* 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); }
+
+/* No match — a nudge and no action, per Guidelines / Microcopy. Empty while
+   anything matches, so it takes no room. */
+.ui-dropdown__none { display: flex; flex-direction: column; gap: 3px; padding: 14px 12px 10px; text-align: center; }
+.ui-dropdown__none:empty { display: none; }
+.ui-dropdown__none-title { font-size: 12.5px; font-weight: 600; color: var(--strong); }
+.ui-dropdown__none-hint { font-size: 11px; color: var(--muted); line-height: 1.35; }

package/src/styles/feedback.css

@@ -127,6 +127,8 @@
 /* Error banner */
 .ui-fbc__err { margin: 14px 20px 0; background: color-mix(in srgb, var(--pink) 14%, transparent); color: var(--pink); font-size: 13px; padding: 11px 15px; border-radius: 11px; display: none; }
 .ui-fbc__err.show { display: block; }
+/* A failed send's line fades in; wireFeedback() adds the class as it shows it. */
+.ui-fbc__err.is-entering { animation: m-fade var(--dur-fast) var(--ease-out) both; }
 
 @media (prefers-reduced-motion: reduce) {
   .ui-fbpill, .ui-fbpill::before, .ui-fbcomposer, .ui-fbscrim, .ui-fbck, .ui-fbck-m, .ui-fbck-s { animation: none !important; transition: none !important; }

package/src/styles/footer.css

@@ -71,10 +71,9 @@
   gap: 30px 56px;
 }
 .ui-footer__col-title {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+  /* rank: label */
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
   color: var(--footer-text);
   margin: 0 0 14px;
 }

package/src/styles/input.css

@@ -49,7 +49,13 @@
 
 /* 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-select` joins these two in #273. It had no disabled rule at all, and it
+   sets `background: var(--surface-2)` as an author declaration — which outranks
+   the UA's own grey-out — so a disabled select rendered pixel-identical to a live
+   one. A pager marked busy showed every button and the jump input visibly off
+   beside a size control that still looked available. */
 .ui-input:disabled,
+.ui-select:disabled,
 .ui-textarea:disabled {
   background: var(--disabled-surface);
   border-color: var(--disabled-border);
@@ -134,7 +140,7 @@
   width: 5px; height: 10px;
   border: solid var(--accent-contrast);
   border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
+  transform: rotate(45deg); /* motion: still — the turn is the tick's shape, not travel; it lands with the box's fill, which transitions */
 }
 .ui-check input[type="radio"]:checked::after {
   content: "";

package/src/styles/layout.css

@@ -78,7 +78,7 @@
    smallest of three weak signals doing the most work, so it grows with the row. */
 .ui-app__rail .ui-nav__ic svg { opacity: 0.62; }
 .ui-app__rail .ui-nav__item.is-active .ui-nav__ic svg,
-.ui-app__rail .ui-nav__item.is-current .ui-nav__ic svg { opacity: 1; stroke: currentColor; }
+.ui-app__rail .ui-nav__item.is-current .ui-nav__ic svg { opacity: 1; stroke: currentColor; } /* motion: still — the glyph brightens with its row, whose own highlight already transitions */
 .ui-app__rail .ui-nav__item.is-active::before { width: 3px; height: 62%; }
 
 /* Sign out is a navigation row and rests like one. The danger intent is the
@@ -133,7 +133,8 @@
 .ui-app__main .ui-nav--crumbs { margin-bottom: var(--space-5); }
 .ui-app__main h1 {
   color: var(--strong);
-  font-size: 30px;
+  /* rank: page-title */
+  font-size: var(--text-2xl);
   font-weight: var(--weight-bold);
   line-height: 1.1;
   letter-spacing: var(--tracking-tight);

package/src/styles/loading.css

@@ -31,6 +31,11 @@
 .ui-busy {
   display: block;
 }
+/* What setBusy() puts in the body fades in, without travel. The region the page
+   loads with is not animated: only setBusy() adds the class. */
+.ui-busy__body.is-entering {
+  animation: m-fade var(--dur-med) var(--ease-out) both;
+}
 
 /* -- Skeleton -------------------------------------------------------------- */
 .ui-skel {