@wordpress/components 40.0.0 → 40.1.0

package/build-module/toggle-group-control/toggle-group-control/as-button-group.mjs

@@ -14,6 +14,7 @@ function UnforwardedToggleGroupControlAsButtonGroup({
   value: valueProp,
   id: idProp,
   setSelectedElement,
+  disabled,
   ...otherProps
 }, forwardedRef) {
   const generatedId = useInstanceId(ToggleGroupControlAsButtonGroup, "toggle-group-control-as-button-group");
@@ -33,8 +34,9 @@ function UnforwardedToggleGroupControlAsButtonGroup({
     setValue: setSelectedValue,
     isBlock: !isAdaptiveWidth,
     isDeselectable: true,
-    setSelectedElement
-  }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, setSelectedElement]);
+    setSelectedElement,
+    disabled: Boolean(disabled)
+  }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, setSelectedElement, disabled]);
   return /* @__PURE__ */ _jsx(ToggleGroupControlContext.Provider, {
     value: groupContextValue,
     children: /* @__PURE__ */ _jsx(View, {
@@ -43,6 +45,7 @@ function UnforwardedToggleGroupControlAsButtonGroup({
       ref: forwardedRef,
       role: "group",
       id: baseId,
+      "aria-disabled": disabled || void 0,
       children
     })
   });

package/build-module/toggle-group-control/toggle-group-control/as-button-group.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control/as-button-group.tsx"],
-  "sourcesContent": ["import { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\nimport { View } from '../../view';\nimport { useControlledValue } from '../../utils';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlAsButtonGroup({\n  children,\n  isAdaptiveWidth,\n  label,\n  onChange,\n  value: valueProp,\n  id: idProp,\n  setSelectedElement,\n  ...otherProps\n}, forwardedRef) {\n  const generatedId = useInstanceId(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group');\n  const baseId = idProp || generatedId;\n\n  // Use a heuristic to understand if the component is being used in controlled\n  // or uncontrolled mode, and consequently:\n  // - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n  // - use the `value` prop as the `defaultValue` when uncontrolled\n  const {\n    value,\n    defaultValue\n  } = useComputeControlledOrUncontrolledValue(valueProp);\n  const [selectedValue, setSelectedValue] = useControlledValue({\n    defaultValue,\n    value,\n    onChange\n  });\n  const groupContextValue = useMemo(() => ({\n    baseId,\n    value: selectedValue,\n    setValue: setSelectedValue,\n    isBlock: !isAdaptiveWidth,\n    isDeselectable: true,\n    setSelectedElement\n  }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, setSelectedElement]);\n  return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {\n    value: groupContextValue,\n    children: /*#__PURE__*/_jsx(View, {\n      \"aria-label\": label,\n      ...otherProps,\n      ref: forwardedRef,\n      role: \"group\",\n      id: baseId,\n      children: children\n    })\n  });\n}\nexport const ToggleGroupControlAsButtonGroup = forwardRef(UnforwardedToggleGroupControlAsButtonGroup);\nToggleGroupControlAsButtonGroup.displayName = 'ToggleGroupControlAsButtonGroup';"],
-  "mappings": ";AAAA,SAAS,qBAAqB;AAC9B,SAAS,YAAY,eAAe;AACpC,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC,OAAO,+BAA+B;AACtC,SAAS,+CAA+C;AACxD,SAAS,OAAO,YAAY;AAC5B,SAAS,2CAA2C;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,IAAI;AAAA,EACJ;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,QAAM,cAAc,cAAc,iCAAiC,sCAAsC;AACzG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,wCAAwC,SAAS;AACrD,QAAM,CAAC,eAAe,gBAAgB,IAAI,mBAAmB;AAAA,IAC3D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,oBAAoB,QAAQ,OAAO;AAAA,IACvC;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS,CAAC;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,EACF,IAAI,CAAC,QAAQ,eAAe,kBAAkB,iBAAiB,kBAAkB,CAAC;AAClF,SAAoB,qBAAK,0BAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,qBAAK,MAAM;AAAA,MAChC,cAAc;AAAA,MACd,GAAG;AAAA,MACH,KAAK;AAAA,MACL,MAAM;AAAA,MACN,IAAI;AAAA,MACJ;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,kCAAkC,WAAW,0CAA0C;AACpG,gCAAgC,cAAc;",
+  "sourcesContent": ["import { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useMemo } from '@wordpress/element';\nimport { View } from '../../view';\nimport { useControlledValue } from '../../utils';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlAsButtonGroup({\n  children,\n  isAdaptiveWidth,\n  label,\n  onChange,\n  value: valueProp,\n  id: idProp,\n  setSelectedElement,\n  disabled,\n  ...otherProps\n}, forwardedRef) {\n  const generatedId = useInstanceId(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group');\n  const baseId = idProp || generatedId;\n\n  // Use a heuristic to understand if the component is being used in controlled\n  // or uncontrolled mode, and consequently:\n  // - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n  // - use the `value` prop as the `defaultValue` when uncontrolled\n  const {\n    value,\n    defaultValue\n  } = useComputeControlledOrUncontrolledValue(valueProp);\n  const [selectedValue, setSelectedValue] = useControlledValue({\n    defaultValue,\n    value,\n    onChange\n  });\n  const groupContextValue = useMemo(() => ({\n    baseId,\n    value: selectedValue,\n    setValue: setSelectedValue,\n    isBlock: !isAdaptiveWidth,\n    isDeselectable: true,\n    setSelectedElement,\n    disabled: Boolean(disabled)\n  }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, setSelectedElement, disabled]);\n  return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {\n    value: groupContextValue,\n    children: /*#__PURE__*/_jsx(View, {\n      \"aria-label\": label,\n      ...otherProps,\n      ref: forwardedRef,\n      role: \"group\",\n      id: baseId,\n      \"aria-disabled\": disabled || undefined,\n      children: children\n    })\n  });\n}\nexport const ToggleGroupControlAsButtonGroup = forwardRef(UnforwardedToggleGroupControlAsButtonGroup);\nToggleGroupControlAsButtonGroup.displayName = 'ToggleGroupControlAsButtonGroup';"],
+  "mappings": ";AAAA,SAAS,qBAAqB;AAC9B,SAAS,YAAY,eAAe;AACpC,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC,OAAO,+BAA+B;AACtC,SAAS,+CAA+C;AACxD,SAAS,OAAO,YAAY;AAC5B,SAAS,2CAA2C;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,QAAM,cAAc,cAAc,iCAAiC,sCAAsC;AACzG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,wCAAwC,SAAS;AACrD,QAAM,CAAC,eAAe,gBAAgB,IAAI,mBAAmB;AAAA,IAC3D;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,oBAAoB,QAAQ,OAAO;AAAA,IACvC;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS,CAAC;AAAA,IACV,gBAAgB;AAAA,IAChB;AAAA,IACA,UAAU,QAAQ,QAAQ;AAAA,EAC5B,IAAI,CAAC,QAAQ,eAAe,kBAAkB,iBAAiB,oBAAoB,QAAQ,CAAC;AAC5F,SAAoB,qBAAK,0BAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,qBAAK,MAAM;AAAA,MAChC,cAAc;AAAA,MACd,GAAG;AAAA,MACH,KAAK;AAAA,MACL,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,iBAAiB,YAAY;AAAA,MAC7B;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,kCAAkC,WAAW,0CAA0C;AACpG,gCAAgC,cAAc;",
   "names": []
 }

package/build-module/toggle-group-control/toggle-group-control/as-radio-group.mjs

@@ -15,6 +15,7 @@ function UnforwardedToggleGroupControlAsRadioGroup({
   value: valueProp,
   id: idProp,
   setSelectedElement,
+  disabled,
   ...otherProps
 }, forwardedRef) {
   const generatedId = useInstanceId(ToggleGroupControlAsRadioGroup, "toggle-group-control-as-radio-group");
@@ -47,8 +48,9 @@ function UnforwardedToggleGroupControlAsRadioGroup({
     value: selectedValue,
     // @ts-expect-error - This is wrong and we should fix it.
     setValue,
-    setSelectedElement
-  }), [baseId, isAdaptiveWidth, radio, selectedValue, setSelectedElement, setValue]);
+    setSelectedElement,
+    disabled: Boolean(disabled)
+  }), [baseId, isAdaptiveWidth, radio, selectedValue, setSelectedElement, setValue, disabled]);
   return /* @__PURE__ */ _jsx(ToggleGroupControlContext.Provider, {
     value: groupContextValue,
     children: /* @__PURE__ */ _jsx(Ariakit.RadioGroup, {
@@ -58,6 +60,7 @@ function UnforwardedToggleGroupControlAsRadioGroup({
       ...otherProps,
       id: baseId,
       ref: forwardedRef,
+      disabled: disabled || void 0,
       children
     })
   });

package/build-module/toggle-group-control/toggle-group-control/as-radio-group.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control/as-radio-group.tsx"],
-  "sourcesContent": ["import * as Ariakit from '@ariakit/react';\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useEffect, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\nimport { View } from '../../view';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlAsRadioGroup({\n  children,\n  isAdaptiveWidth,\n  label,\n  onChange: onChangeProp,\n  value: valueProp,\n  id: idProp,\n  setSelectedElement,\n  ...otherProps\n}, forwardedRef) {\n  const generatedId = useInstanceId(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group');\n  const baseId = idProp || generatedId;\n\n  // Use a heuristic to understand if the component is being used in controlled\n  // or uncontrolled mode, and consequently:\n  // - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n  // - use the `value` prop as the `defaultValue` when uncontrolled\n  const {\n    value,\n    defaultValue\n  } = useComputeControlledOrUncontrolledValue(valueProp);\n\n  // `useRadioStore`'s `setValue` prop can be called with `null`, while\n  // the component's `onChange` prop only expects `undefined`\n  const wrappedOnChangeProp = onChangeProp ? v => {\n    onChangeProp(v ?? undefined);\n  } : undefined;\n  const radio = Ariakit.useRadioStore({\n    defaultValue,\n    value,\n    setValue: wrappedOnChangeProp,\n    rtl: isRTL()\n  });\n  const selectedValue = Ariakit.useStoreState(radio, 'value');\n  const setValue = radio.setValue;\n\n  // Ensures that the active id is also reset after the value is \"reset\" by the consumer.\n  useEffect(() => {\n    if (selectedValue === '') {\n      radio.setActiveId(undefined);\n    }\n  }, [radio, selectedValue]);\n  const groupContextValue = useMemo(() => ({\n    activeItemIsNotFirstItem: () => radio.getState().activeId !== radio.first(),\n    baseId,\n    isBlock: !isAdaptiveWidth,\n    // @ts-expect-error - This is wrong and we should fix it.\n    value: selectedValue,\n    // @ts-expect-error - This is wrong and we should fix it.\n    setValue,\n    setSelectedElement\n  }), [baseId, isAdaptiveWidth, radio, selectedValue, setSelectedElement, setValue]);\n  return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {\n    value: groupContextValue,\n    children: /*#__PURE__*/_jsx(Ariakit.RadioGroup, {\n      store: radio,\n      \"aria-label\": label,\n      render: /*#__PURE__*/_jsx(View, {}),\n      ...otherProps,\n      id: baseId,\n      ref: forwardedRef,\n      children: children\n    })\n  });\n}\nexport const ToggleGroupControlAsRadioGroup = forwardRef(UnforwardedToggleGroupControlAsRadioGroup);\nToggleGroupControlAsRadioGroup.displayName = 'ToggleGroupControlAsRadioGroup';"],
-  "mappings": ";AAAA,YAAY,aAAa;AACzB,SAAS,qBAAqB;AAC9B,SAAS,YAAY,WAAW,eAAe;AAC/C,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,OAAO,+BAA+B;AACtC,SAAS,+CAA+C;AACxD,SAAS,OAAO,YAAY;AAC5B,SAAS,0CAA0C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,IAAI;AAAA,EACJ;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,QAAM,cAAc,cAAc,gCAAgC,qCAAqC;AACvG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,wCAAwC,SAAS;AAIrD,QAAM,sBAAsB,eAAe,OAAK;AAC9C,iBAAa,KAAK,MAAS;AAAA,EAC7B,IAAI;AACJ,QAAM,QAAgB,sBAAc;AAAA,IAClC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,KAAK,MAAM;AAAA,EACb,CAAC;AACD,QAAM,gBAAwB,sBAAc,OAAO,OAAO;AAC1D,QAAM,WAAW,MAAM;AAGvB,YAAU,MAAM;AACd,QAAI,kBAAkB,IAAI;AACxB,YAAM,YAAY,MAAS;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,OAAO,aAAa,CAAC;AACzB,QAAM,oBAAoB,QAAQ,OAAO;AAAA,IACvC,0BAA0B,MAAM,MAAM,SAAS,EAAE,aAAa,MAAM,MAAM;AAAA,IAC1E;AAAA,IACA,SAAS,CAAC;AAAA;AAAA,IAEV,OAAO;AAAA;AAAA,IAEP;AAAA,IACA;AAAA,EACF,IAAI,CAAC,QAAQ,iBAAiB,OAAO,eAAe,oBAAoB,QAAQ,CAAC;AACjF,SAAoB,qBAAK,0BAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,qBAAa,oBAAY;AAAA,MAC9C,OAAO;AAAA,MACP,cAAc;AAAA,MACd,QAAqB,qBAAK,MAAM,CAAC,CAAC;AAAA,MAClC,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,iCAAiC,WAAW,yCAAyC;AAClG,+BAA+B,cAAc;",
+  "sourcesContent": ["import * as Ariakit from '@ariakit/react';\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useEffect, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\nimport { View } from '../../view';\nimport ToggleGroupControlContext from '../context';\nimport { useComputeControlledOrUncontrolledValue } from './utils';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlAsRadioGroup({\n  children,\n  isAdaptiveWidth,\n  label,\n  onChange: onChangeProp,\n  value: valueProp,\n  id: idProp,\n  setSelectedElement,\n  disabled,\n  ...otherProps\n}, forwardedRef) {\n  const generatedId = useInstanceId(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group');\n  const baseId = idProp || generatedId;\n\n  // Use a heuristic to understand if the component is being used in controlled\n  // or uncontrolled mode, and consequently:\n  // - when controlled, convert `undefined` values to `''` (ie. \"no value\")\n  // - use the `value` prop as the `defaultValue` when uncontrolled\n  const {\n    value,\n    defaultValue\n  } = useComputeControlledOrUncontrolledValue(valueProp);\n\n  // `useRadioStore`'s `setValue` prop can be called with `null`, while\n  // the component's `onChange` prop only expects `undefined`\n  const wrappedOnChangeProp = onChangeProp ? v => {\n    onChangeProp(v ?? undefined);\n  } : undefined;\n  const radio = Ariakit.useRadioStore({\n    defaultValue,\n    value,\n    setValue: wrappedOnChangeProp,\n    rtl: isRTL()\n  });\n  const selectedValue = Ariakit.useStoreState(radio, 'value');\n  const setValue = radio.setValue;\n\n  // Ensures that the active id is also reset after the value is \"reset\" by the consumer.\n  useEffect(() => {\n    if (selectedValue === '') {\n      radio.setActiveId(undefined);\n    }\n  }, [radio, selectedValue]);\n  const groupContextValue = useMemo(() => ({\n    activeItemIsNotFirstItem: () => radio.getState().activeId !== radio.first(),\n    baseId,\n    isBlock: !isAdaptiveWidth,\n    // @ts-expect-error - This is wrong and we should fix it.\n    value: selectedValue,\n    // @ts-expect-error - This is wrong and we should fix it.\n    setValue,\n    setSelectedElement,\n    disabled: Boolean(disabled)\n  }), [baseId, isAdaptiveWidth, radio, selectedValue, setSelectedElement, setValue, disabled]);\n  return /*#__PURE__*/_jsx(ToggleGroupControlContext.Provider, {\n    value: groupContextValue,\n    children: /*#__PURE__*/_jsx(Ariakit.RadioGroup, {\n      store: radio,\n      \"aria-label\": label,\n      render: /*#__PURE__*/_jsx(View, {}),\n      ...otherProps,\n      id: baseId,\n      ref: forwardedRef,\n      disabled: disabled || undefined,\n      children: children\n    })\n  });\n}\nexport const ToggleGroupControlAsRadioGroup = forwardRef(UnforwardedToggleGroupControlAsRadioGroup);\nToggleGroupControlAsRadioGroup.displayName = 'ToggleGroupControlAsRadioGroup';"],
+  "mappings": ";AAAA,YAAY,aAAa;AACzB,SAAS,qBAAqB;AAC9B,SAAS,YAAY,WAAW,eAAe;AAC/C,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,OAAO,+BAA+B;AACtC,SAAS,+CAA+C;AACxD,SAAS,OAAO,YAAY;AAC5B,SAAS,0CAA0C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,cAAc;AACf,QAAM,cAAc,cAAc,gCAAgC,qCAAqC;AACvG,QAAM,SAAS,UAAU;AAMzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,wCAAwC,SAAS;AAIrD,QAAM,sBAAsB,eAAe,OAAK;AAC9C,iBAAa,KAAK,MAAS;AAAA,EAC7B,IAAI;AACJ,QAAM,QAAgB,sBAAc;AAAA,IAClC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,KAAK,MAAM;AAAA,EACb,CAAC;AACD,QAAM,gBAAwB,sBAAc,OAAO,OAAO;AAC1D,QAAM,WAAW,MAAM;AAGvB,YAAU,MAAM;AACd,QAAI,kBAAkB,IAAI;AACxB,YAAM,YAAY,MAAS;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,OAAO,aAAa,CAAC;AACzB,QAAM,oBAAoB,QAAQ,OAAO;AAAA,IACvC,0BAA0B,MAAM,MAAM,SAAS,EAAE,aAAa,MAAM,MAAM;AAAA,IAC1E;AAAA,IACA,SAAS,CAAC;AAAA;AAAA,IAEV,OAAO;AAAA;AAAA,IAEP;AAAA,IACA;AAAA,IACA,UAAU,QAAQ,QAAQ;AAAA,EAC5B,IAAI,CAAC,QAAQ,iBAAiB,OAAO,eAAe,oBAAoB,UAAU,QAAQ,CAAC;AAC3F,SAAoB,qBAAK,0BAA0B,UAAU;AAAA,IAC3D,OAAO;AAAA,IACP,UAAuB,qBAAa,oBAAY;AAAA,MAC9C,OAAO;AAAA,MACP,cAAc;AAAA,MACd,QAAqB,qBAAK,MAAM,CAAC,CAAC;AAAA,MAClC,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,UAAU,YAAY;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACO,IAAM,iCAAiC,WAAW,yCAAyC;AAClG,+BAA+B,cAAc;",
   "names": []
 }

package/build-module/toggle-group-control/toggle-group-control/component.mjs

@@ -84,7 +84,7 @@ function registerStyle(hash, css) {
 
 // packages/components/src/toggle-group-control/toggle-group-control/style.module.scss
 if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
-  registerStyle("a4244dfbf1", '.f3fd102dd2f0e90e__toggle-group-control{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));border:1px solid transparent;border-radius:var(--wpds-border-radius-sm,2px);display:inline-flex;height:40px;min-width:0;position:relative}@media not (prefers-reduced-motion){.f3fd102dd2f0e90e__toggle-group-control[data-indicator-animated]:before{transition-duration:.2s;transition-property:transform,border-radius;transition-timing-function:ease-out}}.f3fd102dd2f0e90e__toggle-group-control:before{background:var(--wp-components-color-gray-100,var(--wpds-color-background-surface-neutral,#fcfcfc));border:1px solid var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));border-radius:var(--wpds-border-radius-sm,2px);content:"";height:calc(var(--selected-height, 0)*1px + 2px);left:-2px;opacity:min(1,max(0,var(--selected-width,0),var(--selected-height,0)));outline:2px solid transparent;outline-offset:-3px;pointer-events:none;position:absolute;top:-1px;transform:translateX(calc(var(--selected-left, 0)*1px));width:calc(var(--selected-width, 0)*1px + 2px)}._1344586004ce6119__has-border{border-color:var(--wp-components-color-gray-300,var(--wpds-color-stroke-surface-neutral,#dbdbdb))}.aa98fad5b5d333be__has-enclosing-borders:hover{border-color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d))}.aa98fad5b5d333be__has-enclosing-borders:focus-within{outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));z-index:1}._4068eff8d72c19b3__is-block{display:flex;width:100%}');
+  registerStyle("86a73788d7", '.f3fd102dd2f0e90e__toggle-group-control{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));border:1px solid transparent;border-radius:var(--wpds-border-radius-sm,2px);display:inline-flex;height:40px;min-width:0;position:relative}@media not (prefers-reduced-motion){.f3fd102dd2f0e90e__toggle-group-control[data-indicator-animated]:before{transition-duration:.2s;transition-property:transform,border-radius;transition-timing-function:ease-out}}.f3fd102dd2f0e90e__toggle-group-control:before{background:var(--wp-components-color-gray-100,var(--wpds-color-background-surface-neutral,#fcfcfc));border:1px solid var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));border-radius:var(--wpds-border-radius-sm,2px);content:"";height:calc(var(--selected-height, 0)*1px + 2px);left:-2px;opacity:min(1,max(0,var(--selected-width,0),var(--selected-height,0)));outline:2px solid transparent;outline-offset:-3px;pointer-events:none;position:absolute;top:-1px;transform:translateX(calc(var(--selected-left, 0)*1px));width:calc(var(--selected-width, 0)*1px + 2px)}.f3fd102dd2f0e90e__toggle-group-control[aria-disabled=true]:before{opacity:calc(min(1, max(0, var(--selected-width, 0), var(--selected-height, 0))) * .4)}._1344586004ce6119__has-border{border-color:var(--wp-components-color-gray-300,var(--wpds-color-stroke-surface-neutral,#dbdbdb))}.aa98fad5b5d333be__has-enclosing-borders:hover:not([aria-disabled=true]){border-color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d))}.aa98fad5b5d333be__has-enclosing-borders:focus-within{outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));z-index:1}._4068eff8d72c19b3__is-block{display:flex;width:100%}');
 }
 var style_module_default = { "toggle-group-control": "f3fd102dd2f0e90e__toggle-group-control", "has-border": "_1344586004ce6119__has-border", "has-enclosing-borders": "aa98fad5b5d333be__has-enclosing-borders", "is-block": "_4068eff8d72c19b3__is-block" };
 
@@ -104,6 +104,7 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
     isAdaptiveWidth = false,
     isBlock = false,
     isDeselectable = false,
+    disabled = false,
     id,
     label,
     hideLabelFromVision = false,
@@ -150,6 +151,7 @@ function UnconnectedToggleGroupControl(props, forwardedRef) {
       onChange,
       ref: refs,
       value,
+      disabled,
       children
     })
   });

package/build-module/toggle-group-control/toggle-group-control/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control/component.tsx", "../../../../style-runtime/src/index.ts", "../../../src/toggle-group-control/toggle-group-control/style.module.scss"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { contextConnect, useContextSystem } from '../../context';\nimport BaseControl, { useBaseControlProps } from '../../base-control';\nimport styles from './style.module.scss';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\nimport { useTrackElementOffsetRect } from '../../utils/element-rect';\nimport { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedToggleGroupControl(props, forwardedRef) {\n  const {\n    // Prevent passing legacy props to internal component.\n    __nextHasNoMarginBottom: _,\n    size: _size,\n    __next40pxDefaultSize: _next40pxDefaultSize,\n    className,\n    isAdaptiveWidth = false,\n    isBlock = false,\n    isDeselectable = false,\n    id,\n    label,\n    hideLabelFromVision = false,\n    help,\n    onChange,\n    value,\n    children,\n    ...otherProps\n  } = useContextSystem(props, 'ToggleGroupControl');\n  const {\n    baseControlProps,\n    controlProps\n  } = useBaseControlProps({\n    id,\n    help,\n    label,\n    hideLabelFromVision\n  });\n  const [selectedElement, setSelectedElement] = useState();\n  const [controlElement, setControlElement] = useState();\n  const refs = useMergeRefs([setControlElement, forwardedRef]);\n  const selectedRect = useTrackElementOffsetRect(value !== null && value !== undefined ? selectedElement : undefined);\n  useAnimatedOffsetRect(controlElement, selectedRect, {\n    prefix: 'selected',\n    dataAttribute: 'indicator-animated',\n    transitionEndFilter: event => event.pseudoElement === '::before',\n    roundRect: false\n  });\n  const classes = clsx(styles['toggle-group-control'], {\n    [styles['is-block']]: isBlock,\n    [styles['has-border']]: isBlock && !isDeselectable,\n    [styles['has-enclosing-borders']]: !isDeselectable\n  }, className);\n  const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;\n  return /*#__PURE__*/_jsx(BaseControl, {\n    ...baseControlProps,\n    children: /*#__PURE__*/_jsx(MainControl, {\n      ...otherProps,\n      ...controlProps,\n      setSelectedElement: setSelectedElement,\n      className: classes,\n      isAdaptiveWidth: isAdaptiveWidth\n      // `label` is used for `aria-label` on the inner control.\n      // This is separate from the visual label rendered by `BaseControl`.\n      ,\n      label: label,\n      onChange: onChange,\n      ref: refs,\n      value: value,\n      children: children\n    })\n  });\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, 'ToggleGroupControl');\nexport default ToggleGroupControl;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"a4244dfbf1\", \".f3fd102dd2f0e90e__toggle-group-control{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));border:1px solid transparent;border-radius:var(--wpds-border-radius-sm,2px);display:inline-flex;height:40px;min-width:0;position:relative}@media not (prefers-reduced-motion){.f3fd102dd2f0e90e__toggle-group-control[data-indicator-animated]:before{transition-duration:.2s;transition-property:transform,border-radius;transition-timing-function:ease-out}}.f3fd102dd2f0e90e__toggle-group-control:before{background:var(--wp-components-color-gray-100,var(--wpds-color-background-surface-neutral,#fcfcfc));border:1px solid var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));border-radius:var(--wpds-border-radius-sm,2px);content:\\\"\\\";height:calc(var(--selected-height, 0)*1px + 2px);left:-2px;opacity:min(1,max(0,var(--selected-width,0),var(--selected-height,0)));outline:2px solid transparent;outline-offset:-3px;pointer-events:none;position:absolute;top:-1px;transform:translateX(calc(var(--selected-left, 0)*1px));width:calc(var(--selected-width, 0)*1px + 2px)}._1344586004ce6119__has-border{border-color:var(--wp-components-color-gray-300,var(--wpds-color-stroke-surface-neutral,#dbdbdb))}.aa98fad5b5d333be__has-enclosing-borders:hover{border-color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d))}.aa98fad5b5d333be__has-enclosing-borders:focus-within{outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));z-index:1}._4068eff8d72c19b3__is-block{display:flex;width:100%}\");\n}\nexport default {\"toggle-group-control\":\"f3fd102dd2f0e90e__toggle-group-control\",\"has-border\":\"_1344586004ce6119__has-border\",\"has-enclosing-borders\":\"aa98fad5b5d333be__has-enclosing-borders\",\"is-block\":\"_4068eff8d72c19b3__is-block\"};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useState } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { contextConnect, useContextSystem } from '../../context';\nimport BaseControl, { useBaseControlProps } from '../../base-control';\nimport styles from './style.module.scss';\nimport { ToggleGroupControlAsRadioGroup } from './as-radio-group';\nimport { ToggleGroupControlAsButtonGroup } from './as-button-group';\nimport { useTrackElementOffsetRect } from '../../utils/element-rect';\nimport { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedToggleGroupControl(props, forwardedRef) {\n  const {\n    // Prevent passing legacy props to internal component.\n    __nextHasNoMarginBottom: _,\n    size: _size,\n    __next40pxDefaultSize: _next40pxDefaultSize,\n    className,\n    isAdaptiveWidth = false,\n    isBlock = false,\n    isDeselectable = false,\n    disabled = false,\n    id,\n    label,\n    hideLabelFromVision = false,\n    help,\n    onChange,\n    value,\n    children,\n    ...otherProps\n  } = useContextSystem(props, 'ToggleGroupControl');\n  const {\n    baseControlProps,\n    controlProps\n  } = useBaseControlProps({\n    id,\n    help,\n    label,\n    hideLabelFromVision\n  });\n  const [selectedElement, setSelectedElement] = useState();\n  const [controlElement, setControlElement] = useState();\n  const refs = useMergeRefs([setControlElement, forwardedRef]);\n  const selectedRect = useTrackElementOffsetRect(value !== null && value !== undefined ? selectedElement : undefined);\n  useAnimatedOffsetRect(controlElement, selectedRect, {\n    prefix: 'selected',\n    dataAttribute: 'indicator-animated',\n    transitionEndFilter: event => event.pseudoElement === '::before',\n    roundRect: false\n  });\n  const classes = clsx(styles['toggle-group-control'], {\n    [styles['is-block']]: isBlock,\n    [styles['has-border']]: isBlock && !isDeselectable,\n    [styles['has-enclosing-borders']]: !isDeselectable\n  }, className);\n  const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup;\n  return /*#__PURE__*/_jsx(BaseControl, {\n    ...baseControlProps,\n    children: /*#__PURE__*/_jsx(MainControl, {\n      ...otherProps,\n      ...controlProps,\n      setSelectedElement: setSelectedElement,\n      className: classes,\n      isAdaptiveWidth: isAdaptiveWidth\n      // `label` is used for `aria-label` on the inner control.\n      // This is separate from the visual label rendered by `BaseControl`.\n      ,\n      label: label,\n      onChange: onChange,\n      ref: refs,\n      value: value,\n      disabled: disabled,\n      children: children\n    })\n  });\n}\n\n/**\n * `ToggleGroupControl` is a form component that lets users choose options\n * represented in horizontal segments. To render options for this control use\n * `ToggleGroupControlOption` component.\n *\n * This component is intended for selecting a single persistent value from a set of options,\n * similar to a how a radio button group would work. If you simply want a toggle to switch between views,\n * use a `TabPanel` instead.\n *\n * Only use this control when you know for sure the labels of items inside won't\n * wrap. For items with longer labels, you can consider a `SelectControl` or a\n * `CustomSelectControl` component instead.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, 'ToggleGroupControl');\nexport default ToggleGroupControl;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"86a73788d7\", \".f3fd102dd2f0e90e__toggle-group-control{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));border:1px solid transparent;border-radius:var(--wpds-border-radius-sm,2px);display:inline-flex;height:40px;min-width:0;position:relative}@media not (prefers-reduced-motion){.f3fd102dd2f0e90e__toggle-group-control[data-indicator-animated]:before{transition-duration:.2s;transition-property:transform,border-radius;transition-timing-function:ease-out}}.f3fd102dd2f0e90e__toggle-group-control:before{background:var(--wp-components-color-gray-100,var(--wpds-color-background-surface-neutral,#fcfcfc));border:1px solid var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));border-radius:var(--wpds-border-radius-sm,2px);content:\\\"\\\";height:calc(var(--selected-height, 0)*1px + 2px);left:-2px;opacity:min(1,max(0,var(--selected-width,0),var(--selected-height,0)));outline:2px solid transparent;outline-offset:-3px;pointer-events:none;position:absolute;top:-1px;transform:translateX(calc(var(--selected-left, 0)*1px));width:calc(var(--selected-width, 0)*1px + 2px)}.f3fd102dd2f0e90e__toggle-group-control[aria-disabled=true]:before{opacity:calc(min(1, max(0, var(--selected-width, 0), var(--selected-height, 0))) * .4)}._1344586004ce6119__has-border{border-color:var(--wp-components-color-gray-300,var(--wpds-color-stroke-surface-neutral,#dbdbdb))}.aa98fad5b5d333be__has-enclosing-borders:hover:not([aria-disabled=true]){border-color:var(--wp-components-color-gray-400,var(--wpds-color-stroke-interactive-neutral,#8d8d8d))}.aa98fad5b5d333be__has-enclosing-borders:focus-within{outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));z-index:1}._4068eff8d72c19b3__is-block{display:flex;width:100%}\");\n}\nexport default {\"toggle-group-control\":\"f3fd102dd2f0e90e__toggle-group-control\",\"has-border\":\"_1344586004ce6119__has-border\",\"has-enclosing-borders\":\"aa98fad5b5d333be__has-enclosing-borders\",\"is-block\":\"_4068eff8d72c19b3__is-block\"};\n"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,wBAAwB;AACjD,OAAO,eAAe,2BAA2B;;;ACJjD,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACpB,QAAM,cAAc;AACpB,MAAI,YAAY,kBAAkB;AAChC,WAAO,YAAY;AAAA,EACrB;AACA,cAAY,mBAAmB;AAAA,IAC7B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC9B;AACA,MAAI,OAAO,aAAa,aAAa;AACnC,qBAAiB,QAAQ;AAAA,EAC3B;AACA,SAAO,YAAY;AACrB;AAUA,SAAS,0BAA0B,gBAAgB,MAAM;AACvD,MAAI,CAAC,eAAe,MAAM;AACxB,WAAO;AAAA,EACT;AACA,aAAW,SAAS,eAAe,KAAK,iBAAiB,SAAS,oBAAoB,GAAG,GAAG;AAC1F,QAAI,MAAM,aAAa,oBAAoB,MAAM,MAAM;AACrD,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAUA,SAAS,YAAY,gBAAgB,MAAM,KAAK;AAC9C,MAAI,CAAC,eAAe,MAAM;AACxB;AAAA,EACF;AACA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAI,cAAc;AAC9D,MAAI,CAAC,gBAAgB;AACnB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAI,gBAAgB,cAAc;AAAA,EAC3D;AACA,MAAI,eAAe,IAAI,IAAI,GAAG;AAC5B;AAAA,EACF;AAKA,MAAI,0BAA0B,gBAAgB,IAAI,GAAG;AACnD,mBAAe,IAAI,IAAI;AACvB;AAAA,EACF;AACA,QAAM,QAAQ,eAAe,cAAc,OAAO;AAClD,QAAM,aAAa,sBAAsB,IAAI;AAC7C,QAAM,YAAY,eAAe,eAAe,GAAG,CAAC;AACpD,iBAAe,KAAK,YAAY,KAAK;AACrC,iBAAe,IAAI,IAAI;AACzB;AAaO,SAAS,iBAAiB,gBAAgB;AAC/C,QAAM,UAAU,WAAW;AAC3B,UAAQ,UAAU,IAAI,iBAAiB,QAAQ,UAAU,IAAI,cAAc,KAAK,KAAK,CAAC;AACtF,aAAW,CAAC,MAAM,GAAG,KAAK,QAAQ,QAAQ;AACxC,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACA,SAAO,MAAM;AACX,UAAM,QAAQ,QAAQ,UAAU,IAAI,cAAc;AAClD,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AACA,QAAI,SAAS,GAAG;AACd,cAAQ,UAAU,OAAO,cAAc;AACvC;AAAA,IACF;AACA,YAAQ,UAAU,IAAI,gBAAgB,QAAQ,CAAC;AAAA,EACjD;AACF;AAaO,SAAS,cAAc,MAAM,KAAK;AACvC,QAAM,UAAU,WAAW;AAC3B,UAAQ,OAAO,IAAI,MAAM,GAAG;AAC5B,aAAW,kBAAkB,QAAQ,UAAU,KAAK,GAAG;AACrD,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACF;;;AChIA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc,u7DAAy7D;AACt9D;AACA,IAAO,uBAAQ,EAAC,wBAAuB,0CAAyC,cAAa,iCAAgC,yBAAwB,2CAA0C,YAAW,8BAA6B;;;AFEvO,SAAS,sCAAsC;AAC/C,SAAS,uCAAuC;AAChD,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC,SAAS,OAAO,YAAY;AAC5B,SAAS,8BAA8B,OAAO,cAAc;AAC1D,QAAM;AAAA;AAAA,IAEJ,yBAAyB;AAAA,IACzB,MAAM;AAAA,IACN,uBAAuB;AAAA,IACvB;AAAA,IACA,kBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,oBAAoB;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS;AACvD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS;AACrD,QAAM,OAAO,aAAa,CAAC,mBAAmB,YAAY,CAAC;AAC3D,QAAM,eAAe,0BAA0B,UAAU,QAAQ,UAAU,SAAY,kBAAkB,MAAS;AAClH,wBAAsB,gBAAgB,cAAc;AAAA,IAClD,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,qBAAqB,WAAS,MAAM,kBAAkB;AAAA,IACtD,WAAW;AAAA,EACb,CAAC;AACD,QAAM,UAAU,KAAK,qBAAO,sBAAsB,GAAG;AAAA,IACnD,CAAC,qBAAO,UAAU,CAAC,GAAG;AAAA,IACtB,CAAC,qBAAO,YAAY,CAAC,GAAG,WAAW,CAAC;AAAA,IACpC,CAAC,qBAAO,uBAAuB,CAAC,GAAG,CAAC;AAAA,EACtC,GAAG,SAAS;AACZ,QAAM,cAAc,iBAAiB,kCAAkC;AACvE,SAAoB,qBAAK,aAAa;AAAA,IACpC,GAAG;AAAA,IACH,UAAuB,qBAAK,aAAa;AAAA,MACvC,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MAIA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAmCO,IAAM,qBAAqB,eAAe,+BAA+B,oBAAoB;AACpG,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/toggle-group-control/toggle-group-control-option/component.mjs

@@ -1,8 +1,10 @@
 // packages/components/src/toggle-group-control/toggle-group-control-option/component.tsx
 import { forwardRef } from "@wordpress/element";
 import { ToggleGroupControlOptionBase } from "../toggle-group-control-option-base/index.mjs";
+import { useToggleGroupControlContext } from "../context.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedToggleGroupControlOption(props, ref) {
+  useToggleGroupControlContext("ToggleGroupControlOption");
   const {
     label,
     ...restProps

package/build-module/toggle-group-control/toggle-group-control-option/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control-option/component.tsx"],
-  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlOption(props, ref) {\n  const {\n    label,\n    ...restProps\n  } = props;\n  const optionLabel = restProps['aria-label'] || label;\n  return /*#__PURE__*/_jsx(ToggleGroupControlOptionBase, {\n    ...restProps,\n    \"aria-label\": optionLabel,\n    ref: ref,\n    children: label\n  });\n}\n\n/**\n * `ToggleGroupControlOption` is a form component and is meant to be used as a\n * child of `ToggleGroupControl`.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControlOption = forwardRef(UnforwardedToggleGroupControlOption);\nToggleGroupControlOption.displayName = 'ToggleGroupControlOption';\nexport default ToggleGroupControlOption;"],
-  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,SAAS,oCAAoC;AAC7C,SAAS,OAAO,YAAY;AAC5B,SAAS,oCAAoC,OAAO,KAAK;AACvD,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,cAAc,UAAU,YAAY,KAAK;AAC/C,SAAoB,qBAAK,8BAA8B;AAAA,IACrD,GAAG;AAAA,IACH,cAAc;AAAA,IACd;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AACH;AA0BO,IAAM,2BAA2B,WAAW,mCAAmC;AACtF,yBAAyB,cAAc;AACvC,IAAO,oBAAQ;",
+  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport { useToggleGroupControlContext } from '../context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlOption(props, ref) {\n  useToggleGroupControlContext('ToggleGroupControlOption');\n  const {\n    label,\n    ...restProps\n  } = props;\n  const optionLabel = restProps['aria-label'] || label;\n  return /*#__PURE__*/_jsx(ToggleGroupControlOptionBase, {\n    ...restProps,\n    \"aria-label\": optionLabel,\n    ref: ref,\n    children: label\n  });\n}\n\n/**\n * `ToggleGroupControlOption` is a form component and is meant to be used as a\n * child of `ToggleGroupControl`.\n *\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOption as ToggleGroupControlOption,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl\n *       label=\"my label\"\n *       value=\"vertical\"\n *       isBlock\n *     >\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nexport const ToggleGroupControlOption = forwardRef(UnforwardedToggleGroupControlOption);\nToggleGroupControlOption.displayName = 'ToggleGroupControlOption';\nexport default ToggleGroupControlOption;"],
+  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAC7C,SAAS,OAAO,YAAY;AAC5B,SAAS,oCAAoC,OAAO,KAAK;AACvD,+BAA6B,0BAA0B;AACvD,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,cAAc,UAAU,YAAY,KAAK;AAC/C,SAAoB,qBAAK,8BAA8B;AAAA,IACrD,GAAG;AAAA,IACH,cAAc;AAAA,IACd;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AACH;AA0BO,IAAM,2BAA2B,WAAW,mCAAmC;AACtF,yBAAyB,cAAc;AACvC,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/toggle-group-control/toggle-group-control-option-base/component.mjs

@@ -128,6 +128,7 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
     disabled,
     ...otherButtonProps
   } = buttonProps;
+  const isOptionDisabled = Boolean(toggleGroupControlContext.disabled || disabled);
   const isPressed = toggleGroupControlContext.value === value;
   const labelClasses = clsx(style_module_default.label, isBlock && style_module_default["label-block"]);
   const itemClasses = clsx(style_module_default.button, {
@@ -162,7 +163,7 @@ function ToggleGroupControlOptionBase(props, forwardedRef) {
       text: otherButtonProps["aria-label"],
       children: isDeselectable ? /* @__PURE__ */ _jsx("button", {
         ...commonProps,
-        disabled,
+        disabled: isOptionDisabled,
         "aria-pressed": isPressed,
         type: "button",
         onClick: buttonOnClick,

package/build-module/toggle-group-control/toggle-group-control-option-base/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control-option-base/component.tsx", "../../../../style-runtime/src/index.ts", "../../../src/toggle-group-control/toggle-group-control-option-base/style.module.scss"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport * as Ariakit from '@ariakit/react';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useRef } from '@wordpress/element';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useToggleGroupControlContext } from '../context';\nimport styles from './style.module.scss';\nimport Tooltip from '../../tooltip';\nimport { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst WithToolTip = ({\n  showTooltip,\n  text,\n  children\n}) => {\n  if (showTooltip && text) {\n    return /*#__PURE__*/_jsx(Tooltip, {\n      text: text,\n      placement: \"top\",\n      children: children\n    });\n  }\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: children\n  });\n};\nfunction ToggleGroupControlOptionBase(props, forwardedRef) {\n  const toggleGroupControlContext = useToggleGroupControlContext();\n  const id = useInstanceId(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base');\n  const buttonProps = useContextSystem({\n    ...props,\n    id\n  }, 'ToggleGroupControlOptionBase');\n  const {\n    isBlock = false,\n    isDeselectable = false\n  } = toggleGroupControlContext;\n  const {\n    className,\n    isIcon = false,\n    value,\n    children,\n    showTooltip = false,\n    disabled,\n    ...otherButtonProps\n  } = buttonProps;\n  const isPressed = toggleGroupControlContext.value === value;\n  const labelClasses = clsx(styles.label, isBlock && styles['label-block']);\n  const itemClasses = clsx(styles.button, {\n    [styles['is-deselectable']]: isDeselectable,\n    [styles['is-icon']]: isIcon,\n    [styles['is-pressed']]: isPressed\n  }, className);\n  const buttonOnClick = () => {\n    if (isDeselectable && isPressed) {\n      toggleGroupControlContext.setValue(undefined);\n    } else {\n      toggleGroupControlContext.setValue(value);\n    }\n  };\n  const commonProps = {\n    ...otherButtonProps,\n    className: itemClasses,\n    'data-value': value,\n    ref: forwardedRef\n  };\n  const labelRef = useRef(null);\n  useLayoutEffect(() => {\n    if (isPressed && labelRef.current) {\n      toggleGroupControlContext.setSelectedElement(labelRef.current);\n    }\n  }, [isPressed, toggleGroupControlContext]);\n  return /*#__PURE__*/_jsx(\"div\", {\n    ref: labelRef,\n    className: labelClasses,\n    children: /*#__PURE__*/_jsx(WithToolTip, {\n      showTooltip: showTooltip,\n      text: otherButtonProps['aria-label'],\n      children: isDeselectable ? /*#__PURE__*/_jsx(\"button\", {\n        ...commonProps,\n        disabled: disabled,\n        \"aria-pressed\": isPressed,\n        type: \"button\",\n        onClick: buttonOnClick,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: styles['button-content'],\n          children: children\n        })\n      }) : /*#__PURE__*/_jsx(Ariakit.Radio, {\n        disabled: disabled,\n        onFocusVisible: () => {\n          const selectedValueIsEmpty = toggleGroupControlContext.value === null || toggleGroupControlContext.value === '';\n\n          // Conditions ensure that the first visible focus to a radio group\n          // without a selected option will not automatically select the option.\n          if (!selectedValueIsEmpty || toggleGroupControlContext.activeItemIsNotFirstItem?.()) {\n            toggleGroupControlContext.setValue(value);\n          }\n        },\n        render: /*#__PURE__*/_jsx(\"button\", {\n          type: \"button\",\n          ...commonProps\n        }),\n        value: value,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: styles['button-content'],\n          children: children\n        })\n      })\n    })\n  });\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlOptionBase, 'ToggleGroupControlOptionBase');\nexport default ConnectedToggleGroupControlOptionBase;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"94533a674c\", \"._1dec843460a3c9d5__label{display:inline-flex;max-width:100%;min-width:0;position:relative}._50ddec5669c9d4a6__label-block{flex:1}._1563c8aa5e21d063__button{fill:currentColor;align-items:center;appearance:none;background:transparent;border:none;border-radius:var(--wpds-border-radius-xs,1px);color:var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));cursor:var(--wpds-cursor-control,pointer);display:flex;font-family:inherit;height:100%;justify-content:center;line-height:1;outline:none;padding:0 12px;position:relative;text-align:center}@media not (prefers-reduced-motion){._1563c8aa5e21d063__button{transition:color .16s linear,font-weight 60ms linear}}._1563c8aa5e21d063__button{user-select:none;width:100%;z-index:2}._1563c8aa5e21d063__button::-moz-focus-inner{border:0}._1563c8aa5e21d063__button[aria-disabled=true],._1563c8aa5e21d063__button[disabled]{cursor:default;opacity:.4}._1563c8aa5e21d063__button:hover:not([disabled]):not([aria-disabled=true]){color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e))}.e1b6a1f76b7eb2bb__is-deselectable:focus{outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}.e1b6a1f76b7eb2bb__is-deselectable:focus[aria-pressed=false]{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));box-shadow:0 0 0 2px var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff))}._407216dd3e301287__is-icon{aspect-ratio:1;height:38px;padding:0}._617c0f0a1c161590__is-pressed{color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));font-weight:var(--wpds-typography-font-weight-emphasis,600)}._2850882d974e5419__button-content{display:flex;font-size:var(--wpds-typography-font-size-md,13px);line-height:1}\");\n}\nexport default {\"label\":\"_1dec843460a3c9d5__label\",\"label-block\":\"_50ddec5669c9d4a6__label-block\",\"button\":\"_1563c8aa5e21d063__button\",\"is-deselectable\":\"e1b6a1f76b7eb2bb__is-deselectable\",\"is-icon\":\"_407216dd3e301287__is-icon\",\"is-pressed\":\"_617c0f0a1c161590__is-pressed\",\"button-content\":\"_2850882d974e5419__button-content\"};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport * as Ariakit from '@ariakit/react';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useRef } from '@wordpress/element';\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useToggleGroupControlContext } from '../context';\nimport styles from './style.module.scss';\nimport Tooltip from '../../tooltip';\nimport { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst WithToolTip = ({\n  showTooltip,\n  text,\n  children\n}) => {\n  if (showTooltip && text) {\n    return /*#__PURE__*/_jsx(Tooltip, {\n      text: text,\n      placement: \"top\",\n      children: children\n    });\n  }\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: children\n  });\n};\nfunction ToggleGroupControlOptionBase(props, forwardedRef) {\n  const toggleGroupControlContext = useToggleGroupControlContext();\n  const id = useInstanceId(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base');\n  const buttonProps = useContextSystem({\n    ...props,\n    id\n  }, 'ToggleGroupControlOptionBase');\n  const {\n    isBlock = false,\n    isDeselectable = false\n  } = toggleGroupControlContext;\n  const {\n    className,\n    isIcon = false,\n    value,\n    children,\n    showTooltip = false,\n    disabled,\n    ...otherButtonProps\n  } = buttonProps;\n  const isOptionDisabled = Boolean(toggleGroupControlContext.disabled || disabled);\n  const isPressed = toggleGroupControlContext.value === value;\n  const labelClasses = clsx(styles.label, isBlock && styles['label-block']);\n  const itemClasses = clsx(styles.button, {\n    [styles['is-deselectable']]: isDeselectable,\n    [styles['is-icon']]: isIcon,\n    [styles['is-pressed']]: isPressed\n  }, className);\n  const buttonOnClick = () => {\n    if (isDeselectable && isPressed) {\n      toggleGroupControlContext.setValue(undefined);\n    } else {\n      toggleGroupControlContext.setValue(value);\n    }\n  };\n  const commonProps = {\n    ...otherButtonProps,\n    className: itemClasses,\n    'data-value': value,\n    ref: forwardedRef\n  };\n  const labelRef = useRef(null);\n  useLayoutEffect(() => {\n    if (isPressed && labelRef.current) {\n      toggleGroupControlContext.setSelectedElement(labelRef.current);\n    }\n  }, [isPressed, toggleGroupControlContext]);\n  return /*#__PURE__*/_jsx(\"div\", {\n    ref: labelRef,\n    className: labelClasses,\n    children: /*#__PURE__*/_jsx(WithToolTip, {\n      showTooltip: showTooltip,\n      text: otherButtonProps['aria-label'],\n      children: isDeselectable ? /*#__PURE__*/_jsx(\"button\", {\n        ...commonProps,\n        disabled: isOptionDisabled,\n        \"aria-pressed\": isPressed,\n        type: \"button\",\n        onClick: buttonOnClick,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: styles['button-content'],\n          children: children\n        })\n      }) : /*#__PURE__*/_jsx(Ariakit.Radio, {\n        disabled: disabled,\n        onFocusVisible: () => {\n          const selectedValueIsEmpty = toggleGroupControlContext.value === null || toggleGroupControlContext.value === '';\n\n          // Conditions ensure that the first visible focus to a radio group\n          // without a selected option will not automatically select the option.\n          if (!selectedValueIsEmpty || toggleGroupControlContext.activeItemIsNotFirstItem?.()) {\n            toggleGroupControlContext.setValue(value);\n          }\n        },\n        render: /*#__PURE__*/_jsx(\"button\", {\n          type: \"button\",\n          ...commonProps\n        }),\n        value: value,\n        children: /*#__PURE__*/_jsx(\"div\", {\n          className: styles['button-content'],\n          children: children\n        })\n      })\n    })\n  });\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalToggleGroupControl as ToggleGroupControl,\n *   __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n *       <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n *       <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n *     </ToggleGroupControl>\n *   );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlOptionBase, 'ToggleGroupControlOptionBase');\nexport default ConnectedToggleGroupControlOptionBase;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"94533a674c\", \"._1dec843460a3c9d5__label{display:inline-flex;max-width:100%;min-width:0;position:relative}._50ddec5669c9d4a6__label-block{flex:1}._1563c8aa5e21d063__button{fill:currentColor;align-items:center;appearance:none;background:transparent;border:none;border-radius:var(--wpds-border-radius-xs,1px);color:var(--wp-components-color-gray-700,var(--wpds-color-foreground-content-neutral-weak,#707070));cursor:var(--wpds-cursor-control,pointer);display:flex;font-family:inherit;height:100%;justify-content:center;line-height:1;outline:none;padding:0 12px;position:relative;text-align:center}@media not (prefers-reduced-motion){._1563c8aa5e21d063__button{transition:color .16s linear,font-weight 60ms linear}}._1563c8aa5e21d063__button{user-select:none;width:100%;z-index:2}._1563c8aa5e21d063__button::-moz-focus-inner{border:0}._1563c8aa5e21d063__button[aria-disabled=true],._1563c8aa5e21d063__button[disabled]{cursor:default;opacity:.4}._1563c8aa5e21d063__button:hover:not([disabled]):not([aria-disabled=true]){color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e))}.e1b6a1f76b7eb2bb__is-deselectable:focus{outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--focus-color,var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9)));outline-offset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}.e1b6a1f76b7eb2bb__is-deselectable:focus[aria-pressed=false]{background:var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff));box-shadow:0 0 0 2px var(--wp-components-color-background,var(--wpds-color-background-surface-neutral-strong,#fff))}._407216dd3e301287__is-icon{aspect-ratio:1;height:38px;padding:0}._617c0f0a1c161590__is-pressed{color:var(--wp-components-color-foreground,var(--wpds-color-foreground-content-neutral,#1e1e1e));font-weight:var(--wpds-typography-font-weight-emphasis,600)}._2850882d974e5419__button-content{display:flex;font-size:var(--wpds-typography-font-size-md,13px);line-height:1}\");\n}\nexport default {\"label\":\"_1dec843460a3c9d5__label\",\"label-block\":\"_50ddec5669c9d4a6__label-block\",\"button\":\"_1563c8aa5e21d063__button\",\"is-deselectable\":\"e1b6a1f76b7eb2bb__is-deselectable\",\"is-icon\":\"_407216dd3e301287__is-icon\",\"is-pressed\":\"_617c0f0a1c161590__is-pressed\",\"button-content\":\"_2850882d974e5419__button-content\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/toggle-group-control/toggle-group-control-option-icon/component.mjs

@@ -1,9 +1,11 @@
 // packages/components/src/toggle-group-control/toggle-group-control-option-icon/component.tsx
 import { forwardRef } from "@wordpress/element";
 import { ToggleGroupControlOptionBase } from "../toggle-group-control-option-base/index.mjs";
+import { useToggleGroupControlContext } from "../context.mjs";
 import Icon from "../../icon/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedToggleGroupControlOptionIcon(props, ref) {
+  useToggleGroupControlContext("ToggleGroupControlOptionIcon");
   const {
     icon,
     label,

package/build-module/toggle-group-control/toggle-group-control-option-icon/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/toggle-group-control/toggle-group-control-option-icon/component.tsx"],
-  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport Icon from '../../icon';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlOptionIcon(props, ref) {\n  const {\n    icon,\n    label,\n    ...restProps\n  } = props;\n  return /*#__PURE__*/_jsx(ToggleGroupControlOptionBase, {\n    ...restProps,\n    isIcon: true,\n    \"aria-label\": label,\n    showTooltip: true,\n    ref: ref,\n    children: /*#__PURE__*/_jsx(Icon, {\n      icon: icon\n    })\n  });\n}\n\n/**\n * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a\n * child of `ToggleGroupControl` and displays an icon.\n *\n * ```jsx\n *\n * import {\n *\t__experimentalToggleGroupControl as ToggleGroupControl,\n *\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n * from '@wordpress/components';\n * import { formatLowercase, formatUppercase } from '@wordpress/icons';\n *\n * function Example() {\n *  return (\n *    <ToggleGroupControl>\n *      <ToggleGroupControlOptionIcon\n *        value=\"uppercase\"\n *        label=\"Uppercase\"\n *        icon={ formatUppercase }\n *      />\n *      <ToggleGroupControlOptionIcon\n *        value=\"lowercase\"\n *        label=\"Lowercase\"\n *        icon={ formatLowercase }\n *      />\n *    </ToggleGroupControl>\n *  );\n * }\n * ```\n */\nexport const ToggleGroupControlOptionIcon = forwardRef(UnforwardedToggleGroupControlOptionIcon);\nToggleGroupControlOptionIcon.displayName = 'ToggleGroupControlOptionIcon';\nexport default ToggleGroupControlOptionIcon;"],
-  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,SAAS,oCAAoC;AAC7C,OAAO,UAAU;AACjB,SAAS,OAAO,YAAY;AAC5B,SAAS,wCAAwC,OAAO,KAAK;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAoB,qBAAK,8BAA8B;AAAA,IACrD,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb;AAAA,IACA,UAAuB,qBAAK,MAAM;AAAA,MAChC;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAgCO,IAAM,+BAA+B,WAAW,uCAAuC;AAC9F,6BAA6B,cAAc;AAC3C,IAAO,oBAAQ;",
+  "sourcesContent": ["import { forwardRef } from '@wordpress/element';\nimport { ToggleGroupControlOptionBase } from '../toggle-group-control-option-base';\nimport { useToggleGroupControlContext } from '../context';\nimport Icon from '../../icon';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnforwardedToggleGroupControlOptionIcon(props, ref) {\n  useToggleGroupControlContext('ToggleGroupControlOptionIcon');\n  const {\n    icon,\n    label,\n    ...restProps\n  } = props;\n  return /*#__PURE__*/_jsx(ToggleGroupControlOptionBase, {\n    ...restProps,\n    isIcon: true,\n    \"aria-label\": label,\n    showTooltip: true,\n    ref: ref,\n    children: /*#__PURE__*/_jsx(Icon, {\n      icon: icon\n    })\n  });\n}\n\n/**\n * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a\n * child of `ToggleGroupControl` and displays an icon.\n *\n * ```jsx\n *\n * import {\n *\t__experimentalToggleGroupControl as ToggleGroupControl,\n *\t__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,\n * from '@wordpress/components';\n * import { formatLowercase, formatUppercase } from '@wordpress/icons';\n *\n * function Example() {\n *  return (\n *    <ToggleGroupControl>\n *      <ToggleGroupControlOptionIcon\n *        value=\"uppercase\"\n *        label=\"Uppercase\"\n *        icon={ formatUppercase }\n *      />\n *      <ToggleGroupControlOptionIcon\n *        value=\"lowercase\"\n *        label=\"Lowercase\"\n *        icon={ formatLowercase }\n *      />\n *    </ToggleGroupControl>\n *  );\n * }\n * ```\n */\nexport const ToggleGroupControlOptionIcon = forwardRef(UnforwardedToggleGroupControlOptionIcon);\nToggleGroupControlOptionIcon.displayName = 'ToggleGroupControlOptionIcon';\nexport default ToggleGroupControlOptionIcon;"],
+  "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAC7C,OAAO,UAAU;AACjB,SAAS,OAAO,YAAY;AAC5B,SAAS,wCAAwC,OAAO,KAAK;AAC3D,+BAA6B,8BAA8B;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,SAAoB,qBAAK,8BAA8B;AAAA,IACrD,GAAG;AAAA,IACH,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb;AAAA,IACA,UAAuB,qBAAK,MAAM;AAAA,MAChC;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AAgCO,IAAM,+BAA+B,WAAW,uCAAuC;AAC9F,6BAA6B,cAAc;AAC3C,IAAO,oBAAQ;",
   "names": []
 }