@neuravision/construct 2.0.3 → 2.1.2

package/components/index.css

@@ -4,6 +4,9 @@
 @import './_shared.css';
 @import './_keyframes.css';
 
+/* Structural grammar — the "datum" reference-line vocabulary */
+@import './datum.css';
+
 /* Components */
 @import './button.css';
 @import './field.css';
@@ -33,6 +36,7 @@
 @import './skeleton.css';
 @import './icon.css';
 @import './progress-bar.css';
+@import './meter.css';
 @import './toolbar.css';
 @import './sidebar.css';
 @import './toggle-group.css';
@@ -52,3 +56,4 @@
 @import './list.css';
 @import './tree.css';
 @import './chart.css';
+@import './status.css';

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/meter.css

@@ -0,0 +1,182 @@
+/* ── Segmented Meter / Stacked Progress ────────────────────────── */
+
+.ct-meter {
+  --ct-meter-height: var(--component-meter-height);
+  --ct-meter-radius: var(--component-meter-radius);
+  --ct-meter-track: var(--component-meter-track);
+  --ct-meter-gap: var(--space-3);
+
+  display: grid;
+  gap: var(--ct-meter-gap);
+  width: 100%;
+}
+
+.ct-meter__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.ct-meter__label {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.ct-meter__summary {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
+.ct-meter__track {
+  display: flex;
+  width: 100%;
+  height: var(--ct-meter-height);
+  overflow: hidden;
+  border: var(--border-thin) solid var(--color-border-subtle);
+  border-radius: var(--ct-meter-radius);
+  background: var(--ct-meter-track);
+}
+
+.ct-meter__segment {
+  --ct-meter-segment-color: var(--color-brand-primary);
+
+  flex: 0 0 var(--ct-meter-segment-size, auto);
+  min-width: 0;
+  height: 100%;
+  background: var(--ct-meter-segment-color);
+  transition: flex-basis var(--duration-normal) var(--easing-standard);
+}
+
+.ct-meter__segment[data-variant='accent'] {
+  --ct-meter-segment-color: var(--color-brand-accent);
+}
+
+.ct-meter__segment[data-variant='info'] {
+  --ct-meter-segment-color: var(--color-state-info);
+}
+
+.ct-meter__segment[data-variant='success'] {
+  --ct-meter-segment-color: var(--color-state-success);
+}
+
+.ct-meter__segment[data-variant='warning'] {
+  --ct-meter-segment-color: var(--color-state-warning);
+}
+
+.ct-meter__segment[data-variant='danger'] {
+  --ct-meter-segment-color: var(--color-state-danger);
+}
+
+.ct-meter__segment[data-variant='muted'] {
+  --ct-meter-segment-color: var(--color-border-strong);
+}
+
+.ct-meter__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-5);
+  margin: 0;
+  padding: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  list-style: none;
+}
+
+.ct-meter__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.ct-meter__marker {
+  --ct-meter-segment-color: var(--color-brand-primary);
+
+  width: var(--space-3);
+  height: var(--space-3);
+  flex: none;
+  border: var(--border-thin) solid currentColor;
+  border-radius: var(--radius-xs);
+  background: var(--ct-meter-segment-color);
+  color: var(--ct-meter-segment-color);
+}
+
+.ct-meter__marker[data-variant='accent'] {
+  --ct-meter-segment-color: var(--color-brand-accent);
+}
+
+.ct-meter__marker[data-variant='info'] {
+  --ct-meter-segment-color: var(--color-state-info);
+}
+
+.ct-meter__marker[data-variant='success'] {
+  --ct-meter-segment-color: var(--color-state-success);
+}
+
+.ct-meter__marker[data-variant='warning'] {
+  --ct-meter-segment-color: var(--color-state-warning);
+}
+
+.ct-meter__marker[data-variant='danger'] {
+  --ct-meter-segment-color: var(--color-state-danger);
+}
+
+.ct-meter__marker[data-variant='muted'] {
+  --ct-meter-segment-color: var(--color-border-strong);
+}
+
+.ct-meter__legend-value {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
+.ct-meter__message {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+}
+
+.ct-meter:is([aria-busy='true'], [data-state='loading']) {
+  cursor: wait;
+}
+
+.ct-meter:is([aria-disabled='true'], [data-state='disabled']) {
+  opacity: var(--opacity-disabled);
+}
+
+.ct-meter[data-state='error'] .ct-meter__track {
+  border-color: var(--color-state-danger-border);
+}
+
+.ct-meter[data-state='error'] .ct-meter__message {
+  color: var(--color-state-danger-text);
+}
+
+.ct-meter--sm {
+  --ct-meter-height: var(--space-2);
+}
+
+.ct-meter--lg {
+  --ct-meter-height: var(--space-5);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-meter__segment {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .ct-meter__track,
+  .ct-meter__marker {
+    border-color: currentColor;
+  }
+
+  .ct-meter__segment + .ct-meter__segment {
+    border-inline-start: var(--border-medium) solid currentColor;
+  }
+}

package/components/navbar.css

@@ -29,7 +29,10 @@
   display: flex;
   align-items: center;
   gap: var(--ct-navbar-gap);
-  height: var(--ct-navbar-height);
+  width: 100%;
+  min-width: 0;
+  /* 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);
@@ -44,6 +47,7 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  min-width: 0;
 }
 
 .ct-navbar__brand {
@@ -56,6 +60,12 @@
   flex-shrink: 0;
 }
 
+.ct-navbar__brand:focus-visible {
+  outline: var(--border-medium) solid var(--color-focus-ring);
+  outline-offset: var(--border-medium);
+  border-radius: var(--ct-navbar-item-radius);
+}
+
 .ct-navbar__logo {
   height: var(--ct-navbar-brand-img-height);
   width: auto;
@@ -63,8 +73,11 @@
 }
 
 .ct-navbar__title {
+  min-width: 0;
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -345,6 +358,8 @@
   border-bottom: var(--border-thin) solid var(--ct-navbar-border-color);
   box-shadow: var(--shadow-md);
   padding: var(--space-4);
+  max-height: calc(100dvh - var(--ct-navbar-height));
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
@@ -420,8 +435,36 @@
   font-size: var(--font-size-lg);
 }
 
+/* ── Compact Product Header ────────────────────────────────────── */
+
+.ct-navbar--compact {
+  --ct-navbar-height: var(--control-height-lg);
+  --ct-navbar-padding-x: var(--space-4);
+  --ct-navbar-padding-y: var(--space-2);
+  --ct-navbar-gap: var(--space-2);
+  --ct-navbar-actions-gap: var(--space-1);
+  --ct-navbar-brand-img-height: var(--space-8);
+  --ct-navbar-item-padding-x: var(--space-3);
+  --ct-navbar-item-padding-y: var(--space-2);
+}
+
+.ct-navbar--compact .ct-navbar__brand {
+  min-width: 0;
+}
+
+.ct-navbar--compact .ct-navbar__title {
+  max-width: 18ch;
+  font-size: var(--font-size-sm);
+}
+
+.ct-navbar--compact .ct-navbar__actions {
+  flex-shrink: 0;
+}
+
 /* ── 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;
@@ -429,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;
@@ -463,7 +508,7 @@
 
 @media (hover: hover) {
   .ct-navbar--transparent .ct-navbar__link:hover {
-    background: rgb(255 255 255 / 0.15);
+    background: color-mix(in srgb, var(--color-text-inverse) 15%, transparent);
     color: var(--color-text-inverse);
   }
 }
@@ -486,7 +531,7 @@
 
 @media (hover: hover) {
   .ct-navbar--transparent .ct-navbar__toggle:hover {
-    background: rgb(255 255 255 / 0.15);
+    background: color-mix(in srgb, var(--color-text-inverse) 15%, transparent);
   }
 }
 
@@ -590,15 +635,57 @@
     position: relative;
   }
 
-  .ct-navbar__nav {
+  .ct-navbar:has(.ct-navbar__toggle) .ct-navbar__nav {
     display: none;
   }
 
+  /* Progressive fallback: when no mobile toggle/menu is supplied, keep
+     primary navigation reachable as a horizontally scrollable row. */
+  .ct-navbar:not(:has(.ct-navbar__toggle)) nav {
+    min-width: 0;
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  .ct-navbar:not(:has(.ct-navbar__toggle)) .ct-navbar__nav {
+    display: flex;
+    width: max-content;
+  }
+
   .ct-navbar__toggle {
     display: inline-flex;
   }
 }
 
+@media (max-width: 599px) { /* < sm breakpoint (600px) */
+  .ct-navbar,
+  .ct-navbar--compact {
+    --ct-navbar-padding-x: var(--space-3);
+    --ct-navbar-gap: var(--space-1);
+    --ct-navbar-actions-gap: var(--space-1);
+  }
+
+  .ct-navbar--compact .ct-navbar__title {
+    max-width: 10ch;
+  }
+
+  .ct-navbar--compact .ct-navbar__actions [data-priority='secondary'] {
+    display: none;
+  }
+
+  .ct-navbar__mobile-menu {
+    padding: var(--space-3);
+  }
+}
+
+/* ── 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) {
@@ -612,3 +699,14 @@
     transition: none;
   }
 }
+
+@media (forced-colors: active) {
+  .ct-navbar {
+    border-color: currentColor;
+  }
+
+  .ct-navbar__link[aria-current='page'] {
+    outline: var(--border-medium) solid currentColor;
+    outline-offset: calc(-1 * var(--border-medium));
+  }
+}

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 {
@@ -269,7 +274,8 @@
   opacity: 1;
 }
 
-/* Touch-target minimums (WCAG 2.5.8: 44×44px minimum) */
+/* 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-slider {