@veracity/vui 5.0.0-alpha.4 → 5.0.0-alpha.5

package/dist/link/theme.js

@@ -55,5 +55,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=theme.js.map

package/dist/list/context.js

@@ -5,5 +5,5 @@ const [ListProvider, useListContext] = createContext({ isOptional: true });
 
 //#endregion
 export { ListProvider, useListContext };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=context.js.map

package/dist/list/list.js

@@ -83,5 +83,5 @@ List.displayName = "List";
 
 //#endregion
 export { ListBase, List as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=list.js.map

package/dist/list/listDivider.js

@@ -22,5 +22,5 @@ ListDivider.displayName = "ListDivider";
 
 //#endregion
 export { ListDivider as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=listDivider.js.map

package/dist/list/listHeading.js

@@ -27,5 +27,5 @@ ListHeading.displayName = "ListHeading";
 
 //#endregion
 export { ListHeading as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=listHeading.js.map

package/dist/list/listIcon.js

@@ -21,5 +21,5 @@ ListIcon.displayName = "ListIcon";
 
 //#endregion
 export { ListIcon as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=listIcon.js.map

package/dist/list/listItem.js

@@ -125,5 +125,5 @@ ListItem.displayName = "ListItem";
 
 //#endregion
 export { ListItemBase, ListItem as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=listItem.js.map

package/dist/list/listText.js

@@ -23,5 +23,5 @@ ListText.displayName = "ListText";
 
 //#endregion
 export { ListText as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=listText.js.map

package/dist/list/theme.js

@@ -100,5 +100,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=theme.js.map

package/dist/logo/Logo.js

@@ -48,5 +48,5 @@ Logo.displayName = "Logo";
 
 //#endregion
 export { Logo as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=Logo.js.map

package/dist/menu/context.js

@@ -5,5 +5,5 @@ const [MenuProvider, useMenuContext] = createContext({ isOptional: true });
 
 //#endregion
 export { MenuProvider, useMenuContext };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=context.js.map

package/dist/menu/menu.js

@@ -31,5 +31,5 @@ Menu.displayName = "Menu";
 
 //#endregion
 export { Menu as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=menu.js.map

package/dist/menu/menuButton.js

@@ -23,5 +23,5 @@ MenuButton.displayName = "MenuButton";
 
 //#endregion
 export { MenuButton as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=menuButton.js.map

package/dist/menu/menuItem.js

@@ -33,5 +33,5 @@ MenuItem.displayName = "MenuItem";
 
 //#endregion
 export { MenuItem as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=menuItem.js.map

package/dist/menu/menuList.js

@@ -44,5 +44,5 @@ MenuList.displayName = "MenuList";
 
 //#endregion
 export { MenuList as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=menuList.js.map

package/dist/menu/theme.js

@@ -34,5 +34,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=theme.js.map

package/dist/message/consts.js

@@ -23,5 +23,5 @@ const avatarStyles = {
 
 //#endregion
 export { avatarStyles, iconDictionary, messageColors, spacingDictionary };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=consts.js.map

package/dist/message/message.js

@@ -40,5 +40,5 @@ Message.displayName = "Message";
 
 //#endregion
 export { MessageBase, Message as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=message.js.map

package/dist/message/theme.js

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

package/dist/modal/context.js

@@ -5,5 +5,5 @@ const [ModalProvider, useModalContext] = createContext({ isOptional: true });
 
 //#endregion
 export { ModalProvider, useModalContext };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=context.js.map

package/dist/modal/modal.js

@@ -87,5 +87,5 @@ Modal.displayName = "Modal";
 
 //#endregion
 export { Modal as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=modal.js.map

package/dist/modal/modalBackdrop.js

@@ -31,5 +31,5 @@ ModalBackdrop.displayName = "ModalBackdrop";
 
 //#endregion
 export { ModalBackdropBase, ModalBackdrop as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=modalBackdrop.js.map

package/dist/modal/modalContent.js

@@ -31,5 +31,5 @@ ModalContent.displayName = "ModalContent";
 
 //#endregion
 export { ModalContentBase, ModalContent as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=modalContent.js.map

package/dist/modal/modalManager.js

@@ -29,5 +29,5 @@ function useModalManager(ref, isOpen, disableScrollLock) {
 
 //#endregion
 export { manager, useModalManager };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=modalManager.js.map

package/dist/modal/theme.js

@@ -18,5 +18,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=theme.js.map

package/dist/notification/consts.js

@@ -71,5 +71,5 @@ const notificationStatusMapping = {
 
 //#endregion
 export { INTENT_ICON_MAP, LOADING_ICON_PROPS, notificationStatusMapping };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=consts.js.map

package/dist/notification/context.js

@@ -5,5 +5,5 @@ const [NotificationProvider, useNotificationContext] = createContext({ isOptiona
 
 //#endregion
 export { NotificationProvider, useNotificationContext };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","names":[],"sources":["../../src/notification/notification.tsx"],"mappings":";;;;;;;;;;;;AAuDA;cAAa,YAAA,EAmGP,YAAA,QAAoB,iBAAA;EACxB,MAAA,SAAe,kBAAA;EACf,IAAA,SAAa,gBAAA;EACb,IAAA,SAAa,gBAAA;EACb,KAAA,SAAc,iBAAA;AAAA"}
+{"version":3,"file":"notification.d.ts","names":[],"sources":["../../src/notification/notification.tsx"],"mappings":";;;;;;;;;;;;AAuDA;cAAa,YAAA,EAkHP,YAAA,QAAoB,iBAAA;EACxB,MAAA,SAAe,kBAAA;EACf,IAAA,SAAa,gBAAA;EACb,IAAA,SAAa,gBAAA;EACb,KAAA,SAAc,iBAAA;AAAA"}

package/dist/notification/notification.js

@@ -53,7 +53,7 @@ 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, verticalAlign, ...rest } = props;
+	const { action, children, className, icon, intent, isLoading, onClose, showDismissButton, size, status, statusMapping, text, title, variant: variantProp = DEFAULT_VARIANT, align, verticalAlign, ...rest } = props;
 	const statuses = {
 		...notificationStatusMapping,
 		...statusMapping
@@ -78,7 +78,7 @@ const Notification = vui((props, ref) => {
 		intent: resolvedIntent,
 		isLoading: resolvedIsLoading
 	});
-	const alignSelf = verticalAlign === "center" ? "center" : "flex-start";
+	const alignSelf = (align ?? (verticalAlign === "center" ? "center" : verticalAlign === "flex-start" ? "top" : void 0)) === "center" ? "center" : "flex-start";
 	return /* @__PURE__ */ jsx(NotificationProvider, {
 		value: context,
 		children: /* @__PURE__ */ jsxs(NotificationContainer, {
@@ -93,30 +93,34 @@ const Notification = vui((props, ref) => {
 			...styles.container,
 			...rest,
 			children: [
-				iconName ? /* @__PURE__ */ jsx(NotificationIcon, {
+				iconName ? /* @__PURE__ */ jsx(Box, {
 					alignSelf,
-					...autoIconProps,
-					name: iconName
+					...styles.icon,
+					children: /* @__PURE__ */ jsx(NotificationIcon, {
+						...autoIconProps,
+						name: iconName
+					})
 				}) : showIcon ? icon : null,
 				children ?? /* @__PURE__ */ jsxs(Box, {
 					column: alignSelf !== "center",
 					flex: 1,
-					children: [/* @__PURE__ */ jsxs(NotificationText, {
-						mb: action ? 0 : styles.text?.my,
-						children: [
-							title ? isReactText(title) ? /* @__PURE__ */ jsx(NotificationTitle, { text: title }) : title : null,
-							title ? text && alignSelf === "center" ? " " : /* @__PURE__ */ jsx("br", {}) : null,
-							text
-						]
-					}), action ? /* @__PURE__ */ jsx(NotificationAction, { children: action }) : null]
+					...styles.content,
+					children: [/* @__PURE__ */ jsxs(NotificationText, { children: [
+						title ? isReactText(title) ? /* @__PURE__ */ jsx(NotificationTitle, {
+							display: alignSelf !== "center" ? "block" : "inline",
+							mb: alignSelf !== "center" && text ? styles.title?.mb : void 0,
+							text: title
+						}) : title : null,
+						title && text && alignSelf === "center" ? " " : null,
+						text
+					] }), action ? /* @__PURE__ */ jsx(NotificationAction, { children: action }) : null]
 				}),
 				showDismissButton && /* @__PURE__ */ jsx(DismissButton, {
 					alignSelf,
 					"aria-label": "Close",
 					size: "md",
 					onClick: onClose || (() => {}),
-					...styles.button,
-					mt: alignSelf === "center" ? 0 : styles.button?.mt
+					...styles.button
 				})
 			]
 		})
@@ -130,5 +134,5 @@ Notification.displayName = "Notification";
 
 //#endregion
 export { Notification as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# 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    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  const alignSelf = verticalAlign === '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          <NotificationIcon alignSelf={alignSelf} {...autoIconProps} name={iconName} />\n        ) : showIcon ? (\n          icon\n        ) : null}\n\n        {children ?? (\n          <Box column={alignSelf !== 'center'} flex={1}>\n            <NotificationText mb={action ? 0 : styles.text?.my}>\n              {title ? isReactText(title) ? <NotificationTitle text={title} /> : title : null}\n              {title ? text && alignSelf === 'center' ? ' ' : <br /> : 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            mt={alignSelf === 'center' ? 0 : styles.button?.mt}\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,IAAI,AAA8C;KAClF,EAAE,iBAAiB,cAAc,qBAAqB,WAAW,GAAG;IAZ9C;;;;;;;;;EAaJ;;;;;;;;;;;;;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,eACA,GAAG,SACD;CAEJ,MAAM,WAAW;EAAE,GAAG;EAA2B,GAAG;EAAe;CAInE,MAAM,cAAc,SAAS,SAAS,UAAU;CAChD,MAAM,kBAAkB,gBAAgB,kBAAkB,cAAe,aAAa,WAAW;CACjG,MAAM,iBAAiB,UAAU,aAAa;CAC9C,MAAM,oBAAoB,aAAa,aAAa;CAEpD,MAAM,EAAE,UAAU,aAAa,2BAA2B,iBAAiB,eAAe;CAE1F,MAAM,SAAS,eAAe,gBAAgB;EAAE,SAAS;EAAU;EAAM,CAAC;CAM1E,MAAM,gBAAgB,oBAClB,qBACC,SAAS,UAAU,KAAK,cAAc,iBAAiB,gBAAgB,kBAAkB;CAE9F,MAAM,WAAW,SAAS;CAC1B,MAAM,WAAW,WAAY,SAAS,KAAK,GAAG,OAAQ,CAAC,YAAY,eAAe,QAAS,SAAa;CAExG,MAAM,UAAU,gBAAmC;EACjD;EACA;EACA;EACA,SAAS;EACT,QAAQ;EACR,WAAW;EACZ,CAAC;CAEF,MAAM,YAAY,kBAAkB,WAAW,WAAW;AAE1D,QACE,oBAAC;EAAqB,OAAO;YAC3B,qBAAC;GACC,cAAa;GACb,aAAa;GACb,WAAW,GAAG,oBAAoB,UAAU;GACvC;GACL,MAAK;GACL,GAAE;GACF,YAAY,OAAO,YAAY;GAC/B,WAAW;GACX,GAAI,OAAO;GACX,GAAI;;IAEH,WACC,oBAAC;KAA4B;KAAW,GAAI;KAAe,MAAM;MAAY,GAC3E,WACF,OACE;IAEH,YACC,qBAAC;KAAI,QAAQ,cAAc;KAAU,MAAM;gBACzC,qBAAC;MAAiB,IAAI,SAAS,IAAI,OAAO,MAAM;;OAC7C,QAAQ,YAAY,MAAM,GAAG,oBAAC,qBAAkB,MAAM,QAAS,GAAG,QAAQ;OAC1E,QAAQ,QAAQ,cAAc,WAAW,MAAM,oBAAC,SAAK,GAAG;OACxD;;OACgB,EAClB,SAAS,oBAAC,gCAAoB,SAA4B,GAAG;MAC1D;IAGP,qBACC,oBAAC;KACY;KACX,cAAW;KACX,MAAK;KACL,SAAS,kBAAkB;KAC3B,GAAI,OAAO;KACX,IAAI,cAAc,WAAW,IAAI,OAAO,QAAQ;MAChD;;IAEkB;GACH;EAEzB;AAOF,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 { 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,IAAI,AAA8C;KAClF,EAAE,iBAAiB,cAAc,qBAAqB,WAAW,GAAG;IAZ9C;;;;;;;;;EAaJ;;;;;;;;;;;;;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;EAAe;CAInE,MAAM,cAAc,SAAS,SAAS,UAAU;CAChD,MAAM,kBAAkB,gBAAgB,kBAAkB,cAAe,aAAa,WAAW;CACjG,MAAM,iBAAiB,UAAU,aAAa;CAC9C,MAAM,oBAAoB,aAAa,aAAa;CAEpD,MAAM,EAAE,UAAU,aAAa,2BAA2B,iBAAiB,eAAe;CAE1F,MAAM,SAAS,eAAe,gBAAgB;EAAE,SAAS;EAAU;EAAM,CAAC;CAM1E,MAAM,gBAAgB,oBAClB,qBACC,SAAS,UAAU,KAAK,cAAc,iBAAiB,gBAAgB,kBAAkB;CAE9F,MAAM,WAAW,SAAS;CAC1B,MAAM,WAAW,WAAY,SAAS,KAAK,GAAG,OAAQ,CAAC,YAAY,eAAe,QAAS,SAAa;CAExG,MAAM,UAAU,gBAAmC;EACjD;EACA;EACA;EACA,SAAS;EACT,QAAQ;EACR,WAAW;EACZ,CAAC;CAKF,MAAM,aADJ,UAAU,kBAAkB,WAAW,WAAW,kBAAkB,eAAe,QAAQ,aACzD,WAAW,WAAW;AAE1D,QACE,oBAAC;EAAqB,OAAO;YAC3B,qBAAC;GACC,cAAa;GACb,aAAa;GACb,WAAW,GAAG,oBAAoB,UAAU;GACvC;GACL,MAAK;GACL,GAAE;GACF,YAAY,OAAO,YAAY;GAC/B,WAAW;GACX,GAAI,OAAO;GACX,GAAI;;IAEH,WACC,oBAAC;KAAe;KAAW,GAAI,OAAO;eACpC,oBAAC;MAAiB,GAAI;MAAe,MAAM;OAAY;MACnD,GACJ,WACF,OACE;IAEH,YACC,qBAAC;KAAI,QAAQ,cAAc;KAAU,MAAM;KAAG,GAAI,OAAO;gBACvD,qBAAC;MACE,QACC,YAAY,MAAM,GAChB,oBAAC;OACC,SAAS,cAAc,WAAW,UAAU;OAC5C,IAAI,cAAc,YAAY,OAAO,OAAO,OAAO,KAAK;OACxD,MAAM;QACN,GAEF,QAEA;MACH,SAAS,QAAQ,cAAc,WAAW,MAAM;MAChD;SACgB,EAClB,SAAS,oBAAC,gCAAoB,SAA4B,GAAG;MAC1D;IAGP,qBACC,oBAAC;KACY;KACX,cAAW;KACX,MAAK;KACL,SAAS,kBAAkB;KAC3B,GAAI,OAAO;MACX;;IAEkB;GACH;EAEzB;AAOF,aAAa,SAAS;AACtB,aAAa,OAAO;AACpB,aAAa,OAAO;AACpB,aAAa,QAAQ;AACrB,aAAa,cAAc"}

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

@@ -20,6 +20,7 @@ type NotificationProps = Omit<BoxProps, 'size' | 'variant'> & Omit<ThemingProps<
   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'`. */
   verticalAlign?: 'center' | 'flex-start';
 };
 /** Semantic colour intents for the two-prop API. */

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,aAAA;AAAA;;KAIQ,kBAAA;;KAGA,4BAAA;;;;;;KAOA,yBAAA;;;;;KAcA,mBAAA,GAAsB,4BAAA,GAA+B,yBAAA;AAAA,KAErD,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,MAAA,SAAe,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,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,yBAAA;AAAA,KAErD,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,MAAA,SAAe,uBAAA"}

package/dist/notification/notificationAction.js

@@ -22,5 +22,5 @@ NotificationAction.displayName = "NotificationAction";
 
 //#endregion
 export { NotificationAction as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=notificationAction.js.map

package/dist/notification/notificationIcon.js

@@ -1,5 +1,4 @@
 import { cs } from "../utils/styles.js";
-import { useStyleConfig } from "../core/theme.js";
 import vui from "../core/vui.js";
 import { useNotificationContext } from "./context.js";
 import Icon from "../icon/icon.js";
@@ -10,12 +9,10 @@ import { jsx } from "react/jsx-runtime";
 /** Displays an icon based on the status or intent within the Notification. */
 const NotificationIcon = vui((props, ref) => {
 	const { className, alignSelf, ...rest } = props;
-	const mergedProps = {
+	const { status = "", statusMapping, intent, isLoading } = {
 		...useNotificationContext(),
 		...props
 	};
-	const styles = useStyleConfig("Notification", useNotificationContext());
-	const { status = "", statusMapping, intent, isLoading } = mergedProps;
 	const resolvedIconProps = isLoading ? LOADING_ICON_PROPS : {
 		...notificationStatusMapping,
 		...statusMapping
@@ -25,9 +22,7 @@ const NotificationIcon = vui((props, ref) => {
 		className: cs("vui-notificationIcon", className),
 		ref,
 		size: "md",
-		variant: "loading",
-		...styles.icon,
-		mt: alignSelf === "center" ? 0 : styles.icon?.mt,
+		variant: isLoading ? "spinning" : "static",
 		...resolvedIconProps,
 		...rest
 	});
@@ -36,5 +31,5 @@ NotificationIcon.displayName = "NotificationIcon";
 
 //#endregion
 export { NotificationIcon as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# 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 { useStyleConfig, 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  const styles = useStyleConfig('Notification', useNotificationContext())\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=\"loading\"\n      {...styles.icon}\n      mt={alignSelf === 'center' ? 0 : styles.icon?.mt}\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;CAC1C,MAAM,cAAc;EAAE,GAAG,wBAAwB;EAAE,GAAG;EAAO;CAC7D,MAAM,SAAS,eAAe,gBAAgB,wBAAwB,CAAC;CAEvE,MAAM,EAAE,SAAS,IAAI,eAAe,QAAQ,cAAc;CAE1D,MAAM,oBAAoB,YACtB,qBACC;EAAE,GAAG;EAA2B,GAAG;EAAe,CAAC,SAAS,cAC5D,SAAS,gBAAgB,UAAgC;AAE9D,QACE,oBAAC;EACY;EACX,WAAW,GAAG,wBAAwB,UAAU;EAC3C;EACL,MAAK;EACL,SAAQ;EACR,GAAI,OAAO;EACX,IAAI,cAAc,WAAW,IAAI,OAAO,MAAM;EAC9C,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,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,cAFxB;EAAE,GAAG,wBAAwB;EAAE,GAAG;EAAO;CAI7D,MAAM,oBAAoB,YACtB,qBACC;EAAE,GAAG;EAA2B,GAAG;EAAe,CAAC,SAAS,cAC5D,SAAS,gBAAgB,UAAgC;AAE9D,QACE,oBAAC;EACY;EACX,WAAW,GAAG,wBAAwB,UAAU;EAC3C;EACL,MAAK;EACL,SAAS,YAAY,aAAa;EAClC,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,iBAAiB,cAAc"}

package/dist/notification/notificationText.js

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

package/dist/notification/notificationTitle.js

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

package/dist/notification/theme.js

@@ -35,32 +35,25 @@ const baseStyle = {
 		borderWidth: "var(--vui-notification-border-width, 1px)",
 		bg: "var(--vui-feedback-neutral-subtle)",
 		borderColor: "var(--vui-feedback-neutral-solid)",
-		color: "var(--vui-feedback-neutral-solid)"
-	},
-	button: {
-		mt: "var(--vui-notification-button-margin-top, 8px)",
-		mr: "var(--vui-notification-button-margin-right, 8px)",
-		mb: "var(--vui-notification-button-margin-bottom, 0)",
-		ml: "var(--vui-notification-button-margin-left, 0)"
-	},
-	icon: {
-		ml: "var(--vui-notification-icon-margin-left, 16px)",
-		mt: "var(--vui-notification-icon-margin-top, 16px)"
+		color: "var(--vui-feedback-neutral-solid)",
+		px: "var(--vui-notification-padding-x, 16px)",
+		py: "var(--vui-notification-padding-y, 8px)",
+		gap: "var(--vui-notification-gap, 16px)"
 	},
+	content: { py: "var(--vui-notification-content-padding-y, 8px)" },
+	button: {},
+	icon: { py: "var(--vui-notification-content-padding-y, 8px)" },
 	text: {
 		flex: "1",
 		lineHeight: "var(--vui-notification-text-line-height, 24px)",
-		minW: 0,
-		mx: "var(--vui-notification-text-margin-x, 16px)",
-		my: "var(--vui-notification-text-margin-y, 16px)"
+		minW: 0
 	},
-	actionBox: {
-		my: "var(--vui-notification-action-margin-y, 16px)",
-		mx: "var(--vui-notification-action-margin-x, 16px)"
-	}
+	title: { mb: "var(--vui-notification-title-margin-bottom, 4px)" },
+	actionBox: { mt: "var(--vui-notification-action-margin-top, 12px)" }
 };
 const parts = [
 	"container",
+	"content",
 	"button",
 	"icon",
 	"text",
@@ -85,5 +78,5 @@ var theme_default = {
 
 //#endregion
 export { theme_default as default };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# 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  },\n  button: {\n    mt: 'var(--vui-notification-button-margin-top, 8px)',\n    mr: 'var(--vui-notification-button-margin-right, 8px)',\n    mb: 'var(--vui-notification-button-margin-bottom, 0)',\n    ml: 'var(--vui-notification-button-margin-left, 0)',\n  },\n  icon: {\n    ml: 'var(--vui-notification-icon-margin-left, 16px)',\n    mt: 'var(--vui-notification-icon-margin-top, 16px)',\n  },\n  text: {\n    flex: '1',\n    lineHeight: 'var(--vui-notification-text-line-height, 24px)',\n    minW: 0,\n    mx: 'var(--vui-notification-text-margin-x, 16px)',\n    my: 'var(--vui-notification-text-margin-y, 16px)',\n  },\n  actionBox: {\n    my: 'var(--vui-notification-action-margin-y, 16px)',\n    mx: 'var(--vui-notification-action-margin-x, 16px)',\n  },\n}\n\nconst parts = ['container', '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;EACf;CACD,QAAQ;EACN,gBAAgB;EAChB,eAAe;EACf,cAAc;EACf;CACD,SAAS;EACP,gBAAgB;EAChB,eAAe;EACf,cAAc;EACf;CACD,SAAS;EACP,gBAAgB;EAChB,eAAe;EAEf,cAAc;EACf;CACF;;AAGD,MAAM,iBAA8D,EAClE,SAAQ,OAAM,EACZ,WAAW;CACT,IAAI,EAAE;CACN,aAAa,EAAE;CACf,OAAO,EAAE;CACT,oBAAoB,EAAE;CACvB,EACF,GACF;AAID,MAAM,YAAY;CAChB,WAAW;EACT,cAAc;EACd,aAAa;EACb,IAAI;EACJ,aAAa;EACb,OAAO;EACR;CACD,QAAQ;EACN,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CACD,MAAM;EACJ,IAAI;EACJ,IAAI;EACL;CACD,MAAM;EACJ,MAAM;EACN,YAAY;EACZ,MAAM;EACN,IAAI;EACJ,IAAI;EACL;CACD,WAAW;EACT,IAAI;EACJ,IAAI;EACL;CACF;AAED,MAAM,QAAQ;CAAC;CAAa;CAAU;CAAQ;CAAQ;CAAS;CAAY;AAE3E,MAAM,QAAQ,EAAE;AAIhB,MAAM,oBAAoB,OAAO,YAC/B,OAAO,QAAQ,aAAa,CAAC,SAAS,CAAC,WAAW,YAChD,OAAO,QAAQ,eAAe,CAAC,KAAK,CAAC,cAAc,kBAAkB,CACnE,GAAG,eAAe,UAAU,OAAO,EAAE,CAAC,aAAa,GAAG,UAAU,MAAM,EAAE,IACxE,aAAa,OAAO,CACrB,CAAC,CACH,CACF;AAED,MAAM,WAAW;CACf,GAAG;CAEH,YAAY,kBAAkB;CAC9B,WAAW,kBAAkB;CAC7B,cAAc,kBAAkB;CAChC,aAAa,kBAAkB;CAChC;AAED,oBAAe;CACb;CACA;CACA;CACA;CACD"}
+{"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;EACf;CACD,QAAQ;EACN,gBAAgB;EAChB,eAAe;EACf,cAAc;EACf;CACD,SAAS;EACP,gBAAgB;EAChB,eAAe;EACf,cAAc;EACf;CACD,SAAS;EACP,gBAAgB;EAChB,eAAe;EAEf,cAAc;EACf;CACF;;AAGD,MAAM,iBAA8D,EAClE,SAAQ,OAAM,EACZ,WAAW;CACT,IAAI,EAAE;CACN,aAAa,EAAE;CACf,OAAO,EAAE;CACT,oBAAoB,EAAE;CACvB,EACF,GACF;AAID,MAAM,YAAY;CAChB,WAAW;EACT,cAAc;EACd,aAAa;EACb,IAAI;EACJ,aAAa;EACb,OAAO;EAEP,IAAI;EACJ,IAAI;EACJ,KAAK;EACN;CAED,SAAS,EACP,IAAI,kDACL;CACD,QAAQ,EAAE;CACV,MAAM,EACJ,IAAI,kDACL;CACD,MAAM;EACJ,MAAM;EACN,YAAY;EACZ,MAAM;EACP;CACD,OAAO,EACL,IAAI,oDACL;CAED,WAAW,EACT,IAAI,mDACL;CACF;AAED,MAAM,QAAQ;CAAC;CAAa;CAAW;CAAU;CAAQ;CAAQ;CAAS;CAAY;AAEtF,MAAM,QAAQ,EAAE;AAIhB,MAAM,oBAAoB,OAAO,YAC/B,OAAO,QAAQ,aAAa,CAAC,SAAS,CAAC,WAAW,YAChD,OAAO,QAAQ,eAAe,CAAC,KAAK,CAAC,cAAc,kBAAkB,CACnE,GAAG,eAAe,UAAU,OAAO,EAAE,CAAC,aAAa,GAAG,UAAU,MAAM,EAAE,IACxE,aAAa,OAAO,CACrB,CAAC,CACH,CACF;AAED,MAAM,WAAW;CACf,GAAG;CAEH,YAAY,kBAAkB;CAC9B,WAAW,kBAAkB;CAC7B,cAAc,kBAAkB;CAChC,aAAa,kBAAkB;CAChC;AAED,oBAAe;CACb;CACA;CACA;CACA;CACD"}

package/dist/notification/utils.js

@@ -34,5 +34,5 @@ const resolveNotificationVariant = (variant = DEFAULT_VARIANT, intent = DEFAULT_
 
 //#endregion
 export { DEFAULT_VARIANT, resolveNotificationVariant };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=utils.js.map

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

@@ -61,5 +61,5 @@ const buttonDisabledOpacity = "0.5";
 
 //#endregion
 export { buttonDisabledCursor, buttonDisabledOpacity, 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.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# 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.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# 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.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# 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.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=context.js.map

package/dist/pagination/helpers.js

@@ -24,5 +24,5 @@ function getPaginationItems(page, pageCount) {
 
 //#endregion
 export { getPaginationItems };
-globalThis.__vuiVersion__ = "5.0.0-alpha.4"
+globalThis.__vuiVersion__ = "5.0.0-alpha.5"
 //# sourceMappingURL=helpers.js.map

package/dist/pagination/pagination.js

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

package/dist/pagination/paginationButton.js

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

package/dist/pagination/paginationEllipsis.js

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

package/dist/pagination/paginationGoToPage.js

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