@unofficialbox/box-open-elements 0.2.1 → 0.4.0

package/dist/components/collections/datalist-item.js

@@ -28,6 +28,11 @@ const datalistItemStyles = `
     background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #ffffff) 90%);
   }
 
+  /* Active-descendant highlight (host sets active; DOM focus stays on the input). */
+  [part="item"][data-active="true"] {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+  }
+
   [part="item"][data-disabled="true"] {
     opacity: 0.55;
     cursor: not-allowed;
@@ -73,6 +78,16 @@ const datalistItemStyles = `
   [part="meta"][hidden] {
     display: none;
   }
+
+  /* Arbitrary slotted content replaces the default label/meta when present. */
+  [part="content"]:not(.has-content) {
+    display: none;
+  }
+
+  [part="body"].has-slotted [part="label"],
+  [part="body"].has-slotted [part="meta"] {
+    display: none;
+  }
 `;
 /**
  * A single selectable row for a picker/typeahead list — a leading glyph, a
@@ -83,12 +98,21 @@ const datalistItemStyles = `
  */
 export class BoxDatalistItemElement extends BaseElement {
     static get observedAttributes() {
-        return ["disabled", "icon", "label", "meta", "selected", "value"];
+        return ["active", "disabled", "icon", "label", "meta", "selected", "value"];
     }
     itemEl;
     thumbEl;
+    bodyEl;
     labelEl;
     metaEl;
+    contentSlot;
+    /** Active-descendant highlight — set by a host that keeps DOM focus elsewhere. */
+    get active() {
+        return this.hasAttribute("active");
+    }
+    set active(value) {
+        this.toggleAttribute("active", value);
+    }
     get label() {
         return this.getAttribute("label") ?? "";
     }
@@ -146,13 +170,16 @@ export class BoxDatalistItemElement extends BaseElement {
         <span part="body">
           <span part="label"></span>
           <span part="meta" hidden></span>
+          <slot part="content"></slot>
         </span>
       </div>
     `;
         this.itemEl = this.shadowRoot.querySelector('[part="item"]');
         this.thumbEl = this.shadowRoot.querySelector('[part="thumb"]');
+        this.bodyEl = this.shadowRoot.querySelector('[part="body"]');
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
         this.metaEl = this.shadowRoot.querySelector('[part="meta"]');
+        this.contentSlot = this.shadowRoot.querySelector('slot[part="content"]');
     }
     setupListeners() {
         this.itemEl.addEventListener("click", () => this.choose());
@@ -162,6 +189,15 @@ export class BoxDatalistItemElement extends BaseElement {
                 this.choose();
             }
         });
+        this.contentSlot.addEventListener("slotchange", () => this.syncSlot());
+    }
+    syncSlot() {
+        if (!this.contentSlot) {
+            return;
+        }
+        const hasContent = this.contentSlot.assignedNodes({ flatten: true }).length > 0;
+        this.contentSlot.classList.toggle("has-content", hasContent);
+        this.bodyEl.classList.toggle("has-slotted", hasContent);
     }
     update() {
         if (!this.itemEl || !this.thumbEl || !this.labelEl || !this.metaEl) {
@@ -173,7 +209,9 @@ export class BoxDatalistItemElement extends BaseElement {
         this.itemEl.setAttribute("aria-selected", selected ? "true" : "false");
         this.itemEl.dataset.selected = selected ? "true" : "false";
         this.itemEl.dataset.disabled = disabled ? "true" : "false";
+        this.itemEl.dataset.active = this.active ? "true" : "false";
         this.itemEl.tabIndex = disabled ? -1 : 0;
+        this.syncSlot();
         if (disabled) {
             this.itemEl.setAttribute("aria-disabled", "true");
         }

package/dist/components/collections/draggable-list.js

@@ -172,7 +172,7 @@ export class BoxDraggableListElement extends BaseElement {
                 <path d="M6 4h.01M10 4h.01M6 8h.01M10 8h.01M6 12h.01M10 12h.01" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
               </svg>
             </button>
-            <span part="item-label">${escapeHtml(item.label)}</span>
+            <slot name="row-${escapeHtml(item.value)}" part="item-content"><span part="item-label">${escapeHtml(item.label)}</span></slot>
           </li>
         `;
         })

package/dist/components/collections/grid-view.js

@@ -202,6 +202,8 @@ export class BoxGridViewElement extends BaseElement {
             const metaMarkup = item.meta
                 ? `<span part="meta">${escapeHtml(item.meta)}</span>`
                 : "";
+            // Per-item named slot lets a host override the tile body (slotRenderer
+            // parity); the default thumb/label/meta is the slot's fallback content.
             return `
           <button
             type="button"
@@ -211,9 +213,11 @@ export class BoxGridViewElement extends BaseElement {
             aria-selected="${String(isSelected)}"
             tabindex="${item.value === tabbableValue ? "0" : "-1"}"
           >
-            <span part="thumb" aria-hidden="true">${iconMarkup}</span>
-            <span part="tile-label">${escapeHtml(item.label)}</span>
-            ${metaMarkup}
+            <slot name="tile-${escapeHtml(item.value)}" part="tile-slot">
+              <span part="thumb" aria-hidden="true">${iconMarkup}</span>
+              <span part="tile-label">${escapeHtml(item.label)}</span>
+              ${metaMarkup}
+            </slot>
           </button>
         `;
         })

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;

package/dist/components/collections/table.js

@@ -0,0 +1,323 @@
+import { BaseElement } from "../../core/index.js";
+import { boePanel, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-table";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+const tableStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="shell"] {
+    border: ${boePanel.border};
+    border-radius: ${boeRadius.large};
+    overflow: auto;
+    background: var(--boe-token-surface-surface, #ffffff);
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+  }
+
+  thead th {
+    text-align: start;
+    padding: ${boeSpace[2]} ${boeSpace[3]};
+    background: var(--boe-token-surface-surface-secondary, #fbfbfb);
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);
+    position: sticky;
+    top: 0;
+  }
+
+  th[data-align="end"], td[data-align="end"] { text-align: end; }
+  th[data-align="center"], td[data-align="center"] { text-align: center; }
+
+  th[part="sortable"] {
+    cursor: pointer;
+    user-select: none;
+  }
+  th[part="sortable"]:hover { color: var(--boe-token-text-text, #222222); }
+  th[aria-sort] .boe-sort-arrow::after { content: " ↕"; opacity: 0.5; }
+  th[aria-sort="ascending"] .boe-sort-arrow::after { content: " ↑"; opacity: 1; }
+  th[aria-sort="descending"] .boe-sort-arrow::after { content: " ↓"; opacity: 1; }
+
+  tbody td {
+    padding: ${boeSpace[2]} ${boeSpace[3]};
+    border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  tbody tr:last-child td { border-bottom: none; }
+
+  tbody tr[part="row"] {
+    outline: none;
+  }
+
+  :host([selection-mode]:not([selection-mode="none"])) tbody tr[part="row"] {
+    cursor: pointer;
+  }
+
+  tbody tr[aria-selected="true"] td {
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, transparent);
+  }
+
+  tbody tr[part="row"]:focus-visible td {
+    box-shadow: inset 0 0 0 2px var(--boe-token-surface-surface-brand, #0061d5);
+  }
+`;
+/**
+ * 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 class BoxTableElement extends BaseElement {
+    static get observedAttributes() {
+        return ["columns", "rows", "selection-mode", "label", "sort-key", "sort-direction"];
+    }
+    bodyEl;
+    headEl;
+    selected = new Set();
+    anchorIndex = -1;
+    get columns() {
+        return this.parseJson("columns", []);
+    }
+    set columns(value) {
+        this.setAttribute("columns", JSON.stringify(value));
+    }
+    get rows() {
+        return this.parseJson("rows", []);
+    }
+    set rows(value) {
+        this.setAttribute("rows", JSON.stringify(value));
+    }
+    get selectionMode() {
+        const mode = this.getAttribute("selection-mode");
+        return mode === "single" || mode === "multiple" ? mode : "none";
+    }
+    set selectionMode(value) {
+        this.setAttribute("selection-mode", value);
+    }
+    get selectedIds() {
+        return [...this.selected];
+    }
+    set selectedIds(value) {
+        this.selected = new Set(value);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Table";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    parseJson(attr, fallback) {
+        const raw = this.getAttribute(attr);
+        if (!raw)
+            return fallback;
+        try {
+            const parsed = JSON.parse(raw);
+            return parsed ?? fallback;
+        }
+        catch {
+            return fallback;
+        }
+    }
+    cellText(row, column, index) {
+        if (Array.isArray(row.cells)) {
+            return row.cells[index] ?? "";
+        }
+        return row.cells[column.key] ?? "";
+    }
+    renderTemplate() {
+        if (!this.shadowRoot)
+            return;
+        this.shadowRoot.innerHTML = `
+      <style>${tableStyles}</style>
+      <div part="shell">
+        <table part="table">
+          <thead><tr part="header-row"></tr></thead>
+          <tbody part="body"></tbody>
+        </table>
+      </div>
+    `;
+        this.headEl = this.shadowRoot.querySelector('[part="header-row"]');
+        this.bodyEl = this.shadowRoot.querySelector('[part="body"]');
+    }
+    setupListeners() {
+        this.headEl.addEventListener("click", event => {
+            const th = event.target.closest('th[part="sortable"]');
+            if (!th)
+                return;
+            this.toggleSort(th.dataset.key ?? "");
+        });
+        this.bodyEl.addEventListener("click", event => {
+            const row = event.target.closest('[part="row"]');
+            if (!row)
+                return;
+            const mouse = event;
+            this.activateRow(Number(row.dataset.index), { shift: mouse.shiftKey, toggle: mouse.ctrlKey || mouse.metaKey });
+        });
+        this.bodyEl.addEventListener("keydown", event => this.onBodyKeydown(event));
+    }
+    rowElements() {
+        return Array.from(this.bodyEl.querySelectorAll('[part="row"]'));
+    }
+    onBodyKeydown(event) {
+        const rows = this.rowElements();
+        if (rows.length === 0)
+            return;
+        const currentRow = event.target.closest('[part="row"]');
+        const index = currentRow ? Number(currentRow.dataset.index) : -1;
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "a") {
+            if (this.selectionMode === "multiple") {
+                event.preventDefault();
+                this.selectAll();
+            }
+            return;
+        }
+        if (event.key === "Escape") {
+            if (this.selected.size) {
+                event.preventDefault();
+                this.setSelection([]);
+            }
+            return;
+        }
+        if (event.key === " ") {
+            event.preventDefault();
+            this.activateRow(index, { toggle: this.selectionMode === "multiple" });
+            return;
+        }
+        let nextIndex = index;
+        if (event.key === "ArrowDown")
+            nextIndex = Math.min(index + 1, rows.length - 1);
+        else if (event.key === "ArrowUp")
+            nextIndex = Math.max(index - 1, 0);
+        else if (event.key === "Home")
+            nextIndex = 0;
+        else if (event.key === "End")
+            nextIndex = rows.length - 1;
+        else
+            return;
+        event.preventDefault();
+        rows[nextIndex]?.focus();
+        // Shift+Arrow extends the selection from the anchor.
+        if (event.shiftKey && this.selectionMode === "multiple") {
+            this.selectRange(this.anchorIndex < 0 ? index : this.anchorIndex, nextIndex);
+        }
+    }
+    toggleSort(key) {
+        const currentKey = this.getAttribute("sort-key");
+        const currentDir = this.getAttribute("sort-direction");
+        const direction = currentKey === key && currentDir === "ascending" ? "descending" : "ascending";
+        this.dispatchEvent(new CustomEvent("sort", { bubbles: true, composed: true, detail: { key, direction } }));
+    }
+    activateRow(index, options = {}) {
+        const rows = this.rows;
+        const row = rows[index];
+        if (!row || this.selectionMode === "none")
+            return;
+        if (this.selectionMode === "single") {
+            this.setSelection([row.id]);
+            this.anchorIndex = index;
+            return;
+        }
+        if (options.shift && this.anchorIndex >= 0) {
+            this.selectRange(this.anchorIndex, index);
+            return;
+        }
+        if (options.toggle) {
+            const next = new Set(this.selected);
+            next.has(row.id) ? next.delete(row.id) : next.add(row.id);
+            this.setSelection([...next]);
+        }
+        else {
+            this.setSelection([row.id]);
+        }
+        this.anchorIndex = index;
+    }
+    selectRange(from, to) {
+        const rows = this.rows;
+        const [start, end] = from <= to ? [from, to] : [to, from];
+        const ids = rows.slice(start, end + 1).map(row => row.id);
+        this.setSelection(ids);
+    }
+    selectAll() {
+        this.setSelection(this.rows.map(row => row.id));
+    }
+    setSelection(ids) {
+        this.selected = new Set(ids);
+        this.applySelectionState();
+        this.dispatchEvent(new CustomEvent("selection-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { selectedIds: [...this.selected] },
+        }));
+    }
+    applySelectionState() {
+        for (const row of this.rowElements()) {
+            const id = row.dataset.id ?? "";
+            row.setAttribute("aria-selected", String(this.selected.has(id)));
+        }
+    }
+    update() {
+        if (!this.bodyEl || !this.headEl)
+            return;
+        const columns = this.columns;
+        const rows = this.rows;
+        const selectable = this.selectionMode !== "none";
+        const sortKey = this.getAttribute("sort-key");
+        const sortDir = this.getAttribute("sort-direction");
+        this.shadowRoot?.querySelector('[part="table"]')?.setAttribute("aria-label", this.label);
+        this.shadowRoot?.querySelector('[part="table"]')?.setAttribute("role", selectable ? "grid" : "table");
+        this.headEl.innerHTML = columns
+            .map(column => {
+            const align = column.align ? ` data-align="${column.align}"` : "";
+            if (column.sortable) {
+                const sort = sortKey === column.key ? ` aria-sort="${sortDir === "descending" ? "descending" : "ascending"}"` : ' aria-sort="none"';
+                return `<th part="sortable" scope="col" data-key="${escapeHtml(column.key)}"${align}${sort}>${escapeHtml(column.label)}<span class="boe-sort-arrow" aria-hidden="true"></span></th>`;
+            }
+            return `<th scope="col"${align}>${escapeHtml(column.label)}</th>`;
+        })
+            .join("");
+        this.bodyEl.innerHTML = rows
+            .map((row, index) => {
+            const selected = this.selected.has(row.id);
+            const rowAttrs = selectable
+                ? ` part="row" role="row" tabindex="${index === 0 ? "0" : "-1"}" aria-selected="${selected}"`
+                : ' part="row" role="row"';
+            const cells = columns
+                .map(column => {
+                const align = column.align ? ` data-align="${column.align}"` : "";
+                const role = selectable ? ' role="gridcell"' : ' role="cell"';
+                return `<td${align}${role}>${escapeHtml(this.cellText(row, column, columns.indexOf(column)))}</td>`;
+            })
+                .join("");
+            return `<tr${rowAttrs} data-index="${index}" data-id="${escapeHtml(row.id)}">${cells}</tr>`;
+        })
+            .join("");
+    }
+}
+export const defineBoxTableElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxTableElement);
+    return BoxTableElement;
+};

package/dist/components/collections/thumbnail-card.d.ts

@@ -0,0 +1,19 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxThumbnailCardElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private cardEl;
+    private titleEl;
+    private subtitleEl;
+    get cardTitle(): string;
+    set cardTitle(value: string);
+    get subtitle(): string;
+    set subtitle(value: string);
+    /** When set, the card is a button: focusable, keyboard-activated, emits `activate`. */
+    get interactive(): boolean;
+    set interactive(value: boolean);
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private activate;
+    protected update(): void;
+}
+export declare const defineBoxThumbnailCardElement: (tagName?: string) => typeof BoxThumbnailCardElement;