@unofficialbox/box-open-elements 0.1.0

package/dist/components/actions/icon-button.js

@@ -0,0 +1,187 @@
+import { DESIGN_SYSTEM_CHANGE_EVENT, resolveDesignIcon, } from "../../foundations/tokens/registry.js";
+import { BaseElement } from "../../core/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-icon-button";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const iconButtonStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="button"] {
+    appearance: none;
+    width: 2rem;
+    height: 2rem;
+    display: inline-grid;
+    place-items: center;
+    padding: 0;
+    font: inherit;
+    border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);
+    border-radius: ${boeRadius.control};
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    cursor: pointer;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+    transition:
+      background-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="button"]:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 28%, var(--boe-token-stroke-stroke, #e8e8e8) 72%);
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 8%, var(--boe-token-surface-surface, #ffffff) 92%);
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+  }
+
+  [part="button"]:active:not(:disabled) {
+    background: color-mix(in srgb, var(--boe-token-surface-item-surface-selected, #f2f7fd) 70%, var(--boe-token-surface-surface, #ffffff) 30%);
+  }
+
+  [part="button"][data-tone="primary"] {
+    border-color: transparent;
+    background: var(--boe-token-surface-surface-brand, #0061d5);
+    color: var(--boe-token-text-text-on-brand, #ffffff);
+  }
+
+  [part="button"][data-tone="primary"]:hover:not(:disabled) {
+    background: var(--boe-token-surface-surface-brand-hover, #006ae9);
+    color: var(--boe-token-text-text-on-brand, #ffffff);
+  }
+
+  [part="button"][data-tone="primary"]:active:not(:disabled) {
+    background: var(--boe-token-surface-surface-brand-pressed, #004eac);
+  }
+
+  [part="button"][data-tone="danger"] {
+    border-color: transparent;
+    background: var(--boe-token-surface-status-surface-error, #ed3757);
+    color: var(--boe-token-text-text-on-brand, #ffffff);
+  }
+
+  [part="button"][data-tone="danger"]:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 90%, var(--boe-token-surface-surface, #ffffff) 10%);
+    color: var(--boe-token-text-text-on-brand, #ffffff);
+  }
+
+  [part="button"]:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
+  }
+
+  [part="button"]:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+    box-shadow: none;
+  }
+
+  [part="icon"] {
+    display: inline-grid;
+    place-items: center;
+    font-size: 1rem;
+    line-height: 1;
+  }
+
+  [part="icon"] svg {
+    width: 1.1em;
+    height: 1.1em;
+    display: block;
+    fill: currentColor;
+  }
+`;
+export class BoxIconButtonElement extends BaseElement {
+    handleDesignSystemChange = () => {
+        if (this.isRendered) {
+            this.update();
+        }
+    };
+    static get observedAttributes() {
+        return ["disabled", "icon", "label", "tone"];
+    }
+    buttonEl;
+    iconEl;
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    get icon() {
+        return this.getAttribute("icon") ?? "•";
+    }
+    set icon(value) {
+        this.setAttribute("icon", value);
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Icon button";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "secondary";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    connectedCallback() {
+        globalThis.addEventListener?.(DESIGN_SYSTEM_CHANGE_EVENT, this.handleDesignSystemChange);
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        globalThis.removeEventListener?.(DESIGN_SYSTEM_CHANGE_EVENT, this.handleDesignSystemChange);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${iconButtonStyles}</style>
+      <button type="button" part="button">
+        <span part="icon" aria-hidden="true"></span>
+      </button>
+    `;
+        this.buttonEl = this.shadowRoot.querySelector('[part="button"]');
+        this.iconEl = this.shadowRoot.querySelector('[part="icon"]');
+    }
+    update() {
+        if (!this.buttonEl || !this.iconEl) {
+            return;
+        }
+        const resolvedIcon = resolveDesignIcon(this.icon);
+        const iconMarkup = resolvedIcon ?? escapeHtml(this.icon);
+        this.buttonEl.setAttribute("aria-label", this.label);
+        this.buttonEl.setAttribute("title", this.label);
+        this.buttonEl.dataset.tone = this.tone;
+        if (this.disabled) {
+            this.buttonEl.setAttribute("disabled", "");
+        }
+        else {
+            this.buttonEl.removeAttribute("disabled");
+        }
+        this.iconEl.dataset.iconSource = resolvedIcon ? "design-system" : "text";
+        this.iconEl.innerHTML = iconMarkup;
+    }
+}
+export const defineBoxIconButtonElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxIconButtonElement);
+    return BoxIconButtonElement;
+};

package/dist/components/actions/link-button.d.ts

@@ -0,0 +1,14 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxLinkButtonElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private linkEl;
+    get href(): string;
+    set href(value: string);
+    get label(): string;
+    set label(value: string);
+    get tone(): string;
+    set tone(value: string);
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxLinkButtonElement: (tagName?: string) => typeof BoxLinkButtonElement;

package/dist/components/actions/link-button.js

@@ -0,0 +1,137 @@
+import { BaseElement } from "../../core/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-link-button";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+/**
+ * Reject dangerous URL schemes (javascript:, data:, vbscript:) before the href
+ * reaches the DOM. `escapeHtml` prevents attribute breakout but does NOT stop a
+ * scheme from executing on click, so navigable URLs must be scheme-validated.
+ * Relative URLs, fragments, and query strings have no scheme and are allowed.
+ */
+const safeHref = (value) => {
+    // Strip tab/newline/CR first: browsers ignore them in URLs, so "java\nscript:"
+    // normalizes back to the javascript: scheme on navigation and must not slip past.
+    const trimmed = value.replace(/[\t\n\r]/g, "").trim();
+    const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(trimmed);
+    if (!scheme)
+        return trimmed; // relative / fragment / query — no scheme to abuse
+    return ["http", "https", "mailto", "tel"].includes(scheme[1].toLowerCase()) ? trimmed : "#";
+};
+const linkButtonStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="link"] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35em;
+    font: inherit;
+    font-weight: 600;
+    line-height: 1.2;
+    padding: 0.35em 0.6em;
+    margin: -0.35em -0.6em;
+    border-radius: ${boeRadius.control};
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    text-decoration: none;
+    text-underline-offset: 0.2em;
+    cursor: pointer;
+    transition:
+      background-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="link"]:hover {
+    text-decoration: underline;
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 8%, transparent);
+    color: var(--boe-token-surface-surface-brand-hover, #006ae9);
+  }
+
+  [part="link"]:active {
+    color: var(--boe-token-surface-surface-brand-pressed, #004eac);
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 12%, transparent);
+  }
+
+  [part="link"]:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
+  }
+
+  [part="link"][data-tone="neutral"] {
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="link"][data-tone="neutral"]:hover {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="link"][data-tone="danger"] {
+    color: var(--boe-token-surface-status-surface-error, #ed3757);
+  }
+
+  [part="link"][data-tone="danger"]:hover {
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 8%, transparent);
+    color: var(--boe-token-surface-status-surface-error, #ed3757);
+  }
+`;
+export class BoxLinkButtonElement extends BaseElement {
+    static get observedAttributes() {
+        return ["href", "label", "tone"];
+    }
+    linkEl;
+    get href() {
+        return this.getAttribute("href") ?? "#";
+    }
+    set href(value) {
+        this.setAttribute("href", value);
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Learn more";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "primary";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${linkButtonStyles}</style>
+      <a part="link"></a>
+    `;
+        this.linkEl = this.shadowRoot.querySelector('[part="link"]');
+    }
+    update() {
+        if (!this.linkEl) {
+            return;
+        }
+        this.linkEl.dataset.tone = this.tone;
+        this.linkEl.setAttribute("href", escapeHtml(safeHref(this.href)));
+        this.linkEl.setAttribute("aria-label", this.label);
+        this.linkEl.textContent = this.label;
+    }
+}
+export const defineBoxLinkButtonElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxLinkButtonElement);
+    return BoxLinkButtonElement;
+};

package/dist/components/actions/menu-item.d.ts

@@ -0,0 +1,17 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxMenuItemElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private itemEl;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get value(): string;
+    set value(value: string);
+    get selected(): boolean;
+    set selected(value: boolean);
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxMenuItemElement: (tagName?: string) => typeof BoxMenuItemElement;

package/dist/components/actions/menu-item.js

@@ -0,0 +1,137 @@
+import { BaseElement } from "../../core/index.js";
+import { boeControl, boeOverlay } from "../../foundations/geometry/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-menu-item";
+const menuItemStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="item"] {
+    width: 100%;
+    appearance: none;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    min-height: ${boeOverlay.itemMinHeight};
+    text-align: left;
+    border: 0;
+    border-radius: ${boeOverlay.itemRadius};
+    background: transparent;
+    color: var(--boe-token-text-text, #222222);
+    font: inherit;
+    font-size: ${boeControl.fontSize};
+    padding: ${boeOverlay.itemPadding};
+    cursor: pointer;
+    transition:
+      background-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="item"][data-selected="true"] {
+    background: var(--boe-token-surface-item-surface-selected, #f2f7fd);
+    color: var(--boe-token-text-text, #222222);
+    font-weight: 600;
+  }
+
+  ${boeNeutralInteractiveStyles('[part="item"]')}
+
+  [part="item"][data-selected="true"]:hover:not(:disabled),
+  [part="item"][data-selected="true"]:active:not(:disabled) {
+    background: var(--boe-token-surface-item-surface-selected, #f2f7fd);
+  }
+
+  [part="item"]:hover:not(:disabled),
+  [part="item"]:focus-visible:not(:disabled) {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="item"]:disabled {
+    opacity: ${boeControl.disabledOpacity};
+  }
+`;
+export class BoxMenuItemElement extends BaseElement {
+    static get observedAttributes() {
+        return ["disabled", "label", "selected", "value"];
+    }
+    itemEl;
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Menu Item";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get value() {
+        return this.getAttribute("value") ?? "";
+    }
+    set value(value) {
+        this.setAttribute("value", value);
+    }
+    get selected() {
+        return this.hasAttribute("selected");
+    }
+    set selected(value) {
+        if (value) {
+            this.setAttribute("selected", "");
+        }
+        else {
+            this.removeAttribute("selected");
+        }
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${menuItemStyles}</style>
+      <button type="button" part="item" role="menuitemradio"></button>
+    `;
+        this.itemEl = this.shadowRoot.querySelector('[part="item"]');
+    }
+    setupListeners() {
+        this.itemEl.addEventListener("click", () => {
+            if (this.disabled) {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent("selected", {
+                bubbles: true,
+                composed: true,
+                detail: { value: this.value, label: this.label },
+            }));
+        });
+    }
+    update() {
+        if (!this.itemEl) {
+            return;
+        }
+        this.itemEl.dataset.selected = String(this.selected);
+        this.itemEl.setAttribute("aria-checked", String(this.selected));
+        this.itemEl.setAttribute("aria-disabled", String(this.disabled));
+        this.itemEl.disabled = this.disabled;
+        this.itemEl.textContent = this.label;
+    }
+}
+export const defineBoxMenuItemElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxMenuItemElement);
+    return BoxMenuItemElement;
+};

package/dist/components/actions/menu.d.ts

@@ -0,0 +1,22 @@
+import { BaseElement } from "../../core/index.js";
+type BoxMenuItem = {
+    disabled?: boolean;
+    id: string;
+    label: string;
+};
+export declare class BoxMenuElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private menuEl;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get items(): BoxMenuItem[];
+    set items(value: BoxMenuItem[]);
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private enabledMenuItems;
+    protected update(): void;
+}
+export declare const defineBoxMenuElement: (tagName?: string) => typeof BoxMenuElement;
+export {};

package/dist/components/actions/menu.js

@@ -0,0 +1,178 @@
+import { BaseElement } from "../../core/index.js";
+import { applyRovingTabindex, focusRovingItem, nextRovingIndex, } from "../../foundations/a11y/index.js";
+import { boeControl, boeOverlay } from "../../foundations/geometry/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-menu";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const menuStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="menu"] {
+    min-width: 11rem;
+    margin: 0;
+    padding: ${boeOverlay.padding};
+    display: grid;
+    gap: 0;
+    border: ${boeOverlay.border};
+    border-radius: ${boeOverlay.radius};
+    background: var(--boe-token-surface-surface, #ffffff);
+    box-shadow: ${boeOverlay.shadow};
+  }
+
+  [part="menu-item"] {
+    width: 100%;
+    appearance: none;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    min-height: ${boeOverlay.itemMinHeight};
+    text-align: left;
+    border: 0;
+    border-radius: ${boeOverlay.itemRadius};
+    background: transparent;
+    color: var(--boe-token-text-text, #222222);
+    font: inherit;
+    font-size: ${boeControl.fontSize};
+    padding: ${boeOverlay.itemPadding};
+    cursor: pointer;
+    transition:
+      background-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  ${boeNeutralInteractiveStyles('[part="menu-item"]')}
+
+  [part="menu-item"]:hover:not(:disabled),
+  [part="menu-item"]:focus-visible:not(:disabled) {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="menu-item"]:disabled {
+    opacity: ${boeControl.disabledOpacity};
+  }
+`;
+export class BoxMenuElement extends BaseElement {
+    static get observedAttributes() {
+        return ["disabled", "items", "label"];
+    }
+    menuEl;
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Menu";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get items() {
+        const raw = this.getAttribute("items");
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set items(value) {
+        this.setAttribute("items", JSON.stringify(value));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${menuStyles}</style>
+      <div part="menu" role="menu"></div>
+    `;
+        this.menuEl = this.shadowRoot.querySelector('[part="menu"]');
+    }
+    setupListeners() {
+        this.menuEl.addEventListener("click", event => {
+            const button = event.target?.closest('[part="menu-item"]');
+            if (!button || !this.menuEl.contains(button) || button.disabled) {
+                return;
+            }
+            const itemId = button.getAttribute("data-item-id");
+            const item = this.items.find(entry => entry.id === itemId);
+            if (!item || this.disabled || item.disabled) {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent("item-selected", {
+                bubbles: true,
+                composed: true,
+                detail: item,
+            }));
+        });
+        this.menuEl.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            const buttons = this.enabledMenuItems();
+            if (buttons.length === 0) {
+                return;
+            }
+            const active = keyboardEvent.target;
+            const currentIndex = buttons.indexOf(active);
+            if (currentIndex < 0) {
+                return;
+            }
+            const nextIndex = nextRovingIndex(keyboardEvent.key, currentIndex, buttons.length, {
+                orientation: "vertical",
+            });
+            if (nextIndex == null) {
+                return;
+            }
+            keyboardEvent.preventDefault();
+            focusRovingItem(buttons, nextIndex);
+        });
+    }
+    enabledMenuItems() {
+        return Array.from(this.menuEl.querySelectorAll('[part="menu-item"]')).filter(button => !button.disabled);
+    }
+    update() {
+        if (!this.menuEl) {
+            return;
+        }
+        this.menuEl.setAttribute("aria-label", this.label);
+        this.menuEl.innerHTML = this.items
+            .map(item => `
+          <button type="button" part="menu-item" role="menuitem" data-item-id="${escapeHtml(item.id)}" ${this.disabled || item.disabled ? "disabled" : ""}>
+            ${escapeHtml(item.label)}
+          </button>
+        `)
+            .join("");
+        const buttons = this.enabledMenuItems();
+        applyRovingTabindex(buttons, 0);
+    }
+}
+export const defineBoxMenuElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxMenuElement);
+    return BoxMenuElement;
+};