feat: updated Floating Label for MDC v10

packages/floating-label/FloatingLabel.svelte

@@ -7,9 +7,21 @@
       [className]: true,
       'mdc-floating-label': true,
       'mdc-floating-label--float-above': floatAbove,
+      'mdc-floating-label--required': required,
+      ...internalClasses,
     })}
-    {...exclude($$props, ['use', 'class', 'floatAbove', 'wrapped'])}
-    ><slot /></span
+    style={Object.entries(internalStyles)
+      .map(([name, value]) => `${name}: ${value};`)
+      .concat([style])
+      .join(' ')}
+    {...exclude($$props, [
+      'use',
+      'class',
+      'style',
+      'floatAbove',
+      'required',
+      'wrapped',
+    ])}><slot /></span
   >
 {:else}
   <label
@@ -20,58 +32,143 @@
       [className]: true,
       'mdc-floating-label': true,
       'mdc-floating-label--float-above': floatAbove,
+      'mdc-floating-label--required': required,
+      ...internalClasses,
     })}
+    style={Object.entries(internalStyles)
+      .map(([name, value]) => `${name}: ${value};`)
+      .concat([style])
+      .join(' ')}
     {...forId || (inputProps && inputProps.id)
       ? { for: forId || (inputProps && inputProps.id) }
       : {}}
-    {...exclude($$props, ['use', 'class', 'for', 'floatAbove', 'wrapped'])}
-    ><slot /></label
+    {...exclude($$props, [
+      'use',
+      'class',
+      'style',
+      'for',
+      'floatAbove',
+      'required',
+      'wrapped',
+    ])}><slot /></label
   >
 {/if}
 
 <script>
-  import { MDCFloatingLabel } from '@material/floating-label';
-  import { onMount, onDestroy, getContext } from 'svelte';
+  import { MDCFloatingLabelFoundation } from '@material/floating-label';
+  import { estimateScrollWidth } from '@material/dom/ponyfill';
+  import { onMount, getContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
   import {
     forwardEventsBuilder,
     classMap,
     exclude,
     useActions,
+    dispatch,
   } from '@smui/common/internal.js';
 
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    'SMUI:floating-label:mount',
+    'SMUI:floating-label:unmount',
+  ]);
 
   export let use = [];
   let className = '';
   export { className as class };
+  export let style = '';
   let forId = '';
   export { forId as for };
   export let floatAbove = false;
+  export let required = false;
   export let wrapped = false;
 
   let element;
-  let floatingLabel;
+  let instance;
+  let internalClasses = {};
+  let internalStyles = {};
   let inputProps = getContext('SMUI:generic:input:props') || {};
 
+  let previousFloatAbove = floatAbove;
+  $: if (previousFloatAbove !== floatAbove) {
+    previousFloatAbove = floatAbove;
+    instance.float(floatAbove);
+  }
+
+  let previousRequired = required;
+  $: if (previousRequired !== required) {
+    previousRequired = required;
+    instance.setRequired(required);
+  }
+
   onMount(() => {
-    floatingLabel = new MDCFloatingLabel(element);
-  });
+    instance = new MDCFloatingLabelFoundation({
+      addClass,
+      removeClass,
+      getWidth: () => estimateScrollWidth(getElement()),
+      registerInteractionHandler: (evtType, handler) =>
+        getElement().addEventListener(evtType, handler),
+      deregisterInteractionHandler: (evtType, handler) =>
+        getElement().removeEventListener(evtType, handler),
+    });
 
-  onDestroy(() => {
-    floatingLabel && floatingLabel.destroy();
+    const accessor = {
+      get element() {
+        return getElement();
+      },
+      addStyle,
+      removeStyle,
+    };
+
+    dispatch(element, 'SMUI:floating-label:mount', accessor);
+
+    instance.init();
+
+    return () => {
+      dispatch(element, 'SMUI:floating-label:unmount', accessor);
+
+      instance.destroy();
+    };
   });
 
-  export function shake(shouldShake, ...args) {
-    return floatingLabel.shake(shouldShake, ...args);
+  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;
+    }
+  }
+
+  function removeStyle(name) {
+    if (name in internalStyles) {
+      delete internalStyles[name];
+      internalStyles = internalStyles;
+    }
+  }
+
+  export function shake(shouldShake) {
+    instance.shake(shouldShake);
+  }
+
+  export function float(shouldFloat) {
+    floatAbove = shouldFloat;
   }
 
-  export function float(shouldFloat, ...args) {
-    return floatingLabel.float(shouldFloat, ...args);
+  export function setRequired(isRequired) {
+    required = isRequired;
   }
 
-  export function getWidth(...args) {
-    return floatingLabel.getWidth(...args);
+  export function getWidth() {
+    return instance.getWidth();
   }
 
   export function getElement() {

packages/floating-label/_index.scss

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

packages/floating-label/_style.scss

@@ -1 +1 @@
-@import "@material/floating-label/mdc-floating-label";
+@use '@material/floating-label/mdc-floating-label';