m3-svelte 5.4.0 → 5.7.0

package/package/buttons/Button.svelte

@@ -1,17 +1,12 @@
 <script lang="ts">
-  import type {
-    HTMLButtonAttributes,
-    HTMLAnchorAttributes,
-    HTMLLabelAttributes,
-  } from "svelte/elements";
+  import type { HTMLButtonAttributes, HTMLAttributes } from "svelte/elements";
   import type { Snippet } from "svelte";
+  import type { LabelAttrs, AnchorAttrs } from "../misc/typing-utils";
   import Layer from "../misc/Layer.svelte";
 
   // If you want a toggle button, use `for` with a checkbox input.
-  type ActionProps =
-    | ({ for: string } & HTMLLabelAttributes)
-    | ({ href: string } & HTMLAnchorAttributes)
-    | HTMLButtonAttributes;
+  type SummaryAttrs = HTMLAttributes<HTMLElement> & { summary: true };
+  type ActionProps = LabelAttrs | AnchorAttrs | SummaryAttrs | HTMLButtonAttributes;
   type Props = {
     variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;
@@ -58,10 +53,20 @@
     <Layer />
     {@render children()}
   </a>
+{:else if "summary" in props}
+  {@const { variant = "filled", square = false, iconType = "none", children, ...extra } = props}
+  <summary
+    class="m3-container m3-font-label-large {variant} icon-{iconType}"
+    class:square
+    {...extra}
+  >
+    <Layer />
+    {@render children()}
+  </summary>
 {:else}
   {@const { variant = "filled", square = false, iconType = "none", children, ...extra } = props}
   <button
-    type={"onclick" in extra ? "button" : undefined}
+    type={"onclick" in extra ? "button" : "submit"}
     class="m3-container m3-font-label-large {variant} icon-{iconType}"
     class:square
     {...extra}

package/package/buttons/Button.svelte.d.ts

@@ -1,10 +1,10 @@
-import type { HTMLButtonAttributes, HTMLAnchorAttributes, HTMLLabelAttributes } from "svelte/elements";
+import type { HTMLButtonAttributes, HTMLAttributes } from "svelte/elements";
 import type { Snippet } from "svelte";
-type ActionProps = ({
-    for: string;
-} & HTMLLabelAttributes) | ({
-    href: string;
-} & HTMLAnchorAttributes) | HTMLButtonAttributes;
+import type { LabelAttrs, AnchorAttrs } from "../misc/typing-utils";
+type SummaryAttrs = HTMLAttributes<HTMLElement> & {
+    summary: true;
+};
+type ActionProps = LabelAttrs | AnchorAttrs | SummaryAttrs | HTMLButtonAttributes;
 type Props = {
     variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;

package/package/buttons/SplitButton.svelte

@@ -3,6 +3,7 @@
   import type { Snippet } from "svelte";
   import Layer from "../misc/Layer.svelte";
   import Icon from "../misc/_icon.svelte";
+  import type { ButtonAttrs } from "../misc/typing-utils";
 
   let {
     variant,
@@ -10,15 +11,14 @@
     y = "down",
     children,
     menu,
-    onclick,
+    ...extra
   }: {
     variant: "elevated" | "filled" | "tonal" | "outlined";
     x?: "inner" | "right";
     y?: "down" | "up";
     children: Snippet;
     menu: Snippet;
-    onclick: () => void;
-  } = $props();
+  } & ButtonAttrs = $props();
 
   const autoclose = (node: HTMLDetailsElement) => {
     const close = (e: Event) => {
@@ -36,7 +36,7 @@
 </script>
 
 <div class="m3-container {variant}">
-  <button type="button" class="split m3-font-label-large" {onclick}>
+  <button type="button" class="split m3-font-label-large" {...extra}>
     <Layer />
     {@render children()}
   </button>

package/package/buttons/SplitButton.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { Snippet } from "svelte";
+import type { ButtonAttrs } from "../misc/typing-utils";
 type $$ComponentProps = {
     variant: "elevated" | "filled" | "tonal" | "outlined";
     x?: "inner" | "right";
     y?: "down" | "up";
     children: Snippet;
     menu: Snippet;
-    onclick: () => void;
-};
+} & ButtonAttrs;
 declare const SplitButton: import("svelte").Component<$$ComponentProps, {}, "">;
 type SplitButton = ReturnType<typeof SplitButton>;
 export default SplitButton;

package/package/containers/Card.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
-  import type { ButtonAttrs, NotButton } from "../misc/typing-utils";
+  import type { ButtonAttrs, DivAttrs } from "../misc/typing-utils";
 
-  type ActionProps = ButtonAttrs | NotButton<HTMLAttributes<HTMLDivElement>>;
+  type ActionProps = ButtonAttrs | DivAttrs;
 
   let props: {
     variant: "elevated" | "filled" | "outlined";

package/package/containers/Card.svelte.d.ts

@@ -1,7 +1,6 @@
 import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
-import type { ButtonAttrs, NotButton } from "../misc/typing-utils";
-type ActionProps = ButtonAttrs | NotButton<HTMLAttributes<HTMLDivElement>>;
+import type { ButtonAttrs, DivAttrs } from "../misc/typing-utils";
+type ActionProps = ButtonAttrs | DivAttrs;
 type $$ComponentProps = {
     variant: "elevated" | "filled" | "outlined";
     children: Snippet;

package/package/containers/Dialog.svelte

@@ -10,10 +10,7 @@
     buttons,
     children,
     open = $bindable(),
-    closeOnEsc = true,
-    closeOnClick = true,
-    onEsc,
-    onClick,
+    closedby = "any",
     ...extra
   }: {
     icon?: IconifyIcon | undefined;
@@ -21,9 +18,13 @@
     buttons: Snippet;
     children: Snippet;
     open: boolean;
+    /** @deprecated use closedby instead */
     closeOnEsc?: boolean;
+    /** @deprecated use closedby instead */
     closeOnClick?: boolean;
+    /** @deprecated listen to `open` state changes instead of onEsc */
     onEsc?: () => void;
+    /** @deprecated listen to `open` state changes instead of onClick */
     onClick?: () => void;
   } & HTMLDialogAttributes = $props();
 
@@ -37,39 +38,41 @@
 
 <dialog
   class="m3-container"
+  ontoggle={(e) => {
+    open = e.newState == "open";
+  }}
   oncancel={(e) => {
     if (e.target != e.currentTarget) return;
-
-    if (!closeOnEsc) {
-      e.preventDefault();
-      return;
+    if (extra.closeOnEsc && extra.onEsc) {
+      extra.onEsc();
     }
-
-    onEsc?.();
-    open = false;
   }}
   onclick={(e) => {
     if (e.target != e.currentTarget) return;
-    if (closeOnClick) {
-      onClick?.();
-      open = false;
+    if (extra.closeOnClick && extra.onClick) {
+      extra.onClick();
     }
   }}
   bind:this={dialog}
+  closedby={closedby ||
+    (extra.closeOnClick == false && extra.closeOnEsc == false
+      ? "none"
+      : extra.closeOnClick == false
+        ? "closerequest"
+        : "any")}
+  role="alertdialog"
   {...extra}
 >
-  <div class="d">
-    {#if icon}
-      <Icon {icon} width="1.5rem" height="1.5rem" />
-    {/if}
-    <p class="headline m3-font-headline-small" class:center={icon}>{headline}</p>
-    <div class="content m3-font-body-medium">
-      {@render children()}
-    </div>
-    <div class="buttons">
-      {@render buttons()}
-    </div>
+  {#if icon}
+    <Icon {icon} width="1.5rem" height="1.5rem" />
+  {/if}
+  <p class="headline m3-font-headline-small" class:center={icon}>{headline}</p>
+  <div class="content m3-font-body-medium">
+    {@render children()}
   </div>
+  <form method="dialog" class="buttons">
+    {@render buttons()}
+  </form>
 </dialog>
 
 <style>
@@ -85,20 +88,15 @@
     border-radius: var(--m3-dialog-shape);
     min-width: 17.5rem;
     max-width: 35rem;
-    padding: 0;
-    overflow: auto;
-  }
-  .d {
-    display: flex;
-    flex-direction: column;
     padding: 1.5rem;
-  }
-  .d > :global(svg) {
-    color: rgb(var(--m3-scheme-secondary));
+    overflow: auto;
+    > :global(svg) {
+      color: rgb(var(--m3-scheme-secondary));
 
-    flex-shrink: 0;
-    align-self: center;
-    margin-bottom: 1rem;
+      flex-shrink: 0;
+      align-self: center;
+      margin-bottom: 1rem;
+    }
   }
   .headline {
     color: rgb(var(--m3-scheme-on-surface));

package/package/containers/Dialog.svelte.d.ts

@@ -7,9 +7,13 @@ type $$ComponentProps = {
     buttons: Snippet;
     children: Snippet;
     open: boolean;
+    /** @deprecated use closedby instead */
     closeOnEsc?: boolean;
+    /** @deprecated use closedby instead */
     closeOnClick?: boolean;
+    /** @deprecated listen to `open` state changes instead of onEsc */
     onEsc?: () => void;
+    /** @deprecated listen to `open` state changes instead of onClick */
     onClick?: () => void;
 } & HTMLDialogAttributes;
 declare const Dialog: import("svelte").Component<$$ComponentProps, {}, "open">;

package/package/containers/ListItem.svelte

@@ -1,16 +1,24 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import type { HTMLAnchorAttributes, HTMLAttributes, HTMLLabelAttributes } from "svelte/elements";
+  import type { HTMLAnchorAttributes, HTMLLabelAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
-  import type { ButtonAttrs, NotButton } from "../misc/typing-utils";
+  import type { ButtonAttrs, DivAttrs, NotButton } from "../misc/typing-utils";
 
   type ActionProps =
-    | NotButton<HTMLAttributes<HTMLDivElement>>
+    | DivAttrs
     | ButtonAttrs
     | ({ label: true } & NotButton<HTMLLabelAttributes>)
     | ({ href: string } & NotButton<HTMLAnchorAttributes>);
 
-  let props: {
+  let {
+    leading,
+    overline = "",
+    headline = "",
+    supporting = "",
+    trailing,
+    lines = overline && supporting ? 3 : overline || supporting ? 2 : 1,
+    ...props
+  }: {
     leading?: Snippet;
     overline?: string;
     headline?: string;
@@ -18,19 +26,9 @@
     trailing?: Snippet;
     lines?: number;
   } & ActionProps = $props();
-  let _lines = $derived(
-    props.lines ||
-      (props.overline && props.supporting ? 3 : props.overline || props.supporting ? 2 : 1),
-  );
 </script>
 
-{#snippet content(
-  leading: Snippet | undefined,
-  overline: string,
-  headline: string,
-  supporting: string,
-  trailing: Snippet | undefined,
-)}
+{#snippet content()}
   {#if leading}
     <div class="leading">
       {@render leading()}
@@ -53,38 +51,29 @@
   {/if}
 {/snippet}
 
-{#if "label" in props}
-  {@const {
-    leading,
-    overline = "",
-    headline = "",
-    supporting = "",
-    trailing,
-    label: _,
-    ...extra
-  } = props}
-  <label class="m3-container focus-inset lines-{_lines}" {...extra}>
-    <Layer />
-    {@render content(leading, overline, headline, supporting, trailing)}
-  </label>
-{:else if "onclick" in props}
-  {@const { leading, overline = "", headline = "", supporting = "", trailing, ...extra } = props}
-  <button type="button" class="m3-container focus-inset lines-{_lines}" {...extra}>
-    <Layer />
-    {@render content(leading, overline, headline, supporting, trailing)}
-  </button>
-{:else if "href" in props}
-  {@const { leading, overline = "", headline = "", supporting = "", trailing, ...extra } = props}
-  <a class="m3-container focus-inset lines-{_lines}" {...extra}>
-    <Layer />
-    {@render content(leading, overline, headline, supporting, trailing)}
-  </a>
-{:else}
-  {@const { leading, overline = "", headline = "", supporting = "", trailing, ...extra } = props}
-  <div class="m3-container lines-{_lines}" {...extra}>
-    {@render content(leading, overline, headline, supporting, trailing)}
-  </div>
-{/if}
+<li style:display="contents">
+  {#if "label" in props}
+    {@const { label: _, ...extra } = props}
+    <label class="m3-container focus-inset lines-{lines}" {...extra}>
+      <Layer />
+      {@render content()}
+    </label>
+  {:else if "onclick" in props}
+    <button type="button" class="m3-container focus-inset lines-{lines}" {...props}>
+      <Layer />
+      {@render content()}
+    </button>
+  {:else if "href" in props}
+    <a class="m3-container focus-inset lines-{lines}" {...props}>
+      <Layer />
+      {@render content()}
+    </a>
+  {:else}
+    <div class="m3-container lines-{lines}" {...props}>
+      {@render content()}
+    </div>
+  {/if}
+</li>
 
 <style>
   .m3-container {

package/package/containers/ListItem.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from "svelte";
-import type { HTMLAnchorAttributes, HTMLAttributes, HTMLLabelAttributes } from "svelte/elements";
-import type { ButtonAttrs, NotButton } from "../misc/typing-utils";
-type ActionProps = NotButton<HTMLAttributes<HTMLDivElement>> | ButtonAttrs | ({
+import type { HTMLAnchorAttributes, HTMLLabelAttributes } from "svelte/elements";
+import type { ButtonAttrs, DivAttrs, NotButton } from "../misc/typing-utils";
+type ActionProps = DivAttrs | ButtonAttrs | ({
     label: true;
 } & NotButton<HTMLLabelAttributes>) | ({
     href: string;

package/package/containers/Snackbar.svelte

@@ -14,12 +14,12 @@
 
 <script lang="ts">
   import { onDestroy, type ComponentProps } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
   import { fade } from "svelte/transition";
   import iconX from "@ktibow/iconset-material-symbols/close";
   import Icon from "../misc/_icon.svelte";
   import SnackbarItem from "./SnackbarItem.svelte";
   import Layer from "../misc/Layer.svelte";
+  import type { DivAttrs } from "../misc/typing-utils";
 
   type SnackbarConfig = Omit<ComponentProps<typeof SnackbarItem>, "children">;
 
@@ -30,7 +30,7 @@
   }: {
     config?: SnackbarConfig;
     closeButtonTitle?: string;
-  } & HTMLAttributes<HTMLDivElement> = $props();
+  } & DivAttrs = $props();
   export const show = ({ message, actions = {}, closable = false, timeout = 4000 }: SnackbarIn) => {
     snackbar = { message, actions, closable, timeout };
     clearTimeout(timeoutId);

package/package/containers/Snackbar.svelte.d.ts

@@ -5,13 +5,13 @@ export type SnackbarIn = {
     timeout?: number | null;
 };
 import { type ComponentProps } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
 import SnackbarItem from "./SnackbarItem.svelte";
+import type { DivAttrs } from "../misc/typing-utils";
 type SnackbarConfig = Omit<ComponentProps<typeof SnackbarItem>, "children">;
 type $$ComponentProps = {
     config?: SnackbarConfig;
     closeButtonTitle?: string;
-} & HTMLAttributes<HTMLDivElement>;
+} & DivAttrs;
 declare const Snackbar: import("svelte").Component<$$ComponentProps, {
     show: ({ message, actions, closable, timeout }: SnackbarIn) => void;
 }, "">;

package/package/containers/SnackbarItem.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+  import type { DivAttrs } from "../misc/typing-utils";
   import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
 
-  let { children, ...extra }: { children: Snippet } & HTMLAttributes<HTMLDivElement> = $props();
+  let { children, ...extra }: { children: Snippet } & DivAttrs = $props();
 </script>
 
 <div class="m3-container" {...extra}>

package/package/containers/SnackbarItem.svelte.d.ts

@@ -1,8 +1,8 @@
+import type { DivAttrs } from "../misc/typing-utils";
 import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = {
     children: Snippet;
-} & HTMLAttributes<HTMLDivElement>;
+} & DivAttrs;
 declare const SnackbarItem: import("svelte").Component<$$ComponentProps, {}, "">;
 type SnackbarItem = ReturnType<typeof SnackbarItem>;
 export default SnackbarItem;

package/package/forms/Checkbox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
+  import type { DivAttrs } from "../misc/typing-utils";
 
   // MUST BE WRAPPED IN A <label>
   let {
@@ -9,7 +9,7 @@
     ...extra
   }: {
     children: Snippet;
-  } & HTMLAttributes<HTMLDivElement> = $props();
+  } & DivAttrs = $props();
 </script>
 
 <div class="m3-container" {...extra}>
@@ -38,6 +38,7 @@
   .m3-container :global(input) {
     position: absolute;
     opacity: 0;
+    pointer-events: none;
   }
 
   .layer-container {

package/package/forms/Checkbox.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
+import type { DivAttrs } from "../misc/typing-utils";
 type $$ComponentProps = {
     children: Snippet;
-} & HTMLAttributes<HTMLDivElement>;
+} & DivAttrs;
 declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/package/forms/Chip.svelte

@@ -3,14 +3,15 @@
   import type { IconifyIcon } from "@iconify/types";
   import Icon from "../misc/_icon.svelte";
   import Layer from "../misc/Layer.svelte";
-  import type { ButtonAttrs } from "../misc/typing-utils";
+  import type { LabelAttrs, AnchorAttrs, ButtonAttrs } from "../misc/typing-utils";
+
+  type ActionProps = LabelAttrs | AnchorAttrs | ButtonAttrs;
 
   let {
     variant,
     icon,
     trailingIcon,
     elevated = false,
-    disabled = false,
     selected = false,
     children,
     ...extra
@@ -28,20 +29,12 @@
     icon?: IconifyIcon | undefined;
     trailingIcon?: IconifyIcon | undefined;
     elevated?: boolean;
-    disabled?: boolean;
     selected?: boolean;
     children: Snippet;
-  } & ButtonAttrs = $props();
+  } & ActionProps = $props();
 </script>
 
-<button
-  type="button"
-  class="m3-container {variant}"
-  class:elevated
-  class:selected
-  {disabled}
-  {...extra}
->
+{#snippet content()}
   <Layer />
   {#if icon}
     <Icon {icon} class="leading" />
@@ -50,7 +43,21 @@
   {#if trailingIcon}
     <Icon icon={trailingIcon} class="trailing" />
   {/if}
-</button>
+{/snippet}
+
+{#if "for" in extra}
+  <label class="m3-container {variant}" class:elevated class:selected {...extra}>
+    {@render content()}
+  </label>
+{:else if "href" in extra}
+  <a class="m3-container {variant}" class:elevated class:selected {...extra}>
+    {@render content()}
+  </a>
+{:else}
+  <button class="m3-container {variant}" class:elevated class:selected {...extra} type="button">
+    {@render content()}
+  </button>
+{/if}
 
 <style>
   :root {

package/package/forms/Chip.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from "svelte";
 import type { IconifyIcon } from "@iconify/types";
-import type { ButtonAttrs } from "../misc/typing-utils";
+import type { LabelAttrs, AnchorAttrs, ButtonAttrs } from "../misc/typing-utils";
+type ActionProps = LabelAttrs | AnchorAttrs | ButtonAttrs;
 type $$ComponentProps = {
     /**
      * general is filter/suggestion since they're the same.
@@ -15,10 +16,9 @@ type $$ComponentProps = {
     icon?: IconifyIcon | undefined;
     trailingIcon?: IconifyIcon | undefined;
     elevated?: boolean;
-    disabled?: boolean;
     selected?: boolean;
     children: Snippet;
-} & ButtonAttrs;
+} & ActionProps;
 declare const Chip: import("svelte").Component<$$ComponentProps, {}, "">;
 type Chip = ReturnType<typeof Chip>;
 export default Chip;

package/package/forms/DateField.svelte

@@ -69,7 +69,7 @@ opacity: ${Math.min(t * 3, 1)};`,
     {...extra}
     defaultValue={extra.defaultValue}
   />
-  <!-- TODO: once https://github.com/sveltejs/svelte/pull/16481 is finished, remove the defaultvalue thing -->
+  <!-- TODO/deprecated: once https://github.com/sveltejs/svelte/pull/16481 is finished, remove the defaultvalue thing -->
   <label class="m3-font-body-small" for={id}>{label}</label>
   <button type="button" {disabled} title={datePickerTitle} onclick={() => (picker = !picker)}>
     <Layer />

package/package/forms/DateFieldOutlined.svelte

@@ -69,7 +69,7 @@ opacity: ${Math.min(t * 3, 1)};`,
     {...extra}
     defaultValue={extra.defaultValue}
   />
-  <!-- TODO: once https://github.com/sveltejs/svelte/pull/16481 is finished, remove the defaultvalue thing -->
+  <!-- TODO/deprecated: once https://github.com/sveltejs/svelte/pull/16481 is finished, remove the defaultvalue thing -->
   <div class="layer"></div>
   <label class="m3-font-body-small" for={id}>{label}</label>
   <button type="button" {disabled} title={datePickerTitle} onclick={() => (picker = !picker)}>

package/package/forms/LinearProgressIndeterminate.svelte

@@ -3,9 +3,9 @@
 @deprecated use LoadingIndicator or one of the Estimate components instead
 -->
 <script lang="ts">
-  import type { HTMLAttributes } from "svelte/elements";
+  import type { DivAttrs } from "../misc/typing-utils";
 
-  let extra: HTMLAttributes<HTMLDivElement> = $props();
+  let extra: DivAttrs = $props();
 </script>
 
 <div class="m3-container" role="progressbar" {...extra}>

package/package/forms/LinearProgressIndeterminate.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from "svelte/elements";
+import type { DivAttrs } from "../misc/typing-utils";
 /** @deprecated use LoadingIndicator or one of the Estimate components instead */
-declare const LinearProgressIndeterminate: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+declare const LinearProgressIndeterminate: import("svelte").Component<DivAttrs, {}, "">;
 type LinearProgressIndeterminate = ReturnType<typeof LinearProgressIndeterminate>;
 export default LinearProgressIndeterminate;

package/package/forms/RadioAnim1.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import type { HTMLAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
+  import type { DivAttrs } from "../misc/typing-utils";
 
   // MUST BE WRAPPED IN A <label>
   let {
@@ -9,7 +9,7 @@
     ...extra
   }: {
     children: Snippet;
-  } & HTMLAttributes<HTMLDivElement> = $props();
+  } & DivAttrs = $props();
 </script>
 
 <div class="m3-container" {...extra}>
@@ -32,6 +32,7 @@
   .m3-container :global(input) {
     position: absolute;
     opacity: 0;
+    pointer-events: none;
   }
 
   .layer-container {

package/package/forms/RadioAnim1.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
+import type { DivAttrs } from "../misc/typing-utils";
 type $$ComponentProps = {
     children: Snippet;
-} & HTMLAttributes<HTMLDivElement>;
+} & DivAttrs;
 declare const RadioAnim1: import("svelte").Component<$$ComponentProps, {}, "">;
 type RadioAnim1 = ReturnType<typeof RadioAnim1>;
 export default RadioAnim1;