feat: updated Line Ripple for MDC v10

packages/line-ripple/LineRipple.svelte

@@ -6,13 +6,18 @@
     [className]: true,
     'mdc-line-ripple': true,
     'mdc-line-ripple--active': active,
+    ...internalClasses,
   })}
-  {...exclude($$props, ['use', 'class', 'active'])}
+  style={Object.entries(internalStyles)
+    .map(([name, value]) => `${name}: ${value};`)
+    .concat([style])
+    .join(' ')}
+  {...exclude($$props, ['use', 'class', 'style', 'active'])}
 />
 
 <script>
-  import { MDCLineRipple } from '@material/line-ripple';
-  import { onMount, onDestroy } from 'svelte';
+  import { MDCLineRippleFoundation } from '@material/line-ripple';
+  import { onMount } from 'svelte';
   import { get_current_component } from 'svelte/internal';
   import {
     forwardEventsBuilder,
@@ -26,29 +31,67 @@
   export let use = [];
   let className = '';
   export { className as class };
+  export let style = '';
   export let active = false;
 
   let element;
-  let lineRipple;
+  let instance;
+  let internalClasses = {};
+  let internalStyles = {};
 
   onMount(() => {
-    lineRipple = new MDCLineRipple(element);
-  });
+    instance = new MDCLineRippleFoundation({
+      addClass,
+      removeClass,
+      hasClass,
+      setStyle: addStyle,
+      registerEventHandler: (evtType, handler) =>
+        getElement().addEventListener(evtType, handler),
+      deregisterEventHandler: (evtType, handler) =>
+        getElement().removeEventListener(evtType, handler),
+    });
+
+    instance.init();
 
-  onDestroy(() => {
-    lineRipple && lineRipple.destroy();
+    return () => {
+      instance.destroy();
+    };
   });
 
-  export function activate(...args) {
-    return lineRipple.activate(...args);
+  function hasClass(className) {
+    return className in internalClasses
+      ? internalClasses[className]
+      : getElement().classList.contains(className);
+  }
+
+  function addClass(className) {
+    if (!internalClasses[className]) {
+      internalClasses[className] = true;
+    }
+  }
+
+  function removeClass(className) {
+    if (!(className in internalClasses) || internalClasses[className]) {
+      internalClasses[className] = false;
+    }
+  }
+
+  function addStyle(name, value) {
+    if (internalStyles[name] !== value) {
+      internalStyles[name] = value;
+    }
+  }
+
+  export function activate() {
+    instance.activate();
   }
 
-  export function deactivate(...args) {
-    return lineRipple.deactivate(...args);
+  export function deactivate() {
+    instance.deactivate();
   }
 
-  export function setRippleCenter(xCoordinate, ...args) {
-    return lineRipple.setRippleCenter(xCoordinate, ...args);
+  export function setRippleCenter(xCoordinate) {
+    instance.setRippleCenter(xCoordinate);
   }
 
   export function getElement() {

packages/line-ripple/_index.scss

@@ -1,2 +1,2 @@
-@import "smui-theme";
-@import "./style";
+@use 'smui-theme';
+@use './style';

packages/line-ripple/_style.scss

@@ -1 +1 @@
-@import "@material/line-ripple/mdc-line-ripple";
+@use '@material/line-ripple/mdc-line-ripple';