@dbcdk/react-components 0.0.209 → 0.0.211

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

@@ -1,29 +1,46 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
+import styles from './SidebarItem.module.css';
+import { useSidebar } from '../providers/SidebarProvider';
 import { SidebarItemContent } from './sidebar-item-content/SidebarItemContent';
 
 function SidebarItem({
-  component: Component,
+  component: Component = "a",
   label,
   icon,
   badge,
   href,
   iconWidth,
-  truncateLabel
+  truncateLabel,
+  enabled = true,
+  external
 }) {
-  if (!Component) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Component, { children: /* @__PURE__ */ jsx(
-    SidebarItemContent,
+  const { activeLink, isSidebarCollapsed } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    Component,
     {
-      icon,
-      badge,
-      iconWidth,
-      label,
       href,
-      truncateLabel
+      className: styles.link,
+      "aria-label": isSidebarCollapsed ? label : void 0,
+      "aria-current": enabled && activeLink === href ? "page" : void 0,
+      "aria-disabled": !enabled || void 0,
+      tabIndex: enabled ? void 0 : -1,
+      onClick: enabled ? void 0 : (event) => event.preventDefault(),
+      ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      children: /* @__PURE__ */ jsx(
+        SidebarItemContent,
+        {
+          icon,
+          badge,
+          iconWidth,
+          label,
+          href,
+          disableActiveStyles: !enabled,
+          truncateLabel
+        }
+      )
     }
-  ) });
+  );
 }
 
 export { SidebarItem };

package/dist/components/sidebar/components/SidebarItem.module.css

@@ -0,0 +1,16 @@
+.link {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  border-radius: var(--border-radius-md);
+}
+
+.link:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.link[aria-disabled='true'] {
+  color: var(--color-fg-subtle);
+  cursor: default;
+}

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

@@ -5,27 +5,22 @@ var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var react = require('react');
 var styles = require('./ExpandableSidebarItem.module.css');
-var Button = require('../../../button/Button');
 var SidebarProvider = require('../../providers/SidebarProvider');
-var ExpandableSidebarItem$1 = require('../expandable-sidebar-item/ExpandableSidebarItem');
 var SidebarItemContent = require('../sidebar-item-content/SidebarItemContent');
-var SidebarItem = require('../SidebarItem');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-const isGroup = (item) => item.type === "group";
-const isExpandable = (item) => item.type === "expandable";
 function ExpandableSidebarItem({
-  items,
+  children,
   label,
   icon,
   badge,
-  component: Component,
   href,
   iconWidth,
-  truncateLabel
+  truncateLabel,
+  enabled = true
 }) {
   const {
     defaultExpanded,
@@ -36,121 +31,51 @@ function ExpandableSidebarItem({
     collapseItem,
     isExpanded
   } = SidebarProvider.useSidebar();
-  const [closing, setClosing] = react.useState(false);
-  const expanded = react.useMemo(() => isExpanded(href), [href, isExpanded]);
+  const childrenId = react.useId();
+  const expanded = isExpanded(href);
+  const visible = expanded && !isSidebarCollapsed;
   react.useEffect(() => {
     if (defaultExpanded === null) return;
     if (defaultExpanded) expandItem(href);
     else collapseItem(href);
   }, [defaultExpanded, expandItem, collapseItem, href]);
-  const commitCollapse = react.useCallback(() => {
-    collapseItem(href);
-    setClosing(false);
-  }, [collapseItem, href]);
-  const handleAnimationEnd = react.useCallback(() => {
-    if (closing) commitCollapse();
-  }, [closing, commitCollapse]);
-  react.useEffect(() => {
-    if (!closing) return;
-    const timer = setTimeout(commitCollapse, 250);
-    return () => clearTimeout(timer);
-  }, [closing, commitCollapse]);
-  const toggleAccordion = react.useCallback(
-    (e, onlyExpand = false) => {
-      e == null ? void 0 : e.preventDefault();
-      e == null ? void 0 : e.stopPropagation();
-      resetExpandAll();
-      handleSidebarCollapseChange(false);
-      if (!expanded) {
-        expandItem(href);
-        return;
-      }
-      if (!isSidebarCollapsed && !onlyExpand) {
-        setClosing(true);
-      }
-    },
-    [expanded, expandItem, href, handleSidebarCollapseChange, isSidebarCollapsed, resetExpandAll]
-  );
-  const renderNavItem = (item, key) => {
-    var _a, _b;
-    if (isGroup(item)) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.group, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.groupLabel, children: item.label }),
-        (_a = item.children) == null ? void 0 : _a.map((child, idx) => renderNavItem(child, `${key}-${idx}`))
-      ] }, key);
-    }
-    if (isExpandable(item)) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        ExpandableSidebarItem$1.ExpandableSidebarItem,
-        {
-          items: (_b = item.children) != null ? _b : [],
-          label: item.label,
-          icon: item.icon,
-          badge: item.badge,
-          href: item.href,
-          iconWidth: item.iconWidth,
-          component: item.component
-        },
-        key
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      SidebarItem.SidebarItem,
-      {
-        component: item.component,
-        label: item.label,
-        icon: item.icon,
-        badge: item.badge,
-        href: item.href,
-        iconWidth: item.iconWidth,
-        truncateLabel: item.truncateLabel
-      },
-      key
-    );
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.itemRow} ${expanded ? styles__default.default.itemRowExpanded : ""}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsxRuntime.jsx(
-        SidebarItemContent.SidebarItemContent,
-        {
-          headerStyle: expanded,
-          icon,
-          badge,
-          iconWidth,
-          label,
-          href,
-          disableActiveStyles: expanded,
-          suffixIcon: !isSidebarCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(
-            lucideReact.ChevronDown,
-            {
-              className: `${styles__default.default.chevron} ${expanded ? styles__default.default.chevronExpanded : ""}`
-            }
-          ) : void 0,
-          truncateLabel
-        }
-      ) }),
-      !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.toggleButton, children: /* @__PURE__ */ jsxRuntime.jsx(
-        Button.Button,
-        {
-          variant: "inline",
-          shape: "round",
-          className: styles__default.default.toggleButtonControl,
-          "aria-label": expanded ? `Collapse ${label}` : `Expand ${label}`,
-          "aria-expanded": expanded,
-          "aria-controls": `${href}-children`,
-          onClick: toggleAccordion
-        }
-      ) })
-    ] }),
-    expanded && !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
       {
-        id: `${href}-children`,
-        onAnimationEnd: handleAnimationEnd,
-        className: `${styles__default.default.childrenContainer} ${closing ? "animate--collapse" : ""}`,
-        children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`))
+        type: "button",
+        className: styles__default.default.toggleButton,
+        "aria-label": isSidebarCollapsed ? label : void 0,
+        "aria-expanded": visible,
+        "aria-controls": childrenId,
+        disabled: !enabled,
+        onClick: () => {
+          resetExpandAll();
+          handleSidebarCollapseChange(false);
+          if (visible) collapseItem(href);
+          else expandItem(href);
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          SidebarItemContent.SidebarItemContent,
+          {
+            icon,
+            badge,
+            iconWidth,
+            label,
+            disableActiveStyles: true,
+            suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.ChevronDown,
+              {
+                "aria-hidden": "true",
+                className: `${styles__default.default.chevron} ${visible ? styles__default.default.chevronExpanded : ""}`
+              }
+            ),
+            truncateLabel
+          }
+        )
       }
-    )
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { id: childrenId, hidden: !visible, className: styles__default.default.childrenContainer, children: visible ? children : null })
   ] });
 }
 

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

@@ -1,14 +1,13 @@
 import React from 'react';
-import type { NavBarItem } from '../../../../components/nav-bar/NavBar';
 type ExpandableSidebarItemProps = {
-    items: NavBarItem[];
+    children: React.ReactNode;
     label: string;
-    component: React.ElementType;
-    icon: React.ReactNode;
+    icon?: React.ReactNode;
     badge?: number | string;
     href: string;
     iconWidth?: string | number;
     truncateLabel?: boolean;
+    enabled?: boolean;
 };
-export declare function ExpandableSidebarItem({ items, label, icon, badge, component: Component, href, iconWidth, truncateLabel, }: ExpandableSidebarItemProps): React.ReactNode;
+export declare function ExpandableSidebarItem({ children, label, icon, badge, href, iconWidth, truncateLabel, enabled, }: ExpandableSidebarItemProps): React.ReactNode;
 export {};

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

@@ -1,25 +1,20 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChevronDown } from 'lucide-react';
-import { useState, useMemo, useEffect, useCallback } from 'react';
+import { useId, useEffect } from 'react';
 import styles from './ExpandableSidebarItem.module.css';
-import { Button } from '../../../button/Button';
 import { useSidebar } from '../../providers/SidebarProvider';
-import { ExpandableSidebarItem as ExpandableSidebarItem$1 } from '../expandable-sidebar-item/ExpandableSidebarItem';
 import { SidebarItemContent } from '../sidebar-item-content/SidebarItemContent';
-import { SidebarItem } from '../SidebarItem';
 
-const isGroup = (item) => item.type === "group";
-const isExpandable = (item) => item.type === "expandable";
 function ExpandableSidebarItem({
-  items,
+  children,
   label,
   icon,
   badge,
-  component: Component,
   href,
   iconWidth,
-  truncateLabel
+  truncateLabel,
+  enabled = true
 }) {
   const {
     defaultExpanded,
@@ -30,121 +25,51 @@ function ExpandableSidebarItem({
     collapseItem,
     isExpanded
   } = useSidebar();
-  const [closing, setClosing] = useState(false);
-  const expanded = useMemo(() => isExpanded(href), [href, isExpanded]);
+  const childrenId = useId();
+  const expanded = isExpanded(href);
+  const visible = expanded && !isSidebarCollapsed;
   useEffect(() => {
     if (defaultExpanded === null) return;
     if (defaultExpanded) expandItem(href);
     else collapseItem(href);
   }, [defaultExpanded, expandItem, collapseItem, href]);
-  const commitCollapse = useCallback(() => {
-    collapseItem(href);
-    setClosing(false);
-  }, [collapseItem, href]);
-  const handleAnimationEnd = useCallback(() => {
-    if (closing) commitCollapse();
-  }, [closing, commitCollapse]);
-  useEffect(() => {
-    if (!closing) return;
-    const timer = setTimeout(commitCollapse, 250);
-    return () => clearTimeout(timer);
-  }, [closing, commitCollapse]);
-  const toggleAccordion = useCallback(
-    (e, onlyExpand = false) => {
-      e == null ? void 0 : e.preventDefault();
-      e == null ? void 0 : e.stopPropagation();
-      resetExpandAll();
-      handleSidebarCollapseChange(false);
-      if (!expanded) {
-        expandItem(href);
-        return;
-      }
-      if (!isSidebarCollapsed && !onlyExpand) {
-        setClosing(true);
-      }
-    },
-    [expanded, expandItem, href, handleSidebarCollapseChange, isSidebarCollapsed, resetExpandAll]
-  );
-  const renderNavItem = (item, key) => {
-    var _a, _b;
-    if (isGroup(item)) {
-      return /* @__PURE__ */ jsxs("div", { className: styles.group, children: [
-        /* @__PURE__ */ jsx("div", { className: styles.groupLabel, children: item.label }),
-        (_a = item.children) == null ? void 0 : _a.map((child, idx) => renderNavItem(child, `${key}-${idx}`))
-      ] }, key);
-    }
-    if (isExpandable(item)) {
-      return /* @__PURE__ */ jsx(
-        ExpandableSidebarItem$1,
-        {
-          items: (_b = item.children) != null ? _b : [],
-          label: item.label,
-          icon: item.icon,
-          badge: item.badge,
-          href: item.href,
-          iconWidth: item.iconWidth,
-          component: item.component
-        },
-        key
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      SidebarItem,
-      {
-        component: item.component,
-        label: item.label,
-        icon: item.icon,
-        badge: item.badge,
-        href: item.href,
-        iconWidth: item.iconWidth,
-        truncateLabel: item.truncateLabel
-      },
-      key
-    );
-  };
-  return /* @__PURE__ */ jsxs("div", { className: `${styles.container}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: `${styles.itemRow} ${expanded ? styles.itemRowExpanded : ""}`, children: [
-      /* @__PURE__ */ jsx(Component, { onClick: () => toggleAccordion(void 0, true), children: /* @__PURE__ */ jsx(
-        SidebarItemContent,
-        {
-          headerStyle: expanded,
-          icon,
-          badge,
-          iconWidth,
-          label,
-          href,
-          disableActiveStyles: expanded,
-          suffixIcon: !isSidebarCollapsed ? /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              className: `${styles.chevron} ${expanded ? styles.chevronExpanded : ""}`
-            }
-          ) : void 0,
-          truncateLabel
-        }
-      ) }),
-      !isSidebarCollapsed && /* @__PURE__ */ jsx("div", { className: styles.toggleButton, children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "inline",
-          shape: "round",
-          className: styles.toggleButtonControl,
-          "aria-label": expanded ? `Collapse ${label}` : `Expand ${label}`,
-          "aria-expanded": expanded,
-          "aria-controls": `${href}-children`,
-          onClick: toggleAccordion
-        }
-      ) })
-    ] }),
-    expanded && !isSidebarCollapsed && /* @__PURE__ */ jsx(
-      "div",
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
+    /* @__PURE__ */ jsx(
+      "button",
       {
-        id: `${href}-children`,
-        onAnimationEnd: handleAnimationEnd,
-        className: `${styles.childrenContainer} ${closing ? "animate--collapse" : ""}`,
-        children: items.map((item, idx) => renderNavItem(item, `${href}-${idx}`))
+        type: "button",
+        className: styles.toggleButton,
+        "aria-label": isSidebarCollapsed ? label : void 0,
+        "aria-expanded": visible,
+        "aria-controls": childrenId,
+        disabled: !enabled,
+        onClick: () => {
+          resetExpandAll();
+          handleSidebarCollapseChange(false);
+          if (visible) collapseItem(href);
+          else expandItem(href);
+        },
+        children: /* @__PURE__ */ jsx(
+          SidebarItemContent,
+          {
+            icon,
+            badge,
+            iconWidth,
+            label,
+            disableActiveStyles: true,
+            suffixIcon: /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                "aria-hidden": "true",
+                className: `${styles.chevron} ${visible ? styles.chevronExpanded : ""}`
+              }
+            ),
+            truncateLabel
+          }
+        )
       }
-    )
+    ),
+    /* @__PURE__ */ jsx("div", { id: childrenId, hidden: !visible, className: styles.childrenContainer, children: visible ? children : null })
   ] });
 }
 

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

@@ -1,45 +1,37 @@
 .container {
-  position: relative;
   display: flex;
   flex-direction: column;
-  border-radius: var(--border-radius-default);
 }
 
-.itemRow {
-  position: relative;
+.toggleButton {
   display: block;
+  inline-size: 100%;
+  padding: 0;
+  border: 0;
   border-radius: var(--border-radius-md);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
 }
 
-.toggleButton {
-  position: absolute;
-  inset-inline-end: var(--spacing-xs);
-  inset-block-start: 50%;
-  transform: translateY(-50%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.container button {
-  min-block-size: 28px !important;
-  min-inline-size: 28px !important;
-  max-block-size: 28px !important;
-  max-inline-size: 28px !important;
-  border-color: transparent !important;
-  background-color: transparent !important;
+.toggleButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
 }
 
-.toggleButtonControl {
-  opacity: 0;
+.toggleButton:disabled {
+  color: var(--color-fg-subtle);
+  cursor: default;
 }
 
 .childrenContainer {
-  overflow: hidden;
+  padding-inline-start: var(--spacing-md);
 }
 
 .chevron {
-  transition: transform 0.3s ease;
+  transition: transform var(--transition-fast) var(--ease-standard);
 }
 
 .chevronExpanded {

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.cjs

@@ -186,7 +186,7 @@ function SidebarContainer({
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
           !hideSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.filter, children: /* @__PURE__ */ jsxRuntime.jsx(SidenavFiltering__default.default, { placeholder: searchPlaceholder, showSettings }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.links} hideScrollBar`, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarItems.SidebarItems, { activeLink }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.links, children: /* @__PURE__ */ jsxRuntime.jsx(SidebarItems.SidebarItems, { activeLink }) })
         ] }),
         footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.footerSlot, children: footer }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.footer, children: [

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js

@@ -179,7 +179,7 @@ function SidebarContainer({
         ] }) }),
         /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
           !hideSearch && /* @__PURE__ */ jsx("div", { className: styles.filter, children: /* @__PURE__ */ jsx(SidenavFiltering, { placeholder: searchPlaceholder, showSettings }) }),
-          /* @__PURE__ */ jsx("div", { className: `${styles.links} hideScrollBar`, children: /* @__PURE__ */ jsx(SidebarItems, { activeLink }) })
+          /* @__PURE__ */ jsx("div", { className: styles.links, children: /* @__PURE__ */ jsx(SidebarItems, { activeLink }) })
         ] }),
         footer && /* @__PURE__ */ jsx("div", { className: styles.footerSlot, children: footer }),
         /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [

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

@@ -164,7 +164,6 @@
   display: flex;
   flex-grow: 1;
   flex-direction: column;
-  gap: 2px;
   font-size: var(--font-size-sm);
 }
 

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

@@ -21,7 +21,6 @@ function SidebarItemContent({
   href,
   iconWidth,
   disableActiveStyles = false,
-  headerStyle,
   truncateLabel = false
 }) {
   const { activeLink, activeQuery, isSidebarCollapsed, wrapItemText } = SidebarProvider.useSidebar();
@@ -34,7 +33,7 @@ function SidebarItemContent({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
-      className: `${styles__default.default.container} ${!disableActiveStyles && activeLink === href ? styles__default.default.active : ""} ${isSidebarCollapsed ? styles__default.default.collapsed : ""} ${headerStyle ? styles__default.default.headerStyle : ""}`,
+      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: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, style: iconStyle, children: icon }),

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

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

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

@@ -14,7 +14,6 @@ function SidebarItemContent({
   href,
   iconWidth,
   disableActiveStyles = false,
-  headerStyle,
   truncateLabel = false
 }) {
   const { activeLink, activeQuery, isSidebarCollapsed, wrapItemText } = useSidebar();
@@ -27,7 +26,7 @@ function SidebarItemContent({
   return /* @__PURE__ */ jsxs(
     "span",
     {
-      className: `${styles.container} ${!disableActiveStyles && activeLink === href ? styles.active : ""} ${isSidebarCollapsed ? styles.collapsed : ""} ${headerStyle ? styles.headerStyle : ""}`,
+      className: `${styles.container} ${!disableActiveStyles && href && activeLink === href ? styles.active : ""} ${isSidebarCollapsed ? styles.collapsed : ""}`,
       children: [
         /* @__PURE__ */ jsxs("span", { className: styles.iconLabel, children: [
           /* @__PURE__ */ jsx("span", { className: styles.icon, style: iconStyle, children: icon }),

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css

@@ -4,6 +4,9 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-sm);
+  /* Transparent borders separate the backgrounds while remaining part of the hit area. */
+  border-block: calc(var(--spacing-xxs) / 4) solid transparent;
+  background-clip: padding-box;
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-xs);
   text-decoration: none;
@@ -19,12 +22,11 @@
 
 .container.collapsed {
   justify-content: center;
-  padding: var(--spacing-xs);
   border-radius: 0;
 }
 
 .active {
-  background: var(--color-bg-selected);
+  background-color: var(--color-bg-selected);
 }
 
 .active::before {
@@ -111,14 +113,6 @@
   box-shadow: var(--focus-ring);
 }
 
-.headerStyle .label {
-  font-weight: 500;
-  color: var(--color-fg-subtle);
-  font-size: var(--font-size-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
 .label {
   min-inline-size: 0;
   flex: 1 1 auto;