@unofficialbox/box-open-elements 0.1.0

package/dist/components/feedback/progress-steps.js

@@ -0,0 +1,276 @@
+import { BaseElement } from "../../core/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-progress-steps";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const progressStepsStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="steps"] {
+    display: grid;
+    gap: 0.55rem;
+  }
+
+  [part="step"] {
+    appearance: none;
+    display: flex;
+    align-items: start;
+    gap: 0.55rem;
+    width: 100%;
+    text-align: left;
+    padding: 0.55rem 0.65rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 56%, transparent);
+    border-radius: ${boeRadius.med};
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="step"]:hover {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+  }
+
+  [part="step"]:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 34%, transparent);
+    outline-offset: 2px;
+  }
+
+  [part="step"][data-state="current"] {
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 34%, transparent);
+    background: var(--boe-token-surface-item-surface-selected, #f2f7fd);
+  }
+
+  [part="marker"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: 1.6rem;
+    height: 1.6rem;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+    background: color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 94%, var(--boe-token-surface-surface, #ffffff) 6%);
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font-size: 0.78rem;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, color ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="step"][data-state="complete"] [part="marker"] {
+    border-color: transparent;
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 16%, var(--boe-token-surface-surface, #ffffff) 84%);
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 62%, var(--boe-token-text-text, #222222));
+  }
+
+  [part="step"][data-state="current"] [part="marker"] {
+    border-color: transparent;
+    background: var(--boe-token-surface-surface-brand, #0061d5);
+    color: var(--boe-token-text-text-on-brand, #ffffff);
+  }
+
+  [part="content"] {
+    display: grid;
+    gap: 0.2rem;
+    padding-top: 0.1rem;
+  }
+
+  [part="step-label"] {
+    font-weight: 700;
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="step"][data-state="upcoming"] [part="step-label"] {
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="step-description"] {
+    font-size: 0.86rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    line-height: 1.45;
+  }
+`;
+export class BoxProgressStepsElement extends BaseElement {
+    static get observedAttributes() {
+        return ["items", "label", "value"];
+    }
+    valueInternal = "";
+    stepsEl;
+    itemsSignature = "";
+    get label() {
+        return this.getAttribute("label") ?? "Progress Steps";
+    }
+    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);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${progressStepsStyles}</style>
+      <div part="steps" role="group"></div>
+    `;
+        this.stepsEl = this.shadowRoot.querySelector('[part="steps"]');
+    }
+    setupListeners() {
+        this.stepsEl.addEventListener("click", event => {
+            const step = event.target.closest('[part="step"]');
+            if (!step || !this.stepsEl.contains(step)) {
+                return;
+            }
+            const nextValue = step.dataset.value ?? "";
+            if (!nextValue || nextValue === this.valueInternal) {
+                return;
+            }
+            this.selectValue(nextValue);
+        });
+        this.stepsEl.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            const step = keyboardEvent.target.closest('[part="step"]');
+            if (!step || !this.stepsEl.contains(step)) {
+                return;
+            }
+            const items = this.items;
+            const index = Array.from(this.stepsEl.querySelectorAll('[part="step"]')).indexOf(step);
+            if (index < 0) {
+                return;
+            }
+            const lastIndex = items.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 nextStep = items[nextIndex];
+            if (!nextStep) {
+                return;
+            }
+            this.selectValue(nextStep.value);
+            queueMicrotask(() => {
+                const nextButton = this.stepsEl.querySelectorAll('[part="step"]')[nextIndex];
+                nextButton?.focus();
+            });
+        });
+    }
+    selectValue(nextValue) {
+        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.stepsEl) {
+            return;
+        }
+        const items = this.items;
+        const activeIndex = Math.max(0, items.findIndex(item => item.value === this.valueInternal));
+        const selectedValue = items[activeIndex]?.value ?? "";
+        if (selectedValue && selectedValue !== this.valueInternal) {
+            this.valueInternal = selectedValue;
+            this.setAttribute("value", selectedValue);
+        }
+        this.stepsEl.setAttribute("aria-label", this.label);
+        const signature = JSON.stringify(items);
+        if (signature !== this.itemsSignature) {
+            this.itemsSignature = signature;
+            this.stepsEl.innerHTML = items
+                .map((item, index) => {
+                const state = index < activeIndex ? "complete" : index === activeIndex ? "current" : "upcoming";
+                return `
+            <button
+              type="button"
+              part="step"
+              data-state="${state}"
+              data-value="${escapeHtml(item.value)}"
+              aria-current="${state === "current" ? "step" : "false"}"
+              tabindex="${index === activeIndex ? "0" : "-1"}"
+            >
+              <span part="marker">${index + 1}</span>
+              <span part="content">
+                <strong part="step-label">${escapeHtml(item.label)}</strong>
+                ${item.description ? `<span part="step-description">${escapeHtml(item.description)}</span>` : ""}
+              </span>
+            </button>
+          `;
+            })
+                .join("");
+            return;
+        }
+        this.stepsEl.querySelectorAll('[part="step"]').forEach((step, index) => {
+            const state = index < activeIndex ? "complete" : index === activeIndex ? "current" : "upcoming";
+            const button = step;
+            button.dataset.state = state;
+            button.setAttribute("aria-current", state === "current" ? "step" : "false");
+            button.setAttribute("aria-selected", String(index === activeIndex));
+            button.tabIndex = index === activeIndex ? 0 : -1;
+        });
+    }
+}
+export const defineBoxProgressStepsElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxProgressStepsElement);
+    return BoxProgressStepsElement;
+};

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

@@ -0,0 +1,14 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxSkeletonElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private skeletonEl;
+    private appliedWidth;
+    private appliedHeight;
+    get width(): string;
+    set width(value: string);
+    get height(): string;
+    set height(value: string);
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxSkeletonElement: (tagName?: string) => typeof BoxSkeletonElement;

package/dist/components/feedback/skeleton.js

@@ -0,0 +1,95 @@
+import { BaseElement } from "../../core/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing, boeReducedMotionStyles, } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-skeleton";
+const skeletonStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="skeleton"] {
+    border-radius: ${boeRadius.med};
+    background:
+      linear-gradient(
+        90deg,
+        color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 55%, var(--boe-token-stroke-stroke, #e8e8e8) 45%) 0%,
+        color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 88%, var(--boe-token-surface-surface, #ffffff) 12%) 50%,
+        color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 55%, var(--boe-token-stroke-stroke, #e8e8e8) 45%) 100%
+      );
+    background-size: 200% 100%;
+    animation: boe-skeleton-shimmer ${boeMotionDuration.shimmer} ${boeMotionEasing.standard} infinite;
+  }
+
+  @keyframes boe-skeleton-shimmer {
+    0% {
+      background-position: 100% 0;
+    }
+
+    100% {
+      background-position: -100% 0;
+    }
+  }
+
+  ${boeReducedMotionStyles('[part="skeleton"]', "animation: none;")}
+`;
+export class BoxSkeletonElement extends BaseElement {
+    static get observedAttributes() {
+        return ["height", "width"];
+    }
+    skeletonEl;
+    appliedWidth = "";
+    appliedHeight = "";
+    get width() {
+        return this.getAttribute("width") ?? "100%";
+    }
+    set width(value) {
+        this.setAttribute("width", value);
+    }
+    get height() {
+        return this.getAttribute("height") ?? "16px";
+    }
+    set height(value) {
+        this.setAttribute("height", value);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${skeletonStyles}</style>
+      <span part="skeleton" style="display:inline-block;" aria-hidden="true"></span>
+    `;
+        this.skeletonEl = this.shadowRoot.querySelector('[part="skeleton"]');
+        this.appliedWidth = "";
+        this.appliedHeight = "";
+    }
+    update() {
+        if (!this.skeletonEl) {
+            return;
+        }
+        // Apply size via the CSSOM, not string interpolation: setProperty validates
+        // the value and silently drops anything invalid, so attribute-supplied
+        // width/height can't break out of the style attribute and inject markup.
+        // Skip per-dimension when unchanged to avoid redundant CSSOM writes.
+        const nextWidth = this.width;
+        const nextHeight = this.height;
+        if (nextWidth !== this.appliedWidth) {
+            this.skeletonEl.style.setProperty("width", nextWidth);
+            this.appliedWidth = nextWidth;
+        }
+        if (nextHeight !== this.appliedHeight) {
+            this.skeletonEl.style.setProperty("height", nextHeight);
+            this.appliedHeight = nextHeight;
+        }
+    }
+}
+export const defineBoxSkeletonElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxSkeletonElement);
+    return BoxSkeletonElement;
+};

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

@@ -0,0 +1,10 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxSpinnerElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private labelEl;
+    get label(): string;
+    set label(value: string);
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxSpinnerElement: (tagName?: string) => typeof BoxSpinnerElement;

package/dist/components/feedback/spinner.js

@@ -0,0 +1,80 @@
+import { BaseElement } from "../../core/index.js";
+import { boeMotionDuration, boeMotionEasing, boeReducedMotionStyles, } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-spinner";
+const spinnerStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="spinner"] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  [part="indicator"] {
+    display: inline-block;
+    flex: none;
+    width: 1.1rem;
+    height: 1.1rem;
+    border-radius: 999px;
+    border: 2.5px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, var(--boe-token-surface-surface, #ffffff) 82%);
+    border-top-color: var(--boe-token-surface-surface-brand, #0061d5);
+    animation: boe-spinner-rotate ${boeMotionDuration.spin} ${boeMotionEasing.linear} infinite;
+  }
+
+  @keyframes boe-spinner-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  ${boeReducedMotionStyles('[part="indicator"]', "animation-duration: 1.6s;")}
+
+  [part="label"] {
+    font-size: 0.86rem;
+    font-weight: 600;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+`;
+export class BoxSpinnerElement extends BaseElement {
+    static get observedAttributes() {
+        return ["label"];
+    }
+    labelEl;
+    get label() {
+        return this.getAttribute("label") ?? "Loading";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${spinnerStyles}</style>
+      <div part="spinner" role="status" aria-live="polite">
+        <span part="indicator" aria-hidden="true"></span>
+        <span part="label"></span>
+      </div>
+    `;
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+    }
+    update() {
+        if (!this.labelEl) {
+            return;
+        }
+        this.labelEl.textContent = this.label;
+    }
+}
+export const defineBoxSpinnerElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxSpinnerElement);
+    return BoxSpinnerElement;
+};

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

@@ -0,0 +1,26 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxToastElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private openValue;
+    private timeoutId;
+    private toastEl;
+    private messageEl;
+    private dismissEl;
+    get open(): boolean;
+    set open(value: boolean);
+    get message(): string;
+    set message(value: string);
+    get tone(): string;
+    set tone(value: string);
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    show(message?: string, options?: {
+        duration?: number;
+        tone?: string;
+    }): void;
+    hide(): void;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxToastElement: (tagName?: string) => typeof BoxToastElement;