@jirawatpyk/aura-react 5.77.0 → 5.79.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.
- package/README.md +25 -0
- package/dist/aura.bundle.js +130 -13
- package/dist/cjs/index.cjs +130 -13
- package/dist/esm/DataTable.js +27 -1
- package/dist/esm/DatePicker.js +1 -1
- package/dist/esm/FileUpload.js +13 -0
- package/dist/esm/Menu.js +6 -2
- package/dist/esm/PageHeader.js +10 -1
- package/dist/esm/Table.js +5 -0
- package/dist/esm/Tabs.js +10 -3
- package/dist/esm/classes.js +8 -6
- package/dist/esm/internal.js +46 -2
- package/dist/esm/theme.js +3 -0
- package/dist/esm/tiles.js +16 -1
- package/dist/server/index.cjs +36 -8
- package/dist/server/index.js +36 -8
- package/dist/styles.css +115 -22
- package/dist/styles.layer.css +115 -22
- package/package.json +2 -2
package/dist/styles.layer.css
CHANGED
|
@@ -52,18 +52,28 @@ button.aura-btn--secondary[aria-disabled='true']:hover, button.aura-btn--ghost[a
|
|
|
52
52
|
button.aura-btn--danger-secondary[aria-disabled='true']:hover { background: transparent; }
|
|
53
53
|
button.aura-btn--danger[aria-disabled='true']:hover { background: var(--aura-button-danger-bg); }
|
|
54
54
|
button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-shadow-creative); transform: none; }
|
|
55
|
-
/* 5.30: a disabled
|
|
56
|
-
*
|
|
57
|
-
.aura-btn
|
|
58
|
-
.aura-btn
|
|
59
|
-
opacity: 1; background: var(--aura-button-disabled-bg); color: var(--aura-button-disabled-fg); border-color:
|
|
60
|
-
}
|
|
55
|
+
/* 5.30: a disabled button is not a faded copy of itself (faded ink read as a separate grey button, faded red as pink).
|
|
56
|
+
* 5.79: one look for every variant — see below. */
|
|
57
|
+
.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)),
|
|
58
|
+
.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)):hover {
|
|
59
|
+
opacity: 1; background: var(--aura-button-disabled-bg); color: var(--aura-button-disabled-fg); border-color: var(--aura-button-disabled-border); box-shadow: none;
|
|
60
|
+
}
|
|
61
|
+
/* …a variant without a border of its own (primary, danger) draws the same edge inside, so none is edgeless */
|
|
62
|
+
.aura-btn.aura-btn:is(.aura-btn--primary, .aura-btn--danger):is(:disabled, [aria-disabled='true']:not(.is-loading)),
|
|
63
|
+
.aura-btn.aura-btn:is(.aura-btn--primary, .aura-btn--danger):is(:disabled, [aria-disabled='true']:not(.is-loading)):hover {
|
|
64
|
+
box-shadow: inset 0 0 0 1px var(--aura-button-disabled-border);
|
|
65
|
+
}
|
|
66
|
+
/* 5.79 (visual audit 6): one disabled look for every variant — a faint fill, a faint edge, the tertiary label — so a
|
|
67
|
+
* disabled primary doesn't read as a To Do pill and a disabled outline button isn't a crisp white one in dark. A ghost
|
|
68
|
+
* button stays without fill or edge. */
|
|
69
|
+
.aura-btn.aura-btn.aura-btn--ghost:is(:disabled, [aria-disabled='true']:not(.is-loading)),
|
|
70
|
+
.aura-btn.aura-btn.aura-btn--ghost:is(:disabled, [aria-disabled='true']:not(.is-loading)):hover { background: transparent; border-color: transparent; box-shadow: none; }
|
|
61
71
|
/* Forced colours drop the fills: filled buttons get a 1px edge (as outline buttons have), and a disabled or gated one
|
|
62
72
|
* (still focusable) shows GrayText and keeps the fade, without changing size. */
|
|
63
73
|
@media (forced-colors: active) {
|
|
64
74
|
.aura-btn:is(.aura-btn--primary, .aura-btn--danger) { border: 1px solid ButtonText; }
|
|
65
|
-
.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)),
|
|
66
|
-
.aura-btn.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)):hover { color: GrayText; border-color: GrayText; opacity: var(--aura-disabled-opacity); }
|
|
75
|
+
.aura-btn.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)),
|
|
76
|
+
.aura-btn.aura-btn.aura-btn:is(:disabled, [aria-disabled='true']:not(.is-loading)):hover { color: GrayText; border-color: GrayText; opacity: var(--aura-disabled-opacity); } /* 5.79: one class more, over the ghost rule */
|
|
67
77
|
}
|
|
68
78
|
.aura-btn.is-loading:active { transform: none; }
|
|
69
79
|
|
|
@@ -297,7 +307,7 @@ a.aura-table__sort { text-decoration: none; }
|
|
|
297
307
|
position: fixed; z-index: var(--aura-z-menu); min-width: 200px; padding: var(--aura-space-1); overflow-y: auto; overscroll-behavior: contain;
|
|
298
308
|
background: var(--aura-bg-surface); color: var(--aura-fg-primary);
|
|
299
309
|
border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-md);
|
|
300
|
-
box-shadow: var(--aura-shadow-
|
|
310
|
+
box-shadow: var(--aura-shadow-overlay); /* 5.79 (visual audit 18): lifted as Popover and the list boxes are; its light edge alone was faint */
|
|
301
311
|
font-family: var(--font-sans); font-size: max(13px, .8125rem);
|
|
302
312
|
}
|
|
303
313
|
.aura-menu__item {
|
|
@@ -585,7 +595,7 @@ a.aura-icon-btn { text-decoration: none; }
|
|
|
585
595
|
* Field). */
|
|
586
596
|
.aura-field:not(.is-disabled) .aura-input:has(> .aura-input__control[aria-invalid="true"]:not(:disabled)),
|
|
587
597
|
.aura-field:not(.is-disabled) .aura-textarea[aria-invalid="true"]:not(:disabled) { border-color: var(--aura-border-danger); }
|
|
588
|
-
.aura-field.is-disabled .aura-input { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border
|
|
598
|
+
.aura-field.is-disabled .aura-input { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-input-disabled-border); }
|
|
589
599
|
.aura-field.is-disabled .aura-input__control { cursor: not-allowed; }
|
|
590
600
|
/* A read-only text field. Only an input: `:read-only` also matches any element that isn't editable — a
|
|
591
601
|
* Select's trigger <button> — which painted every custom Select with the disabled ground (5.16.1, Chamber-OS 109). */
|
|
@@ -595,13 +605,18 @@ a.aura-icon-btn { text-decoration: none; }
|
|
|
595
605
|
|
|
596
606
|
.aura-textarea { display: block; padding: 10px var(--aura-space-3); min-height: 96px; line-height: 1.6; resize: vertical; outline: none; }
|
|
597
607
|
.aura-textarea:focus { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-color: var(--aura-border-strong); }
|
|
598
|
-
.aura-field.is-disabled .aura-textarea { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border
|
|
608
|
+
.aura-field.is-disabled .aura-textarea { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-input-disabled-border); }
|
|
599
609
|
|
|
600
610
|
.aura-select .aura-input__control { padding-right: calc(var(--aura-space-3) + var(--aura-icon-sm) + var(--aura-space-2)); cursor: pointer; }
|
|
601
611
|
.aura-select__chevron { position: absolute; right: var(--aura-space-3); color: var(--aura-fg-secondary); pointer-events: none; }
|
|
602
612
|
.aura-select select:invalid, .aura-select select:has(option[value=""]:checked) { color: var(--aura-fg-tertiary); }
|
|
603
613
|
/* 5.3: the field is a button over an invisible <select> (forms, refs, events); the list is AURA's, like Combobox. */
|
|
604
614
|
.aura-select option { color: var(--aura-fg-primary); background: var(--aura-bg-input); }
|
|
615
|
+
/* 5.79 (visual audit 15): a list box (multiple, or size > 1) shows its rows — as tall as they need, no chevron — instead
|
|
616
|
+
* of being squeezed into a one-line field with its third option cut in half. */
|
|
617
|
+
.aura-select .aura-input__control:is([multiple], [size]:not([size='0'], [size='1'])) { height: auto; padding: var(--aura-space-1) var(--aura-space-2); overflow-y: auto; cursor: default; }
|
|
618
|
+
.aura-select:has(> .aura-input__control:is([multiple], [size]:not([size='0'], [size='1']))) .aura-select__chevron { display: none; }
|
|
619
|
+
.aura-select .aura-input__control:is([multiple], [size]:not([size='0'], [size='1'])) option { padding: var(--aura-space-1) var(--aura-space-2); border-radius: var(--aura-radius-xs); }
|
|
605
620
|
.aura-select--custom { position: relative; }
|
|
606
621
|
.aura-select__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; appearance: none; }
|
|
607
622
|
.aura-select__trigger { display: flex; align-items: center; text-align: start; background: none; border: 0; color: inherit; font: inherit; width: 100%; min-width: 0; }
|
|
@@ -661,7 +676,7 @@ a.aura-icon-btn { text-decoration: none; }
|
|
|
661
676
|
/* 5.19 (Chamber-OS 113): a read-only switch keeps its colours (a locked "on" reads as on at full contrast) and stays
|
|
662
677
|
* focusable; only the pointer says it won't change. The row's icon (a lock) sits at its end, like a field's icon. */
|
|
663
678
|
.aura-switch-row.is-readonly, .aura-switch-row.is-readonly .aura-switch, .aura-switch-row.is-readonly .aura-choice__label { cursor: default; }
|
|
664
|
-
.aura-switch-row__icon { flex: none; margin-inline-start:
|
|
679
|
+
.aura-switch-row__icon { flex: none; margin-inline-start: calc(-1 * var(--aura-space-1)); margin-top: 2px; /* 5.79 (visual audit 17): beside the label it belongs to, 8px after it, not at the row's far end */ width: var(--aura-icon-sm); height: var(--aura-icon-sm); color: var(--aura-fg-secondary); }
|
|
665
680
|
|
|
666
681
|
/* ---------- Alerts & toasts ---------- */
|
|
667
682
|
.aura-alert {
|
|
@@ -822,6 +837,20 @@ a.aura-icon-btn { text-decoration: none; }
|
|
|
822
837
|
* indicator paints over its bottom row. The list scrolls sideways (overflow-x), and a scroll container clips at its
|
|
823
838
|
* padding box: an indicator pulled 1px over a border (as up to 5.22) showed only half its height. Same box height. */
|
|
824
839
|
.aura-tabs__list { display: flex; gap: var(--aura-space-6); box-shadow: inset 0 -1px 0 var(--aura-border-default); overflow-x: auto; scrollbar-width: none; }
|
|
840
|
+
/* 5.78 (visual audit 24): a list wider than its box fades the end (or ends) with more tabs, so a cut tab reads as
|
|
841
|
+
* "scroll for more", not as a broken label. Logical: in RTL the fades swap sides. */
|
|
842
|
+
.aura-tabs__list[data-aura-more] {
|
|
843
|
+
--aura-fade-s: 0px; --aura-fade-e: 0px;
|
|
844
|
+
-webkit-mask-image: linear-gradient(to right, transparent, black var(--aura-fade-s), black calc(100% - var(--aura-fade-e)), transparent);
|
|
845
|
+
mask-image: linear-gradient(to right, transparent, black var(--aura-fade-s), black calc(100% - var(--aura-fade-e)), transparent);
|
|
846
|
+
}
|
|
847
|
+
.aura-tabs__list[data-aura-more] { scroll-padding-inline: var(--aura-space-8); } /* a focused tab scrolls clear of the fade */
|
|
848
|
+
.aura-tabs__list[data-aura-more~='start'] { --aura-fade-s: var(--aura-space-8); }
|
|
849
|
+
.aura-tabs__list[data-aura-more~='end'] { --aura-fade-e: var(--aura-space-8); }
|
|
850
|
+
[dir='rtl'] .aura-tabs__list[data-aura-more], .aura-tabs__list[data-aura-more][dir='rtl'] {
|
|
851
|
+
-webkit-mask-image: linear-gradient(to left, transparent, black var(--aura-fade-s), black calc(100% - var(--aura-fade-e)), transparent);
|
|
852
|
+
mask-image: linear-gradient(to left, transparent, black var(--aura-fade-s), black calc(100% - var(--aura-fade-e)), transparent);
|
|
853
|
+
}
|
|
825
854
|
.aura-tab {
|
|
826
855
|
position: relative; display: inline-flex; align-items: center; gap: var(--aura-space-2); flex: none;
|
|
827
856
|
box-sizing: border-box; /* 5.39: a link tab (<a>) was 2px taller than a button tab — its underline sat outside the height */
|
|
@@ -1001,6 +1030,9 @@ a.aura-tab { text-decoration: none; }
|
|
|
1001
1030
|
/* ---------- Combobox ---------- */
|
|
1002
1031
|
.aura-combo { cursor: text; }
|
|
1003
1032
|
.aura-combo .aura-input__control { padding-right: calc(var(--aura-space-2) + 2 * var(--aura-control-sm)); }
|
|
1033
|
+
/* 5.78 (visual audit 25): room for the clear button only while there is one — an empty TimePicker in a narrow column
|
|
1034
|
+
* showed "hh:m". (Also on a coarse pointer and with touchHeight, below.) */
|
|
1035
|
+
.aura-combo:not(.is-multi):not(:has(.aura-combo__clear)) .aura-input__control { padding-right: calc(var(--aura-space-2) + var(--aura-control-sm)); }
|
|
1004
1036
|
.aura-combo__clear, .aura-combo__toggle, .aura-date__toggle {
|
|
1005
1037
|
position: absolute; display: inline-flex; align-items: center; justify-content: center;
|
|
1006
1038
|
width: var(--aura-control-sm); height: var(--aura-control-sm); padding: 0; border: 0; border-radius: var(--aura-radius-full);
|
|
@@ -1036,8 +1068,8 @@ a.aura-tab { text-decoration: none; }
|
|
|
1036
1068
|
.aura-combo__option.is-selected { font-weight: 500; }
|
|
1037
1069
|
.aura-combo__option.is-disabled { opacity: var(--aura-disabled-opacity); cursor: default; }
|
|
1038
1070
|
.aura-combo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
|
1039
|
-
.aura-combo__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1040
|
-
.aura-combo__desc { font-size: max(12px, .75rem); line-height: 1.
|
|
1071
|
+
.aura-combo__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: max(20px, 1.25rem); }
|
|
1072
|
+
.aura-combo__desc { font-size: max(12px, .75rem); line-height: max(18px, 1.125rem); color: var(--aura-fg-secondary); } /* 5.79: fixed line heights, so a Thai row and an English row are spaced alike (normal follows each font) */
|
|
1041
1073
|
/* Same specificity as `.aura-combo__option > .aura-icon` above and later in the file, so it wins by order (4.18). */
|
|
1042
1074
|
.aura-combo__option > .aura-combo__check { color: var(--aura-fg-accent); }
|
|
1043
1075
|
/* 5.16 (Chamber-OS 105): option groups under a heading. */
|
|
@@ -1080,9 +1112,9 @@ a.aura-tab { text-decoration: none; }
|
|
|
1080
1112
|
.aura-cal__day.is-selected { background: var(--aura-control-checked-bg); color: var(--aura-control-checked-fg); box-shadow: none; }
|
|
1081
1113
|
.aura-cal__day:disabled, .aura-cal__day[aria-disabled='true'] { opacity: var(--aura-disabled-opacity); cursor: not-allowed; background: transparent; text-decoration: line-through; }
|
|
1082
1114
|
.aura-cal__day:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; }
|
|
1083
|
-
.aura-cal__grid td.is-in-range { background: var(--aura-bg
|
|
1084
|
-
.aura-cal__grid td.is-range-start { background: linear-gradient(to right, transparent 50%, var(--aura-bg
|
|
1085
|
-
.aura-cal__grid td.is-range-end { background: linear-gradient(to left, transparent 50%, var(--aura-bg
|
|
1115
|
+
.aura-cal__grid td.is-in-range { background: var(--aura-calendar-range-bg); } /* 5.79 (visual audit 19) */
|
|
1116
|
+
.aura-cal__grid td.is-range-start { background: linear-gradient(to right, transparent 50%, var(--aura-calendar-range-bg) 50%); }
|
|
1117
|
+
.aura-cal__grid td.is-range-end { background: linear-gradient(to left, transparent 50%, var(--aura-calendar-range-bg) 50%); }
|
|
1086
1118
|
.aura-cal__grid td.is-range-start.is-range-end { background: none; }
|
|
1087
1119
|
.aura-cal__years { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--aura-space-1); }
|
|
1088
1120
|
.aura-cal__year {
|
|
@@ -1296,6 +1328,9 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1296
1328
|
.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); }
|
|
1297
1329
|
.aura-page-header__text { display: flex; flex-direction: column; gap: var(--aura-space-1); flex: 1 1 320px; min-width: 0; }
|
|
1298
1330
|
.aura-page-header__eyebrow { margin: 0; font-family: var(--font-mono); font-size: max(12px, .75rem); line-height: 1.7; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
|
|
1331
|
+
.aura-nowrap { white-space: nowrap; } /* 5.78: a code or document number kept on one line */
|
|
1332
|
+
/* …in a PageHeader title the number moves to the next line whole, and still breaks if it is longer than a line. */
|
|
1333
|
+
.aura-page-header__title .aura-nowrap { display: inline-block; max-width: 100%; white-space: normal; }
|
|
1299
1334
|
.aura-page-header__title { margin: 0; font-family: var(--font-display); font-size: var(--aura-page-header-title-size, max(28px, 1.75rem)); line-height: var(--aura-page-header-title-line-height, 1.15); font-weight: 600; letter-spacing: -0.01em; color: var(--aura-fg-primary); overflow-wrap: anywhere; }
|
|
1300
1335
|
.aura-page-header__breadcrumb { min-width: 0; } /* 5.33 (DxT Monitor #7): Breadcrumb keeps its own type */
|
|
1301
1336
|
.aura-page-header__meta { min-width: 0; font-size: max(13px, .8125rem); line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
|
|
@@ -1325,6 +1360,8 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1325
1360
|
* span as wide as its text and the page scrolled sideways. :where keeps the selector's weight as before. */
|
|
1326
1361
|
@media (max-width: 639.98px) {
|
|
1327
1362
|
.aura-page-header--actions-full-below-sm > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
|
|
1363
|
+
.aura-page-header--actions-full-below-sm:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11): a label that wraps to two lines is a rounded box, not a lozenge */
|
|
1364
|
+
.aura-page-header--actions-full-below-sm:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78: actionsBar's split — the header's own actions, not the strip */
|
|
1328
1365
|
.aura-page-header--actions-full-below-sm > .aura-page-header__actions > :where(:not(.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; }
|
|
1329
1366
|
.aura-page-header--actions-full-below-sm > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
|
|
1330
1367
|
.aura-page-header--actions-full-below-sm > .aura-page-header__actions > .aura-page-header__bar > :where(:not(.aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; } /* 5.71: actionsBar in the row, as the actions (5.61) */
|
|
@@ -1335,10 +1372,14 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1335
1372
|
.aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
|
|
1336
1373
|
.aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > * { min-width: 0; }
|
|
1337
1374
|
.aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
|
|
1375
|
+
.aura-page-header--actions-full-below-sm:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11) */
|
|
1376
|
+
.aura-page-header--actions-full-below-sm:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
|
|
1338
1377
|
.aura-page-header--actions-full-below-sm > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; } /* 5.45 (Chamber-OS addendum 52): centred on a taller button */
|
|
1339
1378
|
}
|
|
1340
1379
|
@media (max-width: 767.98px) {
|
|
1341
1380
|
.aura-page-header--actions-full-below-md > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
|
|
1381
|
+
.aura-page-header--actions-full-below-md:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11): a label that wraps to two lines is a rounded box, not a lozenge */
|
|
1382
|
+
.aura-page-header--actions-full-below-md:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78: actionsBar's split — the header's own actions, not the strip */
|
|
1342
1383
|
.aura-page-header--actions-full-below-md > .aura-page-header__actions > :where(:not(.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; }
|
|
1343
1384
|
.aura-page-header--actions-full-below-md > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
|
|
1344
1385
|
.aura-page-header--actions-full-below-md > .aura-page-header__actions > .aura-page-header__bar > :where(:not(.aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; } /* 5.71: actionsBar in the row, as the actions (5.61) */
|
|
@@ -1348,10 +1389,14 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1348
1389
|
.aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
|
|
1349
1390
|
.aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > * { min-width: 0; }
|
|
1350
1391
|
.aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
|
|
1392
|
+
.aura-page-header--actions-full-below-md:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11) */
|
|
1393
|
+
.aura-page-header--actions-full-below-md:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
|
|
1351
1394
|
.aura-page-header--actions-full-below-md > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; } /* 5.45 (Chamber-OS addendum 52): centred on a taller button */
|
|
1352
1395
|
}
|
|
1353
1396
|
@media (max-width: 1023.98px) {
|
|
1354
1397
|
.aura-page-header--actions-full-below-lg > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
|
|
1398
|
+
.aura-page-header--actions-full-below-lg:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11): a label that wraps to two lines is a rounded box, not a lozenge */
|
|
1399
|
+
.aura-page-header--actions-full-below-lg:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78: actionsBar's split — the header's own actions, not the strip */
|
|
1355
1400
|
.aura-page-header--actions-full-below-lg > .aura-page-header__actions > :where(:not(.sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; }
|
|
1356
1401
|
.aura-page-header--actions-full-below-lg > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
|
|
1357
1402
|
.aura-page-header--actions-full-below-lg > .aura-page-header__actions > .aura-page-header__bar > :where(:not(.aura-page-header__status, .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text, [hidden], [style*="position: absolute"], [style*="position:absolute"])) { flex: 1 1 0; min-width: max-content; } /* 5.71: actionsBar in the row, as the actions (5.61) */
|
|
@@ -1361,6 +1406,8 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1361
1406
|
.aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) { flex-wrap: nowrap; align-items: stretch; }
|
|
1362
1407
|
.aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > * { min-width: 0; }
|
|
1363
1408
|
.aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding: var(--aura-space-2) var(--aura-space-3); line-height: 1.35; text-align: center; overflow-wrap: anywhere; hyphens: auto; border-radius: min(var(--aura-button-radius), 22px); }
|
|
1409
|
+
.aura-page-header--actions-full-below-lg:not(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); } /* 5.78 (visual audit 11) */
|
|
1410
|
+
.aura-page-header--actions-full-below-lg:is(.aura-page-header--actions-bar-below-sm, .aura-page-header--actions-bar-below-md) > .aura-page-header__actions.is-split:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-btn, :not(.aura-page-header__bar) > .aura-btn):not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
|
|
1364
1411
|
.aura-page-header--actions-full-below-lg > .aura-page-header__actions:has(> .aura-icon-btn, > :not(.aura-page-header__bar) > .aura-icon-btn) > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { align-self: center; } /* 5.45 (Chamber-OS addendum 52): centred on a taller button */
|
|
1365
1412
|
}
|
|
1366
1413
|
/* 5.48 (Chamber-OS 154): only on a screen taller than 30rem (5.49: 480px at the default text size) — on a short one (400% zoom, a phone held sideways) the
|
|
@@ -1381,7 +1428,7 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1381
1428
|
.aura-page-header--actions-bar-below-sm[data-aura-bar="empty"] > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm[data-aura-bar="empty"] > .aura-page-header__actions > .aura-page-header__bar { display: none; }
|
|
1382
1429
|
/* …and before hydration, from the markup alone (actionsBar's strip whose element children but the status are all `hidden` or visually hidden): it already goes; the page padding follows once the client has looked. */
|
|
1383
1430
|
.aura-page-header--actions-bar-below-sm:not([data-aura-bar="shown"]) > .aura-page-header__actions > .aura-page-header__bar:not(:has(> :not(.aura-page-header__status, [hidden], .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text))):has(> *) { display: none; }
|
|
1384
|
-
:is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-
|
|
1431
|
+
:is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-4) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); /* 5.78 (audit 9): 16px both sides, the phone gutter */ background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
|
|
1385
1432
|
/* 5.54 (Chamber-OS 166): the bar's buttons are 44px whatever the density, as ActionBar's on a phone. */
|
|
1386
1433
|
:is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) { --aura-button-height: var(--aura-touch-target); --aura-button-height-sm: var(--aura-touch-target); }
|
|
1387
1434
|
:is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) > .aura-icon-btn, :is(.aura-page-header--actions-bar-below-sm > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm > .aura-page-header__actions > .aura-page-header__bar) > * > .aura-icon-btn:only-child { width: var(--aura-touch-target); height: var(--aura-touch-target); }
|
|
@@ -1407,7 +1454,7 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1407
1454
|
.aura-page-header--actions-bar-below-md[data-aura-bar="empty"] > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md[data-aura-bar="empty"] > .aura-page-header__actions > .aura-page-header__bar { display: none; }
|
|
1408
1455
|
/* …and before hydration, from the markup alone (actionsBar's strip whose element children but the status are all `hidden` or visually hidden): it already goes; the page padding follows once the client has looked. */
|
|
1409
1456
|
.aura-page-header--actions-bar-below-md:not([data-aura-bar="shown"]) > .aura-page-header__actions > .aura-page-header__bar:not(:has(> :not(.aura-page-header__status, [hidden], .sr-only, .aura-sr-only, .visually-hidden, .screen-reader-text))):has(> *) { display: none; }
|
|
1410
|
-
:is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-
|
|
1457
|
+
:is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) { position: fixed; z-index: var(--aura-z-bar); left: 0; right: 0; bottom: var(--aura-bottomnav-offset, 0px); box-sizing: border-box; min-height: 60px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--aura-space-2); margin: 0; padding: var(--aura-space-2) var(--aura-space-4) calc(var(--aura-space-2) + max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px))) var(--aura-space-4); /* 5.78 (audit 9): 16px both sides, the phone gutter */ background: var(--aura-bg-surface); color: var(--aura-fg-primary); border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; transition: bottom var(--aura-duration-base) var(--aura-ease); }
|
|
1411
1458
|
/* 5.54 (Chamber-OS 166): the bar's buttons are 44px whatever the density, as ActionBar's on a phone. */
|
|
1412
1459
|
:is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) { --aura-button-height: var(--aura-touch-target); --aura-button-height-sm: var(--aura-touch-target); }
|
|
1413
1460
|
:is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) > .aura-icon-btn, :is(.aura-page-header--actions-bar-below-md > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md > .aura-page-header__actions > .aura-page-header__bar) > * > .aura-icon-btn:only-child { width: var(--aura-touch-target); height: var(--aura-touch-target); }
|
|
@@ -1622,7 +1669,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
|
|
|
1622
1669
|
.aura-badge--success { background: var(--aura-alert-success-bg); color: var(--aura-alert-success-fg); }
|
|
1623
1670
|
.aura-badge--warning { background: var(--aura-alert-warning-bg); color: var(--aura-alert-warning-fg); }
|
|
1624
1671
|
.aura-badge--danger { background: var(--aura-alert-danger-bg); color: var(--aura-alert-danger-fg); }
|
|
1625
|
-
.aura-badge.is-outline { background: transparent; border-color: currentColor; }
|
|
1672
|
+
.aura-badge.is-outline { background: transparent; border-color: currentColor; border-color: color-mix(in srgb, currentColor 45%, transparent); } /* 5.79 (visual audit 19): a quieter edge, so an outline badge doesn't read as a secondary button */
|
|
1626
1673
|
.aura-badge--neutral.is-outline { border-color: var(--aura-border-control); }
|
|
1627
1674
|
.aura-badge.is-solid { background: var(--aura-button-primary-bg); color: var(--aura-button-primary-fg); }
|
|
1628
1675
|
.aura-badge--danger.is-solid { background: var(--aura-status-blocked-solid-bg); color: var(--aura-status-blocked-solid-fg); }
|
|
@@ -1761,6 +1808,7 @@ a.aura-upload__name:focus-visible { outline: var(--aura-focus-ring-width) solid
|
|
|
1761
1808
|
.aura-combo__chips { display: contents; }
|
|
1762
1809
|
.aura-combo__chip {
|
|
1763
1810
|
display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 28px; box-sizing: border-box;
|
|
1811
|
+
flex: none; /* 5.79 (visual audit 16): a chip keeps its label and goes to the next line, not shrunk to "V.." */
|
|
1764
1812
|
padding: 0 2px 0 var(--aura-space-2); border-radius: var(--aura-radius-full);
|
|
1765
1813
|
background: var(--aura-bg-selected); color: var(--aura-fg-primary); font-size: max(13px, .8125rem); font-weight: 500;
|
|
1766
1814
|
}
|
|
@@ -1915,6 +1963,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
1915
1963
|
.aura-combo__toggle, .aura-date__toggle { right: 0; }
|
|
1916
1964
|
.aura-combo__clear, .aura-date .aura-combo__clear { right: var(--aura-touch-target); }
|
|
1917
1965
|
.aura-combo .aura-input__control, .aura-date .aura-input__control { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
|
|
1966
|
+
.aura-combo:not(.is-multi):not(:has(.aura-combo__clear)) .aura-input__control { padding-right: calc(var(--aura-space-1) + var(--aura-touch-target)); }
|
|
1918
1967
|
.aura-combo__clear::after, .aura-combo__toggle::after, .aura-date__toggle::after, .aura-tag__remove::after {
|
|
1919
1968
|
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%);
|
|
1920
1969
|
}
|
|
@@ -1985,6 +2034,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
1985
2034
|
:is(.aura-field, .aura-filterbar).is-touch-always :is(.aura-combo__toggle, .aura-date__toggle) { right: 0; }
|
|
1986
2035
|
:is(.aura-field, .aura-filterbar).is-touch-always .aura-combo__clear { right: var(--aura-touch-target); }
|
|
1987
2036
|
:is(.aura-field, .aura-filterbar).is-touch-always :is(.aura-combo, .aura-date) .aura-input__control { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
|
|
2037
|
+
:is(.aura-field, .aura-filterbar).is-touch-always .aura-combo:not(.is-multi):not(:has(.aura-combo__clear)) .aura-input__control { padding-right: calc(var(--aura-space-1) + var(--aura-touch-target)); }
|
|
1988
2038
|
:is(.aura-field, .aura-filterbar).is-touch-always .aura-combo.is-multi { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
|
|
1989
2039
|
:is(.aura-field, .aura-filterbar).is-touch-always .aura-combo.is-multi :is(.aura-combo__clear, .aura-combo__toggle) { top: calc((var(--aura-input-height) - 2px - 40px) / 2); }
|
|
1990
2040
|
:is(.aura-field, .aura-filterbar).is-touch-always .aura-number__step { width: var(--aura-touch-target); }
|
|
@@ -1993,6 +2043,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
1993
2043
|
:is(.aura-field, .aura-filterbar).is-touch :is(.aura-combo__toggle, .aura-date__toggle) { right: 0; }
|
|
1994
2044
|
:is(.aura-field, .aura-filterbar).is-touch .aura-combo__clear { right: var(--aura-touch-target); }
|
|
1995
2045
|
:is(.aura-field, .aura-filterbar).is-touch :is(.aura-combo, .aura-date) .aura-input__control { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
|
|
2046
|
+
:is(.aura-field, .aura-filterbar).is-touch .aura-combo:not(.is-multi):not(:has(.aura-combo__clear)) .aura-input__control { padding-right: calc(var(--aura-space-1) + var(--aura-touch-target)); }
|
|
1996
2047
|
:is(.aura-field, .aura-filterbar).is-touch .aura-combo.is-multi { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
|
|
1997
2048
|
:is(.aura-field, .aura-filterbar).is-touch .aura-combo.is-multi :is(.aura-combo__clear, .aura-combo__toggle) { top: calc((var(--aura-input-height) - 2px - 40px) / 2); }
|
|
1998
2049
|
:is(.aura-field, .aura-filterbar).is-touch .aura-number__step { width: var(--aura-touch-target); }
|
|
@@ -2160,7 +2211,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
2160
2211
|
.aura-filterselect__face:focus-visible { outline-style: solid; }
|
|
2161
2212
|
/* Before hydration: the real <select>, invisible, over the face (16px so iOS doesn't zoom when it opens). */
|
|
2162
2213
|
.aura-filterselect__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: max(16px, 1rem); cursor: pointer; appearance: none; }
|
|
2163
|
-
.aura-filterselect.is-disabled .aura-filterselect__face { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border
|
|
2214
|
+
.aura-filterselect.is-disabled .aura-filterselect__face { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-input-disabled-border); cursor: not-allowed; }
|
|
2164
2215
|
.aura-filterselect.is-disabled .aura-filterselect__native { cursor: not-allowed; }
|
|
2165
2216
|
/* 5.38 (Chamber-OS 140): touchHeight on FilterBar (its search and field-height controls) or on one FilterSelect —
|
|
2166
2217
|
* 44px below 640px or on a coarse pointer (is-touch), or always. */
|
|
@@ -2360,6 +2411,44 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
2360
2411
|
:root:has(.aura-actionbar--edge:not(.is-idle)) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-actionbar-space)); }
|
|
2361
2412
|
:root:has(.aura-actionbar--edge:not(.is-idle)):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-actionbar-space); }
|
|
2362
2413
|
}
|
|
2414
|
+
/* 5.79 (5.78 carry-over): where actionsFullWidthBelow reaches wider than actionsBarBelow, the bar isn't pinned between
|
|
2415
|
+
* the two breakpoints and its buttons sit in the same full-width row — every button there is radius-md, not some. */
|
|
2416
|
+
@media (min-width: 640px) and (max-width: 767.98px) {
|
|
2417
|
+
.aura-page-header--actions-full-below-md.aura-page-header--actions-bar-below-sm > .aura-page-header__actions .aura-btn:not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
|
|
2418
|
+
}
|
|
2419
|
+
@media (min-width: 640px) and (max-width: 1023.98px) {
|
|
2420
|
+
.aura-page-header--actions-full-below-lg.aura-page-header--actions-bar-below-sm > .aura-page-header__actions .aura-btn:not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
|
|
2421
|
+
}
|
|
2422
|
+
@media (min-width: 768px) and (max-width: 1023.98px) {
|
|
2423
|
+
.aura-page-header--actions-full-below-lg.aura-page-header--actions-bar-below-md > .aura-page-header__actions .aura-btn:not(.aura-icon-btn) { border-radius: var(--aura-radius-md); }
|
|
2424
|
+
}
|
|
2425
|
+
/* 5.79 (visual audit 10): in an AppShell on a desktop the edge strip starts where the content does — after the
|
|
2426
|
+
* sidebar (its rail width when collapsed; the right edge in RTL) — and its contents line up with the content's 32px
|
|
2427
|
+
* padding, instead of running under the sidebar. Outside an AppShell it keeps the screen's full width. */
|
|
2428
|
+
@media (min-width: 1024px) and (min-height: 30.00125rem) {
|
|
2429
|
+
.aura-shell:has(> .aura-shell__nav) .aura-actionbar--edge:not(.is-idle) { inset-inline-start: var(--aura-sidenav-width); }
|
|
2430
|
+
.aura-shell:has(> .aura-shell__nav .aura-nav--collapsed) .aura-actionbar--edge:not(.is-idle) { inset-inline-start: var(--aura-sidenav-rail-width); }
|
|
2431
|
+
.aura-shell:not(:has(.aura-shell__content.is-flush)) .aura-actionbar--edge:not(.is-idle) > .aura-actionbar__inner { padding-inline: var(--aura-space-8); } /* not with contentPadding={false} */
|
|
2432
|
+
}
|
|
2433
|
+
/* 5.78 (visual audit 9): one rule for the bottom strips on a phone, as PageHeader's (5.48) — the status on its own row
|
|
2434
|
+
* at the top, the actions sharing the row under it (an IconButton keeps its square; labels too long to share take a row
|
|
2435
|
+
* each), 16px both sides as the page. edgeBelow="md" follows it up to 768px, as PageHeader's md strip. */
|
|
2436
|
+
@media (max-width: 639.98px) {
|
|
2437
|
+
@container aura-actionbar (max-width: 639.98px) {
|
|
2438
|
+
:is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) > .aura-actionbar__inner { padding-inline: var(--aura-space-4); }
|
|
2439
|
+
:is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) > .aura-actionbar__inner > .aura-actionbar__status:not(:empty) { flex-basis: 100%; }
|
|
2440
|
+
:is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) .aura-actionbar__actions { flex: 1 1 auto; min-width: 0; margin-inline-start: 0; }
|
|
2441
|
+
:is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) .aura-actionbar__actions > :not(.aura-icon-btn, :has(> .aura-icon-btn)) { flex: 1 1 0; min-width: max-content; } /* as PageHeader's strip (5.61): shares, a long label takes its own row */
|
|
2442
|
+
:is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) .aura-actionbar__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor):not(:has(> .aura-icon-btn)) > .aura-btn { width: 100%; }
|
|
2443
|
+
}
|
|
2444
|
+
}
|
|
2445
|
+
@media (min-width: 640px) and (max-width: 767.98px) {
|
|
2446
|
+
.aura-actionbar--edge-below-md:not(.is-idle) > .aura-actionbar__inner { padding-inline: var(--aura-space-4); }
|
|
2447
|
+
.aura-actionbar--edge-below-md:not(.is-idle) > .aura-actionbar__inner > .aura-actionbar__status:not(:empty) { flex-basis: 100%; }
|
|
2448
|
+
.aura-actionbar--edge-below-md:not(.is-idle) .aura-actionbar__actions { flex: 1 1 auto; min-width: 0; margin-inline-start: 0; }
|
|
2449
|
+
.aura-actionbar--edge-below-md:not(.is-idle) .aura-actionbar__actions > :not(.aura-icon-btn, :has(> .aura-icon-btn)) { flex: 1 1 0; min-width: max-content; } /* as PageHeader's strip (5.61): shares, a long label takes its own row */
|
|
2450
|
+
.aura-actionbar--edge-below-md:not(.is-idle) .aura-actionbar__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor):not(:has(> .aura-icon-btn)) > .aura-btn { width: 100%; }
|
|
2451
|
+
}
|
|
2363
2452
|
@media (max-width: 639.98px) { .aura-actionbar--edge-below-sm:not(.is-idle) { border: 0; border-top: 1px solid var(--aura-border-default); border-radius: 0; box-shadow: none; } }
|
|
2364
2453
|
@media (max-width: 639.98px) and (min-height: 30.00125rem) {
|
|
2365
2454
|
.aura-actionbar--edge-below-sm:not(.is-idle) { position: fixed; left: 0; right: 0; width: auto; bottom: var(--aura-bottomnav-offset, 0px); margin: 0; padding-bottom: max(0px, env(safe-area-inset-bottom, 0px) - var(--aura-bottomnav-offset, 0px)); }
|
|
@@ -2583,7 +2672,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
2583
2672
|
.aura-table__head:not(.has-select-all) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
|
|
2584
2673
|
.aura-table__head > .aura-table__sel { position: static; width: auto; gap: var(--aura-space-3); padding: 0 var(--aura-space-4); }
|
|
2585
2674
|
.aura-table__sel-text { display: inline; color: var(--aura-fg-secondary); }
|
|
2586
|
-
.aura-table__gutter { display: none; }
|
|
2675
|
+
.aura-table__gutter, .aura-table__gutter--end.has-picker { display: none; } /* 5.78 (audit 20): the column picker's slot too, which squeezed the card's title */
|
|
2587
2676
|
.aura-table__row, .aura-table__row:last-child {
|
|
2588
2677
|
height: auto; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--aura-space-1) var(--aura-space-4);
|
|
2589
2678
|
margin-bottom: var(--aura-space-2); padding: var(--aura-space-4);
|
|
@@ -2701,6 +2790,10 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
2701
2790
|
* 1.6 line, so a loading card (its bars follow 1lh) is as tall as one with Thai text. */
|
|
2702
2791
|
.aura-field__label:lang(th), .aura-field__hint:lang(th), .aura-field__error:lang(th), .aura-field__addon:lang(th) { line-height: 1.6; }
|
|
2703
2792
|
.aura-choice__desc:lang(th), .aura-check__desc:lang(th) { font-size: max(13px, .8125rem); line-height: 1.6; }
|
|
2793
|
+
/* 5.79 (visual audit, Thai): the calendar's weekday row in Thai (อา จ อ …) at 13px — 12px was the hardest text on the
|
|
2794
|
+
* page to read; the grid carries lang="th" with a Thai locale. Two-line Thai nav labels get room between lines. */
|
|
2795
|
+
.aura-cal__grid:lang(th) th { font-size: max(13px, .8125rem); }
|
|
2796
|
+
.aura-nav__label:lang(th) { line-height: 1.5; }
|
|
2704
2797
|
.aura-tbl__row > .aura-tbl__td[data-label]:lang(th)::before, .aura-table__td[data-label]:lang(th)::before { font-family: var(--font-sans); font-size: max(12px, .75rem); line-height: max(18px, 1.125rem); }
|
|
2705
2798
|
.aura-table--stacked .aura-table__td[data-label]:lang(th) { line-height: 1.6; }
|
|
2706
2799
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jirawatpyk/aura-react",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.79.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",
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
"test:hydrate": "node scripts/hydrate-test.ts",
|
|
89
89
|
"size": "node scripts/size-check.ts",
|
|
90
90
|
"preexamples": "node scripts/build.ts",
|
|
91
|
-
"test:layout": "node scripts/layout-test.ts"
|
|
91
|
+
"test:layout": "node scripts/layout-test.ts && node scripts/dev-warn-test.ts"
|
|
92
92
|
},
|
|
93
93
|
"peerDependencies": {
|
|
94
94
|
"react": ">=18",
|