@stackific/md3 0.1.0 → 0.1.2

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%);
-  }
-}