@unofficialbox/box-open-elements 0.3.0 → 0.4.0

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;
 }

package/dist/components/feedback/error-mask.js

@@ -57,6 +57,17 @@ const errorMaskStyles = `
     display: none;
   }
 
+  /* Optional rich body — slotted markup below the message.
+     Hidden (no column gap) until content is assigned. */
+  [part="body"] {
+    display: block;
+    max-width: 32rem;
+  }
+
+  [part="body"]:not(.has-content) {
+    display: none;
+  }
+
   [part="action"] {
     appearance: none;
     box-sizing: border-box;
@@ -100,6 +111,7 @@ export class BoxErrorMaskElement extends BaseElement {
     }
     titleEl;
     messageEl;
+    bodySlot;
     actionEl = null;
     get heading() {
         return this.getAttribute("heading") ?? "Something went wrong";
@@ -141,10 +153,19 @@ export class BoxErrorMaskElement extends BaseElement {
         </span>
         <h2 part="title"></h2>
         <span part="message description" hidden></span>
+        <slot part="body"></slot>
       </section>
     `;
         this.titleEl = this.shadowRoot.querySelector('[part="title"]');
         this.messageEl = this.shadowRoot.querySelector('[part~="message"]');
+        this.bodySlot = this.shadowRoot.querySelector('slot[part="body"]');
+    }
+    setupListeners() {
+        this.bodySlot.addEventListener("slotchange", () => {
+            if (this.isRendered) {
+                this.update();
+            }
+        });
     }
     syncActionButton() {
         const section = this.shadowRoot?.querySelector('[part="error-mask"]');
@@ -178,6 +199,8 @@ export class BoxErrorMaskElement extends BaseElement {
             return;
         }
         this.titleEl.textContent = this.heading;
+        const hasBody = this.bodySlot.assignedNodes({ flatten: true }).length > 0;
+        this.bodySlot.classList.toggle("has-content", hasBody);
         if (this.message) {
             this.messageEl.hidden = false;
             this.messageEl.textContent = this.message;

package/dist/components/feedback/help-text.js

@@ -152,6 +152,13 @@ export class BoxHelpTextElement extends BaseElement {
                 : "info";
         const iconMarkup = resolveDesignIcon(iconName) ?? "i";
         this.helpTextEl.dataset.tone = this.tone;
+        // Error help text is an inline validation error: announce it assertively.
+        if (this.tone === "error") {
+            this.helpTextEl.setAttribute("role", "alert");
+        }
+        else {
+            this.helpTextEl.setAttribute("role", "note");
+        }
         this.helpTextEl.setAttribute("aria-label", this.label || "Help text");
         this.iconEl.setAttribute("data-icon-source", iconMarkup === "i" ? "text" : "design-system");
         this.iconEl.innerHTML = iconMarkup;

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

@@ -2,8 +2,12 @@ import { BaseElement } from "../../core/index.js";
 export declare class BoxSpinnerElement extends BaseElement {
     static get observedAttributes(): string[];
     private labelEl;
+    private indicatorEl;
     get label(): string;
     set label(value: string);
+    /** Indicator size: `small`, `medium` (default), or `large`. */
+    get size(): string;
+    set size(value: string);
     protected renderTemplate(): void;
     protected update(): void;
 }

package/dist/components/feedback/spinner.js

@@ -25,6 +25,18 @@ const spinnerStyles = `
     animation: boe-spinner-rotate ${boeMotionDuration.spin} ${boeMotionEasing.linear} infinite;
   }
 
+  [part="indicator"][data-size="small"] {
+    width: 0.85rem;
+    height: 0.85rem;
+    border-width: 2px;
+  }
+
+  [part="indicator"][data-size="large"] {
+    width: 1.6rem;
+    height: 1.6rem;
+    border-width: 3px;
+  }
+
   @keyframes boe-spinner-rotate {
     to {
       transform: rotate(360deg);
@@ -41,15 +53,24 @@ const spinnerStyles = `
 `;
 export class BoxSpinnerElement extends BaseElement {
     static get observedAttributes() {
-        return ["label"];
+        return ["label", "size"];
     }
     labelEl;
+    indicatorEl;
     get label() {
         return this.getAttribute("label") ?? "Loading";
     }
     set label(value) {
         this.setAttribute("label", value);
     }
+    /** Indicator size: `small`, `medium` (default), or `large`. */
+    get size() {
+        const value = this.getAttribute("size");
+        return value === "small" || value === "large" ? value : "medium";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
     renderTemplate() {
         if (!this.shadowRoot) {
             return;
@@ -62,12 +83,19 @@ export class BoxSpinnerElement extends BaseElement {
       </div>
     `;
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.indicatorEl = this.shadowRoot.querySelector('[part="indicator"]');
     }
     update() {
-        if (!this.labelEl) {
+        if (!this.labelEl || !this.indicatorEl) {
             return;
         }
         this.labelEl.textContent = this.label;
+        if (this.size === "medium") {
+            this.indicatorEl.removeAttribute("data-size");
+        }
+        else {
+            this.indicatorEl.dataset.size = this.size;
+        }
     }
 }
 export const defineBoxSpinnerElement = (tagName = DEFAULT_TAG_NAME) => {

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

@@ -5,9 +5,14 @@ export declare class BoxToastElement extends BaseElement {
     private timeoutId;
     private toastEl;
     private messageEl;
+    private actionSlot;
     private dismissEl;
+    /** Auto-dismiss delay in ms for the declarative `open` path. 0 = sticky. */
+    get duration(): number;
+    set duration(value: number);
     get open(): boolean;
     set open(value: boolean);
+    private scheduleAutoDismiss;
     get message(): string;
     set message(value: string);
     get tone(): string;

package/dist/components/feedback/toast.js

@@ -53,6 +53,28 @@ const toastStyles = `
     font-size: 15px;
     font-weight: 700;
     line-height: 1.35;
+    /* Long unbroken tokens (URLs, filenames) wrap instead of overflowing. */
+    overflow-wrap: anywhere;
+  }
+
+  /* Optional action affordance (e.g. "Undo") before the dismiss button.
+     Hidden — taking no flex gap — until content is assigned. */
+  [part="action"] {
+    display: inline-flex;
+    align-items: center;
+    flex: none;
+  }
+
+  [part="action"]:not(.has-content) {
+    display: none;
+  }
+
+  [part="action"]::slotted(*) {
+    font: inherit;
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    cursor: pointer;
   }
 
   [part="dismiss"] {
@@ -88,13 +110,22 @@ const toastStyles = `
 `;
 export class BoxToastElement extends BaseElement {
     static get observedAttributes() {
-        return ["message", "open", "tone"];
+        return ["message", "open", "tone", "duration"];
     }
     openValue = false;
     timeoutId = null;
     toastEl;
     messageEl;
+    actionSlot;
     dismissEl;
+    /** Auto-dismiss delay in ms for the declarative `open` path. 0 = sticky. */
+    get duration() {
+        const raw = Number(this.getAttribute("duration"));
+        return Number.isFinite(raw) && raw >= 0 ? raw : 0;
+    }
+    set duration(value) {
+        this.setAttribute("duration", String(value));
+    }
     get open() {
         return this.openValue;
     }
@@ -110,11 +141,29 @@ export class BoxToastElement extends BaseElement {
         else {
             this.removeAttribute("open");
         }
+        if (nextOpen) {
+            // Declarative open (attribute/property) auto-dismisses per `duration`;
+            // show() reschedules afterwards with its own option when provided.
+            this.scheduleAutoDismiss(this.duration);
+        }
+        else if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = null;
+        }
         this.dispatchEvent(new CustomEvent("open-changed", { bubbles: true, composed: true, detail: { open: nextOpen } }));
         if (this.isRendered) {
             this.update();
         }
     }
+    scheduleAutoDismiss(duration) {
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = null;
+        }
+        if (duration > 0) {
+            this.timeoutId = setTimeout(() => this.hide(), duration);
+        }
+    }
     get message() {
         return this.getAttribute("message") ?? "";
     }
@@ -147,16 +196,9 @@ export class BoxToastElement extends BaseElement {
             this.tone = options.tone;
         }
         this.open = true;
-        if (this.timeoutId) {
-            clearTimeout(this.timeoutId);
-            this.timeoutId = null;
-        }
-        const duration = options?.duration ?? 2500;
-        if (duration > 0) {
-            this.timeoutId = setTimeout(() => {
-                this.hide();
-            }, duration);
-        }
+        // options.duration wins; else a declarative `duration` attribute; else 2500.
+        const duration = options?.duration ?? (this.duration || 2500);
+        this.scheduleAutoDismiss(duration);
     }
     hide() {
         this.open = false;
@@ -169,11 +211,13 @@ export class BoxToastElement extends BaseElement {
       <style>${toastStyles}</style>
       <div part="toast" role="status" aria-live="polite">
         <span part="message"></span>
+        <slot name="action" part="action"></slot>
         <button type="button" part="dismiss">Dismiss</button>
       </div>
     `;
         this.toastEl = this.shadowRoot.querySelector('[part="toast"]');
         this.messageEl = this.shadowRoot.querySelector('[part="message"]');
+        this.actionSlot = this.shadowRoot.querySelector('slot[name="action"]');
         this.dismissEl = this.shadowRoot.querySelector('[part="dismiss"]');
     }
     setupListeners() {
@@ -181,6 +225,10 @@ export class BoxToastElement extends BaseElement {
             this.dispatchEvent(new CustomEvent("dismiss", { bubbles: true, composed: true }));
             this.hide();
         });
+        this.actionSlot.addEventListener("slotchange", () => {
+            const hasContent = this.actionSlot.assignedNodes({ flatten: true }).length > 0;
+            this.actionSlot.classList.toggle("has-content", hasContent);
+        });
     }
     update() {
         if (!this.toastEl) {

package/dist/components/forms/category-selector.d.ts

@@ -17,6 +17,12 @@ export declare class BoxCategorySelectorElement extends BaseElement {
     private lastOptionsJson;
     private hadFocus;
     private rootEl;
+    private moreOpen;
+    private positionCleanup;
+    private readonly onDocumentPointerDown;
+    /** Max inline categories before the rest collapse into a "More" menu (0 = no limit). */
+    get maxLinks(): number;
+    set maxLinks(value: number);
     get label(): string;
     set label(value: string);
     get options(): CategoryOption[];
@@ -25,9 +31,14 @@ export declare class BoxCategorySelectorElement extends BaseElement {
     set value(nextValue: string);
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private selectableOptions;
+    private splitOptions;
     private select;
     private moveSelection;
     protected renderTemplate(): void;
+    private resolvedPlacement;
+    private openMore;
+    private closeMore;
+    disconnectedCallback(): void;
     protected setupListeners(): void;
     protected update(): void;
 }