@jirawatpyk/aura-react 4.18.0 → 4.19.0

package/dist/index.d.ts

@@ -117,6 +117,11 @@ export interface DataTableProps {
 	onSelectionChange?: ((keys: Array<string | number>) => void) | undefined;
 	/** Shown when rows is empty. */
 	empty?: DataTableEmpty | undefined;
+	/** A totals row under the body (4.19): content per column key, e.g. `{ id: 'Total', vat: '7,000.00', total: '107,000.00' }`.
+	 * Cells share the body's widths and alignment, so right-aligned money lines up. Stacked cards get a Totals card. */
+	footer?: Record<string, React$1.ReactNode> | undefined;
+	/** Keep the totals row visible while a `height` table scrolls. (4.19) */
+	stickyFooter?: boolean | undefined;
 	/** Rows per page; omit for no pagination. */
 	pageSize?: number | undefined;
 	/** Controlled page (1-based); pair with onPageChange. */
@@ -201,6 +206,8 @@ export interface AuraProviderProps {
 	calendar?: "buddhist" | "gregory" | undefined;
 	/** Override individual strings. */
 	strings?: Partial<Record<string, string | ((...args: any[]) => string)>> | undefined;
+	/** IANA time zone for "today" in DatePicker, DateRangePicker and Calendar, e.g. `Asia/Bangkok` (4.19). Default: the browser's. */
+	timeZone?: string | undefined;
 	/** `compact`: 36px fields and buttons, 40px table rows — dense admin screens. Touch screens keep 44px. Default: comfortable (or an ancestor's `data-density`). */
 	density?: "comfortable" | "compact" | undefined;
 	/** Your router's link (e.g. `Link` from `next/link`), used by every AURA component that renders a link: Button with `href`, SideNav, Breadcrumb, Stat, Pagination, DataTable row links. It gets `href`, `className`, `aria-current`, the children and the ref. A component's own `linkComponent` wins. */
@@ -256,6 +263,16 @@ export interface MenuItem {
 	/** A divider instead of an item. */
 	separator?: boolean | undefined;
 	onSelect?: (() => void) | undefined;
+	/** A link item (4.19): rendered through your router's link (`linkComponent`), e.g. a download or "Open in new tab". */
+	href?: string | undefined;
+	/** Link target, e.g. `_blank`, with `href`. */
+	target?: string | undefined;
+	/** `danger` for destructive items (Void, Delete): danger colour, put them last after a separator. (4.19) */
+	tone?: "danger" | undefined;
+	/** `radio` makes a single-choice item (menuitemradio); `checked` marks the chosen one. (4.19) */
+	type?: "radio" | undefined;
+	/** Radio items with the same `group` form one labelled group (the name is read out). (4.19) */
+	group?: string | undefined;
 }
 /** Popover list anchored to an element, rendered in a portal. */
 export interface MenuProps {
@@ -268,6 +285,8 @@ export interface MenuProps {
 	onClose: (restoreFocus: boolean) => void;
 	/** Focus the first item on open. Default true; turn off only for static demos. */
 	autoFocus?: boolean | undefined;
+	/** Router link for items with `href`; defaults to AuraProvider's `linkComponent`, then `<a>`. (4.19) */
+	linkComponent?: React$1.ElementType | undefined;
 }
 export interface FieldProps {
 	/** Visible label; also the accessible name. */
@@ -516,14 +535,20 @@ export interface TabItem {
 	count?: number | undefined;
 	disabled?: boolean | undefined;
 	content?: React$1.ReactNode | undefined;
+	/** A route (4.19). When every tab has one, Tabs renders a `nav` of links (section tabs that are pages), with
+	 * `aria-current="page"` on the current one and no panels. */
+	href?: string | undefined;
 }
 export interface TabsProps {
 	tabs: TabItem[];
-	/** Accessible name for the tab list. */
+	/** Accessible name for the tab list (or the nav, for link tabs). */
 	label: string;
+	/** The current tab's id. For link tabs, the current route's tab. */
 	value?: string | undefined;
 	defaultValue?: string | undefined;
 	onChange?: ((id: string) => void) | undefined;
+	/** Router link for tabs with `href`; defaults to AuraProvider's `linkComponent`, then `<a>`. (4.19) */
+	linkComponent?: React$1.ElementType | undefined;
 	className?: string | undefined;
 }
 export interface NavItem {
@@ -592,6 +617,8 @@ export interface DropdownMenuProps {
 	items: MenuItem[];
 	/** Accessible name for the menu. */
 	label?: string | undefined;
+	/** Router link for items with `href`. (4.19) */
+	linkComponent?: React$1.ElementType | undefined;
 }
 export interface ComboboxOption {
 	value: string;
@@ -726,11 +753,17 @@ export interface CalendarProps extends DateDisplayOptions {
 	end?: ISODate | null | undefined;
 	focus?: ISODate | null | undefined;
 	range?: boolean | undefined;
-	min?: ISODate | undefined;
-	max?: ISODate | undefined;
+	/** Earliest / latest day; `'today'` means today in `timeZone` (4.19). */
+	min?: ISODate | "today" | undefined;
+	max?: ISODate | "today" | undefined;
 	isDateDisabled?: ((iso: ISODate) => boolean) | undefined;
 	/** 0 = Sunday (Thai default), 1 = Monday. */
 	weekStartsOn?: 0 | 1 | undefined;
+	/** IANA time zone that decides which day is "today" (the marker, `min`/`max="today"`, the Today button), e.g.
+	 * `Asia/Bangkok`. Default: the provider's `timeZone`, else the browser's. (4.19) */
+	timeZone?: string | undefined;
+	/** Today, given outright (ISO). Wins over `timeZone`; handy in tests and server-rendered pages. (4.19) */
+	today?: ISODate | undefined;
 	onSelect?: ((iso: ISODate | null) => void) | undefined;
 	/** Adds a Clear link to the footer. */
 	onClear?: (() => void) | undefined;
@@ -746,10 +779,16 @@ export interface DateFieldProps extends FieldProps, DateDisplayOptions {
 	disabled?: boolean | undefined;
 	/** Clear button while there is a value. Default true. */
 	clearable?: boolean | undefined;
-	min?: ISODate | undefined;
-	max?: ISODate | undefined;
+	/** Earliest / latest day; `'today'` means today in `timeZone` (4.19). */
+	min?: ISODate | "today" | undefined;
+	max?: ISODate | "today" | undefined;
 	isDateDisabled?: ((iso: ISODate) => boolean) | undefined;
 	weekStartsOn?: 0 | 1 | undefined;
+	/** IANA time zone that decides which day is "today" (the marker, `min`/`max="today"`, the Today button), e.g.
+	 * `Asia/Bangkok`. Default: the provider's `timeZone`, else the browser's. (4.19) */
+	timeZone?: string | undefined;
+	/** Today, given outright (ISO). Wins over `timeZone`; handy in tests and server-rendered pages. (4.19) */
+	today?: ISODate | undefined;
 	className?: string | undefined;
 }
 export interface DatePickerProps extends DateFieldProps {
@@ -822,6 +861,56 @@ export interface AppShellProps {
 	menuLabel?: string | undefined;
 	/** id of `<main>`, for a skip link. Default `main`. */
 	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. */
+	bottomNav?: React$1.ReactElement | undefined;
+	className?: string | undefined;
+}
+export interface ActionBarProps {
+	/** Buttons, right-aligned (the primary one last). */
+	children?: React$1.ReactNode | undefined;
+	/** A short line such as "Total 107,000.00 THB · due Oct 22, 2026" or "Unsaved changes". It sits in a polite live
+	 * region that is always in the page, so a change is announced. */
+	status?: React$1.ReactNode | undefined;
+	/** `viewport` (default): sticks to the bottom of the screen, padded for the home indicator, above a BottomNav.
+	 * `container`: sticks to the bottom of the scrolling card or panel it's in. Both stay in the flow at the end of their
+	 * parent, so they never cover the last field. Make it the last child of the form or card it belongs to: like any
+	 * `position: sticky` element it sticks only while that parent is on screen. */
+	position?: "viewport" | "container" | undefined;
+	/** Bulk actions: the number of selected rows. Shows "N selected" in the status; at 0 the bar hides (its live region
+	 * stays, so the next selection is announced) and its actions leave the tab order. */
+	selected?: number | undefined;
+	/** Adds a "Clear" button next to the count. */
+	onClearSelection?: (() => void) | undefined;
+	/** Name of the region. Default "Actions". */
+	label?: string | undefined;
+	className?: string | undefined;
+}
+export interface BottomNavItem {
+	id: string;
+	/** Short: five items share 320px. */
+	label: string;
+	icon: IconInput;
+	href?: string | undefined;
+	/** A number on the icon (99+ above 99); 0 hides it. Part of the item's accessible name. */
+	count?: number | undefined;
+	/** A dot on the icon, e.g. "new". Give it words with `badgeLabel`. */
+	badge?: boolean | undefined;
+	/** Read after the label when `badge` is set, e.g. "new". */
+	badgeLabel?: string | undefined;
+}
+export interface BottomNavProps {
+	/** 2–5 items. */
+	items: BottomNavItem[];
+	value?: string | undefined;
+	defaultValue?: string | undefined;
+	onChange?: ((id: string) => void) | undefined;
+	/** Default "Main". */
+	label?: string | undefined;
+	/** Router link for items with `href`; defaults to the AuraProvider's `linkComponent`, then `<a>`. */
+	linkComponent?: React$1.ElementType | undefined;
+	/** Hidden from this breakpoint up, in CSS (so the server's HTML is right). Default `lg` (1024px); `false` never hides. */
+	hideFrom?: "md" | "lg" | "xl" | false | undefined;
 	className?: string | undefined;
 }
 export interface StatChange {
@@ -1105,6 +1194,8 @@ export type FormatDateOptions = DateDisplayOptions & {
 export declare function formatDate(iso: ISODate | null | undefined, opts?: FormatDateOptions): string;
 /** Parse typed text: dd/mm/yyyy (Buddhist years ≥ 2400 are converted), d-m-yyyy, d.m.yyyy, yyyy-mm-dd or '18 ก.ย. 2569' / '18 Sep 2026'. */
 export declare function parseDate(text: string | null | undefined): ISODate | null;
+/** Today as an ISO date in an IANA time zone (e.g. `Asia/Bangkok`), or in the runtime's own zone without one. (4.19) */
+export declare function todayIn(timeZone?: string | null): ISODate;
 /** formatDate bound to the nearest AuraProvider: its locale and calendar (English, Gregorian without one).
  * Options you pass still win. Use it in components; plain formatDate() stays for code outside React. */
 export declare function useFormatDate(): (iso: ISODate | null | undefined, opts?: FormatDateOptions) => string;
@@ -1163,6 +1254,13 @@ export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps
  * Which one shows is decided in CSS (4.16), so the server's HTML is already right on a phone and nothing shifts on
  * hydration; JavaScript only opens and closes the drawer. */
 export declare const AppShell: React$1.ForwardRefExoticComponent<AppShellProps & React$1.RefAttributes<HTMLDivElement>>;
+/** ActionBar — a bar stuck to the bottom of the screen or of a card: a status line and the form's or selection's
+ * actions. It is `position: sticky`, so it stays in the flow at the end of its parent and never covers the last field. */
+export declare const ActionBar: React$1.ForwardRefExoticComponent<ActionBarProps & React$1.RefAttributes<HTMLDivElement>>;
+/** BottomNav — a phone tab bar: icon over a short label, a count or dot, the current page marked. Fixed to the bottom,
+ * padded for the home indicator, with a spacer of the same height in the flow so nothing sits under it. Which
+ * breakpoints show it is decided in CSS, so the server's HTML is already right and nothing shifts on hydration. */
+export declare const BottomNav: React$1.ForwardRefExoticComponent<BottomNavProps & React$1.RefAttributes<HTMLElement>>;
 /** Min-width breakpoints in px, mirroring the aura-bp-* tokens. */
 export declare const breakpoints: {
 	sm: 640;
@@ -1227,6 +1325,7 @@ export interface AuraStrings {
 	prevPage: string;
 	nextPage: string;
 	rowCount: (c: number) => string;
+	totals: string;
 	actions: string;
 	optional: string;
 	timePlaceholder: string;
@@ -1267,6 +1366,8 @@ export interface AuraLocaleValue {
 	linkComponent?: React$1.ElementType | null | undefined;
 	/** The density set on the nearest AuraProvider that sets one (null: none, i.e. comfortable unless an ancestor's data-density says otherwise). */
 	density?: "comfortable" | "compact" | null | undefined;
+	/** The time zone set on the nearest AuraProvider that sets one (4.19). */
+	timeZone?: string | null | undefined;
 }
 /** Sets the language of built-in labels (and the default date locale) for everything inside. */
 export declare function AuraProvider(props: AuraProviderProps): React$1.ReactElement;

package/dist/server/index.cjs

@@ -32,7 +32,8 @@ __export(server_exports, {
   parseDate: () => parseDate,
   parseTime: () => parseTime,
   statusTone: () => toneFor,
-  toISO: () => toISO
+  toISO: () => toISO,
+  todayIn: () => todayIn
 });
 module.exports = __toCommonJS(server_exports);
 
@@ -112,6 +113,16 @@ function parseDate(text) {
   const dt = new Date(y, mo - 1, d);
   return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
 }
+function todayIn(timeZone) {
+  const now = /* @__PURE__ */ new Date();
+  if (!timeZone) return toISO(now);
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).format(now);
+}
 
 // src/text.ts
 function formatBytes(n2) {
@@ -230,6 +241,7 @@ var STRINGS = {
     },
     prevPage: "Previous page",
     nextPage: "Next page",
+    totals: "Totals",
     rowCount: function(c) {
       return n(c) + " rows";
     },
@@ -343,6 +355,7 @@ var STRINGS = {
     },
     prevPage: "\u0E2B\u0E19\u0E49\u0E32\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
     nextPage: "\u0E2B\u0E19\u0E49\u0E32\u0E16\u0E31\u0E14\u0E44\u0E1B",
+    totals: "\u0E23\u0E27\u0E21",
     rowCount: function(c) {
       return n(c) + " \u0E41\u0E16\u0E27";
     },
@@ -456,6 +469,7 @@ var STRINGS = {
     },
     prevPage: "F\xF6reg\xE5ende sida",
     nextPage: "N\xE4sta sida",
+    totals: "Summa",
     rowCount: function(c) {
       return nsv(c) + " rader";
     },

package/dist/server/index.d.ts

@@ -44,6 +44,8 @@ export declare function toISO(d: Date | null | undefined): ISODate | null;
 export declare function fromISO(s: ISODate | null | undefined): Date | null;
 /** Parse typed text: dd/mm/yyyy (Buddhist years ≥ 2400 are converted), d-m-yyyy, d.m.yyyy, yyyy-mm-dd or '18 ก.ย. 2569' / '18 Sep 2026'. */
 export declare function parseDate(text: string | null | undefined): ISODate | null;
+/** Today as an ISO date in an IANA time zone (e.g. `Asia/Bangkok`), or in the runtime's own zone without one. (4.19) */
+export declare function todayIn(timeZone?: string | null): ISODate;
 /** 1536 → "1.5 KB". */
 export declare function formatBytes(n: number | null | undefined): string;
 /** Parse typed time: 9 · 09 · 930 · 0930 · 9:30 · 9.30 · 09.30 น. · 9:30 pm → "HH:mm" (24-hour) or null. */
@@ -102,6 +104,7 @@ export interface AuraStrings {
 	prevPage: string;
 	nextPage: string;
 	rowCount: (c: number) => string;
+	totals: string;
 	actions: string;
 	optional: string;
 	timePlaceholder: string;

package/dist/server/index.js

@@ -74,6 +74,16 @@ function parseDate(text) {
   const dt = new Date(y, mo - 1, d);
   return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
 }
+function todayIn(timeZone) {
+  const now = /* @__PURE__ */ new Date();
+  if (!timeZone) return toISO(now);
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone,
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).format(now);
+}
 
 // src/text.ts
 function formatBytes(n2) {
@@ -192,6 +202,7 @@ var STRINGS = {
     },
     prevPage: "Previous page",
     nextPage: "Next page",
+    totals: "Totals",
     rowCount: function(c) {
       return n(c) + " rows";
     },
@@ -305,6 +316,7 @@ var STRINGS = {
     },
     prevPage: "\u0E2B\u0E19\u0E49\u0E32\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
     nextPage: "\u0E2B\u0E19\u0E49\u0E32\u0E16\u0E31\u0E14\u0E44\u0E1B",
+    totals: "\u0E23\u0E27\u0E21",
     rowCount: function(c) {
       return n(c) + " \u0E41\u0E16\u0E27";
     },
@@ -418,6 +430,7 @@ var STRINGS = {
     },
     prevPage: "F\xF6reg\xE5ende sida",
     nextPage: "N\xE4sta sida",
+    totals: "Summa",
     rowCount: function(c) {
       return nsv(c) + " rader";
     },
@@ -764,5 +777,6 @@ export {
   parseDate,
   parseTime,
   toneFor as statusTone,
-  toISO
+  toISO,
+  todayIn
 };

package/dist/styles.css

@@ -234,6 +234,16 @@ a.aura-btn { text-decoration: none; }
 }
 .aura-menu__check.is-on { background: var(--aura-button-primary-bg); border-color: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
 .aura-menu__check.is-on .aura-icon { color: inherit; }
+.aura-menu__item--danger, .aura-menu__item--danger .aura-icon { color: var(--aura-fg-danger); }
+.aura-menu__item--danger:hover, .aura-menu__item--danger:focus { background: var(--aura-alert-danger-bg); color: var(--aura-alert-danger-fg); }
+.aura-menu__item--danger:hover .aura-icon, .aura-menu__item--danger:focus .aura-icon { color: var(--aura-alert-danger-fg); }
+a.aura-menu__item { text-decoration: none; box-sizing: border-box; }
+.aura-menu__radio {
+  flex: none; box-sizing: border-box; width: 16px; height: 16px; border-radius: var(--aura-radius-full);
+  border: 1px solid var(--aura-border-control); display: inline-flex; align-items: center; justify-content: center;
+}
+.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); }
 .aura-menu__sep { height: 1px; margin: var(--aura-space-1) calc(-1 * var(--aura-space-1)); background: var(--aura-border-default); }
 
 /* Footer + pager */
@@ -564,7 +574,8 @@ a.aura-icon-btn { text-decoration: none; }
 }
 .aura-tab:hover { color: var(--aura-fg-primary); }
 .aura-tab.is-active { color: var(--aura-fg-primary); border-bottom-color: var(--aura-fg-primary); }
-.aura-tab:disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
+.aura-tab:disabled, .aura-tab.is-disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
+a.aura-tab { text-decoration: none; }
 .aura-tab:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -4px; border-radius: var(--aura-radius-xs); }
 .aura-tab__count {
   min-width: 18px; padding: 0 6px; box-sizing: border-box; border-radius: var(--aura-radius-full);
@@ -856,6 +867,13 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-table__card-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aura-space-2) var(--aura-space-4); margin: 0; }
 .aura-table__card-fields dt { font-family: var(--font-mono); font-size: 11px; color: var(--aura-fg-secondary); }
 .aura-table__card-fields dd { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.aura-table__card-fields dd.is-end { text-align: right; font-variant-numeric: tabular-nums; }
+.aura-table__card--total { background: var(--aura-bg-canvas); font-weight: 600; }
+/* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
+.aura-table__total { background: var(--aura-bg-canvas); border-top: 1px solid var(--aura-border-strong); font-weight: 600; }
+.aura-table__total.is-sticky { position: sticky; bottom: 0; z-index: 3; }
+.aura-table__total .aura-table__td.is-end { font-variant-numeric: tabular-nums; }
+.aura-tooltip--above { transform: translateY(-100%); max-width: min(var(--aura-tooltip-max), 90vw); white-space: normal; }
 .aura-table--stacked .aura-table__foot { border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); margin-top: var(--aura-space-2); }
 .aura-table--stacked .aura-table__empty { background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); }
 
@@ -1349,3 +1367,67 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @container (max-width: 959.98px) { .aura-table-dual[data-stack-below='960'] > .aura-table:not(.aura-table--stacked) { display: none; } }
 @container (min-width: 1024px) { .aura-table-dual[data-stack-below='1024'] > .aura-table--stacked { display: none; } }
 @container (max-width: 1023.98px) { .aura-table-dual[data-stack-below='1024'] > .aura-table:not(.aura-table--stacked) { display: none; } }
+
+/* ---------- 4.19: BottomNav ---------- */
+/* Fixed to the bottom and padded for the home indicator; the spacer before it holds the same height in the flow.
+ * Shown below its breakpoint in CSS, so the server's HTML is right before hydration. */
+.aura-bottomnav-spacer { height: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); flex: none; }
+.aura-bottomnav {
+  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--aura-z-bar); box-sizing: border-box;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  background: var(--aura-bg-surface); border-top: 1px solid var(--aura-border-default); font-family: var(--font-sans);
+}
+.aura-bottomnav__list { display: flex; margin: 0; padding: 0; list-style: none; }
+.aura-bottomnav__cell { flex: 1 1 0; min-width: 0; }
+.aura-bottomnav__item {
+  box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
+  width: 100%; height: var(--aura-bottomnav-height); padding: 0 2px; border: 0; background: transparent;
+  color: var(--aura-fg-secondary); font: inherit; font-size: 11px; font-weight: 500; line-height: 14px;
+  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
+}
+.aura-bottomnav__item:hover { color: var(--aura-fg-primary); }
+.aura-bottomnav__item.is-active { color: var(--aura-fg-primary); font-weight: 600; }
+.aura-bottomnav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
+.aura-bottomnav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; border-radius: var(--aura-radius-sm); }
+.aura-bottomnav__icon {
+  position: relative; display: inline-flex; align-items: center; justify-content: center;
+  width: 48px; height: 28px; border-radius: var(--aura-radius-full);
+}
+.aura-bottomnav__item.is-active .aura-bottomnav__icon { background: var(--aura-bg-selected); }
+.aura-bottomnav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.aura-bottomnav__count {
+  position: absolute; top: -2px; left: calc(50% + 4px); min-width: 16px; height: 16px; box-sizing: border-box; padding: 0 4px;
+  border-radius: var(--aura-radius-full); background: var(--aura-bg-inverted); color: var(--aura-fg-inverted);
+  font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums;
+  box-shadow: 0 0 0 2px var(--aura-bg-surface);
+}
+.aura-bottomnav__dot {
+  position: absolute; top: 2px; left: calc(50% + 6px); width: 8px; height: 8px; border-radius: var(--aura-radius-full);
+  background: var(--aura-fg-accent); box-shadow: 0 0 0 2px var(--aura-bg-surface);
+}
+@media (min-width: 768px) { .aura-bottomnav.aura-bottomnav--below-md, .aura-bottomnav-spacer.aura-bottomnav--below-md { display: none; } }
+@media (min-width: 1024px) { .aura-bottomnav.aura-bottomnav--below-lg, .aura-bottomnav-spacer.aura-bottomnav--below-lg { display: none; } }
+@media (min-width: 1280px) { .aura-bottomnav.aura-bottomnav--below-xl, .aura-bottomnav-spacer.aura-bottomnav--below-xl { display: none; } }
+/* While a BottomNav shows, viewport ActionBars and phone toasts sit on top of it. */
+:root:has(.aura-bottomnav--always) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); }
+@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)); } }
+@media (max-width: 639.98px) { .aura-toaster:not(.is-top) { bottom: calc(var(--aura-space-4) + var(--aura-bottomnav-offset, 0px)); } }
+
+/* ---------- 4.19: ActionBar ---------- */
+/* Sticky, not fixed: it keeps its place at the end of its parent, so it never covers the last field. */
+.aura-actionbar { position: sticky; z-index: var(--aura-z-bar); box-sizing: border-box; background: var(--aura-bg-surface); color: var(--aura-fg-primary); font-family: var(--font-sans); }
+.aura-actionbar--viewport {
+  bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)));
+  margin-top: var(--aura-space-6);
+  border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay);
+}
+.aura-actionbar--container { bottom: 0; border-top: 1px solid var(--aura-border-default); }
+.aura-actionbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); min-height: 60px; box-sizing: border-box; padding: var(--aura-space-2) var(--aura-space-3) var(--aura-space-2) var(--aura-space-4); }
+.aura-actionbar__status { flex: 1 1 8rem; min-width: 0; font-size: 14px; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; }
+.aura-actionbar__status:empty { flex-basis: 0; }
+.aura-actionbar__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin-left: auto; }
+/* Bulk bar with nothing selected: out of sight and out of the tab order, its live region still in the page. */
+.aura-actionbar.is-idle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; box-shadow: none; }
+.aura-actionbar--container > .aura-actionbar__inner { padding-left: 0; padding-right: 0; }

package/dist/styles.layer.css

@@ -236,6 +236,16 @@ a.aura-btn { text-decoration: none; }
 }
 .aura-menu__check.is-on { background: var(--aura-button-primary-bg); border-color: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
 .aura-menu__check.is-on .aura-icon { color: inherit; }
+.aura-menu__item--danger, .aura-menu__item--danger .aura-icon { color: var(--aura-fg-danger); }
+.aura-menu__item--danger:hover, .aura-menu__item--danger:focus { background: var(--aura-alert-danger-bg); color: var(--aura-alert-danger-fg); }
+.aura-menu__item--danger:hover .aura-icon, .aura-menu__item--danger:focus .aura-icon { color: var(--aura-alert-danger-fg); }
+a.aura-menu__item { text-decoration: none; box-sizing: border-box; }
+.aura-menu__radio {
+  flex: none; box-sizing: border-box; width: 16px; height: 16px; border-radius: var(--aura-radius-full);
+  border: 1px solid var(--aura-border-control); display: inline-flex; align-items: center; justify-content: center;
+}
+.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); }
 .aura-menu__sep { height: 1px; margin: var(--aura-space-1) calc(-1 * var(--aura-space-1)); background: var(--aura-border-default); }
 
 /* Footer + pager */
@@ -566,7 +576,8 @@ a.aura-icon-btn { text-decoration: none; }
 }
 .aura-tab:hover { color: var(--aura-fg-primary); }
 .aura-tab.is-active { color: var(--aura-fg-primary); border-bottom-color: var(--aura-fg-primary); }
-.aura-tab:disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
+.aura-tab:disabled, .aura-tab.is-disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
+a.aura-tab { text-decoration: none; }
 .aura-tab:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -4px; border-radius: var(--aura-radius-xs); }
 .aura-tab__count {
   min-width: 18px; padding: 0 6px; box-sizing: border-box; border-radius: var(--aura-radius-full);
@@ -858,6 +869,13 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-table__card-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aura-space-2) var(--aura-space-4); margin: 0; }
 .aura-table__card-fields dt { font-family: var(--font-mono); font-size: 11px; color: var(--aura-fg-secondary); }
 .aura-table__card-fields dd { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.aura-table__card-fields dd.is-end { text-align: right; font-variant-numeric: tabular-nums; }
+.aura-table__card--total { background: var(--aura-bg-canvas); font-weight: 600; }
+/* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
+.aura-table__total { background: var(--aura-bg-canvas); border-top: 1px solid var(--aura-border-strong); font-weight: 600; }
+.aura-table__total.is-sticky { position: sticky; bottom: 0; z-index: 3; }
+.aura-table__total .aura-table__td.is-end { font-variant-numeric: tabular-nums; }
+.aura-tooltip--above { transform: translateY(-100%); max-width: min(var(--aura-tooltip-max), 90vw); white-space: normal; }
 .aura-table--stacked .aura-table__foot { border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); margin-top: var(--aura-space-2); }
 .aura-table--stacked .aura-table__empty { background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); }
 
@@ -1352,4 +1370,68 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @container (min-width: 1024px) { .aura-table-dual[data-stack-below='1024'] > .aura-table--stacked { display: none; } }
 @container (max-width: 1023.98px) { .aura-table-dual[data-stack-below='1024'] > .aura-table:not(.aura-table--stacked) { display: none; } }
 
+/* ---------- 4.19: BottomNav ---------- */
+/* Fixed to the bottom and padded for the home indicator; the spacer before it holds the same height in the flow.
+ * Shown below its breakpoint in CSS, so the server's HTML is right before hydration. */
+.aura-bottomnav-spacer { height: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); flex: none; }
+.aura-bottomnav {
+  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--aura-z-bar); box-sizing: border-box;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  background: var(--aura-bg-surface); border-top: 1px solid var(--aura-border-default); font-family: var(--font-sans);
+}
+.aura-bottomnav__list { display: flex; margin: 0; padding: 0; list-style: none; }
+.aura-bottomnav__cell { flex: 1 1 0; min-width: 0; }
+.aura-bottomnav__item {
+  box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
+  width: 100%; height: var(--aura-bottomnav-height); padding: 0 2px; border: 0; background: transparent;
+  color: var(--aura-fg-secondary); font: inherit; font-size: 11px; font-weight: 500; line-height: 14px;
+  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
+}
+.aura-bottomnav__item:hover { color: var(--aura-fg-primary); }
+.aura-bottomnav__item.is-active { color: var(--aura-fg-primary); font-weight: 600; }
+.aura-bottomnav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
+.aura-bottomnav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; border-radius: var(--aura-radius-sm); }
+.aura-bottomnav__icon {
+  position: relative; display: inline-flex; align-items: center; justify-content: center;
+  width: 48px; height: 28px; border-radius: var(--aura-radius-full);
+}
+.aura-bottomnav__item.is-active .aura-bottomnav__icon { background: var(--aura-bg-selected); }
+.aura-bottomnav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.aura-bottomnav__count {
+  position: absolute; top: -2px; left: calc(50% + 4px); min-width: 16px; height: 16px; box-sizing: border-box; padding: 0 4px;
+  border-radius: var(--aura-radius-full); background: var(--aura-bg-inverted); color: var(--aura-fg-inverted);
+  font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums;
+  box-shadow: 0 0 0 2px var(--aura-bg-surface);
+}
+.aura-bottomnav__dot {
+  position: absolute; top: 2px; left: calc(50% + 6px); width: 8px; height: 8px; border-radius: var(--aura-radius-full);
+  background: var(--aura-fg-accent); box-shadow: 0 0 0 2px var(--aura-bg-surface);
+}
+@media (min-width: 768px) { .aura-bottomnav.aura-bottomnav--below-md, .aura-bottomnav-spacer.aura-bottomnav--below-md { display: none; } }
+@media (min-width: 1024px) { .aura-bottomnav.aura-bottomnav--below-lg, .aura-bottomnav-spacer.aura-bottomnav--below-lg { display: none; } }
+@media (min-width: 1280px) { .aura-bottomnav.aura-bottomnav--below-xl, .aura-bottomnav-spacer.aura-bottomnav--below-xl { display: none; } }
+/* While a BottomNav shows, viewport ActionBars and phone toasts sit on top of it. */
+:root:has(.aura-bottomnav--always) { --aura-bottomnav-offset: calc(var(--aura-bottomnav-height) + env(safe-area-inset-bottom, 0px)); }
+@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)); } }
+@media (max-width: 639.98px) { .aura-toaster:not(.is-top) { bottom: calc(var(--aura-space-4) + var(--aura-bottomnav-offset, 0px)); } }
+
+/* ---------- 4.19: ActionBar ---------- */
+/* Sticky, not fixed: it keeps its place at the end of its parent, so it never covers the last field. */
+.aura-actionbar { position: sticky; z-index: var(--aura-z-bar); box-sizing: border-box; background: var(--aura-bg-surface); color: var(--aura-fg-primary); font-family: var(--font-sans); }
+.aura-actionbar--viewport {
+  bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px)));
+  margin-top: var(--aura-space-6);
+  border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay);
+}
+.aura-actionbar--container { bottom: 0; border-top: 1px solid var(--aura-border-default); }
+.aura-actionbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2) var(--aura-space-3); min-height: 60px; box-sizing: border-box; padding: var(--aura-space-2) var(--aura-space-3) var(--aura-space-2) var(--aura-space-4); }
+.aura-actionbar__status { flex: 1 1 8rem; min-width: 0; font-size: 14px; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; }
+.aura-actionbar__status:empty { flex-basis: 0; }
+.aura-actionbar__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin-left: auto; }
+/* Bulk bar with nothing selected: out of sight and out of the tab order, its live region still in the page. */
+.aura-actionbar.is-idle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; box-shadow: none; }
+.aura-actionbar--container > .aura-actionbar__inner { padding-left: 0; padding-right: 0; }
+
 }

package/package.json

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