@shortfuse/materialdesignweb 0.7.1-0 → 0.7.1-2

package/components/IconButton.css

@@ -1,150 +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));
-
-  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));
-}

package/components/ListSelect.css

@@ -1,9 +0,0 @@
-:host(:disabled) {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-:host([internals-disabled]) {
-  cursor: not-allowed;
-  pointer-events: none;
-}

package/components/Menu.css

@@ -1,171 +0,0 @@
-/* https://m3.material.io/components/menus/specs */
-
-:host {
-  --mdw-menu__transform-origin-inline-start: left;
-  --mdw-menu__transform-origin-inline-end: right;
-  /* Normal */
-  --mdw-menu__transform-origin-x: var(--mdw-menu__transform-origin-inline-start);
-  /* Down */
-  --mdw-menu__transform-origin-y: top;
-  --mdw-menu__inline-base: 56px;
-  --mdw-menu__size: 2;
-  --mdw-bg: var(--mdw-color__surface);
-  --mdw-ink: var(--mdw-color__on-surface);
-  position: absolute;
-  /* Default position is bottom */
-  /* Default direction is start */
-  inset-block: 100% auto;
-  inset-inline: auto 0;
-
-  display: block;
-  /* Hide scrollbar */
-  -ms-overflow-style: none;
-  /* Scroll mask */
-  overscroll-behavior: none;
-  overscroll-behavior: contain;
-  scrollbar-width: none;
-
-  pointer-events: none;
-
-  transform-origin: var(--mdw-menu__transform-origin-x) var(--mdw-menu__transform-origin-y);
-
-  transition-duration: motion.$fadeOutDuration;
-  transition-property: none;
-  transition-timing-function: motion.$decelerateEasing;
-}
-
-:host(::after) {
-  content: '';
-
-  display: block;
-
-  block-size: 200%;
-  inline-size: 200%;
-}
-
-:host(::-webkit-scrollbar) {
-  display: none;
-}
-
-dialog {
-  position: fixed;
-  inset: 0;
-
-  box-sizing: border-box;
-  block-size:100%;
-  max-block-size: none;
-  inline-size:100%;
-  max-inline-size: none;
-  margin: 0;
-  border: none;
-  padding: 0;
-
-  opacity: 0;
-  visibility: hidden;
-  z-index: 24;
-
-  background-color: transparent;
-
-  transition: none;
-  transition-property: opacity;
-  will-change: opacity;
-}
-
-dialog::backdrop {
-  /** Use scrim instead */
-  display: none;
-}
-
-dialog[aria-hidden="false"],
-dialog:modal {
-  display: block;
-
-  pointer-events: none;
-
-  opacity: 1;
-  visibility: visible;
-
-  transition-duration: var(--mdw-dialog__fade-in-duration);
-  transition-property: opacity;
-  transition-timing-function: var(--mdw-dialog__deceleration-easing);
-}
-
-#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: auto;
-  -webkit-tap-highlight-color: transparent;
-
-  visibility: hidden; /* Only show if [modal] */
-
-  z-index:0;
-}
-
-#form {
-  display: contents;
-}
-
-#scrim::-webkit-scrollbar {
-  display: none;
-}
-
-#scrim::after {
-  content: '';
-
-  display: block;
-
-  block-size: 200%;
-  inline-size: 200%;
-}
-
-#surface {
-  --mdw-shape__size: var(--mdw-shape__extra-small);
-  position: sticky;
-
-  display: inline-flex;
-  flex-direction: column;
-
-  inline-size: calc(var(--mdw-menu__size) * var(--mdw-menu__inline-base));
-  min-inline-size: calc(var(--mdw-menu__inline-base) * 2);
-  max-inline-size: 100vw;
-  flex:1;
-
-  pointer-events: auto;
-  /* background-color: rgb(var(--mdw-color__surface)); */
-  /* color: rgb(var(--mdw-color__on-surface)); */
-  /* stylelint-disable-next-line liberty/use-logical-spec */
-  will-change: top, left;
-}
-
-@supports(-moz-appearance: none) {
-  #surface {
-    position: absolute;
-  }
-}
-
-#scroller {
-  display: flex;
-  align-items: stretch;
-  flex-direction: column;
-  overflow-y: auto;
-  overscroll-behavior: none;
-  overscroll-behavior: contain;
-
-  flex: 1;
-
-  padding-block: 8px;
-}
-
-#scrim[modal] {
-  visibility: visible;
-}

package/components/MenuItem.css

@@ -1,53 +0,0 @@
-/* https://m3.material.io/components/menus/specs */
-
-:host {
-  gap: 12px;
-
-  padding-inline: 12px;
-
-  cursor: pointer;
-
-  white-space: nowrap;
-}
-
-#content {
-  padding-block: calc(4px + (var(--mdw-density) * 2px))
-}
-
-#icon {
-  transition-duration: 100ms;
-  transition-property: opacity;
-  will-change: opacity;
-}
-
-#trailing,
-#icon {
-  color: rgb(var(--mdw-color__on-surface-variant));
-}
-
-#selection {
-  opacity: 0;
-
-  font-size: 18px;
-}
-
-#selection.trailing {
-  font-size: 24px;
-}
-
-#selection[selected] {
-  opacity: 1;
-}
-
-:host([disabled]) {
-  cursor: not-allowed;
-}
-
-#anchor[selected] {
-  background-color: transparent;
-  color: inherit;
-}
-
-#content[selected] {
-  color: inherit;
-}

package/components/Nav.css

@@ -1,17 +0,0 @@
-/* https://m3.material.io/components/navigation-bar/specs */
-/* https://m3.material.io/components/navigation-drawer/specs */
-/* https://m3.material.io/components/navigation-rail/specs */
-
-:host {
-  --mdw-surface__tint: var(--mdw-surface__tint__2);
-  --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
-  --mdw-ink: var(--mdw-color__on-surface);
-  --mdw-bg: var(--mdw-color__surface);
-
-  z-index:2;
-
-  color: rgb(var(--mdw-ink));
-
-  font: var(--mdw-typescale__label-medium__font);
-  letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
-}