@wordpress/components 32.2.2-next.v.202602200903.0 → 32.3.0

package/CHANGELOG.md

@@ -2,11 +2,29 @@
 
 ## Unreleased
 
-## 32.2.1-next.0 (2026-02-20)
+## 32.3.0 (2026-03-04)
+
+### Code Quality
+
+-   Improve typing of `focusOnMount` prop in `Dropdown`, `Modal` and `Popover` ([#75442](https://github.com/WordPress/gutenberg/pull/75442)).
 
 ### Bug Fixes
 
+-   `ColorPicker`: Preserve hue and saturation when the selected color becomes achromatic ([#75493](https://github.com/WordPress/gutenberg/pull/75493)).
 -   `SnackbarList`: Fix scaling distortion when a snackbar's content is updated in place via a shared notice ID ([#75709](https://github.com/WordPress/gutenberg/pull/75709)).
+-   `ToggleGroupControl`: Fix hover styles on disabled items ([#75737](https://github.com/WordPress/gutenberg/pull/75737)).
+-   `FormTokenField`: Fixed incorrect height of input field when rendered on pages using WordPress 7.0 form styles ([#75880](https://github.com/WordPress/gutenberg/pull/75880)).
+-   `SelectControl`: Fixed misalignment of option label on some variants when rendered on pages using WordPress 7.0 form styles ([#75880](https://github.com/WordPress/gutenberg/pull/75880)).
+-   `DateTimePicker`: Fix day text wrapping ([#76084](https://github.com/WordPress/gutenberg/pull/76084)).
+
+### Enhancements
+
+-   `ToggleGroupControl`: Make unselected item color consistent across all variants ([#75737](https://github.com/WordPress/gutenberg/pull/75737)).
+-   `Button`: Add `word-break: break-word`. ([#76071](https://github.com/WordPress/gutenberg/pull/76071)).
+
+### Internal
+
+-   `NumberControl`: Improved code and types for state reducer ([#75822](https://github.com/WordPress/gutenberg/pull/75822)).
 
 ## 32.2.0 (2026-02-18)
 

package/build/alignment-matrix-control/cell.cjs

@@ -40,9 +40,9 @@ var import_visually_hidden = require("../visually-hidden/index.cjs");
 var import_utils = require("./utils.cjs");
 
 // packages/components/src/alignment-matrix-control/style.module.scss
-if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='0584b48070']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='4c2e860238']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "0584b48070");
+  style.setAttribute("data-wp-hash", "4c2e860238");
   style.appendChild(document.createTextNode("._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}"));
   document.head.appendChild(style);
 }

package/build/alignment-matrix-control/cell.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alignment-matrix-control/cell.tsx", "../../src/alignment-matrix-control/style.module.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Cell({\n  id,\n  value,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(Tooltip, {\n    text: ALIGNMENT_LABEL[value],\n    children: /*#__PURE__*/_jsxs(Composite.Item, {\n      id: id,\n      render: /*#__PURE__*/_jsx(\"span\", {\n        ...props,\n        className: clsx(styles.cell, props.className),\n        role: \"gridcell\"\n      }),\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        children: value\n      }), /*#__PURE__*/_jsx(\"span\", {\n        className: styles.point,\n        role: \"presentation\"\n      })]\n    })\n  });\n}", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='0584b48070']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"0584b48070\");\n\tstyle.appendChild(document.createTextNode(\"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,uBAA0B;AAC1B,qBAAoB;AACpB,6BAA+B;AAK/B,mBAAgC;;;ACfhC,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,60CAA60C,CAAC;AACx3C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,uBAAQ,EAAC,kBAAiB,qCAAoC,YAAW,8BAA6B,QAAO,2BAA0B,SAAQ,2BAA0B;;;ADWhL,yBAA2C;AAC5B,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAoB,uCAAAA,KAAK,eAAAC,SAAS;AAAA,IAChC,MAAM,6BAAgB,KAAK;AAAA,IAC3B,UAAuB,uCAAAC,MAAM,2BAAU,MAAM;AAAA,MAC3C;AAAA,MACA,QAAqB,uCAAAF,KAAK,QAAQ;AAAA,QAChC,GAAG;AAAA,QACH,eAAW,YAAAG,SAAK,qBAAO,MAAM,MAAM,SAAS;AAAA,QAC5C,MAAM;AAAA,MACR,CAAC;AAAA,MACD,UAAU,CAAc,uCAAAH,KAAK,uCAAgB;AAAA,QAC3C,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAA,KAAK,QAAQ;AAAA,QAC5B,WAAW,qBAAO;AAAA,QAClB,MAAM;AAAA,MACR,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default function Cell({\n  id,\n  value,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(Tooltip, {\n    text: ALIGNMENT_LABEL[value],\n    children: /*#__PURE__*/_jsxs(Composite.Item, {\n      id: id,\n      render: /*#__PURE__*/_jsx(\"span\", {\n        ...props,\n        className: clsx(styles.cell, props.className),\n        role: \"gridcell\"\n      }),\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        children: value\n      }), /*#__PURE__*/_jsx(\"span\", {\n        className: styles.point,\n        role: \"presentation\"\n      })]\n    })\n  });\n}", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='4c2e860238']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"4c2e860238\");\n\tstyle.appendChild(document.createTextNode(\"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,uBAA0B;AAC1B,qBAAoB;AACpB,6BAA+B;AAK/B,mBAAgC;;;ACfhC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,60CAA60C,CAAC;AACx3C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,uBAAQ,EAAC,kBAAiB,qCAAoC,YAAW,8BAA6B,QAAO,2BAA0B,SAAQ,2BAA0B;;;ADWhL,yBAA2C;AAC5B,SAAR,KAAsB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAoB,uCAAAA,KAAK,eAAAC,SAAS;AAAA,IAChC,MAAM,6BAAgB,KAAK;AAAA,IAC3B,UAAuB,uCAAAC,MAAM,2BAAU,MAAM;AAAA,MAC3C;AAAA,MACA,QAAqB,uCAAAF,KAAK,QAAQ;AAAA,QAChC,GAAG;AAAA,QACH,eAAW,YAAAG,SAAK,qBAAO,MAAM,MAAM,SAAS;AAAA,QAC5C,MAAM;AAAA,MACR,CAAC;AAAA,MACD,UAAU,CAAc,uCAAAH,KAAK,uCAAgB;AAAA,QAC3C,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAA,KAAK,QAAQ;AAAA,QAC5B,WAAW,qBAAO;AAAA,QAClB,MAAM;AAAA,MACR,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH;",
   "names": ["_jsx", "Tooltip", "_jsxs", "clsx"]
 }

package/build/alignment-matrix-control/index.cjs

@@ -44,9 +44,9 @@ var import_icon = __toESM(require("./icon.cjs"));
 var import_utils = require("./utils.cjs");
 
 // packages/components/src/alignment-matrix-control/style.module.scss
-if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='0584b48070']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='4c2e860238']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "0584b48070");
+  style.setAttribute("data-wp-hash", "4c2e860238");
   style.appendChild(document.createTextNode("._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}"));
   document.head.appendChild(style);
 }

package/build/alignment-matrix-control/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/alignment-matrix-control/index.tsx", "../../src/alignment-matrix-control/style.module.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite } from '../composite';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedAlignmentMatrixControl({\n  className,\n  id,\n  label = __('Alignment Matrix Control'),\n  defaultValue = 'center center',\n  value,\n  onChange,\n  width = 92,\n  ...props\n}) {\n  const baseId = useInstanceId(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);\n  const setActiveId = useCallback(nextActiveId => {\n    const nextValue = getItemValue(baseId, nextActiveId);\n    if (nextValue) {\n      onChange?.(nextValue);\n    }\n  }, [baseId, onChange]);\n  const classes = clsx('component-alignment-matrix-control', styles['grid-container'], className);\n  return /*#__PURE__*/_jsx(Composite, {\n    defaultActiveId: getItemId(baseId, defaultValue),\n    activeId: getItemId(baseId, value),\n    setActiveId: setActiveId,\n    rtl: isRTL(),\n    render: /*#__PURE__*/_jsx(\"div\", {\n      ...props,\n      className: classes,\n      \"aria-label\": label,\n      id: baseId,\n      role: \"grid\",\n      style: {\n        width: `${width}px`\n      }\n    }),\n    children: GRID.map((cells, index) => /*#__PURE__*/_jsx(Composite.Row, {\n      render: /*#__PURE__*/_jsx(\"div\", {\n        className: styles['grid-row'],\n        role: \"row\"\n      }),\n      children: cells.map(cell => /*#__PURE__*/_jsx(Cell, {\n        id: getItemId(baseId, cell),\n        value: cell\n      }, cell))\n    }, index))\n  });\n}\n\n/**\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {\n  /**\n   * Render an alignment matrix as an icon.\n   *\n   * ```jsx\n   * import { AlignmentMatrixControl } from '@wordpress/components';\n   *\n   * <Icon icon={<AlignmentMatrixControl.Icon value=\"top left\" />} />\n   * ```\n   */\n  Icon: Object.assign(AlignmentMatrixControlIcon, {\n    displayName: 'AlignmentMatrixControl.Icon'\n  })\n});\nexport default AlignmentMatrixControl;", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='0584b48070']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"0584b48070\");\n\tstyle.appendChild(document.createTextNode(\"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAA0B;AAC1B,qBAA8B;AAC9B,qBAA4B;AAK5B,kBAAiB;AACjB,uBAA0B;AAC1B,kBAAuC;AACvC,mBAA8C;;;AClB9C,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,60CAA60C,CAAC;AACx3C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,uBAAQ,EAAC,kBAAiB,qCAAoC,YAAW,8BAA6B,QAAO,2BAA0B,SAAQ,2BAA0B;;;ADchL,yBAA4B;AAC5B,SAAS,kCAAkC;AAAA,EACzC;AAAA,EACA;AAAA,EACA,YAAQ,gBAAG,0BAA0B;AAAA,EACrC,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAG;AACD,QAAM,aAAS,8BAAc,mCAAmC,4BAA4B,EAAE;AAC9F,QAAM,kBAAc,4BAAY,kBAAgB;AAC9C,UAAM,gBAAY,2BAAa,QAAQ,YAAY;AACnD,QAAI,WAAW;AACb,iBAAW,SAAS;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,CAAC;AACrB,QAAM,cAAU,YAAAA,SAAK,sCAAsC,qBAAO,gBAAgB,GAAG,SAAS;AAC9F,SAAoB,uCAAAC,KAAK,4BAAW;AAAA,IAClC,qBAAiB,wBAAU,QAAQ,YAAY;AAAA,IAC/C,cAAU,wBAAU,QAAQ,KAAK;AAAA,IACjC;AAAA,IACA,SAAK,mBAAM;AAAA,IACX,QAAqB,uCAAAA,KAAK,OAAO;AAAA,MAC/B,GAAG;AAAA,MACH,WAAW;AAAA,MACX,cAAc;AAAA,MACd,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,QACL,OAAO,GAAG,KAAK;AAAA,MACjB;AAAA,IACF,CAAC;AAAA,IACD,UAAU,kBAAK,IAAI,CAAC,OAAO,UAAuB,uCAAAA,KAAK,2BAAU,KAAK;AAAA,MACpE,QAAqB,uCAAAA,KAAK,OAAO;AAAA,QAC/B,WAAW,qBAAO,UAAU;AAAA,QAC5B,MAAM;AAAA,MACR,CAAC;AAAA,MACD,UAAU,MAAM,IAAI,UAAqB,uCAAAA,KAAK,YAAAC,SAAM;AAAA,QAClD,QAAI,wBAAU,QAAQ,IAAI;AAAA,QAC1B,OAAO;AAAA,MACT,GAAG,IAAI,CAAC;AAAA,IACV,GAAG,KAAK,CAAC;AAAA,EACX,CAAC;AACH;AAqBO,IAAM,yBAAyB,OAAO,OAAO,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUrF,MAAM,OAAO,OAAO,YAAAC,SAA4B;AAAA,IAC9C,aAAa;AAAA,EACf,CAAC;AACH,CAAC;AACD,IAAO,mCAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite } from '../composite';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedAlignmentMatrixControl({\n  className,\n  id,\n  label = __('Alignment Matrix Control'),\n  defaultValue = 'center center',\n  value,\n  onChange,\n  width = 92,\n  ...props\n}) {\n  const baseId = useInstanceId(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);\n  const setActiveId = useCallback(nextActiveId => {\n    const nextValue = getItemValue(baseId, nextActiveId);\n    if (nextValue) {\n      onChange?.(nextValue);\n    }\n  }, [baseId, onChange]);\n  const classes = clsx('component-alignment-matrix-control', styles['grid-container'], className);\n  return /*#__PURE__*/_jsx(Composite, {\n    defaultActiveId: getItemId(baseId, defaultValue),\n    activeId: getItemId(baseId, value),\n    setActiveId: setActiveId,\n    rtl: isRTL(),\n    render: /*#__PURE__*/_jsx(\"div\", {\n      ...props,\n      className: classes,\n      \"aria-label\": label,\n      id: baseId,\n      role: \"grid\",\n      style: {\n        width: `${width}px`\n      }\n    }),\n    children: GRID.map((cells, index) => /*#__PURE__*/_jsx(Composite.Row, {\n      render: /*#__PURE__*/_jsx(\"div\", {\n        className: styles['grid-row'],\n        role: \"row\"\n      }),\n      children: cells.map(cell => /*#__PURE__*/_jsx(Cell, {\n        id: getItemId(baseId, cell),\n        value: cell\n      }, cell))\n    }, index))\n  });\n}\n\n/**\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {\n  /**\n   * Render an alignment matrix as an icon.\n   *\n   * ```jsx\n   * import { AlignmentMatrixControl } from '@wordpress/components';\n   *\n   * <Icon icon={<AlignmentMatrixControl.Icon value=\"top left\" />} />\n   * ```\n   */\n  Icon: Object.assign(AlignmentMatrixControlIcon, {\n    displayName: 'AlignmentMatrixControl.Icon'\n  })\n});\nexport default AlignmentMatrixControl;", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='4c2e860238']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"4c2e860238\");\n\tstyle.appendChild(document.createTextNode(\"._02e2af5803bf5bda__grid-container{aspect-ratio:1;border:1px solid #0000;border-radius:4px;box-sizing:border-box;cursor:pointer;direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);outline:none}.c421f8ed08c23077__grid-row{box-sizing:border-box;display:grid;grid-column:1/-1;grid-template-columns:repeat(3,1fr)}._3af769f755097fdb__cell{align-items:center;appearance:none;border:none;box-sizing:border-box;display:flex;justify-content:center;margin:0;outline:none;padding:0;position:relative}._37ef12d4fb6d6131__point{aspect-ratio:1;border:3px solid;box-sizing:border-box;color:var(--wp-components-color-gray-400,#ccc);contain:strict;display:block;margin:auto;width:6px}._3af769f755097fdb__cell[data-active-item] ._37ef12d4fb6d6131__point{color:var(--wp-components-color-foreground,#1e1e1e);transform:scale(1.6666666667)}._3af769f755097fdb__cell:not([data-active-item]):hover ._37ef12d4fb6d6131__point{color:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))}._3af769f755097fdb__cell[data-focus-visible] ._37ef12d4fb6d6131__point{outline:1px solid var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));outline-offset:1px}@media not (prefers-reduced-motion){._37ef12d4fb6d6131__point{transition-duration:.12s;transition-property:color,transform;transition-timing-function:linear}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"grid-container\":\"_02e2af5803bf5bda__grid-container\",\"grid-row\":\"c421f8ed08c23077__grid-row\",\"cell\":\"_3af769f755097fdb__cell\",\"point\":\"_37ef12d4fb6d6131__point\"};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAA0B;AAC1B,qBAA8B;AAC9B,qBAA4B;AAK5B,kBAAiB;AACjB,uBAA0B;AAC1B,kBAAuC;AACvC,mBAA8C;;;AClB9C,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,60CAA60C,CAAC;AACx3C,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,uBAAQ,EAAC,kBAAiB,qCAAoC,YAAW,8BAA6B,QAAO,2BAA0B,SAAQ,2BAA0B;;;ADchL,yBAA4B;AAC5B,SAAS,kCAAkC;AAAA,EACzC;AAAA,EACA;AAAA,EACA,YAAQ,gBAAG,0BAA0B;AAAA,EACrC,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAG;AACD,QAAM,aAAS,8BAAc,mCAAmC,4BAA4B,EAAE;AAC9F,QAAM,kBAAc,4BAAY,kBAAgB;AAC9C,UAAM,gBAAY,2BAAa,QAAQ,YAAY;AACnD,QAAI,WAAW;AACb,iBAAW,SAAS;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,QAAQ,CAAC;AACrB,QAAM,cAAU,YAAAA,SAAK,sCAAsC,qBAAO,gBAAgB,GAAG,SAAS;AAC9F,SAAoB,uCAAAC,KAAK,4BAAW;AAAA,IAClC,qBAAiB,wBAAU,QAAQ,YAAY;AAAA,IAC/C,cAAU,wBAAU,QAAQ,KAAK;AAAA,IACjC;AAAA,IACA,SAAK,mBAAM;AAAA,IACX,QAAqB,uCAAAA,KAAK,OAAO;AAAA,MAC/B,GAAG;AAAA,MACH,WAAW;AAAA,MACX,cAAc;AAAA,MACd,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,QACL,OAAO,GAAG,KAAK;AAAA,MACjB;AAAA,IACF,CAAC;AAAA,IACD,UAAU,kBAAK,IAAI,CAAC,OAAO,UAAuB,uCAAAA,KAAK,2BAAU,KAAK;AAAA,MACpE,QAAqB,uCAAAA,KAAK,OAAO;AAAA,QAC/B,WAAW,qBAAO,UAAU;AAAA,QAC5B,MAAM;AAAA,MACR,CAAC;AAAA,MACD,UAAU,MAAM,IAAI,UAAqB,uCAAAA,KAAK,YAAAC,SAAM;AAAA,QAClD,QAAI,wBAAU,QAAQ,IAAI;AAAA,QAC1B,OAAO;AAAA,MACT,GAAG,IAAI,CAAC;AAAA,IACV,GAAG,KAAK,CAAC;AAAA,EACX,CAAC;AACH;AAqBO,IAAM,yBAAyB,OAAO,OAAO,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUrF,MAAM,OAAO,OAAO,YAAAC,SAA4B;AAAA,IAC9C,aAAa;AAAA,EACf,CAAC;AACH,CAAC;AACD,IAAO,mCAAQ;",
   "names": ["clsx", "_jsx", "Cell", "AlignmentMatrixControlIcon"]
 }

package/build/angle-picker-control/angle-circle.cjs

@@ -38,9 +38,9 @@ var import_element = require("@wordpress/element");
 var import_compose = require("@wordpress/compose");
 
 // packages/components/src/angle-picker-control/style.module.scss
-if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='a61a1d6ad7']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='f35cc94692']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "a61a1d6ad7");
+  style.setAttribute("data-wp-hash", "f35cc94692");
   style.appendChild(document.createTextNode("._8f57b8d483c51fbe__circle-root{border:1px solid var(--wp-components-color-gray-600,#949494);border-radius:50%;box-sizing:border-box;cursor:grab;height:32px;overflow:hidden;width:32px}._8f57b8d483c51fbe__circle-root:active{cursor:grabbing}.b1bae984ac10fcc3__circle-indicator-wrapper{box-sizing:border-box;height:100%;position:relative;width:100%}.b1bae984ac10fcc3__circle-indicator-wrapper:focus-visible{outline:none}._6d2fe0a2cbb31bf0__circle-indicator{background:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));border-radius:50%;box-sizing:border-box;display:block;height:6px;left:50%;position:absolute;top:4px;transform:translateX(-50%);width:6px}"));
   document.head.appendChild(style);
 }

package/build/angle-picker-control/angle-circle.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/angle-picker-control/angle-circle.tsx", "../../src/angle-picker-control/style.module.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction AngleCircle({\n  value,\n  onChange,\n  className,\n  ...props\n}) {\n  const angleCircleRef = useRef(null);\n  const angleCircleCenterRef = useRef(undefined);\n  const previousCursorValueRef = useRef(undefined);\n  const setAngleCircleCenter = () => {\n    if (angleCircleRef.current === null) {\n      return;\n    }\n    const rect = angleCircleRef.current.getBoundingClientRect();\n    angleCircleCenterRef.current = {\n      x: rect.x + rect.width / 2,\n      y: rect.y + rect.height / 2\n    };\n  };\n  const changeAngleToPosition = event => {\n    if (event === undefined) {\n      return;\n    }\n\n    // Prevent (drag) mouse events from selecting and accidentally\n    // triggering actions from other elements.\n    event.preventDefault();\n    // Input control needs to lose focus and by preventDefault above, it doesn't.\n    event.target?.focus();\n    if (angleCircleCenterRef.current !== undefined && onChange !== undefined) {\n      const {\n        x: centerX,\n        y: centerY\n      } = angleCircleCenterRef.current;\n      onChange(getAngle(centerX, centerY, event.clientX, event.clientY));\n    }\n  };\n  const {\n    startDrag,\n    isDragging\n  } = useDragging({\n    onDragStart: event => {\n      setAngleCircleCenter();\n      changeAngleToPosition(event);\n    },\n    onDragMove: changeAngleToPosition,\n    onDragEnd: changeAngleToPosition\n  });\n  useEffect(() => {\n    if (isDragging) {\n      if (previousCursorValueRef.current === undefined) {\n        previousCursorValueRef.current = document.body.style.cursor;\n      }\n      document.body.style.cursor = 'grabbing';\n    } else {\n      document.body.style.cursor = previousCursorValueRef.current || '';\n      previousCursorValueRef.current = undefined;\n    }\n  }, [isDragging]);\n  return (\n    /*#__PURE__*/\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    _jsx(\"div\", {\n      ref: angleCircleRef,\n      onMouseDown: startDrag,\n      className: clsx('components-angle-picker-control__angle-circle', styles['circle-root'], className),\n      ...props,\n      children: /*#__PURE__*/_jsx(\"div\", {\n        style: value ? {\n          transform: `rotate(${value}deg)`\n        } : undefined,\n        className: clsx('components-angle-picker-control__angle-circle-indicator-wrapper', styles['circle-indicator-wrapper']),\n        tabIndex: -1,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: clsx('components-angle-picker-control__angle-circle-indicator', styles['circle-indicator'])\n        })\n      })\n    })\n  );\n}\nfunction getAngle(centerX, centerY, pointX, pointY) {\n  const y = pointY - centerY;\n  const x = pointX - centerX;\n  const angleInRadians = Math.atan2(y, x);\n  const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;\n  if (angleInDeg < 0) {\n    return 360 + angleInDeg;\n  }\n  return angleInDeg;\n}\nexport default AngleCircle;", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='a61a1d6ad7']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"a61a1d6ad7\");\n\tstyle.appendChild(document.createTextNode(\"._8f57b8d483c51fbe__circle-root{border:1px solid var(--wp-components-color-gray-600,#949494);border-radius:50%;box-sizing:border-box;cursor:grab;height:32px;overflow:hidden;width:32px}._8f57b8d483c51fbe__circle-root:active{cursor:grabbing}.b1bae984ac10fcc3__circle-indicator-wrapper{box-sizing:border-box;height:100%;position:relative;width:100%}.b1bae984ac10fcc3__circle-indicator-wrapper:focus-visible{outline:none}._6d2fe0a2cbb31bf0__circle-indicator{background:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));border-radius:50%;box-sizing:border-box;display:block;height:6px;left:50%;position:absolute;top:4px;transform:translateX(-50%);width:6px}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"circle-root\":\"_8f57b8d483c51fbe__circle-root\",\"circle-indicator-wrapper\":\"b1bae984ac10fcc3__circle-indicator-wrapper\",\"circle-indicator\":\"_6d2fe0a2cbb31bf0__circle-indicator\"};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction AngleCircle({\n  value,\n  onChange,\n  className,\n  ...props\n}) {\n  const angleCircleRef = useRef(null);\n  const angleCircleCenterRef = useRef(undefined);\n  const previousCursorValueRef = useRef(undefined);\n  const setAngleCircleCenter = () => {\n    if (angleCircleRef.current === null) {\n      return;\n    }\n    const rect = angleCircleRef.current.getBoundingClientRect();\n    angleCircleCenterRef.current = {\n      x: rect.x + rect.width / 2,\n      y: rect.y + rect.height / 2\n    };\n  };\n  const changeAngleToPosition = event => {\n    if (event === undefined) {\n      return;\n    }\n\n    // Prevent (drag) mouse events from selecting and accidentally\n    // triggering actions from other elements.\n    event.preventDefault();\n    // Input control needs to lose focus and by preventDefault above, it doesn't.\n    event.target?.focus();\n    if (angleCircleCenterRef.current !== undefined && onChange !== undefined) {\n      const {\n        x: centerX,\n        y: centerY\n      } = angleCircleCenterRef.current;\n      onChange(getAngle(centerX, centerY, event.clientX, event.clientY));\n    }\n  };\n  const {\n    startDrag,\n    isDragging\n  } = useDragging({\n    onDragStart: event => {\n      setAngleCircleCenter();\n      changeAngleToPosition(event);\n    },\n    onDragMove: changeAngleToPosition,\n    onDragEnd: changeAngleToPosition\n  });\n  useEffect(() => {\n    if (isDragging) {\n      if (previousCursorValueRef.current === undefined) {\n        previousCursorValueRef.current = document.body.style.cursor;\n      }\n      document.body.style.cursor = 'grabbing';\n    } else {\n      document.body.style.cursor = previousCursorValueRef.current || '';\n      previousCursorValueRef.current = undefined;\n    }\n  }, [isDragging]);\n  return (\n    /*#__PURE__*/\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    _jsx(\"div\", {\n      ref: angleCircleRef,\n      onMouseDown: startDrag,\n      className: clsx('components-angle-picker-control__angle-circle', styles['circle-root'], className),\n      ...props,\n      children: /*#__PURE__*/_jsx(\"div\", {\n        style: value ? {\n          transform: `rotate(${value}deg)`\n        } : undefined,\n        className: clsx('components-angle-picker-control__angle-circle-indicator-wrapper', styles['circle-indicator-wrapper']),\n        tabIndex: -1,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: clsx('components-angle-picker-control__angle-circle-indicator', styles['circle-indicator'])\n        })\n      })\n    })\n  );\n}\nfunction getAngle(centerX, centerY, pointX, pointY) {\n  const y = pointY - centerY;\n  const x = pointX - centerX;\n  const angleInRadians = Math.atan2(y, x);\n  const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;\n  if (angleInDeg < 0) {\n    return 360 + angleInDeg;\n  }\n  return angleInDeg;\n}\nexport default AngleCircle;", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='f35cc94692']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"f35cc94692\");\n\tstyle.appendChild(document.createTextNode(\"._8f57b8d483c51fbe__circle-root{border:1px solid var(--wp-components-color-gray-600,#949494);border-radius:50%;box-sizing:border-box;cursor:grab;height:32px;overflow:hidden;width:32px}._8f57b8d483c51fbe__circle-root:active{cursor:grabbing}.b1bae984ac10fcc3__circle-indicator-wrapper{box-sizing:border-box;height:100%;position:relative;width:100%}.b1bae984ac10fcc3__circle-indicator-wrapper:focus-visible{outline:none}._6d2fe0a2cbb31bf0__circle-indicator{background:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));border-radius:50%;box-sizing:border-box;display:block;height:6px;left:50%;position:absolute;top:4px;transform:translateX(-50%);width:6px}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"circle-root\":\"_8f57b8d483c51fbe__circle-root\",\"circle-indicator-wrapper\":\"b1bae984ac10fcc3__circle-indicator-wrapper\",\"circle-indicator\":\"_6d2fe0a2cbb31bf0__circle-indicator\"};\n"],
+  "mappings": "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",
   "names": ["useDragging", "_jsx", "clsx"]
 }

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

@@ -30,27 +30,30 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var ColorInput = ({
   colorType,
   color,
+  hsla,
   onChange,
+  onHSLChange,
   enableAlpha
 }) => {
-  const props = {
-    color,
-    onChange,
-    enableAlpha
-  };
   switch (colorType) {
     case "hsl":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_hsl_input.HslInput, {
-        ...props
+        hsla,
+        onChange: onHSLChange,
+        enableAlpha
       });
     case "rgb":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_rgb_input.RgbInput, {
-        ...props
+        color,
+        onChange,
+        enableAlpha
       });
     default:
     case "hex":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_hex_input.HexInput, {
-        ...props
+        color,
+        onChange,
+        enableAlpha
       });
   }
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/color-input.tsx"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ColorInput = ({\n  colorType,\n  color,\n  onChange,\n  enableAlpha\n}) => {\n  const props = {\n    color,\n    onChange,\n    enableAlpha\n  };\n  switch (colorType) {\n    case 'hsl':\n      return /*#__PURE__*/_jsx(HslInput, {\n        ...props\n      });\n    case 'rgb':\n      return /*#__PURE__*/_jsx(RgbInput, {\n        ...props\n      });\n    default:\n    case 'hex':\n      return /*#__PURE__*/_jsx(HexInput, {\n        ...props\n      });\n  }\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAyB;AACzB,uBAAyB;AACzB,uBAAyB;AACzB,yBAA4B;AACrB,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAoB,uCAAAA,KAAK,2BAAU;AAAA,QACjC,GAAG;AAAA,MACL,CAAC;AAAA,IACH,KAAK;AACH,aAAoB,uCAAAA,KAAK,2BAAU;AAAA,QACjC,GAAG;AAAA,MACL,CAAC;AAAA,IACH;AAAA,IACA,KAAK;AACH,aAAoB,uCAAAA,KAAK,2BAAU;AAAA,QACjC,GAAG;AAAA,MACL,CAAC;AAAA,EACL;AACF;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ColorInput = ({\n  colorType,\n  color,\n  hsla,\n  onChange,\n  onHSLChange,\n  enableAlpha\n}) => {\n  switch (colorType) {\n    case 'hsl':\n      return /*#__PURE__*/_jsx(HslInput, {\n        hsla: hsla,\n        onChange: onHSLChange,\n        enableAlpha: enableAlpha\n      });\n    case 'rgb':\n      return /*#__PURE__*/_jsx(RgbInput, {\n        color: color,\n        onChange: onChange,\n        enableAlpha: enableAlpha\n      });\n    default:\n    case 'hex':\n      return /*#__PURE__*/_jsx(HexInput, {\n        color: color,\n        onChange: onChange,\n        enableAlpha: enableAlpha\n      });\n  }\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAyB;AACzB,uBAAyB;AACzB,uBAAyB;AACzB,yBAA4B;AACrB,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAoB,uCAAAA,KAAK,2BAAU;AAAA,QACjC;AAAA,QACA,UAAU;AAAA,QACV;AAAA,MACF,CAAC;AAAA,IACH,KAAK;AACH,aAAoB,uCAAAA,KAAK,2BAAU;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,KAAK;AACH,aAAoB,uCAAAA,KAAK,2BAAU;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,EACL;AACF;",
   "names": ["_jsx"]
 }

package/build/color-picker/component.cjs

@@ -47,6 +47,22 @@ var import_picker = require("./picker.cjs");
 var import_hooks = require("../utils/hooks/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 (0, import_colord.extend)([import_names.default]);
+function mergeHSLA(nextHSLA, prevHSLA) {
+  if (nextHSLA.s === 0) {
+    if (nextHSLA.l === 0 || nextHSLA.l === 100) {
+      return {
+        ...nextHSLA,
+        h: prevHSLA.h,
+        s: prevHSLA.s
+      };
+    }
+    return {
+      ...nextHSLA,
+      h: prevHSLA.h
+    };
+  }
+  return nextHSLA;
+}
 var options = [{
   label: "RGB",
   value: "rgb"
@@ -75,8 +91,34 @@ var UnconnectedColorPicker = (props, forwardedRef) => {
     return (0, import_colord.colord)(color || "");
   }, [color]);
   const debouncedSetColor = (0, import_compose.useDebounce)(setColor);
+  const [internalHSLA, setInternalHSLA] = (0, import_element.useState)(() => ({
+    ...safeColordColor.toHsl()
+  }));
+  const lastProducedHexRef = (0, import_element.useRef)(safeColordColor.toHex());
+  (0, import_element.useEffect)(() => {
+    const incomingHex = safeColordColor.toHex();
+    if (incomingHex === lastProducedHexRef.current) {
+      return;
+    }
+    lastProducedHexRef.current = incomingHex;
+    const externalHSLA = safeColordColor.toHsl();
+    setInternalHSLA((prev) => mergeHSLA(externalHSLA, prev));
+  }, [safeColordColor]);
+  const handleHSLAChange = (0, import_element.useCallback)((nextHSLA) => {
+    setInternalHSLA(nextHSLA);
+    const previousHex = lastProducedHexRef.current;
+    const nextHex = (0, import_colord.colord)(nextHSLA).toHex();
+    if (nextHex !== previousHex) {
+      lastProducedHexRef.current = nextHex;
+      setColor(nextHex);
+    }
+  }, [setColor]);
   const handleChange = (0, import_element.useCallback)((nextValue) => {
-    debouncedSetColor(nextValue.toHex());
+    const nextHSLA = nextValue.toHsl();
+    setInternalHSLA((prev) => mergeHSLA(nextHSLA, prev));
+    const nextHex = nextValue.toHex();
+    lastProducedHexRef.current = nextHex;
+    debouncedSetColor(nextHex);
   }, [debouncedSetColor]);
   const [colorType, setColorType] = (0, import_element.useState)(copyFormat || "hex");
   const maybeHandlePaste = (0, import_element.useCallback)((event) => {
@@ -107,8 +149,8 @@ var UnconnectedColorPicker = (props, forwardedRef) => {
     ...divProps,
     onPasteCapture: maybeHandlePaste,
     children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_picker.Picker, {
-      onChange: handleChange,
-      color: safeColordColor,
+      onChange: handleHSLAChange,
+      hsla: internalHSLA,
       enableAlpha
     }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.AuxiliaryColorArtefactWrapper, {
       children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.AuxiliaryColorArtefactHStackHeader, {
@@ -131,7 +173,9 @@ var UnconnectedColorPicker = (props, forwardedRef) => {
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_input.ColorInput, {
           colorType,
           color: safeColordColor,
+          hsla: internalHSLA,
           onChange: handleChange,
+          onHSLChange: handleHSLAChange,
           enableAlpha
         })
       })]

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, 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]);\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  const handleChange = useCallback(nextValue => {\n    debouncedSetColor(nextValue.toHex());\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: handleChange,\n      color: safeColordColor,\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          onChange: handleChange,\n          enableAlpha: enableAlpha\n        })\n      })]\n    })]\n  });\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  // 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 \u2014 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 \u2014 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 \u2014 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};\nexport const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker');\nexport default ColorPicker;"],
+  "mappings": "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",
   "names": ["namesPlugin", "_jsxs", "_jsx"]
 }

package/build/color-picker/hsl-input.cjs

@@ -23,39 +23,18 @@ __export(hsl_input_exports, {
   HslInput: () => HslInput
 });
 module.exports = __toCommonJS(hsl_input_exports);
-var import_colord = require("colord");
-var import_element = require("@wordpress/element");
 var import_input_with_slider = require("./input-with-slider.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var HslInput = ({
-  color,
+  hsla,
   onChange,
   enableAlpha
 }) => {
-  const colorPropHSLA = (0, import_element.useMemo)(() => color.toHsl(), [color]);
-  const [internalHSLA, setInternalHSLA] = (0, import_element.useState)({
-    ...colorPropHSLA
-  });
-  const isInternalColorSameAsReceivedColor = color.isEqual((0, import_colord.colord)(internalHSLA));
-  (0, import_element.useEffect)(() => {
-    if (!isInternalColorSameAsReceivedColor) {
-      setInternalHSLA(colorPropHSLA);
-    }
-  }, [colorPropHSLA, isInternalColorSameAsReceivedColor]);
-  const colorValue = isInternalColorSameAsReceivedColor ? internalHSLA : colorPropHSLA;
   const updateHSLAValue = (partialNewValue) => {
-    const nextOnChangeValue = (0, import_colord.colord)({
-      ...colorValue,
+    onChange({
+      ...hsla,
       ...partialNewValue
     });
-    if (!color.isEqual(nextOnChangeValue)) {
-      onChange(nextOnChangeValue);
-    } else {
-      setInternalHSLA((prevHSLA) => ({
-        ...prevHSLA,
-        ...partialNewValue
-      }));
-    }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_with_slider.InputWithSlider, {
@@ -63,7 +42,7 @@ var HslInput = ({
       max: 359,
       label: "Hue",
       abbreviation: "H",
-      value: colorValue.h,
+      value: hsla.h,
       onChange: (nextH) => {
         updateHSLAValue({
           h: nextH
@@ -74,7 +53,7 @@ var HslInput = ({
       max: 100,
       label: "Saturation",
       abbreviation: "S",
-      value: colorValue.s,
+      value: hsla.s,
       onChange: (nextS) => {
         updateHSLAValue({
           s: nextS
@@ -85,7 +64,7 @@ var HslInput = ({
       max: 100,
       label: "Lightness",
       abbreviation: "L",
-      value: colorValue.l,
+      value: hsla.l,
       onChange: (nextL) => {
         updateHSLAValue({
           l: nextL
@@ -96,7 +75,7 @@ var HslInput = ({
       max: 100,
       label: "Alpha",
       abbreviation: "A",
-      value: Math.trunc(100 * colorValue.a),
+      value: Math.trunc(100 * hsla.a),
       onChange: (nextA) => {
         updateHSLAValue({
           a: nextA / 100

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/hsl-input.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const HslInput = ({\n  color,\n  onChange,\n  enableAlpha\n}) => {\n  const colorPropHSLA = useMemo(() => color.toHsl(), [color]);\n  const [internalHSLA, setInternalHSLA] = useState({\n    ...colorPropHSLA\n  });\n  const isInternalColorSameAsReceivedColor = color.isEqual(colord(internalHSLA));\n  useEffect(() => {\n    if (!isInternalColorSameAsReceivedColor) {\n      // Keep internal HSLA color up to date with the received color prop\n      setInternalHSLA(colorPropHSLA);\n    }\n  }, [colorPropHSLA, isInternalColorSameAsReceivedColor]);\n\n  // If the internal color is equal to the received color prop, we can use the\n  // HSLA values from the local state which, compared to the received color prop,\n  // retain more details about the actual H and S values that the user selected,\n  // and thus allow for better UX when interacting with the H and S sliders.\n  const colorValue = isInternalColorSameAsReceivedColor ? internalHSLA : colorPropHSLA;\n  const updateHSLAValue = partialNewValue => {\n    const nextOnChangeValue = colord({\n      ...colorValue,\n      ...partialNewValue\n    });\n\n    // Fire `onChange` only if the resulting color is different from the\n    // current one.\n    // Otherwise, update the internal HSLA color to cause a re-render.\n    if (!color.isEqual(nextOnChangeValue)) {\n      onChange(nextOnChangeValue);\n    } else {\n      setInternalHSLA(prevHSLA => ({\n        ...prevHSLA,\n        ...partialNewValue\n      }));\n    }\n  };\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(InputWithSlider, {\n      min: 0,\n      max: 359,\n      label: \"Hue\",\n      abbreviation: \"H\",\n      value: colorValue.h,\n      onChange: nextH => {\n        updateHSLAValue({\n          h: nextH\n        });\n      }\n    }), /*#__PURE__*/_jsx(InputWithSlider, {\n      min: 0,\n      max: 100,\n      label: \"Saturation\",\n      abbreviation: \"S\",\n      value: colorValue.s,\n      onChange: nextS => {\n        updateHSLAValue({\n          s: nextS\n        });\n      }\n    }), /*#__PURE__*/_jsx(InputWithSlider, {\n      min: 0,\n      max: 100,\n      label: \"Lightness\",\n      abbreviation: \"L\",\n      value: colorValue.l,\n      onChange: nextL => {\n        updateHSLAValue({\n          l: nextL\n        });\n      }\n    }), enableAlpha && /*#__PURE__*/_jsx(InputWithSlider, {\n      min: 0,\n      max: 100,\n      label: \"Alpha\",\n      abbreviation: \"A\",\n      value: Math.trunc(100 * colorValue.a),\n      onChange: nextA => {\n        updateHSLAValue({\n          a: nextA / 100\n        });\n      }\n    })]\n  });\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAuB;AAKvB,qBAA6C;AAK7C,+BAAgC;AAChC,yBAAkE;AAC3D,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,oBAAgB,wBAAQ,MAAM,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC;AAC1D,QAAM,CAAC,cAAc,eAAe,QAAI,yBAAS;AAAA,IAC/C,GAAG;AAAA,EACL,CAAC;AACD,QAAM,qCAAqC,MAAM,YAAQ,sBAAO,YAAY,CAAC;AAC7E,gCAAU,MAAM;AACd,QAAI,CAAC,oCAAoC;AAEvC,sBAAgB,aAAa;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,eAAe,kCAAkC,CAAC;AAMtD,QAAM,aAAa,qCAAqC,eAAe;AACvE,QAAM,kBAAkB,qBAAmB;AACzC,UAAM,wBAAoB,sBAAO;AAAA,MAC/B,GAAG;AAAA,MACH,GAAG;AAAA,IACL,CAAC;AAKD,QAAI,CAAC,MAAM,QAAQ,iBAAiB,GAAG;AACrC,eAAS,iBAAiB;AAAA,IAC5B,OAAO;AACL,sBAAgB,eAAa;AAAA,QAC3B,GAAG;AAAA,QACH,GAAG;AAAA,MACL,EAAE;AAAA,IACJ;AAAA,EACF;AACA,SAAoB,uCAAAA,MAAM,mBAAAC,UAAW;AAAA,IACnC,UAAU,CAAc,uCAAAC,KAAK,0CAAiB;AAAA,MAC5C,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,WAAW;AAAA,MAClB,UAAU,WAAS;AACjB,wBAAgB;AAAA,UACd,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,IACF,CAAC,GAAgB,uCAAAA,KAAK,0CAAiB;AAAA,MACrC,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,WAAW;AAAA,MAClB,UAAU,WAAS;AACjB,wBAAgB;AAAA,UACd,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,IACF,CAAC,GAAgB,uCAAAA,KAAK,0CAAiB;AAAA,MACrC,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,WAAW;AAAA,MAClB,UAAU,WAAS;AACjB,wBAAgB;AAAA,UACd,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,IACF,CAAC,GAAG,eAA4B,uCAAAA,KAAK,0CAAiB;AAAA,MACpD,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,KAAK,MAAM,MAAM,WAAW,CAAC;AAAA,MACpC,UAAU,WAAS;AACjB,wBAAgB;AAAA,UACd,GAAG,QAAQ;AAAA,QACb,CAAC;AAAA,MACH;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const HslInput = ({\n  hsla,\n  onChange,\n  enableAlpha\n}) => {\n  const updateHSLAValue = partialNewValue => {\n    onChange({\n      ...hsla,\n      ...partialNewValue\n    });\n  };\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(InputWithSlider, {\n      min: 0,\n      max: 359,\n      label: \"Hue\",\n      abbreviation: \"H\",\n      value: hsla.h,\n      onChange: nextH => {\n        updateHSLAValue({\n          h: nextH\n        });\n      }\n    }), /*#__PURE__*/_jsx(InputWithSlider, {\n      min: 0,\n      max: 100,\n      label: \"Saturation\",\n      abbreviation: \"S\",\n      value: hsla.s,\n      onChange: nextS => {\n        updateHSLAValue({\n          s: nextS\n        });\n      }\n    }), /*#__PURE__*/_jsx(InputWithSlider, {\n      min: 0,\n      max: 100,\n      label: \"Lightness\",\n      abbreviation: \"L\",\n      value: hsla.l,\n      onChange: nextL => {\n        updateHSLAValue({\n          l: nextL\n        });\n      }\n    }), enableAlpha && /*#__PURE__*/_jsx(InputWithSlider, {\n      min: 0,\n      max: 100,\n      label: \"Alpha\",\n      abbreviation: \"A\",\n      value: Math.trunc(100 * hsla.a),\n      onChange: nextA => {\n        updateHSLAValue({\n          a: nextA / 100\n        });\n      }\n    })]\n  });\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,+BAAgC;AAChC,yBAAkE;AAC3D,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,kBAAkB,qBAAmB;AACzC,aAAS;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAoB,uCAAAA,MAAM,mBAAAC,UAAW;AAAA,IACnC,UAAU,CAAc,uCAAAC,KAAK,0CAAiB;AAAA,MAC5C,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,KAAK;AAAA,MACZ,UAAU,WAAS;AACjB,wBAAgB;AAAA,UACd,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,IACF,CAAC,GAAgB,uCAAAA,KAAK,0CAAiB;AAAA,MACrC,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,KAAK;AAAA,MACZ,UAAU,WAAS;AACjB,wBAAgB;AAAA,UACd,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,IACF,CAAC,GAAgB,uCAAAA,KAAK,0CAAiB;AAAA,MACrC,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,KAAK;AAAA,MACZ,UAAU,WAAS;AACjB,wBAAgB;AAAA,UACd,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,IACF,CAAC,GAAG,eAA4B,uCAAAA,KAAK,0CAAiB;AAAA,MACpD,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,KAAK,MAAM,MAAM,KAAK,CAAC;AAAA,MAC9B,UAAU,WAAS;AACjB,wBAAgB;AAAA,UACd,GAAG,QAAQ;AAAA,QACb,CAAC;AAAA,MACH;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
   "names": ["_jsxs", "_Fragment", "_jsx"]
 }

package/build/color-picker/picker.cjs

@@ -24,33 +24,42 @@ __export(picker_exports, {
 });
 module.exports = __toCommonJS(picker_exports);
 var import_react_colorful = require("react-colorful");
-var import_colord = require("colord");
-var import_element = require("@wordpress/element");
 var import_jsx_runtime = require("react/jsx-runtime");
+var pointerCaptureProps = {
+  onPointerDown({
+    currentTarget,
+    pointerId
+  }) {
+    currentTarget.setPointerCapture(pointerId);
+  },
+  onPointerUp({
+    currentTarget,
+    pointerId
+  }) {
+    currentTarget.releasePointerCapture(pointerId);
+  }
+};
 var Picker = ({
-  color,
+  hsla,
   enableAlpha,
   onChange
 }) => {
-  const Component = enableAlpha ? import_react_colorful.RgbaStringColorPicker : import_react_colorful.RgbStringColorPicker;
-  const rgbColor = (0, import_element.useMemo)(() => color.toRgbString(), [color]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
-    color: rgbColor,
+  if (enableAlpha) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_colorful.HslaColorPicker, {
+      color: hsla,
+      onChange,
+      ...pointerCaptureProps
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_colorful.HslColorPicker, {
+    color: hsla,
     onChange: (nextColor) => {
-      onChange((0, import_colord.colord)(nextColor));
-    },
-    onPointerDown: ({
-      currentTarget,
-      pointerId
-    }) => {
-      currentTarget.setPointerCapture(pointerId);
+      onChange({
+        ...nextColor,
+        a: hsla.a
+      });
     },
-    onPointerUp: ({
-      currentTarget,
-      pointerId
-    }) => {
-      currentTarget.releasePointerCapture(pointerId);
-    }
+    ...pointerCaptureProps
   });
 };
 // Annotate the CommonJS export names for ESM import in node:

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 { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const Picker = ({\n  color,\n  enableAlpha,\n  onChange\n}) => {\n  const Component = enableAlpha ? RgbaStringColorPicker : RgbStringColorPicker;\n  const rgbColor = useMemo(() => color.toRgbString(), [color]);\n  return /*#__PURE__*/_jsx(Component, {\n    color: rgbColor,\n    onChange: nextColor => {\n      onChange(colord(nextColor));\n    }\n    // Pointer capture fortifies drag gestures so that they continue to\n    // work while dragging outside the component over objects like\n    // iframes. If a newer version of react-colorful begins to employ\n    // pointer capture this will be redundant and should be removed.\n    ,\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  });\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,4BAA4D;AAC5D,oBAAuB;AAKvB,qBAAwB;AAIxB,yBAA4B;AACrB,IAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,YAAY,cAAc,8CAAwB;AACxD,QAAM,eAAW,wBAAQ,MAAM,MAAM,YAAY,GAAG,CAAC,KAAK,CAAC;AAC3D,SAAoB,uCAAAA,KAAK,WAAW;AAAA,IAClC,OAAO;AAAA,IACP,UAAU,eAAa;AACrB,mBAAS,sBAAO,SAAS,CAAC;AAAA,IAC5B;AAAA,IAMA,eAAe,CAAC;AAAA,MACd;AAAA,MACA;AAAA,IACF,MAAM;AACJ,oBAAc,kBAAkB,SAAS;AAAA,IAC3C;AAAA,IACA,aAAa,CAAC;AAAA,MACZ;AAAA,MACA;AAAA,IACF,MAAM;AACJ,oBAAc,sBAAsB,SAAS;AAAA,IAC/C;AAAA,EACF,CAAC;AACH;",
+  "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;",
   "names": ["_jsx"]
 }