@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/Pane.css

@@ -0,0 +1,261 @@
+/* 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;
+}
+
+/* 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; }

package/components/Pane.js

@@ -0,0 +1,21 @@
+import CustomElement from '../core/CustomElement.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import styles from './Pane.css' assert {type:'css'};
+
+export default CustomElement
+  .mixin(ThemableMixin)
+  .extend()
+  .observe({
+    columns: 'integer',
+    flexible: 'boolean',
+    fixed: 'boolean',
+    split: 'boolean',
+    navDrawer: 'boolean',
+    navRail: 'boolean',
+  })
+  .css(styles)
+  .html/* html */`
+    <slot id=slot></slot>
+  `
+  .autoRegister('mdw-pane');

package/components/Progress.css

@@ -0,0 +1,74 @@
+/* https://m3.material.io/components/progress-indicators/specs */
+
+:host {
+  --mdw-bg: var(--mdw-color__surface-variant);
+  --mdw-ink: var(--mdw-color__primary);
+  --mdw-progress__opacity__duration: 500ms;
+  position: relative;
+
+  display: inline-block;
+  overflow: hidden;
+
+  min-block-size: 4px;
+  inline-size: 100%;
+
+  opacity: 1;
+
+  background-color: rgb(var(--mdw-bg));
+  color: rgb(var(--mdw-ink));
+
+  transition: opacity 500ms 275ms;
+}
+
+:host([auto-hide]) {
+  will-change: opacity;
+}
+
+:host([auto-hide][value="100"]) {
+  opacity:0;
+
+  transition: opacity 1s 1s;
+}
+
+#determinate {
+  --previous: 0;
+  --value: 0;
+}
+
+#progress {
+  position: absolute;
+  inset: 0;
+
+  box-sizing: border-box;
+  block-size: 100%;
+  inline-size: 100%;
+  border: none; /* FireFox */
+
+  -moz-appearance: none;
+  appearance: none;
+
+  opacity:0;
+  transform: scaleX(var(--value, 0));
+  transform-origin: 0 0;
+
+  background-color: currentColor;
+  color: inherit;
+
+  transition: transform 275ms, opacity var(--mdw-progress__opacity__duration);
+  will-change: transform, opacity;
+}
+
+#progress::-webkit-progress-bar {
+  display: none;
+}
+
+#progress::-moz-progress-bar  {
+  display: none; /* Doesn't always work */
+
+  block-size: 0;
+}
+
+#progress[value] {
+  opacity:1;
+  transform: scaleX(var(--value, 0));
+}

package/components/Progress.js

@@ -0,0 +1,67 @@
+import CustomElement from '../core/CustomElement.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import styles from './Progress.css' assert { type: 'css' };
+import circleStyles from './ProgressCircle.css' assert { type: 'css' };
+import lineStyles from './ProgressLine.css' assert { type: 'css' };
+
+// https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element
+
+export default CustomElement
+  .mixin(ThemableMixin)
+  .extend()
+  .observe({
+    circle: 'boolean',
+    value: 'float',
+    max: 'float',
+    autoHide: 'boolean',
+    _determinateStyle: 'string',
+  })
+  .observe({
+    _valueAsFraction: {
+      type: 'float',
+      get({ value, max }) {
+        return (value / (max || 100));
+      },
+      changedCallback(oldValue, newValue) {
+        this._determinateStyle = `
+        --previous:${oldValue ?? newValue ?? 0};
+        --value:${newValue ?? 0};
+      `;
+      },
+    },
+  })
+  .define({
+    position() {
+      return /** @type {HTMLProgressElement} */ (this.refs.progress).position;
+    },
+    labels() {
+      return /** @type {HTMLProgressElement} */ (this.refs.progress).labels;
+    },
+  })
+  .css(
+    styles,
+    lineStyles,
+    circleStyles,
+  )
+  .html/* html */`
+    <div id=determinate style={_determinateStyle}>
+      <progress id=progress value={value} max={max} circle={circle}></progress>
+      <div _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 id=line1 class=line value={value}></div>
+        <div id=line2 class=line value={value}></div>
+      </div>
+      <div _if={circle} id=indeterminate-circle>
+        <div id=arc2 class=arc></div>
+        <div id=arc3 class=arc></div>
+        <div id=arc4 class=arc></div>
+      </div>
+    </div>
+  `
+  .autoRegister('mdw-progress');

package/components/ProgressCircle.css

@@ -0,0 +1,226 @@
+/** https://github.com/material-components/material-components-android/blob/ed77ab36ccac98df24e55060d58406c5981a9062/lib/java/com/google/android/material/progressindicator/CircularIndeterminateAnimatorDelegate.java */
+
+:host {
+  --mdw-progress__circle__timing: cubic-bezier(0.4, 0.0, 0.2, 1);
+  --mdw-progress__circle__margin: 4px;
+  --mdw-progress__circle__duration: 5400ms;
+  --mdw-progress__circle__duration__expand: 667ms;
+  --mdw-progress__circle__duration__collapse: 667ms;
+  --mdw-progress__circle__duration__fade-in: 333ms;
+  --mdw-progress__circle__duration__complete-end: 333ms;
+}
+
+@media (prefers-reduced-motion) {
+  :host {
+    --mdw-progress__circle__duration: 54000ms;
+  }
+}
+
+#circle {
+  --startA: min(0.5, var(--previous));
+  --endA: min(0.5, var(--value));
+  --travelA: max(
+      calc(var(--startA) - var(--endA)),
+      calc(var(--endA) - var(--startA))
+    );
+  --delayA: max(0, calc(var(--previous) - 0.5));
+  --startB: max(0, calc(var(--previous) - 0.5));
+  --endB: max(0, calc(var(--value) - 0.5));
+  --travelB: max(
+      calc(var(--startB) - var(--endB)),
+      calc(var(--endB) - var(--startB))
+    );
+  --delayB: max(0, 0.5 - calc(var(--previous)));
+
+  position: absolute;
+  inset: 0;
+}
+
+:host([circle]) {
+  block-size: 48px;
+  inline-size: 48px;
+}
+
+:host([circle]:not([color])) {
+  background-color: transparent;
+}
+
+#progress[circle] {
+  visibility: hidden;
+}
+
+.semi {
+  position: absolute;
+  inset: var(--mdw-progress__circle__margin);
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+}
+
+#semi1 {
+  inset-inline-start: 50%;
+}
+
+#semi2 {
+  inset-inline-end: 50%;
+}
+
+.semi::after {
+  content: "";
+
+  position: absolute;
+  inset: 0;
+
+  box-sizing: border-box;
+  border: solid currentcolor 4px;
+
+  transform: rotate(var(--rotation));
+
+  background-color: transparent;
+  border-radius: 50%;
+
+  transition: transform 400ms;
+  transition-timing-function: linear;
+}
+
+#semi1::after {
+  --rotation: min(180deg, calc(var(--value) * 360deg));
+  inset-inline-start: -100%;
+
+  clip-path: inset(0 50% 0 0);
+
+  transition-delay: calc(var(--delayA) * var(--mdw-progress__circle__duration__expand));
+  transition-duration: calc(var(--travelA) * var(--mdw-progress__circle__duration__expand));
+}
+
+#semi2::after {
+  --rotation: max(0deg, calc(var(--value) * 360deg - 180deg));
+  inset-inline-end: -100%;
+
+  clip-path: inset(0 0 0 50%);
+
+  transition-delay: calc(var(--delayB) * var(--mdw-progress__circle__duration__expand));
+  transition-duration: calc(var(--travelB) * var(--mdw-progress__circle__duration__expand));
+}
+
+#indeterminate-circle {
+  position: absolute;
+  inset: 0;
+
+  display: block;
+
+  animation: rotate-cw calc(var(--mdw-progress__circle__duration) / 4) linear infinite;
+}
+
+.arc {
+  position: absolute;
+  inset: var(--mdw-progress__circle__margin);
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+
+  animation: rotate-jump var(--mdw-progress__circle__duration) steps(1,end) infinite;
+}
+
+.arc::after {
+  content: "";
+
+  position: absolute;
+  inset: 0;
+
+  box-sizing: border-box;
+  border: solid currentcolor 4px;
+
+  background-color: transparent;
+  border-radius: 50%;
+
+  animation: grow-shrink calc(var(--mdw-progress__circle__duration) / 4) var(--mdw-progress__circle__timing) infinite;
+}
+
+#arc2 {
+  inset-block-end: 50%;
+  inset-inline-start: 50%;
+
+  transform-origin: 0 100%;
+}
+
+#arc3 {
+  inset-block-start: 50%;
+  inset-inline-end: 50%;
+
+  transform-origin: 100% 0;
+}
+
+#arc4 {
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+
+  transform-origin: 0 0;
+}
+
+#arc2:after {
+  inset-block-end: -100%;
+  inset-inline-start: -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%;
+
+  clip-path: inset(0 50% 50% 0);
+}
+
+#arc4:after {
+  inset-block-start: -100%;
+  inset-inline-start: -100%;
+
+  clip-path: inset(0 50% 0 0);
+}
+
+@keyframes rotate-cw {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes rotate-jump {
+  0% { transform: scaleX(1) rotate(0deg); }
+
+  12.5% { transform: scaleX(-1) rotate(-270deg); }
+
+  25% { transform: scaleX(1) rotate(270deg); }
+
+  37.5% {transform: scaleX(-1) rotate(-180deg);}
+
+  50% { transform: scaleX(1) rotate(180deg); }
+
+  62.5% { transform: scaleX(-1) rotate(-90deg); }
+
+  75% { transform: scaleX(1) rotate(90deg); }
+
+  87.5% { transform: scaleX(-1) rotate(0deg); }
+
+  to { transform: scaleX(1) rotate(0deg); }
+}
+
+@keyframes grow-shrink {
+  from {
+    transform: rotate(calc(0.01 * 360deg));
+  }
+
+  50% {
+    transform: rotate(calc(0.73 * 360deg));
+  }
+
+  to {
+    transform: rotate(calc(0.01 * 360deg));
+  }
+}