@react-md/core 7.0.1 → 7.0.2

package/dist/positioning/utils.js

@@ -126,8 +126,6 @@
         case "inner-right":
             x = "100%";
             break;
-        default:
-            x = "0";
     }
     let y = "0";
     if (typeof yPosition === "number") {
@@ -145,8 +143,6 @@
             case "top":
                 y = "0";
                 break;
-            default:
-                y = "0";
         }
     }
     return `${x} ${y}`;

package/dist/positioning/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/positioning/utils.ts"],"sourcesContent":["import { type PositionAnchor } from \"./types.js\";\n\n/** @internal */\nexport interface XCoordConfig {\n  xMargin: number;\n  elWidth: number;\n  initialX?: number;\n  containerRect: DOMRect;\n}\n\n/** @internal */\nexport interface YCoordConfig {\n  yMargin: number;\n  elHeight: number;\n  initialY?: number;\n  containerRect: DOMRect;\n}\n\ntype Left = number;\ntype Top = number;\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * (outer) left of the container element. So the right bounds of the fixed\n * element will be equal to the left bounds of the container element (before the\n * xMargin is applied).\n *\n * @internal\n */\nexport function getLeftCoord({\n  xMargin,\n  elWidth,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  return (initialX ?? containerRect.left) - elWidth - xMargin;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * inner-left of the container element. So the left bounds of both the container\n * and fixed elements will overlap (before the xMargin is applied)\n *\n * @internal\n */\nexport function getInnerLeftCoord({\n  xMargin,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  return (initialX ?? containerRect.left) + xMargin;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * center of the container element. So the center point of the fixed element\n * should be the center point of the container element.\n *\n * Note: Unlike all the other horizontal positioning logic, the center position\n * does not use the xMargin.\n *\n * @internal\n */\nexport function getCenterXCoord({\n  elWidth,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  const containerCenter = containerRect.width / 2;\n  const elementCenter = elWidth / 2;\n  return (initialX ?? containerRect.left + containerCenter) - elementCenter;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * inner-right of the container element. So the right bounds for both the\n * container and fixed elements will overlap (before the xMargin is applied).\n *\n * @internal\n */\nexport function getInnerRightCoord({\n  xMargin,\n  elWidth,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  return (\n    (initialX ?? containerRect.left + containerRect.width) - elWidth - xMargin\n  );\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * (outer) right of the container element. So the left bounds of the fixed\n * element will overlap with the right bounds of the container element (before\n * the xMargin is applied).\n *\n * @internal\n */\nexport function getRightCoord({\n  xMargin,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  return (initialX ?? containerRect.left + containerRect.width) + xMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed above the\n * container element. So the bottom bounds of the fixed element will overlap\n * with the top bounds of the container element (before the yMargin is applied).\n *\n * @internal\n */\nexport function getAboveCoord({\n  yMargin,\n  initialY,\n  elHeight,\n  containerRect,\n}: YCoordConfig): Top {\n  return (initialY ?? containerRect.top) - elHeight - yMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the top\n * of the container element. So the top bounds for both the container and fixed\n * elements will overlap (before the yMargin is applied).\n *\n * @internal\n */\nexport function getTopCoord({\n  yMargin,\n  initialY,\n  containerRect,\n}: YCoordConfig): Top {\n  return (initialY ?? containerRect.top) + yMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed vertically\n * centered relative to the container element. So the vertical center point for\n * the fixed element should overlap the vertical center point of the container\n * element.\n *\n * Note: Unlike all the other vertical positioning logic, the center position\n * does not use the yMargin.\n *\n * @internal\n */\nexport function getCenterYCoord({\n  yMargin,\n  elHeight,\n  initialY,\n  containerRect,\n}: YCoordConfig): Top {\n  const containerCenter = containerRect.height / 2;\n  const elementCenter = elHeight / 2;\n  return (\n    (initialY ?? containerRect.top + containerCenter + yMargin) - elementCenter\n  );\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the top bounds of the fixed element\n * should overlap the bottom bounds of the container element (before the yMargin\n * is applied).\n *\n * @internal\n */\nexport function getBottomCoord({\n  yMargin,\n  initialY,\n  elHeight,\n  containerRect,\n}: YCoordConfig): Top {\n  return (\n    (initialY ?? containerRect.top + containerRect.height) - elHeight - yMargin\n  );\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the bottom bounds of both the container\n * and fixed elements should overlap (before the yMargin is applied).\n *\n * @internal\n */\nexport function getBelowCoord({\n  yMargin,\n  initialY,\n  containerRect,\n}: YCoordConfig): Top {\n  return (initialY ?? containerRect.top + containerRect.height) + yMargin;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface TransformOriginOptions extends PositionAnchor {\n  transformOriginY?: number;\n}\n\n/**\n * This is a simple util that'll generate a css `transform-origin` string so\n * that the fixed element can animate from the correct point based on the\n * provided anchor.\n *\n * @param options - The anchor that should be used to create the transform origin\n * for.\n * @returns the transform origin string\n * @internal\n */\nexport function getTransformOrigin(options: TransformOriginOptions): string {\n  const { transformOriginY: yPosition } = options;\n\n  let x = \"0\";\n  switch (options.x) {\n    case \"right\":\n    case \"inner-left\":\n      x = \"0\";\n      break;\n    case \"center\":\n      x = \"50%\";\n      break;\n    case \"left\":\n    case \"inner-right\":\n      x = \"100%\";\n      break;\n    default:\n      x = \"0\";\n  }\n\n  let y = \"0\";\n  if (typeof yPosition === \"number\") {\n    y = `${yPosition}px`;\n  } else {\n    switch (options.y) {\n      case \"above\":\n      case \"bottom\":\n        y = \"100%\";\n        break;\n      case \"center\":\n        y = \"50%\";\n        break;\n      case \"below\":\n      case \"top\":\n        y = \"0\";\n        break;\n      default:\n        y = \"0\";\n    }\n  }\n\n  return `${x} ${y}`;\n}\n\n/**\n * Attempts to find a sizing container based on the provided HTMLElement. By\n * default, the sizing element will just be the provided element unless:\n * - the item has a known role within react-md that can target known classes\n * - the item has a `data-sizing-selector` attribute that is a valid query\n *   selector for the nested item.\n *\n * NOTE: The `data-sizing-selector` will be run from the current element instead\n * of the `document`.\n *\n * @param el - The element to find a sizing container for.\n * @returns the sizing container relative to the provided element, or `null` if\n * none could be found.\n * @throws This error will be thrown if using the `data-query-selector` and the\n * query selector does not return an element on the page.\n * @internal\n */\nexport function findSizingContainer(\n  el: HTMLElement | null\n): HTMLElement | null {\n  if (!el) {\n    return null;\n  }\n\n  if (/(tree|list)item/.test(el.getAttribute(\"role\") || \"\")) {\n    const content = el.querySelector(\n      \".rmd-tree-item__content, .rmd-item-text\"\n    ) as HTMLElement;\n    if (content) {\n      return content;\n    }\n  } else if (el.getAttribute(\"type\") === \"file\") {\n    const label = document.querySelector<HTMLLabelElement>(`[for=\"${el.id}\"]`);\n    if (label) {\n      return label;\n    }\n  }\n\n  const data = el.dataset.sizingSelector;\n  if (data) {\n    const content = el.querySelector(data) as HTMLElement;\n    if (content) {\n      return content;\n    }\n\n    if (process.env.NODE_ENV !== \"production\") {\n      throw new Error(\n        \"Unable to find a child element using the `data-sizing-selector`\"\n      );\n    }\n  }\n\n  return el;\n}\n\n/**\n * This util is used to get the \"true\" `element.getBoundingClientRect()` that\n * ensures that transitions using transforms don't mess up the sizing so that\n * position calculations are easier to do.\n *\n * @param element - The element to get a rect for.\n * @returns either a DOMRect for the element\n * @internal\n */\nexport function getElementRect(element: HTMLElement): DOMRect {\n  const cloned = element.cloneNode(true) as HTMLElement;\n  // remove the id so there won't be two elements with the same id on the page\n  cloned.removeAttribute(\"id\");\n\n  // remove the role just in case the role would alert screen readers once added\n  // to the dom\n  cloned.removeAttribute(\"role\");\n\n  // ensure the cloned node won't shift the page or be visible\n  cloned.style.position = \"fixed\";\n  cloned.style.visibility = \"hidden\";\n\n  // reset positioning to get a \"pure\" calculation. otherwise this will mess up\n  // the height and width if the element is able to line wrap.\n  cloned.style.left = \"\";\n  cloned.style.top = \"\";\n  cloned.style.right = \"\";\n  cloned.style.bottom = \"\";\n\n  // reset transforms so that custom animations don't mess with the sizing\n  cloned.style.transform = \"none\";\n\n  const parent = element.parentElement || document.body;\n  parent.append(cloned);\n\n  const rect = cloned.getBoundingClientRect();\n  cloned.remove();\n\n  return rect;\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\ninterface IsWithinViewportOptions {\n  fixedElement: HTMLElement;\n  fixedToElement: HTMLElement;\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\nexport function isWithinViewport(options: IsWithinViewportOptions): boolean {\n  const { fixedElement, fixedToElement } = options;\n  const fixedElementRect = fixedElement.getBoundingClientRect();\n  const fixedToElementRect = fixedToElement.getBoundingClientRect();\n  const vh = window.innerHeight;\n  const vw = window.innerWidth;\n  const top = Math.min(fixedElementRect.top, fixedToElementRect.top);\n  const right = Math.max(fixedElementRect.right, fixedToElementRect.right);\n  const bottom = Math.max(fixedElementRect.bottom, fixedToElementRect.bottom);\n  const left = Math.min(fixedElementRect.left, fixedToElementRect.left);\n\n  return bottom >= 0 && top <= vh && right >= 0 && left <= vw;\n}\n"],"names":["getLeftCoord","xMargin","elWidth","initialX","containerRect","left","getInnerLeftCoord","getCenterXCoord","containerCenter","width","elementCenter","getInnerRightCoord","getRightCoord","getAboveCoord","yMargin","initialY","elHeight","top","getTopCoord","getCenterYCoord","height","getBottomCoord","getBelowCoord","getTransformOrigin","options","transformOriginY","yPosition","x","y","findSizingContainer","el","test","getAttribute","content","querySelector","label","document","id","data","dataset","sizingSelector","process","env","NODE_ENV","Error","getElementRect","element","cloned","cloneNode","removeAttribute","style","position","visibility","right","bottom","transform","parent","parentElement","body","append","rect","getBoundingClientRect","remove","isWithinViewport","fixedElement","fixedToElement","fixedElementRect","fixedToElementRect","vh","window","innerHeight","vw","innerWidth","Math","min","max"],"mappings":"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"}
+{"version":3,"sources":["../../src/positioning/utils.ts"],"sourcesContent":["import { type PositionAnchor } from \"./types.js\";\n\n/** @internal */\nexport interface XCoordConfig {\n  xMargin: number;\n  elWidth: number;\n  initialX?: number;\n  containerRect: DOMRect;\n}\n\n/** @internal */\nexport interface YCoordConfig {\n  yMargin: number;\n  elHeight: number;\n  initialY?: number;\n  containerRect: DOMRect;\n}\n\ntype Left = number;\ntype Top = number;\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * (outer) left of the container element. So the right bounds of the fixed\n * element will be equal to the left bounds of the container element (before the\n * xMargin is applied).\n *\n * @internal\n */\nexport function getLeftCoord({\n  xMargin,\n  elWidth,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  return (initialX ?? containerRect.left) - elWidth - xMargin;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * inner-left of the container element. So the left bounds of both the container\n * and fixed elements will overlap (before the xMargin is applied)\n *\n * @internal\n */\nexport function getInnerLeftCoord({\n  xMargin,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  return (initialX ?? containerRect.left) + xMargin;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * center of the container element. So the center point of the fixed element\n * should be the center point of the container element.\n *\n * Note: Unlike all the other horizontal positioning logic, the center position\n * does not use the xMargin.\n *\n * @internal\n */\nexport function getCenterXCoord({\n  elWidth,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  const containerCenter = containerRect.width / 2;\n  const elementCenter = elWidth / 2;\n  return (initialX ?? containerRect.left + containerCenter) - elementCenter;\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * inner-right of the container element. So the right bounds for both the\n * container and fixed elements will overlap (before the xMargin is applied).\n *\n * @internal\n */\nexport function getInnerRightCoord({\n  xMargin,\n  elWidth,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  return (\n    (initialX ?? containerRect.left + containerRect.width) - elWidth - xMargin\n  );\n}\n\n/**\n * Creates the `left` style value for an element that should be fixed to the\n * (outer) right of the container element. So the left bounds of the fixed\n * element will overlap with the right bounds of the container element (before\n * the xMargin is applied).\n *\n * @internal\n */\nexport function getRightCoord({\n  xMargin,\n  initialX,\n  containerRect,\n}: XCoordConfig): Left {\n  return (initialX ?? containerRect.left + containerRect.width) + xMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed above the\n * container element. So the bottom bounds of the fixed element will overlap\n * with the top bounds of the container element (before the yMargin is applied).\n *\n * @internal\n */\nexport function getAboveCoord({\n  yMargin,\n  initialY,\n  elHeight,\n  containerRect,\n}: YCoordConfig): Top {\n  return (initialY ?? containerRect.top) - elHeight - yMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the top\n * of the container element. So the top bounds for both the container and fixed\n * elements will overlap (before the yMargin is applied).\n *\n * @internal\n */\nexport function getTopCoord({\n  yMargin,\n  initialY,\n  containerRect,\n}: YCoordConfig): Top {\n  return (initialY ?? containerRect.top) + yMargin;\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed vertically\n * centered relative to the container element. So the vertical center point for\n * the fixed element should overlap the vertical center point of the container\n * element.\n *\n * Note: Unlike all the other vertical positioning logic, the center position\n * does not use the yMargin.\n *\n * @internal\n */\nexport function getCenterYCoord({\n  yMargin,\n  elHeight,\n  initialY,\n  containerRect,\n}: YCoordConfig): Top {\n  const containerCenter = containerRect.height / 2;\n  const elementCenter = elHeight / 2;\n  return (\n    (initialY ?? containerRect.top + containerCenter + yMargin) - elementCenter\n  );\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the top bounds of the fixed element\n * should overlap the bottom bounds of the container element (before the yMargin\n * is applied).\n *\n * @internal\n */\nexport function getBottomCoord({\n  yMargin,\n  initialY,\n  elHeight,\n  containerRect,\n}: YCoordConfig): Top {\n  return (\n    (initialY ?? containerRect.top + containerRect.height) - elHeight - yMargin\n  );\n}\n\n/**\n * Creates the `top` style value for an element that should be fixed to the\n * bottom of the container element. So the bottom bounds of both the container\n * and fixed elements should overlap (before the yMargin is applied).\n *\n * @internal\n */\nexport function getBelowCoord({\n  yMargin,\n  initialY,\n  containerRect,\n}: YCoordConfig): Top {\n  return (initialY ?? containerRect.top + containerRect.height) + yMargin;\n}\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface TransformOriginOptions extends PositionAnchor {\n  transformOriginY?: number;\n}\n\n/**\n * This is a simple util that'll generate a css `transform-origin` string so\n * that the fixed element can animate from the correct point based on the\n * provided anchor.\n *\n * @param options - The anchor that should be used to create the transform origin\n * for.\n * @returns the transform origin string\n * @internal\n */\nexport function getTransformOrigin(options: TransformOriginOptions): string {\n  const { transformOriginY: yPosition } = options;\n\n  let x = \"0\";\n  switch (options.x) {\n    case \"right\":\n    case \"inner-left\":\n      x = \"0\";\n      break;\n    case \"center\":\n      x = \"50%\";\n      break;\n    case \"left\":\n    case \"inner-right\":\n      x = \"100%\";\n      break;\n  }\n\n  let y = \"0\";\n  if (typeof yPosition === \"number\") {\n    y = `${yPosition}px`;\n  } else {\n    switch (options.y) {\n      case \"above\":\n      case \"bottom\":\n        y = \"100%\";\n        break;\n      case \"center\":\n        y = \"50%\";\n        break;\n      case \"below\":\n      case \"top\":\n        y = \"0\";\n        break;\n    }\n  }\n\n  return `${x} ${y}`;\n}\n\n/**\n * Attempts to find a sizing container based on the provided HTMLElement. By\n * default, the sizing element will just be the provided element unless:\n * - the item has a known role within react-md that can target known classes\n * - the item has a `data-sizing-selector` attribute that is a valid query\n *   selector for the nested item.\n *\n * NOTE: The `data-sizing-selector` will be run from the current element instead\n * of the `document`.\n *\n * @param el - The element to find a sizing container for.\n * @returns the sizing container relative to the provided element, or `null` if\n * none could be found.\n * @throws This error will be thrown if using the `data-query-selector` and the\n * query selector does not return an element on the page.\n * @internal\n */\nexport function findSizingContainer(\n  el: HTMLElement | null\n): HTMLElement | null {\n  if (!el) {\n    return null;\n  }\n\n  if (/(tree|list)item/.test(el.getAttribute(\"role\") || \"\")) {\n    const content = el.querySelector(\n      \".rmd-tree-item__content, .rmd-item-text\"\n    ) as HTMLElement;\n    if (content) {\n      return content;\n    }\n  } else if (el.getAttribute(\"type\") === \"file\") {\n    const label = document.querySelector<HTMLLabelElement>(`[for=\"${el.id}\"]`);\n    if (label) {\n      return label;\n    }\n  }\n\n  const data = el.dataset.sizingSelector;\n  if (data) {\n    const content = el.querySelector(data) as HTMLElement;\n    if (content) {\n      return content;\n    }\n\n    if (process.env.NODE_ENV !== \"production\") {\n      throw new Error(\n        \"Unable to find a child element using the `data-sizing-selector`\"\n      );\n    }\n  }\n\n  return el;\n}\n\n/**\n * This util is used to get the \"true\" `element.getBoundingClientRect()` that\n * ensures that transitions using transforms don't mess up the sizing so that\n * position calculations are easier to do.\n *\n * @param element - The element to get a rect for.\n * @returns either a DOMRect for the element\n * @internal\n */\nexport function getElementRect(element: HTMLElement): DOMRect {\n  const cloned = element.cloneNode(true) as HTMLElement;\n  // remove the id so there won't be two elements with the same id on the page\n  cloned.removeAttribute(\"id\");\n\n  // remove the role just in case the role would alert screen readers once added\n  // to the dom\n  cloned.removeAttribute(\"role\");\n\n  // ensure the cloned node won't shift the page or be visible\n  cloned.style.position = \"fixed\";\n  cloned.style.visibility = \"hidden\";\n\n  // reset positioning to get a \"pure\" calculation. otherwise this will mess up\n  // the height and width if the element is able to line wrap.\n  cloned.style.left = \"\";\n  cloned.style.top = \"\";\n  cloned.style.right = \"\";\n  cloned.style.bottom = \"\";\n\n  // reset transforms so that custom animations don't mess with the sizing\n  cloned.style.transform = \"none\";\n\n  const parent = element.parentElement || document.body;\n  parent.append(cloned);\n\n  const rect = cloned.getBoundingClientRect();\n  cloned.remove();\n\n  return rect;\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\ninterface IsWithinViewportOptions {\n  fixedElement: HTMLElement;\n  fixedToElement: HTMLElement;\n}\n\n/**\n * @since 4.0.0\n * @internal\n */\nexport function isWithinViewport(options: IsWithinViewportOptions): boolean {\n  const { fixedElement, fixedToElement } = options;\n  const fixedElementRect = fixedElement.getBoundingClientRect();\n  const fixedToElementRect = fixedToElement.getBoundingClientRect();\n  const vh = window.innerHeight;\n  const vw = window.innerWidth;\n  const top = Math.min(fixedElementRect.top, fixedToElementRect.top);\n  const right = Math.max(fixedElementRect.right, fixedToElementRect.right);\n  const bottom = Math.max(fixedElementRect.bottom, fixedToElementRect.bottom);\n  const left = Math.min(fixedElementRect.left, fixedToElementRect.left);\n\n  return bottom >= 0 && top <= vh && right >= 0 && left <= vw;\n}\n"],"names":["getLeftCoord","xMargin","elWidth","initialX","containerRect","left","getInnerLeftCoord","getCenterXCoord","containerCenter","width","elementCenter","getInnerRightCoord","getRightCoord","getAboveCoord","yMargin","initialY","elHeight","top","getTopCoord","getCenterYCoord","height","getBottomCoord","getBelowCoord","getTransformOrigin","options","transformOriginY","yPosition","x","y","findSizingContainer","el","test","getAttribute","content","querySelector","label","document","id","data","dataset","sizingSelector","process","env","NODE_ENV","Error","getElementRect","element","cloned","cloneNode","removeAttribute","style","position","visibility","right","bottom","transform","parent","parentElement","body","append","rect","getBoundingClientRect","remove","isWithinViewport","fixedElement","fixedToElement","fixedElementRect","fixedToElementRect","vh","window","innerHeight","vw","innerWidth","Math","min","max"],"mappings":"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"}

package/dist/theme/_theme.scss

@@ -23,6 +23,14 @@
 /// @type String
 $color-scheme: light !default;
 
+/// Set this to true to prevent setting the `color-scheme` property on the
+/// `:root` element or when using the
+/// `theme-use-light-theme`/`theme-use-dark-theme` mixins.
+///
+/// @since 7.1.0
+/// @type Boolean
+$disable-color-scheme: false !default;
+
 /// The dark elevation feature is generally recommended to keep enabled since it
 /// helps with visibility when your app is using the dark color scheme either
 /// through `$color-scheme: dark` or `using the `use-dark-theme mixin. When this
@@ -394,6 +402,7 @@ $_validated_color_scheme: utils.validate(
 
 /// The available configurable css variables and mostly used internally for the
 /// `get-var`, `set-var`, and `use-var` utils.
+/// @since 7.1.0
 /// @type List
 $theme-variables: (
   background-color,
@@ -416,7 +425,8 @@ $theme-variables: (
   outline-width,
   outline-color,
   outline-grey-color,
-  inverse-color
+  inverse-color,
+  color-scheme
 );
 
 /// Checks if a theme variable is disabled and should not be able to be
@@ -605,7 +615,15 @@ $theme-variables: (
 }
 
 /// Creates all the css variables for the light theme respecting feature flags
-@mixin use-light-theme-colors {
+///
+/// @since 7.1.0 Supports the `$disable-color-scheme` param
+/// @param {Boolean} $disable-color-scheme-var [false] - Set to `true` to
+/// disable setting the color-scheme var
+@mixin use-light-theme-colors($disable-color-scheme-var: false) {
+  @if not $disable-color-scheme and not $disable-color-scheme-var {
+    @include theme-set-var(color-scheme, light);
+  }
+
   @include theme-set-var(inverse-color, $light-theme-inverse-color);
   @include theme-set-var(background-color, $light-theme-background-color);
   @if $disable-dark-elevation and not $disable-surface-color {
@@ -636,7 +654,15 @@ $theme-variables: (
 }
 
 /// Creates all the css variables for the dark theme respecting feature flags
-@mixin use-dark-theme-colors {
+///
+/// @since 7.1.0 Supports the `$disable-color-scheme` param
+/// @param {Boolean} $disable-color-scheme-var [false] - Set to `true` to
+/// disable setting the color-scheme var
+@mixin use-dark-theme-colors($disable-color-scheme-var: false) {
+  @if not $disable-color-scheme and not $disable-color-scheme-var {
+    @include theme-set-var(color-scheme, dark);
+  }
+
   @include theme-set-var(inverse-color, $dark-theme-inverse-color);
   @include theme-set-var(background-color, $dark-theme-background-color);
   @if $disable-dark-elevation and not $disable-surface-color {
@@ -853,3 +879,16 @@ $theme-variables: (
     }
   }
 }
+
+@mixin default-color-scheme {
+  @if not $disable-color-scheme {
+    // prettier-ignore
+    @include theme-use-var(
+      color-scheme,
+      $fallback: if(
+        sass($color-scheme == system): light dark;
+        else: $color-scheme
+      )
+    );
+  }
+}

package/dist/transition/useMaxWidthTransition.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 declare module "react" {
-    interface CSSProperites {
+    interface CSSProperties {
         "--rmd-max-width"?: string | number;
         "--rmd-max-width-gap"?: string | number;
     }

package/dist/transition/useMaxWidthTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/transition/useMaxWidthTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport type { ReactNode } from \"react\";\nimport { Children, cloneElement, isValidElement } from \"react\";\n\nimport { maxWidthTransition } from \"./maxWidthTransition.js\";\n\ndeclare module \"react\" {\n  interface CSSProperites {\n    \"--rmd-max-width\"?: string | number;\n    \"--rmd-max-width-gap\"?: string | number;\n  }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseMaxWidthTransitionOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions\n */\nexport interface MaxWidthTransitionOptions extends BaseMaxWidthTransitionOptions {\n  element: ReactNode;\n  transitionIn: boolean;\n\n  disabled?: boolean;\n  disableTransition?: boolean;\n}\n\n/**\n * The `useMaxWidthTransition` hook is used to animate the `max-width` using\n * the {@link maxWidthTransition} utility classes.\n *\n * NOTE: This hook clones the className into the child element using the\n * `cloneElement` API. The child **must** accept and pass the `className` forward\n * to work correctly.\n *\n * @see {@link maxWidthTransition}\n *\n * @since 6.0.0\n */\nexport function useMaxWidthTransition(\n  options: MaxWidthTransitionOptions\n): ReactNode {\n  const { element, disabled, disableTransition, transitionIn, className } =\n    options;\n\n  if (disabled || !isValidElement<{ className?: string }>(element)) {\n    return element;\n  }\n\n  const child = Children.only(element);\n  return cloneElement(element, {\n    className: maxWidthTransition({\n      className: cnb(child.props.className, className),\n      disabled: disableTransition,\n      transitionIn,\n    }),\n  });\n}\n"],"names":["cnb","Children","cloneElement","isValidElement","maxWidthTransition","useMaxWidthTransition","options","element","disabled","disableTransition","transitionIn","className","child","only","props"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,EAAEC,YAAY,EAAEC,cAAc,QAAQ,QAAQ;AAE/D,SAASC,kBAAkB,QAAQ,0BAA0B;AA4B7D;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,sBACdC,OAAkC;IAElC,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,YAAY,EAAEC,SAAS,EAAE,GACrEL;IAEF,IAAIE,YAAY,CAACL,eAAuCI,UAAU;QAChE,OAAOA;IACT;IAEA,MAAMK,QAAQX,SAASY,IAAI,CAACN;IAC5B,OAAOL,aAAaK,SAAS;QAC3BI,WAAWP,mBAAmB;YAC5BO,WAAWX,IAAIY,MAAME,KAAK,CAACH,SAAS,EAAEA;YACtCH,UAAUC;YACVC;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/transition/useMaxWidthTransition.ts"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport type { ReactNode } from \"react\";\nimport { Children, cloneElement, isValidElement } from \"react\";\n\nimport { maxWidthTransition } from \"./maxWidthTransition.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-max-width\"?: string | number;\n    \"--rmd-max-width-gap\"?: string | number;\n  }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseMaxWidthTransitionOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseMaxWidthTransitionOptions\n */\nexport interface MaxWidthTransitionOptions extends BaseMaxWidthTransitionOptions {\n  element: ReactNode;\n  transitionIn: boolean;\n\n  disabled?: boolean;\n  disableTransition?: boolean;\n}\n\n/**\n * The `useMaxWidthTransition` hook is used to animate the `max-width` using\n * the {@link maxWidthTransition} utility classes.\n *\n * NOTE: This hook clones the className into the child element using the\n * `cloneElement` API. The child **must** accept and pass the `className` forward\n * to work correctly.\n *\n * @see {@link maxWidthTransition}\n *\n * @since 6.0.0\n */\nexport function useMaxWidthTransition(\n  options: MaxWidthTransitionOptions\n): ReactNode {\n  const { element, disabled, disableTransition, transitionIn, className } =\n    options;\n\n  if (disabled || !isValidElement<{ className?: string }>(element)) {\n    return element;\n  }\n\n  const child = Children.only(element);\n  return cloneElement(element, {\n    className: maxWidthTransition({\n      className: cnb(child.props.className, className),\n      disabled: disableTransition,\n      transitionIn,\n    }),\n  });\n}\n"],"names":["cnb","Children","cloneElement","isValidElement","maxWidthTransition","useMaxWidthTransition","options","element","disabled","disableTransition","transitionIn","className","child","only","props"],"mappings":"AAAA;AAEA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,EAAEC,YAAY,EAAEC,cAAc,QAAQ,QAAQ;AAE/D,SAASC,kBAAkB,QAAQ,0BAA0B;AA4B7D;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,sBACdC,OAAkC;IAElC,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,YAAY,EAAEC,SAAS,EAAE,GACrEL;IAEF,IAAIE,YAAY,CAACL,eAAuCI,UAAU;QAChE,OAAOA;IACT;IAEA,MAAMK,QAAQX,SAASY,IAAI,CAACN;IAC5B,OAAOL,aAAaK,SAAS;QAC3BI,WAAWP,mBAAmB;YAC5BO,WAAWX,IAAIY,MAAME,KAAK,CAACH,SAAS,EAAEA;YACtCH,UAAUC;YACVC;QACF;IACF;AACF"}

package/dist/types.d.ts

@@ -190,6 +190,11 @@ export type OverridableStringUnion<Defaults extends string, Overrides extends Pa
 }[keyof Overrides]> | {
     [K in keyof Overrides]: Overrides[K] extends false ? never : K;
 }[keyof Overrides];
+/**
+ * @see https://github.com/microsoft/TypeScript/issues/29729#issuecomment-471566609
+ * @since 7.1.0
+ */
+export type LiteralStringUnion<T extends U, U = string> = T | (U & {});
 /**
  * @since 6.2.0
  */

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import {\n  type Dispatch,\n  type HTMLAttributes,\n  type JSX,\n  type ReactElement,\n  type Ref,\n  type SetStateAction,\n} from \"react\";\n\n/**\n * A helper type that allows an optional `ref` to also be applied with a props\n * object even though a `ref` isn't a real prop.\n *\n * @since 6.2.0 Automatically infer the `Element` type param from the provided\n * props.\n */\nexport type PropsWithRef<\n  Props extends object,\n  Element extends HTMLElement = Props extends HTMLAttributes<infer E>\n    ? E extends HTMLElement\n      ? E\n      : never\n    : never,\n> = Props & {\n  /**\n   * An optional ref that can be applied.\n   */\n  ref?: Ref<Element>;\n};\n\n/**\n * A simple type that can be used for different components that clone a\n * `className` into a child component.\n */\nexport type ClassNameCloneableChild<T = object> = ReactElement<\n  T & { className?: string }\n>;\n\n/**\n * This type allows you to require at least one of the provided keys. This is\n * super helpful for things like `aria-label` or `aria-labelledby` when it's\n * required for a11y.\n *\n * @see https://stackoverflow.com/questions/40510611/typescript-interface-require-one-of-two-properties-to-exist/49725198#49725198\n */\nexport type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<\n  T,\n  Exclude<keyof T, Keys>\n> &\n  {\n    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;\n  }[Keys];\n\nexport interface LabelA11y {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\n/**\n * A small accessibility helper to ensure that either `aria-label` or\n * `aria-labelledby` have been provided to a component.\n *\n * @example Simple Example\n * ```ts\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import type { LabelRequiredForA11y } from \"@react-md/core/types\";\n *\n * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;\n *\n * function Component(props: Props): ReactElement {\n *   return <div {...props} />;\n * }\n *\n * const test1 = <Component />\n * //            ^ type error\n * const test2 = <Component aria-label=\"Label\" />\n * const test3 = <Component aria-labelledby=\"some-other-id\" />\n * ```\n */\nexport type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<\n  Props,\n  keyof LabelA11y\n>;\n\n/** @since 6.0.0 */\nexport type HtmlTagName = keyof JSX.IntrinsicElements;\n\n/**\n * A function to get a string from a generic item.\n *\n * @example Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n *\n * const extractor: TextExtractor<Item> = (item) => item.name;\n * ```\n * @since 6.0.0\n */\nexport type TextExtractor<T> = (item: T) => string;\n\n/**\n * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n * - `{ name: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.2.0\n */\nexport type AutomaticTextExtraction =\n  | string\n  | { label: string }\n  | { name: string };\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateSetter<T> = Dispatch<SetStateAction<T>>;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateInitializer<T> = T | (() => T);\n\n/**\n * @example\n * ```ts\n * type Visibility = UseStateObject<\"visible\", boolean>;\n * // type Visibility = {\n * //   visible: boolean;\n * //   setVisible: UseStateSetter<boolean>\n * // }\n *\n * type AnotherOne = UseStateObject<\"renderAsSheet\", RenderMenuAsSheet>;\n * // type AnotherOne = {\n * //   renderAsSheet: RenderMenuAsSheet;\n * //   setRenderAsSheet: UseStateSetter<RenderMenuAsSheet>;\n * // }\n * ```\n * @since 6.0.0\n * @internal\n */\nexport type UseStateObject<Name extends string, Value> = {\n  [key in Name]: Value;\n} & {\n  [key in `set${Capitalize<Name>}`]: UseStateSetter<Value>;\n};\n\n/**\n * @example\n * ```ts\n * interface Example {\n *   value: number;\n *   setValue: UseStateSetter<number>;\n * }\n *\n * type WithPrefix = RenameKeysWithPrefix<Example, \"thumb1\">;\n * // type WithPrefix = {\n * //   thumb1Value: number;\n * //   thumb1SetValue: UseStateSetter<number>;\n * // }\n * ```\n *\n * @since 6.0.0\n * @internal\n */\nexport type RenameKeysWithPrefix<T, Prefix extends string> = {\n  [Key in keyof T & string as `${Prefix}${Capitalize<Key>}`]: T[Key];\n};\n\n/**\n * @since 6.0.0\n */\nexport type CssPosition = \"fixed\" | \"sticky\" | \"static\";\n\n/**\n * @since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyFunction = (...args: any[]) => any;\n\n/**\n * @since 6.0.0\n */\nexport type CancelableFunction<F extends AnyFunction> = F & {\n  cancel: () => void;\n};\n\n/**\n * @since 6.0.0\n */\nexport type DebouncedFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => void\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ThrottledFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => ReturnType<F>\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ElementSize {\n  height: number;\n  width: number;\n}\n\n/**\n * @since 6.3.0\n */\nexport interface Point {\n  x: number;\n  y: number;\n}\n\n/**\n * @since 6.3.0\n */\nexport interface MinMaxRange {\n  min: number;\n  max: number;\n}\n\n/**\n * @since 6.2.0\n */\nexport type OverridableStringUnion<\n  Defaults extends string,\n  Overrides extends Partial<Record<string, boolean>>,\n> =\n  | Exclude<Defaults, { [K in keyof Overrides]: K }[keyof Overrides]>\n  | {\n      [K in keyof Overrides]: Overrides[K] extends false ? never : K;\n    }[keyof Overrides];\n\n/**\n * @since 6.2.0\n */\nexport type IsEmptyObject<T> = keyof T extends never ? true : false;\n"],"names":[],"mappings":"AAkPA;;CAEC,GACD,WAAoE"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import {\n  type Dispatch,\n  type HTMLAttributes,\n  type JSX,\n  type ReactElement,\n  type Ref,\n  type SetStateAction,\n} from \"react\";\n\n/**\n * A helper type that allows an optional `ref` to also be applied with a props\n * object even though a `ref` isn't a real prop.\n *\n * @since 6.2.0 Automatically infer the `Element` type param from the provided\n * props.\n */\nexport type PropsWithRef<\n  Props extends object,\n  Element extends HTMLElement = Props extends HTMLAttributes<infer E>\n    ? E extends HTMLElement\n      ? E\n      : never\n    : never,\n> = Props & {\n  /**\n   * An optional ref that can be applied.\n   */\n  ref?: Ref<Element>;\n};\n\n/**\n * A simple type that can be used for different components that clone a\n * `className` into a child component.\n */\nexport type ClassNameCloneableChild<T = object> = ReactElement<\n  T & { className?: string }\n>;\n\n/**\n * This type allows you to require at least one of the provided keys. This is\n * super helpful for things like `aria-label` or `aria-labelledby` when it's\n * required for a11y.\n *\n * @see https://stackoverflow.com/questions/40510611/typescript-interface-require-one-of-two-properties-to-exist/49725198#49725198\n */\nexport type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<\n  T,\n  Exclude<keyof T, Keys>\n> &\n  {\n    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;\n  }[Keys];\n\nexport interface LabelA11y {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\n/**\n * A small accessibility helper to ensure that either `aria-label` or\n * `aria-labelledby` have been provided to a component.\n *\n * @example Simple Example\n * ```ts\n * import type { HTMLAttributes, ReactElement } from \"react\";\n * import type { LabelRequiredForA11y } from \"@react-md/core/types\";\n *\n * type Props = LabelRequiredForA11y<HTMLAttributes<HTMLDivElement>>;\n *\n * function Component(props: Props): ReactElement {\n *   return <div {...props} />;\n * }\n *\n * const test1 = <Component />\n * //            ^ type error\n * const test2 = <Component aria-label=\"Label\" />\n * const test3 = <Component aria-labelledby=\"some-other-id\" />\n * ```\n */\nexport type LabelRequiredForA11y<Props extends LabelA11y> = RequireAtLeastOne<\n  Props,\n  keyof LabelA11y\n>;\n\n/** @since 6.0.0 */\nexport type HtmlTagName = keyof JSX.IntrinsicElements;\n\n/**\n * A function to get a string from a generic item.\n *\n * @example Simple Example\n * ```ts\n * interface Item {\n *   name: string;\n * }\n *\n * const items: Item[] = [{ name: 'Hello' }, { name: 'World' }];\n *\n * const extractor: TextExtractor<Item> = (item) => item.name;\n * ```\n * @since 6.0.0\n */\nexport type TextExtractor<T> = (item: T) => string;\n\n/**\n * - `\"some value\"` -&gt; `\"some value\"`\n * - `{ label: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n * - `{ name: \"Hello, world\", value: 300 }` -&gt; `\"Hello, world!\"`\n *\n * @since 6.2.0\n */\nexport type AutomaticTextExtraction =\n  | string\n  | { label: string }\n  | { name: string };\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateSetter<T> = Dispatch<SetStateAction<T>>;\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport type UseStateInitializer<T> = T | (() => T);\n\n/**\n * @example\n * ```ts\n * type Visibility = UseStateObject<\"visible\", boolean>;\n * // type Visibility = {\n * //   visible: boolean;\n * //   setVisible: UseStateSetter<boolean>\n * // }\n *\n * type AnotherOne = UseStateObject<\"renderAsSheet\", RenderMenuAsSheet>;\n * // type AnotherOne = {\n * //   renderAsSheet: RenderMenuAsSheet;\n * //   setRenderAsSheet: UseStateSetter<RenderMenuAsSheet>;\n * // }\n * ```\n * @since 6.0.0\n * @internal\n */\nexport type UseStateObject<Name extends string, Value> = {\n  [key in Name]: Value;\n} & {\n  [key in `set${Capitalize<Name>}`]: UseStateSetter<Value>;\n};\n\n/**\n * @example\n * ```ts\n * interface Example {\n *   value: number;\n *   setValue: UseStateSetter<number>;\n * }\n *\n * type WithPrefix = RenameKeysWithPrefix<Example, \"thumb1\">;\n * // type WithPrefix = {\n * //   thumb1Value: number;\n * //   thumb1SetValue: UseStateSetter<number>;\n * // }\n * ```\n *\n * @since 6.0.0\n * @internal\n */\nexport type RenameKeysWithPrefix<T, Prefix extends string> = {\n  [Key in keyof T & string as `${Prefix}${Capitalize<Key>}`]: T[Key];\n};\n\n/**\n * @since 6.0.0\n */\nexport type CssPosition = \"fixed\" | \"sticky\" | \"static\";\n\n/**\n * @since 6.0.0\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnyFunction = (...args: any[]) => any;\n\n/**\n * @since 6.0.0\n */\nexport type CancelableFunction<F extends AnyFunction> = F & {\n  cancel: () => void;\n};\n\n/**\n * @since 6.0.0\n */\nexport type DebouncedFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => void\n>;\n\n/**\n * @since 6.0.0\n */\nexport type ThrottledFunction<F extends AnyFunction> = CancelableFunction<\n  (...args: Parameters<F>) => ReturnType<F>\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface ElementSize {\n  height: number;\n  width: number;\n}\n\n/**\n * @since 6.3.0\n */\nexport interface Point {\n  x: number;\n  y: number;\n}\n\n/**\n * @since 6.3.0\n */\nexport interface MinMaxRange {\n  min: number;\n  max: number;\n}\n\n/**\n * @since 6.2.0\n */\nexport type OverridableStringUnion<\n  Defaults extends string,\n  Overrides extends Partial<Record<string, boolean>>,\n> =\n  | Exclude<Defaults, { [K in keyof Overrides]: K }[keyof Overrides]>\n  | {\n      [K in keyof Overrides]: Overrides[K] extends false ? never : K;\n    }[keyof Overrides];\n\n/**\n * @see https://github.com/microsoft/TypeScript/issues/29729#issuecomment-471566609\n * @since 7.1.0\n */\nexport type LiteralStringUnion<T extends U, U = string> = T | (U & {});\n\n/**\n * @since 6.2.0\n */\nexport type IsEmptyObject<T> = keyof T extends never ? true : false;\n"],"names":[],"mappings":"AAwPA;;CAEC,GACD,WAAoE"}

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

@@ -6,8 +6,8 @@ declare module "react" {
         "--rmd-window-splitter-y"?: string | number;
         "--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-background-color"?: string;
+        "--rmd-window-splitter-inactive-background-color"?: string;
         "--rmd-window-splitter-opacity"?: string | number;
     }
 }

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-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"}
+{"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-background-color\"?: string;\n    \"--rmd-window-splitter-inactive-background-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -37,6 +37,7 @@
     "./form/sliderUtils": null,
     "./form/useResizingTextArea": null,
     "./form/useSliderDraggable": null,
+    "./icon/getMaterialSymbolOption": null,
     "./interaction/utils": null,
     "./menu/MenuWidgetKeyboardProvider": null,
     "./menu/utils": null,
@@ -52,7 +53,13 @@
   },
   "sideEffects": [
     "dist/**/*.scss",
-    "dist/test-utils/polyfills"
+    "dist/form/formConfig.js",
+    "dist/icon/config.js",
+    "dist/icon/configureMaterialSymbols.js",
+    "dist/icon/materialConfig.js",
+    "dist/interaction/config.js",
+    "dist/media-queries/config.js",
+    "dist/test-utils/polyfills/**/*.js"
   ],
   "author": "Mikkel Laursen <mlaursen03@gmail.com>",
   "repository": {
@@ -81,37 +88,38 @@
   "devDependencies": {
     "@jest/globals": "^30.2.0",
     "@jest/types": "^30.2.0",
-    "@microsoft/api-extractor": "^7.55.2",
-    "@swc/cli": "^0.7.9",
-    "@swc/core": "^1.15.8",
+    "@microsoft/api-extractor": "^7.56.3",
+    "@mlaursen/cli": "^0.1.0",
+    "@swc/cli": "^0.8.0",
+    "@swc/core": "^1.15.11",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.1",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@types/lodash": "^4.17.23",
     "@types/node": "^24.10.4",
-    "@types/react": "^19.2.8",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react-swc": "^4.2.2",
-    "@vitest/coverage-v8": "^4.0.16",
+    "@vitejs/plugin-react-swc": "^4.2.3",
+    "@vitest/coverage-v8": "^4.0.18",
     "chokidar": "^5.0.0",
+    "concurrently": "^9.2.1",
     "eslint": "^9.39.2",
     "filesize": "^11.0.13",
-    "glob": "13.0.0",
-    "jsdom": "^27.4.0",
-    "lodash": "^4.17.21",
+    "glob": "13.0.3",
+    "jsdom": "^28.0.0",
+    "lodash": "^4.17.23",
     "lz-string": "^1.5.0",
-    "npm-run-all2": "^8.0.2",
-    "prettier": "^3.7.4",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "stylelint": "^16.26.1",
+    "prettier": "^3.8.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "stylelint": "^17.2.0",
     "ts-morph": "^27.0.2",
     "ts-node": "^10.9.2",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.16",
+    "vitest": "^4.0.18",
     "@react-md/eslint-config": "1.0.0",
     "@react-md/stylelint-config": "1.0.0"
   },
@@ -163,32 +171,33 @@
     "pnpm": "10.28.0"
   },
   "scripts": {
-    "run-script": "tsx --tsconfig scripts/tsconfig.json",
-    "export-map": "pnpm run run-script scripts/getExportMap.ts",
-    "create-index-file": "pnpm run run-script scripts/createIndexFile.ts",
-    "dev": "npm-run-all --parallel build-esm-watch build-scss-watch build-types-watch",
-    "prepare-release": "npm-run-all clean-dist build",
-    "build": "npm-run-all build-esm build-scss build-types",
-    "build-esm": "swc -d ./dist --strip-leading-paths src",
-    "build-esm-watch": "pnpm run build-esm --watch",
-    "build-types": "tsc -P tsconfig.types.json",
-    "build-types-watch": "pnpm run build-types --watch",
-    "build-scss": "pnpm run run-script scripts/copySassFiles.ts",
-    "build-scss-watch": "pnpm run build-scss --watch",
     "clean-dist": "rm -rf dist",
-    "clean": "rm -rf .turbo dist node_modules",
-    "typecheck": "tsc --noEmit",
-    "typecheck-watch": "pnpm typecheck --watch",
+    "clean-cache": "rm -rf .turbo node_modules",
+    "clean": "concurrently 'pnpm clean-dist' 'pnpm clean-cache'",
     "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",
-    "lint-fix": "npm-run-all \"lint-scripts --fix\" \"lint-styles --fix\"",
+    "lint": "concurrently 'pnpm lint-scripts' 'pnpm lint-styles'",
+    "lint-fix": "concurrently 'pnpm lint-scripts --fix' 'pnpm lint-styles --fix'",
+    "typecheck": "tsc --noEmit",
+    "typecheck-watch": "pnpm typecheck --watch",
     "test": "vitest",
     "test-run": "vitest run",
     "test-coverage": "vitest --coverage",
     "test-run-coverage": "pnpm test-run --coverage",
-    "test-run-snapshot": "pnpm test-run -u"
+    "test-run-snapshot": "pnpm test-run -u",
+    "build-esm": "swc -d ./dist --strip-leading-paths src",
+    "build-esm-watch": "pnpm run build-esm --watch",
+    "build-types": "tsc -P tsconfig.types.json",
+    "build-types-watch": "pnpm run build-types --watch",
+    "build-scss": "mlaursen-cli copy-scss-files -r '_colors.scss' -r '_a11y.scss'",
+    "build-scss-watch": "pnpm build-scss --watch",
+    "build": "concurrently 'pnpm build-esm' 'pnpm build-scss' 'pnpm build-types'",
+    "run-script": "tsx --tsconfig scripts/tsconfig.json",
+    "export-map": "pnpm run run-script scripts/getExportMap.ts",
+    "create-index-file": "pnpm run run-script scripts/createIndexFile.ts",
+    "prepare-release": "pnpm clean-dist && pnpm build",
+    "dev": "concurrently 'pnpm build-esm-watch' 'pnpm build-scss-watch' 'pnpm build-types-watch'"
   }
 }

package/src/form/utils.ts

@@ -27,7 +27,7 @@ export function tryToSubmitRelatedForm<E extends HTMLElement>(
   formId: string | undefined
 ): void {
   const { currentTarget } = event;
-  let form: HTMLElement | null = null;
+  let form: HTMLElement | null;
   if (formId) {
     form = document.getElementById(formId);
   } else {

package/src/icon/configureMaterialSymbols.tsx

@@ -0,0 +1,25 @@
+/** @since 7.1.0 */
+import { MaterialSymbol } from "./MaterialSymbol.js";
+import { configureIcons } from "./config.js";
+
+configureIcons({
+  back: <MaterialSymbol name="keyboard_arrow_left" />,
+  clear: <MaterialSymbol name="close_small" />,
+  close: <MaterialSymbol name="close" />,
+  checkbox: <MaterialSymbol name="check_box_outline_blank" />,
+  checkboxChecked: <MaterialSymbol name="check_box" />,
+  checkboxIndeterminate: <MaterialSymbol name="indeterminate_check_box" />,
+  dropdown: <MaterialSymbol name="arrow_drop_down" />,
+  error: <MaterialSymbol name="error" />,
+  expander: <MaterialSymbol name="keyboard_arrow_down" />,
+  forward: <MaterialSymbol name="keyboard_arrow_right" />,
+  menu: <MaterialSymbol name="menu" />,
+  notification: <MaterialSymbol name="notifications" />,
+  password: <MaterialSymbol name="visibility" />,
+  radio: <MaterialSymbol name="radio_button_unchecked" />,
+  radioChecked: <MaterialSymbol name="radio_button_checked" />,
+  remove: <MaterialSymbol name="cancel" />,
+  selected: <MaterialSymbol name="check" />,
+  sort: <MaterialSymbol name="arrow_upward" />,
+  upload: <MaterialSymbol name="upload" />,
+});

package/src/icon/getMaterialSymbolOption.ts

@@ -0,0 +1,20 @@
+import { type GoogleFontsAPIValueOrRange } from "./getMaterialSymbolsUrl.js";
+
+/**
+ * @internal
+ * @since 7.1.0
+ */
+export function getMaterialSymbolOption<T extends number>(
+  value: GoogleFontsAPIValueOrRange<T> | undefined,
+  fallback: T
+): string {
+  if (!value) {
+    return `${fallback}`;
+  }
+
+  if (typeof value === "number") {
+    return `${value}`;
+  }
+
+  return `${value.min}..${value.max}`;
+}

package/src/icon/getMaterialSymbolsUrl.ts

@@ -0,0 +1,112 @@
+import { alphaNumericSort } from "../utils/alphaNumericSort.js";
+import { getMaterialSymbolOption } from "./getMaterialSymbolOption.js";
+import {
+  type MaterialSymbolFamily,
+  type MaterialSymbolName,
+} from "./material.js";
+import {
+  MATERIAL_CONFIG,
+  type MaterialSymbolFill,
+  type MaterialSymbolGrade,
+  type MaterialSymbolOpticalSize,
+  type MaterialSymbolWeight,
+} from "./materialConfig.js";
+import { DEFAULT_MATERIAL_SYMBOL_NAMES } from "./symbols.js";
+
+/**
+ * @since 7.1.0
+ */
+export type GoogleFontsAPIValueOrRange<T extends number> =
+  | T
+  | { min: T; max: T };
+
+/**
+ * @since 7.1.0
+ */
+export interface MaterialSymbolsGoogleFontUrlOptions {
+  /**
+   * Provide this value if the `MATERIAL_CONFIG.family` is not the default.
+   *
+   * @defaultValue `"outlined"`
+   */
+  family?: MaterialSymbolFamily | readonly MaterialSymbolFamily[];
+
+  /**
+   * Provide this value if the `MATERIAL_CONFIG.fill` is not the default.
+   *
+   * @defaultValue `0`
+   */
+  fill?: GoogleFontsAPIValueOrRange<MaterialSymbolFill>;
+
+  /**
+   * Provide this value if the `MATERIAL_CONFIG.grade` is not the default.
+   *
+   * @defaultValue `0`
+   */
+  grade?: GoogleFontsAPIValueOrRange<MaterialSymbolGrade>;
+
+  /**
+   * Provide this value if the `MATERIAL_CONFIG.weight` is not the default.
+   *
+   * @defaultValue `400`
+   */
+  weight?: GoogleFontsAPIValueOrRange<MaterialSymbolWeight>;
+
+  /**
+   * Provide this value if the `MATERIAL_CONFIG.opticalSize` is not the default.
+   *
+   * @defaultValue `48`
+   */
+  opticalSize?: GoogleFontsAPIValueOrRange<MaterialSymbolOpticalSize>;
+}
+
+/**
+ * @since 7.1.0
+ */
+export interface MaterialSymbolsUrlOptions extends MaterialSymbolsGoogleFontUrlOptions {
+  /**
+   * @see {@link DEFAULT_MATERIAL_SYMBOL_NAMES}
+   * @defaultValue `DEFAULT_MATERIAL_SYMBOL_NAMES`
+   */
+  names?: readonly MaterialSymbolName[];
+}
+
+/**
+ * @since 7.1.0
+ */
+export function getMaterialSymbolsUrl(
+  options: MaterialSymbolsUrlOptions = {}
+): string {
+  // the names have to be sorted for the google fonts api
+  const names = alphaNumericSort([
+    ...new Set(options.names ?? DEFAULT_MATERIAL_SYMBOL_NAMES),
+  ]);
+  const fill = getMaterialSymbolOption(options.fill, MATERIAL_CONFIG.fill);
+  const grade = getMaterialSymbolOption(options.grade, MATERIAL_CONFIG.grade);
+  const weight = getMaterialSymbolOption(
+    options.weight,
+    MATERIAL_CONFIG.weight
+  );
+  const opticalSize = getMaterialSymbolOption(
+    options.opticalSize,
+    MATERIAL_CONFIG.opticalSize
+  );
+  const specs = `:opsz,wght,FILL,GRAD@${opticalSize},${weight},${fill},${grade}`;
+
+  const families =
+    typeof options.family === "string" || options.family === undefined
+      ? [options.family ?? MATERIAL_CONFIG.family]
+      : options.family;
+  let familiesQs = "";
+  for (const [i, family] of families.entries()) {
+    const variant = family.charAt(0).toUpperCase() + family.slice(1);
+    familiesQs += (i === 0 ? "" : "&") + "family=Material+Symbols+" + variant;
+  }
+
+  let iconNames = "";
+  if (names.length > 0) {
+    iconNames = `&icon_names=${names.join(",")}`;
+  }
+
+  return `https://fonts.googleapis.com/css2?${familiesQs}${specs}${iconNames}`;
+}

package/src/icon/symbols.ts

@@ -0,0 +1,26 @@
+import { type MaterialSymbolName } from "./material.js";
+
+/**
+ * @since 7.1.0
+ */
+export const DEFAULT_MATERIAL_SYMBOL_NAMES = [
+  "keyboard_arrow_left",
+  "close_small",
+  "close",
+  "check_box_outline_blank",
+  "check_box",
+  "indeterminate_check_box",
+  "arrow_drop_down",
+  "error",
+  "keyboard_arrow_down",
+  "keyboard_arrow_right",
+  "menu",
+  "notifications",
+  "visibility",
+  "radio_button_unchecked",
+  "radio_button_checked",
+  "cancel",
+  "check",
+  "arrow_upward",
+  "upload",
+] satisfies readonly MaterialSymbolName[];

package/src/layout/useExpandableLayout.ts

@@ -9,7 +9,11 @@ import { type AppSize } from "../media-queries/appSize.js";
 import { MEDIA_QUERY_CONFIG } from "../media-queries/config.js";
 import { useMediaQuery } from "../media-queries/useMediaQuery.js";
 import { type CSSTransitionElementProps } from "../transition/types.js";
-import { type CssPosition, type UseStateInitializer } from "../types.js";
+import {
+  type CssPosition,
+  type LiteralStringUnion,
+  type UseStateInitializer,
+} from "../types.js";
 import { useToggle } from "../useToggle.js";
 import { useDevEffect } from "../utils/useDevEffect.js";
 import { type LayoutNavProps } from "./LayoutNav.js";
@@ -75,7 +79,7 @@ export interface ExpandableLayoutOptions extends TemporaryLayoutOptions {
    *
    * @defaultValue `"tablet"`
    */
-  temporaryUntil?: "tablet" | "desktop" | (string & {});
+  temporaryUntil?: LiteralStringUnion<"tablet" | "desktop">;
 }
 
 /**