@jirawatpyk/aura-react 5.28.0 → 5.30.0

package/dist/styles.layer.css

@@ -14,7 +14,7 @@
   border: 0;
   background: transparent;
   color: inherit;
-  font-family: inherit;
+  font-family: var(--font-sans); /* 5.30: not inherit — a trigger outside a styled root fell back to Arial */
   font-size: 13px;
   font-weight: 500;
   line-height: 1;
@@ -46,6 +46,19 @@ button.aura-btn--secondary[aria-disabled='true']:hover, button.aura-btn--ghost[a
 button.aura-btn--danger-secondary[aria-disabled='true']:hover { background: transparent; }
 button.aura-btn--danger[aria-disabled='true']:hover { background: var(--aura-button-danger-bg); }
 button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-shadow-creative); transform: none; }
+/* 5.30: a disabled filled button (primary, danger, creative) is a quiet grey fill with muted text, not a faded copy of
+ * itself — faded ink read as a separate grey button, faded red as pink. Outline and ghost buttons keep the fade. */
+.aura-btn:is(.aura-btn--primary, .aura-btn--danger, .aura-btn--creative):is(:disabled, [aria-disabled='true']:not(.is-loading)),
+.aura-btn:is(.aura-btn--primary, .aura-btn--danger, .aura-btn--creative):is(:disabled, [aria-disabled='true']:not(.is-loading)):hover {
+  opacity: 1; background: var(--aura-button-disabled-bg); color: var(--aura-button-disabled-fg); border-color: transparent; box-shadow: none;
+}
+/* Forced colours drop the fills: filled buttons get a 1px edge (as outline buttons have), and a disabled or gated one
+ * (still focusable) shows GrayText and keeps the fade, without changing size. */
+@media (forced-colors: active) {
+  .aura-btn:is(.aura-btn--primary, .aura-btn--danger) { border: 1px solid ButtonText; }
+  .aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)),
+  .aura-btn.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)):hover { color: GrayText; border-color: GrayText; opacity: var(--aura-disabled-opacity); }
+}
 .aura-btn.is-loading:active { transform: none; }
 
 /* Focus — ADDED: the source defines none. Solid 2px ring, 2px offset, on every interactive element. */
@@ -95,10 +108,17 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   color: var(--aura-fg-primary);
 }
 .aura-table__scroll { position: relative; overflow: auto; overscroll-behavior: contain; height: var(--aura-table-h, auto); }
+/* 5.30: more columns past the end edge — a soft shadow over the grid's end edge (not over its scrollbars, its footer
+ * or the column button), so it reads as scrolling sideways. JavaScript places it (top, height, scrollbar inset). */
+.aura-table__edge {
+  position: absolute; z-index: 4; inset-inline-end: var(--aura-edge-sb, 0px); top: var(--aura-edge-top, 0px); height: var(--aura-edge-h, 0px);
+  width: 16px; pointer-events: none; background: linear-gradient(to left, var(--aura-scroll-shadow), transparent);
+}
+.aura-table__edge:dir(rtl) { background: linear-gradient(to right, var(--aura-scroll-shadow), transparent); }
 .aura-table__head {
   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); min-width: var(--aura-row-min, 0);
-  background: var(--aura-bg-canvas);
+  background: var(--aura-table-head-bg);
   border-bottom: 1px solid var(--aura-border-default);
   font-family: var(--font-mono); font-size: 12px; color: var(--aura-fg-secondary);
 }
@@ -171,7 +191,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
 .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-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);
+  display: flex; align-items: center; justify-content: center; background: var(--aura-table-head-bg); border-top-right-radius: calc(var(--aura-card-radius) - 1px);
 }
 .aura-table__gutter--end.has-picker {
   width: var(--aura-space-12); position: sticky; left: auto; right: 0;
@@ -272,7 +292,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
   display: inline-flex; align-items: center; justify-content: center;
   border: 1.5px solid var(--aura-border-control); border-radius: var(--aura-radius-xs);
 }
-.aura-menu__check.is-on { background: var(--aura-button-primary-bg); border-color: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
+.aura-menu__check.is-on { background: var(--aura-control-checked-bg); border-color: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); }
 .aura-menu__check.is-on .aura-icon { color: inherit; }
 .aura-menu__item--danger, .aura-menu__item--danger .aura-icon { color: var(--aura-fg-danger); }
 .aura-menu__item--danger:hover, .aura-menu__item--danger:focus { background: var(--aura-alert-danger-bg); color: var(--aura-alert-danger-fg); }
@@ -282,8 +302,8 @@ a.aura-menu__item { text-decoration: none; box-sizing: border-box; }
   flex: none; box-sizing: border-box; width: 16px; height: 16px; border-radius: var(--aura-radius-full);
   border: 1px solid var(--aura-border-control); display: inline-flex; align-items: center; justify-content: center;
 }
-.aura-menu__radio.is-on { border-color: var(--aura-button-primary-bg); }
-.aura-menu__radio.is-on::after { content: ''; width: 8px; height: 8px; border-radius: var(--aura-radius-full); background: var(--aura-button-primary-bg); }
+.aura-menu__radio.is-on { border-color: var(--aura-control-checked-bg); }
+.aura-menu__radio.is-on::after { content: ''; width: 8px; height: 8px; border-radius: var(--aura-radius-full); background: var(--aura-control-checked-bg); }
 /* 5.7: a header above the items (who is signed in), set off by a hairline like a separator. */
 .aura-menu__header { margin: calc(-1 * var(--aura-space-1)) calc(-1 * var(--aura-space-1)) var(--aura-space-1); padding: var(--aura-space-3); border-bottom: 1px solid var(--aura-border-default); color: var(--aura-fg-secondary); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
 .aura-menu__header > * { margin: 0; }
@@ -340,6 +360,16 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-skel--pill { width: 72px; height: 20px; }
 .aura-skel--box { width: var(--aura-icon-sm); height: var(--aura-icon-sm); border-radius: var(--aura-radius-xs); }
 @media (prefers-reduced-motion: reduce) { .aura-skel { animation: none; } }
+/* 5.29 (Chamber-OS 134): a DataTable skeleton row stands in for the real one — text lines (skeletonLines) on the 20px
+ * line, and a button-height bar where row actions go: 32px, or 44px under the touchHeight rule with the column's
+ * skeletonTouch; full width in a card footer. */
+.aura-skel--action { flex: none; width: var(--aura-button-height-sm); height: var(--aura-button-height-sm); border-radius: var(--aura-button-radius); } /* 5.30: the button's own shape */
+.aura-skel--action.is-footer { width: 100%; }
+.aura-table__td.is-end > .aura-skel-lines { align-items: flex-end; }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-skel--action.is-touch { height: var(--aura-touch-target); }
+  .aura-skel--action.is-touch:not(.is-footer) { width: var(--aura-touch-target); }
+}
 .aura-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 
 /* Empty state */
@@ -365,12 +395,12 @@ a.aura-icon-btn { text-decoration: none; }
   box-sizing: border-box; width: 100%; height: 100%;
   display: inline-flex; align-items: center; justify-content: center;
   border: 1.5px solid var(--aura-border-control); border-radius: var(--aura-radius-xs);
-  background: var(--aura-bg-surface); color: var(--aura-button-primary-fg);
+  background: var(--aura-bg-surface); color: var(--aura-control-checked-fg);
   transition: background var(--aura-duration-fast) var(--aura-ease), border-color var(--aura-duration-fast) var(--aura-ease);
   pointer-events: none;
 }
 .aura-check__input:checked + .aura-check__box,
-.aura-check__input:indeterminate + .aura-check__box { background: var(--aura-button-primary-bg); border-color: var(--aura-button-primary-bg); }
+.aura-check__input:indeterminate + .aura-check__box { background: var(--aura-control-checked-bg); border-color: var(--aura-control-checked-bg); }
 .aura-check__input:focus-visible + .aura-check__box { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-table__mono { font-family: var(--font-mono); }
 
@@ -383,6 +413,7 @@ a.aura-icon-btn { text-decoration: none; }
   border-radius: var(--aura-radius-full);
   padding: 2px var(--aura-space-2) 2px 6px;
   font-size: 11px;
+  font-weight: 500; /* 5.30 (Chamber-OS 137): medium everywhere, not the parent's weight; Badge stays 600 */
   line-height: 16px;
   white-space: nowrap;
   background: var(--aura-status-neutral-bg);
@@ -513,30 +544,31 @@ a.aura-icon-btn { text-decoration: none; }
   border: 1.5px solid var(--aura-border-control); background: var(--aura-bg-input); cursor: inherit;
   transition: border-width var(--aura-duration-fast) var(--aura-ease);
 }
-.aura-radio:checked { border: 5px solid var(--aura-button-primary-bg); background: var(--aura-button-primary-fg); }
+.aura-radio:checked { border: 5px solid var(--aura-control-checked-bg); background: var(--aura-control-checked-fg); }
 .aura-radio:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-radio-group.is-invalid .aura-radio:not(:checked) { border-color: var(--aura-border-danger); }
 
 .aura-switch-row { display: flex; align-items: flex-start; gap: var(--aura-space-3); font-family: var(--font-sans); }
 /* 5.10.1: disabled rows, on or off, are treated alike and stay readable — the label turns secondary, the description
- * keeps its colour (often the reason it's locked) — and only the switch fades: off to the disabled opacity, on to 0.75,
+ * keeps its colour (often the reason it's locked) — and only the switch fades: off to the disabled opacity, on keeps its track and fades its thumb (5.30: the violet track at 0.75 fell under 3:1),
  * ≥3:1 apart in both themes, so "locked on" never looks like "off". */
 .aura-switch-row.is-disabled { cursor: not-allowed; }
 .aura-switch-row.is-disabled .aura-choice__label { color: var(--aura-fg-secondary); cursor: not-allowed; }
 .aura-switch:disabled { opacity: var(--aura-disabled-opacity); }
-.aura-switch.is-on:disabled { opacity: 0.75; }
+.aura-switch.is-on:disabled { opacity: 1; } /* 5.30: the violet track stays whole (faded, it fell under 3:1 from off)… */
+.aura-switch.is-on:disabled .aura-switch__thumb { opacity: 0.6; } /* …and the thumb fades, so it doesn't look enabled */
 .aura-switch {
   position: relative; flex: none; box-sizing: border-box; margin: 0; padding: 0;
   width: var(--aura-switch-width); height: var(--aura-switch-height); border-radius: var(--aura-radius-full);
   border: 0; background: var(--aura-border-control); cursor: pointer;
   transition: background var(--aura-duration-fast) var(--aura-ease);
 }
-.aura-switch.is-on { background: var(--aura-button-primary-bg); }
+.aura-switch.is-on { background: var(--aura-control-checked-bg); }
 .aura-switch__thumb {
   position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: var(--aura-radius-full);
   background: var(--aura-bg-surface); transition: transform var(--aura-duration-fast) var(--aura-ease);
 }
-.aura-switch.is-on .aura-switch__thumb { transform: translateX(16px); background: var(--aura-button-primary-fg); }
+.aura-switch.is-on .aura-switch__thumb { transform: translateX(16px); background: var(--aura-control-checked-fg); }
 .aura-switch:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-switch:disabled { cursor: not-allowed; }
 /* 5.19 (Chamber-OS 113): a read-only switch keeps its colours (a locked "on" reads as on at full contrast) and stays
@@ -709,7 +741,7 @@ a.aura-icon-btn { text-decoration: none; }
   transition: color var(--aura-duration-fast) var(--aura-ease), border-color var(--aura-duration-fast) var(--aura-ease);
 }
 .aura-tab:hover { color: var(--aura-fg-primary); }
-.aura-tab.is-active { color: var(--aura-fg-primary); border-bottom-color: var(--aura-fg-primary); }
+.aura-tab.is-active { color: var(--aura-fg-primary); border-bottom-color: var(--aura-control-checked-bg); }
 .aura-tab:disabled, .aura-tab.is-disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
 a.aura-tab { text-decoration: none; }
 .aura-tab:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -4px; border-radius: var(--aura-radius-xs); }
@@ -916,7 +948,7 @@ a.aura-tab { text-decoration: none; }
 .aura-cal__day:hover { background: var(--aura-bg-surface-hover); }
 .aura-cal__day.is-outside { color: var(--aura-fg-tertiary); }
 .aura-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--aura-border-control); font-weight: 600; }
-.aura-cal__day.is-selected { background: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); box-shadow: none; }
+.aura-cal__day.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); box-shadow: none; }
 .aura-cal__day:disabled, .aura-cal__day[aria-disabled='true'] { opacity: var(--aura-disabled-opacity); cursor: not-allowed; background: transparent; text-decoration: line-through; }
 .aura-cal__day:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; }
 .aura-cal__grid td.is-in-range { background: var(--aura-bg-selected); }
@@ -929,7 +961,7 @@ a.aura-tab { text-decoration: none; }
   font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
 }
 .aura-cal__year:hover { background: var(--aura-bg-surface-hover); }
-.aura-cal__year.is-selected { background: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
+.aura-cal__year.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); }
 .aura-cal__foot { display: flex; justify-content: space-between; margin-top: var(--aura-space-2); padding-top: var(--aura-space-2); border-top: 1px solid var(--aura-border-subtle); }
 .aura-cal__link {
   height: var(--aura-control-sm); padding: 0 var(--aura-space-2); border: 0; border-radius: var(--aura-radius-sm);
@@ -1043,8 +1075,10 @@ a.aura-tab { text-decoration: none; }
 .aura-shell__content:not(.is-flush) > .aura-container { padding-left: 0; padding-right: 0; }
 
 /* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
-.aura-table__total { background: var(--aura-bg-canvas); border-top: 1px solid var(--aura-border-strong); font-weight: 600; }
-.aura-table__total.is-sticky { position: sticky; bottom: 0; z-index: 3; }
+/* 5.30: a 2px hairline-colour rule over the totals (border-strong was a glaring white line in dark); a pinned totals row
+ * casts a soft shadow over the rows scrolling under it. */
+.aura-table__total { background: var(--aura-table-head-bg); border-top: 2px solid var(--aura-border-default); font-weight: 600; }
+.aura-table__total.is-sticky { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -6px 8px -6px var(--aura-scroll-shadow); }
 .aura-table__total .aura-table__td.is-end { font-variant-numeric: tabular-nums; }
 .aura-tooltip--above { transform: translateY(-100%); max-width: min(var(--aura-tooltip-max), 90vw); white-space: normal; }
 
@@ -1137,7 +1171,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-badge {
   display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 var(--aura-space-2); box-sizing: border-box;
   border-radius: var(--aura-radius-full); border: 1px solid transparent; font-family: var(--font-sans); font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
-  background: var(--aura-bg-surface-hover); color: var(--aura-fg-secondary);
+  background: var(--aura-status-neutral-bg); color: var(--aura-status-neutral-fg); /* 5.30: surface-hover vanished on the light canvas */
 }
 .aura-badge--accent { background: var(--aura-alert-info-bg); color: var(--aura-alert-info-fg); }
 .aura-badge--success { background: var(--aura-alert-success-bg); color: var(--aura-alert-success-fg); }
@@ -1200,7 +1234,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
 .aura-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--aura-space-2); padding: var(--aura-space-12) var(--aura-space-6); font-family: var(--font-sans); color: var(--aura-fg-primary); }
 .aura-empty.is-sm { padding: var(--aura-space-6) var(--aura-space-4); }
 .aura-empty.is-bordered { border: 1px dashed var(--aura-border-control); border-radius: var(--aura-radius-lg); }
-.aura-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--aura-space-2); border-radius: var(--aura-radius-full); background: var(--aura-bg-surface-hover); color: var(--aura-fg-secondary); }
+.aura-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--aura-space-2); border-radius: var(--aura-radius-full); background: var(--aura-status-neutral-bg); color: var(--aura-fg-secondary); }
 .aura-empty.is-sm .aura-empty__icon { width: 36px; height: 36px; }
 .aura-empty__title { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
 .aura-empty__text { margin: 0; max-width: 44ch; font-size: 14px; line-height: 1.6; color: var(--aura-fg-secondary); }
@@ -1218,7 +1252,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
   border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-primary); font: inherit; font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer;
 }
 .aura-page:hover { background: var(--aura-bg-surface-hover); }
-.aura-page.is-current { background: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); font-weight: 600; }
+.aura-page.is-current { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); font-weight: 600; }
 .aura-page:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
 .aura-pagination__gap { min-width: 24px; text-align: center; color: var(--aura-fg-secondary); }
 .aura-pagination__compact { display: none; padding: 0 var(--aura-space-2); color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; }
@@ -1312,7 +1346,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   color: var(--aura-fg-secondary); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
 }
 .aura-stepper__marker .aura-icon { width: 16px; height: 16px; }
-.aura-stepper__item.is-done .aura-stepper__marker { background: var(--aura-button-primary-bg); border-color: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
+.aura-stepper__item.is-done .aura-stepper__marker { background: var(--aura-control-checked-bg); border-color: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); }
 .aura-stepper__item.is-current .aura-stepper__marker { border: 2px solid var(--aura-fg-accent); color: var(--aura-fg-accent); }
 .aura-stepper__text { display: flex; flex-direction: column; min-width: 0; padding-top: 4px; }
 .aura-stepper__label { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--aura-fg-secondary); }
@@ -1325,12 +1359,12 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 }
 .aura-stepper--horizontal .aura-stepper__step { flex-direction: column; gap: var(--aura-space-2); }
 .aura-stepper--horizontal .aura-stepper__text { padding-top: 0; }
-.aura-stepper--horizontal .aura-stepper__item.is-done::after { background: var(--aura-button-primary-bg); }
+.aura-stepper--horizontal .aura-stepper__item.is-done::after { background: var(--aura-control-checked-bg); }
 .aura-stepper--vertical .aura-stepper__item { flex: none; padding-bottom: var(--aura-space-5); }
 .aura-stepper--vertical .aura-stepper__item:not(:last-child)::after {
   content: ""; position: absolute; left: 14px; top: 32px; bottom: 4px; width: 1px; background: var(--aura-border-control);
 }
-.aura-stepper--vertical .aura-stepper__item.is-done::after { background: var(--aura-button-primary-bg); }
+.aura-stepper--vertical .aura-stepper__item.is-done::after { background: var(--aura-control-checked-bg); }
 .aura-stepper__compact { display: none; margin: var(--aura-space-2) 0 0; font-size: 13px; }
 .aura-stepper__count { color: var(--aura-fg-secondary); margin-right: var(--aura-space-2); }
 .aura-stepper__compact-label { font-weight: 600; }
@@ -1349,15 +1383,16 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-segmented.is-full { display: flex; width: 100%; }
 .aura-segmented__option {
   flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
-  height: 32px; padding: 0 var(--aura-space-4); box-sizing: border-box;
+  height: calc(var(--aura-input-height) - 6px); /* 5.30: the control is as tall as a field beside it (2px padding, 1px edge) */
+  padding: 0 var(--aura-space-4); box-sizing: border-box;
   border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-secondary);
   font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
   transition: background-color var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease), box-shadow var(--aura-duration-fast) var(--aura-ease);
 }
 .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.is-icon { padding: 0; width: calc(var(--aura-input-height) - 6px); } /* 5.30: square */
 .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: 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.is-selected { background: var(--aura-segmented-thumb-bg); color: var(--aura-fg-primary); font-weight: 600; 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; }
@@ -1455,11 +1490,33 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-check--labelled .aura-check__input { top: calc((var(--aura-touch-target) - 20px) / 2 + 3px); }
   .aura-switch-row:not(.is-disabled):not(.is-readonly) { cursor: pointer; }
   .aura-radio-group__list { gap: 0; }
-  .aura-radio-group__list.is-horizontal { gap: 0 var(--aura-space-6); }
+  .aura-radio-group__list.is-horizontal { gap: 0 var(--aura-space-6); align-items: flex-start; }
+}
+/* 5.30 (Chamber-OS 135): `touchHeight` on TextField, Textarea, Select, RadioGroup and Checkbox — 44px boxes and choice
+ * rows (a one-line label centred), below 640px or on a coarse pointer (is-touch) or at every width (is-touch-always).
+ * The field's own --aura-input-height wins over any density around it. */
+.aura-field.is-touch-always { --aura-input-height: var(--aura-touch-target); }
+.aura-radio-group.is-touch-always .aura-choice, .aura-check--labelled.is-touch-always {
+  box-sizing: border-box; min-height: var(--aura-touch-target); padding-block: calc((var(--aura-touch-target) - 20px) / 2);
+}
+.aura-check--labelled.is-touch-always .aura-check__input { top: calc((var(--aura-touch-target) - 20px) / 2 + 3px); }
+.aura-radio-group.is-touch-always .aura-radio-group__list { gap: 0; }
+.aura-radio-group.is-touch-always .aura-radio-group__list.is-horizontal { gap: 0 var(--aura-space-6); align-items: flex-start; }
+@media (max-width: 639.98px), (pointer: coarse) {
+  .aura-field.is-touch { --aura-input-height: var(--aura-touch-target); }
+  .aura-radio-group.is-touch .aura-choice, .aura-check--labelled.is-touch {
+    box-sizing: border-box; min-height: var(--aura-touch-target); padding-block: calc((var(--aura-touch-target) - 20px) / 2);
+  }
+  .aura-check--labelled.is-touch .aura-check__input { top: calc((var(--aura-touch-target) - 20px) / 2 + 3px); }
+  .aura-radio-group.is-touch .aura-radio-group__list { gap: 0; }
+  .aura-radio-group.is-touch .aura-radio-group__list.is-horizontal { gap: 0 var(--aura-space-6); align-items: flex-start; }
 }
 
 /* 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; }
+/* 5.30: a button inside a field (show password) is as quiet as the field's other icons until hovered. */
+.aura-input .aura-icon-btn { color: var(--aura-fg-secondary); }
+.aura-input .aura-icon-btn:hover:not(:disabled) { color: var(--aura-fg-primary); }
 
 /* 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); }
@@ -1552,6 +1609,12 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-filterselect__name { flex: none; white-space: nowrap; color: var(--aura-fg-secondary); }
 .aura-filterselect__value { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
 .aura-filterselect__chevron { flex: none; width: 14px; height: 14px; color: var(--aura-fg-secondary); }
+/* 5.30: from 640px the face has a field's inset and text size, like the search box beside it; phones keep the tight
+ * face so three filters and a chip share one row. */
+@media (min-width: 640px) {
+  .aura-filterselect__face { padding-inline: var(--aura-space-3) var(--aura-space-2); font-size: 14px; }
+  .aura-filterselect__chevron { width: var(--aura-icon-sm); height: var(--aura-icon-sm); }
+}
 .aura-filterselect.is-open .aura-filterselect__chevron { transform: rotate(180deg); }
 .aura-filterselect__face:focus-visible, .aura-filterselect:has(.aura-filterselect__native:focus-visible) .aura-filterselect__face {
   outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-color: var(--aura-border-strong);
@@ -1721,21 +1784,35 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 /* DataTable's grid look — mono header band, hairlines, 20px outer radius — on plain <table> markup, with wrapping text. */
 .aura-tbl-wrap {
   overflow-x: auto; border: 1px solid var(--aura-border-default); border-radius: var(--aura-card-radius);
-  background: var(--aura-bg-surface); color: var(--aura-fg-primary); font-family: var(--font-sans);
+  color: var(--aura-fg-primary); font-family: var(--font-sans);
+  /* 5.30: a table wider than its box shows a soft shadow at the edge that has more to scroll to (CSS only: the covers
+   * scroll with the content, the shadows stay with the box). Body rows show it; the header band and totals rows, with
+   * their own fill, cover it. Set --aura-tbl-bg if you give the box another ground. A flush table has none. */
+  background:
+    linear-gradient(to right, var(--aura-tbl-bg, var(--aura-bg-surface)) 30%, transparent) left / 32px 100% no-repeat local,
+    linear-gradient(to left, var(--aura-tbl-bg, var(--aura-bg-surface)) 30%, transparent) right / 32px 100% no-repeat local,
+    linear-gradient(to right, var(--aura-scroll-shadow), transparent) left / 12px 100% no-repeat scroll,
+    linear-gradient(to left, var(--aura-scroll-shadow), transparent) right / 12px 100% no-repeat scroll,
+    var(--aura-tbl-bg, var(--aura-bg-surface));
 }
 .aura-tbl { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 13px; line-height: 20px; }
-.aura-tbl__caption { caption-side: top; padding: var(--aura-space-4) var(--aura-space-6) 0; text-align: left; font-size: 14px; font-weight: 600; }
+.aura-tbl__caption { caption-side: top; padding: var(--aura-space-4) var(--aura-space-6) var(--aura-space-3); text-align: left; font-size: 14px; font-weight: 600; }
+/* 5.30: from 640px a cell is at least 10ch wide, so the table never squeezes a column to one letter; a longer word (an
+ * email, a URL) still breaks to fit instead of widening the table. Phones keep fitting the box: use stackBelow there. */
 .aura-tbl__th, .aura-tbl__td { padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
+@media (min-width: 640px) { .aura-tbl__th, .aura-tbl__td { min-width: 10ch; } }
 .aura-tbl__th:first-child, .aura-tbl__td:first-child { padding-left: var(--aura-space-6); }
 .aura-tbl__th:last-child, .aura-tbl__td:last-child { padding-right: var(--aura-space-6); }
 .aura-tbl__head .aura-tbl__th {
-  background: var(--aura-bg-canvas); border-bottom: 1px solid var(--aura-border-default);
+  background: var(--aura-table-head-bg); border-bottom: 1px solid var(--aura-border-default);
   font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--aura-fg-secondary); white-space: nowrap;
 }
 .aura-tbl__body .aura-tbl__row + .aura-tbl__row > * { border-top: 1px solid var(--aura-border-default); }
 .aura-tbl__body .aura-tbl__th { font-weight: 500; }
-.aura-tbl__foot > .aura-tbl__row > * { background: var(--aura-bg-canvas); font-weight: 600; }
-.aura-tbl__foot > .aura-tbl__row:first-child > * { border-top: 1px solid var(--aura-border-strong); }
+.aura-tbl__foot > .aura-tbl__row > * { background: var(--aura-table-head-bg); font-weight: 600; }
+.aura-tbl__foot > .aura-tbl__row:first-child > * { border-top: 2px solid var(--aura-border-default); }
+/* 5.30: with several totals rows (Subtotal, VAT, Total) the last one reads as the total. */
+.aura-tbl__foot > .aura-tbl__row:last-child:not(:first-child) > * { font-size: 14px; font-weight: 700; }
 .aura-tbl__foot > .aura-tbl__row + .aura-tbl__row > * { border-top: 1px solid var(--aura-border-default); }
 .aura-tbl .is-end { text-align: right; }
 .aura-tbl .is-center { text-align: center; }
@@ -1779,7 +1856,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @container aura-tbl (width < 768px) {
   .aura-tbl--stack-md, .aura-tbl--stack-md > .aura-tbl__body, .aura-tbl--stack-md > .aura-tbl__foot, .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { display: block; }
   .aura-tbl--stack-md > .aura-tbl__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
-  .aura-tbl--stack-md > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) 0; }
+  .aura-tbl--stack-md > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) var(--aura-space-3); }
   .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { height: auto; padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
   .aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row + .aura-tbl__row, .aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row:first-child { border-top: 1px solid var(--aura-border-default); }
   .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-md > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
@@ -1803,7 +1880,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @container aura-tbl (width < 640px) {
   .aura-tbl--stack-sm, .aura-tbl--stack-sm > .aura-tbl__body, .aura-tbl--stack-sm > .aura-tbl__foot, .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { display: block; }
   .aura-tbl--stack-sm > .aura-tbl__head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
-  .aura-tbl--stack-sm > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) 0; }
+  .aura-tbl--stack-sm > .aura-tbl__caption { display: block; padding: var(--aura-space-4) var(--aura-space-4) var(--aura-space-3); }
   .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { height: auto; padding: var(--aura-tbl-cell-py, var(--aura-space-3)) var(--aura-space-4); }
   .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row + .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row:first-child { border-top: 1px solid var(--aura-border-default); }
   .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { padding: 0; border-top: 0; background: none; text-align: start; white-space: normal; }
@@ -1837,7 +1914,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     margin-bottom: var(--aura-space-2); padding: var(--aura-tbl-card-py, var(--aura-space-4)) var(--aura-space-4);
     border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); background: var(--aura-bg-surface);
   }
-  .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { background: var(--aura-bg-canvas); }
+  .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row { background: var(--aura-table-head-bg); }
   .aura-tbl--cards.aura-tbl--stack-md > :last-child > .aura-tbl__row:last-child { margin-bottom: 0; }
   .aura-tbl-wrap.is-flush > .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
 }
@@ -1850,7 +1927,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     margin-bottom: var(--aura-space-2); padding: var(--aura-tbl-card-py, var(--aura-space-4)) var(--aura-space-4);
     border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); background: var(--aura-bg-surface);
   }
-  .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { background: var(--aura-bg-canvas); }
+  .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row { background: var(--aura-table-head-bg); }
   .aura-tbl--cards.aura-tbl--stack-sm > :last-child > .aura-tbl__row:last-child { margin-bottom: 0; }
   .aura-tbl-wrap.is-flush > .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
 }
@@ -1954,7 +2031,13 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   /* 5.22: a footer row ends the card with no margin under it, so the card keeps its full 16px. */
   .aura-table__row:has(> [data-card='footer']:not(.is-blank)) { padding-bottom: var(--aura-space-4); }
   .aura-table__row--skeleton .aura-table__td { display: flex; }
-  .aura-table__total { background: var(--aura-bg-canvas); }
+  /* 5.29: a skeleton field shows its label above a bar on the field's value line (15px: 13px text, normal line
+   * height — 1lh, so it follows the font), as a real field does; the title keeps the 20px line. */
+  .aura-table__row--skeleton .aura-table__td[data-label] { flex-direction: column; align-items: stretch; }
+  .aura-table__row--skeleton .aura-table__td > .aura-skel:not(.aura-skel--pill):not(.aura-skel--action) { margin: 5px 0; }
+  .aura-table__row--skeleton .aura-table__td[data-label] .aura-skel:not(.aura-skel--pill):not(.aura-skel--action) { margin: 2.5px 0; margin: calc((1lh - 10px) / 2) 0; }
+  .aura-table__row--skeleton .aura-table__td > .aura-skel-lines { align-items: flex-start; }
+  .aura-table__total { background: var(--aura-table-head-bg); }
   .aura-table__total > .is-blank { display: none; }
   .aura-table__foot { border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); margin-top: var(--aura-space-2); background: var(--aura-bg-surface); }
   .aura-table__empty { background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); }
@@ -1985,4 +2068,26 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-tabs--segmented .aura-tab.aura-segmented__option:focus-visible { outline: 2px dashed CanvasText; outline-offset: -5px; }
 }
 
+/* 5.30: Thai needs more room than Latin — tone marks and vowels stack above and below the line. Where the page or a
+ * part of it is Thai (lang="th"), small labels are at least 12px and lines are taller. */
+.aura-pill:lang(th), .aura-badge:lang(th), .aura-tab__count:lang(th) { font-size: 12px; }
+.aura-pill:lang(th) { line-height: 18px; }
+.aura-skel--pill:lang(th) { height: 22px; } /* the loading pill stays as tall as the Thai one */
+.aura-bottomnav__item:lang(th) { font-size: 12px; line-height: 18px; }
+.aura-stepper__desc:lang(th) { font-size: 13px; line-height: 1.6; }
+.aura-nav__label:lang(th) { line-height: 22px; }
+/* 5.30 (audit D): field labels, hints and errors and choice descriptions get Thai line room; a stacked card's field
+ * labels are 12px in the sans face (the mono face has no Thai), and a stacked DataTable card's values sit on a set
+ * 1.6 line, so a loading card (its bars follow 1lh) is as tall as one with Thai text. */
+.aura-field__label:lang(th), .aura-field__hint:lang(th), .aura-field__error:lang(th) { line-height: 1.6; }
+.aura-choice__desc:lang(th), .aura-check__desc:lang(th) { font-size: 13px; line-height: 1.6; }
+.aura-tbl__row > .aura-tbl__td[data-label]:lang(th)::before, .aura-table__td[data-label]:lang(th)::before { font-family: var(--font-sans); font-size: 12px; line-height: 18px; }
+.aura-table--stacked .aura-table__td[data-label]:lang(th) { line-height: 1.6; }
+
+/* 5.30: a plain link (no class) inside AURA's surfaces takes the accent colour instead of the browser's blue. Zero
+ * specificity, so any rule of yours for links wins. */
+:where(.aura-card, .aura-stat, .aura-alert, .aura-empty, .aura-field, .aura-tabs__panel, .aura-shell__main, .aura-tbl, .aura-table, .aura-dialog) :where(a:not([class])) {
+  color: var(--aura-fg-accent); text-underline-offset: 2px;
+}
+
 }

package/package.json

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