Option chips

export const Default = () => <Chips items={INDUSTRIES} initial={['it', 'fin']} />;

export const States = () => (
  <div style={grid}>
    <div style={row}>
      <Labeled label="off">
        <button type="button" className="acrm-optchip" aria-pressed={false}>
          E-commerce
        </button>
      </Labeled>
      <Labeled label="on — accent frame, no fill">
        <button type="button" className="acrm-optchip is-on" aria-pressed>
          E-commerce
        </button>
      </Labeled>
    </div>
    <span style={{ color: 'var(--fg-muted)', font: 'var(--small)' }}>
      Hover fills with --hover-surface; keyboard focus draws the foundation ring. No disabled style
      exists in inputs.css.
    </span>
  </div>
);

export const WithIconAndKbd = () => (
  <div style={row}>
    <Labeled label="leading icon — muted, accent when on">
      <Chips
        items={[
          { key: 'call', label: 'Call', icon: 'phone' },
          { key: 'mail', label: 'E-mail', icon: 'mail' },
          { key: 'meeting', label: 'Meeting', icon: 'calendar' },
        ]}
        initial={['mail']}
      />
    </Labeled>
  </div>
);

export const Composition = () => (
  <div style={grid}>
    <Labeled label="wizard step — chips under a field label with a hint">
      <div style={{ width: 480 }}>
        <Field label="Industry" hint="Pick everything that applies.">
          <Chips items={INDUSTRIES} initial={['mfg', 'svc']} />
        </Field>
      </div>
    </Labeled>
    <Labeled label="own value — trailing add chip">
      <div className="acrm-optchips">
        <button type="button" className="acrm-optchip is-on" aria-pressed>
          Services
        </button>
        <button type="button" className="acrm-optchip" aria-pressed={false}>
          Finance
        </button>
        <button type="button" className="acrm-optchip">
          <Icon name="plus" />
          Add your own
        </button>
      </div>
    </Labeled>
  </div>
);