@unofficialbox/box-open-elements 0.3.0 → 0.5.0

package/dist/components/feedback/progress-bar.js

@@ -52,7 +52,8 @@ const progressBarStyles = `
     transition: width ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
   }
 `;
-export class BoxProgressBarElement extends BaseElement {
+export class ProgressBar extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["label", "max", "value"];
     }
@@ -118,11 +119,4 @@ export class BoxProgressBarElement extends BaseElement {
         this.indicatorEl.style.width = `${percentage}%`;
     }
 }
-export const defineBoxProgressBarElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxProgressBarElement);
-    return BoxProgressBarElement;
-};
+ProgressBar.register();

package/dist/components/feedback/progress-ring.d.ts

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxProgressRingElement extends BaseElement {
+export declare class ProgressRing extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private ringEl;
     private svgEl;
@@ -18,4 +19,3 @@ export declare class BoxProgressRingElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxProgressRingElement: (tagName?: string) => typeof BoxProgressRingElement;

package/dist/components/feedback/progress-ring.js

@@ -53,7 +53,8 @@ const progressRingStyles = `
     color: var(--boe-token-text-text-secondary, #6f6f6f);
   }
 `;
-export class BoxProgressRingElement extends BaseElement {
+export class ProgressRing extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["label", "max", "size", "value"];
     }
@@ -145,11 +146,4 @@ export class BoxProgressRingElement extends BaseElement {
         this.labelEl.textContent = this.label;
     }
 }
-export const defineBoxProgressRingElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxProgressRingElement);
-    return BoxProgressRingElement;
-};
+ProgressRing.register();

package/dist/components/feedback/progress-steps.d.ts

@@ -4,7 +4,8 @@ type BoxProgressStep = {
     label: string;
     value: string;
 };
-export declare class BoxProgressStepsElement extends BaseElement {
+export declare class ProgressSteps extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private stepsEl;
@@ -21,5 +22,4 @@ export declare class BoxProgressStepsElement extends BaseElement {
     private selectValue;
     protected update(): void;
 }
-export declare const defineBoxProgressStepsElement: (tagName?: string) => typeof BoxProgressStepsElement;
 export {};

package/dist/components/feedback/progress-steps.js

@@ -101,7 +101,8 @@ const progressStepsStyles = `
     line-height: 1.45;
   }
 `;
-export class BoxProgressStepsElement extends BaseElement {
+export class ProgressSteps extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["items", "label", "value"];
     }
@@ -266,11 +267,4 @@ export class BoxProgressStepsElement extends BaseElement {
         });
     }
 }
-export const defineBoxProgressStepsElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxProgressStepsElement);
-    return BoxProgressStepsElement;
-};
+ProgressSteps.register();

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

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxSkeletonElement extends BaseElement {
+export declare class Skeleton extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private skeletonEl;
     private appliedWidth;
@@ -11,4 +12,3 @@ export declare class BoxSkeletonElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxSkeletonElement: (tagName?: string) => typeof BoxSkeletonElement;

package/dist/components/feedback/skeleton.js

@@ -34,7 +34,8 @@ const skeletonStyles = `
 
   ${boeReducedMotionStyles('[part="skeleton"]', "animation: none;")}
 `;
-export class BoxSkeletonElement extends BaseElement {
+export class Skeleton extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["height", "width"];
     }
@@ -85,11 +86,4 @@ export class BoxSkeletonElement extends BaseElement {
         }
     }
 }
-export const defineBoxSkeletonElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxSkeletonElement);
-    return BoxSkeletonElement;
-};
+Skeleton.register();

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

@@ -1,10 +1,14 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxSpinnerElement extends BaseElement {
+export declare class Spinner extends BaseElement {
+    static readonly tagName: string;
     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;
 }
-export declare const defineBoxSpinnerElement: (tagName?: string) => typeof BoxSpinnerElement;

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);
@@ -39,17 +51,27 @@ const spinnerStyles = `
     color: var(--boe-token-text-text-secondary, #6f6f6f);
   }
 `;
-export class BoxSpinnerElement extends BaseElement {
+export class Spinner extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     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,19 +84,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) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxSpinnerElement);
-    return BoxSpinnerElement;
-};
+Spinner.register();

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

@@ -1,13 +1,19 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxToastElement extends BaseElement {
+export declare class Toast extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private openValue;
     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;
@@ -23,4 +29,3 @@ export declare class BoxToastElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxToastElement: (tagName?: string) => typeof BoxToastElement;

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"] {
@@ -86,15 +108,25 @@ const toastStyles = `
     box-shadow: none;
   }
 `;
-export class BoxToastElement extends BaseElement {
+export class Toast extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     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 +142,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 +197,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 +212,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 +226,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) {
@@ -195,11 +244,4 @@ export class BoxToastElement extends BaseElement {
         this.messageEl.textContent = this.message;
     }
 }
-export const defineBoxToastElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxToastElement);
-    return BoxToastElement;
-};
+Toast.register();

package/dist/components/files/drop-zone.d.ts

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

package/dist/components/files/drop-zone.js

@@ -70,7 +70,8 @@ const dropZoneStyles = `
     max-width: 34ch;
   }
 `;
-export class BoxDropZoneElement extends BaseElement {
+export class DropZone extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["description", "label", "message"];
     }
@@ -159,11 +160,4 @@ export class BoxDropZoneElement extends BaseElement {
         this.messageEl.textContent = this.message;
     }
 }
-export const defineBoxDropZoneElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxDropZoneElement);
-    return BoxDropZoneElement;
-};
+DropZone.register();

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

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxCalendarElement extends BaseElement {
+export declare class Calendar extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     /** The date the roving tabindex currently points at. */
     private activeDate;
@@ -44,4 +45,3 @@ export declare class BoxCalendarElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxCalendarElement: (tagName?: string) => typeof BoxCalendarElement;

package/dist/components/forms/calendar.js

@@ -182,7 +182,8 @@ const calendarStyles = `
     cursor: not-allowed;
   }
 `;
-export class BoxCalendarElement extends BaseElement {
+export class Calendar extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["disabled", "max", "min", "month", "today", "value"];
     }
@@ -489,11 +490,4 @@ export class BoxCalendarElement extends BaseElement {
     `;
     }
 }
-export const defineBoxCalendarElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxCalendarElement);
-    return BoxCalendarElement;
-};
+Calendar.register();

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

@@ -11,12 +11,19 @@ type CategoryOption = {
  * `value` and announced with `value-changed`. Follows the radiogroup keyboard
  * pattern: arrow keys move selection with roving `tabindex`.
  */
-export declare class BoxCategorySelectorElement extends BaseElement {
+export declare class CategorySelector extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     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,11 +32,15 @@ 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;
 }
-export declare const defineBoxCategorySelectorElement: (tagName?: string) => typeof BoxCategorySelectorElement;
 export {};