@jirawatpyk/aura-react 4.9.0 → 4.10.0

package/dist/esm/locale.js

@@ -3,6 +3,9 @@ import * as React from "react";
 const n = function(x) {
   return Number(x).toLocaleString("en");
 };
+const nsv = function(x) {
+  return Number(x).toLocaleString("sv-SE");
+};
 const STRINGS = {
   en: {
     close: "Close",
@@ -199,6 +202,104 @@ const STRINGS = {
     accepts: function(list, max) {
       return [list, max && "\u0E44\u0E21\u0E48\u0E40\u0E01\u0E34\u0E19 " + max + " \u0E15\u0E48\u0E2D\u0E44\u0E1F\u0E25\u0E4C"].filter(Boolean).join(" \xB7 ");
     }
+  },
+  sv: {
+    close: "St\xE4ng",
+    dismiss: "St\xE4ng",
+    dismissToast: "St\xE4ng aviseringen",
+    notifications: "Aviseringar",
+    mainNav: "Huvudmeny",
+    breadcrumb: "Br\xF6dsmulor",
+    navigation: "Navigering",
+    openNav: "\xD6ppna menyn",
+    searching: "S\xF6ker\u2026",
+    noMatches: "Inga tr\xE4ffar",
+    clear: function(what) {
+      return "Rensa " + (what || "urvalet");
+    },
+    keepTyping: function(total) {
+      return "Skriv mer f\xF6r att begr\xE4nsa " + nsv(total) + " alternativ";
+    },
+    sortAsc: "Sortera stigande",
+    sortDesc: "Sortera fallande",
+    pin: "F\xE4st till v\xE4nster",
+    unpin: "Lossa kolumnen",
+    moveLeft: "Flytta v\xE4nster",
+    moveRight: "Flytta h\xF6ger",
+    hideColumn: "D\xF6lj kolumnen",
+    resetColumns: "\xC5terst\xE4ll kolumner",
+    selectRows: "V\xE4lj rader",
+    selectAllRows: "V\xE4lj alla rader",
+    deselectAllRows: "Avmarkera alla rader",
+    selectAll: "V\xE4lj alla",
+    selectRow: function(k) {
+      return "V\xE4lj " + k;
+    },
+    selectedCount: function(c) {
+      return nsv(c) + " valda";
+    },
+    pinned: "F\xE4st",
+    columnOptions: function(label) {
+      return "Alternativ f\xF6r kolumnen " + label;
+    },
+    column: function(label) {
+      return label ? "Kolumnen " + label : "Kolumn";
+    },
+    columns: "Kolumner",
+    showHideColumns: "Visa eller d\xF6lj kolumner",
+    empty: "Inget h\xE4r \xE4nnu",
+    loading: "Laddar\u2026",
+    loadingRows: "Laddar rader",
+    range: function(a, b, total) {
+      return a + "\u2013" + b + " av " + nsv(total);
+    },
+    page: function(p, total) {
+      return "Sida " + p + " av " + total;
+    },
+    prevPage: "F\xF6reg\xE5ende sida",
+    nextPage: "N\xE4sta sida",
+    rowCount: function(c) {
+      return nsv(c) + " rader";
+    },
+    actions: "\xC5tg\xE4rder",
+    optional: "valfritt",
+    timePlaceholder: "tt:mm",
+    timeInvalid: "Skriv en tid som 09:30",
+    timeOutOfRange: function(a, b) {
+      return "V\xE4lj en tid mellan " + a + " och " + b;
+    },
+    dropFiles: "Dra filer hit eller",
+    browse: "V\xE4lj filer",
+    browseOne: "V\xE4lj en fil",
+    remove: function(n2) {
+      return "Ta bort " + n2;
+    },
+    fileTooBig: function(max) {
+      return "St\xF6rre \xE4n " + max;
+    },
+    fileWrongType: "Den h\xE4r filtypen godtas inte",
+    tooManyFiles: function(n2) {
+      return "H\xF6gst " + n2 + " filer";
+    },
+    colorScheme: "F\xE4rgl\xE4ge",
+    increase: "\xD6ka",
+    decrease: "Minska",
+    stepDone: "klart",
+    stepOf: function(i, total) {
+      return "Steg " + i + " av " + total;
+    },
+    schemeLight: "Ljust",
+    schemeDark: "M\xF6rkt",
+    schemeSystem: "System",
+    uploading: "Laddar upp\u2026",
+    images: "Bilder",
+    pagination: "Sidnumrering",
+    pageN: function(p) {
+      return "Sida " + p;
+    },
+    accepts: function(list, max) {
+      return [list, max && "h\xF6gst " + max + " per fil"].filter(Boolean).join(", ");
+    }
   }
 };
 const LocaleContext = React.createContext(null);
@@ -209,16 +310,21 @@ function AuraProvider(props) {
       return {
         locale: props.locale || "en",
         calendar: props.calendar || null,
-        strings: props.strings ? Object.assign({}, base, props.strings) : base
+        strings: props.strings ? Object.assign({}, base, props.strings) : base,
+        linkComponent: props.linkComponent || null
       };
     },
-    [props.locale, props.calendar, props.strings]
+    [props.locale, props.calendar, props.strings, props.linkComponent]
   );
   return /* @__PURE__ */ React.createElement(LocaleContext.Provider, { value }, props.children);
 }
 function useAuraLocale() {
   return React.useContext(LocaleContext) || { locale: null, calendar: null, strings: STRINGS.en };
 }
+function useLinkComponent(own) {
+  const ctx = React.useContext(LocaleContext);
+  return own || ctx && ctx.linkComponent || "a";
+}
 function useStrings() {
   return useAuraLocale().strings;
 }
@@ -226,5 +332,6 @@ export {
   AuraProvider,
   STRINGS,
   useAuraLocale,
+  useLinkComponent,
   useStrings
 };

package/dist/esm/theme.js

@@ -105,6 +105,20 @@ function fit(hex, grounds, target, dir) {
   }
   return c;
 }
+function atLuminance(hex, Y) {
+  const o = rgbToOklch(hexToRgb(hex)), C = Math.max(o[1], 0.02);
+  let lo = 0, hi = 1, c = hex;
+  for (let i = 0; i < 30; i++) {
+    const mid = (lo + hi) / 2;
+    c = oklchToHex(mid, C, o[2]);
+    if (luminance(c) < Y) lo = mid;
+    else hi = mid;
+  }
+  return c;
+}
+const CHART_Y = { light: 0.075, dark: 0.46 };
+const SEQ_Y = { light: [0.26, 0.165, 0.1, 0.055, 0.028], dark: [0.14, 0.22, 0.34, 0.5, 0.7] };
+const CHART_2 = "#0a8b7a";
 const ZINC = { 0: "#ffffff", 50: "#fafafa", 100: "#f4f4f5", 800: "#27272a", 900: "#18181b", 950: "#09090b" };
 const INK = "#18181b";
 function createTheme(opts) {
@@ -123,6 +137,14 @@ function createTheme(opts) {
   L["alert-info-fg"] = fit(b[800], [b[50]], 4.5, -1);
   L["alert-info-border"] = b[200];
   L["mesh-from"] = b[400];
+  L["chart-1"] = atLuminance(o.brand, CHART_Y.light);
+  D["chart-1"] = atLuminance(o.brand, CHART_Y.dark);
+  SEQ_Y.light.forEach(function(y, i) {
+    L["chart-seq-" + (i + 1)] = atLuminance(o.brand, y);
+  });
+  SEQ_Y.dark.forEach(function(y, i) {
+    D["chart-seq-" + (i + 1)] = atLuminance(o.brand, y);
+  });
   D["fg-accent"] = fit(b[300], darkGrounds, 4.5, 1);
   D["accent-violet"] = fit(b[400], darkGrounds, 3, 1);
   D["focus-ring"] = fit(b[400], darkGrounds, 3, 1);
@@ -182,6 +204,19 @@ function createTheme(opts) {
     check("dark", "fg-accent", g[0], 4.5, D["fg-accent"], g[1]);
     check("dark", "focus-ring", g[0], 3, D["focus-ring"], g[1]);
   });
+  [
+    ["light", ZINC[0], L],
+    ["light", ZINC[50], L],
+    ["dark", ZINC[900], D],
+    ["dark", ZINC[950], D]
+  ].forEach(function(g) {
+    const t = g[0], ground = g[1], m = g[2], name = ground === ZINC[0] || ground === ZINC[900] ? "bg-surface" : "bg-canvas";
+    ["chart-1", "chart-seq-1", "chart-seq-5"].forEach(function(k) {
+      check(t, k, name, 3, m[k], ground);
+    });
+  });
+  check("light", "chart-1", "chart-2 (lightness step)", 1.8, L["chart-1"], CHART_2);
+  check("dark", "chart-1", "chart-2 (lightness step)", 1.8, D["chart-1"], CHART_2);
   check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
   check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
   check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);

package/dist/index.d.ts

@@ -1,15 +1,17 @@
 import * as React$1 from 'react';
 
+/** Button look. */
+export type ButtonVariant = "primary" | "secondary" | "creative" | "danger" | "danger-secondary";
 /** AURA pill button. Enterprise (`primary`, `secondary`) for product UI; `creative` for marketing moments only. */
 export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
-	/** Visual variant. Default `primary`. */
-	variant?: "primary" | "secondary" | "creative";
+	/** Visual variant. Default `primary`. `danger` (filled) and `danger-secondary` (outline) are for irreversible or destructive actions only — typically the confirm button of a `Dialog role="alertdialog"`. */
+	variant?: ButtonVariant;
 	/** Label text — short, Title Case English or Thai. */
 	children: React$1.ReactNode;
 	/** Leading icon name (see `IconName`). Hidden while loading. */
-	icon?: IconName;
+	icon?: IconInput;
 	/** Trailing icon name, e.g. `arrow-right` for forward actions. */
-	iconRight?: IconName;
+	iconRight?: IconInput;
 	/** Shows a spinner in place of the leading icon, sets aria-busy and swallows clicks. Keeps the label and width. */
 	loading?: boolean;
 }
@@ -17,13 +19,13 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
 	/** Where the link goes. With `href`, Button renders an `<a>` and its ref is the `<a>`. */
 	href: string;
-	/** Visual variant. Default `primary`. */
-	variant?: "primary" | "secondary" | "creative";
+	/** Visual variant. Default `primary`. `danger` (filled) and `danger-secondary` (outline) are for irreversible or destructive actions only — typically the confirm button of a `Dialog role="alertdialog"`. */
+	variant?: ButtonVariant;
 	/** Label text — say where it goes ("View Orders"), not "Click here". */
 	children: React$1.ReactNode;
-	icon?: IconName;
+	icon?: IconInput;
 	/** Trailing icon, e.g. `arrow-right`, or `external-link` with `target="_blank"`. */
-	iconRight?: IconName;
+	iconRight?: IconInput;
 	/** Looks unavailable and can't be followed: no href, `aria-disabled`, out of the Tab order. */
 	disabled?: boolean;
 	/** A router's link to render instead of `<a>`, e.g. `Link` from `next/link` (client-side navigation). It gets `href`, `className`, the children and the ref. */
@@ -61,6 +63,8 @@ export interface DataTableColumn {
 	hideBelow?: number | "sm" | "md" | "lg" | "xl";
 	/** Row actions (a DropdownMenu or IconButton). In stacked cards it sits top-right instead of in the field list. Give it an empty label. */
 	actions?: boolean;
+	/** `end` right-aligns header and cells (amounts, counts) and uses tabular figures. Default `start`. */
+	align?: "start" | "end";
 }
 export interface DataTableSort {
 	key: string;
@@ -68,7 +72,7 @@ export interface DataTableSort {
 }
 export interface DataTableEmpty {
 	/** Default `inbox`; use `search` for "no matches". */
-	icon?: IconName;
+	icon?: IconInput;
 	/** Default "Nothing here yet". */
 	title?: string;
 	description?: string;
@@ -108,8 +112,20 @@ export interface DataTableProps {
 	/** Adds drag/keyboard resize handles to every column that has a width. */
 	resizable?: boolean;
 	onColumnResize?: (key: string, width: number) => void;
-	/** Shows skeleton rows and disables sorting, select-all and paging. */
+	/** Shows skeleton rows and disables sorting, select-all and paging. With `manual` and rows already shown, the rows stay (dimmed, with a progress bar) while the next page loads. */
 	loading?: boolean;
+	/** Server mode: `rows` is already the current page, sorted by the server. The table doesn't sort or slice; it reports
+	 * sort and page through onSortChange / onPageChange (or getPageHref links). Pair with `totalRows` and `pageSize`. */
+	manual?: boolean;
+	/** manual: rows across all pages (drives the page count, "1–25 of 312" and aria-rowcount). */
+	totalRows?: number;
+	/** Makes each row a link: the first column's content renders as the provider's linkComponent (or `<a>`), and a click
+	 * or Enter anywhere on the row follows it. Ctrl/⌘-click opens a new tab as usual. */
+	getRowHref?: (row: Record<string, any>) => string;
+	/** Pager arrows become links to these URLs (search-param paging). Without onPageChange the link navigates. */
+	getPageHref?: (page: number) => string;
+	/** Router link for getRowHref / getPageHref. Default: AuraProvider's linkComponent, else `<a>`. */
+	linkComponent?: React$1.ElementType;
 	/** Skeleton row count when there is no pageSize. Default 5. */
 	skeletonRows?: number;
 	/** Called on row click or Enter. */
@@ -133,10 +149,13 @@ export interface DataTableProps {
 	stackBelow?: number;
 	className?: string;
 }
+/** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */
+export type IconInput = IconName | React$1.ReactElement;
 export type IconName = "check" | "x" | "plus" | "minus" | "search" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-right" | "arrow-up-right" | "arrow-up-down" | "loader-circle" | "circle-alert" | "circle-check" | "info" | "triangle-alert" | "settings" | "user" | "users" | "filter" | "ellipsis" | "external-link" | "copy" | "trash-2" | "pencil" | "download" | "upload" | "calendar" | "bell" | "menu" | "eye" | "log-out" | "circle" | "circle-dot-dashed" | "ban" | "arrow-up" | "arrow-down" | "inbox" | "pin" | "pin-off" | "eye-off" | "columns-3" | "arrow-left" | "rotate-ccw" | "house" | "layout-dashboard" | "folder" | "chart-column" | "file-text" | "mail" | "lock" | "clock" | "trending-up" | "trending-down" | "image" | "paperclip" | "cloud-upload" | "file" | "sun" | "moon" | "monitor";
 /** Lucide stroke icon drawn inline in currentColor. */
 export interface IconProps {
-	name: IconName;
+	/** A name from the set, or an icon element of your own (sized and styled the same way). */
+	name: IconInput;
 	/** `sm` 16 (default) · `md` 20 · `lg` 24, or a px number. */
 	size?: "sm" | "md" | "lg" | number;
 	/** Accessible name. Omit for decorative icons next to a text label (then aria-hidden). */
@@ -155,12 +174,14 @@ export interface SurfaceProps extends React$1.HTMLAttributes<HTMLElement> {
 }
 /** Sets the language of built-in labels (pagination, close buttons, empty states…) and the default date display for everything inside. */
 export interface AuraProviderProps {
-	/** Default `en` strings when there is no provider (dates still default to Thai / พ.ศ.). */
-	locale?: "th" | "en";
-	/** Default calendar for DatePicker / DateRangePicker / Calendar / formatDate callers that read it. */
+	/** Built-in labels and date display. `sv` = Swedish labels, `sv-SE` dates, Monday weeks and the Gregorian calendar. Default `en` strings when there is no provider (dates still default to Thai / พ.ศ.). */
+	locale?: "th" | "en" | "sv";
+	/** Default calendar for DatePicker / DateRangePicker / Calendar / formatDate callers that read it. Unset: `buddhist` for `th` and `en` (unchanged), `gregory` for `sv`. */
 	calendar?: "buddhist" | "gregory";
 	/** Override individual strings. */
 	strings?: Partial<Record<string, string | ((...args: any[]) => string)>>;
+	/** 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. */
+	linkComponent?: React$1.ElementType;
 	children?: React$1.ReactNode;
 }
 export type StatusTone = "neutral" | "progress" | "ready" | "blocked";
@@ -191,7 +212,9 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 }
 /** 32px round button holding one icon. */
 export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
-	icon: IconName;
+	icon: IconInput;
+	/** `danger` colours the icon and hover for a destructive action (Delete, Revoke). */
+	tone?: "neutral" | "danger";
 	/** Accessible name and tooltip (required). */
 	label: string;
 	/** Icon size. Default `sm` (16). */
@@ -199,7 +222,7 @@ export interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButton
 }
 export interface MenuItem {
 	label?: string;
-	icon?: IconName;
+	icon?: IconInput;
 	/** Present = a checkable item (menuitemcheckbox). */
 	checked?: boolean;
 	disabled?: boolean;
@@ -237,7 +260,7 @@ export interface FieldProps {
 }
 export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "required"> {
 	/** Leading icon inside the field. */
-	icon?: IconName;
+	icon?: IconInput;
 	/** Trailing unit, e.g. "THB". */
 	suffix?: React$1.ReactNode;
 }
@@ -252,7 +275,7 @@ export interface SelectProps extends FieldProps, Omit<React$1.SelectHTMLAttribut
 	options: SelectOption[];
 	/** A disabled first option shown in fg-tertiary until something is chosen. */
 	placeholder?: string;
-	icon?: IconName;
+	icon?: IconInput;
 }
 export type ChoiceOption = string | {
 	value: string;
@@ -364,7 +387,7 @@ export interface CardProps {
 export interface TabItem {
 	id: string;
 	label: string;
-	icon?: IconName;
+	icon?: IconInput;
 	count?: number;
 	disabled?: boolean;
 	content?: React$1.ReactNode;
@@ -381,9 +404,15 @@ export interface TabsProps {
 export interface NavItem {
 	id: string;
 	label: string;
-	icon?: IconName;
+	icon?: IconInput;
 	count?: number;
+	/** Anything beside the label, e.g. a status dot or a `Badge`. */
+	badge?: React$1.ReactNode;
 	href?: string;
+	/** Makes this item a collapsible group of links. The group header is a button, never a link. */
+	children?: NavItem[];
+	/** Start open. A group also opens by itself when one of its items is the current one. */
+	defaultOpen?: boolean;
 }
 export interface SideNavProps {
 	sections?: Array<{
@@ -398,6 +427,8 @@ export interface SideNavProps {
 	footer?: React$1.ReactNode;
 	/** Default "Main". */
 	label?: string;
+	/** Router link for items with `href`; defaults to the AuraProvider's `linkComponent`, then `<a>`. */
+	linkComponent?: React$1.ElementType;
 	className?: string;
 }
 export interface BreadcrumbProps {
@@ -435,7 +466,7 @@ export interface ComboboxOption {
 	keywords?: string[];
 	disabled?: boolean;
 	/** Leading icon in the list. */
-	icon?: IconName;
+	icon?: IconInput;
 }
 /** Combobox with `multiple`: pick any number; the picks show as removable chips in the field. */
 export interface ComboboxMultipleProps extends Omit<ComboboxProps, "value" | "defaultValue" | "onChange" | "clearable"> {
@@ -461,7 +492,7 @@ export interface ComboboxProps extends FieldProps {
 	disabled?: boolean;
 	readOnly?: boolean;
 	/** Leading icon. Default `search`. */
-	icon?: IconName;
+	icon?: IconInput;
 	/** Clear button while a value is selected (Escape clears too). Default true. */
 	clearable?: boolean;
 	/** Server-side search: called with the typed text; the component stops filtering and shows `options` as given. */
@@ -525,7 +556,7 @@ export interface StepperProps {
 export interface SegmentedOption {
 	value: string;
 	label: string;
-	icon?: IconName;
+	icon?: IconInput;
 	/** Show only the icon; `label` becomes its accessible name and tooltip. */
 	iconOnly?: boolean;
 	disabled?: boolean;
@@ -549,9 +580,9 @@ export interface SegmentedControlProps {
 /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
 export type ISODate = string;
 export interface DateDisplayOptions {
-	/** `th` (default) or `en`. */
-	locale?: "th" | "en";
-	/** `buddhist` (default, พ.ศ.) or `gregory` (ค.ศ.). */
+	/** `th` (default), `en` or `sv`. */
+	locale?: "th" | "en" | "sv";
+	/** `buddhist` (พ.ศ.; default for th and en) or `gregory` (ค.ศ.; default for sv). */
 	calendar?: "buddhist" | "gregory";
 }
 export interface CalendarProps extends DateDisplayOptions {
@@ -673,7 +704,7 @@ export interface StatProps {
 	unit?: React$1.ReactNode;
 	change?: StatChange;
 	caption?: React$1.ReactNode;
-	icon?: IconName;
+	icon?: IconInput;
 	/** Skeleton in place of the value. */
 	loading?: boolean;
 	/** Makes the whole card a link or a button (drill-down). */
@@ -740,11 +771,11 @@ export interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 	tone?: Tone;
 	/** soft (default) · solid · outline */
 	variant?: "soft" | "solid" | "outline";
-	icon?: IconName;
+	icon?: IconInput;
 }
 export interface TagProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onClick"> {
 	children: React$1.ReactNode;
-	icon?: IconName;
+	icon?: IconInput;
 	/** Adds a remove button (applied filters, chosen people). */
 	onRemove?: () => void;
 	removeLabel?: string;
@@ -781,7 +812,7 @@ export interface SkeletonProps {
 export interface EmptyStateProps {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode;
-	icon?: IconName;
+	icon?: IconInput;
 	/** One or two buttons. */
 	action?: React$1.ReactNode;
 	size?: "sm" | "md";
@@ -807,7 +838,7 @@ export interface AccordionItem {
 	title: React$1.ReactNode;
 	description?: React$1.ReactNode;
 	content: React$1.ReactNode;
-	icon?: IconName;
+	icon?: IconInput;
 	disabled?: boolean;
 }
 export interface AccordionProps {
@@ -956,6 +987,7 @@ export declare const Drawer: React$1.ForwardRefExoticComponent<DrawerProps & Rea
 export declare const DataTable: React$1.ForwardRefExoticComponent<DataTableProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLElement>>;
 export declare const Tabs: React$1.ForwardRefExoticComponent<TabsProps & React$1.RefAttributes<HTMLDivElement>>;
+/** Side navigation: sections of links or buttons, collapsible groups, counts and badges. Arrow keys move between items. */
 export declare const SideNav: React$1.ForwardRefExoticComponent<SideNavProps & React$1.RefAttributes<HTMLElement>>;
 export declare const Breadcrumb: React$1.ForwardRefExoticComponent<BreadcrumbProps & React$1.RefAttributes<HTMLElement>>;
 export declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLSpanElement>>;
@@ -1058,12 +1090,15 @@ export interface AuraStrings {
 export declare const STRINGS: {
 	en: AuraStrings;
 	th: AuraStrings;
+	sv: AuraStrings;
 };
 /** What useAuraLocale returns. `locale` and `calendar` are null outside an AuraProvider. */
 export interface AuraLocaleValue {
-	locale: "th" | "en" | null;
+	locale: "th" | "en" | "sv" | null;
 	calendar: "buddhist" | "gregory" | null;
 	strings: AuraStrings;
+	/** The router link set on AuraProvider, if any. */
+	linkComponent?: React$1.ElementType | null;
 }
 /** Sets the language of built-in labels (and the default date locale) for everything inside. */
 export declare function AuraProvider(props: AuraProviderProps): React$1.ReactElement;
@@ -1101,7 +1136,10 @@ export interface ColorSchemeOptions {
 /** The script ColorSchemeScript renders, as a string — for frameworks that want it in a raw <head> template. */
 export declare function colorSchemeScript(options?: ColorSchemeOptions): string;
 /** Put in <head>: applies the saved colour scheme before the page paints. Server-rendering safe. */
-export declare function ColorSchemeScript(props: ColorSchemeOptions): React$1.ReactElement;
+export declare function ColorSchemeScript(props: ColorSchemeOptions & {
+	/** Nonce for a nonce-based Content-Security-Policy (script-src 'nonce-…'). */
+	nonce?: string;
+}): React$1.ReactElement;
 /** Current colour scheme and a setter. `resolved` is what is on screen (system resolved to light or dark). */
 export interface ColorSchemeState {
 	scheme: ColorScheme;

package/dist/styles.css

@@ -43,6 +43,11 @@ a.aura-btn { text-decoration: none; }
 
 .aura-btn--secondary { border: 1px solid var(--aura-button-secondary-border); color: var(--aura-fg-primary); }
 .aura-btn--secondary:hover { background: var(--aura-bg-surface-hover); }
+/* Destructive: filled for the confirm step, outline beside other actions. Loading keeps the colour (busy, not unavailable). */
+.aura-btn--danger { background: var(--aura-button-danger-bg); color: var(--aura-button-danger-fg); }
+.aura-btn--danger:hover { background: var(--aura-button-danger-bg-hover); }
+.aura-btn--danger-secondary { border: 1px solid var(--aura-border-danger); color: var(--aura-fg-danger); background: transparent; }
+.aura-btn--danger-secondary:hover { background: var(--aura-alert-danger-bg); }
 
 .aura-btn--creative {
   border: 2px solid var(--aura-button-creative-border);
@@ -82,6 +87,28 @@ a.aura-btn { text-decoration: none; }
 .aura-table__row--skeleton:hover { background: var(--aura-bg-surface); }
 .aura-table__row--skeleton .aura-table__td { display: flex; align-items: center; }
 .aura-table__row.is-selected { background: var(--aura-bg-selected); }
+/* Right-aligned (numeric) columns */
+.aura-table__th.is-end { padding-right: var(--aura-space-4); }
+.aura-table__th.is-end .aura-table__th-inner { justify-content: flex-end; }
+.aura-table__th.is-end .aura-table__sort { flex-direction: row-reverse; }
+.aura-table__td.is-end { text-align: end; font-variant-numeric: tabular-nums; }
+.aura-table__row--skeleton .aura-table__td.is-end { justify-content: flex-end; }
+/* Row links (getRowHref): the first cell's text is the link; the whole row is the click target */
+.aura-table__row-link { color: inherit; text-decoration: none; }
+.aura-table__row-link:hover, .aura-table__row:hover .aura-table__row-link, .aura-table__card:hover .aura-table__row-link { text-decoration: underline; text-underline-offset: 2px; }
+.aura-table__row-link:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-xs); }
+/* Server mode refresh: the previous page stays, inactive, under a progress bar until the next one arrives */
+.aura-table.is-refreshing .aura-table__row, .aura-table.is-refreshing .aura-table__card { opacity: 0.6; pointer-events: none; }
+.aura-table__busy-bar {
+  position: absolute; z-index: 6; top: calc(var(--aura-space-12) - 2px); left: 0; right: 0; height: 2px; overflow: hidden;
+  border-radius: var(--aura-radius-full); pointer-events: none;
+}
+.aura-table--stacked .aura-table__busy-bar { top: 0; }
+.aura-table__busy-bar::after {
+  content: ''; position: absolute; top: 0; bottom: 0; width: 35%; background: var(--aura-fg-accent);
+  animation: aura-progress-slide var(--aura-duration-pulse) var(--aura-ease) infinite;
+}
+@media (prefers-reduced-motion: reduce) { .aura-table__busy-bar::after { animation-duration: calc(var(--aura-duration-pulse) * 3); } }
 
 /* Cells: text cells stay block so long values end in an ellipsis */
 .aura-table__td {
@@ -212,11 +239,13 @@ a.aura-btn { text-decoration: none; }
   cursor: pointer; transition: background var(--aura-duration-fast) var(--aura-ease);
 }
 .aura-icon-btn:hover { background: var(--aura-bg-surface-hover); }
+.aura-icon-btn--danger { color: var(--aura-fg-danger); }
+.aura-icon-btn--danger:hover { background: var(--aura-alert-danger-bg); }
 .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
 .aura-icon-btn:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 
 /* Skeleton */
-@keyframes aura-pulse { 50% { opacity: 0.45; } }
+@keyframes aura-pulse { 50% { opacity: 0.6; } }
 .aura-skel {
   display: block; height: 10px; width: 60%; border-radius: var(--aura-radius-full);
   background: var(--aura-bg-skeleton); animation: aura-pulse var(--aura-duration-pulse) var(--aura-ease) infinite;
@@ -275,6 +304,9 @@ a.aura-btn { text-decoration: none; }
 
 /* Icon — Lucide, 24-grid, stroke in currentColor */
 .aura-icon { flex: none; display: inline-block; vertical-align: middle; }
+/* A consumer's own icon element (e.g. lucide-react) fills the same box, strokes in currentColor at width 2. */
+.aura-icon--custom { display: inline-flex; align-items: center; justify-content: center; color: inherit; line-height: 0; }
+.aura-icon--custom > svg { width: 100%; height: 100%; stroke-width: var(--aura-icon-stroke, 2); }
 
 /* Loading spinner */
 @keyframes aura-spin { to { transform: rotate(360deg); } }
@@ -543,6 +575,14 @@ a.aura-btn { text-decoration: none; }
 .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
 .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; }
+/* Groups: a disclosure button, its items indented one step per level. */
+.aura-nav__item { padding-left: calc(var(--aura-space-3) + var(--aura-nav-depth, 0) * (var(--aura-icon-sm) + var(--aura-space-3))); }
+.aura-nav__item--group.has-active { color: var(--aura-fg-primary); }
+.aura-nav__chevron { color: var(--aura-fg-secondary); transition: transform var(--aura-duration-fast) var(--aura-ease); }
+.aura-nav__chevron.is-open { transform: rotate(180deg); }
+.aura-nav__sub { margin-top: 2px; }
+.aura-nav__sub[hidden] { display: none; }
 .aura-nav__footer { padding: var(--aura-space-3); border-top: 1px solid var(--aura-border-default); }
 
 /* ---------- Breadcrumb ---------- */
@@ -775,7 +815,8 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-stat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--aura-space-2); }
 .aura-stat__label { font-size: 13px; font-weight: 500; color: var(--aura-fg-secondary); }
 .aura-stat__icon { display: inline-flex; color: var(--aura-fg-secondary); }
-.aura-stat__value { display: flex; align-items: baseline; gap: var(--aura-space-1); font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; min-height: 34px; }
+.aura-stat__value { display: flex; align-items: baseline; gap: var(--aura-space-1); font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; min-height: 34px; }
+.aura-stat__value.is-numeric { font-variant-numeric: tabular-nums; }
 .aura-stat__unit { font-size: 14px; font-weight: 500; color: var(--aura-fg-secondary); letter-spacing: 0; }
 .aura-stat__skel { width: 55%; height: 24px; align-self: center; }
 .aura-stat__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-1) var(--aura-space-2); font-size: 12px; }

package/package.json

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