@stackific/md3 0.1.1 → 0.1.3

package/src/styles/elements/_sliders.scss

@@ -1,336 +0,0 @@
-// .slider — range input with single + dual thumb modes, vertical orientation,
-// and a .max "container slider" variant.
-
-.slider {
-  --_start: 0%;
-  --_end: 0%;
-  --_value1: "";
-  --_value2: "";
-  --_track: 1rem;
-  --_thumb: max(2.5rem, calc(var(--_track, 0) + 0.5rem));
-  display: flex;
-  align-items: center !important;
-  inline-size: auto;
-  block-size: var(--_thumb);
-  flex: none;
-  direction: ltr;
-  margin: 0 1.25rem;
-  color: var(--primary);
-
-  &.vertical {
-    flex-direction: row !important;
-    margin: 0.5rem auto !important;
-    padding: 50% 0;
-    transform: rotate(-90deg);
-    inline-size: 100%;
-  }
-}
-
-[dir="rtl"] .slider {
-  transform: scaleX(-1);
-}
-
-$-slider-tracks: (
-  "tiny":   1rem,
-  "small":  1.5rem,
-  "medium": 2.5rem,
-  "large":  3.5rem,
-  "extra":  6rem,
-);
-
-@each $name, $value in $-slider-tracks {
-  .slider.#{$name} { --_track: #{$value}; }
-}
-
-// inputs
-.slider > input {
-  appearance: none;
-  box-shadow: none;
-  border: none;
-  outline: none;
-  pointer-events: none;
-  inline-size: 100%;
-  block-size: var(--_track);
-  background: none;
-  z-index: 1;
-  padding: 0;
-  margin: 0;
-  transform: rotate(0deg);
-  touch-action: none;
-
-  &:only-of-type {
-    pointer-events: all;
-  }
-
-  & ~ input {
-    position: absolute;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 1;
-  }
-
-  &:disabled ~ span:not([class]) {
-    background: var(--outline);
-  }
-}
-
-// Thumb styling — WebKit / Firefox have separate pseudo-elements so the rules
-// can't be merged; we share the body via a mixin.
-@mixin -slider-thumb {
-  appearance: none;
-  box-shadow: none;
-  border: none;
-  outline: none;
-  pointer-events: all;
-  block-size: var(--_thumb);
-  inline-size: 0.25rem;
-  border-radius: 0.25rem;
-  background: currentColor;
-  cursor: grab;
-  margin: 0;
-  z-index: 1;
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-.slider > input::-webkit-slider-thumb { @include -slider-thumb; }
-.slider > input::-moz-range-thumb {
-  @include -slider-thumb;
-  block-size: 2.75rem;
-  background: var(--primary);
-}
-
-.slider > input:not(:disabled):is(:focus)::-webkit-slider-thumb,
-.slider > input:not(:disabled):is(:focus)::-moz-range-thumb {
-  transform: scaleX(0.6);
-}
-
-.slider > input:disabled::-webkit-slider-thumb,
-.slider > input:disabled::-moz-range-thumb {
-  background: var(--outline);
-  cursor: not-allowed;
-}
-
-// active track
-.slider > span:not([class]) {
-  position: absolute;
-  block-size: var(--_track);
-  border-radius: 1rem 0 0 1rem;
-  background: currentColor;
-  color: currentColor;
-  z-index: 0;
-  inset: calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + 0.5rem) auto var(--_start);
-}
-
-.slider > input[type="range"] + input[type="range"] ~ span:not([class]) {
-  border-radius: 0;
-  inset: calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + 0.5rem) auto calc(var(--_start) + 0.5rem);
-}
-
-.field > .slider {
-  inline-size: 100%;
-}
-
-.slider::before {
-  content: "";
-  position: absolute;
-  inline-size: 100%;
-  block-size: var(--_track);
-  border-radius: 1rem;
-  background: var(--active);
-  clip-path: polygon(
-    calc(var(--_start, 0) - 0.5rem) 0,
-    0 0, 0 100%,
-    calc(var(--_start, 0) - 0.5rem) 100%,
-    calc(var(--_start, 0) - 0.5rem) 0,
-    calc(100% - var(--_end, 0) + 0.5rem) 0,
-    100% 0, 100% 100%,
-    calc(100% - var(--_end, 0) + 0.5rem) 100%,
-    calc(100% - var(--_end, 0) + 0.5rem) 0
-  );
-}
-
-.slider:has(> [disabled])::before {
-  background: var(--active);
-}
-
-.slider:has([disabled]) {
-  opacity: 0.62;
-}
-
-.slider > span > i {
-  position: absolute;
-  block-size: auto;
-  inset: 0 auto 0 0.5rem;
-  color: var(--inverse-primary);
-  z-index: 1;
-}
-
-.slider:not(.medium, .large, .extra) > span > i {
-  display: none;
-}
-
-.slider.vertical > i {
-  transform: rotate(90deg);
-}
-
-// tooltips
-.slider > .tooltip {
-  visibility: hidden !important;
-  opacity: 0 !important;
-  inset: 0 auto auto calc(100% - var(--_end, 0));
-  border-radius: 2rem;
-  transition: top var(--speed2) ease, opacity var(--speed2) ease;
-  transform: translate(-50%, -25%) !important;
-  padding: 0.75rem 1rem;
-
-  &.bottom {
-    inset: auto auto 0 calc(100% - var(--_end, 0));
-    transition: bottom var(--speed2) ease, opacity var(--speed2) ease;
-    transform: translate(-50%, 25%) !important;
-  }
-
-  &::before {
-    content: var(--_value1);
-  }
-}
-
-[dir="rtl"] .slider > .tooltip {
-  transform: translate(-50%, -25%) scaleX(-1) !important;
-}
-
-[dir="rtl"] .slider > .tooltip.bottom {
-  transform: translate(-50%, 25%) scaleX(-1) !important;
-}
-
-.slider > .tooltip + .tooltip {
-  inset: 0.25rem calc(100% - var(--_start, 0)) auto auto;
-  transform: translate(50%, -25%) !important;
-
-  &.bottom {
-    inset: auto calc(100% - var(--_start, 0)) -0.25rem auto;
-    transform: translate(50%, 25%) !important;
-  }
-
-  &::before {
-    content: var(--_value2);
-  }
-}
-
-[dir="rtl"] .slider > .tooltip + .tooltip {
-  transform: translate(50%, -25%) scaleX(-1) !important;
-}
-
-[dir="rtl"] .slider > .tooltip + .tooltip.bottom {
-  transform: translate(50%, 25%) scaleX(-1) !important;
-}
-
-.slider > :focus ~ .tooltip {
-  inset-block: -1rem auto;
-  opacity: 1 !important;
-  visibility: visible !important;
-
-  &.bottom {
-    inset-block: auto -1rem;
-  }
-}
-
-.slider.vertical > .tooltip {
-  inset-block: auto;
-  block-size: 2.5rem;
-  inline-size: 2.5rem;
-  margin-block: calc(-1 * var(--_thumb, 0)) 0 !important;
-  transform: rotate(90deg) translate(-75%, 50%) !important;
-
-  &.bottom {
-    inset-block: auto;
-    margin-block: 0 calc(-1 * var(--_thumb, 0)) !important;
-    transform: rotate(90deg) translate(75%, 50%) !important;
-  }
-}
-
-.slider.vertical > .tooltip + .tooltip {
-  transform: rotate(90deg) translate(-75%, -50%) !important;
-
-  &.bottom {
-    transform: rotate(90deg) translate(75%, -50%) !important;
-  }
-}
-
-:is(nav, .row, .field) > .slider:not(.circle, .small, .medium, .large) {
-  flex: auto;
-}
-
-// .slider.max — container-filling variant
-.slider.max,
-.slider.max.vertical,
-.slider.max > input,
-.slider.max.vertical > input {
-  all: unset;
-  margin: 0 !important;
-  position: absolute;
-  color: var(--primary);
-  inset: 0;
-  border-radius: inherit;
-  overflow: hidden;
-  z-index: 2;
-  cursor: grab;
-  inline-size: 100%;
-  block-size: 100%;
-}
-
-.slider.max::before {
-  display: none;
-}
-
-.slider.max.vertical > input {
-  writing-mode: vertical-lr;
-  transform: rotate(-180deg);
-}
-
-.slider.max > input::-webkit-slider-thumb,
-.slider.max > input::-moz-range-thumb {
-  opacity: 0;
-  inline-size: 1rem;
-  block-size: 100vh;
-  transform: none !important;
-}
-
-.slider.max > span:not([class]) {
-  block-size: auto !important;
-  inset: 0 var(--_end) 0 var(--_start);
-  background: currentcolor;
-  color: inherit;
-  border-radius: 0;
-}
-
-.slider.max.vertical > span:not([class]) {
-  inset: var(--_end) 0 var(--_start) 0;
-}
-
-.slider > input:focus-visible::-webkit-slider-thumb,
-.slider > input:focus-visible::-moz-range-thumb {
-  outline: 0.1875rem solid var(--primary);
-  outline-offset: 0.25rem;
-}
-
-.slider.max > input:focus-visible {
-  outline: 0.1875rem solid var(--primary);
-  outline-offset: -0.125rem;
-}
-
-@media (pointer: coarse) {
-  .slider > :hover ~ .tooltip {
-    inset-block: -1rem auto !important;
-    opacity: 1 !important;
-    visibility: visible !important;
-  }
-
-  .slider > :hover ~ .tooltip.bottom {
-    inset-block: auto -1rem !important;
-  }
-}

package/src/styles/elements/_snackbars.scss

@@ -1,44 +0,0 @@
-// .snackbar — bottom-aligned transient banner. .top relocates above.
-
-.snackbar {
-  position: fixed;
-  inset: auto auto 6rem 50%;
-  inline-size: 80%;
-  block-size: auto;
-  z-index: 200;
-  visibility: hidden;
-  display: flex;
-  box-shadow: var(--elevate2);
-  color: var(--inverse-on-surface);
-  background-color: var(--inverse-surface);
-  padding: 1rem;
-  cursor: pointer;
-  text-align: start;
-  align-items: center;
-  border-radius: 0.25rem;
-  gap: 0.5rem;
-  transition: all var(--speed2);
-  transform: translate(-50%, 1rem);
-  opacity: 0;
-
-  &.top {
-    inset: 6rem auto auto 50%;
-  }
-
-  &.active,
-  &:popover-open {
-    visibility: visible;
-    transform: translate(-50%, 0);
-    opacity: 1;
-  }
-
-  > .max {
-    flex: auto;
-  }
-}
-
-@media only screen and (min-width: 993px) {
-  .snackbar {
-    inline-size: 40%;
-  }
-}

package/src/styles/elements/_tables.scss

@@ -1,67 +0,0 @@
-// table baseline + .border / .stripes / spacing modifiers.
-
-table {
-  inline-size: 100%;
-  border-spacing: 0;
-  font-size: 0.875rem;
-  text-align: start;
-
-  &.border > tbody > tr:not(:last-child) > td {
-    border-block-end: 0.0625rem solid var(--outline);
-  }
-
-  &.stripes > tbody > tr:nth-child(odd) {
-    background-color: var(--active);
-  }
-
-  &.no-space :is(th, td)     { padding: 0; }
-  &.medium-space :is(th, td) { padding: 0.75rem; }
-  &.large-space :is(th, td)  { padding: 1rem; }
-
-  > .fixed {
-    position: sticky;
-    z-index: 1;
-    inset-block-start: 0;
-  }
-}
-
-.scroll > table,
-table :is(thead, tbody, tfoot, tr, th, td) {
-  background-color: inherit;
-  color: inherit;
-}
-
-:is(th, td) {
-  inline-size: auto;
-  text-align: inherit;
-  padding: 0.5rem;
-  border-radius: 0;
-
-  > * {
-    vertical-align: middle;
-  }
-}
-
-thead > tr > th {
-  border-block-end: 0.0625rem solid var(--outline);
-}
-
-tfoot > tr > th {
-  border-block-start: 0.0625rem solid var(--outline);
-}
-
-th.fixed {
-  position: sticky;
-  z-index: 1;
-  inset-block-start: 0;
-}
-
-tfoot.fixed,
-tfoot th.fixed {
-  inset-block-end: 0;
-}
-
-:is(td, th).min {
-  inline-size: 0.1%;
-  white-space: nowrap;
-}

package/src/styles/elements/_tabs.scss

@@ -1,49 +0,0 @@
-// .tabs container with active-state underline.
-
-.tabs {
-  display: flex;
-  white-space: nowrap;
-  border-block-end: 0.0625rem solid var(--surface-variant);
-  border-radius: 0;
-
-  &:not(.left-align, .right-align, .center-align) {
-    justify-content: space-around;
-  }
-
-  > a {
-    display: flex;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--on-surface-variant);
-    padding: 0.5rem 1rem;
-    text-align: center;
-    min-block-size: 3rem;
-    inline-size: 100%;
-    gap: 0.25rem;
-
-    &.active,
-    &.active > i {
-      color: var(--primary);
-    }
-
-    &.active::before {
-      content: "";
-      position: absolute;
-      inset: auto 0 0 0;
-      block-size: 0.125rem;
-      background-color: var(--primary);
-    }
-  }
-
-  &.small > a { min-block-size: 2rem; }
-  &.large > a { min-block-size: 4rem; }
-
-  &.min > a.active::before {
-    margin: 0 auto;
-    max-inline-size: min(100%, 4rem);
-  }
-
-  &:is(.left-align, .center-align, .right-align) > a {
-    inline-size: auto;
-  }
-}

package/src/styles/elements/_tooltips.scss

@@ -1,125 +0,0 @@
-// .tooltip — hover/focus popup. Defaults above; .left/.right/.bottom reposition.
-
-.tooltip {
-  --_space: -0.5rem;
-  visibility: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  background-color: var(--inverse-surface);
-  color: var(--inverse-on-surface);
-  font-size: 0.75rem;
-  text-align: center;
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-  position: absolute;
-  z-index: 200;
-  inset: 0 auto auto 50%;
-  inline-size: auto;
-  white-space: nowrap;
-  font-weight: 500;
-  opacity: 0;
-  transition: all var(--speed2);
-  line-height: normal;
-  transform: translate(-50%, -100%) scale(0.9);
-
-  &:not(.max):hover {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  &.left {
-    inset: 50% auto auto 0;
-    transform: translate(-100%, -50%) scale(0.9);
-  }
-
-  &.right {
-    inset: 50% 0 auto auto;
-    transform: translate(100%, -50%) scale(0.9);
-  }
-
-  &.bottom {
-    inset: auto auto 0 50%;
-    transform: translate(-50%, 100%) scale(0.9);
-  }
-}
-
-$-tooltip-sizes: (
-  "small":  8rem,
-  "medium": 12rem,
-  "large":  16rem,
-);
-
-@each $name, $value in $-tooltip-sizes {
-  .tooltip.#{$name} {
-    inline-size: $value;
-    white-space: normal;
-  }
-}
-
-:hover > .tooltip {
-  visibility: visible;
-  opacity: 1;
-  transform: translate(-50%, -100%) scale(1);
-}
-
-:hover > .tooltip.left   { transform: translate(-100%, -50%) scale(1); }
-:hover > .tooltip.right  { transform: translate(100%, -50%) scale(1); }
-:hover > .tooltip.bottom { transform: translate(-50%, 100%) scale(1); }
-
-$-tooltip-spacing: (
-  "no":     0,
-  "medium": -1rem,
-  "large":  -1.5rem,
-);
-
-@each $name, $value in $-tooltip-spacing {
-  .tooltip.#{$name}-space {
-    --_space: #{$value};
-  }
-}
-
-.tooltip:not(.left, .right, .bottom) {
-  margin-block-start: var(--_space) !important;
-}
-
-.tooltip.left,
-.tooltip.right {
-  margin-inline: var(--_space) !important;
-}
-
-.tooltip.bottom {
-  margin-block-end: var(--_space) !important;
-}
-
-menu:active ~ .tooltip,
-:is(button, .button):focus > menu ~ .tooltip,
-.field > :focus ~ menu ~ .tooltip {
-  visibility: hidden;
-}
-
-.slider {
-  > .tooltip {
-    --_space: -1.25rem;
-  }
-
-  &.vertical > .tooltip {
-    --_space: -0.75rem;
-
-    &:is(.left, .right) {
-      --_space: -0.5rem;
-    }
-  }
-}
-
-.tooltip.max {
-  display: block;
-  font-size: inherit;
-  white-space: normal;
-  text-align: start;
-  inline-size: 20rem;
-  border-radius: 0.5rem;
-  padding: 1rem;
-  box-shadow: var(--elevate2);
-}

package/src/styles/helpers/_alignments.scss

@@ -1,29 +0,0 @@
-// Flex / text alignment utilities.
-
-@use "sass:map";
-
-$-alignments: (
-  "middle": center,
-  "bottom": flex-end,
-  "top": flex-start,
-);
-
-@each $name, $value in $-alignments {
-  .#{$name}-align {
-    display: flex;
-    align-items: $value !important;
-  }
-}
-
-$-justifications: (
-  "left": (text: start, justify: flex-start),
-  "right": (text: end, justify: flex-end),
-  "center": (text: center, justify: center),
-);
-
-@each $name, $values in $-justifications {
-  .#{$name}-align {
-    text-align: map.get($values, text);
-    justify-content: map.get($values, justify) !important;
-  }
-}

package/src/styles/helpers/_blurs.scss

@@ -1,26 +0,0 @@
-// Backdrop-blur surfaces with three sizes.
-
-[class*="blur"],
-[class*="blur"].light {
-  --_blur: 1rem;
-  -webkit-backdrop-filter: blur(var(--_blur));
-  backdrop-filter: blur(var(--_blur));
-  color: var(--on-surface);
-  background-color: rgb(255 255 255 / 0.5) !important;
-}
-
-.dark [class*="blur"],
-[class*="blur"].dark {
-  background-color: rgb(0 0 0 / 0.5) !important;
-}
-
-$-blur-sizes: (
-  "small": 0.5rem,
-  "large": 1.5rem,
-);
-
-@each $name, $value in $-blur-sizes {
-  .#{$name}-blur {
-    --_blur: #{$value};
-  }
-}