@neuravision/construct 1.1.0

package/components/checkbox.css

@@ -0,0 +1,120 @@
+.ct-check,
+.ct-radio {
+  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-check__input,
+.ct-radio__input {
+  appearance: none;
+  width: var(--space-6);
+  height: var(--space-6);
+  border: var(--border-thin) solid var(--color-border-default);
+  background: var(--color-bg-elevated);
+  cursor: pointer;
+  display: grid;
+  place-content: center;
+  position: relative;
+  transition: background var(--duration-fast) var(--easing-standard),
+    border-color var(--duration-fast) var(--easing-standard),
+    transform var(--duration-fast) var(--easing-standard);
+}
+
+/* Invisible touch-target expansion (WCAG 2.5.8: 44×44px minimum) */
+@media (pointer: coarse) {
+  .ct-check__input::after,
+  .ct-radio__input::after {
+    content: '';
+    position: absolute;
+    inset: calc((var(--space-6) - 44px) / 2);
+  }
+}
+
+.ct-check__input {
+  border-radius: var(--radius-sm);
+}
+
+.ct-radio__input {
+  border-radius: 50%;
+}
+
+.ct-check__input::before {
+  content: '';
+  width: 10px;
+  height: 6px;
+  border: 2px solid var(--color-text-inverse);
+  border-block-start: 0;
+  border-inline-end: 0;
+  transform: rotate(-45deg) scale(0);
+  transition: transform var(--duration-fast) var(--easing-standard);
+}
+
+.ct-radio__input::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-round);
+  background: var(--color-text-inverse);
+  transform: scale(0);
+  transition: transform var(--duration-fast) var(--easing-standard);
+}
+
+.ct-check__input:checked,
+.ct-radio__input:checked {
+  background: var(--color-brand-primary);
+  border-color: var(--color-brand-primary);
+}
+
+.ct-check__input:checked::before,
+.ct-radio__input:checked::before {
+  transform: scale(1);
+}
+
+@media (hover: hover) {
+  .ct-check__input:not(:disabled):hover,
+  .ct-radio__input:not(:disabled):hover {
+    border-color: var(--ct-control-border-hover);
+  }
+
+  .ct-check__input:checked:not(:disabled):hover,
+  .ct-radio__input:checked:not(:disabled):hover {
+    background: var(--color-brand-primary-hover);
+    border-color: var(--color-brand-primary-hover);
+  }
+
+  .ct-check__input:indeterminate:not(:disabled):hover {
+    background: var(--color-brand-primary-hover);
+    border-color: var(--color-brand-primary-hover);
+  }
+}
+
+.ct-check__input:disabled,
+.ct-radio__input:disabled {
+  background: var(--color-bg-muted);
+  border-color: var(--color-border-subtle);
+  cursor: not-allowed;
+}
+
+.ct-check__input:focus-visible,
+.ct-radio__input:focus-visible {
+  border-color: var(--ct-control-border-focus);
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+.ct-check__input:indeterminate {
+  background: var(--color-brand-primary);
+  border-color: var(--color-brand-primary);
+}
+
+.ct-check__input:indeterminate::before {
+  width: 10px;
+  height: 0;
+  border-block-start: 2px solid var(--color-text-inverse);
+  border-inline-end: 0;
+  transform: scale(1);
+}

package/components/chip.css

@@ -0,0 +1,361 @@
+/* ── Chip ────────────────────────────────────────────────────── */
+
+.ct-chip {
+  --ct-chip-height: var(--control-height-md);
+  --ct-chip-padding-x: var(--space-3);
+  --ct-chip-font-size: var(--font-size-sm);
+  --ct-chip-line-height: var(--line-height-sm);
+  --ct-chip-gap: var(--space-2);
+  --ct-chip-remove-size: var(--icon-lg);
+  --ct-chip-bg: var(--color-bg-surface);
+  --ct-chip-border: var(--color-border-default);
+  --ct-chip-color: var(--color-text-secondary);
+  --ct-chip-accent: var(--ct-chip-color);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ct-chip-gap);
+  min-height: var(--ct-chip-height);
+  padding: 0 var(--ct-chip-padding-x);
+  border-radius: var(--radius-pill);
+  border: var(--border-thin) solid var(--ct-chip-border);
+  background: var(--ct-chip-bg);
+  color: var(--ct-chip-color);
+  font-size: var(--ct-chip-font-size);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--letter-spacing-wide);
+  line-height: var(--ct-chip-line-height);
+  white-space: nowrap;
+}
+
+/* ── Size variants ───────────────────────────────────────────── */
+
+.ct-chip--sm {
+  --ct-chip-height: var(--control-height-sm);
+  --ct-chip-padding-x: var(--space-2);
+  --ct-chip-font-size: var(--font-size-xs);
+  --ct-chip-line-height: var(--line-height-xs);
+  --ct-chip-remove-size: var(--icon-sm);
+}
+
+.ct-chip--lg {
+  --ct-chip-height: var(--control-height-lg);
+  --ct-chip-padding-x: var(--space-4);
+  --ct-chip-font-size: var(--font-size-md);
+  --ct-chip-line-height: var(--line-height-md);
+  --ct-chip-remove-size: var(--icon-xl);
+}
+
+/* ── Interactive state ───────────────────────────────────────── */
+
+.ct-chip--interactive {
+  cursor: pointer;
+  transition: background var(--duration-fast) var(--easing-standard),
+    border-color var(--duration-fast) var(--easing-standard),
+    color var(--duration-fast) var(--easing-standard),
+    transform var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-chip--interactive:hover {
+    background: color-mix(in srgb, var(--ct-chip-accent) 18%, var(--ct-chip-bg));
+    border-color: var(--ct-chip-accent, var(--color-border-strong));
+  }
+}
+
+.ct-chip--interactive:active {
+  transform: translateY(1px);
+}
+
+.ct-chip--interactive:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* ── Selected / pressed state ────────────────────────────────── */
+
+.ct-chip[aria-pressed='true'],
+.ct-chip--selected {
+  --ct-chip-bg: var(--color-brand-primary);
+  --ct-chip-border: var(--color-brand-primary);
+  --ct-chip-color: var(--color-text-inverse);
+  --ct-chip-accent: var(--color-text-inverse);
+}
+
+/* ── Outline variant ─────────────────────────────────────────── */
+
+.ct-chip--outline {
+  --ct-chip-bg: transparent;
+}
+
+.ct-chip--outline[aria-pressed='true'],
+.ct-chip--outline.ct-chip--selected {
+  --ct-chip-bg: var(--color-brand-primary);
+}
+
+/* ── Semantic color variants (Subtle — default) ────────────── */
+
+.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-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-accent: var(--color-state-success);
+}
+
+.ct-chip--warning {
+  --ct-chip-bg: var(--color-state-warning-surface);
+  --ct-chip-border: var(--color-state-warning-border);
+  --ct-chip-color: var(--color-state-warning-text);
+  --ct-chip-accent: var(--color-state-warning-text);
+}
+
+.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-accent: var(--color-state-danger);
+}
+
+/* ── Outline + Semantic: strong accent border ────────────────── */
+
+.ct-chip--outline.ct-chip--info {
+  --ct-chip-border: var(--color-state-info);
+}
+
+.ct-chip--outline.ct-chip--success {
+  --ct-chip-border: var(--color-state-success);
+}
+
+.ct-chip--outline.ct-chip--warning {
+  --ct-chip-border: var(--color-state-warning-text);
+}
+
+.ct-chip--outline.ct-chip--danger {
+  --ct-chip-border: var(--color-state-danger);
+}
+
+/* ── Solid variant ───────────────────────────────────────────── */
+
+.ct-chip--solid {
+  --ct-chip-bg: var(--color-bg-muted);
+  --ct-chip-border: var(--color-bg-muted);
+  --ct-chip-color: var(--color-text-primary);
+}
+
+@media (hover: hover) {
+  .ct-chip--solid:where(.ct-chip--interactive):hover {
+    filter: brightness(1.1);
+  }
+}
+
+.ct-chip--solid.ct-chip--info {
+  --ct-chip-bg: var(--color-state-info);
+  --ct-chip-border: var(--color-state-info);
+  --ct-chip-color: var(--color-text-inverse);
+  --ct-chip-accent: var(--color-text-inverse);
+}
+
+.ct-chip--solid.ct-chip--success {
+  --ct-chip-bg: var(--color-green-700);
+  --ct-chip-border: var(--color-green-700);
+  --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--solid.ct-chip--danger {
+  --ct-chip-bg: var(--color-state-danger);
+  --ct-chip-border: var(--color-state-danger);
+  --ct-chip-color: var(--color-text-inverse);
+  --ct-chip-accent: var(--color-text-inverse);
+}
+
+/* ── Disabled state ──────────────────────────────────────────── */
+
+.ct-chip[aria-disabled='true'] {
+  opacity: var(--opacity-disabled);
+  pointer-events: none;
+}
+
+/* ── Icon element ────────────────────────────────────────────── */
+
+.ct-chip__icon {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ct-chip-accent);
+}
+
+/* ── Built-in semantic icons via CSS mask-image ──────────────── */
+
+.ct-chip__icon--info,
+.ct-chip__icon--success,
+.ct-chip__icon--warning,
+.ct-chip__icon--danger {
+  background-color: var(--ct-chip-accent);
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  color: transparent;
+}
+
+/* info: circle-i */
+.ct-chip__icon--info {
+  --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M8 7v4M8 5.5V5' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+  -webkit-mask-image: var(--_icon);
+  mask-image: var(--_icon);
+}
+
+/* success: circle-check */
+.ct-chip__icon--success {
+  --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M5 8.5l2 2 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  -webkit-mask-image: var(--_icon);
+  mask-image: var(--_icon);
+}
+
+/* warning: triangle-! */
+.ct-chip__icon--warning {
+  --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l6.93 12H1.07z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M8 6.5v3M8 11.5v.5' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
+  -webkit-mask-image: var(--_icon);
+  mask-image: var(--_icon);
+}
+
+/* danger: circle-x */
+.ct-chip__icon--danger {
+  --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M5.5 5.5l5 5M10.5 5.5l-5 5' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+  -webkit-mask-image: var(--_icon);
+  mask-image: var(--_icon);
+}
+
+/* ── Dot status indicator ────────────────────────────────────── */
+
+.ct-chip__dot {
+  width: 8px;
+  height: 8px;
+  flex-shrink: 0;
+  border-radius: var(--radius-round);
+  background: var(--ct-chip-accent);
+}
+
+/* ── Avatar slot ─────────────────────────────────────────────── */
+
+.ct-chip__avatar {
+  width: calc(var(--ct-chip-height) - var(--space-3));
+  height: calc(var(--ct-chip-height) - var(--space-3));
+  flex-shrink: 0;
+  border-radius: var(--radius-round);
+  object-fit: cover;
+  margin-inline-start: calc(-1 * var(--space-2));
+}
+
+/* ── Label with truncation ───────────────────────────────────── */
+
+.ct-chip__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: var(--ct-chip-max-width, none);
+}
+
+/* ── Checkmark for selected state ────────────────────────────── */
+
+.ct-chip__check {
+  width: 0;
+  height: 1em;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: width var(--duration-fast) var(--easing-standard);
+}
+
+.ct-chip__check::before {
+  content: '';
+  display: block;
+  width: 0.35em;
+  height: 0.65em;
+  border: solid var(--ct-chip-accent);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg) translateY(-1px);
+  flex-shrink: 0;
+}
+
+.ct-chip[aria-pressed='true'] .ct-chip__check,
+.ct-chip--selected .ct-chip__check {
+  width: 1em;
+}
+
+/* ── Balanced padding when remove button is present ──────────── */
+
+.ct-chip:has(.ct-chip__remove) {
+  padding-inline-end: var(--space-2);
+}
+
+/* ── Remove button ───────────────────────────────────────────── */
+
+.ct-chip__remove {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: inherit;
+  width: var(--ct-chip-remove-size);
+  height: var(--ct-chip-remove-size);
+  border-radius: var(--radius-round);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background var(--duration-fast) var(--easing-standard);
+}
+
+@media (hover: hover) {
+  .ct-chip__remove:hover {
+    background: color-mix(in srgb, var(--ct-chip-accent) 15%, transparent);
+  }
+}
+
+.ct-chip__remove:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* ── Touch-target minimums (WCAG 2.5.8: 44×44px) ──────────── */
+
+@media (pointer: coarse) {
+  .ct-chip {
+    min-height: 44px;
+  }
+}
+
+/* ── Reduced motion ──────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-chip--interactive,
+  .ct-chip__remove,
+  .ct-chip__check {
+    transition: none;
+  }
+
+  .ct-chip--interactive:active {
+    transform: none;
+  }
+}