@unofficialbox/box-open-elements 0.2.0 → 0.3.0

package/dist/core/form-associated.d.ts

@@ -29,10 +29,26 @@ export declare const rangeFromFormValue: (value: FormValue, name: string, fallba
 export declare const boeFormFieldErrorStyles = "\n  :host([invalid]) [part=\"input\"],\n  :host([invalid]) [part=\"textarea\"],\n  :host([invalid]) [part=\"select\"],\n  :host([invalid]) [part=\"control\"],\n  :host([invalid]) [part=\"editor\"] {\n    border-color: var(--boe-token-surface-status-surface-error, #ed3757);\n  }\n\n  :host([invalid]) [part=\"input\"]:focus-visible,\n  :host([invalid]) [part=\"textarea\"]:focus-visible,\n  :host([invalid]) [part=\"select\"]:focus-visible,\n  :host([invalid]) [part=\"control\"]:focus-visible {\n    border-color: var(--boe-token-surface-status-surface-error, #ed3757);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 22%, transparent);\n  }\n\n  [part=\"error-message\"] {\n    margin: 0;\n    color: var(--boe-token-surface-status-surface-error, #ed3757);\n    font-size: 0.82rem;\n    line-height: 1.35;\n  }\n\n  [part=\"error-message\"][hidden] {\n    display: none;\n  }\n";
 export declare const FORM_ERROR_MESSAGE_ID = "boe-field-error";
 export declare const formErrorMessageMarkup: () => string;
+export declare const FORM_DESCRIPTION_ID = "boe-field-description";
+/** Optional help text rendered under the label (shown only when `description` is set). */
+export declare const formDescriptionMarkup: () => string;
+/**
+ * Shared chrome for the field-feature set: help-text `description`, the
+ * `required` indicator, and the visually-hidden `hide-label` treatment.
+ * Include alongside `boeFormFieldErrorStyles` in a field's stylesheet.
+ */
+export declare const boeFormFieldSupportStyles = "\n  [part=\"description\"] {\n    margin: 0;\n    color: var(--boe-token-text-text-secondary, #6f6f6f);\n    font-size: 0.82rem;\n    line-height: 1.35;\n  }\n\n  [part=\"description\"][hidden] {\n    display: none;\n  }\n\n  [part=\"label\"] .boe-required-mark {\n    margin-inline-start: 2px;\n    color: var(--boe-token-surface-status-surface-error, #ed3757);\n  }\n\n  :host([hide-label]) [part=\"label\"] {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n";
 export declare abstract class FormAssociatedElement extends BaseElement {
     static formAssociated: boolean;
     /** Attributes every form control should observe (merge into subclass lists). */
     static readonly formObservedAttributes: readonly ["name", "invalid", "error-message"];
+    /**
+     * `formObservedAttributes` plus the shared field-feature attributes
+     * (`required`, `description`, `hide-label`). A field that renders a label +
+     * `formDescriptionMarkup()` and calls `applyFieldSupport()` should observe
+     * these instead.
+     */
+    static readonly fieldObservedAttributes: readonly ["name", "invalid", "error-message", "required", "description", "hide-label"];
     /** ElementInternals for form association (public for tests / advanced hosts). */
     readonly internals: ElementInternals;
     private defaultFormValue;
@@ -44,6 +60,14 @@ export declare abstract class FormAssociatedElement extends BaseElement {
     set invalid(value: boolean);
     get errorMessage(): string;
     set errorMessage(value: string);
+    get required(): boolean;
+    set required(value: boolean);
+    /** Help text rendered under the label (empty string hides it). */
+    get description(): string;
+    set description(value: string);
+    /** Keep the label for assistive tech but hide it visually. */
+    get hideLabel(): boolean;
+    set hideLabel(value: boolean);
     /** Value reported to the owning form (`null` omits the control). */
     protected abstract getFormValue(): FormValue;
     /** Restore a value from form reset / autocomplete. */
@@ -60,4 +84,12 @@ export declare abstract class FormAssociatedElement extends BaseElement {
     protected applyInvalidState(control: HTMLElement | null | undefined, messageEl: HTMLElement | null | undefined): void;
     /** Apply invalid ARIA to every focusable control in a multi-option field. */
     protected applyInvalidStateToControls(controls: Iterable<HTMLElement | null | undefined>, messageEl: HTMLElement | null | undefined): void;
+    /**
+     * Apply the shared field features to a rendered field: the `required`
+     * indicator + `aria-required` on the control, the `description` help text +
+     * `aria-describedby`, and the `hide-label` visually-hidden treatment (handled
+     * in CSS via `:host([hide-label])`). Call after setting the label's text
+     * content each update, since setting `textContent` clears the appended mark.
+     */
+    protected applyFieldSupport(labelEl: HTMLElement | null | undefined, control: HTMLElement | null | undefined, descriptionEl: HTMLElement | null | undefined): void;
 }

package/dist/core/form-associated.js

@@ -124,10 +124,61 @@ export const boeFormFieldErrorStyles = `
 `;
 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 const FORM_DESCRIPTION_ID = "boe-field-description";
+/** Optional help text rendered under the label (shown only when `description` is set). */
+export const formDescriptionMarkup = () => `<p part="description" id="${FORM_DESCRIPTION_ID}" hidden></p>`;
+/**
+ * Shared chrome for the field-feature set: help-text `description`, the
+ * `required` indicator, and the visually-hidden `hide-label` treatment.
+ * Include alongside `boeFormFieldErrorStyles` in a field's stylesheet.
+ */
+export const boeFormFieldSupportStyles = `
+  [part="description"] {
+    margin: 0;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font-size: 0.82rem;
+    line-height: 1.35;
+  }
+
+  [part="description"][hidden] {
+    display: none;
+  }
+
+  [part="label"] .boe-required-mark {
+    margin-inline-start: 2px;
+    color: var(--boe-token-surface-status-surface-error, #ed3757);
+  }
+
+  :host([hide-label]) [part="label"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`;
 export class FormAssociatedElement extends BaseElement {
     static formAssociated = true;
     /** Attributes every form control should observe (merge into subclass lists). */
     static formObservedAttributes = ["name", "invalid", "error-message"];
+    /**
+     * `formObservedAttributes` plus the shared field-feature attributes
+     * (`required`, `description`, `hide-label`). A field that renders a label +
+     * `formDescriptionMarkup()` and calls `applyFieldSupport()` should observe
+     * these instead.
+     */
+    static fieldObservedAttributes = [
+        "name",
+        "invalid",
+        "error-message",
+        "required",
+        "description",
+        "hide-label",
+    ];
     /** ElementInternals for form association (public for tests / advanced hosts). */
     internals;
     defaultFormValue = null;
@@ -164,6 +215,31 @@ export class FormAssociatedElement extends BaseElement {
             this.removeAttribute("error-message");
         }
     }
+    get required() {
+        return this.hasAttribute("required");
+    }
+    set required(value) {
+        this.toggleAttribute("required", Boolean(value));
+    }
+    /** Help text rendered under the label (empty string hides it). */
+    get description() {
+        return this.getAttribute("description") ?? "";
+    }
+    set description(value) {
+        if (value) {
+            this.setAttribute("description", value);
+        }
+        else {
+            this.removeAttribute("description");
+        }
+    }
+    /** Keep the label for assistive tech but hide it visually. */
+    get hideLabel() {
+        return this.hasAttribute("hide-label");
+    }
+    set hideLabel(value) {
+        this.toggleAttribute("hide-label", Boolean(value));
+    }
     connectedCallback() {
         super.connectedCallback();
         if (!this.defaultCaptured) {
@@ -215,4 +291,42 @@ export class FormAssociatedElement extends BaseElement {
         }
         this.syncFormAssociation();
     }
+    /**
+     * Apply the shared field features to a rendered field: the `required`
+     * indicator + `aria-required` on the control, the `description` help text +
+     * `aria-describedby`, and the `hide-label` visually-hidden treatment (handled
+     * in CSS via `:host([hide-label])`). Call after setting the label's text
+     * content each update, since setting `textContent` clears the appended mark.
+     */
+    applyFieldSupport(labelEl, control, descriptionEl) {
+        const required = this.required;
+        const description = this.description;
+        if (labelEl) {
+            const existing = labelEl.querySelector(".boe-required-mark");
+            if (required && !existing) {
+                const mark = document.createElement("span");
+                mark.className = "boe-required-mark";
+                mark.setAttribute("aria-hidden", "true");
+                mark.textContent = "*";
+                labelEl.append(mark);
+            }
+            else if (!required && existing) {
+                existing.remove();
+            }
+        }
+        if (control) {
+            control.toggleAttribute("required", required);
+            control.setAttribute("aria-required", String(required));
+            if (description) {
+                control.setAttribute("aria-describedby", FORM_DESCRIPTION_ID);
+            }
+            else {
+                control.removeAttribute("aria-describedby");
+            }
+        }
+        if (descriptionEl) {
+            descriptionEl.textContent = description;
+            descriptionEl.hidden = description.length === 0;
+        }
+    }
 }

package/dist/core/index.d.ts

@@ -2,5 +2,5 @@ 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 { FORM_DESCRIPTION_ID, FORM_ERROR_MESSAGE_ID, FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDataFromNamedValues, formDataFromRange, formDescriptionMarkup, formErrorMessageMarkup, getMirroredFormValue, rangeFromFormValue, stringValuesFromFormValue, } from "./form-associated.js";
 export type { FormValue } from "./form-associated.js";

package/dist/core/index.js

@@ -1,4 +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";
+export { FORM_DESCRIPTION_ID, FORM_ERROR_MESSAGE_ID, FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDataFromNamedValues, formDataFromRange, formDescriptionMarkup, formErrorMessageMarkup, getMirroredFormValue, rangeFromFormValue, stringValuesFromFormValue, } from "./form-associated.js";

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

@@ -0,0 +1,2 @@
+export { anchorFloating, parsePlacement, resolvePosition, trackAnchor, } from "./positioning.js";
+export type { OverlayAlign, OverlayPlacement, OverlaySide, PositionOptions, PositionResult, Rect, Size, } from "./positioning.js";

package/dist/foundations/overlay/index.js

@@ -0,0 +1 @@
+export { anchorFloating, parsePlacement, resolvePosition, trackAnchor, } from "./positioning.js";

package/dist/foundations/overlay/positioning.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Viewport-aware anchored positioning for overlays (popover, tooltip, dropdown,
+ * menu, context-menu). box-open-elements has no portal, so floating surfaces
+ * position with `position: fixed` in viewport coordinates — which also lets them
+ * escape `overflow: hidden` / stacking-context ancestors, the job a portal does
+ * in box-ui-elements.
+ *
+ * The geometry core (`resolvePosition`) is pure and DOM-free so it can be unit
+ * tested with plain rects; the DOM helpers (`anchorFloating`, `trackAnchor`)
+ * read live rects and apply styles.
+ *
+ * Behaviour mirrors box-ui-elements' flyout: a preferred placement, `flip` to
+ * the opposite side when it would overflow, and `shift` along the cross axis to
+ * stay within the viewport.
+ */
+/** Primary side the floating element sits on, relative to the anchor. */
+export type OverlaySide = "top" | "bottom" | "left" | "right";
+/** Cross-axis alignment of the floating element against the anchor edge. */
+export type OverlayAlign = "start" | "center" | "end";
+export interface OverlayPlacement {
+    side: OverlaySide;
+    align: OverlayAlign;
+}
+export interface Rect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface PositionOptions {
+    /** Preferred placement. Default `{ side: "bottom", align: "start" }`. */
+    placement?: OverlayPlacement;
+    /** Gap between the anchor edge and the floating element, in px. Default 4. */
+    offset?: number;
+    /** Flip to the opposite side when the preferred side would overflow. Default true. */
+    flip?: boolean;
+    /** Shift along the cross axis to keep the element inside the viewport. Default true. */
+    shift?: boolean;
+    /** Minimum gap kept from each viewport edge, in px. Default 8. */
+    padding?: number;
+}
+export interface PositionResult {
+    /** Viewport x (use as `left` for a `position: fixed` element). */
+    x: number;
+    /** Viewport y (use as `top`). */
+    y: number;
+    /** The side actually used (may differ from the request after a flip). */
+    side: OverlaySide;
+    /** The cross-axis alignment used. */
+    align: OverlayAlign;
+}
+/**
+ * Compute the viewport position of a floating element against an anchor. Pure —
+ * pass plain rects (e.g. from `getBoundingClientRect()`) and the viewport size.
+ */
+export declare const resolvePosition: (anchor: Rect, floating: Size, viewport: Size, options?: PositionOptions) => PositionResult;
+/** Parse a placement string like `"bottom-start"` / `"top"` / `"right-center"`. */
+export declare const parsePlacement: (value: string | null | undefined) => OverlayPlacement | undefined;
+/**
+ * Position `floating` against `anchor` once, applying `position: fixed` and the
+ * resolved coordinates. Returns the resolved placement (e.g. for arrow styling).
+ */
+export declare const anchorFloating: (anchor: HTMLElement, floating: HTMLElement, options?: PositionOptions) => PositionResult;
+/**
+ * Keep `floating` positioned against `anchor` while it is open: reposition on
+ * scroll (capture, to catch scrolling ancestors) and resize. Returns a cleanup
+ * that removes the listeners. Call `anchorFloating` once up front is handled
+ * internally.
+ */
+export declare const trackAnchor: (anchor: HTMLElement, floating: HTMLElement, options?: PositionOptions, onReposition?: (result: PositionResult) => void) => (() => void);

package/dist/foundations/overlay/positioning.js

@@ -0,0 +1,158 @@
+/**
+ * Viewport-aware anchored positioning for overlays (popover, tooltip, dropdown,
+ * menu, context-menu). box-open-elements has no portal, so floating surfaces
+ * position with `position: fixed` in viewport coordinates — which also lets them
+ * escape `overflow: hidden` / stacking-context ancestors, the job a portal does
+ * in box-ui-elements.
+ *
+ * The geometry core (`resolvePosition`) is pure and DOM-free so it can be unit
+ * tested with plain rects; the DOM helpers (`anchorFloating`, `trackAnchor`)
+ * read live rects and apply styles.
+ *
+ * Behaviour mirrors box-ui-elements' flyout: a preferred placement, `flip` to
+ * the opposite side when it would overflow, and `shift` along the cross axis to
+ * stay within the viewport.
+ */
+const OPPOSITE = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left",
+};
+const isVertical = (side) => side === "top" || side === "bottom";
+/** Cross-axis start coordinate for an alignment. */
+const alignStart = (anchorStart, anchorSize, floatingSize, align) => {
+    if (align === "center")
+        return anchorStart + anchorSize / 2 - floatingSize / 2;
+    if (align === "end")
+        return anchorStart + anchorSize - floatingSize;
+    return anchorStart;
+};
+/** Main-axis coordinate for a side (top/left of the floating element). */
+const sideCoord = (anchor, floating, side, offset) => {
+    switch (side) {
+        case "bottom":
+            return anchor.top + anchor.height + offset;
+        case "top":
+            return anchor.top - floating.height - offset;
+        case "right":
+            return anchor.left + anchor.width + offset;
+        case "left":
+            return anchor.left - floating.width - offset;
+    }
+};
+/** Space available between the anchor and the viewport edge on a given side. */
+const spaceOn = (anchor, viewport, side) => {
+    switch (side) {
+        case "top":
+            return anchor.top;
+        case "bottom":
+            return viewport.height - (anchor.top + anchor.height);
+        case "left":
+            return anchor.left;
+        case "right":
+            return viewport.width - (anchor.left + anchor.width);
+    }
+};
+const clamp = (value, min, max) => max < min ? min : Math.min(Math.max(value, min), max);
+/**
+ * Compute the viewport position of a floating element against an anchor. Pure —
+ * pass plain rects (e.g. from `getBoundingClientRect()`) and the viewport size.
+ */
+export const resolvePosition = (anchor, floating, viewport, options = {}) => {
+    const { side: wantSide, align } = options.placement ?? { side: "bottom", align: "start" };
+    const offset = options.offset ?? 4;
+    const flip = options.flip ?? true;
+    const shift = options.shift ?? true;
+    const padding = options.padding ?? 8;
+    // Flip: if the preferred side lacks room for the element (+offset) and the
+    // opposite side has more, use the opposite side.
+    let side = wantSide;
+    if (flip) {
+        const need = (isVertical(wantSide) ? floating.height : floating.width) + offset;
+        const room = spaceOn(anchor, viewport, wantSide);
+        if (room < need) {
+            const opposite = OPPOSITE[wantSide];
+            if (spaceOn(anchor, viewport, opposite) > room)
+                side = opposite;
+        }
+    }
+    let x;
+    let y;
+    if (isVertical(side)) {
+        y = sideCoord(anchor, floating, side, offset);
+        x = alignStart(anchor.left, anchor.width, floating.width, align);
+        if (shift)
+            x = clamp(x, padding, viewport.width - floating.width - padding);
+    }
+    else {
+        x = sideCoord(anchor, floating, side, offset);
+        y = alignStart(anchor.top, anchor.height, floating.height, align);
+        if (shift)
+            y = clamp(y, padding, viewport.height - floating.height - padding);
+    }
+    return { x, y, side, align };
+};
+/** Parse a placement string like `"bottom-start"` / `"top"` / `"right-center"`. */
+export const parsePlacement = (value) => {
+    if (!value)
+        return undefined;
+    const [rawSide, rawAlign] = value.trim().toLowerCase().split("-");
+    const sideMap = {
+        top: "top",
+        bottom: "bottom",
+        left: "left",
+        right: "right",
+        // Legacy popover names (start = inline-start = left, end = right).
+        start: "left",
+        end: "right",
+    };
+    const side = sideMap[rawSide];
+    if (!side)
+        return undefined;
+    const alignMap = {
+        start: "start",
+        center: "center",
+        middle: "center",
+        end: "end",
+    };
+    return { side, align: alignMap[rawAlign] ?? "start" };
+};
+const viewportSize = () => ({
+    width: window.innerWidth,
+    height: window.innerHeight,
+});
+/**
+ * Position `floating` against `anchor` once, applying `position: fixed` and the
+ * resolved coordinates. Returns the resolved placement (e.g. for arrow styling).
+ */
+export const anchorFloating = (anchor, floating, options = {}) => {
+    const a = anchor.getBoundingClientRect();
+    const f = floating.getBoundingClientRect();
+    const result = resolvePosition({ top: a.top, left: a.left, width: a.width, height: a.height }, { width: f.width, height: f.height }, viewportSize(), options);
+    floating.style.position = "fixed";
+    floating.style.left = `${Math.round(result.x)}px`;
+    floating.style.top = `${Math.round(result.y)}px`;
+    floating.style.margin = "0";
+    return result;
+};
+/**
+ * Keep `floating` positioned against `anchor` while it is open: reposition on
+ * scroll (capture, to catch scrolling ancestors) and resize. Returns a cleanup
+ * that removes the listeners. Call `anchorFloating` once up front is handled
+ * internally.
+ */
+export const trackAnchor = (anchor, floating, options = {}, onReposition) => {
+    const reposition = () => {
+        if (!anchor.isConnected || !floating.isConnected)
+            return;
+        onReposition?.(anchorFloating(anchor, floating, options));
+    };
+    reposition();
+    window.addEventListener("scroll", reposition, true);
+    window.addEventListener("resize", reposition);
+    return () => {
+        window.removeEventListener("scroll", reposition, true);
+        window.removeEventListener("resize", reposition);
+    };
+};

package/dist/index.d.ts

@@ -4,6 +4,8 @@ export type { JsonSchema } from "./core/json-schema.js";
 export { DESIGN_SYSTEM_CHANGE_EVENT, applyDesignTokens, boxDarkDesignSystem, boxDefaultDesignSystem, createDesignTokenStyleText, getActiveDesignSystem, getDesignSystem, listDesignSystems, registerBoxDarkDesignSystem, registerBoxDefaultDesignSystem, registerDesignSystem, resolveDesignIcon, resolveDesignIllustration, resolveDesignSystemTokens, setActiveDesignSystem, } from "./foundations/tokens/index.js";
 export type { ApplyDesignTokensOptions, DesignAssetRenderContext, DesignAssetRenderer, DesignSystemDefinition, DesignTokenMap, } from "./foundations/tokens/index.js";
 export { boxIconography, boxIconographyAliases } from "./foundations/icons/index.js";
+export { anchorFloating, parsePlacement, resolvePosition, trackAnchor, } from "./foundations/overlay/index.js";
+export type { OverlayAlign, OverlayPlacement, OverlaySide, PositionOptions, PositionResult, } from "./foundations/overlay/index.js";
 export * from "./components/actions/button.js";
 export * from "./components/actions/button-group.js";
 export * from "./components/actions/icon-button.js";
@@ -17,10 +19,13 @@ export * from "./components/collections/datalist-item.js";
 export * from "./components/collections/draggable-list.js";
 export * from "./components/collections/grid-view.js";
 export * from "./components/collections/pagination.js";
+export * from "./components/collections/table.js";
+export * from "./components/collections/thumbnail-card.js";
 export * from "./components/collections/tree.js";
 export * from "./components/collections/tree-grid.js";
 export * from "./components/feedback/alert.js";
 export * from "./components/feedback/badge.js";
+export * from "./components/feedback/badgeable.js";
 export * from "./components/feedback/chip.js";
 export * from "./components/feedback/empty-state.js";
 export * from "./components/feedback/error-mask.js";
@@ -36,6 +41,7 @@ export * from "./components/files/drop-zone.js";
 export * from "./components/identity/avatar.js";
 export * from "./components/identity/persona.js";
 export * from "./components/navigation/accordion.js";
+export * from "./components/navigation/breadcrumb.js";
 export * from "./components/navigation/tabs.js";
 export * from "./components/visuals/illustration.js";
 export * from "./components/forms/checkbox.js";
@@ -71,6 +77,7 @@ export * from "./components/layout/nav-sidebar.js";
 export * from "./components/layout/section.js";
 export * from "./components/layout/sidebar-toggle-button.js";
 export * from "./components/layout/split-view.js";
+export * from "./components/overlays/context-menu.js";
 export * from "./components/overlays/dialog.js";
 export * from "./components/overlays/drawer.js";
 export * from "./components/overlays/popover.js";

package/dist/index.js

@@ -3,6 +3,8 @@ export { Controller, TypedEventEmitter } from "./core/index.js";
 // Foundations
 export { DESIGN_SYSTEM_CHANGE_EVENT, applyDesignTokens, boxDarkDesignSystem, boxDefaultDesignSystem, createDesignTokenStyleText, getActiveDesignSystem, getDesignSystem, listDesignSystems, registerBoxDarkDesignSystem, registerBoxDefaultDesignSystem, registerDesignSystem, resolveDesignIcon, resolveDesignIllustration, resolveDesignSystemTokens, setActiveDesignSystem, } from "./foundations/tokens/index.js";
 export { boxIconography, boxIconographyAliases } from "./foundations/icons/index.js";
+// Foundations: viewport-aware overlay positioning (for building custom overlays)
+export { anchorFloating, parsePlacement, resolvePosition, trackAnchor, } from "./foundations/overlay/index.js";
 // Components: actions
 export * from "./components/actions/button.js";
 export * from "./components/actions/button-group.js";
@@ -18,11 +20,14 @@ export * from "./components/collections/datalist-item.js";
 export * from "./components/collections/draggable-list.js";
 export * from "./components/collections/grid-view.js";
 export * from "./components/collections/pagination.js";
+export * from "./components/collections/table.js";
+export * from "./components/collections/thumbnail-card.js";
 export * from "./components/collections/tree.js";
 export * from "./components/collections/tree-grid.js";
 // Components: feedback
 export * from "./components/feedback/alert.js";
 export * from "./components/feedback/badge.js";
+export * from "./components/feedback/badgeable.js";
 export * from "./components/feedback/chip.js";
 export * from "./components/feedback/empty-state.js";
 export * from "./components/feedback/error-mask.js";
@@ -41,6 +46,7 @@ export * from "./components/identity/avatar.js";
 export * from "./components/identity/persona.js";
 // Components: navigation
 export * from "./components/navigation/accordion.js";
+export * from "./components/navigation/breadcrumb.js";
 export * from "./components/navigation/tabs.js";
 // Components: visuals
 export * from "./components/visuals/illustration.js";
@@ -80,6 +86,7 @@ export * from "./components/layout/section.js";
 export * from "./components/layout/sidebar-toggle-button.js";
 export * from "./components/layout/split-view.js";
 // Components: overlays
+export * from "./components/overlays/context-menu.js";
 export * from "./components/overlays/dialog.js";
 export * from "./components/overlays/drawer.js";
 export * from "./components/overlays/popover.js";

package/dist/patterns/content-explorer/adapters/table.js

@@ -17,6 +17,10 @@ const elementStyles = `
           display: block;
           color: inherit;
           font: inherit;
+          /* The table's header row is nowrap, so its min-content width is wide.
+             Without this the host refuses to shrink below that width and pushes
+             out of grid/flex containers instead of scrolling. */
+          min-width: 0;
         }
 
         [part="table-shell"] {
@@ -24,7 +28,10 @@ const elementStyles = `
           border-radius: ${boePanel.radius};
           background: var(--boe-token-surface-surface, #ffffff);
           box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
-          overflow: hidden;
+          /* Scroll the table within its own frame when the host is narrower
+             than the table's intrinsic width. */
+          overflow-x: auto;
+          overflow-y: hidden;
         }
 
         [part="table-shell"][aria-busy="true"] {

package/dist/patterns/search/filter-bar.js

@@ -13,6 +13,9 @@ const elementStyles = `
           display: block;
           color: inherit;
           font: inherit;
+          /* Let the host shrink below its controls' intrinsic width when a
+             container constrains it. */
+          min-width: 0;
           --_obp-surface: var(--boe-token-surface-surface, #ffffff);
           --_obp-surface-muted: var(--boe-token-surface-surface-secondary, #fbfbfb);
           --_obp-border: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
@@ -38,9 +41,17 @@ const elementStyles = `
           text-transform: uppercase;
         }
 
+        /* Zero track floors, not fixed rem floors. The columns still size to
+           their content (so a shrink-to-fit host keeps the three-up layout at
+           its natural width) but can compress when a container constrains the
+           bar, instead of forcing the host wider than its container.
+           auto-fit was rejected: it collapses to one column whenever the host
+           is shrink-to-fit. A container query was too: container-type makes
+           the host's width independent of its content, which collapses the bar
+           anywhere it isn't explicitly stretched. */
         [part="controls"] {
           display: grid;
-          grid-template-columns: minmax(14rem, 1.4fr) repeat(2, minmax(10rem, 0.8fr));
+          grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr));
           gap: ${boePanel.gap};
           align-items: center;
         }
@@ -100,11 +111,6 @@ const elementStyles = `
           color: var(--_obp-brand);
         }
 
-        @media (max-width: 900px) {
-          [part="controls"] {
-            grid-template-columns: 1fr;
-          }
-        }
       `;
 export class BoxFilterBarElement extends BaseElement {
     static get observedAttributes() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unofficialbox/box-open-elements",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Box Open Elements: an open, framework-agnostic design system and web component library for Box-style experiences",
   "license": "MIT",
   "homepage": "https://unofficialbox.github.io/box-open-elements",