actual-css 0.4.0 → 0.4.1

package/dist/actual.full.css

@@ -208,9 +208,8 @@ select {
 @media (forced-colors: active) {
   :root,
   [data-theme] {
-    --state-selected: Highlight;
-    --state-selected-fg: HighlightText;
     --state-disabled: GrayText;
+    --disabled-opacity: 1;
   }
 }
 
@@ -436,16 +435,6 @@ select {
   }
 }
 
-@media (forced-colors: active) {
-  :root,
-  [data-theme] {
-    --focus-outline-color: Highlight;
-    --focus-ring-shadow: none;
-
-    --backdrop-fill: Canvas;
-  }
-}
-
 @media (prefers-contrast: more) {
   :root,
   /* The repeated attribute intentionally outranks single-attribute preset
@@ -680,14 +669,6 @@ small {
   :focus:not(:focus-visible) {
     outline: none;
   }
-
-  /* Pointer focus must still signal in high-contrast mode, where the shared
-     box-shadow rings are disabled (--focus-ring-shadow: none). */
-  @media (forced-colors: active) {
-    :focus:not(:focus-visible) {
-      outline: var(--focus-outline);
-    }
-  }
 }
 
 @media print {
@@ -750,6 +731,10 @@ small {
 /* Vertical rhythm belongs to the direct block that participates in the
    document, so it must not be injected into the internals of a nested
    component (e.g. a .table-wrap around a .table would trap the margin). */
+.prose > * {
+  margin-block-end: 0;
+}
+
 .prose > * + * {
   margin-block-start: var(--prose-flow);
 }
@@ -1044,12 +1029,13 @@ small {
  * .center         centered content column
  * .frame          fixed-ratio media frame
  * .app-shell      full-height application shell
+ * .app-layout     topbar + scrolling main + bottom/side app navigation
  * .media          fixed media + flexible content
  * .switcher       peer regions: all horizontal or all stacked
  * .sidebar-layout main content + secondary aside
  * .grid           responsive collection; item width is the contract
- * .grid-N         structural density of N; wrap in .container-query for
- *                 balanced subdivision (in grid.css)
+ *  .grid-N         structural density of N; balanced inside a container named
+ *                  actual-grid (in grid.css)
  * .column-layout  explicit 12-column region composition; the author owns
  *                 narrow-container recomposition
  * .scroller       theme-aware scrollbar density and colour
@@ -1060,10 +1046,12 @@ small {
  *
  * Prefer these compositions over viewport breakpoint utilities.
  */
-/* Local container-query opt-in: establishes an inline-size query context for
+/* Convenience helper: establishes a query container named actual-grid for
    descendants. Use it for a component that changes representation according
-   to its allocated inline size, and to opt .grid-N into balanced subdivision
-   (see grid.css). Layout primitives are responsive without it — this adds
+   to its allocated inline size, and to give .grid-N the named context it needs
+   for balanced subdivision (see grid.css). The name matters: grids only respond
+   to an explicitly actual-grid-named container, never to an incidental
+   query container. Layout primitives are responsive without it; this adds
    precision, it is never a prerequisite.
 
    The element takes inline-size containment, so put it on a normal
@@ -1071,7 +1059,7 @@ small {
    float, an inline-block): its contents would stop contributing to its own
    inline size and it would collapse. */
 .container-query {
-  container-type: inline-size;
+  container: actual-grid / inline-size;
 }
 
 /* Vertical flow. .stack owns the block axis only: block margins reset, inline
@@ -1127,6 +1115,7 @@ small {
  */
 .center {
   box-sizing: content-box;
+  inline-size: calc(100% - var(--center-pad, 1rem) * 2);
   max-inline-size: var(--center-size, 72rem);
   margin-inline: auto;
   padding-inline: var(--center-pad, 1rem);
@@ -1152,13 +1141,116 @@ small {
   object-fit: cover;
 }
 
-/* Full-height application shell. */
+/* Full-height single-column document shell. */
 .app-shell {
   min-block-size: var(--viewport-block);
   display: flex;
   flex-direction: column;
 }
 
+/*
+ * Specialized application shell recipe: one exact DOM structure uses a
+ * bottom navigation bar when narrow and a labelled side navigation when space
+ * permits. The main region owns scrolling, keeping both pieces of application
+ * chrome available without fixed offsets. This is not a generic page wrapper
+ * or a public-site layout; all three direct regions are part of the contract.
+ *
+ * Public hook:
+ * --app-nav-side-size
+ */
+.app-layout {
+  --app-nav-side-size: 12rem;
+
+  display: grid;
+  grid-template:
+    "topbar" auto
+    "main" minmax(0, 1fr)
+    "nav" auto
+    / minmax(0, 1fr);
+  block-size: var(--viewport-block);
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+.app-layout > .topbar {
+  grid-area: topbar;
+  padding-block-start: calc(var(--space-30) + env(safe-area-inset-top));
+}
+
+.app-layout > .app-main {
+  grid-area: main;
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+}
+
+.app-layout > .app-nav {
+  grid-area: nav;
+}
+
+/* The main grid area keeps the FAB clear of bottom navigation without making
+   either component copy the other's geometry. */
+.app-layout > .fab {
+  position: relative;
+  grid-area: main;
+  place-self: end;
+  inset: auto;
+  margin: var(--fab-offset);
+}
+
+@media (min-width: 48rem) {
+  .app-layout {
+    grid-template:
+      "nav topbar" auto
+      "nav main" minmax(0, 1fr)
+      / var(--app-nav-side-size) minmax(0, 1fr);
+  }
+
+  .app-layout > .app-nav {
+    position: sticky;
+    inset-block: 0;
+    grid-auto-flow: row;
+    grid-auto-rows: minmax(var(--control-size-lg), auto);
+    grid-auto-columns: auto;
+    align-content: start;
+    gap: var(--space-20);
+    min-block-size: 0;
+    padding-block: max(var(--space-20), env(safe-area-inset-top))
+      max(var(--space-20), env(safe-area-inset-bottom));
+    padding-inline: var(--space-20);
+    border-block-start: 0;
+    border-inline-end: var(--border-width) solid var(--ui-border, var(--border));
+  }
+
+  .app-layout > .app-nav > a {
+    grid-template-rows: auto;
+    grid-template-columns: 1.5rem minmax(0, 1fr);
+    place-content: center start;
+    align-items: center;
+    justify-items: start;
+    gap: var(--space-30);
+    padding-inline: var(--space-30);
+    text-align: start;
+  }
+
+  /* Side navigation no longer occupies the viewport's bottom safe area. */
+  .app-layout > .fab {
+    margin-block-end: max(var(--fab-offset), env(safe-area-inset-bottom));
+  }
+}
+
+@media print {
+  .app-layout {
+    display: block;
+    block-size: auto;
+    overflow: visible;
+  }
+
+  .app-layout > .app-main {
+    overflow: visible;
+  }
+}
+
 /* Media object: fixed-width leading element (avatar, icon, image) + flexible
    trailing content. Replaces the repeated "auto minmax(0, 1fr)" pattern in
    author cards, comments, meta rows, and similar compositions.
@@ -1206,7 +1298,10 @@ small {
  * --sidebar-content-min
  * --sidebar-layout-size
  *
- * Child contract: the first and last direct children carry the sizing roles.
+ * Child contract: the main region is first and the aside second by default
+ * (aside on the inline end). .reverse expects the aside first in the DOM, so
+ * visual, reading and keyboard order all agree — the role rules swap so the
+ * aside still takes its preferred width and the main still reclaims the row.
  */
 .sidebar-layout {
   display: flex;
@@ -1215,15 +1310,33 @@ small {
   align-items: flex-start;
 }
 
+/* Main region — flexible, reclaims the full row when the aside wraps. */
 .sidebar-layout > :first-child {
   flex-basis: 0;
   flex-grow: 999;
   min-inline-size: min(100%, var(--sidebar-content-min, 30rem));
 }
 
+/* Aside region — preferred width, never forces content min-width. */
 .sidebar-layout > :last-child {
   flex-basis: var(--sidebar-layout-size, 18rem);
   flex-grow: 1;
+  min-inline-size: 0;
+}
+
+/* .reverse: the aside is first in the DOM and the main last, so each role
+   rule above would hit the wrong element. Swap the sizing per child; the
+   higher-specificity reverse rules outrank the positional defaults. */
+.sidebar-layout.reverse > :last-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: min(100%, var(--sidebar-content-min, 30rem));
+}
+
+.sidebar-layout.reverse > :first-child {
+  flex-basis: var(--sidebar-layout-size, 18rem);
+  flex-grow: 1;
+  min-inline-size: 0;
 }
 
 /*
@@ -1252,7 +1365,8 @@ small {
 /* Recipe:
    - collection whose item width is the contract -> .grid, tune --grid-min
    - collection whose column density is the contract -> .grid-2/3/4/6
-   - balanced subdivision of that density -> wrap it in .container-query
+   - balanced subdivision of that density -> place it inside any size query
+     container (.container-query is the convenience helper for that context)
    - peer regions that switch as a group -> .switcher
    - content + aside -> .sidebar-layout
    - exact custom track templates -> --grid-columns with an explicit collapse
@@ -1313,7 +1427,13 @@ small {
   min-inline-size: 0;
 }
 
-/* Balanced subdivision, opted into by an ancestor query container.
+/* Balanced subdivision, activated by an ancestor container named actual-grid.
+ * A .grid-N inside such a container enters only divisor states of N. The name
+ * is deliberate: a grid must not key off the nearest anonymous query container,
+ * or a region that sets container-type: inline-size for an unrelated reason
+ * would silently change the grid. The author opts the grid in by naming the
+ * context — .container-query is the official helper, or declare
+ * container: actual-grid / inline-size on your own region.
  *
  *   .grid-2   2 -> 1
  *   .grid-3   3 -> 1
@@ -1330,6 +1450,11 @@ small {
  * inline contribution and collapses it inside .cluster, .topbar, floats, and
  * any shrink-to-fit box. See docs/design-notes/grid.md.
  *
+ * Without an actual-grid ancestor none of these @container rules resolve, so
+ * the auto-fill baseline above stays. The min-width: 0 rule is the lowest
+ * step: it pins the grid to one column inside a container before any larger
+ * threshold fires (a bare grid would otherwise show a 2 + 1 orphan at 28-48rem).
+ *
  * Three shared thresholds, not one calibrated per preset: 28rem opens the
  * first horizontal density, 48rem opens three columns, 64rem opens the dense
  * 4 and 6. N already carries the author's statement about item size, so
@@ -1341,28 +1466,30 @@ small {
  * Ascending min-width only: the last matching step wins by cascade order.
  */
 @supports (container-type: inline-size) {
-  .container-query :where(.grid-2, .grid-3, .grid-4, .grid-6) {
-    grid-template-columns: 1fr;
+  @container actual-grid (min-width: 0px) {
+    :where(.grid-2, .grid-3, .grid-4, .grid-6) {
+      grid-template-columns: 1fr;
+    }
   }
 
-  @container (min-width: 28rem) {
-    .container-query :where(.grid-2, .grid-4, .grid-6) {
+  @container actual-grid (min-width: 28rem) {
+    :where(.grid-2, .grid-4, .grid-6) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
 
-  @container (min-width: 48rem) {
-    .container-query :where(.grid-3, .grid-6) {
+  @container actual-grid (min-width: 48rem) {
+    :where(.grid-3, .grid-6) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
 
-  @container (min-width: 64rem) {
-    .container-query :where(.grid-4) {
+  @container actual-grid (min-width: 64rem) {
+    :where(.grid-4) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 
-    .container-query :where(.grid-6) {
+    :where(.grid-6) {
       grid-template-columns: repeat(6, minmax(0, 1fr));
     }
   }
@@ -2610,12 +2737,22 @@ small {
   opacity: var(--disabled-opacity);
 }
 
-/* Forced colors: map the custom thumb/track to system colors. The focus
-   indicator stays visible through the transparent outline on :focus-visible. */
+/* Forced colors: the track must stay a visible line against the page (Canvas
+   would merge with it) and the thumb needs a real boundary to remain
+   distinguishable from the track. Disabled keeps GrayText via :disabled.
+   Focus stays on the transparent outline of :focus-visible. */
 @media (forced-colors: active) {
   .range {
-    --range-thumb-bg: ButtonText;
-    --range-track-bg: Canvas;
+    --range-track-bg: CanvasText;
+    --range-thumb-bg: ButtonFace;
+  }
+
+  .range::-webkit-slider-thumb {
+    border: var(--border-width) solid ButtonText;
+  }
+
+  .range::-moz-range-thumb {
+    border: var(--border-width) solid ButtonText;
   }
 }
 
@@ -2752,28 +2889,19 @@ small {
   transform: scale(1);
 }
 
+/* The native input is hidden and the checked marker is custom-drawn: without
+   this repair, forced colors pushes disc and check to the same system color
+   and the state disappears. Highlight/Canvas/HighlightText are preserved as-is,
+   so no forced-color-adjust is needed. The pseudo is not focusable — the
+   outline is a separator against the card, not a focus channel. */
 @media (forced-colors: active) {
-  .choice-card {
-    --choice-card-border: ButtonText;
-    --choice-card-bg: Canvas;
-  }
-
-  .choice-card:has(:checked) {
-    --choice-card-border: Highlight;
-    /* Pin the selected surface to the system canvas: only the essential
-       marker pseudos opt out of remapping, never the interactive card host. */
-    --choice-card-bg: Canvas;
-  }
-
   .choice-card:has(:checked)::before {
     background: Highlight;
-    box-shadow: 0 0 0 2px Canvas;
-    forced-color-adjust: none;
+    outline: 2px solid Canvas;
   }
 
   .choice-card:has(:checked)::after {
     background: HighlightText;
-    forced-color-adjust: none;
   }
 }
 
@@ -3058,7 +3186,12 @@ small {
    but it sits in the clipped input extension once every cell is filled, so
    the focused edge must be unambiguous on its own — hence the doubled width,
    not only the color swap. Width is safe to change: box-sizing is border-box
-   and the cells have a fixed inline/block size, so nothing reflows. */
+   and the cells have a fixed inline/block size, so nothing reflows.
+
+   The <input> must be the first direct child, with one cell <span> per
+   character after it: the state rules select the cells as following siblings
+   (input:focus ~ span, input:disabled ~ span, …), so that order is part of the
+   contract. */
 .otp > input:focus ~ span {
   --otp-cell-border: var(--focus);
   --otp-cell-border-width: calc(var(--border-width) * 2);
@@ -3082,7 +3215,7 @@ small {
 
 .otp > input:disabled ~ span {
   --otp-cell-bg: var(--surface-subtle);
-
+  --otp-cell-border: var(--state-disabled);
   opacity: var(--disabled-opacity);
 }
 
@@ -3192,7 +3325,8 @@ small {
 
 .btn.icon-only {
   inline-size: var(--btn-min-size);
-  padding-inline: 0;
+  block-size: var(--btn-min-size);
+  padding: 0;
 }
 
 @supports (color: color-mix(in oklch, red, white)) {
@@ -3264,14 +3398,15 @@ small {
   --ui-fg: var(--intent, currentColor);
   --ui-border: transparent;
   --btn-radius: var(--radius-sm);
-  --btn-border-block-end-color: transparent;
-  --btn-border-block-end-width: var(--border-width);
 
   min-block-size: auto;
   padding-inline: 0;
   inline-size: fit-content;
   max-inline-size: 100%;
-  border-color: transparent;
+  /* No border at all: a link reads through its underline, and the inherited
+     .btn border made transparent would turn into a visible box in forced
+     colors. :focus-visible keeps its own outline. */
+  border: 0;
   text-decoration: underline;
   text-underline-offset: 0.18em;
 }
@@ -3332,44 +3467,12 @@ a.btn[aria-disabled="true"] {
 }
 
 @media (forced-colors: active) {
-  .btn {
-    border-color: ButtonText;
-    background: ButtonFace;
-    color: ButtonText;
-    box-shadow: none;
-  }
-
-  .btn.link {
-    border-color: transparent;
-    background: Canvas;
-    color: LinkText;
-  }
-
-  .btn:is([aria-pressed="true"], [aria-current="page"]):not(.link) {
-    border-color: Highlight;
-    background: Highlight;
-    color: HighlightText;
-    forced-color-adjust: none;
-  }
-
-  .btn:is([aria-pressed="true"], [aria-current="page"]):not(.link):focus-visible {
-    outline: var(--focus-outline);
-    box-shadow: none;
-  }
-
-  .btn:hover:not(:where(:disabled, [aria-disabled="true"], .link)) {
-    outline: var(--border-width) solid ButtonText;
-    outline-offset: 2px;
-  }
-
-  .btn:disabled,
   a.btn[aria-disabled="true"] {
-    border-color: GrayText;
-    background: Canvas;
     color: GrayText;
-    forced-color-adjust: auto;
+    border-color: GrayText;
   }
 }
+
 @media print {
   :is(button, input[type="button"], input[type="submit"], input[type="reset"]).btn {
     display: none !important;
@@ -3563,21 +3666,9 @@ a.badge[aria-disabled="true"] {
     background: ButtonText;
   }
 
-  :where(a.badge, button.badge):hover:not(:where(:disabled, [aria-disabled="true"])) {
-    outline: var(--border-width) solid ButtonText;
-    outline-offset: 2px;
-  }
-
-  .badge > button:not(:disabled):hover {
-    outline: var(--border-width) solid currentColor;
-    outline-offset: 1px;
-  }
-
-  button.badge:disabled,
   .badge[aria-disabled="true"] {
-    border-color: GrayText;
-    background: Canvas;
     color: GrayText;
+    border-color: GrayText;
   }
 }
 @media print {
@@ -3894,11 +3985,14 @@ a.badge[aria-disabled="true"] {
  * Surface, border, radius, padding, density, and elevation stay local here.
  * Direct header/footer children are structural slots; a direct footer is
  * anchored to the card's bottom edge when extra block space is available (so
- * price/action rows align across equal-height cards in a grid). Page layout
- * remains the job of markup and layout primitives outside the card.
+ * price/action rows align across equal-height cards in a grid). A bare card
+ * owns its direct-child rhythm; a layout primitive on the same element takes
+ * over that layout. Page layout remains the job of markup and layout
+ * primitives outside the card.
  *
  * Public hooks:
  * --card-pad
+ * --card-gap
  * --card-radius
  * --card-max-inline-size
  *
@@ -3922,6 +4016,7 @@ a.badge[aria-disabled="true"] {
 
 .card {
   --card-pad: var(--space-40);
+  --card-gap: var(--space-30);
   --card-radius: var(--radius-lg);
   --card-max-inline-size: none;
   --card-bg: var(--ui-bg, var(--surface-raised));
@@ -3948,10 +4043,14 @@ a.badge[aria-disabled="true"] {
 :where(.card) {
   display: flex;
   flex-direction: column;
+  gap: var(--card-gap);
 }
 
-.card > * {
+/* Native block margins would add to flex gap because flex-item margins never
+   collapse. Zero specificity keeps intentional child utilities available. */
+:where(.card) > * {
   min-inline-size: 0;
+  margin-block: 0;
 }
 
 .card > :where(header, footer) {
@@ -3978,14 +4077,6 @@ a.badge[aria-disabled="true"] {
   margin-block-start: auto;
 }
 
-.card > :first-child {
-  margin-block-start: 0;
-}
-
-.card > :last-child {
-  margin-block-end: 0;
-}
-
 .card.raised {
   box-shadow: var(--shadow);
 }
@@ -4331,23 +4422,6 @@ html.has-modal-open.had-scrollbar {
   }
 }
 
-@media (forced-colors: active) {
-  dialog.modal {
-    border-color: ButtonText;
-    background: Canvas;
-    color: CanvasText;
-    box-shadow: none;
-  }
-
-  dialog.modal::backdrop {
-    background: Canvas;
-  }
-
-  .dialog-icon {
-    border: var(--border-width) solid CanvasText;
-  }
-}
-
 /* Close controls. A close button is an action attached to a surface, so it
    never participates in the content flow. The modal and the drawer share the
    same simple placement — absolute at the panel's top inline-end, inside the
@@ -4553,12 +4627,6 @@ dialog.drawer nav {
   }
 }
 
-@media (forced-colors: active) {
-  dialog.drawer::backdrop {
-    background: Canvas;
-  }
-}
-
 @media (prefers-reduced-motion: no-preference) {
   dialog.drawer.is-static {
     animation: actual-dialog-static var(--duration-slow) var(--ease);
@@ -4887,13 +4955,6 @@ dialog.drawer > form > header {
   border-block-start: var(--border-width) solid var(--border);
 }
 
-@media (forced-colors: active) {
-  .menu-item:focus-visible {
-    outline: var(--border-width) solid ButtonText;
-    outline-offset: -1px;
-  }
-}
-
 /*
  * Tooltip — supplemental label overlaid near a trigger.
  *
@@ -4920,6 +4981,7 @@ dialog.drawer > form > header {
   max-inline-size: min(24rem, calc(var(--viewport-inline) - 2rem));
   padding: 0.25em 0.6em;
   border-radius: var(--radius-sm);
+  border: var(--border-width) solid transparent;
   background: var(--tooltip-bg);
   color: var(--tooltip-fg);
   font-size: var(--font-size-xs);
@@ -4998,16 +5060,6 @@ dialog.drawer > form > header {
   clip-path: polygon(0 50%, 100% 0, 100% 100%);
 }
 
-@media (forced-colors: active) {
-  .tooltip {
-    --tooltip-bg: Canvas;
-    --tooltip-fg: CanvasText;
-  }
-
-  .tooltip::before {
-    display: none;
-  }
-}
 @media print {
   .tooltip {
     display: none !important;
@@ -5556,6 +5608,9 @@ dialog.drawer > form > header {
   }
 }
 
+/* The initials element (a span or an accessible <abbr title="…">) fills the box.
+   text-decoration: none neutralizes the UA dotted underline on <abbr title="…">
+   inside the circular avatar. */
 .avatar > :first-child:not(:where(img, picture, .badge)) {
   display: inline-grid;
   place-items: center;
@@ -5563,6 +5618,7 @@ dialog.drawer > form > header {
   block-size: 100%;
   overflow: hidden;
   border-radius: inherit;
+  text-decoration: none;
 }
 
 .avatar > img,
@@ -5691,6 +5747,54 @@ a.avatar[aria-disabled="true"] {
   z-index: 1;
 }
 
+/*
+ * Indicator — generic corner positioning for overlaid component content.
+ *
+ * The container only establishes the containing block. The item owns no
+ * paint, size, or ring so badges and other components keep their own visual
+ * contract.
+ *
+ * Internal:
+ * --indicator-translate-x
+ * --indicator-translate-y
+ */
+.indicator {
+  position: relative;
+}
+
+.indicator-item {
+  --indicator-translate-x: 50%;
+  --indicator-translate-y: -50%;
+
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  z-index: 1;
+  transform: translate(var(--indicator-translate-x), var(--indicator-translate-y));
+}
+
+.indicator-item.start {
+  --indicator-translate-x: -50%;
+
+  inset-inline-start: 0;
+  inset-inline-end: auto;
+}
+
+.indicator-item.bottom {
+  --indicator-translate-y: 50%;
+
+  inset-block-start: auto;
+  inset-block-end: 0;
+}
+
+.indicator-item:dir(rtl) {
+  --indicator-translate-x: -50%;
+}
+
+.indicator-item.start:dir(rtl) {
+  --indicator-translate-x: 50%;
+}
+
 /*
  * Key — keyboard keys and shortcut tokens for UI chrome.
  *
@@ -5821,12 +5925,6 @@ a.avatar[aria-disabled="true"] {
   }
 }
 
-@media (forced-colors: active) {
-  .chat-bubble {
-    border-color: CanvasText;
-  }
-}
-
 /*
  * Fixed floating action placement and a native-details speed dial.
  * Button owns the action's size, shape, and intent; FAB only owns placement.
@@ -5897,6 +5995,7 @@ a.avatar[aria-disabled="true"] {
   max-inline-size: 16rem;
   padding: var(--space-10) var(--space-20);
   border-radius: var(--radius);
+  border: var(--border-width) solid transparent;
   background: var(--surface);
   color: var(--text);
   box-shadow: var(--shadow);
@@ -5919,21 +6018,316 @@ a.avatar[aria-disabled="true"] {
   transform: rotate(45deg);
 }
 
+@media print {
+  .fab {
+    display: none;
+  }
+}
+
+/*
+ * Rating — integer star rating drawn on native radio inputs.
+ *
+ * The checked radio remains the functional baseline. :has() progressively
+ * fills preceding stars without reversing DOM or keyboard order. Forced
+ * colors restores the platform radio presentation.
+ *
+ * Public hooks:
+ * --rating-size
+ * --rating-gap
+ * --rating-color
+ * --rating-empty
+ * --rating-star
+ */
+:where(.rating) {
+  --intent: initial;
+}
+
+.rating {
+  --rating-size: 1.25rem;
+  --rating-gap: 0.1rem;
+  --rating-color: var(--intent, var(--warning));
+  --rating-empty: var(--border);
+  --rating-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 16 16'%3E%3Cpath d='M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 0 0 .95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 0 0-.364 1.118l1.07 3.292c.3.922-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 0 0-1.175 0l-2.8 2.034c-.783.57-1.838-.196-1.539-1.118l1.07-3.292a1 1 0 0 0-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 0 0 .951-.69l1.07-3.292Z'/%3E%3C/svg%3E");
+
+  display: inline-flex;
+  gap: 0;
+  color: var(--rating-color);
+}
+
+.rating > input[type="radio"] {
+  appearance: none;
+  flex: 0 0 auto;
+  inline-size: calc(var(--rating-size) + var(--rating-gap));
+  block-size: var(--rating-size);
+  margin: 0;
+  border: 0;
+  background: var(--rating-empty);
+  /* Contiguous radio boxes own hit-testing; the centered mask preserves the
+     star's proportions while leaving a purely visual gap between values. */
+  -webkit-mask: var(--rating-star) center / var(--rating-size) var(--rating-size) no-repeat;
+  mask: var(--rating-star) center / var(--rating-size) var(--rating-size) no-repeat;
+  cursor: pointer;
+  transition: background-color var(--duration);
+}
+
+.rating > input[type="radio"]:checked {
+  background: var(--rating-color);
+}
+
+.rating > input[type="radio"]:disabled {
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
+}
+
+.rating > input[type="radio"]:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+  background: var(--rating-color);
+}
+
+/* Browsers without :has() still show the selected native radio as one filled
+   star. The enhancement only adds cumulative checked and hover previews. */
+@supports selector(:has(*)) {
+  .rating > input[type="radio"]:has(~ input[type="radio"]:checked) {
+    background: var(--rating-color);
+  }
+
+  @media (hover: hover) {
+    .rating > input[type="radio"]:not(:disabled):hover,
+    .rating > input[type="radio"]:has(~ input[type="radio"]:not(:disabled):hover) {
+      background: var(--rating-color);
+    }
+
+    /* A hovered value previews exactly that value: later stars are emptied,
+       including a previously checked star beyond the pointer. */
+    .rating > input[type="radio"]:not(:disabled):hover ~ input[type="radio"] {
+      background: var(--rating-empty);
+    }
+  }
+}
+
+.rating.sm {
+  --rating-size: 1rem;
+}
+
+.rating.lg {
+  --rating-size: 1.75rem;
+}
+
 @media (forced-colors: active) {
-  .fab-label {
-    border: var(--border-width) solid CanvasText;
-    box-shadow: none;
+  .rating > input[type="radio"] {
+    appearance: auto;
+    inline-size: auto;
+    block-size: auto;
+    background: Canvas;
+    -webkit-mask: none;
+    mask: none;
+    opacity: 1;
   }
 }
 
+/*
+ * Steps — semantic ordered-list progression. One intrinsic layout: items fill
+ * the row when they fit and hold a minimum width otherwise, so the sequence
+ * scrolls horizontally only when it genuinely cannot fit. No breakpoint decides
+ * this — the item minimum tracks the real content, not an arbitrary width.
+ *
+ * Markers come from the list counter; state stays in .complete and
+ * aria-current="step", so the component needs no runtime.
+ *
+ * Public hooks:
+ * --step-size
+ * --step-min
+ * --step-gap
+ * --step-line-size
+ * --step-marker-radius
+ * --step-complete-mark
+ * --step-connector
+ *
+ * Internal:
+ * --step-marker-bg
+ * --step-marker-border
+ * --step-marker-fg
+ * --step-line
+ */
+.steps {
+  --step-size: 1.75rem;
+  --step-min: 7rem;
+  --step-gap: var(--space-20);
+  --step-line-size: var(--border-width);
+  --step-marker-bg: var(--surface);
+  --step-marker-border: var(--border);
+  --step-marker-fg: var(--text-muted);
+  --step-marker-radius: var(--radius-full);
+  --step-line: var(--border);
+
+  counter-reset: actual-step;
+  display: flex;
+  inline-size: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  /* Fill when it fits, scroll when it cannot: items never shrink below
+     --step-min, so labels keep a readable width and the sequence scrolls
+     horizontally instead of squishing. overscroll-behavior keeps the scroll
+     from chaining to the page. */
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+}
+
+.steps > li {
+  position: relative;
+  display: grid;
+  flex: 1 0 var(--step-min);
+  grid-template-rows: var(--step-size) auto;
+  gap: var(--step-gap);
+  justify-items: center;
+  min-inline-size: max(var(--step-size), var(--step-min));
+  color: var(--text-muted);
+  text-align: center;
+  counter-increment: actual-step;
+}
+
+.steps > li::before {
+  content: counter(actual-step);
+  position: relative;
+  z-index: 1;
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--step-size);
+  block-size: var(--step-size);
+  border: var(--border-width) solid var(--step-marker-border);
+  border-radius: var(--step-marker-radius);
+  background: var(--step-marker-bg);
+  color: var(--step-marker-fg);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-strong);
+  line-height: 1;
+}
+
+.steps > li::after {
+  content: "";
+  position: absolute;
+  inset-block-start: calc((var(--step-size) - var(--step-line-size)) / 2);
+  inset-inline-start: calc(50% + var(--step-size) / 2);
+  inline-size: calc(100% - var(--step-size));
+  block-size: var(--step-line-size);
+  /* A custom property resolves its var() before inheritance, so a default
+     --step-connector: var(--step-line) on .steps would freeze the parent line
+     color and a .complete child's connector would never follow its own line.
+     Falling back to the local --step-line here keeps each connector in sync;
+     an explicit --step-connector still wins when the author sets one. */
+  background: var(--step-connector, var(--step-line));
+}
+
+.steps > li:last-child::after {
+  content: none;
+}
+
+.steps > :is(.complete, [aria-current="step"]) {
+  --step-marker-bg: var(--state-selected);
+  --step-marker-border: var(--state-selected);
+  --step-marker-fg: var(--state-selected-fg);
+
+  color: var(--text);
+}
+
+/* Thicker border is the selected affordance in every mode — structural, and it
+   never competes with the outline channel owned by focus. */
+.steps > :is(.complete, [aria-current="step"])::before {
+  border-width: calc(var(--border-width) * 2);
+}
+
+.steps > .complete {
+  --step-line: var(--state-selected);
+}
+
+/* A finished step may replace its number with a mark (e.g. a check glyph):
+   --step-complete-mark accepts any content value and falls back to the
+   counter, so existing numbered steppers are unchanged. */
+.steps > .complete::before {
+  content: var(--step-complete-mark, counter(actual-step));
+}
+
+
+/* Navigation */
+/*
+ * Primary application navigation. The component owns the navigation surface
+ * and item states; app-layout owns whether that surface is a bottom bar or
+ * labelled side navigation.
+ *
+ * Public hooks:
+ * --app-nav-size
+ * --app-nav-gap
+ */
+:where(.app-nav) {
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+}
+
+.app-nav {
+  --app-nav-size: 4rem;
+  --app-nav-gap: var(--space-10);
+
+  position: sticky;
+  inset-block-end: 0;
+  z-index: var(--z-sticky);
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  gap: var(--app-nav-gap);
+  min-block-size: calc(var(--app-nav-size) + env(safe-area-inset-bottom));
+  padding-block: var(--space-10) max(var(--space-10), env(safe-area-inset-bottom));
+  padding-inline: var(--space-10);
+  border-block-start: var(--border-width) solid var(--ui-border, var(--border));
+  background: var(--ui-bg, var(--surface));
+  color: var(--ui-fg, var(--text-muted));
+}
+
+.app-nav > a {
+  display: grid;
+  grid-template-rows: auto auto;
+  place-content: center;
+  justify-items: center;
+  gap: var(--space-10);
+  min-inline-size: 0;
+  min-block-size: var(--control-size-lg);
+  padding-inline: var(--space-10);
+  border-radius: var(--radius);
+  color: inherit;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-tight);
+  text-align: center;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+
+.app-nav > a > :where(svg, img, [aria-hidden="true"]) {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.app-nav > a:hover {
+  background: var(--surface-subtle);
+  color: var(--text);
+}
+
+.app-nav > a:where([aria-current]:not([aria-current="false"])) {
+  background: var(--state-selected);
+  color: var(--state-selected-fg);
+  font-weight: var(--font-weight-bold);
+}
+
 @media print {
-  .fab {
+  .app-nav {
     display: none;
   }
 }
 
-
-/* Navigation */
 /*
  * Navbar — top-level navigation bar.
  *
@@ -6003,6 +6397,7 @@ a.avatar[aria-disabled="true"] {
 .nav-link:where([aria-current]:not([aria-current="false"])) {
   background: var(--surface-subtle);
   color: var(--text);
+  font-weight: var(--font-weight-bold);
 }
 
 .nav-link:hover {
@@ -6010,7 +6405,9 @@ a.avatar[aria-disabled="true"] {
   color: var(--text);
 }
 
-/* Nav list — a vertical navigation list. Used by .drawer for stacked links. */
+/* Nav list — a vertical navigation list. Used by .drawer for stacked links.
+   Links fill each row so the whole line is an interactive target; the
+   horizontal .navbar-nav links keep their intrinsic size. */
 .nav-list {
   display: grid;
   --gap: var(--space-20);
@@ -6024,20 +6421,8 @@ a.avatar[aria-disabled="true"] {
   margin: 0;
 }
 
-@media (forced-colors: active) {
-  .nav-link:where([aria-current]:not([aria-current="false"])) {
-    outline: var(--border-width) solid Highlight;
-    background: Highlight;
-    color: HighlightText;
-    forced-color-adjust: none;
-  }
-
-  .nav-link:hover:not(:where([aria-current]:not([aria-current="false"]))) {
-    outline: var(--border-width) solid ButtonText;
-    outline-offset: 2px;
-    background: Canvas;
-    color: CanvasText;
-  }
+.nav-list .nav-link {
+  inline-size: 100%;
 }
 
 /*
@@ -6166,13 +6551,14 @@ a.avatar[aria-disabled="true"] {
 }
 
 .tab {
+  /* Positioning context for the selected indicator pseudo. */
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--tab-gap, 0.375em);
   min-block-size: var(--control-size);
   padding-inline: var(--space-30);
   border: 0;
-  border-block-end: 2px solid transparent;
   border-radius: 0;
   background: transparent;
   color: var(--text-muted);
@@ -6184,8 +6570,6 @@ a.avatar[aria-disabled="true"] {
 
 .tabs[aria-orientation="vertical"] .tab {
   justify-content: flex-start;
-  border-block-end: 0;
-  border-inline-end: 2px solid transparent;
   padding-inline-end: var(--space-40);
 }
 
@@ -6206,30 +6590,29 @@ a.avatar[aria-disabled="true"] {
 }
 
 .tab[aria-selected="true"] {
-  border-block-end-color: var(--intent, var(--state-selected));
   color: var(--intent, var(--state-selected));
+  /* Second, layout-free selected cue — the underline alone is color-only in
+     forced colors. */
+  font-weight: var(--font-weight-bold);
 }
 
-.tabs[aria-orientation="vertical"] .tab[aria-selected="true"] {
-  border-block-end-color: transparent;
-  border-inline-end-color: var(--intent, var(--state-selected));
+/* The selected indicator lives on a positioned pseudo so that only the active
+   tab owns an underline: a transparent border on every tab would surface in
+   forced colors and erase the distinction. currentColor follows the palette the
+   UA forces, so no forced-colors block is needed. */
+.tab[aria-selected="true"]::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  border-block-end: 2px solid currentColor;
 }
 
-@media (forced-colors: active) {
-  .tab:hover:not(:where(:disabled, [aria-disabled="true"])) {
-    text-decoration: underline;
-    text-underline-offset: 0.18em;
-  }
-
-  .tab[aria-selected="true"] {
-    border-block-end-color: Highlight;
-    color: Highlight;
-  }
-
-  .tabs[aria-orientation="vertical"] .tab[aria-selected="true"] {
-    border-block-end-color: transparent;
-    border-inline-end-color: Highlight;
-  }
+.tabs[aria-orientation="vertical"] .tab[aria-selected="true"]::after {
+  inset-block: 0;
+  inset-inline: auto 0;
+  border-block-end: 0;
+  border-inline-end: 2px solid currentColor;
 }
 
 /*
@@ -6262,6 +6645,90 @@ a.avatar[aria-disabled="true"] {
 
 
 /* Data */
+/*
+ * Application list — repeated rows with optional leading and trailing regions.
+ * Content determines the number of lines; the component only owns the row
+ * geometry, dividers, and supporting-text treatment.
+ *
+ * Public hooks:
+ * --list-item-min-size
+ * --list-item-pad-block
+ * --list-item-pad-inline
+ * --list-item-gap
+ * --list-divider
+ */
+.list {
+  --list-item-min-size: var(--control-size-lg);
+  --list-item-pad-block: var(--space-30);
+  --list-item-pad-inline: 0;
+  --list-item-gap: var(--gap);
+  --list-divider: var(--border-width) solid var(--border);
+
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  border-block-start: var(--list-divider);
+  list-style: none;
+}
+
+.list > li {
+  margin: 0;
+}
+
+.list > :where(.list-item),
+.list > li > .list-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--list-item-gap);
+  min-block-size: var(--list-item-min-size);
+  padding-block: var(--list-item-pad-block);
+  padding-inline: var(--list-item-pad-inline);
+}
+
+.list > .list-item + .list-item,
+.list > li + li {
+  border-block-start: var(--list-divider);
+}
+
+a.list-item {
+  color: inherit;
+  text-decoration: none;
+}
+
+a.list-item:hover {
+  background: var(--surface-subtle);
+}
+
+.list-item-content {
+  min-inline-size: 0;
+}
+
+.list-item-title,
+.list-item-text {
+  display: block;
+  margin: 0;
+}
+
+.list-item-text {
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+  overflow-wrap: anywhere;
+}
+
+.list-item-trailing {
+  justify-self: end;
+  min-inline-size: 0;
+}
+
+@media print {
+  .list > :where(.list-item),
+  .list > li > .list-item {
+    break-inside: avoid;
+  }
+}
+
 /*
  * Table — structured tabular data.
  *
@@ -6560,6 +7027,7 @@ a.avatar[aria-disabled="true"] {
   display: inline-grid;
   padding: var(--aura-width);
   border-radius: calc(var(--aura-radius) + var(--aura-width));
+  border: var(--border-width) solid transparent;
   background: var(--aura-color);
   background: conic-gradient(from var(--aura-angle), transparent 0 65%, var(--aura-color));
 }
@@ -6610,16 +7078,6 @@ a.avatar[aria-disabled="true"] {
   }
 }
 
-@media (forced-colors: active) {
-  .aura {
-    background: CanvasText;
-  }
-
-  .aura::before {
-    display: none;
-  }
-}
-
 /* Utilities — small, single-purpose escape hatches. */
 /*
  * Small, single-purpose utilities for common escape hatches.