@shortfuse/materialdesignweb 0.7.1-0 → 0.7.1-2

package/components/Checkbox.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);
-
-  display: inline-grid;
-  align-items: baseline;
-  gap: 12px;
-  grid-auto-flow: column;
-  justify-content: flex-start;
-
-  cursor: pointer;
-
-  transition: none 100ms cubic-bezier(0.4, 0.0, 1, 1);
-}
-
-:host([disabled]) {
-  opacity: 0.38;
-}
-
-:host(:empty) {
-  vertical-align: -11.5%;
-
-  line-height: 18px;
-}
-
-:host(:empty) #checkbox {
-  transform: none;
-}
-
-#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%;
-}
-
-#checkbox {
-  position: relative;
-
-  display: inline-flex;
-
-  grid-column: 1 / 1;
-
-  pointer-events: none;
-
-  transform: translateY(11.5%);
-
-  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,90 +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;
-  line-height: 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;
-}

package/components/Divider.css

@@ -1,41 +0,0 @@
-/* https://m3.material.io/components/dividers/specs */
-
-:host {
-  --mdw-ink: var(--mdw-color__outline-variant);
-  position: relative;
-
-  display: block;
-  overflow: visible;
-
-  box-sizing: border-box;
-  block-size: 0;
-  inline-size: 100%;
-
-  color: rgb(var(--mdw-ink));
-}
-
-:host::before {
-  content: '';
-
-  display: block;
-
-  box-sizing: border-box;
-  block-size: 1px;
-  inline-size: auto;
-
-  background-color: currentcolor;
-}
-
-:host([vertical]) {
-  display: inline-flex;
-  vertical-align: top;
-
-  block-size: auto;
-  min-block-size: 100%;
-  inline-size: 0;
-}
-
-:host([vertical])::before {
-  block-size: auto;
-  min-inline-size: 1px;
-}

package/components/ExtendedFab.css

@@ -1,24 +0,0 @@
-/* https://m3.material.io/components/extended-fab/specs */
-
-:host {
-  --mdw-bg: var(--mdw-color__primary-container);
-  --mdw-ink: var(--mdw-color__on-primary-container);
-  --mdw-shape__size: 16px;
-  --mdw-surface__tint: var(--mdw-surface__tint__3);
-  --mdw-surface__tint__raised: var(--mdw-surface__tint__4);
-  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__3);
-  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__4);
-  min-inline-size: 48px;
-  padding: calc(16px + (var(--mdw-density) * 2px));
-}
-
-#icon {
-  font-size: 24px;
-}
-
-:host([lowered]) {
-  --mdw-surface__tint: var(--mdw-surface__tint__1);
-  --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
-  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
-  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
-}

package/components/Fab.css

@@ -1,23 +0,0 @@
-/* https://m3.material.io/components/floating-action-button/specs */
-
-:host {
-  min-inline-size: 24px;
-}
-
-#icon {
-  font-size: 24px;
-}
-
-#icon[fab-size="large"] {
-  font-size: 36px;
-}
-
-:host([fab-size="small"]) {
-  --mdw-shape__size: 12px;
-  padding: calc(8px + (var(--mdw-density) * 2px));
-}
-
-:host([fab-size="large"]) {
-  --mdw-shape__size: 28px;
-  padding: calc(30px + (var(--mdw-density) * 2px));
-}

package/components/FilterChip.css

@@ -1,80 +0,0 @@
-/* https://m3.material.io/components/chips/specs */
-
-/* Filter Chips can be elevated */
-
-:host {
-  --mdw-ink: var(--mdw-color__on-secondary-container);
-  --mdw-bg: var(--mdw-color__secondary-container);
-  gap: 8px;
-
-  padding-inline-start: max(4px, calc(8px + (var(--mdw-density) * 2px)));
-  padding-inline-end: max(12px, calc(16px + (var(--mdw-density) * 2px)));
-
-  color: rgb(var(--mdw-color__on-surface-variant));
-
-}
-
-:host(:focus) {
-  --mdw-outline__rgb: var(--mdw-color__outline);
-}
-
-#icon[selected] {
-  font-variation-settings: 'FILL' 1;
-}
-
-#shape {
-  background-color: transparent;
-}
-
-:host(:where([trailing-icon],[dropdown],[trailing-src])) {
-  padding-inline-start: max(4px, calc(8px + (var(--mdw-density) * 2px)));
-}
-
-#shape[elevated] {
-  background-color: rgb(var(--mdw-color__surface));
-}
-
-#shape[selected] {
-  background-color: rgb(var(--mdw-bg));
-}
-
-:host([selected]) {
-  color: rgb(var(--mdw-ink));
-}
-
-#outline[selected] {
-  opacity: 0;
-}
-
-#trailing-icon {
-  position: relative;
-
-  font-size: 18px;
-}
-
-.mdw-chip__checkbox {
-  position: absolute;
-
-  max-block-size: 0;
-  max-inline-size: 0;
-
-  appearance: none;
-  pointer-events: none;
-}
-
-#check-icon {
-  font-size: 0;
-}
-
-#check-icon[selected] {
-  font-size: 18px;
-}
-
-#check-icon[disabled] {
-  color: rgba(var(--mdw-color__on-surface), 0.38);
-}
-
-#shape[disabled]:is([elevated],[selected]) {
-  background-color: rgba(var(--mdw-color__on-surface), 0.12);
-  /* color: rgba(var(--mdw-color__on-surface), 0.38); */
-}

package/components/Headline.css

@@ -1,14 +0,0 @@
-:host {
-  font: var(--mdw-typescale__headline-large__font);
-  letter-spacing: var(--mdw-typescale__headline-large__letter-spacing);
-}
-
-:host([size="medium"]) {
-  font: var(--mdw-typescale__headline-medium__font);
-  letter-spacing: var(--mdw-typescale__headline-medium__letter-spacing);
-}
-
-:host([size="small"]) {
-  font: var(--mdw-typescale__headline-small__font);
-  letter-spacing: var(--mdw-typescale__headline-small__letter-spacing);
-}

package/components/Icon.css

@@ -1,76 +0,0 @@
-/* https://material.io/design/iconography/system-icons.html */
-
-:host {
-  display: inline-block;
-  vertical-align: -11.5%;
-
-  block-size: 1em;
-  inline-size: 1em;
-
-  -webkit-user-select: none;
-  user-select: none;
-
-  font-variation-settings: 'FILL' 1;
-
-  transition-duration: 200ms;
-  /* stylelint-disable-next-line liberty/use-logical-spec -- Safari does not animate inline-size */
-  transition-property: inline-size, width;
-}
-
-:host(:is([color],[ink])) {
-  color: rgb(var(--mdw-ink));
-}
-
-#icon {
-  /* Clip bounds in case font is not ready */
-  display: block;
-  overflow: clip;
-
-  block-size: 1em;
-  inline-size: 1em;
-
-  font-size: inherit;
-  font-variation-settings: inherit;
-
-  transition-delay: 1ms;
-  transition-duration: 200ms;
-
-  transition-property: font-variation-settings;
-}
-
-#icon[hidden] {
-  display: none;
-}
-
-#svg {
-  display: block;
-
-  block-size: inherit;
-  inline-size: inherit;
-
-  fill: currentColor;
-
-  object-fit: cover;
-}
-
-#img {
-  display: block;
-
-  block-size: inherit;
-  inline-size: inherit;
-
-  object-fit: cover;
-
-  transition-delay: 1ms;
-  transition-duration: 200ms;
-  transition-property: filter;
-}
-
-#img[disabled] {
-  filter: grayscale();
-}
-
-.material-symbols-outlined {
-  /* https://github.com/google/material-design-icons/issues/750 */
-  direction: inherit;
-}