@stackific/md3 0.1.0

package/src/styles/elements/_navigations.scss

@@ -0,0 +1,450 @@
+// <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

@@ -0,0 +1,34 @@
+// 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

@@ -0,0 +1,28 @@
+// .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

@@ -0,0 +1,141 @@
+// <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;
+}