@shortfuse/materialdesignweb 0.7.0 → 0.7.1-1

package/components/Slider.css

@@ -1,306 +0,0 @@
-/* https://m3.material.io/components/sliders/specs */
-
-:host {
-  --mdw-ink: var(--mdw-color__on-primary);
-  --mdw-bg: var(--mdw-color__primary);
-
-  display: block;
-
-  min-block-size: 40px;
-  min-inline-size: 88px;
-
-  background-color: transparent;
-}
-
-:host,
-:host([color]) {
-  background-color: transparent;
-}
-
-#label {
-  position: absolute;
-  inset: 0;
-
-  display: block;
-
-  cursor: pointer;
-
-  z-index: 1;
-
-  /* border-radius: 50%; */
-  color: rgb(var(--mdw-bg));
-}
-
-#control {
-  inset:0;
-
-  overflow: visible;
-
-  block-size: 100%;
-  min-block-size: 0;
-  inline-size: 100%;
-  min-inline-size: 0;
-
-  appearance: none;
-
-  cursor: inherit;
-
-  transform: none;
-
-  background-color: transparent;
-  color: inherit;
-}
-
-#control::-webkit-slider-runnable-track {
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-  margin-inline: -10px;
-
-  appearance: none;
-
-  background-color: transparent;
-}
-
-@supports (-moz-appearance:none ){
-  #control {
-    inset-inline: -10px;
-
-    inline-size: calc(100% + 20px);
-  }
-}
-
-#control::-moz-range-track {
-  inline-size: calc(100% + 20px) !important;
-
-  appearance: none;
-}
-
-#control::-webkit-slider-thumb {
-  display: block;
-
-  block-size: 20px;
-  inline-size: 20px;
-
-  -webkit-appearance: none;
-  cursor: inherit;
-
-  transform: scale(2);
-
-  background-color: transparent; /* Safari */
-
-  border-radius: 50%;
-  box-shadow: none; /* Safari */
-}
-
-#control::-moz-range-thumb {
-  display: block;
-
-  box-sizing: content-box;
-  block-size: 20px;
-  inline-size: 20px;
-  border: none;
-
-  appearance: none;
-  cursor: inherit;
-
-  transform: scale(2);
-
-  background-color: transparent;
-  border-radius: 50%;
-}
-
-#track {
-  --value: 0.5;
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline: 0;
-
-  block-size: 4px;
-  margin-block-start: -2px;
-
-  pointer-events: none;
-  user-select: none;
-
-  background-color: rgb(var(--mdw-color__surface-variant));
-  border-radius: inherit;
-}
-
-#thumb {
-  position: absolute;
-  inset-block-start: -18px;
-  inset-inline-start: -20px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-
-  block-size: 40px;
-  inline-size: 40px;
-
-  pointer-events: none;
-
-  border-radius: 50%;
-
-  color: rgb(var(--mdw-bg));
-}
-
-#thumb::before {
-  content: '';
-
-  display: block;
-
-  block-size: 20px;
-  inline-size: 20px;
-
-  background-color: currentColor;
-  border-radius: 50%;
-
-  transition: background-color 100ms;
-}
-
-/* Inactive ticks */
-
-#ticks::before,
-#ticks::after {
-  content: '';
-
-  position: absolute;
-  inset: 0;
-
-  padding-inline: 10px;
-
-  background-clip: content-box;
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  background-image: radial-gradient(circle at center, var(--tick-color) 0, var(--tick-color) 1px, transparent 0);
-  background-position: center center;
-  background-repeat: repeat-x;
-  background-size: 0 100%;
-  background-size: calc(100% / var(--ticks, 0)) 2px;
-}
-
-#ticks::before {
-  --tick-color: rgb(var(--mdw-color__on-surface-variant));
-}
-
-#ticks::after {
-  --tick-color: rgb(var(--mdw-ink));
-  /* TODO: Use single-paint implementation */
-  padding-inline-end: calc(100% - (100% * var(--value)) + 10px);
-
-  z-index: 1;
-
-  will-change: padding-inline-end;
-}
-/* Active Indicator */
-#track-active {
-  position: absolute;
-  inset: 0;
-
-  overflow: hidden;
-
-  border-radius: 99px;
-}
-
-#track-active::before {
-  content: '';
-
-  position: absolute;
-  inset: 0;
-
-  transform: scaleX(var(--value));
-  transform-origin: 0 0;
-
-  background-color: rgb(var(--mdw-bg));
-
-  will-change: transform;
-}
-
-#thumb-anchor {
-  position: absolute;
-  inset-inline: 0;
-
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-
-  inline-size: 1%;
-
-  transform: translateX(calc(var(--value) * 100 * 100%));
-  transform-origin: 0 0;
-  z-index: 24;
-
-  will-change: transform;
-}
-
-#thumb-label {
-  position: absolute;
-  inset-block-end: 14px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  box-sizing: content-box;
-  margin-block-end: 6px;
-
-  transform: translateX(-50%) scale(1);
-  transform-origin: 50% 100%;
-
-  font-weight: var(--mdw-typescale__label-medium__font-weight);
-  line-height: var(--mdw-typescale__label-medium__line-height);
-  font-family: var(--mdw-typescale__label-medium__font-family);
-  letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
-
-  transition: transform 200ms;
-  will-change: transform;
-}
-
-#thumb-label:is([hidden],[text=""]) {
-  transform: translateX(-50%) scale(0);
-}
-
-#thumb-label::before {
-  content: attr(text);
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  min-block-size: 28px;
-  min-inline-size: 28px;
-
-  z-index: 1;
-
-  background-color: rgb(var(--mdw-bg));
-  border-radius: 50%;
-  color: rgb(var(--mdw-ink));
-}
-
-#thumb-label::after {
-  /* Values from Figma SVG */
-  --x-start: 14.6446%; /*4.1005px*/
-  --x-end: 85.3554%;
-  --y: 70.7106%; /*24.0416px*/
-
-  content: "";
-
-  position: absolute;
-  inset: 0;
-  inset-block-end: -6px;
-
-  clip-path: polygon(var(--x-start) var(--y), var(--x-end) var(--y), 50% 100%, var(--x-start) var(--y));
-
-  background-color: rgb(var(--mdw-bg));
-}
-
-#track[disabled] {
-  background-color: rgb(var(--mdw-color__on-surface), calc(0.12 / 0.38));
-}
-
-#label[disabled],
-#track[disabled] {
-  --mdw-bg: var(--mdw-color__on-surface);
-  cursor: not-allowed;
-
-  opacity: 0.38;
-}

package/components/Snackbar.css

@@ -1,80 +0,0 @@
-/* https://m3.material.io/components/snackbar/specs */
-
-:host {
-  --mdw-shape__size: var(--mdw-shape__small);
-  --mdw-surface__shadow: var(--mdw-surface__shadow__3);
-  --mdw-surface__tint: var(--mdw-surface__tint__3);
-  --mdw-shape__bg: rgb(var(--mdw-color__inverse-surface));
-  --mdw-ink: var(--mdw-color__inverse-on-surface);
-
-  --mdw-type__line-height: var(--mdw-typescale__body-medium__line-height);
-  display: flex;
-  align-items: center;
-
-  padding-inline: 16px;
-
-  opacity: 0;
-  transform: translateY(25%) scaleY(0.25);
-  transform-origin: bottom center;
-  visibility: hidden; /* Remove from tab order */
-  z-index: 24;
-
-  font: var(--mdw-typescale__body-medium__font);
-  letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
-
-  transition: transform 200ms, opacity 200ms, visibility 200ms;
-}
-
-:host([action]) {
-  gap: 8px;
-
-  padding-inline-end: 8px;
-}
-
-:host([close-button]) {
-  gap: 4px;
-
-  padding-inline-end: 4px;
-}
-
-:host([open]) {
-  opacity: 1;
-  transform: scale(1);
-  visibility: visible;
-}
-
-#content {
-  display: flex;
-  align-items: center;
-
-  flex: 1;
-  padding-block: max(2px, calc(14px + (var(--mdw-density) * 2px)));
-}
-
-#slot {
-  display: block;
-  overflow-x: hidden;
-  overflow-y: hidden;
-
-  max-block-size: calc(var(--mdw-type__line-height) * 2);
-
-  text-align: start;
-  text-overflow: ellipsis;
-  text-transform: none;
-  white-space: normal;
-  word-break: break-word;
-}
-
-@supports(width: 1lh) {
-  #slot {
-    max-block-size: 2lh;
-  }
-}
-
-@supports(-webkit-line-clamp:1) {
-  #slot {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-}

package/components/Surface.css

@@ -1,10 +0,0 @@
-:host {
-  --mdw-shape__bg: rgb(var(--mdw-color__surface));
-  --mdw-ink: var(--mdw-color__on-surface);
-  position: relative;
-
-  color: rgb(var(--mdw-ink));
-
-  font: var(--mdw-type__font);
-  letter-spacing: var(--mdw-type__letter-spacing);
-}

package/components/Switch.css

@@ -1,63 +0,0 @@
-/* https://m3.material.io/components/switch/specs */
-
-:host {
-  --mdw-ink: var(--mdw-color__on-primary);
-  --mdw-bg: var(--mdw-color__primary);
-  position: relative;
-
-  display: inline-flex;
-  align-items: center;
-
-  gap: 12px;
-
-}
-
-#touch-target {
-  z-index: 0;
-}
-
-#label {
-  display: contents;
-
-  cursor: pointer;
-
-  /* border-radius: 50%; */
-}
-
-/** Switch **/
-
-#switch {
-  --mdw-bg: inherit;
-  --mdw-ink: inherit;
-  flex:1;
-
-  pointer-events: none;
-}
-
-/** State **/
-
-#state {
-  position: absolute;
-  inset: 50%;
-
-  block-size: 100%;
-  min-block-size: 40px;
-  inline-size: 100%;
-  min-inline-size: 40px;
-
-  pointer-events: none;
-
-  transform: translateX(-50%) translateY(-50%);
-
-  border-radius: 50%;
-}
-
-/** Disabled **/
-
-#label[disabled] {
-  --mdw-ink: var(--mdw-color__on-surface); /* selected icon */
-  --mdw-bg: var(--mdw-color__surface);
-  cursor: not-allowed;
-
-  opacity: 0.38;
-}

package/components/SwitchIcon.css

@@ -1,177 +0,0 @@
-/* https://m3.material.io/components/switch/specs */
-
-:host {
-  --mdw-ink: var(--mdw-color__on-primary);
-  --mdw-bg: var(--mdw-color__primary);
-  --mdw-shape__size: var(--mdw-shape__full);
-  --mdw-switch__value: 0;
-  container-type: inline-size;
-  container-name: switch-icon;
-
-  position: relative;
-
-  display: inline-block;
-
-  box-sizing: border-box;
-  block-size: 32px;
-  inline-size: 52px;
-}
-
-:host([selected]) {
-  --mdw-switch__value: 1;
-}
-
-:host([disabled]) {
-  opacity: 0.38;
-}
-
-#track{
-  position: absolute;
-  inset: 0;
-
-  background-color: rgb(var(--mdw-color__surface-variant));
-}
-
-#track[selected] {
-  background-color: rgb(var(--mdw-bg));
-}
-
-#track[disabled] {
-  opacity: calc(0.12/0.38);
-}
-
-#track[disabled][selected] {
-  background-color: rgb(var(--mdw-color__on-surface));
-}
-
-#outline {
-  filter:
-    drop-shadow(1px 0px 0px currentColor)
-    drop-shadow(0px 1px 0px currentColor)
-    drop-shadow(-1px 0px 0px currentColor)
-    drop-shadow(0px -1px 0px currentColor);
-
-  color: rgb(var(--mdw-color__outline));
-}
-
-#outline:is([pressed],[focused]) {
-  color: rgb(var(--mdw-color__outline));
-}
-
-#outline[disabled] {
-  color: rgb(var(--mdw-color__on-surface));
-}
-
-#outline[selected] {
-  color: transparent;
-}
-
-/** Thumb (state) **/
-
-#thumb {
-  --thumb-color: var(--mdw-ink);
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  transform: translateX(calc(var(--mdw-dir, 1) * var(--mdw-switch__value) * (52px - 100%)));
-
-  aspect-ratio: 1/1;
-}
-
-:dir(rtl) #thumb {
-  --mdw-dir: -1;
-}
-
-@supports(width: 1cqw) {
-  #thumb {
-    transform: translateX(calc(var(--mdw-dir, 1) * var(--mdw-switch__value) * (100cqw - 100%)));
-  }
-}
-
-#slot {
-  color: rgb(var(--mdw-color__on-surface));
-}
-
-#slot[selected] {
-  color: rgb(var(--mdw-bg));
-}
-
-/** Thumb Shape **/
-
-#thumb-shape {
-  --mdw-shape__size: inherit;
-
-  position: absolute;
-
-  inset: 2px;
-
-  transform: scale(calc(16/28));
-  z-index: 0;
-}
-
-#thumb-shape[icon] {
-  transform: scale(calc(24/28));
-}
-
-#thumb-shape:not([selected]) {
-  --mdw-bg: var(--mdw-color__outline);
-  --mdw-ink: var(--mdw-color__surface-variant);
-}
-
-#thumb-shape[selected] {
-  transform: scale(calc(24/28));
-}
-
-#thumb-shape[selected]:not([active]) {
-  --mdw-bg: var(--thumb-color);
-}
-
-#thumb-shape[pressed]:not([disabled]) {
-  transform: scale(1);
-}
-
-/** Thumb Icons **/
-
-.icon {
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-
-  opacity: 0;
-  transform: translateX(-50%) translateY(-50%);
-
-  font-size: 16px;
-
-  /* border-radius: 50%; */
-}
-
-.icon:not([src]):empty {
-  display: none;
-}
-
-#icon, #unselected-icon {
-  opacity: 1;
-
-  font-variation-settings: 'FILL' 0;
-}
-
-#unselected-icon[selected] {
-  opacity: 0;
-}
-
-#selected-icon[selected] {
-  opacity: 1;
-}
-
-#icon[selected] {
-  font-variation-settings: 'FILL' 1;
-}
-
-#thumb[disabled] {
-  color: rgb(var(--mdw-color__on-surface));
-}

package/components/SwitchIconAnimations.css

@@ -1,89 +0,0 @@
-/* https://m3.material.io/components/switch/specs */
-
-:host {
-  /*FastOutLinearInInterpolator*/
-  --mdw-switch__transition-timing__collapse: cubic-bezier(0.4, 0.0, 1, 1);
-  --mdw-switch__transition-duration__collapse: 375ms;
-  /*LinearOutSlowInInterpolator*/
-  --mdw-switch__transition-timing__expand: cubic-bezier(0.0, 0.0, 0.2, 1);
-  --mdw-switch__transition-duration__expand: 500ms;
-  --scale-delay: var(--mdw-switch__transition-duration);
-
-  --mdw-switch__transition-duration: var(--mdw-switch__transition-duration__collapse);
-  --mdw-switch__transition-timing: var(--mdw-switch__transition-timing__collapse);
-  --mdw-switch__transition-delay__color: calc(var(--mdw-switch__transition-duration) / 2);
-  --mdw-switch__transition-delay__translate: calc(var(--mdw-switch__transition-duration) / 2);
-  --mdw-switch__transition-delay__scale: calc(var(--mdw-switch__transition-duration) / 2);
-
-  transition-delay: var(--mdw-switch__transition-delay__color);
-  transition-duration: calc(var(--mdw-switch__transition-duration) / 2);
-  /* 2 legged animation */
-  transition-timing-function: var(--mdw-switch__transition-timing);
-}
-
-#track {
-  transition-delay: var(--mdw-switch__transition-delay__color);
-  transition-duration: inherit;
-  transition-property: background-color;
-  transition-timing-function: inherit;
-}
-
-#outline {
-  transition-delay: var(--mdw-switch__transition-delay__color);
-  transition-duration: inherit;
-  transition-property: background-color, color;
-  transition-timing-function: inherit;
-}
-
-#thumb {
-  transition-delay: var(--mdw-switch__transition-delay__translate);
-  transition-duration: inherit;
-  transition-property: transform;
-  transition-timing-function: inherit;
-}
-
-#thumb-shape, .icon {
-  /* (selected => unselected): stall color+scale */
-  transition-delay: var(--mdw-switch__transition-delay__scale), var(--mdw-switch__transition-delay__color), var(--mdw-switch__transition-delay__color);
-  transition-duration: inherit;
-  transition-property: transform, background-color, color;
-  transition-timing-function: inherit;
-}
-
-:host([icon]) {
-  --mdw-switch__transition-delay__translate: 0s;
-}
-
-.icon {
-  transition-property: transform, opacity, color;
-}
-
-/* unselected => selected  */
-:host([selected]) {
-  --mdw-switch__transition-delay__color: 0s;
-  --mdw-switch__transition-delay__scale: 0s;
-  /* --mdw-switch__transition-delay__translate: 0s; */
-  --mdw-switch__transition-duration: var(--mdw-switch__transition-duration__expand);
-  --mdw-switch__transition-timing: var(--mdw-switch__transition-timing__expand);
-}
-
-/* active => selected */
-:host([selected][pressed]) {
-  /* --mdw-switch__transition-delay__color: 0s; */
-  /* --mdw-switch__transition-delay__scale: 0s; */
-  --mdw-switch__transition-delay__translate: 0s;
-}
-
-/* selected => unselected */
-:host(:not([selected])) {
-  /* --mdw-switch__transition-delay__color: 0s; */
-  /* --mdw-switch__transition-delay__scale: 0s; */
-  --mdw-switch__transition-delay__translate: 0s;
-}
-
-/* unselected => active */
-:host([pressed]:not([selected])) {
-  /* --mdw-switch__transition-delay__color: 0s; */
-  --mdw-switch__transition-delay__scale: 0s;
-  /* --mdw-switch__transition-delay__translate: 0s; */
-}