Stepper: general multi-step flow shell as a first-class catalog component#659
Merged
Merged
Conversation
…nent aef6db-stepper/ packages a general stepper: a vertical step rail + content pane + Back/Skip/Next action bar (boxel-ui Button), with per-step isComplete gating, MUI-style optional steps, onStepChange enter hooks, optional modal mode, and an outlined-circle close button. Theming resolves --stepper-* knob -> theme semantic token (--primary/ --primary-foreground pair for fills, on-fill content, and the Next button; --foreground/--muted/--card/--border/--radius/--font-sans for the rest) -> neutral Boxel defaults. @accent (hex) computes a black/ white on-fill color via getContrastColor, the Avatar pattern. Narrow containers stack the panes via a container query and tall step content scrolls inside .stepper-content instead of clipping the action bar. Ships with a StepperPlayground teaching example (live gated demo + generated invocation), Specs for both, a ComponentListing, and a screenshot.
lucaslyl
force-pushed
the
cs-12161-stepper-ui-component
branch
from
July 16, 2026 07:48
fe7f9eb to
c8538fb
Compare
The accent fills and their on-fill content come from the theme's --primary / --primary-foreground pair (or the --stepper-accent / --stepper-accent-fg knobs for a one-off brand override); a JS arg that interpolated a color into an inline style added an injection surface and a second way to do what the theme system already does. Docs (Spec READMEs, playground reference, listing summary) updated to match.
lucaslyl
added a commit
that referenced
this pull request
Jul 17, 2026
…nent (#659) (#661) * Stepper: general multi-step flow shell as a first-class catalog component aef6db-stepper/ packages a general stepper: a vertical step rail + content pane + Back/Skip/Next action bar (boxel-ui Button), with per-step isComplete gating, MUI-style optional steps, onStepChange enter hooks, optional modal mode, and an outlined-circle close button. Theming resolves --stepper-* knob -> theme semantic token (--primary/ --primary-foreground pair for fills, on-fill content, and the Next button; --foreground/--muted/--card/--border/--radius/--font-sans for the rest) -> neutral Boxel defaults. @accent (hex) computes a black/ white on-fill color via getContrastColor, the Avatar pattern. Narrow containers stack the panes via a container query and tall step content scrolls inside .stepper-content instead of clipping the action bar. Ships with a StepperPlayground teaching example (live gated demo + generated invocation), Specs for both, a ComponentListing, and a screenshot. * Stepper: drop the @accent arg — theming is fully theme-token driven The accent fills and their on-fill content come from the theme's --primary / --primary-foreground pair (or the --stepper-accent / --stepper-accent-fg knobs for a one-off brand override); a JS arg that interpolated a color into an inline style added an injection surface and a second way to do what the theme system already does. Docs (Spec READMEs, playground reference, listing summary) updated to match.
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.
Linear: CS-12161
Important
Stacked PR — based on
cs-12106-tsp-ux(#657). Merge #657 first; GitHub will retarget this PR tomainautomatically. Do not merge this one ahead of it.What
aef6db-stepper/packages a general Stepper — the multi-step "guideline book" shell that walks a user through a journey (first-run wizard, onboarding) before they start using an app — so any product can reuse it. This PR contains only the new component package; refactoring the Table Seating Planner's setup wizard onto it will follow as a separate PR.<Button><:step as |step api|>; the component owns the state machine: per-stepisCompletegating wired to host state, MUI-styleoptionalsteps (Skip is per-step opt-in, not global),onStepChangeenter hooks, optional rail click-to-jump@modalmode (scrim + centered card) or inline bordered card; header with kicker/title and an outlined-circle ✕, hideable via@showClose.stepper-contentinstead of clipping the action barTheming
Styling is driven by the theme system. Every visual value resolves
--stepper-*knob → theme semantic token → neutral default.--primary/--primary-foreground(authored by themes as a contrast pair) drive the accent fills, their on-fill content, and the Next button;--foreground/--muted/--muted-foreground/--card/--border/--radius/--font-sansdrive the rest — link a Theme card and the stepper restyles with no stepper-specific work. One-off brand overrides go through the--stepper-accent/--stepper-accent-fgpair on a host class.Packaging
example/stepper-playground-example.gts+ instance — live gated 4-step demo, knobs for@modal/@allowStepJump, generated invocation, full API referenceComponentListing("Stepper UI") linking specs/example/tag/category/screenshotTesting
pnpm run lintinpackages/catalog(eslint, ember-template-lint, glintlint:types) all green; prettier clean