@shortfuse/materialdesignweb 0.8.0 → 0.9.0

package/components/Page.js

@@ -0,0 +1,105 @@
+/* https://m3.material.io/foundations/layout/applying-layout/window-size-classes */
+
+import CustomElement from '../core/CustomElement.js';
+import { ELEMENT_STYLE_TYPE } from '../core/customTypes.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
+
+export default CustomElement
+  .extend()
+  .mixin(DelegatesFocusMixin)
+  .mixin(ResizeObserverMixin)
+  .observe({
+    paneOne: {
+      value: /** @type {'fixed'|'flexible'} */ ('flexible'),
+    },
+    paneTwo: {
+      value: /** @type {'fixed'|'flexible'|null} */ (null),
+    },
+    paneTwoActive: 'boolean',
+    paneTwoBreakpoint: {
+      type: 'float',
+      empty: 720,
+    },
+    _lastComputedInlineSize: {
+      type: 'float',
+      nullable: false,
+    },
+  })
+  .observe({
+    _isMultipane({ _lastComputedInlineSize, paneTwo, paneTwoBreakpoint }) {
+      return Boolean(paneTwo && _lastComputedInlineSize >= paneTwoBreakpoint);
+    },
+  })
+  .observe({
+    _styles: {
+      ...ELEMENT_STYLE_TYPE,
+      get({ _isMultipane, paneOne, paneTwoActive }) {
+        if (_isMultipane) {
+          return `:host{grid-template-columns:${paneOne === 'fixed' ? '360px' : '1fr'} ${this.paneTwo === 'fixed' ? '360px' : '1fr'}}`;
+        }
+        if (paneTwoActive) {
+          return ':host{grid-template-columns:1fr 0}#slot{display:none}';
+        }
+        return ':host{grid-template-columns:1fr 0}#two{display:none}';
+      },
+    },
+  })
+  .html`
+    <slot id=slot mutli-pane={_isMultipane}></slot>
+    <slot id=two name=two mutli-pane={_isMultipane}></slot>
+  `
+  .css`
+    :host {
+      --mdw-pane__max-width: 1040px;
+      --mdw-pane__margin-inline: 16px;
+      --mdw-pane__padding-inline: max(var(--mdw-pane__margin-inline), calc((100% - var(--mdw-pane__max-width)) / 2));
+      --mdw-pane__shape__size: 0;
+      display: grid;
+      column-gap: var(--mdw-page__margin);
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+
+      block-size: 100%;
+
+      padding: 0;
+
+      font: var(--mdw-typescale__body-large__font);
+      letter-spacing: var(--mdw-typescale__body-large__letter-spacing);
+    }
+
+    @media (min-width: 648px) {
+      :host {
+        --mdw-pane__margin-inline: 24px;
+      }
+    }
+
+    @media (min-width: 728px) {
+      :host {
+        --mdw-pane__shape__size: var(--mdw-shape__large);
+      }
+    }
+
+    #slot[multi-pane] {
+      --mdw-pane__padding-inline: 24px;
+    }
+
+    #two[mutli-pane] {
+      --mdw-pane__padding-inline: 0 24px;
+      position: sticky;
+      inset-block:0;
+
+      display: block;
+
+      overflow-y:auto;
+
+      block-size: 100vh;
+      block-size: 100dvh;
+    }
+  `
+  .overrides({
+    onResizeObserved(entry) {
+      this._lastComputedInlineSize = entry.borderBoxSize[0]?.inlineSize;
+    },
+  })
+  .autoRegister('mdw-page');

package/components/Pane.js

@@ -0,0 +1,18 @@
+import ShapeMixin from '../mixins/ShapeMixin.js';
+
+import Box from './Box.js';
+
+export default Box
+  .extend()
+  .mixin(ShapeMixin)
+  .css`
+    :host {
+      --mdw-shape__size: var(--mdw-pane__shape__size, 0);
+      --mdw-bg: var(--mdw-color__surface);
+      --mdw-ink: var(--mdw-color__on-surface);
+      background-color: rgb(var(--mdw-bg));
+      color: rgb(var(--mdw-ink));
+      
+    }
+  `
+  .autoRegister('mdw-pane');

package/components/Popup.js

@@ -1,20 +1,29 @@
 import CustomElement from '../core/CustomElement.js';
+import ElevationMixin from '../mixins/ElevationMixin.js';
 import PopupMixin from '../mixins/PopupMixin.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
-import SurfaceMixin from '../mixins/SurfaceMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
-  .mixin(SurfaceMixin)
+  .mixin(ElevationMixin)
   .mixin(ShapeMixin)
   .mixin(PopupMixin)
-  .on({
-    composed() {
-      const { shape, surface, dialog } = this.refs;
-      surface.append(shape);
-      dialog.prepend(surface);
-    },
+  .observe({
+    elevation: 'integer',
   })
+  .css`
+    :host {
+      filter: var(--mdw-elevation__drop-shadow__0);
+
+      transition: filter 200ms;
+    }
+
+    :host(:where([elevation="1"])) { filter: var(--mdw-elevation__drop-shadow__1); }
+    :host(:where([elevation="2"])) { filter: var(--mdw-elevation__drop-shadow__2); }
+    :host(:where([elevation="3"])) { filter: var(--mdw-elevation__drop-shadow__3); }
+    :host(:where([elevation="4"])) { filter: var(--mdw-elevation__drop-shadow__4); }
+    :host(:where([elevation="5"])) { filter: var(--mdw-elevation__drop-shadow__5); }
+  `
   .autoRegister('mdw-popup');

package/components/Radio.js

@@ -37,11 +37,8 @@ export default CustomElement
       }
     },
   })
-  .on({
-    composed() {
-      const { radio, rippleContainer, state } = this.refs;
-      radio.append(state, rippleContainer);
-    },
+  .recompose(({ refs: { radio, rippleContainer, state } }) => {
+    radio.append(state, rippleContainer);
   })
   .css`
     /* stylelint-disable liberty/use-logical-spec */

package/components/RadioIcon.js

@@ -1,3 +1,5 @@
+import './Shape.js';
+
 import CustomElement from '../core/CustomElement.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
@@ -22,13 +24,11 @@ export default CustomElement
     },
   })
   .html`
-    <div id=inner-shape class=shape selected={selected}></div>
-  `.on({
-    composed() {
-      const { outline } = this.refs;
-      outline.removeAttribute('mdw-if');
-      outline.setAttribute('selected', '{selected}');
-    },
+    <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,12 +27,14 @@ 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`,
             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();

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

@@ -29,28 +29,25 @@ export default TopAppBar
   .css`
     :host {
       --mdw-bg: var(--mdw-color__surface-container-high);
-      padding-block: 16px;
-    }
-
-    #surface {
-      background-color: transparent;
-    }
-
-    #leading:not([slotted]),
-    #trailing:not([slotted]) {
-      display: none;
-    }
+      --mdw-shape__size: var(--mdw-shape__full);
+      inset-block-start: 8px;
 
-    #shape {
       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;
@@ -73,13 +70,8 @@ export default TopAppBar
       },
     },
   })
-  .on({
-    composed() {
-      const { companion, headline, input, surface } = this.refs;
-      companion.remove();
-      headline.replaceWith(input);
-      surface.removeAttribute('aria-labelledby');
-    },
+  .recompose(({ refs: { companion, headline, input } }) => {
+    companion.remove();
+    headline.replaceWith(input);
   })
-
   .autoRegister('mdw-search');