@wordpress/components 39.0.0 → 40.1.1-next.v.202608281122.0

package/build-module/z-stack/component.mjs

@@ -1,8 +1,94 @@
 // packages/components/src/z-stack/component.tsx
+import clsx from "clsx";
 import { isValidElement } from "@wordpress/element";
 import { getValidChildren } from "../utils/get-valid-children.mjs";
 import { contextConnect, useContextSystem } from "../context/index.mjs";
-import { ZStackView, ZStackChildView } from "./styles.mjs";
+import { PolymorphicElement } from "../utils/polymorphic-element.mjs";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/z-stack/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("a90faa8747", "._5b8fef2247903a5f__z-stack{display:inline-grid;grid-auto-flow:column;position:relative}._5b8fef2247903a5f__z-stack>._585cd0b86fd70a54__child{justify-self:start;position:relative}._93dbda3c809633d5__layered>._585cd0b86fd70a54__child{grid-column-start:1;grid-row-start:1}._585cd0b86fd70a54__child{z-index:var(--z-stack-z-index,auto)}._585cd0b86fd70a54__child:not(:first-of-type){margin-inline-start:var(--z-stack-offset,0)}");
+}
+var style_module_default = { "z-stack": "_5b8fef2247903a5f__z-stack", "child": "_585cd0b86fd70a54__child", "layered": "_93dbda3c809633d5__layered" };
+
+// packages/components/src/z-stack/component.tsx
 import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedZStack(props, forwardedRef) {
   const {
@@ -19,16 +105,18 @@ function UnconnectedZStack(props, forwardedRef) {
     const zIndex = isReversed ? childrenLastIndex - index : index;
     const offsetAmount = isLayered ? offset * index : offset;
     const key = isValidElement(child) ? child.key : index;
-    return /* @__PURE__ */ _jsx(ZStackChildView, {
-      offsetAmount,
-      zIndex,
+    return /* @__PURE__ */ _jsx("div", {
+      className: style_module_default.child,
+      style: {
+        "--z-stack-offset": `${offsetAmount}px`,
+        "--z-stack-z-index": zIndex
+      },
       children: child
     }, key);
   });
-  return /* @__PURE__ */ _jsx(ZStackView, {
+  return /* @__PURE__ */ _jsx(PolymorphicElement, {
     ...otherProps,
-    className,
-    isLayered,
+    className: clsx(style_module_default["z-stack"], isLayered && style_module_default.layered, className),
     ref: forwardedRef,
     children: clonedChildren
   });

package/build-module/z-stack/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/z-stack/component.tsx"],
-  "sourcesContent": ["import { isValidElement } from '@wordpress/element';\nimport { getValidChildren } from '../utils/get-valid-children';\nimport { contextConnect, useContextSystem } from '../context';\nimport { ZStackView, ZStackChildView } from './styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedZStack(props, forwardedRef) {\n  const {\n    children,\n    className,\n    isLayered = true,\n    isReversed = false,\n    offset = 0,\n    ...otherProps\n  } = useContextSystem(props, 'ZStack');\n  const validChildren = getValidChildren(children);\n  const childrenLastIndex = validChildren.length - 1;\n  const clonedChildren = validChildren.map((child, index) => {\n    const zIndex = isReversed ? childrenLastIndex - index : index;\n    // Only when the component is layered, the offset needs to be multiplied by\n    // the item's index, so that items can correctly stack at the right distance\n    const offsetAmount = isLayered ? offset * index : offset;\n    const key = isValidElement(child) ? child.key : index;\n    return /*#__PURE__*/_jsx(ZStackChildView, {\n      offsetAmount: offsetAmount,\n      zIndex: zIndex,\n      children: child\n    }, key);\n  });\n  return /*#__PURE__*/_jsx(ZStackView, {\n    ...otherProps,\n    className: className,\n    isLayered: isLayered,\n    ref: forwardedRef,\n    children: clonedChildren\n  });\n}\n\n/**\n * `ZStack` allows you to stack things along the Z-axis.\n *\n * ```jsx\n * import { __experimentalZStack as ZStack } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ZStack offset={ 20 } isLayered>\n *       <ExampleImage />\n *       <ExampleImage />\n *       <ExampleImage />\n *     </ZStack>\n *   );\n * }\n * ```\n */\nexport const ZStack = contextConnect(UnconnectedZStack, 'ZStack');\nexport default ZStack;"],
-  "mappings": ";AAAA,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,YAAY,uBAAuB;AAC5C,SAAS,OAAO,YAAY;AAC5B,SAAS,kBAAkB,OAAO,cAAc;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,SAAS;AAAA,IACT,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,QAAQ;AACpC,QAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,QAAM,oBAAoB,cAAc,SAAS;AACjD,QAAM,iBAAiB,cAAc,IAAI,CAAC,OAAO,UAAU;AACzD,UAAM,SAAS,aAAa,oBAAoB,QAAQ;AAGxD,UAAM,eAAe,YAAY,SAAS,QAAQ;AAClD,UAAM,MAAM,eAAe,KAAK,IAAI,MAAM,MAAM;AAChD,WAAoB,qBAAK,iBAAiB;AAAA,MACxC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ,GAAG,GAAG;AAAA,EACR,CAAC;AACD,SAAoB,qBAAK,YAAY;AAAA,IACnC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,UAAU;AAAA,EACZ,CAAC;AACH;AAmBO,IAAM,SAAS,eAAe,mBAAmB,QAAQ;AAChE,IAAO,oBAAQ;",
+  "sources": ["../../src/z-stack/component.tsx", "../../../style-runtime/src/index.ts", "../../src/z-stack/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { isValidElement } from '@wordpress/element';\nimport { getValidChildren } from '../utils/get-valid-children';\nimport { contextConnect, useContextSystem } from '../context';\nimport { PolymorphicElement } from '../utils/polymorphic-element';\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction UnconnectedZStack(props, forwardedRef) {\n  const {\n    children,\n    className,\n    isLayered = true,\n    isReversed = false,\n    offset = 0,\n    ...otherProps\n  } = useContextSystem(props, 'ZStack');\n  const validChildren = getValidChildren(children);\n  const childrenLastIndex = validChildren.length - 1;\n  const clonedChildren = validChildren.map((child, index) => {\n    const zIndex = isReversed ? childrenLastIndex - index : index;\n    // Only when the component is layered, the offset needs to be multiplied by\n    // the item's index, so that items can correctly stack at the right distance\n    const offsetAmount = isLayered ? offset * index : offset;\n    const key = isValidElement(child) ? child.key : index;\n    return /*#__PURE__*/_jsx(\"div\", {\n      className: styles.child,\n      style: {\n        '--z-stack-offset': `${offsetAmount}px`,\n        '--z-stack-z-index': zIndex\n      },\n      children: child\n    }, key);\n  });\n  return /*#__PURE__*/_jsx(PolymorphicElement, {\n    ...otherProps,\n    className: clsx(styles['z-stack'], isLayered && styles.layered, className),\n    ref: forwardedRef,\n    children: clonedChildren\n  });\n}\n\n/**\n * `ZStack` allows you to stack things along the Z-axis.\n *\n * ```jsx\n * import { __experimentalZStack as ZStack } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ZStack offset={ 20 } isLayered>\n *       <ExampleImage />\n *       <ExampleImage />\n *       <ExampleImage />\n *     </ZStack>\n *   );\n * }\n * ```\n */\nexport const ZStack = contextConnect(UnconnectedZStack, 'ZStack');\nexport default ZStack;", "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(\"a90faa8747\", \"._5b8fef2247903a5f__z-stack{display:inline-grid;grid-auto-flow:column;position:relative}._5b8fef2247903a5f__z-stack>._585cd0b86fd70a54__child{justify-self:start;position:relative}._93dbda3c809633d5__layered>._585cd0b86fd70a54__child{grid-column-start:1;grid-row-start:1}._585cd0b86fd70a54__child{z-index:var(--z-stack-z-index,auto)}._585cd0b86fd70a54__child:not(:first-of-type){margin-inline-start:var(--z-stack-offset,0)}\");\n}\nexport default {\"z-stack\":\"_5b8fef2247903a5f__z-stack\",\"child\":\"_585cd0b86fd70a54__child\",\"layered\":\"_93dbda3c809633d5__layered\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-style/style-rtl.css

@@ -268,8 +268,7 @@
   outline: none;
 }
 .components-button:focus:not(:active) {
-  --focus-color: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
-  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color);
+  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));
 }
 .components-button {
@@ -576,14 +575,8 @@ p + .components-button.is-tertiary {
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
-  box-shadow: 0 0 0 transparent;
-  border-radius: 2px;
-  border: 1px solid #949494;
-}
-@media not (prefers-reduced-motion) {
-  .components-checkbox-control__input[type=checkbox] {
-    transition: box-shadow 0.1s linear;
-  }
+  border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
+  border-radius: var(--wpds-border-radius-sm, 2px);
 }
 @media (min-width: 600px) {
   .components-checkbox-control__input[type=checkbox] {
@@ -592,10 +585,14 @@ p + .components-button.is-tertiary {
     line-height: normal;
   }
 }
+.components-checkbox-control__input[type=checkbox]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
+  border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
+}
 .components-checkbox-control__input[type=checkbox]:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
+  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));
+  border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
+  box-shadow: none;
 }
 .components-checkbox-control__input[type=checkbox]::-moz-placeholder {
   color: rgba(30, 30, 30, 0.62);
@@ -863,7 +860,8 @@ svg.components-checkbox-control__indeterminate {
   line-height: 22px;
 }
 
-.components-palette-edit__popover-gradient-picker {
+.components-palette-edit__popover-gradient-picker,
+.components-palette-edit__popover-duotone-picker {
   width: 260px;
   padding: 8px;
 }
@@ -916,14 +914,8 @@ input.components-combobox-control__input[type=text]:focus {
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
-  box-shadow: 0 0 0 transparent;
-  border-radius: 2px;
-  border: 1px solid #949494;
-}
-@media not (prefers-reduced-motion) {
-  .components-combobox-control__suggestions-container {
-    transition: box-shadow 0.1s linear;
-  }
+  border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
+  border-radius: var(--wpds-border-radius-sm, 2px);
 }
 @media (min-width: 600px) {
   .components-combobox-control__suggestions-container {
@@ -932,10 +924,14 @@ input.components-combobox-control__input[type=text]:focus {
     line-height: normal;
   }
 }
+.components-combobox-control__suggestions-container:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
+  border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
+}
 .components-combobox-control__suggestions-container:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
+  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));
+  border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
+  box-shadow: none;
 }
 .components-combobox-control__suggestions-container::-moz-placeholder {
   color: rgba(30, 30, 30, 0.62);
@@ -951,9 +947,8 @@ input.components-combobox-control__input[type=text]:focus {
   padding: 0;
 }
 .components-combobox-control__suggestions-container:focus-within {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
+  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));
 }
 .components-combobox-control__suggestions-container .components-spinner {
   margin: 0;
@@ -1298,8 +1293,7 @@ input.components-combobox-control__input[type=text]:focus {
   border-radius: 0;
 }
 .components-external-link:focus:not(:active) {
-  --focus-color: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
-  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color);
+  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));
 }
 
@@ -1457,14 +1451,8 @@ input.components-combobox-control__input[type=text]:focus {
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
-  box-shadow: 0 0 0 transparent;
-  border-radius: 2px;
-  border: 1px solid #949494;
-}
-@media not (prefers-reduced-motion) {
-  .components-form-token-field__input-container {
-    transition: box-shadow 0.1s linear;
-  }
+  border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
+  border-radius: var(--wpds-border-radius-sm, 2px);
 }
 @media (min-width: 600px) {
   .components-form-token-field__input-container {
@@ -1473,10 +1461,14 @@ input.components-combobox-control__input[type=text]:focus {
     line-height: normal;
   }
 }
+.components-form-token-field__input-container:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
+  border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
+}
 .components-form-token-field__input-container:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
+  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));
+  border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
+  box-shadow: none;
 }
 .components-form-token-field__input-container::-moz-placeholder {
   color: rgba(30, 30, 30, 0.62);
@@ -1494,10 +1486,12 @@ input.components-combobox-control__input[type=text]:focus {
   border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
   cursor: default;
 }
+.components-form-token-field__input-container.is-disabled:hover {
+  border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
+}
 .components-form-token-field__input-container.is-active {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
+  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));
 }
 .components-form-token-field__input-container input[type=text].components-form-token-field__input {
   display: inline-block;
@@ -1790,6 +1784,11 @@ input.components-combobox-control__input[type=text]:focus {
   box-shadow: inset 0 0 0 calc(2 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1) + 0.5px) rgba(255, 255, 255, 0.7);
 }
 
+.components-input-control__container:focus-within:not(:has(:is(.components-input-control__prefix, .components-input-control__suffix):focus-within)) .components-input-control__backdrop {
+  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));
+}
+
 .components-menu-group + .components-menu-group {
   padding-top: 8px;
   border-top: 1px solid #1e1e1e;
@@ -2459,14 +2458,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
-  box-shadow: 0 0 0 transparent;
-  border-radius: 2px;
-  border: 1px solid #949494;
-}
-@media not (prefers-reduced-motion) {
-  .components-placeholder__input[type=url] {
-    transition: box-shadow 0.1s linear;
-  }
+  border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
+  border-radius: var(--wpds-border-radius-sm, 2px);
 }
 @media (min-width: 600px) {
   .components-placeholder__input[type=url] {
@@ -2475,10 +2468,14 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
     line-height: normal;
   }
 }
+.components-placeholder__input[type=url]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
+  border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
+}
 .components-placeholder__input[type=url]:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
+  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));
+  border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
+  box-shadow: none;
 }
 .components-placeholder__input[type=url]::-moz-placeholder {
   color: rgba(30, 30, 30, 0.62);
@@ -2822,7 +2819,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   grid-column: 2;
   grid-row: 1;
 }
-.components-radio-control:not(:disabled) .components-radio-control__label {
+.components-radio-control__input:not(:disabled) + .components-radio-control__label {
   cursor: var(--wpds-cursor-control, pointer);
 }
 .components-radio-control__label {
@@ -3228,27 +3225,8 @@ body.lockscroll {
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
-  box-shadow: 0 0 0 transparent;
-  border-radius: 2px;
-  border: 1px solid #949494;
-}
-@media not (prefers-reduced-motion) {
-  .components-text-control__input,
-  .components-text-control__input[type=text],
-  .components-text-control__input[type=tel],
-  .components-text-control__input[type=time],
-  .components-text-control__input[type=url],
-  .components-text-control__input[type=week],
-  .components-text-control__input[type=password],
-  .components-text-control__input[type=color],
-  .components-text-control__input[type=date],
-  .components-text-control__input[type=datetime],
-  .components-text-control__input[type=datetime-local],
-  .components-text-control__input[type=email],
-  .components-text-control__input[type=month],
-  .components-text-control__input[type=number] {
-    transition: box-shadow 0.1s linear;
-  }
+  border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
+  border-radius: var(--wpds-border-radius-sm, 2px);
 }
 @media (min-width: 600px) {
   .components-text-control__input,
@@ -3270,6 +3248,22 @@ body.lockscroll {
     line-height: normal;
   }
 }
+.components-text-control__input:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
+.components-text-control__input[type=text]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
+.components-text-control__input[type=tel]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
+.components-text-control__input[type=time]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
+.components-text-control__input[type=url]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
+.components-text-control__input[type=week]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
+.components-text-control__input[type=password]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
+.components-text-control__input[type=color]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
+.components-text-control__input[type=date]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
+.components-text-control__input[type=datetime]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
+.components-text-control__input[type=datetime-local]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
+.components-text-control__input[type=email]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
+.components-text-control__input[type=month]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]),
+.components-text-control__input[type=number]:hover:not(:disabled, [aria-disabled=true], [type=checkbox]) {
+  border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
+}
 .components-text-control__input:focus,
 .components-text-control__input[type=text]:focus,
 .components-text-control__input[type=tel]:focus,
@@ -3284,9 +3278,10 @@ body.lockscroll {
 .components-text-control__input[type=email]:focus,
 .components-text-control__input[type=month]:focus,
 .components-text-control__input[type=number]:focus {
-  border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
+  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));
+  border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
+  box-shadow: none;
 }
 .components-text-control__input::-moz-placeholder, .components-text-control__input[type=text]::-moz-placeholder, .components-text-control__input[type=tel]::-moz-placeholder, .components-text-control__input[type=time]::-moz-placeholder, .components-text-control__input[type=url]::-moz-placeholder, .components-text-control__input[type=week]::-moz-placeholder, .components-text-control__input[type=password]::-moz-placeholder, .components-text-control__input[type=color]::-moz-placeholder, .components-text-control__input[type=date]::-moz-placeholder, .components-text-control__input[type=datetime]::-moz-placeholder, .components-text-control__input[type=datetime-local]::-moz-placeholder, .components-text-control__input[type=email]::-moz-placeholder, .components-text-control__input[type=month]::-moz-placeholder, .components-text-control__input[type=number]::-moz-placeholder {
   color: rgba(30, 30, 30, 0.62);
@@ -3321,7 +3316,6 @@ body.lockscroll {
 .components-text-control__input[type=email],
 .components-text-control__input[type=month],
 .components-text-control__input[type=number] {
-  border-color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
   padding-right: 12px;
   padding-left: 12px;
 }
@@ -3573,35 +3567,24 @@ div.components-toolbar > div + div.has-left-divider::before {
   margin-right: 8px;
 }
 
+.components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-validated-control__content-editable [role=textbox], .components-validated-control__wrapper-with-error-delegate:has(select:invalid[data-validity-visible]) .components-input-control__backdrop, .components-validated-control textarea:invalid[data-validity-visible], .components-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
+  --focus-color: #cc1818;
+}
+
 .components-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
-  --wp-components-color-accent: #cc1818;
   border-color: #cc1818;
 }
 .components-validated-control textarea:invalid[data-validity-visible] {
-  --wp-admin-theme-color: #cc1818;
-  --wp-components-color-accent: #cc1818;
   border-color: #cc1818;
 }
-.components-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])) {
-  --wp-admin-theme-color: #cc1818;
-}
 
 .components-validated-control__wrapper-with-error-delegate {
   position: relative;
 }
 .components-validated-control__wrapper-with-error-delegate:has(select:invalid[data-validity-visible]) .components-input-control__backdrop {
-  --wp-components-color-accent: #cc1818;
-  border-color: #cc1818;
-}
-.components-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid[data-validity-visible]) {
-  --wp-components-color-accent: #cc1818;
-}
-.components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
-  --wp-admin-theme-color: #cc1818;
   border-color: #cc1818;
 }
 .components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-validated-control__content-editable [role=textbox] {
-  --wp-admin-theme-color: #cc1818;
   border-color: #cc1818;
 }
 
@@ -3614,44 +3597,6 @@ div.components-toolbar > div + div.has-left-divider::before {
   pointer-events: none;
 }
 
-.components-validated-control__indicator {
-  display: flex;
-  align-items: flex-start;
-  gap: 4px;
-  margin: 8px 0 0;
-  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  font-size: 12px;
-  line-height: 16px;
-  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
-  animation: components-validated-control__indicator-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
-}
-.components-validated-control__indicator.is-invalid {
-  color: #cc1818;
-}
-.components-validated-control__indicator.is-valid {
-  color: color-mix(in srgb, #000 30%, #4ab866);
-}
-
-.components-validated-control__indicator-icon {
-  flex-shrink: 0;
-}
-
-.components-validated-control__indicator-spinner {
-  margin: 2px;
-  width: 12px;
-  height: 12px;
-}
-
-@keyframes components-validated-control__indicator-jump {
-  0% {
-    transform: translateY(-4px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
 :root {
   --wp-admin-theme-color: #3858e9;
   --wp-admin-theme-color--rgb: 56, 88, 233;