@neuravision/construct 2.0.2 → 2.1.1

package/components/datum.css

@@ -0,0 +1,204 @@
+/* ============================================================
+   Datum — the orange reference-line grammar.
+
+   Construct's signature is one orange reference line ("the datum")
+   that marks what is focused / active / current. These primitives
+   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)
+   ============================================================ */
+
+/* ── Eyebrow ──
+   A mono kicker with a leading datum tick. Sits above a heading to
+   label a section in the engineered "data annotation" voice. */
+.ct-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4);
+  margin: 0 0 var(--space-5);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  /* Text stays a theme-safe neutral (AA on every surface in all three
+     themes); the orange datum lives in the non-text tick below. Orange
+     as small text fails contrast on dark/elevated and high-contrast. */
+  color: var(--color-text-secondary);
+}
+
+.ct-eyebrow::before {
+  content: '';
+  width: 24px;
+  height: 3px;
+  border-radius: var(--radius-xs);
+  background: var(--color-brand-accent);
+}
+
+/* ── 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;
+  background:
+    /* orange origin segment — the datum's zero */
+    linear-gradient(var(--color-brand-accent), var(--color-brand-accent)) 0 0 / 48px 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,
+    /* minor ticks */
+    repeating-linear-gradient(90deg, var(--color-border-default) 0 1px, transparent 1px 12px) 0 0 / 100% 5px no-repeat;
+}
+
+/* ── Spec datasheet ──
+   Engineering datasheet for key figures — hairline-gridded cells
+   instead of free-floating big numbers. Mark the lead cell with
+   `--origin` to carry the datum. */
+:is(.ct-metrics, .ct-specs) {
+  --ct-metric-bg: var(--component-metric-background);
+  --ct-metric-border: var(--component-metric-border);
+  --ct-metric-radius: var(--component-metric-radius);
+  --ct-metric-padding: var(--component-metric-padding);
+  --ct-metric-value-font-size: var(--component-metric-value-font-size);
+  --ct-metric-label-font-size: var(--component-metric-label-font-size);
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: var(--border-thin);
+  border: var(--border-thin) solid var(--ct-metric-border);
+  border-radius: var(--ct-metric-radius);
+  background: var(--ct-metric-border);
+  overflow: hidden;
+}
+
+/* Compatibility profile: retain the original datasheet scale while the
+   canonical metric pattern uses the denser component-token defaults. */
+.ct-specs {
+  --ct-metric-radius: var(--radius-lg);
+  --ct-metric-padding: var(--space-7);
+  --ct-metric-value-font-size: var(--font-size-4xl);
+  --ct-metric-label-font-size: var(--font-size-xs);
+}
+
+:is(.ct-metric, .ct-spec) {
+  --ct-metric-accent: transparent;
+  --ct-metric-status-color: var(--color-text-secondary);
+
+  position: relative;
+  min-width: 0;
+  margin: 0;
+  padding: var(--ct-metric-padding);
+  background: var(--ct-metric-bg);
+}
+
+.ct-metric {
+  display: grid;
+}
+
+: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);
+}
+
+:is(.ct-metric__value, .ct-spec__value) {
+  margin: 0;
+  font-family: var(--font-family-brand);
+  font-size: var(--ct-metric-value-font-size);
+  font-weight: var(--font-weight-extrabold);
+  line-height: 1;
+  color: var(--color-text-primary);
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
+.ct-metric__value {
+  order: 1;
+}
+
+:is(.ct-metric__value, .ct-spec__value) small {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+}
+
+:is(.ct-metric__label, .ct-spec__label) {
+  display: block;
+  margin-top: var(--space-4);
+  font-family: var(--font-family-mono);
+  font-size: var(--ct-metric-label-font-size);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--color-text-secondary);
+}
+
+.ct-metric__label {
+  order: 2;
+}
+
+.ct-metric__meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin-top: var(--space-4);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-family: var(--font-family-body);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-xs);
+  text-transform: none;
+  letter-spacing: normal;
+  order: 3;
+}
+
+.ct-metric__status {
+  color: var(--ct-metric-status-color);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Status wording stays neutral and AA-safe on every metric surface;
+   semantic colour is carried by the non-text datum edge. */
+
+.ct-metric[data-status='success'] {
+  --ct-metric-accent: var(--color-state-success);
+  --ct-metric-status-color: var(--color-text-primary);
+}
+
+.ct-metric[data-status='info'] {
+  --ct-metric-accent: var(--color-state-info);
+  --ct-metric-status-color: var(--color-text-primary);
+}
+
+.ct-metric[data-status='warning'] {
+  --ct-metric-accent: var(--color-state-warning);
+  --ct-metric-status-color: var(--color-text-primary);
+}
+
+.ct-metric:is([data-status='danger'], [data-status='error'], [data-state='error']) {
+  --ct-metric-accent: var(--color-state-danger);
+  --ct-metric-status-color: var(--color-text-primary);
+}
+
+.ct-metric[data-status],
+.ct-metric[data-state='error'] {
+  box-shadow: inset var(--border-thick) 0 0 0 var(--ct-metric-accent);
+}
+
+.ct-metric:is([aria-busy='true'], [data-state='loading']) {
+  cursor: wait;
+}
+
+.ct-metric:is([aria-disabled='true'], [data-state='disabled']) {
+  opacity: var(--opacity-disabled);
+}
+
+@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/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/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,6 +29,8 @@
   display: flex;
   align-items: center;
   gap: var(--ct-navbar-gap);
+  width: 100%;
+  min-width: 0;
   height: var(--ct-navbar-height);
   padding: var(--ct-navbar-padding-y) var(--ct-navbar-padding-x);
   background: var(--ct-navbar-bg);
@@ -44,6 +46,7 @@
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  min-width: 0;
 }
 
 .ct-navbar__brand {
@@ -56,6 +59,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 +72,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 +357,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,6 +434,32 @@
   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 ────────────────────────────────────────────────────── */
 
 .ct-navbar--sticky {
@@ -463,7 +503,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 +526,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 +630,49 @@
     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);
+  }
+}
+
 /* ── Reduced Motion ────────────────────────────────────────────── */
 
 @media (prefers-reduced-motion: reduce) {
@@ -612,3 +686,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/slider.css

@@ -269,7 +269,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 {

package/components/status.css

@@ -0,0 +1,107 @@
+/* ── Live / Connection Status ──────────────────────────────────── */
+
+.ct-status {
+  --ct-status-gap: var(--component-status-gap);
+  --ct-status-font-size: var(--component-status-font-size);
+  --ct-status-icon-size: var(--component-status-icon-size);
+  --ct-status-color: var(--color-text-secondary);
+  --ct-status-indicator-color: var(--color-border-strong);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ct-status-gap);
+  color: var(--ct-status-color);
+  font-size: var(--ct-status-font-size);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-sm);
+}
+
+.ct-status__indicator,
+.ct-status__icon {
+  width: var(--ct-status-icon-size);
+  height: var(--ct-status-icon-size);
+  flex: none;
+}
+
+.ct-status__indicator {
+  border: var(--border-thin) solid currentColor;
+  border-radius: var(--radius-round);
+  background: var(--ct-status-indicator-color);
+  color: var(--ct-status-indicator-color);
+}
+
+.ct-status__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ct-status-indicator-color);
+}
+
+.ct-status__label {
+  min-width: 0;
+}
+
+.ct-status__detail {
+  color: var(--color-text-muted);
+  font-weight: var(--font-weight-regular);
+}
+
+/* Labels use surface-safe neutral text because status can appear on any
+   surface. Semantic colour is reserved for the non-text indicator, while
+   the required visible wording carries meaning without colour. */
+
+.ct-status:is([data-status='online'], [data-status='success']) {
+  --ct-status-color: var(--color-text-primary);
+  --ct-status-indicator-color: var(--color-state-success);
+}
+
+.ct-status:is([data-status='connecting'], [data-status='info'], [data-state='loading']) {
+  --ct-status-color: var(--color-text-primary);
+  --ct-status-indicator-color: var(--color-state-info);
+}
+
+.ct-status:is([data-status='degraded'], [data-status='warning']) {
+  --ct-status-color: var(--color-text-primary);
+  --ct-status-indicator-color: var(--color-state-warning);
+}
+
+.ct-status:is([data-status='offline'], [data-status='neutral']) {
+  --ct-status-color: var(--color-text-secondary);
+  --ct-status-indicator-color: var(--color-border-strong);
+}
+
+.ct-status:is([data-status='error'], [data-status='danger'], [data-state='error']) {
+  --ct-status-color: var(--color-text-primary);
+  --ct-status-indicator-color: var(--color-state-danger);
+}
+
+.ct-status:is([aria-busy='true'], [data-status='connecting'], [data-state='loading']) {
+  cursor: wait;
+}
+
+.ct-status:is([aria-busy='true'], [data-status='connecting'], [data-state='loading']) .ct-status__indicator {
+  background: transparent;
+  border: var(--border-medium) solid currentColor;
+  border-inline-end-color: transparent;
+  animation: ct-spin var(--ct-spinner-duration) linear infinite;
+}
+
+.ct-status:is([aria-disabled='true'], [data-state='disabled']) {
+  opacity: var(--opacity-disabled);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-status__indicator {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .ct-status__indicator {
+    border: var(--border-medium) solid currentColor;
+  }
+
+  .ct-status:is([aria-busy='true'], [data-status='connecting'], [data-state='loading']) .ct-status__indicator {
+    border-inline-end-style: dotted;
+  }
+}