@unofficialbox/box-open-elements 0.2.0 → 0.3.0

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

@@ -1,4 +1,4 @@
-import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } from "../../core/index.js";
 import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
@@ -45,11 +45,12 @@ const dateFieldStyles = `
   }
 
   ${boeFormFieldErrorStyles}
+  ${boeFormFieldSupportStyles}
 `;
 export class BoxDateFieldElement extends FormAssociatedElement {
     static get observedAttributes() {
         return [
-            ...FormAssociatedElement.formObservedAttributes,
+            ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
             "label",
             "max",
@@ -60,6 +61,7 @@ export class BoxDateFieldElement extends FormAssociatedElement {
     valueInternal = "";
     inputEl;
     labelEl;
+    descriptionEl;
     errorEl;
     get disabled() {
         return this.hasAttribute("disabled");
@@ -135,11 +137,13 @@ export class BoxDateFieldElement extends FormAssociatedElement {
       <style>${dateFieldStyles}</style>
       <label part="field">
         <span part="label"></span>
+        ${formDescriptionMarkup()}
         <input type="date" part="input" />
         ${formErrorMessageMarkup()}
       </label>
     `;
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
         this.inputEl = this.shadowRoot.querySelector('[part="input"]');
         this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
     }
@@ -174,6 +178,7 @@ export class BoxDateFieldElement extends FormAssociatedElement {
         else {
             this.inputEl.removeAttribute("disabled");
         }
+        this.applyFieldSupport(this.labelEl, this.inputEl, this.descriptionEl);
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }

package/dist/components/forms/pill-selector-dropdown.d.ts

@@ -29,6 +29,17 @@ export declare class BoxPillSelectorDropdownElement extends FormAssociatedElemen
     set label(value: string);
     get placeholder(): string;
     set placeholder(value: string);
+    /** Allow creating pills from free-typed text (collaborator / email input). */
+    get allowCustom(): boolean;
+    set allowCustom(value: boolean);
+    /** Optional regex a custom entry must match (e.g. an email pattern). */
+    get pattern(): string;
+    set pattern(value: string);
+    private customInputEl;
+    /** A custom entry is valid when non-empty and (if set) matches `pattern`. */
+    private isValidCustom;
+    /** Add a validated custom pill; flag the input and emit `invalid-entry` otherwise. */
+    private tryAddCustom;
     get options(): PillOption[];
     set options(value: PillOption[]);
     get value(): string[];

package/dist/components/forms/pill-selector-dropdown.js

@@ -67,6 +67,31 @@ const pillSelectorStyles = `
     display: inline-block;
   }
 
+  [part="custom-input"] {
+    flex: 1 1 6rem;
+    min-width: 6rem;
+    appearance: none;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--boe-token-text-text, #222222);
+    font: inherit;
+    font-size: 0.85rem;
+    padding: 0.3rem 0.2rem;
+  }
+
+  [part="custom-input"][hidden] {
+    display: none;
+  }
+
+  [part="custom-input"][aria-invalid="true"] {
+    color: var(--boe-token-surface-status-surface-error, #ed3757);
+  }
+
+  [part="trigger"][hidden] {
+    display: none;
+  }
+
   [part="trigger"] {
     appearance: none;
     display: inline-flex;
@@ -152,6 +177,8 @@ export class BoxPillSelectorDropdownElement extends FormAssociatedElement {
             "options",
             "placeholder",
             "value",
+            "allow-custom",
+            "pattern",
         ];
     }
     valueInternal = [];
@@ -188,6 +215,58 @@ export class BoxPillSelectorDropdownElement extends FormAssociatedElement {
     set placeholder(value) {
         this.setAttribute("placeholder", value);
     }
+    /** Allow creating pills from free-typed text (collaborator / email input). */
+    get allowCustom() {
+        return this.hasAttribute("allow-custom");
+    }
+    set allowCustom(value) {
+        this.toggleAttribute("allow-custom", Boolean(value));
+    }
+    /** Optional regex a custom entry must match (e.g. an email pattern). */
+    get pattern() {
+        return this.getAttribute("pattern") ?? "";
+    }
+    set pattern(value) {
+        if (value) {
+            this.setAttribute("pattern", value);
+        }
+        else {
+            this.removeAttribute("pattern");
+        }
+    }
+    customInputEl = null;
+    /** A custom entry is valid when non-empty and (if set) matches `pattern`. */
+    isValidCustom(text) {
+        const trimmed = text.trim();
+        if (!trimmed) {
+            return false;
+        }
+        const pattern = this.pattern;
+        if (!pattern) {
+            return true;
+        }
+        try {
+            return new RegExp(`^(?:${pattern})$`).test(trimmed);
+        }
+        catch {
+            return true;
+        }
+    }
+    /** Add a validated custom pill; flag the input and emit `invalid-entry` otherwise. */
+    tryAddCustom(text) {
+        const trimmed = text.trim();
+        if (!trimmed) {
+            return false;
+        }
+        if (!this.isValidCustom(trimmed)) {
+            this.customInputEl?.setAttribute("aria-invalid", "true");
+            this.dispatchEvent(new CustomEvent("invalid-entry", { bubbles: true, composed: true, detail: { value: trimmed } }));
+            return false;
+        }
+        this.customInputEl?.setAttribute("aria-invalid", "false");
+        this.addValue(trimmed);
+        return true;
+    }
     get options() {
         const raw = this.getAttribute("options");
         if (!raw) {
@@ -354,6 +433,7 @@ export class BoxPillSelectorDropdownElement extends FormAssociatedElement {
       <style>${pillSelectorStyles}</style>
       <div part="field" role="group">
         <span part="pills"></span>
+        <input part="custom-input" type="text" hidden />
         <div part="dropdown">
           <button type="button" part="trigger" aria-haspopup="menu"></button>
         </div>
@@ -362,6 +442,7 @@ export class BoxPillSelectorDropdownElement extends FormAssociatedElement {
     `;
         this.fieldEl = this.shadowRoot.querySelector('[part="field"]');
         this.pillsEl = this.shadowRoot.querySelector('[part="pills"]');
+        this.customInputEl = this.shadowRoot.querySelector('[part="custom-input"]');
         this.dropdownEl = this.shadowRoot.querySelector('[part="dropdown"]');
         this.triggerEl = this.shadowRoot.querySelector('[part="trigger"]');
         this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
@@ -393,6 +474,42 @@ export class BoxPillSelectorDropdownElement extends FormAssociatedElement {
             }
             this.removeValue(remove.dataset.value ?? "");
         });
+        // Custom pill entry: Enter/comma commit the typed value; Backspace on an
+        // empty input removes the last pill; paste splits on commas/newlines.
+        this.customInputEl?.addEventListener("keydown", event => {
+            const input = event.target;
+            const key = event.key;
+            if (key === "Enter" || key === ",") {
+                event.preventDefault();
+                if (this.tryAddCustom(input.value)) {
+                    input.value = "";
+                }
+            }
+            else if (key === "Backspace" && input.value === "" && this.valueInternal.length) {
+                event.preventDefault();
+                this.removeValue(this.valueInternal[this.valueInternal.length - 1]);
+            }
+            else {
+                input.setAttribute("aria-invalid", "false");
+            }
+        });
+        this.customInputEl?.addEventListener("paste", event => {
+            const text = event.clipboardData?.getData("text") ?? "";
+            if (!/[,\n;]/.test(text)) {
+                return; // single token — let it type normally
+            }
+            event.preventDefault();
+            for (const piece of text.split(/[,\n;]+/)) {
+                this.tryAddCustom(piece);
+            }
+            event.target.value = "";
+        });
+        // Commit a half-typed entry when focus leaves the input.
+        this.customInputEl?.addEventListener("blur", () => {
+            if (this.customInputEl && this.tryAddCustom(this.customInputEl.value)) {
+                this.customInputEl.value = "";
+            }
+        });
         this.dropdownEl.addEventListener("click", event => {
             const option = event.target.closest('[part="option"]');
             if (!option || !this.dropdownEl.contains(option)) {
@@ -439,6 +556,16 @@ export class BoxPillSelectorDropdownElement extends FormAssociatedElement {
         this.fieldEl.setAttribute("aria-label", this.label);
         this.triggerEl.textContent = `+ ${this.placeholder}`;
         this.triggerEl.setAttribute("aria-expanded", String(this.open));
+        // Free-text entry input (collaborator / email token input).
+        if (this.customInputEl) {
+            const custom = this.allowCustom;
+            this.customInputEl.hidden = !custom;
+            this.customInputEl.placeholder = this.placeholder;
+            this.customInputEl.setAttribute("aria-label", `${this.label} — type to add`);
+            // With a free-text input, the +Add trigger is only useful when there are
+            // still fixed options to pick; hide it otherwise to keep the field clean.
+            this.triggerEl.hidden = custom && this.availableOptions().length === 0;
+        }
         this.pillsEl.innerHTML = this.valueInternal
             .map(value => `
           <span part="pill" data-value="${escapeHtml(value)}">

package/dist/components/forms/search-field.d.ts

@@ -5,6 +5,7 @@ export declare class BoxSearchFieldElement extends FormAssociatedElement {
     private valueInternal;
     private inputEl;
     private labelEl;
+    private descriptionEl;
     private submitEl;
     private clearEl;
     private errorEl;

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

@@ -1,4 +1,4 @@
-import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } from "../../core/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-search-field";
@@ -122,11 +122,12 @@ const searchFieldStyles = `
   }
 
   ${boeFormFieldErrorStyles}
+  ${boeFormFieldSupportStyles}
 `;
 export class BoxSearchFieldElement extends FormAssociatedElement {
     static get observedAttributes() {
         return [
-            ...FormAssociatedElement.formObservedAttributes,
+            ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
             "label",
             "placeholder",
@@ -136,6 +137,7 @@ export class BoxSearchFieldElement extends FormAssociatedElement {
     valueInternal = "";
     inputEl;
     labelEl;
+    descriptionEl;
     submitEl;
     clearEl;
     errorEl;
@@ -206,6 +208,7 @@ export class BoxSearchFieldElement extends FormAssociatedElement {
       <style>${searchFieldStyles}</style>
       <label part="field">
         <span part="label"></span>
+        ${formDescriptionMarkup()}
         <div part="input-shell">
           <input type="search" part="input" />
           <button type="button" part="submit">Search</button>
@@ -215,6 +218,7 @@ export class BoxSearchFieldElement extends FormAssociatedElement {
       </label>
     `;
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
         this.inputEl = this.shadowRoot.querySelector('[part="input"]');
         this.submitEl = this.shadowRoot.querySelector('[part="submit"]');
         this.clearEl = this.shadowRoot.querySelector('[part="clear"]');
@@ -280,6 +284,7 @@ export class BoxSearchFieldElement extends FormAssociatedElement {
             this.submitEl.removeAttribute("disabled");
         }
         this.clearEl.disabled = this.disabled || this.valueInternal.length === 0;
+        this.applyFieldSupport(this.labelEl, this.inputEl, this.descriptionEl);
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }

package/dist/components/forms/select.d.ts

@@ -5,6 +5,7 @@ export declare class BoxSelectElement extends FormAssociatedElement {
     private valueInternal;
     private selectEl;
     private labelEl;
+    private descriptionEl;
     private errorEl;
     get value(): string;
     set value(nextValue: string);

package/dist/components/forms/select.js

@@ -1,4 +1,4 @@
-import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } from "../../core/index.js";
 import { boeControl, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-select";
 const escapeHtml = (value) => value
@@ -64,11 +64,12 @@ const selectStyles = `
   }
 
   ${boeFormFieldErrorStyles}
+  ${boeFormFieldSupportStyles}
 `;
 export class BoxSelectElement extends FormAssociatedElement {
     static get observedAttributes() {
         return [
-            ...FormAssociatedElement.formObservedAttributes,
+            ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
             "label",
             "options",
@@ -78,6 +79,7 @@ export class BoxSelectElement extends FormAssociatedElement {
     valueInternal = "";
     selectEl;
     labelEl;
+    descriptionEl;
     errorEl;
     get value() {
         return this.valueInternal;
@@ -147,11 +149,13 @@ export class BoxSelectElement extends FormAssociatedElement {
       <style>${selectStyles}</style>
       <label part="field">
         <span part="label"></span>
+        ${formDescriptionMarkup()}
         <select part="select"></select>
         ${formErrorMessageMarkup()}
       </label>
     `;
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
         this.selectEl = this.shadowRoot.querySelector('[part="select"]');
         this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
     }
@@ -185,6 +189,7 @@ export class BoxSelectElement extends FormAssociatedElement {
         else {
             this.selectEl.removeAttribute("disabled");
         }
+        this.applyFieldSupport(this.labelEl, this.selectEl, this.descriptionEl);
         this.applyInvalidState(this.selectEl, this.errorEl);
     }
 }

package/dist/components/forms/text-field.d.ts

@@ -5,6 +5,7 @@ export declare class BoxTextFieldElement extends FormAssociatedElement {
     private valueInternal;
     private inputEl;
     private labelEl;
+    private descriptionEl;
     private errorEl;
     get value(): string;
     set value(nextValue: string);

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

@@ -1,4 +1,4 @@
-import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } from "../../core/index.js";
 import { boeControl, boeInputControlStyles, boeSpace } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-text-field";
 /** Input chrome tracks BUE `@mixin box-inputs` (`src/styles/_inputs.scss`). */
@@ -34,11 +34,12 @@ const textFieldStyles = `
   }
 
   ${boeFormFieldErrorStyles}
+  ${boeFormFieldSupportStyles}
 `;
 export class BoxTextFieldElement extends FormAssociatedElement {
     static get observedAttributes() {
         return [
-            ...FormAssociatedElement.formObservedAttributes,
+            ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
             "label",
             "placeholder",
@@ -48,6 +49,7 @@ export class BoxTextFieldElement extends FormAssociatedElement {
     valueInternal = "";
     inputEl;
     labelEl;
+    descriptionEl;
     errorEl;
     get value() {
         return this.valueInternal;
@@ -102,11 +104,13 @@ export class BoxTextFieldElement extends FormAssociatedElement {
       <style>${textFieldStyles}</style>
       <label part="field">
         <span part="label"></span>
+        ${formDescriptionMarkup()}
         <input type="text" part="input" />
         ${formErrorMessageMarkup()}
       </label>
     `;
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
         this.inputEl = this.shadowRoot.querySelector('[part="input"]');
         this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
     }
@@ -138,6 +142,8 @@ export class BoxTextFieldElement extends FormAssociatedElement {
         else {
             this.inputEl.removeAttribute("disabled");
         }
+        // After the label text is (re)set, since it clears the required mark.
+        this.applyFieldSupport(this.labelEl, this.inputEl, this.descriptionEl);
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }

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;