@stackific/md3 0.1.0

package/src/styles/elements/_dialogs.scss

@@ -0,0 +1,143 @@
+// <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

@@ -0,0 +1,46 @@
+// <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

@@ -0,0 +1,19 @@
+// <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

@@ -0,0 +1,458 @@
+// .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

@@ -0,0 +1,35 @@
+// 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; }
+    }
+  }
+}