@unofficialbox/box-open-elements 0.1.0

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

@@ -0,0 +1,306 @@
+import { BaseElement } from "../../core/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-draggable-list";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const draggableListStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="list"] {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 0.4rem;
+  }
+
+  [part="item"] {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    padding: 0.5rem 0.65rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+    border-radius: ${boeRadius.med};
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="item"][data-dragging="true"] {
+    opacity: 0.5;
+  }
+
+  [part="item"][data-drop-target="true"] {
+    border-color: var(--boe-token-surface-surface-brand, #0061d5);
+  }
+
+  [part="handle"] {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.6rem;
+    block-size: 1.6rem;
+    padding: 0;
+    border: 0;
+    border-radius: ${boeRadius.control};
+    background: transparent;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    cursor: grab;
+  }
+
+  [part="handle"] svg {
+    inline-size: 1rem;
+    block-size: 1rem;
+  }
+
+  ${boeNeutralInteractiveStyles('[part="handle"]')}
+
+  [part="item-label"] {
+    font-size: 0.9rem;
+    font-weight: 500;
+  }
+
+  [part="empty"] {
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="status"] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+`;
+/**
+ * A reorderable list. Items arrive via the `items` property; reordering is
+ * available by pointer drag and by keyboard (focus a row's handle, then
+ * ArrowUp/ArrowDown to move it). Every reorder updates `items` and emits a
+ * `reorder` event carrying the moved value, its old/new index, and the new
+ * order. It owns no persistence — the host stores the order.
+ */
+export class BoxDraggableListElement extends BaseElement {
+    static get observedAttributes() {
+        return ["items", "label"];
+    }
+    dragValue = null;
+    focusValue = null;
+    lastItemsJson = "";
+    contentEl;
+    statusEl;
+    get items() {
+        const raw = this.getAttribute("items");
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set items(value) {
+        this.setAttribute("items", JSON.stringify(value));
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Reorderable list";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    /** Move the item at `from` to `to`, persist, and announce it. */
+    moveItem(from, to) {
+        const items = this.items;
+        if (from < 0 || from >= items.length || to < 0 || to >= items.length || from === to) {
+            return;
+        }
+        const next = [...items];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        this.focusValue = moved.value;
+        this.setAttribute("items", JSON.stringify(next));
+        if (this.isRendered) {
+            this.update();
+        }
+        if (this.statusEl) {
+            this.statusEl.textContent = `${moved.label} moved to position ${to + 1} of ${next.length}`;
+        }
+        this.dispatchEvent(new CustomEvent("reorder", {
+            bubbles: true,
+            composed: true,
+            detail: { value: moved.value, from, to, items: next },
+        }));
+    }
+    indexOf(value) {
+        return this.items.findIndex(item => item.value === value);
+    }
+    renderRows(items) {
+        return items
+            .map((item, index) => {
+            const position = index + 1;
+            return `
+          <li
+            part="item"
+            role="listitem"
+            draggable="true"
+            data-value="${escapeHtml(item.value)}"
+            data-index="${index}"
+          >
+            <button
+              type="button"
+              part="handle"
+              aria-label="Reorder ${escapeHtml(item.label)}, position ${position} of ${items.length}"
+              tabindex="${item.value === (this.focusValue ?? items[0]?.value) ? "0" : "-1"}"
+            >
+              <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+                <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>
+          </li>
+        `;
+        })
+            .join("");
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${draggableListStyles}</style>
+      <div part="content"></div>
+      <div part="status" role="status" aria-live="polite" aria-atomic="true"></div>
+    `;
+        this.contentEl = this.shadowRoot.querySelector('[part="content"]');
+        this.statusEl = this.shadowRoot.querySelector('[part="status"]');
+    }
+    setupListeners() {
+        this.contentEl.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            const handle = keyboardEvent.target?.closest('[part="handle"]');
+            if (!handle || !this.contentEl.contains(handle)) {
+                return;
+            }
+            const row = handle.closest('[part="item"]');
+            const value = row?.dataset.value ?? "";
+            const index = this.indexOf(value);
+            if (keyboardEvent.key === "ArrowUp") {
+                keyboardEvent.preventDefault();
+                this.moveItem(index, index - 1);
+            }
+            else if (keyboardEvent.key === "ArrowDown") {
+                keyboardEvent.preventDefault();
+                this.moveItem(index, index + 1);
+            }
+            else if (keyboardEvent.key === "Home") {
+                keyboardEvent.preventDefault();
+                this.moveItem(index, 0);
+            }
+            else if (keyboardEvent.key === "End") {
+                keyboardEvent.preventDefault();
+                this.moveItem(index, this.items.length - 1);
+            }
+        });
+        this.contentEl.addEventListener("dragstart", event => {
+            const row = event.target?.closest('[part="item"]');
+            if (!row || !this.contentEl.contains(row)) {
+                return;
+            }
+            this.dragValue = row.dataset.value ?? null;
+            row.dataset.dragging = "true";
+            event.dataTransfer?.setData("text/plain", this.dragValue ?? "");
+        });
+        this.contentEl.addEventListener("dragover", event => {
+            const row = event.target?.closest('[part="item"]');
+            if (!row || !this.contentEl.contains(row)) {
+                return;
+            }
+            event.preventDefault();
+            row.dataset.dropTarget = "true";
+        });
+        this.contentEl.addEventListener("dragleave", event => {
+            const row = event.target?.closest('[part="item"]');
+            if (!row || !this.contentEl.contains(row)) {
+                return;
+            }
+            const related = event.relatedTarget;
+            if (related && row.contains(related)) {
+                return;
+            }
+            delete row.dataset.dropTarget;
+        });
+        this.contentEl.addEventListener("drop", event => {
+            const row = event.target?.closest('[part="item"]');
+            if (!row || !this.contentEl.contains(row)) {
+                return;
+            }
+            event.preventDefault();
+            delete row.dataset.dropTarget;
+            if (this.dragValue === null) {
+                return;
+            }
+            const from = this.indexOf(this.dragValue);
+            const to = this.indexOf(row.dataset.value ?? "");
+            this.dragValue = null;
+            this.moveItem(from, to);
+        });
+        this.contentEl.addEventListener("dragend", event => {
+            const row = event.target?.closest('[part="item"]');
+            if (row && this.contentEl.contains(row)) {
+                delete row.dataset.dragging;
+            }
+            this.dragValue = null;
+            this.contentEl.querySelectorAll('[data-drop-target="true"]').forEach(node => {
+                delete node.dataset.dropTarget;
+            });
+        });
+    }
+    update() {
+        if (!this.contentEl) {
+            return;
+        }
+        const items = this.items;
+        const itemsJson = this.getAttribute("items") ?? "";
+        if (!items.length) {
+            this.contentEl.innerHTML = `<div part="empty">No items loaded</div>`;
+            this.lastItemsJson = itemsJson;
+            return;
+        }
+        if (itemsJson !== this.lastItemsJson || !this.contentEl.querySelector('[part="list"]')) {
+            this.contentEl.innerHTML = `<ul part="list" role="list" aria-label="${escapeHtml(this.label)}">${this.renderRows(items)}</ul>`;
+            this.lastItemsJson = itemsJson;
+        }
+        else {
+            this.contentEl.querySelector('[part="list"]')?.setAttribute("aria-label", this.label);
+        }
+        if (this.focusValue) {
+            const target = Array.from(this.contentEl.querySelectorAll('[part="item"]')).find(node => node.dataset.value === this.focusValue);
+            target?.querySelector('[part="handle"]')?.focus();
+            this.focusValue = null;
+        }
+    }
+}
+export const defineBoxDraggableListElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxDraggableListElement);
+    return BoxDraggableListElement;
+};

package/dist/components/collections/grid-view.d.ts

@@ -0,0 +1,38 @@
+import { BaseElement } from "../../core/index.js";
+type BoxGridViewItem = {
+    value: string;
+    label: string;
+    meta?: string;
+    icon?: string;
+};
+/**
+ * A grid/gallery view mode for a collection, alongside `list` and `table`. Items
+ * arrive as a `items` property (data in); single selection is exposed as `value`
+ * and announced with a `value-changed` event (interaction out). Tiles form a
+ * listbox: one tile is tabbable (roving `tabindex`), arrow keys move focus, and
+ * Enter/Space or click selects. It owns no transport.
+ */
+export declare class BoxGridViewElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private focusValue;
+    private lastItemsJson;
+    private contentEl;
+    get items(): BoxGridViewItem[];
+    set items(value: BoxGridViewItem[]);
+    get label(): string;
+    set label(value: string);
+    get value(): string;
+    set value(nextValue: string);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private selectValue;
+    private moveFocus;
+    private moveFocusTo;
+    private renderTiles;
+    private getGridEl;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxGridViewElement: (tagName?: string) => typeof BoxGridViewElement;
+export {};

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

@@ -0,0 +1,321 @@
+import { BaseElement } from "../../core/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+import { boxIconography } from "../../foundations/icons/index.js";
+const DEFAULT_TAG_NAME = "box-grid-view";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const iconLibrary = boxIconography;
+/**
+ * Render a tile thumbnail glyph. A known Box iconography name (`"folder"`,
+ * `"file-document"`, `"link"`, …) resolves to that icon's trusted SVG markup;
+ * any other value is treated as literal text (e.g. a single-letter monogram)
+ * and HTML-escaped. Empty when no icon is provided.
+ */
+const renderThumbIcon = (icon) => {
+    if (!icon) {
+        return "";
+    }
+    return iconLibrary[icon] ?? escapeHtml(icon);
+};
+const gridViewStyles = `
+  :host {
+    display: block;
+    /* Fill the host container so the auto-fill grid can form multiple columns.
+       As a bare block this collapses to content width inside flex/inline parents
+       (e.g. a flex preview canvas), rendering a single column. */
+    inline-size: 100%;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="grid"] {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
+    gap: 0.55rem;
+  }
+
+  [part~="tile"] {
+    appearance: none;
+    display: grid;
+    justify-items: center;
+    gap: 0.5rem;
+    padding: 0.6rem 0.65rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+    border-radius: ${boeRadius.large};
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: var(--boe-token-text-text, #222222);
+    font: inherit;
+    text-align: center;
+    cursor: pointer;
+    transition: border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part~="tile-selected"] {
+    border-color: var(--boe-token-surface-surface-brand, #0061d5);
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #ffffff) 90%);
+  }
+
+  ${boeNeutralInteractiveStyles('[part~="tile"]')}
+
+  [part="thumb"] {
+    display: grid;
+    place-items: center;
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+    border-radius: ${boeRadius.large};
+    background: color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 82%, var(--boe-token-surface-surface, #ffffff) 18%);
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font-size: 1.1rem;
+    font-weight: 700;
+  }
+
+  [part="thumb"] svg {
+    inline-size: 1.6rem;
+    block-size: 1.6rem;
+  }
+
+  [part="tile-label"] {
+    font-size: 0.85rem;
+    font-weight: 600;
+    line-height: 1.25;
+    overflow-wrap: anywhere;
+  }
+
+  [part="meta"] {
+    font-size: 0.76rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="empty"] {
+    padding: 0.7rem;
+    text-align: center;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font-size: 0.9rem;
+  }
+`;
+/**
+ * A grid/gallery view mode for a collection, alongside `list` and `table`. Items
+ * arrive as a `items` property (data in); single selection is exposed as `value`
+ * and announced with a `value-changed` event (interaction out). Tiles form a
+ * listbox: one tile is tabbable (roving `tabindex`), arrow keys move focus, and
+ * Enter/Space or click selects. It owns no transport.
+ */
+export class BoxGridViewElement extends BaseElement {
+    static get observedAttributes() {
+        return ["items", "label", "value"];
+    }
+    valueInternal = "";
+    focusValue = null;
+    lastItemsJson = "";
+    contentEl;
+    get items() {
+        const raw = this.getAttribute("items");
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set items(value) {
+        this.setAttribute("items", JSON.stringify(value));
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Items";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get value() {
+        return this.valueInternal;
+    }
+    set value(nextValue) {
+        this.valueInternal = nextValue;
+        this.setAttribute("value", nextValue);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value") {
+            this.valueInternal = this.getAttribute("value") ?? "";
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    selectValue(value) {
+        if (!value || value === this.valueInternal) {
+            return;
+        }
+        this.valueInternal = value;
+        this.setAttribute("value", value);
+        this.focusValue = value;
+        if (this.isRendered) {
+            this.update();
+        }
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value },
+        }));
+    }
+    moveFocus(current, delta) {
+        const items = this.items;
+        if (!items.length) {
+            return;
+        }
+        const currentIndex = items.findIndex(item => item.value === current);
+        const nextIndex = Math.max(0, Math.min(items.length - 1, currentIndex + delta));
+        const nextValue = items[nextIndex]?.value;
+        if (nextValue) {
+            this.focusValue = nextValue;
+            this.update();
+        }
+    }
+    moveFocusTo(edge) {
+        const items = this.items;
+        if (!items.length) {
+            return;
+        }
+        const nextValue = edge === "first" ? items[0]?.value : items[items.length - 1]?.value;
+        if (nextValue) {
+            this.focusValue = nextValue;
+            this.update();
+        }
+    }
+    renderTiles(items) {
+        const tabbableValue = this.focusValue ?? (this.valueInternal || items[0]?.value || "");
+        return items
+            .map(item => {
+            const isSelected = item.value === this.valueInternal;
+            const tilePart = isSelected ? "tile tile-selected" : "tile";
+            const iconMarkup = renderThumbIcon(item.icon);
+            const metaMarkup = item.meta
+                ? `<span part="meta">${escapeHtml(item.meta)}</span>`
+                : "";
+            return `
+          <button
+            type="button"
+            part="${tilePart}"
+            role="option"
+            data-value="${escapeHtml(item.value)}"
+            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}
+          </button>
+        `;
+        })
+            .join("");
+    }
+    getGridEl() {
+        return this.contentEl.querySelector('[part="grid"]');
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${gridViewStyles}</style>
+      <div part="content"></div>
+    `;
+        this.contentEl = this.shadowRoot.querySelector('[part="content"]');
+    }
+    setupListeners() {
+        this.contentEl.addEventListener("click", event => {
+            const tile = event.target?.closest('[part~="tile"]');
+            if (!tile || !this.contentEl.contains(tile)) {
+                return;
+            }
+            this.selectValue(tile.dataset.value ?? "");
+        });
+        this.contentEl.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            const tile = keyboardEvent.target?.closest('[part~="tile"]');
+            if (!tile || !this.contentEl.contains(tile)) {
+                return;
+            }
+            const value = tile.dataset.value ?? "";
+            switch (keyboardEvent.key) {
+                case "ArrowRight":
+                case "ArrowDown":
+                    keyboardEvent.preventDefault();
+                    this.moveFocus(value, 1);
+                    break;
+                case "ArrowLeft":
+                case "ArrowUp":
+                    keyboardEvent.preventDefault();
+                    this.moveFocus(value, -1);
+                    break;
+                case "Home":
+                    keyboardEvent.preventDefault();
+                    this.moveFocusTo("first");
+                    break;
+                case "End":
+                    keyboardEvent.preventDefault();
+                    this.moveFocusTo("last");
+                    break;
+                case "Enter":
+                case " ":
+                    keyboardEvent.preventDefault();
+                    this.selectValue(value);
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+    update() {
+        if (!this.contentEl) {
+            return;
+        }
+        const items = this.items;
+        const itemsJson = this.getAttribute("items") ?? "";
+        if (!items.length) {
+            this.contentEl.innerHTML = `<div part="empty">No items loaded</div>`;
+            this.lastItemsJson = itemsJson;
+            return;
+        }
+        const gridEl = this.getGridEl();
+        const needsRebuild = !gridEl || itemsJson !== this.lastItemsJson;
+        const tabbableValue = this.focusValue ?? (this.valueInternal || items[0]?.value || "");
+        if (needsRebuild) {
+            this.contentEl.innerHTML = `<div part="grid" role="listbox" aria-label="${escapeHtml(this.label)}">${this.renderTiles(items)}</div>`;
+            this.lastItemsJson = itemsJson;
+        }
+        else {
+            gridEl.setAttribute("aria-label", this.label);
+            gridEl.querySelectorAll('[part~="tile"]').forEach(node => {
+                const tile = node;
+                const value = tile.dataset.value ?? "";
+                const isSelected = value === this.valueInternal;
+                tile.setAttribute("part", isSelected ? "tile tile-selected" : "tile");
+                tile.setAttribute("aria-selected", String(isSelected));
+                tile.tabIndex = value === tabbableValue ? 0 : -1;
+            });
+        }
+        if (this.focusValue) {
+            const target = Array.from(this.contentEl.querySelectorAll('[part~="tile"]')).find(node => node.dataset.value === this.focusValue);
+            target?.focus();
+        }
+    }
+}
+export const defineBoxGridViewElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxGridViewElement);
+    return BoxGridViewElement;
+};

package/dist/components/collections/pagination.d.ts

@@ -0,0 +1,19 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxPaginationElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private previousEl;
+    private nextEl;
+    private summaryEl;
+    get page(): number;
+    set page(value: number);
+    get pageSize(): number;
+    set pageSize(value: number);
+    get totalItems(): number;
+    set totalItems(value: number);
+    private getPaginationState;
+    private emitPageChanged;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxPaginationElement: (tagName?: string) => typeof BoxPaginationElement;