@wordpress/components 32.5.0 → 32.6.0

package/build-module/validated-form-controls/control-with-error.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/validated-form-controls/control-with-error.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { cloneElement, forwardRef, useEffect, useId, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ValidityIndicator } from './validity-indicator';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nfunction appendRequiredIndicator(label, required, markWhenOptional) {\n  if (required && !markWhenOptional) {\n    return /*#__PURE__*/_jsxs(_Fragment, {\n      children: [label, \" \", `(${__('Required')})`]\n    });\n  }\n  if (!required && markWhenOptional) {\n    return /*#__PURE__*/_jsxs(_Fragment, {\n      children: [label, \" \", `(${__('Optional')})`]\n    });\n  }\n  return label;\n}\nconst VALIDITY_VISIBLE_ATTRIBUTE = 'data-validity-visible';\nconst className = 'components-validated-control';\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\n\nfunction UnforwardedControlWithError({\n  required,\n  markWhenOptional,\n  customValidity,\n  getValidityTarget,\n  children\n}, forwardedRef) {\n  const [errorMessage, setErrorMessage] = useState();\n  const [statusMessage, setStatusMessage] = useState();\n  const [showMessage, setShowMessage] = useState(false);\n  const [isTouched, setIsTouched] = useState(false);\n\n  // Ensure that error messages are visible when an `invalid` event is triggered,\n  // e.g. when a form is submitted or reportValidity() is called.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const handler = () => {\n      setShowMessage(true);\n      validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    };\n    validityTarget?.addEventListener('invalid', handler);\n    return () => validityTarget?.removeEventListener('invalid', handler);\n  }, [getValidityTarget]);\n\n  // Suppress the native error popover, while keeping the focus behavior intact.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const suppressNativePopover = event => {\n      event.preventDefault();\n      const target = event.target;\n      const firstErrorInForm = Array.from(target.form?.elements ?? []).find(el => !el.validity.valid);\n      if (!target.form || firstErrorInForm === target) {\n        target.focus();\n      }\n    };\n\n    // Radio inputs need special handling because all radio inputs with the\n    // same `name` will be marked as invalid. Without this handling, the last radio option\n    // will be focused with an unsuppressed native popover.\n    const radioSibilings = validityTarget?.type === 'radio' && validityTarget?.name ? Array.from(validityTarget?.closest(`.${className}`)?.querySelectorAll(`input[type=\"radio\"][name=\"${validityTarget?.name}\"]`) ?? []).filter(sibling => sibling !== validityTarget) : [];\n    validityTarget?.addEventListener('invalid', suppressNativePopover);\n    radioSibilings.forEach(sibling => sibling.addEventListener('invalid', suppressNativePopover));\n    return () => {\n      validityTarget?.removeEventListener('invalid', suppressNativePopover);\n      radioSibilings.forEach(sibling => sibling.removeEventListener('invalid', suppressNativePopover));\n    };\n  }, [getValidityTarget]);\n\n  // Handle validity messages.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    if (!customValidity?.type) {\n      validityTarget?.setCustomValidity('');\n      setErrorMessage(validityTarget?.validationMessage);\n      setStatusMessage(undefined);\n      return;\n    }\n    switch (customValidity.type) {\n      case 'validating':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(undefined);\n          setStatusMessage({\n            type: 'validating',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'valid':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage({\n            type: 'valid',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'invalid':\n        {\n          validityTarget?.setCustomValidity(customValidity.message ?? '');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage(undefined);\n          break;\n        }\n    }\n  }, [customValidity, getValidityTarget]);\n\n  // Show messages if field has been touched (i.e. has blurred at least once),\n  // or validation has been triggered by the consumer/user.\n  useEffect(() => {\n    if (!isTouched || showMessage) {\n      return;\n    }\n    if (customValidity?.type === 'validating') {\n      // Don't show validating indicators for quick calls that take less than 1 sec.\n      const timer = setTimeout(() => {\n        setShowMessage(true);\n      }, 1000);\n      return () => clearTimeout(timer);\n    }\n    setShowMessage(true);\n  }, [isTouched, customValidity?.type, showMessage]);\n\n  // Mark blurred fields as touched.\n  const onBlur = event => {\n    if (isTouched) {\n      return;\n    }\n\n    // Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n    // This prevents unnecessary blurs from components with multiple focusable elements.\n    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {\n      setIsTouched(true);\n      getValidityTarget()?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    }\n  };\n  const messageId = useId();\n  const message = (() => {\n    if (errorMessage) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        id: messageId,\n        type: \"invalid\",\n        message: errorMessage\n      });\n    }\n    if (statusMessage?.type) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        id: messageId,\n        type: statusMessage.type,\n        message: statusMessage.message\n      });\n    }\n    return null;\n  })();\n  const visibleMessage = showMessage ? message : null;\n\n  // Imperatively manage `aria-describedby` on the validity target so we\n  // merge with any value the child control sets internally (e.g. from a\n  // `help` prop), rather than competing with it at the props level.\n  useEffect(() => {\n    const target = getValidityTarget();\n    if (!target) {\n      return;\n    }\n    function setDescribedBy(el, shouldAdd) {\n      const ids = (el.getAttribute('aria-describedby') ?? '').split(' ').filter(id => id && id !== messageId);\n      if (shouldAdd) {\n        ids.push(messageId);\n      }\n      if (ids.length) {\n        el.setAttribute('aria-describedby', ids.join(' '));\n      } else {\n        el.removeAttribute('aria-describedby');\n      }\n    }\n    setDescribedBy(target, !!visibleMessage);\n    return () => setDescribedBy(target, false);\n  }, [visibleMessage, messageId, getValidityTarget]);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: forwardedRef,\n    onBlur: onBlur,\n    children: [cloneElement(children, {\n      label: appendRequiredIndicator(children.props.label, required, markWhenOptional),\n      required\n    }), /*#__PURE__*/_jsx(\"div\", {\n      \"aria-live\": \"polite\",\n      children: visibleMessage\n    })]\n  });\n}\nexport const ControlWithError = forwardRef(UnforwardedControlWithError);\nControlWithError.displayName = 'ControlWithError';"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { cloneElement, forwardRef, useEffect, useId, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { ValidityIndicator } from './validity-indicator';\nimport { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from \"react/jsx-runtime\";\nfunction appendRequiredIndicator(label, required, markWhenOptional) {\n  let suffix;\n  if (required && !markWhenOptional) {\n    suffix = `(${__('Required')})`;\n  } else if (!required && markWhenOptional) {\n    suffix = `(${__('Optional')})`;\n  }\n  if (!suffix) {\n    return label;\n  }\n  if (typeof label === 'string') {\n    return `${label} ${suffix}`;\n  }\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [label, \" \", suffix]\n  });\n}\nconst VALIDITY_VISIBLE_ATTRIBUTE = 'data-validity-visible';\nconst className = 'components-validated-control';\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\n\nfunction UnforwardedControlWithError({\n  required,\n  markWhenOptional,\n  customValidity,\n  getValidityTarget,\n  children\n}, forwardedRef) {\n  const [errorMessage, setErrorMessage] = useState();\n  const [statusMessage, setStatusMessage] = useState();\n  const [showMessage, setShowMessage] = useState(false);\n  const [isTouched, setIsTouched] = useState(false);\n\n  // Ensure that error messages are visible when an `invalid` event is triggered,\n  // e.g. when a form is submitted or reportValidity() is called.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const handler = () => {\n      setShowMessage(true);\n      validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    };\n    validityTarget?.addEventListener('invalid', handler);\n    return () => validityTarget?.removeEventListener('invalid', handler);\n  }, [getValidityTarget]);\n\n  // Suppress the native error popover, while keeping the focus behavior intact.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    const suppressNativePopover = event => {\n      event.preventDefault();\n      const target = event.target;\n      const firstErrorInForm = Array.from(target.form?.elements ?? []).find(el => !el.validity.valid);\n      if (!target.form || firstErrorInForm === target) {\n        target.focus();\n      }\n    };\n\n    // Radio inputs need special handling because all radio inputs with the\n    // same `name` will be marked as invalid. Without this handling, the last radio option\n    // will be focused with an unsuppressed native popover.\n    const radioSibilings = validityTarget?.type === 'radio' && validityTarget?.name ? Array.from(validityTarget?.closest(`.${className}`)?.querySelectorAll(`input[type=\"radio\"][name=\"${validityTarget?.name}\"]`) ?? []).filter(sibling => sibling !== validityTarget) : [];\n    validityTarget?.addEventListener('invalid', suppressNativePopover);\n    radioSibilings.forEach(sibling => sibling.addEventListener('invalid', suppressNativePopover));\n    return () => {\n      validityTarget?.removeEventListener('invalid', suppressNativePopover);\n      radioSibilings.forEach(sibling => sibling.removeEventListener('invalid', suppressNativePopover));\n    };\n  }, [getValidityTarget]);\n\n  // Handle validity messages.\n  useEffect(() => {\n    const validityTarget = getValidityTarget();\n    if (!customValidity?.type) {\n      validityTarget?.setCustomValidity('');\n      setErrorMessage(validityTarget?.validationMessage);\n      setStatusMessage(undefined);\n      return;\n    }\n    switch (customValidity.type) {\n      case 'validating':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(undefined);\n          setStatusMessage({\n            type: 'validating',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'valid':\n        {\n          validityTarget?.setCustomValidity('');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage({\n            type: 'valid',\n            message: customValidity.message\n          });\n          break;\n        }\n      case 'invalid':\n        {\n          validityTarget?.setCustomValidity(customValidity.message ?? '');\n          setErrorMessage(validityTarget?.validationMessage);\n          setStatusMessage(undefined);\n          break;\n        }\n    }\n  }, [customValidity, getValidityTarget]);\n\n  // Show messages if field has been touched (i.e. has blurred at least once),\n  // or validation has been triggered by the consumer/user.\n  useEffect(() => {\n    if (!isTouched || showMessage) {\n      return;\n    }\n    if (customValidity?.type === 'validating') {\n      // Don't show validating indicators for quick calls that take less than 1 sec.\n      const timer = setTimeout(() => {\n        setShowMessage(true);\n      }, 1000);\n      return () => clearTimeout(timer);\n    }\n    setShowMessage(true);\n  }, [isTouched, customValidity?.type, showMessage]);\n\n  // Mark blurred fields as touched.\n  const onBlur = event => {\n    if (isTouched) {\n      return;\n    }\n\n    // Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n    // This prevents unnecessary blurs from components with multiple focusable elements.\n    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {\n      setIsTouched(true);\n      getValidityTarget()?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, '');\n    }\n  };\n  const messageId = useId();\n  const message = (() => {\n    if (errorMessage) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        id: messageId,\n        type: \"invalid\",\n        message: errorMessage\n      });\n    }\n    if (statusMessage?.type) {\n      return /*#__PURE__*/_jsx(ValidityIndicator, {\n        id: messageId,\n        type: statusMessage.type,\n        message: statusMessage.message\n      });\n    }\n    return null;\n  })();\n  const visibleMessage = showMessage ? message : null;\n\n  // Imperatively manage `aria-describedby` on the validity target so we\n  // merge with any value the child control sets internally (e.g. from a\n  // `help` prop), rather than competing with it at the props level.\n  useEffect(() => {\n    const target = getValidityTarget();\n    if (!target) {\n      return;\n    }\n    function setDescribedBy(el, shouldAdd) {\n      const ids = (el.getAttribute('aria-describedby') ?? '').split(' ').filter(id => id && id !== messageId);\n      if (shouldAdd) {\n        ids.push(messageId);\n      }\n      if (ids.length) {\n        el.setAttribute('aria-describedby', ids.join(' '));\n      } else {\n        el.removeAttribute('aria-describedby');\n      }\n    }\n    setDescribedBy(target, !!visibleMessage);\n    return () => setDescribedBy(target, false);\n  }, [visibleMessage, messageId, getValidityTarget]);\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: className,\n    ref: forwardedRef,\n    onBlur: onBlur,\n    children: [cloneElement(children, {\n      label: appendRequiredIndicator(children.props.label, required, markWhenOptional),\n      required\n    }), /*#__PURE__*/_jsx(\"div\", {\n      \"aria-live\": \"polite\",\n      children: visibleMessage\n    })]\n  });\n}\nexport const ControlWithError = forwardRef(UnforwardedControlWithError);\nControlWithError.displayName = 'ControlWithError';"],
+  "mappings": "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",
   "names": []
 }

package/build-style/style-rtl.css

@@ -265,7 +265,7 @@
   font-weight: 499;
   margin: 0;
   border: 0;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   appearance: none;
   background: none;
 }
@@ -556,9 +556,6 @@ p + .components-button.is-tertiary {
     fill: CanvasText;
   }
 }
-.components-button .components-visually-hidden {
-  height: auto;
-}
 
 @keyframes components-button__busy-animation {
   0% {
@@ -597,7 +594,7 @@ p + .components-button.is-tertiary {
   background: none;
   padding: 0;
   margin: 0;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   justify-content: center;
   align-items: center;
   display: flex;
@@ -655,7 +652,7 @@ p + .components-button.is-tertiary {
   background: none;
   padding: 0;
   margin: 0;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   appearance: none;
   display: inline-flex;
   align-items: center;
@@ -752,7 +749,7 @@ p + .components-button.is-tertiary {
   border: 1px solid transparent;
 }
 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:disabled::before {
-  background-color: var(--wp-components-color-gray-600, #949494);
+  background-color: var(--wp-components-color-gray-400, #ccc);
 }
 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:hover:not(:disabled)::before {
   background-color: var(--wp-components-color-gray-800, #2f2f2f);
@@ -939,7 +936,9 @@ p + .components-button.is-tertiary {
 
 .components-checkbox-control__label {
   line-height: var(--checkbox-input-size);
-  cursor: pointer;
+}
+.components-checkbox-control:not(:has(:disabled)) .components-checkbox-control__label {
+  cursor: var(--wpds-cursor-control, pointer);
 }
 
 .components-checkbox-control__input[type=checkbox] {
@@ -1026,7 +1025,6 @@ p + .components-button.is-tertiary {
   background: #fff;
   color: #1e1e1e;
   clear: none;
-  cursor: pointer;
   display: inline-block;
   line-height: 0;
   margin: 0 0 0 4px;
@@ -1048,10 +1046,13 @@ p + .components-button.is-tertiary {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.components-checkbox-control__input[type=checkbox]:checked, .components-checkbox-control__input[type=checkbox]:indeterminate {
+.components-checkbox-control__input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
+.components-checkbox-control__input[type=checkbox]:not(:disabled) {
+  cursor: var(--wpds-cursor-control, pointer);
+}
 .components-checkbox-control__input[type=checkbox]:checked::before {
   content: none;
 }
@@ -1071,7 +1072,7 @@ svg.components-checkbox-control__checked,
 svg.components-checkbox-control__indeterminate {
   --checkmark-size: var(--checkbox-input-size);
   fill: #fff;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   position: absolute;
   right: 50%;
   top: 50%;
@@ -1089,6 +1090,11 @@ svg.components-checkbox-control__indeterminate {
   }
 }
 
+.components-checkbox-control:has(:disabled) svg.components-checkbox-control__checked,
+.components-checkbox-control:has(:disabled) svg.components-checkbox-control__indeterminate {
+  fill: var(--wp-components-color-gray-400, #ccc);
+}
+
 .components-checkbox-control__help {
   display: inline-block;
   margin-inline-start: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
@@ -1166,7 +1172,7 @@ svg.components-checkbox-control__indeterminate {
   }
 }
 .components-circular-option-picker__option {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 .components-circular-option-picker__option:hover {
   box-shadow: inset 0 0 0 14px !important;
@@ -1332,7 +1338,7 @@ input.components-combobox-control__input[type=text]:focus {
   height: 64px;
   width: 100%;
   box-sizing: border-box;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   outline: 1px solid transparent;
   border-radius: 4px 4px 0 0;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
@@ -1588,7 +1594,7 @@ body.is-dragging-components-draggable {
   width: 100%;
   padding: 6px;
   outline: none;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   white-space: nowrap;
   font-weight: 400;
 }
@@ -1754,8 +1760,38 @@ body.is-dragging-components-draggable {
   border-width: 0;
   transform: translateX(-16px);
 }
-.components-form-toggle.is-disabled, .components-disabled .components-form-toggle {
-  opacity: 0.3;
+.components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
+  background-color: var(--wp-components-color-gray-100, #f0f0f0);
+  border-color: var(--wp-components-color-gray-300, #ddd);
+}
+@media (forced-colors: active) {
+  .components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
+    border-color: GrayText;
+  }
+}
+.components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
+  background-color: var(--wp-components-color-gray-400, #ccc);
+  box-shadow: none;
+}
+@media (forced-colors: active) {
+  .components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
+    border-color: GrayText;
+  }
+}
+.components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
+  background-color: var(--wp-components-color-gray-400, #ccc);
+  border-color: var(--wp-components-color-gray-400, #ccc);
+}
+@media (forced-colors: active) {
+  .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
+    border-color: GrayText;
+  }
+  .components-form-toggle.is-disabled.is-checked .components-form-toggle__track::after, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track::after {
+    border-top-color: GrayText;
+  }
+}
+.components-form-toggle.is-disabled.is-checked .components-form-toggle__thumb, .components-disabled .components-form-toggle.is-checked .components-form-toggle__thumb {
+  background-color: #fff;
 }
 
 .components-form-toggle input.components-form-toggle__input[type=checkbox] {
@@ -1777,7 +1813,7 @@ body.is-dragging-components-draggable {
   content: "";
 }
 .components-form-toggle input.components-form-toggle__input[type=checkbox]:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 
 .components-form-token-field__input-container {
@@ -1817,8 +1853,9 @@ body.is-dragging-components-draggable {
   cursor: text;
 }
 .components-form-token-field__input-container.is-disabled {
-  background: #ddd;
-  border-color: #ddd;
+  background: var(--wp-components-color-gray-100, #f0f0f0);
+  border-color: var(--wp-components-color-gray-400, #ccc);
+  cursor: default;
 }
 .components-form-token-field__input-container.is-active {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -1873,6 +1910,11 @@ body.is-dragging-components-draggable {
 .components-form-token-field__token.is-validating .components-form-token-field__remove-token {
   color: #757575;
 }
+.components-form-token-field__token.is-disabled .components-form-token-field__token-text,
+.components-form-token-field__token.is-disabled .components-form-token-field__remove-token.components-button {
+  background: var(--wp-components-color-gray-100, #f0f0f0);
+  color: var(--wp-components-color-gray-600, #949494);
+}
 .components-form-token-field__token.is-borderless {
   position: relative;
   padding: 0 0 0 24px;
@@ -1973,7 +2015,7 @@ body.is-dragging-components-draggable {
   background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
 }
 .components-form-token-field__suggestion:not(.is-empty) {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 
 @media (min-width: 600px) {
@@ -3072,7 +3114,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   margin: 0;
   padding: 0;
   appearance: none;
-  cursor: pointer;
+}
+.components-radio-control__input[type=radio]:not(:disabled) {
+  cursor: var(--wpds-cursor-control, pointer);
 }
 .components-radio-control__input[type=radio]:focus {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
@@ -3087,11 +3131,24 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   content: "";
   border-radius: 50%;
 }
+.components-radio-control__input[type=radio]:disabled {
+  background: var(--wp-components-color-gray-100, #f0f0f0);
+  border: 1px solid var(--wp-components-color-gray-300, #ddd);
+  opacity: 1;
+}
+.components-radio-control__input[type=radio]:disabled:checked::before {
+  border-color: var(--wp-components-color-gray-400, #ccc);
+  opacity: 1;
+}
 
 .components-radio-control__label {
   grid-column: 2;
   grid-row: 1;
-  cursor: pointer;
+}
+.components-radio-control:not(:disabled) .components-radio-control__label {
+  cursor: var(--wpds-cursor-control, pointer);
+}
+.components-radio-control__label {
   line-height: 24px;
 }
 @media (min-width: 600px) {
@@ -3312,7 +3369,7 @@ body.lockscroll {
   width: 100%;
   max-width: var(--wpds-dimension-surface-width-lg, 560px);
   box-sizing: border-box;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   pointer-events: auto;
 }
 @media (min-width: 600px) {
@@ -3337,7 +3394,7 @@ body.lockscroll {
 }
 .components-snackbar .components-snackbar__dismiss-button {
   margin-right: 24px;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 
 .components-snackbar__action.components-button,
@@ -3393,7 +3450,7 @@ body.lockscroll {
   background: transparent;
   border: none;
   box-shadow: none;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   padding: 3px 16px;
   margin-right: 0;
   font-weight: 400;
@@ -3630,7 +3687,7 @@ body.lockscroll {
   line-height: 16px;
 }
 .components-toggle-control__label:not(.is-disabled) {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 
 .components-toggle-control__help {

package/build-style/style.css

@@ -265,7 +265,7 @@
   font-weight: 499;
   margin: 0;
   border: 0;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   appearance: none;
   background: none;
 }
@@ -556,9 +556,6 @@ p + .components-button.is-tertiary {
     fill: CanvasText;
   }
 }
-.components-button .components-visually-hidden {
-  height: auto;
-}
 
 @keyframes components-button__busy-animation {
   0% {
@@ -597,7 +594,7 @@ p + .components-button.is-tertiary {
   background: none;
   padding: 0;
   margin: 0;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   justify-content: center;
   align-items: center;
   display: flex;
@@ -655,7 +652,7 @@ p + .components-button.is-tertiary {
   background: none;
   padding: 0;
   margin: 0;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   appearance: none;
   display: inline-flex;
   align-items: center;
@@ -752,7 +749,7 @@ p + .components-button.is-tertiary {
   border: 1px solid transparent;
 }
 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:disabled::before {
-  background-color: var(--wp-components-color-gray-600, #949494);
+  background-color: var(--wp-components-color-gray-400, #ccc);
 }
 .components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:hover:not(:disabled)::before {
   background-color: var(--wp-components-color-gray-800, #2f2f2f);
@@ -939,7 +936,9 @@ p + .components-button.is-tertiary {
 
 .components-checkbox-control__label {
   line-height: var(--checkbox-input-size);
-  cursor: pointer;
+}
+.components-checkbox-control:not(:has(:disabled)) .components-checkbox-control__label {
+  cursor: var(--wpds-cursor-control, pointer);
 }
 
 .components-checkbox-control__input[type=checkbox] {
@@ -1026,7 +1025,6 @@ p + .components-button.is-tertiary {
   background: #fff;
   color: #1e1e1e;
   clear: none;
-  cursor: pointer;
   display: inline-block;
   line-height: 0;
   margin: 0 4px 0 0;
@@ -1048,10 +1046,13 @@ p + .components-button.is-tertiary {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.components-checkbox-control__input[type=checkbox]:checked, .components-checkbox-control__input[type=checkbox]:indeterminate {
+.components-checkbox-control__input[type=checkbox]:not(:disabled):is(:checked, :indeterminate) {
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
+.components-checkbox-control__input[type=checkbox]:not(:disabled) {
+  cursor: var(--wpds-cursor-control, pointer);
+}
 .components-checkbox-control__input[type=checkbox]:checked::before {
   content: none;
 }
@@ -1071,7 +1072,7 @@ svg.components-checkbox-control__checked,
 svg.components-checkbox-control__indeterminate {
   --checkmark-size: var(--checkbox-input-size);
   fill: #fff;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   position: absolute;
   left: 50%;
   top: 50%;
@@ -1089,6 +1090,11 @@ svg.components-checkbox-control__indeterminate {
   }
 }
 
+.components-checkbox-control:has(:disabled) svg.components-checkbox-control__checked,
+.components-checkbox-control:has(:disabled) svg.components-checkbox-control__indeterminate {
+  fill: var(--wp-components-color-gray-400, #ccc);
+}
+
 .components-checkbox-control__help {
   display: inline-block;
   margin-inline-start: calc(var(--checkbox-input-size) + var(--checkbox-input-margin));
@@ -1166,7 +1172,7 @@ svg.components-checkbox-control__indeterminate {
   }
 }
 .components-circular-option-picker__option {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 .components-circular-option-picker__option:hover {
   box-shadow: inset 0 0 0 14px !important;
@@ -1332,7 +1338,7 @@ input.components-combobox-control__input[type=text]:focus {
   height: 64px;
   width: 100%;
   box-sizing: border-box;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   outline: 1px solid transparent;
   border-radius: 4px 4px 0 0;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
@@ -1593,7 +1599,7 @@ body.is-dragging-components-draggable {
   width: 100%;
   padding: 6px;
   outline: none;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   white-space: nowrap;
   font-weight: 400;
 }
@@ -1759,8 +1765,38 @@ body.is-dragging-components-draggable {
   border-width: 0;
   transform: translateX(16px);
 }
-.components-form-toggle.is-disabled, .components-disabled .components-form-toggle {
-  opacity: 0.3;
+.components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
+  background-color: var(--wp-components-color-gray-100, #f0f0f0);
+  border-color: var(--wp-components-color-gray-300, #ddd);
+}
+@media (forced-colors: active) {
+  .components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
+    border-color: GrayText;
+  }
+}
+.components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
+  background-color: var(--wp-components-color-gray-400, #ccc);
+  box-shadow: none;
+}
+@media (forced-colors: active) {
+  .components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
+    border-color: GrayText;
+  }
+}
+.components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
+  background-color: var(--wp-components-color-gray-400, #ccc);
+  border-color: var(--wp-components-color-gray-400, #ccc);
+}
+@media (forced-colors: active) {
+  .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
+    border-color: GrayText;
+  }
+  .components-form-toggle.is-disabled.is-checked .components-form-toggle__track::after, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track::after {
+    border-top-color: GrayText;
+  }
+}
+.components-form-toggle.is-disabled.is-checked .components-form-toggle__thumb, .components-disabled .components-form-toggle.is-checked .components-form-toggle__thumb {
+  background-color: #fff;
 }
 
 .components-form-toggle input.components-form-toggle__input[type=checkbox] {
@@ -1782,7 +1818,7 @@ body.is-dragging-components-draggable {
   content: "";
 }
 .components-form-toggle input.components-form-toggle__input[type=checkbox]:not(:disabled, [aria-disabled=true]) {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 
 .components-form-token-field__input-container {
@@ -1822,8 +1858,9 @@ body.is-dragging-components-draggable {
   cursor: text;
 }
 .components-form-token-field__input-container.is-disabled {
-  background: #ddd;
-  border-color: #ddd;
+  background: var(--wp-components-color-gray-100, #f0f0f0);
+  border-color: var(--wp-components-color-gray-400, #ccc);
+  cursor: default;
 }
 .components-form-token-field__input-container.is-active {
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -1878,6 +1915,11 @@ body.is-dragging-components-draggable {
 .components-form-token-field__token.is-validating .components-form-token-field__remove-token {
   color: #757575;
 }
+.components-form-token-field__token.is-disabled .components-form-token-field__token-text,
+.components-form-token-field__token.is-disabled .components-form-token-field__remove-token.components-button {
+  background: var(--wp-components-color-gray-100, #f0f0f0);
+  color: var(--wp-components-color-gray-600, #949494);
+}
 .components-form-token-field__token.is-borderless {
   position: relative;
   padding: 0 24px 0 0;
@@ -1978,7 +2020,7 @@ body.is-dragging-components-draggable {
   background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
 }
 .components-form-token-field__suggestion:not(.is-empty) {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 
 @media (min-width: 600px) {
@@ -3081,7 +3123,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   margin: 0;
   padding: 0;
   appearance: none;
-  cursor: pointer;
+}
+.components-radio-control__input[type=radio]:not(:disabled) {
+  cursor: var(--wpds-cursor-control, pointer);
 }
 .components-radio-control__input[type=radio]:focus {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
@@ -3096,11 +3140,24 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   content: "";
   border-radius: 50%;
 }
+.components-radio-control__input[type=radio]:disabled {
+  background: var(--wp-components-color-gray-100, #f0f0f0);
+  border: 1px solid var(--wp-components-color-gray-300, #ddd);
+  opacity: 1;
+}
+.components-radio-control__input[type=radio]:disabled:checked::before {
+  border-color: var(--wp-components-color-gray-400, #ccc);
+  opacity: 1;
+}
 
 .components-radio-control__label {
   grid-column: 2;
   grid-row: 1;
-  cursor: pointer;
+}
+.components-radio-control:not(:disabled) .components-radio-control__label {
+  cursor: var(--wpds-cursor-control, pointer);
+}
+.components-radio-control__label {
   line-height: 24px;
 }
 @media (min-width: 600px) {
@@ -3324,7 +3381,7 @@ body.lockscroll {
   width: 100%;
   max-width: var(--wpds-dimension-surface-width-lg, 560px);
   box-sizing: border-box;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   pointer-events: auto;
 }
 @media (min-width: 600px) {
@@ -3349,7 +3406,7 @@ body.lockscroll {
 }
 .components-snackbar .components-snackbar__dismiss-button {
   margin-left: 24px;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 
 .components-snackbar__action.components-button,
@@ -3405,7 +3462,7 @@ body.lockscroll {
   background: transparent;
   border: none;
   box-shadow: none;
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
   padding: 3px 16px;
   margin-left: 0;
   font-weight: 400;
@@ -3643,7 +3700,7 @@ body.lockscroll {
   line-height: 16px;
 }
 .components-toggle-control__label:not(.is-disabled) {
-  cursor: pointer;
+  cursor: var(--wpds-cursor-control, pointer);
 }
 
 .components-toggle-control__help {

package/build-types/autocomplete/autocompleter-ui.d.ts

@@ -1,3 +1,3 @@
-import type { AutocompleterUIProps, WPCompleter } from './types';
-export declare function getAutoCompleterUI(autocompleter: WPCompleter): ({ filterValue, instanceId, listBoxId, className, selectedIndex, onChangeOptions, onSelect, onReset, reset, contentRef, }: AutocompleterUIProps) => import("react").JSX.Element | null;
+import type { AutocompleterUIProps } from './types';
+export declare function AutocompleterUI({ autocompleter, filterValue, instanceId, listBoxId, className, selectedIndex, onChangeOptions, onSelect, reset, contentRef, }: AutocompleterUIProps): import("react").JSX.Element | null;
 //# sourceMappingURL=autocompleter-ui.d.ts.map

package/build-types/autocomplete/autocompleter-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocompleter-ui.d.ts","sourceRoot":"","sources":["../../src/autocomplete/autocompleter-ui.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,oBAAoB,EAAe,WAAW,EAAE,MAAM,SAAS,CAAC;AAsD9E,wBAAgB,kBAAkB,CAAE,aAAa,EAAE,WAAW,8HAe1D,oBAAoB,wCAuHvB"}
+{"version":3,"file":"autocompleter-ui.d.ts","sourceRoot":"","sources":["../../src/autocomplete/autocompleter-ui.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,oBAAoB,EAAe,MAAM,SAAS,CAAC;AAsDjE,wBAAgB,eAAe,CAAE,EAChC,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,EACT,SAAS,EACT,aAAa,EACb,eAAe,EACf,QAAQ,EACR,KAAK,EACL,UAAU,GACV,EAAE,oBAAoB,sCAyHtB"}

package/build-types/autocomplete/get-autocomplete-match.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import type { WPCompleter } from './types';
+type AutocompleteMatch = {
+    completer: WPCompleter;
+    filterValue: string;
+};
+export declare function getAutocompleteMatch(textContent: string, completers: WPCompleter[], filteredOptionsLength: number, isBackspacing: boolean, getTextAfterSelection: () => string): AutocompleteMatch | null;
+export {};
+//# sourceMappingURL=get-autocomplete-match.d.ts.map

package/build-types/autocomplete/get-autocomplete-match.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-autocomplete-match.d.ts","sourceRoot":"","sources":["../../src/autocomplete/get-autocomplete-match.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,KAAK,iBAAiB,GAAG;IACxB,SAAS,EAAE,WAAW,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,oBAAoB,CACnC,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,WAAW,EAAE,EACzB,qBAAqB,EAAE,MAAM,EAC7B,aAAa,EAAE,OAAO,EACtB,qBAAqB,EAAE,MAAM,MAAM,GACjC,iBAAiB,GAAG,IAAI,CA6F1B"}

package/build-types/autocomplete/index.d.ts

@@ -5,6 +5,14 @@ export declare function useAutocomplete({ record, onChange, onReplace, completer
     onKeyDown: (event: KeyboardEvent) => void;
     popover: false | import("react").JSX.Element;
 };
+/**
+ * Tracks the last record whose value differed from the current one.
+ * Used to determine whether the user has actually typed something
+ */
+export declare function useLastDifferentValue(value: UseAutocompleteProps['record']): import("@wordpress/rich-text").RichTextValue & {
+    start: NonNullable<import("@wordpress/rich-text").RichTextValue["start"]>;
+    end: NonNullable<import("@wordpress/rich-text").RichTextValue["end"]>;
+};
 export declare function useAutocompleteProps(options: UseAutocompleteProps): {
     ref: import("react").RefCallback<HTMLElement>;
     children?: undefined;

package/build-types/autocomplete/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/autocomplete/index.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EACX,iBAAiB,EAMjB,oBAAoB,EAEpB,MAAM,SAAS,CAAC;AAQjB,wBAAgB,eAAe,CAAE,EAChC,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,UAAU,GACV,EAAE,oBAAoB;;;;;EAkVtB;AAeD,wBAAgB,oBAAoB,CAAE,OAAO,EAAE,oBAAoB;;;;;;;;;;;;EAuClE;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EACrC,QAAQ,EACR,UAAU,EACV,GAAG,OAAO,EACV,EAAE,iBAAiB,+BAQnB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/autocomplete/index.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAEX,iBAAiB,EAMjB,oBAAoB,EACpB,MAAM,SAAS,CAAC;AA6DjB,wBAAgB,eAAe,CAAE,EAChC,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,UAAU,GACV,EAAE,oBAAoB;;;;;EA2LtB;AAaD;;;GAGG;AACH,wBAAgB,qBAAqB,CACpC,KAAK,EAAE,oBAAoB,CAAE,QAAQ,CAAE;;;EAmBvC;AAED,wBAAgB,oBAAoB,CAAE,OAAO,EAAE,oBAAoB;;;;;;;;;;;;EAuClE;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,EACrC,QAAQ,EACR,UAAU,EACV,GAAG,OAAO,EACV,EAAE,iBAAiB,+BAQnB"}