ChoiceSelect

render() {
  return (
    <Specimens>
      <Specimen
        label="Trigger width"
        note="The first list matches its trigger; the second takes its natural width."
        align="start"
      >
        <ChoiceSelect
          id="short-choice"
          aria-label="Short trigger choice"
          options={[
            { value: "one", label: "First option" },
            { value: "two", label: "Second option" },
          ]}
        />
        <ChoiceSelect
          id="natural-choice"
          aria-label="Natural width choice"
          matchTriggerWidth={false}
          options={[
            { value: "one", label: "First option" },
            { value: "two", label: "Second option" },
          ]}
        />
      </Specimen>
      <Specimen label="Long option names" width="narrow">
        <Field label="Full option name" htmlFor="long-choice">
          <ChoiceSelect
            id="long-choice"
            defaultValue="long"
            options={[
              {
                value: "long",
                label: "The project owner reviews the full change and verification record",
              },
              {
                value: "path",
                label: "workspace-very-long-source-reference-for-a-readable-selection",
              },
            ]}
          />
        </Field>
      </Specimen>
    </Specimens>
  );
}

render() {
  const feedback = signal("Configuration is only demoed locally; no content is published.");
  const controlled = signal("draft");
  return (
    <form
      className="workshop-stack workshop-constrained"
      onSubmit={(event: SubmitEvent) => {
        event.preventDefault();
        const data = new FormData(event.currentTarget as HTMLFormElement);
        feedback.value = `Submitted: ${data.get("delivery")} · ${data.get("environment")}`;
      }}
    >
      <header className="workshop-composition-header">
        <h2>Prepare delivery</h2>
        <p>Options expand in place, and long names remain fully readable.</p>
      </header>
      <Field
        label="Delivery target"
        htmlFor="custom-delivery"
        description="Arrow keys move, Enter confirms, Escape returns."
      >
        <ChoiceSelect
          id="custom-delivery"
          name="delivery"
          defaultValue="review"
          options={[
            { value: "draft", label: "Keep as a local draft", group: "Current project" },
            {
              value: "review",
              label:
                "Hand to the project owner to review all changes and the verification record",
              group: "Current project",
            },
            {
              value: "remote",
              label: "Remote project · not connected",
              group: "Other locations",
              disabled: true,
            },
            {
              value: "archived",
              label: "File into the project archive",
              group: "Other locations",
            },
          ]}
        />
      </Field>
      <Field
        label="Release environment"
        htmlFor="custom-environment"
        description="Required; native form validation applies on submit."
      >
        <ChoiceSelect
          id="custom-environment"
          name="environment"
          required
          placeholder="Select an environment…"
          options={[
            { value: "local", label: "Local preview only" },
            { value: "staging", label: "Staging environment" },
          ]}
        />
      </Field>
      <Field label="Searchable model" htmlFor="searchable-model">
        <ChoiceSelect
          id="searchable-model"
          searchable
          searchPlaceholder="Search by model name or ID"
          defaultValue=""
          options={[
            { value: "", label: "Follow the runner default" },
            { value: "gpt-6-astra", label: "GPT-6-Astra · gpt-6-astra" },
            { value: "gpt-6-sol", label: "GPT-6-Sol · gpt-6-sol" },
            { value: "gpt-6-luna", label: "GPT-6-Luna · gpt-6-luna" },
          ]}
        />
      </Field>
      <Field
        label="Controlled select"
        htmlFor="custom-controlled"
        description="A form reset keeps the caller's current selection."
      >
        <ChoiceSelect
          id="custom-controlled"
          name="controlled"
          value={controlled}
          onValueChange={(next) => {
            controlled.value = next;
          }}
          options={[
            { value: "draft", label: "Keep draft" },
            { value: "review", label: "Submit for review" },
          ]}
        />
      </Field>
      <div className="workshop-actions">
        <Button type="submit">Submit configuration</Button>
        <Button variant="quiet" type="reset">
          Restore defaults
        </Button>
      </div>
      <Note role="status">{feedback}</Note>
    </form>
  );
}