@expressivecss/expressive 0.15.0 → 0.16.0

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);
     }
 
@@ -61,11 +61,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 +82,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 +105,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,10 @@ fieldset {
     @include typescale("title-small");
 
     > #{$icon} {
-      font-size: 18px;
-      width: 18px;
-      height: 18px;
-      line-height: 18px;
+      font-size: rem(18px);
+      width: rem(18px);
+      height: rem(18px);
+      line-height: rem(18px);
       margin-inline-end: 8px;
       vertical-align: -3px;
       color: var(--md-sys-color-on-surface-variant);
@@ -97,7 +97,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;
@@ -38,7 +36,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 +44,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);
 }