@stackific/md3 0.1.1 → 0.1.3

package/src/styles/elements/_navigations.scss

@@ -1,450 +0,0 @@
-// <nav> + .row containers. Edge-rail vs tabbed vs toolbar vs group variants.
-// Largest non-form component file in the framework.
-
-// ────────────────────────────── shared selectors ───────────────────────────
-$-nav-item-direct: "nav:is(.left, .right, .top, .bottom) > a:not(.button, .chip)";
-$-nav-item-nested: "nav:is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class='active']) > a:not(.button, .chip)";
-
-// ────────────────────────────── base reset ─────────────────────────────────
-nav > :is(ol, ul),
-nav > :is(ol, ul) > li {
-  all: unset;
-}
-
-nav,
-.row,
-a.row {
-  display: flex;
-  align-items: center;
-  align-self: normal;
-  text-align: start;
-  justify-content: flex-start;
-  white-space: nowrap;
-  gap: 1rem;
-  border-radius: 0;
-}
-
-a.row,
-nav.row {
-  min-block-size: 3rem;
-  margin: 0;
-}
-
-:is(nav, .row, .max) > :only-child,
-:is(nav, .row, .max) > span > *,
-nav > :is(ol, ul) > li > :only-child,
-nav > :is(ol, ul) > li > span > * {
-  margin: 0;
-}
-
-:is(nav, .row) > :not(ul, ol, header, footer) {
-  margin: 0;
-  white-space: normal;
-  flex: none;
-}
-
-:is(nav, .row).min {
-  display: inline-flex;
-}
-
-// gap scale
-$-nav-gaps: (
-  "no":     0,
-  "tiny":   0.5rem,
-  "medium": 1.5rem,
-  "large":  2rem,
-);
-
-@each $name, $value in $-nav-gaps {
-  :is(nav, .row, li).#{$name}-space {
-    gap: $value;
-  }
-}
-
-:is(nav, .row) > .max,
-:is(nav, .row) > :is(ol, ul) > .max {
-  flex: 1;
-}
-
-:is(nav, .row).wrap {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-:is(header, footer) > :is(nav, .row) {
-  min-block-size: inherit;
-}
-
-// ────────────────────────── edge-rail navs ─────────────────────────────────
-nav:is(.left, .right, .top, .bottom) {
-  --_padding: 0.5rem;
-  --_top: calc(var(--_padding, 0) + var(--top, 0));
-  --_bottom: calc(var(--_padding, 0) + var(--bottom, 0));
-  position: sticky;
-  inset: 0;
-  border: 0;
-  color: var(--on-surface);
-  transform: none;
-  z-index: 100;
-  text-align: center;
-  padding: var(--_padding);
-  margin: 0;
-}
-
-nav:is(.left, .right) {
-  justify-content: flex-start;
-  flex-direction: column;
-  background-color: var(--surface);
-  block-size: 100dvh;
-  min-inline-size: 6rem;
-  padding-block: var(--_top) var(--_bottom);
-}
-
-nav:is(.top, .bottom) {
-  position: sticky;
-  inset: 0;
-  padding: 0.5rem;
-  justify-content: center;
-  flex-direction: row;
-  background-color: var(--surface-container);
-  block-size: auto;
-  min-block-size: 4.5rem;
-}
-
-nav.top {
-  block-size: calc(var(--top, 0) + 4.5rem);
-  padding-block-start: var(--_top);
-}
-
-nav.bottom {
-  block-size: calc(var(--bottom, 0) + 4.5rem);
-  padding-block-end: var(--_bottom);
-}
-
-// ───────────────────────── nav <header> child ──────────────────────────────
-nav > header {
-  min-block-size: auto;
-  padding: 0;
-  margin: 0 0 1rem 0;
-  align-items: flex-start;
-  gap: 1rem;
-  background: none !important;
-
-  > * {
-    margin: 0;
-    transition: none;
-  }
-
-  > .extend:hover {
-    --_padding: 0;
-    inline-size: var(--_size);
-
-    > span:not([class]) {
-      display: none;
-    }
-  }
-}
-
-nav:is(.top, .bottom) > header {
-  flex-direction: row;
-  align-items: center;
-  margin: 0 1rem 0 0;
-}
-
-nav.max > header > * {
-  transition: all var(--speed1);
-}
-
-nav > :is(ol, ul) {
-  all: inherit;
-  min-inline-size: auto;
-  margin: 0;
-  padding: 0;
-  flex: auto;
-}
-
-// ───────────────────────────── nav.max ─────────────────────────────────────
-nav.max:is(.left, .right, .top, .bottom) {
-  gap: 0;
-  inline-size: auto;
-  align-items: flex-start;
-  min-inline-size: 12.75rem;
-  padding: var(--_top) 1.25rem var(--_bottom) 1.25rem;
-}
-
-nav.max > :is(ol, ul) {
-  padding: 0;
-}
-
-nav.max > header {
-  margin: 0 0 1.25rem 0;
-}
-
-nav.max:is(.top, .bottom) > header {
-  margin: 0 1.25rem 0 0;
-}
-
-nav.max > header > .extend {
-  --_padding: 1.5rem;
-  inline-size: auto;
-  padding: 0 var(--_padding);
-
-  > span:not([class]) {
-    display: block;
-    margin-inline-start: var(--_padding);
-  }
-
-  > :is(img, svg) + span {
-    margin-inline-start: calc(1rem + var(--_padding, 0));
-  }
-}
-
-nav.max:is(.top, .bottom) {
-  padding: 0 0.5rem;
-  align-items: center;
-  min-inline-size: auto;
-  max-inline-size: none;
-}
-
-// ─────────────────────────── nav items ─────────────────────────────────────
-#{$-nav-item-direct},
-#{$-nav-item-nested} {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  line-height: normal;
-  inline-size: 3.5rem;
-  font-size: 0.8rem;
-}
-
-nav:not(.max):is(.left, .right, .top, .bottom) > a:not(.button, .chip) > i,
-nav:not(.max):is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class="active"]) > a:not(.button, .chip) > i {
-  padding: 0.25rem 1rem;
-  border-radius: 2rem;
-  margin: 0 auto;
-}
-
-nav.max:is(.left, .right, .top, .bottom) > a:not(.button, .chip),
-nav.max:is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class="active"]) > a:not(.button, .chip) {
-  flex-direction: row;
-  gap: 0.5rem;
-  inline-size: auto;
-  block-size: 3.5rem;
-  padding: 0 1rem;
-  border-radius: 2rem;
-  font-size: inherit;
-}
-
-#{$-nav-item-direct}.active,
-#{$-nav-item-nested}.active {
-  transition: padding var(--speed1) linear;
-}
-
-nav.max:is(.top, .bottom) > a:not(.button, .chip),
-nav.max:is(.top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class="active"]) > a:not(.button, .chip) {
-  gap: 0.25rem;
-  block-size: 2.5rem;
-  font-size: 0.8rem;
-}
-
-nav.max:is(.left, .right, .top, .bottom) > a.active:not(.button, .chip),
-nav.max:is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class="active"]) > a.active:not(.button, .chip),
-nav:is(.left, .right, .top, .bottom):not(.max) > a.active:not(.button, .chip) > i,
-nav:is(.left, .right, .top, .bottom):not(.max) > :is(ol > li, ul > li, div:not([class]), div[class="active"]) > a.active:not(.button, .chip) > i {
-  background-color: var(--secondary-container);
-  color: var(--on-secondary-container);
-}
-
-nav.vertical > :is(ol, ul) {
-  align-items: normal;
-}
-
-// ──────────────────────── alignment helpers ────────────────────────────────
-:is(nav, .row):is(.left-align, .top-align, .vertical) {
-  justify-content: flex-start;
-}
-
-:is(nav, .row):is(.right-align, .bottom-align) {
-  justify-content: flex-end;
-}
-
-:is(nav, .row):is(.center-align, .middle-align) {
-  justify-content: center;
-}
-
-:is(nav, .row):is(.left-align, .top-align, .vertical).vertical {
-  align-items: flex-start;
-}
-
-:is(nav, .row):is(.right-align, .bottom-align).vertical {
-  align-items: flex-end;
-}
-
-:is(nav, .row):is(.center-align, .middle-align).vertical {
-  align-items: center;
-}
-
-// horizontal nav spacers
-$-nav-spacers: (
-  "space":        0.5rem,
-  "medium-space": 1rem,
-  "large-space":  1.5rem,
-);
-
-@each $name, $value in $-nav-spacers {
-  nav:not(.left, .right) > .#{$name} {
-    inline-size: $value;
-  }
-}
-
-// ─────────────────────────── nav.tabbed ────────────────────────────────────
-nav.tabbed {
-  background-color: var(--surface-container);
-  border-radius: 4rem !important;
-  gap: 0rem;
-  block-size: 4rem;
-
-  &.small { block-size: 3rem; }
-  &.large { block-size: 5rem; }
-
-  > a {
-    border-radius: inherit;
-    block-size: inherit;
-    display: inline-flex;
-    align-items: center;
-    padding-inline: 1rem;
-    gap: 0.5rem;
-    font-size: 1rem;
-    flex: 1;
-
-    &.active {
-      background-color: var(--primary-container);
-    }
-  }
-}
-
-// ─────────────────────────── nav.toolbar ───────────────────────────────────
-nav.toolbar {
-  display: inline-flex;
-  justify-content: space-around;
-  border-radius: 2rem;
-  background-color: var(--surface-container);
-  color: var(--on-surface);
-  padding: 0 1rem;
-  gap: 0.5rem;
-  min-block-size: 4rem;
-  min-inline-size: 4rem;
-
-  > a {
-    display: inline-flex;
-    gap: 0.5rem;
-    min-inline-size: 2.5rem;
-    min-block-size: 2.5rem;
-    border-radius: 1.75rem;
-
-    &:has(> :not(i)) {
-      padding: 0 1rem;
-    }
-
-    &.active {
-      background-color: var(--secondary-container);
-      color: var(--on-secondary-container);
-    }
-  }
-
-  &.fill {
-    background-color: var(--primary-container) !important;
-    color: var(--on-primary-container) !important;
-
-    > a.active {
-      background-color: var(--surface-container) !important;
-      color: var(--on-surface) !important;
-    }
-  }
-
-  &.vertical {
-    flex-direction: column !important;
-    min-inline-size: 4rem;
-    padding: 1rem 0;
-    align-self: center;
-    align-items: center !important;
-
-    > a {
-      inline-size: 2.5rem;
-      block-size: 2.5rem;
-
-      > :is(div, span):not(.badge, .tooltip) {
-        display: none;
-      }
-    }
-  }
-
-  &.max {
-    border-radius: 0;
-    display: flex;
-  }
-}
-
-// ─────────────────────────── nav.group ─────────────────────────────────────
-nav.group {
-  background: none !important;
-
-  &:is(.connected, .split) {
-    gap: 0.125rem;
-
-    > :is(.button, button).active {
-      border-radius: 2rem !important;
-    }
-  }
-
-  &:not(.split) > :is(.button, button) {
-    &:not(.border) {
-      background-color: var(--surface-container);
-      color: var(--on-surface-container);
-    }
-
-    &.active {
-      background-color: var(--primary);
-      color: var(--on-primary);
-    }
-  }
-
-  &.connected > :is(.button, button) {
-    &:not(.border) {
-      background-color: var(--surface-container);
-      color: var(--on-surface-container);
-    }
-
-    &.active {
-      background-color: var(--secondary-container);
-      color: var(--on-secondary-container);
-    }
-  }
-
-  &.split > :is(.button, button) {
-    &:active {
-      border-radius: 2rem !important;
-    }
-
-    &:not(.chip, .fill, .border) {
-      background-color: var(--primary);
-      color: var(--on-primary);
-    }
-  }
-}
-
-:not(nav) > :is(ul, ol) {
-  all: revert;
-}
-
-:is(.scroll, .no-scroll, .no-space, .tabs, .tabbed) > :focus-visible {
-  outline: 0.125rem solid var(--primary);
-  outline-offset: -0.125rem;
-}
-
-@media only screen and (max-width: 600px) {
-  nav.top,
-  nav.bottom {
-    justify-content: space-around;
-  }
-}

package/src/styles/elements/_overlays.scss

@@ -1,34 +0,0 @@
-// Modal scrim shared by .overlay and dialog::backdrop.
-
-.overlay,
-dialog::backdrop {
-  display: block !important;
-  opacity: 0;
-  visibility: hidden;
-  position: fixed;
-  inset: 0;
-  color: var(--on-surface);
-  background-color: var(--overlay);
-  z-index: 100;
-  transition: all var(--speed3), 0s background-color;
-  border-radius: 0;
-}
-
-.overlay.active {
-  opacity: 1;
-  visibility: visible;
-}
-
-dialog:popover-open::backdrop {
-  opacity: 1;
-  visibility: visible;
-}
-
-.overlay + dialog::backdrop,
-.snackbar::backdrop {
-  display: none;
-}
-
-[popover] {
-  border: 0;
-}

package/src/styles/elements/_pages.scss

@@ -1,28 +0,0 @@
-// .page transitions for SPA-style routing.
-
-.page {
-  --_transform: translate(0, 0);
-  opacity: 0;
-  position: absolute;
-  display: none;
-
-  &.active {
-    opacity: 1;
-    position: relative;
-    display: inherit;
-    animation: var(--speed4) to-page ease;
-  }
-}
-
-$-page-transforms: (
-  "top":    translate(0, -4rem),
-  "bottom": translate(0, 4rem),
-  "left":   translate(-4rem, 0),
-  "right":  translate(4rem, 0),
-);
-
-@each $name, $transform in $-page-transforms {
-  .page.active.#{$name} {
-    --_transform: #{$transform};
-  }
-}

package/src/styles/elements/_progress.scss

@@ -1,141 +0,0 @@
-// <progress> — linear + circular + wavy variants. .max stacks one inside a row.
-
-progress {
-  --_size: 0.25rem;
-  position: relative;
-  inline-size: 100%;
-  block-size: var(--_size);
-  color: var(--primary);
-  background: var(--image);
-  border-radius: 1rem;
-  flex: none;
-  border: none;
-  overflow: hidden;
-  writing-mode: horizontal-tb;
-  direction: ltr;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-$-progress-sizes: (
-  "small":  0.25rem,
-  "medium": 0.35rem,
-  "large":  0.45rem,
-);
-
-@each $name, $value in $-progress-sizes {
-  progress.#{$name} {
-    --_size: #{$value};
-  }
-}
-
-progress.indeterminate {
-  --_value: 100;
-  animation: 3.2s to-indeterminate-progress ease infinite;
-}
-
-progress:not(.circle, [value])::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  inline-size: 100%;
-  block-size: 100%;
-  clip-path: none;
-  background: currentcolor;
-  animation: 3.2s to-linear-progress ease infinite;
-}
-
-progress:not(.circle, [value])::-moz-progress-bar {
-  animation: 3.2s to-linear-progress ease infinite;
-}
-
-progress:not(.circle, [value])::-webkit-progress-value {
-  animation: 3.2s to-linear-progress ease infinite;
-}
-
-progress::-webkit-progress-bar { background: none; }
-progress::-webkit-progress-value { background: currentColor; }
-progress::-moz-progress-bar { background: currentColor; }
-
-progress.wavy {
-  block-size: calc(var(--_size, 0) * 2);
-  background: none;
-  background-image: var(--image);
-  background-repeat: repeat-x;
-  background-position: 0 50%;
-  background-size: auto calc(var(--_size, 0) / 2);
-
-  &::-webkit-progress-value,
-  &:not(.circle, [value])::after {
-    mask-image: url("./shapes/wavy.svg");
-    mask-position: 0 50%;
-    mask-repeat: repeat-x;
-    mask-size: auto 100%;
-  }
-
-  &::-moz-progress-bar {
-    mask-image: url("./shapes/wavy.svg");
-    mask-position: 0 50%;
-    mask-repeat: repeat-x;
-    mask-size: auto 100%;
-  }
-}
-
-progress.circle {
-  --_value: attr(value type(<number>), 50);
-  inline-size: 2.5rem;
-  block-size: 2.5rem;
-  background: conic-gradient(currentColor calc(var(--_value, 0) * 1%), var(--active) 0%);
-  border-radius: 50%;
-  mask-image: radial-gradient(circle at center, transparent 57%, currentColor 60%);
-
-  &::-webkit-progress-value { background: none; }
-  &::-moz-progress-bar { background: none; }
-
-  &.wavy {
-    background: conic-gradient(currentColor calc(var(--_value, 0) * 1%), var(--active) 0);
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: contain;
-    mask-image: url("./shapes/wavy-circle.svg");
-  }
-
-  &.small { inline-size: 1.5rem; block-size: 1.5rem; }
-  &.large { inline-size: 3.5rem; block-size: 3.5rem; }
-
-  &:not([value]),
-  &.indeterminate {
-    --_value: 50;
-    animation: to-rotate 1s infinite linear;
-  }
-}
-
-:is(nav, .row, .field) > progress:not(.circle, .small, .medium, .large) {
-  flex: auto;
-}
-
-progress.max {
-  display: unset;
-  position: absolute;
-  inline-size: 100% !important;
-  block-size: 100% !important;
-  color: currentColor;
-  background: none;
-  inset: 0;
-  border-radius: inherit;
-  animation: none;
-  writing-mode: horizontal-tb;
-  opacity: 0.33;
-
-  &[class*="-text"] {
-    opacity: 1;
-  }
-
-  + * {
-    margin-block-start: 0;
-  }
-}
-
-:is(.button, button, .chip) > progress.circle {
-  color: inherit;
-}