@stackific/md3 0.1.1 → 0.1.3

package/src/styles/elements/_selections.scss

@@ -1,248 +0,0 @@
-// .checkbox / .radio / .switch — all three share size-scaling and focus/hover ripples.
-
-.checkbox,
-.radio,
-.switch {
-  --_size: 1.5rem;
-  inline-size: auto;
-  block-size: auto;
-  line-height: normal;
-  white-space: nowrap;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-}
-
-.switch {
-  direction: ltr;
-}
-
-$-selection-sizes: (
-  "small": 1rem,
-  "large": 2rem,
-  "extra": 2.5rem,
-);
-
-@each $name, $value in $-selection-sizes {
-  :is(.checkbox, .radio, .switch).#{$name} {
-    --_size: #{$value};
-  }
-}
-
-:is(.checkbox, .radio) > input {
-  inline-size: var(--_size);
-  block-size: var(--_size);
-  opacity: 0;
-}
-
-.switch > input {
-  inline-size: 3.25rem;
-  block-size: 2rem;
-  opacity: 0;
-}
-
-:is(.checkbox, .radio, .switch) > span {
-  display: inline-flex;
-  align-items: center;
-  color: var(--on-surface);
-  font-size: 0.875rem;
-}
-
-:is(.checkbox, .radio) > span:not(:empty) {
-  padding-inline-start: 0.25rem;
-}
-
-:is(.checkbox, .radio, .switch) > span::before,
-:is(.checkbox, .radio, .switch) > span > i,
-:is(.checkbox, .radio) > span::after {
-  --_size: inherit;
-  content: "";
-  inline-size: var(--_size);
-  block-size: var(--_size);
-  box-sizing: border-box;
-  margin: 0 auto;
-  outline: none;
-  color: var(--primary);
-  position: absolute;
-  inset: auto auto auto calc(var(--_size, 0) * -1);
-  border-radius: 50%;
-  user-select: none;
-  z-index: 1;
-}
-
-[dir="rtl"] :is(.checkbox, .radio) > span::before,
-[dir="rtl"] :is(.checkbox, .radio) > span > i,
-[dir="rtl"] :is(.checkbox, .radio) > span::after {
-  --_size: inherit;
-  inset: auto calc(var(--_size, 0) * -1) auto auto;
-}
-
-.switch > span::before,
-.switch.icon > span > i {
-  position: absolute;
-  inset: 50% auto auto 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  transition: all var(--speed2);
-  font-size: calc(var(--_size, 0) - 0.5rem);
-  user-select: none;
-  min-inline-size: var(--_size);
-  min-block-size: var(--_size);
-  content: "";
-  color: var(--surface-variant);
-  background-color: var(--outline);
-}
-
-.switch > span::before,
-.switch.icon > span > i {
-  transform: translate(-3rem, -50%) scale(0.6);
-}
-
-.switch.icon > span > i {
-  transform: translate(-3rem, -50%) scale(1);
-}
-
-// icon glyphs per control
-.checkbox > span::before { content: "check_box_outline_blank"; }
-.checkbox > input:checked + span::before {
-  content: "check_box";
-  font-variation-settings: "FILL" 1;
-}
-.checkbox > input:indeterminate + span::before { content: "indeterminate_check_box"; }
-
-.radio > span::before { content: "radio_button_unchecked"; }
-.radio > input:checked + span::before { content: "radio_button_checked"; }
-
-:is(.radio, .checkbox, .switch).icon > span::before {
-  content: "" !important;
-  font-variation-settings: unset !important;
-}
-
-:is(.checkbox, .radio) > span::after {
-  transition: all var(--speed1);
-  background-color: currentColor;
-  box-shadow: 0 0 0 0 currentColor;
-  opacity: 0;
-}
-
-:is(.checkbox, .radio):is(:hover) > input:not(:disabled) + span::after,
-:is(.checkbox, .radio) > input:not(:disabled):is(:focus) + span::after {
-  box-shadow: 0 0 0 0.5rem currentColor;
-  opacity: 0.1;
-}
-
-.switch > input:not(:disabled):is(:focus, :hover) + span::before,
-.switch.icon > input:not(:disabled):is(:focus, :hover) + span > i {
-  box-shadow: 0 0 0 0.5rem var(--active);
-}
-
-:is(.checkbox, .radio) > input:checked + span::before,
-:is(.checkbox, .radio).icon > input:checked + span > i {
-  color: var(--primary);
-}
-
-.icon > input:checked + span > i:first-child,
-.icon > span > i:last-child {
-  opacity: 0;
-}
-
-.icon > input:checked + span > i:last-child,
-.icon > span > i:first-child {
-  opacity: 1;
-}
-
-.switch > input:checked + span::after {
-  border: none;
-  background-color: var(--primary);
-}
-
-.switch > input:checked + span::before,
-.switch.icon > input:checked + span > i {
-  content: "check";
-  color: var(--primary);
-  background-color: var(--on-primary);
-  transform: translate(-1.75rem, -50%) scale(1);
-}
-
-[dir="rtl"] .switch > input:checked + span::before,
-[dir="rtl"] .switch.icon > input:checked + span > i {
-  transform: translate(-1.75rem, -50%) scale(-1);
-}
-
-.switch > input:active:not(:disabled) + span::before,
-.switch.icon > input:active:not(:disabled) + span > i {
-  transform: translate(-3rem, -50%) scale(1.2);
-}
-
-[dir="rtl"] .switch > input:active:not(:disabled) + span::before,
-[dir="rtl"] .switch.icon > input:active:not(:disabled) + span > i {
-  transform: translate(-3rem, -50%) scale(-1.2);
-}
-
-.switch > input:active:checked:not(:disabled) + span::before,
-.switch.icon > input:active:checked:not(:disabled) + span > i {
-  transform: translate(-1.75rem, -50%) scale(1.2);
-}
-
-[dir="rtl"] .switch > input:active:checked:not(:disabled) + span::before,
-[dir="rtl"] .switch.icon > input:active:checked:not(:disabled) + span > i {
-  transform: translate(-1.75rem, -50%) scale(-1.2);
-}
-
-:is(.checkbox, .radio, .switch) > input:disabled + span {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.switch > span::after {
-  content: "";
-  position: absolute;
-  inset: 50% auto auto 0;
-  background-color: var(--active);
-  border: 0.125rem solid var(--outline);
-  box-sizing: border-box;
-  inline-size: 3.25rem;
-  block-size: 2rem;
-  border-radius: 2rem;
-  transform: translate(-3.25rem, -50%);
-}
-
-.field > :is(nav, .row) {
-  flex-grow: 1;
-  padding: 0 1rem;
-}
-
-.field.round > :is(nav, .row) {
-  flex-grow: 1;
-  padding: 0 1.5rem;
-}
-
-[dir="rtl"] .switch {
-  transform: scale(-1);
-}
-
-[dir="rtl"] .switch > span::before,
-[dir="rtl"] .switch.icon > span > i {
-  transform: translate(-3rem, -50%) scale(-0.6);
-}
-
-[dir="rtl"] .switch.icon > span > i {
-  transform: translate(-3rem, -50%) scale(-1);
-}
-
-[dir="rtl"] .switch > input:checked + span::before,
-[dir="rtl"] .switch.icon > input:checked + span > i {
-  transform: translate(-1.75rem, -50%) scale(-1);
-}
-
-.switch > :focus-visible + span::after {
-  outline: 0.125rem solid var(--primary);
-  outline-offset: 0.25rem;
-}
-
-:is(.checkbox, .radio) > :focus-visible + span::before {
-  outline: 0.125rem solid var(--primary);
-  outline-offset: 0.375rem;
-}

package/src/styles/elements/_shapes.scss

@@ -1,153 +0,0 @@
-// .shape — SVG-masked decorative shape. Each variant points at a sibling SVG
-// in src/styles/shapes/ via a relative URL so Vite (and any consumer's
-// bundler) fingerprints and emits it alongside md3.css.
-// One @each over $-shapes replaces ~40 hand-written mask-image rules in upstream.
-
-@use "sass:list";
-
-.shape {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--on-primary);
-  background-color: var(--primary);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: contain;
-  border-radius: 0;
-  block-size: 3.5rem;
-  inline-size: 3.5rem;
-  margin: 0 !important;
-  padding: 0 !important;
-  border: 0 !important;
-}
-
-.transparent > .shape > i {
-  filter: invert(1);
-}
-
-$-shape-mask-sizes: (
-  "tiny-space":   90%,
-  "space":        80%,
-  "small-space":  80%,
-  "medium-space": 70%,
-  "large-space":  60%,
-  "extra-space":  50%,
-);
-
-@each $name, $value in $-shape-mask-sizes {
-  .shape.#{$name} { mask-size: $value; }
-}
-
-$-shape-sizes: (
-  "tiny":   2.5rem,
-  "medium": 4.5rem,
-  "large":  5.5rem,
-  "extra":  6.5rem,
-);
-
-@each $name, $value in $-shape-sizes {
-  .shape.#{$name} {
-    block-size: $value;
-    inline-size: $value;
-  }
-}
-
-.shape.max,
-.shape > .responsive,
-.shape > .responsive > .responsive {
-  position: absolute;
-  inset: 0;
-  block-size: 100%;
-  inline-size: 100%;
-  margin: 0 !important;
-  padding: 0 !important;
-  border: 0 !important;
-}
-
-.shape > .responsive {
-  background: inherit;
-  color: inherit;
-}
-
-$-shape-rotations: (
-  "":      12s,
-  "fast":  6s,
-  "slow":  24s,
-);
-
-@each $name, $duration in $-shape-rotations {
-  @if $name == "" {
-    .shape.rotate {
-      animation: linear to-rotate infinite #{$duration};
-
-      > * {
-        animation: linear to-rotate infinite #{$duration} reverse;
-      }
-    }
-  } @else {
-    .shape.#{$name}-rotate {
-      animation: linear to-rotate infinite #{$duration};
-
-      > * {
-        animation: linear to-rotate infinite #{$duration} reverse;
-      }
-    }
-  }
-}
-
-:is(button, .button, .chip):has(> .shape) > .responsive {
-  border: none;
-}
-
-// All shape mask images. Note: `leaft-clover8` is a verbatim typo from upstream
-// (the file is `leaf-clover8.svg`) — preserved for 1:1 class-name parity.
-// Each entry is (class-name, file-stem). They diverge only for "leaft-clover8"
-// → leaf-clover8.svg (verbatim typo from upstream).
-$-shapes: (
-  ("arch", "arch"),
-  ("arrow", "arrow"),
-  ("boom", "boom"),
-  ("bun", "bun"),
-  ("burst", "burst"),
-  ("circle", "circle"),
-  ("clamshell", "clamshell"),
-  ("diamond", "diamond"),
-  ("fan", "fan"),
-  ("flower", "flower"),
-  ("gem", "gem"),
-  ("ghost-ish", "ghost-ish"),
-  ("heart", "heart"),
-  ("leaf-clover4", "leaf-clover4"),
-  ("leaft-clover8", "leaf-clover8"),
-  ("loading-indicator", "loading-indicator"),
-  ("oval", "oval"),
-  ("pentagon", "pentagon"),
-  ("pill", "pill"),
-  ("pixel-circle", "pixel-circle"),
-  ("pixel-triangle", "pixel-triangle"),
-  ("puffy", "puffy"),
-  ("puffy-diamond", "puffy-diamond"),
-  ("semicircle", "semicircle"),
-  ("sided-cookie4", "sided-cookie4"),
-  ("sided-cookie6", "sided-cookie6"),
-  ("sided-cookie7", "sided-cookie7"),
-  ("sided-cookie9", "sided-cookie9"),
-  ("sided-cookie12", "sided-cookie12"),
-  ("slanted", "slanted"),
-  ("soft-boom", "soft-boom"),
-  ("soft-burst", "soft-burst"),
-  ("square", "square"),
-  ("sunny", "sunny"),
-  ("triangle", "triangle"),
-  ("very-sunny", "very-sunny"),
-);
-
-@each $entry in $-shapes {
-  $class: list.nth($entry, 1);
-  $file:  list.nth($entry, 2);
-
-  .shape.#{$class} {
-    mask-image: url("./shapes/#{$file}.svg");
-  }
-}