@shortfuse/materialdesignweb 0.7.1-0 → 0.7.1-1

package/components/Progress.js

@@ -1,10 +1,8 @@
+/* https://m3.material.io/components/progress-indicators/specs */
+
 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
@@ -39,13 +37,8 @@ export default CustomElement
       return /** @type {HTMLProgressElement} */ (this.refs.progress).labels;
     },
   })
-  .css(
-    styles,
-    lineStyles,
-    circleStyles,
-  )
   .html/* html */`
-    <div id=determinate style={_determinateStyle}>
+    <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>
@@ -64,4 +57,470 @@ export default CustomElement
       </div>
     </div>
   `
+  .css`
+    /* Base Styles */
+
+    :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;
+      vertical-align: middle;
+
+      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));
+    }
+  `
+  .css`
+    /* Line Styles */
+
+    /* https://github.com/material-components/material-components-android/blob/ed77ab36ccac98df24e55060d58406c5981a9062/lib/java/com/google/android/material/progressindicator/ */
+
+    :host {
+      --mdw-progress__line1-head__timing: cubic-bezier(0.2, 0.8, 0, 1.0);
+      --mdw-progress__line1-tail__timing: cubic-bezier(0.4, 0.0, 1.0, 1.0);
+      --mdw-progress__line2-head__timing: cubic-bezier(0.0, 0.65, 0, 1.0);
+      --mdw-progress__line2-tail__timing: cubic-bezier(0.1, 0.45, 0, 1.0);
+      --mdw-progress__line__duration: 1800ms;
+    }
+
+    @media (prefers-reduced-motion) {
+      :host {
+        --mdw-progress__line__duration: 18000ms
+      }
+    }
+
+    .line {
+      opacity: 1;
+
+      transition: opacity var(--mdw-progress__opacity__duration);
+      will-change: opacity;
+    }
+
+    .line,
+    .line::after {
+      position: absolute;
+      inset: 0;
+
+      overflow: hidden;
+
+      animation-duration: var(--mdw-progress__line__duration);
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+      animation-fill-mode: forwards;
+    }
+
+    .line::after {
+      content: '';
+
+      background-color: currentColor;
+
+      animation: inherit;
+      will-change: transform;
+    }
+
+    #line1 {
+      animation-name: l1h;
+    }
+
+    #line2 {
+      animation-name: l2h;
+    }
+
+    #line1::after {
+      animation-name: l1t;
+    }
+
+    #line2::after {
+      animation-name: l2t;
+    }
+
+    .line[value] {
+      opacity: 0;
+      visibility: hidden;
+
+      transition: opacity var(--mdw-progress__opacity__duration), visibility 1ms var(--mdw-progress__opacity__duration);
+    }
+
+    /**
+      * L1H = 1267 / +533 = 70.39% - 100%
+      * L1T = 1000 / +567 = 55.56% - 87.05%
+      * L2H = 0333 / +850 = 18.50% - 65.72%
+      * L2T = 0000 / +750 = 0% - 41.67%
+      * Total = 1800ms
+      *
+      *    t      l1h    l1t      l2h     l2t
+      * --------------------------------------
+      * 0.0000  0.0000  0.0000  0.0000  0.0000
+      * 0.1850  0.0000  0.0000  0.0000  0.5899
+      * 0.4167  0.0000  0.0000  0.7374  1.0000
+      * 0.5556  0.0000  0.0000  0.9072  1.0000
+      * 0.6572  0.0000  0.1544  1.0000  1.0000
+      * 0.7039  0.0000  0.2939  1.0000  1.0000
+      * 0.8706  0.7918  1.0000  1.0000  1.0000
+      * 1.0000  1.0000  1.0000  1.0000  1.0000
+    */
+
+    @keyframes l1h {
+      0% {
+        transform: translateX(0%);
+      }
+
+      70.4% {
+        transform: translateX(0%);
+
+        animation-timing-function: var(--mdw-progress__line1-head__timing);
+      }
+
+      100% {
+        transform: translateX(100%);
+      }
+    }
+    @keyframes l1t {
+      0% {
+        transform: translateX(-100%);
+      }
+
+      55.6% {
+        transform: translateX(-100%);
+
+        animation-timing-function: var(--mdw-progress__line1-tail__timing);
+      }
+
+      87.1% {
+        transform: translateX(0%);
+      }
+
+      100% {
+        transform: translateX(0%);
+      }
+    }
+    @keyframes l2h {
+      0% {
+        transform: translateX(0%);
+      }
+
+      18.5% {
+        transform: translateX(0%);
+
+        animation-timing-function: var(--mdw-progress__line2-head__timing);
+      }
+
+      65.72% {
+        transform: translateX(100%);
+      }
+
+      to {
+        transform: translateX(100%);
+      }
+    }
+    @keyframes l2t {
+      0% {
+        transform: translateX(-100%);
+
+        animation-timing-function: var(--mdw-progress__line2-tail__timing);
+      }
+
+      41.67% {
+        transform: translateX(0%);
+      }
+
+      to {
+        transform: translateX(0%);
+      }
+    }
+
+  `
+  .css`
+    /* Circle Styles */
+    /** 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));
+      }
+    }
+  `
   .autoRegister('mdw-progress');

package/components/Radio.js

@@ -7,8 +7,6 @@ import StateMixin from '../mixins/StateMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 import TouchTargetMixin from '../mixins/TouchTargetMixin.js';
 
-import styles from './Radio.css' assert { type: 'css' };
-
 export default CustomElement
   .mixin(ThemableMixin)
   .mixin(StateMixin)
@@ -20,7 +18,6 @@ export default CustomElement
     type: 'radio',
     stateLayer: true,
   })
-  .css(styles)
   .on({
     composed({ html }) {
       const { label, rippleContainer, state, control, touchTarget } = this.refs;
@@ -39,4 +36,101 @@ export default CustomElement
       control.setAttribute('type', 'radio');
     },
   })
+  .css`
+    /* https://m3.material.io/components/radio/specs */
+
+    :host {
+      --mdw-ink: var(--mdw-color__primary);
+      --mdw-shape__size: var(--mdw-shape__full);
+      display: inline-grid;
+      align-items: baseline;
+      gap: 12px;
+      grid-auto-flow: column;
+      grid-template-rows: minmax(20px, auto);
+      grid-template-columns: 20px;
+      justify-content: flex-start;
+
+      cursor: pointer;
+
+      transition: none 100ms cubic-bezier(0.4, 0.0, 1, 1);
+    }
+
+    :host(:empty) {
+      vertical-align: -11.5%;
+
+      line-height: 20px;
+    }
+
+    :host(:empty) #radio {
+      transform: none;
+    }
+
+    #control {
+      grid-column: 1/1;
+
+      cursor: inherit;
+    }
+
+    #label {
+      cursor: inherit;
+    }
+
+    #label[disabled] {
+      cursor: not-allowed;
+    }
+
+    #state {
+      pointer-events: auto;
+    }
+
+    #state,
+    #ripple-container {
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+
+      block-size: 40px;
+      inline-size: 40px;
+
+      transform: translateX(-50%) translateY(-50%);
+
+      border-radius: 50%;
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+
+      opacity: 0.38;
+    }
+
+    #radio {
+      position: relative;
+
+      display: inline-flex;
+
+      grid-column: 1 / 1;
+
+      pointer-events: none;
+
+      transform: translateY(11.5%);
+
+      color: rgb(var(--mdw-color__on-surface));
+    }
+
+    #radio[selected] {
+      color: rgb(var(--mdw-ink));
+    }
+
+    #radio[disabled] {
+      color: rgb(var(--mdw-color__on-surface));
+    }
+
+    #radio[errored] {
+      color: rgb(var(--mdw-color__error));
+    }
+
+    #icon {
+      --mdw-ink: inherit;
+      --disabled-opacity: 1;
+    }
+  `
   .autoRegister('mdw-radio');

package/components/RadioIcon.js

@@ -2,12 +2,10 @@ import CustomElement from '../core/CustomElement.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import outlineStyles from './Outline.css' assert {type:'css'};
-import styles from './RadioIcon.css' assert {type: 'css'};
-
 export default CustomElement
   .mixin(ThemableMixin)
   .mixin(ShapeMixin)
+  .extend()
   .observe({
     selected: 'boolean',
     icon: 'string',
@@ -23,7 +21,6 @@ export default CustomElement
       set(value) { this.selected = value; },
     },
   })
-  .css(outlineStyles, styles)
   .html/* html */`
     <div id=inner-shape class=shape selected={selected}></div>
   `.on({
@@ -33,5 +30,80 @@ export default CustomElement
       outline.setAttribute('selected', '{selected}');
     },
   })
-  .extend()
+  .css`
+    /* https://m3.material.io/components/radio-button/specs */
+
+    :host {
+      --disabled-opacity: 0.38;
+      --mdw-ink: rgb(var(--mdw-color__primary));
+      /* Use CSS Variables to force filter to reapply (Chrome Bug) */
+      --color: rgb(var(--mdw-color__on-surface-variant));
+      position: relative;
+
+      display: inline-block;
+
+      block-size: 20px;
+      inline-size: 20px;
+
+      background-color: transparent;
+
+      transition: opacity 200ms;
+    }
+
+    .shape {
+      --mdw-shape__size: var(--mdw-shape__full);
+      position: absolute;
+      inset: 0;
+    }
+
+    #outline {
+      filter:
+        drop-shadow(1px 0px 0px var(--color))
+        drop-shadow(0px 1px 0px var(--color))
+        drop-shadow(-1px 0px 0px var(--color))
+        drop-shadow(0px -1px 0px var(--color))
+        ;
+
+      color: var(--color);
+
+      will-change: filter, color;
+    }
+
+    #inner-shape {
+      position: absolute;
+      inset: 0;
+
+      transform: scale(0);
+
+      background-color: var(--color);
+
+      transition: transform 200ms, background-color 100ms;
+    }
+
+    :host([hovered]) {
+      --color: rgb(var(--mdw-color__on-surface));
+    }
+
+    :host([focused]) {
+      --color: rgb(var(--mdw-color__on-surface));
+    }
+
+    :host([selected]) {
+      --color: rgb(var(--mdw-ink));
+    }
+
+    :host([errored]) {
+      --color: rgb(var(--mdw-color__error));
+    }
+
+    :host([disabled]) {
+      --color: rgba(var(--mdw-color__on-surface));
+      opacity: var(--disabled-opacity);
+    }
+
+    #inner-shape[selected] {
+      transform: scale(0.5);
+    }
+
+  `
   .autoRegister('mdw-radio-icon');