@expressivecss/expressive 0.14.1 → 0.16.0

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

@@ -19,6 +19,10 @@
 //
 // .filled-in is a no-op: the selected state is always the filled box.
 
+@mixin _ring($color, $state) {
+  @include state-layer-ring(var(--md-comp-checkbox-state-layer-size), var(--md-comp-checkbox-container-size), $color, $state);
+}
+
 $_cb-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 9.5 7.5 13 14 5.5'/%3E%3C/svg%3E");
 $_cb-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M4.5 9h9'/%3E%3C/svg%3E");
 
@@ -29,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
@@ -73,7 +69,7 @@ label:has(> [type="checkbox"]):not(.switch) > [type="checkbox"],
   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 {
@@ -82,32 +78,16 @@ label:has(> [type="checkbox"]):not(.switch) > [type="checkbox"],
   }
 
   &:hover {
-    @include state-layer-ring(
-    var(--md-comp-checkbox-state-layer-size),
-    var(--md-comp-checkbox-container-size),
-    var(--md-sys-color-on-surface),
-    "hover"
-  );
+    @include _ring(var(--md-sys-color-on-surface), "hover");
   }
 
   &:checked:hover,
   &:indeterminate:hover {
-    @include state-layer-ring(
-    var(--md-comp-checkbox-state-layer-size),
-    var(--md-comp-checkbox-container-size),
-    var(--md-sys-color-primary),
-    "hover"
-  );
+    @include _ring(var(--md-sys-color-primary), "hover");
   }
 
-  &:focus-visible,
-  &.tabbed:focus {
-    @include state-layer-ring(
-    var(--md-comp-checkbox-state-layer-size),
-    var(--md-comp-checkbox-container-size),
-    var(--md-sys-color-primary),
-    "focus"
-  );
+  &:focus-visible {
+    @include _ring(var(--md-sys-color-primary), "focus");
     outline: none;
   }
 
@@ -126,12 +106,7 @@ label:has(> [type="checkbox"]):not(.switch) > [type="checkbox"],
 
   &.invalid:hover,
   &[aria-invalid="true"]:hover {
-    @include state-layer-ring(
-    var(--md-comp-checkbox-state-layer-size),
-    var(--md-comp-checkbox-container-size),
-    var(--md-sys-color-error),
-    "hover"
-  );
+    @include _ring(var(--md-sys-color-error), "hover");
   }
 
   &:disabled {
@@ -168,14 +143,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;
   }
@@ -186,7 +161,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};
   }
 
@@ -207,29 +181,32 @@ 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.
-$_cb-span: "*:not(.switch) > [type='checkbox'] + span:not(.lever, .supporting-text, .character-counter, .file-path)";
+// 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(.supporting-text, .character-counter, .file-path)";
+}
 
 // inline-block, not inline-flex: a flex span turns each text run and link
 // inside it into its own item, which drops the spaces around a link and
 // splits "I agree to the <a>Terms</a>" into columns. The block padding
 // centers one line in the 48px target, as align-items did.
-#{$_cb-span} {
+#{_cb-span()} {
   position: relative;
   display: inline-block;
   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;
 }
 
-#{$_cb-span}::before,
-#{$_cb-span}::after {
+#{_cb-span()}::before,
+#{_cb-span()}::after {
   content: "";
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 50%;
   box-sizing: border-box;
   width: 18px;
@@ -238,93 +215,170 @@ $_cb-span: "*:not(.switch) > [type='checkbox'] + span:not(.lever, .supporting-te
   border-radius: 2px;
 }
 
-#{$_cb-span}::before {
+#{_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 {
+#{_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;
 }
 
-*:not(.switch) > [type="checkbox"]:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+#{_cb-span(":is(:checked, :indeterminate)")}::before {
   border-color: var(--md-sys-color-primary);
   background-color: var(--md-sys-color-primary);
 }
 
-*:not(.switch) > [type="checkbox"]:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::after {
+#{_cb-span(":is(:checked, :indeterminate)")}::after {
   opacity: 1;
 }
 
-*:not(.switch) > [type="checkbox"]:indeterminate + span:not(.lever, .supporting-text, .character-counter, .file-path)::after {
-  -webkit-mask-image: #{$_cb-dash};
+#{_cb-span(":indeterminate")}::after {
   mask-image: #{$_cb-dash};
 }
 
-*:not(.switch) > [type="checkbox"]:hover + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
-  @include state-layer-ring(
-    var(--md-comp-checkbox-state-layer-size),
-    var(--md-comp-checkbox-container-size),
-    var(--md-sys-color-on-surface),
-    "hover"
-  );
+#{_cb-span(":hover")}::before {
+  @include _ring(var(--md-sys-color-on-surface), "hover");
 }
 
-*:not(.switch) > [type="checkbox"]:is(:checked, :indeterminate):hover + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
-  @include state-layer-ring(
-    var(--md-comp-checkbox-state-layer-size),
-    var(--md-comp-checkbox-container-size),
-    var(--md-sys-color-primary),
-    "hover"
-  );
+#{_cb-span(":is(:checked, :indeterminate):hover")}::before {
+  @include _ring(var(--md-sys-color-primary), "hover");
 }
 
-*:not(.switch) > [type="checkbox"]:focus-visible + span:not(.lever, .supporting-text, .character-counter, .file-path)::before,
-*:not(.switch) > [type="checkbox"].tabbed:focus + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
-  @include state-layer-ring(
-    var(--md-comp-checkbox-state-layer-size),
-    var(--md-comp-checkbox-container-size),
-    var(--md-sys-color-primary),
-    "focus"
-  );
+#{_cb-span(":focus-visible")}::before {
+  @include _ring(var(--md-sys-color-primary), "focus");
 }
 
-*:not(.switch) > [type="checkbox"].invalid + span:not(.lever, .supporting-text, .character-counter, .file-path)::before,
-*:not(.switch) > [type="checkbox"][aria-invalid="true"] + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+#{_cb-span(".invalid")}::before,
+#{_cb-span("[aria-invalid='true']")}::before {
   border-color: var(--md-sys-color-error);
 }
 
-*:not(.switch) > [type="checkbox"].invalid:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::before,
-*:not(.switch) > [type="checkbox"][aria-invalid="true"]:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+#{_cb-span(".invalid:is(:checked, :indeterminate)")}::before,
+#{_cb-span("[aria-invalid='true']:is(:checked, :indeterminate)")}::before {
   border-color: var(--md-sys-color-error);
   background-color: var(--md-sys-color-error);
 }
 
-*:not(.switch) > [type="checkbox"].invalid:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::after,
-*:not(.switch) > [type="checkbox"][aria-invalid="true"]:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::after {
+#{_cb-span(".invalid:is(:checked, :indeterminate)")}::after,
+#{_cb-span("[aria-invalid='true']:is(:checked, :indeterminate)")}::after {
   background-color: var(--md-sys-color-on-error);
 }
 
-*:not(.switch) > [type="checkbox"]:disabled + span:not(.lever, .supporting-text, .character-counter, .file-path) {
+#{_cb-span(":disabled")} {
   color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   cursor: default;
 }
 
-*:not(.switch) > [type="checkbox"]:disabled + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+#{_cb-span(":disabled")}::before {
   border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   background-color: transparent;
   box-shadow: none;
 }
 
-*:not(.switch) > [type="checkbox"]:disabled:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+#{_cb-span(":disabled:is(:checked, :indeterminate)")}::before {
   border-color: transparent;
   background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
 }
 
-*:not(.switch) > [type="checkbox"]:disabled:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::after {
+#{_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);
     }
 
@@ -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");