@jirawatpyk/aura-react 4.12.0 → 4.14.0

package/dist/esm/index.js

@@ -16,6 +16,10 @@ import { Combobox, defaultFilter } from "./Combobox.js";
 import { DatePicker, DateRangePicker, Calendar, formatDate, parseDate, useFormatDate } from "./DatePicker.js";
 import { Alert } from "./Alert.js";
 import { Toaster, toast } from "./Toaster.js";
+import { PasswordField } from "./PasswordField.js";
+import { FormErrorSummary } from "./FormErrorSummary.js";
+import { FilterBar } from "./FilterBar.js";
+import { Command } from "./Command.js";
 import { Tooltip } from "./Tooltip.js";
 import { Dialog, Drawer } from "./Dialog.js";
 import { DataTable } from "./DataTable.js";
@@ -30,7 +34,7 @@ import { Container } from "./Container.js";
 import { AppShell } from "./AppShell.js";
 import { useBreakpoint, useResponsive, breakpoints } from "./responsive.js";
 import { Surface } from "./Surface.js";
-import { AuraProvider, useAuraLocale, STRINGS } from "./locale.js";
+import { AuraProvider, useAuraLocale, useDensity, STRINGS } from "./locale.js";
 import { Stat } from "./Stat.js";
 import { TimePicker, parseTime } from "./TimePicker.js";
 import { FileUpload, formatBytes } from "./FileUpload.js";
@@ -63,6 +67,7 @@ export {
   ColorSchemeScript,
   ColorSchemeToggle,
   Combobox,
+  Command,
   Container,
   DataTable,
   DatePicker,
@@ -73,6 +78,8 @@ export {
   EmptyState,
   Field,
   FileUpload,
+  FilterBar,
+  FormErrorSummary,
   Grid,
   ICONS,
   Icon,
@@ -80,6 +87,7 @@ export {
   Menu,
   NumberField,
   Pagination,
+  PasswordField,
   Popover,
   Progress,
   RadioGroup,
@@ -118,6 +126,7 @@ export {
   useAuraLocale,
   useBreakpoint,
   useColorScheme,
+  useDensity,
   useFormatDate,
   useResponsive
 };

package/dist/esm/locale.js

@@ -11,6 +11,19 @@ const STRINGS = {
     close: "Close",
     dismiss: "Dismiss",
     dismissToast: "Dismiss notification",
+    showPassword: "Show password",
+    filters: "Filters",
+    search: "Search",
+    clearFilters: "Clear all",
+    results: function(n2) {
+      return n2 === 1 ? "1 result" : n2.toLocaleString("en") + " results";
+    },
+    commandMenu: "Command menu",
+    commandPlaceholder: "Type a command or search\u2026",
+    commandHint: "\u2191\u2193 to move \xB7 Enter to open \xB7 Esc to close",
+    errorSummary: function(n2) {
+      return n2 === 1 ? "Fix 1 field to continue" : "Fix " + n2 + " fields to continue";
+    },
     notifications: "Notifications",
     mainNav: "Main",
     breadcrumb: "Breadcrumb",
@@ -109,6 +122,19 @@ const STRINGS = {
     close: "\u0E1B\u0E34\u0E14",
     dismiss: "\u0E1B\u0E34\u0E14",
     dismissToast: "\u0E1B\u0E34\u0E14\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19",
+    showPassword: "\u0E41\u0E2A\u0E14\u0E07\u0E23\u0E2B\u0E31\u0E2A\u0E1C\u0E48\u0E32\u0E19",
+    filters: "\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07",
+    search: "\u0E04\u0E49\u0E19\u0E2B\u0E32",
+    clearFilters: "\u0E25\u0E49\u0E32\u0E07\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14",
+    results: function(n2) {
+      return n2.toLocaleString("en") + " \u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
+    },
+    commandMenu: "\u0E40\u0E21\u0E19\u0E39\u0E04\u0E33\u0E2A\u0E31\u0E48\u0E07",
+    commandPlaceholder: "\u0E1E\u0E34\u0E21\u0E1E\u0E4C\u0E04\u0E33\u0E2A\u0E31\u0E48\u0E07\u0E2B\u0E23\u0E37\u0E2D\u0E04\u0E49\u0E19\u0E2B\u0E32\u2026",
+    commandHint: "\u2191\u2193 \u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19 \xB7 Enter \u0E40\u0E1B\u0E34\u0E14 \xB7 Esc \u0E1B\u0E34\u0E14",
+    errorSummary: function(n2) {
+      return "\u0E41\u0E01\u0E49\u0E44\u0E02 " + n2 + " \u0E0A\u0E48\u0E2D\u0E07\u0E01\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E15\u0E48\u0E2D";
+    },
     notifications: "\u0E01\u0E32\u0E23\u0E41\u0E08\u0E49\u0E07\u0E40\u0E15\u0E37\u0E2D\u0E19",
     mainNav: "\u0E40\u0E21\u0E19\u0E39\u0E2B\u0E25\u0E31\u0E01",
     breadcrumb: "\u0E40\u0E2A\u0E49\u0E19\u0E17\u0E32\u0E07",
@@ -207,6 +233,19 @@ const STRINGS = {
     close: "St\xE4ng",
     dismiss: "St\xE4ng",
     dismissToast: "St\xE4ng aviseringen",
+    showPassword: "Visa l\xF6senord",
+    filters: "Filter",
+    search: "S\xF6k",
+    clearFilters: "Rensa alla",
+    results: function(n2) {
+      return n2 === 1 ? "1 tr\xE4ff" : n2.toLocaleString("sv-SE") + " tr\xE4ffar";
+    },
+    commandMenu: "Kommandomeny",
+    commandPlaceholder: "Skriv ett kommando eller s\xF6k\u2026",
+    commandHint: "\u2191\u2193 flytta \xB7 Enter \xF6ppna \xB7 Esc st\xE4ng",
+    errorSummary: function(n2) {
+      return n2 === 1 ? "R\xE4tta 1 f\xE4lt f\xF6r att forts\xE4tta" : "R\xE4tta " + n2 + " f\xE4lt f\xF6r att forts\xE4tta";
+    },
     notifications: "Aviseringar",
     mainNav: "Huvudmeny",
     breadcrumb: "Br\xF6dsmulor",
@@ -304,6 +343,8 @@ const STRINGS = {
 };
 const LocaleContext = React.createContext(null);
 function AuraProvider(props) {
+  const outer = React.useContext(LocaleContext);
+  const density = props.density || outer && outer.density || null;
   const value = React.useMemo(
     function() {
       const base = props.locale && STRINGS[props.locale] || STRINGS.en;
@@ -311,12 +352,13 @@ function AuraProvider(props) {
         locale: props.locale || "en",
         calendar: props.calendar || null,
         strings: props.strings ? Object.assign({}, base, props.strings) : base,
-        linkComponent: props.linkComponent || null
+        linkComponent: props.linkComponent || null,
+        density
       };
     },
-    [props.locale, props.calendar, props.strings, props.linkComponent]
+    [props.locale, props.calendar, props.strings, props.linkComponent, density]
   );
-  return /* @__PURE__ */ React.createElement(LocaleContext.Provider, { value }, props.children);
+  return /* @__PURE__ */ React.createElement(LocaleContext.Provider, { value }, props.density ? /* @__PURE__ */ React.createElement("div", { className: "aura-density", "data-density": props.density }, props.children) : props.children);
 }
 function useAuraLocale() {
   return React.useContext(LocaleContext) || { locale: null, calendar: null, strings: STRINGS.en };
@@ -325,6 +367,10 @@ function useLinkComponent(own) {
   const ctx = React.useContext(LocaleContext);
   return own || ctx && ctx.linkComponent || "a";
 }
+function useDensity() {
+  const ctx = React.useContext(LocaleContext);
+  return ctx && ctx.density || void 0;
+}
 function useStrings() {
   return useAuraLocale().strings;
 }
@@ -332,6 +378,7 @@ export {
   AuraProvider,
   STRINGS,
   useAuraLocale,
+  useDensity,
   useLinkComponent,
   useStrings
 };

package/dist/index.d.ts

@@ -149,6 +149,8 @@ export interface DataTableProps {
 	/** Controlled pinned columns (keys); pair with onPinnedColumnsChange. */
 	pinnedColumns?: string[];
 	onPinnedColumnsChange?: (keys: string[]) => void;
+	/** `compact` = 40px rows (48px on touch screens). Default: the surrounding density. */
+	density?: "comfortable" | "compact";
 	/** Container width in px below which rows render as stacked cards (phones). Try 640. Measured with ResizeObserver, so it follows the container, not the window. */
 	stackBelow?: number;
 	className?: string;
@@ -184,6 +186,8 @@ export interface AuraProviderProps {
 	calendar?: "buddhist" | "gregory";
 	/** Override individual strings. */
 	strings?: Partial<Record<string, string | ((...args: any[]) => string)>>;
+	/** `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";
 	/** 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;
@@ -268,6 +272,96 @@ export interface TextFieldProps extends FieldProps, Omit<React$1.InputHTMLAttrib
 	/** Trailing unit, e.g. "THB". */
 	suffix?: React$1.ReactNode;
 }
+/** A password input with a show/hide button. All TextField props; `ref` reaches the input (react-hook-form `register`). */
+export interface PasswordFieldProps extends Omit<TextFieldProps, "type" | "suffix"> {
+	/** Set false to hide the show/hide button. Default true. */
+	toggle?: boolean;
+}
+/** One entry of a FormErrorSummary: the field's `id` (or `name`) and what to fix. */
+export interface FormErrorItem {
+	field: string;
+	message: React$1.ReactNode;
+}
+/** The list of problems at the top of a form after a failed submit; each links to its field (GOV.UK pattern). */
+export interface FormErrorSummaryProps {
+	/** A list, or react-hook-form's `formState.errors` as is (`{ name: { message } }`). Empty → renders nothing. */
+	errors: FormErrorItem[] | Record<string, {
+		message?: React$1.ReactNode;
+	} | undefined>;
+	/** Default "Fix N fields to continue" in the provider's language. */
+	title?: React$1.ReactNode;
+	/** Called with the field when a link is followed, e.g. react-hook-form's `setFocus`. Default: focus the element whose id (or name) is the field. */
+	onSelect?: (field: string) => void;
+	/** Change it on every submit (e.g. `formState.submitCount`) to move focus to the summary again. It also takes focus when errors first appear. */
+	focusKey?: unknown;
+	className?: string;
+	id?: string;
+}
+/** An applied filter, shown as a removable chip. */
+export interface ActiveFilter {
+	id: string;
+	label: React$1.ReactNode;
+	onRemove: () => void;
+}
+/** The row above a table: search, filter controls, applied-filter chips, result count and actions. Wraps below md. */
+export interface FilterBarProps {
+	/** Search text (controlled). Omit `onSearchChange` to hide the search field. */
+	search?: string;
+	/** Called after typing pauses (`searchDelay`), and at once on Enter or clear — ready to write to the URL. */
+	onSearchChange?: (value: string) => void;
+	/** ms to wait after the last keystroke. Default 300. */
+	searchDelay?: number;
+	searchLabel?: string;
+	searchPlaceholder?: string;
+	/** Filter controls beside the search: Select, SegmentedControl, a Popover of options… */
+	children?: React$1.ReactNode;
+	/** Applied filters as chips, each with its own remove button. */
+	filters?: ActiveFilter[];
+	/** Adds "Clear all" while any filter or search is set. */
+	onClearAll?: () => void;
+	/** A number ("312 results", announced politely) or your own node. */
+	resultCount?: number | React$1.ReactNode;
+	/** Trailing slot: export, a New button… */
+	actions?: React$1.ReactNode;
+	/** Accessible name of the region. Default "Filters". */
+	label?: string;
+	className?: string;
+}
+/** One command in the palette. */
+export interface CommandItem {
+	id: string;
+	/** Text shown and searched. */
+	label: string;
+	/** Items with the same group are listed together under its heading, in first-seen order. */
+	group?: string;
+	icon?: IconInput;
+	description?: string;
+	/** Extra words that find it ("invoice" → Billing). */
+	keywords?: string[];
+	/** A shortcut shown at the right, e.g. "G I". Display only. */
+	shortcut?: string;
+	disabled?: boolean;
+	/** Runs when chosen (Enter or click); the palette then closes. */
+	onSelect?: () => void;
+}
+/** A command palette: a modal search over commands and pages, grouped, fully keyboard-driven. */
+export interface CommandProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	items: CommandItem[];
+	/** Also called with the chosen item (after its own onSelect). */
+	onSelect?: (item: CommandItem) => void;
+	/** Accessible name. Default "Command menu". */
+	label?: string;
+	placeholder?: string;
+	/** Default "No matches". */
+	emptyText?: string;
+	/** ⌘K / Ctrl+K toggles the palette from anywhere on the page. Default true. */
+	hotkey?: boolean;
+	/** Replace the Thai-aware default filter. */
+	filter?: (item: CommandItem, query: string) => boolean;
+	className?: string;
+}
 export interface TextareaProps extends FieldProps, Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "required"> {
 }
 export type SelectOption = string | {
@@ -332,9 +426,11 @@ export interface ToastOptions {
 	};
 	/** ms before it closes itself. Default 5000; Infinity keeps it until dismissed. */
 	duration?: number;
-	/** Reuse an id to replace a toast in place. */
+	/** Reuse an id to replace a toast in place (same position, timer restarts) — never a second toast. */
 	id?: string;
 }
+/** Options for the shorthands (`toast.success(title, opts)` …): everything but the title and tone. */
+export type ToastShorthandOptions = Omit<ToastOptions, "title" | "tone">;
 export interface TooltipProps {
 	content: React$1.ReactNode;
 	/** One focusable element. */
@@ -979,6 +1075,11 @@ export declare const Alert: React$1.ForwardRefExoticComponent<AlertProps & React
 /** Show a toast; returns its id. Needs `<Toaster />` mounted once. */
 export declare function toast(opts: ToastOptions | string): string;
 export declare namespace toast {
+	var success: (title: string, opts?: ToastShorthandOptions) => string;
+	var error: (title: string, opts?: ToastShorthandOptions) => string;
+	var warning: (title: string, opts?: ToastShorthandOptions) => string;
+	var info: (title: string, opts?: ToastShorthandOptions) => string;
+	var loading: (title: string, opts?: ToastShorthandOptions) => string;
 	var dismiss: (id: string) => void;
 }
 export interface ToasterProps {
@@ -986,6 +1087,10 @@ export interface ToasterProps {
 	position?: "bottom" | "top";
 }
 export declare function Toaster(props: ToasterProps): React$1.ReactElement | null;
+export declare const PasswordField: React$1.ForwardRefExoticComponent<PasswordFieldProps & React$1.RefAttributes<HTMLInputElement>>;
+export declare const FormErrorSummary: React$1.ForwardRefExoticComponent<FormErrorSummaryProps & React$1.RefAttributes<HTMLDivElement>>;
+export declare const FilterBar: React$1.ForwardRefExoticComponent<FilterBarProps & React$1.RefAttributes<HTMLDivElement>>;
+export declare function Command(props: CommandProps): React$1.ReactElement | null;
 export declare const Tooltip: React$1.ForwardRefExoticComponent<TooltipProps & React$1.RefAttributes<HTMLSpanElement>>;
 export declare const Dialog: React$1.ForwardRefExoticComponent<DialogProps & React$1.RefAttributes<HTMLDivElement>>;
 /** Side panel over the page: record detail, filters, mobile navigation. Modal (focus trap, scroll lock, focus restore). */
@@ -1032,6 +1137,15 @@ 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;
@@ -1106,11 +1220,15 @@ export interface AuraLocaleValue {
 	strings: AuraStrings;
 	/** The router link set on AuraProvider, if any. */
 	linkComponent?: React$1.ElementType | null;
+	/** 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;
 }
 /** Sets the language of built-in labels (and the default date locale) for everything inside. */
 export declare function AuraProvider(props: AuraProviderProps): React$1.ReactElement;
 /** { locale, calendar, strings } from the nearest AuraProvider (English strings when there is none). */
 export declare function useAuraLocale(): AuraLocaleValue;
+/** The provider's density, for portals that render outside its wrapper. */
+export declare function useDensity(): "comfortable" | "compact" | undefined;
 export declare const Stat: React$1.ForwardRefExoticComponent<StatProps & React$1.RefAttributes<HTMLElement>>;
 /** 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;

package/dist/styles.css

@@ -7,7 +7,7 @@
   box-sizing: border-box;
   height: var(--aura-button-height);
   white-space: nowrap; flex-shrink: 0;   /* a pill never wraps its label */
-  padding: 0 var(--aura-space-6);
+  padding: 0 var(--aura-button-padding-x, var(--aura-space-6));
   border-radius: var(--aura-button-radius);
   border: 0;
   background: transparent;
@@ -74,14 +74,14 @@ a.aura-btn { text-decoration: none; }
 }
 .aura-table__scroll { position: relative; overflow: auto; overscroll-behavior: contain; }
 .aura-table__head {
-  position: sticky; top: 0; z-index: 3;
-  display: flex; height: var(--aura-space-12);
+  position: sticky; top: 0; z-index: 3; box-sizing: border-box;   /* the hairline is inside the row height */
+  display: flex; height: var(--aura-table-row-height);
   background: var(--aura-bg-canvas);
   border-bottom: 1px solid var(--aura-border-default);
   font-family: var(--font-mono); font-size: 12px; color: var(--aura-fg-secondary);
 }
 .aura-table__row {
-  display: flex; height: var(--aura-space-12);
+  box-sizing: border-box; display: flex; height: var(--aura-table-row-height);   /* exactly the virtual row height */
   background: var(--aura-bg-surface);
   border-bottom: 1px solid var(--aura-border-default);
   font-size: 13px;
@@ -105,7 +105,7 @@ a.aura-btn { text-decoration: none; }
 /* 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;
+  position: absolute; z-index: 6; top: calc(var(--aura-table-row-height) - 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; }
@@ -117,7 +117,7 @@ a.aura-btn { text-decoration: none; }
 
 /* Cells: text cells stay block so long values end in an ellipsis */
 .aura-table__td {
-  box-sizing: border-box; height: 100%; line-height: calc(var(--aura-space-12) - 1px);
+  box-sizing: border-box; height: 100%; line-height: calc(var(--aura-table-row-height) - 1px);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--aura-space-4);
 }
 .aura-table__td .aura-pill, .aura-table__td .aura-dropdown, .aura-table__td > .aura-icon-btn, .aura-table__td > .aura-btn { vertical-align: middle; }
@@ -130,7 +130,7 @@ a.aura-btn { text-decoration: none; }
 .aura-table__gutter { flex: none; width: var(--aura-space-6); position: sticky; left: 0; z-index: 2; background: inherit; }
 .aura-table__gutter--end { position: static; }
 .aura-table__picker {
-  position: absolute; top: 0; right: 0; z-index: 5; width: var(--aura-space-12); height: calc(var(--aura-space-12) - 1px);
+  position: absolute; top: 0; right: 0; z-index: 5; width: var(--aura-space-12); height: calc(var(--aura-table-row-height) - 1px);
   display: flex; align-items: center; justify-content: center; background: var(--aura-bg-canvas); border-top-right-radius: calc(var(--aura-card-radius) - 1px);
 }
 .aura-table__gutter--end.has-picker {
@@ -228,7 +228,7 @@ a.aura-btn { text-decoration: none; }
 
 /* Footer + pager */
 .aura-table__foot {
-  height: var(--aura-space-12); display: flex; align-items: center; justify-content: space-between;
+  height: var(--aura-table-row-height); display: flex; align-items: center; justify-content: space-between;
   padding: 0 var(--aura-space-3) 0 var(--aura-space-6);
   border-top: 1px solid var(--aura-border-default); background: var(--aura-bg-surface);
   font-size: 13px; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums;
@@ -1141,3 +1141,119 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-radio-group__list { gap: 0; }
   .aura-radio-group__list.is-horizontal { gap: 0 var(--aura-space-6); }
 }
+
+/* PasswordField: the show/hide IconButton sits in the suffix slot, 6px from the edge */
+.aura-password .aura-input__suffix { padding-right: 6px; display: flex; align-items: center; }
+
+/* FormErrorSummary: a danger alert whose items link to their fields */
+.aura-error-summary:focus-visible, .aura-error-summary:focus { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
+.aura-error-summary h2.aura-alert__title { font-family: inherit; }
+.aura-error-summary__list { margin: var(--aura-space-2) 0 0; padding-left: var(--aura-space-5); display: grid; gap: var(--aura-space-1); font-size: 14px; line-height: 20px; }
+.aura-error-summary__list a { color: var(--aura-alert-danger-fg); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
+.aura-error-summary__list a:hover { text-decoration-thickness: 2px; }
+.aura-error-summary__list a:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-xs); }
+
+/* aura-prose: sanitised rich text (editor output, e-mail previews). Styles exactly p, h1–h4, ul/ol/li, blockquote,
+ * hr, a, strong, em, u with AURA type and spacing, in both themes. */
+.aura-prose { font-family: var(--font-sans); font-size: 14px; line-height: 1.7; color: var(--aura-fg-primary); overflow-wrap: anywhere; }
+.aura-prose > :first-child { margin-top: 0; }
+.aura-prose > :last-child { margin-bottom: 0; }
+.aura-prose p { margin: 0 0 var(--aura-space-4); }
+.aura-prose h1, .aura-prose h2, .aura-prose h3, .aura-prose h4 { color: var(--aura-fg-primary); margin: var(--aura-space-8) 0 var(--aura-space-3); }
+.aura-prose h1 { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; }
+.aura-prose h2 { font-weight: 600; font-size: 22px; line-height: 1.3; }
+.aura-prose h3 { font-weight: 600; font-size: 17px; line-height: 1.45; }
+.aura-prose h4 { font-weight: 600; font-size: 15px; line-height: 1.5; }
+.aura-prose ul, .aura-prose ol { margin: 0 0 var(--aura-space-4); padding-left: var(--aura-space-6); }
+.aura-prose li { margin: var(--aura-space-1) 0; }
+.aura-prose li > ul, .aura-prose li > ol { margin: var(--aura-space-1) 0 0; }
+.aura-prose ul { list-style: disc; }
+.aura-prose ol { list-style: decimal; }
+.aura-prose li::marker { color: var(--aura-fg-secondary); }
+.aura-prose blockquote { margin: 0 0 var(--aura-space-4); padding: var(--aura-space-1) 0 var(--aura-space-1) var(--aura-space-4); border-left: 3px solid var(--aura-border-control); color: var(--aura-fg-secondary); }
+.aura-prose hr { margin: var(--aura-space-8) 0; border: 0; border-top: 1px solid var(--aura-border-default); }
+.aura-prose a { color: var(--aura-fg-accent); text-decoration: underline; text-underline-offset: 2px; }
+.aura-prose a:hover { text-decoration-thickness: 2px; }
+.aura-prose a:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-xs); }
+.aura-prose strong { font-weight: 600; }
+.aura-prose em { font-style: italic; }
+.aura-prose u { text-decoration: underline; text-underline-offset: 2px; }
+
+/* FilterBar: search + controls + count + actions on one row, applied-filter chips below; wraps on small screens */
+.aura-filterbar { display: flex; flex-direction: column; gap: var(--aura-space-3); font-family: var(--font-sans); }
+.aura-filterbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-3); }
+.aura-filterbar__search { flex: 1 1 240px; max-width: 360px; width: auto; }
+.aura-filterbar__search .aura-input__control::-webkit-search-cancel-button { display: none; }
+.aura-filterbar__clear-search { margin-right: 6px; }
+.aura-filterbar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-3); }
+.aura-filterbar__spacer { flex: 1 1 0; }
+.aura-filterbar__count { font-size: 13px; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.aura-filterbar__actions { display: flex; align-items: center; gap: var(--aura-space-2); }
+.aura-filterbar__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
+.aura-filterbar__clear {
+  border: 0; background: transparent; padding: 4px var(--aura-space-2); border-radius: var(--aura-radius-sm);
+  font: inherit; font-size: 13px; font-weight: 500; color: var(--aura-fg-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
+}
+.aura-filterbar__clear:hover { background: var(--aura-bg-surface-hover); }
+.aura-filterbar__clear:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
+@media (max-width: 767.98px) {
+  .aura-filterbar__search { flex-basis: 100%; max-width: none; }
+  .aura-filterbar__spacer { display: none; }
+}
+
+/* Command palette: a search field over a grouped list, above everything else (it can open from a Dialog) */
+.aura-dialog-layer.aura-command-layer { z-index: var(--aura-z-menu); align-items: flex-start; padding: 12vh var(--aura-space-4) var(--aura-space-4); }
+.aura-command {
+  position: relative; box-sizing: border-box; width: 100%; max-width: 640px; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden;
+  background: var(--aura-bg-surface); color: var(--aura-fg-primary); font-family: var(--font-sans);
+  border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-xl); box-shadow: var(--aura-shadow-overlay);
+  animation: aura-dialog-in var(--aura-duration-base) var(--aura-ease);
+}
+.aura-command:focus { outline: none; }
+.aura-command__search { display: flex; align-items: center; gap: var(--aura-space-3); padding: 0 var(--aura-space-4); border-bottom: 1px solid var(--aura-border-default); }
+.aura-command__search-icon { color: var(--aura-fg-secondary); }
+.aura-command__input {
+  flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; color: inherit; outline: none;
+  font: inherit; font-size: max(16px, var(--aura-input-font-size));
+}
+.aura-command__input::placeholder { color: var(--aura-fg-tertiary); opacity: 1; }
+.aura-command__list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--aura-space-2); }
+.aura-command__group + .aura-command__group { margin-top: var(--aura-space-2); }
+.aura-command__heading { padding: var(--aura-space-2) var(--aura-space-2) var(--aura-space-1); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aura-fg-secondary); }
+.aura-command__item { display: flex; align-items: center; gap: var(--aura-space-3); min-height: 40px; padding: 6px var(--aura-space-2); border-radius: var(--aura-radius-sm); cursor: pointer; font-size: 14px; }
+.aura-command__item > .aura-icon { color: var(--aura-fg-secondary); }
+.aura-command__item.is-active { background: var(--aura-bg-surface-hover); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
+.aura-command__item.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
+.aura-command__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.aura-command__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.aura-command__desc { font-size: 12px; line-height: 1.5; color: var(--aura-fg-secondary); }
+.aura-command__kbd {
+  flex: none; padding: 2px 6px; border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-xs);
+  font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--aura-fg-secondary); background: var(--aura-bg-canvas);
+}
+.aura-command__empty { margin: 0; padding: var(--aura-space-6) var(--aura-space-2); text-align: center; font-size: 14px; color: var(--aura-fg-secondary); }
+.aura-command__foot { display: flex; justify-content: space-between; gap: var(--aura-space-3); padding: var(--aura-space-2) var(--aura-space-4); border-top: 1px solid var(--aura-border-default); font-size: 12px; color: var(--aura-fg-secondary); }
+@media (max-width: 639.98px) {
+  .aura-dialog-layer.aura-command-layer { align-items: flex-start; padding: var(--aura-space-4); }
+  .aura-command { max-height: 80vh; }
+  .aura-command__foot { display: none; }
+  .aura-command__item { min-height: 44px; }
+}
+@media (prefers-reduced-motion: reduce) { .aura-command { animation: none; } }
+
+/* Density. data-density="compact" on <html> or any container (AuraProvider density="compact" and DataTable
+ * density do it for you): 36px fields and buttons, 40px table rows, less button padding — for dense admin screens.
+ * Touch screens keep 44px targets whatever the density. "comfortable" inside compact switches back. */
+[data-density='compact'] {
+  --aura-input-height: 36px; --aura-button-height: 36px; --aura-table-row-height: 40px;
+  --aura-button-padding-x: var(--aura-space-4);
+}
+[data-density='comfortable'] {
+  --aura-input-height: 44px; --aura-button-height: 44px; --aura-table-row-height: 48px;
+  --aura-button-padding-x: var(--aura-space-6);
+}
+@media (pointer: coarse) {
+  [data-density='compact'] { --aura-input-height: 44px; --aura-button-height: 44px; --aura-table-row-height: 48px; --aura-button-padding-x: var(--aura-space-6); }
+}
+.aura-density { display: contents; }
+

package/package.json

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