@stackific/md3 0.1.0

package/src/styles/helpers/_directions.scss

@@ -0,0 +1,30 @@
+// Horizontal / vertical flow helpers.
+
+.horizontal {
+  display: inline-flex;
+  flex-direction: row !important;
+  gap: 1rem;
+  inline-size: auto !important;
+  max-inline-size: none !important;
+
+  > * {
+    margin-block: 0 !important;
+  }
+}
+
+.vertical {
+  display: flex;
+  flex-direction: column !important;
+
+  > * {
+    margin-inline: 0 !important;
+  }
+}
+
+:is(a, button, .button, .chip).vertical {
+  display: inline-flex;
+  gap: 0.25rem;
+  block-size: auto !important;
+  max-block-size: none !important;
+  padding-block: 0.5rem;
+}

package/src/styles/helpers/_elevates.scss

@@ -0,0 +1,20 @@
+// Box-shadow elevation tiers driven by global --elevateN tokens.
+
+.no-elevate {
+  box-shadow: none !important;
+}
+
+$-elevations: (
+  "small": var(--elevate1),
+  "": var(--elevate1),
+  "medium": var(--elevate2),
+  "large": var(--elevate3),
+);
+
+@each $name, $value in $-elevations {
+  @if $name == "" {
+    .elevate { box-shadow: $value !important; }
+  } @else {
+    .#{$name}-elevate { box-shadow: $value !important; }
+  }
+}

package/src/styles/helpers/_forms.scss

@@ -0,0 +1,76 @@
+// Border-radius variants + .border / .circle / .square shape helpers.
+
+@use "sass:list";
+
+.round,
+[class*="-round"] {
+  --_round: 2rem;
+  border-radius: var(--_round) !important;
+}
+
+$-round-sizes: (
+  "small": 0.5rem,
+  "large": 3.5rem,
+);
+
+@each $name, $value in $-round-sizes {
+  .#{$name}-round {
+    --_round: #{$value};
+  }
+}
+
+.no-round,
+.square,
+.top-round,
+.bottom-round,
+.left-round,
+.right-round {
+  border-radius: 0.5rem !important;
+}
+
+$-sides: (
+  "top": (start-start, start-end),
+  "bottom": (end-end, end-start),
+  "left": (start-start, end-start),
+  "right": (start-end, end-end),
+);
+
+@each $side, $corners in $-sides {
+  .#{$side}-round {
+    border-#{list.nth($corners, 1)}-radius: var(--_round) !important;
+    border-#{list.nth($corners, 2)}-radius: var(--_round) !important;
+  }
+}
+
+.circle {
+  border-radius: 50%;
+}
+
+.circle:is(button, .button, .chip) {
+  border-radius: var(--_size);
+}
+
+:is(.circle, .square):is(button, .button, .chip) {
+  padding: 0;
+  block-size: var(--_size);
+  inline-size: var(--_size);
+}
+
+:is(.circle, .square) > span:not([class]) {
+  display: none;
+}
+
+:is(.circle, .square).round {
+  border-radius: 1rem !important;
+}
+
+.border:not(table, .field, .list, menu, article) {
+  box-sizing: border-box;
+  border: 0.0625rem solid var(--outline);
+  background-color: transparent;
+  box-shadow: none;
+}
+
+.no-border {
+  border-color: transparent !important;
+}

package/src/styles/helpers/_margins.scss

@@ -0,0 +1,39 @@
+// Margin scale + directional variants.
+// .margin / .tiny-margin / .small-margin / .large-margin / .no-margin / .auto-margin
+// and .left-/.right-/.top-/.bottom-/.horizontal-/.vertical-margin
+
+@use "sass:list";
+@use "../config" as *;
+
+.margin,
+[class*="-margin"]:not(.left-margin, .right-margin, .top-margin, .bottom-margin, .horizontal-margin, .vertical-margin) {
+  margin: var(--_margin) !important;
+}
+
+.margin,
+[class*="-margin"] {
+  --_margin: 1rem;
+}
+
+.no-margin { --_margin: 0; }
+.auto-margin { --_margin: auto; }
+.tiny-margin { --_margin: 0.25rem; }
+.small-margin { --_margin: 0.5rem; }
+.large-margin { --_margin: 1.5rem; }
+
+$-margin-sides: (
+  ("left", "horizontal"):  margin-inline-start,
+  ("right", "horizontal"): margin-inline-end,
+  ("top", "vertical"):     margin-block-start,
+  ("bottom", "vertical"):  margin-block-end,
+);
+
+@each $names, $prop in $-margin-sides {
+  $a: list.nth($names, 1);
+  $b: list.nth($names, 2);
+
+  .#{$a}-margin,
+  .#{$b}-margin {
+    #{$prop}: var(--_margin) !important;
+  }
+}

package/src/styles/helpers/_opacities.scss

@@ -0,0 +1,18 @@
+// Opacity utilities.
+
+$-opacities: (
+  "no": 0,
+  "small": 0.25,
+  "medium": 0.5,
+  "large": 0.75,
+);
+
+@each $name, $value in $-opacities {
+  .#{$name}-opacity {
+    opacity: $value !important;
+  }
+}
+
+.opacity {
+  opacity: 1 !important;
+}

package/src/styles/helpers/_paddings.scss

@@ -0,0 +1,35 @@
+// Padding scale + directional variants. Mirrors _margins.scss.
+
+@use "sass:list";
+
+.padding,
+[class*="-padding"]:not(.left-padding, .right-padding, .top-padding, .bottom-padding, .horizontal-padding, .vertical-padding) {
+  padding: var(--_padding) !important;
+}
+
+.padding,
+[class*="-padding"] {
+  --_padding: 1rem;
+}
+
+.no-padding { --_padding: 0 !important; }
+.tiny-padding { --_padding: 0.25rem !important; }
+.small-padding { --_padding: 0.5rem !important; }
+.large-padding { --_padding: 1.5rem !important; }
+
+$-padding-sides: (
+  ("left", "horizontal"):  padding-inline-start,
+  ("right", "horizontal"): padding-inline-end,
+  ("top", "vertical"):     padding-block-start,
+  ("bottom", "vertical"):  padding-block-end,
+);
+
+@each $names, $prop in $-padding-sides {
+  $a: list.nth($names, 1);
+  $b: list.nth($names, 2);
+
+  .#{$a}-padding,
+  .#{$b}-padding {
+    #{$prop}: var(--_padding) !important;
+  }
+}

package/src/styles/helpers/_positions.scss

@@ -0,0 +1,44 @@
+// z-index, edge-pin, and center helpers (logical-property based).
+
+.front {
+  z-index: 10 !important;
+}
+
+.back {
+  z-index: -10 !important;
+}
+
+$-edges: (
+  "left": inset-inline-start,
+  "right": inset-inline-end,
+  "top": inset-block-start,
+  "bottom": inset-block-end,
+);
+
+@each $name, $prop in $-edges {
+  .#{$name} {
+    #{$prop}: 0;
+  }
+}
+
+.center {
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+}
+
+[dir="rtl"] .center {
+  transform: translateX(50%);
+}
+
+.middle {
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}
+
+.middle.center {
+  transform: translate(-50%, -50%);
+}
+
+[dir="rtl"] .middle.center {
+  transform: translate(50%, -50%);
+}

package/src/styles/helpers/_responsive.scss

@@ -0,0 +1,24 @@
+// Per-breakpoint show/hide and -webkit-fill-available shim.
+
+.responsive {
+  inline-size: -webkit-fill-available;
+  inline-size: -moz-available;
+}
+
+@media only screen and (max-width: 600px) {
+  :is(.m, .l):not(.s) {
+    display: none !important;
+  }
+}
+
+@media only screen and (min-width: 601px) and (max-width: 992px) {
+  :is(.s, .l):not(.m) {
+    display: none !important;
+  }
+}
+
+@media only screen and (min-width: 993px) {
+  :is(.m, .s):not(.l) {
+    display: none !important;
+  }
+}

package/src/styles/helpers/_ripples.scss

@@ -0,0 +1,40 @@
+// Pointer-driven ripple overlay + JS-driven expanding circle.
+
+[class*="ripple"]:is(:hover, :focus-visible)::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: currentColor;
+  opacity: 0.1;
+  border-radius: inherit;
+}
+
+$-ripple-speeds: (
+  "": 600ms,
+  "fast": 200ms,
+  "slow": 1800ms,
+);
+
+@each $name, $value in $-ripple-speeds {
+  @if $name == "" {
+    .ripple { --_duration: #{$value}; }
+  } @else {
+    .#{$name}-ripple { --_duration: #{$value}; }
+  }
+}
+
+.ripple-js {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+
+  > div {
+    position: absolute;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0.3;
+    transform: scale(0);
+    animation: to-ripple var(--_duration) linear;
+  }
+}

package/src/styles/helpers/_scrolls.scss

@@ -0,0 +1,7 @@
+.scroll {
+  overflow: auto;
+}
+
+.no-scroll {
+  overflow: hidden;
+}

package/src/styles/helpers/_shadows.scss

@@ -0,0 +1,22 @@
+// Inset / directional gradient shadows.
+
+.shadow {
+  background-color: #00000050;
+}
+
+:is(.left-shadow, .right-shadow, .top-shadow, .bottom-shadow) {
+  background-color: transparent !important;
+}
+
+$-shadow-directions: (
+  "left": to right,
+  "right": to left,
+  "bottom": to top,
+  "top": to bottom,
+);
+
+@each $name, $direction in $-shadow-directions {
+  .#{$name}-shadow {
+    background-image: linear-gradient(#{$direction}, black, transparent) !important;
+  }
+}

package/src/styles/helpers/_sizes.scss

@@ -0,0 +1,34 @@
+// Width / height scale + wrap behavior.
+
+[class*="-width"] {
+  max-inline-size: 100%;
+}
+
+.auto-width { inline-size: auto; }
+.auto-height { block-size: auto; }
+
+$-size-scale: (
+  "small": 12rem,
+  "medium": 24rem,
+  "large": 36rem,
+);
+
+@each $name, $value in $-size-scale {
+  .#{$name}-width {
+    inline-size: $value !important;
+  }
+
+  .#{$name}-height {
+    block-size: $value !important;
+  }
+}
+
+.wrap {
+  display: block;
+  white-space: normal;
+}
+
+.no-wrap:not(menu) {
+  display: flex;
+  white-space: nowrap;
+}

package/src/styles/helpers/_spaces.scss

@@ -0,0 +1,22 @@
+// Vertical spacer blocks. Excludes a tight list of tags where height would clobber layout.
+
+$-not: ":not(nav, .row, .grid, table, .tooltip, .list, menu, .shape)";
+
+$-spaces: (
+  "tiny": 0.5rem,
+  "small": 1rem,
+  "medium": 2rem,
+  "large": 3rem,
+  "extra": 4rem,
+);
+
+@each $name, $value in $-spaces {
+  .#{$name}-space#{$-not} {
+    block-size: $value;
+  }
+}
+
+// .space defaults to small (1rem)
+:is(.space, .small-space)#{$-not} {
+  block-size: 1rem;
+}

package/src/styles/helpers/_typography.scss

@@ -0,0 +1,132 @@
+// Headings (h1-h6), sizing modifiers, text-transform, line-height, code/pre/blockquote.
+
+@use "sass:list";
+@use "sass:map";
+
+$-headings: (h1, h2, h3, h4, h5, h6);
+$-class-headings: (".h1", ".h2", ".h3", ".h4", ".h5", ".h6");
+
+#{list.join($-headings, $-class-headings, $separator: comma)} {
+  font-weight: 400;
+  display: block;
+  align-items: center;
+  line-height: normal;
+}
+
+// Default sizes per heading level (h1 → 3.5625rem … h6 → 1.5rem).
+$-heading-sizes: (
+  "default": (3.5625rem, 2.8125rem, 2.25rem, 2rem, 1.75rem, 1.5rem),
+  "small":   (3.0625rem, 2.3125rem, 1.75rem, 1.5rem, 1.25rem, 1rem),
+  "large":   (4.0625rem, 3.3125rem, 2.75rem, 2.5rem, 2.25rem, 2rem),
+);
+
+@for $i from 1 through 6 {
+  $tag: list.nth($-headings, $i);
+  $cls: list.nth($-class-headings, $i);
+
+  #{$tag},
+  #{$cls} {
+    font-size: list.nth(map.get($-heading-sizes, "default"), $i);
+  }
+
+  :is(#{$tag}, #{$cls}).small {
+    font-size: list.nth(map.get($-heading-sizes, "small"), $i);
+  }
+
+  :is(#{$tag}, #{$cls}).large {
+    font-size: list.nth(map.get($-heading-sizes, "large"), $i);
+  }
+}
+
+.link {
+  color: var(--primary) !important;
+}
+
+.inverse-link {
+  color: var(--inverse-primary) !important;
+}
+
+.truncate {
+  overflow: hidden;
+  white-space: nowrap !important;
+  text-overflow: ellipsis;
+  flex: inherit;
+
+  > * {
+    white-space: nowrap !important;
+  }
+}
+
+$-text-sizes: (
+  "small": 0.75rem,
+  "medium": 0.875rem,
+  "large": 1rem,
+);
+
+@each $name, $value in $-text-sizes {
+  .#{$name}-text { font-size: $value; }
+}
+
+.upper { text-transform: uppercase; }
+.lower { text-transform: lowercase; }
+.capitalize { text-transform: capitalize; }
+.bold { font-weight: bold; }
+.overline { text-decoration: line-through; }
+.underline { text-decoration: underline; }
+.italic { font-style: italic; }
+
+p { margin: 0.5rem 0; }
+
+.no-line { line-height: normal; }
+
+$-line-heights: (
+  "tiny": 1.25rem,
+  "small": 1.5rem,
+  "medium": 1.75rem,
+  "large": 2rem,
+  "extra": 2.25rem,
+);
+
+@each $name, $value in $-line-heights {
+  .#{$name}-line { line-height: $value; }
+}
+
+pre {
+  border-radius: 0;
+  background-color: var(--surface-container);
+  white-space: pre-wrap;
+  padding: 1rem;
+  border-inline-start: 0.25rem solid var(--primary);
+  font-family: inherit;
+}
+
+blockquote {
+  border-radius: 0;
+  padding: 1rem;
+  border-inline-start: 0.25rem solid var(--primary);
+  font-family: inherit;
+}
+
+code {
+  border-radius: 0;
+  background-color: var(--surface-container);
+  white-space: pre-wrap;
+  padding: 0.25rem;
+}
+
+pre > code,
+blockquote > code {
+  padding: 0;
+}
+
+.scroll > code {
+  white-space: pre;
+}
+
+pre:has(> code) {
+  direction: ltr;
+  text-align: start;
+}
+
+sub { vertical-align: sub; }
+sup { vertical-align: super; }

package/src/styles/helpers/_waves.scss

@@ -0,0 +1,52 @@
+// Material radial-gradient wave overlay used on buttons / chips / nav items.
+// The selector lists are large by necessity (one shape, three states).
+
+$-wave-base: ":is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a):not([class*='ripple'])";
+$-nav-max-direct: "nav:is(.left, .right, .bottom, .top).max > a";
+$-nav-max-nested: "nav:is(.left, .right, .bottom, .top).max > :is(ol > li, ul > li, div:not([class]), div[class='active']) > a";
+$-nav-min-direct: "nav:is(.left, .right, .bottom, .top):not(.max) > a";
+$-nav-min-nested: "nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol > li, ul > li, div:not([class]), div[class='active']) a";
+
+#{$-wave-base}::after,
+#{$-nav-max-direct}::after,
+#{$-nav-max-nested}::after,
+#{$-nav-min-direct} > i::after,
+#{$-nav-min-nested} > i::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  inline-size: 100%;
+  block-size: 100%;
+  background-position: center;
+  background-image: radial-gradient(circle, currentColor 1%, transparent 1%);
+  opacity: 0;
+  transition: none;
+  pointer-events: none;
+}
+
+#{$-wave-base}:is(:focus-visible, :hover)::after,
+#{$-nav-max-direct}:not(.button, .chip):is(:focus-visible, :hover)::after,
+#{$-nav-max-nested}:not(.button, .chip):is(:focus-visible, :hover)::after,
+#{$-nav-min-direct}:not(.button, .chip):is(:focus-visible, :hover) > i::after,
+nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol > li, ul > li, div:not([class]), div[class="active"]) > a:not(.button, .chip):is(:focus-visible, :hover) > i::after {
+  background-size: 22500%;
+  opacity: 0.1;
+  transition: background-size var(--speed2) linear;
+}
+
+:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a, nav.max > a):not([class*="ripple"]):active::after,
+#{$-nav-max-direct}:active::after,
+#{$-nav-max-nested}:active::after,
+#{$-nav-min-direct}:active > i::after,
+nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol > li, ul > li, div:not([class]), div[class="active"]) > a:active > i::after {
+  background-size: 0%;
+  opacity: 0;
+  transition: none;
+}
+
+.no-wave::after,
+.no-wave:is(:hover, :active)::after {
+  display: none;
+}

package/src/styles/helpers/_zoom.scss

@@ -0,0 +1,18 @@
+// CSS `zoom` scaling. Reuses spacing scale naming.
+
+$-zoom-scale: (
+  "": 2,
+  "tiny": 2,
+  "small": 3,
+  "medium": 4,
+  "large": 5,
+  "extra": 6,
+);
+
+@each $name, $value in $-zoom-scale {
+  @if $name == "" {
+    .zoom { zoom: $value; }
+  } @else {
+    .#{$name}-zoom { zoom: $value; }
+  }
+}

package/src/styles/md3.scss

@@ -0,0 +1,61 @@
+// Single entry point. Order: settings → reset → helpers → elements →
+// theme overlays → colors.
+//
+// Use @forward for any consumer that wants to re-export; @use is sufficient
+// for the bundle since side-effect rules are emitted once per file.
+
+@use "settings/globals";
+@use "settings/themes";
+@use "settings/fonts";
+
+@use "settings/reset";
+
+@use "helpers/alignments";
+@use "helpers/blurs";
+@use "helpers/directions";
+@use "helpers/elevates";
+@use "helpers/forms";
+@use "helpers/margins";
+@use "helpers/opacities";
+@use "helpers/paddings";
+@use "helpers/positions";
+@use "helpers/ripples";
+@use "helpers/scrolls";
+@use "helpers/shadows";
+@use "helpers/sizes";
+@use "helpers/spaces";
+@use "helpers/responsive";
+@use "helpers/typography";
+@use "helpers/waves";
+@use "helpers/zoom";
+
+@use "elements/badges";
+@use "elements/bars";
+@use "elements/buttons";
+@use "elements/cards";
+@use "elements/chips";
+@use "elements/dialogs";
+@use "elements/dividers";
+@use "elements/expansions";
+@use "elements/fields";
+@use "elements/grids";
+@use "elements/icons";
+@use "elements/layouts";
+@use "elements/lists";
+@use "elements/main-layouts";
+@use "elements/media";
+@use "elements/menus";
+@use "elements/navigations";
+@use "elements/overlays";
+@use "elements/pages";
+@use "elements/progress";
+@use "elements/shapes";
+@use "elements/selections";
+@use "elements/sliders";
+@use "elements/snackbars";
+@use "elements/tables";
+@use "elements/tabs";
+@use "elements/tooltips";
+
+@use "settings/theme";
+@use "helpers/colors";