Shackle Lock

Written for the variant you picked above: Night

Build a privacy switch whose icon is a working padlock. Props: locked (controlled), defaultLocked (true), onChange, labels {locked, unlocked} ("Private", "Public"), name (the accessible name, e.g. "Keep this board private"), theme and className. A 44px pill button with role switch and aria-checked: a 22px padlock icon and a one-line window of words. The padlock is SVG: a shackle (a rounded arch stroke, 2.3px, round caps), a body (a 14.5 × 10.75 rounded rect) and a keyhole (a circle and a slot) cut out in the face colour. Locked, the pill is dark with gold metal; unlocked it turns pale green with green metal, the shackle raised 3px and swung −30° about its right leg (transform-box view-box, origin at the top of the right leg), and the keyhole turned 90°. Colours cross-fade over 320ms. Opening plays in order: the key turns 90° (200ms), then from 140ms the shackle springs up 4.6px, swings past to −36° and settles at −30° (560ms), while the body jolts (scaleY 0.93). Closing: the shackle swings back to upright and drops 0.8px past home (420ms), the body clicks — squashing to 0.9 and widening to 1.04 — at 250ms, the key turns back, and a thin ring snaps out from the icon and fades. Restart the animations on every press by keying the icon on a counter, and pick open or close keyframes from a data attribute. The words roll: both labels are stacked in a column inside a 1.25em window, translated by one line with a springy cubic-bezier (420ms), so the pill keeps the longer word's width. Reduced motion jumps straight to each state. Selected variant — Night (night): Palette for this theme (Night): --sl-face #1d1b23; --sl-ink #f4f2f8; --sl-key #1d1b23; --sl-line rgba(255, 255, 255, 0.1); --sl-metal #f1c35a; --sl-open-face #133227; --sl-open-ink #b9f3d3; --sl-open-metal #57d39a; --sl-ring #f1c35a. Treat these as the root colour tokens, one value per role, and name them to suit your code. Select it with the theme option set to "night". Keep every dimension, spacing value, state and motion from the brief unchanged, and keep text at 4.5:1 contrast or better on these surfaces. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: Click, tap, Space or Enter to lock and unlock. Motion: Key 200ms; shackle 560ms opening, 420ms closing; click and ring at 250ms; words roll in 420ms. Reduced motion switches instantly. Accessibility: A real switch (role switch, aria-checked) with an explicit name; the icon and rolling words are decorative. Contrast holds in both states. Responsive behavior: A fixed 44px pill sized by its longer word. Touch: Tapping toggles it. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

Click, tap, Space or Enter to lock and unlock.

Motion

Key 200ms; shackle 560ms opening, 420ms closing; click and ring at 250ms; words roll in 420ms. Reduced motion switches instantly.

Accessibility

A real switch (role switch, aria-checked) with an explicit name; the icon and rolling words are decorative. Contrast holds in both states.

Responsive

A fixed 44px pill sized by its longer word.

On touch

Tapping toggles it.