@shortfuse/materialdesignweb 0.7.6 → 0.8.0

package/components/MenuItem.js

@@ -6,8 +6,8 @@ import './Icon.js';
 import ListOption from './ListOption.js';
 
 export default class MenuItem extends ListOption
-  .mixin(FormAssociatedMixin)
   .extend()
+  .mixin(FormAssociatedMixin)
   .set({
     _cascadeTimeout: null,
     CASCADE_TIMEOUT: 500,
@@ -96,7 +96,9 @@ export default class MenuItem extends ListOption
     cascade() {
       this.unscheduleCascade();
       this._cascading = true;
-      document.getElementById(this.cascades)?.cascade?.(this);
+      // Dispatch event asking for cascade.
+      // Captured by parent mdw-menu and used to track current submenu
+      this.dispatchEvent(new CustomEvent('mdw-menu-item:cascade', { detail: this.cascades, bubbles: true }));
       this._cascading = false;
     },
   })
@@ -170,10 +172,7 @@ export default class MenuItem extends ListOption
     blur() {
       if (!this.cascades) return;
       if (this._cascading) return;
-      const submenuElement = document.getElementById(this.cascades);
-      if (submenuElement.matches(':focus-within')) return;
-      console.debug('closing submenu via cascader blur');
-      submenuElement.close(false);
+      this.dispatchEvent(new CustomEvent('mdw-menu-item:cascader-blur', { detail: this.cascades, bubbles: true }));
     },
   })
   .on({
@@ -193,16 +192,20 @@ export default class MenuItem extends ListOption
 
       anchor.after(html`
         <mdw-icon id=selection
-          _if=${({ checkbox, radio }) => checkbox ?? radio ?? false}
+          mdw-if=${({ checkbox, radio }) => checkbox ?? radio ?? false}
           class=${({ checkbox, radio }) => checkbox || radio || 'leading'}
           selected={selected}>check</mdw-icon>
       `);
 
       trailing.setAttribute('type-style', 'label-large');
 
-      trailingIcon.setAttribute('_if', '{computeTrailingIcon}');
+      trailingIcon.setAttribute('mdw-if', '{computeTrailingIcon}');
       trailingIcon.textContent = '{computeTrailingIcon}';
     },
+    _formResetChanged(oldValue, newValue) {
+      if (!newValue) return;
+      this._selected = this.defaultSelected;
+    },
   })
   .css`
     /* https://m3.material.io/components/menus/specs */
@@ -260,9 +263,4 @@ export default class MenuItem extends ListOption
     }
   `
   .autoRegister('mdw-menu-item')
-  .tsClassFix() {
-  formResetCallback() {
-    this._selected = this.defaultSelected;
-    super.formResetCallback();
-  }
-}
+  .tsClassFix() {}

package/components/Nav.js

@@ -9,8 +9,6 @@ export default Surface
     /* https://m3.material.io/components/navigation-rail/specs */
 
     :host {
-      --mdw-surface__tint: var(--mdw-surface__tint__2);
-      --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
       --mdw-ink: var(--mdw-color__on-surface);
       --mdw-bg: var(--mdw-color__surface);
 

package/components/NavBar.js

@@ -1,58 +1,19 @@
-import { ELEMENT_STYLER_TYPE } from '../core/customTypes.js';
-import ScrollListenerMixin from '../mixins/ScrollListenerMixin.js';
+import SemiStickyMixin from '../mixins/SemiStickyMixin.js';
 
 import Nav from './Nav.js';
 
 export default Nav
-  .mixin(ScrollListenerMixin)
+  .extend()
+  .mixin(SemiStickyMixin)
   .observe({
-    hideOnScroll: 'boolean',
-    _translateY: { type: 'float', empty: 0 },
-    _transition: { empty: 'none' },
-  })
-  .observe({
-    _positioningStyle: {
-      ...ELEMENT_STYLER_TYPE,
-      get({ _translateY, _transition }) {
-        return {
-          styles: {
-            transform: `translateY(${_translateY}px)`,
-            transition: _transition,
-          },
-        };
-      },
-    },
-  })
-  .methods({
-    onScrollerResize() {
-      console.log('onScrollerResize');
-      // Chrome Bug: When window resizes bottom sticky needs to be recomputed
-      // Force style recalculation
-      this.style.setProperty('bottom', 'auto');
-      // eslint-disable-next-line no-unused-expressions
-      this.clientHeight;
-      this.style.removeProperty('bottom');
-      this.propChangedCallback('scrollListenerPositionY', this.scrollListenerPositionY, this.scrollListenerPositionY);
-    },
-    onScrollIdle() {
-      const max = this.scrollHeight;
-      const visibility = (max - this._translateY) / max;
-      if (visibility <= 0) return;
-      if (visibility >= 1) return;
-      if (visibility >= 0.5) {
-      // Reveal all
-        this._translateY = 0;
-        this._transition = 'transform 250ms ease-in';
-      } else {
-        this._translateY = max;
-        this._transition = 'transform 200ms ease-out';
-      }
-    },
+    _semiStickyAnchor: { empty: 'bottom' },
   })
   .css`
     /* https://m3.material.io/components/navigation-bar/specs */
 
     :host {
+      --mdw-bg: var(--mdw-color__surface-container);
+      
       position: sticky;
       inset-block-end: 0;
       order:1; /* Nav Bars are at top of tab order, but bottom of page */
@@ -61,6 +22,8 @@ export default Nav
       align-content: flex-start;
       align-items: flex-start;
       gap: 8px;
+
+      grid-area: nav-bar;
       grid-auto-columns: minmax(48px, 1fr);
       grid-auto-flow: column;
 
@@ -86,38 +49,4 @@ export default Nav
     }
 
   `
-  .on({
-    connected() {
-      if (this.hideOnScroll) {
-        if (this.offsetParent) {
-          this.startScrollListener(this.offsetParent ?? window);
-        } else {
-          const resizeObserver = new ResizeObserver(() => {
-            this.startScrollListener(this.offsetParent ?? window);
-            resizeObserver.disconnect();
-          });
-          resizeObserver.observe(this);
-        }
-      }
-    },
-    disconnected() {
-      this.clearScrollListener();
-    },
-    scrollListenerPositionYChanged(oldValue, newValue) {
-      if (!this.hideOnScroll) return;
-      const delta = newValue - oldValue;
-      const rate = 1;
-      const shift = rate * delta;
-
-      const bottom = this.getScrollingElementScrollHeight() - this.getScrollingElementClientHeight();
-      const breakpoint = bottom - this.scrollHeight;
-      let max = this.scrollHeight;
-      if (newValue >= breakpoint) {
-      // Scrolling to bottom always shows Nav Bar (ensures content isn't occluded)
-        max -= (newValue - breakpoint);
-      }
-      this._transition = 'none';
-      this._translateY = Math.max(0, Math.min(this._translateY + shift, max));
-    },
-  })
   .autoRegister('mdw-nav-bar');

package/components/NavDrawer.js

@@ -10,13 +10,9 @@ export default NavRail
   })
   .css`
     /* https://m3.material.io/components/navigation-drawer/specs */
-
-    :host([open]) {
-      --mdw-surface__tint: var(--mdw-surface__tint__0);
-      --mdw-surface__tint__raised: var(--mdw-surface__tint__1);
+    :host {
       --mdw-shape__size: var(--mdw-shape__large, 16px);
       --mdw-shape__size__top-start-size: 0px;
-      --mdw-shape__size__bottom-start-size: 0px;
 
       --mdw-nav-item__badge__position: static;
       --mdw-nav-item__badge__transform: none;
@@ -25,20 +21,25 @@ export default NavRail
       --mdw-nav-item__label__padding-inline: 52px 0;
       --mdw-nav-item__anchor__display: block;
       --mdw-nav-item__indicator__grid-area: auto;
+      --mdw-bg: var(--mdw-color__surface-container-low);
 
-      display: block;
-      grid-template-rows: min-content;
-      grid-template-columns: minmax(360px, min-content);
+      display: grid;
+      grid-template-columns: 1fr;
 
-      min-inline-size: 360px;
-      padding-inline: 12px;
+      min-block-size: 100vh;
+      max-block-size: 100vh;
+      inline-size: 360px;
+      max-inline-size: calc(100vw - 56px);
+      padding-inline: 0;
 
       box-shadow: none;
-
     }
 
     #slot {
       gap: 0;
+
+      inline-size: auto;
+      padding-inline: 12px;
     }
 
   `

package/components/NavDrawerItem.js

@@ -10,7 +10,6 @@ export default NavItem
     :host {
       align-self: stretch;
 
-      display: grid;
       display: flex;
       align-items: center;
       gap: 12px;
@@ -19,6 +18,8 @@ export default NavItem
         / 24px 1fr minmax(0, min-content);
       justify-items: flex-start;
 
+      min-block-size: 56px; 
+
       padding-inline: 16px 24px;
     }
 

package/components/NavItem.js

@@ -11,11 +11,11 @@ import ThemableMixin from '../mixins/ThemableMixin.js';
 /** @typedef {'charset'|'coords'|'name'|'shape'} DeprecatedHTMLAnchorElementProperties */
 
 export default class NavItem extends CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(StateMixin)
   .mixin(RippleMixin)
   .mixin(ShapeMixin)
-  .extend()
   .set({
     delegatesFocus: true,
     stateLayer: true,
@@ -30,11 +30,12 @@ export default class NavItem extends CustomElement
     ariaLabel: 'string', // watch attribute and emit callback
   })
   .methods({
-    focus(options) {
-      this.refs.anchor.focus(options);
+    /** @type {HTMLElement['focus']} */
+    focus(...args) {
+      this.refs.anchor.focus(...args);
     },
   })
-  .html/* html */`
+  .html`
     <mdw-icon id=icon aria-hidden=true src={src} active={active}>{icon}</mdw-icon>
     <a id=anchor
       aria-current=${({ active }) => (active ? 'page' : null)}
@@ -71,7 +72,7 @@ export default class NavItem extends CustomElement
 
       display: grid;
       align-content: center;
-      align-items: center;
+      align-items: flex-start;
       grid-auto-flow: row;
       grid-auto-rows: minmax(20px, min-content);
       grid-template-rows: [icon] minmax(32px, 1fr);
@@ -81,7 +82,6 @@ export default class NavItem extends CustomElement
       row-gap: 4px;
 
       box-sizing: border-box;
-      min-block-size: 56px;
 
       padding-inline: 0;
 
@@ -132,6 +132,10 @@ export default class NavItem extends CustomElement
     #anchor {
       position: absolute;
       inset: 0;
+
+      outline: none;
+
+      z-index: 5;
     }
 
     #shape {
@@ -139,6 +143,10 @@ export default class NavItem extends CustomElement
       /* stylelint-disable-next-line liberty/use-logical-spec */
       top: 50%;
       /* stylelint-disable-next-line liberty/use-logical-spec */
+      right: auto;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      bottom: auto;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
       left: 50%;
 
       block-size: 100%;
@@ -182,8 +190,10 @@ export default class NavItem extends CustomElement
     #badge {
       --mdw-badge__scale: 0;
       position: absolute;
-      inset-block-start: 50%;
-      inset-inline-start: 50%;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      top: 50%;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      left: 50%;
 
       overflow: hidden;
 

package/components/NavRail.js

@@ -16,13 +16,25 @@ export default Nav
     /* https://m3.material.io/components/navigation-rail/specs */
 
     :host{
+      position: relative;
+      
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      align-self: flex-start;
+
       display: grid;
       align-content: flex-start;
       flex-direction: column;
+      gap:0;
       grid-template-rows: auto minmax(0,1fr);
-      grid-template-columns: 80px;
+      grid-template-columns: 100%;
       justify-items: stretch;
 
+      min-block-size: 100vh;
+      max-block-size: 100vh;
+      min-inline-size: 80px;
+      max-inline-size: 80px;
+
       text-align: center;
     }
 
@@ -31,9 +43,6 @@ export default Nav
       align-items: center;
       flex-direction: column;
       gap: 12px;
-
-      padding-block-start: 12px;
-
     }
 
     #slot {
@@ -47,10 +56,9 @@ export default Nav
       overflow-y: auto;
 
       box-sizing: border-box;
+      max-block-size: 100%;
+      inline-size: min-content;
 
-      inline-size: 100%;
-
-      padding-block: 12px;
     }
 
     #slot[align="start"] {

package/components/NavRailItem.js

@@ -7,10 +7,12 @@ export default NavItem
   .css`
     :host {
       grid-auto-flow: row;
-      grid-auto-rows: minmax(20px, min-content);
+      grid-auto-rows: minmax(20px, auto);
       grid-template-rows: [icon] minmax(32px, 1fr);
       grid-template-columns: [icon] minmax(56px, 1fr);
 
+      min-block-size: 56px;
+      flex: none;
       padding-inline: 12px;
     }
 

package/components/Popup.js

@@ -0,0 +1,20 @@
+import CustomElement from '../core/CustomElement.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(ShapeMixin)
+  .mixin(PopupMixin)
+  .on({
+    composed() {
+      const { shape, surface, dialog } = this.refs;
+      surface.append(shape);
+      dialog.prepend(surface);
+    },
+  })
+  .autoRegister('mdw-popup');

package/components/Progress.js

@@ -6,8 +6,8 @@ import ThemableMixin from '../mixins/ThemableMixin.js';
 // https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element
 
 export default CustomElement
-  .mixin(ThemableMixin)
   .extend()
+  .mixin(ThemableMixin)
   .observe({
     circle: 'boolean',
     value: 'float',
@@ -37,20 +37,20 @@ export default CustomElement
       return /** @type {HTMLProgressElement} */ (this.refs.progress).labels;
     },
   })
-  .html/* html */`
+  .html`
     <div id=determinate style="{_determinateStyle}">
       <progress id=progress value={value} max={max} circle={circle}></progress>
-      <div _if={circle} id=circle>
+      <div mdw-if={circle} id=circle>
         <div id=semi1 class=semi></div>
         <div id=semi2 class=semi></div>
       </div>
     </div>
-    <div _if={!value} id=indeterminate>
-      <div _if={!circle} id=indeterminate-line>
+    <div mdw-if={!value} id=indeterminate>
+      <div mdw-if={!circle} id=indeterminate-line>
         <div id=line1 class=line value={value}></div>
         <div id=line2 class=line value={value}></div>
       </div>
-      <div _if={circle} id=indeterminate-circle>
+      <div mdw-if={circle} id=indeterminate-circle>
         <div id=arc2 class=arc></div>
         <div id=arc3 class=arc></div>
         <div id=arc4 class=arc></div>
@@ -61,7 +61,7 @@ export default CustomElement
     /* Base Styles */
 
     :host {
-      --mdw-bg: var(--mdw-color__surface-variant);
+      --mdw-bg: var(--mdw-color__surface-container-highest);
       --mdw-ink: var(--mdw-color__primary);
       --mdw-progress__opacity__duration: 500ms;
       position: relative;
@@ -296,6 +296,7 @@ export default CustomElement
   `
   .css`
     /* Circle Styles */
+    /* stylelint-disable liberty/use-logical-spec */
     /** https://github.com/material-components/material-components-android/blob/ed77ab36ccac98df24e55060d58406c5981a9062/lib/java/com/google/android/material/progressindicator/CircularIndeterminateAnimatorDelegate.java */
 
     :host {
@@ -357,11 +358,11 @@ export default CustomElement
     }
 
     #semi1 {
-      inset-inline-start: 50%;
+      left: 50%;
     }
 
     #semi2 {
-      inset-inline-end: 50%;
+      right: 50%;
     }
 
     .semi::after {
@@ -384,7 +385,7 @@ export default CustomElement
 
     #semi1::after {
       --rotation: min(180deg, calc(var(--value) * 360deg));
-      inset-inline-start: -100%;
+      left: -100%;
 
       clip-path: inset(0 50% 0 0);
 
@@ -394,7 +395,7 @@ export default CustomElement
 
     #semi2::after {
       --rotation: max(0deg, calc(var(--value) * 360deg - 180deg));
-      inset-inline-end: -100%;
+      right: -100%;
 
       clip-path: inset(0 0 0 50%);
 
@@ -438,43 +439,43 @@ export default CustomElement
     }
 
     #arc2 {
-      inset-block-end: 50%;
-      inset-inline-start: 50%;
+      bottom: 50%;
+      left: 50%;
 
       transform-origin: 0 100%;
     }
 
     #arc3 {
-      inset-block-start: 50%;
-      inset-inline-end: 50%;
+      top: 50%;
+      right: 50%;
 
       transform-origin: 100% 0;
     }
 
     #arc4 {
-      inset-block-start: 50%;
-      inset-inline-start: 50%;
+      top: 50%;
+      left: 50%;
 
       transform-origin: 0 0;
     }
 
     #arc2:after {
-      inset-block-end: -100%;
-      inset-inline-start: -100%;
+      bottom: -100%;
+      left: -100%;
 
       clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 100% 50%, 100% 100%, 0% 100%);
     }
 
     #arc3:after {
-      inset-block-start: -100%;
-      inset-inline-end: -100%;
+      top: -100%;
+      right: -100%;
 
       clip-path: inset(0 50% 50% 0);
     }
 
     #arc4:after {
-      inset-block-start: -100%;
-      inset-inline-start: -100%;
+      top: -100%;
+      left: -100%;
 
       clip-path: inset(0 50% 0 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,41 @@ 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,
   })
+  .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();
+      }
+    },
+  })
   .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>
-      `);
+    composed() {
+      const { radio, rippleContainer, state } = this.refs;
+      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 +62,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 +103,6 @@ export default CustomElement
       border-radius: 50%;
     }
 
-    :host([disabled]) {
-      cursor: not-allowed;
-
-      opacity: 0.38;
-    }
-
     #radio {
       position: relative;
 
@@ -126,6 +129,10 @@ export default CustomElement
       color: rgb(var(--mdw-color__error));
     }
 
+    :host(:empty) #radio {
+      transform: none;
+    }
+
     #icon {
       --mdw-ink: inherit;
       --disabled-opacity: 1;