@shortfuse/materialdesignweb 0.7.0 → 0.7.1-1

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;
-}

package/components/IconButton.css

@@ -1,151 +0,0 @@
-/* https://m3.material.io/components/icon-buttons/specs */
-
-:host {
-  --mdw-shape__size: var(--mdw-shape__full);
-  --mdw-ink: rgb(var(--mdw-color__on-surface-variant));
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  padding: max(8px, calc(8px + (var(--mdw-density) * 2px)));
-
-  background-color: transparent;
-
-  font-size: 24px;
-}
-
-:host(:where([type="checkbox"])) {
-  --mdw-ink: var(--mdw-color__primary);
-}
-
-/** Filled | Filled Checked */
-:host(:where([filled])) {
-  --mdw-ink: var(--mdw-color__on-primary);
-  --mdw-bg: var(--mdw-color__primary);
-  --mdw-surface__shadow__resting: none;
-  --mdw-surface__shadow__raised: none;
-}
-
-/** Tonal | Tonal Checked */
-:host(:where([filled="tonal"])) {
-  --mdw-ink: var(--mdw-color__on-secondary-container);
-  --mdw-bg: var(--mdw-color__secondary-container);
-}
-
-/** Outlined | Outlined Unchecked */
-:host(:where([outlined])) {
-  --mdw-ink: var(--mdw-color__on-surface-variant);
-}
-
-/** Outlined | Outlined Unchecked */
-:host(:where([outlined][type="checkbox"])) {
-  --mdw-bg: var(--mdw-color__inverse-surface);
-  --mdw-ink: var(--mdw-color__inverse-on-surface);
-}
-
-#label {
-  font-size: inherit;
-  letter-spacing: inherit;
-}
-
-#shape[toggle] {
-  background-color: transparent;
-}
-
-.colored[toggle] {
-  color: rgb(var(--mdw-color__on-surface-variant));
-}
-
-.colored[selected] {
-  /* background-color: rgb(var(--mdw-bg)); */
-  color: rgb(var(--mdw-ink));
-}
-
-#shape[filled][toggle] {
-  background-color: rgb(var(--mdw-color__surface-variant));
-}
-
-.colored[filled][toggle] {
-  color: rgb(var(--mdw-bg));
-}
-
-#shape[filled="tonal"][toggle] {
-  background-color: rgb(var(--mdw-color__surface-variant));
-}
-
-.colored[filled="tonal"][toggle] {
-  color: rgb(var(--mdw-color__on-surface-variant));
-}
-
-#shape[filled][selected] {
-  background-color: rgb(var(--mdw-bg));
-}
-
-.colored[filled][selected] {
-  color: rgb(var(--mdw-ink));
-}
-
-#shape[outlined] {
-  background-color: transparent;
-}
-
-.colored[outlined] {
-  color: inherit;
-}
-
-#shape[outlined][toggle] {
-  background-color: transparent;
-}
-
-.colored[outlined][toggle] {
-  color: rgb(var(--mdw-color__on-surface-variant));
-}
-
-#shape[outlined][selected] {
-  background-color: rgb(var(--mdw-bg));
-}
-
-.colored[outlined][selected] {
-  color: rgb(var(--mdw-ink));
-}
-
-#icon {
-  font-size: inherit;
-  font-variation-settings: 'FILL' 1;
-}
-
-#icon[toggle] {
-  font-variation-settings: 'FILL' 0;
-}
-
-#icon[selected] {
-  font-variation-settings: 'FILL' 1;
-}
-
-#outline[focused] {
-  opacity: 1;
-
-  color: inherit;
-}
-
-#outline[selected] {
-  opacity: 0;
-}
-
-/** Disabled */
-.colored[disabled] {
-  cursor: not-allowed;
-
-  color: rgba(var(--mdw-color__on-surface), 0.38);
-}
-
-#shape[disabled][filled],
-#shape[disabled][outlined][selected] {
-  background-color: rgba(var(--mdw-color__on-surface), 0.12);
-}
-
-.colored[disabled][filled],
-.colored[disabled][outlined][selected] {
-  color: rgba(var(--mdw-color__on-surface), 0.38);
-}

package/components/Label.css

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

package/components/Layout.css

@@ -1,19 +0,0 @@
-/* https://m3.material.io/foundations/layout/applying-layout/window-size-classes */
-
-:host {
-  display: block;
-}
-
-/* Pane Slot */
-#slot {
-  display: flex;
-  gap: 24px;
-
-  justify-content: center;
-
-  padding-inline: 16px;
-
-  transition: padding-inline 100ms;
-}
-
-@media screen and (min-width: 648px) { #slot { padding-inline: 24px; } }

package/components/List.css

@@ -1,12 +0,0 @@
-/* https://m3.material.io/components/lists/specs */
-
-:host {
-  display: flex;
-  flex-direction: column;
-
-  padding-block: 8px;
-}
-
-:host(:focus) {
-  outline: 1px solid red;
-}

package/components/ListItem.css

@@ -1,224 +0,0 @@
-/* https://m3.material.io/components/lists/specs */
-
-:host {
-  --mdw-shape__size: 0px;
-  /* Grid does not auto collapse columns, leaving gaps */
-
-  display: flex;
-  align-items: center;
-  gap: 16px;
-
-  border: none;
-  padding-block: 8px;
-  padding-inline: 16px 24px;
-
-  outline: none;
-
-  color: inherit;
-
-  text-decoration: none;
-  cursor: auto;
-}
-
-:host([href]) {
-  cursor: pointer;
-}
-
-#anchor {
-  position: absolute;
-  inset: 0;
-  outline: none;
-  color: inherit;
-
-}
-
-:host([video]) {
-  padding-inline-start: 0;
-}
-
-:host([lines="3"]) {
-  align-items: flex-start;
-
-  padding-block: 12px;
-}
-
-#content {
-  display: inline-flex;
-  align-items: flex-start;
-  flex-direction: column;
-  justify-content: center;
-
-  flex: 1;
-
-  padding-block: calc(8px + (var(--mdw-density) * 2px));
-}
-
-#content:is([has-supporting], [lines="2"]) {
-  box-sizing: border-box;
-  min-block-size: calc(8px + calc(48px + var(--mdw-density) * 2px));
-  padding-block: calc(4px + var(--mdw-density) * 2px);
-}
-
-#content:is([lines="3"]) {
-  box-sizing: border-box;
-  min-block-size: calc(8px + calc(48px + var(--mdw-density) * 2px));
-  padding-block: calc(0 + var(--mdw-density) * 2px);
-}
-
-#icon {
-  font-size: 24px;
-}
-
-#trailing-icon {
-  font-size: 24px;
-}
-
-#divider {
-  position: absolute;
-  inset-block-end: 0;
-
-  display: block;
-
-  color: rgb(var(--mdw-color__surface-variant));
-}
-
-#divider[divider="inset"] {
-  padding-inline: 16px 24px;
-}
-
-#slot {
-  max-block-size: var(--mdw-typescale__body-large__line-height) * 2;
-
-  /* background-color: rgba(255,0,0,0.10); */
-
-  color: var(--mdw-color__on-surface);
-
-  font: var(--mdw-typescale__body-large__font);
-  letter-spacing: var(--mdw-typescale__body-large__letter-spacing);
-}
-
-#supporting {
-  max-block-size: calc(var(--mdw-typescale__body-medium__line-height) * 2);
-
-  /* background-color: rgba(0,255,0,0.10); */
-
-  color: var(--mdw-color__on-surface-variant);
-
-  font: var(--mdw-typescale__body-medium__font);
-  letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
-}
-
-#trailing {
-  color: var(--mdw-color__on-surface-variant);
-
-  font: var(--mdw-typescale__body-medium__font);
-  letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
-}
-
-#slot, #supporting {
-  display: block;
-  overflow-x: hidden;
-  overflow-y: hidden;
-
-  text-align: start;
-  text-overflow: ellipsis;
-  text-transform: none;
-  white-space: normal;
-  word-break: break-word;
-}
-
-#supporting[lines="2"] {
-  min-block-size: var(--mdw-typescale__body-medium__line-height);
-  max-block-size: var(--mdw-typescale__body-medium__line-height);
-}
-
-#supporting[lines="3"] {
-  min-block-size: calc(var(--mdw-typescale__body-medium__line-height) * 2);
-  max-block-size: calc(var(--mdw-typescale__body-medium__line-height) * 2);
-}
-
-@supports(width: 1lh) {
-  #slot {
-    max-block-size: 1lh;
-  }
-
-  #supporting {
-    max-block-size: 2lh;
-  }
-
-  #supporting[lines="2"] {
-    min-block-size: 1lh;
-    max-block-size: 1lh;
-  }
-
-  #supporting[lines="3"] {
-    min-block-size: 2lh;
-    max-block-size: 2lh;
-  }
-}
-
-@supports(-webkit-line-clamp:1) {
-  #slot {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-  }
-
-  #supporting {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-
-  #supporting[lines="2"] {
-    -webkit-line-clamp: 1;
-  }
-}
-
-#avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  block-size: 40px;
-  inline-size: 40px;
-
-  border-radius: 50%;
-}
-
-#img {
-  block-size: 56px;
-  max-block-size: 56px;
-  inline-size: 56px;
-  max-inline-size: 56px;
-
-  object-fit: cover;
-  object-position: center center;
-}
-
-#img[video] {
-  block-size: 64px;
-  max-block-size: 64px;
-  inline-size: 114px;
-  max-inline-size: 114px;
-}
-
-#checkbox {
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-  margin: 3px;
-}
-
-#radio {
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-  margin: 2px;
-}
-
-.trailing {
-  order: 1;
-}
-
-:host([disabled]) {
-  opacity: 0.38;
-
-  color: rgb(var(--mdw-color__on-surface));
-}

package/components/ListOption.css

@@ -1,34 +0,0 @@
-:host {
-  --mdw-bg: var(--mdw-color__secondary-container);
-  --mdw-ink: var(--mdw-color__on-secondary-container);
-  cursor: pointer;
-
-  z-index: 0;
-}
-
-:host([href]) {
-  cursor: pointer;
-}
-
-:host([disabled]) {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-#content {
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-#content[selected] {
-  color: rgb(var(--mdw-ink));
-}
-
-#anchor {
-  z-index: -1;
-}
-
-#anchor[selected] {
-  background-color: rgb(var(--mdw-bg));
-  color: rgb(var(--mdw-ink));
-}