@neuravision/construct 1.1.0

package/components/sidebar.css

@@ -0,0 +1,183 @@
+/* ── Sidebar ── */
+
+.ct-sidebar-layout {
+  display: flex;
+  min-height: 100%;
+  /* clip prevents horizontal scroll when push sidebar translates off-screen */
+  overflow: clip;
+}
+
+.ct-sidebar {
+  /* Component-level width token — override via --ct-sidebar-width on the element or a parent */
+  --ct-sidebar-width: 260px;
+
+  width: var(--ct-sidebar-width);
+  flex-shrink: 0;
+  background: var(--color-bg-elevated);
+  border-inline-end: var(--border-thin) solid var(--color-border-subtle);
+  overflow-y: auto;
+  transition: translate var(--duration-normal) var(--easing-standard),
+    width var(--duration-normal) var(--easing-standard),
+    margin var(--duration-normal) var(--easing-standard),
+    visibility var(--duration-normal) var(--easing-standard);
+}
+
+/* Side variant: collapses width when closed */
+.ct-sidebar--side:not([data-state='open']) {
+  width: 0;
+  border: none;
+  overflow: hidden;
+  /* hide from assistive tech when collapsed */
+  visibility: hidden;
+}
+
+/* Overlay variant: slides in from the inline-start edge */
+.ct-sidebar--over {
+  position: fixed;
+  inset-block: 0;
+  inset-inline-start: 0;
+  z-index: var(--z-overlay);
+  box-shadow: var(--shadow-lg);
+  /* LTR: slide in from the left */
+  translate: -100% 0;
+}
+
+/* RTL: overlay sidebar starts at inline-start (right edge) — slide in from the right */
+[dir='rtl'] .ct-sidebar--over {
+  translate: 100% 0;
+}
+
+.ct-sidebar--over[data-state='open'] {
+  translate: 0 0;
+}
+
+/* Push variant: slides off-screen and collapses flex space via negative margin */
+.ct-sidebar--push {
+  margin-inline-start: calc(-1 * var(--ct-sidebar-width));
+  visibility: hidden;
+}
+
+.ct-sidebar--push[data-state='open'] {
+  margin-inline-start: 0;
+  visibility: visible;
+}
+
+/* Respect reduced-motion preference — disable all sidebar transitions */
+@media (prefers-reduced-motion: reduce) {
+  .ct-sidebar,
+  .ct-sidebar--over,
+  .ct-sidebar__backdrop {
+    transition: none;
+  }
+}
+
+.ct-sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-5) var(--space-6);
+  border-bottom: var(--border-thin) solid var(--color-border-subtle);
+}
+
+.ct-sidebar__content {
+  padding: var(--space-4);
+}
+
+.ct-sidebar__backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--color-overlay-scrim);
+  z-index: calc(var(--z-overlay) - 1);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--duration-normal) var(--easing-standard),
+    visibility var(--duration-normal) var(--easing-standard);
+}
+
+/* Show backdrop when overlay sidebar is open.
+   Uses :has() so DOM order between sidebar and backdrop does not matter. */
+:has(> .ct-sidebar--over[data-state='open']) > .ct-sidebar__backdrop {
+  opacity: 1;
+  visibility: visible;
+}
+
+.ct-sidebar-content {
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+}
+
+/* ── Nav List ── */
+
+.ct-nav-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--space-1);
+}
+
+.ct-nav-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-5);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  transition: background var(--duration-fast) var(--easing-standard),
+    color var(--duration-fast) var(--easing-standard);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .ct-nav-item:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text-primary);
+  }
+}
+
+.ct-nav-item:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+.ct-nav-item--active,
+.ct-nav-item[aria-current='page'] {
+  background: var(--color-bg-muted);
+  color: var(--color-brand-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.ct-nav-item__icon {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ct-nav-item__label {
+  flex: 1;
+  min-width: 0;
+}
+
+.ct-nav-item__badge {
+  font-size: var(--font-size-xs);
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-pill);
+  background: var(--color-bg-muted);
+  color: var(--color-text-muted);
+  font-weight: var(--font-weight-semibold);
+  flex-shrink: 0;
+}
+
+.ct-nav-item--active .ct-nav-item__badge,
+.ct-nav-item[aria-current='page'] .ct-nav-item__badge {
+  background: var(--color-brand-primary);
+  color: var(--color-text-inverse);
+}

package/components/skeleton.css

@@ -0,0 +1,38 @@
+.ct-skeleton {
+  --ct-skeleton-bg: var(--color-bg-muted);
+  --ct-skeleton-highlight: var(--color-bg-surface);
+  --ct-skeleton-height: 1rem;
+  --ct-skeleton-width: 100%;
+
+  display: inline-block;
+  width: var(--ct-skeleton-width);
+  height: var(--ct-skeleton-height);
+  border-radius: var(--radius-sm);
+  background: linear-gradient(90deg, var(--ct-skeleton-bg), var(--ct-skeleton-highlight), var(--ct-skeleton-bg));
+  background-size: 200% 100%;
+  animation: ct-skeleton var(--ct-skeleton-duration) ease-in-out infinite;
+}
+
+.ct-skeleton--text {
+  --ct-skeleton-height: 1em;
+}
+
+.ct-skeleton--title {
+  --ct-skeleton-height: 1.4em;
+}
+
+.ct-skeleton--avatar {
+  --ct-skeleton-height: 48px;
+  --ct-skeleton-width: 48px;
+  border-radius: var(--radius-round);
+}
+
+.ct-skeleton--rect {
+  --ct-skeleton-height: 160px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-skeleton {
+    animation: none;
+  }
+}

package/components/skip-link.css

@@ -0,0 +1,38 @@
+/* ============================================================
+   Skip-Link
+   Keyboard-only navigation bypass. Hidden off-screen by default,
+   slides into view on focus. Must be the first focusable element
+   in the document.
+   ============================================================ */
+
+.ct-skip-link {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--z-tooltip);
+  padding: var(--space-4) var(--space-6);
+  background: var(--color-brand-primary);
+  color: var(--color-text-inverse);
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-sm);
+  text-decoration: none;
+  border-radius: 0 0 var(--radius-control) 0;
+  box-shadow: var(--shadow-md);
+  transform: translateY(-100%);
+  transition: transform var(--duration-normal) var(--easing-decelerate);
+}
+
+.ct-skip-link:focus,
+.ct-skip-link:focus-visible {
+  transform: translateY(0);
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: -2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-skip-link {
+    transition: none;
+  }
+}

package/components/slider.css

@@ -0,0 +1,305 @@
+/* ── Slider ── */
+
+.ct-slider {
+  --ct-slider-track-height: 4px;
+  --ct-slider-track-bg: var(--color-bg-muted);
+  --ct-slider-track-fill: var(--color-brand-primary);
+  --ct-slider-track-radius: var(--radius-pill);
+  --ct-slider-thumb-size: 20px;
+  --ct-slider-thumb-bg: var(--color-bg-elevated);
+  --ct-slider-thumb-border: var(--color-brand-primary);
+  --ct-slider-thumb-shadow: var(--shadow-xs);
+
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  width: 100%;
+}
+
+/* Input base */
+
+.ct-slider__input {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: var(--ct-slider-thumb-size);
+  background: transparent;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+}
+
+/* Track – WebKit */
+
+.ct-slider__input::-webkit-slider-runnable-track {
+  height: var(--ct-slider-track-height);
+  border-radius: var(--ct-slider-track-radius);
+  background: var(--ct-slider-track-bg);
+}
+
+/* Track – Firefox */
+
+.ct-slider__input::-moz-range-track {
+  height: var(--ct-slider-track-height);
+  border-radius: var(--ct-slider-track-radius);
+  background: var(--ct-slider-track-bg);
+  border: none;
+}
+
+/* Filled track – WebKit (requires --_value CSS var set via oninput) */
+
+.ct-slider:not(.ct-slider--range) .ct-slider__input::-webkit-slider-runnable-track {
+  background: linear-gradient(
+    to right,
+    var(--ct-slider-track-fill) calc(var(--_value, 50) * 1%),
+    var(--ct-slider-track-bg) calc(var(--_value, 50) * 1%)
+  );
+}
+
+/* Filled track – Firefox (native pseudo) */
+
+.ct-slider:not(.ct-slider--range) .ct-slider__input::-moz-range-progress {
+  height: var(--ct-slider-track-height);
+  border-radius: var(--ct-slider-track-radius);
+  background: var(--ct-slider-track-fill);
+}
+
+/* Thumb – WebKit */
+
+.ct-slider__input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: var(--ct-slider-thumb-size);
+  height: var(--ct-slider-thumb-size);
+  border-radius: var(--radius-round);
+  background: var(--ct-slider-thumb-bg);
+  border: var(--border-medium) solid var(--ct-slider-thumb-border);
+  box-shadow: var(--ct-slider-thumb-shadow);
+  margin-top: calc((var(--ct-slider-track-height) - var(--ct-slider-thumb-size)) / 2);
+  transition: transform var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard);
+}
+
+/* Thumb – Firefox */
+
+.ct-slider__input::-moz-range-thumb {
+  width: var(--ct-slider-thumb-size);
+  height: var(--ct-slider-thumb-size);
+  border-radius: var(--radius-round);
+  background: var(--ct-slider-thumb-bg);
+  border: var(--border-medium) solid var(--ct-slider-thumb-border);
+  box-shadow: var(--ct-slider-thumb-shadow);
+  transition: transform var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard);
+}
+
+/* Hover */
+
+@media (hover: hover) {
+  .ct-slider__input:hover::-webkit-slider-thumb {
+    transform: scale(1.15);
+    box-shadow: var(--shadow-sm);
+  }
+
+  .ct-slider__input:hover::-moz-range-thumb {
+    transform: scale(1.15);
+    box-shadow: var(--shadow-sm);
+  }
+}
+
+/* Focus */
+
+.ct-slider__input:focus-visible {
+  outline: none;
+}
+
+.ct-slider__input:focus-visible::-webkit-slider-thumb {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+.ct-slider__input:focus-visible::-moz-range-thumb {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* Active */
+
+.ct-slider__input:active::-webkit-slider-thumb {
+  transform: scale(0.95);
+}
+
+.ct-slider__input:active::-moz-range-thumb {
+  transform: scale(0.95);
+}
+
+/* Disabled */
+
+.ct-slider__input:disabled {
+  pointer-events: none;
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* Invalid */
+
+.ct-slider__input[aria-invalid='true']::-webkit-slider-thumb {
+  border-color: var(--color-state-danger);
+}
+
+.ct-slider__input[aria-invalid='true']::-moz-range-thumb {
+  border-color: var(--color-state-danger);
+}
+
+.ct-slider:not(.ct-slider--range) .ct-slider__input[aria-invalid='true']::-webkit-slider-runnable-track {
+  background: linear-gradient(
+    to right,
+    var(--color-state-danger) calc(var(--_value, 50) * 1%),
+    var(--ct-slider-track-bg) calc(var(--_value, 50) * 1%)
+  );
+}
+
+.ct-slider:not(.ct-slider--range) .ct-slider__input[aria-invalid='true']::-moz-range-progress {
+  background: var(--color-state-danger);
+}
+
+/* Sizes */
+
+.ct-slider--sm {
+  --ct-slider-track-height: 2px;
+  --ct-slider-thumb-size: 16px;
+}
+
+.ct-slider--lg {
+  --ct-slider-track-height: 6px;
+  --ct-slider-thumb-size: 24px;
+}
+
+/* Value display */
+
+.ct-slider__value {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  font-variant-numeric: tabular-nums;
+  min-width: 2ch;
+  text-align: end;
+}
+
+.ct-slider__min,
+.ct-slider__max {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Range variant (dual thumbs) */
+
+.ct-slider--range .ct-slider__track {
+  position: relative;
+  flex: 1;
+  height: var(--ct-slider-thumb-size);
+}
+
+.ct-slider--range .ct-slider__track::after {
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  height: var(--ct-slider-track-height);
+  background: var(--ct-slider-track-bg);
+  border-radius: var(--ct-slider-track-radius);
+  pointer-events: none;
+}
+
+.ct-slider--range .ct-slider__track::before {
+  content: '';
+  position: absolute;
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  height: var(--ct-slider-track-height);
+  inset-inline-start: calc(var(--_low, 0) * 1%);
+  inset-inline-end: calc(100% - var(--_high, 100) * 1%);
+  background: var(--ct-slider-track-fill);
+  border-radius: var(--ct-slider-track-radius);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.ct-slider--range .ct-slider__input {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.ct-slider--range .ct-slider__input::-webkit-slider-runnable-track {
+  background: transparent;
+}
+
+.ct-slider--range .ct-slider__input::-moz-range-track {
+  background: transparent;
+}
+
+.ct-slider--range .ct-slider__input::-moz-range-progress {
+  background: transparent;
+}
+
+.ct-slider--range .ct-slider__input::-webkit-slider-thumb {
+  pointer-events: auto;
+  position: relative;
+  z-index: 2;
+}
+
+.ct-slider--range .ct-slider__input::-moz-range-thumb {
+  pointer-events: auto;
+  position: relative;
+  z-index: 2;
+}
+
+/* Disabled – range variant (track fill inherits faded look) */
+
+.ct-slider:has(.ct-slider__input:disabled) {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+.ct-slider:has(.ct-slider__input:disabled) .ct-slider__input:disabled {
+  opacity: 1;
+}
+
+/* Touch-target minimums (WCAG 2.5.8: 44×44px minimum) */
+
+@media (pointer: coarse) {
+  .ct-slider {
+    --ct-slider-thumb-size: 44px;
+  }
+}
+
+/* Reduced motion */
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-slider__input::-webkit-slider-thumb {
+    transition: none;
+  }
+
+  .ct-slider__input::-moz-range-thumb {
+    transition: none;
+  }
+}
+
+/* Ticks variant */
+
+.ct-slider--ticks {
+  flex-wrap: wrap;
+}
+
+.ct-slider--ticks .ct-slider__ticks {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}

package/components/spinner.css

@@ -0,0 +1,72 @@
+.ct-spinner {
+  --ct-spinner-size: 24px;
+  --ct-spinner-border: 3px;
+  --ct-spinner-color: var(--color-brand-primary);
+  --ct-spinner-track: var(--color-border-subtle);
+
+  width: var(--ct-spinner-size);
+  height: var(--ct-spinner-size);
+  border-radius: 50%;
+  border: var(--ct-spinner-border) solid var(--ct-spinner-track);
+  border-top-color: var(--ct-spinner-color);
+  animation: ct-spin var(--ct-spinner-duration) linear infinite;
+}
+
+.ct-spinner--sm {
+  --ct-spinner-size: 16px;
+  --ct-spinner-border: 2px;
+}
+
+.ct-spinner--lg {
+  --ct-spinner-size: 40px;
+  --ct-spinner-border: 4px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-spinner {
+    animation: none;
+  }
+}
+
+.ct-loading-overlay {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: var(--color-overlay-scrim);
+  z-index: var(--z-overlay);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-fast) var(--easing-standard);
+}
+
+.ct-loading-overlay[data-state='active'] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.ct-loading-overlay--fixed {
+  position: fixed;
+}
+
+.ct-loading-overlay__content {
+  display: grid;
+  justify-items: center;
+  gap: var(--space-3);
+  padding: var(--space-6) var(--space-7);
+  border-radius: var(--radius-lg);
+  border: var(--border-thin) solid var(--color-border-subtle);
+  background: var(--color-bg-elevated);
+  box-shadow: var(--shadow-md);
+}
+
+.ct-loading-overlay__label {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-loading-overlay {
+    transition: none;
+  }
+}

package/components/switch.css

@@ -0,0 +1,82 @@
+.ct-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  color: var(--color-text-primary);
+}
+
+.ct-switch__input {
+  appearance: none;
+  width: var(--ct-switch-width);
+  height: var(--ct-switch-height);
+  border-radius: var(--radius-pill);
+  background: var(--color-border-strong);
+  border: var(--border-thin) solid transparent;
+  cursor: pointer;
+  position: relative;
+  transition: background var(--duration-fast) var(--easing-standard),
+    border-color var(--duration-fast) var(--easing-standard);
+}
+
+.ct-switch__input::after {
+  content: '';
+  position: absolute;
+  inset-block-start: 2px;
+  inset-inline-start: 2px;
+  width: calc(var(--ct-switch-height) - 4px);
+  height: calc(var(--ct-switch-height) - 4px);
+  border-radius: var(--radius-round);
+  background: var(--color-bg-elevated);
+  box-shadow: var(--shadow-xs);
+  transition: transform var(--duration-fast) var(--easing-standard);
+}
+
+.ct-switch__input:checked {
+  background: var(--color-brand-primary);
+}
+
+.ct-switch__input:checked::after {
+  transform: translateX(calc(var(--ct-switch-width) - var(--ct-switch-height)));
+}
+
+@media (hover: hover) {
+  .ct-switch__input:not(:disabled):hover {
+    background: color-mix(in srgb, var(--color-border-strong) 85%, black);
+  }
+
+  .ct-switch__input:checked:not(:disabled):hover {
+    background: var(--color-brand-primary-hover);
+  }
+}
+
+.ct-switch__input:disabled {
+  background: var(--color-border-subtle);
+  cursor: not-allowed;
+}
+
+.ct-switch__input:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* Invisible touch-target expansion (WCAG 2.5.8: 44×44px minimum) */
+@media (pointer: coarse) {
+  .ct-switch__input::before {
+    content: '';
+    position: absolute;
+    inset-block: calc((var(--ct-switch-height) - 44px) / 2);
+    inset-inline: 0;
+  }
+}
+
+.ct-switch--sm .ct-switch__input {
+  --ct-switch-width: 36px;
+  --ct-switch-height: 20px;
+}
+
+.ct-switch--lg .ct-switch__input {
+  --ct-switch-width: 52px;
+  --ct-switch-height: 28px;
+}