@yahoo/uds 3.125.0 → 3.126.0

package/dist/automated-config/dist/utils/getConfigVariantProperties.d.ts

@@ -11,8 +11,8 @@ import { SelectedConfigurableProperty } from "../properties.js";
  * @returns A Record of layer names to their properties, or null if no properties are found
  */
 declare function getConfigVariantProperties(variant?: VariantConfig): {
-  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
-  root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  root: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
 } | null; //#endregion
 //#endregion
 export { getConfigVariantProperties };

package/dist/components/Banner/Banner.cjs

@@ -0,0 +1,167 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_styles_styler = require('../../styles/styler.cjs');
+const require_components_client_Pressable = require('../client/Pressable.cjs');
+const require_components_IconSlot = require('../IconSlot.cjs');
+const require_components_Text = require('../Text.cjs');
+const require_components_Banner_utils = require('./utils.cjs');
+let _yahoo_uds_icons = require("@yahoo/uds-icons");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Banner/Banner.tsx
+const BASE_CLASS = "uds-banner";
+/**
+* Inject button variants on Button children that don't have an explicit
+* variant set. The last unset Button gets the banner-mapped "primary"
+* variant; any preceding unset Buttons get "secondary". Leaves Link,
+* other elements, and Buttons with an explicit variant untouched.
+*/
+function bindActionVariants(actions, bannerVariant) {
+	const primaryVariant = require_components_Banner_utils.BANNER_TO_BUTTON_VARIANT[bannerVariant];
+	const unsetIndices = [];
+	actions.forEach((child, i) => {
+		if (require_components_Banner_utils.hasDisplayName(child, "Button") && (0, react.isValidElement)(child) && child.props.variant === void 0) unsetIndices.push(i);
+	});
+	return actions.map((child, i) => {
+		if (!unsetIndices.includes(i)) return child;
+		const variant = i === unsetIndices[unsetIndices.length - 1] ? primaryVariant : "secondary";
+		return (0, react.cloneElement)(child, {
+			key: child.key ?? i,
+			variant
+		});
+	});
+}
+/**
+* **An inline notification banner for contextual messages with optional actions.**
+*
+* @componentType Server component
+*
+* @description
+* Banner is an inline, non-floating notification component that sits in normal document flow.
+* It supports 12 color variants, an optional icon, title, description (truncated to 3 lines),
+* composable actions via children, and an optional dismiss button.
+*
+* Use `title` and `description` props for simple text content, or pass `BannerContent`
+* with `BannerTitle` and `BannerDescription` subcomponents for rich ReactNode content.
+* Any non-BannerContent children are rendered in the actions area.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/banner Banner Docs} for more info
+*
+* @example
+* ```tsx
+* // Simple — props-based
+* <Banner variant="info" startIcon={Info} title="Update available" />
+*
+* // With actions as children
+* <Banner variant="brand-secondary" startIcon={Megaphone} title="Notification"
+*   description="Description text." onDismiss={() => {}}>
+*   <Link href="/docs">Learn more</Link>
+*   <Button variant="secondary" size="sm">Edit</Button>
+*   <Button variant="brand" size="sm">Send</Button>
+* </Banner>
+*
+* // Rich content via subcomponents
+* <Banner variant="alert" startIcon={Error} onDismiss={() => {}}>
+*   <BannerContent>
+*     <BannerTitle>Error <strong>occurred</strong></BannerTitle>
+*     <BannerDescription>Something went wrong.</BannerDescription>
+*   </BannerContent>
+*   <Button variant="alert" size="sm">Retry</Button>
+* </Banner>
+* ```
+*
+* @related [Badge](https://uds.build/docs/components/badge), [Toast](https://uds.build/docs/components/toast)
+**/
+const Banner = (0, react.forwardRef)(function Banner({ variant = "primary", size = "default", startIcon, title, description, onDismiss, dismissAriaLabel = "Dismiss", className, children, ...rest }, ref) {
+	const hasTitle = !!(typeof title === "string" ? title.trim() : title);
+	const hasDescription = !!(typeof description === "string" ? description.trim() : description);
+	const rootStyles = require_styles_styler.getStyles({
+		bannerVariantRoot: variant,
+		bannerSizeRoot: size,
+		className: require_styles_styler.cx(BASE_CLASS, "flex flex-row", hasTitle !== hasDescription ? "items-center" : "items-start", "min-w-[300px]", "shadow-[inset_0px_-20px_20px_-10px_rgba(31,31,31,0.05)]", className)
+	});
+	const iconStyles = require_styles_styler.getStyles({
+		bannerVariantIcon: variant,
+		bannerSizeIcon: size
+	});
+	const titleStyles = require_styles_styler.getStyles({
+		bannerSizeTitle: size,
+		className: "truncate"
+	});
+	const descriptionStyles = require_styles_styler.getStyles({
+		bannerSizeDescription: size,
+		className: "line-clamp-3"
+	});
+	const dismissStyles = require_styles_styler.getStyles({ bannerSizeClose: size });
+	const { content: bannerContent, actions: rawActions } = require_components_Banner_utils.separateChildren(children);
+	const actions = bindActionVariants(rawActions, variant);
+	const hasActions = actions.length > 0;
+	const contentArea = bannerContent ?? (hasTitle || hasDescription ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col self-stretch flex-1 min-w-0 gap-0.5",
+		"data-testid": "banner-content",
+		children: [hasTitle && (typeof title === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+			className: titleStyles,
+			"data-testid": "banner-title",
+			children: title
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "w-full truncate leading-none",
+			"data-testid": "banner-title",
+			children: title
+		})), hasDescription && (typeof description === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+			className: descriptionStyles,
+			"data-testid": "banner-description",
+			children: description
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "w-full line-clamp-3",
+			"data-testid": "banner-description",
+			children: description
+		}))]
+	}) : null);
+	const dismissContainerStyles = require_styles_styler.getStyles({
+		spacing: "2",
+		borderRadius: "full",
+		className: require_styles_styler.cx("transition-[background-color] motion-safe:duration-120", "bg-carbon-15/0 hover:bg-carbon-15/10 active:bg-carbon-15/15", "uds-ring", "shrink-0 self-start")
+	});
+	const dismissButton = onDismiss ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Pressable.Pressable, {
+		"aria-label": dismissAriaLabel,
+		onClick: onDismiss,
+		className: dismissContainerStyles,
+		"data-testid": "banner-dismiss",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+			icon: _yahoo_uds_icons.Cross,
+			iconProps: {
+				color: "current",
+				className: dismissStyles
+			}
+		})
+	}) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		className: rootStyles,
+		...rest,
+		children: [
+			startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: startIcon,
+				iconProps: { color: "current" },
+				className: require_styles_styler.cx(iconStyles, "shrink-0"),
+				"data-testid": "banner-start-icon"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_styles_styler.cx("flex flex-1 min-w-0 flex-col items-start gap-[inherit] uds-sm:flex-row", hasTitle !== hasDescription && "uds-sm:items-center"),
+				children: [contentArea, hasActions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex self-stretch flex-row items-center gap-1.5 uds-sm:self-center uds-sm:shrink-0",
+					"data-testid": "banner-actions",
+					children: actions
+				})]
+			}),
+			dismissButton
+		]
+	});
+});
+Banner.displayName = "Banner";
+
+//#endregion
+exports.Banner = Banner;

package/dist/components/Banner/Banner.d.cts

@@ -0,0 +1,56 @@
+
+import { UniversalBannerProps } from "../../types/dist/index.cjs";
+import "../../tokens/index.cjs";
+import * as react from "react";
+
+//#region src/components/Banner/Banner.d.ts
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>;
+interface BannerProps extends HtmlDivProps, UniversalBannerProps {
+  /** Accessible label for the dismiss button. @default "Dismiss" */
+  dismissAriaLabel?: string;
+}
+/**
+ * **An inline notification banner for contextual messages with optional actions.**
+ *
+ * @componentType Server component
+ *
+ * @description
+ * Banner is an inline, non-floating notification component that sits in normal document flow.
+ * It supports 12 color variants, an optional icon, title, description (truncated to 3 lines),
+ * composable actions via children, and an optional dismiss button.
+ *
+ * Use `title` and `description` props for simple text content, or pass `BannerContent`
+ * with `BannerTitle` and `BannerDescription` subcomponents for rich ReactNode content.
+ * Any non-BannerContent children are rendered in the actions area.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/banner Banner Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * // Simple — props-based
+ * <Banner variant="info" startIcon={Info} title="Update available" />
+ *
+ * // With actions as children
+ * <Banner variant="brand-secondary" startIcon={Megaphone} title="Notification"
+ *   description="Description text." onDismiss={() => {}}>
+ *   <Link href="/docs">Learn more</Link>
+ *   <Button variant="secondary" size="sm">Edit</Button>
+ *   <Button variant="brand" size="sm">Send</Button>
+ * </Banner>
+ *
+ * // Rich content via subcomponents
+ * <Banner variant="alert" startIcon={Error} onDismiss={() => {}}>
+ *   <BannerContent>
+ *     <BannerTitle>Error <strong>occurred</strong></BannerTitle>
+ *     <BannerDescription>Something went wrong.</BannerDescription>
+ *   </BannerContent>
+ *   <Button variant="alert" size="sm">Retry</Button>
+ * </Banner>
+ * ```
+ *
+ * @related [Badge](https://uds.build/docs/components/badge), [Toast](https://uds.build/docs/components/toast)
+ **/
+declare const Banner: react.ForwardRefExoticComponent<BannerProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Banner, type BannerProps };

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,56 @@
+
+import { UniversalBannerProps } from "../../types/dist/index.js";
+import "../../tokens/index.js";
+import * as react from "react";
+
+//#region src/components/Banner/Banner.d.ts
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>;
+interface BannerProps extends HtmlDivProps, UniversalBannerProps {
+  /** Accessible label for the dismiss button. @default "Dismiss" */
+  dismissAriaLabel?: string;
+}
+/**
+ * **An inline notification banner for contextual messages with optional actions.**
+ *
+ * @componentType Server component
+ *
+ * @description
+ * Banner is an inline, non-floating notification component that sits in normal document flow.
+ * It supports 12 color variants, an optional icon, title, description (truncated to 3 lines),
+ * composable actions via children, and an optional dismiss button.
+ *
+ * Use `title` and `description` props for simple text content, or pass `BannerContent`
+ * with `BannerTitle` and `BannerDescription` subcomponents for rich ReactNode content.
+ * Any non-BannerContent children are rendered in the actions area.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/banner Banner Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * // Simple — props-based
+ * <Banner variant="info" startIcon={Info} title="Update available" />
+ *
+ * // With actions as children
+ * <Banner variant="brand-secondary" startIcon={Megaphone} title="Notification"
+ *   description="Description text." onDismiss={() => {}}>
+ *   <Link href="/docs">Learn more</Link>
+ *   <Button variant="secondary" size="sm">Edit</Button>
+ *   <Button variant="brand" size="sm">Send</Button>
+ * </Banner>
+ *
+ * // Rich content via subcomponents
+ * <Banner variant="alert" startIcon={Error} onDismiss={() => {}}>
+ *   <BannerContent>
+ *     <BannerTitle>Error <strong>occurred</strong></BannerTitle>
+ *     <BannerDescription>Something went wrong.</BannerDescription>
+ *   </BannerContent>
+ *   <Button variant="alert" size="sm">Retry</Button>
+ * </Banner>
+ * ```
+ *
+ * @related [Badge](https://uds.build/docs/components/badge), [Toast](https://uds.build/docs/components/toast)
+ **/
+declare const Banner: react.ForwardRefExoticComponent<BannerProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Banner, type BannerProps };

package/dist/components/Banner/Banner.js

@@ -0,0 +1,165 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../../styles/styler.js";
+import { Pressable } from "../client/Pressable.js";
+import { IconSlot } from "../IconSlot.js";
+import { Text } from "../Text.js";
+import { BANNER_TO_BUTTON_VARIANT, hasDisplayName, separateChildren } from "./utils.js";
+import { Cross } from "@yahoo/uds-icons";
+import { cloneElement, forwardRef, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Banner/Banner.tsx
+const BASE_CLASS = "uds-banner";
+/**
+* Inject button variants on Button children that don't have an explicit
+* variant set. The last unset Button gets the banner-mapped "primary"
+* variant; any preceding unset Buttons get "secondary". Leaves Link,
+* other elements, and Buttons with an explicit variant untouched.
+*/
+function bindActionVariants(actions, bannerVariant) {
+	const primaryVariant = BANNER_TO_BUTTON_VARIANT[bannerVariant];
+	const unsetIndices = [];
+	actions.forEach((child, i) => {
+		if (hasDisplayName(child, "Button") && isValidElement(child) && child.props.variant === void 0) unsetIndices.push(i);
+	});
+	return actions.map((child, i) => {
+		if (!unsetIndices.includes(i)) return child;
+		const variant = i === unsetIndices[unsetIndices.length - 1] ? primaryVariant : "secondary";
+		return cloneElement(child, {
+			key: child.key ?? i,
+			variant
+		});
+	});
+}
+/**
+* **An inline notification banner for contextual messages with optional actions.**
+*
+* @componentType Server component
+*
+* @description
+* Banner is an inline, non-floating notification component that sits in normal document flow.
+* It supports 12 color variants, an optional icon, title, description (truncated to 3 lines),
+* composable actions via children, and an optional dismiss button.
+*
+* Use `title` and `description` props for simple text content, or pass `BannerContent`
+* with `BannerTitle` and `BannerDescription` subcomponents for rich ReactNode content.
+* Any non-BannerContent children are rendered in the actions area.
+*
+* @see
+* Check out the {@link https://uds.build/docs/components/banner Banner Docs} for more info
+*
+* @example
+* ```tsx
+* // Simple — props-based
+* <Banner variant="info" startIcon={Info} title="Update available" />
+*
+* // With actions as children
+* <Banner variant="brand-secondary" startIcon={Megaphone} title="Notification"
+*   description="Description text." onDismiss={() => {}}>
+*   <Link href="/docs">Learn more</Link>
+*   <Button variant="secondary" size="sm">Edit</Button>
+*   <Button variant="brand" size="sm">Send</Button>
+* </Banner>
+*
+* // Rich content via subcomponents
+* <Banner variant="alert" startIcon={Error} onDismiss={() => {}}>
+*   <BannerContent>
+*     <BannerTitle>Error <strong>occurred</strong></BannerTitle>
+*     <BannerDescription>Something went wrong.</BannerDescription>
+*   </BannerContent>
+*   <Button variant="alert" size="sm">Retry</Button>
+* </Banner>
+* ```
+*
+* @related [Badge](https://uds.build/docs/components/badge), [Toast](https://uds.build/docs/components/toast)
+**/
+const Banner = forwardRef(function Banner({ variant = "primary", size = "default", startIcon, title, description, onDismiss, dismissAriaLabel = "Dismiss", className, children, ...rest }, ref) {
+	const hasTitle = !!(typeof title === "string" ? title.trim() : title);
+	const hasDescription = !!(typeof description === "string" ? description.trim() : description);
+	const rootStyles = getStyles({
+		bannerVariantRoot: variant,
+		bannerSizeRoot: size,
+		className: cx(BASE_CLASS, "flex flex-row", hasTitle !== hasDescription ? "items-center" : "items-start", "min-w-[300px]", "shadow-[inset_0px_-20px_20px_-10px_rgba(31,31,31,0.05)]", className)
+	});
+	const iconStyles = getStyles({
+		bannerVariantIcon: variant,
+		bannerSizeIcon: size
+	});
+	const titleStyles = getStyles({
+		bannerSizeTitle: size,
+		className: "truncate"
+	});
+	const descriptionStyles = getStyles({
+		bannerSizeDescription: size,
+		className: "line-clamp-3"
+	});
+	const dismissStyles = getStyles({ bannerSizeClose: size });
+	const { content: bannerContent, actions: rawActions } = separateChildren(children);
+	const actions = bindActionVariants(rawActions, variant);
+	const hasActions = actions.length > 0;
+	const contentArea = bannerContent ?? (hasTitle || hasDescription ? /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col self-stretch flex-1 min-w-0 gap-0.5",
+		"data-testid": "banner-content",
+		children: [hasTitle && (typeof title === "string" ? /* @__PURE__ */ jsx(Text, {
+			className: titleStyles,
+			"data-testid": "banner-title",
+			children: title
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "w-full truncate leading-none",
+			"data-testid": "banner-title",
+			children: title
+		})), hasDescription && (typeof description === "string" ? /* @__PURE__ */ jsx(Text, {
+			className: descriptionStyles,
+			"data-testid": "banner-description",
+			children: description
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "w-full line-clamp-3",
+			"data-testid": "banner-description",
+			children: description
+		}))]
+	}) : null);
+	const dismissContainerStyles = getStyles({
+		spacing: "2",
+		borderRadius: "full",
+		className: cx("transition-[background-color] motion-safe:duration-120", "bg-carbon-15/0 hover:bg-carbon-15/10 active:bg-carbon-15/15", "uds-ring", "shrink-0 self-start")
+	});
+	const dismissButton = onDismiss ? /* @__PURE__ */ jsx(Pressable, {
+		"aria-label": dismissAriaLabel,
+		onClick: onDismiss,
+		className: dismissContainerStyles,
+		"data-testid": "banner-dismiss",
+		children: /* @__PURE__ */ jsx(IconSlot, {
+			icon: Cross,
+			iconProps: {
+				color: "current",
+				className: dismissStyles
+			}
+		})
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: rootStyles,
+		...rest,
+		children: [
+			startIcon && /* @__PURE__ */ jsx(IconSlot, {
+				icon: startIcon,
+				iconProps: { color: "current" },
+				className: cx(iconStyles, "shrink-0"),
+				"data-testid": "banner-start-icon"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cx("flex flex-1 min-w-0 flex-col items-start gap-[inherit] uds-sm:flex-row", hasTitle !== hasDescription && "uds-sm:items-center"),
+				children: [contentArea, hasActions && /* @__PURE__ */ jsx("div", {
+					className: "flex self-stretch flex-row items-center gap-1.5 uds-sm:self-center uds-sm:shrink-0",
+					"data-testid": "banner-actions",
+					children: actions
+				})]
+			}),
+			dismissButton
+		]
+	});
+});
+Banner.displayName = "Banner";
+
+//#endregion
+export { Banner };

package/dist/components/Banner/BannerContent.cjs

@@ -0,0 +1,20 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_styles_styler = require('../../styles/styler.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Banner/BannerContent.tsx
+const BannerContent = (0, react.forwardRef)(function BannerContent({ children, className, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: require_styles_styler.cx("flex flex-col items-start self-stretch flex-1 min-w-0", className),
+		...rest,
+		children
+	});
+});
+BannerContent.displayName = "BannerContent";
+
+//#endregion
+exports.BannerContent = BannerContent;

package/dist/components/Banner/BannerContent.d.cts

@@ -0,0 +1,13 @@
+
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/Banner/BannerContent.d.ts
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>;
+interface BannerContentProps extends HtmlDivProps {
+  children: ReactNode;
+  className?: string;
+}
+declare const BannerContent: react.ForwardRefExoticComponent<BannerContentProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { BannerContent, type BannerContentProps };

package/dist/components/Banner/BannerContent.d.ts

@@ -0,0 +1,13 @@
+
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/Banner/BannerContent.d.ts
+type HtmlDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>;
+interface BannerContentProps extends HtmlDivProps {
+  children: ReactNode;
+  className?: string;
+}
+declare const BannerContent: react.ForwardRefExoticComponent<BannerContentProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { BannerContent, type BannerContentProps };

package/dist/components/Banner/BannerContent.js

@@ -0,0 +1,18 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { cx } from "../../styles/styler.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Banner/BannerContent.tsx
+const BannerContent = forwardRef(function BannerContent({ children, className, ...rest }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("flex flex-col items-start self-stretch flex-1 min-w-0", className),
+		...rest,
+		children
+	});
+});
+BannerContent.displayName = "BannerContent";
+
+//#endregion
+export { BannerContent };

package/dist/components/Banner/BannerDescription.cjs

@@ -0,0 +1,47 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_styles_styler = require('../../styles/styler.cjs');
+const require_components_Text = require('../Text.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Banner/BannerDescription.tsx
+/**
+* **Styled description for use inside `BannerContent`.**
+*
+* @description
+* Applies the Banner description typography tokens and truncates text to
+* 3 lines. Use this subcomponent instead of the `description` prop when
+* you need rich ReactNode content.
+*
+* @example
+* ```tsx
+* <Banner variant="alert" startIcon={Error}>
+*   <BannerContent>
+*     <BannerTitle>Something went wrong</BannerTitle>
+*     <BannerDescription>
+*       Please try again or <Link href="/support">contact support</Link>.
+*     </BannerDescription>
+*   </BannerContent>
+* </Banner>
+* ```
+*
+* @see {@link Banner} for the parent component
+* @see {@link BannerContent} for the required wrapper
+*/
+const BannerDescription = (0, react.forwardRef)(function BannerDescription({ children, className, ...rest }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+		ref,
+		className: require_styles_styler.cx(require_styles_styler.getStyles({
+			bannerSizeDescription: "default",
+			className: "w-full line-clamp-3"
+		}), className),
+		...rest,
+		children
+	});
+});
+BannerDescription.displayName = "BannerDescription";
+
+//#endregion
+exports.BannerDescription = BannerDescription;

package/dist/components/Banner/BannerDescription.d.cts

@@ -0,0 +1,36 @@
+
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/components/Banner/BannerDescription.d.ts
+type HtmlSpanProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>;
+interface BannerDescriptionProps extends HtmlSpanProps {
+  children: ReactNode;
+  className?: string;
+}
+/**
+ * **Styled description for use inside `BannerContent`.**
+ *
+ * @description
+ * Applies the Banner description typography tokens and truncates text to
+ * 3 lines. Use this subcomponent instead of the `description` prop when
+ * you need rich ReactNode content.
+ *
+ * @example
+ * ```tsx
+ * <Banner variant="alert" startIcon={Error}>
+ *   <BannerContent>
+ *     <BannerTitle>Something went wrong</BannerTitle>
+ *     <BannerDescription>
+ *       Please try again or <Link href="/support">contact support</Link>.
+ *     </BannerDescription>
+ *   </BannerContent>
+ * </Banner>
+ * ```
+ *
+ * @see {@link Banner} for the parent component
+ * @see {@link BannerContent} for the required wrapper
+ */
+declare const BannerDescription: react.ForwardRefExoticComponent<BannerDescriptionProps & react.RefAttributes<HTMLElement>>;
+//#endregion
+export { BannerDescription, type BannerDescriptionProps };