@react-md/core 1.0.0-next.5 → 1.0.0-next.6

package/src/dialog/_dialog.scss

@@ -100,168 +100,170 @@ $variables: (
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-dialog-container {
-      @include use-var(z-index);
-
-      align-items: center;
-      display: flex;
-      inset: 0;
-      justify-content: center;
-      margin: get-var(vertical-margin) get-var(horizontal-margin);
-      margin-right: calc(
-        #{get-var(horizontal-margin)} + #{utils.scrollbar-size()}
-      );
-      pointer-events: none;
-      position: fixed;
-    }
+    @include utils.optional-layer(dialog, $disable-layer) {
+      .rmd-dialog-container {
+        @include use-var(z-index);
 
-    .rmd-dialog {
-      @include box-shadows.box-shadow($elevation);
+        align-items: center;
+        display: flex;
+        inset: 0;
+        justify-content: center;
+        margin: get-var(vertical-margin) get-var(horizontal-margin);
+        margin-right: calc(
+          #{get-var(horizontal-margin)} + #{utils.scrollbar-size()}
+        );
+        pointer-events: none;
+        position: fixed;
+      }
 
-      background-color: $background-color;
-      color: $color;
-      display: flex;
-      flex-direction: column;
-      max-height: 100%;
-      max-width: 100%;
-      outline: none;
+      .rmd-dialog {
+        @include box-shadows.box-shadow($elevation);
 
-      &--centered {
-        @include use-var(min-width);
+        background-color: $background-color;
+        color: $color;
+        display: flex;
+        flex-direction: column;
+        max-height: 100%;
+        max-width: 100%;
+        outline: none;
 
-        pointer-events: auto;
-      }
+        &--centered {
+          @include use-var(min-width);
 
-      &--full-page {
-        @include use-var(z-index);
+          pointer-events: auto;
+        }
 
-        height: 100%;
-        inset: 0;
-        overflow: auto;
-        position: fixed;
-        width: 100%;
-      }
+        &--full-page {
+          @include use-var(z-index);
 
-      @if not $disable-focus-outline {
-        // Note: Do not use the `interaction-outline` mixin +
-        // `interaction.set-var(interaction.$focus-color)` like normal focus
-        // elements since it'll make all focusable children update with the
-        // outline color as well
-        @if utils.$disable-focus-visible {
-          @include utils.keyboard-only {
-            &--outline:focus {
-              outline: interaction.get-var(focus-color) solid
+          height: 100%;
+          inset: 0;
+          overflow: auto;
+          position: fixed;
+          width: 100%;
+        }
+
+        @if not $disable-focus-outline {
+          // Note: Do not use the `interaction-outline` mixin +
+          // `interaction.set-var(interaction.$focus-color)` like normal focus
+          // elements since it'll make all focusable children update with the
+          // outline color as well
+          @if utils.$disable-focus-visible {
+            @include utils.keyboard-only {
+              &--outline:focus {
+                outline: interaction.get-var(focus-color) solid
+                  interaction.get-var(focus-width);
+              }
+            }
+          } @else {
+            &--outline:focus-visible {
+              outline: interaction.get-var(focus-color)
+                solid
                 interaction.get-var(focus-width);
             }
           }
-        } @else {
-          &--outline:focus-visible {
-            outline: interaction.get-var(focus-color)
-              solid
-              interaction.get-var(focus-width);
-          }
         }
-      }
-
-      &--enter {
-        transform: translateY($transition-distance);
-      }
-
-      &--enter-active {
-        transform: translateY(0);
-        transition: transform $enter-duration;
-        transition-timing-function: $enter-timing-function;
-      }
-
-      &--exit {
-        opacity: 1;
-        transform: translateY(0);
-        transition:
-          transform $leave-duration,
-          opacity $leave-duration;
-        transition-timing-function: $leave-timing-function;
-      }
 
-      &--exit-active {
-        opacity: 0;
-        transform: translateY($transition-distance);
-      }
+        &--enter {
+          transform: translateY($transition-distance);
+        }
 
-      @if not $disable-fixed {
-        &--fixed {
-          @include use-var(z-index);
+        &--enter-active {
+          transform: translateY(0);
+          transition: transform $enter-duration;
+          transition-timing-function: $enter-timing-function;
         }
-      }
 
-      @if not $disable-header {
-        &__header {
-          @include use-var(padding, header-padding);
-          @include use-var(padding-bottom, header-padding-bottom);
+        &--exit {
+          opacity: 1;
+          transform: translateY(0);
+          transition:
+            transform $leave-duration,
+            opacity $leave-duration;
+          transition-timing-function: $leave-timing-function;
+        }
 
-          align-items: center;
-          display: flex;
-          flex: 0 0 auto;
+        &--exit-active {
+          opacity: 0;
+          transform: translateY($transition-distance);
         }
-      }
 
-      @if not $disable-title {
-        &__title {
-          // this makes it so it's easy to add a close button after the title
-          flex: 1 1 auto;
+        @if not $disable-fixed {
+          &--fixed {
+            @include use-var(z-index);
+          }
         }
-      }
 
-      @if not $disable-content {
-        &__content {
-          flex: 1 1 auto;
-          overflow: auto;
+        @if not $disable-header {
+          &__header {
+            @include use-var(padding, header-padding);
+            @include use-var(padding-bottom, header-padding-bottom);
 
-          &--padded {
-            @include use-var(padding, content-padding);
+            align-items: center;
+            display: flex;
+            flex: 0 0 auto;
           }
         }
-      }
 
-      @if not $disable-footer {
-        &__footer {
-          @include use-var(padding, footer-padding);
+        @if not $disable-title {
+          &__title {
+            // this makes it so it's easy to add a close button after the title
+            flex: 1 1 auto;
+          }
+        }
 
-          flex: 0 0 auto;
+        @if not $disable-content {
+          &__content {
+            flex: 1 1 auto;
+            overflow: auto;
 
-          @if not
-            $disable-footer-flex-vertical or not
-            $disable-footer-flex-start or not
-            $disable-footer-space-between or not
-            $disable-footer-flex-end
-          {
-            &--flex {
-              display: flex;
+            &--padded {
+              @include use-var(padding, content-padding);
             }
           }
+        }
 
-          @if not $disable-footer-flex-vertical {
-            &--flex-v {
-              flex-direction: column;
+        @if not $disable-footer {
+          &__footer {
+            @include use-var(padding, footer-padding);
+
+            flex: 0 0 auto;
+
+            @if not
+              $disable-footer-flex-vertical or not
+              $disable-footer-flex-start or not
+              $disable-footer-space-between or not
+              $disable-footer-flex-end
+            {
+              &--flex {
+                display: flex;
+              }
             }
-          }
 
-          @if not $disable-footer-flex-start {
-            &--start {
-              justify-content: flex-start;
+            @if not $disable-footer-flex-vertical {
+              &--flex-v {
+                flex-direction: column;
+              }
             }
-          }
 
-          @if not $disable-footer-space-between {
-            &--between {
-              justify-content: space-between;
+            @if not $disable-footer-flex-start {
+              &--start {
+                justify-content: flex-start;
+              }
+            }
+
+            @if not $disable-footer-space-between {
+              &--between {
+                justify-content: space-between;
+              }
             }
-          }
 
-          @if not $disable-footer-flex-end {
-            &--end {
-              justify-content: flex-end;
+            @if not $disable-footer-flex-end {
+              &--end {
+                justify-content: flex-end;
+              }
             }
           }
         }

package/src/divider/_divider.scss

@@ -85,36 +85,38 @@ $variables: (
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    @include theme.default-system-theme {
-      @include use-dark-theme;
-    }
+    @include utils.optional-layer(divider, $disable-layer) {
+      @include theme.default-system-theme {
+        @include use-dark-theme;
+      }
 
-    .rmd-divider {
-      @include use-var(margin, spacing);
-      @include use-var(width, max-size);
+      .rmd-divider {
+        @include use-var(margin, spacing);
+        @include use-var(width, max-size);
 
-      border: get-var(size) solid get-var(color);
-      display: block;
-      flex-shrink: 0;
+        border: get-var(size) solid get-var(color);
+        display: block;
+        flex-shrink: 0;
 
-      @if not $disable-inset {
-        &--inset {
-          @include utils.auto-rtl(margin-left, get-var(inset), auto);
+        @if not $disable-inset {
+          &--inset {
+            @include utils.auto-rtl(margin-left, get-var(inset), auto);
 
-          width: calc(get-var(max-size) - get-var(inset));
+            width: calc(get-var(max-size) - get-var(inset));
+          }
         }
-      }
 
-      @if not $disable-vertical {
-        &--vertical {
-          @include border-style(left);
-          @include use-var(height, max-size);
-          @include use-var(width, size);
-          @include use-var(margin, vertical-spacing);
+        @if not $disable-vertical {
+          &--vertical {
+            @include border-style(left);
+            @include use-var(height, max-size);
+            @include use-var(width, size);
+            @include use-var(margin, vertical-spacing);
 
-          display: inline-block;
+            display: inline-block;
+          }
         }
       }
     }

package/src/draggable/_draggable.scss

@@ -1,23 +1,27 @@
+@use "../utils";
+
 $disable-everything: false !default;
 $disable-horizontal: false !default;
 $disable-vertical: false !default;
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-dragging {
-      * {
-        pointer-events: none;
-      }
+    @include utils.optional-layer(draggable, $disable-layer) {
+      .rmd-dragging {
+        * {
+          pointer-events: none;
+        }
 
-      @if not $disable-horizontal {
-        &--h {
-          cursor: col-resize;
+        @if not $disable-horizontal {
+          &--h {
+            cursor: col-resize;
+          }
         }
-      }
 
-      @if not $disable-vertical {
-        &--v {
-          cursor: row-resize;
+        @if not $disable-vertical {
+          &--v {
+            cursor: row-resize;
+          }
         }
       }
     }

package/src/expansion-panel/_expansion-panel.scss

@@ -16,74 +16,91 @@ $rotate-to: icon.$rotate-to !default;
 $box-shadow-overlay-height: 10px !default;
 $box-shadow-overlay-bottom: -6px !default;
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    // does not require custom styles
-    .rmd-expansion-panel {
-      @if not $disable-margin-top-transition and $spacing {
-        &--animate {
-          transition: margin-top transition.$linear-duration;
+    @include utils.optional-layer(expansion-panel, $disable-layer) {
+      // does not require custom styles
+      .rmd-expansion-panel {
+        @if not $disable-margin-top-transition and $spacing {
+          &--animate {
+            transition: margin-top transition.$linear-duration;
+          }
         }
-      }
 
-      @if $spacing {
-        &--expanded + .rmd-expansion-panel {
-          margin-top: $spacing;
+        @if $spacing {
+          &--expanded + .rmd-expansion-panel {
+            margin-top: $spacing;
+          }
         }
-      }
 
-      @if not utils.$disable-has-selectors {
-        // this makes it so that the box-shadow between closed panels is not
-        // visible by covering it in a small overlay of the current
-        // background-color
-        &:where(:not(.rmd-expansion-panel--expanded)):has(
-            + .rmd-expansion-panel
-          ) {
-          position: relative;
+        @if not utils.$disable-has-selectors {
+          // this makes it so that the box-shadow between closed panels is not
+          // visible by covering it in a small overlay of the current
+          // background-color
+          &:where(:not(.rmd-expansion-panel--expanded)):has(
+              + .rmd-expansion-panel
+            ) {
+            position: relative;
 
-          &::after {
-            @include theme.theme-use-var(background-color);
+            &::after {
+              @include theme.theme-use-var(background-color);
 
-            bottom: $box-shadow-overlay-bottom;
-            content: "";
-            height: $box-shadow-overlay-height;
-            left: 0;
-            position: absolute;
-            right: 0;
-            z-index: 1;
+              bottom: $box-shadow-overlay-bottom;
+              content: "";
+              height: $box-shadow-overlay-height;
+              left: 0;
+              position: absolute;
+              right: 0;
+              z-index: 1;
+            }
           }
         }
       }
-    }
 
-    // .rmd-expansion-panel__header {
-    // }
+      // .rmd-expansion-panel__header {
+      // }
 
-    .rmd-expansion-panel__button {
-      @if $rotate-from != icon.$rotate-from {
-        @include icon.set-var(rotate-from, $rotate-from);
-      }
+      .rmd-expansion-panel__button {
+        @if $rotate-from != icon.$rotate-from {
+          @include icon.set-var(rotate-from, $rotate-from);
+        }
 
-      @if $rotate-to != icon.$rotate-to {
-        @include icon.set-var(rotate-to, $rotate-to);
-      }
+        @if $rotate-to != icon.$rotate-to {
+          @include icon.set-var(rotate-to, $rotate-to);
+        }
 
-      @if button.$disable-unstyled-utility-class {
-        @include button.unstyled;
-      }
-      @include utils.auto-rtl(text-align, left);
+        @if button.$disable-unstyled-utility-class {
+          @include button.unstyled;
+        }
+        @include utils.auto-rtl(text-align, left);
 
-      align-items: center;
-      color: inherit;
-      font: inherit;
-      gap: $button-spacing;
-      justify-content: space-between;
-      letter-spacing: inherit;
-      padding: $padding;
-      width: 100%;
+        align-items: center;
+        color: inherit;
+        font: inherit;
+        gap: $button-spacing;
+        justify-content: space-between;
+        letter-spacing: inherit;
+        padding: $padding;
+        width: 100%;
 
-      &[aria-disabled="true"] {
-        cursor: auto;
+        &[aria-disabled="true"] {
+          cursor: auto;
+        }
+
+        // need to raise the focus outline z-index so it is above the box-shadow
+        @if not utils.$disable-has-selectors {
+          @if not utils.$disable-focus-visible {
+            &::before {
+              z-index: 2;
+            }
+          } @else {
+            @include utils.keyboard-only {
+              &::before {
+                z-index: 2;
+              }
+            }
+          }
+        }
       }
     }
   }

package/src/form/Form.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { forwardRef, type FormHTMLAttributes } from "react";
 
 const noop = (): void => {
@@ -16,7 +17,7 @@ export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
 }
 
 /**
- * **Server Component**
+ * **Client Component**
  *
  * This is probably one of the least useful components available as it doesn't
  * do much styling or logic. All this form component will do is add basic flex