@expressivecss/expressive 0.15.0 → 0.17.0

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

@@ -33,16 +33,8 @@ label:has(> [type="checkbox"]):not(.switch),
   --md-comp-checkbox-state-layer-size: 40px;
 
   position: relative;
-  display: 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");
+  @include selection-control-label;
 }
 
 // A row of checkboxes is a group of controls, not navigation - see rule 4 in
@@ -66,18 +58,11 @@ label:has(> [type="checkbox"]):not(.switch),
 // do not write :has(:not(:has(+ span))).
 label:has(> [type="checkbox"]):not(.switch) > [type="checkbox"],
 .checkbox > [type="checkbox"] {
-  appearance: none;
-  flex: 0 0 var(--md-comp-checkbox-container-size);
-  box-sizing: border-box;
-  width: var(--md-comp-checkbox-container-size);
-  height: var(--md-comp-checkbox-container-size);
-  margin: 0;
-  padding: 0;
-  border: 2px solid var(--md-sys-color-on-surface-variant);
+  @include selection-control(var(--md-comp-checkbox-container-size), var(--md-comp-checkbox-container-size), var(--md-sys-color-on-surface-variant));
   border-radius: var(--md-comp-checkbox-container-shape);
   background-color: transparent;
   cursor: pointer;
-  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
+  transition: border-color var(--md-sys-motion-duration-short4) ease, background-color var(--md-sys-motion-duration-short4) ease, box-shadow var(--md-sys-motion-duration-short4) ease;
 
   &:checked,
   &:indeterminate {
@@ -85,20 +70,7 @@ label:has(> [type="checkbox"]):not(.switch) > [type="checkbox"],
     background-color: var(--md-sys-color-primary);
   }
 
-  &:hover {
-    @include _ring(var(--md-sys-color-on-surface), "hover");
-  }
-
-  &:checked:hover,
-  &:indeterminate:hover {
-    @include _ring(var(--md-sys-color-primary), "hover");
-  }
-
-  &:focus-visible,
-  &.tabbed:focus {
-    @include _ring(var(--md-sys-color-primary), "focus");
-    outline: none;
-  }
+  @include selection-control-states(var(--md-comp-checkbox-state-layer-size), var(--md-comp-checkbox-container-size), (":checked", ":indeterminate"));
 
   &.invalid,
   &[aria-invalid="true"] {
@@ -152,14 +124,14 @@ label:has(> [type="checkbox"]):not(.switch):not(:has(> [type="checkbox"] + span)
   &::before {
     content: "";
     position: absolute;
-    left: 0;
+    // A label that pads its box in, such as a list row, moves the mark with it.
+    inset-inline-start: var(--checkbox-mark-inset, 0);
     top: 50%;
     width: var(--md-comp-checkbox-container-size);
     height: var(--md-comp-checkbox-container-size);
     margin-top: calc(var(--md-comp-checkbox-container-size) / -2);
     pointer-events: none;
     background-color: var(--md-sys-color-on-primary);
-    -webkit-mask: #{$_cb-check} center / contain no-repeat;
     mask: #{$_cb-check} center / contain no-repeat;
     opacity: 0;
   }
@@ -170,7 +142,6 @@ label:has(> [type="checkbox"]):not(.switch):not(:has(> [type="checkbox"] + span)
   }
 
   &:has(> [type="checkbox"]:indeterminate)::before {
-    -webkit-mask-image: #{$_cb-dash};
     mask-image: #{$_cb-dash};
   }
 
@@ -191,10 +162,10 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
 }
 
 // Legacy / Select / Autocomplete: input + span draws the same
-// 18dp anatomy. Exclude .switch — that file paints the track on a span.
+// 18dp anatomy. Exclude .switch, which paints its own track.
 // $state is appended to the checkbox, e.g. ":checked" or ".invalid".
 @function _cb-span($state: "") {
-  @return "*:not(.switch) > [type='checkbox']#{$state} + span:not(.lever, .supporting-text, .character-counter, .file-path)";
+  @return "*:not(.switch) > [type='checkbox']#{$state} + span:not(.supporting-text, .character-counter, .file-path)";
 }
 
 // inline-block, not inline-flex: a flex span turns each text run and link
@@ -207,7 +178,7 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
   box-sizing: border-box;
   min-height: 48px;
   padding-block: calc((48px - 1lh) / 2);
-  padding-left: 30px;
+  padding-inline-start: 30px;
   cursor: pointer;
   user-select: none;
 }
@@ -216,7 +187,7 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
 #{_cb-span()}::after {
   content: "";
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 50%;
   box-sizing: border-box;
   width: 18px;
@@ -228,12 +199,11 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
 #{_cb-span()}::before {
   border: 2px solid var(--md-sys-color-on-surface-variant);
   background-color: transparent;
-  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
+  transition: border-color var(--md-sys-motion-duration-short4) ease, background-color var(--md-sys-motion-duration-short4) ease, box-shadow var(--md-sys-motion-duration-short4) ease;
 }
 
 #{_cb-span()}::after {
   background-color: var(--md-sys-color-on-primary);
-  -webkit-mask: #{$_cb-check} center / contain no-repeat;
   mask: #{$_cb-check} center / contain no-repeat;
   opacity: 0;
 }
@@ -248,7 +218,6 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
 }
 
 #{_cb-span(":indeterminate")}::after {
-  -webkit-mask-image: #{$_cb-dash};
   mask-image: #{$_cb-dash};
 }
 
@@ -260,8 +229,7 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
   @include _ring(var(--md-sys-color-primary), "hover");
 }
 
-#{_cb-span(":focus-visible")}::before,
-#{_cb-span(".tabbed:focus")}::before {
+#{_cb-span(":focus-visible")}::before {
   @include _ring(var(--md-sys-color-primary), "focus");
 }
 
@@ -300,3 +268,98 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
 #{_cb-span(":disabled:is(:checked, :indeterminate)")}::after {
   background-color: var(--md-sys-color-surface);
 }
+
+// Forced colors paint the box and the masked check as Canvas, so checked and
+// unchecked look the same, and the focus ring is a box-shadow they drop. Draw
+// the state in system colors and give focus a real outline.
+@media (forced-colors: active) {
+  label:has(> [type="checkbox"]):not(.switch) > [type="checkbox"],
+  .checkbox > [type="checkbox"] {
+    &:focus-visible {
+      outline: 2px solid CanvasText;
+      outline-offset: 2px;
+    }
+
+    &:is(:checked, :indeterminate) {
+      forced-color-adjust: none;
+      border-color: Highlight;
+      background-color: Highlight;
+    }
+
+    &:disabled {
+      border-color: GrayText;
+    }
+
+    &:disabled:is(:checked, :indeterminate) {
+      background-color: GrayText;
+    }
+
+    // Forced colors have no error color, so an invalid box takes a dashed
+    // edge instead. A checked one keeps the Highlight fill - the error fill
+    // above is more specific than the :checked rule here and would pass the
+    // author's red through - inside a CanvasText edge, clipped so Canvas
+    // shows between the dashes. A disabled one stays GrayText.
+    &:is(.invalid, [aria-invalid="true"]) {
+      border-style: dashed;
+    }
+
+    &:is(.invalid, [aria-invalid="true"]):is(:checked, :indeterminate):not(:disabled) {
+      border-color: CanvasText;
+      background-color: Highlight;
+      background-clip: padding-box;
+    }
+  }
+
+  // Forced colors repaint the dimmed label as CanvasText, like an enabled one.
+  label:has(> [type="checkbox"]:disabled):not(.switch),
+  .checkbox:has([type="checkbox"]:disabled) {
+    color: GrayText;
+  }
+
+  label:has(> [type="checkbox"]):not(.switch):not(:has(> [type="checkbox"] + span)),
+  .checkbox:not(:has(> [type="checkbox"] + span)) {
+    &::before {
+      forced-color-adjust: none;
+      background-color: HighlightText;
+    }
+  }
+
+  #{_cb-span(":is(:checked, :indeterminate)")}::before {
+    forced-color-adjust: none;
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+
+  #{_cb-span()}::after {
+    forced-color-adjust: none;
+    background-color: HighlightText;
+  }
+
+  #{_cb-span(":focus-visible")}::before {
+    outline: 2px solid CanvasText;
+    outline-offset: 2px;
+  }
+
+  #{_cb-span(":is(.invalid, [aria-invalid='true'])")}::before {
+    border-style: dashed;
+  }
+
+  // The error mark color is more specific than the HighlightText rules
+  // above, so an invalid box restates them with the same selector.
+  label:has(> [type="checkbox"]):not(.switch):not(:has(> [type="checkbox"] + span)),
+  .checkbox:not(:has(> [type="checkbox"] + span)) {
+    &:has(> [type="checkbox"]:is(.invalid, [aria-invalid="true"]):is(:checked, :indeterminate):not(:disabled))::before {
+      background-color: HighlightText;
+    }
+  }
+
+  #{_cb-span(":is(.invalid, [aria-invalid='true']):is(:checked, :indeterminate):not(:disabled)")}::after {
+    background-color: HighlightText;
+  }
+
+  #{_cb-span(":is(.invalid, [aria-invalid='true']):is(:checked, :indeterminate):not(:disabled)")}::before {
+    border-color: CanvasText;
+    background-color: Highlight;
+    background-clip: padding-box;
+  }
+}

package/src/sass/components/forms/_color-picker.scss

@@ -0,0 +1,135 @@
+@use "../../abstracts" as *;
+
+// Color picker. A .color-picker holding an <input type="color"> works as the
+// native swatch without JavaScript. ColorPicker adds a saturation and
+// brightness area, a hue slider and a hex field around that input, which
+// stays the form value and the preview.
+//
+//   <div class="color-picker" role="group" aria-label="Accent">
+//     <input type="color" name="accent" value="#6750a4" aria-label="Accent">
+//   </div>
+//
+// The hue slider is the framework's range input, so it keeps the M3 handle
+// and states; only its track becomes the hue gradient. The area and the hue
+// track are the color itself, so they keep their colors under forced colors
+// and do not mirror in RTL.
+//
+// Tokens:
+//   --md-comp-color-picker-width        280px
+//   --md-comp-color-picker-area-height  160px
+//   --md-comp-color-picker-area-shape   corner.medium
+//   --md-comp-color-picker-thumb-size   24px
+//   --md-comp-color-picker-field-shape  corner.extra-small
+
+$_hue-gradient: linear-gradient(
+  to right,
+  hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%),
+  hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%)
+);
+
+.color-picker {
+  --md-comp-color-picker-width: 280px;
+  --md-comp-color-picker-area-height: 160px;
+  --md-comp-color-picker-area-shape: var(--md-sys-shape-corner-medium);
+  --md-comp-color-picker-thumb-size: 24px;
+  --md-comp-color-picker-field-shape: var(--md-sys-shape-corner-extra-small);
+
+  display: inline-grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 8px 12px;
+  inline-size: min(100%, var(--md-comp-color-picker-width));
+
+  > .color-picker-area,
+  > .color-picker-hue {
+    grid-column: 1 / -1;
+  }
+
+  > .color-picker-hue {
+    --md-comp-slider-handle-color: var(--md-sys-color-on-surface);
+    direction: ltr;
+    margin: 0;
+    forced-color-adjust: none;
+  }
+}
+
+.color-picker-area {
+  position: relative;
+  block-size: var(--md-comp-color-picker-area-height);
+  border-radius: var(--md-comp-color-picker-area-shape);
+  background:
+    linear-gradient(to top, #000, transparent),
+    linear-gradient(to right, #fff, transparent),
+    hsl(var(--_color-picker-hue, 0) 100% 50%);
+  cursor: crosshair;
+  touch-action: none;
+  forced-color-adjust: none;
+}
+
+// White ring plus a dark edge, so the thumb shows on every color.
+.color-picker-thumb {
+  position: absolute;
+  top: calc(var(--_color-picker-y, 0) * 100%);
+  left: calc(var(--_color-picker-x, 0) * 100%);
+  box-sizing: border-box;
+  inline-size: var(--md-comp-color-picker-thumb-size);
+  block-size: var(--md-comp-color-picker-thumb-size);
+  border: 3px solid #fff;
+  border-radius: var(--md-sys-shape-corner-full);
+  background-color: var(--_color-picker-color, transparent);
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5), inset 0 0 0 1px rgb(0 0 0 / 0.3);
+  translate: -50% -50%;
+  @include focus-visible;
+}
+
+// One rule per engine: a browser drops a whole rule with a pseudo-element it
+// does not know.
+@each $track in ("::-webkit-slider-runnable-track", "::-moz-range-track") {
+  .color-picker > .color-picker-hue#{$track} {
+    background: $_hue-gradient;
+  }
+}
+
+.color-picker-hex {
+  box-sizing: border-box;
+  min-inline-size: 0;
+  block-size: 40px;
+  margin: 0;
+  padding-inline: 12px;
+  border: 1px solid var(--md-sys-color-outline);
+  border-radius: var(--md-comp-color-picker-field-shape);
+  background: transparent;
+  color: var(--md-sys-color-on-surface);
+  font-family: $font-stack;
+  @include typescale("body-large");
+
+  &:focus {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: -2px;
+  }
+
+  &:disabled {
+    opacity: 0.38;
+  }
+}
+
+.color-picker:has(> input[type="color"]:disabled) > .color-picker-area {
+  cursor: default;
+  opacity: 0.38;
+}
+
+@media (forced-colors: active) {
+  .color-picker-thumb {
+    border-color: Canvas;
+    box-shadow: 0 0 0 2px CanvasText;
+  }
+
+  .color-picker-hex {
+    border-color: CanvasText;
+  }
+
+  // The area keeps its colors, and its dark edge meets a dark Canvas.
+  .color-picker-area {
+    outline: 1px solid CanvasText;
+  }
+}

package/src/sass/components/forms/_color-swatches.scss

@@ -0,0 +1,85 @@
+@use "../../abstracts" as *;
+
+// Color swatches: pick one color from a preset palette. Each swatch is a
+// native radio drawn as a round chip of its color, so the group has one Tab
+// stop, arrow keys and a checked state with no script. A native color input
+// at the end of the group offers a custom value. CSS only.
+//
+//   <fieldset class="color-swatches">
+//     <legend>Accent</legend>
+//     <label><span class="visually-hidden">Purple</span><input type="radio"
+//       name="accent" value="#6750a4" style="--md-comp-color-swatch-color: #6750a4" checked></label>
+//     <label><span class="visually-hidden">Custom accent</span><input type="color" value="#ff8800"></label>
+//   </fieldset>
+//
+// The same anatomy as Rating: the name is visually hidden text in the label,
+// before the input. Loaded after radio-buttons, so these rules match the
+// radio rules' weight and win on order.
+//
+// Tokens:
+//   --md-comp-color-swatch-color             the swatch's color, per input   transparent
+//   --md-comp-color-swatches-size            swatch diameter                 40px
+//   --md-comp-color-swatches-outline-color   edge of every swatch            outline
+//   --md-comp-color-swatches-selected-color  ring around the checked one     on-surface
+
+fieldset.color-swatches {
+  --md-comp-color-swatch-color: transparent;
+  --md-comp-color-swatches-size: 40px;
+  --md-comp-color-swatches-outline-color: var(--md-sys-color-outline);
+  --md-comp-color-swatches-selected-color: var(--md-sys-color-on-surface);
+
+  @include choice-fieldset(var(--md-sys-shape-corner-full), '[type="radio"]');
+
+  > label > [type="color"] {
+    padding: 0;
+  }
+
+  > label > [type="radio"] {
+    flex: none;
+    width: var(--md-comp-color-swatches-size);
+    height: var(--md-comp-color-swatches-size);
+    border: 1px solid var(--md-comp-color-swatches-outline-color);
+    border-radius: var(--md-sys-shape-corner-full);
+    background-color: var(--md-comp-color-swatch-color);
+    background-image: none;
+    box-shadow: none;
+    outline: 0;
+    // The color is the content, so forced colors must not repaint it.
+    forced-color-adjust: none;
+
+    // The base radio draws its dot and state ring in these states, some at a
+    // higher weight; the swatch has neither.
+    &:hover,
+    &:focus-visible,
+    &:disabled,
+    &:checked:hover,
+    &:disabled:checked {
+      border-color: var(--md-comp-color-swatches-outline-color);
+      background-image: none;
+      box-shadow: none;
+    }
+
+    // A gap in the surface color, then a ring: the shape marks the choice,
+    // so it does not depend on telling two colors apart.
+    &:checked,
+    &:checked:hover {
+      border-color: var(--md-comp-color-swatches-outline-color);
+      background-image: none;
+      box-shadow:
+        0 0 0 2px var(--md-sys-color-surface),
+        0 0 0 4px var(--md-comp-color-swatches-selected-color);
+    }
+  }
+
+  @media (forced-colors: active) {
+    > label > [type="radio"] {
+      border-color: CanvasText;
+    }
+
+    > label > [type="radio"]:checked {
+      box-shadow: none;
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+}

package/src/sass/components/forms/_drop-zone.scss

@@ -16,7 +16,7 @@
 //   --md-comp-drop-zone-dragover-color             on-primary-container
 
 .drop-zone {
-  --md-comp-drop-zone-shape: 16px;
+  --md-comp-drop-zone-shape: var(--md-sys-shape-corner-large);
   --md-comp-drop-zone-outline-color: var(--md-sys-color-outline);
   --md-comp-drop-zone-dragover-container-color: var(--md-sys-color-primary-container);
   --md-comp-drop-zone-dragover-color: var(--md-sys-color-on-primary-container);
@@ -36,12 +36,12 @@
     text-align: center;
     color: var(--md-sys-color-on-surface-variant);
     cursor: pointer;
-    transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
+    transition: background-color var(--md-sys-motion-duration-short4) ease-out, border-color var(--md-sys-motion-duration-short4) ease-out;
     @include typescale("body-large");
 
     > #{$icon} {
       margin-block-end: 8px;
-      font-size: 32px;
+      font-size: rem(32px);
       color: var(--md-sys-color-primary);
     }
 
@@ -50,10 +50,7 @@
     }
 
     > input[type="file"] {
-      position: absolute;
-      inset: 0;
-      width: 100%;
-      height: 100%;
+      @include fill-parent;
       margin: 0;
       padding: 0;
       opacity: 0;
@@ -61,11 +58,7 @@
     }
 
     &:hover {
-      background-color: color-mix(
-        in oklab,
-        var(--md-sys-color-on-surface) state-opacity("hover"),
-        transparent
-      );
+      background-color: state-layer(var(--md-sys-color-on-surface), "hover");
     }
 
     &:has(> input:focus-visible) {
@@ -86,6 +79,16 @@
     color: var(--md-comp-drop-zone-dragover-color);
   }
 
+  > label:has(> input:is([data-validate-types], [data-max-size], [data-max-files])[aria-invalid="true"]) {
+    border-color: var(--md-sys-color-error);
+  }
+
+  &:has(> label > input:is([data-validate-types], [data-max-size], [data-max-files])) > .supporting-text[data-error] {
+    margin: 8px 16px 0;
+    color: var(--md-sys-color-error);
+    @include typescale("body-small");
+  }
+
   > .drop-zone-files {
     display: flex;
     flex-direction: column;
@@ -99,7 +102,7 @@
       justify-content: space-between;
       gap: 16px;
       padding: 8px 16px;
-      border-radius: 8px;
+      border-radius: var(--md-sys-shape-corner-small);
       background-color: var(--md-sys-color-surface-container);
       color: var(--md-sys-color-on-surface);
       @include typescale("body-medium");

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

@@ -12,7 +12,7 @@
 // container used around related form content, and the outlined text-field
 // shape so a group of fields matches the fields:
 //   container    transparent, 4dp corners, 1dp outline-variant
-//   filled       surface-variant, no outline
+//   filled       surface-container-highest, no outline
 //   legend       title-small / on-surface
 //   supporting   body-small / on-surface-variant
 //   padding      16dp, 16dp between children
@@ -22,7 +22,7 @@
 
 fieldset {
   --md-comp-fieldset-container-color: transparent;
-  --md-comp-fieldset-container-shape: 4px;
+  --md-comp-fieldset-container-shape: var(--md-sys-shape-corner-extra-small);
   --md-comp-fieldset-outline-color: var(--md-sys-color-outline-variant);
   --md-comp-fieldset-outline-width: 1px;
   --md-comp-fieldset-legend-color: var(--md-sys-color-on-surface);
@@ -51,10 +51,7 @@ fieldset {
     @include typescale("title-small");
 
     > #{$icon} {
-      font-size: 18px;
-      width: 18px;
-      height: 18px;
-      line-height: 18px;
+      @include icon-size(rem(18px));
       margin-inline-end: 8px;
       vertical-align: -3px;
       color: var(--md-sys-color-on-surface-variant);
@@ -97,7 +94,7 @@ fieldset.border {
 }
 
 fieldset.rounded {
-  --md-comp-fieldset-container-shape: 12px;
+  --md-comp-fieldset-container-shape: var(--md-sys-shape-corner-medium);
 }
 
 // Plain groups radios or checkboxes inside a surface that already frames them,

package/src/sass/components/forms/_file-input.scss

@@ -13,12 +13,10 @@
 
   input.file-path { width: 100%; }
 
-  // The trigger. `label.button` is the documented form - it wraps the file
-  // input, which is how clicking it opens the picker with no script. <button>
-  // and .btn are the older markup and still work.
-  > label.button,
-  > button,
-  > .btn {
+  // The trigger. `label.button` wraps the file input, which is how clicking
+  // it opens the picker with no script. A <button> cannot hold the input:
+  // one control inside another is invalid HTML.
+  > label.button {
     display: block;
     align-content: center;
     overflow-wrap: break-word;
@@ -29,6 +27,12 @@
     align-self: start;
     min-height: 3rem;
     min-width: 0;
+
+    // The focused control is the invisible file input inside, so the
+    // trigger shows its ring.
+    &:has(> input[type="file"]:focus-visible) {
+      @include focus-ring;
+    }
   }
 
   span {
@@ -38,7 +42,7 @@
   // Scoped to the trigger, not to .file-field. `inset: 0` against the field
   // stretched the invisible input across the whole row, so clicking the path
   // display - or any empty space - opened the file picker.
-  :is(label.button, button, .btn) input[type=file] {
+  label.button input[type=file] {
     position: absolute;
     inset: 0;
     cursor: pointer;
@@ -46,7 +50,7 @@
     margin: 0;
     padding: 0;
     opacity: 0;
-    font-size: 20px;
+    font-size: rem(20px);
 
     // Needed to override the UA-rendered button. `::file-selector-button` is
     // the standardised name for the old ::-webkit-file-upload-button.

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

@@ -8,9 +8,11 @@
 @forward 'drop-zone';
 @forward 'slider';
 @forward 'fieldset';
+@forward 'color-swatches';
+@forward 'color-picker';
 
 label {
-  font-size: .8rem;
+  font-size: 0.8rem;
   color: var(--md-sys-color-on-surface-variant);
 }