material 3.2.6 → 3.3.0

package/dist/elements/styles.d.ts

@@ -1,73 +1,10 @@
-/**
- * Stylesheets for the shadow roots of the elements.
- *
- * Each element adopts the CSS of its component and the component's style
- * dependencies, the same entries the selective stylesheets are built from
- * (`scripts/style-manifest.ts`). One sheet per entry per page, shared by every
- * instance.
- *
- * @module elements
- */
-/** The tag prefix: `<m-switch>`. The pre-upgrade CSS is built for it. */
 export declare const DEFAULT_PREFIX = "m";
-/** Internal registry access; preserves application registrations and overrides. */
 export declare const styleText: (name: string) => string | undefined;
-/** Identifies only fallback nodes inserted by applyStyles, never authored styles. */
 export declare const isFallbackStyle: (node: Node) => boolean;
-/**
- * Registers the CSS text of style entries, keyed as in `componentStyles`.
- * Must run before the elements that use them are created.
- *
- * @experimental The element authoring API (`defineElement`, `ElementSpec`,
- * `registerStyles`, `hasStyles`, `SHADOW_BASE_STYLES`) is outside semantic
- * versioning in 3.x: it may change in a minor release. The elements the
- * library defines, and their attributes, properties and events, are not.
- */
 export declare const registerStyles: (css: Record<string, string>) => void;
-/**
- * Whether CSS is registered under a name.
- *
- * @experimental The element authoring API (`defineElement`, `ElementSpec`,
- * `registerStyles`, `hasStyles`, `SHADOW_BASE_STYLES`) is outside semantic
- * versioning in 3.x: it may change in a minor release. The elements the
- * library defines, and their attributes, properties and events, are not.
- */
 export declare const hasStyles: (name: string) => boolean;
-/**
- * On a host the server rendered with a declarative shadow root.
- * The `data-mtrl-*` namespace is the library's own: this attribute, and the
- * elements' `marker` reflections (define.ts), which no component or page
- * writes. Component `data-*` names (`data-id`, `data-density`, `data-theme`)
- * are that component's own state, and a page's `data-ssr` must not be this
- * contract. Inert after upgrade, because the rollback rule is `:not(:defined)`.
- */
 export declare const RENDERED_HOST_ATTRIBUTE = "data-mtrl-ssr";
-/**
- * Last rule of every pre-upgrade sheet, inside `mtrl.preupgrade`.
- * `:not(#\0)` is an id selector (specificity 1,0,0) that matches every element,
- * so each selector outranks every pre-upgrade selector of the same subject
- * (the host, its `::before` and `::after`, and a direct child), none of which
- * has an id. The child subject is `:defined` (specificity 1,3,0). Every
- * built-in element is defined, so a slotted `div` or `span` is rolled back.
- * An undefined custom element is not: a carousel, a FAB menu, or a menu that
- * opted out keeps its own pre-upgrade rule. A rendered mtrl child carries
- * this attribute and is covered by the host selector. The deepest pre-upgrade
- * subject is a direct child, including a following sibling of one (`> * + *`);
- * none styles a grandchild or a child's pseudo-element. `all` does not reset
- * custom properties; the element rules set none. Not tag-specific, so
- * retagging for another prefix leaves it as it is.
- */
 export declare const preupgradeRollback: () => string;
-/**
- * Pre-upgrade CSS, built for the default prefix, for another one: every tag
- * selector `m-*` becomes `<prefix>-*`. The rules name tags only in selectors
- * (`m-tabs:not(:defined)>*`), and no value starts a word with `m-`.
- */
 export declare const retagPreupgrade: (css: string, prefix: string) => string;
-/** The rules as one layered stylesheet, for each prefix. The rollback is once, after them. */
 export declare const preupgradeSheet: (css: string, prefixes?: Iterable<string>) => string;
-/**
- * Applies the registered entries to a shadow root, in the given order.
- * Falls back to `<style>` elements where constructable stylesheets are missing.
- */
 export declare const applyStyles: (root: ShadowRoot, names: readonly string[]) => void;

package/dist/elements/switch.d.ts

@@ -1,15 +1,3 @@
-/**
- * `<m-switch>`: the switch as a form-associated custom element.
- *
- * The `checked` attribute is the default state and the `checked` property the
- * live one, as on a native checkbox: the attribute moves the state until the
- * user or script changes it. Children are the label.
- *
- * Parts: `switch`, `container`, `content`, `label`, `helper`, `input`, `track`, `thumb`,
- * `thumb-icon`.
- *
- * @module elements
- */
 import type { SwitchComponent } from "../components/switch/types.js";
 import { type DefineOptions, type ElementInstance } from "./define.js";
 declare const switchSpec: {
@@ -37,7 +25,6 @@ declare const switchSpec: {
             config: string;
             update: (c: SwitchComponent, v: import("./define.js").AttributeValue) => undefined;
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
         icon: {
             type: "string";
             config: string;
@@ -60,7 +47,11 @@ declare const switchSpec: {
             config: string;
         };
     };
-    methods: readonly ["toggle", "check", "uncheck"];
+    methods: readonly [
+        "toggle",
+        "check",
+        "uncheck"
+    ];
     model: "checked";
     events: {
         change: {
@@ -88,12 +79,9 @@ declare const switchSpec: {
 };
 export declare const switchElement: import("./define.js").ElementDefinition<SwitchComponent>;
 export type SwitchSpec = typeof switchSpec;
-/** `<m-switch>` as a ref or a query returns it. */
 export type SwitchElement = ElementInstance<SwitchSpec, SwitchComponent>;
-/** Registers `<m-switch>` (or `<prefix-switch>`). */
 export declare const defineSwitch: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-switch": SwitchElement;
     }

package/dist/elements/tabs.d.ts

@@ -1,17 +1,3 @@
-/**
- * `<m-tabs>` with `<m-tab>` children.
- *
- * Each `<m-tab>` declares one tab (`value`, `icon`, `badge`, `disabled`, and its
- * text as content). The tabs element reads them into the factory's config and
- * rebuilds when they change; the children stay where the framework put them.
- * `value` on `<m-tabs>` is the default selection, which moves the live one
- * until the user or script changes it; the `value` property is the live
- * selection.
- *
- * Parts: `tabs`, `scroll`, `tab`, `button`, `icon`, `text`, `ripple`, `indicator`, `divider`.
- *
- * @module elements
- */
 import type { TabsComponent } from "../components/tabs/types.js";
 import { type Config, type DefineOptions, type ElementAttributes, type ElementInstance } from "./define.js";
 declare const tabsSpec: {
@@ -47,12 +33,7 @@ declare const tabsSpec: {
 };
 export declare const tabsElement: import("./define.js").ElementDefinition<TabsComponent>;
 export type TabsSpec = typeof tabsSpec;
-/** `<m-tabs>` as a ref or a query returns it. */
 export type TabsElement = ElementInstance<TabsSpec, TabsComponent>;
-/**
- * `<m-tab>` declares one tab and renders nothing. Its text content is the
- * label unless `label` is set.
- */
 export declare const tabDeclaration: {
     readonly name: "tab";
     readonly attributes: {
@@ -62,7 +43,6 @@ export declare const tabDeclaration: {
         readonly label: {
             readonly type: "string";
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
         readonly icon: {
             readonly type: "string";
         };
@@ -75,10 +55,8 @@ export declare const tabDeclaration: {
     };
 };
 export type TabAttributes = ElementAttributes<typeof tabDeclaration>;
-/** Registers `<m-tabs>` and `<m-tab>` (or with another prefix). */
 export declare const defineTabs: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-tabs": TabsElement;
         "m-tab": HTMLElement & TabAttributes;

package/dist/elements/text-field.d.ts

@@ -1,33 +1,6 @@
-/**
- * `<m-text-field>`: the text field as a form-associated custom element.
- *
- * The `value` attribute is the default value and the `value` property the
- * live one, as on a native input: the attribute moves the value until the
- * user or script changes it. The `label` attribute is the floating
- * label, which the factory renders; there is no slot. The `trailing-icon`
- * attribute is the trailing icon's markup and `trailing-icon-label` its
- * button's accessible name: without the label the icon is decorative.
- *
- * Changing `label` or `type` recreates the field and keeps the value.
- * Changing `trailing-icon-label` updates the existing icon in place, so the
- * button, the input and focus stay. A field created without a label has no
- * label element to update, and `type="multiline"` swaps the input for a
- * textarea.
- *
- * A click, Enter or Space on the trailing icon button dispatches `trailing`
- * from the host, with the factory's `{ value, event }`, bubbling and composed.
- *
- * Parts: `text-field`, `field`, `label`, `input`, `leading-icon`, `trailing-icon`, `prefix`,
- * `suffix`, `supporting`, `helper`, `counter`, `outline`, `outline-leading`, `outline-notch`,
- * `outline-trailing`.
- *
- * @module elements
- */
 import type { TextFieldComponent } from "../components/text-field/types.js";
 import { type AttributeValue, type DefineOptions, type ElementInstance } from "./define.js";
-/** The text field, with the methods the element adds to it. */
 export type TextFieldElementComponent = TextFieldComponent & {
-    /** Selects the field's text. */
     select: () => void;
 };
 declare const textFieldSpec: {
@@ -79,23 +52,16 @@ declare const textFieldSpec: {
             config: string;
             update: (c: TextFieldElementComponent, v: AttributeValue) => undefined;
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
         "leading-icon": {
             type: "string";
             config: string;
             update: (c: TextFieldElementComponent, v: AttributeValue) => undefined;
         };
-        /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
         "trailing-icon": {
             type: "string";
             config: string;
             update: (c: TextFieldElementComponent, v: AttributeValue, host: HTMLElement) => undefined;
         };
-        /**
-         * The trailing icon button's accessible name. With it the icon is a button
-         * that emits `trailing`; without it, or with an empty value, the icon is
-         * decorative. A change updates the existing icon through the factory setter.
-         */
         "trailing-icon-label": {
             type: "string";
             config: string;
@@ -148,7 +114,10 @@ declare const textFieldSpec: {
             set: (c: TextFieldElementComponent, v: unknown) => undefined;
         };
     };
-    methods: readonly ["select", "setError"];
+    methods: readonly [
+        "select",
+        "setError"
+    ];
     model: "value";
     events: {
         input: {
@@ -182,12 +151,9 @@ declare const textFieldSpec: {
 };
 export declare const textFieldElement: import("./define.js").ElementDefinition<TextFieldElementComponent>;
 export type TextFieldSpec = typeof textFieldSpec;
-/** `<m-text-field>` as a ref or a query returns it. */
 export type TextFieldElement = ElementInstance<TextFieldSpec, TextFieldElementComponent>;
-/** Registers `<m-text-field>` (or `<prefix-text-field>`). */
 export declare const defineTextField: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-text-field": TextFieldElement;
     }

package/dist/elements/timepicker.d.ts

@@ -1,54 +1,14 @@
-/**
- * `<m-timepicker>`: the time picker as a form-associated custom element.
- *
- * The factory renders no field of its own, only its modal dialog, so the
- * element shows nothing until it opens: an app opens it from its own control
- * with `show()` or the `open` attribute (a `<label for>` pointing at it opens
- * it too), and shows the value where it likes. The dialog is a native
- * `<dialog>` in the element's shadow root shown with `showModal()`: the page
- * outside is inert, and focus goes back to whatever opened it.
- *
- * The value is a 24-hour time, `HH:MM`, or `HH:MM:SS` when `step` is under a
- * minute, as on `<input type=time>`; empty is `""`. The dial starts on the
- * value, or on the current time when there is none.
- *
- * The dial edits a draft: `input` is dispatched with `{ value, draftValue }`
- * as it moves, and OK commits it, dispatching `change` with `{ value }` when
- * the time differs and `confirm` with `{ value }` on every OK. Cancel, Escape
- * and the backdrop discard the draft. `open`
- * reflects the dialog's state, as on `<dialog open>`; `open` and `close` are
- * dispatched as it opens and closes (not when the attribute is what changed).
- *
- * `step` is in seconds, as on `<input type=time>`: under a minute it shows
- * seconds and is their step (`secondStep`); from a minute up it is the
- * minute step (`minuteStep`), rounded to whole minutes, which is the finest
- * the dial has. `show-seconds` shows seconds whatever the step, so a 5- or
- * 15-minute step can go with them; the value is then `HH:MM:SS`. `min` and
- * `max` are the factory's `minTime` and `maxTime`. Those four and `name` have
- * no setter: changing one recreates the picker, keeping the value. `disabled` is the factory's: it does not open. The
- * element reports `required` itself, as `valueMissing`.
- *
- * Parts: `time-picker`, `dialog`, `title`, `selectors`, `hours`, `minutes`, `period`, `dial`,
- * `dial-handle`, `actions`, `cancel`, `confirm`, among others.
- *
- * @module elements
- */
 import { type TimePickerComponent, type TimePickerEvents } from "../components/timepicker/types.js";
 import { type DefineOptions, type ElementHost, type ElementInstance } from "./define.js";
-/** The time picker as the element sees it: its value can be empty. */
 export interface TimepickerElementComponent {
     element: HTMLElement;
     picker: TimePickerComponent;
-    /** The committed time, or "" before one is set or confirmed. */
     getValue: () => string;
     setValue: (value: string) => void;
-    /** Opens the dialog, unless the picker is disabled. */
     show: () => void;
-    /** Closes the dialog without committing. */
     close: () => void;
     isOpen: () => boolean;
     required: boolean;
-    /** Subscribes to the time picker's events; `change` and `input` carry the element's possibly empty value. */
     on: <K extends keyof TimePickerEvents>(event: K, handler: TimePickerEvents[K]) => void;
     off: <K extends keyof TimePickerEvents>(event: K, handler: TimePickerEvents[K]) => void;
     destroy: () => void;
@@ -122,7 +82,10 @@ declare const timepickerSpec: {
         };
     };
     model: "value";
-    methods: readonly ["show", "close"];
+    methods: readonly [
+        "show",
+        "close"
+    ];
     events: {
         change: {
             detail: (payload: unknown) => {
@@ -161,12 +124,9 @@ declare const timepickerSpec: {
 };
 export declare const timepickerElement: import("./define.js").ElementDefinition<TimepickerElementComponent>;
 export type TimepickerSpec = typeof timepickerSpec;
-/** `<m-timepicker>` as a ref or a query returns it. */
 export type TimepickerElement = ElementInstance<TimepickerSpec, TimepickerElementComponent>;
-/** Registers `<m-timepicker>` (or `<prefix-timepicker>`). */
 export declare const defineTimepicker: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-timepicker": TimepickerElement;
     }

package/dist/elements/toolbar.d.ts

@@ -1,28 +1,11 @@
-/**
- * `<m-toolbar>`: M3 Expressive's docked and floating toolbars as a container
- * with slots.
- *
- * Children are the items (`<m-icon-button>`, `<m-button>`, a text field),
- * inside the element with the `toolbar` role: one tab stop, walked with the
- * arrow keys, Home and End. Each item's host takes the tab stop and delegates
- * focus to its control. `slot="fab"` takes a FAB, beside the toolbar and
- * outside its tab stop. `slot="overflow"` takes an `<m-menu>`: the toolbar
- * adds a "more" button and makes it the menu's anchor.
- *
- * `variant`, `orientation`, `placement`, `arrangement`, `fab-position` and
- * `scroll-behavior` are the factory's options; `color` and `flat` (no
- * elevation) change in place. `show()` and `hide()` move the toolbar on and
- * off screen, and `show` and `hide` are dispatched when it does.
- *
- * Parts: `toolbar`, `bar`, `fab`, `overflow`.
- *
- * @module elements
- */
 import type { ToolbarComponent } from "../components/toolbar/types.js";
 import { type Config, type DefineOptions, type ElementInstance } from "./define.js";
 declare const toolbarSpec: {
     name: string;
-    slots: readonly ["fab", "overflow"];
+    slots: readonly [
+        "fab",
+        "overflow"
+    ];
     create: (config: Config) => ToolbarComponent;
     styles: string[];
     hostStyles: string;
@@ -73,7 +56,10 @@ declare const toolbarSpec: {
             update: (c: ToolbarComponent, v: import("./define.js").AttributeValue) => void;
         };
     };
-    methods: readonly ["show", "hide"];
+    methods: readonly [
+        "show",
+        "hide"
+    ];
     events: {
         show: {
             detail: () => null;
@@ -90,12 +76,9 @@ declare const toolbarSpec: {
 };
 export declare const toolbarElement: import("./define.js").ElementDefinition<ToolbarComponent>;
 export type ToolbarSpec = typeof toolbarSpec;
-/** `<m-toolbar>` as a ref or a query returns it. */
 export type ToolbarElement = ElementInstance<ToolbarSpec, ToolbarComponent>;
-/** Registers `<m-toolbar>` (or `<prefix-toolbar>`). */
 export declare const defineToolbar: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-toolbar": ToolbarElement;
     }

package/dist/elements/tooltip.d.ts

@@ -1,29 +1,3 @@
-/**
- * `<m-tooltip>`: a tooltip for another element, in the top layer.
- *
- * The target is the element whose id is the `for` attribute, looked up in
- * the tooltip's own root and then the document, or the element given to the
- * `target` property, which wins over `for`. The text is the `text` attribute,
- * or the element's text when there is none; the factory writes a string, so
- * the text is read rather than slotted. The tooltip shows on hover and focus
- * as the factory does, and `show()`/`hide()` drive it from script;
- * `no-show-on-hover` and `no-show-on-focus` turn either trigger off.
- *
- * The surface stays in the element's shadow root, with its styles, and opens
- * in the top layer (`layer: "top"`). An id reference cannot cross into that
- * root, so the target is described by the host: the target's
- * `aria-describedby` names the host's id (one is given when it has none), and
- * the host carries the text as its `aria-label`, which a description reads
- * whether the tooltip shows or not. The host is `aria-hidden`, so the text is
- * not read a second time as page content. A target in a
- * shadow root below the host's tree is described through
- * `ariaDescribedByElements`; one in a tree above it, which can reference
- * neither, gets the text as its `aria-description`.
- *
- * Parts: `tooltip`, `arrow`.
- *
- * @module elements
- */
 import type { TooltipComponent } from "../components/tooltip/types.js";
 import { type DefineOptions, type ElementInstance } from "./define.js";
 declare const tooltipSpec: {
@@ -73,7 +47,10 @@ declare const tooltipSpec: {
             set: (c: TooltipComponent, v: unknown) => void;
         };
     };
-    methods: readonly ["show", "hide"];
+    methods: readonly [
+        "show",
+        "hide"
+    ];
     config: (host: HTMLElement) => {
         text?: undefined;
     } | {
@@ -84,12 +61,9 @@ declare const tooltipSpec: {
 };
 export declare const tooltipElement: import("./define.js").ElementDefinition<TooltipComponent>;
 export type TooltipSpec = typeof tooltipSpec;
-/** `<m-tooltip>` as a ref or a query returns it. */
 export type TooltipElement = ElementInstance<TooltipSpec, TooltipComponent>;
-/** Registers `<m-tooltip>` (or `<prefix-tooltip>`). */
 export declare const defineTooltip: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-tooltip": TooltipElement;
     }

package/dist/elements/top-app-bar.d.ts

@@ -1,26 +1,11 @@
-/**
- * `<m-top-app-bar>`: the top app bar as a container with slots.
- *
- * Children are the headline, and `headline` its text when there are none;
- * `slot="leading"` takes the navigation icon button and `slot="trailing"` the
- * action icon buttons. `type` is `small`, `center`, `medium` or `large`, as
- * the factory names them.
- *
- * The bar shows its scrolled state once the window scrolls past
- * `scroll-threshold`; `no-scroll` turns that off and `no-compress` keeps a
- * medium or large bar from compressing. `scroll-target` names the id of a
- * scrolling element to follow instead of the window; any other scroller can
- * drive the bar through `setScrollState(scrolled)`.
- *
- * Parts: `top-app-bar`, `leading`, `headline`, `trailing`.
- *
- * @module elements
- */
 import type { TopAppBarComponent } from "../components/top-app-bar/top-app-bar.js";
 import { type Config, type DefineOptions, type ElementInstance } from "./define.js";
 declare const topAppBarSpec: {
     name: string;
-    slots: readonly ["leading", "trailing"];
+    slots: readonly [
+        "leading",
+        "trailing"
+    ];
     create: (config: Config) => TopAppBarComponent;
     styles: string[];
     hostStyles: string;
@@ -53,18 +38,17 @@ declare const topAppBarSpec: {
             update: (c: TopAppBarComponent, v: import("./define.js").AttributeValue) => void;
         };
     };
-    methods: readonly ["setScrollState"];
+    methods: readonly [
+        "setScrollState"
+    ];
     config: (host: HTMLElement) => Config;
     setup: (host: import("./define.js").ElementHost<TopAppBarComponent>, component: TopAppBarComponent) => () => void;
 };
 export declare const topAppBarElement: import("./define.js").ElementDefinition<TopAppBarComponent>;
 export type TopAppBarSpec = typeof topAppBarSpec;
-/** `<m-top-app-bar>` as a ref or a query returns it. */
 export type TopAppBarElement = ElementInstance<TopAppBarSpec, TopAppBarComponent>;
-/** Registers `<m-top-app-bar>` (or `<prefix-top-app-bar>`). */
 export declare const defineTopAppBar: (options?: DefineOptions) => string;
 declare global {
-    /** `document.querySelector("m-…")` and `createElement` return the element's type (the default prefix). */
     interface HTMLElementTagNameMap {
         "m-top-app-bar": TopAppBarElement;
     }

package/dist/index.d.ts

@@ -1,14 +1,3 @@
-/**
- * Main mtrl library exports
- *
- * The root is the components and the few helpers an app configures them with.
- * The rest of core is at its subpath (`material/core/compose`, `material/core/dom`, ...):
- * material 3.0.0 removed it from the root, and scripts/fixtures/root-exports.md
- * says where each name went. The list is pinned by scripts/fixtures/root-exports.json:
- * `bun run root-exports:update`.
- *
- * @packageDocumentation
- */
 export * from "./components/index.js";
 export { setComponentDefaults, getComponentDefaults, setGlobalDefaults, clearGlobalDefaults, schemeToTokens, THEME_ROLES, configureHTML } from "./core/index.js";
 export type { ThemeRole, SchemeRoles, SchemeToTokensOptions, ThemeTokens, ComponentConfigMap, HTMLPolicy, HTMLInput, TrustedHTMLLike } from "./core/index.js";

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "3.2.6",
+  "version": "3.3.0",
   "description": "Material Design 3 components for the web: plain JavaScript, web components, and React, Vue, Svelte and Solid components. TypeScript, zero dependencies.",
   "author": "floor",
   "license": "MIT",

package/dist/react/create.d.ts

@@ -1,44 +1,16 @@
-/**
- * React components over the elements.
- *
- * `createComponent` renders the element's tag and keeps React's model:
- * attributes are passed as attributes, so server-rendered markup carries them;
- * live-state properties (`checked`, `value`) are set on the element after each
- * render, and are controlled when given, like React's own inputs; the
- * attribute they shadow is the `default*` prop. Events are typed `on*`
- * callbacks. The element is registered on first mount, never at import.
- *
- * Works the same on React 18 and 19: the component sets properties and
- * attaches listeners itself rather than relying on React 19's custom element
- * support.
- *
- * @module react
- */
 import * as React from "react";
 import type { DefineOptions, ElementEvents, ElementProps, ElementSlotProp } from "../elements/index.js";
 import { type ComponentSpec, type DeclarationSpec, type DefaultProps, type FormProps, type Pascal, type RetiredEvents } from "../elements/adapter.js";
 export { configure } from "../elements/adapter.js";
 export type { DefaultProps, FormProps } from "../elements/adapter.js";
-/** `change` → `onChange`, typed with the element's event. */
 export type EventProps<S> = {
     [K in keyof ElementEvents<S> & string as `on${Pascal<K>}`]?: (event: ElementEvents<S>[K]) => void;
 };
 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.
- */
 type SlotProps<S> = {
     [K in ElementSlotProp<S>]?: React.ReactNode;
 };
 type OwnProps<S> = Omit<BaseProps<S>, ElementSlotProp<S>> & SlotProps<S>;
-/**
- * `@types/react` 18's `HTMLAttributes` has no `popover` through 18.3.31.
- * `enterKeyHint` joins that interface in 18.3.31; earlier 18 types it on inputs.
- * `nonce` is absent on 18.0.0 and present by 18.0.28.
- * A release that already declares a key keeps its own type.
- */
 type ReactHostGaps = {
     popover?: "" | "auto" | "manual" | "hint";
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
@@ -47,31 +19,17 @@ type ReactHostGaps = {
 type Missing<Base, Extra> = {
     [K in Exclude<keyof Extra, keyof Base>]?: K extends keyof Extra ? Extra[K] : never;
 };
-/** `HTMLAttributes` for the host, plus globals a supported React 18 type omits. */
 export type ReactHostAttributes<E extends HTMLElement = HTMLElement> = React.HTMLAttributes<E> & Missing<React.HTMLAttributes<E>, ReactHostGaps>;
-/**
- * Props of a generated component: the element's own, plus any HTML attribute for the host.
- * `OwnProps` includes the element's `on*` handlers, so those names keep the component's event.
- */
 export type ComponentProps<S> = OwnProps<S> & FormProps<S> & Omit<ReactHostAttributes, keyof OwnProps<S> | RetiredProps<S>> & {
     [K in RetiredProps<S>]?: `${K} was removed in material 3.0.0: use onChange`;
 } & {
     children?: React.ReactNode;
 };
-/** The handler props of events material 3.0.0 removed (`onToggle` on the icon button): refused, see `RetiredEvents`. */
 type RetiredProps<S> = `on${Pascal<RetiredEvents<S>>}`;
-/** A generated component; named so declarations stay short. */
 export type MComponent<S, E extends HTMLElement> = React.ForwardRefExoticComponent<React.PropsWithoutRef<ComponentProps<S>> & React.RefAttributes<E>>;
-/**
- * The React component for an element.
- * @param spec - The element's spec (`switchElement.spec`)
- * @param define - Registers the element and anything it needs (`defineSwitch`)
- */
 export declare const createComponent: <S, E extends HTMLElement>(spec: ComponentSpec, define: (options?: DefineOptions) => string, displayName: string) => MComponent<S, E>;
 export type DeclarationProps<A> = A & Omit<ReactHostAttributes, keyof A> & {
     children?: React.ReactNode;
 };
-/** A generated declaration component. */
 export type MDeclaration<A> = React.ForwardRefExoticComponent<React.PropsWithoutRef<DeclarationProps<A>> & React.RefAttributes<HTMLElement>>;
-/** The React component for a declaration child; its parent registers the tag. */
 export declare const createDeclaration: <A>(spec: DeclarationSpec, displayName: string) => MDeclaration<A>;

package/dist/react/index.d.ts

@@ -1,9 +1,3 @@
-/**
- * React components for the elements. Each renders its `<m-*>` tag, registers
- * it on first mount and loads its CSS.
- *
- * @module react
- */
 export { configure } from "./create.js";
 export type { ComponentProps, DeclarationProps, EventProps, DefaultProps, FormProps, MComponent, MDeclaration } from "./create.js";
 export { Button } from "./button.js";

package/dist/react/jsx.d.ts

@@ -1,22 +1,9 @@
-/**
- * Types the bare `m-*` tags in React's JSX, for the elements used directly
- * rather than through the components. Types only, opt in once: `import type {} from "material/react/jsx";`
- *
- * @module react/jsx
- */
 import type * as React from "react";
 import type { ElementEvents, ElementMarkup } from "../elements/index.js";
 import type { ReactHostAttributes } from "./create.js";
-/**
- * The element's events as React 19 listens to them on a custom element: an
- * `on<event>` prop in lower case gets the element's own event
- * (`onchange={(e) => e.detail.value}`). `onChange` stays React's synthetic
- * event, which has no `detail`; React 18 sets no event props on a custom element.
- */
 type Events<S> = {
     [K in keyof ElementEvents<S> & string as `on${Lowercase<K>}`]?: (event: ElementEvents<S>[K]) => void;
 };
-/** A tag's props: its attributes as markup writes them, its events, and any HTML attribute. */
 type Tag<S, E extends HTMLElement> = Omit<React.DetailedHTMLProps<ReactHostAttributes<E>, E>, keyof ElementMarkup<S> | keyof Events<S>> & ElementMarkup<S> & Events<S>;
 declare module "react" {
     namespace JSX {