@unofficialbox/box-open-elements 0.1.0

package/dist/components/forms/text-field.js

@@ -0,0 +1,151 @@
+import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { boeControl, boeInputControlStyles, boeSpace } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-text-field";
+/** Input chrome tracks BUE `@mixin box-inputs` (`src/styles/_inputs.scss`). */
+const textFieldStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="field"] {
+    display: grid;
+    gap: ${boeSpace[2]};
+  }
+
+  [part="label"] {
+    font-size: ${boeControl.fontSize};
+    font-weight: 700;
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="input"] {
+    appearance: none;
+    width: 100%;
+    font: inherit;
+    font-size: ${boeControl.fontSize};
+  }
+
+  ${boeInputControlStyles('[part="input"]')}
+
+  [part="input"]::placeholder {
+    color: var(--boe-token-text-text-placeholder, #909090);
+  }
+
+  ${boeFormFieldErrorStyles}
+`;
+export class BoxTextFieldElement extends FormAssociatedElement {
+    static get observedAttributes() {
+        return [
+            ...FormAssociatedElement.formObservedAttributes,
+            "disabled",
+            "label",
+            "placeholder",
+            "value",
+        ];
+    }
+    valueInternal = "";
+    inputEl;
+    labelEl;
+    errorEl;
+    get value() {
+        return this.valueInternal;
+    }
+    set value(nextValue) {
+        this.valueInternal = nextValue;
+        this.setAttribute("value", nextValue);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        this.toggleAttribute("disabled", Boolean(value));
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Input";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get placeholder() {
+        return this.getAttribute("placeholder") ?? "";
+    }
+    set placeholder(value) {
+        this.setAttribute("placeholder", value);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value") {
+            this.valueInternal = this.getAttribute("value") ?? "";
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    getFormValue() {
+        return this.valueInternal;
+    }
+    restoreFormValue(value) {
+        const next = typeof value === "string" ? value : "";
+        this.valueInternal = next;
+        this.setAttribute("value", next);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${textFieldStyles}</style>
+      <label part="field">
+        <span part="label"></span>
+        <input type="text" part="input" />
+        ${formErrorMessageMarkup()}
+      </label>
+    `;
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.inputEl = this.shadowRoot.querySelector('[part="input"]');
+        this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+    }
+    setupListeners() {
+        this.inputEl.addEventListener("input", event => {
+            const nextValue = event.currentTarget.value;
+            this.valueInternal = nextValue;
+            this.setAttribute("value", nextValue);
+            this.syncFormAssociation();
+            this.dispatchEvent(new CustomEvent("value-changed", {
+                bubbles: true,
+                composed: true,
+                detail: { value: nextValue },
+            }));
+        });
+    }
+    update() {
+        if (!this.inputEl || !this.labelEl || !this.errorEl) {
+            return;
+        }
+        this.labelEl.textContent = this.label;
+        this.inputEl.placeholder = this.placeholder;
+        if (this.shadowRoot?.activeElement !== this.inputEl) {
+            this.inputEl.value = this.valueInternal;
+        }
+        if (this.disabled) {
+            this.inputEl.setAttribute("disabled", "");
+        }
+        else {
+            this.inputEl.removeAttribute("disabled");
+        }
+        this.applyInvalidState(this.inputEl, this.errorEl);
+    }
+}
+export const defineBoxTextFieldElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxTextFieldElement);
+    return BoxTextFieldElement;
+};

package/dist/components/forms/time-field.d.ts

@@ -0,0 +1,29 @@
+import { FormAssociatedElement } from "../../core/index.js";
+import type { FormValue } from "../../core/index.js";
+export declare class BoxTimeFieldElement extends FormAssociatedElement {
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private inputEl;
+    private labelEl;
+    private errorEl;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get max(): string;
+    set max(value: string);
+    get min(): string;
+    set min(value: string);
+    get step(): string;
+    set step(value: string);
+    get value(): string;
+    set value(nextValue: string);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    protected getFormValue(): FormValue;
+    protected restoreFormValue(value: FormValue): void;
+    private syncValue;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxTimeFieldElement: (tagName?: string) => typeof BoxTimeFieldElement;

package/dist/components/forms/time-field.js

@@ -0,0 +1,203 @@
+import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-time-field";
+const timeFieldStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="field"] {
+    display: grid;
+    gap: 0.45rem;
+  }
+
+  [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="input"] {
+    appearance: none;
+    font: inherit;
+    color: var(--boe-token-text-text, #222222);
+    accent-color: var(--boe-token-surface-surface-brand, #0061d5);
+    padding: 0.45rem 0.7rem;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 78%, var(--boe-token-surface-surface, #ffffff) 22%);
+    border-radius: ${boeRadius.control};
+    background: var(--boe-token-surface-surface, #ffffff);
+    transition:
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      background ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="input"]:hover:not(:disabled) {
+    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+  }
+
+  [part="input"]:focus-visible {
+    outline: none;
+    border-color: var(--boe-token-surface-surface-brand, #0061d5);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
+  }
+
+  [part="input"]:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  ${boeFormFieldErrorStyles}
+`;
+export class BoxTimeFieldElement extends FormAssociatedElement {
+    static get observedAttributes() {
+        return [
+            ...FormAssociatedElement.formObservedAttributes,
+            "disabled",
+            "label",
+            "max",
+            "min",
+            "step",
+            "value",
+        ];
+    }
+    valueInternal = "";
+    inputEl;
+    labelEl;
+    errorEl;
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Time";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get max() {
+        return this.getAttribute("max") ?? "";
+    }
+    set max(value) {
+        this.setAttribute("max", value);
+    }
+    get min() {
+        return this.getAttribute("min") ?? "";
+    }
+    set min(value) {
+        this.setAttribute("min", value);
+    }
+    get step() {
+        return this.getAttribute("step") ?? "60";
+    }
+    set step(value) {
+        this.setAttribute("step", value);
+    }
+    get value() {
+        return this.valueInternal;
+    }
+    set value(nextValue) {
+        this.valueInternal = nextValue;
+        this.setAttribute("value", nextValue);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value") {
+            this.valueInternal = this.getAttribute("value") ?? "";
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    getFormValue() {
+        return this.valueInternal;
+    }
+    restoreFormValue(value) {
+        const next = typeof value === "string" ? value : "";
+        this.valueInternal = next;
+        this.setAttribute("value", next);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    syncValue(nextValue) {
+        this.valueInternal = nextValue;
+        this.setAttribute("value", nextValue);
+        this.syncFormAssociation();
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value: nextValue },
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${timeFieldStyles}</style>
+      <label part="field">
+        <span part="label"></span>
+        <input type="time" part="input" />
+        ${formErrorMessageMarkup()}
+      </label>
+    `;
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.inputEl = this.shadowRoot.querySelector('[part="input"]');
+        this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+    }
+    setupListeners() {
+        this.inputEl.addEventListener("input", event => {
+            this.syncValue(event.currentTarget.value);
+        });
+    }
+    update() {
+        if (!this.inputEl || !this.labelEl || !this.errorEl) {
+            return;
+        }
+        this.labelEl.textContent = this.label;
+        this.inputEl.step = this.step;
+        if (this.min) {
+            this.inputEl.min = this.min;
+        }
+        else {
+            this.inputEl.removeAttribute("min");
+        }
+        if (this.max) {
+            this.inputEl.max = this.max;
+        }
+        else {
+            this.inputEl.removeAttribute("max");
+        }
+        if (this.shadowRoot?.activeElement !== this.inputEl) {
+            this.inputEl.value = this.valueInternal;
+        }
+        if (this.disabled) {
+            this.inputEl.setAttribute("disabled", "");
+        }
+        else {
+            this.inputEl.removeAttribute("disabled");
+        }
+        this.applyInvalidState(this.inputEl, this.errorEl);
+    }
+}
+export const defineBoxTimeFieldElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxTimeFieldElement);
+    return BoxTimeFieldElement;
+};

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

@@ -0,0 +1,21 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxAvatarElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private avatarEl;
+    get alt(): string;
+    set alt(value: string);
+    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 tone(): string;
+    set tone(value: string);
+    protected renderTemplate(): void;
+    protected update(): void;
+    private showAvatarFallback;
+}
+export declare const defineBoxAvatarElement: (tagName?: string) => typeof BoxAvatarElement;

package/dist/components/identity/avatar.js

@@ -0,0 +1,191 @@
+import { BaseElement } from "../../core/index.js";
+const DEFAULT_TAG_NAME = "box-avatar";
+/** BUE default avatar size (`Avatar.scss` `.avatar`). */
+const DEFAULT_SIZE = 32;
+/** BUE `$avatar-colors` / `avatarColors` from box-ui-elements variables. */
+const AVATAR_COLORS = [
+    "#0061d5",
+    "#003c84",
+    "#6f6f6f",
+    "#222222",
+    "#4826c2",
+    "#9f3fed",
+];
+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 avatarColorFor = (seed) => {
+    if (!seed) {
+        return AVATAR_COLORS[0];
+    }
+    let hash = 0;
+    for (let i = 0; i < seed.length; i += 1) {
+        hash = (hash + seed.charCodeAt(i) * (i + 1)) % AVATAR_COLORS.length;
+    }
+    return AVATAR_COLORS[hash] ?? AVATAR_COLORS[0];
+};
+const avatarStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="avatar"] {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    overflow: hidden;
+    flex-grow: 0;
+    flex-shrink: 0;
+    border-radius: 100%;
+    border: 0;
+    background: var(--avatar-bg, #0061d5);
+    box-shadow: none;
+    user-select: none;
+  }
+
+  [part="image"] {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    border-radius: 100%;
+  }
+
+  [part="fallback"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    color: #ffffff;
+    line-height: 1;
+    letter-spacing: 0;
+    font-size: calc(var(--avatar-size, ${DEFAULT_SIZE}px) * 0.375);
+  }
+
+  [part="image"][hidden] {
+    display: none;
+  }
+`;
+export class BoxAvatarElement extends BaseElement {
+    static get observedAttributes() {
+        return ["alt", "initials", "name", "size", "src", "tone"];
+    }
+    avatarEl;
+    get alt() {
+        return this.getAttribute("alt") ?? this.name;
+    }
+    set alt(value) {
+        this.setAttribute("alt", value);
+    }
+    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 tone() {
+        return this.getAttribute("tone") ?? "neutral";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${avatarStyles}</style>
+      <div part="avatar"></div>
+    `;
+        this.avatarEl = this.shadowRoot.querySelector('[part="avatar"]');
+    }
+    update() {
+        if (!this.avatarEl) {
+            return;
+        }
+        const size = this.size;
+        const fallback = this.initials || "?";
+        const colorSeed = this.name || this.initials || this.alt || fallback;
+        this.avatarEl.dataset.tone = this.tone;
+        this.avatarEl.setAttribute("aria-label", this.alt || fallback);
+        this.avatarEl.style.setProperty("--avatar-size", `${size}px`);
+        this.avatarEl.style.setProperty("--avatar-bg", avatarColorFor(colorSeed));
+        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.alt;
+            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 {
+            if (existingImage) {
+                existingImage.remove();
+            }
+            this.showAvatarFallback(existingFallback, fallback);
+        }
+    }
+    showAvatarFallback(existingFallback, fallback) {
+        const fallbackEl = existingFallback ?? document.createElement("span");
+        fallbackEl.setAttribute("part", "fallback");
+        fallbackEl.textContent = fallback;
+        if (!existingFallback) {
+            this.avatarEl.append(fallbackEl);
+        }
+    }
+}
+export const defineBoxAvatarElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxAvatarElement);
+    return BoxAvatarElement;
+};

package/dist/components/identity/contact-datalist-item.d.ts

@@ -0,0 +1,31 @@
+import { BaseElement } from "../../core/index.js";
+/**
+ * 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 declare class BoxContactDatalistItemElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private itemEl;
+    private avatarEl;
+    private nameEl;
+    private emailEl;
+    get name(): string;
+    set name(value: string);
+    get email(): string;
+    set email(value: string);
+    get src(): string;
+    set src(value: string);
+    get value(): string;
+    set value(value: string);
+    get selected(): boolean;
+    set selected(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private choose;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxContactDatalistItemElement: (tagName?: string) => typeof BoxContactDatalistItemElement;