@neuravision/construct 1.1.3 → 1.1.4

package/components/app-shell-v2.css

@@ -32,7 +32,7 @@
   --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: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --ct-v2-surface-shadow: var(--shadow-xs);
   --ct-v2-transition-duration: 250ms;
   --ct-v2-transition-easing: cubic-bezier(0.32, 0.72, 0, 1);
 
@@ -278,10 +278,16 @@
 /* Tinted sidebar surface — Slack / Linear / Discord aesthetic. */
 
 .ct-app-shell-v2--sidebar-branded > .ct-app-shell-v2__sidebar {
-  --_branded-hover-bg: color-mix(in srgb, var(--color-slate-0) 8%, transparent);
-  --_branded-active-bg: color-mix(in srgb, var(--color-slate-0) 12%, transparent);
-  --_branded-badge-bg: color-mix(in srgb, var(--color-slate-0) 15%, transparent);
-  background: var(--color-slate-900);
+  --_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-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);
+
+  background: var(--_branded-bg);
   color: var(--color-text-inverse);
   box-shadow: none;
 }
@@ -291,30 +297,30 @@
 }
 
 .ct-app-shell-v2--sidebar-branded .ct-app-shell-v2__sidebar .ct-sidebar__header {
-  border-bottom-color: var(--color-slate-700);
-  color: var(--color-slate-0);
+  border-bottom-color: var(--_branded-border);
+  color: var(--_branded-text-strong);
 }
 
 .ct-app-shell-v2--sidebar-branded .ct-app-shell-v2__sidebar .ct-nav-item {
-  color: var(--color-slate-300);
+  color: var(--_branded-text);
 }
 
 @media (hover: hover) {
   .ct-app-shell-v2--sidebar-branded .ct-app-shell-v2__sidebar .ct-nav-item:hover {
     background: var(--_branded-hover-bg);
-    color: var(--color-slate-0);
+    color: var(--_branded-text-strong);
   }
 }
 
 .ct-app-shell-v2--sidebar-branded .ct-app-shell-v2__sidebar .ct-nav-item--active,
 .ct-app-shell-v2--sidebar-branded .ct-app-shell-v2__sidebar .ct-nav-item[aria-current='page'] {
   background: var(--_branded-active-bg);
-  color: var(--color-slate-0);
+  color: var(--_branded-text-strong);
 }
 
 .ct-app-shell-v2--sidebar-branded .ct-app-shell-v2__sidebar .ct-nav-item__badge {
   background: var(--_branded-badge-bg);
-  color: var(--color-slate-100);
+  color: var(--_branded-text-muted);
 }
 
 .ct-app-shell-v2--sidebar-branded .ct-app-shell-v2__sidebar .ct-nav-item--active .ct-nav-item__badge,

package/components/banner.css

@@ -144,7 +144,7 @@
 
 /* Solid + success needs darker green for WCAG AA contrast with inverse text */
 .ct-banner.ct-banner--solid[data-variant='success'] {
-  --ct-banner-accent: var(--color-green-700);
+  --ct-banner-accent: var(--color-state-success-text);
 }
 
 /* ---- Appearance: Accents ---- */

package/components/button.css

@@ -88,8 +88,8 @@
 
 .ct-button--danger {
   --ct-button-bg: var(--color-state-danger);
-  --ct-button-bg-hover: var(--color-red-600);
-  --ct-button-bg-active: var(--color-red-700);
+  --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);
 }

package/components/chip.css

@@ -98,14 +98,14 @@
 .ct-chip--info {
   --ct-chip-bg: var(--color-state-info-surface);
   --ct-chip-border: var(--color-state-info-border);
-  --ct-chip-color: var(--color-ocean-700);
+  --ct-chip-color: var(--color-state-info-text);
   --ct-chip-accent: var(--color-state-info);
 }
 
 .ct-chip--success {
   --ct-chip-bg: var(--color-state-success-surface);
   --ct-chip-border: var(--color-state-success-border);
-  --ct-chip-color: var(--color-green-700);
+  --ct-chip-color: var(--color-state-success-text);
   --ct-chip-accent: var(--color-state-success);
 }
 
@@ -119,7 +119,7 @@
 .ct-chip--danger {
   --ct-chip-bg: var(--color-state-danger-surface);
   --ct-chip-border: var(--color-state-danger-border);
-  --ct-chip-color: var(--color-red-700);
+  --ct-chip-color: var(--color-state-danger-text);
   --ct-chip-accent: var(--color-state-danger);
 }
 
@@ -163,17 +163,17 @@
 }
 
 .ct-chip--solid.ct-chip--success {
-  --ct-chip-bg: var(--color-green-700);
-  --ct-chip-border: var(--color-green-700);
+  --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--solid.ct-chip--warning {
-  --ct-chip-bg: var(--color-amber-500);
-  --ct-chip-border: var(--color-amber-500);
-  --ct-chip-color: var(--color-amber-900);
-  --ct-chip-accent: var(--color-amber-900);
+  --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--solid.ct-chip--danger {

package/components/combobox.css

@@ -348,8 +348,7 @@
   border-top: var(--border-thin) solid var(--color-border-subtle);
   border-radius: 0 0 var(--radius-md) var(--radius-md);
   box-shadow: none;
-  border-left: none;
-  border-right: none;
+  border-inline: none;
   border-bottom: none;
 }
 

package/components/navbar.css

@@ -40,6 +40,12 @@
 
 /* ── Brand ──────────────────────────────────────────────────────── */
 
+.ct-navbar__brand-wrapper {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
 .ct-navbar__brand {
   display: inline-flex;
   align-items: center;
@@ -487,24 +493,31 @@
 /* ── Dark ──────────────────────────────────────────────────────── */
 
 .ct-navbar--dark {
-  --ct-navbar-bg: var(--color-slate-900);
-  --ct-navbar-border-color: var(--color-slate-800);
-  color: var(--color-text-inverse);
+  --_dark-bg: var(--color-slate-900);
+  --_dark-bg-hover: var(--color-slate-800);
+  --_dark-border: var(--color-slate-800);
+  --_dark-text: var(--color-slate-300);
+  --_dark-text-strong: var(--color-text-inverse);
+  --_dark-text-muted: var(--color-slate-400);
+
+  --ct-navbar-bg: var(--_dark-bg);
+  --ct-navbar-border-color: var(--_dark-border);
+  color: var(--_dark-text-strong);
 }
 
 .ct-navbar--dark .ct-navbar__link {
-  color: var(--color-slate-300);
+  color: var(--_dark-text);
 }
 
 @media (hover: hover) {
   .ct-navbar--dark .ct-navbar__link:hover {
-    background: var(--color-slate-800);
-    color: var(--color-text-inverse);
+    background: var(--_dark-bg-hover);
+    color: var(--_dark-text-strong);
   }
 }
 
 .ct-navbar--dark .ct-navbar__link[aria-current='page'] {
-  color: var(--color-text-inverse);
+  color: var(--_dark-text-strong);
 }
 
 .ct-navbar--dark .ct-navbar__link[aria-current='page']::after {
@@ -512,48 +525,62 @@
 }
 
 .ct-navbar--dark .ct-navbar__link-chevron {
-  color: var(--color-slate-400);
+  color: var(--_dark-text-muted);
 }
 
 .ct-navbar--dark .ct-navbar__toggle {
-  color: var(--color-text-inverse);
+  color: var(--_dark-text-strong);
 }
 
 @media (hover: hover) {
   .ct-navbar--dark .ct-navbar__toggle:hover {
-    background: var(--color-slate-800);
+    background: var(--_dark-bg-hover);
   }
 }
 
 .ct-navbar--dark .ct-navbar__mobile-menu {
-  background: var(--color-slate-900);
-  border-color: var(--color-slate-800);
+  background: var(--_dark-bg);
+  border-color: var(--_dark-border);
 }
 
 .ct-navbar--dark .ct-navbar__mobile-menu .ct-navbar__link {
-  color: var(--color-slate-300);
+  color: var(--_dark-text);
 }
 
 @media (hover: hover) {
   .ct-navbar--dark .ct-navbar__mobile-menu .ct-navbar__link:hover {
-    background: var(--color-slate-800);
-    color: var(--color-text-inverse);
+    background: var(--_dark-bg-hover);
+    color: var(--_dark-text-strong);
   }
 }
 
 .ct-navbar--dark .ct-navbar__mobile-menu .ct-navbar__link[aria-current='page'] {
-  background: var(--color-slate-800);
-  color: var(--color-text-inverse);
+  background: var(--_dark-bg-hover);
+  color: var(--_dark-text-strong);
 }
 
 .ct-navbar--dark .ct-navbar__actions .ct-button {
-  color: var(--color-text-inverse);
+  color: var(--_dark-text-strong);
 }
 
 /* ── Center Nav ────────────────────────────────────────────────── */
 
+.ct-navbar--center .ct-navbar__brand-wrapper {
+  flex: 1;
+}
+
 .ct-navbar--center .ct-navbar__nav {
-  margin-inline: auto;
+  justify-content: center;
+}
+
+.ct-navbar--center .ct-navbar__actions {
+  flex: 1;
+  justify-content: flex-end;
+  margin-inline-start: 0;
+}
+
+.ct-navbar--center .ct-navbar__spacer {
+  display: none;
 }
 
 /* ── Responsive ────────────────────────────────────────────────── */

package/components/table.css

@@ -16,7 +16,7 @@
 .ct-table td {
   padding: var(--space-4) var(--space-5);
   border-bottom: var(--border-thin) solid var(--color-border-subtle);
-  text-align: left;
+  text-align: start;
 }
 
 .ct-table thead th {
@@ -117,12 +117,12 @@ th[aria-sort='descending'] .ct-table__sort-indicator::after {
 }
 
 .ct-table__cell--numeric {
-  text-align: right;
+  text-align: end;
   font-variant-numeric: tabular-nums;
 }
 
 .ct-table__cell--actions {
-  text-align: right;
+  text-align: end;
   white-space: nowrap;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuravision/construct",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Construct Design System - Accessible, token-based design system for modern web applications",
   "license": "MIT",
   "repository": {