@jirawatpyk/aura-react 5.1.1 → 5.3.0

package/dist/index.d.cts

@@ -417,9 +417,12 @@ export type SelectOption = string | {
 	label: string;
 	disabled?: boolean | undefined;
 };
+/** 5.3: opens AURA's own list (light and dark alike) over a real `<select>`, which keeps `name`, `required`, the ref,
+ * `onChange`, react-hook-form `register` and form posts. `multiple` or `size > 1` keeps the native list box. */
 export interface SelectProps extends FieldProps, Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "required"> {
-	options: SelectOption[];
-	/** A disabled first option shown in fg-tertiary until something is chosen. */
+	/** The choices; or pass `<option>` / `<optgroup>` children instead (5.3: optional). */
+	options?: SelectOption[] | undefined;
+	/** Shown in fg-tertiary on the closed field until something is chosen; not listed as a choice. */
 	placeholder?: string | undefined;
 	icon?: IconInput | undefined;
 }
@@ -1217,6 +1220,7 @@ export interface FieldComponentProps extends Omit<FieldPropsPublic, "label"> {
 export declare const Field: React$1.ForwardRefExoticComponent<FieldComponentProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const TextField: React$1.ForwardRefExoticComponent<TextFieldProps & React$1.RefAttributes<HTMLInputElement>>;
 export declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
+/** A select field: a button that opens an AURA list (5.3), over a real <select> that keeps forms, refs and events. */
 export declare const Select: React$1.ForwardRefExoticComponent<SelectProps & React$1.RefAttributes<HTMLSelectElement>>;
 export declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 export declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
@@ -1381,6 +1385,9 @@ export interface AuraStrings {
 	loadingRows: string;
 	range: (a: number | string, b: number | string, total: number) => string;
 	page: (p: number, total: number) => string;
+	/** Server paging without totalRows (5.2): the range and page when the total isn't known. */
+	rangeOpen: (a: number | string, b: number | string) => string;
+	pageOpen: (p: number) => string;
 	prevPage: string;
 	nextPage: string;
 	rowCount: (c: number) => string;
@@ -1390,6 +1397,8 @@ export interface AuraStrings {
 	timePlaceholder: string;
 	timeInvalid: string;
 	timeOutOfRange: (a: number | string, b: number | string) => string;
+	/** A time inside the range that isTimeDisabled refuses (5.2). */
+	timeUnavailable: string;
 	dropFiles: string;
 	browse: string;
 	browseOne: string;

package/dist/index.d.ts

@@ -417,9 +417,12 @@ export type SelectOption = string | {
 	label: string;
 	disabled?: boolean | undefined;
 };
+/** 5.3: opens AURA's own list (light and dark alike) over a real `<select>`, which keeps `name`, `required`, the ref,
+ * `onChange`, react-hook-form `register` and form posts. `multiple` or `size > 1` keeps the native list box. */
 export interface SelectProps extends FieldProps, Omit<React$1.SelectHTMLAttributes<HTMLSelectElement>, "required"> {
-	options: SelectOption[];
-	/** A disabled first option shown in fg-tertiary until something is chosen. */
+	/** The choices; or pass `<option>` / `<optgroup>` children instead (5.3: optional). */
+	options?: SelectOption[] | undefined;
+	/** Shown in fg-tertiary on the closed field until something is chosen; not listed as a choice. */
 	placeholder?: string | undefined;
 	icon?: IconInput | undefined;
 }
@@ -1217,6 +1220,7 @@ export interface FieldComponentProps extends Omit<FieldPropsPublic, "label"> {
 export declare const Field: React$1.ForwardRefExoticComponent<FieldComponentProps & React$1.RefAttributes<HTMLDivElement>>;
 export declare const TextField: React$1.ForwardRefExoticComponent<TextFieldProps & React$1.RefAttributes<HTMLInputElement>>;
 export declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
+/** A select field: a button that opens an AURA list (5.3), over a real <select> that keeps forms, refs and events. */
 export declare const Select: React$1.ForwardRefExoticComponent<SelectProps & React$1.RefAttributes<HTMLSelectElement>>;
 export declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 export declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
@@ -1381,6 +1385,9 @@ export interface AuraStrings {
 	loadingRows: string;
 	range: (a: number | string, b: number | string, total: number) => string;
 	page: (p: number, total: number) => string;
+	/** Server paging without totalRows (5.2): the range and page when the total isn't known. */
+	rangeOpen: (a: number | string, b: number | string) => string;
+	pageOpen: (p: number) => string;
 	prevPage: string;
 	nextPage: string;
 	rowCount: (c: number) => string;
@@ -1390,6 +1397,8 @@ export interface AuraStrings {
 	timePlaceholder: string;
 	timeInvalid: string;
 	timeOutOfRange: (a: number | string, b: number | string) => string;
+	/** A time inside the range that isTimeDisabled refuses (5.2). */
+	timeUnavailable: string;
 	dropFiles: string;
 	browse: string;
 	browseOne: string;

package/dist/server/index.cjs

@@ -43,12 +43,21 @@ var pad = function(n2) {
   return (n2 < 10 ? "0" : "") + n2;
 };
 function toISO(d) {
-  return d ? d.getFullYear() + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate()) : null;
+  if (!d) return null;
+  const y = String(d.getFullYear());
+  return ("000" + y).slice(-Math.max(4, y.length)) + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate());
+}
+function makeDate(y, monthIndex2, day) {
+  const d = new Date(2e3, 0, 1);
+  d.setFullYear(y, monthIndex2, day);
+  return d;
 }
 function fromISO(s) {
   if (!s) return null;
   const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
-  return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null;
+  if (!m) return null;
+  const d = makeDate(+m[1], +m[2] - 1, +m[3]);
+  return d.getMonth() === +m[2] - 1 && d.getDate() === +m[3] ? d : null;
 }
 var TAGS = { th: "th-TH", en: "en-GB", sv: "sv-SE" };
 function defaultCalendar(locale) {
@@ -94,7 +103,15 @@ function monthIndex(word) {
   return MONTHS[k] != null ? MONTHS[k] : -1;
 }
 function parseDate(text) {
-  const s = String(text || "").trim();
+  const raw = String(text || "").trim();
+  const gregorian = /ค\.ศ\.|\d\s*(AD|CE)\b|^\s*(AD|CE)\s/i.test(raw);
+  let s = raw.replace(/พ\.ศ\.|ค\.ศ\./g, " ").replace(/(\d)\s*(BE|AD|CE)\b/gi, "$1 ").replace(/^\s*(BE|AD|CE)\s+/i, " ").replace(/\s+/g, " ").trim();
+  const eight = /^(\d{2})(\d{2})(\d{4})$/.exec(s);
+  if (eight) {
+    const a = +eight[3] >= 1e3 ? parseDate(eight[1] + "/" + eight[2] + "/" + eight[3] + (gregorian ? " \u0E04.\u0E28." : "")) : null;
+    if (a) return a;
+    s = s.slice(0, 4) + "-" + s.slice(4, 6) + "-" + s.slice(6);
+  }
   let m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(s), y, mo, d;
   if (m) {
     y = +m[1];
@@ -104,13 +121,13 @@ function parseDate(text) {
     d = +m[1];
     mo = +m[2];
     y = +m[3];
-  } else if ((m = /^(\d{1,2})\s+(\S+)\s+(\d{4})$/.exec(s.replace(ERA, "").trim())) && monthIndex(m[2]) >= 0) {
+  } else if ((m = /^(\d{1,2})\s+(\S+)\s+(\d{4})$/.exec(s)) && monthIndex(m[2]) >= 0) {
     d = +m[1];
     mo = monthIndex(m[2]) + 1;
     y = +m[3];
   } else return null;
-  if (y >= 2400) y -= 543;
-  const dt = new Date(y, mo - 1, d);
+  if (y >= 2400 && !gregorian) y -= 543;
+  const dt = makeDate(y, mo - 1, d);
   return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
 }
 function todayIn(timeZone) {
@@ -149,6 +166,7 @@ function parseTime(text) {
   const m = /^(\d{1,2})(?:[:.](\d{2}))?$/.exec(s) || /^(\d{1,2})(\d{2})$/.exec(s);
   if (!m) return null;
   let hh = +m[1], mm = m[2] ? +m[2] : 0;
+  if ((am || pm) && (hh < 1 || hh > 12)) return null;
   if (pm && hh < 12) hh += 12;
   if (am && hh === 12) hh = 0;
   if (hh > 23 || mm > 59) return null;
@@ -244,6 +262,12 @@ var STRINGS = {
     page: function(p, total) {
       return "Page " + p + " of " + total;
     },
+    rangeOpen: function(a, b) {
+      return a + "\u2013" + b + " of many";
+    },
+    pageOpen: function(p) {
+      return "Page " + p;
+    },
     prevPage: "Previous page",
     nextPage: "Next page",
     totals: "Totals",
@@ -257,6 +281,7 @@ var STRINGS = {
     timeOutOfRange: function(a, b) {
       return "Choose a time between " + a + " and " + b;
     },
+    timeUnavailable: "That time isn't available. Choose another.",
     dropFiles: "Drag files here or",
     browse: "Choose files",
     browseOne: "Choose a file",
@@ -358,6 +383,12 @@ var STRINGS = {
     page: function(p, total) {
       return "\u0E2B\u0E19\u0E49\u0E32 " + p + " / " + total;
     },
+    rangeOpen: function(a, b) {
+      return a + "\u2013" + b + " \u0E08\u0E32\u0E01\u0E2B\u0E25\u0E32\u0E22\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
+    },
+    pageOpen: function(p) {
+      return "\u0E2B\u0E19\u0E49\u0E32 " + p;
+    },
     prevPage: "\u0E2B\u0E19\u0E49\u0E32\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
     nextPage: "\u0E2B\u0E19\u0E49\u0E32\u0E16\u0E31\u0E14\u0E44\u0E1B",
     totals: "\u0E23\u0E27\u0E21",
@@ -371,6 +402,7 @@ var STRINGS = {
     timeOutOfRange: function(a, b) {
       return "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E27\u0E25\u0E32\u0E23\u0E30\u0E2B\u0E27\u0E48\u0E32\u0E07 " + a + "\u2013" + b + " \u0E19.";
     },
+    timeUnavailable: "\u0E40\u0E27\u0E25\u0E32\u0E19\u0E35\u0E49\u0E44\u0E21\u0E48\u0E27\u0E48\u0E32\u0E07 \u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E27\u0E25\u0E32\u0E2D\u0E37\u0E48\u0E19",
     dropFiles: "\u0E25\u0E32\u0E01\u0E44\u0E1F\u0E25\u0E4C\u0E21\u0E32\u0E27\u0E32\u0E07 \u0E2B\u0E23\u0E37\u0E2D",
     browse: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E44\u0E1F\u0E25\u0E4C",
     browseOne: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E44\u0E1F\u0E25\u0E4C",
@@ -472,6 +504,12 @@ var STRINGS = {
     page: function(p, total) {
       return "Sida " + p + " av " + total;
     },
+    rangeOpen: function(a, b) {
+      return a + "\u2013" + b + " av m\xE5nga";
+    },
+    pageOpen: function(p) {
+      return "Sida " + p;
+    },
     prevPage: "F\xF6reg\xE5ende sida",
     nextPage: "N\xE4sta sida",
     totals: "Summa",
@@ -485,6 +523,7 @@ var STRINGS = {
     timeOutOfRange: function(a, b) {
       return "V\xE4lj en tid mellan " + a + " och " + b;
     },
+    timeUnavailable: "Den tiden \xE4r inte ledig. V\xE4lj en annan.",
     dropFiles: "Dra filer hit eller",
     browse: "V\xE4lj filer",
     browseOne: "V\xE4lj en fil",

package/dist/server/index.d.cts

@@ -42,6 +42,7 @@ export type FormatDateOptions = DateDisplayOptions & {
 	format?: "short" | "long" | "numeric" | Intl.DateTimeFormatOptions | undefined;
 };
 export declare function toISO(d: Date | null | undefined): ISODate | null;
+/** ISO → local Date; null for text that isn't a real date ("2026-02-31" no longer rolls over into March, 5.2). */
 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
@@ -106,6 +107,9 @@ export interface AuraStrings {
 	loadingRows: string;
 	range: (a: number | string, b: number | string, total: number) => string;
 	page: (p: number, total: number) => string;
+	/** Server paging without totalRows (5.2): the range and page when the total isn't known. */
+	rangeOpen: (a: number | string, b: number | string) => string;
+	pageOpen: (p: number) => string;
 	prevPage: string;
 	nextPage: string;
 	rowCount: (c: number) => string;
@@ -115,6 +119,8 @@ export interface AuraStrings {
 	timePlaceholder: string;
 	timeInvalid: string;
 	timeOutOfRange: (a: number | string, b: number | string) => string;
+	/** A time inside the range that isTimeDisabled refuses (5.2). */
+	timeUnavailable: string;
 	dropFiles: string;
 	browse: string;
 	browseOne: string;

package/dist/server/index.d.ts

@@ -42,6 +42,7 @@ export type FormatDateOptions = DateDisplayOptions & {
 	format?: "short" | "long" | "numeric" | Intl.DateTimeFormatOptions | undefined;
 };
 export declare function toISO(d: Date | null | undefined): ISODate | null;
+/** ISO → local Date; null for text that isn't a real date ("2026-02-31" no longer rolls over into March, 5.2). */
 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
@@ -106,6 +107,9 @@ export interface AuraStrings {
 	loadingRows: string;
 	range: (a: number | string, b: number | string, total: number) => string;
 	page: (p: number, total: number) => string;
+	/** Server paging without totalRows (5.2): the range and page when the total isn't known. */
+	rangeOpen: (a: number | string, b: number | string) => string;
+	pageOpen: (p: number) => string;
 	prevPage: string;
 	nextPage: string;
 	rowCount: (c: number) => string;
@@ -115,6 +119,8 @@ export interface AuraStrings {
 	timePlaceholder: string;
 	timeInvalid: string;
 	timeOutOfRange: (a: number | string, b: number | string) => string;
+	/** A time inside the range that isTimeDisabled refuses (5.2). */
+	timeUnavailable: string;
 	dropFiles: string;
 	browse: string;
 	browseOne: string;

package/dist/server/index.js

@@ -4,12 +4,21 @@ var pad = function(n2) {
   return (n2 < 10 ? "0" : "") + n2;
 };
 function toISO(d) {
-  return d ? d.getFullYear() + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate()) : null;
+  if (!d) return null;
+  const y = String(d.getFullYear());
+  return ("000" + y).slice(-Math.max(4, y.length)) + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate());
+}
+function makeDate(y, monthIndex2, day) {
+  const d = new Date(2e3, 0, 1);
+  d.setFullYear(y, monthIndex2, day);
+  return d;
 }
 function fromISO(s) {
   if (!s) return null;
   const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
-  return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null;
+  if (!m) return null;
+  const d = makeDate(+m[1], +m[2] - 1, +m[3]);
+  return d.getMonth() === +m[2] - 1 && d.getDate() === +m[3] ? d : null;
 }
 var TAGS = { th: "th-TH", en: "en-GB", sv: "sv-SE" };
 function defaultCalendar(locale) {
@@ -55,7 +64,15 @@ function monthIndex(word) {
   return MONTHS[k] != null ? MONTHS[k] : -1;
 }
 function parseDate(text) {
-  const s = String(text || "").trim();
+  const raw = String(text || "").trim();
+  const gregorian = /ค\.ศ\.|\d\s*(AD|CE)\b|^\s*(AD|CE)\s/i.test(raw);
+  let s = raw.replace(/พ\.ศ\.|ค\.ศ\./g, " ").replace(/(\d)\s*(BE|AD|CE)\b/gi, "$1 ").replace(/^\s*(BE|AD|CE)\s+/i, " ").replace(/\s+/g, " ").trim();
+  const eight = /^(\d{2})(\d{2})(\d{4})$/.exec(s);
+  if (eight) {
+    const a = +eight[3] >= 1e3 ? parseDate(eight[1] + "/" + eight[2] + "/" + eight[3] + (gregorian ? " \u0E04.\u0E28." : "")) : null;
+    if (a) return a;
+    s = s.slice(0, 4) + "-" + s.slice(4, 6) + "-" + s.slice(6);
+  }
   let m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(s), y, mo, d;
   if (m) {
     y = +m[1];
@@ -65,13 +82,13 @@ function parseDate(text) {
     d = +m[1];
     mo = +m[2];
     y = +m[3];
-  } else if ((m = /^(\d{1,2})\s+(\S+)\s+(\d{4})$/.exec(s.replace(ERA, "").trim())) && monthIndex(m[2]) >= 0) {
+  } else if ((m = /^(\d{1,2})\s+(\S+)\s+(\d{4})$/.exec(s)) && monthIndex(m[2]) >= 0) {
     d = +m[1];
     mo = monthIndex(m[2]) + 1;
     y = +m[3];
   } else return null;
-  if (y >= 2400) y -= 543;
-  const dt = new Date(y, mo - 1, d);
+  if (y >= 2400 && !gregorian) y -= 543;
+  const dt = makeDate(y, mo - 1, d);
   return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
 }
 function todayIn(timeZone) {
@@ -110,6 +127,7 @@ function parseTime(text) {
   const m = /^(\d{1,2})(?:[:.](\d{2}))?$/.exec(s) || /^(\d{1,2})(\d{2})$/.exec(s);
   if (!m) return null;
   let hh = +m[1], mm = m[2] ? +m[2] : 0;
+  if ((am || pm) && (hh < 1 || hh > 12)) return null;
   if (pm && hh < 12) hh += 12;
   if (am && hh === 12) hh = 0;
   if (hh > 23 || mm > 59) return null;
@@ -205,6 +223,12 @@ var STRINGS = {
     page: function(p, total) {
       return "Page " + p + " of " + total;
     },
+    rangeOpen: function(a, b) {
+      return a + "\u2013" + b + " of many";
+    },
+    pageOpen: function(p) {
+      return "Page " + p;
+    },
     prevPage: "Previous page",
     nextPage: "Next page",
     totals: "Totals",
@@ -218,6 +242,7 @@ var STRINGS = {
     timeOutOfRange: function(a, b) {
       return "Choose a time between " + a + " and " + b;
     },
+    timeUnavailable: "That time isn't available. Choose another.",
     dropFiles: "Drag files here or",
     browse: "Choose files",
     browseOne: "Choose a file",
@@ -319,6 +344,12 @@ var STRINGS = {
     page: function(p, total) {
       return "\u0E2B\u0E19\u0E49\u0E32 " + p + " / " + total;
     },
+    rangeOpen: function(a, b) {
+      return a + "\u2013" + b + " \u0E08\u0E32\u0E01\u0E2B\u0E25\u0E32\u0E22\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
+    },
+    pageOpen: function(p) {
+      return "\u0E2B\u0E19\u0E49\u0E32 " + p;
+    },
     prevPage: "\u0E2B\u0E19\u0E49\u0E32\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32",
     nextPage: "\u0E2B\u0E19\u0E49\u0E32\u0E16\u0E31\u0E14\u0E44\u0E1B",
     totals: "\u0E23\u0E27\u0E21",
@@ -332,6 +363,7 @@ var STRINGS = {
     timeOutOfRange: function(a, b) {
       return "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E27\u0E25\u0E32\u0E23\u0E30\u0E2B\u0E27\u0E48\u0E32\u0E07 " + a + "\u2013" + b + " \u0E19.";
     },
+    timeUnavailable: "\u0E40\u0E27\u0E25\u0E32\u0E19\u0E35\u0E49\u0E44\u0E21\u0E48\u0E27\u0E48\u0E32\u0E07 \u0E40\u0E25\u0E37\u0E2D\u0E01\u0E40\u0E27\u0E25\u0E32\u0E2D\u0E37\u0E48\u0E19",
     dropFiles: "\u0E25\u0E32\u0E01\u0E44\u0E1F\u0E25\u0E4C\u0E21\u0E32\u0E27\u0E32\u0E07 \u0E2B\u0E23\u0E37\u0E2D",
     browse: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E44\u0E1F\u0E25\u0E4C",
     browseOne: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E44\u0E1F\u0E25\u0E4C",
@@ -433,6 +465,12 @@ var STRINGS = {
     page: function(p, total) {
       return "Sida " + p + " av " + total;
     },
+    rangeOpen: function(a, b) {
+      return a + "\u2013" + b + " av m\xE5nga";
+    },
+    pageOpen: function(p) {
+      return "Sida " + p;
+    },
     prevPage: "F\xF6reg\xE5ende sida",
     nextPage: "N\xE4sta sida",
     totals: "Summa",
@@ -446,6 +484,7 @@ var STRINGS = {
     timeOutOfRange: function(a, b) {
       return "V\xE4lj en tid mellan " + a + " och " + b;
     },
+    timeUnavailable: "Den tiden \xE4r inte ledig. V\xE4lj en annan.",
     dropFiles: "Dra filer hit eller",
     browse: "V\xE4lj filer",
     browseOne: "V\xE4lj en fil",

package/dist/styles.css

@@ -424,7 +424,16 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-select .aura-input__control { padding-right: calc(var(--aura-space-3) + var(--aura-icon-sm) + var(--aura-space-2)); cursor: pointer; }
 .aura-select__chevron { position: absolute; right: var(--aura-space-3); color: var(--aura-fg-secondary); pointer-events: none; }
 .aura-select select:invalid, .aura-select select:has(option[value=""]:checked) { color: var(--aura-fg-tertiary); }
+/* 5.3: the field is a button over an invisible <select> (forms, refs, events); the list is AURA's, like Combobox. */
 .aura-select option { color: var(--aura-fg-primary); background: var(--aura-bg-input); }
+.aura-select--custom { position: relative; }
+.aura-select__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; appearance: none; }
+.aura-select__trigger { display: flex; align-items: center; text-align: start; background: none; border: 0; color: inherit; font: inherit; width: 100%; min-width: 0; }
+.aura-select__trigger:disabled { cursor: not-allowed; }
+.aura-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.aura-select__value.is-placeholder { color: var(--aura-fg-tertiary); }
+.aura-select__group { 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-tertiary); }
+.aura-select.is-open .aura-select__chevron { transform: rotate(180deg); }
 
 .aura-radio-group > legend { margin-bottom: 6px; }
 .aura-radio-group__list { display: flex; flex-direction: column; gap: var(--aura-space-3); }
@@ -679,6 +688,8 @@ a.aura-tab { text-decoration: none; }
 .aura-avatar__status {
   position: absolute; right: -1px; bottom: -1px; width: 30%; height: 30%; min-width: 8px; min-height: 8px;
   border-radius: var(--aura-radius-full); background: var(--aura-accent-dot); box-shadow: 0 0 0 2px var(--aura-bg-surface);
+  /* 5.2: the lime fill is 1.2:1 on the white ring; the edge carries the 3:1 (WCAG 1.4.11). */
+  border: 1.5px solid var(--aura-fg-positive); box-sizing: border-box;
 }
 
 /* ---------- Combobox ---------- */
@@ -921,6 +932,8 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-upload__thumb.is-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--aura-fg-secondary); }
 .aura-upload__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
 .aura-upload__name { font-size: 13px; font-weight: 500; color: var(--aura-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+a.aura-upload__name { color: var(--aura-fg-accent); text-decoration: underline; text-underline-offset: 2px; border-radius: var(--aura-radius-xs); }
+a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
 .aura-upload__sub { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--aura-fg-secondary); }
 .aura-upload__item.is-error .aura-upload__sub { color: var(--aura-fg-danger); }
 .aura-upload__bar { display: block; height: 4px; border-radius: var(--aura-radius-full); background: var(--aura-progress-track); box-shadow: inset 0 0 0 1px var(--aura-progress-track-edge); overflow: hidden; }
@@ -1042,8 +1055,9 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
   position: fixed; z-index: var(--aura-z-menu); box-sizing: border-box; width: max-content; min-width: 200px; max-width: min(360px, calc(100vw - 16px));
   background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg);
   box-shadow: var(--aura-shadow-overlay); font-family: var(--font-sans); font-size: 14px; outline: none; animation: aura-fade-in var(--aura-duration-fast) var(--aura-ease);
+  overflow-y: auto; overscroll-behavior: contain;
 }
-.aura-popover__head { display: flex; align-items: center; justify-content: space-between; gap: var(--aura-space-2); padding: var(--aura-space-2) var(--aura-space-2) 0 var(--aura-space-4); }
+.aura-popover__head { display: flex; align-items: center; justify-content: space-between; gap: var(--aura-space-2); padding: var(--aura-space-2) var(--aura-space-2) 0 var(--aura-space-4); position: sticky; top: 0; z-index: 1; background: var(--aura-bg-surface); } /* 5.2: stays while a tall popover scrolls */
 .aura-popover__title { margin: 0; font-size: 14px; font-weight: 600; }
 .aura-popover__body { padding: var(--aura-space-4); }
 .aura-popover__head + .aura-popover__body { padding-top: var(--aura-space-2); }
@@ -1143,7 +1157,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-segmented.is-full .aura-segmented__option { flex: 1 1 0; min-width: 0; }
 .aura-segmented__option.is-icon { padding: 0; width: 36px; }
 .aura-segmented__option:hover:not(:disabled):not(.is-selected) { color: var(--aura-fg-primary); }
-.aura-segmented__option.is-selected { background: var(--aura-bg-surface); color: var(--aura-fg-primary); box-shadow: var(--aura-shadow-enterprise); }
+.aura-segmented__option.is-selected { background: var(--aura-bg-surface); color: var(--aura-fg-primary); box-shadow: inset 0 0 0 1px var(--aura-border-control), var(--aura-shadow-enterprise); } /* 5.2: the edge marks the choice at 3:1; the fill alone was 1.04:1 on the track */
 .aura-segmented__option:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; }
 .aura-segmented__option:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 .aura-segmented--sm .aura-segmented__option { height: 24px; padding: 0 var(--aura-space-3); font-size: 12px; }

package/dist/styles.layer.css

@@ -426,7 +426,16 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-select .aura-input__control { padding-right: calc(var(--aura-space-3) + var(--aura-icon-sm) + var(--aura-space-2)); cursor: pointer; }
 .aura-select__chevron { position: absolute; right: var(--aura-space-3); color: var(--aura-fg-secondary); pointer-events: none; }
 .aura-select select:invalid, .aura-select select:has(option[value=""]:checked) { color: var(--aura-fg-tertiary); }
+/* 5.3: the field is a button over an invisible <select> (forms, refs, events); the list is AURA's, like Combobox. */
 .aura-select option { color: var(--aura-fg-primary); background: var(--aura-bg-input); }
+.aura-select--custom { position: relative; }
+.aura-select__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; appearance: none; }
+.aura-select__trigger { display: flex; align-items: center; text-align: start; background: none; border: 0; color: inherit; font: inherit; width: 100%; min-width: 0; }
+.aura-select__trigger:disabled { cursor: not-allowed; }
+.aura-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.aura-select__value.is-placeholder { color: var(--aura-fg-tertiary); }
+.aura-select__group { 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-tertiary); }
+.aura-select.is-open .aura-select__chevron { transform: rotate(180deg); }
 
 .aura-radio-group > legend { margin-bottom: 6px; }
 .aura-radio-group__list { display: flex; flex-direction: column; gap: var(--aura-space-3); }
@@ -681,6 +690,8 @@ a.aura-tab { text-decoration: none; }
 .aura-avatar__status {
   position: absolute; right: -1px; bottom: -1px; width: 30%; height: 30%; min-width: 8px; min-height: 8px;
   border-radius: var(--aura-radius-full); background: var(--aura-accent-dot); box-shadow: 0 0 0 2px var(--aura-bg-surface);
+  /* 5.2: the lime fill is 1.2:1 on the white ring; the edge carries the 3:1 (WCAG 1.4.11). */
+  border: 1.5px solid var(--aura-fg-positive); box-sizing: border-box;
 }
 
 /* ---------- Combobox ---------- */
@@ -923,6 +934,8 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-upload__thumb.is-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--aura-fg-secondary); }
 .aura-upload__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
 .aura-upload__name { font-size: 13px; font-weight: 500; color: var(--aura-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+a.aura-upload__name { color: var(--aura-fg-accent); text-decoration: underline; text-underline-offset: 2px; border-radius: var(--aura-radius-xs); }
+a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
 .aura-upload__sub { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--aura-fg-secondary); }
 .aura-upload__item.is-error .aura-upload__sub { color: var(--aura-fg-danger); }
 .aura-upload__bar { display: block; height: 4px; border-radius: var(--aura-radius-full); background: var(--aura-progress-track); box-shadow: inset 0 0 0 1px var(--aura-progress-track-edge); overflow: hidden; }
@@ -1044,8 +1057,9 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
   position: fixed; z-index: var(--aura-z-menu); box-sizing: border-box; width: max-content; min-width: 200px; max-width: min(360px, calc(100vw - 16px));
   background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg);
   box-shadow: var(--aura-shadow-overlay); font-family: var(--font-sans); font-size: 14px; outline: none; animation: aura-fade-in var(--aura-duration-fast) var(--aura-ease);
+  overflow-y: auto; overscroll-behavior: contain;
 }
-.aura-popover__head { display: flex; align-items: center; justify-content: space-between; gap: var(--aura-space-2); padding: var(--aura-space-2) var(--aura-space-2) 0 var(--aura-space-4); }
+.aura-popover__head { display: flex; align-items: center; justify-content: space-between; gap: var(--aura-space-2); padding: var(--aura-space-2) var(--aura-space-2) 0 var(--aura-space-4); position: sticky; top: 0; z-index: 1; background: var(--aura-bg-surface); } /* 5.2: stays while a tall popover scrolls */
 .aura-popover__title { margin: 0; font-size: 14px; font-weight: 600; }
 .aura-popover__body { padding: var(--aura-space-4); }
 .aura-popover__head + .aura-popover__body { padding-top: var(--aura-space-2); }
@@ -1145,7 +1159,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-segmented.is-full .aura-segmented__option { flex: 1 1 0; min-width: 0; }
 .aura-segmented__option.is-icon { padding: 0; width: 36px; }
 .aura-segmented__option:hover:not(:disabled):not(.is-selected) { color: var(--aura-fg-primary); }
-.aura-segmented__option.is-selected { background: var(--aura-bg-surface); color: var(--aura-fg-primary); box-shadow: var(--aura-shadow-enterprise); }
+.aura-segmented__option.is-selected { background: var(--aura-bg-surface); color: var(--aura-fg-primary); box-shadow: inset 0 0 0 1px var(--aura-border-control), var(--aura-shadow-enterprise); } /* 5.2: the edge marks the choice at 3:1; the fill alone was 1.04:1 on the track */
 .aura-segmented__option:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; }
 .aura-segmented__option:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
 .aura-segmented--sm .aura-segmented__option { height: 24px; padding: 0 var(--aura-space-3); font-size: 12px; }

package/package.json

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

package/scripts/aura-theme.mjs

@@ -5,17 +5,42 @@
 import fs from 'node:fs';
 import { createTheme } from '../dist/esm/theme.js';
 
+const USAGE = 'Usage: aura-theme --brand "#0ea5e9" [--signal "#facc15"] [--primary ink|brand] [--name acme] [--selector .tenant] [--out theme.css]';
+const KNOWN = ['brand', 'signal', 'primary', 'name', 'selector', 'out', 'help'];
+function fail(msg) {
+  console.error('aura-theme: ' + msg + '\n' + USAGE);
+  process.exit(2);
+}
+/* --key value and --key=value (5.2); a value-taking option with no value is an error, not `true`. */
 const args = {};
 for (let i = 2; i < process.argv.length; i++) {
   const a = process.argv[i];
-  if (a.startsWith('--')) { const k = a.slice(2); const v = process.argv[i + 1] && !process.argv[i + 1].startsWith('--') ? process.argv[++i] : true; args[k] = v; }
+  if (!a.startsWith('--')) fail('unexpected "' + a + '"');
+  const eq = a.indexOf('=');
+  const k = eq > 0 ? a.slice(2, eq) : a.slice(2);
+  if (KNOWN.indexOf(k) < 0) fail('unknown option --' + k);
+  if (k === 'help') { args.help = true; continue; }
+  const v = eq > 0 ? a.slice(eq + 1) : process.argv[i + 1] !== undefined && !process.argv[i + 1].startsWith('--') ? process.argv[++i] : undefined;
+  if (v === undefined || v === '') fail('--' + k + ' needs a value');
+  args[k] = v;
+}
+if (args.help) {
+  console.log(USAGE);
+  process.exit(0);
+}
+if (!args.brand) fail('--brand is required');
+for (const k of ['brand', 'signal']) {
+  if (args[k] !== undefined && /^(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(args[k])) args[k] = '#' + args[k]; /* a shell ate the # */
+  if (args[k] !== undefined && !/^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(args[k])) fail('--' + k + ' must be a #rgb or #rrggbb colour (got "' + args[k] + '"; quote it in the shell: --' + k + ' "#0ea5e9")');
 }
-if (!args.brand || args.help) {
-  console.log('Usage: aura-theme --brand "#0ea5e9" [--signal "#facc15"] [--primary ink|brand] [--name acme] [--selector .tenant] [--out theme.css]');
-  process.exit(args.help ? 0 : 1);
+if (args.primary !== undefined && args.primary !== 'ink' && args.primary !== 'brand') fail('--primary is ink or brand');
+let t, css;
+try {
+  t = createTheme({ brand: args.brand, signal: args.signal, primary: args.primary, name: args.name });
+  css = t.css(args.selector);
+} catch (e) {
+  fail(e.message);
 }
-const t = createTheme({ brand: args.brand, signal: args.signal, primary: args.primary, name: args.name });
-const css = t.css(args.selector);
 if (args.out) fs.writeFileSync(args.out, css); else process.stdout.write(css);
 const log = args.out ? console.log : console.error;
 log(`\nContrast checks (${t.checks.filter((c) => c.pass).length}/${t.checks.length} pass):`);