m3-svelte 3.6.1 → 4.0.0-beta.0

package/package/forms/TextFieldOutlined.svelte.d.ts

@@ -1,33 +1,21 @@
 import type { IconifyIcon } from "@iconify/types";
-import type { HTMLAttributes, HTMLInputAttributes } from "svelte/elements";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const TextFieldOutlined: $$__sveltets_2_IsomorphicComponent<{
-    display?: string;
-    extraWrapperOptions?: HTMLAttributes<HTMLDivElement>;
-    extraOptions?: HTMLInputAttributes;
+import type { HTMLInputAttributes } from "svelte/elements";
+type TrailingProps = {
+    trailingIcon: IconifyIcon;
+    trailingClick: () => void;
+} | {
+    trailingIcon?: undefined;
+    trailingClick?: undefined;
+};
+type $$ComponentProps = {
     name: string;
-    leadingIcon?: IconifyIcon | undefined;
-    trailingIcon?: IconifyIcon | undefined;
+    leadingIcon?: IconifyIcon;
     disabled?: boolean;
     required?: boolean;
     error?: boolean;
     value?: string;
-}, {
-    trailingClick: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TextFieldOutlined = InstanceType<typeof TextFieldOutlined>;
+    enter?: () => void;
+} & TrailingProps & HTMLInputAttributes;
+declare const TextFieldOutlined: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TextFieldOutlined = ReturnType<typeof TextFieldOutlined>;
 export default TextFieldOutlined;

package/package/forms/TextFieldOutlinedMultiline.svelte

@@ -1,18 +1,24 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
   import Icon from "../misc/_icon.svelte";
-  import type { HTMLAttributes, HTMLTextareaAttributes } from "svelte/elements";
+  import type { HTMLTextareaAttributes } from "svelte/elements";
 
-  export let display = "inline-flex";
-  export let extraWrapperOptions: HTMLAttributes<HTMLDivElement> = {};
-  export let extraOptions: HTMLTextareaAttributes = {};
-  export let name: string;
-  export let leadingIcon: IconifyIcon | undefined = undefined;
-
-  export let disabled = false;
-  export let required = false;
-  export let error = false;
-  export let value = "";
+  let {
+    name,
+    leadingIcon,
+    disabled = false,
+    required = false,
+    error = false,
+    value = $bindable(""),
+    ...extra
+  }: {
+    name: string;
+    leadingIcon?: IconifyIcon;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    value?: string;
+  } & HTMLTextareaAttributes = $props();
   const id = crypto.randomUUID();
   const resize = (node: HTMLElement) => {
     const update = () => {
@@ -30,14 +36,7 @@
   };
 </script>
 
-<div
-  class="m3-container"
-  class:leading-icon={leadingIcon}
-  class:error
-  style="display: {display}"
-  use:resize
-  {...extraWrapperOptions}
->
+<div class="m3-container" class:leading-icon={leadingIcon} class:error use:resize>
   <textarea
     class="focus-none m3-font-body-large"
     placeholder=" "
@@ -45,7 +44,7 @@
     {id}
     {disabled}
     {required}
-    {...extraOptions}
+    {...extra}
   ></textarea>
   <div class="layer"></div>
   <label class="m3-font-body-large" for={id}>{name}</label>
@@ -63,6 +62,7 @@
     --m3-textfield-outlined-shape: var(--m3-util-rounding-extra-small);
   }
   .m3-container {
+    display: inline-flex;
     position: relative;
     align-items: center;
     min-height: 5rem;
@@ -98,7 +98,7 @@
   .layer {
     position: absolute;
     inset: 0;
-    border: 0.0625rem solid rgb(var(--error, var(--m3-scheme-outline)));
+    border: 1px solid rgb(var(--error, var(--m3-scheme-outline)));
     border-radius: var(--m3-textfield-outlined-shape);
     pointer-events: none;
     transition: all 200ms;

package/package/forms/TextFieldOutlinedMultiline.svelte.d.ts

@@ -1,30 +1,13 @@
 import type { IconifyIcon } from "@iconify/types";
-import type { HTMLAttributes, HTMLTextareaAttributes } from "svelte/elements";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const TextFieldOutlinedMultiline: $$__sveltets_2_IsomorphicComponent<{
-    display?: string;
-    extraWrapperOptions?: HTMLAttributes<HTMLDivElement>;
-    extraOptions?: HTMLTextareaAttributes;
+import type { HTMLTextareaAttributes } from "svelte/elements";
+type $$ComponentProps = {
     name: string;
-    leadingIcon?: IconifyIcon | undefined;
+    leadingIcon?: IconifyIcon;
     disabled?: boolean;
     required?: boolean;
     error?: boolean;
     value?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TextFieldOutlinedMultiline = InstanceType<typeof TextFieldOutlinedMultiline>;
+} & HTMLTextareaAttributes;
+declare const TextFieldOutlinedMultiline: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TextFieldOutlinedMultiline = ReturnType<typeof TextFieldOutlinedMultiline>;
 export default TextFieldOutlinedMultiline;

package/package/forms/_picker/Actions.svelte

@@ -1,31 +1,29 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
   import Button from "../../buttons/Button.svelte";
 
-  export let clearable: boolean;
-  export let chosenDate: boolean;
-  const dispatch = createEventDispatcher();
+  let {
+    clearable,
+    chosenDate,
+    clear,
+    cancel,
+    ok,
+  }: {
+    clearable: boolean;
+    chosenDate: boolean;
+    clear: () => void;
+    cancel: () => void;
+    ok: () => void;
+  } = $props();
 </script>
 
 <div class="m3-container">
   {#if clearable}
     <span class="left">
-      <Button type="text" on:click={() => dispatch("clear")} extraOptions={{ type: "button" }}>
-        Clear
-      </Button>
+      <Button variant="text" click={clear} type="button">Clear</Button>
     </span>
   {/if}
-  <Button type="text" on:click={() => dispatch("cancel")} extraOptions={{ type: "button" }}>
-    Cancel
-  </Button>
-  <Button
-    type="text"
-    disabled={!clearable && !chosenDate}
-    on:click={() => dispatch("ok")}
-    extraOptions={{ type: "button" }}
-  >
-    OK
-  </Button>
+  <Button variant="text" click={cancel} type="button">Cancel</Button>
+  <Button variant="text" disabled={!clearable && !chosenDate} click={ok} type="button">OK</Button>
 </div>
 
 <style>

package/package/forms/_picker/Actions.svelte.d.ts

@@ -1,25 +1,10 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Actions: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     clearable: boolean;
     chosenDate: boolean;
-}, {
-    clear: CustomEvent<any>;
-    cancel: CustomEvent<any>;
-    ok: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Actions = InstanceType<typeof Actions>;
+    clear: () => void;
+    cancel: () => void;
+    ok: () => void;
+};
+declare const Actions: import("svelte").Component<$$ComponentProps, {}, "">;
+type Actions = ReturnType<typeof Actions>;
 export default Actions;

package/package/forms/_picker/CalendarPicker.svelte

@@ -1,8 +1,18 @@
 <script lang="ts">
   import Item from "./Item.svelte";
 
-  export let focusedMonth: number, focusedYear: number, dateValidator: (date: string) => boolean;
-  export let chosenDate: string;
+  let {
+    focusedMonth,
+    focusedYear,
+    dateValidator,
+    chosenDate = $bindable(),
+  }: {
+    focusedMonth: number;
+    focusedYear: number;
+    dateValidator: (date: string) => boolean;
+    chosenDate: string;
+  } = $props();
+
   const makeCalendar = (year: number, month: number) => {
     const firstDay = new Date(year, month, 1);
     return Array.from({ length: 42 }, (_, i: number) => {
@@ -18,7 +28,7 @@
     });
   };
 
-  let today = new Date();
+  let today = $state(new Date());
   setInterval(() => (today = new Date()), 1000 * 60);
 </script>
 
@@ -35,7 +45,7 @@
         day.day == today.getDate()}
       selected={!day.disabled && day.iso == chosenDate}
       label={day.day.toString()}
-      on:click={() => (chosenDate = day.iso)}
+      click={() => (chosenDate = day.iso)}
     />
   {/each}
 </div>

package/package/forms/_picker/CalendarPicker.svelte.d.ts

@@ -1,23 +1,9 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CalendarPicker: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     focusedMonth: number;
     focusedYear: number;
     dateValidator: (date: string) => boolean;
     chosenDate: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CalendarPicker = InstanceType<typeof CalendarPicker>;
+};
+declare const CalendarPicker: import("svelte").Component<$$ComponentProps, {}, "chosenDate">;
+type CalendarPicker = ReturnType<typeof CalendarPicker>;
 export default CalendarPicker;

package/package/forms/_picker/FocusPicker.svelte

@@ -1,22 +1,21 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
   import Icon from "../../misc/_icon.svelte";
   import iconCheck from "@ktibow/iconset-material-symbols/check";
 
-  const dispatch = createEventDispatcher();
   const conditionalScroll = (node: Element, shouldScroll: boolean) => {
     if (shouldScroll) node.scrollIntoView({ block: "nearest" });
   };
-  export let options: { id: number; name: string; selected: boolean }[];
+
+  let {
+    options,
+  }: {
+    options: { name: string; selected: boolean; activate: () => void }[];
+  } = $props();
 </script>
 
 <div class="m3-container">
-  {#each options as { id, name, selected }}
-    <button
-      class="m3-font-body-large"
-      on:click={() => dispatch("chosen", id)}
-      use:conditionalScroll={selected}
-    >
+  {#each options as { name, selected, activate }}
+    <button class="m3-font-body-large" onclick={activate} use:conditionalScroll={selected}>
       {#if selected}
         <Icon icon={iconCheck} />
       {/if}

package/package/forms/_picker/FocusPicker.svelte.d.ts

@@ -1,26 +1,10 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FocusPicker: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     options: {
-        id: number;
         name: string;
         selected: boolean;
+        activate: () => void;
     }[];
-}, {
-    chosen: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FocusPicker = InstanceType<typeof FocusPicker>;
+};
+declare const FocusPicker: import("svelte").Component<$$ComponentProps, {}, "">;
+type FocusPicker = ReturnType<typeof FocusPicker>;
 export default FocusPicker;

package/package/forms/_picker/Header.svelte

@@ -4,8 +4,19 @@
   import iconRight from "@ktibow/iconset-material-symbols/chevron-right";
   import iconDown from "@ktibow/iconset-material-symbols/arrow-drop-down";
 
-  export let currentView: "calendar" | "year" | "month", focusedMonth: number, focusedYear: number;
-  export let startYear: number, endYear: number;
+  let {
+    currentView = $bindable(),
+    focusedMonth = $bindable(),
+    focusedYear = $bindable(),
+    startYear,
+    endYear,
+  }: {
+    currentView: "calendar" | "year" | "month";
+    focusedMonth: number;
+    focusedYear: number;
+    startYear: number;
+    endYear: number;
+  } = $props();
 
   const yearClick = () => (currentView = currentView == "calendar" ? "year" : "calendar");
   const monthClick = () => (currentView = currentView == "calendar" ? "month" : "calendar");
@@ -18,20 +29,20 @@
     <button
       type="button"
       class="arrow"
-      on:click={() => (focusedMonth = (focusedMonth - 1 + 12) % 12)}
+      onclick={() => (focusedMonth = (focusedMonth - 1 + 12) % 12)}
     >
       <Icon icon={iconLeft} />
     </button>
     <button
       type="button"
       class="chooser m3-font-label-large"
-      on:click={monthClick}
+      onclick={monthClick}
       disabled={currentView == "year"}
     >
       {getShortMonth(focusedMonth)}
       <Icon icon={iconDown} />
     </button>
-    <button type="button" class="arrow" on:click={() => (focusedMonth = (focusedMonth + 1) % 12)}>
+    <button type="button" class="arrow" onclick={() => (focusedMonth = (focusedMonth + 1) % 12)}>
       <Icon icon={iconRight} />
     </button>
   </div>
@@ -40,14 +51,14 @@
       type="button"
       class="arrow"
       disabled={focusedYear <= startYear}
-      on:click={() => focusedYear--}
+      onclick={() => focusedYear--}
     >
       <Icon icon={iconLeft} />
     </button>
     <button
       type="button"
       class="chooser m3-font-label-large"
-      on:click={yearClick}
+      onclick={yearClick}
       disabled={currentView == "month"}
     >
       {focusedYear}
@@ -57,7 +68,7 @@
       type="button"
       class="arrow"
       disabled={focusedYear >= endYear}
-      on:click={() => focusedYear++}
+      onclick={() => focusedYear++}
     >
       <Icon icon={iconRight} />
     </button>
@@ -69,7 +80,7 @@
     display: flex;
     height: 4rem;
     transition: all 200ms;
-    border-bottom: solid 0.0625rem transparent;
+    border-bottom: solid 1px transparent;
     flex-shrink: 0;
   }
   .m3-container > div {

package/package/forms/_picker/Header.svelte.d.ts

@@ -1,24 +1,10 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Header: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     currentView: "calendar" | "year" | "month";
     focusedMonth: number;
     focusedYear: number;
     startYear: number;
     endYear: number;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Header = InstanceType<typeof Header>;
+};
+declare const Header: import("svelte").Component<$$ComponentProps, {}, "focusedMonth" | "focusedYear" | "currentView">;
+type Header = ReturnType<typeof Header>;
 export default Header;

package/package/forms/_picker/Item.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
-  export let disabled = false;
-  export let today = false;
-  export let selected = false;
-  export let label: string;
+  let {
+    disabled,
+    today,
+    selected,
+    label,
+    click,
+  }: {
+    disabled: boolean;
+    today: boolean;
+    selected: boolean;
+    label: string;
+    click: () => void;
+  } = $props();
 </script>
 
 <button
@@ -11,7 +20,7 @@
   type="button"
   class:today
   class:selected
-  on:click
+  onclick={click}
 >
   {label}
 </button>
@@ -47,7 +56,7 @@
     color: rgb(var(--m3-scheme-on-surface-variant) / 0.38);
   }
   .today {
-    border: solid 0.0625rem rgb(var(--text));
+    border: solid 1px rgb(var(--text));
     --text: var(--m3-scheme-primary);
   }
   .selected {

package/package/forms/_picker/Item.svelte.d.ts

@@ -1,25 +1,10 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Item: $$__sveltets_2_IsomorphicComponent<{
-    disabled?: boolean;
-    today?: boolean;
-    selected?: boolean;
+type $$ComponentProps = {
+    disabled: boolean;
+    today: boolean;
+    selected: boolean;
     label: string;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Item = InstanceType<typeof Item>;
+    click: () => void;
+};
+declare const Item: import("svelte").Component<$$ComponentProps, {}, "">;
+type Item = ReturnType<typeof Item>;
 export default Item;

package/package/index.d.ts

@@ -6,21 +6,16 @@ export * from "./misc/utils.js";
 export * from "./misc/easing.js";
 export * from "./misc/serializeScheme.js";
 export { default as Button } from "./buttons/Button.svelte";
-export { default as ButtonLink } from "./buttons/ButtonLink.svelte";
-export { default as SegmentedButtonContainer } from "./buttons/SegmentedButtonContainer.svelte";
-export { default as SegmentedButtonItem } from "./buttons/SegmentedButtonItem.svelte";
+export { default as ConnectedButtons } from "./buttons/ConnectedButtons.svelte";
 export { default as FAB } from "./buttons/FAB.svelte";
 export { default as BottomSheet } from "./containers/BottomSheet.svelte";
 export { default as Card } from "./containers/Card.svelte";
-export { default as CardClickable } from "./containers/CardClickable.svelte";
 export { default as Dialog } from "./containers/Dialog.svelte";
 export { default as ListItem } from "./containers/ListItem.svelte";
-export { default as ListItemButton } from "./containers/ListItemButton.svelte";
-export { default as ListItemLabel } from "./containers/ListItemLabel.svelte";
 export { default as Menu } from "./containers/Menu.svelte";
 export { default as MenuItem } from "./containers/MenuItem.svelte";
-export { default as Snackbar, type SnackbarIn } from "./containers/Snackbar.svelte";
-export { default as SnackbarAnim } from "./containers/SnackbarAnim.svelte";
+export { default as Snackbar } from "./containers/Snackbar.svelte";
+export type { SnackbarIn } from "./containers/Snackbar.svelte";
 export { default as SnackbarItem } from "./containers/SnackbarItem.svelte";
 export { default as LinearProgress } from "./forms/LinearProgress.svelte";
 export { default as LinearProgressIndeterminate } from "./forms/LinearProgressIndeterminate.svelte";
@@ -30,7 +25,6 @@ export { default as RadioAnim1 } from "./forms/RadioAnim1.svelte";
 export { default as RadioAnim2 } from "./forms/RadioAnim2.svelte";
 export { default as RadioAnim3 } from "./forms/RadioAnim3.svelte";
 export { default as Checkbox } from "./forms/Checkbox.svelte";
-export { default as CheckboxAnim } from "./forms/CheckboxAnim.svelte";
 export { default as Switch } from "./forms/Switch.svelte";
 export { default as Slider } from "./forms/Slider.svelte";
 export { default as SliderTicks } from "./forms/SliderTicks.svelte";

package/package/index.js

@@ -6,21 +6,15 @@ export * from "./misc/utils.js";
 export * from "./misc/easing.js";
 export * from "./misc/serializeScheme.js";
 export { default as Button } from "./buttons/Button.svelte";
-export { default as ButtonLink } from "./buttons/ButtonLink.svelte";
-export { default as SegmentedButtonContainer } from "./buttons/SegmentedButtonContainer.svelte";
-export { default as SegmentedButtonItem } from "./buttons/SegmentedButtonItem.svelte";
+export { default as ConnectedButtons } from "./buttons/ConnectedButtons.svelte";
 export { default as FAB } from "./buttons/FAB.svelte";
 export { default as BottomSheet } from "./containers/BottomSheet.svelte";
 export { default as Card } from "./containers/Card.svelte";
-export { default as CardClickable } from "./containers/CardClickable.svelte";
 export { default as Dialog } from "./containers/Dialog.svelte";
 export { default as ListItem } from "./containers/ListItem.svelte";
-export { default as ListItemButton } from "./containers/ListItemButton.svelte";
-export { default as ListItemLabel } from "./containers/ListItemLabel.svelte";
 export { default as Menu } from "./containers/Menu.svelte";
 export { default as MenuItem } from "./containers/MenuItem.svelte";
 export { default as Snackbar } from "./containers/Snackbar.svelte";
-export { default as SnackbarAnim } from "./containers/SnackbarAnim.svelte";
 export { default as SnackbarItem } from "./containers/SnackbarItem.svelte";
 export { default as LinearProgress } from "./forms/LinearProgress.svelte";
 export { default as LinearProgressIndeterminate } from "./forms/LinearProgressIndeterminate.svelte";
@@ -30,7 +24,6 @@ export { default as RadioAnim1 } from "./forms/RadioAnim1.svelte";
 export { default as RadioAnim2 } from "./forms/RadioAnim2.svelte";
 export { default as RadioAnim3 } from "./forms/RadioAnim3.svelte";
 export { default as Checkbox } from "./forms/Checkbox.svelte";
-export { default as CheckboxAnim } from "./forms/CheckboxAnim.svelte";
 export { default as Switch } from "./forms/Switch.svelte";
 export { default as Slider } from "./forms/Slider.svelte";
 export { default as SliderTicks } from "./forms/SliderTicks.svelte";

package/package/misc/Layer.svelte

@@ -2,14 +2,18 @@
   import Ripple from "./_ripple.svelte";
   import RippleSimple from "./_ripplesimple.svelte";
 
-  let ripple = RippleSimple;
+  let { morph = false }: { morph?: boolean } = $props();
+
+  let ripple = $state(RippleSimple);
   if (
-    // @ts-ignore
+    // @ts-expect-error about M3_SVELTE_NO_RIPPLE
     typeof M3_SVELTE_NO_RIPPLE == "undefined" &&
     (typeof window == "undefined" || !window.matchMedia("(prefers-reduced-motion: reduce)").matches)
   ) {
     ripple = Ripple;
   }
+
+  const Component = $derived(ripple);
 </script>
 
-<svelte:component this={ripple} />
+<Component {morph} />