m3-svelte 5.2.0 → 5.2.2

package/package/forms/DateField.svelte

@@ -93,7 +93,7 @@ opacity: ${Math.min(t * 3, 1)};`,
   }
   .m3-container {
     position: relative;
-    height: 3.5rem;
+    height: calc(3.5rem + var(--m3-util-density-term));
     min-width: 15rem;
     background-color: rgb(var(--m3-scheme-surface-container-highest));
     border-radius: var(--m3-datefield-shape) var(--m3-datefield-shape) 0 0;
@@ -106,7 +106,7 @@ opacity: ${Math.min(t * 3, 1)};`,
     height: 100%;
     border: none;
     outline: none;
-    padding: 1.5rem 1rem 0.5rem 1rem;
+    padding: 1rem 1rem 0rem 1rem;
     background-color: transparent;
     color: rgb(var(--m3-scheme-on-surface));
   }

package/package/forms/DateFieldOutlined.svelte

@@ -99,7 +99,7 @@ opacity: ${Math.min(t * 3, 1)};`,
   .m3-container {
     display: inline-flex;
     position: relative;
-    height: 3.5rem;
+    height: calc(3.5rem + var(--m3-util-density-term));
     min-width: 15rem;
   }
   input {
@@ -117,7 +117,8 @@ opacity: ${Math.min(t * 3, 1)};`,
   label {
     position: absolute;
     left: 0.75rem;
-    top: calc(var(--m3-font-body-small-height, 1rem) * -0.5);
+    top: 0;
+    translate: 0 -50%;
     color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
     background-color: var(--m3-util-background, rgb(var(--m3-scheme-surface)));
     padding: 0 0.25rem;

package/package/forms/TextField.svelte

@@ -69,7 +69,7 @@
     display: inline-flex;
     position: relative;
     align-items: center;
-    height: 3.5rem;
+    height: calc(3.5rem + var(--m3-util-density-term));
     min-width: 15rem;
   }
   input {
@@ -87,7 +87,8 @@
   label {
     position: absolute;
     left: 1rem;
-    top: 1rem;
+    top: 50%;
+    translate: 0 -50%;
     color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
     &:is(input:hover ~ label) {
       color: rgb(var(--error, var(--m3-scheme-on-surface)));
@@ -100,6 +101,7 @@
     }
     &:is(input:focus ~ label, input:not(:placeholder-shown) ~ label) {
       top: 0.5rem;
+      translate: 0 0;
       font-size: var(--m3-font-body-small-size, 0.75rem);
       line-height: var(--m3-font-body-small-height, 1.333);
       letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
@@ -108,6 +110,7 @@
     transition:
       color 100ms,
       top 100ms,
+      translate 100ms,
       font-size 300ms,
       line-height 300ms,
       letter-spacing 300ms;

package/package/forms/TextFieldMultiline.svelte

@@ -63,7 +63,7 @@
     display: inline-flex;
     position: relative;
     align-items: center;
-    min-height: 5rem;
+    min-height: calc(5rem + var(--m3-util-density-term));
     min-width: 15rem;
   }
   textarea {
@@ -82,7 +82,8 @@
   label {
     position: absolute;
     left: 1rem;
-    top: 1rem;
+    top: 50%;
+    translate: 0 -50%;
     color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
     &:is(textarea:hover ~ label) {
       color: rgb(var(--error, var(--m3-scheme-on-surface)));
@@ -95,6 +96,7 @@
     }
     &:is(textarea:focus ~ label, textarea:not(:placeholder-shown) ~ label) {
       top: 0.5rem;
+      translate: 0 0;
       font-size: var(--m3-font-body-small-size, 0.75rem);
       line-height: var(--m3-font-body-small-height, 1.333);
       letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
@@ -103,6 +105,7 @@
     transition:
       color 100ms,
       top 100ms,
+      translate 100ms,
       font-size 300ms,
       line-height 300ms,
       letter-spacing 300ms;

package/package/forms/TextFieldOutlined.svelte

@@ -72,7 +72,7 @@
     display: inline-flex;
     position: relative;
     align-items: center;
-    height: 3.5rem;
+    height: calc(3.5rem + var(--m3-util-density-term));
     min-width: 15rem;
   }
   input {
@@ -90,21 +90,22 @@
   label {
     position: absolute;
     left: 0.75rem;
-    top: 1rem;
+    top: 50%;
+    translate: 0 -50%;
     color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
     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)));
     }
-    &:is(input:focus ~ label) {
+    &:is(input:enabled:focus ~ label) {
       color: rgb(var(--error, var(--m3-scheme-primary)));
     }
     &:is(input:disabled ~ label) {
       color: rgb(var(--m3-scheme-on-surface) / 0.38);
     }
     &:is(input:focus ~ label, input:not(:placeholder-shown) ~ label) {
-      top: calc(var(--m3-font-body-small-height, 1rem) * -0.5);
+      top: 0;
       font-size: var(--m3-font-body-small-size, 0.75rem);
       line-height: var(--m3-font-body-small-height, 1.333);
       letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
@@ -124,10 +125,10 @@
     border-radius: var(--m3-textfield-outlined-shape);
     pointer-events: none;
     transition: all 100ms;
-    &:is(input:hover ~ .layer) {
+    &:is(input:enabled:hover ~ .layer) {
       border-color: rgb(var(--error, var(--m3-scheme-on-surface)));
     }
-    &:is(input:focus ~ .layer) {
+    &:is(input:enabled:focus ~ .layer) {
       border-color: rgb(var(--error, var(--m3-scheme-primary)));
       border-width: 0.125rem;
     }

package/package/forms/TextFieldOutlinedMultiline.svelte

@@ -67,7 +67,7 @@
     display: inline-flex;
     position: relative;
     align-items: center;
-    min-height: 5rem;
+    min-height: calc(5rem + var(--m3-util-density-term));
     min-width: 15rem;
   }
   textarea {
@@ -86,7 +86,8 @@
   label {
     position: absolute;
     left: 0.75rem;
-    top: 1rem;
+    top: 50%;
+    translate: 0 -50%;
     color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
     background-color: var(--m3-util-background, rgb(var(--m3-scheme-surface)));
     padding: 0 0.25rem;
@@ -100,7 +101,7 @@
       color: rgb(var(--m3-scheme-on-surface) / 0.38);
     }
     &:is(textarea:focus ~ label, textarea:not(:placeholder-shown) ~ label) {
-      top: calc(var(--m3-font-body-small-height, 1rem) * -0.5);
+      top: 0;
       font-size: var(--m3-font-body-small-size, 0.75rem);
       line-height: var(--m3-font-body-small-height, 1.333);
       letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
@@ -120,10 +121,10 @@
     border-radius: var(--m3-textfield-outlined-shape);
     pointer-events: none;
     transition: all 100ms;
-    &:is(textarea:hover ~ .layer) {
+    &:is(textarea:enabled:hover ~ .layer) {
       border-color: rgb(var(--error, var(--m3-scheme-on-surface)));
     }
-    &:is(textarea:focus ~ .layer) {
+    &:is(textarea:enabled:focus ~ .layer) {
       border-color: rgb(var(--error, var(--m3-scheme-primary)));
       border-width: 0.125rem;
     }

package/package/misc/Layer.svelte

@@ -1,17 +1,181 @@
 <script lang="ts">
-  import Ripple from "./_ripple.svelte";
-  import RippleSimple from "./_ripplesimple.svelte";
-
-  let ripple = $state(RippleSimple);
-  if (
-    // @ts-expect-error about M3_SVELTE_NO_RIPPLE
-    typeof M3_SVELTE_NO_RIPPLE == "undefined" &&
-    (typeof window == "undefined" || !window.matchMedia("(prefers-reduced-motion: reduce)").matches)
-  ) {
-    ripple = Ripple;
-  }
+  let cancelRipples: (() => void)[] = $state([]);
+
+  const createRipple = (node: HTMLDivElement) => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+    node.classList.remove("broken");
+
+    const parent = node.parentElement!;
+
+    const ripple = (e: MouseEvent) => {
+      if (e.button != 0) return;
+      if (parent instanceof HTMLButtonElement) {
+        if (parent.disabled) return;
+      }
+      if (parent instanceof HTMLLabelElement) {
+        const control = parent.control;
+        if (control instanceof HTMLInputElement && control.disabled) return;
+      }
+      if (parent.classList.contains("layer-container")) {
+        const input = parent.previousElementSibling;
+        if (input instanceof HTMLInputElement && input.disabled) return;
+      }
+
+      const rect = parent.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const size = Math.hypot(Math.max(x, rect.width - x), Math.max(y, rect.height - y)) * 2.5;
+      const speed = Math.max(Math.min(Math.log(size) * 50, 600), 200);
+
+      const gradient = document.createElementNS("http://www.w3.org/2000/svg", "radialGradient");
+      gradient.id = `ripple-${Date.now()}`;
+
+      const stops = [
+        { offset: "0%", opacity: "0.12" },
+        { offset: "70%", opacity: "0.12" },
+        { offset: "100%", opacity: "0" },
+      ];
+
+      stops.forEach(({ offset, opacity }) => {
+        const stop = document.createElementNS("http://www.w3.org/2000/svg", "stop");
+        stop.setAttribute("offset", offset);
+        stop.setAttribute("stop-color", "currentColor");
+        stop.setAttribute("stop-opacity", opacity);
+        gradient.appendChild(stop);
+      });
+
+      const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+      circle.setAttribute("cx", `${size / 2}`);
+      circle.setAttribute("cy", `${size / 2}`);
+      circle.setAttribute("r", "0");
+      circle.setAttribute("fill", `url(#${gradient.id})`);
+
+      const expand = document.createElementNS("http://www.w3.org/2000/svg", "animate");
+      expand.setAttribute("attributeName", "r");
+      expand.setAttribute("from", "0");
+      expand.setAttribute("to", `${size / 2}`);
+      expand.setAttribute("dur", `${speed}ms`);
+      expand.setAttribute("fill", "freeze");
+      expand.setAttribute("calcMode", "spline");
+      expand.setAttribute("keySplines", "0.4 0, 0.2 1");
+
+      circle.appendChild(expand);
+
+      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      svg.style.cssText = `
+        position: absolute;
+        left: ${x - size / 2}px;
+        top: ${y - size / 2}px;
+        width: ${size}px;
+        height: ${size}px;
+        pointer-events: none;
+        overflow: visible;
+      `;
+      svg.appendChild(gradient);
+      svg.appendChild(circle);
+
+      const ua = navigator.userAgent;
+      const isFirefox = ua.includes("Firefox");
+      const isTrulySafari = !ua.includes("Chrome") && ua.includes("Safari");
+      if (!isFirefox && !isTrulySafari && size > 100) {
+        const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
+        filter.id = `noise-${Date.now()}`;
 
-  const Component = $derived(ripple);
+        const turb = document.createElementNS("http://www.w3.org/2000/svg", "feTurbulence");
+        turb.setAttribute("type", "fractalNoise");
+        turb.setAttribute("baseFrequency", "0.6");
+        turb.setAttribute("seed", Math.random().toString());
+
+        const blur = document.createElementNS("http://www.w3.org/2000/svg", "feDisplacementMap");
+        blur.setAttribute("in", "SourceGraphic");
+        blur.setAttribute("in2", "turbulence");
+        blur.setAttribute("scale", `${size ** 2 * 0.0002}`);
+        blur.setAttribute("xChannelSelector", "R");
+        blur.setAttribute("yChannelSelector", "B");
+
+        filter.appendChild(turb);
+        filter.appendChild(blur);
+
+        circle.setAttribute("filter", `url(#${filter.id})`);
+        svg.appendChild(filter);
+      }
+
+      node.appendChild(svg);
+
+      cancelRipples.push(() => {
+        const fade = document.createElementNS("http://www.w3.org/2000/svg", "animate");
+        fade.setAttribute("attributeName", "opacity");
+        fade.setAttribute("from", "1");
+        fade.setAttribute("to", "0");
+        fade.setAttribute("dur", "800ms");
+        fade.setAttribute("fill", "freeze");
+        fade.setAttribute("calcMode", "spline");
+        fade.setAttribute("keySplines", "0.4 0, 0.2 1");
+        circle.appendChild(fade);
+        fade.beginElement();
+        setTimeout(() => svg.remove(), 800);
+      });
+    };
+
+    parent.addEventListener("pointerdown", ripple);
+
+    return {
+      destroy() {
+        parent.removeEventListener("pointerdown", ripple);
+      },
+    };
+  };
 </script>
 
-<Component />
+<svelte:window
+  onpointerup={() => {
+    cancelRipples.forEach((cancel) => cancel());
+    cancelRipples = [];
+  }}
+  ondragend={() => {
+    cancelRipples.forEach((cancel) => cancel());
+    cancelRipples = [];
+  }}
+/>
+
+<div class="ripple-container broken" use:createRipple></div>
+<div class="tint"></div>
+
+<style>
+  .ripple-container {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+
+    overflow: hidden;
+  }
+  .tint {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+
+    background-color: currentColor;
+    opacity: 0;
+    transition: opacity var(--m3-util-easing-fast);
+
+    &:not(
+      :global(input:disabled + label) > .tint,
+      :global(input:disabled + .layer-container) > .tint,
+      :global(:disabled) > .tint
+    ) {
+      @media (hover: hover) {
+        &:is(:global(:hover) > .tint) {
+          opacity: 0.08;
+        }
+      }
+      &:is(:global(input:focus-visible + label) > .tint),
+      &:is(:global(:focus-visible) > .tint),
+      &:is(.ripple-container.broken + .tint):is(:global(:active) > .tint) {
+        opacity: 0.12;
+      }
+    }
+  }
+</style>

package/package.json

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

package/package/misc/_ripple.svelte

@@ -1,179 +0,0 @@
-<script lang="ts">
-  let cancelRipples: (() => void)[] = $state([]);
-
-  const createRipple = (node: HTMLDivElement) => {
-    node.classList.remove("broken");
-
-    const parent = node.parentElement!;
-
-    const ripple = (e: MouseEvent) => {
-      if (e.button != 0) return;
-      if (parent instanceof HTMLButtonElement) {
-        if (parent.disabled) return;
-      }
-      if (parent instanceof HTMLLabelElement) {
-        const control = parent.control;
-        if (control instanceof HTMLInputElement && control.disabled) return;
-      }
-      if (parent.classList.contains("layer-container")) {
-        const input = parent.previousElementSibling;
-        if (input instanceof HTMLInputElement && input.disabled) return;
-      }
-
-      const rect = parent.getBoundingClientRect();
-      const x = e.clientX - rect.left;
-      const y = e.clientY - rect.top;
-      const size = Math.hypot(Math.max(x, rect.width - x), Math.max(y, rect.height - y)) * 2.5;
-      const speed = Math.max(Math.min(Math.log(size) * 50, 600), 200);
-
-      const gradient = document.createElementNS("http://www.w3.org/2000/svg", "radialGradient");
-      gradient.id = `ripple-${Date.now()}`;
-
-      const stops = [
-        { offset: "0%", opacity: "0.12" },
-        { offset: "70%", opacity: "0.12" },
-        { offset: "100%", opacity: "0" },
-      ];
-
-      stops.forEach(({ offset, opacity }) => {
-        const stop = document.createElementNS("http://www.w3.org/2000/svg", "stop");
-        stop.setAttribute("offset", offset);
-        stop.setAttribute("stop-color", "currentColor");
-        stop.setAttribute("stop-opacity", opacity);
-        gradient.appendChild(stop);
-      });
-
-      const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-      circle.setAttribute("cx", `${size / 2}`);
-      circle.setAttribute("cy", `${size / 2}`);
-      circle.setAttribute("r", "0");
-      circle.setAttribute("fill", `url(#${gradient.id})`);
-
-      const expand = document.createElementNS("http://www.w3.org/2000/svg", "animate");
-      expand.setAttribute("attributeName", "r");
-      expand.setAttribute("from", "0");
-      expand.setAttribute("to", `${size / 2}`);
-      expand.setAttribute("dur", `${speed}ms`);
-      expand.setAttribute("fill", "freeze");
-      expand.setAttribute("calcMode", "spline");
-      expand.setAttribute("keySplines", "0.4 0, 0.2 1");
-
-      circle.appendChild(expand);
-
-      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-      svg.style.cssText = `
-        position: absolute;
-        left: ${x - size / 2}px;
-        top: ${y - size / 2}px;
-        width: ${size}px;
-        height: ${size}px;
-        pointer-events: none;
-        overflow: visible;
-      `;
-      svg.appendChild(gradient);
-      svg.appendChild(circle);
-
-      const ua = navigator.userAgent;
-      const isFirefox = ua.includes("Firefox");
-      const isTrulySafari = !ua.includes("Chrome") && ua.includes("Safari");
-      if (!isFirefox && !isTrulySafari && size > 100) {
-        const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
-        filter.id = `noise-${Date.now()}`;
-
-        const turb = document.createElementNS("http://www.w3.org/2000/svg", "feTurbulence");
-        turb.setAttribute("type", "fractalNoise");
-        turb.setAttribute("baseFrequency", "0.6");
-        turb.setAttribute("seed", Math.random().toString());
-
-        const blur = document.createElementNS("http://www.w3.org/2000/svg", "feDisplacementMap");
-        blur.setAttribute("in", "SourceGraphic");
-        blur.setAttribute("in2", "turbulence");
-        blur.setAttribute("scale", `${size ** 2 * 0.0002}`);
-        blur.setAttribute("xChannelSelector", "R");
-        blur.setAttribute("yChannelSelector", "B");
-
-        filter.appendChild(turb);
-        filter.appendChild(blur);
-
-        circle.setAttribute("filter", `url(#${filter.id})`);
-        svg.appendChild(filter);
-      }
-
-      node.appendChild(svg);
-
-      cancelRipples.push(() => {
-        const fade = document.createElementNS("http://www.w3.org/2000/svg", "animate");
-        fade.setAttribute("attributeName", "opacity");
-        fade.setAttribute("from", "1");
-        fade.setAttribute("to", "0");
-        fade.setAttribute("dur", "800ms");
-        fade.setAttribute("fill", "freeze");
-        fade.setAttribute("calcMode", "spline");
-        fade.setAttribute("keySplines", "0.4 0, 0.2 1");
-        circle.appendChild(fade);
-        fade.beginElement();
-        setTimeout(() => svg.remove(), 800);
-      });
-    };
-
-    parent.addEventListener("pointerdown", ripple);
-
-    return {
-      destroy() {
-        parent.removeEventListener("pointerdown", ripple);
-      },
-    };
-  };
-</script>
-
-<svelte:window
-  onpointerup={() => {
-    cancelRipples.forEach((cancel) => cancel());
-    cancelRipples = [];
-  }}
-  ondragend={() => {
-    cancelRipples.forEach((cancel) => cancel());
-    cancelRipples = [];
-  }}
-/>
-
-<div class="ripple-container broken" use:createRipple></div>
-<div class="tint"></div>
-
-<style>
-  .ripple-container {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    pointer-events: none;
-
-    overflow: hidden;
-  }
-  .tint {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    pointer-events: none;
-
-    background-color: currentColor;
-    opacity: 0;
-    transition: opacity var(--m3-util-easing-fast);
-
-    &:not(
-      :global(input:disabled + label) > .tint,
-      :global(input:disabled + .layer-container) > .tint,
-      :global(:disabled) > .tint
-    ) {
-      @media (hover: hover) {
-        &:is(:global(:hover) > .tint) {
-          opacity: 0.08;
-        }
-      }
-      &:is(:global(input:focus-visible + label) > .tint),
-      &:is(:global(:focus-visible) > .tint),
-      &:is(.ripple-container.broken + .tint):is(:global(:active) > .tint) {
-        opacity: 0.12;
-      }
-    }
-  }
-</style>

package/package/misc/_ripple.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const Ripple: import("svelte").Component<Record<string, never>, {}, "">;
-type Ripple = ReturnType<typeof Ripple>;
-export default Ripple;

package/package/misc/_ripplesimple.svelte

@@ -1,33 +0,0 @@
-<svelte:options runes />
-
-<div class="tint"></div>
-
-<style>
-  .tint {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    pointer-events: none;
-
-    background-color: currentColor;
-    opacity: 0;
-    transition: opacity var(--m3-util-easing-fast);
-
-    &:not(
-      :global(input:disabled + label) > .tint,
-      :global(input:disabled + .layer-container) > .tint,
-      :global(:disabled) > .tint
-    ) {
-      @media (hover: hover) {
-        &:is(:global(:hover) > .tint) {
-          opacity: 0.08;
-        }
-      }
-      &:is(:global(input:focus-visible + label) > .tint),
-      &:is(:global(:focus-visible) > .tint),
-      &:is(:global(:active) > .tint) {
-        opacity: 0.12;
-      }
-    }
-  }
-</style>

package/package/misc/_ripplesimple.svelte.d.ts

@@ -1,6 +0,0 @@
-export default Ripplesimple;
-type Ripplesimple = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Record<string, never>>): void;
-};
-declare const Ripplesimple: import("svelte").Component<Record<string, never>, {}, "">;