maverick-wave 4.28.0 → 5.0.0

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

@@ -1,92 +1,92 @@
 @use '../abstracts' as *;
 
-.mw-input {
-  width: 100%;
-  padding: spacing('2') spacing('3');
-  font-size: var(--mw-control-font);
-  line-height: var(--mw-control-line-height);
-  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);
-  font-family: inherit;
+@layer mw.forms {
+  .mw-input {
+    width: 100%;
+    padding: spacing('2') spacing('3');
+    font-size: var(--mw-control-font);
+    line-height: var(--mw-control-line-height);
+    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);
+    font-family: inherit;
 
-  &::placeholder {
-    color: var(--mw-text-muted-color);
-    opacity: 0.7;
-  }
+    &::placeholder {
+      color: var(--mw-text-muted-color);
+      opacity: 0.7;
+    }
 
-  &:hover:not(:focus):not(:read-only):not(:disabled) {
-    border-color: var(--mw-gray-color);
-  }
+    &:hover:not(:focus):not(:read-only):not(:disabled) {
+      border-color: var(--mw-gray-color);
+    }
 
-  @include field-focus;
+    @include field-focus;
 
-  &:read-only {
-    background-color: var(--mw-gray-background);
-    color: var(--mw-text-muted-color);
-    cursor: default;
-    box-shadow: none;
-  }
+    &:read-only {
+      background-color: var(--mw-gray-background);
+      color: var(--mw-text-muted-color);
+      cursor: default;
+      box-shadow: none;
+    }
 
-  &-sm {
-    padding: spacing('1') spacing('2');
-    font-size: var(--mw-control-font-sm);
-    min-height: var(--mw-control-height-sm);
-  }
-  &-lg {
-    padding: spacing('2') spacing('4');
-    font-size: var(--mw-control-font-lg);
-    min-height: var(--mw-control-height-lg);
-  }
+    &-sm {
+      padding: spacing('1') spacing('2');
+      font-size: var(--mw-control-font-sm);
+      min-height: var(--mw-control-height-sm);
+    }
+    &-lg {
+      padding: spacing('2') spacing('4');
+      font-size: var(--mw-control-font-lg);
+      min-height: var(--mw-control-height-lg);
+    }
 
-  // Numeric input for money and other figures - the entry counterpart to the
-  // `mw-text-numeric` utility, so a value looks the same while being typed and
-  // once it is rendered into a table.
-  //
-  // Pair it with `type="text" inputmode="decimal"`, not `type="number"`:
-  // number inputs change their value on scroll, and they reject a comma as
-  // decimal separator in most locales, which silently empties `.value` for
-  // anyone typing "1234,50".
-  &-numeric {
-    text-align: right;
-    font-variant-numeric: tabular-nums lining-nums;
-    font-feature-settings: 'tnum', 'lnum';
+    // Numeric input for money and other figures - the entry counterpart to the
+    // `mw-text-numeric` utility, so a value looks the same while being typed and
+    // once it is rendered into a table.
+    //
+    // Pair it with `type="text" inputmode="decimal"`, not `type="number"`:
+    // number inputs change their value on scroll, and they reject a comma as
+    // decimal separator in most locales, which silently empties `.value` for
+    // anyone typing "1234,50".
+    &-numeric {
+      text-align: right;
+      font-variant-numeric: tabular-nums lining-nums;
+      font-feature-settings: 'tnum', 'lnum';
 
-    // Suppress the native spinners if a `type="number"` slips through - their
-    // step of 1 is meaningless for an amount and the arrows are tiny.
-    appearance: textfield;
+      // Suppress the native spinners if a `type="number"` slips through - their
+      // step of 1 is meaningless for an amount and the arrows are tiny.
+      appearance: textfield;
 
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      appearance: none;
-      margin: 0;
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        appearance: none;
+        margin: 0;
+      }
     }
-  }
 
-  // Date / time inputs - style the native picker indicator
-  &[type='date'],
-  &[type='time'],
-  &[type='datetime-local'] {
-    &::-webkit-calendar-picker-indicator {
-      cursor: pointer;
-      opacity: 0.55;
-      padding: 0;
-      margin-left: spacing('1');
-      transition: opacity var(--mw-duration-fast) var(--mw-ease-out);
+    &[type='date'],
+    &[type='time'],
+    &[type='datetime-local'] {
+      &::-webkit-calendar-picker-indicator {
+        cursor: pointer;
+        opacity: 0.55;
+        padding: 0;
+        margin-left: spacing('1');
+        transition: opacity var(--mw-duration-fast) var(--mw-ease-out);
 
-      &:hover {
-        opacity: 1;
+        &:hover {
+          opacity: 1;
+        }
       }
     }
-  }
 
-  // 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/_login.scss

@@ -1,65 +1,65 @@
 @use '../abstracts' as *;
 
-.mw-login {
-  background: var(--mw-card-background);
-  @include surface;
-  box-shadow: var(--mw-elevation-2);
-  transition: var(--mw-transition);
-  border: 1px solid var(--mw-border);
-  overflow: hidden;
-  width: min(340px, 85%);
-  margin: spacing('2') auto;
-  padding: spacing('5');
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-
-  @include media-down('sm') {
+@layer mw.components {
+  .mw-login {
+    background: var(--mw-card-background);
+    @include surface;
+    box-shadow: var(--mw-elevation-2);
+    transition: var(--mw-transition);
+    border: 1px solid var(--mw-border);
+    overflow: hidden;
     width: min(340px, 100%);
-  }
-
-  @include media-down('xs') {
+    margin: spacing('2') auto;
     padding: spacing('7') spacing('4');
-  }
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
 
-  &-logo {
-    margin-bottom: spacing('8');
+    @include media-up('xs') {
+      padding: spacing('5');
+    }
 
-    img {
-      display: block;
-      margin: spacing('0') auto;
-      height: 60px;
-      object-fit: contain;
+    @include media-up('sm') {
+      width: min(340px, 85%);
     }
-  }
 
-  &-message {
-    font-size: font-size('sm');
-    text-align: center;
-    margin-bottom: spacing('6');
-    line-height: 1.5;
-    color: var(--mw-text-muted-color);
+    &-logo {
+      margin-bottom: spacing('8');
 
-    // Variants
-    &-info {
-      color: var(--mw-info-text-color);
+      img {
+        display: block;
+        margin: spacing('0') auto;
+        height: 60px;
+        object-fit: contain;
+      }
     }
 
-    &-error {
-      color: var(--mw-danger-text-color);
-    }
+    &-message {
+      font-size: font-size('sm');
+      text-align: center;
+      margin-bottom: spacing('6');
+      line-height: 1.5;
+      color: var(--mw-text-muted-color);
 
-    // Multiple messages spacing
-    & + & {
-      margin-top: spacing('-3');
+      &-info {
+        color: var(--mw-info-text-color);
+      }
+
+      &-error {
+        color: var(--mw-danger-text-color);
+      }
+
+      & + & {
+        margin-top: spacing('-3');
+      }
     }
-  }
 
-  &-error {
-    border: 2px solid var(--mw-danger-color);
-  }
+    &-error {
+      border: 2px solid var(--mw-danger-color);
+    }
 
-  &.mw-form-actions {
-    width: 100%;
+    &.mw-form-actions {
+      width: 100%;
+    }
   }
 }

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

@@ -1,65 +1,67 @@
 @use '../abstracts' as *;
 
-// ===== Prefilled marker =====
-// Marks a control whose value did not come from the user in this session -
-// loaded from an existing record, restored from a draft, filled with a
-// default. Add `mw-prefilled` to the control itself, not to the wrapper, so
-// it also works outside `mw-field` (input groups, standalone selects).
+@layer mw.components {
+  // ===== Prefilled marker =====
+  // Marks a control whose value did not come from the user in this session -
+  // loaded from an existing record, restored from a draft, filled with a
+  // default. Add `mw-prefilled` to the control itself, not to the wrapper, so
+  // it also works outside `mw-field` (input groups, standalone selects).
 
-$_marker-sm: 10px;
-$_marker-base: 12px;
-$_marker-lg: 14px;
+  $_marker-sm: 10px;
+  $_marker-base: 12px;
+  $_marker-lg: 14px;
 
-// 135deg puts the hard edge on the anti-diagonal, which fills the top left
-// half of the background box - a right triangle pointing into the corner.
-$_marker-image: linear-gradient(
-  135deg,
-  var(--mw-info-color) 50%,
-  transparent 50%
-);
+  // 135deg puts the hard edge on the anti-diagonal, which fills the top left
+  // half of the background box - a right triangle pointing into the corner.
+  $_marker-image: linear-gradient(
+    135deg,
+    var(--mw-info-color) 50%,
+    transparent 50%
+  );
 
-@mixin _marker($size) {
-  background-image: $_marker-image;
-  background-repeat: no-repeat;
-  background-position: left top;
-  background-size: $size $size;
-}
+  @mixin _marker($size) {
+    background-image: $_marker-image;
+    background-repeat: no-repeat;
+    background-position: left top;
+    background-size: $size $size;
+  }
 
-// A select already paints its arrow, so adding a layer means restating both.
-@mixin _marker-select($size, $arrow-inset, $arrow-size) {
-  background-image: $_marker-image, $select-arrow-image;
-  background-repeat: no-repeat;
-  background-position:
-    left top,
-    right $arrow-inset center;
-  background-size:
-    $size $size,
-    $arrow-size $arrow-size;
-}
+  // A select already paints its arrow, so adding a layer means restating both.
+  @mixin _marker-select($size, $arrow-inset, $arrow-size) {
+    background-image: $_marker-image, $select-arrow-image;
+    background-repeat: no-repeat;
+    background-position:
+      left top,
+      right $arrow-inset center;
+    background-size:
+      $size $size,
+      $arrow-size $arrow-size;
+  }
 
-.mw-prefilled {
-  @include _marker($_marker-base);
+  .mw-prefilled {
+    @include _marker($_marker-base);
 
-  &.mw-input-sm,
-  &.mw-textarea-sm {
-    @include _marker($_marker-sm);
-  }
+    &.mw-input-sm,
+    &.mw-textarea-sm {
+      @include _marker($_marker-sm);
+    }
 
-  &.mw-input-lg,
-  &.mw-textarea-lg {
-    @include _marker($_marker-lg);
-  }
+    &.mw-input-lg,
+    &.mw-textarea-lg {
+      @include _marker($_marker-lg);
+    }
 
-  // Selects last: each size restates the arrow layer it would otherwise lose.
-  &.mw-select {
-    @include _marker-select($_marker-base, spacing('3'), spacing('3'));
-  }
+    // Selects last: each size restates the arrow layer it would otherwise lose.
+    &.mw-select {
+      @include _marker-select($_marker-base, spacing('3'), spacing('3'));
+    }
 
-  &.mw-select-sm {
-    @include _marker-select($_marker-sm, spacing('2'), spacing('2'));
-  }
+    &.mw-select-sm {
+      @include _marker-select($_marker-sm, spacing('2'), spacing('2'));
+    }
 
-  &.mw-select-lg {
-    @include _marker-select($_marker-lg, spacing('4'), spacing('4'));
+    &.mw-select-lg {
+      @include _marker-select($_marker-lg, spacing('4'), spacing('4'));
+    }
   }
 }

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

@@ -1,136 +1,124 @@
 @use '../abstracts' as *;
 
-$_mw-radio-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 {
+  $_size-sm: spacing('5');
+  $_size-default: spacing('6');
+  $_size-lg: spacing('7');
 
-$_size-sm: spacing('5');
-$_size-default: spacing('6');
-$_size-lg: spacing('7');
+  .mw-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: spacing('3');
 
-.mw-radio-group {
-  display: flex;
-  flex-direction: column;
-  gap: spacing('3');
-
-  &-inline {
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: spacing('2') spacing('6');
-    @include media-down('sm') {
+    &-inline {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
       gap: spacing('2') spacing('4');
+      @include media-up('sm') {
+        gap: spacing('2') spacing('6');
+      }
     }
   }
-}
-
-.mw-radio {
-  display: inline-flex;
-  align-items: center;
-  gap: spacing('2');
-  min-height: 1.5rem;
-  cursor: pointer;
-  user-select: none;
 
-  // hide native radio
-  input[type='radio'] {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .mw-radio-button {
-    position: relative;
-    flex-shrink: 0;
-    width: $_size-default;
-    height: $_size-default;
-    border: 2px solid var(--mw-border);
-    border-radius: radius('full');
-    transition: var(--mw-transition);
-    background: var(--mw-form-elements-background);
+  .mw-radio {
+    display: inline-flex;
+    align-items: center;
+    gap: spacing('2');
+    min-height: 1.5rem;
+    cursor: pointer;
+    user-select: none;
 
-    &::after {
-      content: '';
+    input[type='radio'] {
       position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 50%;
-      height: 50%;
-      background: var(--mw-primary-color);
-      border-radius: radius('full');
-      transform: translate(-50%, -50%) scale(0);
-      transition: var(--mw-transition);
+      opacity: 0;
+      width: 0;
+      height: 0;
     }
-  }
-
-  // focus-visible state
-  input[type='radio']:focus-visible + .mw-radio-button {
-    @include focus-halo;
-    border-color: var(--mw-primary-color);
-  }
 
-  input[type='radio']:checked + .mw-radio-button {
-    border-color: var(--mw-primary-color);
-  }
-  input[type='radio']:checked + .mw-radio-button::after {
-    transform: translate(-50%, -50%) scale(1);
-  }
+    .mw-radio-button {
+      position: relative;
+      flex-shrink: 0;
+      width: $_size-default;
+      height: $_size-default;
+      border: 2px solid var(--mw-border);
+      border-radius: radius('full');
+      transition: var(--mw-transition);
+      background: var(--mw-form-elements-background);
 
-  .mw-radio-label {
-    font-size: font-size('base');
-    color: var(--mw-text-color);
-  }
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 50%;
+        height: 50%;
+        background: var(--mw-primary-color);
+        border-radius: radius('full');
+        transform: translate(-50%, -50%) scale(0);
+        transition: var(--mw-transition);
+      }
+    }
 
-  // size variants
-  &-sm {
-    .mw-radio-button {
-      width: $_size-sm;
-      height: $_size-sm;
+    input[type='radio']:focus-visible + .mw-radio-button {
+      @include focus-halo;
+      border-color: var(--mw-primary-color);
     }
-    .mw-radio-label {
-      font-size: font-size('xs');
+
+    input[type='radio']:checked + .mw-radio-button {
+      border-color: var(--mw-primary-color);
     }
-  }
-  &-lg {
-    .mw-radio-button {
-      width: $_size-lg;
-      height: $_size-lg;
+    input[type='radio']:checked + .mw-radio-button::after {
+      transform: translate(-50%, -50%) scale(1);
     }
+
     .mw-radio-label {
-      font-size: font-size('md');
+      font-size: font-size('base');
+      color: var(--mw-text-color);
     }
-  }
 
-  // color variants
-  @each $name, $col in $_mw-radio-colors {
-    &-#{$name} {
-      input[type='radio']:checked + .mw-radio-button {
-        border-color: #{$col};
+    &-sm {
+      .mw-radio-button {
+        width: $_size-sm;
+        height: $_size-sm;
       }
-      input[type='radio']:checked + .mw-radio-button::after {
-        background: #{$col};
+      .mw-radio-label {
+        font-size: font-size('xs');
+      }
+    }
+    &-lg {
+      .mw-radio-button {
+        width: $_size-lg;
+        height: $_size-lg;
+      }
+      .mw-radio-label {
+        font-size: font-size('md');
       }
     }
-  }
 
-  // disabled
-  &-disabled {
-    cursor: not-allowed;
+    @each $name, $col in $semantic-colors {
+      &-#{$name} {
+        input[type='radio']:checked + .mw-radio-button {
+          border-color: #{$col};
+        }
+        input[type='radio']:checked + .mw-radio-button::after {
+          background: #{$col};
+        }
+      }
+    }
 
-    input[type='radio'] {
+    &-disabled {
       cursor: not-allowed;
-    }
-    .mw-radio-button {
-      background: var(--mw-gray-background);
-    }
-    .mw-radio-label {
-      color: var(--mw-text-muted-color);
+
+      input[type='radio'] {
+        cursor: not-allowed;
+      }
+      .mw-radio-button {
+        background: var(--mw-gray-background);
+      }
+      .mw-radio-label {
+        color: var(--mw-text-muted-color);
+      }
     }
   }
 }