@unofficialbox/box-open-elements 0.1.0

package/dist/components/collections/tree.js

@@ -0,0 +1,526 @@
+import { BaseElement } from "../../core/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-tree";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const collectBranchKeys = (items) => {
+    const keys = [];
+    for (const item of items) {
+        if ((item.children?.length ?? 0) > 0) {
+            const key = item.value ?? item.label;
+            keys.push(key, ...collectBranchKeys(item.children ?? []));
+        }
+    }
+    return keys;
+};
+const treeStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="shell"] {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    align-content: start;
+    min-height: 0;
+  }
+
+  [part="tree"] {
+    display: grid;
+    gap: 0.375rem;
+    min-height: 0;
+    align-content: start;
+  }
+
+  [part="controls"] {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.45rem;
+    margin-bottom: 0.55rem;
+    padding-bottom: 0.15rem;
+  }
+
+  [part="controls"][hidden] {
+    display: none;
+  }
+
+  [part="node"] {
+    display: grid;
+    gap: 0.375rem;
+  }
+
+  [part="row"] {
+    display: grid;
+    grid-template-columns: 1.125rem minmax(0, 1fr);
+    gap: 0.55rem;
+    align-items: center;
+    padding: 0.16rem 0.18rem;
+    border-radius: ${boeRadius.med};
+    background: color-mix(in srgb, var(--boe-token-surface-surface, #ffffff) 78%, transparent);
+  }
+
+  [part="children"] {
+    display: grid;
+    gap: 0.375rem;
+    margin-left: 0.5625rem;
+    padding-left: 1.1875rem;
+    border-left: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 78%, var(--boe-token-surface-surface, #ffffff) 22%);
+  }
+
+  [part~="toggle"] {
+    width: 1.125rem;
+    height: 1.125rem;
+    display: inline-grid;
+    place-items: center;
+    appearance: none;
+    border: none;
+    border-radius: ${boeRadius.size};
+    padding: 0;
+    line-height: 1;
+    background: transparent;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font: inherit;
+    cursor: pointer;
+    box-shadow: none;
+    transition:
+      background-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part~="toggle"]:hover {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part~="control"] {
+    width: 1.5rem;
+    height: 1.5rem;
+    display: inline-grid;
+    place-items: center;
+    appearance: none;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 88%, var(--boe-token-surface-surface, #ffffff) 12%);
+    border-radius: ${boeRadius.size};
+    padding: 0;
+    line-height: 1;
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    cursor: pointer;
+    box-shadow: none;
+    transition:
+      background-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part~="control"]:hover {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part~="toggle"] svg {
+    width: 0.625rem;
+    height: 0.625rem;
+    display: block;
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 1.6;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    transition: transform ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  /* Collapsed chevron points right; expanded rotates it to point down —
+     Box's flat disclosure idiom (no boxed circle, no plus/minus glyph). */
+  [part~="toggle-expanded"] svg {
+    transform: rotate(90deg);
+  }
+
+  [part~="control"] svg {
+    width: 0.75rem;
+    height: 0.75rem;
+    display: block;
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 1.3;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  [part="spacer"] {
+    width: 1.125rem;
+    height: 1.125rem;
+    display: inline-block;
+  }
+
+  [part~="item"] {
+    appearance: none;
+    text-align: left;
+    border: 1px solid transparent;
+    border-radius: ${boeRadius.med};
+    padding: 0.5rem 0.65rem;
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: var(--boe-token-text-text, #222222);
+    font: inherit;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition:
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      background-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part~="item"]:hover {
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, transparent);
+    background: var(--boe-token-surface-item-surface-hover, #eef4fb);
+  }
+
+  [part~="item-selected"] {
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
+    background: var(--boe-token-surface-item-surface-selected, #f2f7fd);
+    color: var(--boe-token-text-text, #222222);
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 14%, transparent);
+  }
+
+  [part~="item"]:focus-visible,
+  [part~="toggle"]:focus-visible,
+  [part~="control"]:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 34%, transparent);
+    outline-offset: 2px;
+  }
+`;
+export class BoxTreeElement extends BaseElement {
+    static get observedAttributes() {
+        return ["items", "label", "value"];
+    }
+    expandedInternal = new Set();
+    valueInternal = "";
+    focusKey = null;
+    controlsEl;
+    expandAllEl;
+    collapseAllEl;
+    treeEl;
+    get label() {
+        return this.getAttribute("label") ?? "Tree";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    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));
+        this.seedExpandedState(value);
+    }
+    get value() {
+        return this.valueInternal;
+    }
+    set value(nextValue) {
+        this.valueInternal = nextValue;
+        this.setAttribute("value", nextValue);
+    }
+    connectedCallback() {
+        this.seedExpandedState(this.items);
+        super.connectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "items") {
+            this.seedExpandedState(this.items);
+        }
+        if (name === "value") {
+            this.valueInternal = this.getAttribute("value") ?? "";
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    seedExpandedState(items) {
+        this.expandedInternal.clear();
+        for (const item of items) {
+            if ((item.children?.length ?? 0) > 0) {
+                const key = item.value ?? item.label;
+                this.expandedInternal.add(key);
+            }
+        }
+    }
+    toggleExpanded(key) {
+        if (this.expandedInternal.has(key)) {
+            this.expandedInternal.delete(key);
+        }
+        else {
+            this.expandedInternal.add(key);
+        }
+        this.update();
+    }
+    expandAll() {
+        this.expandedInternal = new Set(collectBranchKeys(this.items));
+        this.update();
+    }
+    collapseAll() {
+        this.expandedInternal.clear();
+        this.update();
+    }
+    getVisibleNodes(items, depth = 0) {
+        const nodes = [];
+        for (const item of items) {
+            const key = item.value ?? item.label;
+            const value = item.value ?? key;
+            const hasChildren = (item.children?.length ?? 0) > 0;
+            nodes.push({ depth, hasChildren, key, value });
+            if (hasChildren && this.expandedInternal.has(key)) {
+                nodes.push(...this.getVisibleNodes(item.children ?? [], depth + 1));
+            }
+        }
+        return nodes;
+    }
+    renderToggleIcon() {
+        // A single right-pointing chevron; CSS rotates it 90° when expanded.
+        return `
+      <svg viewBox="0 0 12 12" aria-hidden="true" focusable="false">
+        <path d="M4.5 2.5 8 6l-3.5 3.5" />
+      </svg>
+    `;
+    }
+    renderControlIcon(type) {
+        // Double chevron: pointing down = expand all, pointing up = collapse all.
+        const paths = type === "expand-all"
+            ? '<path d="M3 4.25 6 7l3-2.75" /><path d="M3 7.25 6 10l3-2.75" />'
+            : '<path d="M3 7.75 6 5l3 2.75" /><path d="M3 4.75 6 2l3 2.75" />';
+        return `
+      <svg viewBox="0 0 12 12" aria-hidden="true" focusable="false">
+        ${paths}
+      </svg>
+    `;
+    }
+    renderItems(items, depth = 0) {
+        return items
+            .map(item => {
+            const key = item.value ?? item.label;
+            const hasChildren = (item.children?.length ?? 0) > 0;
+            const isExpanded = this.expandedInternal.has(key);
+            const isSelected = item.value === this.valueInternal;
+            const togglePart = isExpanded ? "toggle toggle-expanded" : "toggle";
+            const itemPart = isSelected ? "item item-selected" : "item";
+            const childrenMarkup = hasChildren && isExpanded
+                ? `<div part="children" role="group">${this.renderItems(item.children ?? [], depth + 1)}</div>`
+                : "";
+            return `
+          <div part="node" data-depth="${depth}">
+            <div part="row">
+              ${hasChildren
+                ? `<button
+                      type="button"
+                      part="${togglePart}"
+                      data-key="${escapeHtml(key)}"
+                      aria-expanded="${String(isExpanded)}"
+                    >${this.renderToggleIcon()}</button>`
+                : `<span part="spacer" aria-hidden="true"></span>`}
+              <button
+                type="button"
+                part="${itemPart}"
+                role="treeitem"
+                data-key="${escapeHtml(key)}"
+                ${item.value ? `data-value="${escapeHtml(item.value)}"` : ""}
+                data-branch="${String(hasChildren)}"
+                data-selected="${String(isSelected)}"
+                aria-level="${depth + 1}"
+                ${hasChildren ? `aria-expanded="${String(isExpanded)}"` : ""}
+                ${item.value ? `aria-selected="${String(isSelected)}"` : ""}
+                tabindex="${key === (this.focusKey ?? (this.valueInternal || (this.items[0]?.value ?? this.items[0]?.label ?? "")))
+                ? "0"
+                : "-1"}"
+              >
+                ${escapeHtml(item.label)}
+              </button>
+            </div>
+            ${childrenMarkup}
+          </div>
+        `;
+        })
+            .join("");
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${treeStyles}</style>
+      <div part="shell">
+        <div part="controls" hidden>
+          <button
+            type="button"
+            part="control control-expand-all"
+            data-action="expand-all"
+            aria-label="Expand all"
+            title="Expand all"
+          >${this.renderControlIcon("expand-all")}</button>
+          <button
+            type="button"
+            part="control control-collapse-all"
+            data-action="collapse-all"
+            aria-label="Collapse all"
+            title="Collapse all"
+          >${this.renderControlIcon("collapse-all")}</button>
+        </div>
+        <div part="tree" role="tree"></div>
+      </div>
+    `;
+        this.controlsEl = this.shadowRoot.querySelector('[part="controls"]');
+        this.expandAllEl = this.shadowRoot.querySelector('[data-action="expand-all"]');
+        this.collapseAllEl = this.shadowRoot.querySelector('[data-action="collapse-all"]');
+        this.treeEl = this.shadowRoot.querySelector('[part="tree"]');
+    }
+    setupListeners() {
+        this.controlsEl.addEventListener("click", event => {
+            const control = event.target?.closest('[part~="control"]');
+            if (!control || !this.controlsEl.contains(control)) {
+                return;
+            }
+            const action = control.dataset.action;
+            if (action === "expand-all") {
+                this.expandAll();
+                return;
+            }
+            if (action === "collapse-all") {
+                this.collapseAll();
+            }
+        });
+        this.treeEl.addEventListener("click", event => {
+            const target = event.target;
+            const toggle = target?.closest('[part~="toggle"]');
+            if (toggle && this.treeEl.contains(toggle)) {
+                const key = toggle.dataset.key ?? "";
+                if (key) {
+                    this.focusKey = key;
+                    this.toggleExpanded(key);
+                }
+                return;
+            }
+            const item = target?.closest('[part~="item"]');
+            if (!item || !this.treeEl.contains(item)) {
+                return;
+            }
+            const value = item.dataset.value ?? "";
+            const key = item.dataset.key ?? "";
+            const isBranch = item.dataset.branch === "true";
+            if (!value && isBranch && key) {
+                this.focusKey = key;
+                this.toggleExpanded(key);
+                return;
+            }
+            if (!value || value === this.valueInternal) {
+                return;
+            }
+            this.focusKey = key;
+            this.valueInternal = value;
+            this.setAttribute("value", value);
+            this.dispatchEvent(new CustomEvent("value-changed", {
+                bubbles: true,
+                composed: true,
+                detail: { value },
+            }));
+            this.update();
+        });
+        this.treeEl.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            const element = keyboardEvent.target?.closest('[part~="item"]');
+            if (!element || !this.treeEl.contains(element)) {
+                return;
+            }
+            const key = element.dataset.key ?? "";
+            const isBranch = element.dataset.branch === "true";
+            const visibleNodes = this.getVisibleNodes(this.items);
+            const currentIndex = visibleNodes.findIndex(node => node.key === key);
+            if (keyboardEvent.key === "ArrowDown" || keyboardEvent.key === "ArrowUp") {
+                keyboardEvent.preventDefault();
+                const nextIndex = keyboardEvent.key === "ArrowDown"
+                    ? Math.min(visibleNodes.length - 1, currentIndex + 1)
+                    : Math.max(0, currentIndex - 1);
+                const nextNode = visibleNodes[nextIndex];
+                if (nextNode) {
+                    this.focusKey = nextNode.key;
+                    this.update();
+                }
+                return;
+            }
+            if (keyboardEvent.key === "ArrowRight" && isBranch) {
+                keyboardEvent.preventDefault();
+                if (!this.expandedInternal.has(key)) {
+                    this.expandedInternal.add(key);
+                    this.focusKey = key;
+                    this.update();
+                }
+                return;
+            }
+            if (keyboardEvent.key === "ArrowLeft" && isBranch) {
+                keyboardEvent.preventDefault();
+                if (this.expandedInternal.has(key)) {
+                    this.expandedInternal.delete(key);
+                    this.focusKey = key;
+                    this.update();
+                }
+                return;
+            }
+            if (keyboardEvent.key === "Enter" || keyboardEvent.key === " ") {
+                keyboardEvent.preventDefault();
+                element.click();
+                return;
+            }
+            if (keyboardEvent.key === "Home" || keyboardEvent.key === "End") {
+                keyboardEvent.preventDefault();
+                const nextNode = keyboardEvent.key === "Home" ? visibleNodes[0] : visibleNodes[visibleNodes.length - 1];
+                if (nextNode) {
+                    this.focusKey = nextNode.key;
+                    this.update();
+                }
+            }
+        });
+    }
+    update() {
+        if (!this.controlsEl || !this.treeEl || !this.expandAllEl || !this.collapseAllEl) {
+            return;
+        }
+        const branchKeys = collectBranchKeys(this.items);
+        const hasBranches = branchKeys.length > 0;
+        const allExpanded = hasBranches && branchKeys.every(key => this.expandedInternal.has(key));
+        this.controlsEl.hidden = !hasBranches;
+        this.expandAllEl.disabled = allExpanded;
+        this.collapseAllEl.disabled = !this.expandedInternal.size;
+        this.treeEl.setAttribute("aria-label", this.label);
+        this.treeEl.innerHTML = this.renderItems(this.items);
+        if (this.focusKey) {
+            const keyToFocus = this.focusKey;
+            this.focusKey = null;
+            queueMicrotask(() => {
+                const target = Array.from(this.treeEl.querySelectorAll('[part~="item"]')).find(node => node.dataset.key === keyToFocus);
+                target?.focus();
+            });
+        }
+    }
+}
+export const defineBoxTreeElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxTreeElement);
+    return BoxTreeElement;
+};

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

@@ -0,0 +1,27 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxAlertElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private openValue;
+    private alertEl;
+    private toneLabelEl;
+    private titleEl;
+    private messageEl;
+    private dismissEl;
+    get open(): boolean;
+    set open(value: boolean);
+    get heading(): string;
+    set heading(value: string);
+    get message(): string;
+    set message(value: string);
+    get description(): string;
+    set description(value: string);
+    get tone(): string;
+    set tone(value: string);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    dismiss(): void;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxAlertElement: (tagName?: string) => typeof BoxAlertElement;