premium-ds 0.1.0

package/src/components/select/select.css

@@ -0,0 +1,386 @@
+/* Select family - <Select> (single) + <MultiSelect>, one .select__* vocabulary (no native <select>). */
+
+.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(--neutral-wash);
+}
+.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);
+}
+
+.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__value,
+.select__option-label,
+.select__option-desc {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 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;
+}
+
+.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);
+}
+
+/* Row-height motion is the Collapse primitive, not this scroll container. */
+.select__list {
+  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__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__option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 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__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);
+}
+
+/* No selected+active rule needed - the selected rules follow active, so source order wins. */
+.select__option[data-active='true'] {
+  background-color: var(--neutral-wash);
+  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);
+}
+
+/* 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);
+  }
+}
+
+/* Multi-select: the reused Checkbox box IS the indicator - no row fill (avoid double-encoding); strip the .cbx standalone chrome. */
+.select[data-multiple='true'] .select__option-check {
+  opacity: 1;
+}
+.select[data-multiple='true'] .select__option .cbx {
+  padding: 0;
+  gap: 0;
+  pointer-events: none;
+}
+.select[data-multiple='true'] .select__option .cbx__box {
+  margin-top: 0;
+}
+
+/* Row owns the press (.cbx is pointer-events:none); --press inherits down to dip .cbx__box. */
+.select[data-multiple='true'] .select__option:active:not([data-disabled='true']) .cbx {
+  --press: 0.88;
+}
+.select[data-multiple='true'] .select__option[data-selected='true'] {
+  background-color: transparent;
+}
+.select[data-multiple='true'] .select__option[data-selected='true'][data-active='true'] {
+  background-color: var(--neutral-wash);
+}
+
+.select__empty {
+  padding: var(--space-4) var(--space-3);
+  text-align: center;
+  font: var(--type-caption);
+  color: var(--text-subtle);
+}
+
+.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;
+  }
+  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;
+  }
+}