Expanding Strip

Build a control strip that grows sideways to reveal its options. Structure: a pill-shaped inline-flex row containing a disclosure trigger and, when open, a group of option chips. Overflow hidden on both the strip and the group. The rule that defines the pattern: it GROWS, it does not cover. The strip widens in place and everything around it keeps its layout. A panel that floats over the content is a popover, and popovers hide exactly the results these controls are filtering. One axis only. Width changes, height NEVER does. Grow in both directions and it stops being a strip and becomes a card that happens to open sideways. Motion: animate width from 0 to AUTO on a spring, stiffness 420, damping 38, with a layout animation on the strip so its own width follows. Animating to auto rather than a hardcoded pixel width is what lets the strip fit whatever options it is handed. Rotate the chevron 90 degrees on open. It is the cheapest possible signal that this control is a disclosure and not a button that already did something. Keep white-space: nowrap on the chips and overflow hidden on the growing region, so they CLIP during the open instead of reflowing. Let them rewrap mid-animation and the text visibly re-lays-out on every frame. Accessibility, all three: - aria-expanded on the trigger - aria-pressed on each chip - a line of text below stating the current selection, because colour alone must never carry the choice Under prefers-reduced-motion, render the strip open at its final width with the chips present and no spring. Colors as tokens: surface and border for the strip, accent for the selected chip with on-primary ink on top, muted ink for the rest. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.