@react-md/core 6.3.0 → 6.3.1

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\n/**\n * @since 6.0.0\n */\nexport interface WindowSplitterClassNameOptions {\n  className?: string;\n  dragging?: boolean;\n  reversed?: boolean;\n  vertical?: boolean;\n  disableFixed?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function windowSplitter(\n  options: WindowSplitterClassNameOptions = {}\n): string {\n  const {\n    vertical = false,\n    dragging,\n    reversed,\n    disableFixed,\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      h: !vertical,\n      hr: !vertical && reversed,\n      v: vertical,\n      vr: vertical && reversed,\n      a: disableFixed,\n      dragging,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","windowSplitter","options","vertical","dragging","reversed","disableFixed","className","h","hr","v","vr","a"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAanB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EACJC,WAAW,KAAK,EAChBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZC,SAAS,EACV,GAAGL;IAEJ,OAAOJ,IACLE,OAAO;QACLQ,GAAG,CAACL;QACJM,IAAI,CAACN,YAAYE;QACjBK,GAAGP;QACHQ,IAAIR,YAAYE;QAChBO,GAAGN;QACHF;IACF,IACAG;AAEJ"}
+{"version":3,"sources":["../../src/window-splitter/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-window-splitter\");\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-window-splitter-size\"?: string | number;\n    \"--rmd-window-splitter-background-size\"?: string | number;\n    \"--rmd-window-splitter-x\"?: string | number;\n    \"--rmd-window-splitter-y\"?: string | number;\n    \"--rmd-window-splitter-z\"?: string | number;\n    \"--rmd-window-splitter-position\"?: string | number;\n    \"--rmd-window-splitter-backgrond-color\"?: string;\n    \"--rmd-window-splitter-opacity\"?: string | number;\n  }\n}\n\n/**\n * @since 6.3.1\n */\nexport interface BaseWindowSplitterClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the window splitter should use `position: absolute`\n   * instead of `position: fixed`.\n   *\n   * @defaultValue `false`\n   */\n  disableFixed?: boolean;\n}\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends BaseWindowSplitterClassNameOptions\n */\nexport interface WindowSplitterClassNameOptions\n  extends BaseWindowSplitterClassNameOptions {\n  dragging?: boolean;\n  reversed?: boolean;\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function windowSplitter(\n  options: WindowSplitterClassNameOptions = {}\n): string {\n  const {\n    vertical = false,\n    dragging,\n    reversed,\n    disableFixed,\n    className,\n  } = options;\n\n  return cnb(\n    styles({\n      h: !vertical,\n      hr: !vertical && reversed,\n      v: vertical,\n      vr: vertical && reversed,\n      a: disableFixed,\n      dragging,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","windowSplitter","options","vertical","dragging","reversed","disableFixed","className","h","hr","v","vr","a"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAyCnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EACJC,WAAW,KAAK,EAChBC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZC,SAAS,EACV,GAAGL;IAEJ,OAAOJ,IACLE,OAAO;QACLQ,GAAG,CAACL;QACJM,IAAI,CAACN,YAAYE;QACjBK,GAAGP;QACHQ,IAAIR,YAAYE;QAChBO,GAAGN;QACHF;IACF,IACAG;AAEJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -84,19 +84,19 @@
     "@microsoft/api-extractor": "^7.52.8",
     "@mlaursen/eslint-config": "^8.0.1",
     "@swc/cli": "^0.6.0",
-    "@swc/core": "^1.11.29",
-    "@swc/jest": "^0.2.38",
+    "@swc/core": "^1.12.11",
+    "@swc/jest": "^0.2.39",
     "@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.17",
+    "@types/lodash": "^4.17.20",
     "@types/node": "^22.15.29",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "chokidar": "^4.0.3",
-    "eslint": "^9.29.0",
+    "eslint": "^9.30.1",
     "filesize": "^10.1.6",
     "glob": "11.0.3",
     "jest": "^29.7.0",
@@ -105,8 +105,8 @@
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.5.3",
-    "stylelint": "^16.20.0",
+    "prettier": "^3.6.2",
+    "stylelint": "^16.21.1",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-recommended-scss": "^15.0.1",
     "stylelint-order": "^7.0.0",
@@ -115,7 +115,7 @@
     "ts-node": "^10.9.2",
     "tsx": "^4.20.3",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.3"
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@jest/globals": "^29.7.0",

package/src/app-bar/styles.ts

@@ -8,8 +8,6 @@ import { bem } from "../utils/bem.js";
 declare module "react" {
   interface CSSProperties {
     "--rmd-app-bar-height"?: string | number;
-    "--rmd-app-bar-background-color"?: string;
-    "--rmd-app-bar-color"?: string;
     "--rmd-app-bar-surface-background-color"?: string;
     "--rmd-app-bar-surface-color"?: string;
   }

package/src/autocomplete/types.ts

@@ -37,6 +37,23 @@ import {
   type UseStateInitializer,
 } from "../types.js";
 
+// NOTE: The augmentation appears in this file since both
+// the `Autocomplete` and `autocompleteStyles` import this
+// file. The augmentation only works if a type definition
+// exists in the compiled `*.d.ts`
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-autocomplete-clear-button-size"?: string;
+    "--rmd-autocomplete-dropdown-button-size"?: string;
+    "--rmd-autocomplete-circular-progress-size"?: string;
+    "--rmd-autocomplete-inline-gap"?: string;
+    "--rmd-autocomplete-inline-min-width"?: string;
+    "--rmd-autocomplete-addon-gap"?: string;
+    "--rmd-autocomplete-gap-count"?: string;
+    "--rmd-autocomplete-addon-spacing"?: string;
+  }
+}
+
 /**
  * If a autocomplete value is one of these types, no additional code is required
  * to display a label in the input/chip for the autocomplete once the value has

package/src/avatar/Avatar.tsx

@@ -8,17 +8,6 @@ import {
 import { type PropsWithRef } from "../types.js";
 import { type AvatarClassNameOptions, avatar, avatarImage } from "./styles.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-avatar-background-color"?: string;
-    "--rmd-avatar-color"?: string;
-    "--rmd-avatar-border-color"?: string;
-    "--rmd-avatar-border-radius"?: string | number;
-    "--rmd-avatar-size"?: string | number;
-    "--rmd-avatar-font-size"?: string | number;
-  }
-}
-
 export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
 
 /**

package/src/avatar/styles.ts

@@ -4,6 +4,17 @@ import { type ThemeColor, cssUtils } from "../cssUtils.js";
 import { type OverridableStringUnion } from "../types.js";
 import { bem } from "../utils/bem.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-avatar-background-color"?: string;
+    "--rmd-avatar-color"?: string;
+    "--rmd-avatar-border-color"?: string;
+    "--rmd-avatar-border-radius"?: string | number;
+    "--rmd-avatar-size"?: string | number;
+    "--rmd-avatar-font-size"?: string | number;
+  }
+}
+
 const styles = bem("rmd-avatar");
 
 /**

package/src/badge/Badge.tsx

@@ -2,6 +2,18 @@ import { type HTMLAttributes, type ReactNode, forwardRef } from "react";
 
 import { type BadgeTheme, badge } from "./styles.js";
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-badge-border-radius"?: string | number;
+    "--rmd-badge-greyscale-background-color"?: string;
+    "--rmd-badge-greyscale-color"?: string;
+    "--rmd-badge-size"?: string | number;
+    "--rmd-badge-offset"?: string | number;
+    "--rmd-badge-offset-top"?: string | number;
+    "--rmd-badge-offset-right"?: string | number;
+  }
+}
+
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
   /** @defaultValue `"greyscale"` */
   theme?: BadgeTheme;

package/src/badge/styles.ts

@@ -3,15 +3,6 @@ import { cnb } from "cnbuilder";
 import { type BackgroundColor, cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-badge-size"?: string | number;
-    "--rmd-badge-offset"?: string | number;
-    "--rmd-badge-offset-top"?: string | number;
-    "--rmd-badge-offset-right"?: string | number;
-  }
-}
-
 const styles = bem("rmd-badge");
 
 /**

package/src/box/styles.ts

@@ -11,16 +11,25 @@ declare module "react" {
   interface CSSProperties {
     "--rmd-box-gap"?: string | number;
     "--rmd-box-padding"?: string | number;
+    "--rmd-box-padding-h"?: string | number;
+    "--rmd-box-padding-v"?: string | number;
     "--rmd-box-item-min-size"?: string | number;
+    "--rmd-box-item-min-height"?: string | number;
     "--rmd-box-columns"?: string | number;
+    "--rmd-box-row-max-height"?: string;
+    "--rmd-box-auto-rows-height"?: string;
     "--rmd-box-phone-columns"?: number | string;
+    "--rmd-box-phone-item-min-height"?: number | string;
     "--rmd-box-phone-item-min-size"?: number | string;
     "--rmd-box-tablet-columns"?: number | string;
     "--rmd-box-tablet-item-min-size"?: number | string;
+    "--rmd-box-tablet-item-min-height"?: number | string;
     "--rmd-box-desktop-columns"?: number | string;
     "--rmd-box-desktop-item-min-size"?: number | string;
+    "--rmd-box-desktop-item-min-height"?: number | string;
     "--rmd-box-large-desktop-columns"?: number | string;
     "--rmd-box-large-desktop-item-min-size"?: number | string;
+    "--rmd-box-large-desktop-item-min-height"?: number | string;
   }
 }
 

package/src/button/styles.ts

@@ -19,8 +19,12 @@ declare module "react" {
     "--rmd-button-text-vertical-padding"?: string | number;
     "--rmd-button-text-min-height"?: string | number;
     "--rmd-button-text-min-width"?: string | number;
+    "--rmd-button-text-border-radius"?: string | number;
     "--rmd-button-icon-size"?: string | number;
-    "--rmd-button-icon-radius"?: string | number;
+    "--rmd-button-icon-padding"?: string | number;
+    "--rmd-button-icon-font-size"?: string | number;
+    "--rmd-button-icon-border-radius"?: string | number;
+    "--rmd-button-icon-square-border-radius"?: string | number;
   }
 }
 

package/src/card/Card.tsx

@@ -4,14 +4,6 @@ import { Box } from "../box/Box.js";
 import { type BoxAlignItems, type BoxOptions } from "../box/styles.js";
 import { type CardClassNameOptions, card } from "./styles.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-card-background-color"?: string;
-    "--rmd-card-color"?: string;
-    "--rmd-card-secondary-color"?: string;
-  }
-}
-
 /**
  * @since 6.0.0 Extends the {@link CardClassNameOptions} and removed the
  * deprecated `raiseable` prop

package/src/card/styles.ts

@@ -3,7 +3,14 @@ import { cnb } from "cnbuilder";
 import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 
-const cardStyles = bem("rmd-card");
+const styles = bem("rmd-card");
+
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-card-background-color"?: string;
+    "--rmd-card-color"?: string;
+  }
+}
 
 /** @since 6.0.0 */
 export interface CardClassNameOptions {
@@ -42,7 +49,7 @@ export function card(options: CardClassNameOptions = {}): string {
   const { className, bordered, raisable, interactable } = options;
 
   return cnb(
-    cardStyles({
+    styles({
       bordered,
       shadowed: !bordered,
       raisable: !bordered && raisable,
@@ -70,7 +77,7 @@ export function cardHeader(options: CardHeaderClassNameOptions = {}): string {
   const { className, addonAfter = false, addonBefore = false } = options;
 
   return cnb(
-    cardStyles("header", {
+    styles("header", {
       "addon-after": addonAfter && !addonBefore,
       "addon-before": addonBefore && !addonAfter,
       surrounded: addonAfter && addonBefore,
@@ -92,7 +99,7 @@ export function cardHeaderContent(
 ): string {
   const { className } = options;
 
-  return cnb(cardStyles("header-content"), className);
+  return cnb(styles("header-content"), className);
 }
 
 /** @since 6.0.0 */
@@ -106,7 +113,7 @@ export interface CardTitleClassNameOptions {
 export function cardTitle(options: CardTitleClassNameOptions = {}): string {
   const { className } = options;
 
-  return cnb(cardStyles("title"), className);
+  return cnb(styles("title"), className);
 }
 
 /** @since 6.0.0 */
@@ -122,7 +129,7 @@ export function cardSubtitle(
 ): string {
   const { className } = options;
 
-  return cnb(cardStyles("subtitle"), className);
+  return cnb(styles("subtitle"), className);
 }
 
 /** @since 6.0.0 */
@@ -165,7 +172,7 @@ export function cardContent(options: CardContentClassNameOptions = {}): string {
   } = options;
 
   return cnb(
-    cardStyles("content", {
+    styles("content", {
       padded: !disablePadding,
       "padding-bottom": !disableLastChildPadding,
     }),
@@ -187,5 +194,5 @@ export interface CardFooterClassNameOptions {
 export function cardFooter(options: CardFooterClassNameOptions = {}): string {
   const { className } = options;
 
-  return cnb(cardStyles("footer"), className);
+  return cnb(styles("footer"), className);
 }

package/src/chip/Chip.tsx

@@ -14,33 +14,27 @@ import { getIcon } from "../icon/config.js";
 import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { useElementInteraction } from "../interaction/useElementInteraction.js";
 import { useHigherContrastChildren } from "../interaction/useHigherContrastChildren.js";
-import { useMaxWidthTransition } from "../transition/useMaxWidthTransition.js";
+import {
+  type BaseMaxWidthTransitionOptions,
+  useMaxWidthTransition,
+} from "../transition/useMaxWidthTransition.js";
 import { type PropsWithRef } from "../types.js";
-import { chip, chipContent } from "./styles.js";
-
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-chip-solid-background-color"?: string;
-    "--rmd-chip-solid-disabled-background-color"?: string;
-    "--rmd-chip-solid-color"?: string;
-    "--rmd-chip-theme-background-color"?: string;
-    "--rmd-chip-theme-color"?: string;
-    "--rmd-chip-outline-background-color"?: string;
-    "--rmd-chip-outline-color"?: string;
-  }
-}
+import { type ChipTheme, chip, chipContent } from "./styles.js";
 
 /**
  * @since 6.0.0 Renamed the `noninteractive` prop to
  * `noninteractable`.
+ * @since 6.3.1 Extends BaseMaxWidthTransitionOptions for CSSProperties module
+ * augmentation.
  */
 export interface ChipProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
+    BaseMaxWidthTransitionOptions,
     ComponentWithRippleProps {
   /**
    * @defaultValue `"solid"`
    */
-  theme?: "outline" | "solid";
+  theme?: ChipTheme;
 
   /**
    * Set this to `true` if the chip should gain additional box shadow while the

package/src/chip/styles.ts

@@ -5,6 +5,30 @@ import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-chip");
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-chip-gap"?: string;
+    "--rmd-chip-height"?: string;
+    "--rmd-chip-border-radius"?: string | number;
+    "--rmd-chip-horizontal-padding"?: string | number;
+    "--rmd-chip-vertical-padding"?: string | number;
+    "--rmd-chip-solid-background-color"?: string;
+    "--rmd-chip-solid-disabled-background-color"?: string;
+    "--rmd-chip-solid-color"?: string;
+    "--rmd-chip-theme-background-color"?: string;
+    "--rmd-chip-theme-color"?: string;
+    "--rmd-chip-outline-color"?: string;
+    "--rmd-chip-outline-width"?: string | number;
+    "--rmd-chip-outline-background-color"?: string;
+    "--rmd-chip-outline-text-color"?: string;
+  }
+}
+
+/**
+ * @since 6.3.1
+ */
+export type ChipTheme = "outline" | "solid";
+
 /**
  * @since 6.0.0
  *
@@ -39,10 +63,14 @@ const styles = bem("rmd-chip");
  */
 export interface ChipClassNameOptions {
   className?: string;
+
+  /**
+   * An optional className to provide only while {@link selected} is `true`.
+   */
   selectedClassName?: string;
 
   /** @defaultValue `"solid"` */
-  theme?: "outline" | "solid";
+  theme?: ChipTheme;
 
   backgroundColor?: BackgroundColor;
 

package/src/dialog/styles.ts

@@ -9,8 +9,6 @@ import { DISPLAY_NONE_CLASS } from "../utils/isElementVisible.js";
 
 declare module "react" {
   interface CSSProperties {
-    "--rmd-dialog-background-color"?: string;
-    "--rmd-dialog-color"?: string;
     "--rmd-dialog-min-width"?: string | number;
     "--rmd-dialog-horizontal-margin"?: string | number;
     "--rmd-dialog-vertical-margin"?: string | number;
@@ -19,6 +17,11 @@ declare module "react" {
     "--rmd-dialog-header-padding-bottom"?: string | number;
     "--rmd-dialog-content-padding"?: string | number;
     "--rmd-dialog-footer-padding"?: string | number;
+    "--rmd-dialog-width"?: string | number;
+    "--rmd-dialog-small-width"?: string | number;
+    "--rmd-dialog-medium-width"?: string | number;
+    "--rmd-dialog-large-width"?: string | number;
+    "--rmd-dialog-extra-large-width"?: string | number;
   }
 }
 

package/src/divider/styles.ts

@@ -5,7 +5,7 @@ import { bem } from "../utils/bem.js";
 declare module "react" {
   interface CSSProperties {
     "--rmd-divider-size"?: string | number;
-    "--rmd-divider-vertical-size"?: string | number;
+    "--rmd-divider-border-size"?: string | number;
     "--rmd-divider-color"?: string;
     "--rmd-divider-spacing"?: string | number;
     "--rmd-divider-vertical-spacing"?: string | number;

package/src/form/InputToggle.tsx

@@ -18,6 +18,8 @@ import { FormMessageContainer } from "./FormMessageContainer.js";
 import { InputToggleIcon } from "./InputToggleIcon.js";
 import { Label } from "./Label.js";
 import { type InputToggleSize } from "./inputToggleStyles.js";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { type LabelClassNameOptions } from "./types.js";
 import {
   type FormComponentStates,
   type FormMessageContainerExtension,

package/src/form/Label.tsx

@@ -3,17 +3,6 @@ import { forwardRef } from "react";
 import { label } from "./labelStyles.js";
 import { type LabelProps } from "./types.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-label-floating-x"?: string | number;
-    "--rmd-label-floating-y"?: string | number;
-    "--rmd-label-floating-active-x"?: string | number;
-    "--rmd-label-floating-active-y"?: string | number;
-    "--rmd-label-active-padding"?: string | number;
-    "--rmd-label-active-background-color"?: string;
-  }
-}
-
 /**
  * Most of the form components already use this `Label` internally when a
  * `label` prop has been provided. You should generally use this component if

package/src/form/Slider.tsx

@@ -33,6 +33,8 @@ import { type RangeSliderState } from "./useRangeSlider.js";
 import { type SliderState, type SliderValueOptions } from "./useSlider.js";
 import { useSliderDraggable } from "./useSliderDraggable.js";
 
+// NOTE: The augmentation appears in this file since no type definitions are
+// ever imported from the `sliderStyles` file.
 declare module "react" {
   interface CSSProperties {
     "--rmd-slider-color"?: string;
@@ -47,6 +49,10 @@ declare module "react" {
     "--rmd-slider-tooltip-scale"?: string | number;
     "--rmd-slider-tooltip-translate"?: string | number;
     "--rmd-slider-mark-offset"?: string;
+    "--rmd-slider-mark-active-color"?: string;
+    "--rmd-slider-mark-active-opacity"?: string | number;
+    "--rmd-slider-mark-inactive-color"?: string;
+    "--rmd-slider-mark-inactive-opacity"?: string | number;
   }
 }
 

package/src/form/Switch.tsx

@@ -19,6 +19,8 @@ import {
   type FormMessageContainerExtension,
 } from "./types.js";
 
+// NOTE: The augmentation appears in this file since no type definitions are
+// ever imported from the `switchStyles` file.
 declare module "react" {
   interface CSSProperties {
     "--rmd-switch-track-background-color"?: string;

package/src/form/TextArea.tsx

@@ -22,6 +22,8 @@ import {
   useResizingTextArea,
 } from "./useResizingTextArea.js";
 
+// NOTE: The augmentation appears in this file since no type definitions are
+// ever imported from the `textAreaStylesStyles` file.
 declare module "react" {
   interface CSSProperties {
     "--rmd-text-area-height"?: string | number;

package/src/form/TextFieldContainer.tsx

@@ -7,20 +7,6 @@ import { getFormConfig } from "./formConfig.js";
 import { textFieldContainer } from "./textFieldContainerStyles.js";
 import { type TextFieldContainerOptions } from "./types.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-text-field-height"?: string | number;
-    "--rmd-text-field-padding-left"?: string | number;
-    "--rmd-text-field-padding-right"?: string | number;
-    "--rmd-text-field-padding-top"?: string | number;
-    "--rmd-text-field-border-color"?: string;
-    "--rmd-text-field-hover-border-color"?: string;
-    "--rmd-text-field-filled-color"?: string;
-    "--rmd-form-addon-top"?: string | number;
-    "--rmd-form-addon-margin-top"?: string | number;
-  }
-}
-
 export interface TextFieldContainerProps
   extends HTMLAttributes<HTMLDivElement>,
     TextFieldContainerOptions {

package/src/form/types.ts

@@ -12,6 +12,35 @@ declare module "react" {
   interface CSSProperties {
     "--rmd-form-active-color"?: string;
     "--rmd-form-focus-color"?: string;
+
+    // NOTE: The label properties are in this file since all label types are
+    // in this file. If they are able to be moved to labelStyles or Label and
+    // the compiled `.d.ts` includes the types from those files, this can be
+    // moved.
+    "--rmd-label-floating-x"?: string | number;
+    "--rmd-label-floating-y"?: string | number;
+    "--rmd-label-floating-active-x"?: string | number;
+    "--rmd-label-floating-active-y"?: string | number;
+    "--rmd-label-active-padding"?: string | number;
+    "--rmd-label-active-background-color"?: string;
+
+    // NOTE: The text field properties are in this file since there are no
+    // typedefs included from `TextFieldContainer` or
+    // `textFieldContainerStyles`.
+    "--rmd-text-field-addon-top"?: string | number;
+    "--rmd-text-field-addon-spacing"?: string | number;
+    "--rmd-text-field-addon-margin-top"?: string | number;
+    "--rmd-text-field-addon-left-offset"?: string | number;
+    "--rmd-text-field-height"?: string | number;
+    "--rmd-text-field-padding-left"?: string | number;
+    "--rmd-text-field-padding-right"?: string | number;
+    "--rmd-text-field-padding-top"?: string | number;
+    "--rmd-text-field-border-color"?: string;
+    "--rmd-text-field-hover-border-color"?: string;
+    "--rmd-text-field-filled-color"?: string;
+    "--rmd-text-field-filled-padding"?: string | number;
+    "--rmd-text-field-outlined-padding"?: string | number;
+    "--rmd-text-field-underlined-padding"?: string | number;
   }
 }
 

package/src/interaction/types.ts

@@ -8,7 +8,6 @@ import type {
 
 declare module "react" {
   interface CSSProperties {
-    "--rmd-ripple-background-color"?: string;
     "--rmd-interaction-background-color"?: string;
     "--rmd-hover-background-color"?: string;
     "--rmd-focus-background-color"?: string;
@@ -16,6 +15,11 @@ declare module "react" {
     "--rmd-selected-background-color"?: string;
     "--rmd-focus-color"?: string;
     "--rmd-focus-width"?: string | number;
+    "--rmd-ripple-inset"?: string | number;
+    "--rmd-ripple-border-radius"?: string | number;
+    "--rmd-ripple-background-color"?: string;
+    "--rmd-surface-inset"?: string | number;
+    "--rmd-surface-border-radius"?: string | number;
   }
 }
 

package/src/link/Link.tsx

@@ -6,14 +6,6 @@ import {
 
 import { type LinkClassNameOptions, link } from "./styles.js";
 
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-link-color"?: string;
-    "--rmd-link-visited-color"?: string;
-    "--rmd-link-hover-color"?: string;
-  }
-}
-
 /**
  * @since 6.0.0
  */

package/src/link/styles.ts

@@ -4,6 +4,14 @@ import { bem } from "../utils/bem.js";
 
 const styles = bem("rmd-link");
 
+declare module "react" {
+  interface CSSProperties {
+    "--rmd-link-color"?: string;
+    "--rmd-link-visited-color"?: string;
+    "--rmd-link-hover-color"?: string;
+  }
+}
+
 /** @since 6.0.0 */
 export interface LinkClassNameOptions {
   className?: string;

package/src/list/List.tsx

@@ -1,30 +1,20 @@
 import { type HTMLAttributes, forwardRef } from "react";
 
-import { list } from "./listStyles.js";
-
-declare module "react" {
-  interface CSSProperties {
-    "--rmd-list-padding-h"?: string | number;
-    "--rmd-list-padding-v"?: string | number;
-  }
-}
+import { type ListClassNameOptions, list } from "./listStyles.js";
 
 export type ListElement = HTMLUListElement | HTMLOListElement;
 
-export interface ListProps extends HTMLAttributes<ListElement> {
+/**
+ * @since 6.3.1 Extends the ListClassNameOptions
+ */
+export interface ListProps
+  extends HTMLAttributes<ListElement>,
+    ListClassNameOptions {
   /**
    * @defaultValue `"none"`
    */
   role?: HTMLAttributes<ListElement>["role"];
 
-  /**
-   * Set to `true` to decrease the amount of padding and font size within the
-   * list.
-   *
-   * @defaultValue `false`
-   */
-  dense?: boolean;
-
   /**
    * Set this to `true` to render as `<ol>` instead of `<ul>` when the children
    * are in a specific order. For example: steps within a recipe.
@@ -32,13 +22,6 @@ export interface ListProps extends HTMLAttributes<ListElement> {
    * @defaultValue `false`
    */
   ordered?: boolean;
-
-  /**
-   * Set this to `true` to render horizontally instead of vertically.
-   *
-   * @defaultValue `false`
-   */
-  horizontal?: boolean;
 }
 
 /**