@shortfuse/materialdesignweb 0.7.6 → 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

@@ -1,281 +1,18 @@
-import CustomElement from '../core/CustomElement.js';
-import ThemableMixin from '../mixins/ThemableMixin.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
 
-export default CustomElement
-  .mixin(ThemableMixin)
+import Box from './Box.js';
+
+export default Box
   .extend()
-  .observe({
-    columns: 'integer',
-    flexible: 'boolean',
-    fixed: 'boolean',
-    split: 'boolean',
-    navDrawer: 'boolean',
-    navRail: 'boolean',
-  })
-  .html/* html */`
-    <slot id=slot></slot>
-  `
+  .mixin(ShapeMixin)
   .css`
-    /* https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins */
-    /*
-    * Window breakpoints
-    * Compact (0 <= width < 600px):
-    *   * Single: 100vw - padding
-    *   * Padding: 16px
-    *   * Spacer: 0 (none)
-    * Medium (600px <= width < 840px)
-    *   * Single: 100vw - padding - (?navrail)
-    *   * [Fixed]: 360px
-    *   * [Flexable]: 100vw - 360px - spacer - padding
-    *   * [Split] 50vw - ((padding + spacer) / 2)
-    *   * Padding: 24px
-    *   * Spacer: 24px
-    * Expanded (840px <= width)
-    *   * Single: 100vw - padding - (?navrail | ?navdrawer)
-    *   * [Fixed] 360px
-    *   * [Flexable] 100vw - 360px - spacer - padding - (?navrail | ?navdrawer)
-    *   * [Split] 50vw - ((padding + spacer + (?navrail | ?navdrawer)) / 2)
-    *   * Padding: 24px
-    *   * Spacer: 24px
-    *
-    * | Screen size         | Margin  | Body    | Layout columns |
-    * |---------------------|---------|---------|----------------|
-    * | Extra-small (phone) |         |         |                |
-    * | 0-631dp             | 16dp    | Scaling | 4              |
-    * | 632 - 647           | Scaling | 600dp   | 8              |
-    * | Small (tablet)      |         |         |                |
-    * | 648-887             | 24dp    | Scaling | 8              |
-    * | 888-1239            | Scaling | 840dp   | 12             |
-    * | Medium (laptop)     |         |         |                |
-    * | 1240-1439           | 200dp   | Scaling | 12             |
-    * | Large (desktop)     |         |         |                |
-    * | 1440+               | Scaling | 1040    | 12             |
-    *
-    *
-    * Column count is pane-based, not window based requiring newly computed values.
-    * Gutters are irrelevant to pane sizing.
-    * Nav Rail is ~80px.
-    * Nav Drawer is ~360px.
-    * Padding and spacers are set by pane's parent.
-    * Avoid using CSS Variables because panes are at top of document tree. https://bugs.chromium.org/p/chromium/issues/detail?id=1056209
-    * Container queries would reduce code considerably.
-    */
-
-    /* Compact */
     :host {
-      display: grid;
-      align-content: flex-start;
-      gap: 16px;
-      grid-auto-flow: row;
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-
-      flex: 1;
-
-      transition-duration: 200ms;
-      /* stylelint-disable-next-line liberty/use-logical-spec */
-      transition-property: visibility, width, max-inline-size;
-    }
-
-    /* Will set 8col when window is 600px + padding (2x16) */
-    /* Will set 12col when window is 840px + padding (2x24) */
-    @media screen and (min-width: 632px) { :host { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 888px) { :host { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to 840px when window is 600px + padding (2x24px) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) */
-    @media screen and (min-width: 648px) { :host { max-inline-size: 840px } }
-    @media screen and (min-width: 1240px) { :host { max-inline-size: 1040px; } }
-
-    /* NAVRAIL */
-
-    :host([nav-rail]) {
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-    }
-
-    /* Will set  8col when window is 600px + padding (2x24) + navrail (80)  */
-    /* Will set 12col when window is 840px + padding (2x24) + navrail (80) */
-    @media screen and (min-width: 728px) { :host([nav-rail]) { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 968px) { :host([nav-rail]) { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to  840px when window is 600px + padding (2x24px) + navrail (80) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) + navrail (80) */
-    @media screen and (min-width: 728px) { :host([nav-rail]) { max-inline-size: 840px } }
-    @media screen and (min-width: 1320px) { :host([nav-rail]) { max-inline-size: 1040px; } }
-
-    /* NAVDRAWER */
-
-    :host([nav-drawer]) {
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-    }
-
-    /* Will set  8col when window is 600px + padding (2x24) + navdrawer (360)  */
-    /* Will set 12col when window is 840px + padding (2x24) + navdrawer (360) */
-    @media screen and (min-width: 1008px) { :host([nav-rail]) { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 1248px) { :host([nav-rail]) { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to  840px when window is 600px + padding (2x24px) + navrail (360) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) + navrail (360) */
-    @media screen and (min-width: 1008px) { :host([nav-rail]) { max-inline-size: 840px } }
-    @media screen and (min-width: 1600px) { :host([nav-rail]) { max-inline-size: 1040px; } }
-
-    /* FLEXIBLE */
-
-    :host([flexible]) {
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-    }
-
-    /* Will set  8col when window is 600px + padding (2x24) + spacer (24) + fixed (360)  */
-    /* Will set 12col when window is 840px + padding (2x24) + spacer (24) + fixed (360) */
-    @media screen and (min-width: 1032px) { :host([flexible]) { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 1272px) { :host([flexible]) { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + fixed (360) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + fixed (360) */
-    @media screen and (min-width: 1032px) { :host([flexible]) { max-inline-size: 840px } }
-    @media screen and (min-width: 1624px) { :host([flexible]) { max-inline-size: 1040px; } }
-
-    /* FLEXIBLE + NAV RAIL */
-
-    :host([flexible]:where([nav-rail])) {
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-    }
-
-    /* Will set  8col when window is 600px + padding (2x24) + spacer (24) + fixed (360) + navrail (80)   */
-    /* Will set 12col when window is 840px + padding (2x24) + spacer (24) + fixed (360) + navrail (80) */
-    @media screen and (min-width: 1112px) { :host([flexible]:where([nav-rail])) { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 1352px) { :host([flexible]:where([nav-rail])) { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + fixed (360) + navrail (80) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + fixed (360) + navrail (80) */
-    @media screen and (min-width: 1112px) { :host([flexible]:where([nav-rail])) { max-inline-size: 840px } }
-    @media screen and (min-width: 1704px) { :host([flexible]:where([nav-rail])) { max-inline-size: 1040px; } }
-
-    /* FLEXIBLE + NAV DRAWER */
-
-    :host([flexible]:where([nav-drawer])) {
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-    }
-
-    /* Will set  8col when window is 600px + padding (2x24) + spacer (24) + fixed (360) + navdrawer (360)   */
-    /* Will set 12col when window is 840px + padding (2x24) + spacer (24) + fixed (360) + navdrawer (360) */
-    @media screen and (min-width: 1392px) { :host([flexible]:where([nav-drawer])) { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 1632px) { :host([flexible]:where([nav-drawer])) { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + fixed (360) + navdrawer (360) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + fixed (360) + navdrawer (360) */
-    @media screen and (min-width: 1392px) { :host([flexible]:where([nav-drawer])) { max-inline-size: 840px } }
-    @media screen and (min-width: 1984px) { :host([flexible]:where([nav-drawer])) { max-inline-size: 1040px; } }
-
-    /* SPLIT */
-
-    :host([split]) {
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-    }
-
-    /* Will set  8col when window is 600px + padding (2x24) + spacer (24) + split (600)  */
-    /* Will set 12col when window is 840px + padding (2x24) + spacer (24) + split (840) */
-    @media screen and (min-width: 1272px) { :host([split]) { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 1752px) { :host([split]) { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + split (600) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + split (840) */
-    @media screen and (min-width: 1272px) { :host([split]) { max-inline-size: 840px } }
-    @media screen and (min-width: 2104px) { :host([split]) { max-inline-size: 1040px; } }
-
-    /* SPLIT + NAVRAIL */
-
-    :host([split]:where([nav-rail])) {
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
+      --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));
+      
     }
-
-    /* Will set  8col when window is 600px + padding (2x24) + spacer (24) + split (600) + navrail (80) */
-    /* Will set 12col when window is 840px + padding (2x24) + spacer (24) + split (840) + navrail (80) */
-    @media screen and (min-width: 1352px) { :host([split]:where([nav-rail])) { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 1832px) { :host([split]:where([nav-rail])) { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + split (600) + navrail (80) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + split (840) + navrail (80) */
-    @media screen and (min-width: 1352px) { :host([split]:where([nav-rail])) { max-inline-size: 840px } }
-    @media screen and (min-width: 2184px) { :host([split]:where([nav-rail])) { max-inline-size: 1040px; } }
-
-    /* SPLIT + NAVDRAWER */
-
-    :host([split]:where([nav-drawer])) {
-      grid-template-columns: repeat(4, 1fr);
-
-      max-inline-size: 600px;
-    }
-
-    /* Will set  8col when window is 600px + padding (2x24) + spacer (24) + split (600) + navdrawer (360)  */
-    /* Will set 12col when window is 840px + padding (2x24) + spacer (24) + split (840) + navdrawer (360) */
-    @media screen and (min-width: 1632px) { :host([split]:where([nav-drawer])) { grid-template-columns: repeat(8, 1fr); } }
-    @media screen and (min-width: 2112px) { :host([split]:where([nav-drawer])) { grid-template-columns: repeat(12, 1fr); } }
-
-    /* Will cap to 840px when window is 600px + padding (2x24px) + spacer (24) + split (600) + navdrawer (360) */
-    /* Will cap to 1040px when window is 840px + padding (2x200px) + spacer (24) + split (840) + navdrawer (360) */
-    @media screen and (min-width: 1632px) { :host([split]:where([nav-drawer])) { max-inline-size: 840px } }
-    @media screen and (min-width: 2464px) { :host([split]:where([nav-drawer])) { max-inline-size: 1040px; } }
-
-    :host([full-width]) {
-      max-inline-size: none;
-    }
-
-    /** FIXED **/
-
-    :host([fixed]) {
-      grid-template-columns: repeat(4, 1fr);
-
-      inline-size:360px;
-    }
-
-    @media screen and (max-width: 600px) {
-      :host(:nth-of-type(2)) {
-        display: none;
-      }
-    }
-    /* Will cap to 360px when window is 360px + padding (2x24px) + spacer (24) + 360px */
-    @media screen and (min-width: 792px) {
-      :host([fixed]) {
-        max-inline-size: 360px
-      }
-    }
-
-    #scrim {
-      position: absolute;
-      inset: 0;
-
-      grid-area: auto;
-    }
-
-    #slot::slotted(*) { grid-column: 1 / none }
-    #slot::slotted([colspan="1"]) { grid-column-end: span 1; }
-    #slot::slotted([colspan="2"]) { grid-column-end: span 2; }
-    #slot::slotted([colspan="3"]) { grid-column-end: span 3; }
-    #slot::slotted([colspan="4"]) { grid-column-end: span 4; }
-    #slot::slotted([colspan="5"]) { grid-column-end: span 5; }
-    #slot::slotted([colspan="6"]) { grid-column-end: span 6; }
-    #slot::slotted([colspan="7"]) { grid-column-end: span 7; }
-    #slot::slotted([colspan="8"]) { grid-column-end: span 8; }
-    #slot::slotted([colspan="9"]) { grid-column-end: span 9; }
-    #slot::slotted([colspan="10"]) { grid-column-end: span 10; }
-    #slot::slotted([colspan="11"]) { grid-column-end: span 11; }
-    #slot::slotted([colspan="12"]) { grid-column-end: span 12; }
-
   `
   .autoRegister('mdw-pane');

package/components/Popup.js

@@ -0,0 +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 ThemableMixin from '../mixins/ThemableMixin.js';
+
+export default CustomElement
+  .extend()
+  .mixin(ThemableMixin)
+  .mixin(ElevationMixin)
+  .mixin(ShapeMixin)
+  .mixin(PopupMixin)
+  .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/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);
     }