@neuravision/construct 2.0.3 → 2.1.2

package/components/_shared.css

@@ -1,13 +1,13 @@
 :root {
-  --ct-control-bg: var(--color-bg-elevated);
-  --ct-control-bg-hover: var(--color-bg-surface);
-  --ct-control-bg-disabled: var(--color-bg-muted);
-  --ct-control-border: var(--color-border-default);
-  --ct-control-border-hover: var(--color-border-strong);
-  --ct-control-border-focus: var(--color-focus-ring);
-  --ct-control-text: var(--color-text-primary);
-  --ct-control-placeholder: var(--color-text-muted);
-  --ct-control-radius: var(--radius-control);
+  --ct-control-bg: var(--component-control-background);
+  --ct-control-bg-hover: var(--component-control-background-hover);
+  --ct-control-bg-disabled: var(--component-control-background-disabled);
+  --ct-control-border: var(--component-control-border);
+  --ct-control-border-hover: var(--component-control-border-hover);
+  --ct-control-border-focus: var(--component-control-border-focus);
+  --ct-control-text: var(--component-control-text);
+  --ct-control-placeholder: var(--component-control-placeholder);
+  --ct-control-radius: var(--component-control-radius);
   --ct-control-transition: border-color var(--duration-fast) var(--easing-standard),
     box-shadow var(--duration-fast) var(--easing-standard),
     background var(--duration-fast) var(--easing-standard),
@@ -93,6 +93,9 @@
   background: var(--ct-control-bg-disabled);
   border-color: var(--color-border-subtle);
   color: var(--color-text-muted);
+  /* Disabled is fully colour-encoded above; cancel foundations' global
+     :disabled opacity so controls are not double-dimmed. */
+  opacity: 1;
 }
 
 :where(.ct-input, .ct-select, .ct-textarea, .ct-control)[aria-invalid='true'],
@@ -106,11 +109,12 @@
   outline-color: var(--color-state-danger);
 }
 
-/* ── Touch-target minimums (WCAG 2.5.8: 44×44px) ────────────────── */
+/* ── Construct 44×44 target policy (WCAG 2.2 SC 2.5.5 is AAA) ─── */
 
 @media (pointer: coarse) {
   :root {
     --control-height-sm: 44px;
+    --control-height-md: 44px;
     --control-height-calendar-day: 44px;
   }
 }
@@ -134,3 +138,11 @@
   --ct-control-font-size: var(--font-size-lg);
   --ct-control-line-height: var(--line-height-lg);
 }
+
+/* Per-file kill switch: standalone/core.css imports this file without
+   foundations.css and its global reduced-motion rule. */
+@media (prefers-reduced-motion: reduce) {
+  :where(.ct-input, .ct-select, .ct-textarea, .ct-control) {
+    transition: none;
+  }
+}

package/components/_shell-shared.css

@@ -3,6 +3,20 @@
 /* Crosses component boundary: shells orchestrate child layout.    */
 /* ─────────────────────────────────────────────────────────────── */
 
+/* Both layouts expose the canonical `--ct-shell-*` sizing and motion
+   controls. Their historical variable names are compatibility aliases. */
+
+:is(.ct-app-shell, .ct-app-shell-v2) {
+  min-width: 0;
+}
+
+:is(.ct-app-shell__main, .ct-app-shell-v2__main),
+:is(.ct-app-shell__sidebar, .ct-app-shell-v2__sidebar),
+:is(.ct-app-shell__panel, .ct-app-shell-v2__panel) {
+  min-width: 0;
+  min-height: 0;
+}
+
 
 /* ── Collapsed: Hide Labels & Badges ── */
 
@@ -16,8 +30,8 @@
   white-space: nowrap;
   /* Collapsing: labels fade out first, then width snaps */
   transition:
-    opacity 120ms ease-in-out,
-    width 0ms linear 120ms;
+    opacity var(--ct-shell-motion-duration) var(--ct-shell-motion-easing),
+    width 0ms linear var(--ct-shell-motion-duration);
 }
 
 
@@ -30,7 +44,9 @@
   opacity: 1;
   width: auto;
   /* Expanding: labels fade in after sidebar width finishes growing */
-  transition: opacity 120ms ease-in-out 250ms;
+  transition:
+    opacity var(--ct-shell-motion-duration) var(--ct-shell-motion-easing)
+    var(--ct-shell-motion-duration);
 }
 
 
@@ -44,7 +60,7 @@
 
 /* ── Tablet: Auto-Collapse to Rail ── */
 
-@media (max-width: 1199px) {
+@media (max-width: 1199px) { /* < lg breakpoint (1200px) */
   :is(.ct-app-shell, .ct-app-shell-v2):not([data-sidebar-state]) .ct-nav-item__label,
   :is(.ct-app-shell, .ct-app-shell-v2):not([data-sidebar-state]) .ct-nav-item__badge,
   :is(.ct-app-shell, .ct-app-shell-v2):not([data-sidebar-state]) .ct-sidebar__header span,

package/components/accordion.css

@@ -116,6 +116,14 @@
   padding: 0 var(--space-4) var(--space-4);
 }
 
+/* ── Construct 44×44 target policy (WCAG 2.2 SC 2.5.5 is AAA) ── */
+
+@media (pointer: coarse) {
+  .ct-accordion__trigger {
+    min-block-size: 44px;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .ct-accordion__icon,
   .ct-accordion__item::details-content {

package/components/app-shell-v2.css

@@ -17,24 +17,31 @@
 /*   │  ╰────────╯ ╰───────────────────┴──────────────╯    │       */
 /*   ╰─────────────────────────────────────────────────────╯       */
 /*                                                                 */
-/* Shell breakpoints:                                              */
-/*   Mobile:  <768px                                               */
-/*   Tablet:  768–1199px                                           */
+/* Shell breakpoints (from the public primitive scale):            */
+/*   Compact: <900px  (< md)                                       */
+/*   Tablet:  900–1199px                                           */
 /*   Desktop: >=1200px                                             */
 /* ─────────────────────────────────────────────────────────────── */
 
 .ct-app-shell-v2 {
-  /* ── Public Tokens ── */
-  --ct-v2-sidebar-width: 260px;
-  --ct-v2-sidebar-rail-width: 64px;
-  --ct-v2-panel-width: 340px;
+  /* ── Shared Public Tokens ── */
+  --ct-shell-sidebar-width: 260px;
+  --ct-shell-sidebar-rail-width: 64px;
+  --ct-shell-panel-width: 340px;
+  --ct-shell-motion-duration: 250ms;
+  --ct-shell-motion-easing: cubic-bezier(0.32, 0.72, 0, 1);
+
+  /* V2 aliases remain public for backward compatibility. */
+  --ct-v2-sidebar-width: var(--ct-shell-sidebar-width);
+  --ct-v2-sidebar-rail-width: var(--ct-shell-sidebar-rail-width);
+  --ct-v2-panel-width: var(--ct-shell-panel-width);
   --ct-v2-gap: var(--space-4);
   --ct-v2-radius: var(--radius-lg);
   --ct-v2-canvas-bg: var(--color-bg-muted);
   --ct-v2-surface-bg: var(--color-bg-canvas);
   --ct-v2-surface-shadow: var(--shadow-xs);
-  --ct-v2-transition-duration: 250ms;
-  --ct-v2-transition-easing: cubic-bezier(0.32, 0.72, 0, 1);
+  --ct-v2-transition-duration: var(--ct-shell-motion-duration);
+  --ct-v2-transition-easing: var(--ct-shell-motion-easing);
 
   /* ── Internal ── */
   --_v2-sidebar-w: var(--ct-v2-sidebar-width);
@@ -163,6 +170,13 @@
   background: var(--ct-v2-surface-bg);
 }
 
+/* The shell owns its scroll container, so it can satisfy WCAG 2.4.11
+   itself: scrolled-to content clears the sticky toolbar. Override
+   --ct-shell-scroll-offset when the toolbar height is customized. */
+.ct-app-shell-v2__main:has(.ct-app-shell-v2__toolbar--sticky) {
+  scroll-padding-block-start: var(--ct-shell-scroll-offset, 64px);
+}
+
 
 /* ── Sidebar States ── */
 
@@ -362,13 +376,13 @@
 
 /* Delay grid shrink on collapse so labels fade out first */
 .ct-app-shell-v2[data-sidebar-state='collapsed'] {
-  transition-delay: 120ms;
+  transition-delay: var(--ct-shell-motion-duration);
 }
 
 
-/* ── Responsive: Tablet (768–1199px) ── */
+/* ── Responsive: Tablet (900–1199px) ── */
 
-@media (max-width: 1199px) {
+@media (max-width: 1199px) { /* < lg breakpoint (1200px) */
   /* Auto-collapse sidebar to rail when no explicit state */
   .ct-app-shell-v2:not([data-sidebar-state]) {
     --_v2-sidebar-w: var(--ct-v2-sidebar-rail-width);
@@ -390,9 +404,9 @@
 }
 
 
-/* ── Responsive: Mobile (<768px) ── */
+/* ── Responsive: Compact (< md breakpoint, 900px) ── */
 
-@media (max-width: 767px) {
+@media (max-width: 899px) { /* < md breakpoint (900px) */
   .ct-app-shell-v2 {
     --ct-v2-gap: var(--space-3);
   }

package/components/app-shell.css

@@ -1,23 +1,32 @@
-/* ── App Shell ─────────────────────────────────────────────────── */
+/* ── App Shell (compatibility layout) ─────────────────────────── */
 /* CSS Grid layout shell that orchestrates Navbar, Sidebar,       */
 /* Main content, optional Panel, and optional Footer.             */
+/* New applications should prefer App Shell V2. `.ct-app-shell`   */
+/* remains supported as the non-floating compatibility contract.  */
 /*                                                                */
-/* Shell breakpoints (component-specific, differ from --bp-*):    */
-/*   Mobile:  <768px                                              */
-/*   Tablet:  768–1199px                                          */
+/* Shell breakpoints (from the public primitive scale):           */
+/*   Compact: <900px  (< md)                                      */
+/*   Tablet:  900–1199px                                          */
 /*   Desktop: 1200–1439px                                         */
 /*   Wide:    >=1440px                                             */
 /* ────────────────────────────────────────────────────────────── */
 
 .ct-app-shell {
-  /* ── Public Tokens ── */
-  --ct-sidebar-width: 260px;
-  --ct-sidebar-rail-width: 56px;
-  --ct-panel-width: 320px;
+  /* ── Shared Public Tokens ── */
+  --ct-shell-sidebar-width: 260px;
+  --ct-shell-sidebar-rail-width: 56px;
+  --ct-shell-panel-width: 320px;
+  --ct-shell-motion-duration: 200ms;
+  --ct-shell-motion-easing: ease-out;
+
+  /* Legacy aliases remain public for backward compatibility. */
+  --ct-sidebar-width: var(--ct-shell-sidebar-width);
+  --ct-sidebar-rail-width: var(--ct-shell-sidebar-rail-width);
+  --ct-panel-width: var(--ct-shell-panel-width);
   --ct-header-height: auto;
   --ct-footer-height: auto;
-  --ct-shell-transition-duration: 200ms;
-  --ct-shell-transition-easing: ease-out;
+  --ct-shell-transition-duration: var(--ct-shell-motion-duration);
+  --ct-shell-transition-easing: var(--ct-shell-motion-easing);
 
   /* ── Internal Variables ── */
   --_sidebar-width: var(--ct-sidebar-width);
@@ -221,6 +230,13 @@
   background: var(--color-bg-canvas);
 }
 
+/* The shell owns its scroll container, so it can satisfy WCAG 2.4.11
+   itself: scrolled-to content clears the sticky page header. Override
+   --ct-shell-scroll-offset when the header height is customized. */
+.ct-app-shell__main:has(.ct-app-shell__page-header--sticky) {
+  scroll-padding-block-start: var(--ct-shell-scroll-offset, 64px);
+}
+
 
 
 /* ── Backdrop (Mobile Sidebar Overlay) ── */
@@ -249,7 +265,7 @@
 
 /* Collapsing: delay grid shrink so labels fade out first */
 .ct-app-shell[data-sidebar-state='collapsed'] {
-  transition-delay: 120ms;
+  transition-delay: var(--ct-shell-motion-duration);
 }
 
 
@@ -260,7 +276,7 @@
 }
 
 
-/* ── Responsive: Tablet (768–1199px) ── */
+/* ── Responsive: Tablet (900–1199px) ── */
 
 @media (max-width: 1199px) { /* < lg breakpoint (1200px) */
   /* Auto-collapse sidebar to rail when no explicit state is set */
@@ -286,9 +302,9 @@
 }
 
 
-/* ── Responsive: Mobile (<768px) ── */
+/* ── Responsive: Compact (< md breakpoint, 900px) ── */
 
-@media (max-width: 767px) { /* < tablet breakpoint (768px) */
+@media (max-width: 899px) { /* < md breakpoint (900px) */
   /* Auto-hide sidebar when no explicit state is set */
   .ct-app-shell:not([data-sidebar-state]) {
     --_sidebar-width: 0px;

package/components/badge.css

@@ -38,6 +38,21 @@
   background: var(--ct-badge-accent);
 }
 
+/* Explicit neutral alias for generated/conditional variant class lists. */
+.ct-badge--neutral {
+  --ct-badge-bg: var(--color-bg-muted);
+  --ct-badge-border: var(--color-border-subtle);
+  --ct-badge-color: var(--color-text-secondary);
+  --ct-badge-accent: var(--ct-badge-color);
+}
+
+.ct-badge--sm {
+  gap: var(--space-1);
+  padding: 0 var(--space-2);
+  font-size: var(--font-size-2xs);
+  line-height: var(--line-height-xs);
+}
+
 .ct-badge--info {
   --ct-badge-bg: var(--color-state-info-surface);
   --ct-badge-border: var(--color-state-info-border);

package/components/banner.css

@@ -26,7 +26,8 @@
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   transition: opacity var(--duration-normal) var(--easing-standard),
-    transform var(--duration-normal) var(--easing-standard);
+    transform var(--duration-normal) var(--easing-standard),
+    visibility 0s linear 0s;
 }
 
 /* ---- Sub-elements ---- */
@@ -159,6 +160,8 @@
 
 /* ---- Positions ---- */
 
+/* Consumers: set --ct-scroll-offset-top on :root (see foundations.css) so
+   scrolled-to content is not obscured behind the banner (WCAG 2.4.11). */
 .ct-banner--fixed-top {
   position: fixed;
   inset-block-start: 0;
@@ -167,6 +170,8 @@
   border-radius: 0;
 }
 
+/* Consumers: set --ct-scroll-offset-bottom on :root (see foundations.css) so
+   scrolled-to content is not obscured behind the banner (WCAG 2.4.11). */
 .ct-banner--fixed-bottom {
   position: fixed;
   inset-block-end: 0;
@@ -175,6 +180,8 @@
   border-radius: 0;
 }
 
+/* Consumers: set --ct-scroll-offset-top on :root (see foundations.css) so
+   scrolled-to content is not obscured behind the banner (WCAG 2.4.11). */
 .ct-banner--sticky {
   position: sticky;
   inset-block-start: 0;
@@ -211,9 +218,16 @@
 
 /* ---- State ---- */
 
+/* Delayed visibility (drawer.css pattern) removes the faded-out banner
+   from the accessibility tree and tab order once the fade completes;
+   reopening restores it instantly via the base transition. */
 .ct-banner[data-state='closed'] {
   opacity: 0;
+  visibility: hidden;
   pointer-events: none;
+  transition: opacity var(--duration-normal) var(--easing-standard),
+    transform var(--duration-normal) var(--easing-standard),
+    visibility 0s linear var(--duration-normal);
 }
 
 .ct-banner--fixed-top[data-state='closed'],
@@ -237,6 +251,23 @@
   }
 }
 
+/* ---- Construct 44×44 target policy (WCAG 2.2 SC 2.5.5 is AAA) ---- */
+
+@media (pointer: coarse) {
+  /* The default close is --control-height-sm, which _shared.css remaps to
+     44px; only the fixed 24px compact close needs the checkbox.css-style
+     hit area. */
+  .ct-banner--compact .ct-banner__close {
+    position: relative;
+  }
+
+  .ct-banner--compact .ct-banner__close::before {
+    content: '';
+    position: absolute;
+    inset: calc((var(--icon-lg) - 44px) / 2);
+  }
+}
+
 /* ---- Reduced Motion ---- */
 
 @media (prefers-reduced-motion: reduce) {

package/components/button.css

@@ -1,14 +1,19 @@
 .ct-button {
-  --ct-button-bg: var(--color-brand-primary);
-  --ct-button-bg-hover: var(--color-brand-primary-hover);
-  --ct-button-bg-active: var(--color-brand-primary-active);
-  --ct-button-border: transparent;
-  --ct-button-color: var(--color-text-on-primary);
-  --ct-button-height: var(--control-height-md);
-  --ct-button-padding-x: var(--space-6);
-  --ct-button-font-size: var(--font-size-sm);
-  --ct-button-line-height: var(--line-height-sm);
-
+  --ct-button-bg: var(--component-button-background);
+  --ct-button-bg-hover: var(--component-button-background-hover);
+  --ct-button-bg-active: var(--component-button-background-active);
+  --ct-button-border: var(--component-button-border);
+  --ct-button-color: var(--component-button-color);
+  --ct-button-height: var(--component-button-height);
+  --ct-button-padding-x: var(--component-button-padding-x);
+  --ct-button-font-size: var(--component-button-font-size);
+  --ct-button-line-height: var(--component-button-line-height);
+  --ct-button-font-weight: var(--component-button-font-weight);
+  --ct-button-radius: var(--component-button-radius);
+  --ct-button-gap: var(--component-button-gap);
+  --ct-button-loading-spinner-size: var(--component-button-loading-spinner-size);
+
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -32,12 +37,12 @@
 }
 
 @media (hover: hover) {
-  .ct-button:hover {
+  .ct-button:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']):not([data-loading='true']):hover {
     background: var(--ct-button-bg-hover);
   }
 }
 
-.ct-button:active {
+.ct-button:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']):not([data-loading='true']):active {
   background: var(--ct-button-bg-active);
   transform: translateY(1px);
 }
@@ -52,6 +57,56 @@
   opacity: var(--opacity-disabled);
   transform: none;
   cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Loading contract:
+   - set `aria-busy="true"` and `data-loading="true"`;
+   - native buttons must also use `disabled` to block keyboard activation;
+   - wrap the stable accessible label in `.ct-button__content`;
+   - keep `.ct-button__loader` decorative (`aria-hidden="true"`). */
+.ct-button__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: inherit;
+  opacity: 1;
+  transition: opacity var(--duration-fast) var(--easing-standard);
+}
+
+.ct-button__loader {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-fast) var(--easing-standard);
+}
+
+.ct-button__loader::before {
+  content: '';
+  width: var(--ct-button-loading-spinner-size);
+  height: var(--ct-button-loading-spinner-size);
+  border: var(--border-medium) solid currentColor;
+  border-inline-end-color: transparent;
+  border-radius: var(--radius-round);
+  animation: ct-spin var(--ct-spinner-duration) linear infinite;
+}
+
+.ct-button:is([aria-busy='true'], [data-loading='true']) {
+  opacity: 1;
+  transform: none;
+  cursor: wait;
+  pointer-events: none;
+}
+
+.ct-button:is([aria-busy='true'], [data-loading='true']) .ct-button__content {
+  opacity: 0;
+}
+
+.ct-button:is([aria-busy='true'], [data-loading='true']) .ct-button__loader {
+  opacity: 1;
 }
 
 .ct-button--secondary {
@@ -88,8 +143,8 @@
 
 .ct-button--danger {
   --ct-button-bg: var(--color-state-danger);
-  --ct-button-bg-hover: color-mix(in srgb, var(--color-state-danger) 85%, black);
-  --ct-button-bg-active: color-mix(in srgb, var(--color-state-danger) 70%, black);
+  --ct-button-bg-hover: color-mix(in srgb, var(--color-state-danger) 85%, var(--color-state-danger-text));
+  --ct-button-bg-active: color-mix(in srgb, var(--color-state-danger) 70%, var(--color-state-danger-text));
   --ct-button-border: transparent;
   --ct-button-color: var(--color-state-on-solid);
 }
@@ -138,8 +193,41 @@
   justify-content: center;
 }
 
+@media (pointer: coarse) {
+  .ct-button {
+    min-width: var(--control-height-sm);
+    min-height: var(--control-height-sm);
+  }
+
+  .ct-button--link {
+    min-height: var(--control-height-sm);
+    padding-inline: var(--space-2);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .ct-button:active {
+  .ct-button,
+  .ct-button__content,
+  .ct-button__loader {
+    transition: none;
+  }
+
+  .ct-button:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']):not([data-loading='true']):active {
     transform: none;
   }
+
+  .ct-button__loader::before {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .ct-button {
+    border-color: currentColor;
+  }
+
+  .ct-button__loader::before {
+    border-color: currentColor;
+    border-inline-end-color: transparent;
+  }
 }

package/components/card.css

@@ -1,10 +1,18 @@
 .ct-card {
-  --ct-card-padding: var(--space-6);
-  background: var(--color-bg-elevated);
-  border: var(--border-thin) solid var(--color-border-subtle);
-  border-radius: var(--radius-lg);
+  --ct-card-bg: var(--component-card-background);
+  --ct-card-border: var(--component-card-border);
+  --ct-card-radius: var(--component-card-radius);
+  --ct-card-padding: var(--component-card-padding);
+  --ct-card-shadow: var(--component-card-shadow);
+  --ct-card-shadow-hover: var(--component-card-shadow-hover);
+
+  background: var(--ct-card-bg);
+  border: var(--border-thin) solid var(--ct-card-border);
+  border-radius: var(--ct-card-radius);
   padding: var(--ct-card-padding);
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--ct-card-shadow);
+  /* The datum edge slides in on activation instead of popping. */
+  transition: box-shadow var(--duration-fast) var(--easing-standard);
 }
 
 .ct-card--sm {
@@ -47,7 +55,7 @@
 @media (hover: hover) {
   :is(a, button, [role='button'], [role='link']).ct-card--interactive:hover {
     border-color: var(--color-border-strong);
-    box-shadow: var(--shadow-md);
+    box-shadow: var(--ct-card-shadow-hover);
   }
 }
 
@@ -55,7 +63,7 @@
   outline: 2px solid var(--color-focus-ring);
   outline-offset: 2px;
   border-color: var(--color-border-strong);
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--ct-card-shadow-hover);
 }
 
 .ct-card--interactive[aria-selected='true'] {
@@ -64,9 +72,20 @@
 }
 
 .ct-card--interactive[aria-disabled='true'],
-.ct-card--interactive:disabled {
+.ct-card--interactive:disabled,
+.ct-card--interactive[data-state='disabled'] {
   opacity: var(--opacity-disabled);
   cursor: not-allowed;
+  pointer-events: none;
+}
+
+.ct-card[aria-busy='true'],
+.ct-card[data-state='loading'] {
+  cursor: wait;
+}
+
+.ct-card[data-state='error'] {
+  border-color: var(--color-state-danger-border);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -74,3 +93,43 @@
     transition: none;
   }
 }
+
+/* ── Datum ──
+   The reference-line grammar applied to cards. `--datum` adds a corner
+   registration mark (like an engineering drawing); the active/current
+   state carries the same orange leading edge as list and sidebar items.
+   Both are opt-in and additive — they don't change default cards. */
+.ct-card--datum {
+  position: relative;
+}
+
+.ct-card--datum::before {
+  content: '';
+  position: absolute;
+  inset-block-start: calc(-1 * var(--border-thin));
+  inset-inline-start: calc(-1 * var(--border-thin));
+  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;
+}
+
+.ct-card--active,
+.ct-card[data-state='active'] {
+  /* The datum: an orange leading edge marks the active/current card,
+     consistent with .ct-list__item and .ct-sidebar active states. The
+     ambient shadow stays first so the list interpolates against the
+     base card shadow and the edge can animate in. */
+  box-shadow: var(--ct-card-shadow), inset var(--component-datum-edge-width) 0 0 0 var(--color-brand-accent);
+}
+
+@media (forced-colors: active) {
+  /* The datum edge is an inset box-shadow, which forced colors drops —
+     re-encode it as a border. */
+  .ct-card--active,
+  .ct-card[data-state='active'] {
+    border-inline-start: var(--component-datum-edge-width) solid SelectedItem;
+  }
+}