@neuravision/construct 1.2.0 → 2.0.0

package/components/_shared.css

@@ -22,7 +22,7 @@
   --ct-dropdown-min-width: 200px;
   --ct-switch-width: 44px;
   --ct-switch-height: 24px;
-  --ct-tooltip-bg: var(--color-slate-950);
+  --ct-tooltip-bg: var(--color-stone-950);
   --ct-tooltip-color: var(--color-text-inverse);
   --ct-tooltip-radius: var(--radius-sm);
   --ct-tooltip-shadow: var(--shadow-sm);

package/components/app-shell-v2.css

@@ -278,11 +278,11 @@
 /* Tinted sidebar surface — Slack / Linear / Discord aesthetic. */
 
 .ct-app-shell-v2--sidebar-branded > .ct-app-shell-v2__sidebar {
-  --_branded-bg: var(--color-slate-900);
-  --_branded-border: var(--color-slate-700);
-  --_branded-text: var(--color-slate-300);
-  --_branded-text-strong: var(--color-slate-0);
-  --_branded-text-muted: var(--color-slate-100);
+  --_branded-bg: var(--color-stone-900);
+  --_branded-border: var(--color-stone-700);
+  --_branded-text: var(--color-stone-300);
+  --_branded-text-strong: var(--color-stone-0);
+  --_branded-text-muted: var(--color-stone-100);
   --_branded-hover-bg: color-mix(in srgb, var(--_branded-text-strong) 8%, transparent);
   --_branded-active-bg: color-mix(in srgb, var(--_branded-text-strong) 12%, transparent);
   --_branded-badge-bg: color-mix(in srgb, var(--_branded-text-strong) 15%, transparent);
@@ -325,8 +325,8 @@
 
 .ct-app-shell-v2--sidebar-branded .ct-app-shell-v2__sidebar .ct-nav-item--active .ct-nav-item__badge,
 .ct-app-shell-v2--sidebar-branded .ct-app-shell-v2__sidebar .ct-nav-item[aria-current='page'] .ct-nav-item__badge {
-  background: var(--color-brand-primary);
-  color: var(--color-text-inverse);
+  background: var(--color-brand-accent);
+  color: var(--color-brand-on-accent);
 }
 
 

package/components/banner.css

@@ -127,18 +127,18 @@
 .ct-banner.ct-banner--solid {
   --ct-banner-bg: var(--ct-banner-accent);
   --ct-banner-border: var(--ct-banner-accent);
-  color: var(--color-text-inverse);
+  color: var(--color-state-on-solid);
 }
 
 .ct-banner--solid .ct-banner__icon,
 .ct-banner--solid .ct-banner__message,
 .ct-banner--solid .ct-banner__close {
-  color: var(--color-text-inverse);
+  color: var(--color-state-on-solid);
 }
 
 @media (hover: hover) {
   .ct-banner--solid .ct-banner__close:hover {
-    background: color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
+    background: color-mix(in srgb, var(--color-state-on-solid) 20%, transparent);
   }
 }
 

package/components/button.css

@@ -3,7 +3,7 @@
   --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-inverse);
+  --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);
@@ -83,7 +83,7 @@
   --ct-button-bg-hover: var(--color-brand-accent-hover);
   --ct-button-bg-active: var(--color-brand-accent-active);
   --ct-button-border: transparent;
-  --ct-button-color: var(--color-text-inverse);
+  --ct-button-color: var(--color-brand-on-accent);
 }
 
 .ct-button--danger {
@@ -91,7 +91,7 @@
   --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-border: transparent;
-  --ct-button-color: var(--color-text-inverse);
+  --ct-button-color: var(--color-state-on-solid);
 }
 
 .ct-button--link {

package/components/card.css

@@ -59,7 +59,7 @@
 }
 
 .ct-card--interactive[aria-selected='true'] {
-  border-color: var(--color-brand-primary);
+  border-color: var(--color-brand-accent);
   box-shadow: var(--shadow-md);
 }
 

package/components/chart.css

@@ -0,0 +1,369 @@
+/* ── Chart ──
+ *
+ * Framework-agnostic styling skin for SVG data-visualisation primitives
+ * (line / area, bar, donut, sparkline, gauge). The geometry (path data,
+ * scales, arcs) is produced by the consuming layer (e.g. the ng-construct
+ * `af-*-chart` components); this file only themes the resulting SVG and the
+ * accessible data-table fallback that every chart ships with.
+ *
+ * Series colour is carried via `color` on a `.ct-chart__series--N` element and
+ * read back through `currentColor`, so line, fill, dots and legend swatch all
+ * share a single source of truth and consumers can override one custom
+ * property to re-theme a series.
+ */
+
+.ct-chart {
+  --ct-chart-grid: var(--color-border-subtle);
+  --ct-chart-axis: var(--color-border-default);
+  --ct-chart-label: var(--color-text-muted);
+  --ct-chart-track: var(--color-bg-muted);
+  --ct-chart-area-opacity: 0.16;
+  --ct-chart-line-width: 2px;
+  --ct-chart-gauge-width: 14px;
+  --ct-chart-radius: var(--radius-xs);
+
+  --ct-chart-series-1: var(--color-chart-series-1);
+  --ct-chart-series-2: var(--color-chart-series-2);
+  --ct-chart-series-3: var(--color-chart-series-3);
+  --ct-chart-series-4: var(--color-chart-series-4);
+  --ct-chart-series-5: var(--color-chart-series-5);
+  --ct-chart-series-6: var(--color-chart-series-6);
+  --ct-chart-series-7: var(--color-chart-series-7);
+  --ct-chart-series-8: var(--color-chart-series-8);
+
+  display: block;
+  inline-size: 100%;
+  color: var(--color-text-primary);
+  font-family: var(--font-family-body);
+}
+
+.ct-chart__figure {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.ct-chart__svg {
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+  overflow: visible;
+}
+
+/* ── Series colour mapping ── */
+.ct-chart__series--1 { color: var(--ct-chart-series-1); }
+.ct-chart__series--2 { color: var(--ct-chart-series-2); }
+.ct-chart__series--3 { color: var(--ct-chart-series-3); }
+.ct-chart__series--4 { color: var(--ct-chart-series-4); }
+.ct-chart__series--5 { color: var(--ct-chart-series-5); }
+.ct-chart__series--6 { color: var(--ct-chart-series-6); }
+.ct-chart__series--7 { color: var(--ct-chart-series-7); }
+.ct-chart__series--8 { color: var(--ct-chart-series-8); }
+
+/* ── Axes & grid ── */
+.ct-chart__grid-line {
+  stroke: var(--ct-chart-grid);
+  stroke-width: 1px;
+  shape-rendering: crispEdges;
+}
+
+.ct-chart__axis-line {
+  stroke: var(--ct-chart-axis);
+  stroke-width: 1px;
+  shape-rendering: crispEdges;
+}
+
+.ct-chart__tick-label,
+.ct-chart__axis-title {
+  fill: var(--ct-chart-label);
+  font-size: var(--font-size-xs);
+  font-family: var(--font-family-body);
+}
+
+.ct-chart__axis-title {
+  font-weight: var(--font-weight-medium);
+  fill: var(--color-text-secondary);
+}
+
+/* ── Line & area ── */
+.ct-chart__line {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--ct-chart-line-width);
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.ct-chart__area {
+  fill: currentColor;
+  opacity: var(--ct-chart-area-opacity);
+  stroke: none;
+}
+
+.ct-chart__dot {
+  fill: currentColor;
+  stroke: var(--color-bg-elevated);
+  stroke-width: 1.5px;
+}
+
+.ct-chart__dot--hollow {
+  fill: var(--color-bg-elevated);
+  stroke: currentColor;
+  stroke-width: var(--ct-chart-line-width);
+}
+
+/* ── Bars ── */
+.ct-chart__bar {
+  fill: currentColor;
+  rx: var(--ct-chart-radius);
+  transition: opacity var(--duration-fast) var(--easing-standard);
+}
+
+.ct-chart__bar:hover {
+  opacity: 0.85;
+}
+
+/* ── Donut / pie ── */
+.ct-chart__slice {
+  fill: currentColor;
+  stroke: var(--color-bg-elevated);
+  stroke-width: 2px;
+  transition: opacity var(--duration-fast) var(--easing-standard);
+}
+
+.ct-chart__slice:hover {
+  opacity: 0.85;
+}
+
+/* Focus parity for interactive marks: any chart shape the consumer makes
+ * keyboard-focusable (tabindex) gets the same visible affordance as :hover. */
+.ct-chart__bar:focus-visible,
+.ct-chart__slice:focus-visible,
+.ct-chart__dot:focus-visible {
+  outline: var(--border-medium) solid var(--color-focus-ring);
+  outline-offset: 1px;
+}
+
+.ct-chart__donut-value {
+  fill: var(--color-text-primary);
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  font-family: var(--font-family-heading);
+}
+
+.ct-chart__donut-label {
+  fill: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+}
+
+/* ── Gauge ── */
+.ct-chart__gauge-track {
+  fill: none;
+  stroke: var(--ct-chart-track);
+  stroke-width: var(--ct-chart-gauge-width);
+  stroke-linecap: round;
+}
+
+.ct-chart__gauge-value {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--ct-chart-gauge-width);
+  stroke-linecap: round;
+  transition: stroke-dashoffset var(--duration-normal) var(--easing-standard);
+}
+
+.ct-chart__gauge-value--default { color: var(--color-brand-primary); }
+.ct-chart__gauge-value--success { color: var(--color-state-success); }
+.ct-chart__gauge-value--warning { color: var(--color-state-warning); }
+.ct-chart__gauge-value--danger { color: var(--color-state-danger); }
+
+.ct-chart__gauge-text {
+  fill: var(--color-text-primary);
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  font-family: var(--font-family-heading);
+}
+
+.ct-chart__gauge-caption {
+  fill: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+}
+
+/* ── Sparkline ── */
+.ct-chart--sparkline {
+  inline-size: auto;
+}
+
+.ct-chart--sparkline .ct-chart__svg {
+  inline-size: auto;
+}
+
+/* Compact, inline empty state for sparklines (overrides the card-sized default). */
+.ct-chart--sparkline .ct-chart__empty {
+  display: inline;
+  min-block-size: 0;
+  padding: 0;
+  background: none;
+  border: 0;
+  font-size: var(--font-size-xs);
+}
+
+/* ── Legend ── */
+.ct-chart__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4) var(--space-6);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ct-chart__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.ct-chart__legend-marker {
+  inline-size: 12px;
+  block-size: 12px;
+  flex: none;
+  border-radius: var(--radius-xs);
+  background: currentColor;
+}
+
+.ct-chart__legend-marker--line {
+  block-size: 3px;
+  border-radius: var(--radius-pill);
+}
+
+/* ── Accessible data-table fallback ──
+ * Hidden visually by default; revealed when the consumer toggles
+ * `.ct-chart--show-table`. Always present in the DOM for assistive tech. */
+.ct-chart__table-wrap {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.ct-chart--show-table .ct-chart__table-wrap {
+  position: static;
+  inline-size: auto;
+  block-size: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+.ct-chart__table {
+  inline-size: 100%;
+  border-collapse: collapse;
+  font-size: var(--font-size-sm);
+  text-align: start;
+}
+
+.ct-chart__table caption {
+  text-align: start;
+  color: var(--color-text-muted);
+  padding-block-end: var(--space-3);
+}
+
+.ct-chart__table th,
+.ct-chart__table td {
+  border: var(--border-thin) solid var(--color-border-subtle);
+  padding: var(--space-3) var(--space-4);
+}
+
+.ct-chart__table th {
+  background: var(--color-bg-muted);
+  font-weight: var(--font-weight-semibold);
+  text-align: start;
+}
+
+.ct-chart__table td {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Toggle button for the table fallback ── */
+.ct-chart__toolbar {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.ct-chart__toggle {
+  appearance: none;
+  background: transparent;
+  border: var(--border-thin) solid var(--color-border-default);
+  border-radius: var(--radius-control);
+  color: var(--color-text-secondary);
+  font: inherit;
+  font-size: var(--font-size-sm);
+  min-block-size: 24px;
+  padding: var(--space-2) var(--space-4);
+  cursor: pointer;
+}
+
+.ct-chart__toggle:hover {
+  background: var(--color-bg-muted);
+}
+
+.ct-chart__toggle:focus-visible {
+  outline: var(--border-medium) solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* ── Empty state ── */
+.ct-chart__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: 120px;
+  padding: var(--space-7);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  text-align: center;
+  background: var(--color-bg-surface);
+  border: var(--border-thin) dashed var(--color-border-subtle);
+  border-radius: var(--radius-card);
+}
+
+/* ── Motion & high-contrast ── */
+@media (prefers-reduced-motion: reduce) {
+  .ct-chart__bar,
+  .ct-chart__slice,
+  .ct-chart__gauge-value {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  /* Data marks encode meaning through colour, so they opt out of the forced
+   * palette to stay internally consistent — otherwise a coloured legend would
+   * describe monochrome lines. The always-present data-table fallback remains
+   * the fully forced-colors-compliant path to the underlying values. */
+  .ct-chart__line,
+  .ct-chart__area,
+  .ct-chart__dot,
+  .ct-chart__bar,
+  .ct-chart__slice,
+  .ct-chart__legend-marker,
+  .ct-chart__gauge-track,
+  .ct-chart__gauge-value {
+    forced-color-adjust: none;
+  }
+  /* Chrome (grid & axes) follows the user's forced palette. */
+  .ct-chart__grid-line,
+  .ct-chart__axis-line {
+    stroke: GrayText;
+  }
+}

package/components/checkbox.css

@@ -46,7 +46,7 @@
   content: '';
   width: 10px;
   height: 6px;
-  border: 2px solid var(--color-text-inverse);
+  border: 2px solid var(--color-brand-on-accent);
   border-block-start: 0;
   border-inline-end: 0;
   transform: rotate(-45deg) scale(0);
@@ -58,15 +58,15 @@
   width: 8px;
   height: 8px;
   border-radius: var(--radius-round);
-  background: var(--color-text-inverse);
+  background: var(--color-brand-on-accent);
   transform: scale(0);
   transition: transform var(--duration-fast) var(--easing-standard);
 }
 
 .ct-check__input:checked,
 .ct-radio__input:checked {
-  background: var(--color-brand-primary);
-  border-color: var(--color-brand-primary);
+  background: var(--color-brand-accent);
+  border-color: var(--color-brand-accent);
 }
 
 .ct-check__input:checked::before,
@@ -82,13 +82,13 @@
 
   .ct-check__input:checked:not(:disabled):hover,
   .ct-radio__input:checked:not(:disabled):hover {
-    background: var(--color-brand-primary-hover);
-    border-color: var(--color-brand-primary-hover);
+    background: var(--color-brand-accent-hover);
+    border-color: var(--color-brand-accent-hover);
   }
 
   .ct-check__input:indeterminate:not(:disabled):hover {
-    background: var(--color-brand-primary-hover);
-    border-color: var(--color-brand-primary-hover);
+    background: var(--color-brand-accent-hover);
+    border-color: var(--color-brand-accent-hover);
   }
 }
 
@@ -107,14 +107,14 @@
 }
 
 .ct-check__input:indeterminate {
-  background: var(--color-brand-primary);
-  border-color: var(--color-brand-primary);
+  background: var(--color-brand-accent);
+  border-color: var(--color-brand-accent);
 }
 
 .ct-check__input:indeterminate::before {
   width: 10px;
   height: 0;
-  border-block-start: 2px solid var(--color-text-inverse);
+  border-block-start: 2px solid var(--color-brand-on-accent);
   border-inline-end: 0;
   transform: scale(1);
 }

package/components/chip.css

@@ -78,10 +78,10 @@
 
 .ct-chip[aria-pressed='true'],
 .ct-chip--selected {
-  --ct-chip-bg: var(--color-brand-primary);
-  --ct-chip-border: var(--color-brand-primary);
-  --ct-chip-color: var(--color-text-inverse);
-  --ct-chip-accent: var(--color-text-inverse);
+  --ct-chip-bg: var(--color-brand-accent);
+  --ct-chip-border: var(--color-brand-accent);
+  --ct-chip-color: var(--color-brand-on-accent);
+  --ct-chip-accent: var(--color-brand-on-accent);
 }
 
 /* ── Outline variant ─────────────────────────────────────────── */
@@ -92,7 +92,7 @@
 
 .ct-chip--outline[aria-pressed='true'],
 .ct-chip--outline.ct-chip--selected {
-  --ct-chip-bg: var(--color-brand-primary);
+  --ct-chip-bg: var(--color-brand-accent);
 }
 
 /* ── Semantic color variants (Subtle — default) ────────────── */
@@ -160,29 +160,29 @@
 .ct-chip--solid.ct-chip--info {
   --ct-chip-bg: var(--color-state-info);
   --ct-chip-border: var(--color-state-info);
-  --ct-chip-color: var(--color-text-inverse);
-  --ct-chip-accent: var(--color-text-inverse);
+  --ct-chip-color: var(--color-state-on-solid);
+  --ct-chip-accent: var(--color-state-on-solid);
 }
 
 .ct-chip--solid.ct-chip--success {
   --ct-chip-bg: var(--color-state-success-text);
   --ct-chip-border: var(--color-state-success-text);
-  --ct-chip-color: var(--color-text-inverse);
-  --ct-chip-accent: var(--color-text-inverse);
+  --ct-chip-color: var(--color-state-on-solid);
+  --ct-chip-accent: var(--color-state-on-solid);
 }
 
 .ct-chip--solid.ct-chip--warning {
   --ct-chip-bg: var(--color-state-warning-text);
   --ct-chip-border: var(--color-state-warning-text);
-  --ct-chip-color: var(--color-text-inverse);
-  --ct-chip-accent: var(--color-text-inverse);
+  --ct-chip-color: var(--color-state-on-solid);
+  --ct-chip-accent: var(--color-state-on-solid);
 }
 
 .ct-chip--solid.ct-chip--danger {
   --ct-chip-bg: var(--color-state-danger);
   --ct-chip-border: var(--color-state-danger);
-  --ct-chip-color: var(--color-text-inverse);
-  --ct-chip-accent: var(--color-text-inverse);
+  --ct-chip-color: var(--color-state-on-solid);
+  --ct-chip-accent: var(--color-state-on-solid);
 }
 
 /* ── Disabled state ──────────────────────────────────────────── */

package/components/combobox.css

@@ -180,7 +180,7 @@
 
 .ct-combobox__option[data-highlighted] {
   background: var(--color-bg-muted);
-  outline: var(--border-medium) solid var(--color-brand-primary);
+  outline: var(--border-medium) solid var(--color-focus-ring);
   outline-offset: -2px;
 }
 

package/components/dropdown.css

@@ -94,13 +94,13 @@
 
 .ct-dropdown__item:focus-visible {
   background: var(--color-bg-muted);
-  outline: var(--border-medium) solid var(--color-brand-primary);
+  outline: var(--border-medium) solid var(--color-focus-ring);
   outline-offset: -2px;
 }
 
 .ct-dropdown__item[data-highlighted] {
   background: var(--color-bg-muted);
-  outline: var(--border-medium) solid var(--color-brand-primary);
+  outline: var(--border-medium) solid var(--color-focus-ring);
   outline-offset: -2px;
 }
 
@@ -207,7 +207,7 @@
 }
 
 .ct-dropdown__item[aria-checked='true'] .ct-dropdown__item-radio::before {
-  background: var(--color-brand-primary);
+  background: var(--color-brand-accent);
 }
 
 /* ── Label (group header, non-interactive) ───────────────────────── */
@@ -283,7 +283,7 @@
 .ct-dropdown__sub-trigger:focus-visible,
 .ct-dropdown__sub-trigger[data-highlighted] {
   background: var(--color-bg-muted);
-  outline: var(--border-medium) solid var(--color-brand-primary);
+  outline: var(--border-medium) solid var(--color-focus-ring);
   outline-offset: -2px;
 }
 

package/components/file-upload.css

@@ -26,7 +26,7 @@
 }
 
 .ct-file-upload__dropzone[data-state='dragover'] {
-  border-color: var(--color-brand-primary);
+  border-color: var(--color-brand-accent);
   background: var(--color-bg-muted);
 }
 

package/components/index.css

@@ -51,3 +51,4 @@
 @import './_shell-shared.css';
 @import './list.css';
 @import './tree.css';
+@import './chart.css';

package/components/list.css

@@ -218,8 +218,11 @@
 /* ── Active / Highlighted ── */
 
 .ct-list__item--active,
-.ct-list__item[data-state='active'] {
+.ct-list__item[data-state='active'],
+.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);
 }
 
 .ct-list__item--active .ct-list__item-title,