@attrus-ds/core 1.0.13 → 1.0.17

package/dist/css/components/buttons.css

@@ -39,9 +39,9 @@
   flex-shrink: 0;
 
   /* Box — default size = md (40px tall) */
-  height: 40px;
+  height: var(--control-h-md);
   padding: 0 var(--space-5);
-  border: 1px solid transparent;
+  border: var(--border-hairline) solid transparent;
   border-radius: var(--radius-pill);
 
   /* Type */
@@ -93,7 +93,7 @@
    2. SIZES
    ---------------------------------------------------------------- */
 .btn-xs {
-  height: 24px;
+  height: var(--control-h-xs);
   padding: 0 var(--space-3);
   font-size: var(--fs-sm);
   gap: var(--space-1);
@@ -101,16 +101,16 @@
 .btn-xs > i, .btn-xs > svg, .btn-xs > svg { width: var(--icon-xs); height: var(--icon-xs); }
 
 .btn-sm {
-  height: 32px;
+  height: var(--control-h-sm);
   padding: 0 var(--space-4);
   font-size: var(--fs-md);
 }
 .btn-sm > i, .btn-sm > svg, .btn-sm > svg { width: var(--icon-xs); height: var(--icon-xs); }
 
-/* default = md (40px) — defined in .btn */
+/* default = md — .btn reads var(--control-h-md) */
 
 .btn-lg {
-  height: 48px;
+  height: var(--control-h-lg);
   padding: 0 var(--space-6);
   font-size: var(--fs-base);
   gap: var(--space-3);
@@ -122,10 +122,10 @@
    3. ICON-ONLY MODIFIER
    ---------------------------------------------------------------- */
 .btn-icon { padding: 0; aspect-ratio: 1 / 1; }
-.btn-icon.btn-xs { width: 24px; }
-.btn-icon.btn-sm { width: 32px; }
-.btn-icon          { width: 40px; }
-.btn-icon.btn-lg { width: 48px; }
+.btn-icon.btn-xs { width: var(--control-h-xs); }
+.btn-icon.btn-sm { width: var(--control-h-sm); }
+.btn-icon          { width: var(--control-h-md); }
+.btn-icon.btn-lg { width: var(--control-h-lg); }
 
 
 /* ----------------------------------------------------------------
@@ -199,6 +199,21 @@
 .btn-danger:focus-visible { box-shadow: var(--shadow-focus-danger); }
 
 
+/* DANGER GHOST — destructive inside chrome (toolbars, row actions).
+   The outline variant carries a border and its own surface, which is right for
+   the primary action of a dialog but too heavy for a bar: two framed buttons on
+   a 52px toolbar outweigh the data below them. This keeps the danger colour as
+   the only signal. */
+.btn-danger-ghost {
+  background: transparent;
+  color: var(--color-danger-500);
+  border-color: transparent;
+}
+.btn-danger-ghost:hover { background: var(--color-feedback-danger-background); color: var(--color-danger-600); }
+.btn-danger-ghost:active { background: color-mix(in srgb, var(--color-danger-500) 16%, transparent); }
+.btn-danger-ghost:focus-visible { box-shadow: var(--shadow-focus-danger); }
+.btn-danger-ghost[disabled] { color: var(--color-foreground-disabled); background: transparent; }
+
 /* DANGER OUTLINE — destructive contextual */
 .btn-danger-outline {
   background: var(--color-background-surface);
@@ -264,21 +279,37 @@
 .btn.is-loading::after {
   content: "";
   position: absolute;
-  top: 50%; left: 50%;
+  /* Centred with calc, not top:50% + negative margin: a blanket `margin: 0`
+     from page or reset CSS silently kills the offset and drops the spinner
+     below centre, while the percentage still resolves. calc cannot be reset
+     away, and it avoids transform, which the spin animation owns. */
+  /* Optical, not geometric: the ring's transparent top segment shifts the
+     visible arc's mass down-left of the box centre, so the box is nudged back
+     by half a border width. box-sizing keeps the 2px border inside the
+     declared size, otherwise the circle is 18px in a 14px slot. */
+  top: calc(50% - (var(--icon-sm) / 2) - 1px);
+  left: calc(50% - (var(--icon-sm) / 2) + 1px);
+  margin: 0;
   width: var(--icon-sm);
   height: var(--icon-sm);
-  margin: calc(var(--icon-sm) / -2) 0 0 calc(var(--icon-sm) / -2);
+  box-sizing: border-box;
   border: 2px solid currentColor;
   border-top-color: transparent;
   border-radius: var(--radius-pill);
-  animation: btn-spin var(--duration-slower) linear infinite;
-  /* Re-introduce currentColor where the variant set it; ::after inherits the parent's color BEFORE the !important override */
+  animation: btn-spin 0.6s linear infinite;
   color: var(--color-foreground-default);
 }
+
 .btn-primary.is-loading::after,
 .btn-danger.is-loading::after,
 .btn-success.is-loading::after { color: var(--color-pure-white); }
 .btn-tertiary.is-loading::after { color: var(--color-foreground-default); }
+/* On a dark surface the spinner has to invert with the button: the default ring
+   is --color-foreground-default, which on an inverse-tinted fill is nearly the
+   same value and the spinner disappears. */
+.btn.on-inverse.is-loading::after,
+.btn-inverse.is-loading::after { color: var(--color-foreground-inverse-default); }
+.btn-inverse.is-loading::after { color: var(--color-brand-text-on-light); }
 
 @keyframes btn-spin {
   to { transform: rotate(360deg); }
@@ -296,6 +327,6 @@
 }
 .btn-group .btn:first-child { border-top-left-radius: var(--radius-pill); border-bottom-left-radius: var(--radius-pill); }
 .btn-group .btn:last-child  { border-top-right-radius: var(--radius-pill); border-bottom-right-radius: var(--radius-pill); }
-.btn-group .btn + .btn { margin-left: -1px; }
+.btn-group .btn + .btn { margin-left: calc(var(--border-hairline) * -1); }
 .btn-group .btn:focus-visible,
 .btn-group .btn:hover { z-index: 1; }

package/dist/css/components/callout.css

@@ -44,13 +44,34 @@
   gap: var(--space-3);
   padding: var(--space-4) var(--space-5);
   border-radius: var(--radius-md);
-  background: color-mix(in srgb, var(--callout-tint) 8%, var(--color-background-surface));
-  border: 1px solid color-mix(in srgb, var(--callout-tint) 22%, transparent);
+  /* Quieter by default: the tint carries the tone and the hairline just closes
+     the shape. 22% read as a hard rule around a note that should recede — the
+     icon and the copy are what should be seen first. */
+  background: color-mix(in srgb, var(--callout-tint) 5%, var(--color-background-surface));
+  border: 1px solid color-mix(in srgb, var(--callout-tint) 12%, transparent);
 }
 
+.callout-icon > svg,
+.callout-icon > i,
+.callout > svg,
+.callout > i {
+  /* Lucide emits a 24px svg with no intrinsic size; without this it overflows
+     the 18px slot whether it IS the slot or sits inside one. */
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+.callout-sm .callout-icon > svg,
+.callout-sm .callout-icon > i { width: 16px; height: 16px; }
+
 .callout > i,
 .callout > svg,
 .callout-icon {
+  flex-shrink: 0;
+  align-self: flex-start;
+  /* Optical: pull the 18px glyph onto the cap line of the first row of text
+     (line-height 15.6px), rather than centring it on the whole block. */
+  margin-top: -1px;
   width: 18px;
   height: 18px;
   flex-shrink: 0;
@@ -112,13 +133,22 @@
    .btn-ghost → picks up the tone for text/hover.
    .btn-danger / .btn-primary stay canonical (solid) for strong/destructive. */
 .callout-actions .btn-secondary {
-  background: color-mix(in srgb, var(--callout-tint) 14%, var(--color-background-surface));
-  border-color: color-mix(in srgb, var(--callout-tint) 34%, transparent);
-  color: var(--callout-fg);
+  /* Kept in step with the box (5% / 12%): at 14% fill and a 34% border the
+     action was louder than the note holding it. The fill is what makes the
+     button findable here; the border only needs to close the shape. */
+  background: color-mix(in srgb, var(--callout-tint) 10%, var(--color-background-surface));
+  border-color: color-mix(in srgb, var(--callout-tint) 18%, transparent);
+  /* Label reads as text, not as tone. It used to inherit --callout-fg (sky by
+     default), which put a blue label at ~4.3:1 on a 10% fill — the box already
+     says what kind of note this is, so the action only has to be readable.
+     Tonal variants below re-assert their own fg, where the colour IS the message. */
+  color: var(--color-foreground-default);
 }
 .callout-actions .btn-secondary:hover {
-  background: color-mix(in srgb, var(--callout-tint) 22%, var(--color-background-surface));
-  border-color: color-mix(in srgb, var(--callout-tint) 50%, transparent);
+  /* Hover moves the fill, not the border — a border that jumps 18→50% reads as
+     the control changing shape rather than responding. */
+  background: color-mix(in srgb, var(--callout-tint) 16%, var(--color-background-surface));
+  border-color: color-mix(in srgb, var(--callout-tint) 28%, transparent);
 }
 .callout-actions .btn-ghost { color: var(--callout-fg); }
 .callout-actions .btn-ghost:hover { background: color-mix(in srgb, var(--callout-tint) 12%, transparent); color: var(--callout-fg); }
@@ -150,6 +180,12 @@
 .callout-danger  { --callout-tint: var(--color-danger-500);  --callout-fg: var(--color-feedback-danger-foreground); }
 .callout-neutral { --callout-tint: var(--color-neutral-500);  --callout-fg: var(--color-foreground-muted); }
 
+/* Tonal actions: on warn / success / danger the hue is the message, so the label
+   takes the tone back. Neutral and info keep the plain text colour. */
+.callout-warn .callout-actions .btn-secondary,
+.callout-success .callout-actions .btn-secondary,
+.callout-danger .callout-actions .btn-secondary { color: var(--callout-fg); }
+
 /* ---- compact size ---- */
 .callout-sm { padding: var(--space-3) var(--space-4); gap: var(--space-2-5); }
 .callout-sm > i, .callout-sm > svg, .callout-sm .callout-icon { width: 16px; height: 16px; }
@@ -172,7 +208,7 @@
 .callout-bar .callout-title { font-size: var(--fs-sm); }
 
 /* rounded alert bar (when not edge-to-edge) */
-.callout-bar.callout-rounded { border-radius: var(--radius-md); border-left-width: 3px; border-top: 1px solid color-mix(in srgb, var(--callout-tint) 22%, transparent); border-right: 1px solid color-mix(in srgb, var(--callout-tint) 22%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--callout-tint) 22%, transparent); }
+.callout-bar.callout-rounded { border-radius: var(--radius-md); border-left-width: 3px; border-top: 1px solid color-mix(in srgb, var(--callout-tint) 12%, transparent); border-right: 1px solid color-mix(in srgb, var(--callout-tint) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--callout-tint) 12%, transparent); }
 
 /* ---- Inline: content-sized, single-line (badges, hero notices) ---- */
 .callout-inline { display: inline-flex; width: auto; align-items: center; }
@@ -194,3 +230,4 @@
 .callout-danger.on-inverse  { --callout-fg-inv: var(--color-danger-300); }
 .callout-info.on-inverse    { --callout-fg-inv: var(--color-brand-accent-300); }
 .callout-neutral.on-inverse { --callout-fg-inv: var(--color-foreground-inverse-muted); }
+

package/dist/css/components/combobox.css

@@ -17,11 +17,11 @@
   align-items: center;
   gap: var(--space-3);
   width: 100%;
-  height: 40px;
+  height: var(--control-h-md);
   padding: 0 var(--space-3) 0 var(--space-4);
   background: var(--color-background-surface);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-sm);
+  border: var(--border-hairline) solid var(--color-border-default);
+  border-radius: var(--shape-control);
   font-family: var(--font-sans);
   font-size: var(--fs-sm);
   font-weight: var(--w-regular);
@@ -53,7 +53,7 @@
   font-weight: var(--w-regular);
 }
 .combobox-chevron {
-  width: 16px; height: 16px;
+  width: var(--icon-sm); height: var(--icon-sm);
   stroke-width: var(--icon-stroke);
   color: var(--color-foreground-muted);
   flex-shrink: 0;
@@ -63,7 +63,7 @@
 
 /* Leading icon variant */
 .combobox-trigger-icon {
-  width: 16px; height: 16px;
+  width: var(--icon-sm); height: var(--icon-sm);
   stroke-width: var(--icon-stroke);
   color: var(--color-foreground-secondary);
   flex-shrink: 0;
@@ -71,7 +71,7 @@
 
 /* Avatar inside trigger (counterparty selector pattern) */
 .combobox-avatar {
-  width: 24px; height: 24px;
+  width: var(--control-h-xs); height: var(--control-h-xs);
   border-radius: var(--radius-pill);
   background: var(--color-brand-subtle-solid);
   color: var(--color-brand-text-on-light);
@@ -87,14 +87,27 @@
   position: absolute;
   top: calc(100% + var(--space-2));
   left: 0;
-  right: 0;
-  z-index: 7000;
+  /* Trigger width is the FLOOR, not the ceiling. Pinning both edges made the
+     popover exactly as wide as the trigger, so a 50px chip crushed its own
+     options with nothing to rescue them. min-width keeps the form-field look
+     (popover aligns with the field) while letting content set the real width. */
+  min-width: 100%;
+  width: max-content;
+  max-width: min(420px, calc(100vw - var(--space-6)));
+  /* Layer 9200 — ABOVE the scrim (9000) and the drawer panel (9100). A combobox
+     opened inside a drawer or modal must render over that surface, not behind
+     its veil; at 7000 the popover was trapped under the scrim in exactly the
+     case where a picker is most needed. Tooltip 8000 sits below for the same
+     reason it sits below a modal: it annotates, it does not collect input. */
+  z-index: 9200;
   background: var(--color-background-surface);
-  border: 1px solid var(--color-border-default);
+  border: var(--border-hairline) solid var(--color-border-default);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-xl);
   display: none;
   flex-direction: column;
+  /* ~7 rows before the list scrolls. Past that the user scans instead of
+     reading, and the popover starts covering the field it belongs to. */
   max-height: 320px;
 }
 .combobox.is-open .combobox-popover { display: flex; }
@@ -103,16 +116,16 @@
 .combobox-search {
   position: relative;
   padding: var(--space-3);
-  border-bottom: 1px solid var(--color-border-subtle);
+  border-bottom: var(--border-hairline) solid var(--color-border-subtle);
   flex-shrink: 0;
 }
 .combobox-search input {
   width: 100%;
   box-sizing: border-box;
-  height: 32px;
+  height: var(--control-h-sm);
   padding: 0 var(--space-3) 0 var(--space-7);
   background: var(--color-background-canvas);
-  border: 1px solid var(--color-border-default);
+  border: var(--border-hairline) solid var(--color-border-default);
   border-radius: var(--radius-xs);
   font-family: var(--font-sans);
   font-size: var(--fs-sm);
@@ -129,7 +142,7 @@
   left: calc(var(--space-3) + var(--space-2));
   top: 50%;
   transform: translateY(-50%);
-  width: 14px; height: 14px;
+  width: var(--icon-xs); height: var(--icon-xs);
   stroke-width: var(--icon-stroke);
   color: var(--color-foreground-muted);
   pointer-events: none;
@@ -203,7 +216,7 @@
 }
 
 .combobox-option-check {
-  width: 16px; height: 16px;
+  width: var(--icon-sm); height: var(--icon-sm);
   stroke-width: 2.4;
   color: var(--color-foreground-accent);
   flex-shrink: 0;
@@ -236,7 +249,7 @@
 /* Footer (e.g. "Create new …") */
 .combobox-footer {
   padding: var(--space-2);
-  border-top: 1px solid var(--color-border-subtle);
+  border-top: var(--border-hairline) solid var(--color-border-subtle);
   flex-shrink: 0;
 }
 .combobox-footer-action {
@@ -249,7 +262,7 @@
   margin-top: 0;
   width: calc(100% - var(--space-4));
   background: var(--color-background-surface);
-  border: 1px solid var(--color-border-default);
+  border: var(--border-hairline) solid var(--color-border-default);
   border-radius: var(--radius-sm);
   font-family: var(--font-sans);
   font-size: var(--fs-sm);
@@ -273,13 +286,13 @@
 }
 .combobox-footer-action svg,
 .combobox-footer-action i {
-  width: 14px;
-  height: 14px;
+  width: var(--icon-xs);
+  height: var(--icon-xs);
   stroke-width: var(--icon-stroke);
   color: var(--color-foreground-secondary);
 }
 .combobox-footer-action i, .combobox-footer-action svg {
-  width: 16px; height: 16px;
+  width: var(--icon-sm); height: var(--icon-sm);
   stroke-width: var(--icon-stroke);
 }
 
@@ -305,15 +318,15 @@
    foot meta (below list). Exposed via Combobox props
    `filters` / `meta` / `footMeta`.
    ---------------------------------------------------------------- */
-.combobox-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--color-border-subtle); }
-.combobox-filter-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-3); background: var(--color-background-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--w-regular); color: var(--color-foreground-secondary); cursor: pointer; transition: var(--transition-fast); }
+.combobox-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); border-bottom: var(--border-hairline) solid var(--color-border-subtle); }
+.combobox-filter-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-background-surface); border: var(--border-hairline) solid var(--color-border-default); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--w-regular); color: var(--color-foreground-secondary); cursor: pointer; transition: var(--transition-fast); }
 .combobox-filter-chip:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); color: var(--color-foreground-default); }
 .combobox-filter-chip.is-active { background: var(--color-background-selected); border-color: var(--color-brand-border); color: var(--color-foreground-brand); font-weight: var(--w-regular); }
 .combobox-filter-chip .count { font-family: var(--font-mono);
   font-size-adjust: var(--font-mono-adjust); font-size: var(--fs-xxs); color: var(--color-foreground-muted); }
 .combobox-filter-chip.is-active .count { color: var(--color-foreground-brand); }
-.combobox-meta { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--fs-xxs); font-weight: var(--w-regular); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); border-bottom: 1px solid var(--color-border-subtle); }
-.combobox-foot-meta { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); color: var(--color-foreground-muted); border-top: 1px solid var(--color-border-subtle); }
+.combobox-meta { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--fs-xxs); font-weight: var(--w-regular); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); border-bottom: var(--border-hairline) solid var(--color-border-subtle); }
+.combobox-foot-meta { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); color: var(--color-foreground-muted); border-top: var(--border-hairline) solid var(--color-border-subtle); }
 
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {

package/dist/css/components/inputs.css

@@ -100,7 +100,7 @@
   /* Box — default size = md (40px tall) */
   width: 100%;
   box-sizing: border-box;
-  height: 40px;
+  height: var(--control-h-md);
   padding: 0 var(--space-4);
   border: 1px solid var(--color-border-default);
   border-radius: var(--shape-control);
@@ -170,13 +170,13 @@ textarea.input {
    3. SIZES
    ---------------------------------------------------------------- */
 .input-sm {
-  height: 32px;
+  height: var(--control-h-sm);
   padding: 0 var(--space-3);
   font-size: var(--fs-sm);
   border-radius: var(--radius-xs);
 }
 .input-lg {
-  height: 48px;
+  height: var(--control-h-lg);
   padding: 0 var(--space-5);
   font-size: var(--fs-lg);
   border-radius: var(--radius-md);
@@ -239,7 +239,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   display: flex;
   align-items: stretch;
   width: 100%;
-  height: 40px;
+  height: var(--control-h-md);
   border: 1px solid var(--color-border-default);
   border-radius: var(--shape-control);
   background: var(--color-background-surface);
@@ -289,7 +289,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   display: flex;
   align-items: center;
   gap: var(--space-3);
-  height: 40px;
+  height: var(--control-h-md);
   padding: 0 var(--space-4);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-pill);
@@ -299,6 +299,17 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
     box-shadow var(--transition-fast),
     background var(--transition-fast);
 }
+/* Dense variant. The default 40px field is right on a page; inside a 52px
+   toolbar beside 32px buttons it reads as the odd one out, and there was no
+   modifier to reach for — so callers either lived with the mismatch or set a
+   height inline. */
+.pill-search-sm {
+  height: var(--control-h-sm);
+  padding: 0 var(--space-3);
+  gap: var(--space-2);
+}
+.pill-search-sm > input { font-size: var(--fs-sm); }
+.pill-search-sm > i, .pill-search-sm > svg { width: var(--icon-xs); height: var(--icon-xs); }
 .pill-search:hover { border-color: var(--color-border-strong); }
 .pill-search:focus-within {
   border-color: var(--color-border-focus);
@@ -363,10 +374,10 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 .chips {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: var(--space-2-5);
   align-items: center;
-  min-height: 40px;
-  padding: 5px 8px;
+  min-height: var(--control-h-md);
+  padding: var(--space-2-5) var(--space-3);
   border: 1px solid var(--color-border-default);
   border-radius: var(--shape-control);
   background: var(--color-background-surface);
@@ -382,7 +393,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 .chip {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--space-2);
   height: 26px;
   padding: 0 4px 0 10px;
   background: var(--color-background-subtle);
@@ -417,7 +428,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 .chip-x:hover { background: var(--color-border-default); color: var(--color-foreground-default); }
 .chips > input {
   flex: 1;
-  min-width: 80px;
+  min-width: calc(var(--control-h-md) * 2);
   height: 26px;
   border: 0;
   outline: none;
@@ -464,8 +475,8 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
    ---------------------------------------------------------------- */
 .otp { display: inline-flex; gap: var(--space-2); }
 .otp > input {
-  width: 40px;
-  height: 48px;
+  width: var(--control-h-md);
+  height: var(--control-h-lg);
   text-align: center;
   font-family: var(--font-mono);
   font-size-adjust: var(--font-mono-adjust);
@@ -494,6 +505,9 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 }
 .switch-track {
   position: relative;
+  /* Literal on purpose: track 20 − thumb 16 − inset 2×2 centres the knob exactly.
+     These are internal geometry, not icon sizes — mapping them to --icon-* broke
+     the vertical centring when the token did not happen to equal 20px. */
   width: 36px;
   height: 20px;
   border-radius: var(--radius-pill);
@@ -553,6 +567,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 }
 .check input { position: absolute; opacity: 0; pointer-events: none; }
 .check-box {
+  position: relative;
   width: 18px;
   height: 18px;
   border: 1px solid var(--color-border-strong);
@@ -568,12 +583,28 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
     border-color var(--transition-fast),
     box-shadow var(--transition-fast);
 }
-.check-box svg { width: 14px; height: 14px; stroke-width: 3; opacity: 0; transform: scale(0.8); transition: opacity var(--transition-fast), transform var(--transition-fast); }
+.check-box svg { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 3; opacity: 0; transform: scale(0.8); transition: opacity var(--transition-fast), transform var(--transition-fast); }
 .check input:checked ~ .check-box {
   background: var(--color-brand-solid);
   border-color: var(--color-brand-solid);
 }
 .check input:checked ~ .check-box svg { opacity: 1; transform: scale(1); }
+/* CSS-drawn tick — used when no <svg> is supplied, so the component does not
+   depend on consumer markup to show its own state. */
+.check-box::before {
+  content: '';
+  position: absolute;
+  width: 4px; height: 7.5px;
+  border: solid var(--color-foreground-on-solid);
+  border-width: 0 1.75px 1.75px 0;
+  transform: rotate(45deg) scale(0.8);
+  margin-top: -1px;
+  opacity: 0;
+  transition: opacity var(--transition-fast), transform var(--transition-fast);
+}
+.check input:checked ~ .check-box::before { opacity: 1; transform: rotate(45deg) scale(1); }
+.check-box:has(svg)::before,
+.check input:indeterminate ~ .check-box::before { content: none; }
 .check input:indeterminate ~ .check-box {
   background: var(--color-brand-solid);
   border-color: var(--color-brand-solid);
@@ -668,7 +699,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   justify-content: space-between;
   gap: var(--space-3);
   width: 100%;
-  height: 40px;
+  height: var(--control-h-md);
   padding: 0 var(--space-4);
   border: 1px solid var(--color-border-default);
   border-radius: var(--shape-control);
@@ -804,8 +835,8 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 
 .file-icon {
   position: relative;
-  width: 40px;
-  height: 48px;
+  width: var(--control-h-md);
+  height: var(--control-h-lg);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -826,7 +857,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   transform: translateX(-50%);
   font-family: var(--font-mono);
   font-size-adjust: var(--font-mono-adjust);
-  font-size: 8px;
+  font-size: var(--fs-xxs);
   font-weight: var(--w-bold);
   letter-spacing: 0.04em;
   line-height: 1;
@@ -840,7 +871,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--space-1);
 }
 .file-name {
   font-family: var(--font-sans);
@@ -877,7 +908,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
 .file-status {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--space-2);
   padding: 3px var(--space-2);
   border-radius: var(--radius-pill);
   font-family: var(--font-mono);
@@ -906,7 +937,7 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
   transition: background var(--transition-fast), color var(--transition-fast);
 }
 .file-remove:hover { background: var(--color-background-subtle); color: var(--color-foreground-default); }
-.file-remove > svg, .file-remove > i { width: 14px; height: 14px; }
+.file-remove > svg, .file-remove > i { width: var(--icon-xs); height: var(--icon-xs); }
 
 
 /* ----------------------------------------------------------------
@@ -961,8 +992,10 @@ textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-
    ---------------------------------------------------------------- */
 /* Field + selection controls on a permanently-dark surface (hero, onboarding).
    Without these, every dark surface had to override colour inline. */
-.field.on-inverse .field-label { color: var(--color-foreground-inverse-default); }
-.field.on-inverse .field-help  { color: var(--color-foreground-inverse-muted); }
+/* The TSX emits a bare <label> element and a .help class — there is no
+   .field-label / .field-help vocabulary, so target what actually ships. */
+.field.on-inverse > label { color: var(--color-foreground-inverse-default); }
+.field.on-inverse .help  { color: var(--color-foreground-inverse-muted); }
 
 .switch.on-inverse .switch-track {
   background: color-mix(in srgb, var(--color-pure-white) 18%, transparent);

package/dist/css/components/overlays.css

@@ -284,7 +284,7 @@
 /* Mobile: footer actions stack full-width (doc §Header & Footer, variant 7) */
 @media (max-width: 560px) {
   .drawer-footer { flex-direction: column; align-items: stretch; gap: var(--space-2); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
-  .drawer-footer .btn { width: 100%; justify-content: center; }
+  .drawer-footer .btn { width: 100%; justify-content: center; flex-shrink: 0; }
   .drawer-footer-aux { text-align: center; margin-bottom: var(--space-1); }
 }