@unofficialbox/box-open-elements 0.2.1 → 0.4.0

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";
@@ -44,12 +44,56 @@ const dateFieldStyles = `
     border-color: var(--boe-token-surface-surface-brand, #0061d5);
   }
 
+  /* Control wrapper — layout-neutral until a clear button appears. */
+  [part="control"] {
+    position: relative;
+    display: block;
+  }
+
+  [part="control"] [part="input"] {
+    inline-size: 100%;
+    box-sizing: border-box;
+  }
+
+  /* Clear button sits just left of the native calendar indicator. */
+  [part="clear"] {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: 2rem;
+    transform: translateY(-50%);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    cursor: pointer;
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="control"][data-clearable="true"] [part="clear"] {
+    display: inline-flex;
+  }
+
+  [part="clear"] svg {
+    inline-size: 0.7rem;
+    block-size: 0.7rem;
+  }
+
+  ${boeNeutralInteractiveStyles('[part="clear"]')}
+
   ${boeFormFieldErrorStyles}
+  ${boeFormFieldSupportStyles}
 `;
 export class BoxDateFieldElement extends FormAssociatedElement {
     static get observedAttributes() {
         return [
-            ...FormAssociatedElement.formObservedAttributes,
+            ...FormAssociatedElement.fieldObservedAttributes,
+            "clearable",
             "disabled",
             "label",
             "max",
@@ -60,7 +104,17 @@ export class BoxDateFieldElement extends FormAssociatedElement {
     valueInternal = "";
     inputEl;
     labelEl;
+    descriptionEl;
     errorEl;
+    controlEl;
+    clearEl;
+    /** Shows a clear button that resets the value when a date is set. */
+    get clearable() {
+        return this.hasAttribute("clearable");
+    }
+    set clearable(value) {
+        this.toggleAttribute("clearable", Boolean(value));
+    }
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -135,18 +189,37 @@ export class BoxDateFieldElement extends FormAssociatedElement {
       <style>${dateFieldStyles}</style>
       <label part="field">
         <span part="label"></span>
-        <input type="date" part="input" />
+        ${formDescriptionMarkup()}
+        <span part="control">
+          <input type="date" part="input" />
+          <button type="button" part="clear" aria-label="Clear date" tabindex="-1">
+            <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
+          </button>
+        </span>
         ${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"]');
+        this.controlEl = this.shadowRoot.querySelector('[part="control"]');
+        this.clearEl = this.shadowRoot.querySelector('[part="clear"]');
     }
     setupListeners() {
         this.inputEl.addEventListener("input", event => {
             this.syncValue(event.currentTarget.value);
         });
+        this.clearEl.addEventListener("click", () => this.clear());
+    }
+    /** Reset the date to empty and emit value-changed. */
+    clear() {
+        if (this.disabled || !this.valueInternal) {
+            return;
+        }
+        this.inputEl.value = "";
+        this.syncValue("");
+        this.inputEl.focus();
     }
     update() {
         if (!this.inputEl || !this.labelEl || !this.errorEl) {
@@ -174,6 +247,10 @@ export class BoxDateFieldElement extends FormAssociatedElement {
         else {
             this.inputEl.removeAttribute("disabled");
         }
+        // Clear button only when clearable, enabled, and a value is present.
+        const showClear = this.clearable && !this.disabled && Boolean(this.valueInternal);
+        this.controlEl.dataset.clearable = showClear ? "true" : "false";
+        this.applyFieldSupport(this.labelEl, this.inputEl, this.descriptionEl);
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }

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

@@ -12,12 +12,16 @@ export declare class BoxDropdownElement extends FormAssociatedElement {
     private triggerEl;
     private errorEl;
     private menuEl;
+    private positionCleanup;
     private readonly focusRestore;
     private readonly onDocumentPointerDown;
     get disabled(): boolean;
     set disabled(value: boolean);
     get label(): string;
     set label(value: string);
+    get placement(): string;
+    set placement(value: string);
+    private resolvedPlacement;
     get items(): BoxDropdownItem[];
     set items(value: BoxDropdownItem[]);
     get value(): string;
@@ -33,6 +37,7 @@ export declare class BoxDropdownElement extends FormAssociatedElement {
     protected renderTemplate(): void;
     protected setupListeners(): void;
     protected update(): void;
+    private stopTracking;
 }
 export declare const defineBoxDropdownElement: (tagName?: string) => typeof BoxDropdownElement;
 export {};

package/dist/components/forms/dropdown.js

@@ -3,6 +3,7 @@ import { boeControl, boeOverlay, boeRadius, boeSpace } from "../../foundations/g
 import { FocusRestore, applyRovingTabindex, focusRovingItem, nextRovingIndex, } from "../../foundations/a11y/index.js";
 import { boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { parsePlacement, trackAnchor, } from "../../foundations/overlay/index.js";
 const DEFAULT_TAG_NAME = "box-dropdown";
 const escapeHtml = (value) => value
     .replaceAll("&", "&")
@@ -70,12 +71,14 @@ const dropdownStyles = `
     box-shadow: none;
   }
 
+  /* Positioned by JS (foundations/overlay) as position: fixed, so the menu
+     escapes ancestor overflow and flips/shifts to stay in the viewport. */
   [part="menu"] {
-    position: absolute;
-    inset-block-start: calc(100% + ${boeSpace[1]});
+    position: fixed;
+    inset-block-start: 0;
     inset-inline-start: 0;
     z-index: 20;
-    min-inline-size: max(100%, 200px);
+    min-inline-size: 200px;
     display: grid;
     gap: 0;
     padding: ${boeOverlay.padding};
@@ -139,6 +142,7 @@ export class BoxDropdownElement extends FormAssociatedElement {
             "disabled",
             "items",
             "label",
+            "placement",
             "value",
         ];
     }
@@ -148,6 +152,7 @@ export class BoxDropdownElement extends FormAssociatedElement {
     triggerEl;
     errorEl;
     menuEl = null;
+    positionCleanup = null;
     focusRestore = new FocusRestore();
     onDocumentPointerDown = (event) => {
         const path = event.composedPath();
@@ -173,6 +178,15 @@ export class BoxDropdownElement extends FormAssociatedElement {
     set label(value) {
         this.setAttribute("label", value);
     }
+    get placement() {
+        return this.getAttribute("placement") ?? "bottom-start";
+    }
+    set placement(value) {
+        this.setAttribute("placement", value);
+    }
+    resolvedPlacement() {
+        return parsePlacement(this.getAttribute("placement")) ?? { side: "bottom", align: "start" };
+    }
     get items() {
         const raw = this.getAttribute("items");
         if (!raw) {
@@ -220,6 +234,7 @@ export class BoxDropdownElement extends FormAssociatedElement {
     }
     disconnectedCallback() {
         document.removeEventListener("pointerdown", this.onDocumentPointerDown);
+        this.stopTracking();
         super.disconnectedCallback();
     }
     openMenu() {
@@ -387,13 +402,27 @@ export class BoxDropdownElement extends FormAssociatedElement {
             const items = this.menuItems();
             const selectedIndex = Math.max(0, items.findIndex(button => button.getAttribute("data-item-id") === this.valueInternal));
             applyRovingTabindex(items, selectedIndex);
+            // Match the trigger width, then position as a fixed overlay. Track once
+            // per open so repeated updates (e.g. value change) don't stack listeners.
+            this.menuEl.style.minInlineSize = `${Math.max(this.triggerEl.offsetWidth, 200)}px`;
+            if (!this.positionCleanup) {
+                this.positionCleanup = trackAnchor(this.triggerEl, this.menuEl, {
+                    placement: this.resolvedPlacement(),
+                    offset: 4,
+                });
+            }
         }
         else if (this.menuEl) {
+            this.stopTracking();
             this.menuEl.remove();
             this.menuEl = null;
         }
         this.applyInvalidState(this.triggerEl, this.errorEl);
     }
+    stopTracking() {
+        this.positionCleanup?.();
+        this.positionCleanup = null;
+    }
 }
 export const defineBoxDropdownElement = (tagName = DEFAULT_TAG_NAME) => {
     const existingElement = customElements.get(tagName);

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/radio-group.d.ts

@@ -1,5 +1,11 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
+type RadioOption = {
+    label: string;
+    value: string;
+    description?: string;
+    disabled?: boolean;
+};
 export declare class BoxRadioGroupElement extends FormAssociatedElement {
     static get observedAttributes(): string[];
     private valueInternal;
@@ -14,14 +20,8 @@ export declare class BoxRadioGroupElement extends FormAssociatedElement {
     set disabled(value: boolean);
     get label(): string;
     set label(value: string);
-    get options(): Array<{
-        label: string;
-        value: string;
-    }>;
-    set options(value: Array<{
-        label: string;
-        value: string;
-    }>);
+    get options(): RadioOption[];
+    set options(value: RadioOption[]);
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     protected getFormValue(): FormValue;
     protected restoreFormValue(value: FormValue): void;
@@ -30,3 +30,4 @@ export declare class BoxRadioGroupElement extends FormAssociatedElement {
     protected update(): void;
 }
 export declare const defineBoxRadioGroupElement: (tagName?: string) => typeof BoxRadioGroupElement;
+export {};

package/dist/components/forms/radio-group.js

@@ -100,11 +100,34 @@ const radioGroupStyles = `
 
   ${boeFocusVisibleStyles('[part="input"]')}
 
+  [part="option-text"] {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-inline-size: 0;
+  }
+
   [part="option-label"] {
     font-weight: 500;
     color: var(--boe-token-text-text, #222222);
   }
 
+  /* Per-option supporting text below the label. */
+  [part="option-description"] {
+    font-size: 0.78rem;
+    font-weight: 400;
+    line-height: 1.4;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part~="option"][data-has-description="true"] {
+    align-items: start;
+  }
+
+  [part~="option"][data-has-description="true"] [part="input"] {
+    margin-block-start: 2px;
+  }
+
   ${boeFormFieldErrorStyles}
 `;
 export class BoxRadioGroupElement extends FormAssociatedElement {
@@ -209,12 +232,22 @@ export class BoxRadioGroupElement extends FormAssociatedElement {
         const radioGroupName = this.getRadioGroupName();
         if (currentOptionsJson !== this.lastOptionsJson) {
             this.optionsContainerEl.innerHTML = this.options
-                .map(option => `
-            <label part="option" data-value="${escapeHtml(option.value)}">
-              <input type="radio" part="input" name="${escapeHtml(radioGroupName)}" value="${escapeHtml(option.value)}" />
-              <span part="option-label">${escapeHtml(option.label)}</span>
+                .map(option => {
+                const description = option.description
+                    ? `<span part="option-description">${escapeHtml(option.description)}</span>`
+                    : "";
+                const hasDescription = option.description ? "true" : "false";
+                const disabledAttr = option.disabled ? " disabled" : "";
+                return `
+            <label part="option" data-value="${escapeHtml(option.value)}" data-has-description="${hasDescription}">
+              <input type="radio" part="input" name="${escapeHtml(radioGroupName)}" value="${escapeHtml(option.value)}"${disabledAttr} />
+              <span part="option-text">
+                <span part="option-label">${escapeHtml(option.label)}</span>
+                ${description}
+              </span>
             </label>
-          `)
+          `;
+            })
                 .join("");
             this.lastOptionsJson = currentOptionsJson;
             this.optionsContainerEl.querySelectorAll('[part="input"]').forEach(node => {
@@ -242,16 +275,20 @@ export class BoxRadioGroupElement extends FormAssociatedElement {
                 }
             });
         }
+        const disabledByValue = new Map(this.options.map(option => [option.value, Boolean(option.disabled)]));
         this.optionsContainerEl.querySelectorAll('[part~="option"]').forEach(labelNode => {
             const label = labelNode;
             const val = label.dataset.value;
             const isSelected = val === this.valueInternal;
             label.dataset.selected = String(isSelected);
+            // part= is overwritten to toggle the selected token; data-has-description
+            // is a separate attribute and survives.
             label.setAttribute("part", `option${isSelected ? " option-selected" : ""}`);
             const input = label.querySelector('[part="input"]');
             if (input) {
                 input.checked = isSelected;
-                if (this.disabled) {
+                // Disabled if the whole group is disabled or this option is disabled.
+                if (this.disabled || disabledByValue.get(val ?? "")) {
                     input.setAttribute("disabled", "");
                 }
                 else {

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

@@ -2,9 +2,13 @@ import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
 export declare class BoxSearchFieldElement extends FormAssociatedElement {
     static get observedAttributes(): string[];
+    /** Shows a spinner in the submit button while a search runs asynchronously. */
+    get loading(): boolean;
+    set loading(value: boolean);
     private valueInternal;
     private inputEl;
     private labelEl;
+    private descriptionEl;
     private submitEl;
     private clearEl;
     private errorEl;
@@ -22,6 +26,11 @@ export declare class BoxSearchFieldElement extends FormAssociatedElement {
     protected restoreFormValue(value: FormValue): void;
     protected renderTemplate(): void;
     protected setupListeners(): void;
+    /**
+     * Emit `search` and, when placed inside a form, request its submission — so a
+     * search field behaves like a native search input on Enter / submit-click.
+     */
+    private submitSearch;
     protected update(): void;
 }
 export declare const defineBoxSearchFieldElement: (tagName?: string) => typeof BoxSearchFieldElement;