← All changes | build/styles/components/style.css +387 -846 23.0.1 → 24.1.0 View file →

		@@ -68,8 +68,14 @@
68	68	/**
69	69	* Focus styles.
70	70	*/
71	71	/**
	72	+ * Standard focus rings for the WordPress Design System.
	73	+ *
	74	+ * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
	75	+ * e.g. `&:focus { @include outset-ring__focus(); }`.
	76	+ */
	77	+/**
72	78	* Applies editor left position to the selector passed as argument
73	79	*/
74	80	/**
75	81	* Styles that are reused verbatim in a few places
		@@ -160,12 +166,14 @@
160	166	height: auto;
161	167	min-height: 36px;
162	168	text-align: left;
163	169	width: 100%;
	170	+ font-weight: var(--wpds-typography-font-weight-default, 400);
	171	+ position: relative;
164	172	}
165		-.components-autocomplete__result.components-button:focus:not(:disabled) {
166		- box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
167		- outline: 2px solid transparent;
	173	+.components-autocomplete__result.components-button:focus:not(:disabled):not(:active) {
	174	+ box-shadow: 0 0 0 calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
	175	+ z-index: 1;
168	176	}
169	177
170	178	.components-badge {
171	179	box-sizing: border-box;
		@@ -231,9 +239,9 @@
231	239	.components-button-group .components-button {
232	240	border-radius: 0;
233	241	display: inline-flex;
234	242	color: #1e1e1e;
235		- box-shadow: inset 0 0 0 1px #1e1e1e;
	243	+ border-color: #1e1e1e;
236	244	}
237	245	.components-button-group .components-button + .components-button {
238	246	margin-left: -1px;
239	247	}
		@@ -246,11 +254,8 @@
246	254	.components-button-group .components-button:focus, .components-button-group .components-button.is-primary {
247	255	position: relative;
248	256	z-index: 1;
249	257	}
250		-.components-button-group .components-button.is-primary {
251		- box-shadow: inset 0 0 0 1px #1e1e1e;
252		-}
253	258
254	259	/**
255	260	* For easier testing of potential regressions, you can use a Button variant matrix
256	261	* available in a special Storybook instance by running `npm run storybook:e2e:dev`.
		@@ -256,32 +261,35 @@
256	261	* available in a special Storybook instance by running `npm run storybook:e2e:dev`.
257	262	*
258	263	* @see https://github.com/WordPress/gutenberg/blob/trunk/test/storybook-playwright/README.md
259	264	*/
	265	+.components-button:focus:is(a) {
	266	+ box-shadow: none;
	267	+}
	268	+.components-button:focus {
	269	+ outline: none;
	270	+}
	271	+.components-button:focus:not(:active) {
	272	+ 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)));
	273	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
	274	+}
260	275	.components-button {
261	276	display: inline-flex;
262	277	text-decoration: none;
263	278	font-family: inherit;
264	279	font-size: 13px;
265		- font-weight: 499;
	280	+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
266	281	margin: 0;
267		- border: 0;
268	282	cursor: var(--wpds-cursor-control, pointer);
269	283	appearance: none;
270	284	background: none;
271		-}
272		-@media not (prefers-reduced-motion) {
273		- .components-button {
274		- transition: box-shadow 0.1s linear;
275		- }
276		-}
277		-.components-button {
278	285	height: 36px;
279	286	align-items: center;
280	287	box-sizing: border-box;
281	288	padding: 4px 12px;
282	289	border-radius: 2px;
283		- color: var(--wp-components-color-foreground, #1e1e1e);
	290	+ color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
	291	+ border: 1px solid transparent;
284	292	}
285	293	.components-button.is-next-40px-default-size {
286	294	height: 40px;
287	295	}
		@@ -287,11 +295,8 @@
287	295	}
288	296	.components-button[aria-expanded=true], .components-button:hover:not(:disabled, [aria-disabled=true]) {
289	297	color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
290	298	}
291		-.components-button:focus:not(:active) {
292		- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
293		-}
294	299	.components-button {
295	300	/**
296	301	* Primary button style.
297	302	*/
		@@ -298,41 +303,30 @@
298	303	}
299	304	.components-button.is-primary {
300	305	white-space: nowrap;
301	306	background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
302		- color: var(--wp-components-color-accent-inverted, #fff);
	307	+ color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
303	308	text-decoration: none;
304	309	text-shadow: none;
305		- outline: 1px solid transparent;
306	310	}
307	311	.components-button.is-primary:hover:not(:disabled) {
308	312	background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
309		- color: var(--wp-components-color-accent-inverted, #fff);
	313	+ color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
310	314	}
311	315	.components-button.is-primary:active:not(:disabled) {
312	316	background: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
313		- border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
314		- color: var(--wp-components-color-accent-inverted, #fff);
	317	+ color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
315	318	}
316		-.components-button.is-primary:focus:not(:active) {
317		- box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
318		-}
319	319	.components-button.is-primary:disabled, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary[aria-disabled=true], .components-button.is-primary[aria-disabled=true]:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled {
320	320	color: rgba(255, 255, 255, 0.4);
321	321	background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
322		- border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
323		- outline: none;
324	322	}
325		-.components-button.is-primary:disabled:focus:enabled, .components-button.is-primary:disabled:active:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:focus:enabled, .components-button.is-primary[aria-disabled=true]:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled {
326		- box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
327		-}
328	323	.components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
329		- color: var(--wp-components-color-accent-inverted, #fff);
	324	+ color: var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff));
330	325	background-size: 100px 100%;
331	326	/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
332	327	background-image: linear-gradient(-45deg, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 70%, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 70%);
333	328	/* stylelint-enable */
334		- border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
335	329	}
336	330	.components-button {
337	331	/**
338	332	* Secondary and tertiary buttons.
		@@ -337,14 +331,8 @@
337	331	/**
338	332	* Secondary and tertiary buttons.
339	333	*/
340	334	}
341		-.components-button.is-secondary, .components-button.is-tertiary {
342		- outline: 1px solid transparent;
343		-}
344		-.components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
345		- box-shadow: none;
346		-}
347	335	.components-button.is-secondary:disabled, .components-button.is-secondary[aria-disabled=true], .components-button.is-secondary[aria-disabled=true]:hover, .components-button.is-tertiary:disabled, .components-button.is-tertiary[aria-disabled=true], .components-button.is-tertiary[aria-disabled=true]:hover {
348	336	color: #949494;
349	337	background: transparent;
350	338	transform: none;
		@@ -353,26 +341,33 @@
353	341	/**
354	342	* Secondary button style.
355	343	*/
356	344	}
	345	+@media not (prefers-reduced-motion) {
	346	+ .components-button.is-secondary {
	347	+ transition: border-color 0.1s linear;
	348	+ }
	349	+}
357	350	.components-button.is-secondary {
358		- box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 0 0 currentColor;
359		- outline: 1px solid transparent;
	351	+ border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
360	352	white-space: nowrap;
361	353	color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
362	354	background: transparent;
363	355	}
	356	+.components-button.is-secondary:active:not(:disabled) {
	357	+ border-color: transparent;
	358	+}
364	359	.components-button.is-secondary:hover:not(:disabled, [aria-disabled=true], .is-pressed) {
365		- box-shadow: inset 0 0 0 1px var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
	360	+ border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
366	361	color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
367	362	background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
368	363	}
	364	+.components-button.is-secondary:focus:not(:active) {
	365	+ border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
	366	+}
369	367	.components-button.is-secondary:disabled:not(:focus), .components-button.is-secondary[aria-disabled=true]:not(:focus), .components-button.is-secondary[aria-disabled=true]:hover:not(:focus) {
370		- box-shadow: inset 0 0 0 1px #ddd;
	368	+ border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
371	369	}
372		-.components-button.is-secondary:focus:not(:active) {
373		- box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
374		-}
375	370	.components-button {
376	371	/**
377	372	* Tertiary buttons.
378	373	*/
		@@ -391,12 +386,8 @@
391	386	}
392	387	p + .components-button.is-tertiary {
393	388	margin-left: -6px;
394	389	}
395		-.components-button.is-tertiary:disabled:not(:focus), .components-button.is-tertiary[aria-disabled=true]:not(:focus), .components-button.is-tertiary[aria-disabled=true]:hover:not(:focus) {
396		- box-shadow: none;
397		- outline: none;
398		-}
399	390	.components-button {
400	391	/**
401	392	* Destructive buttons.
402	393	*/
		@@ -411,11 +402,8 @@
411	402	}
412	403	.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled, [aria-disabled=true]) {
413	404	color: rgb(112.7368421053, 13.2631578947, 13.2631578947);
414	405	}
415		-.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus:not(:active) {
416		- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #cc1818;
417		-}
418	406	.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled, [aria-disabled=true]) {
419	407	background: #ccc;
420	408	}
421	409	.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):disabled, .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link)[aria-disabled=true] {
		@@ -434,17 +422,18 @@
434	422	}
435	423	.components-button.is-link {
436	424	margin: 0;
437	425	padding: 0;
438		- box-shadow: none;
439	426	border: 0;
440	427	border-radius: 0;
441	428	background: none;
442	429	outline: none;
443	430	text-align: left;
444		- font-weight: 400;
	431	+ font-weight: var(--wpds-typography-font-weight-default, 400);
445	432	color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
446	433	text-decoration: underline;
	434	+ text-underline-offset: 0.2em;
	435	+ text-decoration-thickness: from-font;
447	436	}
448	437	@media not (prefers-reduced-motion) {
449	438	.components-button.is-link {
450	439	transition-property: border, background, color;
		@@ -454,19 +443,17 @@
454	443	}
455	444	.components-button.is-link {
456	445	height: auto;
457	446	}
458		-.components-button.is-link:focus {
	447	+.components-button.is-link:focus:not(:active) {
459	448	border-radius: 2px;
	449	+ text-decoration: none;
460	450	}
461	451	.components-button.is-link:disabled, .components-button.is-link[aria-disabled=true] {
462	452	color: #949494;
463	453	}
464		-.components-button:focus {
465		- outline: 3px solid transparent;
466		-}
467	454	.components-button:not(:disabled, [aria-disabled=true]):active {
468		- color: var(--wp-components-color-foreground, #1e1e1e);
	455	+ color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
469	456	}
470	457	.components-button:disabled, .components-button[aria-disabled=true] {
471	458	cursor: default;
472	459	color: #949494;
		@@ -489,9 +476,9 @@
489	476	padding: 0;
490	477	min-width: 32px;
491	478	}
492	479	.components-button.is-small {
493		- height: 24px;
	480	+ height: var(--wpds-dimension-size-sm, 24px);
494	481	line-height: 22px;
495	482	padding: 0 8px;
496	483	font-size: 11px;
497	484	}
		@@ -496,9 +483,9 @@
496	483	font-size: 11px;
497	484	}
498	485	.components-button.is-small.has-icon:not(.has-text) {
499	486	padding: 0;
500		- min-width: 24px;
	487	+ min-width: var(--wpds-dimension-size-sm, 24px);
501	488	}
502	489	.components-button.has-icon {
503	490	padding: 6px;
504	491	min-width: 36px;
		@@ -523,40 +510,30 @@
523	510	.components-button.has-icon.has-text.has-icon-right {
524	511	padding-right: 8px;
525	512	padding-left: 12px;
526	513	}
	514	+.components-button.has-icon:not(.has-text) svg,
	515	+.components-button.has-icon:not(.has-text) .dashicon {
	516	+ margin-inline: -1px;
	517	+}
527	518	.components-button.is-pressed, .components-button.is-pressed:hover {
528		- color: var(--wp-components-color-foreground-inverted, #fff);
	519	+ color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
529	520	}
530	521	.components-button.is-pressed:not(:disabled, [aria-disabled=true]), .components-button.is-pressed:hover:not(:disabled, [aria-disabled=true]) {
531		- background: var(--wp-components-color-foreground, #1e1e1e);
	522	+ background: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
532	523	}
533	524	.components-button.is-pressed:disabled, .components-button.is-pressed[aria-disabled=true] {
534	525	color: #949494;
535	526	}
536	527	.components-button.is-pressed:disabled:not(.is-primary):not(.is-secondary):not(.is-tertiary), .components-button.is-pressed[aria-disabled=true]:not(.is-primary):not(.is-secondary):not(.is-tertiary) {
537		- color: var(--wp-components-color-foreground-inverted, #fff);
	528	+ color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
538	529	background: #949494;
539	530	}
540		-.components-button.is-pressed:focus:not(:active) {
541		- box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
542		-}
543		-.components-button.is-pressed:focus {
544		- outline: 2px solid transparent;
545		-}
546		-.components-button:focus:active {
547		- outline: none;
548		-}
549	531	.components-button svg {
550	532	fill: currentColor;
551	533	outline: none;
552	534	flex-shrink: 0;
553	535	}
554		-@media (forced-colors: active) {
555		- .components-button svg {
556		- fill: CanvasText;
557		- }
558		-}
559	536
560	537	@keyframes components-button__busy-animation {
561	538	0% {
562	539	background-position: 200px 0;
		@@ -561,368 +538,8 @@
561	538	0% {
562	539	background-position: 200px 0;
563	540	}
564	541	}
565		-/* Root of the component. */
566		-.components-calendar {
567		- position: relative; /* Required to position the navigation toolbar. */
568		- box-sizing: border-box;
569		- display: inline flow-root;
570		- color: var(--wp-components-color-foreground, #1e1e1e);
571		- background-color: var(--wp-components-color-background, #fff);
572		- font-size: 13px;
573		- font-weight: 400;
574		- z-index: 0;
575		-}
576		-.components-calendar *,
577		-.components-calendar *::before,
578		-.components-calendar *::after {
579		- box-sizing: border-box;
580		-}
581		-
582		-.components-calendar__day {
583		- padding: 0;
584		- position: relative;
585		-}
586		-.components-calendar__day:has(.components-calendar__day-button:disabled) {
587		- color: var(--wp-components-color-gray-400, #ccc);
588		-}
589		-.components-calendar__day:has(.components-calendar__day-button:hover:not(:disabled)), .components-calendar__day:has(.components-calendar__day-button:focus-visible) {
590		- color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
591		-}
592		-
593		-.components-calendar__day-button {
594		- background: none;
595		- padding: 0;
596		- margin: 0;
597		- cursor: var(--wpds-cursor-control, pointer);
598		- justify-content: center;
599		- align-items: center;
600		- display: flex;
601		- position: relative;
602		- width: 32px;
603		- height: 32px;
604		- border: none;
605		- border-radius: 2px;
606		- font: inherit;
607		- font-variant-numeric: tabular-nums;
608		- color: inherit;
609		-}
610		-.components-calendar__day-button::before {
611		- content: "";
612		- position: absolute;
613		- z-index: -1;
614		- inset: 0;
615		- border: none;
616		- border-radius: 2px;
617		-}
618		-.components-calendar__day-button::after {
619		- content: "";
620		- position: absolute;
621		- z-index: 1;
622		- inset: 0;
623		- pointer-events: none;
624		-}
625		-.components-calendar__day-button:disabled {
626		- cursor: revert;
627		-}
628		-@media (forced-colors: active) {
629		- .components-calendar__day-button:disabled {
630		- text-decoration: line-through;
631		- }
632		-}
633		-.components-calendar__day-button:focus-visible {
634		- outline: var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
635		- outline-offset: 1px;
636		-}
637		-
638		-.components-calendar__caption-label {
639		- z-index: 1;
640		- position: relative;
641		- display: inline-flex;
642		- align-items: center;
643		- white-space: nowrap;
644		- border: 0;
645		- text-transform: capitalize;
646		-}
647		-
648		-.components-calendar__button-next,
649		-.components-calendar__button-previous {
650		- border: none;
651		- border-radius: 2px;
652		- background: none;
653		- padding: 0;
654		- margin: 0;
655		- cursor: var(--wpds-cursor-control, pointer);
656		- appearance: none;
657		- display: inline-flex;
658		- align-items: center;
659		- justify-content: center;
660		- position: relative;
661		- width: 32px;
662		- height: 32px;
663		- color: inherit;
664		-}
665		-.components-calendar__button-next:disabled, .components-calendar__button-next[aria-disabled=true],
666		-.components-calendar__button-previous:disabled,
667		-.components-calendar__button-previous[aria-disabled=true] {
668		- cursor: revert;
669		- color: var(--wp-components-color-gray-600, #949494);
670		-}
671		-.components-calendar__button-next:focus-visible,
672		-.components-calendar__button-previous:focus-visible {
673		- outline: var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
674		-}
675		-
676		-.components-calendar__chevron {
677		- display: inline-block;
678		- fill: currentColor;
679		- width: 16px;
680		- height: 16px;
681		-}
682		-
683		-.components-calendar[dir=rtl] .components-calendar__nav .components-calendar__chevron {
684		- transform: rotate(180deg);
685		- transform-origin: 50%;
686		-}
687		-
688		-.components-calendar__month-caption {
689		- display: flex;
690		- justify-content: center;
691		- align-content: center;
692		- height: 32px;
693		- margin-bottom: 12px;
694		-}
695		-
696		-.components-calendar__months {
697		- position: relative;
698		- display: flex;
699		- justify-content: center;
700		- flex-wrap: wrap;
701		- gap: 16px;
702		- max-width: fit-content;
703		-}
704		-
705		-.components-calendar__month-grid {
706		- border-collapse: separate;
707		- border-spacing: 0 4px;
708		-}
709		-
710		-.components-calendar__nav {
711		- position: absolute;
712		- inset-block-start: 0;
713		- inset-inline-start: 0;
714		- inset-inline-end: 0;
715		- display: flex;
716		- align-items: center;
717		- justify-content: space-between;
718		- height: 32px;
719		-}
720		-
721		-.components-calendar__weekday {
722		- width: 32px;
723		- height: 32px;
724		- padding: 0;
725		- color: var(--wp-components-color-gray-700, #757575);
726		- text-align: center;
727		- text-transform: uppercase;
728		-}
729		-
730		-/* DAY MODIFIERS */
731		-.components-calendar__day--today::after {
732		- content: "";
733		- position: absolute;
734		- z-index: 1;
735		- inset-block-start: 2px;
736		- inset-inline-end: 2px;
737		- width: 0;
738		- height: 0;
739		- border-radius: 50%;
740		- border: 2px solid currentColor;
741		-}
742		-
743		-.components-calendar__day--selected:not(.components-calendar__range-middle):has(.components-calendar__day-button,
744		-.components-calendar__day-button:hover:not(:disabled)) {
745		- color: var(--wp-components-color-foreground-inverted, #fff);
746		-}
747		-.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button::before {
748		- background-color: var(--wp-components-color-foreground, #1e1e1e);
749		- border: 1px solid transparent;
750		-}
751		-.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:disabled::before {
752		- background-color: var(--wp-components-color-gray-400, #ccc);
753		-}
754		-.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:hover:not(:disabled)::before {
755		- background-color: var(--wp-components-color-gray-800, #2f2f2f);
756		-}
757		-
758		-.components-calendar__day--outside {
759		- color: var(--wp-components-color-gray-600, #949494);
760		-}
761		-
762		-.components-calendar__day--hidden {
763		- visibility: hidden;
764		-}
765		-
766		-.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 {
767		- border-start-end-radius: 0;
768		- border-end-end-radius: 0;
769		-}
770		-
771		-.components-calendar__range-middle .components-calendar__day-button::before {
772		- background-color: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
773		- border-radius: 0;
774		- border-width: 1px 0;
775		- border-color: transparent;
776		- border-style: solid;
777		-}
778		-
779		-.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 {
780		- border-start-start-radius: 0;
781		- border-end-start-radius: 0;
782		-}
783		-
784		-/*
785		- * RANGE PREVIEW (range calendar only)
786		- *
787		- * The preview is rendered in the button's ::after pseudo-element, so that it
788		- * can be rendered over the button's contents.
789		- * The selection preview is shown with a dashed border. In order to have
790		- * control over the dash pattern (especially the seams between days), the
791		- * dashed borders are rendered as SVGs via the url() CSS function.
792		- * Since SVGs rendered in the url() function don't seem to be able to access
793		- * CSS variables, we're using the SVGs as masks, and using `background-color`
794		- * to consume the accent color variable.
795		- */
796		-.components-calendar__day--preview svg {
797		- position: absolute;
798		- inset: 0;
799		- pointer-events: none;
800		- color: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 16%, transparent);
801		-}
802		-@media (forced-colors: active) {
803		- .components-calendar__day--preview svg {
804		- color: inherit;
805		- }
806		-}
807		-.components-calendar[dir=rtl] .components-calendar__day--preview svg {
808		- transform: scaleX(-1);
809		-}
810		-
811		-.components-calendar__day--preview.components-calendar__range-middle .components-calendar__day-button::before {
812		- border: none;
813		-}
814		-
815		-/* ANIMATIONS */
816		-@keyframes slide-in-left {
817		- 0% {
818		- transform: translateX(-100%);
819		- }
820		- 100% {
821		- transform: translateX(0);
822		- }
823		-}
824		-@keyframes slide-in-right {
825		- 0% {
826		- transform: translateX(100%);
827		- }
828		- 100% {
829		- transform: translateX(0);
830		- }
831		-}
832		-@keyframes slide-out-left {
833		- 0% {
834		- transform: translateX(0);
835		- }
836		- 100% {
837		- transform: translateX(-100%);
838		- }
839		-}
840		-@keyframes slide-out-right {
841		- 0% {
842		- transform: translateX(0);
843		- }
844		- 100% {
845		- transform: translateX(100%);
846		- }
847		-}
848		-@keyframes fade-in {
849		- from {
850		- opacity: 0;
851		- }
852		- to {
853		- opacity: 1;
854		- }
855		-}
856		-@keyframes fade-out {
857		- from {
858		- opacity: 1;
859		- }
860		- to {
861		- opacity: 0;
862		- }
863		-}
864		-.components-calendar__weeks-before-enter,
865		-.components-calendar__weeks-before-exit,
866		-.components-calendar__weeks-after-enter,
867		-.components-calendar__weeks-after-exit,
868		-.components-calendar__caption-after-enter,
869		-.components-calendar__caption-after-exit,
870		-.components-calendar__caption-before-enter,
871		-.components-calendar__caption-before-exit {
872		- animation-duration: 0s;
873		- animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
874		- animation-fill-mode: forwards;
875		-}
876		-@media not (prefers-reduced-motion) {
877		- .components-calendar__weeks-before-enter,
878		- .components-calendar__weeks-before-exit,
879		- .components-calendar__weeks-after-enter,
880		- .components-calendar__weeks-after-exit,
881		- .components-calendar__caption-after-enter,
882		- .components-calendar__caption-after-exit,
883		- .components-calendar__caption-before-enter,
884		- .components-calendar__caption-before-exit {
885		- animation-duration: 0.3s;
886		- }
887		-}
888		-
889		-.components-calendar__weeks-before-enter,
890		-.components-calendar[dir=rtl] .components-calendar__weeks-after-enter {
891		- animation-name: slide-in-left;
892		-}
893		-
894		-.components-calendar__weeks-before-exit,
895		-.components-calendar[dir=rtl] .components-calendar__weeks-after-exit {
896		- animation-name: slide-out-left;
897		-}
898		-
899		-.components-calendar__weeks-after-enter,
900		-.components-calendar[dir=rtl] .components-calendar__weeks-before-enter {
901		- animation-name: slide-in-right;
902		-}
903		-
904		-.components-calendar__weeks-after-exit,
905		-.components-calendar[dir=rtl] .components-calendar__weeks-before-exit {
906		- animation-name: slide-out-right;
907		-}
908		-
909		-.components-calendar__caption-after-enter {
910		- animation-name: fade-in;
911		-}
912		-
913		-.components-calendar__caption-after-exit {
914		- animation-name: fade-out;
915		-}
916		-
917		-.components-calendar__caption-before-enter {
918		- animation-name: fade-in;
919		-}
920		-
921		-.components-calendar__caption-before-exit {
922		- animation-name: fade-out;
923		-}
924		-
925	542	.components-checkbox-control {
926	543	--checkbox-input-size: 24px;
927	544	}
928	545	@media (min-width: 600px) {
		@@ -935,8 +552,9 @@
935	552	}
936	553
937	554	.components-checkbox-control__label {
938	555	line-height: var(--checkbox-input-size);
	556	+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
939	557	}
940	558	.components-checkbox-control:not(:has(:disabled)) .components-checkbox-control__label {
941	559	cursor: var(--wpds-cursor-control, pointer);
942	560	}
		@@ -941,27 +559,21 @@
941	559	cursor: var(--wpds-cursor-control, pointer);
942	560	}
943	561
944	562	.components-checkbox-control__input[type=checkbox] {
945		- border: 1px solid #1e1e1e;
	563	+ border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
946	564	margin-right: 12px;
947	565	transition: none;
948	566	border-radius: 2px;
949		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	567	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
950	568	padding: 6px 8px;
951	569	/* Fonts smaller than 16px causes mobile safari to zoom. */
952	570	font-size: 16px;
953	571	/* Override core line-height. To be reviewed. */
954	572	line-height: normal;
955		- box-shadow: 0 0 0 transparent;
956		- border-radius: 2px;
957		- border: 1px solid #949494;
	573	+ border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	574	+ border-radius: var(--wpds-border-radius-sm, 2px);
958	575	}
959		-@media not (prefers-reduced-motion) {
960		- .components-checkbox-control__input[type=checkbox] {
961		- transition: box-shadow 0.1s linear;
962		- }
963		-}
964	576	@media (min-width: 600px) {
965	577	.components-checkbox-control__input[type=checkbox] {
966	578	font-size: 13px;
967	579	/* Override core line-height. To be reviewed. */
		@@ -967,16 +579,23 @@
967	579	/* Override core line-height. To be reviewed. */
968	580	line-height: normal;
969	581	}
970	582	}
	583	+.components-checkbox-control__input[type=checkbox]:hover:not(:disabled, [aria-disabled=true]) {
	584	+ border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
	585	+}
971	586	.components-checkbox-control__input[type=checkbox]:focus {
972		- border-color: var(--wp-admin-theme-color);
973		- box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
974		- outline: 2px solid transparent;
	587	+ 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)));
	588	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
	589	+ border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	590	+ box-shadow: none;
975	591	}
976	592	.components-checkbox-control__input[type=checkbox]::placeholder {
977	593	color: rgba(30, 30, 30, 0.62);
978	594	}
	595	+.components-checkbox-control__input[type=checkbox]:hover:not(:disabled, [aria-disabled=true]) {
	596	+ background: var(--wpds-color-background-interactive-neutral-active, #fff);
	597	+}
979	598	.components-checkbox-control__input[type=checkbox]:focus {
980	599	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
981	600	outline: 2px solid transparent;
982	601	}
		@@ -1003,9 +622,9 @@
1003	622	display: inline-block;
1004	623	vertical-align: middle;
1005	624	width: 16px;
1006	625	/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
1007		- font: normal 30px/1 dashicons;
	626	+ font: 400 30px/1 dashicons;
1008	627	speak: none;
1009	628	-webkit-font-smoothing: antialiased;
1010	629	-moz-osx-font-smoothing: grayscale;
1011	630	}
		@@ -1015,13 +634,17 @@
1015	634	font-size: 21px;
1016	635	}
1017	636	}
1018	637	.components-checkbox-control__input[type=checkbox][aria-disabled=true], .components-checkbox-control__input[type=checkbox]:disabled {
1019		- background: #f0f0f0;
1020		- border-color: #ddd;
	638	+ background: var(--wpds-color-background-interactive-neutral-disabled, #fff);
	639	+ border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
	640	+ color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
1021	641	cursor: default;
1022	642	opacity: 1;
1023	643	}
	644	+.components-checkbox-control__input[type=checkbox][aria-disabled=true]:checked::before, .components-checkbox-control__input[type=checkbox][aria-disabled=true][aria-checked=mixed]::before, .components-checkbox-control__input[type=checkbox]:disabled:checked::before, .components-checkbox-control__input[type=checkbox]:disabled[aria-checked=mixed]::before {
	645	+ color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
	646	+}
1024	647	.components-checkbox-control__input[type=checkbox] {
1025	648	background: #fff;
1026	649	color: #1e1e1e;
1027	650	clear: none;
		@@ -1069,31 +692,24 @@
1069	692	}
1070	693
1071	694	svg.components-checkbox-control__checked,
1072	695	svg.components-checkbox-control__indeterminate {
1073		- --checkmark-size: var(--checkbox-input-size);
1074		- fill: #fff;
	696	+ color: #fff;
1075	697	cursor: var(--wpds-cursor-control, pointer);
1076	698	position: absolute;
1077	699	left: 50%;
1078	700	top: 50%;
1079	701	transform: translate(-50%, -50%);
1080		- width: var(--checkmark-size);
1081		- height: var(--checkmark-size);
	702	+ width: var(--checkbox-input-size);
	703	+ height: var(--checkbox-input-size);
1082	704	-webkit-user-select: none;
1083	705	user-select: none;
1084	706	pointer-events: none;
1085	707	}
1086		-@media (min-width: 600px) {
1087		- svg.components-checkbox-control__checked,
1088		- svg.components-checkbox-control__indeterminate {
1089		- --checkmark-size: calc(var(--checkbox-input-size) + 4px);
1090		- }
1091		-}
1092	708
1093	709	.components-checkbox-control:has(:disabled) svg.components-checkbox-control__checked,
1094	710	.components-checkbox-control:has(:disabled) svg.components-checkbox-control__indeterminate {
1095		- fill: var(--wp-components-color-gray-400, #ccc);
	711	+ color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
1096	712	}
1097	713
1098	714	.components-checkbox-control__help {
1099	715	display: inline-block;
		@@ -1103,8 +719,9 @@
1103	719	.components-circular-option-picker {
1104	720	display: inline-block;
1105	721	width: 100%;
1106	722	min-width: 188px;
	723	+ isolation: isolate;
1107	724	}
1108	725	.components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper {
1109	726	display: flex;
1110	727	justify-content: flex-end;
		@@ -1130,14 +747,14 @@
1130	747	transform: scale(1);
1131	748	}
1132	749	@media not (prefers-reduced-motion) {
1133	750	.components-circular-option-picker__option-wrapper {
1134		- transition: 100ms transform ease;
	751	+ transition: 100ms transform ease-out;
1135	752	will-change: transform;
1136	753	}
1137	754	}
1138	755	.components-circular-option-picker__option-wrapper:hover {
1139		- transform: scale(1.2);
	756	+ transform: scale(1.1);
1140	757	}
1141	758	.components-circular-option-picker__option-wrapper > div {
1142	759	height: 100%;
1143	760	width: 100%;
		@@ -1145,15 +762,11 @@
1145	762
1146	763	.components-circular-option-picker__option-wrapper::before {
1147	764	content: "";
1148	765	position: absolute;
1149		- top: 1px;
1150		- left: 1px;
1151		- bottom: 1px;
1152		- right: 1px;
	766	+ inset: 1px;
1153	767	border-radius: 50%;
1154	768	z-index: -1;
1155		- /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
1156	769	background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
1157	770	}
1158	771
1159	772	.components-circular-option-picker__option {
		@@ -1173,13 +786,9 @@
1173	786	}
1174	787	.components-circular-option-picker__option {
1175	788	cursor: var(--wpds-cursor-control, pointer);
1176	789	}
1177		-.components-circular-option-picker__option:hover {
1178		- box-shadow: inset 0 0 0 14px !important;
1179		-}
1180	790	.components-circular-option-picker__option[aria-pressed=true], .components-circular-option-picker__option[aria-selected=true] {
1181		- box-shadow: inset 0 0 0 4px;
1182	791	position: relative;
1183	792	z-index: 1;
1184	793	overflow: visible;
1185	794	}
		@@ -1193,34 +802,13 @@
1193	802	}
1194	803	.components-circular-option-picker__option::after {
1195	804	content: "";
1196	805	position: absolute;
1197		- top: -1px;
1198		- left: -1px;
1199		- bottom: -1px;
1200		- right: -1px;
	806	+ inset: -1px;
	807	+ border: 1px solid transparent;
1201	808	border-radius: 50%;
1202	809	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
1203		- border: 1px solid transparent;
1204		- box-sizing: inherit;
1205	810	}
1206		-.components-circular-option-picker__option:focus::after {
1207		- content: "";
1208		- border-radius: 50%;
1209		- box-shadow: inset 0 0 0 2px #fff;
1210		- position: absolute;
1211		- top: 50%;
1212		- left: 50%;
1213		- transform: translate(-50%, -50%);
1214		- border: 2px solid #757575;
1215		- width: calc(100% + 4px);
1216		- height: calc(100% + 4px);
1217		-}
1218		-.components-circular-option-picker__option.components-button:focus {
1219		- background-color: transparent;
1220		- box-shadow: inset 0 0 0 14px;
1221		- outline: none;
1222		-}
1223	811
1224	812	.components-circular-option-picker__button-action .components-circular-option-picker__option {
1225	813	color: #fff;
1226	814	background: #fff;
		@@ -1232,17 +820,14 @@
1232	820	.components-circular-option-picker__dropdown-link-action .components-button {
1233	821	line-height: 22px;
1234	822	}
1235	823
1236		-.components-palette-edit__popover-gradient-picker {
	824	+.components-palette-edit__popover-gradient-picker,
	825	+.components-palette-edit__popover-duotone-picker {
1237	826	width: 260px;
1238	827	padding: 8px;
1239	828	}
1240	829
1241		-.components-dropdown-menu__menu .components-palette-edit__menu-button {
1242		- width: 100%;
1243		-}
1244		-
1245	830	.component-color-indicator {
1246	831	width: 20px;
1247	832	height: 20px;
1248	833	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
		@@ -1265,10 +850,10 @@
1265	850	padding: 2px;
1266	851	margin: 0;
1267	852	line-height: inherit;
1268	853	min-height: auto;
1269		- background: var(--wp-components-color-background, #fff);
1270		- color: var(--wp-components-color-foreground, #1e1e1e);
	854	+ background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
	855	+ color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
1271	856	}
1272	857	@media (min-width: 600px) {
1273	858	input.components-combobox-control__input[type=text] {
1274	859	font-size: 13px;
		@@ -1279,23 +864,17 @@
1279	864	box-shadow: none;
1280	865	}
1281	866
1282	867	.components-combobox-control__suggestions-container {
1283		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	868	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1284	869	padding: 6px 8px;
1285	870	/* Fonts smaller than 16px causes mobile safari to zoom. */
1286	871	font-size: 16px;
1287	872	/* Override core line-height. To be reviewed. */
1288	873	line-height: normal;
1289		- box-shadow: 0 0 0 transparent;
1290		- border-radius: 2px;
1291		- border: 1px solid #949494;
	874	+ border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	875	+ border-radius: var(--wpds-border-radius-sm, 2px);
1292	876	}
1293		-@media not (prefers-reduced-motion) {
1294		- .components-combobox-control__suggestions-container {
1295		- transition: box-shadow 0.1s linear;
1296		- }
1297		-}
1298	877	@media (min-width: 600px) {
1299	878	.components-combobox-control__suggestions-container {
1300	879	font-size: 13px;
1301	880	/* Override core line-height. To be reviewed. */
		@@ -1301,12 +880,16 @@
1301	880	/* Override core line-height. To be reviewed. */
1302	881	line-height: normal;
1303	882	}
1304	883	}
	884	+.components-combobox-control__suggestions-container:hover:not(:disabled, [aria-disabled=true]) {
	885	+ border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
	886	+}
1305	887	.components-combobox-control__suggestions-container:focus {
1306		- border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1307		- box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1308		- outline: 2px solid transparent;
	888	+ 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)));
	889	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
	890	+ border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	891	+ box-shadow: none;
1309	892	}
1310	893	.components-combobox-control__suggestions-container::placeholder {
1311	894	color: rgba(30, 30, 30, 0.62);
1312	895	}
		@@ -1317,11 +900,10 @@
1317	900	width: 100%;
1318	901	padding: 0;
1319	902	}
1320	903	.components-combobox-control__suggestions-container:focus-within {
1321		- border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1322		- box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1323		- outline: 2px solid transparent;
	904	+ 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)));
	905	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1324	906	}
1325	907	.components-combobox-control__suggestions-container .components-spinner {
1326	908	margin: 0;
1327	909	}
		@@ -1368,9 +950,9 @@
1368	950	box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), inset 1px 0 0 0 rgba(0, 0, 0, 0.2), inset -1px 0 0 0 rgba(0, 0, 0, 0.2);
1369	951	}
1370	952
1371	953	.components-color-palette__custom-color-name {
1372		- color: var(--wp-components-color-foreground, #1e1e1e);
	954	+ color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
1373	955	margin: 0 1px;
1374	956	}
1375	957
1376	958	.components-color-palette__custom-color-value {
		@@ -1434,14 +1016,19 @@
1434	1016	width: inherit;
1435	1017	border-radius: 50%;
1436	1018	padding: 0;
1437	1019	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
1438		- outline: 2px solid transparent;
1439	1020	}
1440		-.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus, .components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active {
	1021	+.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button.is-active {
1441	1022	box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25);
1442		- outline: 1.5px solid transparent;
1443	1023	}
	1024	+.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus:not(:active) {
	1025	+ outline-offset: 1px;
	1026	+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
	1027	+}
	1028	+.components-custom-gradient-picker__gradient-bar .components-custom-gradient-picker__control-point-button:focus:not(:active).is-active {
	1029	+ box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus) * 2) #fff, 0 0 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) + 2px) var(--wpds-color-background-surface-neutral-strong, #fff);
	1030	+}
1444	1031
1445	1032	.components-custom-gradient-picker__remove-control-point-wrapper {
1446	1033	padding-bottom: 8px;
1447	1034	}
		@@ -1462,28 +1049,8 @@
1462	1049	position: relative;
1463	1050	z-index: 0;
1464	1051	}
1465	1052
1466		-body.is-dragging-components-draggable {
1467		- cursor: move; /* Fallback for IE/Edge < 14 */
1468		- cursor: grabbing !important;
1469		-}
1470		-
1471		-.components-draggable__invisible-drag-image {
1472		- position: fixed;
1473		- left: -1000px;
1474		- height: 50px;
1475		- width: 50px;
1476		-}
1477		-
1478		-.components-draggable__clone {
1479		- position: fixed;
1480		- padding: 0;
1481		- background: transparent;
1482		- pointer-events: none;
1483		- z-index: 1000000000;
1484		-}
1485		-
1486	1053	.components-drop-zone {
1487	1054	position: absolute;
1488	1055	top: 0;
1489	1056	right: 0;
		@@ -1550,9 +1117,9 @@
1550	1117	pointer-events: none;
1551	1118	}
1552	1119
1553	1120	.components-drop-zone__content-text {
1554		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	1121	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1555	1122	font-size: 13px;
1556	1123	}
1557	1124
1558	1125	.components-dropdown {
		@@ -1589,9 +1156,9 @@
1589	1156	}
1590	1157
1591	1158	.components-dropdown-menu__menu {
1592	1159	width: 100%;
1593		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	1160	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1594	1161	font-size: 13px;
1595	1162	line-height: 1.4;
1596	1163	}
1597	1164	.components-dropdown-menu__menu .components-dropdown-menu__menu-item,
		@@ -1600,9 +1167,9 @@
1600	1167	padding: 6px;
1601	1168	outline: none;
1602	1169	cursor: var(--wpds-cursor-control, pointer);
1603	1170	white-space: nowrap;
1604		- font-weight: 400;
	1171	+ font-weight: var(--wpds-typography-font-weight-default, 400);
1605	1172	}
1606	1173	.components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator,
1607	1174	.components-dropdown-menu__menu .components-menu-item.has-separator {
1608	1175	margin-top: 6px;
		@@ -1613,9 +1180,9 @@
1613	1180	.components-dropdown-menu__menu .components-menu-item.has-separator::before {
1614	1181	display: block;
1615	1182	content: "";
1616	1183	box-sizing: content-box;
1617		- background-color: #ddd;
	1184	+ background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
1618	1185	position: absolute;
1619	1186	top: -3px;
1620	1187	left: 0;
1621	1188	right: 0;
		@@ -1675,22 +1242,42 @@
1675	1242	margin: 2px;
1676	1243	}
1677	1244
1678	1245	.components-external-link {
	1246	+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
1679	1247	text-decoration: none;
1680	1248	}
	1249	+.components-external-link:visited {
	1250	+ color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
	1251	+}
	1252	+.components-external-link:hover, .components-external-link:active {
	1253	+ color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
	1254	+}
	1255	+.components-external-link:focus {
	1256	+ box-shadow: none;
	1257	+ border-radius: 0;
	1258	+}
	1259	+.components-external-link:focus:not(:active) {
	1260	+ 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)));
	1261	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
	1262	+}
1681	1263
1682	1264	.components-external-link__contents {
1683	1265	text-decoration: underline;
	1266	+ text-underline-offset: 0.2em;
	1267	+ text-decoration-thickness: from-font;
1684	1268	}
1685	1269
1686	1270	.components-external-link__icon {
1687		- margin-left: 0.5ch;
1688		- font-weight: 400;
	1271	+ line-height: 1;
	1272	+ display: inline-block;
	1273	+ margin-inline-start: var(--wpds-dimension-padding-xs, 4px);
	1274	+ font-weight: var(--wpds-typography-font-weight-default, 400);
1689	1275	}
1690	1276
1691	1277	.components-form-toggle {
1692	1278	position: relative;
	1279	+ isolation: isolate;
1693	1280	display: inline-block;
1694	1281	height: 16px;
1695	1282	}
1696	1283	.components-form-toggle .components-form-toggle__track {
		@@ -1764,39 +1351,39 @@
1764	1351	background-color: #fff;
1765	1352	border-width: 0;
1766	1353	transform: translateX(16px);
1767	1354	}
1768		-.components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
1769		- background-color: var(--wp-components-color-gray-100, #f0f0f0);
1770		- border-color: var(--wp-components-color-gray-300, #ddd);
	1355	+.components-form-toggle.is-disabled .components-form-toggle__track, [inert] .components-form-toggle .components-form-toggle__track {
	1356	+ background-color: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
	1357	+ border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
1771	1358	}
1772	1359	@media (forced-colors: active) {
1773		- .components-form-toggle.is-disabled .components-form-toggle__track, .components-disabled .components-form-toggle .components-form-toggle__track {
	1360	+ .components-form-toggle.is-disabled .components-form-toggle__track, [inert] .components-form-toggle .components-form-toggle__track {
1774	1361	border-color: GrayText;
1775	1362	}
1776	1363	}
1777		-.components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
1778		- background-color: var(--wp-components-color-gray-400, #ccc);
	1364	+.components-form-toggle.is-disabled .components-form-toggle__thumb, [inert] .components-form-toggle .components-form-toggle__thumb {
	1365	+ background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1779	1366	box-shadow: none;
1780	1367	}
1781	1368	@media (forced-colors: active) {
1782		- .components-form-toggle.is-disabled .components-form-toggle__thumb, .components-disabled .components-form-toggle .components-form-toggle__thumb {
	1369	+ .components-form-toggle.is-disabled .components-form-toggle__thumb, [inert] .components-form-toggle .components-form-toggle__thumb {
1783	1370	border-color: GrayText;
1784	1371	}
1785	1372	}
1786		-.components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
1787		- background-color: var(--wp-components-color-gray-400, #ccc);
1788		- border-color: var(--wp-components-color-gray-400, #ccc);
	1373	+.components-form-toggle.is-disabled.is-checked .components-form-toggle__track, [inert] .components-form-toggle.is-checked .components-form-toggle__track {
	1374	+ background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
	1375	+ border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1789	1376	}
1790	1377	@media (forced-colors: active) {
1791		- .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track {
	1378	+ .components-form-toggle.is-disabled.is-checked .components-form-toggle__track, [inert] .components-form-toggle.is-checked .components-form-toggle__track {
1792	1379	border-color: GrayText;
1793	1380	}
1794		- .components-form-toggle.is-disabled.is-checked .components-form-toggle__track::after, .components-disabled .components-form-toggle.is-checked .components-form-toggle__track::after {
	1381	+ .components-form-toggle.is-disabled.is-checked .components-form-toggle__track::after, [inert] .components-form-toggle.is-checked .components-form-toggle__track::after {
1795	1382	border-top-color: GrayText;
1796	1383	}
1797	1384	}
1798		-.components-form-toggle.is-disabled.is-checked .components-form-toggle__thumb, .components-disabled .components-form-toggle.is-checked .components-form-toggle__thumb {
	1385	+.components-form-toggle.is-disabled.is-checked .components-form-toggle__thumb, [inert] .components-form-toggle.is-checked .components-form-toggle__thumb {
1799	1386	background-color: #fff;
1800	1387	}
1801	1388
1802	1389	.components-form-toggle input.components-form-toggle__input[type=checkbox] {
		@@ -1821,23 +1408,17 @@
1821	1408	cursor: var(--wpds-cursor-control, pointer);
1822	1409	}
1823	1410
1824	1411	.components-form-token-field__input-container {
1825		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	1412	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
1826	1413	padding: 6px 8px;
1827	1414	/* Fonts smaller than 16px causes mobile safari to zoom. */
1828	1415	font-size: 16px;
1829	1416	/* Override core line-height. To be reviewed. */
1830	1417	line-height: normal;
1831		- box-shadow: 0 0 0 transparent;
1832		- border-radius: 2px;
1833		- border: 1px solid #949494;
	1418	+ border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	1419	+ border-radius: var(--wpds-border-radius-sm, 2px);
1834	1420	}
1835		-@media not (prefers-reduced-motion) {
1836		- .components-form-token-field__input-container {
1837		- transition: box-shadow 0.1s linear;
1838		- }
1839		-}
1840	1421	@media (min-width: 600px) {
1841	1422	.components-form-token-field__input-container {
1842	1423	font-size: 13px;
1843	1424	/* Override core line-height. To be reviewed. */
		@@ -1843,12 +1424,16 @@
1843	1424	/* Override core line-height. To be reviewed. */
1844	1425	line-height: normal;
1845	1426	}
1846	1427	}
	1428	+.components-form-token-field__input-container:hover:not(:disabled, [aria-disabled=true]) {
	1429	+ border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
	1430	+}
1847	1431	.components-form-token-field__input-container:focus {
1848		- border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1849		- box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1850		- outline: 2px solid transparent;
	1432	+ 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)));
	1433	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
	1434	+ border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	1435	+ box-shadow: none;
1851	1436	}
1852	1437	.components-form-token-field__input-container::placeholder {
1853	1438	color: rgba(30, 30, 30, 0.62);
1854	1439	}
		@@ -1857,16 +1442,18 @@
1857	1442	padding: 0;
1858	1443	cursor: text;
1859	1444	}
1860	1445	.components-form-token-field__input-container.is-disabled {
1861		- background: var(--wp-components-color-gray-100, #f0f0f0);
1862		- border-color: var(--wp-components-color-gray-400, #ccc);
	1446	+ background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
	1447	+ border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1863	1448	cursor: default;
1864	1449	}
	1450	+.components-form-token-field__input-container.is-disabled:hover {
	1451	+ border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
	1452	+}
1865	1453	.components-form-token-field__input-container.is-active {
1866		- border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1867		- box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
1868		- outline: 2px solid transparent;
	1454	+ 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)));
	1455	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
1869	1456	}
1870	1457	.components-form-token-field__input-container input[type=text].components-form-token-field__input {
1871	1458	display: inline-block;
1872	1459	flex: 1;
		@@ -1880,9 +1467,9 @@
1880	1467	min-height: 24px;
1881	1468	min-width: 50px;
1882	1469	background: inherit;
1883	1470	border: 0;
1884		- color: var(--wp-components-color-foreground, #1e1e1e);
	1471	+ color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
1885	1472	box-shadow: none;
1886	1473	}
1887	1474	@media (min-width: 600px) {
1888	1475	.components-form-token-field__input-container input[type=text].components-form-token-field__input {
		@@ -1916,10 +1503,10 @@
1916	1503	color: #757575;
1917	1504	}
1918	1505	.components-form-token-field__token.is-disabled .components-form-token-field__token-text,
1919	1506	.components-form-token-field__token.is-disabled .components-form-token-field__remove-token.components-button {
1920		- background: var(--wp-components-color-gray-100, #f0f0f0);
1921		- color: var(--wp-components-color-gray-600, #949494);
	1507	+ background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
	1508	+ color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
1922	1509	}
1923	1510	.components-form-token-field__token.is-borderless {
1924	1511	position: relative;
1925	1512	padding: 0 24px 0 0;
		@@ -1999,9 +1586,9 @@
1999	1586	padding: 0;
2000	1587	}
2001	1588
2002	1589	.components-form-token-field__suggestion {
2003		- color: var(--wp-components-color-foreground, #1e1e1e);
	1590	+ color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
2004	1591	display: block;
2005	1592	font-size: 13px;
2006	1593	padding: 8px 12px;
2007	1594	min-height: 32px;
		@@ -2009,9 +1596,9 @@
2009	1596	box-sizing: border-box;
2010	1597	}
2011	1598	.components-form-token-field__suggestion.is-selected {
2012	1599	background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2013		- color: var(--wp-components-color-foreground-inverted, #fff);
	1600	+ color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
2014	1601	}
2015	1602	.components-form-token-field__suggestion[aria-disabled=true] {
2016	1603	pointer-events: none;
2017	1604	color: #949494;
		@@ -2157,8 +1744,13 @@
2157	1744	outline-offset: calc(2 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
2158	1745	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);
2159	1746	}
2160	1747
	1748	+.components-input-control__container:focus-within:not(:has(:is(.components-input-control__prefix, .components-input-control__suffix):focus-within)) .components-input-control__backdrop {
	1749	+ 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)));
	1750	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
	1751	+}
	1752	+
2161	1753	.components-menu-group + .components-menu-group {
2162	1754	padding-top: 8px;
2163	1755	border-top: 1px solid #1e1e1e;
2164	1756	}
		@@ -2178,9 +1770,9 @@
2178	1770	margin-bottom: 12px;
2179	1771	color: #757575;
2180	1772	text-transform: uppercase;
2181	1773	font-size: 11px;
2182		- font-weight: 499;
	1774	+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2183	1775	white-space: nowrap;
2184	1776	}
2185	1777
2186	1778	.components-menu-item__button,
		@@ -2185,9 +1777,9 @@
2185	1777
2186	1778	.components-menu-item__button,
2187	1779	.components-menu-item__button.components-button {
2188	1780	width: 100%;
2189		- font-weight: 400;
	1781	+ font-weight: var(--wpds-typography-font-weight-default, 400);
2190	1782	}
2191	1783	.components-menu-item__button[role=menuitemradio] .components-menu-item__item:only-child, .components-menu-item__button[role=menuitemcheckbox] .components-menu-item__item:only-child,
2192	1784	.components-menu-item__button.components-button[role=menuitemradio] .components-menu-item__item:only-child,
2193	1785	.components-menu-item__button.components-button[role=menuitemcheckbox] .components-menu-item__item:only-child {
		@@ -2277,8 +1869,12 @@
2277	1869	.components-menu-items-choice.components-button.has-icon {
2278	1870	padding-left: 12px;
2279	1871	}
2280	1872
	1873	+body.modal-open {
	1874	+ overflow: hidden;
	1875	+}
	1876	+
2281	1877	.components-modal__screen-overlay {
2282	1878	position: fixed;
2283	1879	top: 0;
2284	1880	right: 0;
		@@ -2297,9 +1893,9 @@
2297	1893	}
2298	1894	}
2299	1895	@media not (prefers-reduced-motion) {
2300	1896	.components-modal__screen-overlay {
2301		- animation: __wp-base-styles-fade-in 0.08s linear 0s;
	1897	+ animation: __wp-base-styles-fade-in var(--wpds-motion-duration-sm, 100ms) var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1)) 0s;
2302	1898	animation-fill-mode: forwards;
2303	1899	}
2304	1900	}
2305	1901	@keyframes __wp-base-styles-fade-out {
		@@ -2311,9 +1907,9 @@
2311	1907	}
2312	1908	}
2313	1909	@media not (prefers-reduced-motion) {
2314	1910	.components-modal__screen-overlay.is-animating-out {
2315		- animation: __wp-base-styles-fade-out 0.08s linear 80ms;
	1911	+ animation: __wp-base-styles-fade-out var(--wpds-motion-duration-sm, 100ms) var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1)) var(--wpds-motion-duration-xs, 50ms);
2316	1912	animation-fill-mode: forwards;
2317	1913	}
2318	1914	}
2319	1915
		@@ -2325,10 +1921,12 @@
2325	1921	.components-modal__frame *::after {
2326	1922	box-sizing: inherit;
2327	1923	}
2328	1924	.components-modal__frame {
2329		- margin: 40px 0 0 0;
	1925	+ align-self: flex-end;
	1926	+ margin: 0;
2330	1927	width: 100%;
	1928	+ max-height: calc(100% - 40px);
2331	1929	background: #fff;
2332	1930	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
2333	1931	border-radius: 8px 8px 0 0;
2334	1932	overflow: hidden;
		@@ -2335,9 +1933,9 @@
2335	1933	display: flex;
2336	1934	color: #1e1e1e;
2337	1935	animation-name: components-modal__appear-animation;
2338	1936	animation-fill-mode: forwards;
2339		- animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
	1937	+ animation-timing-function: var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1));
2340	1938	}
2341	1939	.components-modal__frame h1,
2342	1940	.components-modal__frame h2,
2343	1941	.components-modal__frame h3 {
		@@ -2344,17 +1942,18 @@
2344	1942	color: #1e1e1e;
2345	1943	}
2346	1944	@media not (prefers-reduced-motion) {
2347	1945	.components-modal__frame {
2348		- animation-duration: var(--modal-frame-animation-duration);
	1946	+ animation-duration: var(--wpds-motion-duration-md, 200ms);
2349	1947	}
2350	1948	}
2351	1949	.components-modal__screen-overlay.is-animating-out .components-modal__frame {
2352	1950	animation-name: components-modal__disappear-animation;
2353		- animation-timing-function: cubic-bezier(1, 0, 0.2, 1);
	1951	+ animation-timing-function: var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1));
2354	1952	}
2355	1953	@media (min-width: 600px) {
2356	1954	.components-modal__frame {
	1955	+ align-self: auto;
2357	1956	border-radius: 8px;
2358	1957	margin: auto;
2359	1958	width: auto;
2360	1959	min-width: var(--wpds-dimension-surface-width-sm, 320px);
		@@ -2360,24 +1959,8 @@
2360	1959	min-width: var(--wpds-dimension-surface-width-sm, 320px);
2361	1960	max-width: calc(100% - 32px);
2362	1961	max-height: calc(100% - 128px);
2363	1962	}
2364		-}
2365		-@media (min-width: 600px) and (min-width: 600px) {
2366		- .components-modal__frame.is-full-screen {
2367		- width: calc(100% - 32px);
2368		- height: calc(100% - 32px);
2369		- max-height: none;
2370		- }
2371		-}
2372		-@media (min-width: 600px) and (min-width: 782px) {
2373		- .components-modal__frame.is-full-screen {
2374		- width: calc(100% - 80px);
2375		- height: calc(100% - 80px);
2376		- max-width: none;
2377		- }
2378		-}
2379		-@media (min-width: 600px) {
2380	1963	.components-modal__frame.has-size-small, .components-modal__frame.has-size-medium, .components-modal__frame.has-size-large {
2381	1964	width: 100%;
2382	1965	}
2383	1966	.components-modal__frame.has-size-small {
		@@ -2394,8 +1977,15 @@
2394	1977	.components-modal__frame {
2395	1978	max-height: 70%;
2396	1979	}
2397	1980	}
	1981	+.components-modal__frame.is-full-screen {
	1982	+ margin: 0;
	1983	+ width: 100%;
	1984	+ height: 100%;
	1985	+ max-height: none;
	1986	+ border-radius: 0;
	1987	+}
2398	1988	.components-modal__frame.is-full-screen :where(.components-modal__content) {
2399	1989	display: flex;
2400	1990	margin-bottom: 24px;
2401	1991	padding-bottom: 0;
		@@ -2402,29 +1992,66 @@
2402	1992	}
2403	1993	.components-modal__frame.is-full-screen :where(.components-modal__content) > :last-child {
2404	1994	flex: 1;
2405	1995	}
	1996	+@media (min-width: 600px) {
	1997	+ .components-modal__frame.is-full-screen {
	1998	+ margin: auto;
	1999	+ border-radius: 8px;
	2000	+ width: calc(100% - 32px);
	2001	+ height: calc(100% - 32px);
	2002	+ }
	2003	+}
	2004	+@media (min-width: 782px) {
	2005	+ .components-modal__frame.is-full-screen {
	2006	+ width: calc(100% - 80px);
	2007	+ height: calc(100% - 80px);
	2008	+ max-width: none;
	2009	+ }
	2010	+}
2406	2011
2407	2012	@keyframes components-modal__appear-animation {
2408	2013	from {
2409	2014	opacity: 0;
2410		- transform: scale(0.9);
	2015	+ transform: translateY(100%);
2411	2016	}
2412	2017	to {
2413	2018	opacity: 1;
2414		- transform: scale(1);
	2019	+ transform: translateY(0);
2415	2020	}
2416	2021	}
2417	2022	@keyframes components-modal__disappear-animation {
2418	2023	from {
2419	2024	opacity: 1;
2420		- transform: scale(1);
	2025	+ transform: translateY(0);
2421	2026	}
2422	2027	to {
2423	2028	opacity: 0;
2424		- transform: scale(0.9);
	2029	+ transform: translateY(100%);
2425	2030	}
2426	2031	}
	2032	+@media (min-width: 600px) {
	2033	+ @keyframes components-modal__appear-animation {
	2034	+ from {
	2035	+ opacity: 0;
	2036	+ transform: scale(0.9);
	2037	+ }
	2038	+ to {
	2039	+ opacity: 1;
	2040	+ transform: scale(1);
	2041	+ }
	2042	+ }
	2043	+ @keyframes components-modal__disappear-animation {
	2044	+ from {
	2045	+ opacity: 1;
	2046	+ transform: scale(1);
	2047	+ }
	2048	+ to {
	2049	+ opacity: 0;
	2050	+ transform: scale(0.9);
	2051	+ }
	2052	+ }
	2053	+}
2427	2054	.components-modal__header {
2428	2055	box-sizing: border-box;
2429	2056	border-bottom: 1px solid transparent;
2430	2057	padding: 24px;
		@@ -2440,9 +2067,9 @@
2440	2067	left: 0;
2441	2068	}
2442	2069	.components-modal__header .components-modal__header-heading {
2443	2070	font-size: 20px;
2444		- font-weight: 600;
	2071	+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2445	2072	}
2446	2073	.components-modal__header h1 {
2447	2074	line-height: 1;
2448	2075	margin: 0;
		@@ -2447,9 +2074,9 @@
2447	2074	line-height: 1;
2448	2075	margin: 0;
2449	2076	}
2450	2077	.components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
2451		- border-bottom-color: #ddd;
	2078	+ border-bottom-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2452	2079	}
2453	2080	.components-modal__header + p {
2454	2081	margin-top: 0;
2455	2082	}
		@@ -2487,72 +2114,73 @@
2487	2114	outline-offset: -2px;
2488	2115	}
2489	2116
2490	2117	.components-notice {
2491		- display: flex;
2492		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2493		- font-size: 13px;
2494		- background-color: #fff;
2495		- border-left: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
2496		- padding: 8px 12px;
2497		- align-items: center;
2498		- color: #1e1e1e;
	2118	+ --wp-components-notice-background-color: var(--wpds-color-background-surface-info-weak, #f3f9ff);
	2119	+ --wp-components-notice-border-color: var(--wpds-color-stroke-surface-info, #adc6e2);
	2120	+ --wp-components-notice-text-color: var(--wpds-color-foreground-content-info, #001b4f);
	2121	+ box-sizing: border-box;
	2122	+ display: grid;
	2123	+ grid-template-columns: 1fr auto;
	2124	+ align-items: start;
	2125	+ padding: var(--wpds-dimension-padding-md, 12px);
	2126	+ border: var(--wpds-border-width-xs, 1px) solid var(--wp-components-notice-border-color);
	2127	+ border-radius: var(--wpds-border-radius-lg, 8px);
	2128	+ background-color: var(--wp-components-notice-background-color);
	2129	+ color: var(--wp-components-notice-text-color);
	2130	+ font-family: var(--wpds-typography-font-family-body, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
	2131	+ font-size: var(--wpds-typography-font-size-md, 13px);
	2132	+ line-height: var(--wpds-typography-line-height-sm, 20px);
2499	2133	}
2500		-.components-notice.is-dismissible {
2501		- position: relative;
2502		-}
2503		-.components-notice.is-dismissible .components-notice__content {
2504		- margin-right: 25px;
2505		-}
2506	2134	.components-notice.is-success {
2507		- border-left-color: #4ab866;
2508		- background-color: rgb(238.8392857143, 248.6607142857, 241.3392857143);
	2135	+ --wp-components-notice-background-color: var(--wpds-color-background-surface-success-weak, #ebffed);
	2136	+ --wp-components-notice-border-color: var(--wpds-color-stroke-surface-success, #92d39d);
	2137	+ --wp-components-notice-text-color: var(--wpds-color-foreground-content-success, #002900);
2509	2138	}
2510	2139	.components-notice.is-warning {
2511		- border-left-color: #f0b849;
2512		- background-color: rgb(253.5913705584, 248.3324873096, 237.9086294416);
	2140	+ --wp-components-notice-background-color: var(--wpds-color-background-surface-warning-weak, #fff7e1);
	2141	+ --wp-components-notice-border-color: var(--wpds-color-stroke-surface-warning, #e1bd7c);
	2142	+ --wp-components-notice-text-color: var(--wpds-color-foreground-content-warning, #2e1900);
2513	2143	}
2514	2144	.components-notice.is-error {
2515		- border-left-color: #cc1818;
2516		- background-color: rgb(244.1052631579, 162.3947368421, 162.3947368421);
	2145	+ --wp-components-notice-background-color: var(--wpds-color-background-surface-error-weak, #fff6f5);
	2146	+ --wp-components-notice-border-color: var(--wpds-color-stroke-surface-error, #e0afa7);
	2147	+ --wp-components-notice-text-color: var(--wpds-color-foreground-content-error, #470000);
2517	2148	}
2518	2149
2519	2150	.components-notice__content {
2520		- flex-grow: 1;
2521		- margin-top: 4px;
2522		- margin-bottom: 4px;
	2151	+ grid-column: 1;
	2152	+ grid-row: 1;
	2153	+ padding-block: calc((var(--wpds-dimension-size-sm, 24px) - 1lh) / 2);
2523	2154	}
2524	2155
2525	2156	.components-notice__actions {
	2157	+ grid-column: 1;
	2158	+ grid-row: 2;
2526	2159	display: flex;
2527	2160	flex-wrap: wrap;
2528	2161	align-items: center;
2529		- gap: 12px;
2530		- margin-top: 12px;
	2162	+ gap: var(--wpds-dimension-gap-md, 12px);
	2163	+ margin-top: var(--wpds-dimension-gap-sm, 8px);
2531	2164	}
2532	2165
2533	2166	.components-notice__dismiss {
2534		- color: #757575;
2535		- align-self: flex-start;
2536		- flex-shrink: 0;
	2167	+ grid-column: 2;
	2168	+ grid-row: 1;
	2169	+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
	2170	+ margin-inline-start: var(--wpds-dimension-gap-xs, 4px);
2537	2171	}
2538	2172	.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):active, .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):focus {
2539		- color: #1e1e1e;
2540		- background-color: transparent;
	2173	+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
2541	2174	}
2542		-.components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
2543		- box-shadow: none;
2544		-}
2545	2175
2546	2176	.components-notice-list {
	2177	+ display: flex;
	2178	+ flex-direction: column;
	2179	+ gap: var(--wpds-dimension-gap-md, 12px);
2547	2180	max-width: 100vw;
2548	2181	box-sizing: border-box;
2549	2182	}
2550		-.components-notice-list .components-notice__content {
2551		- margin-top: 12px;
2552		- margin-bottom: 12px;
2553		- line-height: 2;
2554		-}
2555	2183
2556	2184	.components-panel {
2557	2185	background: #fff;
2558	2186	border: 1px solid #e0e0e0;
		@@ -2586,9 +2214,9 @@
2586	2214	flex-shrink: 0;
2587	2215	justify-content: space-between;
2588	2216	align-items: center;
2589	2217	padding: 0 16px;
2590		- border-bottom: 1px solid #ddd;
	2218	+ border-bottom: 1px solid var(--wpds-color-stroke-surface-neutral, #dbdbdb);
2591	2219	box-sizing: content-box;
2592	2220	height: 47px;
2593	2221	}
2594	2222	.components-panel__header h2 {
		@@ -2629,15 +2257,12 @@
2629	2257
2630	2258	.components-panel__body-toggle.components-button {
2631	2259	position: relative;
2632	2260	padding: 16px 48px 16px 16px;
2633		- outline: none;
2634	2261	width: 100%;
2635		- font-weight: 499;
	2262	+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2636	2263	text-align: left;
2637	2264	color: #1e1e1e;
2638		- border: none;
2639		- box-shadow: none;
2640	2265	}
2641	2266	@media not (prefers-reduced-motion) {
2642	2267	.components-panel__body-toggle.components-button {
2643	2268	transition: 0.1s background ease-in-out;
		@@ -2646,9 +2271,9 @@
2646	2271	.components-panel__body-toggle.components-button {
2647	2272	height: auto;
2648	2273	}
2649	2274	.components-panel__body-toggle.components-button:focus {
2650		- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
	2275	+ outline-offset: calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) * -1);
2651	2276	border-radius: 0;
2652	2277	}
2653	2278	.components-panel__body-toggle.components-button .components-panel__arrow {
2654	2279	position: absolute;
		@@ -2734,18 +2359,18 @@
2734	2359	.components-placeholder__error,
2735	2360	.components-placeholder__instructions,
2736	2361	.components-placeholder__label,
2737	2362	.components-placeholder__fieldset {
2738		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	2363	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2739	2364	font-size: 13px;
2740	2365	letter-spacing: initial;
2741	2366	line-height: initial;
2742	2367	text-transform: none;
2743		- font-weight: normal;
	2368	+ font-weight: 400;
2744	2369	}
2745	2370
2746	2371	.components-placeholder__label {
2747		- font-weight: 600;
	2372	+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
2748	2373	align-items: center;
2749	2374	display: flex;
2750	2375	}
2751	2376	.components-placeholder__label > svg,
		@@ -2753,15 +2378,8 @@
2753	2378	.components-placeholder__label .block-editor-block-icon {
2754	2379	margin-right: 4px;
2755	2380	fill: currentColor;
2756	2381	}
2757		-@media (forced-colors: active) {
2758		- .components-placeholder__label > svg,
2759		- .components-placeholder__label .dashicon,
2760		- .components-placeholder__label .block-editor-block-icon {
2761		- fill: CanvasText;
2762		- }
2763		-}
2764	2382	.components-placeholder__label:empty {
2765	2383	display: none;
2766	2384	}
2767	2385
		@@ -2775,9 +2393,9 @@
2775	2393	justify-content: flex-start;
2776	2394	}
2777	2395	.components-placeholder__fieldset p,
2778	2396	.components-placeholder__fieldset form p {
2779		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	2397	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2780	2398	font-size: 13px;
2781	2399	}
2782	2400
2783	2401	.components-placeholder__fieldset.is-column-layout,
		@@ -2785,23 +2403,17 @@
2785	2403	flex-direction: column;
2786	2404	}
2787	2405
2788	2406	.components-placeholder__input[type=url] {
2789		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	2407	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
2790	2408	padding: 6px 8px;
2791	2409	/* Fonts smaller than 16px causes mobile safari to zoom. */
2792	2410	font-size: 16px;
2793	2411	/* Override core line-height. To be reviewed. */
2794	2412	line-height: normal;
2795		- box-shadow: 0 0 0 transparent;
2796		- border-radius: 2px;
2797		- border: 1px solid #949494;
	2413	+ border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	2414	+ border-radius: var(--wpds-border-radius-sm, 2px);
2798	2415	}
2799		-@media not (prefers-reduced-motion) {
2800		- .components-placeholder__input[type=url] {
2801		- transition: box-shadow 0.1s linear;
2802		- }
2803		-}
2804	2416	@media (min-width: 600px) {
2805	2417	.components-placeholder__input[type=url] {
2806	2418	font-size: 13px;
2807	2419	/* Override core line-height. To be reviewed. */
		@@ -2807,12 +2419,16 @@
2807	2419	/* Override core line-height. To be reviewed. */
2808	2420	line-height: normal;
2809	2421	}
2810	2422	}
	2423	+.components-placeholder__input[type=url]:hover:not(:disabled, [aria-disabled=true]) {
	2424	+ border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
	2425	+}
2811	2426	.components-placeholder__input[type=url]:focus {
2812		- border-color: var(--wp-admin-theme-color);
2813		- box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
2814		- outline: 2px solid transparent;
	2427	+ 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)));
	2428	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
	2429	+ border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	2430	+ box-shadow: none;
2815	2431	}
2816	2432	.components-placeholder__input[type=url]::placeholder {
2817	2433	color: rgba(30, 30, 30, 0.62);
2818	2434	}
		@@ -2987,12 +2603,8 @@
2987	2603	white-space: nowrap;
2988	2604	width: 100%;
2989	2605	}
2990	2606
2991		-.components-popover__close.components-button {
2992		- z-index: 5;
2993		-}
2994		-
2995	2607	.components-popover__arrow {
2996	2608	position: absolute;
2997	2609	width: 14px;
2998	2610	height: 14px;
		@@ -3049,9 +2661,9 @@
3049	2661	.components-radio-control {
3050	2662	border: 0;
3051	2663	margin: 0;
3052	2664	padding: 0;
3053		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	2665	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3054	2666	font-size: 13px;
3055	2667	}
3056	2668
3057	2669	.components-radio-control__group-wrapper.has-help {
		@@ -3140,14 +2752,14 @@
3140	2752	content: "";
3141	2753	border-radius: 50%;
3142	2754	}
3143	2755	.components-radio-control__input[type=radio]:disabled {
3144		- background: var(--wp-components-color-gray-100, #f0f0f0);
3145		- border: 1px solid var(--wp-components-color-gray-300, #ddd);
	2756	+ background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
	2757	+ border: 1px solid var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
3146	2758	opacity: 1;
3147	2759	}
3148	2760	.components-radio-control__input[type=radio]:disabled:checked::before {
3149		- border-color: var(--wp-components-color-gray-400, #ccc);
	2761	+ border-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
3150	2762	opacity: 1;
3151	2763	}
3152	2764
3153	2765	.components-radio-control__label {
		@@ -3152,10 +2764,11 @@
3152	2764
3153	2765	.components-radio-control__label {
3154	2766	grid-column: 2;
3155	2767	grid-row: 1;
	2768	+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3156	2769	}
3157		-.components-radio-control:not(:disabled) .components-radio-control__label {
	2770	+.components-radio-control__input:not(:disabled) + .components-radio-control__label {
3158	2771	cursor: var(--wpds-cursor-control, pointer);
3159	2772	}
3160	2773	.components-radio-control__label {
3161	2774	line-height: 24px;
		@@ -3369,9 +2982,9 @@
3369	2982	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
3370	2983	}
3371	2984
3372	2985	.components-snackbar {
3373		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	2986	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3374	2987	font-size: 13px;
3375	2988	background: rgba(0, 0, 0, 0.85);
3376	2989	backdrop-filter: blur(16px) saturate(180%);
3377	2990	border-radius: 4px;
		@@ -3413,14 +3026,10 @@
3413	3026	.components-snackbar__action.components-external-link {
3414	3027	margin-left: 32px;
3415	3028	color: #fff;
3416	3029	flex-shrink: 0;
	3030	+ --focus-color: #fff;
3417	3031	}
3418		-.components-snackbar__action.components-button:focus,
3419		-.components-snackbar__action.components-external-link:focus {
3420		- box-shadow: none;
3421		- outline: 1px dotted #fff;
3422		-}
3423	3032	.components-snackbar__action.components-button:hover,
3424	3033	.components-snackbar__action.components-external-link:hover {
3425	3034	text-decoration: none;
3426	3035	color: currentColor;
		@@ -3460,17 +3069,22 @@
3460	3069	border-radius: 0;
3461	3070	height: 48px !important;
3462	3071	background: transparent;
3463	3072	border: none;
3464		- box-shadow: none;
3465	3073	cursor: var(--wpds-cursor-control, pointer);
3466		- padding: 3px 16px;
	3074	+ padding: 3px var(--wpds-dimension-padding-lg, 16px);
3467	3075	margin-left: 0;
3468		- font-weight: 400;
	3076	+ font-weight: var(--wpds-typography-font-weight-default, 400);
	3077	+ color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
3469	3078	}
	3079	+.components-tab-panel__tabs-item:disabled, .components-tab-panel__tabs-item[aria-disabled=true] {
	3080	+ color: var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d);
	3081	+}
	3082	+.components-tab-panel__tabs-item:not(:disabled, [aria-disabled=true]):is(:hover, :focus-visible) {
	3083	+ color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
	3084	+}
3470	3085	.components-tab-panel__tabs-item:focus:not(:disabled) {
3471	3086	position: relative;
3472		- box-shadow: none;
3473	3087	outline: none;
3474	3088	}
3475	3089	.components-tab-panel__tabs-item::after {
3476	3090	content: "";
		@@ -3478,19 +3092,19 @@
3478	3092	right: 0;
3479	3093	bottom: 0;
3480	3094	left: 0;
3481	3095	pointer-events: none;
3482		- background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3483		- height: calc(0 * var(--wp-admin-border-width-focus));
	3096	+ background: var(--wpds-color-stroke-interactive-neutral-strong, #6e6e6e);
	3097	+ height: calc(0 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
3484	3098	border-radius: 0;
3485	3099	}
3486	3100	@media not (prefers-reduced-motion) {
3487	3101	.components-tab-panel__tabs-item::after {
3488		- transition: all 0.1s linear;
	3102	+ transition: height 0.1s linear;
3489	3103	}
3490	3104	}
3491	3105	.components-tab-panel__tabs-item.is-active::after {
3492		- height: calc(1 * var(--wp-admin-border-width-focus));
	3106	+ height: calc(1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
3493	3107	outline: 2px solid transparent;
3494	3108	outline-offset: -1px;
3495	3109	}
3496	3110	.components-tab-panel__tabs-item::before {
		@@ -3495,33 +3109,33 @@
3495	3109	}
3496	3110	.components-tab-panel__tabs-item::before {
3497	3111	content: "";
3498	3112	position: absolute;
3499		- top: 12px;
3500		- right: 12px;
3501		- bottom: 12px;
3502		- left: 12px;
	3113	+ inset: var(--wpds-dimension-padding-md, 12px);
3503	3114	pointer-events: none;
3504		- box-shadow: 0 0 0 0 transparent;
3505		- border-radius: 2px;
	3115	+ border-radius: var(--wpds-border-radius-sm, 2px);
3506	3116	}
3507		-@media not (prefers-reduced-motion) {
3508		- .components-tab-panel__tabs-item::before {
3509		- transition: all 0.1s linear;
3510		- }
	3117	+.components-tab-panel__tabs-item:focus-visible::before {
	3118	+ 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)));
	3119	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
	3120	+ outline-offset: 0;
3511	3121	}
3512		-.components-tab-panel__tabs-item:focus-visible::before {
3513		- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3514		- outline: 2px solid transparent;
	3122	+.components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item {
	3123	+ border-radius: var(--wpds-border-radius-sm, 2px);
3515	3124	}
	3125	+.components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item::after {
	3126	+ display: none;
	3127	+}
	3128	+.components-tab-panel__tabs[aria-orientation=vertical] .components-tab-panel__tabs-item.is-active {
	3129	+ background: var(--wpds-color-background-interactive-neutral-weak-active, #ededed);
	3130	+}
3516	3131
3517	3132	.components-tab-panel__tab-content:focus {
3518		- box-shadow: none;
3519	3133	outline: none;
3520	3134	}
3521	3135	.components-tab-panel__tab-content:focus-visible {
3522		- box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3523		- outline: 2px solid transparent;
	3136	+ 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)));
	3137	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
3524	3138	outline-offset: 0;
3525	3139	}
3526	3140
3527	3141	.components-text-control__input,
		@@ -3538,40 +3152,21 @@
3538	3152	.components-text-control__input[type=email],
3539	3153	.components-text-control__input[type=month],
3540	3154	.components-text-control__input[type=number] {
3541	3155	width: 100%;
3542		- height: 32px;
	3156	+ height: 40px;
3543	3157	margin: 0;
3544		- background: var(--wp-components-color-background, #fff);
3545		- color: var(--wp-components-color-foreground, #1e1e1e);
3546		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	3158	+ background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
	3159	+ color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
	3160	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3547	3161	padding: 6px 8px;
3548	3162	/* Fonts smaller than 16px causes mobile safari to zoom. */
3549	3163	font-size: 16px;
3550	3164	/* Override core line-height. To be reviewed. */
3551	3165	line-height: normal;
3552		- box-shadow: 0 0 0 transparent;
3553		- border-radius: 2px;
3554		- border: 1px solid #949494;
	3166	+ border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	3167	+ border-radius: var(--wpds-border-radius-sm, 2px);
3555	3168	}
3556		-@media not (prefers-reduced-motion) {
3557		- .components-text-control__input,
3558		- .components-text-control__input[type=text],
3559		- .components-text-control__input[type=tel],
3560		- .components-text-control__input[type=time],
3561		- .components-text-control__input[type=url],
3562		- .components-text-control__input[type=week],
3563		- .components-text-control__input[type=password],
3564		- .components-text-control__input[type=color],
3565		- .components-text-control__input[type=date],
3566		- .components-text-control__input[type=datetime],
3567		- .components-text-control__input[type=datetime-local],
3568		- .components-text-control__input[type=email],
3569		- .components-text-control__input[type=month],
3570		- .components-text-control__input[type=number] {
3571		- transition: box-shadow 0.1s linear;
3572		- }
3573		-}
3574	3169	@media (min-width: 600px) {
3575	3170	.components-text-control__input,
3576	3171	.components-text-control__input[type=text],
3577	3172	.components-text-control__input[type=tel],
		@@ -3590,8 +3185,24 @@
3590	3185	/* Override core line-height. To be reviewed. */
3591	3186	line-height: normal;
3592	3187	}
3593	3188	}
	3189	+.components-text-control__input:hover:not(:disabled, [aria-disabled=true]),
	3190	+.components-text-control__input[type=text]:hover:not(:disabled, [aria-disabled=true]),
	3191	+.components-text-control__input[type=tel]:hover:not(:disabled, [aria-disabled=true]),
	3192	+.components-text-control__input[type=time]:hover:not(:disabled, [aria-disabled=true]),
	3193	+.components-text-control__input[type=url]:hover:not(:disabled, [aria-disabled=true]),
	3194	+.components-text-control__input[type=week]:hover:not(:disabled, [aria-disabled=true]),
	3195	+.components-text-control__input[type=password]:hover:not(:disabled, [aria-disabled=true]),
	3196	+.components-text-control__input[type=color]:hover:not(:disabled, [aria-disabled=true]),
	3197	+.components-text-control__input[type=date]:hover:not(:disabled, [aria-disabled=true]),
	3198	+.components-text-control__input[type=datetime]:hover:not(:disabled, [aria-disabled=true]),
	3199	+.components-text-control__input[type=datetime-local]:hover:not(:disabled, [aria-disabled=true]),
	3200	+.components-text-control__input[type=email]:hover:not(:disabled, [aria-disabled=true]),
	3201	+.components-text-control__input[type=month]:hover:not(:disabled, [aria-disabled=true]),
	3202	+.components-text-control__input[type=number]:hover:not(:disabled, [aria-disabled=true]) {
	3203	+ border-color: var(--wpds-color-stroke-interactive-neutral-active, #6e6e6e);
	3204	+}
3594	3205	.components-text-control__input:focus,
3595	3206	.components-text-control__input[type=text]:focus,
3596	3207	.components-text-control__input[type=tel]:focus,
3597	3208	.components-text-control__input[type=time]:focus,
		@@ -3604,11 +3215,12 @@
3604	3215	.components-text-control__input[type=datetime-local]:focus,
3605	3216	.components-text-control__input[type=email]:focus,
3606	3217	.components-text-control__input[type=month]:focus,
3607	3218	.components-text-control__input[type=number]:focus {
3608		- border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3609		- box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
3610		- outline: 2px solid transparent;
	3219	+ 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)));
	3220	+ outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
	3221	+ border-color: var(--wpds-color-stroke-interactive-neutral, #8d8d8d);
	3222	+ box-shadow: none;
3611	3223	}
3612	3224	.components-text-control__input::placeholder,
3613	3225	.components-text-control__input[type=text]::placeholder,
3614	3226	.components-text-control__input[type=tel]::placeholder,
		@@ -3638,9 +3250,10 @@
3638	3250	.components-text-control__input[type=datetime-local],
3639	3251	.components-text-control__input[type=email],
3640	3252	.components-text-control__input[type=month],
3641	3253	.components-text-control__input[type=number] {
3642		- border-color: var(--wp-components-color-gray-600, #949494);
	3254	+ padding-left: 12px;
	3255	+ padding-right: 12px;
3643	3256	}
3644	3257	.components-text-control__input::placeholder,
3645	3258	.components-text-control__input[type=text]::placeholder,
3646	3259	.components-text-control__input[type=tel]::placeholder,
		@@ -3654,28 +3267,10 @@
3654	3267	.components-text-control__input[type=datetime-local]::placeholder,
3655	3268	.components-text-control__input[type=email]::placeholder,
3656	3269	.components-text-control__input[type=month]::placeholder,
3657	3270	.components-text-control__input[type=number]::placeholder {
3658		- color: color-mix(in srgb, var(--wp-components-color-foreground, #1e1e1e), transparent 38%);
	3271	+ color: color-mix(in srgb, var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e)), transparent 38%);
3659	3272	}
3660		-.components-text-control__input.is-next-40px-default-size,
3661		-.components-text-control__input[type=text].is-next-40px-default-size,
3662		-.components-text-control__input[type=tel].is-next-40px-default-size,
3663		-.components-text-control__input[type=time].is-next-40px-default-size,
3664		-.components-text-control__input[type=url].is-next-40px-default-size,
3665		-.components-text-control__input[type=week].is-next-40px-default-size,
3666		-.components-text-control__input[type=password].is-next-40px-default-size,
3667		-.components-text-control__input[type=color].is-next-40px-default-size,
3668		-.components-text-control__input[type=date].is-next-40px-default-size,
3669		-.components-text-control__input[type=datetime].is-next-40px-default-size,
3670		-.components-text-control__input[type=datetime-local].is-next-40px-default-size,
3671		-.components-text-control__input[type=email].is-next-40px-default-size,
3672		-.components-text-control__input[type=month].is-next-40px-default-size,
3673		-.components-text-control__input[type=number].is-next-40px-default-size {
3674		- height: 40px;
3675		- padding-left: 12px;
3676		- padding-right: 12px;
3677		-}
3678	3273
3679	3274	.components-text-control__input[type=email],
3680	3275	.components-text-control__input[type=url] {
3681	3276	/* rtl:ignore */
		@@ -3687,9 +3282,9 @@
3687	3282	color: #757575;
3688	3283	}
3689	3284	.components-tip svg {
3690	3285	align-self: center;
3691		- fill: #f0b849;
	3286	+ color: #f0b849;
3692	3287	flex-shrink: 0;
3693	3288	margin-right: 16px;
3694	3289	}
3695	3290	.components-tip p {
		@@ -3697,8 +3292,9 @@
3697	3292	}
3698	3293
3699	3294	.components-toggle-control__label {
3700	3295	line-height: 16px;
	3296	+ color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
3701	3297	}
3702	3298	.components-toggle-control__label:not(.is-disabled) {
3703	3299	cursor: var(--wpds-cursor-control, pointer);
3704	3300	}
		@@ -3709,9 +3305,9 @@
3709	3305	}
3710	3306
3711	3307	.components-accessible-toolbar {
3712	3308	display: inline-flex;
3713		- border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
	3309	+ border: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3714	3310	border-radius: 2px;
3715	3311	flex-shrink: 0;
3716	3312	}
3717	3313	.components-accessible-toolbar > .components-toolbar-group:last-child {
		@@ -3776,9 +3372,9 @@
3776	3372	background: transparent;
3777	3373	}
3778	3374	.components-accessible-toolbar .components-button.is-pressed::before,
3779	3375	.components-toolbar .components-button.is-pressed::before {
3780		- background: var(--wp-components-color-foreground, #1e1e1e);
	3376	+ background: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
3781	3377	}
3782	3378	.components-accessible-toolbar .components-button:focus::before,
3783	3379	.components-toolbar .components-button:focus::before {
3784	3380	box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
		@@ -3806,11 +3402,11 @@
3806	3402	padding: 5px 10px 5px 0;
3807	3403	}
3808	3404	.components-toolbar__control.components-button[data-subscript]::after {
3809	3405	content: attr(data-subscript);
3810		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	3406	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3811	3407	font-size: 13px;
3812		- font-weight: 600;
	3408	+ font-weight: var(--wpds-typography-font-weight-emphasis, 600);
3813	3409	line-height: 12px;
3814	3410	position: absolute;
3815	3411	right: 8px;
3816	3412	bottom: 10px;
		@@ -3820,10 +3416,10 @@
3820	3416	}
3821	3417
3822	3418	.components-toolbar-group {
3823	3419	min-height: 48px;
3824		- border-right: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3825		- background-color: var(--wp-components-color-background, #fff);
	3420	+ border-right: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
	3421	+ background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
3826	3422	display: inline-flex;
3827	3423	flex-shrink: 0;
3828	3424	flex-wrap: wrap;
3829	3425	padding-left: 6px;
		@@ -3844,9 +3440,9 @@
3844	3440	padding-right: 6px;
3845	3441	}
3846	3442	.components-toolbar-group .components-button.components-button svg,
3847	3443	.components-toolbar-group .components-button.has-icon.has-icon svg {
3848		- min-width: 24px;
	3444	+ min-width: var(--wpds-dimension-size-sm, 24px);
3849	3445	}
3850	3446	.components-toolbar-group .components-button.components-button::before,
3851	3447	.components-toolbar-group .components-button.has-icon.has-icon::before {
3852	3448	left: 2px;
		@@ -3855,10 +3451,10 @@
3855	3451
3856	3452	.components-toolbar {
3857	3453	min-height: 48px;
3858	3454	margin: 0;
3859		- border: 1px solid var(--wp-components-color-foreground, #1e1e1e);
3860		- background-color: var(--wp-components-color-background, #fff);
	3455	+ border: 1px solid var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
	3456	+ background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
3861	3457	display: inline-flex;
3862	3458	flex-shrink: 0;
3863	3459	flex-wrap: wrap;
3864	3460	}
		@@ -3879,9 +3475,9 @@
3879	3475	div.components-toolbar > div + div.has-left-divider::before {
3880	3476	display: inline-block;
3881	3477	content: "";
3882	3478	box-sizing: content-box;
3883		- background-color: #ddd;
	3479	+ background-color: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
3884	3480	position: absolute;
3885	3481	top: 8px;
3886	3482	left: -3px;
3887	3483	width: 1px;
		@@ -3889,10 +3485,10 @@
3889	3485	}
3890	3486
3891	3487	.components-tooltip {
3892	3488	background: #000;
3893		- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3894		- border-radius: 2px;
	3489	+ font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	3490	+ border-radius: var(--wpds-border-radius-md, 4px);
3895	3491	color: #f0f0f0;
3896	3492	text-align: center;
3897	3493	line-height: 1.4;
3898	3494	font-size: 12px;
		@@ -3904,36 +3500,19 @@
3904	3500	.components-tooltip__shortcut {
3905	3501	margin-left: 8px;
3906	3502	}
3907	3503
3908		-.components-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
3909		- --wp-components-color-accent: #cc1818;
3910		- border-color: #cc1818;
	3504	+.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 {
	3505	+ --focus-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3911	3506	}
3912		-.components-validated-control :is(textarea, input[type=text]):invalid[data-validity-visible] {
3913		- --wp-admin-theme-color: #cc1818;
3914		- --wp-components-color-accent: #cc1818;
3915		- border-color: #cc1818;
	3507	+
	3508	+.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 {
	3509	+ border-color: var(--wpds-color-stroke-interactive-error, #cc1818);
3916	3510	}
3917		-.components-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])) {
3918		- --wp-components-color-accent: #cc1818;
3919		-}
3920	3511
3921	3512	.components-validated-control__wrapper-with-error-delegate {
3922	3513	position: relative;
3923	3514	}
3924		-.components-validated-control__wrapper-with-error-delegate:has(select:invalid[data-validity-visible]) .components-input-control__backdrop {
3925		- --wp-components-color-accent: #cc1818;
3926		- border-color: #cc1818;
3927		-}
3928		-.components-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid[data-validity-visible]) {
3929		- --wp-components-color-accent: #cc1818;
3930		-}
3931		-.components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
3932		- --wp-components-color-accent: #cc1818;
3933		- border-color: #cc1818;
3934		-}
3935		-
3936	3515	.components-validated-control__error-delegate {
3937	3516	position: absolute;
3938	3517	top: 0;
3939	3518	height: 100%;
		@@ -3941,46 +3520,8 @@
3941	3520	opacity: 0;
3942	3521	pointer-events: none;
3943	3522	}
3944	3523
3945		-.components-validated-control__indicator {
3946		- display: flex;
3947		- align-items: flex-start;
3948		- gap: 4px;
3949		- margin: 8px 0 0;
3950		- font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
3951		- font-size: 12px;
3952		- line-height: 16px;
3953		- color: var(--wp-components-color-gray-700, #757575);
3954		- animation: components-validated-control__indicator-jump 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
3955		-}
3956		-.components-validated-control__indicator.is-invalid {
3957		- color: #cc1818;
3958		-}
3959		-.components-validated-control__indicator.is-valid {
3960		- color: color-mix(in srgb, #000 30%, #4ab866);
3961		-}
3962		-
3963		-.components-validated-control__indicator-icon {
3964		- flex-shrink: 0;
3965		-}
3966		-
3967		-.components-validated-control__indicator-spinner {
3968		- margin: 2px;
3969		- width: 12px;
3970		- height: 12px;
3971		-}
3972		-
3973		-@keyframes components-validated-control__indicator-jump {
3974		- 0% {
3975		- transform: translateY(-4px);
3976		- opacity: 0;
3977		- }
3978		- 100% {
3979		- transform: translateY(0);
3980		- opacity: 1;
3981		- }
3982		-}
3983	3524	:root {
3984	3525	--wp-admin-theme-color: #3858e9;
3985	3526	--wp-admin-theme-color--rgb: 56, 88, 233;
3986	3527	--wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);