@shortfuse/materialdesignweb 0.8.0 → 0.9.0

package/mixins/RippleMixin.js

@@ -67,8 +67,8 @@ export default function RippleMixin(Base) {
         if (lastRipple) {
           lastRipple.holdRipple = false;
         }
-        console.debug('ripple from pointerdown');
-        this.addRipple(x, y);
+        // Ripple from pointerdown
+        this.addRipple(x, y, true);
       },
       '~click'(e) {
         if (this._rippleAdded) {
@@ -77,17 +77,17 @@ export default function RippleMixin(Base) {
         }
         if (e.pointerType || e.detail) return;
         if (this.disabledState) return;
-        if (this._pressed) return;
+        if (this.pressedState || this._keyReleased) return;
         const lastRipple = this._lastRipple;
         if (lastRipple) {
           lastRipple.holdRipple = false;
         }
-        console.debug('ripple from programmatic click');
+        // Ripple from programmatic click
         this.addRipple();
       },
     })
     .on({
-      _pressedChanged(oldValue, pressed) {
+      pressedStateChanged(oldValue, pressed) {
         const ripple = this._lastRipple;
         if (!pressed) {
           if (ripple) {
@@ -100,7 +100,7 @@ export default function RippleMixin(Base) {
             // Sometimes pointer events may be out of order
             return;
           }
-          console.debug('ripple from press state');
+          // Ripple from pressed state
           this.addRipple(null, null, true);
           return;
         }
@@ -120,6 +120,8 @@ export default function RippleMixin(Base) {
         overflow: hidden;
       
         pointer-events: none;
+
+        border-radius: inherit;
       }
     `;
 }

package/mixins/ScrollListenerMixin.js

@@ -51,7 +51,7 @@ export default function ScrollListenerMixin(Base) {
        * @return {boolean}
        */
       startScrollListener(scroller) {
-        scroller ??= this.offsetParent;
+        scroller ??= window;
         if (!scroller) return false;
 
         if (scroller === document.body) {

package/mixins/SemiStickyMixin.js

@@ -1,4 +1,4 @@
-import { ELEMENT_STYLER_TYPE } from '../core/customTypes.js';
+import { ELEMENT_ANIMATION_TYPE } from '../core/customTypes.js';
 
 import ScrollListenerMixin from './ScrollListenerMixin.js';
 
@@ -12,40 +12,33 @@ export default function SemiStickyMixin(Base) {
     .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',
-      },
+      _semiStickyMeasured: 'boolean',
       stickyAlways: 'boolean',
+      /** Stick to offsetParent instead of window */
+      stickyParent: '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';
+        const styles = window.getComputedStyle(this);
+        this._semiStickyHeight = this.offsetHeight
+          + Number.parseFloat(styles.marginTop) + Number.parseFloat(styles.marginBottom);
+        this._semiStickyOffsetY = Number.parseFloat(styles.marginTop);
+        this._semiStickyMeasured = true;
       },
     })
     .observe({
       _semiStickyStyleStyle: {
-        ...ELEMENT_STYLER_TYPE,
-        get({ _semiStickyTranslateX, _semiStickyTranslateY, _semiStickyDuration, _semiStickyEasing }) {
+        ...ELEMENT_ANIMATION_TYPE,
+        get({
+          _semiStickyMeasured, _semiStickyTranslateY, _semiStickyDuration, _semiStickyEasing,
+        }) {
+          if (!_semiStickyMeasured) return null;
           return {
-            target: this._getSemiStickyElement(),
             styles: {
-              transform: `translateX(${_semiStickyTranslateX}px) translateY(${_semiStickyTranslateY}px)`,
+              transform: `translateY(${_semiStickyTranslateY}px)`,
             },
             timing: {
               duration: _semiStickyDuration,
@@ -56,93 +49,46 @@ export default function SemiStickyMixin(Base) {
       },
     })
     .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),
-            ));
+        if (!this._semiStickyMeasured) {
+          this._refreshSemiStickyMetrics();
         }
+        this._semiStickyDuration = 0;
+        // 0 if disabled or if has not scroll passed height
+        // Valid range = -100% < x < 0
+        this._semiStickyTranslateY = (this.stickyAlways || newValue < this._semiStickyOffsetY)
+          ? 0
+          : Math.min(Math.max(-this._semiStickyHeight, this._semiStickyTranslateY - delta), 0);
       },
       _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;
+        const offsetTop = this.offsetTop;
+        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);
-          }
+        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,
+          );
         }
       },
       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();
+        this.startScrollListener(this.stickyParent ? this.offsetParent : window);
       },
       disconnected() {
         this._scrollListenerClear();

package/mixins/ShapeMaskedMixin.js

@@ -0,0 +1,117 @@
+/** @param {typeof import('../core/CustomElement.js').default} Base */
+export default function ShapeMaskedMixin(Base) {
+  return Base
+    .observe({
+      shapeTop: 'boolean',
+      shapeBottom: 'boolean',
+      shapeStart: 'boolean',
+      shapeEnd: 'boolean',
+      shapeStyle: 'string',
+    })
+    .css`
+    :host {
+      --mdw-shape__size: 0px;
+      --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__mask: none;
+
+      /** By default, fallback to border-radius */
+      --mdw-shape__rounded: 1;
+      --mdw-shape__inline-start-deg: calc(var(--mdw-dir, 1) * -90deg);
+
+      --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__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)));
+
+      border-start-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-start-size));
+      border-start-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-end-size));
+      border-end-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-start-size));
+      border-end-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-end-size));
+    }
+
+    :host([shape-style="none"]) {
+      --mdw-shape__size: 0px;
+    }
+    
+    :host([shape-style="extra-small"]) {
+      --mdw-shape__size: var(--mdw-shape__extra-small);
+    }
+    
+    :host([shape-style="small"]) {
+      --mdw-shape__size: var(--mdw-shape__small);
+    }
+    
+    :host([shape-style="medium"]) {
+      --mdw-shape__size: var(--mdw-shape__medium);
+    }
+    
+    :host([shape-style="large"]) {
+      --mdw-shape__size: var(--mdw-shape__large);
+    }
+    
+    :host([shape-style="extra-large"]) {
+      --mdw-shape__size: var(--mdw-shape__extra-large);
+    }
+    
+    :host([shape-style="full"]) {
+      --mdw-shape__size: var(--mdw-shape__full);
+    }
+    
+    :host([shape-style="inherit"]) {
+      --mdw-shape__size: inherit;
+    }
+    
+    :host([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]) {
+      --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]) {
+      --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]) {
+      --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%);
+    }
+
+    @supports(-webkit-mask-box-image: none) {
+      :host {
+        /* Inherit all the way up to :root */
+        --mdw-shape__rounded: inherit;
+      }
+    }
+
+    @supports(-webkit-mask-box-image: none) {
+      :host {
+        -webkit-mask-box-image: var(--mdw-shape__mask-border-source)
+          8 fill /
+          var(--mdw-shape__size)
+          stretch;
+
+        -webkit-mask: var(--mdw-shape__mask);
+
+        transition-duration: 200ms;
+        transition-property: -webkit-mask-box-image-width;
+        will-change: -webkit-mask-box-image;
+      }
+    }
+  `;
+}

package/mixins/ShapeMixin.js

@@ -12,162 +12,95 @@ export default function ShapeMixin(Base) {
       outlined: 'boolean',
     })
     .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>
-      </div>
+      <div id=outline mdw-if={outlined} class=outline disabled={disabledState} focused={focusedState} pressed={pressedState} hovered={hoveredState}></div>
     `
     .css`
       :host {
         --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__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)));
-      
+        z-index: 0;
+
+        border-start-start-radius: calc(var(--mdw-shape__size__top-start-size));
+        border-start-end-radius: calc(var(--mdw-shape__size__top-end-size));
+        border-end-start-radius: calc(var(--mdw-shape__size__bottom-start-size));
+        border-end-end-radius: calc(var(--mdw-shape__size__bottom-end-size));
       }
 
-      .shape[shape-style="none"] {
+      :host([shape-style="none"]) {
         --mdw-shape__size: 0px;
       }
       
-      .shape[shape-style="extra-small"] {
+      :host([shape-style="extra-small"]) {
         --mdw-shape__size: var(--mdw-shape__extra-small);
       }
       
-      .shape[shape-style="small"] {
+      :host([shape-style="small"]) {
         --mdw-shape__size: var(--mdw-shape__small);
       }
       
-      .shape[shape-style="medium"] {
+      :host([shape-style="medium"]) {
         --mdw-shape__size: var(--mdw-shape__medium);
       }
       
-      .shape[shape-style="large"] {
+      :host([shape-style="large"]) {
         --mdw-shape__size: var(--mdw-shape__large);
       }
       
-      .shape[shape-style="extra-large"] {
+      :host([shape-style="extra-large"]) {
         --mdw-shape__size: var(--mdw-shape__extra-large);
       }
       
-      .shape[shape-style="full"] {
+      :host([shape-style="full"]) {
         --mdw-shape__size: var(--mdw-shape__full);
       }
       
-      .shape[shape-style="inherit"] {
+      :host([shape-style="inherit"]) {
         --mdw-shape__size: inherit;
       }
       
-      .shape[shape-top] {
+      :host([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%);
       }
       
-      .shape[shape-bottom] {
+      :host([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%);
       }
       
-      .shape[shape-start] {
+      :host([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%);
       }
       
-      .shape[shape-end] {
+      :host([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%);
       }
       
-      @supports(-webkit-mask-box-image: none) {
-        :host {
-          /* Inherit all the way up to :root */
-          --mdw-shape__rounded: inherit;
-        }
-      }
-    `
-    .css`
-      .shape {
-        position: absolute;
-        inset: 0;
-      
-        overflow: hidden;
-      
-        z-index: -1;
-      
-        background-color: var(--mdw-shape__bg, transparent);
-      
-        border-start-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-start-size));
-        border-start-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-end-size));
-        border-end-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-start-size));
-        border-end-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-end-size));
-      
-        transition-delay: 1ms;
-        transition-duration: 200ms;
-        transition-property: background-color, color;
-        will-change: background-color, color;
-      
-      }
-
-      .shape[outlined] {
-        background-color: transparent;
-      }
-      
-      .shape[color] {
-        background-color: rgb(var(--mdw-bg));
-        color: rgb(var(--mdw-ink));
-      }
-      
-      .shape:is([color="none"], [color="transparent"]) {
-        background-color: transparent;
-      }
-
-      @supports(-webkit-mask-box-image: none) {
-        .shape {
-          -webkit-mask-box-image: var(--mdw-shape__mask-border-source)
-            8 fill /
-            var(--mdw-shape__size)
-            stretch;
-    
-          -webkit-mask: var(--mdw-shape__mask);
-
-          transition-duration: 200ms, 200ms, 200ms;
-          transition-property: background-color, color, -webkit-mask-box-image-width;
-          will-change: background-color, color, -webkit-mask-box-image;
-        }
-      }
     `
     .css`
       .outline {
         position: absolute;
         inset: 0;
+
+        border-style: solid;
+        border-width: 1px;
       
         pointer-events: none;
       
@@ -187,120 +120,5 @@ export default function ShapeMixin(Base) {
         color: rgba(var(--mdw-color__on-surface), 0.12);
       }
       
-      .outline::before {
-        content: '';
-      
-        position: absolute;
-        inset: 0;
-      
-        border-style: solid;
-        border-width: 1px;
-      
-        border-radius: inherit;
-      }
-      
-      @supports(-webkit-mask-box-image: none) {
-        .outline::before {
-          content: none;
-        }
-      
-        .outline::after {
-          content: '';
-      
-          position: absolute;
-          inset: 0;
-      
-          -webkit-mask-box-image: var(--mdw-shape__mask-image__edges)
-            8 fill /
-            auto
-            stretch;
-      
-          background-color: currentColor;
-        }
-      
-        .outline-section {
-          position: absolute;
-          inset: 0;
-        }
-      
-        .outline-section::before,
-        .outline-section::after {
-          content: "";
-      
-          position: absolute;
-      
-          max-block-size: 50%;
-          max-inline-size: 50%;
-      
-          -webkit-mask-repeat: no-repeat;
-          -webkit-mask-size: contain;
-      
-          background-color: currentColor;
-      
-          transition-duration: 200ms;
-          /* stylelint-disable-next-line liberty/use-logical-spec */
-          transition-property: width, height;
-        }
-      
-        .outline-left::before {
-          /* stylelint-disable-next-line liberty/use-logical-spec */
-          left: calc(-1px * var(--mdw-shape__convex));
-          inset-block-start: calc(-1px * var(--mdw-shape__convex));
-      
-          block-size: calc(var(--mdw-shape__size__top-left-size));
-          inline-size: calc(var(--mdw-shape__size__top-left-size));
-          /* stylelint-disable-next-line liberty/use-logical-spec */
-          padding-right: calc(2px * var(--mdw-shape__convex));
-          padding-block-end: calc(2px * var(--mdw-shape__convex));
-      
-          -webkit-mask-image: var(--mdw-shape__mask-image__top-left);
-        }
-      
-        .outline-left::after {
-          /* stylelint-disable-next-line liberty/use-logical-spec */
-          left: calc(-1px * var(--mdw-shape__convex));
-          inset-block-end: calc(-1px * var(--mdw-shape__convex));
-      
-          block-size: var(--mdw-shape__size__bottom-left-size);
-          inline-size: var(--mdw-shape__size__bottom-left-size);
-          /* stylelint-disable-next-line liberty/use-logical-spec */
-          padding-right: calc(2px * var(--mdw-shape__convex));
-          padding-block-start: calc(2px * var(--mdw-shape__convex));
-      
-          -webkit-mask-image: var(--mdw-shape__mask-image__bottom-left);
-          -webkit-mask-position-y: 100%;
-        }
-      
-        .outline-right::before {
-          /* stylelint-disable-next-line liberty/use-logical-spec */
-          right: calc(-1px * var(--mdw-shape__convex));
-          inset-block-start: calc(-1px * var(--mdw-shape__convex));
-      
-          block-size: var(--mdw-shape__size__top-right-size);
-          inline-size: var(--mdw-shape__size__top-right-size);
-          /* stylelint-disable-next-line liberty/use-logical-spec */
-          padding-left: calc(2px * var(--mdw-shape__convex));
-          padding-block-end: calc(2px * var(--mdw-shape__convex));
-      
-          -webkit-mask-image: var(--mdw-shape__mask-image__top-right);
-          -webkit-mask-position-x: 100%;
-        }
-
-        .outline-right::after {
-          /* stylelint-disable-next-line liberty/use-logical-spec */
-          right: calc(-1px * var(--mdw-shape__convex));
-          inset-block-end: calc(-1px * var(--mdw-shape__convex));
-      
-          block-size: var(--mdw-shape__size__bottom-right-size);
-          inline-size: var(--mdw-shape__size__bottom-right-size);
-          /* stylelint-disable-next-line liberty/use-logical-spec */
-          padding-left: calc(2px * var(--mdw-shape__convex));
-          padding-block-start: calc(2px * var(--mdw-shape__convex));
-      
-          -webkit-mask-image: var(--mdw-shape__mask-image__bottom-right);
-          -webkit-mask-position-x: 100%;
-          -webkit-mask-position-y: 100%;
-        }
-      }
     `;
 }