@unofficialbox/box-open-elements 0.2.0 → 0.3.0

package/README.md

@@ -116,6 +116,7 @@ The docs index is at [docs/README.md](./docs/README.md). The most important entr
 - [Taxonomy](./docs/taxonomy.md)
 - [Architecture](./docs/architecture.md)
 - [API Guidelines](./docs/api-guidelines.md)
+- [Using with React, Angular, Vue, and Svelte](./docs/integration/frameworks.md)
 - [Design Tokens](./docs/foundations/tokens.md)
 - [Content Explorer](./docs/patterns/content-explorer.md)
 - [Box Server Integration](./docs/integration/box-server.md)

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

@@ -0,0 +1,53 @@
+import { BaseElement } from "../../core/index.js";
+export interface TableColumn {
+    key: string;
+    label: string;
+    /** Cross-axis alignment of the column's cells. */
+    align?: "start" | "end" | "center";
+    /** Mark the column sortable — clicking its header emits `sort`. */
+    sortable?: boolean;
+}
+export interface TableRow {
+    id: string;
+    /** Cell text keyed by column key, or positional strings matching `columns`. */
+    cells: Record<string, string> | string[];
+}
+export type TableSelectionMode = "none" | "single" | "multiple";
+/**
+ * A semantic, selectable data table — box-ui-elements `Table` + `makeSelectable`.
+ * Rows and columns come from JSON. Selection supports single / Ctrl-click toggle
+ * / Shift-click range, plus keyboard (Arrow, Shift+Arrow to extend, Space to
+ * 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 {
+    static get observedAttributes(): string[];
+    private bodyEl;
+    private headEl;
+    private selected;
+    private anchorIndex;
+    get columns(): TableColumn[];
+    set columns(value: TableColumn[]);
+    get rows(): TableRow[];
+    set rows(value: TableRow[]);
+    get selectionMode(): TableSelectionMode;
+    set selectionMode(value: TableSelectionMode);
+    get selectedIds(): string[];
+    set selectedIds(value: string[]);
+    get label(): string;
+    set label(value: string);
+    private parseJson;
+    private cellText;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private rowElements;
+    private onBodyKeydown;
+    private toggleSort;
+    private activateRow;
+    private selectRange;
+    private selectAll;
+    private setSelection;
+    private applySelectionState;
+    protected update(): void;
+}
+export declare const defineBoxTableElement: (tagName?: string) => typeof BoxTableElement;