@eocrm/design-system 0.0.0-stage → 0.6.18

package/src/components/Select/Select.module.scss

@@ -0,0 +1,512 @@
+@use '../../styles/mixins' as *;
+@use './Select.tokens';
+
+.root {
+  display: block;
+  width: 100%;
+}
+
+// ─── Trigger wrapper ────────────────────────────────────────────────────────
+// `position: relative` is a Hard Rule 4 "internal child anchor" exception —
+// the absolutely-positioned ✕ + chevron sit ON the wrapper, not escape its
+// box. Block + width: 100% means Select fills its parent's column the same
+// way <Input> does — wrap in a sized container (Stack, fixed-width div, form
+// field cell) to control width.
+.triggerWrap {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+// ─── Trigger ────────────────────────────────────────────────────────────────
+// `:focus-visible` (Hard Rule 3a) rather than `:focus`: mouse-clicking the
+// trigger shouldn't leave the focus ring visible.
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: var(--select-trigger-height-md);
+  padding: 0 var(--select-trigger-padding-x);
+  font-family: var(--font-family-sans);
+  font-size: var(--select-trigger-font-size);
+  color: var(--select-trigger-fg);
+  background: var(--select-trigger-bg);
+  border: var(--border-width) solid var(--select-trigger-border-color);
+  border-radius: var(--select-trigger-radius);
+  cursor: pointer;
+
+  &:focus-visible {
+    border-color: var(--select-trigger-border-color-focus);
+
+    @include focus-ring(var(--select-trigger-ring-focus));
+  }
+
+  &:has(> .chipsInput:focus-visible) {
+    border-color: var(--select-trigger-border-color-focus);
+
+    @include focus-ring(var(--select-trigger-ring-focus));
+  }
+
+  &[disabled] {
+    color: var(--select-trigger-fg-disabled);
+    background: var(--select-trigger-bg-disabled);
+    cursor: not-allowed;
+  }
+}
+
+.triggerButton {
+  // Reserve `--space-8` on the right for the chevron (and the ✕ when
+  // clearable). The chevron sits at `right: var(--space-3)`, the ✕ sits
+  // at `right: var(--space-6)` — both inside the `.triggerWrap`'s padding.
+  padding-right: var(--select-trigger-padding-right-reserved);
+  text-align: left;
+
+  // Multi-summary text can grow longer than the trigger width — clip with
+  // an ellipsis rather than wrapping. The chips-mode trigger (Phase 6)
+  // will wrap and override this on its own variant.
+  // The `.placeholder` span is excluded because it carries the placeholder
+  // text only, never a comma-joined selection list.
+  & > :not(.placeholder) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+// Combobox-input trigger (Phase 4 — single + searchable). Inherits the
+// `.trigger` box styling, focus ring, and disabled colors; this modifier
+// only flips the cursor (text caret over the input vs pointer over the
+// button) and styles the native HTML placeholder pseudo-element.
+.triggerInput {
+  // Same right-side reservation as `.triggerButton` — chevron + ✕ overlay
+  // need clear space inside the `.triggerWrap`.
+  padding-right: var(--select-trigger-padding-right-reserved);
+  cursor: text;
+
+  &::placeholder {
+    color: var(--select-placeholder-fg);
+  }
+}
+
+.placeholder {
+  color: var(--select-placeholder-fg);
+}
+
+// ─── Chevron + clear-✕ inside the trigger wrap ─────────────────────────────
+// Both are absolutely positioned siblings of the `.trigger` element. The
+// position rule lives on a CHILD of the component — Rule 4's "internal
+// child anchor" exception applies (the `.triggerWrap` is `position:relative`).
+.chevron {
+  position: absolute;
+  top: 50%;
+  right: var(--select-chevron-right);
+  color: var(--select-chevron-fg);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.clearButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--select-clear-fg);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--select-clear-radius);
+
+  &:hover,
+  &:focus-visible {
+    color: var(--select-clear-fg-hover);
+    background: var(--select-clear-bg-hover);
+  }
+}
+
+// Overlay variant — used by the single-mode triggers (ButtonTrigger,
+// ComboboxInputTrigger). Pinned right of the trigger box, sitting just
+// inside the chevron.
+.clearButton:not(.clearButtonInline) {
+  position: absolute;
+  top: 50%;
+  right: var(--select-clear-right);
+  width: var(--select-clear-size);
+  height: var(--select-clear-size);
+  transform: translateY(-50%);
+}
+
+// Inline variant — used by the chips triggers where the ✕ sits as a flex
+// child alongside chips + (optionally) an input. No `position`; layout is
+// handled by the parent's flex.
+.clearButtonInline {
+  width: var(--select-clear-size);
+  height: var(--select-clear-size);
+}
+
+// ─── Listbox panel ──────────────────────────────────────────────────────────
+// Open animation uses CSS `@keyframes` for the scale-fade. Floating UI is
+// configured with `transform: false` in Listbox.tsx so positioning is
+// emitted as inline `top` / `left` — that leaves the `transform` property
+// free for the keyframe's `transform: scale(...)` without fighting an
+// inline translate. Matches DropdownMenu and Popover Content.
+// `transform-origin: top` is a static approximation (panel scales from the
+// top edge). A future polish task can wire dynamic origin off Floating UI's
+// resolved placement so the panel grows toward the trigger on flip.
+// Sizing: never narrower than the trigger (or the widest it has been while
+// open), grows to the widest option up to `--select-listbox-max-width`, and
+// never past the viewport. The `--select-listbox-{min,available}-*` geometry
+// vars are written by Listbox.tsx's size middleware; the fallbacks cover
+// the first frame before it runs.
+.listbox {
+  z-index: var(--z-popover);
+
+  // offsetWidth (border-box) feeds min-width back in; pin the box model so
+  // a consumer without the reset can't make the ratchet creep.
+  box-sizing: border-box;
+  min-width: min(
+    var(--select-listbox-min-width, 0px),
+    var(--select-listbox-available-width, 100vw)
+  );
+  max-width: min(var(--select-listbox-max-width), var(--select-listbox-available-width, 100vw));
+  max-height: min(var(--select-listbox-max-height), var(--select-listbox-available-height, 100vh));
+  overflow-y: auto;
+
+  // Don't chain wheel/touch scrolling past the panel's edge to the page —
+  // the listbox stays open while the page shifts underneath otherwise.
+  // Matches DropdownMenu `.content`.
+  overscroll-behavior: contain;
+  padding: var(--select-listbox-padding);
+  background: var(--select-listbox-bg);
+  border: var(--border-width) solid var(--select-listbox-border-color);
+  border-radius: var(--select-listbox-radius);
+  box-shadow: var(--select-listbox-shadow);
+  list-style: none;
+  animation: select-open 140ms ease-out;
+  transform-origin: top;
+}
+
+.listbox[data-in-overlay] {
+  z-index: var(--z-overlay-floating);
+}
+
+// #685: the tour's current target is INSIDE this surface — drop just under the
+// scrim (--z-tour) so only the target is lit, not the whole panel.
+.listbox[data-in-overlay]:has([data-tour-current-target]) {
+  z-index: calc(var(--z-tour) - 1);
+}
+
+.listboxBody {
+  padding: 0;
+  list-style: none;
+}
+
+@keyframes select-open {
+  from {
+    opacity: var(--select-listbox-anim-opacity-from);
+    transform: scale(0.96);
+  }
+
+  to {
+    opacity: var(--select-listbox-anim-opacity-to);
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .listbox {
+    animation: none;
+  }
+}
+
+.groupHeader {
+  padding: var(--select-group-header-padding-y) var(--select-group-header-padding-x);
+  font-size: var(--select-group-header-font-size);
+  color: var(--select-group-header-fg);
+  text-transform: uppercase;
+  letter-spacing: var(--select-group-header-letter-spacing);
+  user-select: none;
+}
+
+// Reset on the nested <ul role="none"> inside each group wrapper. Padding
+// + list-style only — `margin: 0` is forbidden by Hard Rule 4 (layout is
+// the parent's job). The global UA reset zeroes ul margins, so omitting
+// it here is fine.
+.groupList {
+  padding: 0;
+  list-style: none;
+}
+
+.option {
+  padding: var(--select-option-padding-y) var(--select-option-padding-x);
+  font-size: var(--select-option-font-size);
+  color: var(--select-option-fg);
+  cursor: pointer;
+  border-radius: var(--select-option-radius);
+}
+
+.optionActive {
+  background: var(--select-option-bg-active);
+}
+
+.optionSelected {
+  background: var(--select-option-bg-selected);
+  box-shadow: inset var(--select-option-marker-width-selected) 0 0
+    var(--select-option-marker-color-selected);
+}
+
+.optionDisabled {
+  color: var(--select-option-fg-disabled);
+  cursor: not-allowed;
+}
+
+// Default-render secondary line (`SelectOption.description`). Disabled rows
+// keep their disabled colour for both lines.
+.optionDescription {
+  display: block;
+  font-size: var(--select-option-description-font-size);
+  color: var(--select-option-description-fg);
+
+  .optionDisabled & {
+    color: inherit;
+  }
+}
+
+// Creatable "+ Create <query>" row. Italic + accent colour to visually
+// separate it from real options without inventing a new pattern.
+.optionCreate {
+  font-style: italic;
+  color: var(--select-option-fg-create);
+}
+
+// ─── In-panel search input (multi-summary-searchable variant) ──────────────
+// Sits at the top of the listbox panel, above the option rows. Hard Rule 4
+// allows `width: 100%` (intrinsic 100%) — it's the natural fit for "fill
+// the parent panel". No margin / position / flex-grow here.
+.popoverSearch {
+  display: block;
+  width: 100%;
+  padding: var(--select-popover-search-padding-y) var(--select-popover-search-padding-x);
+  font-family: var(--font-family-sans);
+  font-size: var(--select-popover-search-font-size);
+  color: var(--select-popover-search-fg);
+  background: var(--select-popover-search-bg);
+  border: 0;
+  border-bottom: var(--border-width) solid var(--select-popover-search-border-color);
+  outline: none;
+
+  &::placeholder {
+    color: var(--select-popover-search-placeholder-fg);
+  }
+
+  &:focus-visible {
+    border-bottom-color: var(--select-popover-search-border-color-focus);
+  }
+}
+
+// ─── Chips-mode trigger (Phase 6) ───────────────────────────────────────────
+// Wraps content (chips + optional input) onto multiple lines. Drops the
+// `.triggerButton` ellipsis rule (`white-space: nowrap`) so the chip list
+// can stack. Vertical padding shrinks from the default 0 to `--space-1`
+// so wrapped chip rows have breathing room.
+.triggerChips {
+  flex-wrap: wrap;
+  gap: var(--select-chips-gap);
+  align-items: center;
+  justify-content: flex-start;
+  padding: var(--select-chips-padding-y) var(--select-chips-padding-x);
+  white-space: normal;
+}
+
+// Chip — single removable token rendered inside the chips trigger.
+// 4px vertical / 8px horizontal padding (the smallest available token
+// pair); a literal 2px-vertical would be tighter, but Rule 3 forbids
+// raw values so we accept the slightly taller chip.
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--select-chip-gap);
+  padding: var(--select-chip-padding-y) var(--select-chip-padding-x);
+  font-size: var(--select-chip-font-size);
+  color: var(--select-chip-fg);
+  background: var(--select-chip-bg);
+  border-radius: var(--select-chip-radius);
+  user-select: none;
+}
+
+.chipLabel {
+  line-height: 1.4;
+}
+
+.chipRemove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--select-chip-remove-radius);
+
+  &:hover,
+  &:focus-visible {
+    color: var(--select-chip-remove-fg-hover);
+    background: var(--select-chip-remove-bg-hover);
+  }
+}
+
+.chipDisabled {
+  color: var(--select-chip-fg-disabled);
+  cursor: not-allowed;
+}
+
+// Chips-mode + inline input variant. `.triggerChipsInput` is composed on
+// the wrapper alongside `.triggerChips`; this rule only adds a text caret
+// (the wrapper is the click target that focuses the embedded input).
+.triggerChipsInput {
+  cursor: text;
+}
+
+// Inline search input rendered alongside chips. `flex: 0 1 4ch` is a flex
+// shorthand on a CHILD of the trigger — Rule 4 governs positioning the
+// COMPONENT in its parent, not internal flex children, so this is allowed
+// (same as Stack/Cluster's internal flex). The `4ch` basis gives the
+// input enough width to start typing without being so wide that it
+// pushes chips onto an unnecessary second line.
+.chipsInput {
+  // grow into whatever row space is left after chips (so an empty trigger
+  // shows the full placeholder); shrink to `min-width: 4ch` when chips
+  // crowd the last line, then wrap onto a new line below.
+  flex: 1 1 4ch;
+  min-width: 4ch;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  outline: none;
+
+  &::placeholder {
+    color: var(--select-placeholder-fg);
+  }
+}
+
+// ─── State rows (loading / error / empty) ─────────────────────────────────
+// Rendered as `<li>`s inside the listbox `<ul>` instead of an option row
+// when there's no actual data to show (loading spinner, "no results",
+// failure + Retry). Centred so they read as a single status indicator
+// rather than aligning with the option text on the left.
+.stateRow {
+  display: flex;
+  gap: var(--select-state-row-gap);
+  align-items: center;
+  justify-content: center;
+  padding: var(--select-state-row-padding);
+  font-size: var(--select-state-row-font-size);
+  color: var(--select-state-row-fg);
+}
+
+// Indeterminate circular spinner. The 2-state border (most of it muted,
+// one side accent) plus rotation creates the spin. Decorative — the
+// adjacent "Loading…" label carries the meaning for screen readers.
+.spinner {
+  display: inline-block;
+  width: var(--select-spinner-size);
+  height: var(--select-spinner-size);
+  border: var(--border-width) solid var(--select-spinner-border-color);
+  border-top-color: var(--select-spinner-border-color-top);
+  border-radius: var(--select-spinner-radius);
+  animation: select-spin 0.8s linear infinite;
+}
+
+@keyframes select-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Retry button inside the error state row. Subtle so it doesn't compete
+// with the message; `:focus-visible` per Hard Rule 3a (not `:focus`).
+.retryButton {
+  padding: var(--select-retry-padding-y) var(--select-retry-padding-x);
+  font-size: var(--select-retry-font-size);
+  color: var(--select-retry-fg);
+  cursor: pointer;
+  background: transparent;
+  border: var(--border-width) solid var(--select-retry-border-color);
+  border-radius: var(--select-retry-radius);
+
+  &:hover,
+  &:focus-visible {
+    background: var(--select-retry-bg-hover);
+  }
+}
+
+// ─── Visual state hooks (size / invalid / disabled / readOnly) ──────────────
+// These selectors compose with `.trigger` (and its variants —
+// `.triggerButton` / `.triggerInput` / `.triggerChips` / `.triggerChipsInput`).
+// `:not(.triggerChips)` keeps the vertical padding of chips triggers intact
+// (chips wrap onto multiple lines and need the existing `--space-1` Y-padding
+// instead of a flat `0`); height-bearing `min-height` still applies.
+// Per-size padding: explicitly set padding-block (top/bottom) and
+// padding-left only. The `padding` shorthand would clobber the
+// padding-right reservation set by `.triggerButton` / `.triggerInput`,
+// which is what reserves space for the absolute-positioned chevron + ✕
+// overlays. Setting padding-left alone preserves that reservation.
+.size-sm .trigger {
+  min-height: var(--select-trigger-height-sm);
+  font-size: var(--select-trigger-font-size-sm);
+
+  &:not(.triggerChips) {
+    padding-block: 0;
+    padding-left: var(--select-trigger-padding-x-sm);
+  }
+}
+
+.size-md .trigger {
+  min-height: var(--select-trigger-height-md);
+  font-size: var(--select-trigger-font-size-md);
+
+  &:not(.triggerChips) {
+    padding-block: 0;
+    padding-left: var(--select-trigger-padding-x-md);
+  }
+}
+
+.size-lg .trigger {
+  min-height: var(--select-trigger-height-lg);
+  font-size: var(--select-trigger-font-size-lg);
+
+  &:not(.triggerChips) {
+    padding-block: 0;
+    padding-left: var(--select-trigger-padding-x-lg);
+  }
+}
+
+.invalid .trigger {
+  border-color: var(--select-trigger-border-color-invalid);
+
+  &:focus-visible {
+    @include focus-ring(var(--select-trigger-ring-invalid));
+  }
+}
+
+// `disabled` is fully inert: dim text + not-allowed cursor signals "this
+// control is off." `readOnly` keeps the normal text color so the value
+// reads cleanly — only the subtle bg + default cursor signal "you can see
+// this but not edit." Matches the convention used by native form controls.
+.disabled .trigger {
+  color: var(--select-trigger-fg-disabled-class);
+  cursor: not-allowed;
+  background: var(--select-trigger-bg-disabled-class);
+}
+
+.readOnly .trigger {
+  cursor: default;
+  background: var(--select-trigger-bg-read-only);
+}
+
+.srOnly {
+  @include visually-hidden;
+}

package/src/components/Select/Select.tokens.scss

@@ -0,0 +1,140 @@
+// Select.tokens.scss — component-scoped tokens for <Select> (trigger + listbox + chips + state rows). Defaults preserve byte-identical visuals.
+@use '../Badge/Badge.tokens';
+
+:root {
+  // Trigger
+  --select-trigger-padding-x: var(--space-3);
+  --select-trigger-fg: var(--color-fg);
+  --select-trigger-bg: var(--color-bg);
+  --select-trigger-border-color: var(--color-border-strong);
+  --select-trigger-radius: var(--radius-md);
+  --select-trigger-font-size: var(--font-size-md);
+
+  // Trigger — focus
+  --select-trigger-border-color-focus: var(--color-accent);
+  --select-trigger-ring-focus: var(--ring-accent);
+
+  // Trigger — disabled (native [disabled] attribute on button)
+  --select-trigger-fg-disabled: var(--color-fg-disabled);
+  --select-trigger-bg-disabled: var(--color-bg-subtle);
+
+  // Trigger — invalid
+  --select-trigger-border-color-invalid: var(--color-danger);
+  --select-trigger-ring-invalid: var(--ring-danger);
+
+  // Trigger — disabled (class-modifier path)
+  --select-trigger-fg-disabled-class: var(--color-fg-disabled);
+  --select-trigger-bg-disabled-class: var(--color-bg-subtle);
+
+  // Trigger — readOnly
+  --select-trigger-bg-read-only: var(--color-bg-subtle);
+
+  // Trigger — chevron / clear icons
+  --select-chevron-fg: var(--color-fg-muted);
+  --select-chevron-right: var(--space-3);
+  --select-clear-fg: var(--color-fg-muted);
+  --select-clear-fg-hover: var(--color-fg);
+  --select-clear-bg-hover: var(--color-bg-muted);
+  --select-clear-radius: var(--radius-sm);
+  --select-clear-right: var(--space-6);
+  --select-clear-size: var(--space-4);
+
+  // Right-side reservation for chevron + clear inside the trigger
+  --select-trigger-padding-right-reserved: var(--space-8);
+
+  // Trigger sizes
+  --select-trigger-height-sm: var(--size-sm);
+  --select-trigger-height-md: var(--size-md);
+  --select-trigger-height-lg: var(--size-lg);
+  --select-trigger-padding-x-sm: var(--space-2);
+  --select-trigger-padding-x-md: var(--space-3);
+  --select-trigger-padding-x-lg: var(--space-3);
+  --select-trigger-font-size-sm: var(--font-size-sm);
+  --select-trigger-font-size-md: var(--font-size-md);
+  --select-trigger-font-size-lg: var(--font-size-lg);
+
+  // Placeholder text
+  --select-placeholder-fg: var(--color-fg-muted);
+
+  // Listbox panel
+  --select-listbox-bg: var(--color-bg);
+  --select-listbox-border-color: var(--color-border);
+  --select-listbox-radius: var(--radius-md);
+  --select-listbox-shadow: var(--shadow-md);
+  --select-listbox-padding: var(--space-1);
+  --select-listbox-max-width: 20rem;
+  --select-listbox-max-height: 320px;
+
+  // Listbox — group header
+  --select-group-header-padding-y: var(--space-2);
+  --select-group-header-padding-x: var(--space-3);
+  --select-group-header-font-size: var(--font-size-xs);
+  --select-group-header-fg: var(--color-fg-muted);
+  --select-group-header-letter-spacing: var(--letter-spacing-caps);
+
+  // Options
+  --select-option-padding-y: var(--space-2);
+  --select-option-padding-x: var(--space-3);
+  --select-option-font-size: var(--font-size-md);
+  --select-option-fg: var(--color-fg);
+  --select-option-radius: var(--radius-sm);
+  --select-option-bg-active: var(--color-bg-muted);
+  --select-option-bg-selected: var(--color-accent-subtle-bg);
+  --select-option-marker-color-selected: var(--color-accent);
+  --select-option-marker-width-selected: var(--border-width-emphasis);
+  --select-option-fg-disabled: var(--color-fg-disabled);
+  --select-option-description-fg: var(--color-fg-muted);
+  --select-option-description-font-size: var(--font-size-sm);
+  --select-option-fg-create: var(--color-accent);
+
+  // Popover search input
+  --select-popover-search-padding-y: var(--space-2);
+  --select-popover-search-padding-x: var(--space-3);
+  --select-popover-search-font-size: var(--font-size-md);
+  --select-popover-search-fg: var(--color-fg);
+  --select-popover-search-bg: var(--color-bg);
+  --select-popover-search-border-color: var(--color-border);
+  --select-popover-search-placeholder-fg: var(--color-fg-muted);
+  --select-popover-search-border-color-focus: var(--color-accent);
+
+  // Chips trigger + chip
+  --select-chips-padding-y: var(--space-1);
+  --select-chips-padding-x: var(--space-2);
+  --select-chips-gap: var(--space-1);
+  --select-chip-gap: var(--space-1);
+  --select-chip-padding-y: var(--space-1);
+  --select-chip-padding-x: var(--space-2);
+  --select-chip-font-size: var(--font-size-sm);
+  --select-chip-fg: var(--badge-fg-neutral);
+  --select-chip-bg: var(--badge-bg-neutral);
+  --select-chip-radius: var(--radius-sm);
+  --select-chip-remove-radius: var(--radius-sm);
+  --select-chip-remove-fg-hover: var(--color-danger);
+  --select-chip-remove-bg-hover: var(--color-bg-danger-subtle);
+  --select-chip-fg-disabled: var(--color-fg-disabled);
+
+  // State rows (loading / error / empty)
+  --select-state-row-gap: var(--space-2);
+  --select-state-row-padding: var(--space-3);
+  --select-state-row-font-size: var(--font-size-sm);
+  --select-state-row-fg: var(--color-fg-muted);
+
+  // Spinner
+  --select-spinner-size: var(--size-spinner);
+  --select-spinner-border-color: var(--color-border-strong);
+  --select-spinner-border-color-top: var(--color-accent);
+  --select-spinner-radius: var(--radius-full);
+
+  // Retry button
+  --select-retry-padding-y: var(--space-1);
+  --select-retry-padding-x: var(--space-2);
+  --select-retry-font-size: var(--font-size-sm);
+  --select-retry-fg: var(--color-accent);
+  --select-retry-border-color: var(--color-border);
+  --select-retry-radius: var(--radius-sm);
+  --select-retry-bg-hover: var(--color-bg-muted);
+
+  // Animation
+  --select-listbox-anim-opacity-from: var(--opacity-hidden);
+  --select-listbox-anim-opacity-to: var(--opacity-visible);
+}