material 1.0.4 → 3.0.0-next.0

package/dist/svelte/FabMenu.svelte.d.ts

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

package/dist/svelte/FabMenuItem.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 { fabMenuItemDeclaration } from "../elements/fab-menu.js";
+  import { declaration } from "./runtime.js";
+
+  const runtime = declaration(fabMenuItemDeclaration);
+  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/FabMenuItem.svelte.d.ts

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

package/dist/svelte/IconButton.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 { iconButtonElement, defineIconButton } from "../elements/icon-button.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(iconButtonElement.spec, defineIconButton);
+  const action = runtime.action;
+  let {
+    selected = $bindable(),
+    children,
+    ...props
+  }: { selected?: 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, { selected }));
+</script>
+
+<svelte:element
+  this={runtime.tag}
+  bind:this={node}
+  {...runtime.attributes(props, { selected }, shadow)}
+  use:action={{ props, live: { selected }, set: { selected: (next: unknown) => (selected = 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/IconButton.svelte.d.ts

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

package/dist/svelte/List.svelte

@@ -0,0 +1,27 @@
+<!-- Generated by mtrl's build (scripts/svelte-package.ts) from src/elements. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import "material/elements/css/list";
+  import { listElement, defineList } from "../elements/list.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(listElement.spec, defineList);
+  const action = runtime.action;
+  let {
+    value = $bindable(),
+    values = $bindable(),
+    children,
+    ...props
+  }: { value?: unknown; values?: 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, values }));
+</script>
+
+<svelte:element
+  this={runtime.tag}
+  bind:this={node}
+  {...runtime.attributes(props, { value, values }, shadow)}
+  use:action={{ props, live: { value, values }, set: { value: (next: unknown) => (value = next), values: (next: unknown) => (values = 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/List.svelte.d.ts

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

package/dist/svelte/ListItem.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 { listItemDeclaration } from "../elements/list.js";
+  import { declaration } from "./runtime.js";
+
+  const runtime = declaration(listItemDeclaration);
+  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/ListItem.svelte.d.ts

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

package/dist/svelte/LoadingIndicator.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/loading-indicator";
+  import { loadingIndicatorElement, defineLoadingIndicator } from "../elements/loading-indicator.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(loadingIndicatorElement.spec, defineLoadingIndicator);
+  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/LoadingIndicator.svelte.d.ts

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

package/dist/svelte/Menu.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/menu";
+  import { menuElement, defineMenu } from "../elements/menu.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(menuElement.spec, defineMenu);
+  const action = runtime.action;
+  let {
+    anchor = $bindable(),
+    children,
+    ...props
+  }: { anchor?: 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, { anchor }));
+</script>
+
+<svelte:element
+  this={runtime.tag}
+  bind:this={node}
+  {...runtime.attributes(props, { anchor }, shadow)}
+  use:action={{ props, live: { anchor }, set: { anchor: (next: unknown) => (anchor = 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/Menu.svelte.d.ts

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

package/dist/svelte/MenuItem.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 { menuItemDeclaration } from "../elements/menu.js";
+  import { declaration } from "./runtime.js";
+
+  const runtime = declaration(menuItemDeclaration);
+  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/MenuItem.svelte.d.ts

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

package/dist/svelte/NavigationBar.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/navigation-bar";
+  import { navigationBarElement, defineNavigationBar } from "../elements/navigation-bar.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(navigationBarElement.spec, defineNavigationBar);
+  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/NavigationBar.svelte.d.ts

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

package/dist/svelte/NavigationBarItem.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 { navigationBarItemDeclaration } from "../elements/navigation-bar.js";
+  import { declaration } from "./runtime.js";
+
+  const runtime = declaration(navigationBarItemDeclaration);
+  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/NavigationBarItem.svelte.d.ts

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

package/dist/svelte/NavigationRail.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/navigation-rail";
+  import { navigationRailElement, defineNavigationRail } from "../elements/navigation-rail.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(navigationRailElement.spec, defineNavigationRail);
+  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/NavigationRail.svelte.d.ts

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

package/dist/svelte/NavigationRailItem.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 { navigationRailItemDeclaration } from "../elements/navigation-rail.js";
+  import { declaration } from "./runtime.js";
+
+  const runtime = declaration(navigationRailItemDeclaration);
+  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/NavigationRailItem.svelte.d.ts

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

package/dist/svelte/Progress.svelte

@@ -0,0 +1,27 @@
+<!-- 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 { progressElement, defineProgress } from "../elements/progress.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(progressElement.spec, defineProgress);
+  const action = runtime.action;
+  let {
+    value = $bindable(),
+    indeterminate = $bindable(),
+    children,
+    ...props
+  }: { value?: unknown; indeterminate?: 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, indeterminate }));
+</script>
+
+<svelte:element
+  this={runtime.tag}
+  bind:this={node}
+  {...runtime.attributes(props, { value, indeterminate }, shadow)}
+  use:action={{ props, live: { value, indeterminate }, set: { value: (next: unknown) => (value = next), indeterminate: (next: unknown) => (indeterminate = 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/Progress.svelte.d.ts

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

package/dist/svelte/Radio.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 { radioDeclaration } from "../elements/radios.js";
+  import { declaration } from "./runtime.js";
+
+  const runtime = declaration(radioDeclaration);
+  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/Radio.svelte.d.ts

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

package/dist/svelte/Radios.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/radios";
+  import { radiosElement, defineRadios } from "../elements/radios.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(radiosElement.spec, defineRadios);
+  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/Radios.svelte.d.ts

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

package/dist/svelte/Search.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/search";
+  import { searchElement, defineSearch } from "../elements/search.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(searchElement.spec, defineSearch);
+  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/Search.svelte.d.ts

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

package/dist/svelte/SearchSuggestion.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 { searchSuggestionDeclaration } from "../elements/search.js";
+  import { declaration } from "./runtime.js";
+
+  const runtime = declaration(searchSuggestionDeclaration);
+  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/SearchSuggestion.svelte.d.ts

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

package/dist/svelte/Select.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/text-field";
+  import "material/elements/css/menu";
+  import "material/elements/css/select";
+  import { selectElement, defineSelect } from "../elements/select.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(selectElement.spec, defineSelect);
+  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/Select.svelte.d.ts

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

package/dist/svelte/SelectOption.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 { selectOptionDeclaration } from "../elements/select.js";
+  import { declaration } from "./runtime.js";
+
+  const runtime = declaration(selectOptionDeclaration);
+  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/SelectOption.svelte.d.ts

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

package/dist/svelte/SideSheet.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/side-sheet";
+  import { sideSheetElement, defineSideSheet } from "../elements/side-sheet.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(sideSheetElement.spec, defineSideSheet);
+  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/SideSheet.svelte.d.ts

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

package/dist/svelte/Slider.svelte

@@ -0,0 +1,27 @@
+<!-- Generated by mtrl's build (scripts/svelte-package.ts) from src/elements. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import "material/elements/css/slider";
+  import { sliderElement, defineSlider } from "../elements/slider.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(sliderElement.spec, defineSlider);
+  const action = runtime.action;
+  let {
+    value = $bindable(),
+    secondValue = $bindable(),
+    children,
+    ...props
+  }: { value?: unknown; secondValue?: 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, secondValue }));
+</script>
+
+<svelte:element
+  this={runtime.tag}
+  bind:this={node}
+  {...runtime.attributes(props, { value, secondValue }, shadow)}
+  use:action={{ props, live: { value, secondValue }, set: { value: (next: unknown) => (value = next), secondValue: (next: unknown) => (secondValue = 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/Slider.svelte.d.ts

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

package/dist/svelte/Snackbar.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/progress";
+  import "material/elements/css/button";
+  import "material/elements/css/icon-button";
+  import "material/elements/css/snackbar";
+  import { snackbarElement, defineSnackbar } from "../elements/snackbar.js";
+  import { adapter, shadowMarkup } from "./runtime.js";
+
+  const runtime = adapter(snackbarElement.spec, defineSnackbar);
+  const action = runtime.action;
+  let {
+    open = $bindable(),
+    children,
+    ...props
+  }: { open?: 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, { open }));
+</script>
+
+<svelte:element
+  this={runtime.tag}
+  bind:this={node}
+  {...runtime.attributes(props, { open }, shadow)}
+  use:action={{ props, live: { open }, set: { open: (next: unknown) => (open = 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/Snackbar.svelte.d.ts

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