@jirawatpyk/aura-react 5.10.1 → 5.12.0

package/dist/styles.layer.css

@@ -132,7 +132,21 @@ a.aura-btn { text-decoration: none; }
   box-sizing: border-box; height: 100%; line-height: calc(var(--aura-table-row-height) - 1px);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: var(--aura-space-4);
 }
-.aura-table__td .aura-pill, .aura-table__td .aura-dropdown, .aura-table__td > .aura-icon-btn, .aura-table__td > .aura-btn { vertical-align: middle; }
+/* 5.11 rowHeight="auto" (never virtualized): a row grows to fit what wraps in it; each cell centres its content.
+ * The padding only shows once content is taller than the row: a small Button or IconButton (32px), a pill or one line
+ * still fits the density's row height (7.5px above and below at 48px, 3.5px compact). */
+.aura-table__row--auto { height: auto; min-height: var(--aura-table-row-height); }
+.aura-table__td--auto {
+  --aura-cell-pad-y: clamp(0px, calc((var(--aura-table-row-height) - 1px - var(--aura-button-height-sm)) / 2), var(--aura-space-2));
+  display: flex; align-items: center; height: auto; line-height: 20px; white-space: normal;
+  padding-top: var(--aura-cell-pad-y); padding-bottom: var(--aura-cell-pad-y);
+}
+.aura-table__cell { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
+/* Badges and pills side by side keep apart when they wrap onto a second line. */
+.aura-table__cell > .aura-badge, .aura-table__cell > .aura-pill { vertical-align: middle; margin-top: 2px; margin-bottom: 2px; }
+.aura-table__cell > .aura-badge:not(:last-child), .aura-table__cell > .aura-pill:not(:last-child) { margin-inline-end: var(--aura-space-1); }
+.aura-table__td .aura-pill, .aura-table__td .aura-dropdown, .aura-table__td > .aura-icon-btn, .aura-table__td > .aura-btn,
+.aura-table__cell > .aura-icon-btn, .aura-table__cell > .aura-btn { vertical-align: middle; }
 .aura-table__th { position: relative; box-sizing: border-box; display: flex; align-items: center; padding-right: var(--aura-space-2); }
 /* Column sizes come from custom properties set per cell (4.20), so the card layout can override them. */
 .aura-table__th, .aura-table__td { flex: var(--aura-cell-flex, none); width: var(--aura-cell-w, auto); min-width: var(--aura-cell-min, 0); }
@@ -155,6 +169,10 @@ a.aura-btn { text-decoration: none; }
 
 /* Selection column */
 .aura-table__sel { width: var(--aura-table-select-width); flex: none; display: flex; align-items: center; background: inherit; }
+/* 5.11: the selection box's invisible input reaches 24×24 (WCAG 2.5.8) around the 16px box it draws. Its left edge
+ * overlaps the sticky 24px gutter, so it sits one layer up — unless the column has scrolled under that gutter. */
+.aura-table__sel .aura-check__input { inset: calc((var(--aura-icon-sm) - 24px) / 2); z-index: 2; }
+.aura-table.is-scrolled-x .aura-table__sel:not(.is-pinned) .aura-check__input { z-index: auto; }
 .aura-table__sel.is-pinned { position: sticky; left: var(--aura-space-6); z-index: 2; }
 
 /* Pinned columns */
@@ -1347,6 +1365,37 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-filterbar__search { flex-basis: 100%; max-width: none; }
   .aura-filterbar__spacer { display: none; }
 }
+/* 5.12 searchGrow: the search fills what the controls leave. */
+.aura-filterbar--grow .aura-filterbar__search { max-width: none; }
+.aura-filterbar--grow .aura-filterbar__search ~ .aura-filterbar__spacer { display: none; }
+/* Compact filters sit closer together than full fields. */
+.aura-filterbar__controls:has(> .aura-filterselect) { gap: var(--aura-space-2); }
+
+/* 5.12 FilterSelect: a compact face — "Status All ▾" — as wide as its words, over Select's machinery and list. */
+.aura-filterselect { position: relative; display: inline-flex; width: fit-content; max-width: 100%; vertical-align: middle; font-family: var(--font-sans); }
+.aura-filterselect__face {
+  box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--aura-space-1); width: auto; max-width: 100%;
+  min-height: var(--aura-input-height); padding-block: 0; padding-inline: var(--aura-space-2) var(--aura-space-1);
+  background: var(--aura-bg-input); color: var(--aura-fg-primary);
+  border: 1px solid var(--aura-border-control); border-radius: var(--aura-radius-md);
+  font: inherit; font-size: 13px; line-height: 18px; text-align: start; cursor: pointer;
+  transition: border-color var(--aura-duration-fast) var(--aura-ease);
+}
+.aura-filterselect__face:hover { border-color: var(--aura-fg-secondary); }
+.aura-filterselect__name { flex: none; white-space: nowrap; color: var(--aura-fg-secondary); }
+.aura-filterselect__value { min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
+.aura-filterselect__chevron { flex: none; width: 14px; height: 14px; color: var(--aura-fg-secondary); }
+.aura-filterselect.is-open .aura-filterselect__chevron { transform: rotate(180deg); }
+.aura-filterselect__face:focus-visible, .aura-filterselect:has(.aura-filterselect__native:focus-visible) .aura-filterselect__face {
+  outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 1px; border-color: var(--aura-border-strong);
+}
+.aura-filterselect__face:focus { outline-style: none; }
+.aura-filterselect__face:focus-visible { outline-style: solid; }
+/* Before hydration: the real <select>, invisible, over the face (16px so iOS doesn't zoom when it opens). */
+.aura-filterselect__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; cursor: pointer; appearance: none; }
+.aura-filterselect.is-disabled .aura-filterselect__face { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); cursor: not-allowed; }
+.aura-filterselect.is-disabled .aura-filterselect__native { cursor: not-allowed; }
+@media (forced-colors: active) { .aura-filterselect__face { border-color: ButtonText; } }
 
 /* Command palette: a search field over a grouped list, above everything else (it can open from a Dialog) */
 .aura-dialog-layer.aura-command-layer { z-index: var(--aura-z-menu); align-items: flex-start; padding: 12vh var(--aura-space-4) var(--aura-space-4); }
@@ -1582,6 +1631,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     padding: 0; line-height: normal;
   }
   .aura-table__td[data-hide], .aura-table__head > .aura-table__th[data-hide] { display: block; }
+  /* 5.11: rowHeight="auto" leaves cards as they are. */
+  .aura-table__td--auto { display: block; white-space: nowrap; }
+  .aura-table__td--auto .aura-table__cell > .aura-badge, .aura-table__td--auto .aura-table__cell > .aura-pill { margin: 0; }
   .aura-table__spacer { display: none; }
   .aura-table__td[data-label]::before {
     content: attr(data-label); content: attr(data-label) / '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.10.1",
+  "version": "5.12.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",