@unofficialbox/box-open-elements 0.3.0 → 0.4.0

package/dist/components/actions/link-button.d.ts

@@ -2,6 +2,14 @@ import { BaseElement } from "../../core/index.js";
 export declare class BoxLinkButtonElement extends BaseElement {
     static get observedAttributes(): string[];
     private linkEl;
+    private labelEl;
+    private contentSlot;
+    /** Anchor target (e.g. `_blank`). Opening a new tab auto-adds a safe rel. */
+    get target(): string;
+    set target(value: string);
+    /** Explicit rel; defaults to `noopener noreferrer` when target is `_blank`. */
+    get rel(): string;
+    set rel(value: string);
     get href(): string;
     set href(value: string);
     get label(): string;
@@ -9,6 +17,7 @@ export declare class BoxLinkButtonElement extends BaseElement {
     get tone(): string;
     set tone(value: string);
     protected renderTemplate(): void;
+    protected setupListeners(): void;
     protected update(): void;
 }
 export declare const defineBoxLinkButtonElement: (tagName?: string) => typeof BoxLinkButtonElement;

package/dist/components/actions/link-button.js

@@ -86,9 +86,25 @@ const linkButtonStyles = `
 `;
 export class BoxLinkButtonElement extends BaseElement {
     static get observedAttributes() {
-        return ["href", "label", "tone"];
+        return ["href", "label", "tone", "target", "rel"];
     }
     linkEl;
+    labelEl;
+    contentSlot;
+    /** Anchor target (e.g. `_blank`). Opening a new tab auto-adds a safe rel. */
+    get target() {
+        return this.getAttribute("target") ?? "";
+    }
+    set target(value) {
+        this.setAttribute("target", value);
+    }
+    /** Explicit rel; defaults to `noopener noreferrer` when target is `_blank`. */
+    get rel() {
+        return this.getAttribute("rel") ?? "";
+    }
+    set rel(value) {
+        this.setAttribute("rel", value);
+    }
     get href() {
         return this.getAttribute("href") ?? "#";
     }
@@ -113,9 +129,18 @@ export class BoxLinkButtonElement extends BaseElement {
         }
         this.shadowRoot.innerHTML = `
       <style>${linkButtonStyles}</style>
-      <a part="link"></a>
+      <a part="link"><slot><span part="label"></span></slot></a>
     `;
         this.linkEl = this.shadowRoot.querySelector('[part="link"]');
+        this.contentSlot = this.shadowRoot.querySelector("slot");
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+    }
+    setupListeners() {
+        this.contentSlot.addEventListener("slotchange", () => {
+            if (this.isRendered) {
+                this.update();
+            }
+        });
     }
     update() {
         if (!this.linkEl) {
@@ -123,8 +148,34 @@ export class BoxLinkButtonElement extends BaseElement {
         }
         this.linkEl.dataset.tone = this.tone;
         this.linkEl.setAttribute("href", escapeHtml(safeHref(this.href)));
-        this.linkEl.setAttribute("aria-label", this.label);
-        this.linkEl.textContent = this.label;
+        // Rich children (slotted) replace the `label` text; keep the fallback in
+        // sync. Detect real host content only — assignedNodes() without flatten
+        // excludes the fallback span; ignore whitespace-only text nodes.
+        const hasSlotted = this.contentSlot
+            .assignedNodes()
+            .some(node => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? "").trim() !== "");
+        this.labelEl.textContent = this.label;
+        if (hasSlotted) {
+            this.linkEl.removeAttribute("aria-label");
+        }
+        else {
+            this.linkEl.setAttribute("aria-label", this.label);
+        }
+        const target = this.target;
+        if (target) {
+            this.linkEl.setAttribute("target", target);
+        }
+        else {
+            this.linkEl.removeAttribute("target");
+        }
+        // Explicit rel wins; opening a new tab defaults to a safe rel.
+        const rel = this.rel || (target === "_blank" ? "noopener noreferrer" : "");
+        if (rel) {
+            this.linkEl.setAttribute("rel", rel);
+        }
+        else {
+            this.linkEl.removeAttribute("rel");
+        }
     }
 }
 export const defineBoxLinkButtonElement = (tagName = DEFAULT_TAG_NAME) => {

package/dist/components/collections/carousel.d.ts

@@ -12,6 +12,9 @@ export declare class BoxCarouselElement extends BaseElement {
     private carouselEl;
     private labelEl;
     private stageEl;
+    private viewportEl;
+    private slottedStageEl;
+    private slideSlot;
     private mediaEl;
     private eyebrowEl;
     private titleEl;
@@ -28,6 +31,10 @@ export declare class BoxCarouselElement extends BaseElement {
     get value(): number;
     set value(value: number);
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /** Slotted slides (elements assigned to the `slide` slot). */
+    private slottedSlides;
+    /** Active slide count — slotted slides when present, else JSON items. */
+    private slideCount;
     private normalizeIndex;
     private emitValueChanged;
     private setIndex;

package/dist/components/collections/carousel.js

@@ -182,6 +182,15 @@ const carouselStyles = `
     line-height: 1.58;
   }
 
+  /* Slotted-slides mode: only the active slide is shown. */
+  [part="slotted-stage"][hidden] {
+    display: none;
+  }
+
+  [part="slotted-stage"] ::slotted(:not([data-carousel-active])) {
+    display: none;
+  }
+
   @media (max-width: 720px) {
     [part="viewport"] {
       grid-template-columns: 1fr;
@@ -197,6 +206,9 @@ export class BoxCarouselElement extends BaseElement {
     carouselEl;
     labelEl;
     stageEl;
+    viewportEl;
+    slottedStageEl;
+    slideSlot;
     mediaEl;
     eyebrowEl;
     titleEl;
@@ -244,8 +256,19 @@ export class BoxCarouselElement extends BaseElement {
         }
         super.attributeChangedCallback(name, oldValue, newValue);
     }
+    /** Slotted slides (elements assigned to the `slide` slot). */
+    slottedSlides() {
+        return this.slideSlot
+            ? this.slideSlot.assignedElements({ flatten: true })
+            : [];
+    }
+    /** Active slide count — slotted slides when present, else JSON items. */
+    slideCount() {
+        const slotted = this.slottedSlides().length;
+        return slotted > 0 ? slotted : this.items.length;
+    }
     normalizeIndex(value) {
-        const maxIndex = Math.max(0, this.items.length - 1);
+        const maxIndex = Math.max(0, this.slideCount() - 1);
         if (!Number.isFinite(value)) {
             return 0;
         }
@@ -265,10 +288,11 @@ export class BoxCarouselElement extends BaseElement {
         this.emitValueChanged(nextIndex);
     }
     changeBy(delta) {
-        if (this.items.length === 0) {
+        const count = this.slideCount();
+        if (count === 0) {
             return;
         }
-        const nextIndex = (this.valueInternal + delta + this.items.length) % this.items.length;
+        const nextIndex = (this.valueInternal + delta + count) % count;
         this.setIndex(nextIndex);
     }
     renderTemplate() {
@@ -288,6 +312,7 @@ export class BoxCarouselElement extends BaseElement {
               <div part="description" hidden></div>
             </div>
           </div>
+          <div part="slotted-stage" hidden><slot name="slide"></slot></div>
         </div>
         <div part="controls">
           <div part="nav">
@@ -302,6 +327,9 @@ export class BoxCarouselElement extends BaseElement {
         this.carouselEl = this.shadowRoot.querySelector('[part="carousel"]');
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
         this.stageEl = this.shadowRoot.querySelector('[part="stage"]');
+        this.viewportEl = this.shadowRoot.querySelector('[part="viewport"]');
+        this.slottedStageEl = this.shadowRoot.querySelector('[part="slotted-stage"]');
+        this.slideSlot = this.shadowRoot.querySelector('slot[name="slide"]');
         this.mediaEl = this.shadowRoot.querySelector('[part="media"]');
         this.eyebrowEl = this.shadowRoot.querySelector('[part="eyebrow"]');
         this.titleEl = this.shadowRoot.querySelector('[part="title"]');
@@ -315,6 +343,12 @@ export class BoxCarouselElement extends BaseElement {
     setupListeners() {
         this.previousEl.addEventListener("click", () => this.changeBy(-1));
         this.nextEl.addEventListener("click", () => this.changeBy(1));
+        this.slideSlot.addEventListener("slotchange", () => {
+            this.valueInternal = this.normalizeIndex(this.valueInternal);
+            if (this.isRendered) {
+                this.update();
+            }
+        });
         this.paginationEl.addEventListener("click", event => {
             const target = event.target?.closest('[part~="dot"]');
             if (!target || !this.paginationEl.contains(target)) {
@@ -342,11 +376,44 @@ export class BoxCarouselElement extends BaseElement {
         }
         const items = this.items;
         const itemsJson = this.getAttribute("items") ?? "";
-        const activeItem = items[this.valueInternal] ?? null;
         const label = this.label;
         this.carouselEl.setAttribute("aria-label", label);
         this.labelEl.textContent = label;
         this.paginationEl.setAttribute("aria-label", `${label} slides`);
+        // Slotted-slides mode takes precedence when the host provides slide content.
+        const slotted = this.slottedSlides();
+        if (slotted.length > 0) {
+            this.viewportEl.hidden = true;
+            this.slottedStageEl.hidden = false;
+            this.stageEl.hidden = false;
+            this.controlsEl.hidden = false;
+            this.emptyEl.hidden = true;
+            slotted.forEach((slide, index) => {
+                const active = index === this.valueInternal;
+                slide.toggleAttribute("data-carousel-active", active);
+                slide.setAttribute("aria-hidden", active ? "false" : "true");
+            });
+            this.paginationEl.innerHTML = slotted
+                .map((slide, index) => {
+                const dotPart = index === this.valueInternal ? "dot dot-selected" : "dot";
+                const title = slide.getAttribute("data-title") ?? slide.getAttribute("aria-label") ?? `${index + 1}`;
+                return `
+            <button
+              type="button"
+              part="${dotPart}"
+              aria-label="Go to slide ${index + 1}: ${escapeHtml(title)}"
+              aria-current="${index === this.valueInternal ? "true" : "false"}"
+              data-index="${index}"
+            ></button>
+          `;
+            })
+                .join("");
+            this.lastItemsJson = "";
+            return;
+        }
+        this.slottedStageEl.hidden = true;
+        this.viewportEl.hidden = false;
+        const activeItem = items[this.valueInternal] ?? null;
         if (!activeItem) {
             this.stageEl.hidden = true;
             this.controlsEl.hidden = true;

package/dist/components/collections/datalist-item.d.ts

@@ -10,8 +10,13 @@ export declare class BoxDatalistItemElement extends BaseElement {
     static get observedAttributes(): string[];
     private itemEl;
     private thumbEl;
+    private bodyEl;
     private labelEl;
     private metaEl;
+    private contentSlot;
+    /** Active-descendant highlight — set by a host that keeps DOM focus elsewhere. */
+    get active(): boolean;
+    set active(value: boolean);
     get label(): string;
     set label(value: string);
     get meta(): string;
@@ -27,6 +32,7 @@ export declare class BoxDatalistItemElement extends BaseElement {
     private choose;
     protected renderTemplate(): void;
     protected setupListeners(): void;
+    private syncSlot;
     protected update(): void;
 }
 export declare const defineBoxDatalistItemElement: (tagName?: string) => typeof BoxDatalistItemElement;

package/dist/components/collections/datalist-item.js

@@ -28,6 +28,11 @@ const datalistItemStyles = `
     background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #ffffff) 90%);
   }
 
+  /* Active-descendant highlight (host sets active; DOM focus stays on the input). */
+  [part="item"][data-active="true"] {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+  }
+
   [part="item"][data-disabled="true"] {
     opacity: 0.55;
     cursor: not-allowed;
@@ -73,6 +78,16 @@ const datalistItemStyles = `
   [part="meta"][hidden] {
     display: none;
   }
+
+  /* Arbitrary slotted content replaces the default label/meta when present. */
+  [part="content"]:not(.has-content) {
+    display: none;
+  }
+
+  [part="body"].has-slotted [part="label"],
+  [part="body"].has-slotted [part="meta"] {
+    display: none;
+  }
 `;
 /**
  * A single selectable row for a picker/typeahead list — a leading glyph, a
@@ -83,12 +98,21 @@ const datalistItemStyles = `
  */
 export class BoxDatalistItemElement extends BaseElement {
     static get observedAttributes() {
-        return ["disabled", "icon", "label", "meta", "selected", "value"];
+        return ["active", "disabled", "icon", "label", "meta", "selected", "value"];
     }
     itemEl;
     thumbEl;
+    bodyEl;
     labelEl;
     metaEl;
+    contentSlot;
+    /** Active-descendant highlight — set by a host that keeps DOM focus elsewhere. */
+    get active() {
+        return this.hasAttribute("active");
+    }
+    set active(value) {
+        this.toggleAttribute("active", value);
+    }
     get label() {
         return this.getAttribute("label") ?? "";
     }
@@ -146,13 +170,16 @@ export class BoxDatalistItemElement extends BaseElement {
         <span part="body">
           <span part="label"></span>
           <span part="meta" hidden></span>
+          <slot part="content"></slot>
         </span>
       </div>
     `;
         this.itemEl = this.shadowRoot.querySelector('[part="item"]');
         this.thumbEl = this.shadowRoot.querySelector('[part="thumb"]');
+        this.bodyEl = this.shadowRoot.querySelector('[part="body"]');
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
         this.metaEl = this.shadowRoot.querySelector('[part="meta"]');
+        this.contentSlot = this.shadowRoot.querySelector('slot[part="content"]');
     }
     setupListeners() {
         this.itemEl.addEventListener("click", () => this.choose());
@@ -162,6 +189,15 @@ export class BoxDatalistItemElement extends BaseElement {
                 this.choose();
             }
         });
+        this.contentSlot.addEventListener("slotchange", () => this.syncSlot());
+    }
+    syncSlot() {
+        if (!this.contentSlot) {
+            return;
+        }
+        const hasContent = this.contentSlot.assignedNodes({ flatten: true }).length > 0;
+        this.contentSlot.classList.toggle("has-content", hasContent);
+        this.bodyEl.classList.toggle("has-slotted", hasContent);
     }
     update() {
         if (!this.itemEl || !this.thumbEl || !this.labelEl || !this.metaEl) {
@@ -173,7 +209,9 @@ export class BoxDatalistItemElement extends BaseElement {
         this.itemEl.setAttribute("aria-selected", selected ? "true" : "false");
         this.itemEl.dataset.selected = selected ? "true" : "false";
         this.itemEl.dataset.disabled = disabled ? "true" : "false";
+        this.itemEl.dataset.active = this.active ? "true" : "false";
         this.itemEl.tabIndex = disabled ? -1 : 0;
+        this.syncSlot();
         if (disabled) {
             this.itemEl.setAttribute("aria-disabled", "true");
         }

package/dist/components/collections/draggable-list.js

@@ -172,7 +172,7 @@ export class BoxDraggableListElement extends BaseElement {
                 <path d="M6 4h.01M10 4h.01M6 8h.01M10 8h.01M6 12h.01M10 12h.01" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
               </svg>
             </button>
-            <span part="item-label">${escapeHtml(item.label)}</span>
+            <slot name="row-${escapeHtml(item.value)}" part="item-content"><span part="item-label">${escapeHtml(item.label)}</span></slot>
           </li>
         `;
         })

package/dist/components/collections/grid-view.js

@@ -202,6 +202,8 @@ export class BoxGridViewElement extends BaseElement {
             const metaMarkup = item.meta
                 ? `<span part="meta">${escapeHtml(item.meta)}</span>`
                 : "";
+            // Per-item named slot lets a host override the tile body (slotRenderer
+            // parity); the default thumb/label/meta is the slot's fallback content.
             return `
           <button
             type="button"
@@ -211,9 +213,11 @@ export class BoxGridViewElement extends BaseElement {
             aria-selected="${String(isSelected)}"
             tabindex="${item.value === tabbableValue ? "0" : "-1"}"
           >
-            <span part="thumb" aria-hidden="true">${iconMarkup}</span>
-            <span part="tile-label">${escapeHtml(item.label)}</span>
-            ${metaMarkup}
+            <slot name="tile-${escapeHtml(item.value)}" part="tile-slot">
+              <span part="thumb" aria-hidden="true">${iconMarkup}</span>
+              <span part="tile-label">${escapeHtml(item.label)}</span>
+              ${metaMarkup}
+            </slot>
           </button>
         `;
         })

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

@@ -6,6 +6,7 @@ export declare class BoxAlertElement extends BaseElement {
     private toneLabelEl;
     private titleEl;
     private messageEl;
+    private richSlot;
     private dismissEl;
     get open(): boolean;
     set open(value: boolean);
@@ -21,6 +22,7 @@ export declare class BoxAlertElement extends BaseElement {
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     dismiss(): void;
     protected renderTemplate(): void;
+    private hasRichContent;
     protected setupListeners(): void;
     protected update(): void;
 }

package/dist/components/feedback/alert.js

@@ -90,6 +90,22 @@ const alertStyles = `
     display: none;
   }
 
+  /* Rich body — slotted markup (links, buttons) beyond the plain message.
+     Hidden (taking no grid gap) until content is assigned. */
+  [part="rich"] {
+    display: block;
+    line-height: 1.45;
+  }
+
+  [part="rich"]:not(.has-content) {
+    display: none;
+  }
+
+  [part="rich"]::slotted(a) {
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    font-weight: 600;
+  }
+
   .sr-only {
     position: absolute;
     inline-size: 1px;
@@ -129,6 +145,7 @@ export class BoxAlertElement extends BaseElement {
     toneLabelEl;
     titleEl;
     messageEl;
+    richSlot;
     dismissEl;
     get open() {
         return this.openValue;
@@ -202,6 +219,7 @@ export class BoxAlertElement extends BaseElement {
           <span part="tone-label" class="sr-only"></span>
           <h2 part="title" id="alert-title" hidden></h2>
           <span part="description message" hidden></span>
+          <slot part="rich"></slot>
         </div>
         <button type="button" part="dismiss" aria-label="Dismiss alert">Dismiss</button>
       </div>
@@ -210,19 +228,30 @@ export class BoxAlertElement extends BaseElement {
         this.toneLabelEl = this.shadowRoot.querySelector('[part="tone-label"]');
         this.titleEl = this.shadowRoot.querySelector('[part="title"]');
         this.messageEl = this.shadowRoot.querySelector('[part~="description"]');
+        this.richSlot = this.shadowRoot.querySelector('slot[part="rich"]');
         this.dismissEl = this.shadowRoot.querySelector('[part="dismiss"]');
     }
+    hasRichContent() {
+        return this.richSlot?.assignedNodes({ flatten: true }).length > 0;
+    }
     setupListeners() {
         this.dismissEl.addEventListener("click", () => {
             this.dismiss();
         });
+        this.richSlot.addEventListener("slotchange", () => {
+            if (this.isRendered) {
+                this.update();
+            }
+        });
     }
     update() {
         if (!this.alertEl) {
             return;
         }
-        const visible = this.openValue && Boolean(this.heading || this.message);
+        const hasRich = this.hasRichContent();
+        const visible = this.openValue && Boolean(this.heading || this.message || hasRich);
         this.hidden = !visible;
+        this.richSlot.classList.toggle("has-content", hasRich);
         if (!visible) {
             return;
         }

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

@@ -2,10 +2,20 @@ import { BaseElement } from "../../core/index.js";
 export declare class BoxBadgeElement extends BaseElement {
     static get observedAttributes(): string[];
     private badgeEl;
+    private lastText;
     get label(): string;
     set label(value: string);
     get tone(): string;
     set tone(value: string);
+    /** When the label is a count, cap the displayed number, e.g. max=99 → "99+". */
+    get max(): number | null;
+    set max(value: number | null);
+    /** Hide the badge entirely when the count is zero or the label is empty. */
+    get hideWhenZero(): boolean;
+    set hideWhenZero(value: boolean);
+    /** The label after applying the `max` cap (e.g. "128" with max=99 → "99+"). */
+    private displayText;
+    private isEmptyCount;
     protected renderTemplate(): void;
     protected update(): void;
 }

package/dist/components/feedback/badge.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
-import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boeMotionDuration, boeMotionEasing, boeReducedMotionStyles, } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-badge";
 const badgeStyles = `
   :host {
@@ -52,12 +52,31 @@ const badgeStyles = `
     background: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
     color: #ffffff;
   }
+
+  /* Hidden when used as a count that is zero/empty with hide-when-zero. */
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* Count "pop" when the value changes (opt-in via the animate attribute). */
+  [part="badge"].boe-pop {
+    animation: boe-badge-pop ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  @keyframes boe-badge-pop {
+    0% { transform: scale(0.7); }
+    60% { transform: scale(1.15); }
+    100% { transform: scale(1); }
+  }
+
+  ${boeReducedMotionStyles('[part="badge"].boe-pop', "animation: none;")}
 `;
 export class BoxBadgeElement extends BaseElement {
     static get observedAttributes() {
-        return ["label", "tone"];
+        return ["label", "tone", "max", "hide-when-zero", "animate"];
     }
     badgeEl;
+    lastText = null;
     get label() {
         return this.getAttribute("label") ?? "";
     }
@@ -70,6 +89,42 @@ export class BoxBadgeElement extends BaseElement {
     set tone(value) {
         this.setAttribute("tone", value);
     }
+    /** When the label is a count, cap the displayed number, e.g. max=99 → "99+". */
+    get max() {
+        const raw = this.getAttribute("max");
+        if (raw === null)
+            return null;
+        const parsed = Number(raw);
+        return Number.isFinite(parsed) ? parsed : null;
+    }
+    set max(value) {
+        if (value === null) {
+            this.removeAttribute("max");
+        }
+        else {
+            this.setAttribute("max", String(value));
+        }
+    }
+    /** Hide the badge entirely when the count is zero or the label is empty. */
+    get hideWhenZero() {
+        return this.hasAttribute("hide-when-zero");
+    }
+    set hideWhenZero(value) {
+        this.toggleAttribute("hide-when-zero", value);
+    }
+    /** The label after applying the `max` cap (e.g. "128" with max=99 → "99+"). */
+    displayText() {
+        const raw = this.label;
+        const max = this.max;
+        if (max !== null && /^\d+$/.test(raw.trim()) && Number(raw) > max) {
+            return `${max}+`;
+        }
+        return raw;
+    }
+    isEmptyCount() {
+        const raw = this.label.trim();
+        return raw === "" || raw === "0";
+    }
     renderTemplate() {
         if (!this.shadowRoot) {
             return;
@@ -84,9 +139,20 @@ export class BoxBadgeElement extends BaseElement {
         if (!this.badgeEl) {
             return;
         }
+        // Hide when used as a count that is zero/empty and hide-when-zero is set.
+        const shouldHide = this.hideWhenZero && this.isEmptyCount();
+        this.toggleAttribute("hidden", shouldHide);
+        const text = this.displayText();
         this.badgeEl.dataset.tone = this.tone;
-        this.badgeEl.setAttribute("aria-label", this.label);
-        this.badgeEl.textContent = this.label;
+        this.badgeEl.setAttribute("aria-label", text);
+        this.badgeEl.textContent = text;
+        // Re-trigger the pop animation when an animated count actually changes.
+        if (this.hasAttribute("animate") && this.lastText !== null && this.lastText !== text) {
+            this.badgeEl.classList.remove("boe-pop");
+            void this.badgeEl.offsetWidth; // force reflow so the animation restarts
+            this.badgeEl.classList.add("boe-pop");
+        }
+        this.lastText = text;
     }
 }
 export const defineBoxBadgeElement = (tagName = DEFAULT_TAG_NAME) => {

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

@@ -8,7 +8,11 @@ export declare class BoxChipElement extends BaseElement {
     static get observedAttributes(): string[];
     private chipEl;
     private labelEl;
+    private iconSlot;
     private removeEl;
+    /** Chip size: `medium` (default) or `small`. */
+    get size(): string;
+    set size(value: string);
     get label(): string;
     set label(value: string);
     get value(): string;
@@ -28,6 +32,7 @@ export declare class BoxChipElement extends BaseElement {
     protected renderTemplate(): void;
     protected setupListeners(): void;
     private syncRemoveButton;
+    private syncIconSlot;
     protected update(): void;
 }
 export declare const defineBoxChipElement: (tagName?: string) => typeof BoxChipElement;