diff --git a/.manifest.json b/.manifest.json
new file mode 100644
index 0000000..8fefc28
--- /dev/null
+++ b/.manifest.json
@@ -0,0 +1,979 @@
+{
+  "resolved": [
+    {
+      "tag": "md-accordion",
+      "name": "MdAccordion",
+      "file": "expansion/accordion.js",
+      "className": "MdAccordion",
+      "events": {}
+    },
+    {
+      "tag": "md-assist-chip",
+      "name": "MdAssistChip",
+      "file": "chips/assist-chip.js",
+      "className": "MdAssistChip",
+      "events": {}
+    },
+    {
+      "tag": "md-autocomplete",
+      "name": "MdAutocomplete",
+      "file": "autocomplete/autocomplete.js",
+      "className": "MdAutocomplete",
+      "events": {
+        "onInput": "input",
+        "onSelect": "autocomplete:select"
+      }
+    },
+    {
+      "tag": "md-badge",
+      "name": "MdBadge",
+      "file": "badge/badge.js",
+      "className": "MdBadge",
+      "events": {}
+    },
+    {
+      "tag": "md-bottom-app-bar",
+      "name": "MdBottomAppBar",
+      "file": "appbar/bottom-app-bar.js",
+      "className": "MdBottomAppBar",
+      "events": {}
+    },
+    {
+      "tag": "md-bottom-sheet",
+      "name": "MdBottomSheet",
+      "file": "sheet/bottom-sheet.js",
+      "className": "MdBottomSheet",
+      "events": {
+        "onOpening": "bottom-sheet:opening",
+        "onOpened": "bottom-sheet:opened",
+        "onClosing": "bottom-sheet:closing",
+        "onClosed": "bottom-sheet:closed"
+      }
+    },
+    {
+      "tag": "md-branded-fab",
+      "name": "MdBrandedFab",
+      "file": "fab/branded-fab.js",
+      "className": "MdBrandedFab",
+      "events": {}
+    },
+    {
+      "tag": "md-button",
+      "name": "MdButton",
+      "file": "labs/gb/components/button/md-button.js",
+      "className": "Button",
+      "events": {}
+    },
+    {
+      "tag": "md-button-group",
+      "name": "MdButtonGroup",
+      "file": "buttongroup/button-group.js",
+      "className": "MdButtonGroup",
+      "events": {
+        "onChange": "button-group:change"
+      }
+    },
+    {
+      "tag": "md-card",
+      "name": "MdCard",
+      "file": "card/card.js",
+      "className": "MdCard",
+      "events": {}
+    },
+    {
+      "tag": "md-carousel",
+      "name": "MdCarousel",
+      "file": "carousel/carousel.js",
+      "className": "MdCarousel",
+      "events": {
+        "onChange": "carousel-change"
+      }
+    },
+    {
+      "tag": "md-carousel-item",
+      "name": "MdCarouselItem",
+      "file": "carousel/carousel-item.js",
+      "className": "MdCarouselItem",
+      "events": {}
+    },
+    {
+      "tag": "md-checkbox",
+      "name": "MdCheckbox",
+      "file": "checkbox/checkbox.js",
+      "className": "MdCheckbox",
+      "events": {
+        "onChange": "change",
+        "onInput": "input"
+      }
+    },
+    {
+      "tag": "md-chip-set",
+      "name": "MdChipSet",
+      "file": "chips/chip-set.js",
+      "className": "MdChipSet",
+      "events": {}
+    },
+    {
+      "tag": "md-circular-progress",
+      "name": "MdCircularProgress",
+      "file": "progress/circular-progress.js",
+      "className": "MdCircularProgress",
+      "events": {}
+    },
+    {
+      "tag": "md-date-picker",
+      "name": "MdDatePicker",
+      "file": "datepicker/date-picker.js",
+      "className": "MdDatePicker",
+      "events": {
+        "onChange": "date-picker:change"
+      }
+    },
+    {
+      "tag": "md-dialog",
+      "name": "MdDialog",
+      "file": "dialog/dialog.js",
+      "className": "MdDialog",
+      "events": {
+        "onOpen": "open",
+        "onOpened": "opened",
+        "onClose": "close",
+        "onClosed": "closed",
+        "onCancel": "cancel"
+      }
+    },
+    {
+      "tag": "md-divider",
+      "name": "MdDivider",
+      "file": "divider/divider.js",
+      "className": "MdDivider",
+      "events": {}
+    },
+    {
+      "tag": "md-elevated-button",
+      "name": "MdElevatedButton",
+      "file": "button/elevated-button.js",
+      "className": "MdElevatedButton",
+      "events": {}
+    },
+    {
+      "tag": "md-elevated-card",
+      "name": "MdElevatedCard",
+      "file": "labs/card/elevated-card.js",
+      "className": "MdElevatedCard",
+      "events": {}
+    },
+    {
+      "tag": "md-elevation",
+      "name": "MdElevation",
+      "file": "elevation/elevation.js",
+      "className": "MdElevation",
+      "events": {}
+    },
+    {
+      "tag": "md-expansion-panel",
+      "name": "MdExpansionPanel",
+      "file": "expansion/expansion-panel.js",
+      "className": "MdExpansionPanel",
+      "events": {
+        "onToggle": "expansion:toggle"
+      }
+    },
+    {
+      "tag": "md-fab",
+      "name": "MdFab",
+      "file": "fab/fab.js",
+      "className": "MdFab",
+      "events": {}
+    },
+    {
+      "tag": "md-fab-menu",
+      "name": "MdFabMenu",
+      "file": "fabmenu/fab-menu.js",
+      "className": "MdFabMenu",
+      "events": {
+        "onOpen": "fab-menu:open",
+        "onClose": "fab-menu:close"
+      }
+    },
+    {
+      "tag": "md-fab-menu-item",
+      "name": "MdFabMenuItem",
+      "file": "fabmenu/fab-menu-item.js",
+      "className": "MdFabMenuItem",
+      "events": {
+        "onClick": "fab-menu-item:click"
+      }
+    },
+    {
+      "tag": "md-filled-button",
+      "name": "MdFilledButton",
+      "file": "button/filled-button.js",
+      "className": "MdFilledButton",
+      "events": {}
+    },
+    {
+      "tag": "md-filled-card",
+      "name": "MdFilledCard",
+      "file": "labs/card/filled-card.js",
+      "className": "MdFilledCard",
+      "events": {}
+    },
+    {
+      "tag": "md-filled-field",
+      "name": "MdFilledField",
+      "file": "field/filled-field.js",
+      "className": "MdFilledField",
+      "events": {}
+    },
+    {
+      "tag": "md-filled-icon-button",
+      "name": "MdFilledIconButton",
+      "file": "iconbutton/filled-icon-button.js",
+      "className": "MdFilledIconButton",
+      "events": {}
+    },
+    {
+      "tag": "md-filled-select",
+      "name": "MdFilledSelect",
+      "file": "select/filled-select.js",
+      "className": "MdFilledSelect",
+      "events": {
+        "onChange": "change",
+        "onInput": "input",
+        "onOpening": "opening",
+        "onOpened": "opened",
+        "onClosing": "closing",
+        "onClosed": "closed"
+      }
+    },
+    {
+      "tag": "md-filled-text-field",
+      "name": "MdFilledTextField",
+      "file": "textfield/filled-text-field.js",
+      "className": "MdFilledTextField",
+      "events": {
+        "onChange": "change",
+        "onInput": "input"
+      }
+    },
+    {
+      "tag": "md-filled-tonal-button",
+      "name": "MdFilledTonalButton",
+      "file": "button/filled-tonal-button.js",
+      "className": "MdFilledTonalButton",
+      "events": {}
+    },
+    {
+      "tag": "md-filled-tonal-icon-button",
+      "name": "MdFilledTonalIconButton",
+      "file": "iconbutton/filled-tonal-icon-button.js",
+      "className": "MdFilledTonalIconButton",
+      "events": {}
+    },
+    {
+      "tag": "md-filter-chip",
+      "name": "MdFilterChip",
+      "file": "chips/filter-chip.js",
+      "className": "MdFilterChip",
+      "events": {}
+    },
+    {
+      "tag": "md-focus-ring",
+      "name": "MdFocusRing",
+      "file": "focus/md-focus-ring.js",
+      "className": "MdFocusRing",
+      "events": {}
+    },
+    {
+      "tag": "md-grid-list",
+      "name": "MdGridList",
+      "file": "gridlist/grid-list.js",
+      "className": "MdGridList",
+      "events": {}
+    },
+    {
+      "tag": "md-grid-tile",
+      "name": "MdGridTile",
+      "file": "gridlist/grid-tile.js",
+      "className": "MdGridTile",
+      "events": {}
+    },
+    {
+      "tag": "md-icon",
+      "name": "MdIcon",
+      "file": "icon/icon.js",
+      "className": "MdIcon",
+      "events": {}
+    },
+    {
+      "tag": "md-icon-button",
+      "name": "MdIconButton",
+      "file": "iconbutton/icon-button.js",
+      "className": "MdIconButton",
+      "events": {}
+    },
+    {
+      "tag": "md-input-chip",
+      "name": "MdInputChip",
+      "file": "chips/input-chip.js",
+      "className": "MdInputChip",
+      "events": {
+        "onRemove": "remove",
+        "onUpdateFocus": "update-focus"
+      }
+    },
+    {
+      "tag": "md-item",
+      "name": "MdItem",
+      "file": "labs/item/item.js",
+      "className": "MdItem",
+      "events": {}
+    },
+    {
+      "tag": "md-linear-progress",
+      "name": "MdLinearProgress",
+      "file": "progress/linear-progress.js",
+      "className": "MdLinearProgress",
+      "events": {}
+    },
+    {
+      "tag": "md-list",
+      "name": "MdList",
+      "file": "list/list.js",
+      "className": "MdList",
+      "events": {}
+    },
+    {
+      "tag": "md-list-detail",
+      "name": "MdListDetail",
+      "file": "layout/md-list-detail.js",
+      "className": "MdListDetail",
+      "events": {}
+    },
+    {
+      "tag": "md-list-item",
+      "name": "MdListItem",
+      "file": "list/list-item.js",
+      "className": "MdListItem",
+      "events": {}
+    },
+    {
+      "tag": "md-loading-indicator",
+      "name": "MdLoadingIndicator",
+      "file": "loadingindicator/loading-indicator.js",
+      "className": "MdLoadingIndicator",
+      "events": {}
+    },
+    {
+      "tag": "md-menu",
+      "name": "MdMenu",
+      "file": "menu/menu.js",
+      "className": "MdMenu",
+      "events": {
+        "onOpening": "opening",
+        "onOpened": "opened",
+        "onClosing": "closing",
+        "onClosed": "closed"
+      }
+    },
+    {
+      "tag": "md-menu-group",
+      "name": "MdMenuGroup",
+      "file": "labs/gb/components/menu/md-menu-group.js",
+      "className": "MenuGroup",
+      "events": {}
+    },
+    {
+      "tag": "md-menu-item",
+      "name": "MdMenuItem",
+      "file": "menu/menu-item.js",
+      "className": "MdMenuItem",
+      "events": {
+        "onCloseMenu": "close-menu"
+      }
+    },
+    {
+      "tag": "md-navigation-bar",
+      "name": "MdNavigationBar",
+      "file": "labs/navigationbar/navigation-bar.js",
+      "className": "MdNavigationBar",
+      "events": {
+        "onActivated": "navigation-bar-activated"
+      }
+    },
+    {
+      "tag": "md-navigation-drawer",
+      "name": "MdNavigationDrawer",
+      "file": "labs/navigationdrawer/navigation-drawer.js",
+      "className": "MdNavigationDrawer",
+      "events": {
+        "onNavigationDrawerChanged": "navigation-drawer-changed"
+      }
+    },
+    {
+      "tag": "md-navigation-drawer-modal",
+      "name": "MdNavigationDrawerModal",
+      "file": "labs/navigationdrawer/navigation-drawer-modal.js",
+      "className": "MdNavigationDrawerModal",
+      "events": {
+        "onNavigationDrawerChanged": "navigation-drawer-changed"
+      }
+    },
+    {
+      "tag": "md-navigation-rail",
+      "name": "MdNavigationRail",
+      "file": "navigationrail/navigation-rail.js",
+      "className": "MdNavigationRail",
+      "events": {
+        "onChange": "navigation-rail:change",
+        "onItemActivate": "navigation-rail-item:activate"
+      }
+    },
+    {
+      "tag": "md-navigation-rail-item",
+      "name": "MdNavigationRailItem",
+      "file": "navigationrail/navigation-rail-item.js",
+      "className": "MdNavigationRailItem",
+      "events": {}
+    },
+    {
+      "tag": "md-navigation-tab",
+      "name": "MdNavigationTab",
+      "file": "labs/navigationtab/navigation-tab.js",
+      "className": "MdNavigationTab",
+      "events": {}
+    },
+    {
+      "tag": "md-outlined-button",
+      "name": "MdOutlinedButton",
+      "file": "button/outlined-button.js",
+      "className": "MdOutlinedButton",
+      "events": {}
+    },
+    {
+      "tag": "md-outlined-card",
+      "name": "MdOutlinedCard",
+      "file": "labs/card/outlined-card.js",
+      "className": "MdOutlinedCard",
+      "events": {}
+    },
+    {
+      "tag": "md-outlined-field",
+      "name": "MdOutlinedField",
+      "file": "field/outlined-field.js",
+      "className": "MdOutlinedField",
+      "events": {}
+    },
+    {
+      "tag": "md-outlined-icon-button",
+      "name": "MdOutlinedIconButton",
+      "file": "iconbutton/outlined-icon-button.js",
+      "className": "MdOutlinedIconButton",
+      "events": {}
+    },
+    {
+      "tag": "md-outlined-segmented-button",
+      "name": "MdOutlinedSegmentedButton",
+      "file": "labs/segmentedbutton/outlined-segmented-button.js",
+      "className": "MdOutlinedSegmentedButton",
+      "events": {}
+    },
+    {
+      "tag": "md-outlined-segmented-button-set",
+      "name": "MdOutlinedSegmentedButtonSet",
+      "file": "labs/segmentedbuttonset/outlined-segmented-button-set.js",
+      "className": "MdOutlinedSegmentedButtonSet",
+      "events": {}
+    },
+    {
+      "tag": "md-outlined-select",
+      "name": "MdOutlinedSelect",
+      "file": "select/outlined-select.js",
+      "className": "MdOutlinedSelect",
+      "events": {
+        "onChange": "change",
+        "onInput": "input",
+        "onOpening": "opening",
+        "onOpened": "opened",
+        "onClosing": "closing",
+        "onClosed": "closed"
+      }
+    },
+    {
+      "tag": "md-outlined-text-field",
+      "name": "MdOutlinedTextField",
+      "file": "textfield/outlined-text-field.js",
+      "className": "MdOutlinedTextField",
+      "events": {
+        "onChange": "change",
+        "onInput": "input"
+      }
+    },
+    {
+      "tag": "md-paginator",
+      "name": "MdPaginator",
+      "file": "paginator/paginator.js",
+      "className": "MdPaginator",
+      "events": {
+        "onPage": "paginator:page"
+      }
+    },
+    {
+      "tag": "md-pane",
+      "name": "MdPane",
+      "file": "layout/md-pane.js",
+      "className": "MdPane",
+      "events": {}
+    },
+    {
+      "tag": "md-primary-tab",
+      "name": "MdPrimaryTab",
+      "file": "tabs/primary-tab.js",
+      "className": "MdPrimaryTab",
+      "events": {}
+    },
+    {
+      "tag": "md-radio",
+      "name": "MdRadio",
+      "file": "radio/radio.js",
+      "className": "MdRadio",
+      "events": {
+        "onChange": "change",
+        "onInput": "input"
+      }
+    },
+    {
+      "tag": "md-ripple",
+      "name": "MdRipple",
+      "file": "ripple/ripple.js",
+      "className": "MdRipple",
+      "events": {}
+    },
+    {
+      "tag": "md-scaffold",
+      "name": "MdScaffold",
+      "file": "layout/md-scaffold.js",
+      "className": "MdScaffold",
+      "events": {}
+    },
+    {
+      "tag": "md-search-bar",
+      "name": "MdSearchBar",
+      "file": "search/search-bar.js",
+      "className": "MdSearchBar",
+      "events": {
+        "onInput": "input",
+        "onSearch": "search",
+        "onSearchOpen": "search:open",
+        "onSearchClose": "search:close"
+      }
+    },
+    {
+      "tag": "md-secondary-tab",
+      "name": "MdSecondaryTab",
+      "file": "tabs/secondary-tab.js",
+      "className": "MdSecondaryTab",
+      "events": {}
+    },
+    {
+      "tag": "md-select-option",
+      "name": "MdSelectOption",
+      "file": "select/select-option.js",
+      "className": "MdSelectOption",
+      "events": {}
+    },
+    {
+      "tag": "md-side-sheet",
+      "name": "MdSideSheet",
+      "file": "sheet/side-sheet.js",
+      "className": "MdSideSheet",
+      "events": {
+        "onOpening": "side-sheet:opening",
+        "onOpened": "side-sheet:opened",
+        "onClosing": "side-sheet:closing",
+        "onClosed": "side-sheet:closed"
+      }
+    },
+    {
+      "tag": "md-slider",
+      "name": "MdSlider",
+      "file": "slider/slider.js",
+      "className": "MdSlider",
+      "events": {
+        "onChange": "change",
+        "onInput": "input"
+      }
+    },
+    {
+      "tag": "md-snackbar",
+      "name": "MdSnackbar",
+      "file": "snackbar/snackbar.js",
+      "className": "MdSnackbar",
+      "events": {
+        "onOpening": "opening",
+        "onOpened": "opened",
+        "onClosing": "closing",
+        "onClosed": "closed"
+      }
+    },
+    {
+      "tag": "md-split-button",
+      "name": "MdSplitButton",
+      "file": "labs/gb/components/splitbutton/md-split-button.js",
+      "className": "SplitButton",
+      "events": {}
+    },
+    {
+      "tag": "md-step",
+      "name": "MdStep",
+      "file": "stepper/step.js",
+      "className": "MdStep",
+      "events": {}
+    },
+    {
+      "tag": "md-stepper",
+      "name": "MdStepper",
+      "file": "stepper/stepper.js",
+      "className": "MdStepper",
+      "events": {
+        "onChange": "stepper:change"
+      }
+    },
+    {
+      "tag": "md-sub-menu",
+      "name": "MdSubMenu",
+      "file": "menu/sub-menu.js",
+      "className": "MdSubMenu",
+      "events": {
+        "onOpening": "opening",
+        "onOpened": "opened",
+        "onClosing": "closing",
+        "onClosed": "closed"
+      }
+    },
+    {
+      "tag": "md-suggestion-chip",
+      "name": "MdSuggestionChip",
+      "file": "chips/suggestion-chip.js",
+      "className": "MdSuggestionChip",
+      "events": {}
+    },
+    {
+      "tag": "md-supporting-pane",
+      "name": "MdSupportingPane",
+      "file": "layout/md-supporting-pane.js",
+      "className": "MdSupportingPane",
+      "events": {}
+    },
+    {
+      "tag": "md-switch",
+      "name": "MdSwitch",
+      "file": "switch/switch.js",
+      "className": "MdSwitch",
+      "events": {
+        "onChange": "change",
+        "onInput": "input"
+      }
+    },
+    {
+      "tag": "md-table",
+      "name": "MdTable",
+      "file": "table/table.js",
+      "className": "MdTable",
+      "events": {
+        "onSort": "table:sort",
+        "onSelectionChange": "table:selection-change"
+      }
+    },
+    {
+      "tag": "md-tabs",
+      "name": "MdTabs",
+      "file": "tabs/tabs.js",
+      "className": "MdTabs",
+      "events": {
+        "onChange": "change"
+      }
+    },
+    {
+      "tag": "md-text-button",
+      "name": "MdTextButton",
+      "file": "button/text-button.js",
+      "className": "MdTextButton",
+      "events": {}
+    },
+    {
+      "tag": "md-time-picker",
+      "name": "MdTimePicker",
+      "file": "timepicker/time-picker.js",
+      "className": "MdTimePicker",
+      "events": {
+        "onChange": "time-picker:change"
+      }
+    },
+    {
+      "tag": "md-toolbar",
+      "name": "MdToolbar",
+      "file": "toolbar/md-toolbar.js",
+      "className": "MdToolbar",
+      "events": {}
+    },
+    {
+      "tag": "md-tooltip",
+      "name": "MdTooltip",
+      "file": "tooltip/tooltip.js",
+      "className": "MdTooltip",
+      "events": {
+        "onShow": "tooltip-show",
+        "onHide": "tooltip-hide"
+      }
+    },
+    {
+      "tag": "md-top-app-bar",
+      "name": "MdTopAppBar",
+      "file": "appbar/top-app-bar.js",
+      "className": "MdTopAppBar",
+      "events": {}
+    },
+    {
+      "tag": "md-tree",
+      "name": "MdTree",
+      "file": "tree/tree.js",
+      "className": "MdTree",
+      "events": {
+        "onSelect": "tree:select"
+      }
+    },
+    {
+      "tag": "md-tree-item",
+      "name": "MdTreeItem",
+      "file": "tree/tree-item.js",
+      "className": "MdTreeItem",
+      "events": {
+        "onToggle": "tree-item:toggle",
+        "onActivate": "tree-item:activate"
+      }
+    },
+    {
+      "tag": "md-virtual-scroller",
+      "name": "MdVirtualScroller",
+      "file": "virtualscroll/virtual-scroller.js",
+      "className": "MdVirtualScroller",
+      "events": {
+        "onRange": "virtual-scroll:range"
+      }
+    },
+    {
+      "tag": "md-webgpu-canvas",
+      "name": "MdWebgpuCanvas",
+      "file": "effects/webgpu-canvas.js",
+      "className": "MdWebgpuCanvas",
+      "events": {}
+    },
+    {
+      "tag": "md-avatar",
+      "name": "MdAvatar",
+      "file": "avatar/avatar.js",
+      "className": "MdAvatar",
+      "events": {
+        "onError": "error"
+      }
+    },
+    {
+      "tag": "md-avatar-group",
+      "name": "MdAvatarGroup",
+      "file": "avatar/avatar-group.js",
+      "className": "MdAvatarGroup",
+      "events": {}
+    },
+    {
+      "tag": "md-alert",
+      "name": "MdAlert",
+      "file": "alert/alert.js",
+      "className": "MdAlert",
+      "events": {
+        "onClose": "close"
+      }
+    },
+    {
+      "tag": "md-skeleton",
+      "name": "MdSkeleton",
+      "file": "skeleton/skeleton.js",
+      "className": "MdSkeleton",
+      "events": {}
+    },
+    {
+      "tag": "md-breadcrumbs",
+      "name": "MdBreadcrumbs",
+      "file": "breadcrumbs/breadcrumbs.js",
+      "className": "MdBreadcrumbs",
+      "events": {}
+    },
+    {
+      "tag": "md-link",
+      "name": "MdLink",
+      "file": "link/link.js",
+      "className": "MdLink",
+      "events": {}
+    },
+    {
+      "tag": "md-surface",
+      "name": "MdSurface",
+      "file": "surface/surface.js",
+      "className": "MdSurface",
+      "events": {}
+    },
+    {
+      "tag": "md-backdrop",
+      "name": "MdBackdrop",
+      "file": "backdrop/backdrop.js",
+      "className": "MdBackdrop",
+      "events": {}
+    },
+    {
+      "tag": "md-popover",
+      "name": "MdPopover",
+      "file": "popover/popover.js",
+      "className": "MdPopover",
+      "events": {
+        "onOpened": "opened",
+        "onClosed": "closed"
+      }
+    },
+    {
+      "tag": "md-rating",
+      "name": "MdRating",
+      "file": "rating/rating.js",
+      "className": "MdRating",
+      "events": {
+        "onChange": "change",
+        "onInput": "input"
+      }
+    },
+    {
+      "tag": "md-line-chart",
+      "name": "MdLineChart",
+      "file": "charts/line-chart.js",
+      "className": "MdLineChart",
+      "events": {}
+    },
+    {
+      "tag": "md-bar-chart",
+      "name": "MdBarChart",
+      "file": "charts/bar-chart.js",
+      "className": "MdBarChart",
+      "events": {}
+    },
+    {
+      "tag": "md-pie-chart",
+      "name": "MdPieChart",
+      "file": "charts/pie-chart.js",
+      "className": "MdPieChart",
+      "events": {}
+    },
+    {
+      "tag": "md-area-chart",
+      "name": "MdAreaChart",
+      "file": "charts/area-chart.js",
+      "className": "MdAreaChart",
+      "events": {}
+    },
+    {
+      "tag": "md-sparkline",
+      "name": "MdSparkline",
+      "file": "charts/sparkline.js",
+      "className": "MdSparkline",
+      "events": {}
+    },
+    {
+      "tag": "md-gauge",
+      "name": "MdGauge",
+      "file": "charts/gauge.js",
+      "className": "MdGauge",
+      "events": {}
+    },
+    {
+      "tag": "md-date-range-picker",
+      "name": "MdDateRangePicker",
+      "file": "datepicker/date-range-picker.js",
+      "className": "MdDateRangePicker",
+      "events": {
+        "onInput": "input",
+        "onChange": "change",
+        "onDateRangeChange": "date-range-picker:change"
+      }
+    },
+    {
+      "tag": "md-mobile-stepper",
+      "name": "MdMobileStepper",
+      "file": "mobilestepper/mobile-stepper.js",
+      "className": "MdMobileStepper",
+      "events": {}
+    },
+    {
+      "tag": "md-scatter-chart",
+      "name": "MdScatterChart",
+      "file": "charts/scatter-chart.js",
+      "className": "MdScatterChart",
+      "events": {}
+    },
+    {
+      "tag": "md-radar-chart",
+      "name": "MdRadarChart",
+      "file": "charts/radar-chart.js",
+      "className": "MdRadarChart",
+      "events": {}
+    },
+    {
+      "tag": "md-date-time-picker",
+      "name": "MdDateTimePicker",
+      "file": "datepicker/date-time-picker.js",
+      "className": "MdDateTimePicker",
+      "events": {
+        "onInput": "input",
+        "onChange": "change",
+        "onDateTimeChange": "date-time-picker:change"
+      }
+    },
+    {
+      "tag": "md-scheduler",
+      "name": "MdScheduler",
+      "file": "scheduler/scheduler.js",
+      "className": "MdScheduler",
+      "events": {
+        "onNavigate": "scheduler:navigate",
+        "onSelect": "scheduler:select",
+        "onEventClick": "scheduler:event-click"
+      }
+    },
+    {
+      "tag": "md-type",
+      "name": "MdType",
+      "file": "typography/md-type.js",
+      "className": "MdType",
+      "events": {}
+    },
+    {
+      "tag": "md-3d-canvas",
+      "name": "Md3dCanvas",
+      "file": "canvas3d/canvas-3d.js",
+      "className": "M3Canvas3D",
+      "events": {}
+    },
+    {
+      "tag": "md-3d-globe",
+      "name": "Md3dGlobe",
+      "file": "globe3d/globe-3d.js",
+      "className": "M3Globe3D",
+      "events": {}
+    },
+    {
+      "tag": "md-3d-card",
+      "name": "Md3dCard",
+      "file": "card3d/card-3d.js",
+      "className": "M3Card3D",
+      "events": {}
+    }
+  ],
+  "unresolved": []
+}
\ No newline at end of file
diff --git a/FRAMEWORKS.md b/FRAMEWORKS.md
new file mode 100644
index 0000000..a12434a
--- /dev/null
+++ b/FRAMEWORKS.md
@@ -0,0 +1,204 @@
+# Intégration frameworks (SSR / RSC) — `@aphrody/m3-react`
+
+Guide d'intégration des wrappers Material 3 dans un framework React à rendu
+serveur — **Next.js App Router**, Remix, ou tout setup RSC / SSR / hydration.
+Les composants sont des **web components Lit**, donc **client-only** : ils ne
+rendent rien côté serveur (le shadow DOM n'existe qu'au navigateur) et
+s'« upgradent » après l'hydration. Les exemples ci-dessous utilisent Next.js App
+Router (le cas le plus contraint), mais les principes valent pour tout SSR.
+
+L'exemple du monorepo ([`examples/showcase/`](../../docs/products/examples/showcase)) est
+bun-natif (pas Next) ; ce guide couvre les spécificités **Next.js App Router**
+côté consommateur. Le package se consomme tel quel dans une app Next.
+
+---
+
+## 1. Ce que le package livre
+
+Le package est **pré-buildé** dans `dist/` (`bun run build`, via `tsup` + `tsc`) :
+
+- **ESM** (`dist/index.js`, `dist/transitions/index.js`) — pas de `.ts` brut, donc
+  consommable depuis `node_modules` **sans `transpilePackages`**.
+- Chaque chunk `.js` porte la directive **`'use client';`** en tête → Next RSC
+  traite tout le package comme des **client components**, sans erreur
+  « You're importing a component that needs … ».
+- **Types** (`dist/**/*.d.ts`).
+- `react`, `react-dom` et `@material/web` sont **externes** (peer deps / résolus
+  chez le consommateur). Les imports profonds `@material/web/<dir>/<el>.js` sont
+  conservés tels quels : c'est l'import du wrapper qui déclenche le
+  `customElements.define()` (effet de bord) côté client.
+
+`package.json` pointe `main`/`module`/`types`/`exports` sur `dist/`, déclare
+`sideEffects` (les imports d'éléments enregistrent les custom elements — ne pas
+tree-shaker) et `files: ["dist"]`.
+
+```jsonc
+"exports": {
+  ".":            { "types": "./dist/index.d.ts",             "default": "./dist/index.js" },
+  "./transitions":{ "types": "./dist/transitions/index.d.ts", "default": "./dist/transitions/index.js" }
+}
+```
+
+---
+
+## 2. Boundaries client / serveur
+
+Règle : **tout ce qui touche un `Md…` vit dans un fichier `'use client'`.**
+
+- `layout.tsx` / `page.tsx` restent des **Server Components** (pas de directive) ;
+  ils importent le CSS de thème et rendent un **îlot client**.
+- L'îlot client (ex. `demo.tsx`) porte `'use client'`, importe les wrappers,
+  gère state/refs/handlers.
+
+```tsx
+// app/page.tsx — Server Component
+import { Demo } from "./demo";
+export default function Home() {
+  return (
+    <main>
+      <Demo />
+    </main>
+  );
+}
+```
+
+```tsx
+// app/demo.tsx — Client island
+"use client";
+import {
+  MdFilledButton,
+  MdOutlinedTextField,
+  MdDialog,
+  MdLineChart,
+  MdTabs,
+  MdPrimaryTab,
+} from "@aphrody/m3-react";
+import { Fade } from "@aphrody/m3-react/transitions";
+import { useRef, useState } from "react";
+
+export function Demo() {
+  const dialogRef = useRef<React.ComponentRef<typeof MdDialog>>(null);
+  const [name, setName] = useState("");
+  return (
+    <>
+      <MdFilledButton onClick={() => dialogRef.current?.show()}>Ouvrir</MdFilledButton>
+      <MdOutlinedTextField
+        label="Nom"
+        value={name}
+        onInput={(e) => setName((e.target as HTMLInputElement).value)}
+      />
+      <MdTabs>
+        <MdPrimaryTab>A</MdPrimaryTab>
+        <MdPrimaryTab>B</MdPrimaryTab>
+      </MdTabs>
+      <MdLineChart
+        smooth
+        showMarkers
+        categories={["Jan", "Fév", "Mar"]}
+        series={[{ label: "CA", data: [12, 19, 8] }]}
+      />
+      <MdDialog ref={dialogRef}>
+        <div slot="headline">Titre</div>
+        <div slot="content">Ouvert via ref impérative.</div>
+        <div slot="actions">
+          <MdFilledButton onClick={() => dialogRef.current?.close()}>Fermer</MdFilledButton>
+        </div>
+      </MdDialog>
+    </>
+  );
+}
+```
+
+### Refs impératives (dialog, etc.)
+
+Le `ref` d'un wrapper pointe sur **l'instance du custom element** (avec ses
+méthodes `show()` / `close()` / `returnValue`…). Pour typer le ref sans importer
+les sources de `@material/web`, dérivez-le du composant :
+
+```tsx
+const dialogRef = useRef<React.ComponentRef<typeof MdDialog>>(null);
+dialogRef.current?.show();
+```
+
+### Propriétés objet (charts, etc.)
+
+`@lit/react` passe les props objet/tableau comme **propriétés** de l'élément
+(pas des attributs). `<MdLineChart series={[…]} categories={[…]} />` règle donc
+`.series` / `.categories` directement — pas de JSON à sérialiser.
+
+---
+
+## 3. SSR / hydration + parade FOUC
+
+Côté serveur, un `<md-filled-button>` se rend en élément non-`:defined` (pas de
+shadow DOM). **Aucun crash SSR** : la page se pré-rend en statique (vérifié,
+`next build` → route `/` en `○ Static`). Pas de hydration mismatch tant que le
+markup serveur = markup client (c'est le cas, le wrapper rend juste la balise).
+
+Pour éviter le **flash of unstyled content** (l'élément brut visible avant
+l'upgrade), masquez les éléments tant qu'ils ne sont pas définis :
+
+```css
+/* app/theme.css — FOUC parade */
+:not(:defined) {
+  visibility: hidden;
+}
+```
+
+Optionnellement, révélez après upgrade complet via `customElements.whenDefined`
+dans un `useEffect` (cf. `examples/showcase`).
+
+### Tokens de thème
+
+Définissez les `--md-sys-*` au niveau `:root` (ou `body`) dans un CSS importé par
+le layout serveur :
+
+```css
+:root {
+  --md-sys-color-primary: #6750a4;
+  --md-sys-color-on-primary: #fff;
+  /* … générés depuis @aphrody/m3-tokens en prod … */
+}
+```
+
+---
+
+## 4. Fallback : consommer les **sources** (`transpilePackages`)
+
+Le dist pré-buildé fonctionne sans config. Si vous préférez consommer les
+**sources TS** du package (ou épingler `@material/web` sur ses sources `.ts`,
+p. ex. en monorepo lié par symlink), activez `transpilePackages` pour que Next
+les compile :
+
+```ts
+// next.config.ts
+import type { NextConfig } from "next";
+const nextConfig: NextConfig = {
+  transpilePackages: ["@aphrody/m3-react", "@material/web"],
+};
+export default nextConfig;
+```
+
+> En monorepo, le lien workspace expose aussi les `.ts` de `@material/web` à côté
+> des `.js`/`.d.ts`. Le `moduleResolution: "bundler"` de TS résout alors `…/x.js`
+> vers la **source `.ts`** (décorateurs → erreur de typecheck). Deux parades :
+> soit `transpilePackages` ci-dessus, soit ne typer que les artefacts publiés
+> (l'app d'exemple redirige `@material/web/*` vers une copie `.js`+`.d.ts`-only
+> via `compilerOptions.paths`, exactement ce qu'un `npm install` produirait).
+
+---
+
+## 5. Checklist build
+
+```bash
+# 1. builder la lib + le package react (turbo)
+bun run build              # à la racine du monorepo → @material/web .js + dist react
+
+# 2. dans VOTRE app Next.js : importer les wrappers (déjà marqués 'use client')
+#    import { MdFilledButton } from "@aphrody/m3-react";
+#    next build → vert, sans transpilePackages
+```
+
+> Le monorepo n'embarque plus d'exemple Next.js dédié : l'exemple de référence
+> est `examples/showcase` (bun-natif). Ce guide reste valable pour intégrer les
+> wrappers dans **votre** app Next.js App Router.
diff --git a/README.md b/README.md
index 4295e45..915d171 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,327 @@
-# aphrody-m3-react
-Aphrody package @aphrody/m3-react
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+# `@aphrody/m3-react`
+
+Wrappers React **par élément `md-*`** du fork aphrody `@material/web` (v2.4.1, 119 éléments),
+générés avec [`@lit/react`](https://www.npmjs.com/package/@lit/react) `createComponent`.
+
+Ce package réalise le plan que le fork prévoit (`apps/m3-react`) mais ne livre pas sur disque
+(cf. `migration/00-CONVENTIONS.md` §0). Il expose un composant React typé pour chacun des
+**119 tags** listés dans `migration/scripts/md-elements.txt`.
+
+- **Statut compilation : 119 / 119 wrappers générés, `tsc --noEmit` → 0 erreur.**
+- 1 wrapper React par élément `md-*`, nom = PascalCase du tag (CONVENTIONS §2).
+- Events natifs réels mappés par élément (vérifiés dans le code Lit, voir plus bas).
+
+## Install
+
+> **bun uniquement** (jamais npm/pnpm — CONVENTIONS §7.1).
+
+Le package est déjà installé dans ce dossier (`migration/wrappers/`) :
+
+```bash
+cd migration/wrappers
+bun install            # @lit/react + @material/web (file:../../material-web) + react/react-dom
+bun run typecheck      # tsc --noEmit → 0 erreur
+bun run generate       # régénère wrappers/ + index.ts depuis md-elements.txt
+```
+
+Dans un projet consommateur :
+
+```jsonc
+// package.json
+{
+  "dependencies": {
+    "@aphrody/m3-react": "file:../migration/wrappers",
+    "react": "^19",
+    "react-dom": "^19",
+  },
+}
+```
+
+## Usage
+
+Importer un wrapper enregistre l'élément custom correspondant **comme effet de bord**
+(le wrapper importe le module `@material/web/...` qui appelle `customElements.define`).
+Aucun import side-effect supplémentaire n'est nécessaire.
+
+```tsx
+import { MdFilledButton, MdOutlinedTextField, MdCheckbox } from "@aphrody/m3-react";
+
+function LoginForm() {
+  const [email, setEmail] = React.useState("");
+  const [accept, setAccept] = React.useState(false);
+
+  return (
+    <form>
+      {/* controlled : la signature React change — e.target.value, PAS (e, value) */}
+      <MdOutlinedTextField
+        label="Email"
+        value={email}
+        onInput={(e) => setEmail((e.target as HTMLInputElement).value)}
+      />
+
+      <label>
+        <MdCheckbox
+          checked={accept}
+          onChange={(e) => setAccept((e.target as HTMLInputElement).checked)}
+        />
+        J'accepte
+      </label>
+
+      <MdFilledButton onClick={() => console.log({ email, accept })}>Valider</MdFilledButton>
+    </form>
+  );
+}
+```
+
+### Slots & icônes (CONVENTIONS §4)
+
+Les sous-composants MUI (`DialogTitle`, `CardHeader`, `startIcon`…) deviennent du contenu slotté :
+
+```tsx
+import { MdDialog, MdFilledButton, MdTextButton, MdIcon } from "@aphrody/m3-react";
+
+<MdDialog open onClosed={(e) => console.log((e.target as any).returnValue)}>
+  <div slot="headline">Supprimer ?</div>
+  <form slot="content" method="dialog">
+    Cette action est irréversible.
+  </form>
+  <div slot="actions">
+    <MdTextButton value="cancel">Annuler</MdTextButton>
+    <MdFilledButton value="delete">
+      <MdIcon slot="icon">delete</MdIcon>
+      Supprimer
+    </MdFilledButton>
+  </div>
+</MdDialog>;
+```
+
+> **`MdIcon` exige la police Material Symbols.** La lib ne la charge pas. Une fois,
+> au démarrage de l'app :
+>
+> ```ts
+> import { ensureMaterialSymbols } from "@aphrody/material-web/icon/material-symbols.js";
+> ensureMaterialSymbols(); // ou { iconNames: ["delete", "search", …] } pour subseter
+> ```
+>
+> Le texte enfant est le **nom du glyphe** (snake_case Material Symbols). Les axes
+> variables se pilotent par token : `--md-icon-fill` (0..1), `--md-icon-wght`
+> (100..700), `--md-icon-grad`, `--md-icon-opsz`. Migration depuis
+> `@mui/icons-material` : codemod `migration/codemods/transforms/icons.ts` (96 % auto).
+
+## Architecture
+
+- `index.ts` — réexporte les 119 wrappers (un `export *` par catégorie).
+- `wrappers/<categorie>.ts` — 45 fichiers groupés par dossier source de `material-web/`
+  (`button.ts`, `select.ts`, `labs.ts`, …). Chaque export :
+
+  ```ts
+  export const MdFilledButton = createComponent({
+    react: React,
+    tagName: "md-filled-button",
+    elementClass: MdFilledButtonElement, // importé depuis @material/web/button/filled-button.js
+    events: {}, // events natifs réels (voir tableau)
+  });
+  ```
+
+- `generate.ts` — générateur **bun** : lit `md-elements.txt`, scanne `material-web/` pour
+  résoudre chaque tag → `{fichier d'entrée, classe exportée}` via le motif
+  `@customElement('md-x') export class Foo`, applique la table d'events vérifiés, et émet
+  les fichiers. Préfère le chemin canonique (bundlé par `all.ts` / `aphrody-components.ts` /
+  `aphrody-labs.ts`), puis non-`labs/gb`, sinon `labs/gb` (pour les tags `md-button`,
+  `md-card`, `md-menu-group`, `md-split-button` qui n'existent que là).
+- `material-web-shims.d.ts` — voir « Détail compilation ».
+
+## Événements mappés (vérifiés dans le code Lit)
+
+Noms d'events extraits par grep de `@fires` / `new (Custom)?Event('…')` dans
+`material-web/<dir>/internal/*.ts`. Les composants **upstream** utilisent des noms simples
+(`input`, `change`, `opening`…) ; les composants **fork** namespacent les leurs
+(`paginator:page`, `table:sort`, `side-sheet:opening`, `tree:select`…).
+
+| Élément                                                         | Events React → event natif                                                |
+| --------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| `MdCheckbox`, `MdRadio`, `MdSwitch`, `MdSlider`, `Md*TextField` | `onChange:change`, `onInput:input`                                        |
+| `MdFilledSelect`, `MdOutlinedSelect`                            | `+onOpening/onOpened/onClosing/onClosed`                                  |
+| `MdDialog`                                                      | `onOpen:open`, `onOpened`, `onClose:close`, `onClosed`, `onCancel:cancel` |
+| `MdMenu`, `MdSubMenu`                                           | `onOpening/onOpened/onClosing/onClosed`                                   |
+| `MdMenuItem`                                                    | `onCloseMenu:close-menu`                                                  |
+| `MdSnackbar`                                                    | `onOpening/onOpened/onClosing/onClosed` (bare)                            |
+| `MdBottomSheet` / `MdSideSheet`                                 | `onOpening:bottom-sheet:opening` … (fork, namespacés)                     |
+| `MdSearchBar`                                                   | `onInput`, `onSearch:search`, `onSearchOpen/onSearchClose`                |
+| `MdAutocomplete`                                                | `onInput`, `onSelect:autocomplete:select`                                 |
+| `MdNavigationBar`                                               | `onActivated:navigation-bar-activated`                                    |
+| `MdNavigationRail`                                              | `onChange:navigation-rail:change`, `onItemActivate`                       |
+| `MdNavigationDrawer(Modal)`                                     | `onNavigationDrawerChanged:navigation-drawer-changed`                     |
+| `MdInputChip`                                                   | `onRemove:remove`, `onUpdateFocus:update-focus`                           |
+| `MdButtonGroup`                                                 | `onChange:button-group:change`                                            |
+| `MdFabMenu` / `MdFabMenuItem`                                   | `onOpen/onClose:fab-menu:*`, `onClick:fab-menu-item:click`                |
+| `MdExpansionPanel`                                              | `onToggle:expansion:toggle`                                               |
+| `MdStepper`                                                     | `onChange:stepper:change`                                                 |
+| `MdDatePicker` / `MdTimePicker`                                 | `onChange:date-picker:change` / `time-picker:change`                      |
+| `MdTable`                                                       | `onSort:table:sort`, `onSelectionChange:table:selection-change`           |
+| `MdPaginator`                                                   | `onPage:paginator:page`                                                   |
+| `MdTree` / `MdTreeItem`                                         | `onSelect:tree:select` / `onToggle:tree-item:toggle`, `onActivate`        |
+| `MdVirtualScroller`                                             | `onRange:virtual-scroll:range`                                            |
+| `MdTooltip`                                                     | `onShow:tooltip-show`, `onHide:tooltip-hide`                              |
+| `MdTabs`                                                        | `onChange:change`                                                         |
+
+Les éléments purement présentationnels (`md-icon`, `md-divider`, `md-elevation`, `md-ripple`,
+`md-focus-ring`, chips assist/filter/suggestion, cards, fab, boutons, `md-item`, `md-toolbar`,
+`md-carousel`, `md-accordion`, `md-loading-indicator`, panes/scaffold…) n'émettent pas d'event
+documenté : `events: {}`.
+
+## Détail compilation
+
+`tsc --noEmit` compile **toute la chaîne** (les wrappers _et_ les sources `.ts` de
+`material-web/` qu'ils importent). Trois ajustements ont été nécessaires côté `tsconfig.json` /
+shims, **sans toucher** à `material-web/src` :
+
+1. **`experimentalDecorators: true` + `useDefineForClassFields: false`** — les éléments Lit du
+   fork utilisent les décorateurs _expérimentaux_ (`@property()`, `@customElement()`).
+2. **`material-web-shims.d.ts`** — déclare `*.cssresult.js` et `*.css` comme modules ambiants.
+   Ces fichiers de styles sont des **artefacts du build SASS** (`build:sass` → `build:css-to-ts`)
+   **absents de ce checkout source** du fork. Le wrapper React ne touche jamais ces valeurs
+   (les styles voyagent avec l'élément au runtime), d'où un typage `any` — qui évite aussi le
+   conflit nominal entre le `lit@2.8.0` imbriqué de `material-web` et le `lit@3.3.3` du package.
+3. **`moduleResolution: bundler`** — résout les imports bare `@material/web/x/y.js` vers les
+   sources `.ts` (le fork n'a pas de `.js`/`.d.ts` compilés ni de champ `exports`).
+
+> En contexte de **build réel** du fork (`material-web` buildé : `*.cssresult.js` et `*.css`
+> présents), les shims deviennent inutiles ; ils ne servent qu'à faire compiler le wrapper
+> contre les **sources** du fork tel que livré ici.
+
+### Blocages réels
+
+**Aucun.** Les 119 éléments de `md-elements.txt` résolvent vers un fichier d'entrée réel avec
+classe exportée, et compilent. Les 4 tags `md-button`, `md-card`, `md-menu-group`,
+`md-split-button` n'existent que sous `labs/gb/components/` (composants « Google Sans » du fork) :
+leurs classes exportées ne suivent pas la convention `Md*` (`Button`, `Card`, `MenuGroup`,
+`SplitButton`) — le wrapper les ré-alias correctement (`MdButton`, `MdCard`, …).
+
+## Liste complète des wrappers (119)
+
+> Régénérée par `generate.ts` (`.manifest.json`). 0 non résolu(s).
+
+| Wrapper | Tag | Import élément | # events |
+| --- | --- | --- | --- |
+| `Md3dCanvas` | `md-3d-canvas` | `@aphrody/material-web/canvas3d/canvas-3d.js` | — |
+| `Md3dCard` | `md-3d-card` | `@aphrody/material-web/card3d/card-3d.js` | — |
+| `Md3dGlobe` | `md-3d-globe` | `@aphrody/material-web/globe3d/globe-3d.js` | — |
+| `MdAccordion` | `md-accordion` | `@aphrody/material-web/expansion/accordion.js` | — |
+| `MdAlert` | `md-alert` | `@aphrody/material-web/alert/alert.js` | 1 |
+| `MdAreaChart` | `md-area-chart` | `@aphrody/material-web/charts/area-chart.js` | — |
+| `MdAssistChip` | `md-assist-chip` | `@aphrody/material-web/chips/assist-chip.js` | — |
+| `MdAutocomplete` | `md-autocomplete` | `@aphrody/material-web/autocomplete/autocomplete.js` | 2 |
+| `MdAvatar` | `md-avatar` | `@aphrody/material-web/avatar/avatar.js` | 1 |
+| `MdAvatarGroup` | `md-avatar-group` | `@aphrody/material-web/avatar/avatar-group.js` | — |
+| `MdBackdrop` | `md-backdrop` | `@aphrody/material-web/backdrop/backdrop.js` | — |
+| `MdBadge` | `md-badge` | `@aphrody/material-web/badge/badge.js` | — |
+| `MdBarChart` | `md-bar-chart` | `@aphrody/material-web/charts/bar-chart.js` | — |
+| `MdBottomAppBar` | `md-bottom-app-bar` | `@aphrody/material-web/appbar/bottom-app-bar.js` | — |
+| `MdBottomSheet` | `md-bottom-sheet` | `@aphrody/material-web/sheet/bottom-sheet.js` | 4 |
+| `MdBrandedFab` | `md-branded-fab` | `@aphrody/material-web/fab/branded-fab.js` | — |
+| `MdBreadcrumbs` | `md-breadcrumbs` | `@aphrody/material-web/breadcrumbs/breadcrumbs.js` | — |
+| `MdButton` | `md-button` | `@aphrody/material-web/labs/gb/components/button/md-button.js` | — |
+| `MdButtonGroup` | `md-button-group` | `@aphrody/material-web/buttongroup/button-group.js` | 1 |
+| `MdCard` | `md-card` | `@aphrody/material-web/card/card.js` | — |
+| `MdCarousel` | `md-carousel` | `@aphrody/material-web/carousel/carousel.js` | 1 |
+| `MdCarouselItem` | `md-carousel-item` | `@aphrody/material-web/carousel/carousel-item.js` | — |
+| `MdCheckbox` | `md-checkbox` | `@aphrody/material-web/checkbox/checkbox.js` | 2 |
+| `MdChipSet` | `md-chip-set` | `@aphrody/material-web/chips/chip-set.js` | — |
+| `MdCircularProgress` | `md-circular-progress` | `@aphrody/material-web/progress/circular-progress.js` | — |
+| `MdDatePicker` | `md-date-picker` | `@aphrody/material-web/datepicker/date-picker.js` | 1 |
+| `MdDateRangePicker` | `md-date-range-picker` | `@aphrody/material-web/datepicker/date-range-picker.js` | 3 |
+| `MdDateTimePicker` | `md-date-time-picker` | `@aphrody/material-web/datepicker/date-time-picker.js` | 3 |
+| `MdDialog` | `md-dialog` | `@aphrody/material-web/dialog/dialog.js` | 5 |
+| `MdDivider` | `md-divider` | `@aphrody/material-web/divider/divider.js` | — |
+| `MdElevatedButton` | `md-elevated-button` | `@aphrody/material-web/button/elevated-button.js` | — |
+| `MdElevatedCard` | `md-elevated-card` | `@aphrody/material-web/labs/card/elevated-card.js` | — |
+| `MdElevation` | `md-elevation` | `@aphrody/material-web/elevation/elevation.js` | — |
+| `MdExpansionPanel` | `md-expansion-panel` | `@aphrody/material-web/expansion/expansion-panel.js` | 1 |
+| `MdFab` | `md-fab` | `@aphrody/material-web/fab/fab.js` | — |
+| `MdFabMenu` | `md-fab-menu` | `@aphrody/material-web/fabmenu/fab-menu.js` | 2 |
+| `MdFabMenuItem` | `md-fab-menu-item` | `@aphrody/material-web/fabmenu/fab-menu-item.js` | 1 |
+| `MdFilledButton` | `md-filled-button` | `@aphrody/material-web/button/filled-button.js` | — |
+| `MdFilledCard` | `md-filled-card` | `@aphrody/material-web/labs/card/filled-card.js` | — |
+| `MdFilledField` | `md-filled-field` | `@aphrody/material-web/field/filled-field.js` | — |
+| `MdFilledIconButton` | `md-filled-icon-button` | `@aphrody/material-web/iconbutton/filled-icon-button.js` | — |
+| `MdFilledSelect` | `md-filled-select` | `@aphrody/material-web/select/filled-select.js` | 6 |
+| `MdFilledTextField` | `md-filled-text-field` | `@aphrody/material-web/textfield/filled-text-field.js` | 2 |
+| `MdFilledTonalButton` | `md-filled-tonal-button` | `@aphrody/material-web/button/filled-tonal-button.js` | — |
+| `MdFilledTonalIconButton` | `md-filled-tonal-icon-button` | `@aphrody/material-web/iconbutton/filled-tonal-icon-button.js` | — |
+| `MdFilterChip` | `md-filter-chip` | `@aphrody/material-web/chips/filter-chip.js` | — |
+| `MdFocusRing` | `md-focus-ring` | `@aphrody/material-web/focus/md-focus-ring.js` | — |
+| `MdGauge` | `md-gauge` | `@aphrody/material-web/charts/gauge.js` | — |
+| `MdGridList` | `md-grid-list` | `@aphrody/material-web/gridlist/grid-list.js` | — |
+| `MdGridTile` | `md-grid-tile` | `@aphrody/material-web/gridlist/grid-tile.js` | — |
+| `MdIcon` | `md-icon` | `@aphrody/material-web/icon/icon.js` | — |
+| `MdIconButton` | `md-icon-button` | `@aphrody/material-web/iconbutton/icon-button.js` | — |
+| `MdInputChip` | `md-input-chip` | `@aphrody/material-web/chips/input-chip.js` | 2 |
+| `MdItem` | `md-item` | `@aphrody/material-web/labs/item/item.js` | — |
+| `MdLinearProgress` | `md-linear-progress` | `@aphrody/material-web/progress/linear-progress.js` | — |
+| `MdLineChart` | `md-line-chart` | `@aphrody/material-web/charts/line-chart.js` | — |
+| `MdLink` | `md-link` | `@aphrody/material-web/link/link.js` | — |
+| `MdList` | `md-list` | `@aphrody/material-web/list/list.js` | — |
+| `MdListDetail` | `md-list-detail` | `@aphrody/material-web/layout/md-list-detail.js` | — |
+| `MdListItem` | `md-list-item` | `@aphrody/material-web/list/list-item.js` | — |
+| `MdLoadingIndicator` | `md-loading-indicator` | `@aphrody/material-web/loadingindicator/loading-indicator.js` | — |
+| `MdMenu` | `md-menu` | `@aphrody/material-web/menu/menu.js` | 4 |
+| `MdMenuGroup` | `md-menu-group` | `@aphrody/material-web/labs/gb/components/menu/md-menu-group.js` | — |
+| `MdMenuItem` | `md-menu-item` | `@aphrody/material-web/menu/menu-item.js` | 1 |
+| `MdMobileStepper` | `md-mobile-stepper` | `@aphrody/material-web/mobilestepper/mobile-stepper.js` | — |
+| `MdNavigationBar` | `md-navigation-bar` | `@aphrody/material-web/labs/navigationbar/navigation-bar.js` | 1 |
+| `MdNavigationDrawer` | `md-navigation-drawer` | `@aphrody/material-web/labs/navigationdrawer/navigation-drawer.js` | 1 |
+| `MdNavigationDrawerModal` | `md-navigation-drawer-modal` | `@aphrody/material-web/labs/navigationdrawer/navigation-drawer-modal.js` | 1 |
+| `MdNavigationRail` | `md-navigation-rail` | `@aphrody/material-web/navigationrail/navigation-rail.js` | 2 |
+| `MdNavigationRailItem` | `md-navigation-rail-item` | `@aphrody/material-web/navigationrail/navigation-rail-item.js` | — |
+| `MdNavigationTab` | `md-navigation-tab` | `@aphrody/material-web/labs/navigationtab/navigation-tab.js` | — |
+| `MdOutlinedButton` | `md-outlined-button` | `@aphrody/material-web/button/outlined-button.js` | — |
+| `MdOutlinedCard` | `md-outlined-card` | `@aphrody/material-web/labs/card/outlined-card.js` | — |
+| `MdOutlinedField` | `md-outlined-field` | `@aphrody/material-web/field/outlined-field.js` | — |
+| `MdOutlinedIconButton` | `md-outlined-icon-button` | `@aphrody/material-web/iconbutton/outlined-icon-button.js` | — |
+| `MdOutlinedSegmentedButton` | `md-outlined-segmented-button` | `@aphrody/material-web/labs/segmentedbutton/outlined-segmented-button.js` | — |
+| `MdOutlinedSegmentedButtonSet` | `md-outlined-segmented-button-set` | `@aphrody/material-web/labs/segmentedbuttonset/outlined-segmented-button-set.js` | — |
+| `MdOutlinedSelect` | `md-outlined-select` | `@aphrody/material-web/select/outlined-select.js` | 6 |
+| `MdOutlinedTextField` | `md-outlined-text-field` | `@aphrody/material-web/textfield/outlined-text-field.js` | 2 |
+| `MdPaginator` | `md-paginator` | `@aphrody/material-web/paginator/paginator.js` | 1 |
+| `MdPane` | `md-pane` | `@aphrody/material-web/layout/md-pane.js` | — |
+| `MdPieChart` | `md-pie-chart` | `@aphrody/material-web/charts/pie-chart.js` | — |
+| `MdPopover` | `md-popover` | `@aphrody/material-web/popover/popover.js` | 2 |
+| `MdPrimaryTab` | `md-primary-tab` | `@aphrody/material-web/tabs/primary-tab.js` | — |
+| `MdRadarChart` | `md-radar-chart` | `@aphrody/material-web/charts/radar-chart.js` | — |
+| `MdRadio` | `md-radio` | `@aphrody/material-web/radio/radio.js` | 2 |
+| `MdRating` | `md-rating` | `@aphrody/material-web/rating/rating.js` | 2 |
+| `MdRipple` | `md-ripple` | `@aphrody/material-web/ripple/ripple.js` | — |
+| `MdScaffold` | `md-scaffold` | `@aphrody/material-web/layout/md-scaffold.js` | — |
+| `MdScatterChart` | `md-scatter-chart` | `@aphrody/material-web/charts/scatter-chart.js` | — |
+| `MdScheduler` | `md-scheduler` | `@aphrody/material-web/scheduler/scheduler.js` | 3 |
+| `MdSearchBar` | `md-search-bar` | `@aphrody/material-web/search/search-bar.js` | 4 |
+| `MdSecondaryTab` | `md-secondary-tab` | `@aphrody/material-web/tabs/secondary-tab.js` | — |
+| `MdSelectOption` | `md-select-option` | `@aphrody/material-web/select/select-option.js` | — |
+| `MdSideSheet` | `md-side-sheet` | `@aphrody/material-web/sheet/side-sheet.js` | 4 |
+| `MdSkeleton` | `md-skeleton` | `@aphrody/material-web/skeleton/skeleton.js` | — |
+| `MdSlider` | `md-slider` | `@aphrody/material-web/slider/slider.js` | 2 |
+| `MdSnackbar` | `md-snackbar` | `@aphrody/material-web/snackbar/snackbar.js` | 4 |
+| `MdSparkline` | `md-sparkline` | `@aphrody/material-web/charts/sparkline.js` | — |
+| `MdSplitButton` | `md-split-button` | `@aphrody/material-web/labs/gb/components/splitbutton/md-split-button.js` | — |
+| `MdStep` | `md-step` | `@aphrody/material-web/stepper/step.js` | — |
+| `MdStepper` | `md-stepper` | `@aphrody/material-web/stepper/stepper.js` | 1 |
+| `MdSubMenu` | `md-sub-menu` | `@aphrody/material-web/menu/sub-menu.js` | 4 |
+| `MdSuggestionChip` | `md-suggestion-chip` | `@aphrody/material-web/chips/suggestion-chip.js` | — |
+| `MdSupportingPane` | `md-supporting-pane` | `@aphrody/material-web/layout/md-supporting-pane.js` | — |
+| `MdSurface` | `md-surface` | `@aphrody/material-web/surface/surface.js` | — |
+| `MdSwitch` | `md-switch` | `@aphrody/material-web/switch/switch.js` | 2 |
+| `MdTable` | `md-table` | `@aphrody/material-web/table/table.js` | 2 |
+| `MdTabs` | `md-tabs` | `@aphrody/material-web/tabs/tabs.js` | 1 |
+| `MdTextButton` | `md-text-button` | `@aphrody/material-web/button/text-button.js` | — |
+| `MdTimePicker` | `md-time-picker` | `@aphrody/material-web/timepicker/time-picker.js` | 1 |
+| `MdToolbar` | `md-toolbar` | `@aphrody/material-web/toolbar/md-toolbar.js` | — |
+| `MdTooltip` | `md-tooltip` | `@aphrody/material-web/tooltip/tooltip.js` | 2 |
+| `MdTopAppBar` | `md-top-app-bar` | `@aphrody/material-web/appbar/top-app-bar.js` | — |
+| `MdTree` | `md-tree` | `@aphrody/material-web/tree/tree.js` | 1 |
+| `MdTreeItem` | `md-tree-item` | `@aphrody/material-web/tree/tree-item.js` | 2 |
+| `MdType` | `md-type` | `@aphrody/material-web/typography/md-type.js` | — |
+| `MdVirtualScroller` | `md-virtual-scroller` | `@aphrody/material-web/virtualscroll/virtual-scroller.js` | 1 |
+| `MdWebgpuCanvas` | `md-webgpu-canvas` | `@aphrody/material-web/effects/webgpu-canvas.js` | — |
diff --git a/adapters/tanstack.ts b/adapters/tanstack.ts
new file mode 100644
index 0000000..bcc77a6
--- /dev/null
+++ b/adapters/tanstack.ts
@@ -0,0 +1,69 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * @fileoverview TanStack Table adapter for @aphrody/m3-react & @aphrody/material-web.
+ * Connects TanStack headless table state (sorting, pagination, column models)
+ * with the Material Design 3 <md-table> custom element.
+ */
+
+import type { TableColumn, TableSortCriterion } from '@aphrody/material-web/table/internal/table.js';
+
+/**
+ * Minimal interface representing a TanStack Column Definition.
+ */
+export interface TanStackColumnLike<_TData = unknown> {
+  id?: string;
+  accessorKey?: string;
+  header?: string | ((...args: unknown[]) => unknown);
+  enableSorting?: boolean;
+  meta?: {
+    numeric?: boolean;
+    filter?: 'text' | 'number' | '';
+    resizable?: boolean;
+    width?: string;
+  };
+}
+
+/**
+ * Maps TanStack Column Definitions to Aphrody Material 3 TableColumn descriptors.
+ */
+export function mapTanStackColumnsToM3<TData = unknown>(
+  columns: TanStackColumnLike<TData>[]
+): TableColumn[] {
+  return columns.map((col) => {
+    const key = col.id || col.accessorKey || '';
+    const label = typeof col.header === 'string' ? col.header : key;
+    return {
+      key,
+      label,
+      sortable: col.enableSorting !== false,
+      numeric: col.meta?.numeric ?? false,
+      filter: col.meta?.filter ?? '',
+      resizable: col.meta?.resizable ?? false,
+      width: col.meta?.width,
+    };
+  });
+}
+
+/**
+ * Maps M3 Table Sort Criteria to TanStack SortingState format.
+ */
+export function mapM3SortToTanStack(
+  sortCriteria: TableSortCriterion[]
+): Array<{ id: string; desc: boolean }> {
+  return sortCriteria.map((item) => ({
+    id: item.key,
+    desc: item.direction === 'desc',
+  }));
+}
+
+/**
+ * Maps TanStack SortingState to M3 TableSortCriterion format.
+ */
+export function mapTanStackSortToM3(
+  sortingState: Array<{ id: string; desc: boolean }>
+): TableSortCriterion[] {
+  return sortingState.map((item) => ({
+    key: item.id,
+    direction: item.desc ? 'desc' : 'asc',
+  }));
+}
diff --git a/adaptive/index.ts b/adaptive/index.ts
new file mode 100644
index 0000000..ee24716
--- /dev/null
+++ b/adaptive/index.ts
@@ -0,0 +1,3 @@
+// Adaptive layout primitives for React (Material Design 3 window size classes).
+// Import: `import { useWindowSizeClass } from "@aphrody/m3-react/adaptive"`.
+export * from "./use-window-size-class.js";
diff --git a/adaptive/use-window-size-class.ts b/adaptive/use-window-size-class.ts
new file mode 100644
index 0000000..d8e23e8
--- /dev/null
+++ b/adaptive/use-window-size-class.ts
@@ -0,0 +1,85 @@
+/**
+ * Adaptive layout hooks for React — Material Design 3 window size classes.
+ *
+ * The **breakpoint values and classification logic are platform-agnostic** and
+ * live in `@aphrody/m3-tokens/breakpoints` (pure TypeScript, no DOM). This
+ * module re-exports them and adds the *web* reactivity layer (`matchMedia` /
+ * `resize`). That split is what makes the design system portable: a React
+ * Native shell can share the very same `BREAKPOINTS` / `classifyWidth` from
+ * `m3-tokens` and feed them `useWindowDimensions().width`, while a Tauri / web
+ * app uses the hooks below unchanged.
+ *
+ * SSR-safe: during server render (and the first client render, to avoid a
+ * hydration mismatch) the hooks return `ssrSizeClass` (default `"compact"`,
+ * mobile-first), then settle to the real value after mount.
+ */
+import { useEffect, useState } from "react";
+import {
+  BREAKPOINTS,
+  classifyWidth,
+  mediaQuery,
+  type WindowSizeClass,
+  WINDOW_SIZE_CLASSES,
+} from "@aphrody/m3-tokens/breakpoints";
+
+// Re-export the canonical, platform-agnostic primitives so consumers can import
+// everything adaptive from a single entrypoint (`@aphrody/m3-react/adaptive`).
+export { BREAKPOINTS, classifyWidth, WINDOW_SIZE_CLASSES };
+export type { WindowSizeClass };
+
+/**
+ * `(min-width: …)` media query string for the lower bound of a size class.
+ * Alias of `m3-tokens`' `mediaQuery`, kept for the web-oriented hook API.
+ */
+export function minWidthQuery(sizeClass: WindowSizeClass): string {
+  return mediaQuery(sizeClass);
+}
+
+const isClient = typeof window !== "undefined" && typeof window.matchMedia === "function";
+
+/**
+ * Reactive boolean for a CSS media query. SSR-safe (returns `false` until
+ * mounted on the client).
+ */
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    if (!isClient) return;
+    const mql = window.matchMedia(query);
+    const onChange = () => setMatches(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+
+/**
+ * Reactive M3 window size class for the viewport. Updates on resize/orientation
+ * change via `matchMedia`. SSR-safe — returns `ssrSizeClass` until mounted.
+ *
+ * ```tsx
+ * const sizeClass = useWindowSizeClass();
+ * return sizeClass === "compact" ? <MdNavigationBar/> : <MdNavigationRail/>;
+ * ```
+ */
+export function useWindowSizeClass(ssrSizeClass: WindowSizeClass = "compact"): WindowSizeClass {
+  const [sizeClass, setSizeClass] = useState<WindowSizeClass>(ssrSizeClass);
+  useEffect(() => {
+    if (!isClient) return;
+    const update = () => setSizeClass(classifyWidth(window.innerWidth));
+    update();
+    window.addEventListener("resize", update, { passive: true });
+    window.addEventListener("orientationchange", update);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("orientationchange", update);
+    };
+  }, []);
+  return sizeClass;
+}
+
+/** True when the viewport is at least the given size class (e.g. tablet+). */
+export function useAtLeast(sizeClass: WindowSizeClass): boolean {
+  return useMediaQuery(minWidthQuery(sizeClass));
+}
diff --git a/build.config.ts b/build.config.ts
new file mode 100644
index 0000000..7b43e41
--- /dev/null
+++ b/build.config.ts
@@ -0,0 +1,13 @@
+import { m3Package } from "@aphrody/m3-config/bun-build";
+
+export default m3Package({
+  entry: [
+    "index.ts",
+    "transitions/index.ts",
+    "adaptive/index.ts",
+    "state/index.ts",
+    "adapters/tanstack.ts",
+    "data/index.ts",
+    "wrappers/*.ts",
+  ],
+});
diff --git a/bunfig.toml b/bunfig.toml
new file mode 100644
index 0000000..d019fe4
--- /dev/null
+++ b/bunfig.toml
@@ -0,0 +1,2 @@
+[test]
+preload = ["@aphrody/m3-config/test/dom"]
diff --git a/data/DataTable.tsx b/data/DataTable.tsx
new file mode 100644
index 0000000..00bd140
--- /dev/null
+++ b/data/DataTable.tsx
@@ -0,0 +1,304 @@
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * M3 DataTable: TanStack Table v9 (sorting, global filter, pagination) rendered as a semantic `<table>`
+ * styled with the `--md-sys-*` tokens. With `virtual`, rows are virtualized by TanStack Virtual instead of paged.
+ */
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  type ColumnDef,
+  columnFilteringFeature,
+  createColumnHelper,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_basic,
+  sortFn_text,
+  tableFeatures,
+  useTable,
+  type RowData,
+} from "@tanstack/react-table";
+import { type CSSProperties, type ReactNode, useId, useRef } from "react";
+
+/** The features of every DataTable: sorting, column and global filtering, pagination. */
+export const dataTableFeatures = tableFeatures({
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+  sortFns: { alphanumeric: sortFn_alphanumeric, text: sortFn_text, basic: sortFn_basic },
+  columnFilteringFeature,
+  globalFilteringFeature,
+  filteredRowModel: createFilteredRowModel(),
+  filterFns: { includesString: filterFn_includesString },
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+});
+export type DataTableFeatures = typeof dataTableFeatures;
+export type DataColumn<TData extends RowData = any> = ColumnDef<DataTableFeatures, TData, any>;
+
+/** Column helper typed for DataTable: `const col = dataColumns<Person>(); col.accessor("name", { header: "Name" })`. */
+export const dataColumns = <TData extends RowData = any>() =>
+  createColumnHelper<DataTableFeatures, TData>();
+
+export interface DataTableProps<TData extends RowData = any> {
+  data: TData[];
+  columns: DataColumn<TData>[];
+  /** Accessible caption (also the table label). */
+  caption?: ReactNode;
+  /** Show a search field filtering every column. */
+  searchable?: boolean;
+  searchLabel?: string;
+  /** Rows per page (default 25). Ignored with `virtual`. */
+  pageSize?: number;
+  /** Virtualize rows in a scroll container of this height (px) instead of paging. */
+  virtual?: { height: number; rowHeight?: number; overscan?: number };
+  /** Initial sort, e.g. `[{ id: "name", desc: false }]`. */
+  initialSorting?: { id: string; desc: boolean }[];
+  getRowId?: (row: TData, index: number) => string;
+  onRowClick?: (row: TData) => void;
+  emptyLabel?: ReactNode;
+  className?: string;
+}
+
+const EMPTY: never[] = [];
+
+const s = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    color: "var(--md-sys-color-on-surface)",
+    font: "var(--md-sys-typescale-body-medium-weight, 400) var(--md-sys-typescale-body-medium-size, 14px) / var(--md-sys-typescale-body-medium-line-height, 20px) var(--md-sys-typescale-body-medium-font, inherit)",
+  },
+  container: {
+    overflow: "auto",
+    borderRadius: "var(--md-sys-shape-corner-medium, 12px)",
+    border: "1px solid var(--md-sys-color-outline-variant)",
+    background: "var(--md-sys-color-surface)",
+  },
+  table: { width: "100%", borderCollapse: "collapse" },
+  caption: {
+    textAlign: "start",
+    padding: "12px 16px",
+    font: "var(--md-sys-typescale-title-medium-weight, 500) var(--md-sys-typescale-title-medium-size, 16px) / var(--md-sys-typescale-title-medium-line-height, 24px) var(--md-sys-typescale-title-medium-font, inherit)",
+  },
+  th: {
+    position: "sticky",
+    top: 0,
+    textAlign: "start",
+    padding: "0 16px",
+    height: 56,
+    background: "var(--md-sys-color-surface-container)",
+    color: "var(--md-sys-color-on-surface-variant)",
+    borderBottom: "1px solid var(--md-sys-color-outline-variant)",
+    font: "var(--md-sys-typescale-title-small-weight, 500) var(--md-sys-typescale-title-small-size, 14px) / var(--md-sys-typescale-title-small-line-height, 20px) var(--md-sys-typescale-title-small-font, inherit)",
+  },
+  sort: {
+    all: "unset",
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+  },
+  td: {
+    padding: "0 16px",
+    height: 52,
+    borderBottom: "1px solid var(--md-sys-color-outline-variant)",
+  },
+  search: {
+    alignSelf: "flex-start",
+    minWidth: 240,
+    height: 40,
+    padding: "0 16px",
+    borderRadius: "var(--md-sys-shape-corner-extra-large, 28px)",
+    border: "1px solid var(--md-sys-color-outline)",
+    background: "var(--md-sys-color-surface-container-high)",
+    color: "inherit",
+    font: "inherit",
+  },
+  pager: { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 8 },
+  button: {
+    height: 40,
+    padding: "0 16px",
+    borderRadius: "var(--md-sys-shape-corner-full, 20px)",
+    border: "1px solid var(--md-sys-color-outline)",
+    background: "transparent",
+    color: "var(--md-sys-color-primary)",
+    font: "inherit",
+    cursor: "pointer",
+  },
+} satisfies Record<string, CSSProperties>;
+
+const SORT_MARK = { asc: " ▲", desc: " ▼" } as const;
+
+export function DataTable<TData extends RowData = any>(props: DataTableProps<TData>) {
+  const {
+    data,
+    columns,
+    caption,
+    searchable = false,
+    searchLabel = "Search",
+    pageSize = 25,
+    virtual,
+    initialSorting = EMPTY,
+    getRowId,
+    onRowClick,
+    emptyLabel = "No data",
+    className,
+  } = props;
+  const searchId = useId();
+  const table = useTable<DataTableFeatures, TData>({
+    features: dataTableFeatures,
+    data,
+    columns,
+    getRowId,
+    globalFilterFn: "includesString",
+    initialState: {
+      sorting: initialSorting,
+      pagination: { pageIndex: 0, pageSize: virtual ? Number.MAX_SAFE_INTEGER : pageSize },
+    },
+  });
+  const rows = table.getRowModel().rows;
+  const columnCount = table.getAllLeafColumns().length;
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const rowHeight = virtual?.rowHeight ?? 52;
+  // oxlint-disable-next-line react/incompatible-library -- TanStack Virtual renvoie des fonctions non mémoïsables (getVirtualItems, measureElement) : le compilateur React doit l'ignorer
+  const virtualizer = useVirtualizer({
+    count: virtual ? rows.length : 0,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => rowHeight,
+    getItemKey: (index) => rows[index]?.id ?? index,
+    overscan: virtual?.overscan ?? 8,
+    initialRect: virtual ? { width: 0, height: virtual.height } : undefined,
+  });
+
+  const items = virtual ? virtualizer.getVirtualItems() : undefined;
+  const visible = items ? items.map((item) => rows[item.index]!) : rows;
+  const padTop = items?.[0]?.start ?? 0;
+  const padBottom = items?.length ? virtualizer.getTotalSize() - items[items.length - 1]!.end : 0;
+
+  return (
+    <div className={className} style={s.root} data-m3-data-table="">
+      {searchable && (
+        <input
+          id={searchId}
+          type="search"
+          aria-label={searchLabel}
+          placeholder={searchLabel}
+          style={s.search}
+          value={String(table.store.state.globalFilter ?? "")}
+          onChange={(event) => table.setGlobalFilter(event.currentTarget.value)}
+        />
+      )}
+      <div
+        ref={scrollRef}
+        style={virtual ? { ...s.container, height: virtual.height } : s.container}
+        data-m3-scroll=""
+      >
+        <table style={s.table} aria-rowcount={virtual ? rows.length + 1 : undefined}>
+          {caption && <caption style={s.caption}>{caption}</caption>}
+          <thead>
+            {table.getHeaderGroups().map((group) => (
+              <tr key={group.id}>
+                {group.headers.map((header) => {
+                  const sorted = header.column.getIsSorted();
+                  const label = header.isPlaceholder ? null : <table.FlexRender header={header} />;
+                  return (
+                    <th
+                      key={header.id}
+                      scope="col"
+                      colSpan={header.colSpan}
+                      style={s.th}
+                      aria-sort={
+                        sorted === "asc"
+                          ? "ascending"
+                          : sorted === "desc"
+                            ? "descending"
+                            : undefined
+                      }
+                    >
+                      {header.column.getCanSort() ? (
+                        <button
+                          type="button"
+                          style={s.sort}
+                          onClick={header.column.getToggleSortingHandler()}
+                        >
+                          {label}
+                          {sorted ? SORT_MARK[sorted] : null}
+                        </button>
+                      ) : (
+                        label
+                      )}
+                    </th>
+                  );
+                })}
+              </tr>
+            ))}
+          </thead>
+          <tbody>
+            {padTop > 0 && (
+              <tr aria-hidden="true">
+                {/* oxlint-disable-next-line jsx-a11y/control-has-associated-label -- cellule de remplissage de virtualisation (ligne aria-hidden, sans contenu ni contrôle) */}
+                <td colSpan={columnCount} style={{ height: padTop, padding: 0 }} />
+              </tr>
+            )}
+            {visible.map((row) => (
+              <tr
+                key={row.id}
+                data-row-id={row.id}
+                onClick={onRowClick ? () => onRowClick(row.original as TData) : undefined}
+                style={onRowClick ? { cursor: "pointer" } : undefined}
+              >
+                {row.getAllCells().map((cell) => (
+                  // oxlint-disable-next-line jsx-a11y/control-has-associated-label -- cellule de données (td), pas un contrôle : son contenu est rendu par FlexRender
+                  <td key={cell.id} style={s.td}>
+                    <table.FlexRender cell={cell} />
+                  </td>
+                ))}
+              </tr>
+            ))}
+            {padBottom > 0 && (
+              <tr aria-hidden="true">
+                {/* oxlint-disable-next-line jsx-a11y/control-has-associated-label -- cellule de remplissage de virtualisation (ligne aria-hidden, sans contenu ni contrôle) */}
+                <td colSpan={columnCount} style={{ height: padBottom, padding: 0 }} />
+              </tr>
+            )}
+            {rows.length === 0 && (
+              <tr>
+                <td colSpan={columnCount} style={{ ...s.td, textAlign: "center" }}>
+                  {emptyLabel}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      {!virtual && table.getPageCount() > 1 && (
+        <nav style={s.pager} aria-label="Pagination">
+          <button
+            type="button"
+            style={s.button}
+            disabled={!table.getCanPreviousPage()}
+            onClick={() => table.previousPage()}
+          >
+            Previous
+          </button>
+          <span>
+            {table.store.state.pagination.pageIndex + 1} / {table.getPageCount()}
+          </span>
+          <button
+            type="button"
+            style={s.button}
+            disabled={!table.getCanNextPage()}
+            onClick={() => table.nextPage()}
+          >
+            Next
+          </button>
+        </nav>
+      )}
+    </div>
+  );
+}
diff --git a/data/VirtualList.tsx b/data/VirtualList.tsx
new file mode 100644
index 0000000..9d5b8b9
--- /dev/null
+++ b/data/VirtualList.tsx
@@ -0,0 +1,109 @@
+// SPDX-License-Identifier: Apache-2.0
+/** M3 VirtualList: a `role="list"` scroll container that renders only the visible items (TanStack Virtual). */
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { type CSSProperties, type Key, type ReactNode, useRef } from "react";
+
+export interface VirtualListProps<T> {
+  items: readonly T[];
+  renderItem: (item: T, index: number) => ReactNode;
+  /** Scroll container height in px (the visible window). */
+  height: number;
+  /** Estimated item size in px (default 56, the M3 one-line list item); items are measured once rendered. */
+  estimateSize?: number;
+  overscan?: number;
+  getKey?: (item: T, index: number) => Key;
+  /** Gap between items in px. */
+  gap?: number;
+  /** Called when the last item becomes visible (infinite loading). */
+  onEndReached?: () => void;
+  "aria-label"?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export function VirtualList<T>(props: VirtualListProps<T>) {
+  const {
+    items,
+    renderItem,
+    height,
+    estimateSize = 56,
+    overscan = 6,
+    getKey,
+    gap = 0,
+    onEndReached,
+    className,
+    style,
+  } = props;
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const endReported = useRef(-1);
+  // oxlint-disable-next-line react/incompatible-library -- TanStack Virtual renvoie des fonctions non mémoïsables (getVirtualItems, measureElement) : le compilateur React doit l'ignorer
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => estimateSize,
+    overscan,
+    gap,
+    getItemKey: getKey ? (index) => getKey(items[index]!, index) : undefined,
+    initialRect: { width: 0, height },
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  const last = virtualItems.at(-1);
+  if (
+    onEndReached &&
+    last &&
+    last.index === items.length - 1 &&
+    endReported.current !== items.length
+  ) {
+    endReported.current = items.length;
+    queueMicrotask(onEndReached);
+  }
+
+  return (
+    <div
+      ref={scrollRef}
+      className={className}
+      data-m3-virtual-list=""
+      style={{
+        height,
+        overflow: "auto",
+        contain: "strict",
+        background: "var(--md-sys-color-surface)",
+        color: "var(--md-sys-color-on-surface)",
+        ...style,
+      }}
+    >
+      <ul
+        aria-label={props["aria-label"]}
+        style={{
+          position: "relative",
+          width: "100%",
+          height: virtualizer.getTotalSize(),
+          margin: 0,
+          padding: 0,
+          listStyle: "none",
+        }}
+      >
+        {virtualItems.map((item) => (
+          <li
+            key={item.key}
+            aria-setsize={items.length}
+            aria-posinset={item.index + 1}
+            data-index={item.index}
+            ref={virtualizer.measureElement}
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              margin: 0,
+              listStyle: "none",
+              transform: `translateY(${item.start}px)`,
+            }}
+          >
+            {renderItem(items[item.index]!, item.index)}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/data/index.ts b/data/index.ts
new file mode 100644
index 0000000..b6ee83b
--- /dev/null
+++ b/data/index.ts
@@ -0,0 +1,6 @@
+// SPDX-License-Identifier: Apache-2.0
+/** `@aphrody/m3-react/data`: M3 data components on TanStack Table v9 and TanStack Virtual. */
+export { DataTable, dataColumns, dataTableFeatures } from "./DataTable.tsx";
+export type { DataColumn, DataTableFeatures, DataTableProps } from "./DataTable.tsx";
+export { VirtualList } from "./VirtualList.tsx";
+export type { VirtualListProps } from "./VirtualList.tsx";
diff --git a/generate.ts b/generate.ts
new file mode 100644
index 0000000..5378853
--- /dev/null
+++ b/generate.ts
@@ -0,0 +1,416 @@
+/**
+ * Generator for @aphrody/m3-react.
+ *
+ * Reads migration/scripts/md-elements.txt (119 tags), resolves each tag to its
+ * real entry file + exported element class inside material-web/ by scanning the
+ * `@customElement('md-x') export class Foo` pattern, and emits one wrapper file
+ * per category directory using @lit/react `createComponent`.
+ *
+ * Registry archives contain compiled files only; pass the standalone fork sources.
+ * Run: bun run generate.ts --source /path/to/material-web [--output /tmp/preview]
+ */
+import { mkdirSync, readdirSync, statSync } from "node:fs";
+import { join, relative, resolve } from "node:path";
+
+const HERE = import.meta.dir;
+const args = process.argv.slice(2);
+let sourceRoot: string | undefined;
+let outputRoot = HERE;
+for (let i = 0; i < args.length; i++) {
+  const flag = args[i];
+  const value = args[++i];
+  if ((flag !== "--source" && flag !== "--output") || !value || value.startsWith("--")) {
+    throw new Error(
+      "Usage: bun run generate.ts --source /path/to/material-web [--output /tmp/preview]",
+    );
+  }
+  if (flag === "--source") sourceRoot = resolve(value);
+  else outputRoot = resolve(value);
+}
+if (!sourceRoot) {
+  throw new Error(
+    "Material Web npm archives contain compiled files only. Pass --source /path/to/material-web (the standalone fork checkout).",
+  );
+}
+const MW = sourceRoot;
+const BUNDLES = ["all.ts", "aphrody-components.ts", "aphrody-labs.ts"];
+const bundlePresent = await Promise.all(
+  BUNDLES.map((bundle) => Bun.file(join(MW, bundle)).exists()),
+);
+for (const [index, bundle] of BUNDLES.entries()) {
+  if (!bundlePresent[index]) {
+    throw new Error(`Material Web source checkout is missing ${bundle}: ${MW}`);
+  }
+}
+const ELEMENTS_TXT = join(HERE, "md-elements.txt");
+const OUT_DIR = join(outputRoot, "wrappers");
+
+// ── 1. Tag → PascalCase wrapper name (CONVENTIONS §2) ──────────────────────
+const pascal = (tag: string): string =>
+  tag
+    .split("-")
+    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+    .join("");
+
+// ── 2. Walk material-web for every `@customElement('md-…')` entry file ──────
+// Skip tests, internal/, demos, catalog. Collect tag → [{file, className}].
+const SKIP_DIRS = new Set([
+  "node_modules",
+  "internal",
+  "demo",
+  "demos",
+  "catalog",
+  "dist-aphrody",
+  "sass",
+  "testing",
+]);
+const RE = /@customElement\(\s*['"]([a-z0-9-]+)['"]\s*\)\s*\nexport class (\w+)/g;
+
+interface Def {
+  file: string;
+  className: string;
+}
+
+type EventMap = Record<string, string>;
+
+interface Resolved {
+  tag: string;
+  name: string;
+  file: string;
+  className: string;
+  events: EventMap;
+}
+
+interface Unresolved {
+  tag: string;
+  reason: string;
+}
+
+const defs: Map<string, Def[]> = new Map();
+
+async function walk(dir: string): Promise<void> {
+  for (const name of readdirSync(dir)) {
+    const full = join(dir, name);
+    const st = statSync(full);
+    if (st.isDirectory()) {
+      if (SKIP_DIRS.has(name)) continue;
+      // oxlint-disable-next-line no-await-in-loop -- depth-first walk in readdir order: the defs lists it appends to feed the generated output order
+      await walk(full);
+    } else if (name.endsWith(".ts") && !name.endsWith("_test.ts") && !name.endsWith(".d.ts")) {
+      // oxlint-disable-next-line no-await-in-loop -- files are registered in walk order (defs lists feed the generated output), so reads stay sequential
+      const src = await Bun.file(full).text();
+      let m;
+      RE.lastIndex = 0;
+      while ((m = RE.exec(src))) {
+        const [, tag, className] = m;
+        if (!tag.startsWith("md-")) continue;
+        const rel = relative(MW, full).replace(/\.ts$/, ".js"); // import as .js (side-effect register)
+        if (!defs.has(tag)) defs.set(tag, []);
+        defs.get(tag)!.push({ file: rel, className });
+      }
+    }
+  }
+}
+await walk(MW);
+
+// ── 3. Canonical import path preference ────────────────────────────────────
+// Tags re-exported by the three bundles must import from the bundled entry
+// path. Build the set of canonical relative paths from those bundles.
+const bundleImports = new Set<string>();
+const bundleSources = await Promise.all(BUNDLES.map((bundle) => Bun.file(join(MW, bundle)).text()));
+for (const src of bundleSources) {
+  for (const m of src.matchAll(/from ['"]\.\/([^'"]+\.js)['"]/g)) bundleImports.add(m[1]);
+}
+
+function pickDef(tag: string, candidates: Def[]): Def {
+  // 1. Prefer a candidate whose path is referenced by a bundle entry.
+  const bundled = candidates.find((c) => bundleImports.has(c.file));
+  if (bundled) return bundled;
+  // 2. Otherwise prefer a non-labs/gb path (canonical source dir).
+  const nonGb = candidates.find((c) => !c.file.startsWith("labs/gb/"));
+  if (nonGb) return nonGb;
+  // 3. Fall back to the first (labs/gb only — e.g. md-button, md-split-button).
+  return candidates[0];
+}
+
+// ── 4. Event maps per category (verified against new Event/CustomEvent in MW) ─
+// Generic UI events React already types; the md elements re-dispatch the native
+// `input`/`change`. Component-specific events use their real names.
+// Every name below is the REAL event string verified by grepping
+// `@fires` / `new (Custom)?Event('…')` in material-web/<dir>/internal/*.ts.
+// Upstream components use bare names (input/change/opening/…); aphrody fork
+// components namespace theirs (paginator:page, table:sort, side-sheet:opening…).
+const EVENTS_BY_TAG: Record<string, EventMap> = {
+  // ── fork: parity additions (event names verified against source dispatch) ──
+  "md-rating": { onChange: "change", onInput: "input" },
+  "md-carousel": { onChange: "carousel-change" },
+  "md-scheduler": {
+    onNavigate: "scheduler:navigate",
+    onSelect: "scheduler:select",
+    onEventClick: "scheduler:event-click",
+  },
+  "md-date-range-picker": {
+    onInput: "input",
+    onChange: "change",
+    onDateRangeChange: "date-range-picker:change",
+  },
+  "md-date-time-picker": {
+    onInput: "input",
+    onChange: "change",
+    onDateTimeChange: "date-time-picker:change",
+  },
+  "md-popover": { onOpened: "opened", onClosed: "closed" },
+  "md-alert": { onClose: "close" },
+  "md-avatar": { onError: "error" },
+  // ── Form inputs (upstream: re-dispatched native input/change) ──────────
+  "md-checkbox": { onChange: "change", onInput: "input" },
+  "md-radio": { onChange: "change", onInput: "input" },
+  "md-switch": { onChange: "change", onInput: "input" },
+  "md-slider": { onChange: "change", onInput: "input" },
+  "md-filled-text-field": { onChange: "change", onInput: "input" },
+  "md-outlined-text-field": { onChange: "change", onInput: "input" },
+  "md-filled-select": {
+    onChange: "change",
+    onInput: "input",
+    onOpening: "opening",
+    onOpened: "opened",
+    onClosing: "closing",
+    onClosed: "closed",
+  },
+  "md-outlined-select": {
+    onChange: "change",
+    onInput: "input",
+    onOpening: "opening",
+    onOpened: "opened",
+    onClosing: "closing",
+    onClosed: "closed",
+  },
+  // fork: search-bar fires input + search + search:open/close
+  "md-search-bar": {
+    onInput: "input",
+    onSearch: "search",
+    onSearchOpen: "search:open",
+    onSearchClose: "search:close",
+  },
+  // fork: autocomplete fires input + autocomplete:select
+  "md-autocomplete": { onInput: "input", onSelect: "autocomplete:select" },
+  // ── Overlays (upstream) ────────────────────────────────────────────────
+  "md-dialog": {
+    onOpen: "open",
+    onOpened: "opened",
+    onClose: "close",
+    onClosed: "closed",
+    onCancel: "cancel",
+  },
+  "md-menu": {
+    onOpening: "opening",
+    onOpened: "opened",
+    onClosing: "closing",
+    onClosed: "closed",
+  },
+  "md-menu-item": { onCloseMenu: "close-menu" },
+  "md-sub-menu": {
+    onOpening: "opening",
+    onOpened: "opened",
+    onClosing: "closing",
+    onClosed: "closed",
+  },
+  // fork: snackbar (bare opening/opened/closing/closed)
+  "md-snackbar": {
+    onOpening: "opening",
+    onOpened: "opened",
+    onClosing: "closing",
+    onClosed: "closed",
+  },
+  // fork: sheets namespace their lifecycle events
+  "md-bottom-sheet": {
+    onOpening: "bottom-sheet:opening",
+    onOpened: "bottom-sheet:opened",
+    onClosing: "bottom-sheet:closing",
+    onClosed: "bottom-sheet:closed",
+  },
+  "md-side-sheet": {
+    onOpening: "side-sheet:opening",
+    onOpened: "side-sheet:opened",
+    onClosing: "side-sheet:closing",
+    onClosed: "side-sheet:closed",
+  },
+  // labs navigation drawer
+  "md-navigation-drawer": {
+    onNavigationDrawerChanged: "navigation-drawer-changed",
+  },
+  "md-navigation-drawer-modal": {
+    onNavigationDrawerChanged: "navigation-drawer-changed",
+  },
+  // ── Selection / navigation ─────────────────────────────────────────────
+  "md-tabs": { onChange: "change" }, // upstream: bubbling 'change'
+  "md-navigation-bar": { onActivated: "navigation-bar-activated" }, // labs
+  "md-navigation-rail": {
+    onChange: "navigation-rail:change",
+    onItemActivate: "navigation-rail-item:activate",
+  }, // fork
+  "md-input-chip": { onRemove: "remove", onUpdateFocus: "update-focus" },
+  "md-button-group": { onChange: "button-group:change" }, // fork
+  "md-fab-menu": { onOpen: "fab-menu:open", onClose: "fab-menu:close" }, // fork
+  "md-fab-menu-item": { onClick: "fab-menu-item:click" }, // fork
+  // ── Disclosure (fork) ──────────────────────────────────────────────────
+  "md-expansion-panel": { onToggle: "expansion:toggle" },
+  "md-stepper": { onChange: "stepper:change" },
+  // ── Pickers (fork) ─────────────────────────────────────────────────────
+  "md-date-picker": { onChange: "date-picker:change" },
+  "md-time-picker": { onChange: "time-picker:change" },
+  // ── Data (fork) ────────────────────────────────────────────────────────
+  "md-table": {
+    onSort: "table:sort",
+    onSelectionChange: "table:selection-change",
+  },
+  "md-paginator": { onPage: "paginator:page" },
+  "md-tree": { onSelect: "tree:select" },
+  "md-tree-item": {
+    onToggle: "tree-item:toggle",
+    onActivate: "tree-item:activate",
+  },
+  "md-virtual-scroller": { onRange: "virtual-scroll:range" },
+  // ── Misc (fork) ────────────────────────────────────────────────────────
+  "md-tooltip": { onShow: "tooltip-show", onHide: "tooltip-hide" },
+};
+
+// ── 5. Resolve every requested tag ─────────────────────────────────────────
+const tags = (await Bun.file(ELEMENTS_TXT).text())
+  .split("\n")
+  .map((s) => s.trim())
+  .filter(Boolean);
+
+const resolved: Resolved[] = [];
+const unresolved: Unresolved[] = [];
+
+for (const tag of tags) {
+  const candidates = defs.get(tag);
+  if (!candidates || candidates.length === 0) {
+    unresolved.push({
+      tag,
+      reason: "no @customElement entry file found in material-web/",
+    });
+    continue;
+  }
+  const def = pickDef(tag, candidates);
+  resolved.push({
+    tag,
+    name: pascal(tag),
+    file: def.file,
+    className: def.className,
+    events: EVENTS_BY_TAG[tag] ?? {},
+  });
+}
+
+// ── 6. Group by top-level category dir, emit one wrapper file per group ─────
+const groupOf = (file: string): string => file.split("/")[0].replace(/\..*$/, "");
+const groups: Map<string, Resolved[]> = new Map();
+for (const r of resolved) {
+  const g = groupOf(r.file);
+  if (!groups.has(g)) groups.set(g, []);
+  groups.get(g)!.push(r);
+}
+
+mkdirSync(OUT_DIR, { recursive: true });
+
+const HEADER = `// AUTO-GENERATED by generate.ts — do not edit by hand. Run \`bun run generate\`.\n`;
+const fmtEvents = (events: EventMap): string => {
+  const keys = Object.keys(events);
+  if (keys.length === 0) return "{}";
+  const body = keys.map((k) => `${k}: '${events[k]}'`).join(", ");
+  return `{${body}}`;
+};
+
+const indexLines = [
+  HEADER,
+  `import * as React from 'react';`,
+  `import {createComponent} from '@lit/react';`,
+  "",
+];
+// Group elements that share the same import file (e.g. several tags per module is rare; one file = one element here).
+const writes: Promise<number>[] = [];
+for (const [group, items] of [...groups.entries()].toSorted()) {
+  const fileName = `${group}.ts`;
+  const lines = [
+    HEADER,
+    `import * as React from 'react';`,
+    `import {createComponent} from '@lit/react';`,
+    "",
+  ];
+  // imports — alias element class to <Name>Element to avoid clashing with wrapper const.
+  for (const r of items) {
+    lines.push(
+      `import {${r.className} as ${r.name}Element} from '@aphrody/material-web/${r.file}';`,
+    );
+  }
+  lines.push("");
+  for (const r of items) {
+    lines.push(`export const ${r.name} = createComponent({`);
+    lines.push(`  react: React,`);
+    lines.push(`  tagName: '${r.tag}',`);
+    lines.push(`  elementClass: ${r.name}Element,`);
+    lines.push(`  events: ${fmtEvents(r.events)},`);
+    lines.push(`});`);
+    lines.push("");
+  }
+  writes.push(Bun.write(join(OUT_DIR, fileName), lines.join("\n")));
+  indexLines.push(`export * from './wrappers/${group}.js';`.replace("./wrappers", "./"));
+}
+await Promise.all(writes);
+
+// index.ts at package root re-exports all groups.
+const idx = [HEADER];
+for (const [group] of [...groups.entries()].toSorted()) {
+  idx.push(`export * from './wrappers/${group}.js';`);
+}
+idx.push("");
+await Bun.write(join(outputRoot, "index.ts"), idx.join("\n"));
+
+// ── 7. Report ──────────────────────────────────────────────────────────────
+console.log(`Tags requested: ${tags.length}`);
+console.log(`Wrappers generated: ${resolved.length} across ${groups.size} files`);
+if (unresolved.length) {
+  console.log(`Unresolved (${unresolved.length}):`);
+  for (const u of unresolved) console.log(`  - ${u.tag}: ${u.reason}`);
+}
+// Emit a machine-readable manifest for the README.
+await Bun.write(
+  join(outputRoot, ".manifest.json"),
+  JSON.stringify(
+    {
+      resolved: resolved.map(({ tag, name, file, className, events }) => ({
+        tag,
+        name,
+        file,
+        className,
+        events,
+      })),
+      unresolved,
+    },
+    null,
+    2,
+  ),
+);
+
+// Keep the README's component list in sync (it is the last section). This makes
+// the wrapper count + table self-maintaining — never stale after a `generate`.
+const README = join(outputRoot, "README.md");
+const rows = resolved
+  .toSorted((a, b) => a.name.localeCompare(b.name))
+  .map((r) => {
+    const ev = Object.keys(r.events ?? {}).length || "—";
+    return `| \`${r.name}\` | \`${r.tag}\` | \`@aphrody/material-web/${r.file}\` | ${ev} |`;
+  })
+  .join("\n");
+const listSection =
+  `## Liste complète des wrappers (${resolved.length})\n\n` +
+  `> Régénérée par \`generate.ts\` (\`.manifest.json\`). ${unresolved.length} non résolu(s).\n\n` +
+  `| Wrapper | Tag | Import élément | # events |\n| --- | --- | --- | --- |\n${rows}\n`;
+try {
+  const readme = await Bun.file(README).text();
+  const updated = readme.replace(/## Liste complète des wrappers \(\d+\)[\s\S]*$/, listSection);
+  if (updated !== readme) await Bun.write(README, updated);
+} catch {
+  /* README optional */
+}
diff --git a/index.ts b/index.ts
new file mode 100644
index 0000000..3c0c786
--- /dev/null
+++ b/index.ts
@@ -0,0 +1,66 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+export * from './wrappers/alert.js';
+export * from './wrappers/appbar.js';
+export * from './wrappers/autocomplete.js';
+export * from './wrappers/avatar.js';
+export * from './wrappers/backdrop.js';
+export * from './wrappers/badge.js';
+export * from './wrappers/banner.js';
+export * from './wrappers/breadcrumbs.js';
+export * from './wrappers/button.js';
+export * from './wrappers/buttongroup.js';
+export * from './wrappers/canvas3d.js';
+export * from './wrappers/card.js';
+export * from './wrappers/card3d.js';
+export * from './wrappers/carousel.js';
+export * from './wrappers/charts.js';
+export * from './wrappers/checkbox.js';
+export * from './wrappers/chips.js';
+export * from './wrappers/datepicker.js';
+export * from './wrappers/dialog.js';
+export * from './wrappers/divider.js';
+export * from './wrappers/effects.js';
+export * from './wrappers/elevation.js';
+export * from './wrappers/expansion.js';
+export * from './wrappers/fab.js';
+export * from './wrappers/fabmenu.js';
+export * from './wrappers/field.js';
+export * from './wrappers/focus.js';
+export * from './wrappers/globe3d.js';
+export * from './wrappers/gridlist.js';
+export * from './wrappers/icon.js';
+export * from './wrappers/iconbutton.js';
+export * from './wrappers/labs.js';
+export * from './wrappers/layout.js';
+export * from './wrappers/link.js';
+export * from './wrappers/list.js';
+export * from './wrappers/loadingindicator.js';
+export * from './wrappers/menu.js';
+export * from './wrappers/mobilestepper.js';
+export * from './wrappers/navigationrail.js';
+export * from './wrappers/paginator.js';
+export * from './wrappers/popover.js';
+export * from './wrappers/progress.js';
+export * from './wrappers/radio.js';
+export * from './wrappers/rating.js';
+export * from './wrappers/ripple.js';
+export * from './wrappers/scheduler.js';
+export * from './wrappers/search.js';
+export * from './wrappers/select.js';
+export * from './wrappers/sheet.js';
+export * from './wrappers/skeleton.js';
+export * from './wrappers/slider.js';
+export * from './wrappers/snackbar.js';
+export * from './wrappers/stepper.js';
+export * from './wrappers/surface.js';
+export * from './wrappers/switch.js';
+export * from './wrappers/table.js';
+export * from './wrappers/tabs.js';
+export * from './wrappers/textfield.js';
+export * from './wrappers/timepicker.js';
+export * from './wrappers/toolbar.js';
+export * from './wrappers/tooltip.js';
+export * from './wrappers/tree.js';
+export * from './wrappers/typography.js';
+export * from './wrappers/virtualscroll.js';
diff --git a/material-web-shims.d.ts b/material-web-shims.d.ts
new file mode 100644
index 0000000..11bffd7
--- /dev/null
+++ b/material-web-shims.d.ts
@@ -0,0 +1,26 @@
+// Ambient shims for @aphrody/material-web build artifacts that are NOT present in this
+// source checkout of the fork.
+//
+// material-web's build pipeline generates two kinds of style modules that the
+// component sources import but that only exist after `npm run build`
+// (build:sass -> build:css-to-ts):
+//   - `*-styles.cssresult.js`  (upstream + aphrody-labs SASS components)
+//   - `*.css`                  (labs/gb Google-Sans components import raw CSS as a CSSResult)
+//
+// We only need the *type* of these modules so the wrappers typecheck; the
+// actual CSS is irrelevant to the React wrapper layer (it ships with the
+// element at runtime). Both export `styles: CSSResult`.
+// NOTE: typed as `any`, not `CSSResult`. material-web bundles its own nested
+// `lit@2` whose `CSSResult` is a nominally different class from the wrappers'
+// `lit@3` `CSSResult`; importing either side here would make these style
+// modules non-assignable to the elements' `static styles: CSSResultOrNative[]`.
+// The wrapper layer never touches these values, so `any` is correct and safe.
+declare module "*.cssresult.js" {
+  export const styles: any;
+}
+
+declare module "*.css" {
+  const styles: any;
+  export default styles;
+  export { styles };
+}
diff --git a/md-elements.txt b/md-elements.txt
new file mode 100644
index 0000000..93ee56a
--- /dev/null
+++ b/md-elements.txt
@@ -0,0 +1,121 @@
+md-accordion
+md-assist-chip
+md-autocomplete
+md-badge
+md-banner
+md-bottom-app-bar
+md-bottom-sheet
+md-branded-fab
+md-button
+md-button-group
+md-card
+md-carousel
+md-carousel-item
+md-checkbox
+md-chip-set
+md-circular-progress
+md-date-picker
+md-dialog
+md-divider
+md-elevated-button
+md-elevated-card
+md-elevation
+md-expansion-panel
+md-fab
+md-fab-menu
+md-fab-menu-item
+md-filled-button
+md-filled-card
+md-filled-field
+md-filled-icon-button
+md-filled-select
+md-filled-text-field
+md-filled-tonal-button
+md-filled-tonal-icon-button
+md-filter-chip
+md-focus-ring
+md-grid-list
+md-grid-tile
+md-icon
+md-icon-button
+md-input-chip
+md-item
+md-linear-progress
+md-list
+md-list-detail
+md-list-item
+md-loading-indicator
+md-menu
+md-menu-group
+md-menu-item
+md-navigation-bar
+md-navigation-drawer
+md-navigation-drawer-modal
+md-navigation-rail
+md-navigation-rail-item
+md-navigation-tab
+md-outlined-button
+md-outlined-card
+md-outlined-field
+md-outlined-icon-button
+md-outlined-segmented-button
+md-outlined-segmented-button-set
+md-outlined-select
+md-outlined-text-field
+md-paginator
+md-pane
+md-primary-tab
+md-radio
+md-ripple
+md-scaffold
+md-search-bar
+md-secondary-tab
+md-select-option
+md-side-sheet
+md-slider
+md-snackbar
+md-split-button
+md-step
+md-stepper
+md-sub-menu
+md-suggestion-chip
+md-supporting-pane
+md-switch
+md-table
+md-tabs
+md-text-button
+md-time-picker
+md-toolbar
+md-tooltip
+md-top-app-bar
+md-tree
+md-tree-item
+md-virtual-scroller
+md-webgpu-canvas
+md-avatar
+md-avatar-group
+md-alert
+md-skeleton
+md-breadcrumbs
+md-link
+md-surface
+md-backdrop
+md-popover
+md-rating
+md-line-chart
+md-bar-chart
+md-pie-chart
+md-area-chart
+md-sparkline
+md-gauge
+md-date-range-picker
+md-mobile-stepper
+md-scatter-chart
+md-radar-chart
+md-date-time-picker
+md-scheduler
+md-type
+md-3d-canvas
+md-3d-globe
+md-3d-card
+
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..418143b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,106 @@
+{
+  "name": "@aphrody/m3-react",
+  "version": "1.4.4",
+  "description": "React wrappers (@lit/react createComponent) for every <md-*> element of the @aphrody/material-web fork.",
+  "homepage": "https://github.com/aphrody-code/material-web/tree/main/packages/react#readme",
+  "bugs": {
+    "url": "https://github.com/aphrody-code/material-web/issues"
+  },
+  "license": "Apache-2.0",
+  "author": "aphrody-code",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aphrody-code/material-web.git",
+    "directory": "packages/m3-react"
+  },
+  "files": [
+    "dist",
+    "index.ts",
+    "transitions",
+    "adaptive",
+    "state",
+    "adapters",
+    "wrappers",
+    "data"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "./dist/index.js",
+    "./dist/**/*.js"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./index.ts",
+      "default": "./dist/index.js"
+    },
+    "./transitions": {
+      "bun": "./transitions/index.ts",
+      "types": "./dist/transitions/index.d.ts",
+      "import": "./transitions/index.ts",
+      "default": "./dist/transitions/index.js"
+    },
+    "./adaptive": {
+      "bun": "./adaptive/index.ts",
+      "types": "./dist/adaptive/index.d.ts",
+      "import": "./adaptive/index.ts",
+      "default": "./dist/adaptive/index.js"
+    },
+    "./state": {
+      "bun": "./state/index.ts",
+      "types": "./dist/state/index.d.ts",
+      "import": "./state/index.ts",
+      "default": "./dist/state/index.js"
+    },
+    "./adapters/tanstack": {
+      "bun": "./adapters/tanstack.ts",
+      "types": "./dist/adapters/tanstack.d.ts",
+      "import": "./adapters/tanstack.ts",
+      "default": "./dist/adapters/tanstack.js"
+    },
+    "./data": {
+      "bun": "./data/index.ts",
+      "types": "./dist/data/index.d.ts",
+      "import": "./data/index.ts",
+      "default": "./dist/data/index.js"
+    },
+    "./package.json": "./package.json",
+    "./*": {
+      "bun": "./wrappers/*.ts",
+      "types": "./dist/wrappers/*.d.ts",
+      "import": "./wrappers/*.ts",
+      "default": "./dist/wrappers/*.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "generate": "bun run generate.ts",
+    "build": "bun ../../scripts/build.ts build --only $npm_package_name",
+    "typecheck": "bun check --noEmit",
+    "typecheck:fast": "bun check --noEmit",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@aphrody/m3-tokens": "workspace:*",
+    "@aphrody/material-web": "catalog:",
+    "@lit/react": "catalog:",
+    "@tanstack/react-table": "catalog:",
+    "@tanstack/react-virtual": "catalog:"
+  },
+  "devDependencies": {
+    "@aphrody/m3-config": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "engines": {
+    "bun": ">=1.4.4"
+  }
+}
diff --git a/state/index.ts b/state/index.ts
new file mode 100644
index 0000000..e23eda1
--- /dev/null
+++ b/state/index.ts
@@ -0,0 +1,26 @@
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Hoisted state primitives for Material Design 3 React components.
+ *
+ * Currently exposes {@link useTextFieldState} / {@link WebTextFieldState}: the
+ * Web counterpart of Jetpack Compose `TextFieldState` / `rememberTextFieldState`,
+ * an observable, transactional text + selection container for driving
+ * `<md-outlined-text-field>` / `<md-filled-text-field>` without spurious
+ * re-renders.
+ *
+ * @packageDocumentation
+ */
+
+export {
+  WebTextFieldState,
+  useTextFieldState,
+  bindTextFieldState,
+  syncFromElement,
+} from "./use-text-field-state.js";
+export type {
+  TextFieldSelection,
+  TextFieldEditBuffer,
+  TextFieldStateListener,
+  SelectionCapableElement,
+} from "./use-text-field-state.js";
diff --git a/state/use-text-field-state.ts b/state/use-text-field-state.ts
new file mode 100644
index 0000000..f4f5c6f
--- /dev/null
+++ b/state/use-text-field-state.ts
@@ -0,0 +1,280 @@
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Hoisted, observable text-field state for Material Design 3 React text fields.
+ *
+ * This is the Web counterpart of Jetpack Compose's `TextFieldState` /
+ * `rememberTextFieldState()` paradigm: a persistent state container holding the
+ * current text plus the cursor/selection, mutated through atomic, transactional
+ * edits (`state.edit(...)`). It is designed to drive `<md-outlined-text-field>`
+ * / `<md-filled-text-field>` (wrappers `MdOutlinedTextField` /
+ * `MdFilledTextField`) without spurious re-renders while preserving the caret
+ * and selection inside the Lit Shadow DOM.
+ *
+ * SSR-safe: the module never touches `window`/`document` at import time, and the
+ * hook subscribes lazily through `useSyncExternalStore`.
+ *
+ * @packageDocumentation
+ */
+
+import { useState, useSyncExternalStore } from "react";
+
+/** A caret position (`start === end`) or a directed/undirected selection range. */
+export interface TextFieldSelection {
+  start: number;
+  end: number;
+}
+
+/** The mutable buffer exposed inside an {@link WebTextFieldState.edit} block. */
+export interface TextFieldEditBuffer {
+  text: string;
+  selection: TextFieldSelection;
+}
+
+/** A listener notified after every committed mutation. */
+export type TextFieldStateListener = () => void;
+
+function clampSelection(selection: TextFieldSelection, length: number): TextFieldSelection {
+  const clamp = (n: number): number => {
+    if (!Number.isFinite(n) || n < 0) {
+      return 0;
+    }
+    return n > length ? length : Math.floor(n);
+  };
+  const start = clamp(selection.start);
+  const end = clamp(selection.end);
+  // Keep start <= end for an undirected range; callers that need direction can
+  // read it back as-is when start <= end already holds.
+  return start <= end ? { start, end } : { start: end, end: start };
+}
+
+/**
+ * Observable, transactional text-field state container.
+ *
+ * Mirrors Compose `TextFieldState`: the only way to mutate text + selection
+ * together is the atomic {@link edit} transaction, so a single notification is
+ * dispatched per logical change (text and caret never observed mid-update).
+ */
+export class WebTextFieldState {
+  private _text: string;
+  private _selection: TextFieldSelection;
+  private readonly _listeners = new Set<TextFieldStateListener>();
+
+  constructor(initialText = "", initialSelection: TextFieldSelection = { start: 0, end: 0 }) {
+    this._text = initialText;
+    this._selection = clampSelection(initialSelection, initialText.length);
+    // Bind so the methods can be passed directly to useSyncExternalStore /
+    // addEventListener without losing `this`.
+    this.subscribe = this.subscribe.bind(this);
+    this.getSnapshot = this.getSnapshot.bind(this);
+  }
+
+  /** Current text value. */
+  get text(): string {
+    return this._text;
+  }
+
+  /** Current selection/caret, always clamped to `[0, text.length]`. */
+  get selection(): TextFieldSelection {
+    return this._selection;
+  }
+
+  /**
+   * Stable identity snapshot for `useSyncExternalStore`. Returns the raw text;
+   * because edits are transactional, text identity changes iff a commit
+   * happened, which is the correct "did the store change" signal for the value.
+   */
+  getSnapshot(): string {
+    return this._text;
+  }
+
+  /**
+   * Move the caret / set the selection without changing text. Out-of-range
+   * indices are clamped. Notifies subscribers only when the range changes.
+   */
+  setSelection(start: number, end: number = start): void {
+    const next = clampSelection({ start, end }, this._text.length);
+    if (next.start === this._selection.start && next.end === this._selection.end) {
+      return;
+    }
+    this._selection = next;
+    this.notify();
+  }
+
+  /**
+   * Replace the whole text value, re-clamping the existing selection against
+   * the new length. Prefer {@link edit} when you also need to move the caret.
+   */
+  setText(text: string): void {
+    if (text === this._text) {
+      return;
+    }
+    this._text = text;
+    this._selection = clampSelection(this._selection, text.length);
+    this.notify();
+  }
+
+  /**
+   * Atomic transaction over text + selection. The block receives a mutable
+   * buffer initialised from the current state; mutations are validated and
+   * committed together, dispatching a single notification. If the block throws,
+   * nothing is committed (the state is left untouched).
+   *
+   * @example
+   * state.edit((buffer) => {
+   *   buffer.text = buffer.text.toUpperCase();
+   *   buffer.selection = { start: buffer.text.length, end: buffer.text.length };
+   * });
+   */
+  edit(block: (buffer: TextFieldEditBuffer) => void): void {
+    const buffer: TextFieldEditBuffer = {
+      text: this._text,
+      selection: { start: this._selection.start, end: this._selection.end },
+    };
+    block(buffer);
+    const nextText = buffer.text;
+    const nextSelection = clampSelection(buffer.selection, nextText.length);
+    const changed =
+      nextText !== this._text ||
+      nextSelection.start !== this._selection.start ||
+      nextSelection.end !== this._selection.end;
+    if (!changed) {
+      return;
+    }
+    this._text = nextText;
+    this._selection = nextSelection;
+    this.notify();
+  }
+
+  /**
+   * Convenience editor: replace the current selection (or insert at the caret)
+   * with `replacement`, then place the caret right after the inserted text.
+   */
+  replaceSelection(replacement: string): void {
+    this.edit((buffer) => {
+      const { start, end } = buffer.selection;
+      buffer.text = buffer.text.slice(0, start) + replacement + buffer.text.slice(end);
+      const caret = start + replacement.length;
+      buffer.selection = { start: caret, end: caret };
+    });
+  }
+
+  /**
+   * Subscribe to commits. Returns an unsubscribe function. Shaped for direct
+   * use as the first argument of `useSyncExternalStore`.
+   */
+  subscribe(listener: TextFieldStateListener): () => void {
+    this._listeners.add(listener);
+    return () => {
+      this._listeners.delete(listener);
+    };
+  }
+
+  private notify(): void {
+    for (const listener of this._listeners) {
+      listener();
+    }
+  }
+}
+
+/**
+ * Hook recreating Compose's `rememberTextFieldState()`.
+ *
+ * The {@link WebTextFieldState} instance is created exactly once (lazy
+ * `useState` initialiser) and stays stable across re-renders. The component
+ * re-renders only when the committed text changes, via `useSyncExternalStore` —
+ * chosen over a manual `useEffect` + `forceUpdate` because it is the React 19
+ * tearing-safe primitive: it reads the snapshot synchronously during render
+ * (so concurrent renders never observe a stale value) and avoids the
+ * double-render that a "subscribe in effect then setState" approach incurs on
+ * mount. The `getServerSnapshot` argument makes it SSR/hydration-safe.
+ *
+ * Because selection lives on the same instance, callers that need caret-driven
+ * re-renders can subscribe to it themselves; the default snapshot intentionally
+ * tracks text only, so moving the caret does not re-render the whole subtree.
+ *
+ * @param initialValue Initial text; caret is placed at the end of it.
+ * @returns The stable, observable state container.
+ */
+export function useTextFieldState(initialValue = ""): WebTextFieldState {
+  const [state] = useState(
+    () =>
+      new WebTextFieldState(initialValue, {
+        start: initialValue.length,
+        end: initialValue.length,
+      }),
+  );
+  // Subscribe to text commits. The snapshot is the raw string, so React bails
+  // out of re-rendering when an edit leaves the text unchanged.
+  useSyncExternalStore(state.subscribe, state.getSnapshot, state.getSnapshot);
+  return state;
+}
+
+/**
+ * A structural view of a focusable text-entry element exposing the standard
+ * selection API. Both a raw `<input>`/`<textarea>` and an `<md-*-text-field>`
+ * host (which delegates these members to its inner control) satisfy it, so the
+ * binding helper does not need to import the React wrapper or the Lit element.
+ */
+export interface SelectionCapableElement {
+  value: string;
+  selectionStart: number | null;
+  selectionEnd: number | null;
+  setSelectionRange?(start: number, end: number): void;
+}
+
+/**
+ * Push the current {@link WebTextFieldState} value + selection onto a live
+ * `<md-*-text-field>` (or raw input) element, preserving the caret/selection
+ * inside the Lit Shadow DOM. Safe to call from a React effect after each
+ * commit; it writes `value` only when it differs to avoid clobbering IME
+ * composition, then restores the selection range.
+ *
+ * @returns `true` if anything was written, `false` if already in sync.
+ */
+export function bindTextFieldState(
+  state: WebTextFieldState,
+  element: SelectionCapableElement | null | undefined,
+): boolean {
+  if (!element) {
+    return false;
+  }
+  let wrote = false;
+  if (element.value !== state.text) {
+    element.value = state.text;
+    wrote = true;
+  }
+  const { start, end } = state.selection;
+  if (element.selectionStart !== start || element.selectionEnd !== end) {
+    if (typeof element.setSelectionRange === "function") {
+      element.setSelectionRange(start, end);
+    } else {
+      element.selectionStart = start;
+      element.selectionEnd = end;
+    }
+    wrote = true;
+  }
+  return wrote;
+}
+
+/**
+ * Read a `<md-*-text-field>` (or raw input) element's current value + selection
+ * back into a {@link WebTextFieldState} as a single atomic edit. Use this as the
+ * `onInput`/`onSelect` handler bridge so user typing stays the source of truth.
+ */
+export function syncFromElement(
+  state: WebTextFieldState,
+  element: SelectionCapableElement | null | undefined,
+): void {
+  if (!element) {
+    return;
+  }
+  const caretStart = element.selectionStart;
+  const caretEnd = element.selectionEnd;
+  state.edit((buffer) => {
+    buffer.text = element.value;
+    const start = caretStart ?? buffer.text.length;
+    const end = caretEnd ?? start;
+    buffer.selection = { start, end };
+  });
+}
diff --git a/test/adaptive.test.tsx b/test/adaptive.test.tsx
new file mode 100644
index 0000000..94062f7
--- /dev/null
+++ b/test/adaptive.test.tsx
@@ -0,0 +1,69 @@
+// Adaptive layout hooks: M3 window size class boundaries + the React hook
+// rendering through the happy-dom harness.
+import { afterEach, describe, expect, test } from "bun:test";
+import * as React from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { flushSync } from "react-dom";
+import {
+  BREAKPOINTS,
+  classifyWidth,
+  minWidthQuery,
+  useWindowSizeClass,
+} from "../adaptive/index.js";
+
+describe("classifyWidth — canonical M3 boundaries (600/840/1200/1600)", () => {
+  test.each([
+    [0, "compact"],
+    [599, "compact"],
+    [600, "medium"],
+    [839, "medium"],
+    [840, "expanded"],
+    [1199, "expanded"],
+    [1200, "large"],
+    [1599, "large"],
+    [1600, "extra-large"],
+    [2560, "extra-large"],
+  ] as const)("%i → %s", (w, cls) => {
+    expect(classifyWidth(w)).toBe(cls);
+  });
+
+  test("BREAKPOINTS lower-bounds match the spec", () => {
+    expect(BREAKPOINTS).toMatchObject({
+      compact: 0,
+      medium: 600,
+      expanded: 840,
+      large: 1200,
+      "extra-large": 1600,
+    });
+  });
+
+  test("minWidthQuery builds a CSS media query", () => {
+    expect(minWidthQuery("expanded")).toBe("(min-width: 840px)");
+  });
+});
+
+function Probe() {
+  return React.createElement("span", { "data-testid": "size-class" }, useWindowSizeClass());
+}
+
+describe("useWindowSizeClass", () => {
+  let root: Root | undefined;
+  let host: HTMLElement | undefined;
+  afterEach(() => {
+    flushSync(() => root?.unmount());
+    host?.remove();
+    root = undefined;
+    host = undefined;
+  });
+
+  test("renders a window size class and reflects the current viewport", () => {
+    host = document.createElement("div");
+    document.body.appendChild(host);
+    root = createRoot(host);
+    flushSync(() => root!.render(React.createElement(Probe)));
+    // After mount the effect ran: the class is one of the five valid values.
+    expect(["compact", "medium", "expanded", "large", "extra-large"]).toContain(
+      host.querySelector("span")?.textContent ?? "",
+    );
+  });
+});
diff --git a/test/bundle-size.test.ts b/test/bundle-size.test.ts
new file mode 100644
index 0000000..c557c96
--- /dev/null
+++ b/test/bundle-size.test.ts
@@ -0,0 +1,63 @@
+import { describe, expect, test } from "bun:test";
+
+// Size budgets that lock in the tree-shaking guarantee: a deep family import
+// must stay tiny, and the barrel must stay light. Built from source with React
+// and @aphrody/material-web kept external (they resolve in the consumer / load the
+// element code on demand), minified + gzipped — the figures a real consumer
+// pays for the wrapper layer. Guards against accidental bloat or a regression
+// of the per-family subpath split.
+
+const EXTERNAL = [
+  "react",
+  "react-dom",
+  "react/jsx-runtime",
+  "@lit/react",
+  "@aphrody/material-web",
+  "@aphrody/material-web/*",
+];
+
+import { resolve } from "node:path";
+
+async function gzipBytes(entry: string): Promise<number> {
+  const result = await Bun.build({
+    entrypoints: [resolve(import.meta.dir, "..", entry)],
+    external: EXTERNAL,
+    minify: true,
+    target: "browser",
+  });
+  if (!result.success) {
+    throw new Error(`build failed for ${entry}: ${result.logs.map((l) => l.message).join("; ")}`);
+  }
+  const sizes = await Promise.all(
+    result.outputs.map(async (output) => Bun.gzipSync(Buffer.from(await output.text())).length),
+  );
+  return sizes.reduce((total, size) => total + size, 0);
+}
+
+describe("bundle-size budgets (gzip)", () => {
+  test("a single family deep-import stays under 1 KB", async () => {
+    const size = await gzipBytes("wrappers/button.ts");
+    expect(size, `wrappers/button.ts = ${size} B gzip`).toBeLessThan(1024);
+  });
+
+  test("a chart family deep-import stays under 1.5 KB", async () => {
+    const size = await gzipBytes("wrappers/charts.ts");
+    expect(size, `wrappers/charts.ts = ${size} B gzip`).toBeLessThan(1536);
+  });
+
+  test("the full barrel (all 115 wrappers) stays under 7 KB", async () => {
+    const size = await gzipBytes("index.ts");
+    expect(size, `index.ts = ${size} B gzip`).toBeLessThan(7168);
+  });
+
+  test("the transitions entry stays under 2.5 KB", async () => {
+    const size = await gzipBytes("transitions/index.ts");
+    expect(size, `transitions/index.ts = ${size} B gzip`).toBeLessThan(2560);
+  });
+
+  test("a deep family import is at least 5x lighter than the barrel", async () => {
+    const family = await gzipBytes("wrappers/button.ts");
+    const barrel = await gzipBytes("index.ts");
+    expect(barrel / family).toBeGreaterThan(5);
+  });
+});
diff --git a/test/data.test.tsx b/test/data.test.tsx
new file mode 100644
index 0000000..eb680d1
--- /dev/null
+++ b/test/data.test.tsx
@@ -0,0 +1,123 @@
+// SPDX-License-Identifier: Apache-2.0
+import { describe, expect, test } from "bun:test";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { DataTable, dataColumns, VirtualList } from "../data/index.ts";
+
+interface Person {
+  id: string;
+  name: string;
+  age: number;
+}
+
+const people: Person[] = Array.from({ length: 60 }, (_, i) => ({
+  id: `p${i}`,
+  name: `Person ${String(i).padStart(2, "0")}`,
+  age: 20 + (i % 40),
+}));
+const col = dataColumns<Person>();
+const columns = [col.accessor("name", { header: "Name" }), col.accessor("age", { header: "Age" })];
+
+const cellTexts = (html: string) => [...html.matchAll(/<td[^>]*>([^<]*)<\/td>/g)].map((m) => m[1]);
+
+describe("DataTable", () => {
+  test("renders a semantic table with headers, a caption and the first page", () => {
+    const html = renderToString(
+      <DataTable
+        data={people}
+        columns={columns}
+        caption="People"
+        pageSize={10}
+        getRowId={(p) => p.id}
+      />,
+    );
+    expect(html).toContain("<caption");
+    expect(html).toContain("People");
+    expect(html).toContain('scope="col"');
+    expect(html.match(/data-row-id=/g)?.length).toBe(10);
+    expect(cellTexts(html)[0]).toBe("Person 00");
+    expect(html).toMatch(/1(<!-- -->)? \/ (<!-- -->)?6/);
+  });
+
+  test("initial sorting orders rows and marks the header", () => {
+    const html = renderToString(
+      <DataTable
+        data={people}
+        columns={columns}
+        pageSize={5}
+        initialSorting={[{ id: "name", desc: true }]}
+      />,
+    );
+    expect(cellTexts(html)[0]).toBe("Person 59");
+    expect(html).toContain('aria-sort="descending"');
+  });
+
+  test("virtual mode renders a window of rows with spacers and no pager", () => {
+    const html = renderToString(
+      <DataTable
+        data={people}
+        columns={columns}
+        virtual={{ height: 260, rowHeight: 52, overscan: 0 }}
+      />,
+    );
+    const rendered = html.match(/data-row-id=/g)?.length ?? 0;
+    expect(rendered).toBeGreaterThan(0);
+    expect(rendered).toBeLessThan(people.length);
+    expect(html).toContain('aria-rowcount="61"');
+    expect(html).not.toContain('aria-label="Pagination"');
+  });
+
+  test("an empty table shows the empty label", () => {
+    expect(renderToString(<DataTable data={[]} columns={columns} emptyLabel="Nobody" />)).toContain(
+      "Nobody",
+    );
+  });
+
+  test("clicking a header sorts, the search field filters", async () => {
+    const container = document.createElement("div");
+    document.body.append(container);
+    const root = createRoot(container);
+    await act(async () =>
+      root.render(<DataTable data={people} columns={columns} searchable pageSize={100} />),
+    );
+    const firstName = () => container.querySelector("tbody td")?.textContent;
+    expect(firstName()).toBe("Person 00");
+    const sortName = container.querySelector<HTMLButtonElement>("th button")!;
+    await act(async () => sortName.click());
+    await act(async () => sortName.click());
+    expect(firstName()).toBe("Person 59");
+    const search = container.querySelector<HTMLInputElement>('input[type="search"]')!;
+    await act(async () => {
+      const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!;
+      setter.call(search, "Person 42");
+      search.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    expect(container.querySelectorAll("tbody tr[data-row-id]").length).toBe(1);
+    expect(firstName()).toBe("Person 42");
+    await act(async () => root.unmount());
+    container.remove();
+  });
+});
+
+describe("VirtualList", () => {
+  test("renders only the visible window of a long list as listitems", () => {
+    const items = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);
+    const html = renderToString(
+      <VirtualList
+        items={items}
+        height={280}
+        estimateSize={56}
+        overscan={2}
+        renderItem={(item) => <span>{item}</span>}
+      />,
+    );
+    const rendered = html.match(/<li[\s>]/g)?.length ?? 0;
+    expect(rendered).toBeGreaterThan(0);
+    expect(rendered).toBeLessThanOrEqual(10);
+    expect(html.match(/<ul[\s>]/g)?.length).toBe(1);
+    expect(html).toContain('aria-setsize="1000"');
+    expect(html).toContain("Item 0");
+    expect(html).not.toContain("Item 999");
+  });
+});
diff --git a/test/production-contract.test.tsx b/test/production-contract.test.tsx
new file mode 100644
index 0000000..f895dd0
--- /dev/null
+++ b/test/production-contract.test.tsx
@@ -0,0 +1,107 @@
+// SPDX-License-Identifier: Apache-2.0
+import { afterEach, describe, expect, mock, test } from "bun:test";
+import * as React from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { flushSync } from "react-dom";
+import { Fade, Collapse } from "../transitions/index.ts";
+import { useTransitionState } from "../transitions/use-transition-state.ts";
+
+let root: Root | undefined;
+let host: HTMLElement | undefined;
+const originalMatchMedia = window.matchMedia;
+
+afterEach(() => {
+  if (root) flushSync(() => root!.unmount());
+  host?.remove();
+  root = undefined;
+  host = undefined;
+  window.matchMedia = originalMatchMedia;
+});
+
+function render(element: React.ReactNode) {
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  flushSync(() => root!.render(element));
+  return host;
+}
+
+describe("production transition lifecycle", () => {
+  test("does not start an enter lifecycle on an already visible mount without appear", async () => {
+    const entered = mock(() => {});
+    function Probe() {
+      const { phase } = useTransitionState(true, {
+        enterTimeout: 1,
+        exitTimeout: 1,
+        onEntered: entered,
+      });
+      return <output>{phase}</output>;
+    }
+    const el = render(<Probe />);
+    await Bun.sleep(40);
+    expect(el.textContent).toBe("entered");
+    expect(entered).not.toHaveBeenCalled();
+  });
+
+  test("cancels an interrupted enter without a stale completion callback", async () => {
+    const entered = mock(() => {});
+    const exited = mock(() => {});
+    function Probe({ shown }: { shown: boolean }) {
+      const { phase } = useTransitionState(shown, {
+        enterTimeout: 80,
+        exitTimeout: 5,
+        onEntered: entered,
+        onExited: exited,
+      });
+      return <output>{phase}</output>;
+    }
+    render(<Probe shown={false} />);
+    flushSync(() => root!.render(<Probe shown />));
+    await Bun.sleep(25);
+    flushSync(() => root!.render(<Probe shown={false} />));
+    await Bun.sleep(100);
+    expect(entered).not.toHaveBeenCalled();
+    expect(exited).toHaveBeenCalledTimes(1);
+    expect(host!.textContent).toBe("exited");
+  });
+
+  test("hidden preserved children cannot receive keyboard focus", () => {
+    const el = render(
+      <>
+        <Fade in={false}>
+          <button type="button" data-testid="fade">
+            Hidden
+          </button>
+        </Fade>
+        <Collapse in={false}>
+          <button type="button" data-testid="collapse">
+            Hidden
+          </button>
+        </Collapse>
+      </>,
+    );
+    expect(el.querySelector('[data-testid="fade"]')!.hasAttribute("inert")).toBe(true);
+    expect(el.querySelector('[data-testid="fade"]')!.getAttribute("aria-hidden")).toBe("true");
+    expect(el.querySelector('[data-testid="collapse"]')!.closest("[inert]")).not.toBeNull();
+  });
+
+  test("reduced motion removes CSS duration and unmounts exits immediately", () => {
+    const media = new EventTarget() as MediaQueryList;
+    Object.defineProperty(media, "matches", { value: true });
+    window.matchMedia = () => media;
+    const el = render(
+      <Fade in unmountOnExit>
+        <button type="button">Visible</button>
+      </Fade>,
+    );
+    expect(el.querySelector("button")!.style.transition).toContain("0ms");
+    flushSync(() =>
+      root!.render(
+        <Fade in={false} unmountOnExit>
+          <button type="button">Visible</button>
+        </Fade>,
+      ),
+    );
+    expect(el.querySelector("button")).toBeNull();
+  });
+});
diff --git a/test/tanstack-adapter.test.ts b/test/tanstack-adapter.test.ts
new file mode 100644
index 0000000..4abe573
--- /dev/null
+++ b/test/tanstack-adapter.test.ts
@@ -0,0 +1,46 @@
+// SPDX-License-Identifier: Apache-2.0
+import { describe, expect, it } from 'bun:test';
+import {
+  mapTanStackColumnsToM3,
+  mapM3SortToTanStack,
+  mapTanStackSortToM3,
+} from '../adapters/tanstack';
+
+describe('TanStack Table Adapter for M3', () => {
+  it('maps TanStack column definitions to M3 table columns', () => {
+    const tanstackCols = [
+      { id: 'name', header: 'Dessert Name', enableSorting: true },
+      { id: 'calories', header: 'Calories', enableSorting: false, meta: { numeric: true } },
+      { accessorKey: 'fat', header: 'Fat (g)', meta: { filter: 'number' as const, width: '120px' } },
+    ];
+
+    const m3Cols = mapTanStackColumnsToM3(tanstackCols);
+    expect(m3Cols).toHaveLength(3);
+    expect(m3Cols[0]).toEqual({
+      key: 'name',
+      label: 'Dessert Name',
+      sortable: true,
+      numeric: false,
+      filter: '',
+      resizable: false,
+      width: undefined,
+    });
+    expect(m3Cols[1].numeric).toBe(true);
+    expect(m3Cols[1].sortable).toBe(false);
+    expect(m3Cols[2].filter).toBe('number');
+    expect(m3Cols[2].width).toBe('120px');
+  });
+
+  it('bi-directionally converts sorting state', () => {
+    const tanstackSort = [{ id: 'calories', desc: true }, { id: 'name', desc: false }];
+    const m3Sort = mapTanStackSortToM3(tanstackSort);
+
+    expect(m3Sort).toEqual([
+      { key: 'calories', direction: 'desc' },
+      { key: 'name', direction: 'asc' },
+    ]);
+
+    const backToTanstack = mapM3SortToTanStack(m3Sort);
+    expect(backToTanstack).toEqual(tanstackSort);
+  });
+});
diff --git a/test/transitions.test.tsx b/test/transitions.test.tsx
new file mode 100644
index 0000000..3bd30ab
--- /dev/null
+++ b/test/transitions.test.tsx
@@ -0,0 +1,140 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import * as React from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { flushSync } from "react-dom";
+import { Collapse, Fade, Grow, Slide, Zoom } from "../transitions/index.js";
+import { isVisible, resolveTimeout } from "../transitions/use-transition-state.js";
+
+// --- Pure helpers (no DOM) -------------------------------------------------
+
+describe("resolveTimeout", () => {
+  test("falls back when undefined", () => {
+    expect(resolveTimeout(undefined, "enter", 250)).toBe(250);
+  });
+  test("a single number applies to every direction", () => {
+    expect(resolveTimeout(300, "enter", 250)).toBe(300);
+    expect(resolveTimeout(300, "exit", 200)).toBe(300);
+    expect(resolveTimeout(300, "appear", 250)).toBe(300);
+  });
+  test("per-direction object resolves each direction", () => {
+    const t = { appear: 10, enter: 20, exit: 30 };
+    expect(resolveTimeout(t, "appear", 0)).toBe(10);
+    expect(resolveTimeout(t, "enter", 0)).toBe(20);
+    expect(resolveTimeout(t, "exit", 0)).toBe(30);
+  });
+  test("appear falls back to enter, then to the fallback", () => {
+    expect(resolveTimeout({ enter: 20 }, "appear", 99)).toBe(20);
+    expect(resolveTimeout({ exit: 30 }, "appear", 99)).toBe(99);
+  });
+});
+
+describe("isVisible", () => {
+  test("entering/entered are visible; exiting/exited are not", () => {
+    expect(isVisible("entering")).toBe(true);
+    expect(isVisible("entered")).toBe(true);
+    expect(isVisible("exiting")).toBe(false);
+    expect(isVisible("exited")).toBe(false);
+  });
+});
+
+// --- Component rendering (happy-dom + flushSync) ---------------------------
+
+let root: Root | null = null;
+let host: HTMLElement | null = null;
+
+function render(element: React.ReactElement): HTMLElement {
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  root = createRoot(host);
+  flushSync(() => root!.render(element));
+  return host;
+}
+
+afterEach(() => {
+  if (root) flushSync(() => root!.unmount());
+  host?.remove();
+  root = null;
+  host = null;
+});
+
+describe("Fade", () => {
+  test("shown: renders the child with opacity 1 and an opacity transition", () => {
+    const el = render(
+      <Fade in>
+        <div data-testid="box">hi</div>
+      </Fade>,
+    );
+    const box = el.querySelector<HTMLElement>('[data-testid="box"]');
+    expect(box).not.toBeNull();
+    expect(box!.style.opacity).toBe("1");
+    expect(box!.style.transition).toContain("opacity");
+  });
+
+  test("hidden (kept mounted): renders the child with opacity 0", () => {
+    const el = render(
+      <Fade in={false}>
+        <div data-testid="box">hi</div>
+      </Fade>,
+    );
+    const box = el.querySelector<HTMLElement>('[data-testid="box"]');
+    expect(box).not.toBeNull();
+    expect(box!.style.opacity).toBe("0");
+  });
+
+  test("mountOnEnter + not in: renders nothing", () => {
+    const el = render(
+      <Fade in={false} mountOnEnter>
+        <div data-testid="box">hi</div>
+      </Fade>,
+    );
+    expect(el.querySelector('[data-testid="box"]')).toBeNull();
+  });
+
+  test("preserves the child's own inline style", () => {
+    const el = render(
+      <Fade in>
+        <div data-testid="box" style={{ color: "red" }}>
+          hi
+        </div>
+      </Fade>,
+    );
+    const box = el.querySelector<HTMLElement>('[data-testid="box"]');
+    expect(box!.style.color).toBe("red");
+    expect(box!.style.opacity).toBe("1");
+  });
+});
+
+describe("Grow / Zoom / Slide / Collapse", () => {
+  test("each renders its child when shown and applies a transition", () => {
+    for (const T of [Grow, Zoom, Slide, Collapse]) {
+      const el = render(
+        <T in>
+          <div data-testid="box">x</div>
+        </T>,
+      );
+      const box = el.querySelector<HTMLElement>('[data-testid="box"]');
+      expect(box).not.toBeNull();
+      // Either the child is cloned with a transition (Fade/Grow/Zoom/Slide)
+      // or it sits inside an animated wrapper (Collapse) — assert some
+      // rendered element carries a transition.
+      const animated = [...el.querySelectorAll<HTMLElement>("*")].some(
+        (n) => n.style.transition.length > 0,
+      );
+      expect(animated).toBe(true);
+      // reset between iterations
+      if (root) flushSync(() => root!.unmount());
+      host?.remove();
+      root = null;
+      host = null;
+    }
+  });
+
+  test("Slide/Collapse unmount nothing when shown but render null when mountOnEnter and not in", () => {
+    const el = render(
+      <Collapse in={false} mountOnEnter>
+        <div data-testid="box">x</div>
+      </Collapse>,
+    );
+    expect(el.querySelector('[data-testid="box"]')).toBeNull();
+  });
+});
diff --git a/test/use-text-field-state.test.ts b/test/use-text-field-state.test.ts
new file mode 100644
index 0000000..0088dc9
--- /dev/null
+++ b/test/use-text-field-state.test.ts
@@ -0,0 +1,260 @@
+// SPDX-License-Identifier: Apache-2.0
+
+import { afterEach, describe, expect, it } from "bun:test";
+import { createRoot, type Root } from "react-dom/client";
+import { flushSync } from "react-dom";
+import { renderToStaticMarkup } from "react-dom/server";
+import { createElement, type ReactElement } from "react";
+import {
+  bindTextFieldState,
+  syncFromElement,
+  useTextFieldState,
+  WebTextFieldState,
+  type SelectionCapableElement,
+} from "../state/use-text-field-state.js";
+
+describe("WebTextFieldState (pure logic)", () => {
+  it("constructs with defaults", () => {
+    const state = new WebTextFieldState();
+    expect(state.text).toBe("");
+    expect(state.selection).toEqual({ start: 0, end: 0 });
+  });
+
+  it("clamps the initial selection to the text length", () => {
+    const state = new WebTextFieldState("abc", { start: 10, end: 99 });
+    expect(state.selection).toEqual({ start: 3, end: 3 });
+  });
+
+  it("edit() updates text and selection atomically", () => {
+    const state = new WebTextFieldState("ab");
+    let observed: { text: string; selStart: number } | null = null;
+    state.subscribe(() => {
+      observed = { text: state.text, selStart: state.selection.start };
+    });
+    state.edit((buffer) => {
+      buffer.text = "abXYZ";
+      buffer.selection = { start: 5, end: 5 };
+    });
+    expect(state.text).toBe("abXYZ");
+    expect(state.selection).toEqual({ start: 5, end: 5 });
+    // The listener must never observe a half-applied state.
+    expect(observed).toEqual({ text: "abXYZ", selStart: 5 });
+  });
+
+  it("edit() commits nothing when the block makes no change", () => {
+    const state = new WebTextFieldState("hi", { start: 1, end: 1 });
+    let calls = 0;
+    state.subscribe(() => {
+      calls++;
+    });
+    state.edit(() => {
+      /* no-op */
+    });
+    expect(calls).toBe(0);
+    expect(state.text).toBe("hi");
+  });
+
+  it("edit() leaves state untouched if the block throws", () => {
+    const state = new WebTextFieldState("safe", { start: 2, end: 2 });
+    expect(() => {
+      state.edit((buffer) => {
+        buffer.text = "corrupt";
+        throw new Error("boom");
+      });
+    }).toThrow("boom");
+    expect(state.text).toBe("safe");
+    expect(state.selection).toEqual({ start: 2, end: 2 });
+  });
+
+  it("setSelection() clamps and notifies only on change", () => {
+    const state = new WebTextFieldState("hello");
+    let calls = 0;
+    state.subscribe(() => {
+      calls++;
+    });
+    state.setSelection(1, 3);
+    expect(state.selection).toEqual({ start: 1, end: 3 });
+    expect(calls).toBe(1);
+    // Same range again -> no notification.
+    state.setSelection(1, 3);
+    expect(calls).toBe(1);
+    // Out of range -> clamped to text length.
+    state.setSelection(99, 100);
+    expect(state.selection).toEqual({ start: 5, end: 5 });
+    expect(calls).toBe(2);
+  });
+
+  it("setSelection() defaults end to start (caret)", () => {
+    const state = new WebTextFieldState("hello");
+    state.setSelection(2);
+    expect(state.selection).toEqual({ start: 2, end: 2 });
+  });
+
+  it("replaceSelection() inserts and moves the caret", () => {
+    const state = new WebTextFieldState("foobar", { start: 3, end: 6 });
+    state.replaceSelection("X");
+    expect(state.text).toBe("fooX");
+    expect(state.selection).toEqual({ start: 4, end: 4 });
+  });
+
+  it("subscribe() returns a working unsubscribe", () => {
+    const state = new WebTextFieldState();
+    let calls = 0;
+    const off = state.subscribe(() => {
+      calls++;
+    });
+    state.setText("a");
+    off();
+    state.setText("ab");
+    expect(calls).toBe(1);
+  });
+
+  it("getSnapshot() returns the current text for useSyncExternalStore", () => {
+    const state = new WebTextFieldState("snap");
+    expect(state.getSnapshot()).toBe("snap");
+    state.setText("snap2");
+    expect(state.getSnapshot()).toBe("snap2");
+  });
+});
+
+function makeElement(
+  value = "",
+): SelectionCapableElement & { setSelectionRange(s: number, e: number): void } {
+  return {
+    value,
+    selectionStart: 0,
+    selectionEnd: 0,
+    setSelectionRange(start: number, end: number) {
+      this.selectionStart = start;
+      this.selectionEnd = end;
+    },
+  };
+}
+
+describe("bindTextFieldState / syncFromElement", () => {
+  it("writes value + selection onto the element", () => {
+    const state = new WebTextFieldState("hello", { start: 5, end: 5 });
+    const el = makeElement();
+    const wrote = bindTextFieldState(state, el);
+    expect(wrote).toBe(true);
+    expect(el.value).toBe("hello");
+    expect(el.selectionStart).toBe(5);
+    expect(el.selectionEnd).toBe(5);
+  });
+
+  it("is a no-op when element already matches", () => {
+    const state = new WebTextFieldState("hi", { start: 2, end: 2 });
+    const el = makeElement("hi");
+    el.selectionStart = 2;
+    el.selectionEnd = 2;
+    expect(bindTextFieldState(state, el)).toBe(false);
+  });
+
+  it("tolerates a null element", () => {
+    const state = new WebTextFieldState();
+    expect(bindTextFieldState(state, null)).toBe(false);
+    expect(() => syncFromElement(state, undefined)).not.toThrow();
+  });
+
+  it("syncFromElement() reads value + caret back atomically", () => {
+    const state = new WebTextFieldState();
+    const el = makeElement("typed");
+    el.selectionStart = 5;
+    el.selectionEnd = 5;
+    syncFromElement(state, el);
+    expect(state.text).toBe("typed");
+    expect(state.selection).toEqual({ start: 5, end: 5 });
+  });
+});
+
+describe("useTextFieldState (SSR render path)", () => {
+  it("is SSR-safe and seeds initial value + end caret", () => {
+    const captured: { state?: WebTextFieldState } = {};
+    function Probe() {
+      const state = useTextFieldState("init");
+      // oxlint-disable-next-line react/immutability -- harnais de test : le composant publie l'état rendu pour les assertions
+      captured.state = state;
+      return createElement("output", null, state.text);
+    }
+    // renderToStaticMarkup exercises the getServerSnapshot path (no DOM).
+    const markup = renderToStaticMarkup(createElement(Probe));
+    expect(markup).toContain("init");
+    expect(captured.state?.text).toBe("init");
+    expect(captured.state?.selection).toEqual({ start: 4, end: 4 });
+  });
+});
+
+// Client render path: drive React with flushSync + happy-dom, matching the
+// package's existing harness (adaptive/transitions tests). The setup.ts preload
+// sets IS_REACT_ACT_ENVIRONMENT = false, so we do NOT use act().
+describe("useTextFieldState (client render path)", () => {
+  let root: Root | null = null;
+  let container: HTMLElement | null = null;
+
+  afterEach(() => {
+    if (root) {
+      flushSync(() => root?.unmount());
+      root = null;
+    }
+    container?.remove();
+    container = null;
+  });
+
+  function mount(element: ReactElement): void {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    flushSync(() => root?.render(element));
+  }
+
+  it("returns a stable instance and re-renders on committed text changes", () => {
+    let renders = 0;
+    const instances: WebTextFieldState[] = [];
+    const captured: { state?: WebTextFieldState } = {};
+
+    function Probe() {
+      renders++;
+      const state = useTextFieldState("init");
+      instances.push(state);
+      // oxlint-disable-next-line react/immutability -- harnais de test : le composant publie l'état rendu pour les assertions
+      captured.state = state;
+      return createElement("output", null, state.text);
+    }
+
+    mount(createElement(Probe));
+    expect(captured.state?.text).toBe("init");
+    expect(captured.state?.selection).toEqual({ start: 4, end: 4 });
+    expect(container?.querySelector("output")?.textContent).toBe("init");
+
+    const rendersAfterMount = renders;
+    flushSync(() => {
+      captured.state?.setText("changed");
+    });
+    expect(container?.querySelector("output")?.textContent).toBe("changed");
+    expect(renders).toBeGreaterThan(rendersAfterMount);
+    // Same instance across renders.
+    expect(new Set(instances).size).toBe(1);
+  });
+
+  it("does not re-render when an edit leaves the text unchanged", () => {
+    let renders = 0;
+    const captured: { state?: WebTextFieldState } = {};
+
+    function Probe() {
+      renders++;
+      const state = useTextFieldState("abc");
+      // oxlint-disable-next-line react/immutability -- harnais de test : le composant publie l'état rendu pour les assertions
+      captured.state = state;
+      return createElement("output", null, state.text);
+    }
+
+    mount(createElement(Probe));
+    const baseline = renders;
+    // Moving only the caret does not change the text snapshot -> no re-render.
+    flushSync(() => {
+      captured.state?.setSelection(1, 2);
+    });
+    expect(renders).toBe(baseline);
+    expect(captured.state?.selection).toEqual({ start: 1, end: 2 });
+  });
+});
diff --git a/test/wrappers.test.tsx b/test/wrappers.test.tsx
new file mode 100644
index 0000000..5c3e20a
--- /dev/null
+++ b/test/wrappers.test.tsx
@@ -0,0 +1,72 @@
+// Verifies the generated @lit/react wrappers actually render their `md-*`
+// custom element through React — the core surface of the package. Uses the same
+// happy-dom harness as the transitions tests (no React Testing Library). We
+// assert what is deterministic headless: the wrapper mounts the correct,
+// upgraded custom element with a populated shadow root, and forwards children
+// to its slot. Property/event binding is exercised end-to-end by the aphrody-web gate
+// (real Chromium) since @lit/react property timing is browser-specific.
+// The ElementInternals polyfill (test/setup) lets form-associated elements upgrade.
+// oxlint-disable-next-line import/no-unassigned-import -- side effect: installs the happy-dom DOM globals this test renders into
+import "@aphrody/m3-config/test/dom";
+import { afterEach, describe, expect, test } from "bun:test";
+import * as React from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { flushSync } from "react-dom";
+
+import { MdFilledButton } from "../wrappers/button.js";
+import { MdCheckbox } from "../wrappers/checkbox.js";
+import { MdIcon } from "../wrappers/icon.js";
+import { MdCard } from "../wrappers/card.js";
+import { MdOutlinedTextField } from "../wrappers/textfield.js";
+
+let root: Root | undefined;
+let host: HTMLElement | undefined;
+
+const tick = () => new Promise((r) => setTimeout(r, 0));
+
+async function mount(node: React.ReactNode, tag: string): Promise<HTMLElement> {
+  host = document.createElement("div");
+  document.body.appendChild(host);
+  root = createRoot(host);
+  flushSync(() => root!.render(node));
+  await tick();
+  const el = host.querySelector(tag) as HTMLElement | null;
+  if (!el) throw new Error(`<${tag}> not rendered`);
+  await (el as unknown as { updateComplete?: Promise<unknown> }).updateComplete;
+  return el;
+}
+
+afterEach(() => {
+  flushSync(() => root?.unmount());
+  host?.remove();
+  root = undefined;
+  host = undefined;
+});
+
+describe("generated wrappers render their custom element", () => {
+  test("MdFilledButton mounts an upgraded <md-filled-button> with a shadow root", async () => {
+    const el = await mount(<MdFilledButton>Click</MdFilledButton>, "md-filled-button");
+    expect(customElements.get("md-filled-button")).toBeDefined();
+    expect(el.shadowRoot).toBeTruthy();
+    expect(el.shadowRoot!.childNodes.length).toBeGreaterThan(0);
+  });
+
+  test("MdCheckbox (form-associated, ElementInternals) upgrades and renders", async () => {
+    const el = await mount(<MdCheckbox />, "md-checkbox");
+    expect(el.shadowRoot).toBeTruthy();
+    // attachInternals() succeeded (form association) — proves the polyfill path.
+    expect(el.shadowRoot!.childNodes.length).toBeGreaterThan(0);
+  });
+
+  test("MdIcon forwards children to its slot", async () => {
+    const el = await mount(<MdIcon>home</MdIcon>, "md-icon");
+    expect(el.textContent).toContain("home");
+  });
+
+  test("MdCard and MdOutlinedTextField mount their elements", async () => {
+    expect((await mount(<MdCard />, "md-card")).shadowRoot).toBeTruthy();
+    expect(
+      (await mount(<MdOutlinedTextField />, "md-outlined-text-field")).shadowRoot,
+    ).toBeTruthy();
+  });
+});
diff --git a/transitions/Collapse.tsx b/transitions/Collapse.tsx
new file mode 100644
index 0000000..c31f259
--- /dev/null
+++ b/transitions/Collapse.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as React from "react";
+
+import { EASING } from "./create-transition.js";
+import { BaseTransitionProps, useTransitionProps } from "./use-transition-state.js";
+
+export interface CollapseProps extends BaseTransitionProps {
+  /** The axis along which to collapse. Defaults to `vertical` (height). */
+  orientation?: "vertical" | "horizontal";
+  /**
+   * The size to keep visible while collapsed (e.g. `'0px'` or `'40px'` for a
+   * peeking header). Defaults to `'0px'`.
+   */
+  collapsedSize?: string;
+}
+
+/**
+ * Collapses its child along one axis by animating its measured size between
+ * `collapsedSize` and its natural extent. The MUI `Collapse` equivalent.
+ *
+ * The child is wrapped in a clipping container so that overflow is hidden
+ * during the animation. The natural size is measured from a live ref each
+ * commit, so dynamic content is handled.
+ */
+export function Collapse(props: CollapseProps): React.ReactElement | null {
+  const { orientation = "vertical", collapsedSize = "0px", children } = props;
+  const { mounted, phase, visible, durationMs } = useTransitionProps(props, 300, 250);
+
+  const innerRef = React.useRef<HTMLDivElement>(null);
+  const [naturalSize, setNaturalSize] = React.useState<number>(0);
+  const isHorizontal = orientation === "horizontal";
+
+  // Measure the child's natural extent before paint whenever it should be
+  // shown, so the enter animation has a concrete target size.
+  React.useLayoutEffect(() => {
+    const node = innerRef.current;
+    if (!node) {
+      return;
+    }
+    const measured = isHorizontal ? node.scrollWidth : node.scrollHeight;
+    setNaturalSize(measured);
+    // oxlint-disable-next-line react/exhaustive-effect-dependencies -- phase and children are re-measurement triggers: the natural size changes with them although the body does not read them
+  }, [isHorizontal, phase, children]);
+
+  if (!mounted) {
+    return null;
+  }
+
+  const sizeProp = isHorizontal ? "width" : "height";
+  // `entered` lets the content size itself naturally (responsive); the other
+  // phases use an explicit pixel size so the transition can interpolate.
+  const targetSize = phase === "entered" ? "auto" : visible ? `${naturalSize}px` : collapsedSize;
+
+  const containerStyle: React.CSSProperties = {
+    [sizeProp]: targetSize,
+    overflow: "hidden",
+    transition: `${sizeProp} ${durationMs}ms ${EASING.standard}`,
+    willChange: sizeProp,
+  };
+
+  const innerStyle: React.CSSProperties = isHorizontal
+    ? { display: "inline-block", height: "100%" }
+    : {};
+
+  return (
+    <div
+      style={containerStyle}
+      inert={!visible && collapsedSize === "0px"}
+      aria-hidden={!visible && collapsedSize === "0px"}
+    >
+      <div ref={innerRef} style={innerStyle}>
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/transitions/Fade.tsx b/transitions/Fade.tsx
new file mode 100644
index 0000000..28da6fb
--- /dev/null
+++ b/transitions/Fade.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createTransition, EASING } from "./create-transition.js";
+
+/**
+ * Fades its child in and out by animating `opacity`, using M3 motion tokens.
+ * The MUI `Fade` equivalent.
+ */
+export const Fade = createTransition("Fade", {
+  enter: { easing: EASING.standardDecelerate, fallbackMs: 250 },
+  exit: { easing: EASING.standardAccelerate, fallbackMs: 200 },
+  properties: ["opacity"],
+  style: ({ visible }) => ({ opacity: visible ? 1 : 0 }),
+});
diff --git a/transitions/Grow.tsx b/transitions/Grow.tsx
new file mode 100644
index 0000000..2550439
--- /dev/null
+++ b/transitions/Grow.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createTransition, EASING } from "./create-transition.js";
+
+/**
+ * Scales its child up from a small, faded state and fades/scales it back out.
+ * Combines opacity with a `transform: scale()`, like the MUI `Grow`.
+ */
+export const Grow = createTransition("Grow", {
+  enter: { easing: EASING.emphasizedDecelerate, fallbackMs: 300 },
+  exit: { easing: EASING.emphasizedAccelerate, fallbackMs: 200 },
+  properties: ["opacity", "transform"],
+  style: ({ visible, childStyle }) => ({
+    opacity: visible ? 1 : 0,
+    transform: visible ? "scale(1)" : "scale(0.75)",
+    transformOrigin: childStyle?.transformOrigin ?? "center center",
+  }),
+});
diff --git a/transitions/Slide.tsx b/transitions/Slide.tsx
new file mode 100644
index 0000000..102aac8
--- /dev/null
+++ b/transitions/Slide.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createTransition, EASING } from "./create-transition.js";
+import type { BaseTransitionProps } from "./use-transition-state.js";
+
+/** The edge the child slides in from. */
+export type SlideDirection = "left" | "right" | "up" | "down";
+
+export interface SlideProps extends BaseTransitionProps {
+  /**
+   * The edge the child enters from (and exits toward). Defaults to `down`,
+   * i.e. the child starts below its resting position and slides up into view.
+   */
+  direction?: SlideDirection;
+  /**
+   * The off-screen offset used while hidden. Accepts any CSS length; defaults
+   * to `100%` of the element's own size on the relevant axis.
+   */
+  offset?: string;
+}
+
+function hiddenTransform(direction: SlideDirection, offset: string): string {
+  switch (direction) {
+    case "left":
+      return `translateX(${offset})`;
+    case "right":
+      return `translateX(-${offset})`;
+    case "up":
+      return `translateY(${offset})`;
+    case "down":
+    default:
+      return `translateY(-${offset})`;
+  }
+}
+
+/**
+ * Slides its child in from a screen edge and back out, animating `transform`.
+ * The MUI `Slide` equivalent.
+ */
+export const Slide = createTransition<SlideProps>("Slide", {
+  enter: { easing: EASING.emphasizedDecelerate, fallbackMs: 300 },
+  exit: { easing: EASING.emphasizedAccelerate, fallbackMs: 200 },
+  properties: ["transform"],
+  style: ({ visible, props }) => ({
+    transform: visible
+      ? "translate(0, 0)"
+      : hiddenTransform(props.direction ?? "down", props.offset ?? "100%"),
+  }),
+});
diff --git a/transitions/Zoom.tsx b/transitions/Zoom.tsx
new file mode 100644
index 0000000..133885a
--- /dev/null
+++ b/transitions/Zoom.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createTransition, EASING } from "./create-transition.js";
+
+/**
+ * Zooms its child in from scale 0 to its natural size and back out, animating
+ * only `transform`. The MUI `Zoom` equivalent.
+ */
+export const Zoom = createTransition("Zoom", {
+  enter: { easing: EASING.emphasizedDecelerate, fallbackMs: 250 },
+  exit: { easing: EASING.emphasizedAccelerate, fallbackMs: 200 },
+  properties: ["transform"],
+  style: ({ visible, childStyle }) => ({
+    transform: visible ? "scale(1)" : "scale(0)",
+    transformOrigin: childStyle?.transformOrigin ?? "center center",
+  }),
+});
diff --git a/transitions/create-transition.tsx b/transitions/create-transition.tsx
new file mode 100644
index 0000000..27bf29a
--- /dev/null
+++ b/transitions/create-transition.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as React from "react";
+
+import { BaseTransitionProps, useTransitionProps } from "./use-transition-state.js";
+
+/** M3 easing tokens with their spec values as fallbacks. */
+export const EASING = {
+  standard: "var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))",
+  standardDecelerate: "var(--md-sys-motion-easing-standard-decelerate, cubic-bezier(0, 0, 0, 1))",
+  standardAccelerate: "var(--md-sys-motion-easing-standard-accelerate, cubic-bezier(0.3, 0, 1, 1))",
+  emphasizedDecelerate:
+    "var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1))",
+  emphasizedAccelerate:
+    "var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15))",
+} as const;
+
+/** How one style transition looks; everything else (state machine, cloning, timing) is shared. */
+export interface TransitionSpec<P extends BaseTransitionProps> {
+  enter: { easing: string; fallbackMs: number };
+  exit: { easing: string; fallbackMs: number };
+  /** CSS properties that animate, in `transition` / `will-change` order. */
+  properties: readonly string[];
+  /** The values of those properties for the current visual state. */
+  style(state: {
+    visible: boolean;
+    childStyle: React.CSSProperties | undefined;
+    props: P;
+  }): React.CSSProperties;
+}
+
+/**
+ * Builds a transition component that clones its single child with an inline style: the visual
+ * state comes from `spec.style`, the `transition` and `will-change` declarations from the spec.
+ */
+export function createTransition<P extends BaseTransitionProps = BaseTransitionProps>(
+  name: string,
+  spec: TransitionSpec<P>,
+): (props: P) => React.ReactElement | null {
+  const willChange = spec.properties.join(", ");
+  function Transition(props: P): React.ReactElement | null {
+    const { mounted, visible, durationMs } = useTransitionProps(
+      props,
+      spec.enter.fallbackMs,
+      spec.exit.fallbackMs,
+    );
+    if (!mounted) {
+      return null;
+    }
+    const easing = visible ? spec.enter.easing : spec.exit.easing;
+    const childStyle = (props.children.props as { style?: React.CSSProperties }).style;
+    const style: React.CSSProperties = {
+      ...childStyle,
+      ...spec.style({ visible, childStyle, props }),
+      transition: spec.properties.map((p) => `${p} ${durationMs}ms ${easing}`).join(", "),
+      willChange,
+    };
+    const childProps = props.children.props as React.HTMLAttributes<HTMLElement>;
+    return React.cloneElement(props.children, {
+      style,
+      inert: !visible || childProps.inert,
+      "aria-hidden": !visible || childProps["aria-hidden"],
+    } as React.HTMLAttributes<HTMLElement>);
+  }
+  Transition.displayName = name;
+  return Transition;
+}
diff --git a/transitions/index.ts b/transitions/index.ts
new file mode 100644
index 0000000..4d46331
--- /dev/null
+++ b/transitions/index.ts
@@ -0,0 +1,20 @@
+"use client";
+
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { Collapse } from "./Collapse.js";
+export type { CollapseProps } from "./Collapse.js";
+export { Fade } from "./Fade.js";
+export { Grow } from "./Grow.js";
+export { Slide } from "./Slide.js";
+export type { SlideDirection, SlideProps } from "./Slide.js";
+export { Zoom } from "./Zoom.js";
+export type {
+  BaseTransitionProps,
+  TransitionPhase,
+  TransitionTimeout,
+} from "./use-transition-state.js";
diff --git a/transitions/use-transition-state.ts b/transitions/use-transition-state.ts
new file mode 100644
index 0000000..4818214
--- /dev/null
+++ b/transitions/use-transition-state.ts
@@ -0,0 +1,233 @@
+"use client";
+
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as React from "react";
+
+/**
+ * Resolves an MUI-style `timeout` (a single duration or per-direction
+ * durations) to the millisecond value for the given direction.
+ */
+export type TransitionTimeout = number | { appear?: number; enter?: number; exit?: number };
+
+export function resolveTimeout(
+  timeout: TransitionTimeout | undefined,
+  direction: "appear" | "enter" | "exit",
+  fallback: number,
+): number {
+  if (timeout == null) {
+    return fallback;
+  }
+  if (typeof timeout === "number") {
+    return timeout;
+  }
+  if (direction === "appear") {
+    return timeout.appear ?? timeout.enter ?? fallback;
+  }
+  return timeout[direction] ?? fallback;
+}
+
+/** The discrete lifecycle phases of a transition. */
+export type TransitionPhase = "entering" | "entered" | "exiting" | "exited";
+
+/** Props shared by every transition component. */
+export interface BaseTransitionProps {
+  /** Whether the child should be shown. */
+  in: boolean;
+  /**
+   * Duration in ms, or per-direction durations. When omitted, the component's
+   * M3 motion-token default is used.
+   */
+  timeout?: TransitionTimeout;
+  /** Animate on the initial mount when `in` is already true. */
+  appear?: boolean;
+  /** Keep the child mounted while hidden instead of unmounting it. */
+  mountOnEnter?: boolean;
+  /** Unmount the child once it has finished exiting. */
+  unmountOnExit?: boolean;
+  /** The single React element to animate. */
+  children: React.ReactElement;
+}
+
+export interface UseTransitionStateResult {
+  /** Whether the child should currently be rendered in the tree. */
+  mounted: boolean;
+  /** The current lifecycle phase. */
+  phase: TransitionPhase;
+  /** Whether this is the very first commit (used to gate `appear`). */
+  isAppearing: boolean;
+  /** Call from the element's `onTransitionEnd` to settle the phase. */
+  handleTransitionEnd: () => void;
+}
+
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+
+function subscribeReducedMotion(onChange: () => void): () => void {
+  if (typeof window === "undefined" || !window.matchMedia) return () => {};
+  const media = window.matchMedia(REDUCED_MOTION_QUERY);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+
+function useReducedMotion(): boolean {
+  return React.useSyncExternalStore(
+    subscribeReducedMotion,
+    () => typeof window !== "undefined" && !!window.matchMedia?.(REDUCED_MOTION_QUERY).matches,
+    () => false,
+  );
+}
+
+/**
+ * Drives mount/unmount and entering/entered/exiting/exited phases from the
+ * boolean `in` prop, using a small internal state machine. No external
+ * dependency. SSR-safe (effects run only on the client).
+ */
+export function useTransitionState(
+  inProp: boolean,
+  {
+    appear = false,
+    mountOnEnter = false,
+    unmountOnExit = false,
+    enterTimeout,
+    exitTimeout,
+    appearTimeout = enterTimeout,
+    onEntered,
+    onExited,
+  }: {
+    appear?: boolean;
+    mountOnEnter?: boolean;
+    unmountOnExit?: boolean;
+    enterTimeout: number;
+    exitTimeout: number;
+    appearTimeout?: number;
+    onEntered?: () => void;
+    onExited?: () => void;
+  },
+): UseTransitionStateResult {
+  const firstRender = React.useRef(true);
+  const initialSteady = React.useRef(!inProp || !appear);
+  const initialIn = React.useRef(inProp);
+  const appearing = React.useRef(inProp && appear);
+  const callbacks = React.useRef({ onEntered, onExited });
+  callbacks.current = { onEntered, onExited };
+
+  const [phase, setPhase] = React.useState<TransitionPhase>(() => {
+    if (inProp) {
+      return appear ? "exited" : "entered";
+    }
+    return "exited";
+  });
+
+  // Whether the element is in the DOM at all.
+  const [mounted, setMounted] = React.useState(() => inProp || (!mountOnEnter && !unmountOnExit));
+
+  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const settlement = React.useRef<(() => void) | undefined>(undefined);
+  const clear = () => {
+    if (timer.current !== undefined) {
+      clearTimeout(timer.current);
+      timer.current = undefined;
+    }
+  };
+
+  React.useEffect(() => {
+    const initial = firstRender.current;
+    firstRender.current = false;
+    // A steady initial state must not start a transition or fire its callback.
+    if (initialIn.current !== inProp) initialSteady.current = false;
+    if ((initial && (!inProp || !appear)) || initialSteady.current) return clear;
+    let cancelled = false;
+    let settled = false;
+    let raf: number | undefined;
+    const duration = inProp ? (appearing.current ? appearTimeout : enterTimeout) : exitTimeout;
+    const settle = () => {
+      if (cancelled || settled) return;
+      settled = true;
+      clear();
+      appearing.current = false;
+      setPhase(inProp ? "entered" : "exited");
+      if (!inProp && unmountOnExit) setMounted(false);
+      (inProp ? callbacks.current.onEntered : callbacks.current.onExited)?.();
+    };
+    settlement.current = settle;
+    clear();
+    if (inProp) {
+      setMounted(true);
+      if (duration <= 0) settle();
+      else {
+        // Commit the hidden state before entering so browsers can interpolate.
+        setPhase("exited");
+        raf = requestAnimationFrame(() => {
+          setPhase("entering");
+          timer.current = setTimeout(settle, duration);
+        });
+      }
+    } else {
+      appearing.current = false;
+      setPhase("exiting");
+      if (duration <= 0) settle();
+      else timer.current = setTimeout(settle, duration);
+    }
+    return () => {
+      cancelled = true;
+      settlement.current = undefined;
+      if (raf !== undefined) cancelAnimationFrame(raf);
+      clear();
+    };
+    // Callbacks are kept current without restarting an animation on every render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inProp, enterTimeout, exitTimeout, appearTimeout, unmountOnExit]);
+
+  const handleTransitionEnd = React.useCallback(() => {
+    if (phase === "entering" || phase === "exiting") settlement.current?.();
+  }, [phase]);
+
+  return { mounted, phase, isAppearing: appearing.current, handleTransitionEnd };
+}
+
+/** True while the element should be in its "shown" visual state. */
+export function isVisible(phase: TransitionPhase): boolean {
+  return phase === "entering" || phase === "entered";
+}
+
+/**
+ * What every transition component derives from its props: the resolved enter/exit durations,
+ * the state machine and the current visual state. `durationMs` is the one of the running direction.
+ */
+export function useTransitionProps(
+  props: BaseTransitionProps,
+  enterFallbackMs: number,
+  exitFallbackMs: number,
+) {
+  const {
+    in: inProp,
+    timeout,
+    appear = false,
+    mountOnEnter = false,
+    unmountOnExit = false,
+  } = props;
+  const reduced = useReducedMotion();
+  const enterMs = reduced ? 0 : resolveTimeout(timeout, "enter", enterFallbackMs);
+  const exitMs = reduced ? 0 : resolveTimeout(timeout, "exit", exitFallbackMs);
+  const appearMs = reduced ? 0 : resolveTimeout(timeout, "appear", enterFallbackMs);
+  const { mounted, phase, isAppearing } = useTransitionState(inProp, {
+    appear,
+    mountOnEnter,
+    unmountOnExit,
+    enterTimeout: enterMs,
+    exitTimeout: exitMs,
+    appearTimeout: appearMs,
+  });
+  const resolvedPhase = reduced ? (inProp ? "entered" : "exited") : phase;
+  const visible = isVisible(resolvedPhase);
+  return {
+    mounted: reduced ? inProp || (!mountOnEnter && !unmountOnExit) : mounted,
+    phase: resolvedPhase,
+    visible,
+    durationMs: isAppearing ? appearMs : visible ? enterMs : exitMs,
+  };
+}
diff --git a/tsconfig.build.json b/tsconfig.build.json
new file mode 100644
index 0000000..39f4670
--- /dev/null
+++ b/tsconfig.build.json
@@ -0,0 +1,27 @@
+{
+  "extends": [
+    "./tsconfig.json",
+    "@aphrody/m3-config/tsconfig.build.json"
+  ],
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "."
+  },
+  "include": [
+    "index.ts",
+    "wrappers/**/*.ts",
+    "transitions/**/*.ts",
+    "transitions/**/*.tsx",
+    "adaptive/**/*.ts",
+    "state/**/*.ts",
+    "adapters/**/*.ts",
+    "data/**/*.ts",
+    "data/**/*.tsx",
+    "material-web-shims.d.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "generate.ts",
+    "dist"
+  ]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..9c2451b
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,38 @@
+{
+  "extends": "@aphrody/m3-config/tsconfig.json",
+  "compilerOptions": {
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable",
+      "ESNext.Disposable"
+    ],
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "verbatimModuleSyntax": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "types": [
+      "react",
+      "react-dom"
+    ]
+  },
+  "include": [
+    "index.ts",
+    "wrappers/**/*.ts",
+    "transitions/**/*.ts",
+    "transitions/**/*.tsx",
+    "adaptive/**/*.ts",
+    "state/**/*.ts",
+    "data/**/*.ts",
+    "data/**/*.tsx",
+    "*.ts",
+    "*.d.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "generate.ts",
+    "tsup.config.ts"
+  ]
+}
diff --git a/wrappers/alert.ts b/wrappers/alert.ts
new file mode 100644
index 0000000..a3d3723
--- /dev/null
+++ b/wrappers/alert.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdAlert as MdAlertElement} from '@aphrody/material-web/alert/alert.js';
+
+export const MdAlert = createComponent({
+  react: React,
+  tagName: 'md-alert',
+  elementClass: MdAlertElement,
+  events: {onClose: 'close'},
+});
diff --git a/wrappers/appbar.ts b/wrappers/appbar.ts
new file mode 100644
index 0000000..1924290
--- /dev/null
+++ b/wrappers/appbar.ts
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdBottomAppBar as MdBottomAppBarElement} from '@aphrody/material-web/appbar/bottom-app-bar.js';
+import {MdTopAppBar as MdTopAppBarElement} from '@aphrody/material-web/appbar/top-app-bar.js';
+
+export const MdBottomAppBar = createComponent({
+  react: React,
+  tagName: 'md-bottom-app-bar',
+  elementClass: MdBottomAppBarElement,
+  events: {},
+});
+
+export const MdTopAppBar = createComponent({
+  react: React,
+  tagName: 'md-top-app-bar',
+  elementClass: MdTopAppBarElement,
+  events: {},
+});
diff --git a/wrappers/autocomplete.ts b/wrappers/autocomplete.ts
new file mode 100644
index 0000000..8b828f0
--- /dev/null
+++ b/wrappers/autocomplete.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdAutocomplete as MdAutocompleteElement} from '@aphrody/material-web/autocomplete/autocomplete.js';
+
+export const MdAutocomplete = createComponent({
+  react: React,
+  tagName: 'md-autocomplete',
+  elementClass: MdAutocompleteElement,
+  events: {onInput: 'input', onSelect: 'autocomplete:select'},
+});
diff --git a/wrappers/avatar.ts b/wrappers/avatar.ts
new file mode 100644
index 0000000..65c756e
--- /dev/null
+++ b/wrappers/avatar.ts
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdAvatar as MdAvatarElement} from '@aphrody/material-web/avatar/avatar.js';
+import {MdAvatarGroup as MdAvatarGroupElement} from '@aphrody/material-web/avatar/avatar-group.js';
+
+export const MdAvatar = createComponent({
+  react: React,
+  tagName: 'md-avatar',
+  elementClass: MdAvatarElement,
+  events: {onError: 'error'},
+});
+
+export const MdAvatarGroup = createComponent({
+  react: React,
+  tagName: 'md-avatar-group',
+  elementClass: MdAvatarGroupElement,
+  events: {},
+});
diff --git a/wrappers/backdrop.ts b/wrappers/backdrop.ts
new file mode 100644
index 0000000..3c2b4ca
--- /dev/null
+++ b/wrappers/backdrop.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdBackdrop as MdBackdropElement} from '@aphrody/material-web/backdrop/backdrop.js';
+
+export const MdBackdrop = createComponent({
+  react: React,
+  tagName: 'md-backdrop',
+  elementClass: MdBackdropElement,
+  events: {},
+});
diff --git a/wrappers/badge.ts b/wrappers/badge.ts
new file mode 100644
index 0000000..6f5e610
--- /dev/null
+++ b/wrappers/badge.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdBadge as MdBadgeElement} from '@aphrody/material-web/badge/badge.js';
+
+export const MdBadge = createComponent({
+  react: React,
+  tagName: 'md-badge',
+  elementClass: MdBadgeElement,
+  events: {},
+});
diff --git a/wrappers/banner.ts b/wrappers/banner.ts
new file mode 100644
index 0000000..dc3b299
--- /dev/null
+++ b/wrappers/banner.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdBanner as MdBannerElement} from '@aphrody/material-web/banner/banner.js';
+
+export const MdBanner = createComponent({
+  react: React,
+  tagName: 'md-banner',
+  elementClass: MdBannerElement,
+  events: {onClose: 'close'},
+});
diff --git a/wrappers/breadcrumbs.ts b/wrappers/breadcrumbs.ts
new file mode 100644
index 0000000..e8807f5
--- /dev/null
+++ b/wrappers/breadcrumbs.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdBreadcrumbs as MdBreadcrumbsElement} from '@aphrody/material-web/breadcrumbs/breadcrumbs.js';
+
+export const MdBreadcrumbs = createComponent({
+  react: React,
+  tagName: 'md-breadcrumbs',
+  elementClass: MdBreadcrumbsElement,
+  events: {},
+});
diff --git a/wrappers/button.ts b/wrappers/button.ts
new file mode 100644
index 0000000..49827b1
--- /dev/null
+++ b/wrappers/button.ts
@@ -0,0 +1,45 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdElevatedButton as MdElevatedButtonElement} from '@aphrody/material-web/button/elevated-button.js';
+import {MdFilledButton as MdFilledButtonElement} from '@aphrody/material-web/button/filled-button.js';
+import {MdFilledTonalButton as MdFilledTonalButtonElement} from '@aphrody/material-web/button/filled-tonal-button.js';
+import {MdOutlinedButton as MdOutlinedButtonElement} from '@aphrody/material-web/button/outlined-button.js';
+import {MdTextButton as MdTextButtonElement} from '@aphrody/material-web/button/text-button.js';
+
+export const MdElevatedButton = createComponent({
+  react: React,
+  tagName: 'md-elevated-button',
+  elementClass: MdElevatedButtonElement,
+  events: {},
+});
+
+export const MdFilledButton = createComponent({
+  react: React,
+  tagName: 'md-filled-button',
+  elementClass: MdFilledButtonElement,
+  events: {},
+});
+
+export const MdFilledTonalButton = createComponent({
+  react: React,
+  tagName: 'md-filled-tonal-button',
+  elementClass: MdFilledTonalButtonElement,
+  events: {},
+});
+
+export const MdOutlinedButton = createComponent({
+  react: React,
+  tagName: 'md-outlined-button',
+  elementClass: MdOutlinedButtonElement,
+  events: {},
+});
+
+export const MdTextButton = createComponent({
+  react: React,
+  tagName: 'md-text-button',
+  elementClass: MdTextButtonElement,
+  events: {},
+});
diff --git a/wrappers/buttongroup.ts b/wrappers/buttongroup.ts
new file mode 100644
index 0000000..810d441
--- /dev/null
+++ b/wrappers/buttongroup.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdButtonGroup as MdButtonGroupElement} from '@aphrody/material-web/buttongroup/button-group.js';
+
+export const MdButtonGroup = createComponent({
+  react: React,
+  tagName: 'md-button-group',
+  elementClass: MdButtonGroupElement,
+  events: {onChange: 'button-group:change'},
+});
diff --git a/wrappers/canvas3d.ts b/wrappers/canvas3d.ts
new file mode 100644
index 0000000..71c5d67
--- /dev/null
+++ b/wrappers/canvas3d.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {M3Canvas3D as Md3dCanvasElement} from '@aphrody/material-web/canvas3d/canvas-3d.js';
+
+export const Md3dCanvas = createComponent({
+  react: React,
+  tagName: 'md-3d-canvas',
+  elementClass: Md3dCanvasElement,
+  events: {},
+});
diff --git a/wrappers/card.ts b/wrappers/card.ts
new file mode 100644
index 0000000..4385dfb
--- /dev/null
+++ b/wrappers/card.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdCard as MdCardElement} from '@aphrody/material-web/card/card.js';
+
+export const MdCard = createComponent({
+  react: React,
+  tagName: 'md-card',
+  elementClass: MdCardElement,
+  events: {},
+});
diff --git a/wrappers/card3d.ts b/wrappers/card3d.ts
new file mode 100644
index 0000000..8307a9f
--- /dev/null
+++ b/wrappers/card3d.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {M3Card3D as Md3dCardElement} from '@aphrody/material-web/card3d/card-3d.js';
+
+export const Md3dCard = createComponent({
+  react: React,
+  tagName: 'md-3d-card',
+  elementClass: Md3dCardElement,
+  events: {},
+});
diff --git a/wrappers/carousel.ts b/wrappers/carousel.ts
new file mode 100644
index 0000000..7bff2d9
--- /dev/null
+++ b/wrappers/carousel.ts
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdCarousel as MdCarouselElement} from '@aphrody/material-web/carousel/carousel.js';
+import {MdCarouselItem as MdCarouselItemElement} from '@aphrody/material-web/carousel/carousel-item.js';
+
+export const MdCarousel = createComponent({
+  react: React,
+  tagName: 'md-carousel',
+  elementClass: MdCarouselElement,
+  events: {onChange: 'carousel-change'},
+});
+
+export const MdCarouselItem = createComponent({
+  react: React,
+  tagName: 'md-carousel-item',
+  elementClass: MdCarouselItemElement,
+  events: {},
+});
diff --git a/wrappers/charts.ts b/wrappers/charts.ts
new file mode 100644
index 0000000..dfa1de8
--- /dev/null
+++ b/wrappers/charts.ts
@@ -0,0 +1,69 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdLineChart as MdLineChartElement} from '@aphrody/material-web/charts/line-chart.js';
+import {MdBarChart as MdBarChartElement} from '@aphrody/material-web/charts/bar-chart.js';
+import {MdPieChart as MdPieChartElement} from '@aphrody/material-web/charts/pie-chart.js';
+import {MdAreaChart as MdAreaChartElement} from '@aphrody/material-web/charts/area-chart.js';
+import {MdSparkline as MdSparklineElement} from '@aphrody/material-web/charts/sparkline.js';
+import {MdGauge as MdGaugeElement} from '@aphrody/material-web/charts/gauge.js';
+import {MdScatterChart as MdScatterChartElement} from '@aphrody/material-web/charts/scatter-chart.js';
+import {MdRadarChart as MdRadarChartElement} from '@aphrody/material-web/charts/radar-chart.js';
+
+export const MdLineChart = createComponent({
+  react: React,
+  tagName: 'md-line-chart',
+  elementClass: MdLineChartElement,
+  events: {},
+});
+
+export const MdBarChart = createComponent({
+  react: React,
+  tagName: 'md-bar-chart',
+  elementClass: MdBarChartElement,
+  events: {},
+});
+
+export const MdPieChart = createComponent({
+  react: React,
+  tagName: 'md-pie-chart',
+  elementClass: MdPieChartElement,
+  events: {},
+});
+
+export const MdAreaChart = createComponent({
+  react: React,
+  tagName: 'md-area-chart',
+  elementClass: MdAreaChartElement,
+  events: {},
+});
+
+export const MdSparkline = createComponent({
+  react: React,
+  tagName: 'md-sparkline',
+  elementClass: MdSparklineElement,
+  events: {},
+});
+
+export const MdGauge = createComponent({
+  react: React,
+  tagName: 'md-gauge',
+  elementClass: MdGaugeElement,
+  events: {},
+});
+
+export const MdScatterChart = createComponent({
+  react: React,
+  tagName: 'md-scatter-chart',
+  elementClass: MdScatterChartElement,
+  events: {},
+});
+
+export const MdRadarChart = createComponent({
+  react: React,
+  tagName: 'md-radar-chart',
+  elementClass: MdRadarChartElement,
+  events: {},
+});
diff --git a/wrappers/checkbox.ts b/wrappers/checkbox.ts
new file mode 100644
index 0000000..1907c67
--- /dev/null
+++ b/wrappers/checkbox.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdCheckbox as MdCheckboxElement} from '@aphrody/material-web/checkbox/checkbox.js';
+
+export const MdCheckbox = createComponent({
+  react: React,
+  tagName: 'md-checkbox',
+  elementClass: MdCheckboxElement,
+  events: {onChange: 'change', onInput: 'input'},
+});
diff --git a/wrappers/chips.ts b/wrappers/chips.ts
new file mode 100644
index 0000000..b5de3dd
--- /dev/null
+++ b/wrappers/chips.ts
@@ -0,0 +1,45 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdAssistChip as MdAssistChipElement} from '@aphrody/material-web/chips/assist-chip.js';
+import {MdChipSet as MdChipSetElement} from '@aphrody/material-web/chips/chip-set.js';
+import {MdFilterChip as MdFilterChipElement} from '@aphrody/material-web/chips/filter-chip.js';
+import {MdInputChip as MdInputChipElement} from '@aphrody/material-web/chips/input-chip.js';
+import {MdSuggestionChip as MdSuggestionChipElement} from '@aphrody/material-web/chips/suggestion-chip.js';
+
+export const MdAssistChip = createComponent({
+  react: React,
+  tagName: 'md-assist-chip',
+  elementClass: MdAssistChipElement,
+  events: {},
+});
+
+export const MdChipSet = createComponent({
+  react: React,
+  tagName: 'md-chip-set',
+  elementClass: MdChipSetElement,
+  events: {},
+});
+
+export const MdFilterChip = createComponent({
+  react: React,
+  tagName: 'md-filter-chip',
+  elementClass: MdFilterChipElement,
+  events: {},
+});
+
+export const MdInputChip = createComponent({
+  react: React,
+  tagName: 'md-input-chip',
+  elementClass: MdInputChipElement,
+  events: {onRemove: 'remove', onUpdateFocus: 'update-focus'},
+});
+
+export const MdSuggestionChip = createComponent({
+  react: React,
+  tagName: 'md-suggestion-chip',
+  elementClass: MdSuggestionChipElement,
+  events: {},
+});
diff --git a/wrappers/datepicker.ts b/wrappers/datepicker.ts
new file mode 100644
index 0000000..eab821e
--- /dev/null
+++ b/wrappers/datepicker.ts
@@ -0,0 +1,29 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdDatePicker as MdDatePickerElement} from '@aphrody/material-web/datepicker/date-picker.js';
+import {MdDateRangePicker as MdDateRangePickerElement} from '@aphrody/material-web/datepicker/date-range-picker.js';
+import {MdDateTimePicker as MdDateTimePickerElement} from '@aphrody/material-web/datepicker/date-time-picker.js';
+
+export const MdDatePicker = createComponent({
+  react: React,
+  tagName: 'md-date-picker',
+  elementClass: MdDatePickerElement,
+  events: {onChange: 'date-picker:change'},
+});
+
+export const MdDateRangePicker = createComponent({
+  react: React,
+  tagName: 'md-date-range-picker',
+  elementClass: MdDateRangePickerElement,
+  events: {onInput: 'input', onChange: 'change', onDateRangeChange: 'date-range-picker:change'},
+});
+
+export const MdDateTimePicker = createComponent({
+  react: React,
+  tagName: 'md-date-time-picker',
+  elementClass: MdDateTimePickerElement,
+  events: {onInput: 'input', onChange: 'change', onDateTimeChange: 'date-time-picker:change'},
+});
diff --git a/wrappers/dialog.ts b/wrappers/dialog.ts
new file mode 100644
index 0000000..4eb8950
--- /dev/null
+++ b/wrappers/dialog.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdDialog as MdDialogElement} from '@aphrody/material-web/dialog/dialog.js';
+
+export const MdDialog = createComponent({
+  react: React,
+  tagName: 'md-dialog',
+  elementClass: MdDialogElement,
+  events: {onOpen: 'open', onOpened: 'opened', onClose: 'close', onClosed: 'closed', onCancel: 'cancel'},
+});
diff --git a/wrappers/divider.ts b/wrappers/divider.ts
new file mode 100644
index 0000000..b227723
--- /dev/null
+++ b/wrappers/divider.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdDivider as MdDividerElement} from '@aphrody/material-web/divider/divider.js';
+
+export const MdDivider = createComponent({
+  react: React,
+  tagName: 'md-divider',
+  elementClass: MdDividerElement,
+  events: {},
+});
diff --git a/wrappers/effects.ts b/wrappers/effects.ts
new file mode 100644
index 0000000..818a47d
--- /dev/null
+++ b/wrappers/effects.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdWebgpuCanvas as MdWebgpuCanvasElement} from '@aphrody/material-web/effects/webgpu-canvas.js';
+
+export const MdWebgpuCanvas = createComponent({
+  react: React,
+  tagName: 'md-webgpu-canvas',
+  elementClass: MdWebgpuCanvasElement,
+  events: {},
+});
diff --git a/wrappers/elevation.ts b/wrappers/elevation.ts
new file mode 100644
index 0000000..a61a72b
--- /dev/null
+++ b/wrappers/elevation.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdElevation as MdElevationElement} from '@aphrody/material-web/elevation/elevation.js';
+
+export const MdElevation = createComponent({
+  react: React,
+  tagName: 'md-elevation',
+  elementClass: MdElevationElement,
+  events: {},
+});
diff --git a/wrappers/expansion.ts b/wrappers/expansion.ts
new file mode 100644
index 0000000..7d8276f
--- /dev/null
+++ b/wrappers/expansion.ts
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdAccordion as MdAccordionElement} from '@aphrody/material-web/expansion/accordion.js';
+import {MdExpansionPanel as MdExpansionPanelElement} from '@aphrody/material-web/expansion/expansion-panel.js';
+
+export const MdAccordion = createComponent({
+  react: React,
+  tagName: 'md-accordion',
+  elementClass: MdAccordionElement,
+  events: {},
+});
+
+export const MdExpansionPanel = createComponent({
+  react: React,
+  tagName: 'md-expansion-panel',
+  elementClass: MdExpansionPanelElement,
+  events: {onToggle: 'expansion:toggle'},
+});
diff --git a/wrappers/fab.ts b/wrappers/fab.ts
new file mode 100644
index 0000000..0df43bf
--- /dev/null
+++ b/wrappers/fab.ts
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdBrandedFab as MdBrandedFabElement} from '@aphrody/material-web/fab/branded-fab.js';
+import {MdFab as MdFabElement} from '@aphrody/material-web/fab/fab.js';
+
+export const MdBrandedFab = createComponent({
+  react: React,
+  tagName: 'md-branded-fab',
+  elementClass: MdBrandedFabElement,
+  events: {},
+});
+
+export const MdFab = createComponent({
+  react: React,
+  tagName: 'md-fab',
+  elementClass: MdFabElement,
+  events: {},
+});
diff --git a/wrappers/fabmenu.ts b/wrappers/fabmenu.ts
new file mode 100644
index 0000000..d1a331d
--- /dev/null
+++ b/wrappers/fabmenu.ts
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdFabMenu as MdFabMenuElement} from '@aphrody/material-web/fabmenu/fab-menu.js';
+import {MdFabMenuItem as MdFabMenuItemElement} from '@aphrody/material-web/fabmenu/fab-menu-item.js';
+
+export const MdFabMenu = createComponent({
+  react: React,
+  tagName: 'md-fab-menu',
+  elementClass: MdFabMenuElement,
+  events: {onOpen: 'fab-menu:open', onClose: 'fab-menu:close'},
+});
+
+export const MdFabMenuItem = createComponent({
+  react: React,
+  tagName: 'md-fab-menu-item',
+  elementClass: MdFabMenuItemElement,
+  events: {onClick: 'fab-menu-item:click'},
+});
diff --git a/wrappers/field.ts b/wrappers/field.ts
new file mode 100644
index 0000000..ee7a10b
--- /dev/null
+++ b/wrappers/field.ts
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdFilledField as MdFilledFieldElement} from '@aphrody/material-web/field/filled-field.js';
+import {MdOutlinedField as MdOutlinedFieldElement} from '@aphrody/material-web/field/outlined-field.js';
+
+export const MdFilledField = createComponent({
+  react: React,
+  tagName: 'md-filled-field',
+  elementClass: MdFilledFieldElement,
+  events: {},
+});
+
+export const MdOutlinedField = createComponent({
+  react: React,
+  tagName: 'md-outlined-field',
+  elementClass: MdOutlinedFieldElement,
+  events: {},
+});
diff --git a/wrappers/focus.ts b/wrappers/focus.ts
new file mode 100644
index 0000000..bfbf08a
--- /dev/null
+++ b/wrappers/focus.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdFocusRing as MdFocusRingElement} from '@aphrody/material-web/focus/md-focus-ring.js';
+
+export const MdFocusRing = createComponent({
+  react: React,
+  tagName: 'md-focus-ring',
+  elementClass: MdFocusRingElement,
+  events: {},
+});
diff --git a/wrappers/globe3d.ts b/wrappers/globe3d.ts
new file mode 100644
index 0000000..7e786b3
--- /dev/null
+++ b/wrappers/globe3d.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {M3Globe3D as Md3dGlobeElement} from '@aphrody/material-web/globe3d/globe-3d.js';
+
+export const Md3dGlobe = createComponent({
+  react: React,
+  tagName: 'md-3d-globe',
+  elementClass: Md3dGlobeElement,
+  events: {},
+});
diff --git a/wrappers/gridlist.ts b/wrappers/gridlist.ts
new file mode 100644
index 0000000..4b173b5
--- /dev/null
+++ b/wrappers/gridlist.ts
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdGridList as MdGridListElement} from '@aphrody/material-web/gridlist/grid-list.js';
+import {MdGridTile as MdGridTileElement} from '@aphrody/material-web/gridlist/grid-tile.js';
+
+export const MdGridList = createComponent({
+  react: React,
+  tagName: 'md-grid-list',
+  elementClass: MdGridListElement,
+  events: {},
+});
+
+export const MdGridTile = createComponent({
+  react: React,
+  tagName: 'md-grid-tile',
+  elementClass: MdGridTileElement,
+  events: {},
+});
diff --git a/wrappers/icon.ts b/wrappers/icon.ts
new file mode 100644
index 0000000..cae3de5
--- /dev/null
+++ b/wrappers/icon.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdIcon as MdIconElement} from '@aphrody/material-web/icon/icon.js';
+
+export const MdIcon = createComponent({
+  react: React,
+  tagName: 'md-icon',
+  elementClass: MdIconElement,
+  events: {},
+});
diff --git a/wrappers/iconbutton.ts b/wrappers/iconbutton.ts
new file mode 100644
index 0000000..2d2b304
--- /dev/null
+++ b/wrappers/iconbutton.ts
@@ -0,0 +1,37 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdFilledIconButton as MdFilledIconButtonElement} from '@aphrody/material-web/iconbutton/filled-icon-button.js';
+import {MdFilledTonalIconButton as MdFilledTonalIconButtonElement} from '@aphrody/material-web/iconbutton/filled-tonal-icon-button.js';
+import {MdIconButton as MdIconButtonElement} from '@aphrody/material-web/iconbutton/icon-button.js';
+import {MdOutlinedIconButton as MdOutlinedIconButtonElement} from '@aphrody/material-web/iconbutton/outlined-icon-button.js';
+
+export const MdFilledIconButton = createComponent({
+  react: React,
+  tagName: 'md-filled-icon-button',
+  elementClass: MdFilledIconButtonElement,
+  events: {},
+});
+
+export const MdFilledTonalIconButton = createComponent({
+  react: React,
+  tagName: 'md-filled-tonal-icon-button',
+  elementClass: MdFilledTonalIconButtonElement,
+  events: {},
+});
+
+export const MdIconButton = createComponent({
+  react: React,
+  tagName: 'md-icon-button',
+  elementClass: MdIconButtonElement,
+  events: {},
+});
+
+export const MdOutlinedIconButton = createComponent({
+  react: React,
+  tagName: 'md-outlined-icon-button',
+  elementClass: MdOutlinedIconButtonElement,
+  events: {},
+});
diff --git a/wrappers/labs.ts b/wrappers/labs.ts
new file mode 100644
index 0000000..18d8565
--- /dev/null
+++ b/wrappers/labs.ts
@@ -0,0 +1,109 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {Button as MdButtonElement} from '@aphrody/material-web/labs/gb/components/button/md-button.js';
+import {MdElevatedCard as MdElevatedCardElement} from '@aphrody/material-web/labs/card/elevated-card.js';
+import {MdFilledCard as MdFilledCardElement} from '@aphrody/material-web/labs/card/filled-card.js';
+import {MdItem as MdItemElement} from '@aphrody/material-web/labs/item/item.js';
+import {MenuGroup as MdMenuGroupElement} from '@aphrody/material-web/labs/gb/components/menu/md-menu-group.js';
+import {MdNavigationBar as MdNavigationBarElement} from '@aphrody/material-web/labs/navigationbar/navigation-bar.js';
+import {MdNavigationDrawer as MdNavigationDrawerElement} from '@aphrody/material-web/labs/navigationdrawer/navigation-drawer.js';
+import {MdNavigationDrawerModal as MdNavigationDrawerModalElement} from '@aphrody/material-web/labs/navigationdrawer/navigation-drawer-modal.js';
+import {MdNavigationTab as MdNavigationTabElement} from '@aphrody/material-web/labs/navigationtab/navigation-tab.js';
+import {MdOutlinedCard as MdOutlinedCardElement} from '@aphrody/material-web/labs/card/outlined-card.js';
+import {MdOutlinedSegmentedButton as MdOutlinedSegmentedButtonElement} from '@aphrody/material-web/labs/segmentedbutton/outlined-segmented-button.js';
+import {MdOutlinedSegmentedButtonSet as MdOutlinedSegmentedButtonSetElement} from '@aphrody/material-web/labs/segmentedbuttonset/outlined-segmented-button-set.js';
+import {SplitButton as MdSplitButtonElement} from '@aphrody/material-web/labs/gb/components/splitbutton/md-split-button.js';
+
+export const MdButton = createComponent({
+  react: React,
+  tagName: 'md-button',
+  elementClass: MdButtonElement,
+  events: {},
+});
+
+export const MdElevatedCard = createComponent({
+  react: React,
+  tagName: 'md-elevated-card',
+  elementClass: MdElevatedCardElement,
+  events: {},
+});
+
+export const MdFilledCard = createComponent({
+  react: React,
+  tagName: 'md-filled-card',
+  elementClass: MdFilledCardElement,
+  events: {},
+});
+
+export const MdItem = createComponent({
+  react: React,
+  tagName: 'md-item',
+  elementClass: MdItemElement,
+  events: {},
+});
+
+export const MdMenuGroup = createComponent({
+  react: React,
+  tagName: 'md-menu-group',
+  elementClass: MdMenuGroupElement,
+  events: {},
+});
+
+export const MdNavigationBar = createComponent({
+  react: React,
+  tagName: 'md-navigation-bar',
+  elementClass: MdNavigationBarElement,
+  events: {onActivated: 'navigation-bar-activated'},
+});
+
+export const MdNavigationDrawer = createComponent({
+  react: React,
+  tagName: 'md-navigation-drawer',
+  elementClass: MdNavigationDrawerElement,
+  events: {onNavigationDrawerChanged: 'navigation-drawer-changed'},
+});
+
+export const MdNavigationDrawerModal = createComponent({
+  react: React,
+  tagName: 'md-navigation-drawer-modal',
+  elementClass: MdNavigationDrawerModalElement,
+  events: {onNavigationDrawerChanged: 'navigation-drawer-changed'},
+});
+
+export const MdNavigationTab = createComponent({
+  react: React,
+  tagName: 'md-navigation-tab',
+  elementClass: MdNavigationTabElement,
+  events: {},
+});
+
+export const MdOutlinedCard = createComponent({
+  react: React,
+  tagName: 'md-outlined-card',
+  elementClass: MdOutlinedCardElement,
+  events: {},
+});
+
+export const MdOutlinedSegmentedButton = createComponent({
+  react: React,
+  tagName: 'md-outlined-segmented-button',
+  elementClass: MdOutlinedSegmentedButtonElement,
+  events: {},
+});
+
+export const MdOutlinedSegmentedButtonSet = createComponent({
+  react: React,
+  tagName: 'md-outlined-segmented-button-set',
+  elementClass: MdOutlinedSegmentedButtonSetElement,
+  events: {},
+});
+
+export const MdSplitButton = createComponent({
+  react: React,
+  tagName: 'md-split-button',
+  elementClass: MdSplitButtonElement,
+  events: {},
+});
diff --git a/wrappers/layout.ts b/wrappers/layout.ts
new file mode 100644
index 0000000..a1ae739
--- /dev/null
+++ b/wrappers/layout.ts
@@ -0,0 +1,37 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdListDetail as MdListDetailElement} from '@aphrody/material-web/layout/md-list-detail.js';
+import {MdPane as MdPaneElement} from '@aphrody/material-web/layout/md-pane.js';
+import {MdScaffold as MdScaffoldElement} from '@aphrody/material-web/layout/md-scaffold.js';
+import {MdSupportingPane as MdSupportingPaneElement} from '@aphrody/material-web/layout/md-supporting-pane.js';
+
+export const MdListDetail = createComponent({
+  react: React,
+  tagName: 'md-list-detail',
+  elementClass: MdListDetailElement,
+  events: {},
+});
+
+export const MdPane = createComponent({
+  react: React,
+  tagName: 'md-pane',
+  elementClass: MdPaneElement,
+  events: {},
+});
+
+export const MdScaffold = createComponent({
+  react: React,
+  tagName: 'md-scaffold',
+  elementClass: MdScaffoldElement,
+  events: {},
+});
+
+export const MdSupportingPane = createComponent({
+  react: React,
+  tagName: 'md-supporting-pane',
+  elementClass: MdSupportingPaneElement,
+  events: {},
+});
diff --git a/wrappers/link.ts b/wrappers/link.ts
new file mode 100644
index 0000000..3daa96f
--- /dev/null
+++ b/wrappers/link.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdLink as MdLinkElement} from '@aphrody/material-web/link/link.js';
+
+export const MdLink = createComponent({
+  react: React,
+  tagName: 'md-link',
+  elementClass: MdLinkElement,
+  events: {},
+});
diff --git a/wrappers/list.ts b/wrappers/list.ts
new file mode 100644
index 0000000..337479f
--- /dev/null
+++ b/wrappers/list.ts
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdList as MdListElement} from '@aphrody/material-web/list/list.js';
+import {MdListItem as MdListItemElement} from '@aphrody/material-web/list/list-item.js';
+
+export const MdList = createComponent({
+  react: React,
+  tagName: 'md-list',
+  elementClass: MdListElement,
+  events: {},
+});
+
+export const MdListItem = createComponent({
+  react: React,
+  tagName: 'md-list-item',
+  elementClass: MdListItemElement,
+  events: {},
+});
diff --git a/wrappers/loadingindicator.ts b/wrappers/loadingindicator.ts
new file mode 100644
index 0000000..d1c31c4
--- /dev/null
+++ b/wrappers/loadingindicator.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdLoadingIndicator as MdLoadingIndicatorElement} from '@aphrody/material-web/loadingindicator/loading-indicator.js';
+
+export const MdLoadingIndicator = createComponent({
+  react: React,
+  tagName: 'md-loading-indicator',
+  elementClass: MdLoadingIndicatorElement,
+  events: {},
+});
diff --git a/wrappers/menu.ts b/wrappers/menu.ts
new file mode 100644
index 0000000..64371bd
--- /dev/null
+++ b/wrappers/menu.ts
@@ -0,0 +1,29 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdMenu as MdMenuElement} from '@aphrody/material-web/menu/menu.js';
+import {MdMenuItem as MdMenuItemElement} from '@aphrody/material-web/menu/menu-item.js';
+import {MdSubMenu as MdSubMenuElement} from '@aphrody/material-web/menu/sub-menu.js';
+
+export const MdMenu = createComponent({
+  react: React,
+  tagName: 'md-menu',
+  elementClass: MdMenuElement,
+  events: {onOpening: 'opening', onOpened: 'opened', onClosing: 'closing', onClosed: 'closed'},
+});
+
+export const MdMenuItem = createComponent({
+  react: React,
+  tagName: 'md-menu-item',
+  elementClass: MdMenuItemElement,
+  events: {onCloseMenu: 'close-menu'},
+});
+
+export const MdSubMenu = createComponent({
+  react: React,
+  tagName: 'md-sub-menu',
+  elementClass: MdSubMenuElement,
+  events: {onOpening: 'opening', onOpened: 'opened', onClosing: 'closing', onClosed: 'closed'},
+});
diff --git a/wrappers/mobilestepper.ts b/wrappers/mobilestepper.ts
new file mode 100644
index 0000000..b9c9f47
--- /dev/null
+++ b/wrappers/mobilestepper.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdMobileStepper as MdMobileStepperElement} from '@aphrody/material-web/mobilestepper/mobile-stepper.js';
+
+export const MdMobileStepper = createComponent({
+  react: React,
+  tagName: 'md-mobile-stepper',
+  elementClass: MdMobileStepperElement,
+  events: {},
+});
diff --git a/wrappers/navigationrail.ts b/wrappers/navigationrail.ts
new file mode 100644
index 0000000..388c921
--- /dev/null
+++ b/wrappers/navigationrail.ts
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdNavigationRail as MdNavigationRailElement} from '@aphrody/material-web/navigationrail/navigation-rail.js';
+import {MdNavigationRailItem as MdNavigationRailItemElement} from '@aphrody/material-web/navigationrail/navigation-rail-item.js';
+
+export const MdNavigationRail = createComponent({
+  react: React,
+  tagName: 'md-navigation-rail',
+  elementClass: MdNavigationRailElement,
+  events: {onChange: 'navigation-rail:change', onItemActivate: 'navigation-rail-item:activate'},
+});
+
+export const MdNavigationRailItem = createComponent({
+  react: React,
+  tagName: 'md-navigation-rail-item',
+  elementClass: MdNavigationRailItemElement,
+  events: {},
+});
diff --git a/wrappers/paginator.ts b/wrappers/paginator.ts
new file mode 100644
index 0000000..37d5a08
--- /dev/null
+++ b/wrappers/paginator.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdPaginator as MdPaginatorElement} from '@aphrody/material-web/paginator/paginator.js';
+
+export const MdPaginator = createComponent({
+  react: React,
+  tagName: 'md-paginator',
+  elementClass: MdPaginatorElement,
+  events: {onPage: 'paginator:page'},
+});
diff --git a/wrappers/popover.ts b/wrappers/popover.ts
new file mode 100644
index 0000000..d4441a4
--- /dev/null
+++ b/wrappers/popover.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdPopover as MdPopoverElement} from '@aphrody/material-web/popover/popover.js';
+
+export const MdPopover = createComponent({
+  react: React,
+  tagName: 'md-popover',
+  elementClass: MdPopoverElement,
+  events: {onOpened: 'opened', onClosed: 'closed'},
+});
diff --git a/wrappers/progress.ts b/wrappers/progress.ts
new file mode 100644
index 0000000..e22de6d
--- /dev/null
+++ b/wrappers/progress.ts
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdCircularProgress as MdCircularProgressElement} from '@aphrody/material-web/progress/circular-progress.js';
+import {MdLinearProgress as MdLinearProgressElement} from '@aphrody/material-web/progress/linear-progress.js';
+
+export const MdCircularProgress = createComponent({
+  react: React,
+  tagName: 'md-circular-progress',
+  elementClass: MdCircularProgressElement,
+  events: {},
+});
+
+export const MdLinearProgress = createComponent({
+  react: React,
+  tagName: 'md-linear-progress',
+  elementClass: MdLinearProgressElement,
+  events: {},
+});
diff --git a/wrappers/radio.ts b/wrappers/radio.ts
new file mode 100644
index 0000000..019511a
--- /dev/null
+++ b/wrappers/radio.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdRadio as MdRadioElement} from '@aphrody/material-web/radio/radio.js';
+
+export const MdRadio = createComponent({
+  react: React,
+  tagName: 'md-radio',
+  elementClass: MdRadioElement,
+  events: {onChange: 'change', onInput: 'input'},
+});
diff --git a/wrappers/rating.ts b/wrappers/rating.ts
new file mode 100644
index 0000000..5cd1c4d
--- /dev/null
+++ b/wrappers/rating.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdRating as MdRatingElement} from '@aphrody/material-web/rating/rating.js';
+
+export const MdRating = createComponent({
+  react: React,
+  tagName: 'md-rating',
+  elementClass: MdRatingElement,
+  events: {onChange: 'change', onInput: 'input'},
+});
diff --git a/wrappers/ripple.ts b/wrappers/ripple.ts
new file mode 100644
index 0000000..61a65d7
--- /dev/null
+++ b/wrappers/ripple.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdRipple as MdRippleElement} from '@aphrody/material-web/ripple/ripple.js';
+
+export const MdRipple = createComponent({
+  react: React,
+  tagName: 'md-ripple',
+  elementClass: MdRippleElement,
+  events: {},
+});
diff --git a/wrappers/scheduler.ts b/wrappers/scheduler.ts
new file mode 100644
index 0000000..402388b
--- /dev/null
+++ b/wrappers/scheduler.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdScheduler as MdSchedulerElement} from '@aphrody/material-web/scheduler/scheduler.js';
+
+export const MdScheduler = createComponent({
+  react: React,
+  tagName: 'md-scheduler',
+  elementClass: MdSchedulerElement,
+  events: {onNavigate: 'scheduler:navigate', onSelect: 'scheduler:select', onEventClick: 'scheduler:event-click'},
+});
diff --git a/wrappers/search.ts b/wrappers/search.ts
new file mode 100644
index 0000000..179dc4d
--- /dev/null
+++ b/wrappers/search.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdSearchBar as MdSearchBarElement} from '@aphrody/material-web/search/search-bar.js';
+
+export const MdSearchBar = createComponent({
+  react: React,
+  tagName: 'md-search-bar',
+  elementClass: MdSearchBarElement,
+  events: {onInput: 'input', onSearch: 'search', onSearchOpen: 'search:open', onSearchClose: 'search:close'},
+});
diff --git a/wrappers/select.ts b/wrappers/select.ts
new file mode 100644
index 0000000..edb8eff
--- /dev/null
+++ b/wrappers/select.ts
@@ -0,0 +1,29 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdFilledSelect as MdFilledSelectElement} from '@aphrody/material-web/select/filled-select.js';
+import {MdOutlinedSelect as MdOutlinedSelectElement} from '@aphrody/material-web/select/outlined-select.js';
+import {MdSelectOption as MdSelectOptionElement} from '@aphrody/material-web/select/select-option.js';
+
+export const MdFilledSelect = createComponent({
+  react: React,
+  tagName: 'md-filled-select',
+  elementClass: MdFilledSelectElement,
+  events: {onChange: 'change', onInput: 'input', onOpening: 'opening', onOpened: 'opened', onClosing: 'closing', onClosed: 'closed'},
+});
+
+export const MdOutlinedSelect = createComponent({
+  react: React,
+  tagName: 'md-outlined-select',
+  elementClass: MdOutlinedSelectElement,
+  events: {onChange: 'change', onInput: 'input', onOpening: 'opening', onOpened: 'opened', onClosing: 'closing', onClosed: 'closed'},
+});
+
+export const MdSelectOption = createComponent({
+  react: React,
+  tagName: 'md-select-option',
+  elementClass: MdSelectOptionElement,
+  events: {},
+});
diff --git a/wrappers/sheet.ts b/wrappers/sheet.ts
new file mode 100644
index 0000000..92a1529
--- /dev/null
+++ b/wrappers/sheet.ts
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdBottomSheet as MdBottomSheetElement} from '@aphrody/material-web/sheet/bottom-sheet.js';
+import {MdSideSheet as MdSideSheetElement} from '@aphrody/material-web/sheet/side-sheet.js';
+
+export const MdBottomSheet = createComponent({
+  react: React,
+  tagName: 'md-bottom-sheet',
+  elementClass: MdBottomSheetElement,
+  events: {onOpening: 'bottom-sheet:opening', onOpened: 'bottom-sheet:opened', onClosing: 'bottom-sheet:closing', onClosed: 'bottom-sheet:closed'},
+});
+
+export const MdSideSheet = createComponent({
+  react: React,
+  tagName: 'md-side-sheet',
+  elementClass: MdSideSheetElement,
+  events: {onOpening: 'side-sheet:opening', onOpened: 'side-sheet:opened', onClosing: 'side-sheet:closing', onClosed: 'side-sheet:closed'},
+});
diff --git a/wrappers/skeleton.ts b/wrappers/skeleton.ts
new file mode 100644
index 0000000..836a8d5
--- /dev/null
+++ b/wrappers/skeleton.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdSkeleton as MdSkeletonElement} from '@aphrody/material-web/skeleton/skeleton.js';
+
+export const MdSkeleton = createComponent({
+  react: React,
+  tagName: 'md-skeleton',
+  elementClass: MdSkeletonElement,
+  events: {},
+});
diff --git a/wrappers/slider.ts b/wrappers/slider.ts
new file mode 100644
index 0000000..ea9fdf3
--- /dev/null
+++ b/wrappers/slider.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdSlider as MdSliderElement} from '@aphrody/material-web/slider/slider.js';
+
+export const MdSlider = createComponent({
+  react: React,
+  tagName: 'md-slider',
+  elementClass: MdSliderElement,
+  events: {onChange: 'change', onInput: 'input'},
+});
diff --git a/wrappers/snackbar.ts b/wrappers/snackbar.ts
new file mode 100644
index 0000000..ffedf4a
--- /dev/null
+++ b/wrappers/snackbar.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdSnackbar as MdSnackbarElement} from '@aphrody/material-web/snackbar/snackbar.js';
+
+export const MdSnackbar = createComponent({
+  react: React,
+  tagName: 'md-snackbar',
+  elementClass: MdSnackbarElement,
+  events: {onOpening: 'opening', onOpened: 'opened', onClosing: 'closing', onClosed: 'closed'},
+});
diff --git a/wrappers/stepper.ts b/wrappers/stepper.ts
new file mode 100644
index 0000000..31212f4
--- /dev/null
+++ b/wrappers/stepper.ts
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdStep as MdStepElement} from '@aphrody/material-web/stepper/step.js';
+import {MdStepper as MdStepperElement} from '@aphrody/material-web/stepper/stepper.js';
+
+export const MdStep = createComponent({
+  react: React,
+  tagName: 'md-step',
+  elementClass: MdStepElement,
+  events: {},
+});
+
+export const MdStepper = createComponent({
+  react: React,
+  tagName: 'md-stepper',
+  elementClass: MdStepperElement,
+  events: {onChange: 'stepper:change'},
+});
diff --git a/wrappers/surface.ts b/wrappers/surface.ts
new file mode 100644
index 0000000..7f96739
--- /dev/null
+++ b/wrappers/surface.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdSurface as MdSurfaceElement} from '@aphrody/material-web/surface/surface.js';
+
+export const MdSurface = createComponent({
+  react: React,
+  tagName: 'md-surface',
+  elementClass: MdSurfaceElement,
+  events: {},
+});
diff --git a/wrappers/switch.ts b/wrappers/switch.ts
new file mode 100644
index 0000000..8da8542
--- /dev/null
+++ b/wrappers/switch.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdSwitch as MdSwitchElement} from '@aphrody/material-web/switch/switch.js';
+
+export const MdSwitch = createComponent({
+  react: React,
+  tagName: 'md-switch',
+  elementClass: MdSwitchElement,
+  events: {onChange: 'change', onInput: 'input'},
+});
diff --git a/wrappers/table.ts b/wrappers/table.ts
new file mode 100644
index 0000000..5687357
--- /dev/null
+++ b/wrappers/table.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdTable as MdTableElement} from '@aphrody/material-web/table/table.js';
+
+export const MdTable = createComponent({
+  react: React,
+  tagName: 'md-table',
+  elementClass: MdTableElement,
+  events: {onSort: 'table:sort', onSelectionChange: 'table:selection-change'},
+});
diff --git a/wrappers/tabs.ts b/wrappers/tabs.ts
new file mode 100644
index 0000000..ec560ab
--- /dev/null
+++ b/wrappers/tabs.ts
@@ -0,0 +1,29 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdPrimaryTab as MdPrimaryTabElement} from '@aphrody/material-web/tabs/primary-tab.js';
+import {MdSecondaryTab as MdSecondaryTabElement} from '@aphrody/material-web/tabs/secondary-tab.js';
+import {MdTabs as MdTabsElement} from '@aphrody/material-web/tabs/tabs.js';
+
+export const MdPrimaryTab = createComponent({
+  react: React,
+  tagName: 'md-primary-tab',
+  elementClass: MdPrimaryTabElement,
+  events: {},
+});
+
+export const MdSecondaryTab = createComponent({
+  react: React,
+  tagName: 'md-secondary-tab',
+  elementClass: MdSecondaryTabElement,
+  events: {},
+});
+
+export const MdTabs = createComponent({
+  react: React,
+  tagName: 'md-tabs',
+  elementClass: MdTabsElement,
+  events: {onChange: 'change'},
+});
diff --git a/wrappers/textfield.ts b/wrappers/textfield.ts
new file mode 100644
index 0000000..8540050
--- /dev/null
+++ b/wrappers/textfield.ts
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdFilledTextField as MdFilledTextFieldElement} from '@aphrody/material-web/textfield/filled-text-field.js';
+import {MdOutlinedTextField as MdOutlinedTextFieldElement} from '@aphrody/material-web/textfield/outlined-text-field.js';
+
+export const MdFilledTextField = createComponent({
+  react: React,
+  tagName: 'md-filled-text-field',
+  elementClass: MdFilledTextFieldElement,
+  events: {onChange: 'change', onInput: 'input'},
+});
+
+export const MdOutlinedTextField = createComponent({
+  react: React,
+  tagName: 'md-outlined-text-field',
+  elementClass: MdOutlinedTextFieldElement,
+  events: {onChange: 'change', onInput: 'input'},
+});
diff --git a/wrappers/timepicker.ts b/wrappers/timepicker.ts
new file mode 100644
index 0000000..330f753
--- /dev/null
+++ b/wrappers/timepicker.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdTimePicker as MdTimePickerElement} from '@aphrody/material-web/timepicker/time-picker.js';
+
+export const MdTimePicker = createComponent({
+  react: React,
+  tagName: 'md-time-picker',
+  elementClass: MdTimePickerElement,
+  events: {onChange: 'time-picker:change'},
+});
diff --git a/wrappers/toolbar.ts b/wrappers/toolbar.ts
new file mode 100644
index 0000000..d5e1677
--- /dev/null
+++ b/wrappers/toolbar.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdToolbar as MdToolbarElement} from '@aphrody/material-web/toolbar/md-toolbar.js';
+
+export const MdToolbar = createComponent({
+  react: React,
+  tagName: 'md-toolbar',
+  elementClass: MdToolbarElement,
+  events: {},
+});
diff --git a/wrappers/tooltip.ts b/wrappers/tooltip.ts
new file mode 100644
index 0000000..db3d6ab
--- /dev/null
+++ b/wrappers/tooltip.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdTooltip as MdTooltipElement} from '@aphrody/material-web/tooltip/tooltip.js';
+
+export const MdTooltip = createComponent({
+  react: React,
+  tagName: 'md-tooltip',
+  elementClass: MdTooltipElement,
+  events: {onShow: 'tooltip-show', onHide: 'tooltip-hide'},
+});
diff --git a/wrappers/tree.ts b/wrappers/tree.ts
new file mode 100644
index 0000000..afccf9d
--- /dev/null
+++ b/wrappers/tree.ts
@@ -0,0 +1,21 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdTree as MdTreeElement} from '@aphrody/material-web/tree/tree.js';
+import {MdTreeItem as MdTreeItemElement} from '@aphrody/material-web/tree/tree-item.js';
+
+export const MdTree = createComponent({
+  react: React,
+  tagName: 'md-tree',
+  elementClass: MdTreeElement,
+  events: {onSelect: 'tree:select'},
+});
+
+export const MdTreeItem = createComponent({
+  react: React,
+  tagName: 'md-tree-item',
+  elementClass: MdTreeItemElement,
+  events: {onToggle: 'tree-item:toggle', onActivate: 'tree-item:activate'},
+});
diff --git a/wrappers/typography.ts b/wrappers/typography.ts
new file mode 100644
index 0000000..aba33c9
--- /dev/null
+++ b/wrappers/typography.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdType as MdTypeElement} from '@aphrody/material-web/typography/md-type.js';
+
+export const MdType = createComponent({
+  react: React,
+  tagName: 'md-type',
+  elementClass: MdTypeElement,
+  events: {},
+});
diff --git a/wrappers/virtualscroll.ts b/wrappers/virtualscroll.ts
new file mode 100644
index 0000000..4a870bf
--- /dev/null
+++ b/wrappers/virtualscroll.ts
@@ -0,0 +1,13 @@
+// AUTO-GENERATED by generate.ts — do not edit by hand. Run `bun run generate`.
+
+import * as React from 'react';
+import {createComponent} from '@lit/react';
+
+import {MdVirtualScroller as MdVirtualScrollerElement} from '@aphrody/material-web/virtualscroll/virtual-scroller.js';
+
+export const MdVirtualScroller = createComponent({
+  react: React,
+  tagName: 'md-virtual-scroller',
+  elementClass: MdVirtualScrollerElement,
+  events: {onRange: 'virtual-scroll:range'},
+});