@unofficialbox/box-open-elements 0.2.1 → 0.4.0

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

@@ -132,6 +132,57 @@ export class BoxTimeFieldElement extends FormAssociatedElement {
             this.update();
         }
     }
+    /**
+     * Parse a human time string in 24-hour (`13:30`) or 12-hour (`1:30 PM`,
+     * `1 pm`) form to canonical `HH:MM`. Returns `""` for empty input and `null`
+     * when it cannot be parsed.
+     */
+    static parseTime(raw) {
+        const value = raw.trim().toLowerCase();
+        if (!value) {
+            return "";
+        }
+        const twentyFour = value.match(/^([01]?\d|2[0-3]):([0-5]\d)$/);
+        if (twentyFour) {
+            return `${twentyFour[1].padStart(2, "0")}:${twentyFour[2]}`;
+        }
+        const twelve = value.match(/^(\d{1,2})(?::([0-5]\d))?\s*(am|pm)$/);
+        if (twelve) {
+            let hours = Number.parseInt(twelve[1], 10);
+            const minutes = twelve[2] ?? "00";
+            if (hours < 1 || hours > 12) {
+                return null;
+            }
+            if (twelve[3] === "pm" && hours !== 12) {
+                hours += 12;
+            }
+            else if (twelve[3] === "am" && hours === 12) {
+                hours = 0;
+            }
+            return `${String(hours).padStart(2, "0")}:${minutes}`;
+        }
+        return null;
+    }
+    /**
+     * Set the value from a human 12h/24h string. On success updates the value and
+     * returns true; on a parse failure emits `parse-error` and returns false.
+     */
+    setTimeString(value) {
+        const parsed = BoxTimeFieldElement.parseTime(value);
+        if (parsed === null) {
+            this.dispatchEvent(new CustomEvent("parse-error", {
+                bubbles: true,
+                composed: true,
+                detail: { value },
+            }));
+            return false;
+        }
+        this.syncValue(parsed);
+        if (this.isRendered) {
+            this.update();
+        }
+        return true;
+    }
     syncValue(nextValue) {
         this.valueInternal = nextValue;
         this.setAttribute("value", nextValue);

package/dist/components/identity/avatar.d.ts

@@ -2,6 +2,9 @@ import { BaseElement } from "../../core/index.js";
 export declare class BoxAvatarElement extends BaseElement {
     static get observedAttributes(): string[];
     private avatarEl;
+    /** Corner indicator: `""`/`none` (default), `online`, or `external`. */
+    get badge(): string;
+    set badge(value: string);
     get alt(): string;
     set alt(value: string);
     get initials(): string;
@@ -16,6 +19,7 @@ export declare class BoxAvatarElement extends BaseElement {
     set tone(value: string);
     protected renderTemplate(): void;
     protected update(): void;
+    private syncBadge;
     private showAvatarFallback;
 }
 export declare const defineBoxAvatarElement: (tagName?: string) => typeof BoxAvatarElement;

package/dist/components/identity/avatar.js

@@ -76,12 +76,49 @@ const avatarStyles = `
   [part="image"][hidden] {
     display: none;
   }
+
+  /* Corner status/external indicator. Absent by default (no layout impact). */
+  [part="badge"] {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    box-sizing: border-box;
+    inline-size: max(8px, calc(var(--avatar-size, ${DEFAULT_SIZE}px) * 0.34));
+    block-size: max(8px, calc(var(--avatar-size, ${DEFAULT_SIZE}px) * 0.34));
+    border-radius: 999px;
+    border: 2px solid var(--boe-token-surface-surface, #ffffff);
+    display: grid;
+    place-items: center;
+    color: #ffffff;
+  }
+
+  [part="badge"][data-badge="online"] {
+    background: var(--boe-token-surface-status-surface-success, #26c281);
+  }
+
+  [part="badge"][data-badge="external"] {
+    background: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
+  }
+
+  [part="badge"] svg {
+    inline-size: 62%;
+    block-size: 62%;
+    fill: currentColor;
+  }
 `;
 export class BoxAvatarElement extends BaseElement {
     static get observedAttributes() {
-        return ["alt", "initials", "name", "size", "src", "tone"];
+        return ["alt", "badge", "initials", "name", "size", "src", "tone"];
     }
     avatarEl;
+    /** Corner indicator: `""`/`none` (default), `online`, or `external`. */
+    get badge() {
+        const value = this.getAttribute("badge");
+        return value === "online" || value === "external" ? value : "none";
+    }
+    set badge(value) {
+        this.setAttribute("badge", value);
+    }
     get alt() {
         return this.getAttribute("alt") ?? this.name;
     }
@@ -171,6 +208,33 @@ export class BoxAvatarElement extends BaseElement {
             }
             this.showAvatarFallback(existingFallback, fallback);
         }
+        this.syncBadge();
+    }
+    syncBadge() {
+        const badge = this.badge;
+        let badgeEl = this.avatarEl.querySelector('[part="badge"]');
+        if (badge === "none") {
+            badgeEl?.remove();
+            return;
+        }
+        if (!badgeEl) {
+            badgeEl = document.createElement("span");
+            badgeEl.setAttribute("part", "badge");
+            this.avatarEl.append(badgeEl);
+        }
+        badgeEl.dataset.badge = badge;
+        if (badge === "external") {
+            badgeEl.setAttribute("aria-label", "External user");
+            badgeEl.setAttribute("role", "img");
+            // Outward arrow marks an external collaborator.
+            badgeEl.innerHTML =
+                '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 3h7v7h-2V6.4l-6.3 6.3-1.4-1.4L9.6 5H6V3z"/></svg>';
+        }
+        else {
+            badgeEl.setAttribute("aria-label", "Online");
+            badgeEl.setAttribute("role", "img");
+            badgeEl.innerHTML = "";
+        }
     }
     showAvatarFallback(existingFallback, fallback) {
         const fallbackEl = existingFallback ?? document.createElement("span");

package/dist/components/identity/contact-datalist-item.d.ts

@@ -10,7 +10,15 @@ export declare class BoxContactDatalistItemElement extends BaseElement {
     private itemEl;
     private avatarEl;
     private nameEl;
+    private externalEl;
+    private subtitleEl;
     private emailEl;
+    /** Marks the contact as an external collaborator. */
+    get external(): boolean;
+    set external(value: boolean);
+    /** Optional secondary detail line below the email (e.g. role or company). */
+    get subtitle(): string;
+    set subtitle(value: string);
     get name(): string;
     set name(value: string);
     get email(): string;

package/dist/components/identity/contact-datalist-item.js

@@ -71,6 +71,13 @@ const contactStyles = `
     gap: 0.1rem;
   }
 
+  [part="name-row"] {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    min-inline-size: 0;
+  }
+
   [part="name"] {
     font-size: 0.9rem;
     font-weight: 600;
@@ -79,6 +86,35 @@ const contactStyles = `
     white-space: nowrap;
   }
 
+  /* External-collaborator marker beside the name. */
+  [part="external"] {
+    flex: none;
+    font-size: 0.66rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    padding: 1px 5px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 18%, var(--boe-token-surface-surface, #ffffff) 82%);
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 55%, var(--boe-token-text-text, #222222));
+  }
+
+  [part="external"][hidden] {
+    display: none;
+  }
+
+  [part="subtitle"] {
+    font-size: 0.74rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [part="subtitle"][hidden] {
+    display: none;
+  }
+
   [part="email"] {
     font-size: 0.78rem;
     color: var(--boe-token-text-text-secondary, #6f6f6f);
@@ -99,12 +135,28 @@ const contactStyles = `
  */
 export class BoxContactDatalistItemElement extends BaseElement {
     static get observedAttributes() {
-        return ["disabled", "email", "name", "selected", "src", "value"];
+        return ["disabled", "email", "external", "name", "selected", "src", "subtitle", "value"];
     }
     itemEl;
     avatarEl;
     nameEl;
+    externalEl;
+    subtitleEl;
     emailEl;
+    /** Marks the contact as an external collaborator. */
+    get external() {
+        return this.hasAttribute("external");
+    }
+    set external(value) {
+        this.toggleAttribute("external", value);
+    }
+    /** Optional secondary detail line below the email (e.g. role or company). */
+    get subtitle() {
+        return this.getAttribute("subtitle") ?? "";
+    }
+    set subtitle(value) {
+        this.setAttribute("subtitle", value);
+    }
     get name() {
         return this.getAttribute("name") ?? "";
     }
@@ -160,14 +212,20 @@ export class BoxContactDatalistItemElement extends BaseElement {
       <div part="item" role="option">
         <span part="avatar" aria-hidden="true"></span>
         <span part="body">
-          <span part="name"></span>
+          <span part="name-row">
+            <span part="name"></span>
+            <span part="external" hidden>External</span>
+          </span>
           <span part="email" hidden></span>
+          <span part="subtitle" hidden></span>
         </span>
       </div>
     `;
         this.itemEl = this.shadowRoot.querySelector('[part="item"]');
         this.avatarEl = this.shadowRoot.querySelector('[part="avatar"]');
         this.nameEl = this.shadowRoot.querySelector('[part="name"]');
+        this.externalEl = this.shadowRoot.querySelector('[part="external"]');
+        this.subtitleEl = this.shadowRoot.querySelector('[part="subtitle"]');
         this.emailEl = this.shadowRoot.querySelector('[part="email"]');
     }
     setupListeners() {
@@ -215,6 +273,14 @@ export class BoxContactDatalistItemElement extends BaseElement {
             }
         }
         this.nameEl.textContent = this.name;
+        const external = this.external;
+        this.externalEl.hidden = !external;
+        if (external) {
+            this.itemEl.setAttribute("aria-description", "External collaborator");
+        }
+        else {
+            this.itemEl.removeAttribute("aria-description");
+        }
         if (this.email) {
             this.emailEl.hidden = false;
             this.emailEl.textContent = this.email;
@@ -223,6 +289,9 @@ export class BoxContactDatalistItemElement extends BaseElement {
             this.emailEl.hidden = true;
             this.emailEl.textContent = "";
         }
+        const subtitle = this.subtitle;
+        this.subtitleEl.hidden = !subtitle;
+        this.subtitleEl.textContent = subtitle;
     }
 }
 export const defineBoxContactDatalistItemElement = (tagName = DEFAULT_TAG_NAME) => {

package/dist/components/layout/nav-sidebar.js

@@ -88,6 +88,29 @@ const navSidebarStyles = `
     background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 8%, var(--boe-token-surface-surface, #ffffff) 92%);
   }
 
+  /* Grouped nav (NavList): slot a [data-nav-group] element as a section header,
+     and <hr> as a divider. Group labels collapse to nothing in the icon strip. */
+  [part="body"] ::slotted([data-nav-group]) {
+    display: block;
+    padding: 0.5rem 0.45rem 0.15rem;
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="sidebar"][data-collapsed="true"] ::slotted([data-nav-group]) {
+    display: none;
+  }
+
+  [part="body"] ::slotted(hr) {
+    inline-size: 100%;
+    border: 0;
+    border-top: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 68%, transparent);
+    margin: 0.35rem 0.2rem;
+  }
+
   [part="sidebar"][data-collapsed="true"] ::slotted(a),
   [part="sidebar"][data-collapsed="true"] ::slotted(button) {
     justify-content: center;

package/dist/components/layout/sidebar-toggle-button.d.ts

@@ -9,6 +9,9 @@ import { BaseElement } from "../../core/index.js";
 export declare class BoxSidebarToggleButtonElement extends BaseElement {
     static get observedAttributes(): string[];
     private buttonEl;
+    /** Which side the companion sidebar sits on: `left` (default) or `right`. */
+    get direction(): string;
+    set direction(value: string);
     get expanded(): boolean;
     set expanded(value: boolean);
     get disabled(): boolean;

package/dist/components/layout/sidebar-toggle-button.js

@@ -37,10 +37,19 @@ const sidebarToggleButtonStyles = `
     color: var(--boe-token-text-text, #222222);
   }
 
-  /* Rotate the chevron to point the way the next activation will move. */
+  /* Point the glyph the way the next activation will move (left sidebar default). */
   [part="button"][data-expanded="false"] svg {
     transform: scaleX(-1);
   }
+
+  /* Right-side sidebar mirrors the direction. */
+  [part="button"][data-direction="right"][data-expanded="true"] svg {
+    transform: scaleX(-1);
+  }
+
+  [part="button"][data-direction="right"][data-expanded="false"] svg {
+    transform: none;
+  }
 `;
 /**
  * A disclosure control that expands and collapses a companion `box-nav-sidebar`.
@@ -51,9 +60,16 @@ const sidebarToggleButtonStyles = `
  */
 export class BoxSidebarToggleButtonElement extends BaseElement {
     static get observedAttributes() {
-        return ["controls", "disabled", "expanded", "label"];
+        return ["controls", "disabled", "expanded", "label", "direction"];
     }
     buttonEl;
+    /** Which side the companion sidebar sits on: `left` (default) or `right`. */
+    get direction() {
+        return this.getAttribute("direction") === "right" ? "right" : "left";
+    }
+    set direction(value) {
+        this.setAttribute("direction", value);
+    }
     get expanded() {
         // Default to expanded: a sidebar renders open until the user collapses it.
         return !this.hasAttribute("expanded") || this.getAttribute("expanded") !== "false";
@@ -116,8 +132,11 @@ export class BoxSidebarToggleButtonElement extends BaseElement {
         }
         const expanded = this.expanded;
         this.buttonEl.dataset.expanded = expanded ? "true" : "false";
+        this.buttonEl.dataset.direction = this.direction;
         this.buttonEl.setAttribute("aria-expanded", expanded ? "true" : "false");
         this.buttonEl.setAttribute("aria-label", this.label);
+        // Native hover tooltip reflects the action the next click performs.
+        this.buttonEl.title = expanded ? "Collapse sidebar" : "Expand sidebar";
         if (this.controls) {
             this.buttonEl.setAttribute("aria-controls", this.controls);
         }

package/dist/components/navigation/accordion.d.ts

@@ -6,6 +6,9 @@ type BoxAccordionItem = {
 };
 export declare class BoxAccordionElement extends BaseElement {
     static get observedAttributes(): string[];
+    /** Flat variant with no outer card border/background. */
+    get borderless(): boolean;
+    set borderless(value: boolean);
     private valueInternal;
     private lastItemsJson;
     private accordionEl;

package/dist/components/navigation/accordion.js

@@ -84,11 +84,26 @@ const accordionStyles = `
     display: none;
   }
 
+  /* Borderless variant: drop the outer card chrome, keep row dividers. */
+  :host([borderless]) [part="accordion"] {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    overflow: visible;
+  }
+
   ${boeNeutralInteractiveStyles('[part="trigger"]')}
 `;
 export class BoxAccordionElement extends BaseElement {
     static get observedAttributes() {
-        return ["items", "label", "value"];
+        return ["items", "label", "value", "borderless"];
+    }
+    /** Flat variant with no outer card border/background. */
+    get borderless() {
+        return this.hasAttribute("borderless");
+    }
+    set borderless(value) {
+        this.toggleAttribute("borderless", Boolean(value));
     }
     valueInternal = "";
     lastItemsJson = "";
@@ -158,7 +173,7 @@ export class BoxAccordionElement extends BaseElement {
               role="region"
               aria-labelledby="${triggerId}"
               ${isOpen ? "" : "hidden"}
-            >${escapeHtml(item.content ?? "")}</div>
+            ><slot name="panel-${escapeHtml(item.value)}">${escapeHtml(item.content ?? "")}</slot></div>
           </section>
         `;
         })

package/dist/components/navigation/breadcrumb.d.ts

@@ -0,0 +1,30 @@
+import { BaseElement } from "../../core/index.js";
+export interface BreadcrumbItem {
+    label: string;
+    /** Optional link target. Omit for a purely JS-driven crumb. */
+    href?: string;
+    /** Value reported on `navigate`; defaults to `href` or `label`. */
+    value?: string;
+}
+/**
+ * File-path breadcrumb trail with overflow collapse — box-ui-elements
+ * `Breadcrumb`. When the trail is longer than `max-items` the middle crumbs
+ * collapse into an ellipsis, always keeping the first crumb and the last two.
+ */
+export declare class BoxBreadcrumbElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private listEl;
+    get items(): BreadcrumbItem[];
+    set items(value: BreadcrumbItem[]);
+    get label(): string;
+    set label(value: string);
+    /** Max crumbs shown before the middle collapses to an ellipsis. 0 disables collapse. */
+    get maxItems(): number;
+    set maxItems(value: number);
+    /** Keep the first crumb + last two, collapsing the middle into an ellipsis. */
+    private collapse;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxBreadcrumbElement: (tagName?: string) => typeof BoxBreadcrumbElement;

package/dist/components/navigation/breadcrumb.js

@@ -0,0 +1,190 @@
+import { BaseElement } from "../../core/index.js";
+import { boeRadius, boeSpace } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-breadcrumb";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+const breadcrumbStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="list"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: ${boeSpace[1]};
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 13px;
+  }
+
+  [part="crumb"] {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  [part="link"] {
+    appearance: none;
+    border: none;
+    background: none;
+    font: inherit;
+    padding: 2px 6px;
+    border-radius: ${boeRadius.med};
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    text-decoration: none;
+    cursor: pointer;
+    max-width: 22ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition:
+      color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      background ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="link"]:hover {
+    color: var(--boe-token-text-text, #222222);
+    background: var(--boe-token-surface-surface-secondary, #f4f4f4);
+  }
+
+  [part="link"]:focus-visible {
+    outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5);
+    outline-offset: 1px;
+  }
+
+  [part="link"][aria-current="page"] {
+    color: var(--boe-token-text-text, #222222);
+    font-weight: 600;
+    cursor: default;
+  }
+
+  [part="separator"] {
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    user-select: none;
+  }
+
+  [part="ellipsis"] {
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    padding: 0 2px;
+  }
+`;
+/** A collapsed marker inserted when the trail exceeds `max-items`. */
+const ELLIPSIS = Symbol("ellipsis");
+/**
+ * File-path breadcrumb trail with overflow collapse — box-ui-elements
+ * `Breadcrumb`. When the trail is longer than `max-items` the middle crumbs
+ * collapse into an ellipsis, always keeping the first crumb and the last two.
+ */
+export class BoxBreadcrumbElement extends BaseElement {
+    static get observedAttributes() {
+        return ["items", "label", "max-items"];
+    }
+    listEl;
+    get items() {
+        const raw = this.getAttribute("items");
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set items(value) {
+        this.setAttribute("items", JSON.stringify(value));
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Breadcrumb";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    /** Max crumbs shown before the middle collapses to an ellipsis. 0 disables collapse. */
+    get maxItems() {
+        const raw = Number(this.getAttribute("max-items"));
+        return Number.isFinite(raw) && raw > 0 ? raw : 4;
+    }
+    set maxItems(value) {
+        this.setAttribute("max-items", String(value));
+    }
+    /** Keep the first crumb + last two, collapsing the middle into an ellipsis. */
+    collapse(items) {
+        const max = this.maxItems;
+        if (items.length <= max) {
+            return items;
+        }
+        return [items[0], ELLIPSIS, ...items.slice(-2)];
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${breadcrumbStyles}</style>
+      <nav part="nav">
+        <ol part="list"></ol>
+      </nav>
+    `;
+        this.listEl = this.shadowRoot.querySelector('[part="list"]');
+    }
+    setupListeners() {
+        this.listEl.addEventListener("click", event => {
+            const link = event.target.closest('[part="link"]');
+            if (!link || link.getAttribute("aria-current") === "page") {
+                return;
+            }
+            const value = link.dataset.value ?? "";
+            const href = link.getAttribute("href") ?? undefined;
+            // JS-only crumbs (no href) shouldn't navigate the browser.
+            if (!href) {
+                event.preventDefault();
+            }
+            this.dispatchEvent(new CustomEvent("navigate", {
+                bubbles: true,
+                composed: true,
+                detail: { value, href },
+            }));
+        });
+    }
+    update() {
+        if (!this.listEl) {
+            return;
+        }
+        this.shadowRoot?.querySelector('[part="nav"]')?.setAttribute("aria-label", this.label);
+        const crumbs = this.collapse(this.items);
+        const lastIndex = crumbs.length - 1;
+        this.listEl.innerHTML = crumbs
+            .map((crumb, index) => {
+            const separator = index < lastIndex ? `<span part="separator" aria-hidden="true">/</span>` : "";
+            if (crumb === ELLIPSIS) {
+                return `<li part="crumb"><span part="ellipsis" aria-label="Hidden path">…</span>${separator}</li>`;
+            }
+            const isLast = index === lastIndex;
+            const value = escapeHtml(crumb.value ?? crumb.href ?? crumb.label);
+            const tag = crumb.href && !isLast ? "a" : "button";
+            const hrefAttr = crumb.href && !isLast ? ` href="${escapeHtml(crumb.href)}"` : "";
+            const typeAttr = tag === "button" ? ' type="button"' : "";
+            const current = isLast ? ' aria-current="page"' : "";
+            return `<li part="crumb"><${tag} part="link" data-value="${value}"${hrefAttr}${typeAttr}${current}>${escapeHtml(crumb.label)}</${tag}>${separator}</li>`;
+        })
+            .join("");
+    }
+}
+export const defineBoxBreadcrumbElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxBreadcrumbElement);
+    return BoxBreadcrumbElement;
+};

package/dist/components/navigation/tabs.d.ts

@@ -8,6 +8,8 @@ export declare class BoxTabsElement extends BaseElement {
     private valueInternal;
     private lastOptionsJson;
     private tabsEl;
+    private panelsEl;
+    private readonly uid;
     get label(): string;
     set label(value: string);
     get layout(): "attached" | "separated";
@@ -19,6 +21,8 @@ export declare class BoxTabsElement extends BaseElement {
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private selectValue;
     private renderTabsMarkup;
+    /** One tabpanel per option, fed by a slot named for the option value. */
+    private renderPanelsMarkup;
     protected renderTemplate(): void;
     protected setupListeners(): void;
     protected update(): void;