@jirawatpyk/aura-react 5.0.1 → 5.1.1

package/dist/index.d.ts

@@ -177,7 +177,7 @@ export interface DataTableProps {
 }
 /** 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" | "panel-left-close" | "panel-left-open";
+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" | "panel-left-close" | "panel-left-open" | "server" | "globe" | "activity" | "shield-alert" | "phone" | "wrench";
 /** Lucide stroke icon drawn inline in currentColor. */
 export interface IconProps {
 	/** A name from the set, or an icon element of your own (sized and styled the same way). */
@@ -214,12 +214,13 @@ export interface AuraProviderProps {
 	linkComponent?: React$1.ElementType | undefined;
 	children?: React$1.ReactNode | undefined;
 }
-export type StatusTone = "neutral" | "progress" | "ready" | "blocked";
+/** `warning` (5.1): needs attention but still works — Warning, Problem, Degraded, At risk. */
+export type StatusTone = "neutral" | "progress" | "ready" | "warning" | "blocked";
 /** Status pill: tone fill + icon + the status word. Tone comes from the word unless given. */
 export interface StatusPillProps {
 	/** The status word shown, e.g. "In Progress". */
 	children: React$1.ReactNode;
-	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Blocked/Failed → blocked, anything else → neutral). */
+	/** Force a tone. Default: matched from the word (Ready/Done → ready, In Progress/In Review → progress, Warning/Problem/Degraded/At risk → warning (5.1), Blocked/Failed → blocked, anything else → neutral). */
 	tone?: StatusTone | undefined;
 	className?: string | undefined;
 }
@@ -229,9 +230,12 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 	checked?: boolean | undefined;
 	defaultChecked?: boolean | undefined;
 	indeterminate?: boolean | undefined;
-	/** Accessible name for a bare box (tables). Not needed when children give a visible label. */
+	/** Accessible name. In 5.x it is shown only when given as children; **6.0 shows `label` beside the box** like
+	 * Switch and TextField. Without children and without `hideLabel` it warns once in development. */
 	label?: string | undefined;
-	/** Visible label beside the box (form use). */
+	/** A bare box named by `label`, e.g. in a table row: keeps it hidden in 6.0 and silences the 5.1 notice. */
+	hideLabel?: boolean | undefined;
+	/** The visible label beside the box. */
 	children?: React$1.ReactNode | undefined;
 	/** Second line under the visible label (needs an id to be linked). */
 	description?: React$1.ReactNode | undefined;
@@ -590,6 +594,9 @@ export interface SideNavProps {
 	onCollapsedChange?: ((collapsed: boolean) => void) | undefined;
 	/** Adds a collapse / expand button at the bottom. AppShell hides it in its phone drawer. */
 	collapsible?: boolean | undefined;
+	/** The 1px right edge that divides the nav from the page. Default true; `false` when your layout draws its own
+	 * divider. (5.1) */
+	bordered?: boolean | undefined;
 	className?: string | undefined;
 }
 export interface BreadcrumbProps {
@@ -1447,7 +1454,7 @@ export interface ThemeStyleProps extends ThemeOptions {
 	/** Scope the theme to this selector instead of the whole page (multi-tenant). */
 	selector?: string | undefined;
 }
-export declare function ThemeStyle(props: ThemeStyleProps): React$1.ReactElement;
+export declare function ThemeStyle(props: ThemeStyleProps): React$1.ReactElement | null;
 /** `system` follows the operating system and changes with it. */
 export type ColorScheme = "light" | "dark" | "system";
 export interface ColorSchemeOptions {

package/dist/server/index.cjs

@@ -159,6 +159,7 @@ function parseTime(text) {
 var TONE_WORDS = {
   ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
   progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
+  warning: ["warning", "problem", "degraded", "at risk"],
   blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
 };
 function toneFor(status) {
@@ -766,6 +767,8 @@ function createTheme(opts) {
   }
   if (s) check("light", "ink", "accent-lime (signal)", 4.5, INK, s[200]);
   function css(selector) {
+    if (selector !== void 0 && /[<{};@\r\n]|\/\*|\*\//.test(selector))
+      throw new Error('createTheme: "' + selector + '" is not a plain CSS selector');
     const light = selector ? selector : ':root, [data-theme="light"]';
     const dark = selector ? selector + ".dark, .dark " + selector + ", " + selector + '[data-theme="dark"], [data-theme="dark"] ' + selector : '.dark, [data-theme="dark"]';
     const system = selector ? '[data-theme="system"] ' + selector + ", " + selector + '[data-theme="system"]' : '[data-theme="system"]';
@@ -774,7 +777,7 @@ function createTheme(opts) {
         return "  --aura-" + k + ": " + m[k] + ";";
       }).join("\n") + "\n}";
     }
-    return "/* AURA theme" + (o.name ? ' "' + o.name + '"' : "") + ": brand " + o.brand + (o.signal ? ", signal " + o.signal : "") + (o.primary === "brand" ? ", brand primary buttons" : "") + ". Load after aura.css. Generated by createTheme. */\n" + block(light, L) + "\n" + block(dark, D) + "\n@media (prefers-color-scheme: dark) {\n" + block(system, D) + "\n}\n";
+    return "/* AURA theme" + (o.name ? ' "' + String(o.name).replace(/[*/<>\\]/g, "") + '"' : "") + ": brand " + o.brand + (o.signal ? ", signal " + o.signal : "") + (o.primary === "brand" ? ", brand primary buttons" : "") + ". Load after aura.css. Generated by createTheme. */\n" + block(light, L) + "\n" + block(dark, D) + "\n@media (prefers-color-scheme: dark) {\n" + block(system, D) + "\n}\n";
   }
   return {
     name: o.name || null,
@@ -793,9 +796,9 @@ function createTheme(opts) {
 // src/colorSchemeScript.ts
 var DEFAULT_KEY = "aura-color-scheme";
 function colorSchemeScript(options) {
-  const key = JSON.stringify(options && options.storageKey || DEFAULT_KEY);
-  const fallback = JSON.stringify(options && options.defaultScheme || "system");
-  return "(function(){try{var s=localStorage.getItem(" + key + ");if(s!=='light'&&s!=='dark'&&s!=='system')s=" + fallback + `;var d=document.documentElement;d.setAttribute("data-theme",s);var dark=s==='dark'||(s==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);d.classList.toggle("dark",dark);}catch(e){}})();`;
+  const key = JSON.stringify(options && options.storageKey || DEFAULT_KEY).replace(/</g, "\\u003c");
+  const fallback = JSON.stringify(options && options.defaultScheme || "system").replace(/</g, "\\u003c");
+  return "(function(){try{var s=localStorage.getItem(" + key + ");if(s!=='light'&&s!=='dark'&&s!=='system')s=" + fallback + `;var d=document.documentElement;d.setAttribute("data-theme",s);var m=window.matchMedia('(prefers-color-scheme: dark)');d.classList.toggle('dark',s==='dark'||(s==='system'&&m.matches));if(m.addEventListener)m.addEventListener('change',function(e){if(d.getAttribute('data-theme')==='system')d.classList.toggle('dark',e.matches)});}catch(e){}})();`;
 }
 
 // src/breakpoints.ts

package/dist/server/index.d.cts

@@ -0,0 +1,176 @@
+import * as React$1 from 'react';
+
+/** `warning` (5.1): needs attention but still works — Warning, Problem, Degraded, At risk. */
+export type StatusTone = "neutral" | "progress" | "ready" | "warning" | "blocked";
+/** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
+export type ISODate = string;
+export interface DateDisplayOptions {
+	/** Components: the AuraProvider's locale, else `en`. `formatDate()` (no provider to read): `en` unless given (5.0; `th` before). */
+	locale?: "th" | "en" | "sv" | undefined;
+	/** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
+	calendar?: "buddhist" | "gregory" | undefined;
+}
+export interface ThemeOptions {
+	/** The project's brand colour, #rgb or #rrggbb. Replaces AURA violet (links, focus ring, selection, info, progress, creative shadow in dark, mesh). */
+	brand: string;
+	/** Optional signal colour; replaces AURA lime in the accent dot and mesh only (success/ready stay green). */
+	signal?: string | undefined;
+	/** ink (default): primary buttons stay zinc ink. brand: primary buttons use the brand colour. */
+	primary?: "ink" | "brand" | undefined;
+	name?: string | undefined;
+}
+export interface ThemeCheck {
+	theme: "light" | "dark";
+	pair: string;
+	ratio: number;
+	target: number;
+	pass: boolean;
+}
+export interface Theme {
+	name: string | null;
+	brand: Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900, string>;
+	signal: Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900, string> | null;
+	light: Record<string, string>;
+	dark: Record<string, string>;
+	checks: ThemeCheck[];
+	ok: boolean;
+	/** CSS overriding the tokens. No selector: the whole page. A selector (".tenant-acme") scopes it. Load after aura.css. */
+	css(selector?: string): string;
+}
+/** Options for formatDate: locale/calendar plus a preset or any Intl.DateTimeFormat options. */
+export type FormatDateOptions = DateDisplayOptions & {
+	format?: "short" | "long" | "numeric" | Intl.DateTimeFormatOptions | undefined;
+};
+export declare function toISO(d: Date | null | undefined): ISODate | null;
+export declare function fromISO(s: ISODate | null | undefined): Date | null;
+/** Format an ISO date for display: "18 Sept 2026" by default (English, Gregorian — 5.0); `{ locale: 'th' }` gives
+ * "18 ก.ย. 2569" (Buddhist era), `{ locale: 'sv' }` "18 sep. 2026". The same function from the package root and from
+ * `/server`. In components, `useFormatDate()` follows the AuraProvider's locale instead. */
+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;
+/** 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. */
+export declare function parseTime(text: string | null | undefined): string | null;
+/** The tone the pill would pick for a status word. */
+declare function toneFor(status: unknown): StatusTone;
+/** Every built-in label. Function entries build the text from their arguments. */
+export interface AuraStrings {
+	close: string;
+	dismiss: string;
+	dismissToast: string;
+	showPassword: string;
+	filters: string;
+	search: string;
+	clearFilters: string;
+	results: (n: number) => string;
+	commandMenu: string;
+	commandPlaceholder: string;
+	commandHint: string;
+	errorSummary: (n: number) => string;
+	notifications: string;
+	mainNav: string;
+	breadcrumb: string;
+	navigation: string;
+	openNav: string;
+	collapseNav: string;
+	expandNav: string;
+	searching: string;
+	noMatches: string;
+	clear: (what?: string) => string;
+	keepTyping: (total: number) => string;
+	sortAsc: string;
+	sortDesc: string;
+	pin: string;
+	unpin: string;
+	moveLeft: string;
+	moveRight: string;
+	hideColumn: string;
+	resetColumns: string;
+	selectRows: string;
+	selectAllRows: string;
+	deselectAllRows: string;
+	selectAll: string;
+	selectRow: (k: React$1.ReactNode) => string;
+	selectedCount: (c: number) => string;
+	pinned: string;
+	columnOptions: (label?: string) => string;
+	column: (label?: string) => string;
+	columns: string;
+	showHideColumns: string;
+	empty: string;
+	loading: string;
+	loadingRows: string;
+	range: (a: number | string, b: number | string, total: number) => string;
+	page: (p: number, total: number) => string;
+	prevPage: string;
+	nextPage: string;
+	rowCount: (c: number) => string;
+	totals: string;
+	actions: string;
+	optional: string;
+	timePlaceholder: string;
+	timeInvalid: string;
+	timeOutOfRange: (a: number | string, b: number | string) => string;
+	dropFiles: string;
+	browse: string;
+	browseOne: string;
+	remove: (n: number | string) => string;
+	fileTooBig: (max?: number | string) => string;
+	fileWrongType: string;
+	tooManyFiles: (n: number | string) => string;
+	colorScheme: string;
+	increase: string;
+	decrease: string;
+	stepDone: string;
+	stepOf: (i: number, total: number) => string;
+	schemeLight: string;
+	schemeDark: string;
+	schemeSystem: string;
+	uploading: string;
+	images: string;
+	pagination: string;
+	pageN: (p: number) => string;
+	accepts: (list?: string, max?: number | string) => string;
+}
+export declare const STRINGS: {
+	en: AuraStrings;
+	th: AuraStrings;
+	sv: AuraStrings;
+};
+/** WCAG contrast ratio of two #hex colours. */
+export declare function contrast(a: string, b: string): number;
+/** A 50–900 scale around one colour: same hue, AURA's lightness steps, chroma kept in gamut. */
+declare function scale(hex: string): Theme["brand"];
+/**
+ * createTheme({ brand, signal?, primary?: 'ink' | 'brand', name? })
+ * → { name, brand: {50…900}, signal: {50…900}|null, light: {token: #hex}, dark: {…}, checks: [{pair, ratio, target, pass}], ok, css(selector?) }
+ */
+export declare function createTheme(opts: ThemeOptions): Theme;
+/** `system` follows the operating system and changes with it. */
+export type ColorScheme = "light" | "dark" | "system";
+export interface ColorSchemeOptions {
+	/** localStorage key for the choice. Default `aura-color-scheme`. */
+	storageKey?: string | undefined;
+	/** Used when nothing is saved. Default `system`. */
+	defaultScheme?: ColorScheme | undefined;
+}
+/** The script ColorSchemeScript renders, as a string — for frameworks that want it in a raw <head> template. */
+export declare function colorSchemeScript(options?: ColorSchemeOptions): string;
+/** Min-width breakpoints in px, mirroring the aura-bp-* tokens. */
+export declare const breakpoints: {
+	sm: 640;
+	md: 768;
+	lg: 1024;
+	xl: 1280;
+};
+
+export {
+	scale as brandScale,
+	toneFor as statusTone,
+};
+
+export {};

package/dist/server/index.d.ts

@@ -1,6 +1,7 @@
 import * as React$1 from 'react';
 
-export type StatusTone = "neutral" | "progress" | "ready" | "blocked";
+/** `warning` (5.1): needs attention but still works — Warning, Problem, Degraded, At risk. */
+export type StatusTone = "neutral" | "progress" | "ready" | "warning" | "blocked";
 /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
 export type ISODate = string;
 export interface DateDisplayOptions {

package/dist/server/index.js

@@ -120,6 +120,7 @@ function parseTime(text) {
 var TONE_WORDS = {
   ready: ["ready", "done", "complete", "completed", "approved", "live", "passed"],
   progress: ["in progress", "in review", "review", "syncing", "running", "pending"],
+  warning: ["warning", "problem", "degraded", "at risk"],
   blocked: ["blocked", "failed", "error", "rejected", "on hold", "cancelled"]
 };
 function toneFor(status) {
@@ -727,6 +728,8 @@ function createTheme(opts) {
   }
   if (s) check("light", "ink", "accent-lime (signal)", 4.5, INK, s[200]);
   function css(selector) {
+    if (selector !== void 0 && /[<{};@\r\n]|\/\*|\*\//.test(selector))
+      throw new Error('createTheme: "' + selector + '" is not a plain CSS selector');
     const light = selector ? selector : ':root, [data-theme="light"]';
     const dark = selector ? selector + ".dark, .dark " + selector + ", " + selector + '[data-theme="dark"], [data-theme="dark"] ' + selector : '.dark, [data-theme="dark"]';
     const system = selector ? '[data-theme="system"] ' + selector + ", " + selector + '[data-theme="system"]' : '[data-theme="system"]';
@@ -735,7 +738,7 @@ function createTheme(opts) {
         return "  --aura-" + k + ": " + m[k] + ";";
       }).join("\n") + "\n}";
     }
-    return "/* AURA theme" + (o.name ? ' "' + o.name + '"' : "") + ": brand " + o.brand + (o.signal ? ", signal " + o.signal : "") + (o.primary === "brand" ? ", brand primary buttons" : "") + ". Load after aura.css. Generated by createTheme. */\n" + block(light, L) + "\n" + block(dark, D) + "\n@media (prefers-color-scheme: dark) {\n" + block(system, D) + "\n}\n";
+    return "/* AURA theme" + (o.name ? ' "' + String(o.name).replace(/[*/<>\\]/g, "") + '"' : "") + ": brand " + o.brand + (o.signal ? ", signal " + o.signal : "") + (o.primary === "brand" ? ", brand primary buttons" : "") + ". Load after aura.css. Generated by createTheme. */\n" + block(light, L) + "\n" + block(dark, D) + "\n@media (prefers-color-scheme: dark) {\n" + block(system, D) + "\n}\n";
   }
   return {
     name: o.name || null,
@@ -754,9 +757,9 @@ function createTheme(opts) {
 // src/colorSchemeScript.ts
 var DEFAULT_KEY = "aura-color-scheme";
 function colorSchemeScript(options) {
-  const key = JSON.stringify(options && options.storageKey || DEFAULT_KEY);
-  const fallback = JSON.stringify(options && options.defaultScheme || "system");
-  return "(function(){try{var s=localStorage.getItem(" + key + ");if(s!=='light'&&s!=='dark'&&s!=='system')s=" + fallback + `;var d=document.documentElement;d.setAttribute("data-theme",s);var dark=s==='dark'||(s==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);d.classList.toggle("dark",dark);}catch(e){}})();`;
+  const key = JSON.stringify(options && options.storageKey || DEFAULT_KEY).replace(/</g, "\\u003c");
+  const fallback = JSON.stringify(options && options.defaultScheme || "system").replace(/</g, "\\u003c");
+  return "(function(){try{var s=localStorage.getItem(" + key + ");if(s!=='light'&&s!=='dark'&&s!=='system')s=" + fallback + `;var d=document.documentElement;d.setAttribute("data-theme",s);var m=window.matchMedia('(prefers-color-scheme: dark)');d.classList.toggle('dark',s==='dark'||(s==='system'&&m.matches));if(m.addEventListener)m.addEventListener('change',function(e){if(d.getAttribute('data-theme')==='system')d.classList.toggle('dark',e.matches)});}catch(e){}})();`;
 }
 
 // src/breakpoints.ts

package/dist/styles.css

@@ -212,7 +212,7 @@ a.aura-btn { text-decoration: none; }
 
 /* Menu — popover list for column options and the column picker */
 .aura-menu {
-  position: fixed; z-index: var(--aura-z-menu); min-width: 200px; padding: var(--aura-space-1);
+  position: fixed; z-index: var(--aura-z-menu); min-width: 200px; padding: var(--aura-space-1); overflow-y: auto; overscroll-behavior: contain;
   background: var(--aura-bg-surface); color: var(--aura-fg-primary);
   border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-md);
   box-shadow: var(--aura-shadow-enterprise);
@@ -334,6 +334,7 @@ a.aura-icon-btn { text-decoration: none; }
 }
 .aura-pill--progress { background: var(--aura-status-progress-bg); color: var(--aura-status-progress-fg); }
 .aura-pill--ready { background: var(--aura-status-ready-bg); color: var(--aura-status-ready-fg); }
+.aura-pill--warning { background: var(--aura-status-warning-bg); color: var(--aura-status-warning-fg); }
 .aura-pill--blocked { background: var(--aura-status-blocked-bg); color: var(--aura-status-blocked-fg); }
 
 /* Icon — Lucide, 24-grid, stroke in currentColor */
@@ -519,6 +520,8 @@ a.aura-icon-btn { text-decoration: none; }
   font-family: var(--font-sans); font-size: 12px; line-height: 1.5; pointer-events: none;
   animation: aura-fade-in var(--aura-duration-fast) var(--aura-ease);
 }
+/* The Tooltip component's own tips can be hovered (WCAG 1.4.13, 5.1.1); rail labels and cell tips stay click-through. */
+.aura-tooltip--hoverable { pointer-events: auto; }
 @keyframes aura-fade-in { from { opacity: 0; } }
 
 /* ---------- Dialog ---------- */
@@ -596,6 +599,9 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-nav__header { padding: var(--aura-space-5) var(--aura-space-4) var(--aura-space-4); }
 .aura-nav__scroll { flex: 1; overflow-y: auto; padding: 0 var(--aura-space-3); }
+/* No header: keep the first item off the top edge (5.0.2). */
+.aura-nav > .aura-nav__scroll:first-child { padding-top: var(--aura-space-3); }
+.aura-nav--borderless { border-right: 0; }
 .aura-nav__section + .aura-nav__section { margin-top: var(--aura-space-5); }
 .aura-nav__title { margin: 0 0 var(--aura-space-1); padding: 0 var(--aura-space-3); font-family: var(--font-mono); font-size: 11px; line-height: 20px; color: var(--aura-fg-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
 .aura-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
@@ -742,7 +748,7 @@ a.aura-tab { text-decoration: none; }
 .aura-cal__day.is-outside { color: var(--aura-fg-tertiary); }
 .aura-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--aura-border-control); font-weight: 600; }
 .aura-cal__day.is-selected { background: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); box-shadow: none; }
-.aura-cal__day:disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; background: transparent; text-decoration: line-through; }
+.aura-cal__day:disabled, .aura-cal__day[aria-disabled='true'] { opacity: var(--aura-disabled-opacity); cursor: not-allowed; background: transparent; text-decoration: line-through; }
 .aura-cal__day:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; }
 .aura-cal__grid td.is-in-range { background: var(--aura-bg-selected); }
 .aura-cal__grid td.is-range-start { background: linear-gradient(to right, transparent 50%, var(--aura-bg-selected) 50%); }
@@ -1419,7 +1425,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 /* ---------- 4.20: DataTable width queries and cards, one markup ---------- */
 /* Each .aura-table-q is the table's width × 10000 / its threshold (DataTable.tsx, Q), so `(width < 9999.5px)` is true
  * exactly when the table is narrower than stackBelow or a hideBelow width — before hydration, at any width. */
-.aura-table-box { overflow-x: clip; }
+.aura-table-box { overflow-x: clip; width: 100%; } /* 5.1.1: container-type boxes have no content width; without this a table in a centred flex column collapsed to 0 */
 .aura-table-q { width: calc(100% * var(--aura-q-scale)); container-type: inline-size; }
 .aura-table-q--stack { container-name: aura-stack; }
 .aura-table-q--h1 { container-name: aura-h1; }
@@ -1481,3 +1487,17 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-table__foot { border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); margin-top: var(--aura-space-2); background: var(--aura-bg-surface); }
   .aura-table__empty { background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); }
 }
+
+/* ---------- 5.1.1: Windows High Contrast / forced colours ---------- */
+/* Backgrounds are replaced in forced colours, so controls that show state only by fill get borders and system colours. */
+@media (forced-colors: active) {
+  .aura-switch { border: 1px solid CanvasText; }
+  .aura-switch__thumb { background: CanvasText; forced-color-adjust: none; }
+  .aura-switch.is-on { background: Highlight; forced-color-adjust: none; }
+  .aura-switch.is-on .aura-switch__thumb { background: HighlightText; }
+  .aura-progress__track, .aura-upload__bar { border: 1px solid CanvasText; }
+  .aura-progress__bar, .aura-upload__bar > span { background: Highlight; forced-color-adjust: none; }
+  .aura-segmented__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }
+  .aura-tab { border-bottom-color: Canvas; }
+  .aura-tab.is-active { border-bottom-color: Highlight; }
+}

package/dist/styles.layer.css

@@ -214,7 +214,7 @@ a.aura-btn { text-decoration: none; }
 
 /* Menu — popover list for column options and the column picker */
 .aura-menu {
-  position: fixed; z-index: var(--aura-z-menu); min-width: 200px; padding: var(--aura-space-1);
+  position: fixed; z-index: var(--aura-z-menu); min-width: 200px; padding: var(--aura-space-1); overflow-y: auto; overscroll-behavior: contain;
   background: var(--aura-bg-surface); color: var(--aura-fg-primary);
   border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-md);
   box-shadow: var(--aura-shadow-enterprise);
@@ -336,6 +336,7 @@ a.aura-icon-btn { text-decoration: none; }
 }
 .aura-pill--progress { background: var(--aura-status-progress-bg); color: var(--aura-status-progress-fg); }
 .aura-pill--ready { background: var(--aura-status-ready-bg); color: var(--aura-status-ready-fg); }
+.aura-pill--warning { background: var(--aura-status-warning-bg); color: var(--aura-status-warning-fg); }
 .aura-pill--blocked { background: var(--aura-status-blocked-bg); color: var(--aura-status-blocked-fg); }
 
 /* Icon — Lucide, 24-grid, stroke in currentColor */
@@ -521,6 +522,8 @@ a.aura-icon-btn { text-decoration: none; }
   font-family: var(--font-sans); font-size: 12px; line-height: 1.5; pointer-events: none;
   animation: aura-fade-in var(--aura-duration-fast) var(--aura-ease);
 }
+/* The Tooltip component's own tips can be hovered (WCAG 1.4.13, 5.1.1); rail labels and cell tips stay click-through. */
+.aura-tooltip--hoverable { pointer-events: auto; }
 @keyframes aura-fade-in { from { opacity: 0; } }
 
 /* ---------- Dialog ---------- */
@@ -598,6 +601,9 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-nav__header { padding: var(--aura-space-5) var(--aura-space-4) var(--aura-space-4); }
 .aura-nav__scroll { flex: 1; overflow-y: auto; padding: 0 var(--aura-space-3); }
+/* No header: keep the first item off the top edge (5.0.2). */
+.aura-nav > .aura-nav__scroll:first-child { padding-top: var(--aura-space-3); }
+.aura-nav--borderless { border-right: 0; }
 .aura-nav__section + .aura-nav__section { margin-top: var(--aura-space-5); }
 .aura-nav__title { margin: 0 0 var(--aura-space-1); padding: 0 var(--aura-space-3); font-family: var(--font-mono); font-size: 11px; line-height: 20px; color: var(--aura-fg-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
 .aura-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
@@ -744,7 +750,7 @@ a.aura-tab { text-decoration: none; }
 .aura-cal__day.is-outside { color: var(--aura-fg-tertiary); }
 .aura-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--aura-border-control); font-weight: 600; }
 .aura-cal__day.is-selected { background: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); box-shadow: none; }
-.aura-cal__day:disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; background: transparent; text-decoration: line-through; }
+.aura-cal__day:disabled, .aura-cal__day[aria-disabled='true'] { opacity: var(--aura-disabled-opacity); cursor: not-allowed; background: transparent; text-decoration: line-through; }
 .aura-cal__day:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; }
 .aura-cal__grid td.is-in-range { background: var(--aura-bg-selected); }
 .aura-cal__grid td.is-range-start { background: linear-gradient(to right, transparent 50%, var(--aura-bg-selected) 50%); }
@@ -1421,7 +1427,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 /* ---------- 4.20: DataTable width queries and cards, one markup ---------- */
 /* Each .aura-table-q is the table's width × 10000 / its threshold (DataTable.tsx, Q), so `(width < 9999.5px)` is true
  * exactly when the table is narrower than stackBelow or a hideBelow width — before hydration, at any width. */
-.aura-table-box { overflow-x: clip; }
+.aura-table-box { overflow-x: clip; width: 100%; } /* 5.1.1: container-type boxes have no content width; without this a table in a centred flex column collapsed to 0 */
 .aura-table-q { width: calc(100% * var(--aura-q-scale)); container-type: inline-size; }
 .aura-table-q--stack { container-name: aura-stack; }
 .aura-table-q--h1 { container-name: aura-h1; }
@@ -1484,4 +1490,18 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-table__empty { background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); }
 }
 
+/* ---------- 5.1.1: Windows High Contrast / forced colours ---------- */
+/* Backgrounds are replaced in forced colours, so controls that show state only by fill get borders and system colours. */
+@media (forced-colors: active) {
+  .aura-switch { border: 1px solid CanvasText; }
+  .aura-switch__thumb { background: CanvasText; forced-color-adjust: none; }
+  .aura-switch.is-on { background: Highlight; forced-color-adjust: none; }
+  .aura-switch.is-on .aura-switch__thumb { background: HighlightText; }
+  .aura-progress__track, .aura-upload__bar { border: 1px solid CanvasText; }
+  .aura-progress__bar, .aura-upload__bar > span { background: Highlight; forced-color-adjust: none; }
+  .aura-segmented__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }
+  .aura-tab { border-bottom-color: Canvas; }
+  .aura-tab.is-active { border-bottom-color: Highlight; }
+}
+
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.0.1",
+  "version": "5.1.1",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",
@@ -9,14 +9,24 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
+      }
     },
     "./server": {
-      "types": "./dist/server/index.d.ts",
-      "import": "./dist/server/index.js",
-      "require": "./dist/server/index.cjs"
+      "import": {
+        "types": "./dist/server/index.d.ts",
+        "default": "./dist/server/index.js"
+      },
+      "require": {
+        "types": "./dist/server/index.d.cts",
+        "default": "./dist/server/index.cjs"
+      }
     },
     "./styles.css": "./dist/styles.css",
     "./styles.layer.css": "./dist/styles.layer.css",
@@ -30,7 +40,8 @@
     "LICENSE"
   ],
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "./dist/aura.bundle.js"
   ],
   "scripts": {
     "build": "node scripts/build.mjs && node scripts/sync-bundle.mjs",