@synopackageland/ui 0.13.0 → 0.13.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 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/AppTopNavItems.vue.d.ts

@@ -0,0 +1,12 @@
+import { AppSidebarItem } from './types';
+type __VLS_Props = {
+    items: AppSidebarItem[];
+    modelValue?: 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/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';