@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/components/Radio.js

@@ -1,3 +1,5 @@
+/* https://m3.material.io/components/radio/specs */
+
 import './RadioIcon.js';
 
 import CustomElement from '../core/CustomElement.js';
@@ -8,34 +10,38 @@ import ThemableMixin from '../mixins/ThemableMixin.js';
 import TouchTargetMixin from '../mixins/TouchTargetMixin.js';
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(StateMixin)
   .mixin(RippleMixin)
   .mixin(InputMixin)
   .mixin(TouchTargetMixin)
-  .extend()
   .set({
     type: 'radio',
     stateLayer: true,
   })
-  .on({
-    composed({ html }) {
-      const { label, rippleContainer, state, control, touchTarget } = this.refs;
-      label.append(html`
-        ${touchTarget}
-        ${control}
-        <div id=radio errored={erroredState} selected={checked}>
-          <mdw-radio-icon id=icon errored={erroredState} disabled={disabledState}
-            selected={checked} focused={focusedState} hovered={hoveredState}></mdw-radio-icon>
-          ${state}
-          ${rippleContainer}
-        </div>
-        <slot id=slot></slot>
-      `);
+  .html`
+    <div id=radio errored={erroredState} selected={checked}>
+      <mdw-radio-icon id=icon errored={erroredState} disabled={disabledState}
+        selected={checked} focused={focusedState} hovered={hoveredState}></mdw-radio-icon>
+    </div>
+    <slot id=slot></slot>
+  `
+  .rootEvents({
+    click(event) {
+      const { control } = this.refs;
+      if (event.target !== control) {
+        // Label-like click
+        event.stopPropagation();
+        control.click();
+      }
     },
   })
+  .recompose(({ refs: { radio, rippleContainer, state } }) => {
+    radio.append(state, rippleContainer);
+  })
   .css`
-    /* https://m3.material.io/components/radio/specs */
+    /* stylelint-disable liberty/use-logical-spec */
 
     :host {
       --mdw-ink: var(--mdw-color__primary);
@@ -53,38 +59,38 @@ export default CustomElement
       transition: none 100ms cubic-bezier(0.4, 0.0, 1, 1);
     }
 
+    :host(:disabled) {
+      cursor: not-allowed;
+
+      opacity: 0.38;
+    }
+
+    :host([internals-disabled]) {
+      cursor: not-allowed;
+
+      opacity: 0.38;
+    }
+
     :host(:empty) {
       vertical-align: -11.5%;
 
       line-height: 20px;
     }
 
-    :host(:empty) #radio {
-      transform: none;
-    }
-
     #control {
       grid-column: 1/1;
 
       cursor: inherit;
     }
 
-    #label {
-      cursor: inherit;
-    }
-
-    #label[disabled] {
-      cursor: not-allowed;
-    }
-
     #state {
       pointer-events: auto;
     }
 
     #state,
     #ripple-container {
-      inset-block-start: 50%;
-      inset-inline-start: 50%;
+      top: 50%;
+      left: 50%;
 
       block-size: 40px;
       inline-size: 40px;
@@ -94,12 +100,6 @@ export default CustomElement
       border-radius: 50%;
     }
 
-    :host([disabled]) {
-      cursor: not-allowed;
-
-      opacity: 0.38;
-    }
-
     #radio {
       position: relative;
 
@@ -126,6 +126,10 @@ export default CustomElement
       color: rgb(var(--mdw-color__error));
     }
 
+    :host(:empty) #radio {
+      transform: none;
+    }
+
     #icon {
       --mdw-ink: inherit;
       --disabled-opacity: 1;

package/components/RadioIcon.js

@@ -1,11 +1,13 @@
+import './Shape.js';
+
 import CustomElement from '../core/CustomElement.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(ShapeMixin)
-  .extend()
   .observe({
     selected: 'boolean',
     icon: 'string',
@@ -21,14 +23,12 @@ export default CustomElement
       set(value) { this.selected = value; },
     },
   })
-  .html/* html */`
-    <div id=inner-shape class=shape selected={selected}></div>
-  `.on({
-    composed() {
-      const { outline } = this.refs;
-      outline.removeAttribute('_if');
-      outline.setAttribute('selected', '{selected}');
-    },
+  .html`
+    <mdw-shape id=inner-shape selected={selected}></div>
+  `
+  .recompose(({ refs: { outline } }) => {
+    outline.removeAttribute('mdw-if');
+    outline.setAttribute('selected', '{selected}');
   })
   .css`
     /* https://m3.material.io/components/radio-button/specs */
@@ -52,16 +52,11 @@ export default CustomElement
     }
 
     #outline {
-      filter:
-        drop-shadow(1px 0px 0px var(--color))
-        drop-shadow(0px 1px 0px var(--color))
-        drop-shadow(-1px 0px 0px var(--color))
-        drop-shadow(0px -1px 0px var(--color))
-        ;
+      border-width: 2px;
 
       color: var(--color);
 
-      will-change: filter, color;
+      will-change: color;
     }
 
     #inner-shape {
@@ -71,6 +66,7 @@ export default CustomElement
       transform: scale(0);
 
       background-color: var(--color);
+      border-radius: inherit;
 
       transition: transform 200ms, background-color 100ms;
     }

package/components/Ripple.js

@@ -1,5 +1,5 @@
 import CustomElement from '../core/CustomElement.js';
-import { ELEMENT_STYLER_TYPE } from '../core/customTypes.js';
+import { ELEMENT_ANIMATION_TYPE } from '../core/customTypes.js';
 
 export default CustomElement
   .extend()
@@ -27,15 +27,17 @@ export default CustomElement
   })
   .observe({
     _positionStyle: {
-      ...ELEMENT_STYLER_TYPE,
+      ...ELEMENT_ANIMATION_TYPE,
       get({ _positionX, _positionY, _radius }) {
+        // Skip if not measured
+        if (_radius == null) return null;
         return {
           styles: {
-            minBlockSize: `${_radius}px`,
-            minInlineSize: `${_radius}px`,
+            minHeight: `${_radius}px`,
+            minWidth: `${_radius}px`,
             boxShadow: `0 0 calc(0.10 * ${_radius}px) calc(0.10 * ${_radius}px) currentColor`,
-            left: `calc(50% + ${_positionX}px)`,
             top: `calc(50% + ${_positionY}px)`,
+            left: `calc(50% + ${_positionX}px)`,
           },
         };
       },
@@ -53,14 +55,16 @@ export default CustomElement
       // Use offset to calculate parent size;
 
       let hypotenuse = size;
-      const { clientWidth: parentWidth, clientHeight: parentHeight } = this.offsetParent;
+      const { offsetParent } = this;
+      if (!offsetParent) return;
+      const { clientWidth: parentWidth, clientHeight: parentHeight } = offsetParent;
 
       x ??= parentWidth / 2;
       y ??= parentHeight / 2;
       if (!hypotenuse) {
         const width = (x >= parentWidth / 2) ? x : (parentWidth - x);
         const height = (y >= parentHeight / 2) ? y : (parentHeight - y);
-        hypotenuse = 2 * Math.sqrt((width * width) + (height * height));
+        hypotenuse = 2 * Math.hypot(width, height);
       }
 
       // const expandDuration = Math.min(
@@ -99,7 +103,7 @@ export default CustomElement
     animationend({ animationName }) {
       switch (animationName) {
         case 'ripple-fade-in':
-          this.setAttribute('ripple-state', 'filled');
+          this.rippleState = 'filled';
           break;
         case 'ripple-fade-out':
           this.handleRippleComplete();
@@ -109,6 +113,7 @@ export default CustomElement
     },
   })
   .css`
+    /* stylelint-disable liberty/use-logical-spec */
     :host {
       --enter-delay: 80ms;
       --touch-down-acceleration: 1024;
@@ -121,9 +126,7 @@ export default CustomElement
     
       --size: 0;
       position: absolute;
-      /* stylelint-disable-next-line liberty/use-logical-spec */
       top: 50%;
-      /* stylelint-disable-next-line liberty/use-logical-spec */
       left: 50%;
     
       display: block;

package/components/Root.js

@@ -0,0 +1,209 @@
+/* https://m3.material.io/foundations/layout/applying-layout/window-size-classes */
+
+import CustomElement from '../core/CustomElement.js';
+import { ELEMENT_ANIMATION_TYPE } from '../core/customTypes.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+import ScrollListenerMixin from '../mixins/ScrollListenerMixin.js';
+
+export default CustomElement
+  .extend()
+  .mixin(ScrollListenerMixin)
+  .mixin(DelegatesFocusMixin)
+  .set({
+    /** @type {ResizeObserver} */
+    _bottomResizeObserver: null,
+  })
+  .html`
+    <slot id=start name=start></slot>
+    <div id=bottom>
+      <slot id=bottom-slot name=bottom></slot>
+    </div>
+    <div id=bottom-fixed>
+      <slot id=bottom-fixed-slot name=bottom-fixed></slot>
+    </div>
+    <slot id=slot></slot>
+    <slot id=end name=end></slot>
+  `
+  .observe({
+    _bottomHeight: { type: 'float', empty: 0 },
+    _bottomOffsetY: { type: 'float', empty: 0 },
+    _bottomDuration: { type: 'float', empty: 0 },
+    _bottomEasing: { empty: 'ease-in' },
+  })
+  .observe({
+    _sharedBottomStyle({ _bottomOffsetY, _bottomDuration, _bottomEasing, _bottomHeight }) {
+      if (!_bottomHeight) return null;
+      return {
+        styles: {
+          transform: `translateY(${_bottomOffsetY}px)`,
+        },
+        timing: {
+          duration: _bottomDuration,
+          easing: _bottomEasing,
+        },
+      };
+    },
+  })
+  .observe({
+    _bottomSlotStyle: {
+      ...ELEMENT_ANIMATION_TYPE,
+      get({ _sharedBottomStyle }) {
+        if (!_sharedBottomStyle) return null;
+        return {
+          target: 'bottom-slot',
+          ..._sharedBottomStyle,
+        };
+      },
+    },
+    _bottomFixedSlotStyle: {
+      ...ELEMENT_ANIMATION_TYPE,
+      get({ _sharedBottomStyle }) {
+        if (!_sharedBottomStyle) return null;
+        return {
+          target: 'bottom-fixed-slot',
+          ..._sharedBottomStyle,
+        };
+      },
+    },
+  })
+  .on({
+    _scrollListenerPositionYChanged(oldValue, newValue) {
+      const delta = newValue - oldValue;
+
+      this._bottomDuration = 0;
+      // 0 if disabled or has scrolled upto element
+      // Valid range : 0 > x > (100% - required)
+      const bottomStartsAt = (document.documentElement.scrollHeight - window.innerHeight - 1);
+      const distanceFromBottom = bottomStartsAt - newValue;
+      const scrollVisible = this._bottomHeight - distanceFromBottom;
+      let mustIncludeSpace = 0;
+      if (scrollVisible > 0) {
+        mustIncludeSpace = scrollVisible;
+      }
+
+      this._bottomOffsetY = (newValue === 0 || distanceFromBottom < 0)
+        ? 0
+        : Math.max(0, Math.min(
+          this._bottomOffsetY + delta,
+          this._bottomHeight - mustIncludeSpace,
+        ));
+    },
+    _scrollListenerLastIdleChanged() {
+      const { _bottomHeight, _bottomOffsetY } = this;
+      const visibility = (_bottomHeight - _bottomOffsetY) / _bottomHeight;
+      if (visibility <= 0) return;
+      if (visibility >= 1) return;
+      if (visibility < 0.5) {
+        const bottomStartsAt = (document.documentElement.scrollHeight - window.innerHeight - 1);
+        const { _scrollListenerPositionY } = this;
+        const distanceFromBottom = bottomStartsAt - _scrollListenerPositionY;
+        const scrollVisible = _bottomHeight - distanceFromBottom;
+
+        if (_scrollListenerPositionY !== 0 && distanceFromBottom >= 0 && scrollVisible <= 0) {
+          this._bottomDuration = 200;
+          this._bottomEasing = 'ease-out';
+          this._bottomOffsetY = _bottomHeight;
+          return;
+        }
+      }
+
+      // Reveal all
+      this._bottomDuration = 250;
+      this._bottomEasing = 'ease-in';
+      this._bottomOffsetY = 0;
+    },
+    connected() {
+      // eslint-disable-next-line no-multi-assign
+      const observer = (this._bottomResizeObserver ??= new ResizeObserver((entries) => {
+        for (const { borderBoxSize } of entries) {
+          this._bottomHeight = borderBoxSize[0].blockSize;
+        }
+      }));
+      observer.observe(this.refs.bottom);
+      this.startScrollListener(window);
+    },
+    disconnected() {
+      this._scrollListenerClear();
+      this._bottomResizeObserver.unobserve(this.refs.bottom);
+    },
+  })
+  .css`
+    :host {
+      position: relative;
+
+      display: grid;
+      grid-template:
+        "start top     end" auto
+        "start content end" minmax(auto, 1fr)
+        "start bottom  end" auto
+        / minmax(0px, auto) minmax(0px, 100%) minmax(0px, auto);
+
+      min-block-size: 100vh;
+      min-block-size: 100dvh;
+
+      font: var(--mdw-typescale__body-large__font);
+      letter-spacing: var(--mdw-typescale__body-large__letter-spacing);
+    }
+
+    #start {
+      display: flex;
+      grid-area: start;
+    }
+
+    #slot {
+      display: block;
+      grid-area: content;
+      overflow-x: clip;
+
+    }
+
+    #end {
+      display: none;
+
+      grid-area: end;
+
+      block-size: 0;
+    }
+
+    #bottom {
+      position: sticky;
+      inset-block-end: 0;
+
+      display: block;
+      grid-area: bottom;
+      overflow-y: hidden;
+
+      pointer-events: none;
+
+      z-index: 1;
+    }
+
+    #bottom-slot {
+      position: sticky;
+      inset-block-end: 0;
+
+      display: flex;
+      /* Tab order flows from bottom-up */
+      flex-direction: column-reverse;
+    }
+
+    #bottom-fixed {
+      position: sticky;
+      inset-block-end: 0;
+
+      display: block;
+      grid-area: bottom; /* Takes but does not dictate size of bottom area */
+
+      pointer-events: none;
+
+      z-index: 2;
+    }
+
+    #bottom-fixed-slot {
+      position: absolute;
+      inset-block-end: 100%;
+
+      display: block;
+    }
+  `
+  .autoRegister('mdw-root');

package/components/Scrim.js

@@ -0,0 +1,87 @@
+import CustomElement from '../core/CustomElement.js';
+
+export default CustomElement
+  .extend()
+  .observe({
+    hidden: 'boolean',
+  })
+  .html`<div id=scroll-blocker></div>`
+  .css`
+    :host {
+      position: fixed;
+      inset: 0;
+
+      display: block;
+      overflow: overlay;
+
+      overscroll-behavior: none;
+      overscroll-behavior: contain;
+      scrollbar-color: transparent transparent;
+      scrollbar-width: none;
+
+      cursor:pointer;
+
+      outline: none; /* Older Chromium Builds */
+      
+      -webkit-tap-highlight-color: transparent;
+
+      opacity: 0;
+
+      z-index: 23;
+
+      background-color: rgb(var(--mdw-color__scrim));
+      
+      animation: fade-in 200ms forwards ease-out;
+      will-change: opacity;
+    }
+
+    :host::-webkit-scrollbar {
+      display: none;
+    }
+
+    :host([hidden]) {
+      animation-name: fade-out;
+      animation-timing-function: ease-in;
+    }
+
+    :host([invisible]) {
+      background: transparent;
+    }
+
+    #scroll-blocker {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+
+      display: block;
+
+      block-size: 200%;
+      inline-size: 200%;
+    }
+
+    @keyframes fade-in {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 0.38;
+      }
+    }
+
+    @keyframes fade-out {
+      from {
+        opacity: 0.38;
+      }
+
+      to {
+        opacity: 0;
+      }
+    }
+  `
+  .events({
+    animationend() {
+      if (this.hidden) this.remove();
+    },
+  })
+  .autoRegister('mdw-scrim');

package/components/Search.js

@@ -0,0 +1,77 @@
+import TopAppBar from './TopAppBar.js';
+
+/* @implements {HTMLSelectElement} */
+export default TopAppBar
+  .extend()
+  .undefine('headline')
+  // .undefine('_headlineOpacity')
+  .undefine('size')
+  .undefine('_headlineStyle')
+  .observe({
+    placeholder: { type: 'string', empty: 'Search' },
+    color: { empty: 'surface-container-high' },
+    shapeStyle: { empty: 'full' },
+    kbdNav: { empty: 'false' },
+  })
+  .define({
+    /** @return {HTMLInputElement} */
+    input() { return this.refs.input; },
+    value: {
+      get() { return this.refs.input.value; },
+      set(value) {
+        this.refs.input.value = value;
+      },
+    },
+  })
+  .html`
+    <mdw-input id=input placeholder={placeholder} aria-label={placeholder}></mdw-input>
+  `
+  .css`
+    :host {
+      --mdw-bg: var(--mdw-color__surface-container-high);
+      --mdw-shape__size: var(--mdw-shape__full);
+      inset-block-start: 8px;
+
+      display: flex;
+      align-items: center;
+      gap: 16px;
+
+      margin-block: 16px;
+
+      padding-inline: 16px;
+
+      background-color: rgb(var(--mdw-bg));
+    }
+
+    #leading:not([slotted]),
+    #trailing:not([slotted]) {
+      display: none;
+    }
+
+    #input {
+      --mdw-state__hovered-opacity: 0;
+      flex: 1;
+    }
+  `
+  .methods({
+    /** @param {{currentTarget:HTMLSlotElement}} event */
+    onSlotChange({ currentTarget }) {
+      currentTarget.toggleAttribute('slotted', currentTarget.assignedNodes().length >= 0);
+    },
+  })
+  .childEvents({
+    leading: { slotchange: 'onSlotChange' },
+    trailing: { slotchange: 'onSlotChange' },
+    input: {
+      change(event) {
+        // Change events are not composed. Rethrow.
+        event.stopPropagation();
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+      },
+    },
+  })
+  .recompose(({ refs: { companion, headline, input } }) => {
+    companion.remove();
+    headline.replaceWith(input);
+  })
+  .autoRegister('mdw-search');