@jirawatpyk/aura-react 5.26.0 → 5.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +13 -2
  2. package/dist/aura.bundle.js +238 -185
  3. package/dist/cjs/index.cjs +238 -185
  4. package/dist/esm/Container.js +1 -1
  5. package/dist/esm/DataTable.js +14 -1
  6. package/dist/esm/Table.js +13 -1
  7. package/dist/esm/Tag.js +42 -15
  8. package/dist/index.d.cts +21 -10
  9. package/dist/index.d.ts +21 -10
  10. package/dist/server/index.cjs +31 -5
  11. package/dist/server/index.d.cts +18 -0
  12. package/dist/server/index.d.ts +18 -0
  13. package/dist/server/index.js +31 -5
  14. package/dist/styles.css +25 -17
  15. package/dist/styles.layer.css +25 -17
  16. package/package.json +1 -1
package/dist/styles.layer.css CHANGED
@@ -323,6 +323,7 @@ a.aura-icon-btn { text-decoration: none; }
323
323
  .aura-btn.aura-btn--touch.aura-btn--full { height: auto; min-height: var(--aura-touch-target); }
324
324
  .aura-icon-btn.aura-icon-btn--touch { width: var(--aura-touch-target); height: var(--aura-touch-target); }
325
325
  .aura-tag.aura-tag--touch { min-height: var(--aura-touch-target); }
326
+ .aura-filterbar__clear { min-height: var(--aura-touch-target); } /* 5.28 (Chamber-OS 133) */
326
327
  }
327
328
  /* Touch: same 32px look, a 44px hit area around it (WCAG 2.5.5). */
328
329
  @media (pointer: coarse) {
@@ -664,21 +665,22 @@ a.aura-icon-btn { text-decoration: none; }
664
665
  @media (max-width: 639.98px) { .aura-card.aura-card--flush-below-sm, .aura-card.aura-card--flush-below-sm:hover { border-color: transparent; background: transparent; box-shadow: none; --aura-card-bleed: 0px; } }
665
666
  @media (max-width: 767.98px) { .aura-card.aura-card--flush-below-md, .aura-card.aura-card--flush-below-md:hover { border-color: transparent; background: transparent; box-shadow: none; --aura-card-bleed: 0px; } }
666
667
  @media (max-width: 1023.98px) { .aura-card.aura-card--flush-below-lg, .aura-card.aura-card--flush-below-lg:hover { border-color: transparent; background: transparent; box-shadow: none; --aura-card-bleed: 0px; } }
667
- /* 5.26 (Chamber-OS 127): bleed — a table that is a direct child of a Card's content spans its inner width; the side
668
+ /* 5.26 (Chamber-OS 127): bleed — a table anywhere in a Card's content (5.27, 130: through the app's own unpadded
669
+ * wrappers; a nested Card resets the reach) spans its inner width; the side
668
670
  * borders and radius go (a 0px bleed — a flush card — keeps them: 1px - min(1px, 0) = 1px). As the card's last content
669
671
  * it also drops its bottom rule and the card's radius closes it. */
670
672
  /* Two classes deep so it beats a stackable Table's width: 100%. `* 1000` turns any bleed into a 0 radius; 0 keeps it. */
671
- .aura-card .aura-card__body > .aura-bleed { margin-inline: calc(-1 * var(--aura-card-bleed)); width: auto; }
673
+ .aura-card .aura-card__body .aura-bleed { margin-inline: calc(-1 * var(--aura-card-bleed)); width: auto; }
672
674
  /* A Table with bordered={false} too: its outer cells take the bleed (0 where the card is flush, as before). */
673
- .aura-card__body > .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child,
674
- .aura-card__body > .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: var(--aura-card-bleed); }
675
- .aura-card__body > .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child,
676
- .aura-card__body > .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: var(--aura-card-bleed); }
677
- .aura-card__body > .aura-bleed.aura-bleed-frame, .aura-card__body > .aura-bleed .aura-bleed-frame {
675
+ .aura-card__body .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child,
676
+ .aura-card__body .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: var(--aura-card-bleed); }
677
+ .aura-card__body .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child,
678
+ .aura-card__body .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: var(--aura-card-bleed); }
679
+ .aura-card__body .aura-bleed.aura-bleed-frame, .aura-card__body .aura-bleed .aura-bleed-frame {
678
680
  border-inline-width: calc(1px - min(1px, var(--aura-card-bleed))); border-radius: max(0px, var(--aura-card-radius) - var(--aura-card-bleed) * 1000);
679
681
  }
680
- .aura-card__body:last-child > .aura-bleed:last-child { margin-bottom: calc(-1 * var(--aura-card-bleed)); }
681
- .aura-card__body:last-child > .aura-bleed:last-child.aura-bleed-frame, .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame {
682
+ :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) { margin-bottom: calc(-1 * var(--aura-card-bleed)); }
683
+ :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end).aura-bleed-frame, :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) .aura-bleed-frame {
682
684
  border-bottom-width: calc(1px - min(1px, var(--aura-card-bleed)));
683
685
  border-bottom-left-radius: calc(var(--aura-card-radius) - min(1px, var(--aura-card-bleed)));
684
686
  border-bottom-right-radius: calc(var(--aura-card-radius) - min(1px, var(--aura-card-bleed)));
@@ -1504,6 +1506,12 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1504
1506
  .aura-filterbar__count { font-size: 13px; color: var(--aura-fg-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
1505
1507
  .aura-filterbar__actions { display: flex; align-items: center; gap: var(--aura-space-2); }
1506
1508
  .aura-filterbar__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
1509
+ /* 5.28 (Chamber-OS 132): an applied-filter chip takes its text's width, cut only when it is wider than the row. */
1510
+ .aura-filterbar__chips > .aura-tag { max-width: 100%; min-width: 0; }
1511
+ /* A long chip mustn't widen the bar or anything around it: the row's width comes from the bar, never from its chips.
1512
+ * (So a FilterBar with only chips needs a width from its parent — it is full width in a block.) */
1513
+ .aura-filterbar__chips { contain: inline-size; }
1514
+ .aura-filterbar__chips > .aura-tag .aura-tag__text { max-width: none; min-width: 0; }
1507
1515
  .aura-filterbar__clear {
1508
1516
  border: 0; background: transparent; padding: 4px var(--aura-space-2); border-radius: var(--aura-radius-sm);
1509
1517
  font: inherit; font-size: 13px; font-weight: 500; color: var(--aura-fg-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
@@ -1790,7 +1798,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1790
1798
  display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
1791
1799
  }
1792
1800
  /* 5.26: a bleeding list keeps its rows' text level with the Card's content (16px where it doesn't bleed). */
1793
- .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
1801
+ .aura-card__body .aura-bleed.aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
1794
1802
  }
1795
1803
  @container aura-tbl (width < 640px) {
1796
1804
  .aura-tbl--stack-sm, .aura-tbl--stack-sm > .aura-tbl__body, .aura-tbl--stack-sm > .aura-tbl__foot, .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { display: block; }
@@ -1814,7 +1822,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1814
1822
  display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
1815
1823
  }
1816
1824
  /* 5.26: a bleeding list keeps its rows' text level with the Card's content (16px where it doesn't bleed). */
1817
- .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
1825
+ .aura-card__body .aura-bleed.aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
1818
1826
  }
1819
1827
 
1820
1828
  /* 5.15 (Chamber-OS 85): stackStyle="cards" — each stacked row its own card (DataTable's card spacing), no outer frame.
@@ -1822,8 +1830,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1822
1830
  .aura-tbl-cards { container: aura-tbl / inline-size; width: 100%; }
1823
1831
  @container aura-tbl (width < 768px) {
1824
1832
  .aura-tbl-cards--md > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
1825
- .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-inline: var(--aura-card-bleed); }
1826
- .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-bottom: var(--aura-card-bleed); }
1833
+ .aura-card__body .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md, .aura-card__body .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-inline: var(--aura-card-bleed); }
1834
+ :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-bottom: var(--aura-card-bleed); }
1827
1835
  .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
1828
1836
  .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row {
1829
1837
  margin-bottom: var(--aura-space-2); padding: var(--aura-tbl-card-py, var(--aura-space-4)) var(--aura-space-4);
@@ -1835,8 +1843,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1835
1843
  }
1836
1844
  @container aura-tbl (width < 640px) {
1837
1845
  .aura-tbl-cards--sm > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
1838
- .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-inline: var(--aura-card-bleed); }
1839
- .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-bottom: var(--aura-card-bleed); }
1846
+ .aura-card__body .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm, .aura-card__body .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-inline: var(--aura-card-bleed); }
1847
+ :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-bottom: var(--aura-card-bleed); }
1840
1848
  .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
1841
1849
  .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row {
1842
1850
  margin-bottom: var(--aura-space-2); padding: var(--aura-tbl-card-py, var(--aura-space-4)) var(--aura-space-4);
@@ -1867,8 +1875,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
1867
1875
  @container aura-stack (width < 9999.5px) {
1868
1876
  .aura-table { background: transparent; border: 0; border-radius: 0; overflow: visible; }
1869
1877
  /* 5.26: stacked cards inside a framed Card keep its padding (0 where the Card is flush). */
1870
- .aura-card__body > .aura-bleed .aura-bleed-frame { padding-inline: var(--aura-card-bleed); }
1871
- .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame { padding-bottom: var(--aura-card-bleed); }
1878
+ .aura-card__body .aura-bleed .aura-bleed-frame { padding-inline: var(--aura-card-bleed); }
1879
+ :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) .aura-bleed-frame { padding-bottom: var(--aura-card-bleed); }
1872
1880
  .aura-table__scroll { overflow: visible; height: auto; }
1873
1881
  .aura-table__busy-bar { top: 0; }
1874
1882
  .aura-table__picker { display: none; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jirawatpyk/aura-react",
3
- "version": "5.26.0",
3
+ "version": "5.28.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",