@unofficialbox/box-open-elements 0.3.0 → 0.5.0

package/dist/components/collections/carousel.js

@@ -182,13 +182,23 @@ 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;
     }
   }
 `;
-export class BoxCarouselElement extends BaseElement {
+export class Carousel extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["items", "label", "value"];
     }
@@ -197,6 +207,9 @@ export class BoxCarouselElement extends BaseElement {
     carouselEl;
     labelEl;
     stageEl;
+    viewportEl;
+    slottedStageEl;
+    slideSlot;
     mediaEl;
     eyebrowEl;
     titleEl;
@@ -244,8 +257,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 +289,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 +313,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 +328,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 +344,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 +377,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;
@@ -396,11 +464,4 @@ export class BoxCarouselElement extends BaseElement {
         }
     }
 }
-export const defineBoxCarouselElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxCarouselElement);
-    return BoxCarouselElement;
-};
+Carousel.register();

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

@@ -6,12 +6,18 @@ import { BaseElement } from "../../core/index.js";
  * Enter/Space; `selected` reflects to `aria-selected`. The host owns the list
  * and its roving focus.
  */
-export declare class BoxDatalistItemElement extends BaseElement {
+export declare class DatalistItem extends BaseElement {
+    static readonly tagName: string;
     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 +33,6 @@ 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
@@ -81,14 +96,24 @@ const datalistItemStyles = `
  * Enter/Space; `selected` reflects to `aria-selected`. The host owns the list
  * and its roving focus.
  */
-export class BoxDatalistItemElement extends BaseElement {
+export class DatalistItem extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     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 +171,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 +190,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 +210,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");
         }
@@ -186,11 +225,4 @@ export class BoxDatalistItemElement extends BaseElement {
         this.metaEl.hidden = !meta;
     }
 }
-export const defineBoxDatalistItemElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxDatalistItemElement);
-    return BoxDatalistItemElement;
-};
+DatalistItem.register();

package/dist/components/collections/draggable-list.d.ts

@@ -10,7 +10,8 @@ type BoxDraggableListItem = {
  * `reorder` event carrying the moved value, its old/new index, and the new
  * order. It owns no persistence — the host stores the order.
  */
-export declare class BoxDraggableListElement extends BaseElement {
+export declare class DraggableList extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private dragValue;
     private focusValue;
@@ -29,5 +30,4 @@ export declare class BoxDraggableListElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxDraggableListElement: (tagName?: string) => typeof BoxDraggableListElement;
 export {};

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

@@ -93,7 +93,8 @@ const draggableListStyles = `
  * `reorder` event carrying the moved value, its old/new index, and the new
  * order. It owns no persistence — the host stores the order.
  */
-export class BoxDraggableListElement extends BaseElement {
+export class DraggableList extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["items", "label"];
     }
@@ -172,7 +173,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>
         `;
         })
@@ -296,11 +297,4 @@ export class BoxDraggableListElement extends BaseElement {
         }
     }
 }
-export const defineBoxDraggableListElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxDraggableListElement);
-    return BoxDraggableListElement;
-};
+DraggableList.register();

package/dist/components/collections/grid-view.d.ts

@@ -12,7 +12,8 @@ type BoxGridViewItem = {
  * listbox: one tile is tabbable (roving `tabindex`), arrow keys move focus, and
  * Enter/Space or click selects. It owns no transport.
  */
-export declare class BoxGridViewElement extends BaseElement {
+export declare class GridView extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private focusValue;
@@ -34,5 +35,4 @@ export declare class BoxGridViewElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxGridViewElement: (tagName?: string) => typeof BoxGridViewElement;
 export {};

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

@@ -106,7 +106,8 @@ const gridViewStyles = `
  * listbox: one tile is tabbable (roving `tabindex`), arrow keys move focus, and
  * Enter/Space or click selects. It owns no transport.
  */
-export class BoxGridViewElement extends BaseElement {
+export class GridView extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["items", "label", "value"];
     }
@@ -202,6 +203,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 +214,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>
         `;
         })
@@ -311,11 +316,4 @@ export class BoxGridViewElement extends BaseElement {
         }
     }
 }
-export const defineBoxGridViewElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxGridViewElement);
-    return BoxGridViewElement;
-};
+GridView.register();

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

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxPaginationElement extends BaseElement {
+export declare class Pagination extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private previousEl;
     private nextEl;
@@ -16,4 +17,3 @@ export declare class BoxPaginationElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxPaginationElement: (tagName?: string) => typeof BoxPaginationElement;

package/dist/components/collections/pagination.js

@@ -52,7 +52,8 @@ const paginationStyles = `
     white-space: nowrap;
   }
 `;
-export class BoxPaginationElement extends BaseElement {
+export class Pagination extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["page", "page-size", "total-items"];
     }
@@ -137,11 +138,4 @@ export class BoxPaginationElement extends BaseElement {
         this.summaryEl.textContent = `Showing ${startItem}-${endItem} of ${this.totalItems}`;
     }
 }
-export const defineBoxPaginationElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxPaginationElement);
-    return BoxPaginationElement;
-};
+Pagination.register();

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

@@ -20,7 +20,8 @@ export type TableSelectionMode = "none" | "single" | "multiple";
  * toggle, Ctrl/Cmd+A select-all, Escape clear). Sorting is host-owned: sortable
  * headers emit `sort` and the host reorders `rows`.
  */
-export declare class BoxTableElement extends BaseElement {
+export declare class Table extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private bodyEl;
     private headEl;
@@ -50,4 +51,3 @@ export declare class BoxTableElement extends BaseElement {
     private applySelectionState;
     protected update(): void;
 }
-export declare const defineBoxTableElement: (tagName?: string) => typeof BoxTableElement;

package/dist/components/collections/table.js

@@ -84,7 +84,8 @@ const tableStyles = `
  * toggle, Ctrl/Cmd+A select-all, Escape clear). Sorting is host-owned: sortable
  * headers emit `sort` and the host reorders `rows`.
  */
-export class BoxTableElement extends BaseElement {
+export class Table extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["columns", "rows", "selection-mode", "label", "sort-key", "sort-direction"];
     }
@@ -313,11 +314,4 @@ export class BoxTableElement extends BaseElement {
             .join("");
     }
 }
-export const defineBoxTableElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxTableElement);
-    return BoxTableElement;
-};
+Table.register();

package/dist/components/collections/thumbnail-card.d.ts

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxThumbnailCardElement extends BaseElement {
+export declare class ThumbnailCard extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private cardEl;
     private titleEl;
@@ -16,4 +17,3 @@ export declare class BoxThumbnailCardElement extends BaseElement {
     private activate;
     protected update(): void;
 }
-export declare const defineBoxThumbnailCardElement: (tagName?: string) => typeof BoxThumbnailCardElement;

package/dist/components/collections/thumbnail-card.js

@@ -105,7 +105,8 @@ const thumbnailCardStyles = `
     display: none;
   }
 `;
-export class BoxThumbnailCardElement extends BaseElement {
+export class ThumbnailCard extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["title", "subtitle", "interactive", "highlight-on-hover"];
     }
@@ -200,11 +201,4 @@ export class BoxThumbnailCardElement extends BaseElement {
         }
     }
 }
-export const defineBoxThumbnailCardElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxThumbnailCardElement);
-    return BoxThumbnailCardElement;
-};
+ThumbnailCard.register();

package/dist/components/collections/tree-grid.d.ts

@@ -9,7 +9,8 @@ type BoxTreeGridItem = {
     label: string;
     value: string;
 };
-export declare class BoxTreeGridElement extends BaseElement {
+export declare class TreeGrid extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private expandedInternal;
     private valueInternal;
@@ -43,5 +44,4 @@ export declare class BoxTreeGridElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxTreeGridElement: (tagName?: string) => typeof BoxTreeGridElement;
 export {};

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

@@ -220,7 +220,8 @@ const treeGridStyles = `
     color: var(--boe-token-text-text-secondary, #6f6f6f);
   }
 `;
-export class BoxTreeGridElement extends BaseElement {
+export class TreeGrid extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["columns", "items", "label", "value"];
     }
@@ -583,11 +584,4 @@ export class BoxTreeGridElement extends BaseElement {
         }
     }
 }
-export const defineBoxTreeGridElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxTreeGridElement);
-    return BoxTreeGridElement;
-};
+TreeGrid.register();

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

@@ -4,7 +4,8 @@ type BoxTreeItem = {
     label: string;
     value?: string;
 };
-export declare class BoxTreeElement extends BaseElement {
+export declare class Tree extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private expandedInternal;
     private valueInternal;
@@ -33,5 +34,4 @@ export declare class BoxTreeElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxTreeElement: (tagName?: string) => typeof BoxTreeElement;
 export {};

package/dist/components/collections/tree.js

@@ -198,7 +198,8 @@ const treeStyles = `
     outline-offset: 2px;
   }
 `;
-export class BoxTreeElement extends BaseElement {
+export class Tree extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["items", "label", "value"];
     }
@@ -516,11 +517,4 @@ export class BoxTreeElement extends BaseElement {
         }
     }
 }
-export const defineBoxTreeElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxTreeElement);
-    return BoxTreeElement;
-};
+Tree.register();

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

@@ -1,11 +1,13 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxAlertElement extends BaseElement {
+export declare class Alert extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private openValue;
     private alertEl;
     private toneLabelEl;
     private titleEl;
     private messageEl;
+    private richSlot;
     private dismissEl;
     get open(): boolean;
     set open(value: boolean);
@@ -21,7 +23,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;
 }
-export declare const defineBoxAlertElement: (tagName?: string) => typeof BoxAlertElement;