@unofficialbox/box-open-elements 0.2.1 → 0.4.0

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

@@ -0,0 +1,210 @@
+import { BaseElement } from "../../core/index.js";
+import { boePanel, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-thumbnail-card";
+/** Rich file/grid card — box-ui-elements `ThumbnailCard`. */
+const thumbnailCardStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="card"] {
+    display: grid;
+    grid-template-rows: auto auto;
+    width: 100%;
+    min-width: 160px;
+    border: ${boePanel.border};
+    border-radius: ${boeRadius.large};
+    background: var(--boe-token-surface-surface, #ffffff);
+    overflow: hidden;
+    transition:
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  :host([interactive]) [part="card"] {
+    cursor: pointer;
+  }
+
+  :host([highlight-on-hover]) [part="card"]:hover,
+  :host([interactive]) [part="card"]:hover {
+    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
+  }
+
+  [part="card"]:focus-visible {
+    outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5);
+    outline-offset: 2px;
+  }
+
+  [part="thumbnail"] {
+    display: grid;
+    place-items: center;
+    aspect-ratio: 16 / 10;
+    background: var(--boe-token-surface-surface-secondary, #f4f4f4);
+    overflow: hidden;
+  }
+
+  [part="thumbnail"] ::slotted(img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  [part="details"] {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: ${boeSpace[2]};
+    padding: ${boeSpace[3]};
+  }
+
+  [part="icon"] {
+    display: inline-flex;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="icon"]:not(:has(*)) {
+    display: none;
+  }
+
+  [part="text"] {
+    min-width: 0;
+    display: grid;
+    gap: 2px;
+  }
+
+  [part="title"] {
+    font-size: ${boeSpace[3]};
+    font-weight: 600;
+    color: var(--boe-token-text-text, #222222);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [part="subtitle"] {
+    font-size: 12px;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [part="subtitle"][hidden] {
+    display: none;
+  }
+
+  [part="action"] {
+    display: inline-flex;
+  }
+
+  [part="action"]:not(:has(*)) {
+    display: none;
+  }
+`;
+export class BoxThumbnailCardElement extends BaseElement {
+    static get observedAttributes() {
+        return ["title", "subtitle", "interactive", "highlight-on-hover"];
+    }
+    cardEl;
+    titleEl;
+    subtitleEl;
+    get cardTitle() {
+        return this.getAttribute("title") ?? "";
+    }
+    set cardTitle(value) {
+        this.setAttribute("title", value);
+    }
+    get subtitle() {
+        return this.getAttribute("subtitle") ?? "";
+    }
+    set subtitle(value) {
+        if (value) {
+            this.setAttribute("subtitle", value);
+        }
+        else {
+            this.removeAttribute("subtitle");
+        }
+    }
+    /** When set, the card is a button: focusable, keyboard-activated, emits `activate`. */
+    get interactive() {
+        return this.hasAttribute("interactive");
+    }
+    set interactive(value) {
+        this.toggleAttribute("interactive", Boolean(value));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${thumbnailCardStyles}</style>
+      <div part="card">
+        <div part="thumbnail"><slot name="thumbnail"></slot></div>
+        <div part="details">
+          <span part="icon"><slot name="icon"></slot></span>
+          <div part="text">
+            <div part="title"></div>
+            <div part="subtitle"></div>
+          </div>
+          <span part="action"><slot name="action"></slot></span>
+        </div>
+      </div>
+    `;
+        this.cardEl = this.shadowRoot.querySelector('[part="card"]');
+        this.titleEl = this.shadowRoot.querySelector('[part="title"]');
+        this.subtitleEl = this.shadowRoot.querySelector('[part="subtitle"]');
+    }
+    setupListeners() {
+        this.cardEl.addEventListener("click", () => this.activate());
+        this.cardEl.addEventListener("keydown", event => {
+            if (!this.interactive) {
+                return;
+            }
+            const key = event.key;
+            if (key === "Enter" || key === " ") {
+                event.preventDefault();
+                this.activate();
+            }
+        });
+    }
+    activate() {
+        if (!this.interactive) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent("activate", {
+            bubbles: true,
+            composed: true,
+            detail: { title: this.cardTitle },
+        }));
+    }
+    update() {
+        if (!this.cardEl || !this.titleEl || !this.subtitleEl) {
+            return;
+        }
+        this.titleEl.textContent = this.cardTitle;
+        this.subtitleEl.textContent = this.subtitle;
+        this.subtitleEl.hidden = this.subtitle.length === 0;
+        if (this.interactive) {
+            this.cardEl.setAttribute("role", "button");
+            this.cardEl.setAttribute("tabindex", "0");
+            this.cardEl.setAttribute("aria-label", this.cardTitle);
+        }
+        else {
+            this.cardEl.removeAttribute("role");
+            this.cardEl.removeAttribute("tabindex");
+            this.cardEl.removeAttribute("aria-label");
+        }
+    }
+}
+export const defineBoxThumbnailCardElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxThumbnailCardElement);
+    return BoxThumbnailCardElement;
+};

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/badgeable.d.ts

@@ -0,0 +1,14 @@
+import { BaseElement } from "../../core/index.js";
+/**
+ * Overlays badges on the corners of its content — the box-ui-elements
+ * `Badgeable` wrapper. The subject goes in the default slot; each corner is a
+ * named slot (`top-left`, `top-right`, `bottom-left`, `bottom-right`). Corners
+ * with no assigned content are hidden so they don't capture pointer events.
+ */
+export declare class BoxBadgeableElement extends BaseElement {
+    private corners;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxBadgeableElement: (tagName?: string) => typeof BoxBadgeableElement;

package/dist/components/feedback/badgeable.js

@@ -0,0 +1,84 @@
+import { BaseElement } from "../../core/index.js";
+const DEFAULT_TAG_NAME = "box-badgeable";
+/** Corners a badge can be pinned to, matching box-ui-elements' Badgeable. */
+const CORNERS = ["top-left", "top-right", "bottom-left", "bottom-right"];
+const badgeableStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="container"] {
+    position: relative;
+    display: inline-flex;
+  }
+
+  [part="badge"] {
+    position: absolute;
+    z-index: 1;
+    display: inline-flex;
+    pointer-events: none;
+  }
+
+  /* Slotted badge content stays interactive (e.g. a dismiss button). */
+  [part="badge"] ::slotted(*) {
+    pointer-events: auto;
+  }
+
+  [part="badge"][hidden] {
+    display: none;
+  }
+
+  [part="badge"][data-corner="top-left"] { inset-block-start: 0; inset-inline-start: 0; transform: translate(-35%, -35%); }
+  [part="badge"][data-corner="top-right"] { inset-block-start: 0; inset-inline-end: 0; transform: translate(35%, -35%); }
+  [part="badge"][data-corner="bottom-left"] { inset-block-end: 0; inset-inline-start: 0; transform: translate(-35%, 35%); }
+  [part="badge"][data-corner="bottom-right"] { inset-block-end: 0; inset-inline-end: 0; transform: translate(35%, 35%); }
+`;
+/**
+ * Overlays badges on the corners of its content — the box-ui-elements
+ * `Badgeable` wrapper. The subject goes in the default slot; each corner is a
+ * named slot (`top-left`, `top-right`, `bottom-left`, `bottom-right`). Corners
+ * with no assigned content are hidden so they don't capture pointer events.
+ */
+export class BoxBadgeableElement extends BaseElement {
+    corners = new Map();
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${badgeableStyles}</style>
+      <span part="container">
+        <slot></slot>
+        ${CORNERS.map(corner => `<span part="badge" data-corner="${corner}" hidden><slot name="${corner}"></slot></span>`).join("")}
+      </span>
+    `;
+        this.corners.clear();
+        for (const corner of CORNERS) {
+            const wrapper = this.shadowRoot.querySelector(`[data-corner="${corner}"]`);
+            const slot = wrapper.querySelector("slot");
+            this.corners.set(corner, { wrapper, slot });
+        }
+    }
+    setupListeners() {
+        for (const { wrapper, slot } of this.corners.values()) {
+            slot.addEventListener("slotchange", () => {
+                wrapper.hidden = slot.assignedNodes({ flatten: true }).length === 0;
+            });
+        }
+    }
+    update() {
+        for (const { wrapper, slot } of this.corners.values()) {
+            wrapper.hidden = slot.assignedNodes({ flatten: true }).length === 0;
+        }
+    }
+}
+export const defineBoxBadgeableElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxBadgeableElement);
+    return BoxBadgeableElement;
+};

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;

package/dist/components/feedback/chip.js

@@ -42,12 +42,59 @@ const chipStyles = `
     background: color-mix(in srgb, var(--boe-token-surface-surface-hover, #f4f4f4) 70%, var(--boe-token-surface-surface-secondary, #fbfbfb) 30%);
   }
 
-  [part="chip"][data-tone="brand"] {
+  [part="chip"][data-tone="brand"],
+  [part="chip"][data-tone="info"] {
     border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 26%, transparent);
     background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #ffffff) 90%);
     color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 72%, var(--boe-token-text-text, #222222));
   }
 
+  [part="chip"][data-tone="success"] {
+    border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 32%, transparent);
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 60%, var(--boe-token-text-text, #222222));
+  }
+
+  [part="chip"][data-tone="warning"] {
+    border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 40%, transparent);
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 16%, var(--boe-token-surface-surface, #ffffff) 84%);
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 58%, var(--boe-token-text-text, #222222));
+  }
+
+  [part="chip"][data-tone="error"] {
+    border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 30%, transparent);
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 10%, var(--boe-token-surface-surface, #ffffff) 90%);
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 70%, var(--boe-token-text-text, #222222));
+  }
+
+  /* Compact size. */
+  [part="chip"][data-size="small"] {
+    gap: 0.25rem;
+    padding: 0.14rem 0.28rem 0.14rem 0.55rem;
+    font-size: 0.74rem;
+  }
+
+  [part="chip"][data-size="small"]:not([data-removable="true"]) {
+    padding-inline-end: 0.55rem;
+  }
+
+  /* Leading icon slot — hidden (and taking no gap) until content is assigned. */
+  [part="icon"] {
+    display: inline-flex;
+    align-items: center;
+    flex: none;
+  }
+
+  [part="icon"]:not(.has-content) {
+    display: none;
+  }
+
+  [part="icon"]::slotted(*) {
+    inline-size: 0.95rem;
+    block-size: 0.95rem;
+    display: block;
+  }
+
   [part="chip"][data-selected="true"],
   [part="chip"][data-selected="true"]:hover:not([data-disabled="true"]),
   [part="chip"][data-selected="true"]:active:not([data-disabled="true"]) {
@@ -94,11 +141,19 @@ const chipStyles = `
  */
 export class BoxChipElement extends BaseElement {
     static get observedAttributes() {
-        return ["disabled", "label", "removable", "selectable", "selected", "tone", "value"];
+        return ["disabled", "label", "removable", "selectable", "selected", "size", "tone", "value"];
     }
     chipEl;
     labelEl;
+    iconSlot;
     removeEl = null;
+    /** Chip size: `medium` (default) or `small`. */
+    get size() {
+        return this.getAttribute("size") === "small" ? "small" : "medium";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
     get label() {
         return this.getAttribute("label") ?? "";
     }
@@ -169,13 +224,16 @@ export class BoxChipElement extends BaseElement {
         this.shadowRoot.innerHTML = `
       <style>${chipStyles}</style>
       <span part="chip">
+        <slot name="icon" part="icon"></slot>
         <span part="label"></span>
       </span>
     `;
         this.chipEl = this.shadowRoot.querySelector('[part="chip"]');
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.iconSlot = this.shadowRoot.querySelector('slot[name="icon"]');
     }
     setupListeners() {
+        this.iconSlot.addEventListener("slotchange", () => this.syncIconSlot());
         this.chipEl.addEventListener("click", event => {
             if (event.target.closest('[part="remove"]')) {
                 return;
@@ -217,11 +275,25 @@ export class BoxChipElement extends BaseElement {
             this.removeEl = null;
         }
     }
+    syncIconSlot() {
+        if (!this.iconSlot) {
+            return;
+        }
+        const hasContent = this.iconSlot.assignedNodes({ flatten: true }).length > 0;
+        this.iconSlot.classList.toggle("has-content", hasContent);
+    }
     update() {
         if (!this.chipEl) {
             return;
         }
         this.chipEl.dataset.tone = this.tone;
+        if (this.size === "medium") {
+            this.chipEl.removeAttribute("data-size");
+        }
+        else {
+            this.chipEl.dataset.size = this.size;
+        }
+        this.syncIconSlot();
         this.chipEl.dataset.removable = this.removable ? "true" : "false";
         this.chipEl.dataset.selected = this.selected ? "true" : "false";
         this.chipEl.dataset.disabled = this.disabled ? "true" : "false";

package/dist/components/feedback/error-mask.d.ts

@@ -9,6 +9,7 @@ export declare class BoxErrorMaskElement extends BaseElement {
     static get observedAttributes(): string[];
     private titleEl;
     private messageEl;
+    private bodySlot;
     private actionEl;
     get heading(): string;
     set heading(value: string);
@@ -19,6 +20,7 @@ export declare class BoxErrorMaskElement extends BaseElement {
     get actionLabel(): string;
     set actionLabel(value: string);
     protected renderTemplate(): void;
+    protected setupListeners(): void;
     private syncActionButton;
     protected update(): void;
 }