fix: small fixes for MDC 4

MIGRATING.md

@@ -14,3 +14,5 @@ https://github.com/material-components/material-components-web/blob/master/CHANG
   - `enchanced` prop is removed. All selects are enhanced now.
   - `selected` prop on Option is no longer required and probably should not be used.
   - You now need to pass a class into `anchor$class` and `menu$class` with a width value set.
+- Button
+  - No longer has a `dense` prop. Use the mixin from MDC.

packages/button/Button.svelte

@@ -8,7 +8,6 @@
     {variant === 'raised' ? 'mdc-button--raised' : ''}
     {variant === 'unelevated' ? 'mdc-button--unelevated' : ''}
     {variant === 'outlined' ? 'mdc-button--outlined' : ''}
-    {dense ? 'mdc-button--dense' : ''}
     {color === 'secondary' ? 'smui-button--color-secondary' : ''}
     {context === 'card:action' ? 'mdc-card__action' : ''}
     {context === 'card:action' ? 'mdc-card__action--button' : ''}
@@ -19,7 +18,7 @@
   "
   {...actionProp}
   {...defaultProp}
-  {...exclude($$props, ['use', 'class', 'ripple', 'color', 'variant', 'dense', 'component', ...dialogExcludes])}
+  {...exclude($$props, ['use', 'class', 'ripple', 'color', 'variant', 'component', ...dialogExcludes])}
 >{#if ripple}<div class="mdc-button__ripple"></div>{/if}<slot></slot></svelte:component>
 
 <script>
@@ -39,7 +38,6 @@
   export let ripple = true;
   export let color = 'primary';
   export let variant = 'text';
-  export let dense = false;
   // Purposely left out of props exclude.
   export let href = null;
   export let action = 'close';

packages/button/_mixins.scss

@@ -44,13 +44,17 @@
     }
 
     & > .mdc-button:not(:last-child),
-    & > .smui-button__group-item:not(:last-child) > .mdc-button {
+    & > .mdc-button:not(:last-child) > .mdc-button__ripple,
+    & > .smui-button__group-item:not(:last-child) > .mdc-button,
+    & > .smui-button__group-item:not(:last-child) > .mdc-button > .mdc-button__ripple {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
 
     & > .mdc-button:not(:first-child),
-    & > .smui-button__group-item:not(:first-child) > .mdc-button {
+    & > .mdc-button:not(:first-child) > .mdc-button__ripple,
+    & > .smui-button__group-item:not(:first-child) > .mdc-button,
+    & > .smui-button__group-item:not(:first-child) > .mdc-button > .mdc-button__ripple {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }

packages/select/_mixins.scss

@@ -1,5 +1,6 @@
 @import "@material/select/mixins";
 @import "@material/ripple/mixins";
+@import "@material/theme/mixins";
 @import "@material/rtl/mixins";
 @import "@material/feature-targeting/functions";
 
@@ -12,6 +13,11 @@
     @include mdc-states-base-color(transparent);
     @include mdc-select-container-fill-color(transparent);
 
+    .mdc-select__anchor:after,
+    .mdc-select__anchor:before {
+      @include mdc-theme-prop(background-color, transparent);
+    }
+
     &.mdc-select--disabled {
       @include mdc-select-container-fill-color_(transparent);
     }