@m3e/react 2.5.12 → 2.5.14

package/dist/all.js

@@ -4,7 +4,6 @@
  * See LICENSE file in the project root for full license text.
  */
 import React from 'react';
-import { createComponent } from '@lit/react';
 import { M3eAppBarElement } from '@m3e/web/app-bar';
 import { M3eAutocompleteElement } from '@m3e/web/autocomplete';
 import { M3eAvatarElement } from '@m3e/web/avatar';
@@ -60,6 +59,56 @@ import { M3eToolbarElement } from '@m3e/web/toolbar';
 import { M3eRichTooltipElement, M3eRichTooltipActionElement, M3eTooltipElement } from '@m3e/web/tooltip';
 import { M3eTreeElement, M3eTreeItemElement } from '@m3e/web/tree';
 
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e = new Set(["children", "localName", "ref", "style", "className"]),
+  n = new WeakMap(),
+  t = (e, t, o, l, a) => {
+    const s = a?.[t];
+    void 0 === s ? (e[t] = o, null == o && t in HTMLElement.prototype && e.removeAttribute(t)) : o !== l && ((e, t, o) => {
+      let l = n.get(e);
+      void 0 === l && n.set(e, l = new Map());
+      let a = l.get(t);
+      void 0 !== o ? void 0 === a ? (l.set(t, a = {
+        handleEvent: o
+      }), e.addEventListener(t, a)) : a.handleEvent = o : void 0 !== a && (l.delete(t), e.removeEventListener(t, a));
+    })(e, s, o);
+  },
+  o = ({
+    react: n,
+    tagName: o,
+    elementClass: l,
+    events: a,
+    displayName: s
+  }) => {
+    const c = new Set(Object.keys(a ?? {})),
+      r = n.forwardRef((s, r) => {
+        const i = n.useRef(new Map()),
+          d = n.useRef(null),
+          f = {},
+          u = {};
+        for (const [n, t] of Object.entries(s)) e.has(n) ? f["className" === n ? "class" : n] = t : c.has(n) || n in l.prototype ? u[n] = t : f[n] = t;
+        return n.useLayoutEffect(() => {
+          if (null === d.current) return;
+          const e = new Map();
+          for (const n in u) t(d.current, n, s[n], i.current.get(n), a), i.current.delete(n), e.set(n, s[n]);
+          for (const [e, n] of i.current) t(d.current, e, void 0, n, a);
+          i.current = e;
+        }), n.useLayoutEffect(() => {
+          d.current?.removeAttribute("defer-hydration");
+        }, []), f.suppressHydrationWarning = true, n.createElement(o, {
+          ...f,
+          ref: n.useCallback(e => {
+            d.current = e, "function" == typeof r ? r(e) : null !== r && (r.current = e);
+          }, [r])
+        });
+      });
+    return r.displayName = s ?? l.name, r;
+  };
+
 /**
  * React binding for the `m3e-app-bar` Web Component from `@m3e/web/app-bar`.
  *
@@ -73,7 +122,7 @@ import { M3eTreeElement, M3eTreeItemElement } from '@m3e/web/tree';
  * See the `m3e-app-bar` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eAppBar = createComponent({
+const M3eAppBar = o({
   tagName: "m3e-app-bar",
   elementClass: M3eAppBarElement,
   react: React
@@ -92,7 +141,7 @@ const M3eAppBar = createComponent({
  * See the `m3e-autocomplete` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eAutocomplete = createComponent({
+const M3eAutocomplete = o({
   tagName: "m3e-autocomplete",
   elementClass: M3eAutocompleteElement,
   react: React,
@@ -116,7 +165,7 @@ const M3eAutocomplete = createComponent({
  * See the `m3e-avatar` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eAvatar = createComponent({
+const M3eAvatar = o({
   tagName: "m3e-avatar",
   elementClass: M3eAvatarElement,
   react: React
@@ -135,7 +184,7 @@ const M3eAvatar = createComponent({
  * See the `m3e-badge` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eBadge = createComponent({
+const M3eBadge = o({
   tagName: "m3e-badge",
   elementClass: M3eBadgeElement,
   react: React
@@ -154,7 +203,7 @@ const M3eBadge = createComponent({
  * See the `m3e-bottom-sheet` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eBottomSheet = createComponent({
+const M3eBottomSheet = o({
   tagName: "m3e-bottom-sheet",
   elementClass: M3eBottomSheetElement,
   react: React,
@@ -180,7 +229,7 @@ const M3eBottomSheet = createComponent({
  * See the `m3e-bottom-sheet-action` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eBottomSheetAction = createComponent({
+const M3eBottomSheetAction = o({
   tagName: "m3e-bottom-sheet-action",
   elementClass: M3eBottomSheetActionElement,
   react: React
@@ -199,7 +248,7 @@ const M3eBottomSheetAction = createComponent({
  * See the `m3e-bottom-sheet-trigger` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eBottomSheetTrigger = createComponent({
+const M3eBottomSheetTrigger = o({
   tagName: "m3e-bottom-sheet-trigger",
   elementClass: M3eBottomSheetTriggerElement,
   react: React
@@ -218,7 +267,7 @@ const M3eBottomSheetTrigger = createComponent({
  * See the `m3e-breadcrumb` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eBreadcrumb = createComponent({
+const M3eBreadcrumb = o({
   tagName: "m3e-breadcrumb",
   elementClass: M3eBreadcrumbElement,
   react: React
@@ -237,7 +286,7 @@ const M3eBreadcrumb = createComponent({
  * See the `m3e-breadcrumb-item` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eBreadcrumbItem = createComponent({
+const M3eBreadcrumbItem = o({
   tagName: "m3e-breadcrumb-item",
   elementClass: M3eBreadcrumbItemElement,
   react: React,
@@ -259,7 +308,7 @@ const M3eBreadcrumbItem = createComponent({
  * See the `m3e-button` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eButton = createComponent({
+const M3eButton = o({
   tagName: "m3e-button",
   elementClass: M3eButtonElement,
   react: React,
@@ -284,7 +333,7 @@ const M3eButton = createComponent({
  * See the `m3e-button-group` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eButtonGroup = createComponent({
+const M3eButtonGroup = o({
   tagName: "m3e-button-group",
   elementClass: M3eButtonGroupElement,
   react: React
@@ -303,7 +352,7 @@ const M3eButtonGroup = createComponent({
  * See the `m3e-calendar` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eCalendar = createComponent({
+const M3eCalendar = o({
   tagName: "m3e-calendar",
   elementClass: M3eCalendarElement,
   react: React,
@@ -325,7 +374,7 @@ const M3eCalendar = createComponent({
  * See the `m3e-card` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eCard = createComponent({
+const M3eCard = o({
   tagName: "m3e-card",
   elementClass: M3eCardElement,
   react: React,
@@ -347,7 +396,7 @@ const M3eCard = createComponent({
  * See the `m3e-checkbox` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eCheckbox = createComponent({
+const M3eCheckbox = o({
   tagName: "m3e-checkbox",
   elementClass: M3eCheckboxElement,
   react: React,
@@ -373,7 +422,7 @@ const M3eCheckbox = createComponent({
  * See the `m3e-assist-chip` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eAssistChip = createComponent({
+const M3eAssistChip = o({
   tagName: "m3e-assist-chip",
   elementClass: M3eAssistChipElement,
   react: React,
@@ -395,7 +444,7 @@ const M3eAssistChip = createComponent({
  * See the `m3e-chip` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eChip = createComponent({
+const M3eChip = o({
   tagName: "m3e-chip",
   elementClass: M3eChipElement,
   react: React
@@ -414,7 +463,7 @@ const M3eChip = createComponent({
  * See the `m3e-chip-set` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eChipSet = createComponent({
+const M3eChipSet = o({
   tagName: "m3e-chip-set",
   elementClass: M3eChipSetElement,
   react: React
@@ -433,7 +482,7 @@ const M3eChipSet = createComponent({
  * See the `m3e-filter-chip` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eFilterChip = createComponent({
+const M3eFilterChip = o({
   tagName: "m3e-filter-chip",
   elementClass: M3eFilterChipElement,
   react: React,
@@ -458,7 +507,7 @@ const M3eFilterChip = createComponent({
  * See the `m3e-filter-chip-set` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eFilterChipSet = createComponent({
+const M3eFilterChipSet = o({
   tagName: "m3e-filter-chip-set",
   elementClass: M3eFilterChipSetElement,
   react: React,
@@ -482,7 +531,7 @@ const M3eFilterChipSet = createComponent({
  * See the `m3e-input-chip` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eInputChip = createComponent({
+const M3eInputChip = o({
   tagName: "m3e-input-chip",
   elementClass: M3eInputChipElement,
   react: React,
@@ -505,7 +554,7 @@ const M3eInputChip = createComponent({
  * See the `m3e-input-chip-set` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eInputChipSet = createComponent({
+const M3eInputChipSet = o({
   tagName: "m3e-input-chip-set",
   elementClass: M3eInputChipSetElement,
   react: React,
@@ -527,7 +576,7 @@ const M3eInputChipSet = createComponent({
  * See the `m3e-suggestion-chip` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eSuggestionChip = createComponent({
+const M3eSuggestionChip = o({
   tagName: "m3e-suggestion-chip",
   elementClass: M3eSuggestionChipElement,
   react: React,
@@ -549,7 +598,7 @@ const M3eSuggestionChip = createComponent({
  * See the `m3e-content-pane` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eContentPane = createComponent({
+const M3eContentPane = o({
   tagName: "m3e-content-pane",
   elementClass: M3eContentPaneElement,
   react: React
@@ -568,7 +617,7 @@ const M3eContentPane = createComponent({
  * See the `m3e-collapsible` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eCollapsible = createComponent({
+const M3eCollapsible = o({
   tagName: "m3e-collapsible",
   elementClass: M3eCollapsibleElement,
   react: React,
@@ -593,7 +642,7 @@ const M3eCollapsible = createComponent({
  * See the `m3e-elevation` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eElevation = createComponent({
+const M3eElevation = o({
   tagName: "m3e-elevation",
   elementClass: M3eElevationElement,
   react: React
@@ -612,7 +661,7 @@ const M3eElevation = createComponent({
  * See the `m3e-focus-ring` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eFocusRing = createComponent({
+const M3eFocusRing = o({
   tagName: "m3e-focus-ring",
   elementClass: M3eFocusRingElement,
   react: React
@@ -631,7 +680,7 @@ const M3eFocusRing = createComponent({
  * See the `m3e-pseudo-checkbox` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3ePseudoCheckbox = createComponent({
+const M3ePseudoCheckbox = o({
   tagName: "m3e-pseudo-checkbox",
   elementClass: M3ePseudoCheckboxElement,
   react: React
@@ -650,7 +699,7 @@ const M3ePseudoCheckbox = createComponent({
  * See the `m3e-pseudo-radio` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3ePseudoRadio = createComponent({
+const M3ePseudoRadio = o({
   tagName: "m3e-pseudo-radio",
   elementClass: M3ePseudoRadioElement,
   react: React
@@ -669,7 +718,7 @@ const M3ePseudoRadio = createComponent({
  * See the `m3e-ripple` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eRipple = createComponent({
+const M3eRipple = o({
   tagName: "m3e-ripple",
   elementClass: M3eRippleElement,
   react: React
@@ -688,7 +737,7 @@ const M3eRipple = createComponent({
  * See the `m3e-scroll-container` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eScrollContainer = createComponent({
+const M3eScrollContainer = o({
   tagName: "m3e-scroll-container",
   elementClass: M3eScrollContainerElement,
   react: React
@@ -707,7 +756,7 @@ const M3eScrollContainer = createComponent({
  * See the `m3e-slide` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eSlide = createComponent({
+const M3eSlide = o({
   tagName: "m3e-slide",
   elementClass: M3eSlideElement,
   react: React
@@ -726,7 +775,7 @@ const M3eSlide = createComponent({
  * See the `m3e-state-layer` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eStateLayer = createComponent({
+const M3eStateLayer = o({
   tagName: "m3e-state-layer",
   elementClass: M3eStateLayerElement,
   react: React
@@ -745,7 +794,7 @@ const M3eStateLayer = createComponent({
  * See the `m3e-text-highlight` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eTextHighlight = createComponent({
+const M3eTextHighlight = o({
   tagName: "m3e-text-highlight",
   elementClass: M3eTextHighlightElement,
   react: React
@@ -764,7 +813,7 @@ const M3eTextHighlight = createComponent({
  * See the `m3e-text-overflow` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eTextOverflow = createComponent({
+const M3eTextOverflow = o({
   tagName: "m3e-text-overflow",
   elementClass: M3eTextOverflowElement,
   react: React
@@ -783,7 +832,7 @@ const M3eTextOverflow = createComponent({
  * See the `m3e-datepicker` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eDatepicker = createComponent({
+const M3eDatepicker = o({
   tagName: "m3e-datepicker",
   elementClass: M3eDatepickerElement,
   react: React,
@@ -805,7 +854,7 @@ const M3eDatepicker = createComponent({
  * See the `m3e-datepicker-toggle` for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eDatepickerToggle = createComponent({
+const M3eDatepickerToggle = o({
   tagName: "m3e-datepicker-toggle",
   elementClass: M3eDatepickerToggleElement,
   react: React
@@ -824,7 +873,7 @@ const M3eDatepickerToggle = createComponent({
  * See the `m3e-dialog` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eDialog = createComponent({
+const M3eDialog = o({
   tagName: "m3e-dialog",
   elementClass: M3eDialogElement,
   react: React,
@@ -850,7 +899,7 @@ const M3eDialog = createComponent({
  * See the `m3e-dialog-action` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eDialogAction = createComponent({
+const M3eDialogAction = o({
   tagName: "m3e-dialog-action",
   elementClass: M3eDialogActionElement,
   react: React
@@ -869,7 +918,7 @@ const M3eDialogAction = createComponent({
  * See the `m3e-dialog-trigger` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eDialogTrigger = createComponent({
+const M3eDialogTrigger = o({
   tagName: "m3e-dialog-trigger",
   elementClass: M3eDialogTriggerElement,
   react: React
@@ -888,7 +937,7 @@ const M3eDialogTrigger = createComponent({
  * See the `m3e-divider` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eDivider = createComponent({
+const M3eDivider = o({
   tagName: "m3e-divider",
   elementClass: M3eDividerElement,
   react: React
@@ -907,7 +956,7 @@ const M3eDivider = createComponent({
  * See the `m3e-drawer-container` documentation for full details on behavior,
  * styling, accessibility, and supported events.
  */
-const M3eDrawerContainer = createComponent({
+const M3eDrawerContainer = o({
   tagName: "m3e-drawer-container",
   elementClass: M3eDrawerContainerElement,
   react: React,
@@ -929,7 +978,7 @@ const M3eDrawerContainer = createComponent({
  * See the `m3e-drawer-toggle` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eDrawerToggle = createComponent({
+const M3eDrawerToggle = o({
   tagName: "m3e-drawer-toggle",
   elementClass: M3eDrawerToggleElement,
   react: React
@@ -948,7 +997,7 @@ const M3eDrawerToggle = createComponent({
  * See the `m3e-accordion` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eAccordion = createComponent({
+const M3eAccordion = o({
   tagName: "m3e-accordion",
   elementClass: M3eAccordionElement,
   react: React
@@ -967,7 +1016,7 @@ const M3eAccordion = createComponent({
  * See the `m3e-expansion-panel` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eExpansionPanel = createComponent({
+const M3eExpansionPanel = o({
   tagName: "m3e-expansion-panel",
   elementClass: M3eExpansionPanelElement,
   react: React,
@@ -992,7 +1041,7 @@ const M3eExpansionPanel = createComponent({
  * See the `m3e-fab` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eFab = createComponent({
+const M3eFab = o({
   tagName: "m3e-fab",
   elementClass: M3eFabElement,
   react: React,
@@ -1014,7 +1063,7 @@ const M3eFab = createComponent({
  * See the `m3e-fab-menu` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eFabMenu = createComponent({
+const M3eFabMenu = o({
   tagName: "m3e-fab-menu",
   elementClass: M3eFabMenuElement,
   react: React,
@@ -1037,7 +1086,7 @@ const M3eFabMenu = createComponent({
  * See the `m3e-fab-menu-item` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eFabMenuItem = createComponent({
+const M3eFabMenuItem = o({
   tagName: "m3e-fab-menu-item",
   elementClass: M3eFabMenuItemElement,
   react: React,
@@ -1059,7 +1108,7 @@ const M3eFabMenuItem = createComponent({
  * See the `m3e-fab-menu-trigger` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eFabMenuTrigger = createComponent({
+const M3eFabMenuTrigger = o({
   tagName: "m3e-fab-menu-trigger",
   elementClass: M3eFabMenuTriggerElement,
   react: React
@@ -1078,7 +1127,7 @@ const M3eFabMenuTrigger = createComponent({
  * See the `m3e-form-field` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eFormField = createComponent({
+const M3eFormField = o({
   tagName: "m3e-form-field",
   elementClass: M3eFormFieldElement,
   react: React
@@ -1097,7 +1146,7 @@ const M3eFormField = createComponent({
  * See the `m3e-heading` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eHeading = createComponent({
+const M3eHeading = o({
   tagName: "m3e-heading",
   elementClass: M3eHeadingElement,
   react: React
@@ -1116,7 +1165,7 @@ const M3eHeading = createComponent({
  * See the `m3e-icon` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eIcon = createComponent({
+const M3eIcon = o({
   tagName: "m3e-icon",
   elementClass: M3eIconElement,
   react: React
@@ -1135,7 +1184,7 @@ const M3eIcon = createComponent({
  * See the `m3e-icon-button` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eIconButton = createComponent({
+const M3eIconButton = o({
   tagName: "m3e-icon-button",
   elementClass: M3eIconButtonElement,
   react: React,
@@ -1160,7 +1209,7 @@ const M3eIconButton = createComponent({
  * See the `m3e-action-list` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eActionList = createComponent({
+const M3eActionList = o({
   tagName: "m3e-action-list",
   elementClass: M3eActionListElement,
   react: React
@@ -1179,7 +1228,7 @@ const M3eActionList = createComponent({
  * See the `m3e-expandable-list-item` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eExpandableListItem = createComponent({
+const M3eExpandableListItem = o({
   tagName: "m3e-expandable-list-item",
   elementClass: M3eExpandableListItemElement,
   react: React,
@@ -1204,7 +1253,7 @@ const M3eExpandableListItem = createComponent({
  * See the `m3e-list` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eList = createComponent({
+const M3eList = o({
   tagName: "m3e-list",
   elementClass: M3eListElement,
   react: React
@@ -1223,7 +1272,7 @@ const M3eList = createComponent({
  * See the `m3e-list-action` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eListAction = createComponent({
+const M3eListAction = o({
   tagName: "m3e-list-action",
   elementClass: M3eListActionElement,
   react: React,
@@ -1245,7 +1294,7 @@ const M3eListAction = createComponent({
  * See the `m3e-list-item` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eListItem = createComponent({
+const M3eListItem = o({
   tagName: "m3e-list-item",
   elementClass: M3eListItemElement,
   react: React
@@ -1264,7 +1313,7 @@ const M3eListItem = createComponent({
  * See the `m3e-list-option` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eListOption = createComponent({
+const M3eListOption = o({
   tagName: "m3e-list-option",
   elementClass: M3eListOptionElement,
   react: React,
@@ -1289,7 +1338,7 @@ const M3eListOption = createComponent({
  * See the `m3e-selection-list` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eSelectionList = createComponent({
+const M3eSelectionList = o({
   tagName: "m3e-selection-list",
   elementClass: M3eSelectionListElement,
   react: React,
@@ -1313,7 +1362,7 @@ const M3eSelectionList = createComponent({
  * See the `m3e-loading-indicator` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eLoadingIndicator = createComponent({
+const M3eLoadingIndicator = o({
   tagName: "m3e-loading-indicator",
   elementClass: M3eLoadingIndicatorElement,
   react: React
@@ -1332,7 +1381,7 @@ const M3eLoadingIndicator = createComponent({
  * See the `m3e-menu` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eMenu = createComponent({
+const M3eMenu = o({
   tagName: "m3e-menu",
   elementClass: M3eMenuElement,
   react: React,
@@ -1355,7 +1404,7 @@ const M3eMenu = createComponent({
  * See the `m3e-menu-item` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eMenuItem = createComponent({
+const M3eMenuItem = o({
   tagName: "m3e-menu-item",
   elementClass: M3eMenuItemElement,
   react: React,
@@ -1377,7 +1426,7 @@ const M3eMenuItem = createComponent({
  * See the `m3e-menu-item-checkbox` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eMenuItemCheckbox = createComponent({
+const M3eMenuItemCheckbox = o({
   tagName: "m3e-menu-item-checkbox",
   elementClass: M3eMenuItemCheckboxElement,
   react: React,
@@ -1399,7 +1448,7 @@ const M3eMenuItemCheckbox = createComponent({
  * See the `m3e-menu-item-group` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eMenuItemGroup = createComponent({
+const M3eMenuItemGroup = o({
   tagName: "m3e-menu-item-group",
   elementClass: M3eMenuItemGroupElement,
   react: React
@@ -1418,7 +1467,7 @@ const M3eMenuItemGroup = createComponent({
  * See the `m3e-menu-item-radio` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eMenuItemRadio = createComponent({
+const M3eMenuItemRadio = o({
   tagName: "m3e-menu-item-radio",
   elementClass: M3eMenuItemRadioElement,
   react: React,
@@ -1440,7 +1489,7 @@ const M3eMenuItemRadio = createComponent({
  * See the `m3e-menu-trigger` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eMenuTrigger = createComponent({
+const M3eMenuTrigger = o({
   tagName: "m3e-menu-trigger",
   elementClass: M3eMenuTriggerElement,
   react: React
@@ -1459,7 +1508,7 @@ const M3eMenuTrigger = createComponent({
  * See the `m3e-nav-bar` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eNavBar = createComponent({
+const M3eNavBar = o({
   tagName: "m3e-nav-bar",
   elementClass: M3eNavBarElement,
   react: React,
@@ -1483,7 +1532,7 @@ const M3eNavBar = createComponent({
  * See the `m3e-nav-item` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eNavItem = createComponent({
+const M3eNavItem = o({
   tagName: "m3e-nav-item",
   elementClass: M3eNavItemElement,
   react: React,
@@ -1508,7 +1557,7 @@ const M3eNavItem = createComponent({
  * See the `m3e-nav-menu` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eNavMenu = createComponent({
+const M3eNavMenu = o({
   tagName: "m3e-nav-menu",
   elementClass: M3eNavMenuElement,
   react: React
@@ -1527,7 +1576,7 @@ const M3eNavMenu = createComponent({
  * See the `m3e-nav-menu-item` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eNavMenuItem = createComponent({
+const M3eNavMenuItem = o({
   tagName: "m3e-nav-menu-item",
   elementClass: M3eNavMenuItemElement,
   react: React,
@@ -1553,7 +1602,7 @@ const M3eNavMenuItem = createComponent({
  * See the `m3e-nav-menu-item-group` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eNavMenuItemGroup = createComponent({
+const M3eNavMenuItemGroup = o({
   tagName: "m3e-nav-menu-item-group",
   elementClass: M3eNavMenuItemGroupElement,
   react: React
@@ -1572,7 +1621,7 @@ const M3eNavMenuItemGroup = createComponent({
  * See the `m3e-nav-rail` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eNavRail = createComponent({
+const M3eNavRail = o({
   tagName: "m3e-nav-rail",
   elementClass: M3eNavRailElement,
   react: React,
@@ -1596,7 +1645,7 @@ const M3eNavRail = createComponent({
  * See the `m3e-nav-rail-toggle` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eNavRailToggle = createComponent({
+const M3eNavRailToggle = o({
   tagName: "m3e-nav-rail-toggle",
   elementClass: M3eNavRailToggleElement,
   react: React
@@ -1615,7 +1664,7 @@ const M3eNavRailToggle = createComponent({
  * See the `m3e-option` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eOption = createComponent({
+const M3eOption = o({
   tagName: "m3e-option",
   elementClass: M3eOptionElement,
   react: React
@@ -1634,7 +1683,7 @@ const M3eOption = createComponent({
  * See the `m3e-optgroup` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eOptGroup = createComponent({
+const M3eOptGroup = o({
   tagName: "m3e-optgroup",
   elementClass: M3eOptGroupElement,
   react: React
@@ -1653,7 +1702,7 @@ const M3eOptGroup = createComponent({
  * See the `m3e-paginator` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3ePaginator = createComponent({
+const M3ePaginator = o({
   tagName: "m3e-paginator",
   elementClass: M3ePaginatorElement,
   react: React,
@@ -1675,7 +1724,7 @@ const M3ePaginator = createComponent({
  * See the `m3e-circular-progress-indicator` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eCircularProgressIndicator = createComponent({
+const M3eCircularProgressIndicator = o({
   tagName: "m3e-circular-progress-indicator",
   elementClass: M3eCircularProgressIndicatorElement,
   react: React
@@ -1694,7 +1743,7 @@ const M3eCircularProgressIndicator = createComponent({
  * See the `m3e-linear-progress-indicator` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eLinearProgressIndicator = createComponent({
+const M3eLinearProgressIndicator = o({
   tagName: "m3e-linear-progress-indicator",
   elementClass: M3eLinearProgressIndicatorElement,
   react: React
@@ -1713,7 +1762,7 @@ const M3eLinearProgressIndicator = createComponent({
  * See the `m3e-radio` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eRadio = createComponent({
+const M3eRadio = o({
   tagName: "m3e-radio",
   elementClass: M3eRadioElement,
   react: React,
@@ -1738,7 +1787,7 @@ const M3eRadio = createComponent({
  * See the `m3e-radio-group` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eRadioGroup = createComponent({
+const M3eRadioGroup = o({
   tagName: "m3e-radio-group",
   elementClass: M3eRadioGroupElement,
   react: React,
@@ -1762,7 +1811,7 @@ const M3eRadioGroup = createComponent({
  * See the `m3e-search-bar` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eSearchBar = createComponent({
+const M3eSearchBar = o({
   tagName: "m3e-search-bar",
   elementClass: M3eSearchBarElement,
   react: React,
@@ -1784,7 +1833,7 @@ const M3eSearchBar = createComponent({
  * See the `m3e-search-view` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eSearchView = createComponent({
+const M3eSearchView = o({
   tagName: "m3e-search-view",
   elementClass: M3eSearchViewElement,
   react: React,
@@ -1809,7 +1858,7 @@ const M3eSearchView = createComponent({
  * See the `m3e-segmented-button` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eSegmentedButton = createComponent({
+const M3eSegmentedButton = o({
   tagName: "m3e-segmented-button",
   elementClass: M3eSegmentedButtonElement,
   react: React,
@@ -1833,7 +1882,7 @@ const M3eSegmentedButton = createComponent({
  * See the `m3e-button-segment` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eButtonSegment = createComponent({
+const M3eButtonSegment = o({
   tagName: "m3e-button-segment",
   elementClass: M3eButtonSegmentElement,
   react: React,
@@ -1858,7 +1907,7 @@ const M3eButtonSegment = createComponent({
  * See the `m3e-select` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eSelect = createComponent({
+const M3eSelect = o({
   tagName: "m3e-select",
   elementClass: M3eSelectElement,
   react: React,
@@ -1882,7 +1931,7 @@ const M3eSelect = createComponent({
  * See the `m3e-shape` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eShape = createComponent({
+const M3eShape = o({
   tagName: "m3e-shape",
   elementClass: M3eShapeElement,
   react: React
@@ -1901,7 +1950,7 @@ const M3eShape = createComponent({
  * See the `m3e-skeleton` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eSkeleton = createComponent({
+const M3eSkeleton = o({
   tagName: "m3e-skeleton",
   elementClass: M3eSkeletonElement,
   react: React
@@ -1920,7 +1969,7 @@ const M3eSkeleton = createComponent({
  * See the `m3e-slide-group` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eSlideGroup = createComponent({
+const M3eSlideGroup = o({
   tagName: "m3e-slide-group",
   elementClass: M3eSlideGroupElement,
   react: React
@@ -1939,7 +1988,7 @@ const M3eSlideGroup = createComponent({
  * See the `m3e-slider` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eSlider = createComponent({
+const M3eSlider = o({
   tagName: "m3e-slider",
   elementClass: M3eSliderElement,
   react: React,
@@ -1963,7 +2012,7 @@ const M3eSlider = createComponent({
  * See the `m3e-slider-thumb` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eSliderThumb = createComponent({
+const M3eSliderThumb = o({
   tagName: "m3e-slider-thumb",
   elementClass: M3eSliderThumbElement,
   react: React,
@@ -1988,7 +2037,7 @@ const M3eSliderThumb = createComponent({
  * See the `m3e-split-button` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eSplitButton = createComponent({
+const M3eSplitButton = o({
   tagName: "m3e-split-button",
   elementClass: M3eSplitButtonElement,
   react: React
@@ -2007,7 +2056,7 @@ const M3eSplitButton = createComponent({
  * See the `m3e-split-pane` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eSplitPane = createComponent({
+const M3eSplitPane = o({
   tagName: "m3e-split-pane",
   elementClass: M3eSplitPaneElement,
   react: React,
@@ -2031,7 +2080,7 @@ const M3eSplitPane = createComponent({
  * See the `m3e-step` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eStep = createComponent({
+const M3eStep = o({
   tagName: "m3e-step",
   elementClass: M3eStepElement,
   react: React,
@@ -2056,7 +2105,7 @@ const M3eStep = createComponent({
  * See the `m3e-step-panel` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eStepPanel = createComponent({
+const M3eStepPanel = o({
   tagName: "m3e-step-panel",
   elementClass: M3eStepPanelElement,
   react: React
@@ -2075,7 +2124,7 @@ const M3eStepPanel = createComponent({
  * See the `m3e-stepper` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eStepper = createComponent({
+const M3eStepper = o({
   tagName: "m3e-stepper",
   elementClass: M3eStepperElement,
   react: React,
@@ -2099,7 +2148,7 @@ const M3eStepper = createComponent({
  * See the `m3e-stepper-next` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eStepperNext = createComponent({
+const M3eStepperNext = o({
   tagName: "m3e-stepper-next",
   elementClass: M3eStepperNextElement,
   react: React
@@ -2118,7 +2167,7 @@ const M3eStepperNext = createComponent({
  * See the `m3e-stepper-previous` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eStepperPrevious = createComponent({
+const M3eStepperPrevious = o({
   tagName: "m3e-stepper-previous",
   elementClass: M3eStepperPreviousElement,
   react: React
@@ -2137,7 +2186,7 @@ const M3eStepperPrevious = createComponent({
  * See the `m3e-stepper-reset` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eStepperReset = createComponent({
+const M3eStepperReset = o({
   tagName: "m3e-stepper-reset",
   elementClass: M3eStepperResetElement,
   react: React
@@ -2156,7 +2205,7 @@ const M3eStepperReset = createComponent({
  * See the `m3e-switch` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eSwitch = createComponent({
+const M3eSwitch = o({
   tagName: "m3e-switch",
   elementClass: M3eSwitchElement,
   react: React,
@@ -2181,7 +2230,7 @@ const M3eSwitch = createComponent({
  * See the `m3e-tab` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eTab = createComponent({
+const M3eTab = o({
   tagName: "m3e-tab",
   elementClass: M3eTabElement,
   react: React,
@@ -2206,7 +2255,7 @@ const M3eTab = createComponent({
  * See the `m3e-tab-panel` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eTabPanel = createComponent({
+const M3eTabPanel = o({
   tagName: "m3e-tab-panel",
   elementClass: M3eTabPanelElement,
   react: React
@@ -2225,7 +2274,7 @@ const M3eTabPanel = createComponent({
  * See the `m3e-tabs` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eTabs = createComponent({
+const M3eTabs = o({
   tagName: "m3e-tabs",
   elementClass: M3eTabsElement,
   react: React,
@@ -2249,7 +2298,7 @@ const M3eTabs = createComponent({
  * See the `m3e-textarea-autosize` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eTextareaAutosize = createComponent({
+const M3eTextareaAutosize = o({
   tagName: "m3e-textarea-autosize",
   elementClass: M3eTextareaAutosizeElement,
   react: React
@@ -2268,7 +2317,7 @@ const M3eTextareaAutosize = createComponent({
  * See the `m3e-theme` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eTheme = createComponent({
+const M3eTheme = o({
   tagName: "m3e-theme",
   elementClass: M3eThemeElement,
   react: React,
@@ -2290,7 +2339,7 @@ const M3eTheme = createComponent({
  * See the `m3e-theme-icon` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eThemeIcon = createComponent({
+const M3eThemeIcon = o({
   tagName: "m3e-theme-icon",
   elementClass: M3eThemeIconElement,
   react: React
@@ -2309,7 +2358,7 @@ const M3eThemeIcon = createComponent({
  * See the `m3e-toc` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eToc = createComponent({
+const M3eToc = o({
   tagName: "m3e-toc",
   elementClass: M3eTocElement,
   react: React
@@ -2328,7 +2377,7 @@ const M3eToc = createComponent({
  * See the `m3e-toolbar` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eToolbar = createComponent({
+const M3eToolbar = o({
   tagName: "m3e-toolbar",
   elementClass: M3eToolbarElement,
   react: React
@@ -2347,7 +2396,7 @@ const M3eToolbar = createComponent({
  * See the `m3e-rich-tooltip` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eRichTooltip = createComponent({
+const M3eRichTooltip = o({
   tagName: "m3e-rich-tooltip",
   elementClass: M3eRichTooltipElement,
   react: React,
@@ -2370,7 +2419,7 @@ const M3eRichTooltip = createComponent({
  * See the `m3e-rich-tooltip-action` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eRichTooltipAction = createComponent({
+const M3eRichTooltipAction = o({
   tagName: "m3e-rich-tooltip-action",
   elementClass: M3eRichTooltipActionElement,
   react: React
@@ -2389,7 +2438,7 @@ const M3eRichTooltipAction = createComponent({
  * See the `m3e-tooltip` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eTooltip = createComponent({
+const M3eTooltip = o({
   tagName: "m3e-tooltip",
   elementClass: M3eTooltipElement,
   react: React
@@ -2408,7 +2457,7 @@ const M3eTooltip = createComponent({
  * See the `m3e-tree` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eTree = createComponent({
+const M3eTree = o({
   tagName: "m3e-tree",
   elementClass: M3eTreeElement,
   react: React,
@@ -2430,7 +2479,7 @@ const M3eTree = createComponent({
  * See the `m3e-tree-item` documentation for full details on behavior, styling,
  * accessibility, and supported events.
  */
-const M3eTreeItem = createComponent({
+const M3eTreeItem = o({
   tagName: "m3e-tree-item",
   elementClass: M3eTreeItemElement,
   react: React,