@shortfuse/materialdesignweb 0.8.0 → 0.9.1

package/mixins/ShapeMixin.js

@@ -1,173 +1,115 @@
 /**
+ * Adds shape sizing and outline support for components (shape-style, shape-top, etc.).
  * @param {ReturnType<import('./StateMixin.js').default> & ReturnType<import('./ThemableMixin.js').default>} Base
  */
 export default function ShapeMixin(Base) {
   return Base
     .observe({
+      /** Show top cut/shape on the element */
       shapeTop: 'boolean',
+      /** Show bottom cut/shape on the element */
       shapeBottom: 'boolean',
+      /** Show start-side cut/shape (logical start) */
       shapeStart: 'boolean',
+      /** Show end-side cut/shape (logical end) */
       shapeEnd: 'boolean',
+      /** Predefined shape size/style name (none|extra-small|small|medium|large|extra-large|full|inherit) */
       shapeStyle: 'string',
+      /** When true, an outline is rendered around the element */
       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 {
+      .outline {
         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);
+        overflow: hidden;
 
-          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 +129,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

@@ -3,11 +3,14 @@
 let lastInteractionWasTouch = window?.matchMedia?.('(any-pointer: coarse)').matches;
 
 /**
+ * Manages interactive state flags (disabled, focused, hovered, pressed, touch)
+ * and derived state expressions used by components.
  * @param {typeof import('../core/CustomElement.js').default} Base
  */
 export default function StateMixin(Base) {
   return Base
     .observe({
+      /** Whether the element is disabled (affects interactive states) */
       disabled: 'boolean',
       /** Force focus state (independent of document) */
       focused: 'boolean',
@@ -21,19 +24,29 @@ export default function StateMixin(Base) {
       },
       _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',
+      /** Show the visual state layer element when true */
       stateLayer: 'boolean',
     })
     .observe({
       disabledState({ disabled }) { return disabled; },
       hoveredState({ _hovered, hovered }) { return _hovered || hovered; },
       focusedState({ _focused, focused }) { return _focused || focused; },
-      pressedState({ _pressed, pressed }) { return _pressed || pressed; },
+      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`
@@ -44,62 +57,72 @@ export default function StateMixin(Base) {
         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) {
@@ -110,6 +133,9 @@ export default function StateMixin(Base) {
     })
     .on({
       disconnected() {
+        this._focused = false;
+        this._keyPressed = false;
+        this._pointerPressed = false;
         this._lastInteraction = null;
       },
     })
@@ -133,17 +159,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;
@@ -154,6 +182,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;