@shortfuse/materialdesignweb 0.7.6 → 0.8.0

package/mixins/RTLObserverMixin.js

@@ -8,7 +8,6 @@ let rtlObserver;
  */
 export default function RTLObserverMixin(Base) {
   return Base
-    .extend()
     .observe({
       pageIsRTL: {
         type: 'boolean',

package/mixins/ResizeObserverMixin.js

@@ -10,7 +10,6 @@ const resizeObserver = new ResizeObserver((entries) => {
  */
 export default function ResizeObserverMixin(Base) {
   return Base
-    .extend()
     .set({
       observeResizeOnConnected: true,
     })

package/mixins/RippleMixin.js

@@ -7,7 +7,6 @@ import Ripple from '../components/Ripple.js';
  */
 export default function RippleMixin(Base) {
   return Base
-    .extend()
     .set({
       /** @type {WeakRef<InstanceType<Ripple>>} */
       _lastRippleWeakRef: null,
@@ -42,7 +41,7 @@ export default function RippleMixin(Base) {
           // Reset before next event loop;
           this._rippleAdded = false;
         });
-        rippleContainer.appendChild(ripple);
+        rippleContainer.append(ripple);
         if (hold) {
           ripple.holdRipple = true;
         }
@@ -51,8 +50,8 @@ export default function RippleMixin(Base) {
         return ripple;
       },
     })
-    .html/* html */`
-      <div id=ripple-container _if={!disabledState} aria-hidden=true></div>
+    .html`
+      <div id=ripple-container mdw-if={!disabledState} aria-hidden=true></div>
     `
     .events({
       '~pointerdown'(event) {

package/mixins/ScrollListenerMixin.js

@@ -5,10 +5,12 @@ const IDLE_TIMEOUT_MS = 500;
  */
 export default function ScrollListenerMixin(Base) {
   return Base
-    .extend()
     .observe({
-      scrollListenerPositionX: { type: 'float', empty: 0, reflect: false },
-      scrollListenerPositionY: { type: 'float', empty: 0, reflect: false },
+      _scrollListenerPositionX: { type: 'float', empty: 0, reflect: false },
+      _scrollListenerPositionY: { type: 'float', empty: 0, reflect: false },
+      _scrollListenerLastIdle: { type: 'float', empty: 0 },
+      _scrollListenerLastScroll: { type: 'float', empty: 0 },
+      _scrollListenerLastResize: { type: 'float', empty: 0 },
     })
     .set({
       /** @type {WeakRef<EventTarget>} */
@@ -20,25 +22,29 @@ export default function ScrollListenerMixin(Base) {
       _scrollDebounce: null,
     })
     .methods({
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      onScrollIdle() {},
+      _scrollListenerOnScrollIdle() {
+        this._scrollListenerLastIdle = performance.now();
+      },
 
       /** @param {Event} event */
-      onScrollerScroll(event) {
-        this.scrollListenerPositionY = (event.currentTarget === window)
+      _scrollListenerOnScrollerScroll(event) {
+        this._scrollListenerPositionY = (event.currentTarget === window)
           ? window.scrollY
           : /** @type {HTMLElement} */ (event.currentTarget).scrollTop;
 
-        this.scrollListenerPositionX = (event.currentTarget === window)
+        this._scrollListenerPositionX = (event.currentTarget === window)
           ? window.scrollX
           : /** @type {HTMLElement} */ (event.currentTarget).scrollLeft;
 
+        this._scrollListenerLastScroll = performance.now();
         clearTimeout(this._scrollDebounce);
-        this._scrollDebounce = setTimeout(() => this.onScrollIdle(), IDLE_TIMEOUT_MS);
+        this._scrollDebounce = setTimeout(() => this._scrollListenerOnScrollIdle(), IDLE_TIMEOUT_MS);
       },
 
       /** @param {Event} event */
-      onScrollerResize(event) {},
+      _scrollListenerOnScrollerResize(event) {
+        this._scrollListenerLastResize = performance.now();
+      },
 
       /**
        * @param {EventTarget} [scroller]
@@ -54,42 +60,45 @@ export default function ScrollListenerMixin(Base) {
         }
 
         this._scroller = new WeakRef(scroller);
-        this._scrollerScrollListener = this.onScrollerScroll.bind(this);
-        this._scrollerResizeListener = this.onScrollerResize.bind(this);
-        scroller.addEventListener('scroll', this._scrollerScrollListener);
-        scroller.addEventListener('resize', this._scrollerResizeListener);
-        this.scrollListenerPositionX = 0;
-        this.scrollListenerPositionY = 0;
+        this._scrollerScrollListener = this._scrollListenerOnScrollerScroll.bind(this);
+        this._scrollerResizeListener = this._scrollListenerOnScrollerResize.bind(this);
+        scroller.addEventListener('scroll', this._scrollerScrollListener, { passive: true });
+        scroller.addEventListener('resize', this._scrollerResizeListener, { passive: true });
+        this._scrollListenerPositionX = 0;
+        this._scrollListenerPositionY = 0;
         return true;
       },
+    })
+    .define({
+      /** @return {Window|HTMLElement} */
+      _scrollListenerScroller() {
+        return this._scroller.deref();
+      },
+    })
+    .define({
 
-      getScrollingElementScrollHeight() {
-        const element = this.getScroller();
-        if (element === window) {
+      _scrollListenerScrollerScrollHeight() {
+        const scroller = this._scrollListenerScroller;
+        if (scroller === window) {
           return document.documentElement.scrollHeight;
         }
-        // @ts-expect-error Skip Element cast
-        return element.scrollHeight;
+        return scroller.scrollHeight;
       },
-
-      getScrollingElementClientHeight() {
-        const element = this.getScroller();
-        if (element === window) {
+      _scrollListenerScrollerClientHeight() {
+        const scroller = this._scrollListenerScroller;
+        if (scroller === window) {
           return window.innerHeight;
         }
         // @ts-expect-error Skip Element cast
-        return element.clientHeight;
-      },
-
-      getScroller() {
-        return this._scroller.deref();
+        return scroller.clientHeight;
       },
-
+    })
+    .methods({
       /**
        * @param {EventTarget} [scroller]
        * @return {boolean}
        */
-      clearScrollListener(scroller) {
+      _scrollListenerClear(scroller) {
         scroller ??= this._scroller?.deref();
         if (!scroller) return false;
         if (!this._scrollerScrollListener) return false;

package/mixins/SemiStickyMixin.js

@@ -0,0 +1,151 @@
+import { ELEMENT_STYLER_TYPE } from '../core/customTypes.js';
+
+import ScrollListenerMixin from './ScrollListenerMixin.js';
+
+/**
+ * Hides sticky element when scrolling down
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
+export default function SemiStickyMixin(Base) {
+  return Base
+    .mixin(ScrollListenerMixin)
+    .observe({
+      _semiStickyHeight: { type: 'float', empty: 0 },
+      _semiStickyOffsetY: { type: 'float', empty: 0 },
+      _semiStickyWidth: { type: 'float', empty: 0 },
+      _semiStickyOffsetX: { type: 'float', empty: 0 },
+      _semiStickyTranslateY: { type: 'float', empty: 0 },
+      _semiStickyTranslateX: { type: 'float', empty: 0 },
+      _semiStickyDuration: { type: 'float', empty: 0 },
+      _semiStickyEasing: { empty: 'ease-in' },
+      _semiStickyAnchor: {
+        /** @type {'top'|'start'|'end'|'bottom'|'left'|'right'} */
+        empty: 'top',
+      },
+      stickyAlways: 'boolean',
+    })
+    .methods({
+      /** @return {HTMLElement} */
+      _getSemiStickyElement() { return this; },
+      _refreshSemiStickyMetrics() {
+        const semiStickyElement = this._getSemiStickyElement();
+        this._semiStickyHeight = semiStickyElement.offsetHeight;
+        this._semiStickyWidth = semiStickyElement.offsetWidth;
+        // No way to measure offset when stickied ?
+        semiStickyElement.style.position = 'relative';
+        this._semiStickyOffsetY = semiStickyElement.offsetTop;
+        this._semiStickyOffsetX = semiStickyElement.offsetLeft;
+        semiStickyElement.style.position = 'sticky';
+      },
+    })
+    .observe({
+      _semiStickyStyleStyle: {
+        ...ELEMENT_STYLER_TYPE,
+        get({ _semiStickyTranslateX, _semiStickyTranslateY, _semiStickyDuration, _semiStickyEasing }) {
+          return {
+            target: this._getSemiStickyElement(),
+            styles: {
+              transform: `translateX(${_semiStickyTranslateX}px) translateY(${_semiStickyTranslateY}px)`,
+            },
+            timing: {
+              duration: _semiStickyDuration,
+              easing: _semiStickyEasing,
+            },
+          };
+        },
+      },
+    })
+    .on({
+      _scrollListenerLastResizeChanged() {
+        if (this._semiStickyAnchor !== 'bottom') return;
+        // Chrome Bug: When window resizes bottom sticky needs to be recomputed
+        // Force style recalculation
+        const semiStickyElement = this._getSemiStickyElement();
+        semiStickyElement.style.setProperty('bottom', 'auto');
+        // eslint-disable-next-line no-unused-expressions
+        semiStickyElement.clientHeight;
+        semiStickyElement.style.removeProperty('bottom');
+        this.propChangedCallback('_scrollListenerPositionY', this._scrollListenerPositionY, this._scrollListenerPositionY);
+      },
+      _scrollListenerPositionYChanged(oldValue, newValue) {
+        const delta = newValue - oldValue;
+        if (this._semiStickyAnchor === 'top') {
+          this._semiStickyDuration = 0;
+          this._semiStickyTranslateY = (this.stickyAlways || newValue < this._semiStickyOffsetY)
+            ? 0
+            : Math.min(0, Math.max(this._semiStickyTranslateY - delta, -this._semiStickyHeight));
+        } else if (this._semiStickyAnchor === 'bottom') {
+          this._semiStickyDuration = 0;
+          const anchor = this._scrollListenerScrollerClientHeight + newValue;
+          const distanceFromAnchor = this._semiStickyOffsetY - anchor;
+          this._semiStickyTranslateY = this.stickyAlways
+            ? 0
+            : Math.max(0, Math.min(
+              this._semiStickyTranslateY + delta,
+              this._semiStickyHeight + Math.min(0, distanceFromAnchor),
+            ));
+        }
+      },
+      _scrollListenerLastIdleChanged() {
+        if (this.stickyAlways) return;
+        this._refreshSemiStickyMetrics();
+        if (this._semiStickyAnchor === 'top') {
+          const { offsetTop } = this.refs.surface;
+          const offset = this._scrollListenerPositionY - offsetTop;
+          const delta = offset - this._semiStickyTranslateY;
+          const visibility = delta / this._semiStickyHeight;
+
+          if (visibility <= 0) return;
+          if (visibility >= 1) return;
+          if (visibility <= 0.5 || offsetTop < this._semiStickyHeight) {
+            // Reveal all
+            this._semiStickyDuration = 250;
+            this._semiStickyEasing = 'ease-in';
+            this._semiStickyTranslateY = 0;
+            // this._semiStickyHeadlineOpacity = 1;
+          } else {
+            this._semiStickyDuration = 200;
+            this._semiStickyEasing = 'ease-out';
+            // Don't hide past origin
+            this._semiStickyTranslateY = Math.max(
+              this._semiStickyOffsetY - this._scrollListenerPositionY,
+              -this._semiStickyHeight,
+            );
+          }
+        } else if (this._semiStickyAnchor === 'bottom') {
+          const max = this._semiStickyHeight;
+          const visibility = (max - this._semiStickyTranslateY) / max;
+          if (visibility <= 0) return;
+          if (visibility >= 1) return;
+          if (visibility >= 0.5) {
+            // Reveal all
+            this._semiStickyDuration = 250;
+            this._semiStickyEasing = 'ease-in';
+            this._semiStickyTranslateY = 0;
+            // this._semiStickyHeadlineOpacity = 1;
+          } else {
+            this._semiStickyDuration = 200;
+            this._semiStickyEasing = 'ease-out';
+            const anchor = this._scrollListenerScrollerClientHeight + this._scrollListenerPositionY;
+            const distanceFromAnchor = this._semiStickyOffsetY - anchor;
+            // Don't hide past origin
+            this._semiStickyTranslateY = this._semiStickyHeight + Math.min(0, distanceFromAnchor);
+          }
+        }
+      },
+      connected() {
+        const semiStickyElement = this._getSemiStickyElement();
+        // Connect scroll when element gets first size
+        const resizeObserver = new ResizeObserver(() => {
+          this.startScrollListener(semiStickyElement.offsetParent ?? window);
+          resizeObserver.disconnect();
+          this._refreshSemiStickyMetrics();
+        });
+        resizeObserver.observe(semiStickyElement);
+        this._refreshSemiStickyMetrics();
+      },
+      disconnected() {
+        this._scrollListenerClear();
+      },
+    });
+}

package/mixins/ShapeMixin.js

@@ -3,7 +3,6 @@
  */
 export default function ShapeMixin(Base) {
   return Base
-    .extend()
     .observe({
       shapeTop: 'boolean',
       shapeBottom: 'boolean',
@@ -12,9 +11,11 @@ export default function ShapeMixin(Base) {
       shapeStyle: 'string',
       outlined: 'boolean',
     })
-    .html/* html */`
-      <div id=shape part=shape class=shape elevated={elevated} shape-top={shapeTop} shape-bottom={shapeBottom} shape-start={shapeStart} shape-end={shapeEnd} shape-style={shapeStyle} color={color} outlined={outlined} disabled={disabledState}>
-        <div id=outline _if={outlined} class=outline disabled={disabledState} focused={focusedState} pressed={pressedState} hovered={hoveredState}>
+    .html`
+      <div id=shape part=shape class=shape elevated={elevated} 
+        shape-top={shapeTop} shape-bottom={shapeBottom} shape-start={shapeStart} shape-end={shapeEnd} shape-style={shapeStyle}
+        color={color} outlined={outlined} disabled={disabledState}>
+        <div id=outline mdw-if={outlined} class=outline disabled={disabledState} focused={focusedState} pressed={pressedState} hovered={hoveredState}>
           <div id=outline-left class="outline-section outline-left"></div>
           <div id=outline-right class="outline-section outline-right"></div>
         </div>
@@ -25,77 +26,81 @@ export default function ShapeMixin(Base) {
         --mdw-shape__size: 0px;
         --mdw-shape__bg: transparent;
         --mdw-surface__will-change: none;
+        --mdw-shape__ltr: calc(0.5 * var(--mdw-dir, 1) + 0.5); /* 1 if LTR, 0 if RTL */
+        --mdw-shape__rtl: calc(-0.5 * var(--mdw-dir, 1) + 0.5); /* 0 if LTR, 1 if RTL */
+
+        /** By default, fallback to border-radius */
+        --mdw-shape__rounded: 1;
+        --mdw-shape__inline-start-deg: calc(var(--mdw-dir, 1) * -90deg);
+        z-index: 0;
+      }
+
+      .shape {
         --mdw-shape__size__top-start-size: var(--mdw-shape__size);
         --mdw-shape__size__top-end-size: var(--mdw-shape__size);
         --mdw-shape__size__bottom-start-size: var(--mdw-shape__size);
         --mdw-shape__size__bottom-end-size: var(--mdw-shape__size);
       
         /* (1/2n + 1/2)L + (-1/2n + 1/2)R  */
-        --mdw-shape__ltr: calc(0.5 * var(--mdw-dir, 1) + 0.5); /* 1 if LTR, 0 if RTL */
-        --mdw-shape__rtl: calc(-0.5 * var(--mdw-dir, 1) + 0.5); /* 0 if LTR, 1 if RTL */
+        
         --mdw-shape__size__top-left-size: calc((var(--mdw-shape__ltr) * var(--mdw-shape__size__top-start-size)) + (var(--mdw-shape__rtl) * var(--mdw-shape__size__top-end-size)));
         --mdw-shape__size__top-right-size: calc((var(--mdw-shape__rtl) * var(--mdw-shape__size__top-start-size)) + (var(--mdw-shape__ltr) * var(--mdw-shape__size__top-end-size)));
         --mdw-shape__size__bottom-left-size: calc((var(--mdw-shape__ltr) * var(--mdw-shape__size__bottom-start-size)) + (var(--mdw-shape__rtl) * var(--mdw-shape__size__bottom-end-size)));
         --mdw-shape__size__bottom-right-size: calc((var(--mdw-shape__rtl) * var(--mdw-shape__size__bottom-start-size)) + (var(--mdw-shape__ltr) * var(--mdw-shape__size__bottom-end-size)));
       
-        /** By default, fallback to border-radius */
-        --mdw-shape__rounded: 1;
-        --mdw-shape__inline-start-deg: calc(var(--mdw-dir, 1) * -90deg);
-        z-index: 0;
       }
 
-      :host([shape-style="none"]) {
+      .shape[shape-style="none"] {
         --mdw-shape__size: 0px;
       }
       
-      :host([shape-style="extra-small"]) {
+      .shape[shape-style="extra-small"] {
         --mdw-shape__size: var(--mdw-shape__extra-small);
       }
       
-      :host([shape-style="small"]) {
+      .shape[shape-style="small"] {
         --mdw-shape__size: var(--mdw-shape__small);
       }
       
-      :host([shape-style="medium"]) {
+      .shape[shape-style="medium"] {
         --mdw-shape__size: var(--mdw-shape__medium);
       }
       
-      :host([shape-style="large"]) {
+      .shape[shape-style="large"] {
         --mdw-shape__size: var(--mdw-shape__large);
       }
       
-      :host([shape-style="extra-large"]) {
+      .shape[shape-style="extra-large"] {
         --mdw-shape__size: var(--mdw-shape__extra-large);
       }
       
-      :host([shape-style="full"]) {
+      .shape[shape-style="full"] {
         --mdw-shape__size: var(--mdw-shape__full);
       }
       
-      :host([shape-style="inherit"]) {
+      .shape[shape-style="inherit"] {
         --mdw-shape__size: inherit;
       }
       
-      :host([shape-top]) {
+      .shape[shape-top] {
         --mdw-shape__size__bottom-start-size: 0px;
         --mdw-shape__size__bottom-end-size: 0px;
         --mdw-shape__mask: linear-gradient(transparent 50%, black 50%);
-      
       }
       
-      :host([shape-bottom]) {
+      .shape[shape-bottom] {
         --mdw-shape__size__top-start-size: 0px;
         --mdw-shape__size__top-end-size: 0px;
         --mdw-shape__mask: linear-gradient(black 50%, transparent 50%);
       }
       
-      :host([shape-start]) {
+      .shape[shape-start] {
         --mdw-shape__size__top-end-size: 0px;
         --mdw-shape__size__bottom-end-size: 0px;
         --mdw-shape__mask: linear-gradient(var(--mdw-shape__inline-start-deg), black 50%, transparent 50%);
       }
       
-      :host([shape-end]) {
+      .shape[shape-end] {
         --mdw-shape__size__top-start-size: 0px;
         --mdw-shape__size__bottom-start-size: 0px;
         --mdw-shape__mask: linear-gradient(var(--mdw-shape__inline-start-deg), transparent 50%, black 50%);
@@ -130,7 +135,7 @@ export default function ShapeMixin(Base) {
         will-change: background-color, color;
       
       }
-      
+
       .shape[outlined] {
         background-color: transparent;
       }

package/mixins/StateMixin.js

@@ -7,9 +7,14 @@ let lastInteractionWasTouch = window?.matchMedia?.('(any-pointer: coarse)').matc
  */
 export default function StateMixin(Base) {
   return Base
-    .extend()
     .observe({
       disabled: 'boolean',
+      /** Force focus state (independent of document) */
+      focused: 'boolean',
+      /** Force hover state (independent of interaction) */
+      hovered: 'boolean',
+      /** Force pressed state (independent of interaction) */
+      pressed: 'boolean',
       _lastInteraction: {
         /** @type {'mouse'|'touch'|'key'|'pen'|null} */
         value: null,
@@ -21,9 +26,9 @@ export default function StateMixin(Base) {
     })
     .observe({
       disabledState({ disabled }) { return disabled; },
-      hoveredState({ _hovered }) { return _hovered; },
-      focusedState({ _focused }) { return _focused; },
-      pressedState({ _pressed }) { return _pressed; },
+      hoveredState({ _hovered, hovered }) { return _hovered || hovered; },
+      focusedState({ _focused, focused }) { return _focused || focused; },
+      pressedState({ _pressed, pressed }) { return _pressed || pressed; },
       touchedState({ _lastInteraction }) {
         return _lastInteraction === 'touch';
       },
@@ -31,8 +36,8 @@ export default function StateMixin(Base) {
     .define({
       stateTargetElement() { return this; },
     })
-    .html/* html */`
-      <div id=state _if={stateLayer}
+    .html`
+      <div id=state mdw-if={stateLayer}
         disabled={disabledState}
         focused={focusedState}
         hovered={hoveredState}

package/mixins/SurfaceMixin.js

@@ -3,7 +3,6 @@
  */
 export default function SurfaceMixin(Base) {
   return Base
-    .extend()
     .observe({
       elevated: 'boolean',
       elevation: 'integer',
@@ -14,17 +13,8 @@ export default function SurfaceMixin(Base) {
         },
       },
     })
-    .expressions({
-      showSurfaceTint({ elevated, elevation, disabledState, color }) {
-        return (elevated || elevation !== null)
-          && !disabledState
-          && (!color || color.includes('surface'));
-      },
-    })
-    .html/* html */`
-      <div id=surface class=surface raised={_raised} disabled={disabledState} color={color}>
-        <div _if={showSurfaceTint} id=surface-tint class=surface-tint raised={_raised} color={color} aria-hidden=true></div>
-      </div>
+    .html`
+      <div id=surface class=surface raised={_raised} disabled={disabledState} color={color}></div>
     `
     .css`
       :host {
@@ -74,54 +64,39 @@ export default function SurfaceMixin(Base) {
         --mdw-surface__shadow__3: drop-shadow(0px 1px 1.5px rgba(0,0,0,0.3)) drop-shadow(0px 4px 007px rgba(0,0,0,0.263));
         --mdw-surface__shadow__4: drop-shadow(0px 2px 1.5px rgba(0,0,0,0.3)) drop-shadow(0px 6px 009px rgba(0,0,0,0.270));
         --mdw-surface__shadow__5: drop-shadow(0px 4px 2.0px rgba(0,0,0,0.3)) drop-shadow(0px 8px 012px rgba(0,0,0,0.300));
-      
-        --mdw-surface__tint__1: 0.05;
-        --mdw-surface__tint__2: 0.08;
-        --mdw-surface__tint__3: 0.11;
-        --mdw-surface__tint__4: 0.12;
-        --mdw-surface__tint__5: 0.14;
-      
+
         /** Configurables */
       
         --mdw-surface__shadow__resting: none;
         --mdw-surface__shadow: var(--mdw-surface__shadow__resting);
-        --mdw-surface__tint: 0;
-        --mdw-surface__tint__raised: 0;
         z-index: 0;
       }
       
       :host([elevation="0"]) {
-        --mdw-surface__tint: 0;
         --mdw-surface__shadow__resting: none;
       }
       
       :host([elevation="1"]) {
-        --mdw-surface__tint: var(--mdw-surface__tint__1);
         --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
       }
       
       :host([elevation="2"]) {
-        --mdw-surface__tint: var(--mdw-surface__tint__2);
         --mdw-surface__shadow__resting: var(--mdw-surface__shadow__2);
       }
       
       :host([elevation="3"]) {
-        --mdw-surface__tint: var(--mdw-surface__tint__3);
         --mdw-surface__shadow__resting: var(--mdw-surface__shadow__3);
       }
       
       :host([elevation="4"]) {
-        --mdw-surface__tint: var(--mdw-surface__tint__4);
         --mdw-surface__shadow__resting: var(--mdw-surface__shadow__4);
       }
       
       :host([elevation="5"]) {
-        --mdw-surface__tint: var(--mdw-surface__tint__5);
         --mdw-surface__shadow__resting: var(--mdw-surface__shadow__5);
       }
       
       :host([elevation]) {
-        --mdw-surface__tint__raised: var(--mdw-surface__tint);
         --mdw-surface__shadow__raised: var(--mdw-surface__shadow__resting);
       }
       
@@ -148,34 +123,5 @@ export default function SurfaceMixin(Base) {
       .surface[disabled] {
         filter:none;
       }
-      
-      .surface-tint {
-        position: absolute;
-        inset: 0;
-      
-        pointer-events: none;
-      
-        opacity: var(--mdw-surface__tint, 0);
-      
-        background-color: rgb(var(--mdw-color__primary));
-        border-radius: inherit;
-      
-        transition-delay: 1ms;
-        transition-duration: 200ms;
-        transition-property: opacity;
-        will-change: opacity;
-      }
-      
-      .surface-tint[raised] {
-        opacity: var(--mdw-surface__tint__raised, 0);
-      }
-      
-      .surface-tint[pressed] {
-        opacity: var(--mdw-surface__tint, 0);
-      }
-      
-      .surface-tint[color]:not([color|="surface"]) {
-        display: none;
-      }    
     `;
 }