feat: migrate switch to new mdc-web version

Author: hperrin

MIGRATING.md

@@ -7,6 +7,14 @@ This doc contains information that will help you migrate your code from an older
 SMUI 6 migrated to upstream MDC 13.0 from 11.0:
 https://github.com/material-components/material-components-web/blob/master/CHANGELOG.md#1300-2021-09-24
 
+## Changes
+
+### Components
+
+- Switch
+  - No longer needs `valueKey` prop.
+  - Default color is now "primary".
+
 # SMUI 4 -> SMUI 5
 
 ## Breaking Changes
@@ -45,7 +53,7 @@ You should update your MDC dependencies to 11.0 as well.
 
 ## New Features
 
-### Compoennts
+### Components
 
 - Banner
   - Add focus trap on the banner.

packages/ripple/Ripple.ts

@@ -13,6 +13,7 @@ export type RippleProps = {
   color?: 'primary' | 'secondary';
   /** Whether the ripple is active. Leave null to determine automatically. */
   active?: boolean;
+  rippleElement?: HTMLElement;
   eventTarget?: HTMLElement;
   activeTarget?: HTMLElement;
   addClass?: (className: string) => void;
@@ -30,6 +31,7 @@ export default function Ripple(
     disabled = false,
     color,
     active,
+    rippleElement,
     eventTarget,
     activeTarget,
     addClass = (className) => node.classList.add(className),
@@ -77,7 +79,8 @@ export default function Ripple(
       instance = new MDCRippleFoundation({
         addClass,
         browserSupportsCssVars: () => util.supportsCssVariables(window),
-        computeBoundingRect: () => node.getBoundingClientRect(),
+        computeBoundingRect: () =>
+          (rippleElement || node).getBoundingClientRect(),
         containsEventTarget: (target) => node.contains(target as Node),
         deregisterDocumentInteractionHandler: (evtType, handler) =>
           document.documentElement.removeEventListener(
@@ -177,6 +180,7 @@ export default function Ripple(
         disabled,
         color,
         active,
+        rippleElement,
         eventTarget,
         activeTarget,
         addClass,
@@ -190,6 +194,7 @@ export default function Ripple(
         disabled: false,
         color: undefined,
         active: undefined,
+        rippleElement: undefined,
         eventTarget: undefined,
         activeTarget: undefined,
         addClass: (className) => node.classList.add(className),

packages/site/src/routes/demo/switch/_PrimaryColor.svelte renamed to packages/site/src/routes/demo/switch/_SecondaryColor.svelte

@@ -1,6 +1,6 @@
 <div>
   <FormField>
-    <Switch color="primary" bind:checked={checked1} />
+    <Switch color="secondary" bind:checked={checked1} />
     <span slot="label">Fields of grain.</span>
   </FormField>
 </div>
@@ -9,7 +9,7 @@
 
 <div style="margin-top: 1em;">
   <FormField align="end">
-    <Switch color="primary" bind:checked={checked2} />
+    <Switch color="secondary" bind:checked={checked2} />
     <span slot="label">Fields of grain.</span>
   </FormField>
 </div>

packages/site/src/routes/demo/switch/index.svelte

@@ -9,8 +9,8 @@
 
   <Demo component={Simple} file="switch/_Simple.svelte" />
 
-  <Demo component={PrimaryColor} file="switch/_PrimaryColor.svelte">
-    Primary color
+  <Demo component={SecondaryColor} file="switch/_SecondaryColor.svelte">
+    Secondary color
   </Demo>
 
   <Demo component={Group} file="switch/_Group.svelte">Group switch</Demo>
@@ -20,6 +20,6 @@
   import Demo from '$lib/Demo.svelte';
 
   import Simple from './_Simple.svelte';
-  import PrimaryColor from './_PrimaryColor.svelte';
+  import SecondaryColor from './_SecondaryColor.svelte';
   import Group from './_Group.svelte';
 </script>