@unofficialbox/box-open-elements 0.21.0 → 0.23.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.23.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
@@ -75,7 +75,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.23.0/docs/api-guidelines.md).
 
 ## Developing
 
@@ -89,16 +89,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.23.0/docs/README.md). The most important entries:
+
+- [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/taxonomy.md)
+- [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/architecture.md)
+- [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/api-guidelines.md)
+- [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/patterns/catalog.md)
+- [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/integration/frameworks.md)
+- [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/foundations/tokens.md)
+- [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/patterns/content-explorer.md)
+- [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/integration/box-server.md)
+- [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/foundations/motion.md)
 
 ## Contributing
 

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/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 = `

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/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 { 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";

package/dist/components/forms/combobox.js

@@ -1,5 +1,5 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } 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 { boeOverlay, boeRadius } from "../../foundations/geometry/index.js";
 import { parsePlacement, trackAnchor, } from "../../foundations/overlay/index.js";

package/dist/components/forms/date-field.js

@@ -1,5 +1,5 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } 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-date-field";

package/dist/components/forms/dropdown.js

@@ -1,7 +1,7 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
 import { boeControl, boeOverlay, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
 import { FocusRestore, applyRovingTabindex, focusRovingItem, nextRovingIndex, } from "../../foundations/a11y/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";
 import { parsePlacement, trackAnchor, } from "../../foundations/overlay/index.js";
 const DEFAULT_TAG_NAME = "box-dropdown";

package/dist/components/forms/multi-select.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-multi-select";

package/dist/components/forms/number-input.js

@@ -1,5 +1,5 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } 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 { boeControl, boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-number-input";

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

@@ -1,5 +1,5 @@
 import { FORM_ERROR_MESSAGE_ID, FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } 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-radio-group";

package/dist/components/forms/range-slider.js

@@ -1,5 +1,5 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, formDataFromRange, formErrorMessageMarkup, rangeFromFormValue, } from "../../core/index.js";
-import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-range-slider";
 const parseNumber = (value, fallback) => {
     if (value == null || value === "") {

package/dist/components/forms/slider.js

@@ -1,5 +1,5 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
-import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-slider";
 const parseNumber = (value, fallback) => {
     if (value == null || value === "") {

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

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
-import { boeFocusRingShadow } from "../../foundations/tokens/index.js";
+import { boeFocusRingShadow } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-tile-group";
 const escapeHtml = (value) => value
     .replaceAll("&", "&")

package/dist/components/layout/sidebar-toggle-button.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-sidebar-toggle-button";

package/dist/components/navigation/accordion.js

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

package/dist/components/navigation/tabs.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boeControl, 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-tabs";
 const escapeHtml = (value) => value

package/dist/components/output/code-block.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
-import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-code-block";
 const COPY_ICON = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" focusable="false"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5"/><path d="M10.5 3.5v-1a1 1 0 00-1-1h-7a1 1 0 00-1 1v7a1 1 0 001 1h1"/></svg>`;
 const COPIED_ICON = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M3 8.5l3.2 3.2L13 5"/></svg>`;

package/dist/components/overlays/dialog.js

@@ -2,7 +2,7 @@ import { BaseElement } from "../../core/index.js";
 import { dismissModal, promoteModal } from "../../foundations/overlay/index.js";
 import { FocusRestore, trapTabKey } from "../../foundations/a11y/index.js";
 import { boeControl, boeOverlay, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
-import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-dialog";
 const dialogStyles = `
   :host {

package/dist/components/overlays/drawer.js

@@ -2,7 +2,7 @@ import { BaseElement } from "../../core/index.js";
 import { FocusRestore, trapTabKey } from "../../foundations/a11y/index.js";
 import { dismissModal, promoteModal } from "../../foundations/overlay/index.js";
 import { boeControl, boeOverlay, boePanel, boeRadius, boeSpace, } from "../../foundations/geometry/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-drawer";
 const drawerStyles = `
   :host {

package/dist/components/overlays/guide-tooltip.js

@@ -1,7 +1,7 @@
 import { BaseElement } from "../../core/index.js";
 import { dismissPopover, promotePopover } from "../../foundations/overlay/index.js";
 import { boeControl, boeOverlay, 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";
 import { parsePlacement, trackAnchor, } from "../../foundations/overlay/index.js";
 const DEFAULT_TAG_NAME = "box-guide-tooltip";

package/dist/components/overlays/popover.js

@@ -2,7 +2,7 @@ import { BaseElement } from "../../core/index.js";
 import { dismissPopover, promotePopover } from "../../foundations/overlay/index.js";
 import { FocusRestore, getTabbableElements } from "../../foundations/a11y/index.js";
 import { boeControl, boeOverlay, boeRadius } 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";
 import { parsePlacement, trackAnchor, } from "../../foundations/overlay/index.js";
 const DEFAULT_TAG_NAME = "box-popover";

package/dist/components/overlays/tooltip.js

@@ -1,7 +1,7 @@
 import { BaseElement } from "../../core/index.js";
 import { dismissPopover, promotePopover } from "../../foundations/overlay/index.js";
 import { 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-tooltip";
 const DEFAULT_TRIGGER_LABEL = "More information";

package/dist/foundations/motion/scroll-pin.d.ts

@@ -1,16 +1,24 @@
+export interface ScrollPinState {
+    pinned: boolean;
+    behind: boolean;
+}
 /** Scroll following is changed by user intent, never by resize-induced scroll events. */
 export declare class ScrollPinController {
     private readonly viewport;
     private readonly onChange;
     pinned: boolean;
+    behind: boolean;
     private cleanup;
     private observer?;
     private pointer;
     private lastTop;
+    private lastHeight;
+    private content;
+    private lastNotified?;
     private touchY;
-    constructor(viewport: HTMLElement, onChange?: (showJump: boolean) => void);
+    constructor(viewport: HTMLElement, onChange?: (state: ScrollPinState) => void);
     connect(content?: Element): void;
-    private atBottom;
+    atBottom(): boolean;
     private notify;
     unpin(): void;
     contentChanged(newMessage?: boolean): void;