@stackific/md3 0.1.1 → 0.1.3

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

package/src/styles/elements/_fields.scss

@@ -1,458 +0,0 @@
-// .field — form-input wrapper. By far the largest single component
-// (handles size, fill, border, round, prefix/suffix, label, invalid, helper).
-// Reuse opportunities: size scale, side-icon positioning, focus/disabled states.
-
-@use "sass:list";
-@use "sass:map";
-
-.field {
-  --_input: 3rem;
-  --_start: 1.2rem;
-  --_middle: calc(var(--_input, 0) / 2);
-  border-radius: 0.25rem 0.25rem 0 0;
-  min-block-size: var(--_input);
-  display: flex;
-  flex-direction: column;
-
-  &.fill {
-    --_background: var(--surface-variant);
-    background-color: unset !important;
-    color: unset !important;
-
-    > :is(input, select, textarea) {
-      background-color: var(--_background);
-      z-index: 0;
-    }
-  }
-
-  &.border {
-    border-radius: 0.25rem;
-  }
-
-  &.invalid > i {
-    color: var(--error);
-  }
-
-  > progress.circle {
-    border-width: 0.1875rem;
-  }
-}
-
-$-field-sizes: (
-  "small": (input: 2.5rem, start: 1rem),
-  "large": (input: 3.5rem, start: 1.4rem),
-  "extra": (input: 4rem,   start: 1.6rem),
-);
-
-@each $name, $values in $-field-sizes {
-  .field.#{$name} {
-    --_input: #{map.get($values, input)};
-    --_start: #{map.get($values, start)};
-  }
-}
-
-$-field-rounds: (
-  "small":   1.25rem,
-  "default": 1.5rem,
-  "large":   1.75rem,
-  "extra":   2rem,
-);
-
-@each $name, $value in $-field-rounds {
-  @if $name == "default" {
-    .field[class*="round"] {
-      border-radius: $value;
-    }
-  } @else {
-    .field[class*="round"].#{$name} {
-      border-radius: $value;
-    }
-  }
-}
-
-// icon — left/right side affordance
-.field {
-  > :is(i, img, svg, progress.circle, a) {
-    position: absolute;
-    inset: calc((var(--_input, 0) / 2) - 0.75rem) auto auto auto;
-    cursor: pointer;
-    z-index: 10;
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
-    margin: auto 0;
-    pointer-events: none;
-  }
-
-  > :is(a, .front) {
-    pointer-events: all !important;
-  }
-
-  > a > :is(i, img, svg, progress.circle, a) {
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
-  }
-}
-
-.field > :is(i, img, svg, progress.circle, a),
-[dir="rtl"] .field > :is(i, img, svg, progress.circle, a):first-child {
-  inset: calc(var(--_middle, 0) - 0.75rem) 1rem auto auto;
-}
-
-.field > :is(i, img, svg, progress.circle, a):first-child,
-[dir="rtl"] .field > :is(i, img, svg, progress.circle, a) {
-  inset: calc(var(--_middle, 0) - 0.75rem) auto auto 1rem;
-}
-
-// input, textarea, select
-.field > :is(input, textarea, select) {
-  all: unset;
-  position: relative;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  border-radius: inherit;
-  border: 0.0625rem solid transparent;
-  padding: 0 0.9375rem;
-  font-family: inherit;
-  font-size: 1rem;
-  min-block-size: var(--_input);
-  outline: none;
-  z-index: 1;
-  background: none;
-  resize: none;
-  text-align: start;
-  cursor: text;
-
-  &:focus {
-    border: 0.125rem solid transparent;
-    padding-inline: 0.875rem;
-  }
-}
-
-input::-webkit-date-and-time-value {
-  text-align: start;
-}
-
-:is(input, select, textarea):is(:-webkit-autofill, :autofill) {
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: var(--on-surface);
-}
-
-.field > textarea:not([rows]) {
-  field-sizing: content;
-  max-block-size: 12rem;
-}
-
-input[type="file"],
-input[type="color"],
-:not(.field) > input:is([type^="date"], [type^="time"], [type="month"], [type="week"]),
-input::-webkit-calendar-picker-indicator {
-  opacity: 0;
-  position: absolute;
-  inset: 0;
-  inline-size: 100%;
-  block-size: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  z-index: 2 !important;
-}
-
-@media (pointer: fine) {
-  .field > input::-webkit-calendar-picker-indicator {
-    z-index: -1 !important;
-  }
-}
-
-input::-webkit-search-decoration,
-input::-webkit-search-cancel-button,
-input::-webkit-search-results-button,
-input::-webkit-search-results-decoration,
-input::-webkit-inner-spin-button,
-input::-webkit-outer-spin-button {
-  display: none;
-}
-
-input[type="number"] {
-  appearance: textfield;
-}
-
-.field.border > :is(input, textarea, select) {
-  border-color: var(--outline);
-
-  &:focus {
-    border-color: var(--primary);
-  }
-}
-
-.field[class*="round"] > :is(input, textarea, select) {
-  padding-inline: 1.4376rem;
-
-  &:focus {
-    padding-inline: 1.375rem;
-  }
-}
-
-// prefix/suffix padding tweaks
-$-field-edges: (
-  "prefix": (padding-inline-start, margin-inline-start),
-  "suffix": (padding-inline-end, margin-inline-end),
-);
-
-@each $side, $props in $-field-edges {
-  $padded: list.nth($props, 1);
-  $margin: list.nth($props, 2);
-
-  .field.#{$side} > :is(input, textarea, select) {
-    #{$padded}: 2.9375rem;
-
-    &:focus {
-      #{$padded}: 2.875rem;
-    }
-  }
-
-  .field.#{$side} > .slider {
-    #{$margin}: 3.5rem;
-  }
-}
-
-.field:not(.border, [class*="round"]) > :is(input, textarea, select) {
-  border-block-end-color: var(--outline);
-
-  &:focus {
-    border-block-end-color: var(--primary);
-  }
-}
-
-.field[class*="round"]:not(.border, .fill) > :is(input, textarea, select),
-.field[class*="round"]:not(.border) > :is(input, textarea, select):focus {
-  box-shadow: var(--elevate1);
-}
-
-.field[class*="round"]:not(.border, .fill) > :is(input, textarea, select):focus {
-  box-shadow: var(--elevate2);
-}
-
-.field.invalid:not(.border, [class*="round"]) > :is(input, textarea, select),
-.field.invalid:not(.border, [class*="round"]) > :is(input, textarea, select):focus {
-  border-block-end-color: var(--error);
-}
-
-.field.invalid.border > :is(input, textarea, select),
-.field.invalid.border > :is(input, textarea, select):focus {
-  border-color: var(--error);
-}
-
-.field:has(> :disabled) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.field > :disabled {
-  cursor: not-allowed;
-}
-
-.field > select {
-  user-select: none;
-}
-
-@-moz-document url-prefix() {
-  .field > select:focus {
-    background-color: var(--surface);
-  }
-
-  .field.fill > select:focus {
-    background-color: var(--surface-variant);
-  }
-
-  .field > select:focus + label {
-    z-index: 1;
-  }
-}
-
-.field > select > option {
-  background-color: var(--surface);
-}
-
-.field > :is(input, select) {
-  padding-block-start: 1rem;
-}
-
-.field:not(.label) > :is(input, select),
-.field.border:not(.fill) > :is(input, select) {
-  padding-block-start: 0;
-}
-
-.field > textarea {
-  padding-block-start: var(--_start) !important;
-
-  &:focus {
-    padding-block-start: calc(var(--_start, 0) - 0.01rem) !important;
-  }
-}
-
-.field:not(.label) > textarea,
-.field.border:not(.fill) > textarea {
-  padding-block-start: calc(var(--_start, 0) - 0.5rem) !important;
-}
-
-.field:not(.label) > textarea:focus,
-.field.border:not(.fill) > textarea:focus {
-  padding-block-start: calc(var(--_start, 0) - 0.51rem) !important;
-}
-
-// label
-.field.label > label {
-  --_start: 1rem;
-  position: absolute;
-  inset: -0.5rem 0.9375rem 0 var(--_start);
-  display: flex;
-  block-size: calc(var(--_input, 0) + 1rem);
-  line-height: calc(var(--_input, 0) + 1rem);
-  font-size: 1rem;
-  transition: all 0.2s;
-  gap: 0.25rem;
-  white-space: nowrap;
-  pointer-events: none;
-}
-
-[dir="rtl"] .field.label > label {
-  inset: -0.5rem calc(var(--_start) - 0.0625rem) 0 0.9375rem;
-}
-
-.field.label[class*="round"] > label {
-  inset: -0.5rem 1.9375rem 0 var(--_start);
-}
-
-[dir="rtl"] .field.label[class*="round"] > label {
-  inset: -0.5rem var(--_start) 0 1.9375rem;
-}
-
-.field.label.border.prefix:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
-  --_start: 1rem;
-}
-
-.field.label[class*="round"] > label,
-.field.label.border.prefix[class*="round"]:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
-  --_start: 1.5rem;
-}
-
-.field.label.prefix > label {
-  --_start: 3rem;
-}
-
-.field.label > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
-  block-size: 2.5rem;
-  line-height: 2.5rem;
-  font-size: 0.75rem;
-}
-
-.field.label.border:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
-  block-size: 1rem;
-  line-height: 1rem;
-}
-
-.field.label.border:not(.fill) > label::after {
-  content: "";
-  display: block;
-  margin: 0.5rem 0 0 0;
-  border-block-start: 0.0625rem solid var(--outline);
-  block-size: 1rem;
-  transition: none;
-  flex: auto;
-}
-
-.field.label.border:not(.fill) > :focus + label::after {
-  border-block-start: 0.125rem solid var(--primary);
-}
-
-.field.label.border:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
-.field.label.border:not(.fill) > select {
-  clip-path: polygon(-2% -2%, 0.75rem -2%, 0.75rem 0.5rem, calc(100% - 1rem) 0.5rem, calc(100% - 1rem) -2%, 102% -2%, 102% 102%, -2% 102%);
-}
-
-[dir="rtl"] .field.label.border:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
-[dir="rtl"] .field.label.border:not(.fill) > select {
-  clip-path: polygon(-2% -2%, 1rem -2%, 1rem 0.5rem, calc(100% - 0.75rem) 0.5rem, calc(100% - 0.75rem) -2%, 102% -2%, 102% 102%, -2% 102%);
-}
-
-.field.label.border[class*="round"]:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
-.field.label.border[class*="round"]:not(.fill) > select {
-  clip-path: polygon(-2% -2%, 1.25rem -2%, 1.25rem 0.5rem, calc(100% - 2rem) 0.5rem, calc(100% - 2rem) -2%, 102% -2%, 102% 102%, -2% 102%);
-}
-
-[dir="rtl"] .field.label.border[class*="round"]:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
-[dir="rtl"] .field.label.border[class*="round"]:not(.fill) > select {
-  clip-path: polygon(-2% -2%, 2rem -2%, 2rem 0.5rem, calc(100% - 1.25rem) 0.5rem, calc(100% - 1.25rem) -2%, 102% -2%, 102% 102%, -2% 102%);
-}
-
-.field.label > :focus + label {
-  color: var(--primary);
-}
-
-.field.label.invalid > label,
-.field.label.invalid > label::after {
-  color: var(--error) !important;
-  border-color: var(--error) !important;
-}
-
-.field.label > label > a {
-  block-size: inherit;
-  line-height: inherit;
-  inline-size: 1rem;
-
-  > :is(i, img, svg) {
-    block-size: 1rem;
-    line-height: 1rem;
-    inline-size: 1rem;
-    font-size: 1rem;
-  }
-}
-
-// helper output
-.field > output {
-  display: inline-block;
-  font-size: 0.75rem;
-  background: none !important;
-  padding: 0.25rem 1rem;
-  line-height: 1.25rem;
-  align-self: start;
-
-  &.invalid {
-    color: var(--error) !important;
-  }
-}
-
-.field[class*="round"] > output {
-  padding: 0.25rem 1.5rem;
-}
-
-.field.invalid > output:not(.invalid),
-.field:not(.invalid) > output.invalid {
-  display: none;
-}
-
-.field.invalid > output.invalid ~ menu,
-.field:not(.invalid) > output:not(.invalid) ~ menu {
-  inset: auto auto 1.75rem 0;
-}
-
-table td > .field {
-  margin: 0;
-}
-
-fieldset {
-  border-radius: 0.25rem;
-  padding: 1rem;
-  border: 0.0625rem solid var(--outline-variant);
-
-  > legend {
-    margin: 0 -0.25rem;
-    padding: 0 0.25rem;
-
-    + * {
-      margin-block-start: 0 !important;
-    }
-  }
-}

package/src/styles/elements/_grids.scss

@@ -1,35 +0,0 @@
-// 12-column grid with .s1-12 / .m1-12 / .l1-12 span classes.
-// Per-breakpoint sets emitted via a single @each over $-grid-breakpoints.
-
-.grid {
-  --_gap: 1rem;
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  gap: var(--_gap);
-  block-size: auto;
-
-  > * {
-    margin: 0;
-  }
-
-  &.no-space     { --_gap: 0rem; }
-  &.medium-space { --_gap: 1.5rem; }
-  &.large-space  { --_gap: 2rem; }
-}
-
-@for $i from 1 through 12 {
-  .s#{$i} { grid-area: auto/span $i; }
-}
-
-$-grid-breakpoints: (
-  "m": 601px,
-  "l": 993px,
-);
-
-@each $prefix, $min in $-grid-breakpoints {
-  @media only screen and (min-width: #{$min}) {
-    @for $i from 1 through 12 {
-      .#{$prefix}#{$i} { grid-area: auto/span $i; }
-    }
-  }
-}