@unofficialbox/box-open-elements 0.4.0 → 0.5.0

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

@@ -1,6 +1,7 @@
 import { ContentExplorerController } from "../controller.js";
 import { BaseElement } from "../../../core/index.js";
-export declare class BoxExplorerToolbarElement extends BaseElement {
+export declare class ExplorerToolbar extends BaseElement {
+    static readonly tagName: string;
     private controllerValue;
     private unsubscribeFns;
     private listenersBound;
@@ -16,4 +17,3 @@ export declare class BoxExplorerToolbarElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxExplorerToolbarElement: (tagName?: string) => typeof BoxExplorerToolbarElement;

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

@@ -1,5 +1,5 @@
 import { BaseElement } from "../../../core/index.js";
-import { defineBoxSearchFieldElement, } from "../../../components/forms/search-field.js";
+import { SearchField, } from "../../../components/forms/search-field.js";
 import { applyRovingTabindex, handleRovingKeydown } from "../../../foundations/a11y/index.js";
 import { boeNeutralInteractiveStyles } from "../../../foundations/tokens/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../../foundations/motion/index.js";
@@ -68,7 +68,8 @@ const elementStyles = `
         ${boeNeutralInteractiveStyles('[part="refresh"]')}
         ${boeNeutralInteractiveStyles('[part="clear-selection"]')}
       `;
-export class BoxExplorerToolbarElement extends BaseElement {
+export class ExplorerToolbar extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     controllerValue = null;
     unsubscribeFns = [];
     listenersBound = false;
@@ -83,7 +84,7 @@ export class BoxExplorerToolbarElement extends BaseElement {
         }
     }
     connectedCallback() {
-        defineBoxSearchFieldElement();
+        SearchField.register();
         this.bindController();
         super.connectedCallback();
     }
@@ -140,7 +141,7 @@ export class BoxExplorerToolbarElement extends BaseElement {
         if (!this.shadowRoot) {
             return;
         }
-        defineBoxSearchFieldElement();
+        SearchField.register();
         this.shadowRoot.innerHTML = `
       <style>${elementStyles}</style>
       <div part="toolbar" role="toolbar" aria-label="Explorer toolbar">
@@ -223,12 +224,5 @@ export class BoxExplorerToolbarElement extends BaseElement {
         applyRovingTabindex(buttons, restoreIndex >= 0 ? restoreIndex : 0);
     }
 }
-export const defineBoxExplorerToolbarElement = (tagName = DEFAULT_TAG_NAME) => {
-    defineBoxSearchFieldElement();
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxExplorerToolbarElement);
-    return BoxExplorerToolbarElement;
-};
+SearchField.register();
+ExplorerToolbar.register();

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

@@ -1,35 +1,36 @@
 import { type ExplorerItemAction, type ExplorerItem, type ExplorerItemGesture, type ExplorerSelectionMode, type ExplorerState, type ExplorerTransport } from "./types.js";
 import { BaseElement } from "../../core/index.js";
-export interface BoxContentExplorerTemplateContext {
-    element: BoxContentExplorerElement;
+export interface ContentExplorerTemplateContext {
+    element: ContentExplorer;
     state: Readonly<ExplorerState> | null;
 }
-export interface BoxContentExplorerFolderTemplateArgs extends BoxContentExplorerTemplateContext {
+export interface ContentExplorerFolderTemplateArgs extends ContentExplorerTemplateContext {
     breadcrumbsMarkup: string;
 }
-export interface BoxContentExplorerBreadcrumbTemplateArgs extends BoxContentExplorerTemplateContext {
+export interface ContentExplorerBreadcrumbTemplateArgs extends ContentExplorerTemplateContext {
     buttonAttributes: string;
     id: string;
     name: string;
 }
-export interface BoxContentExplorerItemActionTemplateArgs extends BoxContentExplorerTemplateContext {
+export interface ContentExplorerItemActionTemplateArgs extends ContentExplorerTemplateContext {
     action: ExplorerItemAction;
     buttonAttributes: string;
     item: ExplorerItem;
 }
-export interface BoxContentExplorerItemTemplateArgs extends BoxContentExplorerTemplateContext {
+export interface ContentExplorerItemTemplateArgs extends ContentExplorerTemplateContext {
     isSelected: boolean;
     item: ExplorerItem;
     itemActionsMarkup: string;
     itemButtonAttributes: string;
 }
-export interface BoxContentExplorerTemplates {
-    renderBreadcrumb?: (args: BoxContentExplorerBreadcrumbTemplateArgs) => string;
-    renderFolder?: (args: BoxContentExplorerFolderTemplateArgs) => string;
-    renderItem?: (args: BoxContentExplorerItemTemplateArgs) => string;
-    renderItemAction?: (args: BoxContentExplorerItemActionTemplateArgs) => string;
+export interface ContentExplorerTemplates {
+    renderBreadcrumb?: (args: ContentExplorerBreadcrumbTemplateArgs) => string;
+    renderFolder?: (args: ContentExplorerFolderTemplateArgs) => string;
+    renderItem?: (args: ContentExplorerItemTemplateArgs) => string;
+    renderItemAction?: (args: ContentExplorerItemActionTemplateArgs) => string;
 }
-export declare class BoxContentExplorerElement extends BaseElement {
+export declare class ContentExplorer extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private controller;
     private pendingStart;
@@ -54,8 +55,8 @@ export declare class BoxContentExplorerElement extends BaseElement {
     set transport(value: ExplorerTransport | null);
     get itemActions(): ExplorerItemAction[];
     set itemActions(value: ExplorerItemAction[]);
-    get templates(): BoxContentExplorerTemplates;
-    set templates(value: BoxContentExplorerTemplates);
+    get templates(): ContentExplorerTemplates;
+    set templates(value: ContentExplorerTemplates);
     get state(): Readonly<ExplorerState> | null;
     get searchQuery(): string | null;
     set searchQuery(value: string | null);
@@ -82,4 +83,3 @@ export declare class BoxContentExplorerElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxContentExplorerElement: (tagName?: string) => typeof BoxContentExplorerElement;

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

@@ -1,7 +1,7 @@
 import { ContentExplorerController } from "./controller.js";
 import { resolveExplorerItemGesture, shouldActivateOnClick, shouldToggleOnEnter, } from "./types.js";
 import { formatItemMetaLine } from "./adapters/item-summary.js";
-import { defineBoxSearchResultsHeaderElement, } from "../search/search-results-header.js";
+import { SearchResultsHeader, } from "../search/search-results-header.js";
 import { BaseElement } from "../../core/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
@@ -249,7 +249,8 @@ const elementStyles = `
           justify-content: center;
         }
       `;
-export class BoxContentExplorerElement extends BaseElement {
+export class ContentExplorer extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["item-gesture", "language", "page-size", "root-folder-id", "search-query", "selection-mode", "token"];
     }
@@ -734,12 +735,5 @@ export class BoxContentExplorerElement extends BaseElement {
         }
     }
 }
-export const defineBoxContentExplorerElement = (tagName = DEFAULT_TAG_NAME) => {
-    defineBoxSearchResultsHeaderElement();
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxContentExplorerElement);
-    return BoxContentExplorerElement;
-};
+SearchResultsHeader.register();
+ContentExplorer.register();

package/dist/patterns/file-request/file-request-builder.d.ts

@@ -11,7 +11,8 @@ type FileRequestBuilderSetting = {
     description?: string;
 };
 type FileRequestBuilderValues = Record<string, boolean | string>;
-export declare class BoxFileRequestBuilderElement extends BaseElement {
+export declare class FileRequestBuilder extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     get fields(): FileRequestBuilderField[];
@@ -32,5 +33,4 @@ export declare class BoxFileRequestBuilderElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxFileRequestBuilderElement: (tagName?: string) => typeof BoxFileRequestBuilderElement;
 export {};

package/dist/patterns/file-request/file-request-builder.js

@@ -145,7 +145,8 @@ const elementStyles = `
           color: var(--boe-token-text-text-on-brand, #ffffff);
         }
       `;
-export class BoxFileRequestBuilderElement extends BaseElement {
+export class FileRequestBuilder extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["fields", "heading", "message", "settings", "value"];
     }
@@ -334,11 +335,4 @@ export class BoxFileRequestBuilderElement extends BaseElement {
         });
     }
 }
-export const defineBoxFileRequestBuilderElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxFileRequestBuilderElement);
-    return BoxFileRequestBuilderElement;
-};
+FileRequestBuilder.register();

package/dist/patterns/governance/governance-panel.d.ts

@@ -14,7 +14,8 @@ type GovernancePanelSignal = {
     label: string;
     tone?: string;
 };
-export declare class BoxGovernancePanelElement extends BaseElement {
+export declare class GovernancePanel extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     get actions(): GovernancePanelAction[];
     set actions(value: GovernancePanelAction[]);
@@ -36,5 +37,4 @@ export declare class BoxGovernancePanelElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxGovernancePanelElement: (tagName?: string) => void;
 export {};

package/dist/patterns/governance/governance-panel.js

@@ -164,7 +164,8 @@ const elementStyles = `
           color: var(--boe-token-text-text-on-brand, #ffffff);
         }
       `;
-export class BoxGovernancePanelElement extends BaseElement {
+export class GovernancePanel extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["actions", "heading", "message", "policies", "signals", "status"];
     }
@@ -344,8 +345,4 @@ export class BoxGovernancePanelElement extends BaseElement {
         });
     }
 }
-export const defineBoxGovernancePanelElement = (tagName = DEFAULT_TAG_NAME) => {
-    if (!customElements.get(tagName)) {
-        customElements.define(tagName, BoxGovernancePanelElement);
-    }
-};
+GovernancePanel.register();

package/dist/patterns/insights/bar-chart.d.ts

@@ -15,7 +15,8 @@ type BarChartPoint = {
     tone?: string;
     value: number;
 };
-export declare class BoxBarChartElement extends BaseElement {
+export declare class BarChart extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     get actions(): BarChartAction[];
     set actions(value: BarChartAction[]);
@@ -39,5 +40,4 @@ export declare class BoxBarChartElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxBarChartElement: (tagName?: string) => void;
 export {};

package/dist/patterns/insights/bar-chart.js

@@ -249,7 +249,8 @@ const elementStyles = `
           color: var(--boe-token-text-text-secondary, #6f6f6f);
         }
       `;
-export class BoxBarChartElement extends BaseElement {
+export class BarChart extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["actions", "heading", "legend", "message", "points", "summary", "timeframe"];
     }
@@ -455,8 +456,4 @@ export class BoxBarChartElement extends BaseElement {
         });
     }
 }
-export const defineBoxBarChartElement = (tagName = DEFAULT_TAG_NAME) => {
-    if (!customElements.get(tagName)) {
-        customElements.define(tagName, BoxBarChartElement);
-    }
-};
+BarChart.register();

package/dist/patterns/insights/chart-panel.d.ts

@@ -15,7 +15,8 @@ type ChartPanelPoint = {
     tone?: string;
     value: number;
 };
-export declare class BoxChartPanelElement extends BaseElement {
+export declare class ChartPanel extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     get actions(): ChartPanelAction[];
     set actions(value: ChartPanelAction[]);
@@ -39,5 +40,4 @@ export declare class BoxChartPanelElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxChartPanelElement: (tagName?: string) => void;
 export {};

package/dist/patterns/insights/chart-panel.js

@@ -229,7 +229,8 @@ const elementStyles = `
           color: var(--boe-token-text-text-on-brand, #ffffff);
         }
       `;
-export class BoxChartPanelElement extends BaseElement {
+export class ChartPanel extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["actions", "heading", "legend", "message", "points", "summary", "timeframe"];
     }
@@ -429,8 +430,4 @@ export class BoxChartPanelElement extends BaseElement {
         });
     }
 }
-export const defineBoxChartPanelElement = (tagName = DEFAULT_TAG_NAME) => {
-    if (!customElements.get(tagName)) {
-        customElements.define(tagName, BoxChartPanelElement);
-    }
-};
+ChartPanel.register();

package/dist/patterns/insights/donut-chart.d.ts

@@ -10,7 +10,8 @@ type DonutChartSegment = {
     tone?: string;
     value: number;
 };
-export declare class BoxDonutChartElement extends BaseElement {
+export declare class DonutChart extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private selectedSegmentId;
     get actions(): DonutChartAction[];
@@ -39,5 +40,4 @@ export declare class BoxDonutChartElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxDonutChartElement: (tagName?: string) => void;
 export {};

package/dist/patterns/insights/donut-chart.js

@@ -228,7 +228,8 @@ const elementStyles = `
           }
         }
       `;
-export class BoxDonutChartElement extends BaseElement {
+export class DonutChart extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["actions", "heading", "message", "segments", "summary", "timeframe"];
     }
@@ -528,8 +529,4 @@ export class BoxDonutChartElement extends BaseElement {
         });
     }
 }
-export const defineBoxDonutChartElement = (tagName = DEFAULT_TAG_NAME) => {
-    if (!customElements.get(tagName)) {
-        customElements.define(tagName, BoxDonutChartElement);
-    }
-};
+DonutChart.register();

package/dist/patterns/insights/line-chart.d.ts

@@ -15,7 +15,8 @@ type LineChartPoint = {
     tone?: string;
     value: number;
 };
-export declare class BoxLineChartElement extends BaseElement {
+export declare class LineChart extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     get actions(): LineChartAction[];
     set actions(value: LineChartAction[]);
@@ -42,5 +43,4 @@ export declare class BoxLineChartElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxLineChartElement: (tagName?: string) => void;
 export {};

package/dist/patterns/insights/line-chart.js

@@ -238,7 +238,8 @@ const elementStyles = `
           color: var(--boe-token-text-text-secondary, #6f6f6f);
         }
       `;
-export class BoxLineChartElement extends BaseElement {
+export class LineChart extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["actions", "legend", "message", "points", "summary", "timeframe", "heading"];
     }
@@ -504,8 +505,4 @@ export class BoxLineChartElement extends BaseElement {
         });
     }
 }
-export const defineBoxLineChartElement = (tagName = DEFAULT_TAG_NAME) => {
-    if (!customElements.get(tagName)) {
-        customElements.define(tagName, BoxLineChartElement);
-    }
-};
+LineChart.register();

package/dist/patterns/insights/metric-card.d.ts

@@ -9,7 +9,8 @@ type MetricCardTrend = {
     label: string;
     tone?: string;
 };
-export declare class BoxMetricCardElement extends BaseElement {
+export declare class MetricCard extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     get action(): MetricCardAction | null;
     set action(value: MetricCardAction | null);
@@ -32,5 +33,4 @@ export declare class BoxMetricCardElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxMetricCardElement: (tagName?: string) => void;
 export {};

package/dist/patterns/insights/metric-card.js

@@ -128,7 +128,8 @@ const elementStyles = `
           color: var(--boe-token-text-text-on-brand, #ffffff);
         }
       `;
-export class BoxMetricCardElement extends BaseElement {
+export class MetricCard extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["action", "eyebrow", "message", "status", "heading", "trend", "value"];
     }
@@ -271,8 +272,4 @@ export class BoxMetricCardElement extends BaseElement {
         }
     }
 }
-export const defineBoxMetricCardElement = (tagName = DEFAULT_TAG_NAME) => {
-    if (!customElements.get(tagName)) {
-        customElements.define(tagName, BoxMetricCardElement);
-    }
-};
+MetricCard.register();

package/dist/patterns/item/bulk-action-bar.d.ts

@@ -9,7 +9,8 @@ type BulkActionItem = {
     id?: string;
     label: string;
 };
-export declare class BoxBulkActionBarElement extends BaseElement {
+export declare class BulkActionBar extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     get actions(): BulkAction[];
     set actions(value: BulkAction[]);
@@ -31,5 +32,4 @@ export declare class BoxBulkActionBarElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxBulkActionBarElement: (tagName?: string) => void;
 export {};

package/dist/patterns/item/bulk-action-bar.js

@@ -138,7 +138,8 @@ const elementStyles = `
           }
         }
       `;
-export class BoxBulkActionBarElement extends BaseElement {
+export class BulkActionBar extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["actions", "clear-label", "count", "items", "label", "message"];
     }
@@ -318,8 +319,4 @@ export class BoxBulkActionBarElement extends BaseElement {
         }
     }
 }
-export const defineBoxBulkActionBarElement = (tagName = DEFAULT_TAG_NAME) => {
-    if (!customElements.get(tagName)) {
-        customElements.define(tagName, BoxBulkActionBarElement);
-    }
-};
+BulkActionBar.register();

package/dist/patterns/item/item-details-panel.d.ts

@@ -14,7 +14,8 @@ type ItemDetailsOwner = {
     status?: string;
     initials?: string;
 };
-export declare class BoxItemDetailsPanelElement extends BaseElement {
+export declare class ItemDetailsPanel extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private eyebrowEl;
     private titleEl;
@@ -57,5 +58,4 @@ export declare class BoxItemDetailsPanelElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxItemDetailsPanelElement: (tagName?: string) => typeof BoxItemDetailsPanelElement;
 export {};

package/dist/patterns/item/item-details-panel.js

@@ -158,7 +158,8 @@ const elementStyles = `
           color: var(--boe-token-text-text-on-brand, #ffffff);
         }
       `;
-export class BoxItemDetailsPanelElement extends BaseElement {
+export class ItemDetailsPanel extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["actions", "eyebrow", "message", "meta", "owner", "status", "heading"];
     }
@@ -419,11 +420,4 @@ export class BoxItemDetailsPanelElement extends BaseElement {
         }
     }
 }
-export const defineBoxItemDetailsPanelElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxItemDetailsPanelElement);
-    return BoxItemDetailsPanelElement;
-};
+ItemDetailsPanel.register();

package/dist/patterns/item/item-form.d.ts

@@ -14,7 +14,8 @@ type ItemFormField = {
     options?: ItemFormFieldOption[];
 };
 type ItemFormValues = Record<string, boolean | string>;
-export declare class BoxItemFormElement extends BaseElement {
+export declare class ItemForm extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private labelEl;
@@ -50,5 +51,4 @@ export declare class BoxItemFormElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxItemFormElement: (tagName?: string) => typeof BoxItemFormElement;
 export {};

package/dist/patterns/item/item-form.js

@@ -140,7 +140,8 @@ const elementStyles = `
         ${boeNeutralInteractiveStyles('[part="cancel"]')}
         ${boeBrandInteractiveStyles('[part="submit"]')}
       `;
-export class BoxItemFormElement extends BaseElement {
+export class ItemForm extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["disabled", "fields", "label", "mode", "submit-label", "value"];
     }
@@ -475,11 +476,4 @@ export class BoxItemFormElement extends BaseElement {
         this.patchFieldValues();
     }
 }
-export const defineBoxItemFormElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxItemFormElement);
-    return BoxItemFormElement;
-};
+ItemForm.register();

package/dist/patterns/item/preview-header.d.ts

@@ -8,7 +8,8 @@ type PreviewHeaderBreadcrumb = {
     id: string;
     label: string;
 };
-export declare class BoxPreviewHeaderElement extends BaseElement {
+export declare class PreviewHeader extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private breadcrumbsEl;
     private titleEl;
@@ -42,5 +43,4 @@ export declare class BoxPreviewHeaderElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxPreviewHeaderElement: (tagName?: string) => typeof BoxPreviewHeaderElement;
 export {};

package/dist/patterns/item/preview-header.js

@@ -116,7 +116,8 @@ const elementStyles = `
           border-color: var(--_obp-brand);
         }
       `;
-export class BoxPreviewHeaderElement extends BaseElement {
+export class PreviewHeader extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["actions", "breadcrumbs", "message", "status", "heading"];
     }
@@ -313,11 +314,4 @@ export class BoxPreviewHeaderElement extends BaseElement {
         }
     }
 }
-export const defineBoxPreviewHeaderElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxPreviewHeaderElement);
-    return BoxPreviewHeaderElement;
-};
+PreviewHeader.register();

package/dist/patterns/metadata/metadata-filter-builder.d.ts

@@ -8,7 +8,8 @@ type MetadataFilterRule = {
     operator: string;
     value: string;
 };
-export declare class BoxMetadataFilterBuilderElement extends BaseElement {
+export declare class MetadataFilterBuilder extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private rulesInternal;
     private syncingFromUi;
@@ -39,5 +40,4 @@ export declare class BoxMetadataFilterBuilderElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxMetadataFilterBuilderElement: (tagName?: string) => typeof BoxMetadataFilterBuilderElement;
 export {};

package/dist/patterns/metadata/metadata-filter-builder.js

@@ -97,7 +97,8 @@ const builderStyles = `
     }
   }
 `;
-export class BoxMetadataFilterBuilderElement extends BaseElement {
+export class MetadataFilterBuilder extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["fields", "label", "rules"];
     }
@@ -352,11 +353,4 @@ export class BoxMetadataFilterBuilderElement extends BaseElement {
         this.rulesEl.innerHTML = this.renderRulesMarkup();
     }
 }
-export const defineBoxMetadataFilterBuilderElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxMetadataFilterBuilderElement);
-    return BoxMetadataFilterBuilderElement;
-};
+MetadataFilterBuilder.register();

package/dist/patterns/metadata/metadata-inspector.d.ts

@@ -9,7 +9,8 @@ type MetadataInspectorSection = {
     fields: MetadataInspectorField[];
     title: string;
 };
-export declare class BoxMetadataInspectorElement extends BaseElement {
+export declare class MetadataInspector extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     get eyebrow(): string;
     set eyebrow(value: string);
@@ -27,5 +28,4 @@ export declare class BoxMetadataInspectorElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxMetadataInspectorElement: (tagName?: string) => typeof BoxMetadataInspectorElement;
 export {};