@dreamtree-org/twreact-ui 1.3.9 → 1.3.10

package/dist/esm/components/core/Tooltip.js

@@ -6,6 +6,24 @@ import { createPortal } from 'react-dom';
 import { cn } from '../../utils/cn.js';
 
 var _excluded = ["position", "trigger", "content", "customTrigger", "children", "open", "defaultOpen", "onChange", "delay", "offset", "textClass", "bgClass", "className", "portal", "id"];
+// Grace period (ms) before a hover tooltip closes after the pointer leaves the
+// trigger, so the pointer can cross the `offset` gap onto the tooltip itself
+// (WCAG 1.4.13 "hoverable").
+var HOVER_CLOSE_GRACE = 100;
+/**
+ * Nearest ancestor that establishes the containing block for an absolutely
+ * positioned element. Uses `offsetParent` where the browser provides it and
+ * falls back to walking computed styles (jsdom has no layout).
+ */
+var getContainingBlock = function getContainingBlock(el) {
+  if (el.offsetParent) return el.offsetParent;
+  for (var p = el.parentElement; p && p !== document.body; p = p.parentElement) {
+    var cs = window.getComputedStyle(p);
+    if (cs.position && cs.position !== "static") return p;
+    if (cs.transform && cs.transform !== "none") return p;
+  }
+  return null;
+};
 var NATIVE_FOCUSABLE_TAGS = new Set(["button", "input", "select", "textarea"]);
 /**
  * True when `el` is a single intrinsic element that is keyboard-focusable on
@@ -62,9 +80,9 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
     _ref$offset = _ref.offset,
     offset = _ref$offset === void 0 ? 8 : _ref$offset,
     _ref$textClass = _ref.textClass,
-    textClass = _ref$textClass === void 0 ? "text-black" : _ref$textClass,
+    textClass = _ref$textClass === void 0 ? "text-foreground" : _ref$textClass,
     _ref$bgClass = _ref.bgClass,
-    bgClass = _ref$bgClass === void 0 ? "bg-white" : _ref$bgClass,
+    bgClass = _ref$bgClass === void 0 ? "bg-surface" : _ref$bgClass,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     _ref$portal = _ref.portal,
@@ -74,6 +92,7 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
   var triggerRef = useRef(null);
   var tooltipRef = useRef(null);
   var delayRef = useRef(null);
+  var closeTimerRef = useRef(null);
   var _useState = useState(Boolean(controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : defaultOpen)),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -176,10 +195,22 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
     var pad = 8;
     left = Math.max(pad, Math.min(left, winW - ttW - pad));
     top = Math.max(pad, Math.min(top, winH - ttH - pad));
+    // `left`/`top` are viewport coords; convert to the containing block of the
+    // absolutely positioned tooltip. Portaled into <body> (or inline with no
+    // positioned ancestor) that is the document, so add page scroll; inline
+    // inside a positioned ancestor, offset by that ancestor instead.
+    var cb = getContainingBlock(el);
+    var originX = -window.scrollX;
+    var originY = -window.scrollY;
+    if (cb && cb !== document.body && cb !== document.documentElement) {
+      var cr = cb.getBoundingClientRect();
+      originX = cr.left + (cb.clientLeft || 0) - cb.scrollLeft;
+      originY = cr.top + (cb.clientTop || 0) - cb.scrollTop;
+    }
     setPlacement(chosen);
     setCoords({
-      left: Math.round(left) + window.scrollX,
-      top: Math.round(top) + window.scrollY
+      left: Math.round(left - originX),
+      top: Math.round(top - originY)
     });
   }, [offset, position]);
   useEffect(function () {
@@ -202,9 +233,13 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
     };
   }, [open, computePosition]);
   // open/close helpers
+  var cancelScheduledClose = useCallback(function () {
+    clearTimeout(closeTimerRef.current);
+  }, []);
   var openTooltip = useCallback(function () {
     var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     clearTimeout(delayRef.current);
+    clearTimeout(closeTimerRef.current);
     if (immediate || !delay) {
       setOpen(true);
       notify(true);
@@ -217,9 +252,22 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
   }, [delay, notify]);
   var closeTooltip = useCallback(function () {
     clearTimeout(delayRef.current);
+    clearTimeout(closeTimerRef.current);
     setOpen(false);
     notify(false);
   }, [notify]);
+  // Hover close is deferred so the pointer can move onto the tooltip.
+  var scheduleClose = useCallback(function () {
+    clearTimeout(delayRef.current);
+    clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = setTimeout(closeTooltip, HOVER_CLOSE_GRACE);
+  }, [closeTooltip]);
+  useEffect(function () {
+    return function () {
+      clearTimeout(delayRef.current);
+      clearTimeout(closeTimerRef.current);
+    };
+  }, []);
   // triggers normalization
   var triggers = useMemo(function () {
     return Array.isArray(trigger) ? trigger : [trigger];
@@ -228,34 +276,23 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
   useEffect(function () {
     var t = triggerRef.current;
     if (!t) return;
+    // The tooltip element itself keeps the tip open via its onMouseEnter /
+    // onMouseLeave props (see tooltipNode) — it doesn't exist yet here.
     if (triggers.includes("hover")) {
       var onMouseEnter = function onMouseEnter() {
         return openTooltip();
       };
       var onMouseLeave = function onMouseLeave() {
-        return closeTooltip();
+        return scheduleClose();
       };
       t.addEventListener("mouseenter", onMouseEnter);
       t.addEventListener("mouseleave", onMouseLeave);
-      // also attach to tooltip to prevent flicker
-      var tip = function tip() {
-        return tooltipRef.current;
-      };
-      var tryTip = tip();
-      if (tryTip) {
-        tryTip.addEventListener("mouseenter", onMouseEnter);
-        tryTip.addEventListener("mouseleave", onMouseLeave);
-      }
       return function () {
         t.removeEventListener("mouseenter", onMouseEnter);
         t.removeEventListener("mouseleave", onMouseLeave);
-        if (tryTip) {
-          tryTip.removeEventListener("mouseenter", onMouseEnter);
-          tryTip.removeEventListener("mouseleave", onMouseLeave);
-        }
       };
     }
-  }, [triggers, openTooltip, closeTooltip]);
+  }, [triggers, openTooltip, scheduleClose]);
   // click handlers (toggle and outside click)
   useEffect(function () {
     var t = triggerRef.current;
@@ -283,16 +320,21 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
       };
     }
   }, [triggers, notify]);
-  // focus handlers: use focusin / focusout which bubble and handle inner focusables
+  // focus handlers: use focusin / focusout which bubble and handle inner focusables.
+  // A hover tooltip also opens on keyboard focus (WCAG 1.4.13), unless click
+  // is a trigger too (focus-on-click would open it and the click toggle it shut).
+  var opensOnFocus = triggers.includes("focus") || triggers.includes("hover") && !triggers.includes("click");
   useEffect(function () {
     var t = triggerRef.current;
     if (!t) return;
-    if (triggers.includes("focus")) {
+    if (opensOnFocus) {
       var onFocusIn = function onFocusIn() {
         return openTooltip(true);
       };
-      var onFocusOut = function onFocusOut() {
-        return closeTooltip();
+      var onFocusOut = function onFocusOut(e) {
+        var tip = tooltipRef.current;
+        if (e.relatedTarget && tip && tip.contains(e.relatedTarget)) return;
+        closeTooltip();
       };
       t.addEventListener("focusin", onFocusIn);
       t.addEventListener("focusout", onFocusOut);
@@ -301,7 +343,22 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
         t.removeEventListener("focusout", onFocusOut);
       };
     }
-  }, [triggers, openTooltip, closeTooltip]);
+  }, [opensOnFocus, openTooltip, closeTooltip]);
+  // Dismiss on a pointer/tap outside. Touch has no mouseleave, so without this
+  // a tapped-open hover tooltip would never close.
+  useEffect(function () {
+    if (!open) return;
+    var onPointerDown = function onPointerDown(e) {
+      var t = triggerRef.current;
+      var tip = tooltipRef.current;
+      if (t && t.contains(e.target) || tip && tip.contains(e.target)) return;
+      closeTooltip();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return function () {
+      return document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [open, closeTooltip]);
   // Escape key closes tooltip
   useEffect(function () {
     if (!open) return;
@@ -345,20 +402,35 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
     "aria-describedby": id,
     children: children
   });
+  // Hovering the tooltip itself keeps it open (attached as props so they are
+  // live as soon as the tip mounts); consumer handlers in ...rest still run.
+  var hoverable = triggers.includes("hover");
+  var restMouseEnter = rest.onMouseEnter,
+    restMouseLeave = rest.onMouseLeave;
+  var tipHoverProps = hoverable ? {
+    onMouseEnter: function onMouseEnter(e) {
+      cancelScheduledClose();
+      restMouseEnter === null || restMouseEnter === void 0 || restMouseEnter(e);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      scheduleClose();
+      restMouseLeave === null || restMouseLeave === void 0 || restMouseLeave(e);
+    }
+  } : {};
   // Tooltip box element
-  var tooltipNode = open ? jsx("div", _objectSpread2(_objectSpread2({
+  var tooltipNode = open ? jsx("div", _objectSpread2(_objectSpread2(_objectSpread2({
     ref: tooltipRef,
     id: id,
     role: "tooltip"
-  }, rest), {}, {
-    className: cn("absolute z-50 transform-gpu transition-opacity duration-150", className),
+  }, rest), tipHoverProps), {}, {
+    className: cn("absolute z-50 transform-gpu transition-opacity duration-150 motion-reduce:transition-none", className),
     style: {
       left: coords.left,
       top: coords.top,
       position: "absolute"
     },
     children: jsx("div", {
-      className: cn("max-w-xs rounded-md border border-gray-200 px-3 py-2 text-sm shadow-lg shadow-black/5", bgClass, textClass),
+      className: cn("max-w-xs rounded-md border border-line px-3 py-2 text-sm shadow-lg shadow-black/5", bgClass, textClass),
       children: renderContent()
     })
   })) : null;

package/dist/esm/components/feedback/Alert.js

@@ -4,8 +4,12 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { cn } from '../../utils/cn.js';
 import { Info, AlertTriangle, AlertCircle, CheckCircle, X } from 'lucide-react';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
 var _excluded = ["variant", "title", "children", "dismissible", "onDismiss", "className"];
+// error / warning need attention now (role="alert", assertive); info / success
+// are neutral and must not interrupt (role="status", polite).
+var URGENT_VARIANTS = new Set(['error', 'warning']);
 var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'info' : _ref$variant,
@@ -20,7 +24,8 @@ var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     success: {
       container: 'bg-success-50 border-success-200',
       icon: jsx(CheckCircle, {
-        className: "h-5 w-5 text-success-500"
+        className: "h-5 w-5 text-success-500",
+        "aria-hidden": "true"
       }),
       title: 'text-success-800',
       content: 'text-success-700'
@@ -28,7 +33,8 @@ var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     error: {
       container: 'bg-error-50 border-error-200',
       icon: jsx(AlertCircle, {
-        className: "h-5 w-5 text-error-500"
+        className: "h-5 w-5 text-error-500",
+        "aria-hidden": "true"
       }),
       title: 'text-error-800',
       content: 'text-error-700'
@@ -36,7 +42,8 @@ var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     warning: {
       container: 'bg-warning-50 border-warning-200',
       icon: jsx(AlertTriangle, {
-        className: "h-5 w-5 text-warning-500"
+        className: "h-5 w-5 text-warning-500",
+        "aria-hidden": "true"
       }),
       title: 'text-warning-800',
       content: 'text-warning-700'
@@ -44,7 +51,8 @@ var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     info: {
       container: 'bg-primary-50 border-primary-200',
       icon: jsx(Info, {
-        className: "h-5 w-5 text-primary-500"
+        className: "h-5 w-5 text-primary-500",
+        "aria-hidden": "true"
       }),
       title: 'text-primary-800',
       content: 'text-primary-700'
@@ -54,7 +62,7 @@ var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return jsx("div", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn('rounded-md border p-4', variantStyles.container, className),
-    role: "alert"
+    role: URGENT_VARIANTS.has(variant) ? 'alert' : 'status'
   }, props), {}, {
     children: jsxs("div", {
       className: "flex",
@@ -76,15 +84,17 @@ var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         className: "ml-auto pl-3",
         children: jsx("button", {
           type: "button",
-          className: cn('inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2', {
-            'text-success-500 hover:bg-success-100 focus:ring-success-600': variant === 'success',
-            'text-error-500 hover:bg-error-100 focus:ring-error-600': variant === 'error',
-            'text-warning-500 hover:bg-warning-100 focus:ring-warning-600': variant === 'warning',
-            'text-primary-500 hover:bg-primary-100 focus:ring-primary-600': variant === 'info'
+          className: cn('inline-flex items-center justify-center rounded-md p-1.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', TOUCH_TARGET, {
+            'text-success-500 hover:bg-success-100 focus-visible:ring-success-600': variant === 'success',
+            'text-error-500 hover:bg-error-100 focus-visible:ring-error-600': variant === 'error',
+            'text-warning-500 hover:bg-warning-100 focus-visible:ring-warning-600': variant === 'warning',
+            'text-primary-500 hover:bg-primary-100 focus-visible:ring-primary-600': variant === 'info'
           }),
           onClick: onDismiss,
+          "aria-label": "Dismiss",
           children: jsx(X, {
-            className: "h-4 w-4"
+            className: "h-4 w-4",
+            "aria-hidden": "true"
           })
         })
       })]

package/dist/esm/components/feedback/Dialog.js

@@ -1,38 +1,21 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useId, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../utils/cn.js';
 import { X } from 'lucide-react';
 import { useLatestRef } from '../../hooks/useLatestRef.js';
+import { useFocusTrap } from '../../hooks/useFocusTrap.js';
+import { useScrollLock } from '../../hooks/useScrollLock.js';
+import { setRefs } from '../../utils/position.js';
 import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
 var _excluded = ["isOpen", "onClose", "title", "children", "size", "dismissible", "showCloseButton", "footer", "className", "onOpen"],
   _excluded2 = ["children", "className"],
   _excluded3 = ["children", "className"],
   _excluded4 = ["children", "className"];
-// Elements that can receive keyboard focus. Used to drive the focus trap and to
-// pick the first element to focus when the dialog opens (WAI-ARIA APG dialog).
-var FOCUSABLE_SELECTOR = ['a[href]', 'button:not([disabled])', 'textarea:not([disabled])', 'input:not([disabled])', 'select:not([disabled])', '[tabindex]:not([tabindex="-1"])'].join(',');
-var getFocusable = function getFocusable(root) {
-  return root ? Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(function (el) {
-    return el.getAttribute('aria-hidden') !== 'true';
-  }) : [];
-};
-// Assign one node to several refs (callback or object). Lets the dialog keep
-// its internal `dialogRef` for the focus trap while still exposing the panel
-// node to a consumer-supplied `ref` (issue #56).
-var setRefs = function setRefs(node) {
-  for (var _len = arguments.length, refs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    refs[_key - 1] = arguments[_key];
-  }
-  refs.forEach(function (ref) {
-    if (!ref) return;
-    if (typeof ref === 'function') ref(node);else ref.current = node;
-  });
-};
-var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref3) {
+var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref2) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     title = _ref.title,
@@ -48,66 +31,27 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref3) {
     onOpen = _ref.onOpen,
     props = _objectWithoutProperties(_ref, _excluded);
   var dialogRef = useRef(null);
-  // The element that had focus when the dialog opened, so we can restore it on close.
-  var lastFocusedRef = useRef(null);
+  // Unique per instance so two open dialogs never share an aria-labelledby target.
+  var titleId = "dialog-title-".concat(useId());
   // Latest onOpen without re-running the open effect when the prop identity changes.
   var onOpenRef = useLatestRef(onOpen);
+  // Ref-counted body lock: closing a Dialog stacked over a Drawer (or another
+  // overlay) leaves the page locked until the last overlay closes.
+  useScrollLock(isOpen);
+  // Shared focus management: initial focus, Tab trap, Escape (top layer only),
+  // and focus restore to the opener on close.
+  useFocusTrap(dialogRef, {
+    active: isOpen,
+    onEscape: function onEscape() {
+      if (dismissible) onClose === null || onClose === void 0 || onClose();
+    }
+  });
   useEffect(function () {
-    var _ref2, _focusables$, _onOpenRef$current;
-    if (!isOpen) return undefined;
-    // Remember the opener so focus can return to it when the dialog closes.
-    lastFocusedRef.current = document.activeElement;
-    document.body.style.overflow = 'hidden';
-    // Move focus into the panel: first focusable descendant, else the panel itself.
-    var panel = dialogRef.current;
-    var focusables = getFocusable(panel);
-    (_ref2 = (_focusables$ = focusables[0]) !== null && _focusables$ !== void 0 ? _focusables$ : panel) === null || _ref2 === void 0 || _ref2.focus();
-    (_onOpenRef$current = onOpenRef.current) === null || _onOpenRef$current === void 0 || _onOpenRef$current.call(onOpenRef, {
-      dialogRef: panel
+    var _onOpenRef$current;
+    if (isOpen) (_onOpenRef$current = onOpenRef.current) === null || _onOpenRef$current === void 0 || _onOpenRef$current.call(onOpenRef, {
+      dialogRef: dialogRef.current
     });
-    return function () {
-      var _lastFocusedRef$curre, _lastFocusedRef$curre2;
-      document.body.style.overflow = 'unset';
-      // Restore focus to whatever opened the dialog (APG focus-restore requirement).
-      (_lastFocusedRef$curre = lastFocusedRef.current) === null || _lastFocusedRef$curre === void 0 || (_lastFocusedRef$curre2 = _lastFocusedRef$curre.focus) === null || _lastFocusedRef$curre2 === void 0 || _lastFocusedRef$curre2.call(_lastFocusedRef$curre);
-    };
   }, [isOpen, onOpenRef]);
-  // Escape-to-close + Tab focus trap. An aria-modal element must keep keyboard
-  // focus inside the panel; without this, Tab walks into the page behind it.
-  useEffect(function () {
-    if (!isOpen) return undefined;
-    var handleKeyDown = function handleKeyDown(e) {
-      if (e.key === 'Escape') {
-        if (dismissible) onClose === null || onClose === void 0 || onClose();
-        return;
-      }
-      if (e.key !== 'Tab') return;
-      var panel = dialogRef.current;
-      if (!panel) return;
-      var focusables = getFocusable(panel);
-      if (focusables.length === 0) {
-        // Nothing focusable inside — pin focus to the panel.
-        e.preventDefault();
-        panel.focus();
-        return;
-      }
-      var first = focusables[0];
-      var last = focusables[focusables.length - 1];
-      var active = document.activeElement;
-      var outside = !panel.contains(active) || active === panel;
-      if (e.shiftKey && (active === first || outside)) {
-        e.preventDefault();
-        last.focus();
-      } else if (!e.shiftKey && (active === last || outside)) {
-        e.preventDefault();
-        first.focus();
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return function () {
-      return document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [isOpen, dismissible, onClose]);
   if (!isOpen) return null;
   var sizeClasses = {
     sm: 'max-w-md',
@@ -122,27 +66,27 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref3) {
     }
   };
   return /*#__PURE__*/createPortal(jsx("div", {
-    className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4",
+    className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
     onClick: handleBackdropClick,
     children: jsxs("div", _objectSpread2(_objectSpread2({
       ref: function ref(node) {
-        return setRefs(node, dialogRef, _ref3);
+        return setRefs(node, dialogRef, _ref2);
       },
-      className: cn('w-full rounded-lg bg-white shadow-xl animate-scale-in motion-reduce:animate-none', sizeClasses[size], className),
+      className: cn('w-full rounded-lg border border-line bg-surface text-foreground shadow-xl focus:outline-none animate-scale-in motion-reduce:animate-none', sizeClasses[size], className),
       tabIndex: -1,
       role: "dialog",
       "aria-modal": "true",
-      "aria-labelledby": title ? 'dialog-title' : undefined
+      "aria-labelledby": title ? titleId : undefined
     }, props), {}, {
       children: [(title || showCloseButton) && jsxs("div", {
-        className: "flex items-center justify-between border-b border-gray-200 px-6 py-4",
+        className: "flex items-center justify-between border-b border-line px-6 py-4",
         children: [title && jsx("h2", {
-          id: "dialog-title",
-          className: "text-lg font-semibold text-primary-900",
+          id: titleId,
+          className: "text-lg font-semibold text-foreground",
           children: title
         }), showCloseButton && jsx("button", {
           type: "button",
-          className: cn('inline-flex items-center justify-center rounded-md p-1 text-primary-400 hover:text-primary-600 hover:bg-gray-100', TOUCH_TARGET),
+          className: cn('inline-flex items-center justify-center rounded-md p-1 text-muted hover:bg-gray-100 hover:text-foreground dark:hover:bg-gray-800', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500', TOUCH_TARGET),
           onClick: onClose,
           "aria-label": "Close dialog",
           children: jsx(X, {
@@ -154,7 +98,7 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref3) {
         className: "px-6 py-4",
         children: children
       }), footer && jsx("div", {
-        className: "flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4",
+        className: "flex items-center justify-end gap-3 border-t border-line px-6 py-4",
         children: footer
       })]
     }))
@@ -162,32 +106,32 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref3) {
 });
 Dialog.displayName = 'Dialog';
 // Dialog components for composition
-var DialogHeader = function DialogHeader(_ref4) {
-  var children = _ref4.children,
-    className = _ref4.className,
-    props = _objectWithoutProperties(_ref4, _excluded2);
+var DialogHeader = function DialogHeader(_ref3) {
+  var children = _ref3.children,
+    className = _ref3.className,
+    props = _objectWithoutProperties(_ref3, _excluded2);
   return jsx("div", _objectSpread2(_objectSpread2({
-    className: cn('border-b border-gray-200 px-6 py-4', className)
+    className: cn('border-b border-line px-6 py-4', className)
   }, props), {}, {
     children: children
   }));
 };
-var DialogBody = function DialogBody(_ref5) {
-  var children = _ref5.children,
-    className = _ref5.className,
-    props = _objectWithoutProperties(_ref5, _excluded3);
+var DialogBody = function DialogBody(_ref4) {
+  var children = _ref4.children,
+    className = _ref4.className,
+    props = _objectWithoutProperties(_ref4, _excluded3);
   return jsx("div", _objectSpread2(_objectSpread2({
     className: cn('px-6 py-4', className)
   }, props), {}, {
     children: children
   }));
 };
-var DialogFooter = function DialogFooter(_ref6) {
-  var children = _ref6.children,
-    className = _ref6.className,
-    props = _objectWithoutProperties(_ref6, _excluded4);
+var DialogFooter = function DialogFooter(_ref5) {
+  var children = _ref5.children,
+    className = _ref5.className,
+    props = _objectWithoutProperties(_ref5, _excluded4);
   return jsx("div", _objectSpread2(_objectSpread2({
-    className: cn('flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4', className)
+    className: cn('flex items-center justify-end gap-3 border-t border-line px-6 py-4', className)
   }, props), {}, {
     children: children
   }));

package/dist/esm/components/feedback/Toast.js

@@ -5,8 +5,23 @@ import { forwardRef, useState, useRef, useCallback, useEffect, useContext, creat
 import { createPortal } from 'react-dom';
 import { cn } from '../../utils/cn.js';
 import { Bell, Info, AlertTriangle, XCircle, CheckCircle2, X } from 'lucide-react';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
 var _excluded = ["id", "title", "message", "description", "type", "duration", "onClose", "position", "statusIcon", "actions", "color", "footerNote", "showFooterNote", "portal", "className"];
+// Errors interrupt (role="alert", assertive); everything else waits for the
+// screen reader to finish (role="status", polite). Consumers can still pass
+// their own role / aria-live, which win because ...props spreads last.
+var liveRegionProps = function liveRegionProps(type) {
+  return type === 'error' ? {
+    role: 'alert',
+    'aria-live': 'assertive',
+    'aria-atomic': 'true'
+  } : {
+    role: 'status',
+    'aria-live': 'polite',
+    'aria-atomic': 'true'
+  };
+};
 var STATUS_CONFIG = {
   success: {
     icon: CheckCircle2,
@@ -147,7 +162,7 @@ var Toast = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var statusStyle = STATUS_CONFIG[type] || STATUS_CONFIG.info || STATUS_CONFIG["default"];
   var StatusIconComponent = statusStyle.icon;
   var bodyText = description || message;
-  var toastContent = jsxs("div", _objectSpread2(_objectSpread2({
+  var toastContent = jsxs("div", _objectSpread2(_objectSpread2(_objectSpread2({
     ref: ref,
     onMouseEnter: function onMouseEnter() {
       return setIsPaused(true);
@@ -155,14 +170,15 @@ var Toast = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onMouseLeave: function onMouseLeave() {
       return setIsPaused(false);
     },
-    className: cn('relative overflow-hidden rounded-xl border border-slate-200/90 bg-white/95 shadow-xl backdrop-blur-md transition-all duration-300', 'dark:border-slate-800/80 dark:bg-[#18181b] dark:text-slate-100 dark:shadow-2xl', 'max-w-md w-full', isLeaving ? 'opacity-0 scale-95 translate-y-1' : 'animate-slide-up opacity-100 scale-100', portal ? ['fixed z-50', STANDALONE_POSITION_CLASSES[position] || STANDALONE_POSITION_CLASSES['top-right']] : '', className)
-  }, props), {}, {
+    className: cn('relative overflow-hidden rounded-xl border border-slate-200/90 bg-white/95 shadow-xl backdrop-blur-md transition-all duration-300', 'dark:border-slate-800/80 dark:bg-[#18181b] dark:text-slate-100 dark:shadow-2xl', 'max-w-md w-full motion-reduce:transition-none', isLeaving ? 'opacity-0 scale-95 translate-y-1' : 'animate-slide-up motion-reduce:animate-none opacity-100 scale-100', portal ? ['fixed z-50', STANDALONE_POSITION_CLASSES[position] || STANDALONE_POSITION_CLASSES['top-right']] : '', className)
+  }, liveRegionProps(type)), props), {}, {
     children: [jsx("div", {
       className: "p-4",
       children: jsxs("div", {
         className: "flex items-start gap-3 justify-between",
         children: [jsx("span", {
           className: "flex-shrink-0 mt-0.5",
+          "aria-hidden": "true",
           children: statusIcon ? statusIcon : jsx(StatusIconComponent, {
             className: cn('h-5 w-5', statusStyle.iconClass)
           })
@@ -194,10 +210,11 @@ var Toast = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }), jsx("button", {
           type: "button",
           "aria-label": "Close notification",
-          className: "flex-shrink-0 rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-zinc-800/70 transition-colors outline-none focus:ring-2 focus:ring-primary-500",
+          className: cn('inline-flex flex-shrink-0 items-center justify-center rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-zinc-800/70 transition-colors motion-reduce:transition-none outline-none focus-visible:ring-2 focus-visible:ring-primary-500', TOUCH_TARGET),
           onClick: handleClose,
           children: jsx(X, {
-            className: "h-4 w-4"
+            className: "h-4 w-4",
+            "aria-hidden": "true"
           })
         })]
       })
@@ -250,6 +267,8 @@ var ToastStack = function ToastStack(_ref2) {
   }
   var posClass = POSITION_CLASSES[position] || POSITION_CLASSES['top-right'];
   return /*#__PURE__*/createPortal(jsx("div", {
+    role: "region",
+    "aria-label": "Notifications",
     className: cn('fixed z-50 flex flex-col gap-3 max-h-[calc(100vh-2rem)] overflow-y-auto overflow-x-hidden p-2 pointer-events-none', '[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden', posClass, className),
     children: toasts.map(function (t) {
       return jsx("div", {