@jirawatpyk/aura-react 5.85.0 → 5.87.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 +23 -2
- package/dist/aura.bundle.js +64 -9
- package/dist/cjs/index.cjs +64 -9
- package/dist/esm/DataTable.js +14 -6
- package/dist/esm/display.js +50 -3
- package/dist/index.d.cts +12 -2
- package/dist/index.d.ts +12 -2
- package/dist/server/index.cjs +50 -3
- package/dist/server/index.d.cts +7 -2
- package/dist/server/index.d.ts +7 -2
- package/dist/server/index.js +50 -3
- package/dist/styles.css +80 -38
- package/dist/styles.layer.css +80 -38
- package/package.json +1 -1
package/dist/styles.layer.css
CHANGED
|
@@ -30,16 +30,19 @@
|
|
|
30
30
|
.aura-btn:active { transform: scale(0.98); }
|
|
31
31
|
.aura-btn:disabled, a.aura-btn[aria-disabled='true'] { opacity: var(--aura-disabled-opacity); pointer-events: none; }
|
|
32
32
|
a.aura-btn { text-decoration: none; }
|
|
33
|
-
/* fullWidth: fills the row and wraps a long label (Thai and Swedish run ~30% longer) instead of overflowing.
|
|
33
|
+
/* fullWidth: fills the row and wraps a long label (Thai and Swedish run ~30% longer) instead of overflowing.
|
|
34
|
+
* 5.87 (Chamber-OS 203): one shape wherever it sits — corners at most half the 44px button, so one line is the lozenge
|
|
35
|
+
* and a wrapped label is a rounded box (22px corners), not a stretched pill. */
|
|
34
36
|
.aura-btn--full {
|
|
35
37
|
width: 100%; height: auto; min-height: var(--aura-button-height); white-space: normal; flex-shrink: 1;
|
|
36
38
|
padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere;
|
|
39
|
+
border-radius: min(var(--aura-button-radius), 22px);
|
|
37
40
|
}
|
|
38
41
|
/* 5.53 (Chamber-OS 165): fullWidth="below-md" — the same, only below 768px, and at least 44px tall there, touchHeight
|
|
39
42
|
* or not (hence the doubled class); its natural width above. "below-sm" is with the phone rules (max-width 639.98px). */
|
|
40
43
|
@media (max-width: 767.98px) {
|
|
41
44
|
.aura-btn.aura-btn.aura-btn--full-below-md { width: 100%; height: auto; min-height: var(--aura-touch-target); white-space: normal; flex-shrink: 1;
|
|
42
|
-
padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
|
|
45
|
+
padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; border-radius: min(var(--aura-button-radius), 22px); }
|
|
43
46
|
}
|
|
44
47
|
.aura-btn.is-loading { cursor: progress; }
|
|
45
48
|
/* 5.14: a button gated with aria-disabled looks unavailable but stays focusable (no pointer-events: none, so the
|
|
@@ -1360,11 +1363,17 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1360
1363
|
* span as wide as its text and the page scrolled sideways. :where keeps the selector's weight as before. */
|
|
1361
1364
|
@media (max-width: 639.98px) {
|
|
1362
1365
|
.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
|
|
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
|
|
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; }
|
|
1366
|
+
.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: min(var(--aura-button-radius), 22px); } /* 5.87 (Chamber-OS 203): a lozenge on one line, a rounded box when the label wraps — as every full-width button */
|
|
1367
|
+
.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: min(var(--aura-button-radius), 22px); } /* 5.78: actionsBar's split — the header's own actions, not the strip */
|
|
1368
|
+
.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; min-width: fit-content; }
|
|
1369
|
+
.aura-page-header--actions-full-below-sm > .aura-page-header__actions > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; border-radius: min(var(--aura-button-radius), 22px); }
|
|
1370
|
+
.aura-page-header--actions-full-below-sm > .aura-page-header__actions > :is(.aura-btn--sm, * > .aura-btn--sm):not(.aura-icon-btn) { min-height: var(--aura-button-height-sm); padding-block: var(--aura-space-1); }
|
|
1371
|
+
.aura-page-header--actions-full-below-sm > .aura-page-header__actions > :is(.aura-btn--touch, * > .aura-btn--touch):not(.aura-icon-btn) { min-height: var(--aura-touch-target); }
|
|
1366
1372
|
.aura-page-header--actions-full-below-sm > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
|
|
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) */
|
|
1373
|
+
.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; min-width: fit-content; } /* 5.71: actionsBar in the row, as the actions (5.61) */
|
|
1374
|
+
.aura-page-header--actions-full-below-sm > .aura-page-header__actions > .aura-page-header__bar > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; border-radius: min(var(--aura-button-radius), 22px); }
|
|
1375
|
+
.aura-page-header--actions-full-below-sm > .aura-page-header__actions > .aura-page-header__bar > :is(.aura-btn--sm, * > .aura-btn--sm):not(.aura-icon-btn) { min-height: var(--aura-button-height-sm); padding-block: var(--aura-space-1); }
|
|
1376
|
+
.aura-page-header--actions-full-below-sm > .aura-page-header__actions > .aura-page-header__bar > :is(.aura-btn--touch, * > .aura-btn--touch):not(.aura-icon-btn) { min-height: var(--aura-touch-target); }
|
|
1368
1377
|
.aura-page-header--actions-full-below-sm > .aura-page-header__actions > .aura-page-header__bar > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { flex: none; }
|
|
1369
1378
|
/* (5.71: an IconButton in actionsBar doesn't put the actions in 5.45's one-row mode — the :has() above skips the bar box.) */
|
|
1370
1379
|
.aura-page-header--actions-full-below-sm > .aura-page-header__actions > .aura-icon-btn { flex: none; }
|
|
@@ -1372,42 +1381,54 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1372
1381
|
.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; }
|
|
1373
1382
|
.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; }
|
|
1374
1383
|
.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
|
|
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
|
|
1384
|
+
.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: min(var(--aura-button-radius), 22px); } /* 5.78 (visual audit 11) */
|
|
1385
|
+
.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: min(var(--aura-button-radius), 22px); }
|
|
1377
1386
|
.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 */
|
|
1378
1387
|
}
|
|
1379
1388
|
@media (max-width: 767.98px) {
|
|
1380
1389
|
.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
|
|
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
|
|
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; }
|
|
1390
|
+
.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: min(var(--aura-button-radius), 22px); } /* 5.87 (Chamber-OS 203): a lozenge on one line, a rounded box when the label wraps — as every full-width button */
|
|
1391
|
+
.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: min(var(--aura-button-radius), 22px); } /* 5.78: actionsBar's split — the header's own actions, not the strip */
|
|
1392
|
+
.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; min-width: fit-content; }
|
|
1393
|
+
.aura-page-header--actions-full-below-md > .aura-page-header__actions > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; border-radius: min(var(--aura-button-radius), 22px); }
|
|
1394
|
+
.aura-page-header--actions-full-below-md > .aura-page-header__actions > :is(.aura-btn--sm, * > .aura-btn--sm):not(.aura-icon-btn) { min-height: var(--aura-button-height-sm); padding-block: var(--aura-space-1); }
|
|
1395
|
+
.aura-page-header--actions-full-below-md > .aura-page-header__actions > :is(.aura-btn--touch, * > .aura-btn--touch):not(.aura-icon-btn) { min-height: var(--aura-touch-target); }
|
|
1384
1396
|
.aura-page-header--actions-full-below-md > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
|
|
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) */
|
|
1397
|
+
.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; min-width: fit-content; } /* 5.71: actionsBar in the row, as the actions (5.61) */
|
|
1398
|
+
.aura-page-header--actions-full-below-md > .aura-page-header__actions > .aura-page-header__bar > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; border-radius: min(var(--aura-button-radius), 22px); }
|
|
1399
|
+
.aura-page-header--actions-full-below-md > .aura-page-header__actions > .aura-page-header__bar > :is(.aura-btn--sm, * > .aura-btn--sm):not(.aura-icon-btn) { min-height: var(--aura-button-height-sm); padding-block: var(--aura-space-1); }
|
|
1400
|
+
.aura-page-header--actions-full-below-md > .aura-page-header__actions > .aura-page-header__bar > :is(.aura-btn--touch, * > .aura-btn--touch):not(.aura-icon-btn) { min-height: var(--aura-touch-target); }
|
|
1386
1401
|
.aura-page-header--actions-full-below-md > .aura-page-header__actions > .aura-page-header__bar > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { flex: none; }
|
|
1387
1402
|
.aura-page-header--actions-full-below-md > .aura-page-header__actions > .aura-icon-btn { flex: none; }
|
|
1388
1403
|
.aura-page-header--actions-full-below-md > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
|
|
1389
1404
|
.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; }
|
|
1390
1405
|
.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; }
|
|
1391
1406
|
.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
|
|
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
|
|
1407
|
+
.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: min(var(--aura-button-radius), 22px); } /* 5.78 (visual audit 11) */
|
|
1408
|
+
.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: min(var(--aura-button-radius), 22px); }
|
|
1394
1409
|
.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 */
|
|
1395
1410
|
}
|
|
1396
1411
|
@media (max-width: 1023.98px) {
|
|
1397
1412
|
.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
|
|
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
|
|
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; }
|
|
1413
|
+
.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: min(var(--aura-button-radius), 22px); } /* 5.87 (Chamber-OS 203): a lozenge on one line, a rounded box when the label wraps — as every full-width button */
|
|
1414
|
+
.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: min(var(--aura-button-radius), 22px); } /* 5.78: actionsBar's split — the header's own actions, not the strip */
|
|
1415
|
+
.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; min-width: fit-content; }
|
|
1416
|
+
.aura-page-header--actions-full-below-lg > .aura-page-header__actions > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; border-radius: min(var(--aura-button-radius), 22px); }
|
|
1417
|
+
.aura-page-header--actions-full-below-lg > .aura-page-header__actions > :is(.aura-btn--sm, * > .aura-btn--sm):not(.aura-icon-btn) { min-height: var(--aura-button-height-sm); padding-block: var(--aura-space-1); }
|
|
1418
|
+
.aura-page-header--actions-full-below-lg > .aura-page-header__actions > :is(.aura-btn--touch, * > .aura-btn--touch):not(.aura-icon-btn) { min-height: var(--aura-touch-target); }
|
|
1401
1419
|
.aura-page-header--actions-full-below-lg > .aura-page-header__actions > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
|
|
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) */
|
|
1420
|
+
.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; min-width: fit-content; } /* 5.71: actionsBar in the row, as the actions (5.61) */
|
|
1421
|
+
.aura-page-header--actions-full-below-lg > .aura-page-header__actions > .aura-page-header__bar > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; border-radius: min(var(--aura-button-radius), 22px); }
|
|
1422
|
+
.aura-page-header--actions-full-below-lg > .aura-page-header__actions > .aura-page-header__bar > :is(.aura-btn--sm, * > .aura-btn--sm):not(.aura-icon-btn) { min-height: var(--aura-button-height-sm); padding-block: var(--aura-space-1); }
|
|
1423
|
+
.aura-page-header--actions-full-below-lg > .aura-page-header__actions > .aura-page-header__bar > :is(.aura-btn--touch, * > .aura-btn--touch):not(.aura-icon-btn) { min-height: var(--aura-touch-target); }
|
|
1403
1424
|
.aura-page-header--actions-full-below-lg > .aura-page-header__actions > .aura-page-header__bar > :is(.aura-icon-btn, :has(> .aura-icon-btn)) { flex: none; }
|
|
1404
1425
|
.aura-page-header--actions-full-below-lg > .aura-page-header__actions > .aura-icon-btn { flex: none; }
|
|
1405
1426
|
.aura-page-header--actions-full-below-lg > .aura-page-header__actions > :has(> .aura-icon-btn) { flex: none; }
|
|
1406
1427
|
.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; }
|
|
1407
1428
|
.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; }
|
|
1408
1429
|
.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
|
|
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
|
|
1430
|
+
.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: min(var(--aura-button-radius), 22px); } /* 5.78 (visual audit 11) */
|
|
1431
|
+
.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: min(var(--aura-button-radius), 22px); }
|
|
1411
1432
|
.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 */
|
|
1412
1433
|
}
|
|
1413
1434
|
/* 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
|
|
@@ -1434,7 +1455,10 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1434
1455
|
: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); }
|
|
1435
1456
|
:is(.aura-page-header--actions-bar-below-sm.aura-page-header--actions-bar-floating > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-sm.aura-page-header--actions-bar-floating > .aura-page-header__actions > .aura-page-header__bar) { left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px))); padding-bottom: var(--aura-space-2); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); }
|
|
1436
1457
|
: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-page-header__status { display: block; flex: 1 1 100%; min-width: 0; font-size: max(14px, .875rem); line-height: 1.5; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
|
|
1437
|
-
: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) > :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; }
|
|
1458
|
+
: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) > :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; min-width: fit-content; }
|
|
1459
|
+
: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) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; border-radius: min(var(--aura-button-radius), 22px); }
|
|
1460
|
+
: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) > :is(.aura-btn--sm, * > .aura-btn--sm):not(.aura-icon-btn) { min-height: var(--aura-button-height-sm); padding-block: var(--aura-space-1); }
|
|
1461
|
+
: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) > :is(.aura-btn--touch, * > .aura-btn--touch):not(.aura-icon-btn) { min-height: var(--aura-touch-target); }
|
|
1438
1462
|
: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) > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
|
|
1439
1463
|
: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 { flex: none; }
|
|
1440
1464
|
: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) > :has(> .aura-icon-btn) { flex: none; }
|
|
@@ -1460,7 +1484,10 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1460
1484
|
: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); }
|
|
1461
1485
|
:is(.aura-page-header--actions-bar-below-md.aura-page-header--actions-bar-floating > .aura-page-header__actions:not(.is-split), .aura-page-header--actions-bar-below-md.aura-page-header--actions-bar-floating > .aura-page-header__actions > .aura-page-header__bar) { left: var(--aura-space-4); right: var(--aura-space-4); bottom: calc(var(--aura-bottomnav-offset, 0px) + max(var(--aura-space-3), env(safe-area-inset-bottom, 0px))); padding-bottom: var(--aura-space-2); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); box-shadow: var(--aura-shadow-overlay); }
|
|
1462
1486
|
: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-page-header__status { display: block; flex: 1 1 100%; min-width: 0; font-size: max(14px, .875rem); line-height: 1.5; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
|
|
1463
|
-
: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) > :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; }
|
|
1487
|
+
: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) > :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; min-width: fit-content; }
|
|
1488
|
+
: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) > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; border-radius: min(var(--aura-button-radius), 22px); }
|
|
1489
|
+
: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) > :is(.aura-btn--sm, * > .aura-btn--sm):not(.aura-icon-btn) { min-height: var(--aura-button-height-sm); padding-block: var(--aura-space-1); }
|
|
1490
|
+
: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) > :is(.aura-btn--touch, * > .aura-btn--touch):not(.aura-icon-btn) { min-height: var(--aura-touch-target); }
|
|
1464
1491
|
: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) > :is(.aura-dropdown, .aura-tooltip-anchor, .aura-popover-anchor) > * { flex: 1 1 auto; }
|
|
1465
1492
|
: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 { flex: none; }
|
|
1466
1493
|
: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) > :has(> .aura-icon-btn) { flex: none; }
|
|
@@ -1997,7 +2024,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
1997
2024
|
.aura-dialog__foot > .aura-btn, .aura-dialog__foot > * > .aura-btn:only-child,
|
|
1998
2025
|
.aura-drawer__foot > .aura-btn, .aura-drawer__foot > * > .aura-btn:only-child, .aura-btn.aura-btn.aura-btn--full-below-sm {
|
|
1999
2026
|
height: auto; min-height: var(--aura-touch-target); white-space: normal; flex-shrink: 1;
|
|
2000
|
-
padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
|
|
2027
|
+
padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; border-radius: min(var(--aura-button-radius), 22px); }
|
|
2001
2028
|
.aura-dialog__foot > * > .aura-btn:only-child, .aura-btn.aura-btn.aura-btn--full-below-sm { width: 100%; }
|
|
2002
2029
|
.aura-drawer__foot > * { max-width: 100%; }
|
|
2003
2030
|
.aura-drawer:not(.aura-drawer--nav) { max-width: none; }
|
|
@@ -2423,15 +2450,15 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
2423
2450
|
:root:has(.aura-actionbar--edge:not(.is-idle)):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-actionbar-space); }
|
|
2424
2451
|
}
|
|
2425
2452
|
/* 5.79 (5.78 carry-over): where actionsFullWidthBelow reaches wider than actionsBarBelow, the bar isn't pinned between
|
|
2426
|
-
* the two breakpoints and its buttons sit in the same full-width row — every button there
|
|
2453
|
+
* the two breakpoints and its buttons sit in the same full-width row — every button there has the full-width shape (5.87). */
|
|
2427
2454
|
@media (min-width: 640px) and (max-width: 767.98px) {
|
|
2428
|
-
.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
|
|
2455
|
+
.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: min(var(--aura-button-radius), 22px); }
|
|
2429
2456
|
}
|
|
2430
2457
|
@media (min-width: 640px) and (max-width: 1023.98px) {
|
|
2431
|
-
.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
|
|
2458
|
+
.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: min(var(--aura-button-radius), 22px); }
|
|
2432
2459
|
}
|
|
2433
2460
|
@media (min-width: 768px) and (max-width: 1023.98px) {
|
|
2434
|
-
.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
|
|
2461
|
+
.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: min(var(--aura-button-radius), 22px); }
|
|
2435
2462
|
}
|
|
2436
2463
|
/* 5.79 (visual audit 10): in an AppShell on a desktop the edge strip starts where the content does — after the
|
|
2437
2464
|
* sidebar (its rail width when collapsed; the right edge in RTL) — and its contents line up with the content's 32px
|
|
@@ -2449,7 +2476,10 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
2449
2476
|
: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); }
|
|
2450
2477
|
: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%; }
|
|
2451
2478
|
: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; }
|
|
2452
|
-
: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 */
|
|
2479
|
+
: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; min-width: fit-content; } /* as PageHeader's strip (5.61): shares, a long label takes its own row */
|
|
2480
|
+
:is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) .aura-actionbar__actions > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-touch-target); white-space: normal; padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; border-radius: min(var(--aura-button-radius), 22px); }
|
|
2481
|
+
:is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) .aura-actionbar__actions > :is(.aura-btn--sm, * > .aura-btn--sm):not(.aura-icon-btn) { min-height: var(--aura-touch-target); }
|
|
2482
|
+
:is(.aura-actionbar--edge, .aura-actionbar--edge-below-sm, .aura-actionbar--edge-below-md):not(.is-idle) .aura-actionbar__actions > :is(.aura-btn--touch, * > .aura-btn--touch):not(.aura-icon-btn) { min-height: var(--aura-touch-target); }
|
|
2453
2483
|
: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%; }
|
|
2454
2484
|
}
|
|
2455
2485
|
}
|
|
@@ -2457,7 +2487,11 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
2457
2487
|
.aura-actionbar--edge-below-md:not(.is-idle) > .aura-actionbar__inner { padding-inline: var(--aura-space-4); }
|
|
2458
2488
|
.aura-actionbar--edge-below-md:not(.is-idle) > .aura-actionbar__inner > .aura-actionbar__status:not(:empty) { flex-basis: 100%; }
|
|
2459
2489
|
.aura-actionbar--edge-below-md:not(.is-idle) .aura-actionbar__actions { flex: 1 1 auto; min-width: 0; margin-inline-start: 0; }
|
|
2460
|
-
.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 */
|
|
2490
|
+
.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; min-width: fit-content; } /* as PageHeader's strip (5.61): shares, a long label takes its own row */
|
|
2491
|
+
.aura-actionbar--edge-below-md:not(.is-idle) .aura-actionbar__actions > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { height: auto; min-height: var(--aura-button-height); white-space: normal; padding-block: var(--aura-space-2); line-height: 1.35; text-align: center; overflow-wrap: anywhere; border-radius: min(var(--aura-button-radius), 22px); }
|
|
2492
|
+
.aura-actionbar--edge-below-md:not(.is-idle) .aura-actionbar__actions > :is(.aura-btn--sm, * > .aura-btn--sm):not(.aura-icon-btn) { min-height: var(--aura-button-height-sm); padding-block: var(--aura-space-1); }
|
|
2493
|
+
.aura-actionbar--edge-below-md:not(.is-idle) .aura-actionbar__actions > :is(.aura-btn--touch, * > .aura-btn--touch):not(.aura-icon-btn) { min-height: var(--aura-touch-target); }
|
|
2494
|
+
@media (pointer: coarse) { .aura-actionbar--edge-below-md:not(.is-idle) .aura-actionbar__actions > :is(.aura-btn, * > .aura-btn):not(.aura-icon-btn) { min-height: var(--aura-touch-target); } } /* as 5.55: 44px on a touch screen */
|
|
2461
2495
|
.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%; }
|
|
2462
2496
|
}
|
|
2463
2497
|
@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; } }
|
|
@@ -2666,8 +2700,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
2666
2700
|
@container aura-stack (width >= 9999.5px) { .aura-table [data-grid='off'] { display: none; } }
|
|
2667
2701
|
|
|
2668
2702
|
/* Below stackBelow the same grid lays out as cards: the first column is the title, the first other pill column sits
|
|
2669
|
-
* beside it, `actions` columns go top-right, the rest are label/value fields two to a line.
|
|
2670
|
-
*
|
|
2703
|
+
* beside it, `actions` columns go top-right, the rest are label/value fields two to a line.
|
|
2704
|
+
* 5.87 (Chamber-OS 205): the column headers leave the accessibility tree while the cards show (only the select-all
|
|
2705
|
+
* line stays); each field's label is generated content that is read with its value. */
|
|
2671
2706
|
@container aura-stack (width < 9999.5px) {
|
|
2672
2707
|
.aura-table { background: transparent; border: 0; border-radius: 0; overflow: visible; }
|
|
2673
2708
|
/* 5.26: stacked cards inside a framed Card keep its padding (0 where the Card is flush). */
|
|
@@ -2680,10 +2715,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
2680
2715
|
position: static; height: auto; min-width: 0; padding: 0 0 var(--aura-space-3); border: 0; background: none;
|
|
2681
2716
|
font-family: var(--font-sans); font-size: max(13px, .8125rem);
|
|
2682
2717
|
}
|
|
2683
|
-
.aura-table__head > .aura-table__th {
|
|
2684
|
-
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
|
2685
|
-
}
|
|
2686
|
-
.aura-table__head:not(.has-select-all) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
|
|
2718
|
+
.aura-table__head > .aura-table__th, .aura-table__head:not(.has-select-all) { display: none; }
|
|
2687
2719
|
.aura-table__head > .aura-table__sel { position: static; width: auto; gap: var(--aura-space-3); padding: 0 var(--aura-space-4); }
|
|
2688
2720
|
.aura-table__sel-text { display: inline; color: var(--aura-fg-secondary); }
|
|
2689
2721
|
.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 */
|
|
@@ -2699,7 +2731,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
2699
2731
|
margin-bottom: var(--aura-space-1);
|
|
2700
2732
|
padding: 0; line-height: normal;
|
|
2701
2733
|
}
|
|
2702
|
-
.aura-table__td[data-hide]
|
|
2734
|
+
.aura-table__td[data-hide] { display: block; }
|
|
2703
2735
|
/* 5.13 (Chamber-OS 80): card: 'hide' leaves a column out of the card; cardOrder orders the fields. */
|
|
2704
2736
|
.aura-table__td[data-card='hide'], .aura-table__head > .aura-table__th[data-card='hide'],
|
|
2705
2737
|
.aura-table__row--skeleton .aura-table__td[data-card='hide'] { display: none; }
|
|
@@ -2709,14 +2741,14 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
2709
2741
|
.aura-table__row--skeleton .aura-table__td.is-end { justify-content: flex-start; }
|
|
2710
2742
|
/* hideSelectionInCards: no row boxes, no select-all line. */
|
|
2711
2743
|
.aura-table--cards-nosel .aura-table__row > .aura-table__sel { display: none; }
|
|
2712
|
-
.aura-table--cards-nosel .aura-table__head {
|
|
2744
|
+
.aura-table--cards-nosel .aura-table__head { display: none; }
|
|
2713
2745
|
.aura-table--cards-nosel .aura-table__head > .aura-table__sel { display: none; }
|
|
2714
2746
|
/* 5.11: rowHeight="auto" leaves cards as they are. */
|
|
2715
2747
|
.aura-table__td--auto { display: block; white-space: nowrap; }
|
|
2716
2748
|
.aura-table__td--auto .aura-table__cell > .aura-badge, .aura-table__td--auto .aura-table__cell > .aura-pill { margin: 0; }
|
|
2717
2749
|
.aura-table__spacer { display: none; }
|
|
2718
2750
|
.aura-table__td[data-label]::before {
|
|
2719
|
-
content: attr(data-label);
|
|
2751
|
+
content: attr(data-label);
|
|
2720
2752
|
display: block; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start;
|
|
2721
2753
|
font-family: var(--font-mono); font-size: max(11px, .6875rem); line-height: normal; font-weight: 400; color: var(--aura-fg-secondary);
|
|
2722
2754
|
}
|
|
@@ -2760,6 +2792,16 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
2760
2792
|
.aura-table__total > .is-blank { display: none; }
|
|
2761
2793
|
.aura-table__foot { border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); margin-top: var(--aura-space-2); background: var(--aura-bg-surface); }
|
|
2762
2794
|
.aura-table__empty { background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); }
|
|
2795
|
+
/* 5.87 (Chamber-OS 204): stackStyle="list" — the same stacked layout as one list divided by rules: no frame, radius
|
|
2796
|
+
* or gap per row, so it sits in a framed Card. A rule above every row after the first (the virtual spacers and the
|
|
2797
|
+
* header aren't rows); the totals row and the pager follow the last rule, unshaded and unframed. */
|
|
2798
|
+
.aura-table--stack-list .aura-table__row, .aura-table--stack-list .aura-table__row:last-child { margin-bottom: 0; padding-inline: 0; border-width: 0; border-radius: 0; }
|
|
2799
|
+
.aura-table--stack-list .aura-table__row ~ .aura-table__row { border-top-width: 1px; }
|
|
2800
|
+
.aura-table--stack-list .aura-table__head > .aura-table__sel { padding-inline: 0; }
|
|
2801
|
+
.aura-table--stack-list .aura-table__head.has-select-all + .aura-table__row { border-top-width: 1px; } /* under the select-all line */
|
|
2802
|
+
.aura-table--stack-list .aura-table__total { background: none; }
|
|
2803
|
+
.aura-table--stack-list .aura-table__foot { margin-top: 0; padding-inline: 0; border-width: 1px 0 0; border-radius: 0; background: none; }
|
|
2804
|
+
.aura-table--stack-list .aura-table__empty { border: 0; border-radius: 0; background: none; }
|
|
2763
2805
|
}
|
|
2764
2806
|
|
|
2765
2807
|
/* ---------- 5.1.1: Windows High Contrast / forced colours ---------- */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jirawatpyk/aura-react",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.87.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",
|