@unofficialbox/box-open-elements 0.1.0

package/dist/components/feedback/nudge.js

@@ -0,0 +1,299 @@
+import { BaseElement } from "../../core/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+import { boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+const DEFAULT_TAG_NAME = "box-nudge";
+const nudgeStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="nudge"] {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.55rem;
+    padding: 0.55rem 0.7rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 24%, var(--boe-token-surface-surface, #ffffff));
+    border-radius: ${boeRadius.large};
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #ffffff));
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="icon"] {
+    flex: none;
+    display: grid;
+    place-items: center;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+  }
+
+  [part="icon"] svg {
+    inline-size: 1.15rem;
+    block-size: 1.15rem;
+  }
+
+  [part="content"] {
+    display: grid;
+    gap: 0.15rem;
+    flex: 1 1 auto;
+    line-height: 1.4;
+    font-size: 0.88rem;
+  }
+
+  [part~="title"] {
+    font-weight: 700;
+  }
+
+  [part~="title"][hidden] {
+    display: none;
+  }
+
+  [part="message"] {
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="message"][hidden] {
+    display: none;
+  }
+
+  [part="action"] {
+    appearance: none;
+    justify-self: start;
+    margin-top: 0.2rem;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    font: inherit;
+    font-size: 0.85rem;
+    font-weight: 700;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  [part="action"]:hover:not(:disabled) {
+    color: var(--boe-token-surface-surface-brand-hover, #006ae9);
+  }
+
+  [part="action"]:active:not(:disabled) {
+    color: var(--boe-token-surface-surface-brand-pressed, #004eac);
+  }
+
+  ${boeFocusVisibleStyles('[part="action"]')}
+
+  [part="action"]:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+    box-shadow: none;
+  }
+
+  [part="dismiss"] {
+    appearance: none;
+    flex: none;
+    inline-size: 1.4rem;
+    block-size: 1.4rem;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    cursor: pointer;
+  }
+
+  [part="dismiss"] svg {
+    inline-size: 0.8rem;
+    block-size: 0.8rem;
+  }
+
+  ${boeNeutralInteractiveStyles('[part="dismiss"]')}
+`;
+/**
+ * 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 class BoxNudgeElement extends BaseElement {
+    static get observedAttributes() {
+        return ["action-label", "heading", "message", "open"];
+    }
+    openValue = true;
+    hostEl;
+    headingEl = null;
+    messageEl = null;
+    actionEl = null;
+    get open() {
+        return this.openValue;
+    }
+    set open(value) {
+        const nextValue = Boolean(value);
+        if (this.openValue === nextValue) {
+            return;
+        }
+        this.openValue = nextValue;
+        if (nextValue) {
+            this.setAttribute("open", "");
+        }
+        else {
+            this.removeAttribute("open");
+        }
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    get heading() {
+        return this.getAttribute("heading") ?? "";
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    get message() {
+        return this.getAttribute("message") ?? "";
+    }
+    set message(value) {
+        this.setAttribute("message", value);
+    }
+    get actionLabel() {
+        return this.getAttribute("action-label") ?? "";
+    }
+    set actionLabel(value) {
+        this.setAttribute("action-label", value);
+    }
+    connectedCallback() {
+        // Open by default; dismiss() (via the `open` property) manages the closed state.
+        this.openValue = true;
+        super.connectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "open") {
+            this.openValue = this.hasAttribute("open");
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    dismiss() {
+        if (!this.openValue) {
+            return;
+        }
+        this.open = false;
+        this.dispatchEvent(new CustomEvent("dismiss", { bubbles: true, composed: true }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${nudgeStyles}</style>
+      <div part="host"></div>
+    `;
+        this.hostEl = this.shadowRoot.querySelector('[part="host"]');
+    }
+    setupListeners() {
+        this.hostEl.addEventListener("click", event => {
+            const target = event.target;
+            if (target.closest('[part="dismiss"]')) {
+                this.dismiss();
+                return;
+            }
+            if (target.closest('[part="action"]')) {
+                this.dispatchEvent(new CustomEvent("action", {
+                    bubbles: true,
+                    composed: true,
+                    detail: { label: this.actionLabel },
+                }));
+            }
+        });
+    }
+    ensureOpenStructure() {
+        if (this.hostEl.querySelector('[part="nudge"]')) {
+            this.headingEl = this.hostEl.querySelector('[part~="title"]');
+            this.messageEl = this.hostEl.querySelector('[part="message"]');
+            this.actionEl = this.hostEl.querySelector('[part="action"]');
+            return;
+        }
+        this.hostEl.innerHTML = `
+      <div part="nudge" role="status" aria-live="polite">
+        <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="M9 18h6"/>
+            <path d="M10 22h4"/>
+            <path d="M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1v.2h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2Z"/>
+          </svg>
+        </span>
+        <div part="content">
+          <h2 part="heading title" hidden></h2>
+          <span part="message" hidden></span>
+        </div>
+        <button type="button" part="dismiss" aria-label="Dismiss">
+          <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
+        </button>
+      </div>
+    `;
+        this.headingEl = this.hostEl.querySelector('[part~="title"]');
+        this.messageEl = this.hostEl.querySelector('[part="message"]');
+        this.actionEl = null;
+    }
+    syncActionButton() {
+        const content = this.hostEl.querySelector('[part="content"]');
+        if (!content) {
+            return;
+        }
+        if (this.actionLabel) {
+            if (!this.actionEl) {
+                const button = document.createElement("button");
+                button.type = "button";
+                button.setAttribute("part", "action");
+                content.append(button);
+                this.actionEl = button;
+            }
+            this.actionEl.textContent = this.actionLabel;
+        }
+        else if (this.actionEl) {
+            this.actionEl.remove();
+            this.actionEl = null;
+        }
+    }
+    update() {
+        if (!this.hostEl) {
+            return;
+        }
+        if (!this.openValue) {
+            this.hostEl.innerHTML = "";
+            this.headingEl = null;
+            this.messageEl = null;
+            this.actionEl = null;
+            return;
+        }
+        this.ensureOpenStructure();
+        if (!this.headingEl || !this.messageEl) {
+            return;
+        }
+        if (this.heading) {
+            this.headingEl.hidden = false;
+            this.headingEl.textContent = this.heading;
+        }
+        else {
+            this.headingEl.hidden = true;
+            this.headingEl.textContent = "";
+        }
+        if (this.message) {
+            this.messageEl.hidden = false;
+            this.messageEl.textContent = this.message;
+        }
+        else {
+            this.messageEl.hidden = true;
+            this.messageEl.textContent = "";
+        }
+        this.syncActionButton();
+    }
+}
+export const defineBoxNudgeElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxNudgeElement);
+    return BoxNudgeElement;
+};

package/dist/components/feedback/progress-bar.d.ts

@@ -0,0 +1,18 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxProgressBarElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private progressEl;
+    private labelEl;
+    private valueEl;
+    private trackEl;
+    private indicatorEl;
+    get label(): string;
+    set label(value: string);
+    get max(): number;
+    set max(value: number);
+    get value(): number;
+    set value(value: number);
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxProgressBarElement: (tagName?: string) => typeof BoxProgressBarElement;

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

@@ -0,0 +1,128 @@
+import { BaseElement } from "../../core/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-progress-bar";
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const progressBarStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="progress"] {
+    display: grid;
+    gap: 0.45rem;
+  }
+
+  [part="meta"] {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.65rem;
+  }
+
+  [part="label"] {
+    font-size: 0.8rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="value"] {
+    font-size: 0.86rem;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="track"] {
+    display: block;
+    height: 0.5rem;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 55%, var(--boe-token-stroke-stroke, #e8e8e8) 45%);
+    overflow: hidden;
+  }
+
+  [part="indicator"] {
+    display: block;
+    height: 100%;
+    border-radius: 999px;
+    background: var(--boe-token-surface-surface-brand, #0061d5);
+    transition: width ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+`;
+export class BoxProgressBarElement extends BaseElement {
+    static get observedAttributes() {
+        return ["label", "max", "value"];
+    }
+    progressEl;
+    labelEl;
+    valueEl;
+    trackEl;
+    indicatorEl;
+    get label() {
+        return this.getAttribute("label") ?? "Progress";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get max() {
+        return Number(this.getAttribute("max") ?? "100");
+    }
+    set max(value) {
+        this.setAttribute("max", String(value));
+    }
+    get value() {
+        return Number(this.getAttribute("value") ?? "0");
+    }
+    set value(value) {
+        this.setAttribute("value", String(value));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${progressBarStyles}</style>
+      <div part="progress" role="group">
+        <div part="meta">
+          <span part="label"></span>
+          <span part="value"></span>
+        </div>
+        <div part="track" role="progressbar" aria-valuemin="0">
+          <span part="indicator"></span>
+        </div>
+      </div>
+    `;
+        this.progressEl = this.shadowRoot.querySelector('[part="progress"]');
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.valueEl = this.shadowRoot.querySelector('[part="value"]');
+        this.trackEl = this.shadowRoot.querySelector('[part="track"]');
+        this.indicatorEl = this.shadowRoot.querySelector('[part="indicator"]');
+    }
+    update() {
+        if (!this.progressEl) {
+            return;
+        }
+        const max = Math.max(1, this.max);
+        const value = clamp(this.value, 0, max);
+        const percentage = Math.round((value / max) * 100);
+        this.progressEl.setAttribute("aria-label", `${this.label} progress`);
+        this.labelEl.textContent = this.label;
+        this.valueEl.textContent = `${percentage}%`;
+        this.trackEl.setAttribute("aria-label", this.label);
+        this.trackEl.setAttribute("aria-valuemax", String(max));
+        this.trackEl.setAttribute("aria-valuenow", String(value));
+        this.trackEl.setAttribute("aria-valuetext", `${percentage}%`);
+        this.indicatorEl.style.width = `${percentage}%`;
+    }
+}
+export const defineBoxProgressBarElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxProgressBarElement);
+    return BoxProgressBarElement;
+};

package/dist/components/feedback/progress-ring.d.ts

@@ -0,0 +1,21 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxProgressRingElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private ringEl;
+    private svgEl;
+    private trackCircle;
+    private indicatorCircle;
+    private valueEl;
+    private labelEl;
+    get label(): string;
+    set label(value: string);
+    get max(): number;
+    set max(value: number);
+    get size(): number;
+    set size(value: number);
+    get value(): number;
+    set value(value: number);
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxProgressRingElement: (tagName?: string) => typeof BoxProgressRingElement;

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

@@ -0,0 +1,155 @@
+import { BaseElement } from "../../core/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-progress-ring";
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const progressRingStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="ring"] {
+    display: inline-grid;
+    place-items: center;
+  }
+
+  [part="svg"] {
+    grid-area: 1 / 1;
+    transform: rotate(-90deg);
+  }
+
+  circle[part="track"] {
+    stroke: color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 55%, var(--boe-token-stroke-stroke, #e8e8e8) 45%);
+  }
+
+  circle[part="indicator"] {
+    stroke: var(--boe-token-surface-surface-brand, #0061d5);
+    stroke-linecap: round;
+    transition: stroke-dashoffset ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="meta"] {
+    grid-area: 1 / 1;
+    display: grid;
+    justify-items: center;
+    gap: 0.1rem;
+    text-align: center;
+  }
+
+  [part="value"] {
+    font-weight: 700;
+    line-height: 1;
+    letter-spacing: -0.02em;
+    font-variant-numeric: tabular-nums;
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="label"] {
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+`;
+export class BoxProgressRingElement extends BaseElement {
+    static get observedAttributes() {
+        return ["label", "max", "size", "value"];
+    }
+    ringEl;
+    svgEl;
+    trackCircle;
+    indicatorCircle;
+    valueEl;
+    labelEl;
+    get label() {
+        return this.getAttribute("label") ?? "Progress";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get max() {
+        return Number(this.getAttribute("max") ?? "100");
+    }
+    set max(value) {
+        this.setAttribute("max", String(value));
+    }
+    get size() {
+        return Number(this.getAttribute("size") ?? "88");
+    }
+    set size(value) {
+        this.setAttribute("size", String(value));
+    }
+    get value() {
+        return Number(this.getAttribute("value") ?? "0");
+    }
+    set value(value) {
+        this.setAttribute("value", String(value));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${progressRingStyles}</style>
+      <div part="ring" role="group">
+        <svg part="svg" role="progressbar" aria-valuemin="0">
+          <circle part="track" fill="none"></circle>
+          <circle part="indicator" fill="none"></circle>
+        </svg>
+        <div part="meta">
+          <span part="value"></span>
+          <span part="label"></span>
+        </div>
+      </div>
+    `;
+        this.ringEl = this.shadowRoot.querySelector('[part="ring"]');
+        this.svgEl = this.shadowRoot.querySelector('[part="svg"]');
+        this.trackCircle = this.shadowRoot.querySelector('circle[part="track"]');
+        this.indicatorCircle = this.shadowRoot.querySelector('circle[part="indicator"]');
+        this.valueEl = this.shadowRoot.querySelector('[part="value"]');
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+    }
+    update() {
+        if (!this.ringEl) {
+            return;
+        }
+        const max = Math.max(1, this.max);
+        const value = clamp(this.value, 0, max);
+        const percentage = Math.round((value / max) * 100);
+        const size = Math.max(48, this.size);
+        const strokeWidth = Math.max(6, Math.round(size * 0.09));
+        const radius = (size - strokeWidth) / 2;
+        const circumference = 2 * Math.PI * radius;
+        const dashOffset = circumference - (percentage / 100) * circumference;
+        const center = String(size / 2);
+        this.ringEl.setAttribute("aria-label", `${this.label} progress`);
+        this.svgEl.setAttribute("viewBox", `0 0 ${size} ${size}`);
+        this.svgEl.style.width = `${size}px`;
+        this.svgEl.style.height = `${size}px`;
+        this.svgEl.setAttribute("aria-label", this.label);
+        this.svgEl.setAttribute("aria-valuemax", String(max));
+        this.svgEl.setAttribute("aria-valuenow", String(value));
+        this.svgEl.setAttribute("aria-valuetext", `${percentage}%`);
+        for (const circle of [this.trackCircle, this.indicatorCircle]) {
+            circle.setAttribute("cx", center);
+            circle.setAttribute("cy", center);
+            circle.setAttribute("r", String(radius));
+            circle.setAttribute("stroke-width", String(strokeWidth));
+        }
+        this.indicatorCircle.setAttribute("stroke-dasharray", String(circumference));
+        this.indicatorCircle.setAttribute("stroke-dashoffset", String(dashOffset));
+        this.valueEl.style.fontSize = `${Math.max(0.8, size / 88)}rem`;
+        this.valueEl.textContent = `${percentage}%`;
+        this.labelEl.textContent = this.label;
+    }
+}
+export const defineBoxProgressRingElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxProgressRingElement);
+    return BoxProgressRingElement;
+};

package/dist/components/feedback/progress-steps.d.ts

@@ -0,0 +1,25 @@
+import { BaseElement } from "../../core/index.js";
+type BoxProgressStep = {
+    description?: string;
+    label: string;
+    value: string;
+};
+export declare class BoxProgressStepsElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private stepsEl;
+    private itemsSignature;
+    get label(): string;
+    set label(value: string);
+    get items(): BoxProgressStep[];
+    set items(value: BoxProgressStep[]);
+    get value(): string;
+    set value(nextValue: string);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private selectValue;
+    protected update(): void;
+}
+export declare const defineBoxProgressStepsElement: (tagName?: string) => typeof BoxProgressStepsElement;
+export {};