@shortfuse/materialdesignweb 0.7.1-0 → 0.7.1-2

package/components/NavBar.css

@@ -1,34 +0,0 @@
-/* https://m3.material.io/components/navigation-bar/specs */
-
-:host {
-  position: sticky;
-  inset-block-end: 0;
-  order:1; /* Nav Bars are at top of tab order, but bottom of page */
-
-  display: grid;
-  align-content: flex-start;
-  align-items: flex-start;
-  gap: 8px;
-  grid-auto-columns: minmax(48px, 1fr);
-  grid-auto-flow: column;
-
-  overflow: hidden; /* Don't expand viewport when contents translates */
-
-  box-sizing: border-box;
-  min-block-size: 80px;
-  inline-size: 100%;
-
-  flex-shrink: 0;
-
-  transform: translateY(0);
-
-  box-shadow: none;
-
-  text-align: center;
-
-  will-change: transform;
-}
-
-#slot {
-  pointer-events: auto;
-}

package/components/NavBarItem.css

@@ -1,41 +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 {
-  grid-auto-rows: minmax(20px, min-content);
-  grid-template-rows: [icon] minmax(32px, 1fr);
-  grid-template-columns: auto [icon] minmax(56px, 1fr) auto;
-
-  padding-block: 12px; /* Spec 16px bottom is based on 1em not 1lh */
-}
-
-#slot {
-  display: block;
-}
-
-:host(:empty) {
-  font-size: 0;
-  line-height: 0;
-}
-
-#slot[show-label] {
-  grid-column: 1 /4;
-
-  grid-row: 2;
-
-  opacity: 0;
-}
-
-#shape {
-  grid-column: 2;
-  grid-row: 1 / 1;
-}
-
-#slot[show-label="never"] {
-  block-size: 0;
-}
-
-#slot[show-label="active"][active] {
-  opacity: 1;
-}

package/components/NavDrawer.css

@@ -1,31 +0,0 @@
-/* https://m3.material.io/components/navigation-drawer/specs */
-
-:host([open]) {
-  --mdw-surface__tint: var(--mdw-surface__tint__0);
-  --mdw-surface__tint__raised: var(--mdw-surface__tint__1);
-  --mdw-shape__size: var(--mdw-shape__large, 16px);
-  --mdw-shape__size__top-start-size: 0px;
-  --mdw-shape__size__bottom-start-size: 0px;
-
-  --mdw-nav-item__badge__position: static;
-  --mdw-nav-item__badge__transform: none;
-  --mdw-nav-item__badge__grid-area: badge;
-  --mdw-nav-item__label__padding-block: 18px;
-  --mdw-nav-item__label__padding-inline: 52px 0;
-  --mdw-nav-item__anchor__display: block;
-  --mdw-nav-item__indicator__grid-area: auto;
-
-  display: block;
-  grid-template-rows: min-content;
-  grid-template-columns: minmax(360px, min-content);
-
-  min-inline-size: 360px;
-  padding-inline: 12px;
-
-  box-shadow: none;
-
-}
-
-#slot {
-  gap: 0;
-}

package/components/NavDrawerItem.css

@@ -1,42 +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 {
-  align-self: stretch;
-
-  display: grid;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  grid-template:
-    "icon label badge" minmax(56px, min-content)
-    / 24px 1fr minmax(0, min-content);
-  justify-items: flex-start;
-
-  padding-inline: 16px 24px;
-}
-
-#icon {
-  grid-area: icon;
-}
-
-#slot {
-  display: block;
-
-  text-align: start;
-}
-
-:host([active]) {
-  color: rgb(var(--mdw-ink));
-}
-
-#shape {
-  max-inline-size: none;
-  grid-column: auto;
-  grid-row: 1 / 2;
-}
-
-#badge-text {
-  z-index: 1;
-}

package/components/NavItem.css

@@ -1,181 +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-badge__scale: 0;
-  --mdw-shape__size: var(--mdw-shape__full);
-  --mdw-nav-item__offset-y: 0;
-  position: relative;
-
-  display: grid;
-  align-content: center;
-  align-items: center;
-  grid-auto-flow: row;
-  grid-auto-rows: minmax(20px, min-content);
-  grid-template-rows: [icon] minmax(32px, 1fr);
-  grid-template-columns: [icon] minmax(56px, 1fr);
-
-  justify-items: center;
-  row-gap: 4px;
-
-  box-sizing: border-box;
-  min-block-size: 56px;
-
-  padding-inline: 0;
-
-  cursor: pointer;
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  user-select: none;
-
-  font: var(--mdw-typescale__label-large__font);
-  letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
-
-  text-align: center;
-}
-
-:host(:not([color])) {
-  --mdw-ink: var(--mdw-color__on-secondary-container);
-  --mdw-bg: var(--mdw-color__secondary-container);
-}
-
-:host([color]) {
-  background-color: transparent;
-  color: rgb(var(--mdw-color__on-surface-variant));
-}
-
-#slot {
-  display: contents;
-  align-items: center;
-  flex-direction: column;
-  grid-area: label;
-  justify-content: center;
-
-  grid-column: 1 /4;
-
-  grid-row: 2;
-
-  flex: 1;
-
-  cursor: inherit;
-  outline: none;
-
-  transform: translateY(var(--mdw-nav-item__offset-y));
-
-  color: rgb(var(--mdw-color__on-surface-variant));
-
-  transition: opacity, color, transform 200ms;
-  will-change: opacity, transform;
-}
-
-#anchor {
-  position: absolute;
-  inset: 0;
-}
-
-#shape {
-  position: absolute;
-  /* stylelint-disable-next-line liberty/use-logical-spec */
-  top: 50%;
-  /* stylelint-disable-next-line liberty/use-logical-spec */
-  left: 50%;
-
-  block-size: 100%;
-  inline-size: 100%;
-  max-inline-size: 56px;
-
-  grid-column: icon;
-  grid-row: 1 / 1;
-
-  transform: translateX(-50%) translateY(-50%) translateY(var(--mdw-nav-item__offset-y));
-  z-index: 0;
-
-  background-color: transparent;
-
-  transition: transform 200ms;
-  will-change: transform;
-}
-
-#icon {
-  position: relative;
-  align-self: center;
-
-  grid-area: icon;
-
-  transform: translateY(var(--mdw-nav-item__offset-y));
-  z-index: 3;
-
-  color: rgb(var(--mdw-color__on-surface-variant));
-
-  font-size: 24px;
-  font-variation-settings: 'FILL' 0;
-
-  transition: transform 200ms;
-  will-change: transform;
-}
-
-#state {
-  z-index: 2;
-}
-
-#badge {
-  --mdw-badge__scale: 0;
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-
-  overflow: hidden;
-
-  max-inline-size: 50%;
-  grid-column: 1 / 4;
-
-  grid-row: 1 / 2;
-
-  transform: translateY(-100%) translateY(var(--mdw-nav-item__offset-y)) scale(var(--mdw-badge__scale));
-  z-index: 4;
-
-  text-align: start;
-  text-overflow: ellipsis;
-  text-transform: none;
-  white-space: nowrap;
-  word-break: normal;
-
-  transition: transform 200ms;
-  will-change: transform;
-}
-
-#badge[badge] {
-  --mdw-badge__scale: 1;
-}
-
-#ripple {
-  opacity: 1;
-
-  color: rgb(var(--mdw-bg));
-}
-
-#ripple-container {
-  z-index:1;
-}
-
-#shape[active] {
-  color: rgb(var(--mdw-ink));
-}
-
-#icon[active] {
-  color: rgb(var(--mdw-ink));
-
-  font-variation-settings: 'FILL' 1;
-}
-
-#slot[active] {
-  color: inherit;
-}
-
-:host([show-label]) {
-  --mdw-nav-item__offset-y: 12px;
-}
-
-:host([show-label="active"][active]) {
-  --mdw-nav-item__offset-y: 0;
-}

package/components/NavRail.css

@@ -1,47 +0,0 @@
-/* https://m3.material.io/components/navigation-rail/specs */
-
-:host{
-  display: grid;
-  align-content: flex-start;
-  flex-direction: column;
-  grid-template-rows: auto minmax(0,1fr);
-  grid-template-columns: 80px;
-  justify-items: stretch;
-
-  text-align: center;
-}
-
-#start {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  gap: 12px;
-
-  padding-block-start: 12px;
-
-}
-
-#slot {
-  align-self: center;
-
-  display: flex;
-  align-items: stretch;
-  flex-direction: column;
-  gap: 12px;
-  overflow-x: clip;
-  overflow-y: auto;
-
-  box-sizing: border-box;
-
-  inline-size: 100%;
-
-  padding-block: 12px;
-}
-
-#slot[align="start"] {
-  align-self: flex-start;
-}
-
-#slot[align="end"] {
-  align-self: flex-end;
-}

package/components/NavRailItem.css

@@ -1,25 +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 {
-  grid-auto-flow: row;
-  grid-auto-rows: minmax(20px, min-content);
-  grid-template-rows: [icon] minmax(32px, 1fr);
-  grid-template-columns: [icon] minmax(56px, 1fr);
-
-  padding-inline: 12px;
-}
-
-#slot {
-  display: contents;
-  overflow-wrap: anywhere;
-
-  word-break: break-all;
-  word-break: break-word;
-}
-
-#badge {
-  max-inline-size:40px;
-  grid-column: 1 / 2;
-}

package/components/Outline.css

@@ -1,138 +0,0 @@
-.outline {
-  position: absolute;
-  inset: 0;
-
-  pointer-events: none;
-
-  border-color: currentColor;
-  border-radius: inherit;
-  color: rgb(var(--mdw-color__outline));
-}
-
-.outline:is([pressed],[focused]) {
-  color: rgb(var(--mdw-ink));
-
-  transition-delay: 0;
-  transition-duration: 0;
-}
-
-.outline[disabled] {
-  color: rgba(var(--mdw-color__on-surface), 0.12);
-}
-
-.outline::before {
-  content: '';
-
-  position: absolute;
-  inset: 0;
-
-  border-style: solid;
-  border-width: 1px;
-
-  border-radius: inherit;
-}
-
-@supports(-webkit-mask-box-image: none) {
-  .outline::before {
-    content: none;
-  }
-
-  .outline::after {
-    content: '';
-
-    position: absolute;
-    inset: 0;
-
-    -webkit-mask-box-image: var(--mdw-shape__mask-image__edges)
-      8 fill /
-      auto
-      stretch;
-
-    background-color: currentColor;
-  }
-
-  .outline-section {
-    position: absolute;
-    inset: 0;
-  }
-
-  .outline-section::before,
-  .outline-section::after {
-    content: "";
-
-    position: absolute;
-
-    max-block-size: 50%;
-    max-inline-size: 50%;
-
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: contain;
-
-    background-color: currentColor;
-
-    transition-duration: 200ms;
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    transition-property: width, height;
-  }
-
-  .outline-left::before {
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    left: calc(-1px * var(--mdw-shape__convex));
-    inset-block-start: calc(-1px * var(--mdw-shape__convex));
-
-    block-size: calc(var(--mdw-shape__size__top-left-size));
-    inline-size: calc(var(--mdw-shape__size__top-left-size));
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    padding-right: calc(2px * var(--mdw-shape__convex));
-    padding-block-end: calc(2px * var(--mdw-shape__convex));
-
-    -webkit-mask-image: var(--mdw-shape__mask-image__top-left);
-  }
-
-  .outline-left::after {
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    left: calc(-1px * var(--mdw-shape__convex));
-    inset-block-end: calc(-1px * var(--mdw-shape__convex));
-
-    block-size: var(--mdw-shape__size__bottom-left-size);
-    inline-size: var(--mdw-shape__size__bottom-left-size);
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    padding-right: calc(2px * var(--mdw-shape__convex));
-    padding-block-start: calc(2px * var(--mdw-shape__convex));
-
-    -webkit-mask-image: var(--mdw-shape__mask-image__bottom-left);
-    -webkit-mask-position-y: 100%;
-  }
-
-  .outline-right::before {
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    right: calc(-1px * var(--mdw-shape__convex));
-    inset-block-start: calc(-1px * var(--mdw-shape__convex));
-
-    block-size: var(--mdw-shape__size__top-right-size);
-    inline-size: var(--mdw-shape__size__top-right-size);
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    padding-left: calc(2px * var(--mdw-shape__convex));
-    padding-block-end: calc(2px * var(--mdw-shape__convex));
-
-    -webkit-mask-image: var(--mdw-shape__mask-image__top-right);
-    -webkit-mask-position-x: 100%;
-  }
-
-  .outline-right::after {
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    right: calc(-1px * var(--mdw-shape__convex));
-    inset-block-end: calc(-1px * var(--mdw-shape__convex));
-
-    block-size: var(--mdw-shape__size__bottom-right-size);
-    inline-size: var(--mdw-shape__size__bottom-right-size);
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    padding-left: calc(2px * var(--mdw-shape__convex));
-    padding-block-start: calc(2px * var(--mdw-shape__convex));
-
-    -webkit-mask-image: var(--mdw-shape__mask-image__bottom-right);
-    -webkit-mask-position-x: 100%;
-    -webkit-mask-position-y: 100%;
-  }
-
-}