@unofficialbox/box-open-elements 0.2.0 → 0.3.0

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;

package/dist/components/collections/thumbnail-card.js

@@ -0,0 +1,210 @@
+import { BaseElement } from "../../core/index.js";
+import { boePanel, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-thumbnail-card";
+/** Rich file/grid card — box-ui-elements `ThumbnailCard`. */
+const thumbnailCardStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="card"] {
+    display: grid;
+    grid-template-rows: auto auto;
+    width: 100%;
+    min-width: 160px;
+    border: ${boePanel.border};
+    border-radius: ${boeRadius.large};
+    background: var(--boe-token-surface-surface, #ffffff);
+    overflow: hidden;
+    transition:
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  :host([interactive]) [part="card"] {
+    cursor: pointer;
+  }
+
+  :host([highlight-on-hover]) [part="card"]:hover,
+  :host([interactive]) [part="card"]:hover {
+    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
+  }
+
+  [part="card"]:focus-visible {
+    outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5);
+    outline-offset: 2px;
+  }
+
+  [part="thumbnail"] {
+    display: grid;
+    place-items: center;
+    aspect-ratio: 16 / 10;
+    background: var(--boe-token-surface-surface-secondary, #f4f4f4);
+    overflow: hidden;
+  }
+
+  [part="thumbnail"] ::slotted(img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  [part="details"] {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: ${boeSpace[2]};
+    padding: ${boeSpace[3]};
+  }
+
+  [part="icon"] {
+    display: inline-flex;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="icon"]:not(:has(*)) {
+    display: none;
+  }
+
+  [part="text"] {
+    min-width: 0;
+    display: grid;
+    gap: 2px;
+  }
+
+  [part="title"] {
+    font-size: ${boeSpace[3]};
+    font-weight: 600;
+    color: var(--boe-token-text-text, #222222);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [part="subtitle"] {
+    font-size: 12px;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [part="subtitle"][hidden] {
+    display: none;
+  }
+
+  [part="action"] {
+    display: inline-flex;
+  }
+
+  [part="action"]:not(:has(*)) {
+    display: none;
+  }
+`;
+export class BoxThumbnailCardElement extends BaseElement {
+    static get observedAttributes() {
+        return ["title", "subtitle", "interactive", "highlight-on-hover"];
+    }
+    cardEl;
+    titleEl;
+    subtitleEl;
+    get cardTitle() {
+        return this.getAttribute("title") ?? "";
+    }
+    set cardTitle(value) {
+        this.setAttribute("title", value);
+    }
+    get subtitle() {
+        return this.getAttribute("subtitle") ?? "";
+    }
+    set subtitle(value) {
+        if (value) {
+            this.setAttribute("subtitle", value);
+        }
+        else {
+            this.removeAttribute("subtitle");
+        }
+    }
+    /** When set, the card is a button: focusable, keyboard-activated, emits `activate`. */
+    get interactive() {
+        return this.hasAttribute("interactive");
+    }
+    set interactive(value) {
+        this.toggleAttribute("interactive", Boolean(value));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${thumbnailCardStyles}</style>
+      <div part="card">
+        <div part="thumbnail"><slot name="thumbnail"></slot></div>
+        <div part="details">
+          <span part="icon"><slot name="icon"></slot></span>
+          <div part="text">
+            <div part="title"></div>
+            <div part="subtitle"></div>
+          </div>
+          <span part="action"><slot name="action"></slot></span>
+        </div>
+      </div>
+    `;
+        this.cardEl = this.shadowRoot.querySelector('[part="card"]');
+        this.titleEl = this.shadowRoot.querySelector('[part="title"]');
+        this.subtitleEl = this.shadowRoot.querySelector('[part="subtitle"]');
+    }
+    setupListeners() {
+        this.cardEl.addEventListener("click", () => this.activate());
+        this.cardEl.addEventListener("keydown", event => {
+            if (!this.interactive) {
+                return;
+            }
+            const key = event.key;
+            if (key === "Enter" || key === " ") {
+                event.preventDefault();
+                this.activate();
+            }
+        });
+    }
+    activate() {
+        if (!this.interactive) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent("activate", {
+            bubbles: true,
+            composed: true,
+            detail: { title: this.cardTitle },
+        }));
+    }
+    update() {
+        if (!this.cardEl || !this.titleEl || !this.subtitleEl) {
+            return;
+        }
+        this.titleEl.textContent = this.cardTitle;
+        this.subtitleEl.textContent = this.subtitle;
+        this.subtitleEl.hidden = this.subtitle.length === 0;
+        if (this.interactive) {
+            this.cardEl.setAttribute("role", "button");
+            this.cardEl.setAttribute("tabindex", "0");
+            this.cardEl.setAttribute("aria-label", this.cardTitle);
+        }
+        else {
+            this.cardEl.removeAttribute("role");
+            this.cardEl.removeAttribute("tabindex");
+            this.cardEl.removeAttribute("aria-label");
+        }
+    }
+}
+export const defineBoxThumbnailCardElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxThumbnailCardElement);
+    return BoxThumbnailCardElement;
+};

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

@@ -0,0 +1,14 @@
+import { BaseElement } from "../../core/index.js";
+/**
+ * Overlays badges on the corners of its content — the box-ui-elements
+ * `Badgeable` wrapper. The subject goes in the default slot; each corner is a
+ * named slot (`top-left`, `top-right`, `bottom-left`, `bottom-right`). Corners
+ * with no assigned content are hidden so they don't capture pointer events.
+ */
+export declare class BoxBadgeableElement extends BaseElement {
+    private corners;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxBadgeableElement: (tagName?: string) => typeof BoxBadgeableElement;

package/dist/components/feedback/badgeable.js

@@ -0,0 +1,84 @@
+import { BaseElement } from "../../core/index.js";
+const DEFAULT_TAG_NAME = "box-badgeable";
+/** Corners a badge can be pinned to, matching box-ui-elements' Badgeable. */
+const CORNERS = ["top-left", "top-right", "bottom-left", "bottom-right"];
+const badgeableStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="container"] {
+    position: relative;
+    display: inline-flex;
+  }
+
+  [part="badge"] {
+    position: absolute;
+    z-index: 1;
+    display: inline-flex;
+    pointer-events: none;
+  }
+
+  /* Slotted badge content stays interactive (e.g. a dismiss button). */
+  [part="badge"] ::slotted(*) {
+    pointer-events: auto;
+  }
+
+  [part="badge"][hidden] {
+    display: none;
+  }
+
+  [part="badge"][data-corner="top-left"] { inset-block-start: 0; inset-inline-start: 0; transform: translate(-35%, -35%); }
+  [part="badge"][data-corner="top-right"] { inset-block-start: 0; inset-inline-end: 0; transform: translate(35%, -35%); }
+  [part="badge"][data-corner="bottom-left"] { inset-block-end: 0; inset-inline-start: 0; transform: translate(-35%, 35%); }
+  [part="badge"][data-corner="bottom-right"] { inset-block-end: 0; inset-inline-end: 0; transform: translate(35%, 35%); }
+`;
+/**
+ * Overlays badges on the corners of its content — the box-ui-elements
+ * `Badgeable` wrapper. The subject goes in the default slot; each corner is a
+ * named slot (`top-left`, `top-right`, `bottom-left`, `bottom-right`). Corners
+ * with no assigned content are hidden so they don't capture pointer events.
+ */
+export class BoxBadgeableElement extends BaseElement {
+    corners = new Map();
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${badgeableStyles}</style>
+      <span part="container">
+        <slot></slot>
+        ${CORNERS.map(corner => `<span part="badge" data-corner="${corner}" hidden><slot name="${corner}"></slot></span>`).join("")}
+      </span>
+    `;
+        this.corners.clear();
+        for (const corner of CORNERS) {
+            const wrapper = this.shadowRoot.querySelector(`[data-corner="${corner}"]`);
+            const slot = wrapper.querySelector("slot");
+            this.corners.set(corner, { wrapper, slot });
+        }
+    }
+    setupListeners() {
+        for (const { wrapper, slot } of this.corners.values()) {
+            slot.addEventListener("slotchange", () => {
+                wrapper.hidden = slot.assignedNodes({ flatten: true }).length === 0;
+            });
+        }
+    }
+    update() {
+        for (const { wrapper, slot } of this.corners.values()) {
+            wrapper.hidden = slot.assignedNodes({ flatten: true }).length === 0;
+        }
+    }
+}
+export const defineBoxBadgeableElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxBadgeableElement);
+    return BoxBadgeableElement;
+};

package/dist/components/forms/date-field.d.ts

@@ -5,6 +5,7 @@ export declare class BoxDateFieldElement extends FormAssociatedElement {
     private valueInternal;
     private inputEl;
     private labelEl;
+    private descriptionEl;
     private errorEl;
     get disabled(): boolean;
     set disabled(value: boolean);