@unofficialbox/box-open-elements 0.12.0 → 0.14.0

package/dist/components/output/formatted-file-size.d.ts

@@ -0,0 +1,31 @@
+import { FormattedValue } from "./formatted-value.js";
+/**
+ * A byte count, rendered as a readable size.
+ *
+ * ```html
+ * <box-formatted-file-size value="2517630"></box-formatted-file-size>
+ * ```
+ *
+ * The magnitude goes through `Intl.NumberFormat`, so a German reader sees
+ * "2,52 MB" rather than "2.52 MB". That is the reason this exists as a
+ * component rather than a `toFixed` call in each consumer: the decimal
+ * separator is not the same everywhere, and a file size is one of the most
+ * frequently rendered values in a content platform.
+ *
+ * Defaults to decimal units (powers of 1000, `kB`/`MB`), matching what the Box
+ * product reports. `units="binary"` switches to powers of 1024 with IEC names
+ * (`KiB`/`MiB`) for hosts that need to agree with a filesystem instead.
+ */
+export declare class FormattedFileSize extends FormattedValue {
+    static readonly tagName: string;
+    static get observedAttributes(): string[];
+    /** The size in bytes. */
+    get value(): string;
+    set value(next: string);
+    /** `decimal` (default) or `binary`. */
+    get units(): string;
+    set units(next: string);
+    protected formatted(): {
+        text: string;
+    } | null;
+}

package/dist/components/output/formatted-file-size.js

@@ -0,0 +1,61 @@
+import { FormattedValue } from "./formatted-value.js";
+import { parseNumber, resolveByteUnits, resolveFileSizeParts, } from "../../foundations/format/index.js";
+const DEFAULT_TAG_NAME = "box-formatted-file-size";
+/**
+ * A byte count, rendered as a readable size.
+ *
+ * ```html
+ * <box-formatted-file-size value="2517630"></box-formatted-file-size>
+ * ```
+ *
+ * The magnitude goes through `Intl.NumberFormat`, so a German reader sees
+ * "2,52 MB" rather than "2.52 MB". That is the reason this exists as a
+ * component rather than a `toFixed` call in each consumer: the decimal
+ * separator is not the same everywhere, and a file size is one of the most
+ * frequently rendered values in a content platform.
+ *
+ * Defaults to decimal units (powers of 1000, `kB`/`MB`), matching what the Box
+ * product reports. `units="binary"` switches to powers of 1024 with IEC names
+ * (`KiB`/`MiB`) for hosts that need to agree with a filesystem instead.
+ */
+export class FormattedFileSize extends FormattedValue {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() {
+        return ["locale", "maximum-fraction-digits", "units", "value"];
+    }
+    /** The size in bytes. */
+    get value() {
+        return this.getAttribute("value") ?? "";
+    }
+    set value(next) {
+        this.setAttribute("value", next);
+    }
+    /** `decimal` (default) or `binary`. */
+    get units() {
+        return resolveByteUnits(this.getAttribute("units"));
+    }
+    set units(next) {
+        this.setAttribute("units", next);
+    }
+    formatted() {
+        const bytes = parseNumber(this.value);
+        if (bytes === null) {
+            return null;
+        }
+        const { suffix, value } = resolveFileSizeParts(bytes, resolveByteUnits(this.units));
+        const requested = parseNumber(this.getAttribute("maximum-fraction-digits"));
+        // Whole bytes have no fractional part worth showing; above that, one
+        // decimal is the convention every file browser uses — "2.5 MB", not
+        // "2.517 MB", which is precision no reader asked for.
+        const maximumFractionDigits = requested ?? (suffix === "B" ? 0 : 1);
+        try {
+            return {
+                text: `${new Intl.NumberFormat(this.locale, { maximumFractionDigits }).format(value)} ${suffix}`,
+            };
+        }
+        catch {
+            return { text: `${String(value)} ${suffix}` };
+        }
+    }
+}
+FormattedFileSize.register();

package/dist/components/output/formatted-number.d.ts

@@ -0,0 +1,53 @@
+import { FormattedValue } from "./formatted-value.js";
+/**
+ * A number, rendered in the reader's locale.
+ *
+ * ```html
+ * <box-formatted-number value="1234.5" format-style="currency" currency="USD"></box-formatted-number>
+ * ```
+ *
+ * The attribute is `format-style` rather than `style`, because `style` is a
+ * global HTML attribute: setting it would put CSS on the host and be silently
+ * ignored as a formatting instruction. Naming it after the `Intl` option would
+ * be tidier right up until the first host wrote `style="currency"` and watched
+ * nothing happen.
+ *
+ * `percent` follows `Intl`, which multiplies by 100: pass `0.42` to render
+ * "42%". That surprises people, so it is worth stating rather than quietly
+ * doubling the convention.
+ */
+export declare class FormattedNumber extends FormattedValue {
+    static readonly tagName: string;
+    static get observedAttributes(): string[];
+    /** The number to render. */
+    get value(): string;
+    set value(next: string);
+    /** `decimal` (default), `currency`, `percent` or `unit`. */
+    get formatStyle(): string;
+    set formatStyle(next: string);
+    /** ISO 4217 code, required by `Intl` when the style is `currency`. */
+    get currency(): string;
+    set currency(next: string);
+    /**
+     * A sanctioned unit identifier, e.g. `megabyte`, when the style is `unit`.
+     *
+     * `Intl` accepts a closed list and throws on anything else, so this is not a
+     * free-text label — "widgets" will not work, and the component falls back to
+     * a plain number rather than losing the value over it.
+     */
+    get unit(): string;
+    set unit(next: string);
+    /**
+     * How wide to write the unit: `short` (2.5 MB), `narrow` (2.5MB) or `long`
+     * (2.5 megabytes).
+     *
+     * `Intl` defaults to `short`, which is what a table wants. `long` is for
+     * prose, where an abbreviation a reader has to expand in their head is worse
+     * than the words.
+     */
+    get unitDisplay(): string;
+    set unitDisplay(next: string);
+    protected formatted(): {
+        text: string;
+    } | null;
+}

package/dist/components/output/formatted-number.js

@@ -0,0 +1,130 @@
+import { FormattedValue } from "./formatted-value.js";
+import { parseNumber } from "../../foundations/format/index.js";
+const DEFAULT_TAG_NAME = "box-formatted-number";
+const NUMBER_STYLES = new Set(["decimal", "currency", "percent", "unit"]);
+const UNIT_DISPLAYS = new Set(["short", "narrow", "long"]);
+/**
+ * A number, rendered in the reader's locale.
+ *
+ * ```html
+ * <box-formatted-number value="1234.5" format-style="currency" currency="USD"></box-formatted-number>
+ * ```
+ *
+ * The attribute is `format-style` rather than `style`, because `style` is a
+ * global HTML attribute: setting it would put CSS on the host and be silently
+ * ignored as a formatting instruction. Naming it after the `Intl` option would
+ * be tidier right up until the first host wrote `style="currency"` and watched
+ * nothing happen.
+ *
+ * `percent` follows `Intl`, which multiplies by 100: pass `0.42` to render
+ * "42%". That surprises people, so it is worth stating rather than quietly
+ * doubling the convention.
+ */
+export class FormattedNumber extends FormattedValue {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() {
+        return [
+            "currency",
+            "format-style",
+            "locale",
+            "maximum-fraction-digits",
+            "minimum-fraction-digits",
+            "unit",
+            "unit-display",
+            "value",
+        ];
+    }
+    /** The number to render. */
+    get value() {
+        return this.getAttribute("value") ?? "";
+    }
+    set value(next) {
+        this.setAttribute("value", next);
+    }
+    /** `decimal` (default), `currency`, `percent` or `unit`. */
+    get formatStyle() {
+        const raw = this.getAttribute("format-style");
+        return raw && NUMBER_STYLES.has(raw) ? raw : "decimal";
+    }
+    set formatStyle(next) {
+        this.setAttribute("format-style", next);
+    }
+    /** ISO 4217 code, required by `Intl` when the style is `currency`. */
+    get currency() {
+        return this.getAttribute("currency") ?? "";
+    }
+    set currency(next) {
+        this.setAttribute("currency", next);
+    }
+    /**
+     * A sanctioned unit identifier, e.g. `megabyte`, when the style is `unit`.
+     *
+     * `Intl` accepts a closed list and throws on anything else, so this is not a
+     * free-text label — "widgets" will not work, and the component falls back to
+     * a plain number rather than losing the value over it.
+     */
+    get unit() {
+        return this.getAttribute("unit") ?? "";
+    }
+    set unit(next) {
+        this.setAttribute("unit", next);
+    }
+    /**
+     * How wide to write the unit: `short` (2.5 MB), `narrow` (2.5MB) or `long`
+     * (2.5 megabytes).
+     *
+     * `Intl` defaults to `short`, which is what a table wants. `long` is for
+     * prose, where an abbreviation a reader has to expand in their head is worse
+     * than the words.
+     */
+    get unitDisplay() {
+        const raw = this.getAttribute("unit-display");
+        return raw && UNIT_DISPLAYS.has(raw) ? raw : "short";
+    }
+    set unitDisplay(next) {
+        this.setAttribute("unit-display", next);
+    }
+    formatted() {
+        const numeric = parseNumber(this.value);
+        if (numeric === null) {
+            return null;
+        }
+        const options = { style: this.formatStyle };
+        if (this.formatStyle === "currency") {
+            if (!this.currency) {
+                // Intl throws without one. Falling back to a plain decimal keeps a real
+                // number on screen instead of hiding it over a missing attribute.
+                options.style = "decimal";
+            }
+            else {
+                options.currency = this.currency;
+            }
+        }
+        if (this.formatStyle === "unit") {
+            if (!this.unit) {
+                options.style = "decimal";
+            }
+            else {
+                options.unit = this.unit;
+                options.unitDisplay = this.unitDisplay;
+            }
+        }
+        const min = parseNumber(this.getAttribute("minimum-fraction-digits"));
+        const max = parseNumber(this.getAttribute("maximum-fraction-digits"));
+        if (min !== null) {
+            options.minimumFractionDigits = min;
+        }
+        if (max !== null) {
+            options.maximumFractionDigits = max;
+        }
+        try {
+            return { text: new Intl.NumberFormat(this.locale, options).format(numeric) };
+        }
+        catch {
+            // A bad currency code, unit, or digit range throws. The number is real,
+            // so render it plainly rather than losing it.
+            return { text: String(numeric) };
+        }
+    }
+}
+FormattedNumber.register();

package/dist/components/output/formatted-value.d.ts

@@ -0,0 +1,44 @@
+import { BaseElement } from "../../core/index.js";
+/**
+ * Shared behaviour for the read-only `box-formatted-*` renderers.
+ *
+ * These components render a typed value and nothing else: no interaction, no
+ * state, no events. What they do share is the awkward part — resolving a
+ * locale, deciding what a broken value looks like, and keeping a
+ * machine-readable form beside the human one.
+ *
+ * **A value that cannot be formatted hides the element.** Not `Invalid Date`,
+ * not `NaN`, not the raw string echoed back. A malformed value is a host bug,
+ * and rendering its wreckage puts the bug in front of a reader who can do
+ * nothing about it. The host is left with an empty inline box, which is what a
+ * missing value should look like anyway.
+ */
+export declare abstract class FormattedValue extends BaseElement {
+    protected valueEl: HTMLElement;
+    /**
+     * The formatted text, plus an optional machine-readable form for the
+     * `datetime` attribute. `null` means the value could not be formatted.
+     */
+    protected abstract formatted(): {
+        machine?: string;
+        text: string;
+    } | null;
+    /**
+     * Whether to render into `<time>` rather than `<span>`.
+     *
+     * Only the instant-valued renderers should; `<time>` on a file size would be
+     * a lie to anything reading the document semantically.
+     */
+    protected usesTimeElement(): boolean;
+    /** Extra styles a subclass wants appended. */
+    protected valueStyles(): string;
+    /**
+     * The locale to format in. Absent means the host's own — deliberately
+     * `undefined` rather than a hardcoded tag.
+     */
+    get locale(): string | undefined;
+    set locale(value: string | undefined);
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}

package/dist/components/output/formatted-value.js

@@ -0,0 +1,100 @@
+import { BaseElement } from "../../core/index.js";
+import { resolveLocale } from "../../foundations/format/index.js";
+const valueStyles = `
+  :host {
+    display: inline;
+    color: inherit;
+    font: inherit;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* Numbers and dates are scanned in columns far more often than they are read
+     in prose — a modified date beside a file name, a size in a table. Tabular
+     figures keep those columns aligned without the host having to ask. */
+  :host([tabular]) [part="value"] {
+    font-variant-numeric: tabular-nums;
+  }
+
+  [part="value"] {
+    white-space: nowrap;
+  }
+`;
+/**
+ * Shared behaviour for the read-only `box-formatted-*` renderers.
+ *
+ * These components render a typed value and nothing else: no interaction, no
+ * state, no events. What they do share is the awkward part — resolving a
+ * locale, deciding what a broken value looks like, and keeping a
+ * machine-readable form beside the human one.
+ *
+ * **A value that cannot be formatted hides the element.** Not `Invalid Date`,
+ * not `NaN`, not the raw string echoed back. A malformed value is a host bug,
+ * and rendering its wreckage puts the bug in front of a reader who can do
+ * nothing about it. The host is left with an empty inline box, which is what a
+ * missing value should look like anyway.
+ */
+export class FormattedValue extends BaseElement {
+    valueEl;
+    /**
+     * Whether to render into `<time>` rather than `<span>`.
+     *
+     * Only the instant-valued renderers should; `<time>` on a file size would be
+     * a lie to anything reading the document semantically.
+     */
+    usesTimeElement() {
+        return false;
+    }
+    /** Extra styles a subclass wants appended. */
+    valueStyles() {
+        return valueStyles;
+    }
+    /**
+     * The locale to format in. Absent means the host's own — deliberately
+     * `undefined` rather than a hardcoded tag.
+     */
+    get locale() {
+        return resolveLocale(this.getAttribute("locale"));
+    }
+    set locale(value) {
+        if (!value) {
+            this.removeAttribute("locale");
+            return;
+        }
+        this.setAttribute("locale", value);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        const tag = this.usesTimeElement() ? "time" : "span";
+        this.shadowRoot.innerHTML = `<style>${this.valueStyles()}</style><${tag} part="value"></${tag}>`;
+        this.valueEl = this.shadowRoot.querySelector('[part="value"]');
+    }
+    setupListeners() {
+        // Output only: nothing to listen to.
+    }
+    update() {
+        if (!this.valueEl) {
+            return;
+        }
+        const result = this.formatted();
+        // toggleAttribute rather than `.hidden = `, so a host that set `hidden`
+        // itself is not fought with on every update.
+        this.toggleAttribute("hidden", result === null);
+        if (!result) {
+            this.valueEl.textContent = "";
+            this.valueEl.removeAttribute("datetime");
+            return;
+        }
+        this.valueEl.textContent = result.text;
+        if (result.machine) {
+            this.valueEl.setAttribute("datetime", result.machine);
+        }
+        else {
+            this.valueEl.removeAttribute("datetime");
+        }
+    }
+}

package/dist/components/output/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./formatted-value.js";
+export * from "./code-block.js";
+export * from "./formatted-date.js";
+export * from "./relative-time.js";
+export * from "./formatted-number.js";
+export * from "./formatted-file-size.js";

package/dist/components/output/index.js

@@ -0,0 +1,9 @@
+// Read-only renderers for typed values: dates, relative durations, numbers and
+// file sizes, all locale-aware and all hiding themselves when handed something
+// they cannot format.
+export * from "./formatted-value.js";
+export * from "./code-block.js";
+export * from "./formatted-date.js";
+export * from "./relative-time.js";
+export * from "./formatted-number.js";
+export * from "./formatted-file-size.js";

package/dist/components/output/relative-time.d.ts

@@ -0,0 +1,41 @@
+import { FormattedValue } from "./formatted-value.js";
+/**
+ * How long ago something happened, in the reader's locale.
+ *
+ * ```html
+ * <box-relative-time value="2026-08-24T09:00:00Z"></box-relative-time>
+ * ```
+ *
+ * Renders into `<time datetime="…">` carrying the exact instant, because
+ * "4 days ago" is an approximation and the precise value is what a reader
+ * reaches for when the approximation is not enough. `box-due-badge` makes the
+ * same trade for the same reason.
+ *
+ * `reference-time` pins what "now" means. It exists for the same reason
+ * `box-due-badge` has one: a component whose output depends on the wall clock
+ * cannot be tested or screenshotted deterministically, and a host rendering a
+ * list wants every row measured against one instant rather than each against
+ * the moment it happened to render.
+ */
+export declare class RelativeTime extends FormattedValue {
+    static readonly tagName: string;
+    static get observedAttributes(): string[];
+    protected usesTimeElement(): boolean;
+    /** The instant being described, as ISO 8601 or epoch milliseconds. */
+    get value(): string;
+    set value(next: string);
+    /** What "now" means. Absent uses the current time. */
+    get referenceTime(): string;
+    set referenceTime(next: string);
+    /**
+     * `auto` lets Intl say "yesterday" where the language has a word for it;
+     * `always` forces "1 day ago". Defaults to `auto`, because the idiomatic
+     * form is what a reader expects.
+     */
+    get numeric(): string;
+    set numeric(next: string);
+    protected formatted(): {
+        machine: string;
+        text: string;
+    } | null;
+}

package/dist/components/output/relative-time.js

@@ -0,0 +1,82 @@
+import { FormattedValue } from "./formatted-value.js";
+import { parseInstant, resolveRelativeParts } from "../../foundations/format/index.js";
+const DEFAULT_TAG_NAME = "box-relative-time";
+const NUMERIC_MODES = new Set(["always", "auto"]);
+/**
+ * How long ago something happened, in the reader's locale.
+ *
+ * ```html
+ * <box-relative-time value="2026-08-24T09:00:00Z"></box-relative-time>
+ * ```
+ *
+ * Renders into `<time datetime="…">` carrying the exact instant, because
+ * "4 days ago" is an approximation and the precise value is what a reader
+ * reaches for when the approximation is not enough. `box-due-badge` makes the
+ * same trade for the same reason.
+ *
+ * `reference-time` pins what "now" means. It exists for the same reason
+ * `box-due-badge` has one: a component whose output depends on the wall clock
+ * cannot be tested or screenshotted deterministically, and a host rendering a
+ * list wants every row measured against one instant rather than each against
+ * the moment it happened to render.
+ */
+export class RelativeTime extends FormattedValue {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() {
+        return ["locale", "numeric", "reference-time", "value"];
+    }
+    usesTimeElement() {
+        return true;
+    }
+    /** The instant being described, as ISO 8601 or epoch milliseconds. */
+    get value() {
+        return this.getAttribute("value") ?? "";
+    }
+    set value(next) {
+        this.setAttribute("value", next);
+    }
+    /** What "now" means. Absent uses the current time. */
+    get referenceTime() {
+        return this.getAttribute("reference-time") ?? "";
+    }
+    set referenceTime(next) {
+        if (!next) {
+            this.removeAttribute("reference-time");
+            return;
+        }
+        this.setAttribute("reference-time", next);
+    }
+    /**
+     * `auto` lets Intl say "yesterday" where the language has a word for it;
+     * `always` forces "1 day ago". Defaults to `auto`, because the idiomatic
+     * form is what a reader expects.
+     */
+    get numeric() {
+        const raw = this.getAttribute("numeric");
+        return raw && NUMERIC_MODES.has(raw) ? raw : "auto";
+    }
+    set numeric(next) {
+        this.setAttribute("numeric", next);
+    }
+    formatted() {
+        const instant = parseInstant(this.value);
+        if (!instant) {
+            return null;
+        }
+        // An unparseable reference falls back to now rather than hiding the
+        // element: the instant being described is still valid, and a broken
+        // reference should not erase it.
+        const reference = parseInstant(this.referenceTime) ?? new Date();
+        const { unit, value } = resolveRelativeParts(instant, reference);
+        try {
+            const formatter = new Intl.RelativeTimeFormat(this.locale, {
+                numeric: this.numeric,
+            });
+            return { machine: instant.toISOString(), text: formatter.format(value, unit) };
+        }
+        catch {
+            return { machine: instant.toISOString(), text: instant.toISOString() };
+        }
+    }
+}
+RelativeTime.register();

package/dist/element-maps.d.ts

@@ -37,6 +37,13 @@ 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 { CodeBlock } from "./components/output/code-block.js";
+import type { FormattedDate } from "./components/output/formatted-date.js";
+import type { Indicator } from "./components/feedback/indicator.js";
+import type { TileGroup } from "./components/forms/tile-group.js";
+import type { FormattedFileSize } from "./components/output/formatted-file-size.js";
+import type { FormattedNumber } from "./components/output/formatted-number.js";
+import type { RelativeTime } from "./components/output/relative-time.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";
@@ -180,6 +187,13 @@ declare global {
         "box-combobox": Combobox;
         "box-command-palette": CommandPalette;
         "box-comment-thread": CommentThread;
+        "box-code-block": CodeBlock;
+        "box-formatted-date": FormattedDate;
+        "box-indicator": Indicator;
+        "box-tile-group": TileGroup;
+        "box-formatted-file-size": FormattedFileSize;
+        "box-formatted-number": FormattedNumber;
+        "box-relative-time": RelativeTime;
         "box-compare-view": CompareView;
         "box-contact-datalist-item": ContactDatalistItem;
         "box-content-explorer": ContentExplorer;
@@ -293,4 +307,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-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";
+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-code-block" | "box-formatted-date" | "box-indicator" | "box-tile-group" | "box-formatted-file-size" | "box-formatted-number" | "box-relative-time" | "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/code-block.d.ts

@@ -0,0 +1 @@
+export * from "../components/output/code-block.js";

package/dist/entries/code-block.js

@@ -0,0 +1 @@
+export * from "../components/output/code-block.js";

package/dist/entries/formatted-date.d.ts

@@ -0,0 +1 @@
+export * from "../components/output/formatted-date.js";

package/dist/entries/formatted-date.js

@@ -0,0 +1 @@
+export * from "../components/output/formatted-date.js";

package/dist/entries/formatted-file-size.d.ts

@@ -0,0 +1 @@
+export * from "../components/output/formatted-file-size.js";

package/dist/entries/formatted-file-size.js

@@ -0,0 +1 @@
+export * from "../components/output/formatted-file-size.js";

package/dist/entries/formatted-number.d.ts

@@ -0,0 +1 @@
+export * from "../components/output/formatted-number.js";

package/dist/entries/formatted-number.js

@@ -0,0 +1 @@
+export * from "../components/output/formatted-number.js";

package/dist/entries/indicator.d.ts

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

package/dist/entries/indicator.js

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

package/dist/entries/relative-time.d.ts

@@ -0,0 +1 @@
+export * from "../components/output/relative-time.js";

package/dist/entries/relative-time.js

@@ -0,0 +1 @@
+export * from "../components/output/relative-time.js";

package/dist/entries/tile-group.d.ts

@@ -0,0 +1 @@
+export * from "../components/forms/tile-group.js";

package/dist/entries/tile-group.js

@@ -0,0 +1 @@
+export * from "../components/forms/tile-group.js";