@synopackageland/ui 0.13.1 → 0.13.2

package/docs/theme-hooks.md

@@ -65,6 +65,11 @@ here stay implementation details and can change in any release.
 | `data-nav-label`, `data-nav-badge` | a row's label and badge | present |
 | `data-nav-contains-current` | a top-bar branch whose child is the current page | present |
 | `aria-current` | the current page's row | `page` |
+| `data-ui-top-nav-item` | measurable top-level row wrapper | present |
+| `data-ui-overflowed` | row moved into More (hidden and inert in the bar) | `true` |
+| `data-ui-top-nav-more` | More menu trigger | present |
+| `data-ui-selected` | More trigger when its subtree contains the current page | `true` |
+| `data-ui-top-nav-overflow-menu` | portalled More dropdown panel | present |
 | `data-ui-sidebar-user` | `AppSidebarUser` | present |
 | `data-ui-user-avatar`, `data-ui-user-name`, `data-ui-user-detail` | its parts | present |
 
@@ -94,6 +99,7 @@ before the token existed. Set them on the app root or any ancestor.
 
 | Token | Affects | Unset |
 | --- | --- | --- |
+| `--ui-nav-row-height` | navigation row height/minimum height; inherited from any ancestor, including outside `AppLayout` | window 42px, web 40px, phone 46px |
 | `--ui-icon-size` | icons in navigation rows (`AppSidebar`, side and top) | 22px in the sidebar, 18px in the top bar |
 | `--ui-heading-weight` | `PageHeader` title, `Card` title, `TypoHeader`, web toolbar titles | 600 (`PageHeader`, `TypoHeader`, toolbar), 700 (`Card`, web `PageHeader`) |
 | `--ui-card-padding` | a regular `Card`'s header, body and footer inset; the body's block padding is 0.8× | 20px (body 16px × 20px). Compact cards are unchanged |
@@ -140,3 +146,23 @@ The colour, radius, spacing and web tokens are listed in the
 ```
 
 The Histoire story *DSM 7 / Top navigation and theme hooks* shows both.
+
+## Navigation sizing and overflow
+
+Set `--ui-nav-row-height: 30px` on the app's theme ancestor to override all
+presentations. Layout modes set only the internal `--ui-nav-row-height-default`
+fallback; they never redefine the public token. Existing density presets and
+explicit values on a row or layout still take precedence through normal CSS
+inheritance. Sidebar rows can grow to fit wrapped labels.
+
+With `navigation="top"`, `AppSidebar` measures the available navigation width,
+row widths (including icons and badges), group spacing and More trigger. The
+trailing items move into More in their original order; nested items and disabled
+states are preserved. More is selected when the current page is anywhere in
+its subtree. Tab reaches the trigger, Enter/Space or ArrowDown opens it,
+arrows navigate, and Escape closes it and returns focus. Resizing or changing
+labels/badges remeasures the row. Hidden bar rows are inert and aria-hidden.
+The phone drawer and default sidebar keep their existing behavior.
+
+The portalled panel has `data-ui-top-nav-overflow-menu`; scope panel styles by
+that attribute rather than relying on it being a descendant of the bar.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synopackageland/ui",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "description": "Shared Vue 3 UI component library with a DSM 7 inspired application theme",
   "license": "MIT",
   "type": "module",