@shortfuse/materialdesignweb 0.7.0 → 0.7.1-1

package/components/Box.css

@@ -1,31 +0,0 @@
-:host {
-  display: block;
-}
-
-:host([inline]) {
-  display: inline-block;
-}
-
-:host([flex]:where([inline])) {
-  display: inline-flex;
-}
-
-:host([color]) {
-  background-color: rgb(var(--mdw-bg));
-  color: rgb(var(--mdw-ink));
-}
-
-:host([ink]) {
-  color: rgb(var(--mdw-ink));
-}
-
-:host([type-style]) {
-  font: var(--mdw-type__font);
-  letter-spacing: var(--mdw-type__letter-spacing);
-}
-
-#slot {
-  /* Passthrough from parent */
-  block-size: inherit;
-  inline-size: inherit;
-}

package/components/Button.css

@@ -1,146 +0,0 @@
-/* https://m3.material.io/components/buttons/specs */
-
-:host {
-  --mdw-shape__size: var(--mdw-shape__full);
-  --mdw-ink: var(--mdw-color__primary);
-
-  --mdw-type__font: var(--mdw-typescale__label-large__font);
-  --mdw-type__letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
-
-  display: inline-flex;
-
-  align-items: center;
-  gap: 0;
-  justify-content: center;
-
-  /* box-sizing: border-box; */
-  min-block-size: 24px;
-  min-inline-size: 24px;
-
-  padding-block: calc(8px + (var(--mdw-density) * 2px));
-  padding-inline: calc(12px + (var(--mdw-density) * 2px));
-
-  -webkit-tap-highlight-color: transparent;
-  -webkit-user-select: none;
-  user-select: none;
-
-  color: rgb(var(--mdw-ink));
-
-  font: var(--mdw-type__font);
-  letter-spacing: var(--mdw-type__letter-spacing);
-}
-
-:host(:where([elevated],[filled])) {
-  will-change: filter;
-}
-
-/** Elevated Color Defaults */
-:host(:where([elevated])) {
-  --mdw-bg: var(--mdw-color__surface);
-  --mdw-ink: var(--mdw-color__primary);
-  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
-  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
-  --mdw-surface__tint: var(--mdw-surface__tint__1);
-  --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
-}
-/** Filled Color Defaults */
-:host(:where([filled])) {
-  --mdw-bg: var(--mdw-color__primary);
-  --mdw-ink: var(--mdw-color__on-primary);
-  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__0);
-  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__1);
-  --mdw-surface__tint: 0;
-  --mdw-surface__tint__raised: var(--mdw-surface__tint__1);
-}
-/** Filled Tonal Color Defaults */
-:host(:where([filled="tonal"])) {
-  --mdw-bg: var(--mdw-color__secondary-container);
-  --mdw-ink: var(--mdw-color__on-secondary-container);
-}
-/** Outlined Color Defaults */
-:host(:where([outlined])) {
-  --mdw-ink: var(--mdw-color__primary);
-}
-
-:host(:where([icon])) {
-  gap: 8px;
-
-  padding-inline: calc(12px + (var(--mdw-density) * 2px)) calc(16px + (var(--mdw-density) * 2px));
-}
-
-:host(:where([outlined], [elevated], [filled])) {
-  padding-inline: calc(24px + (var(--mdw-density) * 2px));
-}
-
-:host(:where([icon]):where([outlined], [elevated], [filled])) {
-  gap: 8px;
-
-  padding-inline: calc(16px + (var(--mdw-density) * 2px)) calc(24px + (var(--mdw-density) * 2px));
-}
-
-#shape:where([elevated],[filled],[color]) {
-  background-color: rgb(var(--mdw-bg));
-}
-
-#slot {
-  text-align: center;
-  text-decoration: none;
-  white-space: nowrap;
-}
-
-#control {
-  cursor: inherit;
-}
-
-:host([disabled]) {
-  /* cursor: not-allowed; */
-
-  color: rgba(var(--mdw-color__on-surface), 0.38);
-}
-
-#shape[disabled]:is([elevated], [filled]) {
-  background-color: rgba(var(--mdw-color__on-surface), 0.12);
-  color: rgba(var(--mdw-color__on-surface), 0.38);
-}
-
-#slot[disabled] {
-  color: rgba(var(--mdw-color__on-surface), 0.38);
-}
-
-#icon {
-  font-size: calc(18/14 * 1em);
-  font-variation-settings: 'FILL' 1;
-}
-
-#icon[outlined] {
-  font-variation-settings: 'FILL' 0;
-}
-
-#icon[disabled] {
-  opacity: 0.38;
-
-  color: rgba(var(--mdw-color__on-surface));
-}
-
-#label {
-  cursor: pointer;
-}
-
-#label[disabled] {
-  cursor: not-allowed;
-}
-
-/*
-@media screen and (max-resolution: 0.75dppx) { #touch-target { --mdw-device-pixel-ratio: 0.75; } }
-@media screen and (max-resolution: 0.85dppx) { #touch-target { --mdw-device-pixel-ratio: 0.90; } }
-@media screen and (max-resolution: 0.90dppx) { #touch-target { --mdw-device-pixel-ratio: 0.90; } }
-@media screen and (min-resolution: 1.5dppx) { #touch-target { --mdw-device-pixel-ratio: 1.5; } }
-@media screen and (min-resolution: 1.75dppx) { #touch-target { --mdw-device-pixel-ratio: 1.75; } }
-@media screen and (min-resolution: 2dppx) { #touch-target { --mdw-device-pixel-ratio: 2; } }
-*/
-
-@media (any-pointer: coarse) {
-  #touch-target {
-    visibility: visible;
-  }
-}

package/components/Card.css

@@ -1,109 +0,0 @@
-/* https://m3.material.io/components/cards/specs */
-
-:host {
-  --mdw-shape__size: 12px;
-  --mdw-surface__tint: var(--mdw-surface__tint__0);
-  --mdw-surface__tint__raised: var(--mdw-surface__tint);
-
-  --mdw-surface__shadow__resting: none;
-  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__resting);
-  /* padding-inline: 12px; */
-
-  --mdw-bg: var(--mdw-color__surface);
-  --mdw-ink: var(--mdw-color__on-surface);
-  position: relative;
-
-  display: block;
-
-  color: rgb(var(--mdw-ink));
-
-  font: var(--mdw-type__font);
-  letter-spacing: var(--mdw-type__letter-spacing);
-}
-
-#shape:is([elevated],[filled]) {
-  background-color: rgb(var(--mdw-bg));
-}
-
-:host(:where([filled])) {
-  --mdw-bg: var(--mdw-color__surface-variant);
-  --mdw-ink: var(--mdw-color__on-surface-variant);
-}
-
-:host(:where([elevated])) {
-  --mdw-bg: var(--mdw-color__surface);
-  --mdw-ink: var(--mdw-color__on-surface);
-}
-
-:host([filled]) {
-  --mdw-surface__tint: var(--mdw-surface__tint__0);
-  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__0);
-}
-
-:host([filled][actionable]) {
-  --mdw-surface__tint__raised: var(--mdw-surface__tint__1);
-  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__1);
-}
-
-:host([elevated]) {
-  --mdw-surface__tint: var(--mdw-surface__tint__1);
-  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
-}
-
-:host([elevated][actionable]) {
-  --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
-  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
-}
-
-#shape[disabled] {
-
-  /* Works on images */
-  filter: grayscale();
-
-  color: rgb(var(--mdw-color__on-surface));
-}
-
-:host([disabled]) {
-  cursor: not-allowed;
-
-  filter: grayscale();
-  opacity: 0.38;
-}
-
-#slot[disabled] {
-  color: rgb(var(--mdw-color__on-surface));
-}
-
-#outline[disabled] {
-  color: rgba(var(--mdw-color__on-surface), calc(0.12/0.38));
-}
-
-/** Firefox and Safari do not support [inert] */
-
-#inert-blocker {
-  position: absolute;
-  inset: 0;
-
-  cursor: not-allowed;
-  pointer-events: auto;
-
-  z-index: 99;
-}
-
-#shape[disabled][elevated] {
-  background-color: rgba(var(--mdw-color__surface-variant));
-}
-
-#action {
-  --mdw-ink: inherit;
-  --mdw-shape__size: inherit;
-
-  position: absolute;
-  inset: 0;
-
-  padding: 0;
-
-  z-index: 0;
-
-  color: inherit
-}

package/components/Checkbox.css

@@ -1,77 +0,0 @@
-/* https://m3.material.io/components/checkbox/specs */
-
-:host {
-  --mdw-ink: var(--mdw-color__on-primary);
-  --mdw-bg: var(--mdw-color__primary);
-
-  display: inline-grid;
-  align-items: center;
-  gap: 12px;
-  grid-auto-flow: column;
-  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,
-#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]) {
-  opacity: 0.38;
-}
-
-#checkbox {
-  position: relative;
-
-  display: inline-flex;
-
-  grid-column: 1 / 1;
-
-  pointer-events: none;
-
-  color: rgb(var(--mdw-color__on-surface));
-}
-
-#checkbox[selected] {
-  color: rgb(var(--mdw-bg));
-}
-
-#checkbox[disabled] {
-  color: rgb(var(--mdw-color__on-surface));
-}
-
-#checkbox[errored] {
-  color: rgb(var(--mdw-color__error));
-}
-
-#icon {
-  --mdw-ink: inherit;
-  --mdw-bg: inherit;
-  --disabled-opacity: 1;
-}

package/components/CheckboxIcon.css

@@ -1,89 +0,0 @@
-/* https://m3.material.io/components/checkbox/specs */
-
-:host {
-  --mdw-ink: var(--mdw-color__on-primary);
-  --mdw-bg: var(--mdw-color__primary);
-  --mdw-shape__size: 2px;
-  --disabled-opacity: 0.38;
-  position: relative;
-
-  display: inline-block;
-  align-items: center;
-  justify-content: center;
-
-  box-sizing: border-box;
-  block-size: 18px;
-  inline-size: 18px;
-
-  font-size: 18px;
-}
-
-#shape {
-  --mdw-shape__size: inherit;
-  position: absolute;
-  inset: 0;
-
-  z-index: auto;
-
-  background-color: transparent;
-}
-
-#icon {
-  position: absolute;
-  inset: 0;
-
-  opacity: 0;
-
-  background-color: rgb(var(--mdw-bg));
-  color: rgb(var(--mdw-ink));
-
-  transition-duration: 200ms;
-  transition-property: opacity, background-color, color;
-  will-change: opacity;
-}
-
-#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__on-surface));
-
-  transition-duration: 200ms;
-  transition-property: opacity, background-color, color;
-  will-change: opacity;
-}
-
-/* Selected */
-
-#icon[selected] {
-  opacity: 1;
-}
-
-#outline[selected] {
-  opacity: 0;
-}
-
-/* Errored */
-
-#icon[errored] {
-  background-color: rgb(var(--mdw-color__error));
-  color: rgb(var(--mdw-color__on-error));
-}
-
-#outline[errored] {
-  color: rgb(var(--mdw-color__error));
-}
-
-/* Disabled */
-
-#icon[disabled] {
-  background-color: rgba(var(--mdw-color__on-surface), var(--disabled-opacity));
-  color: rgb(var(--mdw-color__surface), var(--disabled-opacity));
-}
-
-#outline[disabled] {
-  color: rgb(var(--mdw-color__on-surface), var(--disabled-opacity));
-}

package/components/Chip.css

@@ -1,35 +0,0 @@
-/* https://m3.material.io/components/chips/specs */
-
-:host {
-  --mdw-shape__size: 8px;
-  --mdw-ink: var(--mdw-color__on-surface);
-  padding-block: calc(4px + (var(--mdw-density) * 2px));
-  padding-inline: calc(16px + (var(--mdw-density) * 2px));
-
-  color: rgb(var(--mdw-ink));
-}
-
-:host(:where([suggestion])) {
-  --mdw-ink: var(--mdw-color__on-surface-variant);
-}
-
-:host(:where([icon])) {
-  gap: 8px;
-
-  padding-inline: calc(8px + (var(--mdw-density) * 2px)) calc(16px + (var(--mdw-density) * 2px));
-
-}
-
-#outline {
-  --mdw-ink: rgb(var(--mdw-color__on-surface-variant));
-}
-
-#outline:is([ink],[color]) {
-  /* stylelint-disable-next-line rule-selector-property-disallowed-list */
-  --mdw-ink: inherit;
-}
-
-#slot[disabled],
-#icon[disabled] {
-  color: rgba(var(--mdw-color__on-surface), 0.38);
-}

package/components/Dialog.css

@@ -1,235 +0,0 @@
-/* https://m3.material.io/components/dialogs/specs */
-
-:host {
-  --mdw-dialog__expand-duration: var(--mdw-motion-expand-duration, 250ms);
-  --mdw-dialog__simple-duration: var(--mdw-motion-simple-duration, 100ms);
-  --mdw-dialog__standard-easing: var(--mdw-motion-standard-easing, cubic-bezier(0.4, 0.0, 0.2, 1));
-  --mdw-dialog__deceleration-easing: var(--mdw-motion-deceleration-easing, cubic-bezier(0.0, 0.0, 0.2, 1));
-  --mdw-dialog__fade-in-duration: var(--mdw-motion-fade-in-duration, 150ms);
-
-  position: fixed;
-  inset: 0;
-
-  pointer-events: none;
-
-  z-index: 24;
-}
-
-#dialog {
-  position: fixed;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: center;
-
-  box-sizing: border-box;
-  block-size:100%;
-  max-block-size: none;
-  inline-size:100%;
-  max-inline-size: none;
-  margin:0;
-  border: none;
-  padding: 48px;
-
-  opacity: 0;
-  /* visiblity:hidden still registers events, hide from pointer with scale(0) */
-  transform: scale(0);
-  visibility: hidden;
-  z-index: 24;
-
-  background-color: transparent;
-
-  transition-delay: 0s, 200ms, 200ms;
-  transition-duration: 200ms, 0s, 0s;
-  transition-property: opacity, transform, visibility;
-  transition-timing-function: ease-out;
-  will-change: opacity;
-}
-
-@media (min-width: 1440px) {
-  #dialog {
-    padding: 56px;
-  }
-}
-
-#dialog::backdrop {
-  /** Use scrim instead */
-  display: none;
-}
-
-#dialog[aria-hidden="false"],
-#dialog:modal {
-  pointer-events: auto;
-
-  opacity: 1;
-
-  transform: none;
-  visibility: visible;
-
-  transition-delay: 0s;
-  transition-duration: 0s;
-  transition-timing-function: ease-in;
-}
-
-#scrim {
-  position: fixed;
-  inset: 0;
-
-  overflow-y: scroll;
-  overscroll-behavior: none;
-  overscroll-behavior: contain;
-  scrollbar-width: none;
-
-  block-size: 100%;
-  inline-size: 100%;
-
-  cursor: default;
-  pointer-events: inherit;
-  -webkit-tap-highlight-color: transparent;
-
-  opacity: 0.38;
-  z-index: 0;
-
-  background-color: rgb(var(--mdw-color__scrim));
-}
-
-#scrim::-webkit-scrollbar {
-  display: none;
-}
-
-#scrim::after {
-  content: '';
-
-  display: block;
-
-  block-size: 200%;
-  inline-size: 200%;
-}
-@keyframes scaleUpAnimation {
-  from {
-    transform: scaleY(0);
-  }
-
-  to {
-    transform: scaleY(1);
-  }
-}
-
-#surface {
-  --mdw-shape__size: 28px;
-
-  position: relative;
-
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior: none;
-  overscroll-behavior: contain;
-
-  box-sizing: border-box;
-  max-block-size: 100%;
-  min-inline-size: 280px;
-  max-inline-size: 560px;
-  flex-shrink: 1;
-
-  padding-block-start: 8px;
-
-  transform: scale(1);
-  transform-origin: top center;
-  z-index: 24;
-
-  will-change: display, transform;
-}
-
-#surface[icon] {
-  align-items: center;
-}
-
-#surface[open] {
-  animation-name: scaleUpAnimation;
-  animation-duration: 200ms;
-  animation-direction: forwards;
-}
-
-#icon {
-  padding-block-start: 16px;
-
-  font-size: 24px;
-}
-
-#headline {
-  display: block;
-
-  padding-block-start: 16px;
-  padding-inline: 24px;
-
-  font: var(--mdw-typescale__headline-small__font);
-  letter-spacing: var(--mdw-typescale__headline-small__letter-spacing);
-}
-
-#headline:not([slotted]):empty {
-  display: none;
-}
-
-#body {
-  padding-block: 16px;
-}
-
-.content {
-  padding-inline: 24px;
-}
-
-#divider-top {
-  padding-block-start: 16px;
-}
-
-mdw-divider:not([size]) {
-  color: transparent;
-}
-
-mdw-divider[size="inset"] {
-  padding-inline: 24px;
-}
-
-#fixed {
-  display:block;
-
-  padding-block-start: 16px;
-
-  color: rgb(var(--mdw-color__on-surface-variant));
-
-  font: var(--mdw-typescale__body-medium__font);
-  letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
-}
-
-#fixed:not([slotted]) {
-  display: none;
-}
-
-#slot {
-  display:block;
-
-  overflow-y: auto;
-
-  color: rgb(var(--mdw-color__on-surface-variant));
-
-  font: var(--mdw-typescale__body-medium__font);
-  letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
-}
-
-#scroller {
-  display: block;
-  overflow-y: auto;
-}
-
-#form {
-  display: contents;
-}
-
-#form-slot::slotted(form) {
-  display: contents;
-}