barua-ui 0.12.1 → 0.13.0

package/README.md

@@ -77,7 +77,8 @@ before first paint.
 - **Provider** — `BaruaProvider` (theme / `accent` re-tint / Liquid Glass
   `glass` mode / Tier-2 `refraction`), `ThemeScript`, `useToast`
 - **Actions** — `Button`, `ButtonLink`, `Fab`, `Toolbar`
-- **Forms** — `Field`, `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`,
+- **Forms** — `Field`, `Input`, `Textarea`, `NativeSelect` (the platform
+  control; product surfaces use `Dropdown variant="select"`), `Checkbox`, `Radio`,
   `Switch`, `Slider`, `OtpInput`
 - **Content** — `Card` family (incl. `StoryCard`, flush iOS-Settings groups),
   `List`/`ListItem`, `Badge`, `Tag`, `Chip`, `Avatar`(+`AvatarGroup`),

package/css/barua.css

@@ -26,3 +26,4 @@
 @import url("components/control-center.css");
 @import url("components/marketing.css");
 @import url("liquid.css");
+@import url("components/forced-colors.css");

package/css/base.css

@@ -116,17 +116,23 @@
   }
 
   /* ---- Focus ring (Focus Ring component) -------------------------------- */
-  :focus-visible {
-    outline: none;
-    box-shadow: var(--b-focus-ring);
-    border-radius: var(--b-radius-xs);
-  }
-  .b-focus-ring:focus-visible,
-  button:focus-visible, [href]:focus-visible,
-  input:focus-visible, select:focus-visible, textarea:focus-visible,
-  [tabindex]:focus-visible {
-    outline: none;
-    box-shadow: var(--b-focus-ring);
+  /* One ring for everything that can take focus, on the outline channel, at
+     zero specificity so a component can restyle it and nothing can cancel it
+     by accident: the old box-shadow ring was silently defeated by any
+     component that drew its own shadow. */
+  :where(:focus-visible, .b-focus-ring:focus-visible) {
+    outline: var(--b-focus-ring);
+    outline-offset: var(--b-focus-ring-offset);
+  }
+  /* Inputs whose host draws the ring for them. */
+  :where(.b-cmdk__input, .b-multiselect input):focus-visible { outline: none; }
+  /* Rows flush inside a clipping container: an outline outside the box is
+     cut off by the container's overflow, so these pull it inward. */
+  :where(.b-list-item, .b-disclosure > summary, .b-tab, .b-segmented__item,
+         .b-btn-group > .b-btn, .b-menu__item, .b-sidebar__item, .b-rail__item,
+         .b-bottomnav__item, .b-cmdk__item, .b-stepper-input :is(button, input),
+         .b-action-sheet__group button, .b-swipe__actions button) {
+    --b-focus-ring-offset: calc(-1 * var(--b-focus-ring-width));
   }
 
   /* ---- Interaction-state conventions ------------------------------------
@@ -138,11 +144,15 @@
        .is-dragging              — mid-drag
        :disabled / .is-disabled  — non-interactive
   ------------------------------------------------------------------------- */
-  :disabled, .is-disabled {
+  /* Dim the control, never the group: a disabled <fieldset> already makes
+     every control inside it match :disabled, so dimming the group too stacked
+     0.4 x 0.4 = 0.16 and greyed the <legend>, which HTML keeps enabled. */
+  :disabled:not(fieldset), .is-disabled {
     opacity: var(--b-opacity-disabled);
     cursor: not-allowed !important;
     pointer-events: var(--b-disabled-pointer, auto);
   }
+  fieldset:disabled { cursor: not-allowed; }
   .is-dragging { opacity: 0.55; cursor: grabbing !important; }
 
   [draggable="true"] { cursor: grab; }

package/css/components/actions.css

@@ -13,14 +13,18 @@
     justify-content: center;
     gap: var(--b-space-2);
     height: var(--b-control-h-md);
-    padding-inline: var(--b-space-4);
+    /* The border is real and transparent, the padding pays for it, and the
+       rendered box does not move by a pixel. Windows High Contrast strips
+       backgrounds and shadows; a button that was only a fill became bare
+       words on the page. */
+    padding-inline: calc(var(--b-space-4) - 1px);
     font-size: var(--b-text-subheadline);
     font-weight: var(--b-weight-semibold);
     line-height: 1;
     white-space: nowrap;
     color: var(--b-text);
     background: var(--b-fill-secondary);
-    border: none;
+    border: 1px solid transparent;
     border-radius: var(--b-radius-md);
     cursor: pointer;
     user-select: none;
@@ -37,11 +41,11 @@
   /* Variants */
   .b-btn--primary {
     color: var(--b-color-on-accent);
-    background: var(--b-color-accent);
+    background: var(--b-color-accent-fill);
     box-shadow: var(--b-shadow-xs);
   }
-  .b-btn--primary:hover { background: var(--b-color-accent-hover); }
-  .b-btn--primary.is-active { background: var(--b-color-accent-active); }
+  .b-btn--primary:hover { background: var(--b-color-accent-fill-hover); }
+  .b-btn--primary.is-active { background: var(--b-color-accent-fill-active); }
 
   .b-btn--tinted {
     color: var(--b-color-accent-text);
@@ -56,7 +60,7 @@
     color: var(--b-color-on-accent);
     background:
       radial-gradient(120% 140% at 30% 12%, rgba(255, 255, 255, 0.38), transparent 42%),
-      var(--b-color-accent);
+      var(--b-color-accent-fill);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
       inset 0 0 0 1px color-mix(in srgb, var(--b-color-accent) 55%, transparent),
       var(--b-shadow-accent);
@@ -73,7 +77,7 @@
 
   .b-btn--outline {
     background: transparent;
-    box-shadow: inset 0 0 0 1px var(--b-border-strong);
+    border-color: var(--b-border-strong);
   }
   .b-btn--outline:hover { background: var(--b-fill-quaternary); }
 
@@ -204,18 +208,18 @@
     animation: b-glass-shimmer var(--b-glass-shimmer-duration) var(--b-ease-out) forwards;
   }
 
-  .b-btn--danger { color: var(--b-color-on-accent); background: var(--b-color-danger); }
-  .b-btn--danger:hover { background: color-mix(in srgb, var(--b-color-danger) 85%, black); }
-  .b-btn--danger-tinted { color: var(--b-color-danger); background: var(--b-color-danger-soft); }
+  .b-btn--danger { color: var(--b-color-on-accent); background: var(--b-color-danger-fill); }
+  .b-btn--danger:hover { background: color-mix(in srgb, var(--b-color-danger-fill) 85%, black); }
+  .b-btn--danger-tinted { color: var(--b-color-danger-text); background: var(--b-color-danger-soft); }
   .b-btn--danger-tinted:hover { background: color-mix(in srgb, var(--b-color-red) 22%, transparent); }
-  .b-btn--success { color: var(--b-color-on-accent); background: var(--b-color-success); }
+  .b-btn--success { color: var(--b-color-on-accent); background: var(--b-color-success-fill); }
   .b-btn--success:hover { background: color-mix(in srgb, var(--b-color-success) 85%, black); }
 
   /* Sizes */
-  .b-btn--xs { height: var(--b-control-h-xs); padding-inline: var(--b-space-2); font-size: var(--b-text-caption); border-radius: var(--b-radius-sm); }
-  .b-btn--sm { height: var(--b-control-h-sm); padding-inline: var(--b-space-3); font-size: var(--b-text-footnote); border-radius: var(--b-radius-sm); }
-  .b-btn--lg { height: var(--b-control-h-lg); padding-inline: var(--b-space-5); font-size: var(--b-text-callout); border-radius: var(--b-radius-lg); }
-  .b-btn--xl { height: var(--b-control-h-xl); padding-inline: var(--b-space-6); font-size: var(--b-text-body); border-radius: var(--b-radius-lg); }
+  .b-btn--xs { height: var(--b-control-h-xs); padding-inline: calc(var(--b-space-2) - 1px); font-size: var(--b-text-caption); border-radius: var(--b-radius-sm); }
+  .b-btn--sm { height: var(--b-control-h-sm); padding-inline: calc(var(--b-space-3) - 1px); font-size: var(--b-text-footnote); border-radius: var(--b-radius-sm); }
+  .b-btn--lg { height: var(--b-control-h-lg); padding-inline: calc(var(--b-space-5) - 1px); font-size: var(--b-text-callout); border-radius: var(--b-radius-lg); }
+  .b-btn--xl { height: var(--b-control-h-xl); padding-inline: calc(var(--b-space-6) - 1px); font-size: var(--b-text-body); border-radius: var(--b-radius-lg); }
   .b-btn--pill { border-radius: var(--b-radius-full); }
   .b-btn--block { display: flex; width: 100%; }
 
@@ -255,9 +259,10 @@
     inset-inline-end: var(--b-space-6);
     z-index: var(--b-z-sticky);
     width: 3.5rem; height: 3.5rem;
+    border: 1px solid transparent;
     border-radius: var(--b-radius-full);
     color: var(--b-color-on-accent);
-    background: var(--b-color-accent);
+    background: var(--b-color-accent-fill);
     box-shadow: var(--b-shadow-lg), var(--b-shadow-accent);
   }
   .b-fab:hover { background: var(--b-color-accent-hover); translate: 0 -2px; }
@@ -320,7 +325,7 @@
   .b-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
   .b-link--muted { color: var(--b-text-secondary); }
   .b-link--muted:hover { color: var(--b-text); }
-  .b-link--danger { color: var(--b-color-danger); }
+  .b-link--danger { color: var(--b-color-danger-text); }
   .b-link svg { width: 1em; height: 1em; }
   .b-link-group {
     display: flex;

package/css/components/auth.css

@@ -42,7 +42,7 @@
     margin-inline: auto;
     font-size: 1.4rem;
     color: var(--b-color-on-accent);
-    background: linear-gradient(135deg, var(--b-color-accent), var(--b-color-indigo));
+    background: linear-gradient(135deg, var(--b-color-accent-fill), var(--b-color-indigo));
     border-radius: var(--b-radius-lg);
     box-shadow: var(--b-shadow-accent);
   }
@@ -96,8 +96,6 @@
   }
   .b-otp input:focus-visible {
     border-color: var(--b-color-accent);
-    box-shadow: var(--b-focus-ring);
-    outline: none;
   }
   .b-otp input.is-filled { border-color: var(--b-color-accent); }
   .b-otp.is-invalid input { border-color: var(--b-color-danger); animation: b-shake 0.35s var(--b-ease-standard); }

package/css/components/content.css

@@ -381,6 +381,39 @@
     border-collapse: collapse;
     font-size: var(--b-text-footnote);
   }
+  /* A table with a prose column has no good phone shape: it lays out at
+     min-content and scrolls, so a Notes column becomes twelve lines of three
+     words each. --stack turns each row into a block under 40rem, with the
+     column heading written before every cell from data-label. The cells stay
+     table cells for assistive tech; only their display changes. Data grids
+     never take this: numbers want columns. */
+  /* .b-table.b-table--stack, not .b-table--stack: a docs table is usually
+     --compact as well, and --compact's cell padding sits at equal specificity
+     later in this file. The phone shape has to win over density by
+     specificity, not by where it happens to sit. */
+  @media (max-width: 40rem) {
+    .b-table.b-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+    .b-table.b-table--stack, .b-table.b-table--stack tbody, .b-table.b-table--stack tr, .b-table.b-table--stack td { display: block; }
+    .b-table.b-table--stack tr { padding-block: var(--b-space-3); border-block-end: 1px solid var(--b-separator); }
+    .b-table.b-table--stack td {
+      position: relative;
+      padding: var(--b-space-1) 0 var(--b-space-1) var(--b-table-label-w, 34%);
+      border: 0;
+      min-height: 1.5em;
+    }
+    .b-table.b-table--stack td::before {
+      content: attr(data-label);
+      position: absolute;
+      inset-inline-start: 0;
+      width: calc(var(--b-table-label-w, 34%) - var(--b-space-3));
+      font-size: var(--b-text-caption);
+      font-weight: var(--b-weight-semibold);
+      color: var(--b-text-secondary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
   .b-table th {
     padding: var(--b-space-3) var(--b-space-4);
     text-align: start;
@@ -421,8 +454,19 @@
   /* Data grid extras — sticky header + row actions */
   .b-datagrid { max-height: var(--b-datagrid-h, 26rem); overflow: auto; }
   .b-datagrid .b-table th { position: sticky; top: 0; z-index: 1; background: var(--b-surface-2); }
-  .b-datagrid .b-table td .b-row-actions { visibility: hidden; }
-  .b-datagrid .b-table tr:hover .b-row-actions { visibility: visible; }
+  /* Hidden by opacity, not visibility: visibility:hidden drops the buttons
+     from the tab order, so a keyboard user could never reach Edit or Delete.
+     Revealed by hover or by focus landing anywhere in the row. */
+  .b-datagrid .b-table td .b-row-actions {
+    opacity: 0;
+    transition: opacity var(--b-duration-fast) var(--b-ease-out);
+  }
+  .b-datagrid .b-table tr:is(:hover, :focus-within) .b-row-actions { opacity: 1; }
+  /* No hover on touch, and an opacity-0 button is still tappable, so an
+     invisible Delete would be a trap. */
+  @media (hover: none) {
+    .b-datagrid .b-table td .b-row-actions { opacity: 1; }
+  }
 
   /* ---- Tree ---------------------------------------------------------------------- */
   .b-tree { list-style: none; margin: 0; padding: 0; font-size: var(--b-text-subheadline); }
@@ -567,10 +611,10 @@
     white-space: nowrap;
   }
   .b-badge--accent  { color: var(--b-color-accent-text); background: var(--b-color-accent-soft); }
-  .b-badge--success { color: var(--b-color-success); background: var(--b-color-success-soft); }
-  .b-badge--warning { color: light-dark(#b46200, var(--b-color-warning)); background: var(--b-color-warning-soft); }
-  .b-badge--danger  { color: var(--b-color-danger); background: var(--b-color-danger-soft); }
-  .b-badge--solid   { color: var(--b-color-on-accent); background: var(--b-color-accent); }
+  .b-badge--success { color: var(--b-color-success-text); background: var(--b-color-success-soft); }
+  .b-badge--warning { color: var(--b-color-warning-text); background: var(--b-color-warning-soft); }
+  .b-badge--danger  { color: var(--b-color-danger-text);  background: var(--b-color-danger-soft); }
+  .b-badge--solid   { color: var(--b-color-on-accent); background: var(--b-color-accent-fill); }
   .b-badge--dot::before {
     content: "";
     width: 0.4rem; height: 0.4rem;
@@ -621,12 +665,12 @@
     align-items: center;
     gap: var(--b-space-1);
     height: var(--b-control-h-sm);
-    padding-inline: var(--b-space-3);
+    padding-inline: calc(var(--b-space-3) - 1px);
     font-size: var(--b-text-footnote);
     font-weight: var(--b-weight-medium);
     color: var(--b-text);
     background: var(--b-fill-tertiary);
-    border: none;
+    border: 1px solid transparent;
     border-radius: var(--b-radius-full);
     cursor: pointer;
     transition: background var(--b-duration-fast), color var(--b-duration-fast);
@@ -634,7 +678,7 @@
   .b-chip:hover { background: var(--b-fill-secondary); }
   .b-chip.is-selected, .b-chip[aria-pressed="true"] {
     color: var(--b-color-on-accent);
-    background: var(--b-color-accent);
+    background: var(--b-color-accent-fill);
   }
   .b-chip__remove {
     display: inline-grid;
@@ -772,8 +816,12 @@
   .b-code__copy {
     padding: 0.2rem var(--b-space-2);
     font-size: var(--b-text-caption);
-    color: rgba(235, 235, 245, 0.7);
-    background: rgba(255, 255, 255, 0.08);
+    /* Ink and veil come from the host. A light literal here was right inside
+       the always-dark code block and invisible when the docs put the same
+       button on a light footer: the copy button was there and nobody could
+       see it. */
+    color: color-mix(in srgb, currentColor 78%, transparent);
+    background: color-mix(in srgb, currentColor 10%, transparent);
     border: none;
     border-radius: var(--b-radius-sm);
     cursor: pointer;
@@ -818,8 +866,8 @@
     font-size: var(--b-text-footnote);
     font-weight: var(--b-weight-semibold);
   }
-  .b-stat__delta.is-up { color: var(--b-color-success); }
-  .b-stat__delta.is-down { color: var(--b-color-danger); }
+  .b-stat__delta.is-up { color: var(--b-color-success-text); }
+  .b-stat__delta.is-down { color: var(--b-color-danger-text); }
 
   /* ---- Empty State ---------------------------------------------------------------------------------- */
   .b-empty {
@@ -848,16 +896,24 @@
     color: var(--b-text-secondary);
   }
   .b-empty .b-btn { margin-block-start: var(--b-space-3); }
-}
+
   /* A picture behind flat cards is a picture nobody sees. When a wallpaper is
      hanging (Barua.wallpaper adds .b-has-wallpaper), surfaces on the wall
      become the neutral material — derived from whatever is behind them, so it
      holds over any picture. A product that wants opaque surfaces simply never
-     hangs one. */
-  .b-has-wallpaper .b-workspace,
-  .b-has-wallpaper .b-workspace__main,
-  .b-has-wallpaper .b-inspector { background: transparent; }
-  .b-has-wallpaper .b-card {
+     hangs one.
+
+     This block lives INSIDE @layer components, so a product's unlayered
+     override still wins, which is the contract barua.css states. A closing
+     brace had landed above it and the whole block was unlayered: it beat
+     every card variant and every product override the moment a wallpaper was
+     hung. The class only ever lives on <html>, so :root lifts these to (0,3,0)
+     and they beat Liquid Glass's (0,2,0) panes by specificity, not by escaping
+     the layer. */
+  :root.b-has-wallpaper .b-workspace,
+  :root.b-has-wallpaper .b-workspace__main,
+  :root.b-has-wallpaper .b-inspector { background: transparent; }
+  :root.b-has-wallpaper .b-card {
     background: var(--b-material-neutral-bg);
     -webkit-backdrop-filter: blur(var(--b-blur-lg)) saturate(1.1);
     backdrop-filter: blur(var(--b-blur-lg)) saturate(1.1);
@@ -867,14 +923,15 @@
      material keeps its blur and doubles the veil, so the picture still shows at
      the edges without competing with the ink. The veil follows the wallpaper's
      own scheme, so it lightens on a bright picture and darkens on a dark one. */
-  .b-has-wallpaper .b-card--thick {
+  :root.b-has-wallpaper .b-card--thick {
     background: var(--b-material-thick-bg);
   }
 
   /* A panel inside glass is a fill, never a second material. */
-  .b-has-wallpaper .b-card .b-card {
+  :root.b-has-wallpaper .b-card .b-card {
     background: var(--b-fill-quaternary);
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
   }
+}
 

package/css/components/feedback.css

@@ -71,9 +71,9 @@
     font-weight: var(--b-weight-medium);
     text-align: center;
     color: var(--b-color-on-accent);
-    background: linear-gradient(90deg, var(--b-color-accent), color-mix(in srgb, var(--b-color-indigo) 80%, var(--b-color-accent)));
+    background: linear-gradient(90deg, var(--b-color-accent-fill), color-mix(in srgb, var(--b-color-indigo) 80%, var(--b-color-accent-fill)));
   }
-  .b-banner a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
+  .b-banner a:not(.b-btn) { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
   .b-banner__close {
     background: none; border: none;
     color: inherit; opacity: 0.8; cursor: pointer;

package/css/components/forced-colors.css

@@ -0,0 +1,60 @@
+@layer components {
+  /* ==========================================================================
+     Forced colours (Windows High Contrast, and any browser with
+     forced-colors: active).
+
+     The platform strips every background and shadow and repaints the page in
+     a handful of system colours. A control whose shape lived only in its fill
+     became bare words; a switch became nothing at all; a selected segment and
+     an unselected one looked the same. Two rules make a component survive:
+     its edge is a real border (transparent in normal mode, painted here) and
+     any state that was a fill opts out of the repaint to keep a system fill.
+     The system colours are the only literals allowed in a component file.
+     ========================================================================== */
+  @media (forced-colors: active) {
+    /* Edges for everything that was shape-by-fill. */
+    .b-btn, .b-fab, .b-chip, .b-segmented, .b-segmented__item,
+    .b-switch input, .b-switch input::after,
+    .b-badge, .b-tag, .b-progress, .b-progress__bar, .b-tab { border-color: ButtonText; }
+    .b-switch input { background: Canvas; }
+    .b-switch input::after { background: ButtonText; }
+
+    /* A state that was a fill stays a fill, in the system's own colours. */
+    .b-btn--primary, .b-btn--liquid, .b-btn--danger, .b-btn--success,
+    .b-segmented__item.is-active, .b-segmented__item[aria-selected="true"],
+    .b-tab.is-active, .b-tab[aria-selected="true"],
+    .b-chip.is-selected, .b-chip[aria-pressed="true"],
+    .b-menu__item.is-active, .b-pagination__item.is-active,
+    .b-sidebar__item.is-active, .b-rail__item.is-active,
+    .b-switch input:checked,
+    .b-checkbox input:checked, .b-checkbox input:indeterminate,
+    .b-calendar__day.is-selected, .b-progress__bar, .b-range__fill {
+      forced-color-adjust: none;
+      background: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+    }
+    .b-switch input:checked::after { forced-color-adjust: none; background: HighlightText; }
+
+    /* Range inputs: the platform already draws these in system colours. */
+    .b-slider, .b-slider::-webkit-slider-thumb,
+    .b-range > input[type="range"],
+    .b-range > input[type="range"]::-webkit-slider-thumb { appearance: auto; }
+    .b-range::before { border: 1px solid ButtonText; }
+
+    /* Focus and disabled must read as such. */
+    :focus-visible { outline-color: Highlight; }
+    :disabled, .is-disabled, .b-btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
+    .b-switch input:disabled { border-color: GrayText; }
+    .b-switch input:disabled::after { background: GrayText; }
+
+    /* Glass has nothing to blur; a translucent veil over Canvas reads as a
+       box, and the platform wants Canvas. */
+    .b-card, .b-topnav, .b-menu, .b-modal, .b-drawer, .b-sheet, .b-bottom-sheet {
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+      background: Canvas;
+      border-color: CanvasText;
+    }
+  }
+}

package/css/components/forms.css

@@ -23,7 +23,7 @@
   }
   .b-label--required::after {
     content: " *";
-    color: var(--b-color-danger);
+    color: var(--b-color-danger-text);
   }
 
   .b-help {
@@ -35,7 +35,7 @@
     align-items: center;
     gap: var(--b-space-1);
     font-size: var(--b-text-footnote);
-    color: var(--b-color-danger);
+    color: var(--b-color-danger-text);
   }
 
   /* ---- Inputs ------------------------------------------------------------ */
@@ -56,8 +56,6 @@
   .b-input:hover, .b-textarea:hover, .b-select:hover { border-color: var(--b-border-strong); }
   .b-input:focus-visible, .b-textarea:focus-visible, .b-select:focus-visible {
     border-color: var(--b-color-accent);
-    box-shadow: var(--b-focus-ring);
-    outline: none;
   }
   .b-input--filled { background: var(--b-fill-tertiary); border-color: transparent; }
   .b-input--filled:hover { background: var(--b-fill-secondary); }
@@ -81,7 +79,7 @@
   }
   .b-field.is-invalid .b-input:focus-visible,
   .b-input.is-invalid:focus-visible, .b-input:user-invalid:focus-visible {
-    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--b-color-danger) 25%, transparent);
+    --b-focus-ring-color: var(--b-color-danger);
   }
   .b-field.is-valid .b-input, .b-input.is-valid { border-color: var(--b-color-success); }
 
@@ -237,6 +235,9 @@
     margin: 0;
     flex: none;
     background: var(--b-fill);
+    /* Painted only by forced colours: the track was a fill and the thumb a
+       shadow, and both vanish in Windows High Contrast. */
+    border: 1.5px solid transparent;
     border-radius: var(--b-radius-full);
     position: relative;
     cursor: pointer;
@@ -250,6 +251,7 @@
     translate: 0 -50%;
     width: 1.3rem; height: 1.3rem;
     background: #fff;
+    border: 1px solid transparent;
     border-radius: 50%;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
     transition: inset-inline-start var(--b-duration-normal) var(--b-ease-spring);
@@ -387,6 +389,7 @@
 
   /* ---- File Upload ------------------------------------------------------- */
   .b-upload {
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -407,7 +410,27 @@
     background: var(--b-color-accent-soft);
     color: var(--b-color-accent-text);
   }
-  .b-upload input[type="file"] { display: none; }
+  /* Keyboard focus on the wrapped input lights the zone, like a multiselect. */
+  .b-upload:focus-within {
+    border-color: var(--b-color-accent);
+    outline: var(--b-focus-ring);
+    outline-offset: var(--b-focus-ring-offset);
+  }
+  /* Hidden visually but still focusable and in the accessibility tree, the
+     .b-sr-only recipe. display:none took the only focusable thing in the
+     label out of the tab order, so the picker could not be opened without a
+     mouse. */
+  .b-upload input[type="file"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
   .b-upload svg { width: 2rem; height: 2rem; opacity: 0.7; }
   .b-upload__hint { font-size: var(--b-text-footnote); color: var(--b-text-tertiary); }
 

package/css/components/marketing.css

@@ -52,10 +52,13 @@
   }
   .b-marketing-nav--lg .b-marketing-nav__brand { font-size: var(--b-text-title3); }
   .b-marketing-nav--lg .b-marketing-nav__links { gap: clamp(var(--b-space-4), 2.4vw, var(--b-space-8)); }
-  .b-marketing-nav--lg a { font-weight: var(--b-weight-medium); }
+  .b-marketing-nav--lg a:not(.b-btn) { font-weight: var(--b-weight-medium); }
   .b-marketing-nav__links { display: flex; gap: var(--b-space-5); margin-inline: auto; }
-  .b-marketing-nav a { color: var(--b-text-secondary); text-decoration: none; }
-  .b-marketing-nav a:hover { color: var(--b-text); }
+  /* Bare links only. A .b-btn dropped in the bar keeps its own ink: an element
+     selector inside a container is (0,1,1) and quietly beat .b-btn--primary's
+     (0,1,0), which left the landing page's call to action grey on blue. */
+  .b-marketing-nav a:not(.b-btn) { color: var(--b-text-secondary); text-decoration: none; }
+  .b-marketing-nav a:not(.b-btn):hover { color: var(--b-text); }
 
   /* ---- Chapter: one idea, centred, with room around it --------------------- */
   .b-chapter {
@@ -278,7 +281,7 @@
     gap: var(--b-space-6);
     padding: clamp(var(--b-space-6), 4vw, var(--b-space-10));
     color: var(--b-color-on-accent);
-    background: var(--b-color-accent);
+    background: var(--b-color-accent-fill);
     border-radius: var(--b-radius-2xl);
     color-scheme: dark;
   }
@@ -779,7 +782,7 @@
     font-weight: var(--b-weight-semibold);
     color: var(--b-text);
   }
-  .b-site-footer__group a { display: block; padding-block: 0.2rem; color: var(--b-text-secondary); text-decoration: none; }
+  .b-site-footer__group a:not(.b-btn) { display: block; padding-block: 0.2rem; color: var(--b-text-secondary); text-decoration: none; }
   .b-site-footer__group a:hover { color: var(--b-text); text-decoration: underline; }
   .b-site-footer__legal {
     max-width: var(--b-container-xl);

package/css/components/media.css

@@ -235,7 +235,7 @@
     .b-poster:hover .b-poster__frame { translate: 0 -2px; box-shadow: var(--b-elevation-3); }
   }
   .b-poster:focus-visible { outline: none; }
-  .b-poster:focus-visible .b-poster__frame,
+  .b-poster:focus-visible .b-poster__frame { outline: var(--b-focus-ring); outline-offset: 2px; }
   .b-poster.is-selected .b-poster__frame { outline: 2px solid var(--b-color-accent); outline-offset: 2px; }
 
   /* A wall of posters: as many across as fit — three on a phone, eight on a
@@ -264,7 +264,9 @@
     opacity: 0;
     transition: opacity var(--b-duration-normal);
   }
-  .b-video:hover .b-video__overlay, .b-video.is-paused .b-video__overlay { opacity: 1; }
+  .b-video:hover .b-video__overlay,
+  .b-video:focus-within .b-video__overlay,
+  .b-video.is-paused .b-video__overlay { opacity: 1; }
   .b-video__play {
     display: grid;
     place-items: center;
@@ -281,6 +283,68 @@
   }
   .b-video__play:hover { scale: 1.08; }
 
+  /* ---- Film player controls -------------------------------------------------------
+     `.b-media-controls` is the generic bar. A film needs its controls over the
+     picture rather than beside it, and needs them gone while someone watches.
+     These four existed only in the player's markup — the classes were used and
+     never defined, so the bar sat unstyled below the video with browser-default
+     buttons and full-size glyphs. */
+  .b-video__bar {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--b-space-2);
+    padding: var(--b-space-3);
+    color: #fff;
+    color-scheme: dark;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
+    opacity: 0;
+    transition: opacity var(--b-duration-normal) var(--b-ease-out);
+  }
+  .b-video:hover .b-video__bar,
+  .b-video:focus-within .b-video__bar,
+  .b-video.is-paused .b-video__bar { opacity: 1; }
+  /* A touch screen has no hover, so the bar would otherwise appear only by
+     pausing — which is exactly when someone full screen cannot reach it. */
+  @media (hover: none) {
+    .b-video__bar { opacity: 1; }
+  }
+
+  .b-video__btn {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--b-radius-full);
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    transition: background var(--b-duration-fast) var(--b-ease-out);
+  }
+  .b-video__btn:hover { background: rgb(255 255 255 / 0.18); }
+  .b-video__btn svg { width: 1.5rem; height: 1.5rem; fill: currentColor; }
+
+  .b-video__time {
+    flex: none;
+    font-size: var(--b-text-caption);
+    font-variant-numeric: tabular-nums;
+    opacity: 0.9;
+  }
+
+  .b-video__seek {
+    flex: 1;
+    min-width: 0;
+    height: 1.5rem;
+    accent-color: var(--b-color-accent);
+    cursor: pointer;
+  }
+
   /* ---- Media Controls (shared control bar) --------------------------------------- */
   .b-media-controls {
     position: absolute;