m3-svelte 3.6.0 → 4.0.0-beta.0

package/package/containers/Card.svelte

@@ -1,14 +1,30 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
   import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+  import Layer from "../misc/Layer.svelte";
 
-  export let display = "flex";
-  export let extraOptions: HTMLAttributes<HTMLDivElement> & HTMLButtonAttributes = {};
-  export let type: "elevated" | "filled" | "outlined";
+  type ActionProps =
+    | ({ click: () => void } & HTMLButtonAttributes)
+    | HTMLAttributes<HTMLDivElement>;
+
+  let props: {
+    variant: "elevated" | "filled" | "outlined";
+    children: Snippet;
+  } & ActionProps = $props();
 </script>
 
-<div class="m3-container type-{type}" style="display: {display};" {...extraOptions}>
-  <slot />
-</div>
+{#if "click" in props}
+  {@const { variant, click, children, ...extra } = props}
+  <button class="m3-container {variant}" onclick={click} {...extra}>
+    <Layer />
+    {@render children()}
+  </button>
+{:else}
+  {@const { variant, children, ...extra } = props}
+  <div class="m3-container {variant}" {...extra}>
+    {@render children()}
+  </div>
+{/if}
 
 <style>
   :root {
@@ -16,27 +32,42 @@
   }
 
   .m3-container {
+    display: flex;
     flex-direction: column;
     position: relative;
     padding: 1rem; /* protip: use margin: -1rem (adjust as needed) to make images stretch to the end */
+    border: none;
     border-radius: var(--m3-card-shape);
     background-color: rgb(var(--m3-scheme-surface));
     color: rgb(var(--m3-scheme-on-surface));
   }
 
-  .type-elevated {
-    background-color: rgb(var(--m3-scheme-surface-container-low));
+  button {
+    text-align: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
   }
-  .type-filled {
-    background-color: rgb(var(--m3-scheme-surface-container-highest));
-  }
-  .type-outlined {
-    border: solid 0.0625rem rgb(var(--m3-scheme-outline-variant));
+  @media (hover: hover) {
+    button:hover {
+      box-shadow: var(--m3-util-elevation-1);
+    }
+    button.type-elevated:hover {
+      box-shadow: var(--m3-util-elevation-2);
+    }
   }
 
-  .type-elevated {
+  .elevated {
+    background-color: rgb(var(--m3-scheme-surface-container-low));
     box-shadow: var(--m3-util-elevation-1);
   }
+  .filled {
+    background-color: rgb(var(--m3-scheme-surface-container-highest));
+  }
+  .outlined {
+    border: solid 1px rgb(var(--m3-scheme-outline-variant));
+  }
 
   @media print, (forced-colors: active) {
     .type-filled {

package/package/containers/Card.svelte.d.ts

@@ -1,32 +1,12 @@
+import type { Snippet } from "svelte";
 import type { HTMLAttributes, 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 Card: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    display?: string;
-    extraOptions?: HTMLAttributes<HTMLDivElement> & HTMLButtonAttributes;
-    type: "elevated" | "filled" | "outlined";
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Card = InstanceType<typeof Card>;
+type ActionProps = ({
+    click: () => void;
+} & HTMLButtonAttributes) | HTMLAttributes<HTMLDivElement>;
+type $$ComponentProps = {
+    variant: "elevated" | "filled" | "outlined";
+    children: Snippet;
+} & ActionProps;
+declare const Card: import("svelte").Component<$$ComponentProps, {}, "">;
+type Card = ReturnType<typeof Card>;
 export default Card;

package/package/containers/Dialog.svelte

@@ -1,45 +1,58 @@
 <script lang="ts">
-  import Icon from "../misc/_icon.svelte";
   import type { IconifyIcon } from "@iconify/types";
-  import { createEventDispatcher } from "svelte";
   import type { HTMLDialogAttributes } from "svelte/elements";
+  import type { Snippet } from "svelte";
+  import Icon from "../misc/_icon.svelte";
 
-  export let display = "flex";
-  export let extraOptions: HTMLDialogAttributes = {};
-  export let icon: IconifyIcon | undefined = undefined;
-  export let headline: string;
-  export let open: boolean;
-  export let closeOnEsc = true;
-  export let closeOnClick = true;
+  let {
+    icon,
+    headline,
+    buttons,
+    children,
+    open = $bindable(),
+    closeOnEsc = true,
+    closeOnClick = true,
+    onEsc,
+    onClick,
+    ...extra
+  }: {
+    icon?: IconifyIcon | undefined;
+    headline: string;
+    buttons: Snippet;
+    children: Snippet;
+    open: boolean;
+    closeOnEsc?: boolean;
+    closeOnClick?: boolean;
+    onEsc?: () => void;
+    onClick?: () => void;
+  } & HTMLDialogAttributes = $props();
 
-  const dispatch = createEventDispatcher();
-  let dialog: HTMLDialogElement;
-  $: {
-    if (!dialog) break $;
+  let dialog: HTMLDialogElement | undefined = $state();
+  $effect(() => {
+    if (!dialog) return;
     if (open) dialog.showModal();
     else dialog.close();
-  }
+  });
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <dialog
-  on:cancel={(e) => {
+  oncancel={(e) => {
     if (closeOnEsc) {
-      dispatch("closedByEsc");
+      onEsc?.();
       open = false;
     } else {
       e.preventDefault();
     }
   }}
-  on:click|self={() => {
+  onclick={(e) => {
+    if (e.target != e.currentTarget) return;
     if (closeOnClick) {
-      dispatch("closedByClick");
+      onClick?.();
       open = false;
     }
   }}
   bind:this={dialog}
-  style="display: {display};"
-  {...extraOptions}
+  {...extra}
 >
   <div class="m3-container">
     {#if icon}
@@ -47,10 +60,10 @@
     {/if}
     <p class="headline m3-font-headline-small" class:center={icon}>{headline}</p>
     <div class="content m3-font-body-medium">
-      <slot />
+      {@render children()}
     </div>
     <div class="buttons">
-      <slot name="buttons" />
+      {@render buttons()}
     </div>
   </div>
 </dialog>
@@ -60,6 +73,7 @@
     --m3-dialog-shape: var(--m3-util-rounding-extra-large);
   }
   dialog {
+    display: flex;
     background-color: rgb(var(--m3-scheme-surface-container-high));
     border: none;
     border-radius: var(--m3-dialog-shape);
@@ -109,32 +123,32 @@
     visibility: hidden;
     pointer-events: none;
     transition:
-      opacity 200ms,
-      visibility 200ms;
+      opacity var(--m3-util-easing-fast),
+      visibility var(--m3-util-easing-fast);
   }
   dialog[open] {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
     animation:
-      dialogIn 500ms var(--m3-easing-decel),
-      opacity 100ms var(--m3-easing-decel);
+      dialogIn var(--m3-util-curve-decel) 500ms,
+      opacity var(--m3-util-curve-decel) 100ms both;
   }
   dialog[open] .headline {
-    animation: opacity 150ms;
+    animation: opacity var(--m3-util-easing-fast);
   }
   dialog[open] .content {
-    animation: opacity 200ms;
+    animation: opacity var(--m3-util-easing-fast) 50ms both;
   }
   dialog[open] .buttons {
     position: relative;
     animation:
-      buttonsIn 500ms var(--m3-easing-decel),
-      opacity 200ms 100ms backwards;
+      buttonsIn var(--m3-util-curve-decel) 500ms,
+      opacity var(--m3-util-easing-fast) 100ms both;
   }
   dialog::backdrop {
     background-color: rgb(var(--m3-scheme-scrim) / 0.3);
-    animation: opacity 400ms;
+    animation: opacity var(--m3-util-curve-decel) 500ms;
   }
   @keyframes dialogIn {
     0% {

package/package/containers/Dialog.svelte.d.ts

@@ -1,42 +1,17 @@
 import type { IconifyIcon } from "@iconify/types";
 import type { HTMLDialogAttributes } 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 Dialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    display?: string;
-    extraOptions?: HTMLDialogAttributes;
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
     icon?: IconifyIcon | undefined;
     headline: string;
+    buttons: Snippet;
+    children: Snippet;
     open: boolean;
     closeOnEsc?: boolean;
     closeOnClick?: boolean;
-}, {
-    default: {};
-    buttons: {};
-}>, {
-    closedByEsc: CustomEvent<any>;
-    closedByClick: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    buttons: {};
-}, {}, string>;
-type Dialog = InstanceType<typeof Dialog>;
+    onEsc?: () => void;
+    onClick?: () => void;
+} & HTMLDialogAttributes;
+declare const Dialog: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;

package/package/containers/ListItem.svelte

@@ -1,19 +1,37 @@
 <script lang="ts">
-  import type { HTMLAttributes } from "svelte/elements";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes, HTMLButtonAttributes, HTMLLabelAttributes } from "svelte/elements";
+  import Layer from "../misc/Layer.svelte";
 
-  export let display = "flex";
-  export let extraOptions: HTMLAttributes<HTMLDivElement> = {};
-  export let overline = "";
-  export let headline = "";
-  export let supporting = "";
-  export let lines: number | undefined = undefined;
-  $: _lines = lines || (overline && supporting ? 3 : overline || supporting ? 2 : 1);
+  type ActionProps =
+    | HTMLAttributes<HTMLDivElement>
+    | ({ click: () => void } & HTMLButtonAttributes)
+    | ({ label: true } & HTMLLabelAttributes);
+
+  let props: {
+    leading?: Snippet;
+    overline?: string;
+    headline?: string;
+    supporting?: string;
+    trailing?: Snippet;
+    lines?: number;
+  } & ActionProps = $props();
+  let _lines = $derived(
+    props.lines ||
+      (props.overline && props.supporting ? 3 : props.overline || props.supporting ? 2 : 1),
+  );
 </script>
 
-<div class="m3-container lines-{_lines}" style="display: {display}" {...extraOptions}>
-  {#if $$slots.leading}
+{#snippet content(
+  leading: Snippet | undefined,
+  overline: string,
+  headline: string,
+  supporting: string,
+  trailing: Snippet | undefined,
+)}
+  {#if leading}
     <div class="leading">
-      <slot name="leading" />
+      {@render leading()}
     </div>
   {/if}
   <div class="body">
@@ -25,18 +43,64 @@
       <p class="supporting m3-font-body-medium">{supporting}</p>
     {/if}
   </div>
-  {#if $$slots.trailing}
+  {#if trailing}
     <div class="trailing m3-font-label-small">
-      <slot name="trailing" />
+      {@render trailing()}
     </div>
   {/if}
-</div>
+{/snippet}
+
+{#if "label" in props}
+  {@const {
+    leading,
+    overline = "",
+    headline = "",
+    supporting = "",
+    trailing,
+    label: _,
+    ...extra
+  } = props}
+  <label class="m3-container lines-{_lines}" {...extra}>
+    <Layer />
+    {@render content(leading, overline, headline, supporting, trailing)}
+  </label>
+{:else if "click" in props}
+  {@const {
+    leading,
+    overline = "",
+    headline = "",
+    supporting = "",
+    trailing,
+    click,
+    ...extra
+  } = props}
+  <button class="m3-container lines-{_lines}" onclick={click} {...extra}>
+    <Layer />
+    {@render content(leading, overline, headline, supporting, trailing)}
+  </button>
+{:else}
+  {@const { leading, overline = "", headline = "", supporting = "", trailing, ...extra } = props}
+  <div class="m3-container lines-{_lines}" {...extra}>
+    {@render content(leading, overline, headline, supporting, trailing)}
+  </div>
+{/if}
 
 <style>
   .m3-container {
+    display: flex;
     padding: 0.5rem 1.5rem 0.5rem 1rem;
     align-items: center;
     gap: 1rem;
+
+    text-align: inherit;
+    border: none;
+    position: relative;
+    background: transparent;
+    -webkit-tap-highlight-color: transparent;
+  }
+  button.m3-container,
+  label.m3-container {
+    cursor: pointer;
   }
   .lines-1 {
     height: 3.5rem;

package/package/containers/ListItem.svelte.d.ts

@@ -1,29 +1,18 @@
-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 ListItem: $$__sveltets_2_IsomorphicComponent<{
-    display?: string;
-    extraOptions?: HTMLAttributes<HTMLDivElement>;
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLLabelAttributes } from "svelte/elements";
+type ActionProps = HTMLAttributes<HTMLDivElement> | ({
+    click: () => void;
+} & HTMLButtonAttributes) | ({
+    label: true;
+} & HTMLLabelAttributes);
+type $$ComponentProps = {
+    leading?: Snippet;
     overline?: string;
     headline?: string;
     supporting?: string;
-    lines?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    leading: {};
-    trailing: {};
-}, {}, string>;
-type ListItem = InstanceType<typeof ListItem>;
+    trailing?: Snippet;
+    lines?: number;
+} & ActionProps;
+declare const ListItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type ListItem = ReturnType<typeof ListItem>;
 export default ListItem;

package/package/containers/Menu.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-  export let display = "flex";
+  import type { Snippet } from "svelte";
+
+  let { children }: { children: Snippet } = $props();
 </script>
 
-<div class="m3-container" style="display: {display};">
-  <slot />
+<div class="m3-container">
+  {@render children()}
 </div>
 
 <style>
@@ -11,6 +13,7 @@
     --m3-menu-shape: var(--m3-util-rounding-extra-small);
   }
   .m3-container {
+    display: flex;
     position: relative;
     overflow: hidden;
     flex-direction: column;

package/package/containers/Menu.svelte.d.ts

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

package/package/containers/MenuItem.svelte

@@ -1,13 +1,23 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { IconifyIcon } from "@iconify/types";
   import Icon from "../misc/_icon.svelte";
   import Layer from "../misc/Layer.svelte";
-  import type { IconifyIcon } from "@iconify/types";
 
-  export let icon: IconifyIcon | "space" | undefined = undefined;
-  export let disabled = false;
+  let {
+    icon,
+    disabled = false,
+    click,
+    children,
+  }: {
+    icon?: IconifyIcon | "space" | undefined;
+    disabled?: boolean;
+    click: () => void;
+    children: Snippet;
+  } = $props();
 </script>
 
-<button class="item m3-font-label-large" {disabled} on:click>
+<button class="item m3-font-label-large" {disabled} onclick={click}>
   <Layer />
   {#if icon == "space"}
     <span class="icon"></span>
@@ -16,7 +26,7 @@
       <Icon {icon} />
     </span>
   {/if}
-  <slot />
+  {@render children()}
 </button>
 
 <style>

package/package/containers/MenuItem.svelte.d.ts

@@ -1,33 +1,11 @@
+import type { Snippet } from "svelte";
 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 MenuItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+type $$ComponentProps = {
     icon?: IconifyIcon | "space" | undefined;
     disabled?: boolean;
-}, {
-    default: {};
-}>, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type MenuItem = InstanceType<typeof MenuItem>;
+    click: () => void;
+    children: Snippet;
+};
+declare const MenuItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
 export default MenuItem;