@expressivecss/expressive 0.1.0-alpha.3 → 0.2.0

package/src/sass/components/forms/_range.scss

@@ -0,0 +1,310 @@
+@use "../../abstracts" as *;
+
+// Sliders (range).
+//
+// Anatomy is the HTML. An <input type="range"> is the control. A wrapping
+// <label> (or .range / .range-field) is the host for the value label.
+// .slider is the carousel — do not put it on a range.
+// Helpers: .vertical, .small, .large. There is no required <span>.
+//
+// Tokens follow https://m3.material.io/components/sliders/specs (Expressive)
+//   track      16dp, fully rounded
+//   gap        6dp between handle and each track
+//   active     primary
+//   inactive   secondary-container
+//   handle     4×44dp, fully rounded, primary; 2dp when pressed
+//   state      40dp, 8% hover / 10% focus
+//   label      inverse-surface / inverse-on-surface, body-small
+//   disabled   38%
+//
+// Range.Init() (import-time) sets --md-comp-slider-active-fraction so
+// the active track can follow the value. Not in AutoInit(). Dual-handle
+// range and discrete ticks are not implemented.
+
+.range,
+.range-field,
+label:has(> [type="range"]) {
+  --md-comp-slider-track-height: 16px;
+  --md-comp-slider-handle-width: 4px;
+  --md-comp-slider-handle-width-pressed: 2px;
+  --md-comp-slider-handle-height: 44px;
+  --md-comp-slider-gap: 6px;
+  --md-comp-slider-active-track-color: var(--md-sys-color-primary);
+  --md-comp-slider-inactive-track-color: var(--md-sys-color-secondary-container);
+  --md-comp-slider-handle-color: var(--md-sys-color-primary);
+  --md-comp-slider-gradient: to right;
+
+  position: relative;
+  display: block;
+  overflow: visible;
+  color: var(--md-sys-color-on-surface);
+  @include typescale("body-large");
+  font-family: $font-stack;
+}
+
+.range.small,
+.range-field.small,
+label.small:has(> [type="range"]),
+.range.small [type="range"],
+.range-field.small [type="range"],
+label.small > [type="range"] {
+  --md-comp-slider-track-height: 8px;
+  --md-comp-slider-handle-height: 32px;
+}
+
+.range.large,
+.range-field.large,
+label.large:has(> [type="range"]),
+.range.large [type="range"],
+.range-field.large [type="range"],
+label.large > [type="range"] {
+  --md-comp-slider-track-height: 24px;
+  --md-comp-slider-handle-height: 52px;
+}
+
+.range.vertical,
+.range-field.vertical,
+label.vertical:has(> [type="range"]) {
+  --md-comp-slider-gradient: to top;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  width: auto;
+}
+
+.range.vertical [type="range"],
+.range-field.vertical [type="range"],
+label.vertical > [type="range"] {
+  --md-comp-slider-gradient: to top;
+}
+
+input[type="range"] {
+  --md-comp-slider-track-height: 16px;
+  --md-comp-slider-handle-width: 4px;
+  --md-comp-slider-handle-width-pressed: 2px;
+  --md-comp-slider-handle-height: 44px;
+  --md-comp-slider-gap: 6px;
+  --md-comp-slider-active-track-color: var(--md-sys-color-primary);
+  --md-comp-slider-inactive-track-color: var(--md-sys-color-secondary-container);
+  --md-comp-slider-handle-color: var(--md-sys-color-primary);
+  --md-comp-slider-gradient: to right;
+  --md-comp-slider-active-fraction: 0%;
+
+  appearance: none;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: var(--md-comp-slider-handle-height);
+  margin: 8px 0;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  cursor: grab;
+  outline: none;
+  accent-color: var(--md-comp-slider-active-track-color);
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.38;
+  }
+}
+
+.range.vertical > [type="range"],
+.range-field.vertical > [type="range"],
+label.vertical > [type="range"] {
+  writing-mode: vertical-lr;
+  direction: rtl;
+  width: var(--md-comp-slider-handle-height);
+  height: 200px;
+  margin: 0 8px;
+}
+
+// Gap around the handle so the tracks do not run under it (M3 stop gap).
+@mixin range-track-fill {
+  background-image: linear-gradient(
+    var(--md-comp-slider-gradient),
+    var(--md-comp-slider-active-track-color)
+      max(0%, calc(var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2)),
+    transparent
+      max(0%, calc(var(--md-comp-slider-active-fraction) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2)),
+    transparent
+      min(100%, calc(var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2)),
+    var(--md-comp-slider-inactive-track-color)
+      min(100%, calc(var(--md-comp-slider-active-fraction) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2))
+  );
+}
+
+@mixin range-track {
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--md-comp-slider-track-height);
+  border: none;
+  border-radius: calc(var(--md-comp-slider-track-height) / 2);
+  background-color: transparent;
+}
+
+@mixin range-track-vertical {
+  width: var(--md-comp-slider-track-height);
+  height: 100%;
+}
+
+@mixin range-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  border: none;
+  width: var(--md-comp-slider-handle-width);
+  height: var(--md-comp-slider-handle-height);
+  border-radius: calc(var(--md-comp-slider-handle-width) / 2);
+  background: var(--md-comp-slider-handle-color);
+  box-shadow: none;
+  cursor: grab;
+  transition: box-shadow .2s ease, width .15s ease, height .15s ease;
+}
+
+@mixin range-thumb-vertical {
+  width: var(--md-comp-slider-handle-height);
+  height: var(--md-comp-slider-handle-width);
+  border-radius: calc(var(--md-comp-slider-handle-width) / 2);
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  @include range-track;
+  @include range-track-fill;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  @include range-thumb;
+  margin-top: calc((var(--md-comp-slider-track-height) - var(--md-comp-slider-handle-height)) / 2);
+}
+
+input[type="range"]:hover:not(:disabled)::-webkit-slider-thumb {
+  box-shadow: 0 0 0 18px color-mix(in oklab, var(--md-comp-slider-handle-color) 8%, transparent);
+}
+
+.keyboard-focused input[type="range"]:focus:not(:disabled)::-webkit-slider-thumb,
+input[type="range"]:focus-visible:not(:disabled)::-webkit-slider-thumb {
+  box-shadow: 0 0 0 18px color-mix(in oklab, var(--md-comp-slider-handle-color) 10%, transparent);
+}
+
+input[type="range"]:active:not(:disabled)::-webkit-slider-thumb {
+  width: var(--md-comp-slider-handle-width-pressed);
+}
+
+.range.vertical > [type="range"]::-webkit-slider-runnable-track,
+.range-field.vertical > [type="range"]::-webkit-slider-runnable-track,
+label.vertical > [type="range"]::-webkit-slider-runnable-track {
+  @include range-track-vertical;
+  // writing-mode does not swap physical width/height on these pseudos.
+  // Center the 16dp track inside the 44dp-wide input.
+  margin-left: calc((var(--md-comp-slider-handle-height) - var(--md-comp-slider-track-height)) / 2);
+}
+
+.range.vertical > [type="range"]::-webkit-slider-thumb,
+.range-field.vertical > [type="range"]::-webkit-slider-thumb,
+label.vertical > [type="range"]::-webkit-slider-thumb {
+  @include range-thumb-vertical;
+  margin-top: 0;
+  margin-left: calc((var(--md-comp-slider-track-height) - var(--md-comp-slider-handle-height)) / 2);
+}
+
+.range.vertical > [type="range"]:active:not(:disabled)::-webkit-slider-thumb,
+.range-field.vertical > [type="range"]:active:not(:disabled)::-webkit-slider-thumb,
+label.vertical > [type="range"]:active:not(:disabled)::-webkit-slider-thumb {
+  width: var(--md-comp-slider-handle-height);
+  height: var(--md-comp-slider-handle-width-pressed);
+}
+
+input[type="range"]::-moz-range-track {
+  @include range-track;
+  @include range-track-fill;
+}
+
+input[type="range"]::-moz-range-thumb {
+  @include range-thumb;
+}
+
+input[type="range"]:hover:not(:disabled)::-moz-range-thumb {
+  box-shadow: 0 0 0 18px color-mix(in oklab, var(--md-comp-slider-handle-color) 8%, transparent);
+}
+
+.keyboard-focused input[type="range"]:focus:not(:disabled)::-moz-range-thumb,
+input[type="range"]:focus-visible:not(:disabled)::-moz-range-thumb {
+  box-shadow: 0 0 0 18px color-mix(in oklab, var(--md-comp-slider-handle-color) 10%, transparent);
+}
+
+input[type="range"]:active:not(:disabled)::-moz-range-thumb {
+  width: var(--md-comp-slider-handle-width-pressed);
+}
+
+.range.vertical > [type="range"]::-moz-range-track,
+.range-field.vertical > [type="range"]::-moz-range-track,
+label.vertical > [type="range"]::-moz-range-track {
+  @include range-track-vertical;
+  margin-left: calc((var(--md-comp-slider-handle-height) - var(--md-comp-slider-track-height)) / 2);
+}
+
+.range.vertical > [type="range"]::-moz-range-thumb,
+.range-field.vertical > [type="range"]::-moz-range-thumb,
+label.vertical > [type="range"]::-moz-range-thumb {
+  @include range-thumb-vertical;
+  margin-left: calc((var(--md-comp-slider-track-height) - var(--md-comp-slider-handle-height)) / 2);
+}
+
+.range.vertical > [type="range"]:active:not(:disabled)::-moz-range-thumb,
+.range-field.vertical > [type="range"]:active:not(:disabled)::-moz-range-thumb,
+label.vertical > [type="range"]:active:not(:disabled)::-moz-range-thumb {
+  width: var(--md-comp-slider-handle-height);
+  height: var(--md-comp-slider-handle-width-pressed);
+}
+
+// Value label — M3 labeled slider. The JS plugin inserts this after the input.
+input[type="range"] + .thumb {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  min-height: 28px;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 14px;
+  background-color: var(--md-sys-color-inverse-surface);
+  color: var(--md-sys-color-inverse-on-surface);
+  pointer-events: none;
+  opacity: 0;
+  transform: translate(-50%, calc(-100% - 12px)) scale(0.9);
+  transform-origin: center bottom;
+  transition: opacity .15s ease, transform .15s ease;
+  @include typescale("body-small");
+
+  .value {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  &.active {
+    opacity: 1;
+    transform: translate(-50%, calc(-100% - 12px)) scale(1);
+  }
+}
+
+.range.vertical > [type="range"] + .thumb,
+.range-field.vertical > [type="range"] + .thumb,
+label.vertical > [type="range"] + .thumb {
+  transform: translate(calc(100% + 12px), -50%) scale(0.9);
+  transform-origin: left center;
+
+  &.active {
+    transform: translate(calc(100% + 12px), -50%) scale(1);
+  }
+}

package/src/sass/components/forms/_select.scss

@@ -0,0 +1,103 @@
+@use "../../abstracts" as *;
+
+select.browser-default {
+  opacity: 1;
+  color: var(--md-sys-color-on-background);
+}
+
+// TODO: Change to ".select" and not use tag name directly
+// Keep selects useable without javascript
+
+select {
+  background-color: var(--md-sys-color-surface);
+  width: 100%;
+  padding: 5px;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 2px;
+  height: 3rem;
+}
+
+.select-wrapper:focus-within {
+  outline: 2px solid var(--md-sys-color-primary);
+  border-radius: 4px;
+}
+
+.select-wrapper {
+  position: relative;
+
+  .caret {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    z-index: 0;
+    fill: var(--md-sys-color-on-background);
+    pointer-events: none;
+  }
+
+  // Hide select with overflow hidden instead of using display none
+  // (this prevents form validation errors with hidden form elements)
+  .hide-select {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    z-index: -1;
+  }
+}
+
+select:disabled {
+  color: var(--md-sys-color-on-surface);
+}
+
+.select-wrapper.disabled {
+  + label {
+    color: var(--md-sys-color-on-surface);
+  }
+  .caret {
+    fill: var(--md-sys-color-on-surface);
+  }
+}
+
+.select-wrapper input.select-dropdown:disabled {
+  color: var(--md-sys-color-on-surface);
+  cursor: default;
+  user-select: none;
+}
+
+.select-wrapper i {
+  color: var(--md-sys-color-on-surface);
+}
+
+.select-dropdown li.disabled,
+.select-dropdown li.disabled > span,
+.select-dropdown li.optgroup {
+  color: var(--md-sys-color-on-surface);
+  //background-color: transparent;
+}
+
+// Icons
+.select-dropdown li {
+  img {
+    height: $dropdown-item-height - 10;
+    width: $dropdown-item-height - 10;
+    margin: 5px 15px;
+    float: right;
+  }
+}
+
+// Optgroup styles
+.select-dropdown li.optgroup {
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
+  &.selected > span {
+    color: var(--md-sys-color-on-background);
+  }
+  & > span {
+    color: var(--md-sys-color-on-surface-variant);
+  }
+  & ~ li.optgroup-option {
+    padding-left: 1rem;
+  }
+}

package/src/sass/components/forms/_switches.scss

@@ -0,0 +1,239 @@
+@use "../../abstracts" as *;
+
+// Switches.
+//
+// Anatomy is the HTML. A <label class="switch"> wrapping
+// <input type="checkbox"> is the control. The label text is a sibling of
+// the input — no .lever required. input + .lever and input + span still
+// work (legacy / BeerCSS).
+//
+// Tokens follow https://m3.material.io/components/switch/specs
+//   track          52×32dp, 16dp corners
+//   unselected     surface-variant + 2dp outline, 16dp handle
+//   selected       primary track, 24dp on-primary handle
+//   state layer    40dp, 8% hover / 10% focus
+//   touch target   48dp
+//   label          body-large / on-surface
+//   disabled       38%
+
+.switch {
+  --md-comp-switch-track-width: 52px;
+  --md-comp-switch-track-height: 32px;
+  --md-comp-switch-handle-unselected: 16px;
+  --md-comp-switch-handle-selected: 24px;
+
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 48px;
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  color: var(--md-sys-color-on-surface);
+  @include typescale("body-large");
+  font-family: $font-stack;
+}
+
+.switch label {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+
+// Hide the native control only when a following span/lever draws the track.
+.switch [type="checkbox"]:has(+ .lever),
+.switch [type="checkbox"]:has(+ span) {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+// Paint the switch on the checkbox when there is no lever/span.
+.switch [type="checkbox"]:not(:has(+ .lever)):not(:has(+ span)) {
+  appearance: none;
+  position: static;
+  opacity: 1;
+  pointer-events: auto;
+  flex: 0 0 var(--md-comp-switch-track-width);
+  box-sizing: border-box;
+  width: var(--md-comp-switch-track-width);
+  height: var(--md-comp-switch-track-height);
+  margin: 0;
+  padding: 0;
+  border: 2px solid var(--md-sys-color-outline);
+  border-radius: 16px;
+  background-color: var(--md-sys-color-surface-variant);
+  background-image: radial-gradient(
+    circle,
+    var(--md-sys-color-outline) 0 8px,
+    transparent 8.5px
+  );
+  background-repeat: no-repeat;
+  background-position: 8px center;
+  cursor: pointer;
+  transition: background-color .2s ease, background-position .2s ease,
+    background-size .2s ease, border-color .2s ease, box-shadow .2s ease;
+
+  &:checked {
+    border-color: var(--md-sys-color-primary);
+    background-color: var(--md-sys-color-primary);
+    background-image: radial-gradient(
+      circle,
+      var(--md-sys-color-on-primary) 0 12px,
+      transparent 12.5px
+    );
+    background-position: calc(100% - 14px) center;
+  }
+
+  &:hover {
+    box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  }
+
+  &:checked:hover {
+    box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+  }
+
+  &:focus-visible,
+  &.tabbed:focus {
+    box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+    outline: none;
+  }
+
+  &:disabled {
+    opacity: 0.38;
+    box-shadow: none;
+    cursor: default;
+  }
+}
+
+.switch:has(> [type="checkbox"]:disabled),
+.switch:has([type="checkbox"]:disabled) label {
+  color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  cursor: default;
+}
+
+// Legacy / BeerCSS: input + .lever or input + span draws the same anatomy.
+.switch [type="checkbox"] + .lever,
+.switch [type="checkbox"] + span {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  width: var(--md-comp-switch-track-width);
+  height: var(--md-comp-switch-track-height);
+  margin: 0;
+  padding: 0;
+  border: 2px solid var(--md-sys-color-outline);
+  border-radius: 16px;
+  background-color: var(--md-sys-color-surface-variant);
+  vertical-align: middle;
+  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease,
+      background-color .2s ease, transform .2s ease;
+  }
+
+  &::after {
+    background-color: var(--md-sys-color-outline);
+  }
+}
+
+.switch [type="checkbox"]:checked + .lever,
+.switch [type="checkbox"]:checked + span {
+  border-color: var(--md-sys-color-primary);
+  background-color: var(--md-sys-color-primary);
+
+  &::before,
+  &::after {
+    top: 2px;
+    left: 22px;
+    width: 24px;
+    height: 24px;
+  }
+
+  &::after {
+    background-color: var(--md-sys-color-on-primary);
+  }
+}
+
+.switch [type="checkbox"]:hover + .lever,
+.switch [type="checkbox"]:hover + span {
+  box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+}
+
+.switch [type="checkbox"]:checked:hover + .lever,
+.switch [type="checkbox"]:checked:hover + span {
+  box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+}
+
+.switch [type="checkbox"]:focus-visible + .lever,
+.switch [type="checkbox"].tabbed:focus + .lever,
+.switch [type="checkbox"]:focus-visible + span,
+.switch [type="checkbox"].tabbed:focus + span {
+  box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+}
+
+.switch [type="checkbox"]:disabled + .lever,
+.switch [type="checkbox"]:disabled + span {
+  opacity: 0.38;
+  box-shadow: none;
+  cursor: default;
+}
+
+// BeerCSS: span holds the label text as well as the track.
+.switch [type="checkbox"] + span:not(.lever):not(:empty) {
+  width: auto;
+  min-width: var(--md-comp-switch-track-width);
+  height: auto;
+  min-height: var(--md-comp-switch-track-height);
+  padding-left: calc(var(--md-comp-switch-track-width) + 12px);
+  border: 0;
+  background-color: transparent;
+  border-radius: 0;
+
+  &::before {
+    border: 2px solid var(--md-sys-color-outline);
+    background-color: var(--md-sys-color-surface-variant);
+    box-sizing: border-box;
+    width: var(--md-comp-switch-track-width);
+    height: var(--md-comp-switch-track-height);
+    border-radius: 16px;
+    top: 0;
+    left: 0;
+  }
+
+  &::after {
+    top: 8px;
+    left: 8px;
+  }
+}
+
+.switch [type="checkbox"]:checked + span:not(.lever):not(:empty) {
+  background-color: transparent;
+  border-color: transparent;
+
+  &::before {
+    border-color: var(--md-sys-color-primary);
+    background-color: var(--md-sys-color-primary);
+  }
+
+  &::after {
+    top: 4px;
+    left: 24px;
+  }
+}

package/src/sass/expressive.scss

@@ -0,0 +1,60 @@
+@charset "UTF-8";
+
+// ExpressiveCSS entry point.
+//
+// This is the only place cascade order is decided, so a rule's position is
+// always answerable from this file. Layers:
+//
+//   abstracts  - variables, functions, mixins. Emits nothing, so it is not a
+//                cascade layer at all; partials pull it in with
+//                `@use "../abstracts" as *;`. Forwarded below so that
+//                downstream projects consuming this file keep access to the
+//                breakpoint mixins, z-depth() and btn-*.
+//   tokens     - :root custom properties (M3 reference palette + theme).
+//   base       - normalize, element defaults, typography, grid.
+//   components - widgets.
+//   utilities  - helper classes.
+//
+// Order used to be expressed purely as @forward order, with utilities emitted
+// before components so a component rule would win at equal specificity. It is
+// now a real @layer list, which changes three things:
+//
+//   1. Utilities moved after components. Layer order beats specificity
+//      outright, so a helper class now wins over a component rule without
+//      needing to out-specify it.
+//   2. Unlayered CSS beats every layer. A consumer can override any component
+//      with a plain `.btn { ... }` - no specificity war, no load-order
+//      dependence on where the framework sits in their bundle.
+//   3. !important is NOT dropped from utilities. Layer order reverses for
+//      important declarations, so an important rule inside `utilities` would
+//      also beat a consumer's own !important - but a *normal* rule in a layer
+//      loses to any unlayered consumer rule. Since `.hide`, `.m-3` and the
+//      palette classes exist precisely to be unconditional, they keep their
+//      flags and keep winning. Dropping them would silently make `.hide` lose
+//      to any unlayered `display` the consumer had already written.
+//
+// @forward cannot appear inside @layer, so each layer is pulled in with
+// meta.load-css() instead. abstracts emits no CSS, so loading it separately
+// below duplicates nothing.
+
+@use "sass:meta";
+
+@forward "abstracts";
+
+@layer tokens, base, components, utilities;
+
+@layer tokens {
+  @include meta.load-css("tokens");
+}
+
+@layer base {
+  @include meta.load-css("base");
+}
+
+@layer components {
+  @include meta.load-css("components");
+}
+
+@layer utilities {
+  @include meta.load-css("utilities");
+}