@epam/ai-dial-navigation-panel 1.3.0-dev.108 → 1.3.0-dev.110

package/components/NavigationSidebar/NavigationSidebar.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { NavigationSidebarProps } from '../../models/navigation-sidebar-props';
+/** Primary-navigation sidebar: items, a content slot and a footer, as a collapsible column or a drawer. */
+export declare const NavigationSidebar: FC<NavigationSidebarProps>;
+//# sourceMappingURL=NavigationSidebar.d.ts.map

package/components/NavigationSidebar/NavigationSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationSidebar/NavigationSidebar.tsx"],"names":[],"mappings":"AASA,OAAO,EAOL,KAAK,EAAE,EAGR,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAsCpF,2GAA2G;AAC3G,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA2TxD,CAAC"}

package/components/UserMenu/UserMenu.d.ts

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import { UserMenuProps } from '../../models/user-menu-props';
 /**
- * Avatar trigger pinned to the bottom of the nav rail, opening a dropdown with
- * the user's identity, single-select settings submenus, and a log-out entry.
+ * User trigger that opens a dropdown with the user's identity, single-select
+ * settings submenus, an optional Settings entry and a log-out entry.
  */
 export declare const UserMenu: FC<UserMenuProps>;
 //# sourceMappingURL=UserMenu.d.ts.map

package/components/UserMenu/UserMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserMenu.d.ts","sourceRoot":"","sources":["../../../src/components/UserMenu/UserMenu.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAiB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAKlE;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA6ItC,CAAC"}
+{"version":3,"file":"UserMenu.d.ts","sourceRoot":"","sources":["../../../src/components/UserMenu/UserMenu.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAA2B,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAMlE;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAsNtC,CAAC"}

package/components/common/ItemGradients.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+/** Props for `ItemGradients`. */
+export interface ItemGradientsProps {
+    /** `id` of the gradient that paints an active glyph; referenced as `url(#id)`. */
+    activeGradientId: string;
+}
+/**
+ * Paint server for the active item's glyph: a gradient mapped onto the 24×24
+ * Tabler viewBox, colored by `--np-sidebar-gradient-start` and `-end`.
+ * `display: none` would drop it, so it is zero-sized instead.
+ */
+export declare const ItemGradients: FC<ItemGradientsProps>;
+//# sourceMappingURL=ItemGradients.d.ts.map

package/components/common/ItemGradients.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemGradients.d.ts","sourceRoot":"","sources":["../../../src/components/common/ItemGradients.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,iCAAiC;AACjC,MAAM,WAAW,kBAAkB;IACjC,kFAAkF;IAClF,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAgBhD,CAAC"}

package/components/common/UserAvatar.d.ts

@@ -6,6 +6,8 @@ export interface UserAvatarProps {
     profile: NavigationUserProfile;
     /** Alternative text for the image. Pass `''` when a sibling already names the row. */
     alt: string;
+    /** Diameter in pixels. Defaults to `28`. */
+    size?: number;
 }
 /** Avatar image with an initials badge fallback for a missing or broken image. */
 export declare const UserAvatar: FC<UserAvatarProps>;

package/components/common/UserAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/common/UserAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAGvE,8BAA8B;AAC9B,MAAM,WAAW,eAAe;IAC9B,mEAAmE;IACnE,OAAO,EAAE,qBAAqB,CAAC;IAC/B,sFAAsF;IACtF,GAAG,EAAE,MAAM,CAAC;CACb;AAED,kFAAkF;AAClF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAgBzC,CAAC"}
+{"version":3,"file":"UserAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/common/UserAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAGvE,8BAA8B;AAC9B,MAAM,WAAW,eAAe;IAC9B,mEAAmE;IACnE,OAAO,EAAE,qBAAqB,CAAC;IAC/B,sFAAsF;IACtF,GAAG,EAAE,MAAM,CAAC;IACZ,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,kFAAkF;AAClF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAkB1C,CAAC"}

package/constants/public-class-names.d.ts

@@ -3,5 +3,11 @@ export declare const NAVIGATION_PANEL_CLASS: {
     readonly rail: "dial-navigation-panel-rail";
     /** Every item in the rail, whether or not it is the active one. */
     readonly item: "dial-navigation-panel-item";
+    /** The `nav` of `NavigationSidebar`. */
+    readonly sidebar: "dial-navigation-panel-sidebar";
+    /** Every item in `NavigationSidebar`, whether or not it is the active one. */
+    readonly sidebarItem: "dial-navigation-panel-sidebar-item";
+    /** The footer of `NavigationSidebar`. */
+    readonly sidebarFooter: "dial-navigation-panel-sidebar-footer";
 };
 //# sourceMappingURL=public-class-names.d.ts.map

package/constants/public-class-names.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public-class-names.d.ts","sourceRoot":"","sources":["../../src/constants/public-class-names.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,sBAAsB;IACjC,6BAA6B;;IAE7B,mEAAmE;;CAE3D,CAAC"}
+{"version":3,"file":"public-class-names.d.ts","sourceRoot":"","sources":["../../src/constants/public-class-names.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,sBAAsB;IACjC,6BAA6B;;IAE7B,mEAAmE;;IAEnE,wCAAwC;;IAExC,8EAA8E;;IAE9E,yCAAyC;;CAEjC,CAAC"}

package/index.css

@@ -1,3 +1,3 @@
-._rail_1hxk4_1{background:var(--np-bg,var(--bg-layer-raised,#fcfcfc));font-family:var(--np-font-family,inherit)}._item_1hxk4_6{color:var(--np-item-text,var(--text-primary,#161b2d))}._item_1hxk4_6 svg{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}._item_1hxk4_6:hover svg,a:focus-visible>._item_1hxk4_6 svg{transform:translateY(-2px)}._item_1hxk4_6:active svg{transition-duration:.1s;transform:translateY(0)}@media (prefers-reduced-motion:reduce){._item_1hxk4_6 svg{transition:none}._item_1hxk4_6:hover svg,a:focus-visible>._item_1hxk4_6 svg{transform:none}}._item_1hxk4_6:not(._itemActive_1hxk4_33):hover{background:var(--np-item-hover-bg,transparent)}._item_1hxk4_6:not(._itemActive_1hxk4_33):hover svg,a:focus-visible>._item_1hxk4_6:not(._itemActive_1hxk4_33) svg{stroke:var(--np-item-hover-icon,currentColor)}._item_1hxk4_6:active{background:var(--np-item-active-bg,var(--bg-control-accent-alpha-active,#2764d933))}a:focus-visible>._item_1hxk4_6:not(._itemActive_1hxk4_33){background:var(--np-item-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}a:focus-visible>._item_1hxk4_6._itemActive_1hxk4_33{outline:2px solid var(--np-item-active-text,var(--text-accent,#1d4ed8));outline-offset:-2px}._item_1hxk4_6._itemActive_1hxk4_33{background:var(--np-item-selected-bg,var(--bg-control-accent-alpha-active,#2764d933));color:var(--np-item-active-text,var(--text-accent,#1d4ed8))}._item_1hxk4_6._itemActive_1hxk4_33 svg{stroke:var(--np-item-active-icon,currentColor)}._item_1hxk4_6._itemFilled_1hxk4_38 svg{fill:var(--np-item-active-icon,currentColor);stroke:none}._item_1hxk4_6._itemFilledOutline_1hxk4_79 svg{fill:var(--np-item-active-icon,currentColor)}._avatar_4hc9t_4._avatar_4hc9t_4{background:var(--np-avatar-bg,var(--bg-control-accent,#1d4ed8));color:var(--np-avatar-text,var(--text-control-permanent,#fcfcfc))}._wrapper_17aqp_1{font-family:var(--np-font-family,inherit)}._trigger_17aqp_5:hover{background:var(--np-trigger-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}._trigger_17aqp_5._trigger_17aqp_5:focus-visible{background:var(--np-trigger-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924));outline:1px solid var(--np-focus-outline,var(--stroke-focus,#161b2d));outline-offset:-1px}._identityText_17aqp_18,._menuLabel_17aqp_22{color:var(--np-menu-text,var(--text-primary,#161b2d))}._sheet_1k0ml_1{font-family:var(--np-font-family,inherit)}li>._row_1k0ml_12{color:var(--np-sheet-text,var(--text-primary,#161b2d))}li>._row_1k0ml_12:hover,li>._row_1k0ml_12:focus-visible{background:var(--np-sheet-item-hover,var(--bg-control-accent-alpha-hover,#2764d924))}li>._row_1k0ml_12:active{background:var(--np-sheet-item-active,var(--bg-control-neutral-active,#d1dbea))}li>._rowActive_1k0ml_24{color:var(--np-sheet-row-active-text,var(--text-accent,#1d4ed8));background:var(--np-sheet-row-active-bg,var(--bg-control-accent-alpha,#2764d90f))}li>._rowActive_1k0ml_24:hover,li>._rowActive_1k0ml_24:focus-visible{background:var(--np-sheet-row-active-bg-hover,var(--bg-control-accent-alpha-hover,#2764d924))}li>._rowActive_1k0ml_24 ._rowIcon_1k0ml_31{color:inherit}li>._rowActive_1k0ml_24 ._rowIcon_1k0ml_31 svg[fill=none]{fill:currentColor}._rowIcon_1k0ml_31{color:var(--np-sheet-icon,var(--text-secondary,#57647a))}._divider_1k0ml_46{border-color:var(--np-sheet-divider,var(--stroke-secondary,#d1dbea))}._mutedText_1k0ml_50{color:var(--np-sheet-muted-text,var(--text-secondary,#57647a))}._activeIcon_1k0ml_54{color:var(--np-menu-active-icon,var(--text-accent,#1d4ed8))}
+._rail_1hxk4_1{background:var(--np-bg,var(--bg-layer-raised,#fcfcfc));font-family:var(--np-font-family,inherit)}._item_1hxk4_6{color:var(--np-item-text,var(--text-primary,#161b2d))}._item_1hxk4_6 svg{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}._item_1hxk4_6:hover svg,a:focus-visible>._item_1hxk4_6 svg{transform:translateY(-2px)}._item_1hxk4_6:active svg{transition-duration:.1s;transform:translateY(0)}@media (prefers-reduced-motion:reduce){._item_1hxk4_6 svg{transition:none}._item_1hxk4_6:hover svg,a:focus-visible>._item_1hxk4_6 svg{transform:none}}._item_1hxk4_6:not(._itemActive_1hxk4_33):hover{background:var(--np-item-hover-bg,transparent)}._item_1hxk4_6:not(._itemActive_1hxk4_33):hover svg,a:focus-visible>._item_1hxk4_6:not(._itemActive_1hxk4_33) svg{stroke:var(--np-item-hover-icon,currentColor)}._item_1hxk4_6:active{background:var(--np-item-active-bg,var(--bg-control-accent-alpha-active,#2764d933))}a:focus-visible>._item_1hxk4_6:not(._itemActive_1hxk4_33){background:var(--np-item-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}a:focus-visible>._item_1hxk4_6._itemActive_1hxk4_33{outline:2px solid var(--np-item-active-text,var(--text-accent,#1d4ed8));outline-offset:-2px}._item_1hxk4_6._itemActive_1hxk4_33{background:var(--np-item-selected-bg,var(--bg-control-accent-alpha-active,#2764d933));color:var(--np-item-active-text,var(--text-accent,#1d4ed8))}._item_1hxk4_6._itemActive_1hxk4_33 svg{stroke:var(--np-item-active-icon,currentColor)}._item_1hxk4_6._itemFilled_1hxk4_38 svg{fill:var(--np-item-active-icon,currentColor);stroke:none}._item_1hxk4_6._itemFilledOutline_1hxk4_79 svg{fill:var(--np-item-active-icon,currentColor)}._stopStart_8i550_1{stop-color:var(--np-sidebar-gradient-start,#1d4ed8)}._stopEnd_8i550_5{stop-color:var(--np-sidebar-gradient-end,#885df2)}._sidebar_1w4pz_1{background:var(--np-sidebar-bg,var(--bg-layer-raised,#fcfcfc));font-family:var(--np-sidebar-font-family,inherit)}._sidebarColumn_1w4pz_7{transition:width .2s}@media (prefers-reduced-motion:reduce){._sidebarColumn_1w4pz_7{transition:none}}._item_1w4pz_16{color:var(--np-sidebar-item-text,var(--text-primary,#161b2d));cursor:pointer}._item_1w4pz_16:not(._itemActive_1w4pz_21):hover,._item_1w4pz_16:not(._itemActive_1w4pz_21):focus-visible{background:var(--np-sidebar-item-hover-bg,var(--bg-control-accent-alpha-hover-subtle,#2764d90a))}._item_1w4pz_16:focus-visible{outline:1px solid var(--np-sidebar-focus-outline,var(--stroke-focus,#161b2d));outline-offset:2px}._item_1w4pz_16._itemActive_1w4pz_21{background:var(--np-sidebar-item-selected-bg,var(--bg-control-accent-alpha-active-subtle,#2764d914))}._item_1w4pz_16._itemActive_1w4pz_21 svg{stroke:var(--np-sidebar-item-active-icon,currentColor)}._item_1w4pz_16._itemFilled_1w4pz_38 svg{fill:var(--np-sidebar-item-active-icon,currentColor);stroke:none}._item_1w4pz_16._itemFilledOutline_1w4pz_45 svg{fill:var(--np-sidebar-item-active-icon,currentColor)}._itemIcon_1w4pz_49{color:var(--np-sidebar-item-text,var(--text-primary,#161b2d))}._footer_1w4pz_55{background:var(--np-sidebar-bg,var(--bg-layer-raised,#fcfcfc))}._avatar_4hc9t_4._avatar_4hc9t_4{background:var(--np-avatar-bg,var(--bg-control-accent,#1d4ed8));color:var(--np-avatar-text,var(--text-control-permanent,#fcfcfc))}._wrapper_11e9t_1{font-family:var(--np-font-family,inherit)}._trigger_11e9t_5:hover{background:var(--np-trigger-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924))}._trigger_11e9t_5._trigger_11e9t_5:focus-visible{background:var(--np-trigger-hover-bg,var(--bg-control-accent-alpha-hover,#2764d924));outline:1px solid var(--np-focus-outline,var(--stroke-focus,#161b2d));outline-offset:-1px}._triggerOpen_11e9t_18{background:var(--np-trigger-open-bg,var(--bg-control-accent-alpha-active-subtle,#2764d914))}._identityText_11e9t_22,._menuLabel_11e9t_26{color:var(--np-menu-text,var(--text-primary,#161b2d))}._sheet_1k0ml_1{font-family:var(--np-font-family,inherit)}li>._row_1k0ml_12{color:var(--np-sheet-text,var(--text-primary,#161b2d))}li>._row_1k0ml_12:hover,li>._row_1k0ml_12:focus-visible{background:var(--np-sheet-item-hover,var(--bg-control-accent-alpha-hover,#2764d924))}li>._row_1k0ml_12:active{background:var(--np-sheet-item-active,var(--bg-control-neutral-active,#d1dbea))}li>._rowActive_1k0ml_24{color:var(--np-sheet-row-active-text,var(--text-accent,#1d4ed8));background:var(--np-sheet-row-active-bg,var(--bg-control-accent-alpha,#2764d90f))}li>._rowActive_1k0ml_24:hover,li>._rowActive_1k0ml_24:focus-visible{background:var(--np-sheet-row-active-bg-hover,var(--bg-control-accent-alpha-hover,#2764d924))}li>._rowActive_1k0ml_24 ._rowIcon_1k0ml_31{color:inherit}li>._rowActive_1k0ml_24 ._rowIcon_1k0ml_31 svg[fill=none]{fill:currentColor}._rowIcon_1k0ml_31{color:var(--np-sheet-icon,var(--text-secondary,#57647a))}._divider_1k0ml_46{border-color:var(--np-sheet-divider,var(--stroke-secondary,#d1dbea))}._mutedText_1k0ml_50{color:var(--np-sheet-muted-text,var(--text-secondary,#57647a))}._activeIcon_1k0ml_54{color:var(--np-menu-active-icon,var(--text-accent,#1d4ed8))}
 /*$vite$:1*//*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}.absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.contents{display:contents}.flex{display:flex}.size-0{width:0;height:0}.size-\[44px\]{width:44px;height:44px}.size-\[60px\]{width:60px;height:60px}.h-6{height:1.5rem}.h-16{height:4rem}.h-\[40px\]{height:40px}.h-\[56px\]{height:56px}.h-auto{height:auto}.h-full{height:100%}.w-6{width:1.5rem}.w-\[60px\]{width:60px}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0{gap:0}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.\!rounded-full{border-radius:3.40282e38px!important}.rounded-none{border-radius:0}.rounded-xl{border-radius:.75rem}.bg-contain{background-size:contain}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.p-0{padding:0}.p-2{padding:.5rem}.px-4{padding-inline:1rem}.py-2{padding-block:.5rem}.py-\[10px\]{padding-block:10px}.pb-4{padding-bottom:1rem}.shadow-sm{--tw-shadow:4px 9px 16px 1px var(--tw-shadow-color,var(--shadow-sm-2,var(--shadow-sm,#2764d90f))), 0 -2px 4px 2px var(--tw-shadow-color,var(--shadow-sm-1,#2764d90a));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.rtl\:scale-x-\[-1\]:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-scale-x:-1;scale:var(--tw-scale-x) var(--tw-scale-y)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.inset-y-0{inset-block:0}.start-0{inset-inline-start:0}.z-10{z-index:10}.z-50{z-index:50}.m-0{margin:0}.block{display:block}.contents{display:contents}.flex{display:flex}.hidden{display:none}.inline{display:inline}.\!size-10{width:2.5rem!important;height:2.5rem!important}.size-0{width:0;height:0}.size-6{width:1.5rem;height:1.5rem}.size-10{width:2.5rem;height:2.5rem}.size-10\!{width:2.5rem!important;height:2.5rem!important}.size-\[44px\]{width:44px;height:44px}.size-\[60px\]{width:60px;height:60px}.\!h-10{height:2.5rem!important}.h-6{height:1.5rem}.h-10{height:2.5rem}.h-16{height:4rem}.h-\[40px\]{height:40px}.h-\[56px\]{height:56px}.h-auto{height:auto}.h-full{height:100%}.\!min-h-0{min-height:0!important}.min-h-0{min-height:0}.min-h-0\!{min-height:0!important}.w-6{width:1.5rem}.w-\[60px\]{width:60px}.w-\[72px\]{width:72px}.w-\[320px\]{width:320px}.w-\[336px\]{width:336px}.w-full{width:100%}.max-w-full{max-width:100%}.\!min-w-0{min-width:0!important}.min-w-0{min-width:0}.min-w-0\!{min-width:0!important}.min-w-\[116px\]{min-width:116px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.translate-x-0{--tw-translate-x:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.list-none{list-style-type:none}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.\!rounded-full{border-radius:3.40282e38px!important}.rounded-full{border-radius:3.40282e38px}.rounded-full\!{border-radius:3.40282e38px!important}.rounded-none{border-radius:0}.rounded-xl{border-radius:.75rem}.\!border-0{border-style:var(--tw-border-style)!important;border-width:0!important}.bg-contain{background-size:contain}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.\!p-2{padding:.5rem!important}.p-0{padding:0}.p-2{padding:.5rem}.p-2\!{padding:.5rem!important}.p-4{padding:1rem}.px-4{padding-inline:1rem}.py-2{padding-block:.5rem}.py-3{padding-block:.75rem}.py-\[10px\]{padding-block:10px}.ps-2{padding-inline-start:.5rem}.ps-4{padding-inline-start:1rem}.pe-2{padding-inline-end:.5rem}.pt-3{padding-top:.75rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.no-underline{text-decoration-line:none}.opacity-0{opacity:0}.shadow-lg{--tw-shadow:0 8px 44px 0 var(--tw-shadow-color,var(--shadow-lg,#2764d914));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:4px 9px 16px 1px var(--tw-shadow-color,var(--shadow-sm-2,var(--shadow-sm,#2764d90f))), 0 -2px 4px 2px var(--tw-shadow-color,var(--shadow-sm-1,#2764d90a));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-\[transform\,visibility\]{transition-property:transform,visibility;transition-timing-function:var(--tw-ease,cubic-bezier(.4, 0, .2, 1));transition-duration:var(--tw-duration,.15s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,cubic-bezier(.4, 0, .2, 1));transition-duration:var(--tw-duration,.15s)}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-in-out{--tw-ease:cubic-bezier(.4, 0, .2, 1);transition-timing-function:cubic-bezier(.4,0,.2,1)}.outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.group-hover\/toggle\:opacity-0:is(:where(.group\/toggle):hover *){opacity:0}.group-hover\/toggle\:opacity-100:is(:where(.group\/toggle):hover *){opacity:1}}.group-focus-visible\/toggle\:opacity-0:is(:where(.group\/toggle):focus-visible *){opacity:0}.group-focus-visible\/toggle\:opacity-100:is(:where(.group\/toggle):focus-visible *){opacity:1}@media (prefers-reduced-motion:reduce){.motion-reduce\:transition-none{transition-property:none}}.ltr\:-translate-x-full:where(:dir(ltr),[dir=ltr],[dir=ltr] *){--tw-translate-x:-100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.rtl\:translate-x-full:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-translate-x:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.rtl\:scale-x-\[-1\]:where(:dir(rtl),[dir=rtl],[dir=rtl] *){--tw-scale-x:-1;scale:var(--tw-scale-x) var(--tw-scale-y)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}

package/index.d.ts

@@ -1,4 +1,5 @@
 export { NavigationPanel } from './components/NavigationPanel/NavigationPanel';
+export { NavigationSidebar } from './components/NavigationSidebar/NavigationSidebar';
 export { UserMenu } from './components/UserMenu/UserMenu';
 export { NavigationSheet } from './components/NavigationSheet/NavigationSheet';
 export { NavigableBottomSheet } from './components/NavigationSheet/NavigableBottomSheet';
@@ -9,9 +10,10 @@ export { SheetRow } from './components/NavigationSheet/SheetRow';
 export { AvatarInitials } from './components/common/AvatarInitials';
 export { UserAvatar } from './components/common/UserAvatar';
 export { useSheetNavigation } from './hooks/useSheetNavigation';
-export type { NavigationItemIcon, NavigationLinkRenderer, NavigationPanelItem, } from './models/navigation-item';
+export type { NavigationItemIcon, NavigationLinkRenderer, NavigationSidebarLinkProps, NavigationSidebarLinkRenderer, NavigationPanelItem, } from './models/navigation-item';
 export type { NavigationMenuGroup, NavigationMenuOption, } from './models/navigation-menu';
 export type { NavigationPanelColors, NavigationPanelLabels, NavigationPanelLogo, NavigationPanelProps, NavigationPanelStyles, NavigationPanelTypography, } from './models/navigation-panel-props';
+export type { NavigationSidebarColors, NavigationSidebarLabels, NavigationSidebarLogo, NavigationSidebarProps, NavigationSidebarStyles, NavigationSidebarTypography, } from './models/navigation-sidebar-props';
 export type { NavigationSheetColors, NavigationSheetLabels, NavigationSheetProps, NavigationSheetStyles, NavigationSheetTypography, } from './models/navigation-sheet-props';
 export type { SheetNavigation, SheetPage } from './models/sheet-navigation';
 export type { UserMenuColors, UserMenuLabels, UserMenuProps, UserMenuStyles, UserMenuTypography, } from './models/user-menu-props';
@@ -23,5 +25,7 @@ export type { NavigationMenuPageProps } from './components/NavigationSheet/Navig
 export type { OptionListPageProps } from './components/NavigationSheet/OptionListPage';
 export type { ProfilePageProps } from './components/NavigationSheet/ProfilePage';
 export type { SheetRowProps } from './components/NavigationSheet/SheetRow';
+export { NavigationSidebarVariant } from './types/navigation-sidebar-variant';
+export { UserMenuTriggerVariant } from './types/user-menu-trigger-variant';
 export { NAVIGATION_PANEL_CLASS } from './constants/public-class-names';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,mDAAmD,CAAC;AACzF,OAAO,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,iCAAiC,CAAC;AACzC,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,iCAAiC,CAAC;AACzC,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC5E,YAAY,EACV,cAAc,EACd,cAAc,EACd,aAAa,EACb,cAAc,EACd,kBAAkB,GACnB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,YAAY,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACtE,YAAY,EAAE,yBAAyB,EAAE,MAAM,mDAAmD,CAAC;AACnG,YAAY,EAAE,uBAAuB,EAAE,MAAM,iDAAiD,CAAC;AAC/F,YAAY,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AACvF,YAAY,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AACjF,YAAY,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,oBAAoB,EAAE,MAAM,mDAAmD,CAAC;AACzF,OAAO,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAE5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,0BAA0B,EAC1B,6BAA6B,EAC7B,mBAAmB,GACpB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,iCAAiC,CAAC;AACzC,YAAY,EACV,uBAAuB,EACvB,uBAAuB,EACvB,qBAAqB,EACrB,sBAAsB,EACtB,uBAAuB,EACvB,2BAA2B,GAC5B,MAAM,mCAAmC,CAAC;AAC3C,YAAY,EACV,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,iCAAiC,CAAC;AACzC,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC5E,YAAY,EACV,cAAc,EACd,cAAc,EACd,aAAa,EACb,cAAc,EACd,kBAAkB,GACnB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,YAAY,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACtE,YAAY,EAAE,yBAAyB,EAAE,MAAM,mDAAmD,CAAC;AACnG,YAAY,EAAE,uBAAuB,EAAE,MAAM,iDAAiD,CAAC;AAC/F,YAAY,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AACvF,YAAY,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AACjF,YAAY,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAC3E,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC"}

package/index.js

@@ -1,98 +1,101 @@
 import { buildCssVars as e, mergeClasses as t } from "@epam/ai-dial-chat-shared";
-import { Avatar as n, BASE_ICON_SIZE as r, Button as i, DIAL_ICON_SIZE as a, DIAL_KIT_ICON_STROKE as o, Dropdown as s, DropdownItemType as c, EllipsisTooltip as l, IconButton as u, MenuItem as d, MenuItemMark as f } from "@epam/ai-dial-ui-kit";
-import { Fragment as p, createContext as m, memo as h, useCallback as g, useContext as _, useEffect as v, useId as y, useMemo as b, useState as x } from "react";
-import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
-import { IconCheck as T, IconChevronRight as E, IconLogout as D, IconSettings as O, IconUser as k } from "@tabler/icons-react";
-import { BottomSheetShell as A } from "@epam/ai-dial-conversation-input";
+import { Avatar as n, BASE_ICON_SIZE as r, Button as i, DIAL_ICON_SIZE as a, DIAL_KIT_ICON_STROKE as o, Dropdown as s, DropdownItemType as c, ElementSize as l, EllipsisTooltip as u, GhostIconButton as d, IconButton as f, MenuItem as p, MenuItemMark as m, Tooltip as h } from "@epam/ai-dial-ui-kit";
+import { Fragment as g, createContext as _, memo as v, useCallback as y, useContext as b, useEffect as x, useId as S, useMemo as C, useRef as w, useState as ee } from "react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { IconCheck as O, IconChevronDown as k, IconChevronRight as A, IconChevronUp as te, IconLayoutSidebar as j, IconLogout as M, IconSettings as N, IconUser as P, IconX as F } from "@tabler/icons-react";
+import { BottomSheetShell as I } from "@epam/ai-dial-conversation-input";
 //#region src/constants/public-class-names.ts
-var j = {
+var L = {
 	rail: "dial-navigation-panel-rail",
-	item: "dial-navigation-panel-item"
-}, M = {
+	item: "dial-navigation-panel-item",
+	sidebar: "dial-navigation-panel-sidebar",
+	sidebarItem: "dial-navigation-panel-sidebar-item",
+	sidebarFooter: "dial-navigation-panel-sidebar-footer"
+}, R = {
 	rail: "_rail_1hxk4_1",
 	item: "_item_1hxk4_6",
 	itemActive: "_itemActive_1hxk4_33",
 	itemFilled: "_itemFilled_1hxk4_38",
 	itemFilledOutline: "_itemFilledOutline_1hxk4_79"
-}, N = (e, t) => /* @__PURE__ */ C("a", {
+}, z = (e, t) => /* @__PURE__ */ E("a", {
 	href: e.href,
 	className: "contents",
 	children: t
-}), P = h(({ items: n, labels: r, logo: i, footer: s, renderLink: c = N, styles: l }) => {
-	let { colors: d, typography: f, className: m, cssVars: h } = l ?? {}, g = y().replace(/[^\w-]/g, ""), _ = `np-hover-gradient-${g}`, v = `np-active-gradient-${g}`, x = b(() => e({
-		"--np-bg": d?.background,
-		"--np-item-text": d?.itemText,
-		"--np-item-active-text": d?.itemActiveText,
-		"--np-item-selected-bg": d?.itemSelectedBackground,
-		"--np-item-hover-bg": d?.itemHoverBackground,
-		"--np-item-hover-icon": d?.itemHoverIcon ?? `url(#${_})`,
-		"--np-item-active-icon": d?.itemActiveIcon ?? `url(#${v})`,
-		"--np-item-active-bg": d?.itemActiveBackground,
-		"--np-font-family": f?.fontFamily
+}), B = v(({ items: n, labels: r, logo: i, footer: s, renderLink: c = z, styles: l }) => {
+	let { colors: u, typography: d, className: p, cssVars: m } = l ?? {}, h = S().replace(/[^\w-]/g, ""), _ = `np-hover-gradient-${h}`, v = `np-active-gradient-${h}`, y = C(() => e({
+		"--np-bg": u?.background,
+		"--np-item-text": u?.itemText,
+		"--np-item-active-text": u?.itemActiveText,
+		"--np-item-selected-bg": u?.itemSelectedBackground,
+		"--np-item-hover-bg": u?.itemHoverBackground,
+		"--np-item-hover-icon": u?.itemHoverIcon ?? `url(#${_})`,
+		"--np-item-active-icon": u?.itemActiveIcon ?? `url(#${v})`,
+		"--np-item-active-bg": u?.itemActiveBackground,
+		"--np-font-family": d?.fontFamily
 	}), [
-		d,
-		f?.fontFamily,
+		u,
+		d?.fontFamily,
 		_,
 		v
 	]);
-	return /* @__PURE__ */ w("nav", {
+	return /* @__PURE__ */ D("nav", {
 		"aria-label": r.ariaLabel,
 		style: {
-			...h,
-			...x
+			...m,
+			...y
 		},
-		className: t(M.rail, "relative z-10 flex h-full w-[60px] flex-col justify-between shadow-sm", f?.fontClassName, m, j.rail),
+		className: t(R.rail, "relative z-10 flex h-full w-[60px] flex-col justify-between shadow-sm", d?.fontClassName, p, L.rail),
 		children: [
-			/* @__PURE__ */ C("svg", {
+			/* @__PURE__ */ E("svg", {
 				"aria-hidden": !0,
 				className: "absolute size-0",
 				focusable: "false",
-				children: /* @__PURE__ */ w("defs", { children: [/* @__PURE__ */ w("linearGradient", {
+				children: /* @__PURE__ */ D("defs", { children: [/* @__PURE__ */ D("linearGradient", {
 					id: _,
 					gradientUnits: "userSpaceOnUse",
 					x1: "30.2",
 					y1: "-2.5",
 					x2: "-4.6",
 					y2: "25.2",
-					children: [/* @__PURE__ */ C("stop", {
+					children: [/* @__PURE__ */ E("stop", {
 						offset: "0",
 						stopColor: "#1d4ed8"
-					}), /* @__PURE__ */ C("stop", {
+					}), /* @__PURE__ */ E("stop", {
 						offset: "1",
 						stopColor: "#885df2"
 					})]
-				}), /* @__PURE__ */ w("linearGradient", {
+				}), /* @__PURE__ */ D("linearGradient", {
 					id: v,
 					gradientUnits: "userSpaceOnUse",
 					x1: "31.3",
 					y1: "-1.7",
 					x2: "0.2",
 					y2: "20.4",
-					children: [/* @__PURE__ */ C("stop", {
+					children: [/* @__PURE__ */ E("stop", {
 						offset: "0",
 						stopColor: "#1d4ed8"
-					}), /* @__PURE__ */ C("stop", {
+					}), /* @__PURE__ */ E("stop", {
 						offset: "1",
 						stopColor: "#885df2"
 					})]
 				})] })
 			}),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ D("div", {
 				className: "flex flex-col items-center",
-				children: [i && /* @__PURE__ */ C("a", {
+				children: [i && /* @__PURE__ */ E("a", {
 					href: i.href ?? "/",
 					"aria-label": i.ariaLabel,
 					className: "flex h-16 w-full shrink-0 items-center justify-center",
-					children: /* @__PURE__ */ C("span", {
+					children: /* @__PURE__ */ E("span", {
 						style: { backgroundImage: `url("${i.iconUrl}")` },
 						className: "h-6 w-6 bg-contain bg-center bg-no-repeat"
 					})
-				}), /* @__PURE__ */ C("div", {
+				}), /* @__PURE__ */ E("div", {
 					className: "flex flex-col items-center gap-2 p-2",
 					children: n.map((e) => {
 						let n = !!e.isActive && !!e.activeIcon;
-						return /* @__PURE__ */ C(p, { children: c(e, /* @__PURE__ */ C(u, {
-							icon: /* @__PURE__ */ C(n && e.activeIcon || e.icon, {
+						return /* @__PURE__ */ E(g, { children: c(e, /* @__PURE__ */ E(f, {
+							icon: /* @__PURE__ */ E(n && e.activeIcon || e.icon, {
 								size: a.LG,
 								stroke: o
 							}),
@@ -100,7 +103,7 @@ var j = {
 							"aria-current": e.isActive ? "page" : void 0,
 							tooltipProps: { tooltip: e.label },
 							tabIndex: -1,
-							className: t(M.item, "rounded-xl", e.isActive && M.itemActive, n && M.itemFilled, e.isActive && !n && M.itemFilledOutline, j.item)
+							className: t(R.item, "rounded-xl", e.isActive && R.itemActive, n && R.itemFilled, e.isActive && !n && R.itemFilledOutline, L.item)
 						})) }, e.id);
 					})
 				})]
@@ -108,52 +111,218 @@ var j = {
 			s
 		]
 	});
-}), F = { avatar: "_avatar_4hc9t_4" }, I = h(({ shortName: e, className: r, textClassName: i = "dial-tiny-text" }) => /* @__PURE__ */ C(n, {
+}), V = /* @__PURE__ */ function(e) {
+	return e.Sidebar = "sidebar", e.Drawer = "drawer", e;
+}({}), H = {
+	stopStart: "_stopStart_8i550_1",
+	stopEnd: "_stopEnd_8i550_5"
+}, ne = ({ activeGradientId: e }) => /* @__PURE__ */ E("svg", {
+	"aria-hidden": !0,
+	className: "absolute size-0",
+	focusable: "false",
+	children: /* @__PURE__ */ E("defs", { children: /* @__PURE__ */ D("linearGradient", {
+		id: e,
+		gradientUnits: "userSpaceOnUse",
+		x1: "31.3",
+		y1: "-1.7",
+		x2: "0.2",
+		y2: "20.4",
+		children: [/* @__PURE__ */ E("stop", {
+			offset: "0",
+			className: H.stopStart
+		}), /* @__PURE__ */ E("stop", {
+			offset: "1",
+			className: H.stopEnd
+		})]
+	}) })
+}), U = {
+	sidebar: "_sidebar_1w4pz_1",
+	sidebarColumn: "_sidebarColumn_1w4pz_7",
+	item: "_item_1w4pz_16",
+	itemActive: "_itemActive_1w4pz_21",
+	itemFilled: "_itemFilled_1w4pz_38",
+	itemFilledOutline: "_itemFilledOutline_1w4pz_45",
+	itemIcon: "_itemIcon_1w4pz_49",
+	footer: "_footer_1w4pz_55"
+}, re = (e, t, n) => /* @__PURE__ */ E("a", {
+	href: e.href,
+	...n,
+	children: t
+}), ie = (e, t) => e ? "w-[320px] max-w-full" : t ? "w-[72px]" : "w-[336px]", ae = (e, n) => e ? t("fixed inset-y-0 start-0 z-50 flex flex-col overflow-hidden shadow-sm outline-none", "transition-[transform,visibility] duration-200 ease-in-out motion-reduce:transition-none", n ? "visible translate-x-0" : "invisible ltr:-translate-x-full rtl:translate-x-full") : t(U.sidebarColumn, "relative z-10 flex h-full shrink-0 flex-col overflow-hidden shadow-sm"), W = v(({ items: n, labels: r, variant: i = V.Sidebar, isCollapsed: s = !1, onToggleCollapse: c, isOpen: u = !1, onClose: f, id: p, logo: m, renderLink: _ = re, children: v, userMenu: y, footerActions: b, styles: ee }) => {
+	let { colors: O, typography: k, className: A, cssVars: te } = ee ?? {}, M = k?.fontClassName ?? "dial-small-text", N = i === V.Drawer, P = !N && s, I = S(), R = p ?? I, z = `np-sidebar-gradient-${I.replace(/[^\w-]/g, "")}`, B = w(null), H = w(null), W = w(u);
+	x(() => {
+		let e = W.current;
+		W.current = u, N && (u && !e ? (H.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, B.current?.focus()) : !u && e && (H.current?.focus(), H.current = null));
+	}, [N, u]);
+	let G = (e) => {
+		e.currentTarget.contains(e.target) && e.key === "Escape" && f?.();
+	}, K = C(() => e({
+		"--np-sidebar-bg": O?.background,
+		"--np-sidebar-item-text": O?.itemText,
+		"--np-sidebar-item-hover-bg": O?.itemHoverBackground,
+		"--np-sidebar-item-selected-bg": O?.itemSelectedBackground,
+		"--np-sidebar-focus-outline": O?.focusOutline,
+		"--np-sidebar-gradient-start": O?.itemActiveGradientStart,
+		"--np-sidebar-gradient-end": O?.itemActiveGradientEnd,
+		"--np-sidebar-item-active-icon": O?.itemActiveIcon ?? `url(#${z})`,
+		"--np-sidebar-font-family": k?.fontFamily
+	}), [
+		O,
+		k?.fontFamily,
+		z
+	]), q = P ? r.expand ?? "Expand sidebar" : r.collapse ?? "Collapse sidebar", J = r.toggle ?? "Sidebar", Y = r.close ?? "Close", oe = (e, n) => /* @__PURE__ */ E("span", {
+		style: { backgroundImage: `url("${e}")` },
+		className: t("bg-contain bg-center bg-no-repeat", n)
+	}), se = () => /* @__PURE__ */ E(d, {
+		icon: /* @__PURE__ */ D("span", {
+			className: "relative block size-6 shrink-0",
+			children: [P && m && oe(m.iconUrl, "absolute inset-0 transition-opacity group-focus-visible/toggle:opacity-0 group-hover/toggle:opacity-0"), /* @__PURE__ */ E(j, {
+				size: a.LG,
+				stroke: o,
+				className: t("absolute inset-0 rtl:scale-x-[-1]", P && m && "opacity-0 group-hover/toggle:opacity-100 group-focus-visible/toggle:opacity-100"),
+				"aria-hidden": !0
+			})]
+		}),
+		size: l.Large,
+		"aria-label": J,
+		"aria-expanded": !P,
+		"aria-controls": R,
+		tooltipProps: { tooltip: q },
+		onClick: c,
+		className: "group/toggle size-10! min-h-0! min-w-0! shrink-0 rounded-full! p-2!"
+	}), ce = () => /* @__PURE__ */ E(d, {
+		icon: /* @__PURE__ */ E(F, {
+			size: a.LG,
+			stroke: o,
+			"aria-hidden": !0
+		}),
+		size: l.Large,
+		"aria-label": Y,
+		tooltipProps: { tooltip: Y },
+		onClick: f,
+		className: "size-10! min-h-0! min-w-0! shrink-0 rounded-full! p-2!"
+	}), X = () => m && /* @__PURE__ */ E("a", {
+		href: m.href ?? "/",
+		"aria-label": m.ariaLabel,
+		className: t("flex h-10 items-center", !N && "ps-2"),
+		children: oe(P ? m.iconUrl : m.logoUrl ?? m.iconUrl, P ? "size-6" : "h-6 min-w-[116px]")
+	}), Z = () => /* @__PURE__ */ D("div", {
+		className: "flex shrink-0 items-center justify-between ps-4 pe-2 pt-3 pb-2",
+		children: [X(), f && ce()]
+	}), Q = () => /* @__PURE__ */ D(T, { children: [!(P && c) && X(), c && se()] }), $ = (e) => {
+		let n = !!e.isActive && !!e.activeIcon, r = n && e.activeIcon || e.icon, i = _(e, /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E("span", {
+			className: t("flex size-6 shrink-0 items-center justify-center", U.itemIcon),
+			children: /* @__PURE__ */ E(r, {
+				size: a.LG,
+				stroke: o
+			})
+		}), /* @__PURE__ */ E("span", {
+			className: P ? "sr-only" : M,
+			children: e.label
+		})] }), {
+			className: t("flex items-center rounded-full p-2 no-underline", P ? "size-10 justify-center" : "h-10 w-full gap-2", U.item, e.isActive && U.itemActive, n && U.itemFilled, e.isActive && !n && U.itemFilledOutline, L.sidebarItem),
+			"aria-current": e.isActive ? "page" : void 0
+		});
+		return /* @__PURE__ */ E("li", { children: P ? /* @__PURE__ */ E(h, {
+			tooltip: e.label,
+			asChild: !0,
+			children: i
+		}) : i }, e.id);
+	}, le = P ? /* @__PURE__ */ D(g, { children: [b, y] }) : /* @__PURE__ */ D(g, { children: [y, b] });
+	return /* @__PURE__ */ D("nav", {
+		ref: B,
+		id: R,
+		"aria-label": r.ariaLabel,
+		tabIndex: N ? -1 : void 0,
+		inert: N && !u,
+		onKeyDown: N ? G : void 0,
+		style: {
+			...te,
+			...K
+		},
+		className: t(U.sidebar, ae(N, u), ie(N, P), A, L.sidebar),
+		children: [
+			!O?.itemActiveIcon && /* @__PURE__ */ E(ne, { activeGradientId: z }),
+			N ? /* @__PURE__ */ D("div", {
+				className: "flex shrink-0 flex-col",
+				children: [Z(), /* @__PURE__ */ E("ul", {
+					className: "m-0 flex list-none flex-col gap-1 p-2",
+					children: n.map($)
+				})]
+			}) : /* @__PURE__ */ D("div", {
+				className: "flex shrink-0 flex-col gap-4 p-4",
+				children: [/* @__PURE__ */ E("div", {
+					className: "flex h-10 items-center justify-between",
+					children: Q()
+				}), /* @__PURE__ */ E("ul", {
+					className: "m-0 flex list-none flex-col gap-1 p-0",
+					children: n.map($)
+				})]
+			}),
+			/* @__PURE__ */ E("div", {
+				inert: P,
+				className: t("min-h-0 flex-1 overflow-hidden", P && "invisible"),
+				children: /* @__PURE__ */ E("div", {
+					className: t("flex h-full flex-col", N ? "w-full" : "w-[336px]"),
+					children: v
+				})
+			}),
+			/* @__PURE__ */ E("div", {
+				className: t("flex shrink-0 px-4 py-3 shadow-lg", U.footer, P ? "flex-col items-start gap-2" : "items-center justify-between", L.sidebarFooter),
+				children: le
+			})
+		]
+	});
+}), G = /* @__PURE__ */ function(e) {
+	return e.Avatar = "avatar", e.Profile = "profile", e.Compact = "compact", e;
+}({}), K = { avatar: "_avatar_4hc9t_4" }, q = v(({ shortName: e, className: r, textClassName: i = "dial-tiny-text" }) => /* @__PURE__ */ E(n, {
 	name: e ?? "",
 	initials: e ?? "",
 	size: 28,
 	textClassName: i,
-	className: t(F.avatar, r)
-})), L = h(({ profile: e, alt: t }) => {
-	let r = e.isFallbackShown || !e.imageUrl;
-	return /* @__PURE__ */ C(n, {
+	className: t(K.avatar, r)
+})), J = v(({ profile: e, alt: t, size: r = 28 }) => {
+	let i = e.isFallbackShown || !e.imageUrl;
+	return /* @__PURE__ */ E(n, {
 		name: e.displayName,
 		initials: e.shortName ?? "",
-		src: r ? void 0 : e.imageUrl,
-		alt: r ? "" : t,
-		size: 28,
+		src: i ? void 0 : e.imageUrl,
+		alt: i ? "" : t,
+		size: r,
 		textClassName: "dial-tiny-text",
-		className: F.avatar,
+		className: K.avatar,
 		onImageError: e.onImageError
 	});
-}), R = {
-	wrapper: "_wrapper_17aqp_1",
-	trigger: "_trigger_17aqp_5",
-	identityText: "_identityText_17aqp_18",
-	menuLabel: "_menuLabel_17aqp_22"
-}, z = h(({ profile: n, labels: r, groups: u, onLogout: d, onSettings: p, isTooltipHidden: m, styles: h }) => {
-	let { colors: g, typography: _, className: v, cssVars: y } = h ?? {}, x = _?.fontClassName ?? "dial-small-text", S = b(() => e({
-		"--np-avatar-bg": g?.avatarBackground,
-		"--np-avatar-text": g?.avatarText,
-		"--np-menu-text": g?.text,
-		"--np-trigger-hover-bg": g?.triggerHoverBackground,
-		"--np-font-family": _?.fontFamily
-	}), [g, _?.fontFamily]), T = b(() => t(R.menuLabel, x), [x]), E = b(() => {
-		let e = (u ?? []).filter(({ options: e }) => e.length > 0).map(({ id: e, label: t, icon: n, options: r }) => ({
+}), Y = {
+	wrapper: "_wrapper_11e9t_1",
+	trigger: "_trigger_11e9t_5",
+	triggerOpen: "_triggerOpen_11e9t_18",
+	identityText: "_identityText_11e9t_22",
+	menuLabel: "_menuLabel_11e9t_26"
+}, oe = v(({ profile: n, labels: r, groups: l, onLogout: d, onSettings: f, triggerVariant: p = G.Avatar, isTooltipHidden: h, styles: g }) => {
+	let { colors: _, typography: v, className: y, cssVars: b } = g ?? {}, [x, S] = ee(!1), w = p === G.Profile, O = p === G.Compact, A = w || O, j = v?.fontClassName ?? "dial-small-text", P = C(() => e({
+		"--np-avatar-bg": _?.avatarBackground,
+		"--np-avatar-text": _?.avatarText,
+		"--np-menu-text": _?.text,
+		"--np-trigger-hover-bg": _?.triggerHoverBackground,
+		"--np-trigger-open-bg": _?.triggerOpenBackground,
+		"--np-font-family": v?.fontFamily
+	}), [_, v?.fontFamily]), F = C(() => t(Y.menuLabel, j), [j]), I = C(() => {
+		let e = (l ?? []).filter(({ options: e }) => e.length > 0).map(({ id: e, label: t, icon: n, options: r }) => ({
 			key: e,
-			label: /* @__PURE__ */ C("span", {
-				className: T,
+			label: /* @__PURE__ */ E("span", {
+				className: F,
 				children: t
 			}),
 			icon: n,
 			children: r.map((e) => ({
 				key: e.id,
-				label: /* @__PURE__ */ C("span", {
-					className: T,
+				label: /* @__PURE__ */ E("span", {
+					className: F,
 					children: e.label
 				}),
 				icon: e.icon,
-				mark: f.Check,
+				mark: m.Check,
 				checked: e.isActive,
 				onClick: e.onSelect
 			}))
@@ -162,11 +331,11 @@ var j = {
 			{
 				key: "identity",
 				type: c.PlainText,
-				label: /* @__PURE__ */ w("div", {
+				label: /* @__PURE__ */ D("div", {
 					className: "flex h-[40px] min-w-0 items-center gap-3",
-					children: [/* @__PURE__ */ C(I, { shortName: n.shortName }), /* @__PURE__ */ C(l, {
+					children: [/* @__PURE__ */ E(q, { shortName: n.shortName }), /* @__PURE__ */ E(u, {
 						text: n.displayName,
-						className: t(R.identityText, x, "min-w-0 flex-1 truncate")
+						className: t(Y.identityText, j, "min-w-0 flex-1 truncate")
 					})]
 				})
 			},
@@ -175,26 +344,26 @@ var j = {
 				key: "divider-1",
 				type: c.Divider
 			},
-			...p ? [{
+			...f ? [{
 				key: "settings",
-				label: /* @__PURE__ */ C("span", {
-					className: T,
+				label: /* @__PURE__ */ E("span", {
+					className: F,
 					children: r.settings
 				}),
-				icon: /* @__PURE__ */ C(O, {
+				icon: /* @__PURE__ */ E(N, {
 					size: a.SM,
 					"aria-hidden": !0,
 					stroke: o
 				}),
-				onClick: p
+				onClick: f
 			}] : [],
 			{
 				key: "logout",
-				label: /* @__PURE__ */ C("span", {
-					className: T,
+				label: /* @__PURE__ */ E("span", {
+					className: F,
 					children: r.logOut
 				}),
-				icon: /* @__PURE__ */ C(D, {
+				icon: /* @__PURE__ */ E(M, {
 					size: a.SM,
 					"aria-hidden": !0,
 					stroke: o
@@ -203,52 +372,82 @@ var j = {
 			}
 		];
 	}, [
-		u,
-		x,
-		T,
+		l,
+		j,
+		F,
 		r.logOut,
 		r.settings,
 		d,
-		p,
+		f,
 		n.displayName,
 		n.shortName
-	]);
-	return /* @__PURE__ */ C("div", {
+	]), L = () => {
+		if (!w) return /* @__PURE__ */ E(i, {
+			"aria-label": r.trigger,
+			tooltipProps: {
+				tooltip: n.email,
+				hideTooltip: h
+			},
+			iconBefore: /* @__PURE__ */ E(J, {
+				profile: n,
+				alt: r.avatarAlt,
+				size: O ? 24 : void 0
+			}),
+			className: t(O ? "!size-10 !min-h-0 !min-w-0 gap-0 !rounded-full !border-0 !p-2" : "size-[44px] gap-0 !rounded-full p-0", Y.trigger, O && x && Y.triggerOpen)
+		});
+		let e = x ? te : k;
+		return /* @__PURE__ */ E(i, {
+			tooltipProps: {
+				tooltip: n.email,
+				hideTooltip: h
+			},
+			iconBefore: /* @__PURE__ */ E(J, {
+				profile: n,
+				alt: "",
+				size: 24
+			}),
+			label: /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(u, {
+				text: n.displayName,
+				className: t(Y.identityText, j, "min-w-0 truncate")
+			}), /* @__PURE__ */ E("span", {
+				className: "sr-only",
+				children: r.trigger
+			})] }),
+			iconAfter: /* @__PURE__ */ E(e, {
+				size: a.SM,
+				stroke: o,
+				"aria-hidden": !0
+			}),
+			textClassName: "min-w-0",
+			className: t("!h-10 !min-h-0 max-w-full !min-w-0 gap-2 !rounded-full !border-0 !p-2", Y.trigger, x && Y.triggerOpen)
+		});
+	};
+	return /* @__PURE__ */ E("div", {
 		style: {
-			...y,
-			...S
+			...b,
+			...P
 		},
-		className: t(R.wrapper, "flex size-[60px] items-center justify-center", v),
-		children: /* @__PURE__ */ C(s, {
-			placement: "top-end",
+		className: t(Y.wrapper, A ? "flex min-w-0 items-center" : "flex size-[60px] items-center justify-center", y),
+		children: /* @__PURE__ */ E(s, {
+			placement: A ? "top-start" : "top-end",
 			matchReferenceWidth: !1,
-			items: E,
-			children: /* @__PURE__ */ C(i, {
-				"aria-label": r.trigger,
-				tooltipProps: {
-					tooltip: n.email,
-					hideTooltip: m
-				},
-				iconBefore: /* @__PURE__ */ C(L, {
-					profile: n,
-					alt: r.avatarAlt
-				}),
-				className: t("size-[44px] gap-0 !rounded-full p-0", R.trigger)
-			})
+			items: I,
+			onOpenChange: S,
+			children: L()
 		})
 	});
-}), B = m(void 0), V = h(({ isOpen: e, onClose: t, children: n, title: r, closeLabel: i, backLabel: a, className: o, style: s }) => {
-	let [c, l] = x([]);
-	v(() => {
+}), se = _(void 0), ce = v(({ isOpen: e, onClose: t, children: n, title: r, closeLabel: i, backLabel: a, className: o, style: s }) => {
+	let [c, l] = ee([]);
+	x(() => {
 		e || l([]);
 	}, [e]);
-	let u = g((e) => {
+	let u = y((e) => {
 		l((t) => [...t, e]);
-	}, []), d = g(() => {
+	}, []), d = y(() => {
 		l((e) => e.slice(0, -1));
-	}, []), f = g(() => {
+	}, []), f = y(() => {
 		l([]), t();
-	}, [t]), p = b(() => ({
+	}, [t]), p = C(() => ({
 		push: u,
 		pop: d,
 		close: f
@@ -257,9 +456,9 @@ var j = {
 		d,
 		f
 	]), m = c[c.length - 1];
-	return /* @__PURE__ */ C(B.Provider, {
+	return /* @__PURE__ */ E(se.Provider, {
 		value: p,
-		children: /* @__PURE__ */ C(A, {
+		children: /* @__PURE__ */ E(I, {
 			isOpen: e,
 			onClose: f,
 			title: m?.title ?? r,
@@ -271,11 +470,11 @@ var j = {
 			children: m ? m.content : n
 		})
 	});
-}), H = () => {
-	let e = _(B);
+}), X = () => {
+	let e = b(se);
 	if (!e) throw Error("useSheetNavigation must be used within a NavigableBottomSheet");
 	return e;
-}, U = {
+}, Z = {
 	sheet: "_sheet_1k0ml_1",
 	row: "_row_1k0ml_12",
 	rowActive: "_rowActive_1k0ml_24",
@@ -283,79 +482,79 @@ var j = {
 	divider: "_divider_1k0ml_46",
 	mutedText: "_mutedText_1k0ml_50",
 	activeIcon: "_activeIcon_1k0ml_54"
-}, W = h(({ label: e, onClick: n, icon: r, trailing: i, isCurrent: a = !1, isHighlighted: o = !1, textClassName: s = "dial-small-text" }) => /* @__PURE__ */ C("li", { children: /* @__PURE__ */ C(d, {
+}, Q = v(({ label: e, onClick: n, icon: r, trailing: i, isCurrent: a = !1, isHighlighted: o = !1, textClassName: s = "dial-small-text" }) => /* @__PURE__ */ E("li", { children: /* @__PURE__ */ E(p, {
 	label: e,
 	labelClassName: s,
-	icon: r && /* @__PURE__ */ C("span", {
-		className: U.rowIcon,
+	icon: r && /* @__PURE__ */ E("span", {
+		className: Z.rowIcon,
 		children: r
 	}),
 	trailing: i,
-	mark: f.Highlight,
+	mark: m.Highlight,
 	selected: o,
 	"aria-current": a ? "true" : void 0,
-	className: t("h-auto gap-3 rounded-none px-4 py-[10px]", U.row, o && U.rowActive),
+	className: t("h-auto gap-3 rounded-none px-4 py-[10px]", Z.row, o && Z.rowActive),
 	onClick: n
-}) })), G = h(({ options: e, textClassName: t }) => {
-	let { pop: n } = H();
-	return /* @__PURE__ */ C("ul", {
+}) })), $ = v(({ options: e, textClassName: t }) => {
+	let { pop: n } = X();
+	return /* @__PURE__ */ E("ul", {
 		className: "flex flex-col pb-4",
-		children: e.map((e) => /* @__PURE__ */ C(W, {
+		children: e.map((e) => /* @__PURE__ */ E(Q, {
 			label: e.label,
 			icon: e.icon,
 			textClassName: t,
 			isCurrent: e.isActive,
-			trailing: e.isActive ? /* @__PURE__ */ C(T, {
+			trailing: e.isActive ? /* @__PURE__ */ E(O, {
 				size: a.SM,
 				stroke: o,
 				"aria-hidden": !0,
-				className: U.activeIcon
+				className: Z.activeIcon
 			}) : void 0,
 			onClick: () => {
 				e.onSelect(), n();
 			}
 		}, e.id))
 	});
-}), K = h(({ profile: e, logOutLabel: n, onLogout: i, settingsLabel: a, onSettings: s, groups: c, textClassName: u = "dial-small-text" }) => {
-	let { push: d, close: f } = H(), p = (c ?? []).filter(({ options: e }) => e.length > 0);
-	return /* @__PURE__ */ w(S, { children: [
-		/* @__PURE__ */ w("div", {
+}), le = v(({ profile: e, logOutLabel: n, onLogout: i, settingsLabel: a, onSettings: s, groups: c, textClassName: l = "dial-small-text" }) => {
+	let { push: d, close: f } = X(), p = (c ?? []).filter(({ options: e }) => e.length > 0);
+	return /* @__PURE__ */ D(T, { children: [
+		/* @__PURE__ */ D("div", {
 			className: "flex h-[56px] items-center gap-3 px-4 py-2",
-			children: [/* @__PURE__ */ C(L, {
+			children: [/* @__PURE__ */ E(J, {
 				profile: e,
 				alt: ""
-			}), /* @__PURE__ */ C(l, {
+			}), /* @__PURE__ */ E(u, {
 				text: e.displayName,
-				className: t(U.mutedText, u, "min-w-0 flex-1 truncate")
+				className: t(Z.mutedText, l, "min-w-0 flex-1 truncate")
 			})]
 		}),
-		p.length > 0 && /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ C("ul", {
+		p.length > 0 && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E("ul", {
 			className: "flex flex-col",
-			children: p.map((e) => /* @__PURE__ */ C(W, {
+			children: p.map((e) => /* @__PURE__ */ E(Q, {
 				label: e.label,
 				icon: e.icon,
-				textClassName: u,
-				trailing: /* @__PURE__ */ C(E, {
+				textClassName: l,
+				trailing: /* @__PURE__ */ E(A, {
 					size: r,
 					stroke: o,
 					"aria-hidden": !0,
-					className: t(U.rowIcon, "rtl:scale-x-[-1]")
+					className: t(Z.rowIcon, "rtl:scale-x-[-1]")
 				}),
 				onClick: () => d({
 					title: e.label,
-					content: /* @__PURE__ */ C(G, {
+					content: /* @__PURE__ */ E($, {
 						options: e.options,
-						textClassName: u
+						textClassName: l
 					})
 				})
 			}, e.id))
-		}), /* @__PURE__ */ C("hr", { className: U.divider })] }),
-		/* @__PURE__ */ w("ul", {
+		}), /* @__PURE__ */ E("hr", { className: Z.divider })] }),
+		/* @__PURE__ */ D("ul", {
 			className: "flex flex-col pb-4",
-			children: [s && a && /* @__PURE__ */ C(W, {
+			children: [s && a && /* @__PURE__ */ E(Q, {
 				label: a,
-				textClassName: u,
-				icon: /* @__PURE__ */ C(O, {
+				textClassName: l,
+				icon: /* @__PURE__ */ E(N, {
 					size: r,
 					stroke: o,
 					"aria-hidden": !0
@@ -363,10 +562,10 @@ var j = {
 				onClick: () => {
 					f(), s?.();
 				}
-			}), /* @__PURE__ */ C(W, {
+			}), /* @__PURE__ */ E(Q, {
 				label: n,
-				textClassName: u,
-				icon: /* @__PURE__ */ C(D, {
+				textClassName: l,
+				icon: /* @__PURE__ */ E(M, {
 					size: r,
 					stroke: o,
 					"aria-hidden": !0
@@ -377,29 +576,29 @@ var j = {
 			})]
 		})
 	] });
-}), q = h(({ items: e, onSelectItem: t, profileLabel: n, logOutLabel: i, onLogout: a, settingsLabel: s, onSettings: c, profile: l, groups: u, footer: d, textClassName: f }) => {
-	let { push: p, close: m } = H(), h = (e) => {
+}), ue = v(({ items: e, onSelectItem: t, profileLabel: n, logOutLabel: i, onLogout: a, settingsLabel: s, onSettings: c, profile: l, groups: u, footer: d, textClassName: f }) => {
+	let { push: p, close: m } = X(), h = (e) => {
 		m(), t(e);
 	};
-	return /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ w("ul", {
+	return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ D("ul", {
 		className: "flex flex-col pb-4",
 		children: [e.map((e) => {
 			let t = e.isActive && e.activeIcon || e.icon;
-			return /* @__PURE__ */ C(W, {
+			return /* @__PURE__ */ E(Q, {
 				label: e.label,
 				textClassName: f,
 				isCurrent: e.isActive,
 				isHighlighted: e.isActive,
-				icon: /* @__PURE__ */ C(t, {
+				icon: /* @__PURE__ */ E(t, {
 					size: r,
 					stroke: o
 				}),
 				onClick: () => h(e)
 			}, e.id);
-		}), l && /* @__PURE__ */ C(W, {
+		}), l && /* @__PURE__ */ E(Q, {
 			label: n,
 			textClassName: f,
-			icon: /* @__PURE__ */ C(k, {
+			icon: /* @__PURE__ */ E(P, {
 				size: r,
 				stroke: o,
 				"aria-hidden": !0
@@ -407,7 +606,7 @@ var j = {
 			onClick: () => {
 				l && p({
 					title: n,
-					content: /* @__PURE__ */ C(K, {
+					content: /* @__PURE__ */ E(le, {
 						profile: l,
 						groups: u,
 						logOutLabel: i,
@@ -420,8 +619,8 @@ var j = {
 			}
 		})]
 	}), d] });
-}), J = h(({ isOpen: n, onClose: r, items: i, onSelectItem: a, labels: o, profile: s, groups: c, onLogout: l, onSettings: u, footer: d, styles: f }) => {
-	let { colors: p, typography: m, className: h, cssVars: g } = f ?? {}, _ = b(() => e({
+}), de = v(({ isOpen: n, onClose: r, items: i, onSelectItem: a, labels: o, profile: s, groups: c, onLogout: l, onSettings: u, footer: d, styles: f }) => {
+	let { colors: p, typography: m, className: h, cssVars: g } = f ?? {}, _ = C(() => e({
 		"--np-sheet-text": p?.text,
 		"--np-sheet-item-hover": p?.itemHoverBackground,
 		"--np-sheet-item-active": p?.itemActiveBackground,
@@ -435,18 +634,18 @@ var j = {
 		"--np-menu-active-icon": p?.activeIcon,
 		"--np-font-family": m?.fontFamily
 	}), [p, m?.fontFamily]);
-	return /* @__PURE__ */ C(V, {
+	return /* @__PURE__ */ E(ce, {
 		isOpen: n,
 		onClose: r,
 		title: o.title,
 		closeLabel: o.close,
 		backLabel: o.back,
-		className: t(U.sheet, h),
+		className: t(Z.sheet, h),
 		style: {
 			...g,
 			..._
 		},
-		children: /* @__PURE__ */ C(q, {
+		children: /* @__PURE__ */ E(ue, {
 			items: i,
 			onSelectItem: a,
 			profileLabel: o.profile,
@@ -462,4 +661,4 @@ var j = {
 	});
 });
 //#endregion
-export { I as AvatarInitials, j as NAVIGATION_PANEL_CLASS, V as NavigableBottomSheet, q as NavigationMenuPage, P as NavigationPanel, J as NavigationSheet, G as OptionListPage, K as ProfilePage, W as SheetRow, L as UserAvatar, z as UserMenu, H as useSheetNavigation };
+export { q as AvatarInitials, L as NAVIGATION_PANEL_CLASS, ce as NavigableBottomSheet, ue as NavigationMenuPage, B as NavigationPanel, de as NavigationSheet, W as NavigationSidebar, V as NavigationSidebarVariant, $ as OptionListPage, le as ProfilePage, Q as SheetRow, J as UserAvatar, oe as UserMenu, G as UserMenuTriggerVariant, X as useSheetNavigation };

package/models/navigation-item.d.ts

@@ -27,4 +27,18 @@ export interface NavigationPanelItem {
  * lib never imports a routing library. Defaults to a plain `<a href>`.
  */
 export type NavigationLinkRenderer = (item: NavigationPanelItem, children: ReactNode) => ReactNode;
+/** What a host's link element must carry for `NavigationSidebar` to style it and mark the current page. */
+export interface NavigationSidebarLinkProps {
+    /** Class names that give the link the sidebar item's box, states and focus ring. */
+    className: string;
+    /** `'page'` while the item points at the page on screen. */
+    'aria-current'?: 'page';
+}
+/**
+ * Renders a `NavigationSidebar` item as the host's link element (e.g. a router
+ * `Link`), spreading `linkProps` onto it. The link itself is the item: it
+ * holds the icon and the label, so no control is nested inside it. Defaults to
+ * a plain `<a href>`.
+ */
+export type NavigationSidebarLinkRenderer = (item: NavigationPanelItem, children: ReactNode, linkProps: NavigationSidebarLinkProps) => ReactNode;
 //# sourceMappingURL=navigation-item.d.ts.map

package/models/navigation-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-item.d.ts","sourceRoot":"","sources":["../../src/models/navigation-item.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3C;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,EAAE,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAExE,6EAA6E;AAC7E,MAAM,WAAW,mBAAmB;IAClC,iFAAiF;IACjF,EAAE,EAAE,MAAM,CAAC;IACX,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,IAAI,EAAE,kBAAkB,CAAC;IACzB,6MAA6M;IAC7M,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,CACnC,IAAI,EAAE,mBAAmB,EACzB,QAAQ,EAAE,SAAS,KAChB,SAAS,CAAC"}
+{"version":3,"file":"navigation-item.d.ts","sourceRoot":"","sources":["../../src/models/navigation-item.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3C;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,EAAE,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAExE,6EAA6E;AAC7E,MAAM,WAAW,mBAAmB;IAClC,iFAAiF;IACjF,EAAE,EAAE,MAAM,CAAC;IACX,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,IAAI,EAAE,kBAAkB,CAAC;IACzB,6MAA6M;IAC7M,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yFAAyF;IACzF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,CACnC,IAAI,EAAE,mBAAmB,EACzB,QAAQ,EAAE,SAAS,KAChB,SAAS,CAAC;AAEf,2GAA2G;AAC3G,MAAM,WAAW,0BAA0B;IACzC,oFAAoF;IACpF,SAAS,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;;;;GAKG;AACH,MAAM,MAAM,6BAA6B,GAAG,CAC1C,IAAI,EAAE,mBAAmB,EACzB,QAAQ,EAAE,SAAS,EACnB,SAAS,EAAE,0BAA0B,KAClC,SAAS,CAAC"}

package/models/navigation-sidebar-props.d.ts

@@ -0,0 +1,91 @@
+import { CSSProperties, ReactNode } from 'react';
+import { NavigationSidebarVariant } from '../types/navigation-sidebar-variant';
+import { NavigationSidebarLinkRenderer, NavigationPanelItem } from './navigation-item';
+import { NavigationPanelLogo } from './navigation-panel-props';
+/** Brand mark of `NavigationSidebar`, already resolved by the host; `iconUrl` is the square mark shown while collapsed. */
+export interface NavigationSidebarLogo extends NavigationPanelLogo {
+    /** Wide logo shown while expanded and in the drawer. When omitted, `iconUrl` is shown in every state. */
+    logoUrl?: string;
+}
+/** Translated labels required by `NavigationSidebar`. */
+export interface NavigationSidebarLabels {
+    /** Accessible name for the `<nav>` landmark. */
+    ariaLabel: string;
+    /** Accessible name of the collapse toggle, the same in both states; `aria-expanded` reports the state. Defaults to `'Sidebar'`. */
+    toggle?: string;
+    /** Tooltip of the toggle while the sidebar is expanded. Defaults to `'Collapse sidebar'`. */
+    collapse?: string;
+    /** Tooltip of the toggle while the sidebar is collapsed. Defaults to `'Expand sidebar'`. */
+    expand?: string;
+    /** Accessible name and tooltip of the drawer's close button. Defaults to `'Close'`. */
+    close?: string;
+}
+/** CSS custom-property overrides for `NavigationSidebar`. */
+export interface NavigationSidebarColors {
+    /** Sidebar background. Defaults to `--bg-layer-raised`. */
+    background?: string;
+    /** Text and icon color of an inactive item. Defaults to `--text-primary`. */
+    itemText?: string;
+    /** Item background on hover and keyboard focus. Defaults to `--bg-control-accent-alpha-hover-subtle`. */
+    itemHoverBackground?: string;
+    /** Background of the active item. Defaults to `--bg-control-accent-alpha-active-subtle`. */
+    itemSelectedBackground?: string;
+    /** Icon paint of the active item; replaces the built-in gradient. Defaults to a blue-to-violet gradient. */
+    itemActiveIcon?: string;
+    /** First color of the built-in active-icon gradient. Defaults to `#1d4ed8`. */
+    itemActiveGradientStart?: string;
+    /** Last color of the built-in active-icon gradient. Defaults to `#885df2`. */
+    itemActiveGradientEnd?: string;
+    /** Keyboard focus ring color of an item. Defaults to `--stroke-focus`. */
+    focusOutline?: string;
+}
+/** Typography overrides for `NavigationSidebar`. */
+export interface NavigationSidebarTypography {
+    /** CSS class applied to item labels. Defaults to `'dial-small-text'`. */
+    fontClassName?: string;
+    /** `font-family` applied to the sidebar root. */
+    fontFamily?: string;
+}
+/** Combined style overrides for `NavigationSidebar`. */
+export interface NavigationSidebarStyles {
+    /** Color overrides applied as CSS custom properties. */
+    colors?: NavigationSidebarColors;
+    /** Typography overrides. */
+    typography?: NavigationSidebarTypography;
+    /** Extra class name(s) merged onto the `<nav>` element. */
+    className?: string;
+    /** CSS custom properties applied to the `<nav>` element. */
+    cssVars?: CSSProperties;
+}
+/** Props accepted by `NavigationSidebar`. */
+export interface NavigationSidebarProps {
+    /** Destinations rendered as rows (expanded and drawer) or icon buttons (collapsed), in display order. */
+    items: NavigationPanelItem[];
+    /** Translated labels for the landmark and the toggle. */
+    labels: NavigationSidebarLabels;
+    /** Layout of the sidebar. Defaults to `NavigationSidebarVariant.Sidebar`. */
+    variant?: NavigationSidebarVariant;
+    /** Whether the sidebar is collapsed to its icon-only width. Ignored by the drawer. Defaults to `false`. */
+    isCollapsed?: boolean;
+    /** Called when the toggle is activated. When absent no toggle renders. Not used by the drawer. */
+    onToggleCollapse?: () => void;
+    /** Whether the drawer is shown; while it is not, it is slid out of view, `inert` and `invisible`. Drawer only. Defaults to `false`. */
+    isOpen?: boolean;
+    /** Called when the drawer's close button is activated or Escape is pressed inside it. When absent the drawer renders no close button. Drawer only. */
+    onClose?: () => void;
+    /** `id` of the `<nav>`, referenced by an opener's `aria-controls`. Defaults to a generated id. */
+    id?: string;
+    /** Brand mark; omit to render no logo. */
+    logo?: NavigationSidebarLogo;
+    /** Renders each item as a host-owned link element, spreading the given link props onto it. Defaults to a plain `<a href>`. */
+    renderLink?: NavigationSidebarLinkRenderer;
+    /** Content between the items and the footer — typically the conversation list. It stays mounted but inert and hidden while collapsed. */
+    children?: ReactNode;
+    /** Pinned to the footer's inline start while expanded and below the actions while collapsed — typically `UserMenu`. */
+    userMenu?: ReactNode;
+    /** Pinned to the footer's inline end while expanded and above the user menu while collapsed. */
+    footerActions?: ReactNode;
+    /** Style overrides for colors, typography, and class names. */
+    styles?: NavigationSidebarStyles;
+}
+//# sourceMappingURL=navigation-sidebar-props.d.ts.map

package/models/navigation-sidebar-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-sidebar-props.d.ts","sourceRoot":"","sources":["../../src/models/navigation-sidebar-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,KAAK,EACV,6BAA6B,EAC7B,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAEpE,2HAA2H;AAC3H,MAAM,WAAW,qBAAsB,SAAQ,mBAAmB;IAChE,yGAAyG;IACzG,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,yDAAyD;AACzD,MAAM,WAAW,uBAAuB;IACtC,gDAAgD;IAChD,SAAS,EAAE,MAAM,CAAC;IAClB,mIAAmI;IACnI,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4FAA4F;IAC5F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uFAAuF;IACvF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,6DAA6D;AAC7D,MAAM,WAAW,uBAAuB;IACtC,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yGAAyG;IACzG,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,4FAA4F;IAC5F,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,4GAA4G;IAC5G,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+EAA+E;IAC/E,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,8EAA8E;IAC9E,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,oDAAoD;AACpD,MAAM,WAAW,2BAA2B;IAC1C,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wDAAwD;AACxD,MAAM,WAAW,uBAAuB;IACtC,wDAAwD;IACxD,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,4BAA4B;IAC5B,UAAU,CAAC,EAAE,2BAA2B,CAAC;IACzC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,6CAA6C;AAC7C,MAAM,WAAW,sBAAsB;IACrC,yGAAyG;IACzG,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,yDAAyD;IACzD,MAAM,EAAE,uBAAuB,CAAC;IAChC,6EAA6E;IAC7E,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,2GAA2G;IAC3G,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kGAAkG;IAClG,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,uIAAuI;IACvI,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sJAAsJ;IACtJ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kGAAkG;IAClG,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,8HAA8H;IAC9H,UAAU,CAAC,EAAE,6BAA6B,CAAC;IAC3C,yIAAyI;IACzI,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uHAAuH;IACvH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gGAAgG;IAChG,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,+DAA+D;IAC/D,MAAM,CAAC,EAAE,uBAAuB,CAAC;CAClC"}

package/models/user-menu-props.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+import { UserMenuTriggerVariant } from '../types/user-menu-trigger-variant';
 import { NavigationMenuGroup } from './navigation-menu';
 import { NavigationUserProfile } from './user-profile';
 /** CSS custom-property overrides for `UserMenu`. */
@@ -9,8 +10,10 @@ export interface UserMenuColors {
     avatarText?: string;
     /** Menu label text color. */
     text?: string;
-    /** Trigger background on hover. */
+    /** Trigger background on hover and keyboard focus. */
     triggerHoverBackground?: string;
+    /** Background of the `Profile` and `Compact` triggers while the menu is open. Defaults to `--bg-control-accent-alpha-active-subtle`. */
+    triggerOpenBackground?: string;
 }
 /** Typography overrides for `UserMenu`. */
 export interface UserMenuTypography {
@@ -53,6 +56,8 @@ export interface UserMenuProps {
     onLogout: () => void;
     /** When provided, renders a Settings entry that invokes this callback. */
     onSettings?: () => void;
+    /** Presentation of the trigger. Defaults to `UserMenuTriggerVariant.Avatar`. */
+    triggerVariant?: UserMenuTriggerVariant;
     /** Hides the avatar tooltip — set on touch layouts where hover never fires. */
     isTooltipHidden?: boolean;
     /** Style overrides for colors, typography, and class names. */

package/models/user-menu-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-menu-props.d.ts","sourceRoot":"","sources":["../../src/models/user-menu-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAE5D,oDAAoD;AACpD,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,2CAA2C;AAC3C,MAAM,WAAW,kBAAkB;IACjC,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,+CAA+C;AAC/C,MAAM,WAAW,cAAc;IAC7B,wDAAwD;IACxD,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,mDAAmD;IACnD,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,gDAAgD;AAChD,MAAM,WAAW,cAAc;IAC7B,2EAA2E;IAC3E,OAAO,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,oCAAoC;AACpC,MAAM,WAAW,aAAa;IAC5B,mEAAmE;IACnE,OAAO,EAAE,qBAAqB,CAAC;IAC/B,oEAAoE;IACpE,MAAM,EAAE,cAAc,CAAC;IACvB,oFAAoF;IACpF,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,iFAAiF;IACjF,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,+EAA+E;IAC/E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+DAA+D;IAC/D,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB"}
+{"version":3,"file":"user-menu-props.d.ts","sourceRoot":"","sources":["../../src/models/user-menu-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AACjF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAE5D,oDAAoD;AACpD,MAAM,WAAW,cAAc;IAC7B,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wIAAwI;IACxI,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,2CAA2C;AAC3C,MAAM,WAAW,kBAAkB;IACjC,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,+CAA+C;AAC/C,MAAM,WAAW,cAAc;IAC7B,wDAAwD;IACxD,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,mDAAmD;IACnD,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,gDAAgD;AAChD,MAAM,WAAW,cAAc;IAC7B,2EAA2E;IAC3E,OAAO,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,oCAAoC;AACpC,MAAM,WAAW,aAAa;IAC5B,mEAAmE;IACnE,OAAO,EAAE,qBAAqB,CAAC;IAC/B,oEAAoE;IACpE,MAAM,EAAE,cAAc,CAAC;IACvB,oFAAoF;IACpF,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,iFAAiF;IACjF,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,gFAAgF;IAChF,cAAc,CAAC,EAAE,sBAAsB,CAAC;IACxC,+EAA+E;IAC/E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+DAA+D;IAC/D,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@epam/ai-dial-navigation-panel",
   "description": "Primary application navigation — desktop nav rail, user menu, and mobile navigation bottom sheet",
-  "version": "1.3.0-dev.108",
+  "version": "1.3.0-dev.110",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -18,11 +18,11 @@
   },
   "dependencies": {
     "@tabler/icons-react": "^3.44.0",
-    "@epam/ai-dial-conversation-input": "1.3.0-dev.108"
+    "@epam/ai-dial-conversation-input": "1.3.0-dev.110"
   },
   "peerDependencies": {
     "react": "^19.2.8",
-    "@epam/ai-dial-chat-shared": "1.3.0-dev.108",
+    "@epam/ai-dial-chat-shared": "1.3.0-dev.110",
     "@epam/ai-dial-ui-kit": "^0.16.0-dev.20"
   },
   "repository": {

package/types/navigation-sidebar-variant.d.ts

@@ -0,0 +1,8 @@
+/** How `NavigationSidebar` is laid out. */
+export declare enum NavigationSidebarVariant {
+    /** A persistent column, 336px expanded or 72px collapsed, with a collapse toggle in its header. */
+    Sidebar = "sidebar",
+    /** A 320px panel the host slides over the content, with a close button in its header instead of the toggle. */
+    Drawer = "drawer"
+}
+//# sourceMappingURL=navigation-sidebar-variant.d.ts.map

package/types/navigation-sidebar-variant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-sidebar-variant.d.ts","sourceRoot":"","sources":["../../src/types/navigation-sidebar-variant.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,oBAAY,wBAAwB;IAClC,mGAAmG;IACnG,OAAO,YAAY;IACnB,+GAA+G;IAC/G,MAAM,WAAW;CAClB"}

package/types/user-menu-trigger-variant.d.ts

@@ -0,0 +1,10 @@
+/** How `UserMenu` presents its trigger. */
+export declare enum UserMenuTriggerVariant {
+    /** Avatar only, centred in a 60px square — the rail's footer. */
+    Avatar = "avatar",
+    /** Avatar, display name and a chevron in one pill — the expanded sidebar's footer. */
+    Profile = "profile",
+    /** Avatar only, in a 40px pill that opens the menu at the start edge — the collapsed sidebar's footer. */
+    Compact = "compact"
+}
+//# sourceMappingURL=user-menu-trigger-variant.d.ts.map

package/types/user-menu-trigger-variant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-menu-trigger-variant.d.ts","sourceRoot":"","sources":["../../src/types/user-menu-trigger-variant.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,oBAAY,sBAAsB;IAChC,iEAAiE;IACjE,MAAM,WAAW;IACjB,sFAAsF;IACtF,OAAO,YAAY;IACnB,0GAA0G;IAC1G,OAAO,YAAY;CACpB"}