@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/components/MenuItem.js

@@ -1,13 +1,14 @@
 // https://www.w3.org/TR/wai-aria-practices/#menu
 
+import { isFocused } from '../core/dom.js';
 import FormAssociatedMixin from '../mixins/FormAssociatedMixin.js';
 
 import './Icon.js';
 import ListOption from './ListOption.js';
 
-export default class MenuItem extends ListOption
-  .mixin(FormAssociatedMixin)
+export default ListOption
   .extend()
+  .mixin(FormAssociatedMixin)
   .set({
     _cascadeTimeout: null,
     CASCADE_TIMEOUT: 500,
@@ -96,7 +97,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;
     },
   })
@@ -119,7 +122,7 @@ export default class MenuItem extends ListOption
   .events({
     mouseenter() {
       if (this.disabledState) return;
-      if (document.activeElement !== this) {
+      if (!isFocused(this)) {
         this.focus();
       }
       if (!this.cascades) return;
@@ -170,38 +173,38 @@ 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({
-    composed({ inline, html }) {
-      const { checkbox: checkboxRef, radio: radioRef, anchor, trailing, trailingIcon } = this.refs;
-      checkboxRef.remove();
-      radioRef.remove();
+  .recompose(({ inline, html, refs: { checkbox: checkboxRef, radio: radioRef, anchor, trailing, trailingIcon } }) => {
+    checkboxRef.remove();
+    radioRef.remove();
 
-      anchor.setAttribute('role', inline(({ checkbox, radio }) => {
-        if (checkbox != null) return 'menuitemcheckbox';
-        if (radio != null) return 'menuitemradio';
-        return 'menuitem';
-      }));
+    anchor.setAttribute('role', inline(({ checkbox, radio }) => {
+      if (checkbox != null) return 'menuitemcheckbox';
+      if (radio != null) return 'menuitemradio';
+      return 'menuitem';
+    }));
 
-      // MenuItems use checked instead of selected as in list items.
-      anchor.setAttribute('ariaChecked', anchor.getAttribute('aria-selected'));
+    // MenuItems use checked instead of selected as in list items.
+    anchor.setAttribute('ariaChecked', anchor.getAttribute('aria-selected'));
 
-      anchor.after(html`
-        <mdw-icon id=selection
-          _if=${({ checkbox, radio }) => checkbox ?? radio ?? false}
-          class=${({ checkbox, radio }) => checkbox || radio || 'leading'}
-          selected={selected}>check</mdw-icon>
-      `);
+    anchor.after(html`
+      <mdw-icon id=selection
+        mdw-if=${({ checkbox, radio }) => checkbox ?? radio ?? false}
+        class=${({ checkbox, radio }) => checkbox || radio || 'leading'}
+        selected={selected} icon=check></mdw-icon>
+    `);
 
-      trailing.setAttribute('type-style', 'label-large');
+    trailing.setAttribute('type-style', 'label-large');
 
-      trailingIcon.setAttribute('_if', '{computeTrailingIcon}');
-      trailingIcon.textContent = '{computeTrailingIcon}';
+    trailingIcon.setAttribute('mdw-if', '{computeTrailingIcon}');
+    trailingIcon.setAttribute('icon', '{computeTrailingIcon}');
+  })
+  .on({
+    _formResetChanged(oldValue, newValue) {
+      if (!newValue) return;
+      this._selected = this.defaultSelected;
     },
   })
   .css`
@@ -259,10 +262,4 @@ export default class MenuItem extends ListOption
       color: inherit;
     }
   `
-  .autoRegister('mdw-menu-item')
-  .tsClassFix() {
-  formResetCallback() {
-    this._selected = this.defaultSelected;
-    super.formResetCallback();
-  }
-}
+  .autoRegister('mdw-menu-item');

package/components/NavBar.js

@@ -1,66 +1,37 @@
-import { ELEMENT_STYLER_TYPE } from '../core/customTypes.js';
-import ScrollListenerMixin from '../mixins/ScrollListenerMixin.js';
+import CustomElement from '../core/CustomElement.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import Nav from './Nav.js';
+import NavItem from './NavItem.js';
 
-export default Nav
-  .mixin(ScrollListenerMixin)
+export default CustomElement
+  .extend()
+  .mixin(DelegatesFocusMixin)
+  .mixin(ThemableMixin)
   .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,
-          },
-        };
-      },
+    open: 'boolean',
+    autoClose: {
+      type: 'float',
+      empty: 728,
     },
   })
-  .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';
-      }
-    },
+  .set({
+    color: 'surface-container',
+    _ariaRole: 'navigation',
   })
+  .html`<slot id=slot></slot>`
   .css`
     /* https://m3.material.io/components/navigation-bar/specs */
 
     :host {
-      position: sticky;
-      inset-block-end: 0;
-      order:1; /* Nav Bars are at top of tab order, but bottom of page */
+      --mdw-bg: var(--mdw-color__surface-container);
+      --mdw-ink: var(--mdw-color__on-surface);
+      display: none;
 
-      display: grid;
       align-content: flex-start;
       align-items: flex-start;
       gap: 8px;
+
       grid-auto-columns: minmax(48px, 1fr);
       grid-auto-flow: column;
 
@@ -70,54 +41,46 @@ export default Nav
       min-block-size: 80px;
       inline-size: 100%;
 
-      flex-shrink: 0;
+      pointer-events: auto;
+
+      background-color: rgb(var(--mdw-bg));
 
-      transform: translateY(0);
+      color: rgb(var(--mdw-ink));
 
-      box-shadow: none;
+      font: var(--mdw-typescale__label-medium__font);
+      letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
 
       text-align: center;
-
-      will-change: transform;
     }
 
-    #slot {
-      pointer-events: auto;
+    :host(:where([open])) {
+      display: grid;
     }
-
   `
-  .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);
-        }
+  .methods({
+    onWindowResize() {
+      const { autoClose } = this;
+      const containerWidth = window.innerWidth;
+      this.open = (autoClose === -1 || containerWidth < autoClose);
+    },
+  })
+  .events({
+    '~click'(event) {
+      // Abort if not child
+      if (event.target === this) return;
+      if (event.target instanceof NavItem === false) return;
+      for (const el of this.querySelectorAll('*')) {
+        if (el instanceof NavItem === false) continue;
+        el.active = (el === event.target);
       }
     },
-    disconnected() {
-      this.clearScrollListener();
+  })
+  .on({
+    constructed() {
+      window.addEventListener('resize', this.onWindowResize.bind(this));
     },
-    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));
+    connected() {
+      this.onWindowResize();
     },
   })
   .autoRegister('mdw-nav-bar');

package/components/NavDrawer.js

@@ -1,19 +1,24 @@
-import NavRail from './NavRail.js';
+import SideSheet from './SideSheet.js';
 
-export default NavRail
+export default SideSheet
   .extend()
   .observe({
     shapeEnd: {
       type: 'boolean',
       empty: true,
     },
+    autoOpen: {
+      type: 'float',
+      empty: 1248,
+    },
+    fixedBreakpoint: {
+      type: 'float',
+      empty: 1248,
+    },
   })
   .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;
@@ -26,19 +31,15 @@ export default NavRail
       --mdw-nav-item__anchor__display: block;
       --mdw-nav-item__indicator__grid-area: auto;
 
-      display: block;
-      grid-template-rows: min-content;
-      grid-template-columns: minmax(360px, min-content);
+      display:inline-block;
 
-      min-inline-size: 360px;
+      inline-size: 360px;
+      max-inline-size: calc(100vw - 56px);
       padding-inline: 12px;
-
-      box-shadow: none;
-
     }
 
-    #slot {
-      gap: 0;
+    ::slotted(mdw-divider) {
+      padding-inline: 16px;
     }
 
   `

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;
     }
 
@@ -46,9 +47,7 @@ export default NavItem
       z-index: 1;
     }
   `
-  .on({
-    composed({ html }) {
-      this.refs.badge.replaceWith(html`<span id="badge-text">{badge}</span>`);
-    },
+  .recompose(({ html, refs: { badge } }) => {
+    badge.replaceWith(html`<span id="badge-text">{badge}</span>`);
   })
   .autoRegister('mdw-nav-drawer-item');

package/components/NavItem.js

@@ -1,23 +1,25 @@
 import './Icon.js';
 import './Ripple.js';
 import './Badge.js';
+import './Shape.js';
 
 import CustomElement from '../core/CustomElement.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+import HyperlinkMixin from '../mixins/HyperlinkMixin.js';
 import RippleMixin from '../mixins/RippleMixin.js';
-import ShapeMixin from '../mixins/ShapeMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
 /** @typedef {'charset'|'coords'|'name'|'shape'} DeprecatedHTMLAnchorElementProperties */
 
-export default class NavItem extends CustomElement
+export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(StateMixin)
   .mixin(RippleMixin)
-  .mixin(ShapeMixin)
-  .extend()
+  .mixin(HyperlinkMixin)
+  .mixin(DelegatesFocusMixin)
   .set({
-    delegatesFocus: true,
     stateLayer: true,
   })
   .observe({
@@ -25,38 +27,45 @@ export default class NavItem extends CustomElement
     active: 'boolean',
     icon: 'string',
     src: 'string',
-    href: 'string',
     badge: 'string',
     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);
+    },
+  })
+  .expressions({
+    _anchorAriaCurrent({ active }) {
+      return active ? 'page' : null;
+    },
+    _anchorAriaLabelledby({ ariaLabel }) {
+      return ariaLabel ? null : 'slot';
+    },
+    _anchorHref({ href }) { return href ?? '#'; },
+    iconVariation({ active }) {
+      return active ? 'filled' : null;
     },
   })
-  .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)}
-      aria-describedby=badge
-      aria-label={ariaLabel}
-      aria-labelledby=${({ ariaLabel }) => (ariaLabel ? null : 'slot')}
-      href=${({ href }) => href ?? '#'}>
-    </a>
+  .html`
+    <mdw-icon id=icon aria-hidden=true src={src} active={active} icon={icon} variation={iconVariation}></mdw-icon>
     <slot id=slot active={active} show-label={showLabel} aria-hidden=true></slot>
     <mdw-badge part=badge id=badge badge={badge} show-label={showLabel} aria-hidden=true>{badge}</mdw-badge>
   `
-  .on({
-    composed({ html }) {
-      const { shape, state, rippleContainer } = this.refs;
-      shape.append(html`
+  .recompose(({ html, refs: { anchor, state, rippleContainer } }) => {
+    anchor.setAttribute('aria-current', '{_anchorAriaCurrent}');
+    anchor.setAttribute('aria-describedby', 'badge');
+    anchor.setAttribute('aria-label', '{ariaLabel}');
+    anchor.setAttribute('aria-labelledby', '{_anchorAriaLabelledby}');
+    anchor.setAttribute('href', '{_anchorHref}');
+    anchor.before(html`
+      <mdw-shape id=shape active={active} shape-style=full>
         <mdw-ripple id=ripple ripple-origin=center keep-alive hold-ripple ripple-state=${({ active }) => ((active) ? null : 'complete')}></mdw-ripple>
         ${state}
         ${rippleContainer}
-      `);
-      shape.setAttribute('active', '{active}');
-      shape.removeAttribute('color');
-    },
+      </mdw-shape>
+    `);
   })
   .css`
     /* https://m3.material.io/components/navigation-bar/specs */
@@ -71,7 +80,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,12 +90,11 @@ export default class NavItem extends CustomElement
       row-gap: 4px;
 
       box-sizing: border-box;
-      min-block-size: 56px;
 
       padding-inline: 0;
 
       cursor: pointer;
-      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+
       user-select: none;
 
       font: var(--mdw-typescale__label-large__font);
@@ -132,6 +140,10 @@ export default class NavItem extends CustomElement
     #anchor {
       position: absolute;
       inset: 0;
+
+      outline: none;
+
+      z-index: 5;
     }
 
     #shape {
@@ -139,8 +151,14 @@ 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%;
 
+      overflow: hidden;
+
       block-size: 100%;
       inline-size: 100%;
       max-inline-size: 56px;
@@ -149,7 +167,6 @@ export default class NavItem extends CustomElement
       grid-row: 1 / 1;
 
       transform: translateX(-50%) translateY(-50%) translateY(var(--mdw-nav-item__offset-y));
-      z-index: 0;
 
       background-color: transparent;
 
@@ -169,7 +186,6 @@ export default class NavItem extends CustomElement
       color: rgb(var(--mdw-color__on-surface-variant));
 
       font-size: 24px;
-      font-variation-settings: 'FILL' 0;
 
       transition: transform 200ms;
       will-change: transform;
@@ -182,8 +198,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;
 
@@ -225,8 +243,6 @@ export default class NavItem extends CustomElement
 
     #icon[active] {
       color: rgb(var(--mdw-ink));
-
-      font-variation-settings: 'FILL' 1;
     }
 
     #slot[active] {
@@ -254,10 +270,11 @@ export default class NavItem extends CustomElement
       },
     },
   })
-  .autoRegister('mdw-nav-item')
-  .tsClassFix() {
-  addRipple(...args) {
-    if (!this.active) return null;
-    return super.addRipple(...args);
-  }
-}
+  .extend((Base) => class NavItem extends Base {
+    /** @type {InstanceType<ReturnType<RippleMixin>>['addRipple']} */
+    addRipple(...args) {
+      if (!this.active) return null;
+      return super.addRipple(...args);
+    }
+  })
+  .autoRegister('mdw-nav-item');

package/components/NavRail.js

@@ -1,27 +1,43 @@
-import Nav from './Nav.js';
+import SideSheet from './SideSheet.js';
 
-export default Nav
+export default SideSheet
   .extend()
   .observe({
     align: { value: /** @type {'start'|'center'|'end'} */ (null) },
-  })
-  .on({
-    composed({ html }) {
-      const { slot } = this.refs;
-      slot.before(html`<slot id=start name=start></slot>`);
-      slot.setAttribute('align', '{align}');
+    autoOpen: {
+      type: 'float',
+      empty: 728,
+    },
+    autoClose: {
+      type: 'float',
+      empty: 1248,
+    },
+    fixedBreakpoint: {
+      type: 'float',
+      empty: 728,
     },
   })
+  .recompose(({ html, refs: { slot } }) => {
+    slot.before(html`<slot id=start name=start></slot>`);
+    slot.setAttribute('align', '{align}');
+  })
   .css`
     /* https://m3.material.io/components/navigation-rail/specs */
 
     :host{
-      display: grid;
+      align-self: flex-start;
+
+      display: inline-grid;
       align-content: flex-start;
       flex-direction: column;
-      grid-template-rows: auto minmax(0,1fr);
-      grid-template-columns: 80px;
+      gap:0;
+      grid-template-rows: auto minmax(auto,1fr);
+      grid-template-columns: 100%;
       justify-items: stretch;
+      overscroll-behavior: none;
+      overscroll-behavior: contain;
+
+      min-block-size: 0;
 
       text-align: center;
     }
@@ -31,9 +47,7 @@ export default Nav
       align-items: center;
       flex-direction: column;
       gap: 12px;
-
-      padding-block-start: 12px;
-
+      justify-content: center;
     }
 
     #slot {
@@ -43,14 +57,11 @@ export default Nav
       align-items: stretch;
       flex-direction: column;
       gap: 12px;
-      overflow-x: clip;
-      overflow-y: auto;
 
       box-sizing: border-box;
+      max-block-size: 100%;
+      inline-size: min-content;
 
-      inline-size: 100%;
-
-      padding-block: 12px;
     }
 
     #slot[align="start"] {
@@ -60,6 +71,5 @@ export default Nav
     #slot[align="end"] {
       align-self: flex-end;
     }
-
   `
   .autoRegister('mdw-nav-rail');

package/components/NavRailItem.js

@@ -7,11 +7,16 @@ 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);
+      grid-template-columns: [icon] minmax(72px, 1fr);
 
-      padding-inline: 12px;
+      min-block-size: 56px;
+      flex: none;
+      padding-inline: 4px;
+
+      font: var(--mdw-typescale__label-medium__font);
+      letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
     }
 
     #slot {