@zyncat/ui 0.11.0 → 0.13.0

package/src/components/composites/select/select.css

@@ -1,416 +1,321 @@
-/* Select family - <Select> (single) + <MultiSelect>, one .select__* vocabulary (no native <select>). */
+@layer zyncat.tokens, zyncat.components;
 
-.select {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  font-family: var(--font-sans);
-}
-
-.select__trigger {
-  appearance: none;
-  margin: 0;
-  font-family: inherit;
-  cursor: pointer;
-  text-align: left;
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  width: 100%;
-  height: var(--control-height);
-  padding: 0 var(--space-3);
-  background: var(--bg-inset);
-  border: var(--border-hairline) solid var(--border-default);
-  border-radius: var(--radius-md);
-  color: var(--text-body);
-  font-size: var(--size-body);
-  line-height: var(--leading-body);
-  font-weight: var(--weight-regular);
-  transition:
-    color var(--duration-base) var(--ease-standard),
-    background-color var(--duration-base) var(--ease-standard),
-    border-color var(--duration-base) var(--ease-standard),
-    box-shadow var(--duration-base) var(--ease-standard);
-}
-.select__trigger:hover {
-  border-color: var(--border-strong);
-  background-color: var(--gray-wash-strong);
-}
-.select__trigger:focus-visible {
-  outline: none;
-  border-color: var(--accent);
-  background: var(--bg-surface);
-  box-shadow: var(--ring-accent);
-}
-.select[data-open='true'] .select__trigger {
-  border-color: var(--accent);
-  background: var(--bg-surface);
-  box-shadow: var(--ring-accent);
-}
-
-.select[data-size='sm'] .select__trigger {
-  height: var(--control-height-sm);
-  padding: 0 var(--space-2);
-  font-size: var(--size-caption);
-  line-height: var(--leading-caption);
-  gap: var(--space-1);
-}
-.select[data-size='lg'] .select__trigger {
-  height: var(--control-height-lg);
-  padding: 0 var(--space-4);
-}
-
-.select[data-invalid='true'] .select__trigger {
-  border-color: var(--danger);
-}
-.select[data-invalid='true'] .select__trigger:focus-visible,
-.select[data-invalid='true'][data-open='true'] .select__trigger {
-  border-color: var(--danger);
-  box-shadow: var(--ring-danger);
-}
+@layer zyncat.components {
+  /* Select family - <Select> (single) + <MultiSelect>, one .select__* vocabulary (no native <select>). */
 
-.select[data-disabled='true'] .select__trigger {
-  cursor: not-allowed;
-  background: var(--bg-muted);
-  border-color: var(--border-subtle);
-  color: var(--text-disabled);
-  box-shadow: none;
-}
-.select[data-disabled='true'] .select__value,
-.select[data-disabled='true'] .select__leading,
-.select[data-disabled='true'] .select__caret {
-  color: var(--text-disabled);
-}
-
-.select[data-loading='true'] .select__value {
-  color: var(--text-muted);
-}
-
-.select__leading {
-  display: inline-flex;
-  flex: 0 0 auto;
-  font-size: var(--icon-sm);
-  color: var(--text-muted);
-}
-.select__value {
-  flex: 1 1 auto;
-  min-width: 0;
-  color: var(--text-body);
-}
-.select__value[data-placeholder='true'] {
-  color: var(--text-disabled);
-}
-.select__caret {
-  display: inline-flex;
-  flex: 0 0 auto;
-  font-size: var(--icon-sm);
-  color: var(--text-subtle);
-  transition:
-    transform var(--duration-base) var(--ease-entrance),
-    color var(--duration-fast) var(--ease-standard);
-}
-.select[data-open='true'] .select__caret {
-  transform: rotate(180deg);
-  color: var(--text-muted);
-}
-.select__count {
-  flex: 0 0 auto;
-  font-family: var(--font-mono);
-  font-size: var(--size-micro);
-  line-height: 1;
-  font-variant-numeric: tabular-nums;
-  color: var(--text-accent);
-  background: var(--accent-wash);
-  padding: var(--space-px) var(--space-1);
-  border-radius: var(--radius-sm);
-}
+  .select {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    font-family: var(--font-sans);
+  }
 
-.select__value,
-.select__option-label,
-.select__option-desc {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  .select__trigger {
+    appearance: none;
+    margin: 0;
+    font-family: inherit;
+    cursor: pointer;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+    height: var(--control-height);
+    padding: 0 var(--space-3);
+    background: var(--bg-surface);
+    border: var(--border-hairline) solid var(--border-default);
+    border-radius: var(--radius-md);
+    color: var(--text-body);
+    font-size: var(--size-body);
+    line-height: var(--leading-body);
+    font-weight: var(--weight-medium);
+    transition:
+      color var(--duration-base) var(--ease-standard),
+      background-color var(--duration-base) var(--ease-standard),
+      border-color var(--duration-base) var(--ease-standard),
+      box-shadow var(--duration-base) var(--ease-standard);
+  }
+  .select__trigger:hover {
+    border-color: var(--border-strong);
+    background-color: color-mix(in oklab, var(--bg-surface) 55%, var(--bg-muted));
+  }
+  .select__trigger:focus-visible {
+    outline: none;
+    border-color: var(--accent);
+    background: var(--bg-surface);
+    box-shadow: var(--ring-accent);
+  }
+  .select[data-open='true'] .select__trigger {
+    border-color: var(--accent);
+    background: var(--bg-surface);
+    box-shadow: var(--ring-accent);
+  }
 
-/* Menu enter/exit are Motion-owned inline styles (selectMenuVariants); this sheet only sets the look + transform-origin. */
-.select__menu {
-  position: fixed;
-  margin: 0;
-  inset: auto; /* JS sets top/left/min-width - anchor() needs the top layer, which we don't use */
-  z-index: var(
-    --layer-overlay
-  ); /* base of the overlay band (tokens/layers.css) - plain React-owned node, not the top layer */
-  width: max-content;
-  max-width: min(22rem, 92vw);
-  background: var(--bg-surface-raised);
-  border: var(--border-hairline) solid var(--border-default);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  padding: var(--space-1);
-  transform-origin: top left;
-}
-/* flipped above the trigger (data-side from useAnchorPosition) - scale from the anchored edge */
-.select__menu[data-side='top'] {
-  transform-origin: bottom left;
-}
+  .select[data-size='sm'] .select__trigger {
+    height: var(--control-height-sm);
+    padding: 0 var(--space-2);
+    font-size: var(--size-caption);
+    line-height: var(--leading-caption);
+    gap: var(--space-1);
+  }
+  .select[data-size='lg'] .select__trigger {
+    height: var(--control-height-lg);
+    padding: 0 var(--space-4);
+  }
 
-.select__search {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2);
-  margin: 0 0 var(--space-1);
-  border-bottom: var(--border-hairline) solid var(--border-subtle);
-  font-size: var(--icon-sm);
-  color: var(--text-subtle);
-}
-.select__search-input {
-  appearance: none;
-  border: none;
-  outline: none;
-  background: transparent;
-  width: 100%;
-  padding: 0;
-  font-family: var(--font-sans);
-  font-size: var(--size-body);
-  line-height: var(--leading-body);
-  color: var(--text-body);
-}
-.select__search-input::placeholder {
-  color: var(--text-disabled);
-}
+  .select[data-invalid='true'] .select__trigger {
+    border-color: var(--danger);
+  }
+  .select[data-invalid='true'] .select__trigger:focus-visible,
+  .select[data-invalid='true'][data-open='true'] .select__trigger {
+    border-color: var(--danger);
+    box-shadow: var(--ring-danger);
+  }
 
-/* Row-height motion is the Collapse primitive, not this scroll container.
-   position: relative anchors the glide pill (a single absolute child) to the scrolled content. */
-.select__list {
-  position: relative;
-  max-height: 16.5rem;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scroll-behavior: smooth;
-  scrollbar-width: none;
-}
-.select__list::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  display: none;
-}
+  .select[data-disabled='true'] .select__trigger {
+    cursor: not-allowed;
+    background: var(--bg-muted);
+    border-color: var(--border-subtle);
+    color: var(--text-disabled);
+    box-shadow: none;
+  }
+  .select[data-disabled='true'] .select__value,
+  .select[data-disabled='true'] .select__leading,
+  .select[data-disabled='true'] .select__caret {
+    color: var(--text-disabled);
+  }
 
-.select__group-label {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background: var(--bg-surface-raised);
-  padding: var(--space-2) var(--space-2) var(--space-1);
-  font: var(--type-micro);
-  text-transform: uppercase;
-  letter-spacing: var(--tracking-caps);
-  color: var(--text-subtle);
-}
-.select__group + .select__group .select__group-label {
-  border-top: var(--border-hairline) solid var(--border-subtle);
-  margin-top: var(--space-1);
-}
+  .select[data-loading='true'] .select__value {
+    color: var(--text-muted);
+  }
 
-.select__option {
-  padding: var(--option-padding);
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  color: var(--text-body);
-  user-select: none;
-  transition:
-    background-color var(--duration-base) var(--ease-standard),
-    color var(--duration-base) var(--ease-standard);
-}
+  .select__leading {
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: var(--icon-sm);
+    color: var(--text-muted);
+  }
+  .select__value {
+    flex: 1 1 auto;
+    min-width: 0;
+    color: var(--text-body);
+  }
+  .select__value[data-placeholder='true'] {
+    color: var(--text-disabled);
+  }
+  .select__caret {
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: var(--icon-sm);
+    color: var(--text-subtle);
+    transition:
+      transform var(--duration-base) var(--ease-entrance),
+      color var(--duration-fast) var(--ease-standard);
+  }
+  .select[data-open='true'] .select__caret {
+    transform: rotate(180deg);
+    color: var(--text-muted);
+  }
+  .select__count {
+    flex: 0 0 auto;
+    font-family: var(--font-mono);
+    font-size: var(--size-micro);
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+    color: var(--text-accent);
+    background: var(--accent-wash);
+    padding: var(--space-px) var(--space-1);
+    border-radius: var(--radius-sm);
+  }
 
-.select__option[data-size='sm'] {
-  --option-padding: var(--space-1);
-}
+  .select__value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.select__option[data-size='md'] {
-  --option-padding: var(--space-2);
-}
+  /* Chrome, origin, scroll box, row skeleton and pill all come from
+   internal/menu/menu-surface.css; JS sets top/left/min-width. Listbox-only states live here. */
 
-.select__option[data-size='lg'] {
-  --option-padding: var(--space-4);
-}
+  .select__search {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2);
+    margin: 0 0 var(--space-1);
+    border-bottom: var(--border-hairline) solid var(--border-subtle);
+    font-size: var(--icon-sm);
+    color: var(--text-subtle);
+  }
+  .select__search-input {
+    appearance: none;
+    border: none;
+    outline: none;
+    background: transparent;
+    width: 100%;
+    padding: 0;
+    font-family: var(--font-sans);
+    font-size: var(--size-body);
+    line-height: var(--leading-body);
+    color: var(--text-body);
+  }
+  .select__search-input::placeholder {
+    color: var(--text-disabled);
+  }
 
-.select__option-icon {
-  display: inline-flex;
-  flex: 0 0 auto;
-  font-size: var(--icon-sm);
-  color: var(--text-muted);
-}
-.select__option-text {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-px);
-  min-width: 0;
-  flex: 1 1 auto;
-}
-.select__option-label {
-  font-size: var(--size-body);
-  line-height: var(--leading-body);
-}
-.select__option-desc {
-  font: var(--type-caption);
-  color: var(--text-subtle);
-}
-.select__option-check {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  min-width: var(--icon-sm);
-  font-size: var(--icon-sm);
-  color: var(--accent);
-  opacity: 0;
-  transition: var(--transition-opacity);
-}
+  /* Row-height motion is the Collapse primitive, not this scroll container.
+   position: relative anchors the glide pill (a single absolute child) to the scrolled content. */
+  .select__list {
+    position: relative;
+    scroll-behavior: smooth;
+  }
 
-/* Hover pill - one persistent fill in the list (../motion/glide) that travels to the active row and
-   animates its real size, so it's never clipped by the searchable rows' collapse and never scales.
-   GlidePill sets x/y/width/height inline; the option (position: relative) paints above it. */
-.select__glide {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  border-radius: var(--radius-md);
-  background: var(--neutral-wash);
-  pointer-events: none;
-}
+  .select__group-label {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: var(--bg-surface-raised);
+  }
+  .select__group + .select__group .select__group-label {
+    border-top: var(--border-hairline) solid var(--border-subtle);
+    margin-top: var(--space-1);
+  }
 
-/* Active row: the pill carries the fill; here we only lift the text. Selected rules follow, so source order wins. */
-.select__option[data-active='true'] {
-  color: var(--text-strong);
-}
-.select__option[data-active='true'] .select__option-icon {
-  color: var(--text-body);
-}
-.select__option[data-selected='true'] {
-  background-color: var(--accent-wash);
-}
-.select__option[data-selected='true'] .select__option-label {
-  color: var(--text-accent);
-  font-weight: var(--weight-medium);
-}
-.select__option[data-selected='true'] .select__option-icon {
-  color: var(--text-accent);
-}
-.select__option[data-selected='true'] .select__option-check {
-  opacity: 1;
-}
-.select__option[data-disabled='true'] {
-  cursor: not-allowed;
-  color: var(--text-disabled);
-}
-.select__option[data-disabled='true'] .select__option-icon {
-  color: var(--text-disabled);
-}
+  .select__option {
+    transition:
+      background-color var(--duration-base) var(--ease-standard),
+      color var(--duration-base) var(--ease-standard);
+  }
 
-/* check lands with a spring when a row becomes selected (remounts via React key) */
-.select__option[data-selected='true'] .select__option-check :is(i, svg) {
-  animation: select-check-in var(--duration-base) var(--ease-spring);
-}
-@keyframes select-check-in {
-  from {
+  .select__option-check {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    min-width: var(--icon-sm);
+    font-size: var(--icon-sm);
+    color: var(--accent);
     opacity: 0;
-    transform: scale(0.5);
+    transition: var(--transition-opacity);
+  }
+
+  .select__option[data-active='true'] {
+    color: var(--text-strong);
+  }
+  .select__option[data-active='true'] .menu-row__icon {
+    color: var(--text-body);
+  }
+  .select__option[data-selected='true'] .menu-row__label {
+    color: var(--text-accent);
   }
-  to {
+  .select__option[data-selected='true'] .menu-row__icon {
+    color: var(--text-accent);
+  }
+  .select__option[data-selected='true'] .select__option-check {
     opacity: 1;
-    transform: scale(1);
   }
-}
-
-/* Multi-select: the reused Checkbox box IS the indicator - no row fill (avoid double-encoding); strip the .cbx standalone chrome. */
-.select__menu[data-multiple='true'] .select__option-check {
-  opacity: 1;
-}
-.select__menu[data-multiple='true'] .select__option .cbx {
-  padding: 0;
-  gap: 0;
-  pointer-events: none;
-}
-.select__menu[data-multiple='true'] .select__option .cbx__box {
-  margin-top: 0;
-}
+  .select__option[data-disabled='true'] {
+    cursor: not-allowed;
+    color: var(--text-disabled);
+  }
+  .select__option[data-disabled='true'] .menu-row__icon {
+    color: var(--text-disabled);
+  }
 
-/* Row owns the press (.cbx is pointer-events:none): dip the box on press - explicit transform,
-   so a checked box (whose resting scale would otherwise dilute --press) still scales from center. */
-.select__menu[data-multiple='true'] .select__option:active:not([data-disabled='true']) .cbx__box {
-  transform: scale(0.86);
-}
-.select__menu[data-multiple='true'] .select__option[data-selected='true'] {
-  background-color: transparent;
-}
+  /* check lands with a spring when a row becomes selected (remounts via React key) */
+  .select__option[data-selected='true'] .select__option-check :is(i, svg) {
+    animation: select-check-in var(--duration-base) var(--ease-spring);
+  }
+  @keyframes select-check-in {
+    from {
+      opacity: 0;
+      transform: scale(0.5);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
 
-.select__empty {
-  padding: var(--space-4) var(--space-3);
-  text-align: center;
-  font: var(--type-caption);
-  color: var(--text-subtle);
-}
+  /* Multi-select: the reused Checkbox box IS the indicator; strip the .cbx standalone chrome. */
+  .select__menu[data-multiple='true'] .select__option-check {
+    opacity: 1;
+  }
+  .select__menu[data-multiple='true'] .select__option .cbx {
+    padding: 0;
+    gap: 0;
+    pointer-events: none;
+  }
+  .select__menu[data-multiple='true'] .select__option .cbx__box {
+    margin-top: 0;
+  }
 
-.select__loading {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  padding: var(--space-1);
-}
-.select__skeleton {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2);
-}
-.select__skeleton-dot {
-  width: var(--icon-sm);
-  height: var(--icon-sm);
-  border-radius: var(--radius-full);
-  background: var(--bg-muted);
-  flex: 0 0 auto;
-}
-.select__skeleton-bar {
-  height: 0.5rem;
-  border-radius: var(--radius-full);
-  background: var(--bg-muted);
-  flex: 1 1 auto;
-  max-width: 11rem;
-}
-.select__skeleton:nth-child(2) .select__skeleton-bar {
-  max-width: 7rem;
-}
-.select__skeleton:nth-child(3) .select__skeleton-bar {
-  max-width: 9rem;
-}
-.select__loading [data-pulse] {
-  animation: select-pulse var(--duration-spin) var(--ease-standard) infinite alternate;
-}
-@keyframes select-pulse {
-  from {
-    opacity: 0.55;
+  /* Row owns the press (.cbx is pointer-events:none): dip the box on press - explicit transform,
+   so a checked box (whose resting scale would otherwise dilute --press) still scales from center. */
+  .select__menu[data-multiple='true'] .select__option:active:not([data-disabled='true']) .cbx__box {
+    transform: scale(0.86);
   }
-  to {
-    opacity: 1;
+  .select__empty {
+    padding: var(--space-4) var(--space-3);
+    text-align: center;
+    font: var(--type-caption);
+    color: var(--text-subtle);
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .select__list {
-    scroll-behavior: auto;
+  .select__loading {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    padding: var(--space-1);
   }
-  .select__option-check :is(i, svg),
-  .select__loading [data-pulse] {
-    animation: none;
+  .select__skeleton {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2);
+  }
+  .select__skeleton-dot {
+    width: var(--icon-sm);
+    height: var(--icon-sm);
+    border-radius: var(--radius-full);
+    background: var(--bg-muted);
+    flex: 0 0 auto;
+  }
+  .select__skeleton-bar {
+    height: 0.5rem;
+    border-radius: var(--radius-full);
+    background: var(--bg-muted);
+    flex: 1 1 auto;
+    max-width: 11rem;
+  }
+  .select__skeleton:nth-child(2) .select__skeleton-bar {
+    max-width: 7rem;
+  }
+  .select__skeleton:nth-child(3) .select__skeleton-bar {
+    max-width: 9rem;
   }
   .select__loading [data-pulse] {
-    opacity: 0.7;
+    animation: select-pulse var(--duration-spin) var(--ease-standard) infinite alternate;
+  }
+  @keyframes select-pulse {
+    from {
+      opacity: 0.55;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .select__list {
+      scroll-behavior: auto;
+    }
+    .select__option-check :is(i, svg),
+    .select__loading [data-pulse] {
+      animation: none;
+    }
+    .select__loading [data-pulse] {
+      opacity: 0.7;
+    }
   }
 }