material 1.0.4 → 3.0.0-next.0

package/dist/svelte/SplitButton.svelte

@@ -0,0 +1,28 @@
+<!-- Generated by mtrl's build (scripts/svelte-package.ts) from src/elements. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import "material/elements/css/progress";
+  import "material/elements/css/button";
+  import "material/elements/css/menu";
+  import "material/elements/css/split-button";
+  import { splitButtonElement, defineSplitButton } from "../elements/split-button.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(splitButtonElement.spec, defineSplitButton);
+  const action = runtime.action;
+  let {
+    children,
+    ...props
+  }: { children?: Snippet; [key: string]: unknown } = $props();
+  // `bind:this` on the component reads `element`, as Vue's template ref does (FLO-325).
+  let node = $state<HTMLElement | null>(null);
+  export { node as element };
+  let shadow = $derived(shadowMarkup(runtime, props, children, {  }));
+</script>
+
+<svelte:element
+  this={runtime.tag}
+  bind:this={node}
+  {...runtime.attributes(props, {  }, shadow)}
+  use:action={{ props, live: {  }, set: {  } }}
+>{#if shadow}{@html shadow}{/if}{@render children?.()}{#each runtime.snippets(props) as [slot, snippet] (slot)}<span style="display: contents" {...{ slot }}>{@render snippet()}</span>{/each}</svelte:element>

package/dist/svelte/SplitButton.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from "svelte";
+import type { SplitButtonSpec, SplitButtonElement } from "../elements/index.js";
+import type { Bindable, SvelteProps } from "./runtime.js";
+declare const SplitButton: Component<SvelteProps<SplitButtonSpec>, { readonly element: SplitButtonElement | null }, Bindable<SplitButtonSpec>>;
+export default SplitButton;

package/dist/svelte/Switch.svelte

@@ -0,0 +1,26 @@
+<!-- Generated by mtrl's build (scripts/svelte-package.ts) from src/elements. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import "material/elements/css/switch";
+  import { switchElement, defineSwitch } from "../elements/switch.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(switchElement.spec, defineSwitch);
+  const action = runtime.action;
+  let {
+    checked = $bindable(),
+    children,
+    ...props
+  }: { checked?: unknown; children?: Snippet; [key: string]: unknown } = $props();
+  // `bind:this` on the component reads `element`, as Vue's template ref does (FLO-325).
+  let node = $state<HTMLElement | null>(null);
+  export { node as element };
+  let shadow = $derived(shadowMarkup(runtime, props, children, { checked }));
+</script>
+
+<svelte:element
+  this={runtime.tag}
+  bind:this={node}
+  {...runtime.attributes(props, { checked }, shadow)}
+  use:action={{ props, live: { checked }, set: { checked: (next: unknown) => (checked = next) } }}
+>{#if shadow}{@html shadow}{/if}{@render children?.()}{#each runtime.snippets(props) as [slot, snippet] (slot)}<span style="display: contents" {...{ slot }}>{@render snippet()}</span>{/each}</svelte:element>

package/dist/svelte/Switch.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from "svelte";
+import type { SwitchSpec, SwitchElement } from "../elements/index.js";
+import type { Bindable, SvelteProps } from "./runtime.js";
+declare const Switch: Component<SvelteProps<SwitchSpec>, { readonly element: SwitchElement | null }, Bindable<SwitchSpec>>;
+export default Switch;

package/dist/svelte/Tab.svelte

@@ -0,0 +1,11 @@
+<!-- Generated by mtrl's build (scripts/svelte-package.ts) from src/elements. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { tabDeclaration } from "../elements/tabs.js";
+  import { declaration } from "./runtime.js";
+
+  const runtime = declaration(tabDeclaration);
+  let { children, ...props }: { children?: Snippet; [key: string]: unknown } = $props();
+</script>
+
+<svelte:element this={runtime.tag} {...runtime.attributes(props)}>{@render children?.()}</svelte:element>

package/dist/svelte/Tab.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from "svelte";
+import type { TabAttributes } from "../elements/index.js";
+import type { DeclarationProps } from "./runtime.js";
+declare const Tab: Component<DeclarationProps<TabAttributes>>;
+export default Tab;

package/dist/svelte/Tabs.svelte

@@ -0,0 +1,29 @@
+<!-- Generated by mtrl's build (scripts/svelte-package.ts) from src/elements. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import "material/elements/css/badge";
+  import "material/elements/css/progress";
+  import "material/elements/css/button";
+  import "material/elements/css/tabs";
+  import { tabsElement, defineTabs } from "../elements/tabs.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(tabsElement.spec, defineTabs);
+  const action = runtime.action;
+  let {
+    value = $bindable(),
+    children,
+    ...props
+  }: { value?: unknown; children?: Snippet; [key: string]: unknown } = $props();
+  // `bind:this` on the component reads `element`, as Vue's template ref does (FLO-325).
+  let node = $state<HTMLElement | null>(null);
+  export { node as element };
+  let shadow = $derived(shadowMarkup(runtime, props, children, { value }));
+</script>
+
+<svelte:element
+  this={runtime.tag}
+  bind:this={node}
+  {...runtime.attributes(props, { value }, shadow)}
+  use:action={{ props, live: { value }, set: { value: (next: unknown) => (value = next) } }}
+>{#if shadow}{@html shadow}{/if}{@render children?.()}{#each runtime.snippets(props) as [slot, snippet] (slot)}<span style="display: contents" {...{ slot }}>{@render snippet()}</span>{/each}</svelte:element>

package/dist/svelte/Tabs.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from "svelte";
+import type { TabsSpec, TabsElement } from "../elements/index.js";
+import type { Bindable, SvelteProps } from "./runtime.js";
+declare const Tabs: Component<SvelteProps<TabsSpec>, { readonly element: TabsElement | null }, Bindable<TabsSpec>>;
+export default Tabs;

package/dist/svelte/TextField.svelte

@@ -0,0 +1,26 @@
+<!-- Generated by mtrl's build (scripts/svelte-package.ts) from src/elements. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import "material/elements/css/text-field";
+  import { textFieldElement, defineTextField } from "../elements/text-field.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(textFieldElement.spec, defineTextField);
+  const action = runtime.action;
+  let {
+    value = $bindable(),
+    children,
+    ...props
+  }: { value?: unknown; children?: Snippet; [key: string]: unknown } = $props();
+  // `bind:this` on the component reads `element`, as Vue's template ref does (FLO-325).
+  let node = $state<HTMLElement | null>(null);
+  export { node as element };
+  let shadow = $derived(shadowMarkup(runtime, props, children, { value }));
+</script>
+
+<svelte:element
+  this={runtime.tag}
+  bind:this={node}
+  {...runtime.attributes(props, { value }, shadow)}
+  use:action={{ props, live: { value }, set: { value: (next: unknown) => (value = next) } }}
+>{#if shadow}{@html shadow}{/if}{@render children?.()}{#each runtime.snippets(props) as [slot, snippet] (slot)}<span style="display: contents" {...{ slot }}>{@render snippet()}</span>{/each}</svelte:element>

package/dist/svelte/TextField.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from "svelte";
+import type { TextFieldSpec, TextFieldElement } from "../elements/index.js";
+import type { Bindable, SvelteProps } from "./runtime.js";
+declare const TextField: Component<SvelteProps<TextFieldSpec>, { readonly element: TextFieldElement | null }, Bindable<TextFieldSpec>>;
+export default TextField;

package/dist/svelte/Timepicker.svelte

@@ -0,0 +1,26 @@
+<!-- Generated by mtrl's build (scripts/svelte-package.ts) from src/elements. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import "material/elements/css/timepicker";
+  import { timepickerElement, defineTimepicker } from "../elements/timepicker.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(timepickerElement.spec, defineTimepicker);
+  const action = runtime.action;
+  let {
+    value = $bindable(),
+    children,
+    ...props
+  }: { value?: unknown; children?: Snippet; [key: string]: unknown } = $props();
+  // `bind:this` on the component reads `element`, as Vue's template ref does (FLO-325).
+  let node = $state<HTMLElement | null>(null);
+  export { node as element };
+  let shadow = $derived(shadowMarkup(runtime, props, children, { value }));
+</script>
+
+<svelte:element
+  this={runtime.tag}
+  bind:this={node}
+  {...runtime.attributes(props, { value }, shadow)}
+  use:action={{ props, live: { value }, set: { value: (next: unknown) => (value = next) } }}
+>{#if shadow}{@html shadow}{/if}{@render children?.()}{#each runtime.snippets(props) as [slot, snippet] (slot)}<span style="display: contents" {...{ slot }}>{@render snippet()}</span>{/each}</svelte:element>

package/dist/svelte/Timepicker.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from "svelte";
+import type { TimepickerSpec, TimepickerElement } from "../elements/index.js";
+import type { Bindable, SvelteProps } from "./runtime.js";
+declare const Timepicker: Component<SvelteProps<TimepickerSpec>, { readonly element: TimepickerElement | null }, Bindable<TimepickerSpec>>;
+export default Timepicker;

package/dist/svelte/Toolbar.svelte

@@ -0,0 +1,26 @@
+<!-- Generated by mtrl's build (scripts/svelte-package.ts) from src/elements. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import "material/elements/css/icon-button";
+  import "material/elements/css/toolbar";
+  import { toolbarElement, defineToolbar } from "../elements/toolbar.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(toolbarElement.spec, defineToolbar);
+  const action = runtime.action;
+  let {
+    children,
+    ...props
+  }: { children?: Snippet; [key: string]: unknown } = $props();
+  // `bind:this` on the component reads `element`, as Vue's template ref does (FLO-325).
+  let node = $state<HTMLElement | null>(null);
+  export { node as element };
+  let shadow = $derived(shadowMarkup(runtime, props, children, {  }));
+</script>
+
+<svelte:element
+  this={runtime.tag}
+  bind:this={node}
+  {...runtime.attributes(props, {  }, shadow)}
+  use:action={{ props, live: {  }, set: {  } }}
+>{#if shadow}{@html shadow}{/if}{@render children?.()}{#each runtime.snippets(props) as [slot, snippet] (slot)}<span style="display: contents" {...{ slot }}>{@render snippet()}</span>{/each}</svelte:element>

package/dist/svelte/Toolbar.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from "svelte";
+import type { ToolbarSpec, ToolbarElement } from "../elements/index.js";
+import type { Bindable, SvelteProps } from "./runtime.js";
+declare const Toolbar: Component<SvelteProps<ToolbarSpec>, { readonly element: ToolbarElement | null }, Bindable<ToolbarSpec>>;
+export default Toolbar;

package/dist/svelte/Tooltip.svelte

@@ -0,0 +1,26 @@
+<!-- Generated by mtrl's build (scripts/svelte-package.ts) from src/elements. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import "material/elements/css/tooltip";
+  import { tooltipElement, defineTooltip } from "../elements/tooltip.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(tooltipElement.spec, defineTooltip);
+  const action = runtime.action;
+  let {
+    target = $bindable(),
+    children,
+    ...props
+  }: { target?: unknown; children?: Snippet; [key: string]: unknown } = $props();
+  // `bind:this` on the component reads `element`, as Vue's template ref does (FLO-325).
+  let node = $state<HTMLElement | null>(null);
+  export { node as element };
+  let shadow = $derived(shadowMarkup(runtime, props, children, { target }));
+</script>
+
+<svelte:element
+  this={runtime.tag}
+  bind:this={node}
+  {...runtime.attributes(props, { target }, shadow)}
+  use:action={{ props, live: { target }, set: { target: (next: unknown) => (target = next) } }}
+>{#if shadow}{@html shadow}{/if}{@render children?.()}{#each runtime.snippets(props) as [slot, snippet] (slot)}<span style="display: contents" {...{ slot }}>{@render snippet()}</span>{/each}</svelte:element>

package/dist/svelte/Tooltip.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from "svelte";
+import type { TooltipSpec, TooltipElement } from "../elements/index.js";
+import type { Bindable, SvelteProps } from "./runtime.js";
+declare const Tooltip: Component<SvelteProps<TooltipSpec>, { readonly element: TooltipElement | null }, Bindable<TooltipSpec>>;
+export default Tooltip;

package/dist/svelte/TopAppBar.svelte

@@ -0,0 +1,25 @@
+<!-- Generated by mtrl's build (scripts/svelte-package.ts) from src/elements. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import "material/elements/css/top-app-bar";
+  import { topAppBarElement, defineTopAppBar } from "../elements/top-app-bar.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(topAppBarElement.spec, defineTopAppBar);
+  const action = runtime.action;
+  let {
+    children,
+    ...props
+  }: { children?: Snippet; [key: string]: unknown } = $props();
+  // `bind:this` on the component reads `element`, as Vue's template ref does (FLO-325).
+  let node = $state<HTMLElement | null>(null);
+  export { node as element };
+  let shadow = $derived(shadowMarkup(runtime, props, children, {  }));
+</script>
+
+<svelte:element
+  this={runtime.tag}
+  bind:this={node}
+  {...runtime.attributes(props, {  }, shadow)}
+  use:action={{ props, live: {  }, set: {  } }}
+>{#if shadow}{@html shadow}{/if}{@render children?.()}{#each runtime.snippets(props) as [slot, snippet] (slot)}<span style="display: contents" {...{ slot }}>{@render snippet()}</span>{/each}</svelte:element>

package/dist/svelte/TopAppBar.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from "svelte";
+import type { TopAppBarSpec, TopAppBarElement } from "../elements/index.js";
+import type { Bindable, SvelteProps } from "./runtime.js";
+declare const TopAppBar: Component<SvelteProps<TopAppBarSpec>, { readonly element: TopAppBarElement | null }, Bindable<TopAppBarSpec>>;
+export default TopAppBar;

package/dist/svelte/index.d.ts

@@ -0,0 +1,52 @@
+export { default as Button } from "./Button.svelte";
+export { default as Switch } from "./Switch.svelte";
+export { default as Tabs } from "./Tabs.svelte";
+export { default as Progress } from "./Progress.svelte";
+export { default as LoadingIndicator } from "./LoadingIndicator.svelte";
+export { default as Badge } from "./Badge.svelte";
+export { default as Divider } from "./Divider.svelte";
+export { default as IconButton } from "./IconButton.svelte";
+export { default as Fab } from "./Fab.svelte";
+export { default as ExtendedFab } from "./ExtendedFab.svelte";
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as Slider } from "./Slider.svelte";
+export { default as TextField } from "./TextField.svelte";
+export { default as Radios } from "./Radios.svelte";
+export { default as NavigationBar } from "./NavigationBar.svelte";
+export { default as NavigationRail } from "./NavigationRail.svelte";
+export { default as Drawer } from "./Drawer.svelte";
+export { default as TopAppBar } from "./TopAppBar.svelte";
+export { default as BottomAppBar } from "./BottomAppBar.svelte";
+export { default as ButtonGroup } from "./ButtonGroup.svelte";
+export { default as Chips } from "./Chips.svelte";
+export { default as List } from "./List.svelte";
+export { default as Card } from "./Card.svelte";
+export { default as Carousel } from "./Carousel.svelte";
+export { default as Menu } from "./Menu.svelte";
+export { default as FabMenu } from "./FabMenu.svelte";
+export { default as Select } from "./Select.svelte";
+export { default as SplitButton } from "./SplitButton.svelte";
+export { default as Tooltip } from "./Tooltip.svelte";
+export { default as Toolbar } from "./Toolbar.svelte";
+export { default as Snackbar } from "./Snackbar.svelte";
+export { default as Dialog } from "./Dialog.svelte";
+export { default as BottomSheet } from "./BottomSheet.svelte";
+export { default as SideSheet } from "./SideSheet.svelte";
+export { default as Datepicker } from "./Datepicker.svelte";
+export { default as Timepicker } from "./Timepicker.svelte";
+export { default as Search } from "./Search.svelte";
+export { default as Tab } from "./Tab.svelte";
+export { default as Radio } from "./Radio.svelte";
+export { default as NavigationBarItem } from "./NavigationBarItem.svelte";
+export { default as NavigationRailItem } from "./NavigationRailItem.svelte";
+export { default as DrawerItem } from "./DrawerItem.svelte";
+export { default as ButtonGroupItem } from "./ButtonGroupItem.svelte";
+export { default as Chip } from "./Chip.svelte";
+export { default as ListItem } from "./ListItem.svelte";
+export { default as CarouselItem } from "./CarouselItem.svelte";
+export { default as MenuItem } from "./MenuItem.svelte";
+export { default as FabMenuItem } from "./FabMenuItem.svelte";
+export { default as SelectOption } from "./SelectOption.svelte";
+export { default as SearchSuggestion } from "./SearchSuggestion.svelte";
+export { configure } from "./runtime.js";
+export type { SvelteProps, EventProps, Bindable, DeclarationProps, Binding } from "./runtime.js";

package/dist/svelte/index.js

@@ -0,0 +1,52 @@
+// Generated by mtrl's build (scripts/svelte-package.ts) from src/elements.
+export { default as Button } from "./Button.svelte";
+export { default as Switch } from "./Switch.svelte";
+export { default as Tabs } from "./Tabs.svelte";
+export { default as Progress } from "./Progress.svelte";
+export { default as LoadingIndicator } from "./LoadingIndicator.svelte";
+export { default as Badge } from "./Badge.svelte";
+export { default as Divider } from "./Divider.svelte";
+export { default as IconButton } from "./IconButton.svelte";
+export { default as Fab } from "./Fab.svelte";
+export { default as ExtendedFab } from "./ExtendedFab.svelte";
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as Slider } from "./Slider.svelte";
+export { default as TextField } from "./TextField.svelte";
+export { default as Radios } from "./Radios.svelte";
+export { default as NavigationBar } from "./NavigationBar.svelte";
+export { default as NavigationRail } from "./NavigationRail.svelte";
+export { default as Drawer } from "./Drawer.svelte";
+export { default as TopAppBar } from "./TopAppBar.svelte";
+export { default as BottomAppBar } from "./BottomAppBar.svelte";
+export { default as ButtonGroup } from "./ButtonGroup.svelte";
+export { default as Chips } from "./Chips.svelte";
+export { default as List } from "./List.svelte";
+export { default as Card } from "./Card.svelte";
+export { default as Carousel } from "./Carousel.svelte";
+export { default as Menu } from "./Menu.svelte";
+export { default as FabMenu } from "./FabMenu.svelte";
+export { default as Select } from "./Select.svelte";
+export { default as SplitButton } from "./SplitButton.svelte";
+export { default as Tooltip } from "./Tooltip.svelte";
+export { default as Toolbar } from "./Toolbar.svelte";
+export { default as Snackbar } from "./Snackbar.svelte";
+export { default as Dialog } from "./Dialog.svelte";
+export { default as BottomSheet } from "./BottomSheet.svelte";
+export { default as SideSheet } from "./SideSheet.svelte";
+export { default as Datepicker } from "./Datepicker.svelte";
+export { default as Timepicker } from "./Timepicker.svelte";
+export { default as Search } from "./Search.svelte";
+export { default as Tab } from "./Tab.svelte";
+export { default as Radio } from "./Radio.svelte";
+export { default as NavigationBarItem } from "./NavigationBarItem.svelte";
+export { default as NavigationRailItem } from "./NavigationRailItem.svelte";
+export { default as DrawerItem } from "./DrawerItem.svelte";
+export { default as ButtonGroupItem } from "./ButtonGroupItem.svelte";
+export { default as Chip } from "./Chip.svelte";
+export { default as ListItem } from "./ListItem.svelte";
+export { default as CarouselItem } from "./CarouselItem.svelte";
+export { default as MenuItem } from "./MenuItem.svelte";
+export { default as FabMenuItem } from "./FabMenuItem.svelte";
+export { default as SelectOption } from "./SelectOption.svelte";
+export { default as SearchSuggestion } from "./SearchSuggestion.svelte";
+export { configure } from "./runtime.js";

package/dist/svelte/runtime.d.ts

@@ -0,0 +1,109 @@
+/**
+ * What every generated Svelte component (`dist/svelte/*.svelte`) runs.
+ *
+ * A component renders its tag with `<svelte:element>`, spreads
+ * `attributes(...)` on it and attaches `action`. Attributes are rendered as
+ * attributes, so server markup carries them; live-state properties
+ * (`checked`, `value`) are `$bindable()` props the action writes to the
+ * element and writes back after each element event, so `bind:checked` works;
+ * the attribute a live property shadows is its `default*` prop. Element
+ * events are `on<event>` callback props, as Svelte 5 names them. The element
+ * registers when the action first runs, never at import.
+ *
+ * Each component can also emit a declarative shadow root on the server
+ * (FLO-375). `shadowMarkup` reads the renderer `material/ssr/svelte` installs on
+ * `Symbol.for("mtrl.ssr")` — the same bridge as React — and returns the
+ * `<template shadowrootmode>` string there, or `""` in the browser, when no
+ * renderer is registered, and when the element opts out of SSR. The client
+ * renders nothing where the parser already consumed the template. Nothing
+ * here imports the server renderer.
+ *
+ * @module svelte
+ */
+import type { Snippet } from "svelte";
+import type { Action } from "svelte/action";
+import type { HTMLAttributes } from "svelte/elements";
+import type { DefineOptions, ElementEvents, ElementProperties, ElementProps, ElementSlotProp } from "../elements/index.js";
+import { type ComponentSpec, type DeclarationSpec, type DefaultProps, type FormProps, type RetiredEvents } from "../elements/adapter.js";
+export { configure } from "../elements/adapter.js";
+/** `change` → `onchange`, as Svelte 5 names event props, typed with the element's event. */
+export type EventProps<S> = {
+    [K in keyof ElementEvents<S> & string as `on${K}`]?: (event: ElementEvents<S>[K]) => void;
+};
+type BaseProps<S> = ElementProps<S> & DefaultProps<S> & FormProps<S> & EventProps<S>;
+/**
+ * Each named slot as a snippet prop (`{#snippet actions()}`); a text prop of
+ * the same name (`headline`) takes its text or a snippet (FLO-325).
+ */
+type SnippetProps<S, P> = {
+    [K in ElementSlotProp<S>]?: (K extends keyof P ? Exclude<P[K], undefined> : never) | Snippet;
+};
+type OwnProps<S> = Omit<BaseProps<S>, ElementSlotProp<S>> & SnippetProps<S, BaseProps<S>>;
+/**
+ * `nonce` is global; Svelte types it on script and style only. `popover`,
+ * `inputmode`, `enterkeyhint` and `itemprop` are already on `HTMLAttributes`
+ * (`inputMode`, `enterKeyHint` and `itemProp` are not Svelte prop names).
+ * A release that already declares a key keeps its own type.
+ */
+type SvelteHostGaps = {
+    nonce?: string;
+};
+type Missing<Base, Extra> = {
+    [K in Exclude<keyof Extra, keyof Base>]?: K extends keyof Extra ? Extra[K] : never;
+};
+type SvelteHostAttributes = HTMLAttributes<HTMLElement> & Missing<HTMLAttributes<HTMLElement>, SvelteHostGaps>;
+/**
+ * Props of a generated component: the element's own, plus any HTML attribute for the host.
+ * `OwnProps` includes the element's `on<event>` handlers (`onchange`), so those names keep the component's event.
+ */
+export type SvelteProps<S> = OwnProps<S> & Omit<SvelteHostAttributes, keyof OwnProps<S> | "children" | RetiredProps<S>> & {
+    [K in RetiredProps<S>]?: `${K} was removed in material 3.0.0: use onchange`;
+} & {
+    children?: Snippet;
+};
+/** The handler props of events material 3.0.0 removed (`ontoggle` on the icon button): refused, see `RetiredEvents`. */
+type RetiredProps<S> = `on${RetiredEvents<S>}`;
+/** The live properties a generated component binds (`bind:checked`). */
+export type Bindable<S> = keyof ElementProperties<S> & string;
+export type DeclarationProps<A> = A & Omit<SvelteHostAttributes, keyof A | "children"> & {
+    children?: Snippet;
+};
+/** What a generated component passes its action on every update. */
+export interface Binding {
+    /** The component's props other than the bindable ones and `children`. */
+    props: Record<string, unknown>;
+    /** The bindable props' current values. */
+    live: Record<string, unknown>;
+    /** Writes a bindable prop back, for `bind:`. */
+    set: Record<string, (value: unknown) => void>;
+}
+export interface Adapter {
+    tag: string;
+    /** What to spread on the element. `shadow` is the server template, or "". */
+    attributes: (props: Record<string, unknown>, live: Record<string, unknown>, shadow?: string) => Record<string, unknown>;
+    /** The named snippets, each with the slot it renders into (`headerAction` → `header-action`). */
+    snippets: (props: Record<string, unknown>) => Array<[slot: string, snippet: Snippet]>;
+    action: Action<HTMLElement, Binding>;
+}
+/**
+ * The runtime of the Svelte 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 adapter: (spec: ComponentSpec, define: (options?: DefineOptions) => string) => Adapter;
+/** The runtime of the Svelte component for a declaration child; its parent registers the tag. */
+export declare const declaration: (spec: DeclarationSpec) => {
+    tag: string;
+    attributes: (props: Record<string, unknown>) => Record<string, unknown>;
+};
+/**
+ * Installed only by `material/ssr/svelte` on `Symbol.for("mtrl.ssr")`. Returns the
+ * `<template shadowrootmode>` for one host, or `""` when the host opts out.
+ */
+export type SvelteShadowRenderer = (tag: string, attributes: Record<string, unknown>, children: Snippet | undefined, slots: Array<[slot: string, snippet: Snippet]>, prefix: string) => string;
+/**
+ * The declarative shadow template for a host, or `""` in the browser, when
+ * `material/ssr/svelte` was not imported, and when the element opts out of SSR.
+ * Generated components emit it with `{#if shadow}{@html shadow}{/if}`.
+ */
+export declare const shadowMarkup: (runtime: Adapter, props: Record<string, unknown>, children: Snippet | undefined, live: Record<string, unknown>) => string;

package/dist/svelte/runtime.js

@@ -0,0 +1,96 @@
+import { RENDERED_HOST_ATTRIBUTE } from "../elements/styles.js";
+import { camel, describe, describeDeclaration, getPrefix, isBrowser, serverDefaults, toAttribute, writeDefaults, writeLive, } from "../elements/adapter.js";
+export { configure } from "../elements/adapter.js";
+export const adapter = (spec, define) => {
+    const described = describe(spec);
+    const { attributes, properties, events, form } = described;
+    const eventProps = new Set(events.map((event) => `on${event}`));
+    const slots = new Map(described.slots.map((slot) => [camel(slot), slot]));
+    const isSnippet = (key, value) => typeof value === "function" && slots.has(key);
+    const hostAttributes = (props, live, shadow = "") => {
+        const result = {};
+        for (const [key, value] of Object.entries(props)) {
+            const attribute = attributes.get(key);
+            if (eventProps.has(key))
+                continue;
+            if (isSnippet(key, value))
+                continue;
+            if (attribute) {
+                if (attribute.shadowed && isBrowser)
+                    continue;
+                result[attribute.name] = toAttribute(attribute.type, value);
+            }
+            else if (key !== "name" || form) {
+                result[key] = value;
+            }
+        }
+        if (!isBrowser)
+            for (const [name, value] of serverDefaults(described, (p) => live[p]))
+                result[name] ?? (result[name] = value);
+        if (shadow)
+            result[RENDERED_HOST_ATTRIBUTE] = "";
+        for (const symbol of Object.getOwnPropertySymbols(props))
+            result[symbol] = props[symbol];
+        return result;
+    };
+    const snippets = (props) => Object.entries(props)
+        .filter(([key, value]) => isSnippet(key, value))
+        .map(([key, value]) => [slots.get(key), value]);
+    const action = (node, initial) => {
+        let binding = initial;
+        const target = node;
+        const sync = () => {
+            writeDefaults(node, described, (key) => binding.props[key]);
+            writeLive(node, described, (property) => binding.live[property]);
+        };
+        sync();
+        define({ prefix: getPrefix() });
+        sync();
+        const listeners = events.map((event) => {
+            const listener = (e) => {
+                const handler = binding.props[`on${event}`];
+                if (typeof handler === "function")
+                    handler(e);
+                for (const property of properties) {
+                    const value = target[property];
+                    if (value !== binding.live[property])
+                        binding.set[property]?.(value);
+                }
+            };
+            node.addEventListener(event, listener);
+            return () => node.removeEventListener(event, listener);
+        });
+        return {
+            update(next) {
+                binding = next;
+                sync();
+            },
+            destroy() {
+                listeners.forEach((remove) => remove());
+            },
+        };
+    };
+    return { tag: `${getPrefix()}-${spec.name}`, attributes: hostAttributes, snippets, action };
+};
+export const declaration = (spec) => {
+    const attributes = describeDeclaration(spec);
+    return {
+        tag: `${getPrefix()}-${spec.name}`,
+        attributes: (props) => {
+            const result = {};
+            for (const [key, value] of Object.entries(props)) {
+                const attribute = attributes.get(key);
+                result[attribute ? attribute.name : key] = attribute ? toAttribute(attribute.type, value) : value;
+            }
+            return result;
+        },
+    };
+};
+export const shadowMarkup = (runtime, props, children, live) => {
+    if (isBrowser)
+        return "";
+    const render = globalThis[Symbol.for("mtrl.ssr")]?.svelte;
+    if (!render)
+        return "";
+    return render(runtime.tag, runtime.attributes(props, live), children, runtime.snippets(props), getPrefix());
+};

package/dist/themes/autumn-contrast.css

@@ -0,0 +1,2 @@
+/*! material v3.0.0-next.0 | MIT */
+[data-theme=autumn]:is([data-theme-contrast=medium],[data-theme-contrast=high]):not([data-theme-mode=dark]){--mtrl-sys-color-on-error-container: #ffffff;--mtrl-sys-color-on-primary-container: #ffffff;--mtrl-sys-color-on-secondary-container: #ffffff;--mtrl-sys-color-on-tertiary-container: #ffffff;--mtrl-sys-color-on-primary-fixed: #ffffff;--mtrl-sys-color-on-primary-fixed-variant: #ffffff;--mtrl-sys-color-on-secondary-fixed: #ffffff;--mtrl-sys-color-on-secondary-fixed-variant: #ffffff;--mtrl-sys-color-on-tertiary-fixed: #ffffff;--mtrl-sys-color-on-tertiary-fixed-variant: #ffffff;--mtrl-sys-color-surface: #fff8f6;--mtrl-sys-color-surface-bright: #fff8f6;--mtrl-sys-color-surface-variant: #f5ded6;--mtrl-sys-color-inverse-surface: #392e2b;--mtrl-sys-color-inverse-primary: #ffb59a}[data-theme=autumn]:is([data-theme-contrast=medium],[data-theme-contrast=high])[data-theme-mode=dark]{--mtrl-sys-color-primary-fixed-dim: #ffb59a;--mtrl-sys-color-surface: #1a110e;--mtrl-sys-color-surface-dim: #1a110e;--mtrl-sys-color-surface-variant: #53433e;--mtrl-sys-color-on-surface: #ffffff;--mtrl-sys-color-inverse-surface: #f1dfd9;--mtrl-sys-color-inverse-primary: #73371f}[data-theme=autumn][data-theme-contrast=medium]:not([data-theme-mode=dark]){--mtrl-sys-color-error: #740006;--mtrl-sys-color-error-container: #cf2c27;--mtrl-sys-color-primary: #5d260f;--mtrl-sys-color-primary-container: #a05a40;--mtrl-sys-color-secondary: #72040e;--mtrl-sys-color-secondary-container: #bf413e;--mtrl-sys-color-tertiary: #253c1c;--mtrl-sys-color-tertiary-container: #5a744f;--mtrl-sys-color-primary-fixed: #a05a40;--mtrl-sys-color-primary-fixed-dim: #83432a;--mtrl-sys-color-secondary-fixed: #bf413e;--mtrl-sys-color-secondary-fixed-dim: #9e2929;--mtrl-sys-color-tertiary-fixed: #5a744f;--mtrl-sys-color-tertiary-fixed-dim: #435b38;--mtrl-sys-color-surface-dim: #d4c3be;--mtrl-sys-color-surface-container-low: #fff1ec;--mtrl-sys-color-surface-container: #f7e4df;--mtrl-sys-color-surface-container-high: #ebd9d4;--mtrl-sys-color-surface-container-highest: #dfcec9;--mtrl-sys-color-on-surface: #180f0c;--mtrl-sys-color-on-surface-variant: #41332e;--mtrl-sys-color-outline: #5f4f4a;--mtrl-sys-color-outline-variant: #7b6963;--mtrl-sys-color-inverse-on-surface: #ffede7}[data-theme=autumn][data-theme-contrast=medium][data-theme-mode=dark]{--mtrl-sys-color-error: #ffd2cc;--mtrl-sys-color-on-error: #540003;--mtrl-sys-color-error-container: #ff5449;--mtrl-sys-color-on-error-container: #000000;--mtrl-sys-color-primary: #ffd3c4;--mtrl-sys-color-on-primary: #471602;--mtrl-sys-color-primary-container: #ca7d60;--mtrl-sys-color-on-primary-container: #000000;--mtrl-sys-color-secondary: #ffd2ce;--mtrl-sys-color-on-secondary: #540007;--mtrl-sys-color-secondary-container: #ef645e;--mtrl-sys-color-on-secondary-container: #000000;--mtrl-sys-color-tertiary: #c8e5b8;--mtrl-sys-color-on-tertiary: #152b0d;--mtrl-sys-color-tertiary-container: #7d9870;--mtrl-sys-color-on-tertiary-container: #000000;--mtrl-sys-color-on-primary-fixed: #260700;--mtrl-sys-color-on-primary-fixed-variant: #5d260f;--mtrl-sys-color-on-secondary-fixed: #2d0002;--mtrl-sys-color-on-secondary-fixed-variant: #72040e;--mtrl-sys-color-on-tertiary-fixed: #021500;--mtrl-sys-color-on-tertiary-fixed-variant: #253c1c;--mtrl-sys-color-surface-bright: #4d423e;--mtrl-sys-color-surface-container-lowest: #0d0604;--mtrl-sys-color-surface-container-low: #251c18;--mtrl-sys-color-surface-container: #302622;--mtrl-sys-color-surface-container-high: #3b302d;--mtrl-sys-color-surface-container-highest: #463b37;--mtrl-sys-color-on-surface-variant: #eed8d0;--mtrl-sys-color-outline: #c2ada7;--mtrl-sys-color-outline-variant: #a08c86;--mtrl-sys-color-inverse-on-surface: #322824}[data-theme=autumn][data-theme-contrast=high]:not([data-theme-mode=dark]){--mtrl-sys-color-error: #600004;--mtrl-sys-color-error-container: #98000a;--mtrl-sys-color-primary: #4f1c06;--mtrl-sys-color-primary-container: #753820;--mtrl-sys-color-secondary: #600009;--mtrl-sys-color-secondary-container: #8e1c1f;--mtrl-sys-color-tertiary: #1b3213;--mtrl-sys-color-tertiary-container: #374f2e;--mtrl-sys-color-primary-fixed: #753820;--mtrl-sys-color-primary-fixed-dim: #58220c;--mtrl-sys-color-secondary-fixed: #8e1c1f;--mtrl-sys-color-secondary-fixed-dim: #6d000b;--mtrl-sys-color-tertiary-fixed: #374f2e;--mtrl-sys-color-tertiary-fixed-dim: #213819;--mtrl-sys-color-surface-dim: #c6b5b0;--mtrl-sys-color-surface-container-low: #ffede7;--mtrl-sys-color-surface-container: #f1dfd9;--mtrl-sys-color-surface-container-high: #e2d1cb;--mtrl-sys-color-surface-container-highest: #d4c3be;--mtrl-sys-color-on-surface: #000000;--mtrl-sys-color-on-surface-variant: #000000;--mtrl-sys-color-outline: #362924;--mtrl-sys-color-outline-variant: #554641;--mtrl-sys-color-inverse-on-surface: #ffffff}[data-theme=autumn][data-theme-contrast=high][data-theme-mode=dark]{--mtrl-sys-color-error: #ffece9;--mtrl-sys-color-on-error: #000000;--mtrl-sys-color-error-container: #ffaea4;--mtrl-sys-color-on-error-container: #220001;--mtrl-sys-color-primary: #ffece6;--mtrl-sys-color-on-primary: #000000;--mtrl-sys-color-primary-container: #ffb093;--mtrl-sys-color-on-primary-container: #1c0400;--mtrl-sys-color-secondary: #ffecea;--mtrl-sys-color-on-secondary: #000000;--mtrl-sys-color-secondary-container: #ffaea7;--mtrl-sys-color-on-secondary-container: #220001;--mtrl-sys-color-tertiary: #dbf9ca;--mtrl-sys-color-on-tertiary: #000000;--mtrl-sys-color-tertiary-container: #afcb9f;--mtrl-sys-color-on-tertiary-container: #010f00;--mtrl-sys-color-on-primary-fixed: #000000;--mtrl-sys-color-on-primary-fixed-variant: #260700;--mtrl-sys-color-on-secondary-fixed: #000000;--mtrl-sys-color-on-secondary-fixed-variant: #2d0002;--mtrl-sys-color-on-tertiary-fixed: #000000;--mtrl-sys-color-on-tertiary-fixed-variant: #021500;--mtrl-sys-color-surface-bright: #5a4d49;--mtrl-sys-color-surface-container-lowest: #000000;--mtrl-sys-color-surface-container-low: #271e1a;--mtrl-sys-color-surface-container: #392e2b;--mtrl-sys-color-surface-container-high: #443935;--mtrl-sys-color-surface-container-highest: #504440;--mtrl-sys-color-on-surface-variant: #ffffff;--mtrl-sys-color-outline: #ffece6;--mtrl-sys-color-outline-variant: #d4beb7;--mtrl-sys-color-inverse-on-surface: #000000}