@react-md/core 1.0.0-next.2 → 1.0.0-next.20

package/dist/form/_form.scss

@@ -3,6 +3,7 @@
 @use "sass:color";
 @use "../utils";
 @use "../box-shadows";
+@use "../box/box";
 @use "../button/button";
 @use "../progress/progress";
 @use "../theme/colors";
@@ -14,60 +15,59 @@
 @use "../typography/typography";
 @use "../interaction/interaction";
 
-$disable-everything: false !default;
-$disable-fieldset: $disable-everything !default;
-$disable-message: $disable-everything !default;
-$disable-label: $disable-everything !default;
-$disable-floating-label: $disable-everything !default;
-$disable-label-gap: $disable-everything !default;
-$disable-label-reversed: $disable-everything !default;
-$disable-label-stacked: $disable-everything !default;
-$disable-label-stacked-reversed: $disable-everything !default;
-$disable-file-input: $disable-everything !default;
-$disable-text-field: $disable-everything !default;
-$disable-textarea: $disable-everything !default;
+$form-disable-everything: false !default;
+$disable-fieldset: $form-disable-everything !default;
+$disable-message: $form-disable-everything !default;
+$disable-label: $form-disable-everything !default;
+$disable-floating-label: $form-disable-everything !default;
+$disable-label-gap: $form-disable-everything !default;
+$disable-label-reversed: $form-disable-everything !default;
+$disable-label-stacked: $form-disable-everything !default;
+$disable-label-stacked-reversed: $form-disable-everything !default;
+$disable-text-field: $form-disable-everything !default;
+$disable-textarea: $form-disable-everything !default;
 $disable-password: $disable-text-field !default;
 $disable-text-field-addon: $disable-text-field and $disable-password and
   $disable-textarea !default;
 $disable-placeholder-ellipsis: false !default;
 $disable-text-field-container-dense: false !default;
-$disable-select: $disable-everything !default;
+$disable-select: $form-disable-everything !default;
 $disable-option: $disable-select !default;
-$disable-native-select: $disable-everything !default;
-$disable-native-select-multiple: $disable-everything !default;
-$disable-checkbox: $disable-everything !default;
-$disable-radio: $disable-everything !default;
+$disable-native-select: $form-disable-everything !default;
+$disable-native-select-multiple: $form-disable-everything !default;
+$disable-checkbox: $form-disable-everything !default;
+$disable-radio: $form-disable-everything !default;
 $disable-uncontrolled-input-toggles: false !default;
-$disable-switch: $disable-everything !default;
+$disable-switch: $form-disable-everything !default;
 $disable-switch-circular-progress: progress.$disable-circular !default;
 $disable-switch-icon: false !default;
 $disable-menu-item-checkbox: $disable-checkbox !default;
 $disable-menu-item-radio: $disable-radio !default;
 $disable-menu-item-switch: $disable-switch !default;
-$disable-slider: $disable-everything !default;
-$disable-horizontal-slider: $disable-everything !default;
-$disable-vertical-slider: $disable-everything !default;
-$disable-range-slider: $disable-everything !default;
-$disable-discrete-slider: $disable-everything !default;
+$disable-slider: $form-disable-everything !default;
+$disable-horizontal-slider: $form-disable-everything !default;
+$disable-vertical-slider: $form-disable-everything !default;
+$disable-range-slider: $form-disable-everything !default;
+$disable-discrete-slider: $form-disable-everything !default;
 $disable-discrete-slider-marks: $disable-discrete-slider !default;
 $disable-discrete-slider-marks-labels: $disable-discrete-slider-marks !default;
 
 // Note: enabling the filled theme forces the underlined theme to be used since it depends on the same styles
-$disable-text-field-filled-theme: $disable-everything !default;
-$disable-text-field-outlined-theme: $disable-everything !default;
-$disable-text-field-underlined-theme: $disable-everything !default;
-$disable-text-field-counter: $disable-everything !default;
-$disable-text-field-underline-left: $disable-everything !default;
-$disable-text-field-underline-center: $disable-everything !default;
-$disable-text-field-underline-right: $disable-everything !default;
-
-$disable-textarea-resizing-rows: $disable-everything !default;
+$disable-text-field-filled-theme: $form-disable-everything !default;
+$disable-text-field-outlined-theme: $form-disable-everything !default;
+$disable-text-field-underlined-theme: $form-disable-everything !default;
+$disable-text-field-counter: $form-disable-everything !default;
+$disable-text-field-underline-left: $form-disable-everything !default;
+$disable-text-field-underline-center: $form-disable-everything !default;
+$disable-text-field-underline-right: $form-disable-everything !default;
+
+$disable-textarea-resizing-rows: $form-disable-everything !default;
 $disable-textarea-resizing-mask: $disable-textarea-resizing-rows !default;
-$disable-textarea-resize-horizontal: $disable-everything !default;
-$disable-textarea-resize-vertical: $disable-everything !default;
+$disable-textarea-resize-horizontal: $form-disable-everything !default;
+$disable-textarea-resize-vertical: $form-disable-everything !default;
 
-$active-color: theme.theme-get-var(primary-color) !default;
-$focus-color: interaction.$focus-color !default;
+$form-active-color: theme.theme-get-var(primary-color) !default;
+$form-focus-color: interaction.$focus-color !default;
 
 $label-gap: icon.$spacing !default;
 $label-font-size: 1em !default;
@@ -82,16 +82,16 @@ $label-floating-top-dense: 0.9rem !default;
 $label-floating-scale: 0.75 !default;
 $label-floating-padding: 0.25rem !default;
 
-$message-typography-styles: map.merge(
+$form-message-typography-styles: map.merge(
   typography.$body-2-styles,
   (
     font-size: 0.75rem,
   )
 ) !default;
-$message-counter-spacing: icon.$spacing !default;
-$message-margin-top: 0.5rem !default;
-$message-margin-bottom: 1rem !default;
-$message-min-height: 2rem !default;
+$form-message-counter-spacing: icon.$spacing !default;
+$form-message-margin-top: 0.5rem !default;
+$form-message-margin-bottom: 1rem !default;
+$form-message-min-height: 2rem !default;
 
 $text-field-typography: map.merge(
   typography.$base-font-styles,
@@ -106,7 +106,6 @@ $text-field-height: 3rem !default;
 $text-field-dense-height: 2.5rem !default;
 $text-field-label-height: 3.5rem !default;
 $text-field-label-dense-height: 3.25rem !default;
-$text-field-spacing: icon.$spacing !default;
 $text-field-border-radius: 0.25rem !default;
 $text-field-border-width: 1px !default;
 $text-field-border-width-active: 2px !default;
@@ -122,7 +121,9 @@ $text-field-underlined-label-padding-top: 1.5rem !default;
 $text-field-underlined-label-left-offset: icon.$spacing !default;
 $text-field-color-min-width: 5rem !default;
 
+$text-field-addon-gap: 0.25rem !default;
 $text-field-addon-margin: icon.$spacing !default;
+$text-field-addon-spacing: icon.get-var(spacing) !default;
 
 $text-field-light-border-color: rgba(#000, 0.12) !default;
 $text-field-dark-border-color: rgba(#fff, 0.5) !default;
@@ -190,7 +191,7 @@ $switch-track-horizontal-padding: 0.875em !default;
 $switch-track-light-background-color: colors.$grey-400 !default;
 $switch-track-dark-background-color: if(
   theme.$disable-dark-elevation,
-  $switch-track-light-theme-background-color,
+  $switch-track-light-background-color,
   map.get(theme.$dark-elevation-colors, 24)
 ) !default;
 $switch-track-background-color: theme.get-default-color(
@@ -266,11 +267,13 @@ $slider-transition-timing-function: transition.$linear-timing-function !default;
 $_disable-text-field-container: $disable-text-field and $disable-password and
   $disable-textarea and $disable-select and $disable-native-select;
 
-$variables: (
+$form-variables: (
   active-color,
   focus-color,
   addon-top,
+  addon-spacing,
   addon-margin-top,
+  addon-left-offset,
   label-floating-top,
   label-left-offset,
   label-top-offset,
@@ -283,6 +286,9 @@ $variables: (
   text-field-border-color,
   text-field-hover-border-color,
   text-field-filled-color,
+  text-field-filled-padding,
+  text-field-outlined-padding,
+  text-field-underlined-padding,
   textarea-height,
   textarea-padding,
   switch-track-background-color,
@@ -305,8 +311,8 @@ $variables: (
   slider-mark-inactive-opacity
 );
 
-@function get-var($name, $fallback: null) {
-  $var: utils.get-var-name($variables, $name, "form");
+@function form-get-var($name, $fallback: null) {
+  $var: utils.get-var-name($form-variables, $name, "form");
   @if $fallback {
     @return var(#{$var}, #{$fallback});
   }
@@ -314,29 +320,34 @@ $variables: (
   @return var(#{$var});
 }
 
-@mixin set-var($name, $value) {
+@mixin form-set-var($name, $value) {
   @if $value {
-    #{utils.get-var-name($variables, $name, "form")}: #{$value};
+    #{utils.get-var-name($form-variables, $name, "form")}: #{$value};
   }
 }
 
-@mixin use-var($property, $name: $property, $fallback: null) {
-  #{$property}: get-var($name, $fallback);
+@mixin form-use-var($property, $name: $property, $fallback: null) {
+  #{$property}: form-get-var($name, $fallback);
 }
 
-@mixin use-light-theme {
-  @if not $disable-everything {
-    @include set-var(text-field-border-color, $text-field-light-border-color);
-    @include set-var(
+@mixin form-use-light-theme {
+  @if not $form-disable-everything {
+    @include form-set-var(
+      text-field-border-color,
+      $text-field-light-border-color
+    );
+    @include form-set-var(
       text-field-hover-border-color,
       $text-field-light-hover-border-color
     );
-    @include set-var(
-      text-field-filled-color,
-      $text-field-light-filled-background-color
-    );
+    @if not $disable-text-field-filled-theme {
+      @include form-set-var(
+        text-field-filled-color,
+        $text-field-light-filled-background-color
+      );
+    }
     @if not $disable-switch {
-      @include set-var(
+      @include form-set-var(
         switch-track-background-color,
         $switch-track-light-background-color
       );
@@ -348,7 +359,7 @@ $variables: (
       $slider-mark-light-active-color !=
       $slider-mark-dark-active-color
     {
-      @include set-var(
+      @include form-set-var(
         slider-mark-active-color,
         $slider-mark-light-active-color
       );
@@ -358,7 +369,7 @@ $variables: (
       $slider-mark-light-inactive-color !=
       $slider-mark-dark-inactive-color
     {
-      @include set-var(
+      @include form-set-var(
         slider-mark-inactive-color,
         $slider-mark-light-inactive-color
       );
@@ -367,7 +378,7 @@ $variables: (
       $slider-mark-light-inactive-opacity !=
       $slider-mark-dark-inactive-opacity
     {
-      @include set-var(
+      @include form-set-var(
         slider-mark-inactive-opacity,
         $slider-mark-light-inactive-opacity
       );
@@ -375,19 +386,24 @@ $variables: (
   }
 }
 
-@mixin use-dark-theme {
-  @if not $disable-everything {
-    @include set-var(text-field-border-color, $text-field-dark-border-color);
-    @include set-var(
+@mixin form-use-dark-theme {
+  @if not $form-disable-everything {
+    @include form-set-var(
+      text-field-border-color,
+      $text-field-dark-border-color
+    );
+    @include form-set-var(
       text-field-hover-border-color,
       $text-field-dark-hover-border-color
     );
-    @include set-var(
-      text-field-filled-color,
-      $text-field-dark-filled-background-color
-    );
+    @if not $disable-text-field-filled-theme {
+      @include form-set-var(
+        text-field-filled-color,
+        $text-field-dark-filled-background-color
+      );
+    }
     @if not $disable-switch {
-      @include set-var(
+      @include form-set-var(
         switch-track-background-color,
         $switch-track-dark-background-color
       );
@@ -399,7 +415,7 @@ $variables: (
       $slider-mark-light-active-color !=
       $slider-mark-dark-active-color
     {
-      @include set-var(
+      @include form-set-var(
         slider-mark-active-color,
         $slider-mark-dark-active-color
       );
@@ -409,7 +425,7 @@ $variables: (
       $slider-mark-light-inactive-color !=
       $slider-mark-dark-inactive-color
     {
-      @include set-var(
+      @include form-set-var(
         slider-mark-inactive-color,
         $slider-mark-dark-inactive-color
       );
@@ -418,7 +434,7 @@ $variables: (
       $slider-mark-light-inactive-opacity !=
       $slider-mark-dark-inactive-opacity
     {
-      @include set-var(
+      @include form-set-var(
         slider-mark-inactive-opacity,
         $slider-mark-dark-inactive-opacity
       );
@@ -426,402 +442,494 @@ $variables: (
   }
 }
 
-@mixin file-input-styles {
-  .rmd-file-input:focus-within::before {
-    @include utils.keyboard-only {
-      @include interaction.focus-styles;
+@mixin form-message-styles($disable-layer: false) {
+  @include utils.optional-layer(form, $disable-layer) {
+    .rmd-form-message-container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
     }
-  }
-}
-
-@mixin form-message-styles {
-  .rmd-form-message-container {
-    display: flex;
-    flex-direction: column;
-  }
 
-  .rmd-form-message {
-    @include utils.map-to-styles($message-typography-styles);
+    .rmd-form-message {
+      @include utils.map-to-styles($form-message-typography-styles);
 
-    display: flex;
-    margin: $message-margin-top 0 $message-margin-bottom;
-    min-height: $message-min-height;
+      display: flex;
+      margin: $form-message-margin-top 0 $form-message-margin-bottom;
+      min-height: $form-message-min-height;
 
-    @if not $disable-text-field-filled-theme and $text-field-filled-padding {
-      &--filled {
-        padding-left: $text-field-filled-padding;
-        padding-right: $text-field-filled-padding;
+      @if not $disable-text-field-filled-theme {
+        &--filled {
+          @include form-use-var(padding-left, text-field-filled-padding);
+          @include form-use-var(padding-right, text-field-filled-padding);
+        }
       }
-    }
 
-    @if not $disable-text-field-outlined-theme and $text-field-outlined-padding
-    {
-      &--outline {
-        padding-left: $text-field-outlined-padding;
-        padding-right: $text-field-outlined-padding;
+      @if not $disable-text-field-outlined-theme {
+        &--outline {
+          @include form-use-var(padding-left, text-field-outlined-padding);
+          @include form-use-var(padding-right, text-field-outlined-padding);
+        }
       }
-    }
 
-    @if not
-      $disable-text-field-underlined-theme and
-      $text-field-underlined-padding
-    {
-      &--underline {
-        padding-left: $text-field-underlined-padding;
-        padding-right: $text-field-underlined-padding;
+      @if not $disable-text-field-underlined-theme {
+        &--underline {
+          @include form-use-var(padding-left, text-field-underlined-padding);
+          @include form-use-var(padding-right, text-field-underlined-padding);
+        }
       }
-    }
 
-    &__message {
-      margin: 0;
-    }
+      &__message {
+        margin: 0;
+      }
 
-    @if not $disable-text-field-counter {
-      &__counter {
-        @include utils.auto-rtl(margin-left, auto);
-        @include utils.auto-rtl(padding-left, $message-counter-spacing);
+      @if not $disable-text-field-counter {
+        &__counter {
+          flex-shrink: 0;
+          margin-left: auto;
+          padding-left: $form-message-counter-spacing;
+          white-space: nowrap;
 
-        flex-shrink: 0;
-        white-space: nowrap;
+          @include utils.rtl {
+            margin-left: 0;
+            margin-right: auto;
+            padding-left: 0;
+            padding-right: $form-message-counter-spacing;
+          }
+        }
       }
     }
   }
 }
 
-@mixin label-styles {
-  .rmd-label {
-    @include utils.map-to-styles($label-typography);
+@mixin label-styles($disable-layer: false) {
+  @include utils.optional-layer(form, $disable-layer) {
+    .rmd-label {
+      @include utils.map-to-styles($label-typography);
 
-    align-items: center;
-    display: inline-flex;
-    transition-duration: transition.$linear-duration;
-    transition-property: background-color, transform;
+      align-items: center;
+      display: inline-flex;
+      transition-duration: transition.$linear-duration;
+      transition-property: background-color, transform;
 
-    $active-selector: "&--active";
-    @if not $_disable-text-field-container {
-      $active-selector: $active-selector +
-        ", .rmd-text-field-container:focus-within &";
-    }
+      $active-selector: "&--active";
+      @if not $_disable-text-field-container {
+        $active-selector: $active-selector +
+          ", .rmd-text-field-container:focus-within &";
+      }
 
-    #{$active-selector} {
-      @include use-var(color, focus-color);
-    }
+      #{$active-selector} {
+        @include form-use-var(color, focus-color);
+      }
 
-    @if not $disable-floating-label {
-      &--floating {
-        @include utils.rtl {
-          left: auto;
-          right: 0;
+      @if not $disable-floating-label {
+        &--floating {
+          left: 0;
+          position: absolute;
+          top: 0;
           transform: translate(
-            utils.negate-var(get-var(text-field-padding-left)),
-            get-var(label-floating-top)
+            form-get-var(text-field-padding-left),
+            form-get-var(label-floating-top)
           );
+
+          @include utils.rtl {
+            left: auto;
+            right: 0;
+            transform: translate(
+              utils.negate-var(form-get-var(text-field-padding-left)),
+              form-get-var(label-floating-top)
+            );
+          }
         }
 
-        left: 0;
-        // disable pointer events for floating labels so that the input behind
-        // is clicked instead. this prevents double click events for the Select
-        // component
-        pointer-events: none;
-        position: absolute;
-        top: 0;
-        transform: translate(
-          get-var(text-field-padding-left),
-          get-var(label-floating-top)
-        );
-      }
+        &--floating-dense {
+          @include form-set-var(label-floating-top, $label-floating-top-dense);
+        }
 
-      &--floating-dense {
-        @include set-var(label-floating-top, $label-floating-top-dense);
-      }
+        $floating-active-selector: "&--floating-active";
+        @if not
+          $disable-text-field or not
+          $disable-password or not
+          $disable-textarea or not
+          $disable-select
+        {
+          // The label should automatically float while the input is not focused
+          // and there is a value the label _should_ always be the next element.
+          // However, password managers might inject an element in the DOM
+          // before the label to display their way of autocompleting the field
+          // so it also needs to support the label appearing anywhere after the
+          // input instead of the next element. It should also ignore the select
+          // field since it is more of a hidden input. Here are a few examples:
+          //
+          // ```html
+          // <!-- Simple TextField with no password manager -->
+          // <input class="rmd-text-field" type="text" />
+          // <label class="rmd-label rmd-label--floating"></label>
+          //
+          // <!-- Simple TextField with password manager -->
+          // <input class="rmd-text-field" type="text" />
+          // <div style="position: relative !important; ...">...</div>
+          // <label class="rmd-label rmd-label--floating"></label>
+          //
+          // <!-- Simple Select -->
+          // <input class="rmd-select rmd-text-field" type="text" />
+          // <span class="rmd-label rmd-label--floating"></span>
+          // ```
+          $valued-input: ", .rmd-text-field:where(:not(:placeholder-shown))";
+
+          // so this targets the TextField with no password manager
+          $valued-input-with-floating-label-next-element: $valued-input +
+            " + &--floating";
+          // this targets the TextField with a password manager and excludes the
+          // Select
+          $valued-input-with-floating-label-any-relative-element: $valued-input +
+            " ~ :where(:not(.rmd-select)) ~ &--floating";
+
+          $text-field-floating: $valued-input-with-floating-label-next-element +
+            $valued-input-with-floating-label-any-relative-element;
+
+          $floating-active-selector: $floating-active-selector +
+            ", .rmd-text-field-container:focus-within &--floating" +
+            $text-field-floating;
+        }
+        @if not $disable-native-select {
+          $floating-active-selector: $floating-active-selector +
+            ", .rmd-native-select[multiple] ~ &--floating" +
+            ", .rmd-native-select:where(:not(:invalid)) ~ &--floating";
+        }
 
-      $floating-active-selector: "&--floating-active";
-      @if not
-        $disable-text-field or not
-        $disable-password or not
-        $disable-textarea
-      {
-        $floating-active-selector: $floating-active-selector +
-          ", .rmd-text-field-container:focus-within &--floating" +
-          ", .rmd-text-field:not(:placeholder-shown) + &--floating";
-      }
-      @if not $disable-native-select {
-        $floating-active-selector: $floating-active-selector +
-          ", .rmd-native-select[multiple] + &--floating" +
-          ", .rmd-native-select:not(:invalid) + &--floating";
-      }
+        #{$floating-active-selector} {
+          @include form-use-var(
+            background-color,
+            label-active-background-color
+          );
+          @include form-use-var(padding, label-active-padding);
 
-      #{$floating-active-selector} {
-        @include utils.rtl {
           transform: scale($label-floating-scale)
             translate(
-              utils.negate-var(get-var(label-left-offset)),
-              get-var(label-top-offset)
+              form-get-var(label-left-offset),
+              form-get-var(label-top-offset)
             );
-        }
-        @include use-var(background-color, label-active-background-color);
-        @include use-var(padding, label-active-padding);
+          // need to add the `transform-origin` because of the scaling applied.
+          // it'll change the position based on the size of the label otherwise
+          transform-origin: 0 0;
+          z-index: 1;
 
-        transform: scale($label-floating-scale)
-          translate(get-var(label-left-offset), get-var(label-top-offset));
-        z-index: 1;
+          @include utils.rtl {
+            transform: scale($label-floating-scale)
+              translate(
+                utils.negate-var(form-get-var(label-left-offset)),
+                form-get-var(label-top-offset)
+              );
+            transform-origin: 100% 0;
+          }
+        }
       }
-    }
 
-    @if not $disable-label-gap {
-      &--gap {
-        gap: $label-gap;
+      @if not $disable-label-gap {
+        &--gap {
+          gap: $label-gap;
+        }
       }
-    }
 
-    @if not $disable-label-reversed {
-      &--reversed {
-        flex-direction: row-reverse;
-        // this makes it so the content is at the starting edge
-        justify-content: flex-end;
+      @if not $disable-label-reversed {
+        &--reversed {
+          flex-direction: row-reverse;
+          // this makes it so the content is at the starting edge
+          justify-content: flex-end;
+        }
       }
-    }
 
-    @if not $disable-label-stacked {
-      &--stacked {
-        flex-direction: column;
+      @if not $disable-label-stacked {
+        &--stacked {
+          flex-direction: column;
+        }
       }
-    }
 
-    @if not $disable-label-stacked-reversed {
-      &--stacked-reversed {
-        flex-direction: column-reverse;
+      @if not $disable-label-stacked-reversed {
+        &--stacked-reversed {
+          flex-direction: column-reverse;
+        }
       }
     }
   }
 }
 
-@mixin text-field-container-styles {
-  .rmd-text-field-container {
-    @include use-var(height, text-field-height);
+@mixin text-field-container-styles($disable-layer: false) {
+  @include utils.optional-layer(form, $disable-layer) {
+    .rmd-text-field-container {
+      @include form-use-var(height, text-field-height);
 
-    align-items: center;
-    display: flex;
-    position: relative;
+      align-items: center;
+      display: flex;
+      flex: 1 1 auto;
+      position: relative;
+      width: 100%;
 
-    @if not $disable-text-field-container-dense {
-      &--dense {
-        @include set-var(text-field-height, $text-field-dense-height);
-      }
+      @if not $disable-text-field-container-dense {
+        &--dense {
+          @include form-set-var(text-field-height, $text-field-dense-height);
+        }
 
-      &--dense-label {
-        @include set-var(text-field-height, $text-field-label-dense-height);
+        &--dense-label {
+          @include form-set-var(
+            text-field-height,
+            $text-field-label-dense-height
+          );
+        }
       }
-    }
-
-    &--inline {
-      display: inline-flex;
-    }
 
-    &--stretch {
-      flex: 1 1 auto;
-      width: 100%;
-    }
+      &--inline {
+        display: inline-flex;
+        width: auto;
+      }
 
-    &--label {
-      @include set-var(text-field-height, $text-field-label-height);
-    }
+      &--label {
+        @include form-set-var(text-field-height, $text-field-label-height);
+      }
 
-    &--error {
-      @if not $disable-text-field-addon {
-        @include icon.set-var(color, currentcolor);
+      &--error {
+        @if not $disable-text-field-addon {
+          @include icon.set-var(color, currentcolor);
+        }
+        @include form-set-var(active-color, currentcolor);
+        @include form-set-var(focus-color, currentcolor);
+
+        @if not
+          $disable-text-field-underlined-theme or not
+          $disable-text-field-outlined-theme
+        {
+          @include form-set-var(
+            text-field-border-color,
+            theme.theme-get-var(error-color)
+          );
+          @include form-set-var(
+            text-field-hover-border-color,
+            theme.theme-get-var(error-color)
+          );
+        }
       }
-      @include set-var(active-color, currentcolor);
-      @include set-var(focus-color, currentcolor);
 
-      @if not
-        $disable-text-field-underlined-theme or not
-        $disable-text-field-outlined-theme
-      {
-        @include set-var(
+      &--hoverable:hover {
+        @include form-set-var(
           text-field-border-color,
-          theme.theme-get-var(error-color)
-        );
-        @include set-var(
-          text-field-hover-border-color,
-          theme.theme-get-var(error-color)
+          form-get-var(text-field-hover-border-color)
         );
       }
-    }
 
-    &--hoverable:hover {
-      @include set-var(
-        text-field-border-color,
-        get-var(text-field-hover-border-color)
-      );
-    }
+      @if not $disable-text-field-outlined-theme {
+        &--outline {
+          @include form-set-var(
+            text-field-padding-left,
+            form-get-var(text-field-outlined-padding)
+          );
+          @include form-set-var(
+            text-field-padding-right,
+            form-get-var(text-field-outlined-padding)
+          );
+          @include form-use-var(border-color, text-field-border-color);
+          @if not $disable-text-field-addon {
+            @include form-set-var(
+              addon-left-offset,
+              form-get-var(text-field-outlined-padding)
+            );
+          }
 
-    @if not $disable-text-field-outlined-theme {
-      &--outline {
-        @include set-var(text-field-padding-left, $text-field-outlined-padding);
-        @include set-var(
-          text-field-padding-right,
-          $text-field-outlined-padding
-        );
-        @include set-var(
-          label-left-offset,
-          $text-field-outlined-padding - $label-floating-padding
-        );
-        @include set-var(label-top-offset, -50%);
-        @include set-var(label-active-padding, 0 $label-floating-padding);
-        @include set-var(
-          label-active-background-color,
-          theme.theme-get-var(background-color)
-        );
-        @include use-var(border-color, text-field-border-color);
+          @if not $disable-floating-label {
+            @include form-set-var(
+              label-left-offset,
+              form-get-var(text-field-outlined-padding)
+            );
+            @include form-set-var(label-top-offset, -50%);
+            @include form-set-var(
+              label-active-padding,
+              0 $label-floating-padding
+            );
+            @include form-set-var(
+              label-active-background-color,
+              theme.theme-get-var(background-color)
+            );
+          }
 
-        border-radius: $text-field-border-radius;
-        border-style: solid;
-        border-width: $text-field-border-width;
+          border-radius: $text-field-border-radius;
+          border-style: solid;
+          border-width: $text-field-border-width;
+        }
 
-        &::after {
-          @include utils.pseudo-element;
+        &--outline:focus-within,
+        &--outline-active {
+          @include interaction.outline(
+            $box-shadow: false,
+            $color: interaction.get-var(focus-color),
+            $outline-offset: false
+          );
 
-          box-shadow: 0
-            0
-            0
-            $text-field-border-width-active
-            get-var(focus-color);
-          opacity: 0;
-          transition: opacity transition.$linear-duration;
+          @if not interaction.$disable-outline-offset {
+            outline-offset: calc($text-field-border-width * -1);
+          }
         }
-      }
 
-      &--outline:focus-within::after,
-      &--outline-active::after {
-        opacity: 1;
-      }
-
-      &--outline-left {
-        $distance: calc(
-          #{icon.get-var(size)} +
-            #{$text-field-outlined-padding +
-            $text-field-spacing}
-        );
+        &--outline-error {
+          @include interaction.set-var(focus-color, currentcolor);
+        }
 
-        @include set-var(text-field-padding-left, $distance);
-      }
+        @if not $disable-text-field-addon {
+          &--outline-left {
+            $distance: calc(
+              icon.get-var(size) +
+                form-get-var(text-field-outlined-padding) +
+                form-get-var(addon-spacing)
+            );
 
-      &--outline-right {
-        $distance: calc(#{icon.get-var(size)} + #{$text-field-spacing * 2});
+            @include form-set-var(text-field-padding-left, $distance);
+          }
 
-        @include set-var(text-field-padding-right, $distance);
-      }
-    }
+          &--outline-right {
+            $distance: calc(
+              icon.get-var(size) + calc(form-get-var(addon-spacing) * 2)
+            );
 
-    @if not $disable-text-field-filled-theme {
-      &--filled {
-        @include set-var(text-field-padding-left, $text-field-filled-padding);
-        @include set-var(text-field-padding-right, $text-field-filled-padding);
-        @include set-var(label-left-offset, $text-field-filled-padding);
-        @include use-var(background-color, text-field-filled-color);
+            @include form-set-var(text-field-padding-right, $distance);
+          }
+        }
       }
-    }
-
-    // the filled theme uses the same styles as underline
-    @if not
-      $disable-text-field-underlined-theme or not
-      $disable-text-field-filled-theme
-    {
-      &--underline {
-        @include use-var(border-color, text-field-border-color);
 
-        border-bottom-style: solid;
-        border-bottom-width: $text-field-border-width;
-
-        @if $text-field-underlined-padding {
-          @include set-var(
+      @if not $disable-text-field-filled-theme {
+        &--filled {
+          @include theme.theme-set-var(
+            background-color,
+            form-get-var(text-field-filled-color)
+          );
+          @include theme.theme-use-var(background-color);
+          @include form-set-var(
             text-field-padding-left,
-            $text-field-underlined-padding
+            $text-field-filled-padding
           );
-          @include set-var(
+          @include form-set-var(
             text-field-padding-right,
-            $text-field-underlined-padding
+            $text-field-filled-padding
           );
+          @if not $disable-floating-label {
+            @include form-set-var(
+              label-left-offset,
+              $text-field-filled-padding + $label-floating-padding
+            );
+          }
+
+          @if not $disable-text-field-addon {
+            @include form-set-var(
+              addon-left-offset,
+              $text-field-filled-padding
+            );
+          }
         }
+      }
 
-        &::after {
-          @include use-var(background-color, focus-color);
+      // the filled theme uses the same styles as underline
+      @if not
+        $disable-text-field-underlined-theme or not
+        $disable-text-field-filled-theme
+      {
+        &--underline {
+          @include form-use-var(border-color, text-field-border-color);
 
-          bottom: -$text-field-border-width;
-          content: "";
-          height: $text-field-border-width-active;
-          left: 0;
-          position: absolute;
-          right: 0;
-          transform: scale(0);
-          transition: transform
-            transition.$linear-duration
-            transition.$linear-timing-function;
-          z-index: 1;
+          border-bottom-style: solid;
+          border-bottom-width: $text-field-border-width;
+
+          @if $text-field-underlined-padding {
+            @include form-set-var(
+              text-field-padding-left,
+              $text-field-underlined-padding
+            );
+            @include form-set-var(
+              text-field-padding-right,
+              $text-field-underlined-padding
+            );
+          }
+
+          &::after {
+            @include form-use-var(background-color, focus-color);
+
+            bottom: -$text-field-border-width;
+            content: "";
+            height: $text-field-border-width-active;
+            left: 0;
+            position: absolute;
+            right: 0;
+            transform: scale(0);
+            transition: transform
+              transition.$linear-duration
+              transition.$linear-timing-function;
+            z-index: 1;
+          }
         }
-      }
 
-      @if $text-field-underlined-placeholder-height {
-        &--underline-placeholder {
-          @include set-var(
-            text-field-padding-top,
-            $text-field-underlined-placeholder-addon-padding-top
-          );
-          height: $text-field-underlined-placeholder-height;
+        @if $text-field-underlined-placeholder-height {
+          &--underline-placeholder {
+            @include form-set-var(
+              text-field-padding-top,
+              $text-field-underlined-placeholder-addon-padding-top
+            );
+            height: $text-field-underlined-placeholder-height;
+          }
+
+          &--underline-placeholder-only {
+            @include form-set-var(
+              text-field-padding-top,
+              $text-field-underlined-placeholder-padding-top
+            );
+          }
         }
 
-        &--underline-placeholder-only {
-          @include set-var(
+        &--underline-labelled {
+          @include form-set-var(
             text-field-padding-top,
-            $text-field-underlined-placeholder-padding-top
+            $text-field-underlined-label-padding-top
           );
+          @include form-set-var(addon-margin-top, $text-field-addon-margin);
         }
-      }
-
-      &--underline-labelled {
-        @include set-var(
-          text-field-padding-top,
-          $text-field-underlined-label-padding-top
-        );
-        @include set-var(addon-margin-top, $text-field-addon-margin);
-      }
 
-      @if not $disable-text-field-underline-left {
-        &--underline-left::after {
-          transform-origin: left;
+        @if not $disable-text-field-underline-left {
+          &--underline-left::after {
+            transform-origin: left;
+          }
         }
-      }
 
-      @if not $disable-text-field-underline-center {
-        &--underline-center::after {
-          transform-origin: center;
+        @if not $disable-text-field-underline-center {
+          &--underline-center::after {
+            transform-origin: center;
+          }
         }
-      }
 
-      @if not $disable-text-field-underline-right {
-        &--underline-right::after {
-          transform-origin: right;
+        @if not $disable-text-field-underline-right {
+          &--underline-right::after {
+            transform-origin: right;
+          }
         }
-      }
 
-      &:focus-within::after,
-      &--underline-active::after {
-        transform: scale(1);
-      }
-
-      @if not $disable-text-field-addon {
-        $addon-offset: "#{icon.get-var(size)} + #{$text-field-underlined-label-left-offset * 2}";
-        @if $text-field-underlined-padding {
-          $addon-offset: "#{$addon-offset} + #{$text-field-underlined-padding}";
+        &:focus-within::after,
+        &--underline-active::after {
+          transform: scale(1);
         }
 
-        &--underline-left-addon {
-          @include set-var(text-field-padding-left, calc(#{$addon-offset}));
-        }
+        @if not $disable-text-field-addon {
+          $addon-offset: "#{icon.get-var(size)} + #{$text-field-underlined-label-left-offset * 2}";
+          @if $text-field-underlined-padding {
+            $addon-offset: "#{$addon-offset} + #{$text-field-underlined-padding}";
+          }
+
+          &--underline-left-addon {
+            @include form-set-var(
+              text-field-padding-left,
+              calc(#{$addon-offset})
+            );
+          }
 
-        &--underline-right-addon {
-          @include set-var(text-field-padding-right, calc(#{$addon-offset}));
+          &--underline-right-addon {
+            @include form-set-var(
+              text-field-padding-right,
+              calc(#{$addon-offset})
+            );
+          }
         }
       }
     }
@@ -830,13 +938,9 @@ $variables: (
 
 @mixin _text-field-base-styles {
   @include utils.map-to-styles($text-field-typography);
-  @include utils.rtl {
-    @include use-var(padding-left, text-field-padding-right);
-    @include use-var(padding-right, text-field-padding-left);
-  }
-  @include use-var(padding-left, text-field-padding-left);
-  @include use-var(padding-right, text-field-padding-right);
-  @include use-var(padding-top, text-field-padding-top);
+  @include form-use-var(padding-left, text-field-padding-left);
+  @include form-use-var(padding-right, text-field-padding-right);
+  @include form-use-var(padding-top, text-field-padding-top);
 
   background-color: transparent;
   border-width: 0;
@@ -845,1128 +949,1285 @@ $variables: (
   height: 100%;
   outline: none;
   width: 100%;
-
-  &[disabled] {
-    @include theme.theme-use-var(color, text-disabled-color);
-  }
 }
 
-@mixin text-field-styles {
-  .rmd-text-field {
-    @include _text-field-base-styles;
+@mixin text-field-styles($disable-layer: false) {
+  @include utils.optional-layer(form, $disable-layer) {
+    .rmd-text-field {
+      @include _text-field-base-styles;
 
-    @if $text-field-color-min-width {
-      &[type="color"] {
-        min-width: $text-field-color-min-width;
+      &[disabled] {
+        @include theme.theme-use-var(color, text-disabled-color);
       }
-    }
 
-    &::placeholder {
-      @if not $disable-placeholder-ellipsis {
-        @include typography.text-overflow;
+      @if $text-field-color-min-width {
+        &[type="color"] {
+          min-width: $text-field-color-min-width;
+        }
       }
 
-      @include theme.theme-use-var(color, text-secondary-color);
-      // want to gain the same font styles as the input/textarea itself,
-      // just apply different colors as needed instead. Can't just do font: inherit
-      // since it'll break the styles in firefox.
-      font-family: inherit;
-      font-size: inherit;
-      font-weight: inherit;
+      &::placeholder {
+        @if not $disable-placeholder-ellipsis {
+          @include typography.text-overflow;
+        }
 
-      // fix firefox setting opacity to 0.54 by default
-      opacity: 1;
+        @include theme.theme-use-var(color, text-secondary-color);
+        // want to gain the same font styles as the input/textarea itself,
+        // just apply different colors as needed instead. Can't just do font: inherit
+        // since it'll break the styles in firefox.
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
 
-      // Note: doesn't look like firefox applies css transitions to placeholder text?
-      transition: opacity transition.$linear-duration;
-    }
+        // fix firefox setting opacity to 0.54 by default
+        opacity: 1;
 
-    &[disabled]::placeholder {
-      color: inherit;
-    }
+        // Note: doesn't look like firefox applies css transitions to placeholder text?
+        transition: opacity transition.$linear-duration;
+      }
 
-    &--placeholder-hidden:not(:focus)::placeholder {
-      opacity: 0;
+      &[disabled]::placeholder {
+        color: inherit;
+      }
+
+      &--placeholder-hidden:not(:focus)::placeholder {
+        opacity: 0;
+      }
+
+      @include utils.rtl {
+        @include form-use-var(padding-left, text-field-padding-right);
+        @include form-use-var(padding-right, text-field-padding-left);
+      }
     }
   }
 }
 
-@mixin password-styles {
-  .rmd-password {
-    @include set-var(
-      text-field-padding-right,
-      $password-visibility-toggle-spacing
-    );
+@mixin password-styles($disable-layer: false) {
+  @include utils.optional-layer(form, $disable-layer) {
+    .rmd-password {
+      @include form-set-var(
+        text-field-padding-right,
+        $password-visibility-toggle-spacing
+      );
 
-    &__input {
-      @include utils.auto-rtl(margin-right, button.get-var(icon-size));
-    }
+      &__input {
+        @include button.use-var(margin-right, icon-size);
+
+        @include utils.rtl {
+          @include button.use-var(margin-left, icon-size);
 
-    &__toggle {
-      @include utils.auto-rtl(right, 0);
+          margin-right: 0;
+        }
+      }
 
-      position: absolute;
+      &__toggle {
+        position: absolute;
+        right: 0;
+
+        @include utils.rtl {
+          left: 0;
+          right: auto;
+        }
+      }
     }
   }
 }
 
-@mixin textarea-container-styles {
-  .rmd-textarea-container {
-    @include set-var(addon-top, $textarea-addon-top);
-
-    height: auto;
-    max-width: 100%;
-    padding-top: calc(
-      #{get-var(text-field-padding-top)} + #{get-var(textarea-padding)}
-    );
+@mixin textarea-container-styles($disable-layer: false) {
+  @include utils.optional-layer(form, $disable-layer) {
+    .rmd-textarea-container {
+      @include form-set-var(addon-top, $textarea-addon-top);
 
-    &--cursor:hover {
-      // need to add this cursor back since the textarea container adds padding to
-      // itself instead of the textarea so it loses this cursor. the container
-      // element will still focus the textarea when clicked
-      cursor: text;
-    }
+      height: auto;
+      max-width: 100%;
+      padding-top: calc(
+        #{form-get-var(text-field-padding-top)} +
+          #{form-get-var(textarea-padding)}
+      );
 
-    @if not
-      $disable-text-field-filled-theme or not
-      $disable-text-field-underlined-theme
-    {
-      &--underline-labelled {
-        @include set-var(textarea-padding, 0px);
-        @include set-var(
-          label-floating-top,
-          $text-field-underlined-label-padding-top
-        );
+      &--cursor:hover {
+        // need to add this cursor back since the textarea container adds padding to
+        // itself instead of the textarea so it loses this cursor. the container
+        // element will still focus the textarea when clicked
+        cursor: text;
       }
-    }
 
-    @if not $disable-textarea-resizing-rows {
-      &--height {
-        height: calc(
-          #{get-var(text-field-padding-top)} +
-            #{get-var(textarea-padding)} +
-            #{get-var(textarea-height)}
-        );
-      }
-
-      &--animate {
-        transition: height
-          transition.$linear-duration
-          transition.$linear-timing-function;
+      @if not
+        $disable-text-field-filled-theme or not
+        $disable-text-field-underlined-theme
+      {
+        &--underline-labelled {
+          @include form-set-var(textarea-padding, 0px);
+          @include form-set-var(
+            label-floating-top,
+            $text-field-underlined-label-padding-top
+          );
+        }
       }
 
-      &__inner {
-        height: get-var(textarea-height, 100%);
-        width: 100%;
+      @if not $disable-textarea-resizing-rows {
+        &--height {
+          height: calc(
+            #{form-get-var(text-field-padding-top)} +
+              #{form-get-var(textarea-padding)} +
+              #{form-get-var(textarea-height)}
+          );
+        }
 
         &--animate {
           transition: height
             transition.$linear-duration
             transition.$linear-timing-function;
         }
+
+        &__inner {
+          height: form-get-var(textarea-height, 100%);
+          width: 100%;
+
+          &--animate {
+            transition: height
+              transition.$linear-duration
+              transition.$linear-timing-function;
+          }
+        }
       }
     }
   }
 }
 
-@mixin textarea-styles {
-  .rmd-textarea {
-    @include set-var(text-field-padding-top, 0px);
-    @include use-var(min-height, text-field-height);
+@mixin textarea-styles($disable-layer: false) {
+  @include utils.optional-layer(form, $disable-layer) {
+    .rmd-textarea {
+      @include form-set-var(text-field-padding-top, 0px);
+      @include form-use-var(min-height, text-field-height);
 
-    height: get-var(textarea-height, 100%);
+      height: form-get-var(textarea-height, 100%);
 
-    @if not $disable-textarea-resize-horizontal {
-      &--rh {
-        resize: horizontal;
+      @if not $disable-textarea-resize-horizontal {
+        &--rh {
+          resize: horizontal;
+        }
       }
-    }
 
-    @if not $disable-textarea-resize-vertical {
-      &--rv {
-        resize: vertical;
+      @if not $disable-textarea-resize-vertical {
+        &--rv {
+          resize: vertical;
+        }
       }
-    }
 
-    &--rn {
-      overflow: hidden;
-      resize: none;
-    }
+      &--rn {
+        overflow: hidden;
+        resize: none;
+      }
 
-    // only want the textarea to be scrollable if there's a limit on the rows
-    // since it'll flash the scrollbar on most OS during the height transition
-    &--scrollable {
-      overflow: auto;
-    }
+      // only want the textarea to be scrollable if there's a limit on the rows
+      // since it'll flash the scrollbar on most OS during the height transition
+      &--scrollable {
+        overflow: auto;
+      }
 
-    @if not $disable-textarea-resizing-mask {
-      &--mask {
-        height: auto;
-        left: 0;
-        opacity: 0;
-        overflow: hidden;
-        pointer-events: none;
-        position: absolute;
-        right: 0;
-        z-index: -1;
+      @if not $disable-textarea-resizing-mask {
+        &--mask {
+          height: auto;
+          left: 0;
+          opacity: 0;
+          overflow: hidden;
+          pointer-events: none;
+          position: absolute;
+          right: 0;
+          z-index: -1;
+        }
       }
     }
   }
 }
 
-@mixin select-styles {
-  .rmd-select-container {
-    outline-style: none;
-  }
-
-  .rmd-select-value {
-    @include _text-field-base-styles;
-
-    align-items: center;
-    display: flex;
-    gap: 0.5rem;
-    position: absolute;
-    white-space: nowrap;
+@mixin select-styles($disable-layer: false) {
+  @include utils.optional-layer(form, $disable-layer) {
+    .rmd-select-container {
+      outline-style: none;
+    }
 
-    &__v {
-      @include typography.text-overflow;
+    .rmd-selected-option {
+      position: absolute;
     }
-  }
 
-  .rmd-select {
-    opacity: 0;
-    pointer-events: none;
+    .rmd-select {
+      opacity: 0;
 
-    // ALl these additional overrides are provided so that the select will have
-    // the same sizing as a text field with the same props provided.
-    @if not $disable-text-field-underlined-theme {
-      &--underline {
-        @include utils.rtl {
-          @include use-var(padding-right, text-field-padding-left);
+      // All these additional overrides are provided so that the select will have
+      // the same sizing as a text field with the same props provided.
+      @if not $disable-text-field-underlined-theme {
+        &--underline {
+          padding-right: 0;
 
-          padding-left: 0;
+          @include utils.rtl {
+            @include form-use-var(padding-right, text-field-padding-left);
+
+            padding-left: 0;
+          }
         }
+      }
 
-        padding-right: 0;
+      @if not $disable-text-field-outlined-theme {
+        &--outline {
+          @include form-use-var(padding-right, text-field-outlined-padding);
+          @include utils.rtl {
+            @include form-use-var(padding-left, text-field-outlined-padding);
+            @include form-use-var(padding-right, text-field-padding-left);
+          }
+        }
       }
-    }
 
-    @if not $disable-text-field-outlined-theme {
-      &--outline {
-        @include utils.rtl {
-          @include use-var(padding-right, text-field-padding-left);
+      @if not $disable-text-field-filled-theme {
+        &--filled {
+          @include form-use-var(padding-right, text-field-filled-padding);
+          @include utils.rtl {
+            @include form-use-var(padding-right, text-field-padding-left);
 
-          padding-left: $text-field-outlined-padding;
+            @include form-use-var(padding-left, text-field-filled-padding);
+          }
         }
+      }
 
-        padding-right: $text-field-outlined-padding;
+      // disable pointer events on touch devices so the soft keyboard does not
+      // appear when clicking the select
+      @media (hover: none) and (pointer: coarse) {
+        pointer-events: none;
       }
     }
+  }
+}
+
+@mixin option-styles($disable-layer: false) {
+  @include utils.optional-layer(form, $disable-layer) {
+    .rmd-option {
+      &--icon {
+        padding-left: $option-padding-left;
 
-    @if not $disable-text-field-filled-theme {
-      &--filled {
         @include utils.rtl {
-          @include use-var(padding-right, text-field-padding-left);
+          @include list.use-var(padding-left, item-horizontal-padding);
 
-          padding-left: $text-field-filled-padding;
+          padding-right: $option-padding-left;
         }
+      }
 
-        padding-right: $text-field-filled-padding;
+      &--selected {
+        @include utils.map-to-styles($option-selected-styles);
+      }
+
+      &__icon {
+        @include icon.set-var(spacing, $option-selected-icon-spacing);
+        @include icon.set-var(size, $option-selected-icon-size);
       }
     }
   }
 }
 
-@mixin option-styles {
-  .rmd-option {
-    &--icon {
-      @include utils.rtl {
-        @include list.use-var(padding-left, item-horizontal-padding);
+@mixin native-select-styles($disable-layer: false) {
+  @include utils.optional-layer(form, $disable-layer) {
+    @if not $disable-native-select-multiple {
+      .rmd-native-select-container {
+        &--multi {
+          @include form-set-var(addon-top, $native-select-addon-top);
+          @include form-use-var(min-height, text-field-height);
 
-        padding-right: $option-padding-left;
-      }
+          height: auto;
+        }
 
-      padding-left: $option-padding-left;
-    }
+        &--padded {
+          padding-top: $native-select-multiple-padding;
+        }
 
-    &--selected {
-      @include utils.map-to-styles($option-selected-styles);
-    }
+        @if not
+          $disable-text-field-filled-theme or not
+          $disable-text-field-underlined-theme
+        {
+          &--underline {
+            @include form-set-var(text-field-padding-top, 0);
+          }
 
-    &__icon {
-      @include icon.set-var(spacing, $option-selected-icon-spacing);
-      @include icon.set-var(size, $option-selected-icon-size);
+          &--underline-padded {
+            padding-top: $native-select-multiple-underline-padding;
+          }
+        }
+      }
     }
-  }
-}
 
-@mixin native-select-styles {
-  @if not $disable-native-select-multiple {
-    .rmd-native-select-container {
-      &--multi {
-        @include set-var(addon-top, $native-select-addon-top);
-        @include use-var(min-height, text-field-height);
+    .rmd-native-select {
+      @include _text-field-base-styles;
+      @include typography.text-overflow;
+
+      appearance: none;
 
-        height: auto;
+      &[disabled] {
+        @include theme.theme-use-var(color, text-disabled-color);
       }
 
-      &--padded {
-        padding-top: $native-select-multiple-padding;
+      &[multiple] {
+        overflow: auto;
       }
 
+      @include utils.rtl {
+        @include form-use-var(padding-left, text-field-padding-right);
+        @include form-use-var(padding-right, text-field-padding-left);
+      }
+    }
+  }
+}
+
+@mixin text-field-addon-styles($disable-layer: false) {
+  @include utils.optional-layer(form, $disable-layer) {
+    .rmd-text-field-addon {
+      @if $text-field-addon-gap {
+        @include box.set-var(gap, $text-field-addon-gap);
+      }
       @if not
         $disable-text-field-filled-theme or not
         $disable-text-field-underlined-theme
       {
-        &--underline {
-          @include set-var(text-field-padding-top, 0);
-        }
-
-        &--underline-padded {
-          padding-top: $native-select-multiple-underline-padding;
-        }
+        @include form-use-var(margin-top, addon-margin-top);
       }
-    }
-  }
 
-  .rmd-native-select {
-    @include _text-field-base-styles;
-    @include typography.text-overflow;
-
-    appearance: none;
+      // this makes it so that this container element is the same size as the
+      // child (normally icons). without this, icons would have a height of 30.5px
+      // and no longer be centered
+      position: absolute;
 
-    &[multiple] {
-      overflow: auto;
-    }
-  }
-}
+      // Note: Can't use `:first-child` and `:last-child` since
+      // password/autocomplete managers might add another element into the
+      // `.rmd-text-field-container` which would prevent these styles from being
+      // applied
+      &--before {
+        @include form-use-var(left, addon-left-offset);
 
-@mixin text-field-addon-styles {
-  .rmd-text-field-addon {
-    @if not
-      $disable-text-field-filled-theme or not
-      $disable-text-field-underlined-theme
-    {
-      @include use-var(margin-top, addon-margin-top);
-    }
+        @include utils.rtl {
+          @include form-use-var(right, addon-left-offset);
+          left: auto;
+        }
+      }
 
-    // this makes it so that this container element is the same size as the
-    // child (normally icons). without this, icons would have a height of 30.5px
-    // and no longer be centered
-    display: inline-flex;
-    position: absolute;
-
-    // Note: Can't use `:first-child` and `:last-child` since
-    // password/autocomplete managers might add another element into the
-    // `.rmd-text-field-container` which would prevent these styles from being
-    // applied
-    &--before {
-      @include utils.auto-rtl(left, get-var(label-left-offset));
-    }
+      &--after {
+        @include form-use-var(right, addon-spacing);
 
-    &--after {
-      @include utils.auto-rtl(right, $text-field-spacing);
-    }
+        @include utils.rtl {
+          @include form-use-var(left, addon-spacing);
+          right: auto;
+        }
+      }
 
-    &--presentational {
-      pointer-events: none;
+      &--presentational {
+        pointer-events: none;
+      }
     }
   }
 }
 
-@mixin hidden-input-styles {
-  .rmd-hidden-input {
-    height: 100%;
-    inset: 0;
-    margin: 0;
-    opacity: 0;
-    position: absolute;
-    width: 100%;
-    z-index: 1;
-
-    &:not(:disabled):hover {
-      cursor: pointer;
+@mixin hidden-input-styles($disable-layer: false) {
+  @include utils.optional-layer(form, $disable-layer) {
+    .rmd-hidden-input {
+      height: 100%;
+      inset: 0;
+      margin: 0;
+      opacity: 0;
+      position: absolute;
+      width: 100%;
+      z-index: 1;
+
+      &:not(:disabled):hover {
+        cursor: pointer;
+      }
     }
   }
 }
 
-@mixin input-toggle-styles {
-  .rmd-input-toggle {
-    @include interaction.surface(
-      $focus-selector: "&:focus-within",
-      $disabled-selector: "&--disabled",
-      $higher-contrast: false
-    );
-    @include icon.set-var(color, currentcolor);
-
-    align-items: center;
-    border-radius: $input-toggle-border-radius;
-    display: inline-flex;
-    flex-shrink: 0;
-    justify-content: center;
-    padding: $input-toggle-padding;
-
-    &--em {
-      @include icon.set-var(size, 1em);
-    }
+@mixin input-toggle-styles($disable-layer: false) {
+  @include utils.optional-layer(form, $disable-layer) {
+    .rmd-input-toggle {
+      @include icon.set-var(color, currentcolor);
+      @include interaction.surface(
+        $focus-selector: if(
+            utils.$disable-has-selectors or utils.$disable-focus-visible,
+            "&:focus-within",
+            "&:has(:focus-visible)"
+          ),
+        $keyboard-only-focus: utils.$disable-has-selectors or
+          utils.$disable-focus-visible,
+        $disabled-selector: "&--disabled",
+        $higher-contrast: false
+      );
 
-    &--active {
-      @include use-var(color, active-color);
-    }
+      // stylelint-disable-next-line no-duplicate-selectors
+      & {
+        align-items: center;
+        border-radius: $input-toggle-border-radius;
+        display: inline-flex;
+        flex-shrink: 0;
+        justify-content: center;
+        padding: $input-toggle-padding;
+      }
 
-    @if $input-toggle-small-size {
-      &--small {
-        font-size: $input-toggle-small-size;
+      &--em {
+        @include icon.set-var(size, 1em);
       }
-    }
 
-    @if $input-toggle-dense-size {
-      &--dense {
-        font-size: $input-toggle-dense-size;
+      &--active {
+        @include form-use-var(color, active-color);
       }
-    }
 
-    @if $input-toggle-normal-size {
-      &--normal {
-        font-size: $input-toggle-normal-size;
+      @if $input-toggle-small-size {
+        &--small {
+          font-size: $input-toggle-small-size;
+        }
       }
-    }
 
-    @if $input-toggle-large-size {
-      &--large {
-        font-size: $input-toggle-large-size;
+      @if $input-toggle-dense-size {
+        &--dense {
+          font-size: $input-toggle-dense-size;
+        }
       }
-    }
 
-    @if not $disable-uncontrolled-input-toggles {
-      &--uncontrolled {
-        $icon-color-selector: ".rmd-hidden-input:where(:checked:not(:disabled)) ~ .rmd-icon";
-        $unchecked-icon-selector: "~ :nth-child(-n + 1 of .rmd-icon)";
-        $checked-icon-selector: "~ :nth-child(n + 2 of .rmd-icon)";
-        // make sure the active color from the label also applies to the icon when
-        // checked
-        .rmd-label--active & #{$icon-color-selector} {
-          @include use-var(color, focus-color);
+      @if $input-toggle-normal-size {
+        &--normal {
+          font-size: $input-toggle-normal-size;
         }
+      }
 
-        // make sure the error color applies to the icon when checked
-        &:where(:not(.rmd-error-color)) #{$icon-color-selector} {
-          @include use-var(color, active-color);
+      @if $input-toggle-large-size {
+        &--large {
+          font-size: $input-toggle-large-size;
         }
+      }
 
-        // when the input is checked, hide the first icon (unchecked state)
-        // when the input is not checked, hide the second icon (checked state)
-        .rmd-hidden-input:checked #{$unchecked-icon-selector},
-        .rmd-hidden-input:not(:checked) #{$checked-icon-selector} {
-          opacity: 0;
-          position: absolute;
+      @if not $disable-uncontrolled-input-toggles {
+        &--uncontrolled {
+          $icon-color-selector: ".rmd-hidden-input:where(:checked:not(:disabled)) ~ .rmd-icon";
+          $unchecked-icon-selector: "~ :nth-child(-n + 1 of .rmd-icon)";
+          $checked-icon-selector: "~ :nth-child(n + 2 of .rmd-icon)";
+          // make sure the active color from the label also applies to the icon when
+          // checked
+          .rmd-label--active & #{$icon-color-selector} {
+            @include form-use-var(color, focus-color);
+          }
+
+          // make sure the error color applies to the icon when checked
+          &:where(:not(.rmd-error-color)) #{$icon-color-selector} {
+            @include form-use-var(color, active-color);
+          }
+
+          // when the input is checked, hide the first icon (unchecked state)
+          // when the input is not checked, hide the second icon (checked state)
+          .rmd-hidden-input:checked #{$unchecked-icon-selector},
+          .rmd-hidden-input:not(:checked) #{$checked-icon-selector} {
+            opacity: 0;
+            position: absolute;
+          }
         }
       }
     }
   }
 }
 
-@mixin switch-styles {
-  .rmd-switch {
-    padding: $switch-track-vertical-padding $switch-track-horizontal-padding;
+@mixin switch-styles($disable-layer: false) {
+  @include utils.optional-layer(form, $disable-layer) {
+    .rmd-switch {
+      padding: $switch-track-vertical-padding $switch-track-horizontal-padding;
 
-    &--clickable:hover {
-      cursor: pointer;
-    }
+      &--clickable:hover {
+        cursor: pointer;
+      }
 
-    &--current-color,
-    &--current-color .rmd-switch__input:checked + .rmd-switch__ball {
-      @include set-var(switch-ball-background-color, currentcolor);
-    }
+      &--current-color,
+      &--current-color .rmd-switch__input:checked + .rmd-switch__ball {
+        @include form-set-var(switch-ball-background-color, currentcolor);
+      }
+
+      &__input {
+        @if utils.$disable-focus-visible {
+          @include utils.keyboard-only {
+            &:focus + .rmd-switch__ball::before {
+              @include interaction.focus-styles;
+            }
+          }
+        } @else {
+          &:focus-visible + .rmd-switch__ball::before {
+            @include interaction.focus-styles;
+          }
+        }
 
-    &__input {
-      @include utils.keyboard-only {
-        &:focus + .rmd-switch__ball::before {
-          @include interaction.focus-styles;
+        &:disabled + .rmd-switch__ball {
+          cursor: auto;
+
+          &:hover::before {
+            @include interaction.set-var(background-color, transparent);
+          }
         }
       }
 
-      &:disabled + .rmd-switch__ball {
-        cursor: auto;
+      &__track {
+        @if not $disable-switch-circular-progress {
+          @include progress.set-var(
+            circular-stroke-width,
+            $switch-circular-progress-width
+          );
+          @include progress.set-var(
+            circular-size,
+            $switch-circular-progress-size
+          );
+        }
+        @if not $disable-switch-icon {
+          @include icon.set-var(size, $switch-icon-size);
+        }
+        @include form-use-var(background-color, switch-track-background-color);
+
+        border-radius: $switch-track-border-radius;
+        height: $switch-track-height;
+        position: relative;
+        transition: background-color transition.$linear-duration
+          transition.$linear-timing-function;
+        width: $switch-track-width;
 
-        &:hover::before {
-          @include interaction.set-var(background-color, transparent);
+        &--disabled {
+          opacity: $switch-disabled-opacity;
         }
       }
-    }
 
-    &__track {
-      @if not $disable-switch-circular-progress {
-        @include progress.set-var(
-          circular-stroke-width,
-          $switch-circular-progress-width
-        );
-        @include progress.set-var(
-          circular-size,
-          $switch-circular-progress-size
+      &__ball {
+        // The focus and disabled states are handled by the `.rmd-switch__input`'s
+        // :focus and :disabled' states instead.
+        @include interaction.surface(
+          $focus-selector: null,
+          $disabled-selector: null,
+          $clickable: false
         );
-      }
-      @if not $disable-switch-icon {
-        @include icon.set-var(size, $switch-icon-size);
-      }
-      @include use-var(background-color, switch-track-background-color);
 
-      border-radius: $switch-track-border-radius;
-      height: $switch-track-height;
-      position: relative;
-      transition: background-color transition.$linear-duration
-        transition.$linear-timing-function;
-      width: $switch-track-width;
+        // stylelint-disable-next-line no-duplicate-selectors
+        & {
+          align-items: center;
+          border-radius: $switch-ball-border-radius;
+          display: flex;
+          height: $switch-ball-size * 2;
+          justify-content: center;
+          left: calc(-50% + #{$switch-ball-offset});
+          top: calc(-50% - #{$switch-ball-size - $switch-track-height});
+          transition-duration: transition.$linear-duration;
+          transition-property: background-color, transform;
+          transition-timing-function: transition.$linear-timing-function;
+          width: $switch-ball-size * 2;
+          z-index: 1;
+        }
 
-      &--disabled {
-        opacity: $switch-disabled-opacity;
-      }
-    }
+        &::after {
+          @include form-use-var(background-color, switch-ball-background-color);
 
-    &__ball {
-      // The focus and disabled states are handled by the `.rmd-switch__input`'s
-      // :focus and :disabled' states instead.
-      @include interaction.surface(
-        $focus-selector: null,
-        $disabled-selector: null,
-        $clickable: false
-      );
-      @include utils.auto-rtl(left, calc(-50% + #{$switch-ball-offset}));
+          border-radius: inherit;
+          box-shadow: box-shadows.box-shadow(1);
+          content: "";
+          height: $switch-ball-size;
+          left: 25%;
+          pointer-events: none;
+          position: absolute;
+          top: 25%;
+          width: $switch-ball-size;
+          z-index: 0;
+        }
 
-      align-items: center;
-      border-radius: $switch-ball-border-radius;
-      display: flex;
-      height: $switch-ball-size * 2;
-      justify-content: center;
-      top: calc(-50% - #{$switch-ball-size - $switch-track-height});
-      transition-duration: transition.$linear-duration;
-      transition-property: background-color, transform;
-      transition-timing-function: transition.$linear-timing-function;
-      width: $switch-ball-size * 2;
-      z-index: 1;
+        $active-selector: ".rmd-switch__input:checked + &" +
+          if($disable-menu-item-switch, "", ", &--active");
 
-      &::after {
-        @include use-var(background-color, switch-ball-background-color);
+        #{$active-selector} {
+          $offset: $switch-ball-size + $switch-ball-offset;
 
-        border-radius: inherit;
-        box-shadow: box-shadows.box-shadow(1);
-        content: "";
-        height: $switch-ball-size;
-        left: 25%;
-        pointer-events: none;
-        position: absolute;
-        top: 25%;
-        width: $switch-ball-size;
-        z-index: 0;
-      }
+          @include form-set-var(
+            switch-ball-background-color,
+            form-get-var(active-color)
+          );
 
-      $active-selector: ".rmd-switch__input:checked + &" +
-        if($disable-menu-item-switch, "", ", &--active");
+          transform: translateX($offset);
 
-      #{$active-selector} {
-        $offset: $switch-ball-size + $switch-ball-offset;
+          @include utils.rtl {
+            transform: translateX(-$offset);
+          }
+        }
 
         @include utils.rtl {
-          transform: translateX(-$offset);
+          left: auto;
+          right: calc(-50% + #{$switch-ball-offset});
         }
-        @include set-var(switch-ball-background-color, get-var(active-color));
-
-        transform: translateX($offset);
       }
     }
   }
 }
 
-@mixin menu-item-input-toggle-styles {
-  .rmd-menu-item-input-toggle {
-    @if not $disable-menu-item-radio or not $disable-menu-item-switch {
-      &__icon {
-        // remove the padding since the icon isn't the click target anymore.
-        padding: 0;
+@mixin menu-item-input-toggle-styles($disable-layer: false) {
+  @include utils.optional-layer(form, $disable-layer) {
+    .rmd-menu-item-input-toggle {
+      @if not $disable-menu-item-radio or not $disable-menu-item-switch {
+        &__icon {
+          // remove the padding since the icon isn't the click target anymore.
+          padding: 0;
 
-        // disable the hover states since it's handled by the ListItem instead
-        &::before {
-          content: none;
+          // disable the hover states since it's handled by the ListItem instead
+          &::before {
+            content: none;
+          }
         }
       }
-    }
 
-    @if not $disable-menu-item-switch {
-      // this makes it so that the spacing between the switch and the text
-      // aligns with other menu items/icons
-      &__track {
-        @include icon.set-var(size, $switch-track-width);
-      }
+      @if not $disable-menu-item-switch {
+        // this makes it so that the spacing between the switch and the text
+        // aligns with other menu items/icons
+        &__track {
+          @include icon.set-var(size, $switch-track-width);
+        }
 
-      // decrease the ball size and remove the hover states since it's handled
-      // by the ListItem instead. without decreasing the ball size, horizontal
-      // scrollbars will appear when the switch is checked
-      &__ball {
-        @include utils.auto-rtl(left, -$switch-ball-offset);
+        // decrease the ball size and remove the hover states since it's handled
+        // by the ListItem instead. without decreasing the ball size, horizontal
+        // scrollbars will appear when the switch is checked
+        &__ball {
+          height: $switch-ball-size;
+          left: -$switch-ball-offset;
+          top: calc(50% - $switch-ball-size * 0.5);
+          width: $switch-ball-size;
 
-        height: $switch-ball-size;
-        top: calc(50% - $switch-ball-size * 0.5);
-        width: $switch-ball-size;
+          &::before {
+            content: none;
+          }
 
-        &::before {
-          content: none;
-        }
+          &::after {
+            inset: 0;
+          }
 
-        &::after {
-          inset: 0;
+          @include utils.rtl {
+            left: auto;
+            right: -$switch-ball-offset;
+          }
         }
       }
     }
   }
 }
 
-@mixin slider-styles {
-  .rmd-slider-container {
-    @if $slider-container-addon-spacing and
-      $slider-container-addon-spacing !=
-      icon.$spacing
-    {
-      @include icon.set-var(spacing, $slider-container-addon-spacing);
-    }
+@mixin slider-styles($disable-layer: false) {
+  @include utils.optional-layer(form, $disable-layer) {
+    .rmd-slider-container {
+      @if $slider-container-addon-spacing and
+        $slider-container-addon-spacing !=
+        icon.$spacing
+      {
+        @include icon.set-var(spacing, $slider-container-addon-spacing);
+      }
 
-    @include icon.use-var(gap, spacing);
+      @include icon.use-var(gap, spacing);
 
-    align-items: center;
+      align-items: center;
+      touch-action: none;
 
-    @if not $disable-horizontal-slider {
-      &--h {
-        display: flex;
-        width: 100%;
-      }
+      @if not $disable-horizontal-slider {
+        &--h {
+          display: flex;
+          width: 100%;
+        }
 
-      &--pad-left {
-        padding-left: $slider-container-padding;
-      }
+        &--pad-left {
+          padding-left: $slider-container-padding;
+        }
 
-      &--pad-right {
-        padding-right: $slider-container-padding;
+        &--pad-right {
+          padding-right: $slider-container-padding;
+        }
       }
-    }
 
-    @if not $disable-vertical-slider {
-      &--v {
-        display: inline-flex;
-        flex-direction: column-reverse;
-      }
+      @if not $disable-vertical-slider {
+        &--v {
+          display: inline-flex;
+          flex-direction: column-reverse;
+        }
 
-      &--pad-top {
-        padding-top: $slider-container-padding;
-      }
+        &--pad-top {
+          padding-top: $slider-container-padding;
+        }
 
-      &--pad-bottom {
-        padding-bottom: $slider-container-padding;
+        &--pad-bottom {
+          padding-bottom: $slider-container-padding;
+        }
       }
     }
-  }
 
-  .rmd-slider-track {
-    position: relative;
+    .rmd-slider-track {
+      position: relative;
 
-    &::before,
-    &::after {
-      @if $slider-track-color {
-        @include use-var(background-color, slider-color);
+      &::before,
+      &::after {
+        @if $slider-track-color {
+          @include form-use-var(background-color, slider-color);
+        }
+
+        content: "";
+        pointer-events: none;
+        position: absolute;
       }
 
-      content: "";
-      pointer-events: none;
-      position: absolute;
-    }
+      &::before {
+        @if not $slider-track-color {
+          @include form-use-var(background-color, slider-inactive-color);
+        }
 
-    &::before {
-      @if not $slider-track-color {
-        @include use-var(background-color, slider-inactive-color);
+        opacity: $slider-track-inactive-opacity;
+        z-index: $slider-track-inactive-z-index;
       }
 
-      opacity: $slider-track-inactive-opacity;
-      z-index: $slider-track-inactive-z-index;
-    }
+      &::after {
+        @if not $slider-track-color {
+          @include form-use-var(background-color, slider-active-color);
+        }
 
-    &::after {
-      @if not $slider-track-color {
-        @include use-var(background-color, slider-active-color);
+        opacity: $slider-track-active-opacity;
+        z-index: $slider-track-active-z-index;
       }
 
-      opacity: $slider-track-active-opacity;
-      z-index: $slider-track-active-z-index;
-    }
-
-    &--hoverable:hover {
-      cursor: pointer;
-    }
+      &--hoverable:hover {
+        cursor: pointer;
+      }
 
-    &--animate::after {
-      transition-duration: $slider-transition-duration;
-      transition-timing-function: $slider-transition-timing-function;
-    }
+      &--animate::after {
+        transition-duration: $slider-transition-duration;
+        transition-timing-function: $slider-transition-timing-function;
+      }
 
-    @if $slider-track-color {
-      &--disabled {
-        @include set-var(slider-color, $slider-track-disabled-color);
+      @if $slider-track-color {
+        &--disabled {
+          @include form-set-var(slider-color, $slider-track-disabled-color);
 
-        @if $slider-track-inactive-opacity {
-          &::before {
-            opacity: 1;
+          @if $slider-track-inactive-opacity {
+            &::before {
+              opacity: 1;
+            }
           }
-        }
 
-        &::after {
-          @include set-var(slider-active-size, 0px);
-          @if $slider-track-active-opacity {
-            opacity: 1;
+          &::after {
+            @include form-set-var(slider-active-size, 0px);
+            @if $slider-track-active-opacity {
+              opacity: 1;
+            }
           }
         }
       }
-    }
 
-    @if not $disable-horizontal-slider {
-      &--h {
-        @include use-var(height, slider-size);
+      @if not $disable-horizontal-slider {
+        &--h {
+          @include form-use-var(height, slider-size);
 
-        align-items: center;
-        display: flex;
-        width: 100%;
+          align-items: center;
+          display: flex;
+          width: 100%;
 
-        &::before {
-          @include use-var(height, slider-inactive-size);
+          &::before {
+            @include form-use-var(height, slider-inactive-size);
 
-          width: 100%;
-        }
+            width: 100%;
+          }
 
-        &::after {
-          @include use-var(height, slider-active-size);
+          &::after {
+            @include form-use-var(height, slider-active-size);
+          }
         }
-      }
 
-      &--h1::after {
-        @include utils.auto-rtl(left, 0);
-        @include use-var(max-width, slider-offset-1);
+        &--h1::after {
+          @include form-use-var(max-width, slider-offset-1);
 
-        transition-property: max-width;
-        width: 100%;
-      }
+          left: 0;
+          transition-property: max-width;
+          width: 100%;
 
-      @if not $disable-range-slider {
-        &--h2::after {
           @include utils.rtl {
-            left: calc(100% - get-var(slider-offset-2));
-            right: get-var(slider-offset-1);
+            left: auto;
+            right: 0;
           }
+        }
 
-          left: get-var(slider-offset-1);
-          right: calc(100% - get-var(slider-offset-2));
-          transition-property: left, right;
-          will-change: left, right;
+        @if not $disable-range-slider {
+          &--h2::after {
+            left: form-get-var(slider-offset-1);
+            right: calc(100% - form-get-var(slider-offset-2));
+            transition-property: left, right;
+            will-change: left, right;
+
+            @include utils.rtl {
+              left: calc(100% - form-get-var(slider-offset-2));
+              right: form-get-var(slider-offset-1);
+            }
+          }
         }
       }
-    }
 
-    @if not $disable-vertical-slider {
-      &--v {
-        @include use-var(height, slider-vertical-size);
-        @include use-var(width, slider-size);
+      @if not $disable-vertical-slider {
+        &--v {
+          @include form-use-var(height, slider-vertical-size);
+          @include form-use-var(width, slider-size);
+
+          display: inline-flex;
+          justify-content: center;
 
-        display: inline-flex;
-        justify-content: center;
+          &::before {
+            @include form-use-var(width, slider-inactive-size);
+
+            height: 100%;
+          }
+
+          &::after {
+            @include form-use-var(width, slider-active-size);
 
-        &::before {
-          @include use-var(width, slider-inactive-size);
+            bottom: 0;
+          }
+        }
+
+        // one thumb track horizontal styles
+        &--v1::after {
+          @include form-use-var(max-height, slider-offset-1);
 
           height: 100%;
+          transition-property: max-height;
         }
 
-        &::after {
-          @include use-var(width, slider-active-size);
+        @if not $disable-range-slider {
+          // two thumb track horizontal styles
+          &--v2::after {
+            @include form-use-var(bottom, slider-offset-1);
 
-          bottom: 0;
+            top: calc(100% - #{form-get-var(slider-offset-2)});
+            transition-property: bottom, top;
+            will-change: bottom, top;
+          }
         }
       }
+    }
+
+    .rmd-slider-thumb {
+      @include form-use-var(
+        background-color,
+        if($slider-track-color, slider-color, slider-active-color)
+      );
 
-      // one thumb track horizontal styles
-      &--v1::after {
-        @include use-var(max-height, slider-offset-1);
+      border-radius: $slider-thumb-border-radius;
+      height: $slider-thumb-size;
+      outline-style: none;
+      position: absolute;
+      width: $slider-thumb-size;
+      z-index: $slider-thumb-z-index;
+
+      &::after {
+        @include utils.pseudo-element($z-index: null);
 
-        height: 100%;
-        transition-property: max-height;
+        background-color: inherit;
+        opacity: $slider-thumb-bubble-opacity;
+        transition: transform $slider-transition-duration
+          $slider-transition-timing-function;
       }
 
-      @if not $disable-range-slider {
-        // two thumb track horizontal styles
-        &--v2::after {
-          @include use-var(bottom, slider-offset-1);
+      @if utils.$disable-focus-visible {
+        @include utils.keyboard-only {
+          &:focus::after {
+            transform: scale($slider-thumb-focus-scale);
+          }
+        }
+      } @else {
+        &:focus-visible::after {
+          transform: scale($slider-thumb-focus-scale);
+        }
+      }
 
-          top: calc(100% - #{get-var(slider-offset-2)});
-          transition-property: bottom, top;
-          will-change: bottom, top;
+      @include utils.mouse-hover(false) {
+        &:hover::after,
+        &--active::after,
+        &--active:hover::after {
+          transform: scale($slider-thumb-active-scale);
         }
       }
-    }
-  }
 
-  .rmd-slider-thumb {
-    @include use-var(
-      background-color,
-      if($slider-track-color, slider-color, slider-active-color)
-    );
-    @include utils.keyboard-only {
-      &:focus::after {
-        transform: scale($slider-thumb-focus-scale);
+      &--animate {
+        transition-duration: $slider-transition-duration;
+        transition-timing-function: $slider-transition-timing-function;
       }
-    }
-    @include utils.touch-only {
-      &:hover::after,
-      &--active:after,
-      &--active:hover::after {
-        transform: none;
+
+      &--disabled {
+        background-color: $slider-thumb-disabled-color;
+
+        // prevent hover effects like the "bubble"
+        pointer-events: none;
       }
-    }
 
-    border-radius: $slider-thumb-border-radius;
-    height: $slider-thumb-size;
-    outline-style: none;
-    position: absolute;
-    width: $slider-thumb-size;
-    z-index: $slider-thumb-z-index;
+      &--mask {
+        @include theme.theme-use-var(background-color);
 
-    &::after {
-      @include utils.pseudo-element($z-index: null);
+        border-radius: 0;
+      }
 
-      background-color: inherit;
-      opacity: $slider-thumb-bubble-opacity;
-      transition: transform $slider-transition-duration
-        $slider-transition-timing-function;
-    }
+      @if not $disable-horizontal-slider {
+        &--h {
+          transform: translateX(-50%);
+          transition-property: left;
 
-    &:hover::after {
-      transform: scale($slider-thumb-focus-scale);
-    }
+          @include utils.rtl {
+            transform: translateX(50%);
+            transition-property: right;
+          }
+        }
 
-    &--active::after,
-    &--active:hover::after {
-      transform: scale($slider-thumb-active-scale);
-    }
+        &--h1 {
+          @include form-use-var(left, slider-offset-1);
 
-    &--animate {
-      transition-duration: $slider-transition-duration;
-      transition-timing-function: $slider-transition-timing-function;
-    }
+          @include utils.rtl {
+            @include form-use-var(right, slider-offset-1);
 
-    &--disabled {
-      background-color: $slider-thumb-disabled-color;
+            left: auto;
+          }
+        }
 
-      // prevent hover effects like the "bubble"
-      pointer-events: none;
-    }
+        @if not $disable-range-slider {
+          &--h2 {
+            @include form-use-var(left, slider-offset-2);
 
-    &--mask {
-      @include theme.theme-use-var(background-color);
+            @include utils.rtl {
+              @include form-use-var(right, slider-offset-2);
 
-      border-radius: 0;
-    }
+              left: auto;
+            }
+          }
+        }
 
-    @if not $disable-horizontal-slider {
-      &--h {
-        @include utils.rtl {
-          transform: translateX(50%);
-          transition-property: right;
+        &--disabled-h {
+          transform: translateX(-50%) scale($slider-thumb-disabled-scale);
+
+          @include utils.rtl {
+            transform: translateX(50%) scale($slider-thumb-disabled-scale);
+          }
         }
 
-        transform: translateX(-50%);
-        transition-property: left;
-      }
+        &--mask-h {
+          transform: translateX(-50%) scale($slider-thumb-mask-scale);
 
-      &--h1 {
-        @include utils.auto-rtl(left, get-var(slider-offset-1));
+          @include utils.rtl {
+            transform: translateX(50%) scale($slider-thumb-mask-scale);
+          }
+        }
       }
 
-      @if not $disable-range-slider {
-        &--h2 {
-          @include utils.auto-rtl(left, get-var(slider-offset-2));
+      @if not $disable-vertical-slider {
+        &--v {
+          // want the thumb to be aligned so that the center is at the current value.
+          // without this transformation, the thumb's bottom side would be aligned
+          // with the current value
+          transform: translateY(50%);
+          transition-property: bottom;
         }
-      }
 
-      &--disabled-h {
-        @include utils.rtl {
-          transform: translateX(50%) scale($slider-thumb-disabled-scale);
+        &--v1 {
+          @include form-use-var(bottom, slider-offset-1);
         }
 
-        transform: translateX(-50%) scale($slider-thumb-disabled-scale);
-      }
+        @if not $disable-range-slider {
+          &--v2 {
+            @include form-use-var(bottom, slider-offset-2);
+          }
+        }
 
-      &--mask-h {
-        @include utils.rtl {
-          transform: translateX(50%) scale($slider-thumb-mask-scale);
+        &--disabled-v {
+          transform: translateY(50%) scale($slider-thumb-disabled-scale);
         }
 
-        transform: translateX(-50%) scale($slider-thumb-mask-scale);
+        &--mask-v {
+          transform: translateY(50%) scale($slider-thumb-mask-scale);
+        }
       }
-    }
 
-    @if not $disable-vertical-slider {
-      &--v {
-        // want the thumb to be aligned so that the center is at the current value.
-        // without this transformation, the thumb's bottom side would be aligned
-        // with the current value
-        transform: translateY(50%);
-        transition-property: bottom;
+      &__input {
+        appearance: none;
+        height: 0;
+        opacity: 0;
+        pointer-events: none;
+        width: 0;
       }
+    }
 
-      &--v1 {
-        @include use-var(bottom, slider-offset-1);
-      }
+    @if not $disable-discrete-slider {
+      .rmd-slider-tooltip {
+        opacity: 1;
+        position: absolute;
+        z-index: $slider-tooltip-z-index;
 
-      @if not $disable-range-slider {
-        &--v2 {
-          @include use-var(bottom, slider-offset-2);
+        // this is used to generate the triangle
+        &::after {
+          border: $slider-tooltip-caret-size solid transparent;
+          content: "";
+          position: absolute;
         }
-      }
 
-      &--disabled-v {
-        transform: translateY(50%) scale($slider-thumb-disabled-scale);
-      }
+        &--animate {
+          transition: transform
+            $slider-transition-duration
+            $slider-transition-timing-function;
+        }
 
-      &--mask-v {
-        transform: translateY(50%) scale($slider-thumb-mask-scale);
-      }
-    }
+        @if not $disable-horizontal-slider {
+          &--h {
+            top: $slider-tooltip-offset;
+            transform: translateX(form-get-var(slider-tooltip-translate))
+              scale(form-get-var(slider-tooltip-scale));
 
-    &__input {
-      appearance: none;
-      height: 0;
-      opacity: 0;
-      pointer-events: none;
-      width: 0;
-    }
-  }
+            &::after {
+              @include tooltip.use-var(border-top-color, background-color);
 
-  @if not $disable-discrete-slider {
-    .rmd-slider-tooltip {
-      opacity: 1;
-      position: absolute;
-      z-index: $slider-tooltip-z-index;
+              left: 50%;
+              top: 100%;
+              transform: translateX(form-get-var(slider-tooltip-translate));
+            }
 
-      // this is used to generate the triangle
-      &::after {
-        border: $slider-tooltip-caret-size solid transparent;
-        content: "";
-        position: absolute;
-      }
+            @include utils.rtl {
+              @include form-set-var(slider-tooltip-translate, 50%);
+            }
+          }
 
-      &--animate {
-        transition: transform
-          $slider-transition-duration
-          $slider-transition-timing-function;
-      }
+          &--h-off {
+            @include form-set-var(slider-tooltip-scale, 0);
+          }
 
-      @if not $disable-horizontal-slider {
-        &--h {
-          @include utils.rtl {
-            @include set-var(slider-tooltip-translate, 50%);
+          // have to "duplicate" these styles since the `--h-off` would override the
+          // `--h` styles due to css order.
+          &--h-on {
+            @include form-set-var(slider-tooltip-scale, 1);
           }
+        }
 
-          top: $slider-tooltip-offset;
-          transform: translateX(get-var(slider-tooltip-translate))
-            scale(get-var(slider-tooltip-scale));
+        @if not $disable-vertical-slider {
+          &--v {
+            // going to force rendering always to the left even in RTL languages
+            left: $slider-tooltip-offset;
+            transform: translateY(50%) scale(1);
 
-          &::after {
-            @include tooltip.use-var(border-top-color, background-color);
+            &::after {
+              @include tooltip.use-var(border-left-color, background-color);
 
-            left: 50%;
-            top: 100%;
-            transform: translateX(get-var(slider-tooltip-translate));
+              left: 100%;
+              top: 50%;
+              transform: translateY(-50%);
+            }
           }
-        }
 
-        &--h-off {
-          @include set-var(slider-tooltip-scale, 0);
-        }
+          &--v-off {
+            transform: translateY(50%) scale(0);
+          }
 
-        // have to "duplicate" these styles since the `--h-off` would override the
-        // `--h` styles due to css order.
-        &--h-on {
-          @include set-var(slider-tooltip-scale, 1);
+          // have to "duplicate" these styles since the `--v-off` would override the
+          // `--v` styles due to css order.
+          &--v-on {
+            transform: translateY(50%) scale(1);
+          }
         }
       }
+    }
 
-      @if not $disable-vertical-slider {
-        &--v {
-          // going to force rendering always to the left even in RTL languages
-          left: $slider-tooltip-offset;
-          transform: translateY(50%) scale(1);
+    @if not $disable-discrete-slider-marks {
+      .rmd-slider-mark {
+        border-radius: $slider-mark-border-radius;
+        position: absolute;
 
-          &::after {
-            @include tooltip.use-var(border-left-color, background-color);
+        &--inactive {
+          @include form-use-var(background-color, slider-mark-inactive-color);
+          @include form-use-var(opacity, slider-mark-inactive-opacity);
 
-            left: 100%;
-            top: 50%;
-            transform: translateY(-50%);
-          }
+          z-index: $slider-mark-inactive-z-index;
         }
 
-        &--v-off {
-          transform: translateY(50%) scale(0);
-        }
+        &--active {
+          @include form-use-var(background-color, slider-mark-active-color);
+          @include form-use-var(opacity, slider-mark-active-opacity);
 
-        // have to "duplicate" these styles since the `--v-off` would override the
-        // `--v` styles due to css order.
-        &--v-on {
-          transform: translateY(50%) scale(1);
+          z-index: $slider-mark-active-z-index;
         }
-      }
-    }
-  }
-
-  @if not $disable-discrete-slider-marks {
-    .rmd-slider-mark {
-      border-radius: $slider-mark-border-radius;
-      position: absolute;
-
-      &--inactive {
-        @include use-var(background-color, slider-mark-inactive-color);
-        @include use-var(opacity, slider-mark-inactive-opacity);
-
-        z-index: $slider-mark-inactive-z-index;
-      }
 
-      &--active {
-        @include use-var(background-color, slider-mark-active-color);
-        @include use-var(opacity, slider-mark-active-opacity);
+        @if not $disable-horizontal-slider {
+          &--h {
+            @include form-use-var(left, slider-mark-offset);
 
-        z-index: $slider-mark-active-z-index;
-      }
+            height: $slider-mark-height;
+            top: 50%;
+            transform: translateY(-50%);
+            width: $slider-mark-width;
 
-      @if not $disable-horizontal-slider {
-        &--h {
-          @include utils.auto-rtl(left, get-var(slider-mark-offset));
+            @include utils.rtl {
+              @include form-use-var(right, slider-mark-offset);
 
-          height: $slider-mark-height;
-          top: 50%;
-          transform: translateY(-50%);
-          width: $slider-mark-width;
+              left: auto;
+            }
+          }
         }
-      }
 
-      @if not $disable-vertical-slider {
-        &--v {
-          bottom: get-var(slider-mark-offset);
-          height: $slider-mark-width;
-          transform: translateY(50%);
-          width: $slider-mark-height;
+        @if not $disable-vertical-slider {
+          &--v {
+            @include form-use-var(bottom, slider-mark-offset);
+
+            height: $slider-mark-width;
+            transform: translateY(50%);
+            width: $slider-mark-height;
+          }
         }
       }
     }
-  }
 
-  @if not $disable-discrete-slider-marks-labels {
-    .rmd-slider-mark-label {
-      position: absolute;
+    @if not $disable-discrete-slider-marks-labels {
+      .rmd-slider-mark-label {
+        position: absolute;
 
-      @if not $disable-horizontal-slider {
-        &--h {
-          @include utils.rtl {
-            @include use-var(right, slider-mark-offset);
+        @if not $disable-horizontal-slider {
+          &--h {
+            @include form-use-var(left, slider-mark-offset);
 
-            left: auto;
-            transform: translateX(50%);
-          }
-          @include use-var(left, slider-mark-offset);
+            top: 100%;
+            transform: translateX(-50%);
 
-          top: 100%;
-          transform: translateX(-50%);
+            @include utils.rtl {
+              @include form-use-var(right, slider-mark-offset);
+
+              left: auto;
+              transform: translateX(50%);
+            }
+          }
         }
-      }
 
-      @if not $disable-vertical-slider {
-        &--v {
-          @include utils.auto-rtl(left, 100%);
+        @if not $disable-vertical-slider {
+          &--v {
+            left: 100%;
+            top: form-get-var(slider-mark-offset);
+            transform: translateY(-50%);
 
-          top: get-var(slider-mark-offset);
-          transform: translateY(-50%);
+            @include utils.rtl {
+              left: auto;
+              right: 100%;
+            }
+          }
         }
       }
     }
   }
 }
 
-@mixin variables {
-  @if not $disable-everything {
-    @include set-var(active-color, $active-color);
-    @include set-var(focus-color, $focus-color);
+@mixin form-variables {
+  @if not $form-disable-everything {
+    @include form-set-var(active-color, $form-active-color);
+    @include form-set-var(focus-color, $form-focus-color);
 
     @if not $disable-label and not $disable-floating-label {
-      @include set-var(label-floating-top, $label-floating-top);
-      @include set-var(label-left-offset, 0px);
-      @include set-var(label-top-offset, 0px);
-      @include set-var(label-active-padding, 0px);
-      @include set-var(label-active-background-color, transparent);
+      @include form-set-var(label-floating-top, $label-floating-top);
+      @include form-set-var(label-left-offset, 0px);
+      @include form-set-var(label-top-offset, 0px);
+      @include form-set-var(label-active-padding, 0px);
+      @include form-set-var(label-active-background-color, transparent);
+    }
+
+    @if not
+      $disable-text-field or not
+      $disable-textarea or not
+      $disable-select or not
+      $disable-native-select
+    {
+      @if not $disable-text-field-filled-theme and $text-field-filled-padding {
+        @include form-set-var(
+          text-field-filled-padding,
+          $text-field-filled-padding
+        );
+      }
+
+      @if not
+        $disable-text-field-outlined-theme and
+        $text-field-outlined-padding
+      {
+        @include form-set-var(
+          text-field-outlined-padding,
+          $text-field-outlined-padding
+        );
+      }
+
+      @if not
+        $disable-text-field-underlined-theme and
+        $text-field-underlined-padding
+      {
+        @include form-set-var(
+          text-field-underlined-padding,
+          $text-field-underlined-padding
+        );
+      }
     }
 
     @if not $disable-text-field {
-      @include set-var(text-field-height, $text-field-height);
-      @include set-var(text-field-padding-left, 0px);
-      @include set-var(text-field-padding-right, 0px);
-      @include set-var(text-field-padding-top, 0px);
-      @include set-var(text-field-border-color, $text-field-border-color);
-      @include set-var(
+      @include form-set-var(text-field-height, $text-field-height);
+      @include form-set-var(text-field-padding-left, 0px);
+      @include form-set-var(text-field-padding-right, 0px);
+      @include form-set-var(text-field-padding-top, 0px);
+      @include form-set-var(text-field-border-color, $text-field-border-color);
+      @include form-set-var(
         text-field-hover-border-color,
         $text-field-hover-border-color
       );
 
-      @include set-var(
+      @include form-set-var(
         text-field-filled-color,
         $text-field-filled-background-color
       );
     }
 
     @if not $disable-textarea {
-      @include set-var(textarea-height, $text-field-height);
-      @include set-var(textarea-padding, $textarea-vertical-padding);
+      @include form-set-var(textarea-height, $text-field-height);
+      @include form-set-var(textarea-padding, $textarea-vertical-padding);
     }
 
     @if not $disable-text-field-addon {
-      @include set-var(addon-top, auto);
-      @include set-var(addon-margin-top, 0px);
+      @include form-set-var(addon-top, auto);
+      @include form-set-var(addon-margin-top, 0px);
+      @include form-set-var(addon-left-offset, 0px);
+      @include form-set-var(addon-spacing, $text-field-addon-spacing);
     }
 
     @if not $disable-switch {
-      @include set-var(
+      @include form-set-var(
         switch-track-background-color,
         $switch-track-background-color
       );
-      @include set-var(
+      @include form-set-var(
         switch-ball-background-color,
         $switch-ball-background-color
       );
     }
 
     @if not $disable-slider {
-      @include set-var(slider-color, $slider-track-color);
-      @include set-var(slider-active-color, $slider-track-active-color);
-      @include set-var(slider-inactive-color, $slider-track-inactive-color);
-      @include set-var(slider-size, $slider-size);
-      @include set-var(slider-active-size, $slider-track-active-size);
-      @include set-var(slider-inactive-size, $slider-track-inactive-size);
+      @include form-set-var(slider-color, $slider-track-color);
+      @include form-set-var(slider-active-color, $slider-track-active-color);
+      @include form-set-var(
+        slider-inactive-color,
+        $slider-track-inactive-color
+      );
+      @include form-set-var(slider-size, $slider-size);
+      @include form-set-var(slider-active-size, $slider-track-active-size);
+      @include form-set-var(slider-inactive-size, $slider-track-inactive-size);
       @if not $disable-discrete-slider {
-        @include set-var(slider-tooltip-scale, 1);
-        @include set-var(slider-tooltip-translate, -50%);
+        @include form-set-var(slider-tooltip-scale, 1);
+        @include form-set-var(slider-tooltip-translate, -50%);
 
         @if not $disable-discrete-slider-marks {
-          @include set-var(slider-mark-offset, 0%);
-          @include set-var(slider-mark-active-color, $slider-mark-active-color);
-          @include set-var(
+          @include form-set-var(slider-mark-offset, 0%);
+          @include form-set-var(
+            slider-mark-active-color,
+            $slider-mark-active-color
+          );
+          @include form-set-var(
             slider-mark-active-opacity,
             $slider-mark-active-opacity
           );
-          @include set-var(
+          @include form-set-var(
             slider-mark-inactive-color,
             $slider-mark-inactive-color
           );
-          @include set-var(
+          @include form-set-var(
             slider-mark-inactive-opacity,
             $slider-mark-inactive-opacity
           );
@@ -1974,97 +2235,100 @@ $variables: (
       }
 
       @if not $disable-vertical-slider {
-        @include set-var(slider-vertical-size, $slider-vertical-size);
+        @include form-set-var(slider-vertical-size, $slider-vertical-size);
       }
     }
   }
 }
 
-@mixin styles {
-  @include theme.default-system-theme {
-    @include use-dark-theme;
-  }
-
-  @if not $disable-fieldset {
-    .rmd-fieldset {
-      &--unstyled {
-        border: 0;
-        margin: 0;
-        min-width: 0; // just so it can shrink correctly in flex or grid
-        padding: 0;
+@mixin form-styles($disable-layer: false) {
+  @if not $form-disable-everything {
+    @include utils.optional-layer(form, $disable-layer) {
+      @include theme.default-system-theme {
+        @include form-use-dark-theme;
       }
 
-      &--full-width {
-        flex: 1 1 auto;
-        width: 100%;
-      }
-    }
-  }
+      @if not $disable-fieldset {
+        .rmd-fieldset {
+          &--unstyled {
+            border: 0;
+            margin: 0;
+            min-width: 0; // just so it can shrink correctly in flex or grid
+            padding: 0;
+          }
 
-  @if not $disable-label {
-    @include label-styles;
-  }
+          &--full-width {
+            flex: 1 1 auto;
+            width: 100%;
+          }
+        }
+      }
 
-  @if not $disable-file-input {
-    @include file-input-styles;
-  }
+      @if not $disable-label {
+        @include label-styles(true);
+      }
 
-  @if not $disable-message {
-    @include form-message-styles;
-  }
+      @if not $disable-message {
+        @include form-message-styles(true);
+      }
 
-  @if not $_disable-text-field-container {
-    @include text-field-container-styles;
-  }
+      @if not $_disable-text-field-container {
+        @include text-field-container-styles(true);
+      }
 
-  @if not $disable-text-field or not $disable-password or not $disable-textarea
-  {
-    @include text-field-styles;
-  }
+      @if not
+        $disable-text-field or not
+        $disable-password or not
+        $disable-textarea
+      {
+        @include text-field-styles(true);
+      }
 
-  @if not $disable-password {
-    @include password-styles;
-  }
+      @if not $disable-password {
+        @include password-styles(true);
+      }
 
-  @if not $disable-textarea {
-    @include textarea-container-styles;
-    @include textarea-styles;
-  }
+      @if not $disable-textarea {
+        @include textarea-container-styles(true);
+        @include textarea-styles(true);
+      }
 
-  @if not $disable-select {
-    @include select-styles;
-  }
+      @if not $disable-select {
+        @include select-styles(true);
+      }
 
-  @if not $disable-option {
-    @include option-styles;
-  }
+      @if not $disable-option {
+        @include option-styles(true);
+      }
 
-  @if not $disable-native-select {
-    @include native-select-styles;
-  }
+      @if not $disable-native-select {
+        @include native-select-styles(true);
+      }
 
-  @if not $disable-text-field-addon {
-    @include text-field-addon-styles;
-  }
+      @if not $disable-text-field-addon {
+        @include text-field-addon-styles(true);
+      }
 
-  @if not $disable-checkbox or not $disable-radio or not $disable-switch {
-    @include hidden-input-styles;
-    @include input-toggle-styles;
-  }
+      @if not $disable-checkbox or not $disable-radio or not $disable-switch {
+        @include hidden-input-styles(true);
+        @include input-toggle-styles(true);
+      }
 
-  @if not $disable-switch {
-    @include switch-styles;
-  }
+      @if not $disable-switch {
+        @include switch-styles(true);
+      }
 
-  @if not
-    $disable-menu-item-checkbox or not
-    $disable-menu-item-radio or not
-    $disable-menu-item-switch
-  {
-    @include menu-item-input-toggle-styles;
-  }
+      @if not
+        $disable-menu-item-checkbox or not
+        $disable-menu-item-radio or not
+        $disable-menu-item-switch
+      {
+        @include menu-item-input-toggle-styles(true);
+      }
 
-  @if not $disable-slider {
-    @include slider-styles;
+      @if not $disable-slider {
+        @include slider-styles(true);
+      }
+    }
   }
 }