feat: add QuantityStepper, FilterChips and HoldToConfirm components - #4
Merged
Conversation
Three new micro-interaction components, each wired through the catalog, registry, home gallery and generated registry JSON/sitemap: - QuantityStepper: - / + buttons around a clamped number, back-eased spring pop on change, tabular-nums to keep digits from shifting. - FilterChips: multi-select toggle chips that fill with the accent colour and pop on toggle. - HoldToConfirm: circular hold-to-delete button with an SVG progress ring that fills over 800ms; completes to a success flash or snaps back on early release.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Three new micro-interaction components for the Verve gallery, each following the existing repo idioms (spring-pop from
PinInput, icon cross-fade fromVolumeButton,v-modelmirror +useReducedMotionfallback) and wired through every place the catalog fans out to:catalog.ts,components/index.ts,registry.json, the hand-authoredHome.vuegallery grid, and the generatedpublic/r/*.json+sitemap.xml.QuantityStepper
−/+buttons around a number that clamps to[min, max]. Each change emitsupdate:modelValueand pops the value —scalesprings to1.3and settles oncubic-bezier(0.34, 1.56, 0.64, 1). The pressed button dips via CSS:activescale(0.9).tabular-nums+ a fixed min width keep the digits from shifting. Buttons disable at the bounds.FilterChips
A row of multi-select toggle chips. Clicking one fills it with the accent colour (
bg-primary), flips its text to the background colour (text-primary-foreground), and pops it (scale 1.12, same back-eased curve). Any number of chips can be active; the value is the array of selected labels.HoldToConfirm
A circular hold-to-delete button ringed by an SVG progress arc.
pointerdownanimates the ring'sstroke-dashoffsetfrom full to0over 800ms linear (pointer capture keeps the gesture alive if the finger drifts off). Held the whole way it firesconfirmand flashes a green success state (trash → check cross-fade); released early it cancels and snaps the ring back on a quick ease. Red (destructive) while holding, green (primary) on success — both existing tokens.Notes
prefers-reduced-motion.node scripts/build-registry.mjs) → 19 items; sitemap regenerated.Verification
pnpm type-check— cleanpnpm lint:check/ eslint on touched files — clean