@wordpress/components 37.0.0 → 38.0.0

package/AGENTS.md

@@ -4,7 +4,7 @@ This package contains UI components that are intended to be used anywhere in a g
 
 We are currently in the process of rewriting the global components to be in the new `@wordpress/ui` package. Refer to the [`use-recommended-components` ESLint rule](../eslint-plugin/rules/use-recommended-components.js) for guidance on which components to use.
 
-For components not explicitly listed in the `use-recommended-components` rule, check the component status documentation in each Storybook file for up-to-date usage guidance on each component. The component status given in the Storybook file should be considered the most accurate signal, above the `experimental` tag or component prefix.
+For components not explicitly listed in the `use-recommended-components` rule, locate the component's Storybook source within this package and use its status guidance. This guidance is more authoritative than the `experimental` tag or component prefix.
 
 ## Forms
 
@@ -14,4 +14,4 @@ For adding validation, consider using the [Validated Form Components](./src/vali
 
 ## Storybook
 
-Don't forget to check a components's Storybook documentation for additional usage guidance. The Storybook links ([public base URL](https://wordpress.github.io/gutenberg/)) are also useful to present to a human when they are asking for help with a component.
+Don't forget to check a component's Storybook documentation for additional usage guidance. The Storybook links ([public base URL](https://wordpress.github.io/gutenberg/)) are also useful to present to a human when they are asking for help with a component.

package/CHANGELOG.md

@@ -2,6 +2,52 @@
 
 ## Unreleased
 
+## 38.0.0 (2026-07-29)
+
+### Breaking Changes
+
+-   Components that compose Emotion style fragments with `cx()` should pass source-order-dependent fragments in a single `css()` call. Passing separate fragments can change override order after the following components stopped rendering styles through Emotion:
+    -   `ToggleGroupControl` ([#80381](https://github.com/WordPress/gutenberg/pull/80381))
+    -   `Disabled` ([#80643](https://github.com/WordPress/gutenberg/pull/80643))
+    -   `ToolsPanel` ([#80445](https://github.com/WordPress/gutenberg/pull/80445))
+-   Remove the private `Theme` component ([#80691](https://github.com/WordPress/gutenberg/pull/80691)).
+
+### Enhancements
+
+-   `GradientPicker`: Add `selectedSlug` prop for slug-based selection and pass the selected preset's slug to `onChange`, so two presets sharing a gradient keep their identity ([#80554](https://github.com/WordPress/gutenberg/pull/80554)).
+-   `SandBox`: Add `allowPopups` prop to opt into `allow-popups` in the iframe's sandbox attribute ([#69617](https://github.com/WordPress/gutenberg/pull/69617)).
+-   Validated form controls: Only move focus to the invalid control for trusted `invalid` events (form submission, `reportValidity()`). Consumers can now dispatch a synthetic `invalid` event to reveal a control's error message without disturbing the user's place in the form ([#80685](https://github.com/WordPress/gutenberg/pull/80685)).
+
+### Bug Fixes
+
+-   `ToolsPanel`: Migrate styles from Emotion to an SCSS Module and restore the header heading typography after the `View` migration. ([#80445](https://github.com/WordPress/gutenberg/pull/80445)).
+-   `Autocomplete`: Expose the suggestions list to assistive technology with `aria-controls` and `aria-haspopup`, both required alongside `aria-autocomplete="list"` ([#80403](https://github.com/WordPress/gutenberg/pull/80403)).
+-   `Autocomplete`: Omit `aria-activedescendant` while no suggestion is highlighted, instead of returning `null` for it ([#80403](https://github.com/WordPress/gutenberg/pull/80403)).
+-   `ContentEditableControl`: Associate the label with the `contentEditable` field via `aria-labelledby` instead of an invalid `label[for]`, which triggered Chrome console errors ([#80344](https://github.com/WordPress/gutenberg/pull/80344)).
+-   `SearchControl`: Render suffix only if there is one. ([#80356](https://github.com/WordPress/gutenberg/pull/80356), [#80406](https://github.com/WordPress/gutenberg/pull/80406)).
+-   `ColorPicker`: Keep the visual picker in native HSVA so gradient/controlled HSLA echoes no longer jitter the saturation pointer, and preserve the black-edge saturation coordinate without leaving white at a chromatic position ([#80205](https://github.com/WordPress/gutenberg/pull/80205)).
+
+### TypeScript
+
+-   Update Jest type definitions to v30 ([#80767](https://github.com/WordPress/gutenberg/pull/80767)).
+-   `Autocomplete`: `__unstableUseAutocompleteProps` now narrows its returned ARIA props and no longer asks for a `contentRef` it never used, so callers can spread its return value onto an element without a placeholder ref, normalizing, or casting ([#80403](https://github.com/WordPress/gutenberg/pull/80403)).
+-   Improved performance of TypeScript types for internal polymorphic `WordPressComponent` component type ([#80364](https://github.com/WordPress/gutenberg/pull/80364)).
+
+### Internal
+
+-   Update `date-fns` to 4.4.0 ([#80763](https://github.com/WordPress/gutenberg/pull/80763)).
+-   Update `memize` to 2.1.1 ([#80764](https://github.com/WordPress/gutenberg/pull/80764)).
+-   `TextControl`, `ComboboxControl`, `FormTokenField`, `ContentEditableControl`: Replace `--wp-components-color-accent` with `--wp-admin-theme-color` for focus ring color ([#80595](https://github.com/WordPress/gutenberg/pull/80595)).
+-   `ConfirmDialog`: Migrate styles from Emotion to an SCSS Module ([#80394](https://github.com/WordPress/gutenberg/pull/80394)).
+-   `ExternalLink`: Use the shared `outset-ring__focus` mixin for the focus ring ([#80573](https://github.com/WordPress/gutenberg/pull/80573)).
+-   `SearchControl`: Migrate styles from Emotion to an SCSS Module ([#80474](https://github.com/WordPress/gutenberg/pull/80474)).
+-   `FormTokenField`: Migrate styles from Emotion to an SCSS Module ([#80472](https://github.com/WordPress/gutenberg/pull/80472)).
+-   `InputControl`, `SelectControl`, `CustomSelectControl`, `ToggleGroupControl`, and `RangeControl`: Remove obsolete internal `__shouldNotWarnDeprecated36pxSize` prop ([#80323](https://github.com/WordPress/gutenberg/pull/80323)).
+-   `InputControl`, `SelectControl`, `CustomSelectControl`: Remove obsolete `__unstable-large` from the public `size` type. The value continues to work at runtime, and is equivalent to the `default` size. ([#80081](https://github.com/WordPress/gutenberg/pull/80081)).
+-   `ToggleGroupControl`: Migrate styles from Emotion to SCSS Modules and use WPDS tokens for migrated visual values ([#80381](https://github.com/WordPress/gutenberg/pull/80381)).
+-   `Disabled`: Migrate styles from Emotion to an SCSS Module ([#80643](https://github.com/WordPress/gutenberg/pull/80643)).
+-   Update `exports` to use subpath patterns instead of deprecated trailing `/` folder mappings ([#80270](https://github.com/WordPress/gutenberg/pull/80270)).
+
 ## 37.0.0 (2026-07-14)
 
 ### Enhancements

package/build/autocomplete/index.cjs

@@ -327,8 +327,10 @@ function useAutocompleteProps(options) {
     ref: mergedRefs,
     children: popover,
     "aria-autocomplete": listBoxId ? "list" : void 0,
+    "aria-haspopup": listBoxId ? "listbox" : void 0,
+    "aria-controls": listBoxId,
     "aria-owns": listBoxId,
-    "aria-activedescendant": activeId
+    "aria-activedescendant": activeId ?? void 0
   };
 }
 function Autocomplete({

package/build/autocomplete/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/autocomplete/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { renderToString, useEffect, useMemo, useReducer, useRef } from '@wordpress/element';\nimport { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { create, slice, insert, isCollapsed, getTextContent, privateApis as richTextPrivateApis } from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { AutocompleterUI } from './autocompleter-ui';\nimport { getAutocompleteMatch } from './get-autocomplete-match';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport getNodeText from '../utils/get-node-text';\nimport { unlock } from '../lock-unlock';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst {\n  subscribeOwnedListener\n} = unlock(richTextPrivateApis);\nconst EMPTY_FILTERED_OPTIONS = [];\n\n// Used for generating the instance ID\nconst AUTOCOMPLETE_HOOK_REFERENCE = {};\nfunction getCompletionObject(completion) {\n  if (completion !== null && typeof completion === 'object' && 'action' in completion && completion.action !== undefined && 'value' in completion && completion.value !== undefined) {\n    return completion;\n  }\n  return {\n    action: 'insert-at-caret',\n    value: completion\n  };\n}\nconst initialState = {\n  selectedIndex: 0,\n  filteredOptions: EMPTY_FILTERED_OPTIONS,\n  filterValue: '',\n  autocompleter: null\n};\nfunction autocompleteReducer(state, action) {\n  switch (action.type) {\n    case 'RESET':\n      return initialState;\n    case 'SELECT':\n      return {\n        ...state,\n        selectedIndex: action.index\n      };\n    case 'OPTIONS':\n      return {\n        ...state,\n        filteredOptions: action.options,\n        selectedIndex: action.options.length === state.filteredOptions.length ? state.selectedIndex : 0\n      };\n    case 'MATCH':\n      return {\n        ...state,\n        autocompleter: action.completer,\n        filterValue: action.query\n      };\n  }\n}\nexport function useAutocomplete({\n  record,\n  onChange,\n  onReplace,\n  completers,\n  contentRef\n}) {\n  const instanceId = useInstanceId(AUTOCOMPLETE_HOOK_REFERENCE);\n  const [state, dispatch] = useReducer(autocompleteReducer, initialState);\n  const {\n    selectedIndex,\n    filteredOptions,\n    filterValue,\n    autocompleter\n  } = state;\n  const backspacingRef = useRef(false);\n  const prevRecordTextRef = useRef('');\n  const lastCompletionRef = useRef(null);\n  function insertCompletion(replacement) {\n    if (autocompleter === null) {\n      return '';\n    }\n    const end = record.start;\n    const start = end - autocompleter.triggerPrefix.length - filterValue.length;\n    const toInsert = create({\n      html: renderToString(replacement)\n    });\n    onChange(insert(record, toInsert, start, end));\n    return getTextContent(toInsert);\n  }\n  function select(option) {\n    if (option.isDisabled || !autocompleter) {\n      return;\n    }\n    const {\n      getOptionCompletion\n    } = autocompleter;\n    if (!getOptionCompletion) {\n      dispatch({\n        type: 'RESET'\n      });\n      contentRef.current?.focus();\n      return;\n    }\n    const completionObject = getCompletionObject(getOptionCompletion(option.value, filterValue));\n    if ('replace' === completionObject.action) {\n      onReplace([completionObject.value]);\n      // When replacing, the component will unmount, so don't reset\n      // state (below) on an unmounted component.\n      return;\n    }\n    if ('insert-at-caret' === completionObject.action) {\n      const completionText = insertCompletion(completionObject.value);\n      // When the completion value starts with the trigger prefix\n      // (e.g. @username), the trigger stays in the text and would\n      // re-activate the autocompleter. Store the completed text so\n      // the effect can suppress the stale re-match.\n      if (completionText.startsWith(autocompleter.triggerPrefix)) {\n        const afterPrefix = completionText.slice(autocompleter.triggerPrefix.length);\n        if (afterPrefix) {\n          lastCompletionRef.current = {\n            name: autocompleter.name,\n            value: afterPrefix\n          };\n        }\n      }\n    }\n\n    // Reset autocomplete state after insertion rather than before\n    // so insertion events don't cause the completion menu to redisplay.\n    dispatch({\n      type: 'RESET'\n    });\n\n    // Make sure that the content remains focused after making a selection\n    // and that the text cursor position is not lost.\n    contentRef.current?.focus();\n  }\n  function onChangeOptions(options) {\n    dispatch({\n      type: 'OPTIONS',\n      options\n    });\n  }\n  function handleKeyDown(event) {\n    backspacingRef.current = event.key === 'Backspace';\n    if (!autocompleter) {\n      return;\n    }\n    if (filteredOptions.length === 0) {\n      return;\n    }\n    if (event.defaultPrevented) {\n      return;\n    }\n    switch (event.key) {\n      case 'ArrowUp':\n      case 'ArrowDown':\n        {\n          const offset = event.key === 'ArrowUp' ? -1 : 1;\n          const newIndex = (selectedIndex + offset + filteredOptions.length) % filteredOptions.length;\n          dispatch({\n            type: 'SELECT',\n            index: newIndex\n          });\n          // See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.\n          if (isAppleOS()) {\n            speak(getNodeText(filteredOptions[newIndex].label), 'assertive');\n          }\n          break;\n        }\n      case 'Escape':\n        dispatch({\n          type: 'RESET'\n        });\n        event.preventDefault();\n        break;\n      case 'Enter':\n        select(filteredOptions[selectedIndex]);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowRight':\n        dispatch({\n          type: 'RESET'\n        });\n        return;\n      default:\n        return;\n    }\n\n    // Any handled key should prevent original behavior. This relies on\n    // the early return in the default case.\n    event.preventDefault();\n  }\n\n  // textContent is a primitive (string), memoizing is not strictly necessary\n  // but this is a preemptive performance improvement, since the autocompleter\n  // is a potential bottleneck for the editor type metric.\n  const textContent = useMemo(() => {\n    if (isCollapsed(record)) {\n      return getTextContent(slice(record, 0));\n    }\n    return '';\n  }, [record]);\n  useEffect(() => {\n    const isTextChange = record.text !== prevRecordTextRef.current;\n    prevRecordTextRef.current = record.text;\n    function getTextAfterSelection() {\n      return textContent ? getTextContent(slice(record, undefined, getTextContent(record).length)) : '';\n    }\n    const match = getAutocompleteMatch(textContent, completers, {\n      matchCount: filteredOptions.length,\n      isBackspacing: backspacingRef.current,\n      getTextAfterSelection,\n      lastCompletion: lastCompletionRef.current\n    });\n    if (!match) {\n      if (autocompleter) {\n        dispatch({\n          type: 'RESET'\n        });\n      }\n      return;\n    }\n    const {\n      completer,\n      filterValue: query\n    } = match;\n\n    // Don't re-activate a dismissed autocompleter on cursor-only\n    // movement. `textContent` (text before cursor) changes with the\n    // caret, so the effect re-runs, but `record.text` does not.\n    // Complements the render-time `didUserInput` gate in\n    // `useAutocompleteProps` for callers using this hook directly.\n    if (!autocompleter && !isTextChange) {\n      return;\n    }\n\n    // Clear stale completion ref when the user types a new trigger\n    // for the same completer (the previous completion is no longer\n    // relevant). Must be after the cursor-only check so that mere\n    // cursor movement doesn't discard the suppression state.\n    if (lastCompletionRef.current && lastCompletionRef.current.name === completer.name) {\n      lastCompletionRef.current = null;\n    }\n    dispatch({\n      type: 'MATCH',\n      completer,\n      query\n    });\n    // We want to avoid introducing unexpected side effects.\n    // See https://github.com/WordPress/gutenberg/pull/41820\n  }, [textContent]);\n  const {\n    key: selectedKey = ''\n  } = filteredOptions[selectedIndex] || {};\n  const {\n    className\n  } = autocompleter || {};\n  const isExpanded = !!autocompleter && filteredOptions.length > 0;\n  const listBoxId = isExpanded ? `components-autocomplete-listbox-${instanceId}` : undefined;\n  const activeId = isExpanded ? `components-autocomplete-item-${instanceId}-${selectedKey}` : null;\n  const hasSelection = record.start !== undefined;\n  const showPopover = !!textContent && hasSelection && !!autocompleter;\n  return {\n    listBoxId,\n    activeId,\n    onKeyDown: withIgnoreIMEEvents(handleKeyDown),\n    popover: showPopover && /*#__PURE__*/_jsx(AutocompleterUI, {\n      autocompleter: autocompleter,\n      className: className,\n      filterValue: filterValue,\n      instanceId: instanceId,\n      listBoxId: listBoxId,\n      selectedIndex: selectedIndex,\n      onChangeOptions: onChangeOptions,\n      onSelect: select,\n      contentRef: contentRef,\n      reset: () => dispatch({\n        type: 'RESET'\n      })\n    }, autocompleter.name + autocompleter.triggerPrefix)\n  };\n}\n\n/**\n * Checks whether two records represent the same user-visible state\n * (same text content and cursor position).\n */\nfunction recordValuesMatch(a, b) {\n  return a.text === b.text && a.start === b.start && a.end === b.end;\n}\n\n/**\n * Tracks the last record whose value differed from the current one.\n * Used to determine whether the user has actually typed something\n */\nexport function useLastDifferentValue(value) {\n  const history = useRef([]);\n  const lastEntry = history.current[history.current.length - 1];\n\n  // Only add to history if the value is meaningfully different from\n  // the most recent entry (analogous to Set.add being a no-op for\n  // duplicate references in the original implementation).\n  if (!lastEntry || !recordValuesMatch(value, lastEntry)) {\n    history.current.push(value);\n  }\n\n  // Keep the history size to 2.\n  if (history.current.length > 2) {\n    history.current.shift();\n  }\n  return history.current[0];\n}\nexport function useAutocompleteProps(options) {\n  const ref = useRef(null);\n  const onKeyDownRef = useRef(undefined);\n  const {\n    record\n  } = options;\n  const previousRecord = useLastDifferentValue(record);\n  const {\n    popover,\n    listBoxId,\n    activeId,\n    onKeyDown\n  } = useAutocomplete({\n    ...options,\n    contentRef: ref\n  });\n  onKeyDownRef.current = onKeyDown;\n  const mergedRefs = useMergeRefs([ref, useRefEffect(element => {\n    function _onKeyDown(event) {\n      onKeyDownRef.current?.(event);\n    }\n    // Capture phase. When the autocomplete popover is open,\n    // Up/Down/Enter/Escape must navigate the completion list —\n    // they shouldn't be consumed by ancestor handlers (e.g.\n    // block-editor's writing-flow) for block navigation, block\n    // splitting, or \"move out of parent\" actions. Those handlers\n    // fire at bubble phase and gate on `event.defaultPrevented`,\n    // so firing in capture lets us preventDefault first when the\n    // popover is active.\n    return subscribeOwnedListener(element, 'keydown', _onKeyDown, true);\n  }, [])]);\n\n  // We only want to show the popover if the user has typed something.\n  const didUserInput = record.text !== previousRecord?.text;\n  if (!didUserInput) {\n    return {\n      ref: mergedRefs\n    };\n  }\n  return {\n    ref: mergedRefs,\n    children: popover,\n    'aria-autocomplete': listBoxId ? 'list' : undefined,\n    'aria-owns': listBoxId,\n    'aria-activedescendant': activeId\n  };\n}\nexport default function Autocomplete({\n  children,\n  isSelected,\n  ...options\n}) {\n  const {\n    popover,\n    ...props\n  } = useAutocomplete(options);\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [children(props), isSelected && popover]\n  });\n}"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { renderToString, useEffect, useMemo, useReducer, useRef } from '@wordpress/element';\nimport { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { create, slice, insert, isCollapsed, getTextContent, privateApis as richTextPrivateApis } from '@wordpress/rich-text';\nimport { speak } from '@wordpress/a11y';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { AutocompleterUI } from './autocompleter-ui';\nimport { getAutocompleteMatch } from './get-autocomplete-match';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport getNodeText from '../utils/get-node-text';\nimport { unlock } from '../lock-unlock';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst {\n  subscribeOwnedListener\n} = unlock(richTextPrivateApis);\nconst EMPTY_FILTERED_OPTIONS = [];\n\n// Used for generating the instance ID\nconst AUTOCOMPLETE_HOOK_REFERENCE = {};\nfunction getCompletionObject(completion) {\n  if (completion !== null && typeof completion === 'object' && 'action' in completion && completion.action !== undefined && 'value' in completion && completion.value !== undefined) {\n    return completion;\n  }\n  return {\n    action: 'insert-at-caret',\n    value: completion\n  };\n}\nconst initialState = {\n  selectedIndex: 0,\n  filteredOptions: EMPTY_FILTERED_OPTIONS,\n  filterValue: '',\n  autocompleter: null\n};\nfunction autocompleteReducer(state, action) {\n  switch (action.type) {\n    case 'RESET':\n      return initialState;\n    case 'SELECT':\n      return {\n        ...state,\n        selectedIndex: action.index\n      };\n    case 'OPTIONS':\n      return {\n        ...state,\n        filteredOptions: action.options,\n        selectedIndex: action.options.length === state.filteredOptions.length ? state.selectedIndex : 0\n      };\n    case 'MATCH':\n      return {\n        ...state,\n        autocompleter: action.completer,\n        filterValue: action.query\n      };\n  }\n}\nexport function useAutocomplete({\n  record,\n  onChange,\n  onReplace,\n  completers,\n  contentRef\n}) {\n  const instanceId = useInstanceId(AUTOCOMPLETE_HOOK_REFERENCE);\n  const [state, dispatch] = useReducer(autocompleteReducer, initialState);\n  const {\n    selectedIndex,\n    filteredOptions,\n    filterValue,\n    autocompleter\n  } = state;\n  const backspacingRef = useRef(false);\n  const prevRecordTextRef = useRef('');\n  const lastCompletionRef = useRef(null);\n  function insertCompletion(replacement) {\n    if (autocompleter === null) {\n      return '';\n    }\n    const end = record.start;\n    const start = end - autocompleter.triggerPrefix.length - filterValue.length;\n    const toInsert = create({\n      html: renderToString(replacement)\n    });\n    onChange(insert(record, toInsert, start, end));\n    return getTextContent(toInsert);\n  }\n  function select(option) {\n    if (option.isDisabled || !autocompleter) {\n      return;\n    }\n    const {\n      getOptionCompletion\n    } = autocompleter;\n    if (!getOptionCompletion) {\n      dispatch({\n        type: 'RESET'\n      });\n      contentRef.current?.focus();\n      return;\n    }\n    const completionObject = getCompletionObject(getOptionCompletion(option.value, filterValue));\n    if ('replace' === completionObject.action) {\n      onReplace([completionObject.value]);\n      // When replacing, the component will unmount, so don't reset\n      // state (below) on an unmounted component.\n      return;\n    }\n    if ('insert-at-caret' === completionObject.action) {\n      const completionText = insertCompletion(completionObject.value);\n      // When the completion value starts with the trigger prefix\n      // (e.g. @username), the trigger stays in the text and would\n      // re-activate the autocompleter. Store the completed text so\n      // the effect can suppress the stale re-match.\n      if (completionText.startsWith(autocompleter.triggerPrefix)) {\n        const afterPrefix = completionText.slice(autocompleter.triggerPrefix.length);\n        if (afterPrefix) {\n          lastCompletionRef.current = {\n            name: autocompleter.name,\n            value: afterPrefix\n          };\n        }\n      }\n    }\n\n    // Reset autocomplete state after insertion rather than before\n    // so insertion events don't cause the completion menu to redisplay.\n    dispatch({\n      type: 'RESET'\n    });\n\n    // Make sure that the content remains focused after making a selection\n    // and that the text cursor position is not lost.\n    contentRef.current?.focus();\n  }\n  function onChangeOptions(options) {\n    dispatch({\n      type: 'OPTIONS',\n      options\n    });\n  }\n  function handleKeyDown(event) {\n    backspacingRef.current = event.key === 'Backspace';\n    if (!autocompleter) {\n      return;\n    }\n    if (filteredOptions.length === 0) {\n      return;\n    }\n    if (event.defaultPrevented) {\n      return;\n    }\n    switch (event.key) {\n      case 'ArrowUp':\n      case 'ArrowDown':\n        {\n          const offset = event.key === 'ArrowUp' ? -1 : 1;\n          const newIndex = (selectedIndex + offset + filteredOptions.length) % filteredOptions.length;\n          dispatch({\n            type: 'SELECT',\n            index: newIndex\n          });\n          // See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.\n          if (isAppleOS()) {\n            speak(getNodeText(filteredOptions[newIndex].label), 'assertive');\n          }\n          break;\n        }\n      case 'Escape':\n        dispatch({\n          type: 'RESET'\n        });\n        event.preventDefault();\n        break;\n      case 'Enter':\n        select(filteredOptions[selectedIndex]);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowRight':\n        dispatch({\n          type: 'RESET'\n        });\n        return;\n      default:\n        return;\n    }\n\n    // Any handled key should prevent original behavior. This relies on\n    // the early return in the default case.\n    event.preventDefault();\n  }\n\n  // textContent is a primitive (string), memoizing is not strictly necessary\n  // but this is a preemptive performance improvement, since the autocompleter\n  // is a potential bottleneck for the editor type metric.\n  const textContent = useMemo(() => {\n    if (isCollapsed(record)) {\n      return getTextContent(slice(record, 0));\n    }\n    return '';\n  }, [record]);\n  useEffect(() => {\n    const isTextChange = record.text !== prevRecordTextRef.current;\n    prevRecordTextRef.current = record.text;\n    function getTextAfterSelection() {\n      return textContent ? getTextContent(slice(record, undefined, getTextContent(record).length)) : '';\n    }\n    const match = getAutocompleteMatch(textContent, completers, {\n      matchCount: filteredOptions.length,\n      isBackspacing: backspacingRef.current,\n      getTextAfterSelection,\n      lastCompletion: lastCompletionRef.current\n    });\n    if (!match) {\n      if (autocompleter) {\n        dispatch({\n          type: 'RESET'\n        });\n      }\n      return;\n    }\n    const {\n      completer,\n      filterValue: query\n    } = match;\n\n    // Don't re-activate a dismissed autocompleter on cursor-only\n    // movement. `textContent` (text before cursor) changes with the\n    // caret, so the effect re-runs, but `record.text` does not.\n    // Complements the render-time `didUserInput` gate in\n    // `useAutocompleteProps` for callers using this hook directly.\n    if (!autocompleter && !isTextChange) {\n      return;\n    }\n\n    // Clear stale completion ref when the user types a new trigger\n    // for the same completer (the previous completion is no longer\n    // relevant). Must be after the cursor-only check so that mere\n    // cursor movement doesn't discard the suppression state.\n    if (lastCompletionRef.current && lastCompletionRef.current.name === completer.name) {\n      lastCompletionRef.current = null;\n    }\n    dispatch({\n      type: 'MATCH',\n      completer,\n      query\n    });\n    // We want to avoid introducing unexpected side effects.\n    // See https://github.com/WordPress/gutenberg/pull/41820\n  }, [textContent]);\n  const {\n    key: selectedKey = ''\n  } = filteredOptions[selectedIndex] || {};\n  const {\n    className\n  } = autocompleter || {};\n  const isExpanded = !!autocompleter && filteredOptions.length > 0;\n  const listBoxId = isExpanded ? `components-autocomplete-listbox-${instanceId}` : undefined;\n  const activeId = isExpanded ? `components-autocomplete-item-${instanceId}-${selectedKey}` : null;\n  const hasSelection = record.start !== undefined;\n  const showPopover = !!textContent && hasSelection && !!autocompleter;\n  return {\n    listBoxId,\n    activeId,\n    onKeyDown: withIgnoreIMEEvents(handleKeyDown),\n    popover: showPopover && /*#__PURE__*/_jsx(AutocompleterUI, {\n      autocompleter: autocompleter,\n      className: className,\n      filterValue: filterValue,\n      instanceId: instanceId,\n      listBoxId: listBoxId,\n      selectedIndex: selectedIndex,\n      onChangeOptions: onChangeOptions,\n      onSelect: select,\n      contentRef: contentRef,\n      reset: () => dispatch({\n        type: 'RESET'\n      })\n    }, autocompleter.name + autocompleter.triggerPrefix)\n  };\n}\n\n/**\n * Checks whether two records represent the same user-visible state\n * (same text content and cursor position).\n */\nfunction recordValuesMatch(a, b) {\n  return a.text === b.text && a.start === b.start && a.end === b.end;\n}\n\n/**\n * Tracks the last record whose value differed from the current one.\n * Used to determine whether the user has actually typed something\n */\nexport function useLastDifferentValue(value) {\n  const history = useRef([]);\n  const lastEntry = history.current[history.current.length - 1];\n\n  // Only add to history if the value is meaningfully different from\n  // the most recent entry (analogous to Set.add being a no-op for\n  // duplicate references in the original implementation).\n  if (!lastEntry || !recordValuesMatch(value, lastEntry)) {\n    history.current.push(value);\n  }\n\n  // Keep the history size to 2.\n  if (history.current.length > 2) {\n    history.current.shift();\n  }\n  return history.current[0];\n}\n\n// The popover is anchored to the element this hook's own `ref` lands on, so it\n// owns `contentRef` and callers don't provide one.\nexport function useAutocompleteProps(options) {\n  const ref = useRef(null);\n  const onKeyDownRef = useRef(undefined);\n  const {\n    record\n  } = options;\n  const previousRecord = useLastDifferentValue(record);\n  const {\n    popover,\n    listBoxId,\n    activeId,\n    onKeyDown\n  } = useAutocomplete({\n    ...options,\n    contentRef: ref\n  });\n  onKeyDownRef.current = onKeyDown;\n  const mergedRefs = useMergeRefs([ref, useRefEffect(element => {\n    function _onKeyDown(event) {\n      onKeyDownRef.current?.(event);\n    }\n    // Capture phase. When the autocomplete popover is open,\n    // Up/Down/Enter/Escape must navigate the completion list —\n    // they shouldn't be consumed by ancestor handlers (e.g.\n    // block-editor's writing-flow) for block navigation, block\n    // splitting, or \"move out of parent\" actions. Those handlers\n    // fire at bubble phase and gate on `event.defaultPrevented`,\n    // so firing in capture lets us preventDefault first when the\n    // popover is active.\n    return subscribeOwnedListener(element, 'keydown', _onKeyDown, true);\n  }, [])]);\n\n  // We only want to show the popover if the user has typed something.\n  const didUserInput = record.text !== previousRecord?.text;\n  if (!didUserInput) {\n    return {\n      ref: mergedRefs\n    };\n  }\n\n  // `aria-owns` and `aria-controls` point at the same list: either one lets\n  // `aria-activedescendant` resolve to an option rendered outside this\n  // element, and assistive technology support differs between them.\n  //\n  // No `aria-expanded`: consumers are `textbox` elements, which don't\n  // support it; that would mean `role=\"combobox\"`, which in turn doesn't\n  // support the `aria-multiline` these fields set.\n  return {\n    ref: mergedRefs,\n    children: popover,\n    'aria-autocomplete': listBoxId ? 'list' : undefined,\n    'aria-haspopup': listBoxId ? 'listbox' : undefined,\n    'aria-controls': listBoxId,\n    'aria-owns': listBoxId,\n    'aria-activedescendant': activeId ?? undefined\n  };\n}\nexport default function Autocomplete({\n  children,\n  isSelected,\n  ...options\n}) {\n  const {\n    popover,\n    ...props\n  } = useAutocomplete(options);\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [children(props), isSelected && popover]\n  });\n}"],
+  "mappings": "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",
   "names": ["richTextPrivateApis", "getNodeText", "_jsx", "_jsxs", "_Fragment"]
 }

package/build/color-picker/component.cjs

@@ -95,12 +95,15 @@ var UnconnectedColorPicker = (props, forwardedRef) => {
     ...safeColordColor.toHsl()
   }));
   const lastProducedHexRef = (0, import_element.useRef)(safeColordColor.toHex());
+  const isPickerInteractingRef = (0, import_element.useRef)(false);
   (0, import_element.useEffect)(() => {
-    const incomingHex = safeColordColor.toHex();
-    if (incomingHex === lastProducedHexRef.current) {
+    if (isPickerInteractingRef.current) {
       return;
     }
-    lastProducedHexRef.current = incomingHex;
+    if (safeColordColor.isEqual(lastProducedHexRef.current)) {
+      return;
+    }
+    lastProducedHexRef.current = safeColordColor.toHex();
     const externalHSLA = safeColordColor.toHsl();
     setInternalHSLA((prev) => mergeHSLA(externalHSLA, prev));
   }, [safeColordColor]);
@@ -108,7 +111,7 @@ var UnconnectedColorPicker = (props, forwardedRef) => {
     setInternalHSLA(nextHSLA);
     const previousHex = lastProducedHexRef.current;
     const nextHex = (0, import_colord.colord)(nextHSLA).toHex();
-    if (nextHex !== previousHex) {
+    if (!(0, import_colord.colord)(nextHex).isEqual(previousHex)) {
       lastProducedHexRef.current = nextHex;
       setColor(nextHex);
     }
@@ -151,7 +154,13 @@ var UnconnectedColorPicker = (props, forwardedRef) => {
     children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_picker.Picker, {
       onChange: handleHSLAChange,
       hsla: internalHSLA,
-      enableAlpha
+      enableAlpha,
+      onInteractionStart: () => {
+        isPickerInteractingRef.current = true;
+      },
+      onInteractionEnd: () => {
+        isPickerInteractingRef.current = false;
+      }
     }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.AuxiliaryColorArtefactWrapper, {
       children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.AuxiliaryColorArtefactHStackHeader, {
         justify: "space-between",

package/build/color-picker/component.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { colord, extend, getFormat } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../context';\nimport { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, AuxiliaryColorArtefactHStackHeader, ColorInputWrapper } from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin]);\n\n/**\n * Merges incoming HSLA with previous state, preserving hue for achromatic\n * colors and saturation only at lightness extremes (black/white) where\n * it has no visual effect.\n */\nfunction mergeHSLA(nextHSLA, prevHSLA) {\n  if (nextHSLA.s === 0) {\n    if (nextHSLA.l === 0 || nextHSLA.l === 100) {\n      return {\n        ...nextHSLA,\n        h: prevHSLA.h,\n        s: prevHSLA.s\n      };\n    }\n    return {\n      ...nextHSLA,\n      h: prevHSLA.h\n    };\n  }\n  return nextHSLA;\n}\nconst options = [{\n  label: 'RGB',\n  value: 'rgb'\n}, {\n  label: 'HSL',\n  value: 'hsl'\n}, {\n  label: 'Hex',\n  value: 'hex'\n}];\nconst UnconnectedColorPicker = (props, forwardedRef) => {\n  const {\n    enableAlpha = false,\n    color: colorProp,\n    onChange,\n    defaultValue = '#fff',\n    copyFormat,\n    ...divProps\n  } = useContextSystem(props, 'ColorPicker');\n\n  // Use a safe default value for the color and remove the possibility of `undefined`.\n  const [color, setColor] = useControlledValue({\n    onChange,\n    value: colorProp,\n    defaultValue\n  });\n  const safeColordColor = useMemo(() => {\n    return colord(color || '');\n  }, [color]);\n  const debouncedSetColor = useDebounce(setColor);\n\n  // Internal HSLA state preserves hue and saturation values that\n  // would otherwise be lost when converting to/from hex at achromatic\n  // colors (e.g. pure black or white where any H/S maps to the same hex).\n  const [internalHSLA, setInternalHSLA] = useState(() => ({\n    ...safeColordColor.toHsl()\n  }));\n\n  // Track the last hex we produced so the sync effect can\n  // distinguish our own updates from external prop changes.\n  const lastProducedHexRef = useRef(safeColordColor.toHex());\n\n  // Sync internalHSLA when the color prop changes externally (e.g.\n  // parent passes a new color that wasn't produced by our onChange).\n  useEffect(() => {\n    const incomingHex = safeColordColor.toHex();\n\n    // If this hex matches what we last produced, it's our own\n    // update arriving back — skip the sync to avoid overwriting\n    // internalHSLA with lossy round-tripped values.\n    if (incomingHex === lastProducedHexRef.current) {\n      return;\n    }\n\n    // Genuinely external change — sync internalHSLA.\n    lastProducedHexRef.current = incomingHex;\n    const externalHSLA = safeColordColor.toHsl();\n    setInternalHSLA(prev => mergeHSLA(externalHSLA, prev));\n  }, [safeColordColor]);\n\n  // Handler for HSL-aware components (Picker, HSL inputs) that\n  // provide raw HSLA values without information loss.\n  // Uses direct setColor (not debounced) to prevent race conditions\n  // where a stale debounced hex would overwrite newer internalHSLA.\n  // This is safe performance-wise because react-colorful internally\n  // throttles its onChange callbacks using requestAnimationFrame.\n\n  const handleHSLAChange = useCallback(nextHSLA => {\n    // No mergeHSLA here — this handler receives the user's explicit\n    // choice from the picker or HSL inputs, with no lossy conversion.\n    setInternalHSLA(nextHSLA);\n    const previousHex = lastProducedHexRef.current;\n    const nextHex = colord(nextHSLA).toHex();\n    // Only notify parent when the hex actually changes. This\n    // avoids firing onChange for H/S changes on achromatic\n    // colors (e.g. adjusting hue on pure white).\n    if (nextHex !== previousHex) {\n      lastProducedHexRef.current = nextHex;\n      setColor(nextHex);\n    }\n  }, [setColor]);\n\n  // Handler for components that provide Colord values (RGB, Hex inputs).\n  // Uses debouncedSetColor since the hex input fires per keystroke.\n  const handleChange = useCallback(nextValue => {\n    const nextHSLA = nextValue.toHsl();\n    setInternalHSLA(prev => mergeHSLA(nextHSLA, prev));\n    const nextHex = nextValue.toHex();\n    lastProducedHexRef.current = nextHex;\n    debouncedSetColor(nextHex);\n  }, [debouncedSetColor]);\n  const [colorType, setColorType] = useState(copyFormat || 'hex');\n\n  /*\n   * ! Listener intended for the CAPTURE phase\n   *\n   * Capture paste events over the entire color picker, looking for clipboard\n   * data that could be parsed as a color. If not, let the paste event\n   * propagate normally, so that individual input controls within the\n   * component have a chance to handle it.\n   */\n  const maybeHandlePaste = useCallback(event => {\n    const pastedText = event.clipboardData?.getData('text')?.trim();\n    if (!pastedText) {\n      return;\n    }\n    const parsedColor = colord(pastedText);\n    if (!parsedColor.isValid()) {\n      return;\n    }\n\n    // Apply all valid colors, even if the format isn't supported in\n    // the UI (e.g. names like \"cyan\" or, in the future color spaces\n    // like \"lch\" if we add the right colord plugins)\n    handleChange(parsedColor);\n\n    // This redundancy helps TypeScript and is safer than assertions\n    const supportedFormats = {\n      hex: 'hex',\n      rgb: 'rgb',\n      hsl: 'hsl'\n    };\n    const detectedFormat = String(getFormat(pastedText));\n    const newColorType = supportedFormats[detectedFormat];\n    if (newColorType) {\n      setColorType(newColorType);\n    }\n\n    // Stop at capture phase; no bubbling\n    event.stopPropagation();\n    event.preventDefault();\n  }, [handleChange, setColorType]);\n  return /*#__PURE__*/_jsxs(ColorfulWrapper, {\n    ref: forwardedRef,\n    ...divProps,\n    onPasteCapture: maybeHandlePaste,\n    children: [/*#__PURE__*/_jsx(Picker, {\n      onChange: handleHSLAChange,\n      hsla: internalHSLA,\n      enableAlpha: enableAlpha\n    }), /*#__PURE__*/_jsxs(AuxiliaryColorArtefactWrapper, {\n      children: [/*#__PURE__*/_jsxs(AuxiliaryColorArtefactHStackHeader, {\n        justify: \"space-between\",\n        children: [/*#__PURE__*/_jsx(SelectControl, {\n          size: \"compact\",\n          options: options,\n          value: colorType,\n          onChange: nextColorType => setColorType(nextColorType),\n          label: __('Color format'),\n          hideLabelFromVision: true,\n          variant: \"minimal\"\n        }), /*#__PURE__*/_jsx(ColorCopyButton, {\n          color: safeColordColor,\n          colorType: copyFormat || colorType\n        })]\n      }), /*#__PURE__*/_jsx(ColorInputWrapper, {\n        direction: \"column\",\n        gap: 2,\n        children: /*#__PURE__*/_jsx(ColorInput, {\n          colorType: colorType,\n          color: safeColordColor,\n          hsla: internalHSLA,\n          onChange: handleChange,\n          onHSLChange: handleHSLAChange,\n          enableAlpha: enableAlpha\n        })\n      })]\n    })]\n  });\n};\n\n/**\n * `ColorPicker` lets users select a color from a visual color surface, or by\n * editing its hex, RGB, or HSL values.\n */\nexport const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker');\nexport default ColorPicker;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { colord, extend, getFormat } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../context';\nimport { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, AuxiliaryColorArtefactHStackHeader, ColorInputWrapper } from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin]);\n\n/**\n * Merges incoming HSLA with previous state, preserving hue for achromatic\n * colors and saturation only at lightness extremes (black/white) where\n * it has no visual effect.\n */\nfunction mergeHSLA(nextHSLA, prevHSLA) {\n  if (nextHSLA.s === 0) {\n    if (nextHSLA.l === 0 || nextHSLA.l === 100) {\n      return {\n        ...nextHSLA,\n        h: prevHSLA.h,\n        s: prevHSLA.s\n      };\n    }\n    return {\n      ...nextHSLA,\n      h: prevHSLA.h\n    };\n  }\n  return nextHSLA;\n}\nconst options = [{\n  label: 'RGB',\n  value: 'rgb'\n}, {\n  label: 'HSL',\n  value: 'hsl'\n}, {\n  label: 'Hex',\n  value: 'hex'\n}];\nconst UnconnectedColorPicker = (props, forwardedRef) => {\n  const {\n    enableAlpha = false,\n    color: colorProp,\n    onChange,\n    defaultValue = '#fff',\n    copyFormat,\n    ...divProps\n  } = useContextSystem(props, 'ColorPicker');\n\n  // Use a safe default value for the color and remove the possibility of `undefined`.\n  const [color, setColor] = useControlledValue({\n    onChange,\n    value: colorProp,\n    defaultValue\n  });\n  const safeColordColor = useMemo(() => {\n    return colord(color || '');\n  }, [color]);\n  const debouncedSetColor = useDebounce(setColor);\n\n  // Internal HSLA state preserves hue and saturation values that\n  // would otherwise be lost when converting to/from hex at achromatic\n  // colors (e.g. pure black or white where any H/S maps to the same hex).\n  const [internalHSLA, setInternalHSLA] = useState(() => ({\n    ...safeColordColor.toHsl()\n  }));\n\n  // Track the last hex we produced so the sync effect can\n  // distinguish our own updates from external prop changes.\n  const lastProducedHexRef = useRef(safeColordColor.toHex());\n\n  // While the user is dragging the visual picker, ignore color-prop sync\n  // so delayed/stale controlled echoes cannot overwrite internalHSLA mid-drag.\n  const isPickerInteractingRef = useRef(false);\n\n  // Sync internalHSLA when the color prop changes externally (e.g.\n  // parent passes a new color that wasn't produced by our onChange).\n  useEffect(() => {\n    if (isPickerInteractingRef.current) {\n      return;\n    }\n\n    // Compare by color equality, not hex string — rgb()/rgba()\n    // round-trips can differ in string form for the same color.\n    if (safeColordColor.isEqual(lastProducedHexRef.current)) {\n      return;\n    }\n\n    // Genuinely external change — sync internalHSLA.\n    lastProducedHexRef.current = safeColordColor.toHex();\n    const externalHSLA = safeColordColor.toHsl();\n    setInternalHSLA(prev => mergeHSLA(externalHSLA, prev));\n  }, [safeColordColor]);\n\n  // Handler for HSL inputs (and the HSVA picker after it converts to HSLA).\n  // Apply the user's HSLA, then notify the parent only when the color\n  // actually changes. setColor must not run inside setInternalHSLA\n  // (state updaters must be pure). Uses direct setColor (not debounced)\n  // to avoid races with hex/RGB's debouncedSetColor.\n  const handleHSLAChange = useCallback(nextHSLA => {\n    setInternalHSLA(nextHSLA);\n    const previousHex = lastProducedHexRef.current;\n    const nextHex = colord(nextHSLA).toHex();\n    if (!colord(nextHex).isEqual(previousHex)) {\n      lastProducedHexRef.current = nextHex;\n      setColor(nextHex);\n    }\n  }, [setColor]);\n\n  // Handler for components that provide Colord values (RGB, Hex inputs).\n  // Uses debouncedSetColor since the hex input fires per keystroke.\n  const handleChange = useCallback(nextValue => {\n    const nextHSLA = nextValue.toHsl();\n    setInternalHSLA(prev => mergeHSLA(nextHSLA, prev));\n    const nextHex = nextValue.toHex();\n    lastProducedHexRef.current = nextHex;\n    debouncedSetColor(nextHex);\n  }, [debouncedSetColor]);\n  const [colorType, setColorType] = useState(copyFormat || 'hex');\n\n  /*\n   * ! Listener intended for the CAPTURE phase\n   *\n   * Capture paste events over the entire color picker, looking for clipboard\n   * data that could be parsed as a color. If not, let the paste event\n   * propagate normally, so that individual input controls within the\n   * component have a chance to handle it.\n   */\n  const maybeHandlePaste = useCallback(event => {\n    const pastedText = event.clipboardData?.getData('text')?.trim();\n    if (!pastedText) {\n      return;\n    }\n    const parsedColor = colord(pastedText);\n    if (!parsedColor.isValid()) {\n      return;\n    }\n\n    // Apply all valid colors, even if the format isn't supported in\n    // the UI (e.g. names like \"cyan\" or, in the future color spaces\n    // like \"lch\" if we add the right colord plugins)\n    handleChange(parsedColor);\n\n    // This redundancy helps TypeScript and is safer than assertions\n    const supportedFormats = {\n      hex: 'hex',\n      rgb: 'rgb',\n      hsl: 'hsl'\n    };\n    const detectedFormat = String(getFormat(pastedText));\n    const newColorType = supportedFormats[detectedFormat];\n    if (newColorType) {\n      setColorType(newColorType);\n    }\n\n    // Stop at capture phase; no bubbling\n    event.stopPropagation();\n    event.preventDefault();\n  }, [handleChange, setColorType]);\n  return /*#__PURE__*/_jsxs(ColorfulWrapper, {\n    ref: forwardedRef,\n    ...divProps,\n    onPasteCapture: maybeHandlePaste,\n    children: [/*#__PURE__*/_jsx(Picker, {\n      onChange: handleHSLAChange,\n      hsla: internalHSLA,\n      enableAlpha: enableAlpha,\n      onInteractionStart: () => {\n        isPickerInteractingRef.current = true;\n      },\n      onInteractionEnd: () => {\n        isPickerInteractingRef.current = false;\n      }\n    }), /*#__PURE__*/_jsxs(AuxiliaryColorArtefactWrapper, {\n      children: [/*#__PURE__*/_jsxs(AuxiliaryColorArtefactHStackHeader, {\n        justify: \"space-between\",\n        children: [/*#__PURE__*/_jsx(SelectControl, {\n          size: \"compact\",\n          options: options,\n          value: colorType,\n          onChange: nextColorType => setColorType(nextColorType),\n          label: __('Color format'),\n          hideLabelFromVision: true,\n          variant: \"minimal\"\n        }), /*#__PURE__*/_jsx(ColorCopyButton, {\n          color: safeColordColor,\n          colorType: copyFormat || colorType\n        })]\n      }), /*#__PURE__*/_jsx(ColorInputWrapper, {\n        direction: \"column\",\n        gap: 2,\n        children: /*#__PURE__*/_jsx(ColorInput, {\n          colorType: colorType,\n          color: safeColordColor,\n          hsla: internalHSLA,\n          onChange: handleChange,\n          onHSLChange: handleHSLAChange,\n          enableAlpha: enableAlpha\n        })\n      })]\n    })]\n  });\n};\n\n/**\n * `ColorPicker` lets users select a color from a visual color surface, or by\n * editing its hex, RGB, or HSL values.\n */\nexport const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker');\nexport default ColorPicker;"],
+  "mappings": "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",
   "names": ["namesPlugin", "_jsxs", "_jsx"]
 }

package/build/color-picker/picker.cjs

@@ -23,40 +23,112 @@ __export(picker_exports, {
   Picker: () => Picker
 });
 module.exports = __toCommonJS(picker_exports);
+var import_element = require("@wordpress/element");
 var import_react_colorful = require("react-colorful");
+var import_colord = require("colord");
 var import_jsx_runtime = require("react/jsx-runtime");
-var pointerCaptureProps = {
-  onPointerDown({
-    currentTarget,
-    pointerId
-  }) {
-    currentTarget.setPointerCapture(pointerId);
-  },
-  onPointerUp({
-    currentTarget,
-    pointerId
-  }) {
-    currentTarget.releasePointerCapture(pointerId);
+function toHsva(hsla) {
+  return {
+    ...(0, import_colord.colord)(hsla).toHsv(),
+    // HSL and HSV share the hue angle. Color conversion collapses achromatic
+    // hue to 0, but HSLA retains the user's latent hue.
+    h: hsla.h,
+    a: hsla.a
+  };
+}
+function isSameHsla(a, b) {
+  return a.h === b.h && a.s === b.s && a.l === b.l && a.a === b.a;
+}
+function toHsvaFromHsla(hsla, prevHsva, prevHsla) {
+  const converted = toHsva(hsla);
+  if (hsla.l !== 0) {
+    return converted;
   }
-};
+  const saturationChanged = prevHsla !== null && prevHsla.s !== hsla.s;
+  return {
+    h: hsla.h,
+    s: saturationChanged ? hsla.s : prevHsva.s,
+    v: 0,
+    a: hsla.a
+  };
+}
 var Picker = ({
   hsla,
   enableAlpha,
-  onChange
+  onChange,
+  onInteractionStart,
+  onInteractionEnd
 }) => {
+  const [hsva, setHsva] = (0, import_element.useState)(() => toHsva(hsla));
+  const pickerOriginHslaRef = (0, import_element.useRef)(null);
+  const prevHslaRef = (0, import_element.useRef)(hsla);
+  const isPointerInteractingRef = (0, import_element.useRef)(false);
+  (0, import_element.useEffect)(() => {
+    if (isPointerInteractingRef.current) {
+      prevHslaRef.current = hsla;
+      return;
+    }
+    if (pickerOriginHslaRef.current && isSameHsla(pickerOriginHslaRef.current, hsla)) {
+      prevHslaRef.current = hsla;
+      return;
+    }
+    pickerOriginHslaRef.current = null;
+    setHsva((prev) => toHsvaFromHsla(hsla, prev, prevHslaRef.current));
+    prevHslaRef.current = hsla;
+  }, [hsla]);
+  const pointerCaptureProps = {
+    onPointerDown({
+      currentTarget,
+      pointerId
+    }) {
+      isPointerInteractingRef.current = true;
+      onInteractionStart?.();
+      currentTarget.setPointerCapture(pointerId);
+    },
+    onPointerUp({
+      currentTarget,
+      pointerId
+    }) {
+      currentTarget.releasePointerCapture(pointerId);
+      isPointerInteractingRef.current = false;
+      onInteractionEnd?.();
+    },
+    onPointerCancel({
+      currentTarget,
+      pointerId
+    }) {
+      currentTarget.releasePointerCapture(pointerId);
+      isPointerInteractingRef.current = false;
+      onInteractionEnd?.();
+    }
+  };
+  const handleChange = (next) => {
+    setHsva(next);
+    const nextHsla = {
+      ...(0, import_colord.colord)(next).toHsl(),
+      a: next.a
+    };
+    pickerOriginHslaRef.current = nextHsla;
+    onChange(nextHsla);
+  };
   if (enableAlpha) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_colorful.HslaColorPicker, {
-      color: hsla,
-      onChange,
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_colorful.HsvaColorPicker, {
+      color: hsva,
+      onChange: handleChange,
       ...pointerCaptureProps
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_colorful.HslColorPicker, {
-    color: hsla,
-    onChange: (nextColor) => {
-      onChange({
-        ...nextColor,
-        a: hsla.a
+  const hsv = {
+    h: hsva.h,
+    s: hsva.s,
+    v: hsva.v
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_colorful.HsvColorPicker, {
+    color: hsv,
+    onChange: (next) => {
+      handleChange({
+        ...next,
+        a: hsva.a
       });
     },
     ...pointerCaptureProps

package/build/color-picker/picker.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/picker.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { HslColorPicker, HslaColorPicker } from 'react-colorful';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n// Pointer capture fortifies drag gestures so that they continue to work\n// while dragging outside the component over objects like iframes. If a\n// newer version of react-colorful begins to employ pointer capture this\n// will be redundant and should be removed.\nconst pointerCaptureProps = {\n  onPointerDown({\n    currentTarget,\n    pointerId\n  }) {\n    currentTarget.setPointerCapture(pointerId);\n  },\n  onPointerUp({\n    currentTarget,\n    pointerId\n  }) {\n    currentTarget.releasePointerCapture(pointerId);\n  }\n};\nexport const Picker = ({\n  hsla,\n  enableAlpha,\n  onChange\n}) => {\n  if (enableAlpha) {\n    return /*#__PURE__*/_jsx(HslaColorPicker, {\n      color: hsla,\n      onChange: onChange,\n      ...pointerCaptureProps\n    });\n  }\n  return /*#__PURE__*/_jsx(HslColorPicker, {\n    color: hsla,\n    onChange: nextColor => {\n      onChange({\n        ...nextColor,\n        a: hsla.a\n      });\n    },\n    ...pointerCaptureProps\n  });\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,4BAAgD;AAKhD,yBAA4B;AAK5B,IAAM,sBAAsB;AAAA,EAC1B,cAAc;AAAA,IACZ;AAAA,IACA;AAAA,EACF,GAAG;AACD,kBAAc,kBAAkB,SAAS;AAAA,EAC3C;AAAA,EACA,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACF,GAAG;AACD,kBAAc,sBAAsB,SAAS;AAAA,EAC/C;AACF;AACO,IAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,MAAI,aAAa;AACf,WAAoB,uCAAAA,KAAK,uCAAiB;AAAA,MACxC,OAAO;AAAA,MACP;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAoB,uCAAAA,KAAK,sCAAgB;AAAA,IACvC,OAAO;AAAA,IACP,UAAU,eAAa;AACrB,eAAS;AAAA,QACP,GAAG;AAAA,QACH,GAAG,KAAK;AAAA,MACV,CAAC;AAAA,IACH;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AACH;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { HsvColorPicker, HsvaColorPicker } from 'react-colorful';\nimport { colord } from 'colord';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction toHsva(hsla) {\n  return {\n    ...colord(hsla).toHsv(),\n    // HSL and HSV share the hue angle. Color conversion collapses achromatic\n    // hue to 0, but HSLA retains the user's latent hue.\n    h: hsla.h,\n    a: hsla.a\n  };\n}\nfunction isSameHsla(a, b) {\n  return a.h === b.h && a.s === b.s && a.l === b.l && a.a === b.a;\n}\n\n/**\n * Convert parent HSLA into HSVA for prop sync.\n *\n * At black, RGB round-trips collapse saturation to 0. Preserve the native\n * HSVA saturation coordinate unless the HSL saturation channel itself\n * changed (sibling hue/alpha edits must not snap the pointer).\n *\n * At white, only `v: 100, s: 0` is visually white — preserving a prior\n * chromatic saturation would leave the pointer at the top-right and make\n * the first keyboard step jump from white to a saturated color.\n */\nfunction toHsvaFromHsla(hsla, prevHsva, prevHsla) {\n  const converted = toHsva(hsla);\n\n  // White and chromatic colors use the converted value as-is.\n  if (hsla.l !== 0) {\n    return converted;\n  }\n  const saturationChanged = prevHsla !== null && prevHsla.s !== hsla.s;\n  return {\n    h: hsla.h,\n    s: saturationChanged ? hsla.s : prevHsva.s,\n    v: 0,\n    a: hsla.a\n  };\n}\n\n/**\n * Visual color surface.\n *\n * Uses HSVA (react-colorful's native model) and keeps that value in local\n * state so HSLA↔hex round-trips cannot move the pointer\n * Parent ColorPicker still speaks HSLA for\n * inputs and controlled value sync; conversion happens only at the boundary.\n *\n * Prop sync from parent HSLA is suppressed for:\n * - pointer/touch drags (interaction flag), and\n * - any picker-originated update including keyboard (HSLA origin token).\n *\n * Achromatic HSL sibling edits (hue/alpha while at black) preserve native\n * HSVA saturation unless saturation itself changed. White always syncs to\n * the converted `s: 0` visual coordinate.\n */\nexport const Picker = ({\n  hsla,\n  enableAlpha,\n  onChange,\n  onInteractionStart,\n  onInteractionEnd\n}) => {\n  const [hsva, setHsva] = useState(() => toHsva(hsla));\n  // Last HSLA emitted by this picker — skip echoing it back into HSVA.\n  const pickerOriginHslaRef = useRef(null);\n  // Previous parent HSLA — detect which channel changed on achromatic sync.\n  const prevHslaRef = useRef(hsla);\n  // Pointer/touch drag: never sync from HSLA mid-gesture (origin match alone\n  // can fail across rapid frames when parent gradient state re-renders).\n  const isPointerInteractingRef = useRef(false);\n  useEffect(() => {\n    if (isPointerInteractingRef.current) {\n      // Keep prevHsla in lockstep with parent updates during the gesture\n      // so a post-drag HSL sibling edit is not compared against pre-drag\n      // HSLA and mistaken for a saturation change.\n      prevHslaRef.current = hsla;\n      return;\n    }\n    if (pickerOriginHslaRef.current && isSameHsla(pickerOriginHslaRef.current, hsla)) {\n      prevHslaRef.current = hsla;\n      return;\n    }\n    pickerOriginHslaRef.current = null;\n    setHsva(prev => toHsvaFromHsla(hsla, prev, prevHslaRef.current));\n    prevHslaRef.current = hsla;\n  }, [hsla]);\n\n  // Inline handlers so refs are not passed into a helper during render\n  // (react-hooks/refs). Pointer capture also keeps drag working over iframes.\n  const pointerCaptureProps = {\n    onPointerDown({\n      currentTarget,\n      pointerId\n    }) {\n      isPointerInteractingRef.current = true;\n      onInteractionStart?.();\n      currentTarget.setPointerCapture(pointerId);\n    },\n    onPointerUp({\n      currentTarget,\n      pointerId\n    }) {\n      currentTarget.releasePointerCapture(pointerId);\n      isPointerInteractingRef.current = false;\n      onInteractionEnd?.();\n    },\n    onPointerCancel({\n      currentTarget,\n      pointerId\n    }) {\n      currentTarget.releasePointerCapture(pointerId);\n      isPointerInteractingRef.current = false;\n      onInteractionEnd?.();\n    }\n  };\n  const handleChange = next => {\n    setHsva(next);\n    const nextHsla = {\n      ...colord(next).toHsl(),\n      a: next.a\n    };\n    pickerOriginHslaRef.current = nextHsla;\n    onChange(nextHsla);\n  };\n  if (enableAlpha) {\n    return /*#__PURE__*/_jsx(HsvaColorPicker, {\n      color: hsva,\n      onChange: handleChange,\n      ...pointerCaptureProps\n    });\n  }\n\n  // HsvColorPicker's equality checks enumerate own keys — never pass `a`,\n  // or every parent re-render looks like an external color change and the\n  // pointer jitters while dragging.\n  const hsv = {\n    h: hsva.h,\n    s: hsva.s,\n    v: hsva.v\n  };\n  return /*#__PURE__*/_jsx(HsvColorPicker, {\n    color: hsv,\n    onChange: next => {\n      handleChange({\n        ...next,\n        a: hsva.a\n      });\n    },\n    ...pointerCaptureProps\n  });\n};"],
+  "mappings": "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",
   "names": ["_jsx"]
 }

package/build/confirm-dialog/component.cjs

@@ -42,8 +42,91 @@ var import_flex = require("../flex/index.cjs");
 var import_button = __toESM(require("../button/index.cjs"));
 var import_text = require("../text/index.cjs");
 var import_v_stack = require("../v-stack/index.cjs");
-var styles = __toESM(require("./styles.cjs"));
-var import_use_cx = require("../utils/hooks/use-cx.cjs");
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/confirm-dialog/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("af7a0f28df", ".f8c6ba0dd016e6c1__wrapper.f8c6ba0dd016e6c1__wrapper{z-index:1000001}");
+}
+var style_module_default = { "wrapper": "f8c6ba0dd016e6c1__wrapper" };
+
+// packages/components/src/confirm-dialog/component.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var UnconnectedConfirmDialog = (props, forwardedRef) => {
   const {
@@ -56,8 +139,7 @@ var UnconnectedConfirmDialog = (props, forwardedRef) => {
     isBusy,
     ...otherProps
   } = (0, import_context.useContextSystem)(props, "ConfirmDialog");
-  const cx = (0, import_use_cx.useCx)();
-  const wrapperClassName = cx(styles.wrapper);
+  const wrapperClassName = style_module_default.wrapper;
   const cancelButtonRef = (0, import_element.useRef)(null);
   const confirmButtonRef = (0, import_element.useRef)(null);
   const [isOpen, setIsOpen] = (0, import_element.useState)();