@stackific/md3 0.1.0

package/src/styles/elements/_sliders.scss

@@ -0,0 +1,336 @@
+// .slider — range input with single + dual thumb modes, vertical orientation,
+// and a .max "container slider" variant.
+
+.slider {
+  --_start: 0%;
+  --_end: 0%;
+  --_value1: "";
+  --_value2: "";
+  --_track: 1rem;
+  --_thumb: max(2.5rem, calc(var(--_track, 0) + 0.5rem));
+  display: flex;
+  align-items: center !important;
+  inline-size: auto;
+  block-size: var(--_thumb);
+  flex: none;
+  direction: ltr;
+  margin: 0 1.25rem;
+  color: var(--primary);
+
+  &.vertical {
+    flex-direction: row !important;
+    margin: 0.5rem auto !important;
+    padding: 50% 0;
+    transform: rotate(-90deg);
+    inline-size: 100%;
+  }
+}
+
+[dir="rtl"] .slider {
+  transform: scaleX(-1);
+}
+
+$-slider-tracks: (
+  "tiny":   1rem,
+  "small":  1.5rem,
+  "medium": 2.5rem,
+  "large":  3.5rem,
+  "extra":  6rem,
+);
+
+@each $name, $value in $-slider-tracks {
+  .slider.#{$name} { --_track: #{$value}; }
+}
+
+// inputs
+.slider > input {
+  appearance: none;
+  box-shadow: none;
+  border: none;
+  outline: none;
+  pointer-events: none;
+  inline-size: 100%;
+  block-size: var(--_track);
+  background: none;
+  z-index: 1;
+  padding: 0;
+  margin: 0;
+  transform: rotate(0deg);
+  touch-action: none;
+
+  &:only-of-type {
+    pointer-events: all;
+  }
+
+  & ~ input {
+    position: absolute;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 1;
+  }
+
+  &:disabled ~ span:not([class]) {
+    background: var(--outline);
+  }
+}
+
+// Thumb styling — WebKit / Firefox have separate pseudo-elements so the rules
+// can't be merged; we share the body via a mixin.
+@mixin -slider-thumb {
+  appearance: none;
+  box-shadow: none;
+  border: none;
+  outline: none;
+  pointer-events: all;
+  block-size: var(--_thumb);
+  inline-size: 0.25rem;
+  border-radius: 0.25rem;
+  background: currentColor;
+  cursor: grab;
+  margin: 0;
+  z-index: 1;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.slider > input::-webkit-slider-thumb { @include -slider-thumb; }
+.slider > input::-moz-range-thumb {
+  @include -slider-thumb;
+  block-size: 2.75rem;
+  background: var(--primary);
+}
+
+.slider > input:not(:disabled):is(:focus)::-webkit-slider-thumb,
+.slider > input:not(:disabled):is(:focus)::-moz-range-thumb {
+  transform: scaleX(0.6);
+}
+
+.slider > input:disabled::-webkit-slider-thumb,
+.slider > input:disabled::-moz-range-thumb {
+  background: var(--outline);
+  cursor: not-allowed;
+}
+
+// active track
+.slider > span:not([class]) {
+  position: absolute;
+  block-size: var(--_track);
+  border-radius: 1rem 0 0 1rem;
+  background: currentColor;
+  color: currentColor;
+  z-index: 0;
+  inset: calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + 0.5rem) auto var(--_start);
+}
+
+.slider > input[type="range"] + input[type="range"] ~ span:not([class]) {
+  border-radius: 0;
+  inset: calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + 0.5rem) auto calc(var(--_start) + 0.5rem);
+}
+
+.field > .slider {
+  inline-size: 100%;
+}
+
+.slider::before {
+  content: "";
+  position: absolute;
+  inline-size: 100%;
+  block-size: var(--_track);
+  border-radius: 1rem;
+  background: var(--active);
+  clip-path: polygon(
+    calc(var(--_start, 0) - 0.5rem) 0,
+    0 0, 0 100%,
+    calc(var(--_start, 0) - 0.5rem) 100%,
+    calc(var(--_start, 0) - 0.5rem) 0,
+    calc(100% - var(--_end, 0) + 0.5rem) 0,
+    100% 0, 100% 100%,
+    calc(100% - var(--_end, 0) + 0.5rem) 100%,
+    calc(100% - var(--_end, 0) + 0.5rem) 0
+  );
+}
+
+.slider:has(> [disabled])::before {
+  background: var(--active);
+}
+
+.slider:has([disabled]) {
+  opacity: 0.62;
+}
+
+.slider > span > i {
+  position: absolute;
+  block-size: auto;
+  inset: 0 auto 0 0.5rem;
+  color: var(--inverse-primary);
+  z-index: 1;
+}
+
+.slider:not(.medium, .large, .extra) > span > i {
+  display: none;
+}
+
+.slider.vertical > i {
+  transform: rotate(90deg);
+}
+
+// tooltips
+.slider > .tooltip {
+  visibility: hidden !important;
+  opacity: 0 !important;
+  inset: 0 auto auto calc(100% - var(--_end, 0));
+  border-radius: 2rem;
+  transition: top var(--speed2) ease, opacity var(--speed2) ease;
+  transform: translate(-50%, -25%) !important;
+  padding: 0.75rem 1rem;
+
+  &.bottom {
+    inset: auto auto 0 calc(100% - var(--_end, 0));
+    transition: bottom var(--speed2) ease, opacity var(--speed2) ease;
+    transform: translate(-50%, 25%) !important;
+  }
+
+  &::before {
+    content: var(--_value1);
+  }
+}
+
+[dir="rtl"] .slider > .tooltip {
+  transform: translate(-50%, -25%) scaleX(-1) !important;
+}
+
+[dir="rtl"] .slider > .tooltip.bottom {
+  transform: translate(-50%, 25%) scaleX(-1) !important;
+}
+
+.slider > .tooltip + .tooltip {
+  inset: 0.25rem calc(100% - var(--_start, 0)) auto auto;
+  transform: translate(50%, -25%) !important;
+
+  &.bottom {
+    inset: auto calc(100% - var(--_start, 0)) -0.25rem auto;
+    transform: translate(50%, 25%) !important;
+  }
+
+  &::before {
+    content: var(--_value2);
+  }
+}
+
+[dir="rtl"] .slider > .tooltip + .tooltip {
+  transform: translate(50%, -25%) scaleX(-1) !important;
+}
+
+[dir="rtl"] .slider > .tooltip + .tooltip.bottom {
+  transform: translate(50%, 25%) scaleX(-1) !important;
+}
+
+.slider > :focus ~ .tooltip {
+  inset-block: -1rem auto;
+  opacity: 1 !important;
+  visibility: visible !important;
+
+  &.bottom {
+    inset-block: auto -1rem;
+  }
+}
+
+.slider.vertical > .tooltip {
+  inset-block: auto;
+  block-size: 2.5rem;
+  inline-size: 2.5rem;
+  margin-block: calc(-1 * var(--_thumb, 0)) 0 !important;
+  transform: rotate(90deg) translate(-75%, 50%) !important;
+
+  &.bottom {
+    inset-block: auto;
+    margin-block: 0 calc(-1 * var(--_thumb, 0)) !important;
+    transform: rotate(90deg) translate(75%, 50%) !important;
+  }
+}
+
+.slider.vertical > .tooltip + .tooltip {
+  transform: rotate(90deg) translate(-75%, -50%) !important;
+
+  &.bottom {
+    transform: rotate(90deg) translate(75%, -50%) !important;
+  }
+}
+
+:is(nav, .row, .field) > .slider:not(.circle, .small, .medium, .large) {
+  flex: auto;
+}
+
+// .slider.max — container-filling variant
+.slider.max,
+.slider.max.vertical,
+.slider.max > input,
+.slider.max.vertical > input {
+  all: unset;
+  margin: 0 !important;
+  position: absolute;
+  color: var(--primary);
+  inset: 0;
+  border-radius: inherit;
+  overflow: hidden;
+  z-index: 2;
+  cursor: grab;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.slider.max::before {
+  display: none;
+}
+
+.slider.max.vertical > input {
+  writing-mode: vertical-lr;
+  transform: rotate(-180deg);
+}
+
+.slider.max > input::-webkit-slider-thumb,
+.slider.max > input::-moz-range-thumb {
+  opacity: 0;
+  inline-size: 1rem;
+  block-size: 100vh;
+  transform: none !important;
+}
+
+.slider.max > span:not([class]) {
+  block-size: auto !important;
+  inset: 0 var(--_end) 0 var(--_start);
+  background: currentcolor;
+  color: inherit;
+  border-radius: 0;
+}
+
+.slider.max.vertical > span:not([class]) {
+  inset: var(--_end) 0 var(--_start) 0;
+}
+
+.slider > input:focus-visible::-webkit-slider-thumb,
+.slider > input:focus-visible::-moz-range-thumb {
+  outline: 0.1875rem solid var(--primary);
+  outline-offset: 0.25rem;
+}
+
+.slider.max > input:focus-visible {
+  outline: 0.1875rem solid var(--primary);
+  outline-offset: -0.125rem;
+}
+
+@media (pointer: coarse) {
+  .slider > :hover ~ .tooltip {
+    inset-block: -1rem auto !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+  }
+
+  .slider > :hover ~ .tooltip.bottom {
+    inset-block: auto -1rem !important;
+  }
+}

package/src/styles/elements/_snackbars.scss

@@ -0,0 +1,44 @@
+// .snackbar — bottom-aligned transient banner. .top relocates above.
+
+.snackbar {
+  position: fixed;
+  inset: auto auto 6rem 50%;
+  inline-size: 80%;
+  block-size: auto;
+  z-index: 200;
+  visibility: hidden;
+  display: flex;
+  box-shadow: var(--elevate2);
+  color: var(--inverse-on-surface);
+  background-color: var(--inverse-surface);
+  padding: 1rem;
+  cursor: pointer;
+  text-align: start;
+  align-items: center;
+  border-radius: 0.25rem;
+  gap: 0.5rem;
+  transition: all var(--speed2);
+  transform: translate(-50%, 1rem);
+  opacity: 0;
+
+  &.top {
+    inset: 6rem auto auto 50%;
+  }
+
+  &.active,
+  &:popover-open {
+    visibility: visible;
+    transform: translate(-50%, 0);
+    opacity: 1;
+  }
+
+  > .max {
+    flex: auto;
+  }
+}
+
+@media only screen and (min-width: 993px) {
+  .snackbar {
+    inline-size: 40%;
+  }
+}

package/src/styles/elements/_tables.scss

@@ -0,0 +1,67 @@
+// table baseline + .border / .stripes / spacing modifiers.
+
+table {
+  inline-size: 100%;
+  border-spacing: 0;
+  font-size: 0.875rem;
+  text-align: start;
+
+  &.border > tbody > tr:not(:last-child) > td {
+    border-block-end: 0.0625rem solid var(--outline);
+  }
+
+  &.stripes > tbody > tr:nth-child(odd) {
+    background-color: var(--active);
+  }
+
+  &.no-space :is(th, td)     { padding: 0; }
+  &.medium-space :is(th, td) { padding: 0.75rem; }
+  &.large-space :is(th, td)  { padding: 1rem; }
+
+  > .fixed {
+    position: sticky;
+    z-index: 1;
+    inset-block-start: 0;
+  }
+}
+
+.scroll > table,
+table :is(thead, tbody, tfoot, tr, th, td) {
+  background-color: inherit;
+  color: inherit;
+}
+
+:is(th, td) {
+  inline-size: auto;
+  text-align: inherit;
+  padding: 0.5rem;
+  border-radius: 0;
+
+  > * {
+    vertical-align: middle;
+  }
+}
+
+thead > tr > th {
+  border-block-end: 0.0625rem solid var(--outline);
+}
+
+tfoot > tr > th {
+  border-block-start: 0.0625rem solid var(--outline);
+}
+
+th.fixed {
+  position: sticky;
+  z-index: 1;
+  inset-block-start: 0;
+}
+
+tfoot.fixed,
+tfoot th.fixed {
+  inset-block-end: 0;
+}
+
+:is(td, th).min {
+  inline-size: 0.1%;
+  white-space: nowrap;
+}

package/src/styles/elements/_tabs.scss

@@ -0,0 +1,49 @@
+// .tabs container with active-state underline.
+
+.tabs {
+  display: flex;
+  white-space: nowrap;
+  border-block-end: 0.0625rem solid var(--surface-variant);
+  border-radius: 0;
+
+  &:not(.left-align, .right-align, .center-align) {
+    justify-content: space-around;
+  }
+
+  > a {
+    display: flex;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--on-surface-variant);
+    padding: 0.5rem 1rem;
+    text-align: center;
+    min-block-size: 3rem;
+    inline-size: 100%;
+    gap: 0.25rem;
+
+    &.active,
+    &.active > i {
+      color: var(--primary);
+    }
+
+    &.active::before {
+      content: "";
+      position: absolute;
+      inset: auto 0 0 0;
+      block-size: 0.125rem;
+      background-color: var(--primary);
+    }
+  }
+
+  &.small > a { min-block-size: 2rem; }
+  &.large > a { min-block-size: 4rem; }
+
+  &.min > a.active::before {
+    margin: 0 auto;
+    max-inline-size: min(100%, 4rem);
+  }
+
+  &:is(.left-align, .center-align, .right-align) > a {
+    inline-size: auto;
+  }
+}

package/src/styles/elements/_tooltips.scss

@@ -0,0 +1,125 @@
+// .tooltip — hover/focus popup. Defaults above; .left/.right/.bottom reposition.
+
+.tooltip {
+  --_space: -0.5rem;
+  visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  background-color: var(--inverse-surface);
+  color: var(--inverse-on-surface);
+  font-size: 0.75rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  position: absolute;
+  z-index: 200;
+  inset: 0 auto auto 50%;
+  inline-size: auto;
+  white-space: nowrap;
+  font-weight: 500;
+  opacity: 0;
+  transition: all var(--speed2);
+  line-height: normal;
+  transform: translate(-50%, -100%) scale(0.9);
+
+  &:not(.max):hover {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &.left {
+    inset: 50% auto auto 0;
+    transform: translate(-100%, -50%) scale(0.9);
+  }
+
+  &.right {
+    inset: 50% 0 auto auto;
+    transform: translate(100%, -50%) scale(0.9);
+  }
+
+  &.bottom {
+    inset: auto auto 0 50%;
+    transform: translate(-50%, 100%) scale(0.9);
+  }
+}
+
+$-tooltip-sizes: (
+  "small":  8rem,
+  "medium": 12rem,
+  "large":  16rem,
+);
+
+@each $name, $value in $-tooltip-sizes {
+  .tooltip.#{$name} {
+    inline-size: $value;
+    white-space: normal;
+  }
+}
+
+:hover > .tooltip {
+  visibility: visible;
+  opacity: 1;
+  transform: translate(-50%, -100%) scale(1);
+}
+
+:hover > .tooltip.left   { transform: translate(-100%, -50%) scale(1); }
+:hover > .tooltip.right  { transform: translate(100%, -50%) scale(1); }
+:hover > .tooltip.bottom { transform: translate(-50%, 100%) scale(1); }
+
+$-tooltip-spacing: (
+  "no":     0,
+  "medium": -1rem,
+  "large":  -1.5rem,
+);
+
+@each $name, $value in $-tooltip-spacing {
+  .tooltip.#{$name}-space {
+    --_space: #{$value};
+  }
+}
+
+.tooltip:not(.left, .right, .bottom) {
+  margin-block-start: var(--_space) !important;
+}
+
+.tooltip.left,
+.tooltip.right {
+  margin-inline: var(--_space) !important;
+}
+
+.tooltip.bottom {
+  margin-block-end: var(--_space) !important;
+}
+
+menu:active ~ .tooltip,
+:is(button, .button):focus > menu ~ .tooltip,
+.field > :focus ~ menu ~ .tooltip {
+  visibility: hidden;
+}
+
+.slider {
+  > .tooltip {
+    --_space: -1.25rem;
+  }
+
+  &.vertical > .tooltip {
+    --_space: -0.75rem;
+
+    &:is(.left, .right) {
+      --_space: -0.5rem;
+    }
+  }
+}
+
+.tooltip.max {
+  display: block;
+  font-size: inherit;
+  white-space: normal;
+  text-align: start;
+  inline-size: 20rem;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  box-shadow: var(--elevate2);
+}

package/src/styles/helpers/_alignments.scss

@@ -0,0 +1,29 @@
+// Flex / text alignment utilities.
+
+@use "sass:map";
+
+$-alignments: (
+  "middle": center,
+  "bottom": flex-end,
+  "top": flex-start,
+);
+
+@each $name, $value in $-alignments {
+  .#{$name}-align {
+    display: flex;
+    align-items: $value !important;
+  }
+}
+
+$-justifications: (
+  "left": (text: start, justify: flex-start),
+  "right": (text: end, justify: flex-end),
+  "center": (text: center, justify: center),
+);
+
+@each $name, $values in $-justifications {
+  .#{$name}-align {
+    text-align: map.get($values, text);
+    justify-content: map.get($values, justify) !important;
+  }
+}

package/src/styles/helpers/_blurs.scss

@@ -0,0 +1,26 @@
+// Backdrop-blur surfaces with three sizes.
+
+[class*="blur"],
+[class*="blur"].light {
+  --_blur: 1rem;
+  -webkit-backdrop-filter: blur(var(--_blur));
+  backdrop-filter: blur(var(--_blur));
+  color: var(--on-surface);
+  background-color: rgb(255 255 255 / 0.5) !important;
+}
+
+.dark [class*="blur"],
+[class*="blur"].dark {
+  background-color: rgb(0 0 0 / 0.5) !important;
+}
+
+$-blur-sizes: (
+  "small": 0.5rem,
+  "large": 1.5rem,
+);
+
+@each $name, $value in $-blur-sizes {
+  .#{$name}-blur {
+    --_blur: #{$value};
+  }
+}

package/src/styles/helpers/_colors.scss

@@ -0,0 +1,39 @@
+// Material Design 2 palette utilities, generated from the $material-palette map.
+// Each palette entry yields:
+//   .name             → bg = shade-6 (the base), color !important
+//   .name6            → same as .name (alias for the base shade)
+//   .name-text        → text color
+//   .name-border      → border color
+//   .name1 ... .name10 → bg only, per tonal shade
+//
+// One Sass loop generates the full palette.
+
+@use "sass:list";
+@use "sass:map";
+@use "../config" as *;
+
+@each $name, $shades in $material-palette {
+  $base: list.nth($shades, 1);
+
+  .#{$name},
+  .#{$name}6 {
+    background-color: $base !important;
+  }
+
+  .#{$name}-border {
+    border-color: $base !important;
+  }
+
+  .#{$name}-text {
+    color: $base !important;
+  }
+
+  // Shades 1-10 from positions 2-11 in the shade list (skipping the duplicate base).
+  @for $i from 1 through 10 {
+    @if $i != 6 {
+      .#{$name}#{$i} {
+        background-color: list.nth($shades, $i + 1) !important;
+      }
+    }
+  }
+}