maverick-wave 5.38.0 → 6.0.0

package/src/scss/form-elements/_input.scss

@@ -14,20 +14,23 @@
     transition: var(--mw-transition);
     font-family: inherit;
 
+    // Firefox fades placeholders by default, which took the muted ink to 2.4:1
     &::placeholder {
       color: var(--mw-text-muted-color);
-      opacity: 0.7;
+      opacity: 1;
     }
 
-    &:hover:not(:focus):not(:read-only):not(:disabled) {
+    &:hover:not(:focus, [readonly], :disabled) {
       border-color: var(--mw-gray-color);
     }
 
     @include field-focus;
 
-    &:read-only {
-      background-color: var(--mw-gray-background);
-      color: var(--mw-text-muted-color);
+    // Not :read-only, which also matches colour, range and file inputs
+    &[readonly] {
+      // Light and in full ink in both themes - the value is content
+      background-color: var(--mw-form-elements-readonly-background);
+      color: var(--mw-form-elements-color);
       cursor: default;
       box-shadow: none;
     }
@@ -84,7 +87,7 @@
     }
 
     &:disabled {
-      background-color: var(--mw-gray-background);
+      background-color: var(--mw-form-elements-disabled-background);
       color: var(--mw-text-muted-color);
       cursor: not-allowed;
     }

package/src/scss/form-elements/_radio.scss

@@ -28,12 +28,19 @@
     min-height: 1.5rem;
     cursor: pointer;
     user-select: none;
+    position: relative;
+    isolation: isolate;
 
+    // Row-sized for touch exploration, behind the content so a label link works
     input[type='radio'] {
       position: absolute;
+      inset: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      margin: spacing('0');
       opacity: 0;
-      width: 0;
-      height: 0;
+      cursor: inherit;
     }
 
     .mw-radio-button {
@@ -65,9 +72,17 @@
       border-color: var(--mw-primary-color);
     }
 
+    &:hover input[type='radio']:not(:checked, :disabled) + .mw-radio-button {
+      border-color: var(--mw-gray-color);
+    }
+
     input[type='radio']:checked + .mw-radio-button {
       border-color: var(--mw-primary-color);
     }
+
+    input[type='radio']:is(#{$invalid-states}) + .mw-radio-button {
+      border-color: var(--mw-danger-color);
+    }
     input[type='radio']:checked + .mw-radio-button::after {
       transform: translate(-50%, -50%) scale(1);
     }
@@ -107,7 +122,8 @@
       }
     }
 
-    &-disabled {
+    &-disabled,
+    &:has(input[type='radio']:disabled) {
       cursor: not-allowed;
 
       input[type='radio'] {
@@ -121,4 +137,17 @@
       }
     }
   }
+
+  // Forced colours drop the dot's fill and the focus halo - the whole state
+  @media (forced-colors: active) {
+    .mw-radio input[type='radio']:checked + .mw-radio-button::after {
+      forced-color-adjust: none;
+      background: CanvasText;
+    }
+
+    .mw-radio input[type='radio']:focus-visible + .mw-radio-button {
+      outline: 2px solid;
+      outline-offset: 2px;
+    }
+  }
 }

package/src/scss/form-elements/_select.scss

@@ -42,9 +42,52 @@
     }
 
     &:disabled {
-      background-color: var(--mw-gray-background);
+      background-color: var(--mw-form-elements-disabled-background);
       color: var(--mw-text-muted-color);
       cursor: not-allowed;
     }
   }
+
+  // Opt-in: the page draws the open list where base-select exists, else native
+  @supports (appearance: base-select) {
+    .mw-select-custom,
+    .mw-select-custom::picker(select) {
+      appearance: base-select;
+    }
+
+    // The field keeps the framework's arrow, base-select would add its own
+    .mw-select-custom::picker-icon {
+      display: none;
+    }
+
+    .mw-select-custom::picker(select) {
+      margin-block: spacing('1');
+      padding: spacing('1');
+      border: 1px solid var(--mw-border);
+      border-radius: radius('md');
+      background: var(--mw-form-elements-background);
+      color: var(--mw-form-elements-color);
+      box-shadow: var(--mw-elevation-4);
+    }
+
+    .mw-select-custom option {
+      padding: spacing('2') spacing('3');
+      border-radius: radius('sm');
+      cursor: pointer;
+      @include focus-ring-inset;
+
+      &:hover,
+      &:focus-visible {
+        background: var(--mw-primary-background);
+      }
+
+      &:checked {
+        font-weight: font-weight('medium');
+      }
+
+      &::checkmark {
+        color: var(--mw-primary-text-color);
+      }
+    }
+  }
 }

package/src/scss/form-elements/_slider.scss

@@ -121,4 +121,22 @@
       }
     }
   }
+
+  // The filled track is a gradient, which forced colours would drop
+  @media (forced-colors: active) {
+    .mw-slider {
+      forced-color-adjust: none;
+      --fill: Highlight;
+      --track: GrayText;
+      --mw-focus-ring-color: CanvasText;
+
+      &::-webkit-slider-thumb {
+        border-color: CanvasText;
+      }
+
+      &::-moz-range-thumb {
+        border-color: CanvasText;
+      }
+    }
+  }
 }

package/src/scss/form-elements/_textarea.scss

@@ -29,20 +29,23 @@
       max-height: 60dvh;
     }
 
+    // Firefox fades placeholders by default, which took the muted ink to 2.4:1
     &::placeholder {
       color: var(--mw-text-muted-color);
-      opacity: 0.7;
+      opacity: 1;
     }
 
-    &:hover:not(:focus):not(:read-only):not(:disabled) {
+    &:hover:not(:focus, [readonly], :disabled) {
       border-color: var(--mw-gray-color);
     }
 
     @include field-focus;
 
-    &:read-only {
-      background-color: var(--mw-gray-background);
-      color: var(--mw-text-muted-color);
+    // Not :read-only, which also matches colour, range and file inputs
+    &[readonly] {
+      // Light and in full ink in both themes - the value is content
+      background-color: var(--mw-form-elements-readonly-background);
+      color: var(--mw-form-elements-color);
       cursor: default;
       box-shadow: none;
     }
@@ -68,7 +71,7 @@
     }
 
     &:disabled {
-      background-color: var(--mw-gray-background);
+      background-color: var(--mw-form-elements-disabled-background);
       color: var(--mw-text-muted-color);
       cursor: not-allowed;
     }

package/src/scss/form-elements/_toggle.scss

@@ -31,13 +31,18 @@
     cursor: pointer;
     user-select: none;
     position: relative;
+    isolation: isolate;
 
+    // Row-sized for touch exploration, behind the content so a label link works
     input[type='checkbox'] {
       position: absolute;
-      opacity: 0;
-      width: 0;
-      height: 0;
+      inset: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
       margin: spacing('0');
+      opacity: 0;
+      cursor: inherit;
     }
 
     .mw-toggle-track {
@@ -135,7 +140,8 @@
       }
     }
 
-    &-disabled {
+    &-disabled,
+    &:has(input[type='checkbox']:disabled) {
       cursor: not-allowed;
       opacity: 0.45;
 
@@ -161,4 +167,31 @@
       }
     }
   }
+
+  // Track and knob are fills, which forced colours take away - system colours
+  @media (forced-colors: active) {
+    .mw-toggle-track {
+      forced-color-adjust: none;
+      background: Canvas;
+      outline: 1px solid CanvasText;
+
+      &::after {
+        background: CanvasText;
+        box-shadow: none;
+      }
+    }
+
+    .mw-toggle input[type='checkbox']:checked + .mw-toggle-track {
+      background: Highlight;
+
+      &::after {
+        background: HighlightText;
+      }
+    }
+
+    .mw-toggle input[type='checkbox']:focus-visible + .mw-toggle-track {
+      outline: 2px solid CanvasText;
+      outline-offset: 2px;
+    }
+  }
 }