@synopackageland/ui 0.13.0 → 0.13.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.13.2 (2026-10-21)
+
+- Fix inherited `--ui-nav-row-height` overrides: web and mobile layout modes now supply only an internal fallback. A theme can set the public token on any ancestor, including outside `AppLayout`; unset, window/web/mobile rows remain 42/40/46px. Sidebar, top-navigation and tree rows use the same fallback, and explicit density values remain supported.
+- `AppLayout navigation="top"` with `AppSidebar` measures the available width and moves trailing items into a localized More dropdown instead of requiring horizontal scrolling. It preserves order, nested/selectable parents and disabled states; More shows the selected state when its subtree contains the current page. Hidden bar rows are inert and aria-hidden; keyboard navigation, Escape focus return and focus recovery on resize are supported. The default sidebar and phone drawer keep their existing navigation behavior.
+- Document the row-height override and public overflow hooks in `docs/theme-hooks.md`; add overflow/resize regression tests and Histoire examples at 1365/1024/390px.
+
+## 0.13.1 (2026-10-21)
+
+Additive only: existing props, default appearance and DOM structure are unchanged (new attributes only), so this is a patch release within the 0.13 line.
+
+- Add `AppLayout navigation="top"` (also JSON `AppShell`): the `sidebar` slot becomes one bar above the page in the DSM-window and web presentations, with the brand, the `AppSidebar` items in a row (a row with children opens them in a menu; the bar scrolls sideways when the items run out of room) and `sidebar-footer`. There is no collapse or resize in this mode. A phone keeps the drawer. The default `"sidebar"` is unchanged. The SDK's `AppShell` has to forward the prop before an app can choose it through that shell (#19).
+- Add theme tokens `--ui-icon-size` (navigation icons), `--ui-heading-weight` (`PageHeader`, `Card`, `TypoHeader` and web toolbar titles) and `--ui-card-padding` (a regular `Card`'s inset), plus `--ui-top-nav-height/-bg/-border` for the top bar and `--ui-mobile-bar-bg/-fg/-border` for the phone bar. Each is read with a fallback equal to the previous value: unset, nothing changes (#19).
+- `Button`, `IconButton` and `SplitButton`'s group expose their variant as `data-variant`; the phone bar's menu button has `data-ui-mobile-menu` (#19).
+- `docs/theme-hooks.md` (shipped in the package) makes the listed `data-ui-*`/`data-*` attributes and layout tokens public API, with stability rules: names, elements and listed values hold until a release marked breaking; values may be added in a patch; classes and nesting are not API (#19).
+
 ## 0.13.0 (2026-10-20)
 
 - Fix `SegmentControl variant="sheet"`: the selected tab keeps the content surface and accent text. Unselected background and text classes now apply only to unselected tabs, so stylesheet order cannot make the selected tab grey again (#16).

package/README.md

@@ -350,6 +350,22 @@ import { AppLayout, Button, PageHeader } from '@synopackageland/ui'
 
 `AppLayout` also accepts `sidebar`, `toolbar`, and `footer` slots.
 
+`navigation="top"` (0.13.1+) lays the `sidebar` slot out as one bar above the
+page instead of a left column: the brand, then the `AppSidebar` items in a row
+(a row with children opens them in a menu; the bar scrolls sideways when the
+items run out of room), then `sidebar-footer`. It applies in the DSM-window
+and web presentations; a phone keeps the drawer. The default `"sidebar"` is
+unchanged. The JSON `AppShell` accepts the same prop; the SDK's `AppShell` must
+forward it before an app can choose it through that shell.
+
+```vue
+<AppLayout navigation="top" wide-layout="web">
+  <template #sidebar><AppSidebar v-model="page" :groups="groups" /></template>
+  <template #sidebar-footer><AppSidebarUser name="Ada Lin" /></template>
+  <PageContent>…</PageContent>
+</AppLayout>
+```
+
 For standalone content that owns its layout, use `<PageContent surface="none" height="fill">`.
 It removes the page's horizontal gutters and adds no surface in web, DSM-window
 or phone layouts. The default `surface="auto"` remains unchanged; `flat` keeps
@@ -431,6 +447,15 @@ Status tones come in pairs, a soft fill and the text that reads on it:
 `StatusDot`, `StepList` and `ConnectionTopology` use only these and the base
 tones (`--ui-success`, …).
 
+**Theme hooks.** The `data-ui-*` and `data-*` attributes and the layout tokens
+listed in [docs/theme-hooks.md](docs/theme-hooks.md) are public API with
+stability rules (0.13.1+): `--ui-icon-size`, `--ui-heading-weight`,
+`--ui-card-padding`, the top bar's `--ui-top-nav-*` and the phone bar's
+`--ui-mobile-bar-*`, `Button`'s `data-variant`, the layout regions
+(`data-ui-layout-sidebar`, `data-ui-layout-main`, `data-ui-mobile-navigation`,
+…). Each token is unset by default and the component then looks as before.
+Everything else (classes, nesting) is an implementation detail.
+
 Density can be switched per application subtree:
 
 ```html

package/dist/components/app/app-layout/AppLayout.vue.d.ts

@@ -1,4 +1,4 @@
-import { WideLayout } from '../../../lib/adaptiveLayout';
+import { AppNavigation, WideLayout } from '../../../lib/adaptiveLayout';
 type __VLS_Props = {
     sidebarWidth?: string;
     minHeight?: string;
@@ -18,6 +18,12 @@ type __VLS_Props = {
      * page can keep its header and pager in view.
      */
     height?: 'auto' | 'fill';
+    /**
+     * `'top'` lays the `sidebar` slot out as a bar across the top: brand,
+     * then the navigation in one row, then `sidebar-footer`. A phone keeps the
+     * drawer. Defaults to the left sidebar.
+     */
+    navigation?: AppNavigation;
 };
 type __VLS_Slots = {
     sidebar?: () => unknown;
@@ -36,6 +42,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     sidebarStorageKey: string;
     brandName: string;
     brandIcon: string;
+    navigation: AppNavigation;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/app/app-sidebar/AppTopNav.vue.d.ts

@@ -0,0 +1,13 @@
+import { AppSidebarGroup, AppSidebarItem } from './types';
+type __VLS_Props = {
+    groups: AppSidebarGroup[];
+    modelValue?: string;
+    label: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (item: AppSidebarItem) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: AppSidebarItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/app/app-sidebar/AppTopNavItems.vue.d.ts

@@ -0,0 +1,13 @@
+import { AppSidebarItem } from './types';
+type __VLS_Props = {
+    items: AppSidebarItem[];
+    modelValue?: string;
+    overflow?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (item: AppSidebarItem) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: AppSidebarItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/index.d.ts

@@ -183,7 +183,7 @@ export type { AccentScale } from './lib/accent';
 export { default as AppLayout } from './components/app/app-layout/AppLayout.vue';
 export { default as ResponsiveView } from './components/app/responsive-view/ResponsiveView.vue';
 export { appPresentationForWidth, MOBILE_LAYOUT_MAX, WEB_LAYOUT_MIN } from './lib/adaptiveLayout';
-export type { AppPresentation, WideLayout } from './lib/adaptiveLayout';
+export type { AppNavigation, AppPresentation, WideLayout } from './lib/adaptiveLayout';
 export { ensureDeviceViewport } from './lib/deviceViewport';
 export { default as AppSidebar } from './components/app/app-sidebar/AppSidebar.vue';
 export { default as AppSidebarUser } from './components/app/app-sidebar/AppSidebarUser.vue';