maverick-wave 4.28.0 → 5.0.0

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

@@ -1,148 +1,182 @@
 @use '../abstracts' as *;
 
-.mw-form {
-  display: flex;
-  flex-direction: column;
-  gap: spacing('4');
-  width: 100%;
-
-  &-inline {
-    flex-direction: row;
-    align-items: center;
-    gap: spacing('4');
-  }
-
-  &-group {
+@layer mw.components {
+  .mw-form {
     display: flex;
     flex-direction: column;
-    padding: spacing('4');
-    gap: spacing('2');
-    border-radius: radius('sm');
-    border: 2px solid var(--mw-border);
-
-    // Explicit hook for the heading, mirrors mw-modal-title
-    &-title {
-      font-size: font-size('md');
-      font-weight: font-weight('bold');
-      color: var(--mw-text-color);
-      line-height: 1.2;
-      margin: spacing('0') spacing('0') spacing('1') spacing('0');
-    }
-  }
+    gap: spacing('4');
+    width: 100%;
 
-  label {
-    font-size: font-size('base');
-    span {
-      margin-bottom: spacing('1');
+    &-inline {
+      flex-direction: row;
+      align-items: center;
+      gap: spacing('4');
     }
-  }
 
-  &-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: spacing('3');
-    margin-top: spacing('5');
-    justify-content: flex-end;
-    position: relative;
-    text-align: right;
-
-    // The note above the buttons is `.mw-actions-note` (see _buttons.scss), so
-    // it looks the same in a form, a modal, a panel and a card. Only its
-    // alignment is the form's business, because a form row can be re-aligned.
-
-    // full-width stacked
-    &-full-width {
+    &-group {
+      display: flex;
       flex-direction: column;
+      padding: spacing('4');
+      gap: spacing('2');
+      border-radius: radius('sm');
+      border: 2px solid var(--mw-border);
+
+      &-title {
+        font-size: font-size('md');
+        font-weight: font-weight('bold');
+        color: var(--mw-text-color);
+        line-height: 1.2;
+        margin: spacing('0') spacing('0') spacing('1') spacing('0');
+      }
+    }
 
-      &:has(.mw-actions-note),
-      &:has(.mw-form-actions-hint) {
-        flex-wrap: nowrap;
+    label {
+      font-size: font-size('base');
+      span {
+        margin-bottom: spacing('1');
       }
+    }
 
-      .mw-actions-note,
-      .mw-form-actions-hint {
-        flex: 0 0 auto;
-        text-align: left;
+    &-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: spacing('3');
+      margin-top: spacing('5');
+      justify-content: flex-end;
+      position: relative;
+      text-align: right;
+
+      // The note above the buttons is `.mw-actions-note` (see _buttons.scss), so
+      // it looks the same in a form, a modal, a panel and a card. Only its
+      // alignment is the form's business, because a form row can be re-aligned.
+
+      &-full-width {
+        flex-direction: column;
+
+        &:has(.mw-actions-note),
+        &:has(.mw-form-actions-hint) {
+          flex-wrap: nowrap;
+        }
+
+        .mw-actions-note,
+        .mw-form-actions-hint {
+          flex: 0 0 auto;
+          text-align: left;
+        }
+
+        > * {
+          width: 100%;
+        }
       }
 
-      > * {
-        width: 100%;
+      &-center {
+        justify-content: center;
+        text-align: center;
+
+        .mw-actions-note,
+        .mw-form-actions-hint {
+          text-align: center;
+        }
       }
-    }
 
-    &-center {
-      justify-content: center;
-      text-align: center;
+      &-left {
+        justify-content: flex-start;
+        text-align: left;
 
-      .mw-actions-note,
-      .mw-form-actions-hint {
-        text-align: center;
+        .mw-actions-note,
+        .mw-form-actions-hint {
+          text-align: left;
+        }
       }
     }
 
-    &-left {
-      justify-content: flex-start;
-      text-align: left;
+    &-element-error {
+      border: 3px solid var(--mw-danger-color);
 
-      .mw-actions-note,
-      .mw-form-actions-hint {
-        text-align: left;
+      // A field brings its own padding, a checkbox or radio group is a bare flex
+      // container - without this its rows sit flush against the 3px border
+      &.mw-checkbox-group,
+      &.mw-radio-group {
+        padding: spacing('4');
+        border-radius: radius('sm');
       }
     }
   }
 
-  &-element-error {
-    border: 3px solid var(--mw-danger-color);
-  }
-}
+  // ===== Form Field - label + input + hint + error as a unit =====
+  // Designed e.g. for Angular reactive forms pattern:
+  //   <div class="mw-field">
+  //     <label class="mw-field-label mw-required">Email</label>
+  //     <input class="mw-input" formControlName="email">
+  //     <span class="mw-field-hint">We'll never share your email</span>
+  //     <span class="mw-field-error">Please enter a valid email</span>
+  //   </div>
+  .mw-field {
+    display: flex;
+    flex-direction: column;
+    gap: spacing('2');
 
-// ===== Form Field - label + input + hint + error as a unit =====
-// Designed e.g. for Angular reactive forms pattern:
-//   <div class="mw-field">
-//     <label class="mw-field-label mw-required">Email</label>
-//     <input class="mw-input" formControlName="email">
-//     <span class="mw-field-hint">We'll never share your email</span>
-//     <span class="mw-field-error">Please enter a valid email</span>
-//   </div>
-.mw-field {
-  display: flex;
-  flex-direction: column;
-  gap: spacing('2');
-
-  &-label {
-    font-size: font-size('base');
-    font-weight: font-weight('medium');
-    color: var(--mw-text-color);
-  }
+    &-label {
+      font-size: font-size('base');
+      font-weight: font-weight('medium');
+      color: var(--mw-text-color);
+    }
 
-  // Required field asterisk - add class mw-required or attribute data-required
-  &-label.mw-required::after,
-  &-label[data-required='true']::after {
-    content: ' *';
-    color: var(--mw-danger-text-color);
-    font-weight: font-weight('bold');
-  }
+    // Required field asterisk. The two explicit spellings stay for a label that
+    // is not next to its control - an Angular form where the validator lives in
+    // the component and the input carries no `required` attribute at all.
+    //
+    // The third selector is for the markup that does say so: a label directly in
+    // front of a required control gets the asterisk without anyone having to
+    // remember the class, and it cannot drift out of step with the validation,
+    // because it *is* the validation.
+    &-label.mw-required::after,
+    &-label[data-required='true']::after,
+    &-label:has(
+        + .mw-input:required,
+        + .mw-select:required,
+        + .mw-textarea:required
+      )::after {
+      content: ' *';
+      color: var(--mw-danger-text-color);
+      font-weight: font-weight('bold');
+    }
+
+    &-hint {
+      font-size: font-size('xs');
+      color: var(--mw-text-muted-color);
+    }
 
-  &-hint {
-    font-size: font-size('xs');
-    color: var(--mw-text-muted-color);
+    &-error {
+      font-size: font-size('xs');
+      color: var(--mw-danger-text-color);
+      display: flex;
+      align-items: center;
+      gap: spacing('1');
+    }
+
+    &.mw-field-has-error {
+      .mw-input,
+      .mw-select,
+      .mw-textarea {
+        border-color: var(--mw-danger-color);
+        @include focus-halo('danger-text-color');
+      }
+    }
   }
 
-  &-error {
-    font-size: font-size('xs');
-    color: var(--mw-danger-text-color);
-    display: flex;
-    align-items: center;
-    gap: spacing('1');
+  // The same look from the browser's own validation, so nothing has to toggle
+  // mw-field-has-error. `:user-invalid` and never `:invalid`, which is true from
+  // page load and would mark an empty required field before anyone typed.
+  // The class stays authoritative for a validator that lives in the application.
+  .mw-input:user-invalid,
+  .mw-select:user-invalid,
+  .mw-textarea:user-invalid {
+    border-color: var(--mw-danger-color);
+    @include focus-halo('danger-text-color');
   }
 
-  // When the field itself is in error state
-  &.mw-field-has-error {
-    .mw-input,
-    .mw-select,
-    .mw-textarea {
-      border-color: var(--mw-danger-color);
-      @include focus-halo('danger-text-color');
-    }
+  .mw-field:has(> :user-invalid) > .mw-field-hint {
+    color: var(--mw-danger-text-color);
   }
 }

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

@@ -1,132 +1,128 @@
 @use '../abstracts' as *;
 
-// Input with prefix and/or suffix (icon, text, button)
-.mw-input-group {
-  display: flex;
-  align-items: stretch;
-  width: 100%;
-
-  // Shared styles for prefix and suffix
-  .mw-input-group-prefix,
-  .mw-input-group-suffix {
+@layer mw.components {
+  .mw-input-group {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: spacing('2') spacing('3');
-    background: var(--mw-gray-background);
-    border: 2px solid var(--mw-border);
-    color: var(--mw-text-muted-color);
-    font-size: font-size('xs');
-    white-space: nowrap;
-    flex-shrink: 0;
-    transition: var(--mw-transition);
-    line-height: 1;
-    cursor: default;
-  }
-
-  .mw-input-group-prefix {
-    border-right: none;
-    border-radius: radius('sm') 0 0 radius('sm');
-  }
-
-  .mw-input-group-suffix {
-    border-left: none;
-    border-radius: 0 radius('sm') radius('sm') 0;
-  }
+    align-items: stretch;
+    width: 100%;
 
-  // The input loses its outer rounded corners
-  .mw-input {
-    flex: 1;
-    min-width: 0;
-    border-radius: 0;
+    .mw-input-group-prefix,
+    .mw-input-group-suffix {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: spacing('2') spacing('3');
+      background: var(--mw-gray-background);
+      border: 2px solid var(--mw-border);
+      color: var(--mw-text-muted-color);
+      font-size: font-size('xs');
+      white-space: nowrap;
+      flex-shrink: 0;
+      transition: var(--mw-transition);
+      line-height: 1;
+      cursor: default;
+    }
 
-    &:first-child {
+    .mw-input-group-prefix {
+      border-right: none;
       border-radius: radius('sm') 0 0 radius('sm');
     }
 
-    &:last-child {
+    .mw-input-group-suffix {
+      border-left: none;
       border-radius: 0 radius('sm') radius('sm') 0;
     }
 
-    // When input is focused, also highlight adjacent prefix/suffix
-    &:focus + .mw-input-group-suffix,
-    &:focus-within ~ .mw-input-group-suffix {
-      border-color: var(--mw-primary-color);
-    }
-  }
-
-  // Highlight prefix/suffix when inner input is focused
-  &:focus-within {
-    .mw-input-group-prefix,
-    .mw-input-group-suffix {
-      border-color: var(--mw-primary-color);
-    }
-  }
+    .mw-input {
+      flex: 1;
+      min-width: 0;
+      border-radius: 0;
 
-  // The field inside gives its halo up - three boxes each drawing their own
-  // ring around themselves is not a focused control, it is three focused
-  // controls - and the group draws one around the whole thing instead. Without
-  // this the group was the one field on the page whose focus was a border
-  // colour and nothing else.
-  .mw-input:focus {
-    box-shadow: none;
-  }
+      &:first-child {
+        border-radius: radius('sm') 0 0 radius('sm');
+      }
 
-  &:focus-within {
-    border-radius: radius('sm');
-    @include focus-halo;
-  }
+      &:last-child {
+        border-radius: 0 radius('sm') radius('sm') 0;
+      }
 
-  // Button as suffix/prefix (e.g. search button, copy button)
-  .mw-btn {
-    border-radius: 0;
-    border: 2px solid var(--mw-border);
-    flex-shrink: 0;
+      &:focus + .mw-input-group-suffix,
+      &:focus-within ~ .mw-input-group-suffix {
+        border-color: var(--mw-primary-color);
+      }
+    }
 
-    &:first-child {
-      border-right: none;
-      border-radius: radius('sm') 0 0 radius('sm');
+    &:focus-within {
+      .mw-input-group-prefix,
+      .mw-input-group-suffix {
+        border-color: var(--mw-primary-color);
+      }
     }
 
-    &:last-child {
-      border-left: none;
-      border-radius: 0 radius('sm') radius('sm') 0;
+    // The field inside gives its halo up - three boxes each drawing their own
+    // ring around themselves is not a focused control, it is three focused
+    // controls - and the group draws one around the whole thing instead. Without
+    // this the group was the one field on the page whose focus was a border
+    // colour and nothing else.
+    .mw-input:focus {
+      box-shadow: none;
     }
-  }
 
-  // Size variants - put on the group, and they reach the field too. They used
-  // to style only the prefix and suffix, so `mw-input-group-sm` around a plain
-  // `mw-input` gave a small frame around a full-size field and the modifier
-  // looked broken unless you also knew to write `mw-input-sm` inside it.
-  &-sm {
-    .mw-input-group-prefix,
-    .mw-input-group-suffix {
-      padding: spacing('1') spacing('2');
-      font-size: font-size('xs');
+    &:focus-within {
+      border-radius: radius('sm');
+      @include focus-halo;
     }
 
-    .mw-input,
     .mw-btn {
-      min-height: var(--mw-control-height-sm);
-      font-size: var(--mw-control-font-sm);
-      padding-block: spacing('1');
+      border-radius: 0;
+      border: 2px solid var(--mw-border);
+      flex-shrink: 0;
+
+      &:first-child {
+        border-right: none;
+        border-radius: radius('sm') 0 0 radius('sm');
+      }
+
+      &:last-child {
+        border-left: none;
+        border-radius: 0 radius('sm') radius('sm') 0;
+      }
     }
-  }
 
-  &-lg {
-    .mw-input-group-prefix,
-    .mw-input-group-suffix {
-      padding: spacing('3') spacing('4');
-      font-size: font-size('sm');
+    // Size variants - put on the group, and they reach the field too. They used
+    // to style only the prefix and suffix, so `mw-input-group-sm` around a plain
+    // `mw-input` gave a small frame around a full-size field and the modifier
+    // looked broken unless you also knew to write `mw-input-sm` inside it.
+    &-sm {
+      .mw-input-group-prefix,
+      .mw-input-group-suffix {
+        padding: spacing('1') spacing('2');
+        font-size: font-size('xs');
+      }
+
+      .mw-input,
+      .mw-btn {
+        min-height: var(--mw-control-height-sm);
+        font-size: var(--mw-control-font-sm);
+        padding-block: spacing('1');
+      }
     }
 
-    .mw-input,
-    .mw-btn {
-      min-height: var(--mw-control-height-lg);
-      font-size: var(--mw-control-font-lg);
-      // A step under the minimum, or the padding wins and the group grows past
-      // the size step it was asked for - same trap as on the standalone field
-      padding-block: spacing('2');
+    &-lg {
+      .mw-input-group-prefix,
+      .mw-input-group-suffix {
+        padding: spacing('3') spacing('4');
+        font-size: font-size('sm');
+      }
+
+      .mw-input,
+      .mw-btn {
+        min-height: var(--mw-control-height-lg);
+        font-size: var(--mw-control-font-lg);
+        // A step under the minimum, or the padding wins and the group grows past
+        // the size step it was asked for - same trap as on the standalone field
+        padding-block: spacing('2');
+      }
     }
   }
 }