@neuravision/construct 1.1.0

package/components/banner.css

@@ -0,0 +1,247 @@
+/* ----------------------------------------------------------------
+   Banner / Callout
+   Persistent page- or section-level notices.
+   ----------------------------------------------------------------
+   Variants  (data-variant) : info (default) | warning | danger | success | neutral
+   Appearance (class)       : subtle (default) | --solid | --left-accent | --top-accent
+   Position   (class)       : inline (default) | --fixed-top | --fixed-bottom | --sticky
+   Size       (class)       : default | --compact
+   Layout     (class)       : default | --full (no radius, no inline border)
+   State      (data-state)  : open (default) | closed
+   ---------------------------------------------------------------- */
+
+.ct-banner {
+  --ct-banner-bg: var(--color-state-info-surface);
+  --ct-banner-border: var(--color-state-info-border);
+  --ct-banner-accent: var(--color-state-info);
+
+  display: flex;
+  align-items: start;
+  gap: var(--space-3) var(--space-4);
+  padding: var(--space-5) var(--space-6);
+  border-radius: var(--radius-md);
+  border: var(--border-thin) solid var(--ct-banner-border);
+  background: var(--ct-banner-bg);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  transition: opacity var(--duration-normal) var(--easing-standard),
+    transform var(--duration-normal) var(--easing-standard);
+}
+
+/* ---- Sub-elements ---- */
+
+.ct-banner__icon {
+  flex-shrink: 0;
+  width: var(--icon-md);
+  height: var(--icon-md);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ct-banner-accent);
+}
+
+.ct-banner__content {
+  flex: 1 1 0%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.ct-banner__title {
+  font-weight: var(--font-weight-semibold);
+}
+
+.ct-banner__message {
+  color: var(--color-text-secondary);
+}
+
+.ct-banner__actions {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--space-3);
+  align-items: center;
+}
+
+.ct-banner__close {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--control-height-sm);
+  height: var(--control-height-sm);
+  border: none;
+  background: transparent;
+  color: var(--color-text-secondary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  padding: 0;
+  font-size: var(--font-size-lg);
+  line-height: 1;
+  transition: background var(--duration-fast) var(--easing-standard),
+    color var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-banner__close:hover {
+    background: color-mix(in srgb, currentColor 10%, transparent);
+    color: var(--color-text-primary);
+  }
+}
+
+.ct-banner__close:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* ---- Semantic Variants ---- */
+
+.ct-banner[data-variant='warning'] {
+  --ct-banner-bg: var(--color-state-warning-surface);
+  --ct-banner-border: var(--color-state-warning-border);
+  --ct-banner-accent: var(--color-state-warning-text);
+}
+
+.ct-banner[data-variant='danger'] {
+  --ct-banner-bg: var(--color-state-danger-surface);
+  --ct-banner-border: var(--color-state-danger-border);
+  --ct-banner-accent: var(--color-state-danger);
+}
+
+.ct-banner[data-variant='success'] {
+  --ct-banner-bg: var(--color-state-success-surface);
+  --ct-banner-border: var(--color-state-success-border);
+  --ct-banner-accent: var(--color-state-success);
+}
+
+.ct-banner[data-variant='neutral'] {
+  --ct-banner-bg: var(--color-bg-muted);
+  --ct-banner-border: var(--color-border-subtle);
+  --ct-banner-accent: var(--color-text-secondary);
+}
+
+/* ---- Appearance: Solid ---- */
+/* Compound selector raises specificity to (0,2,0) to beat variant overrides */
+
+.ct-banner.ct-banner--solid {
+  --ct-banner-bg: var(--ct-banner-accent);
+  --ct-banner-border: var(--ct-banner-accent);
+  color: var(--color-text-inverse);
+}
+
+.ct-banner--solid .ct-banner__icon,
+.ct-banner--solid .ct-banner__message,
+.ct-banner--solid .ct-banner__close {
+  color: var(--color-text-inverse);
+}
+
+@media (hover: hover) {
+  .ct-banner--solid .ct-banner__close:hover {
+    background: color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
+  }
+}
+
+/* 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);
+}
+
+/* ---- Appearance: Accents ---- */
+
+.ct-banner--left-accent {
+  border-inline-start: var(--border-thick) solid var(--ct-banner-accent);
+}
+
+.ct-banner--top-accent {
+  border-block-start: var(--border-thick) solid var(--ct-banner-accent);
+}
+
+/* ---- Positions ---- */
+
+.ct-banner--fixed-top {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline: 0;
+  z-index: var(--z-sticky);
+  border-radius: 0;
+}
+
+.ct-banner--fixed-bottom {
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline: 0;
+  z-index: var(--z-sticky);
+  border-radius: 0;
+}
+
+.ct-banner--sticky {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--z-sticky);
+  border-radius: 0;
+}
+
+/* ---- Compact ---- */
+
+.ct-banner--compact {
+  padding: var(--space-3) var(--space-5);
+  gap: var(--space-2) var(--space-3);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-xs);
+}
+
+.ct-banner--compact .ct-banner__icon {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+}
+
+.ct-banner--compact .ct-banner__close {
+  width: var(--icon-lg);
+  height: var(--icon-lg);
+  font-size: var(--font-size-sm);
+}
+
+/* ---- Full-Width ---- */
+
+.ct-banner--full {
+  border-radius: 0;
+  border-inline: none;
+}
+
+/* ---- State ---- */
+
+.ct-banner[data-state='closed'] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ct-banner--fixed-top[data-state='closed'],
+.ct-banner--sticky[data-state='closed'] {
+  transform: translateY(-100%);
+}
+
+.ct-banner--fixed-bottom[data-state='closed'] {
+  transform: translateY(100%);
+}
+
+/* ---- Responsive ---- */
+
+@media (max-width: 599px) { /* < sm breakpoint (600px) */
+  .ct-banner {
+    flex-wrap: wrap;
+  }
+
+  .ct-banner__actions {
+    flex-basis: 100%;
+  }
+}
+
+/* ---- Reduced Motion ---- */
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-banner,
+  .ct-banner__close {
+    transition: none;
+  }
+}

package/components/breadcrumbs.css

@@ -0,0 +1,152 @@
+/* --- Breadcrumbs --- */
+
+.ct-breadcrumbs {
+  --ct-breadcrumbs-font-size: var(--font-size-sm);
+  --ct-breadcrumbs-line-height: var(--line-height-sm);
+  --ct-breadcrumbs-gap: var(--space-2);
+  --ct-breadcrumbs-icon-size: 1em;
+  --ct-breadcrumbs-separator-color: var(--color-text-muted);
+  --ct-breadcrumbs-link-color: var(--color-text-secondary);
+  --ct-breadcrumbs-link-hover-color: var(--color-brand-primary);
+  --ct-breadcrumbs-current-color: var(--color-text-primary);
+
+  font-size: var(--ct-breadcrumbs-font-size);
+  line-height: var(--ct-breadcrumbs-line-height);
+  color: var(--color-text-muted);
+}
+
+/* Size variants */
+
+.ct-breadcrumbs--sm {
+  --ct-breadcrumbs-font-size: var(--font-size-xs);
+  --ct-breadcrumbs-line-height: var(--line-height-xs);
+  --ct-breadcrumbs-gap: var(--space-1);
+}
+
+.ct-breadcrumbs--lg {
+  --ct-breadcrumbs-font-size: var(--font-size-md);
+  --ct-breadcrumbs-line-height: var(--line-height-md);
+  --ct-breadcrumbs-gap: var(--space-3);
+}
+
+.ct-breadcrumbs__list {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ct-breadcrumbs-gap);
+  margin: 0;
+  padding: 0;
+}
+
+.ct-breadcrumbs__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ct-breadcrumbs-gap);
+  min-width: 0;
+}
+
+.ct-breadcrumbs__link {
+  color: var(--ct-breadcrumbs-link-color);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.15em;
+  transition: color var(--duration-fast) var(--easing-standard), text-decoration-thickness var(--duration-fast) var(--easing-standard);
+  border-radius: var(--radius-xs);
+}
+
+@media (hover: hover) {
+  .ct-breadcrumbs__link:hover {
+    color: var(--ct-breadcrumbs-link-hover-color);
+    text-decoration-thickness: 2px;
+  }
+}
+
+.ct-breadcrumbs__link:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+.ct-breadcrumbs__current {
+  color: var(--ct-breadcrumbs-current-color);
+  font-weight: var(--font-weight-medium);
+}
+
+.ct-breadcrumbs__separator {
+  color: var(--ct-breadcrumbs-separator-color);
+  user-select: none;
+  flex-shrink: 0;
+}
+
+/* Icon support */
+
+.ct-breadcrumbs__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: var(--ct-breadcrumbs-icon-size);
+  height: var(--ct-breadcrumbs-icon-size);
+}
+
+.ct-breadcrumbs__icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+/* Collapse trigger (ellipsis button for truncated middle items) */
+
+.ct-breadcrumbs__collapse {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-1) var(--space-2);
+  border: var(--border-thin) solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-elevated);
+  color: var(--ct-breadcrumbs-link-color);
+  font-size: inherit;
+  line-height: 1;
+  cursor: pointer;
+  transition: background var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-breadcrumbs__collapse:hover {
+    background: var(--color-bg-muted);
+    color: var(--ct-breadcrumbs-link-hover-color);
+  }
+}
+
+.ct-breadcrumbs__collapse:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* Responsive: on small viewports show only first + last items */
+
+@media (max-width: 599px) { /* < sm breakpoint (600px) */
+  .ct-breadcrumbs--responsive .ct-breadcrumbs__item {
+    display: none;
+  }
+
+  .ct-breadcrumbs--responsive .ct-breadcrumbs__item:first-child,
+  .ct-breadcrumbs--responsive .ct-breadcrumbs__item:last-child {
+    display: inline-flex;
+  }
+
+  .ct-breadcrumbs--responsive .ct-breadcrumbs__item:first-child::after {
+    content: "…";
+    color: var(--ct-breadcrumbs-separator-color);
+    margin-inline-start: var(--ct-breadcrumbs-gap);
+  }
+}
+
+/* Reduced motion */
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-breadcrumbs__link,
+  .ct-breadcrumbs__collapse {
+    transition: none;
+  }
+}

package/components/button.css

@@ -0,0 +1,145 @@
+.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-inverse);
+  --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);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ct-button-gap);
+  min-height: var(--ct-button-height);
+  padding: 0 var(--ct-button-padding-x);
+  border-radius: var(--ct-button-radius);
+  border: var(--border-thin) solid var(--ct-button-border);
+  background: var(--ct-button-bg);
+  color: var(--ct-button-color);
+  font-weight: var(--ct-button-font-weight);
+  font-size: var(--ct-button-font-size);
+  line-height: var(--ct-button-line-height);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: background var(--duration-fast) var(--easing-standard),
+    border-color var(--duration-fast) var(--easing-standard),
+    color var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard),
+    transform var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-button:hover {
+    background: var(--ct-button-bg-hover);
+  }
+}
+
+.ct-button:active {
+  background: var(--ct-button-bg-active);
+  transform: translateY(1px);
+}
+
+.ct-button:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+.ct-button:disabled,
+.ct-button[aria-disabled='true'] {
+  opacity: var(--opacity-disabled);
+  transform: none;
+  cursor: not-allowed;
+}
+
+.ct-button--secondary {
+  --ct-button-bg: var(--color-bg-surface);
+  --ct-button-bg-hover: var(--color-bg-muted);
+  --ct-button-bg-active: var(--color-border-subtle);
+  --ct-button-border: var(--color-border-default);
+  --ct-button-color: var(--color-text-primary);
+}
+
+.ct-button--outline {
+  --ct-button-bg: transparent;
+  --ct-button-bg-hover: var(--color-bg-muted);
+  --ct-button-bg-active: var(--color-bg-surface);
+  --ct-button-border: var(--color-brand-primary);
+  --ct-button-color: var(--color-brand-primary);
+}
+
+.ct-button--ghost {
+  --ct-button-bg: transparent;
+  --ct-button-bg-hover: var(--color-bg-muted);
+  --ct-button-bg-active: var(--color-bg-surface);
+  --ct-button-border: transparent;
+  --ct-button-color: var(--color-brand-primary);
+}
+
+.ct-button--accent {
+  --ct-button-bg: var(--color-brand-accent);
+  --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--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-border: transparent;
+  --ct-button-color: var(--color-text-inverse);
+}
+
+.ct-button--link {
+  --ct-button-bg: transparent;
+  --ct-button-bg-hover: transparent;
+  --ct-button-bg-active: transparent;
+  --ct-button-border: transparent;
+  --ct-button-color: var(--color-brand-primary);
+  min-height: auto;
+  padding: 0;
+  font-weight: var(--font-weight-medium);
+}
+
+@media (hover: hover) {
+  .ct-button--link:hover {
+    text-decoration: underline;
+  }
+}
+
+.ct-button--sm {
+  --ct-button-height: var(--control-height-sm);
+  --ct-button-padding-x: var(--space-5);
+  --ct-button-font-size: var(--font-size-xs);
+  --ct-button-line-height: var(--line-height-xs);
+}
+
+.ct-button--lg {
+  --ct-button-height: var(--control-height-lg);
+  --ct-button-padding-x: var(--space-7);
+  --ct-button-font-size: var(--font-size-md);
+  --ct-button-line-height: var(--line-height-md);
+}
+
+.ct-button--icon {
+  width: var(--ct-button-height);
+  padding: 0;
+}
+
+.ct-button__icon {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-button:active {
+    transform: none;
+  }
+}

package/components/card.css

@@ -0,0 +1,76 @@
+.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);
+  padding: var(--ct-card-padding);
+  box-shadow: var(--shadow-sm);
+}
+
+.ct-card--sm {
+  --ct-card-padding: var(--space-4);
+}
+
+.ct-card--lg {
+  --ct-card-padding: var(--space-8);
+}
+
+.ct-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  margin-bottom: var(--space-5);
+}
+
+.ct-card__body {
+  display: grid;
+  gap: var(--space-4);
+}
+
+.ct-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  margin-top: var(--space-6);
+  padding-top: var(--space-4);
+  border-top: var(--border-thin) solid var(--color-border-subtle);
+}
+
+:is(a, button, [role='button'], [role='link']).ct-card--interactive {
+  cursor: pointer;
+  transition: box-shadow var(--duration-fast) var(--easing-standard),
+    border-color var(--duration-fast) var(--easing-standard);
+}
+
+@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);
+  }
+}
+
+:is(a, button, [role='button'], [role='link']).ct-card--interactive:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+  border-color: var(--color-border-strong);
+  box-shadow: var(--shadow-md);
+}
+
+.ct-card--interactive[aria-selected='true'] {
+  border-color: var(--color-brand-primary);
+  box-shadow: var(--shadow-md);
+}
+
+.ct-card--interactive[aria-disabled='true'],
+.ct-card--interactive:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-card--interactive {
+    transition: none;
+  }
+}