Feature - Implement huxStepper pattern (setup for huxWizard)#45
Open
Copilot wants to merge 14 commits into
Open
Feature - Implement huxStepper pattern (setup for huxWizard)#45Copilot wants to merge 14 commits into
huxStepper pattern (setup for huxWizard)#45Copilot wants to merge 14 commits into
Conversation
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/7073359c-163e-4b7e-b062-26669b446f95 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Contributor
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
hyperux | 98f666b | Commit Preview URL Branch Preview URL |
May 24 2026, 07:46 AM |
Copilot
AI
changed the title
[WIP] Add Stepper pattern/component as base for Wizard
Feature - Add Stepper pattern as base for Wizard composition
May 21, 2026
Owner
|
@copilot Nice start. However, the |
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/8269c7a5-cfd9-4590-95b5-4673d26c9e4a Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Contributor
Author
Implemented in commit Added
I also updated the Stepper demo/docs to show and document this mode. Screenshot: Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Owner
|
@copilot Better, but we're shouldn't steps be marked as "completed" if the user has completed the step? At the moment I click "Next step" and there's no indication that I have completed the previous step. |
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/fe35a8a9-2e3b-4577-9413-03c19aadda11 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/fe35a8a9-2e3b-4577-9413-03c19aadda11 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/fe35a8a9-2e3b-4577-9413-03c19aadda11 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Contributor
Author
Implemented in commit
Screenshot: Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new huxStepper Alpine pattern (runtime + demo + documentation) to support accessible, step-based flows and to serve as a composable base for a future Wizard component.
Changes:
- Registered
huxStepperinPatternRegistration.astrowith step navigation, completion helpers, and optional scoped change events. - Added a Stepper demo showing direct step selection plus previous/next navigation (including
stepsAreViewable: truebehavior). - Added demo-first Stepper documentation page describing API/options/behavior/accessibility.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/components/PatternRegistration.astro | Adds huxStepper Alpine data registration and stepper runtime logic. |
| src/components/demos/Stepper.astro | Adds a UI demo showcasing the stepper behavior and copy-ready snippet sources. |
| src/content/patterns/stepper.mdx | Adds documentation for huxStepper following the repo’s demo-first patterns format. |
Owner
|
@copilot Address the feedback. |
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/b88326e2-1369-43c5-99f4-93855bf2eccf Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Contributor
Author
Addressed in commit Implemented the requested feedback:
Screenshot: Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
markmead
changed the title
huxStepper pattern (setup for huxWizard)
Owner
|
@copilot Few bits of feedback:
As well as that, do a deep dive of the accessibility. |
…ility Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/88b69bf0-6a24-400d-8775-bb4f57f1fe5b Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/88b69bf0-6a24-400d-8775-bb4f57f1fe5b Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/88b69bf0-6a24-400d-8775-bb4f57f1fe5b Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Contributor
Author
Addressed in commits Updated Stepper to use Screenshot: Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Replace symbolic status markers (●, ✓, ○) with plain text labels (“Current”, “Completed”, “Not completed”) in Stepper.astro and stepper.mdx to improve screen-reader clarity and avoid reliance on symbols or color. Also tidy a minor span formatting/whitespace in Stepper.astro.
markmead
approved these changes
May 23, 2026
Comment on lines
+159
to
+160
| - When `stepperId` is set, `hux-stepper:{stepperId}:change` is dispatched on init and on every successful step change. | ||
|
|
Owner
|
@copilot Address the feedback. Also, can you explain how |
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/e4bb9b49-277c-4d58-8794-50d3dac37f4a Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Contributor
Author
Addressed in commit I updated the Stepper Behavior Contract docs to match implementation exactly:
Screenshot: Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
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
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.
This PR introduces a new
huxStepperAlpine pattern to support accessible step-based flows (multi-step forms/progress navigation) and establish a reusable foundation for a future Wizard component. It adds the runtime primitive, a demo, and implementation-aligned documentation using HyperUX’s demo-first format.Stepper runtime primitive (
huxStepper)huxStepperregistration inPatternRegistration.astro.stepItems, deterministic initial step resolution, linear navigation, direct step selection, and progress helpers.goToStep,goToPreviousStep,goToNextStepactiveStepId,activeStepIndex,isFirstStep,isLastStepisStepComplete,isStepCurrentstepsAreViewableconfig (default:false):false, completion is inferred from step position.true, direct step clicks are view-only (no completion inference from selection), and completion is tracked when advancing withgoToNextStep().stepsAreViewablemode.stepItemsinput to avoid runtime errors when non-array values are passed.goToStep()now no-ops when the requested step is already active, preventing duplicate change dispatches.stepperIdconfig for scoped events.stepperIdis provided:hux-stepper:{stepperId}:changewith{ stepId, stepIndex, totalSteps }.Stepper demo
src/components/demos/Stepper.astro.stepsAreViewable: truemode for non-assumptive step viewing● Current,✓ Completed,○ Not completed) to avoid color-only state communicationdata-hux-copy).Stepper docs page
src/content/patterns/stepper.mdxwith required structure:aria-current="step", explicit button semantics,aria-live="polite",aria-describedbystate associations, and non-color-only state text).stepsAreViewablesemantics, including view-only direct selection plus completion tracking via next-step progression.idtostepperId.> [!WARNING]
>
>