@unofficialbox/box-open-elements 0.1.0

package/dist/components/feedback/empty-state.js

@@ -0,0 +1,137 @@
+import { BaseElement } from "../../core/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+import { boeBrandInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-empty-state";
+const emptyStateStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="empty-state"] {
+    display: grid;
+    justify-items: center;
+    gap: 0.55rem;
+    padding: 0.75rem;
+    border: 1px dashed color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+    border-radius: ${boeRadius.large};
+    background: color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 94%, var(--boe-token-surface-surface, #ffffff) 6%);
+    text-align: center;
+  }
+
+  [part="title"] {
+          margin: 0;
+          font: inherit;
+    font-size: 1.05rem;
+    font-weight: 700;
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part~="message"] {
+    max-width: 32rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    line-height: 1.5;
+  }
+
+  [part="action"] {
+    appearance: none;
+    margin-top: 0.4rem;
+    border: 1px solid transparent;
+    border-radius: 999px;
+    background: var(--boe-token-surface-surface-brand, #0061d5);
+    color: var(--boe-token-text-text-on-brand, #ffffff);
+    font: inherit;
+    font-weight: 600;
+    padding: 0.45rem 0.75rem;
+    cursor: pointer;
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, transform ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  ${boeBrandInteractiveStyles('[part="action"]')}
+
+  [part="action"][hidden] {
+    display: none;
+  }
+`;
+export class BoxEmptyStateElement extends BaseElement {
+    static get observedAttributes() {
+        return ["action-label", "description", "heading", "message"];
+    }
+    titleEl;
+    messageEl;
+    actionEl;
+    get heading() {
+        return this.getAttribute("heading") ?? "Nothing here yet";
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    get message() {
+        return this.getAttribute("message") ?? this.description;
+    }
+    set message(value) {
+        this.setAttribute("message", value);
+    }
+    get description() {
+        return this.getAttribute("description") ?? this.getAttribute("message") ?? "";
+    }
+    set description(value) {
+        this.setAttribute("description", value);
+    }
+    get actionLabel() {
+        return this.getAttribute("action-label") ?? "";
+    }
+    set actionLabel(value) {
+        this.setAttribute("action-label", value);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${emptyStateStyles}</style>
+      <section part="empty-state" role="status" aria-live="polite">
+        <h2 part="title"></h2>
+        <span part="message description"></span>
+        <button type="button" part="action" hidden></button>
+      </section>
+    `;
+        this.titleEl = this.shadowRoot.querySelector('[part="title"]');
+        this.messageEl = this.shadowRoot.querySelector('[part~="message"]');
+        this.actionEl = this.shadowRoot.querySelector('[part="action"]');
+    }
+    setupListeners() {
+        this.actionEl.addEventListener("click", () => {
+            this.dispatchEvent(new CustomEvent("action", {
+                bubbles: true,
+                composed: true,
+                detail: { action: "primary", label: this.actionLabel },
+            }));
+        });
+    }
+    update() {
+        if (!this.titleEl) {
+            return;
+        }
+        this.titleEl.textContent = this.heading;
+        this.messageEl.textContent = this.message;
+        if (this.actionLabel) {
+            this.actionEl.hidden = false;
+            this.actionEl.textContent = this.actionLabel;
+        }
+        else {
+            this.actionEl.hidden = true;
+            this.actionEl.textContent = "";
+        }
+    }
+}
+export const defineBoxEmptyStateElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxEmptyStateElement);
+    return BoxEmptyStateElement;
+};

package/dist/components/feedback/error-mask.d.ts

@@ -0,0 +1,25 @@
+import { BaseElement } from "../../core/index.js";
+/**
+ * A full-section error state that masks a region that failed to load — distinct
+ * from `box-empty-state` (a "nothing here yet" affordance). It announces
+ * assertively via `role="alert"` and offers an optional retry action that emits
+ * a `retry` event; the host owns the actual reload.
+ */
+export declare class BoxErrorMaskElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private titleEl;
+    private messageEl;
+    private actionEl;
+    get heading(): string;
+    set heading(value: string);
+    get message(): string;
+    set message(value: string);
+    get description(): string;
+    set description(value: string);
+    get actionLabel(): string;
+    set actionLabel(value: string);
+    protected renderTemplate(): void;
+    private syncActionButton;
+    protected update(): void;
+}
+export declare const defineBoxErrorMaskElement: (tagName?: string) => typeof BoxErrorMaskElement;

package/dist/components/feedback/error-mask.js

@@ -0,0 +1,199 @@
+import { BaseElement } from "../../core/index.js";
+import { boeControl, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-error-mask";
+const errorMaskStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="error-mask"] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: ${boeSpace[3]};
+    padding: ${boeSpace[10]};
+    overflow: hidden;
+    border: 1px dashed var(--boe-token-text-text-secondary, #6f6f6f);
+    border-radius: ${boeRadius.large};
+    background: transparent;
+    text-align: center;
+  }
+
+  [part="icon"] {
+    display: grid;
+    place-items: center;
+    inline-size: 2.75rem;
+    block-size: 2.75rem;
+    margin-block-end: ${boeSpace[2]};
+    border-radius: 0;
+    background: transparent;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="icon"] svg {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+  }
+
+  [part="title"] {
+    margin: 0;
+    font: inherit;
+    font-size: 16px;
+    font-weight: 700;
+    color: color-mix(in srgb, var(--boe-token-text-text, #222222) 65%, #fff);
+  }
+
+  [part~="message"] {
+    max-width: 32rem;
+    margin: 0;
+    color: color-mix(in srgb, var(--boe-token-text-text, #222222) 65%, #fff);
+    line-height: 1.5;
+  }
+
+  [part~="message"][hidden] {
+    display: none;
+  }
+
+  [part="action"] {
+    appearance: none;
+    box-sizing: border-box;
+    margin-top: ${boeSpace[2]};
+    border: 1px solid var(--boe-token-surface-surface-brand, #0061d5);
+    border-radius: ${boeRadius.med};
+    background: var(--boe-token-surface-surface-brand, #0061d5);
+    color: var(--boe-token-text-text-on-brand, #ffffff);
+    font: inherit;
+    font-size: ${boeControl.fontSize};
+    font-weight: 700;
+    letter-spacing: ${boeControl.letterSpacing};
+    min-height: ${boeControl.height};
+    padding: 0 ${boeControl.paddingInline};
+    cursor: pointer;
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="action"]:hover {
+    background: var(--boe-token-surface-surface-brand-hover, #006ae9);
+  }
+
+  [part="action"]:focus-visible {
+    outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5);
+    outline-offset: 2px;
+  }
+
+  [part="action"][hidden] {
+    display: none;
+  }
+`;
+/**
+ * A full-section error state that masks a region that failed to load — distinct
+ * from `box-empty-state` (a "nothing here yet" affordance). It announces
+ * assertively via `role="alert"` and offers an optional retry action that emits
+ * a `retry` event; the host owns the actual reload.
+ */
+export class BoxErrorMaskElement extends BaseElement {
+    static get observedAttributes() {
+        return ["action-label", "description", "heading", "message"];
+    }
+    titleEl;
+    messageEl;
+    actionEl = null;
+    get heading() {
+        return this.getAttribute("heading") ?? "Something went wrong";
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    get message() {
+        return this.getAttribute("message") ?? this.description;
+    }
+    set message(value) {
+        this.setAttribute("message", value);
+    }
+    get description() {
+        return this.getAttribute("description") ?? this.getAttribute("message") ?? "";
+    }
+    set description(value) {
+        this.setAttribute("description", value);
+    }
+    get actionLabel() {
+        return this.getAttribute("action-label") ?? "";
+    }
+    set actionLabel(value) {
+        this.setAttribute("action-label", value);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${errorMaskStyles}</style>
+      <section part="error-mask" role="alert" aria-live="assertive">
+        <span part="icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z"/>
+            <path d="M12 9v4"/>
+            <path d="M12 17h.01"/>
+          </svg>
+        </span>
+        <h2 part="title"></h2>
+        <span part="message description" hidden></span>
+      </section>
+    `;
+        this.titleEl = this.shadowRoot.querySelector('[part="title"]');
+        this.messageEl = this.shadowRoot.querySelector('[part~="message"]');
+    }
+    syncActionButton() {
+        const section = this.shadowRoot?.querySelector('[part="error-mask"]');
+        if (!section) {
+            return;
+        }
+        if (this.actionLabel) {
+            if (!this.actionEl) {
+                const button = document.createElement("button");
+                button.type = "button";
+                button.setAttribute("part", "action");
+                button.addEventListener("click", () => {
+                    this.dispatchEvent(new CustomEvent("retry", {
+                        bubbles: true,
+                        composed: true,
+                        detail: { label: this.actionLabel },
+                    }));
+                });
+                section.append(button);
+                this.actionEl = button;
+            }
+            this.actionEl.textContent = this.actionLabel;
+        }
+        else if (this.actionEl) {
+            this.actionEl.remove();
+            this.actionEl = null;
+        }
+    }
+    update() {
+        if (!this.titleEl) {
+            return;
+        }
+        this.titleEl.textContent = this.heading;
+        if (this.message) {
+            this.messageEl.hidden = false;
+            this.messageEl.textContent = this.message;
+        }
+        else {
+            this.messageEl.hidden = true;
+            this.messageEl.textContent = "";
+        }
+        this.syncActionButton();
+    }
+}
+export const defineBoxErrorMaskElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxErrorMaskElement);
+    return BoxErrorMaskElement;
+};

package/dist/components/feedback/help-text.d.ts

@@ -0,0 +1,22 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxHelpTextElement extends BaseElement {
+    private readonly handleDesignSystemChange;
+    static get observedAttributes(): string[];
+    private helpTextEl;
+    private iconEl;
+    private labelEl;
+    private messageEl;
+    get label(): string;
+    set label(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;
+    disconnectedCallback(): void;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxHelpTextElement: (tagName?: string) => typeof BoxHelpTextElement;

package/dist/components/feedback/help-text.js

@@ -0,0 +1,176 @@
+import { BaseElement } from "../../core/index.js";
+import { DESIGN_SYSTEM_CHANGE_EVENT, resolveDesignIcon, } from "../../foundations/tokens/registry.js";
+const DEFAULT_TAG_NAME = "box-help-text";
+const helpTextStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="help-text"] {
+    display: flex;
+    align-items: start;
+    gap: 0.45rem;
+    font-size: 0.86rem;
+    line-height: 1.45;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="icon"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: 1.15rem;
+    height: 1.15rem;
+    margin-top: 0.08rem;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    font-size: 0.7rem;
+    font-weight: 700;
+    font-style: normal;
+  }
+
+  [part="icon"] svg {
+    width: 0.78rem;
+    height: 0.78rem;
+    fill: currentColor;
+  }
+
+  [part="help-text"][data-tone="success"] [part="icon"] {
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 14%, var(--boe-token-surface-surface, #ffffff) 86%);
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 68%, var(--boe-token-text-text, #222222));
+  }
+
+  [part="help-text"][data-tone="error"] [part="icon"] {
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 74%, var(--boe-token-text-text, #222222));
+  }
+
+  [part="help-text"][data-tone="warning"] [part="icon"] {
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 18%, var(--boe-token-surface-surface, #ffffff) 82%);
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 52%, var(--boe-token-text-text, #222222));
+  }
+
+  [part="help-text"][data-tone="error"] {
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 68%, var(--boe-token-text-text, #222222));
+  }
+
+  [part="help-text"][data-tone="success"] {
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 56%, var(--boe-token-text-text, #222222));
+  }
+
+  [part="help-text"][data-tone="warning"] {
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 44%, var(--boe-token-text-text, #222222));
+  }
+
+  [part="content"] {
+    display: grid;
+    gap: 0.15rem;
+  }
+
+  [part="label"] {
+    font-weight: 700;
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="label"][hidden] {
+    display: none;
+  }
+`;
+export class BoxHelpTextElement extends BaseElement {
+    handleDesignSystemChange = () => {
+        this.update();
+    };
+    static get observedAttributes() {
+        return ["description", "label", "message", "tone"];
+    }
+    helpTextEl;
+    iconEl;
+    labelEl;
+    messageEl;
+    get label() {
+        return this.getAttribute("label") ?? "";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get message() {
+        return this.getAttribute("message") ?? this.description;
+    }
+    set message(value) {
+        this.setAttribute("message", value);
+    }
+    get description() {
+        return this.getAttribute("description") ?? this.getAttribute("message") ?? "";
+    }
+    set description(value) {
+        this.setAttribute("description", value);
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "info";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    connectedCallback() {
+        globalThis.addEventListener?.(DESIGN_SYSTEM_CHANGE_EVENT, this.handleDesignSystemChange);
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        globalThis.removeEventListener?.(DESIGN_SYSTEM_CHANGE_EVENT, this.handleDesignSystemChange);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${helpTextStyles}</style>
+      <div part="help-text" role="note">
+        <span part="icon" aria-hidden="true"></span>
+        <div part="content">
+          <strong part="label" hidden></strong>
+          <span part="description message"></span>
+        </div>
+      </div>
+    `;
+        this.helpTextEl = this.shadowRoot.querySelector('[part="help-text"]');
+        this.iconEl = this.shadowRoot.querySelector('[part="icon"]');
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.messageEl = this.shadowRoot.querySelector('[part~="description"]');
+    }
+    update() {
+        if (!this.helpTextEl) {
+            return;
+        }
+        const iconName = this.tone === "error" || this.tone === "warning"
+            ? "alert"
+            : this.tone === "success"
+                ? "checkmark"
+                : "info";
+        const iconMarkup = resolveDesignIcon(iconName) ?? "i";
+        this.helpTextEl.dataset.tone = this.tone;
+        this.helpTextEl.setAttribute("aria-label", this.label || "Help text");
+        this.iconEl.setAttribute("data-icon-source", iconMarkup === "i" ? "text" : "design-system");
+        this.iconEl.innerHTML = iconMarkup;
+        if (this.label) {
+            this.labelEl.hidden = false;
+            this.labelEl.textContent = this.label;
+        }
+        else {
+            this.labelEl.hidden = true;
+            this.labelEl.textContent = "";
+        }
+        this.messageEl.textContent = this.message;
+    }
+}
+export const defineBoxHelpTextElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxHelpTextElement);
+    return BoxHelpTextElement;
+};

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

@@ -0,0 +1,32 @@
+import { BaseElement } from "../../core/index.js";
+/**
+ * A compact inline nudge — a lightweight hint or promotion pointing at a nearby
+ * feature, smaller than `box-alert`. It carries an optional primary action
+ * (emits `action`) and can be dismissed (emits `dismiss` and hides). Announced
+ * politely via `role="status"`; the host decides what the action does.
+ */
+export declare class BoxNudgeElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private openValue;
+    private hostEl;
+    private headingEl;
+    private messageEl;
+    private actionEl;
+    get open(): boolean;
+    set open(value: boolean);
+    get heading(): string;
+    set heading(value: string);
+    get message(): string;
+    set message(value: string);
+    get actionLabel(): string;
+    set actionLabel(value: string);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    dismiss(): void;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private ensureOpenStructure;
+    private syncActionButton;
+    protected update(): void;
+}
+export declare const defineBoxNudgeElement: (tagName?: string) => typeof BoxNudgeElement;