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

package/dist/window-splitter/WindowSplitter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/window-splitter/WindowSplitter.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type ButtonHTMLAttributes } from \"react\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { bem } from \"../utils/bem.js\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useWindowSplitter } from \"./useWindowSplitter.js\";\n\nconst styles = bem(\"rmd-window-splitter\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface WindowSplitterClassNameOptions {\n  className?: string;\n  dragging?: boolean;\n  reversed?: boolean;\n  vertical?: boolean;\n  disableFixed?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function windowSplitter(\n  options: WindowSplitterClassNameOptions = {}\n): string {\n  const {\n    vertical = false,\n    dragging,\n    reversed,\n    disableFixed,\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      h: !vertical,\n      hr: !vertical && reversed,\n      v: vertical,\n      vr: vertical && reversed,\n      a: disableFixed,\n      dragging,\n    }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/}\n */\nexport interface BaseWindowSplitterProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\"> {\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  \"aria-controls\": string;\n\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  dragging: boolean;\n\n  /**\n   * This will be provided by the {@link useWindowSplitter} hook.\n   */\n  reversed: boolean;\n\n  /**\n   * Set this to `true` if the window splitter should use `position: absolute`\n   * instead of `position: fixed`.\n   *\n   * @defaultValue `false`\n   */\n  disableFixed?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type WindowSplitterProps = LabelRequiredForA11y<BaseWindowSplitterProps>;\n\n/**\n * **Server Component**\n * Most likely a client component since it relies on `useWindowSplitter`\n *\n * @see {@link useWindowSplitter} for an example usage\n * @remarks \\@since 6.0.0\n */\nexport const WindowSplitter = forwardRef<\n  HTMLButtonElement,\n  WindowSplitterProps\n>(function WindowSplitter(props, ref) {\n  const {\n    role = \"separator\",\n    className,\n    dragging,\n    reversed,\n    disableFixed = false,\n    ...remaining\n  } = props;\n  const vertical = props[\"aria-orientation\"] === \"vertical\";\n\n  return (\n    <button\n      {...remaining}\n      ref={ref}\n      type=\"button\"\n      role={role}\n      className={windowSplitter({\n        className,\n        reversed,\n        dragging,\n        vertical,\n        disableFixed,\n      })}\n    />\n  );\n});\n"],"names":["cnb","forwardRef","bem","styles","windowSplitter","options","vertical","dragging","reversed","disableFixed","className","h","hr","v","vr","a","WindowSplitter","props","ref","role","remaining","button","type"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAmC,QAAQ;AAE9D,SAASC,GAAG,QAAQ,kBAAkB;AAKtC,MAAMC,SAASD,IAAI;AAanB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EACJC,WAAW,KAAK,EAChBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZC,SAAS,EACV,GAAGL;IAEJ,OAAOL,IACLG,OAAO;QACLQ,GAAG,CAACL;QACJM,IAAI,CAACN,YAAYE;QACjBK,GAAGP;QACHQ,IAAIR,YAAYE;QAChBO,GAAGN;QACHF;IACF,IACAG;AAEJ;AAqCA;;;;;;CAMC,GACD,OAAO,MAAMM,+BAAiBf,WAG5B,SAASe,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,OAAO,WAAW,EAClBT,SAAS,EACTH,QAAQ,EACRC,QAAQ,EACRC,eAAe,KAAK,EACpB,GAAGW,WACJ,GAAGH;IACJ,MAAMX,WAAWW,KAAK,CAAC,mBAAmB,KAAK;IAE/C,qBACE,KAACI;QACE,GAAGD,SAAS;QACbF,KAAKA;QACLI,MAAK;QACLH,MAAMA;QACNT,WAAWN,eAAe;YACxBM;YACAF;YACAD;YACAD;YACAG;QACF;;AAGN,GAAG"}

package/dist/window-splitter/_window-splitter.scss

@@ -37,104 +37,106 @@ $variables: (top, right, bottom, left, opacity, position);
   #{$property}: get-var($name, $fallback);
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    .rmd-window-splitter {
-      @include use-var(opacity);
-      @include utils.mouse-hover {
-        @include set-var(opacity, 1);
-      }
-      @include utils.keyboard-only {
-        // Do not use `:focus-visible` here since since it'll still be active
-        // after dragging with a mouse until the user clicks something else. The
-        // `--dragging` state handles that part
-        &:focus {
+    @include utils.optional-layer(window-splitter, $disable-layer) {
+      .rmd-window-splitter {
+        @include use-var(opacity);
+        @include utils.mouse-hover {
           @include set-var(opacity, 1);
         }
-      }
+        @include utils.keyboard-only {
+          // Do not use `:focus-visible` here since since it'll still be active
+          // after dragging with a mouse until the user clicks something else. The
+          // `--dragging` state handles that part
+          &:focus {
+            @include set-var(opacity, 1);
+          }
+        }
 
-      background-color: transparent;
-      border: 0;
-      outline-style: none;
-      padding: 0;
-      position: fixed;
-      transition: opacity transition.$linear-duration;
-      z-index: $z-index;
-
-      &::after {
-        background-color: $background-color;
-        content: "";
-        inset: 0;
-        position: absolute;
-      }
+        background-color: transparent;
+        border: 0;
+        outline-style: none;
+        padding: 0;
+        position: fixed;
+        transition: opacity transition.$linear-duration;
+        z-index: $z-index;
+
+        &::after {
+          background-color: $background-color;
+          content: "";
+          inset: 0;
+          position: absolute;
+        }
 
-      @if not $disable-horizontal {
-        &--h {
-          @include utils.auto-rtl(left, get-var(position));
-          @include use-var(bottom);
-          @include use-var(top);
+        @if not $disable-horizontal {
+          &--h {
+            @include utils.auto-rtl(left, get-var(position));
+            @include use-var(bottom);
+            @include use-var(top);
 
-          cursor: col-resize;
-          width: $size;
+            cursor: col-resize;
+            width: $size;
 
-          &::after {
-            width: $background-size;
+            &::after {
+              width: $background-size;
+            }
           }
-        }
 
-        @if not $disable-reversed {
-          &--hr {
-            @include utils.auto-rtl(right, get-var(position));
+          @if not $disable-reversed {
+            &--hr {
+              @include utils.auto-rtl(right, get-var(position));
 
-            left: auto;
+              left: auto;
 
-            &::after {
-              @include utils.auto-rtl(margin-left, auto);
+              &::after {
+                @include utils.auto-rtl(margin-left, auto);
+              }
             }
           }
         }
-      }
 
-      @if not $disable-vertical {
-        &--v {
-          @include use-var(left);
-          @include use-var(right);
-          @include use-var(top, position);
+        @if not $disable-vertical {
+          &--v {
+            @include use-var(left);
+            @include use-var(right);
+            @include use-var(top, position);
 
-          cursor: row-resize;
-          height: $size;
-          width: 100%;
+            cursor: row-resize;
+            height: $size;
+            width: 100%;
 
-          &::after {
-            height: $background-size;
+            &::after {
+              height: $background-size;
+            }
           }
-        }
 
-        @if not $disable-reversed {
-          &--vr {
-            @include use-var(bottom, position);
+          @if not $disable-reversed {
+            &--vr {
+              @include use-var(bottom, position);
 
-            top: auto;
+              top: auto;
 
-            &::after {
-              top: calc(100% - $background-size);
+              &::after {
+                top: calc(100% - $background-size);
+              }
             }
           }
         }
-      }
 
-      @if not $disable-absolute-position {
-        &--a {
-          position: absolute;
+        @if not $disable-absolute-position {
+          &--a {
+            position: absolute;
+          }
         }
-      }
 
-      &--dragging {
-        @include set-var(opacity, 1);
+        &--dragging {
+          @include set-var(opacity, 1);
 
-        // set to important so that the `.rmd-dragging` styles do not affect
-        // window splitter
-        pointer-events: auto !important;
+          // set to important so that the `.rmd-dragging` styles do not affect
+          // window splitter
+          pointer-events: auto !important;
+        }
       }
     }
   }

package/dist/window-splitter/useWindowSplitter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/window-splitter/useWindowSplitter.ts"],"sourcesContent":["\"use client\";\nimport { type Ref, type RefCallback } from \"react\";\nimport {\n  useDraggable,\n  type BaseDraggableOptions,\n  type DraggableImplementation,\n  type DraggableKeyboardEventHandlers,\n  type DraggableMouseEventHandlers,\n  type DraggableStateOptions,\n  type DraggableTouchEventHandlers,\n} from \"../draggable/useDraggable.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-window-splitter-top\"?: number | string;\n    \"--rmd-window-splitter-right\"?: number | string;\n    \"--rmd-window-splitter-bottom\"?: number | string;\n    \"--rmd-window-splitter-left\"?: number | string;\n    \"--rmd-window-splitter-opacity\"?: number | string;\n    \"--rmd-window-splitter-position\"?: number | string;\n  }\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface BaseWindowSplitterOptions<\n  E extends HTMLElement = HTMLButtonElement,\n> extends Omit<BaseDraggableOptions<E>, keyof DraggableTouchEventHandlers<E>> {\n  /**\n   * An optional id to use for the window splitter.\n   *\n   * @defaultValue `\"window-splitter-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * An optional ref for the window splitter element. This will be merged into\n   * the {@link WindowSplitterWidgetProps.ref}.\n   */\n  ref?: Ref<E>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type WindowSplitterOptions<E extends HTMLElement = HTMLButtonElement> =\n  BaseWindowSplitterOptions<E> & DraggableStateOptions;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface WindowSplitterWidgetProps<E extends HTMLElement>\n  extends Required<DraggableMouseEventHandlers<E>>,\n    Required<DraggableKeyboardEventHandlers<E>> {\n  \"aria-orientation\": \"vertical\" | undefined;\n  \"aria-valuenow\": number;\n  \"aria-valuemin\": number;\n  \"aria-valuemax\": number;\n  id: string;\n  ref: RefCallback<E>;\n  role: \"separator\";\n  reversed: boolean;\n  dragging: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface WindowSplitterImplementation<\n  E extends HTMLElement = HTMLButtonElement,\n> extends DraggableImplementation<E> {\n  splitterProps: WindowSplitterWidgetProps<E>;\n}\n\n/**\n * Used to control the state for the `WindowSplitter` component.\n *\n * @example\n * Custom Implementation\n * ```tsx\n * import { useWindowSplitter, WindowSplitterImplementation } from \"@react-md/core\";\n * import { useState } from \"react\";\n *\n * // this is pretty much the `useWindowSplitter` implementation\n * export function useMyCustomWindowSplitter(): WindowSplitterImplementation {\n *   const [dragging, setDragging] = useState(false);\n *   const [value, setValue] = useState(0);\n *   const splitter = useWindowSplitter({\n *     min: 0,\n *     max: 100,\n *     value,\n *     setValue,\n *     dragging,\n *     setDragging,\n *   });\n *\n *   return {\n *     ...splitter,\n *     value,\n *     setValue,\n *     dragging,\n *   }\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useWindowSplitter<E extends HTMLElement = HTMLButtonElement>(\n  options: WindowSplitterOptions<E>\n): WindowSplitterImplementation<E> {\n  const { id: propId, reversed = false, vertical } = options;\n\n  const id = useEnsuredId(propId, \"splitter\");\n  const draggableImplementation = useDraggable(options);\n  const {\n    dragging,\n    percentage,\n    draggableRef,\n    mouseEventHandlers,\n    keyboardEventHandlers,\n  } = draggableImplementation;\n\n  return {\n    ...draggableImplementation,\n    splitterProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : undefined,\n      \"aria-valuenow\": Math.ceil(percentage * 100),\n      \"aria-valuemin\": 0,\n      \"aria-valuemax\": 100,\n      id,\n      ref: draggableRef,\n      role: \"separator\",\n      dragging,\n      reversed,\n      ...mouseEventHandlers,\n      ...keyboardEventHandlers,\n    },\n  };\n}\n"],"names":["useDraggable","useEnsuredId","useWindowSplitter","options","id","propId","reversed","vertical","draggableImplementation","dragging","percentage","draggableRef","mouseEventHandlers","keyboardEventHandlers","splitterProps","undefined","Math","ceil","ref","role"],"mappings":"AAAA;AAEA,SACEA,YAAY,QAOP,+BAA+B;AACtC,SAASC,YAAY,QAAQ,qBAAqB;AAiElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GACD,OAAO,SAASC,kBACdC,OAAiC;IAEjC,MAAM,EAAEC,IAAIC,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,EAAE,GAAGJ;IAEnD,MAAMC,KAAKH,aAAaI,QAAQ;IAChC,MAAMG,0BAA0BR,aAAaG;IAC7C,MAAM,EACJM,QAAQ,EACRC,UAAU,EACVC,YAAY,EACZC,kBAAkB,EAClBC,qBAAqB,EACtB,GAAGL;IAEJ,OAAO;QACL,GAAGA,uBAAuB;QAC1BM,eAAe;YACb,oBAAoBP,WAAW,aAAaQ;YAC5C,iBAAiBC,KAAKC,IAAI,CAACP,aAAa;YACxC,iBAAiB;YACjB,iBAAiB;YACjBN;YACAc,KAAKP;YACLQ,MAAM;YACNV;YACAH;YACA,GAAGM,kBAAkB;YACrB,GAAGC,qBAAqB;QAC1B;IACF;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "1.0.0-next.4",
+  "version": "1.0.0-next.6",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -60,7 +60,7 @@
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
-    "@swc/cli": "^0.3.0",
+    "@swc/cli": "^0.1.63",
     "@swc/core": "1.3.105",
     "@swc/jest": "^0.2.31",
     "@testing-library/dom": "^9.3.4",

package/src/_core.scss

@@ -140,160 +140,162 @@ $_layer-order: (
   }
 }
 
-@mixin css-utils {
-  .rmd-display-none {
-    display: none !important;
-  }
+@mixin css-utils($disable-layer: false) {
+  @include utils.optional-layer(utils, $disable-layer) {
+    .rmd-display-none {
+      display: none !important;
+    }
 
-  .rmd-sr-only {
-    @include utils.sr-only(true);
-  }
+    .rmd-sr-only {
+      @include utils.sr-only(true);
+    }
 
-  .rmd-phone-sr-only {
-    @include media-queries.phone-media {
-      @include utils.sr-only;
+    .rmd-phone-sr-only {
+      @include media-queries.phone-media {
+        @include utils.sr-only;
+      }
     }
-  }
 
-  .rmd-outline {
-    // inset box-shadow is faded on the lower right half? use outline instead
-    outline: theme.theme-get-var(outline-width) solid
-      theme.theme-get-var(outline-color);
-    outline-offset: utils.negate-var(theme.theme-get-var(outline-width));
-  }
+    .rmd-outline {
+      // inset box-shadow is faded on the lower right half? use outline instead
+      outline: theme.theme-get-var(outline-width) solid
+        theme.theme-get-var(outline-color);
+      outline-offset: utils.negate-var(theme.theme-get-var(outline-width));
+    }
 
-  .rmd-greyscale-outline {
-    @include theme.theme-set-var(outline-color, outline-grey-color);
-  }
+    .rmd-greyscale-outline {
+      @include theme.theme-set-var(outline-color, outline-grey-color);
+    }
 
-  .rmd-background-container {
-    @include theme.theme-use-var(background-color);
-    @include theme.theme-use-var(color, on-background-color, currentcolor);
-  }
+    .rmd-background-container {
+      @include theme.theme-use-var(background-color);
+      @include theme.theme-use-var(color, on-background-color, currentcolor);
+    }
 
-  @each $color in (primary, secondary, warning, success, error) {
-    $theme-name: $color + "-color";
-    $on-theme-name: "on-" + $theme-name;
+    @each $color in (primary, secondary, warning, success, error) {
+      $theme-name: $color + "-color";
+      $on-theme-name: "on-" + $theme-name;
 
-    .rmd-#{$color}-container {
-      @include theme.theme-set-var(background-color, $theme-name);
-      @include theme.theme-set-var(on-background-color, $on-theme-name);
-    }
+      .rmd-#{$color}-container {
+        @include theme.theme-set-var(background-color, $theme-name);
+        @include theme.theme-set-var(on-background-color, $on-theme-name);
+      }
 
-    .rmd-#{$theme-name} {
-      @include theme.theme-use-var(color, $theme-name);
-    }
+      .rmd-#{$theme-name} {
+        @include theme.theme-use-var(color, $theme-name);
+      }
 
-    .rmd-#{$on-theme-name} {
-      @include theme.theme-use-var(color, $on-theme-name);
-    }
+      .rmd-#{$on-theme-name} {
+        @include theme.theme-use-var(color, $on-theme-name);
+      }
 
-    .rmd-#{$color}-outline {
-      @include theme.theme-set-var(outline-color, $theme-name);
+      .rmd-#{$color}-outline {
+        @include theme.theme-set-var(outline-color, $theme-name);
+      }
     }
-  }
 
-  @each $color in (primary, secondary, hint, disabled) {
-    .rmd-text-#{$color}-color {
-      @include theme.theme-use-var(color, text-#{$color}-color);
+    @each $color in (primary, secondary, hint, disabled) {
+      .rmd-text-#{$color}-color {
+        @include theme.theme-use-var(color, text-#{$color}-color);
+      }
     }
-  }
 
-  .rmd-light-surface {
-    @include interaction.use-light-surface;
-    @include theme.theme-set-var(
-      text-primary-color,
-      theme.$light-theme-text-primary-color
-    );
-    @include theme.theme-set-var(
-      text-secondary-color,
-      theme.$light-theme-text-secondary-color
-    );
-    @include theme.theme-set-var(
-      text-hint-color,
-      theme.$light-theme-text-hint-color
-    );
-    @include theme.theme-set-var(
-      text-disabled-color,
-      theme.$dark-theme-text-disabled-color
-    );
-  }
+    .rmd-light-surface {
+      @include interaction.use-light-surface;
+      @include theme.theme-set-var(
+        text-primary-color,
+        theme.$light-theme-text-primary-color
+      );
+      @include theme.theme-set-var(
+        text-secondary-color,
+        theme.$light-theme-text-secondary-color
+      );
+      @include theme.theme-set-var(
+        text-hint-color,
+        theme.$light-theme-text-hint-color
+      );
+      @include theme.theme-set-var(
+        text-disabled-color,
+        theme.$dark-theme-text-disabled-color
+      );
+    }
 
-  .rmd-dark-surface {
-    @include interaction.use-dark-surface;
-    @include theme.theme-set-var(
-      text-primary-color,
-      theme.$dark-theme-text-primary-color
-    );
-    @include theme.theme-set-var(
-      text-secondary-color,
-      theme.$dark-theme-text-secondary-color
-    );
-    @include theme.theme-set-var(
-      text-hint-color,
-      theme.$dark-theme-text-hint-color
-    );
-    @include theme.theme-set-var(
-      text-disabled-color,
-      theme.$dark-theme-text-disabled-color
-    );
-  }
+    .rmd-dark-surface {
+      @include interaction.use-dark-surface;
+      @include theme.theme-set-var(
+        text-primary-color,
+        theme.$dark-theme-text-primary-color
+      );
+      @include theme.theme-set-var(
+        text-secondary-color,
+        theme.$dark-theme-text-secondary-color
+      );
+      @include theme.theme-set-var(
+        text-hint-color,
+        theme.$dark-theme-text-hint-color
+      );
+      @include theme.theme-set-var(
+        text-disabled-color,
+        theme.$dark-theme-text-disabled-color
+      );
+    }
 
-  .rmd-no-margin {
-    margin: 0;
-  }
+    .rmd-no-margin {
+      margin: 0;
+    }
 
-  .rmd-no-margin-top {
-    margin-top: 0;
-  }
+    .rmd-no-margin-top {
+      margin-top: 0;
+    }
 
-  .rmd-no-margin-bottom {
-    margin-bottom: 0;
-  }
+    .rmd-no-margin-bottom {
+      margin-bottom: 0;
+    }
 
-  .rmd-centered {
-    margin: 0 auto;
-  }
+    .rmd-centered {
+      margin: 0 auto;
+    }
 
-  .rmd-nowrap {
-    white-space: nowrap;
-  }
+    .rmd-nowrap {
+      white-space: nowrap;
+    }
 
-  .rmd-ellipsis {
-    @include typography.text-overflow(null);
-  }
+    .rmd-ellipsis {
+      @include typography.text-overflow(null);
+    }
 
-  @each $alignment in typography.$text-alignments {
-    .rmd-align-#{$alignment} {
-      @if $alignment != center {
-        @include utils.auto-rtl(text-align, $alignment);
-      } @else {
-        text-align: $alignment;
+    @each $alignment in typography.$text-alignments {
+      .rmd-align-#{$alignment} {
+        @if $alignment != center {
+          @include utils.auto-rtl(text-align, $alignment);
+        } @else {
+          text-align: $alignment;
+        }
       }
     }
-  }
 
-  @each $decoration in typography.$text-decorations {
-    .rmd-#{$decoration} {
-      text-decoration: $decoration;
+    @each $decoration in typography.$text-decorations {
+      .rmd-#{$decoration} {
+        text-decoration: $decoration;
+      }
     }
-  }
 
-  @each $transform in typography.$text-transforms {
-    .rmd-#{$transform} {
-      text-transform: $transform;
+    @each $transform in typography.$text-transforms {
+      .rmd-#{$transform} {
+        text-transform: $transform;
+      }
     }
-  }
 
-  @each $font-style in typography.$font-styles {
-    .rmd-#{$font-style} {
-      font-style: $font-style;
+    @each $font-style in typography.$font-styles {
+      .rmd-#{$font-style} {
+        font-style: $font-style;
+      }
     }
-  }
 
-  @each $name, $font-weight in typography.$font-weights {
-    .rmd-#{$name} {
-      font-weight: $font-weight;
+    @each $name, $font-weight in typography.$font-weights {
+      .rmd-#{$name} {
+        font-weight: $font-weight;
+      }
     }
   }
 }
@@ -363,124 +365,39 @@ $_layer-order: (
   @include css-reset;
 
   @layer #{$_layer-order};
-  @layer utils {
-    @include css-utils;
-  }
-
-  @layer app-bar {
-    @include app-bar.styles;
-  }
-  @layer avatar {
-    @include avatar.styles;
-  }
-  @layer badge {
-    @include badge.styles;
-  }
-  @layer box {
-    @include box.styles;
-  }
-  @layer button {
-    @include button.styles;
-  }
-  @layer card {
-    @include card.styles;
-  }
-  @layer chip {
-    @include chip.styles;
-  }
-
-  @layer dialog {
-    @include dialog.styles;
-  }
-  @layer divider {
-    @include divider.styles;
-  }
-  @layer draggable {
-    @include draggable.styles;
-  }
-  @layer expansion-panel {
-    @include expansion-panel.styles;
-  }
-
-  @layer form {
-    @include form.styles;
-  }
-
-  @layer icon {
-    @include icon.styles;
-  }
-
-  @layer interaction {
-    @include interaction.styles;
-  }
-
-  @layer layout {
-    @include layout.styles;
-  }
-
-  @layer link {
-    @include link.styles;
-  }
-
-  @layer list {
-    @include list.styles;
-  }
-
-  @layer menu {
-    @include menu.styles;
-  }
-
-  @layer overlay {
-    @include overlay.styles;
-  }
-
-  @layer progress {
-    @include progress.styles;
-  }
-
-  @layer responsive-item {
-    @include responsive-item.styles;
-  }
-
-  @layer segmented-button {
-    @include segmented-button.styles;
-  }
-
-  @layer sheet {
-    @include sheet.styles;
-  }
-
-  @layer snackbar {
-    @include snackbar.styles;
-  }
-
-  @layer table {
-    @include table.styles;
-  }
-
-  @layer tabs {
-    @include tabs.styles;
-  }
-
-  @layer tooltip {
-    @include tooltip.styles;
-  }
-
-  @layer transition {
-    @include transition.transition-styles;
-  }
-
-  @layer tree {
-    @include tree.styles;
-  }
-
-  @layer typography {
-    @include typography.typography-styles;
-  }
-
-  @layer window-splitter {
-    @include window-splitter.styles;
-  }
+  @include css-utils;
+
+  @include app-bar.styles;
+  @include avatar.styles;
+  @include badge.styles;
+  @include box.styles;
+  @include button.styles;
+  @include card.styles;
+  @include chip.styles;
+  @include dialog.styles;
+  @include divider.styles;
+  @include draggable.styles;
+  @include expansion-panel.styles;
+  @include form.styles;
+  @include icon.styles;
+  @include interaction.styles;
+  @include layout.styles;
+  @include link.styles;
+  @include list.styles;
+  @include menu.styles;
+  @include overlay.styles;
+  @include progress.styles;
+  @include responsive-item.styles;
+  @include segmented-button.styles;
+  @include sheet.styles;
+  @include snackbar.styles;
+  @include table.styles;
+  @include tabs.styles;
+  @include tooltip.styles;
+  @include transition.transition-styles;
+  @include tree.styles;
+  @include typography.typography-styles;
+  @include window-splitter.styles;
 
   @if not theme.$disable-default-root-theme {
     :root {

package/src/_utils.scss

@@ -336,3 +336,13 @@ $_swappable-properties: text-align;
     }
   }
 }
+
+@mixin optional-layer($name, $disabled) {
+  @if $disabled {
+    @content;
+  } @else {
+    @layer #{$name} {
+      @content;
+    }
+  }
+}