@jirawatpyk/aura-react 5.30.0 → 5.32.0

package/dist/styles.layer.css

@@ -358,6 +358,9 @@ a.aura-icon-btn { text-decoration: none; }
   background: var(--aura-bg-skeleton); animation: aura-pulse var(--aura-duration-pulse) var(--aura-ease) infinite;
 }
 .aura-skel--pill { width: 72px; height: 20px; }
+.aura-skel--badge { width: 56px; height: 20px; } /* 5.32: a Badge is 20px in every language */
+/* 5.32: they stand in for inline pills, so they sit in a line of text like them. */
+.aura-skel--pill, .aura-skel--badge { display: inline-block; vertical-align: middle; }
 .aura-skel--box { width: var(--aura-icon-sm); height: var(--aura-icon-sm); border-radius: var(--aura-radius-xs); }
 @media (prefers-reduced-motion: reduce) { .aura-skel { animation: none; } }
 /* 5.29 (Chamber-OS 134): a DataTable skeleton row stands in for the real one — text lines (skeletonLines) on the 20px
@@ -476,6 +479,8 @@ a.aura-icon-btn { text-decoration: none; }
 .aura-field__hint, .aura-field__error { display: flex; align-items: flex-start; gap: var(--aura-space-1); margin: 0; font-size: 12px; line-height: 1.5; color: var(--aura-fg-secondary); }
 .aura-field__error { color: var(--aura-fg-danger); }
 .aura-field__error .aura-icon { margin-top: 2px; }
+/* 5.31 (Chamber-OS addendum 41): TextField/Textarea `labelAddon`, between the label and the box, in the field's gap. */
+.aura-field__addon { min-width: 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-primary); }
 .aura-field.is-disabled .aura-field__label { color: var(--aura-fg-secondary); }
 
 .aura-input {
@@ -656,6 +661,8 @@ a.aura-icon-btn { text-decoration: none; }
 }
 /* The Tooltip component's own tips can be hovered (WCAG 1.4.13, 5.1.1); rail labels and cell tips stay click-through. */
 .aura-tooltip--hoverable { pointer-events: auto; }
+/* 5.32: the shared tip for icon buttons, Pagination arrows, icon-only segments and cut Tags (was a native title). */
+.aura-tooltip--auto:lang(th) { line-height: 1.6; }
 @keyframes aura-fade-in { from { opacity: 0; } }
 
 /* ---------- Dialog ---------- */
@@ -762,6 +769,10 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-nav__header { padding: var(--aura-space-5) var(--aura-space-4) var(--aura-space-4); padding-inline-end: var(--aura-space-2); } /* 5.16 (Chamber-OS 96): 8px at the end, so a brand, its dot and a badge share one row at 240px */
 .aura-nav__scroll { flex: 1; overflow-y: auto; padding: 0 var(--aura-space-3); }
+/* 5.32 (DxT Monitor request 1): headerDivider — the board's header: 72px, content 20px from the top and start, a
+ * full-width line at its foot, 16px before the first item. The collapsed rail keeps its own 8px sides (below). */
+.aura-nav--header-divider > .aura-nav__header { box-sizing: border-box; min-height: 72px; padding-top: var(--aura-space-5); padding-bottom: var(--aura-space-3); padding-inline-start: var(--aura-space-5); border-bottom: 1px solid var(--aura-border-default); }
+.aura-nav--header-divider > .aura-nav__header + .aura-nav__scroll { padding-top: var(--aura-space-4); }
 /* No header: keep the first item off the top edge (5.0.2). */
 .aura-nav > .aura-nav__scroll:first-child { padding-top: var(--aura-space-3); }
 .aura-nav--borderless { border-right: 0; }
@@ -987,7 +998,7 @@ a.aura-tab { text-decoration: none; }
 .aura-drawer--lg { max-width: var(--aura-drawer-lg); }
 .aura-drawer--nav { max-width: var(--aura-sidenav-width); }
 .aura-drawer__head { display: flex; align-items: center; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-4) var(--aura-space-2) var(--aura-space-6); }
-.aura-drawer--nav .aura-drawer__head { position: absolute; top: var(--aura-space-2); right: var(--aura-space-2); padding: 0; z-index: 1; }
+.aura-drawer--nav .aura-drawer__head { position: absolute; top: var(--aura-space-2); inset-inline-end: var(--aura-space-2); padding: 0; z-index: 1; } /* 5.32: inline-end, so RTL puts it on the left with the header's room */
 .aura-drawer__title { flex: 1; margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; }
 .aura-drawer__desc { margin: 0; padding: 0 var(--aura-space-6); font-size: 14px; line-height: 1.7; color: var(--aura-fg-secondary); }
 .aura-drawer__body {
@@ -997,6 +1008,8 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-drawer--nav .aura-drawer__body { padding: 0; }
 .aura-drawer--nav .aura-nav { width: 100%; border-right: 0; }
+/* 5.32: the phone drawer's close button (32px, 8px in) sits over the header's end: keep the brand clear of it. */
+.aura-drawer--nav .aura-nav__header { padding-inline-end: 48px; }
 .aura-drawer__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--aura-space-3); padding: var(--aura-space-4) var(--aura-space-6); border-top: 1px solid var(--aura-border-default); }
 @media (prefers-reduced-motion: reduce) { .aura-drawer { animation: none; } }
 
@@ -1074,6 +1087,21 @@ a.aura-tab { text-decoration: none; }
 /* The shell already pads its content: a Container directly inside only caps the width. */
 .aura-shell__content:not(.is-flush) > .aura-container { padding-left: 0; padding-right: 0; }
 
+/* ---------- PageHeader (5.32, DxT Monitor request 3) ----------
+ * No outer padding: AppShell's content padding is the page margin. Eyebrow mono 12/1.7, h1 display 36/1.15,
+ * meta 13/1.5, 4px between them; actions at the end, on the text's last line, 24px away; below 640px the title is
+ * 28px and the actions wrap under the text. */
+.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); }
+.aura-page-header__text { display: flex; flex-direction: column; gap: var(--aura-space-1); flex: 1 1 320px; min-width: 0; }
+.aura-page-header__eyebrow { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
+.aura-page-header__title { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: var(--aura-fg-primary); overflow-wrap: anywhere; }
+.aura-page-header__meta { min-width: 0; font-size: 13px; line-height: 1.5; color: var(--aura-fg-secondary); overflow-wrap: anywhere; }
+.aura-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--aura-space-2); }
+@media (min-width: 640px) { .aura-page-header__title { font-size: 36px; } }
+/* Thai marks need the room a 1.15 line takes away. */
+.aura-page-header__title:lang(th) { line-height: 1.4; letter-spacing: 0; }
+.aura-page-header__meta:lang(th) { line-height: 1.6; }
+
 /* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
 /* 5.30: a 2px hairline-colour rule over the totals (border-strong was a glaring white line in dark); a pinned totals row
  * casts a soft shadow over the rows scrolling under it. */
@@ -2079,7 +2107,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 /* 5.30 (audit D): field labels, hints and errors and choice descriptions get Thai line room; a stacked card's field
  * labels are 12px in the sans face (the mono face has no Thai), and a stacked DataTable card's values sit on a set
  * 1.6 line, so a loading card (its bars follow 1lh) is as tall as one with Thai text. */
-.aura-field__label:lang(th), .aura-field__hint:lang(th), .aura-field__error:lang(th) { line-height: 1.6; }
+.aura-field__label:lang(th), .aura-field__hint:lang(th), .aura-field__error:lang(th), .aura-field__addon:lang(th) { line-height: 1.6; }
 .aura-choice__desc:lang(th), .aura-check__desc:lang(th) { font-size: 13px; line-height: 1.6; }
 .aura-tbl__row > .aura-tbl__td[data-label]:lang(th)::before, .aura-table__td[data-label]:lang(th)::before { font-family: var(--font-sans); font-size: 12px; line-height: 18px; }
 .aura-table--stacked .aura-table__td[data-label]:lang(th) { line-height: 1.6; }

package/package.json

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