m3-svelte 3.6.1 → 4.0.0-beta.0

package/package/nav/TabsLink.svelte

@@ -1,32 +1,35 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
-  import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
+  import type { HTMLAnchorAttributes } 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: HTMLAnchorAttributes = {};
-  export let secondary = false;
-  export let tab: string;
-  export let items: {
-    icon?: IconifyIcon;
-    name: string;
-    value: string;
-    href: string;
-  }[];
+
+  let {
+    secondary = false,
+    tab,
+    items,
+    ...extra
+  }: {
+    secondary?: boolean;
+    tab: string;
+    items: {
+      icon?: IconifyIcon;
+      name: string;
+      value: string;
+      href: string;
+    }[];
+  } & HTMLAnchorAttributes = $props();
 </script>
 
 <div
   class="m3-container"
   class:primary={!secondary}
-  style="display: {display}; --items: {items.length}; --i: {items.findIndex(
-    (i) => i.value == tab,
-  )};"
-  {...extraWrapperOptions}
+  style:--items={items.length}
+  style:--i={items.findIndex((i) => i.value == tab)}
 >
   <div class="divider"></div>
   {#each items as item}
-    <a href={item.href} class:tall={item.icon} class:selected={item.value == tab} {...extraOptions}>
+    <a href={item.href} class:tall={item.icon} class:selected={item.value == tab} {...extra}>
       <Layer />
       {#if item.icon}
         <Icon icon={item.icon} />
@@ -39,13 +42,14 @@
 
 <style>
   .m3-container {
+    display: flex;
     position: relative;
     background-color: rgb(var(--m3-scheme-surface));
   }
   .divider {
     position: absolute;
     inset: auto 0 0 0;
-    height: 0.0625rem;
+    height: 1px;
     background-color: rgb(var(--m3-scheme-surface-container-highest));
   }
   a {

package/package/nav/TabsLink.svelte.d.ts

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

package/package/nav/VariableTabs.svelte

@@ -1,27 +1,33 @@
 <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 = "grid";
-  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();
+  let wrapper: HTMLDivElement | undefined = $state();
   const handleInput = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
     const before = tab;
     const after = e.currentTarget.value;
-    const beforeE = wrapper.querySelector(`input[value="${before}"] + label`) as HTMLInputElement;
-    const afterE = wrapper.querySelector(`input[value="${after}"] + label`) as HTMLInputElement;
+    const beforeE = wrapper!.querySelector(`input[value="${before}"] + label`) as HTMLInputElement;
+    const afterE = wrapper!.querySelector(`input[value="${after}"] + label`) as HTMLInputElement;
 
-    const bar = wrapper.querySelector(".bar") as HTMLDivElement;
+    const bar = wrapper!.querySelector(".bar") as HTMLDivElement;
     const beforeX = beforeE.offsetLeft + 0.5 * beforeE.offsetWidth;
     const afterX = afterE.offsetLeft + 0.5 * afterE.offsetWidth;
     const deltaX = afterX - beforeX;
@@ -59,15 +65,13 @@
       );
     }
   };
-  let wrapper: HTMLDivElement;
 </script>
 
 <div
   class="m3-container"
   class:primary={!secondary}
-  style="display: {display}; --items: {items.length};"
+  style:--items={items.length}
   bind:this={wrapper}
-  {...extraWrapperOptions}
 >
   <div class="divider"></div>
   {#each items as item}
@@ -78,8 +82,8 @@
       {id}
       value={item.value}
       bind:group={tab}
-      on:input={handleInput}
-      {...extraOptions}
+      oninput={handleInput}
+      {...extra}
     />
     <label for={id} class:tall={item.icon}>
       <Layer />
@@ -94,6 +98,7 @@
 
 <style>
   .m3-container {
+    display: grid;
     position: relative;
     background-color: rgb(var(--m3-scheme-surface));
     grid-template-columns: repeat(var(--items), auto);
@@ -109,7 +114,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/VariableTabs.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 VariableTabs: $$__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 VariableTabs: $$__sveltets_2_IsomorphicComponent<{
         name: string;
         value: string;
     }[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type VariableTabs = InstanceType<typeof VariableTabs>;
+} & HTMLInputAttributes;
+declare const VariableTabs: import("svelte").Component<$$ComponentProps, {}, "tab">;
+type VariableTabs = ReturnType<typeof VariableTabs>;
 export default VariableTabs;

package/package/nav/VariableTabsLink.svelte

@@ -1,22 +1,30 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
-  import type { HTMLAttributes, HTMLAnchorAttributes } from "svelte/elements";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
   import Icon from "../misc/_icon.svelte";
   import Layer from "../misc/Layer.svelte";
-  export let display = "grid";
-  export let extraWrapperOptions: HTMLAttributes<HTMLDivElement> = {};
-  export let extraOptions: HTMLAnchorAttributes = {};
-  export let secondary = false;
-  export let tab: string;
-  export let items: {
-    icon?: IconifyIcon;
-    name: string;
-    value: string;
-    href: string;
-  }[];
 
-  let prevTab = tab;
-  $: if (wrapper) {
+  let {
+    secondary = false,
+    tab,
+    items,
+    ...extra
+  }: {
+    secondary?: boolean;
+    tab: string;
+    items: {
+      icon?: IconifyIcon;
+      name: string;
+      value: string;
+      href: string;
+    }[];
+  } & HTMLAnchorAttributes = $props();
+
+  let prevTab = $state(tab);
+  let wrapper: HTMLDivElement | undefined = $state();
+  $effect(() => {
+    if (!wrapper) return;
+
     const before = prevTab;
     const after = tab;
     const beforeI = items.findIndex((i) => i.value == before) + 1;
@@ -63,16 +71,14 @@
     }
 
     prevTab = tab;
-  }
-  let wrapper: HTMLDivElement;
+  });
 </script>
 
 <div
   class="m3-container"
   class:primary={!secondary}
-  style="display: {display}; --items: {items.length};"
+  style:--items={items.length}
   bind:this={wrapper}
-  {...extraWrapperOptions}
 >
   <div class="divider"></div>
   {#each items as item, i}
@@ -80,8 +86,8 @@
       href={item.href}
       class:tall={item.icon}
       class:selected={item.value == tab}
-      style="grid-column: {i + 1}"
-      {...extraOptions}
+      style:grid-column={i + 1}
+      {...extra}
     >
       <Layer />
       {#if item.icon}
@@ -95,9 +101,10 @@
 
 <style>
   .m3-container {
+    display: grid;
+    grid-template-columns: repeat(var(--items), auto);
     position: relative;
     background-color: rgb(var(--m3-scheme-surface));
-    grid-template-columns: repeat(var(--items), auto);
     padding-inline: 1rem;
     justify-content: start;
     overflow-x: auto;
@@ -105,7 +112,7 @@
   .divider {
     position: absolute;
     inset: auto 0 0 0;
-    height: 0.0625rem;
+    height: 1px;
     background-color: rgb(var(--m3-scheme-surface-container-highest));
   }
   a {

package/package/nav/VariableTabsLink.svelte.d.ts

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

package/package/utils/ChipChooser.svelte

@@ -1,17 +1,23 @@
 <script lang="ts">
   import Chip from "../forms/Chip.svelte";
   import type { IconifyIcon } from "@iconify/types";
-  export let options: { label: string; value: string; icon?: IconifyIcon }[];
-  export let chosenOptions: string[] = [];
+
+  let {
+    options,
+    chosenOptions,
+  }: {
+    options: { label: string; value: string; icon?: IconifyIcon }[];
+    chosenOptions: string[];
+  } = $props();
 </script>
 
 <div class="m3-container">
   {#each options as option}
     <Chip
       {...option}
-      type="input"
+      variant="input"
       selected={chosenOptions.includes(option.value)}
-      on:click={() =>
+      click={() =>
         chosenOptions.includes(option.value)
           ? (chosenOptions = chosenOptions.filter((o) => o != option.value))
           : (chosenOptions = [...chosenOptions, option.value])}

package/package/utils/ChipChooser.svelte.d.ts

@@ -1,26 +1,12 @@
 import type { IconifyIcon } from "@iconify/types";
-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 ChipChooser: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     options: {
         label: string;
         value: string;
         icon?: IconifyIcon;
     }[];
-    chosenOptions?: string[];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ChipChooser = InstanceType<typeof ChipChooser>;
+    chosenOptions: string[];
+};
+declare const ChipChooser: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChipChooser = ReturnType<typeof ChipChooser>;
 export default ChipChooser;

package/package/utils/DateField.svelte

@@ -8,21 +8,27 @@
   import DatePickerDocked from "../forms/DatePickerDocked.svelte";
   import { easeEmphasized } from "../misc/easing";
 
-  export let name: string;
-  export let date = "";
-  export let required = false;
-  export let disabled = false;
-  export let extraOptions: HTMLInputAttributes = {};
+  let {
+    name,
+    date = $bindable(""),
+    required = false,
+    disabled = false,
+    ...extra
+  }: {
+    name: string;
+    date?: string;
+    required?: boolean;
+    disabled?: boolean;
+  } & HTMLInputAttributes = $props();
 
   const id = crypto.randomUUID();
-  let hasJs = false;
+  let hasJs = $state(false);
   onMount(() => {
     hasJs = true;
   });
 
-  let picker = false;
-  let container: HTMLDivElement;
-  const clickOutside = (_node: Node) => {
+  let picker = $state(false);
+  const clickOutside = (container: Node) => {
     const handleClick = (event: Event) => {
       if (!container.contains(event.target as Node)) {
         picker = false;
@@ -35,7 +41,7 @@
       },
     };
   };
-  const enterExit = (_node: Node): TransitionConfig => {
+  const enterExit = (_: Node): TransitionConfig => {
     return {
       duration: 400,
       easing: easeEmphasized,
@@ -47,7 +53,7 @@ opacity: ${Math.min(t * 3, 1)};`,
   };
 </script>
 
-<div class="m3-container" class:has-js={hasJs} class:disabled bind:this={container}>
+<div class="m3-container" class:has-js={hasJs} class:disabled use:clickOutside>
   <input
     type="date"
     class="m3-font-body-large"
@@ -55,19 +61,19 @@ opacity: ${Math.min(t * 3, 1)};`,
     {required}
     {id}
     bind:value={date}
-    {...extraOptions}
+    {...extra}
   />
   <label class="m3-font-body-small" for={id}>{name}</label>
-  <button type="button" {disabled} on:click={() => (picker = !picker)}>
+  <button type="button" {disabled} onclick={() => (picker = !picker)}>
     <Icon icon={iconCalendar} />
   </button>
   {#if picker}
-    <div class="picker" use:clickOutside transition:enterExit>
+    <div class="picker" transition:enterExit>
       <DatePickerDocked
+        {date}
         clearable={!required}
-        bind:date
-        on:close={() => (picker = false)}
-        on:setDate={(e) => (date = e.detail)}
+        close={() => (picker = false)}
+        setDate={(d) => (date = d)}
       />
     </div>
   {/if}
@@ -83,7 +89,7 @@ opacity: ${Math.min(t * 3, 1)};`,
     min-width: 15rem;
     background-color: rgb(var(--m3-scheme-surface-container-highest));
     border-radius: var(--m3-datefield-shape) var(--m3-datefield-shape) 0 0;
-    border-bottom: solid 0.0625rem rgb(var(--m3-scheme-on-surface-variant));
+    border-bottom: solid 1px rgb(var(--m3-scheme-on-surface-variant));
   }
   input {
     position: absolute;

package/package/utils/DateField.svelte.d.ts

@@ -1,25 +1,10 @@
 import type { 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 DateField: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     name: string;
     date?: string;
     required?: boolean;
     disabled?: boolean;
-    extraOptions?: HTMLInputAttributes;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DateField = InstanceType<typeof DateField>;
+} & HTMLInputAttributes;
+declare const DateField: import("svelte").Component<$$ComponentProps, {}, "date">;
+type DateField = ReturnType<typeof DateField>;
 export default DateField;

package/package/utils/Divider.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  export let inset = false;
+  let {
+    inset = false,
+  }: {
+    inset?: boolean;
+  } = $props();
 </script>
 
 <hr class:inset />

package/package/utils/Divider.svelte.d.ts

@@ -1,20 +1,6 @@
-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 Divider: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     inset?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Divider = InstanceType<typeof Divider>;
+};
+declare const Divider: import("svelte").Component<$$ComponentProps, {}, "">;
+type Divider = ReturnType<typeof Divider>;
 export default Divider;