@neuravision/construct 2.1.1 → 2.1.2

package/components/datum.css

@@ -6,9 +6,12 @@
    promote that signature from focus rings and the intro page into
    reusable structural vocabulary every surface can speak.
 
-   Accessibility contract (must hold across light/dark/high-contrast):
-     · orange as TEXT  → --color-brand-accent-active (orange.700, ≥4.5:1)
-     · orange as EDGE/RULE (non-text) → --color-brand-accent (orange.500)
+   Accessibility contract (must hold across all built-in themes):
+     · orange as TEXT → never; use --color-text-* neutrals (orange fails
+       4.5:1 as small text on several theme surfaces)
+     · orange as FILL vs muted tracks → --color-brand-accent-strong
+       (validated ≥3:1 against bg.muted/canvas/surface per theme)
+     · orange as EDGE/RULE (decorative, on canvas/surface) → --color-brand-accent
    ============================================================ */
 
 /* ── Eyebrow ──
@@ -32,27 +35,76 @@
 
 .ct-eyebrow::before {
   content: '';
-  width: 24px;
-  height: 3px;
+  width: var(--component-datum-tick-width);
+  height: var(--component-datum-tick-height);
   border-radius: var(--radius-xs);
   background: var(--color-brand-accent);
 }
 
+/* ── Numbered eyebrow ──
+   Sheet numbers, like an engineering drawing set: `--numbered` inserts
+   an auto-incremented, zero-padded counter between tick and label.
+   Scope numbering with a `.ct-eyebrow-set` ancestor (or any element
+   that declares `counter-reset: ct-eyebrow`). */
+.ct-eyebrow-set {
+  counter-reset: ct-eyebrow;
+}
+
+.ct-eyebrow--numbered {
+  counter-increment: ct-eyebrow;
+}
+
+.ct-eyebrow--numbered::before {
+  order: -2;
+}
+
+.ct-eyebrow--numbered::after {
+  content: counter(ct-eyebrow, decimal-leading-zero);
+  order: -1;
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
 /* ── Datum scale ──
    A measured reference line: a hairline baseline with hanging ruler
    ticks (minor every 12px, major every 60px) and an orange "origin"
    segment marking zero. Decorative — mark it role="presentation". */
 .ct-datum-scale {
-  height: 9px;
+  --ct-datum-scale-accent: var(--color-brand-accent);
+  --ct-datum-scale-origin: var(--component-datum-origin-length);
+
+  height: var(--component-datum-scale-height);
   background:
     /* orange origin segment — the datum's zero */
-    linear-gradient(var(--color-brand-accent), var(--color-brand-accent)) 0 0 / 48px 2px no-repeat,
+    linear-gradient(var(--ct-datum-scale-accent), var(--ct-datum-scale-accent)) 0 0 / var(--ct-datum-scale-origin) 2px no-repeat,
     /* full-width baseline hairline */
     linear-gradient(var(--color-border-strong), var(--color-border-strong)) 0 0 / 100% 1px no-repeat,
     /* major ticks */
-    repeating-linear-gradient(90deg, var(--color-border-strong) 0 1px, transparent 1px 60px) 0 0 / 100% 8px no-repeat,
+    repeating-linear-gradient(90deg, var(--color-border-strong) 0 1px, transparent 1px var(--component-datum-scale-major-step)) 0 0 / 100% 8px no-repeat,
     /* minor ticks */
-    repeating-linear-gradient(90deg, var(--color-border-default) 0 1px, transparent 1px 12px) 0 0 / 100% 5px no-repeat;
+    repeating-linear-gradient(90deg, var(--color-border-default) 0 1px, transparent 1px var(--component-datum-scale-minor-step)) 0 0 / 100% 5px no-repeat;
+}
+
+/* RTL: the origin and tick phase anchor to the inline start. */
+.ct-datum-scale:is([dir='rtl'] *, :dir(rtl)) {
+  background:
+    linear-gradient(var(--ct-datum-scale-accent), var(--ct-datum-scale-accent)) 100% 0 / var(--ct-datum-scale-origin) 2px no-repeat,
+    linear-gradient(var(--color-border-strong), var(--color-border-strong)) 0 0 / 100% 1px no-repeat,
+    repeating-linear-gradient(270deg, var(--color-border-strong) 0 1px, transparent 1px var(--component-datum-scale-major-step)) 0 0 / 100% 8px no-repeat,
+    repeating-linear-gradient(270deg, var(--color-border-default) 0 1px, transparent 1px var(--component-datum-scale-minor-step)) 0 0 / 100% 5px no-repeat;
+}
+
+/* ── Progress variant ──
+   The origin segment becomes meaning-bearing: its length reports
+   progress. Set `--ct-datum-scale-progress` (a percentage) on the
+   element and give it `role="progressbar"` with the matching
+   `aria-valuenow/min/max`. Meaning-bearing fill uses accent-strong,
+   validated ≥3:1 against muted/canvas/surface tracks per theme. */
+.ct-datum-scale--progress {
+  --ct-datum-scale-accent: var(--color-brand-accent-strong);
+  --ct-datum-scale-origin: var(--ct-datum-scale-progress, 0%);
+
+  transition: background-size var(--duration-normal) var(--easing-standard);
 }
 
 /* ── Spec datasheet ──
@@ -103,7 +155,7 @@
 :is(.ct-metric--active, .ct-metric[data-state='active'], .ct-spec--origin) {
   --ct-metric-accent: var(--color-brand-accent);
 
-  box-shadow: inset 0 var(--border-thick) 0 0 var(--ct-metric-accent);
+  box-shadow: inset 0 var(--component-datum-edge-width) 0 0 var(--ct-metric-accent);
 }
 
 :is(.ct-metric__value, .ct-spec__value) {
@@ -186,7 +238,7 @@
 
 .ct-metric[data-status],
 .ct-metric[data-state='error'] {
-  box-shadow: inset var(--border-thick) 0 0 0 var(--ct-metric-accent);
+  box-shadow: inset var(--component-datum-edge-width) 0 0 0 var(--ct-metric-accent);
 }
 
 .ct-metric:is([aria-busy='true'], [data-state='loading']) {
@@ -197,6 +249,27 @@
   opacity: var(--opacity-disabled);
 }
 
+/* ── Datum frame ──
+   The corner registration mark generalised beyond cards: an opt-in
+   "exhibit" treatment for figures, code samples, and media. Decorative;
+   forced colors keeps the borders via CanvasText automatically. */
+.ct-datum-frame {
+  position: relative;
+}
+
+.ct-datum-frame::before {
+  content: '';
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: var(--component-datum-mark-size);
+  height: var(--component-datum-mark-size);
+  border-block-start: var(--border-medium) solid var(--color-brand-accent);
+  border-inline-start: var(--border-medium) solid var(--color-brand-accent);
+  border-start-start-radius: var(--radius-lg);
+  pointer-events: none;
+}
+
 @media (forced-colors: active) {
   :is(.ct-metric--active, .ct-metric[data-state='active'], .ct-metric[data-status], .ct-metric[data-state='error'], .ct-spec--origin) {
     border-block-start: var(--border-medium) solid currentColor;

package/components/dropdown.css

@@ -146,7 +146,7 @@
 /* ── Danger item ─────────────────────────────────────────────────── */
 
 .ct-dropdown__item--danger {
-  color: var(--color-state-danger);
+  color: var(--color-state-danger-text);
 }
 
 @media (hover: hover) {
@@ -158,11 +158,11 @@
 .ct-dropdown__item--danger:focus-visible,
 .ct-dropdown__item--danger[data-highlighted] {
   background: var(--color-state-danger-surface);
-  outline-color: var(--color-state-danger);
+  outline-color: var(--color-state-danger-text);
 }
 
 .ct-dropdown__item--danger .ct-dropdown__item-icon {
-  color: var(--color-state-danger);
+  color: var(--color-state-danger-text);
 }
 
 .ct-dropdown__item--danger .ct-dropdown__item-shortcut {
@@ -389,6 +389,15 @@
   --ct-dropdown-item-gap: var(--space-4);
 }
 
+/* ── Construct 44×44 target policy (WCAG 2.2 SC 2.5.5 is AAA) ────── */
+
+@media (pointer: coarse) {
+  .ct-dropdown__item,
+  .ct-dropdown__sub-trigger {
+    min-block-size: 44px;
+  }
+}
+
 /* ── Reduced motion ──────────────────────────────────────────────── */
 
 @media (prefers-reduced-motion: reduce) {
@@ -399,3 +408,14 @@
     transition: none;
   }
 }
+
+/* ── Forced colors ───────────────────────────────────────────────── */
+
+@media (forced-colors: active) {
+  /* The radio-item dot is background-drawn and must survive forced
+     backgrounds. */
+  .ct-dropdown__item[aria-checked='true'] .ct-dropdown__item-radio::before {
+    background: SelectedItem;
+    forced-color-adjust: none;
+  }
+}

package/components/field.css

@@ -16,12 +16,14 @@
 
 .ct-field__error {
   font-size: var(--font-size-sm);
-  color: var(--color-state-danger);
+  color: var(--color-state-danger-text);
 }
 
 .ct-field__label--required::after {
-  content: ' *';
-  color: var(--color-state-danger);
+  /* Alt-text syntax hides the decorative asterisk from assistive tech;
+     the `required` attribute is the programmatic signal. */
+  content: ' *' / '';
+  color: var(--color-state-danger-text);
 }
 
 .ct-field__counter {
@@ -31,7 +33,7 @@
 }
 
 .ct-field__counter--limit {
-  color: var(--color-state-danger);
+  color: var(--color-state-danger-text);
 }
 
 .ct-field__row {

package/components/file-upload.css

@@ -106,7 +106,7 @@
 }
 
 .ct-file-upload__error {
-  color: var(--color-state-danger);
+  color: var(--color-state-danger-text);
   font-size: var(--font-size-sm);
 }
 

package/components/list.css

@@ -90,6 +90,9 @@
   min-height: 0;
   text-decoration: none;
   color: inherit;
+  /* The datum edge slides in on selection instead of popping. */
+  transition: background var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard);
 }
 
 /* ── Item Slots ── */
@@ -222,7 +225,7 @@
 .ct-list__item[aria-selected='true'] {
   background: var(--ct-list-item-bg-active);
   /* The datum: an orange leading edge marks the active/selected item. */
-  box-shadow: inset var(--border-thick) 0 0 0 var(--color-brand-accent);
+  box-shadow: inset var(--component-datum-edge-width) 0 0 0 var(--color-brand-accent);
 }
 
 .ct-list__item--active .ct-list__item-title,
@@ -351,7 +354,8 @@
 .ct-list--nav .ct-list__item {
   cursor: pointer;
   transition: background var(--duration-fast) var(--easing-standard),
-    color var(--duration-fast) var(--easing-standard);
+    color var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard);
 }
 
 @media (hover: hover) {
@@ -475,3 +479,25 @@
     animation: none;
   }
 }
+
+/* ── Forced Colors ── */
+
+@media (forced-colors: active) {
+  /* The datum edge is an inset box-shadow, which forced colors drops —
+     re-encode it as a border. */
+  .ct-list__item--active,
+  .ct-list__item[data-state='active'],
+  .ct-list__item[aria-selected='true'] {
+    border-inline-start: var(--component-datum-edge-width) solid SelectedItem;
+  }
+
+  /* Skeleton rows hide their placeholder text with `color: transparent`;
+     keep the decorative loading state hidden when forced colors would
+     otherwise reveal it. */
+  .ct-list__item--skeleton .ct-list__item-leading,
+  .ct-list__item--skeleton .ct-list__item-title,
+  .ct-list__item--skeleton .ct-list__item-description,
+  .ct-list__item--skeleton .ct-list__item-trailing {
+    forced-color-adjust: none;
+  }
+}

package/components/navbar.css

@@ -31,7 +31,8 @@
   gap: var(--ct-navbar-gap);
   width: 100%;
   min-width: 0;
-  height: var(--ct-navbar-height);
+  /* min-height, not height: the bar must grow with text scaling. */
+  min-height: var(--ct-navbar-height);
   padding: var(--ct-navbar-padding-y) var(--ct-navbar-padding-x);
   background: var(--ct-navbar-bg);
   border-bottom: var(--border-thin) solid var(--ct-navbar-border-color);
@@ -462,6 +463,8 @@
 
 /* ── Sticky ────────────────────────────────────────────────────── */
 
+/* Consumers: set --ct-scroll-offset-top on :root (see foundations.css) so
+   scrolled-to content is not obscured behind the bar (WCAG 2.4.11). */
 .ct-navbar--sticky {
   position: sticky;
   inset-block-start: 0;
@@ -469,6 +472,8 @@
 
 /* ── Fixed ─────────────────────────────────────────────────────── */
 
+/* Consumers: set --ct-scroll-offset-top on :root (see foundations.css) so
+   scrolled-to content is not obscured behind the bar (WCAG 2.4.11). */
 .ct-navbar--fixed {
   position: fixed;
   inset-block-start: 0;
@@ -673,6 +678,14 @@
   }
 }
 
+/* ── Construct 44×44 target policy (WCAG 2.2 SC 2.5.5 is AAA) ──── */
+
+@media (pointer: coarse) {
+  .ct-navbar__link {
+    min-height: 44px;
+  }
+}
+
 /* ── Reduced Motion ────────────────────────────────────────────── */
 
 @media (prefers-reduced-motion: reduce) {

package/components/pagination.css

@@ -110,6 +110,15 @@
   --ct-pagination-line-height: var(--line-height-md);
 }
 
+/* Construct 44×44 target policy: --control-height-xs is not coarse-remapped
+   in _shared.css, so the small variant is bumped explicitly. */
+@media (pointer: coarse) {
+  .ct-pagination--sm {
+    --ct-pagination-height: 44px;
+    --ct-pagination-min-width: 44px;
+  }
+}
+
 /* ── Pagination: Responsive ───────────────────────────────── */
 
 @media (max-width: 599px) { /* < sm breakpoint (600px) */
@@ -129,3 +138,12 @@
     transition: none;
   }
 }
+
+/* ── Pagination: Forced Colors ────────────────────────────── */
+
+@media (forced-colors: active) {
+  .ct-pagination__link[aria-current='page'] {
+    outline: var(--border-medium) solid currentColor;
+    outline-offset: calc(-1 * var(--border-medium));
+  }
+}

package/components/progress-bar.css

@@ -4,12 +4,16 @@
   --ct-progress-height: 8px;
   --ct-progress-radius: var(--radius-pill);
   --ct-progress-bg: var(--color-bg-muted);
-  --ct-progress-fill: var(--color-brand-accent);
+  /* accent-strong, not accent: the fill must hold 3:1 against the muted
+     track (1.4.11) — validated as "strong accent on muted" per theme. */
+  --ct-progress-fill: var(--color-brand-accent-strong);
 
   width: 100%;
   height: var(--ct-progress-height);
   border-radius: var(--ct-progress-radius);
   background: var(--ct-progress-bg);
+  /* the track boundary, so the component is identifiable on any surface */
+  border: var(--border-thin) solid var(--color-border-default);
   overflow: hidden;
 }
 
@@ -52,5 +56,22 @@
 @media (prefers-reduced-motion: reduce) {
   .ct-progress-bar--indeterminate .ct-progress-bar__track {
     animation: none;
+    /* A frozen 30% sweep reads as determinate-and-stuck; a full-width
+       dimmed fill reads as "busy, extent unknown". */
+    width: 100%;
+    opacity: 0.4;
+  }
+}
+
+@media (forced-colors: active) {
+  /* Backgrounds are forced to Canvas — without these the whole bar
+     disappears (mirrors the meter's forced-colors strategy). */
+  .ct-progress-bar {
+    border: 1px solid ButtonText;
+  }
+
+  .ct-progress-bar__track {
+    background: SelectedItem;
+    forced-color-adjust: none;
   }
 }

package/components/select-menu.css

@@ -257,6 +257,14 @@
   --ct-select-menu-option-padding-y: var(--space-4);
 }
 
+/* ── Construct 44×44 target policy (WCAG 2.2 SC 2.5.5 is AAA) ───── */
+
+@media (pointer: coarse) {
+  .ct-select-menu__option {
+    min-block-size: 44px;
+  }
+}
+
 /* ── Reduced motion ─────────────────────────────────────────────── */
 
 @media (prefers-reduced-motion: reduce) {

package/components/select.css

@@ -28,3 +28,11 @@
   appearance: none;
   padding-inline-end: calc(var(--space-4) + 0.75em + var(--space-4));
 }
+
+@media (forced-colors: active) {
+  /* The native arrow is removed via appearance: none, so the mask-drawn
+     chevron must be repainted with system ink. */
+  .ct-select-wrap::after {
+    background-color: ButtonText;
+  }
+}

package/components/sidebar.css

@@ -40,6 +40,8 @@
   box-shadow: var(--shadow-lg);
   /* LTR: slide in from the left */
   translate: -100% 0;
+  /* keep off-canvas content out of tab order and the accessibility tree */
+  visibility: hidden;
 }
 
 /* RTL: overlay sidebar starts at inline-start (right edge) — slide in from the right */
@@ -49,6 +51,7 @@
 
 .ct-sidebar--over[data-state='open'] {
   translate: 0 0;
+  visibility: visible;
 }
 
 /* Push variant: slides off-screen and collapses flex space via negative margin */
@@ -129,7 +132,8 @@
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   transition: background var(--duration-fast) var(--easing-standard),
-    color var(--duration-fast) var(--easing-standard);
+    color var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard);
   cursor: pointer;
 }
 
@@ -151,7 +155,7 @@
   color: var(--color-brand-primary);
   font-weight: var(--font-weight-semibold);
   /* The datum: an orange leading edge marks the current location. */
-  box-shadow: inset var(--border-thick) 0 0 0 var(--color-brand-accent);
+  box-shadow: inset var(--component-datum-edge-width) 0 0 0 var(--color-brand-accent);
 }
 
 .ct-nav-item__icon {
@@ -183,3 +187,12 @@
   background: var(--color-brand-accent);
   color: var(--color-brand-on-accent);
 }
+
+@media (forced-colors: active) {
+  /* The datum edge is an inset box-shadow, which forced colors drops —
+     re-encode it as a border. */
+  .ct-nav-item--active,
+  .ct-nav-item[aria-current='page'] {
+    border-inline-start: var(--component-datum-edge-width) solid SelectedItem;
+  }
+}

package/components/skip-link.css

@@ -12,7 +12,8 @@
   z-index: var(--z-tooltip);
   padding: var(--space-4) var(--space-6);
   background: var(--color-brand-primary);
-  color: var(--color-text-inverse);
+  /* on-primary, not inverse: inverse is near-invisible on the light primary of the dark theme */
+  color: var(--color-text-on-primary);
   font-family: var(--font-family-body);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
@@ -27,7 +28,10 @@
 .ct-skip-link:focus,
 .ct-skip-link:focus-visible {
   transform: translateY(0);
-  outline: 2px solid var(--color-focus-ring);
+  /* on-primary, not the focus ring: the inset outline draws on the primary
+     background, and on-primary is the pairing validated against it in every
+     theme (the orange ring fails 3:1 on the dark theme's light primary). */
+  outline: 2px solid var(--color-text-on-primary);
   outline-offset: -2px;
 }
 

package/components/slider.css

@@ -23,6 +23,9 @@
   appearance: none;
   width: 100%;
   height: var(--ct-slider-thumb-size);
+  /* WCAG 2.2 SC 2.5.8: small thumbs shrink the strip below 24px — keep
+     the pointer target at least that tall in fine-pointer contexts. */
+  min-height: 24px;
   background: transparent;
   cursor: pointer;
   margin: 0;
@@ -199,6 +202,8 @@
   position: relative;
   flex: 1;
   height: var(--ct-slider-thumb-size);
+  /* Same 24px pointer-target floor as the single-thumb input strip. */
+  min-height: 24px;
 }
 
 .ct-slider--range .ct-slider__track::after {

package/components/switch.css

@@ -54,6 +54,9 @@
 .ct-switch__input:disabled {
   background: var(--color-border-subtle);
   cursor: not-allowed;
+  /* disabled is encoded via the muted track color; opting out of the global
+     :disabled opacity avoids double dimming (same pattern as the slider) */
+  opacity: 1;
 }
 
 .ct-switch__input:focus-visible {
@@ -61,12 +64,19 @@
   outline-offset: 2px;
 }
 
+/* WCAG 2.2 SC 2.5.8: the small track is only 20px tall, so every pointer
+   context gets at least a 24px-tall hit area. */
+.ct-switch__input::before {
+  content: '';
+  position: absolute;
+  inset-block: calc((var(--ct-switch-height) - 24px) / 2);
+  inset-inline: 0;
+}
+
 /* Construct 44×44 target policy: meets the size in WCAG 2.2 SC 2.5.5
    (AAA) and exceeds the AA minimum in SC 2.5.8. */
 @media (pointer: coarse) {
   .ct-switch__input::before {
-    content: '';
-    position: absolute;
     inset-block: calc((var(--ct-switch-height) - 44px) / 2);
     inset-inline: calc((var(--ct-switch-width) - 44px) / 2);
   }
@@ -81,3 +91,53 @@
   --ct-switch-width: 52px;
   --ct-switch-height: 28px;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-switch__input,
+  .ct-switch__input::after {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  /* Track and thumb are shadow/background-drawn; redraw both with
+     system-palette borders so on/off state survives without shadows. */
+  .ct-switch__input {
+    border: 1px solid ButtonText;
+    background: Canvas;
+  }
+
+  .ct-switch__input::after {
+    border: 1px solid ButtonText;
+    background: Canvas;
+    box-shadow: none;
+  }
+
+  /* The checked fill must survive forced backgrounds; the extra hover
+     selector matches the specificity of the base hover rule. */
+  .ct-switch__input:checked,
+  .ct-switch__input:checked:not(:disabled):hover {
+    background: SelectedItem;
+    border-color: ButtonText;
+    forced-color-adjust: none;
+  }
+
+  .ct-switch__input:checked::after {
+    background: SelectedItemText;
+    border-color: SelectedItemText;
+  }
+
+  .ct-switch__input:disabled,
+  .ct-switch__input:disabled::after {
+    border-color: GrayText;
+  }
+
+  .ct-switch__input:checked:disabled {
+    background: GrayText;
+  }
+
+  .ct-switch__input:checked:disabled::after {
+    background: Canvas;
+    border-color: GrayText;
+  }
+}

package/components/table.css

@@ -97,14 +97,18 @@
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M4 5L0 0h8z'/%3E%3C/svg%3E");
 }
 
-th[aria-sort='ascending'] .ct-table__sort-indicator::before {
+th[aria-sort='ascending'] .ct-table__sort-indicator::before,
+th[aria-sort='descending'] .ct-table__sort-indicator::after {
   background-color: var(--color-text-secondary);
   opacity: 1;
 }
 
-th[aria-sort='descending'] .ct-table__sort-indicator::after {
-  background-color: var(--color-text-secondary);
-  opacity: 1;
+/* Direction is shape-encoded: the unsorted state keeps the dimmed
+   both-ways glyph, while a sorted column shows only its own arrow so the
+   state never relies on colour or opacity alone. */
+th[aria-sort='ascending'] .ct-table__sort-indicator::after,
+th[aria-sort='descending'] .ct-table__sort-indicator::before {
+  display: none;
 }
 
 .ct-table__cell--numeric .ct-table__sort {
@@ -137,3 +141,48 @@ th[aria-sort='descending'] .ct-table__sort-indicator::after {
   font-size: var(--font-size-xs);
   color: var(--color-text-muted);
 }
+
+/* ── Selected / current rows ──
+   The datum: an orange leading edge marks the selected or current row,
+   consistent with list, sidebar, and card active states. The edge sits
+   on the row's first cell — box-shadow on <tr> is unreliable with
+   collapsed borders. Row text stays neutral; only the edge is orange. */
+.ct-table tbody tr > :first-child {
+  transition: box-shadow var(--duration-fast) var(--easing-standard);
+}
+
+.ct-table tbody tr:is([aria-selected='true'], [aria-current='true'], [data-state='selected']) {
+  background: var(--color-bg-muted);
+}
+
+.ct-table tbody tr:is([aria-selected='true'], [aria-current='true'], [data-state='selected']) > :first-child {
+  box-shadow: inset var(--component-datum-edge-width) 0 0 0 var(--color-brand-accent);
+}
+
+/* ── Sorted column ──
+   The datum underlines the actively sorted column header, like the tab
+   indicator. Direction stays shape-encoded via the arrow glyphs. */
+.ct-table thead th:is([aria-sort='ascending'], [aria-sort='descending']) {
+  box-shadow: inset 0 calc(-1 * var(--component-datum-edge-width)) 0 0 var(--color-brand-accent);
+}
+
+@media (forced-colors: active) {
+  /* Mask-drawn arrows paint via background-color; the sorted selectors
+     match the specificity of the full-strength rules above. */
+  .ct-table__sort-indicator::before,
+  .ct-table__sort-indicator::after,
+  th[aria-sort='ascending'] .ct-table__sort-indicator::before,
+  th[aria-sort='descending'] .ct-table__sort-indicator::after {
+    background-color: CanvasText;
+  }
+
+  /* The datum edges are inset box-shadows, which forced colors drops —
+     re-encode them as borders. */
+  .ct-table tbody tr:is([aria-selected='true'], [aria-current='true'], [data-state='selected']) > :first-child {
+    border-inline-start: var(--component-datum-edge-width) solid SelectedItem;
+  }
+
+  .ct-table thead th:is([aria-sort='ascending'], [aria-sort='descending']) {
+    border-block-end: var(--component-datum-edge-width) solid SelectedItem;
+  }
+}