@unofficialbox/box-open-elements 0.2.1 → 0.3.0

package/dist/components/collections/thumbnail-card.d.ts

@@ -0,0 +1,19 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxThumbnailCardElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private cardEl;
+    private titleEl;
+    private subtitleEl;
+    get cardTitle(): string;
+    set cardTitle(value: string);
+    get subtitle(): string;
+    set subtitle(value: string);
+    /** When set, the card is a button: focusable, keyboard-activated, emits `activate`. */
+    get interactive(): boolean;
+    set interactive(value: boolean);
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private activate;
+    protected update(): void;
+}
+export declare const defineBoxThumbnailCardElement: (tagName?: string) => typeof BoxThumbnailCardElement;

package/dist/components/collections/thumbnail-card.js

@@ -0,0 +1,210 @@
+import { BaseElement } from "../../core/index.js";
+import { boePanel, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-thumbnail-card";
+/** Rich file/grid card — box-ui-elements `ThumbnailCard`. */
+const thumbnailCardStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="card"] {
+    display: grid;
+    grid-template-rows: auto auto;
+    width: 100%;
+    min-width: 160px;
+    border: ${boePanel.border};
+    border-radius: ${boeRadius.large};
+    background: var(--boe-token-surface-surface, #ffffff);
+    overflow: hidden;
+    transition:
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  :host([interactive]) [part="card"] {
+    cursor: pointer;
+  }
+
+  :host([highlight-on-hover]) [part="card"]:hover,
+  :host([interactive]) [part="card"]:hover {
+    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
+  }
+
+  [part="card"]:focus-visible {
+    outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5);
+    outline-offset: 2px;
+  }
+
+  [part="thumbnail"] {
+    display: grid;
+    place-items: center;
+    aspect-ratio: 16 / 10;
+    background: var(--boe-token-surface-surface-secondary, #f4f4f4);
+    overflow: hidden;
+  }
+
+  [part="thumbnail"] ::slotted(img) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  [part="details"] {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: ${boeSpace[2]};
+    padding: ${boeSpace[3]};
+  }
+
+  [part="icon"] {
+    display: inline-flex;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="icon"]:not(:has(*)) {
+    display: none;
+  }
+
+  [part="text"] {
+    min-width: 0;
+    display: grid;
+    gap: 2px;
+  }
+
+  [part="title"] {
+    font-size: ${boeSpace[3]};
+    font-weight: 600;
+    color: var(--boe-token-text-text, #222222);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [part="subtitle"] {
+    font-size: 12px;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [part="subtitle"][hidden] {
+    display: none;
+  }
+
+  [part="action"] {
+    display: inline-flex;
+  }
+
+  [part="action"]:not(:has(*)) {
+    display: none;
+  }
+`;
+export class BoxThumbnailCardElement extends BaseElement {
+    static get observedAttributes() {
+        return ["title", "subtitle", "interactive", "highlight-on-hover"];
+    }
+    cardEl;
+    titleEl;
+    subtitleEl;
+    get cardTitle() {
+        return this.getAttribute("title") ?? "";
+    }
+    set cardTitle(value) {
+        this.setAttribute("title", value);
+    }
+    get subtitle() {
+        return this.getAttribute("subtitle") ?? "";
+    }
+    set subtitle(value) {
+        if (value) {
+            this.setAttribute("subtitle", value);
+        }
+        else {
+            this.removeAttribute("subtitle");
+        }
+    }
+    /** When set, the card is a button: focusable, keyboard-activated, emits `activate`. */
+    get interactive() {
+        return this.hasAttribute("interactive");
+    }
+    set interactive(value) {
+        this.toggleAttribute("interactive", Boolean(value));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${thumbnailCardStyles}</style>
+      <div part="card">
+        <div part="thumbnail"><slot name="thumbnail"></slot></div>
+        <div part="details">
+          <span part="icon"><slot name="icon"></slot></span>
+          <div part="text">
+            <div part="title"></div>
+            <div part="subtitle"></div>
+          </div>
+          <span part="action"><slot name="action"></slot></span>
+        </div>
+      </div>
+    `;
+        this.cardEl = this.shadowRoot.querySelector('[part="card"]');
+        this.titleEl = this.shadowRoot.querySelector('[part="title"]');
+        this.subtitleEl = this.shadowRoot.querySelector('[part="subtitle"]');
+    }
+    setupListeners() {
+        this.cardEl.addEventListener("click", () => this.activate());
+        this.cardEl.addEventListener("keydown", event => {
+            if (!this.interactive) {
+                return;
+            }
+            const key = event.key;
+            if (key === "Enter" || key === " ") {
+                event.preventDefault();
+                this.activate();
+            }
+        });
+    }
+    activate() {
+        if (!this.interactive) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent("activate", {
+            bubbles: true,
+            composed: true,
+            detail: { title: this.cardTitle },
+        }));
+    }
+    update() {
+        if (!this.cardEl || !this.titleEl || !this.subtitleEl) {
+            return;
+        }
+        this.titleEl.textContent = this.cardTitle;
+        this.subtitleEl.textContent = this.subtitle;
+        this.subtitleEl.hidden = this.subtitle.length === 0;
+        if (this.interactive) {
+            this.cardEl.setAttribute("role", "button");
+            this.cardEl.setAttribute("tabindex", "0");
+            this.cardEl.setAttribute("aria-label", this.cardTitle);
+        }
+        else {
+            this.cardEl.removeAttribute("role");
+            this.cardEl.removeAttribute("tabindex");
+            this.cardEl.removeAttribute("aria-label");
+        }
+    }
+}
+export const defineBoxThumbnailCardElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxThumbnailCardElement);
+    return BoxThumbnailCardElement;
+};

package/dist/components/feedback/badgeable.d.ts

@@ -0,0 +1,14 @@
+import { BaseElement } from "../../core/index.js";
+/**
+ * Overlays badges on the corners of its content — the box-ui-elements
+ * `Badgeable` wrapper. The subject goes in the default slot; each corner is a
+ * named slot (`top-left`, `top-right`, `bottom-left`, `bottom-right`). Corners
+ * with no assigned content are hidden so they don't capture pointer events.
+ */
+export declare class BoxBadgeableElement extends BaseElement {
+    private corners;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxBadgeableElement: (tagName?: string) => typeof BoxBadgeableElement;

package/dist/components/feedback/badgeable.js

@@ -0,0 +1,84 @@
+import { BaseElement } from "../../core/index.js";
+const DEFAULT_TAG_NAME = "box-badgeable";
+/** Corners a badge can be pinned to, matching box-ui-elements' Badgeable. */
+const CORNERS = ["top-left", "top-right", "bottom-left", "bottom-right"];
+const badgeableStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="container"] {
+    position: relative;
+    display: inline-flex;
+  }
+
+  [part="badge"] {
+    position: absolute;
+    z-index: 1;
+    display: inline-flex;
+    pointer-events: none;
+  }
+
+  /* Slotted badge content stays interactive (e.g. a dismiss button). */
+  [part="badge"] ::slotted(*) {
+    pointer-events: auto;
+  }
+
+  [part="badge"][hidden] {
+    display: none;
+  }
+
+  [part="badge"][data-corner="top-left"] { inset-block-start: 0; inset-inline-start: 0; transform: translate(-35%, -35%); }
+  [part="badge"][data-corner="top-right"] { inset-block-start: 0; inset-inline-end: 0; transform: translate(35%, -35%); }
+  [part="badge"][data-corner="bottom-left"] { inset-block-end: 0; inset-inline-start: 0; transform: translate(-35%, 35%); }
+  [part="badge"][data-corner="bottom-right"] { inset-block-end: 0; inset-inline-end: 0; transform: translate(35%, 35%); }
+`;
+/**
+ * Overlays badges on the corners of its content — the box-ui-elements
+ * `Badgeable` wrapper. The subject goes in the default slot; each corner is a
+ * named slot (`top-left`, `top-right`, `bottom-left`, `bottom-right`). Corners
+ * with no assigned content are hidden so they don't capture pointer events.
+ */
+export class BoxBadgeableElement extends BaseElement {
+    corners = new Map();
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${badgeableStyles}</style>
+      <span part="container">
+        <slot></slot>
+        ${CORNERS.map(corner => `<span part="badge" data-corner="${corner}" hidden><slot name="${corner}"></slot></span>`).join("")}
+      </span>
+    `;
+        this.corners.clear();
+        for (const corner of CORNERS) {
+            const wrapper = this.shadowRoot.querySelector(`[data-corner="${corner}"]`);
+            const slot = wrapper.querySelector("slot");
+            this.corners.set(corner, { wrapper, slot });
+        }
+    }
+    setupListeners() {
+        for (const { wrapper, slot } of this.corners.values()) {
+            slot.addEventListener("slotchange", () => {
+                wrapper.hidden = slot.assignedNodes({ flatten: true }).length === 0;
+            });
+        }
+    }
+    update() {
+        for (const { wrapper, slot } of this.corners.values()) {
+            wrapper.hidden = slot.assignedNodes({ flatten: true }).length === 0;
+        }
+    }
+}
+export const defineBoxBadgeableElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxBadgeableElement);
+    return BoxBadgeableElement;
+};

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

@@ -5,6 +5,7 @@ export declare class BoxDateFieldElement extends FormAssociatedElement {
     private valueInternal;
     private inputEl;
     private labelEl;
+    private descriptionEl;
     private errorEl;
     get disabled(): boolean;
     set disabled(value: boolean);

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

@@ -1,4 +1,4 @@
-import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } from "../../core/index.js";
 import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
@@ -45,11 +45,12 @@ const dateFieldStyles = `
   }
 
   ${boeFormFieldErrorStyles}
+  ${boeFormFieldSupportStyles}
 `;
 export class BoxDateFieldElement extends FormAssociatedElement {
     static get observedAttributes() {
         return [
-            ...FormAssociatedElement.formObservedAttributes,
+            ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
             "label",
             "max",
@@ -60,6 +61,7 @@ export class BoxDateFieldElement extends FormAssociatedElement {
     valueInternal = "";
     inputEl;
     labelEl;
+    descriptionEl;
     errorEl;
     get disabled() {
         return this.hasAttribute("disabled");
@@ -135,11 +137,13 @@ export class BoxDateFieldElement extends FormAssociatedElement {
       <style>${dateFieldStyles}</style>
       <label part="field">
         <span part="label"></span>
+        ${formDescriptionMarkup()}
         <input type="date" part="input" />
         ${formErrorMessageMarkup()}
       </label>
     `;
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
         this.inputEl = this.shadowRoot.querySelector('[part="input"]');
         this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
     }
@@ -174,6 +178,7 @@ export class BoxDateFieldElement extends FormAssociatedElement {
         else {
             this.inputEl.removeAttribute("disabled");
         }
+        this.applyFieldSupport(this.labelEl, this.inputEl, this.descriptionEl);
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }

package/dist/components/forms/pill-selector-dropdown.d.ts

@@ -29,6 +29,17 @@ export declare class BoxPillSelectorDropdownElement extends FormAssociatedElemen
     set label(value: string);
     get placeholder(): string;
     set placeholder(value: string);
+    /** Allow creating pills from free-typed text (collaborator / email input). */
+    get allowCustom(): boolean;
+    set allowCustom(value: boolean);
+    /** Optional regex a custom entry must match (e.g. an email pattern). */
+    get pattern(): string;
+    set pattern(value: string);
+    private customInputEl;
+    /** A custom entry is valid when non-empty and (if set) matches `pattern`. */
+    private isValidCustom;
+    /** Add a validated custom pill; flag the input and emit `invalid-entry` otherwise. */
+    private tryAddCustom;
     get options(): PillOption[];
     set options(value: PillOption[]);
     get value(): string[];

package/dist/components/forms/pill-selector-dropdown.js

@@ -67,6 +67,31 @@ const pillSelectorStyles = `
     display: inline-block;
   }
 
+  [part="custom-input"] {
+    flex: 1 1 6rem;
+    min-width: 6rem;
+    appearance: none;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--boe-token-text-text, #222222);
+    font: inherit;
+    font-size: 0.85rem;
+    padding: 0.3rem 0.2rem;
+  }
+
+  [part="custom-input"][hidden] {
+    display: none;
+  }
+
+  [part="custom-input"][aria-invalid="true"] {
+    color: var(--boe-token-surface-status-surface-error, #ed3757);
+  }
+
+  [part="trigger"][hidden] {
+    display: none;
+  }
+
   [part="trigger"] {
     appearance: none;
     display: inline-flex;
@@ -152,6 +177,8 @@ export class BoxPillSelectorDropdownElement extends FormAssociatedElement {
             "options",
             "placeholder",
             "value",
+            "allow-custom",
+            "pattern",
         ];
     }
     valueInternal = [];
@@ -188,6 +215,58 @@ export class BoxPillSelectorDropdownElement extends FormAssociatedElement {
     set placeholder(value) {
         this.setAttribute("placeholder", value);
     }
+    /** Allow creating pills from free-typed text (collaborator / email input). */
+    get allowCustom() {
+        return this.hasAttribute("allow-custom");
+    }
+    set allowCustom(value) {
+        this.toggleAttribute("allow-custom", Boolean(value));
+    }
+    /** Optional regex a custom entry must match (e.g. an email pattern). */
+    get pattern() {
+        return this.getAttribute("pattern") ?? "";
+    }
+    set pattern(value) {
+        if (value) {
+            this.setAttribute("pattern", value);
+        }
+        else {
+            this.removeAttribute("pattern");
+        }
+    }
+    customInputEl = null;
+    /** A custom entry is valid when non-empty and (if set) matches `pattern`. */
+    isValidCustom(text) {
+        const trimmed = text.trim();
+        if (!trimmed) {
+            return false;
+        }
+        const pattern = this.pattern;
+        if (!pattern) {
+            return true;
+        }
+        try {
+            return new RegExp(`^(?:${pattern})$`).test(trimmed);
+        }
+        catch {
+            return true;
+        }
+    }
+    /** Add a validated custom pill; flag the input and emit `invalid-entry` otherwise. */
+    tryAddCustom(text) {
+        const trimmed = text.trim();
+        if (!trimmed) {
+            return false;
+        }
+        if (!this.isValidCustom(trimmed)) {
+            this.customInputEl?.setAttribute("aria-invalid", "true");
+            this.dispatchEvent(new CustomEvent("invalid-entry", { bubbles: true, composed: true, detail: { value: trimmed } }));
+            return false;
+        }
+        this.customInputEl?.setAttribute("aria-invalid", "false");
+        this.addValue(trimmed);
+        return true;
+    }
     get options() {
         const raw = this.getAttribute("options");
         if (!raw) {
@@ -354,6 +433,7 @@ export class BoxPillSelectorDropdownElement extends FormAssociatedElement {
       <style>${pillSelectorStyles}</style>
       <div part="field" role="group">
         <span part="pills"></span>
+        <input part="custom-input" type="text" hidden />
         <div part="dropdown">
           <button type="button" part="trigger" aria-haspopup="menu"></button>
         </div>
@@ -362,6 +442,7 @@ export class BoxPillSelectorDropdownElement extends FormAssociatedElement {
     `;
         this.fieldEl = this.shadowRoot.querySelector('[part="field"]');
         this.pillsEl = this.shadowRoot.querySelector('[part="pills"]');
+        this.customInputEl = this.shadowRoot.querySelector('[part="custom-input"]');
         this.dropdownEl = this.shadowRoot.querySelector('[part="dropdown"]');
         this.triggerEl = this.shadowRoot.querySelector('[part="trigger"]');
         this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
@@ -393,6 +474,42 @@ export class BoxPillSelectorDropdownElement extends FormAssociatedElement {
             }
             this.removeValue(remove.dataset.value ?? "");
         });
+        // Custom pill entry: Enter/comma commit the typed value; Backspace on an
+        // empty input removes the last pill; paste splits on commas/newlines.
+        this.customInputEl?.addEventListener("keydown", event => {
+            const input = event.target;
+            const key = event.key;
+            if (key === "Enter" || key === ",") {
+                event.preventDefault();
+                if (this.tryAddCustom(input.value)) {
+                    input.value = "";
+                }
+            }
+            else if (key === "Backspace" && input.value === "" && this.valueInternal.length) {
+                event.preventDefault();
+                this.removeValue(this.valueInternal[this.valueInternal.length - 1]);
+            }
+            else {
+                input.setAttribute("aria-invalid", "false");
+            }
+        });
+        this.customInputEl?.addEventListener("paste", event => {
+            const text = event.clipboardData?.getData("text") ?? "";
+            if (!/[,\n;]/.test(text)) {
+                return; // single token — let it type normally
+            }
+            event.preventDefault();
+            for (const piece of text.split(/[,\n;]+/)) {
+                this.tryAddCustom(piece);
+            }
+            event.target.value = "";
+        });
+        // Commit a half-typed entry when focus leaves the input.
+        this.customInputEl?.addEventListener("blur", () => {
+            if (this.customInputEl && this.tryAddCustom(this.customInputEl.value)) {
+                this.customInputEl.value = "";
+            }
+        });
         this.dropdownEl.addEventListener("click", event => {
             const option = event.target.closest('[part="option"]');
             if (!option || !this.dropdownEl.contains(option)) {
@@ -439,6 +556,16 @@ export class BoxPillSelectorDropdownElement extends FormAssociatedElement {
         this.fieldEl.setAttribute("aria-label", this.label);
         this.triggerEl.textContent = `+ ${this.placeholder}`;
         this.triggerEl.setAttribute("aria-expanded", String(this.open));
+        // Free-text entry input (collaborator / email token input).
+        if (this.customInputEl) {
+            const custom = this.allowCustom;
+            this.customInputEl.hidden = !custom;
+            this.customInputEl.placeholder = this.placeholder;
+            this.customInputEl.setAttribute("aria-label", `${this.label} — type to add`);
+            // With a free-text input, the +Add trigger is only useful when there are
+            // still fixed options to pick; hide it otherwise to keep the field clean.
+            this.triggerEl.hidden = custom && this.availableOptions().length === 0;
+        }
         this.pillsEl.innerHTML = this.valueInternal
             .map(value => `
           <span part="pill" data-value="${escapeHtml(value)}">

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

@@ -5,6 +5,7 @@ export declare class BoxSearchFieldElement extends FormAssociatedElement {
     private valueInternal;
     private inputEl;
     private labelEl;
+    private descriptionEl;
     private submitEl;
     private clearEl;
     private errorEl;

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

@@ -1,4 +1,4 @@
-import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, 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-search-field";
@@ -122,11 +122,12 @@ const searchFieldStyles = `
   }
 
   ${boeFormFieldErrorStyles}
+  ${boeFormFieldSupportStyles}
 `;
 export class BoxSearchFieldElement extends FormAssociatedElement {
     static get observedAttributes() {
         return [
-            ...FormAssociatedElement.formObservedAttributes,
+            ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
             "label",
             "placeholder",
@@ -136,6 +137,7 @@ export class BoxSearchFieldElement extends FormAssociatedElement {
     valueInternal = "";
     inputEl;
     labelEl;
+    descriptionEl;
     submitEl;
     clearEl;
     errorEl;
@@ -206,6 +208,7 @@ export class BoxSearchFieldElement extends FormAssociatedElement {
       <style>${searchFieldStyles}</style>
       <label part="field">
         <span part="label"></span>
+        ${formDescriptionMarkup()}
         <div part="input-shell">
           <input type="search" part="input" />
           <button type="button" part="submit">Search</button>
@@ -215,6 +218,7 @@ export class BoxSearchFieldElement extends FormAssociatedElement {
       </label>
     `;
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
         this.inputEl = this.shadowRoot.querySelector('[part="input"]');
         this.submitEl = this.shadowRoot.querySelector('[part="submit"]');
         this.clearEl = this.shadowRoot.querySelector('[part="clear"]');
@@ -280,6 +284,7 @@ export class BoxSearchFieldElement extends FormAssociatedElement {
             this.submitEl.removeAttribute("disabled");
         }
         this.clearEl.disabled = this.disabled || this.valueInternal.length === 0;
+        this.applyFieldSupport(this.labelEl, this.inputEl, this.descriptionEl);
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }

package/dist/components/forms/select.d.ts

@@ -5,6 +5,7 @@ export declare class BoxSelectElement extends FormAssociatedElement {
     private valueInternal;
     private selectEl;
     private labelEl;
+    private descriptionEl;
     private errorEl;
     get value(): string;
     set value(nextValue: string);