@stackific/md3 0.1.0

package/src/styles/elements/_icons.scss

@@ -0,0 +1,70 @@
+// Material-Symbols glyph base + size variants + filled variation axis.
+
+i,
+:is(.checkbox, .radio, .switch) > span::before,
+:is(.checkbox, .radio, .switch) > span > i {
+  --_size: 1.5rem;
+  font-family: var(--font-icon);
+  font-weight: normal;
+  font-style: normal;
+  font-size: var(--_size);
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+  vertical-align: middle;
+  text-align: center;
+  overflow: hidden;
+  inline-size: var(--_size);
+  min-inline-size: var(--_size);
+  block-size: var(--_size);
+  min-block-size: var(--_size);
+  box-sizing: content-box;
+  line-height: normal;
+  border-radius: 0;
+}
+
+i:has(.badge) { overflow: unset; }
+
+$-icon-sizes: (
+  "tiny":   1rem,
+  "small":  1.25rem,
+  "medium": 1.5rem,
+  "large":  1.75rem,
+  "extra":  2rem,
+);
+
+@each $name, $value in $-icon-sizes {
+  i.#{$name} { --_size: #{$value}; }
+}
+
+.chip > i { --_size: 1.25rem; }
+
+i.fill,
+a.active > i,
+button.active > i {
+  font-variation-settings: "FILL" 1;
+}
+
+i > :is(img, svg) {
+  inline-size: 100%;
+  block-size: 100%;
+  background-size: 100%;
+  border-radius: inherit;
+  position: absolute;
+  inset: 0 auto auto 0;
+  padding: inherit;
+}
+
+i[class*="fa-"] {
+  font-size: calc(var(--_size, 0) * 0.85);
+  line-height: normal;
+  block-size: auto;
+  min-block-size: auto;
+}

package/src/styles/elements/_layouts.scss

@@ -0,0 +1,24 @@
+// .absolute / .fixed positioning bundles with size variants.
+
+.absolute { position: absolute; }
+.fixed { position: fixed; }
+
+:is(.absolute, .fixed).left.right {
+  inline-size: auto;
+}
+
+$-layout-sizes: (
+  "small":  20rem,
+  "medium": 28rem,
+  "large":  44rem,
+);
+
+@each $name, $value in $-layout-sizes {
+  :is(.absolute, .fixed).left.right.#{$name} {
+    block-size: $value;
+  }
+
+  :is(.absolute, .fixed).top.bottom.#{$name} {
+    inline-size: $value;
+  }
+}

package/src/styles/elements/_lists.scss

@@ -0,0 +1,76 @@
+// .list — vertical row container with spacing tiers and optional borders.
+
+.list {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  flex: 1;
+
+  > li,
+  > li > details > summary,
+  > li > a:only-child {
+    all: unset;
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    align-items: center;
+    align-self: normal;
+    text-align: start;
+    justify-content: flex-start;
+    white-space: nowrap;
+    gap: 1rem;
+    min-block-size: 3.5rem;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    flex: 1;
+  }
+
+  > li:has(ul, ol, details[open], a:only-child) {
+    padding: 0;
+  }
+
+  > li > .list {
+    padding: 0 0 0 1rem;
+  }
+
+  > li > *,
+  > li > a:only-child > * {
+    margin: 0;
+  }
+
+  > li > :is(details, .max),
+  > li > a:only-child > .max,
+  > li > details > summary > .max {
+    flex: 1;
+  }
+
+  &.border > li:not(:last-child)::before,
+  &.border > li > details[open] > summary::before {
+    content: "";
+    position: absolute;
+    background-color: var(--outline-variant);
+    inset: auto 0 0 0;
+    block-size: 0.0625rem;
+    inline-size: auto;
+  }
+
+  > li:focus-visible,
+  > li > a:only-child:focus-visible {
+    outline: 0.125rem solid var(--primary);
+    outline-offset: -0.25rem;
+  }
+}
+
+$-list-spacing: (
+  "no":     2.5rem,
+  "medium": 4.5rem,
+  "large":  5.5rem,
+);
+
+@each $name, $value in $-list-spacing {
+  .list.#{$name}-space > li,
+  .list.#{$name}-space > li > details > summary {
+    min-block-size: $value;
+  }
+}

package/src/styles/elements/_main-layouts.scss

@@ -0,0 +1,45 @@
+// Page-level grid that wires <header>, <main>, <footer>, and edge <nav> slots.
+
+:has(> main) {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
+  grid-template-areas:
+    "left top    right"
+    "left header right"
+    "left main   right"
+    "left footer right"
+    "left bottom right";
+  min-block-size: 100dvh;
+  box-sizing: border-box;
+  background-color: var(--surface);
+}
+
+$-grid-areas: (
+  "nav.left":   left,
+  "nav.right":  right,
+  "nav.top":    top,
+  "nav.bottom": bottom,
+  "header":     header,
+  "footer":     footer,
+);
+
+@each $selector, $area in $-grid-areas {
+  #{$selector} {
+    grid-area: $area;
+  }
+}
+
+main {
+  --_padding: 0.5rem;
+  grid-area: main;
+  padding: var(--_padding);
+  overflow: clip;
+}
+
+aside {
+  z-index: 1;
+
+  &:not(.fixed, .absolute).right { float: right; }
+  &:not(.fixed, .absolute).left { float: left; }
+}

package/src/styles/elements/_media.scss

@@ -0,0 +1,104 @@
+// img/svg/video sizing for icons, avatars, hero images, and inline media.
+
+svg {
+  fill: currentcolor;
+}
+
+:is(img, svg, video):is(.small, .medium, .large, .tiny, .extra, .round, .circle, .square, .responsive) {
+  --_size: 3rem;
+  object-fit: cover;
+  object-position: center;
+  transition:
+    transform var(--speed3),
+    border-radius var(--speed3),
+    padding var(--speed3);
+  block-size: var(--_size);
+  inline-size: var(--_size);
+}
+
+:is(img, svg, video).round {
+  --_round: 0.5rem;
+}
+
+$-media-sizes: (
+  "tiny":  2rem,
+  "small": 2.5rem,
+  "large": 3.5rem,
+  "extra": 4rem,
+);
+
+@each $name, $value in $-media-sizes {
+  :is(img, svg, video).#{$name} {
+    --_size: #{$value};
+  }
+}
+
+:is(img, svg, video).responsive {
+  --_size: 100%;
+  margin: 0 auto;
+}
+
+$-responsive-heights: (
+  "tiny":   4rem,
+  "small":  8rem,
+  "medium": 12rem,
+  "large":  16rem,
+  "extra":  20rem,
+);
+
+@each $name, $value in $-responsive-heights {
+  :is(img, svg, video).responsive.#{$name} {
+    inline-size: 100%;
+    block-size: $value;
+  }
+}
+
+:is(img, svg, video).responsive.round {
+  --_round: 2rem;
+}
+
+:is(img, svg, video).empty-state {
+  max-inline-size: 100%;
+  inline-size: 24rem;
+}
+
+:is(button, .button, .chip):not(.transparent) > .responsive {
+  border: 0.25rem solid transparent;
+}
+
+:is(button, .button, .chip, .field) > :is(img, svg):not(.responsive),
+.tabs :is(img, svg):not(.responsive) {
+  min-inline-size: 1.5rem;
+  max-inline-size: 1.5rem;
+  min-block-size: 1.5rem;
+  max-block-size: 1.5rem;
+}
+
+:is(button, .button, .chip):not(.extend) > .responsive:first-child {
+  margin-inline-start: calc(-1 * var(--_padding, 0));
+}
+
+:is(button, .button, .chip):not(.extend) > .responsive:not(:first-child) {
+  margin-inline-end: calc(-1 * var(--_padding, 0));
+}
+
+:is(button, .button, .chip, .circle, .square, .extend) > .responsive {
+  --_size: inherit;
+  margin: 0 auto;
+}
+
+.extend > :is(.responsive, i) {
+  margin: 0;
+  position: absolute;
+  inset-inline: 1rem;
+  z-index: 1;
+}
+
+.extend > .responsive {
+  inset-inline: 0;
+  inline-size: 3.5rem;
+}
+
+.extend.border > .responsive {
+  inline-size: 3.375rem;
+}

package/src/styles/elements/_menus.scss

@@ -0,0 +1,289 @@
+// <menu> — anchored popover. Spacing / position / submenu offset variants
+// loop over a few small numeric scales.
+
+menu {
+  opacity: 0;
+  visibility: hidden;
+  position: absolute;
+  box-shadow: var(--elevate2);
+  background-color: var(--surface-container);
+  z-index: 13;
+  inset: auto auto 0 0;
+  inline-size: 100%;
+  max-block-size: 50vh;
+  max-inline-size: none !important;
+  overflow-x: hidden;
+  overflow-y: auto;
+  font-size: 0.875rem;
+  font-weight: normal;
+  text-transform: none;
+  color: var(--on-surface);
+  line-height: normal;
+  text-align: start;
+  border-radius: 1rem;
+  transform: scale(0.8) translateY(120%);
+  transition: all var(--speed2) var(--speed2);
+  justify-content: flex-start;
+  padding: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+
+  &.no-wrap {
+    inline-size: max-content !important;
+    white-space: nowrap !important;
+  }
+
+  * {
+    white-space: inherit !important;
+  }
+}
+
+$-menu-gaps: (
+  "no":     0,
+  "small":  0.25rem,
+  "medium": 0.375rem,
+  "large":  0.5rem,
+  "extra":  0.625rem,
+);
+
+@each $name, $value in $-menu-gaps {
+  menu.#{$name}-space {
+    gap: $value;
+  }
+}
+
+[dir="rtl"] menu {
+  inset: auto 0 0 auto;
+}
+
+menu.active,
+:not([data-ui]):focus-within > menu,
+menu > li:hover > menu,
+menu > li > menu:hover {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1) translateY(100%);
+  transition: all var(--speed2), background-color 0s;
+}
+
+menu.top.active,
+:not([data-ui]):focus-within > menu.top,
+menu > li:hover > menu.top,
+menu > li > menu.top:hover {
+  transform: scale(1) translateY(-100%);
+}
+
+menu:is(.min, .max).active,
+:not([data-ui]):focus-within > menu:is(.min, .max) {
+  transform: scale(1);
+}
+
+menu {
+  > li,
+  > li > a:only-child {
+    all: unset;
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    align-items: center;
+    align-self: normal;
+    text-align: start;
+    justify-content: inherit;
+    white-space: nowrap;
+    gap: 1rem;
+    padding: 0.5rem 1rem;
+    min-block-size: 2.75rem;
+    flex: 1;
+    margin: 0 !important;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    transition: border-radius var(--speed2);
+  }
+
+  > li {
+    &:first-child {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+    }
+
+    &:hover {
+      background-color: color-mix(in srgb, currentColor 10%, transparent);
+    }
+
+    &.active {
+      background-color: var(--tertiary-container);
+      color: var(--on-tertiary-container);
+    }
+
+    &:is(.active, :active) {
+      border-radius: 0.75rem;
+    }
+
+    > :is(.max, .field),
+    > a:only-child > .max {
+      flex: 1;
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  > li:has(.field, a:only-child) {
+    flex: 1;
+    padding: 0;
+    margin: 0;
+  }
+}
+
+menu.min {
+  inset: 0 0 auto 0;
+  transform: scale(0.8);
+}
+
+[dir="rtl"] menu.min.right,
+menu.min.left,
+menu.top.left {
+  inset: 0 0 auto auto;
+}
+
+[dir="rtl"] menu.min.left,
+menu.min.right,
+menu.top,
+menu.top.right {
+  inset: 0 auto auto 0;
+}
+
+menu.max {
+  position: fixed;
+  inset: 0;
+  block-size: 100%;
+  max-block-size: none;
+  min-block-size: auto;
+  z-index: 100;
+  transform: scale(0.8);
+  border-radius: 0;
+
+  > li {
+    flex: none !important;
+  }
+}
+
+menu.no-wrap:is(.min, .max) {
+  min-inline-size: 16rem;
+}
+
+[dir="rtl"] menu.right,
+[dir="rtl"] menu.top.min.right,
+menu.left,
+menu.top.min.left {
+  inset: auto 0 0 auto;
+}
+
+[dir="rtl"] menu.left,
+[dir="rtl"] menu.top.min.left,
+menu.right,
+menu.top.min {
+  inset: auto auto 0 0;
+}
+
+menu.top {
+  transform: scale(0.8) translateY(-120%);
+}
+
+menu:has(menu) {
+  --_child: 1;
+  --_type: 0;
+  overflow: unset;
+  white-space: nowrap;
+  inline-size: auto;
+  min-inline-size: 12rem;
+  max-block-size: none;
+}
+
+menu > li > :is(menu, menu.right),
+[dir="rtl"] menu > li > menu.left {
+  inset: auto auto calc(3rem * (var(--_child, 0) - var(--_type, 0))) 100%;
+}
+
+[dir="rtl"] menu > li > :is(menu, menu.right),
+menu > li > menu.left {
+  inset: auto 100% calc(3rem * (var(--_child, 0) - var(--_type, 0))) auto;
+}
+
+menu > li > :is(menu.top, menu.top.right),
+[dir="rtl"] menu > li > menu.top.left {
+  inset: calc(3rem * (var(--_child, 0) - var(--_type, 0))) auto auto 100%;
+}
+
+[dir="rtl"] menu > li > :is(menu.top, menu.top.right),
+menu > li > menu.top.left {
+  inset: calc(3rem * (var(--_child, 0) - var(--_type, 0))) 100% auto auto;
+}
+
+menu.group {
+  padding: 0.5rem 0;
+  inline-size: 100%;
+  min-inline-size: auto;
+  max-block-size: none;
+  overflow: unset;
+  background: none;
+  box-shadow: none;
+
+  > li {
+    box-shadow: none;
+    padding: 0;
+    min-block-size: auto;
+
+    &:hover {
+      background: none;
+    }
+
+    > menu,
+    > menu:hover {
+      opacity: 1;
+      visibility: visible;
+      position: relative;
+      inset: 0;
+      max-block-size: none;
+      transform: none;
+      transition: none;
+      border-radius: 1rem 1rem 0.5rem 0.5rem;
+      z-index: auto;
+      flex: 1;
+    }
+
+    &:last-child > menu {
+      border-radius: 0.5rem 0.5rem 1rem 1rem;
+    }
+  }
+}
+
+// Submenu offset counters — emitted via @for to replace 22 hand-written rules.
+@for $i from 2 through 11 {
+  menu > li:nth-last-child(#{$i}) {
+    --_child: #{$i};
+  }
+}
+
+@for $i from 2 through 11 {
+  menu > li:nth-last-of-type(#{$i}) {
+    --_type: #{$i - 1};
+  }
+}
+
+@media (pointer: coarse) {
+  :not(menu, [data-ui]):hover > menu {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1) translateY(100%);
+  }
+
+  :not(menu, [data-ui]):hover > menu.top {
+    transform: scale(1) translateY(-100%);
+  }
+}