@jirawatpyk/aura-react 5.32.0 → 5.34.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 (29) hide show
  1. package/README.md +17 -2
  2. package/dist/aura.bundle.js +710 -414
  3. package/dist/cjs/index.cjs +709 -413
  4. package/dist/esm/AppShell.js +33 -14
  5. package/dist/esm/PageHeader.js +1 -0
  6. package/dist/esm/StatusTile.js +53 -0
  7. package/dist/esm/autoTip.js +5 -0
  8. package/dist/esm/breakpoints.js +18 -1
  9. package/dist/esm/index.js +5 -0
  10. package/dist/esm/responsive.js +1 -15
  11. package/dist/esm/strings.js +4 -0
  12. package/dist/esm/strings.sv.js +4 -0
  13. package/dist/esm/strings.th.js +4 -0
  14. package/dist/esm/tiles.js +212 -0
  15. package/dist/index.d.cts +119 -36
  16. package/dist/index.d.ts +119 -36
  17. package/dist/locales/sv.cjs +4 -0
  18. package/dist/locales/sv.d.cts +5 -0
  19. package/dist/locales/sv.d.ts +5 -0
  20. package/dist/locales/th.cjs +4 -0
  21. package/dist/locales/th.d.cts +5 -0
  22. package/dist/locales/th.d.ts +5 -0
  23. package/dist/server/index.cjs +264 -27
  24. package/dist/server/index.d.cts +79 -0
  25. package/dist/server/index.d.ts +79 -0
  26. package/dist/server/index.js +264 -27
  27. package/dist/styles.css +103 -24
  28. package/dist/styles.layer.css +103 -24
  29. 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; }
@@ -507,7 +507,7 @@ a.aura-icon-btn { text-decoration: none; }
507
507
  .aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
508
508
  /* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a
509
509
  * Select's trigger <button> — which painted every custom Select with the disabled ground (5.16.1, Chamber-OS 109). */
510
- .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 */
511
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). */
512
512
  .aura-textarea:read-only:not(:disabled) { background: var(--aura-bg-input-disabled); }
513
513
 
@@ -530,7 +530,7 @@ a.aura-icon-btn { text-decoration: none; }
530
530
  .aura-select.is-open .aura-select__chevron { transform: rotate(180deg); }
531
531
  /* 5.19 (Chamber-OS 114): a read-only Select looks like a read-only TextField — the same ground, no chevron (it doesn't
532
532
  * open), no pointer; the value keeps full contrast. */
533
- .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); }
534
534
  .aura-select.is-readonly .aura-input__control { cursor: default; padding-right: var(--aura-space-3); }
535
535
 
536
536
  .aura-radio-group > legend { margin-bottom: 6px; }
@@ -644,7 +644,7 @@ a.aura-icon-btn { text-decoration: none; }
644
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%); }
645
645
  .aura-toast__text a { padding-block: 2px; }
646
646
  }
647
- .aura-toast__action:hover { background: var(--aura-bg-surface-hover); }
647
+ .aura-toast__action:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
648
648
  .aura-toast__action:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
649
649
  .aura-toast__close { margin-top: -6px; margin-bottom: -6px; }
650
650
 
@@ -784,7 +784,17 @@ a.aura-tab { text-decoration: none; }
784
784
  text-decoration: none; text-align: left; cursor: pointer;
785
785
  transition: background var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease);
786
786
  }
787
- .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); }
788
798
  .aura-nav__item.is-active { background: var(--aura-bg-selected); color: var(--aura-fg-primary); }
789
799
  .aura-nav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
790
800
  .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
@@ -896,7 +906,7 @@ a.aura-tab { text-decoration: none; }
896
906
  }
897
907
  .aura-combo__toggle { right: 6px; }
898
908
  .aura-combo__clear { right: calc(6px + var(--aura-control-sm) - 4px); }
899
- .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); }
900
910
  .aura-combo__toggle .aura-icon { transition: transform var(--aura-duration-fast) var(--aura-ease); }
901
911
  .aura-combo.is-open .aura-combo__toggle .aura-icon { transform: rotate(180deg); }
902
912
  .aura-date__toggle:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
@@ -912,7 +922,7 @@ a.aura-tab { text-decoration: none; }
912
922
  border-radius: var(--aura-radius-sm); cursor: pointer;
913
923
  }
914
924
  .aura-combo__option > .aura-icon { color: var(--aura-fg-secondary); }
915
- .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)); }
916
926
  .aura-combo__option.is-selected { font-weight: 500; }
917
927
  .aura-combo__option.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
918
928
  .aura-combo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@@ -945,7 +955,7 @@ a.aura-tab { text-decoration: none; }
945
955
  border: 0; border-radius: var(--aura-radius-sm); background: transparent; color: var(--aura-fg-primary);
946
956
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
947
957
  }
948
- .aura-cal__title:hover { background: var(--aura-bg-surface-hover); }
958
+ .aura-cal__title:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
949
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; }
950
960
  .aura-cal__grid { border-collapse: separate; border-spacing: 0 2px; width: 100%; }
951
961
  .aura-cal__grid th { height: 28px; padding: 0; font-size: 12px; font-weight: 500; color: var(--aura-fg-secondary); }
@@ -954,7 +964,7 @@ a.aura-tab { text-decoration: none; }
954
964
  width: var(--aura-cal-cell); height: var(--aura-cal-cell); padding: 0; border: 0; border-radius: var(--aura-radius-full);
955
965
  background: transparent; color: var(--aura-fg-primary); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
956
966
  }
957
- .aura-cal__day:hover { background: var(--aura-bg-surface-hover); }
967
+ .aura-cal__day:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
958
968
  .aura-cal__day.is-outside { color: var(--aura-fg-tertiary); }
959
969
  .aura-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--aura-border-control); font-weight: 600; }
960
970
  .aura-cal__day.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); box-shadow: none; }
@@ -969,14 +979,14 @@ a.aura-tab { text-decoration: none; }
969
979
  height: 40px; border: 0; border-radius: var(--aura-radius-sm); background: transparent; color: var(--aura-fg-primary);
970
980
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
971
981
  }
972
- .aura-cal__year:hover { background: var(--aura-bg-surface-hover); }
982
+ .aura-cal__year:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
973
983
  .aura-cal__year.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); }
974
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); }
975
985
  .aura-cal__link {
976
986
  height: var(--aura-control-sm); padding: 0 var(--aura-space-2); border: 0; border-radius: var(--aura-radius-sm);
977
987
  background: transparent; color: var(--aura-fg-accent); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
978
988
  }
979
- .aura-cal__link:hover { background: var(--aura-bg-surface-hover); }
989
+ .aura-cal__link:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
980
990
  .aura-cal__link:disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
981
991
 
982
992
  /* ---------- Drawer ---------- */
@@ -1008,6 +1018,12 @@ a.aura-tab { text-decoration: none; }
1008
1018
  .aura-drawer--nav .aura-nav { width: 100%; border-right: 0; }
1009
1019
  /* 5.32: the phone drawer's close button (32px, 8px in) sits over the header's end: keep the brand clear of it. */
1010
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 */
1011
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); }
1012
1028
  @media (prefers-reduced-motion: reduce) { .aura-drawer { animation: none; } }
1013
1029
 
@@ -1093,6 +1109,7 @@ a.aura-tab { text-decoration: none; }
1093
1109
  .aura-page-header__text { display: flex; flex-direction: column; gap: var(--aura-space-1); flex: 1 1 320px; min-width: 0; }
1094
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; }
1095
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 */
1096
1113
  .aura-page-header__meta { min-width: 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
1097
1114
  .aura-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
1098
1115
  @media (min-width: 640px) { .aura-page-header__title { font-size: 36px; } }
@@ -1147,6 +1164,68 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
1147
1164
  /* Anything else interactive in the tile sits above the stretched link. No specificity, so a control's own position wins. */
1148
1165
  :where(.aura-stat--label-link) :where(a, button, input, select, textarea, label, summary, [tabindex]):not(:where(.aura-stat__link)) { position: relative; z-index: 1; }
1149
1166
 
1167
+ /* ---------- StatusTile, TileGrid, Sparkline (5.34, DxT Monitor S06) ---------- */
1168
+ .aura-tile-grid { list-style: none; margin: 0; padding: 0; --aura-grid-gap-base: var(--aura-space-2); --aura-grid-gap-sm: var(--aura-space-2); --aura-grid-gap-md: var(--aura-space-2); --aura-grid-gap-lg: var(--aura-space-2); --aura-grid-gap-xl: var(--aura-space-2); }
1169
+ .aura-tile-grid > li { display: flex; min-width: 0; container: aura-status-tile / inline-size; } /* the narrow-tile query reads the cell: a grid cell has a definite width */
1170
+ .aura-tile-grid > li > * { flex: 1; min-width: 0; }
1171
+ .aura-status-tile {
1172
+ position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; min-width: 0;
1173
+ padding: var(--aura-space-2) var(--aura-space-3); background: var(--aura-bg-surface); color: var(--aura-fg-primary);
1174
+ border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-sm);
1175
+ font-family: var(--font-sans); font-size: 13px; line-height: 18px; text-align: start; text-decoration: none;
1176
+ --aura-hover: var(--aura-bg-surface-hover);
1177
+ }
1178
+ .aura-status-tile--down { background: var(--aura-alert-danger-bg); border-color: var(--aura-alert-danger-border); }
1179
+ .aura-status-tile--problem { background: var(--aura-alert-warning-bg); border-color: var(--aura-alert-warning-border); }
1180
+ .aura-status-tile--maintenance { background: var(--aura-alert-info-bg); border-color: var(--aura-alert-info-border); }
1181
+ .aura-status-tile.is-interactive { cursor: pointer; transition: border-color var(--aura-duration-fast) var(--aura-ease); }
1182
+ .aura-status-tile.is-interactive:hover { border-color: var(--aura-border-strong); }
1183
+ .aura-status-tile.is-interactive:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
1184
+ .aura-status-tile__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--aura-space-2); min-width: 0; }
1185
+ .aura-status-tile__sep { font-size: 0; }
1186
+ .aura-status-tile__icon { flex: none; margin-top: 1px; color: var(--aura-fg-secondary); }
1187
+ .aura-status-tile--down .aura-status-tile__icon { color: var(--aura-alert-danger-fg); }
1188
+ .aura-status-tile--problem .aura-status-tile__icon { color: var(--aura-alert-warning-fg); }
1189
+ .aura-status-tile--maintenance .aura-status-tile__icon { color: var(--aura-alert-info-fg); }
1190
+ /* Two lines at most: similar names stay apart. */
1191
+ .aura-status-tile__title {
1192
+ flex: 1 1 0; min-width: 0; font-weight: 600; overflow-wrap: break-word;
1193
+ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
1194
+ }
1195
+ .aura-status-tile__value { flex: none; margin-inline-start: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
1196
+ .aura-status-tile__value.is-danger, .aura-status-tile__marker.is-danger { color: var(--aura-fg-danger); }
1197
+ .aura-status-tile__value.is-warning, .aura-status-tile__marker.is-warning { color: var(--aura-fg-warning); }
1198
+ .aura-status-tile__value.is-accent, .aura-status-tile__marker.is-accent { color: var(--aura-fg-accent); }
1199
+ .aura-status-tile__value.is-neutral, .aura-status-tile__marker.is-neutral { color: var(--aura-fg-secondary); }
1200
+ .aura-status-tile--down .aura-status-tile__value.is-danger { color: var(--aura-alert-danger-fg); }
1201
+ .aura-status-tile--problem .aura-status-tile__value.is-warning { color: var(--aura-alert-warning-fg); }
1202
+ .aura-status-tile--maintenance .aura-status-tile__value.is-accent { color: var(--aura-alert-info-fg); }
1203
+ /* A narrow tile in a TileGrid (two columns on a phone) puts the value on its own line under the title, in every tile
1204
+ * alike, rather than squeezing the title to a word. The grid's cells are the containers: on the tile itself, inline-size
1205
+ * containment would collapse a tile in a flex row or an inline block to nothing. */
1206
+ @container aura-status-tile (max-width: 225.98px) {
1207
+ .aura-status-tile__value { flex-basis: 100%; margin-inline-start: 0; padding-inline-start: 24px; }
1208
+ }
1209
+ /* The second line starts under the title. */
1210
+ .aura-status-tile__foot { display: flex; align-items: center; gap: var(--aura-space-2); min-width: 0; padding-inline-start: 24px; font-size: 12px; color: var(--aura-fg-secondary); }
1211
+ .aura-status-tile__meta { flex: 1; min-width: 0; overflow-wrap: anywhere; }
1212
+ .aura-status-tile__markers { display: inline-flex; align-items: center; gap: var(--aura-space-1); margin-inline-start: auto; flex: none; }
1213
+ .aura-status-tile__marker { display: inline-flex; }
1214
+ .aura-status-tile:lang(th) { line-height: 20px; }
1215
+ .aura-sparkline { display: inline-block; flex: none; vertical-align: middle; overflow: visible; color: var(--aura-fg-secondary); }
1216
+ .aura-sparkline.is-accent { color: var(--aura-fg-accent); }
1217
+ .aura-sparkline.is-danger { color: var(--aura-fg-danger); }
1218
+ .aura-sparkline.is-warning { color: var(--aura-fg-warning); }
1219
+ .aura-sparkline.is-positive { color: var(--aura-fg-positive); }
1220
+ .aura-sparkline__line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
1221
+ .aura-sparkline__dots { fill: currentColor; }
1222
+ .aura-sparkline__band { fill: var(--aura-fg-danger); opacity: 0.16; }
1223
+ .aura-sparkline__ticks { fill: var(--aura-fg-danger); }
1224
+ @media (forced-colors: active) {
1225
+ .aura-sparkline { color: CanvasText; }
1226
+ .aura-sparkline__band, .aura-sparkline__ticks { fill: Highlight; }
1227
+ }
1228
+
1150
1229
  /* ---------- TimePicker ---------- */
1151
1230
  .aura-time__popover { min-width: 160px; }
1152
1231
  .aura-time__option { min-height: 36px; font-variant-numeric: tabular-nums; }
@@ -1216,7 +1295,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1216
1295
  }
1217
1296
  .aura-tag__text { overflow: hidden; text-overflow: ellipsis; max-width: 24ch; }
1218
1297
  .aura-tag.is-selectable { cursor: pointer; transition: background var(--aura-duration-fast) var(--aura-ease), border-color var(--aura-duration-fast) var(--aura-ease); }
1219
- .aura-tag.is-selectable:hover { background: var(--aura-bg-surface-hover); }
1298
+ .aura-tag.is-selectable:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
1220
1299
  .aura-tag.is-selected { background: var(--aura-bg-selected); border-color: var(--aura-fg-accent); color: var(--aura-fg-primary); }
1221
1300
  .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); }
1222
1301
  .aura-tag.is-selectable:disabled, .aura-tag.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
@@ -1224,7 +1303,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1224
1303
  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);
1225
1304
  background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
1226
1305
  }
1227
- .aura-tag__remove:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
1306
+ .aura-tag__remove:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
1228
1307
 
1229
1308
  /* ---------- Progress ---------- */
1230
1309
  .aura-progress { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
@@ -1277,7 +1356,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1277
1356
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--aura-space-2); box-sizing: border-box;
1278
1357
  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;
1279
1358
  }
1280
- .aura-page:hover { background: var(--aura-bg-surface-hover); }
1359
+ .aura-page:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
1281
1360
  .aura-page.is-current { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); font-weight: 600; }
1282
1361
  .aura-page:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
1283
1362
  .aura-pagination__gap { min-width: 24px; text-align: center; color: var(--aura-fg-secondary); }
@@ -1295,7 +1374,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1295
1374
  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;
1296
1375
  border: 0; background: transparent; color: var(--aura-fg-primary); font: inherit; text-align: left; cursor: pointer;
1297
1376
  }
1298
- .aura-accordion__heading > button:hover { background: var(--aura-bg-surface-hover); }
1377
+ .aura-accordion__heading > button:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
1299
1378
  .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); }
1300
1379
  .aura-accordion__heading > button:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
1301
1380
  .aura-accordion__title { flex: 1; display: flex; flex-direction: column; gap: 2px; }
@@ -1336,7 +1415,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1336
1415
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
1337
1416
  border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
1338
1417
  }
1339
- .aura-combo__chip-remove:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
1418
+ .aura-combo__chip-remove:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
1340
1419
  .aura-combo__chip-remove .aura-icon { width: 14px; height: 14px; }
1341
1420
 
1342
1421
  /* ---------- NumberField ---------- */
@@ -1352,7 +1431,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1352
1431
  }
1353
1432
  .aura-number__step + .aura-number__step { border-left: 1px solid var(--aura-border-default); }
1354
1433
  .aura-number__step:last-child { border-radius: 0 calc(var(--aura-radius-md) - 1px) calc(var(--aura-radius-md) - 1px) 0; }
1355
- .aura-number__step:hover:not(:disabled) { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
1434
+ .aura-number__step:hover:not(:disabled) { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
1356
1435
  .aura-number__step:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
1357
1436
 
1358
1437
  /* ---------- Stepper ---------- */
@@ -1599,7 +1678,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1599
1678
  border: 0; background: transparent; padding: 4px var(--aura-space-2); border-radius: var(--aura-radius-sm);
1600
1679
  font: inherit; font-size: 13px; font-weight: 500; color: var(--aura-fg-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
1601
1680
  }
1602
- .aura-filterbar__clear:hover { background: var(--aura-bg-surface-hover); }
1681
+ .aura-filterbar__clear:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
1603
1682
  .aura-filterbar__clear:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
1604
1683
  @media (max-width: 767.98px) {
1605
1684
  .aura-filterbar__search { flex-basis: 100%; max-width: none; }
@@ -1684,7 +1763,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1684
1763
  .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); }
1685
1764
  .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; }
1686
1765
  .aura-command__item > .aura-icon { color: var(--aura-fg-secondary); }
1687
- .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)); }
1766
+ .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)); }
1688
1767
  .aura-command__item.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
1689
1768
  .aura-command__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
1690
1769
  .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; }
@@ -509,7 +509,7 @@ a.aura-icon-btn { text-decoration: none; }
509
509
  .aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
510
510
  /* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a
511
511
  * Select's trigger <button> — which painted every custom Select with the disabled ground (5.16.1, Chamber-OS 109). */
512
- .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 */
513
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). */
514
514
  .aura-textarea:read-only:not(:disabled) { background: var(--aura-bg-input-disabled); }
515
515
 
@@ -532,7 +532,7 @@ a.aura-icon-btn { text-decoration: none; }
532
532
  .aura-select.is-open .aura-select__chevron { transform: rotate(180deg); }
533
533
  /* 5.19 (Chamber-OS 114): a read-only Select looks like a read-only TextField — the same ground, no chevron (it doesn't
534
534
  * open), no pointer; the value keeps full contrast. */
535
- .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); }
536
536
  .aura-select.is-readonly .aura-input__control { cursor: default; padding-right: var(--aura-space-3); }
537
537
 
538
538
  .aura-radio-group > legend { margin-bottom: 6px; }
@@ -646,7 +646,7 @@ a.aura-icon-btn { text-decoration: none; }
646
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%); }
647
647
  .aura-toast__text a { padding-block: 2px; }
648
648
  }
649
- .aura-toast__action:hover { background: var(--aura-bg-surface-hover); }
649
+ .aura-toast__action:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
650
650
  .aura-toast__action:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
651
651
  .aura-toast__close { margin-top: -6px; margin-bottom: -6px; }
652
652
 
@@ -786,7 +786,17 @@ a.aura-tab { text-decoration: none; }
786
786
  text-decoration: none; text-align: left; cursor: pointer;
787
787
  transition: background var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease);
788
788
  }
789
- .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); }
790
800
  .aura-nav__item.is-active { background: var(--aura-bg-selected); color: var(--aura-fg-primary); }
791
801
  .aura-nav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
792
802
  .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
@@ -898,7 +908,7 @@ a.aura-tab { text-decoration: none; }
898
908
  }
899
909
  .aura-combo__toggle { right: 6px; }
900
910
  .aura-combo__clear { right: calc(6px + var(--aura-control-sm) - 4px); }
901
- .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); }
902
912
  .aura-combo__toggle .aura-icon { transition: transform var(--aura-duration-fast) var(--aura-ease); }
903
913
  .aura-combo.is-open .aura-combo__toggle .aura-icon { transform: rotate(180deg); }
904
914
  .aura-date__toggle:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 0; }
@@ -914,7 +924,7 @@ a.aura-tab { text-decoration: none; }
914
924
  border-radius: var(--aura-radius-sm); cursor: pointer;
915
925
  }
916
926
  .aura-combo__option > .aura-icon { color: var(--aura-fg-secondary); }
917
- .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)); }
918
928
  .aura-combo__option.is-selected { font-weight: 500; }
919
929
  .aura-combo__option.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
920
930
  .aura-combo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@@ -947,7 +957,7 @@ a.aura-tab { text-decoration: none; }
947
957
  border: 0; border-radius: var(--aura-radius-sm); background: transparent; color: var(--aura-fg-primary);
948
958
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
949
959
  }
950
- .aura-cal__title:hover { background: var(--aura-bg-surface-hover); }
960
+ .aura-cal__title:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
951
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; }
952
962
  .aura-cal__grid { border-collapse: separate; border-spacing: 0 2px; width: 100%; }
953
963
  .aura-cal__grid th { height: 28px; padding: 0; font-size: 12px; font-weight: 500; color: var(--aura-fg-secondary); }
@@ -956,7 +966,7 @@ a.aura-tab { text-decoration: none; }
956
966
  width: var(--aura-cal-cell); height: var(--aura-cal-cell); padding: 0; border: 0; border-radius: var(--aura-radius-full);
957
967
  background: transparent; color: var(--aura-fg-primary); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
958
968
  }
959
- .aura-cal__day:hover { background: var(--aura-bg-surface-hover); }
969
+ .aura-cal__day:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
960
970
  .aura-cal__day.is-outside { color: var(--aura-fg-tertiary); }
961
971
  .aura-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--aura-border-control); font-weight: 600; }
962
972
  .aura-cal__day.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); box-shadow: none; }
@@ -971,14 +981,14 @@ a.aura-tab { text-decoration: none; }
971
981
  height: 40px; border: 0; border-radius: var(--aura-radius-sm); background: transparent; color: var(--aura-fg-primary);
972
982
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
973
983
  }
974
- .aura-cal__year:hover { background: var(--aura-bg-surface-hover); }
984
+ .aura-cal__year:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
975
985
  .aura-cal__year.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); }
976
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); }
977
987
  .aura-cal__link {
978
988
  height: var(--aura-control-sm); padding: 0 var(--aura-space-2); border: 0; border-radius: var(--aura-radius-sm);
979
989
  background: transparent; color: var(--aura-fg-accent); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
980
990
  }
981
- .aura-cal__link:hover { background: var(--aura-bg-surface-hover); }
991
+ .aura-cal__link:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
982
992
  .aura-cal__link:disabled { opacity: var(--aura-disabled-opacity); cursor: not-allowed; }
983
993
 
984
994
  /* ---------- Drawer ---------- */
@@ -1010,6 +1020,12 @@ a.aura-tab { text-decoration: none; }
1010
1020
  .aura-drawer--nav .aura-nav { width: 100%; border-right: 0; }
1011
1021
  /* 5.32: the phone drawer's close button (32px, 8px in) sits over the header's end: keep the brand clear of it. */
1012
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 */
1013
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); }
1014
1030
  @media (prefers-reduced-motion: reduce) { .aura-drawer { animation: none; } }
1015
1031
 
@@ -1095,6 +1111,7 @@ a.aura-tab { text-decoration: none; }
1095
1111
  .aura-page-header__text { display: flex; flex-direction: column; gap: var(--aura-space-1); flex: 1 1 320px; min-width: 0; }
1096
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; }
1097
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 */
1098
1115
  .aura-page-header__meta { min-width: 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
1099
1116
  .aura-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
1100
1117
  @media (min-width: 640px) { .aura-page-header__title { font-size: 36px; } }
@@ -1149,6 +1166,68 @@ button.aura-stat { font: inherit; width: 100%; cursor: pointer; }
1149
1166
  /* Anything else interactive in the tile sits above the stretched link. No specificity, so a control's own position wins. */
1150
1167
  :where(.aura-stat--label-link) :where(a, button, input, select, textarea, label, summary, [tabindex]):not(:where(.aura-stat__link)) { position: relative; z-index: 1; }
1151
1168
 
1169
+ /* ---------- StatusTile, TileGrid, Sparkline (5.34, DxT Monitor S06) ---------- */
1170
+ .aura-tile-grid { list-style: none; margin: 0; padding: 0; --aura-grid-gap-base: var(--aura-space-2); --aura-grid-gap-sm: var(--aura-space-2); --aura-grid-gap-md: var(--aura-space-2); --aura-grid-gap-lg: var(--aura-space-2); --aura-grid-gap-xl: var(--aura-space-2); }
1171
+ .aura-tile-grid > li { display: flex; min-width: 0; container: aura-status-tile / inline-size; } /* the narrow-tile query reads the cell: a grid cell has a definite width */
1172
+ .aura-tile-grid > li > * { flex: 1; min-width: 0; }
1173
+ .aura-status-tile {
1174
+ position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; min-width: 0;
1175
+ padding: var(--aura-space-2) var(--aura-space-3); background: var(--aura-bg-surface); color: var(--aura-fg-primary);
1176
+ border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-sm);
1177
+ font-family: var(--font-sans); font-size: 13px; line-height: 18px; text-align: start; text-decoration: none;
1178
+ --aura-hover: var(--aura-bg-surface-hover);
1179
+ }
1180
+ .aura-status-tile--down { background: var(--aura-alert-danger-bg); border-color: var(--aura-alert-danger-border); }
1181
+ .aura-status-tile--problem { background: var(--aura-alert-warning-bg); border-color: var(--aura-alert-warning-border); }
1182
+ .aura-status-tile--maintenance { background: var(--aura-alert-info-bg); border-color: var(--aura-alert-info-border); }
1183
+ .aura-status-tile.is-interactive { cursor: pointer; transition: border-color var(--aura-duration-fast) var(--aura-ease); }
1184
+ .aura-status-tile.is-interactive:hover { border-color: var(--aura-border-strong); }
1185
+ .aura-status-tile.is-interactive:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
1186
+ .aura-status-tile__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--aura-space-2); min-width: 0; }
1187
+ .aura-status-tile__sep { font-size: 0; }
1188
+ .aura-status-tile__icon { flex: none; margin-top: 1px; color: var(--aura-fg-secondary); }
1189
+ .aura-status-tile--down .aura-status-tile__icon { color: var(--aura-alert-danger-fg); }
1190
+ .aura-status-tile--problem .aura-status-tile__icon { color: var(--aura-alert-warning-fg); }
1191
+ .aura-status-tile--maintenance .aura-status-tile__icon { color: var(--aura-alert-info-fg); }
1192
+ /* Two lines at most: similar names stay apart. */
1193
+ .aura-status-tile__title {
1194
+ flex: 1 1 0; min-width: 0; font-weight: 600; overflow-wrap: break-word;
1195
+ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
1196
+ }
1197
+ .aura-status-tile__value { flex: none; margin-inline-start: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
1198
+ .aura-status-tile__value.is-danger, .aura-status-tile__marker.is-danger { color: var(--aura-fg-danger); }
1199
+ .aura-status-tile__value.is-warning, .aura-status-tile__marker.is-warning { color: var(--aura-fg-warning); }
1200
+ .aura-status-tile__value.is-accent, .aura-status-tile__marker.is-accent { color: var(--aura-fg-accent); }
1201
+ .aura-status-tile__value.is-neutral, .aura-status-tile__marker.is-neutral { color: var(--aura-fg-secondary); }
1202
+ .aura-status-tile--down .aura-status-tile__value.is-danger { color: var(--aura-alert-danger-fg); }
1203
+ .aura-status-tile--problem .aura-status-tile__value.is-warning { color: var(--aura-alert-warning-fg); }
1204
+ .aura-status-tile--maintenance .aura-status-tile__value.is-accent { color: var(--aura-alert-info-fg); }
1205
+ /* A narrow tile in a TileGrid (two columns on a phone) puts the value on its own line under the title, in every tile
1206
+ * alike, rather than squeezing the title to a word. The grid's cells are the containers: on the tile itself, inline-size
1207
+ * containment would collapse a tile in a flex row or an inline block to nothing. */
1208
+ @container aura-status-tile (max-width: 225.98px) {
1209
+ .aura-status-tile__value { flex-basis: 100%; margin-inline-start: 0; padding-inline-start: 24px; }
1210
+ }
1211
+ /* The second line starts under the title. */
1212
+ .aura-status-tile__foot { display: flex; align-items: center; gap: var(--aura-space-2); min-width: 0; padding-inline-start: 24px; font-size: 12px; color: var(--aura-fg-secondary); }
1213
+ .aura-status-tile__meta { flex: 1; min-width: 0; overflow-wrap: anywhere; }
1214
+ .aura-status-tile__markers { display: inline-flex; align-items: center; gap: var(--aura-space-1); margin-inline-start: auto; flex: none; }
1215
+ .aura-status-tile__marker { display: inline-flex; }
1216
+ .aura-status-tile:lang(th) { line-height: 20px; }
1217
+ .aura-sparkline { display: inline-block; flex: none; vertical-align: middle; overflow: visible; color: var(--aura-fg-secondary); }
1218
+ .aura-sparkline.is-accent { color: var(--aura-fg-accent); }
1219
+ .aura-sparkline.is-danger { color: var(--aura-fg-danger); }
1220
+ .aura-sparkline.is-warning { color: var(--aura-fg-warning); }
1221
+ .aura-sparkline.is-positive { color: var(--aura-fg-positive); }
1222
+ .aura-sparkline__line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
1223
+ .aura-sparkline__dots { fill: currentColor; }
1224
+ .aura-sparkline__band { fill: var(--aura-fg-danger); opacity: 0.16; }
1225
+ .aura-sparkline__ticks { fill: var(--aura-fg-danger); }
1226
+ @media (forced-colors: active) {
1227
+ .aura-sparkline { color: CanvasText; }
1228
+ .aura-sparkline__band, .aura-sparkline__ticks { fill: Highlight; }
1229
+ }
1230
+
1152
1231
  /* ---------- TimePicker ---------- */
1153
1232
  .aura-time__popover { min-width: 160px; }
1154
1233
  .aura-time__option { min-height: 36px; font-variant-numeric: tabular-nums; }
@@ -1218,7 +1297,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1218
1297
  }
1219
1298
  .aura-tag__text { overflow: hidden; text-overflow: ellipsis; max-width: 24ch; }
1220
1299
  .aura-tag.is-selectable { cursor: pointer; transition: background var(--aura-duration-fast) var(--aura-ease), border-color var(--aura-duration-fast) var(--aura-ease); }
1221
- .aura-tag.is-selectable:hover { background: var(--aura-bg-surface-hover); }
1300
+ .aura-tag.is-selectable:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
1222
1301
  .aura-tag.is-selected { background: var(--aura-bg-selected); border-color: var(--aura-fg-accent); color: var(--aura-fg-primary); }
1223
1302
  .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); }
1224
1303
  .aura-tag.is-selectable:disabled, .aura-tag.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
@@ -1226,7 +1305,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1226
1305
  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);
1227
1306
  background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
1228
1307
  }
1229
- .aura-tag__remove:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
1308
+ .aura-tag__remove:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
1230
1309
 
1231
1310
  /* ---------- Progress ---------- */
1232
1311
  .aura-progress { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
@@ -1279,7 +1358,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1279
1358
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 var(--aura-space-2); box-sizing: border-box;
1280
1359
  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;
1281
1360
  }
1282
- .aura-page:hover { background: var(--aura-bg-surface-hover); }
1361
+ .aura-page:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
1283
1362
  .aura-page.is-current { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); font-weight: 600; }
1284
1363
  .aura-page:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
1285
1364
  .aura-pagination__gap { min-width: 24px; text-align: center; color: var(--aura-fg-secondary); }
@@ -1297,7 +1376,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1297
1376
  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;
1298
1377
  border: 0; background: transparent; color: var(--aura-fg-primary); font: inherit; text-align: left; cursor: pointer;
1299
1378
  }
1300
- .aura-accordion__heading > button:hover { background: var(--aura-bg-surface-hover); }
1379
+ .aura-accordion__heading > button:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
1301
1380
  .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); }
1302
1381
  .aura-accordion__heading > button:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
1303
1382
  .aura-accordion__title { flex: 1; display: flex; flex-direction: column; gap: 2px; }
@@ -1338,7 +1417,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1338
1417
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
1339
1418
  border: 0; border-radius: var(--aura-radius-full); background: transparent; color: var(--aura-fg-secondary); cursor: pointer;
1340
1419
  }
1341
- .aura-combo__chip-remove:hover { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
1420
+ .aura-combo__chip-remove:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
1342
1421
  .aura-combo__chip-remove .aura-icon { width: 14px; height: 14px; }
1343
1422
 
1344
1423
  /* ---------- NumberField ---------- */
@@ -1354,7 +1433,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
1354
1433
  }
1355
1434
  .aura-number__step + .aura-number__step { border-left: 1px solid var(--aura-border-default); }
1356
1435
  .aura-number__step:last-child { border-radius: 0 calc(var(--aura-radius-md) - 1px) calc(var(--aura-radius-md) - 1px) 0; }
1357
- .aura-number__step:hover:not(:disabled) { background: var(--aura-bg-surface-hover); color: var(--aura-fg-primary); }
1436
+ .aura-number__step:hover:not(:disabled) { background: var(--aura-hover, var(--aura-bg-surface-hover)); color: var(--aura-fg-primary); }
1358
1437
  .aura-number__step:disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
1359
1438
 
1360
1439
  /* ---------- Stepper ---------- */
@@ -1601,7 +1680,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1601
1680
  border: 0; background: transparent; padding: 4px var(--aura-space-2); border-radius: var(--aura-radius-sm);
1602
1681
  font: inherit; font-size: 13px; font-weight: 500; color: var(--aura-fg-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
1603
1682
  }
1604
- .aura-filterbar__clear:hover { background: var(--aura-bg-surface-hover); }
1683
+ .aura-filterbar__clear:hover { background: var(--aura-hover, var(--aura-bg-surface-hover)); }
1605
1684
  .aura-filterbar__clear:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
1606
1685
  @media (max-width: 767.98px) {
1607
1686
  .aura-filterbar__search { flex-basis: 100%; max-width: none; }
@@ -1686,7 +1765,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1686
1765
  .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); }
1687
1766
  .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; }
1688
1767
  .aura-command__item > .aura-icon { color: var(--aura-fg-secondary); }
1689
- .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)); }
1768
+ .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)); }
1690
1769
  .aura-command__item.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
1691
1770
  .aura-command__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
1692
1771
  .aura-command__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }