@shortfuse/materialdesignweb 0.8.0 → 0.9.0

package/mixins/StateMixin.js

@@ -21,19 +21,28 @@ 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',
       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 +53,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 +129,9 @@ export default function StateMixin(Base) {
     })
     .on({
       disconnected() {
+        this._focused = false;
+        this._keyPressed = false;
+        this._pointerPressed = false;
         this._lastInteraction = null;
       },
     })
@@ -133,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;
@@ -154,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;

package/mixins/TextFieldMixin.js

@@ -17,6 +17,7 @@ export default function TextFieldMixin(Base) {
     .observe({
       type: { empty: 'text' },
       icon: 'string',
+      iconVariation: 'string',
       label: 'string',
       filled: 'boolean',
       outlined: 'boolean',
@@ -24,6 +25,7 @@ export default function TextFieldMixin(Base) {
       inputSuffix: 'string',
       trailingIcon: 'string',
       trailingIconInk: 'string',
+      trailingIconLabel: 'string',
       supporting: 'string',
       error: 'string',
       placeholder: { nullParser: String }, // DOMString
@@ -52,7 +54,27 @@ export default function TextFieldMixin(Base) {
         return label && (filled || outlined);
       },
     })
+    .expressions({
+      _shapeShapeTop({ shapeTop, filled }) {
+        return shapeTop || filled;
+      },
+      computedIconVariation({ iconVariation, outlined }) {
+        return iconVariation ?? (outlined ? null : 'filled');
+      },
+    })
     .html`
+      <div id=shape role=none filled={filled} icon={icon} trailing-icon={trailingIcon}
+      populated={populatedState} focused={focusedState} label={label} outlined={outlined}
+      shape-top={_shapeShapeTop}>
+        <mdw-icon mdw-if={icon} id=icon aria-hidden=true disabled={disabledState} icon={icon} variation={computedIconVariation}></mdw-icon>
+        <div id=inline role=none filled={filled} icon={icon} trailing-icon={trailingIcon}
+          populated={populatedState} focused={focusedState} label={label} outlined={outlined}>
+          <span mdw-if={inputPrefix} class=inline id=prefix aria-hidden=true focused={focusedState} populated={populatedState}>{inputPrefix}</span>
+          <span mdw-if={inputSuffix} class=inline id=suffix aria-hidden=true focused={focusedState} populated={populatedState}>{inputSuffix}</span>
+        </div>
+        <mdw-icon-button tabindex=-1 disabled={disabledState} mdw-if={trailingIcon} id=trailing-icon ink={trailingIconInk} disabled={disabledState} icon={trailingIcon}>{trailingIconLabel}</mdw-icon-button>
+        <div mdw-if={filled} id=indicator aria-hidden=true focused={focusedState} hovered={hoveredState} errored={erroredState} disabled={disabledState}></div>
+      </div>
       <div id=label-text mdw-if={_showLabelText} aria-hidden=true
         outlined={outlined}
         populated={populatedState}
@@ -65,52 +87,32 @@ export default function TextFieldMixin(Base) {
         {computeSupportingText}
         <slot id=supporting-slot name=supporting></slot>
       </div>
+      
     `
+    .recompose(({ html, refs: { control, outline, state, shape, inline } }) => {
+      control.setAttribute('placeholder', '{computePlaceholder}');
+      control.setAttribute('aria-label', '{label}');
+      control.setAttribute('input-suffix', '{inputSuffix}');
+      control.setAttribute('errored', '{erroredState}');
+      control.setAttribute('aria-describedby', 'supporting');
+      control.removeAttribute('aria-labelledby');
+      control.classList.add('inline');
+
+      state.setAttribute('mdw-if', '{!outlined}');
+      outline.append(html`
+        <div id=outline-left class=outline-section focused={focusedState}></div>
+        <div id=gap label={label} populated={populatedState} focused={focusedState}>
+          <div id=gap-slot focused={focusedState}></div>
+          <span id=gap-label>{label}</span>
+        </div>
+        <div id=outline-right class=outline-section focused={focusedState}></div>
+      `);
+      outline.setAttribute('label', '{label}');
+      outline.setAttribute('errored', '{erroredState}');
+      shape.prepend(outline, state);
+      inline.prepend(control);
+    })
     .on({
-      composed({ html, inline }) {
-        const { control, outline, shape, outlineLeft, outlineRight, state } = this.refs;
-        control.setAttribute('placeholder', '{computePlaceholder}');
-        control.setAttribute('aria-label', '{label}');
-        control.setAttribute('input-suffix', '{inputSuffix}');
-        control.setAttribute('errored', '{erroredState}');
-        control.setAttribute('aria-describedby', 'supporting');
-        control.removeAttribute('aria-labelledby');
-        control.classList.add('inline');
-
-        state.setAttribute('mdw-if', '{!outlined}');
-        shape.setAttribute('role', 'none');
-        shape.setAttribute('filled', '{filled}');
-        shape.setAttribute('icon', '{icon}');
-        shape.setAttribute('trailingIcon', '{trailingIcon}');
-        shape.setAttribute('populated', '{populatedState}');
-        shape.setAttribute('focused', '{focusedState}');
-        shape.setAttribute('label', '{label}');
-        shape.setAttribute('shape-top', inline(({ shapeTop, filled }) => shapeTop || filled));
-        shape.append(
-          state,
-          outline,
-          control,
-          html`
-            <mdw-icon mdw-if={icon} id=icon aria-hidden=true disabled={disabledState}>{icon}</mdw-icon>
-            <span mdw-if={inputPrefix} class=inline id=prefix aria-hidden=true focused={focusedState} populated={populatedState}>{inputPrefix}</span>
-            <span mdw-if={inputSuffix} class=inline id=suffix aria-hidden=true focused={focusedState} populated={populatedState}>{inputSuffix}</span>
-            <mdw-icon mdw-if={trailingIcon} id=trailing-icon ink={trailingIconInk} aria-hidden=true disabled={disabledState}>{trailingIcon}</mdw-icon>
-            <div mdw-if={filled} id=indicator aria-hidden=true focused={focusedState} hovered={hoveredState} errored={erroredState} disabled={disabledState}></div>
-          `,
-        );
-
-        outline.setAttribute('label', '{label}');
-        outline.setAttribute('errored', '{erroredState}');
-        outlineLeft.after(html`
-          <div id=gap mdw-if={label} label={label} populated={populatedState} focused={focusedState}>
-            <div id=gap-slot focused={focusedState}></div>
-            <span id=gap-label>{label}</span>
-          </div>
-        `);
-
-        outlineLeft.setAttribute('focused', '{focusedState}');
-        outlineRight.setAttribute('focused', '{focusedState}');
-      },
       sizeChanged(oldValue, newValue) {
         this.refs.control.style.setProperty('--size', `${newValue}ch`);
       },
@@ -163,6 +165,8 @@ export default function TextFieldMixin(Base) {
 
         display: inline-block;
 
+        border-radius: 0;
+
         /* State layer */
         color: rgb(var(--mdw-color__on-surface));
 
@@ -170,14 +174,6 @@ export default function TextFieldMixin(Base) {
         letter-spacing: var(--mdw-type__letter-spacing);
       }
 
-      :host([icon]) {
-        --padding-inline-start: 12px;
-      }
-
-      :host([trailing-icon]) {
-        --padding-inline-end: 12px;
-      }
-
       :host(:is([color], [ink])) {
         background-color: transparent;
         color: rgb(var(--mdw-color__on-surface));
@@ -189,7 +185,6 @@ export default function TextFieldMixin(Base) {
         --mdw-shape__size__bottom-start-size: min(var(--mdw-shape__size), 12px);
         --mdw-shape__size__top-end-size: min(var(--mdw-shape__size), 12px);
         --mdw-shape__size__bottom-end-size: min(var(--mdw-shape__size), 12px);
-        -webkit-mask-box-image-width: min(var(--mdw-shape__size), 12px);
       }
 
       #shape {
@@ -197,15 +192,17 @@ export default function TextFieldMixin(Base) {
 
         display: flex;
 
-        align-items: center;
-        overflow: visible;
-
         cursor: inherit;
 
         z-index: 0;
 
         background-color: transparent;
 
+        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));
+
         font-weight: inherit;
         font-size: inherit;
         line-height: inherit;
@@ -215,10 +212,28 @@ export default function TextFieldMixin(Base) {
         transition: none 200ms cubic-bezier(0.0, 0.0, 0.2, 1);
       }
 
-      #shape:where([filled],[outlined]) {
-        padding-inline: 16px;
+      #inline {
+        display: flex;
+
+        align-items: center;
+        overflow: visible;
+
+        flex: 1;
+        padding-block: var(--control__margin-top) var(--control__margin-bottom);
+
+        cursor: inherit;
+
+        font-weight: inherit;
+        font-size: inherit;
+        line-height: inherit;
+        font-family: inherit;
+        letter-spacing: inherit;
+
+        transition: none 200ms cubic-bezier(0.0, 0.0, 0.2, 1);
       }
 
+      
+
       #shape:where([filled],[color]) {
         background-color: rgb(var(--mdw-bg));
         color: rgb(var(--mdw-color__on-surface));
@@ -237,14 +252,6 @@ export default function TextFieldMixin(Base) {
         color: rgb(var(--mdw-ink))
       }
 
-      #shape:where([filled],[outlined])[icon] {
-        padding-inline-start: 12px;
-      }
-
-      #shape[trailing-icon] {
-        padding-inline-end: 12px;
-      }
-
       #shape[focused] {
         transition: none 100ms cubic-bezier(0.4, 0.0, 1, 1);
       }
@@ -252,7 +259,6 @@ export default function TextFieldMixin(Base) {
       #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%);
       }
 
       #prefix,
@@ -277,16 +283,15 @@ export default function TextFieldMixin(Base) {
         inset: auto;
         align-self: flex-start;
 
-        display: inline;
+        display: inline-block;
 
         box-sizing: border-box;
 
         block-size: auto;
-        min-block-size: none;
+        min-block-size: 0;
         inline-size: 100%;
-        min-inline-size: none;
+        min-inline-size: 0;
         flex: 1;
-        border-block-start: solid var(--control__margin-top) transparent;
         border-block-end: solid var(--control__margin-bottom) transparent;
         padding-block: var(--control__padding-top) var(--control__padding-bottom);
 
@@ -296,7 +301,7 @@ export default function TextFieldMixin(Base) {
 
         transform: none;
 
-        visibility: visible;
+        visibility: inherit;
 
         background-color: transparent;
         border-color: transparent;
@@ -308,6 +313,7 @@ export default function TextFieldMixin(Base) {
         line-height: inherit;
         font-family: inherit;
         letter-spacing: inherit;
+        text-align: initial;
 
         transition-duration: inherit;
         transition-property: color;
@@ -317,7 +323,6 @@ export default function TextFieldMixin(Base) {
       #suffix,
       #prefix {
         /* Symmetrical to allow centering */
-        margin-block: var(--control__margin-top) var(--control__margin-bottom);
         padding-block: var(--control__padding-top) var(--control__padding-bottom);
       }
 
@@ -342,7 +347,7 @@ export default function TextFieldMixin(Base) {
       #icon {
         order: -2;
 
-        margin-inline-end: 16px;
+        margin-inline-start: 12px;
 
         font-size: 24px;
       }
@@ -358,7 +363,8 @@ export default function TextFieldMixin(Base) {
       #trailing-icon {
         order: 2;
 
-        margin-inline-start: 16px;
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+        margin-inline-end: 12px;
       }
 
       #indicator {
@@ -465,6 +471,31 @@ export default function TextFieldMixin(Base) {
 
       /** Outlined **/
 
+      #outline {
+        position: absolute;
+        inset: 0;
+
+        border-style: solid;
+        border-width: 0px;
+
+        pointer-events: none;
+
+        border-color: currentColor;
+        border-radius: inherit;
+        color: rgb(var(--mdw-color__outline));
+      }
+
+      #outline:is([pressed],[focused]) {
+        color: rgb(var(--mdw-ink));
+
+        transition-delay: 0;
+        transition-duration: 0;
+      }
+      
+      #outline[disabled] {
+        color: rgba(var(--mdw-color__on-surface), 0.12);
+      }
+
       #outline::before {
         content: none;
       }
@@ -601,73 +632,6 @@ export default function TextFieldMixin(Base) {
         border-block-start-width: 2px;
       }
 
-      @supports(-webkit-mask-box-image: none) {
-        #outline[focused] {
-          /** Fake 2px outline */
-          filter:
-            drop-shadow(1px 0px 0px currentColor)
-            drop-shadow(0px 1px 0px currentColor)
-            drop-shadow(-1px 0px 0px currentColor)
-            drop-shadow(0px -1px 0px currentColor);
-        }
-
-        #outline::before {
-          content: '';
-
-          position: absolute;
-          inset: 0;
-
-          grid-column: calc(2 - var(--mdw-dir, 1)) / span 1;
-          /* stylelint-disable-next-line liberty/use-logical-spec */
-          margin-right: -0.99px;
-          border: none;
-
-          background-color: currentColor;
-          -webkit-mask-box-image: var(--mdw-shape__mask-image__edges)
-            8 fill /
-            auto
-            stretch;
-          -webkit-mask-box-image-width: auto 0 auto auto;
-        }
-
-        #outline::after {
-          grid-column: calc(2 + var(--mdw-dir, 1)) / span 1;
-          grid-row: 1;
-
-          /* stylelint-disable-next-line liberty/use-logical-spec */
-          margin-left: -0.99px;
-          -webkit-mask-box-image-width: auto auto auto 0;
-        }
-
-        .outline-section {
-          border: none;
-        }
-
-        #gap::after {
-          border: none;
-
-          background-color: currentColor;
-          -webkit-mask-box-image: var(--mdw-shape__mask-image__edges)
-            8 fill /
-            auto
-            stretch;
-          -webkit-mask-box-image-width: 0 0 auto 0;
-        }
-
-        #gap-slot::before,
-        #gap-slot::after {
-          border: none;
-
-          background-color: currentColor;
-
-          -webkit-mask-box-image: var(--mdw-shape__mask-image__edges)
-            8 fill /
-            auto
-            stretch;
-          -webkit-mask-box-image-width: auto 0 0 0;
-        }
-      }
-
       #gap-slot::before {
         /* stylelint-disable-next-line liberty/use-logical-spec */
         margin-right: -0.99px;
@@ -693,7 +657,7 @@ export default function TextFieldMixin(Base) {
         padding: 0;
       }
 
-      #shape[label][filled] {
+      #inline[label][filled] {
         align-items: flex-start;
       }