SpringSelect

7.4 KB gzip for the class module · inlines the shared spring

Variants

Recorded states

• hover recorded state; no setter
• disabled recorded state; no setter
• closed recorded state; no setter
• expanded recorded state; no setter
• selected recorded state; no setter
• dark theme recorded state; no setter
• active recorded state; no setter

Usage

Import

import '/components/spring-select/define.js';

// or register it yourself
import { DetentSpringSelect } from '/components/spring-select/spring-select.js';

Attributes

• default-value
• disabled
• error
• label
• name
• placeholder
• required
• value

Properties

• options
• value
• defaultValue
• placeholder
• label
• error
• disabled
• required
• name
• open
• onChange

Slots

No slots are recorded for this component.

Events

• detent-change — { value: string }

Example

Runnable example: site/examples/spring-select.ts. The snippet below is generated from the catalogued attributes.

<detent-spring-select
  default-value
  disabled
  error
  label
  name
  placeholder="Select…"
  required
  value
></detent-spring-select>

Property-only values

const element = document.querySelector('detent-spring-select');
if (element !== null) {
  // options: SpringSelectOption[]
  element.options = [];
  // onChange: (value: string) => void
  element.onChange = () => {};
}

Source

The pinned upstream source for this row:

• src/components/ui/SpringSelect.tsx sha256 9cf1a4d482c2…

Native files

The native module and its artifacts:

• src/components/spring-select/spring-select.ts
• src/components/spring-select/styles.css
• src/components/spring-select/define.ts
• docs/components/spring-select.md
• site/examples/spring-select.ts
• tests/browser/spring-select.spec.ts
• evidence/components/spring-select.md

API

Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.

Attributes

Properties

Events

Slots

No slots are recorded for this component.

CSS customisation

• React callback props become typed composed CustomEvents; programmatic state assignment emits none.
• Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
• `lucide-react` icon components replaced with local SVG assets (ISC notice retained).
• React state/hooks replaced by element-owned state with pre-upgrade property preservation.
• Controlled/uncontrolled React pair maps to initial-value attributes plus owned state and change events.
• Roving DOM focus on the options replaces the upstream activeIndex-only highlight (one focus mechanism, PC-12.6).
• Native `<select>` type-ahead added (printable keys with a 600ms buffer) so a select stays typeable; no attribute or event added.
• Framer Motion panel, chevron and check springs become the shared spring helper with the pinned springSnappy 380/30/0.5; the AnimatePresence exit is dropped.
• Form participation added: name, required, reset, default-value and state restoration.
• Upstream --surface/--border/rose/opacity-30 treatment becomes tokens at full opacity.
• `error` is presentational (role=alert, aria-invalid, aria-describedby) and does not replace native constraint validation.
• The row says select, so it is a real button with aria-haspopup=listbox plus role=listbox/option: no menu roles, no text input, no aria-activedescendant.