@wordpress/ui 0.5.1-next.v.0 → 0.6.0

package/build-module/button/button.mjs

@@ -6,316 +6,31 @@ import { forwardRef, useEffect } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 
 // packages/ui/src/button/style.module.css
-var css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
-
-@layer wp-ui-components {
-	.style-module__button__l7D8M,
-	.style-module__is-unstyled__q7snL {
-		appearance: none;
-		padding: 0;
-	}
-
-	.style-module__button__l7D8M {
-		/* Internal variables */
-		--wp-ui-button-font-weight: 499;
-
-		--wp-ui-button-background-color: var(--wpds-color-bg-interactive-brand-strong);
-		--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-brand-strong-active);
-		--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-strong-disabled);
-		--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-brand-strong);
-		--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-brand-strong-active);
-		--wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-strong-disabled);
-		--wp-ui-button-padding-inline: calc(3 * var(--wpds-dimension-base)); /* TODO: Create new interactive padding tokens */
-		--wp-ui-button-height: 40px;
-		--wp-ui-button-aspect-ratio: auto; /* Useful for overrides such as icon buttons */
-		--wp-ui-button-font-size: var(--wpds-font-size-md);
-
-		/* by default, borders have the same color as the background */
-		--wp-ui-button-border-color: var(--wp-ui-button-background-color);
-		--wp-ui-button-border-color-active: var(--wp-ui-button-background-color-active);
-		--wp-ui-button-border-color-disabled: var(--wp-ui-button-background-color-disabled);
-
-		/* Styles */
-		position: relative;
-		display: inline-flex;
-		justify-content: center;
-		align-items: center;
-		gap: calc(2 * var(--wpds-dimension-base)); /* TODO: Consider new interactive/control gap tokens */
-		aspect-ratio: var(--wp-ui-button-aspect-ratio);
-		height: var(--wp-ui-button-height);
-		padding-inline: var(--wp-ui-button-padding-inline);
-		border-style: solid;
-		border-width: 1px;
-		border-color: var(--wp-ui-button-border-color);
-		border-radius: var(--wpds-border-radius-surface-sm);
-		background-color: var(--wp-ui-button-background-color);
-		background-clip: padding-box;
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wp-ui-button-font-size);
-		font-weight: var(--wp-ui-button-font-weight);
-		line-height: var(--wpds-font-line-height-sm);
-		text-decoration: none;
-		color: var(--wp-ui-button-foreground-color);
-
-		@media not ( prefers-reduced-motion ) {
-			transition: color 0.1s ease-out;
-
-			* {
-				transition: opacity 0.1s ease-out;
-			}
-		}
-
-		/* Use pointer cursor for buttons that are links */
-		&[href] {
-			cursor: pointer;
-		}
-
-		/* Make sure that links rendered as children of \`Button\` use button styles */
-		*[href] {
-			color: inherit;
-			text-decoration: inherit;
-		}
-
-		/* States */
-		&:not([aria-disabled="true"]):is(:hover, :active, :focus) {
-			/* hover/active/focus states apply when the button is not disabled. A non
-			disabled, loading button will have hover/active/focus styles */
-			--wp-ui-button-background-color: var(--wp-ui-button-background-color-active);
-			--wp-ui-button-foreground-color: var(--wp-ui-button-foreground-color-active);
-			--wp-ui-button-border-color: var(--wp-ui-button-border-color-active);
-		}
-
-		&[aria-disabled="true"]:not(.style-module__is-loading__kUtC8) {
-			/* A loading button, even when disabled, won't "look" disabled */
-			--wp-ui-button-background-color: var(--wp-ui-button-background-color-disabled);
-			--wp-ui-button-foreground-color: var(--wp-ui-button-foreground-color-disabled);
-			--wp-ui-button-border-color: var(--wp-ui-button-border-color-disabled);
-
-			@media ( forced-colors: active ) {
-				border-color: GrayText;
-				color: GrayText;
-			}
-		}
-
-		/* Loading spinner \u2014 not animated and hidden unless in loading state */
-		&::before {
-			content: "";
-			position: absolute;
-			top: 50%;
-			inset-inline-start: 50%;
-			transform: translate(-50%, -50%);
-
-			display: block;
-			box-sizing: border-box;
-			height: var(--wp-ui-button-font-size);
-			aspect-ratio: 1;
-
-			border: var(--wpds-border-width-interactive-focus) solid;
-			border-block-start-color: var(--wp-ui-button-foreground-color);
-			border-inline-end-color: var(--wp-ui-button-foreground-color);
-			border-block-end-color: transparent;
-			border-inline-start-color: transparent;
-			border-radius: 50%;
-
-			pointer-events: none;
-			opacity: 0;
-
-			@media not ( prefers-reduced-motion ) {
-				transition: opacity 0.1s ease-out;
-			}
-		}
-	}
-
-	.style-module__is-small__kIIFR {
-		--wp-ui-button-padding-inline: calc(2 * var(--wpds-dimension-base)); /* TODO: Create new interactive padding tokens */
-		--wp-ui-button-height: 24px;
-	}
-
-	/* Variants (\`tone\` + \`variant\`) overrides compared to default styles */
-
-	/* All outline buttons have a border */
-	.style-module__is-brand__3UYMl {
-		/* no need to redefine variables for .is-brand.is-solid as it's the default variant */
-
-		/* Outline and minimal buttons use the same foreground color */
-		&.style-module__is-outline__YtWne,
-		&.style-module__is-minimal__rQYZo {
-			--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-brand);
-			--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-brand-active);
-			--wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-disabled);
-		}
-
-		&.style-module__is-outline__YtWne {
-			--wp-ui-button-background-color: var(--wpds-color-bg-interactive-brand-weak);
-			--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-brand-weak-active);
-			--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-weak-disabled);
-			--wp-ui-button-border-color: var(--wpds-color-stroke-interactive-brand);
-			--wp-ui-button-border-color-active: var(--wpds-color-stroke-interactive-brand-active);
-			--wp-ui-button-border-color-disabled: var(--wpds-color-stroke-interactive-neutral-disabled);
-		}
-
-		&.style-module__is-minimal__rQYZo {
-			--wp-ui-button-background-color: var(--wpds-color-bg-interactive-brand-weak);
-			--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-brand-weak-active);
-			--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-weak-disabled);
-		}
-	}
-
-	.style-module__is-neutral__5yKo- {
-		&.style-module__is-solid__tQszW {
-			--wp-ui-button-background-color: var(--wpds-color-bg-interactive-neutral-strong);
-			--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-neutral-strong-active);
-			--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-strong-disabled);
-			--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-neutral-strong);
-			--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-neutral-strong-active);
-			--wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-strong-disabled);
-		}
-
-		/* Outline and minimal buttons use the same foreground color */
-		&.style-module__is-outline__YtWne,
-		&.style-module__is-minimal__rQYZo {
-			--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-neutral);
-			--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-neutral-active);
-			--wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-disabled);
-		}
-
-		&.style-module__is-outline__YtWne {
-			--wp-ui-button-background-color: var(--wpds-color-bg-interactive-neutral-weak);
-			--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-neutral-weak-active);
-			--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-weak-disabled);
-			--wp-ui-button-border-color: var(--wpds-color-stroke-interactive-neutral);
-			--wp-ui-button-border-color-active: var(--wpds-color-stroke-interactive-neutral-active);
-			--wp-ui-button-border-color-disabled: var(--wpds-color-stroke-interactive-neutral-disabled);
-		}
-
-		&.style-module__is-minimal__rQYZo {
-			--wp-ui-button-background-color: var(--wpds-color-bg-interactive-neutral-weak);
-			--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-neutral-weak-active);
-			--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-weak-disabled);
-		}
-	}
-
-	.style-module__is-unstyled__q7snL {
-		border: none;
-		background: none;
-	}
-
-	.style-module__is-compact__z1nPG {
-		--wp-ui-button-height: 32px;
-	}
-
-	.style-module__is-loading__kUtC8 {
-		color: transparent;
-
-		* {
-			opacity: 0;
-		}
-
-		&::before {
-			transition-delay: 0.05s;
-			opacity: 1;
-
-			@media not ( prefers-reduced-motion ) {
-				animation: style-module__loading-animation__Wh1T2 1s linear infinite;
-			}
-		}
-	}
-
-	[aria-pressed="true"].style-module__is-minimal__rQYZo.style-module__is-neutral__5yKo- {
-		--wp-ui-button-background-color: var(--wpds-color-bg-interactive-neutral-strong);
-		--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-neutral-strong);
-		--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-neutral-strong);
-		--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-neutral-strong);
-	}
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='e89bb0a0ac']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "e89bb0a0ac");
+  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._97b0fc33c028be1a__button,.abbb272e2ce49bd6__is-unstyled{appearance:none;padding:0}._97b0fc33c028be1a__button{--wp-ui-button-font-weight:499;--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled);--wp-ui-button-padding-inline:calc(var(--wpds-dimension-base)*3);--wp-ui-button-height:40px;--wp-ui-button-aspect-ratio:auto;--wp-ui-button-font-size:var(--wpds-font-size-md);--wp-ui-button-border-color:var(--wp-ui-button-background-color);--wp-ui-button-border-color-active:var(--wp-ui-button-background-color-active);--wp-ui-button-border-color-disabled:var(--wp-ui-button-background-color-disabled);align-items:center;aspect-ratio:var(--wp-ui-button-aspect-ratio);background-clip:padding-box;background-color:var(--wp-ui-button-background-color);border-color:var(--wp-ui-button-border-color);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:1px;color:var(--wp-ui-button-foreground-color);display:inline-flex;font-family:var(--wpds-font-family-body);font-size:var(--wp-ui-button-font-size);font-weight:var(--wp-ui-button-font-weight);gap:calc(var(--wpds-dimension-base)*2);height:var(--wp-ui-button-height);justify-content:center;line-height:var(--wpds-font-line-height-sm);padding-inline:var(--wp-ui-button-padding-inline);position:relative;text-decoration:none;@media not (prefers-reduced-motion){transition:color .1s ease-out;*{transition:opacity .1s ease-out}}&[href]{cursor:pointer}[href]{color:inherit;text-decoration:inherit}&:not([aria-disabled=true]):is(:hover,:active,:focus){--wp-ui-button-background-color:var(--wp-ui-button-background-color-active);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-active);--wp-ui-button-border-color:var(--wp-ui-button-border-color-active)}&[aria-disabled=true]:not(._914b42f315c0e580__is-loading){--wp-ui-button-background-color:var(--wp-ui-button-background-color-disabled);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-disabled);--wp-ui-button-border-color:var(--wp-ui-button-border-color-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&:before{aspect-ratio:1;border:var(--wpds-border-width-focus) solid;border-block-end-color:#0000;border-block-start-color:var(--wp-ui-button-foreground-color);border-inline-end-color:var(--wp-ui-button-foreground-color);border-inline-start-color:#0000;border-radius:50%;box-sizing:border-box;content:"";display:block;height:var(--wp-ui-button-font-size);inset-inline-start:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);@media not (prefers-reduced-motion){transition:opacity .1s ease-out}}}._908205475f9f2a92__is-small{--wp-ui-button-padding-inline:calc(var(--wpds-dimension-base)*2);--wp-ui-button-height:24px}.dd460c965226cc77__is-brand{&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-brand);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-brand-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.e722a8f96726aa99__is-neutral{&.b50b3358c5fb4d0b__is-solid{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled)}&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-neutral);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-neutral-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.abbb272e2ce49bd6__is-unstyled{background:none;border:none}.cf59cf1b69629838__is-compact{--wp-ui-button-height:32px}._914b42f315c0e580__is-loading{color:#0000;*{opacity:0}&:before{opacity:1;transition-delay:.05s;@media not (prefers-reduced-motion){animation:_5a1d53da6f830c8d__loading-animation 1s linear infinite}}}[aria-pressed=true].ad0619a3217c6a5b__is-minimal.e722a8f96726aa99__is-neutral{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong)}}@keyframes _5a1d53da6f830c8d__loading-animation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}'));
+  document.head.appendChild(style);
 }
-
-@keyframes style-module__loading-animation__Wh1T2 {
-	0% {
-		transform: translate(-50%, -50%) rotate(0deg);
-	}
-
-	100% {
-		transform: translate(-50%, -50%) rotate(360deg);
-	}
-}
-`;
-document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
-var style_default = {
-  "button": "style-module__button__l7D8M",
-  "is-unstyled": "style-module__is-unstyled__q7snL",
-  "is-loading": "style-module__is-loading__kUtC8",
-  "is-small": "style-module__is-small__kIIFR",
-  "is-brand": "style-module__is-brand__3UYMl",
-  "is-outline": "style-module__is-outline__YtWne",
-  "is-minimal": "style-module__is-minimal__rQYZo",
-  "is-neutral": "style-module__is-neutral__5yKo-",
-  "is-solid": "style-module__is-solid__tQszW",
-  "is-compact": "style-module__is-compact__z1nPG",
-  "loading-animation": "style-module__loading-animation__Wh1T2"
-};
+var style_default = { "button": "_97b0fc33c028be1a__button", "is-unstyled": "abbb272e2ce49bd6__is-unstyled", "is-loading": "_914b42f315c0e580__is-loading", "is-small": "_908205475f9f2a92__is-small", "is-brand": "dd460c965226cc77__is-brand", "is-outline": "_62d5a778b7b258ee__is-outline", "is-minimal": "ad0619a3217c6a5b__is-minimal", "is-neutral": "e722a8f96726aa99__is-neutral", "is-solid": "b50b3358c5fb4d0b__is-solid", "is-compact": "cf59cf1b69629838__is-compact", "loading-animation": "_5a1d53da6f830c8d__loading-animation" };
 
 // packages/ui/src/utils/css/resets.module.css
-var css2 = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
-
-@layer wp-ui-utilities {
-	.resets-module__box-sizing__M2zT5 {
-		box-sizing: border-box;
-
-		*,
-		*::before,
-		*::after {
-			box-sizing: inherit;
-		}
-	}
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='671ebfc62d']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "671ebfc62d");
+  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}"));
+  document.head.appendChild(style);
 }
-`;
-document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css2));
-var resets_default = {
-  "box-sizing": "resets-module__box-sizing__M2zT5"
-};
+var resets_default = { "box-sizing": "_336cd3e4e743482f__box-sizing" };
 
 // packages/ui/src/utils/css/focus.module.css
-var css3 = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
-
-@layer wp-ui-utilities {
-	.focus-module__outset-ring--focus__COii5,
-	.focus-module__outset-ring--focus-except-active__4lsr3,
-	.focus-module__outset-ring--focus-visible__0FQby,
-	.focus-module__outset-ring--focus-within__zYPfw,
-	.focus-module__outset-ring--focus-within-except-active__lw0E3,
-	.focus-module__outset-ring--focus-within-visible__xcs-5 {
-		@media not ( prefers-reduced-motion ) {
-			transition: outline 0.1s ease-out;
-		}
-
-		/* Outline width must be kept at 0 even with a transparent color,
-		or else the outline will be visible in forced-colors mode. */
-		outline-width: 0;
-		outline-style: solid;
-		outline-color: transparent;
-		outline-offset: 1px;
-	}
-
-	.focus-module__outset-ring--focus__COii5:focus,
-	.focus-module__outset-ring--focus-except-active__4lsr3:focus:not(:active),
-	.focus-module__outset-ring--focus-visible__0FQby:focus-visible,
-	.focus-module__outset-ring--focus-within__zYPfw:focus-within,
-	.focus-module__outset-ring--focus-within-except-active__lw0E3:focus-within:not(:has(:active)),
-	.focus-module__outset-ring--focus-within-visible__xcs-5:focus-within:has(:focus-visible) {
-		outline-width: var(--wpds-border-width-interactive-focus);
-		outline-color: var(--wpds-color-stroke-focus-brand);
-	}
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='28ad59e2e3']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "28ad59e2e3");
+  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._08e8a2e44959f892__outset-ring--focus,._970d04df7376df67__outset-ring--focus-within-except-active,.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible,.cd83dfc2126a0846__outset-ring--focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active{@media not (prefers-reduced-motion){transition:outline .1s ease-out}outline-color:#0000;outline-offset:1px;outline-style:solid;outline-width:0}._08e8a2e44959f892__outset-ring--focus:focus,._970d04df7376df67__outset-ring--focus-within-except-active:focus-within:not(:has(:active)),.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible:focus-within:has(:focus-visible),.cd83dfc2126a0846__outset-ring--focus-within:focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible:focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active:focus:not(:active){outline-color:var(--wpds-color-stroke-focus-brand);outline-width:var(--wpds-border-width-focus)}}"));
+  document.head.appendChild(style);
 }
-`;
-document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css3));
-var focus_default = {
-  "outset-ring--focus": "focus-module__outset-ring--focus__COii5",
-  "outset-ring--focus-except-active": "focus-module__outset-ring--focus-except-active__4lsr3",
-  "outset-ring--focus-visible": "focus-module__outset-ring--focus-visible__0FQby",
-  "outset-ring--focus-within": "focus-module__outset-ring--focus-within__zYPfw",
-  "outset-ring--focus-within-except-active": "focus-module__outset-ring--focus-within-except-active__lw0E3",
-  "outset-ring--focus-within-visible": "focus-module__outset-ring--focus-within-visible__xcs-5"
-};
+var focus_default = { "outset-ring--focus": "_08e8a2e44959f892__outset-ring--focus", "outset-ring--focus-except-active": "e25b2bdd7aa21721__outset-ring--focus-except-active", "outset-ring--focus-visible": "d0541bc9dd9dc7b6__outset-ring--focus-visible", "outset-ring--focus-within": "cd83dfc2126a0846__outset-ring--focus-within", "outset-ring--focus-within-except-active": "_970d04df7376df67__outset-ring--focus-within-except-active", "outset-ring--focus-within-visible": "c5cb3ee4bddaa8e4__outset-ring--focus-within-visible" };
 
 // packages/ui/src/button/button.tsx
 import { jsx } from "react/jsx-runtime";

package/build-module/button/button.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/button/button.tsx", "../../src/button/style.module.css", "../../src/utils/css/resets.module.css", "../../src/utils/css/focus.module.css"],
-  "sourcesContent": ["import { Button as _Button } from '@base-ui/react/button';\nimport clsx from 'clsx';\nimport { speak } from '@wordpress/a11y';\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { type ButtonProps } from './types';\nimport styles from './style.module.css';\nimport resetStyles from '../utils/css/resets.module.css';\nimport focusStyles from '../utils/css/focus.module.css';\n\nexport const Button = forwardRef< HTMLButtonElement, ButtonProps >(\n\tfunction Button(\n\t\t{\n\t\t\ttone = 'brand',\n\t\t\tvariant = 'solid',\n\t\t\tsize = 'default',\n\t\t\tclassName,\n\t\t\tfocusableWhenDisabled = true,\n\t\t\tdisabled,\n\t\t\tloading,\n\t\t\tloadingAnnouncement = __( 'Loading' ),\n\t\t\tchildren,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) {\n\t\tconst mergedClassName = clsx(\n\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\tfocusStyles[ 'outset-ring--focus-except-active' ],\n\t\t\tvariant !== 'unstyled' && styles.button,\n\t\t\tstyles[ `is-${ tone }` ],\n\t\t\tstyles[ `is-${ variant }` ],\n\t\t\tstyles[ `is-${ size }` ],\n\t\t\tloading && styles[ 'is-loading' ],\n\t\t\tclassName\n\t\t);\n\n\t\t// Announce loading state to assistive technology\n\t\tuseEffect( () => {\n\t\t\tif ( loading && loadingAnnouncement ) {\n\t\t\t\tspeak( loadingAnnouncement );\n\t\t\t}\n\t\t}, [ loading, loadingAnnouncement ] );\n\n\t\treturn (\n\t\t\t<_Button\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ mergedClassName }\n\t\t\t\tfocusableWhenDisabled={ focusableWhenDisabled }\n\t\t\t\tdisabled={ disabled ?? loading }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</_Button>\n\t\t);\n\t}\n);\n", "const css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;\n\n@layer wp-ui-components {\n\t.style-module__button__l7D8M,\n\t.style-module__is-unstyled__q7snL {\n\t\tappearance: none;\n\t\tpadding: 0;\n\t}\n\n\t.style-module__button__l7D8M {\n\t\t/* Internal variables */\n\t\t--wp-ui-button-font-weight: 499;\n\n\t\t--wp-ui-button-background-color: var(--wpds-color-bg-interactive-brand-strong);\n\t\t--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-brand-strong-active);\n\t\t--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-strong-disabled);\n\t\t--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-brand-strong);\n\t\t--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-brand-strong-active);\n\t\t--wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-strong-disabled);\n\t\t--wp-ui-button-padding-inline: calc(3 * var(--wpds-dimension-base)); /* TODO: Create new interactive padding tokens */\n\t\t--wp-ui-button-height: 40px;\n\t\t--wp-ui-button-aspect-ratio: auto; /* Useful for overrides such as icon buttons */\n\t\t--wp-ui-button-font-size: var(--wpds-font-size-md);\n\n\t\t/* by default, borders have the same color as the background */\n\t\t--wp-ui-button-border-color: var(--wp-ui-button-background-color);\n\t\t--wp-ui-button-border-color-active: var(--wp-ui-button-background-color-active);\n\t\t--wp-ui-button-border-color-disabled: var(--wp-ui-button-background-color-disabled);\n\n\t\t/* Styles */\n\t\tposition: relative;\n\t\tdisplay: inline-flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tgap: calc(2 * var(--wpds-dimension-base)); /* TODO: Consider new interactive/control gap tokens */\n\t\taspect-ratio: var(--wp-ui-button-aspect-ratio);\n\t\theight: var(--wp-ui-button-height);\n\t\tpadding-inline: var(--wp-ui-button-padding-inline);\n\t\tborder-style: solid;\n\t\tborder-width: 1px;\n\t\tborder-color: var(--wp-ui-button-border-color);\n\t\tborder-radius: var(--wpds-border-radius-surface-sm);\n\t\tbackground-color: var(--wp-ui-button-background-color);\n\t\tbackground-clip: padding-box;\n\t\tfont-family: var(--wpds-font-family-body);\n\t\tfont-size: var(--wp-ui-button-font-size);\n\t\tfont-weight: var(--wp-ui-button-font-weight);\n\t\tline-height: var(--wpds-font-line-height-sm);\n\t\ttext-decoration: none;\n\t\tcolor: var(--wp-ui-button-foreground-color);\n\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\ttransition: color 0.1s ease-out;\n\n\t\t\t* {\n\t\t\t\ttransition: opacity 0.1s ease-out;\n\t\t\t}\n\t\t}\n\n\t\t/* Use pointer cursor for buttons that are links */\n\t\t&[href] {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t/* Make sure that links rendered as children of \\`Button\\` use button styles */\n\t\t*[href] {\n\t\t\tcolor: inherit;\n\t\t\ttext-decoration: inherit;\n\t\t}\n\n\t\t/* States */\n\t\t&:not([aria-disabled=\"true\"]):is(:hover, :active, :focus) {\n\t\t\t/* hover/active/focus states apply when the button is not disabled. A non\n\t\t\tdisabled, loading button will have hover/active/focus styles */\n\t\t\t--wp-ui-button-background-color: var(--wp-ui-button-background-color-active);\n\t\t\t--wp-ui-button-foreground-color: var(--wp-ui-button-foreground-color-active);\n\t\t\t--wp-ui-button-border-color: var(--wp-ui-button-border-color-active);\n\t\t}\n\n\t\t&[aria-disabled=\"true\"]:not(.style-module__is-loading__kUtC8) {\n\t\t\t/* A loading button, even when disabled, won't \"look\" disabled */\n\t\t\t--wp-ui-button-background-color: var(--wp-ui-button-background-color-disabled);\n\t\t\t--wp-ui-button-foreground-color: var(--wp-ui-button-foreground-color-disabled);\n\t\t\t--wp-ui-button-border-color: var(--wp-ui-button-border-color-disabled);\n\n\t\t\t@media ( forced-colors: active ) {\n\t\t\t\tborder-color: GrayText;\n\t\t\t\tcolor: GrayText;\n\t\t\t}\n\t\t}\n\n\t\t/* Loading spinner \u2014 not animated and hidden unless in loading state */\n\t\t&::before {\n\t\t\tcontent: \"\";\n\t\t\tposition: absolute;\n\t\t\ttop: 50%;\n\t\t\tinset-inline-start: 50%;\n\t\t\ttransform: translate(-50%, -50%);\n\n\t\t\tdisplay: block;\n\t\t\tbox-sizing: border-box;\n\t\t\theight: var(--wp-ui-button-font-size);\n\t\t\taspect-ratio: 1;\n\n\t\t\tborder: var(--wpds-border-width-interactive-focus) solid;\n\t\t\tborder-block-start-color: var(--wp-ui-button-foreground-color);\n\t\t\tborder-inline-end-color: var(--wp-ui-button-foreground-color);\n\t\t\tborder-block-end-color: transparent;\n\t\t\tborder-inline-start-color: transparent;\n\t\t\tborder-radius: 50%;\n\n\t\t\tpointer-events: none;\n\t\t\topacity: 0;\n\n\t\t\t@media not ( prefers-reduced-motion ) {\n\t\t\t\ttransition: opacity 0.1s ease-out;\n\t\t\t}\n\t\t}\n\t}\n\n\t.style-module__is-small__kIIFR {\n\t\t--wp-ui-button-padding-inline: calc(2 * var(--wpds-dimension-base)); /* TODO: Create new interactive padding tokens */\n\t\t--wp-ui-button-height: 24px;\n\t}\n\n\t/* Variants (\\`tone\\` + \\`variant\\`) overrides compared to default styles */\n\n\t/* All outline buttons have a border */\n\t.style-module__is-brand__3UYMl {\n\t\t/* no need to redefine variables for .is-brand.is-solid as it's the default variant */\n\n\t\t/* Outline and minimal buttons use the same foreground color */\n\t\t&.style-module__is-outline__YtWne,\n\t\t&.style-module__is-minimal__rQYZo {\n\t\t\t--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-brand);\n\t\t\t--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-brand-active);\n\t\t\t--wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-disabled);\n\t\t}\n\n\t\t&.style-module__is-outline__YtWne {\n\t\t\t--wp-ui-button-background-color: var(--wpds-color-bg-interactive-brand-weak);\n\t\t\t--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-brand-weak-active);\n\t\t\t--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-weak-disabled);\n\t\t\t--wp-ui-button-border-color: var(--wpds-color-stroke-interactive-brand);\n\t\t\t--wp-ui-button-border-color-active: var(--wpds-color-stroke-interactive-brand-active);\n\t\t\t--wp-ui-button-border-color-disabled: var(--wpds-color-stroke-interactive-neutral-disabled);\n\t\t}\n\n\t\t&.style-module__is-minimal__rQYZo {\n\t\t\t--wp-ui-button-background-color: var(--wpds-color-bg-interactive-brand-weak);\n\t\t\t--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-brand-weak-active);\n\t\t\t--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-weak-disabled);\n\t\t}\n\t}\n\n\t.style-module__is-neutral__5yKo- {\n\t\t&.style-module__is-solid__tQszW {\n\t\t\t--wp-ui-button-background-color: var(--wpds-color-bg-interactive-neutral-strong);\n\t\t\t--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-neutral-strong-active);\n\t\t\t--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-strong-disabled);\n\t\t\t--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-neutral-strong);\n\t\t\t--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-neutral-strong-active);\n\t\t\t--wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-strong-disabled);\n\t\t}\n\n\t\t/* Outline and minimal buttons use the same foreground color */\n\t\t&.style-module__is-outline__YtWne,\n\t\t&.style-module__is-minimal__rQYZo {\n\t\t\t--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-neutral);\n\t\t\t--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-neutral-active);\n\t\t\t--wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-disabled);\n\t\t}\n\n\t\t&.style-module__is-outline__YtWne {\n\t\t\t--wp-ui-button-background-color: var(--wpds-color-bg-interactive-neutral-weak);\n\t\t\t--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-neutral-weak-active);\n\t\t\t--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-weak-disabled);\n\t\t\t--wp-ui-button-border-color: var(--wpds-color-stroke-interactive-neutral);\n\t\t\t--wp-ui-button-border-color-active: var(--wpds-color-stroke-interactive-neutral-active);\n\t\t\t--wp-ui-button-border-color-disabled: var(--wpds-color-stroke-interactive-neutral-disabled);\n\t\t}\n\n\t\t&.style-module__is-minimal__rQYZo {\n\t\t\t--wp-ui-button-background-color: var(--wpds-color-bg-interactive-neutral-weak);\n\t\t\t--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-neutral-weak-active);\n\t\t\t--wp-ui-button-background-color-disabled: var(--wpds-color-bg-interactive-neutral-weak-disabled);\n\t\t}\n\t}\n\n\t.style-module__is-unstyled__q7snL {\n\t\tborder: none;\n\t\tbackground: none;\n\t}\n\n\t.style-module__is-compact__z1nPG {\n\t\t--wp-ui-button-height: 32px;\n\t}\n\n\t.style-module__is-loading__kUtC8 {\n\t\tcolor: transparent;\n\n\t\t* {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&::before {\n\t\t\ttransition-delay: 0.05s;\n\t\t\topacity: 1;\n\n\t\t\t@media not ( prefers-reduced-motion ) {\n\t\t\t\tanimation: style-module__loading-animation__Wh1T2 1s linear infinite;\n\t\t\t}\n\t\t}\n\t}\n\n\t[aria-pressed=\"true\"].style-module__is-minimal__rQYZo.style-module__is-neutral__5yKo- {\n\t\t--wp-ui-button-background-color: var(--wpds-color-bg-interactive-neutral-strong);\n\t\t--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-neutral-strong);\n\t\t--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-neutral-strong);\n\t\t--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-neutral-strong);\n\t}\n}\n\n@keyframes style-module__loading-animation__Wh1T2 {\n\t0% {\n\t\ttransform: translate(-50%, -50%) rotate(0deg);\n\t}\n\n\t100% {\n\t\ttransform: translate(-50%, -50%) rotate(360deg);\n\t}\n}\n`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"button\": \"style-module__button__l7D8M\",\n  \"is-unstyled\": \"style-module__is-unstyled__q7snL\",\n  \"is-loading\": \"style-module__is-loading__kUtC8\",\n  \"is-small\": \"style-module__is-small__kIIFR\",\n  \"is-brand\": \"style-module__is-brand__3UYMl\",\n  \"is-outline\": \"style-module__is-outline__YtWne\",\n  \"is-minimal\": \"style-module__is-minimal__rQYZo\",\n  \"is-neutral\": \"style-module__is-neutral__5yKo-\",\n  \"is-solid\": \"style-module__is-solid__tQszW\",\n  \"is-compact\": \"style-module__is-compact__z1nPG\",\n  \"loading-animation\": \"style-module__loading-animation__Wh1T2\"\n};", "const css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;\n\n@layer wp-ui-utilities {\n\t.resets-module__box-sizing__M2zT5 {\n\t\tbox-sizing: border-box;\n\n\t\t*,\n\t\t*::before,\n\t\t*::after {\n\t\t\tbox-sizing: inherit;\n\t\t}\n\t}\n}\n`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"box-sizing\": \"resets-module__box-sizing__M2zT5\"\n};", "const css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;\n\n@layer wp-ui-utilities {\n\t.focus-module__outset-ring--focus__COii5,\n\t.focus-module__outset-ring--focus-except-active__4lsr3,\n\t.focus-module__outset-ring--focus-visible__0FQby,\n\t.focus-module__outset-ring--focus-within__zYPfw,\n\t.focus-module__outset-ring--focus-within-except-active__lw0E3,\n\t.focus-module__outset-ring--focus-within-visible__xcs-5 {\n\t\t@media not ( prefers-reduced-motion ) {\n\t\t\ttransition: outline 0.1s ease-out;\n\t\t}\n\n\t\t/* Outline width must be kept at 0 even with a transparent color,\n\t\tor else the outline will be visible in forced-colors mode. */\n\t\toutline-width: 0;\n\t\toutline-style: solid;\n\t\toutline-color: transparent;\n\t\toutline-offset: 1px;\n\t}\n\n\t.focus-module__outset-ring--focus__COii5:focus,\n\t.focus-module__outset-ring--focus-except-active__4lsr3:focus:not(:active),\n\t.focus-module__outset-ring--focus-visible__0FQby:focus-visible,\n\t.focus-module__outset-ring--focus-within__zYPfw:focus-within,\n\t.focus-module__outset-ring--focus-within-except-active__lw0E3:focus-within:not(:has(:active)),\n\t.focus-module__outset-ring--focus-within-visible__xcs-5:focus-within:has(:focus-visible) {\n\t\toutline-width: var(--wpds-border-width-interactive-focus);\n\t\toutline-color: var(--wpds-color-stroke-focus-brand);\n\t}\n}\n`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"outset-ring--focus\": \"focus-module__outset-ring--focus__COii5\",\n  \"outset-ring--focus-except-active\": \"focus-module__outset-ring--focus-except-active__4lsr3\",\n  \"outset-ring--focus-visible\": \"focus-module__outset-ring--focus-visible__0FQby\",\n  \"outset-ring--focus-within\": \"focus-module__outset-ring--focus-within__zYPfw\",\n  \"outset-ring--focus-within-except-active\": \"focus-module__outset-ring--focus-within-except-active__lw0E3\",\n  \"outset-ring--focus-within-visible\": \"focus-module__outset-ring--focus-within-visible__xcs-5\"\n};"],
-  "mappings": ";AAAA,SAAS,UAAU,eAAe;AAClC,OAAO,UAAU;AACjB,SAAS,aAAa;AACtB,SAAS,YAAY,iBAAiB;AACtC,SAAS,UAAU;;;ACJnB,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyOZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,UAAU;AAAA,EACV,eAAe;AAAA,EACf,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,qBAAqB;AACvB;;;ACzPA,IAAMA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAeA,IAAG,CAAC;AAE7C,IAAO,iBAAQ;AAAA,EACb,cAAc;AAChB;;;ACpBA,IAAMC,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAeA,IAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,sBAAsB;AAAA,EACtB,oCAAoC;AAAA,EACpC,8BAA8B;AAAA,EAC9B,6BAA6B;AAAA,EAC7B,2CAA2C;AAAA,EAC3C,qCAAqC;AACvC;;;AHEG;AAnCI,IAAM,SAAS;AAAA,EACrB,SAASC,QACR;AAAA,IACC,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,sBAAsB,GAAI,SAAU;AAAA,IACpC;AAAA,IACA,GAAG;AAAA,EACJ,GACA,KACC;AACD,UAAM,kBAAkB;AAAA,MACvB,eAAa,YAAa;AAAA,MAC1B,cAAa,kCAAmC;AAAA,MAChD,YAAY,cAAc,cAAO;AAAA,MACjC,cAAQ,MAAO,IAAK,EAAG;AAAA,MACvB,cAAQ,MAAO,OAAQ,EAAG;AAAA,MAC1B,cAAQ,MAAO,IAAK,EAAG;AAAA,MACvB,WAAW,cAAQ,YAAa;AAAA,MAChC;AAAA,IACD;AAGA,cAAW,MAAM;AAChB,UAAK,WAAW,qBAAsB;AACrC,cAAO,mBAAoB;AAAA,MAC5B;AAAA,IACD,GAAG,CAAE,SAAS,mBAAoB,CAAE;AAEpC,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,WAAY;AAAA,QACZ;AAAA,QACA,UAAW,YAAY;AAAA,QACrB,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEF;AACD;",
-  "names": ["css", "css", "Button"]
+  "sourcesContent": ["import { Button as _Button } from '@base-ui/react/button';\nimport clsx from 'clsx';\nimport { speak } from '@wordpress/a11y';\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { type ButtonProps } from './types';\nimport styles from './style.module.css';\nimport resetStyles from '../utils/css/resets.module.css';\nimport focusStyles from '../utils/css/focus.module.css';\n\nexport const Button = forwardRef< HTMLButtonElement, ButtonProps >(\n\tfunction Button(\n\t\t{\n\t\t\ttone = 'brand',\n\t\t\tvariant = 'solid',\n\t\t\tsize = 'default',\n\t\t\tclassName,\n\t\t\tfocusableWhenDisabled = true,\n\t\t\tdisabled,\n\t\t\tloading,\n\t\t\tloadingAnnouncement = __( 'Loading' ),\n\t\t\tchildren,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) {\n\t\tconst mergedClassName = clsx(\n\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\tfocusStyles[ 'outset-ring--focus-except-active' ],\n\t\t\tvariant !== 'unstyled' && styles.button,\n\t\t\tstyles[ `is-${ tone }` ],\n\t\t\tstyles[ `is-${ variant }` ],\n\t\t\tstyles[ `is-${ size }` ],\n\t\t\tloading && styles[ 'is-loading' ],\n\t\t\tclassName\n\t\t);\n\n\t\t// Announce loading state to assistive technology\n\t\tuseEffect( () => {\n\t\t\tif ( loading && loadingAnnouncement ) {\n\t\t\t\tspeak( loadingAnnouncement );\n\t\t\t}\n\t\t}, [ loading, loadingAnnouncement ] );\n\n\t\treturn (\n\t\t\t<_Button\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ mergedClassName }\n\t\t\t\tfocusableWhenDisabled={ focusableWhenDisabled }\n\t\t\t\tdisabled={ disabled ?? loading }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</_Button>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='e89bb0a0ac']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"e89bb0a0ac\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._97b0fc33c028be1a__button,.abbb272e2ce49bd6__is-unstyled{appearance:none;padding:0}._97b0fc33c028be1a__button{--wp-ui-button-font-weight:499;--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled);--wp-ui-button-padding-inline:calc(var(--wpds-dimension-base)*3);--wp-ui-button-height:40px;--wp-ui-button-aspect-ratio:auto;--wp-ui-button-font-size:var(--wpds-font-size-md);--wp-ui-button-border-color:var(--wp-ui-button-background-color);--wp-ui-button-border-color-active:var(--wp-ui-button-background-color-active);--wp-ui-button-border-color-disabled:var(--wp-ui-button-background-color-disabled);align-items:center;aspect-ratio:var(--wp-ui-button-aspect-ratio);background-clip:padding-box;background-color:var(--wp-ui-button-background-color);border-color:var(--wp-ui-button-border-color);border-radius:var(--wpds-border-radius-sm);border-style:solid;border-width:1px;color:var(--wp-ui-button-foreground-color);display:inline-flex;font-family:var(--wpds-font-family-body);font-size:var(--wp-ui-button-font-size);font-weight:var(--wp-ui-button-font-weight);gap:calc(var(--wpds-dimension-base)*2);height:var(--wp-ui-button-height);justify-content:center;line-height:var(--wpds-font-line-height-sm);padding-inline:var(--wp-ui-button-padding-inline);position:relative;text-decoration:none;@media not (prefers-reduced-motion){transition:color .1s ease-out;*{transition:opacity .1s ease-out}}&[href]{cursor:pointer}[href]{color:inherit;text-decoration:inherit}&:not([aria-disabled=true]):is(:hover,:active,:focus){--wp-ui-button-background-color:var(--wp-ui-button-background-color-active);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-active);--wp-ui-button-border-color:var(--wp-ui-button-border-color-active)}&[aria-disabled=true]:not(._914b42f315c0e580__is-loading){--wp-ui-button-background-color:var(--wp-ui-button-background-color-disabled);--wp-ui-button-foreground-color:var(--wp-ui-button-foreground-color-disabled);--wp-ui-button-border-color:var(--wp-ui-button-border-color-disabled);@media (forced-colors:active){border-bottom-color:GrayText;border-left-color:GrayText;border-right-color:GrayText;border-top-color:GrayText;color:GrayText}}&:before{aspect-ratio:1;border:var(--wpds-border-width-focus) solid;border-block-end-color:#0000;border-block-start-color:var(--wp-ui-button-foreground-color);border-inline-end-color:var(--wp-ui-button-foreground-color);border-inline-start-color:#0000;border-radius:50%;box-sizing:border-box;content:\\\"\\\";display:block;height:var(--wp-ui-button-font-size);inset-inline-start:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);@media not (prefers-reduced-motion){transition:opacity .1s ease-out}}}._908205475f9f2a92__is-small{--wp-ui-button-padding-inline:calc(var(--wpds-dimension-base)*2);--wp-ui-button-height:24px}.dd460c965226cc77__is-brand{&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-brand);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-brand-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-brand);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-brand-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-brand-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-brand-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.e722a8f96726aa99__is-neutral{&.b50b3358c5fb4d0b__is-solid{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-strong-disabled);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-strong-disabled)}&._62d5a778b7b258ee__is-outline,&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-active);--wp-ui-button-foreground-color-disabled:var(--wpds-color-fg-interactive-neutral-disabled)}&._62d5a778b7b258ee__is-outline{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled);--wp-ui-button-border-color:var(--wpds-color-stroke-interactive-neutral);--wp-ui-button-border-color-active:var(--wpds-color-stroke-interactive-neutral-active);--wp-ui-button-border-color-disabled:var(--wpds-color-stroke-interactive-neutral-disabled)}&.ad0619a3217c6a5b__is-minimal{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-weak);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-weak-active);--wp-ui-button-background-color-disabled:var(--wpds-color-bg-interactive-neutral-weak-disabled)}}.abbb272e2ce49bd6__is-unstyled{background:none;border:none}.cf59cf1b69629838__is-compact{--wp-ui-button-height:32px}._914b42f315c0e580__is-loading{color:#0000;*{opacity:0}&:before{opacity:1;transition-delay:.05s;@media not (prefers-reduced-motion){animation:_5a1d53da6f830c8d__loading-animation 1s linear infinite}}}[aria-pressed=true].ad0619a3217c6a5b__is-minimal.e722a8f96726aa99__is-neutral{--wp-ui-button-background-color:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-background-color-active:var(--wpds-color-bg-interactive-neutral-strong);--wp-ui-button-foreground-color:var(--wpds-color-fg-interactive-neutral-strong);--wp-ui-button-foreground-color-active:var(--wpds-color-fg-interactive-neutral-strong)}}@keyframes _5a1d53da6f830c8d__loading-animation{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"button\":\"_97b0fc33c028be1a__button\",\"is-unstyled\":\"abbb272e2ce49bd6__is-unstyled\",\"is-loading\":\"_914b42f315c0e580__is-loading\",\"is-small\":\"_908205475f9f2a92__is-small\",\"is-brand\":\"dd460c965226cc77__is-brand\",\"is-outline\":\"_62d5a778b7b258ee__is-outline\",\"is-minimal\":\"ad0619a3217c6a5b__is-minimal\",\"is-neutral\":\"e722a8f96726aa99__is-neutral\",\"is-solid\":\"b50b3358c5fb4d0b__is-solid\",\"is-compact\":\"cf59cf1b69629838__is-compact\",\"loading-animation\":\"_5a1d53da6f830c8d__loading-animation\"};\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='671ebfc62d']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"671ebfc62d\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"box-sizing\":\"_336cd3e4e743482f__box-sizing\"};\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='28ad59e2e3']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"28ad59e2e3\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._08e8a2e44959f892__outset-ring--focus,._970d04df7376df67__outset-ring--focus-within-except-active,.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible,.cd83dfc2126a0846__outset-ring--focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active{@media not (prefers-reduced-motion){transition:outline .1s ease-out}outline-color:#0000;outline-offset:1px;outline-style:solid;outline-width:0}._08e8a2e44959f892__outset-ring--focus:focus,._970d04df7376df67__outset-ring--focus-within-except-active:focus-within:not(:has(:active)),.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible:focus-within:has(:focus-visible),.cd83dfc2126a0846__outset-ring--focus-within:focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible:focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active:focus:not(:active){outline-color:var(--wpds-color-stroke-focus-brand);outline-width:var(--wpds-border-width-focus)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"outset-ring--focus\":\"_08e8a2e44959f892__outset-ring--focus\",\"outset-ring--focus-except-active\":\"e25b2bdd7aa21721__outset-ring--focus-except-active\",\"outset-ring--focus-visible\":\"d0541bc9dd9dc7b6__outset-ring--focus-visible\",\"outset-ring--focus-within\":\"cd83dfc2126a0846__outset-ring--focus-within\",\"outset-ring--focus-within-except-active\":\"_970d04df7376df67__outset-ring--focus-within-except-active\",\"outset-ring--focus-within-visible\":\"c5cb3ee4bddaa8e4__outset-ring--focus-within-visible\"};\n"],
+  "mappings": ";AAAA,SAAS,UAAU,eAAe;AAClC,OAAO,UAAU;AACjB,SAAS,aAAa;AACtB,SAAS,YAAY,iBAAiB;AACtC,SAAS,UAAU;;;ACJnB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,qjOAAujO,CAAC;AAClmO,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,UAAS,6BAA4B,eAAc,iCAAgC,cAAa,iCAAgC,YAAW,+BAA8B,YAAW,8BAA6B,cAAa,iCAAgC,cAAa,gCAA+B,cAAa,gCAA+B,YAAW,8BAA6B,cAAa,gCAA+B,qBAAoB,uCAAsC;;;ACNpf,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,kMAAkM,CAAC;AAC7O,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,iBAAQ,EAAC,cAAa,gCAA+B;;;ACN5D,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,0hCAA0hC,CAAC;AACrkC,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,sBAAqB,yCAAwC,oCAAmC,sDAAqD,8BAA6B,gDAA+C,6BAA4B,+CAA8C,2CAA0C,8DAA6D,qCAAoC,sDAAqD;;;AHuCxf;AAnCI,IAAM,SAAS;AAAA,EACrB,SAASA,QACR;AAAA,IACC,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,sBAAsB,GAAI,SAAU;AAAA,IACpC;AAAA,IACA,GAAG;AAAA,EACJ,GACA,KACC;AACD,UAAM,kBAAkB;AAAA,MACvB,eAAa,YAAa;AAAA,MAC1B,cAAa,kCAAmC;AAAA,MAChD,YAAY,cAAc,cAAO;AAAA,MACjC,cAAQ,MAAO,IAAK,EAAG;AAAA,MACvB,cAAQ,MAAO,OAAQ,EAAG;AAAA,MAC1B,cAAQ,MAAO,IAAK,EAAG;AAAA,MACvB,WAAW,cAAQ,YAAa;AAAA,MAChC;AAAA,IACD;AAGA,cAAW,MAAM;AAChB,UAAK,WAAW,qBAAsB;AACrC,cAAO,mBAAoB;AAAA,MAC5B;AAAA,IACD,GAAG,CAAE,SAAS,mBAAoB,CAAE;AAEpC,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,WAAY;AAAA,QACZ;AAAA,QACA,UAAW,YAAY;AAAA,QACrB,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEF;AACD;",
+  "names": ["Button"]
 }

package/build-module/form/primitives/constants.mjs

@@ -0,0 +1,10 @@
+// packages/ui/src/form/primitives/constants.ts
+var ITEM_POPUP_POSITIONER_PROPS = {
+  align: "start",
+  sideOffset: 8,
+  collisionPadding: 12
+};
+export {
+  ITEM_POPUP_POSITIONER_PROPS
+};
+//# sourceMappingURL=constants.mjs.map

package/build-module/form/primitives/constants.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/form/primitives/constants.ts"],
+  "sourcesContent": ["import type { Select as _Select } from '@base-ui/react/select';\n\n/**\n * Shared positioning props for item popups (Select, Combobox, etc.).\n */\nexport const ITEM_POPUP_POSITIONER_PROPS = {\n\talign: 'start',\n\tsideOffset: 8,\n\tcollisionPadding: 12,\n} satisfies Partial< _Select.Positioner.Props >;\n"],
+  "mappings": ";AAKO,IAAM,8BAA8B;AAAA,EAC1C,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,kBAAkB;AACnB;",
+  "names": []
+}

package/build-module/form/primitives/field/description.mjs

@@ -4,40 +4,13 @@ import { Field as _Field } from "@base-ui/react/field";
 import { forwardRef } from "@wordpress/element";
 
 // packages/ui/src/utils/css/field.module.css
-var css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
-
-@layer wp-ui-utilities {
-	.field-module__label__LVrYU {
-		--wp-ui-field-label-line-height: var(--wpds-font-line-height-xs);
-
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-xs);
-		line-height: var(--wp-ui-field-label-line-height);
-		font-weight: var(--wpds-font-weight-medium);
-		text-transform: uppercase;
-		color: var(--wpds-color-fg-content-neutral);
-
-		&.field-module__is-plain__F8QhR {
-			font-size: var(--wpds-font-size-md);
-			text-transform: none;
-		}
-	}
-
-	.field-module__description__CKN1B {
-		margin: 0;
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-sm);
-		line-height: var(--wpds-font-line-height-xs);
-		color: var(--wpds-color-fg-content-neutral-weak);
-	}
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='04c8f253c6']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "04c8f253c6");
+  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._2d5ad850b2f90964__label{--wp-ui-field-label-line-height:var(--wpds-font-line-height-xs);color:var(--wpds-color-fg-content-neutral);font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-xs);font-weight:var(--wpds-font-weight-medium);line-height:var(--wp-ui-field-label-line-height);text-transform:uppercase;&._17c4214649230bea__is-plain{font-size:var(--wpds-font-size-md);text-transform:none}}._08a3750500e0233f__description{color:var(--wpds-color-fg-content-neutral-weak);font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-sm);line-height:var(--wpds-font-line-height-xs);margin:0}}"));
+  document.head.appendChild(style);
 }
-`;
-document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
-var field_default = {
-  "label": "field-module__label__LVrYU",
-  "is-plain": "field-module__is-plain__F8QhR",
-  "description": "field-module__description__CKN1B"
-};
+var field_default = { "label": "_2d5ad850b2f90964__label", "is-plain": "_17c4214649230bea__is-plain", "description": "_08a3750500e0233f__description" };
 
 // packages/ui/src/form/primitives/field/description.tsx
 import { jsx } from "react/jsx-runtime";

package/build-module/form/primitives/field/description.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/form/primitives/field/description.tsx", "../../../../src/utils/css/field.module.css"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { Field as _Field } from '@base-ui/react/field';\nimport { forwardRef } from '@wordpress/element';\nimport fieldStyles from '../../../utils/css/field.module.css';\nimport type { FieldDescriptionProps } from './types';\n\nexport const Description = forwardRef<\n\tHTMLParagraphElement,\n\tFieldDescriptionProps\n>( function Description( { className, ...restProps }, ref ) {\n\treturn (\n\t\t<_Field.Description\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx( fieldStyles.description, className ) }\n\t\t\t{ ...restProps }\n\t\t/>\n\t);\n} );\n", "const css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;\n\n@layer wp-ui-utilities {\n\t.field-module__label__LVrYU {\n\t\t--wp-ui-field-label-line-height: var(--wpds-font-line-height-xs);\n\n\t\tfont-family: var(--wpds-font-family-body);\n\t\tfont-size: var(--wpds-font-size-xs);\n\t\tline-height: var(--wp-ui-field-label-line-height);\n\t\tfont-weight: var(--wpds-font-weight-medium);\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--wpds-color-fg-content-neutral);\n\n\t\t&.field-module__is-plain__F8QhR {\n\t\t\tfont-size: var(--wpds-font-size-md);\n\t\t\ttext-transform: none;\n\t\t}\n\t}\n\n\t.field-module__description__CKN1B {\n\t\tmargin: 0;\n\t\tfont-family: var(--wpds-font-family-body);\n\t\tfont-size: var(--wpds-font-size-sm);\n\t\tline-height: var(--wpds-font-line-height-xs);\n\t\tcolor: var(--wpds-color-fg-content-neutral-weak);\n\t}\n}\n`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"label\": \"field-module__label__LVrYU\",\n  \"is-plain\": \"field-module__is-plain__F8QhR\",\n  \"description\": \"field-module__description__CKN1B\"\n};"],
-  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,SAAS,cAAc;AAChC,SAAS,kBAAkB;;;ACF3B,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,eAAe;AACjB;;;ADzBE;AALK,IAAM,cAAc,WAGxB,SAASA,aAAa,EAAE,WAAW,GAAG,UAAU,GAAG,KAAM;AAC3D,SACC;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACA;AAAA,MACA,WAAY,KAAM,cAAY,aAAa,SAAU;AAAA,MACnD,GAAG;AAAA;AAAA,EACN;AAEF,CAAE;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { Field as _Field } from '@base-ui/react/field';\nimport { forwardRef } from '@wordpress/element';\nimport fieldStyles from '../../../utils/css/field.module.css';\nimport type { FieldDescriptionProps } from './types';\n\nexport const Description = forwardRef<\n\tHTMLParagraphElement,\n\tFieldDescriptionProps\n>( function Description( { className, ...restProps }, ref ) {\n\treturn (\n\t\t<_Field.Description\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx( fieldStyles.description, className ) }\n\t\t\t{ ...restProps }\n\t\t/>\n\t);\n} );\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='04c8f253c6']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"04c8f253c6\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._2d5ad850b2f90964__label{--wp-ui-field-label-line-height:var(--wpds-font-line-height-xs);color:var(--wpds-color-fg-content-neutral);font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-xs);font-weight:var(--wpds-font-weight-medium);line-height:var(--wp-ui-field-label-line-height);text-transform:uppercase;&._17c4214649230bea__is-plain{font-size:var(--wpds-font-size-md);text-transform:none}}._08a3750500e0233f__description{color:var(--wpds-color-fg-content-neutral-weak);font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-sm);line-height:var(--wpds-font-line-height-xs);margin:0}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"label\":\"_2d5ad850b2f90964__label\",\"is-plain\":\"_17c4214649230bea__is-plain\",\"description\":\"_08a3750500e0233f__description\"};\n"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,SAAS,cAAc;AAChC,SAAS,kBAAkB;;;ACF3B,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,qtBAAqtB,CAAC;AAChwB,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,SAAQ,4BAA2B,YAAW,+BAA8B,eAAc,iCAAgC;;;ADKxI;AALK,IAAM,cAAc,WAGxB,SAASA,aAAa,EAAE,WAAW,GAAG,UAAU,GAAG,KAAM;AAC3D,SACC;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACA;AAAA,MACA,WAAY,KAAM,cAAY,aAAa,SAAU;AAAA,MACnD,GAAG;AAAA;AAAA,EACN;AAEF,CAAE;",
   "names": ["Description"]
 }

package/build-module/form/primitives/field/details.mjs

@@ -5,40 +5,13 @@ import { forwardRef } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 
 // packages/ui/src/utils/css/field.module.css
-var css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
-
-@layer wp-ui-utilities {
-	.field-module__label__LVrYU {
-		--wp-ui-field-label-line-height: var(--wpds-font-line-height-xs);
-
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-xs);
-		line-height: var(--wp-ui-field-label-line-height);
-		font-weight: var(--wpds-font-weight-medium);
-		text-transform: uppercase;
-		color: var(--wpds-color-fg-content-neutral);
-
-		&.field-module__is-plain__F8QhR {
-			font-size: var(--wpds-font-size-md);
-			text-transform: none;
-		}
-	}
-
-	.field-module__description__CKN1B {
-		margin: 0;
-		font-family: var(--wpds-font-family-body);
-		font-size: var(--wpds-font-size-sm);
-		line-height: var(--wpds-font-line-height-xs);
-		color: var(--wpds-color-fg-content-neutral-weak);
-	}
+if (typeof document !== "undefined" && !document.head.querySelector("style[data-wp-hash='04c8f253c6']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "04c8f253c6");
+  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._2d5ad850b2f90964__label{--wp-ui-field-label-line-height:var(--wpds-font-line-height-xs);color:var(--wpds-color-fg-content-neutral);font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-xs);font-weight:var(--wpds-font-weight-medium);line-height:var(--wp-ui-field-label-line-height);text-transform:uppercase;&._17c4214649230bea__is-plain{font-size:var(--wpds-font-size-md);text-transform:none}}._08a3750500e0233f__description{color:var(--wpds-color-fg-content-neutral-weak);font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-sm);line-height:var(--wpds-font-line-height-xs);margin:0}}"));
+  document.head.appendChild(style);
 }
-`;
-document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
-var field_default = {
-  "label": "field-module__label__LVrYU",
-  "is-plain": "field-module__is-plain__F8QhR",
-  "description": "field-module__description__CKN1B"
-};
+var field_default = { "label": "_2d5ad850b2f90964__label", "is-plain": "_17c4214649230bea__is-plain", "description": "_08a3750500e0233f__description" };
 
 // packages/ui/src/form/primitives/field/details.tsx
 import { VisuallyHidden } from "../../../visually-hidden/index.mjs";

package/build-module/form/primitives/field/details.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/form/primitives/field/details.tsx", "../../../../src/utils/css/field.module.css"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { Field as _Field } from '@base-ui/react/field';\nimport { forwardRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport fieldStyles from '../../../utils/css/field.module.css';\nimport type { FieldDetailsProps } from './types';\nimport { VisuallyHidden } from '../../../visually-hidden';\n\n/**\n * A component for showing additional information about the field,\n * styled similarly to a normal `Field.Description`.\n * Unlike a normal description, it can include links and other semantic elements.\n *\n * Although this content is not associated with the field using direct semantics,\n * it is made discoverable to screen reader users via a visually hidden description,\n * alerting them to the presence of additional information below.\n *\n * If the content only includes plain text, use `Field.Description` instead,\n * so the readout is not unnecessarily verbose for screen reader users.\n */\nexport const Details = forwardRef< HTMLDivElement, FieldDetailsProps >(\n\tfunction Details( { className, ...restProps }, ref ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<_Field.Description render={ <VisuallyHidden /> }>\n\t\t\t\t\t{ __( 'More details follow the field.' ) }\n\t\t\t\t</_Field.Description>\n\t\t\t\t<div\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tclassName={ clsx( fieldStyles.description, className ) }\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t></div>\n\t\t\t</>\n\t\t);\n\t}\n);\n", "const css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;\n\n@layer wp-ui-utilities {\n\t.field-module__label__LVrYU {\n\t\t--wp-ui-field-label-line-height: var(--wpds-font-line-height-xs);\n\n\t\tfont-family: var(--wpds-font-family-body);\n\t\tfont-size: var(--wpds-font-size-xs);\n\t\tline-height: var(--wp-ui-field-label-line-height);\n\t\tfont-weight: var(--wpds-font-weight-medium);\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--wpds-color-fg-content-neutral);\n\n\t\t&.field-module__is-plain__F8QhR {\n\t\t\tfont-size: var(--wpds-font-size-md);\n\t\t\ttext-transform: none;\n\t\t}\n\t}\n\n\t.field-module__description__CKN1B {\n\t\tmargin: 0;\n\t\tfont-family: var(--wpds-font-family-body);\n\t\tfont-size: var(--wpds-font-size-sm);\n\t\tline-height: var(--wpds-font-line-height-xs);\n\t\tcolor: var(--wpds-color-fg-content-neutral-weak);\n\t}\n}\n`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n  \"label\": \"field-module__label__LVrYU\",\n  \"is-plain\": \"field-module__is-plain__F8QhR\",\n  \"description\": \"field-module__description__CKN1B\"\n};"],
-  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,SAAS,cAAc;AAChC,SAAS,kBAAkB;AAC3B,SAAS,UAAU;;;ACHnB,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,eAAe;AACjB;;;AD9BA,SAAS,sBAAsB;AAiB5B,mBAC8B,KAD9B;AAHI,IAAM,UAAU;AAAA,EACtB,SAASA,SAAS,EAAE,WAAW,GAAG,UAAU,GAAG,KAAM;AACpD,WACC,iCACC;AAAA,0BAAC,OAAO,aAAP,EAAmB,QAAS,oBAAC,kBAAe,GAC1C,aAAI,gCAAiC,GACxC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,WAAY,KAAM,cAAY,aAAa,SAAU;AAAA,UACnD,GAAG;AAAA;AAAA,MACL;AAAA,OACF;AAAA,EAEF;AACD;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { Field as _Field } from '@base-ui/react/field';\nimport { forwardRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport fieldStyles from '../../../utils/css/field.module.css';\nimport type { FieldDetailsProps } from './types';\nimport { VisuallyHidden } from '../../../visually-hidden';\n\n/**\n * A component for showing additional information about the field,\n * styled similarly to a normal `Field.Description`.\n * Unlike a normal description, it can include links and other semantic elements.\n *\n * Although this content is not associated with the field using direct semantics,\n * it is made discoverable to screen reader users via a visually hidden description,\n * alerting them to the presence of additional information below.\n *\n * If the content only includes plain text, use `Field.Description` instead,\n * so the readout is not unnecessarily verbose for screen reader users.\n */\nexport const Details = forwardRef< HTMLDivElement, FieldDetailsProps >(\n\tfunction Details( { className, ...restProps }, ref ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<_Field.Description render={ <VisuallyHidden /> }>\n\t\t\t\t\t{ __( 'More details follow the field.' ) }\n\t\t\t\t</_Field.Description>\n\t\t\t\t<div\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tclassName={ clsx( fieldStyles.description, className ) }\n\t\t\t\t\t{ ...restProps }\n\t\t\t\t></div>\n\t\t\t</>\n\t\t);\n\t}\n);\n", "if (typeof document !== 'undefined' && !document.head.querySelector(\"style[data-wp-hash='04c8f253c6']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"04c8f253c6\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._2d5ad850b2f90964__label{--wp-ui-field-label-line-height:var(--wpds-font-line-height-xs);color:var(--wpds-color-fg-content-neutral);font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-xs);font-weight:var(--wpds-font-weight-medium);line-height:var(--wp-ui-field-label-line-height);text-transform:uppercase;&._17c4214649230bea__is-plain{font-size:var(--wpds-font-size-md);text-transform:none}}._08a3750500e0233f__description{color:var(--wpds-color-fg-content-neutral-weak);font-family:var(--wpds-font-family-body);font-size:var(--wpds-font-size-sm);line-height:var(--wpds-font-line-height-xs);margin:0}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"label\":\"_2d5ad850b2f90964__label\",\"is-plain\":\"_17c4214649230bea__is-plain\",\"description\":\"_08a3750500e0233f__description\"};\n"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,SAAS,cAAc;AAChC,SAAS,kBAAkB;AAC3B,SAAS,UAAU;;;ACHnB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AACxG,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,qtBAAqtB,CAAC;AAChwB,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,SAAQ,4BAA2B,YAAW,+BAA8B,eAAc,iCAAgC;;;ADA1I,SAAS,sBAAsB;AAiB5B,mBAC8B,KAD9B;AAHI,IAAM,UAAU;AAAA,EACtB,SAASA,SAAS,EAAE,WAAW,GAAG,UAAU,GAAG,KAAM;AACpD,WACC,iCACC;AAAA,0BAAC,OAAO,aAAP,EAAmB,QAAS,oBAAC,kBAAe,GAC1C,aAAI,gCAAiC,GACxC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,WAAY,KAAM,cAAY,aAAa,SAAU;AAAA,UACnD,GAAG;AAAA;AAAA,MACL;AAAA,OACF;AAAA,EAEF;AACD;",
   "names": ["Details"]
 }