@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/ProgressLine.css

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

package/components/Radio.css

@@ -0,0 +1,83 @@
+/* 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: center;
+  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);
+}
+
+#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;
+
+  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;
+}

package/components/Radio.js

@@ -0,0 +1,42 @@
+import './RadioIcon.js';
+
+import CustomElement from '../core/CustomElement.js';
+import InputMixin from '../mixins/InputMixin.js';
+import RippleMixin from '../mixins/RippleMixin.js';
+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)
+  .mixin(RippleMixin)
+  .mixin(InputMixin)
+  .mixin(TouchTargetMixin)
+  .extend()
+  .set({
+    type: 'radio',
+    stateLayer: true,
+  })
+  .css(styles)
+  .on({
+    composed({ html }) {
+      const { label, rippleContainer, state, control, touchTarget } = this.refs;
+      label.append(html`
+        ${touchTarget}
+        ${control}
+        <div id=radio errored={erroredState} selected={checked}>
+          <mdw-radio-icon id=icon errored={erroredState} disabled={disabledState}
+            selected={checked} focused={focusedState} hovered={hoveredState}></mdw-radio-icon>
+          ${state}
+          ${rippleContainer}
+        </div>
+        <slot id=slot></slot>
+      `);
+
+      control.setAttribute('type', 'radio');
+    },
+  })
+  .autoRegister('mdw-radio');

package/components/RadioIcon.css

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

package/components/RadioIcon.js

@@ -0,0 +1,37 @@
+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)
+  .observe({
+    selected: 'boolean',
+    icon: 'string',
+    errored: 'boolean',
+    disabled: 'boolean',
+    hovered: 'boolean',
+    focused: 'boolean',
+  })
+  .define({
+    /** Alias for Selected (QoL) */
+    checked: {
+      get() { return this.selected; },
+      set(value) { this.selected = value; },
+    },
+  })
+  .css(outlineStyles, styles)
+  .html/* html */`
+    <div id=inner-shape class=shape selected={selected}></div>
+  `.on({
+    composed() {
+      const { outline } = this.refs;
+      outline.removeAttribute('_if');
+      outline.setAttribute('selected', '{selected}');
+    },
+  })
+  .extend()
+  .autoRegister('mdw-radio-icon');

package/components/Ripple.css

@@ -0,0 +1,74 @@
+:host {
+  --enter-delay: 80ms;
+  --touch-down-acceleration: 1024;
+  --touch-up-acceleration: 3400;
+  --mdw-ripple-expand-duration: 300ms;
+  --mdw-ripple-simple-duration: 200ms;
+  --mdw-ripple-fade-out-duration: 333ms;
+  --mdw-ripple-standard-easing: var(--mdw-motion-standard-easing, cubic-bezier(0.4, 0.0, 0.2, 1));
+  --mdw-ripple-deceleration-easing: var(--mdw-motion-deceleration-easing, cubic-bezier(0.0, 0.0, 0.2, 1));
+
+  --size: 0;
+  position: absolute;
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  top: 50%;
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  left: 50%;
+
+  display: block;
+
+  min-block-size: 141.42%; /* √2 * 100% */
+  min-inline-size: 141.42%;
+
+  pointer-events: none;
+
+  -webkit-tap-highlight-color: transparent;
+
+  opacity: 0.12;
+  transform: translateX(-50%) translateY(-50%) scale(1);
+
+  background-color: currentColor;
+  border-radius: 50%;
+
+  /* Adds feathered appearance to ripple */
+  box-shadow: 0 0 calc(0.10 * var(--size)) calc(0.10 * var(--size)) currentColor;
+
+  transition-delay: 0s;
+  transition-duration: var(--mdw-ripple-simple-duration);
+  transition-property: background-color, color;
+  transition-timing-function: var(--mdw-ripple-standard-easing);
+
+  animation-name: ripple-fade-in, none;
+  animation-duration: var(--mdw-ripple-expand-duration), var(--mdw-ripple-fade-out-duration);
+  animation-timing-function: linear, var(--mdw-ripple-deceleration-easing);
+  animation-direction: normal;
+  animation-fill-mode: forwards;
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  will-change: transform, opacity, top, left, box-shadow;
+
+  aspect-ratio: 1/1;
+}
+
+:host([ripple-state="filled"]) {
+  animation-name: none, ripple-fade-out;
+}
+
+:host([ripple-state="filled"][hold-ripple]) {
+  animation-name: ripple-fade-in, none;
+}
+
+:host([ripple-state="complete"]) {
+  animation-name: none, ripple-fade-out;
+  animation-duration: 0s;
+}
+
+@keyframes ripple-fade-in {
+  from {
+    transform: translateX(-50%) translateY(-50%) scale(0);
+  }
+}
+
+@keyframes ripple-fade-out {
+
+  to { opacity: 0; }
+}

package/components/Ripple.js

@@ -0,0 +1,114 @@
+import CustomElement from '../core/CustomElement.js';
+import { ELEMENT_STYLER_TYPE } from '../core/customTypes.js';
+
+import styles from './Ripple.css' assert { type: 'css' };
+
+export default CustomElement
+  .extend()
+  .css(styles)
+  .set({
+    hadRippleHeld: false,
+    hadRippleReleased: false,
+    rippleStarted: false,
+  })
+  .observe({
+    rippleState: 'string',
+    keepAlive: 'boolean',
+    _positionX: 'float',
+    _positionY: 'float',
+    _radius: 'float',
+    holdRipple: {
+      type: 'boolean',
+      changedCallback(oldValue, newValue) {
+        if (newValue) {
+          this.hadRippleHeld = true;
+        } else {
+          this.hadRippleReleased = true;
+        }
+      },
+    },
+  })
+  .observe({
+    _positionStyle: {
+      ...ELEMENT_STYLER_TYPE,
+      get({ _positionX, _positionY, _radius }) {
+        return {
+          styles: {
+            minBlockSize: `${_radius}px`,
+            minInlineSize: `${_radius}px`,
+            boxShadow: `0 0 calc(0.10 * ${_radius}px) calc(0.10 * ${_radius}px) currentColor`,
+            left: `calc(50% + ${_positionX}px)`,
+            top: `calc(50% + ${_positionY}px)`,
+          },
+        };
+      },
+    },
+  })
+  .methods({
+    /**
+     * @param {number} [x] offsetX
+     * @param {number} [y] offsetY
+     * @param {number} [size]
+     * @return {void}
+     */
+    updatePosition(x, y, size) {
+      // Element is already centered.
+      // Use offset to calculate parent size;
+
+      let hypotenuse = size;
+      const { clientWidth: parentWidth, clientHeight: parentHeight } = this.offsetParent;
+
+      x ??= parentWidth / 2;
+      y ??= parentHeight / 2;
+      if (!hypotenuse) {
+        const width = (x >= parentWidth / 2) ? x : (parentWidth - x);
+        const height = (y >= parentHeight / 2) ? y : (parentHeight - y);
+        hypotenuse = 2 * Math.sqrt((width * width) + (height * height));
+      }
+
+      // const expandDuration = Math.min(
+      //   500, // Never longer than long-press duration
+      //   (1000 * Math.sqrt(size / 2 / 1024) + 0.5), // From Android
+      // );
+
+      // this.style.minBlockSize = `${hypotenuse}px`;
+      // this.style.minInlineSize = `${hypotenuse}px`;
+      // this.style.boxShadow = `0 0 calc(0.10 * ${0}px) calc(0.10 * ${0}px) currentColor`;
+      // this.style.marginLeft = `${x - (parentWidth / 2)}px`;
+      // this.style.marginTop = `${y - (parentHeight / 2)}px`;
+
+      this._positionX = x - (parentWidth / 2);
+      this._positionY = y - (parentHeight / 2);
+      this._radius = hypotenuse;
+    },
+    handleRippleComplete() {
+      if (this.keepAlive) {
+        this.setAttribute('ripple-state', 'complete');
+      } else {
+        this.remove();
+      }
+    },
+  })
+  .events({
+    animationstart({ animationName }) {
+      if (animationName !== 'ripple-fade-in') return;
+      if (this.rippleStarted && !this.keepAlive) {
+        // Animation restarted. Likely from visibility change
+        this.remove();
+        return;
+      }
+      this.rippleStarted = true;
+    },
+    animationend({ animationName }) {
+      switch (animationName) {
+        case 'ripple-fade-in':
+          this.setAttribute('ripple-state', 'filled');
+          break;
+        case 'ripple-fade-out':
+          this.handleRippleComplete();
+          break;
+        default:
+      }
+    },
+  })
+  .autoRegister('mdw-ripple');

package/components/SegmentedButton.css

@@ -0,0 +1,94 @@
+/* https://m3.material.io/components/segmented-buttons/specs */
+
+:host {
+  --mdw-shape__size: var(--mdw-shape__full);
+  --mdw-ink: var(--mdw-color__on-surface);
+  gap: 8px;
+
+  min-inline-size: 24px;
+  padding-inline-start: max(12px, calc(16px + (var(--mdw-density) * 2px)));
+  padding-inline-end: max(20px, calc(24px + (var(--mdw-density) * 2px)));
+
+  color: rgb(var(--mdw-ink));
+}
+
+:host([inner-segmented-button]) {
+  --mdw-shape__size: 0px;
+  --mdw-shape__rounded: 1;
+  --mdw-shape__mask-border-source: none;
+}
+
+#outline {
+  inset-inline-end: -1px;
+}
+
+#outline[shape-end] {
+  inset-inline-end: 0;
+}
+
+#shape[selected] {
+  background-color: rgb(var(--mdw-bg));
+}
+
+#label[selected] {
+  color: rgb(var(--mdw-ink));
+}
+
+#icons {
+  position: relative;
+
+  display: inline-flex;
+}
+
+#icon {
+  box-sizing: border-box;
+  inline-size: 0;
+
+  opacity: 1;
+}
+
+#icon[has-icon] {
+  inline-size: 18px;
+
+  opacity: 1;
+}
+
+#icon[selected] {
+  inline-size: 18px;
+
+  opacity: 0;
+}
+
+#check-icon {
+  position: absolute;
+  inset: 0;
+
+  display: block;
+
+  overflow: visible;
+
+  margin: 0;
+
+  opacity: 0;
+
+  font-size: 18px;
+  font-variation-settings: 'FILL' 1;
+}
+
+#check-icon[selected] {
+  opacity: 1;
+
+  font-size: 18px;
+}
+
+#icon[disabled] {
+  color: rgba(var(--mdw-color__on-surface), 0.38);
+}
+
+#shape[disabled][selected] {
+  background-color: rgba(var(--mdw-color__on-surface), 0.12);
+}
+
+#label[disabled][selected] {
+  color: rgba(var(--mdw-color__on-surface), 0.38);
+}