actual-css 0.14.1 → 0.15.0

package/reserved-classes.json

@@ -232,9 +232,11 @@
   "switch",
   "switcher",
   "tab",
+  "tab-panel",
   "table",
   "table-wrap",
   "tabs",
+  "tabs-attached",
   "text-balance",
   "text-break",
   "text-capitalize",
@@ -251,6 +253,7 @@
   "text-wrap",
   "textarea",
   "tight",
+  "timeline",
   "tooltip",
   "topbar",
   "touch-target",

package/src/css/components/accordion.css

@@ -18,12 +18,16 @@
  * --accordion-pad
  * --accordion-marker-color
  * --accordion-marker-size
+ * --accordion-marker-icon
+ * --accordion-marker-open-rotate
  */
 .accordion {
   --accordion-radius: var(--radius);
   --accordion-pad: var(--space-40);
   --accordion-marker-color: var(--text-muted);
   --accordion-marker-size: 1rem;
+  --accordion-marker-icon: var(--icon-chevron);
+  --accordion-marker-open-rotate: 180deg;
 
   border: var(--border-width) solid var(--border);
   border-radius: var(--accordion-radius);
@@ -68,13 +72,13 @@
   inline-size: var(--accordion-marker-size);
   block-size: var(--accordion-marker-size);
   background-color: var(--accordion-marker-color);
-  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
-  mask: var(--icon-chevron) center / contain no-repeat;
+  -webkit-mask: var(--accordion-marker-icon) center / contain no-repeat;
+  mask: var(--accordion-marker-icon) center / contain no-repeat;
   transition: transform var(--duration);
 }
 
 .accordion details[open] summary::after {
-  transform: rotate(180deg);
+  transform: rotate(var(--accordion-marker-open-rotate));
 }
 
 /* The panel, not the item, owns the inset here — .separated paints a card on

package/src/css/components/alert.css

@@ -172,6 +172,9 @@
   /* No grid-template-columns: the icon and close branches below always set
      it, since one of them is what matched. */
   align-items: var(--items-align, start);
+  /* why: a stretched alert (equal-height grid row) spread its extra height
+     between the content rows, opening a gap under the title. */
+  align-content: start;
   column-gap: var(--space-30);
 }
 
@@ -179,9 +182,14 @@
   grid-template-columns: auto minmax(0, 1fr);
 }
 
+/* why span 2, not 1 / -1: the rows are implicit, so -1 is line 1 and the
+   icon sat in the title row alone — any icon taller than one line inflated
+   that row and pushed the body down. Spanning the title and body rows lets
+   its height spread over both; only an icon taller than both together still
+   splits its excess between them. */
 .alert:has(> .alert-icon) > .alert-icon {
   grid-column: 1;
-  grid-row: 1 / -1;
+  grid-row: 1 / span 2;
   display: inline-grid;
   place-items: center;
   margin-block-start: 0.125em;

package/src/css/components/badge.css

@@ -20,6 +20,8 @@
  * --badge-default-fg
  * --badge-default-border
  * --badge-default-hover-bg
+ * --badge-slot-inset
+ * --badge-slot-size
  * --badge-bg
  * --badge-fg
  * --badge-border
@@ -44,9 +46,13 @@
   --badge-font-size: var(--font-size-sm);
   --badge-icon-size: 1em;
   --badge-dot-size: 0.5rem;
+  /* A leading .avatar and a trailing .close are slots: a disc inside the pill
+     at the same inset from its block edges and its rounded end. */
+  --badge-slot-inset: calc(var(--badge-size) / 12);
+  --badge-slot-size: calc(var(--badge-size) - 2 * (var(--border-width) + var(--badge-slot-inset)));
   /* Declared on the badge, not the button, so an author can still set them
      on either. Same element as --badge-size, so .sm/.lg carry through. */
-  --close-size: max(var(--badge-size), 24px);
+  --close-size: var(--badge-slot-size);
   --close-icon-size: 0.875em;
   --badge-default-bg: var(--surface-subtle);
   --badge-default-fg: var(--intent, var(--text));
@@ -97,9 +103,11 @@
   --badge-dot-size: 0.625rem;
 }
 
-/* Decorative children follow the badge's optical size. Text and the .close
-   button retain their own boxes. */
-.badge > :where(svg, img, [aria-hidden="true"]:not(.dot)) {
+/* Decorative children follow the badge's optical size. Text, the .close
+   button and an .avatar retain their own boxes — an aria-hidden avatar would
+   otherwise tie with .avatar on specificity and shrink to an icon whenever
+   badge.css loads last. */
+.badge > :where(svg, img, [aria-hidden="true"]:not(.dot, .avatar)) {
   flex: none;
   /* The shared rule maps --badge-icon-size onto font-size. One em is therefore
      the requested optical size; reusing the em-valued hook here would apply its
@@ -164,17 +172,36 @@
   background-color: currentColor;
 }
 
-/* Removable tag — a .close (components/close.css) inside the pill. WCAG 2.5.8
-   floors pointer targets at 24 CSS px: density and local size may keep the
-   badge visually compact through the negative margins, but never shrink the
-   target below that literal floor. */
+/* Person chip (mention, assignee, contributor) — a leading .avatar follows the
+   pill instead of its own scale, so the badge keeps its height. */
+.badge > .avatar {
+  --avatar-size: var(--badge-slot-size);
+  /* Initials scale from the label, not the diameter: a diameter ratio left
+     them under 6px on .sm. em resolves against the badge's font size here. */
+  --avatar-font-size: 0.7em;
+  margin-inline-start: calc(var(--badge-slot-inset) - var(--badge-pad-x));
+}
+
+/* Removable tag — a trailing .close (components/close.css), the avatar's
+   mirror: a fill or the hover wash stays a disc inside the pill. */
 .badge > .close {
-  margin-block: -0.25rem;
-  margin-inline-start: -0.15em;
-  margin-inline-end: -0.45em;
+  position: relative;
+  margin-inline-end: calc(var(--badge-slot-inset) - var(--badge-pad-x));
   border-radius: var(--radius-full);
 }
 
+/* WCAG 2.5.8 floors pointer targets at 24 CSS px. The disc is smaller on the
+   default and .sm badges, so a transparent pseudo-element — part of the
+   button's hit area — extends the target to the floor around it, past the pill
+   if need be, without painting anything there. */
+.badge > .close::after {
+  content: "";
+  position: absolute;
+  /* Square on purpose: nothing paints it, and a round one would miss the
+     corners of the 24px target. */
+  inset: min(0px, calc((var(--close-size) - 24px) / 2));
+}
+
 /* Hover recipes — sets --ui-hover-bg consumed by the hover rule below.
    Declared outside :hover like button.css for the same reason. */
 :is(a.badge, button.badge).outline {

package/src/css/components/button.css

@@ -19,6 +19,7 @@
  * --btn-radius
  * --btn-gap
  * --btn-hover-overlay
+ * --btn-shadow
  * --btn-default-bg
  * --btn-default-fg
  * --btn-default-border
@@ -85,6 +86,11 @@
   border-radius: var(--btn-radius);
   background: var(--btn-bg);
   color: var(--btn-fg);
+  /* why: an unset hook rather than none, so a theme or container can give
+     every button an elevation the hover overlay composes with instead of
+     replacing (see the hover rule). The hook accepts shadow-list items:
+     use 0 0 #0000 to remove elevation, since none invalidates that list. */
+  box-shadow: var(--btn-shadow, 0 0 #0000);
   font: inherit;
   font-size: var(--btn-font-size);
   font-weight: var(--font-weight-medium);
@@ -169,8 +175,10 @@
   background: var(--ui-hover-bg, var(--btn-bg));
   /* Huge inset spread paints the overlay over any border-radius without a
      pseudo-element; a plain background would replace the fill instead of
-     darkening it. */
-  box-shadow: inset 0 0 0 999px var(--btn-hover-overlay);
+     darkening it. Listed after --btn-shadow, which it must not drop. */
+  box-shadow:
+    var(--btn-shadow, 0 0 #0000),
+    inset 0 0 0 999px var(--btn-hover-overlay);
 }
 
 .btn:not(:where(:disabled, [aria-disabled="true"])):active {

package/src/css/components/card.css

@@ -28,6 +28,7 @@
  * --card-fg
  * --heading
  * --busy-overlay-bg
+ * --surface-link
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity.
@@ -36,6 +37,7 @@
    when they paint this surface, so an ancestor intent would otherwise leak
    through a variant that has no local intent class. */
 :where(.card) {
+  --surface-link: initial;
   --intent: initial;
   --intent-fg: initial;
   --intent-soft-fg: initial;
@@ -71,6 +73,13 @@
   border-radius: var(--card-radius);
 }
 
+/* Theme link ink is tuned for the page, not an intent fill. currentColor
+   follows the surrounding copy without freezing a parent's resolved ink;
+   the card and theme boundaries reset this internal relay above/in theme.css. */
+.card.solid {
+  --surface-link: currentColor;
+}
+
 /* The box lives at zero specificity so a layout primitive applied to the same
    element owns it. components/ is imported after layout/, so a plain .card
    declaration would beat .media (and any other non-column primitive) on source

package/src/css/components/index.css

@@ -33,6 +33,7 @@
 @import "./fab.css";
 @import "./rating.css";
 @import "./steps.css";
+@import "./timeline.css";
 
 /* Navigation */
 @import "./app-nav.css";

package/src/css/components/skeleton.css

@@ -38,6 +38,17 @@
     0 0 / 200% 100%;
 }
 
+/* Translucent ink tints show the surface they sit on. Fixed surfaces did
+   not: the --surface-raised highlight matched a card or a light page, so the
+   shape lost its edges mid-sweep, and a soft card or dark page made the track
+   inverted or invisible. The highlight keeps a tint so the edge never goes. */
+@supports (color: color-mix(in oklab, red, blue)) {
+  .skeleton {
+    --skeleton-track: color-mix(in oklab, currentColor 10%, transparent);
+    --skeleton-highlight: color-mix(in oklab, currentColor 4%, transparent);
+  }
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .skeleton {
     animation: actual-skeleton var(--duration-shimmer) ease-in-out infinite;

package/src/css/components/tab.css

@@ -20,6 +20,9 @@
  * Public hooks:
  * --tab-flex
  * --tab-gap
+ * --tab-panel-bg
+ * --tab-panel-pad
+ * --tab-panel-shadow
  *
  * Internal:
  * --tab-edge
@@ -249,3 +252,77 @@
 .tabs > li > .tab {
   inline-size: 100%;
 }
+
+/* Attached horizontal tabs share a surface with their panels. The strip
+   draws the panel's top edge inside its scrollport: no overlapping layers
+   or outside ink that overflow clipping could cut off. Direct children
+   keep an ordinary or nested tablist inside a panel independent. */
+.tabs-attached {
+  --tab-panel-bg: var(--surface-raised);
+  --tab-panel-pad: var(--space-40);
+  --tab-panel-shadow: none;
+
+  display: grid;
+  gap: 0;
+  min-inline-size: 0;
+}
+
+.tabs-attached > .tabs {
+  gap: 0;
+  border: 0;
+  background:
+    linear-gradient(var(--border), var(--border)) bottom / 100% var(--border-width) no-repeat;
+}
+
+.tabs-attached > .tabs > .tab {
+  border: var(--border-width) solid var(--border);
+  background: var(--surface-subtle);
+}
+
+.tabs-attached > .tabs > .tab + .tab {
+  margin-inline-start: calc(-1 * var(--border-width));
+}
+
+.tabs-attached > .tabs > .tab[aria-selected="true"] {
+  background: var(--tab-panel-bg);
+  color: var(--text);
+}
+
+.tabs-attached > .tabs > .tab[aria-selected="true"]::after {
+  /* Keep all four border colors equal: differently colored bottom borders
+     meet the sides diagonally. Erase only the inner bottom edge so the
+     vertical strokes reach the panel with square ends. */
+  inset-block-end: calc(-1 * var(--border-width));
+  block-size: var(--border-width);
+  border: 0;
+  background: var(--tab-panel-bg);
+}
+
+.tabs-attached > .tab-panel {
+  min-inline-size: 0;
+  margin: 0;
+  padding: var(--tab-panel-pad);
+  border: var(--border-width) solid var(--border);
+  border-block-start: 0;
+  background: var(--tab-panel-bg);
+  box-shadow: var(--tab-panel-shadow);
+}
+
+/* Forced colors remove gradients and shadows. A real strip edge and the
+   user's selection colors preserve both the frame and the selected state. */
+@media (forced-colors: active) {
+  .tabs-attached > .tabs {
+    border-block-end: var(--border-width) solid CanvasText;
+  }
+
+  .tabs-attached > .tabs > .tab[aria-selected="true"] {
+    forced-color-adjust: none;
+    border-color: CanvasText;
+    background: Highlight;
+    color: HighlightText;
+  }
+
+  .tabs-attached > .tabs > .tab[aria-selected="true"]::after {
+    content: none;
+  }
+}

package/src/css/components/table.css

@@ -15,6 +15,11 @@
  * Public hooks:
  * --table-min
  * --table-cell-pad
+ *
+ * Theme hooks (unset by default, read with a fallback, so a theme sets them
+ * once on its root and third-party grid bridges can read the same choice):
+ * --table-header-bg
+ * --table-header-fg
  */
 .table-wrap {
   /* Containing block for anything absolutely positioned inside the table —
@@ -65,11 +70,12 @@
 }
 
 .table thead th {
+  color: var(--table-header-fg, var(--text-muted));
   vertical-align: bottom;
 }
 
 .table thead {
-  background: var(--surface-subtle);
+  background: var(--table-header-bg, var(--surface-subtle));
 }
 
 .table tbody tr:hover {

package/src/css/components/timeline.css

@@ -0,0 +1,160 @@
+/*
+ * Timeline — a vertical history of dated events: activity feed, audit log,
+ * order tracking.
+ *
+ * Docs: docs/pages/components/timeline.md
+ *
+ *   <ol class="timeline">
+ *     <li class="success">
+ *       <time datetime="2026-10-18T09:30">Today, 09:30</time>
+ *       Appointment confirmed
+ *     </li>
+ *   </ol>
+ *
+ * Each event draws a dot on a rail; an intent class on the <li> colors it. An
+ * .avatar or an aria-hidden icon written first in the <li> takes the dot's
+ * place. A direct <time> child is the event's dateline. The content stays in
+ * block flow, so a sentence mixing text and links is never split into items.
+ *
+ * Progress through a process is .steps, not a timeline.
+ *
+ * Public hooks:
+ * --timeline-dot-size
+ * --timeline-slot-size
+ * --timeline-gap
+ * --timeline-inline-gap
+ * --timeline-line-size
+ *
+ * Internal:
+ * --timeline-rail-size
+ * --timeline-line-box
+ */
+
+/* Registered so the event's line box computes to a length on the <li> and
+   inherits as one: an avatar slot sets its own font size and line-height, and
+   an unregistered em would resolve against those. Unregistered, the dot still
+   lines up and the slot drifts by the font difference.
+
+   The initial value must be computationally independent: a rem or em there
+   invalidates the whole @property rule, silently. Every <li> sets its own. */
+@property --timeline-line-box {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+.timeline {
+  --timeline-dot-size: 0.625rem;
+  --timeline-slot-size: 1.75rem;
+  --timeline-gap: var(--density-space);
+  --timeline-inline-gap: var(--space-30);
+  --timeline-line-size: var(--border-width);
+  --timeline-rail-size: var(--timeline-dot-size);
+
+  display: grid;
+  /* A long URL or token in an event wraps instead of widening the list. */
+  grid-template-columns: minmax(0, 1fr);
+  /* A list stretched by its parent (a grid cell, an equal-height card) keeps
+     its rhythm instead of spreading the events over the extra height. */
+  align-content: start;
+  gap: var(--timeline-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* One slotted event widens the rail of the whole list, so every line and every
+   text column stays aligned when dots and avatars mix. Without :has() the rail
+   keeps the dot's width and a slot shrinks to it: the degraded list stays
+   aligned and readable, with a dot-sized avatar. */
+.timeline:has(> li > :is(.avatar, [aria-hidden="true"]):first-child) {
+  --timeline-rail-size: var(--timeline-slot-size);
+}
+
+/* The line box is a length, not the unitless ratio: a smaller <time> opening
+   the event keeps the same first line as text would, so the marker centred on
+   it lines up whichever element comes first. */
+.timeline > li {
+  --timeline-line-box: calc(var(--line-height) * 1em);
+
+  position: relative;
+  padding-inline-start: calc(var(--timeline-rail-size) + var(--timeline-inline-gap));
+  line-height: var(--timeline-line-box);
+}
+
+/* The event owns no rhythm beyond its dateline: block children drop their own
+   margins, and an author who needs more spacing composes a .stack inside. */
+.timeline > li > * {
+  margin-block: 0;
+}
+
+.timeline > li > time {
+  display: block;
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+}
+
+.timeline > li::before {
+  content: "";
+  position: absolute;
+  inset-block-start: calc((var(--timeline-line-box) - var(--timeline-dot-size)) / 2);
+  inset-inline-start: calc((var(--timeline-rail-size) - var(--timeline-dot-size)) / 2);
+  inline-size: var(--timeline-dot-size);
+  block-size: var(--timeline-dot-size);
+  border-radius: var(--radius-full);
+  background: var(--intent, var(--neutral));
+}
+
+/* Stated as an undo, not as `:not(:has(...))` on the dot rule: an engine
+   without :has() would drop that whole rule and lose every dot, where this way
+   it only keeps a dot under the slot. */
+.timeline > li:has(> :is(.avatar, [aria-hidden="true"]):first-child)::before {
+  content: none;
+}
+
+/* The segment clears each marker by half the rail, so it never shows through
+   a translucent avatar fill, and a dot in a list widened by a slot keeps the
+   slot's clearance. A border rather than a background: forced colors keep a
+   border and wipe a background. */
+.timeline > li:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  inset-block-start: calc((var(--timeline-line-box) + var(--timeline-rail-size)) / 2);
+  inset-inline-start: calc((var(--timeline-rail-size) - var(--timeline-line-size)) / 2);
+  block-size: calc(100% + var(--timeline-gap) - var(--timeline-rail-size));
+  border-inline-start: var(--timeline-line-size) solid var(--border);
+}
+
+.timeline > li > :is(.avatar, [aria-hidden="true"]):first-child {
+  --avatar-size: var(--timeline-rail-size);
+
+  position: absolute;
+  inset-block-start: calc((var(--timeline-line-box) - var(--timeline-rail-size)) / 2);
+  inset-inline-start: 0;
+}
+
+/* An icon slot gets a disc of the avatar's size, so both slot kinds read as one
+   rail. The event's intent colors the glyph. */
+.timeline > li > [aria-hidden="true"]:first-child:not(.avatar) {
+  display: grid;
+  place-items: center;
+  inline-size: var(--timeline-rail-size);
+  block-size: var(--timeline-rail-size);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-full);
+  background: var(--surface-opaque);
+  color: var(--intent, var(--text-muted));
+  font-size: var(--font-size-sm);
+  line-height: 1;
+}
+
+.timeline > li > [aria-hidden="true"]:first-child:not(.avatar) > svg {
+  inline-size: 1em;
+  block-size: 1em;
+}
+
+@media (forced-colors: active) {
+  .timeline > li::before {
+    background: CanvasText;
+  }
+}

package/src/css/core/base.css

@@ -22,7 +22,7 @@ body {
    opts in by setting --link. Because this is an element selector, any component
    rule that colors its own anchors still wins. */
 a {
-  color: var(--link, inherit);
+  color: var(--surface-link, var(--link, inherit));
   text-underline-offset: 0.18em;
 }
 
@@ -91,4 +91,6 @@ small {
 ::selection {
   background: var(--selection-bg, var(--primary));
   color: var(--selection-fg, var(--primary-fg));
+  /* SVG text paints with fill, including labels with an explicit fill. */
+  fill: currentColor;
 }

package/src/css/core/theme.css

@@ -10,7 +10,7 @@
  * Exception: --surface-opaque and --surface-solid-fg are public; a theme with
  * translucent surfaces overrides them with opaque values. --border-control is
  * public too: the resting edge of a neutral control, apart from structural
- * separators.
+ * separators. --control-default-bg is the inherited resting field fill.
  * Internal: --hgroup-gap.
  */
 :root {
@@ -103,6 +103,8 @@
    their own tokens instead of inheriting :root's resolved values. */
 :root,
 [data-theme] {
+  /* A painted parent's link context must not cross into a new palette. */
+  --surface-link: initial;
   --heading: var(--text);
   --selection-bg: var(--primary);
   --selection-fg: var(--primary-fg);
@@ -115,6 +117,9 @@
   /* The edge that tells a control apart from the surface, where --border only
      separates surfaces: fields, choices, switch, OTP cells, choice cards. */
   --border-control: var(--border);
+  /* Inherited resting field fill, shared with external control bridges.
+     Component state rules still own readonly, disabled and invalid fills. */
+  --control-default-bg: var(--surface);
 }
 
 /* Soft foreground hooks — the soft ink is the intent rebated toward the local

package/src/css/core/tokens.css

@@ -125,14 +125,14 @@
      Like --control-size, it is a scale plus a selection: themes set the
      -sm/-md/-lg steps, and :root, .sm/.lg and .compact/.spacious (variants.css)
      pick one. A theme that wrote --control-pad-x itself would be overwritten
-     by every size and density boundary — bootstrap-v6's 12px became a wider
-     13px inside .compact. The selection is rebound at each boundary because a
+     by every size and density boundary — a theme's 12px became a wider 13px
+     inside .compact. The selection is rebound at each boundary because a
      var() inside a custom property resolves where it is declared.
 
      The boundaries also write --control-step-sm/-md/-lg: which step is
      selected, as 0/1 weights that mean the same under every theme. A theme
      that sets its own steps rebuilds the selection from them in its own block
-     (bootstrap-v6.css), so a nested island of it reads its steps without
+     (docs: Tokens · Controls), so a nested island of it reads its steps without
      resetting the density it sits in. Never rebind on every [data-theme]: a
      palette-only island then became a geometry boundary that an inherited
      --control-size or --control-pad-x no longer crossed. */

package/src/css/forms/choice-card.css

@@ -225,14 +225,17 @@
   clip-path: circle(0 at var(--choice-chip-dot));
 }
 
-/* The check keeps the card's scale-in, in flow ahead of the label. */
+/* The check keeps the card's scale-in, in flow ahead of the label. It is ink
+   on the chip, not a fill: a theme whose selected fill cannot be text (a
+   yellow or lime accent) lends its selected ink here, as for tabs and steps.
+   It outranks explicit intents too: their pastel fills are still not ink. */
 .choice-card.chip::after {
   order: -1;
   flex: none;
   align-self: center;
   margin-block: 0;
   margin-inline: 0 0.375em;
-  background: var(--intent, var(--state-selected));
+  background: var(--state-selected-text, var(--intent, var(--state-selected)));
   -webkit-mask-size: contain;
   mask-size: contain;
 }

package/src/css/forms/control.css

@@ -20,8 +20,10 @@
  * Public hooks:
  * --control-border
  * --control-bg
+ * --control-default-bg
  * --control-fg
  * --control-cursor
+ * --control-shadow
  * --control-border-block-end-color
  * --control-border-block-end-width
  * --control-hover-border (input and textarea)
@@ -31,7 +33,7 @@
 .textarea,
 .select {
   --control-border: var(--border-control);
-  --control-bg: var(--surface);
+  --control-bg: var(--control-default-bg, var(--surface));
   --control-fg: var(--text);
   --control-cursor: auto;
 
@@ -49,6 +51,11 @@
   border-radius: var(--radius);
   background: var(--control-bg);
   color: var(--control-fg);
+  /* why: an unset hook, so a theme can give every field a resting elevation
+     that focus keeps (see the focus rule). The fallback is none, the same as
+     the focus rule's: a transparent 0 0 shadow here made focus transition
+     between two values and expose a phantom shadow mid-way. */
+  box-shadow: var(--control-shadow, none);
   font-size: var(--control-font-size);
   cursor: var(--control-cursor);
   /* No outline: none here — the core :focus fallback must survive for browsers
@@ -81,13 +88,15 @@
    the control's border box (any smaller offset bleeds outward), so it covers
    the border, never touches a .join neighbour or a scrollport edge, and needs
    no group treatment. Width follows --focus-ring-width, including its
-   prefers-contrast step. Border = shape and validation, outline = focus. */
+   prefers-contrast step. Border = shape and validation, outline = focus.
+   The box-shadow reset drops any halo but keeps the field's own elevation:
+   a plain none erased --control-shadow on keyboard focus. */
 .input:focus-visible:not(:disabled),
 .textarea:focus-visible:not(:disabled),
 .select:focus-visible:not(:disabled) {
   outline: var(--focus-ring-width) solid var(--form-invalid-border, var(--focus));
   outline-offset: calc(var(--focus-ring-width) * -1);
-  box-shadow: none;
+  box-shadow: var(--control-shadow, none);
 }
 
 .input[readonly],

package/src/css/forms/custom-select.css

@@ -38,7 +38,7 @@
         --control-bg: var(--surface-raised);
         outline: var(--focus-ring-width) solid var(--form-invalid-border, var(--focus));
         outline-offset: calc(var(--focus-ring-width) * -1);
-        box-shadow: none;
+        box-shadow: var(--control-shadow, none);
       }
 
       &::picker-icon {