@shortfuse/materialdesignweb 0.8.0 → 0.9.0

package/components/Menu.js

@@ -1,25 +1,23 @@
 // https://www.w3.org/TR/wai-aria-practices/#menu
 
-import './Surface.js';
 import CustomElement from '../core/CustomElement.js';
 import { attemptFocus } from '../core/dom.js';
 import DensityMixin from '../mixins/DensityMixin.js';
+import ElevationMixin from '../mixins/ElevationMixin.js';
 import KeyboardNavMixin from '../mixins/KeyboardNavMixin.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)
   .mixin(DensityMixin)
   .mixin(KeyboardNavMixin)
   .set({
-    scrollable: true,
     flow: 'corner',
     _useScrim: false,
     /** @type {WeakRef<HTMLElement>} */
@@ -60,15 +58,9 @@ export default CustomElement
       },
     },
   })
-  .on({
-    composed() {
-      const { shape, surface, dialog, scrim } = this.refs;
-      surface.append(shape);
-      dialog.prepend(surface);
-      scrim.setAttribute('invisible', '');
-
-      // Wrap slot in scroller
-    },
+  .recompose(({ refs: { scrim } }) => {
+    scrim.setAttribute('invisible', '');
+    // Wrap slot in scroller
   })
   .css`
     /* https://m3.material.io/components/menus/specs */
@@ -77,17 +69,14 @@ export default CustomElement
       --mdw-shape__size: var(--mdw-shape__extra-small);
       --mdw-bg: var(--mdw-color__surface-container);
       --mdw-ink: var(--mdw-color__on-surface);
-
-      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__2);
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__resting);
       display: block;
 
       inline-size: auto;
       min-inline-size: calc(var(--mdw-menu__inline-base) * 2);
       max-inline-size: 100vw;
-    }
 
-    #shape {
+      filter: var(--mdw-elevation__drop-shadow__2);
+
       background-color: rgb(var(--mdw-bg));
     }
 
@@ -128,6 +117,7 @@ export default CustomElement
     },
     'mdw-menu-item:cascader-blur'() {
       const submenu = this.submenu;
+      if (!submenu) return;
       // Wait for focus event (if mouse focus on sub menu item)
       queueMicrotask(() => {
         // Stay open if submenu is focused

package/components/MenuItem.js

@@ -1,11 +1,12 @@
 // 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
+export default ListOption
   .extend()
   .mixin(FormAssociatedMixin)
   .set({
@@ -121,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;
@@ -175,33 +176,32 @@ export default class MenuItem extends ListOption
       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
-          mdw-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('mdw-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;
@@ -262,5 +262,4 @@ export default class MenuItem extends ListOption
       color: inherit;
     }
   `
-  .autoRegister('mdw-menu-item')
-  .tsClassFix() {}
+  .autoRegister('mdw-menu-item');

package/components/NavBar.js

@@ -1,29 +1,37 @@
-import SemiStickyMixin from '../mixins/SemiStickyMixin.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
+export default CustomElement
   .extend()
-  .mixin(SemiStickyMixin)
+  .mixin(DelegatesFocusMixin)
+  .mixin(ThemableMixin)
   .observe({
-    _semiStickyAnchor: { empty: 'bottom' },
+    open: 'boolean',
+    autoClose: {
+      type: 'float',
+      empty: 728,
+    },
   })
+  .set({
+    color: 'surface-container',
+    _ariaRole: 'navigation',
+  })
+  .html`<slot id=slot></slot>`
   .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 */
+      --mdw-ink: var(--mdw-color__on-surface);
+      display: none;
 
-      display: grid;
       align-content: flex-start;
       align-items: flex-start;
       gap: 8px;
 
-      grid-area: nav-bar;
       grid-auto-columns: minmax(48px, 1fr);
       grid-auto-flow: column;
 
@@ -33,20 +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;
     }
-
   `
+  .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);
+      }
+    },
+  })
+  .on({
+    constructed() {
+      window.addEventListener('resize', this.onWindowResize.bind(this));
+    },
+    connected() {
+      this.onWindowResize();
+    },
+  })
   .autoRegister('mdw-nav-bar');

package/components/NavDrawer.js

@@ -1,18 +1,27 @@
-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 {
       --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;
@@ -21,25 +30,16 @@ 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: grid;
-      grid-template-columns: 1fr;
+      display:inline-block;
 
-      min-block-size: 100vh;
-      max-block-size: 100vh;
       inline-size: 360px;
       max-inline-size: calc(100vw - 56px);
-      padding-inline: 0;
-
-      box-shadow: none;
+      padding-inline: 12px;
     }
 
-    #slot {
-      gap: 0;
-
-      inline-size: auto;
-      padding-inline: 12px;
+    ::slotted(mdw-divider) {
+      padding-inline: 16px;
     }
 
   `

package/components/NavDrawerItem.js

@@ -47,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)
+  .mixin(HyperlinkMixin)
+  .mixin(DelegatesFocusMixin)
   .set({
-    delegatesFocus: true,
     stateLayer: true,
   })
   .observe({
@@ -25,7 +27,6 @@ export default class NavItem extends CustomElement
     active: 'boolean',
     icon: 'string',
     src: 'string',
-    href: 'string',
     badge: 'string',
     ariaLabel: 'string', // watch attribute and emit callback
   })
@@ -35,29 +36,36 @@ export default class NavItem extends CustomElement
       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`
-    <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>
+    <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 */
@@ -86,7 +94,7 @@ export default class NavItem extends CustomElement
       padding-inline: 0;
 
       cursor: pointer;
-      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+
       user-select: none;
 
       font: var(--mdw-typescale__label-large__font);
@@ -149,6 +157,8 @@ export default class NavItem extends CustomElement
       /* stylelint-disable-next-line liberty/use-logical-spec */
       left: 50%;
 
+      overflow: hidden;
+
       block-size: 100%;
       inline-size: 100%;
       max-inline-size: 56px;
@@ -157,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;
 
@@ -177,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;
@@ -235,8 +243,6 @@ export default class NavItem extends CustomElement
 
     #icon[active] {
       color: rgb(var(--mdw-ink));
-
-      font-variation-settings: 'FILL' 1;
     }
 
     #slot[active] {
@@ -264,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,39 +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{
-      position: relative;
-      
-      inset-block-start: 0;
-      inset-inline-start: 0;
       align-self: flex-start;
 
-      display: grid;
+      display: inline-grid;
       align-content: flex-start;
       flex-direction: column;
       gap:0;
-      grid-template-rows: auto minmax(0,1fr);
+      grid-template-rows: auto minmax(auto,1fr);
       grid-template-columns: 100%;
       justify-items: stretch;
+      overscroll-behavior: none;
+      overscroll-behavior: contain;
 
-      min-block-size: 100vh;
-      max-block-size: 100vh;
-      min-inline-size: 80px;
-      max-inline-size: 80px;
+      min-block-size: 0;
 
       text-align: center;
     }
@@ -43,6 +47,7 @@ export default Nav
       align-items: center;
       flex-direction: column;
       gap: 12px;
+      justify-content: center;
     }
 
     #slot {
@@ -52,8 +57,6 @@ 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%;
@@ -68,6 +71,5 @@ export default Nav
     #slot[align="end"] {
       align-self: flex-end;
     }
-
   `
   .autoRegister('mdw-nav-rail');

package/components/NavRailItem.js

@@ -9,11 +9,14 @@ export default NavItem
       grid-auto-flow: row;
       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);
 
       min-block-size: 56px;
       flex: none;
-      padding-inline: 12px;
+      padding-inline: 4px;
+
+      font: var(--mdw-typescale__label-medium__font);
+      letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
     }
 
     #slot {