m3-svelte 4.6.7 → 5.1.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,23 +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}
@@ -129,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,24 +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}
@@ -91,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);
@@ -119,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)));
@@ -157,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;