@unofficialbox/box-open-elements 0.1.0

package/dist/patterns/search/search-results-header.js

@@ -0,0 +1,288 @@
+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-search-results-header";
+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) 64%, 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="header"] {
+          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: start;
+          justify-content: space-between;
+        }
+
+        [part="meta"] {
+          display: grid;
+          gap: 0.35rem;
+        }
+
+        [part="label"] {
+          font-size: 0.8rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--_obp-text-muted);
+        }
+
+        [part="count"] {
+          font-size: 1.35rem;
+          font-weight: 700;
+          line-height: 1.1;
+        }
+
+        [part="context"] {
+          color: var(--_obp-text-muted);
+          line-height: 1.5;
+        }
+
+        [part="actions"] {
+          display: flex;
+          flex-wrap: wrap;
+          gap: ${boePanel.gap};
+          align-items: center;
+          justify-content: flex-end;
+        }
+
+        [part="action"],
+        [part="filter-chip"] {
+          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;
+        }
+
+        [part="filters"] {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.65rem;
+        }
+
+        [part="filter-chip"]::after {
+          content: " ×";
+          color: var(--_obp-text-muted);
+        }
+
+        ${boeNeutralInteractiveStyles('[part="action"]')}
+        ${boeNeutralInteractiveStyles('[part="filter-chip"]')}
+        ${boeBrandInteractiveStyles('[part="action"][data-tone="primary"]')}
+
+        [part="action"][data-tone="primary"] {
+          border-color: var(--_obp-brand);
+          background: var(--_obp-brand);
+          color: var(--boe-token-text-text-on-brand, #ffffff);
+        }
+      `;
+export class BoxSearchResultsHeaderElement extends BaseElement {
+    static get observedAttributes() {
+        return ["actions", "filters", "label", "query", "result-count", "scope", "sort-label", "view-label"];
+    }
+    get actions() {
+        return this.parseJsonAttribute("actions", []);
+    }
+    set actions(value) {
+        this.setAttribute("actions", JSON.stringify(value));
+    }
+    get filters() {
+        return this.parseJsonAttribute("filters", []);
+    }
+    set filters(value) {
+        this.setAttribute("filters", JSON.stringify(value));
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Search Results";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get query() {
+        return this.getAttribute("query") ?? "";
+    }
+    set query(value) {
+        this.setAttribute("query", value);
+    }
+    get resultCount() {
+        const raw = this.getAttribute("result-count");
+        const parsed = raw ? Number.parseInt(raw, 10) : 0;
+        return Number.isFinite(parsed) ? Math.max(parsed, 0) : 0;
+    }
+    set resultCount(value) {
+        this.setAttribute("result-count", String(value));
+    }
+    get scope() {
+        return this.getAttribute("scope") ?? "";
+    }
+    set scope(value) {
+        this.setAttribute("scope", value);
+    }
+    get sortLabel() {
+        return this.getAttribute("sort-label") ?? "";
+    }
+    set sortLabel(value) {
+        this.setAttribute("sort-label", value);
+    }
+    get viewLabel() {
+        return this.getAttribute("view-label") ?? "";
+    }
+    set viewLabel(value) {
+        this.setAttribute("view-label", 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 },
+        }));
+    }
+    emitFilterRemoved(filter) {
+        this.dispatchEvent(new CustomEvent("filter-removed", {
+            bubbles: true,
+            composed: true,
+            detail: { filter },
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <div part="content-host"></div>
+    `;
+    }
+    update() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        const contextParts = [
+            this.query ? `Query: ${this.query}` : "",
+            this.scope ? `Scope: ${this.scope}` : "",
+            this.sortLabel ? `Sorted by ${this.sortLabel}` : "",
+            this.viewLabel ? `View: ${this.viewLabel}` : "",
+        ].filter(Boolean);
+        const filtersMarkup = this.filters.length
+            ? `
+          <div part="filters">
+            ${this.filters
+                .map(filter => `
+                  <button
+                    type="button"
+                    part="filter-chip"
+                    data-filter="${escapeHtml(filter)}"
+                  >
+                    ${escapeHtml(filter)}
+                  </button>
+                `)
+                .join("")}
+          </div>
+        `
+            : "";
+        const actionsMarkup = this.actions.length
+            ? `
+          <div part="actions">
+            ${this.actions
+                .map(action => `
+                  <button
+                    type="button"
+                    part="action"
+                    data-action-id="${escapeHtml(action.id)}"
+                    data-tone="${escapeHtml(action.tone ?? "neutral")}"
+                  >
+                    ${escapeHtml(action.label)}
+                  </button>
+                `)
+                .join("")}
+          </div>
+        `
+            : "";
+        const host = this.shadowRoot.querySelector('[part="content-host"]');
+        if (!host) {
+            return;
+        }
+        host.innerHTML = `
+      <section part="header">
+        <div part="topline">
+          <div part="meta">
+            <div part="label">${escapeHtml(this.label)}</div>
+            <div part="count">${escapeHtml(`${this.resultCount} results`)}</div>
+            ${contextParts.length ? `<div part="context">${escapeHtml(contextParts.join(" · "))}</div>` : ""}
+          </div>
+          ${actionsMarkup}
+        </div>
+        ${filtersMarkup}
+      </section>
+    `;
+        this.shadowRoot.querySelectorAll('[part="action"]').forEach(button => {
+            button.addEventListener("click", () => {
+                const actionId = button.getAttribute("data-action-id");
+                if (actionId) {
+                    this.emitAction(actionId);
+                }
+            });
+        });
+        this.shadowRoot.querySelectorAll('[part="filter-chip"]').forEach(button => {
+            button.addEventListener("click", () => {
+                const filter = button.getAttribute("data-filter");
+                if (filter) {
+                    this.emitFilterRemoved(filter);
+                }
+            });
+        });
+    }
+}
+export const defineBoxSearchResultsHeaderElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxSearchResultsHeaderElement);
+    return BoxSearchResultsHeaderElement;
+};

package/dist/patterns/share/access-stats.d.ts

@@ -0,0 +1,19 @@
+import { BaseElement } from "../../core/index.js";
+type AccessStat = {
+    label: string;
+    value: number;
+    icon?: string;
+};
+export declare class BoxAccessStatsElement extends BaseElement {
+    static get observedAttributes(): string[];
+    get label(): string;
+    set label(value: string);
+    get stats(): AccessStat[];
+    set stats(value: AccessStat[]);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxAccessStatsElement: (tagName?: string) => typeof BoxAccessStatsElement;
+export {};

package/dist/patterns/share/access-stats.js

@@ -0,0 +1,204 @@
+import { BaseElement } from "../../core/index.js";
+import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-access-stats";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const formatFullCount = (value) => {
+    if (!Number.isFinite(value)) {
+        return "0";
+    }
+    return String(value);
+};
+const formatScaled = (abs, divisor) => {
+    const scaled = abs / divisor;
+    const decimals = abs % divisor === 0 ? 0 : 1;
+    const rounded = Math.round(scaled * 10 ** decimals) / 10 ** decimals;
+    return rounded % 1 === 0 ? String(Math.round(rounded)) : rounded.toFixed(decimals);
+};
+const formatCount = (value) => {
+    if (!Number.isFinite(value)) {
+        return "0";
+    }
+    const sign = value < 0 ? "-" : "";
+    const abs = Math.abs(value);
+    if (abs >= 1_000_000_000) {
+        return `${sign}${formatScaled(abs, 1_000_000_000)}B`;
+    }
+    if (abs >= 1_000_000) {
+        return `${sign}${formatScaled(abs, 1_000_000)}M`;
+    }
+    if (abs >= 1000) {
+        const kDisplay = formatScaled(abs, 1000);
+        if (parseFloat(kDisplay) >= 1000) {
+            return `${sign}${formatScaled(abs, 1_000_000)}M`;
+        }
+        return `${sign}${kDisplay}k`;
+    }
+    return String(value);
+};
+const isAccessStat = (candidate) => {
+    if (typeof candidate !== "object" || candidate === null) {
+        return false;
+    }
+    const { label, value, icon } = candidate;
+    return (typeof label === "string" &&
+        typeof value === "number" &&
+        Number.isFinite(value) &&
+        (icon === undefined || typeof icon === "string"));
+};
+/**
+ * A compact, data-injected display of how a shared item has been accessed —
+ * view / download / comment counts and the like. A composition: the numbers
+ * arrive via the `stats` property (no transport). Presentational; each figure
+ * sits in a tile inside a labelled `role="group"` so assistive tech reads the
+ * value and its label together. Large counts abbreviate to `k`.
+ */
+const elementStyles = `
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+        }
+
+        [part="stats"] {
+          margin: 0;
+          padding: ${boePanel.padding};
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+          border-radius: ${boePanel.radius};
+          background: ${boePanel.background};
+        }
+
+        [part="title"] {
+          margin: 0 0 0.5rem;
+          font-size: 0.8rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="grid"] {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
+          gap: 0.6rem;
+        }
+
+        [part="tile"] {
+          display: grid;
+          justify-items: center;
+          gap: 0.15rem;
+          padding: 0.5rem 0.45rem;
+          border-radius: ${boeRadius.large};
+          background: var(--boe-token-surface-surface, #ffffff);
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 48%, transparent);
+          text-align: center;
+        }
+
+        [part="tile-icon"] {
+          font-size: 1rem;
+          color: var(--boe-token-surface-surface-brand, #0061d5);
+        }
+
+        [part="tile-value"] {
+          margin: 0;
+          font-size: 1.35rem;
+          font-weight: 700;
+          line-height: 1.1;
+          color: var(--boe-token-text-text, #222222);
+        }
+
+        [part="tile-label"] {
+          font-size: 0.76rem;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="empty"] {
+          padding: ${boePanel.padding};
+          text-align: center;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          font-size: 0.9rem;
+        }
+      `;
+export class BoxAccessStatsElement extends BaseElement {
+    static get observedAttributes() {
+        return ["label", "stats"];
+    }
+    get label() {
+        return this.getAttribute("label")?.trim() || "Access stats";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get stats() {
+        const raw = this.getAttribute("stats");
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed.filter(isAccessStat) : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set stats(value) {
+        this.setAttribute("stats", JSON.stringify(value));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <div part="content-host"></div>
+    `;
+    }
+    update() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        const stats = this.stats;
+        const tiles = stats
+            .map(stat => {
+            const iconMarkup = stat.icon ? `<span part="tile-icon" aria-hidden="true">${escapeHtml(stat.icon)}</span>` : "";
+            const accessibleLabel = `${formatFullCount(stat.value)} ${stat.label}`;
+            return `
+          <div part="tile" role="group" aria-label="${escapeHtml(accessibleLabel)}">
+            ${iconMarkup}
+            <span part="tile-value" aria-hidden="true">${escapeHtml(formatCount(stat.value))}</span>
+            <span part="tile-label" aria-hidden="true">${escapeHtml(stat.label)}</span>
+          </div>
+        `;
+        })
+            .join("");
+        const host = this.shadowRoot.querySelector('[part="content-host"]');
+        if (!host) {
+            return;
+        }
+        host.innerHTML = `
+      ${`<section part="stats" aria-labelledby="access-stats-title">
+              <p part="title" id="access-stats-title">${escapeHtml(this.label)}</p>
+              ${stats.length ? `<div part="grid">${tiles}</div>` : `<div part="empty">No access data</div>`}
+            </section>`}
+    `;
+    }
+}
+export const defineBoxAccessStatsElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxAccessStatsElement);
+    return BoxAccessStatsElement;
+};

package/dist/patterns/share/collaborator-avatars.d.ts

@@ -0,0 +1,22 @@
+import { BaseElement } from "../../core/index.js";
+type Collaborator = {
+    id?: string;
+    name: string;
+    initials?: string;
+    src?: string;
+};
+export declare class BoxCollaboratorAvatarsElement extends BaseElement {
+    static get observedAttributes(): string[];
+    get collaborators(): Collaborator[];
+    set collaborators(value: Collaborator[]);
+    get label(): string;
+    set label(value: string);
+    get max(): number;
+    set max(value: number);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxCollaboratorAvatarsElement: (tagName?: string) => typeof BoxCollaboratorAvatarsElement;
+export {};