@genesislcap/foundation-ui 14.424.1 → 14.426.0

package/dist/react.mjs

@@ -3,7 +3,6 @@
  * Generated from custom-elements manifest.
  */
 
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
 import React from 'react';
 import { AccordionItem as AccordionItemWC } from './esm/accordion-item/accordion-item.js';
 import { Accordion as AccordionWC } from './esm/accordion/accordion.js';
@@ -92,280 +91,785 @@ import { Tooltip as TooltipWC } from './esm/tooltip/tooltip.js';
 import { TreeView as TreeViewWC } from './esm/tree-view/tree-view.js';
 import { UrlInput as UrlInputWC } from './esm/url-input/url-input.js';
 
-const { wrap } = provideReactWrapper(React);
-
-export const AccordionItem = wrap(AccordionItemWC);
+function _mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') ref(value);
+      else if (ref != null) ref.current = value;
+    }
+  };
+}
+
+export const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
+});
 
-export const Accordion = wrap(AccordionWC);
+export const Accordion = React.forwardRef(function Accordion(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
+});
 
-export const ActionsMenu = wrap(ActionsMenuWC);
+export const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ActionsMenuWC) ?? '%%prefix%%-actions-menu', { ...rest, ref }, children);
+});
 
-export const AiCriteriaSearch = wrap(AiCriteriaSearchWC, {
-  events: {
-    onCriteriaChanged: 'criteria-changed',
-    onValidationErrors: 'validation-errors',
-  },
+export const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref) {
+  const { onCriteriaChanged, onValidationErrors, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onCriteriaChangedRef = React.useRef(onCriteriaChanged);
+  _onCriteriaChangedRef.current = onCriteriaChanged;
+  const _onValidationErrorsRef = React.useRef(onValidationErrors);
+  _onValidationErrorsRef.current = onValidationErrors;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onCriteriaChangedFn = (e) => _onCriteriaChangedRef.current?.(e);
+    el.addEventListener('criteria-changed', _onCriteriaChangedFn);
+    const _onValidationErrorsFn = (e) => _onValidationErrorsRef.current?.(e);
+    el.addEventListener('validation-errors', _onValidationErrorsFn);
+    return () => {
+      el.removeEventListener('criteria-changed', _onCriteriaChangedFn);
+      el.removeEventListener('validation-errors', _onValidationErrorsFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(AiCriteriaSearchWC) ?? '%%prefix%%-ai-criteria-search', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const AiIndicator = wrap(AiIndicatorWC);
+export const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
+});
 
-export const Anchor = wrap(AnchorWC);
+export const Anchor = React.forwardRef(function Anchor(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AnchorWC) ?? '%%prefix%%-anchor', { ...rest, ref }, children);
+});
 
-export const AnchoredRegion = wrap(AnchoredRegionWC, {
-  events: {
-    onLoaded: 'loaded',
-    onPositionchange: 'positionchange',
-  },
+export const AnchoredRegion = React.forwardRef(function AnchoredRegion(props, ref) {
+  const { onLoaded, onPositionchange, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onLoadedRef = React.useRef(onLoaded);
+  _onLoadedRef.current = onLoaded;
+  const _onPositionchangeRef = React.useRef(onPositionchange);
+  _onPositionchangeRef.current = onPositionchange;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onLoadedFn = (e) => _onLoadedRef.current?.(e);
+    el.addEventListener('loaded', _onLoadedFn);
+    const _onPositionchangeFn = (e) => _onPositionchangeRef.current?.(e);
+    el.addEventListener('positionchange', _onPositionchangeFn);
+    return () => {
+      el.removeEventListener('loaded', _onLoadedFn);
+      el.removeEventListener('positionchange', _onPositionchangeFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(AnchoredRegionWC) ?? '%%prefix%%-anchored-region', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const Avatar = wrap(AvatarWC);
+export const Avatar = React.forwardRef(function Avatar(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AvatarWC) ?? '%%prefix%%-avatar', { ...rest, ref }, children);
+});
 
-export const Badge = wrap(BadgeWC);
+export const Badge = React.forwardRef(function Badge(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(BadgeWC) ?? '%%prefix%%-badge', { ...rest, ref }, children);
+});
 
-export const Banner = wrap(BannerWC);
+export const Banner = React.forwardRef(function Banner(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(BannerWC) ?? '%%prefix%%-banner', { ...rest, ref }, children);
+});
 
-export const Breadcrumb = wrap(BreadcrumbWC);
+export const Breadcrumb = React.forwardRef(function Breadcrumb(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(BreadcrumbWC) ?? '%%prefix%%-breadcrumb', { ...rest, ref }, children);
+});
 
-export const BreadcrumbItem = wrap(BreadcrumbItemWC);
+export const BreadcrumbItem = React.forwardRef(function BreadcrumbItem(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(BreadcrumbItemWC) ?? '%%prefix%%-breadcrumb-item', { ...rest, ref }, children);
+});
 
-export const Button = wrap(ButtonWC);
+export const Button = React.forwardRef(function Button(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ButtonWC) ?? '%%prefix%%-button', { ...rest, ref }, children);
+});
 
-export const Calendar = wrap(CalendarWC, {
-  events: {
-    onDateselected: 'dateselected',
-  },
+export const Calendar = React.forwardRef(function Calendar(props, ref) {
+  const { onDateselected, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onDateselectedRef = React.useRef(onDateselected);
+  _onDateselectedRef.current = onDateselected;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onDateselectedFn = (e) => _onDateselectedRef.current?.(e);
+    el.addEventListener('dateselected', _onDateselectedFn);
+    return () => {
+      el.removeEventListener('dateselected', _onDateselectedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(CalendarWC) ?? '%%prefix%%-calendar', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const Card = wrap(CardWC);
+export const Card = React.forwardRef(function Card(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(CardWC) ?? '%%prefix%%-card', { ...rest, ref }, children);
+});
 
-export const CategorizedMultiselect = wrap(CategorizedMultiselectWC, {
-  events: {
-    onSelectionChange: 'selectionChange',
-  },
+export const CategorizedMultiselect = React.forwardRef(function CategorizedMultiselect(props, ref) {
+  const { onSelectionChange, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onSelectionChangeRef = React.useRef(onSelectionChange);
+  _onSelectionChangeRef.current = onSelectionChange;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onSelectionChangeFn = (e) => _onSelectionChangeRef.current?.(e);
+    el.addEventListener('selectionChange', _onSelectionChangeFn);
+    return () => {
+      el.removeEventListener('selectionChange', _onSelectionChangeFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(CategorizedMultiselectWC) ?? '%%prefix%%-categorized-multiselect', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const Checkbox = wrap(CheckboxWC);
+export const Checkbox = React.forwardRef(function Checkbox(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(CheckboxWC) ?? '%%prefix%%-checkbox', { ...rest, ref }, children);
+});
 
-export const Combobox = wrap(ComboboxWC);
+export const Combobox = React.forwardRef(function Combobox(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ComboboxWC) ?? '%%prefix%%-combobox', { ...rest, ref }, children);
+});
 
-export const ConnectionIndicator = wrap(ConnectionIndicatorWC);
+export const ConnectionIndicator = React.forwardRef(function ConnectionIndicator(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ConnectionIndicatorWC) ?? '%%prefix%%-connection-indicator', { ...rest, ref }, children);
+});
 
-export const DataGrid = wrap(DataGridWC);
+export const DataGrid = React.forwardRef(function DataGrid(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(DataGridWC) ?? '%%prefix%%-data-grid', { ...rest, ref }, children);
+});
 
-export const DataGridCell = wrap(DataGridCellWC, {
-  events: {
-    onCellFocused: 'cell-focused',
-  },
+export const DataGridCell = React.forwardRef(function DataGridCell(props, ref) {
+  const { onCellFocused, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onCellFocusedRef = React.useRef(onCellFocused);
+  _onCellFocusedRef.current = onCellFocused;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onCellFocusedFn = (e) => _onCellFocusedRef.current?.(e);
+    el.addEventListener('cell-focused', _onCellFocusedFn);
+    return () => {
+      el.removeEventListener('cell-focused', _onCellFocusedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(DataGridCellWC) ?? '%%prefix%%-data-grid-cell', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const DataGridRow = wrap(DataGridRowWC, {
-  events: {
-    onRowFocused: 'row-focused',
-  },
+export const DataGridRow = React.forwardRef(function DataGridRow(props, ref) {
+  const { onRowFocused, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onRowFocusedRef = React.useRef(onRowFocused);
+  _onRowFocusedRef.current = onRowFocused;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onRowFocusedFn = (e) => _onRowFocusedRef.current?.(e);
+    el.addEventListener('row-focused', _onRowFocusedFn);
+    return () => {
+      el.removeEventListener('row-focused', _onRowFocusedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(DataGridRowWC) ?? '%%prefix%%-data-grid-row', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const DatePicker = wrap(DatePickerWC, {
-  events: {
-    onValueChanged: 'value-changed',
-  },
+export const DatePicker = React.forwardRef(function DatePicker(props, ref) {
+  const { onValueChanged, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onValueChangedRef = React.useRef(onValueChanged);
+  _onValueChangedRef.current = onValueChanged;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onValueChangedFn = (e) => _onValueChangedRef.current?.(e);
+    el.addEventListener('value-changed', _onValueChangedFn);
+    return () => {
+      el.removeEventListener('value-changed', _onValueChangedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(DatePickerWC) ?? '%%prefix%%-date-picker', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const FoundationDesignSystemProvider = wrap(FoundationDesignSystemProviderWC);
+export const FoundationDesignSystemProvider = React.forwardRef(function FoundationDesignSystemProvider(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(FoundationDesignSystemProviderWC) ?? '%%prefix%%-design-system-provider', { ...rest, ref }, children);
+});
 
-export const Dialog = wrap(DialogWC, {
-  events: {
-    onClose: 'close',
-  },
+export const Dialog = React.forwardRef(function Dialog(props, ref) {
+  const { onClose, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onCloseRef = React.useRef(onClose);
+  _onCloseRef.current = onClose;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onCloseFn = (e) => _onCloseRef.current?.(e);
+    el.addEventListener('close', _onCloseFn);
+    return () => {
+      el.removeEventListener('close', _onCloseFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(DialogWC) ?? '%%prefix%%-dialog', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const Disclosure = wrap(DisclosureWC);
+export const Disclosure = React.forwardRef(function Disclosure(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(DisclosureWC) ?? '%%prefix%%-disclosure', { ...rest, ref }, children);
+});
 
-export const Divider = wrap(DividerWC);
+export const Divider = React.forwardRef(function Divider(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(DividerWC) ?? '%%prefix%%-divider', { ...rest, ref }, children);
+});
 
-export const DropdownMenu = wrap(DropdownMenuWC);
+export const DropdownMenu = React.forwardRef(function DropdownMenu(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(DropdownMenuWC) ?? '%%prefix%%-dropdown-menu', { ...rest, ref }, children);
+});
 
-export const EnvironmentIndicator = wrap(EnvironmentIndicatorWC);
+export const EnvironmentIndicator = React.forwardRef(function EnvironmentIndicator(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(EnvironmentIndicatorWC) ?? '%%prefix%%-environment-indicator', { ...rest, ref }, children);
+});
 
-export const ErrorBanner = wrap(ErrorBannerWC);
+export const ErrorBanner = React.forwardRef(function ErrorBanner(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ErrorBannerWC) ?? '%%prefix%%-error-banner', { ...rest, ref }, children);
+});
 
-export const ErrorBoundary = wrap(ErrorBoundaryWC);
+export const ErrorBoundary = React.forwardRef(function ErrorBoundary(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ErrorBoundaryWC) ?? '%%prefix%%-error-boundary', { ...rest, ref }, children);
+});
 
-export const ErrorDialog = wrap(ErrorDialogWC);
+export const ErrorDialog = React.forwardRef(function ErrorDialog(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ErrorDialogWC) ?? '%%prefix%%-error-dialog', { ...rest, ref }, children);
+});
 
-export const FileReader = wrap(FileReaderWC, {
-  events: {
-    onFileRead: 'file-read',
-    onClear: 'clear',
-  },
+export const FileReader = React.forwardRef(function FileReader(props, ref) {
+  const { onFileRead, onClear, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onFileReadRef = React.useRef(onFileRead);
+  _onFileReadRef.current = onFileRead;
+  const _onClearRef = React.useRef(onClear);
+  _onClearRef.current = onClear;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onFileReadFn = (e) => _onFileReadRef.current?.(e);
+    el.addEventListener('file-read', _onFileReadFn);
+    const _onClearFn = (e) => _onClearRef.current?.(e);
+    el.addEventListener('clear', _onClearFn);
+    return () => {
+      el.removeEventListener('file-read', _onFileReadFn);
+      el.removeEventListener('clear', _onClearFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(FileReaderWC) ?? '%%prefix%%-file-reader', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const FileUpload = wrap(FileUploadWC, {
-  events: {
-    onFileSelected: 'file-selected',
-    onSuccess: 'success',
-    onErrorOut: 'errorOut',
-    onClear: 'clear',
-  },
+export const FileUpload = React.forwardRef(function FileUpload(props, ref) {
+  const { onFileSelected, onSuccess, onErrorOut, onClear, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onFileSelectedRef = React.useRef(onFileSelected);
+  _onFileSelectedRef.current = onFileSelected;
+  const _onSuccessRef = React.useRef(onSuccess);
+  _onSuccessRef.current = onSuccess;
+  const _onErrorOutRef = React.useRef(onErrorOut);
+  _onErrorOutRef.current = onErrorOut;
+  const _onClearRef = React.useRef(onClear);
+  _onClearRef.current = onClear;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onFileSelectedFn = (e) => _onFileSelectedRef.current?.(e);
+    el.addEventListener('file-selected', _onFileSelectedFn);
+    const _onSuccessFn = (e) => _onSuccessRef.current?.(e);
+    el.addEventListener('success', _onSuccessFn);
+    const _onErrorOutFn = (e) => _onErrorOutRef.current?.(e);
+    el.addEventListener('errorOut', _onErrorOutFn);
+    const _onClearFn = (e) => _onClearRef.current?.(e);
+    el.addEventListener('clear', _onClearFn);
+    return () => {
+      el.removeEventListener('file-selected', _onFileSelectedFn);
+      el.removeEventListener('success', _onSuccessFn);
+      el.removeEventListener('errorOut', _onErrorOutFn);
+      el.removeEventListener('clear', _onClearFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(FileUploadWC) ?? '%%prefix%%-file-upload', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const Filter = wrap(FilterWC, {
-  events: {
-    onFilterChanged: 'filter-changed',
-    onFilterCleared: 'filter-cleared',
-  },
+export const Filter = React.forwardRef(function Filter(props, ref) {
+  const { onFilterChanged, onFilterCleared, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onFilterChangedRef = React.useRef(onFilterChanged);
+  _onFilterChangedRef.current = onFilterChanged;
+  const _onFilterClearedRef = React.useRef(onFilterCleared);
+  _onFilterClearedRef.current = onFilterCleared;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onFilterChangedFn = (e) => _onFilterChangedRef.current?.(e);
+    el.addEventListener('filter-changed', _onFilterChangedFn);
+    const _onFilterClearedFn = (e) => _onFilterClearedRef.current?.(e);
+    el.addEventListener('filter-cleared', _onFilterClearedFn);
+    return () => {
+      el.removeEventListener('filter-changed', _onFilterChangedFn);
+      el.removeEventListener('filter-cleared', _onFilterClearedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(FilterWC) ?? '%%prefix%%-filter', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const FilterBar = wrap(FilterBarWC);
+export const FilterBar = React.forwardRef(function FilterBar(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(FilterBarWC) ?? '%%prefix%%-filter-bar', { ...rest, ref }, children);
+});
 
-export const FlexLayout = wrap(FlexLayoutWC);
+export const FlexLayout = React.forwardRef(function FlexLayout(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(FlexLayoutWC) ?? '%%prefix%%-flex-layout', { ...rest, ref }, children);
+});
 
-export const Flipper = wrap(FlipperWC);
+export const Flipper = React.forwardRef(function Flipper(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(FlipperWC) ?? '%%prefix%%-flipper', { ...rest, ref }, children);
+});
 
-export const Flyout = wrap(FlyoutWC, {
-  events: {
-    onClosed: 'closed',
-  },
+export const Flyout = React.forwardRef(function Flyout(props, ref) {
+  const { onClosed, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onClosedRef = React.useRef(onClosed);
+  _onClosedRef.current = onClosed;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onClosedFn = (e) => _onClosedRef.current?.(e);
+    el.addEventListener('closed', _onClosedFn);
+    return () => {
+      el.removeEventListener('closed', _onClosedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(FlyoutWC) ?? '%%prefix%%-flyout', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const GridLayout = wrap(GridLayoutWC);
+export const GridLayout = React.forwardRef(function GridLayout(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(GridLayoutWC) ?? '%%prefix%%-grid-layout', { ...rest, ref }, children);
+});
 
-export const GridLayoutItem = wrap(GridLayoutItemWC);
+export const GridLayoutItem = React.forwardRef(function GridLayoutItem(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(GridLayoutItemWC) ?? '%%prefix%%-grid-layout-item', { ...rest, ref }, children);
+});
 
-export const HorizontalScroll = wrap(HorizontalScrollWC, {
-  events: {
-    onScrollstart: 'scrollstart',
-    onScrollend: 'scrollend',
-  },
+export const HorizontalScroll = React.forwardRef(function HorizontalScroll(props, ref) {
+  const { onScrollstart, onScrollend, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onScrollstartRef = React.useRef(onScrollstart);
+  _onScrollstartRef.current = onScrollstart;
+  const _onScrollendRef = React.useRef(onScrollend);
+  _onScrollendRef.current = onScrollend;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onScrollstartFn = (e) => _onScrollstartRef.current?.(e);
+    el.addEventListener('scrollstart', _onScrollstartFn);
+    const _onScrollendFn = (e) => _onScrollendRef.current?.(e);
+    el.addEventListener('scrollend', _onScrollendFn);
+    return () => {
+      el.removeEventListener('scrollstart', _onScrollstartFn);
+      el.removeEventListener('scrollend', _onScrollendFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(HorizontalScrollWC) ?? '%%prefix%%-horizontal-scroll', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const Icon = wrap(IconWC);
+export const Icon = React.forwardRef(function Icon(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(IconWC) ?? '%%prefix%%-icon', { ...rest, ref }, children);
+});
 
-export const Listbox = wrap(ListboxWC);
+export const Listbox = React.forwardRef(function Listbox(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ListboxWC) ?? '%%prefix%%-listbox', { ...rest, ref }, children);
+});
 
-export const ListboxOption = wrap(ListboxOptionWC);
+export const ListboxOption = React.forwardRef(function ListboxOption(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ListboxOptionWC) ?? '%%prefix%%-option', { ...rest, ref }, children);
+});
 
-export const Menu = wrap(MenuWC);
+export const Menu = React.forwardRef(function Menu(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(MenuWC) ?? '%%prefix%%-menu', { ...rest, ref }, children);
+});
 
-export const MenuItem = wrap(MenuItemWC, {
-  events: {
-    onOnMenuClick: 'onMenuClick',
-    onExpandedChange: 'expanded-change',
-  },
+export const MenuItem = React.forwardRef(function MenuItem(props, ref) {
+  const { onOnMenuClick, onExpandedChange, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onOnMenuClickRef = React.useRef(onOnMenuClick);
+  _onOnMenuClickRef.current = onOnMenuClick;
+  const _onExpandedChangeRef = React.useRef(onExpandedChange);
+  _onExpandedChangeRef.current = onExpandedChange;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onOnMenuClickFn = (e) => _onOnMenuClickRef.current?.(e);
+    el.addEventListener('onMenuClick', _onOnMenuClickFn);
+    const _onExpandedChangeFn = (e) => _onExpandedChangeRef.current?.(e);
+    el.addEventListener('expanded-change', _onExpandedChangeFn);
+    return () => {
+      el.removeEventListener('onMenuClick', _onOnMenuClickFn);
+      el.removeEventListener('expanded-change', _onExpandedChangeFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(MenuItemWC) ?? '%%prefix%%-menu-item', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const Modal = wrap(ModalWC);
+export const Modal = React.forwardRef(function Modal(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ModalWC) ?? '%%prefix%%-modal', { ...rest, ref }, children);
+});
 
-export const Multiselect = wrap(MultiselectWC, {
-  events: {
-    onSelectionChange: 'selectionChange',
-    onClear: 'clear',
-  },
+export const Multiselect = React.forwardRef(function Multiselect(props, ref) {
+  const { onSelectionChange, onClear, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onSelectionChangeRef = React.useRef(onSelectionChange);
+  _onSelectionChangeRef.current = onSelectionChange;
+  const _onClearRef = React.useRef(onClear);
+  _onClearRef.current = onClear;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onSelectionChangeFn = (e) => _onSelectionChangeRef.current?.(e);
+    el.addEventListener('selectionChange', _onSelectionChangeFn);
+    const _onClearFn = (e) => _onClearRef.current?.(e);
+    el.addEventListener('clear', _onClearFn);
+    return () => {
+      el.removeEventListener('selectionChange', _onSelectionChangeFn);
+      el.removeEventListener('clear', _onClearFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(MultiselectWC) ?? '%%prefix%%-multiselect', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const NotificationListener = wrap(NotificationListenerWC);
+export const NotificationListener = React.forwardRef(function NotificationListener(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(NotificationListenerWC) ?? '%%prefix%%-notification-listener', { ...rest, ref }, children);
+});
 
-export const NumberField = wrap(NumberFieldWC);
+export const NumberField = React.forwardRef(function NumberField(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(NumberFieldWC) ?? '%%prefix%%-number-field', { ...rest, ref }, children);
+});
 
-export const Optgroup = wrap(OptgroupWC);
+export const Optgroup = React.forwardRef(function Optgroup(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(OptgroupWC) ?? '%%prefix%%-optgroup', { ...rest, ref }, children);
+});
 
-export const Popper = wrap(PopperWC);
+export const Popper = React.forwardRef(function Popper(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(PopperWC) ?? '%%prefix%%-popper', { ...rest, ref }, children);
+});
 
-export const Progress = wrap(ProgressWC);
+export const Progress = React.forwardRef(function Progress(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ProgressWC) ?? '%%prefix%%-progress', { ...rest, ref }, children);
+});
 
-export const ProgressRing = wrap(ProgressRingWC);
+export const ProgressRing = React.forwardRef(function ProgressRing(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ProgressRingWC) ?? '%%prefix%%-progress-ring', { ...rest, ref }, children);
+});
 
-export const Radio = wrap(RadioWC);
+export const Radio = React.forwardRef(function Radio(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(RadioWC) ?? '%%prefix%%-radio', { ...rest, ref }, children);
+});
 
-export const RadioGroup = wrap(RadioGroupWC);
+export const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(RadioGroupWC) ?? '%%prefix%%-radio-group', { ...rest, ref }, children);
+});
 
-export const Scheduler = wrap(SchedulerWC);
+export const Scheduler = React.forwardRef(function Scheduler(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SchedulerWC) ?? '%%prefix%%-scheduler', { ...rest, ref }, children);
+});
 
-export const SchedulerCronBuilder = wrap(SchedulerCronBuilderWC);
+export const SchedulerCronBuilder = React.forwardRef(function SchedulerCronBuilder(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SchedulerCronBuilderWC) ?? '%%prefix%%-scheduler-cron-builder', { ...rest, ref }, children);
+});
 
-export const SchedulerTimezone = wrap(SchedulerTimezoneWC);
+export const SchedulerTimezone = React.forwardRef(function SchedulerTimezone(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SchedulerTimezoneWC) ?? '%%prefix%%-scheduler-timezone', { ...rest, ref }, children);
+});
 
-export const SearchBarCombobox = wrap(SearchBarComboboxWC, {
-  events: {
-    onInputdeleted: 'inputdeleted',
-  },
+export const SearchBarCombobox = React.forwardRef(function SearchBarCombobox(props, ref) {
+  const { onInputdeleted, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onInputdeletedRef = React.useRef(onInputdeleted);
+  _onInputdeletedRef.current = onInputdeleted;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onInputdeletedFn = (e) => _onInputdeletedRef.current?.(e);
+    el.addEventListener('inputdeleted', _onInputdeletedFn);
+    return () => {
+      el.removeEventListener('inputdeleted', _onInputdeletedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(SearchBarComboboxWC) ?? '%%prefix%%-search-bar-combobox', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const SearchBar = wrap(SearchBarWC, {
-  events: {
-    onSelectionChange: 'selectionChange',
-  },
+export const SearchBar = React.forwardRef(function SearchBar(props, ref) {
+  const { onSelectionChange, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onSelectionChangeRef = React.useRef(onSelectionChange);
+  _onSelectionChangeRef.current = onSelectionChange;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onSelectionChangeFn = (e) => _onSelectionChangeRef.current?.(e);
+    el.addEventListener('selectionChange', _onSelectionChangeFn);
+    return () => {
+      el.removeEventListener('selectionChange', _onSelectionChangeFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(SearchBarWC) ?? '%%prefix%%-search-bar', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const SectionNavigator = wrap(SectionNavigatorWC, {
-  events: {
-    onSectionNavigatorSetState: 'section-navigator-set-state',
-    onSectionNavigatorSetStates: 'section-navigator-set-states',
-    onSectionNavigatorClearState: 'section-navigator-clear-state',
-    onSectionNavigatorClearAllStates: 'section-navigator-clear-all-states',
-  },
+export const SectionNavigator = React.forwardRef(function SectionNavigator(props, ref) {
+  const { onSectionNavigatorSetState, onSectionNavigatorSetStates, onSectionNavigatorClearState, onSectionNavigatorClearAllStates, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onSectionNavigatorSetStateRef = React.useRef(onSectionNavigatorSetState);
+  _onSectionNavigatorSetStateRef.current = onSectionNavigatorSetState;
+  const _onSectionNavigatorSetStatesRef = React.useRef(onSectionNavigatorSetStates);
+  _onSectionNavigatorSetStatesRef.current = onSectionNavigatorSetStates;
+  const _onSectionNavigatorClearStateRef = React.useRef(onSectionNavigatorClearState);
+  _onSectionNavigatorClearStateRef.current = onSectionNavigatorClearState;
+  const _onSectionNavigatorClearAllStatesRef = React.useRef(onSectionNavigatorClearAllStates);
+  _onSectionNavigatorClearAllStatesRef.current = onSectionNavigatorClearAllStates;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onSectionNavigatorSetStateFn = (e) => _onSectionNavigatorSetStateRef.current?.(e);
+    el.addEventListener('section-navigator-set-state', _onSectionNavigatorSetStateFn);
+    const _onSectionNavigatorSetStatesFn = (e) => _onSectionNavigatorSetStatesRef.current?.(e);
+    el.addEventListener('section-navigator-set-states', _onSectionNavigatorSetStatesFn);
+    const _onSectionNavigatorClearStateFn = (e) => _onSectionNavigatorClearStateRef.current?.(e);
+    el.addEventListener('section-navigator-clear-state', _onSectionNavigatorClearStateFn);
+    const _onSectionNavigatorClearAllStatesFn = (e) => _onSectionNavigatorClearAllStatesRef.current?.(e);
+    el.addEventListener('section-navigator-clear-all-states', _onSectionNavigatorClearAllStatesFn);
+    return () => {
+      el.removeEventListener('section-navigator-set-state', _onSectionNavigatorSetStateFn);
+      el.removeEventListener('section-navigator-set-states', _onSectionNavigatorSetStatesFn);
+      el.removeEventListener('section-navigator-clear-state', _onSectionNavigatorClearStateFn);
+      el.removeEventListener('section-navigator-clear-all-states', _onSectionNavigatorClearAllStatesFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(SectionNavigatorWC) ?? '%%prefix%%-section-navigator', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const SegmentedControl = wrap(SegmentedControlWC);
+export const SegmentedControl = React.forwardRef(function SegmentedControl(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SegmentedControlWC) ?? '%%prefix%%-segmented-control', { ...rest, ref }, children);
+});
 
-export const SegmentedItem = wrap(SegmentedItemWC);
+export const SegmentedItem = React.forwardRef(function SegmentedItem(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SegmentedItemWC) ?? '%%prefix%%-segmented-item', { ...rest, ref }, children);
+});
 
-export const Select = wrap(SelectWC);
+export const Select = React.forwardRef(function Select(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SelectWC) ?? '%%prefix%%-select', { ...rest, ref }, children);
+});
 
-export const Skeleton = wrap(SkeletonWC);
+export const Skeleton = React.forwardRef(function Skeleton(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SkeletonWC) ?? '%%prefix%%-skeleton', { ...rest, ref }, children);
+});
 
-export const Slider = wrap(SliderWC);
+export const Slider = React.forwardRef(function Slider(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SliderWC) ?? '%%prefix%%-slider', { ...rest, ref }, children);
+});
 
-export const SliderLabel = wrap(SliderLabelWC);
+export const SliderLabel = React.forwardRef(function SliderLabel(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SliderLabelWC) ?? '%%prefix%%-slider-label', { ...rest, ref }, children);
+});
 
-export const Snackbar = wrap(SnackbarWC, {
-  events: {
-    onAutoDismiss: 'autoDismiss',
-  },
+export const Snackbar = React.forwardRef(function Snackbar(props, ref) {
+  const { onAutoDismiss, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onAutoDismissRef = React.useRef(onAutoDismiss);
+  _onAutoDismissRef.current = onAutoDismiss;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onAutoDismissFn = (e) => _onAutoDismissRef.current?.(e);
+    el.addEventListener('autoDismiss', _onAutoDismissFn);
+    return () => {
+      el.removeEventListener('autoDismiss', _onAutoDismissFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(SnackbarWC) ?? '%%prefix%%-snackbar', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const StackingIcons = wrap(StackingIconsWC);
+export const StackingIcons = React.forwardRef(function StackingIcons(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(StackingIconsWC) ?? '%%prefix%%-stacking-icons', { ...rest, ref }, children);
+});
 
-export const StatusPill = wrap(StatusPillWC);
+export const StatusPill = React.forwardRef(function StatusPill(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(StatusPillWC) ?? '%%prefix%%-status-pill', { ...rest, ref }, children);
+});
 
-export const Stepper = wrap(StepperWC, {
-  events: {
-    onStepClick: 'step-click',
-    onValidationFailure: 'validation-failure',
-    onNextStep: 'next-step',
-    onValidationSuccess: 'validation-success',
-  },
+export const Stepper = React.forwardRef(function Stepper(props, ref) {
+  const { onStepClick, onValidationFailure, onNextStep, onValidationSuccess, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onStepClickRef = React.useRef(onStepClick);
+  _onStepClickRef.current = onStepClick;
+  const _onValidationFailureRef = React.useRef(onValidationFailure);
+  _onValidationFailureRef.current = onValidationFailure;
+  const _onNextStepRef = React.useRef(onNextStep);
+  _onNextStepRef.current = onNextStep;
+  const _onValidationSuccessRef = React.useRef(onValidationSuccess);
+  _onValidationSuccessRef.current = onValidationSuccess;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onStepClickFn = (e) => _onStepClickRef.current?.(e);
+    el.addEventListener('step-click', _onStepClickFn);
+    const _onValidationFailureFn = (e) => _onValidationFailureRef.current?.(e);
+    el.addEventListener('validation-failure', _onValidationFailureFn);
+    const _onNextStepFn = (e) => _onNextStepRef.current?.(e);
+    el.addEventListener('next-step', _onNextStepFn);
+    const _onValidationSuccessFn = (e) => _onValidationSuccessRef.current?.(e);
+    el.addEventListener('validation-success', _onValidationSuccessFn);
+    return () => {
+      el.removeEventListener('step-click', _onStepClickFn);
+      el.removeEventListener('validation-failure', _onValidationFailureFn);
+      el.removeEventListener('next-step', _onNextStepFn);
+      el.removeEventListener('validation-success', _onValidationSuccessFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(StepperWC) ?? '%%prefix%%-stepper', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const StepperTab = wrap(StepperTabWC, {
-  events: {
-    onTabClicked: 'tab-clicked',
-  },
+export const StepperTab = React.forwardRef(function StepperTab(props, ref) {
+  const { onTabClicked, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onTabClickedRef = React.useRef(onTabClicked);
+  _onTabClickedRef.current = onTabClicked;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onTabClickedFn = (e) => _onTabClickedRef.current?.(e);
+    el.addEventListener('tab-clicked', _onTabClickedFn);
+    return () => {
+      el.removeEventListener('tab-clicked', _onTabClickedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(StepperTabWC) ?? '%%prefix%%-stepper-tab', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const StepperTabPanel = wrap(StepperTabPanelWC);
+export const StepperTabPanel = React.forwardRef(function StepperTabPanel(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(StepperTabPanelWC) ?? '%%prefix%%-stepper-tab-panel', { ...rest, ref }, children);
+});
 
-export const Switch = wrap(SwitchWC);
+export const Switch = React.forwardRef(function Switch(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SwitchWC) ?? '%%prefix%%-switch', { ...rest, ref }, children);
+});
 
-export const Tab = wrap(TabWC);
+export const Tab = React.forwardRef(function Tab(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(TabWC) ?? '%%prefix%%-tab', { ...rest, ref }, children);
+});
 
-export const TabPanel = wrap(TabPanelWC);
+export const TabPanel = React.forwardRef(function TabPanel(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(TabPanelWC) ?? '%%prefix%%-tab-panel', { ...rest, ref }, children);
+});
 
-export const Tabs = wrap(TabsWC);
+export const Tabs = React.forwardRef(function Tabs(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(TabsWC) ?? '%%prefix%%-tabs', { ...rest, ref }, children);
+});
 
-export const TextArea = wrap(TextAreaWC);
+export const TextArea = React.forwardRef(function TextArea(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(TextAreaWC) ?? '%%prefix%%-text-area', { ...rest, ref }, children);
+});
 
-export const TextField = wrap(TextFieldWC);
+export const TextField = React.forwardRef(function TextField(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(TextFieldWC) ?? '%%prefix%%-text-field', { ...rest, ref }, children);
+});
 
-export const Toast = wrap(ToastWC);
+export const Toast = React.forwardRef(function Toast(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ToastWC) ?? '%%prefix%%-toast', { ...rest, ref }, children);
+});
 
-export const Toolbar = wrap(ToolbarWC);
+export const Toolbar = React.forwardRef(function Toolbar(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ToolbarWC) ?? '%%prefix%%-toolbar', { ...rest, ref }, children);
+});
 
-export const Tooltip = wrap(TooltipWC, {
-  events: {
-    onDismiss: 'dismiss',
-  },
+export const Tooltip = React.forwardRef(function Tooltip(props, ref) {
+  const { onDismiss, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onDismissRef = React.useRef(onDismiss);
+  _onDismissRef.current = onDismiss;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onDismissFn = (e) => _onDismissRef.current?.(e);
+    el.addEventListener('dismiss', _onDismissFn);
+    return () => {
+      el.removeEventListener('dismiss', _onDismissFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(TooltipWC) ?? '%%prefix%%-tooltip', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-export const TreeView = wrap(TreeViewWC);
+export const TreeView = React.forwardRef(function TreeView(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(TreeViewWC) ?? '%%prefix%%-tree-view', { ...rest, ref }, children);
+});
 
-export const UrlInput = wrap(UrlInputWC);
+export const UrlInput = React.forwardRef(function UrlInput(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(UrlInputWC) ?? '%%prefix%%-url-input', { ...rest, ref }, children);
+});