Feature - Add Stepper pattern as base for Wizard composition

[Copilot]

This PR introduces a new huxStepper Alpine 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)

  • Added huxStepper registration in PatternRegistration.astro.
  • Supports filtered/validated stepItems, deterministic initial step resolution, linear navigation, direct step selection, and progress helpers.
  • Exposes public API for composition:
    • goToStep, goToPreviousStep, goToNextStep
    • activeStepId, activeStepIndex, isFirstStep, isLastStep
    • isStepComplete, isStepCurrent
  • Adds stepsAreViewable config (default: false):
    • When false, completion is inferred from step position.
    • When true, step clicks are view-only and isStepComplete() does not assume completion.
  • Emits optional scoped change events when id is provided: hux-stepper:{id}:change with { stepId, stepIndex, totalSteps }.

• Stepper demo

  • Added src/components/demos/Stepper.astro.
  • Demonstrates:
    • Clickable step list + previous/next controls
    • Panel switching by active step
    • stepsAreViewable: true mode for non-assumptive step viewing
    • Copy-ready registration + markup snippet integration (data-hux-copy).

• Stepper docs page

  • Added src/content/patterns/stepper.mdx with required structure:
    • Runtime constraints, API, options, quick start, usage patterns, behavior contract, error handling, accessibility notes, notes.
  • Documents only supported public API and marks helpers as private implementation details.
  • Accessibility guidance is reflected in snippets and demo (e.g. aria-current="step", explicit button semantics, aria-live="polite").
  • Updated behavior/docs to reflect stepsAreViewable semantics.

huxStepper({
  id: 'checkout',
  stepsAreViewable: true,
  stepItems: [
    { label: 'Contact', id: 'contact' },
    { label: 'Shipping', id: 'shipping' },
    { label: 'Payment', id: 'payment' },
  ],
})

// Optional composition hook for Wizard-like orchestration
window.addEventListener('hux-stepper:checkout:change', (event) => {
  const { stepId, stepIndex, totalSteps } = event.detail
})

> [!WARNING]
>
>

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	hyperux	4d29ecc	Commit Preview URL Branch Preview URL	May 21 2026, 04:33 PM

[markmead]

@copilot Nice start. However, the isStepCompleted implementation assumes a lot. In the current setup, someone clicking to the "Payment" step just to view, will then see that "Contact" and "Shipping" are completed. Can we add a config option (stepsAreViewable?) that allows users to click the steps to view them – with NO assumption if it is a completed step.

[Copilot]

@copilot Nice start. However, the isStepCompleted implementation assumes a lot. In the current setup, someone clicking to the "Payment" step just to view, will then see that "Contact" and "Shipping"...

Implemented in commit 4d29ecc.

Added stepsAreViewable to huxStepper:

• stepsAreViewable: false (default): existing inferred completion behavior remains.
• stepsAreViewable: true: step clicks are view-only and isStepComplete() no longer infers completion.

I also updated the Stepper demo/docs to show and document this mode.

Screenshot: /tmp/playwright-logs/stepper-steps-are-viewable.png

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:

• fonts.google.com
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/../astro/bin/astro.mjs build odules/workerd/bin/workerd (dns block)
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/../astro/bin/astro.mjs dev --host 0.0.0.0 --port 4321 (dns block)
• sparrow.cloudflare.com
  • Triggering command: /opt/hostedtoolcache/node/24.15.0/x64/bin/node /opt/hostedtoolcache/node/24.15.0/x64/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/work/hyperux/hyperux/node_modules/.pnpm/wrangler@4.93.0/node_modules/wrangler/wrangler-dist/cli.js types (dns block)
• telemetry.astro.build
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/../astro/bin/astro.mjs build odules/workerd/bin/workerd (dns block)
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/../astro/bin/astro.mjs dev --host 0.0.0.0 --port 4321 (dns block)
• workers.cloudflare.com
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/../astro/bin/astro.mjs check (dns block)
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/../astro/bin/astro.mjs build odules/workerd/bin/workerd (dns block)
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/hyperux/hyperux/node_modules/.bin/../astro/bin/astro.mjs dev --host 0.0.0.0 --port 4321 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)