@wordpress/ui 0.13.1-next.v.202605131032.0 → 0.15.0

package/build-types/tooltip/portal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../src/tooltip/portal.tsx"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,QAAA,MAAM,MAAM,kNAIX,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../src/tooltip/portal.tsx"],"names":[],"mappings":"AAKA;;;GAGG;AACH,QAAA,MAAM,MAAM;;;;;;kDAUX,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/build-types/tooltip/positioner.d.ts

@@ -1,9 +1,12 @@
 /**
- * Positions the floating tooltip content relative to the trigger. Pass to
- * `Tooltip.Popup`'s `positioner` prop to customize `side`, `align`,
- * `sideOffset`, collision behavior, etc. When `positioner` is omitted,
- * `Tooltip.Popup` uses this component with default props.
+ * Used to apply custom positioning to `Tooltip`'s floating content.
  */
-declare const Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TooltipPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const Positioner: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").TooltipPositionerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref">, "children" | "className" | "render" | "style"> & {
+    className?: string;
+    style?: React.CSSProperties;
+    render?: ((props: import("react").HTMLAttributes<any> & {
+        ref?: import("react").Ref<any> | undefined;
+    }) => React.ReactElement<unknown>) | React.ReactElement<Record<string, unknown>>;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export { Positioner };
 //# sourceMappingURL=positioner.d.ts.map

package/build-types/tooltip/positioner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"positioner.d.ts","sourceRoot":"","sources":["../../src/tooltip/positioner.tsx"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,QAAA,MAAM,UAAU,sNAoBf,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"positioner.d.ts","sourceRoot":"","sources":["../../src/tooltip/positioner.tsx"],"names":[],"mappings":"AAOA;;GAEG;AACH,QAAA,MAAM,UAAU;;;;;;kDAoBf,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/build-types/tooltip/types.d.ts

@@ -1,8 +1,8 @@
-import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import type { Tooltip as _Tooltip } from '@base-ui/react/tooltip';
 import type { ComponentProps } from '../utils/types';
-export type PortalProps = ComponentPropsWithoutRef<typeof _Tooltip.Portal>;
-export type PositionerProps = ComponentPropsWithoutRef<typeof _Tooltip.Positioner>;
+export type PortalProps = ComponentProps<typeof _Tooltip.Portal>;
+export type PositionerProps = ComponentProps<typeof _Tooltip.Positioner>;
 export type RootProps = Pick<_Tooltip.Root.Props, 'disabled' | 'children'>;
 export type ProviderProps = Pick<_Tooltip.Provider.Props, 'delay' | 'children'>;
 export interface TriggerProps extends ComponentProps<'button'> {

package/build-types/tooltip/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,wBAAwB,CAAE,OAAO,QAAQ,CAAC,MAAM,CAAE,CAAC;AAE7E,MAAM,MAAM,eAAe,GAAG,wBAAwB,CACrD,OAAO,QAAQ,CAAC,UAAU,CAC1B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,CAAE,CAAC;AAE7E,MAAM,MAAM,aAAa,GAAG,IAAI,CAC/B,QAAQ,CAAC,QAAQ,CAAC,KAAK,EACvB,OAAO,GAAG,UAAU,CACpB,CAAC;AAEF,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAE,QAAQ,CAAE;IAC/D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAE,KAAK,CAAE;IAC1D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,CAAE,IAAI,CAAE,WAAW,EAAE,UAAU,CAAE,CAAE,CAAC;IAEzD;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,YAAY,CAAE,IAAI,CAAE,eAAe,EAAE,UAAU,CAAE,CAAE,CAAC;CACjE"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,cAAc,CAAE,OAAO,QAAQ,CAAC,MAAM,CAAE,CAAC;AAEnE,MAAM,MAAM,eAAe,GAAG,cAAc,CAAE,OAAO,QAAQ,CAAC,UAAU,CAAE,CAAC;AAE3E,MAAM,MAAM,SAAS,GAAG,IAAI,CAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,CAAE,CAAC;AAE7E,MAAM,MAAM,aAAa,GAAG,IAAI,CAC/B,QAAQ,CAAC,QAAQ,CAAC,KAAK,EACvB,OAAO,GAAG,UAAU,CACpB,CAAC;AAEF,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAE,QAAQ,CAAE;IAC/D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAE,KAAK,CAAE;IAC1D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,CAAE,IAAI,CAAE,WAAW,EAAE,UAAU,CAAE,CAAE,CAAC;IAEzD;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,YAAY,CAAE,IAAI,CAAE,eAAe,EAAE,UAAU,CAAE,CAAE,CAAC;CACjE"}

package/build-types/utils/test/use-enable-wp-compat-overlay-slot.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=use-enable-wp-compat-overlay-slot.test.d.ts.map

package/build-types/utils/test/use-enable-wp-compat-overlay-slot.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-enable-wp-compat-overlay-slot.test.d.ts","sourceRoot":"","sources":["../../../src/utils/test/use-enable-wp-compat-overlay-slot.test.tsx"],"names":[],"mappings":""}

package/build-types/utils/test/wp-compat-overlay-slot.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=wp-compat-overlay-slot.test.d.ts.map

package/build-types/utils/test/wp-compat-overlay-slot.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wp-compat-overlay-slot.test.d.ts","sourceRoot":"","sources":["../../../src/utils/test/wp-compat-overlay-slot.test.ts"],"names":[],"mappings":""}

package/build-types/utils/use-enable-wp-compat-overlay-slot.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Opts the host application into the `@wordpress/ui` compat overlay slot —
+ * a body-level container into which `@wordpress/ui` overlays portal so they
+ * reliably stack above `@wordpress/components` overlays in mixed-library
+ * compositions.
+ *
+ * Call once from a component that mounts for the lifetime of the app
+ * (typically the root). Idempotent and one-way: a single caller should not
+ * be able to turn off shared infrastructure for everyone else; if the slot
+ * isn't wanted, simply don't call this hook.
+ *
+ * Where `window.wp.components` is on the global — the typical setup for
+ * plugins enqueueing `wp-components` through WordPress's script-loader —
+ * the slot auto-enables and this hook is a no-op.
+ */
+export declare function useEnableWpCompatOverlaySlot(): void;
+//# sourceMappingURL=use-enable-wp-compat-overlay-slot.d.ts.map

package/build-types/utils/use-enable-wp-compat-overlay-slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-enable-wp-compat-overlay-slot.d.ts","sourceRoot":"","sources":["../../src/utils/use-enable-wp-compat-overlay-slot.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,4BAA4B,IAAI,IAAI,CAgBnD"}

package/build-types/utils/wp-compat-overlay-slot.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Marker attribute on the compat overlay slot element.
+ */
+export declare const WP_COMPAT_OVERLAY_SLOT_ATTRIBUTE = "data-wp-compat-overlay-slot";
+/**
+ * Returns the body-level compat overlay slot when the runtime opts in,
+ * lazily creating it on first call. Returns `undefined` otherwise — so the
+ * return value can be forwarded straight to a `container` prop, leaving the
+ * default portal container in effect.
+ *
+ * Two opt-in paths:
+ *
+ * - Auto-detected when `window.wp.components` is on the global — the
+ *   typical script-loader setup for WordPress plugins and admin screens.
+ * - Explicit, via `useEnableWpCompatOverlaySlot()` — for hosts that bundle
+ *   `@wordpress/components` (or only `@wordpress/ui`) directly rather than
+ *   relying on the global.
+ *
+ * The slot is a single `<div data-wp-compat-overlay-slot>` appended to the
+ * local document's body. Subsequent calls return the same element; if it's
+ * been removed it's recreated, and a slot created by another
+ * `@wordpress/ui` instance in the same document is adopted rather than
+ * duplicated.
+ */
+export declare function getWpCompatOverlaySlot(): HTMLDivElement | undefined;
+/**
+ * Test-only escape hatch that drops the cached singleton.
+ */
+export declare function __resetWpCompatOverlaySlotCacheForTests(): void;
+//# sourceMappingURL=wp-compat-overlay-slot.d.ts.map

package/build-types/utils/wp-compat-overlay-slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wp-compat-overlay-slot.d.ts","sourceRoot":"","sources":["../../src/utils/wp-compat-overlay-slot.ts"],"names":[],"mappings":"AAcA;;GAEG;AACH,eAAO,MAAM,gCAAgC,gCAAgC,CAAC;AAuC9E;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,sBAAsB,IAAI,cAAc,GAAG,SAAS,CA6CnE;AAED;;GAEG;AACH,wBAAgB,uCAAuC,IAAI,IAAI,CAE9D"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/ui",
-	"version": "0.13.1-next.v.202605131032.0+f6d6e7149",
+	"version": "0.15.0",
 	"description": "Themeable React UI components for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,16 +44,16 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@base-ui/react": "^1.4.1",
-		"@wordpress/a11y": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/compose": "^7.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/element": "^6.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/i18n": "^6.18.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/icons": "^13.0.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/keycodes": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/primitives": "^4.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/private-apis": "^1.45.1-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/style-runtime": "^0.1.2-next.v.202605131032.0+f6d6e7149",
-		"@wordpress/theme": "^0.13.1-next.v.202605131032.0+f6d6e7149",
+		"@wordpress/a11y": "^4.48.0",
+		"@wordpress/compose": "^8.1.0",
+		"@wordpress/element": "^8.0.0",
+		"@wordpress/i18n": "^6.21.0",
+		"@wordpress/icons": "^13.3.0",
+		"@wordpress/keycodes": "^4.48.0",
+		"@wordpress/primitives": "^4.48.0",
+		"@wordpress/private-apis": "^1.48.0",
+		"@wordpress/style-runtime": "^0.4.0",
+		"@wordpress/theme": "^0.15.0",
 		"clsx": "^2.1.1",
 		"tabbable": "^6.4.0"
 	},
@@ -72,5 +72,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0e198c7ac7ca634e73ded9220ce048c0302174dd"
+	"gitHead": "e7856693aeb4e2522d13608cd32c994e4a97cb9c"
 }

package/src/alert-dialog/portal.tsx

@@ -3,10 +3,7 @@ import { forwardRef } from '@wordpress/element';
 import type { PortalProps } from './types';
 
 /**
- * Root element that portals `AlertDialog` overlay content. Pass to
- * `AlertDialog.Popup`'s `portal` prop to customize the portal target and
- * wrapper. When `portal` is omitted, `AlertDialog.Popup` uses this component
- * with default props.
+ * Used to apply custom portal behavior to `AlertDialog`'s overlay content.
  */
 const Portal = forwardRef< HTMLDivElement, PortalProps >(
 	function AlertDialogPortal( props, ref ) {

package/src/alert-dialog/types.ts

@@ -1,11 +1,9 @@
 import type { AlertDialog as _AlertDialog } from '@base-ui/react/alert-dialog';
-import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 
 import type { ComponentProps } from '../utils/types';
 
-export type PortalProps = ComponentPropsWithoutRef<
-	typeof _AlertDialog.Portal
->;
+export type PortalProps = ComponentProps< typeof _AlertDialog.Portal >;
 
 /**
  * The return type of `onConfirm`. Return `void` (or nothing) to auto-close

package/src/badge/stories/e2e/index.story.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Badge } from '../..';
+
+const meta: Meta< typeof Badge > = {
+	title: 'Design System/Components/Badge',
+	component: Badge,
+};
+export default meta;
+
+type Story = StoryObj< typeof Badge >;
+
+export const TextOverflow: Story = {
+	args: {
+		children:
+			'This is an extremely long label thatshoulddemonstratetextoverflow behavior',
+	},
+	parameters: {
+		textOverflowContainers: true,
+	},
+};

package/src/button/stories/e2e/index.story.tsx

@@ -0,0 +1,130 @@
+import type { Meta, StoryFn, StoryObj } from '@storybook/react-vite';
+import { Button } from '../..';
+import type { ButtonProps } from '../../types';
+
+const meta: Meta< typeof Button > = {
+	title: 'Design System/Components/Button',
+	component: Button,
+};
+export default meta;
+
+type Story = StoryObj< typeof Button >;
+
+const variants: NonNullable< ButtonProps[ 'variant' ] >[] = [
+	'solid',
+	'outline',
+	'minimal',
+	'unstyled',
+];
+
+export const VariantStates: StoryFn< typeof Button > = (
+	props: ButtonProps
+) => {
+	const VariantsRow = ( {
+		buttonProps,
+		name,
+	}: {
+		buttonProps?: ButtonProps;
+		name: string;
+	} ) => {
+		return (
+			<tr>
+				<th
+					style={ {
+						fontSize: 13,
+						fontWeight: 'normal',
+						padding: 8,
+						background: '#f3f4f5',
+					} }
+				>
+					{ name }
+				</th>
+				{ variants.map( ( variant ) => (
+					<td key={ variant } style={ { padding: 4 } }>
+						<Button
+							{ ...props }
+							variant={ variant }
+							{ ...buttonProps }
+						/>
+					</td>
+				) ) }
+			</tr>
+		);
+	};
+
+	return (
+		<table>
+			<thead>
+				<tr style={ { background: '#f3f4f5' } }>
+					<th />
+					{ variants.map( ( variant ) => (
+						<th key={ variant } style={ { padding: 8 } }>
+							{ variant }
+						</th>
+					) ) }
+				</tr>
+			</thead>
+			<tbody>
+				<VariantsRow name="(default)" />
+				<VariantsRow
+					name="disabled"
+					buttonProps={ { disabled: true } }
+				/>
+				<VariantsRow
+					name="disabled unfocusable"
+					buttonProps={ {
+						focusableWhenDisabled: false,
+						disabled: true,
+					} }
+				/>
+				<VariantsRow
+					name="loading"
+					buttonProps={ {
+						loading: true,
+					} }
+				/>
+				<VariantsRow
+					name="loading disabled"
+					buttonProps={ {
+						loading: true,
+						disabled: true,
+					} }
+				/>
+				<VariantsRow
+					name="neutral"
+					buttonProps={ {
+						tone: 'neutral',
+					} }
+				/>
+				<VariantsRow
+					name="pressed"
+					buttonProps={ {
+						tone: 'neutral',
+						'aria-pressed': true,
+					} }
+				/>
+				<VariantsRow
+					name="pressed disabled"
+					buttonProps={ {
+						tone: 'neutral',
+						'aria-pressed': true,
+						disabled: true,
+					} }
+				/>
+			</tbody>
+		</table>
+	);
+};
+VariantStates.args = {
+	children: 'Code is poetry',
+};
+
+export const TextOverflow: Story = {
+	args: {
+		children:
+			'This is an extremely long label thatshoulddemonstratetextoverflow behavior',
+	},
+	parameters: {
+		textOverflowContainers: true,
+	},
+};

package/src/button/stories/index.story.tsx

@@ -95,7 +95,7 @@ export const AllTonesAndVariants: Story = {
 		<div
 			style={ {
 				display: 'grid',
-				gridTemplateColumns: 'max-content repeat(2, min-content)',
+				gridTemplateColumns: 'max-content repeat(2, max-content)',
 				color: 'var(--wpds-color-fg-content-neutral)',
 			} }
 		>

package/src/button/style.module.css

@@ -17,6 +17,7 @@
 		--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-block: var(--wpds-dimension-padding-xs);
 		--wp-ui-button-padding-inline: var(--wpds-dimension-padding-md);
 		--wp-ui-button-height: 40px;
 		--wp-ui-button-aspect-ratio: auto; /* Useful for overrides such as icon buttons */
@@ -40,7 +41,9 @@
 		gap: var(--wpds-dimension-gap-sm);
 		aspect-ratio: var(--wp-ui-button-aspect-ratio);
 		min-width: var(--wp-ui-button-min-width);
-		height: var(--wp-ui-button-height);
+		max-width: 100%;
+		min-height: var(--wp-ui-button-height);
+		padding-block: var(--wp-ui-button-padding-block);
 		padding-inline: var(--wp-ui-button-padding-inline);
 		border-style: solid;
 		border-width: 1px;
@@ -52,9 +55,14 @@
 		font-size: var(--wp-ui-button-font-size);
 		font-weight: var(--wp-ui-button-font-weight);
 		line-height: var(--wpds-typography-line-height-sm);
+		text-align: center;
 		text-decoration: none;
 		color: var(--wp-ui-button-foreground-color);
-		cursor: var(--wpds-cursor-control);
+		overflow-wrap: anywhere;
+
+		&:not([data-disabled]) {
+			cursor: var(--wpds-cursor-control);
+		}
 
 		@media not ( prefers-reduced-motion ) {
 			transition: color 0.1s ease-out;
@@ -129,6 +137,7 @@
 	}
 
 	.is-small {
+		--wp-ui-button-padding-block: 0;
 		--wp-ui-button-padding-inline: var(--wpds-dimension-padding-sm);
 		--wp-ui-button-height: 24px;
 	}
@@ -164,7 +173,9 @@
 	}
 
 	.is-neutral {
-		&.is-solid {
+		/* Solid and pressed minimal share the strong appearance */
+		&.is-solid,
+		&.is-minimal[aria-pressed="true"] {
 			--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);
@@ -173,9 +184,9 @@
 			--wp-ui-button-foreground-color-disabled: var(--wpds-color-fg-interactive-neutral-strong-disabled);
 		}
 
-		/* Outline and minimal buttons use the same foreground color */
+		/* Outline and unpressed minimal buttons use the same foreground color */
 		&.is-outline,
-		&.is-minimal {
+		&.is-minimal:not([aria-pressed="true"]) {
 			--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);
@@ -190,7 +201,7 @@
 			--wp-ui-button-border-color-disabled: var(--wpds-color-stroke-interactive-neutral-disabled);
 		}
 
-		&.is-minimal {
+		&.is-minimal:not([aria-pressed="true"]) {
 			--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);
@@ -230,12 +241,6 @@
 		}
 	}
 
-	[aria-pressed="true"].is-minimal.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 loading-animation {

package/src/card/full-bleed.tsx

@@ -7,6 +7,24 @@ import type { FullBleedProps } from './types';
  * A container that breaks out of the card's padding to span edge-to-edge.
  * Useful for full-width images, dividers, or embedded content.
  *
+ * Additional edge-bumping behavior based on placement:
+ *
+ * - As the **first child** of `Card.Header`, it extends flush to the card's
+ *   top edge — ideal for hero images.
+ * - As the **only child** of `Card.Content`, it extends flush to the card's
+ *   top edge when `Content` is the first card section, and to the bottom edge
+ *   when it is the last.
+ *
+ * Inter-sibling spacing inside `Card.Header` / `Card.Content` is consumer-
+ * managed. To add space between a hero `FullBleed` and the following
+ * siblings, compose the parent with `Stack` via the `render` prop:
+ * `<Card.Header render={ <Stack direction="column" gap="lg" /> }>`. This
+ * keeps `FullBleed` a direct child of `Card.Header` so the edge-bump still
+ * fires, while `Stack` provides the gap.
+ *
+ * Inside `CollapsibleCard`, place full-bleed media in `CollapsibleCard.Content`
+ * (not the header). The trigger/panel gap is preserved by design.
+ *
  * Must be used as a direct child of `Card.Content` or `Card.Header`.
  */
 export const FullBleed = forwardRef< HTMLDivElement, FullBleedProps >(

package/src/card/stories/index.story.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Stack } from '@wordpress/ui';
 import * as Card from '../index';
 
 /**
@@ -71,6 +72,56 @@ export const Default: Story = {
 	},
 };
 
+/**
+ * `Card.FullBleed` as the sole child of `Card.Content` spans edge-to-edge
+ * with no padding around it.
+ */
+export const FullBleedCoverOnly: Story = {
+	args: {
+		children: (
+			<Card.Content>
+				<Card.FullBleed>
+					<div
+						style={ {
+							height: 180,
+							background:
+								'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+						} }
+					/>
+				</Card.FullBleed>
+			</Card.Content>
+		),
+	},
+};
+
+/**
+ * When `Card.FullBleed` is the sole child of `Card.Content` and a
+ * `Card.Header` sits above it, the image bumps against the card's side and
+ * bottom edges while the header retains its normal padding.
+ */
+export const FullBleedCoverWithHeader: Story = {
+	args: {
+		children: (
+			<>
+				<Card.Header>
+					<Card.Title>Card title</Card.Title>
+				</Card.Header>
+				<Card.Content>
+					<Card.FullBleed>
+						<div
+							style={ {
+								height: 180,
+								background:
+									'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+							} }
+						/>
+					</Card.FullBleed>
+				</Card.Content>
+			</>
+		),
+	},
+};
+
 /**
  * `Card.FullBleed` breaks out of the card's padding to span
  * edge-to-edge. Useful for images, dividers, or embedded content.
@@ -82,7 +133,7 @@ export const WithFullBleed: Story = {
 				<Card.Header>
 					<Card.Title>Featured image</Card.Title>
 				</Card.Header>
-				<Card.Content>
+				<Card.Content render={ <Stack direction="column" gap="lg" /> }>
 					<Card.FullBleed>
 						<div
 							style={ {
@@ -112,6 +163,69 @@ export const HeaderOnly: Story = {
 	},
 };
 
+/**
+ * When `Card.FullBleed` is the **first child** of `Card.Header`, it extends
+ * flush to the card's top and side edges — ideal for hero images. Content
+ * that follows inside the header is padded normally.
+ */
+export const FullBleedHeroWithTitle: Story = {
+	args: {
+		children: (
+			<>
+				<Card.Header render={ <Stack direction="column" gap="lg" /> }>
+					<Card.FullBleed>
+						<div
+							style={ {
+								height: 180,
+								background:
+									'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+							} }
+						/>
+					</Card.FullBleed>
+					<Card.Title>Hero image card</Card.Title>
+				</Card.Header>
+				<Card.Content>
+					<Text>
+						The image above bleeds to the card&apos;s top and side
+						edges.
+					</Text>
+				</Card.Content>
+			</>
+		),
+	},
+};
+
+/**
+ * When `Card.FullBleed` is the **only child** of `Card.Header`, it fills the
+ * header entirely — top and sides flush to the card edges, no extra padding
+ * below.
+ */
+export const FullBleedHeroOnly: Story = {
+	args: {
+		children: (
+			<>
+				<Card.Header>
+					<Card.FullBleed>
+						<div
+							style={ {
+								height: 180,
+								background:
+									'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+							} }
+						/>
+					</Card.FullBleed>
+				</Card.Header>
+				<Card.Content>
+					<Text>
+						The image above bleeds to the card&apos;s top and side
+						edges.
+					</Text>
+				</Card.Content>
+			</>
+		),
+	},
+};
+
 /**
  * Use the `render` prop to change the underlying HTML elements for
  * better semantics. Here, `Card.Root` renders as a `<section>` and

package/src/card/style.module.css

@@ -38,4 +38,20 @@
 		margin-inline: calc(-1 * var(--wp-ui-card-padding));
 		width: calc(100% + 2 * var(--wp-ui-card-padding));
 	}
+
+	/*
+	 * When FullBleed sits at the start of the first *root* card section, extend
+	 * it flush to the card's top edge. Must use `.root >` so `Card.Content`
+	 * nested inside `CollapsibleCard`'s panel is not treated as `:first-child`
+	 * (which would pull FullBleed up into the header gap).
+	 */
+	.root > :is(.header, .content):first-child > .fullbleed:first-child {
+		margin-block-start: calc(-1 * var(--wp-ui-card-padding));
+	}
+
+	/* When FullBleed sits at the end of the last card section, extend it flush to the card's bottom edge. */
+	:is(.header, .content):last-child > .fullbleed:last-child {
+		margin-block-end: calc(-1 * var(--wp-ui-card-padding));
+	}
+
 }

package/src/card/test/index.test.tsx

@@ -49,7 +49,7 @@ describe( 'Card', () => {
 	} );
 
 	describe( 'fullbleed', () => {
-		it( 'renders children', () => {
+		it( 'renders children inside Content', () => {
 			render(
 				<Card.Root>
 					<Card.Content>
@@ -65,6 +65,23 @@ describe( 'Card', () => {
 
 			expect( screen.getByRole( 'img', { name: 'test' } ) ).toBeVisible();
 		} );
+
+		it( 'renders children inside Header', () => {
+			render(
+				<Card.Root>
+					<Card.Header>
+						<Card.FullBleed>
+							<img
+								src="https://example.com/hero.jpg"
+								alt="hero"
+							/>
+						</Card.FullBleed>
+					</Card.Header>
+				</Card.Root>
+			);
+
+			expect( screen.getByRole( 'img', { name: 'hero' } ) ).toBeVisible();
+		} );
 	} );
 
 	describe( 'render prop', () => {