@jirawatpyk/aura-react 5.7.0 → 5.7.1

package/README.md

@@ -186,6 +186,10 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
 
+## 5.7.1 — SideNav labels wrap
+
+- **SideNav** (item 63): a long label wraps to a second line instead of ending in an ellipsis, so Thai and Swedish names read in full in the 240px nav and the phone drawer. One-line rows stay 36px (44px on touch); a two-line row grows to 44px with its icon centred. Past two lines the label clamps; the accessible name is always complete. The collapsed rail is unchanged.
+
 ## 5.7 — Chamber-OS addendum 5 (shell details)
 
 - **DropdownMenu `header`**: content above the items, e.g. name, email and role in an account menu. It sits outside `role="menu"` (arrow keys, Home/End skip it; clicking it keeps focus on the item) and is the menu's accessible description (`aria-describedby`). Screen readers differ in whether they speak a menu's description on open; keep the essentials (who is signed in) in the trigger's name too if they must be heard. With a header, the menu's `ref` and `.aura-menu` are the outer box and `role="menu"` is `.aura-menu__list` inside it.

package/dist/styles.css

@@ -641,7 +641,7 @@ a.aura-tab { text-decoration: none; }
 .aura-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
 .aura-nav__item {
   box-sizing: border-box; display: flex; align-items: center; gap: var(--aura-space-3); width: 100%;
-  height: 36px; padding: 0 var(--aura-space-3); border: 0; border-radius: var(--aura-radius-sm);
+  min-height: 36px; padding: var(--aura-space-1) var(--aura-space-3); border: 0; border-radius: var(--aura-radius-sm);
   background: transparent; color: var(--aura-fg-secondary); font: inherit; font-size: 13px; font-weight: 500;
   text-decoration: none; text-align: left; cursor: pointer;
   transition: background var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease);
@@ -651,8 +651,13 @@ a.aura-tab { text-decoration: none; }
 .aura-nav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
 .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
 /* Touch (5.7): rows are 44px on coarse pointers (AppShell's phone drawer); desktop keeps 36px. */
-@media (pointer: coarse) { .aura-nav__item { height: auto; min-height: var(--aura-touch-target); } }
-.aura-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (pointer: coarse) { .aura-nav__item { min-height: var(--aura-touch-target); } }
+/* 5.7.1: a long label wraps to a second line (the row grows; one-line rows stay 36px) instead of an ellipsis with no
+ * way to read the rest — Thai and Swedish names in a 240px nav or the phone drawer. Beyond two lines it clamps. */
+.aura-nav__label {
+  flex: 1; min-width: 0; line-height: 18px; overflow: hidden; overflow-wrap: anywhere;
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
+}
 .aura-nav__count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--aura-fg-secondary); }
 .aura-nav__badge { display: inline-flex; align-items: center; flex: none; }
 /* Groups: a disclosure button, its items indented one step per level. */

package/dist/styles.layer.css

@@ -643,7 +643,7 @@ a.aura-tab { text-decoration: none; }
 .aura-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
 .aura-nav__item {
   box-sizing: border-box; display: flex; align-items: center; gap: var(--aura-space-3); width: 100%;
-  height: 36px; padding: 0 var(--aura-space-3); border: 0; border-radius: var(--aura-radius-sm);
+  min-height: 36px; padding: var(--aura-space-1) var(--aura-space-3); border: 0; border-radius: var(--aura-radius-sm);
   background: transparent; color: var(--aura-fg-secondary); font: inherit; font-size: 13px; font-weight: 500;
   text-decoration: none; text-align: left; cursor: pointer;
   transition: background var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease);
@@ -653,8 +653,13 @@ a.aura-tab { text-decoration: none; }
 .aura-nav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
 .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
 /* Touch (5.7): rows are 44px on coarse pointers (AppShell's phone drawer); desktop keeps 36px. */
-@media (pointer: coarse) { .aura-nav__item { height: auto; min-height: var(--aura-touch-target); } }
-.aura-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (pointer: coarse) { .aura-nav__item { min-height: var(--aura-touch-target); } }
+/* 5.7.1: a long label wraps to a second line (the row grows; one-line rows stay 36px) instead of an ellipsis with no
+ * way to read the rest — Thai and Swedish names in a 240px nav or the phone drawer. Beyond two lines it clamps. */
+.aura-nav__label {
+  flex: 1; min-width: 0; line-height: 18px; overflow: hidden; overflow-wrap: anywhere;
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
+}
 .aura-nav__count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--aura-fg-secondary); }
 .aura-nav__badge { display: inline-flex; align-items: center; flex: none; }
 /* Groups: a disclosure button, its items indented one step per level. */

package/package.json

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