@unofficialbox/box-open-elements 0.1.0

package/dist/components/identity/contact-datalist-item.js

@@ -0,0 +1,235 @@
+import { BaseElement } from "../../core/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-contact-datalist-item";
+const initialsFromName = (name) => name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map(segment => segment[0] ?? "")
+    .join("")
+    .toUpperCase();
+const contactStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="item"] {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    padding: 0.5rem 0.65rem;
+    border-radius: ${boeRadius.med};
+    cursor: pointer;
+    color: var(--boe-token-text-text, #222222);
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="item"]:hover {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+  }
+
+  [part="item"][data-selected="true"] {
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #ffffff) 90%);
+  }
+
+  [part="item"][data-disabled="true"] {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  [part="item"]:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 22%, transparent);
+  }
+
+  [part="avatar"] {
+    flex: none;
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    inline-size: 2.1rem;
+    block-size: 2.1rem;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
+    color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 72%, var(--boe-token-text-text, #222222));
+    font-weight: 700;
+    font-size: 0.82rem;
+  }
+
+  [part="avatar-image"] {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  [part="body"] {
+    min-inline-size: 0;
+    display: grid;
+    gap: 0.1rem;
+  }
+
+  [part="name"] {
+    font-size: 0.9rem;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [part="email"] {
+    font-size: 0.78rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [part="email"][hidden] {
+    display: none;
+  }
+`;
+/**
+ * A selectable contact row for a people picker — an avatar (image or initials),
+ * a name, and a secondary email/handle. Like `box-datalist-item` it is a
+ * `role="option"` that emits `select` with its `value` on click or Enter/Space
+ * and reflects `selected` to `aria-selected`; the host owns the list.
+ */
+export class BoxContactDatalistItemElement extends BaseElement {
+    static get observedAttributes() {
+        return ["disabled", "email", "name", "selected", "src", "value"];
+    }
+    itemEl;
+    avatarEl;
+    nameEl;
+    emailEl;
+    get name() {
+        return this.getAttribute("name") ?? "";
+    }
+    set name(value) {
+        this.setAttribute("name", value);
+    }
+    get email() {
+        return this.getAttribute("email") ?? "";
+    }
+    set email(value) {
+        this.setAttribute("email", value);
+    }
+    get src() {
+        return this.getAttribute("src") ?? "";
+    }
+    set src(value) {
+        this.setAttribute("src", value);
+    }
+    get value() {
+        return this.getAttribute("value") ?? this.email ?? this.name;
+    }
+    set value(value) {
+        this.setAttribute("value", value);
+    }
+    get selected() {
+        return this.hasAttribute("selected");
+    }
+    set selected(value) {
+        this.toggleAttribute("selected", value);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        this.toggleAttribute("disabled", value);
+    }
+    choose() {
+        if (this.disabled) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent("select", {
+            bubbles: true,
+            composed: true,
+            detail: { value: this.value },
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${contactStyles}</style>
+      <div part="item" role="option">
+        <span part="avatar" aria-hidden="true"></span>
+        <span part="body">
+          <span part="name"></span>
+          <span part="email" hidden></span>
+        </span>
+      </div>
+    `;
+        this.itemEl = this.shadowRoot.querySelector('[part="item"]');
+        this.avatarEl = this.shadowRoot.querySelector('[part="avatar"]');
+        this.nameEl = this.shadowRoot.querySelector('[part="name"]');
+        this.emailEl = this.shadowRoot.querySelector('[part="email"]');
+    }
+    setupListeners() {
+        this.itemEl.addEventListener("click", () => this.choose());
+        this.itemEl.addEventListener("keydown", event => {
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                this.choose();
+            }
+        });
+    }
+    update() {
+        if (!this.itemEl) {
+            return;
+        }
+        this.itemEl.setAttribute("aria-selected", this.selected ? "true" : "false");
+        if (this.disabled) {
+            this.itemEl.setAttribute("aria-disabled", "true");
+        }
+        else {
+            this.itemEl.removeAttribute("aria-disabled");
+        }
+        this.itemEl.dataset.selected = this.selected ? "true" : "false";
+        this.itemEl.dataset.disabled = this.disabled ? "true" : "false";
+        this.itemEl.tabIndex = this.disabled ? -1 : 0;
+        const existingImage = this.avatarEl.querySelector('[part="avatar-image"]');
+        const existingFallback = this.avatarEl.querySelector('[part="avatar-fallback"]');
+        if (this.src) {
+            existingFallback?.remove();
+            const image = existingImage ?? document.createElement("img");
+            image.setAttribute("part", "avatar-image");
+            image.src = this.src;
+            image.alt = "";
+            if (!existingImage) {
+                this.avatarEl.append(image);
+            }
+        }
+        else {
+            existingImage?.remove();
+            const fallbackEl = existingFallback ?? document.createElement("span");
+            fallbackEl.setAttribute("part", "avatar-fallback");
+            fallbackEl.textContent = initialsFromName(this.name) || "?";
+            if (!existingFallback) {
+                this.avatarEl.append(fallbackEl);
+            }
+        }
+        this.nameEl.textContent = this.name;
+        if (this.email) {
+            this.emailEl.hidden = false;
+            this.emailEl.textContent = this.email;
+        }
+        else {
+            this.emailEl.hidden = true;
+            this.emailEl.textContent = "";
+        }
+    }
+}
+export const defineBoxContactDatalistItemElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxContactDatalistItemElement);
+    return BoxContactDatalistItemElement;
+};

package/dist/components/identity/persona.d.ts

@@ -0,0 +1,28 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxPersonaElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private avatarEl;
+    private nameEl;
+    private descriptionEl;
+    private statusEl;
+    get initials(): string;
+    set initials(value: string);
+    get name(): string;
+    set name(value: string);
+    get size(): number;
+    set size(value: number);
+    get src(): string;
+    set src(value: string);
+    get status(): string;
+    set status(value: string);
+    get subtitle(): string;
+    set subtitle(value: string);
+    get description(): string;
+    set description(value: string);
+    get tone(): string;
+    set tone(value: string);
+    protected renderTemplate(): void;
+    protected update(): void;
+    private showAvatarFallback;
+}
+export declare const defineBoxPersonaElement: (tagName?: string) => typeof BoxPersonaElement;

package/dist/components/identity/persona.js

@@ -0,0 +1,272 @@
+import { BaseElement } from "../../core/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-persona";
+const DEFAULT_SIZE = 40;
+const resolveSize = (raw, fallback = DEFAULT_SIZE) => {
+    const parsed = Number(raw ?? String(fallback));
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+};
+const initialsFromName = (name) => name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map(segment => segment[0] ?? "")
+    .join("")
+    .toUpperCase();
+const personaStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="persona"] {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.4rem 0.5rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 80%, var(--boe-token-surface-surface, #ffffff) 20%);
+    border-radius: ${boeRadius.large};
+    background: var(--boe-token-surface-surface, #ffffff);
+  }
+
+  [part="avatar"] {
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 76%, var(--boe-token-surface-surface, #ffffff) 24%);
+    background: var(--boe-token-surface-surface-secondary, #fbfbfb);
+    box-shadow: none;
+  }
+
+  [part="image"] {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  [part="fallback"] {
+    font-weight: 700;
+    color: var(--boe-token-text-text, #222222);
+    font-size: calc(var(--avatar-size, ${DEFAULT_SIZE}px) * 0.4);
+  }
+
+  [part="image"][hidden] {
+    display: none;
+  }
+
+  [part="avatar"][data-tone="informative"] {
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, var(--boe-token-surface-surface, #ffffff) 82%);
+  }
+
+  [part="avatar"][data-tone="success"] {
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 18%, var(--boe-token-surface-surface, #ffffff) 82%);
+  }
+
+  [part="meta"] {
+    min-inline-size: 0;
+    display: grid;
+    gap: 0.12rem;
+  }
+
+  [part="name"] {
+    font-size: 0.94rem;
+    line-height: 1.25;
+  }
+
+  [part~="description"] {
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    line-height: 1.35;
+  }
+
+  [part~="description"][hidden] {
+    display: none;
+  }
+
+  [part="status"] {
+    padding: 0.16rem 0.45rem;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--boe-token-surface-item-surface-selected, #f2f7fd) 78%, var(--boe-token-surface-surface, #ffffff) 22%);
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+
+  [part="status"][hidden] {
+    display: none;
+  }
+
+  [part="status"][data-tone="info"],
+  [part="status"][data-tone="informative"] {
+    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);
+  }
+
+  [part="status"][data-tone="success"] {
+    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) 72%, var(--boe-token-text-text, #222222) 28%);
+  }
+
+  [part="status"][data-tone="error"] {
+    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) 72%, var(--boe-token-text-text, #222222) 28%);
+  }
+
+  [part="status"][data-tone="warning"],
+  [part="status"][data-tone="inprogress"] {
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 16%, var(--boe-token-surface-surface, #ffffff) 84%);
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 58%, var(--boe-token-text-text, #222222) 42%);
+  }
+`;
+export class BoxPersonaElement extends BaseElement {
+    static get observedAttributes() {
+        return ["description", "initials", "name", "size", "src", "status", "subtitle", "tone"];
+    }
+    avatarEl;
+    nameEl;
+    descriptionEl;
+    statusEl;
+    get initials() {
+        return this.getAttribute("initials") ?? initialsFromName(this.name);
+    }
+    set initials(value) {
+        this.setAttribute("initials", value);
+    }
+    get name() {
+        return this.getAttribute("name") ?? "";
+    }
+    set name(value) {
+        this.setAttribute("name", value);
+    }
+    get size() {
+        return resolveSize(this.getAttribute("size"));
+    }
+    set size(value) {
+        this.setAttribute("size", String(value));
+    }
+    get src() {
+        return this.getAttribute("src") ?? "";
+    }
+    set src(value) {
+        this.setAttribute("src", value);
+    }
+    get status() {
+        return this.getAttribute("status") ?? "";
+    }
+    set status(value) {
+        this.setAttribute("status", value);
+    }
+    get subtitle() {
+        return this.getAttribute("subtitle") ?? this.description;
+    }
+    set subtitle(value) {
+        this.setAttribute("subtitle", value);
+    }
+    get description() {
+        return this.getAttribute("description") ?? this.getAttribute("subtitle") ?? "";
+    }
+    set description(value) {
+        this.setAttribute("description", value);
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "neutral";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${personaStyles}</style>
+      <div part="persona">
+        <div part="avatar"></div>
+        <div part="meta">
+          <strong part="name"></strong>
+          <span part="description subtitle" hidden></span>
+        </div>
+        <span part="status" hidden></span>
+      </div>
+    `;
+        this.avatarEl = this.shadowRoot.querySelector('[part="avatar"]');
+        this.nameEl = this.shadowRoot.querySelector('[part="name"]');
+        this.descriptionEl = this.shadowRoot.querySelector('[part~="description"]');
+        this.statusEl = this.shadowRoot.querySelector('[part="status"]');
+    }
+    update() {
+        if (!this.avatarEl) {
+            return;
+        }
+        const size = this.size;
+        const fallback = this.initials || "?";
+        this.avatarEl.dataset.tone = this.tone;
+        this.avatarEl.style.setProperty("--avatar-size", `${size}px`);
+        this.avatarEl.style.width = `${size}px`;
+        this.avatarEl.style.height = `${size}px`;
+        const existingImage = this.avatarEl.querySelector('[part="image"]');
+        const existingFallback = this.avatarEl.querySelector('[part="fallback"]');
+        const nextSrc = this.src;
+        if (nextSrc) {
+            const image = existingImage ?? document.createElement("img");
+            image.setAttribute("part", "image");
+            image.alt = this.name;
+            const currentSrc = image.getAttribute("src");
+            if (currentSrc !== nextSrc) {
+                image.src = nextSrc;
+                image.hidden = false;
+                image.onerror = () => {
+                    image.hidden = true;
+                    this.showAvatarFallback(existingFallback, fallback);
+                };
+                image.onload = () => {
+                    image.hidden = false;
+                    this.avatarEl.querySelector('[part="fallback"]')?.remove();
+                };
+            }
+            if (!existingImage) {
+                this.avatarEl.append(image);
+            }
+        }
+        else {
+            existingImage?.remove();
+            this.showAvatarFallback(existingFallback, fallback);
+        }
+        this.nameEl.textContent = this.name;
+        if (this.description) {
+            this.descriptionEl.hidden = false;
+            this.descriptionEl.textContent = this.description;
+        }
+        else {
+            this.descriptionEl.hidden = true;
+            this.descriptionEl.textContent = "";
+        }
+        this.statusEl.dataset.tone = this.tone;
+        if (this.status) {
+            this.statusEl.hidden = false;
+            this.statusEl.textContent = this.status;
+        }
+        else {
+            this.statusEl.hidden = true;
+            this.statusEl.textContent = "";
+        }
+    }
+    showAvatarFallback(existingFallback, fallback) {
+        const fallbackEl = existingFallback ?? document.createElement("span");
+        fallbackEl.setAttribute("part", "fallback");
+        fallbackEl.textContent = fallback;
+        if (!existingFallback) {
+            this.avatarEl.append(fallbackEl);
+        }
+    }
+}
+export const defineBoxPersonaElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxPersonaElement);
+    return BoxPersonaElement;
+};

package/dist/components/layout/app-shell.d.ts

@@ -0,0 +1,26 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxAppShellElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private shellEl;
+    private titleEl;
+    private navEl;
+    private asideEl;
+    private footerEl;
+    private navSlot;
+    private asideSlot;
+    private footerSlot;
+    private slotObserver;
+    get heading(): string;
+    set heading(value: string);
+    get navLabel(): string;
+    set navLabel(value: string);
+    get asideLabel(): string;
+    set asideLabel(value: string);
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    disconnectedCallback(): void;
+    private hasNamedSlotContent;
+    private syncLandmarkVisibility;
+    protected update(): void;
+}
+export declare const defineBoxAppShellElement: (tagName?: string) => typeof BoxAppShellElement;