@neuravision/construct 2.0.3 → 2.1.1

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),
@@ -106,11 +106,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;
   }
 }

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/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);
@@ -362,13 +369,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 +397,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);
@@ -249,7 +258,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 +269,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 +295,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/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,16 @@
 .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);
 }
 
 .ct-card--sm {
@@ -47,7 +53,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 +61,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 +70,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 +91,31 @@
     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;
+  top: calc(-1 * var(--border-thin));
+  left: calc(-1 * var(--border-thin));
+  width: 18px;
+  height: 18px;
+  border-top: var(--border-medium) solid var(--color-brand-accent);
+  border-left: var(--border-medium) solid var(--color-brand-accent);
+  border-top-left-radius: var(--radius-lg);
+}
+
+.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. */
+  box-shadow: inset var(--border-thick) 0 0 0 var(--color-brand-accent), var(--ct-card-shadow);
+}

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 {

package/components/chip.css

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

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;
 }
@@ -150,7 +152,7 @@
 /* ── 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;
 }