@ziyarago/ui 0.15.1 → 0.15.2

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [0.15.2](https://github.com/ziyarago/ui/compare/v0.15.1...v0.15.2) (2026-10-21)
+
+### Bug Fixes
+
+* SideNav scrolls instead of squeezing items, collapsible prop ([1f1190e](https://github.com/ziyarago/ui/commit/1f1190e3d5b1c79cd6b0d82b3c2e0b8970fdcd1f))
+
 ## [0.15.1](https://github.com/ziyarago/ui/compare/v0.15.0...v0.15.1) (2026-10-21)
 
 ### Bug Fixes

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.15.1. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.15.2. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
 
 ## Setup
 - import { UiButton } from '@ziyarago/ui/vue'
@@ -1730,13 +1730,14 @@ Props:
 - `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.
 - `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).
 - `collapseLabel`: string = "Collapse". Label of the collapse button.
 - `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = "md". Scale of width (216 to 336 px), padding and item height.
 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 rendered only when this handler is set.
+- 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.

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.15.1. Docs: https://ziyara.vip . Manifest (machine readable): https://ziyara.vip/manifest.json
+Version 0.15.2. 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.15.1",
+ "version": "0.15.2",
  "homepage": "https://ziyara.vip",
  "imports": {
   "vue": "import { UiButton } from '@ziyarago/ui/vue'",
@@ -11789,6 +11789,11 @@
      "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)."
+    },
     "collapseLabel": {
      "type": "string",
      "default": "Collapse",
@@ -11812,7 +11817,7 @@
    },
    "events": {
     "change": "Called with the value of the clicked item.",
-    "toggle": "Called when the collapse button is clicked. The button is rendered only when this handler is set."
+    "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.",

package/dist/style.css

@@ -222,7 +222,7 @@
 .zg-sidenav{--w:272px;position:sticky;top:0;height:100vh;width:var(--w);flex:none;display:flex;flex-direction:column;gap:6px;padding:16px 12px;background:color-mix(in oklch,var(--zg-bg) 62%,transparent);-webkit-backdrop-filter:blur(40px) saturate(1.6);backdrop-filter:blur(40px) saturate(1.6);box-shadow:inset -1px 0 0 var(--zg-stroke);transition:width .3s var(--zg-ease);overflow:hidden}
 [dir="rtl"] .zg-sidenav{box-shadow:inset 1px 0 0 var(--zg-stroke)}
 .zg-sidenav--collapsed{--w:76px}
-.zg-sidenav .zg-navitem{width:100%;height:46px;border-radius:16px;justify-content:flex-start;padding:0 14px}
+.zg-sidenav{overflow-y:auto;overscroll-behavior:contain}.zg-sidenav>*{flex-shrink:0}.zg-sidenav .zg-navitem{flex-shrink:0;width:100%;height:46px;border-radius:16px;justify-content:flex-start;padding:0 14px}
 .zg-sidenav--collapsed .zg-navitem{justify-content:center;padding:0}.zg-sidenav--collapsed .zg-navitem span:not(.zg-icon){display:none}
 .zg-sidenav__brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;font:700 18px var(--zg-font);white-space:nowrap}
 .zg-sidenav--collapsed .zg-sidenav__brand span{display:none}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ziyarago/ui",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "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

@@ -118,7 +118,7 @@ export const components = {
   Timeline: { render: ({ h, props: p }) => h('div', { class: 'zg-timeline' }, ...(p.items || []).map((it, i, a) => h('div', { key: i, class: 'zg-tl' }, h('div', { class: 'zg-tl__rail' }, h('span', { class: 'zg-tl__dot' }), i < a.length - 1 ? h('span', { class: 'zg-tl__line' }) : null), h('div', { class: 'zg-tl__body' }, h('b', null, it.title), it.text ? h('span', null, it.text) : null, h('span', { class: 'zg-tl__time' }, it.time))))) },
   TopNav: { render: ({ h, props: p, slots }) => h('header', { class: 'zg-topnav' }, h('div', { class: 'zg-topnav__brand' }, p.brand), h('nav', { class: 'zg-topnav__items', 'aria-label': t('TopNav', 'label') }, ...(p.items || []).map(it => nav(h, it, p.value, p.onChange))), 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 ? 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) },
+    (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

@@ -25,11 +25,12 @@ export default {
       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.' },
       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).' },
       collapseLabel: { type: 'string', default: 'Collapse', description: 'Label of the collapse button.' },
       size: size('width (216 to 336 px), padding and item height'),
     },
     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 rendered only when this handler is set.' },
+    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.'],
   },
 

package/src/styles/components.css

@@ -140,7 +140,7 @@
 .zg-sidenav{--w:272px;position:sticky;top:0;height:100vh;width:var(--w);flex:none;display:flex;flex-direction:column;gap:6px;padding:16px 12px;background:color-mix(in oklch,var(--zg-bg) 62%,transparent);-webkit-backdrop-filter:blur(40px) saturate(1.6);backdrop-filter:blur(40px) saturate(1.6);box-shadow:inset -1px 0 0 var(--zg-stroke);transition:width .3s var(--zg-ease);overflow:hidden}
 [dir="rtl"] .zg-sidenav{box-shadow:inset 1px 0 0 var(--zg-stroke)}
 .zg-sidenav--collapsed{--w:76px}
-.zg-sidenav .zg-navitem{width:100%;height:46px;border-radius:16px;justify-content:flex-start;padding:0 14px}
+.zg-sidenav{overflow-y:auto;overscroll-behavior:contain}.zg-sidenav>*{flex-shrink:0}.zg-sidenav .zg-navitem{flex-shrink:0;width:100%;height:46px;border-radius:16px;justify-content:flex-start;padding:0 14px}
 .zg-sidenav--collapsed .zg-navitem{justify-content:center;padding:0}.zg-sidenav--collapsed .zg-navitem span:not(.zg-icon){display:none}
 .zg-sidenav__brand{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;font:700 18px var(--zg-font);white-space:nowrap}
 .zg-sidenav--collapsed .zg-sidenav__brand span{display:none}

package/types/react.d.ts

@@ -2821,6 +2821,11 @@ export interface UiSideNavProps {
    * @default false
    */
   collapsed?: boolean;
+  /**
+   * Always draw the collapse button, even without a toggle handler (the button is also drawn when a toggle handler is set).
+   * @default false
+   */
+  collapsible?: boolean;
   /**
    * Label of the collapse button.
    * @default 'Collapse'
@@ -2837,7 +2842,7 @@ export interface UiSideNavProps {
    */
   onChange?: (value: string) => void;
   /**
-   * Called when the collapse button is clicked. The button is rendered only when this handler is set.
+   * Called when the collapse button is clicked. The button is drawn when this handler is set (Vue: @toggle) or when collapsible is true.
    * @event toggle
    */
   onToggle?: () => void;

package/types/vue.d.ts

@@ -2828,6 +2828,11 @@ export interface UiSideNavProps {
    * @default false
    */
   collapsed?: boolean;
+  /**
+   * Always draw the collapse button, even without a toggle handler (the button is also drawn when a toggle handler is set).
+   * @default false
+   */
+  collapsible?: boolean;
   /**
    * Label of the collapse button.
    * @default 'Collapse'
@@ -2844,7 +2849,7 @@ export interface UiSideNavProps {
    */
   onChange?: (value: string) => void;
   /**
-   * Called when the collapse button is clicked. The button is rendered only when this handler is set.
+   * Called when the collapse button is clicked. The button is drawn when this handler is set (Vue: @toggle) or when collapsible is true.
    * @event toggle
    */
   onToggle?: () => void;