@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/mixins/ShapeMixin.js

@@ -3,7 +3,6 @@
  */
 export default function ShapeMixin(Base) {
   return Base
-    .extend()
     .observe({
       shapeTop: 'boolean',
       shapeBottom: 'boolean',
@@ -12,36 +11,34 @@ 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}>
-          <div id=outline-left class="outline-section outline-left"></div>
-          <div id=outline-right class="outline-section outline-right"></div>
-        </div>
-      </div>
+    .html`
+      <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__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__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;
+
+        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));
       }
 
       :host([shape-style="none"]) {
@@ -79,90 +76,31 @@ export default function ShapeMixin(Base) {
       :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;
-        }
-      }
-    `
-    .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;
       
@@ -182,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%;
-        }
-      }
     `;
 }

package/mixins/StateMixin.js

@@ -7,94 +7,118 @@ 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,
       },
       _hovered: 'boolean',
       _focused: 'boolean',
-      _pressed: 'boolean',
+      /** True if focus was synthetic */
+      _focusedSynthetic: 'boolean',
+      _keyPressed: 'boolean',
+      /** True if key was released this event loop. (Used to ignore clicks) */
+      _keyReleased: 'boolean',
+      _pointerPressed: 'boolean',
       stateLayer: 'boolean',
     })
     .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({ _keyPressed, _pointerPressed, pressed }) { return _keyPressed || _pointerPressed || pressed; },
       touchedState({ _lastInteraction }) {
         return _lastInteraction === 'touch';
       },
+      pointedState({ _lastInteraction }) {
+        return _lastInteraction === 'mouse' || _lastInteraction === 'pen';
+      },
     })
     .define({
+      /** @return {HTMLElement} */
       stateTargetElement() { return this; },
     })
-    .html/* html */`
-      <div id=state _if={stateLayer}
+    .html`
+      <div id=state mdw-if={stateLayer}
         disabled={disabledState}
         focused={focusedState}
         hovered={hoveredState}
         pressed={pressedState}
         interaction={_lastInteraction}
         touched={touchedState}
+        pointed={pointedState}
         aria-hidden=true></div>
     `
     .events({
       pointerenter(event) {
+        if (!event.isTrusted) return;
         if (!event.isPrimary) return;
-        this._pressed = this.stateTargetElement.matches(':active');
+        this._pointerPressed = this.stateTargetElement.matches(':active');
         if (event.pointerType === 'touch') return;
         this._hovered = true;
-        // Firefox lags a frame before reporting :hover
-        // requestAnimationFrame(() => {
-        //  this._hovered = this.stateTargetElement.matches(':hover');
-        // });
       },
       '~pointerdown'(event) {
+        if (!event.isTrusted) return;
         if (!event.isPrimary) return;
         this._lastInteraction = /** @type {'touch'|'mouse'|'pen'} */ (event.pointerType);
-        this._pressed = true;
+        this._pointerPressed = true;
       },
       '~pointerup'(event) {
+        if (!event.isTrusted) return;
         if (!event.isPrimary) return;
         this._lastInteraction = /** @type {'touch'|'mouse'|'pen'} */ (event.pointerType);
-        this._pressed = false;
+        this._pointerPressed = false;
       },
-      pointercancel(e) {
-        if (!e.isPrimary) return;
-        this._pressed = this.stateTargetElement.matches(':active');
+      pointercancel(event) {
+        if (!event.isTrusted) return;
+        if (!event.isPrimary) return;
+        this._pointerPressed = this.stateTargetElement.matches(':active');
       },
       pointerleave(event) {
+        if (!event.isTrusted) return;
         if (!event.isPrimary) return;
-        this._pressed = false;
+        this._pointerPressed = false;
         this._hovered = false;
       },
-      '~keydown'(e) {
+      '~keydown'(event) {
+        if (!event.isTrusted) return;
         this._lastInteraction = 'key';
-        if (e.repeat) return;
-        // console.debug('keydown', this.stateTargetElement.matches(':active'));
-        requestAnimationFrame(() => {
-          this._pressed = this.stateTargetElement.matches(':active');
-          // console.debug('pressed? after one keydown frame', this._pressed);
-        });
+        if (event.repeat) return;
+        if (event.key !== ' ') return;
+        this._keyPressed = true;
       },
-      '~keyup'() {
+      '~keyup'(event) {
+        if (!event.isTrusted) return;
         this._lastInteraction = 'key';
-        // console.debug('keyup', this.stateTargetElement.matches(':active'));
-        requestAnimationFrame(() => {
-          this._pressed = this.stateTargetElement.matches(':active');
-          // console.debug('pressed? after one keyUP frame?', this._pressed);
+        if (event.key !== ' ') return;
+        this._keyPressed = false;
+        this._keyReleased = true;
+        setTimeout(() => {
+          this._keyReleased = false;
         });
       },
-      blur() {
+      blur(event) {
+        if (!event.isTrusted) return;
         this._focused = false;
+        this._focusedSynthetic = false;
+        this._keyPressed = false;
+        this._pointerPressed = false;
         if (!this._lastInteraction) return;
         lastInteractionWasTouch = (this._lastInteraction === 'touch');
-        // this._lastInteraction = null;
+        this._lastInteraction = null;
       },
-      focus() {
+      focus(event) {
+        if (!event.isTrusted) return;
+        this._focusedSynthetic = 'sourceCapabilities' in event
+          ? !event.sourceCapabilities
+          : (this._lastInteraction === null && !event.relatedTarget);
         this._focused = true;
         // Element was focused without a mouse or touch event (keyboard or programmatic)
         if (!this._lastInteraction && lastInteractionWasTouch) {
@@ -105,6 +129,9 @@ export default function StateMixin(Base) {
     })
     .on({
       disconnected() {
+        this._focused = false;
+        this._keyPressed = false;
+        this._pointerPressed = false;
         this._lastInteraction = null;
       },
     })
@@ -128,17 +155,19 @@ export default function StateMixin(Base) {
       }
 
       #state {
+        --mdw-state__opacity: calc(
+          var(--mdw-state__hovered-opacity) +
+          var(--mdw-state__focused-opacity) +
+          var(--mdw-state__pressed-opacity) +
+          var(--mdw-state__dragged-opacity)
+        );
+
         position: absolute;
         inset: 0;
 
         pointer-events: none;
 
-        opacity: calc(
-            var(--mdw-state__hovered-opacity) +
-            var(--mdw-state__focused-opacity) +
-            var(--mdw-state__pressed-opacity) +
-            var(--mdw-state__dragged-opacity)
-          );
+        opacity: var(--mdw-state__opacity);
         /* opacity handled by theme engine */
         background-color: currentColor;
         border-radius: inherit;
@@ -149,6 +178,18 @@ export default function StateMixin(Base) {
         will-change: opacity;
       }
 
+      /** Reduce RAM usage by not creating stack contexts */
+      @supports(background-color: color-mix(in srgb, red calc(100%), red)) {
+        #state {
+          opacity: 1;
+
+          background-color: color-mix(in srgb, currentColor calc(100% * var(--mdw-state__opacity)), transparent);
+
+          transition-property: color, background-color;
+          will-change: color, background-color;
+        }
+      }
+
       #state[touched] {
         --mdw-state__hovered-opacity: 0;
         --mdw-state__focused-opacity: 0;