m3-svelte 3.6.1 → 4.0.0-beta.0

package/package/forms/CircularProgressIndeterminate.svelte.d.ts

@@ -1,22 +1,4 @@
 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;
-}
-declare const CircularProgressIndeterminate: $$__sveltets_2_IsomorphicComponent<{
-    display?: string;
-    extraOptions?: HTMLAttributes<SVGElement>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CircularProgressIndeterminate = InstanceType<typeof CircularProgressIndeterminate>;
+declare const CircularProgressIndeterminate: import("svelte").Component<HTMLAttributes<SVGElement>, {}, "">;
+type CircularProgressIndeterminate = ReturnType<typeof CircularProgressIndeterminate>;
 export default CircularProgressIndeterminate;

package/package/forms/DatePickerDocked.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
   import Actions from "./_picker/Actions.svelte";
   import CalendarPicker from "./_picker/CalendarPicker.svelte";
   import FocusPicker from "./_picker/FocusPicker.svelte";
@@ -7,59 +6,76 @@
 
   const now = new Date();
 
-  export let display = "flex";
-  export let date = "";
-  export let clearable: boolean;
-  export let focusedMonth: number = parseInt(date.slice(5, 7)) - 1 || now.getMonth(),
-    focusedYear = parseInt(date.slice(0, 4)) || now.getFullYear(),
+  let {
+    date = "",
+    clearable,
+    focusedMonth = $bindable(parseInt(date.slice(5, 7)) - 1 || now.getMonth()),
+    focusedYear = $bindable(parseInt(date.slice(0, 4)) || now.getFullYear()),
     startYear = now.getFullYear() - 50,
-    endYear = now.getFullYear() + 10;
-  export let dateValidator: (date: string) => boolean = (_date: string) => true;
+    endYear = now.getFullYear() + 10,
+    dateValidator = (_date: string) => true,
+    close,
+    setDate,
+  }: {
+    date?: string;
+    clearable: boolean;
+    focusedMonth?: number;
+    focusedYear?: number;
+    startYear?: number;
+    endYear?: number;
+    dateValidator?: (date: string) => boolean;
+    close: () => void;
+    setDate: (date: string) => void;
+  } = $props();
 
-  let currentView: "calendar" | "year" | "month" = "calendar",
-    chosenDate: string;
-  $: chosenDate = date;
+  let currentView: "calendar" | "year" | "month" = $state("calendar");
+  let chosenDate = $state(date);
+  $effect(() => {
+    chosenDate = date;
+  });
 
   const getLongMonth = (month: number) =>
     new Date(0, month).toLocaleDateString(undefined, { month: "long" });
-  const dispatch = createEventDispatcher();
 </script>
 
-<div class="m3-container" style="display: {display};">
+<div class="m3-container">
   <Header bind:currentView bind:focusedMonth bind:focusedYear {startYear} {endYear} />
   {#if currentView == "calendar"}
     <CalendarPicker {focusedMonth} {focusedYear} {dateValidator} bind:chosenDate />
     <Actions
       {clearable}
       chosenDate={Boolean(chosenDate)}
-      on:clear={() => (chosenDate = "")}
-      on:cancel={() => {
+      clear={() => (chosenDate = "")}
+      cancel={() => {
         chosenDate = date;
-        dispatch("close");
+        close();
       }}
-      on:ok={() => {
-        dispatch("setDate", chosenDate);
-        dispatch("close");
+      ok={() => {
+        setDate(chosenDate);
+        close();
       }}
     />
+  {:else if currentView == "month"}
+    <FocusPicker
+      options={Array.from({ length: 12 }, (_, i) => ({
+        name: getLongMonth(i),
+        selected: i == focusedMonth,
+        activate: () => {
+          focusedMonth = i;
+          currentView = "calendar";
+        },
+      }))}
+    />
   {:else}
     <FocusPicker
-      options={currentView == "month"
-        ? Array.from({ length: 12 }, (_, i) => ({
-            id: i,
-            name: getLongMonth(i),
-            selected: i == focusedMonth,
-          }))
-        : Array.from({ length: endYear - startYear }, (_, i) => ({
-            id: startYear + i + 1,
-            name: (startYear + i + 1).toString(),
-            selected: startYear + i + 1 == focusedYear,
-          }))}
-      on:chosen={(e) => {
-        if (currentView == "month") focusedMonth = e.detail;
-        else focusedYear = e.detail;
-        currentView = "calendar";
-      }}
+      options={Array.from({ length: endYear - startYear }, (_, i) => ({
+        name: (startYear + i + 1).toString(),
+        selected: startYear + i + 1 == focusedYear,
+        activate: () => {
+          focusedYear = startYear + i + 1;
+          currentView = "calendar";
+        },
+      }))}
     />
   {/if}
 </div>
@@ -70,6 +86,7 @@
   }
 
   .m3-container {
+    display: flex;
     position: relative;
     overflow: hidden;
     flex-direction: column;

package/package/forms/DatePickerDocked.svelte.d.ts

@@ -1,18 +1,4 @@
-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 DatePickerDocked: $$__sveltets_2_IsomorphicComponent<{
-    display?: string;
+type $$ComponentProps = {
     date?: string;
     clearable: boolean;
     focusedMonth?: number;
@@ -20,11 +6,9 @@ declare const DatePickerDocked: $$__sveltets_2_IsomorphicComponent<{
     startYear?: number;
     endYear?: number;
     dateValidator?: (date: string) => boolean;
-}, {
-    close: CustomEvent<any>;
-    setDate: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DatePickerDocked = InstanceType<typeof DatePickerDocked>;
+    close: () => void;
+    setDate: (date: string) => void;
+};
+declare const DatePickerDocked: import("svelte").Component<$$ComponentProps, {}, "focusedMonth" | "focusedYear">;
+type DatePickerDocked = ReturnType<typeof DatePickerDocked>;
 export default DatePickerDocked;

package/package/forms/LinearProgress.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
-  export let display = "inline-flex";
-  export let extraOptions: HTMLAttributes<HTMLDivElement> = {};
-  export let percent: number;
+
+  let {
+    percent,
+    ...extra
+  }: {
+    percent: number;
+  } & HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
-<div class="m3-container" style="display: {display};" role="progressbar" {...extraOptions}>
-  <div class="percent" style="width: {percent}%;"></div>
+<div class="m3-container" role="progressbar" {...extra}>
+  <div class="percent" style:width="{percent}%"></div>
 </div>
 
 <style>
@@ -14,6 +18,7 @@
     --m3-linear-progress-shape: var(--m3-util-rounding-full);
   }
   .m3-container {
+    display: inline-flex;
     background-color: rgb(var(--m3-scheme-primary-container));
     height: 0.25rem;
     min-width: 8rem;

package/package/forms/LinearProgress.svelte.d.ts

@@ -1,23 +1,7 @@
 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;
-}
-declare const LinearProgress: $$__sveltets_2_IsomorphicComponent<{
-    display?: string;
-    extraOptions?: HTMLAttributes<HTMLDivElement>;
+type $$ComponentProps = {
     percent: number;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type LinearProgress = InstanceType<typeof LinearProgress>;
+} & HTMLAttributes<HTMLDivElement>;
+declare const LinearProgress: import("svelte").Component<$$ComponentProps, {}, "">;
+type LinearProgress = ReturnType<typeof LinearProgress>;
 export default LinearProgress;

package/package/forms/LinearProgressIndeterminate.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
-  export let display = "inline-flex";
-  export let extraOptions: HTMLAttributes<HTMLDivElement> = {};
+
+  let extra: HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
-<div class="m3-container" style="display: {display};" role="progressbar" {...extraOptions}>
+<div class="m3-container" role="progressbar" {...extra}>
   <div class="percent"></div>
 </div>
 
@@ -13,6 +13,7 @@
     --m3-linear-progress-shape: var(--m3-util-rounding-full);
   }
   .m3-container {
+    display: inline-flex;
     background-color: rgb(var(--m3-scheme-primary-container));
     height: 0.25rem;
     min-width: 8rem;

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

@@ -1,22 +1,4 @@
 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;
-}
-declare const LinearProgressIndeterminate: $$__sveltets_2_IsomorphicComponent<{
-    display?: string;
-    extraOptions?: HTMLAttributes<HTMLDivElement>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type LinearProgressIndeterminate = InstanceType<typeof LinearProgressIndeterminate>;
+declare const LinearProgressIndeterminate: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
+type LinearProgressIndeterminate = ReturnType<typeof LinearProgressIndeterminate>;
 export default LinearProgressIndeterminate;

package/package/forms/RadioAnim1.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
 
-  export let display = "inline-flex";
-  export let extraOptions: HTMLAttributes<HTMLDivElement> = {};
   // MUST BE WRAPPED IN A <label>
+  let {
+    children,
+    ...extra
+  }: {
+    children: Snippet;
+  } & HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
-<div class="m3-container" style="display: {display};" {...extraOptions}>
-  <slot />
+<div class="m3-container" {...extra}>
+  {@render children()}
   <div class="layer-container">
     <Layer />
     <div class="radio-circle"></div>
@@ -18,6 +23,7 @@
 
 <style>
   .m3-container {
+    display: inline-flex;
     position: relative;
     width: 1.25rem;
     height: 1.25rem;

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

@@ -1,31 +1,8 @@
+import type { Snippet } from "svelte";
 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 RadioAnim1: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    display?: string;
-    extraOptions?: HTMLAttributes<HTMLDivElement>;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type RadioAnim1 = InstanceType<typeof RadioAnim1>;
+type $$ComponentProps = {
+    children: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const RadioAnim1: import("svelte").Component<$$ComponentProps, {}, "">;
+type RadioAnim1 = ReturnType<typeof RadioAnim1>;
 export default RadioAnim1;

package/package/forms/RadioAnim2.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
 
-  export let display = "inline-flex";
-  export let extraOptions: HTMLAttributes<HTMLDivElement> = {};
   // MUST BE WRAPPED IN A <label>
+  let {
+    children,
+    ...extra
+  }: {
+    children: Snippet;
+  } & HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
-<div class="m3-container" style="display: {display};" {...extraOptions}>
-  <slot />
+<div class="m3-container" {...extra}>
+  {@render children()}
   <div class="layer-container">
     <Layer />
     <div class="radio-circle"></div>
@@ -18,6 +23,7 @@
 
 <style>
   .m3-container {
+    display: inline-flex;
     position: relative;
     width: 1.25rem;
     height: 1.25rem;

package/package/forms/RadioAnim2.svelte.d.ts

@@ -1,31 +1,8 @@
+import type { Snippet } from "svelte";
 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 RadioAnim2: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    display?: string;
-    extraOptions?: HTMLAttributes<HTMLDivElement>;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type RadioAnim2 = InstanceType<typeof RadioAnim2>;
+type $$ComponentProps = {
+    children: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const RadioAnim2: import("svelte").Component<$$ComponentProps, {}, "">;
+type RadioAnim2 = ReturnType<typeof RadioAnim2>;
 export default RadioAnim2;

package/package/forms/RadioAnim3.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
 
-  export let display = "inline-flex";
-  export let extraOptions: HTMLAttributes<HTMLDivElement> = {};
   // MUST BE WRAPPED IN A <label>
+  let {
+    children,
+    ...extra
+  }: {
+    children: Snippet;
+  } & HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
-<div class="m3-container" style="display: {display};" {...extraOptions}>
-  <slot />
+<div class="m3-container" {...extra}>
+  {@render children()}
   <div class="layer-container">
     <Layer />
     <div class="radio-circle"></div>
@@ -18,6 +23,7 @@
 
 <style>
   .m3-container {
+    display: inline-flex;
     position: relative;
     width: 1.25rem;
     height: 1.25rem;

package/package/forms/RadioAnim3.svelte.d.ts

@@ -1,31 +1,8 @@
+import type { Snippet } from "svelte";
 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 RadioAnim3: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    display?: string;
-    extraOptions?: HTMLAttributes<HTMLDivElement>;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type RadioAnim3 = InstanceType<typeof RadioAnim3>;
+type $$ComponentProps = {
+    children: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const RadioAnim3: import("svelte").Component<$$ComponentProps, {}, "">;
+type RadioAnim3 = ReturnType<typeof RadioAnim3>;
 export default RadioAnim3;

package/package/forms/Slider.svelte

@@ -1,44 +1,50 @@
 <script lang="ts">
-  import type { HTMLAttributes, HTMLInputAttributes } from "svelte/elements";
-  import { spring } from "svelte/motion";
-
-  export let extraWrapperOptions: HTMLAttributes<HTMLDivElement> = {};
-  export let extraOptions: HTMLInputAttributes = {};
-  export let value: number;
-  export let min = 0;
-  export let max = 100;
-  export let step: number | "any" = "any";
-  export let disabled = false;
-  export let showValue = true;
-  export let format: (n: number) => string = (n: number) => {
-    return n.toFixed(0);
-  };
-
-  const valueDisplayed = spring(value, { stiffness: 0.3, damping: 1 });
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import { Spring } from "svelte/motion";
+
+  let {
+    value = $bindable(),
+    min = 0,
+    max = 100,
+    step = "any",
+    disabled = false,
+    showValue = true,
+    format = (n: number) => {
+      return n.toFixed(0);
+    },
+    ...extra
+  }: {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number | "any";
+    disabled?: boolean;
+    showValue?: boolean;
+    format?: (n: number) => string;
+  } & HTMLInputAttributes = $props();
+
+  const valueDisplayed = new Spring(value, { stiffness: 0.3, damping: 1 });
   const updateValue = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
     const newValue = Number(e.currentTarget.value);
     e.preventDefault();
     value = newValue;
-    $valueDisplayed = newValue;
+    valueDisplayed.target = newValue;
   };
 
-  let range: number, percent: number;
-  $: {
-    range = max - min;
-    percent = ($valueDisplayed - min) / range;
-  }
+  let range = $derived(max - min);
+  let percent = $derived((valueDisplayed.current - min) / range);
 </script>
 
-<div class="m3-container" style="--percent: {percent * 100}%;" {...extraWrapperOptions}>
+<div class="m3-container" style:--percent="{percent * 100}%">
   <input
     type="range"
-    on:input={updateValue}
-    value={$valueDisplayed}
+    oninput={updateValue}
+    value={valueDisplayed.current}
     {min}
     {max}
     {step}
     {disabled}
-    {...extraOptions}
+    {...extra}
   />
   <div class="track"></div>
   <div class="thumb"></div>

package/package/forms/Slider.svelte.d.ts

@@ -1,20 +1,5 @@
-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 Slider: $$__sveltets_2_IsomorphicComponent<{
-    extraWrapperOptions?: HTMLAttributes<HTMLDivElement>;
-    extraOptions?: HTMLInputAttributes;
+import type { HTMLInputAttributes } from "svelte/elements";
+type $$ComponentProps = {
     value: number;
     min?: number;
     max?: number;
@@ -22,8 +7,7 @@ declare const Slider: $$__sveltets_2_IsomorphicComponent<{
     disabled?: boolean;
     showValue?: boolean;
     format?: (n: number) => string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Slider = InstanceType<typeof Slider>;
+} & HTMLInputAttributes;
+declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
 export default Slider;