@neuravision/construct 2.0.3 → 2.1.2

package/components/chart.css

@@ -86,6 +86,27 @@
   fill: var(--color-text-secondary);
 }
 
+/* ── Datum reference line ──
+   Construct's signature applied to data: an orange reference line marks
+   a threshold, target, or "today". The dash pattern separates the
+   reference from data series without relying on hue, and the value it
+   encodes must also appear as text — in the label and in the chart's
+   data-table fallback — so the line itself stays supplementary. */
+.ct-chart__datum-line {
+  stroke: var(--color-brand-accent-strong);
+  stroke-width: var(--ct-chart-line-width);
+  stroke-dasharray: 6 4;
+}
+
+.ct-chart__datum-label {
+  fill: var(--color-text-secondary);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
 /* ── Line & area ── */
 .ct-chart__line {
   fill: none;
@@ -366,4 +387,9 @@
   .ct-chart__axis-line {
     stroke: GrayText;
   }
+
+  /* The datum reference line stays distinct from the dimmed chrome. */
+  .ct-chart__datum-line {
+    stroke: CanvasText;
+  }
 }

package/components/checkbox.css

@@ -13,7 +13,7 @@
   appearance: none;
   width: var(--space-6);
   height: var(--space-6);
-  border: var(--border-thin) solid var(--color-border-default);
+  border: var(--border-thin) solid var(--ct-control-border);
   background: var(--color-bg-elevated);
   cursor: pointer;
   display: grid;
@@ -24,7 +24,8 @@
     transform var(--duration-fast) var(--easing-standard);
 }
 
-/* Invisible touch-target expansion (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-check__input::after,
   .ct-radio__input::after {
@@ -97,6 +98,9 @@
   background: var(--color-bg-muted);
   border-color: var(--color-border-subtle);
   cursor: not-allowed;
+  /* Disabled is fully colour-encoded above; cancel foundations' global
+     :disabled opacity so the control is not double-dimmed. */
+  opacity: 1;
 }
 
 .ct-check__input:focus-visible,
@@ -118,3 +122,32 @@
   border-inline-end: 0;
   transform: scale(1);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-check__input,
+  .ct-radio__input,
+  .ct-check__input::before,
+  .ct-radio__input::before {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .ct-check__input:checked,
+  .ct-check__input:indeterminate,
+  .ct-radio__input:checked {
+    border-color: ButtonText;
+  }
+
+  /* The tick and indeterminate dash are border-drawn and survive on their
+     own; the radio dot is background-drawn and would be forced to Canvas. */
+  .ct-radio__input:checked::before {
+    background: SelectedItem;
+    forced-color-adjust: none;
+  }
+
+  .ct-check__input:disabled,
+  .ct-radio__input:disabled {
+    border-color: GrayText;
+  }
+}

package/components/chip.css

@@ -35,7 +35,9 @@
   --ct-chip-padding-x: var(--space-2);
   --ct-chip-font-size: var(--font-size-xs);
   --ct-chip-line-height: var(--line-height-xs);
-  --ct-chip-remove-size: var(--icon-sm);
+  /* WCAG 2.2 SC 2.5.8: the remove button stays at least 24px in every
+     pointer context, so the small chip cannot shrink it below that. */
+  --ct-chip-remove-size: var(--icon-lg);
   --ct-chip-gap: var(--space-1);
 }
 
@@ -340,12 +342,23 @@
   outline-offset: 2px;
 }
 
-/* ── 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) {
   .ct-chip {
     min-height: 44px;
   }
+
+  /* Hit area may extend past the chip edge, mirroring checkbox.css. */
+  .ct-chip__remove {
+    position: relative;
+  }
+
+  .ct-chip__remove::before {
+    content: '';
+    position: absolute;
+    inset: calc((var(--ct-chip-remove-size) - 44px) / 2);
+  }
 }
 
 /* ── Reduced motion ──────────────────────────────────────────── */
@@ -361,3 +374,18 @@
     transform: none;
   }
 }
+
+/* ── Forced colors ───────────────────────────────────────────── */
+
+@media (forced-colors: active) {
+  /* Mask-drawn glyphs and the status dot paint via background-color,
+     which forced colors resets — repaint them with system ink. The
+     selected checkmark is border-drawn and survives on its own. */
+  .ct-chip__icon--info,
+  .ct-chip__icon--success,
+  .ct-chip__icon--warning,
+  .ct-chip__icon--danger,
+  .ct-chip__dot {
+    background-color: CanvasText;
+  }
+}

package/components/combobox.css

@@ -374,6 +374,27 @@
   border-color: transparent;
 }
 
+/* Replacement indicator for the removed input outline (mirrors the --multi pattern) */
+.ct-combobox--inline:focus-within {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* ── Construct 44×44 target policy (WCAG 2.2 SC 2.5.5 is AAA) ── */
+
+@media (pointer: coarse) {
+  .ct-combobox__option {
+    min-block-size: 44px;
+  }
+
+  /* Hit area extends past the visual 24px trigger, mirroring checkbox.css. */
+  .ct-combobox__trigger::before {
+    content: '';
+    position: absolute;
+    inset: calc((var(--icon-lg) - 44px) / 2);
+  }
+}
+
 /* ── Reduced motion ──────────────────────────────────────────── */
 
 @media (prefers-reduced-motion: reduce) {

package/components/datepicker.css

@@ -1,6 +1,8 @@
 /* ─── Datepicker ────────────────────────────────────────────────── */
 
 .ct-datepicker {
+  --ct-datepicker-selected-surface: color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
+
   position: relative;
   display: inline-block;
 }
@@ -77,10 +79,22 @@
   justify-items: center;
 }
 
+/* Rows keep grid placement on the shared 7-column grid. display: contents
+   once dropped element semantics in older engines; current Chromium/Firefox/
+   Safari expose role="row" on display: contents elements correctly. */
 .ct-datepicker__row {
   display: contents;
 }
 
+/* Optional gridcell wrapper (APG date-picker dialog markup): the cell is the
+   grid item and carries role="gridcell" + aria-selected; the day button
+   inside keeps its native button role. */
+.ct-datepicker__cell {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
 .ct-datepicker__weekday {
   font-size: var(--font-size-xs);
   color: var(--color-text-muted);
@@ -113,9 +127,10 @@
   outline-offset: 2px;
 }
 
-.ct-datepicker__day[aria-selected='true'] {
+.ct-datepicker__day[aria-selected='true'],
+.ct-datepicker__cell[aria-selected='true'] .ct-datepicker__day {
   background: var(--color-brand-primary);
-  color: var(--color-text-inverse);
+  color: var(--color-text-on-primary);
 }
 
 .ct-datepicker__day[data-outside='true'] {
@@ -150,19 +165,19 @@
 /* ── Range selection ────────────────────────────────────────────── */
 
 .ct-datepicker__day[data-in-range] {
-  background: var(--color-brand-primary-surface, color-mix(in srgb, var(--color-brand-primary) 12%, transparent));
+  background: var(--ct-datepicker-selected-surface);
   border-radius: 0;
 }
 
 .ct-datepicker__day[data-range-start] {
   background: var(--color-brand-primary);
-  color: var(--color-text-inverse);
+  color: var(--color-text-on-primary);
   border-radius: var(--radius-sm) 0 0 var(--radius-sm);
 }
 
 .ct-datepicker__day[data-range-end] {
   background: var(--color-brand-primary);
-  color: var(--color-text-inverse);
+  color: var(--color-text-on-primary);
   border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
 }
 
@@ -170,6 +185,38 @@
   border-radius: var(--radius-sm);
 }
 
+/* ── Coarse pointers ────────────────────────────────────────────── */
+
+@media (pointer: coarse) {
+  /* Day cells may compress inside the min(90vw, …) popover; tap size
+     wins over the shared column width (44×44 policy). */
+  .ct-datepicker__day {
+    min-width: var(--control-height-calendar-day);
+    min-height: var(--control-height-calendar-day);
+  }
+}
+
+/* ── Forced colors ──────────────────────────────────────────────── */
+
+@media (forced-colors: active) {
+  /* Selection fills are background-only and would be stripped to Canvas —
+     re-encode with system selection colors (data-today's border and the
+     highlight outline survive on their own). */
+  .ct-datepicker__day[aria-selected='true'],
+  .ct-datepicker__cell[aria-selected='true'] .ct-datepicker__day,
+  .ct-datepicker__cell[aria-selected='true'] .ct-datepicker__month,
+  .ct-datepicker__cell[aria-selected='true'] .ct-datepicker__year,
+  .ct-datepicker__month[aria-selected='true'],
+  .ct-datepicker__year[aria-selected='true'],
+  .ct-datepicker__day[data-in-range],
+  .ct-datepicker__day[data-range-start],
+  .ct-datepicker__day[data-range-end] {
+    background: SelectedItem;
+    color: SelectedItemText;
+    forced-color-adjust: none;
+  }
+}
+
 /* ── Month grid (3×4) ───────────────────────────────────────────── */
 
 .ct-datepicker__month-grid {
@@ -203,9 +250,10 @@
   outline-offset: 2px;
 }
 
-.ct-datepicker__month[aria-selected='true'] {
+.ct-datepicker__month[aria-selected='true'],
+.ct-datepicker__cell[aria-selected='true'] .ct-datepicker__month {
   background: var(--color-brand-primary);
-  color: var(--color-text-inverse);
+  color: var(--color-text-on-primary);
 }
 
 .ct-datepicker__month[data-highlighted] {
@@ -252,9 +300,10 @@
   outline-offset: 2px;
 }
 
-.ct-datepicker__year[aria-selected='true'] {
+.ct-datepicker__year[aria-selected='true'],
+.ct-datepicker__cell[aria-selected='true'] .ct-datepicker__year {
   background: var(--color-brand-primary);
-  color: var(--color-text-inverse);
+  color: var(--color-text-on-primary);
 }
 
 .ct-datepicker__year[data-highlighted] {

package/components/datum.css

@@ -0,0 +1,277 @@
+/* ============================================================
+   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 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 ──
+   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: 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 {
+  --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(--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 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 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 ──
+   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(--component-datum-edge-width) 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(--component-datum-edge-width) 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);
+}
+
+/* ── 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);
 }