@react-md/core 6.3.4 → 6.4.0

package/dist/utils/getNumberOfDigits.js

@@ -0,0 +1,11 @@
+/**
+ * @since 6.4.0
+ * @see {@link https://stackoverflow.com/a/28203456}
+ */ export function getNumberOfDigits(value) {
+    if (typeof value !== "number") {
+        return;
+    }
+    return (Math.log10((value ^ value >> 31) - (value >> 31)) | 0) + 1;
+}
+
+//# sourceMappingURL=getNumberOfDigits.js.map

package/dist/utils/getNumberOfDigits.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/getNumberOfDigits.ts"],"sourcesContent":["/**\n * @since 6.4.0\n * @see {@link https://stackoverflow.com/a/28203456}\n */\nexport function getNumberOfDigits(value: number): number;\nexport function getNumberOfDigits(value: undefined): undefined;\nexport function getNumberOfDigits(\n  value: number | undefined\n): number | undefined;\nexport function getNumberOfDigits(\n  value: number | undefined\n): number | undefined {\n  if (typeof value !== \"number\") {\n    return;\n  }\n\n  return (Math.log10((value ^ (value >> 31)) - (value >> 31)) | 0) + 1;\n}\n"],"names":["getNumberOfDigits","value","Math","log10"],"mappings":"AAAA;;;CAGC,GAMD,OAAO,SAASA,kBACdC,KAAyB;IAEzB,IAAI,OAAOA,UAAU,UAAU;QAC7B;IACF;IAEA,OAAO,AAACC,CAAAA,KAAKC,KAAK,CAAC,AAACF,CAAAA,QAASA,SAAS,EAAE,IAAMA,CAAAA,SAAS,EAAC,KAAM,CAAA,IAAK;AACrE"}

package/dist/utils/nearest.js

@@ -1,3 +1,4 @@
+import { getNumberOfDigits } from "./getNumberOfDigits.js";
 /**
  * Rounds a number to the nearest step within a min/max range.
  *
@@ -16,7 +17,7 @@
     // precision gets weird:
     // 0.28 * 100 === 28.000000000000004
     const step = range / steps;
-    const decimals = Number.isInteger(step) ? range % steps : `${step}`.split(".")[1].length;
+    const decimals = Number.isInteger(step) ? range % steps : getNumberOfDigits(parseInt(`${step}`.split(".")[1]));
     return Math.min(max, Math.max(min, parseFloat((zeroToOne * range + min).toFixed(decimals))));
 }
 

package/dist/utils/nearest.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/nearest.ts"],"sourcesContent":["import { type MinMaxRange } from \"../types.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface NearestOptions extends MinMaxRange {\n  steps: number;\n  value: number;\n\n  /** @defaultValue `max - min` */\n  range?: number;\n}\n\n/**\n * Rounds a number to the nearest step within a min/max range.\n *\n * @see https://stackoverflow.com/a/13635455\n * @returns the value rounded to the nearest step in the min/max range\n * @since 2.5.0 Added the `range` param\n * @since 6.0.0 Converted to using an object instead of multiple arguments.\n */\nexport function nearest(options: NearestOptions): number {\n  const { min, max, steps, value, range = max - min } = options;\n  if (min === max) {\n    return max;\n  }\n\n  const rounded = Math.round(((value - min) * steps) / range) / steps;\n  const zeroToOne = Math.min(Math.max(rounded, 0), 1);\n\n  // have to calculate the number of allowed decimal places since decimal\n  // precision gets weird:\n  // 0.28 * 100 === 28.000000000000004\n  const step = range / steps;\n  const decimals = Number.isInteger(step)\n    ? range % steps\n    : `${step}`.split(\".\")[1].length;\n\n  return Math.min(\n    max,\n    Math.max(min, parseFloat((zeroToOne * range + min).toFixed(decimals)))\n  );\n}\n"],"names":["nearest","options","min","max","steps","value","range","rounded","Math","round","zeroToOne","step","decimals","Number","isInteger","split","length","parseFloat","toFixed"],"mappings":"AAcA;;;;;;;CAOC,GACD,OAAO,SAASA,QAAQC,OAAuB;IAC7C,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,KAAK,EAAEC,KAAK,EAAEC,QAAQH,MAAMD,GAAG,EAAE,GAAGD;IACtD,IAAIC,QAAQC,KAAK;QACf,OAAOA;IACT;IAEA,MAAMI,UAAUC,KAAKC,KAAK,CAAC,AAAEJ,CAAAA,QAAQH,GAAE,IAAKE,QAASE,SAASF;IAC9D,MAAMM,YAAYF,KAAKN,GAAG,CAACM,KAAKL,GAAG,CAACI,SAAS,IAAI;IAEjD,uEAAuE;IACvE,wBAAwB;IACxB,oCAAoC;IACpC,MAAMI,OAAOL,QAAQF;IACrB,MAAMQ,WAAWC,OAAOC,SAAS,CAACH,QAC9BL,QAAQF,QACR,GAAGO,MAAM,CAACI,KAAK,CAAC,IAAI,CAAC,EAAE,CAACC,MAAM;IAElC,OAAOR,KAAKN,GAAG,CACbC,KACAK,KAAKL,GAAG,CAACD,KAAKe,WAAW,AAACP,CAAAA,YAAYJ,QAAQJ,GAAE,EAAGgB,OAAO,CAACN;AAE/D"}
+{"version":3,"sources":["../../src/utils/nearest.ts"],"sourcesContent":["import { type MinMaxRange } from \"../types.js\";\nimport { getNumberOfDigits } from \"./getNumberOfDigits.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface NearestOptions extends MinMaxRange {\n  steps: number;\n  value: number;\n\n  /** @defaultValue `max - min` */\n  range?: number;\n}\n\n/**\n * Rounds a number to the nearest step within a min/max range.\n *\n * @see https://stackoverflow.com/a/13635455\n * @returns the value rounded to the nearest step in the min/max range\n * @since 2.5.0 Added the `range` param\n * @since 6.0.0 Converted to using an object instead of multiple arguments.\n */\nexport function nearest(options: NearestOptions): number {\n  const { min, max, steps, value, range = max - min } = options;\n  if (min === max) {\n    return max;\n  }\n\n  const rounded = Math.round(((value - min) * steps) / range) / steps;\n  const zeroToOne = Math.min(Math.max(rounded, 0), 1);\n\n  // have to calculate the number of allowed decimal places since decimal\n  // precision gets weird:\n  // 0.28 * 100 === 28.000000000000004\n  const step = range / steps;\n  const decimals = Number.isInteger(step)\n    ? range % steps\n    : getNumberOfDigits(parseInt(`${step}`.split(\".\")[1]));\n\n  return Math.min(\n    max,\n    Math.max(min, parseFloat((zeroToOne * range + min).toFixed(decimals)))\n  );\n}\n"],"names":["getNumberOfDigits","nearest","options","min","max","steps","value","range","rounded","Math","round","zeroToOne","step","decimals","Number","isInteger","parseInt","split","parseFloat","toFixed"],"mappings":"AACA,SAASA,iBAAiB,QAAQ,yBAAyB;AAc3D;;;;;;;CAOC,GACD,OAAO,SAASC,QAAQC,OAAuB;IAC7C,MAAM,EAAEC,GAAG,EAAEC,GAAG,EAAEC,KAAK,EAAEC,KAAK,EAAEC,QAAQH,MAAMD,GAAG,EAAE,GAAGD;IACtD,IAAIC,QAAQC,KAAK;QACf,OAAOA;IACT;IAEA,MAAMI,UAAUC,KAAKC,KAAK,CAAC,AAAEJ,CAAAA,QAAQH,GAAE,IAAKE,QAASE,SAASF;IAC9D,MAAMM,YAAYF,KAAKN,GAAG,CAACM,KAAKL,GAAG,CAACI,SAAS,IAAI;IAEjD,uEAAuE;IACvE,wBAAwB;IACxB,oCAAoC;IACpC,MAAMI,OAAOL,QAAQF;IACrB,MAAMQ,WAAWC,OAAOC,SAAS,CAACH,QAC9BL,QAAQF,QACRL,kBAAkBgB,SAAS,GAAGJ,MAAM,CAACK,KAAK,CAAC,IAAI,CAAC,EAAE;IAEtD,OAAOR,KAAKN,GAAG,CACbC,KACAK,KAAKL,GAAG,CAACD,KAAKe,WAAW,AAACP,CAAAA,YAAYJ,QAAQJ,GAAE,EAAGgB,OAAO,CAACN;AAE/D"}

package/dist/utils/useDevEffect.d.ts

@@ -0,0 +1,7 @@
+import { useEffect } from "react";
+/**
+ * This will be a no-op when `process.env.NODE_ENV === "production"`.
+ * Otherwise, it will be a normal `useEffect` call
+ * @since 6.4.0
+ */
+export declare const useDevEffect: typeof useEffect;

package/dist/utils/useDevEffect.js

@@ -0,0 +1,8 @@
+import { useEffect } from "react";
+/**
+ * This will be a no-op when `process.env.NODE_ENV === "production"`.
+ * Otherwise, it will be a normal `useEffect` call
+ * @since 6.4.0
+ */ export const useDevEffect = process.env.NODE_ENV === "production" ? ()=>{} : useEffect;
+
+//# sourceMappingURL=useDevEffect.js.map

package/dist/utils/useDevEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/useDevEffect.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\n/**\n * This will be a no-op when `process.env.NODE_ENV === \"production\"`.\n * Otherwise, it will be a normal `useEffect` call\n * @since 6.4.0\n */\nexport const useDevEffect =\n  process.env.NODE_ENV === \"production\" ? () => {} : useEffect;\n"],"names":["useEffect","useDevEffect","process","env","NODE_ENV"],"mappings":"AAAA,SAASA,SAAS,QAAQ,QAAQ;AAElC;;;;CAIC,GACD,OAAO,MAAMC,eACXC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe,KAAO,IAAIJ,UAAU"}

package/dist/window-splitter/WindowSplitter.js

@@ -45,7 +45,7 @@ import { windowSplitter } from "./styles.js";
  * @see {@link https://react-md.dev/components/window-splitter | WindowSplitter Demos}
  * @since 6.0.0
  */ export const WindowSplitter = /*#__PURE__*/ forwardRef(function WindowSplitter(props, ref) {
-    const { role = "separator", className, dragging, reversed, disableFixed = false, ...remaining } = props;
+    const { role = "separator", className, dragging, reversed, disableFixed, inactiveBackground, ...remaining } = props;
     const vertical = props["aria-orientation"] === "vertical";
     return /*#__PURE__*/ _jsx("button", {
         ...remaining,
@@ -57,7 +57,8 @@ import { windowSplitter } from "./styles.js";
             reversed,
             dragging,
             vertical,
-            disableFixed
+            disableFixed,
+            inactiveBackground
         })
     });
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/window-splitter/WindowSplitter.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, forwardRef } from \"react\";\n\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport {\n  type BaseWindowSplitterClassNameOptions,\n  windowSplitter,\n} from \"./styles.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useWindowSplitter } from \"./useWindowSplitter.js\";\n\n/**\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/}\n * @since 6.0.0\n * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions for CSSProperties\n * module augmentation.\n */\nexport interface BaseWindowSplitterProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\">,\n    BaseWindowSplitterClassNameOptions {\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/**\n * @since 6.0.0\n */\nexport type WindowSplitterProps = LabelRequiredForA11y<BaseWindowSplitterProps>;\n\n/**\n * The `WindowSplitter` should be used with the `useWindowSplitter` hook to\n * resize parts of a layout.\n *\n * See the `useResizableLayout` hook if the entire page layout should be\n * resizable.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n * import { WindowSplitter } from \"@react-md/core/window-splitter/WindowSplitter\";\n * import { useWindowSplitter } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useId, type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   const panelId = useId();\n *   const { value, splitterProps } = useWindowSplitter({\n *     min: 120,\n *     max: 380,\n *   });\n *\n *   return (\n *     <div\n *       style={{\n *         \"--rmd-window-splitter-position\": `${value}px`,\n *         display: \"grid\",\n *         gridTemplateColumns: \"var(--rmd-window-splitter-position, 120px) 1fr\",\n *       }}\n *     >\n *       <div>Panel 1</div>\n *       <WindowSplitter\n *         {...splitterProps}\n *         aria-controls={panelId}\n *         aria-labelledby={panelId}\n *       />\n *       <div>Panel 2</div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/window-splitter | WindowSplitter Demos}\n * @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":["forwardRef","windowSplitter","WindowSplitter","props","ref","role","className","dragging","reversed","disableFixed","remaining","vertical","button","type"],"mappings":";AAAA,SAAoCA,UAAU,QAAQ,QAAQ;AAG9D,SAEEC,cAAc,QACT,cAAc;AAkCrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,GACD,OAAO,MAAMC,+BAAiBF,WAG5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,OAAO,WAAW,EAClBC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,eAAe,KAAK,EACpB,GAAGC,WACJ,GAAGP;IACJ,MAAMQ,WAAWR,KAAK,CAAC,mBAAmB,KAAK;IAE/C,qBACE,KAACS;QACE,GAAGF,SAAS;QACbN,KAAKA;QACLS,MAAK;QACLR,MAAMA;QACNC,WAAWL,eAAe;YACxBK;YACAE;YACAD;YACAI;YACAF;QACF;;AAGN,GAAG"}
+{"version":3,"sources":["../../src/window-splitter/WindowSplitter.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, forwardRef } from \"react\";\n\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport {\n  type BaseWindowSplitterClassNameOptions,\n  windowSplitter,\n} from \"./styles.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useWindowSplitter } from \"./useWindowSplitter.js\";\n\n/**\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/}\n * @since 6.0.0\n * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions for CSSProperties\n * module augmentation.\n */\nexport interface BaseWindowSplitterProps\n  extends\n    Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\">,\n    BaseWindowSplitterClassNameOptions {\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/**\n * @since 6.0.0\n */\nexport type WindowSplitterProps = LabelRequiredForA11y<BaseWindowSplitterProps>;\n\n/**\n * The `WindowSplitter` should be used with the `useWindowSplitter` hook to\n * resize parts of a layout.\n *\n * See the `useResizableLayout` hook if the entire page layout should be\n * resizable.\n *\n * @example Simple Example\n * ```tsx\n * \"use client\";\n * import { WindowSplitter } from \"@react-md/core/window-splitter/WindowSplitter\";\n * import { useWindowSplitter } from \"@react-md/core/window-splitter/useWindowSplitter\";\n * import { useId, type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   const panelId = useId();\n *   const { value, splitterProps } = useWindowSplitter({\n *     min: 120,\n *     max: 380,\n *   });\n *\n *   return (\n *     <div\n *       style={{\n *         \"--rmd-window-splitter-position\": `${value}px`,\n *         display: \"grid\",\n *         gridTemplateColumns: \"var(--rmd-window-splitter-position, 120px) 1fr\",\n *       }}\n *     >\n *       <div>Panel 1</div>\n *       <WindowSplitter\n *         {...splitterProps}\n *         aria-controls={panelId}\n *         aria-labelledby={panelId}\n *       />\n *       <div>Panel 2</div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/window-splitter | WindowSplitter Demos}\n * @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,\n    inactiveBackground,\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        inactiveBackground,\n      })}\n    />\n  );\n});\n"],"names":["forwardRef","windowSplitter","WindowSplitter","props","ref","role","className","dragging","reversed","disableFixed","inactiveBackground","remaining","vertical","button","type"],"mappings":";AAAA,SAAoCA,UAAU,QAAQ,QAAQ;AAG9D,SAEEC,cAAc,QACT,cAAc;AAmCrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CC,GACD,OAAO,MAAMC,+BAAiBF,WAG5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,OAAO,WAAW,EAClBC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZC,kBAAkB,EAClB,GAAGC,WACJ,GAAGR;IACJ,MAAMS,WAAWT,KAAK,CAAC,mBAAmB,KAAK;IAE/C,qBACE,KAACU;QACE,GAAGF,SAAS;QACbP,KAAKA;QACLU,MAAK;QACLT,MAAMA;QACNC,WAAWL,eAAe;YACxBK;YACAE;YACAD;YACAK;YACAH;YACAC;QACF;;AAGN,GAAG"}

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

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../divider/divider";
 @use "../interaction/interaction";
 @use "../transition/transition";
 
@@ -27,6 +28,11 @@ $disable-reversed: false !default;
 /// @type Boolean
 $disable-absolute-position: false !default;
 
+/// Set to `true` to disable the inactive `background-color` styles.
+/// @since 6.4.0
+/// @type Boolean
+$disable-inactive-background-color: false !default;
+
 /// The default `WindowSplitter` draggable area.
 /// @type Number
 $size: 1rem !default;
@@ -35,10 +41,15 @@ $size: 1rem !default;
 /// @type Number
 $background-size: 0.25rem !default;
 
-/// The default `background-color` for the `WindowSplitter`.
+/// The default `background-color` for the `WindowSplitter` while being
+/// interacted with by the user.
 /// @type Color
 $background-color: interaction.get-var(focus-color) !default;
 
+/// An optional `background-color` to use while the
+/// @type Color
+$inactive-background-color: divider.get-var(color) !default;
+
 /// The default `z-index` for the `WindowSplitter`.
 /// @type Number
 $z-index: 30 !default;
@@ -54,6 +65,7 @@ $variables: (
   z,
   position,
   background-color,
+  inactive-background-color,
   opacity
 );
 
@@ -97,6 +109,13 @@ $variables: (
     @if $background-color != interaction.get-var(focus-color) {
       @include set-var(background-color, $background-color);
     }
+    @if not
+      $disable-inactive-background-color and
+      $inactive-background-color !=
+      divider.get-var(color)
+    {
+      @include set-var(background-color, $inactive-background-color);
+    }
   }
 }
 
@@ -106,10 +125,15 @@ $variables: (
 /// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
+    $pseudo-selectors: if(
+        not $disable-inactive-background-color,
+        "&::before, ",
+        ""
+      ) +
+      "&::after";
+
     @include utils.optional-layer(window-splitter, $disable-layer) {
       .rmd-window-splitter {
-        @include use-var(opacity);
-
         background-color: transparent;
         border: 0;
         inset: 0;
@@ -117,9 +141,14 @@ $variables: (
         padding: 0;
         position: fixed;
         transform: translate3d(get-var(x, 0), get-var(y, 0), get-var(z, 0));
-        transition: opacity transition.$linear-duration;
         z-index: $z-index;
 
+        #{$pseudo-selectors} {
+          content: "";
+          inset: 0;
+          position: absolute;
+        }
+
         &::after {
           @include use-var(
             background-color,
@@ -129,10 +158,29 @@ $variables: (
                 null
               )
           );
+          @include use-var(opacity);
 
-          content: "";
-          inset: 0;
-          position: absolute;
+          transition: opacity transition.$linear-duration;
+        }
+
+        @if not $disable-inactive-background-color {
+          &--no-inactive-bg::before {
+            display: none;
+          }
+
+          &::before {
+            @include use-var(
+              background-color,
+              inactive-background-color,
+              if(
+                $inactive-background-color == divider.get-var(color),
+                $inactive-background-color,
+                null
+              )
+            );
+
+            pointer-events: none;
+          }
         }
 
         @if not $disable-horizontal {
@@ -142,7 +190,7 @@ $variables: (
 
             cursor: col-resize;
 
-            &::after {
+            #{$pseudo-selectors} {
               @include use-var(width, background-size);
             }
 
@@ -158,7 +206,7 @@ $variables: (
                 calc(100dvw - get-var(size) - get-var(position))
               );
 
-              &::after {
+              #{$pseudo-selectors} {
                 margin-left: auto;
               }
 
@@ -168,7 +216,7 @@ $variables: (
                   calc(-100dvw + get-var(size) + get-var(position))
                 );
 
-                &::after {
+                #{$pseudo-selectors} {
                   margin-left: 0;
                   margin-right: auto;
                 }
@@ -185,7 +233,7 @@ $variables: (
             cursor: row-resize;
             width: 100%;
 
-            &::after {
+            #{$pseudo-selectors} {
               @include use-var(height, background-size);
             }
           }
@@ -197,7 +245,7 @@ $variables: (
                 calc(100dvh - get-var(size) - get-var(position))
               );
 
-              &::after {
+              #{$pseudo-selectors} {
                 transform: translateY(
                   calc(get-var(size) - get-var(background-size))
                 );

package/dist/window-splitter/styles.d.ts

@@ -7,6 +7,7 @@ declare module "react" {
         "--rmd-window-splitter-z"?: string | number;
         "--rmd-window-splitter-position"?: string | number;
         "--rmd-window-splitter-backgrond-color"?: string;
+        "--rmd-window-splitter-inactive-backgrond-color"?: string;
         "--rmd-window-splitter-opacity"?: string | number;
     }
 }
@@ -22,6 +23,14 @@ export interface BaseWindowSplitterClassNameOptions {
      * @defaultValue `false`
      */
     disableFixed?: boolean;
+    /**
+     * Set to `true` to enable a background-color to the `WindowSplitter` even
+     * while not being interacted with by the user.
+     *
+     * @since 6.4.0
+     * @defaultValue `false`
+     */
+    inactiveBackground?: boolean;
 }
 /**
  * @since 6.0.0

package/dist/window-splitter/styles.js

@@ -4,14 +4,15 @@ const styles = bem("rmd-window-splitter");
 /**
  * @since 6.0.0
  */ export function windowSplitter(options = {}) {
-    const { vertical = false, dragging, reversed, disableFixed, className } = options;
+    const { vertical = false, dragging, reversed, disableFixed, inactiveBackground, className } = options;
     return cnb(styles({
         h: !vertical,
         hr: !vertical && reversed,
         v: vertical,
         vr: vertical && reversed,
         a: disableFixed,
-        dragging
+        dragging,
+        "no-inactive-bg": !inactiveBackground
     }), className);
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/window-splitter/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-window-splitter\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-window-splitter-size\"?: string | number;\n    \"--rmd-window-splitter-background-size\"?: string | number;\n    \"--rmd-window-splitter-x\"?: string | number;\n    \"--rmd-window-splitter-y\"?: string | number;\n    \"--rmd-window-splitter-z\"?: string | number;\n    \"--rmd-window-splitter-position\"?: string | number;\n    \"--rmd-window-splitter-backgrond-color\"?: string;\n    \"--rmd-window-splitter-opacity\"?: string | number;\n  }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseWindowSplitterClassNameOptions {\n  className?: string;\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 * @since 6.0.0\n * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions\n */\nexport interface WindowSplitterClassNameOptions\n  extends BaseWindowSplitterClassNameOptions {\n  dragging?: boolean;\n  reversed?: boolean;\n  vertical?: boolean;\n}\n\n/**\n * @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"],"names":["cnb","bem","styles","windowSplitter","options","vertical","dragging","reversed","disableFixed","className","h","hr","v","vr","a"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAyCnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EACJC,WAAW,KAAK,EAChBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZC,SAAS,EACV,GAAGL;IAEJ,OAAOJ,IACLE,OAAO;QACLQ,GAAG,CAACL;QACJM,IAAI,CAACN,YAAYE;QACjBK,GAAGP;QACHQ,IAAIR,YAAYE;QAChBO,GAAGN;QACHF;IACF,IACAG;AAEJ"}
+{"version":3,"sources":["../../src/window-splitter/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-window-splitter\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-window-splitter-size\"?: string | number;\n    \"--rmd-window-splitter-background-size\"?: string | number;\n    \"--rmd-window-splitter-x\"?: string | number;\n    \"--rmd-window-splitter-y\"?: string | number;\n    \"--rmd-window-splitter-z\"?: string | number;\n    \"--rmd-window-splitter-position\"?: string | number;\n    \"--rmd-window-splitter-backgrond-color\"?: string;\n    \"--rmd-window-splitter-inactive-backgrond-color\"?: string;\n    \"--rmd-window-splitter-opacity\"?: string | number;\n  }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseWindowSplitterClassNameOptions {\n  className?: string;\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   * Set to `true` to enable a background-color to the `WindowSplitter` even\n   * while not being interacted with by the user.\n   *\n   * @since 6.4.0\n   * @defaultValue `false`\n   */\n  inactiveBackground?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions\n */\nexport interface WindowSplitterClassNameOptions extends BaseWindowSplitterClassNameOptions {\n  dragging?: boolean;\n  reversed?: boolean;\n  vertical?: boolean;\n}\n\n/**\n * @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    inactiveBackground,\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      \"no-inactive-bg\": !inactiveBackground,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","windowSplitter","options","vertical","dragging","reversed","disableFixed","inactiveBackground","className","h","hr","v","vr","a"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAkDnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EACJC,WAAW,KAAK,EAChBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZC,kBAAkB,EAClBC,SAAS,EACV,GAAGN;IAEJ,OAAOJ,IACLE,OAAO;QACLS,GAAG,CAACN;QACJO,IAAI,CAACP,YAAYE;QACjBM,GAAGR;QACHS,IAAIT,YAAYE;QAChBQ,GAAGP;QACHF;QACA,kBAAkB,CAACG;IACrB,IACAC;AAEJ"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/window-splitter/useWindowSplitter.ts"],"sourcesContent":["\"use client\";\n\nimport { type Ref, type RefCallback } from \"react\";\n\nimport {\n  type BaseDraggableOptions,\n  type DraggableImplementation,\n  type DraggableKeyboardEventHandlers,\n  type DraggableMouseEventHandlers,\n  type DraggableStateOptions,\n  type DraggableTouchEventHandlers,\n  useDraggable,\n} from \"../draggable/useDraggable.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\n/**\n * @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 * @since 6.0.0\n */\nexport type WindowSplitterOptions<E extends HTMLElement = HTMLButtonElement> =\n  BaseWindowSplitterOptions<E> & DraggableStateOptions;\n\n/**\n * @since 6.0.0\n */\nexport interface WindowSplitterWidgetProps<\n  E extends HTMLElement = HTMLButtonElement,\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 * @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 Custom Implementation\n * ```tsx\n * import {\n *   useWindowSplitter,\n *   type WindowSplitterImplementation\n * } from \"@react-md/core/window-splitter/useWindowSplitter\";\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 * @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;AAIA,SAOEA,YAAY,QACP,+BAA+B;AACtC,SAASC,YAAY,QAAQ,qBAAqB;AAuDlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCC,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"}
+{"version":3,"sources":["../../src/window-splitter/useWindowSplitter.ts"],"sourcesContent":["\"use client\";\n\nimport { type Ref, type RefCallback } from \"react\";\n\nimport {\n  type BaseDraggableOptions,\n  type DraggableImplementation,\n  type DraggableKeyboardEventHandlers,\n  type DraggableMouseEventHandlers,\n  type DraggableStateOptions,\n  type DraggableTouchEventHandlers,\n  useDraggable,\n} from \"../draggable/useDraggable.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n\n/**\n * @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 * @since 6.0.0\n */\nexport type WindowSplitterOptions<E extends HTMLElement = HTMLButtonElement> =\n  BaseWindowSplitterOptions<E> & DraggableStateOptions;\n\n/**\n * @since 6.0.0\n */\nexport interface WindowSplitterWidgetProps<\n  E extends HTMLElement = HTMLButtonElement,\n>\n  extends\n    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 * @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 Custom Implementation\n * ```tsx\n * import {\n *   useWindowSplitter,\n *   type WindowSplitterImplementation\n * } from \"@react-md/core/window-splitter/useWindowSplitter\";\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 * @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;AAIA,SAOEA,YAAY,QACP,+BAA+B;AACtC,SAASC,YAAY,QAAQ,qBAAqB;AAyDlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCC,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": "6.3.4",
+  "version": "6.4.0",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -78,44 +78,45 @@
     "remove-accents": "^0.5.0"
   },
   "devDependencies": {
-    "@jest/globals": "^29.7.0",
-    "@jest/types": "^29.6.3",
-    "@microsoft/api-extractor": "^7.53.0",
-    "@swc/cli": "^0.6.0",
-    "@swc/core": "^1.13.20",
-    "@swc/jest": "^0.2.39",
+    "@jest/globals": "^30.2.0",
+    "@jest/types": "^30.2.0",
+    "@microsoft/api-extractor": "^7.55.1",
+    "@swc/cli": "^0.7.9",
+    "@swc/core": "^1.15.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
-    "@types/lodash": "^4.17.20",
-    "@types/node": "^22.15.29",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "chokidar": "^4.0.3",
-    "eslint": "^9.37.0",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.0",
+    "@types/lodash": "^4.17.21",
+    "@types/node": "^24.10.1",
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "@vitest/coverage-v8": "^3.2.4",
+    "chokidar": "^5.0.0",
+    "eslint": "^9.39.1",
     "filesize": "^11.0.13",
-    "glob": "11.0.3",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-watch-typeahead": "^2.2.2",
+    "glob": "13.0.0",
+    "jsdom": "^27.2.0",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^3.6.2",
-    "stylelint": "^16.24.0",
-    "ts-morph": "^27.0.0",
+    "npm-run-all2": "^8.0.2",
+    "prettier": "^3.7.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "stylelint": "^16.26.1",
+    "ts-morph": "^27.0.2",
     "ts-node": "^10.9.2",
-    "tsx": "^4.20.6",
-    "typescript": "^5.8.3",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
     "vitest": "^3.2.4",
     "@react-md/eslint-config": "1.0.0",
     "@react-md/stylelint-config": "1.0.0"
   },
   "peerDependencies": {
-    "@jest/globals": ">= 29 <=30",
-    "@jest/types": ">= 29 <=30",
+    "@jest/globals": ">= 29 <=31",
+    "@jest/types": ">= 29 <=31",
     "@testing-library/dom": ">= 9",
     "@testing-library/jest-dom": ">= 6",
     "@testing-library/react": ">= 14",
@@ -157,8 +158,8 @@
     "access": "public"
   },
   "volta": {
-    "node": "22.13.1",
-    "pnpm": "10.8.0"
+    "node": "24.11.1",
+    "pnpm": "10.24.0"
   },
   "scripts": {
     "run-script": "tsx --tsconfig scripts/tsconfig.json",
@@ -176,9 +177,16 @@
     "clean-dist": "rm -rf dist",
     "clean": "rm -rf .turbo dist node_modules",
     "typecheck": "tsc --noEmit",
+    "check-format": "prettier --check .",
+    "format": "prettier --write .",
     "lint-scripts": "eslint \"src/**/*.{ts,tsx,js,jsx,cjs,mjs}\"",
     "lint-styles": "stylelint \"src/**/*.{css,scss}\"",
     "lint": "npm-run-all lint-scripts lint-styles",
-    "test": "NODE_OPTIONS=--experimental-vm-modules NODE_NO_WARNINGS=1 jest"
+    "lint-fix": "npm-run-all \"lint-scripts --fix\" \"lint-styles --fix\"",
+    "test": "vitest",
+    "test-run": "vitest run",
+    "test-coverage": "vitest --coverage",
+    "test-run-coverage": "pnpm test-run --coverage",
+    "test-run-snapshot": "pnpm test-run -u"
   }
 }

package/src/CoreProviders.tsx

@@ -46,6 +46,7 @@ export interface ReactMDCoreConfiguration {
   /**
    * @defaultValue `DEFAULT_APP_SIZE_QUERIES`
    * @see {@link DEFAULT_APP_SIZE_QUERIES}
+   * @deprecated Update the `MEDIA_QUERY_CONFIG` instead
    */
   appSizeQueries?: Readonly<AppSizeQueries>;
 

package/src/app-bar/AppBar.tsx

@@ -27,8 +27,7 @@ export type CustomAppBarComponent = ElementType<
  * @since 6.0.0 Added the {@link stacked} and {@link scrollbarOffset} props.
  */
 export interface AppBarProps
-  extends HTMLAttributes<HTMLDivElement>,
-    AppBarClassNameOptions {
+  extends HTMLAttributes<HTMLDivElement>, AppBarClassNameOptions {
   /** @defaultValue `fixed ? "header" : "div"` */
   as?: CustomAppBarComponent;
 }

package/src/app-bar/AppBarTitle.tsx

@@ -13,8 +13,7 @@ import { type AppBarTitleClassNameOptions, appBarTitle } from "./styles.js";
  * will default to `"ellipsis"` which is new as well.
  */
 export interface AppBarTitleProps
-  extends TypographyProps,
-    AppBarTitleClassNameOptions {
+  extends TypographyProps, AppBarTitleClassNameOptions {
   /** @defaultValue `"headline-6"` */
   type?: TypographyType;
 

package/src/autocomplete/AutocompleteListboxChildren.tsx

@@ -16,7 +16,9 @@ import {
  */
 export interface AutocompleteListboxChildrenProps<
   Option extends AutocompleteOption,
-> extends Required<AutocompleteGetOptionProps<Option>>,
+>
+  extends
+    Required<AutocompleteGetOptionProps<Option>>,
     Required<AutocompleteGetOptionLabel<Option>> {
   query: string;
   options: readonly Option[];

package/src/autocomplete/types.ts

@@ -301,8 +301,9 @@ export type AutocompleteOptionLabelExtractor<
 /**
  * @since 6.0.0
  */
-export interface AutocompleteFilteringOptions<Option extends AutocompleteOption>
-  extends AutocompleteGetOptionLabel<Option> {
+export interface AutocompleteFilteringOptions<
+  Option extends AutocompleteOption,
+> extends AutocompleteGetOptionLabel<Option> {
   /**
    * The list of options that can be shown within the autocomplete and filtered
    * based on the current query.
@@ -390,7 +391,9 @@ export interface AutocompleteFilteringOptions<Option extends AutocompleteOption>
  */
 export interface AutocompleteFilterAndListboxOptions<
   Option extends AutocompleteOption,
-> extends AutocompleteFilteringOptions<Option>,
+>
+  extends
+    AutocompleteFilteringOptions<Option>,
     AutocompleteGetOptionProps<Option>,
     OptionSelectedIconProps {
   /**
@@ -429,7 +432,9 @@ export interface AutocompleteEditableComboboxOptions<
   Option extends AutocompleteOption,
   ComboboxEl extends EditableHTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends EditableComboboxOptions<ComboboxEl, PopupEl>,
+>
+  extends
+    EditableComboboxOptions<ComboboxEl, PopupEl>,
     AutocompleteFilterAndListboxOptions<Option> {
   onBlur?: FocusEventHandler<ComboboxEl>;
   onChange?: ChangeEventHandler<ComboboxEl>;
@@ -481,7 +486,9 @@ export interface AutocompleteOptions<
   Option extends AutocompleteOption,
   ComboboxEl extends EditableHTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl>,
+>
+  extends
+    AutocompleteEditableComboboxOptions<Option, ComboboxEl, PopupEl>,
     AutocompleteUnknownQueryAndValueOptions<Option> {}
 
 /**
@@ -502,8 +509,8 @@ export interface AutocompleteComboboxProps<
 export interface AutocompleteListboxProps<
   T extends AutocompleteOption = AutocompleteOption,
   PopupEl extends HTMLElement = HTMLElement,
-> extends Omit<ComboboxMenuProps<PopupEl>, "ref">,
-    OptionSelectedIconProps {
+>
+  extends Omit<ComboboxMenuProps<PopupEl>, "ref">, OptionSelectedIconProps {
   value: T | null | readonly T[];
   setValue: Dispatch<T>;
   onEnter: (appearing: boolean) => void;
@@ -513,8 +520,7 @@ export interface AutocompleteListboxProps<
  * @since 6.0.0
  */
 export interface ConfigurableAutocompleteListboxProps
-  extends ConfigurableComboboxMenuProps,
-    OptionSelectedIconProps {
+  extends ConfigurableComboboxMenuProps, OptionSelectedIconProps {
   id?: string;
 }
 
@@ -550,16 +556,14 @@ export interface ConfigurableAutocompleteClearButtonProps extends ButtonProps {
  * @internal
  * @since 6.0.0
  */
-export interface AutocompleteClearButtonProps
-  extends ConfigurableAutocompleteClearButtonProps {
+export interface AutocompleteClearButtonProps extends ConfigurableAutocompleteClearButtonProps {
   onClick: MouseEventHandler<HTMLButtonElement>;
 }
 
 /**
  * @since 6.0.0
  */
-export interface ConfigurableAutocompleteDropdownButtonProps
-  extends ButtonProps {
+export interface ConfigurableAutocompleteDropdownButtonProps extends ButtonProps {
   /** @defaultValue `AutocompleteProps.listboxLabel` */
   "aria-label"?: string;
   /** @defaultValue `AutocompleteProps.listboxLabelledby` */
@@ -576,8 +580,7 @@ export interface ConfigurableAutocompleteDropdownButtonProps
 /**
  * @since 6.0.0
  */
-export interface AutocompleteDropdownButtonProps
-  extends ConfigurableAutocompleteDropdownButtonProps {
+export interface AutocompleteDropdownButtonProps extends ConfigurableAutocompleteDropdownButtonProps {
   "aria-controls": string;
   onClick: MouseEventHandler<HTMLButtonElement>;
   visible: boolean;
@@ -586,8 +589,7 @@ export interface AutocompleteDropdownButtonProps
 /**
  * @since 6.0.0
  */
-export interface AutocompleteCircularProgressProps
-  extends CircularProgressProps {
+export interface AutocompleteCircularProgressProps extends CircularProgressProps {
   /** @defaultValue `"Loading"` */
   "aria-label"?: string;
 
@@ -616,7 +618,9 @@ export interface AutocompleteWithQueryImplementation<
   Option extends AutocompleteOption,
   ComboboxEl extends EditableHTMLElement = HTMLInputElement,
   PopupEl extends HTMLElement = HTMLElement,
-> extends EditableComboboxImplementation<ComboboxEl, PopupEl>,
+>
+  extends
+    EditableComboboxImplementation<ComboboxEl, PopupEl>,
     Required<AutocompleteGetOptionProps<Option>>,
     Required<AutocompleteGetOptionLabel<Option>> {
   query: string;
@@ -700,7 +704,8 @@ export interface AutocompleteImplementation<
  * @since 6.0.0
  */
 export interface AutocompleteBaseProps<Option extends AutocompleteOption>
-  extends Omit<TextFieldProps, "value" | "defaultValue">,
+  extends
+    Omit<TextFieldProps, "value" | "defaultValue">,
     AutocompleteFilterAndListboxOptions<Option>,
     ComboboxVisibilityOptions {
   inputRef?: Ref<HTMLInputElement>;