@jirawatpyk/aura-react 5.7.0 → 5.7.2

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 (4) hide show
  1. package/README.md +8 -0
  2. package/dist/styles.css +11 -3
  3. package/dist/styles.layer.css +11 -3
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -186,6 +186,14 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
186
186
  - **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`.
187
187
  - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
188
188
 
189
+ ## 5.7.2 — SideNav labels hyphenate
190
+
191
+ - **SideNav** (item 64): a long compound word hyphenates at a syllable (`hyphens: auto`) instead of breaking wherever the line runs out — "Marknadsförings-" / "målgrupp" rather than "Marknadsföringsmålgrup" / "p". The browser's dictionary for the page's `lang` decides — Safari and Firefox ship them; Chrome downloads them on demand, so they can be missing (headless and managed machines especially). Breaking anywhere stays the last resort. Only words of 12+ letters hyphenate, with at least 5 on each side (`hyphenate-limit-chars`, Chrome 109+ and Firefox 137+), so ordinary English labels still wrap between words; a long English word in a two-line label can now hyphenate too. Where no dictionary is available, put a soft hyphen in the label — `'Marknadsförings\u00ADmålgrupp'` — which breaks there everywhere, shows a hyphen only when it breaks, and adds no hyphen to the accessible name (it is an invisible format character screen readers skip). Set `<html lang>` per locale.
192
+
193
+ ## 5.7.1 — SideNav labels wrap
194
+
195
+ - **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.
196
+
189
197
  ## 5.7 — Chamber-OS addendum 5 (shell details)
190
198
 
191
199
  - **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 CHANGED
@@ -641,7 +641,7 @@ a.aura-tab { text-decoration: none; }
641
641
  .aura-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
642
642
  .aura-nav__item {
643
643
  box-sizing: border-box; display: flex; align-items: center; gap: var(--aura-space-3); width: 100%;
644
- height: 36px; padding: 0 var(--aura-space-3); border: 0; border-radius: var(--aura-radius-sm);
644
+ min-height: 36px; padding: var(--aura-space-1) var(--aura-space-3); border: 0; border-radius: var(--aura-radius-sm);
645
645
  background: transparent; color: var(--aura-fg-secondary); font: inherit; font-size: 13px; font-weight: 500;
646
646
  text-decoration: none; text-align: left; cursor: pointer;
647
647
  transition: background var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease);
@@ -651,8 +651,16 @@ a.aura-tab { text-decoration: none; }
651
651
  .aura-nav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
652
652
  .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
653
653
  /* Touch (5.7): rows are 44px on coarse pointers (AppShell's phone drawer); desktop keeps 36px. */
654
- @media (pointer: coarse) { .aura-nav__item { height: auto; min-height: var(--aura-touch-target); } }
655
- .aura-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
654
+ @media (pointer: coarse) { .aura-nav__item { min-height: var(--aura-touch-target); } }
655
+ /* 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
656
+ * way to read the rest — Thai and Swedish names in a 240px nav or the phone drawer. Beyond two lines it clamps.
657
+ * 5.7.2: a long compound word hyphenates at a syllable where the browser has a dictionary for the page's `lang`
658
+ * ("Marknadsförings-" / "målgrupp"); breaking anywhere is only the last resort. Only words of 12+ letters hyphenate,
659
+ * with 5+ on each side, so ordinary English labels keep wrapping between words. */
660
+ .aura-nav__label {
661
+ flex: 1; min-width: 0; line-height: 18px; overflow: hidden; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5;
662
+ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
663
+ }
656
664
  .aura-nav__count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--aura-fg-secondary); }
657
665
  .aura-nav__badge { display: inline-flex; align-items: center; flex: none; }
658
666
  /* Groups: a disclosure button, its items indented one step per level. */
package/dist/styles.layer.css CHANGED
@@ -643,7 +643,7 @@ a.aura-tab { text-decoration: none; }
643
643
  .aura-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
644
644
  .aura-nav__item {
645
645
  box-sizing: border-box; display: flex; align-items: center; gap: var(--aura-space-3); width: 100%;
646
- height: 36px; padding: 0 var(--aura-space-3); border: 0; border-radius: var(--aura-radius-sm);
646
+ min-height: 36px; padding: var(--aura-space-1) var(--aura-space-3); border: 0; border-radius: var(--aura-radius-sm);
647
647
  background: transparent; color: var(--aura-fg-secondary); font: inherit; font-size: 13px; font-weight: 500;
648
648
  text-decoration: none; text-align: left; cursor: pointer;
649
649
  transition: background var(--aura-duration-fast) var(--aura-ease), color var(--aura-duration-fast) var(--aura-ease);
@@ -653,8 +653,16 @@ a.aura-tab { text-decoration: none; }
653
653
  .aura-nav__item.is-active .aura-icon { color: var(--aura-fg-accent); }
654
654
  .aura-nav__item:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: -2px; }
655
655
  /* Touch (5.7): rows are 44px on coarse pointers (AppShell's phone drawer); desktop keeps 36px. */
656
- @media (pointer: coarse) { .aura-nav__item { height: auto; min-height: var(--aura-touch-target); } }
657
- .aura-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
656
+ @media (pointer: coarse) { .aura-nav__item { min-height: var(--aura-touch-target); } }
657
+ /* 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
658
+ * way to read the rest — Thai and Swedish names in a 240px nav or the phone drawer. Beyond two lines it clamps.
659
+ * 5.7.2: a long compound word hyphenates at a syllable where the browser has a dictionary for the page's `lang`
660
+ * ("Marknadsförings-" / "målgrupp"); breaking anywhere is only the last resort. Only words of 12+ letters hyphenate,
661
+ * with 5+ on each side, so ordinary English labels keep wrapping between words. */
662
+ .aura-nav__label {
663
+ flex: 1; min-width: 0; line-height: 18px; overflow: hidden; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5;
664
+ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
665
+ }
658
666
  .aura-nav__count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--aura-fg-secondary); }
659
667
  .aura-nav__badge { display: inline-flex; align-items: center; flex: none; }
660
668
  /* Groups: a disclosure button, its items indented one step per level. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jirawatpyk/aura-react",
3
- "version": "5.7.0",
3
+ "version": "5.7.2",
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",