@jirawatpyk/aura-tokens 4.10.0 → 4.12.0

package/aura-tailwind.css

@@ -1,4 +1,4 @@
-/* AURA v4.10.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand.
+/* AURA v4.12.0 — Tailwind v4 theme. GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand.
  *   @import "tailwindcss";
  *   @import "@jirawatpyk/aura-tokens/tailwind.css";
  * Gives bg-bg-surface, text-fg-primary, border-border-strong, p-aura-6, rounded-aura-xl, shadow-aura-overlay,

package/aura.css

@@ -1,4 +1,4 @@
-/* AURA v4.10.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
+/* AURA v4.12.0 — GENERATED by scripts/build-tokens.js from tokens.json. Do not edit by hand. */
 /* Fonts: load aura-fonts.css (or the <link> tags in README) separately, so a blocked Google Fonts never breaks this file. */
 
 :root, [data-theme="light"] {
@@ -122,6 +122,8 @@
   --aura-button-creative-bg: var(--aura-white);
   --aura-button-creative-border: var(--aura-zinc-900);
   --aura-card-border: var(--aura-zinc-200);
+  --aura-progress-track: var(--aura-bg-skeleton);
+  --aura-progress-track-edge: var(--aura-button-secondary-border);
   --aura-shadow-enterprise: 0 1px 2px rgba(0,0,0,0.05);
   --aura-shadow-overlay: 0 16px 48px rgba(8,8,10,0.16), 0 2px 8px rgba(8,8,10,0.08);
   --aura-shadow-creative: 4px 4px 0px #18181b;
@@ -148,6 +150,10 @@
   --aura-focus-ring: var(--aura-violet-400);
   --aura-status-neutral-bg: var(--aura-zinc-800);
   --aura-status-neutral-fg: var(--aura-zinc-300);
+  --aura-status-progress-bg: #2f2647;
+  --aura-status-progress-fg: var(--aura-violet-300);
+  --aura-status-ready-bg: #2b351f;
+  --aura-status-ready-fg: var(--aura-lime-300);
   --aura-bg-selected: #2c283a;
   --aura-border-control: var(--aura-zinc-400);
   --aura-bg-skeleton: var(--aura-zinc-700);
@@ -213,6 +219,10 @@
     --aura-focus-ring: var(--aura-violet-400);
     --aura-status-neutral-bg: var(--aura-zinc-800);
     --aura-status-neutral-fg: var(--aura-zinc-300);
+    --aura-status-progress-bg: #2f2647;
+    --aura-status-progress-fg: var(--aura-violet-300);
+    --aura-status-ready-bg: #2b351f;
+    --aura-status-ready-fg: var(--aura-lime-300);
     --aura-bg-selected: #2c283a;
     --aura-border-control: var(--aura-zinc-400);
     --aura-bg-skeleton: var(--aura-zinc-700);
@@ -308,6 +318,8 @@
   --aura-container-narrow: 720px;
   --aura-cal-cell: 36px;
   --aura-popover-max-height: 320px;
+  --aura-input-font-size: 14px;
+  --aura-touch-target: 44px;
   --aura-bp-sm: 640px;
   --aura-bp-md: 768px;
   --aura-bp-lg: 1024px;

package/components/aura.bundle.js

@@ -119,6 +119,7 @@ window.Aura = (() => {
     useAuraLocale: () => useAuraLocale,
     useBreakpoint: () => useBreakpoint,
     useColorScheme: () => useColorScheme,
+    useFormatDate: () => useFormatDate,
     useResponsive: () => useResponsive
   });
 
@@ -602,7 +603,8 @@ window.Aura = (() => {
       "iconRight",
       "disabled",
       "linkComponent",
-      "href"
+      "href",
+      "fullWidth"
     ]);
     const Tag3 = disabled ? "a" : Link;
     return /* @__PURE__ */ React4.createElement(
@@ -614,7 +616,7 @@ window.Aura = (() => {
         role: disabled ? "link" : void 0,
         "aria-disabled": disabled || void 0,
         tabIndex: disabled ? -1 : props.tabIndex,
-        className: cx("aura-btn", "aura-btn--" + variant, props.className),
+        className: cx("aura-btn", "aura-btn--" + variant, props.fullWidth && "aura-btn--full", props.className),
         onClick: disabled ? void 0 : props.onClick
       },
       props.icon ? /* @__PURE__ */ React4.createElement(Icon, { name: props.icon }) : null,
@@ -631,14 +633,30 @@ window.Aura = (() => {
       const props = all;
       const variant = props.variant || "primary";
       const loading = !!props.loading;
-      const rest = omit(props, ["variant", "className", "children", "type", "icon", "iconRight", "loading", "onClick"]);
+      const rest = omit(props, [
+        "variant",
+        "className",
+        "children",
+        "type",
+        "icon",
+        "iconRight",
+        "loading",
+        "onClick",
+        "fullWidth"
+      ]);
       return /* @__PURE__ */ React4.createElement(
         "button",
         {
           ...rest,
           ref,
           type: props.type || "button",
-          className: cx("aura-btn", "aura-btn--" + variant, loading && "is-loading", props.className),
+          className: cx(
+            "aura-btn",
+            "aura-btn--" + variant,
+            props.fullWidth && "aura-btn--full",
+            loading && "is-loading",
+            props.className
+          ),
           "aria-busy": loading || void 0,
           "aria-disabled": loading || void 0,
           onClick: loading ? function(e) {
@@ -1081,25 +1099,37 @@ window.Aura = (() => {
     const auto = uid(), id = props.id || auto;
     const st = useMaybeControlled(props.checked, !!props.defaultChecked, props.onChange);
     const on = !!st[0];
-    return /* @__PURE__ */ React15.createElement("div", { className: cx("aura-switch-row", props.disabled && "is-disabled", props.className) }, /* @__PURE__ */ React15.createElement(
-      "button",
+    return /* @__PURE__ */ React15.createElement(
+      "div",
       {
-        ref,
-        type: "button",
-        role: "switch",
-        id,
-        "aria-checked": on,
-        disabled: props.disabled,
-        "aria-labelledby": props.label ? id + "-label" : void 0,
-        "aria-label": props.label ? void 0 : props["aria-label"],
-        "aria-describedby": props.description ? id + "-desc" : void 0,
-        className: cx("aura-switch", on && "is-on"),
-        onClick: function() {
+        className: cx("aura-switch-row", props.disabled && "is-disabled", props.className),
+        onClick: function(e) {
+          const t = e.target;
+          if (props.disabled || t.closest("button, label, a, input")) return;
           st[1](!on);
         }
       },
-      /* @__PURE__ */ React15.createElement("span", { className: "aura-switch__thumb" })
-    ), props.label ? /* @__PURE__ */ React15.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React15.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React15.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : null);
+      /* @__PURE__ */ React15.createElement(
+        "button",
+        {
+          ref,
+          type: "button",
+          role: "switch",
+          id,
+          "aria-checked": on,
+          disabled: props.disabled,
+          "aria-labelledby": props.label ? id + "-label" : void 0,
+          "aria-label": props.label ? void 0 : props["aria-label"],
+          "aria-describedby": props.description ? id + "-desc" : void 0,
+          className: cx("aura-switch", on && "is-on"),
+          onClick: function() {
+            st[1](!on);
+          }
+        },
+        /* @__PURE__ */ React15.createElement("span", { className: "aura-switch__thumb" })
+      ),
+      props.label ? /* @__PURE__ */ React15.createElement("span", { className: "aura-choice__text" }, /* @__PURE__ */ React15.createElement("label", { className: "aura-choice__label", id: id + "-label", htmlFor: id }, props.label), props.description ? /* @__PURE__ */ React15.createElement("span", { className: "aura-choice__desc", id: id + "-desc" }, props.description) : null) : null
+    );
   });
 
   // src/Combobox.tsx
@@ -1473,11 +1503,11 @@ window.Aura = (() => {
   }
   var TAGS = { th: "th-TH", en: "en-GB", sv: "sv-SE" };
   function defaultCalendar(locale) {
-    return locale === "sv" ? "gregory" : "buddhist";
+    return locale === "th" ? "buddhist" : "gregory";
   }
   function localeTag(locale, calendar) {
     const cal = calendar || defaultCalendar(locale);
-    return (TAGS[locale || "th"] || "th-TH") + "-u-ca-" + (cal === "gregory" ? "gregory" : "buddhist");
+    return (TAGS[locale || "en"] || "en-GB") + "-u-ca-" + (cal === "gregory" ? "gregory" : "buddhist");
   }
   var DATE_TEXT = {
     th: {
@@ -1505,11 +1535,11 @@ window.Aura = (() => {
       today: "Today",
       clear: "Clear",
       chooseDate: "Choose date",
-      datePlaceholder: "dd/mm/yyyy",
+      datePlaceholder: "DD/MM/YYYY",
       clearDate: "Clear date",
       openCalendar: "Open calendar",
       chooseDates: "Choose dates",
-      rangePlaceholder: "dd/mm/yyyy \u2013 dd/mm/yyyy",
+      rangePlaceholder: "DD/MM/YYYY \u2013 DD/MM/YYYY",
       clearDates: "Clear dates",
       chooseStart: "Choose the start date",
       chooseEnd: "Choose the end date"
@@ -1533,7 +1563,7 @@ window.Aura = (() => {
     }
   };
   function dateText(locale) {
-    return DATE_TEXT[locale || "th"] || DATE_TEXT.th;
+    return DATE_TEXT[locale || "en"] || DATE_TEXT.en;
   }
   var fmtCache = {};
   var PRESETS = {
@@ -1550,7 +1580,24 @@ window.Aura = (() => {
     const o = opts || {}, d = fromISO(iso);
     if (!d) return "";
     const f = typeof o.format === "object" ? o.format : PRESETS[o.format || "short"];
-    return fmt(localeTag(o.locale, o.calendar), f, d).replace(ERA, "");
+    const loc = o.locale || "th";
+    return fmt(localeTag(loc, o.calendar || defaultCalendar(loc)), f, d).replace(ERA, "");
+  }
+  function useFormatDate() {
+    const ctx = useAuraLocale(), locale = ctx.locale || "en", calendar = ctx.calendar;
+    return React17.useCallback(
+      function(iso, opts) {
+        const o = opts || {}, loc = o.locale || locale;
+        return formatDate(
+          iso,
+          Object.assign({}, o, {
+            locale: loc,
+            calendar: o.calendar || (o.locale ? void 0 : calendar) || defaultCalendar(loc)
+          })
+        );
+      },
+      [locale, calendar]
+    );
   }
   var MONTHS = null;
   function monthIndex(word) {
@@ -1590,7 +1637,7 @@ window.Aura = (() => {
     return dt.getMonth() === mo - 1 && dt.getDate() === d ? toISO(dt) : null;
   }
   var Calendar = React17.forwardRef(function Calendar2(props, ref) {
-    const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
+    const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), tag = localeTag(locale, calendar);
     const weekStart = props.weekStartsOn == null ? locale === "sv" ? 1 : 0 : props.weekStartsOn;
     let today = /* @__PURE__ */ new Date();
     today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
@@ -1775,6 +1822,7 @@ window.Aura = (() => {
                 tabIndex: same(d, focusDate) ? 0 : -1,
                 disabled: dis,
                 "aria-label": fmt(tag, { weekday: "long", day: "numeric", month: "long", year: "numeric" }, d),
+                suppressHydrationWarning: true,
                 "aria-current": same(d, today) ? "date" : void 0,
                 "aria-pressed": sel || void 0,
                 className: cx(
@@ -1933,7 +1981,7 @@ window.Aura = (() => {
   }
   var DatePicker = React17.forwardRef(function DatePicker2(props, ref) {
     const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
-    const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), dt = dateText(locale);
+    const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), dt = dateText(locale);
     const st = useMaybeControlled(
       props.value,
       props.defaultValue == null ? null : props.defaultValue,
@@ -2028,7 +2076,7 @@ window.Aura = (() => {
   var DateRangePicker = React17.forwardRef(
     function DateRangePicker2(props, ref) {
       const auto = uid(), id = props.id || auto, dialogId = id + "-cal";
-      const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "th", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), dt = dateText(locale);
+      const ctx = useAuraLocale(), locale = props.locale || ctx.locale || "en", calendar = props.calendar || ctx.calendar || defaultCalendar(locale), dt = dateText(locale);
       const st = useMaybeControlled(
         props.value,
         props.defaultValue || { start: null, end: null },
@@ -4666,8 +4714,8 @@ window.Aura = (() => {
     D["alert-info-bg"] = D["bg-selected"];
     D["alert-info-fg"] = fit(b[300], [D["alert-info-bg"]], 4.5, 1);
     D["alert-info-border"] = mix(ZINC[900], b[400], 0.4);
-    D["status-progress-bg"] = b[100];
-    D["status-progress-fg"] = L["status-progress-fg"];
+    D["status-progress-bg"] = mix(ZINC[900], b[500], 0.2);
+    D["status-progress-fg"] = fit(b[300], [D["status-progress-bg"]], 4.5, 1);
     if (s) {
       L["accent-dot"] = s[200];
       L["accent-lime"] = s[200];
@@ -4734,6 +4782,7 @@ window.Aura = (() => {
     check("light", "fg-primary", "bg-selected", 4.5, INK, L["bg-selected"]);
     check("dark", "fg-primary", "bg-selected", 4.5, "#ffffff", D["bg-selected"]);
     check("light", "status-progress-fg", "status-progress-bg", 4.5, L["status-progress-fg"], L["status-progress-bg"]);
+    check("dark", "status-progress-fg", "status-progress-bg", 4.5, D["status-progress-fg"], D["status-progress-bg"]);
     check("light", "alert-info-fg", "alert-info-bg", 4.5, L["alert-info-fg"], L["alert-info-bg"]);
     check("dark", "alert-info-fg", "alert-info-bg", 4.5, D["alert-info-fg"], D["alert-info-bg"]);
     if (o.primary === "brand") {

package/components/aura.components.css

@@ -28,6 +28,11 @@
 .aura-btn:active { transform: scale(0.98); }
 .aura-btn:disabled, a.aura-btn[aria-disabled='true'] { opacity: var(--aura-disabled-opacity); pointer-events: none; }
 a.aura-btn { text-decoration: none; }
+/* fullWidth: fills the row and wraps a long label (Thai and Swedish run ~30% longer) instead of overflowing. */
+.aura-btn--full {
+  width: 100%; height: auto; min-height: var(--aura-button-height); white-space: normal; flex-shrink: 1;
+  padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere;
+}
 .aura-btn.is-loading { cursor: progress; }
 .aura-btn.is-loading:active { transform: none; }
 
@@ -243,6 +248,11 @@ a.aura-btn { text-decoration: none; }
 .aura-icon-btn--danger:hover { background: var(--aura-alert-danger-bg); }
 .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
 .aura-icon-btn:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
+/* Touch: same 32px look, a 44px hit area around it (WCAG 2.5.5). */
+@media (pointer: coarse) {
+  .aura-icon-btn { position: relative; }
+  .aura-icon-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, var(--aura-touch-target)); height: max(100%, var(--aura-touch-target)); transform: translate(-50%, -50%); }
+}
 
 /* Skeleton */
 @keyframes aura-pulse { 50% { opacity: 0.6; } }
@@ -361,9 +371,11 @@ a.aura-btn { text-decoration: none; }
   min-height: var(--aura-input-height);
   background: var(--aura-bg-input); color: var(--aura-fg-primary);
   border: 1px solid var(--aura-border-control); border-radius: var(--aura-radius-md);
-  font-family: var(--font-sans); font-size: 14px;
+  font-family: var(--font-sans); font-size: var(--aura-input-font-size);
   transition: border-color var(--aura-duration-fast) var(--aura-ease);
 }
+/* Phones: iOS Safari zooms into any focused control under 16px and does not zoom back. */
+@media (max-width: 639.98px) { .aura-input { font-size: max(16px, var(--aura-input-font-size)); } }
 .aura-input:hover { border-color: var(--aura-fg-secondary); }
 .aura-input:focus-within { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-color: var(--aura-border-strong); }
 .aura-input__control {
@@ -859,7 +871,7 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-upload__name { font-size: 13px; font-weight: 500; color: var(--aura-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .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-bg-skeleton); overflow: hidden; }
+.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; }
 .aura-upload__bar > span { display: block; height: 100%; background: var(--aura-fg-accent); transition: width var(--aura-duration-base) var(--aura-ease); }
 
 /* ---------- Checkbox with a visible label ---------- */
@@ -908,7 +920,7 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
 .aura-progress__head { display: flex; justify-content: space-between; gap: var(--aura-space-2); font-size: 13px; }
 .aura-progress__label { font-weight: 500; color: var(--aura-fg-primary); }
 .aura-progress__value { color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; }
-.aura-progress__track { position: relative; height: 8px; border-radius: var(--aura-radius-full); background: var(--aura-bg-skeleton); overflow: hidden; }
+.aura-progress__track { position: relative; height: 8px; 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; }
 .aura-progress.is-sm .aura-progress__track { height: 4px; }
 .aura-progress__bar { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--aura-fg-accent); transition: width var(--aura-duration-base) var(--aura-ease); }
 .aura-progress--success .aura-progress__bar { background: var(--aura-fg-positive); }
@@ -1116,3 +1128,16 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tabs__list { gap: var(--aura-space-4); }
 }
 @keyframes aura-sheet-in { from { transform: translateY(24px); opacity: 0; } }
+
+/* Touch (pointer: coarse): Radio, Checkbox and Switch rows are at least 44px tall (WCAG 2.5.5), padded above and
+ * below a one-line 20px label; the whole row is the target (label rows natively, Switch rows by a click handler). */
+@media (pointer: coarse) {
+  .aura-choice, .aura-check--labelled, .aura-switch-row {
+    box-sizing: border-box; min-height: var(--aura-touch-target);
+    padding-block: calc((var(--aura-touch-target) - 20px) / 2);
+  }
+  .aura-check--labelled .aura-check__input { top: calc((var(--aura-touch-target) - 20px) / 2 + 3px); }
+  .aura-switch-row:not(.is-disabled) { cursor: pointer; }
+  .aura-radio-group__list { gap: 0; }
+  .aura-radio-group__list.is-horizontal { gap: 0 var(--aura-space-6); }
+}

package/components/index.d.ts

@@ -14,6 +14,8 @@ export interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElem
 	iconRight?: IconInput;
 	/** Shows a spinner in place of the leading icon, sets aria-busy and swallows clicks. Keeps the label and width. */
 	loading?: boolean;
+	/** Fills its container and lets a long label wrap onto more lines (at least 44px tall) — phones, Thai and Swedish labels. */
+	fullWidth?: boolean;
 }
 /** A link that looks like a Button: give `Button` an `href` and it renders an `<a>` (navigation, not actions). */
 export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
@@ -28,6 +30,8 @@ export interface ButtonLinkProps extends Omit<React$1.AnchorHTMLAttributes<HTMLA
 	iconRight?: IconInput;
 	/** Looks unavailable and can't be followed: no href, `aria-disabled`, out of the Tab order. */
 	disabled?: boolean;
+	/** Fills its container and lets a long label wrap (at least 44px tall). */
+	fullWidth?: boolean;
 	/** A router's link to render instead of `<a>`, e.g. `Link` from `next/link` (client-side navigation). It gets `href`, `className`, the children and the ref. */
 	linkComponent?: React$1.ElementType;
 }
@@ -174,9 +178,9 @@ export interface SurfaceProps extends React$1.HTMLAttributes<HTMLElement> {
 }
 /** Sets the language of built-in labels (pagination, close buttons, empty states…) and the default date display for everything inside. */
 export interface AuraProviderProps {
-	/** Built-in labels and date display. `sv` = Swedish labels, `sv-SE` dates, Monday weeks and the Gregorian calendar. Default `en` strings when there is no provider (dates still default to Thai / พ.ศ.). */
+	/** Built-in labels and date display. `sv` = Swedish labels, `sv-SE` dates, Monday weeks and the Gregorian calendar. Without a provider everything is English: labels, `en-GB` dates, Gregorian years. */
 	locale?: "th" | "en" | "sv";
-	/** Default calendar for DatePicker / DateRangePicker / Calendar / formatDate callers that read it. Unset: `buddhist` for `th` and `en` (unchanged), `gregory` for `sv`. */
+	/** Default calendar for DatePicker / DateRangePicker / Calendar / formatDate callers that read it. Unset: `buddhist` (พ.ศ.) for `th`, `gregory` for `en` and `sv`. */
 	calendar?: "buddhist" | "gregory";
 	/** Override individual strings. */
 	strings?: Partial<Record<string, string | ((...args: any[]) => string)>>;
@@ -580,9 +584,9 @@ export interface SegmentedControlProps {
 /** ISO date string, `YYYY-MM-DD` (Gregorian — the era is display only). */
 export type ISODate = string;
 export interface DateDisplayOptions {
-	/** `th` (default), `en` or `sv`. */
+	/** Components: the AuraProvider's locale, else `en`. `formatDate()` (no provider to read): `th` unless given. */
 	locale?: "th" | "en" | "sv";
-	/** `buddhist` (พ.ศ.; default for th and en) or `gregory` (ค.ศ.; default for sv). */
+	/** `buddhist` (พ.ศ.; default for th) or `gregory` (ค.ศ.; default for en and sv). */
 	calendar?: "buddhist" | "gregory";
 }
 export interface CalendarProps extends DateDisplayOptions {
@@ -962,10 +966,13 @@ export type FormatDateOptions = DateDisplayOptions & {
 };
 /** Format an ISO date for display, e.g. "18 ก.ย. 2569" (th, Buddhist) or "18 Sept 2026" (en, Gregorian). */
 export declare function formatDate(iso: ISODate | null | undefined, opts?: FormatDateOptions): string;
+/** formatDate bound to the nearest AuraProvider: its locale and calendar (English, Gregorian without one).
+ * Options you pass still win. Use it in components; plain formatDate() stays for code outside React. */
+export declare function useFormatDate(): (iso: ISODate | null | undefined, opts?: FormatDateOptions) => string;
 /** 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;
 export declare const Calendar: React$1.ForwardRefExoticComponent<CalendarProps & React$1.RefAttributes<HTMLDivElement>>;
-/** Typed date field + calendar popover. Shows Buddhist-era dates (18 ก.ย. 2569); accepts dd/mm/yyyy in พ.ศ. or ค.ศ. and yyyy-mm-dd. */
+/** Typed date field + calendar popover. English / Gregorian unless a locale is set; `th` shows Buddhist-era dates (18 ก.ย. 2569) and accepts พ.ศ. or ค.ศ. years. The value is always a Gregorian ISO date. */
 export declare const DatePicker: React$1.ForwardRefExoticComponent<DatePickerProps & React$1.RefAttributes<HTMLInputElement>>;
 export declare const DateRangePicker: React$1.ForwardRefExoticComponent<DateRangePickerProps & React$1.RefAttributes<HTMLInputElement>>;
 export declare const Alert: React$1.ForwardRefExoticComponent<AlertProps & React$1.RefAttributes<HTMLDivElement>>;

package/figma-variables.csv

@@ -67,10 +67,10 @@ semantic/on-texture,color,light,{primitive/ink},"Text and icons on a mesh or gra
 semantic/grain,color,light,{primitive/ink},"Grain speckle colour, drawn at aura-grain-opacity. Visible only on light grounds.",ALL_FILLS
 semantic/status-neutral-bg,color,light,{primitive/zinc/100},"Status pill fill for not-started / unknown states (To Do, Draft). Dark theme uses a quiet zinc-800 fill so it sits below the coloured states. ADDED.",ALL_FILLS
 semantic/status-neutral-fg,color,light,{primitive/zinc/700},"Label and icon on aura-status-neutral-bg (light 9.5:1, dark zinc-300 on zinc-800).",ALL_FILLS
-semantic/status-progress-bg,color,light,{primitive/violet/100},"Status pill fill for work under way (In Progress, In Review). ADDED.",ALL_FILLS
-semantic/status-progress-fg,color,light,{primitive/violet/800},Label and icon on aura-status-progress-bg (7.6:1).,ALL_FILLS
-semantic/status-ready-bg,color,light,{primitive/lime/200},"Status pill fill for finished / good states (Ready, Done). The source's lime pill. ADDED as a named token.",ALL_FILLS
-semantic/status-ready-fg,color,light,{primitive/ink},Label and icon on aura-status-ready-bg (15.2:1).,ALL_FILLS
+semantic/status-progress-bg,color,light,{primitive/violet/100},"Status pill fill for work under way (In Progress, In Review). Dark: a quiet violet-tinted fill (violet-500 at 20% over zinc-900) so the pill sits below the row text. ADDED; dark 4.11.",ALL_FILLS
+semantic/status-progress-fg,color,light,{primitive/violet/800},"Label and icon on aura-status-progress-bg (light 7.6:1; dark violet-300, 7.6:1).",ALL_FILLS
+semantic/status-ready-bg,color,light,{primitive/lime/200},"Status pill fill for finished / good states (Ready, Done). The source's lime pill. Dark: a lime-tinted fill (lime-400 at 14% over zinc-900). ADDED as a named token; dark 4.11.",ALL_FILLS
+semantic/status-ready-fg,color,light,{primitive/ink},"Label and icon on aura-status-ready-bg (light 15.2:1; dark lime-300, 9.9:1).",ALL_FILLS
 semantic/status-blocked-bg,color,light,{primitive/red/700},"Status pill fill for stopped / failed states (Blocked, Failed). Dark on purpose: 5.5:1 lighter-to-darker against the lime Ready fill, so Ready and Blocked differ by lightness, not only red vs green. ADDED.",ALL_FILLS
 semantic/status-blocked-fg,color,light,{primitive/white},Label and icon on aura-status-blocked-bg (6.5:1).,ALL_FILLS
 semantic/bg-selected,color,light,{primitive/violet/50},"Selected table rows and list items. Opaque so pinned columns can sit on it (dark = a 14% violet-400 wash over zinc-900, flattened). aura-fg-primary on it ≥14.2:1, aura-fg-secondary ≥5.5:1, focus ring ≥5.2:1 in both themes. ADDED.",FRAME_FILL
@@ -133,10 +133,10 @@ semantic/on-texture,color,dark,{primitive/ink},"Text and icons on a mesh or grai
 semantic/grain,color,dark,{primitive/ink},"Grain speckle colour, drawn at aura-grain-opacity. Visible only on light grounds.",ALL_FILLS
 semantic/status-neutral-bg,color,dark,{primitive/zinc/800},"Status pill fill for not-started / unknown states (To Do, Draft). Dark theme uses a quiet zinc-800 fill so it sits below the coloured states. ADDED.",ALL_FILLS
 semantic/status-neutral-fg,color,dark,{primitive/zinc/300},"Label and icon on aura-status-neutral-bg (light 9.5:1, dark zinc-300 on zinc-800).",ALL_FILLS
-semantic/status-progress-bg,color,dark,{primitive/violet/100},"Status pill fill for work under way (In Progress, In Review). ADDED.",ALL_FILLS
-semantic/status-progress-fg,color,dark,{primitive/violet/800},Label and icon on aura-status-progress-bg (7.6:1).,ALL_FILLS
-semantic/status-ready-bg,color,dark,{primitive/lime/200},"Status pill fill for finished / good states (Ready, Done). The source's lime pill. ADDED as a named token.",ALL_FILLS
-semantic/status-ready-fg,color,dark,{primitive/ink},Label and icon on aura-status-ready-bg (15.2:1).,ALL_FILLS
+semantic/status-progress-bg,color,dark,#2f2647,"Status pill fill for work under way (In Progress, In Review). Dark: a quiet violet-tinted fill (violet-500 at 20% over zinc-900) so the pill sits below the row text. ADDED; dark 4.11.",ALL_FILLS
+semantic/status-progress-fg,color,dark,{primitive/violet/300},"Label and icon on aura-status-progress-bg (light 7.6:1; dark violet-300, 7.6:1).",ALL_FILLS
+semantic/status-ready-bg,color,dark,#2b351f,"Status pill fill for finished / good states (Ready, Done). The source's lime pill. Dark: a lime-tinted fill (lime-400 at 14% over zinc-900). ADDED as a named token; dark 4.11.",ALL_FILLS
+semantic/status-ready-fg,color,dark,{primitive/lime/300},"Label and icon on aura-status-ready-bg (light 15.2:1; dark lime-300, 9.9:1).",ALL_FILLS
 semantic/status-blocked-bg,color,dark,{primitive/red/700},"Status pill fill for stopped / failed states (Blocked, Failed). Dark on purpose: 5.5:1 lighter-to-darker against the lime Ready fill, so Ready and Blocked differ by lightness, not only red vs green. ADDED.",ALL_FILLS
 semantic/status-blocked-fg,color,dark,{primitive/white},Label and icon on aura-status-blocked-bg (6.5:1).,ALL_FILLS
 semantic/bg-selected,color,dark,#2c283a,"Selected table rows and list items. Opaque so pinned columns can sit on it (dark = a 14% violet-400 wash over zinc-900, flattened). aura-fg-primary on it ≥14.2:1, aura-fg-secondary ≥5.5:1, focus ring ≥5.2:1 in both themes. ADDED.",FRAME_FILL
@@ -185,6 +185,8 @@ component/button-danger-fg,color,light,{primitive/white},Component: label on the
 component/button-creative-bg,color,light,{primitive/white},Component: Creative button fill (white in every theme). Label in aura-ink.,ALL_FILLS
 component/button-creative-border,color,light,{primitive/zinc/900},Component: Creative button 2px border.,ALL_FILLS
 component/card-border,color,light,{primitive/zinc/200},Component: card outline (light value; use aura-border-default where the card must follow theme).,ALL_FILLS
+component/progress-track,color,light,{semantic/bg-skeleton},Empty part of Progress and FileUpload bars (fill). Its edge carries the 3:1. ADDED 4.11.,ALL_FILLS
+component/progress-track-edge,color,light,{component/button-secondary-border},"1px inset edge of Progress / upload tracks: ≥3:1 on bg-surface and bg-canvas in both themes (WCAG 1.4.11), so the track reads without the fill. ADDED 4.11.",ALL_FILLS
 component/button-primary-bg,color,dark,{primitive/zinc/0},"Component: Enterprise (primary) button fill — ink in light, white in dark, as the Storybook story renders it (tokens.json pins it to the light value, which disappears on the dark surface).",ALL_FILLS
 component/button-primary-fg,color,dark,{primitive/zinc/900},Component: primary button label on aura-button-primary-bg (17.7:1 both themes).,ALL_FILLS
 component/button-primary-bg-hover,color,dark,{primitive/zinc/200},"Component: primary button hover. Light zinc-800 is the source value; dark zinc-200 is an ADDED value (the source has none — its zinc-800 hover hides the dark label at 1.19:1). Label 14.9:1 light, 14.0:1 dark.",ALL_FILLS
@@ -195,6 +197,8 @@ component/button-danger-fg,color,dark,{primitive/white},Component: label on the
 component/button-creative-bg,color,dark,{primitive/white},Component: Creative button fill (white in every theme). Label in aura-ink.,ALL_FILLS
 component/button-creative-border,color,dark,{primitive/zinc/900},Component: Creative button 2px border.,ALL_FILLS
 component/card-border,color,dark,{primitive/zinc/200},Component: card outline (light value; use aura-border-default where the card must follow theme).,ALL_FILLS
+component/progress-track,color,dark,{semantic/bg-skeleton},Empty part of Progress and FileUpload bars (fill). Its edge carries the 3:1. ADDED 4.11.,ALL_FILLS
+component/progress-track-edge,color,dark,{component/button-secondary-border},"1px inset edge of Progress / upload tracks: ≥3:1 on bg-surface and bg-canvas in both themes (WCAG 1.4.11), so the track reads without the fill. ADDED 4.11.",ALL_FILLS
 spacing/space-0,number,light,0,,GAP
 spacing/space-1,number,light,4,,GAP
 spacing/space-2,number,light,8,,GAP
@@ -243,3 +247,5 @@ size/container-max,number,light,1280,Container max width — matches aura-bp-xl.
 size/container-narrow,number,light,720,Narrow container for forms and reading. ADDED 4.2.,GAP
 size/cal-cell,number,light,36,Calendar day cell (DatePicker). 40px on touch screens via media query. ADDED 4.2.,GAP
 size/popover-max-height,number,light,320,Max height of Combobox listbox and DatePicker popover lists. ADDED 4.2.,GAP
+size/input-font-size,number,light,14,"Text size in inputs, textareas, selects and pickers. Phones (<640px) use at least 16px so iOS Safari does not zoom on focus. ADDED 4.11.",GAP
+size/touch-target,number,light,44,"Minimum hit area on touch screens (pointer: coarse): IconButton, and Radio / Checkbox / Switch rows (WCAG 2.5.5). ADDED 4.11.",GAP

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-tokens",
-  "version": "4.10.0",
+  "version": "4.12.0",
   "description": "AURA Design System — tokens (CSS variables, Tailwind preset, Figma variables), theme contrast checks and token lint.",
   "main": "tailwind.tokens.cjs",
   "types": "components/index.d.ts",

package/scripts/a11y-check.js

@@ -67,6 +67,9 @@ for (const bg of ['bg-surface', 'bg-canvas']) {
   pairs.push(['chart-axis', bg, TEXT]);
 }
 for (let i = 1; i < 8; i++) pairs.push([`chart-${i}`, `chart-${i + 1}`, NEIGHBOUR]);
+/* Progress / upload tracks: the edge shows the empty part at 3:1; the bar colours also clear 3:1 on the track fill. */
+for (const bg of ['bg-surface', 'bg-canvas']) pairs.push(['progress-track-edge', bg, UI]);
+for (const fg of ['fg-accent', 'fg-positive', 'fg-danger', 'fg-secondary']) pairs.push([fg, 'progress-track', UI]);
 
 const results = [], fails = [];
 for (const theme of ['light', 'dark']) for (const [fg, bg, min] of pairs) {

package/tokens.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.10.0",
+  "version": "4.12.0",
   "meta": {
     "name": "AURA Design System",
     "tier": "3-tier",
@@ -160,10 +160,10 @@
       "grain": "{primitive.ink}",
       "status-neutral-bg": "{primitive.zinc.800}",
       "status-neutral-fg": "{primitive.zinc.300}",
-      "status-progress-bg": "{primitive.violet.100}",
-      "status-progress-fg": "{primitive.violet.800}",
-      "status-ready-bg": "{primitive.lime.200}",
-      "status-ready-fg": "{primitive.ink}",
+      "status-progress-bg": "#2f2647",
+      "status-progress-fg": "{primitive.violet.300}",
+      "status-ready-bg": "#2b351f",
+      "status-ready-fg": "{primitive.lime.300}",
       "status-blocked-bg": "{primitive.red.700}",
       "status-blocked-fg": "{primitive.white}",
       "bg-selected": "#2c283a",
@@ -215,7 +215,9 @@
       "button-danger-fg": "{primitive.white}",
       "button-creative-bg": "{primitive.white}",
       "button-creative-border": "{primitive.zinc.900}",
-      "card-border": "{primitive.zinc.200}"
+      "card-border": "{primitive.zinc.200}",
+      "progress-track": "{semantic.bg-skeleton}",
+      "progress-track-edge": "{component.button-secondary-border}"
     },
     "dark": {
       "button-primary-bg": "{primitive.zinc.0}",
@@ -227,7 +229,9 @@
       "button-danger-fg": "{primitive.white}",
       "button-creative-bg": "{primitive.white}",
       "button-creative-border": "{primitive.zinc.900}",
-      "card-border": "{primitive.zinc.200}"
+      "card-border": "{primitive.zinc.200}",
+      "progress-track": "{semantic.bg-skeleton}",
+      "progress-track-edge": "{component.button-secondary-border}"
     }
   },
   "spacing": {
@@ -282,7 +286,9 @@
     "container-max": "1280px",
     "container-narrow": "720px",
     "cal-cell": "36px",
-    "popover-max-height": "320px"
+    "popover-max-height": "320px",
+    "input-font-size": "14px",
+    "touch-target": "44px"
   },
   "breakpoint": {
     "bp-sm": "640px",
@@ -486,10 +492,10 @@
     "grain": "Grain speckle colour, drawn at aura-grain-opacity. Visible only on light grounds.",
     "status-neutral-bg": "Status pill fill for not-started / unknown states (To Do, Draft). Dark theme uses a quiet zinc-800 fill so it sits below the coloured states. ADDED.",
     "status-neutral-fg": "Label and icon on aura-status-neutral-bg (light 9.5:1, dark zinc-300 on zinc-800).",
-    "status-progress-bg": "Status pill fill for work under way (In Progress, In Review). ADDED.",
-    "status-progress-fg": "Label and icon on aura-status-progress-bg (7.6:1).",
-    "status-ready-bg": "Status pill fill for finished / good states (Ready, Done). The source's lime pill. ADDED as a named token.",
-    "status-ready-fg": "Label and icon on aura-status-ready-bg (15.2:1).",
+    "status-progress-bg": "Status pill fill for work under way (In Progress, In Review). Dark: a quiet violet-tinted fill (violet-500 at 20% over zinc-900) so the pill sits below the row text. ADDED; dark 4.11.",
+    "status-progress-fg": "Label and icon on aura-status-progress-bg (light 7.6:1; dark violet-300, 7.6:1).",
+    "status-ready-bg": "Status pill fill for finished / good states (Ready, Done). The source's lime pill. Dark: a lime-tinted fill (lime-400 at 14% over zinc-900). ADDED as a named token; dark 4.11.",
+    "status-ready-fg": "Label and icon on aura-status-ready-bg (light 15.2:1; dark lime-300, 9.9:1).",
     "status-blocked-bg": "Status pill fill for stopped / failed states (Blocked, Failed). Dark on purpose: 5.5:1 lighter-to-darker against the lime Ready fill, so Ready and Blocked differ by lightness, not only red vs green. ADDED.",
     "status-blocked-fg": "Label and icon on aura-status-blocked-bg (6.5:1).",
     "bg-selected": "Selected table rows and list items. Opaque so pinned columns can sit on it (dark = a 14% violet-400 wash over zinc-900, flattened). aura-fg-primary on it ≥14.2:1, aura-fg-secondary ≥5.5:1, focus ring ≥5.2:1 in both themes. ADDED.",
@@ -529,6 +535,10 @@
     "chart-1": "Categorical chart colours chart-1…8, in this order: violet, teal, orange, blue, magenta, green, gold, rose. Every one is ≥3:1 on bg-surface and bg-canvas in both themes (WCAG 1.4.11), and neighbours alternate dark/mid lightness (about 2:1 apart) so they stay apart under colour-blindness. chart-1 follows the brand in createTheme. Label series too; colour is never the only cue. ADDED 4.10.",
     "chart-seq-1": "Sequential ramp chart-seq-1…5 (low → high) for heatmaps and ordered buckets. seq-1 is the value closest to the surface; every step ≥3:1 on bg-surface. Brand hue in createTheme. ADDED 4.10.",
     "chart-grid": "Chart grid lines. Decorative, no contrast target. ADDED 4.10.",
-    "chart-axis": "Axis lines, ticks and tick labels (text: 4.5:1 on bg-surface and bg-canvas). ADDED 4.10."
+    "chart-axis": "Axis lines, ticks and tick labels (text: 4.5:1 on bg-surface and bg-canvas). ADDED 4.10.",
+    "progress-track": "Empty part of Progress and FileUpload bars (fill). Its edge carries the 3:1. ADDED 4.11.",
+    "progress-track-edge": "1px inset edge of Progress / upload tracks: ≥3:1 on bg-surface and bg-canvas in both themes (WCAG 1.4.11), so the track reads without the fill. ADDED 4.11.",
+    "input-font-size": "Text size in inputs, textareas, selects and pickers. Phones (<640px) use at least 16px so iOS Safari does not zoom on focus. ADDED 4.11.",
+    "touch-target": "Minimum hit area on touch screens (pointer: coarse): IconButton, and Radio / Checkbox / Switch rows (WCAG 2.5.5). ADDED 4.11."
   }
 }