@unofficialbox/box-open-elements 0.10.0 → 0.12.0

package/dist/components/feedback/toast.js

@@ -1,8 +1,29 @@
 import { BaseElement } from "../../core/index.js";
+import { toneAccessibleLabel } from "./tone.js";
 import { boeRadius, boeSpace } from "../../foundations/geometry/index.js";
 import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-toast";
+const TOAST_MODES = new Set(["dismissible", "sticky"]);
+/** Narrow an author-supplied mode, falling back to `dismissible`. */
+export const resolveToastMode = (value) => TOAST_MODES.has(value) ? value : "dismissible";
+/**
+ * Status glyphs, one per tone.
+ *
+ * A toast is read at a glance and often out of the corner of an eye, so the
+ * shape has to carry the meaning before the colour does — a round tick and a
+ * warning triangle are distinguishable to a reader who cannot separate green
+ * from amber. Literal markup, never author input, so innerHTML is safe here.
+ */
+const TONE_ICONS = {
+    info: `<svg viewBox="0 0 20 20" fill="currentColor" focusable="false"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 3.4a1.15 1.15 0 110 2.3 1.15 1.15 0 010-2.3zM11.1 15H8.9V9.3h2.2V15z"/></svg>`,
+    success: `<svg viewBox="0 0 20 20" fill="currentColor" focusable="false"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm4.06 5.86-5 5.2a1 1 0 01-1.44 0L5.94 11.3A1 1 0 117.38 9.9l1.04 1.08 4.28-4.52a1 1 0 011.36 1.38z"/></svg>`,
+    warning: `<svg viewBox="0 0 20 20" fill="currentColor" focusable="false"><path d="M9.13 2.6 1.4 15.9a1 1 0 00.87 1.5h15.46a1 1 0 00.87-1.5L10.87 2.6a1 1 0 00-1.74 0zM11.1 15.4H8.9v-2.2h2.2v2.2zm0-3.4H8.9V7.6h2.2V12z"/></svg>`,
+    error: `<svg viewBox="0 0 20 20" fill="currentColor" focusable="false"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 2c1.29 0 2.48.41 3.46 1.1L5.1 13.46A6 6 0 0110 4zm0 12c-1.29 0-2.48-.41-3.46-1.1l8.36-8.36A6 6 0 0110 16z"/></svg>`,
+};
+/** The tone glyph, falling back to the info mark for an unknown tone. */
+const toneIcon = (tone) => TONE_ICONS[tone] ?? TONE_ICONS.info;
+const DISMISS_ICON = `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" focusable="false"><path d="M5.5 5.5l9 9M14.5 5.5l-9 9"/></svg>`;
 const toastStyles = `
   :host {
     display: block;
@@ -16,47 +37,120 @@ const toastStyles = `
     display: none;
   }
 
+  /* Fill, text colour and shadow track box-ui-elements' .notification and are
+     pinned by the colour conformance manifest — they are deliberately not
+     derived from the tone accent. The --toast-accent property exists only to
+     colour the status glyph, which upstream has no equivalent for, so adding it
+     costs no conformance.
+
+     There is no border. Upstream .notification has one, and box-open-elements
+     matched it until the outline was judged too heavy; the claim that pinned it
+     was retired rather than left describing something no longer painted. Tone
+     survives that in three places — the tinted fill, the full-strength glyph,
+     and the visually-hidden tone label — so it was never carried by the border
+     alone. */
   [part="toast"] {
+    --toast-accent: var(--boe-token-text-text, #222222);
+
     display: inline-flex;
-    align-items: center;
+    /* Top, not centre: with a heading above the message the glyph belongs on
+       the heading's line, and centring floats it into the gap between them. */
+    align-items: flex-start;
     gap: ${boeSpace[3]};
     min-height: 48px;
     max-inline-size: min(100%, 572px);
     padding: 10px 10px 10px 20px;
-    border: 2px solid var(--boe-token-text-text, #222222);
     border-radius: ${boeRadius.large};
     background: var(--boe-token-surface-surface-secondary, #f4f4f4);
     color: var(--boe-token-text-text, #222222);
     box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
   }
 
+  /* The neutral toast keeps upstream's grey fill, so the glyph is the only
+     place the "this is information" signal can live. */
+  [part="toast"][data-tone="info"] {
+    --toast-accent: var(--boe-token-surface-surface-brand, #0061d5);
+  }
+
   [part="toast"][data-tone="success"] {
+    --toast-accent: var(--boe-token-surface-status-surface-success, #26c281);
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 20%, #fff);
-    border-color: var(--boe-token-surface-status-surface-success, #26c281);
   }
 
   [part="toast"][data-tone="error"] {
+    --toast-accent: var(--boe-token-surface-status-surface-error, #ed3757);
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 20%, #fff);
-    border-color: var(--boe-token-surface-status-surface-error, #ed3757);
   }
 
   [part="toast"][data-tone="warning"],
   [part="toast"][data-tone="inprogress"] {
+    --toast-accent: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 20%, #fff);
-    border-color: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
   }
 
-  [part="message"] {
+  .sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  [part="icon"] {
+    flex: 0 0 auto;
+    inline-size: 20px;
+    block-size: 20px;
+    /* The accent at full strength: the glyph is the one element that should
+       read as the status colour rather than a darkened version of it. */
+    color: var(--toast-accent);
+  }
+
+  [part="icon"] svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  [part="content"] {
     flex: 1 1 auto;
     min-inline-size: 0;
-    padding-inline-end: ${boeSpace[3]};
+    padding-inline-end: ${boeSpace[2]};
+  }
+
+  [part="heading"] {
+    display: block;
     font-size: 15px;
     font-weight: 700;
+    line-height: 1.3;
+    overflow-wrap: anywhere;
+  }
+
+  /* Optional: with no heading the message stands alone, and an empty element
+     would still contribute its line box. */
+  [part="heading"]:empty {
+    display: none;
+  }
+
+  [part="message"] {
+    display: block;
+    font-size: 14px;
+    font-weight: 400;
     line-height: 1.35;
     /* Long unbroken tokens (URLs, filenames) wrap instead of overflowing. */
     overflow-wrap: anywhere;
   }
 
+  /* Without a heading the message is the toast's only line, so it carries the
+     weight the heading would have had. */
+  [part="heading"]:empty + [part="message"] {
+    font-size: 15px;
+    font-weight: 700;
+  }
+
   /* Optional action affordance (e.g. "Undo") before the dismiss button.
      Hidden — taking no flex gap — until content is assigned. */
   [part="action"] {
@@ -77,21 +171,33 @@ const toastStyles = `
     cursor: pointer;
   }
 
+  /* An icon button rather than a "Dismiss" label: the toast is chrome over the
+     reader's work, and a word-width button competes with the message it sits
+     beside. The accessible name is on the button, so nothing is lost. */
   [part="dismiss"] {
     appearance: none;
     flex: 0 0 auto;
-    border: 1px solid var(--boe-token-text-text, #222222);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 24px;
+    block-size: 24px;
+    padding: 4px;
+    border: 0;
     border-radius: ${boeRadius.med};
     background: transparent;
-    color: var(--boe-token-text-text, #222222);
+    color: inherit;
     font: inherit;
-    font-size: 13px;
-    font-weight: 700;
-    padding: 7px 13px;
     cursor: pointer;
     transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
   }
 
+  [part="dismiss"] svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
   [part="dismiss"]:hover:not(:disabled) {
     background: rgb(0 0 0 / 6%);
   }
@@ -111,12 +217,16 @@ const toastStyles = `
 export class Toast extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["message", "open", "tone", "duration"];
+        return ["duration", "heading", "message", "mode", "open", "tone"];
     }
     openValue = false;
     timeoutId = null;
     toastEl;
+    iconEl;
+    headingEl;
+    toneLabelEl;
     messageEl;
+    renderedTone = null;
     actionSlot;
     dismissEl;
     /** Auto-dismiss delay in ms for the declarative `open` path. 0 = sticky. */
@@ -161,7 +271,8 @@ export class Toast extends BaseElement {
             clearTimeout(this.timeoutId);
             this.timeoutId = null;
         }
-        if (duration > 0) {
+        // Sticky wins over any duration, including one passed to show().
+        if (duration > 0 && this.mode !== "sticky") {
             this.timeoutId = setTimeout(() => this.hide(), duration);
         }
     }
@@ -171,6 +282,41 @@ export class Toast extends BaseElement {
     set message(value) {
         this.setAttribute("message", value);
     }
+    /**
+     * Optional bold line above the message — "Upload failed" over "3 of 12 files
+     * could not be read". Named to match `box-alert`, which established the
+     * heading-plus-message shape in this family. Salesforce calls it `label`.
+     */
+    get heading() {
+        return this.getAttribute("heading") ?? "";
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    /**
+     * @deprecated Every toast is borderless now, so this does nothing.
+     *
+     * Kept because it shipped in 0.11.0 and removing it would break hosts that
+     * set it for no benefit — what they asked for is what they already get. The
+     * attribute is still reflected so those hosts read back what they wrote.
+     */
+    get borderless() {
+        return this.hasAttribute("borderless");
+    }
+    set borderless(value) {
+        this.toggleAttribute("borderless", value);
+    }
+    /**
+     * Whether the toast clears itself. `sticky` overrides any `duration`: a
+     * caller that has said "this one stays" should not have it taken away by a
+     * duration set elsewhere.
+     */
+    get mode() {
+        return resolveToastMode(this.getAttribute("mode"));
+    }
+    set mode(value) {
+        this.setAttribute("mode", value);
+    }
     get tone() {
         return this.getAttribute("tone") ?? "info";
     }
@@ -211,12 +357,20 @@ export class Toast extends BaseElement {
         this.shadowRoot.innerHTML = `
       <style>${toastStyles}</style>
       <div part="toast" role="status" aria-live="polite">
-        <span part="message"></span>
+        <span part="icon" aria-hidden="true"></span>
+        <div part="content">
+          <span part="tone-label" class="sr-only"></span>
+          <span part="heading"></span>
+          <span part="message"></span>
+        </div>
         <slot name="action" part="action"></slot>
-        <button type="button" part="dismiss">Dismiss</button>
+        <button type="button" part="dismiss" aria-label="Dismiss">${DISMISS_ICON}</button>
       </div>
     `;
         this.toastEl = this.shadowRoot.querySelector('[part="toast"]');
+        this.iconEl = this.shadowRoot.querySelector('[part="icon"]');
+        this.headingEl = this.shadowRoot.querySelector('[part="heading"]');
+        this.toneLabelEl = this.shadowRoot.querySelector('[part="tone-label"]');
         this.messageEl = this.shadowRoot.querySelector('[part="message"]');
         this.actionSlot = this.shadowRoot.querySelector('slot[name="action"]');
         this.dismissEl = this.shadowRoot.querySelector('[part="dismiss"]');
@@ -240,7 +394,18 @@ export class Toast extends BaseElement {
         if (!visible) {
             return;
         }
-        this.toastEl.dataset.tone = this.tone;
+        const tone = this.tone;
+        this.toastEl.dataset.tone = tone;
+        // Only when it actually changes: this re-parses SVG markup, and update()
+        // runs on every attribute write.
+        if (tone !== this.renderedTone) {
+            this.iconEl.innerHTML = toneIcon(tone);
+            this.renderedTone = tone;
+        }
+        // The glyph is aria-hidden and the fill is colour, so without this the
+        // tone reaches a screen reader not at all.
+        this.toneLabelEl.textContent = toneAccessibleLabel(tone);
+        this.headingEl.textContent = this.heading;
         this.messageEl.textContent = this.message;
     }
 }

package/dist/components/feedback/tone.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 declare const toneAccessibleLabel: (tone: string) => string;

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

@@ -36,6 +36,7 @@ import type { CollaboratorAvatars } from "./patterns/share/collaborator-avatars.
 import type { ColorPicker } from "./components/forms/color-picker.js";
 import type { Combobox } from "./components/forms/combobox.js";
 import type { CommandPalette } from "./components/overlays/command-palette.js";
+import type { CommentThread } from "./patterns/comments/comment-thread.js";
 import type { CompareView } from "./patterns/diff/compare-view.js";
 import type { ContactDatalistItem } from "./components/identity/contact-datalist-item.js";
 import type { ContentExplorer } from "./patterns/content-explorer/content-explorer.js";
@@ -48,6 +49,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 +126,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";
@@ -177,6 +179,7 @@ declare global {
         "box-color-picker": ColorPicker;
         "box-combobox": Combobox;
         "box-command-palette": CommandPalette;
+        "box-comment-thread": CommentThread;
         "box-compare-view": CompareView;
         "box-contact-datalist-item": ContactDatalistItem;
         "box-content-explorer": ContentExplorer;
@@ -189,6 +192,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 +269,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 +293,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-comment-thread" | "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/comment-thread.d.ts

@@ -0,0 +1 @@
+export * from "../patterns/comments/index.js";

package/dist/entries/comment-thread.js

@@ -0,0 +1 @@
+export * from "../patterns/comments/index.js";

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