m3-svelte 3.6.1 → 4.0.0-beta.0

package/package/nav/NavDrawerButton.svelte

@@ -1,33 +1,43 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import type { IconifyIcon } from "@iconify/types";
   import Icon from "../misc/_icon.svelte";
   import Layer from "../misc/Layer.svelte";
-  import type { IconifyIcon } from "@iconify/types";
-  import type { HTMLButtonAttributes } from "svelte/elements";
 
-  export let selected: boolean;
-  export let extraOptions: HTMLButtonAttributes = {};
-  export let icon: IconifyIcon;
+  let {
+    selected,
+    icon,
+    children,
+    click,
+    ...extra
+  }: {
+    selected: boolean;
+    icon: IconifyIcon;
+    children: Snippet;
+    click: () => void;
+  } & HTMLButtonAttributes = $props();
 </script>
 
-<button class="destination" disabled={selected} on:click {...extraOptions}>
+<button class="destination" disabled={selected} onclick={click} {...extra}>
   <Layer />
   <Icon {icon} />
-  <span class="m3-font-label-large"><slot /></span>
+  <span class="m3-font-label-large">{@render children()}</span>
 </button>
 
 <style>
   .destination {
-    height: 3.5rem;
-    border: none;
-    border-radius: 1.75rem;
-    padding: 0 1.5rem 0 1rem;
-
     display: flex;
     align-items: center;
     gap: 0.75rem;
     position: relative;
     overflow: hidden;
 
+    height: 3.5rem;
+    border: none;
+    border-radius: 1.75rem;
+    padding: 0 1.5rem 0 1rem;
+
     background-color: transparent;
     color: rgb(var(--m3-scheme-on-surface-variant));
     transition: all 300ms;

package/package/nav/NavDrawerButton.svelte.d.ts

@@ -1,35 +1,12 @@
-import type { IconifyIcon } from "@iconify/types";
+import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } 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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const NavDrawerButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+import type { IconifyIcon } from "@iconify/types";
+type $$ComponentProps = {
     selected: boolean;
-    extraOptions?: HTMLButtonAttributes;
     icon: IconifyIcon;
-}, {
-    default: {};
-}>, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type NavDrawerButton = InstanceType<typeof NavDrawerButton>;
+    children: Snippet;
+    click: () => void;
+} & HTMLButtonAttributes;
+declare const NavDrawerButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavDrawerButton = ReturnType<typeof NavDrawerButton>;
 export default NavDrawerButton;

package/package/nav/NavDrawerLink.svelte

@@ -1,33 +1,42 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+  import type { IconifyIcon } from "@iconify/types";
   import Icon from "../misc/_icon.svelte";
   import Layer from "../misc/Layer.svelte";
-  import type { IconifyIcon } from "@iconify/types";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
 
-  export let href: string;
-  export let selected: boolean;
-  export let extraOptions: HTMLAnchorAttributes = {};
-  export let icon: IconifyIcon;
+  let {
+    selected,
+    icon,
+    children,
+    href,
+    ...extra
+  }: {
+    selected: boolean;
+    icon: IconifyIcon;
+    children: Snippet;
+    href: string;
+  } & HTMLAnchorAttributes = $props();
 </script>
 
-<a {href} class="destination" class:selected {...extraOptions}>
+<a {href} class="destination" class:selected {...extra}>
   <Layer />
   <Icon {icon} />
-  <span class="m3-font-label-large"><slot /></span>
+  <span class="m3-font-label-large">{@render children?.()}</span>
 </a>
 
 <style>
   .destination {
-    height: 3.5rem;
-    border-radius: 1.75rem;
-    padding: 0 1.5rem 0 1rem;
-
     display: flex;
     align-items: center;
     gap: 0.75rem;
     position: relative;
     overflow: hidden;
 
+    height: 3.5rem;
+    border-radius: 1.75rem;
+    padding: 0 1.5rem 0 1rem;
+
     background-color: transparent;
     color: rgb(var(--m3-scheme-on-surface-variant));
     transition: all 300ms;

package/package/nav/NavDrawerLink.svelte.d.ts

@@ -1,34 +1,12 @@
-import type { IconifyIcon } from "@iconify/types";
+import type { Snippet } from "svelte";
 import type { HTMLAnchorAttributes } 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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const NavDrawerLink: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    href: string;
+import type { IconifyIcon } from "@iconify/types";
+type $$ComponentProps = {
     selected: boolean;
-    extraOptions?: HTMLAnchorAttributes;
     icon: IconifyIcon;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type NavDrawerLink = InstanceType<typeof NavDrawerLink>;
+    children: Snippet;
+    href: string;
+} & HTMLAnchorAttributes;
+declare const NavDrawerLink: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavDrawerLink = ReturnType<typeof NavDrawerLink>;
 export default NavDrawerLink;

package/package/nav/NavList.svelte

@@ -1,18 +1,22 @@
 <script lang="ts">
-  import type { HTMLAttributes } from "svelte/elements";
+  import type { Snippet } from "svelte";
 
-  // Both a nav rail and a nav bar.
-  export let display = "flex";
-  export let extraOptions: HTMLAttributes<HTMLElement> = {};
-  export let type: "rail" | "bar" | "auto";
+  let {
+    variant,
+    children,
+  }: {
+    variant: "rail" | "bar" | "auto";
+    children: Snippet;
+  } = $props();
 </script>
 
-<nav class="m3-container type-{type}" style="display: {display};" {...extraOptions}>
-  <slot />
+<nav class="m3-container {variant}">
+  {@render children()}
 </nav>
 
 <style>
   .m3-container {
+    display: flex;
     position: relative;
     flex-grow: 1;
     background-color: rgb(var(--m3-scheme-surface-container));
@@ -21,7 +25,7 @@
     gap: 0.5rem;
   }
 
-  .type-rail {
+  .rail {
     background-color: rgb(var(--m3-scheme-surface));
     flex-direction: column;
     width: 5rem;
@@ -30,7 +34,7 @@
     gap: 0.75rem;
   }
   @media (min-width: 37.5rem) {
-    .type-auto {
+    .auto {
       background-color: rgb(var(--m3-scheme-surface));
       flex-direction: column;
       width: 5rem;

package/package/nav/NavList.svelte.d.ts

@@ -1,32 +1,8 @@
-import type { HTMLAttributes } 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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const NavList: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    display?: string;
-    extraOptions?: HTMLAttributes<HTMLElement>;
-    type: "rail" | "bar" | "auto";
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type NavList = InstanceType<typeof NavList>;
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    variant: "rail" | "bar" | "auto";
+    children: Snippet;
+};
+declare const NavList: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavList = ReturnType<typeof NavList>;
 export default NavList;

package/package/nav/NavListButton.svelte

@@ -1,31 +1,35 @@
 <script lang="ts">
-  import Icon from "../misc/_icon.svelte";
-  import type { IconifyIcon } from "@iconify/types";
+  import type { Snippet } from "svelte";
   import type { HTMLButtonAttributes } from "svelte/elements";
+  import type { IconifyIcon } from "@iconify/types";
+  import Icon from "../misc/_icon.svelte";
 
-  export let display = "flex";
-  export let extraOptions: HTMLButtonAttributes = {};
-  export let type: "rail" | "bar" | "auto";
-
-  export let selected: boolean;
-  export let icon: IconifyIcon;
+  let {
+    variant,
+    selected,
+    icon,
+    children,
+    click,
+    ...extra
+  }: {
+    variant: "rail" | "bar" | "auto";
+    selected: boolean;
+    icon: IconifyIcon;
+    children: Snippet;
+    click: () => void;
+  } & HTMLButtonAttributes = $props();
 </script>
 
-<button
-  on:click
-  class="m3-container type-{type}"
-  style="display: {display};"
-  class:selected
-  {...extraOptions}
->
+<button class="m3-container {variant}" class:selected onclick={click} {...extra}>
   <div class="icon-space">
     <Icon {icon} />
   </div>
-  <p class="m3-font-label-medium"><slot /></p>
+  <p class="m3-font-label-medium">{@render children()}</p>
 </button>
 
 <style>
   .m3-container {
+    display: flex;
     flex-direction: column;
     height: 3.25rem;
     gap: 0.25rem;
@@ -79,17 +83,17 @@
     transition: color 200ms;
   }
 
-  .type-rail {
+  .rail {
     height: 3.5rem;
   }
-  .type-rail > .icon-space {
+  .rail > .icon-space {
     width: 3.5rem;
   }
   @media (min-width: 37.5rem) {
-    .type-auto {
+    .auto {
       height: 3.5rem;
     }
-    .type-auto > .icon-space {
+    .auto > .icon-space {
       width: 3.5rem;
     }
   }
@@ -102,8 +106,8 @@
     inset: 0 0;
     width: 100%;
     transition:
-      width 400ms var(--m3-easing),
-      inset 400ms var(--m3-easing);
+      width var(--m3-util-easing-fast-spatial),
+      inset var(--m3-util-easing-fast-spatial);
   }
   .selected > .icon-space > :global(svg) {
     color: rgb(var(--m3-scheme-on-secondary-container));

package/package/nav/NavListButton.svelte.d.ts

@@ -1,37 +1,13 @@
-import type { IconifyIcon } from "@iconify/types";
+import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } 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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const NavListButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    display?: string;
-    extraOptions?: HTMLButtonAttributes;
-    type: "rail" | "bar" | "auto";
+import type { IconifyIcon } from "@iconify/types";
+type $$ComponentProps = {
+    variant: "rail" | "bar" | "auto";
     selected: boolean;
     icon: IconifyIcon;
-}, {
-    default: {};
-}>, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type NavListButton = InstanceType<typeof NavListButton>;
+    children: Snippet;
+    click: () => void;
+} & HTMLButtonAttributes;
+declare const NavListButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavListButton = ReturnType<typeof NavListButton>;
 export default NavListButton;

package/package/nav/NavListLink.svelte

@@ -1,32 +1,35 @@
 <script lang="ts">
-  import Icon from "../misc/_icon.svelte";
-  import type { IconifyIcon } from "@iconify/types";
+  import type { Snippet } from "svelte";
   import type { HTMLAnchorAttributes } from "svelte/elements";
+  import type { IconifyIcon } from "@iconify/types";
+  import Icon from "../misc/_icon.svelte";
 
-  export let display = "flex";
-  export let extraOptions: HTMLAnchorAttributes = {};
-  export let type: "rail" | "bar" | "auto";
-  export let href: string;
-
-  export let selected: boolean;
-  export let icon: IconifyIcon;
+  let {
+    variant,
+    selected,
+    icon,
+    children,
+    href,
+    ...extra
+  }: {
+    variant: "rail" | "bar" | "auto";
+    selected: boolean;
+    icon: IconifyIcon;
+    children: Snippet;
+    href: string;
+  } & HTMLAnchorAttributes = $props();
 </script>
 
-<a
-  class="m3-container type-{type}"
-  style="display: {display};"
-  class:selected
-  {href}
-  {...extraOptions}
->
+<a class="m3-container {variant}" class:selected {href} {...extra}>
   <div class="icon-space">
     <Icon {icon} />
   </div>
-  <p class="m3-font-label-medium"><slot /></p>
+  <p class="m3-font-label-medium">{@render children()}</p>
 </a>
 
 <style>
   .m3-container {
+    display: flex;
     flex-direction: column;
     height: 3.25rem;
     gap: 0.25rem;
@@ -78,17 +81,17 @@
     transition: color 200ms;
   }
 
-  .type-rail {
+  .rail {
     height: 3.5rem;
   }
-  .type-rail > .icon-space {
+  .rail > .icon-space {
     width: 3.5rem;
   }
   @media (min-width: 37.5rem) {
-    .type-auto {
+    .auto {
       height: 3.5rem;
     }
-    .type-auto > .icon-space {
+    .auto > .icon-space {
       width: 3.5rem;
     }
   }
@@ -101,8 +104,8 @@
     inset: 0 0;
     width: 100%;
     transition:
-      width 400ms var(--m3-easing),
-      inset 400ms var(--m3-easing);
+      width var(--m3-util-easing-fast-spatial),
+      inset var(--m3-util-easing-fast-spatial);
   }
   .selected > .icon-space > :global(svg) {
     color: rgb(var(--m3-scheme-on-secondary-container));

package/package/nav/NavListLink.svelte.d.ts

@@ -1,36 +1,13 @@
-import type { IconifyIcon } from "@iconify/types";
+import type { Snippet } from "svelte";
 import type { HTMLAnchorAttributes } 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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const NavListLink: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    display?: string;
-    extraOptions?: HTMLAnchorAttributes;
-    type: "rail" | "bar" | "auto";
-    href: string;
+import type { IconifyIcon } from "@iconify/types";
+type $$ComponentProps = {
+    variant: "rail" | "bar" | "auto";
     selected: boolean;
     icon: IconifyIcon;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type NavListLink = InstanceType<typeof NavListLink>;
+    children: Snippet;
+    href: string;
+} & HTMLAnchorAttributes;
+declare const NavListLink: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavListLink = ReturnType<typeof NavListLink>;
 export default NavListLink;

package/package/nav/Tabs.svelte

@@ -1,31 +1,31 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
-  import type { HTMLAttributes, HTMLInputAttributes } from "svelte/elements";
+  import type { HTMLInputAttributes } from "svelte/elements";
   import Icon from "../misc/_icon.svelte";
   import Layer from "../misc/Layer.svelte";
-  export let display = "flex";
-  export let extraWrapperOptions: HTMLAttributes<HTMLDivElement> = {};
-  export let extraOptions: HTMLInputAttributes = {};
-  export let secondary = false;
-  export let tab: string;
-  export let items: {
-    icon?: IconifyIcon;
-    name: string;
-    value: string;
-  }[];
+
+  let {
+    secondary = false,
+    tab = $bindable(),
+    items,
+    ...extra
+  }: {
+    secondary?: boolean;
+    tab: string;
+    items: {
+      icon?: IconifyIcon;
+      name: string;
+      value: string;
+    }[];
+  } & HTMLInputAttributes = $props();
   const name = crypto.randomUUID();
 </script>
 
-<div
-  class="m3-container"
-  class:primary={!secondary}
-  style="display: {display}; --items: {items.length};"
-  {...extraWrapperOptions}
->
+<div class="m3-container" class:primary={!secondary} style:--items={items.length}>
   <div class="divider"></div>
   {#each items as item}
     {@const id = name + item.value}
-    <input type="radio" {name} {id} value={item.value} bind:group={tab} {...extraOptions} />
+    <input type="radio" {name} {id} value={item.value} bind:group={tab} {...extra} />
     <label for={id} class:tall={item.icon}>
       <Layer />
       {#if item.icon}
@@ -39,6 +39,7 @@
 
 <style>
   .m3-container {
+    display: flex;
     position: relative;
     background-color: rgb(var(--m3-scheme-surface));
   }
@@ -50,7 +51,7 @@
   .divider {
     position: absolute;
     inset: auto 0 0 0;
-    height: 0.0625rem;
+    height: 1px;
     background-color: rgb(var(--m3-scheme-surface-container-highest));
   }
   label {

package/package/nav/Tabs.svelte.d.ts

@@ -1,22 +1,6 @@
 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 Tabs: $$__sveltets_2_IsomorphicComponent<{
-    display?: string;
-    extraWrapperOptions?: HTMLAttributes<HTMLDivElement>;
-    extraOptions?: HTMLInputAttributes;
+import type { HTMLInputAttributes } from "svelte/elements";
+type $$ComponentProps = {
     secondary?: boolean;
     tab: string;
     items: {
@@ -24,8 +8,7 @@ declare const Tabs: $$__sveltets_2_IsomorphicComponent<{
         name: string;
         value: string;
     }[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Tabs = InstanceType<typeof Tabs>;
+} & HTMLInputAttributes;
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "tab">;
+type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;