@unofficialbox/box-open-elements 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,87 @@
+export { Controller, TypedEventEmitter } from "./core/index.js";
+export type { EventMap, Unsubscribe } from "./core/index.js";
+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 * from "./components/actions/button.js";
+export * from "./components/actions/button-group.js";
+export * from "./components/actions/icon-button.js";
+export * from "./components/actions/link-button.js";
+export * from "./components/actions/menu.js";
+export * from "./components/actions/segmented-control.js";
+export * from "./components/actions/menu-item.js";
+export * from "./components/collections/card.js";
+export * from "./components/collections/carousel.js";
+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/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/chip.js";
+export * from "./components/feedback/empty-state.js";
+export * from "./components/feedback/error-mask.js";
+export * from "./components/feedback/help-text.js";
+export * from "./components/feedback/nudge.js";
+export * from "./components/feedback/progress-bar.js";
+export * from "./components/feedback/progress-ring.js";
+export * from "./components/feedback/progress-steps.js";
+export * from "./components/feedback/skeleton.js";
+export * from "./components/feedback/spinner.js";
+export * from "./components/feedback/toast.js";
+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/tabs.js";
+export * from "./components/visuals/illustration.js";
+export * from "./components/forms/checkbox.js";
+export * from "./components/forms/color-picker.js";
+export * from "./components/forms/dual-listbox.js";
+export * from "./components/forms/rating.js";
+export * from "./components/forms/rich-text-input.js";
+export * from "./components/forms/calendar.js";
+export * from "./components/forms/date-field.js";
+export * from "./components/forms/number-input.js";
+export * from "./components/forms/range-slider.js";
+export * from "./components/forms/slider.js";
+export * from "./components/forms/spin-button.js";
+export * from "./components/forms/switch.js";
+export * from "./components/forms/tag-input.js";
+export * from "./components/forms/time-field.js";
+export * from "./components/forms/category-selector.js";
+export * from "./components/forms/checkbox-group.js";
+export * from "./components/forms/combobox.js";
+export * from "./components/forms/fieldset.js";
+export * from "./components/forms/pill-cloud.js";
+export * from "./components/forms/pill-selector-dropdown.js";
+export * from "./components/forms/dropdown.js";
+export * from "./components/forms/multi-select.js";
+export * from "./components/forms/radio-group.js";
+export * from "./components/forms/search-field.js";
+export * from "./components/forms/select.js";
+export * from "./components/forms/text-area.js";
+export * from "./components/forms/text-field.js";
+export * from "./components/layout/app-shell.js";
+export * from "./components/layout/divider.js";
+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/dialog.js";
+export * from "./components/overlays/drawer.js";
+export * from "./components/overlays/popover.js";
+export * from "./components/overlays/tooltip.js";
+export * from "./patterns/content-explorer/index.js";
+export * from "./patterns/search/index.js";
+export * from "./patterns/item/index.js";
+export * from "./patterns/metadata/index.js";
+export * from "./patterns/share/index.js";
+export * from "./patterns/preview/index.js";
+export * from "./patterns/file-request/index.js";
+export * from "./patterns/task/index.js";
+export * from "./patterns/governance/index.js";
+export * from "./patterns/insights/index.js";

package/dist/index.js

@@ -0,0 +1,98 @@
+// Core runtime
+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";
+// Components: actions
+export * from "./components/actions/button.js";
+export * from "./components/actions/button-group.js";
+export * from "./components/actions/icon-button.js";
+export * from "./components/actions/link-button.js";
+export * from "./components/actions/menu.js";
+export * from "./components/actions/segmented-control.js";
+export * from "./components/actions/menu-item.js";
+// Components: collections
+export * from "./components/collections/card.js";
+export * from "./components/collections/carousel.js";
+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/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/chip.js";
+export * from "./components/feedback/empty-state.js";
+export * from "./components/feedback/error-mask.js";
+export * from "./components/feedback/help-text.js";
+export * from "./components/feedback/nudge.js";
+export * from "./components/feedback/progress-bar.js";
+export * from "./components/feedback/progress-ring.js";
+export * from "./components/feedback/progress-steps.js";
+export * from "./components/feedback/skeleton.js";
+export * from "./components/feedback/spinner.js";
+export * from "./components/feedback/toast.js";
+// Components: files
+export * from "./components/files/drop-zone.js";
+// Components: identity
+export * from "./components/identity/avatar.js";
+export * from "./components/identity/persona.js";
+// Components: navigation
+export * from "./components/navigation/accordion.js";
+export * from "./components/navigation/tabs.js";
+// Components: visuals
+export * from "./components/visuals/illustration.js";
+// Components: forms
+export * from "./components/forms/checkbox.js";
+export * from "./components/forms/color-picker.js";
+export * from "./components/forms/dual-listbox.js";
+export * from "./components/forms/rating.js";
+export * from "./components/forms/rich-text-input.js";
+export * from "./components/forms/calendar.js";
+export * from "./components/forms/date-field.js";
+export * from "./components/forms/number-input.js";
+export * from "./components/forms/range-slider.js";
+export * from "./components/forms/slider.js";
+export * from "./components/forms/spin-button.js";
+export * from "./components/forms/switch.js";
+export * from "./components/forms/tag-input.js";
+export * from "./components/forms/time-field.js";
+export * from "./components/forms/category-selector.js";
+export * from "./components/forms/checkbox-group.js";
+export * from "./components/forms/combobox.js";
+export * from "./components/forms/fieldset.js";
+export * from "./components/forms/pill-cloud.js";
+export * from "./components/forms/pill-selector-dropdown.js";
+export * from "./components/forms/dropdown.js";
+export * from "./components/forms/multi-select.js";
+export * from "./components/forms/radio-group.js";
+export * from "./components/forms/search-field.js";
+export * from "./components/forms/select.js";
+export * from "./components/forms/text-area.js";
+export * from "./components/forms/text-field.js";
+// Components: layout
+export * from "./components/layout/app-shell.js";
+export * from "./components/layout/divider.js";
+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";
+// Components: overlays
+export * from "./components/overlays/dialog.js";
+export * from "./components/overlays/drawer.js";
+export * from "./components/overlays/popover.js";
+export * from "./components/overlays/tooltip.js";
+// Patterns: content explorer (headless blocks, contracts, transport, adapters)
+export * from "./patterns/content-explorer/index.js";
+// Patterns: compositions and workflow areas
+export * from "./patterns/search/index.js";
+export * from "./patterns/item/index.js";
+export * from "./patterns/metadata/index.js";
+export * from "./patterns/share/index.js";
+export * from "./patterns/preview/index.js";
+export * from "./patterns/file-request/index.js";
+export * from "./patterns/task/index.js";
+export * from "./patterns/governance/index.js";
+export * from "./patterns/insights/index.js";

package/dist/patterns/content-explorer/actions/controller.d.ts

@@ -0,0 +1,12 @@
+import { Controller } from "../../../core/controller.js";
+import type { ExplorerItem, ExplorerItemAction } from "../types.js";
+import type { ExplorerActionsControllerOptions, ExplorerActionsEvents, ExplorerActionsState } from "./types.js";
+export declare class ExplorerActionsController extends Controller<ExplorerActionsState, ExplorerActionsEvents> {
+    private itemActions;
+    private itemsById;
+    constructor(options?: ExplorerActionsControllerOptions);
+    setItems(items: ExplorerItem[]): void;
+    getItemActions(itemId: string): ExplorerItemAction[];
+    invokeItemAction(itemId: string, actionId: string): void;
+    private resolveActionsForItem;
+}

package/dist/patterns/content-explorer/actions/controller.js

@@ -0,0 +1,36 @@
+import { Controller } from "../../../core/controller.js";
+const createInitialState = () => ({
+    availableActionsByItemId: {},
+});
+export class ExplorerActionsController extends Controller {
+    itemActions;
+    itemsById = new Map();
+    constructor(options = {}) {
+        super(createInitialState());
+        this.itemActions = options.itemActions ?? [];
+    }
+    setItems(items) {
+        this.itemsById = new Map(items.map(item => [item.id, item]));
+        const availableActionsByItemId = Object.fromEntries(items.map(item => [item.id, this.resolveActionsForItem(item)]));
+        this.setState({
+            availableActionsByItemId,
+        });
+    }
+    getItemActions(itemId) {
+        return this.state.availableActionsByItemId[itemId] ?? [];
+    }
+    invokeItemAction(itemId, actionId) {
+        const item = this.itemsById.get(itemId);
+        if (!item) {
+            return;
+        }
+        const action = this.getItemActions(itemId).find(entry => entry.id === actionId);
+        if (!action) {
+            return;
+        }
+        this.emit("itemActionInvoked", { action, item });
+    }
+    resolveActionsForItem(item) {
+        return this.itemActions.filter(action => (action.itemTypes ? action.itemTypes.includes(item.type) : true));
+    }
+}

package/dist/patterns/content-explorer/actions/index.d.ts

@@ -0,0 +1,2 @@
+export { ExplorerActionsController } from "./controller.js";
+export type { ExplorerActionsControllerOptions, ExplorerActionsEvents, ExplorerActionsState, } from "./types.js";

package/dist/patterns/content-explorer/actions/index.js

@@ -0,0 +1 @@
+export { ExplorerActionsController } from "./controller.js";

package/dist/patterns/content-explorer/actions/types.d.ts

@@ -0,0 +1,13 @@
+import type { ExplorerItem, ExplorerItemAction } from "../types.js";
+export interface ExplorerActionsControllerOptions {
+    itemActions?: ExplorerItemAction[];
+}
+export interface ExplorerActionsState {
+    availableActionsByItemId: Record<string, ExplorerItemAction[]>;
+}
+export interface ExplorerActionsEvents {
+    itemActionInvoked: {
+        action: ExplorerItemAction;
+        item: ExplorerItem;
+    };
+}

package/dist/patterns/content-explorer/actions/types.js

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

package/dist/patterns/content-explorer/adapters/action-menu.d.ts

@@ -0,0 +1,24 @@
+import { ContentExplorerController } from "../controller.js";
+import { BaseElement } from "../../../core/index.js";
+export declare class BoxExplorerActionMenuElement extends BaseElement {
+    private controllerValue;
+    private itemIdValue;
+    private open;
+    private wasOpen;
+    private unsubscribeFns;
+    private menuId;
+    private hostEl;
+    get controller(): ContentExplorerController | null;
+    set controller(value: ContentExplorerController | null);
+    get itemId(): string | null;
+    set itemId(value: string | null);
+    connectedCallback(): void;
+    private refresh;
+    disconnectedCallback(): void;
+    private bindController;
+    private teardownSubscriptions;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxExplorerActionMenuElement: (tagName?: string) => typeof BoxExplorerActionMenuElement;

package/dist/patterns/content-explorer/adapters/action-menu.js

@@ -0,0 +1,312 @@
+import { BaseElement } from "../../../core/index.js";
+import { applyRovingTabindex, handleRovingKeydown } from "../../../foundations/a11y/index.js";
+import { boeFocusRingShadow, boeNeutralInteractiveStyles, } from "../../../foundations/tokens/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../../foundations/motion/index.js";
+import { boePanel } from "../../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-explorer-action-menu";
+const toKebabCase = (value) => value.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const elementStyles = `
+        :host {
+          display: inline-grid;
+          position: relative;
+          color: inherit;
+          font: inherit;
+        }
+
+        [part="menu-shell"] {
+          position: relative;
+          display: inline-grid;
+          justify-items: end;
+        }
+
+        [part="trigger"] {
+          width: 2rem;
+          min-width: 2rem;
+          height: 2rem;
+          display: inline-grid;
+          place-items: center;
+          appearance: none;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 86%, var(--boe-token-surface-surface, #ffffff) 14%);
+          border-radius: ${boePanel.radius};
+          background: color-mix(in srgb, var(--boe-token-surface-surface, #ffffff) 94%, #eef4fb 6%);
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          font: inherit;
+          cursor: pointer;
+          padding: 0;
+          box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+          transition:
+            border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+            background-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+            color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+            box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+        }
+
+        ${boeNeutralInteractiveStyles('[part="trigger"]')}
+
+        [part="trigger"][aria-expanded="true"],
+        [part="trigger"][aria-expanded="true"]:hover:not(:disabled) {
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+          border-color: var(--boe-token-surface-surface-brand, #0061d5);
+          color: var(--boe-token-text-text-on-brand, #ffffff);
+          box-shadow: 0 10px 22px rgba(0, 97, 213, 0.18);
+        }
+
+        [part="trigger"][aria-expanded="true"]:focus-visible {
+          outline: none;
+          box-shadow:
+            ${boeFocusRingShadow},
+            0 10px 22px rgba(0, 97, 213, 0.18);
+        }
+
+        [part="trigger-label"] {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          padding: 0;
+          margin: -1px;
+          overflow: hidden;
+          clip: rect(0, 0, 0, 0);
+          white-space: nowrap;
+          border: 0;
+        }
+
+        [part="trigger-icon"] {
+          font-size: 1rem;
+          line-height: 1;
+          transform: translateY(-1px);
+        }
+
+        [part="menu"] {
+          position: absolute;
+          top: calc(100% + 8px);
+          right: 0;
+          z-index: 3;
+          min-width: 11rem;
+          margin: 0;
+          padding: 0.45rem;
+          display: grid;
+          gap: 0.2rem;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 84%, var(--boe-token-surface-surface, #ffffff) 16%);
+          border-radius: ${boePanel.radius};
+          background: var(--boe-token-surface-surface, #ffffff);
+          box-shadow: 0 18px 32px rgba(0, 67, 146, 0.12);
+        }
+
+        [part="menu-item"] {
+          width: 100%;
+          appearance: none;
+          text-align: left;
+          border: 0;
+          border-radius: ${boePanel.radius};
+          background: transparent;
+          color: var(--boe-token-text-text, #222222);
+          font: inherit;
+          font-size: 0.92rem;
+          padding: 0.6rem 0.7rem;
+          cursor: pointer;
+        }
+
+        ${boeNeutralInteractiveStyles('[part="menu-item"]')}
+      `;
+export class BoxExplorerActionMenuElement extends BaseElement {
+    controllerValue = null;
+    itemIdValue = null;
+    open = false;
+    wasOpen = false;
+    unsubscribeFns = [];
+    menuId = `box-action-menu-${Math.random().toString(36).slice(2, 10)}`;
+    hostEl;
+    get controller() {
+        return this.controllerValue;
+    }
+    set controller(value) {
+        this.controllerValue = value;
+        this.bindController();
+        this.refresh();
+    }
+    get itemId() {
+        return this.itemIdValue;
+    }
+    set itemId(value) {
+        this.itemIdValue = value;
+        this.open = false;
+        this.refresh();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.bindController();
+        this.refresh();
+    }
+    refresh() {
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    disconnectedCallback() {
+        this.teardownSubscriptions();
+    }
+    bindController() {
+        this.teardownSubscriptions();
+        if (!this.isConnected || !this.controllerValue) {
+            return;
+        }
+        this.unsubscribeFns.push(this.controllerValue.subscribe("itemsChanged", payload => {
+            this.dispatchEvent(new CustomEvent("items-changed", {
+                bubbles: true,
+                composed: true,
+                detail: payload,
+            }));
+            this.refresh();
+        }));
+        this.unsubscribeFns.push(this.controllerValue.subscribe("selectionChanged", () => {
+            this.refresh();
+        }));
+    }
+    teardownSubscriptions() {
+        for (const unsubscribe of this.unsubscribeFns) {
+            unsubscribe();
+        }
+        this.unsubscribeFns = [];
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <div part="content-host"></div>
+    `;
+        this.hostEl = this.shadowRoot.querySelector('[part="content-host"]');
+    }
+    setupListeners() {
+        this.shadowRoot?.addEventListener("click", event => {
+            const target = event.target;
+            const trigger = target.closest('[part="trigger"]');
+            if (trigger && this.shadowRoot?.contains(trigger)) {
+                this.open = !this.open;
+                this.update();
+                return;
+            }
+            const menuItem = target.closest('[part="menu-item"]');
+            if (menuItem && this.shadowRoot?.contains(menuItem)) {
+                const actionId = menuItem.getAttribute("data-action-id");
+                if (this.itemIdValue && actionId) {
+                    const item = this.controllerValue?.getState().items.find(entry => entry.id === this.itemIdValue) ?? null;
+                    const action = this.controllerValue?.getItemActions(this.itemIdValue).find(entry => entry.id === actionId) ?? null;
+                    this.controllerValue?.invokeItemAction(this.itemIdValue, actionId);
+                    if (item && action) {
+                        this.dispatchEvent(new CustomEvent(toKebabCase("itemActionInvoked"), {
+                            bubbles: true,
+                            composed: true,
+                            detail: { action, item },
+                        }));
+                    }
+                    this.open = false;
+                    this.update();
+                }
+            }
+        });
+        this.shadowRoot?.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            const target = keyboardEvent.target;
+            const trigger = target.closest('[part="trigger"]');
+            if (trigger && this.shadowRoot?.contains(trigger)) {
+                if (keyboardEvent.key === "ArrowDown" || keyboardEvent.key === "Enter" || keyboardEvent.key === " ") {
+                    keyboardEvent.preventDefault();
+                    this.open = true;
+                    this.update();
+                }
+                else if (keyboardEvent.key === "Escape" && this.open) {
+                    keyboardEvent.preventDefault();
+                    this.open = false;
+                    this.update();
+                }
+                return;
+            }
+            const menuItem = target.closest('[part="menu-item"]');
+            if (!menuItem || !this.shadowRoot?.contains(menuItem)) {
+                return;
+            }
+            if (keyboardEvent.key === "Escape") {
+                keyboardEvent.preventDefault();
+                this.open = false;
+                this.update();
+                queueMicrotask(() => {
+                    this.shadowRoot?.querySelector('[part="trigger"]')?.focus();
+                });
+                return;
+            }
+            const menuItems = Array.from(this.shadowRoot.querySelectorAll('[part="menu-item"]'));
+            handleRovingKeydown(keyboardEvent, menuItems, { orientation: "vertical" });
+        });
+    }
+    update() {
+        if (!this.hostEl) {
+            return;
+        }
+        const actions = this.itemIdValue ? (this.controllerValue?.getItemActions(this.itemIdValue) ?? []) : [];
+        const justOpened = this.open && !this.wasOpen;
+        this.wasOpen = this.open;
+        const active = this.shadowRoot?.activeElement;
+        const focusedActionId = active?.getAttribute?.("data-action-id") ?? null;
+        const focusedTrigger = active?.getAttribute?.("part") === "trigger";
+        if (!this.itemIdValue || actions.length === 0) {
+            this.hostEl.innerHTML = `<span part="empty"></span>`;
+            return;
+        }
+        const menuMarkup = this.open
+            ? `<div id="${this.menuId}" part="menu" role="menu">${actions
+                .map(action => `<button type="button" part="menu-item" role="menuitem" data-action-id="${escapeHtml(action.id)}">${escapeHtml(action.label)}</button>`)
+                .join("")}</div>`
+            : "";
+        this.hostEl.innerHTML = `
+      <div part="menu-shell">
+        <button
+          type="button"
+          part="trigger"
+          aria-label="Open item actions"
+          aria-expanded="${this.open ? "true" : "false"}"
+          aria-haspopup="menu"
+          ${this.open ? `aria-controls="${this.menuId}"` : ""}
+        ><span part="trigger-label">Actions</span><span part="trigger-icon" aria-hidden="true">⋯</span></button>
+        ${menuMarkup}
+      </div>
+    `;
+        if (this.open) {
+            const menuItems = Array.from(this.shadowRoot?.querySelectorAll('[part="menu-item"]') ?? []);
+            applyRovingTabindex(menuItems, 0);
+        }
+        if (justOpened) {
+            queueMicrotask(() => {
+                this.shadowRoot?.querySelector('[part="menu-item"]')?.focus();
+            });
+            return;
+        }
+        if (focusedActionId && this.open) {
+            queueMicrotask(() => {
+                const match = Array.from(this.shadowRoot?.querySelectorAll('[part="menu-item"]') ?? []).find(node => node.getAttribute("data-action-id") === focusedActionId);
+                match?.focus();
+            });
+            return;
+        }
+        if (focusedTrigger) {
+            queueMicrotask(() => {
+                this.shadowRoot?.querySelector('[part="trigger"]')?.focus();
+            });
+        }
+    }
+}
+export const defineBoxExplorerActionMenuElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxExplorerActionMenuElement);
+    return BoxExplorerActionMenuElement;
+};

package/dist/patterns/content-explorer/adapters/breadcrumbs.d.ts

@@ -0,0 +1,15 @@
+import { ContentExplorerController } from "../controller.js";
+import { BaseElement } from "../../../core/index.js";
+export declare class BoxExplorerBreadcrumbsElement extends BaseElement {
+    private controllerValue;
+    private unsubscribeFns;
+    get controller(): ContentExplorerController | null;
+    set controller(value: ContentExplorerController | null);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private bindController;
+    private teardownSubscriptions;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxExplorerBreadcrumbsElement: (tagName?: string) => typeof BoxExplorerBreadcrumbsElement;