@unofficialbox/box-open-elements 0.10.0 → 0.11.0

package/dist/components/feedback/tone.js

@@ -0,0 +1,31 @@
+/**
+ * The status vocabulary shared by the feedback surfaces.
+ *
+ * `box-alert` and `box-toast` both state their tone in words for screen
+ * readers, and both must say the *same* words: a reader who hears "In progress"
+ * from an alert should not hear "Inprogress" from a toast reporting the same
+ * thing. One definition is what keeps them in step.
+ */
+/**
+ * The tone as a word, for assistive technology.
+ *
+ * Tone is otherwise carried by fill and glyph, neither of which reaches a
+ * screen reader. An unrecognised tone is title-cased rather than dropped —
+ * a host that invents a tone should still get something spoken.
+ */
+export const toneAccessibleLabel = (tone) => {
+    switch (tone) {
+        case "success":
+            return "Success";
+        case "error":
+            return "Error";
+        case "warning":
+            return "Warning";
+        case "inprogress":
+            return "In progress";
+        case "info":
+            return "Info";
+        default:
+            return tone.charAt(0).toUpperCase() + tone.slice(1);
+    }
+};

package/dist/components/layout/grid.d.ts

@@ -0,0 +1,41 @@
+import { BaseElement } from "../../core/index.js";
+/**
+ * Adobe Spectrum's responsive grid, for laying out arbitrary content.
+ *
+ * Twelve columns by default, with gutters stepping 16 → 24 → 32 → 40 → 48px
+ * across Spectrum's breakpoints. Children declare their own placement:
+ *
+ * ```html
+ * <box-grid columns="12">
+ *   <article data-span="8">Main</article>
+ *   <aside data-span="4">Sidebar</aside>
+ *   <footer data-span="6" data-offset="3">Centred</footer>
+ * </box-grid>
+ * ```
+ *
+ * Placement lives on the children rather than in a payload on the host,
+ * because the children are arbitrary content the author already writes — an
+ * `items` array would have to address them positionally and would silently
+ * mis-place everything the moment one was inserted.
+ *
+ * `data-offset` sets an explicit `grid-column-start`. That is the author's
+ * stated intent here, unlike `box-skeleton`, which generates its own regions
+ * and uses spacers so auto-placement is not disturbed.
+ */
+export declare class Grid extends BaseElement {
+    static readonly tagName: string;
+    static get observedAttributes(): string[];
+    private gridEl;
+    /** Columns in the grid. Defaults to Spectrum's twelve. */
+    get columns(): number;
+    set columns(value: number);
+    /**
+     * Height of one row. Unset by default: a layout grid's rows should be as
+     * tall as their content, and pinning them would crop it.
+     */
+    get rowHeight(): string;
+    set rowHeight(value: string);
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}

package/dist/components/layout/grid.js

@@ -0,0 +1,152 @@
+import { BaseElement } from "../../core/index.js";
+import { BOE_GRID_COLUMNS, BOE_GRID_GUTTER_PROPERTY, boeGridGutterStyles, resolveGridCount, } from "../../foundations/layout/index.js";
+const DEFAULT_TAG_NAME = "box-grid";
+/**
+ * How far a child's placement attributes are honoured.
+ *
+ * Placement is expressed in CSS rules generated per value, not computed per
+ * element, so the ceiling is a real limit rather than a guess. Twenty-four
+ * covers a twelve-column grid used at double density without emitting rules
+ * nobody will match.
+ */
+const MAX_TRACKS = 24;
+/**
+ * Placement rules, one per value.
+ *
+ * A slotted child cannot be given a computed `grid-column` without writing to
+ * the light DOM, which is the host's tree, not ours. Generating a rule per
+ * value keeps placement declarative and leaves the author's markup untouched.
+ *
+ * `grid-column-start` and `grid-column-end` are set by separate rules on
+ * purpose: they compose, so offset and span combine without needing a rule for
+ * every offset × span pair.
+ */
+const placementRules = () => {
+    const rules = [];
+    for (let value = 1; value <= MAX_TRACKS; value += 1) {
+        rules.push(`  ::slotted([data-span="${value}"]) { grid-column-end: span ${value}; }`);
+        rules.push(`  ::slotted([data-row-span="${value}"]) { grid-row: span ${value}; }`);
+    }
+    for (let value = 1; value < MAX_TRACKS; value += 1) {
+        // An offset of N starts the region at column N + 1.
+        rules.push(`  ::slotted([data-offset="${value}"]) { grid-column-start: ${value + 1}; }`);
+    }
+    return rules.join("\n");
+};
+const elementStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+${boeGridGutterStyles(":host")}
+
+  [part="grid"] {
+    display: grid;
+    grid-template-columns: repeat(var(--boe-grid-columns, ${BOE_GRID_COLUMNS}), minmax(0, 1fr));
+    gap: var(${BOE_GRID_GUTTER_PROPERTY});
+  }
+
+  /* Rows are only constrained when the author asks for them; otherwise each
+     row is as tall as its content, which is what a layout grid should do.
+     Spectrum's layout regions have no intrinsic height either — at minimum
+     they are as tall as the components inside them. */
+  :host([row-height]) [part="grid"] {
+    grid-auto-rows: var(--boe-grid-row-height);
+  }
+
+  /* Without this the slot itself is the grid item and every child lands in one
+     cell. display: contents dissolves it, so the assigned children become the
+     grid's own items. */
+  slot {
+    display: contents;
+  }
+
+  /* A region with no placement attributes occupies one column, so a bare list
+     of children reads as an even row. */
+  ::slotted(*) {
+    grid-column-end: span 1;
+  }
+
+${placementRules()}
+`;
+/**
+ * Adobe Spectrum's responsive grid, for laying out arbitrary content.
+ *
+ * Twelve columns by default, with gutters stepping 16 → 24 → 32 → 40 → 48px
+ * across Spectrum's breakpoints. Children declare their own placement:
+ *
+ * ```html
+ * <box-grid columns="12">
+ *   <article data-span="8">Main</article>
+ *   <aside data-span="4">Sidebar</aside>
+ *   <footer data-span="6" data-offset="3">Centred</footer>
+ * </box-grid>
+ * ```
+ *
+ * Placement lives on the children rather than in a payload on the host,
+ * because the children are arbitrary content the author already writes — an
+ * `items` array would have to address them positionally and would silently
+ * mis-place everything the moment one was inserted.
+ *
+ * `data-offset` sets an explicit `grid-column-start`. That is the author's
+ * stated intent here, unlike `box-skeleton`, which generates its own regions
+ * and uses spacers so auto-placement is not disturbed.
+ */
+export class Grid extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() {
+        return ["columns", "row-height"];
+    }
+    gridEl;
+    /** Columns in the grid. Defaults to Spectrum's twelve. */
+    get columns() {
+        return resolveGridCount(this.getAttribute("columns"), BOE_GRID_COLUMNS);
+    }
+    set columns(value) {
+        this.setAttribute("columns", String(value));
+    }
+    /**
+     * Height of one row. Unset by default: a layout grid's rows should be as
+     * tall as their content, and pinning them would crop it.
+     */
+    get rowHeight() {
+        return this.getAttribute("row-height") ?? "";
+    }
+    set rowHeight(value) {
+        if (value) {
+            this.setAttribute("row-height", value);
+            return;
+        }
+        this.removeAttribute("row-height");
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `<style>${elementStyles}</style><div part="grid"><slot></slot></div>`;
+        this.gridEl = this.shadowRoot.querySelector('[part="grid"]');
+    }
+    setupListeners() {
+        // Layout only: placement is declared by the children and applied in CSS.
+    }
+    update() {
+        if (!this.gridEl) {
+            return;
+        }
+        this.gridEl.style.setProperty("--boe-grid-columns", String(this.columns));
+        // Via the CSSOM rather than interpolated into markup. Note that custom
+        // properties are *not* validated the way a standard property like `width`
+        // is — they accept almost any token sequence — so this does not sanitise
+        // the value. What makes it safe is that the value never reaches an HTML
+        // string: a nonsensical one makes `grid-auto-rows` invalid at computed-value
+        // time, which falls back to `auto`, and rows simply size to their content.
+        this.gridEl.style.setProperty("--boe-grid-row-height", this.rowHeight);
+    }
+}
+Grid.register();

package/dist/element-maps.d.ts

@@ -48,6 +48,7 @@ import type { DateField } from "./components/forms/date-field.js";
 import type { Dialog } from "./components/overlays/dialog.js";
 import type { DiffViewer } from "./patterns/diff/diff-viewer.js";
 import type { Divider } from "./components/layout/divider.js";
+import type { Grid } from "./components/layout/grid.js";
 import type { DonutChart } from "./patterns/insights/donut-chart.js";
 import type { DraggableList } from "./components/collections/draggable-list.js";
 import type { Drawer } from "./components/overlays/drawer.js";
@@ -124,7 +125,7 @@ import type { Slider } from "./components/forms/slider.js";
 import type { SpinButton } from "./components/forms/spin-button.js";
 import type { Spinner } from "./components/feedback/spinner.js";
 import type { SplitView } from "./components/layout/split-view.js";
-import type { StagePath } from "./components/feedback/stage-path.js";
+import type { Path } from "./components/feedback/path.js";
 import type { Switch } from "./components/forms/switch.js";
 import type { Table } from "./components/collections/table.js";
 import type { Tabs } from "./components/navigation/tabs.js";
@@ -189,6 +190,7 @@ declare global {
         "box-dialog": Dialog;
         "box-diff-viewer": DiffViewer;
         "box-divider": Divider;
+        "box-grid": Grid;
         "box-donut-chart": DonutChart;
         "box-draggable-list": DraggableList;
         "box-drawer": Drawer;
@@ -265,7 +267,7 @@ declare global {
         "box-spin-button": SpinButton;
         "box-spinner": Spinner;
         "box-split-view": SplitView;
-        "box-stage-path": StagePath;
+        "box-path": Path;
         "box-switch": Switch;
         "box-table": Table;
         "box-tabs": Tabs;
@@ -289,4 +291,4 @@ declare global {
     }
 }
 /** Every element tag the library registers, for host-side narrowing. */
-export type BoxElementTagName = "box-access-stats" | "box-accordion" | "box-activity-density" | "box-agent-chat" | "box-alert" | "box-annotation-inspector" | "box-annotation-thread" | "box-annotation-toolbar" | "box-app-shell" | "box-audit-log" | "box-avatar" | "box-badge" | "box-badgeable" | "box-bar-chart" | "box-breadcrumb" | "box-bulk-action-bar" | "box-button" | "box-button-group" | "box-calendar" | "box-card" | "box-carousel" | "box-category-selector" | "box-chart-panel" | "box-checkbox" | "box-checkbox-group" | "box-chip" | "box-collaborator-avatars" | "box-color-picker" | "box-combobox" | "box-command-palette" | "box-compare-view" | "box-contact-datalist-item" | "box-content-explorer" | "box-content-picker" | "box-content-sidebar" | "box-content-uploader" | "box-context-menu" | "box-datalist-item" | "box-date-field" | "box-dialog" | "box-diff-viewer" | "box-divider" | "box-donut-chart" | "box-draggable-list" | "box-drawer" | "box-drop-zone" | "box-dropdown" | "box-dual-listbox" | "box-due-badge" | "box-empty-state" | "box-error-mask" | "box-explorer-action-menu" | "box-explorer-breadcrumbs" | "box-explorer-items" | "box-explorer-list" | "box-explorer-table" | "box-explorer-toolbar" | "box-fieldset" | "box-file-request-builder" | "box-filter-bar" | "box-form-wizard" | "box-governance-panel" | "box-grid-view" | "box-guide-tooltip" | "box-help-text" | "box-icon-button" | "box-illustration" | "box-invite-collaborators-modal" | "box-item-details-panel" | "box-item-form" | "box-line-chart" | "box-lineage-graph" | "box-link-button" | "box-menu" | "box-menu-item" | "box-metadata-filter-builder" | "box-metadata-inspector" | "box-metric-card" | "box-multi-select" | "box-nav-sidebar" | "box-notification-bell" | "box-notification-inbox" | "box-nudge" | "box-number-input" | "box-pagination" | "box-permission-matrix" | "box-persona" | "box-pill-cloud" | "box-pill-selector-dropdown" | "box-popover" | "box-presence" | "box-preview-element" | "box-preview-header" | "box-progress-bar" | "box-progress-ring" | "box-progress-steps" | "box-provenance-strip" | "box-radio-group" | "box-range-slider" | "box-rating" | "box-review-queue-item" | "box-rich-text-input" | "box-run-trace" | "box-saved-view-picker" | "box-search-field" | "box-search-results-header" | "box-section" | "box-segmented-control" | "box-select" | "box-share-panel" | "box-shortcuts-overlay" | "box-sidebar-toggle-button" | "box-signature-ceremony" | "box-skeleton" | "box-slider" | "box-spin-button" | "box-spinner" | "box-split-view" | "box-stage-path" | "box-switch" | "box-table" | "box-tabs" | "box-tag-input" | "box-task-assignment-panel" | "box-text-area" | "box-text-field" | "box-thumbnail-card" | "box-time-field" | "box-timeline" | "box-toast" | "box-tooltip" | "box-tree" | "box-tree-grid" | "box-unified-share-modal" | "box-version-graph" | "box-version-list" | "box-wizard-summary" | "box-work-queue" | "box-workload-board";
+export type BoxElementTagName = "box-access-stats" | "box-accordion" | "box-activity-density" | "box-agent-chat" | "box-alert" | "box-annotation-inspector" | "box-annotation-thread" | "box-annotation-toolbar" | "box-app-shell" | "box-audit-log" | "box-avatar" | "box-badge" | "box-badgeable" | "box-bar-chart" | "box-breadcrumb" | "box-bulk-action-bar" | "box-button" | "box-button-group" | "box-calendar" | "box-card" | "box-carousel" | "box-category-selector" | "box-chart-panel" | "box-checkbox" | "box-checkbox-group" | "box-chip" | "box-collaborator-avatars" | "box-color-picker" | "box-combobox" | "box-command-palette" | "box-compare-view" | "box-contact-datalist-item" | "box-content-explorer" | "box-content-picker" | "box-content-sidebar" | "box-content-uploader" | "box-context-menu" | "box-datalist-item" | "box-date-field" | "box-dialog" | "box-diff-viewer" | "box-divider" | "box-grid" | "box-donut-chart" | "box-draggable-list" | "box-drawer" | "box-drop-zone" | "box-dropdown" | "box-dual-listbox" | "box-due-badge" | "box-empty-state" | "box-error-mask" | "box-explorer-action-menu" | "box-explorer-breadcrumbs" | "box-explorer-items" | "box-explorer-list" | "box-explorer-table" | "box-explorer-toolbar" | "box-fieldset" | "box-file-request-builder" | "box-filter-bar" | "box-form-wizard" | "box-governance-panel" | "box-grid-view" | "box-guide-tooltip" | "box-help-text" | "box-icon-button" | "box-illustration" | "box-invite-collaborators-modal" | "box-item-details-panel" | "box-item-form" | "box-line-chart" | "box-lineage-graph" | "box-link-button" | "box-menu" | "box-menu-item" | "box-metadata-filter-builder" | "box-metadata-inspector" | "box-metric-card" | "box-multi-select" | "box-nav-sidebar" | "box-notification-bell" | "box-notification-inbox" | "box-nudge" | "box-number-input" | "box-pagination" | "box-permission-matrix" | "box-persona" | "box-pill-cloud" | "box-pill-selector-dropdown" | "box-popover" | "box-presence" | "box-preview-element" | "box-preview-header" | "box-progress-bar" | "box-progress-ring" | "box-progress-steps" | "box-provenance-strip" | "box-radio-group" | "box-range-slider" | "box-rating" | "box-review-queue-item" | "box-rich-text-input" | "box-run-trace" | "box-saved-view-picker" | "box-search-field" | "box-search-results-header" | "box-section" | "box-segmented-control" | "box-select" | "box-share-panel" | "box-shortcuts-overlay" | "box-sidebar-toggle-button" | "box-signature-ceremony" | "box-skeleton" | "box-slider" | "box-spin-button" | "box-spinner" | "box-split-view" | "box-path" | "box-switch" | "box-table" | "box-tabs" | "box-tag-input" | "box-task-assignment-panel" | "box-text-area" | "box-text-field" | "box-thumbnail-card" | "box-time-field" | "box-timeline" | "box-toast" | "box-tooltip" | "box-tree" | "box-tree-grid" | "box-unified-share-modal" | "box-version-graph" | "box-version-list" | "box-wizard-summary" | "box-work-queue" | "box-workload-board";

package/dist/entries/grid.d.ts

@@ -0,0 +1 @@
+export * from "../components/layout/grid.js";

package/dist/entries/grid.js

@@ -0,0 +1 @@
+export * from "../components/layout/grid.js";

package/dist/entries/path.d.ts

@@ -0,0 +1 @@
+export * from "../components/feedback/path.js";

package/dist/entries/path.js

@@ -0,0 +1 @@
+export * from "../components/feedback/path.js";

package/dist/foundations/layout/grid.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Adobe Spectrum's responsive grid, as a foundation.
+ *
+ * Two surfaces build on this: `box-grid`, which lays out slotted content, and
+ * `box-skeleton`'s grid variant, which fills the same regions with shimmer
+ * bars. They must agree on what a column is worth and how wide a gutter is at
+ * a given viewport, so the model lives here rather than in either of them.
+ */
+/**
+ * Columns in the grid.
+ *
+ * Twelve divides by 2, 3, 4 and 6, so halves, thirds, quarters and
+ * sidebar-plus-content all land on whole columns.
+ */
+export declare const BOE_GRID_COLUMNS = 12;
+/**
+ * Spectrum's breakpoints and their gutters.
+ *
+ * Breakpoints are min-widths, so a viewport between two of them inherits the
+ * smaller one's dimensions. Gutters are fixed values per breakpoint rather
+ * than a proportion of the grid — that is Spectrum's rule, and it is why the
+ * gutter cannot simply be a percentage.
+ */
+export declare const BOE_GRID_BREAKPOINTS: readonly {
+    minWidth: number;
+    gutter: number;
+}[];
+/** The custom property every grid surface reads its gutter from. */
+export declare const BOE_GRID_GUTTER_PROPERTY = "--boe-grid-gutter";
+/**
+ * The gutter scale as CSS, scoped to a selector.
+ *
+ * Emitted rather than hand-written in each component so the two cannot drift,
+ * and so adding a breakpoint is one edit. A consumer overriding the property
+ * replaces the whole scale in one declaration.
+ */
+export declare const boeGridGutterStyles: (selector?: string) => string;
+/**
+ * One region of the grid: a block spanning some columns and rows, optionally
+ * pushed right by an offset. Spectrum calls these layout regions.
+ */
+export interface BoeGridPlacement {
+    /** Columns to span. Clamped to what is left after `offset`. */
+    span?: number;
+    /** Rows to span. Clamped to the grid's `rows`, so a region cannot exceed it. */
+    rowSpan?: number;
+    /** Empty columns before this region. Clamped to leave room for one column. */
+    offset?: number;
+}
+/** A resolved region: every field present, every value in range. */
+export interface ResolvedBoeGridPlacement {
+    span: number;
+    rowSpan: number;
+    offset: number;
+}
+/** Attribute payloads are author input — validate every record. */
+export declare const isBoeGridPlacementRecord: (value: unknown) => value is BoeGridPlacement;
+/**
+ * Fit a region to the grid.
+ *
+ * Every value is clamped rather than rejected. A layout that renders slightly
+ * wrong is recoverable; one that vanishes because a number was out of range is
+ * not, and the caller usually cannot tell which region was dropped. The clamps
+ * are what confine a region to the totals the author declared: a span of 9 in a
+ * three-column grid becomes 3, and a `rowSpan` of 5 in a three-row grid
+ * becomes 3.
+ */
+export declare const resolveBoeGridPlacement: (item: BoeGridPlacement, columns: number, rows: number) => ResolvedBoeGridPlacement;
+/** Parse a positive integer attribute, falling back when it is absent or junk. */
+export declare const resolveGridCount: (raw: string | null, fallback: number) => number;

package/dist/foundations/layout/grid.js

@@ -0,0 +1,84 @@
+/**
+ * Adobe Spectrum's responsive grid, as a foundation.
+ *
+ * Two surfaces build on this: `box-grid`, which lays out slotted content, and
+ * `box-skeleton`'s grid variant, which fills the same regions with shimmer
+ * bars. They must agree on what a column is worth and how wide a gutter is at
+ * a given viewport, so the model lives here rather than in either of them.
+ */
+/**
+ * Columns in the grid.
+ *
+ * Twelve divides by 2, 3, 4 and 6, so halves, thirds, quarters and
+ * sidebar-plus-content all land on whole columns.
+ */
+export const BOE_GRID_COLUMNS = 12;
+/**
+ * Spectrum's breakpoints and their gutters.
+ *
+ * Breakpoints are min-widths, so a viewport between two of them inherits the
+ * smaller one's dimensions. Gutters are fixed values per breakpoint rather
+ * than a proportion of the grid — that is Spectrum's rule, and it is why the
+ * gutter cannot simply be a percentage.
+ */
+export const BOE_GRID_BREAKPOINTS = [
+    { minWidth: 0, gutter: 16 },
+    { minWidth: 768, gutter: 24 },
+    { minWidth: 1280, gutter: 32 },
+    { minWidth: 1768, gutter: 40 },
+    { minWidth: 2160, gutter: 48 },
+];
+/** The custom property every grid surface reads its gutter from. */
+export const BOE_GRID_GUTTER_PROPERTY = "--boe-grid-gutter";
+/**
+ * The gutter scale as CSS, scoped to a selector.
+ *
+ * Emitted rather than hand-written in each component so the two cannot drift,
+ * and so adding a breakpoint is one edit. A consumer overriding the property
+ * replaces the whole scale in one declaration.
+ */
+export const boeGridGutterStyles = (selector = ":host") => BOE_GRID_BREAKPOINTS.map(({ minWidth, gutter }) => {
+    const declaration = `${selector} {\n    ${BOE_GRID_GUTTER_PROPERTY}: ${gutter}px;\n  }`;
+    return minWidth === 0
+        ? `  ${declaration}`
+        : `  @media (min-width: ${minWidth}px) {\n  ${declaration}\n  }`;
+}).join("\n\n");
+/** Attribute payloads are author input — validate every record. */
+export const isBoeGridPlacementRecord = (value) => {
+    if (typeof value !== "object" || value === null || Array.isArray(value)) {
+        return false;
+    }
+    const item = value;
+    // Absent is fine — each field has a default. Present-but-not-a-number is not:
+    // it means the host built the payload wrong, and silently substituting a
+    // default would hide that.
+    return ["span", "rowSpan", "offset"].every(key => {
+        const raw = item[key];
+        return raw === undefined || (typeof raw === "number" && Number.isFinite(raw));
+    });
+};
+const clamp = (value, min, max) => Math.min(Math.max(Math.trunc(value), min), max);
+/**
+ * Fit a region to the grid.
+ *
+ * Every value is clamped rather than rejected. A layout that renders slightly
+ * wrong is recoverable; one that vanishes because a number was out of range is
+ * not, and the caller usually cannot tell which region was dropped. The clamps
+ * are what confine a region to the totals the author declared: a span of 9 in a
+ * three-column grid becomes 3, and a `rowSpan` of 5 in a three-row grid
+ * becomes 3.
+ */
+export const resolveBoeGridPlacement = (item, columns, rows) => {
+    // Leave at least one column for the region itself.
+    const offset = clamp(item.offset ?? 0, 0, Math.max(columns - 1, 0));
+    return {
+        offset,
+        span: clamp(item.span ?? 1, 1, Math.max(columns - offset, 1)),
+        rowSpan: clamp(item.rowSpan ?? 1, 1, Math.max(rows, 1)),
+    };
+};
+/** Parse a positive integer attribute, falling back when it is absent or junk. */
+export const resolveGridCount = (raw, fallback) => {
+    const parsed = Number.parseInt(raw ?? "", 10);
+    return Number.isFinite(parsed) ? Math.max(parsed, 1) : fallback;
+};

package/dist/foundations/layout/index.d.ts

@@ -0,0 +1 @@
+export * from "./grid.js";

package/dist/foundations/layout/index.js

@@ -0,0 +1,3 @@
+// Adobe Spectrum's responsive grid: columns, breakpoint gutters, and the
+// clamping that confines a region to the totals its host declared.
+export * from "./grid.js";

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export type { ResolvedTheme, ThemeChangeDetail, ThemeController, ThemeController
 export { DESIGN_PROFILE_CHANGE_EVENT, DESIGN_PROFILE_VARIABLES, DEFAULT_DESIGN_PROFILE_STORAGE_KEY, applyDesignProfile, boxDefaultDesignProfile, compactNeutralDesignProfile, createDesignProfileController, createDesignProfileStyleText, getDesignProfile, listDesignProfiles, registerBuiltInDesignProfiles, registerDesignProfile, resolveDesignProfileProperties, } from "./foundations/profiles/index.js";
 export type { ApplyDesignProfileOptions, DesignProfileChangeDetail, DesignProfileController, DesignProfileControllerOptions, DesignProfileDefinition, DesignProfileDensity, DesignProfileElevation, DesignProfileMotion, DesignProfileRadius, DesignProfileSpacing, DesignProfileTypography, } from "./foundations/profiles/index.js";
 export { boxIconography, boxIconographyAliases } from "./foundations/icons/index.js";
+export * from "./foundations/layout/index.js";
 export { anchorFloating, parsePlacement, resolvePosition, trackAnchor, } from "./foundations/overlay/index.js";
 export type { OverlayAlign, OverlayPlacement, OverlaySide, PositionOptions, PositionResult, } from "./foundations/overlay/index.js";
 export * from "./components/actions/button.js";
@@ -42,10 +43,11 @@ export * from "./components/feedback/progress-ring.js";
 export * from "./components/feedback/progress-steps.js";
 export * from "./components/feedback/skeleton.js";
 export * from "./components/feedback/spinner.js";
-export * from "./components/feedback/stage-path.js";
+export * from "./components/feedback/path.js";
 export * from "./components/feedback/toast.js";
 export * from "./components/files/drop-zone.js";
 export * from "./components/identity/avatar.js";
+export * from "./components/identity/contact-datalist-item.js";
 export * from "./components/identity/persona.js";
 export * from "./components/navigation/accordion.js";
 export * from "./components/navigation/breadcrumb.js";
@@ -80,6 +82,7 @@ export * from "./components/forms/text-area.js";
 export * from "./components/forms/text-field.js";
 export * from "./components/layout/app-shell.js";
 export * from "./components/layout/divider.js";
+export * from "./components/layout/grid.js";
 export * from "./components/layout/nav-sidebar.js";
 export * from "./components/layout/section.js";
 export * from "./components/layout/sidebar-toggle-button.js";

package/dist/index.js

@@ -5,6 +5,8 @@ export { DESIGN_SYSTEM_CHANGE_EVENT, SEMANTIC_TOKEN_ALIASES, applyDesignTokens,
 export { DARK_MODE_MEDIA_QUERY, DEFAULT_THEME_STORAGE_KEY, THEME_CHANGE_EVENT, createThemeController, createThemeInitializationScript, } from "./foundations/theming/index.js";
 export { DESIGN_PROFILE_CHANGE_EVENT, DESIGN_PROFILE_VARIABLES, DEFAULT_DESIGN_PROFILE_STORAGE_KEY, applyDesignProfile, boxDefaultDesignProfile, compactNeutralDesignProfile, createDesignProfileController, createDesignProfileStyleText, getDesignProfile, listDesignProfiles, registerBuiltInDesignProfiles, registerDesignProfile, resolveDesignProfileProperties, } from "./foundations/profiles/index.js";
 export { boxIconography, boxIconographyAliases } from "./foundations/icons/index.js";
+// Foundations: Adobe Spectrum's responsive grid (shared by box-grid and box-skeleton)
+export * from "./foundations/layout/index.js";
 // Foundations: viewport-aware overlay positioning (for building custom overlays)
 export { anchorFloating, parsePlacement, resolvePosition, trackAnchor, } from "./foundations/overlay/index.js";
 // Components: actions
@@ -42,12 +44,13 @@ export * from "./components/feedback/progress-ring.js";
 export * from "./components/feedback/progress-steps.js";
 export * from "./components/feedback/skeleton.js";
 export * from "./components/feedback/spinner.js";
-export * from "./components/feedback/stage-path.js";
+export * from "./components/feedback/path.js";
 export * from "./components/feedback/toast.js";
 // Components: files
 export * from "./components/files/drop-zone.js";
 // Components: identity
 export * from "./components/identity/avatar.js";
+export * from "./components/identity/contact-datalist-item.js";
 export * from "./components/identity/persona.js";
 // Components: navigation
 export * from "./components/navigation/accordion.js";
@@ -86,6 +89,7 @@ export * from "./components/forms/text-field.js";
 // Components: layout
 export * from "./components/layout/app-shell.js";
 export * from "./components/layout/divider.js";
+export * from "./components/layout/grid.js";
 export * from "./components/layout/nav-sidebar.js";
 export * from "./components/layout/section.js";
 export * from "./components/layout/sidebar-toggle-button.js";

package/dist/patterns/audit/audit-log.js

@@ -221,7 +221,6 @@ const elementStyles = `
           gap: 0.25rem;
           padding: 0.5rem 0.65rem;
           border-top: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 55%, transparent);
-          border-left: 3px solid var(--audit-tone, transparent);
         }
 
         [part="event-topline"] {

package/dist/patterns/lineage/lineage-graph.d.ts

@@ -1,4 +1,5 @@
 import type { LineageNode } from "./types.js";
+import type { GraphArrows } from "../versions/graph-arrows.js";
 import { BaseElement } from "../../core/index.js";
 /**
  * Provenance DAG for clause lineage (opportunity 2): source clause →
@@ -13,6 +14,12 @@ import { BaseElement } from "../../core/index.js";
 export declare class LineageGraph extends BaseElement {
     static readonly tagName: string;
     static get observedAttributes(): string[];
+    /**
+     * Which ends of each edge carry an arrowhead. Defaults to `end`, the head on
+     * the derived node, because the layout builds edges source → derived.
+     */
+    get arrows(): GraphArrows;
+    set arrows(value: GraphArrows);
     private nodesValue;
     private rovingId;
     private hostEl;