@neuravision/construct 1.1.0

package/components/_shared.css

@@ -0,0 +1,120 @@
+: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-transition: border-color var(--duration-fast) var(--easing-standard),
+    box-shadow var(--duration-fast) var(--easing-standard),
+    background var(--duration-fast) var(--easing-standard),
+    color var(--duration-fast) var(--easing-standard);
+  --ct-button-font-weight: var(--font-weight-semibold);
+  --ct-button-radius: var(--radius-control);
+  --ct-button-gap: var(--space-3);
+  --ct-spinner-duration: 800ms;
+  --ct-skeleton-duration: 1400ms;
+  --ct-progress-duration: 1500ms;
+  --ct-confirmation-icon-size: 44px;
+  --ct-dropdown-min-width: 200px;
+  --ct-switch-width: 44px;
+  --ct-switch-height: 24px;
+  --ct-tooltip-bg: var(--color-slate-950);
+  --ct-tooltip-color: var(--color-text-inverse);
+  --ct-tooltip-radius: var(--radius-sm);
+  --ct-tooltip-shadow: var(--shadow-sm);
+  --ct-tooltip-max-width: 280px;
+  --ct-popover-width: 320px;
+  --ct-popover-bg: var(--color-bg-elevated);
+  --ct-popover-border: var(--color-border-default);
+  --ct-popover-radius: var(--radius-lg);
+  --ct-popover-shadow: var(--shadow-lg);
+  --ct-date-day-size: var(--control-height-calendar-day);
+  --ct-avatar-radius: 50%;
+  --ct-avatar-bg: var(--color-bg-muted);
+  --ct-avatar-color: var(--color-text-secondary);
+  --ct-avatar-status-size: 10px;
+  --ct-avatar-group-overlap: -8px;
+}
+
+:where(.ct-input, .ct-select, .ct-textarea, .ct-control) {
+  width: 100%;
+  border: var(--border-thin) solid var(--ct-control-border);
+  border-radius: var(--ct-control-radius);
+  background: var(--ct-control-bg);
+  color: var(--ct-control-text);
+  font-size: var(--ct-control-font-size, var(--font-size-md));
+  line-height: var(--ct-control-line-height, var(--line-height-md));
+  transition: var(--ct-control-transition);
+}
+
+:where(.ct-input, .ct-select, .ct-control) {
+  height: var(--ct-control-height, var(--control-height-md));
+  padding: 0 var(--ct-control-padding-x, var(--space-5));
+}
+
+:where(.ct-input, .ct-select, .ct-textarea, .ct-control)::placeholder {
+  color: var(--ct-control-placeholder);
+}
+
+@media (hover: hover) {
+  :where(.ct-input, .ct-select, .ct-textarea, .ct-control):hover {
+    border-color: var(--ct-control-border-hover);
+  }
+}
+
+:where(.ct-input, .ct-select, .ct-textarea, .ct-control):focus-visible {
+  border-color: var(--ct-control-border-focus);
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+:where(.ct-input, .ct-select, .ct-textarea, .ct-control):disabled,
+:where(.ct-input, .ct-select, .ct-textarea, .ct-control)[aria-disabled='true'] {
+  background: var(--ct-control-bg-disabled);
+  border-color: var(--color-border-subtle);
+  color: var(--color-text-muted);
+}
+
+:where(.ct-input, .ct-select, .ct-textarea, .ct-control)[aria-invalid='true'],
+.ct-field--error :where(.ct-input, .ct-select, .ct-textarea, .ct-control) {
+  border-color: var(--color-state-danger);
+}
+
+:where(.ct-input, .ct-select, .ct-textarea, .ct-control)[aria-invalid='true']:focus-visible,
+.ct-field--error :where(.ct-input, .ct-select, .ct-textarea, .ct-control):focus-visible {
+  border-color: var(--color-state-danger);
+  outline-color: var(--color-state-danger);
+}
+
+/* ── Touch-target minimums (WCAG 2.5.8: 44×44px) ────────────────── */
+
+@media (pointer: coarse) {
+  :root {
+    --control-height-sm: 44px;
+    --control-height-calendar-day: 44px;
+  }
+}
+
+.ct-control--sm,
+.ct-input--sm,
+.ct-select--sm,
+.ct-textarea--sm {
+  --ct-control-height: var(--control-height-sm);
+  --ct-control-padding-x: var(--space-4);
+  --ct-control-font-size: var(--font-size-sm);
+  --ct-control-line-height: var(--line-height-sm);
+}
+
+.ct-control--lg,
+.ct-input--lg,
+.ct-select--lg,
+.ct-textarea--lg {
+  --ct-control-height: var(--control-height-lg);
+  --ct-control-padding-x: var(--space-6);
+  --ct-control-font-size: var(--font-size-lg);
+  --ct-control-line-height: var(--line-height-lg);
+}

package/components/accordion.css

@@ -0,0 +1,124 @@
+/* ── Accordion ────────────────────────────────────── */
+
+.ct-accordion {
+  --ct-accordion-border: var(--color-border-default);
+  display: flex;
+  flex-direction: column;
+}
+
+.ct-accordion__item {
+  border-bottom: var(--border-thin) solid var(--ct-accordion-border);
+}
+
+.ct-accordion__item:last-child {
+  border-bottom: none;
+}
+
+.ct-accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  width: 100%;
+  padding: var(--space-4) var(--space-2);
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-sm);
+  color: var(--color-text-primary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  list-style: none;
+  transition: background var(--duration-fast) var(--easing-standard),
+    color var(--duration-fast) var(--easing-standard);
+}
+
+.ct-accordion__trigger::-webkit-details-marker {
+  display: none;
+}
+
+.ct-accordion__trigger::marker {
+  content: none;
+}
+
+@media (hover: hover) {
+  .ct-accordion__trigger:hover {
+    background: var(--color-bg-surface);
+  }
+}
+
+.ct-accordion__trigger:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: -2px;
+  border-radius: var(--radius-sm);
+}
+
+.ct-accordion__heading {
+  margin: 0;
+  font: inherit;
+}
+
+.ct-accordion__icon {
+  flex-shrink: 0;
+  width: 1em;
+  height: 1em;
+  transition: transform var(--duration-fast) var(--easing-standard);
+}
+
+.ct-accordion__item[open] > .ct-accordion__trigger .ct-accordion__icon {
+  transform: rotate(180deg);
+}
+
+/* ── Content animation via ::details-content ── */
+
+.ct-accordion__item::details-content {
+  overflow: hidden;
+  block-size: 0;
+  transition: block-size var(--duration-fast) var(--easing-standard),
+    content-visibility var(--duration-fast) allow-discrete;
+}
+
+.ct-accordion__item[open]::details-content {
+  block-size: max-content;
+}
+
+.ct-accordion__content {
+  padding: 0 var(--space-2) var(--space-4);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-md);
+  color: var(--color-text-secondary);
+}
+
+/* ── Bordered variant ── */
+
+.ct-accordion--bordered .ct-accordion__item {
+  border: var(--border-thin) solid var(--ct-accordion-border);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--space-2);
+}
+
+.ct-accordion--bordered .ct-accordion__item:last-child {
+  margin-bottom: 0;
+  border-bottom: var(--border-thin) solid var(--ct-accordion-border);
+}
+
+.ct-accordion--bordered .ct-accordion__trigger {
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+}
+
+.ct-accordion--bordered .ct-accordion__item[open] > .ct-accordion__trigger {
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+}
+
+.ct-accordion--bordered .ct-accordion__content {
+  padding: 0 var(--space-4) var(--space-4);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-accordion__icon,
+  .ct-accordion__item::details-content {
+    transition: none;
+  }
+}

package/components/alert.css

@@ -0,0 +1,67 @@
+.ct-alert {
+  --ct-alert-bg: var(--color-bg-muted);
+  --ct-alert-border: var(--color-border-subtle);
+  --ct-alert-accent: var(--color-brand-primary);
+
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--space-4);
+  padding: var(--space-5) var(--space-6);
+  border-radius: var(--radius-md);
+  border: var(--border-thin) solid var(--ct-alert-border);
+  background: var(--ct-alert-bg);
+  color: var(--color-text-primary);
+}
+
+.ct-alert__icon {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ct-alert-accent);
+}
+
+.ct-alert__content {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.ct-alert__title {
+  font-weight: var(--font-weight-semibold);
+}
+
+.ct-alert__description {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.ct-alert__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.ct-alert[data-variant='info'] {
+  --ct-alert-bg: var(--color-state-info-surface);
+  --ct-alert-border: var(--color-state-info-border);
+  --ct-alert-accent: var(--color-state-info);
+}
+
+.ct-alert[data-variant='success'] {
+  --ct-alert-bg: var(--color-state-success-surface);
+  --ct-alert-border: var(--color-state-success-border);
+  --ct-alert-accent: var(--color-state-success);
+}
+
+.ct-alert[data-variant='warning'] {
+  --ct-alert-bg: var(--color-state-warning-surface);
+  --ct-alert-border: var(--color-state-warning-border);
+  --ct-alert-accent: var(--color-state-warning-text);
+}
+
+.ct-alert[data-variant='danger'] {
+  --ct-alert-bg: var(--color-state-danger-surface);
+  --ct-alert-border: var(--color-state-danger-border);
+  --ct-alert-accent: var(--color-state-danger);
+}

package/components/avatar.css

@@ -0,0 +1,127 @@
+/* ── Avatar ── */
+
+.ct-avatar {
+  --ct-avatar-size: 32px;
+  --ct-avatar-font-size: var(--font-size-sm);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ct-avatar-size);
+  height: var(--ct-avatar-size);
+  border-radius: var(--ct-avatar-radius);
+  background: var(--ct-avatar-bg);
+  color: var(--ct-avatar-color);
+  font-size: var(--ct-avatar-font-size);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+  flex-shrink: 0;
+  overflow: hidden;
+  user-select: none;
+}
+
+.ct-avatar--sm {
+  --ct-avatar-size: 24px;
+  --ct-avatar-font-size: var(--font-size-xs);
+}
+
+.ct-avatar--lg {
+  --ct-avatar-size: 48px;
+  --ct-avatar-font-size: var(--font-size-lg);
+}
+
+.ct-avatar--xl {
+  --ct-avatar-size: 64px;
+  --ct-avatar-font-size: var(--font-size-xl);
+}
+
+.ct-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.ct-avatar__initials {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+}
+
+.ct-avatar__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60%;
+  height: 60%;
+}
+
+.ct-avatar__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.ct-avatar__status {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  width: var(--ct-avatar-status-size);
+  height: var(--ct-avatar-status-size);
+  border-radius: 50%;
+  border: 2px solid var(--color-bg-canvas);
+  background: var(--color-text-muted);
+}
+
+.ct-avatar__status[data-status='online'] {
+  background: var(--color-state-success);
+}
+
+.ct-avatar__status[data-status='offline'] {
+  background: var(--color-text-muted);
+}
+
+.ct-avatar__status[data-status='busy'] {
+  background: var(--color-state-danger);
+}
+
+.ct-avatar__status[data-status='away'] {
+  background: var(--color-state-warning);
+}
+
+/* ── Avatar Group ── */
+
+.ct-avatar-group {
+  display: inline-flex;
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+.ct-avatar-group .ct-avatar {
+  border: 2px solid var(--color-bg-canvas);
+  margin-inline-start: var(--ct-avatar-group-overlap);
+}
+
+.ct-avatar-group .ct-avatar:last-child {
+  margin-inline-start: 0;
+}
+
+.ct-avatar-group__overflow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ct-avatar-size, 32px);
+  height: var(--ct-avatar-size, 32px);
+  border-radius: var(--ct-avatar-radius);
+  background: var(--color-bg-muted);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  border: 2px solid var(--color-bg-canvas);
+  margin-inline-start: var(--ct-avatar-group-overlap);
+  flex-shrink: 0;
+}

package/components/badge.css

@@ -0,0 +1,67 @@
+.ct-badge {
+  --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);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-pill);
+  border: var(--border-thin) solid var(--ct-badge-border);
+  background: var(--ct-badge-bg);
+  color: var(--ct-badge-color);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-xs);
+  white-space: nowrap;
+}
+
+.ct-badge--icon {
+  padding-inline-end: var(--space-4);
+}
+
+.ct-badge__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  height: 1em;
+  color: var(--ct-badge-accent);
+}
+
+.ct-badge__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-round);
+  background: var(--ct-badge-accent);
+}
+
+.ct-badge--info {
+  --ct-badge-bg: var(--color-state-info-surface);
+  --ct-badge-border: var(--color-state-info-border);
+  --ct-badge-color: var(--color-text-primary);
+  --ct-badge-accent: var(--color-state-info);
+}
+
+.ct-badge--success {
+  --ct-badge-bg: var(--color-state-success-surface);
+  --ct-badge-border: var(--color-state-success-border);
+  --ct-badge-color: var(--color-text-primary);
+  --ct-badge-accent: var(--color-state-success);
+}
+
+.ct-badge--warning {
+  --ct-badge-bg: var(--color-state-warning-surface);
+  --ct-badge-border: var(--color-state-warning-border);
+  --ct-badge-color: var(--color-text-primary);
+  --ct-badge-accent: var(--color-state-warning-text);
+}
+
+.ct-badge--danger {
+  --ct-badge-bg: var(--color-state-danger-surface);
+  --ct-badge-border: var(--color-state-danger-border);
+  --ct-badge-color: var(--color-text-primary);
+  --ct-badge-accent: var(--color-state-danger);
+}