@veracity/vui 5.2.0-alpha.398622.2606110819 → 5.2.0

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,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,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,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;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 type { VuiComponent } from '../core'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { DismissButton } from '../dismissButton'\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, hasStatus: !!statusProps })\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;EAAO,WAAW,CAAC,CAAC;CAAY,CAAC;CAGxF,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

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/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,12 @@ const baseStyle = {
 	icon: { py: "var(--vui-notification-content-padding-y, 8px)" },
 	text: {
 		flex: "1",
-		lineHeight: "var(--vui-notification-text-line-height, 24px)",
+		fontSize: "16px",
+		lineHeight: "150%",
+		fontWeight: 400,
 		minW: 0
 	},
-	title: { mb: "var(--vui-notification-title-margin-bottom, 4px)" },
+	title: { mb: "4px" },
 	actionBox: { mt: "var(--vui-notification-action-margin-top, 12px)" }
 };
 const parts = [
@@ -67,7 +78,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,

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,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;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    fontSize: '16px',\n    lineHeight: '150%',\n    fontWeight: 400,\n    minW: 0,\n  },\n  title: {\n    mb: '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;EACN,UAAU;EACV,YAAY;EACZ,YAAY;EACZ,MAAM;CACR;CACA,OAAO,EACL,IAAI,MACN;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,55 @@ 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.hasStatus) return "one-line";
+	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 };
+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,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;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  hasStatus?: boolean\n}): NotificationLayout => {\n  if (args.hasStatus) return 'one-line'\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,SAKd;CACxB,IAAI,KAAK,WAAW,OAAO;CAC3B,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/range/index.d.ts

@@ -1,2 +1,2 @@
-import { RangeProps, RangeTrackKey, RangeValue } from "./range.types.js";
+import { RangeProps, RangeValue } from "./range.types.js";
 import { Range } from "./range.js";

package/dist/range/range.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range.d.ts","names":[],"sources":["../../src/range/range.tsx"],"mappings":";;;;cAoBa,KAAA,EAAK,YAAA,QAAA,UAAA"}
+{"version":3,"file":"range.d.ts","names":[],"sources":["../../src/range/range.tsx"],"mappings":";;;;cA8Ea,KAAA,EAAK,YAAA,QAAA,UAAA"}

package/dist/range/range.js

@@ -6,60 +6,78 @@ import styled from "../core/styled.js";
 import vui from "../core/vui.js";
 import Box from "../box/box.js";
 import Tooltip from "../tooltip/tooltip.js";
-import { jsx } from "react/jsx-runtime";
-import ReactSlider from "react-slider";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as RadixSlider from "@radix-ui/react-slider";
 
 //#region src/range/range.tsx
-const SliderBase = styled(ReactSlider)`
+const SliderRoot = styled(Box)`
+  align-items: center;
+  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
+  display: flex;
+  position: relative;
+  touch-action: none;
+  user-select: none;
   width: 100%;
+`;
+const SliderTrack = styled(Box)`
+  flex-grow: 1;
   height: 4px;
-  cursor: pointer;
-  transition-duration: '0s';
+  position: relative;
+`;
+const SliderRange = styled(Box)`
+  height: 100%;
+  position: absolute;
+`;
+const SliderThumb = styled(Box)`
+  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "grab"};
+  display: block;
 `;
 const defaultFormatter = (value) => `${value}`;
+const RangeThumb = ({ disabled, formatter, mainColor, showTooltip, showValue, styles, val }) => {
+	const formattedVal = formatter(String(val));
+	const thumbContent = /* @__PURE__ */ jsx(SliderThumb, {
+		$disabled: disabled,
+		className: "vui-range-thumb",
+		...styles.thumb,
+		borderColor: mainColor,
+		children: showValue && /* @__PURE__ */ jsx(Box, {
+			center: true,
+			className: "vui-range-thumb-value",
+			...styles.thumbValue,
+			children: formattedVal
+		})
+	});
+	const radixThumb = /* @__PURE__ */ jsx(RadixSlider.Thumb, {
+		asChild: true,
+		children: thumbContent
+	});
+	if (showTooltip === false || showTooltip === void 0 && showValue) return radixThumb;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		disabled,
+		text: formattedVal,
+		visible: showTooltip,
+		children: radixThumb
+	});
+};
+const toArray = (val) => {
+	if (val === void 0) return void 0;
+	return Array.isArray(val) ? Array.from(val) : [val];
+};
 /** Implements a range input. */
 const Range = vui((props, ref) => {
-	const { className, value, defaultValue = 0, disabled, min = 0, minDistance = 0, max = 100, step = 1, showTooltip = false, showValue = false, formatter = defaultFormatter, onChange, ...rest } = props;
+	const { className, value, defaultValue = 0, disabled, min = 0, minDistance = 0, max = 100, step = 1, showTooltip, showValue = false, formatter = defaultFormatter, onChange, ...rest } = props;
 	const styles = useStyleConfig("Range", props);
 	const aliasedProps = filterUndefined({ "aria-disabled": disabled });
 	const isSingleValue = typeof defaultValue !== "object" && typeof value !== "object";
 	const mainColor = disabled ? rangeColors.disabled : rangeColors.main;
-	const getTrackColor = (trackProps) => {
-		const { key } = trackProps;
-		if (isSingleValue) return key === "track-0" ? mainColor : rangeColors.track;
-		return key === "track-2" ? rangeColors.track : key === "track-1" ? mainColor : rangeColors.track;
-	};
-	const Thumb = (props, state) => {
-		const { key, ...thumbProps } = props;
-		const thumbKey = key ?? state.index;
-		const content = /* @__PURE__ */ jsx(Box, {
-			className: "vui-range-thumb",
-			...styles.thumb,
-			borderColor: mainColor,
-			...thumbProps,
-			children: showValue && /* @__PURE__ */ jsx(Box, {
-				center: true,
-				className: "vui-range-thumb-value",
-				...styles.thumbValue,
-				children: formatter(state.valueNow)
-			})
-		});
-		return showValue ? /* @__PURE__ */ jsx(Box, { children: content }, thumbKey) : /* @__PURE__ */ jsx(Tooltip, {
-			disabled,
-			text: formatter(state.valueNow),
-			visible: showTooltip,
-			children: content
-		}, thumbKey);
-	};
-	const Track = (props, state) => {
-		const { key, ...trackProps } = props;
-		return /* @__PURE__ */ jsx(Box, {
-			...styles.track,
-			bg: getTrackColor(props),
-			className: "vui-range-track",
-			...trackProps,
-			index: state.index
-		}, key);
+	const defaultArr = useMemo(() => toArray(defaultValue) ?? [0], [defaultValue]);
+	const valueArr = toArray(value);
+	const [internalValues, setInternalValues] = useState(defaultArr);
+	const currentValues = valueArr ?? internalValues;
+	const handleValueChange = (vals) => {
+		if (!valueArr) setInternalValues(vals);
+		onChange?.(isSingleValue ? vals[0] : vals);
 	};
 	return /* @__PURE__ */ jsx(Box, {
 		className: cs("vui-range", isSingleValue ? "vui-range-single" : "vui-range-range", className),
@@ -67,19 +85,43 @@ const Range = vui((props, ref) => {
 		...styles.container,
 		...aliasedProps,
 		...rest,
-		children: /* @__PURE__ */ jsx(SliderBase, {
-			className: "vui-range-slider",
-			defaultValue,
+		children: /* @__PURE__ */ jsx(RadixSlider.Root, {
+			asChild: true,
 			disabled,
 			max,
 			min,
-			minDistance,
-			onChange,
-			renderThumb: Thumb,
-			renderTrack: Track,
+			minStepsBetweenThumbs: minDistance,
+			onValueChange: handleValueChange,
 			step,
-			value
-		}, `${disabled}-${min}-${max}-${step}`)
+			...valueArr ? { value: valueArr } : { defaultValue: defaultArr },
+			children: /* @__PURE__ */ jsxs(SliderRoot, {
+				$disabled: disabled,
+				className: "vui-range-slider",
+				children: [/* @__PURE__ */ jsx(RadixSlider.Track, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(SliderTrack, {
+						bg: rangeColors.track,
+						borderRadius: "24px",
+						className: "vui-range-track",
+						children: /* @__PURE__ */ jsx(RadixSlider.Range, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx(SliderRange, {
+								...styles.track,
+								bg: mainColor
+							})
+						})
+					})
+				}), currentValues.map((val, index) => /* @__PURE__ */ jsx(RangeThumb, {
+					disabled,
+					formatter,
+					mainColor,
+					showTooltip,
+					showValue,
+					styles,
+					val
+				}, index))]
+			})
+		})
 	});
 });
 Range.displayName = "Range";

package/dist/range/range.js.map

@@ -1 +1 @@
-{"version":3,"file":"range.js","names":[],"sources":["../../src/range/range.tsx"],"sourcesContent":["import ReactSlider from 'react-slider'\n\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { Tooltip } from '../tooltip'\nimport { cs, filterUndefined } from '../utils'\nimport { rangeColors } from './consts'\nimport type { RangeProps } from './range.types'\nimport type { RangeTrackKey } from './range.types'\n\nconst SliderBase = styled(ReactSlider)`\n  width: 100%;\n  height: 4px;\n  cursor: pointer;\n  transition-duration: '0s';\n`\n\nconst defaultFormatter = (value: string) => `${value}`\n\n/** Implements a range input. */\nexport const Range = vui<'div', RangeProps>((props, ref) => {\n  const {\n    className,\n    value,\n    defaultValue = 0,\n    disabled,\n    min = 0,\n    minDistance = 0,\n    max = 100,\n    step = 1,\n    showTooltip = false,\n    showValue = false,\n    formatter = defaultFormatter,\n    onChange,\n    ...rest\n  } = props\n\n  const styles = useStyleConfig('Range', props)\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n  })\n  const isSingleValue = typeof defaultValue !== 'object' && typeof value !== 'object'\n  const mainColor = disabled ? rangeColors.disabled : rangeColors.main\n\n  const getTrackColor = (trackProps: any) => {\n    const { key }: { key: RangeTrackKey } = trackProps\n\n    if (isSingleValue) return key === 'track-0' ? mainColor : rangeColors.track\n\n    return key === 'track-2' ? rangeColors.track : key === 'track-1' ? mainColor : rangeColors.track\n  }\n\n  const Thumb = (props: any, state: any) => {\n    const { key, ...thumbProps } = props\n    const thumbKey = key ?? state.index\n    const content = (\n      <Box className=\"vui-range-thumb\" {...styles.thumb} borderColor={mainColor} {...thumbProps}>\n        {showValue && (\n          <Box center className=\"vui-range-thumb-value\" {...styles.thumbValue}>\n            {formatter(state.valueNow)}\n          </Box>\n        )}\n      </Box>\n    )\n    return showValue ? (\n      <Box key={thumbKey}>{content}</Box>\n    ) : (\n      <Tooltip key={thumbKey} disabled={disabled} text={formatter(state.valueNow)} visible={showTooltip}>\n        {content}\n      </Tooltip>\n    )\n  }\n\n  const Track = (\n    props: any,\n    state: {\n      index: number\n      value: number | readonly number[]\n    },\n  ) => {\n    const { key, ...trackProps } = props\n    return (\n      <Box\n        key={key}\n        {...styles.track}\n        bg={getTrackColor(props)}\n        className=\"vui-range-track\"\n        {...trackProps}\n        index={state.index}\n      />\n    )\n  }\n\n  return (\n    <Box\n      className={cs('vui-range', isSingleValue ? 'vui-range-single' : 'vui-range-range', className)}\n      ref={ref}\n      {...styles.container}\n      {...aliasedProps}\n      {...rest}\n    >\n      <SliderBase\n        key={`${disabled}-${min}-${max}-${step}`}\n        className=\"vui-range-slider\"\n        defaultValue={defaultValue}\n        disabled={disabled}\n        max={max}\n        min={min}\n        minDistance={minDistance}\n        onChange={onChange}\n        renderThumb={Thumb}\n        renderTrack={Track}\n        step={step}\n        value={value}\n      />\n    </Box>\n  )\n})\n\nRange.displayName = 'Range'\nexport default Range\n"],"mappings":";;;;;;;;;;;;AAUA,MAAM,aAAa,OAAO,WAAW,CAAC;;;;;;AAOtC,MAAM,oBAAoB,UAAkB,GAAG;;AAG/C,MAAa,QAAQ,KAAwB,OAAO,QAAQ;CAC1D,MAAM,EACJ,WACA,OACA,eAAe,GACf,UACA,MAAM,GACN,cAAc,GACd,MAAM,KACN,OAAO,GACP,cAAc,OACd,YAAY,OACZ,YAAY,kBACZ,UACA,GAAG,SACD;CAEJ,MAAM,SAAS,eAAe,SAAS,KAAK;CAC5C,MAAM,eAAe,gBAAgB,EACnC,iBAAiB,SACnB,CAAC;CACD,MAAM,gBAAgB,OAAO,iBAAiB,YAAY,OAAO,UAAU;CAC3E,MAAM,YAAY,WAAW,YAAY,WAAW,YAAY;CAEhE,MAAM,iBAAiB,eAAoB;EACzC,MAAM,EAAE,QAAgC;EAExC,IAAI,eAAe,OAAO,QAAQ,YAAY,YAAY,YAAY;EAEtE,OAAO,QAAQ,YAAY,YAAY,QAAQ,QAAQ,YAAY,YAAY,YAAY;CAC7F;CAEA,MAAM,SAAS,OAAY,UAAe;EACxC,MAAM,EAAE,KAAK,GAAG,eAAe;EAC/B,MAAM,WAAW,OAAO,MAAM;EAC9B,MAAM,UACJ,oBAAC,KAAD;GAAK,WAAU;GAAkB,GAAI,OAAO;GAAO,aAAa;GAAW,GAAI;aAC5E,aACC,oBAAC,KAAD;IAAK;IAAO,WAAU;IAAwB,GAAI,OAAO;cACtD,UAAU,MAAM,QAAQ;GACtB;EAEJ;EAEP,OAAO,YACL,oBAAC,KAAD,YAAqB,QAAa,GAAxB,QAAwB,IAElC,oBAAC,SAAD;GAAkC;GAAU,MAAM,UAAU,MAAM,QAAQ;GAAG,SAAS;aACnF;EACM,GAFK,QAEL;CAEb;CAEA,MAAM,SACJ,OACA,UAIG;EACH,MAAM,EAAE,KAAK,GAAG,eAAe;EAC/B,OACE,oBAAC,KAAD;GAEE,GAAI,OAAO;GACX,IAAI,cAAc,KAAK;GACvB,WAAU;GACV,GAAI;GACJ,OAAO,MAAM;EACd,GANM,GAMN;CAEL;CAEA,OACE,oBAAC,KAAD;EACE,WAAW,GAAG,aAAa,gBAAgB,qBAAqB,mBAAmB,SAAS;EACvF;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YAEJ,oBAAC,YAAD;GAEE,WAAU;GACI;GACJ;GACL;GACA;GACQ;GACH;GACV,aAAa;GACb,aAAa;GACP;GACC;EACR,GAZM,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAYnC;CACE;AAET,CAAC;AAED,MAAM,cAAc"}
+{"version":3,"file":"range.js","names":[],"sources":["../../src/range/range.tsx"],"sourcesContent":["import * as RadixSlider from '@radix-ui/react-slider'\nimport { useMemo, useState } from 'react'\n\nimport { Box } from '../box'\nimport { styled, useStyleConfig, vui } from '../core'\nimport { Tooltip } from '../tooltip'\nimport { cs, filterUndefined } from '../utils'\nimport { rangeColors } from './consts'\nimport type { RangeProps } from './range.types'\n\nconst SliderRoot = styled(Box)<{ $disabled?: boolean }>`\n  align-items: center;\n  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};\n  display: flex;\n  position: relative;\n  touch-action: none;\n  user-select: none;\n  width: 100%;\n`\n\nconst SliderTrack = styled(Box)`\n  flex-grow: 1;\n  height: 4px;\n  position: relative;\n`\n\nconst SliderRange = styled(Box)`\n  height: 100%;\n  position: absolute;\n`\n\nconst SliderThumb = styled(Box)<{ $disabled?: boolean }>`\n  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'grab')};\n  display: block;\n`\n\nconst defaultFormatter = (value: string) => `${value}`\n\ninterface RangeThumbProps {\n  disabled?: boolean\n  formatter: (value: string) => string\n  mainColor: string\n  showTooltip?: boolean\n  showValue: boolean\n  styles: ReturnType<typeof useStyleConfig>\n  val: number\n}\n\nconst RangeThumb = ({ disabled, formatter, mainColor, showTooltip, showValue, styles, val }: RangeThumbProps) => {\n  const formattedVal = formatter(String(val))\n\n  const thumbContent = (\n    <SliderThumb $disabled={disabled} className=\"vui-range-thumb\" {...styles.thumb} borderColor={mainColor}>\n      {showValue && (\n        <Box center className=\"vui-range-thumb-value\" {...styles.thumbValue}>\n          {formattedVal}\n        </Box>\n      )}\n    </SliderThumb>\n  )\n\n  const radixThumb = <RadixSlider.Thumb asChild>{thumbContent}</RadixSlider.Thumb>\n\n  if (showTooltip === false || (showTooltip === undefined && showValue)) return radixThumb\n\n  return (\n    <Tooltip disabled={disabled} text={formattedVal} visible={showTooltip}>\n      {radixThumb}\n    </Tooltip>\n  )\n}\n\nconst toArray = (val: number | readonly number[] | undefined): number[] | undefined => {\n  if (val === undefined) return undefined\n  return Array.isArray(val) ? Array.from(val as readonly number[]) : [val as number]\n}\n\n/** Implements a range input. */\nexport const Range = vui<'div', RangeProps>((props, ref) => {\n  const {\n    className,\n    value,\n    defaultValue = 0,\n    disabled,\n    min = 0,\n    minDistance = 0,\n    max = 100,\n    step = 1,\n    showTooltip,\n    showValue = false,\n    formatter = defaultFormatter,\n    onChange,\n    ...rest\n  } = props\n\n  const styles = useStyleConfig('Range', props)\n  const aliasedProps = filterUndefined({\n    'aria-disabled': disabled,\n  })\n  const isSingleValue = typeof defaultValue !== 'object' && typeof value !== 'object'\n  const mainColor = disabled ? rangeColors.disabled : rangeColors.main\n\n  const defaultArr = useMemo(() => toArray(defaultValue) ?? [0], [defaultValue])\n  const valueArr = toArray(value)\n\n  const [internalValues, setInternalValues] = useState<number[]>(defaultArr)\n  const currentValues = valueArr ?? internalValues\n\n  const handleValueChange = (vals: number[]) => {\n    if (!valueArr) setInternalValues(vals)\n    onChange?.(isSingleValue ? vals[0] : vals)\n  }\n\n  return (\n    <Box\n      className={cs('vui-range', isSingleValue ? 'vui-range-single' : 'vui-range-range', className)}\n      ref={ref}\n      {...styles.container}\n      {...aliasedProps}\n      {...rest}\n    >\n      <RadixSlider.Root\n        asChild\n        disabled={disabled}\n        max={max}\n        min={min}\n        minStepsBetweenThumbs={minDistance}\n        onValueChange={handleValueChange}\n        step={step}\n        {...(valueArr ? { value: valueArr } : { defaultValue: defaultArr })}\n      >\n        <SliderRoot $disabled={disabled} className=\"vui-range-slider\">\n          <RadixSlider.Track asChild>\n            <SliderTrack bg={rangeColors.track} borderRadius=\"24px\" className=\"vui-range-track\">\n              <RadixSlider.Range asChild>\n                <SliderRange {...styles.track} bg={mainColor} />\n              </RadixSlider.Range>\n            </SliderTrack>\n          </RadixSlider.Track>\n          {currentValues.map((val, index) => (\n            <RangeThumb\n              key={index}\n              disabled={disabled}\n              formatter={formatter}\n              mainColor={mainColor}\n              showTooltip={showTooltip}\n              showValue={showValue}\n              styles={styles}\n              val={val}\n            />\n          ))}\n        </SliderRoot>\n      </RadixSlider.Root>\n    </Box>\n  )\n})\n\nRange.displayName = 'Range'\nexport default Range\n"],"mappings":";;;;;;;;;;;;;AAUA,MAAM,aAAa,OAAO,GAAG,CAAC,AAAyB;;aAE1C,EAAE,gBAAiB,YAAY,gBAAgB,UAAW;;;;;;;AAQvE,MAAM,cAAc,OAAO,GAAG,CAAC;;;;;AAM/B,MAAM,cAAc,OAAO,GAAG,CAAC;;;;AAK/B,MAAM,cAAc,OAAO,GAAG,CAAC,AAAyB;aAC3C,EAAE,gBAAiB,YAAY,gBAAgB,OAAQ;;;AAIpE,MAAM,oBAAoB,UAAkB,GAAG;AAY/C,MAAM,cAAc,EAAE,UAAU,WAAW,WAAW,aAAa,WAAW,QAAQ,UAA2B;CAC/G,MAAM,eAAe,UAAU,OAAO,GAAG,CAAC;CAE1C,MAAM,eACJ,oBAAC,aAAD;EAAa,WAAW;EAAU,WAAU;EAAkB,GAAI,OAAO;EAAO,aAAa;YAC1F,aACC,oBAAC,KAAD;GAAK;GAAO,WAAU;GAAwB,GAAI,OAAO;aACtD;EACE;CAEI;CAGf,MAAM,aAAa,oBAAC,YAAY,OAAb;EAAmB;YAAS;CAAgC;CAE/E,IAAI,gBAAgB,SAAU,gBAAgB,UAAa,WAAY,OAAO;CAE9E,OACE,oBAAC,SAAD;EAAmB;EAAU,MAAM;EAAc,SAAS;YACvD;CACM;AAEb;AAEA,MAAM,WAAW,QAAsE;CACrF,IAAI,QAAQ,QAAW,OAAO;CAC9B,OAAO,MAAM,QAAQ,GAAG,IAAI,MAAM,KAAK,GAAwB,IAAI,CAAC,GAAa;AACnF;;AAGA,MAAa,QAAQ,KAAwB,OAAO,QAAQ;CAC1D,MAAM,EACJ,WACA,OACA,eAAe,GACf,UACA,MAAM,GACN,cAAc,GACd,MAAM,KACN,OAAO,GACP,aACA,YAAY,OACZ,YAAY,kBACZ,UACA,GAAG,SACD;CAEJ,MAAM,SAAS,eAAe,SAAS,KAAK;CAC5C,MAAM,eAAe,gBAAgB,EACnC,iBAAiB,SACnB,CAAC;CACD,MAAM,gBAAgB,OAAO,iBAAiB,YAAY,OAAO,UAAU;CAC3E,MAAM,YAAY,WAAW,YAAY,WAAW,YAAY;CAEhE,MAAM,aAAa,cAAc,QAAQ,YAAY,KAAK,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC;CAC7E,MAAM,WAAW,QAAQ,KAAK;CAE9B,MAAM,CAAC,gBAAgB,qBAAqB,SAAmB,UAAU;CACzE,MAAM,gBAAgB,YAAY;CAElC,MAAM,qBAAqB,SAAmB;EAC5C,IAAI,CAAC,UAAU,kBAAkB,IAAI;EACrC,WAAW,gBAAgB,KAAK,KAAK,IAAI;CAC3C;CAEA,OACE,oBAAC,KAAD;EACE,WAAW,GAAG,aAAa,gBAAgB,qBAAqB,mBAAmB,SAAS;EACvF;EACL,GAAI,OAAO;EACX,GAAI;EACJ,GAAI;YAEJ,oBAAC,YAAY,MAAb;GACE;GACU;GACL;GACA;GACL,uBAAuB;GACvB,eAAe;GACT;GACN,GAAK,WAAW,EAAE,OAAO,SAAS,IAAI,EAAE,cAAc,WAAW;aAEjE,qBAAC,YAAD;IAAY,WAAW;IAAU,WAAU;cAA3C,CACE,oBAAC,YAAY,OAAb;KAAmB;eACjB,oBAAC,aAAD;MAAa,IAAI,YAAY;MAAO,cAAa;MAAO,WAAU;gBAChE,oBAAC,YAAY,OAAb;OAAmB;iBACjB,oBAAC,aAAD;QAAa,GAAI,OAAO;QAAO,IAAI;OAAY;MAC9B;KACR;IACI,IAClB,cAAc,KAAK,KAAK,UACvB,oBAAC,YAAD;KAEY;KACC;KACA;KACE;KACF;KACH;KACH;IACN,GARM,KAQN,CACF,CACS;;EACI;CACf;AAET,CAAC;AAED,MAAM,cAAc"}

package/dist/range/range.types.d.ts

@@ -9,14 +9,13 @@ type RangeProps = SystemProps & ThemingProps<'Range'> & {
   min?: number; /** The minimum value of the range slider. @default 100 */
   max?: number; /** The minimum distance between two values in the range slider. @default 0 */
   minDistance?: number; /** The step increment of the range slider. @default 1 */
-  step?: number; /** Whether to show a tooltip with the current value. @default false */
+  step?: number; /** Controls tooltip visibility. Omit to show on hover (default), `true` to always show, `false` to hide. When `showValue` is `true`, the tooltip is hidden by default. */
   showTooltip?: boolean; /** Whether to show the current value bellow the thumb. @default false */
   showValue?: boolean; /** Function used to format the display value. */
   formatter?: (value: string) => string; /** Callback function that is called when the value changes. */
   onChange?: (value: RangeValue) => void;
 };
-type RangeTrackKey = 'track-0' | 'track-1' | 'track-2';
 //#endregion
-export { RangeProps, RangeTrackKey, RangeValue };
+export { RangeProps, RangeValue };
 
 //# sourceMappingURL=range.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"range.types.d.ts","names":[],"sources":["../../src/range/range.types.ts"],"mappings":";;;KAGY,UAAA;AAAA,KAEA,UAAA,GAAa,WAAA,GACvB,YAAA;sFAEE,YAAA,GAAe,UAAA,EALP;EAOR,KAAA,GAAQ,UAAA;EAER,QAAA,YATkB;EAWlB,GAAA,WATkB;EAWlB,GAAA,WAXqB;EAarB,WAAA,WAVe;EAYf,IAAA,WAQmB;EANnB,WAAA,YAM6B;EAJ7B,SAAA,YAlBF;EAoBE,SAAA,IAAa,KAAA,qBAlBE;EAoBf,QAAA,IAAY,KAAA,EAAO,UAAA;AAAA;AAAA,KAGX,aAAA"}
+{"version":3,"file":"range.types.d.ts","names":[],"sources":["../../src/range/range.types.ts"],"mappings":";;;KAGY,UAAA;AAAA,KAEA,UAAA,GAAa,WAAA,GACvB,YAAA;sFAEE,YAAA,GAAe,UAAA,EALP;EAOR,KAAA,GAAQ,UAAA;EAER,QAAA,YATkB;EAWlB,GAAA,WATkB;EAWlB,GAAA,WAXqB;EAarB,WAAA,WAVe;EAYf,IAAA,WAQmB;EANnB,WAAA,YAM6B;EAJ7B,SAAA,YAlBF;EAoBE,SAAA,IAAa,KAAA,qBAlBE;EAoBf,QAAA,IAAY,KAAA,EAAO,UAAA;AAAA"}

package/dist/range/theme.js

@@ -5,14 +5,12 @@ const baseStyle = {
 	container: { w: 1 },
 	thumb: {
 		bg: "white",
-		border: `2px solid ${rangeColors.main}`,
+		border: "2px solid",
 		borderRadius: "24px",
-		cursor: "grab",
 		h: "24px",
 		lineHeight: "24px",
 		w: "24px",
 		textAlign: "center",
-		top: "-10px",
 		transitionDuration: "0s"
 	},
 	thumbValue: {
@@ -22,9 +20,7 @@ const baseStyle = {
 	},
 	track: {
 		bg: rangeColors.main,
-		bottom: 0,
 		borderRadius: "24px",
-		top: 0,
 		transitionDuration: "0s"
 	}
 };