npm - @epam/ai-dial-navigation-panel - Versions diffs - 1.3.0-dev.16 → 1.3.0-dev.161 - Mend

@epam/ai-dial-navigation-panel 1.3.0-dev.16 → 1.3.0-dev.161

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/components/NavigationSidebar/NavigationSidebar.d.ts +5 -0
package/components/NavigationSidebar/NavigationSidebar.d.ts.map +1 -0
package/components/UserMenu/UserMenu.d.ts +2 -2
package/components/UserMenu/UserMenu.d.ts.map +1 -1
package/components/common/ItemGradients.d.ts +13 -0
package/components/common/ItemGradients.d.ts.map +1 -0
package/components/common/UserAvatar.d.ts +2 -0
package/components/common/UserAvatar.d.ts.map +1 -1
package/constants/public-class-names.d.ts +6 -0
package/constants/public-class-names.d.ts.map +1 -1
package/index.css +3 -2
package/index.d.ts +5 -1
package/index.d.ts.map +1 -1
package/index.js +363 -163
package/models/navigation-item.d.ts +14 -0
package/models/navigation-item.d.ts.map +1 -1
package/models/navigation-sidebar-props.d.ts +91 -0
package/models/navigation-sidebar-props.d.ts.map +1 -0
package/models/user-menu-props.d.ts +6 -1
package/models/user-menu-props.d.ts.map +1 -1
package/package.json +4 -4
package/types/navigation-sidebar-variant.d.ts +8 -0
package/types/navigation-sidebar-variant.d.ts.map +1 -0
package/types/user-menu-trigger-variant.d.ts +10 -0
package/types/user-menu-trigger-variant.d.ts.map +1 -0

package/components/NavigationSidebar/NavigationSidebar.d.ts ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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,CA6NtC,CAAC"}

package/components/common/ItemGradients.d.ts ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;;IAEnE,wCAAwC;;IAExC,8EAA8E;;IAE9E,yCAAyC;;CAEjC,CAAC"}

package/index.css CHANGED Viewed

@@ -1,2 +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))}
-/*$vite$:1*/.absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.flex{display:flex}.contents{display:contents}.size-0{height:0;width:0}.size-\[44px\]{height:44px;width:44px}.size-\[60px\]{height:60px;width:60px}.h-16{height:4rem}.h-6{height:1.5rem}.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 1 0%}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.\!rounded-full{border-radius:9999px!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-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-\[10px\]{padding-bottom:10px;padding-top:10px}.pb-4{padding-bottom:1rem}.shadow-sm{--tw-shadow:0 8px 10px 0 var(--shadow-sm,#2764d914);--tw-shadow-colored:0 8px 10px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid;outline-width:1px}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.rtl\:scale-x-\[-1\]:where([dir=rtl],[dir=rtl] *){--tw-scale-x:-1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
+._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-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{flex-shrink: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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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,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 CHANGED Viewed

@@ -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 ee, useMemo as S, useRef as C, useState as w } 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 ne, IconSettings as M, IconUser as N, IconX as P } from "@tabler/icons-react";
+import { BottomSheetShell as F } from "@epam/ai-dial-conversation-input";
 //#region src/constants/public-class-names.ts
-var j = {
+var I = {
 	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"
+}, L = {
 	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", {
+}, R = (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
+}), z = v(({ items: n, labels: r, logo: i, footer: s, renderLink: c = R, styles: l }) => {
+	let { colors: u, typography: d, className: p, cssVars: m } = l ?? {}, h = ee().replace(/[^\w-]/g, ""), _ = `np-hover-gradient-${h}`, v = `np-active-gradient-${h}`, y = S(() => 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(L.rail, "relative z-10 flex h-full w-[60px] flex-col justify-between shadow-sm", d?.fontClassName, p, I.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, {
+						let n = !!e.isActive && !!e.activeIcon, r = n && e.activeIcon || e.icon;
+						return /* @__PURE__ */ E(g, { children: c(e, /* @__PURE__ */ E(f, {
+							icon: /* @__PURE__ */ E(r, {
 								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(L.item, "rounded-xl", e.isActive && L.itemActive, n && L.itemFilled, e.isActive && !n && L.itemFilledOutline, I.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, {
+}), B = /* @__PURE__ */ function(e) {
+	return e.Sidebar = "sidebar", e.Drawer = "drawer", e;
+}({}), V = {
+	stopStart: "_stopStart_8i550_1",
+	stopEnd: "_stopEnd_8i550_5"
+}, re = ({ 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: V.stopStart
+		}), /* @__PURE__ */ E("stop", {
+			offset: "1",
+			className: V.stopEnd
+		})]
+	}) })
+}), H = {
+	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"
+}, ie = (e, t, n) => /* @__PURE__ */ E("a", {
+	href: e.href,
+	...n,
+	children: t
+}), ae = (e, t) => e ? "w-[320px] max-w-full" : t ? "w-[72px]" : "w-[336px]", oe = (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(H.sidebarColumn, "relative z-10 flex h-full shrink-0 flex-col overflow-hidden shadow-sm"), U = v(({ items: n, labels: r, variant: i = B.Sidebar, isCollapsed: s = !1, onToggleCollapse: c, isOpen: u = !1, onClose: f, id: p, logo: m, renderLink: _ = ie, children: v, userMenu: y, footerActions: b, styles: w }) => {
+	let { colors: O, typography: k, className: A, cssVars: te } = w ?? {}, ne = k?.fontClassName ?? "dial-small-text", M = i === B.Drawer, N = !M && s, F = ee(), L = p ?? F, R = `np-sidebar-gradient-${F.replace(/[^\w-]/g, "")}`, z = C(null), V = C(null), U = C(u);
+	x(() => {
+		let e = U.current;
+		U.current = u, M && (u && !e ? (V.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, z.current?.focus()) : !u && e && (V.current?.focus(), V.current = null));
+	}, [M, u]);
+	let W = (e) => {
+		e.currentTarget.contains(e.target) && e.key === "Escape" && f?.();
+	}, G = S(() => 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(#${R})`,
+		"--np-sidebar-font-family": k?.fontFamily
+	}), [
+		O,
+		k?.fontFamily,
+		R
+	]), K = N ? r.expand ?? "Expand sidebar" : r.collapse ?? "Collapse sidebar", q = r.toggle ?? "Sidebar", J = r.close ?? "Close", Y = (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: [N && m && Y(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]", N && m && "opacity-0 group-hover/toggle:opacity-100 group-focus-visible/toggle:opacity-100"),
+				"aria-hidden": !0
+			})]
+		}),
+		size: l.Large,
+		"aria-label": q,
+		"aria-expanded": !N,
+		"aria-controls": L,
+		tooltipProps: { tooltip: K },
+		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(P, {
+			size: a.LG,
+			stroke: o,
+			"aria-hidden": !0
+		}),
+		size: l.Large,
+		"aria-label": J,
+		tooltipProps: { tooltip: J },
+		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", !M && "ps-2"),
+		children: Y(N ? m.iconUrl : m.logoUrl ?? m.iconUrl, N ? "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: [!(N && c) && X(), c && se()] }), $ = (e) => {
+		let n = !!e.isActive && !!e.activeIcon, r = n && e.activeIcon || e.icon, i = /* @__PURE__ */ E("span", {
+			className: t("flex size-6 shrink-0 items-center justify-center", H.itemIcon),
+			children: /* @__PURE__ */ E(r, {
+				size: a.LG,
+				stroke: o
+			})
+		}), s = _(e, /* @__PURE__ */ D(T, { children: [i, /* @__PURE__ */ E("span", {
+			className: N ? "sr-only" : ne,
+			children: e.label
+		})] }), {
+			className: t("flex items-center rounded-full p-2 no-underline", N ? "size-10 justify-center" : "h-10 w-full gap-2", H.item, e.isActive && H.itemActive, n && H.itemFilled, e.isActive && !n && H.itemFilledOutline, I.sidebarItem),
+			"aria-current": e.isActive ? "page" : void 0
+		});
+		return /* @__PURE__ */ E("li", { children: N ? /* @__PURE__ */ E(h, {
+			tooltip: e.label,
+			asChild: !0,
+			children: s
+		}) : s }, e.id);
+	}, le = N ? /* @__PURE__ */ D(g, { children: [b, y] }) : /* @__PURE__ */ D(g, { children: [y, b] });
+	return /* @__PURE__ */ D("nav", {
+		ref: z,
+		id: L,
+		"aria-label": r.ariaLabel,
+		tabIndex: M ? -1 : void 0,
+		inert: M && !u,
+		onKeyDown: M ? W : void 0,
+		style: {
+			...te,
+			...G
+		},
+		className: t(H.sidebar, oe(M, u), ae(M, N), A, I.sidebar),
+		children: [
+			!O?.itemActiveIcon && /* @__PURE__ */ E(re, { activeGradientId: R }),
+			M ? /* @__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: N,
+				className: t("min-h-0 flex-1 overflow-hidden", N && "invisible"),
+				children: /* @__PURE__ */ E("div", {
+					className: t("flex h-full flex-col", M ? "w-full" : "w-[336px]"),
+					children: v
+				})
+			}),
+			/* @__PURE__ */ E("div", {
+				className: t("flex shrink-0 px-4 py-3 shadow-lg", H.footer, N ? "flex-col items-start gap-2" : "items-center justify-between gap-2", I.sidebarFooter),
+				children: le
+			})
+		]
+	});
+}), W = /* @__PURE__ */ function(e) {
+	return e.Avatar = "avatar", e.Profile = "profile", e.Compact = "compact", e;
+}({}), G = { avatar: "_avatar_4hc9t_4" }, K = 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(G.avatar, r)
+})), q = 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: G.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 }) => ({
+}), J = {
+	wrapper: "_wrapper_11e9t_1",
+	trigger: "_trigger_11e9t_5",
+	triggerOpen: "_triggerOpen_11e9t_18",
+	identityText: "_identityText_11e9t_22",
+	menuLabel: "_menuLabel_11e9t_26"
+}, Y = v(({ profile: n, labels: r, groups: l, onLogout: d, onSettings: f, triggerVariant: p = W.Avatar, isTooltipHidden: h, styles: g }) => {
+	let { colors: _, typography: v, className: y, cssVars: b } = g ?? {}, [x, ee] = w(!1), C = p === W.Profile, O = p === W.Compact, A = C || O, j = v?.fontClassName ?? "dial-small-text", N = S(() => 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]), P = S(() => t(J.menuLabel, j), [j]), F = S(() => {
+		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: P,
 				children: t
 			}),
 			icon: n,
 			children: r.map((e) => ({
 				key: e.id,
-				label: /* @__PURE__ */ C("span", {
-					className: T,
+				label: /* @__PURE__ */ E("span", {
+					className: P,
 					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(K, { shortName: n.shortName }), /* @__PURE__ */ E(u, {
 						text: n.displayName,
-						className: t(R.identityText, x, "min-w-0 flex-1 truncate")
+						className: t(J.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: P,
 					children: r.settings
 				}),
-				icon: /* @__PURE__ */ C(O, {
+				icon: /* @__PURE__ */ E(M, {
 					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: P,
 					children: r.logOut
 				}),
-				icon: /* @__PURE__ */ C(D, {
+				icon: /* @__PURE__ */ E(ne, {
 					size: a.SM,
 					"aria-hidden": !0,
 					stroke: o
@@ -203,52 +372,83 @@ var j = {
 			}
 		];
 	}, [
-		u,
-		x,
-		T,
+		l,
+		j,
+		P,
 		r.logOut,
 		r.settings,
 		d,
-		p,
+		f,
 		n.displayName,
 		n.shortName
-	]);
-	return /* @__PURE__ */ C("div", {
+	]), I = () => {
+		if (!C) return /* @__PURE__ */ E(i, {
+			"aria-label": r.trigger,
+			tooltipProps: {
+				tooltip: n.email,
+				hideTooltip: h
+			},
+			iconBefore: /* @__PURE__ */ E(q, {
+				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", J.trigger, O && x && J.triggerOpen)
+		});
+		let e = x ? te : k;
+		return /* @__PURE__ */ E(i, {
+			tooltipProps: {
+				tooltip: n.email,
+				hideTooltip: h
+			},
+			iconBefore: /* @__PURE__ */ E(q, {
+				profile: n,
+				alt: "",
+				size: 24
+			}),
+			label: /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(u, {
+				text: n.displayName,
+				className: t(J.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", J.trigger, x && J.triggerOpen)
+		});
+	};
+	return /* @__PURE__ */ E("div", {
 		style: {
-			...y,
-			...S
+			...b,
+			...N
 		},
-		className: t(R.wrapper, "flex size-[60px] items-center justify-center", v),
-		children: /* @__PURE__ */ C(s, {
-			placement: "top-end",
+		className: t(J.wrapper, A ? "flex min-w-0 items-center" : "flex size-[60px] items-center justify-center", C && "flex-1", y),
+		children: /* @__PURE__ */ E(s, {
+			className: A ? "max-w-full min-w-0" : void 0,
+			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: F,
+			onOpenChange: ee,
+			children: I()
 		})
 	});
-}), 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] = w([]);
+	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 = S(() => ({
 		push: u,
 		pop: d,
 		close: f
@@ -257,9 +457,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(F, {
 			isOpen: e,
 			onClose: f,
 			title: m?.title ?? r,
@@ -271,11 +471,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 +483,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(q, {
 				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(M, {
 					size: r,
 					stroke: o,
 					"aria-hidden": !0
@@ -363,10 +563,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(ne, {
 					size: r,
 					stroke: o,
 					"aria-hidden": !0
@@ -377,29 +577,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(N, {
 				size: r,
 				stroke: o,
 				"aria-hidden": !0
@@ -407,7 +607,7 @@ var j = {
 			onClick: () => {
 				l && p({
 					title: n,
-					content: /* @__PURE__ */ C(K, {
+					content: /* @__PURE__ */ E(le, {
 						profile: l,
 						groups: u,
 						logOutLabel: i,
@@ -420,8 +620,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 ?? {}, _ = S(() => e({
 		"--np-sheet-text": p?.text,
 		"--np-sheet-item-hover": p?.itemHoverBackground,
 		"--np-sheet-item-active": p?.itemActiveBackground,
@@ -435,18 +635,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 +662,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 { K as AvatarInitials, I as NAVIGATION_PANEL_CLASS, ce as NavigableBottomSheet, ue as NavigationMenuPage, z as NavigationPanel, de as NavigationSheet, U as NavigationSidebar, B as NavigationSidebarVariant, $ as OptionListPage, le as ProfilePage, Q as SheetRow, q as UserAvatar, Y as UserMenu, W as UserMenuTriggerVariant, X as useSheetNavigation };

package/models/navigation-item.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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,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 CHANGED Viewed

@@ -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.16",
+  "version": "1.3.0-dev.161",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./index.js",
@@ -18,12 +18,12 @@
   },
   "dependencies": {
     "@tabler/icons-react": "^3.44.0",
-    "@epam/ai-dial-conversation-input": "1.3.0-dev.16"
+    "@epam/ai-dial-conversation-input": "1.3.0-dev.161"
   },
   "peerDependencies": {
     "react": "^19.2.8",
-    "@epam/ai-dial-chat-shared": "1.3.0-dev.16",
-    "@epam/ai-dial-ui-kit": "^0.15.1"
+    "@epam/ai-dial-chat-shared": "1.3.0-dev.161",
+    "@epam/ai-dial-ui-kit": "^0.16.0-dev.33"
   },
   "repository": {
     "type": "git",

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

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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"}