m3-svelte 3.6.1 → 4.0.0-beta.0

package/package/containers/Snackbar.svelte

@@ -1,14 +1,14 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export type SnackbarIn = {
     message: string;
     actions?: Record<string, () => void>;
     closable?: boolean;
-    timeout?: number | null;
     /*
     timeout: undefined/unset -> 4s timeout
     timeout: null -> no timeout
     timeout: 2000 -> 2s timeout
     */
+    timeout?: number | null;
   };
 </script>
 
@@ -16,18 +16,14 @@
   import { onDestroy, type ComponentProps } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
   import { fade } from "svelte/transition";
-  import Icon from "../misc/_icon.svelte";
   import iconX from "@ktibow/iconset-material-symbols/close";
+  import Icon from "../misc/_icon.svelte";
   import SnackbarItem from "./SnackbarItem.svelte";
-  type SnackbarData = {
-    message: string;
-    actions: Record<string, () => void>;
-    closable: boolean;
-    timeout: number | null;
-  };
 
-  export let extraWrapperOptions: HTMLAttributes<HTMLDivElement> = {};
-  export let extraOptions: ComponentProps<SnackbarItem> = {};
+  type SnackbarConfig = Omit<ComponentProps<typeof SnackbarItem>, "children">;
+
+  let { config = {}, ...extra }: { config?: SnackbarConfig } & HTMLAttributes<HTMLDivElement> =
+    $props();
   export const show = ({ message, actions = {}, closable = false, timeout = 4000 }: SnackbarIn) => {
     snackbar = { message, actions, closable, timeout };
     clearTimeout(timeoutId);
@@ -37,7 +33,7 @@
       }, timeout);
   };
 
-  let snackbar: SnackbarData | undefined;
+  let snackbar: Required<SnackbarIn> | undefined = $state();
   let timeoutId: number;
   onDestroy(() => {
     clearTimeout(timeoutId);
@@ -45,31 +41,33 @@
 </script>
 
 {#if snackbar}
-  <div class="holder" out:fade={{ duration: 200 }} {...extraWrapperOptions}>
-    <SnackbarItem {...extraOptions}>
-      <p class="m3-font-body-medium">{snackbar.message}</p>
-      {#each Object.entries(snackbar.actions) as [key, action]}
-        <button
-          class="action m3-font-label-large"
-          on:click={() => {
-            snackbar = undefined;
-            action();
-          }}
-        >
-          {key}
-        </button>
-      {/each}
-      {#if snackbar.closable}
-        <button
-          class="close"
-          on:click={() => {
-            snackbar = undefined;
-          }}
-        >
-          <Icon icon={iconX} />
-        </button>
-      {/if}
-    </SnackbarItem>
+  <div class="holder" out:fade={{ duration: 200 }} {...extra}>
+    {#key snackbar}
+      <SnackbarItem {...config}>
+        <p class="m3-font-body-medium">{snackbar.message}</p>
+        {#each Object.entries(snackbar.actions) as [key, action]}
+          <button
+            class="action m3-font-label-large"
+            onclick={() => {
+              snackbar = undefined;
+              action();
+            }}
+          >
+            {key}
+          </button>
+        {/each}
+        {#if snackbar.closable}
+          <button
+            class="close"
+            onclick={() => {
+              snackbar = undefined;
+            }}
+          >
+            <Icon icon={iconX} />
+          </button>
+        {/if}
+      </SnackbarItem>
+    {/key}
   </div>
 {/if}
 

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

@@ -7,27 +7,12 @@ export type SnackbarIn = {
 import { type ComponentProps } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 import SnackbarItem from "./SnackbarItem.svelte";
-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 Snackbar: $$__sveltets_2_IsomorphicComponent<{
-    extraWrapperOptions?: HTMLAttributes<HTMLDivElement>;
-    extraOptions?: ComponentProps<SnackbarItem>;
-    show?: ({ message, actions, closable, timeout }: SnackbarIn) => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+type SnackbarConfig = Omit<ComponentProps<typeof SnackbarItem>, "children">;
+type $$ComponentProps = {
+    config?: SnackbarConfig;
+} & HTMLAttributes<HTMLDivElement>;
+declare const Snackbar: import("svelte").Component<$$ComponentProps, {
     show: ({ message, actions, closable, timeout }: SnackbarIn) => void;
-}, string>;
-type Snackbar = InstanceType<typeof Snackbar>;
+}, "">;
+type Snackbar = ReturnType<typeof Snackbar>;
 export default Snackbar;

package/package/containers/SnackbarItem.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
   import type { HTMLAttributes } from "svelte/elements";
 
-  export let display = "flex";
-  export let extraOptions: HTMLAttributes<HTMLDivElement> = {};
+  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>
 
 <style>
@@ -25,8 +25,8 @@
     background-color: rgb(var(--m3-scheme-inverse-surface));
     color: rgb(var(--m3-scheme-inverse-on-surface));
     animation:
-      snackbarIn 500ms var(--m3-easing-decel),
-      opacity 100ms var(--m3-easing-decel);
+      snackbarIn var(--m3-util-curve-decel) 500ms,
+      opacity var(--m3-util-curve-decel) 100ms;
   }
   /*@TODO: Fix animation with different shaping or something*/
   @keyframes snackbarIn {

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

package/package/containers/StandardSideSheet.svelte

@@ -1,27 +1,33 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
+  import type { Snippet } from "svelte";
   import iconX from "@ktibow/iconset-material-symbols/close";
   import Button from "../buttons/Button.svelte";
   import Icon from "../misc/_icon.svelte";
 
-  export let headline: string;
-  export let display = "flex";
-
-  const dispatch = createEventDispatcher();
+  let {
+    headline,
+    children,
+    close,
+  }: {
+    headline: string;
+    children: Snippet;
+    close: () => void;
+  } = $props();
 </script>
 
-<div class="m3-container" style="display: {display};">
+<div class="m3-container">
   <div class="header">
     <span class="m3-font-title-large">{headline}</span>
-    <Button type="text" iconType="full" on:click={() => dispatch("close")}>
+    <Button variant="text" iconType="full" click={close}>
       <Icon icon={iconX} />
     </Button>
   </div>
-  <slot />
+  {@render children()}
 </div>
 
 <style>
   .m3-container {
+    display: flex;
     flex-direction: column;
   }
   .header {

package/package/containers/StandardSideSheet.svelte.d.ts

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

package/package/forms/Checkbox.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="checkbox-box"></div>
@@ -25,6 +30,7 @@
 
 <style>
   .m3-container {
+    display: inline-flex;
     position: relative;
     width: 1.125rem;
     height: 1.125rem;
@@ -60,6 +66,11 @@
     opacity: 0;
     pointer-events: none;
     transition: opacity 200ms;
+    path {
+      stroke-dasharray: 20.874 20.874;
+      stroke-dashoffset: 20.874;
+      transition: stroke-dashoffset 0ms 200ms;
+    }
   }
 
   :global(input:focus-visible) + .layer-container {
@@ -75,6 +86,10 @@
 
   :global(input:checked) ~ svg {
     opacity: 1;
+    path {
+      stroke-dashoffset: 0;
+      transition: stroke-dashoffset 200ms;
+    }
   }
 
   :global(input:disabled) + .layer-container {

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

package/package/forms/Chip.svelte

@@ -1,42 +1,54 @@
 <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";
 
-  export let display = "inline-flex";
-  export let extraOptions: HTMLButtonAttributes = {};
-  /**
-   * general is filter/suggestion since they're the same.
-   * | name       | use              | example                       | phrasing           |
-   * |------------|------------------|-------------------------------|--------------------|
-   * | input      | information item | like a person in the to field | user-entered thing |
-   * | assist     | smart actions    | like add to calendar          | start with a verb  |
-   * | filter     | selection        | like in a search page         | category           |
-   * | suggestion | smart actions    | like a chat response          | query/message      |
-   */
-  export let type: "input" | "assist" | "general";
-  export let icon: IconifyIcon | null = null;
-  export let trailingIcon: IconifyIcon | null = null;
-  export let elevated = false;
-  export let disabled = false;
-  export let selected = false;
+  let {
+    variant,
+    icon,
+    trailingIcon,
+    elevated = false,
+    disabled = false,
+    selected = false,
+    children,
+    click,
+    ...extra
+  }: {
+    /**
+     * general is filter/suggestion since they're the same.
+     * | name       | use              | example                       | phrasing           |
+     * |------------|------------------|-------------------------------|--------------------|
+     * | input      | information item | like a person in the to field | user-entered thing |
+     * | assist     | smart actions    | like add to calendar          | start with a verb  |
+     * | filter     | selection        | like in a search page         | category           |
+     * | suggestion | smart actions    | like a chat response          | query/message      |
+     */
+    variant: "input" | "assist" | "general";
+    icon?: IconifyIcon | undefined;
+    trailingIcon?: IconifyIcon | undefined;
+    elevated?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    children: Snippet;
+    click: () => void;
+  } & HTMLButtonAttributes = $props();
 </script>
 
 <button
-  class="m3-container type-{type}"
-  style="display: {display}"
+  class="m3-container {variant}"
   class:elevated
   class:selected
   {disabled}
-  on:click
-  {...extraOptions}
+  onclick={click}
+  {...extra}
 >
   <Layer />
   {#if icon}
     <Icon {icon} class="leading" />
   {/if}
-  <span class="m3-font-label-large"><slot /></span>
+  <span class="m3-font-label-large">{@render children()}</span>
   {#if trailingIcon}
     <Icon icon={trailingIcon} class="trailing" />
   {/if}
@@ -55,7 +67,7 @@
 
     background-color: rgb(var(--m3-scheme-surface));
     color: rgb(var(--m3-scheme-on-surface-variant));
-    border: solid 0.0625rem rgb(var(--m3-scheme-outline));
+    border: solid 1px rgb(var(--m3-scheme-outline));
     position: relative;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
@@ -63,13 +75,13 @@
   }
 
   .m3-container > :global(:is(.ripple-container, .tint)) {
-    inset: -0.0625rem;
+    inset: -1px;
   }
   .m3-container > :global(svg) {
     width: 1.125rem;
     height: 1.125rem;
   }
-  .m3-container:enabled:not(.type-input):not(.selected) > :global(.leading) {
+  .m3-container:enabled:not(.input):not(.selected) > :global(.leading) {
     color: rgb(var(--m3-scheme-primary));
   }
   .m3-container > :global(.leading) {
@@ -78,17 +90,17 @@
   .m3-container > :global(.trailing) {
     margin-right: -0.5rem;
   }
-  .type-input > :global(.leading) {
+  .input > :global(.leading) {
     margin-left: -0.25rem;
   }
-  .type-input > :global(.trailing) {
+  .input > :global(.trailing) {
     margin-right: -0.25rem;
   }
 
-  .type-assist {
+  .assist {
     color: rgb(var(--m3-scheme-on-surface));
   }
-  .type-input {
+  .input {
     padding: 0 0.75rem;
   }
   .elevated {

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

@@ -1,48 +1,25 @@
+import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
 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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Chip: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    display?: string;
-    extraOptions?: HTMLButtonAttributes;
+type $$ComponentProps = {
     /**
-       * general is filter/suggestion since they're the same.
-       * | name       | use              | example                       | phrasing           |
-       * |------------|------------------|-------------------------------|--------------------|
-       * | input      | information item | like a person in the to field | user-entered thing |
-       * | assist     | smart actions    | like add to calendar          | start with a verb  |
-       * | filter     | selection        | like in a search page         | category           |
-       * | suggestion | smart actions    | like a chat response          | query/message      |
-       */ type: "input" | "assist" | "general";
-    icon?: IconifyIcon | null;
-    trailingIcon?: IconifyIcon | null;
+     * general is filter/suggestion since they're the same.
+     * | name       | use              | example                       | phrasing           |
+     * |------------|------------------|-------------------------------|--------------------|
+     * | input      | information item | like a person in the to field | user-entered thing |
+     * | assist     | smart actions    | like add to calendar          | start with a verb  |
+     * | filter     | selection        | like in a search page         | category           |
+     * | suggestion | smart actions    | like a chat response          | query/message      |
+     */
+    variant: "input" | "assist" | "general";
+    icon?: IconifyIcon | undefined;
+    trailingIcon?: IconifyIcon | undefined;
     elevated?: boolean;
     disabled?: boolean;
     selected?: boolean;
-}, {
-    default: {};
-}>, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Chip = InstanceType<typeof Chip>;
+    children: Snippet;
+    click: () => void;
+} & HTMLButtonAttributes;
+declare const Chip: import("svelte").Component<$$ComponentProps, {}, "">;
+type Chip = ReturnType<typeof Chip>;
 export default Chip;

package/package/forms/CircularProgress.svelte

@@ -1,18 +1,16 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
-  export let display = "inline-flex";
-  export let extraOptions: HTMLAttributes<SVGElement> = {};
-  export let percent: number;
+
+  let { percent, ...extra }: { percent: number } & HTMLAttributes<SVGElement> = $props();
 </script>
 
 <svg
   viewBox="0 0 48 48"
   xmlns="http://www.w3.org/2000/svg"
   class="m3-container"
-  class:indeterminate={percent === null}
-  style="display: {display}; --percent: {percent}px;"
+  style:--percent="{percent}px"
   role="progressbar"
-  {...extraOptions}
+  {...extra}
 >
   <circle
     cx="24"

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

package/package/forms/CircularProgressIndeterminate.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
-  export let display = "inline-flex";
-  export let extraOptions: HTMLAttributes<SVGElement> = {};
+
+  let extra: HTMLAttributes<SVGElement> = $props();
 </script>
 
 <svg
   viewBox="0 0 48 48"
   xmlns="http://www.w3.org/2000/svg"
   class="m3-container"
-  style="display: {display};"
   role="progressbar"
-  {...extraOptions}
+  {...extra}
 >
   <circle
     cx="24"