@unofficialbox/box-open-elements 0.28.0 → 0.28.1

package/README.md

@@ -12,7 +12,7 @@
 
 Browse the full catalog on the **[live docs site](https://unofficialbox.github.io/box-open-elements)** — live previews, an events/properties inspector, per-framework code snippets (React / Angular / Vue / Svelte / HTML), and the foundations pages.
 
-The library is organized around three layers (see [taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/taxonomy.md) for the canonical model):
+The library is organized around three layers (see [taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/taxonomy.md) for the canonical model):
 
 - **Foundations** — design decisions as data: tokens, color, typography, iconography, accessibility, theming
 - **Components** — accessible Web Components for single controls, organized by category
@@ -77,7 +77,7 @@ selection.toggleSelection("1");
 - optimized component entrypoints: `@unofficialbox/box-open-elements/<name>`
 - patterns: `@unofficialbox/box-open-elements/patterns/<area>` and `@unofficialbox/box-open-elements/patterns/<area>/<module>`
 
-See the versioned [API guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/api-guidelines.md).
+See the versioned [API guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/api-guidelines.md).
 
 ## Developing
 
@@ -91,17 +91,17 @@ bun run docs     # build + serve the docs site at http://localhost:4600
 
 ## Documentation
 
-The versioned docs index is at [docs/README.md](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/README.md). The most important entries:
-
-- [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/taxonomy.md)
-- [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/architecture.md)
-- [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/api-guidelines.md)
-- [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/patterns/catalog.md)
-- [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/integration/frameworks.md)
-- [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/foundations/tokens.md)
-- [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/patterns/content-explorer.md)
-- [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/integration/box-server.md)
-- [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.28.0/docs/foundations/motion.md)
+The versioned docs index is at [docs/README.md](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/README.md). The most important entries:
+
+- [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/taxonomy.md)
+- [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/architecture.md)
+- [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/api-guidelines.md)
+- [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/patterns/catalog.md)
+- [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/integration/frameworks.md)
+- [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/foundations/tokens.md)
+- [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/patterns/content-explorer.md)
+- [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/integration/box-server.md)
+- [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.28.1/docs/foundations/motion.md)
 
 ## Contributing
 

package/dist/components/feedback/progress-steps.d.ts

@@ -3,11 +3,12 @@ import { BaseElement } from "../../core/index.js";
  * Explicit per-step status. Absent means the step derives complete / current /
  * upcoming from its position relative to `value` — the behaviour existing
  * hosts rely on. An explicit status wins over the positional derivation:
- * `complete` marks out-of-order completion, `blocked` and `disabled` make the
+ * `complete` marks out-of-order completion, `visited` marks a reached step
+ * without claiming it passed validation, `blocked` and `disabled` make the
  * step non-interactive, `failed` stays interactive because a failed step is
  * usually exactly where the user needs to go.
  */
-export type ProgressStepStatus = "complete" | "blocked" | "failed" | "disabled";
+export type ProgressStepStatus = "complete" | "visited" | "blocked" | "failed" | "disabled";
 export interface ProgressStepItem {
     description?: string;
     label: string;

package/dist/components/feedback/progress-steps.js

@@ -8,7 +8,7 @@ const escapeHtml = (value) => value
     .replaceAll(">", ">")
     .replaceAll('"', """)
     .replaceAll("'", "'");
-const STEP_STATUSES = new Set(["complete", "blocked", "failed", "disabled"]);
+const STEP_STATUSES = new Set(["complete", "visited", "blocked", "failed", "disabled"]);
 /** Attribute payloads are author input — validate every record. */
 export const isProgressStepRecord = (value) => {
     if (typeof value !== "object" || value === null) {
@@ -46,6 +46,7 @@ export const resolveStepStates = (items, value) => {
 /** Every state in words — colour never carries the meaning alone. */
 export const STEP_STATE_LABEL = {
     complete: "Complete",
+    visited: "Visited",
     current: "Current step",
     upcoming: "Not started",
     blocked: "Blocked",
@@ -141,6 +142,12 @@ const progressStepsStyles = `
     color: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 62%, var(--boe-token-text-text, #222222));
   }
 
+  [part="step"][data-state="visited"] [part="marker"] {
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 30%, transparent);
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 9%, var(--boe-token-surface-surface, #ffffff));
+    color: var(--boe-token-text-text, #222222);
+  }
+
   [part="step"][data-state="current"] [part="marker"] {
     border-color: transparent;
     background: var(--boe-token-surface-surface-brand, #0061d5);

package/dist/patterns/form-wizard/form-wizard.js

@@ -455,11 +455,19 @@ export class FormWizard extends BaseElement {
         this.suppressRailEvent = true;
         try {
             this.railEl.label = this.heading ? `${this.heading} steps` : "Wizard steps";
-            this.railEl.items = steps.map(step => ({
-                label: step.label,
-                value: step.id,
-                ...(step.description ? { description: step.description } : {}),
-            }));
+            const furthestVisitedIndex = Math.max(-1, ...steps.map((step, index) => state?.visitedStepIds.includes(step.id) ? index : -1));
+            this.railEl.items = steps.map((step, index) => {
+                const visited = state?.visitedStepIds.includes(step.id) ?? false;
+                const status = visited && step.id !== state?.currentStepId
+                    ? (index < furthestVisitedIndex || step.optional || state?.submitted ? "complete" : "visited")
+                    : undefined;
+                return {
+                    label: step.label,
+                    value: step.id,
+                    ...(step.description ? { description: step.description } : {}),
+                    ...(status ? { status } : {}),
+                };
+            });
             if (state && this.railEl.value !== state.currentStepId) {
                 this.railEl.value = state.currentStepId;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unofficialbox/box-open-elements",
-  "version": "0.28.0",
+  "version": "0.28.1",
   "description": "Box Open Elements: an open, framework-agnostic design system and web component library for Box-style experiences",
   "license": "MIT",
   "homepage": "https://unofficialbox.github.io/box-open-elements",