@stackific/md3 0.1.0 → 0.1.2

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

package/src/styles/elements/_icons.scss

@@ -1,70 +0,0 @@
-// Material-Symbols glyph base + size variants + filled variation axis.
-
-i,
-:is(.checkbox, .radio, .switch) > span::before,
-:is(.checkbox, .radio, .switch) > span > i {
-  --_size: 1.5rem;
-  font-family: var(--font-icon);
-  font-weight: normal;
-  font-style: normal;
-  font-size: var(--_size);
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-  vertical-align: middle;
-  text-align: center;
-  overflow: hidden;
-  inline-size: var(--_size);
-  min-inline-size: var(--_size);
-  block-size: var(--_size);
-  min-block-size: var(--_size);
-  box-sizing: content-box;
-  line-height: normal;
-  border-radius: 0;
-}
-
-i:has(.badge) { overflow: unset; }
-
-$-icon-sizes: (
-  "tiny":   1rem,
-  "small":  1.25rem,
-  "medium": 1.5rem,
-  "large":  1.75rem,
-  "extra":  2rem,
-);
-
-@each $name, $value in $-icon-sizes {
-  i.#{$name} { --_size: #{$value}; }
-}
-
-.chip > i { --_size: 1.25rem; }
-
-i.fill,
-a.active > i,
-button.active > i {
-  font-variation-settings: "FILL" 1;
-}
-
-i > :is(img, svg) {
-  inline-size: 100%;
-  block-size: 100%;
-  background-size: 100%;
-  border-radius: inherit;
-  position: absolute;
-  inset: 0 auto auto 0;
-  padding: inherit;
-}
-
-i[class*="fa-"] {
-  font-size: calc(var(--_size, 0) * 0.85);
-  line-height: normal;
-  block-size: auto;
-  min-block-size: auto;
-}

package/src/styles/elements/_layouts.scss

@@ -1,24 +0,0 @@
-// .absolute / .fixed positioning bundles with size variants.
-
-.absolute { position: absolute; }
-.fixed { position: fixed; }
-
-:is(.absolute, .fixed).left.right {
-  inline-size: auto;
-}
-
-$-layout-sizes: (
-  "small":  20rem,
-  "medium": 28rem,
-  "large":  44rem,
-);
-
-@each $name, $value in $-layout-sizes {
-  :is(.absolute, .fixed).left.right.#{$name} {
-    block-size: $value;
-  }
-
-  :is(.absolute, .fixed).top.bottom.#{$name} {
-    inline-size: $value;
-  }
-}

package/src/styles/elements/_lists.scss

@@ -1,76 +0,0 @@
-// .list — vertical row container with spacing tiers and optional borders.
-
-.list {
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  flex: 1;
-
-  > li,
-  > li > details > summary,
-  > 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: flex-start;
-    white-space: nowrap;
-    gap: 1rem;
-    min-block-size: 3.5rem;
-    padding: 0.5rem 1rem;
-    cursor: pointer;
-    flex: 1;
-  }
-
-  > li:has(ul, ol, details[open], a:only-child) {
-    padding: 0;
-  }
-
-  > li > .list {
-    padding: 0 0 0 1rem;
-  }
-
-  > li > *,
-  > li > a:only-child > * {
-    margin: 0;
-  }
-
-  > li > :is(details, .max),
-  > li > a:only-child > .max,
-  > li > details > summary > .max {
-    flex: 1;
-  }
-
-  &.border > li:not(:last-child)::before,
-  &.border > li > details[open] > summary::before {
-    content: "";
-    position: absolute;
-    background-color: var(--outline-variant);
-    inset: auto 0 0 0;
-    block-size: 0.0625rem;
-    inline-size: auto;
-  }
-
-  > li:focus-visible,
-  > li > a:only-child:focus-visible {
-    outline: 0.125rem solid var(--primary);
-    outline-offset: -0.25rem;
-  }
-}
-
-$-list-spacing: (
-  "no":     2.5rem,
-  "medium": 4.5rem,
-  "large":  5.5rem,
-);
-
-@each $name, $value in $-list-spacing {
-  .list.#{$name}-space > li,
-  .list.#{$name}-space > li > details > summary {
-    min-block-size: $value;
-  }
-}

package/src/styles/elements/_main-layouts.scss

@@ -1,45 +0,0 @@
-// Page-level grid that wires <header>, <main>, <footer>, and edge <nav> slots.
-
-:has(> main) {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
-  grid-template-areas:
-    "left top    right"
-    "left header right"
-    "left main   right"
-    "left footer right"
-    "left bottom right";
-  min-block-size: 100dvh;
-  box-sizing: border-box;
-  background-color: var(--surface);
-}
-
-$-grid-areas: (
-  "nav.left":   left,
-  "nav.right":  right,
-  "nav.top":    top,
-  "nav.bottom": bottom,
-  "header":     header,
-  "footer":     footer,
-);
-
-@each $selector, $area in $-grid-areas {
-  #{$selector} {
-    grid-area: $area;
-  }
-}
-
-main {
-  --_padding: 0.5rem;
-  grid-area: main;
-  padding: var(--_padding);
-  overflow: clip;
-}
-
-aside {
-  z-index: 1;
-
-  &:not(.fixed, .absolute).right { float: right; }
-  &:not(.fixed, .absolute).left { float: left; }
-}