@neuravision/construct 1.1.0

package/components/index.css

@@ -0,0 +1,49 @@
+@import '../tokens/tokens.css';
+
+/* Shared design tokens and base control styles */
+@import './_shared.css';
+@import './_keyframes.css';
+
+/* Components */
+@import './button.css';
+@import './field.css';
+@import './textarea.css';
+@import './select.css';
+@import './select-menu.css';
+@import './input.css';
+@import './checkbox.css';
+@import './switch.css';
+@import './card.css';
+@import './table.css';
+@import './modal.css';
+@import './toast.css';
+@import './tooltip.css';
+@import './tabs.css';
+@import './dropdown.css';
+@import './pagination.css';
+@import './breadcrumbs.css';
+@import './data-table.css';
+@import './datepicker.css';
+@import './badge.css';
+@import './alert.css';
+@import './banner.css';
+@import './chip.css';
+@import './file-upload.css';
+@import './spinner.css';
+@import './skeleton.css';
+@import './icon.css';
+@import './progress-bar.css';
+@import './toolbar.css';
+@import './sidebar.css';
+@import './toggle-group.css';
+@import './accordion.css';
+@import './avatar.css';
+@import './empty-state.css';
+@import './divider.css';
+@import './slider.css';
+@import './popover.css';
+@import './combobox.css';
+@import './skip-link.css';
+@import './drawer.css';
+@import './navbar.css';
+@import './list.css';

package/components/input.css

@@ -0,0 +1,64 @@
+.ct-input--with-icon {
+  padding-left: calc(var(--space-8) + var(--space-4));
+}
+
+.ct-input-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.ct-input-wrap .ct-input {
+  width: 100%;
+}
+
+.ct-input__icon {
+  position: absolute;
+  inset-inline-start: var(--space-4);
+  width: var(--icon-md);
+  height: var(--icon-md);
+  color: var(--color-text-muted);
+  pointer-events: none;
+}
+
+.ct-input-group {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+
+.ct-input-group > .ct-input {
+  width: 100%;
+  min-width: 0;
+}
+
+.ct-input-group__addon {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--space-4);
+  background: var(--color-bg-surface);
+  border: var(--border-thin) solid var(--ct-control-border);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  white-space: nowrap;
+}
+
+.ct-input-group__addon:first-child {
+  border-inline-end: none;
+  border-radius: var(--ct-control-radius) 0 0 var(--ct-control-radius);
+}
+
+.ct-input-group__addon:last-child {
+  border-inline-start: none;
+  border-radius: 0 var(--ct-control-radius) var(--ct-control-radius) 0;
+}
+
+.ct-input-group > .ct-input:not(:first-child) {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+.ct-input-group > .ct-input:not(:last-child) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}

package/components/list.css

@@ -0,0 +1,474 @@
+/* ── List ─────────────────────────────────────────── */
+
+.ct-list {
+  --ct-list-padding: var(--space-2);
+  --ct-list-gap: 0;
+  --ct-list-radius: var(--radius-lg);
+  --ct-list-bg: transparent;
+  --ct-list-border: none;
+
+  --ct-list-item-padding-x: var(--space-4);
+  --ct-list-item-padding-y: var(--space-3);
+  --ct-list-item-gap: var(--space-5);
+  --ct-list-item-radius: var(--radius-md);
+  --ct-list-item-bg: transparent;
+  --ct-list-item-bg-hover: var(--color-bg-muted);
+  --ct-list-item-bg-active: var(--color-bg-subtle);
+  --ct-list-item-border: none;
+
+  --ct-list-item-title-size: var(--font-size-sm);
+  --ct-list-item-title-weight: var(--font-weight-medium);
+  --ct-list-item-title-color: var(--color-text-primary);
+  --ct-list-item-desc-size: var(--font-size-xs);
+  --ct-list-item-desc-color: var(--color-text-secondary);
+  --ct-list-item-meta-size: var(--font-size-xs);
+  --ct-list-item-meta-color: var(--color-text-muted);
+
+  --ct-list-divider-color: var(--color-border-subtle);
+  --ct-list-divider-inset: calc(var(--ct-list-item-padding-x) + var(--icon-md) + var(--ct-list-item-gap));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--ct-list-gap);
+  padding: var(--ct-list-padding);
+  margin: 0;
+  background: var(--ct-list-bg);
+  border: var(--ct-list-border);
+  border-radius: var(--ct-list-radius);
+  list-style: none;
+}
+
+/* ── Header ── */
+
+.ct-list__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--ct-list-item-padding-y) var(--ct-list-item-padding-x);
+}
+
+.ct-list__title {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-sm);
+  color: var(--color-text-primary);
+}
+
+.ct-list__header-action {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-brand-primary);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-list__header-action:hover {
+    color: var(--color-brand-primary-hover);
+  }
+}
+
+.ct-list__header-action:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* ── Item ── */
+
+.ct-list__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ct-list-item-gap);
+  padding: var(--ct-list-item-padding-y) var(--ct-list-item-padding-x);
+  background: var(--ct-list-item-bg);
+  border: var(--ct-list-item-border);
+  border-radius: var(--ct-list-item-radius);
+  min-height: 0;
+  text-decoration: none;
+  color: inherit;
+}
+
+/* ── Item Slots ── */
+
+.ct-list__item-leading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+}
+
+.ct-list__item-leading > svg {
+  width: var(--icon-md);
+  height: var(--icon-md);
+}
+
+.ct-list__item-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.ct-list__item-title {
+  font-size: var(--ct-list-item-title-size);
+  font-weight: var(--ct-list-item-title-weight);
+  line-height: var(--line-height-sm);
+  color: var(--ct-list-item-title-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ct-list__item-description {
+  font-size: var(--ct-list-item-desc-size);
+  line-height: var(--line-height-xs);
+  color: var(--ct-list-item-desc-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.ct-list__item-meta {
+  font-size: var(--ct-list-item-meta-size);
+  line-height: var(--line-height-xs);
+  color: var(--ct-list-item-meta-color);
+}
+
+.ct-list__item-trailing {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  color: var(--color-text-secondary);
+}
+
+.ct-list__item-trailing > svg {
+  width: var(--icon-md);
+  height: var(--icon-md);
+}
+
+/* ── Interactive Items ── */
+
+.ct-list__item--interactive {
+  cursor: pointer;
+  transition: background var(--duration-fast) var(--easing-standard),
+    color var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-list__item--interactive:hover {
+    background: var(--ct-list-item-bg-hover);
+  }
+}
+
+.ct-list__item--interactive:active {
+  background: var(--ct-list-item-bg-active);
+}
+
+.ct-list__item--interactive:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: -2px;
+  border-radius: var(--ct-list-item-radius);
+}
+
+/* ── Clickable Items (stretched link pattern) ── */
+
+.ct-list__item--clickable {
+  position: relative;
+  cursor: pointer;
+  transition: background var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-list__item--clickable:hover {
+    background: var(--ct-list-item-bg-hover);
+  }
+}
+
+.ct-list__item--clickable:active {
+  background: var(--ct-list-item-bg-active);
+}
+
+.ct-list__item--clickable .ct-list__item-title a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.ct-list__item--clickable .ct-list__item-title a::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--ct-list-item-radius);
+}
+
+.ct-list__item--clickable .ct-list__item-title a:focus-visible::after {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: -2px;
+}
+
+/* ── Active / Highlighted ── */
+
+.ct-list__item--active,
+.ct-list__item[data-state='active'] {
+  background: var(--ct-list-item-bg-active);
+}
+
+.ct-list__item--active .ct-list__item-title,
+.ct-list__item[data-state='active'] .ct-list__item-title {
+  color: var(--color-brand-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* ── Selected Items (Listbox) ── */
+
+.ct-list__item[aria-selected='true'] {
+  background: var(--ct-list-item-bg-active);
+}
+
+.ct-list__item[aria-selected='true'] .ct-list__item-title {
+  color: var(--color-brand-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* ── Disabled Items ── */
+
+.ct-list__item[aria-disabled='true'] {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ── Dividers ── */
+
+.ct-list__divider {
+  height: 1px;
+  background: var(--ct-list-divider-color);
+  border: none;
+  margin: 0 var(--ct-list-item-padding-x);
+  padding: 0;
+  list-style: none;
+}
+
+.ct-list__divider--inset {
+  margin-inline-start: var(--ct-list-divider-inset);
+}
+
+/* ── Empty State ── */
+
+.ct-list__empty {
+  padding: var(--space-8) var(--ct-list-item-padding-x);
+  text-align: center;
+  color: var(--color-text-muted);
+  font-size: var(--ct-list-item-desc-size);
+}
+
+/* ── Size: Small ── */
+
+.ct-list--sm {
+  --ct-list-item-padding-x: var(--space-3);
+  --ct-list-item-padding-y: var(--space-2);
+  --ct-list-item-gap: var(--space-3);
+  --ct-list-item-title-size: var(--font-size-xs);
+  --ct-list-item-desc-size: var(--font-size-2xs);
+  --ct-list-item-meta-size: var(--font-size-2xs);
+}
+
+.ct-list--sm .ct-list__item-leading > svg {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+}
+
+.ct-list--sm .ct-list__title {
+  font-size: var(--font-size-xs);
+}
+
+/* ── Size: Large ── */
+
+.ct-list--lg {
+  --ct-list-item-padding-x: var(--space-5);
+  --ct-list-item-padding-y: var(--space-4);
+  --ct-list-item-gap: var(--space-5);
+  --ct-list-item-title-size: var(--font-size-md);
+  --ct-list-item-desc-size: var(--font-size-sm);
+  --ct-list-item-meta-size: var(--font-size-xs);
+}
+
+.ct-list--lg .ct-list__item-leading > svg {
+  width: var(--icon-lg);
+  height: var(--icon-lg);
+}
+
+.ct-list--lg .ct-list__title {
+  font-size: var(--font-size-md);
+}
+
+/* ── Dense ── */
+
+.ct-list--dense {
+  --ct-list-item-padding-x: var(--space-3);
+  --ct-list-item-padding-y: var(--space-1);
+  --ct-list-item-gap: var(--space-3);
+  --ct-list-item-title-size: var(--font-size-xs);
+  --ct-list-item-desc-size: var(--font-size-2xs);
+}
+
+/* ── Bordered ── */
+
+.ct-list--bordered {
+  --ct-list-gap: var(--space-2);
+  --ct-list-item-border: var(--border-thin) solid var(--color-border-subtle);
+}
+
+/* ── Flush ── */
+
+.ct-list--flush {
+  --ct-list-padding: 0;
+  --ct-list-radius: 0;
+  --ct-list-border: none;
+  --ct-list-item-radius: 0;
+}
+
+/* ── Striped ── */
+
+.ct-list--striped .ct-list__item:nth-child(even of .ct-list__item) {
+  background: var(--color-bg-surface);
+}
+
+/* ── Navigation List ── */
+
+.ct-list--nav .ct-list__item {
+  cursor: pointer;
+  transition: background var(--duration-fast) var(--easing-standard),
+    color var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-list--nav .ct-list__item:hover {
+    background: var(--ct-list-item-bg-hover);
+  }
+}
+
+.ct-list--nav .ct-list__item:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: -2px;
+  border-radius: var(--ct-list-item-radius);
+}
+
+.ct-list--nav .ct-list__item[aria-current] {
+  background: var(--ct-list-item-bg-active);
+}
+
+.ct-list--nav .ct-list__item[aria-current] .ct-list__item-title {
+  color: var(--color-brand-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* ── Selectable (Listbox) – keyboard ── */
+
+.ct-list--selectable .ct-list__item {
+  cursor: pointer;
+  transition: background var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-list--selectable .ct-list__item:hover {
+    background: var(--ct-list-item-bg-hover);
+  }
+}
+
+.ct-list--selectable .ct-list__item:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: -2px;
+  border-radius: var(--ct-list-item-radius);
+}
+
+/* ── Grid Layout (P2) ── */
+
+.ct-list--grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--space-4);
+}
+
+.ct-list--grid .ct-list__item {
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: start;
+}
+
+/* ── Drag Handle (P2) ── */
+
+.ct-list__item-drag {
+  display: flex;
+  align-items: center;
+  cursor: grab;
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+  touch-action: none;
+}
+
+.ct-list__item-drag:active {
+  cursor: grabbing;
+}
+
+.ct-list__item-drag > svg {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+}
+
+/* ── Loading / Skeleton (P2) ── */
+
+.ct-list__item--skeleton .ct-list__item-leading,
+.ct-list__item--skeleton .ct-list__item-title,
+.ct-list__item--skeleton .ct-list__item-description,
+.ct-list__item--skeleton .ct-list__item-trailing {
+  background: var(--color-bg-muted);
+  border-radius: var(--radius-sm);
+  color: transparent;
+  animation: ct-skeleton var(--ct-skeleton-duration) ease-in-out infinite;
+  pointer-events: none;
+}
+
+.ct-list__item--skeleton .ct-list__item-leading {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+
+.ct-list__item--skeleton .ct-list__item-title {
+  width: 60%;
+  height: 1em;
+}
+
+.ct-list__item--skeleton .ct-list__item-description {
+  width: 80%;
+  height: 0.85em;
+}
+
+/* ── Reduced Motion ── */
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-list__item--interactive,
+  .ct-list__item--clickable,
+  .ct-list--nav .ct-list__item,
+  .ct-list--selectable .ct-list__item,
+  .ct-list__header-action {
+    transition: none;
+  }
+
+  .ct-list__item--skeleton .ct-list__item-leading,
+  .ct-list__item--skeleton .ct-list__item-title,
+  .ct-list__item--skeleton .ct-list__item-description,
+  .ct-list__item--skeleton .ct-list__item-trailing {
+    animation: none;
+  }
+}