@windmorph/react 0.2.2 → 0.2.4

package/dist/index.js

@@ -14,6 +14,7 @@ import { cn, twMergeConfig } from "./utils/cn.js";
 import { ThemeScope } from "./theme/ThemeScope.js";
 import { ThemeScript, getThemeScriptSource } from "./theme/ThemeScript.js";
 import { createTheme } from "./theme/create-theme.js";
+import { LabelsProvider } from "./components/labels/LabelsProvider.js";
 import { getM3Spring } from "./motion/get-m3-spring.js";
 import { useM3Spring } from "./motion/use-m3-spring.js";
 import { tv } from "./utils/tv.js";
@@ -28,9 +29,9 @@ import { TooltipTrigger } from "./components/tooltip/tooltip-trigger.js";
 import { iconButtonStyles } from "./components/icon-button/icon-button-styles.js";
 import { IconButton } from "./components/icon-button/IconButton.js";
 import { iconButtonTokenSet } from "./components/icon-button/icon-button-tokens.js";
-import { buttonGroupStyles } from "./composites/button-group/button-group-styles.js";
+import { buttonGroupStyles } from "./components/button-group/button-group-styles.js";
 import { ContextMenuTrigger, MenuTrigger } from "./components/menu/menu-trigger.js";
-import { ButtonGroup } from "./composites/button-group/ButtonGroup.js";
+import { ButtonGroup } from "./components/button-group/ButtonGroup.js";
 import { extendedFabStyles, fabStyles } from "./components/fab/fab-styles.js";
 import { ExtendedFab, Fab } from "./components/fab/Fab.js";
 import { extendedFabTokenSet, fabTokenSet } from "./components/fab/fab-tokens.js";
@@ -136,4 +137,4 @@ import { TimePicker, TimePickerModeToggle, useTimePickerRoom } from "./component
 import { TimeField } from "./components/time-picker/TimeField.js";
 import { timePickerTokenSet } from "./components/time-picker/time-picker-tokens.js";
 import { Time, parseTime } from "@internationalized/date";
-export { AssistChip, Autocomplete, AutocompleteItem, AutocompleteSection, BREAKPOINTS, BREAKPOINT_NAMES, BUILT_IN_THEMES, BUILT_IN_THEME_NAMES, Badge, BadgedBox, BottomSheet, Button, ButtonContext, ButtonGroup, COLOR_MODES, COLOR_ROLES, CONTRAST_LEVELS, CONTRAST_LEVEL_NAMES, CORNERS, CORNER_NAMES, CUSTOM_COLORS, CUSTOM_COLOR_ROLES, Card, Carousel, Checkbox, ChipSet, CircularProgressIndicator, ContextMenuTrigger, DEFAULT_CUSTOM_COLORS, DEFAULT_DENSITY, DEFAULT_MOTION_SCHEME, DEFAULT_STORAGE_KEY, DEFAULT_THEME, DEFAULT_THEME_STATE, DENSITIES, DateField, DatePicker, DateRangePicker, Dialog, DialogActions, DialogContent, DialogHeader, DialogTitle, DialogTrigger, Divider, DockedToolbar, ELEVATION_LEVELS, ELEVATION_LEVEL_NAMES, ExtendedFab, FOCUS_INDICATOR, Fab, FabMenu, FabMenuItem, FilterChip, FloatingToolbar, IconButton, InputChip, LEGACY_DURATIONS, LEGACY_EASINGS, LabeledDivider, LinearProgressIndicator, List, ListItem, ListItemAvatar, ListItemImage, ListItemVideo, ListSection, LoadingIndicator, MOTION_SCHEMES, Menu, MenuGroup, MenuItem, MenuTrigger, NavigationBar, NavigationBarItem, NavigationRail, NavigationRailItem, OptionPopover, PALETTE_NAMES, PickerDialog, PullToRefresh, Radio, RadioGroup, RangeSlider, RichTooltip, RichTooltipTrigger, SCHEME_VARIANTS, SHADOW_AMBIENT_OPACITY, SHADOW_KEY_OPACITY, SPRINGS, SPRING_FAMILIES, SPRING_SPEEDS, SPRING_TOKEN_NAMES, STATE_OPACITIES, SearchAppBar, SearchBar, SearchField, Select, SelectItem, SelectSection, SheetTrigger, SideSheet, Slider, Snackbar, SnackbarHost, SnackbarHostState, SplitButton, SubmenuTrigger, SuggestionChip, Switch, TYPEFACES, TYPE_ROLES, TYPE_SCALE, Tab, Tabs, TextField, ThemeProvider, ThemeScope, ThemeScript, Time, TimeField, TimePicker, TimePickerModeToggle, ToggleGroupStateContext, ToolbarFab, Tooltip, TooltipPlacementContext, TooltipTrigger, TopAppBar, Z_INDEX, appBarTokenSet, assistChipTokenSet, badgeStyles, badgeTokenSet, badgedBoxStyles, bottomSheetStyles, bottomSheetTokenSet, buttonGroupStyles, buttonStyles, buttonTokenSet, buttonVariantClasses, cardStyles, cardTokenSet, carouselStyles, carouselTokenSet, checkboxStyles, checkboxTokenSet, chipSetStyles, chipStyles, circularProgressStyles, cn, color, colorAt, componentTokenList, componentTokensCss, corner, createTheme, datePickerStyles, datePickerTokenSet, defineComponentTokens, densityAttribute, dialogStyles, dialogTokenSet, dividerStyles, dividerTokenSet, dockedDatePickerStyles, dockedToolbarStyles, dockedToolbarTokenSet, elevation, extendedFabStyles, extendedFabTokenSet, fabMenuStyles, fabMenuTokenSet, fabStyles, fabTokenSet, filterChipTokenSet, floatingToolbarStyles, floatingToolbarTokenSet, getM3Spring, getThemeScriptSource, iconButtonStyles, iconButtonTokenSet, inputChipTokenSet, isComponentTokenSet, isDensity, labeledDividerStyles, linearProgressStyles, listMediaStyles, listStyles, listTokenSet, loadingIndicatorStyles, loadingIndicatorTokenSet, matchesSearch, menuStyles, menuTokenSet, navBarTokenSet, navItemStyles, navRailTokenSet, navigationBarStyles, navigationRailStyles, normalizeSearch, parseThemeState, parseTime, pickerDialogStyles, plainTooltipTokenSet, progressIndicatorTokenSet, pullToRefreshStyles, px, radioGroupStyles, radioStyles, radioTokenSet, richTooltipStyles, richTooltipTokenSet, searchAppBarStyles, searchBarStyles, searchBarTokenSet, searchFieldStyles, searchViewTokenSet, serializeThemeState, sideSheetStyles, sideSheetTokenSet, sliderStyles, sliderTokenSet, snackbarHostStyles, snackbarStyles, snackbarTokenSet, splitButtonStyles, splitButtonTokenSet, spring, springPosition, springSettleDuration, springToLinearEasing, suggestionChipTokenSet, switchStyles, switchTokenSet, tabsStyles, tabsTokenSet, textFieldStyles, textFieldTokenSet, themeAttributes, timePickerStyles, timePickerTokenSet, toMotionSpring, toolbarFabStyles, toolbarFabTokenSet, tooltipStyles, topAppBarStyles, tv, twMergeConfig, typeTokens, typescale, useM3Spring, useNavigationRail, useSnackbarHostState, useTheme, useThemeScope, useTimePickerRoom, useToolbarScrollExit, useToolbarScrollExpansion };
+export { AssistChip, Autocomplete, AutocompleteItem, AutocompleteSection, BREAKPOINTS, BREAKPOINT_NAMES, BUILT_IN_THEMES, BUILT_IN_THEME_NAMES, Badge, BadgedBox, BottomSheet, Button, ButtonContext, ButtonGroup, COLOR_MODES, COLOR_ROLES, CONTRAST_LEVELS, CONTRAST_LEVEL_NAMES, CORNERS, CORNER_NAMES, CUSTOM_COLORS, CUSTOM_COLOR_ROLES, Card, Carousel, Checkbox, ChipSet, CircularProgressIndicator, ContextMenuTrigger, DEFAULT_CUSTOM_COLORS, DEFAULT_DENSITY, DEFAULT_MOTION_SCHEME, DEFAULT_STORAGE_KEY, DEFAULT_THEME, DEFAULT_THEME_STATE, DENSITIES, DateField, DatePicker, DateRangePicker, Dialog, DialogActions, DialogContent, DialogHeader, DialogTitle, DialogTrigger, Divider, DockedToolbar, ELEVATION_LEVELS, ELEVATION_LEVEL_NAMES, ExtendedFab, FOCUS_INDICATOR, Fab, FabMenu, FabMenuItem, FilterChip, FloatingToolbar, IconButton, InputChip, LEGACY_DURATIONS, LEGACY_EASINGS, LabeledDivider, LabelsProvider, LinearProgressIndicator, List, ListItem, ListItemAvatar, ListItemImage, ListItemVideo, ListSection, LoadingIndicator, MOTION_SCHEMES, Menu, MenuGroup, MenuItem, MenuTrigger, NavigationBar, NavigationBarItem, NavigationRail, NavigationRailItem, OptionPopover, PALETTE_NAMES, PickerDialog, PullToRefresh, Radio, RadioGroup, RangeSlider, RichTooltip, RichTooltipTrigger, SCHEME_VARIANTS, SHADOW_AMBIENT_OPACITY, SHADOW_KEY_OPACITY, SPRINGS, SPRING_FAMILIES, SPRING_SPEEDS, SPRING_TOKEN_NAMES, STATE_OPACITIES, SearchAppBar, SearchBar, SearchField, Select, SelectItem, SelectSection, SheetTrigger, SideSheet, Slider, Snackbar, SnackbarHost, SnackbarHostState, SplitButton, SubmenuTrigger, SuggestionChip, Switch, TYPEFACES, TYPE_ROLES, TYPE_SCALE, Tab, Tabs, TextField, ThemeProvider, ThemeScope, ThemeScript, Time, TimeField, TimePicker, TimePickerModeToggle, ToggleGroupStateContext, ToolbarFab, Tooltip, TooltipPlacementContext, TooltipTrigger, TopAppBar, Z_INDEX, appBarTokenSet, assistChipTokenSet, badgeStyles, badgeTokenSet, badgedBoxStyles, bottomSheetStyles, bottomSheetTokenSet, buttonGroupStyles, buttonStyles, buttonTokenSet, buttonVariantClasses, cardStyles, cardTokenSet, carouselStyles, carouselTokenSet, checkboxStyles, checkboxTokenSet, chipSetStyles, chipStyles, circularProgressStyles, cn, color, colorAt, componentTokenList, componentTokensCss, corner, createTheme, datePickerStyles, datePickerTokenSet, defineComponentTokens, densityAttribute, dialogStyles, dialogTokenSet, dividerStyles, dividerTokenSet, dockedDatePickerStyles, dockedToolbarStyles, dockedToolbarTokenSet, elevation, extendedFabStyles, extendedFabTokenSet, fabMenuStyles, fabMenuTokenSet, fabStyles, fabTokenSet, filterChipTokenSet, floatingToolbarStyles, floatingToolbarTokenSet, getM3Spring, getThemeScriptSource, iconButtonStyles, iconButtonTokenSet, inputChipTokenSet, isComponentTokenSet, isDensity, labeledDividerStyles, linearProgressStyles, listMediaStyles, listStyles, listTokenSet, loadingIndicatorStyles, loadingIndicatorTokenSet, matchesSearch, menuStyles, menuTokenSet, navBarTokenSet, navItemStyles, navRailTokenSet, navigationBarStyles, navigationRailStyles, normalizeSearch, parseThemeState, parseTime, pickerDialogStyles, plainTooltipTokenSet, progressIndicatorTokenSet, pullToRefreshStyles, px, radioGroupStyles, radioStyles, radioTokenSet, richTooltipStyles, richTooltipTokenSet, searchAppBarStyles, searchBarStyles, searchBarTokenSet, searchFieldStyles, searchViewTokenSet, serializeThemeState, sideSheetStyles, sideSheetTokenSet, sliderStyles, sliderTokenSet, snackbarHostStyles, snackbarStyles, snackbarTokenSet, splitButtonStyles, splitButtonTokenSet, spring, springPosition, springSettleDuration, springToLinearEasing, suggestionChipTokenSet, switchStyles, switchTokenSet, tabsStyles, tabsTokenSet, textFieldStyles, textFieldTokenSet, themeAttributes, timePickerStyles, timePickerTokenSet, toMotionSpring, toolbarFabStyles, toolbarFabTokenSet, tooltipStyles, topAppBarStyles, tv, twMergeConfig, typeTokens, typescale, useM3Spring, useNavigationRail, useSnackbarHostState, useTheme, useThemeScope, useTimePickerRoom, useToolbarScrollExit, useToolbarScrollExpansion };

package/dist/primitives/use-m3-interaction.js

@@ -15,18 +15,22 @@ const RIPPLE_START = {
 * one is still growing or fading. The ripple's animated properties are pinned to their start
 * values with their transitions off and flushed to style, then released: they transition
 * from this press's start to whatever the state layer's rules say (growing if
-* `data-rippling` is on, or once it turns on). Only the ripple's transitions are switched
-* off: the component's own (`--m3-transition-property`, such as a running corner morph) keep
-* running, so a quick second press doesn't make the corners jump.
+* `data-rippling` is on, or once it turns on). They're pinned with no duration or delay, not by
+* leaving them out of `transition-property`: a running transition whose property drops out of
+* the list is cancelled and jumps to its end, as did a corner morph on a quick second press
+* and a width an app animates through `className` (2026-11-10). A running transition keeps its
+* own timing when the durations change, so nothing else is touched.
 */
 function restartRipple(element) {
 	const { style } = element;
-	const transitionProperty = style.transitionProperty;
-	style.transitionProperty = "var(--m3-transition-property, --m3-none)";
+	const { transitionDuration, transitionDelay } = style;
+	style.transitionDuration = "0s";
+	style.transitionDelay = "0s";
 	for (const [name, value] of Object.entries(RIPPLE_START)) style.setProperty(name, value);
 	getComputedStyle(element).getPropertyValue("--m3-ripple-x");
 	for (const name of Object.keys(RIPPLE_START)) style.removeProperty(name);
-	style.transitionProperty = transitionProperty;
+	style.transitionDuration = transitionDuration;
+	style.transitionDelay = transitionDelay;
 }
 /**
 * Positions a new ripple at the press point (Compose `RippleAnimation`): it grows from 30%

package/dist/primitives/use-m3-interaction.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-m3-interaction.js","names":[],"sources":["../../src/primitives/use-m3-interaction.ts"],"sourcesContent":["'use client';\n\nimport { mergeProps, useFocusRing, useHover, usePress, type PressEvents } from 'react-aria';\nimport {\n  useEffect,\n  useState,\n  type DOMAttributes,\n  type KeyboardEvent,\n  type PointerEvent,\n  type RefObject,\n} from 'react';\n\nexport interface M3InteractionOptions extends PressEvents {\n  isDisabled?: boolean;\n  isSelected?: boolean;\n  isDragged?: boolean;\n  /**\n   * Pressed state from another React Aria hook (e.g. `useButton`). When provided,\n   * this hook does not attach its own press handling.\n   */\n  isPressed?: boolean;\n  /** Treat focus inside the element as focus on the element (e.g. text fields). */\n  within?: boolean;\n  /** Whether the element is a text input; focus is then always visible. */\n  isTextInput?: boolean;\n  autoFocus?: boolean;\n}\n\nexport interface M3InteractionState {\n  isHovered: boolean;\n  isPressed: boolean;\n  isFocused: boolean;\n  isFocusVisible: boolean;\n}\n\n/** `data-*` attributes read by the `state-layer` and `focus-ring` utilities. */\nexport interface M3InteractionDataAttributes {\n  'data-hovered'?: true;\n  'data-pressed'?: true;\n  /** The ripple is showing: from press start until release, but at least 225ms. */\n  'data-rippling'?: true;\n  'data-focused'?: true;\n  'data-focus-visible'?: true;\n  'data-disabled'?: true;\n  'data-selected'?: true;\n  'data-dragged'?: true;\n}\n\nexport interface M3InteractionResult {\n  /** Event handlers to spread on the interactive element. */\n  interactionProps: DOMAttributes<HTMLElement>;\n  dataAttributes: M3InteractionDataAttributes;\n  state: M3InteractionState;\n}\n\nconst flag = (value: boolean | undefined): true | undefined => (value ? true : undefined);\n\n/** Compose `RippleAnimation`: the radius grows (and the centre travels) over 225ms. */\nexport const RIPPLE_GROW_MS = 225;\n\n/** The ripple's animated properties, pinned at the start of a new ripple. */\nconst RIPPLE_START = {\n  '--m3-ripple-opacity': '0',\n  '--m3-ripple-radius': 'var(--m3-ripple-start, 0px)',\n  '--m3-ripple-x': 'var(--m3-ripple-origin-x, 50%)',\n  '--m3-ripple-y': 'var(--m3-ripple-origin-y, 50%)',\n} as const;\n\n/**\n * Starts a fresh ripple on `element`, as Compose does for every press, even while the last\n * one is still growing or fading. The ripple's animated properties are pinned to their start\n * values with their transitions off and flushed to style, then released: they transition\n * from this press's start to whatever the state layer's rules say (growing if\n * `data-rippling` is on, or once it turns on). Only the ripple's transitions are switched\n * off: the component's own (`--m3-transition-property`, such as a running corner morph) keep\n * running, so a quick second press doesn't make the corners jump.\n */\nexport function restartRipple(element: HTMLElement) {\n  const { style } = element;\n  const transitionProperty = style.transitionProperty;\n  style.transitionProperty = 'var(--m3-transition-property, --m3-none)';\n  for (const [name, value] of Object.entries(RIPPLE_START)) style.setProperty(name, value);\n  getComputedStyle(element).getPropertyValue('--m3-ripple-x');\n  for (const name of Object.keys(RIPPLE_START)) style.removeProperty(name);\n  style.transitionProperty = transitionProperty;\n}\n\n/**\n * Positions a new ripple at the press point (Compose `RippleAnimation`): it grows from 30%\n * of the element's longer side to half its diagonal plus 10px while its centre moves to the\n * middle. Without a point (a key press) it starts in the middle. For a state layer on a\n * child of the pressed element (a navigation item's pill), pass that child.\n */\nexport function setRippleOrigin(element: HTMLElement, clientX?: number, clientY?: number) {\n  const rect = element.getBoundingClientRect();\n  const x = clientX === undefined ? rect.width / 2 : clientX - rect.left;\n  const y = clientY === undefined ? rect.height / 2 : clientY - rect.top;\n  const { style } = element;\n  style.setProperty('--m3-ripple-origin-x', `${x}px`);\n  style.setProperty('--m3-ripple-origin-y', `${y}px`);\n  style.setProperty('--m3-ripple-center-x', `${rect.width / 2}px`);\n  style.setProperty('--m3-ripple-center-y', `${rect.height / 2}px`);\n  style.setProperty('--m3-ripple-start', `${Math.max(rect.width, rect.height) * 0.3}px`);\n  style.setProperty(\n    '--m3-ripple-size',\n    `${Math.ceil(Math.hypot(rect.width, rect.height) / 2 + 10)}px`,\n  );\n  restartRipple(element);\n}\n\n/**\n * Flags a press that starts while the element's corner morph is still running\n * (`data-rapid-press`). M3's buttons note that the web can use \"a modified motion curve to\n * avoid resonant effects from overlapping animations\": the `container-motion` utility then\n * morphs on the fast effects spring, which doesn't overshoot, instead of the fast spatial\n * one. The attribute is set on the element directly, before React renders the press, so\n * the morph that press starts already uses the modified curve. Call it before anything\n * that resets the element's transitions (such as `restartRipple`).\n */\nexport function markRapidPress(element: HTMLElement) {\n  const morphing =\n    typeof element.getAnimations === 'function' &&\n    element\n      .getAnimations()\n      .some(\n        (animation) =>\n          animation instanceof CSSTransition &&\n          animation.transitionProperty.endsWith('radius') &&\n          animation.playState === 'running',\n      );\n  element.toggleAttribute('data-rapid-press', morphing);\n}\n\n/**\n * Whether a ripple should be showing. Compose always finishes a ripple's 225ms growth\n * before fading it out, so a quick tap still reaches the edges: this stays true from press\n * start until release, but for at least 225ms.\n */\nexport function useRippleHold(isPressed: boolean): boolean {\n  const [wasPressed, setWasPressed] = useState(isPressed);\n  const [held, setHeld] = useState(false);\n  const [presses, setPresses] = useState(0);\n  // Adjust state while rendering when a press starts (no effect, no extra paint).\n  if (isPressed !== wasPressed) {\n    setWasPressed(isPressed);\n    if (isPressed) {\n      setHeld(true);\n      setPresses((n) => n + 1);\n    }\n  }\n  useEffect(() => {\n    if (!held) return;\n    const timer = setTimeout(() => setHeld(false), RIPPLE_GROW_MS);\n    return () => clearTimeout(timer);\n  }, [held, presses]);\n  return isPressed || held;\n}\n\n/**\n * M3 interaction states for any element: hover, press, focus-visible, selected,\n * dragged and disabled, exposed as `data-*` attributes, plus the ripple origin.\n * Pair with the `state-layer` and `focus-ring` utilities, which paint the state\n * layer and ripple as background layers on the element itself (no child nodes).\n */\nexport function useM3Interaction(\n  options: M3InteractionOptions,\n  ref: RefObject<HTMLElement | null>,\n): M3InteractionResult {\n  const {\n    isDisabled,\n    isSelected,\n    isDragged,\n    within,\n    isTextInput,\n    autoFocus,\n    onPress,\n    onPressStart,\n    onPressEnd,\n    onPressChange,\n    onPressUp,\n    onClick,\n  } = options;\n  const hasExternalPress = options.isPressed !== undefined;\n\n  // Only `usePress`'s own options: it spreads any others onto the props it returns, so this\n  // hook's options (`isDragged`, `within` …) would reach the DOM as unknown attributes.\n  const { pressProps, isPressed: isOwnPressed } = usePress({\n    onPress,\n    onPressStart,\n    onPressEnd,\n    onPressChange,\n    onPressUp,\n    onClick,\n    ref,\n    isDisabled: isDisabled || hasExternalPress,\n  });\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { focusProps, isFocused, isFocusVisible } = useFocusRing({\n    within,\n    isTextInput,\n    autoFocus,\n  });\n\n  const isPressed = hasExternalPress ? Boolean(options.isPressed) : isOwnPressed;\n  const isRippling = useRippleHold(isPressed && !isDisabled);\n\n  const rippleProps: DOMAttributes<HTMLElement> = {\n    onPointerDown: (event: PointerEvent<HTMLElement>) => {\n      if (!isDisabled && event.button === 0) {\n        markRapidPress(event.currentTarget);\n        setRippleOrigin(event.currentTarget, event.clientX, event.clientY);\n      }\n    },\n    onKeyDown: (event: KeyboardEvent<HTMLElement>) => {\n      if (!isDisabled && (event.key === 'Enter' || event.key === ' ')) {\n        markRapidPress(event.currentTarget);\n        setRippleOrigin(event.currentTarget);\n      }\n    },\n  };\n\n  return {\n    interactionProps: mergeProps(\n      hasExternalPress ? {} : pressProps,\n      hoverProps,\n      focusProps,\n      rippleProps,\n    ),\n    dataAttributes: {\n      'data-hovered': flag(isHovered && !isDisabled),\n      'data-pressed': flag(isPressed && !isDisabled),\n      'data-rippling': flag(isRippling),\n      'data-focused': flag(isFocused),\n      'data-focus-visible': flag(isFocusVisible),\n      'data-disabled': flag(isDisabled),\n      'data-selected': flag(isSelected),\n      'data-dragged': flag(isDragged),\n    },\n    state: { isHovered, isPressed, isFocused, isFocusVisible },\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-m3-interaction.js","names":[],"sources":["../../src/primitives/use-m3-interaction.ts"],"sourcesContent":["'use client';\n\nimport { mergeProps, useFocusRing, useHover, usePress, type PressEvents } from 'react-aria';\nimport {\n  useEffect,\n  useState,\n  type DOMAttributes,\n  type KeyboardEvent,\n  type PointerEvent,\n  type RefObject,\n} from 'react';\n\nexport interface M3InteractionOptions extends PressEvents {\n  isDisabled?: boolean;\n  isSelected?: boolean;\n  isDragged?: boolean;\n  /**\n   * Pressed state from another React Aria hook (e.g. `useButton`). When provided,\n   * this hook does not attach its own press handling.\n   */\n  isPressed?: boolean;\n  /** Treat focus inside the element as focus on the element (e.g. text fields). */\n  within?: boolean;\n  /** Whether the element is a text input; focus is then always visible. */\n  isTextInput?: boolean;\n  autoFocus?: boolean;\n}\n\nexport interface M3InteractionState {\n  isHovered: boolean;\n  isPressed: boolean;\n  isFocused: boolean;\n  isFocusVisible: boolean;\n}\n\n/** `data-*` attributes read by the `state-layer` and `focus-ring` utilities. */\nexport interface M3InteractionDataAttributes {\n  'data-hovered'?: true;\n  'data-pressed'?: true;\n  /** The ripple is showing: from press start until release, but at least 225ms. */\n  'data-rippling'?: true;\n  'data-focused'?: true;\n  'data-focus-visible'?: true;\n  'data-disabled'?: true;\n  'data-selected'?: true;\n  'data-dragged'?: true;\n}\n\nexport interface M3InteractionResult {\n  /** Event handlers to spread on the interactive element. */\n  interactionProps: DOMAttributes<HTMLElement>;\n  dataAttributes: M3InteractionDataAttributes;\n  state: M3InteractionState;\n}\n\nconst flag = (value: boolean | undefined): true | undefined => (value ? true : undefined);\n\n/** Compose `RippleAnimation`: the radius grows (and the centre travels) over 225ms. */\nexport const RIPPLE_GROW_MS = 225;\n\n/** The ripple's animated properties, pinned at the start of a new ripple. */\nconst RIPPLE_START = {\n  '--m3-ripple-opacity': '0',\n  '--m3-ripple-radius': 'var(--m3-ripple-start, 0px)',\n  '--m3-ripple-x': 'var(--m3-ripple-origin-x, 50%)',\n  '--m3-ripple-y': 'var(--m3-ripple-origin-y, 50%)',\n} as const;\n\n/**\n * Starts a fresh ripple on `element`, as Compose does for every press, even while the last\n * one is still growing or fading. The ripple's animated properties are pinned to their start\n * values with their transitions off and flushed to style, then released: they transition\n * from this press's start to whatever the state layer's rules say (growing if\n * `data-rippling` is on, or once it turns on). They're pinned with no duration or delay, not by\n * leaving them out of `transition-property`: a running transition whose property drops out of\n * the list is cancelled and jumps to its end, as did a corner morph on a quick second press\n * and a width an app animates through `className` (2026-11-10). A running transition keeps its\n * own timing when the durations change, so nothing else is touched.\n */\nexport function restartRipple(element: HTMLElement) {\n  const { style } = element;\n  const { transitionDuration, transitionDelay } = style;\n  style.transitionDuration = '0s';\n  style.transitionDelay = '0s';\n  for (const [name, value] of Object.entries(RIPPLE_START)) style.setProperty(name, value);\n  getComputedStyle(element).getPropertyValue('--m3-ripple-x');\n  for (const name of Object.keys(RIPPLE_START)) style.removeProperty(name);\n  style.transitionDuration = transitionDuration;\n  style.transitionDelay = transitionDelay;\n}\n\n/**\n * Positions a new ripple at the press point (Compose `RippleAnimation`): it grows from 30%\n * of the element's longer side to half its diagonal plus 10px while its centre moves to the\n * middle. Without a point (a key press) it starts in the middle. For a state layer on a\n * child of the pressed element (a navigation item's pill), pass that child.\n */\nexport function setRippleOrigin(element: HTMLElement, clientX?: number, clientY?: number) {\n  const rect = element.getBoundingClientRect();\n  const x = clientX === undefined ? rect.width / 2 : clientX - rect.left;\n  const y = clientY === undefined ? rect.height / 2 : clientY - rect.top;\n  const { style } = element;\n  style.setProperty('--m3-ripple-origin-x', `${x}px`);\n  style.setProperty('--m3-ripple-origin-y', `${y}px`);\n  style.setProperty('--m3-ripple-center-x', `${rect.width / 2}px`);\n  style.setProperty('--m3-ripple-center-y', `${rect.height / 2}px`);\n  style.setProperty('--m3-ripple-start', `${Math.max(rect.width, rect.height) * 0.3}px`);\n  style.setProperty(\n    '--m3-ripple-size',\n    `${Math.ceil(Math.hypot(rect.width, rect.height) / 2 + 10)}px`,\n  );\n  restartRipple(element);\n}\n\n/**\n * Flags a press that starts while the element's corner morph is still running\n * (`data-rapid-press`). M3's buttons note that the web can use \"a modified motion curve to\n * avoid resonant effects from overlapping animations\": the `container-motion` utility then\n * morphs on the fast effects spring, which doesn't overshoot, instead of the fast spatial\n * one. The attribute is set on the element directly, before React renders the press, so\n * the morph that press starts already uses the modified curve. Call it before anything\n * that resets the element's transitions (such as `restartRipple`).\n */\nexport function markRapidPress(element: HTMLElement) {\n  const morphing =\n    typeof element.getAnimations === 'function' &&\n    element\n      .getAnimations()\n      .some(\n        (animation) =>\n          animation instanceof CSSTransition &&\n          animation.transitionProperty.endsWith('radius') &&\n          animation.playState === 'running',\n      );\n  element.toggleAttribute('data-rapid-press', morphing);\n}\n\n/**\n * Whether a ripple should be showing. Compose always finishes a ripple's 225ms growth\n * before fading it out, so a quick tap still reaches the edges: this stays true from press\n * start until release, but for at least 225ms.\n */\nexport function useRippleHold(isPressed: boolean): boolean {\n  const [wasPressed, setWasPressed] = useState(isPressed);\n  const [held, setHeld] = useState(false);\n  const [presses, setPresses] = useState(0);\n  // Adjust state while rendering when a press starts (no effect, no extra paint).\n  if (isPressed !== wasPressed) {\n    setWasPressed(isPressed);\n    if (isPressed) {\n      setHeld(true);\n      setPresses((n) => n + 1);\n    }\n  }\n  useEffect(() => {\n    if (!held) return;\n    const timer = setTimeout(() => setHeld(false), RIPPLE_GROW_MS);\n    return () => clearTimeout(timer);\n  }, [held, presses]);\n  return isPressed || held;\n}\n\n/**\n * M3 interaction states for any element: hover, press, focus-visible, selected,\n * dragged and disabled, exposed as `data-*` attributes, plus the ripple origin.\n * Pair with the `state-layer` and `focus-ring` utilities, which paint the state\n * layer and ripple as background layers on the element itself (no child nodes).\n */\nexport function useM3Interaction(\n  options: M3InteractionOptions,\n  ref: RefObject<HTMLElement | null>,\n): M3InteractionResult {\n  const {\n    isDisabled,\n    isSelected,\n    isDragged,\n    within,\n    isTextInput,\n    autoFocus,\n    onPress,\n    onPressStart,\n    onPressEnd,\n    onPressChange,\n    onPressUp,\n    onClick,\n  } = options;\n  const hasExternalPress = options.isPressed !== undefined;\n\n  // Only `usePress`'s own options: it spreads any others onto the props it returns, so this\n  // hook's options (`isDragged`, `within` …) would reach the DOM as unknown attributes.\n  const { pressProps, isPressed: isOwnPressed } = usePress({\n    onPress,\n    onPressStart,\n    onPressEnd,\n    onPressChange,\n    onPressUp,\n    onClick,\n    ref,\n    isDisabled: isDisabled || hasExternalPress,\n  });\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { focusProps, isFocused, isFocusVisible } = useFocusRing({\n    within,\n    isTextInput,\n    autoFocus,\n  });\n\n  const isPressed = hasExternalPress ? Boolean(options.isPressed) : isOwnPressed;\n  const isRippling = useRippleHold(isPressed && !isDisabled);\n\n  const rippleProps: DOMAttributes<HTMLElement> = {\n    onPointerDown: (event: PointerEvent<HTMLElement>) => {\n      if (!isDisabled && event.button === 0) {\n        markRapidPress(event.currentTarget);\n        setRippleOrigin(event.currentTarget, event.clientX, event.clientY);\n      }\n    },\n    onKeyDown: (event: KeyboardEvent<HTMLElement>) => {\n      if (!isDisabled && (event.key === 'Enter' || event.key === ' ')) {\n        markRapidPress(event.currentTarget);\n        setRippleOrigin(event.currentTarget);\n      }\n    },\n  };\n\n  return {\n    interactionProps: mergeProps(\n      hasExternalPress ? {} : pressProps,\n      hoverProps,\n      focusProps,\n      rippleProps,\n    ),\n    dataAttributes: {\n      'data-hovered': flag(isHovered && !isDisabled),\n      'data-pressed': flag(isPressed && !isDisabled),\n      'data-rippling': flag(isRippling),\n      'data-focused': flag(isFocused),\n      'data-focus-visible': flag(isFocusVisible),\n      'data-disabled': flag(isDisabled),\n      'data-selected': flag(isSelected),\n      'data-dragged': flag(isDragged),\n    },\n    state: { isHovered, isPressed, isFocused, isFocusVisible },\n  };\n}\n"],"mappings":"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"}

package/dist/primitives.d.ts

@@ -1,8 +1,9 @@
 import { ThemeScopeContext } from "./theme/context.js";
+import { DescriptionAria, RootDOMProps, SplitRootProps, SplitRootPropsOptions, WidgetAria, WrapperRootDOMProps, pickDescriptionAria, pickWidgetAria, splitRootProps } from "./utils/root-props.js";
+import { ButtonBase, ButtonBaseActionProps, ButtonBaseDivActionProps, ButtonBaseLinkProps, ButtonBasePendingProps, ButtonBaseProps, ButtonBaseRenderState, ButtonBaseToggleProps } from "./primitives/ButtonBase.js";
+import { closedByOverlayOptions } from "./utils/closed-by.js";
 import { getM3Spring } from "./motion/get-m3-spring.js";
 import { useM3Spring } from "./motion/use-m3-spring.js";
-import { ButtonBase, ButtonBaseActionProps, ButtonBaseDivActionProps, ButtonBaseLinkProps, ButtonBasePendingProps, ButtonBaseProps, ButtonBaseRenderState, ButtonBaseToggleProps } from "./primitives/ButtonBase.js";
-import { DescriptionAria, RootDOMProps, SplitRootProps, SplitRootPropsOptions, WidgetAria, WrapperRootDOMProps, pickDescriptionAria, pickWidgetAria, splitRootProps } from "./utils/root-props.js";
 import { CornerRounding } from "./shapes/corner-rounding.js";
 import { PointTransformer } from "./shapes/point.js";
 import { Cubic } from "./shapes/cubic.js";
@@ -13,7 +14,6 @@ import { MaterialShapes } from "./shapes/material-shapes.js";
 import { Morph } from "./shapes/morph.js";
 import { M3MorphOptions, MorphShape, getMorph, morphPathAt } from "./primitives/morph-path.js";
 import { SelectionControl, SelectionControlClassNames, SelectionControlProps } from "./primitives/SelectionControl.js";
-import { closedByOverlayOptions } from "./utils/closed-by.js";
 import { M3InteractionDataAttributes, M3InteractionOptions, M3InteractionResult, M3InteractionState, useM3Interaction } from "./primitives/use-m3-interaction.js";
 import { Surface, SurfaceProps, SurfaceVariants, surfaceStyles } from "./primitives/Surface.js";
 import { Overlay, OverlayProps } from "./primitives/Overlay.js";
@@ -29,6 +29,9 @@ import { DomDirectionLocale, DomDirectionLocaleProps } from "./primitives/DomDir
 import { localeWithDirection } from "./primitives/locale-with-direction.js";
 import { useM3Morph } from "./primitives/use-m3-morph.js";
 import { KeepPressedInPlaceResult, useKeepPressedInPlace } from "./utils/keep-pressed-in-place.js";
+import { ScrollKeysResult, useScrollKeys } from "./utils/use-scroll-keys.js";
+import { ScrollRestorationOptions, useScrollRestoration } from "./utils/use-scroll-restoration.js";
+import { LabelsKey, LabelsOf, useLabels } from "./components/labels/use-labels.js";
 import { mergeDataTokens } from "./utils/merge-data-tokens.js";
 import { splitDataAttributes } from "./utils/split-data-attributes.js";
 import { generateSchemeColors } from "./theme/scheme.js";
@@ -36,4 +39,4 @@ import { materialShapeMask } from "./shapes/mask.js";
 import { materialShapePaths } from "./shapes/generated/material-shape-path-record.js";
 import { MorphPathOptions, PathOptions, cubicsToPath, morphToPath, polygonToPath } from "./shapes/path.js";
 import { circle, pill, pillStar, rectangle, star } from "./shapes/shapes.js";
-export { ButtonBase, type ButtonBaseActionProps, type ButtonBaseDivActionProps, type ButtonBaseLinkProps, type ButtonBasePendingProps, type ButtonBaseProps, type ButtonBaseRenderState, type ButtonBaseToggleProps, CharacterCounter, type CharacterCounterProps, CornerRounding, Cubic, type DescriptionAria, DomDirectionLocale, type DomDirectionLocaleProps, ErrorText, type ErrorTextProps, FieldErrorIcon, type FieldErrorIconProps, FieldLabel, type FieldLabelProps, type KeepPressedInPlaceResult, type M3InteractionDataAttributes, type M3InteractionOptions, type M3InteractionResult, type M3InteractionState, type M3MorphOptions, MaterialShapeName, type MaterialShapePath, MaterialShapes, Morph, type MorphPathOptions, type MorphShape, Overlay, type OverlayProps, type PathOptions, type PointTransformer, type RootDOMProps, RoundedPolygon, SelectionControl, type SelectionControlClassNames, type SelectionControlProps, type SplitRootProps, type SplitRootPropsOptions, SupportingText, type SupportingTextProps, Surface, type SurfaceProps, type SurfaceVariants, ThemeScopeContext, TouchTarget, type TouchTargetProps, TriggerContext, type TriggerContextValue, type WidgetAria, type WrapperRootDOMProps, archShape, arrowShape, boomShape, bunShape, burstShape, circle, circleShape, clamShellShape, closedByOverlayOptions, clover4LeafShape, clover8LeafShape, cookie12SidedShape, cookie4SidedShape, cookie6SidedShape, cookie7SidedShape, cookie9SidedShape, cubicsToPath, diamondShape, fanShape, flowerShape, gemShape, generateSchemeColors, getM3Spring, getMorph, ghostishShape, heartShape, localeWithDirection, materialShapeMask, materialShapeNames, materialShapePaths, mergeDataTokens, morphPathAt, morphToPath, ovalShape, pentagonShape, pickDescriptionAria, pickWidgetAria, pill, pillShape, pillStar, pixelCircleShape, pixelTriangleShape, polygonToPath, puffyDiamondShape, puffyShape, rectangle, selectionControlStyles, semiCircleShape, slantedShape, softBoomShape, softBurstShape, splitDataAttributes, splitRootProps, springProgressWithVelocity, springWithVelocityToLinearEasing, squareShape, star, sunnyShape, surfaceStyles, toAriaPlacement, triangleShape, useKeepPressedInPlace, useM3Interaction, useM3Morph, useM3Spring, usePresence, useRevealEntering, useTriggerProps, verySunnyShape };
+export { ButtonBase, type ButtonBaseActionProps, type ButtonBaseDivActionProps, type ButtonBaseLinkProps, type ButtonBasePendingProps, type ButtonBaseProps, type ButtonBaseRenderState, type ButtonBaseToggleProps, CharacterCounter, type CharacterCounterProps, CornerRounding, Cubic, type DescriptionAria, DomDirectionLocale, type DomDirectionLocaleProps, ErrorText, type ErrorTextProps, FieldErrorIcon, type FieldErrorIconProps, FieldLabel, type FieldLabelProps, type KeepPressedInPlaceResult, type LabelsKey, type LabelsOf, type M3InteractionDataAttributes, type M3InteractionOptions, type M3InteractionResult, type M3InteractionState, type M3MorphOptions, MaterialShapeName, type MaterialShapePath, MaterialShapes, Morph, type MorphPathOptions, type MorphShape, Overlay, type OverlayProps, type PathOptions, type PointTransformer, type RootDOMProps, RoundedPolygon, type ScrollKeysResult, type ScrollRestorationOptions, SelectionControl, type SelectionControlClassNames, type SelectionControlProps, type SplitRootProps, type SplitRootPropsOptions, SupportingText, type SupportingTextProps, Surface, type SurfaceProps, type SurfaceVariants, ThemeScopeContext, TouchTarget, type TouchTargetProps, TriggerContext, type TriggerContextValue, type WidgetAria, type WrapperRootDOMProps, archShape, arrowShape, boomShape, bunShape, burstShape, circle, circleShape, clamShellShape, closedByOverlayOptions, clover4LeafShape, clover8LeafShape, cookie12SidedShape, cookie4SidedShape, cookie6SidedShape, cookie7SidedShape, cookie9SidedShape, cubicsToPath, diamondShape, fanShape, flowerShape, gemShape, generateSchemeColors, getM3Spring, getMorph, ghostishShape, heartShape, localeWithDirection, materialShapeMask, materialShapeNames, materialShapePaths, mergeDataTokens, morphPathAt, morphToPath, ovalShape, pentagonShape, pickDescriptionAria, pickWidgetAria, pill, pillShape, pillStar, pixelCircleShape, pixelTriangleShape, polygonToPath, puffyDiamondShape, puffyShape, rectangle, selectionControlStyles, semiCircleShape, slantedShape, softBoomShape, softBurstShape, splitDataAttributes, splitRootProps, springProgressWithVelocity, springWithVelocityToLinearEasing, squareShape, star, sunnyShape, surfaceStyles, toAriaPlacement, triangleShape, useKeepPressedInPlace, useLabels, useM3Interaction, useM3Morph, useM3Spring, usePresence, useRevealEntering, useScrollKeys, useScrollRestoration, useTriggerProps, verySunnyShape };

package/dist/primitives.js

@@ -1,5 +1,6 @@
 import { ThemeScopeContext } from "./theme/context.js";
 import { generateSchemeColors } from "./theme/scheme.js";
+import { useLabels } from "./components/labels/use-labels.js";
 import { getM3Spring } from "./motion/get-m3-spring.js";
 import { useM3Spring } from "./motion/use-m3-spring.js";
 import { TriggerContext, useTriggerProps } from "./primitives/TriggerContext.js";
@@ -30,8 +31,10 @@ import { useKeepPressedInPlace } from "./utils/keep-pressed-in-place.js";
 import { springProgressWithVelocity, springWithVelocityToLinearEasing } from "./tokens/spring-velocity.js";
 import { Surface, surfaceStyles } from "./primitives/Surface.js";
 import { useM3Morph } from "./primitives/use-m3-morph.js";
+import { useScrollKeys } from "./utils/use-scroll-keys.js";
+import { useScrollRestoration } from "./utils/use-scroll-restoration.js";
 import { splitDataAttributes } from "./utils/split-data-attributes.js";
 import { materialShapeMask } from "./shapes/mask.js";
 import { archShape, arrowShape, boomShape, bunShape, burstShape, circleShape, clamShellShape, clover4LeafShape, clover8LeafShape, cookie12SidedShape, cookie4SidedShape, cookie6SidedShape, cookie7SidedShape, cookie9SidedShape, diamondShape, fanShape, flowerShape, gemShape, ghostishShape, heartShape, materialShapeNames, ovalShape, pentagonShape, pillShape, pixelCircleShape, pixelTriangleShape, puffyDiamondShape, puffyShape, semiCircleShape, slantedShape, softBoomShape, softBurstShape, squareShape, sunnyShape, triangleShape, verySunnyShape } from "./shapes/generated/material-shape-paths.js";
 import { materialShapePaths } from "./shapes/generated/material-shape-path-record.js";
-export { ButtonBase, CharacterCounter, CornerRounding, Cubic, DomDirectionLocale, ErrorText, FieldErrorIcon, FieldLabel, MaterialShapes, Morph, Overlay, RoundedPolygon, SelectionControl, SupportingText, Surface, ThemeScopeContext, TouchTarget, TriggerContext, archShape, arrowShape, boomShape, bunShape, burstShape, circle, circleShape, clamShellShape, closedByOverlayOptions, clover4LeafShape, clover8LeafShape, cookie12SidedShape, cookie4SidedShape, cookie6SidedShape, cookie7SidedShape, cookie9SidedShape, cubicsToPath, diamondShape, fanShape, flowerShape, gemShape, generateSchemeColors, getM3Spring, getMorph, ghostishShape, heartShape, localeWithDirection, materialShapeMask, materialShapeNames, materialShapePaths, mergeDataTokens, morphPathAt, morphToPath, ovalShape, pentagonShape, pickDescriptionAria, pickWidgetAria, pill, pillShape, pillStar, pixelCircleShape, pixelTriangleShape, polygonToPath, puffyDiamondShape, puffyShape, rectangle, selectionControlStyles, semiCircleShape, slantedShape, softBoomShape, softBurstShape, splitDataAttributes, splitRootProps, springProgressWithVelocity, springWithVelocityToLinearEasing, squareShape, star, sunnyShape, surfaceStyles, toAriaPlacement, triangleShape, useKeepPressedInPlace, useM3Interaction, useM3Morph, useM3Spring, usePresence, useRevealEntering, useTriggerProps, verySunnyShape };
+export { ButtonBase, CharacterCounter, CornerRounding, Cubic, DomDirectionLocale, ErrorText, FieldErrorIcon, FieldLabel, MaterialShapes, Morph, Overlay, RoundedPolygon, SelectionControl, SupportingText, Surface, ThemeScopeContext, TouchTarget, TriggerContext, archShape, arrowShape, boomShape, bunShape, burstShape, circle, circleShape, clamShellShape, closedByOverlayOptions, clover4LeafShape, clover8LeafShape, cookie12SidedShape, cookie4SidedShape, cookie6SidedShape, cookie7SidedShape, cookie9SidedShape, cubicsToPath, diamondShape, fanShape, flowerShape, gemShape, generateSchemeColors, getM3Spring, getMorph, ghostishShape, heartShape, localeWithDirection, materialShapeMask, materialShapeNames, materialShapePaths, mergeDataTokens, morphPathAt, morphToPath, ovalShape, pentagonShape, pickDescriptionAria, pickWidgetAria, pill, pillShape, pillStar, pixelCircleShape, pixelTriangleShape, polygonToPath, puffyDiamondShape, puffyShape, rectangle, selectionControlStyles, semiCircleShape, slantedShape, softBoomShape, softBurstShape, splitDataAttributes, splitRootProps, springProgressWithVelocity, springWithVelocityToLinearEasing, squareShape, star, sunnyShape, surfaceStyles, toAriaPlacement, triangleShape, useKeepPressedInPlace, useLabels, useM3Interaction, useM3Morph, useM3Spring, usePresence, useRevealEntering, useScrollKeys, useScrollRestoration, useTriggerProps, verySunnyShape };

package/dist/styles/utilities.css

@@ -147,18 +147,30 @@
         transparent
       )
     );
-  /* After the ripple: fade it out, then reset its radius and centre once it is invisible. */
+  /*
+   * After the ripple: fade it out, then reset its radius and centre once it is invisible. The
+   * states below change only these variables, never the transition itself, so an app's own
+   * transition through `className` (one class, which wins over this one at rest) keeps its
+   * timing while the element is pressed too (2026-11-10).
+   */
+  --m3-ripple-fade-duration: 150ms;
+  --m3-ripple-grow-duration: 0s;
+  --m3-ripple-grow-delay: 150ms;
+  --m3-ripple-grow-easing: linear;
   /* Components append their own transitions through the --m3-transition-* lists. */
   transition-property:
     --m3-state-opacity, --m3-ripple-opacity, --m3-ripple-radius, --m3-ripple-x, --m3-ripple-y,
     var(--m3-transition-property, --m3-none);
   transition-duration:
-    var(--md-sys-motion-spring-effects-fast-duration), 150ms, 0s, 0s, 0s,
+    var(--md-sys-motion-spring-effects-fast-duration), var(--m3-ripple-fade-duration),
+    var(--m3-ripple-grow-duration), var(--m3-ripple-grow-duration), var(--m3-ripple-grow-duration),
     var(--m3-transition-duration, 0s);
-  transition-delay: 0s, 0s, 150ms, 150ms, 150ms, var(--m3-transition-delay, 0s);
+  transition-delay:
+    0s, 0s, var(--m3-ripple-grow-delay), var(--m3-ripple-grow-delay), var(--m3-ripple-grow-delay),
+    var(--m3-transition-delay, 0s);
   transition-timing-function:
-    var(--md-sys-motion-spring-effects-fast-easing), linear, linear, linear, linear,
-    var(--m3-transition-easing, linear);
+    var(--md-sys-motion-spring-effects-fast-easing), linear, var(--m3-ripple-grow-easing), linear,
+    linear, var(--m3-transition-easing, linear);
 
   &[data-hovered] {
     --m3-state-opacity: var(--md-sys-state-hover-state-layer-opacity);
@@ -181,13 +193,10 @@
     --m3-ripple-radius: var(--m3-ripple-size, 0px);
     --m3-ripple-x: var(--m3-ripple-center-x, 50%);
     --m3-ripple-y: var(--m3-ripple-center-y, 50%);
-    transition-duration:
-      var(--md-sys-motion-spring-effects-fast-duration), 75ms, 225ms, 225ms, 225ms,
-      var(--m3-transition-duration, 0s);
-    transition-delay: 0s, 0s, 0s, 0s, 0s, var(--m3-transition-delay, 0s);
-    transition-timing-function:
-      var(--md-sys-motion-spring-effects-fast-easing), linear, cubic-bezier(0.4, 0, 0.2, 1), linear,
-      linear, var(--m3-transition-easing, linear);
+    --m3-ripple-fade-duration: 75ms;
+    --m3-ripple-grow-duration: 225ms;
+    --m3-ripple-grow-delay: 0s;
+    --m3-ripple-grow-easing: cubic-bezier(0.4, 0, 0.2, 1);
   }
   &[data-disabled] {
     --m3-state-opacity: 0;
@@ -197,9 +206,7 @@
   /* Reduced motion: the ripple appears at full size where it ends, with no growth or travel. */
   @media (prefers-reduced-motion: reduce) {
     &[data-rippling] {
-      transition-duration:
-        var(--md-sys-motion-spring-effects-fast-duration), 75ms, 0s, 0s, 0s,
-        var(--m3-transition-duration, 0s);
+      --m3-ripple-grow-duration: 0s;
     }
   }
 }