m3-svelte 3.6.1 → 4.0.0-beta.0

package/package/forms/SliderTicks.svelte

@@ -1,57 +1,64 @@
 <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;
-  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,
+    disabled = false,
+    showValue = true,
+    format = (n: number) => {
+      return n.toFixed(0);
+    },
+    ...extra
+  }: {
+    value: number;
+    min?: number;
+    max?: number;
+    step: number;
+    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, ticks: number[];
-  $: {
-    range = max - min;
-    percent = ($valueDisplayed - min) / range;
-  }
-  $: {
-    ticks = [];
+  const range = $derived(max - min);
+  const percent = $derived((valueDisplayed.current - min) / range);
+  const ticks = $derived.by(() => {
+    const ticksList = [];
     for (let i = 0; i <= range; i += step) {
-      ticks.push((i / range) * 100);
+      ticksList.push((i / range) * 100);
     }
-  }
+    return ticksList;
+  });
 </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>
-  {#each ticks as tick, i}
+  {#each ticks as tick}
     <div
       class="tick"
-      class:hidden={Math.abs(tick / 100 - $valueDisplayed / range) < 0.01}
-      class:inactive={tick / 100 > $valueDisplayed / range}
+      class:hidden={Math.abs(tick / 100 - valueDisplayed.current / range) < 0.01}
+      class:inactive={tick / 100 > valueDisplayed.current / range}
       style:--x={tick / 100 - 0.5}
     ></div>
   {/each}

package/package/forms/SliderTicks.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 SliderTicks: $$__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 SliderTicks: $$__sveltets_2_IsomorphicComponent<{
     disabled?: boolean;
     showValue?: boolean;
     format?: (n: number) => string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SliderTicks = InstanceType<typeof SliderTicks>;
+} & HTMLInputAttributes;
+declare const SliderTicks: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SliderTicks = ReturnType<typeof SliderTicks>;
 export default SliderTicks;

package/package/forms/Switch.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
   import Icon from "../misc/_icon.svelte";
   import iconCheck from "@ktibow/iconset-material-symbols/check";
-  import type { HTMLAttributes } from "svelte/elements";
+  import type { HTMLInputAttributes } from "svelte/elements";
 
-  export let display = "inline-flex";
-  export let extraWrapperOptions: HTMLAttributes<HTMLDivElement> = {};
-  export let extraOptions: HTMLAttributes<HTMLDivElement> = {};
-  export let checked = false;
-  export let disabled = false;
   // MUST BE WRAPPED IN A <label>
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    ...extra
+  }: {
+    checked?: boolean;
+    disabled?: boolean;
+  } & HTMLInputAttributes = $props();
 
-  let startX: number | undefined;
+  let startX: number | undefined = $state();
   const handleMouseUp = (e: MouseEvent) => {
     if (!startX) return;
     const distance = e.clientX - startX;
@@ -20,18 +23,16 @@
   };
 </script>
 
-<svelte:window on:pointerup={handleMouseUp} />
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<svelte:window onpointerup={handleMouseUp} />
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   class="m3-container"
-  style="display: {display};"
-  {...extraWrapperOptions}
-  on:pointerdown={(e) => {
+  onpointerdown={(e) => {
     if (!disabled) {
       startX = e.clientX;
     }
   }}
-  on:dragstart={(e) => {
+  ondragstart={(e) => {
     e.preventDefault();
   }}
 >
@@ -40,8 +41,8 @@
     role="switch"
     {disabled}
     bind:checked
-    {...extraOptions}
-    on:keydown={(e) => {
+    {...extra}
+    onkeydown={(e) => {
       if (e.code == "Enter") checked = !checked;
       if (e.code == "ArrowLeft") checked = false;
       if (e.code == "ArrowRight") checked = true;
@@ -59,6 +60,7 @@
     --m3-switch-handle-shape: var(--m3-util-rounding-full);
   }
   .m3-container {
+    display: inline-flex;
     position: relative;
     width: 3.25rem;
     height: 2rem;
@@ -85,7 +87,7 @@
     background-color: rgb(var(--m3-scheme-outline));
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    transition: all 300ms var(--m3-easing);
+    transition: all var(--m3-util-easing-fast-spatial);
 
     left: 0.5rem;
     top: 50%;
@@ -100,8 +102,8 @@
     color: rgb(var(--m3-scheme-on-primary-container));
     opacity: 0;
     transition:
-      opacity 300ms var(--m3-easing),
-      scale 300ms var(--m3-easing);
+      opacity var(--m3-util-easing-fast-spatial),
+      scale var(--m3-util-easing-fast-spatial);
   }
   .hover {
     position: absolute;
@@ -111,7 +113,7 @@
 
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    transition: all 300ms var(--m3-easing);
+    transition: all var(--m3-util-easing-fast);
 
     left: 1rem;
     top: 50%;
@@ -122,11 +124,11 @@
   }
 
   .m3-container:hover > input:enabled + .handle,
-  .m3-container > input:enabled:is(:active, :focus-visible) + .handle {
+  .m3-container > input:enabled:is(:global(:active, :focus-visible)) + .handle {
     background-color: rgb(var(--m3-scheme-on-surface-variant));
   }
   .m3-container:hover > input:enabled:checked + .handle,
-  .m3-container > input:enabled:checked:is(:active, :focus-visible) + .handle {
+  .m3-container > input:enabled:checked:is(:global(:active, :focus-visible)) + .handle {
     background-color: rgb(var(--m3-scheme-primary-container));
   }
   .m3-container:hover > input ~ .hover {

package/package/forms/Switch.svelte.d.ts

@@ -1,25 +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;
-}
-declare const Switch: $$__sveltets_2_IsomorphicComponent<{
-    display?: string;
-    extraWrapperOptions?: HTMLAttributes<HTMLDivElement>;
-    extraOptions?: HTMLAttributes<HTMLDivElement>;
+import type { HTMLInputAttributes } from "svelte/elements";
+type $$ComponentProps = {
     checked?: boolean;
     disabled?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Switch = InstanceType<typeof Switch>;
+} & HTMLInputAttributes;
+declare const Switch: import("svelte").Component<$$ComponentProps, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/package/forms/TextField.svelte

@@ -1,21 +1,39 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
   import Icon from "../misc/_icon.svelte";
-  import { createEventDispatcher } from "svelte";
-  import type { HTMLAttributes, HTMLInputAttributes } from "svelte/elements";
+  import type { HTMLInputAttributes } from "svelte/elements";
 
-  export let display = "inline-flex";
-  export let extraWrapperOptions: HTMLAttributes<HTMLDivElement> = {};
-  export let extraOptions: HTMLInputAttributes = {};
-  export let name: string;
-  export let leadingIcon: IconifyIcon | undefined = undefined;
-  export let trailingIcon: IconifyIcon | undefined = undefined;
+  type TrailingProps =
+    | {
+        trailingIcon: IconifyIcon;
+        trailingClick: () => void;
+      }
+    | {
+        trailingIcon?: undefined;
+        trailingClick?: undefined;
+      };
 
-  export let disabled = false;
-  export let required = false;
-  export let error = false;
-  export let value = "";
-  const dispatch = createEventDispatcher();
+  let {
+    name,
+    leadingIcon,
+    trailingIcon,
+    trailingClick,
+    disabled = false,
+    required = false,
+    error = false,
+    value = $bindable(""),
+    enter,
+    ...extra
+  }: {
+    name: string;
+    leadingIcon?: IconifyIcon;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    value?: string;
+    enter?: () => void;
+  } & TrailingProps &
+    HTMLInputAttributes = $props();
   const id = crypto.randomUUID();
 </script>
 
@@ -24,18 +42,16 @@
   class:leading-icon={leadingIcon}
   class:trailing-icon={trailingIcon}
   class:error
-  style="display: {display}"
-  {...extraWrapperOptions}
 >
   <input
     class="focus-none m3-font-body-large"
     placeholder=" "
     bind:value
-    on:keydown={(e) => e.key == "Enter" && dispatch("enter")}
+    onkeydown={(e) => e.key == "Enter" && enter?.()}
     {id}
     {disabled}
     {required}
-    {...extraOptions}
+    {...extra}
   />
   <label class="m3-font-body-large" for={id}>{name}</label>
   <div class="layer"></div>
@@ -43,7 +59,7 @@
     <Icon icon={leadingIcon} class="leading" />
   {/if}
   {#if trailingIcon}
-    <button on:click={() => dispatch("trailingClick")} class="trailing">
+    <button onclick={trailingClick} class="trailing">
       <Icon icon={trailingIcon} />
     </button>
   {/if}
@@ -55,6 +71,7 @@
   }
 
   .m3-container {
+    display: inline-flex;
     position: relative;
     align-items: center;
     height: 3.5rem;
@@ -98,7 +115,7 @@
     width: 100%;
     bottom: 0;
 
-    height: 0.0625rem;
+    height: 1px;
     background-color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
     transition: all 200ms;
   }

package/package/forms/TextField.svelte.d.ts

@@ -1,34 +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 TextField: $$__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;
-}, {
-    enter: CustomEvent<any>;
-    trailingClick: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TextField = InstanceType<typeof TextField>;
+    enter?: () => void;
+} & TrailingProps & HTMLInputAttributes;
+declare const TextField: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TextField = ReturnType<typeof TextField>;
 export default TextField;

package/package/forms/TextFieldMultiline.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>
   <label class="m3-font-body-large" for={id}>{name}</label>
   <div class="layer"></div>
@@ -59,6 +58,7 @@
     --m3-textfield-filled-shape: var(--m3-util-rounding-extra-small);
   }
   .m3-container {
+    display: inline-flex;
     position: relative;
     align-items: center;
     min-height: 5rem;
@@ -103,7 +103,7 @@
     width: 100%;
     bottom: 0;
 
-    height: 0.0625rem;
+    height: 1px;
     background-color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
     transition: all 200ms;
   }

package/package/forms/TextFieldMultiline.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 TextFieldMultiline: $$__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 TextFieldMultiline = InstanceType<typeof TextFieldMultiline>;
+} & HTMLTextareaAttributes;
+declare const TextFieldMultiline: import("svelte").Component<$$ComponentProps, {}, "value">;
+type TextFieldMultiline = ReturnType<typeof TextFieldMultiline>;
 export default TextFieldMultiline;

package/package/forms/TextFieldOutlined.svelte

@@ -1,21 +1,39 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
   import Icon from "../misc/_icon.svelte";
-  import { createEventDispatcher } from "svelte";
-  import type { HTMLAttributes, HTMLInputAttributes } from "svelte/elements";
+  import type { HTMLInputAttributes } from "svelte/elements";
 
-  export let display = "inline-flex";
-  export let extraWrapperOptions: HTMLAttributes<HTMLDivElement> = {};
-  export let extraOptions: HTMLInputAttributes = {};
-  export let name: string;
-  export let leadingIcon: IconifyIcon | undefined = undefined;
-  export let trailingIcon: IconifyIcon | undefined = undefined;
+  type TrailingProps =
+    | {
+        trailingIcon: IconifyIcon;
+        trailingClick: () => void;
+      }
+    | {
+        trailingIcon?: undefined;
+        trailingClick?: undefined;
+      };
 
-  export let disabled = false;
-  export let required = false;
-  export let error = false;
-  export let value = "";
-  const dispatch = createEventDispatcher();
+  let {
+    name,
+    leadingIcon,
+    trailingIcon,
+    trailingClick,
+    disabled = false,
+    required = false,
+    error = false,
+    value = $bindable(""),
+    enter,
+    ...extra
+  }: {
+    name: string;
+    leadingIcon?: IconifyIcon;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    value?: string;
+    enter?: () => void;
+  } & TrailingProps &
+    HTMLInputAttributes = $props();
   const id = crypto.randomUUID();
 </script>
 
@@ -24,17 +42,16 @@
   class:leading-icon={leadingIcon}
   class:trailing-icon={trailingIcon}
   class:error
-  style="display: {display}"
-  {...extraWrapperOptions}
 >
   <input
     class="focus-none m3-font-body-large"
     placeholder=" "
     bind:value
+    onkeydown={(e) => e.key == "Enter" && enter?.()}
     {id}
     {disabled}
     {required}
-    {...extraOptions}
+    {...extra}
   />
   <div class="layer"></div>
   <label class="m3-font-body-large" for={id}>{name}</label>
@@ -42,7 +59,7 @@
     <Icon icon={leadingIcon} class="leading" />
   {/if}
   {#if trailingIcon}
-    <button on:click={() => dispatch("trailingClick")} class="trailing">
+    <button onclick={trailingClick} class="trailing">
       <Icon icon={trailingIcon} />
     </button>
   {/if}
@@ -57,6 +74,7 @@
     --m3-textfield-outlined-shape: var(--m3-util-rounding-extra-small);
   }
   .m3-container {
+    display: inline-flex;
     position: relative;
     align-items: center;
     height: 3.5rem;
@@ -91,7 +109,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;