@unofficialbox/box-open-elements 0.1.0

package/dist/patterns/insights/metric-card.js

@@ -0,0 +1,278 @@
+import { BaseElement } from "../../core/index.js";
+import { boePanel } from "../../foundations/geometry/index.js";
+import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+const DEFAULT_TAG_NAME = "box-metric-card";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const elementStyles = `
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+        }
+
+        [part="card"] {
+          display: grid;
+          gap: ${boePanel.gap};
+          padding: ${boePanel.padding};
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+          border-radius: ${boePanel.radius};
+          background: color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 96%, var(--boe-token-surface-surface, #ffffff) 4%);
+        }
+
+        [part="header"] {
+          display: grid;
+          gap: 0.25rem;
+        }
+
+        [part="eyebrow"] {
+          font-size: 0.76rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="title-row"] {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 0.45rem;
+        }
+
+        [part="title"] {
+          margin: 0;
+          font: inherit;
+          font-size: 1.05rem;
+          font-weight: 700;
+          color: var(--boe-token-text-text, #1f1e1b);
+        }
+
+        [part="status"] {
+          display: inline-flex;
+          align-items: center;
+          padding: 0.22rem 0.5rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #ffffff) 90%);
+          color: var(--boe-token-surface-surface-brand, #0061d5);
+          font-size: 0.74rem;
+          font-weight: 700;
+          letter-spacing: 0.05em;
+          text-transform: uppercase;
+        }
+
+        [part="value"] {
+          font-size: 1.35rem;
+          font-weight: 700;
+          line-height: 1;
+          letter-spacing: -0.04em;
+          color: var(--boe-token-text-text, #1f1e1b);
+        }
+
+        [part="message"] {
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          line-height: 1.42;
+        }
+
+        [part="footer"] {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          justify-content: space-between;
+          gap: ${boePanel.gap};
+        }
+
+        [part="trend"] {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.35rem;
+          padding: 0.22rem 0.48rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--boe-token-surface-surface-tertiary, #e8e8e8) 72%, var(--boe-token-surface-surface, #ffffff) 28%);
+          color: var(--boe-token-text-text, #222222);
+          font-size: 0.76rem;
+          font-weight: 700;
+        }
+
+        [part="trend"][data-direction="up"] {
+          background: color-mix(in srgb, #26c281 14%, var(--boe-token-surface-surface, #ffffff) 86%);
+          color: #138a58;
+        }
+
+        [part="trend"][data-direction="down"] {
+          background: color-mix(in srgb, #ed3757 14%, var(--boe-token-surface-surface, #ffffff) 86%);
+          color: #bf2340;
+        }
+
+        [part="action"] {
+          appearance: none;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 64%, transparent);
+          border-radius: 999px;
+          background: var(--boe-token-surface-surface, #ffffff);
+          color: inherit;
+          font: inherit;
+          padding: 0.4rem 0.7rem;
+          cursor: pointer;
+        }
+
+        ${boeNeutralInteractiveStyles('[part="action"]')}
+        ${boeBrandInteractiveStyles('[part="action"][data-tone="primary"]')}
+
+        [part="action"][data-tone="primary"] {
+          border-color: transparent;
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+          color: var(--boe-token-text-text-on-brand, #ffffff);
+        }
+      `;
+export class BoxMetricCardElement extends BaseElement {
+    static get observedAttributes() {
+        return ["action", "eyebrow", "message", "status", "heading", "trend", "value"];
+    }
+    get action() {
+        return this.parseJsonAttribute("action", null);
+    }
+    set action(value) {
+        if (!value) {
+            this.removeAttribute("action");
+            return;
+        }
+        this.setAttribute("action", JSON.stringify(value));
+    }
+    get eyebrow() {
+        return this.getAttribute("eyebrow") ?? "";
+    }
+    set eyebrow(value) {
+        if (!value) {
+            this.removeAttribute("eyebrow");
+            return;
+        }
+        this.setAttribute("eyebrow", value);
+    }
+    get message() {
+        return this.getAttribute("message") ?? "";
+    }
+    set message(value) {
+        if (!value) {
+            this.removeAttribute("message");
+            return;
+        }
+        this.setAttribute("message", value);
+    }
+    get status() {
+        return this.getAttribute("status") ?? "";
+    }
+    set status(value) {
+        if (!value) {
+            this.removeAttribute("status");
+            return;
+        }
+        this.setAttribute("status", value);
+    }
+    get heading() {
+        return this.getAttribute("heading") ?? "Metric";
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    get trend() {
+        return this.parseJsonAttribute("trend", null);
+    }
+    set trend(value) {
+        if (!value) {
+            this.removeAttribute("trend");
+            return;
+        }
+        this.setAttribute("trend", JSON.stringify(value));
+    }
+    get value() {
+        return this.getAttribute("value") ?? "";
+    }
+    set value(value) {
+        this.setAttribute("value", value);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    parseJsonAttribute(name, fallback) {
+        const raw = this.getAttribute(name);
+        if (!raw) {
+            return fallback;
+        }
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return fallback;
+        }
+    }
+    emitAction(action) {
+        this.dispatchEvent(new CustomEvent("action", {
+            bubbles: true,
+            composed: true,
+            detail: action,
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <div part="content-host"></div>
+    `;
+    }
+    update() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        const action = this.action;
+        const trend = this.trend;
+        const eyebrowMarkup = this.eyebrow ? `<div part="eyebrow">${escapeHtml(this.eyebrow)}</div>` : "";
+        const messageMarkup = this.message ? `<div part="message">${escapeHtml(this.message)}</div>` : "";
+        const statusMarkup = this.status ? `<span part="status">${escapeHtml(this.status)}</span>` : "";
+        const trendMarkup = trend
+            ? `<div part="trend" data-direction="${escapeHtml(trend.direction ?? "flat")}" data-tone="${escapeHtml(trend.tone ?? "neutral")}">${escapeHtml(trend.label)}</div>`
+            : "";
+        const actionMarkup = action
+            ? `<button type="button" part="action" data-action-id="${escapeHtml(action.id)}" data-tone="${escapeHtml(action.tone ?? "neutral")}">${escapeHtml(action.label)}</button>`
+            : "";
+        const host = this.shadowRoot.querySelector('[part="content-host"]');
+        if (!host) {
+            return;
+        }
+        host.innerHTML = `
+      <article part="card">
+        <header part="header">
+          ${eyebrowMarkup}
+          <div part="title-row">
+            <h2 part="title">${escapeHtml(this.heading)}</h2>
+            ${statusMarkup}
+          </div>
+        </header>
+        <div part="value">${escapeHtml(this.value)}</div>
+        ${messageMarkup}
+        <div part="footer">
+          ${trendMarkup}
+          ${actionMarkup}
+        </div>
+      </article>
+    `;
+        if (action) {
+            this.shadowRoot.querySelector('[part="action"]')?.addEventListener("click", () => {
+                this.emitAction(action);
+            });
+        }
+    }
+}
+export const defineBoxMetricCardElement = (tagName = DEFAULT_TAG_NAME) => {
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, BoxMetricCardElement);
+    }
+};

package/dist/patterns/item/bulk-action-bar.d.ts

@@ -0,0 +1,35 @@
+import { BaseElement } from "../../core/index.js";
+type BulkAction = {
+    id: string;
+    label: string;
+    tone?: string;
+};
+type BulkActionItem = {
+    description?: string;
+    id?: string;
+    label: string;
+};
+export declare class BoxBulkActionBarElement extends BaseElement {
+    static get observedAttributes(): string[];
+    get actions(): BulkAction[];
+    set actions(value: BulkAction[]);
+    get clearLabel(): string;
+    set clearLabel(value: string);
+    get count(): number;
+    set count(value: number);
+    get items(): BulkActionItem[];
+    set items(value: BulkActionItem[]);
+    get label(): string;
+    set label(value: string);
+    get message(): string;
+    set message(value: string);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private parseJsonAttribute;
+    private emitAction;
+    private emitClear;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxBulkActionBarElement: (tagName?: string) => void;
+export {};

package/dist/patterns/item/bulk-action-bar.js

@@ -0,0 +1,325 @@
+import { BaseElement } from "../../core/index.js";
+import { applyRovingTabindex, handleRovingKeydown } from "../../foundations/a11y/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boePanel } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-bulk-action-bar";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const elementStyles = `
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+          --_obp-surface: var(--boe-token-surface-surface, #ffffff);
+          --_obp-surface-muted: var(--boe-token-surface-surface-secondary, #fbfbfb);
+          --_obp-border: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+          --_obp-border-subtle: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 58%, transparent);
+          --_obp-text-muted: var(--boe-token-text-text-secondary, #6f6f6f);
+          --_obp-brand: var(--boe-token-surface-surface-brand, #0061d5);
+          --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
+        }
+
+        [part="bar"] {
+          display: grid;
+          gap: ${boePanel.gap};
+          padding: ${boePanel.padding};
+          border: 1px solid var(--_obp-border);
+          border-radius: ${boePanel.radius};
+          background: var(--_obp-surface-muted);
+        }
+
+        [part="topline"] {
+          display: flex;
+          flex-wrap: wrap;
+          gap: ${boePanel.gap};
+          align-items: center;
+          justify-content: space-between;
+        }
+
+        [part="summary"] {
+          display: grid;
+          gap: 0.25rem;
+        }
+
+        [part="label"] {
+          font-size: 0.8rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--_obp-brand);
+        }
+
+        [part="count"] {
+          font-size: 1.35rem;
+          font-weight: 700;
+          line-height: 1.1;
+        }
+
+        [part="message"] {
+          color: var(--_obp-text-muted);
+          line-height: 1.55;
+        }
+
+        [part="items"] {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.65rem;
+        }
+
+        [part="item"] {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.45rem;
+          padding: 0.4rem 0.65rem;
+          border: 1px solid var(--_obp-border-subtle);
+          border-radius: 999px;
+          background: var(--_obp-surface);
+        }
+
+        [part="item-label"] {
+          font-weight: 600;
+        }
+
+        [part="item-description"] {
+          color: var(--_obp-text-muted);
+          font-size: 0.92rem;
+        }
+
+        [part="actions"] {
+          display: flex;
+          flex-wrap: wrap;
+          gap: ${boePanel.gap};
+          align-items: center;
+          justify-content: flex-end;
+        }
+
+        [part="action"],
+        [part="clear"] {
+          border: 1px solid var(--_obp-border-subtle);
+          border-radius: 999px;
+          padding: 0.4rem 0.7rem;
+          background: var(--_obp-surface);
+          color: inherit;
+          font: inherit;
+          cursor: pointer;
+          transition:
+            transform ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+            border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+            background ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+        }
+
+        [part="clear"] {
+          color: var(--_obp-text-muted);
+        }
+
+        ${boeNeutralInteractiveStyles('[part="action"]')}
+        ${boeNeutralInteractiveStyles('[part="clear"]')}
+
+        [part="action"][data-tone="primary"],
+        [part="action"][data-tone="primary"]:hover:not(:disabled),
+        [part="action"][data-tone="primary"]:active:not(:disabled) {
+          border-color: color-mix(in srgb, var(--_obp-brand) 34%, transparent);
+          background: var(--_obp-brand-soft);
+          color: var(--_obp-brand);
+        }
+
+        @media (max-width: 720px) {
+          [part="topline"] {
+            align-items: start;
+          }
+
+          [part="actions"] {
+            justify-content: start;
+          }
+        }
+      `;
+export class BoxBulkActionBarElement extends BaseElement {
+    static get observedAttributes() {
+        return ["actions", "clear-label", "count", "items", "label", "message"];
+    }
+    get actions() {
+        return this.parseJsonAttribute("actions", []);
+    }
+    set actions(value) {
+        this.setAttribute("actions", JSON.stringify(value));
+    }
+    get clearLabel() {
+        return this.getAttribute("clear-label") ?? "Clear selection";
+    }
+    set clearLabel(value) {
+        this.setAttribute("clear-label", value);
+    }
+    get count() {
+        const raw = this.getAttribute("count");
+        if (!raw) {
+            return this.items.length;
+        }
+        const parsed = Number.parseInt(raw, 10);
+        return Number.isFinite(parsed) ? Math.max(parsed, 0) : this.items.length;
+    }
+    set count(value) {
+        this.setAttribute("count", String(value));
+    }
+    get items() {
+        return this.parseJsonAttribute("items", []);
+    }
+    set items(value) {
+        this.setAttribute("items", JSON.stringify(value));
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Bulk actions";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get message() {
+        return this.getAttribute("message") ?? "";
+    }
+    set message(value) {
+        this.setAttribute("message", value);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    parseJsonAttribute(name, fallback) {
+        const raw = this.getAttribute(name);
+        if (!raw) {
+            return fallback;
+        }
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return fallback;
+        }
+    }
+    emitAction(actionId) {
+        this.dispatchEvent(new CustomEvent("action", {
+            bubbles: true,
+            composed: true,
+            detail: {
+                action: actionId,
+                count: this.count,
+                items: this.items,
+            },
+        }));
+    }
+    emitClear() {
+        this.dispatchEvent(new CustomEvent("clear", {
+            bubbles: true,
+            composed: true,
+            detail: {
+                count: this.count,
+                items: this.items,
+            },
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <div part="content-host"></div>
+    `;
+    }
+    update() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        const count = this.count;
+        const summaryText = `${count} selected`;
+        const messageMarkup = this.message ? `<div part="message">${escapeHtml(this.message)}</div>` : "";
+        const itemsMarkup = this.items.length
+            ? `
+          <div part="items">
+            ${this.items
+                .map(item => `
+                  <div part="item">
+                    <span part="item-label">${escapeHtml(item.label)}</span>
+                    ${item.description ? `<span part="item-description">${escapeHtml(item.description)}</span>` : ""}
+                  </div>
+                `)
+                .join("")}
+          </div>
+        `
+            : "";
+        const actionsMarkup = this.actions.length
+            ? `
+          <div part="actions" role="toolbar" aria-label="${escapeHtml(this.label)}">
+            ${this.actions
+                .map(action => `
+                  <button
+                    type="button"
+                    part="action"
+                    data-action-id="${escapeHtml(action.id)}"
+                    data-tone="${escapeHtml(action.tone ?? "neutral")}"
+                    aria-label="${escapeHtml(action.label)}"
+                  >
+                    ${escapeHtml(action.label)}
+                  </button>
+                `)
+                .join("")}
+            <button type="button" part="clear" data-action-id="clear-selection">
+              ${escapeHtml(this.clearLabel)}
+            </button>
+          </div>
+        `
+            : `
+          <div part="actions" role="toolbar" aria-label="${escapeHtml(this.label)}">
+            <button type="button" part="clear" data-action-id="clear-selection">
+              ${escapeHtml(this.clearLabel)}
+            </button>
+          </div>
+        `;
+        const host = this.shadowRoot.querySelector('[part="content-host"]');
+        if (!host) {
+            return;
+        }
+        host.innerHTML = `
+      <section part="bar">
+        <div part="topline">
+          <div part="summary">
+            <div part="label">${escapeHtml(this.label)}</div>
+            <div part="count">${escapeHtml(summaryText)}</div>
+            ${messageMarkup}
+          </div>
+          ${actionsMarkup}
+        </div>
+        ${itemsMarkup}
+      </section>
+    `;
+        this.shadowRoot.querySelectorAll('[part="action"]').forEach(button => {
+            button.addEventListener("click", () => {
+                const actionId = button.dataset.actionId;
+                if (actionId) {
+                    this.emitAction(actionId);
+                }
+            });
+        });
+        this.shadowRoot.querySelector('[part="clear"]')?.addEventListener("click", () => {
+            this.emitClear();
+        });
+        const toolbar = this.shadowRoot.querySelector('[part="actions"]');
+        if (toolbar) {
+            const toolbarButtons = Array.from(toolbar.querySelectorAll('button[part="action"], button[part="clear"]'));
+            applyRovingTabindex(toolbarButtons, 0);
+            toolbar.addEventListener("keydown", event => {
+                handleRovingKeydown(event, toolbarButtons, { orientation: "horizontal" });
+            });
+        }
+    }
+}
+export const defineBoxBulkActionBarElement = (tagName = DEFAULT_TAG_NAME) => {
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, BoxBulkActionBarElement);
+    }
+};

package/dist/patterns/item/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./item-form.js";
+export * from "./item-details-panel.js";
+export * from "./bulk-action-bar.js";
+export * from "./preview-header.js";

package/dist/patterns/item/index.js

@@ -0,0 +1,4 @@
+export * from "./item-form.js";
+export * from "./item-details-panel.js";
+export * from "./bulk-action-bar.js";
+export * from "./preview-header.js";