m3-svelte 5.2.1 → 5.2.3

package/package/containers/ListItem.svelte

@@ -38,7 +38,8 @@
   {/if}
   <div class="body">
     {#if overline}
-      <p class="overline m3-font-label-small">{overline}</p>
+      <!-- Renamed to not conflict with Tailwind -->
+      <p class="overline- m3-font-label-small">{overline}</p>
     {/if}
     <p class="headline m3-font-body-large">{headline}</p>
     {#if supporting}
@@ -134,7 +135,7 @@
     margin: 0;
   }
   .supporting,
-  .overline {
+  .overline- {
     color: rgb(var(--m3-scheme-on-surface-variant));
   }
   .headline {

package/package/containers/MenuItem.svelte

@@ -35,6 +35,7 @@
     align-items: center;
     height: calc(3rem + var(--m3-util-density-term));
     padding: 0 0.75rem;
+    gap: 0.75rem;
     white-space: nowrap;
 
     border: none;
@@ -48,7 +49,6 @@
   .icon {
     width: 1.5rem;
     height: 1.5rem;
-    margin-right: 0.75rem;
   }
   .icon > :global(svg) {
     width: 1.5rem;

package/package/forms/DateField.svelte

@@ -112,17 +112,17 @@ opacity: ${Math.min(t * 3, 1)};`,
   }
   label {
     position: absolute;
-    left: 1rem;
+    inset-inline-start: 1rem;
     top: 0.5rem;
     color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
     pointer-events: none;
   }
   input {
-    padding-left: 0.875rem;
+    padding-inline-start: 0.875rem;
   }
   @supports (-moz-appearance: none) {
     input {
-      padding-left: 0.75rem;
+      padding-inline-start: 0.75rem;
     }
   }
 
@@ -132,7 +132,7 @@ opacity: ${Math.min(t * 3, 1)};`,
     padding-left: 0.75rem;
     padding-right: 0.75rem;
     height: 100%;
-    right: 0;
+    inset-inline-end: 0;
 
     align-items: center;
     justify-content: center;
@@ -175,6 +175,9 @@ opacity: ${Math.min(t * 3, 1)};`,
     }
     .has-js input {
       clip-path: inset(0 3.5rem 0 0);
+      &:is(:global([dir="rtl"]) input) {
+        clip-path: inset(0 0 0 3.5rem);
+      }
     }
   }
 </style>

package/package/forms/Slider.svelte

@@ -160,15 +160,15 @@
     width: var(--icon-size);
     height: var(--icon-size);
     top: 50%;
-    left: 0.25rem;
+    inset-inline-start: 0.25rem;
     translate: 0 -50%;
     pointer-events: none;
     color: rgb(var(--m3-scheme-secondary-container));
   }
 
   .m3-container :global(.leading.pop) {
-    left: var(--percent);
-    margin-left: 0.625rem;
+    inset-inline-start: var(--percent);
+    margin-inline-start: 0.625rem;
     color: rgb(var(--m3-scheme-primary));
   }
 
@@ -177,15 +177,15 @@
     width: var(--icon-size);
     height: var(--icon-size);
     top: 50%;
-    right: 0.25rem;
+    inset-inline-end: 0.25rem;
     translate: 0 -50%;
     pointer-events: none;
     color: rgb(var(--m3-scheme-primary));
   }
 
   .m3-container :global(.trailing.pop) {
-    right: abs(100% - var(--percent));
-    margin-right: 0.625rem;
+    inset-inline-end: abs(100% - var(--percent));
+    margin-inline-end: 0.625rem;
     color: rgb(var(--m3-scheme-secondary-container));
   }
 
@@ -195,8 +195,8 @@
     height: 4px;
     border-radius: var(--m3-util-rounding-full);
     top: 50%;
-    right: 2px;
-    translate: -50% -50%;
+    inset-inline-end: 4px;
+    translate: 0 -50%;
     background-color: rgb(var(--m3-scheme-primary));
     pointer-events: none;
     &.hidden {
@@ -206,8 +206,7 @@
 
   input {
     position: absolute;
-    left: -0.5rem;
-    right: -0.5rem;
+    inset-inline: -0.5rem;
     width: calc(100% + 1rem);
     height: 100%;
 
@@ -221,7 +220,7 @@
   .track::before {
     position: absolute;
     content: " ";
-    left: 0;
+    inset-inline-start: 0;
     top: 50%;
     translate: 0 -50%;
     width: calc(var(--percent) - 0.375rem);
@@ -238,7 +237,7 @@
   .track::after {
     position: absolute;
     content: " ";
-    right: 0;
+    inset-inline-end: 0;
     top: 50%;
     translate: 0 -50%;
     width: calc(100% - var(--percent) - 0.375rem);
@@ -258,8 +257,11 @@
     height: 4px;
     border-radius: var(--m3-util-rounding-full);
     top: 50%;
-    left: calc(50% + (100% - 0.75rem) * var(--x));
+    inset-inline-start: calc(50% + (100% - 0.75rem) * var(--x));
     translate: -50% -50%;
+    &:is(:global([dir="rtl"] .tick)) {
+      translate: 50% -50%;
+    }
     background-color: rgb(var(--m3-scheme-secondary-container));
     pointer-events: none;
   }
@@ -282,8 +284,11 @@
 
   .handle {
     position: absolute;
-    left: var(--percent);
+    inset-inline-start: var(--percent);
     translate: -50% 0;
+    &:is(:global([dir="rtl"]) .handle) {
+      translate: 50% 0;
+    }
     width: 0.25rem;
     height: var(--handle-height);
     border-radius: 1.25rem;
@@ -305,9 +310,12 @@
     padding: 0.75rem 1rem;
     border-radius: var(--m3-slider-handle-shape);
 
-    left: var(--percent);
+    inset-inline-start: var(--percent);
     bottom: calc(var(--handle-height) + 4px);
     translate: -50% 0;
+    &:is(:global([dir="rtl"]) .value) {
+      translate: 50% 0;
+    }
 
     opacity: 0;
     pointer-events: none;

package/package/forms/TextField.svelte

@@ -86,7 +86,7 @@
   }
   label {
     position: absolute;
-    left: 1rem;
+    inset-inline-start: 1rem;
     top: 50%;
     translate: 0 -50%;
     color: rgb(var(--error, var(--m3-scheme-on-surface-variant)));
@@ -144,14 +144,13 @@
   }
   .m3-container > :global(.leading) {
     position: relative;
-    margin-left: 0.75rem;
+    margin-inline-start: 0.75rem;
   }
   .trailing {
     position: absolute;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
+    padding-inline: 0.75rem;
     height: 100%;
-    right: 0;
+    inset-inline-end: 0;
 
     display: flex;
     align-items: center;
@@ -171,13 +170,13 @@
   }
 
   .leading-icon > input {
-    padding-left: 3.25rem;
+    padding-inline-start: 3.25rem;
   }
   .leading-icon > label {
-    left: 3.25rem;
+    inset-inline-start: 3.25rem;
   }
   .trailing-icon > input {
-    padding-right: 3.25rem;
+    padding-inline-end: 3.25rem;
   }
   .error {
     --error: var(--m3-scheme-error);

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/nav/Tabs.svelte

@@ -99,19 +99,19 @@
     transition: var(--m3-util-easing-fast-spatial);
   }
   input:checked:nth-of-type(1) ~ .bar {
-    left: 0;
+    inset-inline-start: 0;
   }
   input:checked:nth-of-type(2) ~ .bar {
-    left: calc(100% / var(--items));
+    inset-inline-start: calc(100% / var(--items));
   }
   input:checked:nth-of-type(3) ~ .bar {
-    left: calc(100% / var(--items) * 2);
+    inset-inline-start: calc(100% / var(--items) * 2);
   }
   input:checked:nth-of-type(4) ~ .bar {
-    left: calc(100% / var(--items) * 3);
+    inset-inline-start: calc(100% / var(--items) * 3);
   }
   input:checked:nth-of-type(5) ~ .bar {
-    left: calc(100% / var(--items) * 4);
+    inset-inline-start: calc(100% / var(--items) * 4);
   }
   input:checked:nth-of-type(-n + 5) ~ .bar {
     height: 0.125rem;
@@ -135,8 +135,11 @@
     width: 3rem;
     height: 0.1875rem;
     border-radius: 0.1875rem 0.1875rem 0 0;
-    margin-left: calc(50% / var(--items));
-    transform: translateX(-50%);
+    margin-inline-start: calc(50% / var(--items));
+    translate: -50% 0;
+    &:is(:global([dir="rtl"]) .bar) {
+      translate: 50% 0;
+    }
   }
 
   .bar {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "5.2.1",
+  "version": "5.2.3",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -30,17 +30,17 @@
   },
   "dependencies": {
     "@iconify/types": "^2.0.0",
-    "@ktibow/iconset-material-symbols": "^0.0.1752989765",
-    "@ktibow/material-color-utilities-nightly": "^0.3.11753062248503",
-    "svelte": "^5.37.3"
+    "@ktibow/iconset-material-symbols": "^0.0.1754804347",
+    "@ktibow/material-color-utilities-nightly": "^0.3.11754876552597",
+    "svelte": "^5.38.0"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.3.1",
-    "@eslint/js": "^9.31.0",
-    "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.25.1",
-    "@sveltejs/package": "^2.4.0",
-    "@sveltejs/vite-plugin-svelte": "^6.1.0",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/js": "^9.33.0",
+    "@sveltejs/adapter-static": "^3.0.9",
+    "@sveltejs/kit": "^2.27.3",
+    "@sveltejs/package": "^2.4.1",
+    "@sveltejs/vite-plugin-svelte": "^6.1.1",
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.11.0",
@@ -49,11 +49,11 @@
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.12",
-    "svelte-check": "^4.3.0",
+    "svelte-check": "^4.3.1",
     "svelte-highlight": "^7.8.3",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.38.0",
-    "vite": "^7.0.5"
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.39.1",
+    "vite": "^7.1.1"
   },
   "keywords": [
     "svelte",

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>, {}, "">;