m3-svelte 5.4.0 → 5.6.0

package/package/buttons/Button.svelte

@@ -1,17 +1,11 @@
 <script lang="ts">
-  import type {
-    HTMLButtonAttributes,
-    HTMLAnchorAttributes,
-    HTMLLabelAttributes,
-  } from "svelte/elements";
+  import type { HTMLButtonAttributes } from "svelte/elements";
   import type { Snippet } from "svelte";
+  import type { LabelAttrs, AnchorAttrs } from "../misc/typing-utils";
   import Layer from "../misc/Layer.svelte";
 
   // If you want a toggle button, use `for` with a checkbox input.
-  type ActionProps =
-    | ({ for: string } & HTMLLabelAttributes)
-    | ({ href: string } & HTMLAnchorAttributes)
-    | HTMLButtonAttributes;
+  type ActionProps = LabelAttrs | AnchorAttrs | HTMLButtonAttributes;
   type Props = {
     variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;
@@ -61,7 +55,7 @@
 {:else}
   {@const { variant = "filled", square = false, iconType = "none", children, ...extra } = props}
   <button
-    type={"onclick" in extra ? "button" : undefined}
+    type={"onclick" in extra ? "button" : "submit"}
     class="m3-container m3-font-label-large {variant} icon-{iconType}"
     class:square
     {...extra}

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

@@ -1,10 +1,7 @@
-import type { HTMLButtonAttributes, HTMLAnchorAttributes, HTMLLabelAttributes } from "svelte/elements";
+import type { HTMLButtonAttributes } from "svelte/elements";
 import type { Snippet } from "svelte";
-type ActionProps = ({
-    for: string;
-} & HTMLLabelAttributes) | ({
-    href: string;
-} & HTMLAnchorAttributes) | HTMLButtonAttributes;
+import type { LabelAttrs, AnchorAttrs } from "../misc/typing-utils";
+type ActionProps = LabelAttrs | AnchorAttrs | HTMLButtonAttributes;
 type Props = {
     variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;

package/package/containers/Dialog.svelte

@@ -10,10 +10,7 @@
     buttons,
     children,
     open = $bindable(),
-    closeOnEsc = true,
-    closeOnClick = true,
-    onEsc,
-    onClick,
+    closedby = "any",
     ...extra
   }: {
     icon?: IconifyIcon | undefined;
@@ -21,9 +18,13 @@
     buttons: Snippet;
     children: Snippet;
     open: boolean;
+    /** @deprecated use closedby instead */
     closeOnEsc?: boolean;
+    /** @deprecated use closedby instead */
     closeOnClick?: boolean;
+    /** @deprecated listen to `open` state changes instead of onEsc */
     onEsc?: () => void;
+    /** @deprecated listen to `open` state changes instead of onClick */
     onClick?: () => void;
   } & HTMLDialogAttributes = $props();
 
@@ -37,39 +38,41 @@
 
 <dialog
   class="m3-container"
+  ontoggle={(e) => {
+    open = e.newState == "open";
+  }}
   oncancel={(e) => {
     if (e.target != e.currentTarget) return;
-
-    if (!closeOnEsc) {
-      e.preventDefault();
-      return;
+    if (extra.closeOnEsc && extra.onEsc) {
+      extra.onEsc();
     }
-
-    onEsc?.();
-    open = false;
   }}
   onclick={(e) => {
     if (e.target != e.currentTarget) return;
-    if (closeOnClick) {
-      onClick?.();
-      open = false;
+    if (extra.closeOnClick && extra.onClick) {
+      extra.onClick();
     }
   }}
   bind:this={dialog}
+  closedby={closedby ||
+    (extra.closeOnClick == false && extra.closeOnEsc == false
+      ? "none"
+      : extra.closeOnClick == false
+        ? "closerequest"
+        : "any")}
+  role="alertdialog"
   {...extra}
 >
-  <div class="d">
-    {#if icon}
-      <Icon {icon} width="1.5rem" height="1.5rem" />
-    {/if}
-    <p class="headline m3-font-headline-small" class:center={icon}>{headline}</p>
-    <div class="content m3-font-body-medium">
-      {@render children()}
-    </div>
-    <div class="buttons">
-      {@render buttons()}
-    </div>
+  {#if icon}
+    <Icon {icon} width="1.5rem" height="1.5rem" />
+  {/if}
+  <p class="headline m3-font-headline-small" class:center={icon}>{headline}</p>
+  <div class="content m3-font-body-medium">
+    {@render children()}
   </div>
+  <form method="dialog" class="buttons">
+    {@render buttons()}
+  </form>
 </dialog>
 
 <style>
@@ -85,20 +88,15 @@
     border-radius: var(--m3-dialog-shape);
     min-width: 17.5rem;
     max-width: 35rem;
-    padding: 0;
-    overflow: auto;
-  }
-  .d {
-    display: flex;
-    flex-direction: column;
     padding: 1.5rem;
-  }
-  .d > :global(svg) {
-    color: rgb(var(--m3-scheme-secondary));
+    overflow: auto;
+    > :global(svg) {
+      color: rgb(var(--m3-scheme-secondary));
 
-    flex-shrink: 0;
-    align-self: center;
-    margin-bottom: 1rem;
+      flex-shrink: 0;
+      align-self: center;
+      margin-bottom: 1rem;
+    }
   }
   .headline {
     color: rgb(var(--m3-scheme-on-surface));

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

@@ -7,9 +7,13 @@ type $$ComponentProps = {
     buttons: Snippet;
     children: Snippet;
     open: boolean;
+    /** @deprecated use closedby instead */
     closeOnEsc?: boolean;
+    /** @deprecated use closedby instead */
     closeOnClick?: boolean;
+    /** @deprecated listen to `open` state changes instead of onEsc */
     onEsc?: () => void;
+    /** @deprecated listen to `open` state changes instead of onClick */
     onClick?: () => void;
 } & HTMLDialogAttributes;
 declare const Dialog: import("svelte").Component<$$ComponentProps, {}, "open">;

package/package/forms/Checkbox.svelte

@@ -38,6 +38,7 @@
   .m3-container :global(input) {
     position: absolute;
     opacity: 0;
+    pointer-events: none;
   }
 
   .layer-container {

package/package/forms/Chip.svelte

@@ -3,14 +3,15 @@
   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";
+  import type { LabelAttrs, AnchorAttrs, ButtonAttrs } from "../misc/typing-utils";
+
+  type ActionProps = LabelAttrs | AnchorAttrs | ButtonAttrs;
 
   let {
     variant,
     icon,
     trailingIcon,
     elevated = false,
-    disabled = false,
     selected = false,
     children,
     ...extra
@@ -28,20 +29,12 @@
     icon?: IconifyIcon | undefined;
     trailingIcon?: IconifyIcon | undefined;
     elevated?: boolean;
-    disabled?: boolean;
     selected?: boolean;
     children: Snippet;
-  } & ButtonAttrs = $props();
+  } & ActionProps = $props();
 </script>
 
-<button
-  type="button"
-  class="m3-container {variant}"
-  class:elevated
-  class:selected
-  {disabled}
-  {...extra}
->
+{#snippet content()}
   <Layer />
   {#if icon}
     <Icon {icon} class="leading" />
@@ -50,7 +43,21 @@
   {#if trailingIcon}
     <Icon icon={trailingIcon} class="trailing" />
   {/if}
-</button>
+{/snippet}
+
+{#if "for" in extra}
+  <label class="m3-container {variant}" class:elevated class:selected {...extra}>
+    {@render content()}
+  </label>
+{:else if "href" in extra}
+  <a class="m3-container {variant}" class:elevated class:selected {...extra}>
+    {@render content()}
+  </a>
+{:else}
+  <button class="m3-container {variant}" class:elevated class:selected {...extra} type="button">
+    {@render content()}
+  </button>
+{/if}
 
 <style>
   :root {

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

@@ -1,6 +1,7 @@
 import type { Snippet } from "svelte";
 import type { IconifyIcon } from "@iconify/types";
-import type { ButtonAttrs } from "../misc/typing-utils";
+import type { LabelAttrs, AnchorAttrs, ButtonAttrs } from "../misc/typing-utils";
+type ActionProps = LabelAttrs | AnchorAttrs | ButtonAttrs;
 type $$ComponentProps = {
     /**
      * general is filter/suggestion since they're the same.
@@ -15,10 +16,9 @@ type $$ComponentProps = {
     icon?: IconifyIcon | undefined;
     trailingIcon?: IconifyIcon | undefined;
     elevated?: boolean;
-    disabled?: boolean;
     selected?: boolean;
     children: Snippet;
-} & ButtonAttrs;
+} & ActionProps;
 declare const Chip: import("svelte").Component<$$ComponentProps, {}, "">;
 type Chip = ReturnType<typeof Chip>;
 export default Chip;

package/package/forms/RadioAnim1.svelte

@@ -32,6 +32,7 @@
   .m3-container :global(input) {
     position: absolute;
     opacity: 0;
+    pointer-events: none;
   }
 
   .layer-container {

package/package/forms/RadioAnim2.svelte

@@ -32,6 +32,7 @@
   .m3-container :global(input) {
     position: absolute;
     opacity: 0;
+    pointer-events: none;
   }
 
   .layer-container {

package/package/forms/RadioAnim3.svelte

@@ -32,6 +32,7 @@
   .m3-container :global(input) {
     position: absolute;
     opacity: 0;
+    pointer-events: none;
   }
 
   .layer-container {

package/package/forms/Select.svelte

@@ -47,6 +47,7 @@
 <style>
   :root {
     --m3-menu-shape: var(--m3-util-rounding-extra-small);
+    --m3-field-filled-shape: var(--m3-util-rounding-extra-small);
   }
 
   .m3-container {
@@ -92,7 +93,7 @@
     );
     padding-inline: 1rem;
 
-    border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
+    border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
     background-color: rgb(var(--m3-scheme-surface-container-highest));
     transition:
       background-color var(--m3-util-easing-fast),

package/package/forms/SelectOutlined.svelte

@@ -52,7 +52,7 @@
   */
   :root {
     --m3-menu-shape: var(--m3-util-rounding-extra-small);
-    --m3-select-outlined-shape: var(--m3-util-rounding-extra-small);
+    --m3-field-outlined-shape: var(--m3-util-rounding-extra-small);
   }
 
   .m3-container {
@@ -79,7 +79,7 @@
     position: absolute;
     inset: 0;
     border: 1px solid var(--outline-color);
-    border-radius: var(--m3-select-outlined-shape);
+    border-radius: var(--m3-field-outlined-shape);
     pointer-events: none;
     transition: all 100ms;
   }
@@ -109,7 +109,7 @@
     height: calc(3.5rem + var(--m3-util-density-term));
     padding-inline: 1rem;
 
-    border-radius: var(--m3-select-outlined-shape);
+    border-radius: var(--m3-field-outlined-shape);
     background-color: transparent;
     color: rgb(var(--m3-scheme-on-surface));
 

package/package/forms/Slider.svelte

@@ -14,7 +14,7 @@
     size = "xs",
     leadingIcon,
     trailingIcon,
-    ticks = false,
+    stops: _stops = false,
     endStops = true,
     format = (n: number) => {
       return n.toFixed(0);
@@ -30,10 +30,12 @@
     size?: "xs" | "s" | "m" | "l" | "xl";
     leadingIcon?: IconifyIcon;
     trailingIcon?: IconifyIcon;
-    ticks?: boolean;
+    stops?: boolean;
     endStops?: boolean;
     format?: (n: number) => string;
   } & Omit<HTMLInputAttributes, "size"> = $props();
+  // @ts-expect-error deprecated backwards compatibility with ticks
+  let stops = $derived(extra.ticks ? true : _stops);
   let containerWidth = $state(600);
 
   const valueDisplayed = new Spring(value, { stiffness: 0.3, damping: 1 });
@@ -45,23 +47,27 @@
   };
 
   const range = $derived(max - min);
-  const percent = $derived((valueDisplayed.current - min) / range);
-  const tickList = $derived.by(() => {
-    if (typeof step != "number") return [];
-
-    const ticksList = [];
-
-    for (let i = 0; i <= range; i += step) ticksList.push(i / range);
+  const handle = $derived((valueDisplayed.current - min) / range);
+  const stopList = $derived.by(() => {
+    const output: number[] = [];
+    const add = (stop: number) => {
+      if (leadingIcon && stop == 0) return;
+      if (trailingIcon && stop == 1) return;
+      output.push(stop);
+    };
+
+    if (stops && typeof step == "number") {
+      for (let i = 0; i <= range; i += step) add(i / range);
+    }
+    if (endStops && !output.includes(1)) {
+      add(1);
+    }
 
-    return ticksList;
+    return output;
   });
 </script>
 
-<div
-  class="m3-container {size}"
-  style:--percent="{percent * 100}%"
-  bind:offsetWidth={containerWidth}
->
+<div class="m3-container {size}" style:--handle={handle - 0.5} bind:offsetWidth={containerWidth}>
   <input
     type="range"
     oninput={updateValue}
@@ -72,33 +78,28 @@
     {disabled}
     {...extra}
   />
-
-  <div class="track"></div>
+  <div class="track-1">
+    {#each stopList as stop}
+      <div class="stop" style:--x={stop - 0.5}></div>
+    {/each}
+  </div>
+  <div class="track-2">
+    {#each stopList as stop}
+      <div class="stop" style:--x={stop - 0.5}></div>
+    {/each}
+  </div>
   {#if leadingIcon}
     <Icon
       icon={leadingIcon}
-      class={"leading" + (containerWidth * percent < (size == "xl" ? 48 : 40) ? " pop" : "")}
+      class={"leading" + (containerWidth * handle < (size == "xl" ? 48 : 40) ? " pop" : "")}
     />
   {/if}
   {#if trailingIcon}
     <Icon
       icon={trailingIcon}
-      class={"trailing" + (containerWidth * (1 - percent) < (size == "xl" ? 48 : 40) ? " pop" : "")}
+      class={"trailing" + (containerWidth * (1 - handle) < (size == "xl" ? 48 : 40) ? " pop" : "")}
     />
   {/if}
-  {#if ticks}
-    {#each tickList as tick}
-      <div
-        class="tick"
-        class:hidden={Math.abs(tick - percent) < 0.01}
-        class:inactive={tick > percent}
-        style:--x={tick - 0.5}
-      ></div>
-    {/each}
-  {/if}
-  {#if endStops && !ticks && !trailingIcon}
-    <div class="endstop" class:hidden={containerWidth * (1 - percent) < 14}></div>
-  {/if}
   <div class="handle"></div>
   {#if showValue}
     <div class="value m3-font-label-large">{format(value)}</div>
@@ -118,6 +119,11 @@
     min-width: 10rem;
     print-color-adjust: exact;
     -webkit-print-color-adjust: exact;
+
+    --functional-width: calc(100% - 2 * (0.25rem + 0.125rem));
+    --handle-left: calc(50% + var(--functional-width) * var(--handle) - 0.125rem - 0.375rem);
+    --handle-center: calc(50% + var(--functional-width) * var(--handle));
+    --handle-right: calc(50% + var(--functional-width) * var(--handle) + 0.125rem + 0.375rem);
   }
 
   .m3-container.xs {
@@ -160,15 +166,15 @@
     width: var(--icon-size);
     height: var(--icon-size);
     top: 50%;
-    inset-inline-start: 0.25rem;
+    inset-inline-start: 0;
+    margin-inline-start: 0.25rem;
     translate: 0 -50%;
     pointer-events: none;
     color: rgb(var(--m3-scheme-secondary-container));
   }
 
   .m3-container :global(.leading.pop) {
-    inset-inline-start: var(--percent);
-    margin-inline-start: 0.625rem;
+    inset-inline-start: var(--handle-right);
     color: rgb(var(--m3-scheme-primary));
   }
 
@@ -177,113 +183,118 @@
     width: var(--icon-size);
     height: var(--icon-size);
     top: 50%;
-    inset-inline-end: 0.25rem;
+    inset-inline-end: 0;
+    margin-inline-end: 0.25rem;
     translate: 0 -50%;
     pointer-events: none;
     color: rgb(var(--m3-scheme-primary));
   }
 
   .m3-container :global(.trailing.pop) {
-    inset-inline-end: abs(100% - var(--percent));
-    margin-inline-end: 0.625rem;
+    inset-inline-end: calc(100% - var(--handle-left));
     color: rgb(var(--m3-scheme-secondary-container));
   }
 
-  .endstop {
-    position: absolute;
-    width: 4px;
-    height: 4px;
-    border-radius: var(--m3-util-rounding-full);
-    top: 50%;
-    inset-inline-end: 4px;
-    translate: 0 -50%;
-    background-color: rgb(var(--m3-scheme-on-secondary-container));
-    pointer-events: none;
-    &.hidden {
-      display: none;
-    }
-  }
-
   input {
     position: absolute;
-    inset-inline: -0.5rem;
-    width: calc(100% + 1rem);
+    width: calc(var(--functional-width) + 1rem);
+    left: 50%;
+    translate: -50% 0;
     height: 100%;
 
     opacity: 0;
     appearance: none;
     margin: 0;
-    cursor: pointer;
-  }
 
-  .track::before {
-    position: absolute;
-    content: " ";
-    inset-inline-start: 0;
-    top: 50%;
-    translate: 0 -50%;
-    width: calc(var(--percent) - 0.375rem);
-    height: var(--track-height);
-    pointer-events: none;
-
-    background-color: rgb(var(--m3-scheme-primary));
-    border-start-start-radius: var(--track-radius);
-    border-end-start-radius: var(--track-radius);
-    border-start-end-radius: var(--m3-slider-track-in-shape);
-    border-end-end-radius: var(--m3-slider-track-in-shape);
+    &:enabled {
+      cursor: pointer;
+    }
   }
 
-  .track::after {
+  .track-1,
+  .track-2 {
     position: absolute;
-    content: " ";
-    inset-inline-end: 0;
+    inset-inline: 0;
     top: 50%;
     translate: 0 -50%;
-    width: calc(100% - var(--percent) - 0.375rem);
     height: var(--track-height);
     pointer-events: none;
+  }
+  .track-1 {
+    background-color: rgb(var(--m3-scheme-primary));
+    clip-path: inset(
+      0 calc(100% - var(--handle-left)) 0 0 round var(--track-radius)
+        var(--m3-slider-track-in-shape) var(--m3-slider-track-in-shape) var(--track-radius)
+    );
+    &:dir(rtl) {
+      clip-path: inset(
+        0 0 0 calc(100% - var(--handle-left)) round var(--m3-slider-track-in-shape)
+          var(--track-radius) var(--track-radius) var(--m3-slider-track-in-shape)
+      );
+    }
 
-    background-color: rgb(var(--m3-scheme-secondary-container));
-    border-start-start-radius: var(--m3-slider-track-in-shape);
-    border-end-start-radius: var(--m3-slider-track-in-shape);
-    border-start-end-radius: var(--track-radius);
-    border-end-end-radius: var(--track-radius);
+    @media screen and (forced-colors: active) {
+      background-color: selecteditem;
+    }
+    &:is(input:disabled ~ .track-1) {
+      background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      @media screen and (forced-colors: active) {
+        background-color: canvastext;
+      }
+    }
   }
+  .track-2 {
+    background-color: rgb(var(--m3-scheme-secondary-container));
+    clip-path: inset(
+      0 0 0 var(--handle-right) round var(--m3-slider-track-in-shape) var(--track-radius)
+        var(--track-radius) var(--m3-slider-track-in-shape)
+    );
+    &:dir(rtl) {
+      clip-path: inset(
+        0 var(--handle-right) 0 0 round var(--track-radius) var(--m3-slider-track-in-shape)
+          var(--m3-slider-track-in-shape) var(--track-radius)
+      );
+    }
 
-  .tick {
+    @media screen and (forced-colors: active) {
+      background-color: canvastext;
+    }
+    &:is(input:disabled ~ .track-2) {
+      background-color: rgb(var(--m3-scheme-on-surface) / 0.12);
+      @media screen and (forced-colors: active) {
+        background-color: graytext;
+      }
+    }
+  }
+  .stop {
     position: absolute;
     width: 4px;
     height: 4px;
     border-radius: var(--m3-util-rounding-full);
     top: 50%;
-    inset-inline-start: calc(50% + (100% - 0.75rem) * var(--x));
+    inset-inline-start: calc(50% + (100% - 0.5rem - 0.25rem) * var(--x));
     translate: -50% -50%;
     &:dir(rtl) {
       translate: 50% -50%;
     }
-    background-color: rgb(var(--m3-scheme-on-primary));
+    &:is(.track-1 > .stop) {
+      background-color: rgb(var(--m3-scheme-on-primary));
+      &:is(input:disabled ~ .track-1 > .stop) {
+        background-color: rgb(var(--m3-scheme-inverse-on-surface));
+      }
+    }
+    &:is(.track-2 > .stop) {
+      background-color: rgb(var(--m3-scheme-primary));
+      &:is(input:disabled ~ .track-2 > .stop) {
+        background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      }
+    }
     pointer-events: none;
   }
 
-  .tick.hidden {
-    display: none;
-  }
-
-  .tick.inactive {
-    background-color: rgb(var(--m3-scheme-on-secondary-container));
-  }
-
-  :global(.leading) ~ .tick:nth-child(1 of div.tick) {
-    display: none;
-  }
-
-  :global(.trailing) ~ .tick:nth-last-child(1 of div.tick) {
-    display: none;
-  }
-
   .handle {
     position: absolute;
-    inset-inline-start: var(--percent);
+    inset-inline-start: var(--handle-center);
     translate: -50% 0;
     &:dir(rtl) {
       translate: 50% 0;
@@ -295,6 +306,16 @@
 
     pointer-events: none;
     transition: width var(--m3-util-easing);
+
+    @media screen and (forced-colors: active) {
+      background-color: selecteditem;
+    }
+    &:is(input:disabled ~ .handle) {
+      background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      @media screen and (forced-colors: active) {
+        background-color: graytext;
+      }
+    }
   }
 
   .value {
@@ -309,7 +330,7 @@
     padding: 0.75rem 1rem;
     border-radius: var(--m3-slider-handle-shape);
 
-    inset-inline-start: var(--percent);
+    inset-inline-start: var(--handle-center);
     bottom: calc(var(--handle-height) + 4px);
     translate: -50% 0;
     &:dir(rtl) {
@@ -320,6 +341,10 @@
     pointer-events: none;
     transition: opacity var(--m3-util-easing);
     z-index: 1;
+    @media screen and (forced-colors: active) {
+      border: 2px solid selecteditem;
+      overflow: hidden;
+    }
   }
 
   input:focus-visible ~ .handle {
@@ -338,49 +363,4 @@
   input:enabled:active ~ .value {
     opacity: 1;
   }
-
-  input:disabled {
-    cursor: auto;
-  }
-  input:disabled ~ .track::before {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
-  }
-  input:disabled ~ .track::after {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.12);
-  }
-  input:disabled ~ .handle {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
-  }
-  input:disabled ~ .tick {
-    background-color: rgb(var(--m3-scheme-inverse-on-surface));
-  }
-  input:disabled ~ .tick.inactive,
-  input:disabled ~ .endstop {
-    background-color: rgb(var(--m3-scheme-on-surface));
-  }
-
-  @media screen and (forced-colors: active) {
-    .track::before {
-      background-color: selecteditem;
-    }
-    .track::after {
-      background-color: canvastext;
-    }
-    .handle {
-      background-color: selecteditem;
-    }
-    .value {
-      border: 2px solid selecteditem;
-      overflow: hidden;
-    }
-    input:disabled + .track::before {
-      background-color: canvastext;
-    }
-    input:disabled + .track::after {
-      background-color: graytext;
-    }
-    input:disabled ~ .handle {
-      background-color: graytext;
-    }
-  }
 </style>

package/package/forms/Slider.svelte.d.ts

@@ -10,7 +10,7 @@ type $$ComponentProps = {
     size?: "xs" | "s" | "m" | "l" | "xl";
     leadingIcon?: IconifyIcon;
     trailingIcon?: IconifyIcon;
-    ticks?: boolean;
+    stops?: boolean;
     endStops?: boolean;
     format?: (n: number) => string;
 } & Omit<HTMLInputAttributes, "size">;

package/package/forms/SliderTicks.svelte

@@ -6,7 +6,7 @@
   import type { ComponentProps } from "svelte";
   import Slider from "./Slider.svelte";
 
-  let props: Omit<ComponentProps<typeof Slider>, "ticks"> = $props();
+  let props: Omit<ComponentProps<typeof Slider>, "stops"> = $props();
 </script>
 
-<Slider {...props} ticks={true}></Slider>
+<Slider {...props} stops={true}></Slider>

package/package/forms/SliderTicks.svelte.d.ts

@@ -9,9 +9,9 @@ declare const SliderTicks: import("svelte").Component<Omit<{
     size?: "xs" | "s" | "m" | "l" | "xl";
     leadingIcon?: import("@iconify/types").IconifyIcon;
     trailingIcon?: import("@iconify/types").IconifyIcon;
-    ticks?: boolean;
+    stops?: boolean;
     endStops?: boolean;
     format?: (n: number) => string;
-} & Omit<import("svelte/elements").HTMLInputAttributes, "size">, "ticks">, {}, "">;
+} & Omit<import("svelte/elements").HTMLInputAttributes, "size">, "stops">, {}, "">;
 type SliderTicks = ReturnType<typeof SliderTicks>;
 export default SliderTicks;

package/package/forms/TextField.svelte

@@ -62,7 +62,8 @@
 
 <style>
   :root {
-    --m3-textfield-filled-shape: var(--m3-util-rounding-extra-small);
+    /* "textfield" is deprecated */
+    --m3-field-filled-shape: var(--m3-textfield-filled-shape, var(--m3-util-rounding-extra-small));
   }
 
   .m3-container {
@@ -80,7 +81,7 @@
     border: none;
     outline: none;
     padding: 1.5rem 1rem 0.5rem 1rem;
-    border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
+    border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
     background-color: rgb(var(--m3-scheme-surface-container-highest));
     color: rgb(var(--m3-scheme-on-surface));
   }
@@ -118,7 +119,7 @@
   .layer {
     position: absolute;
     inset: 0;
-    border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
+    border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
     pointer-events: none;
     transition: all 100ms;
     &:is(input:enabled:hover ~ .layer) {

package/package/forms/TextFieldMultiline.svelte

@@ -57,7 +57,8 @@
 
 <style>
   :root {
-    --m3-textfield-filled-shape: var(--m3-util-rounding-extra-small);
+    /* "textfield" is deprecated */
+    --m3-field-filled-shape: var(--m3-textfield-filled-shape, var(--m3-util-rounding-extra-small));
   }
   .m3-container {
     display: inline-flex;
@@ -74,7 +75,7 @@
     border: none;
     outline: none;
     padding: 1.5rem 1rem 0.5rem 1rem;
-    border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
+    border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
     background-color: rgb(var(--m3-scheme-surface-container-highest));
     color: rgb(var(--m3-scheme-on-surface));
     resize: none;
@@ -113,7 +114,7 @@
   .layer {
     position: absolute;
     inset: 0;
-    border-radius: var(--m3-textfield-filled-shape) var(--m3-textfield-filled-shape) 0 0;
+    border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
     pointer-events: none;
     transition: all 100ms;
     &:is(textarea:enabled:hover ~ .layer) {

package/package/forms/TextFieldOutlined.svelte

@@ -66,7 +66,11 @@
   do this: <TextFieldOutlined --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
   */
   :root {
-    --m3-textfield-outlined-shape: var(--m3-util-rounding-extra-small);
+    /* "textfield" is deprecated */
+    --m3-field-outlined-shape: var(
+      --m3-textfield-outlined-shape,
+      var(--m3-util-rounding-extra-small)
+    );
   }
   .m3-container {
     display: inline-flex;
@@ -83,7 +87,7 @@
     border: none;
     outline: none;
     padding: 1rem;
-    border-radius: var(--m3-textfield-outlined-shape);
+    border-radius: var(--m3-field-outlined-shape);
     background-color: transparent;
     color: rgb(var(--m3-scheme-on-surface));
   }
@@ -122,7 +126,7 @@
     position: absolute;
     inset: 0;
     border: 1px solid rgb(var(--error, var(--m3-scheme-outline)));
-    border-radius: var(--m3-textfield-outlined-shape);
+    border-radius: var(--m3-field-outlined-shape);
     pointer-events: none;
     transition: all 100ms;
     &:is(input:enabled:hover ~ .layer) {

package/package/forms/TextFieldOutlinedMultiline.svelte

@@ -61,7 +61,11 @@
   do this: <TextFieldOutlinedMultiline --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
   */
   :root {
-    --m3-textfield-outlined-shape: var(--m3-util-rounding-extra-small);
+    /* "textfield" is deprecated */
+    --m3-field-outlined-shape: var(
+      --m3-textfield-outlined-shape,
+      var(--m3-util-rounding-extra-small)
+    );
   }
   .m3-container {
     display: inline-flex;
@@ -78,7 +82,7 @@
     border: none;
     outline: none;
     padding: 1rem;
-    border-radius: var(--m3-textfield-outlined-shape);
+    border-radius: var(--m3-field-outlined-shape);
     background-color: transparent;
     color: rgb(var(--m3-scheme-on-surface));
     resize: none;
@@ -118,7 +122,7 @@
     position: absolute;
     inset: 0;
     border: 1px solid rgb(var(--error, var(--m3-scheme-outline)));
-    border-radius: var(--m3-textfield-outlined-shape);
+    border-radius: var(--m3-field-outlined-shape);
     pointer-events: none;
     transition: all 100ms;
     &:is(textarea:enabled:hover ~ .layer) {

package/package/index.d.ts

@@ -49,5 +49,6 @@ export { default as Tabs } from "./nav/Tabs.svelte";
 export { default as TabsLink } from "./nav/TabsLink.svelte";
 export { default as VariableTabs } from "./nav/VariableTabs.svelte";
 export { default as VariableTabsLink } from "./nav/VariableTabsLink.svelte";
+export * from "./utils/badge.js";
 export { default as ChipChooser } from "./utils/ChipChooser.svelte";
 export { default as Divider } from "./utils/Divider.svelte";

package/package/index.js

@@ -48,5 +48,6 @@ export { default as Tabs } from "./nav/Tabs.svelte";
 export { default as TabsLink } from "./nav/TabsLink.svelte";
 export { default as VariableTabs } from "./nav/VariableTabs.svelte";
 export { default as VariableTabsLink } from "./nav/VariableTabsLink.svelte";
+export * from "./utils/badge.js";
 export { default as ChipChooser } from "./utils/ChipChooser.svelte";
 export { default as Divider } from "./utils/Divider.svelte";

package/package/misc/_icon.svelte

@@ -14,6 +14,19 @@
   } = $props();
 </script>
 
-<svg {width} {height} class={clazz} viewBox="0 0 {icon.width} {icon.height}">
+<svg
+  {width}
+  {height}
+  class={clazz}
+  data-badge={icon.body.includes("<!--badge-->") ? "" : undefined}
+  viewBox="0 0 {icon.width} {icon.height}"
+>
   {@html icon.body}
 </svg>
+
+<style>
+  /* deprecated: eventually want to just do this for all icons */
+  svg[data-badge] {
+    overflow: visible;
+  }
+</style>

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

@@ -1,3 +1,5 @@
-import type { HTMLButtonAttributes } from "svelte/elements";
+import type { HTMLLabelAttributes, HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+export type LabelAttrs = HTMLLabelAttributes & Required<Pick<HTMLLabelAttributes, "for">>;
+export type AnchorAttrs = HTMLAnchorAttributes & Required<Pick<HTMLAnchorAttributes, "href">>;
 export type NotButton<T> = Omit<T, "onclick">;
 export type ButtonAttrs = HTMLButtonAttributes & Required<Pick<HTMLButtonAttributes, "onclick">>;

package/package/utils/badge.d.ts

@@ -0,0 +1,11 @@
+import type { IconifyIcon } from "@iconify/types";
+export declare const addBadge: (icon: IconifyIcon, n?: number) => {
+    body: string;
+    left?: number;
+    top?: number;
+    width?: number;
+    height?: number;
+    rotate?: number;
+    hFlip?: boolean;
+    vFlip?: boolean;
+};

package/package/utils/badge.js

@@ -0,0 +1,30 @@
+export const addBadge = (icon, n) => {
+    const { width, height } = icon;
+    if (!width || !height)
+        throw new Error("Icon must have icon and height");
+    let badge;
+    if (n) {
+        const x = width - 12;
+        const y = 14 - 16; // 14 down, 16 up
+        const max = 999;
+        const text = n > max ? `${max}+` : n.toString();
+        badge =
+            `<!--badge--><foreignObject x="${x}" y="${y}" width="40" height="16">` +
+                `<div class="m3-font-label-small" style="${[
+                    "background-color:rgb(var(--m3-scheme-error))",
+                    "color:rgb(var(--m3-scheme-on-error))",
+                    "width:max-content",
+                    "padding-inline:4px",
+                    "border-radius:var(--m3-util-rounding-full)",
+                ].join(";")}">` +
+                text +
+                `</div>`;
+    }
+    else {
+        badge = `<circle cx="${width - 3}" cy="3" r="3" fill="rgb(var(--m3-scheme-error))"/>`;
+    }
+    return {
+        ...icon,
+        body: icon.body + badge,
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -36,16 +36,16 @@
   "dependencies": {
     "@iconify/types": "^2.0.0",
     "@ktibow/iconset-material-symbols": "^0.0.1755063979",
-    "@ktibow/material-color-utilities-nightly": "^0.3.11755481233385",
-    "svelte": "^5.38.2"
+    "@ktibow/material-color-utilities-nightly": "^0.3.11756085020728",
+    "svelte": "^5.38.3"
   },
   "devDependencies": {
     "@eslint/compat": "^1.3.2",
-    "@eslint/js": "^9.33.0",
+    "@eslint/js": "^9.34.0",
     "@sveltejs/adapter-static": "^3.0.9",
-    "@sveltejs/kit": "^2.32.0",
-    "@sveltejs/package": "^2.4.1",
-    "@sveltejs/vite-plugin-svelte": "^6.1.2",
+    "@sveltejs/kit": "^2.36.2",
+    "@sveltejs/package": "^2.5.0",
+    "@sveltejs/vite-plugin-svelte": "^6.1.3",
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.11.0",
@@ -57,8 +57,8 @@
     "svelte-check": "^4.3.1",
     "svelte-highlight": "^7.8.3",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.40.0",
-    "vite": "^7.1.2"
+    "typescript-eslint": "^8.41.0",
+    "vite": "^7.1.3"
   },
   "keywords": [
     "svelte",