@jirawatpyk/aura-react 5.5.0 → 5.6.0

package/dist/esm/Toaster.js

@@ -3,8 +3,8 @@ import * as React from "react";
 import { ALERT_ICON } from "./Alert.js";
 import { Icon } from "./Icon.js";
 import { IconButton } from "./IconButton.js";
-import { cx, useMounted } from "./internal.js";
-import { useStrings } from "./locale.js";
+import { cx, plainClick, useIsoLayoutEffect, useMounted } from "./internal.js";
+import { useLinkComponent, useStrings } from "./locale.js";
 import { createPortal } from "react-dom";
 const MAX_VISIBLE = 3;
 const toastState = {
@@ -73,10 +73,35 @@ toast.dismiss = function(id) {
   promote();
   emitToasts();
 };
+const hotkeyOrigin = /* @__PURE__ */ new WeakMap();
+function outsideToaster(el) {
+  return el && el !== document.body && !el.closest(".aura-toaster") ? el : null;
+}
 function ToastItem(props) {
   const str = useStrings();
+  const Link = useLinkComponent();
+  const node = React.useRef(null);
+  const origin = React.useRef(null);
+  useIsoLayoutEffect(function() {
+    origin.current = outsideToaster(document.activeElement);
+    const el = node.current;
+    return function() {
+      if (!el || !el.contains(document.activeElement)) return;
+      const back = [hotkeyOrigin.get(el), origin.current].filter(function(b) {
+        return !!b && b.isConnected;
+      })[0];
+      hotkeyOrigin.delete(el);
+      setTimeout(function() {
+        if (back && back.isConnected && (!document.activeElement || document.activeElement === document.body))
+          back.focus();
+      }, 0);
+    };
+  }, []);
   const t = props.toast, timer = React.useRef(null), left = React.useRef(t.duration || 5e3), since = React.useRef(0);
-  const hover = React.useRef(false);
+  const hover = React.useRef(false), focused = React.useRef(false);
+  function syncFocus() {
+    if (focused.current && !(node.current && node.current.contains(document.activeElement))) focused.current = false;
+  }
   function start() {
     if (left.current === Infinity || timer.current) return;
     since.current = Date.now();
@@ -85,11 +110,10 @@ function ToastItem(props) {
     }, left.current);
   }
   function resume() {
-    hover.current = false;
-    start();
+    syncFocus();
+    if (!hover.current && !focused.current) start();
   }
   function pause() {
-    hover.current = true;
     if (timer.current) {
       clearTimeout(timer.current);
       timer.current = null;
@@ -101,23 +125,56 @@ function ToastItem(props) {
       if (timer.current) clearTimeout(timer.current);
       timer.current = null;
       left.current = t.duration || 5e3;
-      if (!hover.current) start();
+      syncFocus();
+      if (!hover.current && !focused.current) start();
       return function() {
         if (timer.current) clearTimeout(timer.current);
       };
     },
     [t.rev]
   );
+  const rich = t.description != null && typeof t.description !== "boolean" && t.description !== "";
+  const actions = (t.actions && t.actions.length ? t.actions : t.action ? [t.action] : []).slice(0, 2);
+  function run(a) {
+    if (a.onClick) a.onClick();
+    if (a.dismiss !== false) toast.dismiss(t.id);
+  }
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: cx("aura-toast", "aura-toast--" + t.tone, t.loading && "is-loading"),
+      ref: node,
+      onKeyDown: function(e) {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          toast.dismiss(t.id);
+        }
+      },
+      className: cx(
+        "aura-toast",
+        "aura-toast--" + t.tone,
+        t.loading && "is-loading",
+        /* Two actions, or one beside a description, go on their own row under the text so it keeps its width. */
+        (actions.length > 1 || actions.length && rich) && "has-action-row"
+      ),
       role: t.tone === "danger" ? "alert" : "status",
       "aria-busy": t.loading || void 0,
-      onMouseEnter: pause,
-      onMouseLeave: resume,
-      onFocus: pause,
-      onBlur: resume
+      onMouseEnter: function() {
+        hover.current = true;
+        pause();
+      },
+      onMouseLeave: function() {
+        hover.current = false;
+        resume();
+      },
+      onFocus: function() {
+        focused.current = true;
+        pause();
+      },
+      onBlur: function(e) {
+        if (node.current && e.relatedTarget && node.current.contains(e.relatedTarget)) return;
+        focused.current = false;
+        resume();
+      }
     },
     /* @__PURE__ */ React.createElement(
       Icon,
@@ -126,19 +183,33 @@ function ToastItem(props) {
         className: cx("aura-toast__icon", t.loading && "aura-spin")
       }
     ),
-    /* @__PURE__ */ React.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React.createElement("p", { className: "aura-toast__title" }, t.title), t.description ? /* @__PURE__ */ React.createElement("p", { className: "aura-toast__text" }, t.description) : null),
-    t.action ? /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        className: "aura-toast__action",
-        onClick: function() {
-          t.action.onClick && t.action.onClick();
-          toast.dismiss(t.id);
-        }
-      },
-      t.action.label
-    ) : null,
+    /* @__PURE__ */ React.createElement("div", { className: "aura-toast__body" }, /* @__PURE__ */ React.createElement("p", { className: "aura-toast__title" }, t.title), rich ? /* @__PURE__ */ React.createElement("div", { className: "aura-toast__text" }, t.description) : null),
+    actions.length ? /* @__PURE__ */ React.createElement("div", { className: "aura-toast__actions" }, actions.map(function(a, i) {
+      return a.href ? /* @__PURE__ */ React.createElement(
+        Link,
+        {
+          key: i,
+          href: a.href,
+          className: "aura-toast__action",
+          onClick: function(e) {
+            if (plainClick(e)) run(a);
+            else if (a.onClick) a.onClick();
+          }
+        },
+        a.label
+      ) : /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: i,
+          type: "button",
+          className: "aura-toast__action",
+          onClick: function() {
+            run(a);
+          }
+        },
+        a.label
+      );
+    })) : null,
     /* @__PURE__ */ React.createElement(
       IconButton,
       {
@@ -152,7 +223,22 @@ function ToastItem(props) {
     )
   );
 }
-function Toaster(props) {
+function hotkeyMatcher(spec) {
+  const parts = spec.split("+").map(function(p) {
+    return p.trim().toLowerCase();
+  });
+  const key = parts[parts.length - 1] || "";
+  const code = /^[a-z]$/.test(key) ? "Key" + key.toUpperCase() : /^[0-9]$/.test(key) ? "Digit" + key : null;
+  const want = function(m) {
+    return parts.indexOf(m) >= 0 && parts.indexOf(m) < parts.length - 1;
+  };
+  return function(e) {
+    if (e.altKey !== want("alt") || e.ctrlKey !== want("ctrl") || e.shiftKey !== want("shift") || e.metaKey !== (want("meta") || want("cmd")))
+      return false;
+    return code ? e.code === code : e.key.toLowerCase() === key;
+  };
+}
+function Toaster(props = {}) {
   const t = useStrings();
   const mounted = useMounted();
   const s = React.useState(toastState.list);
@@ -165,15 +251,49 @@ function Toaster(props) {
       });
     };
   }, []);
+  const region = React.useRef(null);
+  const hotkey = props.hotkey === void 0 ? "Alt+T" : props.hotkey;
+  React.useEffect(
+    function() {
+      if (!hotkey) return;
+      const match = hotkeyMatcher(hotkey);
+      function onKey(e) {
+        if (!e.key || e.repeat || e.isComposing || !match(e) || !region.current) return;
+        const el = e.target;
+        const editable = !!el && (el.isContentEditable || /^(INPUT|TEXTAREA)$/.test(el.tagName || ""));
+        const mac = /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent || "");
+        if (editable && mac && e.altKey && !e.ctrlKey && !e.metaKey && e.key.length === 1) return;
+        const items = region.current.querySelectorAll(".aura-toast");
+        const last = items[items.length - 1];
+        if (!last) return;
+        const target = last.querySelector(".aura-toast__action") || last.querySelector("button");
+        if (!target) return;
+        e.preventDefault();
+        const from = outsideToaster(document.activeElement);
+        if (from) hotkeyOrigin.set(last, from);
+        target.focus();
+      }
+      document.addEventListener("keydown", onKey);
+      return function() {
+        document.removeEventListener("keydown", onKey);
+      };
+    },
+    [hotkey]
+  );
   if (!mounted) return null;
+  const pos = props.position || "bottom";
+  const offset = props.offset;
   return createPortal(
     /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: cx("aura-toaster", props && props.position === "top" && "is-top"),
+        ref: region,
+        className: cx("aura-toaster", pos.indexOf("top") === 0 && "is-top", /center$/.test(pos) && "is-center"),
+        style: offset != null ? { "--aura-toaster-offset": typeof offset === "number" ? offset + "px" : offset } : void 0,
         role: "region",
         "aria-live": "polite",
-        "aria-label": t.notifications
+        "aria-label": hotkey ? t.notifications + " (" + hotkey + ")" : t.notifications,
+        "aria-keyshortcuts": hotkey || void 0
       },
       s[0].map(function(t2) {
         return /* @__PURE__ */ React.createElement(ToastItem, { key: t2.id, toast: t2 });

package/dist/index.d.cts

@@ -124,6 +124,11 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onSortChange?: ((sort: DataTableSort | null) => void) | undefined;
 	/** Adds a checkbox column. */
 	selectable?: boolean | undefined;
+	/** Which rows can be selected (5.6). A row it rejects shows no checkbox (the cell stays, so columns line up), is
+	 * skipped by select-all, Space and the count, and never appears in `onSelectionChange` — even if passed in. */
+	isRowSelectable?: RowCallback<boolean, Row> | undefined;
+	/** Accessible name for a rejected row's empty cell, e.g. `(r) => 'Not awaiting review'` (5.6). */
+	rowSelectDisabledLabel?: RowCallback<string, Row> | undefined;
 	/** Controlled selection (row keys); pair with onSelectionChange. */
 	selected?: Array<string | number> | undefined;
 	/** Initial selection when uncontrolled. */
@@ -487,14 +492,23 @@ export interface AlertProps {
 	onDismiss?: (() => void) | undefined;
 	className?: string | undefined;
 }
+/** A button (or, with `href`, a link through AuraProvider's `linkComponent`) on a toast (5.6: `href`, `dismiss`). */
+export interface ToastAction {
+	label: string;
+	onClick?: (() => void) | undefined;
+	/** Makes the action a link (routes through `linkComponent`, so `next/link` navigates client-side). */
+	href?: string | undefined;
+	/** Default true: the toast closes when the action runs. `false` keeps it (a list of items to work through). */
+	dismiss?: boolean | undefined;
+}
 export interface ToastOptions {
 	title: string;
-	description?: string | undefined;
+	/** Text, or (5.6) rich content — lines with their own links, read once inside the toast's live region. */
+	description?: React$1.ReactNode | undefined;
 	tone?: FeedbackTone | undefined;
-	action?: {
-		label: string;
-		onClick?: (() => void) | undefined;
-	} | undefined;
+	action?: ToastAction | undefined;
+	/** Up to two actions in a row (5.6); used instead of `action` when given. */
+	actions?: ToastAction[] | undefined;
 	/** ms before it closes itself. Default 5000; Infinity keeps it until dismissed. */
 	duration?: number | undefined;
 	/** Reuse an id to replace a toast in place (same position, timer restarts) — never a second toast. */
@@ -1285,10 +1299,18 @@ export declare namespace toast {
 	var dismiss: (id: string) => void;
 }
 export interface ToasterProps {
-	/** Default `bottom`. */
-	position?: "bottom" | "top" | undefined;
-}
-export declare function Toaster(props: ToasterProps): React$1.ReactElement | null;
+	/** Default `bottom` (bottom right). `top` is top right; `top-center` / `bottom-center` centre the stack (5.6).
+	 * Below 640px toasts span the width either way. */
+	position?: "bottom" | "bottom-right" | "bottom-center" | "top" | "top-right" | "top-center" | undefined;
+	/** Distance from the top or bottom edge (5.6), e.g. `64` to clear a 56px top bar; px or any CSS length. Sets
+	 * `--aura-toaster-offset`; the safe-area inset is added on top. Default 24px (16px below 640px). */
+	offset?: number | string | undefined;
+	/** Keyboard shortcut to the newest toast (5.6): focuses its action, else its close button, and pauses its timer;
+	 * Escape closes it and returns focus. Default `"Alt+T"` (matched on the physical key, so macOS Option+T works);
+	 * `false` turns it off. */
+	hotkey?: string | false | undefined;
+}
+export declare function Toaster(props?: ToasterProps): React$1.ReactElement | null;
 export declare const PasswordField: React$1.ForwardRefExoticComponent<PasswordFieldProps & React$1.RefAttributes<HTMLInputElement>>;
 export declare const FormErrorSummary: React$1.ForwardRefExoticComponent<FormErrorSummaryProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const FilterBar: React$1.ForwardRefExoticComponent<FilterBarProps & React$1.RefAttributes<HTMLDivElement>>;

package/dist/index.d.ts

@@ -124,6 +124,11 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	onSortChange?: ((sort: DataTableSort | null) => void) | undefined;
 	/** Adds a checkbox column. */
 	selectable?: boolean | undefined;
+	/** Which rows can be selected (5.6). A row it rejects shows no checkbox (the cell stays, so columns line up), is
+	 * skipped by select-all, Space and the count, and never appears in `onSelectionChange` — even if passed in. */
+	isRowSelectable?: RowCallback<boolean, Row> | undefined;
+	/** Accessible name for a rejected row's empty cell, e.g. `(r) => 'Not awaiting review'` (5.6). */
+	rowSelectDisabledLabel?: RowCallback<string, Row> | undefined;
 	/** Controlled selection (row keys); pair with onSelectionChange. */
 	selected?: Array<string | number> | undefined;
 	/** Initial selection when uncontrolled. */
@@ -487,14 +492,23 @@ export interface AlertProps {
 	onDismiss?: (() => void) | undefined;
 	className?: string | undefined;
 }
+/** A button (or, with `href`, a link through AuraProvider's `linkComponent`) on a toast (5.6: `href`, `dismiss`). */
+export interface ToastAction {
+	label: string;
+	onClick?: (() => void) | undefined;
+	/** Makes the action a link (routes through `linkComponent`, so `next/link` navigates client-side). */
+	href?: string | undefined;
+	/** Default true: the toast closes when the action runs. `false` keeps it (a list of items to work through). */
+	dismiss?: boolean | undefined;
+}
 export interface ToastOptions {
 	title: string;
-	description?: string | undefined;
+	/** Text, or (5.6) rich content — lines with their own links, read once inside the toast's live region. */
+	description?: React$1.ReactNode | undefined;
 	tone?: FeedbackTone | undefined;
-	action?: {
-		label: string;
-		onClick?: (() => void) | undefined;
-	} | undefined;
+	action?: ToastAction | undefined;
+	/** Up to two actions in a row (5.6); used instead of `action` when given. */
+	actions?: ToastAction[] | undefined;
 	/** ms before it closes itself. Default 5000; Infinity keeps it until dismissed. */
 	duration?: number | undefined;
 	/** Reuse an id to replace a toast in place (same position, timer restarts) — never a second toast. */
@@ -1285,10 +1299,18 @@ export declare namespace toast {
 	var dismiss: (id: string) => void;
 }
 export interface ToasterProps {
-	/** Default `bottom`. */
-	position?: "bottom" | "top" | undefined;
-}
-export declare function Toaster(props: ToasterProps): React$1.ReactElement | null;
+	/** Default `bottom` (bottom right). `top` is top right; `top-center` / `bottom-center` centre the stack (5.6).
+	 * Below 640px toasts span the width either way. */
+	position?: "bottom" | "bottom-right" | "bottom-center" | "top" | "top-right" | "top-center" | undefined;
+	/** Distance from the top or bottom edge (5.6), e.g. `64` to clear a 56px top bar; px or any CSS length. Sets
+	 * `--aura-toaster-offset`; the safe-area inset is added on top. Default 24px (16px below 640px). */
+	offset?: number | string | undefined;
+	/** Keyboard shortcut to the newest toast (5.6): focuses its action, else its close button, and pauses its timer;
+	 * Escape closes it and returns focus. Default `"Alt+T"` (matched on the physical key, so macOS Option+T works);
+	 * `false` turns it off. */
+	hotkey?: string | false | undefined;
+}
+export declare function Toaster(props?: ToasterProps): React$1.ReactElement | null;
 export declare const PasswordField: React$1.ForwardRefExoticComponent<PasswordFieldProps & React$1.RefAttributes<HTMLInputElement>>;
 export declare const FormErrorSummary: React$1.ForwardRefExoticComponent<FormErrorSummaryProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const FilterBar: React$1.ForwardRefExoticComponent<FilterBarProps & React$1.RefAttributes<HTMLDivElement>>;

package/dist/styles.css

@@ -496,7 +496,9 @@ a.aura-icon-btn { text-decoration: none; }
   display: flex; flex-direction: column; gap: var(--aura-space-2); width: min(380px, calc(100vw - 2 * var(--aura-space-4)));
   font-family: var(--font-sans);
 }
-.aura-toaster.is-top { bottom: auto; top: var(--aura-space-6); }
+.aura-toaster.is-top { bottom: auto; top: calc(var(--aura-toaster-offset, var(--aura-space-6)) + env(safe-area-inset-top, 0px)); }
+/* 5.6: top-center / bottom-center; `offset` (or --aura-toaster-offset) clears an app's top bar. */
+.aura-toaster.is-center { right: auto; left: 50%; transform: translateX(-50%); }
 .aura-toast {
   display: flex; align-items: flex-start; gap: var(--aura-space-3); padding: var(--aura-space-3) var(--aura-space-2) var(--aura-space-3) var(--aura-space-4);
   background: var(--aura-bg-surface); color: var(--aura-fg-primary);
@@ -511,10 +513,27 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-toast__body { flex: 1; min-width: 0; padding-top: 1px; }
 .aura-toast__title { margin: 0; font-size: 14px; font-weight: 500; line-height: 20px; }
 .aura-toast__text { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-secondary); }
+.aura-toast__text > * { margin: 0; }
+.aura-toast__text a { color: var(--aura-fg-accent); text-underline-offset: 2px; }
+.aura-toast__text a:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-radius: var(--aura-radius-xs); }
+.aura-toast__actions { flex: none; align-self: center; display: flex; gap: var(--aura-space-1); }
+/* Two actions, or one under a description (5.6): the actions take a row of their own below the text, lined up with it
+ * (the action's own padding sits left of the text column), so the text keeps the toast's width. */
+.aura-toast.has-action-row { flex-wrap: wrap; row-gap: var(--aura-space-1); }
+.aura-toast.has-action-row .aura-toast__body { flex-basis: 0; }
+.aura-toast.has-action-row .aura-toast__actions { order: 3; flex-basis: 100%; flex-wrap: wrap; margin-left: calc(16px + var(--aura-space-3) - var(--aura-space-2)); margin-bottom: calc(-1 * var(--aura-space-1)); }
 .aura-toast__action {
   flex: none; align-self: center; height: var(--aura-control-sm); padding: 0 var(--aura-space-2);
   border: 0; border-radius: var(--aura-radius-sm); background: transparent; color: var(--aura-fg-accent);
   font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
+  display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap;
+}
+/* Touch (5.6): the 32px action gets a 44px hit area, as IconButton does. Links in the text only get a little padding —
+ * lines sit 20px apart, so a 44px box would overlap the next line's link. */
+@media (pointer: coarse) {
+  .aura-toast__action { position: relative; }
+  .aura-toast__action::after { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, var(--aura-touch-target)); height: max(100%, var(--aura-touch-target)); transform: translate(-50%, -50%); }
+  .aura-toast__text a { padding-block: 2px; }
 }
 .aura-toast__action:hover { background: var(--aura-bg-surface-hover); }
 .aura-toast__action:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
@@ -1203,6 +1222,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-dialog__foot > * { width: 100%; }
   .aura-drawer:not(.aura-drawer--nav) { max-width: none; }
   .aura-toaster { left: var(--aura-space-4); right: var(--aura-space-4); bottom: var(--aura-space-4); width: auto; }
+  .aura-toaster.is-center { left: var(--aura-space-4); right: var(--aura-space-4); transform: none; }
+  .aura-toaster.is-top { top: calc(var(--aura-toaster-offset, var(--aura-space-4)) + env(safe-area-inset-top, 0px)); }
   .aura-card { padding: var(--aura-space-4); }
   .aura-stat { padding: var(--aura-space-4); }
   .aura-stat__value { font-size: 24px; }
@@ -1385,9 +1406,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @media (max-width: 767.98px) { :root:has(.aura-bottomnav--below-md) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
 @media (max-width: 1023.98px) { :root:has(.aura-bottomnav--below-lg) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
 @media (max-width: 1279.98px) { :root:has(.aura-bottomnav--below-xl) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
-/* Toasts clear a BottomNav wherever it shows (phones and tablets). */
-.aura-toaster:not(.is-top) { bottom: calc(var(--aura-space-6) + var(--aura-bottomnav-offset, 0px)); }
-@media (max-width: 639.98px) { .aura-toaster:not(.is-top) { bottom: calc(var(--aura-space-4) + var(--aura-bottomnav-offset, 0px)); } }
+/* Toasts clear a BottomNav wherever it shows (phones and tablets), else the bottom safe-area inset (5.6). */
+.aura-toaster:not(.is-top) { bottom: calc(var(--aura-toaster-offset, var(--aura-space-6)) + var(--aura-bottomnav-offset, env(safe-area-inset-bottom, 0px))); }
+@media (max-width: 639.98px) { .aura-toaster:not(.is-top) { bottom: calc(var(--aura-toaster-offset, var(--aura-space-4)) + var(--aura-bottomnav-offset, env(safe-area-inset-bottom, 0px))); } }
 
 /* ---------- 4.19: ActionBar ---------- */
 /* Sticky, not fixed: it keeps its place at the end of its parent, so it never covers the last field. */

package/dist/styles.layer.css

@@ -498,7 +498,9 @@ a.aura-icon-btn { text-decoration: none; }
   display: flex; flex-direction: column; gap: var(--aura-space-2); width: min(380px, calc(100vw - 2 * var(--aura-space-4)));
   font-family: var(--font-sans);
 }
-.aura-toaster.is-top { bottom: auto; top: var(--aura-space-6); }
+.aura-toaster.is-top { bottom: auto; top: calc(var(--aura-toaster-offset, var(--aura-space-6)) + env(safe-area-inset-top, 0px)); }
+/* 5.6: top-center / bottom-center; `offset` (or --aura-toaster-offset) clears an app's top bar. */
+.aura-toaster.is-center { right: auto; left: 50%; transform: translateX(-50%); }
 .aura-toast {
   display: flex; align-items: flex-start; gap: var(--aura-space-3); padding: var(--aura-space-3) var(--aura-space-2) var(--aura-space-3) var(--aura-space-4);
   background: var(--aura-bg-surface); color: var(--aura-fg-primary);
@@ -513,10 +515,27 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-toast__body { flex: 1; min-width: 0; padding-top: 1px; }
 .aura-toast__title { margin: 0; font-size: 14px; font-weight: 500; line-height: 20px; }
 .aura-toast__text { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-secondary); }
+.aura-toast__text > * { margin: 0; }
+.aura-toast__text a { color: var(--aura-fg-accent); text-underline-offset: 2px; }
+.aura-toast__text a:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-radius: var(--aura-radius-xs); }
+.aura-toast__actions { flex: none; align-self: center; display: flex; gap: var(--aura-space-1); }
+/* Two actions, or one under a description (5.6): the actions take a row of their own below the text, lined up with it
+ * (the action's own padding sits left of the text column), so the text keeps the toast's width. */
+.aura-toast.has-action-row { flex-wrap: wrap; row-gap: var(--aura-space-1); }
+.aura-toast.has-action-row .aura-toast__body { flex-basis: 0; }
+.aura-toast.has-action-row .aura-toast__actions { order: 3; flex-basis: 100%; flex-wrap: wrap; margin-left: calc(16px + var(--aura-space-3) - var(--aura-space-2)); margin-bottom: calc(-1 * var(--aura-space-1)); }
 .aura-toast__action {
   flex: none; align-self: center; height: var(--aura-control-sm); padding: 0 var(--aura-space-2);
   border: 0; border-radius: var(--aura-radius-sm); background: transparent; color: var(--aura-fg-accent);
   font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
+  display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap;
+}
+/* Touch (5.6): the 32px action gets a 44px hit area, as IconButton does. Links in the text only get a little padding —
+ * lines sit 20px apart, so a 44px box would overlap the next line's link. */
+@media (pointer: coarse) {
+  .aura-toast__action { position: relative; }
+  .aura-toast__action::after { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, var(--aura-touch-target)); height: max(100%, var(--aura-touch-target)); transform: translate(-50%, -50%); }
+  .aura-toast__text a { padding-block: 2px; }
 }
 .aura-toast__action:hover { background: var(--aura-bg-surface-hover); }
 .aura-toast__action:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
@@ -1205,6 +1224,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-dialog__foot > * { width: 100%; }
   .aura-drawer:not(.aura-drawer--nav) { max-width: none; }
   .aura-toaster { left: var(--aura-space-4); right: var(--aura-space-4); bottom: var(--aura-space-4); width: auto; }
+  .aura-toaster.is-center { left: var(--aura-space-4); right: var(--aura-space-4); transform: none; }
+  .aura-toaster.is-top { top: calc(var(--aura-toaster-offset, var(--aura-space-4)) + env(safe-area-inset-top, 0px)); }
   .aura-card { padding: var(--aura-space-4); }
   .aura-stat { padding: var(--aura-space-4); }
   .aura-stat__value { font-size: 24px; }
@@ -1387,9 +1408,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @media (max-width: 767.98px) { :root:has(.aura-bottomnav--below-md) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
 @media (max-width: 1023.98px) { :root:has(.aura-bottomnav--below-lg) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
 @media (max-width: 1279.98px) { :root:has(.aura-bottomnav--below-xl) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); } }
-/* Toasts clear a BottomNav wherever it shows (phones and tablets). */
-.aura-toaster:not(.is-top) { bottom: calc(var(--aura-space-6) + var(--aura-bottomnav-offset, 0px)); }
-@media (max-width: 639.98px) { .aura-toaster:not(.is-top) { bottom: calc(var(--aura-space-4) + var(--aura-bottomnav-offset, 0px)); } }
+/* Toasts clear a BottomNav wherever it shows (phones and tablets), else the bottom safe-area inset (5.6). */
+.aura-toaster:not(.is-top) { bottom: calc(var(--aura-toaster-offset, var(--aura-space-6)) + var(--aura-bottomnav-offset, env(safe-area-inset-bottom, 0px))); }
+@media (max-width: 639.98px) { .aura-toaster:not(.is-top) { bottom: calc(var(--aura-toaster-offset, var(--aura-space-4)) + var(--aura-bottomnav-offset, env(safe-area-inset-bottom, 0px))); } }
 
 /* ---------- 4.19: ActionBar ---------- */
 /* Sticky, not fixed: it keeps its place at the end of its parent, so it never covers the last field. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",