@wordpress/components 29.12.0 → 30.0.0

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

@@ -0,0 +1,129 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { error } from '@wordpress/icons';
+
+/**
+ * External dependencies
+ */
+import { cloneElement, forwardRef, useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
+import Icon from '../icon';
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+function appendRequiredIndicator(label, required, markWhenOptional) {
+  if (required && !markWhenOptional) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [label, " ", `(${__('Required')})`]
+    });
+  }
+  if (!required && markWhenOptional) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [label, " ", `(${__('Optional')})`]
+    });
+  }
+  return label;
+}
+
+/**
+ * HTML elements that support the Constraint Validation API.
+ *
+ * Here, we exclude HTMLButtonElement because although it does technically support the API,
+ * normal buttons are actually exempted from any validation.
+ * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate
+ */
+
+function UnforwardedControlWithError({
+  required,
+  markWhenOptional,
+  customValidator,
+  getValidityTarget,
+  children
+}, forwardedRef) {
+  const [errorMessage, setErrorMessage] = useState();
+  const [isTouched, setIsTouched] = useState(false);
+
+  // Ensure that error messages are visible after user attemps to submit a form
+  // with multiple invalid fields.
+  useEffect(() => {
+    const validityTarget = getValidityTarget();
+    const showValidationMessage = () => setErrorMessage(validityTarget?.validationMessage);
+    validityTarget?.addEventListener('invalid', showValidationMessage);
+    return () => {
+      validityTarget?.removeEventListener('invalid', showValidationMessage);
+    };
+  });
+  const validate = () => {
+    const message = customValidator?.();
+    const validityTarget = getValidityTarget();
+    validityTarget?.setCustomValidity(message !== null && message !== void 0 ? message : '');
+    setErrorMessage(validityTarget?.validationMessage);
+  };
+  const onBlur = event => {
+    // Only consider "blurred from the component" if focus has fully left the wrapping div.
+    // This prevents unnecessary blurs from components with multiple focusable elements.
+    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {
+      setIsTouched(true);
+      const validityTarget = getValidityTarget();
+
+      // Prevents a double flash of the native error tooltip when the control is already showing one.
+      if (!validityTarget?.validity.valid) {
+        if (!errorMessage) {
+          setErrorMessage(validityTarget?.validationMessage);
+        }
+        return;
+      }
+      validate();
+    }
+  };
+  const onChange = (...args) => {
+    children.props.onChange?.(...args);
+
+    // Only validate incrementally if the field has blurred at least once,
+    // or currently has an error message.
+    if (isTouched || errorMessage) {
+      validate();
+    }
+  };
+  const onKeyDown = event => {
+    // Ensures that custom validators are triggered when the user submits by pressing Enter,
+    // without ever blurring the control.
+    if (event.key === 'Enter') {
+      validate();
+    }
+  };
+  return (
+    /*#__PURE__*/
+    // Disable reason: Just listening to a bubbled event, not for interaction.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsxs("div", {
+      className: "components-validated-control",
+      ref: forwardedRef,
+      onBlur: onBlur,
+      onKeyDown: withIgnoreIMEEvents(onKeyDown),
+      children: [cloneElement(children, {
+        label: appendRequiredIndicator(children.props.label, required, markWhenOptional),
+        onChange,
+        required
+      }), /*#__PURE__*/_jsx("div", {
+        "aria-live": "polite",
+        children: errorMessage && /*#__PURE__*/_jsxs("p", {
+          className: "components-validated-control__error",
+          children: [/*#__PURE__*/_jsx(Icon, {
+            className: "components-validated-control__error-icon",
+            icon: error,
+            size: 16,
+            fill: "currentColor"
+          }), errorMessage]
+        })
+      })]
+    })
+  );
+}
+export const ControlWithError = forwardRef(UnforwardedControlWithError);
+//# sourceMappingURL=control-with-error.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__","error","cloneElement","forwardRef","useEffect","useState","withIgnoreIMEEvents","Icon","Fragment","_Fragment","jsxs","_jsxs","jsx","_jsx","appendRequiredIndicator","label","required","markWhenOptional","children","UnforwardedControlWithError","customValidator","getValidityTarget","forwardedRef","errorMessage","setErrorMessage","isTouched","setIsTouched","validityTarget","showValidationMessage","validationMessage","addEventListener","removeEventListener","validate","message","setCustomValidity","onBlur","event","relatedTarget","currentTarget","contains","validity","valid","onChange","args","props","onKeyDown","key","className","ref","icon","size","fill","ControlWithError"],"sources":["@wordpress/components/src/validated-form-controls/control-with-error.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { error } from '@wordpress/icons';\n\n/**\n * External dependencies\n */\nimport {\n\tcloneElement,\n\tforwardRef,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\n\nimport Icon from '../icon';\n\nfunction appendRequiredIndicator(\n\tlabel: React.ReactNode,\n\trequired: boolean | undefined,\n\tmarkWhenOptional: boolean | undefined\n) {\n\tif ( required && ! markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Required' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\tif ( ! required && markWhenOptional ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ label } { `(${ __( 'Optional' ) })` }\n\t\t\t</>\n\t\t);\n\t}\n\treturn label;\n}\n\n/**\n * HTML elements that support the Constraint Validation API.\n *\n * Here, we exclude HTMLButtonElement because although it does technically support the API,\n * normal buttons are actually exempted from any validation.\n * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/willValidate\n */\ntype ValidityTarget =\n\t| HTMLFieldSetElement\n\t| HTMLInputElement\n\t| HTMLSelectElement\n\t| HTMLTextAreaElement;\n\nfunction UnforwardedControlWithError< C extends React.ReactElement >(\n\t{\n\t\trequired,\n\t\tmarkWhenOptional,\n\t\tcustomValidator,\n\t\tgetValidityTarget,\n\t\tchildren,\n\t}: {\n\t\t/**\n\t\t * Whether the control is required.\n\t\t */\n\t\trequired?: boolean;\n\t\t/**\n\t\t * Label the control as \"optional\" when _not_ `required`, instead of the inverse.\n\t\t */\n\t\tmarkWhenOptional?: boolean;\n\t\t/**\n\t\t * A function that returns a custom validity message when applicable.\n\t\t *\n\t\t * This message will be applied to the element returned by `getValidityTarget`.\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity\n\t\t */\n\t\tcustomValidator?: () => string | void;\n\t\t/**\n\t\t * A function that returns the actual element on which the validity data should be applied.\n\t\t */\n\t\tgetValidityTarget: () => ValidityTarget | null | undefined;\n\t\t/**\n\t\t * The control component to apply validation to.\n\t\t */\n\t\tchildren: C;\n\t},\n\tforwardedRef: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst [ errorMessage, setErrorMessage ] = useState< string | undefined >();\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\n\t// Ensure that error messages are visible after user attemps to submit a form\n\t// with multiple invalid fields.\n\tuseEffect( () => {\n\t\tconst validityTarget = getValidityTarget();\n\t\tconst showValidationMessage = () =>\n\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\n\t\tvalidityTarget?.addEventListener( 'invalid', showValidationMessage );\n\n\t\treturn () => {\n\t\t\tvalidityTarget?.removeEventListener(\n\t\t\t\t'invalid',\n\t\t\t\tshowValidationMessage\n\t\t\t);\n\t\t};\n\t} );\n\n\tconst validate = () => {\n\t\tconst message = customValidator?.();\n\t\tconst validityTarget = getValidityTarget();\n\n\t\tvalidityTarget?.setCustomValidity( message ?? '' );\n\t\tsetErrorMessage( validityTarget?.validationMessage );\n\t};\n\n\tconst onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {\n\t\t// Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n\t\t// This prevents unnecessary blurs from components with multiple focusable elements.\n\t\tif (\n\t\t\t! event.relatedTarget ||\n\t\t\t! event.currentTarget.contains( event.relatedTarget )\n\t\t) {\n\t\t\tsetIsTouched( true );\n\n\t\t\tconst validityTarget = getValidityTarget();\n\n\t\t\t// Prevents a double flash of the native error tooltip when the control is already showing one.\n\t\t\tif ( ! validityTarget?.validity.valid ) {\n\t\t\t\tif ( ! errorMessage ) {\n\t\t\t\t\tsetErrorMessage( validityTarget?.validationMessage );\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tvalidate();\n\t\t}\n\t};\n\n\tconst onChange = ( ...args: unknown[] ) => {\n\t\tchildren.props.onChange?.( ...args );\n\n\t\t// Only validate incrementally if the field has blurred at least once,\n\t\t// or currently has an error message.\n\t\tif ( isTouched || errorMessage ) {\n\t\t\tvalidate();\n\t\t}\n\t};\n\n\tconst onKeyDown = ( event: React.KeyboardEvent< HTMLDivElement > ) => {\n\t\t// Ensures that custom validators are triggered when the user submits by pressing Enter,\n\t\t// without ever blurring the control.\n\t\tif ( event.key === 'Enter' ) {\n\t\t\tvalidate();\n\t\t}\n\t};\n\n\treturn (\n\t\t// Disable reason: Just listening to a bubbled event, not for interaction.\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tclassName=\"components-validated-control\"\n\t\t\tref={ forwardedRef }\n\t\t\tonBlur={ onBlur }\n\t\t\tonKeyDown={ withIgnoreIMEEvents( onKeyDown ) }\n\t\t>\n\t\t\t{ cloneElement( children, {\n\t\t\t\tlabel: appendRequiredIndicator(\n\t\t\t\t\tchildren.props.label,\n\t\t\t\t\trequired,\n\t\t\t\t\tmarkWhenOptional\n\t\t\t\t),\n\t\t\t\tonChange,\n\t\t\t\trequired,\n\t\t\t} ) }\n\t\t\t<div aria-live=\"polite\">\n\t\t\t\t{ errorMessage && (\n\t\t\t\t\t<p className=\"components-validated-control__error\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"components-validated-control__error-icon\"\n\t\t\t\t\t\t\ticon={ error }\n\t\t\t\t\t\t\tsize={ 16 }\n\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ errorMessage }\n\t\t\t\t\t</p>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport const ControlWithError = forwardRef( UnforwardedControlWithError );\n"],"mappings":"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","ignoreList":[]}

package/build-module/validated-form-controls/index.js

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './control-with-error';
+//# sourceMappingURL=index.js.map

package/build-module/validated-form-controls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["@wordpress/components/src/validated-form-controls/index.ts"],"sourcesContent":["export * from './components';\nexport * from './control-with-error';\n"],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,sBAAsB","ignoreList":[]}

package/build-style/style-rtl.css

@@ -589,6 +589,364 @@ p + .components-button.is-tertiary {
     background-position: right 200px top 0;
   }
 }
+/* Root of the component. */
+.components-calendar {
+  position: relative; /* Required to position the navigation toolbar. */
+  box-sizing: border-box;
+  display: inline flow-root;
+  color: #1e1e1e;
+  background-color: #fff;
+  font-size: 13px;
+  font-weight: 400;
+  z-index: 0;
+}
+.components-calendar *,
+.components-calendar *::before,
+.components-calendar *::after {
+  box-sizing: border-box;
+}
+
+.components-calendar__day {
+  padding: 0;
+  position: relative;
+}
+.components-calendar__day:has(.components-calendar__day-button:disabled) {
+  color: #949494;
+}
+.components-calendar__day:has(.components-calendar__day-button:hover:not(:disabled)), .components-calendar__day:has(.components-calendar__day-button:focus-visible) {
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+}
+
+.components-calendar__day-button {
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: 2px;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  color: inherit;
+}
+.components-calendar__day-button::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border: none;
+  border-radius: 2px;
+}
+.components-calendar__day-button::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  pointer-events: none;
+}
+.components-calendar__day-button:disabled {
+  cursor: revert;
+}
+@media (forced-colors: active) {
+  .components-calendar__day-button:disabled {
+    text-decoration: line-through;
+  }
+}
+.components-calendar__day-button:focus-visible {
+  outline: var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline-offset: 1px;
+}
+
+.components-calendar__caption-label {
+  z-index: 1;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  border: 0;
+  text-transform: capitalize;
+}
+
+.components-calendar__button-next,
+.components-calendar__button-previous {
+  border: none;
+  border-radius: 2px;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  appearance: none;
+  width: 2rem;
+  height: 2rem;
+  color: inherit;
+}
+.components-calendar__button-next:disabled, .components-calendar__button-next[aria-disabled=true],
+.components-calendar__button-previous:disabled,
+.components-calendar__button-previous[aria-disabled=true] {
+  cursor: revert;
+  color: #949494;
+}
+.components-calendar__button-next:focus-visible,
+.components-calendar__button-previous:focus-visible {
+  outline: var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+}
+
+.components-calendar__chevron {
+  display: inline-block;
+  fill: currentColor;
+  width: 16px;
+  height: 16px;
+}
+
+.components-calendar[dir=rtl] .components-calendar__nav .components-calendar__chevron {
+  transform: rotate(-180deg);
+  transform-origin: 50%;
+}
+
+.components-calendar__month-caption {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  height: 2rem;
+  margin-bottom: 12px;
+}
+
+.components-calendar__months {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  max-width: fit-content;
+}
+
+.components-calendar__month-grid {
+  border-collapse: separate;
+  border-spacing: 0 4px;
+}
+
+.components-calendar__nav {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 2rem;
+}
+
+.components-calendar__weekday {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  color: #757575;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+/* DAY MODIFIERS */
+.components-calendar__day--today::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset-block-start: 2px;
+  inset-inline-end: 2px;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+}
+
+.components-calendar__day--selected:not(.components-calendar__range-middle):has(.components-calendar__day-button,
+.components-calendar__day-button:hover:not(:disabled)) {
+  color: #fff;
+}
+.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button::before {
+  background-color: #1e1e1e;
+  border: 1px solid transparent;
+}
+.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:disabled::before {
+  background-color: #949494;
+}
+.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:hover:not(:disabled)::before {
+  background-color: #2f2f2f;
+}
+
+.components-calendar__day--hidden {
+  visibility: hidden;
+}
+
+.components-calendar__range-start:not(.components-calendar__range-end) .components-calendar__day-button, .components-calendar__range-start:not(.components-calendar__range-end) .components-calendar__day-button::before {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.components-calendar__range-middle .components-calendar__day-button::before {
+  background-color: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
+  border-radius: 0;
+  border-width: 1px 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.components-calendar__range-end:not(.components-calendar__range-start) .components-calendar__day-button, .components-calendar__range-end:not(.components-calendar__range-start) .components-calendar__day-button::before {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+/*
+ * RANGE PREVIEW (range calendar only)
+ *
+ * The preview is rendered in the button's ::after pseudo-element, so that it
+ * can be rendered over the button's contents.
+ * The selection preview is shown with a dashed border. In order to have
+ * control over the dash pattern (especially the seams between days), the
+ * dashed borders are rendered as SVGs via the url() CSS function.
+ * Since SVGs rendered in the url() function don't seem to be able to access
+ * CSS variables, we're using the SVGs as masks, and using `background-color`
+ * to consume the accent color variable.
+ */
+.components-calendar__day--preview svg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  color: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 16%, transparent);
+}
+@media (forced-colors: active) {
+  .components-calendar__day--preview svg {
+    color: inherit;
+  }
+}
+.components-calendar[dir=rtl] .components-calendar__day--preview svg {
+  transform: scaleX(-1);
+}
+
+.components-calendar__day--preview.components-calendar__range-middle .components-calendar__day-button::before {
+  border: none;
+}
+
+/* ANIMATIONS */
+@keyframes slide-in-left {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes slide-in-right {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes slide-out-left {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes slide-out-right {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.components-calendar__weeks-before-enter,
+.components-calendar__weeks-before-exit,
+.components-calendar__weeks-after-enter,
+.components-calendar__weeks-after-exit,
+.components-calendar__caption-after-enter,
+.components-calendar__caption-after-exit,
+.components-calendar__caption-before-enter,
+.components-calendar__caption-before-exit {
+  animation-duration: 0s;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-fill-mode: forwards;
+}
+@media not (prefers-reduced-motion) {
+  .components-calendar__weeks-before-enter,
+.components-calendar__weeks-before-exit,
+.components-calendar__weeks-after-enter,
+.components-calendar__weeks-after-exit,
+.components-calendar__caption-after-enter,
+.components-calendar__caption-after-exit,
+.components-calendar__caption-before-enter,
+.components-calendar__caption-before-exit {
+    animation-duration: 0.3s;
+  }
+}
+
+.components-calendar__weeks-before-enter,
+.components-calendar[dir=rtl] .components-calendar__weeks-after-enter {
+  animation-name: slide-in-left;
+}
+
+.components-calendar__weeks-before-exit,
+.components-calendar[dir=rtl] .components-calendar__weeks-after-exit {
+  animation-name: slide-out-left;
+}
+
+.components-calendar__weeks-after-enter,
+.components-calendar[dir=rtl] .components-calendar__weeks-before-enter {
+  animation-name: slide-in-right;
+}
+
+.components-calendar__weeks-after-exit,
+.components-calendar[dir=rtl] .components-calendar__weeks-before-exit {
+  animation-name: slide-out-right;
+}
+
+.components-calendar__caption-after-enter {
+  animation-name: fade-in;
+}
+
+.components-calendar__caption-after-exit {
+  animation-name: fade-out;
+}
+
+.components-calendar__caption-before-enter {
+  animation-name: fade-in;
+}
+
+.components-calendar__caption-before-exit {
+  animation-name: fade-out;
+}
+
 .components-checkbox-control {
   --checkbox-input-size: 24px;
   --checkbox-input-margin: 8px;
@@ -1126,23 +1484,6 @@ input.components-combobox-control__input[type=text]:focus {
   z-index: 0;
 }
 
-.block-editor-dimension-control .components-base-control__field {
-  display: flex;
-  align-items: center;
-}
-.block-editor-dimension-control .components-base-control__label {
-  display: flex;
-  align-items: center;
-  margin-left: 1em;
-  margin-bottom: 0;
-}
-.block-editor-dimension-control .components-base-control__label .dashicon {
-  margin-left: 0.5em;
-}
-.block-editor-dimension-control.is-manual .components-base-control__label {
-  width: 10em;
-}
-
 body.is-dragging-components-draggable {
   cursor: move; /* Fallback for IE/Edge < 14 */
   cursor: grabbing !important;
@@ -2976,11 +3317,6 @@ body.lockscroll {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
 }
 
-@media (max-width: 782px) {
-  .components-base-control .components-base-control__field .components-select-control__input {
-    font-size: 16px;
-  }
-}
 .components-snackbar {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
@@ -3513,4 +3849,64 @@ div.components-toolbar > div + div.has-left-divider::before {
 
 .components-tooltip__shortcut {
   margin-right: 8px;
+}
+
+.components-validated-control:has(:is(input, select):user-invalid) .components-input-control__backdrop {
+  --wp-components-color-accent: $alert-red;
+  border-color: #cc1818;
+}
+.components-validated-control :is(textarea, input[type=text]):user-invalid {
+  --wp-admin-theme-color: $alert-red;
+  --wp-components-color-accent: $alert-red;
+  border-color: #cc1818;
+}
+.components-validated-control .components-combobox-control__suggestions-container:has(input:user-invalid):not(:has([aria-expanded=true])) {
+  border-color: #cc1818;
+}
+
+.components-validated-control__wrapper-with-error-delegate {
+  position: relative;
+}
+.components-validated-control__wrapper-with-error-delegate:has(select:user-invalid) .components-input-control__backdrop {
+  --wp-components-color-accent: $alert-red;
+  border-color: #cc1818;
+}
+.components-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid) {
+  --wp-components-color-accent: $alert-red;
+}
+
+.components-validated-control__error-delegate {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.components-validated-control__error {
+  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: 0.75rem;
+  line-height: 16px;
+  color: #cc1818;
+  animation: components-validated-control__error-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+}
+
+.components-validated-control__error-icon {
+  flex-shrink: 0;
+}
+
+@keyframes components-validated-control__error-jump {
+  0% {
+    transform: translateY(-4px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }