@unofficialbox/box-open-elements 0.1.0

package/dist/components/navigation/accordion.js

@@ -0,0 +1,253 @@
+import { BaseElement } from "../../core/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+const DEFAULT_TAG_NAME = "box-accordion";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const accordionStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="accordion"] {
+    display: grid;
+    gap: 0;
+    padding: 0;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 84%, var(--boe-token-surface-surface, #ffffff) 16%);
+    border-radius: ${boeRadius.large};
+    background: var(--boe-token-surface-surface, #ffffff);
+    overflow: hidden;
+  }
+
+  [part="item"] {
+    border: none;
+    border-bottom: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 84%, var(--boe-token-surface-surface, #ffffff) 16%);
+    border-radius: 0;
+    background: transparent;
+  }
+
+  [part="item"]:last-child {
+    border-bottom: none;
+  }
+
+  [part="heading"] {
+    margin: 0;
+    font: inherit;
+  }
+
+  [part="trigger"] {
+    inline-size: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.5rem 0.65rem;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    color: var(--boe-token-text-text, #222222);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  [part="heading"] {
+    font-weight: 600;
+  }
+
+  [part="indicator"] {
+    inline-size: 1.35rem;
+    block-size: 1.35rem;
+    display: inline-grid;
+    place-items: center;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 80%, var(--boe-token-surface-surface, #ffffff) 20%);
+    border-radius: ${boeRadius.med};
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    font-weight: 700;
+    box-shadow: none;
+  }
+
+  [part="panel"] {
+    padding: 0 0.65rem 0.65rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    line-height: 1.45;
+  }
+
+  [part="panel"][hidden] {
+    display: none;
+  }
+
+  ${boeNeutralInteractiveStyles('[part="trigger"]')}
+`;
+export class BoxAccordionElement extends BaseElement {
+    static get observedAttributes() {
+        return ["items", "label", "value"];
+    }
+    valueInternal = "";
+    lastItemsJson = "";
+    accordionEl;
+    get label() {
+        return this.getAttribute("label") ?? "Accordion";
+    }
+    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));
+    }
+    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);
+    }
+    renderItemsMarkup(items, selectedValue) {
+        return items
+            .map(item => {
+            const isOpen = item.value === selectedValue;
+            const panelId = `panel-${escapeHtml(item.value)}`;
+            const triggerId = `trigger-${escapeHtml(item.value)}`;
+            return `
+          <section part="item" data-open="${String(isOpen)}" data-value="${escapeHtml(item.value)}">
+            <h3 part="heading">
+              <button
+                type="button"
+                part="trigger"
+                id="${triggerId}"
+                data-value="${escapeHtml(item.value)}"
+                aria-expanded="${String(isOpen)}"
+                aria-controls="${panelId}"
+              >
+                ${escapeHtml(item.label)}
+                <span part="indicator" aria-hidden="true">${isOpen ? "−" : "+"}</span>
+              </button>
+            </h3>
+            <div
+              part="panel"
+              id="${panelId}"
+              role="region"
+              aria-labelledby="${triggerId}"
+              ${isOpen ? "" : "hidden"}
+            >${escapeHtml(item.content ?? "")}</div>
+          </section>
+        `;
+        })
+            .join("");
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${accordionStyles}</style>
+      <div part="accordion"></div>
+    `;
+        this.accordionEl = this.shadowRoot.querySelector('[part="accordion"]');
+    }
+    setupListeners() {
+        this.accordionEl.addEventListener("click", event => {
+            const trigger = event.target?.closest('[part="trigger"]');
+            if (!trigger || !this.accordionEl.contains(trigger)) {
+                return;
+            }
+            const nextValue = trigger.dataset.value ?? "";
+            if (!nextValue) {
+                return;
+            }
+            if (nextValue === this.valueInternal) {
+                this.valueInternal = "";
+                this.setAttribute("value", "");
+                this.dispatchEvent(new CustomEvent("value-changed", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { value: "" },
+                }));
+                this.update();
+                return;
+            }
+            this.valueInternal = nextValue;
+            this.setAttribute("value", nextValue);
+            this.dispatchEvent(new CustomEvent("value-changed", {
+                bubbles: true,
+                composed: true,
+                detail: { value: nextValue },
+            }));
+            this.update();
+        });
+    }
+    update() {
+        if (!this.accordionEl) {
+            return;
+        }
+        const items = this.items;
+        const itemsJson = this.getAttribute("items") ?? "";
+        if (!this.hasAttribute("value") && items.length > 0 && this.valueInternal === "") {
+            this.valueInternal = items[0].value;
+            this.setAttribute("value", this.valueInternal);
+        }
+        const selectedValue = this.valueInternal;
+        this.accordionEl.setAttribute("role", "region");
+        this.accordionEl.setAttribute("aria-label", this.label);
+        if (itemsJson !== this.lastItemsJson) {
+            this.accordionEl.innerHTML = this.renderItemsMarkup(items, selectedValue);
+            this.lastItemsJson = itemsJson;
+            return;
+        }
+        this.accordionEl.querySelectorAll('[part="item"]').forEach(node => {
+            const section = node;
+            const value = section.dataset.value ?? "";
+            const isOpen = value === selectedValue;
+            section.dataset.open = String(isOpen);
+            const trigger = section.querySelector('[part="trigger"]');
+            const indicator = section.querySelector('[part="indicator"]');
+            const panel = section.querySelector('[part="panel"]');
+            if (trigger) {
+                trigger.setAttribute("aria-expanded", String(isOpen));
+            }
+            if (indicator) {
+                indicator.textContent = isOpen ? "−" : "+";
+            }
+            if (panel) {
+                panel.hidden = !isOpen;
+            }
+        });
+    }
+}
+export const defineBoxAccordionElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxAccordionElement);
+    return BoxAccordionElement;
+};

package/dist/components/navigation/tabs.d.ts

@@ -0,0 +1,27 @@
+import { BaseElement } from "../../core/index.js";
+type BoxTabOption = {
+    label: string;
+    value: string;
+};
+export declare class BoxTabsElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private lastOptionsJson;
+    private tabsEl;
+    get label(): string;
+    set label(value: string);
+    get layout(): "attached" | "separated";
+    set layout(value: "attached" | "separated");
+    get options(): BoxTabOption[];
+    set options(value: BoxTabOption[]);
+    get value(): string;
+    set value(nextValue: string);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private selectValue;
+    private renderTabsMarkup;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxTabsElement: (tagName?: string) => typeof BoxTabsElement;
+export {};

package/dist/components/navigation/tabs.js

@@ -0,0 +1,289 @@
+import { BaseElement } from "../../core/index.js";
+import { boeControl, boeSpace } from "../../foundations/geometry/index.js";
+import { boeFocusVisibleStyles, } from "../../foundations/tokens/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-tabs";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const tabsStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="tabs"] {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 0;
+    border-bottom: 1px solid var(--boe-token-surface-surface-secondary, #e8e8e8);
+  }
+
+  [part="tab"] {
+    position: relative;
+    appearance: none;
+    flex: 1 1 0;
+    min-width: 0;
+    margin: 0;
+    padding: 0 ${boeSpace[2]};
+    border: 0;
+    border-bottom: 1px solid transparent;
+    border-radius: 0;
+    background: transparent;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font: inherit;
+    font-size: ${boeControl.fontSize};
+    font-weight: 400;
+    line-height: ${boeControl.heightLarge};
+    letter-spacing: ${boeControl.letterSpacing};
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+    box-shadow: none;
+    transition:
+      color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="tab"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    bottom: -1px;
+    height: 2px;
+    background: var(--boe-token-surface-surface-brand, #0061d5);
+    opacity: 0;
+    transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  [part="tab"]:hover,
+  [part="tab"]:focus-visible {
+    color: var(--boe-token-text-text, #222222);
+    background: transparent;
+  }
+
+  [part="tab"][data-selected="true"] {
+    color: var(--boe-token-text-text, #222222);
+    background: transparent;
+    box-shadow: none;
+  }
+
+  [part="tab"][data-selected="true"]::after {
+    opacity: 1;
+  }
+
+  [part="tabs"][data-layout="separated"] [part="tab"] {
+    flex: 0 1 auto;
+    padding: 0 ${boeSpace[3]};
+  }
+
+  ${boeFocusVisibleStyles('[part="tab"]')}
+
+  [part="tab"]:focus-visible {
+    outline-offset: -2px;
+    box-shadow: none;
+  }
+`;
+export class BoxTabsElement extends BaseElement {
+    static get observedAttributes() {
+        return ["label", "layout", "options", "value"];
+    }
+    valueInternal = "";
+    lastOptionsJson = "";
+    tabsEl;
+    get label() {
+        return this.getAttribute("label") ?? "Tabs";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get layout() {
+        return this.getAttribute("layout") === "attached" ? "attached" : "separated";
+    }
+    set layout(value) {
+        this.setAttribute("layout", value);
+    }
+    get options() {
+        const raw = this.getAttribute("options");
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set options(value) {
+        this.setAttribute("options", JSON.stringify(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(nextValue, focusIndex) {
+        if (!nextValue || nextValue === this.valueInternal) {
+            return;
+        }
+        this.valueInternal = nextValue;
+        this.setAttribute("value", nextValue);
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: nextValue },
+        }));
+        this.update();
+        if (typeof focusIndex === "number") {
+            queueMicrotask(() => {
+                const nextTab = this.tabsEl.querySelectorAll('[part="tab"]')[focusIndex];
+                nextTab?.focus();
+            });
+        }
+    }
+    renderTabsMarkup(options, selectedValue) {
+        return options
+            .map((option, index) => {
+            const position = options.length === 1
+                ? "only"
+                : index === 0
+                    ? "first"
+                    : index === options.length - 1
+                        ? "last"
+                        : "middle";
+            return `
+          <button
+            type="button"
+            part="tab"
+            role="tab"
+            data-layout="${this.layout}"
+            data-position="${position}"
+            data-selected="${String(option.value === selectedValue)}"
+            data-value="${escapeHtml(option.value)}"
+            aria-selected="${String(option.value === selectedValue)}"
+            tabindex="${option.value === selectedValue ? "0" : "-1"}"
+          >
+            ${escapeHtml(option.label)}
+          </button>
+        `;
+        })
+            .join("");
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${tabsStyles}</style>
+      <div part="tabs" role="tablist"></div>
+    `;
+        this.tabsEl = this.shadowRoot.querySelector('[part="tabs"]');
+    }
+    setupListeners() {
+        this.tabsEl.addEventListener("click", event => {
+            const tab = event.target?.closest('[part="tab"]');
+            if (!tab || !this.tabsEl.contains(tab)) {
+                return;
+            }
+            this.selectValue(tab.dataset.value ?? "");
+        });
+        this.tabsEl.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            const tab = keyboardEvent.target?.closest('[part="tab"]');
+            if (!tab || !this.tabsEl.contains(tab)) {
+                return;
+            }
+            const options = this.options;
+            const tabs = Array.from(this.tabsEl.querySelectorAll('[part="tab"]'));
+            const index = tabs.indexOf(tab);
+            const lastIndex = options.length - 1;
+            let nextIndex = index;
+            if (keyboardEvent.key === "ArrowRight" || keyboardEvent.key === "ArrowDown") {
+                nextIndex = index >= lastIndex ? 0 : index + 1;
+            }
+            else if (keyboardEvent.key === "ArrowLeft" || keyboardEvent.key === "ArrowUp") {
+                nextIndex = index <= 0 ? lastIndex : index - 1;
+            }
+            else if (keyboardEvent.key === "Home") {
+                nextIndex = 0;
+            }
+            else if (keyboardEvent.key === "End") {
+                nextIndex = lastIndex;
+            }
+            else {
+                return;
+            }
+            keyboardEvent.preventDefault();
+            const nextOption = options[nextIndex];
+            if (!nextOption) {
+                return;
+            }
+            this.selectValue(nextOption.value, nextIndex);
+        });
+    }
+    update() {
+        if (!this.tabsEl) {
+            return;
+        }
+        const options = this.options;
+        const optionsJson = this.getAttribute("options") ?? "";
+        const selectedValue = this.valueInternal || options[0]?.value || "";
+        if (selectedValue !== this.valueInternal) {
+            this.valueInternal = selectedValue;
+            this.setAttribute("value", selectedValue);
+        }
+        this.tabsEl.dataset.layout = this.layout;
+        this.tabsEl.setAttribute("aria-label", this.label);
+        if (optionsJson !== this.lastOptionsJson) {
+            this.tabsEl.innerHTML = this.renderTabsMarkup(options, selectedValue);
+            this.lastOptionsJson = optionsJson;
+            return;
+        }
+        this.tabsEl.querySelectorAll('[part="tab"]').forEach((node, index) => {
+            const tab = node;
+            const option = options[index];
+            if (!option) {
+                return;
+            }
+            const position = options.length === 1
+                ? "only"
+                : index === 0
+                    ? "first"
+                    : index === options.length - 1
+                        ? "last"
+                        : "middle";
+            const selected = option.value === selectedValue;
+            tab.dataset.layout = this.layout;
+            tab.dataset.position = position;
+            tab.dataset.selected = String(selected);
+            tab.setAttribute("aria-selected", String(selected));
+            tab.tabIndex = selected ? 0 : -1;
+        });
+    }
+}
+export const defineBoxTabsElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxTabsElement);
+    return BoxTabsElement;
+};

package/dist/components/overlays/dialog.d.ts

@@ -0,0 +1,26 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxDialogElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private openValue;
+    private wasOpen;
+    private hostEl;
+    private titleEl;
+    private descriptionEl;
+    private confirmEl;
+    private readonly focusRestore;
+    get open(): boolean;
+    set open(value: boolean);
+    get heading(): string;
+    set heading(value: string);
+    get description(): string;
+    set description(value: string);
+    get confirmLabel(): string;
+    set confirmLabel(value: string);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    show(): void;
+    close(): void;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxDialogElement: (tagName?: string) => typeof BoxDialogElement;