@react-md/core 6.0.2 → 6.1.0

package/dist/theme/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/utils.ts"],"sourcesContent":["import { black, white } from \"./colors.js\";\n\nconst RGB_REGEX = /^rgb\\(((\\b([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\b),?){3}\\)$/;\nconst SHORTHAND_REGEX = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\nconst VERBOSE_REGEX = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i;\n\nexport type RGB = readonly [red: number, green: number, blue: number];\n\n/**\n * Converts a hex string into an rgb value. This is useful for detecting color\n * contrast ratios and other stuff.\n *\n * @param hex - The hex string to convert\n * @returns an object containing the r, g, b values for the color.\n */\nexport function hexToRGB(hex: string): RGB {\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    !SHORTHAND_REGEX.test(hex) &&\n    !VERBOSE_REGEX.test(hex)\n  ) {\n    throw new TypeError(\"Invalid color string.\");\n  }\n\n  hex = hex.replace(\n    SHORTHAND_REGEX,\n    (_m, r, g, b) => `${r}${r}${g}${g}${b}${b}`\n  );\n\n  const result = hex.match(VERBOSE_REGEX) || [];\n  const r = parseInt(result[1] || \"\", 16) || 0;\n  const g = parseInt(result[2] || \"\", 16) || 0;\n  const b = parseInt(result[3] || \"\", 16) || 0;\n\n  return [r, g, b];\n}\n\nexport function getRGB(color: string): RGB {\n  // chrome 102.0.50005.63 apparently has whitespace when calling `window.getComputedStyle(element)`\n  // remove whitepsace to make it easy for supporting rgb or hex\n  color = color.replace(/\\s/g, \"\");\n  const rgbMatches = color.match(RGB_REGEX);\n  if (rgbMatches) {\n    const r = parseInt(rgbMatches[1] || \"\", 16) || 0;\n    const g = parseInt(rgbMatches[2] || \"\", 16) || 0;\n    const b = parseInt(rgbMatches[3] || \"\", 16) || 0;\n\n    return [r, g, b];\n  }\n\n  return hexToRGB(color);\n}\n\nconst RED_MULTIPLIER = 0.2126;\nconst GREEN_MULTIPLIER = 0.7152;\nconst BLUE_MULTIPLIER = 0.0722;\n\n/**\n * I really couldn't figure out how to name these \"magic\" numbers since the\n * formula doesn't really describe it much:\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @internal\n */\nfunction get8BitColor(color: number): number {\n  color /= 255;\n\n  if (color <= 0.03928) {\n    return color / 12.92;\n  }\n\n  return ((color + 0.055) / 1.055) ** 2.4;\n}\n\n/**\n * A number closest to 0 should be closest to black while a number closest to 1\n * should be closest to white.\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @internal\n */\nexport function getLuminance(color: string): number {\n  const [r, g, b] = getRGB(color);\n\n  const red = get8BitColor(r) * RED_MULTIPLIER;\n  const green = get8BitColor(g) * GREEN_MULTIPLIER;\n  const blue = get8BitColor(b) * BLUE_MULTIPLIER;\n\n  return red + green + blue;\n}\n\n/**\n * Gets the contrast ratio between a background color and a foreground color.\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n *\n * @param background - The background color\n * @param foreground - The foreground color. This is normally the `color` css\n * value.\n * @returns the contrast ratio between the background and foreground colors.\n */\nexport function getContrastRatio(\n  background: string,\n  foreground: string\n): number {\n  const backgroundLuminance = getLuminance(background) + 0.05;\n  const foregroundLuminance = getLuminance(foreground) + 0.05;\n\n  return (\n    Math.max(backgroundLuminance, foregroundLuminance) /\n    Math.min(backgroundLuminance, foregroundLuminance)\n  );\n}\n\n/**\n * The type of contrast ratio compliance to confirm to. The ratios in order are:\n * - 3:1 for large text (18pt normal or 14pt bold)\n * - 4.5:1 for normal text\n * - 7:1 for Level AAA requirements.\n *\n * @see https://www.w3.org/TR/WCAG20/#visual-audio-contrast\n * @see https://www.w3.org/TR/WCAG20/#larger-scaledef\n */\nexport type ContrastRatioCompliance = \"large\" | \"normal\" | \"AAA\";\n\n/**\n * The contrast ratio that can be used for large text where large text is\n * considered 18pt or 14pt bold.\n */\nexport const LARGE_TEXT_CONTRAST_RATIO = 3;\n\n/**\n * The contrast ratio that can be used for normal text.\n */\nexport const NORMAL_TEXT_CONTRAST_RATIO = 4.5;\n\n/**\n * The AAA contrast ratio for passing WGAC 2.0 color contrast ratios.\n */\nexport const AAA_CONTRAST_RATIO = 7;\n\n/**\n * Checks if there is an acceptable contrast ratio between the background and\n * foreground colors based on the provided compliance level.\n *\n * @param background - The background color to check against\n * @param foreground - The foreground color to check against\n * @param compliance - The compliance level to use or a custom number as a\n * ratio.\n * @returns true if there is enough contrast between the foreground and\n * background colors for the provided compliance level.\n */\nexport function isContrastCompliant(\n  background: string,\n  foreground: string,\n  compliance: ContrastRatioCompliance | number = \"normal\"\n): boolean {\n  let ratio: number;\n  switch (compliance) {\n    case \"large\":\n      ratio = LARGE_TEXT_CONTRAST_RATIO;\n      break;\n    case \"normal\":\n      ratio = NORMAL_TEXT_CONTRAST_RATIO;\n      break;\n    case \"AAA\":\n      ratio = AAA_CONTRAST_RATIO;\n      break;\n    default:\n      ratio = compliance;\n  }\n\n  return getContrastRatio(background, foreground) >= ratio;\n}\n\n/**\n * Returns the highest contrast color to the provided `backgroundColor`. This is\n * normally used to ensure that a new background color can use an accessible text\n * color of either `#000` or `#fff`.\n *\n * This is pretty much a javascript implementation as the `contrast-color` Sass\n * function.\n *\n * @since 6.0.0\n */\nexport function contrastColor(\n  backgroundColor: string,\n  lightColor = white,\n  darkColor = black\n): string {\n  const lightContrast = getContrastRatio(backgroundColor, lightColor);\n  const darkContrast = getContrastRatio(backgroundColor, darkColor);\n\n  return lightContrast > darkContrast ? lightColor : darkColor;\n}\n"],"names":["black","white","RGB_REGEX","SHORTHAND_REGEX","VERBOSE_REGEX","hexToRGB","hex","process","env","NODE_ENV","test","TypeError","replace","_m","r","g","b","result","match","parseInt","getRGB","color","rgbMatches","RED_MULTIPLIER","GREEN_MULTIPLIER","BLUE_MULTIPLIER","get8BitColor","getLuminance","red","green","blue","getContrastRatio","background","foreground","backgroundLuminance","foregroundLuminance","Math","max","min","LARGE_TEXT_CONTRAST_RATIO","NORMAL_TEXT_CONTRAST_RATIO","AAA_CONTRAST_RATIO","isContrastCompliant","compliance","ratio","contrastColor","backgroundColor","lightColor","darkColor","lightContrast","darkContrast"],"mappings":"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"}
+{"version":3,"sources":["../../src/theme/utils.ts"],"sourcesContent":["/* eslint-disable no-param-reassign */\nimport { black, white } from \"./colors.js\";\n\nconst RGB_REGEX = /^rgb\\(((\\b([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\b),?){3}\\)$/;\nconst SHORTHAND_REGEX = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\nconst VERBOSE_REGEX = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i;\n\nexport type RGB = readonly [red: number, green: number, blue: number];\n\n/**\n * Converts a hex string into an rgb value. This is useful for detecting color\n * contrast ratios and other stuff.\n *\n * @param hex - The hex string to convert\n * @returns an object containing the r, g, b values for the color.\n */\nexport function hexToRGB(hex: string): RGB {\n  if (\n    process.env.NODE_ENV !== \"production\" &&\n    !SHORTHAND_REGEX.test(hex) &&\n    !VERBOSE_REGEX.test(hex)\n  ) {\n    throw new TypeError(\"Invalid color string.\");\n  }\n\n  hex = hex.replace(\n    SHORTHAND_REGEX,\n    (_m, r, g, b) => `${r}${r}${g}${g}${b}${b}`\n  );\n\n  const result = hex.match(VERBOSE_REGEX) || [];\n  const r = parseInt(result[1] || \"\", 16) || 0;\n  const g = parseInt(result[2] || \"\", 16) || 0;\n  const b = parseInt(result[3] || \"\", 16) || 0;\n\n  return [r, g, b];\n}\n\nexport function getRGB(color: string): RGB {\n  // chrome 102.0.50005.63 apparently has whitespace when calling `window.getComputedStyle(element)`\n  // remove whitespace to make it easy for supporting rgb or hex\n  color = color.replace(/\\s/g, \"\");\n  const rgbMatches = color.match(RGB_REGEX);\n  if (rgbMatches) {\n    const r = parseInt(rgbMatches[1] || \"\", 16) || 0;\n    const g = parseInt(rgbMatches[2] || \"\", 16) || 0;\n    const b = parseInt(rgbMatches[3] || \"\", 16) || 0;\n\n    return [r, g, b];\n  }\n\n  return hexToRGB(color);\n}\n\nconst RED_MULTIPLIER = 0.2126;\nconst GREEN_MULTIPLIER = 0.7152;\nconst BLUE_MULTIPLIER = 0.0722;\n\n/**\n * I really couldn't figure out how to name these \"magic\" numbers since the\n * formula doesn't really describe it much:\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @internal\n */\nfunction get8BitColor(color: number): number {\n  color /= 255;\n\n  if (color <= 0.03928) {\n    return color / 12.92;\n  }\n\n  return ((color + 0.055) / 1.055) ** 2.4;\n}\n\n/**\n * A number closest to 0 should be closest to black while a number closest to 1\n * should be closest to white.\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n * @internal\n */\nexport function getLuminance(color: string): number {\n  const [r, g, b] = getRGB(color);\n\n  const red = get8BitColor(r) * RED_MULTIPLIER;\n  const green = get8BitColor(g) * GREEN_MULTIPLIER;\n  const blue = get8BitColor(b) * BLUE_MULTIPLIER;\n\n  return red + green + blue;\n}\n\n/**\n * Gets the contrast ratio between a background color and a foreground color.\n *\n * @see https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n *\n * @param background - The background color\n * @param foreground - The foreground color. This is normally the `color` css\n * value.\n * @returns the contrast ratio between the background and foreground colors.\n */\nexport function getContrastRatio(\n  background: string,\n  foreground: string\n): number {\n  const backgroundLuminance = getLuminance(background) + 0.05;\n  const foregroundLuminance = getLuminance(foreground) + 0.05;\n\n  return (\n    Math.max(backgroundLuminance, foregroundLuminance) /\n    Math.min(backgroundLuminance, foregroundLuminance)\n  );\n}\n\n/**\n * The type of contrast ratio compliance to confirm to. The ratios in order are:\n * - 3:1 for large text (18pt normal or 14pt bold)\n * - 4.5:1 for normal text\n * - 7:1 for Level AAA requirements.\n *\n * @see https://www.w3.org/TR/WCAG20/#visual-audio-contrast\n * @see https://www.w3.org/TR/WCAG20/#larger-scaledef\n */\nexport type ContrastRatioCompliance = \"large\" | \"normal\" | \"AAA\";\n\n/**\n * The contrast ratio that can be used for large text where large text is\n * considered 18pt or 14pt bold.\n */\nexport const LARGE_TEXT_CONTRAST_RATIO = 3;\n\n/**\n * The contrast ratio that can be used for normal text.\n */\nexport const NORMAL_TEXT_CONTRAST_RATIO = 4.5;\n\n/**\n * The AAA contrast ratio for passing WGAC 2.0 color contrast ratios.\n */\nexport const AAA_CONTRAST_RATIO = 7;\n\n/**\n * Checks if there is an acceptable contrast ratio between the background and\n * foreground colors based on the provided compliance level.\n *\n * @param background - The background color to check against\n * @param foreground - The foreground color to check against\n * @param compliance - The compliance level to use or a custom number as a\n * ratio.\n * @returns true if there is enough contrast between the foreground and\n * background colors for the provided compliance level.\n */\nexport function isContrastCompliant(\n  background: string,\n  foreground: string,\n  compliance: ContrastRatioCompliance | number = \"normal\"\n): boolean {\n  let ratio: number;\n  switch (compliance) {\n    case \"large\":\n      ratio = LARGE_TEXT_CONTRAST_RATIO;\n      break;\n    case \"normal\":\n      ratio = NORMAL_TEXT_CONTRAST_RATIO;\n      break;\n    case \"AAA\":\n      ratio = AAA_CONTRAST_RATIO;\n      break;\n    default:\n      ratio = compliance;\n  }\n\n  return getContrastRatio(background, foreground) >= ratio;\n}\n\n/**\n * Returns the highest contrast color to the provided `backgroundColor`. This is\n * normally used to ensure that a new background color can use an accessible text\n * color of either `#000` or `#fff`.\n *\n * This is pretty much a javascript implementation as the `contrast-color` Sass\n * function.\n *\n * @since 6.0.0\n */\nexport function contrastColor(\n  backgroundColor: string,\n  lightColor = white,\n  darkColor = black\n): string {\n  const lightContrast = getContrastRatio(backgroundColor, lightColor);\n  const darkContrast = getContrastRatio(backgroundColor, darkColor);\n\n  return lightContrast > darkContrast ? lightColor : darkColor;\n}\n"],"names":["black","white","RGB_REGEX","SHORTHAND_REGEX","VERBOSE_REGEX","hexToRGB","hex","process","env","NODE_ENV","test","TypeError","replace","_m","r","g","b","result","match","parseInt","getRGB","color","rgbMatches","RED_MULTIPLIER","GREEN_MULTIPLIER","BLUE_MULTIPLIER","get8BitColor","getLuminance","red","green","blue","getContrastRatio","background","foreground","backgroundLuminance","foregroundLuminance","Math","max","min","LARGE_TEXT_CONTRAST_RATIO","NORMAL_TEXT_CONTRAST_RATIO","AAA_CONTRAST_RATIO","isContrastCompliant","compliance","ratio","contrastColor","backgroundColor","lightColor","darkColor","lightContrast","darkContrast"],"mappings":"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"}

package/dist/tooltip/_tooltip.scss

@@ -4,6 +4,8 @@
 
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
+@use "../spacing";
 @use "../theme/a11y";
 @use "../theme/colors";
 @use "../transition/transition";
@@ -69,27 +71,27 @@ $dense-typography: (
 
 /// The default `Tooltip` border radius.
 /// @type Number
-$border-radius: 0.25rem !default;
+$border-radius: border-radius.get-var(xs) !default;
 
 /// The default `Tooltip` z-index.
 /// @type Number
 $z-index: utils.$temporary-element-z-index + 20 !default;
 
-/// The default `max-width` for a `Tooltip`>
+/// The default `max-width` for a `Tooltip`.
 /// @type Number
 $max-width: 15rem !default;
 
-/// The default `min-height` for a `Tooltip`>
+/// The default `min-height` for a `Tooltip`.
 /// @type Number
 $min-height: 2rem !default;
 
-/// The default horizontal padding for a `Tooltip`>
+/// The default horizontal padding for a `Tooltip`.
 /// @type Number
-$horizontal-padding: 1rem !default;
+$horizontal-padding: spacing.get-var(md) !default;
 
-/// The default vertical padding for a `Tooltip`>
+/// The default vertical padding for a `Tooltip`
 /// @type Number
-$vertical-padding: 0.5625rem !default;
+$vertical-padding: calc(spacing.get-var(sm) * 1.25) !default;
 
 /// The default spacing between a tooltipped element and the `Tooltip`.
 /// @type Number
@@ -105,11 +107,11 @@ $dense-min-height: 1.375rem !default;
 
 /// The default horizontal padding for a dense `Tooltip`.
 /// @type Number
-$dense-horizontal-padding: 0.5rem !default;
+$dense-horizontal-padding: spacing.get-var(sm) !default;
 
 /// The default vertical padding for a dense `Tooltip`.
 /// @type Number
-$dense-vertical-padding: 0.375rem !default;
+$dense-vertical-padding: calc(spacing.get-var(xs) * 1.25) !default;
 
 /// The default `Tooltip` enter transition duration.
 /// @type Number
@@ -127,9 +129,9 @@ $leave-duration: transition.$linear-duration !default;
 /// @type Number
 $leave-timing-function: transition.$acceleration-timing-function !default;
 
-/// The default `Tooltip` /nter/leave animation distance.
+/// The default `Tooltip` enter/leave animation distance.
 /// @type Number
-$transition-distance: 0.5rem !default;
+$transition-distance: spacing.get-var(sm) !default;
 
 /// The available configurable css variables and mostly used internally for the
 /// `get-var`, `set-var`, and `use-var` utils.
@@ -176,6 +178,22 @@ $variables: (
 /// @param {any} fallback [null] - An optional fallback value if the variable
 /// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
+  @if not $fallback {
+    @if name == border-radius {
+      $fallbacK: $border-radius;
+    } @else if name == horizontal-padding {
+      $fallback: $horizontal-padding;
+    } @else if name == vertical-padding {
+      $fallback: $vertical-padding;
+    }
+  } @else if name == dense-horizontal-padding {
+    $fallback: $dense-horizontal-padding;
+  } @else if name == dense-vertical-padding {
+    $fallback: $dense-vertical-padding;
+  } @else if name == transition-distance {
+    $fallback: $transition-distance;
+  }
+
   #{$property}: get-var($name, $fallback);
 }
 
@@ -186,17 +204,11 @@ $variables: (
 
     @include set-var(background-color, $background-color);
     @include set-var(color, $color);
-    @include set-var(border-radius, $border-radius);
-    @include set-var(horizontal-padding, $horizontal-padding);
-    @include set-var(vertical-padding, $vertical-padding);
     @include set-var(max-width, $max-width);
     @include set-var(min-height, $min-height);
-    @include set-var(transition-distance, $transition-distance);
     @include set-var(z-index, $z-index);
 
     @if not $disable-dense {
-      @include set-var(dense-horizontal-padding, $dense-horizontal-padding);
-      @include set-var(dense-vertical-padding, $dense-vertical-padding);
       @include set-var(dense-min-height, $dense-min-height);
     }
   }
@@ -206,8 +218,14 @@ $variables: (
   @if not $disable-everything {
     @include set-var(spacing, $dense-spacing);
     @include set-var(min-height, get-var(dense-min-height));
-    @include set-var(horizontal-padding, get-var(dense-horizontal-padding));
-    @include set-var(vertical-padding, get-var(dense-vertical-padding));
+    @include set-var(
+      horizontal-padding,
+      get-var(dense-horizontal-padding, $dense-horizontal-padding)
+    );
+    @include set-var(
+      vertical-padding,
+      get-var(dense-vertical-padding, $dense-vertical-padding)
+    );
   }
 }
 
@@ -222,7 +240,7 @@ $variables: (
         @include utils.map-to-styles($typography);
         @include use-var(background-color);
         @include use-var(color);
-        @include use-var(border-radius);
+        @include use-var(border-radius, $fallback: $border-radius);
         @include use-var(max-width);
         @include use-var(min-height);
         @include use-var(z-index);
@@ -230,7 +248,8 @@ $variables: (
         opacity: 0;
         overflow: hidden;
         overflow-wrap: anywhere;
-        padding: get-var(vertical-padding) get-var(horizontal-padding);
+        padding: get-var(vertical-padding, $vertical-padding)
+          get-var(horizontal-padding, $horizontal-padding);
         pointer-events: none;
         position: fixed;
         text-transform: none;
@@ -246,28 +265,36 @@ $variables: (
         @if not $disable-above {
           &--above {
             transform: translateY(
-              #{utils.negate-var(get-var(transition-distance))}
+              #{utils.negate-var(
+                  get-var(transition-distance, $transition-distance)
+                )}
             );
           }
         }
 
         @if not $disable-below {
           &--below {
-            transform: translateY(#{get-var(transition-distance)});
+            transform: translateY(
+              #{get-var(transition-distance, $transition-distance)}
+            );
           }
         }
 
         @if not $disable-left {
           &--left {
             transform: translateX(
-              #{utils.negate-var(get-var(transition-distance))}
+              #{utils.negate-var(
+                  get-var(transition-distance, $transition-distance)
+                )}
             );
           }
         }
 
         @if not $disable-right {
           &--right {
-            transform: translateX(#{get-var(transition-distance)});
+            transform: translateX(
+              #{get-var(transition-distance, $transition-distance)}
+            );
           }
         }
 

package/dist/transition/_transition.scss

@@ -5,6 +5,7 @@
 @use "sass:color";
 @use "sass:map";
 @use "../utils";
+@use "../border-radius";
 @use "../theme/colors";
 @use "../theme/theme";
 
@@ -112,7 +113,7 @@ $skeleton-placeholder-width: 43% !default;
 
 /// The default skeleton placeholder border-radius.
 /// @type Number
-$skeleton-placeholder-border-radius: 0.25rem !default;
+$skeleton-placeholder-border-radius: border-radius.get-var(xs) !default;
 
 /// The default light theme skeleton placeholder background color.
 /// @type Color

package/dist/tree/_tree.scss

@@ -43,7 +43,7 @@ $item-padding-base: list.$item-horizontal-padding !default;
 ///
 /// @see $item-padding
 /// @type Number
-$item-padding-incrementor: list.$item-horizontal-padding * 1.5 !default;
+$item-padding-incrementor: calc(list.$item-horizontal-padding * 1.5) !default;
 
 /// The default `TreeItemExpander` rotation starting position when rendered as
 /// a `rightAddon`.

package/dist/utils/bem.js

@@ -5,7 +5,7 @@ function modify(base, modifier) {
     const hasOwn = Object.prototype.hasOwnProperty;
     return Object.keys(modifier).reduce((s, mod)=>{
         if (hasOwn.call(modifier, mod) && modifier[mod]) {
-            s = `${s} ${base}--${mod}`;
+            return `${s} ${base}--${mod}`;
         }
         return s;
     }, base);

package/dist/utils/bem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/bem.ts"],"sourcesContent":["export type BEMModifier = Record<string, unknown>;\n\nfunction modify(base: string, modifier?: BEMModifier): string {\n  if (!modifier) {\n    return base;\n  }\n\n  const hasOwn = Object.prototype.hasOwnProperty;\n  return Object.keys(modifier).reduce((s, mod) => {\n    if (hasOwn.call(modifier, mod) && modifier[mod]) {\n      s = `${s} ${base}--${mod}`;\n    }\n\n    return s;\n  }, base);\n}\n\n/**\n * Creates the full class name from the base block name. This can be called\n * without any arguments which will just return the base block name (kind of\n * worthless), or you can provide a child element name and modifiers.\n *\n * @since 6.0.0 Converted to an interface that supports the `base` attribute.\n */\nexport interface BEMResult {\n  /**\n   * @example Simple Example\n   * ```ts\n   * const styles = bem(\"root\");\n   *\n   * styles(\"child\"); // \"root__child\"\n   * styles(\"child\", {\n   *   modifier1: true,\n   *   modifier2: false,\n   * }); // \"root__child root__child--modifier-1\"\n   * ```\n   * @param element - The child element to be prefixed before any modifiers.\n   * @param modifier - Any optional modifiers to apply to the block and optional\n   * element.\n   * @returns the full class name\n   */\n  (element: string, modifier?: BEMModifier): string;\n\n  /**\n   * @example Simple Example\n   * ```ts\n   * const styles = bem(\"root\");\n   *\n   * styles() // \"root\"\n   * styles({\n   *   modifier1: true,\n   *   modifier2: false,\n   * }); // \"root--modifier-1\"\n   * ```\n   * @param modifier - Any optional modifiers to apply to the block and optional\n   * element.\n   * @returns the full class name\n   */\n  (modifier?: BEMModifier): string;\n\n  /**\n   * The base class name\n   */\n  base: string;\n}\n\n/**\n * Applies the BEM styled class name to an element.\n *\n * @example Simple Example\n * ```tsx\n * import { bem } from \"@react-md/core/utils/bem\":\n *\n * const styles = bem(\"my-component\"):\n *\n * export function MyComponent(props) {\n *   const className = styles({\n *     always: true,\n *     never: false,\n *     \"some-condition\": props.something,\n *   }):\n *   const childClassName = styles('child', {\n *     always: true,\n *     never: false,\n *     \"some-condition\": props.something,\n *   });\n *\n *   // With a false-like `props.something`\n *   // className === \"my-component__child my-component__child--always\"\n *   // childClassName === \"my-component my-component--always\"\n *   // With a truthy `props.something`\n *   // className === \"my-component my-component--always my-component--some-condition\"\n *   // childClassName === \"my-component__child my-component__child--always my-component__child--some-condition\"\n *\n *   return (\n *     <div className={className}>\n *       <div className={childClassName} />\n *     </div>\n *   ):\n * }\n * ```\n *\n * @see https://en.bem.info/methodology/css/\n * @param base - The base class to use\n * @returns a function to call that generates the full class name\n */\nexport function bem(base: string): BEMResult {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!base) {\n      throw new Error(\n        \"bem requires a base block class but none were provided.\"\n      );\n    }\n  }\n\n  function block(\n    elementOrModifier?: BEMModifier | string,\n    modifier?: BEMModifier\n  ): string {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (typeof elementOrModifier !== \"string\" && modifier) {\n        throw new TypeError(\n          \"bem does not support having two modifier arguments.\"\n        );\n      }\n    }\n\n    if (!elementOrModifier) {\n      return base;\n    }\n\n    if (typeof elementOrModifier !== \"string\") {\n      return modify(base, elementOrModifier);\n    }\n\n    return modify(`${base}__${elementOrModifier}`, modifier);\n  }\n  block.base = base;\n  return block;\n}\n"],"names":["modify","base","modifier","hasOwn","Object","prototype","hasOwnProperty","keys","reduce","s","mod","call","bem","process","env","NODE_ENV","Error","block","elementOrModifier","TypeError"],"mappings":"AAEA,SAASA,OAAOC,IAAY,EAAEC,QAAsB;IAClD,IAAI,CAACA,UAAU;QACb,OAAOD;IACT;IAEA,MAAME,SAASC,OAAOC,SAAS,CAACC,cAAc;IAC9C,OAAOF,OAAOG,IAAI,CAACL,UAAUM,MAAM,CAAC,CAACC,GAAGC;QACtC,IAAIP,OAAOQ,IAAI,CAACT,UAAUQ,QAAQR,QAAQ,CAACQ,IAAI,EAAE;YAC/CD,IAAI,GAAGA,EAAE,CAAC,EAAER,KAAK,EAAE,EAAES,KAAK;QAC5B;QAEA,OAAOD;IACT,GAAGR;AACL;AAmDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,SAASW,IAAIX,IAAY;IAC9B,IAAIY,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,CAACd,MAAM;YACT,MAAM,IAAIe,MACR;QAEJ;IACF;IAEA,SAASC,MACPC,iBAAwC,EACxChB,QAAsB;QAEtB,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAI,OAAOG,sBAAsB,YAAYhB,UAAU;gBACrD,MAAM,IAAIiB,UACR;YAEJ;QACF;QAEA,IAAI,CAACD,mBAAmB;YACtB,OAAOjB;QACT;QAEA,IAAI,OAAOiB,sBAAsB,UAAU;YACzC,OAAOlB,OAAOC,MAAMiB;QACtB;QAEA,OAAOlB,OAAO,GAAGC,KAAK,EAAE,EAAEiB,mBAAmB,EAAEhB;IACjD;IACAe,MAAMhB,IAAI,GAAGA;IACb,OAAOgB;AACT"}
+{"version":3,"sources":["../../src/utils/bem.ts"],"sourcesContent":["export type BEMModifier = Record<string, unknown>;\n\nfunction modify(base: string, modifier?: BEMModifier): string {\n  if (!modifier) {\n    return base;\n  }\n\n  const hasOwn = Object.prototype.hasOwnProperty;\n  return Object.keys(modifier).reduce((s, mod) => {\n    if (hasOwn.call(modifier, mod) && modifier[mod]) {\n      return `${s} ${base}--${mod}`;\n    }\n\n    return s;\n  }, base);\n}\n\n/**\n * Creates the full class name from the base block name. This can be called\n * without any arguments which will just return the base block name (kind of\n * worthless), or you can provide a child element name and modifiers.\n *\n * @since 6.0.0 Converted to an interface that supports the `base` attribute.\n */\nexport interface BEMResult {\n  /**\n   * @example Simple Example\n   * ```ts\n   * const styles = bem(\"root\");\n   *\n   * styles(\"child\"); // \"root__child\"\n   * styles(\"child\", {\n   *   modifier1: true,\n   *   modifier2: false,\n   * }); // \"root__child root__child--modifier-1\"\n   * ```\n   * @param element - The child element to be prefixed before any modifiers.\n   * @param modifier - Any optional modifiers to apply to the block and optional\n   * element.\n   * @returns the full class name\n   */\n  (element: string, modifier?: BEMModifier): string;\n\n  /**\n   * @example Simple Example\n   * ```ts\n   * const styles = bem(\"root\");\n   *\n   * styles() // \"root\"\n   * styles({\n   *   modifier1: true,\n   *   modifier2: false,\n   * }); // \"root--modifier-1\"\n   * ```\n   * @param modifier - Any optional modifiers to apply to the block and optional\n   * element.\n   * @returns the full class name\n   */\n  (modifier?: BEMModifier): string;\n\n  /**\n   * The base class name\n   */\n  base: string;\n}\n\n/**\n * Applies the BEM styled class name to an element.\n *\n * @example Simple Example\n * ```tsx\n * import { bem } from \"@react-md/core/utils/bem\":\n *\n * const styles = bem(\"my-component\"):\n *\n * export function MyComponent(props) {\n *   const className = styles({\n *     always: true,\n *     never: false,\n *     \"some-condition\": props.something,\n *   }):\n *   const childClassName = styles('child', {\n *     always: true,\n *     never: false,\n *     \"some-condition\": props.something,\n *   });\n *\n *   // With a false-like `props.something`\n *   // className === \"my-component__child my-component__child--always\"\n *   // childClassName === \"my-component my-component--always\"\n *   // With a truthy `props.something`\n *   // className === \"my-component my-component--always my-component--some-condition\"\n *   // childClassName === \"my-component__child my-component__child--always my-component__child--some-condition\"\n *\n *   return (\n *     <div className={className}>\n *       <div className={childClassName} />\n *     </div>\n *   ):\n * }\n * ```\n *\n * @see https://en.bem.info/methodology/css/\n * @param base - The base class to use\n * @returns a function to call that generates the full class name\n */\nexport function bem(base: string): BEMResult {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!base) {\n      throw new Error(\n        \"bem requires a base block class but none were provided.\"\n      );\n    }\n  }\n\n  function block(\n    elementOrModifier?: BEMModifier | string,\n    modifier?: BEMModifier\n  ): string {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (typeof elementOrModifier !== \"string\" && modifier) {\n        throw new TypeError(\n          \"bem does not support having two modifier arguments.\"\n        );\n      }\n    }\n\n    if (!elementOrModifier) {\n      return base;\n    }\n\n    if (typeof elementOrModifier !== \"string\") {\n      return modify(base, elementOrModifier);\n    }\n\n    return modify(`${base}__${elementOrModifier}`, modifier);\n  }\n  block.base = base;\n  return block;\n}\n"],"names":["modify","base","modifier","hasOwn","Object","prototype","hasOwnProperty","keys","reduce","s","mod","call","bem","process","env","NODE_ENV","Error","block","elementOrModifier","TypeError"],"mappings":"AAEA,SAASA,OAAOC,IAAY,EAAEC,QAAsB;IAClD,IAAI,CAACA,UAAU;QACb,OAAOD;IACT;IAEA,MAAME,SAASC,OAAOC,SAAS,CAACC,cAAc;IAC9C,OAAOF,OAAOG,IAAI,CAACL,UAAUM,MAAM,CAAC,CAACC,GAAGC;QACtC,IAAIP,OAAOQ,IAAI,CAACT,UAAUQ,QAAQR,QAAQ,CAACQ,IAAI,EAAE;YAC/C,OAAO,GAAGD,EAAE,CAAC,EAAER,KAAK,EAAE,EAAES,KAAK;QAC/B;QAEA,OAAOD;IACT,GAAGR;AACL;AAmDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCC,GACD,OAAO,SAASW,IAAIX,IAAY;IAC9B,IAAIY,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,CAACd,MAAM;YACT,MAAM,IAAIe,MACR;QAEJ;IACF;IAEA,SAASC,MACPC,iBAAwC,EACxChB,QAAsB;QAEtB,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAI,OAAOG,sBAAsB,YAAYhB,UAAU;gBACrD,MAAM,IAAIiB,UACR;YAEJ;QACF;QAEA,IAAI,CAACD,mBAAmB;YACtB,OAAOjB;QACT;QAEA,IAAI,OAAOiB,sBAAsB,UAAU;YACzC,OAAOlB,OAAOC,MAAMiB;QACtB;QAEA,OAAOlB,OAAO,GAAGC,KAAK,EAAE,EAAEiB,mBAAmB,EAAEhB;IACjD;IACAe,MAAMhB,IAAI,GAAGA;IACb,OAAOgB;AACT"}

package/dist/utils/parseCssLengthUnit.js

@@ -22,6 +22,9 @@
     if (typeof value === "number") {
         return value;
     }
+    if (value.includes("calc")) {
+        throw new Error(`Unable to parse a unit with \`calc\`: "${value}"`);
+    }
     const parsed = parseFloat(value);
     if (/px$/i.test(value)) {
         return parsed;

package/dist/utils/parseCssLengthUnit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/parseCssLengthUnit.ts"],"sourcesContent":["/** @internal */\nexport interface ParseCssLengthUnitOptions {\n  /**\n   * The css unit to convert to a numeric value.\n   */\n  value: number | string;\n\n  /**\n   * @defaultValue `16`\n   */\n  fallbackFontSize?: number;\n\n  /**\n   * @defaultValue `document.documentElement`\n   */\n  container?: Element | null;\n}\n\n/**\n * This is used to convert CSS length units into a number. At this time, it really only supports\n * - `px`\n * - `rem`\n * - `em` (if {@link ParseCssLengthUnitOptions.container} is provided)\n *\n * @example Simple Example\n * ```ts\n * parseCssLengthUnit({ value: \"24px\" }) // 24\n * parseCssLengthUnit({ value: \"3.5rem\" }) // 56\n * parseCssLengthUnit({\n *   value: \"3em\",\n *   container: document.querySelector(SOME_QUERY),\n * }); // container's computed fontSize * 3\n * ```\n *\n * @see {@link https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths}\n * @internal\n * @since 6.0.0 This was renamed from `unitToNumber`\n */\nexport function parseCssLengthUnit(options: ParseCssLengthUnitOptions): number {\n  const { value, container, fallbackFontSize = 16 } = options;\n\n  if (typeof value === \"number\") {\n    return value;\n  }\n\n  const parsed = parseFloat(value);\n  if (/px$/i.test(value)) {\n    return parsed;\n  }\n\n  if (typeof window === \"undefined\") {\n    return parsed * fallbackFontSize;\n  }\n\n  const styleContainer =\n    !container || /rem$/i.test(value) ? document.documentElement : container;\n\n  const fontSize = parseFloat(\n    window.getComputedStyle(styleContainer).fontSize || `${fallbackFontSize}px`\n  );\n\n  return parsed * fontSize;\n}\n"],"names":["parseCssLengthUnit","options","value","container","fallbackFontSize","parsed","parseFloat","test","window","styleContainer","document","documentElement","fontSize","getComputedStyle"],"mappings":"AAAA,cAAc,GAkBd;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASA,mBAAmBC,OAAkC;IACnE,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,mBAAmB,EAAE,EAAE,GAAGH;IAEpD,IAAI,OAAOC,UAAU,UAAU;QAC7B,OAAOA;IACT;IAEA,MAAMG,SAASC,WAAWJ;IAC1B,IAAI,OAAOK,IAAI,CAACL,QAAQ;QACtB,OAAOG;IACT;IAEA,IAAI,OAAOG,WAAW,aAAa;QACjC,OAAOH,SAASD;IAClB;IAEA,MAAMK,iBACJ,CAACN,aAAa,QAAQI,IAAI,CAACL,SAASQ,SAASC,eAAe,GAAGR;IAEjE,MAAMS,WAAWN,WACfE,OAAOK,gBAAgB,CAACJ,gBAAgBG,QAAQ,IAAI,GAAGR,iBAAiB,EAAE,CAAC;IAG7E,OAAOC,SAASO;AAClB"}
+{"version":3,"sources":["../../src/utils/parseCssLengthUnit.ts"],"sourcesContent":["/** @internal */\nexport interface ParseCssLengthUnitOptions {\n  /**\n   * The css unit to convert to a numeric value.\n   */\n  value: number | string;\n\n  /**\n   * @defaultValue `16`\n   */\n  fallbackFontSize?: number;\n\n  /**\n   * @defaultValue `document.documentElement`\n   */\n  container?: Element | null;\n}\n\n/**\n * This is used to convert CSS length units into a number. At this time, it really only supports\n * - `px`\n * - `rem`\n * - `em` (if {@link ParseCssLengthUnitOptions.container} is provided)\n *\n * @example Simple Example\n * ```ts\n * parseCssLengthUnit({ value: \"24px\" }) // 24\n * parseCssLengthUnit({ value: \"3.5rem\" }) // 56\n * parseCssLengthUnit({\n *   value: \"3em\",\n *   container: document.querySelector(SOME_QUERY),\n * }); // container's computed fontSize * 3\n * ```\n *\n * @see {@link https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths}\n * @internal\n * @since 6.0.0 This was renamed from `unitToNumber`\n */\nexport function parseCssLengthUnit(options: ParseCssLengthUnitOptions): number {\n  const { value, container, fallbackFontSize = 16 } = options;\n\n  if (typeof value === \"number\") {\n    return value;\n  }\n\n  if (value.includes(\"calc\")) {\n    throw new Error(`Unable to parse a unit with \\`calc\\`: \"${value}\"`);\n  }\n\n  const parsed = parseFloat(value);\n  if (/px$/i.test(value)) {\n    return parsed;\n  }\n\n  if (typeof window === \"undefined\") {\n    return parsed * fallbackFontSize;\n  }\n\n  const styleContainer =\n    !container || /rem$/i.test(value) ? document.documentElement : container;\n\n  const fontSize = parseFloat(\n    window.getComputedStyle(styleContainer).fontSize || `${fallbackFontSize}px`\n  );\n\n  return parsed * fontSize;\n}\n"],"names":["parseCssLengthUnit","options","value","container","fallbackFontSize","includes","Error","parsed","parseFloat","test","window","styleContainer","document","documentElement","fontSize","getComputedStyle"],"mappings":"AAAA,cAAc,GAkBd;;;;;;;;;;;;;;;;;;;CAmBC,GACD,OAAO,SAASA,mBAAmBC,OAAkC;IACnE,MAAM,EAAEC,KAAK,EAAEC,SAAS,EAAEC,mBAAmB,EAAE,EAAE,GAAGH;IAEpD,IAAI,OAAOC,UAAU,UAAU;QAC7B,OAAOA;IACT;IAEA,IAAIA,MAAMG,QAAQ,CAAC,SAAS;QAC1B,MAAM,IAAIC,MAAM,CAAC,uCAAuC,EAAEJ,MAAM,CAAC,CAAC;IACpE;IAEA,MAAMK,SAASC,WAAWN;IAC1B,IAAI,OAAOO,IAAI,CAACP,QAAQ;QACtB,OAAOK;IACT;IAEA,IAAI,OAAOG,WAAW,aAAa;QACjC,OAAOH,SAASH;IAClB;IAEA,MAAMO,iBACJ,CAACR,aAAa,QAAQM,IAAI,CAACP,SAASU,SAASC,eAAe,GAAGV;IAEjE,MAAMW,WAAWN,WACfE,OAAOK,gBAAgB,CAACJ,gBAAgBG,QAAQ,IAAI,GAAGV,iBAAiB,EAAE,CAAC;IAG7E,OAAOG,SAASO;AAClB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "6.0.2",
+  "version": "6.1.0",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -82,21 +82,21 @@
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
     "@microsoft/api-extractor": "^7.52.8",
-    "@mlaursen/eslint-config": "^8.0.0",
+    "@mlaursen/eslint-config": "^8.0.1",
     "@swc/cli": "^0.6.0",
-    "@swc/core": "^1.11.22",
+    "@swc/core": "^1.11.29",
     "@swc/jest": "^0.2.38",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@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.16",
-    "@types/node": "^22.15.18",
+    "@types/lodash": "^4.17.17",
+    "@types/node": "^22.15.29",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "chokidar": "^4.0.3",
-    "eslint": "^9.26.0",
+    "eslint": "^9.28.0",
     "filesize": "^10.1.6",
     "glob": "11.0.2",
     "jest": "^29.7.0",
@@ -106,16 +106,16 @@
     "lz-string": "^1.5.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.5.3",
-    "stylelint": "^16.19.1",
+    "stylelint": "^16.20.0",
     "stylelint-config-prettier-scss": "^1.0.0",
-    "stylelint-config-recommended-scss": "^15.0.0",
+    "stylelint-config-recommended-scss": "^15.0.1",
     "stylelint-order": "^7.0.0",
     "stylelint-scss": "^6.12.0",
-    "ts-morph": "^25.0.1",
+    "ts-morph": "^26.0.0",
     "ts-node": "^10.9.2",
     "tsx": "^4.19.4",
     "typescript": "^5.8.3",
-    "vitest": "^3.1.3"
+    "vitest": "^3.1.4"
   },
   "peerDependencies": {
     "@jest/globals": "^29.7.0",

package/src/app-bar/styles.ts

@@ -199,7 +199,7 @@ export function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {
   const { className, keyline = "small" } = options;
   return cnb(
     titleStyles({
-      keyline: keyline == "list",
+      keyline: keyline === "list",
       "nav-keyline": keyline === "nav",
     }),
     className

package/src/form/TextArea.tsx

@@ -264,7 +264,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
             "--rmd-text-area-height": height,
           }}
           className={textAreaContainer({
-            animate: !disableTransition && resize == "auto",
+            animate: !disableTransition && resize === "auto",
             disabled,
             height: !!height,
             underlineLabelled:

package/src/form/utils.ts

@@ -38,6 +38,7 @@ export function tryToSubmitRelatedForm<E extends HTMLElement>(
     return;
   }
 
+  // eslint-disable-next-line no-param-reassign
   formId = formId || form.id;
   let submit = form.querySelector<HTMLButtonElement>('[type="submit"]');
   if (!submit && formId) {

package/src/interaction/useElementInteraction.tsx

@@ -249,7 +249,7 @@ export function useElementInteraction<E extends HTMLElement>(
   const { pressed } = state;
 
   let ripples: ReactElement | undefined;
-  if (mode == "ripple") {
+  if (mode === "ripple") {
     ripples = (
       <RippleContainer
         ripples={state.ripples}

package/src/layout/LayoutNav.tsx

@@ -140,7 +140,7 @@ export const LayoutNav = forwardRef<HTMLDivElement, LayoutNavProps>(
     const {
       as: Component = "nav",
       "aria-labelledby": ariaLabelledBy,
-      "aria-label": ariaLabel = Component == "nav" && !ariaLabelledBy
+      "aria-label": ariaLabel = Component === "nav" && !ariaLabelledBy
         ? "Navigation"
         : undefined,
       expanded,

package/src/layout/useMainTabIndex.ts

@@ -11,6 +11,7 @@ import { useUserInteractionMode } from "../interaction/UserInteractionModeProvid
 export function useMainTabIndex(tabIndex?: number): number | undefined {
   const keyboard = useUserInteractionMode() === "keyboard";
   if (keyboard && typeof tabIndex === "undefined") {
+    // eslint-disable-next-line no-param-reassign
     tabIndex = -1;
   }
 

package/src/theme/utils.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import { black, white } from "./colors.js";
 
 const RGB_REGEX = /^rgb\(((\b([01]?\d\d?|2[0-4]\d|25[0-5])\b),?){3}\)$/;
@@ -37,7 +38,7 @@ export function hexToRGB(hex: string): RGB {
 
 export function getRGB(color: string): RGB {
   // chrome 102.0.50005.63 apparently has whitespace when calling `window.getComputedStyle(element)`
-  // remove whitepsace to make it easy for supporting rgb or hex
+  // remove whitespace to make it easy for supporting rgb or hex
   color = color.replace(/\s/g, "");
   const rgbMatches = color.match(RGB_REGEX);
   if (rgbMatches) {

package/src/utils/bem.ts

@@ -8,7 +8,7 @@ function modify(base: string, modifier?: BEMModifier): string {
   const hasOwn = Object.prototype.hasOwnProperty;
   return Object.keys(modifier).reduce((s, mod) => {
     if (hasOwn.call(modifier, mod) && modifier[mod]) {
-      s = `${s} ${base}--${mod}`;
+      return `${s} ${base}--${mod}`;
     }
 
     return s;

package/src/utils/parseCssLengthUnit.ts

@@ -43,6 +43,10 @@ export function parseCssLengthUnit(options: ParseCssLengthUnitOptions): number {
     return value;
   }
 
+  if (value.includes("calc")) {
+    throw new Error(`Unable to parse a unit with \`calc\`: "${value}"`);
+  }
+
   const parsed = parseFloat(value);
   if (/px$/i.test(value)) {
     return parsed;