@jirawatpyk/aura-react 5.76.0 → 5.78.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 +16 -0
- package/dist/aura.bundle.js +120 -10
- package/dist/cjs/index.cjs +120 -10
- package/dist/esm/DataTable.js +27 -1
- 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/tiles.js +16 -1
- package/dist/esm/useModal.js +13 -0
- package/dist/server/index.cjs +33 -8
- package/dist/server/index.js +33 -8
- package/dist/styles.css +57 -3
- package/dist/styles.layer.css +57 -3
- package/package.json +2 -2
package/dist/styles.layer.css
CHANGED
|
@@ -822,6 +822,20 @@ a.aura-icon-btn { text-decoration: none; }
|
|
|
822
822
|
* indicator paints over its bottom row. The list scrolls sideways (overflow-x), and a scroll container clips at its
|
|
823
823
|
* padding box: an indicator pulled 1px over a border (as up to 5.22) showed only half its height. Same box height. */
|
|
824
824
|
.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; }
|
|
825
|
+
/* 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
|
|
826
|
+
* "scroll for more", not as a broken label. Logical: in RTL the fades swap sides. */
|
|
827
|
+
.aura-tabs__list[data-aura-more] {
|
|
828
|
+
--aura-fade-s: 0px; --aura-fade-e: 0px;
|
|
829
|
+
-webkit-mask-image: linear-gradient(to right, transparent, black var(--aura-fade-s), black calc(100% - var(--aura-fade-e)), transparent);
|
|
830
|
+
mask-image: linear-gradient(to right, transparent, black var(--aura-fade-s), black calc(100% - var(--aura-fade-e)), transparent);
|
|
831
|
+
}
|
|
832
|
+
.aura-tabs__list[data-aura-more] { scroll-padding-inline: var(--aura-space-8); } /* a focused tab scrolls clear of the fade */
|
|
833
|
+
.aura-tabs__list[data-aura-more~='start'] { --aura-fade-s: var(--aura-space-8); }
|
|
834
|
+
.aura-tabs__list[data-aura-more~='end'] { --aura-fade-e: var(--aura-space-8); }
|
|
835
|
+
[dir='rtl'] .aura-tabs__list[data-aura-more], .aura-tabs__list[data-aura-more][dir='rtl'] {
|
|
836
|
+
-webkit-mask-image: linear-gradient(to left, transparent, black var(--aura-fade-s), black calc(100% - var(--aura-fade-e)), transparent);
|
|
837
|
+
mask-image: linear-gradient(to left, transparent, black var(--aura-fade-s), black calc(100% - var(--aura-fade-e)), transparent);
|
|
838
|
+
}
|
|
825
839
|
.aura-tab {
|
|
826
840
|
position: relative; display: inline-flex; align-items: center; gap: var(--aura-space-2); flex: none;
|
|
827
841
|
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 +1015,9 @@ a.aura-tab { text-decoration: none; }
|
|
|
1001
1015
|
/* ---------- Combobox ---------- */
|
|
1002
1016
|
.aura-combo { cursor: text; }
|
|
1003
1017
|
.aura-combo .aura-input__control { padding-right: calc(var(--aura-space-2) + 2 * var(--aura-control-sm)); }
|
|
1018
|
+
/* 5.78 (visual audit 25): room for the clear button only while there is one — an empty TimePicker in a narrow column
|
|
1019
|
+
* showed "hh:m". (Also on a coarse pointer and with touchHeight, below.) */
|
|
1020
|
+
.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
1021
|
.aura-combo__clear, .aura-combo__toggle, .aura-date__toggle {
|
|
1005
1022
|
position: absolute; display: inline-flex; align-items: center; justify-content: center;
|
|
1006
1023
|
width: var(--aura-control-sm); height: var(--aura-control-sm); padding: 0; border: 0; border-radius: var(--aura-radius-full);
|
|
@@ -1296,6 +1313,9 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1296
1313
|
.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
1314
|
.aura-page-header__text { display: flex; flex-direction: column; gap: var(--aura-space-1); flex: 1 1 320px; min-width: 0; }
|
|
1298
1315
|
.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; }
|
|
1316
|
+
.aura-nowrap { white-space: nowrap; } /* 5.78: a code or document number kept on one line */
|
|
1317
|
+
/* …in a PageHeader title the number moves to the next line whole, and still breaks if it is longer than a line. */
|
|
1318
|
+
.aura-page-header__title .aura-nowrap { display: inline-block; max-width: 100%; white-space: normal; }
|
|
1299
1319
|
.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
1320
|
.aura-page-header__breadcrumb { min-width: 0; } /* 5.33 (DxT Monitor #7): Breadcrumb keeps its own type */
|
|
1301
1321
|
.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 +1345,8 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1325
1345
|
* span as wide as its text and the page scrolled sideways. :where keeps the selector's weight as before. */
|
|
1326
1346
|
@media (max-width: 639.98px) {
|
|
1327
1347
|
.aura-page-header--actions-full-below-sm > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
|
|
1348
|
+
.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 */
|
|
1349
|
+
.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
1350
|
.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
1351
|
.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
1352
|
.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 +1357,14 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1335
1357
|
.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
1358
|
.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
1359
|
.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); }
|
|
1360
|
+
.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) */
|
|
1361
|
+
.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
1362
|
.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
1363
|
}
|
|
1340
1364
|
@media (max-width: 767.98px) {
|
|
1341
1365
|
.aura-page-header--actions-full-below-md > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
|
|
1366
|
+
.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 */
|
|
1367
|
+
.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
1368
|
.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
1369
|
.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
1370
|
.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 +1374,14 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1348
1374
|
.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
1375
|
.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
1376
|
.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); }
|
|
1377
|
+
.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) */
|
|
1378
|
+
.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
1379
|
.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
1380
|
}
|
|
1353
1381
|
@media (max-width: 1023.98px) {
|
|
1354
1382
|
.aura-page-header--actions-full-below-lg > .aura-page-header__actions { flex: 1 1 100%; gap: var(--aura-space-3); }
|
|
1383
|
+
.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 */
|
|
1384
|
+
.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
1385
|
.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
1386
|
.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
1387
|
.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 +1391,8 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1361
1391
|
.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
1392
|
.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
1393
|
.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); }
|
|
1394
|
+
.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) */
|
|
1395
|
+
.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
1396
|
.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
1397
|
}
|
|
1366
1398
|
/* 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 +1413,7 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1381
1413
|
.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
1414
|
/* …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
1415
|
.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-
|
|
1416
|
+
: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
1417
|
/* 5.54 (Chamber-OS 166): the bar's buttons are 44px whatever the density, as ActionBar's on a phone. */
|
|
1386
1418
|
: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
1419
|
: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 +1439,7 @@ summary.aura-link::-webkit-details-marker { display: none; }
|
|
|
1407
1439
|
.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
1440
|
/* …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
1441
|
.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-
|
|
1442
|
+
: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
1443
|
/* 5.54 (Chamber-OS 166): the bar's buttons are 44px whatever the density, as ActionBar's on a phone. */
|
|
1412
1444
|
: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
1445
|
: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); }
|
|
@@ -1915,6 +1947,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
1915
1947
|
.aura-combo__toggle, .aura-date__toggle { right: 0; }
|
|
1916
1948
|
.aura-combo__clear, .aura-date .aura-combo__clear { right: var(--aura-touch-target); }
|
|
1917
1949
|
.aura-combo .aura-input__control, .aura-date .aura-input__control { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
|
|
1950
|
+
.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
1951
|
.aura-combo__clear::after, .aura-combo__toggle::after, .aura-date__toggle::after, .aura-tag__remove::after {
|
|
1919
1952
|
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
1953
|
}
|
|
@@ -1985,6 +2018,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
1985
2018
|
:is(.aura-field, .aura-filterbar).is-touch-always :is(.aura-combo__toggle, .aura-date__toggle) { right: 0; }
|
|
1986
2019
|
:is(.aura-field, .aura-filterbar).is-touch-always .aura-combo__clear { right: var(--aura-touch-target); }
|
|
1987
2020
|
: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)); }
|
|
2021
|
+
: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
2022
|
: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
2023
|
: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
2024
|
:is(.aura-field, .aura-filterbar).is-touch-always .aura-number__step { width: var(--aura-touch-target); }
|
|
@@ -1993,6 +2027,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
1993
2027
|
:is(.aura-field, .aura-filterbar).is-touch :is(.aura-combo__toggle, .aura-date__toggle) { right: 0; }
|
|
1994
2028
|
:is(.aura-field, .aura-filterbar).is-touch .aura-combo__clear { right: var(--aura-touch-target); }
|
|
1995
2029
|
: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)); }
|
|
2030
|
+
: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
2031
|
:is(.aura-field, .aura-filterbar).is-touch .aura-combo.is-multi { padding-right: calc(var(--aura-space-1) + 2 * var(--aura-touch-target)); }
|
|
1997
2032
|
: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
2033
|
:is(.aura-field, .aura-filterbar).is-touch .aura-number__step { width: var(--aura-touch-target); }
|
|
@@ -2360,6 +2395,25 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
2360
2395
|
:root:has(.aura-actionbar--edge:not(.is-idle)) .aura-shell__content { padding-bottom: calc(var(--aura-space-6) + var(--aura-actionbar-space)); }
|
|
2361
2396
|
:root:has(.aura-actionbar--edge:not(.is-idle)):not(:has(.aura-shell__content)) body { padding-bottom: var(--aura-actionbar-space); }
|
|
2362
2397
|
}
|
|
2398
|
+
/* 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
|
|
2399
|
+
* at the top, the actions sharing the row under it (an IconButton keeps its square; labels too long to share take a row
|
|
2400
|
+
* each), 16px both sides as the page. edgeBelow="md" follows it up to 768px, as PageHeader's md strip. */
|
|
2401
|
+
@media (max-width: 639.98px) {
|
|
2402
|
+
@container aura-actionbar (max-width: 639.98px) {
|
|
2403
|
+
: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); }
|
|
2404
|
+
: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%; }
|
|
2405
|
+
: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; }
|
|
2406
|
+
: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 */
|
|
2407
|
+
: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%; }
|
|
2408
|
+
}
|
|
2409
|
+
}
|
|
2410
|
+
@media (min-width: 640px) and (max-width: 767.98px) {
|
|
2411
|
+
.aura-actionbar--edge-below-md:not(.is-idle) > .aura-actionbar__inner { padding-inline: var(--aura-space-4); }
|
|
2412
|
+
.aura-actionbar--edge-below-md:not(.is-idle) > .aura-actionbar__inner > .aura-actionbar__status:not(:empty) { flex-basis: 100%; }
|
|
2413
|
+
.aura-actionbar--edge-below-md:not(.is-idle) .aura-actionbar__actions { flex: 1 1 auto; min-width: 0; margin-inline-start: 0; }
|
|
2414
|
+
.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 */
|
|
2415
|
+
.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%; }
|
|
2416
|
+
}
|
|
2363
2417
|
@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
2418
|
@media (max-width: 639.98px) and (min-height: 30.00125rem) {
|
|
2365
2419
|
.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 +2637,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
2583
2637
|
.aura-table__head:not(.has-select-all) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
|
|
2584
2638
|
.aura-table__head > .aura-table__sel { position: static; width: auto; gap: var(--aura-space-3); padding: 0 var(--aura-space-4); }
|
|
2585
2639
|
.aura-table__sel-text { display: inline; color: var(--aura-fg-secondary); }
|
|
2586
|
-
.aura-table__gutter { display: none; }
|
|
2640
|
+
.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
2641
|
.aura-table__row, .aura-table__row:last-child {
|
|
2588
2642
|
height: auto; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--aura-space-1) var(--aura-space-4);
|
|
2589
2643
|
margin-bottom: var(--aura-space-2); padding: var(--aura-space-4);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jirawatpyk/aura-react",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.78.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",
|