@unofficialbox/box-open-elements 0.1.0

package/dist/core/form-associated.js

@@ -0,0 +1,218 @@
+import { BaseElement } from "./element.js";
+const mirroredFormValues = new WeakMap();
+export const getMirroredFormValue = (internals) => mirroredFormValues.get(internals) ?? null;
+/** Build a multi-entry FormData payload (empty selection → `null`). */
+export const formDataFromNamedValues = (name, values) => {
+    if (values.length === 0) {
+        return null;
+    }
+    const key = name || "value";
+    const data = new FormData();
+    for (const value of values) {
+        data.append(key, value);
+    }
+    return data;
+};
+/** Restore string[] from FormData / JSON / comma-separated / single string. */
+export const stringValuesFromFormValue = (value, name) => {
+    if (value instanceof FormData) {
+        const key = name || "value";
+        return value.getAll(key).map(entry => String(entry));
+    }
+    if (typeof value !== "string" || value === "") {
+        return [];
+    }
+    try {
+        const parsed = JSON.parse(value);
+        if (Array.isArray(parsed)) {
+            return parsed.map(entry => String(entry));
+        }
+    }
+    catch {
+        // fall through
+    }
+    if (value.includes(",")) {
+        return value
+            .split(",")
+            .map(entry => entry.trim())
+            .filter(entry => entry.length > 0);
+    }
+    return [value];
+};
+/** Range pair as FormData (`${name}-start` / `${name}-end`). */
+export const formDataFromRange = (name, start, end) => {
+    const base = name || "range";
+    const data = new FormData();
+    data.append(`${base}-start`, String(start));
+    data.append(`${base}-end`, String(end));
+    return data;
+};
+export const rangeFromFormValue = (value, name, fallback) => {
+    if (value instanceof FormData) {
+        const base = name || "range";
+        const startRaw = value.get(`${base}-start`);
+        const endRaw = value.get(`${base}-end`);
+        const start = startRaw == null ? fallback.start : Number(startRaw);
+        const end = endRaw == null ? fallback.end : Number(endRaw);
+        return {
+            start: Number.isFinite(start) ? start : fallback.start,
+            end: Number.isFinite(end) ? end : fallback.end,
+        };
+    }
+    if (typeof value === "string" && value) {
+        try {
+            const parsed = JSON.parse(value);
+            const start = Number(parsed.start);
+            const end = Number(parsed.end);
+            if (Number.isFinite(start) && Number.isFinite(end)) {
+                return { start, end };
+            }
+        }
+        catch {
+            // fall through
+        }
+    }
+    return fallback;
+};
+const writeFormValue = (internals, value) => {
+    mirroredFormValues.set(internals, value);
+    const setFormValue = internals.setFormValue;
+    if (typeof setFormValue === "function") {
+        setFormValue.call(internals, value);
+    }
+};
+const writeValidity = (internals, invalid, message) => {
+    const setValidity = internals.setValidity;
+    if (typeof setValidity !== "function") {
+        return;
+    }
+    if (invalid) {
+        setValidity.call(internals, { customError: true }, message || "Invalid value");
+    }
+    else {
+        setValidity.call(internals, {});
+    }
+};
+/** Shared invalid-state styles using the status-error token. */
+export const boeFormFieldErrorStyles = `
+  :host([invalid]) [part="input"],
+  :host([invalid]) [part="textarea"],
+  :host([invalid]) [part="select"],
+  :host([invalid]) [part="control"],
+  :host([invalid]) [part="editor"] {
+    border-color: var(--boe-token-surface-status-surface-error, #ed3757);
+  }
+
+  :host([invalid]) [part="input"]:focus-visible,
+  :host([invalid]) [part="textarea"]:focus-visible,
+  :host([invalid]) [part="select"]:focus-visible,
+  :host([invalid]) [part="control"]:focus-visible {
+    border-color: var(--boe-token-surface-status-surface-error, #ed3757);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 22%, transparent);
+  }
+
+  [part="error-message"] {
+    margin: 0;
+    color: var(--boe-token-surface-status-surface-error, #ed3757);
+    font-size: 0.82rem;
+    line-height: 1.35;
+  }
+
+  [part="error-message"][hidden] {
+    display: none;
+  }
+`;
+export const FORM_ERROR_MESSAGE_ID = "boe-field-error";
+export const formErrorMessageMarkup = () => `<p part="error-message" id="${FORM_ERROR_MESSAGE_ID}" role="alert" hidden></p>`;
+export class FormAssociatedElement extends BaseElement {
+    static formAssociated = true;
+    /** Attributes every form control should observe (merge into subclass lists). */
+    static formObservedAttributes = ["name", "invalid", "error-message"];
+    /** ElementInternals for form association (public for tests / advanced hosts). */
+    internals;
+    defaultFormValue = null;
+    defaultCaptured = false;
+    constructor() {
+        super();
+        this.internals = this.attachInternals();
+    }
+    get name() {
+        return this.getAttribute("name") ?? "";
+    }
+    set name(value) {
+        if (value) {
+            this.setAttribute("name", value);
+        }
+        else {
+            this.removeAttribute("name");
+        }
+    }
+    get invalid() {
+        return this.hasAttribute("invalid");
+    }
+    set invalid(value) {
+        this.toggleAttribute("invalid", Boolean(value));
+    }
+    get errorMessage() {
+        return this.getAttribute("error-message") ?? "";
+    }
+    set errorMessage(value) {
+        if (value) {
+            this.setAttribute("error-message", value);
+        }
+        else {
+            this.removeAttribute("error-message");
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.defaultCaptured) {
+            this.defaultFormValue = this.getFormValue();
+            this.defaultCaptured = true;
+        }
+        this.syncFormAssociation();
+    }
+    formResetCallback() {
+        this.restoreFormValue(this.defaultFormValue);
+        this.syncFormAssociation();
+    }
+    formStateRestoreCallback(state) {
+        this.restoreFormValue(state);
+        this.syncFormAssociation();
+    }
+    /** Push the current value + validity into ElementInternals. */
+    syncFormAssociation() {
+        const disabled = this.hasAttribute("disabled");
+        writeFormValue(this.internals, disabled ? null : this.getFormValue());
+        writeValidity(this.internals, this.invalid, this.errorMessage);
+    }
+    /**
+     * Apply `aria-invalid` / `aria-errormessage` on the focusable control and
+     * update the error message region.
+     */
+    applyInvalidState(control, messageEl) {
+        this.applyInvalidStateToControls(control ? [control] : [], messageEl);
+    }
+    /** Apply invalid ARIA to every focusable control in a multi-option field. */
+    applyInvalidStateToControls(controls, messageEl) {
+        const invalid = this.invalid;
+        const message = this.errorMessage;
+        for (const control of controls) {
+            if (!control) {
+                continue;
+            }
+            control.setAttribute("aria-invalid", String(invalid));
+            if (invalid && message) {
+                control.setAttribute("aria-errormessage", FORM_ERROR_MESSAGE_ID);
+            }
+            else {
+                control.removeAttribute("aria-errormessage");
+            }
+        }
+        if (messageEl) {
+            messageEl.textContent = message;
+            messageEl.hidden = !(invalid && Boolean(message));
+        }
+        this.syncFormAssociation();
+    }
+}

package/dist/core/index.d.ts

@@ -0,0 +1,6 @@
+export { Controller } from "./controller.js";
+export { TypedEventEmitter } from "./event-emitter.js";
+export type { EventMap, Unsubscribe } from "./event-emitter.js";
+export { BaseElement } from "./element.js";
+export { FORM_ERROR_MESSAGE_ID, FormAssociatedElement, boeFormFieldErrorStyles, formDataFromNamedValues, formDataFromRange, formErrorMessageMarkup, getMirroredFormValue, rangeFromFormValue, stringValuesFromFormValue, } from "./form-associated.js";
+export type { FormValue } from "./form-associated.js";

package/dist/core/index.js

@@ -0,0 +1,4 @@
+export { Controller } from "./controller.js";
+export { TypedEventEmitter } from "./event-emitter.js";
+export { BaseElement } from "./element.js";
+export { FORM_ERROR_MESSAGE_ID, FormAssociatedElement, boeFormFieldErrorStyles, formDataFromNamedValues, formDataFromRange, formErrorMessageMarkup, getMirroredFormValue, rangeFromFormValue, stringValuesFromFormValue, } from "./form-associated.js";

package/dist/core/json-schema.d.ts

@@ -0,0 +1 @@
+export type JsonSchema = Record<string, unknown>;

package/dist/core/json-schema.js

@@ -0,0 +1 @@
+export {};

package/dist/foundations/a11y/focus.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Focus management helpers for modal dialogs, drawers, and transient menus.
+ */
+/** Visible, enabled tabbable controls inside `container` (light or shadow). */
+export declare const getTabbableElements: (container: ParentNode) => HTMLElement[];
+/**
+ * Keep Tab / Shift+Tab cycling inside `container` while a modal is open.
+ * Call from a `keydown` listener when `event.key === "Tab"`.
+ */
+export declare const trapTabKey: (event: KeyboardEvent, container: ParentNode) => void;
+/** Capture the currently focused element and restore it later (menu/dialog close). */
+export declare class FocusRestore {
+    private previous;
+    capture(from?: Element | null): void;
+    restore(): void;
+    clear(): void;
+}

package/dist/foundations/a11y/focus.js

@@ -0,0 +1,94 @@
+/**
+ * Focus management helpers for modal dialogs, drawers, and transient menus.
+ */
+const TABBABLE_SELECTOR = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled]):not([type='hidden'])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    "[tabindex]:not([tabindex='-1'])",
+].join(", ");
+const isDisabled = (element) => element.hasAttribute("disabled") ||
+    element.disabled === true ||
+    element.getAttribute("aria-disabled") === "true";
+const isVisible = (element) => {
+    if (element.hidden || element.getAttribute("aria-hidden") === "true") {
+        return false;
+    }
+    // Closest [hidden] ancestor (common pattern for closed panels).
+    if (element.closest("[hidden]")) {
+        return false;
+    }
+    const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+    if (!style) {
+        return true;
+    }
+    if (style.display === "none" || style.visibility === "hidden") {
+        return false;
+    }
+    return true;
+};
+/** Visible, enabled tabbable controls inside `container` (light or shadow). */
+export const getTabbableElements = (container) => {
+    return Array.from(container.querySelectorAll(TABBABLE_SELECTOR)).filter(element => {
+        if (isDisabled(element)) {
+            return false;
+        }
+        if (element.tabIndex < 0) {
+            return false;
+        }
+        return isVisible(element);
+    });
+};
+/**
+ * Keep Tab / Shift+Tab cycling inside `container` while a modal is open.
+ * Call from a `keydown` listener when `event.key === "Tab"`.
+ */
+export const trapTabKey = (event, container) => {
+    if (event.key !== "Tab") {
+        return;
+    }
+    const focusables = getTabbableElements(container);
+    if (focusables.length === 0) {
+        event.preventDefault();
+        return;
+    }
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const root = container.getRootNode?.();
+    const active = root?.activeElement ?? document.activeElement;
+    if (event.shiftKey) {
+        if (active === first || !focusables.includes(active)) {
+            event.preventDefault();
+            last.focus();
+        }
+        return;
+    }
+    if (active === last || !focusables.includes(active)) {
+        event.preventDefault();
+        first.focus();
+    }
+};
+/** Capture the currently focused element and restore it later (menu/dialog close). */
+export class FocusRestore {
+    previous = null;
+    capture(from = document.activeElement) {
+        this.previous = from instanceof HTMLElement ? from : null;
+    }
+    restore() {
+        const target = this.previous;
+        this.previous = null;
+        if (!target) {
+            return;
+        }
+        queueMicrotask(() => {
+            if (typeof target.focus === "function") {
+                target.focus();
+            }
+        });
+    }
+    clear() {
+        this.previous = null;
+    }
+}

package/dist/foundations/a11y/heading.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Heading markup helpers so `heading` attributes expose real document outline
+ * semantics (`<h*>`) instead of `<div>` / `<strong part="title">`.
+ */
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type RenderHeadingOptions = {
+    /** Heading level. Defaults to 2 (section-level). */
+    level?: HeadingLevel;
+    /** Space-separated `part` tokens. Defaults to `"title"`. */
+    part?: string;
+    id?: string;
+    hidden?: boolean;
+};
+/**
+ * Render a native heading element with escaped text.
+ * Keep `part="title"` so existing `::part(title)` / `[part="title"]` styles apply.
+ */
+export declare const renderHeadingHtml: (text: string, options?: RenderHeadingOptions) => string;
+/**
+ * Open tag for headings whose text is set later via `textContent`
+ * (avoids double-escaping when content is assigned from JS).
+ */
+export declare const headingOpenTag: (options?: RenderHeadingOptions) => string;
+export declare const headingCloseTag: (level?: HeadingLevel) => string;
+/** CSS reset so native headings inherit component typography instead of UA margins. */
+export declare const boeHeadingResetStyles: (selector: string) => string;

package/dist/foundations/a11y/heading.js

@@ -0,0 +1,40 @@
+/**
+ * Heading markup helpers so `heading` attributes expose real document outline
+ * semantics (`<h*>`) instead of `<div>` / `<strong part="title">`.
+ */
+const escapeHtml = (value) => value
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+/**
+ * Render a native heading element with escaped text.
+ * Keep `part="title"` so existing `::part(title)` / `[part="title"]` styles apply.
+ */
+export const renderHeadingHtml = (text, options = {}) => {
+    const level = options.level ?? 2;
+    const part = options.part ?? "title";
+    const idAttr = options.id ? ` id="${escapeHtml(options.id)}"` : "";
+    const hiddenAttr = options.hidden ? " hidden" : "";
+    return `<h${level} part="${escapeHtml(part)}"${idAttr}${hiddenAttr}>${escapeHtml(text)}</h${level}>`;
+};
+/**
+ * Open tag for headings whose text is set later via `textContent`
+ * (avoids double-escaping when content is assigned from JS).
+ */
+export const headingOpenTag = (options = {}) => {
+    const level = options.level ?? 2;
+    const part = options.part ?? "title";
+    const idAttr = options.id ? ` id="${escapeHtml(options.id)}"` : "";
+    const hiddenAttr = options.hidden ? " hidden" : "";
+    return `<h${level} part="${escapeHtml(part)}"${idAttr}${hiddenAttr}>`;
+};
+export const headingCloseTag = (level = 2) => `</h${level}>`;
+/** CSS reset so native headings inherit component typography instead of UA margins. */
+export const boeHeadingResetStyles = (selector) => `
+  ${selector} {
+    margin: 0;
+    font: inherit;
+  }
+`;

package/dist/foundations/a11y/index.d.ts

@@ -0,0 +1,5 @@
+export { applyRovingTabindex, focusRovingItem, handleRovingKeydown, nextRovingIndex, } from "./keyboard.js";
+export type { RovingKeyOptions, RovingOrientation } from "./keyboard.js";
+export { FocusRestore, getTabbableElements, trapTabKey } from "./focus.js";
+export { boeHeadingResetStyles, headingCloseTag, headingOpenTag, renderHeadingHtml, } from "./heading.js";
+export type { HeadingLevel, RenderHeadingOptions } from "./heading.js";

package/dist/foundations/a11y/index.js

@@ -0,0 +1,3 @@
+export { applyRovingTabindex, focusRovingItem, handleRovingKeydown, nextRovingIndex, } from "./keyboard.js";
+export { FocusRestore, getTabbableElements, trapTabKey } from "./focus.js";
+export { boeHeadingResetStyles, headingCloseTag, headingOpenTag, renderHeadingHtml, } from "./heading.js";

package/dist/foundations/a11y/keyboard.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Shared keyboard helpers for composite widgets (menu, toolbar, listbox, radiogroup).
+ * Prefer these over per-component Arrow/Home/End copies.
+ */
+export type RovingOrientation = "horizontal" | "vertical" | "both";
+export type RovingKeyOptions = {
+    /** When true (default), Arrow past the ends wraps. */
+    wrap?: boolean;
+    /** Which arrow keys participate. Default `"both"`. */
+    orientation?: RovingOrientation;
+};
+/**
+ * Map a keyboard event key to the next index in a roving-tabindex collection.
+ * Returns `null` when the key is not a navigation key for the orientation.
+ */
+export declare const nextRovingIndex: (key: string, currentIndex: number, length: number, options?: RovingKeyOptions) => number | null;
+/** Set `tabIndex` so only `activeIndex` is in the tab order (roving tabindex). */
+export declare const applyRovingTabindex: (items: readonly HTMLElement[], activeIndex: number) => void;
+/**
+ * Focus the item at `index` after applying roving tabindex.
+ * Uses `queueMicrotask` so callers can finish DOM patches first.
+ */
+export declare const focusRovingItem: (items: readonly HTMLElement[], index: number) => void;
+/**
+ * Handle Arrow/Home/End inside a toolbar / menu / radiogroup collection.
+ * Returns true when the event was handled.
+ */
+export declare const handleRovingKeydown: (event: KeyboardEvent, items: readonly HTMLElement[], options?: RovingKeyOptions) => boolean;

package/dist/foundations/a11y/keyboard.js

@@ -0,0 +1,77 @@
+/**
+ * Shared keyboard helpers for composite widgets (menu, toolbar, listbox, radiogroup).
+ * Prefer these over per-component Arrow/Home/End copies.
+ */
+/**
+ * Map a keyboard event key to the next index in a roving-tabindex collection.
+ * Returns `null` when the key is not a navigation key for the orientation.
+ */
+export const nextRovingIndex = (key, currentIndex, length, options = {}) => {
+    if (length <= 0) {
+        return null;
+    }
+    const wrap = options.wrap ?? true;
+    const orientation = options.orientation ?? "both";
+    const lastIndex = length - 1;
+    const clamped = Math.max(0, Math.min(lastIndex, currentIndex));
+    const isNext = ((orientation === "horizontal" || orientation === "both") && key === "ArrowRight") ||
+        ((orientation === "vertical" || orientation === "both") && key === "ArrowDown");
+    const isPrevious = ((orientation === "horizontal" || orientation === "both") && key === "ArrowLeft") ||
+        ((orientation === "vertical" || orientation === "both") && key === "ArrowUp");
+    if (isNext) {
+        if (clamped >= lastIndex) {
+            return wrap ? 0 : lastIndex;
+        }
+        return clamped + 1;
+    }
+    if (isPrevious) {
+        if (clamped <= 0) {
+            return wrap ? lastIndex : 0;
+        }
+        return clamped - 1;
+    }
+    if (key === "Home") {
+        return 0;
+    }
+    if (key === "End") {
+        return lastIndex;
+    }
+    return null;
+};
+/** Set `tabIndex` so only `activeIndex` is in the tab order (roving tabindex). */
+export const applyRovingTabindex = (items, activeIndex) => {
+    items.forEach((item, index) => {
+        item.tabIndex = index === activeIndex ? 0 : -1;
+    });
+};
+/**
+ * Focus the item at `index` after applying roving tabindex.
+ * Uses `queueMicrotask` so callers can finish DOM patches first.
+ */
+export const focusRovingItem = (items, index) => {
+    applyRovingTabindex(items, index);
+    const target = items[index];
+    if (!target) {
+        return;
+    }
+    queueMicrotask(() => {
+        target.focus();
+    });
+};
+/**
+ * Handle Arrow/Home/End inside a toolbar / menu / radiogroup collection.
+ * Returns true when the event was handled.
+ */
+export const handleRovingKeydown = (event, items, options = {}) => {
+    const currentIndex = items.indexOf(event.target);
+    if (currentIndex < 0) {
+        return false;
+    }
+    const nextIndex = nextRovingIndex(event.key, currentIndex, items.length, options);
+    if (nextIndex == null) {
+        return false;
+    }
+    event.preventDefault();
+    focusRovingItem(items, nextIndex);
+    return true;
+};

package/dist/foundations/geometry/index.d.ts

@@ -0,0 +1 @@
+export { boeControl, boeInputControlStyles, boeOverlay, boePanel, boeRadius, boeSpace, } from "./tokens.js";

package/dist/foundations/geometry/index.js

@@ -0,0 +1 @@
+export { boeControl, boeInputControlStyles, boeOverlay, boePanel, boeRadius, boeSpace, } from "./tokens.js";

package/dist/foundations/geometry/tokens.d.ts

@@ -0,0 +1,123 @@
+/**
+ * Box Design Language geometry — sourced from box-ui-elements
+ * `src/styles/constants/_layout.scss`, `_buttons.scss`, and `_inputs.scss`.
+ *
+ * Prefer these over ad-hoc rem bands when styling everyday controls so the
+ * catalog tracks upstream Box chrome (4px grid, 32px controls, 4/6/8/12 radii).
+ */
+/** `$bdl-grid-unit` — spacing scale root (4px). */
+export declare const boeSpace: {
+    readonly unit: "4px";
+    /** 1 × grid */
+    readonly 1: "4px";
+    /** 2 × grid */
+    readonly 2: "8px";
+    /** 3 × grid */
+    readonly 3: "12px";
+    /** 4 × grid — button horizontal padding */
+    readonly 4: "16px";
+    /** 5 × grid */
+    readonly 5: "20px";
+    /** 6 × grid — overlay padding */
+    readonly 6: "24px";
+    /** 8 × grid — modal-ish pad / control height */
+    readonly 8: "32px";
+    /** 10 × grid */
+    readonly 10: "40px";
+    /** 12 × grid — menu-item trailing pad */
+    readonly 12: "48px";
+};
+/**
+ * Pattern / panel shell chrome — denser BDL card surfaces (12 / 8)
+ * used by share panels, explorers, insights cards, etc.
+ */
+export declare const boePanel: {
+    readonly padding: "12px";
+    /** Card / panel surface — Box 16px (was 8px). */
+    readonly radius: "16px";
+    readonly gap: "12px";
+    readonly border: "1px solid var(--boe-token-stroke-stroke, #e8e8e8)";
+    readonly background: "var(--boe-token-surface-surface, #ffffff)";
+    /** Content-sidebar-ish drawer width */
+    readonly drawerWidth: "340px";
+};
+/**
+ * Overlay / menu / flyout chrome — `mixins/_overlay.scss` + Menu.scss.
+ */
+export declare const boeOverlay: {
+    /** Container pad — 3 × grid */
+    readonly padding: "12px";
+    /** Menu / popover surface — Box 20px (was 8px). */
+    readonly radius: "20px";
+    readonly shadow: "0 4px 12px 0 rgb(0 0 0 / 10%)";
+    readonly border: "1px solid var(--boe-token-stroke-stroke, #e8e8e8)";
+    /** Menu item — min-height 30; item radius 12px (Box). */
+    readonly itemPadding: "8px 48px 8px 8px";
+    readonly itemMinHeight: "30px";
+    readonly itemRadius: "12px";
+    /** Modal — dialog radius 24px (Box; was 12px). */
+    readonly modalPadding: "30px";
+    readonly modalWidth: "460px";
+    readonly modalRadius: "24px";
+    readonly modalShadow: "0 1px 1px 1px rgb(0 0 0 / 5%)";
+    readonly modalTitleSize: "16px";
+    readonly modalBackdrop: "rgba(0, 0, 0, 0.75)";
+};
+/**
+ * Corner radii. box-open-elements tracks the **live Box web app** (Blueprint),
+ * which ships pill-shaped controls and larger surface radii — captured from
+ * `app.box.com` (see `docs/audits/box-webapp-reference.data.json`). This is an
+ * intentional divergence from box-ui-elements' legacy SCSS geometry (4/6/8/12);
+ * the Layer 1 audit records it as such.
+ *
+ * Role guide: `control` for buttons/inputs, `field` for search + dialogs, `nav`
+ * for nav items, `large` for cards/panels, `med` for rows/small surfaces,
+ * `size` for badges/checkboxes, `pill` for chips/toggles.
+ */
+export declare const boeRadius: {
+    /** Badges, checkboxes, tiny chips — Box ~4px. */
+    readonly size: "4px";
+    /** Rows, small surfaces, list-item hover — Box 12px (was 6px). */
+    readonly med: "12px";
+    /** Cards, panels — Box 16px (was 8px). */
+    readonly large: "16px";
+    /** Controls (buttons, inputs) + menus — Box 20px (was 12px). */
+    readonly xlarge: "20px";
+    /** Interactive controls — buttons, inputs. Box pill radius 20px. */
+    readonly control: "20px";
+    /** Large fields (search) + dialogs/modals — Box 24px. */
+    readonly field: "24px";
+    /** Nav items — Box 28px. */
+    readonly nav: "28px";
+    /** True pills — chips, toggles, label-pills. */
+    readonly pill: "999px";
+};
+/** `$bdl-btn-height*` + related control metrics. */
+export declare const boeControl: {
+    readonly height: "32px";
+    readonly heightLarge: "40px";
+    readonly paddingInline: "16px";
+    /** Pill control radius — buttons/inputs. Box 20px. */
+    readonly radius: "20px";
+    /** Shared input pad from `@mixin box-inputs` */
+    readonly inputPadding: "7px";
+    /** BUE select control height */
+    readonly selectHeight: "34px";
+    /** Legacy body font used on `.btn` */
+    readonly fontSize: "13px";
+    readonly letterSpacing: "0.035em";
+    /** BUE disabled control opacity */
+    readonly disabledOpacity: "0.4";
+    /** Input border — `$bdl-gray-20` / SurfaceSurfaceQuaternary */
+    readonly inputBorder: "var(--boe-token-surface-surface-quaternary, #d3d3d3)";
+    /** Button secondary border — `$bdl-gray-30` / StrokeStrokeHover */
+    readonly buttonBorder: "var(--boe-token-stroke-stroke-hover, #bcbcbc)";
+    /** `@mixin box-inputs` inset shadow */
+    readonly inputInsetShadow: "inset 0 2px 4px rgb(0 0 0 / 10%)";
+    /** Overlay / menu shadow — `mixins/_overlay.scss` */
+    readonly overlayShadow: "0 4px 12px 0 rgb(0 0 0 / 10%)";
+    /** Primary button focus inset ring */
+    readonly primaryFocusShadow: "inset 0 0 0 1px rgb(255 255 255 / 80%), 0 1px 2px rgb(0 0 0 / 10%)";
+};
+/** Shared text-field / select chrome matching `@mixin box-inputs`. */
+export declare const boeInputControlStyles: (selector: string) => string;