@stackific/md3 0.1.1 → 0.1.2

package/src/styles/elements/_icons.scss

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

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

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

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

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

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