@ziyarago/ui 0.18.0 → 0.19.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [0.19.1](https://github.com/ziyarago/ui/compare/v0.19.0...v0.19.1) (2026-10-21)
+
+### Bug Fixes
+
+* UserCell avatar letters no longer stick to the top ([533087d](https://github.com/ziyarago/ui/commit/533087d4b490375a1f3642db7a4b5be16cf4dae4))
+
+## [0.19.0](https://github.com/ziyarago/ui/compare/v0.18.0...v0.19.0) (2026-10-21)
+
+### Features
+
+* SideNav expandable groups with children ([9572ae4](https://github.com/ziyarago/ui/commit/9572ae48a261a8fa3ec3e5d023858d91c2f4cd9b))
+
 ## [0.18.0](https://github.com/ziyarago/ui/compare/v0.17.0...v0.18.0) (2026-10-21)
 
 ### Features

package/dist/llms-full.txt

@@ -2,7 +2,7 @@
 
 > ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 102 free components and 6 page templates (more in @ziyarago/ui-pro).
 
-Version 0.18.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.19.1. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -1846,7 +1846,7 @@ Notes:
 Vertical sidebar with a brand, grouped navigation items, a footer and an optional collapse toggle.
 Props:
 - `brand`: string | VNode. Logo or product name at the top.
-- `items`: ({ value: string; label: string; icon?: string; count?: string | number } | { group: string })[] = "[]". Entries. An object with group renders a section heading (hidden when collapsed); others are links with an optional icon and count.
+- `items`: ({ value: string; label: string; icon?: string; count?: string | number; children?: ({ value: string; label: string; icon?: string; count?: string | number } | { separator: true })[] } | { group: string })[] = "[]". Entries. An object with group renders a section heading (hidden when collapsed); others are links with an optional icon and count. An entry with children is an expandable group: its button toggles the list of children (open by default while one of them is current); selecting a child calls change with the child value.
 - `value`: string. Value of the active item (aria-current="page").
 - `collapsed`: boolean = false. Icon-only mode; labels move to the title tooltip.
 - `collapsible`: boolean = false. Always draw the collapse button, even without a toggle handler (the button is also drawn when a toggle handler is set).
@@ -1860,6 +1860,7 @@ Events:
 Notes:
 - Collapsing is controlled: flip collapsed in the toggle handler.
 - Group entries are keyed by their title, so keep group names unique.
+- In the collapsed rail the children of an open group show as icons (children without an icon get a dot).
 
 ## UiSubNav  (navigation)
 Compact vertical list of sections with an optional title; use for settings and secondary page navigation.

package/dist/llms.txt

@@ -2,7 +2,7 @@
 
 > ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 102 free components and 6 page templates (more in @ziyarago/ui-pro).
 
-Version 0.18.0. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.19.1. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'

package/dist/manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "@ziyarago/ui",
- "version": "0.18.0",
+ "version": "0.19.1",
  "homepage": "https://ziyara.vip",
  "imports": {
   "vue": "import { UiButton } from '@ziyarago/ui/vue'",
@@ -12233,9 +12233,9 @@
      "description": "Logo or product name at the top."
     },
     "items": {
-     "type": "({ value: string; label: string; icon?: string; count?: string | number } | { group: string })[]",
+     "type": "({ value: string; label: string; icon?: string; count?: string | number; children?: ({ value: string; label: string; icon?: string; count?: string | number } | { separator: true })[] } | { group: string })[]",
      "default": "[]",
-     "description": "Entries. An object with group renders a section heading (hidden when collapsed); others are links with an optional icon and count."
+     "description": "Entries. An object with group renders a section heading (hidden when collapsed); others are links with an optional icon and count. An entry with children is an expandable group: its button toggles the list of children (open by default while one of them is current); selecting a child calls change with the child value."
     },
     "value": {
      "type": "string",
@@ -12278,7 +12278,8 @@
    },
    "notes": [
     "Collapsing is controlled: flip collapsed in the toggle handler.",
-    "Group entries are keyed by their title, so keep group names unique."
+    "Group entries are keyed by their title, so keep group names unique.",
+    "In the collapsed rail the children of an open group show as icons (children without an icon get a dot)."
    ]
   },
   {

package/dist/style.css

@@ -333,7 +333,7 @@
 .zg-chip2--tonal{background:color-mix(in oklch,var(--c) 16%,transparent);color:var(--ct)}.zg-chip2--outlined{box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--c) 55%,transparent);color:var(--ct)}.zg-chip2--solid{background:var(--c);color:var(--zg-on-brand)}
 .zg-chip2 button{all:unset;cursor:pointer;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklch,currentColor 18%,transparent)}
 .zg-tile{width:var(--s);height:var(--s);flex:none;border-radius:8px;display:grid;place-items:center;background:color-mix(in oklch,var(--c) 16%,transparent);color:var(--ct)}.zg-tile--circle{border-radius:50%}
-.zg-usercell{display:inline-flex;align-items:center;gap:10px}.zg-usercell>span{display:flex;flex-direction:column;line-height:1.3}.zg-usercell b{font-size:14px}
+.zg-usercell{display:inline-flex;align-items:center;gap:10px}.zg-usercell>span:not(.zg-avatar){display:flex;flex-direction:column;line-height:1.3}.zg-usercell b{font-size:14px}
 .zg-srow{display:flex;align-items:center;gap:12px;min-height:56px}
 .zg-statline{position:relative;overflow:hidden;gap:6px}.zg-statline__bar{position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--c);opacity:.9}
 .zg-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));padding:8px}.zg-strip__i{display:flex;align-items:center;gap:14px;padding:14px 20px}.zg-strip__i+.zg-strip__i{box-shadow:inset 1px 0 0 var(--zg-stroke)}
@@ -583,6 +583,11 @@
 .zg-topnav__dd>.zg-navitem[aria-expanded="true"] .zg-icon:last-child:not(:first-child){transform:rotate(180deg)}
 .zg-menu__i[aria-current="page"]{background:var(--zg-s2);font-weight:700}.zg-menu__i .zg-navitem__count{margin-inline-start:auto}
 .zg-menu__h{padding:8px 12px 4px;font:600 12px var(--zg-font);letter-spacing:.06em;text-transform:uppercase;color:var(--zg-text-3)}
+/* SideNav: expandable groups */
+.zg-sidenav__sub{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
+.zg-sidenav__sub>.zg-navitem{position:relative}.zg-sidenav__chev{margin-inline-start:auto;display:inline-flex;transition:transform .2s var(--zg-ease)}.zg-sidenav__sub>.zg-navitem[aria-expanded="true"] .zg-sidenav__chev{transform:rotate(180deg)}
+.zg-sidenav__kids{display:flex;flex-direction:column;gap:2px;padding-inline-start:16px}.zg-sidenav__kids .zg-navitem{height:40px}
+.zg-sidenav--collapsed .zg-sidenav__kids{padding-inline-start:0}.zg-sidenav--collapsed .zg-sidenav__chev{display:none}
 
 
 /* ./charts.css */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ziyarago/ui",
-  "version": "0.18.0",
+  "version": "0.19.1",
   "description": "ZiyaraGo UI — glass design system for Umrah and Hajj products. OKLCH tokens, two palettes, dark and light, RTL, Thmanyah. One framework-neutral core with Vue 3, Nuxt and React adapters, 102 free components and 6 page templates (more in @ziyarago/ui-pro).",
   "keywords": [
     "ui",

package/src/core/components.js

@@ -166,8 +166,19 @@ export const components = {
     return h('header', { class: 'zg-topnav' }, h('div', { class: 'zg-topnav__brand' }, p.brand),
       h('nav', { class: 'zg-topnav__items', 'data-overflow': collapse ? 'menu' : 'none', 'aria-label': t('TopNav', 'label'), ref: measure }, ...shown.map(entry), more ? entry(more) : null),
       h('div', { class: 'zg-topnav__actions' }, slots.actions || p.actions || null)); } },
-  SideNav: { render: ({ h, props: p, slots }) => h('aside', { class: cx('zg-sidenav', p.collapsed && 'zg-sidenav--collapsed') }, h('div', { class: 'zg-sidenav__brand' }, p.brand), ...(p.items || []).map(it => it.group ? h('div', { key: it.group, class: 'zg-sidenav__group', style: p.collapsed ? { display: 'none' } : undefined }, it.group) : nav(h, it, p.value, p.onChange, p.collapsed)), h('div', { class: 'zg-sidenav__sp' }), slots.footer || p.footer || null,
-    (p.onToggle || p.collapsible) ? h('button', { type: 'button', class: 'zg-navitem', onClick: p.onToggle, 'aria-label': t('SideNav', 'toggle') }, icon(h, p.collapsed ? 'panel-left-open' : 'panel-left-close', 18), h('span', null, p.collapseLabel || t('SideNav', 'collapse'))) : null) },
+  SideNav: { state: { open: {} }, render: ({ h, props: p, slots, state, set }) => {
+    const entry = it => {
+      if (it.group) return h('div', { key: it.group, class: 'zg-sidenav__group', style: p.collapsed ? { display: 'none' } : undefined }, it.group);
+      const kids = it.children;
+      if (!kids || !kids.length) return nav(h, it, p.value, p.onChange, p.collapsed);
+      const active = kids.some(c => c.value === p.value), open = state.open[it.value] ?? active;
+      return h('div', { key: it.value, class: 'zg-sidenav__sub' },
+        h('button', { type: 'button', class: 'zg-navitem', 'aria-expanded': String(open), 'aria-current': active && !open ? 'page' : undefined, title: p.collapsed ? it.label : undefined, onClick: () => set({ open: { ...state.open, [it.value]: !open } }) },
+          it.icon ? icon(h, it.icon, 18) : null, h('span', null, it.label), it.count ? h('span', { class: 'zg-navitem__count' }, it.count) : null, h('span', { class: 'zg-sidenav__chev' }, icon(h, 'chevron-down', 14))),
+        open ? h('div', { class: 'zg-sidenav__kids', role: 'group', 'aria-label': it.label }, ...kids.map((c, i) => c.separator ? h('div', { key: 's' + i, class: 'zg-menu__sep', role: 'separator' }) : nav(h, p.collapsed && !c.icon ? { ...c, icon: 'dot' } : c, p.value, p.onChange, p.collapsed))) : null);
+    };
+    return h('aside', { class: cx('zg-sidenav', p.collapsed && 'zg-sidenav--collapsed') }, h('div', { class: 'zg-sidenav__brand' }, p.brand), ...(p.items || []).map(entry), h('div', { class: 'zg-sidenav__sp' }), slots.footer || p.footer || null,
+      (p.onToggle || p.collapsible) ? h('button', { type: 'button', class: 'zg-navitem', onClick: p.onToggle, 'aria-label': t('SideNav', 'toggle') }, icon(h, p.collapsed ? 'panel-left-open' : 'panel-left-close', 18), h('span', null, p.collapseLabel || t('SideNav', 'collapse'))) : null); } },
   AppShell: { state: { collapsed: false }, render: ({ C, h, props: p, children, slots, state, set }) => {
     const brand = p.brand, top = (p.nav || 'top') === 'top', col = p.collapsed ?? state.collapsed, toggle = () => p.onCollapse ? p.onCollapse(!col) : set({ collapsed: !state.collapsed });
     return h('div', { class: cx('zg-root', 'zg-shell', top && 'zg-shell--top', p.frame && 'zg-shell--frame'), style: { background: 'var(--zg-bg)' } },

package/src/meta/navigation.js

@@ -24,7 +24,7 @@ export default {
     description: 'Vertical sidebar with a brand, grouped navigation items, a footer and an optional collapse toggle.',
     props: {
       brand: { type: 'string | VNode', description: 'Logo or product name at the top.' },
-      items: { type: '({ value: string; label: string; icon?: string; count?: string | number } | { group: string })[]', default: '[]', description: 'Entries. An object with group renders a section heading (hidden when collapsed); others are links with an optional icon and count.' },
+      items: { type: '({ value: string; label: string; icon?: string; count?: string | number; children?: ({ value: string; label: string; icon?: string; count?: string | number } | { separator: true })[] } | { group: string })[]', default: '[]', description: 'Entries. An object with group renders a section heading (hidden when collapsed); others are links with an optional icon and count. An entry with children is an expandable group: its button toggles the list of children (open by default while one of them is current); selecting a child calls change with the child value.' },
       value: current,
       collapsed: { type: 'boolean', default: false, description: 'Icon-only mode; labels move to the title tooltip.' },
       collapsible: { type: 'boolean', default: false, description: 'Always draw the collapse button, even without a toggle handler (the button is also drawn when a toggle handler is set).' },
@@ -33,7 +33,7 @@ export default {
     },
     slots: { footer: 'Bottom area above the collapse button, e.g. user card. React also accepts a footer prop.' },
     events: { change: 'Called with the value of the clicked item.', toggle: 'Called when the collapse button is clicked. The button is drawn when this handler is set (Vue: @toggle) or when collapsible is true.' },
-    notes: ['Collapsing is controlled: flip collapsed in the toggle handler.', 'Group entries are keyed by their title, so keep group names unique.'],
+    notes: ['Collapsing is controlled: flip collapsed in the toggle handler.', 'Group entries are keyed by their title, so keep group names unique.', 'In the collapsed rail the children of an open group show as icons (children without an icon get a dot).'],
   },
 
   SubNav: {

package/src/styles/components3.css

@@ -8,7 +8,7 @@
 .zg-chip2--tonal{background:color-mix(in oklch,var(--c) 16%,transparent);color:var(--ct)}.zg-chip2--outlined{box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--c) 55%,transparent);color:var(--ct)}.zg-chip2--solid{background:var(--c);color:var(--zg-on-brand)}
 .zg-chip2 button{all:unset;cursor:pointer;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklch,currentColor 18%,transparent)}
 .zg-tile{width:var(--s);height:var(--s);flex:none;border-radius:8px;display:grid;place-items:center;background:color-mix(in oklch,var(--c) 16%,transparent);color:var(--ct)}.zg-tile--circle{border-radius:50%}
-.zg-usercell{display:inline-flex;align-items:center;gap:10px}.zg-usercell>span{display:flex;flex-direction:column;line-height:1.3}.zg-usercell b{font-size:14px}
+.zg-usercell{display:inline-flex;align-items:center;gap:10px}.zg-usercell>span:not(.zg-avatar){display:flex;flex-direction:column;line-height:1.3}.zg-usercell b{font-size:14px}
 .zg-srow{display:flex;align-items:center;gap:12px;min-height:56px}
 .zg-statline{position:relative;overflow:hidden;gap:6px}.zg-statline__bar{position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--c);opacity:.9}
 .zg-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));padding:8px}.zg-strip__i{display:flex;align-items:center;gap:14px;padding:14px 20px}.zg-strip__i+.zg-strip__i{box-shadow:inset 1px 0 0 var(--zg-stroke)}

package/src/styles/components8.css

@@ -126,3 +126,8 @@
 .zg-topnav__dd>.zg-navitem[aria-expanded="true"] .zg-icon:last-child:not(:first-child){transform:rotate(180deg)}
 .zg-menu__i[aria-current="page"]{background:var(--zg-s2);font-weight:700}.zg-menu__i .zg-navitem__count{margin-inline-start:auto}
 .zg-menu__h{padding:8px 12px 4px;font:600 12px var(--zg-font);letter-spacing:.06em;text-transform:uppercase;color:var(--zg-text-3)}
+/* SideNav: expandable groups */
+.zg-sidenav__sub{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
+.zg-sidenav__sub>.zg-navitem{position:relative}.zg-sidenav__chev{margin-inline-start:auto;display:inline-flex;transition:transform .2s var(--zg-ease)}.zg-sidenav__sub>.zg-navitem[aria-expanded="true"] .zg-sidenav__chev{transform:rotate(180deg)}
+.zg-sidenav__kids{display:flex;flex-direction:column;gap:2px;padding-inline-start:16px}.zg-sidenav__kids .zg-navitem{height:40px}
+.zg-sidenav--collapsed .zg-sidenav__kids{padding-inline-start:0}.zg-sidenav--collapsed .zg-sidenav__chev{display:none}

package/types/react.d.ts

@@ -2814,15 +2814,16 @@ export const UiSettingsSection: ComponentType<UiSettingsSectionProps>;
  * Vertical sidebar with a brand, grouped navigation items, a footer and an optional collapse toggle.
  * Note: Collapsing is controlled: flip collapsed in the toggle handler.
  * Note: Group entries are keyed by their title, so keep group names unique.
+ * Note: In the collapsed rail the children of an open group show as icons (children without an icon get a dot).
  */
 export interface UiSideNavProps {
   /** Logo or product name at the top. */
   brand?: string | ReactNode;
   /**
-   * Entries. An object with group renders a section heading (hidden when collapsed); others are links with an optional icon and count.
+   * Entries. An object with group renders a section heading (hidden when collapsed); others are links with an optional icon and count. An entry with children is an expandable group: its button toggles the list of children (open by default while one of them is current); selecting a child calls change with the child value.
    * @default []
    */
-  items?: ({ value: string; label: string; icon?: string; count?: string | number } | { group: string })[];
+  items?: ({ value: string; label: string; icon?: string; count?: string | number; children?: ({ value: string; label: string; icon?: string; count?: string | number } | { separator: true })[] } | { group: string })[];
   /** Value of the active item (aria-current="page"). */
   value?: string;
   /**

package/types/vue.d.ts

@@ -2821,15 +2821,16 @@ export const UiSettingsSection: UiVueComponent<UiSettingsSectionProps, UiSetting
  * Vertical sidebar with a brand, grouped navigation items, a footer and an optional collapse toggle.
  * Note: Collapsing is controlled: flip collapsed in the toggle handler.
  * Note: Group entries are keyed by their title, so keep group names unique.
+ * Note: In the collapsed rail the children of an open group show as icons (children without an icon get a dot).
  */
 export interface UiSideNavProps {
   /** Logo or product name at the top. */
   brand?: string | VNode;
   /**
-   * Entries. An object with group renders a section heading (hidden when collapsed); others are links with an optional icon and count.
+   * Entries. An object with group renders a section heading (hidden when collapsed); others are links with an optional icon and count. An entry with children is an expandable group: its button toggles the list of children (open by default while one of them is current); selecting a child calls change with the child value.
    * @default []
    */
-  items?: ({ value: string; label: string; icon?: string; count?: string | number } | { group: string })[];
+  items?: ({ value: string; label: string; icon?: string; count?: string | number; children?: ({ value: string; label: string; icon?: string; count?: string | number } | { separator: true })[] } | { group: string })[];
   /** Value of the active item (aria-current="page"). */
   value?: string;
   /**