@jirawatpyk/aura-react 5.31.0 → 5.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/README.md +23 -0
  2. package/dist/aura.bundle.js +1125 -881
  3. package/dist/cjs/index.cjs +1124 -880
  4. package/dist/esm/Accordion.js +1 -2
  5. package/dist/esm/AppShell.js +33 -14
  6. package/dist/esm/BottomNav.js +10 -4
  7. package/dist/esm/Combobox.js +1 -2
  8. package/dist/esm/Command.js +1 -2
  9. package/dist/esm/FilterDateRange.js +5 -3
  10. package/dist/esm/IconButton.js +4 -1
  11. package/dist/esm/PageHeader.js +28 -0
  12. package/dist/esm/Pagination.js +3 -1
  13. package/dist/esm/SegmentedControl.js +3 -1
  14. package/dist/esm/SideNav.js +1 -0
  15. package/dist/esm/Stepper.js +9 -2
  16. package/dist/esm/Tag.js +3 -1
  17. package/dist/esm/autoTip.js +182 -0
  18. package/dist/esm/index.js +2 -0
  19. package/dist/index.d.cts +45 -4
  20. package/dist/index.d.ts +45 -4
  21. package/dist/server/index.cjs +31 -5
  22. package/dist/server/index.d.cts +26 -0
  23. package/dist/server/index.d.ts +26 -0
  24. package/dist/server/index.js +31 -5
  25. package/dist/styles.css +68 -25
  26. package/dist/styles.layer.css +68 -25
  27. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -70,10 +70,10 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
70
70
  .aura-btn--primary:hover { background: var(--aura-button-primary-bg-hover); }
71
71
 
72
72
  .aura-btn--secondary { border: 1px solid var(--aura-button-secondary-border); color: var(--aura-fg-primary); }
73
- .aura-btn--secondary:hover { background: var(--aura-bg-surface-hover); }
73
+ .aura-btn--secondary:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
74
74
  /* Destructive: filled for the confirm step, outline beside other actions. Loading keeps the colour (busy, not unavailable). */
75
75
  .aura-btn--ghost { color: var(--aura-fg-primary); }
76
- .aura-btn--ghost:hover { background: var(--aura-bg-surface-hover); }
76
+ .aura-btn--ghost:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
77
77
  /* size="sm" (4.16): 32px for toolbars, table rows and card footers. On touch the pill stays 32px and a transparent
78
78
  * ::after grows the hit area to 44px, as IconButton does. */
79
79
  .aura-btn--sm { height: var(--aura-button-height-sm); padding: 0 var(--aura-space-3); gap: 6px; }
@@ -128,7 +128,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
128
128
  font-size: 13px;
129
129
  }
130
130
  .aura-table__row:last-child { border-bottom: 0; }
131
- .aura-table__row:hover { background: var(--aura-bg-surface-hover); }
131
+ .aura-table__row:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
132
132
  .aura-table__row.is-actionable { cursor: pointer; }
133
133
  .aura-table__row--skeleton:hover { background: var(--aura-bg-surface); }
134
134
  .aura-table__row--skeleton .aura-table__td { display: flex; align-items: center; }
@@ -236,7 +236,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
236
236
  }
237
237
  .aura-table__th:hover .aura-table__menu-btn, .aura-table__th:focus-within .aura-table__menu-btn,
238
238
  .aura-table__th:focus .aura-table__menu-btn, .aura-table__menu-btn[aria-expanded="true"] { opacity: 1; }
239
- .aura-table__menu-btn:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
239
+ .aura-table__menu-btn:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
240
240
  @media (hover: none) { .aura-table__menu-btn { opacity: 1; } }
241
241
 
242
242
  /* Drag to reorder */
@@ -273,7 +273,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
273
273
  border: 0; border-radius: var(--aura-radius-sm); background: transparent;
274
274
  color: inherit; font: inherit; text-align: left; cursor: pointer; white-space: nowrap;
275
275
  }
276
- .aura-menu__item:hover, .aura-menu__item:focus { background: var(--aura-bg-surface-hover); outline: none; }
276
+ .aura-menu__item:hover, .aura-menu__item:focus { background: var(--aura-hover, var(--aura-bg-surface-hover)); outline: none; }
277
277
  .aura-menu__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
278
278
  .aura-menu__item:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
279
279
  /* 5.10: a disabled item is dimmed but focusable; its reason stays at full strength (it is the information). */
@@ -328,7 +328,7 @@ a.aura-icon-btn { text-decoration: none; }
328
328
  border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-primary);
329
329
  cursor: pointer; transition: background var(--aura-duration-fast) var(--aura-ease);
330
330
  }
331
- .aura-icon-btn:hover { background: var(--aura-bg-surface-hover); }
331
+ .aura-icon-btn:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
332
332
  .aura-icon-btn--danger { color: var(--aura-fg-danger); }
333
333
  .aura-icon-btn--danger:hover { background: var(--aura-alert-danger-bg); }
334
334
  .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
@@ -356,6 +356,9 @@ a.aura-icon-btn { text-decoration: none; }
356
356
  background: var(--aura-bg-skeleton); animation: aura-pulse var(--aura-duration-pulse) var(--aura-ease) infinite;
357
357
  }
358
358
  .aura-skel--pill { width: 72px; height: 20px; }
359
+ .aura-skel--badge { width: 56px; height: 20px; } /* 5.32: a Badge is 20px in every language */
360
+ /* 5.32: they stand in for inline pills, so they sit in a line of text like them. */
361
+ .aura-skel--pill, .aura-skel--badge { display: inline-block; vertical-align: middle; }
359
362
  .aura-skel--box { width: var(--aura-icon-sm); height: var(--aura-icon-sm); border-radius: var(--aura-radius-xs); }
360
363
  @media (prefers-reduced-motion: reduce) { .aura-skel { animation: none; } }
361
364
  /* 5.29 (Chamber-OS 134): a DataTable skeleton row stands in for the real one — text lines (skeletonLines) on the 20px
@@ -504,7 +507,7 @@ a.aura-icon-btn { text-decoration: none; }
504
507
  .aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
505
508
  /* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a
506
509
  * Select's trigger <button> — which painted every custom Select with the disabled ground (5.16.1, Chamber-OS 109). */
507
- .aura-input:has(input.aura-input__control:read-only) { background: var(--aura-bg-input-disabled); }
510
+ .aura-input:has(input.aura-input__control:read-only) { background: var(--aura-bg-input-disabled); --aura-hover: var(--aura-bg-canvas-hover); } /* 5.33: a DatePicker's toggle shows its hover on the grey ground */
508
511
  /* A read-only Textarea looks like a read-only TextField (it is its own .aura-input, so the rule above can't reach it). */
509
512
  .aura-textarea:read-only:not(:disabled) { background: var(--aura-bg-input-disabled); }
510
513
 
@@ -527,7 +530,7 @@ a.aura-icon-btn { text-decoration: none; }
527
530
  .aura-select.is-open .aura-select__chevron { transform: rotate(180deg); }
528
531
  /* 5.19 (Chamber-OS 114): a read-only Select looks like a read-only TextField — the same ground, no chevron (it doesn't
529
532
  * open), no pointer; the value keeps full contrast. */
530
- .aura-select.is-readonly { background: var(--aura-bg-input-disabled); }
533
+ .aura-select.is-readonly { background: var(--aura-bg-input-disabled); --aura-hover: var(--aura-bg-canvas-hover); }
531
534
  .aura-select.is-readonly .aura-input__control { cursor: default; padding-right: var(--aura-space-3); }
532
535
 
533
536
  .aura-radio-group > legend { margin-bottom: 6px; }
@@ -641,7 +644,7 @@ a.aura-icon-btn { text-decoration: none; }
641
644
  .aura-toast__action::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%); }
642
645
  .aura-toast__text a { padding-block: 2px; }
643
646
  }
644
- .aura-toast__action:hover { background: var(--aura-bg-surface-hover); }
647
+ .aura-toast__action:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
645
648
  .aura-toast__action:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
646
649
  .aura-toast__close { margin-top: -6px; margin-bottom: -6px; }
647
650
 
@@ -656,6 +659,8 @@ a.aura-icon-btn { text-decoration: none; }
656
659
  }
657
660
  /* The Tooltip component's own tips can be hovered (WCAG 1.4.13, 5.1.1); rail labels and cell tips stay click-through. */
658
661
  .aura-tooltip--hoverable { pointer-events: auto; }
662
+ /* 5.32: the shared tip for icon buttons, Pagination arrows, icon-only segments and cut Tags (was a native title). */
663
+ .aura-tooltip--auto:lang(th) { line-height: 1.6; }
659
664
  @keyframes aura-fade-in { from { opacity: 0; } }
660
665
 
661
666
  /* ---------- Dialog ---------- */
@@ -762,6 +767,10 @@ a.aura-tab { text-decoration: none; }
762
767
  }
763
768
  .aura-nav__header { padding: var(--aura-space-5) var(--aura-space-4) var(--aura-space-4); padding-inline-end: var(--aura-space-2); } /* 5.16 (Chamber-OS 96): 8px at the end, so a brand, its dot and a badge share one row at 240px */
764
769
  .aura-nav__scroll { flex: 1; overflow-y: auto; padding: 0 var(--aura-space-3); }
770
+ /* 5.32 (DxT Monitor request 1): headerDivider — the board's header: 72px, content 20px from the top and start, a
771
+ * full-width line at its foot, 16px before the first item. The collapsed rail keeps its own 8px sides (below). */
772
+ .aura-nav--header-divider > .aura-nav__header { box-sizing: border-box; min-height: 72px; padding-top: var(--aura-space-5); padding-bottom: var(--aura-space-3); padding-inline-start: var(--aura-space-5); border-bottom: 1px solid var(--aura-border-default); }
773
+ .aura-nav--header-divider > .aura-nav__header + .aura-nav__scroll { padding-top: var(--aura-space-4); }
765
774
  /* No header: keep the first item off the top edge (5.0.2). */
766
775
  .aura-nav > .aura-nav__scroll:first-child { padding-top: var(--aura-space-3); }
767
776
  .aura-nav--borderless { border-right: 0; }
@@ -775,7 +784,17 @@ a.aura-tab { text-decoration: none; }
775
784
  text-decoration: none; text-align: left; cursor: pointer;
776
785
  transition: background var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease);
777
786
  }
778
- .aura-nav__item:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
787
+ .aura-nav__item:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
788
+ /* 5.33 (DxT Monitor #5): hover fills read --aura-hover, else aura-bg-surface-hover. On the canvas — AppShell, which
789
+ * is canvas, and SideNav — the surface hover (zinc-50 in light, the canvas itself) didn't show, so there it is
790
+ * aura-bg-canvas-hover; white surfaces inside set it back. A :root override of aura-bg-surface-hover still applies
791
+ * on surfaces; override aura-bg-canvas-hover for the canvas. */
792
+ .aura-shell, .aura-nav { --aura-hover: var(--aura-bg-canvas-hover); }
793
+ .aura-card, .aura-surface, .aura-stat, .aura-tbl-wrap, .aura-table, .aura-shell__bar, .aura-bottomnav, .aura-actionbar,
794
+ .aura-input, .aura-upload, .aura-upload__list, .aura-tag, .aura-dialog, .aura-drawer, .aura-popover, .aura-combo__popover,
795
+ .aura-cal__popover, .aura-menu, .aura-toast, .aura-command { --aura-hover: var(--aura-bg-surface-hover); }
796
+ /* Canvas-coloured bands inside those surfaces: SideNav in the drawer, the DataTable header, picker corner and totals. */
797
+ .aura-drawer .aura-nav, .aura-table__head, .aura-table__picker, .aura-table__total { --aura-hover: var(--aura-bg-canvas-hover); }
779
798
  .aura-nav__item.is-active { background: var(--aura-bg-selected); color: var(--aura-fg-primary); }
780
799
  .aura-nav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
781
800
  .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
@@ -887,7 +906,7 @@ a.aura-tab { text-decoration: none; }
887
906
  }
888
907
  .aura-combo__toggle { right: 6px; }
889
908
  .aura-combo__clear { right: calc(6px + var(--aura-control-sm) - 4px); }
890
- .aura-combo__clear:hover, .aura-combo__toggle:hover, .aura-date__toggle:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
909
+ .aura-combo__clear:hover, .aura-combo__toggle:hover, .aura-date__toggle:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
891
910
  .aura-combo__toggle .aura-icon { transition: transform var(--aura-duration-fast) var(--aura-ease); }
892
911
  .aura-combo.is-open .aura-combo__toggle .aura-icon { transform: rotate(180deg); }
893
912
  .aura-date__toggle:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
@@ -903,7 +922,7 @@ a.aura-tab { text-decoration: none; }
903
922
  border-radius: var(--aura-radius-sm); cursor: pointer;
904
923
  }
905
924
  .aura-combo__option > .aura-icon { color: var(--aura-fg-secondary); }
906
- .aura-combo__option.is-active { background: var(--aura-bg-surface-hover); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
925
+ .aura-combo__option.is-active { background: var(--aura-hover, var(--aura-bg-surface-hover)); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
907
926
  .aura-combo__option.is-selected { font-weight: 500; }
908
927
  .aura-combo__option.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
909
928
  .aura-combo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@@ -936,7 +955,7 @@ a.aura-tab { text-decoration: none; }
936
955
  border: 0; border-radius: var(--aura-radius-sm); background: transparent; color: var(--aura-fg-primary);
937
956
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
938
957
  }
939
- .aura-cal__title:hover { background: var(--aura-bg-surface-hover); }
958
+ .aura-cal__title:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
940
959
  .aura-cal__title:focus-visible, .aura-cal__link:focus-visible, .aura-cal__year:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
941
960
  .aura-cal__grid { border-collapse: separate; border-spacing: 0 2px; width: 100%; }
942
961
  .aura-cal__grid th { height: 28px; padding: 0; font-size: 12px; font-weight: 500; color: var(--aura-fg-secondary); }
@@ -945,7 +964,7 @@ a.aura-tab { text-decoration: none; }
945
964
  width: var(--aura-cal-cell); height: var(--aura-cal-cell); padding: 0; border: 0; border-radius: var(--aura-radius-full);
946
965
  background: transparent; color: var(--aura-fg-primary); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
947
966
  }
948
- .aura-cal__day:hover { background: var(--aura-bg-surface-hover); }
967
+ .aura-cal__day:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
949
968
  .aura-cal__day.is-outside { color: var(--aura-fg-tertiary); }
950
969
  .aura-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--aura-border-control); font-weight: 600; }
951
970
  .aura-cal__day.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); box-shadow: none; }
@@ -960,14 +979,14 @@ a.aura-tab { text-decoration: none; }
960
979
  height: 40px; border: 0; border-radius: var(--aura-radius-sm); background: transparent; color: var(--aura-fg-primary);
961
980
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
962
981
  }
963
- .aura-cal__year:hover { background: var(--aura-bg-surface-hover); }
982
+ .aura-cal__year:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
964
983
  .aura-cal__year.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); }
965
984
  .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); }
966
985
  .aura-cal__link {
967
986
  height: var(--aura-control-sm); padding: 0 var(--aura-space-2); border: 0; border-radius: var(--aura-radius-sm);
968
987
  background: transparent; color: var(--aura-fg-accent); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
969
988
  }
970
- .aura-cal__link:hover { background: var(--aura-bg-surface-hover); }
989
+ .aura-cal__link:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
971
990
  .aura-cal__link:disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
972
991
 
973
992
  /* ---------- Drawer ---------- */
@@ -987,7 +1006,7 @@ a.aura-tab { text-decoration: none; }
987
1006
  .aura-drawer--lg { max-width: var(--aura-drawer-lg); }
988
1007
  .aura-drawer--nav { max-width: var(--aura-sidenav-width); }
989
1008
  .aura-drawer__head { display: flex; align-items: center; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-4) var(--aura-space-2) var(--aura-space-6); }
990
- .aura-drawer--nav .aura-drawer__head { position: absolute; top: var(--aura-space-2); right: var(--aura-space-2); padding: 0; z-index: 1; }
1009
+ .aura-drawer--nav .aura-drawer__head { position: absolute; top: var(--aura-space-2); inset-inline-end: var(--aura-space-2); padding: 0; z-index: 1; } /* 5.32: inline-end, so RTL puts it on the left with the header's room */
991
1010
  .aura-drawer__title { flex: 1; margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
992
1011
  .aura-drawer__desc { margin: 0; padding: 0 var(--aura-space-6); font-size: 14px; line-height: 1.7; color: var(--aura-fg-secondary); }
993
1012
  .aura-drawer__body {
@@ -997,6 +1016,14 @@ a.aura-tab { text-decoration: none; }
997
1016
  }
998
1017
  .aura-drawer--nav .aura-drawer__body { padding: 0; }
999
1018
  .aura-drawer--nav .aura-nav { width: 100%; border-right: 0; }
1019
+ /* 5.32: the phone drawer's close button (32px, 8px in) sits over the header's end: keep the brand clear of it. */
1020
+ .aura-drawer--nav .aura-nav__header { padding-inline-end: 48px; }
1021
+ /* 5.33: the drawer's close button is 44px on phones and touch screens (touchHeight), so the header leaves 60px. */
1022
+ @media (max-width: 639.98px), (pointer: coarse) { .aura-drawer--nav .aura-nav__header { padding-inline-end: 60px; } }
1023
+ /* 5.33 (DxT Monitor #8): in the phone drawer a divided header takes the top bar's height (its line meets the bar's
1024
+ * line beside it), its content centred; the close button is centred on it. The desktop sidebar keeps 72px. */
1025
+ .aura-drawer--nav .aura-nav--header-divider > .aura-nav__header { box-sizing: border-box; min-height: var(--aura-shell-bar-height, 56px); padding-top: 0; padding-bottom: 0; display: flex; align-items: center; }
1026
+ .aura-drawer--nav-divided .aura-drawer__head { top: 0; height: var(--aura-shell-bar-height, 56px); } /* a class from AppShell, not :has(), so older browsers centre it too */
1000
1027
  .aura-drawer__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-6); border-top: 1px solid var(--aura-border-default); }
1001
1028
  @media (prefers-reduced-motion: reduce) { .aura-drawer { animation: none; } }
1002
1029
 
@@ -1074,6 +1101,22 @@ a.aura-tab { text-decoration: none; }
1074
1101
  /* The shell already pads its content: a Container directly inside only caps the width. */
1075
1102
  .aura-shell__content:not(.is-flush) > .aura-container { padding-left: 0; padding-right: 0; }
1076
1103
 
1104
+ /* ---------- PageHeader (5.32, DxT Monitor request 3) ----------
1105
+ * No outer padding: AppShell's content padding is the page margin. Eyebrow mono 12/1.7, h1 display 36/1.15,
1106
+ * meta 13/1.5, 4px between them; actions at the end, on the text's last line, 24px away; below 640px the title is
1107
+ * 28px and the actions wrap under the text. */
1108
+ .aura-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--aura-space-4) var(--aura-space-6); min-width: 0; font-family: var(--font-sans); }
1109
+ .aura-page-header__text { display: flex; flex-direction: column; gap: var(--aura-space-1); flex: 1 1 320px; min-width: 0; }
1110
+ .aura-page-header__eyebrow { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
1111
+ .aura-page-header__title { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: var(--aura-fg-primary); overflow-wrap: anywhere; }
1112
+ .aura-page-header__breadcrumb { min-width: 0; } /* 5.33 (DxT Monitor #7): Breadcrumb keeps its own type */
1113
+ .aura-page-header__meta { min-width: 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
1114
+ .aura-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
1115
+ @media (min-width: 640px) { .aura-page-header__title { font-size: 36px; } }
1116
+ /* Thai marks need the room a 1.15 line takes away. */
1117
+ .aura-page-header__title:lang(th) { line-height: 1.4; letter-spacing: 0; }
1118
+ .aura-page-header__meta:lang(th) { line-height: 1.6; }
1119
+
1077
1120
  /* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
1078
1121
  /* 5.30: a 2px hairline-colour rule over the totals (border-strong was a glaring white line in dark); a pinned totals row
1079
1122
  * casts a soft shadow over the rows scrolling under it. */
@@ -1190,7 +1233,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1190
1233
  }
1191
1234
  .aura-tag__text { overflow: hidden; text-overflow: ellipsis; max-width: 24ch; }
1192
1235
  .aura-tag.is-selectable { cursor: pointer; transition: background var(--aura-duration-fast) var(--aura-ease), border-color var(--aura-duration-fast) var(--aura-ease); }
1193
- .aura-tag.is-selectable:hover { background: var(--aura-bg-surface-hover); }
1236
+ .aura-tag.is-selectable:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
1194
1237
  .aura-tag.is-selected { background: var(--aura-bg-selected); border-color: var(--aura-fg-accent); color: var(--aura-fg-primary); }
1195
1238
  .aura-tag.is-selectable:focus-visible, .aura-tag__remove:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
1196
1239
  .aura-tag.is-selectable:disabled, .aura-tag.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
@@ -1198,7 +1241,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1198
1241
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: -6px; padding: 0; border: 0; border-radius: var(--aura-radius-full);
1199
1242
  background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
1200
1243
  }
1201
- .aura-tag__remove:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
1244
+ .aura-tag__remove:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
1202
1245
 
1203
1246
  /* ---------- Progress ---------- */
1204
1247
  .aura-progress { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
@@ -1251,7 +1294,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1251
1294
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--aura-space-2); box-sizing: border-box;
1252
1295
  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;
1253
1296
  }
1254
- .aura-page:hover { background: var(--aura-bg-surface-hover); }
1297
+ .aura-page:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
1255
1298
  .aura-page.is-current { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); font-weight: 600; }
1256
1299
  .aura-page:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
1257
1300
  .aura-pagination__gap { min-width: 24px; text-align: center; color: var(--aura-fg-secondary); }
@@ -1269,7 +1312,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1269
1312
  display: flex; align-items: center; gap: var(--aura-space-3); width: 100%; min-height: 48px; padding: var(--aura-space-3) var(--aura-space-1); box-sizing: border-box;
1270
1313
  border: 0; background: transparent; color: var(--aura-fg-primary); font: inherit; text-align: left; cursor: pointer;
1271
1314
  }
1272
- .aura-accordion__heading > button:hover { background: var(--aura-bg-surface-hover); }
1315
+ .aura-accordion__heading > button:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
1273
1316
  .aura-accordion__heading > button:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); border-radius: var(--aura-radius-sm); }
1274
1317
  .aura-accordion__heading > button:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
1275
1318
  .aura-accordion__title { flex: 1; display: flex; flex-direction: column; gap: 2px; }
@@ -1310,7 +1353,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1310
1353
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
1311
1354
  border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
1312
1355
  }
1313
- .aura-combo__chip-remove:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
1356
+ .aura-combo__chip-remove:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
1314
1357
  .aura-combo__chip-remove .aura-icon { width: 14px; height: 14px; }
1315
1358
 
1316
1359
  /* ---------- NumberField ---------- */
@@ -1326,7 +1369,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1326
1369
  }
1327
1370
  .aura-number__step + .aura-number__step { border-left: 1px solid var(--aura-border-default); }
1328
1371
  .aura-number__step:last-child { border-radius: 0 calc(var(--aura-radius-md) - 1px) calc(var(--aura-radius-md) - 1px) 0; }
1329
- .aura-number__step:hover:not(:disabled) { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
1372
+ .aura-number__step:hover:not(:disabled) { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
1330
1373
  .aura-number__step:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
1331
1374
 
1332
1375
  /* ---------- Stepper ---------- */
@@ -1573,7 +1616,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1573
1616
  border: 0; background: transparent; padding: 4px var(--aura-space-2); border-radius: var(--aura-radius-sm);
1574
1617
  font: inherit; font-size: 13px; font-weight: 500; color: var(--aura-fg-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
1575
1618
  }
1576
- .aura-filterbar__clear:hover { background: var(--aura-bg-surface-hover); }
1619
+ .aura-filterbar__clear:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
1577
1620
  .aura-filterbar__clear:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
1578
1621
  @media (max-width: 767.98px) {
1579
1622
  .aura-filterbar__search { flex-basis: 100%; max-width: none; }
@@ -1658,7 +1701,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1658
1701
  .aura-command__heading { padding: var(--aura-space-2) var(--aura-space-2) var(--aura-space-1); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aura-fg-secondary); }
1659
1702
  .aura-command__item { display: flex; align-items: center; gap: var(--aura-space-3); min-height: 40px; padding: 6px var(--aura-space-2); border-radius: var(--aura-radius-sm); cursor: pointer; font-size: 14px; }
1660
1703
  .aura-command__item > .aura-icon { color: var(--aura-fg-secondary); }
1661
- .aura-command__item.is-active { background: var(--aura-bg-surface-hover); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
1704
+ .aura-command__item.is-active { background: var(--aura-hover, var(--aura-bg-surface-hover)); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
1662
1705
  .aura-command__item.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
1663
1706
  .aura-command__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
1664
1707
  .aura-command__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
package/dist/styles.layer.css CHANGED
@@ -72,10 +72,10 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
72
72
  .aura-btn--primary:hover { background: var(--aura-button-primary-bg-hover); }
73
73
 
74
74
  .aura-btn--secondary { border: 1px solid var(--aura-button-secondary-border); color: var(--aura-fg-primary); }
75
- .aura-btn--secondary:hover { background: var(--aura-bg-surface-hover); }
75
+ .aura-btn--secondary:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
76
76
  /* Destructive: filled for the confirm step, outline beside other actions. Loading keeps the colour (busy, not unavailable). */
77
77
  .aura-btn--ghost { color: var(--aura-fg-primary); }
78
- .aura-btn--ghost:hover { background: var(--aura-bg-surface-hover); }
78
+ .aura-btn--ghost:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
79
79
  /* size="sm" (4.16): 32px for toolbars, table rows and card footers. On touch the pill stays 32px and a transparent
80
80
  * ::after grows the hit area to 44px, as IconButton does. */
81
81
  .aura-btn--sm { height: var(--aura-button-height-sm); padding: 0 var(--aura-space-3); gap: 6px; }
@@ -130,7 +130,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
130
130
  font-size: 13px;
131
131
  }
132
132
  .aura-table__row:last-child { border-bottom: 0; }
133
- .aura-table__row:hover { background: var(--aura-bg-surface-hover); }
133
+ .aura-table__row:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
134
134
  .aura-table__row.is-actionable { cursor: pointer; }
135
135
  .aura-table__row--skeleton:hover { background: var(--aura-bg-surface); }
136
136
  .aura-table__row--skeleton .aura-table__td { display: flex; align-items: center; }
@@ -238,7 +238,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
238
238
  }
239
239
  .aura-table__th:hover .aura-table__menu-btn, .aura-table__th:focus-within .aura-table__menu-btn,
240
240
  .aura-table__th:focus .aura-table__menu-btn, .aura-table__menu-btn[aria-expanded="true"] { opacity: 1; }
241
- .aura-table__menu-btn:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
241
+ .aura-table__menu-btn:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
242
242
  @media (hover: none) { .aura-table__menu-btn { opacity: 1; } }
243
243
 
244
244
  /* Drag to reorder */
@@ -275,7 +275,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
275
275
  border: 0; border-radius: var(--aura-radius-sm); background: transparent;
276
276
  color: inherit; font: inherit; text-align: left; cursor: pointer; white-space: nowrap;
277
277
  }
278
- .aura-menu__item:hover, .aura-menu__item:focus { background: var(--aura-bg-surface-hover); outline: none; }
278
+ .aura-menu__item:hover, .aura-menu__item:focus { background: var(--aura-hover, var(--aura-bg-surface-hover)); outline: none; }
279
279
  .aura-menu__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
280
280
  .aura-menu__item:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
281
281
  /* 5.10: a disabled item is dimmed but focusable; its reason stays at full strength (it is the information). */
@@ -330,7 +330,7 @@ a.aura-icon-btn { text-decoration: none; }
330
330
  border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-primary);
331
331
  cursor: pointer; transition: background var(--aura-duration-fast) var(--aura-ease);
332
332
  }
333
- .aura-icon-btn:hover { background: var(--aura-bg-surface-hover); }
333
+ .aura-icon-btn:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
334
334
  .aura-icon-btn--danger { color: var(--aura-fg-danger); }
335
335
  .aura-icon-btn--danger:hover { background: var(--aura-alert-danger-bg); }
336
336
  .aura-icon-btn:disabled { opacity: var(--aura-disabled-opacity); pointer-events: none; }
@@ -358,6 +358,9 @@ a.aura-icon-btn { text-decoration: none; }
358
358
  background: var(--aura-bg-skeleton); animation: aura-pulse var(--aura-duration-pulse) var(--aura-ease) infinite;
359
359
  }
360
360
  .aura-skel--pill { width: 72px; height: 20px; }
361
+ .aura-skel--badge { width: 56px; height: 20px; } /* 5.32: a Badge is 20px in every language */
362
+ /* 5.32: they stand in for inline pills, so they sit in a line of text like them. */
363
+ .aura-skel--pill, .aura-skel--badge { display: inline-block; vertical-align: middle; }
361
364
  .aura-skel--box { width: var(--aura-icon-sm); height: var(--aura-icon-sm); border-radius: var(--aura-radius-xs); }
362
365
  @media (prefers-reduced-motion: reduce) { .aura-skel { animation: none; } }
363
366
  /* 5.29 (Chamber-OS 134): a DataTable skeleton row stands in for the real one — text lines (skeletonLines) on the 20px
@@ -506,7 +509,7 @@ a.aura-icon-btn { text-decoration: none; }
506
509
  .aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
507
510
  /* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a
508
511
  * Select's trigger <button> — which painted every custom Select with the disabled ground (5.16.1, Chamber-OS 109). */
509
- .aura-input:has(input.aura-input__control:read-only) { background: var(--aura-bg-input-disabled); }
512
+ .aura-input:has(input.aura-input__control:read-only) { background: var(--aura-bg-input-disabled); --aura-hover: var(--aura-bg-canvas-hover); } /* 5.33: a DatePicker's toggle shows its hover on the grey ground */
510
513
  /* A read-only Textarea looks like a read-only TextField (it is its own .aura-input, so the rule above can't reach it). */
511
514
  .aura-textarea:read-only:not(:disabled) { background: var(--aura-bg-input-disabled); }
512
515
 
@@ -529,7 +532,7 @@ a.aura-icon-btn { text-decoration: none; }
529
532
  .aura-select.is-open .aura-select__chevron { transform: rotate(180deg); }
530
533
  /* 5.19 (Chamber-OS 114): a read-only Select looks like a read-only TextField — the same ground, no chevron (it doesn't
531
534
  * open), no pointer; the value keeps full contrast. */
532
- .aura-select.is-readonly { background: var(--aura-bg-input-disabled); }
535
+ .aura-select.is-readonly { background: var(--aura-bg-input-disabled); --aura-hover: var(--aura-bg-canvas-hover); }
533
536
  .aura-select.is-readonly .aura-input__control { cursor: default; padding-right: var(--aura-space-3); }
534
537
 
535
538
  .aura-radio-group > legend { margin-bottom: 6px; }
@@ -643,7 +646,7 @@ a.aura-icon-btn { text-decoration: none; }
643
646
  .aura-toast__action::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%); }
644
647
  .aura-toast__text a { padding-block: 2px; }
645
648
  }
646
- .aura-toast__action:hover { background: var(--aura-bg-surface-hover); }
649
+ .aura-toast__action:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
647
650
  .aura-toast__action:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
648
651
  .aura-toast__close { margin-top: -6px; margin-bottom: -6px; }
649
652
 
@@ -658,6 +661,8 @@ a.aura-icon-btn { text-decoration: none; }
658
661
  }
659
662
  /* The Tooltip component's own tips can be hovered (WCAG 1.4.13, 5.1.1); rail labels and cell tips stay click-through. */
660
663
  .aura-tooltip--hoverable { pointer-events: auto; }
664
+ /* 5.32: the shared tip for icon buttons, Pagination arrows, icon-only segments and cut Tags (was a native title). */
665
+ .aura-tooltip--auto:lang(th) { line-height: 1.6; }
661
666
  @keyframes aura-fade-in { from { opacity: 0; } }
662
667
 
663
668
  /* ---------- Dialog ---------- */
@@ -764,6 +769,10 @@ a.aura-tab { text-decoration: none; }
764
769
  }
765
770
  .aura-nav__header { padding: var(--aura-space-5) var(--aura-space-4) var(--aura-space-4); padding-inline-end: var(--aura-space-2); } /* 5.16 (Chamber-OS 96): 8px at the end, so a brand, its dot and a badge share one row at 240px */
766
771
  .aura-nav__scroll { flex: 1; overflow-y: auto; padding: 0 var(--aura-space-3); }
772
+ /* 5.32 (DxT Monitor request 1): headerDivider — the board's header: 72px, content 20px from the top and start, a
773
+ * full-width line at its foot, 16px before the first item. The collapsed rail keeps its own 8px sides (below). */
774
+ .aura-nav--header-divider > .aura-nav__header { box-sizing: border-box; min-height: 72px; padding-top: var(--aura-space-5); padding-bottom: var(--aura-space-3); padding-inline-start: var(--aura-space-5); border-bottom: 1px solid var(--aura-border-default); }
775
+ .aura-nav--header-divider > .aura-nav__header + .aura-nav__scroll { padding-top: var(--aura-space-4); }
767
776
  /* No header: keep the first item off the top edge (5.0.2). */
768
777
  .aura-nav > .aura-nav__scroll:first-child { padding-top: var(--aura-space-3); }
769
778
  .aura-nav--borderless { border-right: 0; }
@@ -777,7 +786,17 @@ a.aura-tab { text-decoration: none; }
777
786
  text-decoration: none; text-align: left; cursor: pointer;
778
787
  transition: background var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease);
779
788
  }
780
- .aura-nav__item:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
789
+ .aura-nav__item:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
790
+ /* 5.33 (DxT Monitor #5): hover fills read --aura-hover, else aura-bg-surface-hover. On the canvas — AppShell, which
791
+ * is canvas, and SideNav — the surface hover (zinc-50 in light, the canvas itself) didn't show, so there it is
792
+ * aura-bg-canvas-hover; white surfaces inside set it back. A :root override of aura-bg-surface-hover still applies
793
+ * on surfaces; override aura-bg-canvas-hover for the canvas. */
794
+ .aura-shell, .aura-nav { --aura-hover: var(--aura-bg-canvas-hover); }
795
+ .aura-card, .aura-surface, .aura-stat, .aura-tbl-wrap, .aura-table, .aura-shell__bar, .aura-bottomnav, .aura-actionbar,
796
+ .aura-input, .aura-upload, .aura-upload__list, .aura-tag, .aura-dialog, .aura-drawer, .aura-popover, .aura-combo__popover,
797
+ .aura-cal__popover, .aura-menu, .aura-toast, .aura-command { --aura-hover: var(--aura-bg-surface-hover); }
798
+ /* Canvas-coloured bands inside those surfaces: SideNav in the drawer, the DataTable header, picker corner and totals. */
799
+ .aura-drawer .aura-nav, .aura-table__head, .aura-table__picker, .aura-table__total { --aura-hover: var(--aura-bg-canvas-hover); }
781
800
  .aura-nav__item.is-active { background: var(--aura-bg-selected); color: var(--aura-fg-primary); }
782
801
  .aura-nav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
783
802
  .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
@@ -889,7 +908,7 @@ a.aura-tab { text-decoration: none; }
889
908
  }
890
909
  .aura-combo__toggle { right: 6px; }
891
910
  .aura-combo__clear { right: calc(6px + var(--aura-control-sm) - 4px); }
892
- .aura-combo__clear:hover, .aura-combo__toggle:hover, .aura-date__toggle:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
911
+ .aura-combo__clear:hover, .aura-combo__toggle:hover, .aura-date__toggle:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
893
912
  .aura-combo__toggle .aura-icon { transition: transform var(--aura-duration-fast) var(--aura-ease); }
894
913
  .aura-combo.is-open .aura-combo__toggle .aura-icon { transform: rotate(180deg); }
895
914
  .aura-date__toggle:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
@@ -905,7 +924,7 @@ a.aura-tab { text-decoration: none; }
905
924
  border-radius: var(--aura-radius-sm); cursor: pointer;
906
925
  }
907
926
  .aura-combo__option > .aura-icon { color: var(--aura-fg-secondary); }
908
- .aura-combo__option.is-active { background: var(--aura-bg-surface-hover); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
927
+ .aura-combo__option.is-active { background: var(--aura-hover, var(--aura-bg-surface-hover)); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
909
928
  .aura-combo__option.is-selected { font-weight: 500; }
910
929
  .aura-combo__option.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
911
930
  .aura-combo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@@ -938,7 +957,7 @@ a.aura-tab { text-decoration: none; }
938
957
  border: 0; border-radius: var(--aura-radius-sm); background: transparent; color: var(--aura-fg-primary);
939
958
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
940
959
  }
941
- .aura-cal__title:hover { background: var(--aura-bg-surface-hover); }
960
+ .aura-cal__title:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
942
961
  .aura-cal__title:focus-visible, .aura-cal__link:focus-visible, .aura-cal__year:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
943
962
  .aura-cal__grid { border-collapse: separate; border-spacing: 0 2px; width: 100%; }
944
963
  .aura-cal__grid th { height: 28px; padding: 0; font-size: 12px; font-weight: 500; color: var(--aura-fg-secondary); }
@@ -947,7 +966,7 @@ a.aura-tab { text-decoration: none; }
947
966
  width: var(--aura-cal-cell); height: var(--aura-cal-cell); padding: 0; border: 0; border-radius: var(--aura-radius-full);
948
967
  background: transparent; color: var(--aura-fg-primary); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
949
968
  }
950
- .aura-cal__day:hover { background: var(--aura-bg-surface-hover); }
969
+ .aura-cal__day:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
951
970
  .aura-cal__day.is-outside { color: var(--aura-fg-tertiary); }
952
971
  .aura-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--aura-border-control); font-weight: 600; }
953
972
  .aura-cal__day.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); box-shadow: none; }
@@ -962,14 +981,14 @@ a.aura-tab { text-decoration: none; }
962
981
  height: 40px; border: 0; border-radius: var(--aura-radius-sm); background: transparent; color: var(--aura-fg-primary);
963
982
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
964
983
  }
965
- .aura-cal__year:hover { background: var(--aura-bg-surface-hover); }
984
+ .aura-cal__year:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
966
985
  .aura-cal__year.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); }
967
986
  .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); }
968
987
  .aura-cal__link {
969
988
  height: var(--aura-control-sm); padding: 0 var(--aura-space-2); border: 0; border-radius: var(--aura-radius-sm);
970
989
  background: transparent; color: var(--aura-fg-accent); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
971
990
  }
972
- .aura-cal__link:hover { background: var(--aura-bg-surface-hover); }
991
+ .aura-cal__link:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
973
992
  .aura-cal__link:disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
974
993
 
975
994
  /* ---------- Drawer ---------- */
@@ -989,7 +1008,7 @@ a.aura-tab { text-decoration: none; }
989
1008
  .aura-drawer--lg { max-width: var(--aura-drawer-lg); }
990
1009
  .aura-drawer--nav { max-width: var(--aura-sidenav-width); }
991
1010
  .aura-drawer__head { display: flex; align-items: center; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-4) var(--aura-space-2) var(--aura-space-6); }
992
- .aura-drawer--nav .aura-drawer__head { position: absolute; top: var(--aura-space-2); right: var(--aura-space-2); padding: 0; z-index: 1; }
1011
+ .aura-drawer--nav .aura-drawer__head { position: absolute; top: var(--aura-space-2); inset-inline-end: var(--aura-space-2); padding: 0; z-index: 1; } /* 5.32: inline-end, so RTL puts it on the left with the header's room */
993
1012
  .aura-drawer__title { flex: 1; margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
994
1013
  .aura-drawer__desc { margin: 0; padding: 0 var(--aura-space-6); font-size: 14px; line-height: 1.7; color: var(--aura-fg-secondary); }
995
1014
  .aura-drawer__body {
@@ -999,6 +1018,14 @@ a.aura-tab { text-decoration: none; }
999
1018
  }
1000
1019
  .aura-drawer--nav .aura-drawer__body { padding: 0; }
1001
1020
  .aura-drawer--nav .aura-nav { width: 100%; border-right: 0; }
1021
+ /* 5.32: the phone drawer's close button (32px, 8px in) sits over the header's end: keep the brand clear of it. */
1022
+ .aura-drawer--nav .aura-nav__header { padding-inline-end: 48px; }
1023
+ /* 5.33: the drawer's close button is 44px on phones and touch screens (touchHeight), so the header leaves 60px. */
1024
+ @media (max-width: 639.98px), (pointer: coarse) { .aura-drawer--nav .aura-nav__header { padding-inline-end: 60px; } }
1025
+ /* 5.33 (DxT Monitor #8): in the phone drawer a divided header takes the top bar's height (its line meets the bar's
1026
+ * line beside it), its content centred; the close button is centred on it. The desktop sidebar keeps 72px. */
1027
+ .aura-drawer--nav .aura-nav--header-divider > .aura-nav__header { box-sizing: border-box; min-height: var(--aura-shell-bar-height, 56px); padding-top: 0; padding-bottom: 0; display: flex; align-items: center; }
1028
+ .aura-drawer--nav-divided .aura-drawer__head { top: 0; height: var(--aura-shell-bar-height, 56px); } /* a class from AppShell, not :has(), so older browsers centre it too */
1002
1029
  .aura-drawer__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-6); border-top: 1px solid var(--aura-border-default); }
1003
1030
  @media (prefers-reduced-motion: reduce) { .aura-drawer { animation: none; } }
1004
1031
 
@@ -1076,6 +1103,22 @@ a.aura-tab { text-decoration: none; }
1076
1103
  /* The shell already pads its content: a Container directly inside only caps the width. */
1077
1104
  .aura-shell__content:not(.is-flush) > .aura-container { padding-left: 0; padding-right: 0; }
1078
1105
 
1106
+ /* ---------- PageHeader (5.32, DxT Monitor request 3) ----------
1107
+ * No outer padding: AppShell's content padding is the page margin. Eyebrow mono 12/1.7, h1 display 36/1.15,
1108
+ * meta 13/1.5, 4px between them; actions at the end, on the text's last line, 24px away; below 640px the title is
1109
+ * 28px and the actions wrap under the text. */
1110
+ .aura-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--aura-space-4) var(--aura-space-6); min-width: 0; font-family: var(--font-sans); }
1111
+ .aura-page-header__text { display: flex; flex-direction: column; gap: var(--aura-space-1); flex: 1 1 320px; min-width: 0; }
1112
+ .aura-page-header__eyebrow { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
1113
+ .aura-page-header__title { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: var(--aura-fg-primary); overflow-wrap: anywhere; }
1114
+ .aura-page-header__breadcrumb { min-width: 0; } /* 5.33 (DxT Monitor #7): Breadcrumb keeps its own type */
1115
+ .aura-page-header__meta { min-width: 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
1116
+ .aura-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
1117
+ @media (min-width: 640px) { .aura-page-header__title { font-size: 36px; } }
1118
+ /* Thai marks need the room a 1.15 line takes away. */
1119
+ .aura-page-header__title:lang(th) { line-height: 1.4; letter-spacing: 0; }
1120
+ .aura-page-header__meta:lang(th) { line-height: 1.6; }
1121
+
1079
1122
  /* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
1080
1123
  /* 5.30: a 2px hairline-colour rule over the totals (border-strong was a glaring white line in dark); a pinned totals row
1081
1124
  * casts a soft shadow over the rows scrolling under it. */
@@ -1192,7 +1235,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1192
1235
  }
1193
1236
  .aura-tag__text { overflow: hidden; text-overflow: ellipsis; max-width: 24ch; }
1194
1237
  .aura-tag.is-selectable { cursor: pointer; transition: background var(--aura-duration-fast) var(--aura-ease), border-color var(--aura-duration-fast) var(--aura-ease); }
1195
- .aura-tag.is-selectable:hover { background: var(--aura-bg-surface-hover); }
1238
+ .aura-tag.is-selectable:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
1196
1239
  .aura-tag.is-selected { background: var(--aura-bg-selected); border-color: var(--aura-fg-accent); color: var(--aura-fg-primary); }
1197
1240
  .aura-tag.is-selectable:focus-visible, .aura-tag__remove:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
1198
1241
  .aura-tag.is-selectable:disabled, .aura-tag.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
@@ -1200,7 +1243,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1200
1243
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: -6px; padding: 0; border: 0; border-radius: var(--aura-radius-full);
1201
1244
  background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
1202
1245
  }
1203
- .aura-tag__remove:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
1246
+ .aura-tag__remove:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
1204
1247
 
1205
1248
  /* ---------- Progress ---------- */
1206
1249
  .aura-progress { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
@@ -1253,7 +1296,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1253
1296
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--aura-space-2); box-sizing: border-box;
1254
1297
  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;
1255
1298
  }
1256
- .aura-page:hover { background: var(--aura-bg-surface-hover); }
1299
+ .aura-page:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
1257
1300
  .aura-page.is-current { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); font-weight: 600; }
1258
1301
  .aura-page:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
1259
1302
  .aura-pagination__gap { min-width: 24px; text-align: center; color: var(--aura-fg-secondary); }
@@ -1271,7 +1314,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1271
1314
  display: flex; align-items: center; gap: var(--aura-space-3); width: 100%; min-height: 48px; padding: var(--aura-space-3) var(--aura-space-1); box-sizing: border-box;
1272
1315
  border: 0; background: transparent; color: var(--aura-fg-primary); font: inherit; text-align: left; cursor: pointer;
1273
1316
  }
1274
- .aura-accordion__heading > button:hover { background: var(--aura-bg-surface-hover); }
1317
+ .aura-accordion__heading > button:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
1275
1318
  .aura-accordion__heading > button:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); border-radius: var(--aura-radius-sm); }
1276
1319
  .aura-accordion__heading > button:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
1277
1320
  .aura-accordion__title { flex: 1; display: flex; flex-direction: column; gap: 2px; }
@@ -1312,7 +1355,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1312
1355
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
1313
1356
  border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
1314
1357
  }
1315
- .aura-combo__chip-remove:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
1358
+ .aura-combo__chip-remove:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
1316
1359
  .aura-combo__chip-remove .aura-icon { width: 14px; height: 14px; }
1317
1360
 
1318
1361
  /* ---------- NumberField ---------- */
@@ -1328,7 +1371,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1328
1371
  }
1329
1372
  .aura-number__step + .aura-number__step { border-left: 1px solid var(--aura-border-default); }
1330
1373
  .aura-number__step:last-child { border-radius: 0 calc(var(--aura-radius-md) - 1px) calc(var(--aura-radius-md) - 1px) 0; }
1331
- .aura-number__step:hover:not(:disabled) { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
1374
+ .aura-number__step:hover:not(:disabled) { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
1332
1375
  .aura-number__step:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
1333
1376
 
1334
1377
  /* ---------- Stepper ---------- */
@@ -1575,7 +1618,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1575
1618
  border: 0; background: transparent; padding: 4px var(--aura-space-2); border-radius: var(--aura-radius-sm);
1576
1619
  font: inherit; font-size: 13px; font-weight: 500; color: var(--aura-fg-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
1577
1620
  }
1578
- .aura-filterbar__clear:hover { background: var(--aura-bg-surface-hover); }
1621
+ .aura-filterbar__clear:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
1579
1622
  .aura-filterbar__clear:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
1580
1623
  @media (max-width: 767.98px) {
1581
1624
  .aura-filterbar__search { flex-basis: 100%; max-width: none; }
@@ -1660,7 +1703,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1660
1703
  .aura-command__heading { padding: var(--aura-space-2) var(--aura-space-2) var(--aura-space-1); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aura-fg-secondary); }
1661
1704
  .aura-command__item { display: flex; align-items: center; gap: var(--aura-space-3); min-height: 40px; padding: 6px var(--aura-space-2); border-radius: var(--aura-radius-sm); cursor: pointer; font-size: 14px; }
1662
1705
  .aura-command__item > .aura-icon { color: var(--aura-fg-secondary); }
1663
- .aura-command__item.is-active { background: var(--aura-bg-surface-hover); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
1706
+ .aura-command__item.is-active { background: var(--aura-hover, var(--aura-bg-surface-hover)); outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: calc(-1 * var(--aura-focus-ring-width)); }
1664
1707
  .aura-command__item.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
1665
1708
  .aura-command__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
1666
1709
  .aura-command__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jirawatpyk/aura-react",
3
- "version": "5.31.0",
3
+ "version": "5.33.0",
4
4
  "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
5
5
  "license": "MIT",
6
6
  "type": "module",