@stackific/md3 0.1.0 → 0.1.2

package/src/styles/elements/_bars.scss

@@ -1,83 +0,0 @@
-// <header> and <footer> top/bottom bars + .fixed sticky behavior.
-
-header,
-footer {
-  display: grid;
-  align-content: center;
-  border-radius: 0;
-  padding: 0 1rem;
-}
-
-:is(dialog, article) > :is(header, footer) {
-  padding-inline: 0;
-  inset: 0;
-}
-
-header { min-block-size: 4rem; }
-footer { min-block-size: 5rem; }
-
-:is(header, footer, menu > *).fixed {
-  position: sticky;
-  inset: 0;
-  z-index: 11;
-  background-color: inherit;
-}
-
-header.fixed {
-  inset: calc(-1 * var(--_padding, 0)) 0 0 0;
-  margin-block-start: calc(-1 * var(--_padding, 0));
-}
-
-footer.fixed {
-  inset: 0 0 calc(-1 * var(--_padding, 0)) 0;
-  margin-block-end: calc(-1 * var(--_padding, 0));
-}
-
-:is(header, footer).fixed.min {
-  margin-inline: auto;
-}
-
-dialog > :is(header, footer) {
-  background: none;
-}
-
-dialog > :is(header, footer).fixed {
-  background-color: inherit;
-}
-
-:is(main, header, footer, section).responsive {
-  max-inline-size: min(100vw, 75rem);
-  margin: 0 auto;
-
-  &.max {
-    max-inline-size: none;
-  }
-}
-
-:has(> main) > :is(header, footer).fixed {
-  transform: none;
-  box-sizing: content-box;
-  position: sticky;
-  inset: 0;
-  z-index: 12;
-}
-
-:has(> main) > header { padding-block-start: var(--top, 0); }
-:has(> main) > footer { padding-block-end: var(--bottom, 0); }
-
-nav.top ~ header,
-nav.bottom ~ footer {
-  padding-block: 0;
-}
-
-nav.top ~ header.fixed {
-  inset-block: calc(var(--top, 0) + 4.5rem) 0;
-}
-
-nav.bottom ~ footer.fixed {
-  inset-block: 0 calc(var(--bottom, 0) + 4.5rem);
-}
-
-:is(nav, .row) > header {
-  background-color: inherit;
-}

package/src/styles/elements/_buttons.scss

@@ -1,119 +0,0 @@
-// .button / <button> baseline + size/shape/state variants.
-
-@use "sass:map";
-
-.button,
-button {
-  --_padding: 1rem;
-  --_size: 2.5rem;
-  --_round: calc(var(--_size) / 2) !important;
-  box-sizing: content-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  block-size: var(--_size);
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--on-primary);
-  padding: 0 var(--_padding);
-  background-color: var(--primary);
-  border-radius: 1.25rem;
-  transition:
-    transform var(--speed3),
-    border-radius var(--speed2),
-    padding var(--speed3);
-  user-select: none;
-  gap: 0.5rem;
-  line-height: normal;
-}
-
-$-button-sizes: (
-  "small": (size: 2rem,   padding: 0.75rem),
-  "large": (size: 3rem,   padding: 1.25rem),
-);
-
-@each $name, $values in $-button-sizes {
-  :is(button, .button).#{$name} {
-    --_size: #{map.get($values, size)};
-    --_padding: #{map.get($values, padding)};
-  }
-}
-
-:is(.button, button):is(.extra, .extend) {
-  --_size: 3.5rem;
-  font-size: 1rem;
-  --_padding: 1.5rem;
-}
-
-:is(button, .button):is(.square, .circle) {
-  --_padding: 0;
-}
-
-:is(button, .button).border {
-  border-color: var(--outline-variant);
-  color: var(--primary);
-}
-
-.extend {
-  > span:not([class]) {
-    display: none;
-  }
-
-  &:is(:hover, .active) {
-    inline-size: auto;
-    --_padding: 1.5rem;
-    padding: 0 var(--_padding);
-
-    > i + span {
-      display: inherit;
-      margin-inline-start: var(--_padding);
-    }
-
-    > :is(img, svg) + span {
-      display: inherit;
-      margin-inline-start: calc(1rem + var(--_padding, 0));
-    }
-  }
-}
-
-:is(.button, button)[disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.button[disabled] {
-  pointer-events: none;
-}
-
-:is(.button, button)[disabled]::before,
-:is(.button, button)[disabled]::after {
-  display: none;
-}
-
-:is(.button, button):not(.chip, .extend) {
-  &.fill {
-    background-color: var(--secondary-container) !important;
-    color: var(--on-secondary-container) !important;
-  }
-
-  &.active {
-    background-color: var(--primary-container);
-    color: var(--on-primary-container);
-  }
-
-  &.fill.active {
-    background-color: var(--secondary) !important;
-    color: var(--on-secondary) !important;
-  }
-
-  &.border.active {
-    background-color: var(--inverse-surface) !important;
-    color: var(--inverse-on-surface) !important;
-    border-color: var(--inverse-surface) !important;
-  }
-}
-
-:is(.button, button):not(.chip):active,
-:is(.button, button):not(.chip).active {
-  border-radius: 0.5rem !important;
-}

package/src/styles/elements/_cards.scss

@@ -1,32 +0,0 @@
-// <article> = card surface. Sizes loop over a small map.
-
-article {
-  --_padding: 1rem;
-  box-shadow: var(--elevate1);
-  background-color: var(--surface-container-low);
-  color: var(--on-surface);
-  padding: var(--_padding);
-  border-radius: 0.75rem;
-  display: block;
-  transition:
-    transform var(--speed3),
-    border-radius var(--speed3),
-    padding var(--speed3);
-
-  &.border {
-    box-shadow: none;
-    border: 0.0625rem solid var(--outline-variant);
-  }
-}
-
-$-card-sizes: (
-  "small": 12rem,
-  "medium": 20rem,
-  "large": 32rem,
-);
-
-@each $name, $value in $-card-sizes {
-  article.#{$name} {
-    block-size: $value;
-  }
-}

package/src/styles/elements/_chips.scss

@@ -1,46 +0,0 @@
-// .chip — pill-shaped action element with three size tiers.
-
-@use "sass:map";
-
-.chip {
-  --_padding: 0.75rem;
-  --_size: 2rem;
-  --_round: calc(var(--_size) / 2) !important;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  block-size: var(--_size);
-  min-inline-size: var(--_size);
-  font-size: 0.875rem;
-  font-weight: 500;
-  background-color: transparent;
-  border: 0.0625rem solid var(--outline-variant);
-  color: var(--on-surface-variant);
-  padding: 0 var(--_padding);
-  border-radius: 0.5rem;
-  transition:
-    transform var(--speed3),
-    border-radius var(--speed3),
-    padding var(--speed3);
-  user-select: none;
-  gap: 0.5rem;
-  line-height: normal;
-  letter-spacing: normal;
-
-  &.fill {
-    border: none;
-  }
-}
-
-$-chip-sizes: (
-  "medium": (size: 2.5rem, padding: 1rem),
-  "large":  (size: 3rem,   padding: 1.25rem),
-);
-
-@each $name, $values in $-chip-sizes {
-  .chip.#{$name} {
-    --_size: #{map.get($values, size)};
-    --_padding: #{map.get($values, padding)};
-  }
-}

package/src/styles/elements/_dialogs.scss

@@ -1,143 +0,0 @@
-// <dialog> modal surface with size + edge-pin (top/right/bottom/left/max) variants.
-
-dialog {
-  --_padding: 1.5rem;
-  --_top: calc(var(--_padding, 0) + var(--top, 0));
-  --_bottom: calc(var(--_padding, 0) + var(--bottom, 0));
-  display: block;
-  visibility: hidden;
-  border: none;
-  opacity: 0;
-  position: fixed;
-  box-shadow: var(--elevate2);
-  color: var(--on-surface);
-  background-color: var(--surface-container-high);
-  padding: var(--_padding);
-  z-index: 100;
-  inset: 10% auto auto 50%;
-  min-inline-size: 20rem;
-  max-inline-size: 100%;
-  max-block-size: 80%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  transition: all var(--speed3), 0s background-color;
-  border-radius: 1.75rem;
-  transform: translate(-50%, -4rem);
-  outline: none;
-
-  &:is(.active, [open]),
-  &:popover-open {
-    visibility: visible;
-    opacity: 1;
-    transform: translate(-50%, 0);
-  }
-
-  &:is(.top, .right, .bottom, .left, .max) {
-    --_padding: 1rem;
-  }
-}
-
-// Base size variants come BEFORE the edge-pin (.top/.bottom/.left/.right/.max)
-// rules so an edge-pinned `.large` dialog uses the side variant's block-size
-// (100%) instead of `.large`'s default 75%. Matches upstream cascade.
-$-dialog-base-sizes: (
-  "small":  25%,
-  "medium": 50%,
-  "large":  75%,
-);
-
-@each $name, $value in $-dialog-base-sizes {
-  dialog.#{$name} {
-    inline-size: $value;
-    block-size: $value;
-  }
-}
-
-dialog {
-  &:is(.top, .bottom) {
-    opacity: 1;
-    block-size: auto;
-    inline-size: 100%;
-    min-inline-size: auto;
-    max-block-size: 100%;
-  }
-
-  &.top {
-    inset: 0 auto auto 0;
-    transform: translateY(-100%);
-    border-radius: 0 0 1rem 1rem;
-    padding-block-start: var(--_top);
-  }
-
-  &.bottom {
-    inset: auto auto 0 0;
-    transform: translateY(100%);
-    border-radius: 1rem 1rem 0 0;
-    padding-block-end: var(--_bottom);
-  }
-
-  &:is(.left, .right) {
-    opacity: 1;
-    inset: 0 auto auto 0;
-    inline-size: auto;
-    block-size: 100%;
-    max-block-size: 100%;
-    background-color: var(--surface);
-    padding-block: var(--_top) var(--_bottom);
-  }
-
-  &.max {
-    inset: 0 auto auto 0;
-    inline-size: 100%;
-    block-size: 100%;
-    max-inline-size: 100%;
-    max-block-size: 100%;
-    transform: translateY(4rem);
-    background-color: var(--surface);
-    border-radius: 0;
-    padding-block: var(--_top) var(--_bottom);
-  }
-
-  &:is(.active, [open]):is(.left, .right, .top, .bottom, .max),
-  &:popover-open:is(.left, .right, .top, .bottom, .max) {
-    transform: translate(0, 0);
-  }
-}
-
-[dir="rtl"] dialog.right,
-dialog.left {
-  inset: 0 auto auto 0;
-  border-radius: 0 1rem 1rem 0;
-  transform: translateX(-100%);
-}
-
-[dir="rtl"] dialog.left,
-dialog.right {
-  inset: 0 0 auto auto;
-  border-radius: 1rem 0 0 1rem;
-  transform: translateX(100%);
-}
-
-$-dialog-side-sizes: (
-  "small":  20rem,
-  "medium": 32rem,
-  "large":  44rem,
-);
-
-@each $name, $value in $-dialog-side-sizes {
-  dialog.#{$name}:is(.left, .right) {
-    inline-size: $value;
-  }
-}
-
-$-dialog-vert-sizes: (
-  "small":  16rem,
-  "medium": 24rem,
-  "large":  32rem,
-);
-
-@each $name, $value in $-dialog-vert-sizes {
-  dialog.#{$name}:is(.top, .bottom) {
-    block-size: $value;
-  }
-}

package/src/styles/elements/_dividers.scss

@@ -1,46 +0,0 @@
-// <hr> + .divider — horizontal/vertical rule. Size modifiers share a margin map.
-
-hr,
-[class*="divider"] {
-  all: unset;
-  inline-size: -webkit-fill-available;
-  min-block-size: auto;
-  block-size: 0.0625rem;
-  background-color: var(--outline-variant);
-  display: block;
-
-  + * {
-    margin: 0 !important;
-  }
-}
-
-$-divider-margins: (
-  "small":  0.5rem,
-  "medium": 1rem,
-  "large":  1.5rem,
-);
-
-@each $name, $value in $-divider-margins {
-  hr.#{$name},
-  .#{$name}-divider {
-    margin: #{$value} 0 !important;
-  }
-}
-
-li:has(> :is(hr, .divider)) {
-  padding: 0 !important;
-  align-self: normal !important;
-  min-inline-size: auto !important;
-  min-block-size: auto !important;
-  inline-size: -webkit-fill-available;
-  background: none !important;
-}
-
-:is(hr, .divider).vertical,
-li:has(> :is(hr, .divider).vertical) {
-  padding: 0 !important;
-  align-self: center !important;
-  min-inline-size: auto;
-  min-block-size: 1.5rem;
-  inline-size: 0.0625rem;
-}

package/src/styles/elements/_expansions.scss

@@ -1,19 +0,0 @@
-// <details>/<summary> expansion behavior.
-
-summary {
-  list-style-type: none;
-  cursor: pointer;
-
-  &::-webkit-details-marker {
-    display: none;
-  }
-
-  > * {
-    pointer-events: none;
-    margin: 0;
-  }
-}
-
-li > details > summary + .list {
-  margin: 0 !important;
-}