@shortfuse/materialdesignweb 0.7.1-0 → 0.7.1-1

package/components/Menu.js

@@ -7,8 +7,6 @@ import DensityMixin from '../mixins/DensityMixin.js';
 import KeyboardNavMixin from '../mixins/KeyboardNavMixin.js';
 import { canAnchorPopup } from '../utils/popup.js';
 
-import styles from './Menu.css' assert { type: 'css' };
-
 /**
  * @typedef {Object} MenuStack
  * @prop {HTMLElement} element
@@ -110,7 +108,6 @@ export default CustomElement
       },
     },
   })
-  .css(styles)
   .html/* html */`
     <dialog id=dialog role=menu aria-hidden=${({ open }) => (open ? 'false' : 'true')}>
       <div id=scrim aria-hidden=true modal={modal}></div>
@@ -124,6 +121,179 @@ export default CustomElement
       </form>
     </dialog>
   `
+  .css`
+    /* https://m3.material.io/components/menus/specs */
+
+    :host {
+      --mdw-menu__transform-origin-inline-start: left;
+      --mdw-menu__transform-origin-inline-end: right;
+      /* Normal */
+      --mdw-menu__transform-origin-x: var(--mdw-menu__transform-origin-inline-start);
+      /* Down */
+      --mdw-menu__transform-origin-y: top;
+      --mdw-menu__inline-base: 56px;
+      --mdw-menu__size: 2;
+      --mdw-bg: var(--mdw-color__surface);
+      --mdw-ink: var(--mdw-color__on-surface);
+      position: absolute;
+      /* Default position is bottom */
+      /* Default direction is start */
+      inset-block: 100% auto;
+      inset-inline: auto 0;
+
+      display: block;
+      /* Hide scrollbar */
+      -ms-overflow-style: none;
+      /* Scroll mask */
+      overscroll-behavior: none;
+      overscroll-behavior: contain;
+      scrollbar-width: none;
+
+      pointer-events: none;
+
+      transform-origin: var(--mdw-menu__transform-origin-x) var(--mdw-menu__transform-origin-y);
+
+      transition-duration: motion.$fadeOutDuration;
+      transition-property: none;
+      transition-timing-function: motion.$decelerateEasing;
+    }
+
+    :host(::after) {
+      content: '';
+
+      display: block;
+
+      block-size: 200%;
+      inline-size: 200%;
+    }
+
+    :host(::-webkit-scrollbar) {
+      display: none;
+    }
+
+    dialog {
+      position: fixed;
+      inset: 0;
+
+      box-sizing: border-box;
+      block-size:100%;
+      max-block-size: none;
+      inline-size:100%;
+      max-inline-size: none;
+      margin: 0;
+      border: none;
+      padding: 0;
+
+      opacity: 0;
+      visibility: hidden;
+      z-index: 24;
+
+      background-color: transparent;
+
+      transition: none;
+      transition-property: opacity;
+      will-change: opacity;
+    }
+
+    dialog::backdrop {
+      /** Use scrim instead */
+      display: none;
+    }
+
+    dialog[aria-hidden="false"],
+    dialog:modal {
+      display: block;
+
+      pointer-events: none;
+
+      opacity: 1;
+      visibility: visible;
+
+      transition-duration: var(--mdw-dialog__fade-in-duration);
+      transition-property: opacity;
+      transition-timing-function: var(--mdw-dialog__deceleration-easing);
+    }
+
+    #scrim {
+      position: fixed;
+      inset: 0;
+
+      overflow-y: scroll;
+      overscroll-behavior: none;
+      overscroll-behavior: contain;
+      scrollbar-width: none;
+
+      block-size: 100%;
+      inline-size: 100%;
+
+      cursor: default;
+      pointer-events: auto;
+      -webkit-tap-highlight-color: transparent;
+
+      visibility: hidden; /* Only show if [modal] */
+
+      z-index:0;
+    }
+
+    #form {
+      display: contents;
+    }
+
+    #scrim::-webkit-scrollbar {
+      display: none;
+    }
+
+    #scrim::after {
+      content: '';
+
+      display: block;
+
+      block-size: 200%;
+      inline-size: 200%;
+    }
+
+    #surface {
+      --mdw-shape__size: var(--mdw-shape__extra-small);
+      position: sticky;
+
+      display: inline-flex;
+      flex-direction: column;
+
+      inline-size: calc(var(--mdw-menu__size) * var(--mdw-menu__inline-base));
+      min-inline-size: calc(var(--mdw-menu__inline-base) * 2);
+      max-inline-size: 100vw;
+      flex:1;
+
+      pointer-events: auto;
+      /* background-color: rgb(var(--mdw-color__surface)); */
+      /* color: rgb(var(--mdw-color__on-surface)); */
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      will-change: top, left;
+    }
+
+    @supports(-moz-appearance: none) {
+      #surface {
+        position: absolute;
+      }
+    }
+
+    #scroller {
+      display: flex;
+      align-items: stretch;
+      flex-direction: column;
+      overflow-y: auto;
+      overscroll-behavior: none;
+      overscroll-behavior: contain;
+
+      flex: 1;
+
+      padding-block: 8px;
+    }
+
+    #scrim[modal] {
+      visibility: visible;
+    }
+  `
   .methods({
     focus() {
       const [firstItem] = this.kbdNavChildren;

package/components/MenuItem.js

@@ -4,7 +4,6 @@ import FormAssociatedMixin from '../mixins/FormAssociatedMixin.js';
 
 import './Icon.js';
 import ListOption from './ListOption.js';
-import styles from './MenuItem.css' assert { type: 'css' };
 
 export default class MenuItem extends ListOption
   .mixin(FormAssociatedMixin)
@@ -101,7 +100,6 @@ export default class MenuItem extends ListOption
       this._cascading = false;
     },
   })
-  .css(styles)
   .on({
     _selectedChanged(oldValue, newValue) {
       console.log('_selectedChanged', oldValue, newValue);
@@ -206,6 +204,61 @@ export default class MenuItem extends ListOption
       trailingIcon.textContent = '{computeTrailingIcon}';
     },
   })
+  .css`
+    /* https://m3.material.io/components/menus/specs */
+
+    :host {
+      gap: 12px;
+
+      padding-inline: 12px;
+
+      cursor: pointer;
+
+      white-space: nowrap;
+    }
+
+    #content {
+      padding-block: calc(4px + (var(--mdw-density) * 2px))
+    }
+
+    #icon {
+      transition-duration: 100ms;
+      transition-property: opacity;
+      will-change: opacity;
+    }
+
+    #trailing,
+    #icon {
+      color: rgb(var(--mdw-color__on-surface-variant));
+    }
+
+    #selection {
+      opacity: 0;
+
+      font-size: 18px;
+    }
+
+    #selection.trailing {
+      font-size: 24px;
+    }
+
+    #selection[selected] {
+      opacity: 1;
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
+    #anchor[selected] {
+      background-color: transparent;
+      color: inherit;
+    }
+
+    #content[selected] {
+      color: inherit;
+    }
+  `
   .autoRegister('mdw-menu-item')
   .tsClassFix() {
   formResetCallback() {

package/components/Nav.js

@@ -1,10 +1,27 @@
-import styles from './Nav.css' assert { type: 'css' };
 import NavItem from './NavItem.js';
 import Surface from './Surface.js';
 
 export default Surface
   .extend()
-  .css(styles)
+  .css`
+    /* https://m3.material.io/components/navigation-bar/specs */
+    /* https://m3.material.io/components/navigation-drawer/specs */
+    /* 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);
+
+      z-index:2;
+
+      color: rgb(var(--mdw-ink));
+
+      font: var(--mdw-typescale__label-medium__font);
+      letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
+    }
+  `
   .set({
     elevated: true,
     color: 'surface',

package/components/NavBar.js

@@ -2,7 +2,6 @@ import { ELEMENT_STYLER_TYPE } from '../core/customTypes.js';
 import ScrollListenerMixin from '../mixins/ScrollListenerMixin.js';
 
 import Nav from './Nav.js';
-import styles from './NavBar.css' assert { type: 'css' };
 
 export default Nav
   .mixin(ScrollListenerMixin)
@@ -50,7 +49,43 @@ export default Nav
       }
     },
   })
-  .css(styles)
+  .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 */
+
+      display: grid;
+      align-content: flex-start;
+      align-items: flex-start;
+      gap: 8px;
+      grid-auto-columns: minmax(48px, 1fr);
+      grid-auto-flow: column;
+
+      overflow: hidden; /* Don't expand viewport when contents translates */
+
+      box-sizing: border-box;
+      min-block-size: 80px;
+      inline-size: 100%;
+
+      flex-shrink: 0;
+
+      transform: translateY(0);
+
+      box-shadow: none;
+
+      text-align: center;
+
+      will-change: transform;
+    }
+
+    #slot {
+      pointer-events: auto;
+    }
+
+  `
   .on({
     connected() {
       if (this.hideOnScroll) {

package/components/NavBarItem.js

@@ -1,7 +1,49 @@
-import styles from './NavBarItem.css' assert { type: 'css' };
 import NavItem from './NavItem.js';
 
 export default NavItem
   .extend()
-  .css(styles)
+  .css`
+    /* https://m3.material.io/components/navigation-bar/specs */
+    /* https://m3.material.io/components/navigation-drawer/specs */
+    /* https://m3.material.io/components/navigation-rail/specs */
+
+    :host {
+      grid-auto-rows: minmax(20px, min-content);
+      grid-template-rows: [icon] minmax(32px, 1fr);
+      grid-template-columns: auto [icon] minmax(56px, 1fr) auto;
+
+      padding-block: 12px; /* Spec 16px bottom is based on 1em not 1lh */
+    }
+
+    #slot {
+      display: block;
+    }
+
+    :host(:empty) {
+      font-size: 0;
+      line-height: 0;
+    }
+
+    #slot[show-label] {
+      grid-column: 1 /4;
+
+      grid-row: 2;
+
+      opacity: 0;
+    }
+
+    #shape {
+      grid-column: 2;
+      grid-row: 1 / 1;
+    }
+
+    #slot[show-label="never"] {
+      block-size: 0;
+    }
+
+    #slot[show-label="active"][active] {
+      opacity: 1;
+    }
+
+  `
   .autoRegister('mdw-nav-bar-item');

package/components/NavDrawer.js

@@ -1,13 +1,45 @@
-import styles from './NavDrawer.css' assert { type: 'css' };
 import NavRail from './NavRail.js';
 
 export default NavRail
   .extend()
-  .css(styles)
   .observe({
     shapeEnd: {
       type: 'boolean',
       empty: true,
     },
   })
+  .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);
+      --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;
+      --mdw-nav-item__badge__grid-area: badge;
+      --mdw-nav-item__label__padding-block: 18px;
+      --mdw-nav-item__label__padding-inline: 52px 0;
+      --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);
+
+      min-inline-size: 360px;
+      padding-inline: 12px;
+
+      box-shadow: none;
+
+    }
+
+    #slot {
+      gap: 0;
+    }
+
+  `
   .autoRegister('mdw-nav-drawer');

package/components/NavDrawerItem.js

@@ -1,9 +1,51 @@
-import styles from './NavDrawerItem.css' assert { type: 'css' };
 import NavItem from './NavItem.js';
 
 export default NavItem
   .extend()
-  .css(styles)
+  .css`
+    /* https://m3.material.io/components/navigation-bar/specs */
+    /* https://m3.material.io/components/navigation-drawer/specs */
+    /* https://m3.material.io/components/navigation-rail/specs */
+
+    :host {
+      align-self: stretch;
+
+      display: grid;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      grid-template:
+        "icon label badge" minmax(56px, min-content)
+        / 24px 1fr minmax(0, min-content);
+      justify-items: flex-start;
+
+      padding-inline: 16px 24px;
+    }
+
+    #icon {
+      grid-area: icon;
+    }
+
+    #slot {
+      display: block;
+
+      text-align: start;
+    }
+
+    :host([active]) {
+      color: rgb(var(--mdw-ink));
+    }
+
+    #shape {
+      max-inline-size: none;
+      grid-column: auto;
+      grid-row: 1 / 2;
+    }
+
+    #badge-text {
+      z-index: 1;
+    }
+  `
   .on({
     composed({ html }) {
       this.refs.badge.replaceWith(html`<span id="badge-text">{badge}</span>`);

package/components/NavItem.js

@@ -8,8 +8,6 @@ import ShapeMixin from '../mixins/ShapeMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import styles from './NavItem.css' assert { type: 'css' };
-
 /** @typedef {'charset'|'coords'|'name'|'shape'} DeprecatedHTMLAnchorElementProperties */
 
 export default class NavItem extends CustomElement
@@ -36,7 +34,6 @@ export default class NavItem extends CustomElement
       this.refs.anchor.focus(options);
     },
   })
-  .css(styles)
   .html/* html */`
     <mdw-icon id=icon aria-hidden=true src={src} active={active}>{icon}</mdw-icon>
     <a id=anchor
@@ -61,6 +58,189 @@ export default class NavItem extends CustomElement
       shape.removeAttribute('color');
     },
   })
+  .css`
+    /* https://m3.material.io/components/navigation-bar/specs */
+    /* https://m3.material.io/components/navigation-drawer/specs */
+    /* https://m3.material.io/components/navigation-rail/specs */
+
+    :host {
+      --mdw-badge__scale: 0;
+      --mdw-shape__size: var(--mdw-shape__full);
+      --mdw-nav-item__offset-y: 0;
+      position: relative;
+
+      display: grid;
+      align-content: center;
+      align-items: center;
+      grid-auto-flow: row;
+      grid-auto-rows: minmax(20px, min-content);
+      grid-template-rows: [icon] minmax(32px, 1fr);
+      grid-template-columns: [icon] minmax(56px, 1fr);
+
+      justify-items: center;
+      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);
+      letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
+
+      text-align: center;
+    }
+
+    :host(:not([color])) {
+      --mdw-ink: var(--mdw-color__on-secondary-container);
+      --mdw-bg: var(--mdw-color__secondary-container);
+    }
+
+    :host([color]) {
+      background-color: transparent;
+      color: rgb(var(--mdw-color__on-surface-variant));
+    }
+
+    #slot {
+      display: contents;
+      align-items: center;
+      flex-direction: column;
+      grid-area: label;
+      justify-content: center;
+
+      grid-column: 1 /4;
+
+      grid-row: 2;
+
+      flex: 1;
+
+      cursor: inherit;
+      outline: none;
+
+      transform: translateY(var(--mdw-nav-item__offset-y));
+
+      color: rgb(var(--mdw-color__on-surface-variant));
+
+      transition: opacity, color, transform 200ms;
+      will-change: opacity, transform;
+    }
+
+    #anchor {
+      position: absolute;
+      inset: 0;
+    }
+
+    #shape {
+      position: absolute;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      top: 50%;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      left: 50%;
+
+      block-size: 100%;
+      inline-size: 100%;
+      max-inline-size: 56px;
+
+      grid-column: icon;
+      grid-row: 1 / 1;
+
+      transform: translateX(-50%) translateY(-50%) translateY(var(--mdw-nav-item__offset-y));
+      z-index: 0;
+
+      background-color: transparent;
+
+      transition: transform 200ms;
+      will-change: transform;
+    }
+
+    #icon {
+      position: relative;
+      align-self: center;
+
+      grid-area: icon;
+
+      transform: translateY(var(--mdw-nav-item__offset-y));
+      z-index: 3;
+
+      color: rgb(var(--mdw-color__on-surface-variant));
+
+      font-size: 24px;
+      font-variation-settings: 'FILL' 0;
+
+      transition: transform 200ms;
+      will-change: transform;
+    }
+
+    #state {
+      z-index: 2;
+    }
+
+    #badge {
+      --mdw-badge__scale: 0;
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+
+      overflow: hidden;
+
+      max-inline-size: 50%;
+      grid-column: 1 / 4;
+
+      grid-row: 1 / 2;
+
+      transform: translateY(-100%) translateY(var(--mdw-nav-item__offset-y)) scale(var(--mdw-badge__scale));
+      z-index: 4;
+
+      text-align: start;
+      text-overflow: ellipsis;
+      text-transform: none;
+      white-space: nowrap;
+      word-break: normal;
+
+      transition: transform 200ms;
+      will-change: transform;
+    }
+
+    #badge[badge] {
+      --mdw-badge__scale: 1;
+    }
+
+    #ripple {
+      opacity: 1;
+
+      color: rgb(var(--mdw-bg));
+    }
+
+    #ripple-container {
+      z-index:1;
+    }
+
+    #shape[active] {
+      color: rgb(var(--mdw-ink));
+    }
+
+    #icon[active] {
+      color: rgb(var(--mdw-ink));
+
+      font-variation-settings: 'FILL' 1;
+    }
+
+    #slot[active] {
+      color: inherit;
+    }
+
+    :host([show-label]) {
+      --mdw-nav-item__offset-y: 12px;
+    }
+
+    :host([show-label="active"][active]) {
+      --mdw-nav-item__offset-y: 0;
+    }
+  `
   .childEvents({
     anchor: {
       click() {