@dbcdk/react-components 0.0.211 → 0.0.212

package/dist/components/forms/typeahead/Typeahead.js

@@ -8,6 +8,23 @@ import { Menu } from '../../../components/menu/Menu';
 import { Popover } from '../../../components/popover/Popover';
 import styles from './Typeahead.module.css';
 
+function orderByGroup(options) {
+  if (!options.some((option) => option.group)) return options;
+  const groups = /* @__PURE__ */ new Map();
+  for (const option of options) {
+    const group = option.group || void 0;
+    const entries = groups.get(group);
+    if (entries) entries.push(option);
+    else groups.set(group, [option]);
+  }
+  return Array.from(groups.values()).flat();
+}
+function findEnabledIndex(items, start, step) {
+  for (let index = start; index >= 0 && index < items.length; index += step) {
+    if (!items[index].disabled) return index;
+  }
+  return -1;
+}
 function parseLengthToPx(value, referenceFontSize = 16) {
   if (!value) return 0;
   const trimmed = value.trim();
@@ -173,16 +190,25 @@ function Typeahead({
       filteredOptions = options;
     } else {
       filteredOptions = options.filter(
-        (option) => option.label.toLocaleLowerCase().includes(normalizedQuery)
+        (option) => {
+          var _a2, _b, _c, _d;
+          return option.label.toLocaleLowerCase().includes(normalizedQuery) || ((_b = (_a2 = option.description) == null ? void 0 : _a2.toLocaleLowerCase().includes(normalizedQuery)) != null ? _b : false) || ((_d = (_c = option.group) == null ? void 0 : _c.toLocaleLowerCase().includes(normalizedQuery)) != null ? _d : false);
+        }
       );
     }
   }
+  filteredOptions = orderByGroup(filteredOptions);
   if (typeof maxVisibleOptions === "number" && Number.isFinite(maxVisibleOptions)) {
     filteredOptions = filteredOptions.slice(0, Math.max(0, maxVisibleOptions));
   }
+  const groupStarts = /* @__PURE__ */ new Map();
+  filteredOptions.forEach((option, index) => {
+    if (option.group && !groupStarts.has(option.group)) groupStarts.set(option.group, index);
+  });
   const commitSelection = React.useCallback(
     (option) => {
       var _a2, _b;
+      if (option == null ? void 0 : option.disabled) return;
       locallyClearedRef.current = false;
       setHideSelectedHighlight(false);
       if (mode === "multi") {
@@ -310,24 +336,21 @@ function Typeahead({
   }, [selectedOption, selectedSingleText, mode]);
   const getSelectedIndex = React.useCallback(
     (items) => {
-      if (items.length === 0) return -1;
-      if (locallyClearedRef.current) return 0;
-      if (mode === "multi") {
-        if (!Array.isArray(selectedValue) || selectedValue.length === 0) return 0;
-        const firstSelectedIndex = items.findIndex((option) => selectedValue.includes(option.value));
-        return firstSelectedIndex >= 0 ? firstSelectedIndex : 0;
-      }
-      const singleSelectedIndex = items.findIndex((option) => option.value === selectedValue);
-      return singleSelectedIndex >= 0 ? singleSelectedIndex : 0;
+      const firstEnabled = findEnabledIndex(items, 0, 1);
+      if (firstEnabled < 0 || locallyClearedRef.current) return firstEnabled;
+      const selectedIndex = items.findIndex(
+        (option) => !option.disabled && (mode === "multi" ? Array.isArray(selectedValue) && selectedValue.includes(option.value) : option.value === selectedValue)
+      );
+      return selectedIndex >= 0 ? selectedIndex : firstEnabled;
     },
     [mode, selectedValue]
   );
   useEffect(() => {
     setActiveIndex((current) => {
-      if (filteredOptions.length === 0) return -1;
-      if (locallyClearedRef.current) return 0;
-      if (current < 0) return getSelectedIndex(filteredOptions);
-      return Math.min(current, filteredOptions.length - 1);
+      if (locallyClearedRef.current || current < 0 || !filteredOptions[current] || filteredOptions[current].disabled) {
+        return getSelectedIndex(filteredOptions);
+      }
+      return current;
     });
   }, [filteredOptions, getSelectedIndex]);
   useEffect(() => {
@@ -428,7 +451,14 @@ function Typeahead({
     }
     const exactLabelMatch = options.find((option) => option.label === inputValue);
     if (exactLabelMatch) {
-      commitSelection(exactLabelMatch);
+      if (exactLabelMatch.disabled) {
+        setInputValue(selectedSingleText);
+        setQuery("");
+        setOpen(false);
+        setActiveIndex(-1);
+      } else {
+        commitSelection(exactLabelMatch);
+      }
       return;
     }
     if (allowCustomValue) {
@@ -460,7 +490,7 @@ function Typeahead({
     if (justClearedRef.current) return;
     setQuery("");
     setOpen(true);
-    setActiveIndex(getSelectedIndex(options));
+    setActiveIndex(getSelectedIndex(orderByGroup(options)));
   }, [getSelectedIndex, options]);
   const openWithCurrentFilter = React.useCallback(() => {
     if (justClearedRef.current) return;
@@ -502,7 +532,7 @@ function Typeahead({
       if (isAlreadyFocused && mode === "single" && selectedOption && !locallyClearedRef.current) {
         prepareSingleSearchInput();
         setOpen(true);
-        setActiveIndex(getSelectedIndex(options));
+        setActiveIndex(getSelectedIndex(orderByGroup(options)));
       } else if (isAlreadyFocused && !open) {
         setOpen(true);
         setActiveIndex(getSelectedIndex(filteredOptions));
@@ -549,7 +579,8 @@ function Typeahead({
         setActiveIndex((index) => {
           if (filteredOptions.length === 0) return -1;
           if (index < 0) return getSelectedIndex(filteredOptions);
-          return Math.min(index + 1, filteredOptions.length - 1);
+          const next = findEnabledIndex(filteredOptions, index + 1, 1);
+          return next >= 0 ? next : index;
         });
         return;
       case "ArrowUp":
@@ -559,20 +590,23 @@ function Typeahead({
           return;
         }
         setActiveIndex((index) => {
-          if (filteredOptions.length === 0) return -1;
-          if (index < 0) return filteredOptions.length - 1;
-          return Math.max(index - 1, 0);
+          const next = findEnabledIndex(
+            filteredOptions,
+            index < 0 ? filteredOptions.length - 1 : index - 1,
+            -1
+          );
+          return next >= 0 ? next : index;
         });
         return;
       case "Home":
         if (!open || filteredOptions.length === 0) return;
         e.preventDefault();
-        setActiveIndex(0);
+        setActiveIndex(findEnabledIndex(filteredOptions, 0, 1));
         return;
       case "End":
         if (!open || filteredOptions.length === 0) return;
         e.preventDefault();
-        setActiveIndex(filteredOptions.length - 1);
+        setActiveIndex(findEnabledIndex(filteredOptions, filteredOptions.length - 1, -1));
         return;
       case "Enter":
         if (!open) return;
@@ -626,7 +660,7 @@ function Typeahead({
               if (nextOpen) {
                 if (mode === "single" && selectedOption && !locallyClearedRef.current) {
                   setQuery("");
-                  setActiveIndex(getSelectedIndex(options));
+                  setActiveIndex(getSelectedIndex(orderByGroup(options)));
                 } else {
                   setActiveIndex(getSelectedIndex(filteredOptions));
                 }
@@ -744,41 +778,74 @@ function Typeahead({
               const isActive = index === activeIndex;
               const isSelected = mode === "multi" ? Array.isArray(selectedValue) && selectedValue.includes(option.value) : option.value === selectedValue && !hideSelectedHighlight;
               const optionId = `${listboxId}-option-${index}`;
-              return mode === "multi" ? /* @__PURE__ */ jsx(
+              const groupId = option.group ? `${listboxId}-group-${groupStarts.get(option.group)}` : void 0;
+              const startsGroup = !!option.group && groupStarts.get(option.group) === index;
+              const descriptionId = option.description ? `${optionId}-description` : void 0;
+              const describedBy = [groupId, descriptionId].filter(Boolean).join(" ") || void 0;
+              const labelContent = /* @__PURE__ */ jsxs("span", { className: styles.optionText, children: [
+                /* @__PURE__ */ jsx("span", { children: option.label }),
+                option.description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: styles.description, children: option.description })
+              ] });
+              const item = mode === "multi" ? /* @__PURE__ */ jsx(
                 Menu.CheckItem,
                 {
                   checked: isSelected,
+                  disabled: option.disabled,
                   active: isActive,
                   interactiveProps: {
                     id: optionId,
                     role: "option",
-                    onMouseEnter: () => setActiveIndex(index),
+                    "aria-describedby": describedBy,
+                    "aria-label": option.label,
+                    "aria-disabled": option.disabled || void 0,
+                    onMouseEnter: () => {
+                      if (!option.disabled) setActiveIndex(index);
+                    },
                     onMouseDown: (e) => {
                       interactingWithOptionsRef.current = true;
                       e.preventDefault();
                     },
                     onKeyDown: (e) => handleTabKeyDown(e)
                   },
-                  label: /* @__PURE__ */ jsx("span", { children: option.label }),
+                  label: labelContent,
                   onCheckedChange: () => commitSelection(option)
                 },
                 option.value
-              ) : /* @__PURE__ */ jsx(Menu.Item, { active: isActive, selected: isSelected, children: /* @__PURE__ */ jsx(
-                "button",
+              ) : /* @__PURE__ */ jsx(
+                Menu.Item,
                 {
-                  id: optionId,
-                  type: "button",
-                  role: "option",
-                  "aria-selected": isSelected,
-                  onMouseEnter: () => setActiveIndex(index),
-                  onMouseDown: (e) => {
-                    e.preventDefault();
-                  },
-                  onKeyDown: (e) => handleTabKeyDown(e),
-                  onClick: () => commitSelection(option),
-                  children: /* @__PURE__ */ jsx("span", { children: option.label })
-                }
-              ) }, option.value);
+                  active: isActive,
+                  selected: isSelected,
+                  disabled: option.disabled,
+                  children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      id: optionId,
+                      type: "button",
+                      role: "option",
+                      "aria-selected": isSelected,
+                      "aria-describedby": describedBy,
+                      "aria-label": option.label,
+                      "aria-disabled": option.disabled || void 0,
+                      disabled: option.disabled,
+                      onMouseEnter: () => {
+                        if (!option.disabled) setActiveIndex(index);
+                      },
+                      onMouseDown: (e) => {
+                        e.preventDefault();
+                      },
+                      onKeyDown: (e) => handleTabKeyDown(e),
+                      onClick: () => commitSelection(option),
+                      children: labelContent
+                    }
+                  )
+                },
+                option.value
+              );
+              return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                startsGroup && /* @__PURE__ */ jsx(Menu.Header, { id: groupId, children: option.group }),
+                item
+              ] }, option.value);
             }) : /* @__PURE__ */ jsx(Menu.Item, { disabled: true, children: emptyMessage }) })
           }
         ),

package/dist/components/forms/typeahead/Typeahead.module.css

@@ -36,3 +36,19 @@
 .typeaheadInput {
   cursor: pointer;
 }
+
+/* Label and description share one row; the description wraps below only when space runs out. */
+.optionText {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: var(--spacing-md);
+  min-width: 0;
+}
+
+.description {
+  margin-inline-start: auto;
+  font-size: var(--font-size-xs);
+  color: var(--color-fg-muted);
+  text-align: end;
+}

package/dist/components/headline/CollapsibleHeadline.cjs

@@ -7,7 +7,6 @@ var react = require('react');
 var usePersistentState = require('../../hooks/usePersistentState');
 var Headline = require('./Headline');
 var styles = require('./Headline.module.css');
-var Button = require('../button/Button');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -45,7 +44,7 @@ function CollapsibleHeadline({
     onToggle == null ? void 0 : onToggle();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.collapsibleRoot, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(
       Headline.Headline,
       {
         ...headlineProps,
@@ -53,28 +52,26 @@ function CollapsibleHeadline({
         weight,
         size,
         addition,
-        children: [
-          header,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button.Button,
-            {
-              shape: "round",
-              type: "button",
-              variant: "inline",
-              style: { padding: "var(--spacing-2xs)" },
-              "aria-expanded": isExpanded,
-              "aria-controls": panelId,
-              onClick: handleToggle,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: styles__default.default.toggleButton,
+            "aria-expanded": isExpanded,
+            "aria-controls": panelId,
+            onClick: handleToggle,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: header }),
+              /* @__PURE__ */ jsxRuntime.jsx(
                 lucideReact.ChevronDown,
                 {
                   "aria-hidden": true,
                   className: [styles__default.default.toggleChevron, isExpanded ? styles__default.default.toggleChevronExpanded : ""].filter(Boolean).join(" ")
                 }
               )
-            }
-          )
-        ]
+            ]
+          }
+        )
       }
     ),
     isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { id: panelId, className: styles__default.default.collapsiblePanel, children })

package/dist/components/headline/CollapsibleHeadline.d.ts

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import type { HeadlineProps } from './Headline';
 export interface CollapsibleHeadlineProps extends Omit<HeadlineProps, 'addition' | 'children'> {
-    /** The headline text — always visible. */
+    /** The headline text — always visible. Use addition for separate interactive content. */
     header: React.ReactNode;
     /** Controlled expanded state. When omitted, the component manages its own state. */
     expanded?: boolean;
@@ -9,7 +9,7 @@ export interface CollapsibleHeadlineProps extends Omit<HeadlineProps, 'addition'
     onToggle?: () => void;
     /** id of the panel element, used for aria-controls. Generated automatically if omitted. */
     controls?: string;
-    /** Extra content rendered between the headline text and the toggle button. */
+    /** Extra content rendered beside the heading, outside the toggle button. */
     addition?: React.ReactNode;
     /**
      * When set in uncontrolled mode, the component persists its expanded

package/dist/components/headline/CollapsibleHeadline.js

@@ -5,7 +5,6 @@ import { useId } from 'react';
 import { usePersistentState } from '../../hooks/usePersistentState';
 import { Headline } from './Headline';
 import styles from './Headline.module.css';
-import { Button } from '../button/Button';
 
 function CollapsibleHeadline({
   header,
@@ -39,7 +38,7 @@ function CollapsibleHeadline({
     onToggle == null ? void 0 : onToggle();
   };
   return /* @__PURE__ */ jsxs("div", { className: styles.collapsibleRoot, children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       Headline,
       {
         ...headlineProps,
@@ -47,28 +46,26 @@ function CollapsibleHeadline({
         weight,
         size,
         addition,
-        children: [
-          header,
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              shape: "round",
-              type: "button",
-              variant: "inline",
-              style: { padding: "var(--spacing-2xs)" },
-              "aria-expanded": isExpanded,
-              "aria-controls": panelId,
-              onClick: handleToggle,
-              children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: styles.toggleButton,
+            "aria-expanded": isExpanded,
+            "aria-controls": panelId,
+            onClick: handleToggle,
+            children: [
+              /* @__PURE__ */ jsx("span", { children: header }),
+              /* @__PURE__ */ jsx(
                 ChevronDown,
                 {
                   "aria-hidden": true,
                   className: [styles.toggleChevron, isExpanded ? styles.toggleChevronExpanded : ""].filter(Boolean).join(" ")
                 }
               )
-            }
-          )
-        ]
+            ]
+          }
+        )
       }
     ),
     isExpanded && /* @__PURE__ */ jsx("div", { id: panelId, className: styles.collapsiblePanel, children })

package/dist/components/headline/Headline.module.css

@@ -47,6 +47,27 @@
 }
 
 /* CollapsibleHeadline wrapper */
+.toggleButton {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: start;
+  cursor: pointer;
+  border-radius: var(--border-radius-sm);
+}
+
+.toggleButton:focus-visible {
+  outline: var(--border-width-medium) solid var(--color-border-selected);
+  outline-offset: var(--spacing-2xs);
+}
+
 .collapsibleRoot {
   display: flex;
   flex-direction: column;
@@ -58,6 +79,7 @@
 
 .toggleChevron {
   display: block;
+  flex-shrink: 0;
   width: 0.85em;
   height: 0.85em;
   transition: transform var(--transition-normal) var(--ease-standard);

package/dist/components/sidebar/components/SidebarItem.cjs

@@ -17,6 +17,7 @@ function SidebarItem({
   badge,
   href,
   iconWidth,
+  depth = 0,
   truncateLabel,
   enabled = true,
   external
@@ -38,6 +39,7 @@ function SidebarItem({
         {
           icon,
           badge,
+          depth,
           iconWidth,
           label,
           href,

package/dist/components/sidebar/components/SidebarItem.d.ts

@@ -5,10 +5,11 @@ interface SidebarItemProps {
     icon?: React.ReactNode;
     badge?: number | string;
     href?: string;
+    depth?: number;
     iconWidth?: string | number;
     enabled?: boolean;
     external?: boolean;
     truncateLabel?: boolean;
 }
-export declare function SidebarItem({ component: Component, label, icon, badge, href, iconWidth, truncateLabel, enabled, external, }: SidebarItemProps): React.ReactNode;
+export declare function SidebarItem({ component: Component, label, icon, badge, href, iconWidth, depth, truncateLabel, enabled, external, }: SidebarItemProps): React.ReactNode;
 export {};

package/dist/components/sidebar/components/SidebarItem.js

@@ -11,6 +11,7 @@ function SidebarItem({
   badge,
   href,
   iconWidth,
+  depth = 0,
   truncateLabel,
   enabled = true,
   external
@@ -32,6 +33,7 @@ function SidebarItem({
         {
           icon,
           badge,
+          depth,
           iconWidth,
           label,
           href,

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.cjs

@@ -19,6 +19,7 @@ function ExpandableSidebarItem({
   badge,
   href,
   iconWidth,
+  depth = 0,
   truncateLabel,
   enabled = true
 }) {
@@ -60,6 +61,7 @@ function ExpandableSidebarItem({
           {
             icon,
             badge,
+            depth,
             iconWidth,
             label,
             disableActiveStyles: true,

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.d.ts

@@ -5,9 +5,10 @@ type ExpandableSidebarItemProps = {
     icon?: React.ReactNode;
     badge?: number | string;
     href: string;
+    depth?: number;
     iconWidth?: string | number;
     truncateLabel?: boolean;
     enabled?: boolean;
 };
-export declare function ExpandableSidebarItem({ children, label, icon, badge, href, iconWidth, truncateLabel, enabled, }: ExpandableSidebarItemProps): React.ReactNode;
+export declare function ExpandableSidebarItem({ children, label, icon, badge, href, iconWidth, depth, truncateLabel, enabled, }: ExpandableSidebarItemProps): React.ReactNode;
 export {};

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js

@@ -13,6 +13,7 @@ function ExpandableSidebarItem({
   badge,
   href,
   iconWidth,
+  depth = 0,
   truncateLabel,
   enabled = true
 }) {
@@ -54,6 +55,7 @@ function ExpandableSidebarItem({
           {
             icon,
             badge,
+            depth,
             iconWidth,
             label,
             disableActiveStyles: true,

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.module.css

@@ -27,7 +27,7 @@
 }
 
 .childrenContainer {
-  padding-inline-start: var(--spacing-md);
+  --sidebar-empty-icon-display: none;
 }
 
 .chevron {

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css

@@ -15,6 +15,46 @@
     inline-size var(--transition-fast) var(--ease-standard);
 }
 
+/* Keep native scrolling visible without competing with navigation content. */
+:is(.container, .content, .links) {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-subtle) transparent;
+}
+
+:is(.container, .content, .links):is(:hover, :focus-within) {
+  scrollbar-color: var(--color-border-default) transparent;
+}
+
+/* Non-auto standard properties override WebKit thumb styling in Chromium. */
+@supports selector(::-webkit-scrollbar) {
+  :is(.container, .content, .links),
+  :is(.container, .content, .links):is(:hover, :focus-within) {
+    scrollbar-width: auto;
+    scrollbar-color: auto;
+  }
+}
+
+:is(.container, .content, .links)::-webkit-scrollbar {
+  width: calc(var(--spacing-xxs) + 2 * var(--border-width-thin));
+  height: calc(var(--spacing-xxs) + 2 * var(--border-width-thin));
+}
+
+:is(.container, .content, .links)::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+:is(.container, .content, .links)::-webkit-scrollbar-thumb {
+  background-color: var(--color-border-subtle);
+  background-clip: padding-box;
+  border: var(--border-width-thin) solid transparent;
+  border-radius: var(--border-radius-default);
+}
+
+:is(.container, .content, .links)::-webkit-scrollbar-thumb:hover,
+:is(.container, .content, .links):focus-within::-webkit-scrollbar-thumb {
+  background-color: var(--color-border-default);
+}
+
 .sidebarIcon {
   inline-size: var(--icon-size-sm);
   block-size: var(--icon-size-sm);

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.cjs

@@ -20,6 +20,7 @@ function SidebarItemContent({
   suffixIcon,
   href,
   iconWidth,
+  depth = 0,
   disableActiveStyles = false,
   truncateLabel = false
 }) {
@@ -33,6 +34,7 @@ function SidebarItemContent({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
+      style: { "--sidebar-item-depth": isSidebarCollapsed ? 0 : depth },
       className: `${styles__default.default.container} ${!disableActiveStyles && href && activeLink === href ? styles__default.default.active : ""} ${isSidebarCollapsed ? styles__default.default.collapsed : ""}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.iconLabel, children: [

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.d.ts

@@ -6,8 +6,9 @@ export interface SidebarItemContentProps {
     badge?: number | string;
     suffixIcon?: React.ReactNode;
     href?: string;
+    depth?: number;
     iconWidth?: string | number;
     disableActiveStyles?: boolean;
     truncateLabel?: boolean;
 }
-export declare function SidebarItemContent({ icon, label, badge, suffixIcon, href, iconWidth, disableActiveStyles, truncateLabel, }: SidebarItemContentProps): JSX.Element;
+export declare function SidebarItemContent({ icon, label, badge, suffixIcon, href, iconWidth, depth, disableActiveStyles, truncateLabel, }: SidebarItemContentProps): JSX.Element;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.js

@@ -13,6 +13,7 @@ function SidebarItemContent({
   suffixIcon,
   href,
   iconWidth,
+  depth = 0,
   disableActiveStyles = false,
   truncateLabel = false
 }) {
@@ -26,6 +27,7 @@ function SidebarItemContent({
   return /* @__PURE__ */ jsxs(
     "span",
     {
+      style: { "--sidebar-item-depth": isSidebarCollapsed ? 0 : depth },
       className: `${styles.container} ${!disableActiveStyles && href && activeLink === href ? styles.active : ""} ${isSidebarCollapsed ? styles.collapsed : ""}`,
       children: [
         /* @__PURE__ */ jsxs("span", { className: styles.iconLabel, children: [