Animated Select

---
/**
 * AnimatedSelect — a native <select> that blooms, zero JS. In an engine
 * with `appearance: base-select` the button and the `::picker(select)`
 * take the tokens, the options arrive one after another through
 * @starting-style with a delay from `sibling-index()`, the picker leaves
 * through allow-discrete and `::checkmark` is drawn. Everywhere else it is
 * the native select with a token border and a chevron, no animation — the
 * same set, one browser short of the motion. No listbox is imitated: the
 * keyboard, type-to-select, the form value and the accessibility tree are
 * the browser's in every engine.
 */
import type { HTMLAttributes } from 'astro/types';

interface Option {
  value: string;
  label: string;
  disabled?: boolean;
  /** Options with the same group go into one <optgroup>. */
  group?: string;
}

interface Props extends Omit<HTMLAttributes<'select'>, 'size'> {
  options: Option[];
  name?: string;
  /** Selected value. */
  value?: string;
  /** Visible label as <label for>. Without it, pass aria-label. */
  label?: string;
  /** A disabled first option shown until a choice is made. */
  placeholder?: string;
  size?: 'sm' | 'md';
  id?: string;
}

const { options, name, value, label, placeholder, size = 'md', id, class: className, style, ...rest } = Astro.props;
// unique per render, not per name: a PromptInput and an AnimatedSelect both named "model" can share a page
const selectId = id ?? `ma-aselect-${name ?? 'select'}-${Math.random().toString(36).slice(2, 7)}`;
// group order is first appearance; ungrouped options stay where they are
const groups: { name: string | undefined; items: Option[] }[] = [];
for (const o of options) {
  const last = groups[groups.length - 1];
  if (last && last.name === o.group) last.items.push(o);
  else groups.push({ name: o.group, items: [o] });
}
---

{label && <label class="ma-aselect__label" for={selectId}>{label}</label>}
<span class:list={['ma-aselect', className]} data-size={size} style={style}>
  <select id={selectId} class="ma-aselect__select" name={name} {...rest}>
    {placeholder && <option value="" disabled selected={value === undefined}>{placeholder}</option>}
    {groups.map((g) =>
      g.name ? (
        <optgroup label={g.name}>{g.items.map((o) => <option value={o.value} disabled={o.disabled} selected={o.value === value}>{o.label}</option>)}</optgroup>
      ) : (
        g.items.map((o) => <option value={o.value} disabled={o.disabled} selected={o.value === value}>{o.label}</option>)
      ),
    )}
  </select>
  <svg class="ma-aselect__chevron" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
</span>

<style is:global>
  @layer components {
    :where(.ma-aselect) {
      --ma-aselect-pad: 0.6em 2.2em 0.6em 0.9em;
      position: relative;
      display: inline-grid;
      vertical-align: middle;
      color: inherit;
    }
    :where(.ma-aselect[data-size='sm']) {
      --ma-aselect-pad: 0.35em 1.9em 0.35em 0.65em;
      font-size: 0.875em;
    }
    :where(.ma-aselect__label) {
      display: block;
      margin-block-end: 0.5em;
      font-size: 0.875em;
    }
    /* every engine: the native select in the tokens; the chevron is ours so the two looks match */
    :where(.ma-aselect__select) {
      appearance: none;
      -webkit-appearance: none;
      grid-area: 1 / 1;
      min-inline-size: 8em;
      margin: 0;
      padding: var(--ma-aselect-pad);
      border: 1px solid var(--ma-edge);
      border-radius: 0.6em;
      background: var(--ma-panel);
      color: inherit;
      font: inherit;
      line-height: 1.2;
      cursor: pointer;
      transition: border-color var(--ma-duration-fast) var(--ma-ease-out);
    }
    :where(.ma-aselect__select:hover) {
      border-color: color-mix(in srgb, var(--ma-ink) 35%, transparent);
    }
    :where(.ma-aselect__select:focus-visible) {
      outline: 2px solid var(--ma-ink);
      outline-offset: 2px;
    }
    :where(.ma-aselect__select:disabled) {
      cursor: not-allowed;
      opacity: 0.5;
      transition: none;
    }
    :where(.ma-aselect__select:user-invalid) {
      border-color: #e0563f;
    }
    :where(.ma-aselect__chevron) {
      grid-area: 1 / 1;
      justify-self: end;
      align-self: center;
      inline-size: 1em;
      block-size: 1em;
      margin-inline-end: 0.7em;
      opacity: 0.6;
      pointer-events: none;
      transition: rotate var(--ma-duration) var(--ma-ease);
    }
    /* the customizable select: the picker in the tokens, options staggered in, the picker leaving on allow-discrete */
    @supports (appearance: base-select) {
      :where(.ma-aselect__select),
      :where(.ma-aselect__select)::picker(select) {
        appearance: base-select;
      }
      :where(.ma-aselect__select)::picker-icon {
        display: none;
      }
      :where(.ma-aselect:has(.ma-aselect__select:open) .ma-aselect__chevron) {
        rotate: 180deg;
      }
      :where(.ma-aselect__select)::picker(select) {
        margin-block-start: 0.35em;
        padding: 0.35em;
        border: 1px solid var(--ma-edge);
        border-radius: 0.75em;
        background: var(--ma-panel);
        color: inherit;
        box-shadow: 0 12px 32px -16px rgb(0 0 0 / 0.35);
        opacity: 0;
        translate: 0 calc(var(--ma-travel-hover) * -1);
        transition:
          opacity var(--ma-duration-fast) var(--ma-ease-out),
          translate var(--ma-duration-fast) var(--ma-ease-out),
          display var(--ma-duration-fast) allow-discrete,
          overlay var(--ma-duration-fast) allow-discrete;
      }
      :where(.ma-aselect__select:open)::picker(select) {
        opacity: 1;
        translate: 0 0;
        transition-duration: var(--ma-duration);
        transition-timing-function: var(--ma-ease);
      }
      @starting-style {
        :where(.ma-aselect__select:open)::picker(select) {
          opacity: 0;
          translate: 0 calc(var(--ma-travel-hover) * -1);
        }
      }
      :where(.ma-aselect__select option) {
        display: flex;
        align-items: center;
        gap: 0.5em;
        padding: 0.45em 0.7em;
        border-radius: 0.45em;
        opacity: 1;
        translate: 0 0;
        transition:
          opacity var(--ma-duration) var(--ma-ease-out),
          translate var(--ma-duration) var(--ma-ease),
          background-color var(--ma-duration-fast) var(--ma-ease-out);
        /* one option after another: the delay is its index in the group, on the stagger token */
        transition-delay: calc(sibling-index() * var(--ma-stagger));
      }
      @starting-style {
        :where(.ma-aselect__select:open option) {
          opacity: 0;
          translate: 0 calc(var(--ma-travel-hover) * -1.5);
        }
      }
      :where(.ma-aselect__select option:hover),
      :where(.ma-aselect__select option:focus-visible) {
        background: color-mix(in srgb, var(--ma-ink) 8%, transparent);
        transition-delay: 0s;
      }
      :where(.ma-aselect__select option:checked) {
        font-weight: 500;
      }
      :where(.ma-aselect__select option:disabled) {
        opacity: 0.45;
      }
      :where(.ma-aselect__select option)::checkmark {
        order: 1;
        margin-inline-start: auto;
        font-size: 0.85em;
        opacity: 0.7;
      }
      :where(.ma-aselect__select optgroup) {
        padding-block: 0.25em;
      }
      :where(.ma-aselect__select optgroup)::label {
        padding: 0.35em 0.7em 0.2em;
        font-size: 0.75em;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        opacity: 0.55;
      }
    }
    @media (forced-colors: active) {
      :where(.ma-aselect__select) {
        border-color: ButtonText;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-aselect__select)::picker(select),
      :where(.ma-aselect__select option),
      :where(.ma-aselect__chevron) {
        transition: none;
        translate: 0 0;
      }
    }
  }
</style>