mtrl 0.10.0-next.2 → 0.10.0

package/dist/elements/top-app-bar.js

@@ -0,0 +1,95 @@
+import createTopAppBar from "../components/top-app-bar/index.js";
+import { TOP_APP_BAR_DEFAULTS } from "../components/top-app-bar/constants.js";
+import { defineElement } from "./define.js";
+const namedSlot = (name) => {
+    const slot = document.createElement("slot");
+    slot.name = name;
+    return slot;
+};
+const create = (config) => {
+    const bar = createTopAppBar(config);
+    const headline = bar.getHeadlineElement();
+    const text = document.createElement("span");
+    text.textContent = headline.textContent;
+    headline.replaceChildren(document.createElement("slot"), text);
+    bar.addLeadingElement(namedSlot("leading"));
+    bar.addTrailingElement(namedSlot("trailing"));
+    return bar;
+};
+const headlineText = (component) => component.getHeadlineElement().querySelector("span");
+const headlineFallback = (component) => {
+    const slot = component.getHeadlineElement().querySelector("slot");
+    const sync = () => {
+        const text = headlineText(component);
+        if (text) {
+            text.hidden = slot
+                .assignedNodes()
+                .some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? "").trim() !== "");
+        }
+    };
+    sync();
+    slot.addEventListener("slotchange", sync);
+    return () => slot.removeEventListener("slotchange", sync);
+};
+const readBar = (host) => ({
+    scrollable: !host.hasAttribute("no-scroll") && !host.hasAttribute("scroll-target"),
+    compressible: !host.hasAttribute("no-compress"),
+});
+const threshold = (host) => {
+    const value = Number(host.getAttribute("scroll-threshold") ?? TOP_APP_BAR_DEFAULTS.SCROLL_THRESHOLD);
+    return Number.isNaN(value) ? TOP_APP_BAR_DEFAULTS.SCROLL_THRESHOLD : value;
+};
+const followScrollTarget = (host, component) => {
+    const id = host.getAttribute("scroll-target");
+    if (!id || host.hasAttribute("no-scroll"))
+        return () => undefined;
+    const update = (target) => void component.setScrollState(target.scrollTop > threshold(host));
+    const onScroll = (event) => {
+        const target = event.composedPath()[0];
+        if (target instanceof Element && target.id === id)
+            update(target);
+    };
+    const initial = host.ownerDocument.getElementById(id);
+    if (initial)
+        update(initial);
+    host.ownerDocument.addEventListener("scroll", onScroll, { capture: true, passive: true });
+    return () => host.ownerDocument.removeEventListener("scroll", onScroll, { capture: true });
+};
+const topAppBarSpec = {
+    name: "top-app-bar",
+    slots: ["leading", "trailing"],
+    create: (config) => create(config),
+    styles: ["top-app-bar"],
+    hostStyles: ":host{display:block}",
+    attributes: {
+        type: { type: "string", config: "type", update: (c, v) => void c.setType((v ?? "small")) },
+        headline: {
+            type: "string",
+            config: "title",
+            update: (c, v) => {
+                const text = headlineText(c);
+                if (text)
+                    text.textContent = v === null ? "" : String(v);
+            },
+        },
+        "no-scroll": { type: "boolean" },
+        "no-compress": { type: "boolean" },
+        "scroll-threshold": { type: "number", config: "scrollThreshold" },
+        "scroll-target": { type: "string" },
+        "aria-label": {
+            type: "string",
+            update: (c, v) => c.element.setAttribute("aria-label", v === null ? "Top app bar" : String(v)),
+        },
+    },
+    methods: ["setScrollState"],
+    config: readBar,
+    setup: (host, component) => {
+        const label = host.getAttribute("aria-label");
+        if (label !== null)
+            component.element.setAttribute("aria-label", label);
+        const cleanups = [headlineFallback(component), followScrollTarget(host, component)];
+        return () => cleanups.forEach((cleanup) => cleanup());
+    },
+};
+export const topAppBarElement = defineElement(topAppBarSpec);
+export const defineTopAppBar = (options) => topAppBarElement.define(options);

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mtrl",
-  "version": "0.10.0-next.2",
+  "version": "0.10.0",
   "description": "A functional TypeScript/JavaScript component library with composable architecture based on Material Design 3",
   "author": "floor",
   "license": "MIT",
@@ -59,6 +59,20 @@
       "types": "./elements/css/*.d.ts",
       "import": "./elements/css/*.js"
     },
+    "./elements/preupgrade.css": {
+      "types": "./elements/preupgrade.css.d.ts",
+      "default": "./elements/preupgrade.css"
+    },
+    "./elements/preupgrade": {
+      "types": "./elements/preupgrade.d.ts",
+      "import": "./elements/preupgrade.js"
+    },
+    "./react/jsx": {
+      "types": "./react/jsx.d.ts"
+    },
+    "./solid/jsx": {
+      "types": "./solid/jsx.d.ts"
+    },
     "./react": {
       "types": "./react/index.d.ts",
       "import": "./react/index.js"
@@ -94,7 +108,7 @@
     "type": "git",
     "url": "git+https://github.com/floor/mtrl.git"
   },
-  "homepage": "https://mtrl.app",
+  "homepage": "https://md3.io",
   "bugs": {
     "url": "https://github.com/floor/mtrl/issues"
   },

package/dist/react/badge.d.ts

@@ -0,0 +1,4 @@
+import "mtrl/elements/css/badge";
+import { type BadgeSpec, type BadgeElement } from "../elements/badge.js";
+import { type MComponent } from "./create.js";
+export declare const Badge: MComponent<BadgeSpec, BadgeElement>;

package/dist/react/badge.js

@@ -0,0 +1,7 @@
+// src/react/badge.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/badge";
+import { badgeElement, defineBadge } from "../elements/badge.js";
+import { createComponent } from "./create.js";
+export const Badge = /*#__PURE__*/ createComponent(badgeElement.spec, defineBadge, "Badge");

package/dist/react/bottom-app-bar.d.ts

@@ -0,0 +1,4 @@
+import "mtrl/elements/css/bottom-app-bar";
+import { type BottomAppBarSpec, type BottomAppBarElement } from "../elements/bottom-app-bar.js";
+import { type MComponent } from "./create.js";
+export declare const BottomAppBar: MComponent<BottomAppBarSpec, BottomAppBarElement>;

package/dist/react/bottom-app-bar.js

@@ -0,0 +1,7 @@
+// src/react/bottom-app-bar.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/bottom-app-bar";
+import { bottomAppBarElement, defineBottomAppBar } from "../elements/bottom-app-bar.js";
+import { createComponent } from "./create.js";
+export const BottomAppBar = /*#__PURE__*/ createComponent(bottomAppBarElement.spec, defineBottomAppBar, "BottomAppBar");

package/dist/react/bottom-sheet.d.ts

@@ -0,0 +1,4 @@
+import "mtrl/elements/css/bottom-sheet";
+import { type BottomSheetSpec, type BottomSheetElement } from "../elements/bottom-sheet.js";
+import { type MComponent } from "./create.js";
+export declare const BottomSheet: MComponent<BottomSheetSpec, BottomSheetElement>;

package/dist/react/bottom-sheet.js

@@ -0,0 +1,7 @@
+// src/react/bottom-sheet.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/bottom-sheet";
+import { bottomSheetElement, defineBottomSheet } from "../elements/bottom-sheet.js";
+import { createComponent } from "./create.js";
+export const BottomSheet = /*#__PURE__*/ createComponent(bottomSheetElement.spec, defineBottomSheet, "BottomSheet");

package/dist/react/button-group-item.d.ts

@@ -0,0 +1,3 @@
+import { type ButtonGroupItemAttributes } from "../elements/button-group.js";
+import { type MDeclaration } from "./create.js";
+export declare const ButtonGroupItem: MDeclaration<ButtonGroupItemAttributes>;

package/dist/react/button-group-item.js

@@ -0,0 +1,6 @@
+// src/react/button-group-item.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import { buttonGroupItemDeclaration } from "../elements/button-group.js";
+import { createDeclaration } from "./create.js";
+export const ButtonGroupItem = /*#__PURE__*/ createDeclaration(buttonGroupItemDeclaration, "ButtonGroupItem");

package/dist/react/button-group.d.ts

@@ -0,0 +1,7 @@
+import "mtrl/elements/css/progress";
+import "mtrl/elements/css/button";
+import "mtrl/elements/css/icon-button";
+import "mtrl/elements/css/button-group";
+import { type ButtonGroupSpec, type ButtonGroupElement } from "../elements/button-group.js";
+import { type MComponent } from "./create.js";
+export declare const ButtonGroup: MComponent<ButtonGroupSpec, ButtonGroupElement>;

package/dist/react/button-group.js

@@ -0,0 +1,10 @@
+// src/react/button-group.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/progress";
+import "mtrl/elements/css/button";
+import "mtrl/elements/css/icon-button";
+import "mtrl/elements/css/button-group";
+import { buttonGroupElement, defineButtonGroup } from "../elements/button-group.js";
+import { createComponent } from "./create.js";
+export const ButtonGroup = /*#__PURE__*/ createComponent(buttonGroupElement.spec, defineButtonGroup, "ButtonGroup");

package/dist/react/button.d.ts

@@ -0,0 +1,5 @@
+import "mtrl/elements/css/progress";
+import "mtrl/elements/css/button";
+import { type ButtonSpec, type ButtonElement } from "../elements/button.js";
+import { type MComponent } from "./create.js";
+export declare const Button: MComponent<ButtonSpec, ButtonElement>;

package/dist/react/button.js

@@ -0,0 +1,8 @@
+// src/react/button.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/progress";
+import "mtrl/elements/css/button";
+import { buttonElement, defineButton } from "../elements/button.js";
+import { createComponent } from "./create.js";
+export const Button = /*#__PURE__*/ createComponent(buttonElement.spec, defineButton, "Button");

package/dist/react/card.d.ts

@@ -0,0 +1,4 @@
+import "mtrl/elements/css/card";
+import { type CardSpec, type CardElement } from "../elements/card.js";
+import { type MComponent } from "./create.js";
+export declare const Card: MComponent<CardSpec, CardElement>;

package/dist/react/card.js

@@ -0,0 +1,7 @@
+// src/react/card.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/card";
+import { cardElement, defineCard } from "../elements/card.js";
+import { createComponent } from "./create.js";
+export const Card = /*#__PURE__*/ createComponent(cardElement.spec, defineCard, "Card");

package/dist/react/carousel-item.d.ts

@@ -0,0 +1,3 @@
+import { type CarouselItemAttributes } from "../elements/carousel.js";
+import { type MDeclaration } from "./create.js";
+export declare const CarouselItem: MDeclaration<CarouselItemAttributes>;

package/dist/react/carousel-item.js

@@ -0,0 +1,6 @@
+// src/react/carousel-item.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import { carouselItemDeclaration } from "../elements/carousel.js";
+import { createDeclaration } from "./create.js";
+export const CarouselItem = /*#__PURE__*/ createDeclaration(carouselItemDeclaration, "CarouselItem");

package/dist/react/carousel.d.ts

@@ -0,0 +1,4 @@
+import "mtrl/elements/css/carousel";
+import { type CarouselSpec, type CarouselElement } from "../elements/carousel.js";
+import { type MComponent } from "./create.js";
+export declare const Carousel: MComponent<CarouselSpec, CarouselElement>;

package/dist/react/carousel.js

@@ -0,0 +1,7 @@
+// src/react/carousel.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/carousel";
+import { carouselElement, defineCarousel } from "../elements/carousel.js";
+import { createComponent } from "./create.js";
+export const Carousel = /*#__PURE__*/ createComponent(carouselElement.spec, defineCarousel, "Carousel");

package/dist/react/checkbox.d.ts

@@ -0,0 +1,4 @@
+import "mtrl/elements/css/checkbox";
+import { type CheckboxSpec, type CheckboxElement } from "../elements/checkbox.js";
+import { type MComponent } from "./create.js";
+export declare const Checkbox: MComponent<CheckboxSpec, CheckboxElement>;

package/dist/react/checkbox.js

@@ -0,0 +1,7 @@
+// src/react/checkbox.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/checkbox";
+import { checkboxElement, defineCheckbox } from "../elements/checkbox.js";
+import { createComponent } from "./create.js";
+export const Checkbox = /*#__PURE__*/ createComponent(checkboxElement.spec, defineCheckbox, "Checkbox");

package/dist/react/chip.d.ts

@@ -0,0 +1,3 @@
+import { type ChipAttributes } from "../elements/chips.js";
+import { type MDeclaration } from "./create.js";
+export declare const Chip: MDeclaration<ChipAttributes>;

package/dist/react/chip.js

@@ -0,0 +1,6 @@
+// src/react/chip.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import { chipDeclaration } from "../elements/chips.js";
+import { createDeclaration } from "./create.js";
+export const Chip = /*#__PURE__*/ createDeclaration(chipDeclaration, "Chip");

package/dist/react/chips.d.ts

@@ -0,0 +1,4 @@
+import "mtrl/elements/css/chips";
+import { type ChipsSpec, type ChipsElement } from "../elements/chips.js";
+import { type MComponent } from "./create.js";
+export declare const Chips: MComponent<ChipsSpec, ChipsElement>;

package/dist/react/chips.js

@@ -0,0 +1,7 @@
+// src/react/chips.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/chips";
+import { chipsElement, defineChips } from "../elements/chips.js";
+import { createComponent } from "./create.js";
+export const Chips = /*#__PURE__*/ createComponent(chipsElement.spec, defineChips, "Chips");

package/dist/react/create.d.ts

@@ -15,7 +15,7 @@
  * @module react
  */
 import * as React from "react";
-import type { DefineOptions, ElementEvents, ElementProps } from "../elements/index.js";
+import type { DefineOptions, ElementEvents, ElementProps, ElementSlotProp } from "../elements/index.js";
 import { type ComponentSpec, type DeclarationSpec, type DefaultProps, type FormProps, type Pascal } from "../elements/adapter.js";
 export { configure } from "../elements/adapter.js";
 export type { DefaultProps, FormProps } from "../elements/adapter.js";
@@ -23,7 +23,16 @@ export type { DefaultProps, FormProps } from "../elements/adapter.js";
 export type EventProps<S> = {
     [K in keyof ElementEvents<S> & string as `on${Pascal<K>}`]?: (event: ElementEvents<S>[K]) => void;
 };
-type OwnProps<S> = ElementProps<S> & DefaultProps<S> & EventProps<S>;
+type BaseProps<S> = ElementProps<S> & DefaultProps<S> & EventProps<S>;
+/**
+ * Each named slot as a prop taking nodes (`actions={<Button />}`), rendered
+ * into a `<span slot="…">` the adapter owns; a text prop of the same name
+ * (`headline`) takes its text or nodes (FLO-333).
+ */
+type SlotProps<S> = {
+    [K in ElementSlotProp<S>]?: React.ReactNode;
+};
+type OwnProps<S> = Omit<BaseProps<S>, ElementSlotProp<S>> & SlotProps<S>;
 /** Props of a generated component: the element's own, plus any HTML attribute for the host. */
 export type ComponentProps<S> = OwnProps<S> & FormProps<S> & Omit<React.HTMLAttributes<HTMLElement>, keyof OwnProps<S>> & {
     children?: React.ReactNode;

package/dist/react/create.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from "react";
-import { describe, describeDeclaration, getPrefix, isBrowser, pascal, serverDefaults, toAttribute, writeDefaults, writeLive, } from "../elements/adapter.js";
+import { camel, describe, describeDeclaration, getPrefix, isBrowser, pascal, serverDefaults, toAttribute, writeDefaults, writeLive, } from "../elements/adapter.js";
 export { configure } from "../elements/adapter.js";
 const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 const assignRef = (ref, value) => {
@@ -14,14 +14,23 @@ export const createComponent = (spec, define, displayName) => {
     const properties = new Set(described.properties);
     const attributes = described.attributes;
     const events = new Map(described.events.map((event) => [`on${pascal(event)}`, event]));
+    const slots = new Map(described.slots.map((slot) => [camel(slot), slot]));
     const Component = React.forwardRef((props, forwardedRef) => {
         const element = React.useRef(null);
         const host = {};
         const live = {};
         const handlers = {};
+        const named = [];
         for (const [key, value] of Object.entries(props)) {
             const event = events.get(key);
             const attribute = attributes.get(key);
+            const slot = slots.get(key);
+            if (slot !== undefined && !(attribute && typeof value === "string")) {
+                if (value != null && value !== false) {
+                    named.push(React.createElement("span", { key: slot, slot, style: { display: "contents" } }, value));
+                }
+                continue;
+            }
             if (event) {
                 if (typeof value === "function")
                     handlers[event] = value;
@@ -83,7 +92,8 @@ export const createComponent = (spec, define, displayName) => {
             element.current = node;
             assignRef(forwardedRef, node);
         }, [forwardedRef]);
-        return React.createElement(`${getPrefix()}-${spec.name}`, { ...host, ref });
+        const { children, ...attributesAndProps } = host;
+        return React.createElement(`${getPrefix()}-${spec.name}`, { ...attributesAndProps, ref }, children, ...named);
     });
     Component.displayName = displayName;
     return Component;

package/dist/react/datepicker.d.ts

@@ -0,0 +1,4 @@
+import "mtrl/elements/css/datepicker";
+import { type DatepickerSpec, type DatepickerElement } from "../elements/datepicker.js";
+import { type MComponent } from "./create.js";
+export declare const Datepicker: MComponent<DatepickerSpec, DatepickerElement>;

package/dist/react/datepicker.js

@@ -0,0 +1,7 @@
+// src/react/datepicker.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/datepicker";
+import { datepickerElement, defineDatepicker } from "../elements/datepicker.js";
+import { createComponent } from "./create.js";
+export const Datepicker = /*#__PURE__*/ createComponent(datepickerElement.spec, defineDatepicker, "Datepicker");

package/dist/react/dialog.d.ts

@@ -0,0 +1,4 @@
+import "mtrl/elements/css/dialog";
+import { type DialogSpec, type DialogElement } from "../elements/dialog.js";
+import { type MComponent } from "./create.js";
+export declare const Dialog: MComponent<DialogSpec, DialogElement>;

package/dist/react/dialog.js

@@ -0,0 +1,7 @@
+// src/react/dialog.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/dialog";
+import { dialogElement, defineDialog } from "../elements/dialog.js";
+import { createComponent } from "./create.js";
+export const Dialog = /*#__PURE__*/ createComponent(dialogElement.spec, defineDialog, "Dialog");

package/dist/react/divider.d.ts

@@ -0,0 +1,4 @@
+import "mtrl/elements/css/divider";
+import { type DividerSpec, type DividerElement } from "../elements/divider.js";
+import { type MComponent } from "./create.js";
+export declare const Divider: MComponent<DividerSpec, DividerElement>;

package/dist/react/divider.js

@@ -0,0 +1,7 @@
+// src/react/divider.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/divider";
+import { dividerElement, defineDivider } from "../elements/divider.js";
+import { createComponent } from "./create.js";
+export const Divider = /*#__PURE__*/ createComponent(dividerElement.spec, defineDivider, "Divider");

package/dist/react/drawer-item.d.ts

@@ -0,0 +1,3 @@
+import { type DrawerItemAttributes } from "../elements/drawer.js";
+import { type MDeclaration } from "./create.js";
+export declare const DrawerItem: MDeclaration<DrawerItemAttributes>;

package/dist/react/drawer-item.js

@@ -0,0 +1,6 @@
+// src/react/drawer-item.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import { drawerItemDeclaration } from "../elements/drawer.js";
+import { createDeclaration } from "./create.js";
+export const DrawerItem = /*#__PURE__*/ createDeclaration(drawerItemDeclaration, "DrawerItem");

package/dist/react/drawer.d.ts

@@ -0,0 +1,4 @@
+import "mtrl/elements/css/drawer";
+import { type DrawerSpec, type DrawerElement } from "../elements/drawer.js";
+import { type MComponent } from "./create.js";
+export declare const Drawer: MComponent<DrawerSpec, DrawerElement>;

package/dist/react/drawer.js

@@ -0,0 +1,7 @@
+// src/react/drawer.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/drawer";
+import { drawerElement, defineDrawer } from "../elements/drawer.js";
+import { createComponent } from "./create.js";
+export const Drawer = /*#__PURE__*/ createComponent(drawerElement.spec, defineDrawer, "Drawer");

package/dist/react/extended-fab.d.ts

@@ -0,0 +1,4 @@
+import "mtrl/elements/css/extended-fab";
+import { type ExtendedFabSpec, type ExtendedFabElement } from "../elements/extended-fab.js";
+import { type MComponent } from "./create.js";
+export declare const ExtendedFab: MComponent<ExtendedFabSpec, ExtendedFabElement>;

package/dist/react/extended-fab.js

@@ -0,0 +1,7 @@
+// src/react/extended-fab.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/extended-fab";
+import { extendedFabElement, defineExtendedFab } from "../elements/extended-fab.js";
+import { createComponent } from "./create.js";
+export const ExtendedFab = /*#__PURE__*/ createComponent(extendedFabElement.spec, defineExtendedFab, "ExtendedFab");

package/dist/react/fab-menu-item.d.ts

@@ -0,0 +1,3 @@
+import { type FabMenuItemAttributes } from "../elements/fab-menu.js";
+import { type MDeclaration } from "./create.js";
+export declare const FabMenuItem: MDeclaration<FabMenuItemAttributes>;

package/dist/react/fab-menu-item.js

@@ -0,0 +1,6 @@
+// src/react/fab-menu-item.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import { fabMenuItemDeclaration } from "../elements/fab-menu.js";
+import { createDeclaration } from "./create.js";
+export const FabMenuItem = /*#__PURE__*/ createDeclaration(fabMenuItemDeclaration, "FabMenuItem");

package/dist/react/fab-menu.d.ts

@@ -0,0 +1,6 @@
+import "mtrl/elements/css/fab";
+import "mtrl/elements/css/menu";
+import "mtrl/elements/css/fab-menu";
+import { type FabMenuSpec, type FabMenuElement } from "../elements/fab-menu.js";
+import { type MComponent } from "./create.js";
+export declare const FabMenu: MComponent<FabMenuSpec, FabMenuElement>;

package/dist/react/fab-menu.js

@@ -0,0 +1,9 @@
+// src/react/fab-menu.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/fab";
+import "mtrl/elements/css/menu";
+import "mtrl/elements/css/fab-menu";
+import { fabMenuElement, defineFabMenu } from "../elements/fab-menu.js";
+import { createComponent } from "./create.js";
+export const FabMenu = /*#__PURE__*/ createComponent(fabMenuElement.spec, defineFabMenu, "FabMenu");

package/dist/react/fab.d.ts

@@ -0,0 +1,4 @@
+import "mtrl/elements/css/fab";
+import { type FabSpec, type FabElement } from "../elements/fab.js";
+import { type MComponent } from "./create.js";
+export declare const Fab: MComponent<FabSpec, FabElement>;

package/dist/react/fab.js

@@ -0,0 +1,7 @@
+// src/react/fab.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/fab";
+import { fabElement, defineFab } from "../elements/fab.js";
+import { createComponent } from "./create.js";
+export const Fab = /*#__PURE__*/ createComponent(fabElement.spec, defineFab, "Fab");

package/dist/react/icon-button.d.ts

@@ -0,0 +1,4 @@
+import "mtrl/elements/css/icon-button";
+import { type IconButtonSpec, type IconButtonElement } from "../elements/icon-button.js";
+import { type MComponent } from "./create.js";
+export declare const IconButton: MComponent<IconButtonSpec, IconButtonElement>;

package/dist/react/icon-button.js

@@ -0,0 +1,7 @@
+// src/react/icon-button.ts
+// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
+"use client";
+import "mtrl/elements/css/icon-button";
+import { iconButtonElement, defineIconButton } from "../elements/icon-button.js";
+import { createComponent } from "./create.js";
+export const IconButton = /*#__PURE__*/ createComponent(iconButtonElement.spec, defineIconButton, "IconButton");