@veracity/vui 5.1.1 → 5.2.0-alpha.395258.2606090726

package/dist/notification/notification.js

@@ -13,7 +13,7 @@ import NotificationAction from "./notificationAction.js";
 import NotificationIcon from "./notificationIcon.js";
 import NotificationText from "./notificationText.js";
 import NotificationTitle from "./notificationTitle.js";
-import { DEFAULT_VARIANT, resolveNotificationVariant } from "./utils.js";
+import { DEFAULT_VARIANT, inferNotificationLayout, resolveNotificationAria, resolveNotificationVariant } from "./utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/notification/notification.tsx
@@ -53,16 +53,28 @@ const NotificationContainer = styled(Box)`
 * Handles multiple states, like info, error or loading.
 */
 const Notification = vui((props, ref) => {
-	const { action, children, className, icon, intent, isLoading, onClose, showDismissButton, size, status, statusMapping, text, title, variant: variantProp = DEFAULT_VARIANT, align, verticalAlign, ...rest } = props;
+	const { action, align, ariaLive, children, className, icon, intent, isLoading, onClose, role, showDismissButton, size, status, statusMapping, text, title, variant: variantProp = DEFAULT_VARIANT, verticalAlign, ...rest } = props;
 	const statuses = {
 		...notificationStatusMapping,
 		...statusMapping
 	};
 	const statusProps = status ? statuses[status] : void 0;
 	const resolvedVariant = variantProp !== "inline" ? variantProp : statusProps?.variant ?? variantProp;
-	const resolvedIntent = intent ?? statusProps?.intent;
+	const intentFromProps = intent ?? statusProps?.intent;
 	const resolvedIsLoading = isLoading ?? statusProps?.isLoading;
+	const resolvedIntent = resolvedIsLoading && intentFromProps == null ? "info" : intentFromProps;
 	const { themeKey, isBanner } = resolveNotificationVariant(resolvedVariant, resolvedIntent);
+	const layout = inferNotificationLayout({
+		action,
+		text,
+		title
+	});
+	const aria = resolveNotificationAria({
+		intent: resolvedIntent,
+		isLoading: resolvedIsLoading
+	});
+	const resolvedRole = role ?? aria.role;
+	const resolvedAriaLive = ariaLive ?? aria.ariaLive;
 	const styles = useStyleConfig("Notification", {
 		variant: themeKey,
 		size
@@ -78,7 +90,9 @@ const Notification = vui((props, ref) => {
 		intent: resolvedIntent,
 		isLoading: resolvedIsLoading
 	});
-	const alignSelf = (align ?? (verticalAlign === "center" ? "center" : verticalAlign === "flex-start" ? "top" : void 0)) === "center" ? "center" : "flex-start";
+	context.layout = layout;
+	const resolvedAlign = align ?? (verticalAlign === "center" ? "center" : verticalAlign === "flex-start" ? "top" : void 0);
+	const alignSelf = (resolvedAlign ?? (layout === "one-line" ? "center" : "top")) === "center" ? "center" : "flex-start";
 	return /* @__PURE__ */ jsx(NotificationProvider, {
 		value: context,
 		children: /* @__PURE__ */ jsxs(NotificationContainer, {
@@ -86,7 +100,13 @@ const Notification = vui((props, ref) => {
 			borderWidth: 1,
 			className: cs("vui-notification", className),
 			ref,
-			role: "status",
+			role: resolvedRole,
+			"aria-live": resolvedAriaLive,
+			"data-intent": resolvedIntent,
+			"data-variant": isBanner ? "banner" : "inline",
+			"data-layout": layout,
+			"data-loading": resolvedIsLoading ? "true" : void 0,
+			"data-align": resolvedAlign,
 			w: "fit-content",
 			$dismissFg: styles.container?.["--vui-dismiss-fg"],
 			$isBanner: isBanner,
@@ -134,5 +154,5 @@ Notification.displayName = "Notification";
 
 //#endregion
 export { Notification as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=notification.js.map

package/dist/notification/notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.js","names":["shadows"],"sources":["../../src/notification/notification.tsx"],"sourcesContent":["import Box from '../box'\nimport { DismissButton } from '../button'\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport shadows from '../theme/foundations/shadows'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { INTENT_ICON_MAP, notificationStatusMapping, LOADING_ICON_PROPS } from './consts'\nimport { NotificationProvider } from './context'\nimport type { NotificationProps } from './notification.types'\nimport NotificationAction from './notificationAction'\nimport NotificationIcon from './notificationIcon'\nimport NotificationText from './notificationText'\nimport NotificationTitle from './notificationTitle'\nimport { resolveNotificationVariant, DEFAULT_VARIANT } from './utils'\n\nconst linkSwipeAnimation = `\n  @keyframes linkSwipe {\n    from {\n      background-size: 0 1px;\n    }\n    to {\n      background-size: 100% 1px;\n    }\n  }\n`\n\nconst NotificationContainer = styled(Box)<{ $dismissFg?: string; $isBanner?: boolean }>`\n  ${({ $dismissFg }) => $dismissFg && `--vui-dismiss-fg: ${$dismissFg};`}\n  ${linkSwipeAnimation}\n  .vui-notificationText a {\n    text-decoration: none;\n    background: linear-gradient(to right, currentColor, currentColor);\n    background-size: 100% 1px;\n    background-position: 0 100%;\n    background-repeat: no-repeat;\n    padding-bottom: 2px;\n  }\n  .vui-notificationText a:hover {\n    animation: linkSwipe 0.5s ease forwards;\n    background-size: 100% 1px;\n  }\n  ${({ $isBanner }) =>\n    $isBanner &&\n    `\n    box-shadow: ${shadows.md};\n    position: relative;\n    width: 100%;\n    border: none;\n  `}\n`\n\n/**\n * Displays informational content, like text and icon with optional action buttons.\n * Handles multiple states, like info, error or loading.\n */\nexport const Notification = vui<'div', NotificationProps>((props, ref) => {\n  const {\n    action,\n    children,\n    className,\n    icon,\n    intent,\n    isLoading,\n    onClose,\n    showDismissButton,\n    size,\n    status,\n    statusMapping,\n    text,\n    title,\n    variant: variantProp = DEFAULT_VARIANT,\n    align,\n    verticalAlign,\n    ...rest\n  } = props\n\n  const statuses = { ...notificationStatusMapping, ...statusMapping }\n\n  // Derive variant/intent/isLoading from deprecated status prop when not explicitly set.\n  // Explicit props always win; status is a convenience shorthand only.\n  const statusProps = status ? statuses[status] : undefined\n  const resolvedVariant = variantProp !== DEFAULT_VARIANT ? variantProp : (statusProps?.variant ?? variantProp)\n  const resolvedIntent = intent ?? statusProps?.intent\n  const resolvedIsLoading = isLoading ?? statusProps?.isLoading\n\n  const { themeKey, isBanner } = resolveNotificationVariant(resolvedVariant, resolvedIntent)\n\n  const styles = useStyleConfig('Notification', { variant: themeKey, size })\n\n  // Auto-inject icon only when using the default render path (no custom children).\n  // When children are provided, the consumer manages icons via <Notification.Icon>.\n  // An explicit string `icon` prop always wins regardless of children.\n  // Priority: explicit icon → loading → status mapping → intent mapping\n  const autoIconProps = resolvedIsLoading\n    ? LOADING_ICON_PROPS\n    : (statuses[status ?? '']?.iconProps ?? (resolvedIntent ? INTENT_ICON_MAP[resolvedIntent] : undefined))\n\n  const showIcon = icon !== ''\n  const iconName = showIcon ? (isString(icon) ? icon : (!children && autoIconProps?.name) || undefined) : undefined\n\n  const context = filterUndefined<NotificationProps>({\n    size,\n    status,\n    statusMapping,\n    variant: themeKey,\n    intent: resolvedIntent,\n    isLoading: resolvedIsLoading,\n  })\n\n  // verticalAlign is deprecated; map old values to the new align prop\n  const resolvedAlign =\n    align ?? (verticalAlign === 'center' ? 'center' : verticalAlign === 'flex-start' ? 'top' : undefined)\n  const alignSelf = resolvedAlign === 'center' ? 'center' : 'flex-start'\n\n  return (\n    <NotificationProvider value={context}>\n      <NotificationContainer\n        borderRadius=\"md\"\n        borderWidth={1}\n        className={cs('vui-notification', className)}\n        ref={ref}\n        role=\"status\"\n        w=\"fit-content\"\n        $dismissFg={styles.container?.['--vui-dismiss-fg']}\n        $isBanner={isBanner}\n        {...styles.container}\n        {...rest}\n      >\n        {iconName ? (\n          <Box alignSelf={alignSelf} {...styles.icon}>\n            <NotificationIcon {...autoIconProps} name={iconName} />\n          </Box>\n        ) : showIcon ? (\n          icon\n        ) : null}\n\n        {children ?? (\n          <Box column={alignSelf !== 'center'} flex={1} {...styles.content}>\n            <NotificationText>\n              {title ? (\n                isReactText(title) ? (\n                  <NotificationTitle\n                    display={alignSelf !== 'center' ? 'block' : 'inline'}\n                    mb={alignSelf !== 'center' && text ? styles.title?.mb : undefined}\n                    text={title}\n                  />\n                ) : (\n                  title\n                )\n              ) : null}\n              {title && text && alignSelf === 'center' ? ' ' : null}\n              {text}\n            </NotificationText>\n            {action ? <NotificationAction>{action}</NotificationAction> : null}\n          </Box>\n        )}\n\n        {showDismissButton && (\n          <DismissButton\n            alignSelf={alignSelf}\n            aria-label=\"Close\"\n            size=\"md\"\n            onClick={onClose || (() => {})}\n            {...styles.button}\n          />\n        )}\n      </NotificationContainer>\n    </NotificationProvider>\n  )\n}) as VuiComponent<'div', NotificationProps> & {\n  Action: typeof NotificationAction\n  Icon: typeof NotificationIcon\n  Text: typeof NotificationText\n  Title: typeof NotificationTitle\n}\n\nNotification.Action = NotificationAction\nNotification.Icon = NotificationIcon\nNotification.Text = NotificationText\nNotification.Title = NotificationTitle\nNotification.displayName = 'Notification'\n\nexport default Notification\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA0BA,MAAM,wBAAwB,OAAO,GAAG,CAA+C;KAClF,EAAE,iBAAiB,cAAc,qBAAqB,WAAW,GAAG;IACrE;;;;;;;;;EAAmB;;;;;;;;;;;;;KAalB,EAAE,gBACH,aACA;kBACcA,gBAAQ,GAAG;;;;IAIzB;;;;;;AAOJ,MAAa,eAAe,KAA+B,OAAO,QAAQ;CACxE,MAAM,EACJ,QACA,UACA,WACA,MACA,QACA,WACA,SACA,mBACA,MACA,QACA,eACA,MACA,OACA,SAAS,cAAc,iBACvB,OACA,eACA,GAAG,SACD;CAEJ,MAAM,WAAW;EAAE,GAAG;EAA2B,GAAG;CAAc;CAIlE,MAAM,cAAc,SAAS,SAAS,UAAU;CAChD,MAAM,kBAAkB,2BAAkC,cAAe,aAAa,WAAW;CACjG,MAAM,iBAAiB,UAAU,aAAa;CAC9C,MAAM,oBAAoB,aAAa,aAAa;CAEpD,MAAM,EAAE,UAAU,aAAa,2BAA2B,iBAAiB,cAAc;CAEzF,MAAM,SAAS,eAAe,gBAAgB;EAAE,SAAS;EAAU;CAAK,CAAC;CAMzE,MAAM,gBAAgB,oBAClB,qBACC,SAAS,UAAU,KAAK,cAAc,iBAAiB,gBAAgB,kBAAkB;CAE9F,MAAM,WAAW,SAAS;CAC1B,MAAM,WAAW,WAAY,SAAS,IAAI,IAAI,OAAQ,CAAC,YAAY,eAAe,QAAS,SAAa;CAExG,MAAM,UAAU,gBAAmC;EACjD;EACA;EACA;EACA,SAAS;EACT,QAAQ;EACR,WAAW;CACb,CAAC;CAKD,MAAM,aADJ,UAAU,kBAAkB,WAAW,WAAW,kBAAkB,eAAe,QAAQ,aACzD,WAAW,WAAW;CAE1D,OACE,oBAAC,sBAAD;EAAsB,OAAO;YAC3B,qBAAC,uBAAD;GACE,cAAa;GACb,aAAa;GACb,WAAW,GAAG,oBAAoB,SAAS;GACtC;GACL,MAAK;GACL,GAAE;GACF,YAAY,OAAO,YAAY;GAC/B,WAAW;GACX,GAAI,OAAO;GACX,GAAI;aAVN;IAYG,WACC,oBAAC,KAAD;KAAgB;KAAW,GAAI,OAAO;eACpC,oBAAC,kBAAD;MAAkB,GAAI;MAAe,MAAM;KAAW;IACnD,KACH,WACF,OACE;IAEH,YACC,qBAAC,KAAD;KAAK,QAAQ,cAAc;KAAU,MAAM;KAAG,GAAI,OAAO;eAAzD,CACE,qBAAC,kBAAD;MACG,QACC,YAAY,KAAK,IACf,oBAAC,mBAAD;OACE,SAAS,cAAc,WAAW,UAAU;OAC5C,IAAI,cAAc,YAAY,OAAO,OAAO,OAAO,KAAK;OACxD,MAAM;MACP,KAED,QAEA;MACH,SAAS,QAAQ,cAAc,WAAW,MAAM;MAChD;KACe,MACjB,SAAS,oBAAC,oBAAD,YAAqB,OAA2B,KAAI,IAC3D;;IAGN,qBACC,oBAAC,eAAD;KACa;KACX,cAAW;KACX,MAAK;KACL,SAAS,kBAAkB,CAAC;KAC5B,GAAI,OAAO;IACZ;GAEkB;;CACH;AAE1B,CAAC;AAOD,aAAa,SAAS;AACtB,aAAa,OAAO;AACpB,aAAa,OAAO;AACpB,aAAa,QAAQ;AACrB,aAAa,cAAc"}
+{"version":3,"file":"notification.js","names":["shadows"],"sources":["../../src/notification/notification.tsx"],"sourcesContent":["import Box from '../box'\nimport { DismissButton } from '../button'\nimport type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport shadows from '../theme/foundations/shadows'\nimport { cs, filterUndefined, isReactText, isString } from '../utils'\nimport { INTENT_ICON_MAP, notificationStatusMapping, LOADING_ICON_PROPS } from './consts'\nimport { NotificationProvider } from './context'\nimport type { NotificationProps } from './notification.types'\nimport NotificationAction from './notificationAction'\nimport NotificationIcon from './notificationIcon'\nimport NotificationText from './notificationText'\nimport NotificationTitle from './notificationTitle'\nimport {\n  DEFAULT_VARIANT,\n  inferNotificationLayout,\n  resolveNotificationAria,\n  resolveNotificationVariant,\n} from './utils'\n\nconst linkSwipeAnimation = `\n  @keyframes linkSwipe {\n    from {\n      background-size: 0 1px;\n    }\n    to {\n      background-size: 100% 1px;\n    }\n  }\n`\n\nconst NotificationContainer = styled(Box)<{ $dismissFg?: string; $isBanner?: boolean }>`\n  ${({ $dismissFg }) => $dismissFg && `--vui-dismiss-fg: ${$dismissFg};`}\n  ${linkSwipeAnimation}\n  .vui-notificationText a {\n    text-decoration: none;\n    background: linear-gradient(to right, currentColor, currentColor);\n    background-size: 100% 1px;\n    background-position: 0 100%;\n    background-repeat: no-repeat;\n    padding-bottom: 2px;\n  }\n  .vui-notificationText a:hover {\n    animation: linkSwipe 0.5s ease forwards;\n    background-size: 100% 1px;\n  }\n  ${({ $isBanner }) =>\n    $isBanner &&\n    `\n    box-shadow: ${shadows.md};\n    position: relative;\n    width: 100%;\n    border: none;\n  `}\n`\n\n/**\n * Displays informational content, like text and icon with optional action buttons.\n * Handles multiple states, like info, error or loading.\n */\nexport const Notification = vui<'div', NotificationProps>((props, ref) => {\n  const {\n    action,\n    align,\n    ariaLive,\n    children,\n    className,\n    icon,\n    intent,\n    isLoading,\n    onClose,\n    role,\n    showDismissButton,\n    size,\n    status,\n    statusMapping,\n    text,\n    title,\n    variant: variantProp = DEFAULT_VARIANT,\n    verticalAlign,\n    ...rest\n  } = props\n\n  const statuses = { ...notificationStatusMapping, ...statusMapping }\n\n  // Derive variant/intent/isLoading from deprecated status prop when not explicitly set.\n  // Explicit props always win; status is a convenience shorthand only.\n  const statusProps = status ? statuses[status] : undefined\n  const resolvedVariant = variantProp !== DEFAULT_VARIANT ? variantProp : (statusProps?.variant ?? variantProp)\n  // Q9: when isLoading is true, default intent to 'info' if not specified.\n  const intentFromProps = intent ?? statusProps?.intent\n  const resolvedIsLoading = isLoading ?? statusProps?.isLoading\n  const resolvedIntent = resolvedIsLoading && intentFromProps == null ? 'info' : intentFromProps\n\n  const { themeKey, isBanner } = resolveNotificationVariant(resolvedVariant, resolvedIntent)\n\n  // Q2: infer layout from content composition; no `layout` prop.\n  const layout = inferNotificationLayout({ action, text, title })\n\n  // Q4: auto-map role/aria-live from intent (and isLoading). Explicit props win.\n  const aria = resolveNotificationAria({ intent: resolvedIntent, isLoading: resolvedIsLoading })\n  const resolvedRole = role ?? aria.role\n  const resolvedAriaLive = ariaLive ?? aria.ariaLive\n\n  const styles = useStyleConfig('Notification', { variant: themeKey, size })\n\n  // Auto-inject icon only when using the default render path (no custom children).\n  // When children are provided, the consumer manages icons via <Notification.Icon>.\n  // An explicit string `icon` prop always wins regardless of children.\n  // Priority: explicit icon → loading → status mapping → intent mapping\n  const autoIconProps = resolvedIsLoading\n    ? LOADING_ICON_PROPS\n    : (statuses[status ?? '']?.iconProps ?? (resolvedIntent ? INTENT_ICON_MAP[resolvedIntent] : undefined))\n\n  const showIcon = icon !== ''\n  const iconName = showIcon ? (isString(icon) ? icon : (!children && autoIconProps?.name) || undefined) : undefined\n\n  const context = filterUndefined<NotificationProps>({\n    size,\n    status,\n    statusMapping,\n    variant: themeKey,\n    intent: resolvedIntent,\n    isLoading: resolvedIsLoading,\n  })\n  // Q10: expose the inferred layout to Notification.Action via context.\n  // Use a non-prop key so the context payload doesn't pollute NotificationProps consumers.\n  ;(context as Record<string, unknown>).layout = layout\n\n  // verticalAlign is deprecated; map old values to the new align prop\n  const resolvedAlign =\n    align ?? (verticalAlign === 'center' ? 'center' : verticalAlign === 'flex-start' ? 'top' : undefined)\n  // Q11: align is the only manual override. When omitted, fall back to layout-driven default.\n  const layoutDefaultAlign = layout === 'one-line' ? 'center' : 'top'\n  const alignSelf = (resolvedAlign ?? layoutDefaultAlign) === 'center' ? 'center' : 'flex-start'\n\n  return (\n    <NotificationProvider value={context}>\n      <NotificationContainer\n        borderRadius=\"md\"\n        borderWidth={1}\n        className={cs('vui-notification', className)}\n        ref={ref}\n        role={resolvedRole}\n        aria-live={resolvedAriaLive}\n        data-intent={resolvedIntent}\n        data-variant={isBanner ? 'banner' : 'inline'}\n        data-layout={layout}\n        data-loading={resolvedIsLoading ? 'true' : undefined}\n        data-align={resolvedAlign}\n        w=\"fit-content\"\n        $dismissFg={styles.container?.['--vui-dismiss-fg']}\n        $isBanner={isBanner}\n        {...styles.container}\n        {...rest}\n      >\n        {iconName ? (\n          <Box alignSelf={alignSelf} {...styles.icon}>\n            <NotificationIcon {...autoIconProps} name={iconName} />\n          </Box>\n        ) : showIcon ? (\n          icon\n        ) : null}\n\n        {children ?? (\n          <Box column={alignSelf !== 'center'} flex={1} {...styles.content}>\n            <NotificationText>\n              {title ? (\n                isReactText(title) ? (\n                  <NotificationTitle\n                    display={alignSelf !== 'center' ? 'block' : 'inline'}\n                    mb={alignSelf !== 'center' && text ? styles.title?.mb : undefined}\n                    text={title}\n                  />\n                ) : (\n                  title\n                )\n              ) : null}\n              {title && text && alignSelf === 'center' ? ' ' : null}\n              {text}\n            </NotificationText>\n            {action ? <NotificationAction>{action}</NotificationAction> : null}\n          </Box>\n        )}\n\n        {showDismissButton && (\n          <DismissButton\n            alignSelf={alignSelf}\n            aria-label=\"Close\"\n            size=\"md\"\n            onClick={onClose || (() => {})}\n            {...styles.button}\n          />\n        )}\n      </NotificationContainer>\n    </NotificationProvider>\n  )\n}) as VuiComponent<'div', NotificationProps> & {\n  Action: typeof NotificationAction\n  Icon: typeof NotificationIcon\n  Text: typeof NotificationText\n  Title: typeof NotificationTitle\n}\n\nNotification.Action = NotificationAction\nNotification.Icon = NotificationIcon\nNotification.Text = NotificationText\nNotification.Title = NotificationTitle\nNotification.displayName = 'Notification'\n\nexport default Notification\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA+BA,MAAM,wBAAwB,OAAO,GAAG,CAAC,AAA8C;KAClF,EAAE,iBAAiB,cAAc,qBAAqB,WAAW,GAAG;IACrE;;;;;;;;;EAAmB;;;;;;;;;;;;;KAalB,EAAE,gBACH,aACA;kBACcA,gBAAQ,GAAG;;;;IAIzB;;;;;;AAOJ,MAAa,eAAe,KAA+B,OAAO,QAAQ;CACxE,MAAM,EACJ,QACA,OACA,UACA,UACA,WACA,MACA,QACA,WACA,SACA,MACA,mBACA,MACA,QACA,eACA,MACA,OACA,SAAS,cAAc,iBACvB,eACA,GAAG,SACD;CAEJ,MAAM,WAAW;EAAE,GAAG;EAA2B,GAAG;CAAc;CAIlE,MAAM,cAAc,SAAS,SAAS,UAAU;CAChD,MAAM,kBAAkB,2BAAkC,cAAe,aAAa,WAAW;CAEjG,MAAM,kBAAkB,UAAU,aAAa;CAC/C,MAAM,oBAAoB,aAAa,aAAa;CACpD,MAAM,iBAAiB,qBAAqB,mBAAmB,OAAO,SAAS;CAE/E,MAAM,EAAE,UAAU,aAAa,2BAA2B,iBAAiB,cAAc;CAGzF,MAAM,SAAS,wBAAwB;EAAE;EAAQ;EAAM;CAAM,CAAC;CAG9D,MAAM,OAAO,wBAAwB;EAAE,QAAQ;EAAgB,WAAW;CAAkB,CAAC;CAC7F,MAAM,eAAe,QAAQ,KAAK;CAClC,MAAM,mBAAmB,YAAY,KAAK;CAE1C,MAAM,SAAS,eAAe,gBAAgB;EAAE,SAAS;EAAU;CAAK,CAAC;CAMzE,MAAM,gBAAgB,oBAClB,qBACC,SAAS,UAAU,GAAG,EAAE,cAAc,iBAAiB,gBAAgB,kBAAkB;CAE9F,MAAM,WAAW,SAAS;CAC1B,MAAM,WAAW,WAAY,SAAS,IAAI,IAAI,OAAQ,CAAC,YAAY,eAAe,QAAS,SAAa;CAExG,MAAM,UAAU,gBAAmC;EACjD;EACA;EACA;EACA,SAAS;EACT,QAAQ;EACR,WAAW;CACb,CAAC;CAGA,AAAC,QAAoC,SAAS;CAG/C,MAAM,gBACJ,UAAU,kBAAkB,WAAW,WAAW,kBAAkB,eAAe,QAAQ;CAG7F,MAAM,aAAa,kBADQ,WAAW,aAAa,WAAW,YACF,WAAW,WAAW;CAElF,OACE,oBAAC,sBAAD;EAAsB,OAAO;YAC3B,qBAAC,uBAAD;GACE,cAAa;GACb,aAAa;GACb,WAAW,GAAG,oBAAoB,SAAS;GACtC;GACL,MAAM;GACN,aAAW;GACX,eAAa;GACb,gBAAc,WAAW,WAAW;GACpC,eAAa;GACb,gBAAc,oBAAoB,SAAS;GAC3C,cAAY;GACZ,GAAE;GACF,YAAY,OAAO,YAAY;GAC/B,WAAW;GACX,GAAI,OAAO;GACX,GAAI;aAhBN;IAkBG,WACC,oBAAC,KAAD;KAAgB;KAAW,GAAI,OAAO;eACpC,oBAAC,kBAAD;MAAkB,GAAI;MAAe,MAAM;KAAW;IACnD,KACH,WACF,OACE;IAEH,YACC,qBAAC,KAAD;KAAK,QAAQ,cAAc;KAAU,MAAM;KAAG,GAAI,OAAO;eAAzD,CACE,qBAAC,kBAAD;MACG,QACC,YAAY,KAAK,IACf,oBAAC,mBAAD;OACE,SAAS,cAAc,WAAW,UAAU;OAC5C,IAAI,cAAc,YAAY,OAAO,OAAO,OAAO,KAAK;OACxD,MAAM;MACP,KAED,QAEA;MACH,SAAS,QAAQ,cAAc,WAAW,MAAM;MAChD;KACe,MACjB,SAAS,oBAAC,oBAAD,YAAqB,OAA2B,KAAI,IAC3D;;IAGN,qBACC,oBAAC,eAAD;KACa;KACX,cAAW;KACX,MAAK;KACL,SAAS,kBAAkB,CAAC;KAC5B,GAAI,OAAO;IACZ;GAEkB;;CACH;AAE1B,CAAC;AAOD,aAAa,SAAS;AACtB,aAAa,OAAO;AACpB,aAAa,OAAO;AACpB,aAAa,QAAQ;AACrB,aAAa,cAAc"}

package/dist/notification/notification.types.d.ts

@@ -1,29 +1,48 @@
 import { ThemingProps } from "../theme/types.js";
 import { IconProp, IconProps } from "../icon/icon.types.js";
 import { BoxProps } from "../box/box.types.js";
-import { JSX, ReactNode } from "react";
+import { AriaAttributes, AriaRole, JSX, ReactNode } from "react";
 
 //#region src/notification/notification.types.d.ts
 type NotificationProps = Omit<BoxProps, 'size' | 'variant'> & Omit<ThemingProps<'Notification'>, 'variant'> & {
-  /** Socket displaying a button on the right. */action?: ReactNode; /** Available theme colors for this component. @deprecated */
+  /** Socket displaying a button on the right. */action?: ReactNode; /** Vertical alignment of icon and dismiss button. Use `'center'` for single-line notifications. Manual override for the inferred layout. */
+  align?: 'top' | 'center';
+  /**
+   * ARIA live-region politeness. Auto-mapped from `intent` when omitted:
+   * info/success → `'polite'`, warning/danger → `'assertive'`. Forced to `'polite'` when `isLoading` is true.
+   */
+  ariaLive?: AriaAttributes['aria-live']; /** Available theme colors for this component. @deprecated */
   colorScheme?: 'blue' | 'green' | 'red' | 'yellow'; /** Socket displaying an icon on the left. Set to `''` to suppress auto-injected icons. @deprecated Icons are now auto-injected based on `intent`. */
   icon?: IconProp | JSX.Element | ''; /** Semantic colour intent — drives variant colour and auto-injects the matching icon. */
-  intent?: NotificationIntent; /** When true, shows a loading spinner icon and suppresses intent-based icon injection. */
+  intent?: NotificationIntent; /** When true, shows a loading spinner icon and suppresses intent-based icon injection. Forces `role="status"` / `aria-live="polite"` and defaults `intent` to `'info'` when not specified. */
   isLoading?: boolean; /** Callback function for the dismiss button. Only used when showDismissButton is true. */
-  onClose?: () => void; /** Controls dismiss button visibility. When true, shows the button. Provide onClose for custom handler or use default. */
+  onClose?: () => void;
+  /**
+   * ARIA role override. Auto-mapped from `intent` when omitted:
+   * info/success → `'status'`, warning/danger → `'alert'`. Forced to `'status'` when `isLoading` is true.
+   */
+  role?: AriaRole; /** Controls dismiss button visibility. When true, shows the button. Provide onClose for custom handler or use default. */
   showDismissButton?: boolean; /** Modifies Notification style and content based on the given status. @deprecated Use `variant` + `intent` instead. */
   status?: NotificationStatus; /** Object definition of styles and content for each status. @deprecated Use `variant` + `intent` instead. */
   statusMapping?: NotificationStatusMapping; /** Socket displaying text in the middle. */
   text?: ReactNode; /** Socket displaying title in the middle. */
   title?: ReactNode; /** The notification display style, or a legacy compound variant string. */
-  variant?: NotificationVariantHierarchy | NotificationVariantLegacy | (string & {}); /** Vertical alignment of icon and dismiss button. Use `'center'` for single-line notifications. */
-  align?: 'top' | 'center'; /** @deprecated Use `align` instead. `'flex-start'` maps to `'top'`. */
+  variant?: NotificationVariantHierarchy | NotificationVariantLegacy | (string & {}); /** @deprecated Use `align` instead. `'flex-start'` maps to `'top'`. */
   verticalAlign?: 'center' | 'flex-start';
 };
 /** Semantic colour intents for the two-prop API. */
 type NotificationIntent = 'info' | 'success' | 'danger' | 'warning';
 /** Display style hierarchy for the two-prop API. */
 type NotificationVariantHierarchy = 'inline' | 'banner';
+/**
+ * Inferred layout based on content composition:
+ * - `'button-down'` when an `action` socket is present
+ * - `'multiline'` when both `title` and `text` are present (and no action)
+ * - `'one-line'` otherwise
+ *
+ * Layout is inference-only — there is no `layout` prop. Use `align` to override visual alignment.
+ */
+type NotificationLayout = 'one-line' | 'multiline' | 'button-down';
 /**
  * Legacy compound variant strings — kept for backward compatibility.
  * Prefer `variant` + `intent` instead.
@@ -44,6 +63,6 @@ type NotificationStatusEntry = {
 };
 type NotificationStatusMapping = Record<string, NotificationStatusEntry>;
 //#endregion
-export { NotificationIntent, NotificationProps, NotificationStatus, NotificationStatusEntry, NotificationStatusMapping, NotificationVariant, NotificationVariantHierarchy, NotificationVariantLegacy };
+export { NotificationIntent, NotificationLayout, NotificationProps, NotificationStatus, NotificationStatusEntry, NotificationStatusMapping, NotificationVariant, NotificationVariantHierarchy, NotificationVariantLegacy };
 
 //# sourceMappingURL=notification.types.d.ts.map

package/dist/notification/notification.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification.types.d.ts","names":[],"sources":["../../src/notification/notification.types.ts"],"mappings":";;;;;;KAMY,iBAAA,GAAoB,IAAA,CAAK,QAAA,wBACnC,IAAA,CAAK,YAAA;iDAEH,MAAA,GAAS,SAAA;EAET,WAAA,wCALQ;EAOR,IAAA,GAAO,QAAA,GAAW,GAAA,CAAI,OAAA;EAEtB,MAAA,GAAS,kBAAA,EATmB;EAW5B,SAAA,YAVF;EAYE,OAAA,eANO;EAQP,iBAAA,YANS;EAQT,MAAA,GAAS,kBAAA,EAEO;EAAhB,aAAA,GAAgB,yBAAA,EAIR;EAFR,IAAA,GAAO,SAAA,EAIkC;EAFzC,KAAA,GAAQ,SAAA,EAE0D;EAAlE,OAAA,GAAU,4BAAA,GAA+B,yBAAA,kBAzBR;EA2BjC,KAAA,qBA1BG;EA4BH,aAAA;AAAA;;KAIQ,kBAAA;;KAGA,4BAAA;;;;;;KAOA,yBAAA;;;;;KAcA,mBAAA,GAAsB,4BAAA,GAA+B,yBAAyB;AAAA,KAE9E,kBAAA;AAAA,KAYA,uBAAA;EACV,SAAA,EAAW,SAAA;EACX,MAAA,GAAS,kBAAA;EACT,SAAA;EACA,OAAA,GAAU,4BAAA,GAA+B,yBAAA;AAAA;AAAA,KAG/B,yBAAA,GAA4B,MAAM,SAAS,uBAAA"}
+{"version":3,"file":"notification.types.d.ts","names":[],"sources":["../../src/notification/notification.types.ts"],"mappings":";;;;;;KAMY,iBAAA,GAAoB,IAAA,CAAK,QAAA,wBACnC,IAAA,CAAK,YAAA;iDAEH,MAAA,GAAS,SAAA;EAET,KAAA;EALQ;;;;EAUR,QAAA,GAAW,cAAA,eATR;EAWH,WAAA,wCATS;EAWT,IAAA,GAAO,QAAA,GAAW,GAAA,CAAI,OAAA,OAAf;EAEP,MAAA,GAAS,kBAAA,EAAA;EAET,SAAA,YAWS;EATT,OAAA;EAaO;;;;EARP,IAAA,GAAO,QAAA,EAY2D;EAVlE,iBAAA,YA3BiC;EA6BjC,MAAA,GAAS,kBAAA,EA5BN;EA8BH,aAAA,GAAgB,yBAAA,EA5BP;EA8BT,IAAA,GAAO,SAAA,EAvBP;EAyBA,KAAA,GAAQ,SAAA,EAvBR;EAyBA,OAAA,GAAU,4BAAA,GAA+B,yBAAA,kBAvBlC;EAyBP,aAAA;AAAA;;KAIQ,kBAAA;;KAGA,4BAAA;;;;;;;;;KAUA,kBAAA;;;;;;KAOA,yBAAA;;AAxBK;AAIjB;;KAkCY,mBAAA,GAAsB,4BAAA,GAA+B,yBAAyB;AAAA,KAE9E,kBAAA;AAAA,KAYA,uBAAA;EACV,SAAA,EAAW,SAAA;EACX,MAAA,GAAS,kBAAA;EACT,SAAA;EACA,OAAA,GAAU,4BAAA,GAA+B,yBAAA;AAAA;AAAA,KAG/B,yBAAA,GAA4B,MAAM,SAAS,uBAAA"}

package/dist/notification/notificationAction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notificationAction.d.ts","names":[],"sources":["../../src/notification/notificationAction.tsx"],"mappings":";;;;cAOa,kBAAA,EAAkB,YAAA,QAAA,QAAA"}
+{"version":3,"file":"notificationAction.d.ts","names":[],"sources":["../../src/notification/notificationAction.tsx"],"mappings":";;;;cAQa,kBAAA,EAAkB,YAAA,QAAA,QAAA"}

package/dist/notification/notificationAction.js

@@ -9,10 +9,15 @@ import { jsx } from "react/jsx-runtime";
 /** Displays an action button within the Notification. */
 const NotificationAction = vui((props, ref) => {
 	const { children, className, ...rest } = props;
-	const styles = useStyleConfig("Notification", useNotificationContext());
+	const ctx = useNotificationContext();
+	const styles = useStyleConfig("Notification", ctx);
+	const layout = ctx?.layout;
+	const isButtonDown = layout === "button-down";
 	return /* @__PURE__ */ jsx(Box, {
 		className: cs("vui-notificationAction", className),
 		ref,
+		"data-layout": layout,
+		w: isButtonDown ? "100%" : void 0,
 		...styles.actionBox,
 		...rest,
 		children
@@ -22,5 +27,5 @@ NotificationAction.displayName = "NotificationAction";
 
 //#endregion
 export { NotificationAction as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=notificationAction.js.map

package/dist/notification/notificationAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"notificationAction.js","names":[],"sources":["../../src/notification/notificationAction.tsx"],"sourcesContent":["import Box from '../box'\nimport type { BoxProps } from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useNotificationContext } from './context'\n\n/** Displays an action button within the Notification. */\nexport const NotificationAction = vui<'div', BoxProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const styles = useStyleConfig('Notification', useNotificationContext())\n\n  return (\n    <Box className={cs('vui-notificationAction', className)} ref={ref} {...styles.actionBox} {...rest}>\n      {children}\n    </Box>\n  )\n})\n\nNotificationAction.displayName = 'NotificationAction'\nexport default NotificationAction\n"],"mappings":";;;;;;;;;AAOA,MAAa,qBAAqB,KAAsB,OAAO,QAAQ;CACrE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,SAAS,eAAe,gBAAgB,uBAAuB,CAAC;CAEtE,OACE,oBAAC,KAAD;EAAK,WAAW,GAAG,0BAA0B,SAAS;EAAQ;EAAK,GAAI,OAAO;EAAW,GAAI;EAC1F;CACE;AAET,CAAC;AAED,mBAAmB,cAAc"}
+{"version":3,"file":"notificationAction.js","names":[],"sources":["../../src/notification/notificationAction.tsx"],"sourcesContent":["import Box from '../box'\nimport type { BoxProps } from '../box'\nimport { useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport { useNotificationContext } from './context'\nimport type { NotificationLayout } from './notification.types'\n\n/** Displays an action button within the Notification. */\nexport const NotificationAction = vui<'div', BoxProps>((props, ref) => {\n  const { children, className, ...rest } = props\n  const ctx = useNotificationContext()\n  const styles = useStyleConfig('Notification', ctx)\n\n  // Q10: When rendered inside a button-down layout, the action region stretches\n  // full-width and exposes `data-layout` so consumers (and the SCSS reference)\n  // can scope styles to the button-down CTA without coupling to Button internals.\n  // TODO(763859 follow-up): inject intent-colored Button variant when the child\n  // is a VUI Button without an explicit `variant` prop.\n  const layout = (ctx as { layout?: NotificationLayout })?.layout\n  const isButtonDown = layout === 'button-down'\n\n  return (\n    <Box\n      className={cs('vui-notificationAction', className)}\n      ref={ref}\n      data-layout={layout}\n      w={isButtonDown ? '100%' : undefined}\n      {...styles.actionBox}\n      {...rest}\n    >\n      {children}\n    </Box>\n  )\n})\n\nNotificationAction.displayName = 'NotificationAction'\nexport default NotificationAction\n"],"mappings":";;;;;;;;;AAQA,MAAa,qBAAqB,KAAsB,OAAO,QAAQ;CACrE,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CACzC,MAAM,MAAM,uBAAuB;CACnC,MAAM,SAAS,eAAe,gBAAgB,GAAG;CAOjD,MAAM,SAAU,KAAyC;CACzD,MAAM,eAAe,WAAW;CAEhC,OACE,oBAAC,KAAD;EACE,WAAW,GAAG,0BAA0B,SAAS;EAC5C;EACL,eAAa;EACb,GAAG,eAAe,SAAS;EAC3B,GAAI,OAAO;EACX,GAAI;EAEH;CACE;AAET,CAAC;AAED,mBAAmB,cAAc"}

package/dist/notification/notificationIcon.js

@@ -31,5 +31,5 @@ NotificationIcon.displayName = "NotificationIcon";
 
 //#endregion
 export { NotificationIcon as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=notificationIcon.js.map

package/dist/notification/notificationIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"notificationIcon.js","names":[],"sources":["../../src/notification/notificationIcon.tsx"],"sourcesContent":["import { vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { notificationStatusMapping, INTENT_ICON_MAP, LOADING_ICON_PROPS } from './consts'\nimport { useNotificationContext } from './context'\nimport type { NotificationIntent } from './notification.types'\n\n/** Displays an icon based on the status or intent within the Notification. */\nexport const NotificationIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, alignSelf, ...rest } = props\n  const mergedProps = { ...useNotificationContext(), ...props }\n\n  const { status = '', statusMapping, intent, isLoading } = mergedProps\n\n  const resolvedIconProps = isLoading\n    ? LOADING_ICON_PROPS\n    : ({ ...notificationStatusMapping, ...statusMapping }[status]?.iconProps ??\n      (intent ? INTENT_ICON_MAP[intent as NotificationIntent] : undefined))\n\n  return (\n    <Icon\n      alignSelf={alignSelf}\n      className={cs('vui-notificationIcon', className)}\n      ref={ref}\n      size=\"md\"\n      variant={isLoading ? 'spinning' : 'static'}\n      {...resolvedIconProps}\n      {...rest}\n    />\n  )\n})\n\nNotificationIcon.displayName = 'NotificationIcon'\n\nexport default NotificationIcon\n"],"mappings":";;;;;;;;;AASA,MAAa,mBAAmB,KAAuB,OAAO,QAAQ;CACpE,MAAM,EAAE,WAAW,WAAW,GAAG,SAAS;CAG1C,MAAM,EAAE,SAAS,IAAI,eAAe,QAAQ,cAAc;EAFpC,GAAG,uBAAuB;EAAG,GAAG;CAEc;CAEpE,MAAM,oBAAoB,YACtB,qBACC;EAAE,GAAG;EAA2B,GAAG;CAAc,EAAE,SAAS,cAC5D,SAAS,gBAAgB,UAAgC;CAE9D,OACE,oBAAC,MAAD;EACa;EACX,WAAW,GAAG,wBAAwB,SAAS;EAC1C;EACL,MAAK;EACL,SAAS,YAAY,aAAa;EAClC,GAAI;EACJ,GAAI;CACL;AAEL,CAAC;AAED,iBAAiB,cAAc"}
+{"version":3,"file":"notificationIcon.js","names":[],"sources":["../../src/notification/notificationIcon.tsx"],"sourcesContent":["import { vui } from '../core'\nimport type { IconProps } from '../icon'\nimport Icon from '../icon'\nimport { cs } from '../utils'\nimport { notificationStatusMapping, INTENT_ICON_MAP, LOADING_ICON_PROPS } from './consts'\nimport { useNotificationContext } from './context'\nimport type { NotificationIntent } from './notification.types'\n\n/** Displays an icon based on the status or intent within the Notification. */\nexport const NotificationIcon = vui<'svg', IconProps>((props, ref) => {\n  const { className, alignSelf, ...rest } = props\n  const mergedProps = { ...useNotificationContext(), ...props }\n\n  const { status = '', statusMapping, intent, isLoading } = mergedProps\n\n  const resolvedIconProps = isLoading\n    ? LOADING_ICON_PROPS\n    : ({ ...notificationStatusMapping, ...statusMapping }[status]?.iconProps ??\n      (intent ? INTENT_ICON_MAP[intent as NotificationIntent] : undefined))\n\n  return (\n    <Icon\n      alignSelf={alignSelf}\n      className={cs('vui-notificationIcon', className)}\n      ref={ref}\n      size=\"md\"\n      variant={isLoading ? 'spinning' : 'static'}\n      {...resolvedIconProps}\n      {...rest}\n    />\n  )\n})\n\nNotificationIcon.displayName = 'NotificationIcon'\n\nexport default NotificationIcon\n"],"mappings":";;;;;;;;;AASA,MAAa,mBAAmB,KAAuB,OAAO,QAAQ;CACpE,MAAM,EAAE,WAAW,WAAW,GAAG,SAAS;CAG1C,MAAM,EAAE,SAAS,IAAI,eAAe,QAAQ,cAAc;EAFpC,GAAG,uBAAuB;EAAG,GAAG;CAEc;CAEpE,MAAM,oBAAoB,YACtB,qBACC;EAAE,GAAG;EAA2B,GAAG;CAAc,EAAE,OAAO,EAAE,cAC5D,SAAS,gBAAgB,UAAgC;CAE9D,OACE,oBAAC,MAAD;EACa;EACX,WAAW,GAAG,wBAAwB,SAAS;EAC1C;EACL,MAAK;EACL,SAAS,YAAY,aAAa;EAClC,GAAI;EACJ,GAAI;CACL;AAEL,CAAC;AAED,iBAAiB,cAAc"}

package/dist/notification/notificationText.js

@@ -21,5 +21,5 @@ NotificationText.displayName = "NotificationText";
 
 //#endregion
 export { NotificationText as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=notificationText.js.map

package/dist/notification/notificationTitle.js

@@ -22,5 +22,5 @@ NotificationTitle.displayName = "NotificationTitle";
 
 //#endregion
 export { NotificationTitle as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=notificationTitle.js.map

package/dist/notification/theme.js

@@ -19,16 +19,25 @@ const intentTokens = {
 	success: {
 		feedbackSubtle: "var(--vui-feedback-success-subtle)",
 		feedbackSolid: "var(--vui-feedback-success-solid)",
-		dismissColor: "var(--vui-action-success-subtle-inverse)"
+		dismissColor: "var(--vui-feedback-success-solid)"
 	}
 };
 /** Variant styles per visual hierarchy, composed from intent tokens. */
-const hierarchyRules = { inline: (t) => ({ container: {
-	bg: t.feedbackSubtle,
-	borderColor: t.feedbackSolid,
-	color: t.feedbackSolid,
-	"--vui-dismiss-fg": t.dismissColor
-} }) };
+const hierarchyRules = {
+	inline: (t) => ({ container: {
+		bg: t.feedbackSubtle,
+		borderColor: t.feedbackSolid,
+		color: t.feedbackSolid,
+		"--vui-dismiss-fg": t.dismissColor
+	} }),
+	banner: (t) => ({ container: {
+		bg: t.feedbackSubtle,
+		borderColor: t.feedbackSolid,
+		color: t.feedbackSolid,
+		"--vui-dismiss-fg": t.dismissColor,
+		"--vui-notification-border-width": "0"
+	} })
+};
 const baseStyle = {
 	container: {
 		borderRadius: "var(--vui-notification-border-radius, 0)",
@@ -45,10 +54,23 @@ const baseStyle = {
 	icon: { py: "var(--vui-notification-content-padding-y, 8px)" },
 	text: {
 		flex: "1",
-		lineHeight: "var(--vui-notification-text-line-height, 24px)",
+		fontSize: {
+			xs: "13px",
+			md: "14px",
+			lg: "16px"
+		},
+		lineHeight: {
+			xs: "19.5px",
+			md: "21px",
+			lg: "24px"
+		},
 		minW: 0
 	},
-	title: { mb: "var(--vui-notification-title-margin-bottom, 4px)" },
+	title: { mb: {
+		xs: "2px",
+		md: "3px",
+		lg: "4px"
+	} },
 	actionBox: { mt: "var(--vui-notification-action-margin-top, 12px)" }
 };
 const parts = [
@@ -67,7 +89,11 @@ const variants = {
 	subtleBlue: generatedVariants.inlineInfo,
 	subtleRed: generatedVariants.inlineDanger,
 	subtleYellow: generatedVariants.inlineWarning,
-	subtleGreen: generatedVariants.inlineSuccess
+	subtleGreen: generatedVariants.inlineSuccess,
+	bannerBlue: generatedVariants.bannerInfo,
+	bannerRed: generatedVariants.bannerDanger,
+	bannerYellow: generatedVariants.bannerWarning,
+	bannerGreen: generatedVariants.bannerSuccess
 };
 var theme_default = {
 	baseStyle,
@@ -78,5 +104,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=theme.js.map

package/dist/notification/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../src/notification/theme.ts"],"sourcesContent":["// ---------------------------------------------------------------------------\n// Generated variant approach — mirrors button/theme.ts\n//\n// Each intent defines its token references once.\n// Each hierarchy rule composes container/button styles from those tokens.\n// Canonical variants are produced via Object.fromEntries — no hand-written\n// duplication; adding a new intent or hierarchy is a 1-line change.\n// ---------------------------------------------------------------------------\n\ninterface IntentTokens {\n  feedbackSubtle: string // container background\n  feedbackSolid: string // container border + text color\n  dismissColor: string // dismiss button color (usually feedbackSolid; exception: success)\n}\n\n/** Token references per semantic intent. */\nconst intentTokens: Record<string, IntentTokens> = {\n  info: {\n    feedbackSubtle: 'var(--vui-feedback-info-subtle)',\n    feedbackSolid: 'var(--vui-feedback-info-solid)',\n    dismissColor: 'var(--vui-feedback-info-solid)',\n  },\n  danger: {\n    feedbackSubtle: 'var(--vui-feedback-danger-subtle)',\n    feedbackSolid: 'var(--vui-feedback-danger-solid)',\n    dismissColor: 'var(--vui-feedback-danger-solid)',\n  },\n  warning: {\n    feedbackSubtle: 'var(--vui-feedback-warning-subtle)',\n    feedbackSolid: 'var(--vui-feedback-warning-solid)',\n    dismissColor: 'var(--vui-feedback-warning-solid)',\n  },\n  success: {\n    feedbackSubtle: 'var(--vui-feedback-success-subtle)',\n    feedbackSolid: 'var(--vui-feedback-success-solid)',\n    // success uses subtle-inverse for the dismiss button (design exception)\n    dismissColor: 'var(--vui-action-success-subtle-inverse)',\n  },\n}\n\n/** Variant styles per visual hierarchy, composed from intent tokens. */\nconst hierarchyRules: Record<string, (t: IntentTokens) => object> = {\n  inline: t => ({\n    container: {\n      bg: t.feedbackSubtle,\n      borderColor: t.feedbackSolid,\n      color: t.feedbackSolid,\n      '--vui-dismiss-fg': t.dismissColor,\n    },\n  }),\n}\n\n// ---------------------------------------------------------------------------\n\nconst baseStyle = {\n  container: {\n    borderRadius: 'var(--vui-notification-border-radius, 0)',\n    borderWidth: 'var(--vui-notification-border-width, 1px)',\n    bg: 'var(--vui-feedback-neutral-subtle)',\n    borderColor: 'var(--vui-feedback-neutral-solid)',\n    color: 'var(--vui-feedback-neutral-solid)',\n    // Figma: container px:16, py:8, gap:16 between icon | content | dismiss\n    px: 'var(--vui-notification-padding-x, 16px)',\n    py: 'var(--vui-notification-padding-y, 8px)',\n    gap: 'var(--vui-notification-gap, 16px)',\n  },\n  // Figma: icon and content each get py:8 so total vertical space = 8+8 = 16px from border\n  content: {\n    py: 'var(--vui-notification-content-padding-y, 8px)',\n  },\n  button: {},\n  icon: {\n    py: 'var(--vui-notification-content-padding-y, 8px)',\n  },\n  text: {\n    flex: '1',\n    lineHeight: 'var(--vui-notification-text-line-height, 24px)',\n    minW: 0,\n  },\n  title: {\n    mb: 'var(--vui-notification-title-margin-bottom, 4px)',\n  },\n  // Figma: gap from text to action is 12px; outer spacing handled by container\n  actionBox: {\n    mt: 'var(--vui-notification-action-margin-top, 12px)',\n  },\n}\n\nconst parts = ['container', 'content', 'button', 'icon', 'text', 'title', 'actionBox']\n\nconst sizes = {}\n\n// Generated: inlineInfo, inlineDanger, inlineWarning, inlineSuccess\n// Legacy aliases: subtleBlue, subtleRed, subtleYellow, subtleGreen → kept for backward compatibility\nconst generatedVariants = Object.fromEntries(\n  Object.entries(intentTokens).flatMap(([intentKey, tokens]) =>\n    Object.entries(hierarchyRules).map(([hierarchyKey, buildVariant]) => [\n      `${hierarchyKey}${intentKey.charAt(0).toUpperCase()}${intentKey.slice(1)}`,\n      buildVariant(tokens),\n    ]),\n  ),\n)\n\nconst variants = {\n  ...generatedVariants,\n  // Legacy aliases — kept for backward compatibility\n  subtleBlue: generatedVariants.inlineInfo,\n  subtleRed: generatedVariants.inlineDanger,\n  subtleYellow: generatedVariants.inlineWarning,\n  subtleGreen: generatedVariants.inlineSuccess,\n}\n\nexport default {\n  baseStyle,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";;AAgBA,MAAM,eAA6C;CACjD,MAAM;EACJ,gBAAgB;EAChB,eAAe;EACf,cAAc;CAChB;CACA,QAAQ;EACN,gBAAgB;EAChB,eAAe;EACf,cAAc;CAChB;CACA,SAAS;EACP,gBAAgB;EAChB,eAAe;EACf,cAAc;CAChB;CACA,SAAS;EACP,gBAAgB;EAChB,eAAe;EAEf,cAAc;CAChB;AACF;;AAGA,MAAM,iBAA8D,EAClE,SAAQ,OAAM,EACZ,WAAW;CACT,IAAI,EAAE;CACN,aAAa,EAAE;CACf,OAAO,EAAE;CACT,oBAAoB,EAAE;AACxB,EACF,GACF;AAIA,MAAM,YAAY;CAChB,WAAW;EACT,cAAc;EACd,aAAa;EACb,IAAI;EACJ,aAAa;EACb,OAAO;EAEP,IAAI;EACJ,IAAI;EACJ,KAAK;CACP;CAEA,SAAS,EACP,IAAI,iDACN;CACA,QAAQ,CAAC;CACT,MAAM,EACJ,IAAI,iDACN;CACA,MAAM;EACJ,MAAM;EACN,YAAY;EACZ,MAAM;CACR;CACA,OAAO,EACL,IAAI,mDACN;CAEA,WAAW,EACT,IAAI,kDACN;AACF;AAEA,MAAM,QAAQ;CAAC;CAAa;CAAW;CAAU;CAAQ;CAAQ;CAAS;AAAW;AAErF,MAAM,QAAQ,CAAC;AAIf,MAAM,oBAAoB,OAAO,YAC/B,OAAO,QAAQ,YAAY,EAAE,SAAS,CAAC,WAAW,YAChD,OAAO,QAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,kBAAkB,CACnE,GAAG,eAAe,UAAU,OAAO,CAAC,EAAE,YAAY,IAAI,UAAU,MAAM,CAAC,KACvE,aAAa,MAAM,CACrB,CAAC,CACH,CACF;AAEA,MAAM,WAAW;CACf,GAAG;CAEH,YAAY,kBAAkB;CAC9B,WAAW,kBAAkB;CAC7B,cAAc,kBAAkB;CAChC,aAAa,kBAAkB;AACjC;AAEA,oBAAe;CACb;CACA;CACA;CACA;AACF"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/notification/theme.ts"],"sourcesContent":["// ---------------------------------------------------------------------------\n// Generated variant approach — mirrors button/theme.ts\n//\n// Each intent defines its token references once.\n// Each hierarchy rule composes container/button styles from those tokens.\n// Canonical variants are produced via Object.fromEntries — no hand-written\n// duplication; adding a new intent or hierarchy is a 1-line change.\n// ---------------------------------------------------------------------------\n\ninterface IntentTokens {\n  feedbackSubtle: string // container background\n  feedbackSolid: string // container border + text color\n  dismissColor: string // dismiss button color (= feedbackSolid for all intents; Q8 removed the success exception)\n}\n\n/** Token references per semantic intent. */\nconst intentTokens: Record<string, IntentTokens> = {\n  info: {\n    feedbackSubtle: 'var(--vui-feedback-info-subtle)',\n    feedbackSolid: 'var(--vui-feedback-info-solid)',\n    dismissColor: 'var(--vui-feedback-info-solid)',\n  },\n  danger: {\n    feedbackSubtle: 'var(--vui-feedback-danger-subtle)',\n    feedbackSolid: 'var(--vui-feedback-danger-solid)',\n    dismissColor: 'var(--vui-feedback-danger-solid)',\n  },\n  warning: {\n    feedbackSubtle: 'var(--vui-feedback-warning-subtle)',\n    feedbackSolid: 'var(--vui-feedback-warning-solid)',\n    dismissColor: 'var(--vui-feedback-warning-solid)',\n  },\n  success: {\n    feedbackSubtle: 'var(--vui-feedback-success-subtle)',\n    feedbackSolid: 'var(--vui-feedback-success-solid)',\n    // Q8: success now uses feedbackSolid like other intents (no exception).\n    dismissColor: 'var(--vui-feedback-success-solid)',\n  },\n}\n\n/** Variant styles per visual hierarchy, composed from intent tokens. */\nconst hierarchyRules: Record<string, (t: IntentTokens) => object> = {\n  inline: t => ({\n    container: {\n      bg: t.feedbackSubtle,\n      borderColor: t.feedbackSolid,\n      color: t.feedbackSolid,\n      '--vui-dismiss-fg': t.dismissColor,\n    },\n  }),\n  // Q5: banner drops border by setting border-width to 0; same colors as inline.\n  banner: t => ({\n    container: {\n      bg: t.feedbackSubtle,\n      borderColor: t.feedbackSolid,\n      color: t.feedbackSolid,\n      '--vui-dismiss-fg': t.dismissColor,\n      '--vui-notification-border-width': '0',\n    },\n  }),\n}\n\n// ---------------------------------------------------------------------------\n\nconst baseStyle = {\n  container: {\n    borderRadius: 'var(--vui-notification-border-radius, 0)',\n    borderWidth: 'var(--vui-notification-border-width, 1px)',\n    bg: 'var(--vui-feedback-neutral-subtle)',\n    borderColor: 'var(--vui-feedback-neutral-solid)',\n    color: 'var(--vui-feedback-neutral-solid)',\n    // Figma: container px:16, py:8, gap:16 between icon | content | dismiss\n    px: 'var(--vui-notification-padding-x, 16px)',\n    py: 'var(--vui-notification-padding-y, 8px)',\n    gap: 'var(--vui-notification-gap, 16px)',\n  },\n  // Figma: icon and content each get py:8 so total vertical space = 8+8 = 16px from border\n  content: {\n    py: 'var(--vui-notification-content-padding-y, 8px)',\n  },\n  button: {},\n  icon: {\n    py: 'var(--vui-notification-content-padding-y, 8px)',\n  },\n  text: {\n    flex: '1',\n    // Q6: responsive font-size + line-height\n    fontSize: { xs: '13px', md: '14px', lg: '16px' },\n    lineHeight: { xs: '19.5px', md: '21px', lg: '24px' },\n    minW: 0,\n  },\n  title: {\n    // Q6: responsive title margin-bottom (only applied when text follows)\n    mb: { xs: '2px', md: '3px', lg: '4px' },\n  },\n  // Figma: gap from text to action is 12px; outer spacing handled by container\n  actionBox: {\n    mt: 'var(--vui-notification-action-margin-top, 12px)',\n  },\n}\n\nconst parts = ['container', 'content', 'button', 'icon', 'text', 'title', 'actionBox']\n\nconst sizes = {}\n\n// Generated: inlineInfo, inlineDanger, inlineWarning, inlineSuccess,\n//            bannerInfo, bannerDanger, bannerWarning, bannerSuccess\n// Legacy aliases below preserve backward compatibility for the old single-key API.\nconst generatedVariants = Object.fromEntries(\n  Object.entries(intentTokens).flatMap(([intentKey, tokens]) =>\n    Object.entries(hierarchyRules).map(([hierarchyKey, buildVariant]) => [\n      `${hierarchyKey}${intentKey.charAt(0).toUpperCase()}${intentKey.slice(1)}`,\n      buildVariant(tokens),\n    ]),\n  ),\n)\n\nconst variants = {\n  ...generatedVariants,\n  // Legacy aliases — kept for backward compatibility\n  subtleBlue: generatedVariants.inlineInfo,\n  subtleRed: generatedVariants.inlineDanger,\n  subtleYellow: generatedVariants.inlineWarning,\n  subtleGreen: generatedVariants.inlineSuccess,\n  bannerBlue: generatedVariants.bannerInfo,\n  bannerRed: generatedVariants.bannerDanger,\n  bannerYellow: generatedVariants.bannerWarning,\n  bannerGreen: generatedVariants.bannerSuccess,\n}\n\nexport default {\n  baseStyle,\n  parts,\n  sizes,\n  variants,\n}\n"],"mappings":";;AAgBA,MAAM,eAA6C;CACjD,MAAM;EACJ,gBAAgB;EAChB,eAAe;EACf,cAAc;CAChB;CACA,QAAQ;EACN,gBAAgB;EAChB,eAAe;EACf,cAAc;CAChB;CACA,SAAS;EACP,gBAAgB;EAChB,eAAe;EACf,cAAc;CAChB;CACA,SAAS;EACP,gBAAgB;EAChB,eAAe;EAEf,cAAc;CAChB;AACF;;AAGA,MAAM,iBAA8D;CAClE,SAAQ,OAAM,EACZ,WAAW;EACT,IAAI,EAAE;EACN,aAAa,EAAE;EACf,OAAO,EAAE;EACT,oBAAoB,EAAE;CACxB,EACF;CAEA,SAAQ,OAAM,EACZ,WAAW;EACT,IAAI,EAAE;EACN,aAAa,EAAE;EACf,OAAO,EAAE;EACT,oBAAoB,EAAE;EACtB,mCAAmC;CACrC,EACF;AACF;AAIA,MAAM,YAAY;CAChB,WAAW;EACT,cAAc;EACd,aAAa;EACb,IAAI;EACJ,aAAa;EACb,OAAO;EAEP,IAAI;EACJ,IAAI;EACJ,KAAK;CACP;CAEA,SAAS,EACP,IAAI,iDACN;CACA,QAAQ,CAAC;CACT,MAAM,EACJ,IAAI,iDACN;CACA,MAAM;EACJ,MAAM;EAEN,UAAU;GAAE,IAAI;GAAQ,IAAI;GAAQ,IAAI;EAAO;EAC/C,YAAY;GAAE,IAAI;GAAU,IAAI;GAAQ,IAAI;EAAO;EACnD,MAAM;CACR;CACA,OAAO,EAEL,IAAI;EAAE,IAAI;EAAO,IAAI;EAAO,IAAI;CAAM,EACxC;CAEA,WAAW,EACT,IAAI,kDACN;AACF;AAEA,MAAM,QAAQ;CAAC;CAAa;CAAW;CAAU;CAAQ;CAAQ;CAAS;AAAW;AAErF,MAAM,QAAQ,CAAC;AAKf,MAAM,oBAAoB,OAAO,YAC/B,OAAO,QAAQ,YAAY,CAAC,CAAC,SAAS,CAAC,WAAW,YAChD,OAAO,QAAQ,cAAc,CAAC,CAAC,KAAK,CAAC,cAAc,kBAAkB,CACnE,GAAG,eAAe,UAAU,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,UAAU,MAAM,CAAC,KACvE,aAAa,MAAM,CACrB,CAAC,CACH,CACF;AAEA,MAAM,WAAW;CACf,GAAG;CAEH,YAAY,kBAAkB;CAC9B,WAAW,kBAAkB;CAC7B,cAAc,kBAAkB;CAChC,aAAa,kBAAkB;CAC/B,YAAY,kBAAkB;CAC9B,WAAW,kBAAkB;CAC7B,cAAc,kBAAkB;CAChC,aAAa,kBAAkB;AACjC;AAEA,oBAAe;CACb;CACA;CACA;CACA;AACF"}

package/dist/notification/utils.js

@@ -1,9 +1,8 @@
 //#region src/notification/utils.ts
 /** Canonical hierarchy keys recognised by the two-prop API. */
 const HIERARCHY_KEYS = new Set(["inline", "banner"]);
-/** The banner hierarchy key — banner variants map to inline for theme lookup but carry extra overrides. */
+/** The banner hierarchy key. */
 const BANNER_HIERARCHY = "banner";
-const INLINE_HIERARCHY = "inline";
 /** Default intent applied when none is specified. */
 const DEFAULT_INTENT = "info";
 /** Default variant hierarchy applied when none is specified. */
@@ -14,25 +13,54 @@ const DEFAULT_VARIANT = "inline";
 */
 const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
 /**
-* Converts a two-prop variant+intent pair into the combined theme key used
-* internally (e.g. `resolveNotificationVariant('inline', 'info') => { themeKey: 'inlineInfo', isBanner: false }`).
+* Converts a two-prop variant+intent pair into the combined theme key used internally
+* (e.g. `resolveNotificationVariant('inline', 'info') => { themeKey: 'inlineInfo', isBanner: false }`).
 * When `intent` is omitted, `DEFAULT_INTENT` ('info') is used.
 *
-* If `variant` is already a fully-qualified legacy key (e.g. `'inlineBlue'`)
+* If `variant` is already a fully-qualified legacy key (e.g. `'inlineBlue'`, `'bannerRed'`)
 * it is returned unchanged so the new API is backward-compatible.
 *
 * Returns `{ themeKey: 'inlineInfo', isBanner: false }` (the default) when `variant` is absent.
 */
 const resolveNotificationVariant = (variant = DEFAULT_VARIANT, intent = DEFAULT_INTENT) => {
-	const resolved = !variant ? `${DEFAULT_VARIANT}${capitalize(DEFAULT_INTENT)}` : !HIERARCHY_KEYS.has(variant) ? variant : `${variant}${capitalize(intent)}`;
-	const isBanner = resolved.startsWith(BANNER_HIERARCHY);
+	const themeKey = !variant ? `${DEFAULT_VARIANT}${capitalize(DEFAULT_INTENT)}` : !HIERARCHY_KEYS.has(variant) ? variant : `${variant}${capitalize(intent)}`;
 	return {
-		themeKey: isBanner ? resolved.replace(BANNER_HIERARCHY, INLINE_HIERARCHY) : resolved,
-		isBanner
+		themeKey,
+		isBanner: themeKey.startsWith(BANNER_HIERARCHY)
+	};
+};
+/**
+* Q2 — Infers the layout from content composition. No `layout` prop exists; this
+* is the single source of truth for visual layout.
+*
+* - `action` present                       → `'button-down'`
+* - both `title` and `text` present        → `'multiline'`
+* - otherwise                              → `'one-line'`
+*/
+const inferNotificationLayout = (args) => {
+	if (args.action != null && args.action !== false && args.action !== "") return "button-down";
+	if (args.title != null && args.title !== "" && args.text != null && args.text !== "") return "multiline";
+	return "one-line";
+};
+/**
+* Q4 — Auto-maps intent to the appropriate ARIA role / aria-live politeness.
+* `isLoading` forces `role="status"` / `aria-live="polite"` regardless of intent.
+*/
+const resolveNotificationAria = (args) => {
+	if (args.isLoading) return {
+		role: "status",
+		ariaLive: "polite"
+	};
+	return args.intent === "warning" || args.intent === "danger" ? {
+		role: "alert",
+		ariaLive: "assertive"
+	} : {
+		role: "status",
+		ariaLive: "polite"
 	};
 };
 
 //#endregion
-export { DEFAULT_VARIANT, resolveNotificationVariant };
-globalThis.__vuiVersion__ = "5.1.1"
+export { DEFAULT_VARIANT, inferNotificationLayout, resolveNotificationAria, resolveNotificationVariant };
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=utils.js.map

package/dist/notification/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../src/notification/utils.ts"],"sourcesContent":["/**\n * Notification utilities — pure functions shared by consts.ts and notification.tsx.\n * Kept separate to avoid circular imports.\n */\n\nimport type { NotificationIntent, NotificationVariantHierarchy, NotificationVariantLegacy } from './notification.types'\n\n/** Canonical hierarchy keys recognised by the two-prop API. */\nconst HIERARCHY_KEYS = new Set<string>(['inline', 'banner'])\n\n/** The banner hierarchy key — banner variants map to inline for theme lookup but carry extra overrides. */\nconst BANNER_HIERARCHY = 'banner'\nconst INLINE_HIERARCHY = 'inline'\n\n/** Default intent applied when none is specified. */\nexport const DEFAULT_INTENT: NotificationIntent = 'info'\n\n/** Default variant hierarchy applied when none is specified. */\nexport const DEFAULT_VARIANT: NotificationVariantHierarchy = 'inline'\n\n/**\n * Capitalises the first character of a string.\n * Mirrors button/utils.ts — used to compose theme keys the same way theme.ts generates them.\n */\nconst capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1)\n\nexport interface ResolvedNotificationVariant {\n  /** The theme key to pass to useStyleConfig (banner variants map to their inline counterpart). */\n  themeKey: string\n  /** True when the resolved variant is a banner hierarchy — component uses this to add elevation + border overrides. */\n  isBanner: boolean\n}\n\n/**\n * Converts a two-prop variant+intent pair into the combined theme key used\n * internally (e.g. `resolveNotificationVariant('inline', 'info') => { themeKey: 'inlineInfo', isBanner: false }`).\n * When `intent` is omitted, `DEFAULT_INTENT` ('info') is used.\n *\n * If `variant` is already a fully-qualified legacy key (e.g. `'inlineBlue'`)\n * it is returned unchanged so the new API is backward-compatible.\n *\n * Returns `{ themeKey: 'inlineInfo', isBanner: false }` (the default) when `variant` is absent.\n */\nexport const resolveNotificationVariant = (\n  variant: NotificationVariantHierarchy | NotificationVariantLegacy | string | undefined = DEFAULT_VARIANT,\n  intent: NotificationIntent | string | undefined = DEFAULT_INTENT,\n): ResolvedNotificationVariant => {\n  const resolved = !variant\n    ? `${DEFAULT_VARIANT}${capitalize(DEFAULT_INTENT)}`\n    : !HIERARCHY_KEYS.has(variant)\n      ? variant // Already a combined legacy key — pass through unchanged\n      : `${variant}${capitalize(intent)}` // New two-prop API\n\n  const isBanner = resolved.startsWith(BANNER_HIERARCHY)\n  const themeKey = isBanner ? resolved.replace(BANNER_HIERARCHY, INLINE_HIERARCHY) : resolved\n\n  return { themeKey, isBanner }\n}\n"],"mappings":";;AAQA,MAAM,iBAAiB,IAAI,IAAY,CAAC,UAAU,QAAQ,CAAC;;AAG3D,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;;AAGzB,MAAa,iBAAqC;;AAGlD,MAAa,kBAAgD;;;;;AAM7D,MAAM,cAAc,MAAc,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC;;;;;;;;;;;AAmBvE,MAAa,8BACX,UAAyF,iBACzF,SAAkD,mBAClB;CAChC,MAAM,WAAW,CAAC,UACd,GAAG,kBAAkB,WAAW,cAAc,MAC9C,CAAC,eAAe,IAAI,OAAO,IACzB,UACA,GAAG,UAAU,WAAW,MAAM;CAEpC,MAAM,WAAW,SAAS,WAAW,gBAAgB;CAGrD,OAAO;EAAE,UAFQ,WAAW,SAAS,QAAQ,kBAAkB,gBAAgB,IAAI;EAEhE;CAAS;AAC9B"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/notification/utils.ts"],"sourcesContent":["/**\n * Notification utilities — pure functions shared by consts.ts and notification.tsx.\n * Kept separate to avoid circular imports.\n */\n\nimport type {\n  NotificationIntent,\n  NotificationLayout,\n  NotificationVariantHierarchy,\n  NotificationVariantLegacy,\n} from './notification.types'\n\n/** Canonical hierarchy keys recognised by the two-prop API. */\nconst HIERARCHY_KEYS = new Set<string>(['inline', 'banner'])\n\n/** The banner hierarchy key. */\nconst BANNER_HIERARCHY = 'banner'\n\n/** Default intent applied when none is specified. */\nexport const DEFAULT_INTENT: NotificationIntent = 'info'\n\n/** Default variant hierarchy applied when none is specified. */\nexport const DEFAULT_VARIANT: NotificationVariantHierarchy = 'inline'\n\n/**\n * Capitalises the first character of a string.\n * Mirrors button/utils.ts — used to compose theme keys the same way theme.ts generates them.\n */\nconst capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1)\n\nexport interface ResolvedNotificationVariant {\n  /** The theme key to pass to useStyleConfig (e.g. `'inlineInfo'`, `'bannerDanger'`). */\n  themeKey: string\n  /** True when the resolved variant is a banner hierarchy. */\n  isBanner: boolean\n}\n\n/**\n * Converts a two-prop variant+intent pair into the combined theme key used internally\n * (e.g. `resolveNotificationVariant('inline', 'info') => { themeKey: 'inlineInfo', isBanner: false }`).\n * When `intent` is omitted, `DEFAULT_INTENT` ('info') is used.\n *\n * If `variant` is already a fully-qualified legacy key (e.g. `'inlineBlue'`, `'bannerRed'`)\n * it is returned unchanged so the new API is backward-compatible.\n *\n * Returns `{ themeKey: 'inlineInfo', isBanner: false }` (the default) when `variant` is absent.\n */\nexport const resolveNotificationVariant = (\n  variant: NotificationVariantHierarchy | NotificationVariantLegacy | string | undefined = DEFAULT_VARIANT,\n  intent: NotificationIntent | string | undefined = DEFAULT_INTENT,\n): ResolvedNotificationVariant => {\n  const themeKey = !variant\n    ? `${DEFAULT_VARIANT}${capitalize(DEFAULT_INTENT)}`\n    : !HIERARCHY_KEYS.has(variant)\n      ? variant // Already a combined legacy key — pass through unchanged\n      : `${variant}${capitalize(intent)}` // New two-prop API\n\n  const isBanner = themeKey.startsWith(BANNER_HIERARCHY)\n\n  return { themeKey, isBanner }\n}\n\n/**\n * Q2 — Infers the layout from content composition. No `layout` prop exists; this\n * is the single source of truth for visual layout.\n *\n * - `action` present                       → `'button-down'`\n * - both `title` and `text` present        → `'multiline'`\n * - otherwise                              → `'one-line'`\n */\nexport const inferNotificationLayout = (args: {\n  action?: unknown\n  text?: unknown\n  title?: unknown\n}): NotificationLayout => {\n  if (args.action != null && args.action !== false && args.action !== '') return 'button-down'\n  if (args.title != null && args.title !== '' && args.text != null && args.text !== '') return 'multiline'\n  return 'one-line'\n}\n\n/**\n * Q4 — Auto-maps intent to the appropriate ARIA role / aria-live politeness.\n * `isLoading` forces `role=\"status\"` / `aria-live=\"polite\"` regardless of intent.\n */\nexport const resolveNotificationAria = (args: {\n  intent?: NotificationIntent\n  isLoading?: boolean\n}): { role: 'status' | 'alert'; ariaLive: 'polite' | 'assertive' } => {\n  if (args.isLoading) return { role: 'status', ariaLive: 'polite' }\n  const isUrgent = args.intent === 'warning' || args.intent === 'danger'\n  return isUrgent ? { role: 'alert', ariaLive: 'assertive' } : { role: 'status', ariaLive: 'polite' }\n}\n"],"mappings":";;AAaA,MAAM,iBAAiB,IAAI,IAAY,CAAC,UAAU,QAAQ,CAAC;;AAG3D,MAAM,mBAAmB;;AAGzB,MAAa,iBAAqC;;AAGlD,MAAa,kBAAgD;;;;;AAM7D,MAAM,cAAc,MAAc,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAE,MAAM,CAAC;;;;;;;;;;;AAmBvE,MAAa,8BACX,UAAyF,iBACzF,SAAkD,mBAClB;CAChC,MAAM,WAAW,CAAC,UACd,GAAG,kBAAkB,WAAW,cAAc,MAC9C,CAAC,eAAe,IAAI,OAAO,IACzB,UACA,GAAG,UAAU,WAAW,MAAM;CAIpC,OAAO;EAAE;EAAU,UAFF,SAAS,WAAW,gBAEX;CAAE;AAC9B;;;;;;;;;AAUA,MAAa,2BAA2B,SAId;CACxB,IAAI,KAAK,UAAU,QAAQ,KAAK,WAAW,SAAS,KAAK,WAAW,IAAI,OAAO;CAC/E,IAAI,KAAK,SAAS,QAAQ,KAAK,UAAU,MAAM,KAAK,QAAQ,QAAQ,KAAK,SAAS,IAAI,OAAO;CAC7F,OAAO;AACT;;;;;AAMA,MAAa,2BAA2B,SAG8B;CACpE,IAAI,KAAK,WAAW,OAAO;EAAE,MAAM;EAAU,UAAU;CAAS;CAEhE,OADiB,KAAK,WAAW,aAAa,KAAK,WAAW,WAC5C;EAAE,MAAM;EAAS,UAAU;CAAY,IAAI;EAAE,MAAM;EAAU,UAAU;CAAS;AACpG"}

package/dist/onedesign-tokens/dist/js/rem/button.js

@@ -61,5 +61,5 @@ const buttonDisabledOpacity = "0.5";
 
 //#endregion
 export { buttonDisabledCursor, buttonTypePrimaryActiveBackgroundColorDark, buttonTypePrimaryActiveBackgroundColorLight, buttonTypePrimaryActiveBorderColorDark, buttonTypePrimaryActiveBorderColorLight, buttonTypePrimaryActiveTextColorDark, buttonTypePrimaryActiveTextColorLight, buttonTypePrimaryDefaultBackgroundColorDark, buttonTypePrimaryDefaultBackgroundColorLight, buttonTypePrimaryDefaultBorderColorDark, buttonTypePrimaryDefaultBorderColorLight, buttonTypePrimaryDefaultTextColorDark, buttonTypePrimaryDefaultTextColorLight, buttonTypePrimaryFocusOutline, buttonTypePrimaryHoverBackgroundColorDark, buttonTypePrimaryHoverBackgroundColorLight, buttonTypePrimaryHoverBorderColorDark, buttonTypePrimaryHoverBorderColorLight, buttonTypePrimaryHoverTextColorDark, buttonTypePrimaryHoverTextColorLight, buttonTypeSecondaryActiveBackgroundColorDark, buttonTypeSecondaryActiveBackgroundColorLight, buttonTypeSecondaryActiveBorderColorDark, buttonTypeSecondaryActiveBorderColorLight, buttonTypeSecondaryActiveTextColorDark, buttonTypeSecondaryActiveTextColorLight, buttonTypeSecondaryDefaultBackgroundColorDark, buttonTypeSecondaryDefaultBackgroundColorLight, buttonTypeSecondaryDefaultBorderColorDark, buttonTypeSecondaryDefaultBorderColorLight, buttonTypeSecondaryDefaultTextColorDark, buttonTypeSecondaryDefaultTextColorLight, buttonTypeSecondaryFocusOutline, buttonTypeSecondaryHoverBackgroundColorDark, buttonTypeSecondaryHoverBackgroundColorLight, buttonTypeSecondaryHoverBorderColorDark, buttonTypeSecondaryHoverBorderColorLight, buttonTypeSecondaryHoverTextColorDark, buttonTypeSecondaryHoverTextColorLight, buttonTypeTertiaryActiveBackgroundColorDark, buttonTypeTertiaryActiveBackgroundColorLight, buttonTypeTertiaryActiveBorderColorDark, buttonTypeTertiaryActiveBorderColorLight, buttonTypeTertiaryActiveTextColorDark, buttonTypeTertiaryActiveTextColorLight, buttonTypeTertiaryDefaultBackgroundColorDark, buttonTypeTertiaryDefaultBackgroundColorLight, buttonTypeTertiaryDefaultBorderColorDark, buttonTypeTertiaryDefaultBorderColorLight, buttonTypeTertiaryDefaultTextColorDark, buttonTypeTertiaryDefaultTextColorLight, buttonTypeTertiaryFocusOutline, buttonTypeTertiaryHoverBackgroundColorDark, buttonTypeTertiaryHoverBackgroundColorLight, buttonTypeTertiaryHoverBorderColorDark, buttonTypeTertiaryHoverBorderColorLight, buttonTypeTertiaryHoverTextColorDark, buttonTypeTertiaryHoverTextColorLight };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=button.js.map

package/dist/p/p.js

@@ -36,5 +36,5 @@ P.displayName = "P";
 
 //#endregion
 export { PBase, P as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=p.js.map

package/dist/p/theme.js

@@ -35,5 +35,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=theme.js.map

package/dist/pagination/context.js

@@ -5,5 +5,5 @@ const [PaginationProvider, usePaginationContext] = createContext({ isOptional: t
 
 //#endregion
 export { PaginationProvider, usePaginationContext };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=context.js.map

package/dist/pagination/helpers.js

@@ -8,13 +8,13 @@ function getPaginationItems(page, pageCount) {
 	const boundaryCount = 1;
 	const siblingCount = 1;
 	const startPages = range(1, Math.min(boundaryCount, pageCount));
-	const endPages = range(Math.max(pageCount - boundaryCount + 1, boundaryCount + 1), pageCount);
-	const siblingsStart = Math.max(Math.min(page - siblingCount, pageCount - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
-	const siblingsEnd = Math.min(Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : pageCount - 1);
+	const endPages = range(Math.max(pageCount - boundaryCount + 1, 2), pageCount);
+	const siblingsStart = Math.max(Math.min(page - siblingCount, pageCount - boundaryCount - siblingCount * 2 - 1), 3);
+	const siblingsEnd = Math.min(Math.max(page + siblingCount, 5), endPages.length > 0 ? endPages[0] - 2 : pageCount - 1);
 	return [
 		"previous",
 		...startPages,
-		...siblingsStart > boundaryCount + 2 ? ["ellipsisStart"] : boundaryCount + 1 < pageCount - boundaryCount ? [boundaryCount + 1] : [],
+		...siblingsStart > 3 ? ["ellipsisStart"] : 2 < pageCount - boundaryCount ? [2] : [],
 		...range(siblingsStart, siblingsEnd),
 		...siblingsEnd < pageCount - boundaryCount - 1 ? ["ellipsisEnd"] : pageCount - boundaryCount > boundaryCount ? [pageCount - boundaryCount] : [],
 		...endPages,
@@ -24,5 +24,5 @@ function getPaginationItems(page, pageCount) {
 
 //#endregion
 export { getPaginationItems };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=helpers.js.map

package/dist/pagination/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":[],"sources":["../../src/pagination/helpers.ts"],"sourcesContent":["import type { PaginationItem } from './pagination.types'\n\nconst range = (start: number, end: number) => {\n  const length = end - start + 1\n  return Array.from({ length }, (_, i) => start + i)\n}\n\n/** Returns an array describing pagination items, like page buttons, prev/next arrows or ellipsis. */\nexport function getPaginationItems(page: number, pageCount: number) {\n  const boundaryCount = 1\n  const siblingCount = 1\n\n  const startPages = range(1, Math.min(boundaryCount, pageCount))\n  const endPages = range(Math.max(pageCount - boundaryCount + 1, boundaryCount + 1), pageCount)\n\n  const siblingsStart = Math.max(\n    Math.min(page - siblingCount, pageCount - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2,\n  )\n\n  const siblingsEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages.length > 0 ? endPages[0] - 2 : pageCount - 1,\n  )\n\n  const items = [\n    'previous',\n    ...startPages,\n\n    // Start ellipsis\n    ...(siblingsStart > boundaryCount + 2\n      ? ['ellipsisStart']\n      : boundaryCount + 1 < pageCount - boundaryCount\n        ? [boundaryCount + 1]\n        : []),\n\n    // Sibling pages\n    ...range(siblingsStart, siblingsEnd),\n\n    // End ellipsis\n    ...(siblingsEnd < pageCount - boundaryCount - 1\n      ? ['ellipsisEnd']\n      : pageCount - boundaryCount > boundaryCount\n        ? [pageCount - boundaryCount]\n        : []),\n\n    ...endPages,\n    'next',\n  ] as PaginationItem[]\n\n  return items\n}\n"],"mappings":";AAEA,MAAM,SAAS,OAAe,QAAgB;CAC5C,MAAM,SAAS,MAAM,QAAQ;CAC7B,OAAO,MAAM,KAAK,EAAE,OAAO,IAAI,GAAG,MAAM,QAAQ,CAAC;AACnD;;AAGA,SAAgB,mBAAmB,MAAc,WAAmB;CAClE,MAAM,gBAAgB;CACtB,MAAM,eAAe;CAErB,MAAM,aAAa,MAAM,GAAG,KAAK,IAAI,eAAe,SAAS,CAAC;CAC9D,MAAM,WAAW,MAAM,KAAK,IAAI,YAAY,gBAAgB,GAAG,gBAAgB,CAAC,GAAG,SAAS;CAE5F,MAAM,gBAAgB,KAAK,IACzB,KAAK,IAAI,OAAO,cAAc,YAAY,gBAAgB,eAAe,IAAI,CAAC,GAC9E,gBAAgB,CAClB;CAEA,MAAM,cAAc,KAAK,IACvB,KAAK,IAAI,OAAO,cAAc,gBAAgB,eAAe,IAAI,CAAC,GAClE,SAAS,SAAS,IAAI,SAAS,KAAK,IAAI,YAAY,CACtD;CA2BA,OAAO;EAxBL;EACA,GAAG;EAGH,GAAI,gBAAgB,gBAAgB,IAChC,CAAC,eAAe,IAChB,gBAAgB,IAAI,YAAY,gBAC9B,CAAC,gBAAgB,CAAC,IAClB,CAAC;EAGP,GAAG,MAAM,eAAe,WAAW;EAGnC,GAAI,cAAc,YAAY,gBAAgB,IAC1C,CAAC,aAAa,IACd,YAAY,gBAAgB,gBAC1B,CAAC,YAAY,aAAa,IAC1B,CAAC;EAEP,GAAG;EACH;CAGS;AACb"}
+{"version":3,"file":"helpers.js","names":[],"sources":["../../src/pagination/helpers.ts"],"sourcesContent":["import type { PaginationItem } from './pagination.types'\n\nconst range = (start: number, end: number) => {\n  const length = end - start + 1\n  return Array.from({ length }, (_, i) => start + i)\n}\n\n/** Returns an array describing pagination items, like page buttons, prev/next arrows or ellipsis. */\nexport function getPaginationItems(page: number, pageCount: number) {\n  const boundaryCount = 1\n  const siblingCount = 1\n\n  const startPages = range(1, Math.min(boundaryCount, pageCount))\n  const endPages = range(Math.max(pageCount - boundaryCount + 1, boundaryCount + 1), pageCount)\n\n  const siblingsStart = Math.max(\n    Math.min(page - siblingCount, pageCount - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2,\n  )\n\n  const siblingsEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    endPages.length > 0 ? endPages[0] - 2 : pageCount - 1,\n  )\n\n  const items = [\n    'previous',\n    ...startPages,\n\n    // Start ellipsis\n    ...(siblingsStart > boundaryCount + 2\n      ? ['ellipsisStart']\n      : boundaryCount + 1 < pageCount - boundaryCount\n        ? [boundaryCount + 1]\n        : []),\n\n    // Sibling pages\n    ...range(siblingsStart, siblingsEnd),\n\n    // End ellipsis\n    ...(siblingsEnd < pageCount - boundaryCount - 1\n      ? ['ellipsisEnd']\n      : pageCount - boundaryCount > boundaryCount\n        ? [pageCount - boundaryCount]\n        : []),\n\n    ...endPages,\n    'next',\n  ] as PaginationItem[]\n\n  return items\n}\n"],"mappings":";AAEA,MAAM,SAAS,OAAe,QAAgB;CAC5C,MAAM,SAAS,MAAM,QAAQ;CAC7B,OAAO,MAAM,KAAK,EAAE,OAAO,IAAI,GAAG,MAAM,QAAQ,CAAC;AACnD;;AAGA,SAAgB,mBAAmB,MAAc,WAAmB;CAClE,MAAM,gBAAgB;CACtB,MAAM,eAAe;CAErB,MAAM,aAAa,MAAM,GAAG,KAAK,IAAI,eAAe,SAAS,CAAC;CAC9D,MAAM,WAAW,MAAM,KAAK,IAAI,YAAY,gBAAgB,GAAG,CAAiB,GAAG,SAAS;CAE5F,MAAM,gBAAgB,KAAK,IACzB,KAAK,IAAI,OAAO,cAAc,YAAY,gBAAgB,eAAe,IAAI,CAAC,GAC9E,CACF;CAEA,MAAM,cAAc,KAAK,IACvB,KAAK,IAAI,OAAO,cAAc,CAAoC,GAClE,SAAS,SAAS,IAAI,SAAS,KAAK,IAAI,YAAY,CACtD;CA2BA,OAAO;EAxBL;EACA,GAAG;EAGH,GAAI,gBAAgB,IAChB,CAAC,eAAe,IAChB,IAAoB,YAAY,gBAC9B,CAAC,CAAiB,IAClB,CAAC;EAGP,GAAG,MAAM,eAAe,WAAW;EAGnC,GAAI,cAAc,YAAY,gBAAgB,IAC1C,CAAC,aAAa,IACd,YAAY,gBAAgB,gBAC1B,CAAC,YAAY,aAAa,IAC1B,CAAC;EAEP,GAAG;EACH;CAGS;AACb"}

package/dist/pagination/pagination.js

@@ -64,5 +64,5 @@ Pagination.displayName = "Pagination";
 
 //#endregion
 export { Pagination as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=pagination.js.map

package/dist/pagination/pagination.types.d.ts

@@ -1,7 +1,7 @@
 import { RenderProps } from "../utils/types.js";
 import { ThemingProps } from "../theme/types.js";
-import { ButtonProps } from "../button/button.types.js";
 import { BoxProps } from "../box/box.types.js";
+import { ButtonProps } from "../button/button.types.js";
 import { UsePaginationProps } from "./usePagination.types.js";
 import { UsePaginationReturnType } from "./usePagination.js";
 import { JSX } from "react";

package/dist/pagination/paginationButton.js

@@ -28,5 +28,5 @@ PaginationButton.displayName = "PaginationButton";
 
 //#endregion
 export { PaginationButton as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=paginationButton.js.map

package/dist/pagination/paginationEllipsis.js

@@ -24,5 +24,5 @@ PaginationEllipsis.displayName = "PaginationEllipsis";
 
 //#endregion
 export { PaginationEllipsis as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=paginationEllipsis.js.map

package/dist/pagination/paginationGoToPage.js

@@ -53,5 +53,5 @@ PaginationGoToPage.displayName = "PaginationGoToPage";
 
 //#endregion
 export { PaginationGoToPage as default };
-globalThis.__vuiVersion__ = "5.1.1"
+globalThis.__vuiVersion__ = "5.2.0"
 //# sourceMappingURL=paginationGoToPage.js.map