@unofficialbox/box-open-elements 0.2.1 → 0.4.0

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

@@ -1,7 +1,20 @@
 import { BaseElement } from "../../core/index.js";
+export type ButtonType = "button" | "submit" | "reset";
 export declare class BoxButtonElement extends BaseElement {
+    static formAssociated: boolean;
     static get observedAttributes(): string[];
     private buttonEl;
+    private spinnerEl;
+    private iconEl;
+    private labelEl;
+    private iconSlot;
+    private readonly internals;
+    constructor();
+    /** Loading state: shows a spinner and blocks activation (stays focusable). */
+    get isLoading(): boolean;
+    set isLoading(value: boolean);
+    get type(): ButtonType;
+    set type(value: ButtonType);
     get disabled(): boolean;
     set disabled(value: boolean);
     get label(): string;
@@ -11,6 +24,8 @@ export declare class BoxButtonElement extends BaseElement {
     get tone(): string;
     set tone(value: string);
     protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private syncIconVisibility;
     protected update(): void;
 }
 export declare const defineBoxButtonElement: (tagName?: string) => typeof BoxButtonElement;

package/dist/components/actions/button.js

@@ -120,12 +120,79 @@ const buttonStyles = `
     opacity: ${boeControl.disabledOpacity};
     box-shadow: none;
   }
+
+  button[aria-busy="true"] {
+    cursor: default;
+  }
+
+  /* Leading icon slot — hidden when nothing is slotted (kept off the flex gap). */
+  [part="icon"] {
+    display: inline-flex;
+    width: 16px;
+    height: 16px;
+  }
+
+  [part="icon"][hidden] {
+    display: none;
+  }
+
+  [part="icon"] ::slotted(svg) {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Inline loading spinner, shown while is-loading. */
+  [part="spinner"] {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    animation: boe-btn-spin 0.7s linear infinite;
+  }
+
+  [part="spinner"][hidden] {
+    display: none;
+  }
+
+  @keyframes boe-btn-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part="spinner"] { animation-duration: 1.6s; }
+  }
 `;
 export class BoxButtonElement extends BaseElement {
+    static formAssociated = true;
     static get observedAttributes() {
-        return ["disabled", "label", "size", "tone"];
+        return ["disabled", "label", "size", "tone", "is-loading", "type"];
     }
     buttonEl;
+    spinnerEl;
+    iconEl;
+    labelEl;
+    iconSlot;
+    internals;
+    constructor() {
+        super();
+        // Form association lets type="submit"/"reset" drive the owning form.
+        this.internals = this.attachInternals();
+    }
+    /** Loading state: shows a spinner and blocks activation (stays focusable). */
+    get isLoading() {
+        return this.hasAttribute("is-loading");
+    }
+    set isLoading(value) {
+        this.toggleAttribute("is-loading", Boolean(value));
+    }
+    get type() {
+        const type = this.getAttribute("type");
+        return type === "submit" || type === "reset" ? type : "button";
+    }
+    set type(value) {
+        this.setAttribute("type", value);
+    }
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -161,9 +228,40 @@ export class BoxButtonElement extends BaseElement {
         }
         this.shadowRoot.innerHTML = `
       <style>${buttonStyles}</style>
-      <button type="button" part="button"></button>
+      <button type="button" part="button">
+        <span part="spinner" aria-hidden="true" hidden></span>
+        <span part="icon" hidden><slot name="icon"></slot></span>
+        <span part="label"></span>
+      </button>
     `;
         this.buttonEl = this.shadowRoot.querySelector('[part="button"]');
+        this.spinnerEl = this.shadowRoot.querySelector('[part="spinner"]');
+        this.iconEl = this.shadowRoot.querySelector('[part="icon"]');
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.iconSlot = this.iconEl.querySelector("slot");
+    }
+    setupListeners() {
+        this.buttonEl.addEventListener("click", event => {
+            if (this.disabled || this.isLoading) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                return;
+            }
+            // Drive the owning form for submit/reset (custom elements don't do this
+            // natively). Prefer the form-associated form; fall back to the nearest
+            // ancestor form so it works without full ElementInternals.form support.
+            const form = this.internals.form ?? this.closest("form");
+            if (this.type === "submit") {
+                form?.requestSubmit();
+            }
+            else if (this.type === "reset") {
+                form?.reset();
+            }
+        });
+        this.iconSlot.addEventListener("slotchange", () => this.syncIconVisibility());
+    }
+    syncIconVisibility() {
+        this.iconEl.hidden = this.iconSlot.assignedNodes({ flatten: true }).length === 0;
     }
     update() {
         if (!this.buttonEl) {
@@ -171,13 +269,19 @@ export class BoxButtonElement extends BaseElement {
         }
         this.buttonEl.dataset.tone = this.tone;
         this.buttonEl.dataset.size = this.size;
+        this.labelEl.textContent = this.label;
+        const busy = this.isLoading;
+        this.spinnerEl.hidden = !busy;
+        this.buttonEl.setAttribute("aria-busy", String(busy));
+        // A loading button stays focusable but inert; a disabled one is fully off.
         if (this.disabled) {
             this.buttonEl.setAttribute("disabled", "");
         }
         else {
             this.buttonEl.removeAttribute("disabled");
         }
-        this.buttonEl.textContent = this.label;
+        this.buttonEl.setAttribute("aria-disabled", String(this.disabled || busy));
+        this.syncIconVisibility();
     }
 }
 export const defineBoxButtonElement = (tagName = DEFAULT_TAG_NAME) => {

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

@@ -3,6 +3,14 @@ type BoxMenuItem = {
     disabled?: boolean;
     id: string;
     label: string;
+    /** Render a divider before this item. */
+    separator?: boolean;
+    /** Render a non-interactive section header instead of a menuitem. */
+    header?: boolean;
+    /** Render as a link (navigates on activate). */
+    href?: string;
+    /** Checkable item — renders menuitemcheckbox with aria-checked. */
+    checked?: boolean;
 };
 export declare class BoxMenuElement extends BaseElement {
     static get observedAttributes(): string[];
@@ -13,6 +21,8 @@ export declare class BoxMenuElement extends BaseElement {
     set label(value: string);
     get items(): BoxMenuItem[];
     set items(value: BoxMenuItem[]);
+    /** Render one item: header, separator + item, link, checkable, or plain. */
+    private renderItem;
     protected renderTemplate(): void;
     protected setupListeners(): void;
     private enabledMenuItems;

package/dist/components/actions/menu.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { applyRovingTabindex, focusRovingItem, nextRovingIndex, } from "../../foundations/a11y/index.js";
-import { boeControl, boeOverlay } from "../../foundations/geometry/index.js";
+import { boeControl, boeOverlay, boeSpace } from "../../foundations/geometry/index.js";
 import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-menu";
@@ -62,6 +62,41 @@ const menuStyles = `
   [part="menu-item"]:disabled {
     opacity: ${boeControl.disabledOpacity};
   }
+
+  /* Link items keep the menu-item chrome but render as anchors. */
+  a[part="menu-item"] {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+  }
+
+  [part="menu-separator"] {
+    height: 1px;
+    margin: ${boeSpace[1]} 0;
+    background: var(--boe-token-stroke-stroke, #e8e8e8);
+  }
+
+  [part="menu-header"] {
+    padding: ${boeSpace[1]} ${boeSpace[2]};
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  /* Check indicator for checkable items. */
+  [part="menu-item"][role="menuitemcheckbox"]::before {
+    content: "";
+    display: inline-block;
+    width: 1em;
+    margin-inline-end: ${boeSpace[1]};
+    flex-shrink: 0;
+  }
+
+  [part="menu-item"][aria-checked="true"]::before {
+    content: "✓";
+  }
 `;
 export class BoxMenuElement extends BaseElement {
     static get observedAttributes() {
@@ -101,6 +136,27 @@ export class BoxMenuElement extends BaseElement {
     set items(value) {
         this.setAttribute("items", JSON.stringify(value));
     }
+    /** Render one item: header, separator + item, link, checkable, or plain. */
+    renderItem(item) {
+        const separator = item.separator ? `<div part="menu-separator" role="separator"></div>` : "";
+        if (item.header) {
+            return `${separator}<div part="menu-header" role="presentation">${escapeHtml(item.label)}</div>`;
+        }
+        const disabled = this.disabled || item.disabled;
+        const id = escapeHtml(item.id);
+        const label = escapeHtml(item.label);
+        // Checkable item — role=menuitemcheckbox with aria-checked.
+        if (typeof item.checked === "boolean") {
+            const checkedAttr = item.checked ? ' aria-checked="true"' : ' aria-checked="false"';
+            return `${separator}<button type="button" part="menu-item" role="menuitemcheckbox" data-item-id="${id}"${checkedAttr} ${disabled ? "disabled" : ""}>${label}</button>`;
+        }
+        // Link item — an anchor styled as a menuitem.
+        if (item.href) {
+            const aria = disabled ? ' aria-disabled="true"' : "";
+            return `${separator}<a part="menu-item" role="menuitem" data-item-id="${id}" href="${escapeHtml(item.href)}" tabindex="-1"${aria}>${label}</a>`;
+        }
+        return `${separator}<button type="button" part="menu-item" role="menuitem" data-item-id="${id}" ${disabled ? "disabled" : ""}>${label}</button>`;
+    }
     renderTemplate() {
         if (!this.shadowRoot) {
             return;
@@ -113,15 +169,22 @@ export class BoxMenuElement extends BaseElement {
     }
     setupListeners() {
         this.menuEl.addEventListener("click", event => {
-            const button = event.target?.closest('[part="menu-item"]');
-            if (!button || !this.menuEl.contains(button) || button.disabled) {
+            const el = event.target?.closest('[part="menu-item"]');
+            // Anchors have no `.disabled`; both use aria-disabled / native disabled.
+            const isDisabled = el?.hasAttribute("disabled") || el?.getAttribute("aria-disabled") === "true";
+            if (!el || !this.menuEl.contains(el) || isDisabled) {
                 return;
             }
-            const itemId = button.getAttribute("data-item-id");
+            const itemId = el.getAttribute("data-item-id");
             const item = this.items.find(entry => entry.id === itemId);
             if (!item || this.disabled || item.disabled) {
                 return;
             }
+            // Checkable items toggle their aria-checked optimistically; the host owns
+            // the source of truth and can re-render from the event.
+            if (typeof item.checked === "boolean") {
+                el.setAttribute("aria-checked", String(!item.checked));
+            }
             this.dispatchEvent(new CustomEvent("item-selected", {
                 bubbles: true,
                 composed: true,
@@ -157,13 +220,7 @@ export class BoxMenuElement extends BaseElement {
             return;
         }
         this.menuEl.setAttribute("aria-label", this.label);
-        this.menuEl.innerHTML = this.items
-            .map(item => `
-          <button type="button" part="menu-item" role="menuitem" data-item-id="${escapeHtml(item.id)}" ${this.disabled || item.disabled ? "disabled" : ""}>
-            ${escapeHtml(item.label)}
-          </button>
-        `)
-            .join("");
+        this.menuEl.innerHTML = this.items.map(item => this.renderItem(item)).join("");
         const buttons = this.enabledMenuItems();
         applyRovingTabindex(buttons, 0);
     }

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;