Expanding Search Field

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

Variants

Recorded states

• expanded recorded state; no setter
• collapsed recorded state; no setter

Usage

Import

import '/components/expanding-search-field/define.js';

// or register it yourself
import { DetentExpandingSearchField } from '/components/expanding-search-field/expanding-search-field.js';

Attributes

• aria-label
• auto-focus
• collapsed-width
• disabled
• expanded-width
• name
• placeholder
• required
• value

Properties

• value
• placeholder
• collapsedWidth
• expandedWidth
• disabled
• autoFocus
• name
• required
• expanded
• onChange
• onSubmit
• onClear

Slots

No slots are recorded for this component.

Events

• detent-change — { value: string }
• detent-submit — { value: string }
• detent-clear — {}

Example

Runnable example: site/examples/expanding-search-field.ts. The snippet below is generated from the catalogued attributes.

<detent-expanding-search-field
  aria-label
  auto-focus
  collapsed-width="220px"
  disabled
  expanded-width="340px"
  name
  placeholder="Search..."
  required
  value
></detent-expanding-search-field>

Property-only values

const element = document.querySelector('detent-expanding-search-field');
if (element !== null) {
  // onChange: (value: string) => void
  element.onChange = () => {};
  // onSubmit: (value: string) => void
  element.onSubmit = () => {};
  // onClear: () => void
  element.onClear = () => {};
}

Source

The pinned upstream source for this row:

• src/components/ui/IOSSearchBar.tsx sha256 ccc3631956ae…

Native files

The native module and its artifacts:

• src/components/expanding-search-field/expanding-search-field.ts
• src/components/expanding-search-field/styles.css
• src/components/expanding-search-field/define.ts
• docs/components/expanding-search-field.md
• site/examples/expanding-search-field.ts
• tests/browser/expanding-search-field.spec.ts
• evidence/components/expanding-search-field.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.
• Escape clears a non-empty value first and collapses only on the second press (upstream blurred immediately).
• One clear affordance: a single `<button aria-label="Clear search">` with the native `::-webkit-search-cancel-button` suppressed, so the action is never offered or tabbed twice.
• The ⌘K hint is presentation only (aria-hidden, no document-level shortcut registered).
• The Framer Motion width spring becomes the shared spring helper with the pinned springSmooth 200/28/0.85. The clear button pops in and out (opacity 0/scale 0.8) on upstream's duration-only 0.15 s transition, which framer-motion 13 runs as a keyframes tween with easeInOut (CSS ease-in-out), via WAAPI; it is inert while it leaves.
• Form participation added; upstream dark-only hex pairs (#0E0E0E/#525252/#6B6B6B) become tokens so light mode is supported and measured.