@shortfuse/materialdesignweb 0.7.0 → 0.7.1-1

package/components/ProgressLine.css

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

@@ -1,83 +0,0 @@
-/* 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/RadioIcon.css

@@ -1,73 +0,0 @@
-/* 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/Ripple.css

@@ -1,74 +0,0 @@
-: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/SegmentedButton.css

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

package/components/SegmentedButtonGroup.css

@@ -1,12 +0,0 @@
-/* https://m3.material.io/components/segmented-buttons/specs */
-
-:host {
-  --mdw-bg: var(--mdw-color__secondary-container);
-  --mdw-ink: var(--mdw-color__on-secondary-container);
-
-  display: flex;
-}
-
-:host([color]) {
-  background-color: transparent;
-}

package/components/Select.css

@@ -1,52 +0,0 @@
-#slot {
-  display: none;
-}
-
-#label {
-  padding: 0;
-
-  cursor: pointer;
-}
-
-#label[disabled] {
-  cursor: not-allowed;
-}
-
-#icon {
-  position: absolute;
-
-  /* padding-inline-start: 12px; */
-}
-
-#trailing-icon {
-  position: absolute;
-  inset-inline-end: 16px;
-}
-
-#control {
-  padding-inline-start: 16px;
-  padding-inline-end: calc(16px + 24px + 16px);
-  accent-color: rgb(var(--mdw-ink));
-
-  cursor: inherit;
-}
-
-#control[icon] {
-  margin-inline-start: calc(16px + 24px);
-  padding-inline-start: 0;
-}
-
-option {
-  accent-color: rgb(var(--mdw-ink));
-
-  min-block-size: var(--mdw-typescale__label-large__line-height);
-
-  appearance: none;
-
-  background-color: rgb(var(--mdw-color__surface)) !important;
-  border-radius: 0;
-  color: rgb(var(--mdw-color__on-surface)) !important;
-
-  font: var(--mdw-typescale__label-large__font);
-  letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
-}

package/components/Shape.css

@@ -1,132 +0,0 @@
-/** TODO: CSS Mixin */
-
-:host {
-  --mdw-shape__size: 0px;
-  --mdw-shape__bg: transparent;
-
-  --mdw-surface__will-change: none;
-  --mdw-shape__size__top-start-size: var(--mdw-shape__size);
-  --mdw-shape__size__top-end-size: var(--mdw-shape__size);
-  --mdw-shape__size__bottom-start-size: var(--mdw-shape__size);
-  --mdw-shape__size__bottom-end-size: var(--mdw-shape__size);
-
-  /* (1/2n + 1/2)L + (-1/2n + 1/2)R  */
-  --mdw-shape__ltr: calc(0.5 * var(--mdw-dir, 1) + 0.5); /* 1 if LTR, 0 if RTL */
-  --mdw-shape__rtl: calc(-0.5 * var(--mdw-dir, 1) + 0.5); /* 0 if LTR, 1 if RTL */
-  --mdw-shape__size__top-left-size: calc((var(--mdw-shape__ltr) * var(--mdw-shape__size__top-start-size)) + (var(--mdw-shape__rtl) * var(--mdw-shape__size__top-end-size)));
-  --mdw-shape__size__top-right-size: calc((var(--mdw-shape__rtl) * var(--mdw-shape__size__top-start-size)) + (var(--mdw-shape__ltr) * var(--mdw-shape__size__top-end-size)));
-  --mdw-shape__size__bottom-left-size: calc((var(--mdw-shape__ltr) * var(--mdw-shape__size__bottom-start-size)) + (var(--mdw-shape__rtl) * var(--mdw-shape__size__bottom-end-size)));
-  --mdw-shape__size__bottom-right-size: calc((var(--mdw-shape__rtl) * var(--mdw-shape__size__bottom-start-size)) + (var(--mdw-shape__ltr) * var(--mdw-shape__size__bottom-end-size)));
-
-  --mdw-shape__rounded: 1;
-  --mdw-shape__mask-border-source: none;
-  --mdw-shape__mask: none;
-  --mdw-shape__inline-start-deg: calc(var(--mdw-dir, 1) * -90deg);
-  position: relative;
-
-  overflow: hidden;
-
-  background-color: var(--mdw-shape__bg, transparent);
-
-  border-start-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-start-size));
-  border-start-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-end-size));
-  border-end-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-start-size));
-  border-end-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-end-size));
-
-  transition-delay: 1ms;
-  transition-duration: 200ms;
-  transition-property: background-color, color;
-  will-change: background-color, color;
-
-}
-
-:host([color]) {
-  background-color: rgb(var(--mdw-bg));
-}
-
-:host(:where([ink],[color])) {
-  color: rgb(var(--mdw-ink));
-}
-
-:host([outlined]) {
-  background-color: transparent;
-}
-
-:host(:is([color="none"], [color="transparent"])) {
-  background-color: transparent;
-}
-
-:host([shape-style="none"]) {
-  --mdw-shape__size: 0px;
-}
-
-:host([shape-style="extra-small"]) {
-  --mdw-shape__size: var(--mdw-shape__extra-small);
-}
-
-:host([shape-style="small"]) {
-  --mdw-shape__size: var(--mdw-shape__small);
-}
-
-:host([shape-style="medium"]) {
-  --mdw-shape__size: var(--mdw-shape__medium);
-}
-
-:host([shape-style="large"]) {
-  --mdw-shape__size: var(--mdw-shape__large);
-}
-
-:host([shape-style="extra-large"]) {
-  --mdw-shape__size: var(--mdw-shape__extra-large);
-}
-
-:host([shape-style="full"]) {
-  --mdw-shape__size: var(--mdw-shape__full);
-}
-
-:host([shape-style="inherit"]) {
-  --mdw-shape__size: inherit;
-}
-
-:host([shape-top]) {
-  --mdw-shape__size__bottom-start-size: 0px;
-  --mdw-shape__size__bottom-end-size: 0px;
-  --mdw-shape__mask: linear-gradient(transparent 50%, black 50%);
-
-}
-
-:host([shape-bottom]) {
-  --mdw-shape__size__top-start-size: 0px;
-  --mdw-shape__size__top-end-size: 0px;
-  --mdw-shape__mask: linear-gradient(black 50%, transparent 50%);
-}
-
-:host([shape-start]) {
-  --mdw-shape__size__top-end-size: 0px;
-  --mdw-shape__size__bottom-end-size: 0px;
-  --mdw-shape__mask: linear-gradient(var(--mdw-shape__inline-start-deg), black 50%, transparent 50%);
-}
-
-:host([shape-end]) {
-  --mdw-shape__size__top-start-size: 0px;
-  --mdw-shape__size__bottom-start-size: 0px;
-  --mdw-shape__mask: linear-gradient(var(--mdw-shape__inline-start-deg), transparent 50%, black 50%);
-}
-
-@supports(-webkit-mask-box-image: none) {
-  :host {
-    --mdw-shape__rounded: inherit;
-    --mdw-shape__mask-border-source: inherit;
-
-    -webkit-mask-box-image: var(--mdw-shape__mask-border-source)
-      8 fill /
-      var(--mdw-shape__size)
-      stretch;
-
-    -webkit-mask: var(--mdw-shape__mask);
-
-    transition-duration: 200ms, 200ms, 200ms;
-    transition-property: background-color, color, -webkit-mask-box-image-width;
-    will-change: background-color, color, -webkit-mask-box-image;
-  }
-}