@unofficialbox/box-open-elements 0.22.0 → 0.24.0

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 [docs/taxonomy.md](./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.24.0/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
@@ -21,6 +21,8 @@ The library is organized around three layers (see [docs/taxonomy.md](./docs/taxo
 Core implementation principles:
 
 - plain TypeScript modules, no React requirement in the core package — zero runtime dependencies
+- Optional `code-editor` entrypoint uses CodeMirror 6; its dependencies are not
+  loaded by the root catalog or other component imports.
 - state and business logic separate from rendering: controllers and stores, not framework components
 - standard DOM events where a UI layer needs them
 - accessibility semantics and keyboard support as part of the component contract
@@ -75,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 [docs/api-guidelines.md](./docs/api-guidelines.md).
+See the versioned [API guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/api-guidelines.md).
 
 ## Developing
 
@@ -89,16 +91,17 @@ bun run docs     # build + serve the docs site at http://localhost:4600
 
 ## Documentation
 
-The docs index is at [docs/README.md](./docs/README.md). The most important entries:
-
-- [Taxonomy](./docs/taxonomy.md)
-- [Architecture](./docs/architecture.md)
-- [API Guidelines](./docs/api-guidelines.md)
-- [Components catalog](./docs/components/catalog.md) and [patterns catalog](./docs/patterns/catalog.md)
-- [Using with React, Angular, Vue, and Svelte](./docs/integration/frameworks.md)
-- [Design Tokens](./docs/foundations/tokens.md)
-- [Content Explorer](./docs/patterns/content-explorer.md)
-- [Box Server Integration](./docs/integration/box-server.md)
+The versioned docs index is at [docs/README.md](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/README.md). The most important entries:
+
+- [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/taxonomy.md)
+- [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/architecture.md)
+- [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/api-guidelines.md)
+- [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/patterns/catalog.md)
+- [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/integration/frameworks.md)
+- [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/foundations/tokens.md)
+- [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/patterns/content-explorer.md)
+- [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/integration/box-server.md)
+- [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/foundations/motion.md)
 
 ## Contributing
 

package/dist/components/actions/button.js

@@ -64,7 +64,7 @@ const buttonStyles = `
     outline: none;
     background: var(--boe-token-surface-surface-brand-hover, #006ae9);
     border-color: var(--boe-token-surface-surface-brand, #0061d5);
-    box-shadow: ${boeControl.primaryFocusShadow};
+    box-shadow: 0 0 0 2px var(--boe-token-surface-surface, #ffffff), 0 0 0 5px var(--boe-token-surface-surface-brand, #0061d5);
   }
 
   button[data-tone="neutral"] {
@@ -86,7 +86,7 @@ const buttonStyles = `
 
   button[data-tone="neutral"]:focus-visible {
     border-color: var(--boe-token-text-text, #222222);
-    box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
+    box-shadow: 0 0 0 2px var(--boe-token-surface-surface, #ffffff), 0 0 0 5px var(--boe-token-surface-surface-brand, #0061d5);
   }
 
   button[data-tone="danger"] {
@@ -106,7 +106,7 @@ const buttonStyles = `
   }
 
   button[data-tone="danger"]:focus-visible {
-    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 80%), 0 1px 2px rgb(0 0 0 / 10%);
+    box-shadow: 0 0 0 2px var(--boe-token-surface-surface, #ffffff), 0 0 0 5px var(--boe-token-surface-surface-brand, #0061d5);
   }
 
   button[data-size="small"] {

package/dist/components/actions/menu-item.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boeControl, boeOverlay } from "../../foundations/geometry/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-menu-item";
 const menuItemStyles = `

package/dist/components/actions/menu.js

@@ -1,7 +1,7 @@
 import { BaseElement } from "../../core/index.js";
 import { applyRovingTabindex, focusRovingItem, nextRovingIndex, } from "../../foundations/a11y/index.js";
 import { boeControl, boeOverlay, boeSpace } from "../../foundations/geometry/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-menu";
 const escapeHtml = (value) => value

package/dist/components/actions/segmented-control.d.ts

@@ -9,6 +9,7 @@ export declare class SegmentedControl extends BaseElement {
     static get observedAttributes(): string[];
     private valueInternal;
     private controlEl;
+    private renderedOptions;
     get disabled(): boolean;
     set disabled(value: boolean);
     get label(): string;

package/dist/components/actions/segmented-control.js

@@ -84,6 +84,7 @@ export class SegmentedControl extends BaseElement {
     }
     valueInternal = "";
     controlEl;
+    renderedOptions = "";
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -121,17 +122,17 @@ export class SegmentedControl extends BaseElement {
         }
     }
     set options(value) {
-        this.setAttribute("options", JSON.stringify(value));
+        const serialized = JSON.stringify(value);
+        if (serialized !== this.getAttribute("options"))
+            this.setAttribute("options", serialized);
     }
     get value() {
         return this.valueInternal;
     }
     set value(nextValue) {
-        this.valueInternal = nextValue;
+        if (nextValue === this.valueInternal)
+            return;
         this.setAttribute("value", nextValue);
-        if (this.isRendered) {
-            this.update();
-        }
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (name === "value") {
@@ -198,7 +199,20 @@ export class SegmentedControl extends BaseElement {
         this.controlEl.dataset.layout = this.layout;
         this.controlEl.setAttribute("aria-label", this.label);
         this.controlEl.setAttribute("aria-disabled", String(this.disabled));
-        // Rebuild segments (count may change)
+        const serialized = JSON.stringify(options);
+        if (serialized === this.renderedOptions) {
+            this.controlEl.querySelectorAll('[part="segment"]').forEach((button, index) => {
+                const selected = options[index].value === selectedValue;
+                button.dataset.layout = this.layout;
+                button.dataset.selected = String(selected);
+                button.setAttribute("aria-checked", String(selected));
+                button.tabIndex = selected ? 0 : -1;
+                button.disabled = this.disabled || Boolean(options[index].disabled);
+            });
+            return;
+        }
+        this.renderedOptions = serialized;
+        // Rebuild only when the options themselves change.
         this.controlEl.innerHTML = options
             .map((option, index) => {
             const position = options.length === 1

package/dist/components/collections/carousel.js

@@ -1,5 +1,5 @@
 import { BaseElement } from "../../core/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-carousel";

package/dist/components/collections/draggable-list.js

@@ -1,5 +1,5 @@
 import { BaseElement } from "../../core/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-draggable-list";
 const escapeHtml = (value) => value

package/dist/components/collections/grid-view.js

@@ -1,5 +1,5 @@
 import { BaseElement } from "../../core/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
 import { boxIconography } from "../../foundations/icons/index.js";

package/dist/components/collections/pagination.js

@@ -1,5 +1,5 @@
 import { BaseElement } from "../../core/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-pagination";

package/dist/components/collections/result-blocks.d.ts

@@ -1,5 +1,11 @@
 import { BaseElement } from "../../core/element.js";
 export type CheckStatus = "pass" | "warn" | "fail" | "info";
+export type ResultLabels = Record<CheckStatus, string>;
+export interface ResultRenderOptions {
+    labels?: Partial<ResultLabels>;
+    linkSuffix?: string;
+    selectableDocuments?: boolean;
+}
 export type ResultBlock = {
     id?: string;
 } & ({
@@ -40,13 +46,19 @@ export type ResultBlock = {
 });
 export declare const resultDocumentIds: (blocks: readonly ResultBlock[]) => string[];
 /** Pure escaped renderer also usable by host-composed conversations. */
-export declare function renderResultBlock(block: ResultBlock): string;
+export declare function renderResultBlock(block: ResultBlock, options?: ResultRenderOptions): string;
 export declare const resultBlockStyles: string;
 export declare class ResultBlocks extends BaseElement {
     static readonly tagName: string;
+    static get observedAttributes(): string[];
     private value;
+    private verdictLabels;
     get blocks(): ResultBlock[];
     set blocks(value: ResultBlock[]);
+    get labels(): Partial<ResultLabels>;
+    set labels(value: Partial<ResultLabels>);
+    get selectableDocuments(): boolean;
+    set selectableDocuments(value: boolean);
     get documentIds(): string[];
     protected renderTemplate(): void;
     protected setupListeners(): void;

package/dist/components/collections/result-blocks.js

@@ -1,28 +1,30 @@
 import { BaseElement } from "../../core/element.js";
 import { isSafeHref } from "../../patterns/internal/safe-href.js";
-import { boeStatusGlyph, boeStatusStyles, statusLabel, toStatusKind } from "../../foundations/status/index.js";
+import { boeStatusGlyph, boeStatusStyles, toStatusKind } from "../../foundations/status/index.js";
 import { boeEntrance, boeEntranceKeyframes, boeReducedMotionPolicy, boeStaggerStyles } from "../../foundations/motion/index.js";
 const escape = (s) => s.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
-const verdict = (s) => ({ pass: "Within policy", warn: "Needs exception", fail: "Outside policy", info: "Information" })[s];
+const defaultLabels = { pass: "Within policy", warn: "Needs exception", fail: "Outside policy", info: "Information" };
+const verdict = (s, labels = {}) => labels[s] ?? defaultLabels[s];
 const glyph = (s) => boeStatusGlyph(toStatusKind(s));
 export const resultDocumentIds = (blocks) => [...new Set(blocks.flatMap(b => b.type === "documents" ? b.items.map(i => i.id) : []))];
 /** Pure escaped renderer also usable by host-composed conversations. */
-export function renderResultBlock(block) {
+export function renderResultBlock(block, options = {}) {
     const heading = block.title ? `<h3 part="title">${escape(block.title)}</h3>` : "";
     if (block.type === "facts")
         return `${heading}<dl part="facts">${block.rows.map(r => `<div part="row"><dt>${escape(r.label)}</dt><dd>${escape(r.value)}</dd></div>`).join("")}</dl>`;
     if (block.type === "checks")
-        return `${heading}<ul part="checks">${block.rows.map(r => `<li part="row">${glyph(r.status)}<div><strong>${escape(r.label)}</strong>${r.detail ? `<p>${escape(r.detail)}</p>` : ""}</div><span part="verdict" data-status="${r.status}">${escape(r.value ?? verdict(r.status))}</span></li>`).join("")}</ul>`;
+        return `${heading}<ul part="checks">${block.rows.map(r => `<li part="row">${glyph(r.status)}<div><strong>${escape(r.label)}</strong>${r.detail ? `<p>${escape(r.detail)}</p>` : ""}</div><span part="verdict" data-status="${r.status}">${escape(r.value ?? verdict(r.status, options.labels))}</span></li>`).join("")}</ul>`;
     if (block.type === "documents")
         return `${heading}<ul part="documents">${block.items.map(i => {
             const content = `<svg aria-hidden="true" width="16" height="20" viewBox="0 0 16 20"><path d="M2 1h8l4 4v14H2zM10 1v5h4" fill="none" stroke="currentColor"/></svg><span><strong>${escape(i.name)}</strong>${i.detail ? `<small>${escape(i.detail)}</small>` : ""}</span>`;
-            return `<li part="row">${i.href && isSafeHref(i.href) ? `<a part="document" data-document-id="${escape(i.id)}" href="${escape(i.href)}" target="_blank" rel="noopener noreferrer">${content}</a>` : `<button part="document" data-document-id="${escape(i.id)}">${content}</button>`}</li>`;
+            const link = i.href && isSafeHref(i.href);
+            return `<li part="row">${link ? `<a part="document" data-document-id="${escape(i.id)}" href="${escape(i.href)}" target="_blank" rel="noopener noreferrer">${content}<span part="external" aria-hidden="true">↗</span><span class="sr">${escape(options.linkSuffix ?? " (opens in new tab)")}</span></a>` : options.selectableDocuments ? `<button part="document" data-document-id="${escape(i.id)}">${content}</button>` : `<span part="document">${content}</span>`}</li>`;
         }).join("")}</ul>`;
-    return `${heading}<div part="table-frame" role="region" aria-label="${escape(block.title ?? "Results")}" tabindex="0"><table><thead><tr>${block.columns.map(c => `<th scope="col">${escape(c)}</th>`).join("")}</tr></thead><tbody>${block.rows.map(r => `<tr>${r.cells.map((cell, index) => index === 0 ? `<th scope="row">${r.status ? `${glyph(r.status)}<span class="sr">${statusLabel(toStatusKind(r.status))}: </span>` : ""}${escape(cell)}${r.note ? `<small>${escape(r.note)}</small>` : ""}</th>` : `<td>${escape(cell)}</td>`).join("")}</tr>`).join("")}</tbody></table></div>${block.footnote ? `<p>${escape(block.footnote)}</p>` : ""}`;
+    return `${heading}<div part="table-frame" role="region" aria-label="${escape(block.title ?? "Results")}" tabindex="0"><table><thead><tr>${block.columns.map(c => `<th scope="col">${escape(c)}</th>`).join("")}</tr></thead><tbody>${block.rows.map(r => `<tr>${r.cells.map((cell, index) => index === 0 ? `<th scope="row">${r.status ? glyph(r.status) : ""}${escape(cell)}${r.note ? `<small>${escape(r.note)}</small>` : r.status ? `<span class="sr"> (${escape(verdict(r.status, options.labels))})</span>` : ""}</th>` : `<td>${escape(cell)}</td>`).join("")}</tr>`).join("")}</tbody></table></div>${block.footnote ? `<p>${escape(block.footnote)}</p>` : ""}`;
 }
 export const resultBlockStyles = `
 :host { display:block; min-width:0; color:var(--boe-token-text-text,#222); font:inherit; }
-:host([hidden]){display:none !important} *{box-sizing:border-box} h3{font-size:1em;margin:0 0 .5rem} dl,ul{padding:0;margin:0;list-style:none}
+:host([hidden]){display:none !important} *{box-sizing:border-box} h3{font-size:var(--boe-result-title-size,1em);margin:0 0 .5rem} :host([title-style="eyebrow"]) h3{font-size:.72em;letter-spacing:.08em;text-transform:uppercase;color:var(--boe-token-text-text-secondary,#666)} dl,ul{padding:0;margin:0;list-style:none}
 [part="row"]{border-bottom:1px solid var(--boe-token-stroke-stroke,#ddd);padding:.7rem 0;display:flex;gap:.6rem;align-items:baseline}
 dt{color:var(--boe-token-text-text-secondary,#666)} dd{margin:0 0 0 auto;font-variant-numeric:tabular-nums}
 [part="facts"] [part="row"]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow-wrap:anywhere}
@@ -31,17 +33,25 @@ dt{color:var(--boe-token-text-text-secondary,#666)} dd{margin:0 0 0 auto;font-va
 p{margin:.25rem 0;color:var(--boe-token-text-text-secondary,#666)} small{display:block;font-weight:normal;color:var(--boe-token-text-text-secondary,#666)}
 [part="verdict"]{margin-left:auto;text-align:right} [data-status="warn"]{color:var(--boe-token-text-status-text-warning,#946400)} [data-status="fail"]{color:var(--boe-token-text-status-text-error,#c52a46)}
 [part="document"]{display:flex;gap:.6rem;align-items:center;width:100%;text-align:left;color:inherit;font:inherit;background:none;border:0;text-decoration:none;cursor:pointer}
-[part="table-frame"]{overflow:auto;max-width:100%} table{border-collapse:collapse;min-width:100%;font-variant-numeric:tabular-nums} td,th{padding:.7rem;text-align:left;border-bottom:1px solid var(--boe-token-stroke-stroke,#ddd)} td:last-child{font-weight:600;background:var(--boe-token-surface-surface-secondary,#f7f7f7)}
+span[part="document"]{cursor:default}
+[part="table-frame"]{overflow:auto;max-width:100%} table{border-collapse:collapse;min-width:100%;font-variant-numeric:tabular-nums} td,th{padding:.7rem;text-align:left;border-bottom:1px solid var(--boe-token-stroke-stroke,#ddd)} td:last-child{font-weight:600}
 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 [part="block"]{${boeEntrance()}${boeStaggerStyles};margin-block:1rem;min-width:0;container:boe-result-block / inline-size}
 ${boeEntranceKeyframes}${boeStatusStyles}${boeReducedMotionPolicy}`;
 const DEFAULT_TAG_NAME = "box-result-blocks";
 export class ResultBlocks extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() { return ["title-style", "link-suffix", "selectable-documents"]; }
     value = [];
+    verdictLabels = {};
     get blocks() { return this.value; }
     set blocks(value) { this.value = value; if (this.isRendered)
         this.update(); }
+    get labels() { return this.verdictLabels; }
+    set labels(value) { this.verdictLabels = value; if (this.isRendered)
+        this.update(); }
+    get selectableDocuments() { return this.hasAttribute("selectable-documents"); }
+    set selectableDocuments(value) { this.toggleAttribute("selectable-documents", value); }
     get documentIds() { return resultDocumentIds(this.value); }
     renderTemplate() { this.shadowRoot.innerHTML = `<style>${resultBlockStyles}</style><div part="blocks"></div>`; }
     setupListeners() {
@@ -55,15 +65,17 @@ export class ResultBlocks extends BaseElement {
         const parent = this.shadowRoot.querySelector('[part="blocks"]');
         this.value.forEach((block, index) => {
             let node = parent.children[index];
-            const signature = JSON.stringify(block);
+            const options = { labels: this.verdictLabels, linkSuffix: this.getAttribute("link-suffix") ?? undefined, selectableDocuments: this.selectableDocuments };
+            const signature = JSON.stringify([block, options]);
             if (!node) {
                 node = document.createElement("section");
                 node.setAttribute("part", "block");
                 parent.append(node);
             }
+            node.setAttribute("aria-label", block.title ?? ({ facts: "Facts", checks: "Checks", table: "Results", documents: "Documents" }[block.type]));
             node.style.setProperty("--i", String(index));
             if (node.dataset.signature !== signature) {
-                node.innerHTML = renderResultBlock(block);
+                node.innerHTML = renderResultBlock(block, options);
                 node.dataset.signature = signature;
             }
         });

package/dist/components/collections/tree-grid.js

@@ -1,5 +1,5 @@
 import { BaseElement } from "../../core/index.js";
-import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-tree-grid";

package/dist/components/feedback/alert.js

@@ -2,7 +2,7 @@ import { BaseElement } from "../../core/index.js";
 import { FeedbackAnnouncement } from "../../foundations/a11y/announcer.js";
 import { toneAccessibleLabel, toneIcon } from "./tone.js";
 import { boeRadius, boeSpace } from "../../foundations/geometry/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-alert";
 const alertStyles = `
@@ -131,7 +131,7 @@ const alertStyles = `
     border: 0;
     border-radius: ${boeRadius.med};
     background: transparent;
-    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    color: var(--boe-token-text-text, #222222);
     font: inherit;
     font-size: 13px;
     font-weight: 700;

package/dist/components/feedback/chip.js

@@ -1,5 +1,5 @@
 import { BaseElement } from "../../core/index.js";
-import { boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+import { boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-chip";
 const chipStyles = `

package/dist/components/feedback/empty-state.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
-import { boeBrandInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeBrandInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-empty-state";
 const emptyStateStyles = `

package/dist/components/feedback/nudge.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
-import { boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+import { boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-nudge";
 const nudgeStyles = `
   :host {

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

@@ -30,8 +30,8 @@ const progressBarStyles = `
   [part="label"] {
     font-size: 0.8rem;
     font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
+    letter-spacing: normal;
+    text-transform: none;
     color: var(--boe-token-text-text-secondary, #6f6f6f);
   }
 

package/dist/components/feedback/status-icon.d.ts

@@ -5,6 +5,8 @@ export declare class StatusIcon extends BaseElement {
     static get observedAttributes(): string[];
     get kind(): StatusKind;
     set kind(value: StatusKind);
+    get label(): string;
+    set label(value: string);
     protected renderTemplate(): void;
     protected update(): void;
 }

package/dist/components/feedback/status-icon.js

@@ -1,16 +1,17 @@
 import { BaseElement } from "../../core/element.js";
-import { boeStatusGlyph, boeStatusStyles, statusLabel, toStatusKind } from "../../foundations/status/index.js";
-import { boeEntranceKeyframes, boeReducedMotionPolicy } from "../../foundations/motion/index.js";
+import { boeStatusDocumentStyles, boeStatusGlyph, statusLabel, toStatusKind } from "../../foundations/status/index.js";
 const DEFAULT_TAG_NAME = "box-status-icon";
 export class StatusIcon extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
-    static get observedAttributes() { return ["kind"]; }
+    static get observedAttributes() { return ["kind", "label"]; }
     get kind() { return toStatusKind(this.getAttribute("kind") ?? "pending"); }
     set kind(value) { this.setAttribute("kind", value); }
+    get label() { return this.getAttribute("label") ?? statusLabel(this.kind); }
+    set label(value) { this.setAttribute("label", value); }
     renderTemplate() {
         this.shadowRoot.innerHTML = `<style>:host{display:inline-flex} :host([hidden]){display:none !important}
     .label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
-    ${boeEntranceKeyframes}${boeStatusStyles}${boeReducedMotionPolicy}</style><span part="glyph"></span><span class="label" part="label"></span>`;
+    ${boeStatusDocumentStyles}</style><span part="glyph"></span><span class="label" part="label"></span>`;
     }
     update() {
         if (!this.isRendered)
@@ -20,7 +21,7 @@ export class StatusIcon extends BaseElement {
             glyph.setAttribute("data-kind", this.kind);
             glyph.innerHTML = boeStatusGlyph(this.kind);
         }
-        this.shadowRoot.querySelector('[part="label"]').textContent = statusLabel(this.kind);
+        this.shadowRoot.querySelector('[part="label"]').textContent = this.label;
     }
 }
 StatusIcon.register();

package/dist/components/feedback/toast.js

@@ -2,7 +2,7 @@ import { BaseElement } from "../../core/index.js";
 import { FeedbackAnnouncement } from "../../foundations/a11y/announcer.js";
 import { toneAccessibleLabel, toneIcon } from "./tone.js";
 import { boeRadius, boeSpace } from "../../foundations/geometry/index.js";
-import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-toast";
 const TOAST_MODES = new Set(["dismissible", "sticky"]);

package/dist/components/files/drop-zone.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { captureDropEntries, collectEntries, entriesFromFileList, } from "../../foundations/files/index.js";
-import { boeFocusRingShadow, boeFocusVisibleStyles, } from "../../foundations/tokens/index.js";
+import { boeFocusRingShadow, boeFocusVisibleStyles, } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-drop-zone";

package/dist/components/forms/category-selector.js

@@ -1,7 +1,7 @@
 import { BaseElement } from "../../core/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boeOverlay, boeRadius } from "../../foundations/geometry/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { parsePlacement, trackAnchor, } from "../../foundations/overlay/index.js";
 const DEFAULT_TAG_NAME = "box-category-selector";
 const escapeHtml = (value) => value

package/dist/components/forms/checkbox-group.js

@@ -1,5 +1,5 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, formDataFromNamedValues, formErrorMessageMarkup, stringValuesFromFormValue, } from "../../core/index.js";
-import { boeFocusRingShadow, boeFocusVisibleStyles, } from "../../foundations/tokens/index.js";
+import { boeFocusRingShadow, boeFocusVisibleStyles, } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-checkbox-group";

package/dist/components/forms/checkbox.js

@@ -1,5 +1,5 @@
-import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
-import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/interaction.js";
 import { boeControl, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-checkbox";
@@ -86,12 +86,13 @@ const checkboxStyles = `
   }
 
   ${boeFormFieldErrorStyles}
+  ${boeFormFieldSupportStyles}
 `;
 export class Checkbox extends FormAssociatedElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
-            ...FormAssociatedElement.formObservedAttributes,
+            ...FormAssociatedElement.fieldObservedAttributes,
             "checked",
             "description",
             "disabled",
@@ -288,6 +289,7 @@ export class Checkbox extends FormAssociatedElement {
         }
         this.inputEl.setAttribute("aria-label", this.label);
         this.labelEl.textContent = this.label;
+        this.applyFieldSupport(this.labelEl, this.inputEl, null);
         const description = this.description;
         if (description) {
             this.descriptionEl.hidden = false;

package/dist/components/forms/code-editor.d.ts

@@ -0,0 +1,61 @@
+import { BaseElement } from "../../core/index.js";
+import { type Completion } from "@codemirror/autocomplete";
+export interface CodeProblem {
+    /** One-based line and column positions. */
+    line: number;
+    col?: number;
+    endCol?: number;
+    message: string;
+    tone: "error" | "warning" | "info";
+}
+export type CodeCompletion = Completion;
+export interface CodeSelection {
+    anchor: number;
+    head: number;
+}
+/** Optional CodeMirror entrypoint. Import `code-editor`, not the root catalog. */
+export declare class CodeEditor extends BaseElement {
+    static readonly tagName = "box-code-editor";
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private problemsInternal;
+    private completionsInternal;
+    private view?;
+    private languageConfig;
+    private readonlyConfig;
+    private completionsConfig;
+    private timer?;
+    private pending;
+    private syncing;
+    private problemIndex;
+    private savedSelection;
+    private escapeUntil;
+    get value(): string;
+    set value(value: string);
+    get language(): string;
+    set language(value: string);
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get problems(): readonly CodeProblem[];
+    set problems(value: readonly CodeProblem[]);
+    get completions(): readonly CodeCompletion[];
+    set completions(value: readonly CodeCompletion[]);
+    get selection(): CodeSelection;
+    set selection(value: CodeSelection);
+    revealLine(line: number): void;
+    focus(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private languageExtension;
+    private completionExtension;
+    protected update(): void;
+    private flushChange;
+    private diagnostics;
+    private syncProblems;
+    navigateProblem(direction: number): void;
+}