@jirawatpyk/aura-react 5.5.0 → 5.7.0

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. */
@@ -305,6 +310,9 @@ export interface MenuProps {
 	autoFocus?: boolean | undefined;
 	/** Router link for items with `href`; defaults to AuraProvider's `linkComponent`, then `<a>`. (4.19) */
 	linkComponent?: React$1.ElementType | undefined;
+	/** Content above the items (5.7), e.g. who is signed in. Not an item: arrow keys skip it; it is the menu's
+	 * accessible description, read once when the menu opens. */
+	header?: React$1.ReactNode | undefined;
 }
 export interface FieldProps {
 	/** Visible label; also the accessible name. */
@@ -487,14 +495,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. */
@@ -533,6 +550,9 @@ export interface DialogProps {
 	size?: "sm" | "md" | "lg" | undefined;
 	/** Default true. False hides the close button and ignores Escape and scrim clicks. */
 	dismissible?: boolean | undefined;
+	/** Whether a click on the scrim closes it (5.7). Default true, false for `role="alertdialog"`: a stray click
+	 * outside shouldn't throw away a typed reason. Escape and the close button still close it. */
+	dismissOnScrim?: boolean | undefined;
 	/** Use `alertdialog` for destructive confirmations. */
 	role?: "dialog" | "alertdialog" | undefined;
 	/** Default true. Turn off only for static demos. */
@@ -624,6 +644,7 @@ export interface SideNavProps {
 }
 export interface BreadcrumbProps {
 	/** Root first; the last item is the current page. */
+	/** An item with neither `href` nor `onClick` is plain text (5.7), for a segment with no page of its own. */
 	items: Array<{
 		label: string;
 		href?: string | undefined;
@@ -651,6 +672,9 @@ export interface DropdownMenuProps {
 	label?: string | undefined;
 	/** Router link for items with `href`. (4.19) */
 	linkComponent?: React$1.ElementType | undefined;
+	/** Content above the items (5.7), e.g. name, email and role in an account menu. Not an item: arrow keys skip
+	 * it; it is the menu's accessible description (`aria-describedby`). */
+	header?: React$1.ReactNode | undefined;
 }
 export interface ComboboxOption {
 	value: string;
@@ -851,6 +875,8 @@ export interface DrawerProps {
 	footer?: React$1.ReactNode | undefined;
 	/** Scrim click and Escape close it. Default true. */
 	dismissible?: boolean | undefined;
+	/** Whether a click on the scrim closes it (5.7). Default true; Escape and the close button still close it. */
+	dismissOnScrim?: boolean | undefined;
 	/** Default true: focus moves to the element with `data-autofocus`, else the first control in the body. False only for static demos. */
 	autoFocus?: boolean | undefined;
 	/** Needed when there is no title. */
@@ -891,7 +917,8 @@ export interface AppShellProps {
 	children?: React$1.ReactNode | undefined;
 	navLabel?: string | undefined;
 	menuLabel?: string | undefined;
-	/** id of `<main>`, for a skip link. Default `main`. */
+	/** id of `<main>`, for a skip link. Default `main`. `<main>` has `tabIndex={-1}` (5.7), so a skip link or
+	 * `document.getElementById(mainId).focus()` moves focus there (no ring is drawn on it). */
 	mainId?: string | undefined;
 	/** A BottomNav for phones (4.19). Shown below its `hideFrom` breakpoint; the content keeps room for it, and a
 	 * viewport ActionBar sits on top of it. With a `bottomNav` and no `nav`, there is no menu button. */
@@ -965,6 +992,9 @@ export interface BottomNavItem {
 	badge?: boolean | undefined;
 	/** Read after the label when `badge` is set, e.g. "new". */
 	badgeLabel?: string | undefined;
+	/** The full name for screen readers when `label` is shortened to fit (5.7), e.g. label "Konto", ariaLabel
+	 * "Mitt konto". Include the visible label in it (WCAG 2.5.3). The count or badge is still appended. */
+	ariaLabel?: string | undefined;
 }
 export interface BottomNavProps {
 	/** 2–5 items. */
@@ -1285,10 +1315,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

@@ -247,6 +247,12 @@ a.aura-menu__item { text-decoration: none; box-sizing: border-box; }
 }
 .aura-menu__radio.is-on { border-color: var(--aura-button-primary-bg); }
 .aura-menu__radio.is-on::after { content: ''; width: 8px; height: 8px; border-radius: var(--aura-radius-full); background: var(--aura-button-primary-bg); }
+/* 5.7: a header above the items (who is signed in), set off by a hairline like a separator. */
+.aura-menu__header { margin: calc(-1 * var(--aura-space-1)) calc(-1 * var(--aura-space-1)) var(--aura-space-1); padding: var(--aura-space-3); border-bottom: 1px solid var(--aura-border-default); color: var(--aura-fg-secondary); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
+.aura-menu__header > * { margin: 0; }
+/* Stays in view when a long menu scrolls. */
+.aura-menu.has-header .aura-menu__header { position: sticky; top: calc(-1 * var(--aura-space-1)); z-index: 1; background: var(--aura-bg-surface); }
+.aura-menu__header strong, .aura-menu__header b { color: var(--aura-fg-primary); font-weight: 500; font-size: 13px; }
 .aura-menu__sep { height: 1px; margin: var(--aura-space-1) calc(-1 * var(--aura-space-1)); background: var(--aura-border-default); }
 
 /* Footer + pager */
@@ -496,7 +502,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 +519,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; }
@@ -625,6 +650,8 @@ a.aura-tab { text-decoration: none; }
 .aura-nav__item.is-active { background: var(--aura-bg-selected); color: var(--aura-fg-primary); }
 .aura-nav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
 .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
+/* Touch (5.7): rows are 44px on coarse pointers (AppShell's phone drawer); desktop keeps 36px. */
+@media (pointer: coarse) { .aura-nav__item { height: auto; min-height: var(--aura-touch-target); } }
 .aura-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .aura-nav__count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--aura-fg-secondary); }
 .aura-nav__badge { display: inline-flex; align-items: center; flex: none; }
@@ -670,6 +697,8 @@ a.aura-tab { text-decoration: none; }
 .aura-crumbs a:hover, .aura-crumbs button:hover { color: var(--aura-fg-primary); text-decoration: underline; text-underline-offset: 3px; }
 .aura-crumbs a:focus-visible, .aura-crumbs button:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
 .aura-crumbs__current { color: var(--aura-fg-primary); font-weight: 500; }
+/* 5.7: a segment with no page of its own — the links' colour, not interactive. */
+.aura-crumbs__text { color: var(--aura-fg-secondary); }
 .aura-crumbs__sep { color: var(--aura-fg-tertiary); }
 
 /* ---------- Avatar ---------- */
@@ -865,6 +894,8 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-shell__bar-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--aura-space-3); }
 .aura-shell__content { flex: 1; min-width: 0; padding: var(--aura-space-6) var(--aura-space-4); }
+/* 5.7: <main> takes focus (tabIndex -1) for skip links and "the row you acted on is gone"; a landmark gets no ring. */
+.aura-shell__content:focus { outline: none; }
 @media (min-width: 640px) { .aura-shell__content { padding: var(--aura-space-6); } }
 @media (min-width: 1024px) { .aura-shell__content { padding: var(--aura-space-8); } }
 /* The shell already pads its content: a Container directly inside only caps the width. */
@@ -1203,6 +1234,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 +1418,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

@@ -249,6 +249,12 @@ a.aura-menu__item { text-decoration: none; box-sizing: border-box; }
 }
 .aura-menu__radio.is-on { border-color: var(--aura-button-primary-bg); }
 .aura-menu__radio.is-on::after { content: ''; width: 8px; height: 8px; border-radius: var(--aura-radius-full); background: var(--aura-button-primary-bg); }
+/* 5.7: a header above the items (who is signed in), set off by a hairline like a separator. */
+.aura-menu__header { margin: calc(-1 * var(--aura-space-1)) calc(-1 * var(--aura-space-1)) var(--aura-space-1); padding: var(--aura-space-3); border-bottom: 1px solid var(--aura-border-default); color: var(--aura-fg-secondary); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
+.aura-menu__header > * { margin: 0; }
+/* Stays in view when a long menu scrolls. */
+.aura-menu.has-header .aura-menu__header { position: sticky; top: calc(-1 * var(--aura-space-1)); z-index: 1; background: var(--aura-bg-surface); }
+.aura-menu__header strong, .aura-menu__header b { color: var(--aura-fg-primary); font-weight: 500; font-size: 13px; }
 .aura-menu__sep { height: 1px; margin: var(--aura-space-1) calc(-1 * var(--aura-space-1)); background: var(--aura-border-default); }
 
 /* Footer + pager */
@@ -498,7 +504,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 +521,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; }
@@ -627,6 +652,8 @@ a.aura-tab { text-decoration: none; }
 .aura-nav__item.is-active { background: var(--aura-bg-selected); color: var(--aura-fg-primary); }
 .aura-nav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
 .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
+/* Touch (5.7): rows are 44px on coarse pointers (AppShell's phone drawer); desktop keeps 36px. */
+@media (pointer: coarse) { .aura-nav__item { height: auto; min-height: var(--aura-touch-target); } }
 .aura-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .aura-nav__count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--aura-fg-secondary); }
 .aura-nav__badge { display: inline-flex; align-items: center; flex: none; }
@@ -672,6 +699,8 @@ a.aura-tab { text-decoration: none; }
 .aura-crumbs a:hover, .aura-crumbs button:hover { color: var(--aura-fg-primary); text-decoration: underline; text-underline-offset: 3px; }
 .aura-crumbs a:focus-visible, .aura-crumbs button:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
 .aura-crumbs__current { color: var(--aura-fg-primary); font-weight: 500; }
+/* 5.7: a segment with no page of its own — the links' colour, not interactive. */
+.aura-crumbs__text { color: var(--aura-fg-secondary); }
 .aura-crumbs__sep { color: var(--aura-fg-tertiary); }
 
 /* ---------- Avatar ---------- */
@@ -867,6 +896,8 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-shell__bar-content { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--aura-space-3); }
 .aura-shell__content { flex: 1; min-width: 0; padding: var(--aura-space-6) var(--aura-space-4); }
+/* 5.7: <main> takes focus (tabIndex -1) for skip links and "the row you acted on is gone"; a landmark gets no ring. */
+.aura-shell__content:focus { outline: none; }
 @media (min-width: 640px) { .aura-shell__content { padding: var(--aura-space-6); } }
 @media (min-width: 1024px) { .aura-shell__content { padding: var(--aura-space-8); } }
 /* The shell already pads its content: a Container directly inside only caps the width. */
@@ -1205,6 +1236,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 +1420,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.7.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",