@shortfuse/materialdesignweb 0.7.0 → 0.7.1-1

package/components/Tab.css

@@ -1,85 +0,0 @@
-/* https://m3.material.io/components/tabs/specs */
-
-:host {
-  display: inline-flex;
-
-  min-inline-size: 64px;
-
-  cursor: pointer;
-}
-
-#anchor {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-
-  box-sizing: border-box;
-  block-size: 100%;
-  inline-size: 100%;
-  flex: 1;
-
-  padding-block: 6px;
-  padding-inline: 12px;
-
-  cursor: pointer;
-  outline: none;
-
-  color: inherit;
-
-  text-decoration: inherit;
-}
-
-#icon {
-  padding-block: 4px;
-
-  font-size: 24px;
-  font-variation-settings: 'FILL' 0;
-
-}
-
-#shape[disabled],
-#anchor[disabled] {
-  cursor: not-allowed;
-
-  background-color: rgba(var(--mdw-color__on-surface), 0.12);
-  color: rgba(var(--mdw-color__on-surface), 0.38);
-}
-
-:host([active]) {
-  color: rgb(var(--mdw-ink));
-}
-
-#icon[active] {
-  font-variation-settings: 'FILL' 1;
-}
-
-#slot {
-  display: block;
-  overflow-x: hidden;
-  overflow-y: hidden;
-
-  max-block-size: var(--mdw-typescale__title-small__line-height);
-
-  max-inline-size: 100%;
-
-  cursor: inherit;
-  outline: none;
-
-  opacity: var(--mdw-nav-item__anchor__opacity, 1);
-  transform: translateY(var(--mdw-nav-item__offset-y, 0));
-
-  color: inherit;
-
-  font: var(--mdw-typescale__title-small__font);
-  letter-spacing: var(--mdw-typescale__title-small__letter-spacing);
-  text-align: center;
-  text-decoration: inherit;
-  text-overflow: ellipsis;
-  text-transform: none;
-  white-space: nowrap;
-  word-break: break-word;
-
-  transition: opacity, color, transform 200ms;
-  will-change: opacity, transform;
-}

package/components/TabList.css

@@ -1,129 +0,0 @@
-/* https://m3.material.io/components/tabs/specs */
-
-:host {
-  --mdw-ink: var(--mdw-color__primary);
-  --mdw-shape__bg: rgb(var(--mdw-color__surface));
-  position: relative;
-  position: sticky;
-  inset-block-start: 0;
-  inset-inline: 0;
-
-  display: grid;
-  align-items: stretch;
-  grid-auto-columns: minmax(auto, 1fr);
-  grid-auto-flow: column;
-  justify-content: space-evenly;
-  overflow-y: hidden;
-
-  box-sizing: border-box;
-  min-block-size: 48px;
-  inline-size: 100%;
-  flex:none;
-
-  color: inherit;
-
-  text-align: center;
-
-  will-change: transform;
-}
-
-#indicator {
-  --corner: 3;
-  --width: 24;
-  --offset: 0;
-  --visibility: 0;
-  --transition-ratio: 1;
-  position: absolute;
-  inset-block-end: 0;
-  inset-inline: 0;
-
-  overflow-y: clip;
-
-  block-size: 3px;
-  inline-size: 100%;
-
-  pointer-events: none;
-
-  opacity: 1;
-  transform: translateY(calc(100% * (1 - var(--visibility))));
-
-  color: inherit;
-
-  transition: transform 200ms;
-  will-change: transform;
-}
-
-.indicator-piece {
-  position: absolute;
-  inset-block: 0;
-
-  opacity: 1;
-  /* opacity: 0.60; */
-  transform-origin: 0 0;
-  z-index:1;
-
-  background-color: currentColor;
-
-  transition: transform;
-  transition-duration: calc(200ms * var(--transition-ratio));
-  will-change: transform;
-}
-
-#indicator-start {
-  /* stylelint-disable-next-line liberty/use-logical-spec */
-  left: 0;
-
-  inline-size: calc(2 * 1px * var(--corner));
-
-  transform: translateX(var(--offset));
-
-  /* stylelint-disable-next-line liberty/use-logical-spec */
-  border-top-left-radius: calc(1px * var(--corner));
-}
-
-#indicator-center {
-  /* Chrome has rendering issues upscaling small elements */
-  --precision: 100;
-
-  position: absolute;
-  /* stylelint-disable-next-line liberty/use-logical-spec */
-  left: calc(1px * var(--corner));
-
-  inline-size: calc(1px * var(--precision));
-
-  transform: translateX(var(--offset)) scaleX(calc((var(--width) - (2 * var(--corner))) / var(--precision)));
-
-}
-
-#indicator-end {
-  position: absolute;
-  /* stylelint-disable-next-line liberty/use-logical-spec */
-  left: 0;
-
-  inline-size: calc(2 * 1px * var(--corner));
-
-  transform:
-    translateX(var(--offset))
-    translateX(calc(-2px * var(--corner)))
-    translateX(calc(var(--width) * 1px));
-
-  /* stylelint-disable-next-line liberty/use-logical-spec */
-  border-top-right-radius: calc(1px * var(--corner));
-}
-
-#indicator[active] {
-  --visibility: 1;
-  color: rgb(var(--mdw-ink));
-}
-
-#indicator[secondary] {
-  --corner: 0;
-}
-
-:host([scrollable]) {
-  grid-auto-columns: max-content;
-  justify-content: flex-start;
-  overflow-x: auto;
-
-  padding-inline: 48px
-}

package/components/TextArea.css

@@ -1,93 +0,0 @@
-/* https://m3.material.io/components/text-fields/specs */
-
-:host {
-  display: grid;
-  grid-auto-flow: row;
-  grid-template-rows: minmax(0, 100%);
-}
-
-:host(:is([filled][label])) {
-  --control__margin-top: calc((var(--mdw-text-field__ratio) * 8px) + var(--mdw-typescale__body-small__line-height));
-  --control__padding-top: 0px;
-  --control__padding-bottom: calc((var(--mdw-text-field__ratio) * 8px) - 1px);
-  --control__margin-bottom: 1px;
-}
-
-#label {
-  --max-rows: none;
-  --line-height: var(--mdw-typescale__body-large__line-height);
-  --expected-height: calc((var(--control__margin-top) + var(--control__padding-top) + var(--line-height) + var(--control__padding-bottom) + var(--control__margin-bottom)));
-  max-block-size: 100%;
-  grid-row: 1 / 1;
-  padding: 0;
-}
-
-@supports(height: 1lh) {
-  #label {
-    --line-height: 1lh;
-  }
-}
-
-#slot {
-  display: none;
-}
-
-#control {
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-
-  box-sizing: border-box;
-  block-size: 100%;
-
-  min-block-size: var(--expected-height);
-  /* Avoid clipping on resize */
-  max-block-size: inherit;
-  inline-size: 100% !important; /* !important to override user-agent resize */
-  padding-inline: 16px;
-}
-
-#control[icon] {
-  padding-inline-start: 0;
-}
-
-#control[minrows] {
-  min-block-size: calc((var(--min-rows) * var(--line-height))
-    + var(--control__margin-top)
-    + var(--control__padding-top)
-    + var(--control__padding-bottom)
-    + var(--control__margin-bottom)
-  );
-}
-
-#control[maxrows] {
-  max-block-size: calc((var(--max-rows) * var(--line-height))
-    + var(--control__margin-top)
-    + var(--control__padding-top)
-    + var(--control__padding-bottom)
-    + var(--control__margin-bottom)
-  );
-}
-
-#control:is([icon], [input-prefix]) {
-  padding-inline-start: 0;
-}
-
-#control:is([trailing-icon], [input-suffix]) {
-  padding-inline-end: 0;
-}
-
-#suffix {
-  padding-inline-end: 16px;
-}
-
-mdw-icon {
-  align-self: flex-start;
-
-  margin-block-start: calc((var(--expected-height) - var(--mdw-icon__size)) / 2);
-}
-
-#control[fixed] {
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  resize: none;
-}

package/components/Title.css

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

package/components/Tooltip.css

@@ -1,40 +0,0 @@
-/* https://m2.material.io/components/tooltips */
-
-:host {
-  --mdw-shape__size: var(--mdw-shape__extra-small);
-  --mdw-ink: var(--mdw-color__on-surface-variant);
-  --mdw-shape__bg: rgb(var(--mdw-color__surface-variant));
-  display: block;
-  vertical-align: middle;
-
-  box-sizing: border-box;
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-  margin-inline: auto;
-  padding-block: 4px;
-  padding-inline: 8px;
-
-  pointer-events: none;
-
-  opacity: 0;
-  transform: scale(0);
-  z-index: 24;
-
-  font: var(--mdw-typescale__label-medium__font);
-  letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
-
-  transition: transform 200ms, opacity 200ms;
-
-}
-
-:host([touch]) {
-  padding-block: 6px;
-  padding-inline: 16px;
-
-  font: var(--mdw-typescale__label-large__font);
-  letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
-}
-
-:host([open]) {
-  opacity: 1;
-  transform: scale(1);
-}

package/components/TopAppBar.css

@@ -1,209 +0,0 @@
-/* https://m3.material.io/components/bottom-app-bar/specs */
-
-:host {
-  --mdw-bg: var(--mdw-color__surface);
-  --mdw-ink: var(--mdw-color__on-surface);
-  --mdw-surface__tint: var(--mdw-surface__tint__0);
-  --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
-  display: contents;
-
-  z-index:2;
-}
-
-#surface {
-  position: sticky;
-  inset-block-start: 0;
-
-  display: grid;
-
-  align-items: center;
-  gap: 12px;
-  grid-auto-flow: row;
-  grid-template-rows: minmax(64px,min-content);
-  grid-template-columns: minmax(auto,1fr) minmax(0,auto) minmax(auto,1fr);
-  overflow-x: clip; /* Clip oversized touch targets to avoid scroll-bars */
-  overflow-y: visible;
-
-  box-sizing: border-box;
-  inline-size: 100%;
-  max-inline-size: 100%;
-
-  /* 16px from icon */
-  /* inset = (button.width / 2) - (icon.width / 2) */
-  /* paddingInline = 16px - inset */
-  /* paddingInlineStart = 16px - ((48px / 2) - (24px / 2)) */
-  /* paddingInlineEnd = 16px - ((48px / 2) - (30px / 2)) */
-
-  padding-inline: 4px;
-
-  pointer-events: auto;
-
-  filter: none; /* Never receive shadow */
-
-  z-index: 5;
-  /* inset-inline: 0; */
-
-  background-color: rgb(var(--mdw-bg));
-  color: rgb(var(--mdw-ink));
-
-  transition: grid-template-columns 100ms;
-
-}
-
-#surface-tint {
-  position: 0;
-
-  z-index: 1;
-}
-
-#leading {
-  justify-self: flex-start;
-
-  display: flex;
-  align-items: center;
-
-  grid-column: 1;
-  grid-row: 1;
-}
-
-#headline {
-  display: inline-block;
-
-  overflow: clip hidden;
-
-  max-inline-size: 100%;
-
-  grid-column: 2;
-  grid-row: 1;
-
-  font: var(--mdw-typescale__title-large__font);
-  letter-spacing: var(--mdw-typescale__title-large__letter-spacing);
-
-  text-overflow: ellipsis;
-  text-transform: none;
-  white-space: nowrap;
-  word-break: break-word;
-
-  transition-duration: 200ms;
-  transition-property: transform, opacity, color, background-color;
-}
-
-#trailing {
-  justify-self: flex-end;
-
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  justify-content: flex-end;
-
-  grid-column: 3;
-  grid-row: 1;
-
-  color: var(--mdw-color__on-surface-variant);
-}
-
-/* Medium */
-#companion {
-  position: relative;
-
-  display: flex;
-  align-items: flex-end;
-
-  /**
-   * Total Height = 112px
-   * Bar = 12 + 40 + 12 (64)
-   * Companion = 112px - 64
-   * Companion Bottom = 20px
-   * Companion = 28px
-   * Shift up = 1lh - 28px
-   */
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-  margin-block-start: calc(28px - var(--mdw-typescale__headline-small__line-height));
-  padding-block-end: 20px;
-
-  padding-inline: 16px;
-
-  background-color: rgb(var(--mdw-bg));
-  box-shadow: none;
-
-  font: var(--mdw-typescale__headline-small__font);
-  letter-spacing: var(--mdw-typescale__headline-small__letter-spacing);
-  white-space: nowrap;
-}
-
-#companion[size="large"] {
-  /**
-   * Total Height = 152px
-   * Bar = 12 + 40 + 12 (64)
-   * Companion = 152px - 64
-   * Companion Bottom = 20px
-   * Companion = 68px
-   * Shift up = 2lh - 68px
-   */
-
-  min-block-size: calc(2 * var(--mdw-typescale__headline-medium__line-height));
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-  margin-block-start: calc(68px - (2 * var(--mdw-typescale__headline-medium__line-height)));
-
-  font: var(--mdw-typescale__headline-medium__font);
-  letter-spacing: var(--mdw-typescale__headline-medium__letter-spacing);
-  white-space: normal;
-}
-
-@supports(width: 1lh) {
-  #companion {
-    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-    margin-block-start: calc(28px - 1lh);
-  }
-
-  #companion[size="large"] {
-    min-block-size: 2lh;
-    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-    margin-block-start: calc(68px - 2lh);
-  }
-}
-
-#companion-slot {
-  display: block;
-  overflow-x: clip;
-  overflow-y: hidden;
-
-  text-overflow: ellipsis;
-  text-transform: none;
-  word-break: break-word;
-}
-
-#companion-slot[size="large"] {
-  max-block-size: calc(2 * var(--mdw-typescale__headline-medium__line-height));
-}
-
-@supports(-webkit-line-clamp: 2) {
-  #companion-slot[size="large"] {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-
-    max-block-size: none;
-  }
-}
-
-#surface[hide-on-scroll] {
-  position: relative;
-
-  inset-block-start: 0;
-
-  transform: translateY(0);
-
-  will-change: transform, position;
-}
-
-#surface[size="small"] {
-  gap: 4px;
-  grid-template-columns: auto 1fr auto;
-}
-
-#headline:is([size="medium"],[size="large"]) {
-  opacity: 0;
-
-  will-change: opacity;
-}

package/mixins/ControlMixin.css

@@ -1,57 +0,0 @@
-:host {
-  display: inline-flex;
-}
-
-/* Remove Firefox inner */
-:host(::-moz-focus-inner) {
-  border: 0;
-}
-
-#label {
-  display: contents;
-
-  pointer-events: none;
-}
-
-#control {
-  /* Control is the touch target */
-  /* Firefox requires at least 1px "visible" for screen reading */
-  /* Safari will not allow interaction with 0 opacity */
-  /* Chrome will not focus with visibility:hidden */
-
-  position: absolute;
-  inset: 50%;
-  /* --mdw-device-pixel-ratio: 1; */
-
-  block-size: 100%;
-  min-block-size: 48px;
-  inline-size:100%;
-  min-inline-size: 48px;
-  margin: 0;
-  border: 0;
-  padding: 0;
-
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-
-  cursor: auto;
-  outline: none;
-
-  pointer-events: auto;
-
-  transform: translateX(-50%) translateY(-50%);
-
-  /* Safari and Chrome will emit two click events if not at top of stack */
-  /* Allows up to 3 other layers (eg: ripple, outline) */
-  z-index: 4;
-
-  background-color: transparent;
-
-  border-radius: 0;
-  color: transparent;
-}
-
-#control::-moz-focus-inner {
-  border: 0;
-}

package/mixins/DensityMixin.css

@@ -1,40 +0,0 @@
-:host {
-  --mdw-density: var(--mdw-density__default, 0);
-}
-
-/* Reset */
-:host([density]) {
-  --mdw-density: 0;
-}
-
-:host([density="-1"]) {
-  --mdw-density: -1;
-}
-
-:host([density="-2"]) {
-  --mdw-density: -2;
-}
-
-:host([density="-3"]) {
-  --mdw-density: -2;
-}
-
-:host([density="-4"]) {
-  --mdw-density: -4;
-}
-
-:host([density="1"]) {
-  --mdw-density: 1;
-}
-
-:host([density="2"]) {
-  --mdw-density: 2;
-}
-
-:host([density="3"]) {
-  --mdw-density: 3;
-}
-
-:host([density="4"]) {
-  --mdw-density: 3;
-}