m3-svelte 4.6.5 → 5.0.0

package/package/buttons/Button.svelte

@@ -9,9 +9,9 @@
 
   // If you want a toggle button, use `for` with a checkbox input.
   type ActionProps =
-    | ({ click?: () => void; disabled?: boolean } & HTMLButtonAttributes)
+    | ({ for: string } & HTMLLabelAttributes)
     | ({ href: string } & HTMLAnchorAttributes)
-    | ({ for: string } & HTMLLabelAttributes);
+    | HTMLButtonAttributes;
   type Props = {
     variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;
@@ -59,18 +59,8 @@
     {@render children()}
   </a>
 {:else}
-  {@const {
-    variant = "filled",
-    click,
-    disabled,
-    square = false,
-    iconType = "none",
-    children,
-    ...extra
-  } = props}
+  {@const { variant = "filled", square = false, iconType = "none", children, ...extra } = props}
   <button
-    onclick={click}
-    {disabled}
     class="m3-container m3-font-label-large {variant} icon-{iconType}"
     class:square
     {...extra}

package/package/buttons/Button.svelte.d.ts

@@ -1,13 +1,10 @@
 import type { HTMLButtonAttributes, HTMLAnchorAttributes, HTMLLabelAttributes } from "svelte/elements";
 import type { Snippet } from "svelte";
 type ActionProps = ({
-    click?: () => void;
-    disabled?: boolean;
-} & HTMLButtonAttributes) | ({
-    href: string;
-} & HTMLAnchorAttributes) | ({
     for: string;
-} & HTMLLabelAttributes);
+} & HTMLLabelAttributes) | ({
+    href: string;
+} & HTMLAnchorAttributes) | HTMLButtonAttributes;
 type Props = {
     variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;

package/package/buttons/FAB.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { HTMLButtonAttributes } from "svelte/elements";
   import type { IconifyIcon } from "@iconify/types";
   import Icon from "../misc/_icon.svelte";
   import Layer from "../misc/Layer.svelte";
+  import type { ButtonAttrs } from "../misc/typing-utils";
 
   type ContentProps =
     | {
@@ -19,7 +19,6 @@
   let {
     color = "primary",
     elevation = "normal",
-    click,
     size = "normal",
     icon,
     text,
@@ -33,13 +32,12 @@
       | "secondary"
       | "tertiary";
     elevation?: "normal" | "lowered" | "none";
-    click: () => void;
   } & ContentProps &
-    HTMLButtonAttributes = $props();
+    ButtonAttrs = $props();
 </script>
 
 <button
-  onclick={click}
+  type="button"
   class="m3-container m3-font-label-large color-{color} size-{size} elevation-{elevation}"
   {...extra}
 >

package/package/buttons/FAB.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { HTMLButtonAttributes } from "svelte/elements";
 import type { IconifyIcon } from "@iconify/types";
+import type { ButtonAttrs } from "../misc/typing-utils";
 type ContentProps = {
     size?: "normal";
     icon?: IconifyIcon;
@@ -12,8 +12,7 @@ type ContentProps = {
 type $$ComponentProps = {
     color?: "primary-container" | "secondary-container" | "tertiary-container" | "primary" | "secondary" | "tertiary";
     elevation?: "normal" | "lowered" | "none";
-    click: () => void;
-} & ContentProps & HTMLButtonAttributes;
+} & ContentProps & ButtonAttrs;
 declare const Fab: import("svelte").Component<$$ComponentProps, {}, "">;
 type Fab = ReturnType<typeof Fab>;
 export default Fab;

package/package/buttons/SplitButton.svelte

@@ -10,14 +10,14 @@
     y = "down",
     children,
     menu,
-    click,
+    onclick,
   }: {
     variant: "elevated" | "filled" | "tonal" | "outlined";
     x?: "inner" | "right";
     y?: "down" | "up";
     children: Snippet;
     menu: Snippet;
-    click: () => void;
+    onclick: () => void;
   } = $props();
 
   const autoclose = (node: HTMLDetailsElement) => {
@@ -36,7 +36,7 @@
 </script>
 
 <div class="m3-container {variant}">
-  <button class="split m3-font-label-large" onclick={click}>
+  <button type="button" class="split m3-font-label-large" {onclick}>
     <Layer />
     {@render children()}
   </button>

package/package/buttons/SplitButton.svelte.d.ts

@@ -5,7 +5,7 @@ type $$ComponentProps = {
     y?: "down" | "up";
     children: Snippet;
     menu: Snippet;
-    click: () => void;
+    onclick: () => void;
 };
 declare const SplitButton: import("svelte").Component<$$ComponentProps, {}, "">;
 type SplitButton = ReturnType<typeof SplitButton>;

package/package/containers/Card.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+  import type { HTMLAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
+  import type { ButtonAttrs, NotButton } from "../misc/typing-utils";
 
-  type ActionProps =
-    | ({ click: () => void } & HTMLButtonAttributes)
-    | HTMLAttributes<HTMLDivElement>;
+  type ActionProps = ButtonAttrs | NotButton<HTMLAttributes<HTMLDivElement>>;
 
   let props: {
     variant: "elevated" | "filled" | "outlined";
@@ -13,9 +12,9 @@
   } & ActionProps = $props();
 </script>
 
-{#if "click" in props}
-  {@const { variant, click, children, ...extra } = props}
-  <button class="m3-container {variant}" onclick={click} {...extra}>
+{#if "onclick" in props}
+  {@const { variant, children, ...extra } = props}
+  <button type="button" class="m3-container {variant}" {...extra}>
     <Layer />
     {@render children()}
   </button>
@@ -39,7 +38,7 @@
     border: none;
     border-radius: var(--m3-card-shape);
     background-color: rgb(var(--m3-scheme-surface));
-    --m3-util-background: var(--m3-scheme-surface);
+    --m3-util-background: rgb(var(--m3-scheme-surface));
     color: rgb(var(--m3-scheme-on-surface));
   }
 
@@ -61,12 +60,12 @@
 
   .elevated {
     background-color: rgb(var(--m3-scheme-surface-container-low));
-    --m3-util-background: var(--m3-scheme-surface-container-low);
+    --m3-util-background: rgb(var(--m3-scheme-surface-container-low));
     box-shadow: var(--m3-util-elevation-1);
   }
   .filled {
     background-color: rgb(var(--m3-scheme-surface-container-highest));
-    --m3-util-background: var(--m3-scheme-surface-container-highest);
+    --m3-util-background: rgb(var(--m3-scheme-surface-container-highest));
   }
   .outlined {
     border: solid 1px rgb(var(--m3-scheme-outline-variant));

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

@@ -1,8 +1,7 @@
 import type { Snippet } from "svelte";
-import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
-type ActionProps = ({
-    click: () => void;
-} & HTMLButtonAttributes) | HTMLAttributes<HTMLDivElement>;
+import type { HTMLAttributes } from "svelte/elements";
+import type { ButtonAttrs, NotButton } from "../misc/typing-utils";
+type ActionProps = ButtonAttrs | NotButton<HTMLAttributes<HTMLDivElement>>;
 type $$ComponentProps = {
     variant: "elevated" | "filled" | "outlined";
     children: Snippet;

package/package/containers/Dialog.svelte

@@ -80,7 +80,7 @@
     display: flex;
     flex-direction: column;
     background-color: rgb(var(--m3-scheme-surface-container-high));
-    --m3-util-background: var(--m3-scheme-surface-container-high);
+    --m3-util-background: rgb(var(--m3-scheme-surface-container-high));
     border: none;
     border-radius: var(--m3-dialog-shape);
     min-width: 17.5rem;

package/package/containers/ListItem.svelte

@@ -1,18 +1,14 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import type {
-    HTMLAnchorAttributes,
-    HTMLAttributes,
-    HTMLButtonAttributes,
-    HTMLLabelAttributes,
-  } from "svelte/elements";
+  import type { HTMLAnchorAttributes, HTMLAttributes, HTMLLabelAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
+  import type { ButtonAttrs, NotButton } from "../misc/typing-utils";
 
   type ActionProps =
-    | HTMLAttributes<HTMLDivElement>
-    | ({ click: () => void } & HTMLButtonAttributes)
-    | ({ label: true } & HTMLLabelAttributes)
-    | ({ href: string } & HTMLAnchorAttributes);
+    | NotButton<HTMLAttributes<HTMLDivElement>>
+    | ButtonAttrs
+    | ({ label: true } & NotButton<HTMLLabelAttributes>)
+    | ({ href: string } & NotButton<HTMLAnchorAttributes>);
 
   let props: {
     leading?: Snippet;
@@ -70,17 +66,9 @@
     <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}>
+{:else if "onclick" in props}
+  {@const { leading, overline = "", headline = "", supporting = "", trailing, ...extra } = props}
+  <button type="button" class="m3-container lines-{_lines}" {...extra}>
     <Layer />
     {@render content(leading, overline, headline, supporting, trailing)}
   </button>

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

@@ -1,12 +1,11 @@
 import type { Snippet } from "svelte";
-import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, HTMLLabelAttributes } from "svelte/elements";
-type ActionProps = HTMLAttributes<HTMLDivElement> | ({
-    click: () => void;
-} & HTMLButtonAttributes) | ({
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLLabelAttributes } from "svelte/elements";
+import type { ButtonAttrs, NotButton } from "../misc/typing-utils";
+type ActionProps = NotButton<HTMLAttributes<HTMLDivElement>> | ButtonAttrs | ({
     label: true;
-} & HTMLLabelAttributes) | ({
+} & NotButton<HTMLLabelAttributes>) | ({
     href: string;
-} & HTMLAnchorAttributes);
+} & NotButton<HTMLAnchorAttributes>);
 type $$ComponentProps = {
     leading?: Snippet;
     overline?: string;

package/package/containers/MenuItem.svelte

@@ -7,17 +7,17 @@
   let {
     icon,
     disabled = false,
-    click,
+    onclick,
     children,
   }: {
     icon?: IconifyIcon | "space" | undefined;
     disabled?: boolean;
-    click: () => void;
+    onclick: () => void;
     children: Snippet;
   } = $props();
 </script>
 
-<button class="item m3-font-label-large" {disabled} onclick={click}>
+<button type="button" class="item m3-font-label-large" {disabled} {onclick}>
   <Layer />
   {#if icon == "space"}
     <span class="icon"></span>

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

@@ -3,7 +3,7 @@ import type { IconifyIcon } from "@iconify/types";
 type $$ComponentProps = {
     icon?: IconifyIcon | "space" | undefined;
     disabled?: boolean;
-    click: () => void;
+    onclick: () => void;
     children: Snippet;
 };
 declare const MenuItem: import("svelte").Component<$$ComponentProps, {}, "">;

package/package/containers/Snackbar.svelte

@@ -23,8 +23,14 @@
 
   type SnackbarConfig = Omit<ComponentProps<typeof SnackbarItem>, "children">;
 
-  let { config = {}, ...extra }: { config?: SnackbarConfig } & HTMLAttributes<HTMLDivElement> =
-    $props();
+  let {
+    config = {},
+    closeButtonTitle = "Close",
+    ...extra
+  }: {
+    config?: SnackbarConfig;
+    closeButtonTitle?: string;
+  } & HTMLAttributes<HTMLDivElement> = $props();
   export const show = ({ message, actions = {}, closable = false, timeout = 4000 }: SnackbarIn) => {
     snackbar = { message, actions, closable, timeout };
     clearTimeout(timeoutId);
@@ -48,6 +54,7 @@
         <p class="m3-font-body-medium">{snackbar.message}</p>
         {#each Object.entries(snackbar.actions) as [key, action]}
           <button
+            type="button"
             class="action m3-font-label-large"
             onclick={() => {
               snackbar = undefined;
@@ -59,7 +66,9 @@
         {/each}
         {#if snackbar.closable}
           <button
+            type="button"
             class="close"
+            title={closeButtonTitle}
             onclick={() => {
               snackbar = undefined;
             }}

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

@@ -10,6 +10,7 @@ import SnackbarItem from "./SnackbarItem.svelte";
 type SnackbarConfig = Omit<ComponentProps<typeof SnackbarItem>, "children">;
 type $$ComponentProps = {
     config?: SnackbarConfig;
+    closeButtonTitle?: string;
 } & HTMLAttributes<HTMLDivElement>;
 declare const Snackbar: import("svelte").Component<$$ComponentProps, {
     show: ({ message, actions, closable, timeout }: SnackbarIn) => void;

package/package/containers/StandardSideSheet.svelte

@@ -18,7 +18,7 @@
 <div class="m3-container">
   <div class="header">
     <span class="m3-font-title-large">{headline}</span>
-    <Button variant="text" iconType="full" click={close}>
+    <Button variant="text" iconType="full" onclick={close}>
       <Icon icon={iconX} />
     </Button>
   </div>

package/package/forms/Chip.svelte

@@ -1,9 +1,9 @@
 <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";
+  import type { ButtonAttrs } from "../misc/typing-utils";
 
   let {
     variant,
@@ -13,7 +13,6 @@
     disabled = false,
     selected = false,
     children,
-    click,
     ...extra
   }: {
     /**
@@ -32,16 +31,15 @@
     disabled?: boolean;
     selected?: boolean;
     children: Snippet;
-    click: () => void;
-  } & HTMLButtonAttributes = $props();
+  } & ButtonAttrs = $props();
 </script>
 
 <button
+  type="button"
   class="m3-container {variant}"
   class:elevated
   class:selected
   {disabled}
-  onclick={click}
   {...extra}
 >
   <Layer />

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

@@ -1,6 +1,6 @@
 import type { Snippet } from "svelte";
-import type { HTMLButtonAttributes } from "svelte/elements";
 import type { IconifyIcon } from "@iconify/types";
+import type { ButtonAttrs } from "../misc/typing-utils";
 type $$ComponentProps = {
     /**
      * general is filter/suggestion since they're the same.
@@ -18,8 +18,7 @@ type $$ComponentProps = {
     disabled?: boolean;
     selected?: boolean;
     children: Snippet;
-    click: () => void;
-} & HTMLButtonAttributes;
+} & ButtonAttrs;
 declare const Chip: import("svelte").Component<$$ComponentProps, {}, "">;
 type Chip = ReturnType<typeof Chip>;
 export default Chip;

package/package/{utils → forms}/DateField.svelte

@@ -6,22 +6,24 @@
   import Icon from "../misc/_icon.svelte";
   import Layer from "../misc/Layer.svelte";
 
-  import DatePickerDocked from "../forms/DatePickerDocked.svelte";
+  import DatePickerDocked from "./DatePickerDocked.svelte";
   import { easeEmphasized } from "../misc/easing";
 
   let {
-    label: _label,
-    date = $bindable(), // TODO: next major release, rename to value
+    label,
+    value = $bindable(),
     required = false,
     disabled = false,
     error = false,
+    datePickerTitle = "Pick date",
     ...extra
   }: {
     label: string;
-    date?: string;
+    value?: string;
     required?: boolean;
     disabled?: boolean;
     error?: boolean;
+    datePickerTitle?: string;
   } & HTMLInputAttributes = $props();
 
   const id = $props.id();
@@ -54,8 +56,6 @@ transform: scaleY(${(t * 0.3 + 0.7) * 100}%);
 opacity: ${Math.min(t * 3, 1)};`,
     };
   };
-
-  let label = $derived(_label || extra.name); // TODO: next breaking version, drop name backsupport
 </script>
 
 <div class="m3-container" class:has-js={hasJs} class:disabled class:error use:clickOutside>
@@ -65,21 +65,23 @@ opacity: ${Math.min(t * 3, 1)};`,
     {disabled}
     {required}
     {id}
-    bind:value={date}
+    bind:value
     {...extra}
+    defaultValue={extra.defaultValue}
   />
+  <!-- TODO: once https://github.com/sveltejs/svelte/pull/16481 is finished, remove the defaultvalue thing -->
   <label class="m3-font-body-small" for={id}>{label}</label>
-  <button type="button" {disabled} onclick={() => (picker = !picker)}>
+  <button type="button" {disabled} title={datePickerTitle} onclick={() => (picker = !picker)}>
     <Layer />
     <Icon icon={iconCalendar} width="1.5rem" height="1.5rem" />
   </button>
   {#if picker}
     <div class="picker" transition:enterExit>
       <DatePickerDocked
-        {date}
+        date={value}
         clearable={!required}
         close={() => (picker = false)}
-        setDate={(d) => (date = d)}
+        setDate={(d) => (value = d)}
       />
     </div>
   {/if}
@@ -127,7 +129,8 @@ opacity: ${Math.min(t * 3, 1)};`,
   button {
     display: none;
     position: absolute;
-    width: 3.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
     height: 100%;
     right: 0;
 

package/package/{utils → forms}/DateField.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { HTMLInputAttributes } from "svelte/elements";
 type $$ComponentProps = {
     label: string;
-    date?: string;
+    value?: string;
     required?: boolean;
     disabled?: boolean;
     error?: boolean;
+    datePickerTitle?: string;
 } & HTMLInputAttributes;
-declare const DateField: import("svelte").Component<$$ComponentProps, {}, "date">;
+declare const DateField: import("svelte").Component<$$ComponentProps, {}, "value">;
 type DateField = ReturnType<typeof DateField>;
 export default DateField;

package/package/{utils → forms}/DateFieldOutlined.svelte

@@ -6,22 +6,24 @@
   import Icon from "../misc/_icon.svelte";
   import Layer from "../misc/Layer.svelte";
 
-  import DatePickerDocked from "../forms/DatePickerDocked.svelte";
+  import DatePickerDocked from "./DatePickerDocked.svelte";
   import { easeEmphasized } from "../misc/easing";
 
   let {
-    label: _label,
-    date = $bindable(), // TODO: next major release, rename to value
+    label,
+    value = $bindable(),
     required = false,
     disabled = false,
     error = false,
+    datePickerTitle = "Pick date",
     ...extra
   }: {
     label: string;
-    date?: string;
+    value?: string;
     required?: boolean;
     disabled?: boolean;
     error?: boolean;
+    datePickerTitle?: string;
   } & HTMLInputAttributes = $props();
 
   const id = $props.id();
@@ -54,8 +56,6 @@ transform: scaleY(${(t * 0.3 + 0.7) * 100}%);
 opacity: ${Math.min(t * 3, 1)};`,
     };
   };
-
-  let label = $derived(_label || extra.name); // TODO: next breaking version, drop name backsupport
 </script>
 
 <div class="m3-container" class:has-js={hasJs} class:disabled class:error use:clickOutside>
@@ -65,22 +65,24 @@ opacity: ${Math.min(t * 3, 1)};`,
     {disabled}
     {required}
     {id}
-    bind:value={date}
+    bind:value
     {...extra}
+    defaultValue={extra.defaultValue}
   />
+  <!-- TODO: once https://github.com/sveltejs/svelte/pull/16481 is finished, remove the defaultvalue thing -->
   <div class="layer"></div>
   <label class="m3-font-body-small" for={id}>{label}</label>
-  <button type="button" {disabled} onclick={() => (picker = !picker)}>
+  <button type="button" {disabled} title={datePickerTitle} onclick={() => (picker = !picker)}>
     <Layer />
     <Icon icon={iconCalendar} width="1.5rem" height="1.5rem" />
   </button>
   {#if picker}
     <div class="picker" transition:enterExit>
       <DatePickerDocked
-        {date}
+        date={value}
         clearable={!required}
         close={() => (picker = false)}
-        setDate={(d) => (date = d)}
+        setDate={(d) => (value = d)}
       />
     </div>
   {/if}
@@ -89,7 +91,7 @@ opacity: ${Math.min(t * 3, 1)};`,
 <style>
   /*
   want to customize the label's background?
-  do this: <DateFieldOutlined --m3-util-background="var(--m3-scheme-surface-container)" />
+  do this: <DateFieldOutlined --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
   */
   :root {
     --m3-datefield-outlined-shape: var(--m3-util-rounding-extra-small);
@@ -117,9 +119,7 @@ opacity: ${Math.min(t * 3, 1)};`,
     left: 0.75rem;
     top: calc(var(--m3-font-body-small-height, 1rem) * -0.5);
     color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
-    background-color: rgb(
-      var(--m3-util-background, var(--m3-scheme-surface))
-    ); /* TODO: next breaking change, make --m3-util-background a full color and update the comment above */
+    background-color: var(--m3-util-background, rgb(var(--m3-scheme-surface)));
     padding: 0 0.25rem;
     &:is(input:hover ~ label) {
       color: rgb(var(--error, var(--m3-scheme-on-surface)));
@@ -155,7 +155,8 @@ opacity: ${Math.min(t * 3, 1)};`,
   button {
     display: none;
     position: absolute;
-    width: 3.5rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
     height: 100%;
     right: 0;
 

package/package/{utils → forms}/DateFieldOutlined.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { HTMLInputAttributes } from "svelte/elements";
 type $$ComponentProps = {
     label: string;
-    date?: string;
+    value?: string;
     required?: boolean;
     disabled?: boolean;
     error?: boolean;
+    datePickerTitle?: string;
 } & HTMLInputAttributes;
-declare const DateFieldOutlined: import("svelte").Component<$$ComponentProps, {}, "date">;
+declare const DateFieldOutlined: import("svelte").Component<$$ComponentProps, {}, "value">;
 type DateFieldOutlined = ReturnType<typeof DateFieldOutlined>;
 export default DateFieldOutlined;

package/package/forms/TextField.svelte

@@ -1,23 +1,14 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
-  import Icon from "../misc/_icon.svelte";
   import type { HTMLInputAttributes } from "svelte/elements";
-
-  type TrailingProps =
-    | {
-        trailingIcon: IconifyIcon;
-        trailingClick: () => void;
-      }
-    | {
-        trailingIcon?: undefined;
-        trailingClick?: undefined;
-      };
+  import Icon from "../misc/_icon.svelte";
+  import Layer from "../misc/Layer.svelte";
+  import type { ButtonAttrs } from "../misc/typing-utils";
 
   let {
-    label: _label,
+    label,
     leadingIcon,
-    trailingIcon,
-    trailingClick,
+    trailing,
     disabled = false,
     required = false,
     error = false,
@@ -27,22 +18,20 @@
   }: {
     label: string;
     leadingIcon?: IconifyIcon;
+    trailing?: { icon: IconifyIcon } & ButtonAttrs;
     disabled?: boolean;
     required?: boolean;
     error?: boolean;
     value?: string;
     enter?: () => void;
-  } & TrailingProps &
-    HTMLInputAttributes = $props();
+  } & HTMLInputAttributes = $props();
   const id = $props.id();
-
-  let label = $derived(_label || extra.name); // TODO: next breaking version, drop name backsupport
 </script>
 
 <div
   class="m3-container"
   class:leading-icon={leadingIcon}
-  class:trailing-icon={trailingIcon}
+  class:trailing-icon={trailing}
   class:error
 >
   <input
@@ -62,9 +51,11 @@
   {#if leadingIcon}
     <Icon icon={leadingIcon} class="leading" />
   {/if}
-  {#if trailingIcon}
-    <button onclick={trailingClick} class="trailing">
-      <Icon icon={trailingIcon} />
+  {#if trailing}
+    {@const { icon, ...extra } = trailing}
+    <button type="button" class="trailing" {...extra}>
+      <Layer />
+      <Icon {icon} />
     </button>
   {/if}
 </div>
@@ -88,7 +79,7 @@
     height: 100%;
     border: none;
     outline: none;
-    padding: 1.375rem 1rem 0.625rem 1rem;
+    padding: 1.5rem 1rem 0.5rem 1rem;
     border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
     background-color: rgb(var(--m3-scheme-surface-container-highest));
     color: rgb(var(--m3-scheme-on-surface));
@@ -108,10 +99,10 @@
       color: rgb(var(--m3-scheme-on-surface) / 0.38);
     }
     &:is(input:focus ~ label, input:not(:placeholder-shown) ~ label) {
-      top: 0.625rem;
+      top: 0.5rem;
       font-size: var(--m3-font-body-small-size, 0.75rem);
-      line-height: var(--m3-font-body-small-height, 1);
-      letter-spacing: var(--m3-font-body-small-tracking, 0.4);
+      line-height: var(--m3-font-body-small-height, 1.333);
+      letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
     }
     pointer-events: none;
     transition:
@@ -175,15 +166,6 @@
     height: 0.125rem;
     background-color: rgb(var(--error, var(--m3-scheme-primary)));
   }
-  @media (hover: hover) {
-    button:hover {
-      background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.08);
-    }
-  }
-  button:focus-visible,
-  button:active {
-    background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.12);
-  }
 
   .leading-icon > input {
     padding-left: 3.25rem;

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

@@ -1,21 +1,18 @@
 import type { IconifyIcon } from "@iconify/types";
 import type { HTMLInputAttributes } from "svelte/elements";
-type TrailingProps = {
-    trailingIcon: IconifyIcon;
-    trailingClick: () => void;
-} | {
-    trailingIcon?: undefined;
-    trailingClick?: undefined;
-};
+import type { ButtonAttrs } from "../misc/typing-utils";
 type $$ComponentProps = {
     label: string;
     leadingIcon?: IconifyIcon;
+    trailing?: {
+        icon: IconifyIcon;
+    } & ButtonAttrs;
     disabled?: boolean;
     required?: boolean;
     error?: boolean;
     value?: string;
     enter?: () => void;
-} & TrailingProps & HTMLInputAttributes;
+} & HTMLInputAttributes;
 declare const TextField: import("svelte").Component<$$ComponentProps, {}, "value">;
 type TextField = ReturnType<typeof TextField>;
 export default TextField;

package/package/forms/TextFieldMultiline.svelte

@@ -4,7 +4,7 @@
   import type { HTMLTextareaAttributes } from "svelte/elements";
 
   let {
-    label: _label,
+    label,
     leadingIcon,
     disabled = false,
     required = false,
@@ -34,8 +34,6 @@
       },
     };
   };
-
-  let label = $derived(_label || extra.name); // TODO: next breaking version, drop name backsupport
 </script>
 
 <div class="m3-container" class:leading-icon={leadingIcon} class:error use:resize>
@@ -75,7 +73,7 @@
     height: 100%;
     border: none;
     outline: none;
-    padding: 1.375rem 1rem 0.625rem 1rem;
+    padding: 1.5rem 1rem 0.5rem 1rem;
     border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
     background-color: rgb(var(--m3-scheme-surface-container-highest));
     color: rgb(var(--m3-scheme-on-surface));
@@ -98,8 +96,8 @@
     &:is(textarea:focus ~ label, textarea:not(:placeholder-shown) ~ label) {
       top: 0.5rem;
       font-size: var(--m3-font-body-small-size, 0.75rem);
-      line-height: var(--m3-font-body-small-height, 1);
-      letter-spacing: var(--m3-font-body-small-tracking, 0.4);
+      line-height: var(--m3-font-body-small-height, 1.333);
+      letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
     }
     pointer-events: none;
     transition:

package/package/forms/TextFieldOutlined.svelte

@@ -1,23 +1,14 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
-  import Icon from "../misc/_icon.svelte";
   import type { HTMLInputAttributes } from "svelte/elements";
-
-  type TrailingProps =
-    | {
-        trailingIcon: IconifyIcon;
-        trailingClick: () => void;
-      }
-    | {
-        trailingIcon?: undefined;
-        trailingClick?: undefined;
-      };
+  import Icon from "../misc/_icon.svelte";
+  import Layer from "../misc/Layer.svelte";
+  import type { ButtonAttrs } from "../misc/typing-utils";
 
   let {
-    label: _label,
+    label,
     leadingIcon,
-    trailingIcon,
-    trailingClick,
+    trailing,
     disabled = false,
     required = false,
     error = false,
@@ -27,22 +18,20 @@
   }: {
     label: string;
     leadingIcon?: IconifyIcon;
+    trailing?: { icon: IconifyIcon } & ButtonAttrs;
     disabled?: boolean;
     required?: boolean;
     error?: boolean;
     value?: string;
     enter?: () => void;
-  } & TrailingProps &
-    HTMLInputAttributes = $props();
+  } & HTMLInputAttributes = $props();
   const id = $props.id();
-
-  let label = $derived(_label || extra.name); // TODO: next breaking version, drop name backsupport
 </script>
 
 <div
   class="m3-container"
   class:leading-icon={leadingIcon}
-  class:trailing-icon={trailingIcon}
+  class:trailing-icon={trailing}
   class:error
 >
   <input
@@ -62,9 +51,11 @@
   {#if leadingIcon}
     <Icon icon={leadingIcon} class="leading" />
   {/if}
-  {#if trailingIcon}
-    <button onclick={trailingClick} class="trailing">
-      <Icon icon={trailingIcon} />
+  {#if trailing}
+    {@const { icon, ...extra } = trailing}
+    <button type="button" class="trailing" {...extra}>
+      <Layer />
+      <Icon {icon} />
     </button>
   {/if}
 </div>
@@ -72,7 +63,7 @@
 <style>
   /*
   want to customize the label's background?
-  do this: <TextFieldOutlined --m3-util-background="var(--m3-scheme-surface-container)" />
+  do this: <TextFieldOutlined --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
   */
   :root {
     --m3-textfield-outlined-shape: var(--m3-util-rounding-extra-small);
@@ -101,9 +92,7 @@
     left: 0.75rem;
     top: 1rem;
     color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
-    background-color: rgb(
-      var(--m3-util-background, var(--m3-scheme-surface))
-    ); /* TODO: next breaking change, make --m3-util-background a full color and update the comment above */
+    background-color: var(--m3-util-background, rgb(var(--m3-scheme-surface)));
     padding: 0 0.25rem;
     &:is(input:hover ~ label) {
       color: rgb(var(--error, var(--m3-scheme-on-surface)));
@@ -117,8 +106,8 @@
     &:is(input:focus ~ label, input:not(:placeholder-shown) ~ label) {
       top: calc(var(--m3-font-body-small-height, 1rem) * -0.5);
       font-size: var(--m3-font-body-small-size, 0.75rem);
-      line-height: var(--m3-font-body-small-height, 1);
-      letter-spacing: var(--m3-font-body-small-tracking, 0.4);
+      line-height: var(--m3-font-body-small-height, 1.333);
+      letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
     }
     pointer-events: none;
     transition:
@@ -172,16 +161,6 @@
     cursor: pointer;
   }
 
-  @media (hover: hover) {
-    button:hover {
-      background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.08);
-    }
-  }
-  button:focus-visible,
-  button:active {
-    background-color: rgb(var(--m3-scheme-on-surface-variant) / 0.12);
-  }
-
   .leading-icon > input {
     padding-left: 3.25rem;
   }

package/package/forms/TextFieldOutlined.svelte.d.ts

@@ -1,21 +1,18 @@
 import type { IconifyIcon } from "@iconify/types";
 import type { HTMLInputAttributes } from "svelte/elements";
-type TrailingProps = {
-    trailingIcon: IconifyIcon;
-    trailingClick: () => void;
-} | {
-    trailingIcon?: undefined;
-    trailingClick?: undefined;
-};
+import type { ButtonAttrs } from "../misc/typing-utils";
 type $$ComponentProps = {
     label: string;
     leadingIcon?: IconifyIcon;
+    trailing?: {
+        icon: IconifyIcon;
+    } & ButtonAttrs;
     disabled?: boolean;
     required?: boolean;
     error?: boolean;
     value?: string;
     enter?: () => void;
-} & TrailingProps & HTMLInputAttributes;
+} & HTMLInputAttributes;
 declare const TextFieldOutlined: import("svelte").Component<$$ComponentProps, {}, "value">;
 type TextFieldOutlined = ReturnType<typeof TextFieldOutlined>;
 export default TextFieldOutlined;

package/package/forms/TextFieldOutlinedMultiline.svelte

@@ -4,7 +4,7 @@
   import type { HTMLTextareaAttributes } from "svelte/elements";
 
   let {
-    label: _label,
+    label,
     leadingIcon,
     disabled = false,
     required = false,
@@ -34,8 +34,6 @@
       },
     };
   };
-
-  let label = $derived(_label || extra.name); // TODO: next breaking version, drop name backsupport
 </script>
 
 <div class="m3-container" class:leading-icon={leadingIcon} class:error use:resize>
@@ -60,7 +58,7 @@
 <style>
   /*
   want to customize the label's background?
-  do this: <TextFieldOutlinedMultiline --m3-util-background="var(--m3-scheme-surface-container)" />
+  do this: <TextFieldOutlinedMultiline --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
   */
   :root {
     --m3-textfield-outlined-shape: var(--m3-util-rounding-extra-small);
@@ -90,9 +88,7 @@
     left: 0.75rem;
     top: 1rem;
     color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
-    background-color: rgb(
-      var(--m3-util-background, var(--m3-scheme-surface))
-    ); /* TODO: next breaking change, make --m3-util-background a full color and update the comment above */
+    background-color: var(--m3-util-background, rgb(var(--m3-scheme-surface)));
     padding: 0 0.25rem;
     &:is(textarea:hover ~ label) {
       color: rgb(var(--error, var(--m3-scheme-on-surface)));
@@ -106,8 +102,8 @@
     &:is(textarea:focus ~ label, textarea:not(:placeholder-shown) ~ label) {
       top: calc(var(--m3-font-body-small-height, 1rem) * -0.5);
       font-size: var(--m3-font-body-small-size, 0.75rem);
-      line-height: var(--m3-font-body-small-height, 1);
-      letter-spacing: var(--m3-font-body-small-tracking, 0.4);
+      line-height: var(--m3-font-body-small-height, 1.333);
+      letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
     }
     pointer-events: none;
     transition:

package/package/forms/_picker/Actions.svelte

@@ -19,11 +19,11 @@
 <div class="m3-container">
   {#if clearable}
     <span class="left">
-      <Button variant="text" click={clear} type="button">Clear</Button>
+      <Button variant="text" onclick={clear} type="button">Clear</Button>
     </span>
   {/if}
-  <Button variant="text" click={cancel} type="button">Cancel</Button>
-  <Button variant="text" disabled={!clearable && !chosenDate} click={ok} type="button">OK</Button>
+  <Button variant="text" onclick={cancel} type="button">Cancel</Button>
+  <Button variant="text" disabled={!clearable && !chosenDate} onclick={ok} type="button">OK</Button>
 </div>
 
 <style>

package/package/forms/_picker/CalendarPicker.svelte

@@ -45,7 +45,7 @@
         day.day == today.getDate()}
       selected={!day.disabled && day.iso == chosenDate}
       label={day.day.toString()}
-      click={() => (chosenDate = day.iso)}
+      onclick={() => (chosenDate = day.iso)}
     />
   {/each}
 </div>

package/package/forms/_picker/FocusPicker.svelte

@@ -16,7 +16,12 @@
 
 <div class="m3-container">
   {#each options as { name, selected, activate }}
-    <button class="m3-font-body-large" onclick={activate} use:conditionalScroll={selected}>
+    <button
+      type="button"
+      class="m3-font-body-large"
+      onclick={activate}
+      use:conditionalScroll={selected}
+    >
       <Layer />
       {#if selected}
         <Icon icon={iconCheck} />

package/package/forms/_picker/Item.svelte

@@ -6,13 +6,13 @@
     today,
     selected,
     label,
-    click,
+    onclick,
   }: {
     disabled: boolean;
     today: boolean;
     selected: boolean;
     label: string;
-    click: () => void;
+    onclick: () => void;
   } = $props();
 </script>
 
@@ -22,7 +22,7 @@
   type="button"
   class:today
   class:selected
-  onclick={click}
+  {onclick}
 >
   <Layer />
   {label}

package/package/forms/_picker/Item.svelte.d.ts

@@ -3,7 +3,7 @@ type $$ComponentProps = {
     today: boolean;
     selected: boolean;
     label: string;
-    click: () => void;
+    onclick: () => void;
 };
 declare const Item: import("svelte").Component<$$ComponentProps, {}, "">;
 type Item = ReturnType<typeof Item>;

package/package/index.d.ts

@@ -27,6 +27,8 @@ export { default as CircularProgress } from "./forms/CircularProgress.svelte";
 export { default as CircularProgressEstimate } from "./forms/CircularProgressEstimate.svelte";
 export { default as CircularProgressIndeterminate } from "./forms/CircularProgressIndeterminate.svelte";
 export { default as LoadingIndicator } from "./forms/LoadingIndicator.svelte";
+export { default as DateField } from "./forms/DateField.svelte";
+export { default as DateFieldOutlined } from "./forms/DateFieldOutlined.svelte";
 export { default as RadioAnim1 } from "./forms/RadioAnim1.svelte";
 export { default as RadioAnim2 } from "./forms/RadioAnim2.svelte";
 export { default as RadioAnim3 } from "./forms/RadioAnim3.svelte";
@@ -48,5 +50,3 @@ export { default as VariableTabs } from "./nav/VariableTabs.svelte";
 export { default as VariableTabsLink } from "./nav/VariableTabsLink.svelte";
 export { default as ChipChooser } from "./utils/ChipChooser.svelte";
 export { default as Divider } from "./utils/Divider.svelte";
-export { default as DateField } from "./utils/DateField.svelte";
-export { default as DateFieldOutlined } from "./utils/DateFieldOutlined.svelte";

package/package/index.js

@@ -26,6 +26,8 @@ export { default as CircularProgress } from "./forms/CircularProgress.svelte";
 export { default as CircularProgressEstimate } from "./forms/CircularProgressEstimate.svelte";
 export { default as CircularProgressIndeterminate } from "./forms/CircularProgressIndeterminate.svelte";
 export { default as LoadingIndicator } from "./forms/LoadingIndicator.svelte";
+export { default as DateField } from "./forms/DateField.svelte";
+export { default as DateFieldOutlined } from "./forms/DateFieldOutlined.svelte";
 export { default as RadioAnim1 } from "./forms/RadioAnim1.svelte";
 export { default as RadioAnim2 } from "./forms/RadioAnim2.svelte";
 export { default as RadioAnim3 } from "./forms/RadioAnim3.svelte";
@@ -47,5 +49,3 @@ export { default as VariableTabs } from "./nav/VariableTabs.svelte";
 export { default as VariableTabsLink } from "./nav/VariableTabsLink.svelte";
 export { default as ChipChooser } from "./utils/ChipChooser.svelte";
 export { default as Divider } from "./utils/Divider.svelte";
-export { default as DateField } from "./utils/DateField.svelte";
-export { default as DateFieldOutlined } from "./utils/DateFieldOutlined.svelte";

package/package/misc/_ripple.svelte

@@ -160,10 +160,10 @@
     transition: opacity var(--m3-util-easing-fast);
 
     &:not(
-        :global(input:disabled + label) > .tint,
-        :global(input:disabled + .layer-container) > .tint,
-        :global(:disabled) > .tint
-      ) {
+      :global(input:disabled + label) > .tint,
+      :global(input:disabled + .layer-container) > .tint,
+      :global(:disabled) > .tint
+    ) {
       @media (hover: hover) {
         &:is(:global(:hover) > .tint) {
           opacity: 0.08;

package/package/misc/_ripplesimple.svelte

@@ -14,10 +14,10 @@
     transition: opacity var(--m3-util-easing-fast);
 
     &:not(
-        :global(input:disabled + label) > .tint,
-        :global(input:disabled + .layer-container) > .tint,
-        :global(:disabled) > .tint
-      ) {
+      :global(input:disabled + label) > .tint,
+      :global(input:disabled + .layer-container) > .tint,
+      :global(:disabled) > .tint
+    ) {
       @media (hover: hover) {
         &:is(:global(:hover) > .tint) {
           opacity: 0.08;

package/package/misc/typing-utils.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLButtonAttributes } from "svelte/elements";
+export type NotButton<T> = Omit<T, "onclick">;
+export type ButtonAttrs = HTMLButtonAttributes & Required<Pick<HTMLButtonAttributes, "onclick">>;

package/package/misc/typing-utils.js

@@ -0,0 +1 @@
+export {};

package/package/nav/NavCMLXItem.svelte

@@ -18,6 +18,7 @@
 {#if "click" in props}
   {@const { variant, icon, text, selected, click, ...extra } = props}
   <button
+    type="button"
     onclick={click}
     class="m3-container m3-font-label-medium {variant}"
     disabled={selected}

package/package/utils/ChipChooser.svelte

@@ -17,7 +17,7 @@
       {...option}
       variant="input"
       selected={chosenOptions.includes(option.value)}
-      click={() =>
+      onclick={() =>
         chosenOptions.includes(option.value)
           ? (chosenOptions = chosenOptions.filter((o) => o != option.value))
           : (chosenOptions = [...chosenOptions, option.value])}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "4.6.5",
+  "version": "5.0.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {