m3-svelte 4.6.7 → 5.1.0

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>
@@ -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>

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)));
@@ -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)));

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,13 +27,14 @@ 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";
 export { default as Checkbox } from "./forms/Checkbox.svelte";
 export { default as Switch } from "./forms/Switch.svelte";
 export { default as Slider } from "./forms/Slider.svelte";
-export { default as SliderTicks } from "./forms/SliderTicks.svelte";
 export { default as TextField } from "./forms/TextField.svelte";
 export { default as TextFieldMultiline } from "./forms/TextFieldMultiline.svelte";
 export { default as TextFieldOutlined } from "./forms/TextFieldOutlined.svelte";
@@ -48,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/index.js

@@ -26,13 +26,14 @@ 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";
 export { default as Checkbox } from "./forms/Checkbox.svelte";
 export { default as Switch } from "./forms/Switch.svelte";
 export { default as Slider } from "./forms/Slider.svelte";
-export { default as SliderTicks } from "./forms/SliderTicks.svelte";
 export { default as TextField } from "./forms/TextField.svelte";
 export { default as TextFieldMultiline } from "./forms/TextFieldMultiline.svelte";
 export { default as TextFieldOutlined } from "./forms/TextFieldOutlined.svelte";
@@ -47,5 +48,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.7",
+  "version": "5.1.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -32,7 +32,7 @@
     "@iconify/types": "^2.0.0",
     "@ktibow/iconset-material-symbols": "^0.0.1752989765",
     "@ktibow/material-color-utilities-nightly": "^0.3.11753062248503",
-    "svelte": "^5.36.13"
+    "svelte": "^5.37.3"
   },
   "devDependencies": {
     "@eslint/compat": "^1.3.1",