maverick-wave 4.28.0 → 5.0.0

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

@@ -1,50 +1,50 @@
 @use '../abstracts' as *;
 
-.mw-select {
-  width: 100%;
-  padding: spacing('2') spacing('6') spacing('2') spacing('3');
-  font-size: var(--mw-control-font);
-  min-height: var(--mw-control-height);
-  background: var(--mw-form-elements-background);
-  color: var(--mw-form-elements-color);
-  border: 2px solid var(--mw-border);
-  border-radius: radius('sm');
-  transition: var(--mw-transition);
-  appearance: none;
-  -webkit-appearance: none;
-  background-image: $select-arrow-image;
-  background-repeat: no-repeat;
-  background-position: right spacing('3') center;
-  background-size: spacing('3') spacing('3');
-  font-family: inherit;
-  line-height: var(--mw-control-line-height);
+@layer mw.forms {
+  .mw-select {
+    width: 100%;
+    padding: spacing('2') spacing('6') spacing('2') spacing('3');
+    font-size: var(--mw-control-font);
+    min-height: var(--mw-control-height);
+    background: var(--mw-form-elements-background);
+    color: var(--mw-form-elements-color);
+    border: 2px solid var(--mw-border);
+    border-radius: radius('sm');
+    transition: var(--mw-transition);
+    appearance: none;
+    -webkit-appearance: none;
+    background-image: $select-arrow-image;
+    background-repeat: no-repeat;
+    background-position: right spacing('3') center;
+    background-size: spacing('3') spacing('3');
+    font-family: inherit;
+    line-height: var(--mw-control-line-height);
 
-  &:hover:not(:focus):not(:disabled) {
-    border-color: var(--mw-gray-color);
-  }
+    &:hover:not(:focus):not(:disabled) {
+      border-color: var(--mw-gray-color);
+    }
 
-  @include field-focus;
+    @include field-focus;
 
-  // size modifiers
-  &-sm {
-    padding: spacing('1') spacing('5') spacing('1') spacing('2');
-    font-size: var(--mw-control-font-sm);
-    min-height: var(--mw-control-height-sm);
-    background-position: right spacing('2') center;
-    background-size: spacing('2') spacing('2');
-  }
-  &-lg {
-    padding: spacing('2') spacing('7') spacing('2') spacing('4');
-    font-size: var(--mw-control-font-lg);
-    min-height: var(--mw-control-height-lg);
-    background-position: right spacing('4') center;
-    background-size: spacing('4') spacing('4');
-  }
+    &-sm {
+      padding: spacing('1') spacing('5') spacing('1') spacing('2');
+      font-size: var(--mw-control-font-sm);
+      min-height: var(--mw-control-height-sm);
+      background-position: right spacing('2') center;
+      background-size: spacing('2') spacing('2');
+    }
+    &-lg {
+      padding: spacing('2') spacing('7') spacing('2') spacing('4');
+      font-size: var(--mw-control-font-lg);
+      min-height: var(--mw-control-height-lg);
+      background-position: right spacing('4') center;
+      background-size: spacing('4') spacing('4');
+    }
 
-  // disabled state
-  &:disabled {
-    background-color: var(--mw-gray-background);
-    color: var(--mw-text-muted-color);
-    cursor: not-allowed;
+    &:disabled {
+      background-color: var(--mw-gray-background);
+      color: var(--mw-text-muted-color);
+      cursor: not-allowed;
+    }
   }
 }

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

@@ -1,157 +1,142 @@
-// _slider.scss
 @use '../abstracts' as *;
 
-// color map
-$_mw-slider-colors: (
-  primary: var(--mw-primary-color),
-  secondary: var(--mw-secondary-color),
-  info: var(--mw-info-color),
-  success: var(--mw-success-color),
-  warning: var(--mw-warning-color),
-  danger: var(--mw-danger-color),
-);
+@layer mw.forms {
+  .mw-slider {
+    --value: 0%;
+    --fill: var(--mw-primary-color);
+    --track: var(--mw-gray-background);
 
-.mw-slider {
-  --value: 0%;
-  --fill: var(--mw-primary-color);
-  --track: var(--mw-gray-background);
+    width: 100%;
+    height: 8px;
+    background: linear-gradient(
+      to right,
+      var(--fill) 0,
+      var(--fill) var(--value),
+      var(--track) var(--value),
+      var(--track) 100%
+    );
+    border-radius: radius('sm');
+    appearance: none;
+    cursor: pointer;
+    margin-top: spacing('2');
 
-  width: 100%;
-  height: 8px;
-  background: linear-gradient(
-    to right,
-    var(--fill) 0,
-    var(--fill) var(--value),
-    var(--track) var(--value),
-    var(--track) 100%
-  );
-  border-radius: radius('sm');
-  appearance: none;
-  cursor: pointer;
-  margin-top: spacing('2');
+    @include focus-ring;
 
-  // thumb
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: spacing('5');
-    height: spacing('5');
-    background: var(--fill);
-    border: 2px solid var(--mw-border);
-    border-radius: radius('full');
-    margin-top: spacing('0');
-    transition:
-      transform var(--mw-duration-fast) var(--mw-ease-out),
-      border-color var(--mw-duration-fast) var(--mw-ease-out);
-  }
-  &::-webkit-slider-thumb:hover {
-    transform: scale(1.1);
-  }
-
-  &::-moz-range-thumb {
-    width: spacing('5');
-    height: spacing('5');
-    border: 2px solid var(--fill);
-    border-radius: radius('full');
-    transition:
-      transform var(--mw-duration-fast) var(--mw-ease-out),
-      border-color var(--mw-duration-fast) var(--mw-ease-out);
-  }
-  &::-moz-range-thumb:hover {
-    transform: scale(1.1);
-  }
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: spacing('5');
+      height: spacing('5');
+      background: var(--fill);
+      border: 2px solid var(--mw-border);
+      border-radius: radius('full');
+      margin-top: spacing('0');
+      transition:
+        transform var(--mw-duration-fast) var(--mw-ease-out),
+        border-color var(--mw-duration-fast) var(--mw-ease-out);
+    }
+    &::-webkit-slider-thumb:hover {
+      transform: scale(1.1);
+    }
 
-  // track styling for Firefox
-  &::-moz-range-track {
-    background: transparent;
-  }
+    &::-moz-range-thumb {
+      width: spacing('5');
+      height: spacing('5');
+      border: 2px solid var(--fill);
+      border-radius: radius('full');
+      transition:
+        transform var(--mw-duration-fast) var(--mw-ease-out),
+        border-color var(--mw-duration-fast) var(--mw-ease-out);
+    }
+    &::-moz-range-thumb:hover {
+      transform: scale(1.1);
+    }
 
-  // IE
-  &::-ms-fill-lower {
-    background: var(--fill);
-  }
-  &::-ms-fill-upper {
-    background: var(--track);
-  }
-  &::-ms-thumb {
-    width: spacing('5');
-    height: spacing('5');
-    border: 2px solid var(--fill);
-    border-radius: radius('full');
-  }
+    &::-moz-range-track {
+      background: transparent;
+    }
 
-  // sizes
-  &-sm {
-    height: 6px;
-    &::-webkit-slider-thumb {
-      width: spacing('4');
-      height: spacing('4');
+    // IE
+    &::-ms-fill-lower {
+      background: var(--fill);
     }
-    &::-moz-range-thumb {
-      width: spacing('4');
-      height: spacing('4');
+    &::-ms-fill-upper {
+      background: var(--track);
     }
     &::-ms-thumb {
-      width: spacing('4');
-      height: spacing('4');
+      width: spacing('5');
+      height: spacing('5');
+      border: 2px solid var(--fill);
+      border-radius: radius('full');
     }
-  }
-  &-lg {
-    height: 16px;
-    margin-top: spacing('2');
-    &::-webkit-slider-thumb {
-      width: spacing('6');
-      height: spacing('6');
+
+    &-sm {
+      height: 6px;
+      &::-webkit-slider-thumb {
+        width: spacing('4');
+        height: spacing('4');
+      }
+      &::-moz-range-thumb {
+        width: spacing('4');
+        height: spacing('4');
+      }
+      &::-ms-thumb {
+        width: spacing('4');
+        height: spacing('4');
+      }
     }
-    &::-moz-range-thumb {
-      width: spacing('6');
-      height: spacing('6');
+    &-lg {
+      height: 16px;
+      margin-top: spacing('2');
+      &::-webkit-slider-thumb {
+        width: spacing('6');
+        height: spacing('6');
+      }
+      &::-moz-range-thumb {
+        width: spacing('6');
+        height: spacing('6');
+      }
+      &::-ms-thumb {
+        width: spacing('6');
+        height: spacing('6');
+      }
     }
-    &::-ms-thumb {
-      width: spacing('6');
-      height: spacing('6');
+    &:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
     }
-  }
-  // disabled
-  &:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
 
-  // color variants
-  @each $name, $col in $_mw-slider-colors {
-    &-#{$name} {
-      --fill: #{$col};
+    @each $name, $col in $semantic-colors {
+      &-#{$name} {
+        --fill: #{$col};
+      }
     }
   }
-}
 
-.mw-slider-container {
-  position: relative;
-  width: 100%;
-  line-height: 1.2;
-  padding-bottom: spacing('2');
+  .mw-slider-container {
+    position: relative;
+    width: 100%;
+    line-height: 1.2;
+    padding-bottom: spacing('2');
 
-  // the badge in top-right
-  .mw-slider-value {
-    position: absolute;
-    top: -17px;
-    right: 7px;
-    font-size: font-size('sm');
-    color: var(--mw-text-muted-color);
-    pointer-events: none;
-
-    @include media-down('sm') {
-      font-size: font-size('xs');
+    .mw-slider-value {
+      position: absolute;
       top: -15px;
-    }
+      right: 7px;
+      font-size: font-size('xs');
+      color: var(--mw-text-muted-color);
+      pointer-events: none;
 
-    // 1-10 numeric style
-    &.mw-slider-numeric::after {
-      content: attr(data-value) '/10';
-    }
-    // percentage style
-    &.mw-slider-percent::after {
-      content: attr(data-value) '%';
+      @include media-up('sm') {
+        font-size: font-size('sm');
+        top: -17px;
+      }
+
+      &.mw-slider-numeric::after {
+        content: attr(data-value) '/10';
+      }
+      &.mw-slider-percent::after {
+        content: attr(data-value) '%';
+      }
     }
   }
 }

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

@@ -1,66 +1,80 @@
-// _textarea.scss
 @use '../abstracts' as *;
 
-.mw-textarea {
-  width: 100%;
-  height: auto;
-  padding: spacing('2') spacing('3');
-  font-size: var(--mw-control-font);
-  line-height: var(--mw-control-line-height);
-  background: var(--mw-form-elements-background);
-  color: var(--mw-form-elements-color);
-  border: 2px solid var(--mw-border);
-  border-radius: radius('sm');
-  transition: var(--mw-transition);
-  resize: none;
-  font-family: inherit;
+@layer mw.forms {
+  .mw-textarea {
+    width: 100%;
+    height: auto;
+    padding: spacing('2') spacing('3');
+    font-size: var(--mw-control-font);
+    line-height: var(--mw-control-line-height);
+    background: var(--mw-form-elements-background);
+    color: var(--mw-form-elements-color);
+    border: 2px solid var(--mw-border);
+    border-radius: radius('sm');
+    transition: var(--mw-transition);
+    resize: none;
+    font-family: inherit;
 
-  &::placeholder {
-    color: var(--mw-text-muted-color);
-    opacity: 0.7;
-  }
+    // Grows with what is typed instead of holding a fixed box with a scrollbar
+    // in it. `resize: none` above is what makes this worth having - without
+    // field-sizing the only way out of a too-small box was the resize handle,
+    // and that is switched off.
+    //
+    // Bounded, or a pasted wall of text pushes the submit button off the screen.
+    // `lh` is the element's own line-height, so the floor is three lines of
+    // whatever size step this textarea is set in.
+    @supports (field-sizing: content) {
+      field-sizing: content;
+      min-height: 3lh;
+      max-height: 60dvh;
+    }
 
-  &:hover:not(:focus):not(:read-only):not(:disabled) {
-    border-color: var(--mw-gray-color);
-  }
+    &::placeholder {
+      color: var(--mw-text-muted-color);
+      opacity: 0.7;
+    }
 
-  @include field-focus;
+    &:hover:not(:focus):not(:read-only):not(:disabled) {
+      border-color: var(--mw-gray-color);
+    }
 
-  &:read-only {
-    background-color: var(--mw-gray-background);
-    color: var(--mw-text-muted-color);
-    cursor: default;
-    box-shadow: none;
-  }
+    @include field-focus;
 
-  &-sm {
-    padding: spacing('1') spacing('2');
-    font-size: var(--mw-control-font-sm);
-  }
-  &-lg {
-    min-height: spacing('11');
-    padding: spacing('3') spacing('4');
-    font-size: var(--mw-control-font-lg);
-  }
+    &:read-only {
+      background-color: var(--mw-gray-background);
+      color: var(--mw-text-muted-color);
+      cursor: default;
+      box-shadow: none;
+    }
 
-  &-resizable {
-    resize: both;
-  }
-  &-resizable-vertical {
-    resize: vertical;
-  }
-  &-resizable-horizontal {
-    resize: horizontal;
-  }
+    &-sm {
+      padding: spacing('1') spacing('2');
+      font-size: var(--mw-control-font-sm);
+    }
+    &-lg {
+      min-height: spacing('11');
+      padding: spacing('3') spacing('4');
+      font-size: var(--mw-control-font-lg);
+    }
+
+    &-resizable {
+      resize: both;
+    }
+    &-resizable-vertical {
+      resize: vertical;
+    }
+    &-resizable-horizontal {
+      resize: horizontal;
+    }
 
-  // disabled state
-  &:disabled {
-    background-color: var(--mw-gray-background);
-    color: var(--mw-text-muted-color);
-    cursor: not-allowed;
+    &:disabled {
+      background-color: var(--mw-gray-background);
+      color: var(--mw-text-muted-color);
+      cursor: not-allowed;
+    }
   }
-}
 
-.mw-textarea:not([rows]) {
-  min-height: spacing('10');
+  .mw-textarea:not([rows]) {
+    min-height: spacing('10');
+  }
 }