@gnome-ui/react 1.45.0 → 1.45.2

package/dist/components/Sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","names":[],"sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  isValidElement,\n  Children,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { SearchBar } from \"../SearchBar\";\nimport { StatusPage } from \"../StatusPage\";\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\nimport styles from \"./Sidebar.module.css\";\n\n// ─── Contexts ─────────────────────────────────────────────────────────────────\n\n/** Provides the collapsed state to all descendant `SidebarItem` components. */\nexport const SidebarCollapsedContext = createContext(false);\n\n/** Returns `true` when the nearest `Sidebar` is in collapsed (icon-only) mode. */\nexport function useSidebarCollapsed() {\n  return useContext(SidebarCollapsedContext);\n}\n\n/** Provides the active filter string to all descendant `SidebarItem` components. */\nexport const SidebarFilterContext = createContext(\"\");\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\n/** Recursively count items whose `label` matches `filter` (case-insensitive). */\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) return;\n    const props = child.props as Record<string, unknown>;\n    if (typeof props.label === \"string\") {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) count++;\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n  return count;\n}\n\n// ─── Variant map ──────────────────────────────────────────────────────────────\n\nconst variantClass: Record<string, string> = {\n  blue: \"variantBlue\",\n  green: \"variantGreen\",\n  red: \"variantRed\",\n  yellow: \"variantYellow\",\n  black: \"variantBlack\",\n  transparent: \"variantTransparent\",\n  blurred: \"variantBlurred\",\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport interface SidebarProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode;\n  /**\n   * When `true`, collapses the sidebar to icon-only mode (rail/mini).\n   * Labels, suffixes, and section titles are hidden; tooltips appear on hover.\n   */\n  collapsed?: boolean;\n  /**\n   * Renders a built-in `SearchBar` inside the sidebar and manages the filter\n   * state internally (uncontrolled). Combine with `filter` + `onFilterChange`\n   * for controlled mode.\n   */\n  searchable?: boolean;\n  /**\n   * Controlled filter string. Items whose `label` does not match\n   * (case-insensitive substring) are hidden. Does not render a `SearchBar`\n   * on its own — use `searchable` for the built-in search input.\n   */\n  filter?: string;\n  /** Called when the built-in search value changes. */\n  onFilterChange?: (value: string) => void;\n  /**\n   * Layout mode:\n   * - `\"sidebar\"` — fixed-width panel with a border (default).\n   * - `\"page\"` — full-width boxed-list layout for narrow viewports.\n   *\n   * When omitted the sidebar auto-switches to `\"page\"` at ≤ 400 sp,\n   * mirroring `AdwSidebar` mobile behaviour.\n   */\n  mode?: \"sidebar\" | \"page\";\n  /**\n   * Visual style variant for the sidebar background.\n   * - `\"classic\"` — default GNOME gray\n   * - `\"blue\"` | `\"green\"` | `\"red\"` | `\"yellow\"` — tinted accent backgrounds\n   * - `\"black\"` — dark/OLED background\n   * - `\"transparent\"` — no background, inherits parent\n   * - `\"blurred\"` — frosted glass (backdrop-filter blur), like macOS\n   */\n  variant?: \"classic\" | \"blue\" | \"green\" | \"red\" | \"yellow\" | \"black\" | \"transparent\" | \"blurred\";\n}\n\n/**\n * Lateral navigation panel following the Adwaita `.navigation-sidebar` style.\n *\n * **Tier 11 — libadwaita 1.9 completeness:**\n * - `searchable` — built-in `SearchBar` with automatic item filtering.\n * - `filter` / `onFilterChange` — controlled external filtering.\n * - `mode` — `\"sidebar\"` (default) or `\"page\"` (boxed-list layout).\n *   Auto-switches to `\"page\"` at ≤ 400 sp when `mode` is unset.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport function Sidebar({\n  children,\n  collapsed = false,\n  searchable,\n  filter: controlledFilter,\n  onFilterChange,\n  mode,\n  variant = \"classic\",\n  className,\n  ...props\n}: SidebarProps) {\n  const [internalFilter, setInternalFilter] = useState(\"\");\n  const { isNarrow } = useBreakpoint();\n\n  const isControlled = controlledFilter !== undefined;\n  const filterValue = isControlled ? controlledFilter : internalFilter;\n\n  const handleFilterChange = (v: string) => {\n    if (!isControlled) setInternalFilter(v);\n    onFilterChange?.(v);\n  };\n\n  const isFilterActive = filterValue.length > 0;\n  const effectiveMode = mode ?? (isNarrow ? \"page\" : \"sidebar\");\n  const hasMatches = !isFilterActive || countMatchingItems(children, filterValue) > 0;\n\n  return (\n    <SidebarCollapsedContext.Provider value={collapsed}>\n      <SidebarFilterContext.Provider value={filterValue}>\n        <nav\n          className={[\n            styles.sidebar,\n            collapsed ? styles.collapsed : null,\n            effectiveMode === \"page\" ? styles.pageMode : null,\n            variant !== \"classic\" ? styles[variantClass[variant]] : null,\n            className,\n          ]\n            .filter(Boolean)\n            .join(\" \")}\n          {...props}\n        >\n          {searchable && (\n            <div className={styles.searchWrap}>\n              <SearchBar\n                open\n                value={filterValue}\n                onChange={(e) => handleFilterChange(e.target.value)}\n                onClose={() => handleFilterChange(\"\")}\n                onClear={() => handleFilterChange(\"\")}\n                inline\n              />\n            </div>\n          )}\n\n          {isFilterActive && !hasMatches ? (\n            <StatusPage\n              title=\"No Results\"\n              description=\"No items match your search.\"\n              compact\n            />\n          ) : (\n            children\n          )}\n        </nav>\n      </SidebarFilterContext.Provider>\n    </SidebarCollapsedContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;AAiBA,IAAa,IAA0B,EAAc,GAAM;AAG3D,SAAgB,IAAsB;AACpC,QAAO,EAAW,EAAwB;;AAI5C,IAAa,IAAuB,EAAc,GAAG;AAKrD,SAAS,EAAmB,GAAqB,GAAwB;CACvE,IAAI,IAAQ;AAUZ,QATA,EAAS,QAAQ,IAAW,MAAU;AACpC,MAAI,CAAC,EAAe,EAAM,CAAE;EAC5B,IAAM,IAAQ,EAAM;AACpB,EAAI,OAAO,EAAM,SAAU,WACrB,EAAM,MAAM,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,IAAE,MACrD,EAAM,aACf,KAAS,EAAmB,EAAM,UAAuB,EAAO;GAElE,EACK;;AAKT,IAAM,IAAuC;CAC3C,MAAM;CACN,OAAO;CACP,KAAK;CACL,QAAQ;CACR,OAAO;CACP,aAAa;CACb,SAAS;CACV;AAwDD,SAAgB,EAAQ,EACtB,aACA,eAAY,IACZ,eACA,QAAQ,GACR,mBACA,SACA,aAAU,WACV,cACA,GAAG,KACY;CACf,IAAM,CAAC,GAAgB,KAAqB,EAAS,GAAG,EAClD,EAAE,gBAAa,GAAe,EAE9B,IAAe,MAAqB,KAAA,GACpC,IAAc,IAAe,IAAmB,GAEhD,KAAsB,MAAc;AAExC,EADK,KAAc,EAAkB,EAAE,EACvC,IAAiB,EAAE;IAGf,IAAiB,EAAY,SAAS,GACtC,IAAgB,MAAS,IAAW,SAAS,YAC7C,IAAa,CAAC,KAAkB,EAAmB,GAAU,EAAY,GAAG;AAElF,QACE,kBAAC,EAAwB,UAAzB;EAAkC,OAAO;YACvC,kBAAC,EAAqB,UAAtB;GAA+B,OAAO;aACpC,kBAAC,OAAD;IACE,WAAW;KACT,EAAO;KACP,IAAY,EAAO,YAAY;KAC/B,MAAkB,SAAS,EAAO,WAAW;KAC7C,MAAY,YAA4C,OAAhC,EAAO,EAAa;KAC5C;KACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,GAAI;cAVN,CAYG,KACC,kBAAC,OAAD;KAAK,WAAW,EAAO;eACrB,kBAAC,GAAD;MACE,MAAA;MACA,OAAO;MACP,WAAW,MAAM,EAAmB,EAAE,OAAO,MAAM;MACnD,eAAe,EAAmB,GAAG;MACrC,eAAe,EAAmB,GAAG;MACrC,QAAA;MACA,CAAA;KACE,CAAA,EAGP,KAAkB,CAAC,IAClB,kBAAC,GAAD;KACE,OAAM;KACN,aAAY;KACZ,SAAA;KACA,CAAA,GAEF,EAEE;;GACwB,CAAA;EACC,CAAA"}
+{"version":3,"file":"Sidebar.js","names":[],"sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import {\n  Children,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useContext,\n  useState,\n} from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { SearchBar } from '../SearchBar';\nimport { StatusPage } from '../StatusPage';\n\nimport styles from './Sidebar.module.css';\n\n// ─── Contexts ─────────────────────────────────────────────────────────────────\n\n/** Provides the collapsed state to all descendant `SidebarItem` components. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const SidebarCollapsedContext = createContext(false);\n\n/** Returns `true` when the nearest `Sidebar` is in collapsed (icon-only) mode. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useSidebarCollapsed() {\n  return useContext(SidebarCollapsedContext);\n}\n\n/** Provides the active filter string to all descendant `SidebarItem` components. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const SidebarFilterContext = createContext('');\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\n/** Recursively count items whose `label` matches `filter` (case-insensitive). */\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const props = child.props as Record<string, unknown>;\n\n    if (typeof props.label === 'string') {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) {\n        count++;\n      }\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n\n  return count;\n}\n\n// ─── Variant map ──────────────────────────────────────────────────────────────\n\nconst variantClass: Record<string, string> = {\n  blue: 'variantBlue',\n  green: 'variantGreen',\n  red: 'variantRed',\n  yellow: 'variantYellow',\n  black: 'variantBlack',\n  transparent: 'variantTransparent',\n  blurred: 'variantBlurred',\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport interface SidebarProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode;\n  /**\n   * When `true`, collapses the sidebar to icon-only mode (rail/mini).\n   * Labels, suffixes, and section titles are hidden; tooltips appear on hover.\n   */\n  collapsed?: boolean;\n  /**\n   * Renders a built-in `SearchBar` inside the sidebar and manages the filter\n   * state internally (uncontrolled). Combine with `filter` + `onFilterChange`\n   * for controlled mode.\n   */\n  searchable?: boolean;\n  /**\n   * Controlled filter string. Items whose `label` does not match\n   * (case-insensitive substring) are hidden. Does not render a `SearchBar`\n   * on its own — use `searchable` for the built-in search input.\n   */\n  filter?: string;\n  /** Called when the built-in search value changes. */\n  onFilterChange?: (value: string) => void;\n  /**\n   * Layout mode:\n   * - `\"sidebar\"` — fixed-width panel with a border (default).\n   * - `\"page\"` — full-width boxed-list layout for narrow viewports.\n   *\n   * When omitted the sidebar auto-switches to `\"page\"` at ≤ 400 sp,\n   * mirroring `AdwSidebar` mobile behaviour.\n   */\n  mode?: 'sidebar' | 'page';\n  /**\n   * Visual style variant for the sidebar background.\n   * - `\"classic\"` — default GNOME gray\n   * - `\"blue\"` | `\"green\"` | `\"red\"` | `\"yellow\"` — tinted accent backgrounds\n   * - `\"black\"` — dark/OLED background\n   * - `\"transparent\"` — no background, inherits parent\n   * - `\"blurred\"` — frosted glass (backdrop-filter blur), like macOS\n   */\n  variant?: 'classic' | 'blue' | 'green' | 'red' | 'yellow' | 'black' | 'transparent' | 'blurred';\n}\n\n/**\n * Lateral navigation panel following the Adwaita `.navigation-sidebar` style.\n *\n * **Tier 11 — libadwaita 1.9 completeness:**\n * - `searchable` — built-in `SearchBar` with automatic item filtering.\n * - `filter` / `onFilterChange` — controlled external filtering.\n * - `mode` — `\"sidebar\"` (default) or `\"page\"` (boxed-list layout).\n *   Auto-switches to `\"page\"` at ≤ 400 sp when `mode` is unset.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport const Sidebar = ({\n  children,\n  collapsed = false,\n  searchable,\n  filter: controlledFilter,\n  onFilterChange,\n  mode,\n  variant = 'classic',\n  className,\n  ...props\n}: SidebarProps) => {\n  const [internalFilter, setInternalFilter] = useState('');\n  const { isNarrow } = useBreakpoint();\n\n  const isControlled = controlledFilter !== undefined;\n  const filterValue = isControlled ? controlledFilter : internalFilter;\n\n  const handleFilterChange = (v: string) => {\n    if (!isControlled) {\n      setInternalFilter(v);\n    }\n\n    onFilterChange?.(v);\n  };\n\n  const isFilterActive = filterValue.length > 0;\n  const effectiveMode = mode ?? (isNarrow ? 'page' : 'sidebar');\n  const hasMatches = !isFilterActive || countMatchingItems(children, filterValue) > 0;\n\n  return (\n    <SidebarCollapsedContext.Provider value={collapsed}>\n      <SidebarFilterContext.Provider value={filterValue}>\n        <nav\n          className={[\n            styles.sidebar,\n            collapsed ? styles.collapsed : null,\n            effectiveMode === 'page' ? styles.pageMode : null,\n            variant !== 'classic' ? styles[variantClass[variant]] : null,\n            className,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          {...props}\n        >\n          {searchable && (\n            <div className={styles.searchWrap}>\n              <SearchBar\n                open\n                value={filterValue}\n                onChange={(e) => handleFilterChange(e.target.value)}\n                onClose={() => handleFilterChange('')}\n                onClear={() => handleFilterChange('')}\n                inline\n              />\n            </div>\n          )}\n\n          {isFilterActive && !hasMatches ? (\n            <StatusPage title=\"No Results\" description=\"No items match your search.\" compact />\n          ) : (\n            children\n          )}\n        </nav>\n      </SidebarFilterContext.Provider>\n    </SidebarCollapsedContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;AAoBA,IAAa,IAA0B,EAAc,EAAK;AAI1D,SAAgB,IAAsB;CACpC,OAAO,EAAW,CAAuB;AAC3C;AAIA,IAAa,IAAuB,EAAc,EAAE;AAKpD,SAAS,EAAmB,GAAqB,GAAwB;CACvE,IAAI,IAAQ;CAiBZ,OAhBA,EAAS,QAAQ,IAAW,MAAU;EACpC,IAAI,CAAC,EAAe,CAAK,GACvB;EAGF,IAAM,IAAQ,EAAM;EAEpB,AAAI,OAAO,EAAM,SAAU,WACrB,EAAM,MAAM,YAAY,EAAE,SAAS,EAAO,YAAY,CAAC,KACzD,MAEO,EAAM,aACf,KAAS,EAAmB,EAAM,UAAuB,CAAM;CAEnE,CAAC,GAEM;AACT;AAIA,IAAM,IAAuC;CAC3C,MAAM;CACN,OAAO;CACP,KAAK;CACL,QAAQ;CACR,OAAO;CACP,aAAa;CACb,SAAS;AACX,GAwDa,KAAW,EACtB,aACA,eAAY,IACZ,eACA,QAAQ,GACR,mBACA,SACA,aAAU,WACV,cACA,GAAG,QACe;CAClB,IAAM,CAAC,GAAgB,KAAqB,EAAS,EAAE,GACjD,EAAE,gBAAa,EAAc,GAE7B,IAAe,MAAqB,KAAA,GACpC,IAAc,IAAe,IAAmB,GAEhD,KAAsB,MAAc;EAKxC,AAJK,KACH,EAAkB,CAAC,GAGrB,IAAiB,CAAC;CACpB,GAEM,IAAiB,EAAY,SAAS,GACtC,IAAgB,MAAS,IAAW,SAAS,YAC7C,IAAa,CAAC,KAAkB,EAAmB,GAAU,CAAW,IAAI;CAElF,OACE,kBAAC,EAAwB,UAAzB;EAAkC,OAAO;YACvC,kBAAC,EAAqB,UAAtB;GAA+B,OAAO;aACpC,kBAAC,OAAD;IACE,WAAW;KACT,EAAO;KACP,IAAY,EAAO,YAAY;KAC/B,MAAkB,SAAS,EAAO,WAAW;KAC7C,MAAY,YAA4C,OAAhC,EAAO,EAAa;KAC5C;IACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;IACX,GAAI;cAVN,CAYG,KACC,kBAAC,OAAD;KAAK,WAAW,EAAO;eACrB,kBAAC,GAAD;MACE,MAAA;MACA,OAAO;MACP,WAAW,MAAM,EAAmB,EAAE,OAAO,KAAK;MAClD,eAAe,EAAmB,EAAE;MACpC,eAAe,EAAmB,EAAE;MACpC,QAAA;KACD,CAAA;IACE,CAAA,GAGN,KAAkB,CAAC,IAClB,kBAAC,GAAD;KAAY,OAAM;KAAa,aAAY;KAA8B,SAAA;IAAS,CAAA,IAElF,CAEC;;EACwB,CAAA;CACC,CAAA;AAEtC"}

package/dist/components/Sidebar/Sidebar.module.css.cjs

@@ -1,2 +1,2 @@
-var e=`_sidebar_1sdji_3`,t=`_section_1sdji_21`,n=`_sectionHeader_1sdji_35`,r=`_sectionHeaderIcon_1sdji_71`,i=`_sectionTitle_1sdji_78`,a=`_sectionChevron_1sdji_94`,o=`_sectionBody_1sdji_104`,s=`_sectionBodyCollapsed_1sdji_110`,c=`_sectionBodyInner_1sdji_114`,l=`_list_1sdji_120`,u=`_item_1sdji_131`,d=`_itemBtn_1sdji_137`,f=`_active_1sdji_184`,p=`_itemIcon_1sdji_200`,m=`_itemLabel_1sdji_213`,h=`_itemSuffix_1sdji_223`,g=`_contextMenu_1sdji_232`,_=`_contextMenuItem_1sdji_256`,v=`_contextMenuDestructive_1sdji_292`,y=`_searchWrap_1sdji_298`,b=`_variantBlue_1sdji_309`,x=`_variantGreen_1sdji_318`,S=`_variantRed_1sdji_327`,C=`_variantYellow_1sdji_336`,w=`_variantBlack_1sdji_345`,T=`_variantTransparent_1sdji_354`,E=`_variantBlurred_1sdji_359`,D=`_pageMode_1sdji_375`,O=`_dragOver_1sdji_382`,k=`_collapsed_1sdji_390`,A=`_itemCollapsed_1sdji_401`,j={sidebar:e,section:t,sectionHeader:n,sectionHeaderIcon:r,sectionTitle:i,sectionChevron:a,sectionBody:o,sectionBodyCollapsed:s,sectionBodyInner:c,list:l,item:u,itemBtn:d,active:f,itemIcon:p,itemLabel:m,itemSuffix:h,contextMenu:g,"menu-in":`_menu-in_1sdji_1`,contextMenuItem:_,contextMenuDestructive:v,searchWrap:y,variantBlue:b,variantGreen:x,variantRed:S,variantYellow:C,variantBlack:w,variantTransparent:T,variantBlurred:E,pageMode:D,dragOver:O,collapsed:k,itemCollapsed:A};exports.default=j;
+var e={sidebar:`_sidebar_156vz_3`,section:`_section_156vz_21`,sectionHeader:`_sectionHeader_156vz_35`,sectionHeaderIcon:`_sectionHeaderIcon_156vz_71`,sectionTitle:`_sectionTitle_156vz_78`,sectionChevron:`_sectionChevron_156vz_94`,sectionBody:`_sectionBody_156vz_104`,sectionBodyCollapsed:`_sectionBodyCollapsed_156vz_110`,sectionBodyInner:`_sectionBodyInner_156vz_114`,list:`_list_156vz_120`,item:`_item_156vz_131`,itemBtn:`_itemBtn_156vz_137`,active:`_active_156vz_184`,itemIcon:`_itemIcon_156vz_200`,itemLabel:`_itemLabel_156vz_213`,itemSuffix:`_itemSuffix_156vz_223`,contextMenu:`_contextMenu_156vz_232`,"menu-in":`_menu-in_156vz_1`,contextMenuItem:`_contextMenuItem_156vz_262`,contextMenuDestructive:`_contextMenuDestructive_156vz_298`,searchWrap:`_searchWrap_156vz_304`,variantBlue:`_variantBlue_156vz_315`,variantGreen:`_variantGreen_156vz_324`,variantRed:`_variantRed_156vz_333`,variantYellow:`_variantYellow_156vz_342`,variantBlack:`_variantBlack_156vz_351`,variantTransparent:`_variantTransparent_156vz_360`,variantBlurred:`_variantBlurred_156vz_365`,pageMode:`_pageMode_156vz_381`,dragOver:`_dragOver_156vz_388`,collapsed:`_collapsed_156vz_396`,itemCollapsed:`_itemCollapsed_156vz_407`};exports.default=e;
 //# sourceMappingURL=Sidebar.module.css.cjs.map

package/dist/components/Sidebar/Sidebar.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.module.css.cjs","names":[],"sources":["../../../src/components/Sidebar/Sidebar.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── */\n\n.sidebar {\n  display: flex;\n  flex-direction: column;\n  width: var(--gnome-layout-sidebar-default-width, 240px);\n  height: 100%;\n  background-color: var(--gnome-sidebar-bg-color, #ebebeb);\n  color: var(--gnome-sidebar-fg-color, rgba(0, 0, 0, 0.8));\n  border-right: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: var(--gnome-space-1, 6px);\n  gap: 0;\n  transition: width 200ms var(--gnome-easing-default, ease);\n  flex-shrink: 0;\n}\n\n/* ─── Section ───────────────────────────────────────────────────────────────── */\n\n.section {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Divider between consecutive sections */\n.section + .section {\n  margin-top: var(--gnome-space-1, 6px);\n  padding-top: var(--gnome-space-1, 6px);\n  border-top: 1px solid var(--gnome-divider-color);\n}\n\n/* ─── Section header (title row, optionally a button when collapsible) ──────── */\n\n.sectionHeader {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  width: 100%;\n  margin: 4px 0 2px;\n  padding: 2px var(--gnome-space-1, 6px);\n  border-radius: var(--gnome-radius-sm, 4px);\n  background: transparent;\n  border: none;\n  font: inherit;\n  text-align: start;\n  cursor: default;\n}\n\nbutton.sectionHeader {\n  cursor: pointer;\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\nbutton.sectionHeader:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\nbutton.sectionHeader:active {\n  background-color: var(--gnome-active-overlay);\n}\n\nbutton.sectionHeader:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-sidebar-bg-color, #ebebeb),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.sectionHeaderIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  opacity: 0.7;\n}\n\n.sectionTitle {\n  flex: 1;\n  min-width: 0;\n  padding: 0;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  opacity: 0.5;\n  user-select: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sectionChevron {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-left: auto;\n  opacity: 0.5;\n}\n\n/* ─── Collapsible section body ──────────────────────────────────────────────── */\n\n.sectionBody {\n  display: grid;\n  grid-template-rows: 1fr;\n  transition: grid-template-rows 200ms var(--gnome-easing-default, ease);\n}\n\n.sectionBodyCollapsed {\n  grid-template-rows: 0fr;\n}\n\n.sectionBodyInner {\n  overflow: hidden;\n}\n\n/* ─── List ─────────────────────────────────────────────────────────────────── */\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n/* ─── Item wrapper ─────────────────────────────────────────────────────────── */\n\n.item {\n  display: block;\n}\n\n/* ─── Item button ──────────────────────────────────────────────────────────── */\n\n.itemBtn {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  text-align: start;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  width: 100%;\n  padding: 8px var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-md, 8px);\n\n  color: var(--gnome-sidebar-fg-color, rgba(0, 0, 0, 0.8));\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.itemBtn:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.itemBtn:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.itemBtn:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-sidebar-bg-color, #ebebeb),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.itemBtn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Active state ─────────────────────────────────────────────────────────── */\n\n.active {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.active:hover {\n  filter: brightness(1.08);\n}\n\n.active:active {\n  filter: brightness(0.92);\n}\n\n/* ─── Icon ─────────────────────────────────────────────────────────────────── */\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  opacity: 0.85;\n}\n\n.active .itemIcon {\n  opacity: 1;\n}\n\n/* ─── Label ────────────────────────────────────────────────────────────────── */\n\n.itemLabel {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Suffix (trailing widget) ──────────────────────────────────────────────── */\n\n.itemSuffix {\n  flex-shrink: 0;\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n}\n\n/* ─── Context menu ──────────────────────────────────────────────────────────── */\n\n.contextMenu {\n  position: fixed;\n  z-index: 10500;\n  min-width: 160px;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-border-subtle);\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow: var(--gnome-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.15));\n  padding: 4px;\n  overflow: hidden;\n\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n\n  animation: menu-in var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes menu-in {\n  from { opacity: 0; transform: scale(0.96); }\n  to   { opacity: 1; transform: scale(1); }\n}\n\n.contextMenuItem {\n  appearance: none;\n  border: none;\n  background: transparent;\n  width: 100%;\n  text-align: start;\n  cursor: pointer;\n  outline: none;\n\n  padding: 6px var(--gnome-space-2, 12px);\n  border-radius: calc(var(--gnome-radius-md, 8px) - 4px);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.contextMenuItem:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.contextMenuItem:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n.contextMenuItem:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--gnome-focus-ring-color, #3584e4);\n}\n\n.contextMenuItem:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.contextMenuDestructive {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── Search wrap ───────────────────────────────────────────────────────────── */\n\n.searchWrap {\n  padding-bottom: var(--gnome-space-1, 6px);\n}\n\n/* Override SearchBar min-height to keep it compact inside the sidebar */\n.searchWrap > * {\n  min-height: unset;\n}\n\n/* ─── Variants ──────────────────────────────────────────────────────────────── */\n\n.variantBlue {\n  --gnome-sidebar-bg-color: #1a4a7a;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.95);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.1);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.18);\n  --gnome-divider-color: rgba(255, 255, 255, 0.15);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.15);\n}\n\n.variantGreen {\n  --gnome-sidebar-bg-color: #1a4a2e;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.95);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.1);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.18);\n  --gnome-divider-color: rgba(255, 255, 255, 0.15);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.15);\n}\n\n.variantRed {\n  --gnome-sidebar-bg-color: #6e1414;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.95);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.1);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.18);\n  --gnome-divider-color: rgba(255, 255, 255, 0.15);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.15);\n}\n\n.variantYellow {\n  --gnome-sidebar-bg-color: #5a4500;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.95);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.1);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.18);\n  --gnome-divider-color: rgba(255, 255, 255, 0.15);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.15);\n}\n\n.variantBlack {\n  --gnome-sidebar-bg-color: #0a0a0a;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.9);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.08);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.14);\n  --gnome-divider-color: rgba(255, 255, 255, 0.1);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.1);\n}\n\n.variantTransparent {\n  --gnome-sidebar-bg-color: transparent;\n  border-right-color: var(--gnome-divider-color);\n}\n\n.variantBlurred {\n  --gnome-sidebar-bg-color: rgba(255, 255, 255, 0.55);\n  border-right-color: rgba(255, 255, 255, 0.25);\n  backdrop-filter: blur(20px) saturate(1.8);\n  -webkit-backdrop-filter: blur(20px) saturate(1.8);\n}\n\n@media (prefers-color-scheme: dark) {\n  .variantBlurred {\n    --gnome-sidebar-bg-color: rgba(30, 30, 30, 0.6);\n    border-right-color: rgba(255, 255, 255, 0.1);\n  }\n}\n\n/* ─── Page mode (full-width boxed-list layout) ──────────────────────────────── */\n\n.pageMode {\n  width: 100%;\n  border-right: none;\n}\n\n/* ─── Drag-over highlight ───────────────────────────────────────────────────── */\n\n.dragOver {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n  opacity: 0.7;\n}\n\n/* ─── Collapsed (icon-only / rail) mode ────────────────────────────────────── */\n\n.collapsed {\n  width: var(--gnome-layout-sidebar-rail-width, 56px);\n  transition: width 200ms var(--gnome-easing-default, ease);\n}\n\n/* Hide section headings when collapsed */\n.collapsed .sectionTitle {\n  display: none;\n}\n\n/* Center icon when collapsed */\n.itemCollapsed {\n  justify-content: center;\n  padding-left: 0;\n  padding-right: 0;\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .sidebar {\n    border-right-width: 2px;\n  }\n\n  .section + .section {\n    border-top-width: 2px;\n  }\n\n  .contextMenu {\n    border-width: 2px;\n  }\n\n  .active {\n    outline: 2px solid var(--gnome-accent-fg-color, #ffffff);\n    outline-offset: -3px;\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .itemBtn,\n  button.sectionHeader,\n  .sectionBody {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Sidebar.module.css.cjs","names":[],"sources":["../../../src/components/Sidebar/Sidebar.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── */\n\n.sidebar {\n  display: flex;\n  flex-direction: column;\n  width: var(--gnome-layout-sidebar-default-width, 240px);\n  height: 100%;\n  background-color: var(--gnome-sidebar-bg-color, #ebebeb);\n  color: var(--gnome-sidebar-fg-color, rgba(0, 0, 0, 0.8));\n  border-right: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: var(--gnome-space-1, 6px);\n  gap: 0;\n  transition: width 200ms var(--gnome-easing-default, ease);\n  flex-shrink: 0;\n}\n\n/* ─── Section ───────────────────────────────────────────────────────────────── */\n\n.section {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Divider between consecutive sections */\n.section + .section {\n  margin-top: var(--gnome-space-1, 6px);\n  padding-top: var(--gnome-space-1, 6px);\n  border-top: 1px solid var(--gnome-divider-color);\n}\n\n/* ─── Section header (title row, optionally a button when collapsible) ──────── */\n\n.sectionHeader {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  width: 100%;\n  margin: 4px 0 2px;\n  padding: 2px var(--gnome-space-1, 6px);\n  border-radius: var(--gnome-radius-sm, 4px);\n  background: transparent;\n  border: none;\n  font: inherit;\n  text-align: start;\n  cursor: default;\n}\n\nbutton.sectionHeader {\n  cursor: pointer;\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\nbutton.sectionHeader:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\nbutton.sectionHeader:active {\n  background-color: var(--gnome-active-overlay);\n}\n\nbutton.sectionHeader:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-sidebar-bg-color, #ebebeb),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.sectionHeaderIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  opacity: 0.7;\n}\n\n.sectionTitle {\n  flex: 1;\n  min-width: 0;\n  padding: 0;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  opacity: 0.5;\n  user-select: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sectionChevron {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-left: auto;\n  opacity: 0.5;\n}\n\n/* ─── Collapsible section body ──────────────────────────────────────────────── */\n\n.sectionBody {\n  display: grid;\n  grid-template-rows: 1fr;\n  transition: grid-template-rows 200ms var(--gnome-easing-default, ease);\n}\n\n.sectionBodyCollapsed {\n  grid-template-rows: 0fr;\n}\n\n.sectionBodyInner {\n  overflow: hidden;\n}\n\n/* ─── List ─────────────────────────────────────────────────────────────────── */\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n/* ─── Item wrapper ─────────────────────────────────────────────────────────── */\n\n.item {\n  display: block;\n}\n\n/* ─── Item button ──────────────────────────────────────────────────────────── */\n\n.itemBtn {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  text-align: start;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  width: 100%;\n  padding: 8px var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-md, 8px);\n\n  color: var(--gnome-sidebar-fg-color, rgba(0, 0, 0, 0.8));\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.itemBtn:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.itemBtn:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.itemBtn:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-sidebar-bg-color, #ebebeb),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.itemBtn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Active state ─────────────────────────────────────────────────────────── */\n\n.active {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.active:hover {\n  filter: brightness(1.08);\n}\n\n.active:active {\n  filter: brightness(0.92);\n}\n\n/* ─── Icon ─────────────────────────────────────────────────────────────────── */\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  opacity: 0.85;\n}\n\n.active .itemIcon {\n  opacity: 1;\n}\n\n/* ─── Label ────────────────────────────────────────────────────────────────── */\n\n.itemLabel {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Suffix (trailing widget) ──────────────────────────────────────────────── */\n\n.itemSuffix {\n  flex-shrink: 0;\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n}\n\n/* ─── Context menu ──────────────────────────────────────────────────────────── */\n\n.contextMenu {\n  position: fixed;\n  z-index: 10500;\n  min-width: 160px;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-border-subtle);\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow: var(--gnome-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.15));\n  padding: 4px;\n  overflow: hidden;\n\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n\n  animation: menu-in var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes menu-in {\n  from {\n    opacity: 0;\n    transform: scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n.contextMenuItem {\n  appearance: none;\n  border: none;\n  background: transparent;\n  width: 100%;\n  text-align: start;\n  cursor: pointer;\n  outline: none;\n\n  padding: 6px var(--gnome-space-2, 12px);\n  border-radius: calc(var(--gnome-radius-md, 8px) - 4px);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.contextMenuItem:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.contextMenuItem:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n.contextMenuItem:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--gnome-focus-ring-color, #3584e4);\n}\n\n.contextMenuItem:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.contextMenuDestructive {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── Search wrap ───────────────────────────────────────────────────────────── */\n\n.searchWrap {\n  padding-bottom: var(--gnome-space-1, 6px);\n}\n\n/* Override SearchBar min-height to keep it compact inside the sidebar */\n.searchWrap > * {\n  min-height: unset;\n}\n\n/* ─── Variants ──────────────────────────────────────────────────────────────── */\n\n.variantBlue {\n  --gnome-sidebar-bg-color: #1a4a7a;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.95);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.1);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.18);\n  --gnome-divider-color: rgba(255, 255, 255, 0.15);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.15);\n}\n\n.variantGreen {\n  --gnome-sidebar-bg-color: #1a4a2e;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.95);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.1);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.18);\n  --gnome-divider-color: rgba(255, 255, 255, 0.15);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.15);\n}\n\n.variantRed {\n  --gnome-sidebar-bg-color: #6e1414;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.95);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.1);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.18);\n  --gnome-divider-color: rgba(255, 255, 255, 0.15);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.15);\n}\n\n.variantYellow {\n  --gnome-sidebar-bg-color: #5a4500;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.95);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.1);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.18);\n  --gnome-divider-color: rgba(255, 255, 255, 0.15);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.15);\n}\n\n.variantBlack {\n  --gnome-sidebar-bg-color: #0a0a0a;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.9);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.08);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.14);\n  --gnome-divider-color: rgba(255, 255, 255, 0.1);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.1);\n}\n\n.variantTransparent {\n  --gnome-sidebar-bg-color: transparent;\n  border-right-color: var(--gnome-divider-color);\n}\n\n.variantBlurred {\n  --gnome-sidebar-bg-color: rgba(255, 255, 255, 0.55);\n  border-right-color: rgba(255, 255, 255, 0.25);\n  backdrop-filter: blur(20px) saturate(1.8);\n  -webkit-backdrop-filter: blur(20px) saturate(1.8);\n}\n\n@media (prefers-color-scheme: dark) {\n  .variantBlurred {\n    --gnome-sidebar-bg-color: rgba(30, 30, 30, 0.6);\n    border-right-color: rgba(255, 255, 255, 0.1);\n  }\n}\n\n/* ─── Page mode (full-width boxed-list layout) ──────────────────────────────── */\n\n.pageMode {\n  width: 100%;\n  border-right: none;\n}\n\n/* ─── Drag-over highlight ───────────────────────────────────────────────────── */\n\n.dragOver {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n  opacity: 0.7;\n}\n\n/* ─── Collapsed (icon-only / rail) mode ────────────────────────────────────── */\n\n.collapsed {\n  width: var(--gnome-layout-sidebar-rail-width, 56px);\n  transition: width 200ms var(--gnome-easing-default, ease);\n}\n\n/* Hide section headings when collapsed */\n.collapsed .sectionTitle {\n  display: none;\n}\n\n/* Center icon when collapsed */\n.itemCollapsed {\n  justify-content: center;\n  padding-left: 0;\n  padding-right: 0;\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .sidebar {\n    border-right-width: 2px;\n  }\n\n  .section + .section {\n    border-top-width: 2px;\n  }\n\n  .contextMenu {\n    border-width: 2px;\n  }\n\n  .active {\n    outline: 2px solid var(--gnome-accent-fg-color, #ffffff);\n    outline-offset: -3px;\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .itemBtn,\n  button.sectionHeader,\n  .sectionBody {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/Sidebar/Sidebar.module.css.js

@@ -1,39 +1,38 @@
-//#region src/components/Sidebar/Sidebar.module.css
-var e = "_sidebar_1sdji_3", t = "_section_1sdji_21", n = "_sectionHeader_1sdji_35", r = "_sectionHeaderIcon_1sdji_71", i = "_sectionTitle_1sdji_78", a = "_sectionChevron_1sdji_94", o = "_sectionBody_1sdji_104", s = "_sectionBodyCollapsed_1sdji_110", c = "_sectionBodyInner_1sdji_114", l = "_list_1sdji_120", u = "_item_1sdji_131", d = "_itemBtn_1sdji_137", f = "_active_1sdji_184", p = "_itemIcon_1sdji_200", m = "_itemLabel_1sdji_213", h = "_itemSuffix_1sdji_223", g = "_contextMenu_1sdji_232", _ = "_contextMenuItem_1sdji_256", v = "_contextMenuDestructive_1sdji_292", y = "_searchWrap_1sdji_298", b = "_variantBlue_1sdji_309", x = "_variantGreen_1sdji_318", S = "_variantRed_1sdji_327", C = "_variantYellow_1sdji_336", w = "_variantBlack_1sdji_345", T = "_variantTransparent_1sdji_354", E = "_variantBlurred_1sdji_359", D = "_pageMode_1sdji_375", O = "_dragOver_1sdji_382", k = "_collapsed_1sdji_390", A = "_itemCollapsed_1sdji_401", j = {
-	sidebar: e,
-	section: t,
-	sectionHeader: n,
-	sectionHeaderIcon: r,
-	sectionTitle: i,
-	sectionChevron: a,
-	sectionBody: o,
-	sectionBodyCollapsed: s,
-	sectionBodyInner: c,
-	list: l,
-	item: u,
-	itemBtn: d,
-	active: f,
-	itemIcon: p,
-	itemLabel: m,
-	itemSuffix: h,
-	contextMenu: g,
-	"menu-in": "_menu-in_1sdji_1",
-	contextMenuItem: _,
-	contextMenuDestructive: v,
-	searchWrap: y,
-	variantBlue: b,
-	variantGreen: x,
-	variantRed: S,
-	variantYellow: C,
-	variantBlack: w,
-	variantTransparent: T,
-	variantBlurred: E,
-	pageMode: D,
-	dragOver: O,
-	collapsed: k,
-	itemCollapsed: A
+var e = {
+	sidebar: "_sidebar_156vz_3",
+	section: "_section_156vz_21",
+	sectionHeader: "_sectionHeader_156vz_35",
+	sectionHeaderIcon: "_sectionHeaderIcon_156vz_71",
+	sectionTitle: "_sectionTitle_156vz_78",
+	sectionChevron: "_sectionChevron_156vz_94",
+	sectionBody: "_sectionBody_156vz_104",
+	sectionBodyCollapsed: "_sectionBodyCollapsed_156vz_110",
+	sectionBodyInner: "_sectionBodyInner_156vz_114",
+	list: "_list_156vz_120",
+	item: "_item_156vz_131",
+	itemBtn: "_itemBtn_156vz_137",
+	active: "_active_156vz_184",
+	itemIcon: "_itemIcon_156vz_200",
+	itemLabel: "_itemLabel_156vz_213",
+	itemSuffix: "_itemSuffix_156vz_223",
+	contextMenu: "_contextMenu_156vz_232",
+	"menu-in": "_menu-in_156vz_1",
+	contextMenuItem: "_contextMenuItem_156vz_262",
+	contextMenuDestructive: "_contextMenuDestructive_156vz_298",
+	searchWrap: "_searchWrap_156vz_304",
+	variantBlue: "_variantBlue_156vz_315",
+	variantGreen: "_variantGreen_156vz_324",
+	variantRed: "_variantRed_156vz_333",
+	variantYellow: "_variantYellow_156vz_342",
+	variantBlack: "_variantBlack_156vz_351",
+	variantTransparent: "_variantTransparent_156vz_360",
+	variantBlurred: "_variantBlurred_156vz_365",
+	pageMode: "_pageMode_156vz_381",
+	dragOver: "_dragOver_156vz_388",
+	collapsed: "_collapsed_156vz_396",
+	itemCollapsed: "_itemCollapsed_156vz_407"
 };
 //#endregion
-export { j as default };
+export { e as default };
 
 //# sourceMappingURL=Sidebar.module.css.js.map

package/dist/components/Sidebar/Sidebar.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.module.css.js","names":[],"sources":["../../../src/components/Sidebar/Sidebar.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── */\n\n.sidebar {\n  display: flex;\n  flex-direction: column;\n  width: var(--gnome-layout-sidebar-default-width, 240px);\n  height: 100%;\n  background-color: var(--gnome-sidebar-bg-color, #ebebeb);\n  color: var(--gnome-sidebar-fg-color, rgba(0, 0, 0, 0.8));\n  border-right: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: var(--gnome-space-1, 6px);\n  gap: 0;\n  transition: width 200ms var(--gnome-easing-default, ease);\n  flex-shrink: 0;\n}\n\n/* ─── Section ───────────────────────────────────────────────────────────────── */\n\n.section {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Divider between consecutive sections */\n.section + .section {\n  margin-top: var(--gnome-space-1, 6px);\n  padding-top: var(--gnome-space-1, 6px);\n  border-top: 1px solid var(--gnome-divider-color);\n}\n\n/* ─── Section header (title row, optionally a button when collapsible) ──────── */\n\n.sectionHeader {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  width: 100%;\n  margin: 4px 0 2px;\n  padding: 2px var(--gnome-space-1, 6px);\n  border-radius: var(--gnome-radius-sm, 4px);\n  background: transparent;\n  border: none;\n  font: inherit;\n  text-align: start;\n  cursor: default;\n}\n\nbutton.sectionHeader {\n  cursor: pointer;\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\nbutton.sectionHeader:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\nbutton.sectionHeader:active {\n  background-color: var(--gnome-active-overlay);\n}\n\nbutton.sectionHeader:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-sidebar-bg-color, #ebebeb),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.sectionHeaderIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  opacity: 0.7;\n}\n\n.sectionTitle {\n  flex: 1;\n  min-width: 0;\n  padding: 0;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  opacity: 0.5;\n  user-select: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sectionChevron {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-left: auto;\n  opacity: 0.5;\n}\n\n/* ─── Collapsible section body ──────────────────────────────────────────────── */\n\n.sectionBody {\n  display: grid;\n  grid-template-rows: 1fr;\n  transition: grid-template-rows 200ms var(--gnome-easing-default, ease);\n}\n\n.sectionBodyCollapsed {\n  grid-template-rows: 0fr;\n}\n\n.sectionBodyInner {\n  overflow: hidden;\n}\n\n/* ─── List ─────────────────────────────────────────────────────────────────── */\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n/* ─── Item wrapper ─────────────────────────────────────────────────────────── */\n\n.item {\n  display: block;\n}\n\n/* ─── Item button ──────────────────────────────────────────────────────────── */\n\n.itemBtn {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  text-align: start;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  width: 100%;\n  padding: 8px var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-md, 8px);\n\n  color: var(--gnome-sidebar-fg-color, rgba(0, 0, 0, 0.8));\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.itemBtn:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.itemBtn:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.itemBtn:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-sidebar-bg-color, #ebebeb),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.itemBtn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Active state ─────────────────────────────────────────────────────────── */\n\n.active {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.active:hover {\n  filter: brightness(1.08);\n}\n\n.active:active {\n  filter: brightness(0.92);\n}\n\n/* ─── Icon ─────────────────────────────────────────────────────────────────── */\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  opacity: 0.85;\n}\n\n.active .itemIcon {\n  opacity: 1;\n}\n\n/* ─── Label ────────────────────────────────────────────────────────────────── */\n\n.itemLabel {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Suffix (trailing widget) ──────────────────────────────────────────────── */\n\n.itemSuffix {\n  flex-shrink: 0;\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n}\n\n/* ─── Context menu ──────────────────────────────────────────────────────────── */\n\n.contextMenu {\n  position: fixed;\n  z-index: 10500;\n  min-width: 160px;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-border-subtle);\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow: var(--gnome-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.15));\n  padding: 4px;\n  overflow: hidden;\n\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n\n  animation: menu-in var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes menu-in {\n  from { opacity: 0; transform: scale(0.96); }\n  to   { opacity: 1; transform: scale(1); }\n}\n\n.contextMenuItem {\n  appearance: none;\n  border: none;\n  background: transparent;\n  width: 100%;\n  text-align: start;\n  cursor: pointer;\n  outline: none;\n\n  padding: 6px var(--gnome-space-2, 12px);\n  border-radius: calc(var(--gnome-radius-md, 8px) - 4px);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.contextMenuItem:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.contextMenuItem:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n.contextMenuItem:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--gnome-focus-ring-color, #3584e4);\n}\n\n.contextMenuItem:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.contextMenuDestructive {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── Search wrap ───────────────────────────────────────────────────────────── */\n\n.searchWrap {\n  padding-bottom: var(--gnome-space-1, 6px);\n}\n\n/* Override SearchBar min-height to keep it compact inside the sidebar */\n.searchWrap > * {\n  min-height: unset;\n}\n\n/* ─── Variants ──────────────────────────────────────────────────────────────── */\n\n.variantBlue {\n  --gnome-sidebar-bg-color: #1a4a7a;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.95);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.1);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.18);\n  --gnome-divider-color: rgba(255, 255, 255, 0.15);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.15);\n}\n\n.variantGreen {\n  --gnome-sidebar-bg-color: #1a4a2e;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.95);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.1);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.18);\n  --gnome-divider-color: rgba(255, 255, 255, 0.15);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.15);\n}\n\n.variantRed {\n  --gnome-sidebar-bg-color: #6e1414;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.95);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.1);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.18);\n  --gnome-divider-color: rgba(255, 255, 255, 0.15);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.15);\n}\n\n.variantYellow {\n  --gnome-sidebar-bg-color: #5a4500;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.95);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.1);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.18);\n  --gnome-divider-color: rgba(255, 255, 255, 0.15);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.15);\n}\n\n.variantBlack {\n  --gnome-sidebar-bg-color: #0a0a0a;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.9);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.08);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.14);\n  --gnome-divider-color: rgba(255, 255, 255, 0.1);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.1);\n}\n\n.variantTransparent {\n  --gnome-sidebar-bg-color: transparent;\n  border-right-color: var(--gnome-divider-color);\n}\n\n.variantBlurred {\n  --gnome-sidebar-bg-color: rgba(255, 255, 255, 0.55);\n  border-right-color: rgba(255, 255, 255, 0.25);\n  backdrop-filter: blur(20px) saturate(1.8);\n  -webkit-backdrop-filter: blur(20px) saturate(1.8);\n}\n\n@media (prefers-color-scheme: dark) {\n  .variantBlurred {\n    --gnome-sidebar-bg-color: rgba(30, 30, 30, 0.6);\n    border-right-color: rgba(255, 255, 255, 0.1);\n  }\n}\n\n/* ─── Page mode (full-width boxed-list layout) ──────────────────────────────── */\n\n.pageMode {\n  width: 100%;\n  border-right: none;\n}\n\n/* ─── Drag-over highlight ───────────────────────────────────────────────────── */\n\n.dragOver {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n  opacity: 0.7;\n}\n\n/* ─── Collapsed (icon-only / rail) mode ────────────────────────────────────── */\n\n.collapsed {\n  width: var(--gnome-layout-sidebar-rail-width, 56px);\n  transition: width 200ms var(--gnome-easing-default, ease);\n}\n\n/* Hide section headings when collapsed */\n.collapsed .sectionTitle {\n  display: none;\n}\n\n/* Center icon when collapsed */\n.itemCollapsed {\n  justify-content: center;\n  padding-left: 0;\n  padding-right: 0;\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .sidebar {\n    border-right-width: 2px;\n  }\n\n  .section + .section {\n    border-top-width: 2px;\n  }\n\n  .contextMenu {\n    border-width: 2px;\n  }\n\n  .active {\n    outline: 2px solid var(--gnome-accent-fg-color, #ffffff);\n    outline-offset: -3px;\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .itemBtn,\n  button.sectionHeader,\n  .sectionBody {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Sidebar.module.css.js","names":[],"sources":["../../../src/components/Sidebar/Sidebar.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── */\n\n.sidebar {\n  display: flex;\n  flex-direction: column;\n  width: var(--gnome-layout-sidebar-default-width, 240px);\n  height: 100%;\n  background-color: var(--gnome-sidebar-bg-color, #ebebeb);\n  color: var(--gnome-sidebar-fg-color, rgba(0, 0, 0, 0.8));\n  border-right: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: var(--gnome-space-1, 6px);\n  gap: 0;\n  transition: width 200ms var(--gnome-easing-default, ease);\n  flex-shrink: 0;\n}\n\n/* ─── Section ───────────────────────────────────────────────────────────────── */\n\n.section {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Divider between consecutive sections */\n.section + .section {\n  margin-top: var(--gnome-space-1, 6px);\n  padding-top: var(--gnome-space-1, 6px);\n  border-top: 1px solid var(--gnome-divider-color);\n}\n\n/* ─── Section header (title row, optionally a button when collapsible) ──────── */\n\n.sectionHeader {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  width: 100%;\n  margin: 4px 0 2px;\n  padding: 2px var(--gnome-space-1, 6px);\n  border-radius: var(--gnome-radius-sm, 4px);\n  background: transparent;\n  border: none;\n  font: inherit;\n  text-align: start;\n  cursor: default;\n}\n\nbutton.sectionHeader {\n  cursor: pointer;\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\nbutton.sectionHeader:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\nbutton.sectionHeader:active {\n  background-color: var(--gnome-active-overlay);\n}\n\nbutton.sectionHeader:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-sidebar-bg-color, #ebebeb),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.sectionHeaderIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  opacity: 0.7;\n}\n\n.sectionTitle {\n  flex: 1;\n  min-width: 0;\n  padding: 0;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  opacity: 0.5;\n  user-select: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sectionChevron {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-left: auto;\n  opacity: 0.5;\n}\n\n/* ─── Collapsible section body ──────────────────────────────────────────────── */\n\n.sectionBody {\n  display: grid;\n  grid-template-rows: 1fr;\n  transition: grid-template-rows 200ms var(--gnome-easing-default, ease);\n}\n\n.sectionBodyCollapsed {\n  grid-template-rows: 0fr;\n}\n\n.sectionBodyInner {\n  overflow: hidden;\n}\n\n/* ─── List ─────────────────────────────────────────────────────────────────── */\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n/* ─── Item wrapper ─────────────────────────────────────────────────────────── */\n\n.item {\n  display: block;\n}\n\n/* ─── Item button ──────────────────────────────────────────────────────────── */\n\n.itemBtn {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  text-align: start;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  width: 100%;\n  padding: 8px var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-md, 8px);\n\n  color: var(--gnome-sidebar-fg-color, rgba(0, 0, 0, 0.8));\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.itemBtn:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.itemBtn:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.itemBtn:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-sidebar-bg-color, #ebebeb),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.itemBtn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Active state ─────────────────────────────────────────────────────────── */\n\n.active {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.active:hover {\n  filter: brightness(1.08);\n}\n\n.active:active {\n  filter: brightness(0.92);\n}\n\n/* ─── Icon ─────────────────────────────────────────────────────────────────── */\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  opacity: 0.85;\n}\n\n.active .itemIcon {\n  opacity: 1;\n}\n\n/* ─── Label ────────────────────────────────────────────────────────────────── */\n\n.itemLabel {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Suffix (trailing widget) ──────────────────────────────────────────────── */\n\n.itemSuffix {\n  flex-shrink: 0;\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n}\n\n/* ─── Context menu ──────────────────────────────────────────────────────────── */\n\n.contextMenu {\n  position: fixed;\n  z-index: 10500;\n  min-width: 160px;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-border-subtle);\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow: var(--gnome-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.15));\n  padding: 4px;\n  overflow: hidden;\n\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n\n  animation: menu-in var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes menu-in {\n  from {\n    opacity: 0;\n    transform: scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n.contextMenuItem {\n  appearance: none;\n  border: none;\n  background: transparent;\n  width: 100%;\n  text-align: start;\n  cursor: pointer;\n  outline: none;\n\n  padding: 6px var(--gnome-space-2, 12px);\n  border-radius: calc(var(--gnome-radius-md, 8px) - 4px);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.contextMenuItem:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.contextMenuItem:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n.contextMenuItem:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--gnome-focus-ring-color, #3584e4);\n}\n\n.contextMenuItem:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.contextMenuDestructive {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── Search wrap ───────────────────────────────────────────────────────────── */\n\n.searchWrap {\n  padding-bottom: var(--gnome-space-1, 6px);\n}\n\n/* Override SearchBar min-height to keep it compact inside the sidebar */\n.searchWrap > * {\n  min-height: unset;\n}\n\n/* ─── Variants ──────────────────────────────────────────────────────────────── */\n\n.variantBlue {\n  --gnome-sidebar-bg-color: #1a4a7a;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.95);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.1);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.18);\n  --gnome-divider-color: rgba(255, 255, 255, 0.15);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.15);\n}\n\n.variantGreen {\n  --gnome-sidebar-bg-color: #1a4a2e;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.95);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.1);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.18);\n  --gnome-divider-color: rgba(255, 255, 255, 0.15);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.15);\n}\n\n.variantRed {\n  --gnome-sidebar-bg-color: #6e1414;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.95);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.1);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.18);\n  --gnome-divider-color: rgba(255, 255, 255, 0.15);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.15);\n}\n\n.variantYellow {\n  --gnome-sidebar-bg-color: #5a4500;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.95);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.1);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.18);\n  --gnome-divider-color: rgba(255, 255, 255, 0.15);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.15);\n}\n\n.variantBlack {\n  --gnome-sidebar-bg-color: #0a0a0a;\n  --gnome-sidebar-fg-color: rgba(255, 255, 255, 0.9);\n  --gnome-hover-overlay: rgba(255, 255, 255, 0.08);\n  --gnome-active-overlay: rgba(255, 255, 255, 0.14);\n  --gnome-divider-color: rgba(255, 255, 255, 0.1);\n  --gnome-headerbar-border-color: rgba(255, 255, 255, 0.1);\n}\n\n.variantTransparent {\n  --gnome-sidebar-bg-color: transparent;\n  border-right-color: var(--gnome-divider-color);\n}\n\n.variantBlurred {\n  --gnome-sidebar-bg-color: rgba(255, 255, 255, 0.55);\n  border-right-color: rgba(255, 255, 255, 0.25);\n  backdrop-filter: blur(20px) saturate(1.8);\n  -webkit-backdrop-filter: blur(20px) saturate(1.8);\n}\n\n@media (prefers-color-scheme: dark) {\n  .variantBlurred {\n    --gnome-sidebar-bg-color: rgba(30, 30, 30, 0.6);\n    border-right-color: rgba(255, 255, 255, 0.1);\n  }\n}\n\n/* ─── Page mode (full-width boxed-list layout) ──────────────────────────────── */\n\n.pageMode {\n  width: 100%;\n  border-right: none;\n}\n\n/* ─── Drag-over highlight ───────────────────────────────────────────────────── */\n\n.dragOver {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n  opacity: 0.7;\n}\n\n/* ─── Collapsed (icon-only / rail) mode ────────────────────────────────────── */\n\n.collapsed {\n  width: var(--gnome-layout-sidebar-rail-width, 56px);\n  transition: width 200ms var(--gnome-easing-default, ease);\n}\n\n/* Hide section headings when collapsed */\n.collapsed .sectionTitle {\n  display: none;\n}\n\n/* Center icon when collapsed */\n.itemCollapsed {\n  justify-content: center;\n  padding-left: 0;\n  padding-right: 0;\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .sidebar {\n    border-right-width: 2px;\n  }\n\n  .section + .section {\n    border-top-width: 2px;\n  }\n\n  .contextMenu {\n    border-width: 2px;\n  }\n\n  .active {\n    outline: 2px solid var(--gnome-accent-fg-color, #ffffff);\n    outline-offset: -3px;\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .itemBtn,\n  button.sectionHeader,\n  .sectionBody {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/Sidebar/SidebarItem.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Icon/Icon.cjs`),t=require(`../Tooltip/Tooltip.cjs`),n=require(`./Sidebar.module.css.cjs`),r=require(`./Sidebar.cjs`);let i=require(`react`),a=require(`react-dom`),o=require(`react/jsx-runtime`);function s({label:s,icon:c,active:l=!1,suffix:u,badge:d,tooltip:f,menuItems:p,onDrop:m,acceptTypes:h,className:g,..._}){let v=r.useSidebarCollapsed(),y=(0,i.useContext)(r.SidebarFilterContext),b=u??d,x=v?f??s:f,S=y.length>0&&!s.toLowerCase().includes(y.toLowerCase()),[C,w]=(0,i.useState)(!1),T=e=>{m&&(h?.length&&!h.some(t=>e.dataTransfer.types.includes(t))||(e.preventDefault(),w(!0)))},E=()=>w(!1),D=e=>{m&&(e.preventDefault(),w(!1),m(e))},[O,k]=(0,i.useState)(null),A=(0,i.useRef)(null),j=(0,i.useCallback)((e,t)=>k({x:e,y:t}),[]),M=(0,i.useCallback)(()=>k(null),[]);(0,i.useEffect)(()=>{if(!O)return;let e=e=>{A.current&&!A.current.contains(e.target)&&M()},t=e=>{e.key===`Escape`&&M()};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[O,M]);let N=e=>{p?.length&&(e.preventDefault(),j(e.clientX,e.clientY))},P=e=>{if(e.key===`ContextMenu`||e.key===`F10`&&e.shiftKey){if(!p?.length)return;e.preventDefault();let t=e.currentTarget.getBoundingClientRect();j(t.right,t.top)}},F=(0,o.jsxs)(`button`,{type:`button`,"aria-current":l?`page`:void 0,"aria-label":v?s:void 0,className:[n.default.itemBtn,l?n.default.active:null,v?n.default.itemCollapsed:null,C?n.default.dragOver:null,g].filter(Boolean).join(` `),onContextMenu:N,onKeyDown:P,onDragOver:T,onDragLeave:E,onDrop:D,..._,children:[c&&(0,o.jsx)(`span`,{className:n.default.itemIcon,children:(0,o.jsx)(e.Icon,{icon:c,size:`md`,"aria-hidden":!0})}),!v&&(0,o.jsx)(`span`,{className:n.default.itemLabel,children:s}),!v&&b&&(0,o.jsx)(`span`,{className:n.default.itemSuffix,children:b})]});return(0,o.jsxs)(`li`,{className:n.default.item,hidden:S||void 0,children:[x?(0,o.jsx)(t.Tooltip,{label:x,placement:`right`,children:F}):F,O&&p?.length&&typeof document<`u`&&(0,a.createPortal)((0,o.jsx)(`div`,{ref:A,className:n.default.contextMenu,style:{top:O.y,left:O.x},role:`menu`,children:p.map(e=>(0,o.jsx)(`button`,{type:`button`,role:`menuitem`,disabled:e.disabled,className:[n.default.contextMenuItem,e.destructive?n.default.contextMenuDestructive:null].filter(Boolean).join(` `),onClick:()=>{e.onClick(),M()},children:e.label},e.label))}),document.body)]})}exports.SidebarItem=s;
+const e=require("../Icon/Icon.cjs"),t=require("../Tooltip/Tooltip.cjs"),n=require("./Sidebar.module.css.cjs"),r=require("./Sidebar.cjs");let i=require("react"),a=require("react-dom"),o=require("react/jsx-runtime");var s=({label:s,icon:c,active:l=!1,suffix:u,badge:d,tooltip:f,menuItems:p,onDrop:m,acceptTypes:h,className:g,..._})=>{let v=r.useSidebarCollapsed(),y=(0,i.useContext)(r.SidebarFilterContext),b=u??d,x=v?f??s:f,S=y.length>0&&!s.toLowerCase().includes(y.toLowerCase()),[C,w]=(0,i.useState)(!1),T=e=>{m&&(h?.length&&!h.some(t=>e.dataTransfer.types.includes(t))||(e.preventDefault(),w(!0)))},E=()=>w(!1),D=e=>{m&&(e.preventDefault(),w(!1),m(e))},[O,k]=(0,i.useState)(null),A=(0,i.useRef)(null),j=(0,i.useCallback)((e,t)=>k({x:e,y:t}),[]),M=(0,i.useCallback)(()=>k(null),[]);(0,i.useEffect)(()=>{if(!O)return;let e=e=>{A.current&&!A.current.contains(e.target)&&M()},t=e=>{e.key===`Escape`&&M()};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[O,M]);let N=(0,o.jsxs)(`button`,{type:`button`,"aria-current":l?`page`:void 0,"aria-label":v?s:void 0,className:[n.default.itemBtn,l?n.default.active:null,v?n.default.itemCollapsed:null,C?n.default.dragOver:null,g].filter(Boolean).join(` `),onContextMenu:e=>{p?.length&&(e.preventDefault(),j(e.clientX,e.clientY))},onKeyDown:e=>{if(e.key===`ContextMenu`||e.key===`F10`&&e.shiftKey){if(!p?.length)return;e.preventDefault();let t=e.currentTarget.getBoundingClientRect();j(t.right,t.top)}},onDragOver:T,onDragLeave:E,onDrop:D,..._,children:[c&&(0,o.jsx)(`span`,{className:n.default.itemIcon,children:(0,o.jsx)(e.Icon,{icon:c,size:`md`,"aria-hidden":!0})}),!v&&(0,o.jsx)(`span`,{className:n.default.itemLabel,children:s}),!v&&b&&(0,o.jsx)(`span`,{className:n.default.itemSuffix,children:b})]});return(0,o.jsxs)(`li`,{className:n.default.item,hidden:S||void 0,children:[x?(0,o.jsx)(t.Tooltip,{label:x,placement:`right`,children:N}):N,O&&!!p?.length&&typeof document<`u`&&(0,a.createPortal)((0,o.jsx)(`div`,{ref:A,className:n.default.contextMenu,style:{top:O.y,left:O.x},role:`menu`,children:p.map(e=>(0,o.jsx)(`button`,{type:`button`,role:`menuitem`,disabled:e.disabled,className:[n.default.contextMenuItem,e.destructive?n.default.contextMenuDestructive:null].filter(Boolean).join(` `),onClick:()=>{e.onClick(),M()},children:e.label},e.label))}),document.body)]})};exports.SidebarItem=s;
 //# sourceMappingURL=SidebarItem.cjs.map

package/dist/components/Sidebar/SidebarItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.cjs","names":[],"sources":["../../../src/components/Sidebar/SidebarItem.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  useContext,\n  type ButtonHTMLAttributes,\n  type DragEvent,\n  type ReactNode,\n  type MouseEvent,\n  type KeyboardEvent,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { Tooltip } from \"../Tooltip\";\nimport { useSidebarCollapsed, SidebarFilterContext } from \"./Sidebar\";\nimport styles from \"./Sidebar.module.css\";\n\nexport interface SidebarMenuEntry {\n  /** Label shown in the context menu. */\n  label: string;\n  /** Called when the entry is clicked. */\n  onClick: () => void;\n  /** Renders the entry in red. Use for destructive actions. */\n  destructive?: boolean;\n  /** Disables the entry. */\n  disabled?: boolean;\n}\n\nexport interface SidebarItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. */\n  label: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /** Marks this item as the currently active view. */\n  active?: boolean;\n  /**\n   * Trailing widget — any ReactNode (badge, button, icon…).\n   * Supersedes `badge` when both are provided.\n   */\n  suffix?: ReactNode;\n  /**\n   * @deprecated Use `suffix` instead.\n   */\n  badge?: ReactNode;\n  /**\n   * Short tooltip shown when hovering the item.\n   * Automatically shown when the sidebar is `collapsed`.\n   */\n  tooltip?: string;\n  /**\n   * Context-menu entries shown on right-click or the Menu key.\n   */\n  menuItems?: SidebarMenuEntry[];\n  /**\n   * Called when a dragged item is dropped onto this row.\n   * Mirrors `AdwSidebar` per-row drop target support (libadwaita 1.9).\n   */\n  onDrop?: (e: DragEvent<HTMLButtonElement>) => void;\n  /**\n   * MIME types this row accepts as drop targets (e.g. `[\"text/plain\"]`).\n   * When provided, drops of other types are rejected via `e.preventDefault()`.\n   * When omitted, all types are accepted.\n   */\n  acceptTypes?: string[];\n}\n\n/**\n * Individual navigation item inside a `Sidebar` or `SidebarSection`.\n *\n * **Tier 11 additions:**\n * - Automatically hidden when `Sidebar`'s `filter` / `searchable` is active\n *   and the `label` does not match (case-insensitive substring).\n * - `onDrop` / `acceptTypes` — HTML5 drag-and-drop target support.\n */\nexport function SidebarItem({\n  label,\n  icon,\n  active = false,\n  suffix,\n  badge,\n  tooltip,\n  menuItems,\n  onDrop,\n  acceptTypes,\n  className,\n  ...props\n}: SidebarItemProps) {\n  const collapsed = useSidebarCollapsed();\n  const filterValue = useContext(SidebarFilterContext);\n  const trailing = suffix ?? badge;\n  const effectiveTooltip = collapsed ? (tooltip ?? label) : tooltip;\n\n  // ── Filter visibility ────────────────────────────────────────────────────\n  const isFiltered =\n    filterValue.length > 0 &&\n    !label.toLowerCase().includes(filterValue.toLowerCase());\n\n  // ── Drag-and-drop ────────────────────────────────────────────────────────\n  const [isDragOver, setIsDragOver] = useState(false);\n\n  const handleDragOver = (e: DragEvent<HTMLButtonElement>) => {\n    if (!onDrop) return;\n    if (acceptTypes?.length) {\n      const accepted = acceptTypes.some((t) => e.dataTransfer.types.includes(t));\n      if (!accepted) return;\n    }\n    e.preventDefault();\n    setIsDragOver(true);\n  };\n\n  const handleDragLeave = () => setIsDragOver(false);\n\n  const handleDrop = (e: DragEvent<HTMLButtonElement>) => {\n    if (!onDrop) return;\n    e.preventDefault();\n    setIsDragOver(false);\n    onDrop(e);\n  };\n\n  // ── Context menu ─────────────────────────────────────────────────────────\n  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const openMenu = useCallback((x: number, y: number) => setMenu({ x, y }), []);\n  const closeMenu = useCallback(() => setMenu(null), []);\n\n  useEffect(() => {\n    if (!menu) return;\n    const handleClick = (e: globalThis.MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) closeMenu();\n    };\n    const handleKey = (e: globalThis.KeyboardEvent) => {\n      if (e.key === \"Escape\") closeMenu();\n    };\n    document.addEventListener(\"mousedown\", handleClick);\n    document.addEventListener(\"keydown\", handleKey);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClick);\n      document.removeEventListener(\"keydown\", handleKey);\n    };\n  }, [menu, closeMenu]);\n\n  const handleContextMenu = (e: MouseEvent<HTMLButtonElement>) => {\n    if (!menuItems?.length) return;\n    e.preventDefault();\n    openMenu(e.clientX, e.clientY);\n  };\n\n  const handleMenuKey = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === \"ContextMenu\" || (e.key === \"F10\" && e.shiftKey)) {\n      if (!menuItems?.length) return;\n      e.preventDefault();\n      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n      openMenu(rect.right, rect.top);\n    }\n  };\n\n  // ── Render ───────────────────────────────────────────────────────────────\n  const button = (\n    <button\n      type=\"button\"\n      aria-current={active ? \"page\" : undefined}\n      aria-label={collapsed ? label : undefined}\n      className={[\n        styles.itemBtn,\n        active ? styles.active : null,\n        collapsed ? styles.itemCollapsed : null,\n        isDragOver ? styles.dragOver : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      onContextMenu={handleContextMenu}\n      onKeyDown={handleMenuKey}\n      onDragOver={handleDragOver}\n      onDragLeave={handleDragLeave}\n      onDrop={handleDrop}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {!collapsed && <span className={styles.itemLabel}>{label}</span>}\n      {!collapsed && trailing && <span className={styles.itemSuffix}>{trailing}</span>}\n    </button>\n  );\n\n  return (\n    <li className={styles.item} hidden={isFiltered || undefined}>\n      {effectiveTooltip\n        ? <Tooltip label={effectiveTooltip} placement=\"right\">{button}</Tooltip>\n        : button}\n\n      {menu && menuItems?.length && typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            ref={menuRef}\n            className={styles.contextMenu}\n            style={{ top: menu.y, left: menu.x }}\n            role=\"menu\"\n          >\n            {menuItems.map((entry) => (\n              <button\n                key={entry.label}\n                type=\"button\"\n                role=\"menuitem\"\n                disabled={entry.disabled}\n                className={[\n                  styles.contextMenuItem,\n                  entry.destructive ? styles.contextMenuDestructive : null,\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\n                onClick={() => {\n                  entry.onClick();\n                  closeMenu();\n                }}\n              >\n                {entry.label}\n              </button>\n            ))}\n          </div>,\n          document.body,\n        )}\n    </li>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SidebarItem.cjs","names":[],"sources":["../../../src/components/Sidebar/SidebarItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport {\n  type ButtonHTMLAttributes,\n  type DragEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Icon } from '../Icon';\nimport { Tooltip } from '../Tooltip';\n\nimport { SidebarFilterContext, useSidebarCollapsed } from './Sidebar';\nimport styles from './Sidebar.module.css';\n\nexport interface SidebarMenuEntry {\n  /** Label shown in the context menu. */\n  label: string;\n  /** Called when the entry is clicked. */\n  onClick: () => void;\n  /** Renders the entry in red. Use for destructive actions. */\n  destructive?: boolean;\n  /** Disables the entry. */\n  disabled?: boolean;\n}\n\nexport interface SidebarItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. */\n  label: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /** Marks this item as the currently active view. */\n  active?: boolean;\n  /**\n   * Trailing widget — any ReactNode (badge, button, icon…).\n   * Supersedes `badge` when both are provided.\n   */\n  suffix?: ReactNode;\n  /**\n   * @deprecated Use `suffix` instead.\n   */\n  badge?: ReactNode;\n  /**\n   * Short tooltip shown when hovering the item.\n   * Automatically shown when the sidebar is `collapsed`.\n   */\n  tooltip?: string;\n  /**\n   * Context-menu entries shown on right-click or the Menu key.\n   */\n  menuItems?: SidebarMenuEntry[];\n  /**\n   * Called when a dragged item is dropped onto this row.\n   * Mirrors `AdwSidebar` per-row drop target support (libadwaita 1.9).\n   */\n  onDrop?: (e: DragEvent<HTMLButtonElement>) => void;\n  /**\n   * MIME types this row accepts as drop targets (e.g. `[\"text/plain\"]`).\n   * When provided, drops of other types are rejected via `e.preventDefault()`.\n   * When omitted, all types are accepted.\n   */\n  acceptTypes?: string[];\n}\n\n/**\n * Individual navigation item inside a `Sidebar` or `SidebarSection`.\n *\n * **Tier 11 additions:**\n * - Automatically hidden when `Sidebar`'s `filter` / `searchable` is active\n *   and the `label` does not match (case-insensitive substring).\n * - `onDrop` / `acceptTypes` — HTML5 drag-and-drop target support.\n */\nexport const SidebarItem = ({\n  label,\n  icon,\n  active = false,\n  suffix,\n  badge,\n  tooltip,\n  menuItems,\n  onDrop,\n  acceptTypes,\n  className,\n  ...props\n}: SidebarItemProps) => {\n  const collapsed = useSidebarCollapsed();\n  const filterValue = useContext(SidebarFilterContext);\n  const trailing = suffix ?? badge;\n  const effectiveTooltip = collapsed ? (tooltip ?? label) : tooltip;\n\n  // ── Filter visibility ────────────────────────────────────────────────────\n  const isFiltered =\n    filterValue.length > 0 && !label.toLowerCase().includes(filterValue.toLowerCase());\n\n  // ── Drag-and-drop ────────────────────────────────────────────────────────\n  const [isDragOver, setIsDragOver] = useState(false);\n\n  const handleDragOver = (e: DragEvent<HTMLButtonElement>) => {\n    if (!onDrop) {\n      return;\n    }\n\n    if (acceptTypes?.length) {\n      const accepted = acceptTypes.some((t) => e.dataTransfer.types.includes(t));\n\n      if (!accepted) {\n        return;\n      }\n    }\n\n    e.preventDefault();\n    setIsDragOver(true);\n  };\n\n  const handleDragLeave = () => setIsDragOver(false);\n\n  const handleDrop = (e: DragEvent<HTMLButtonElement>) => {\n    if (!onDrop) {\n      return;\n    }\n\n    e.preventDefault();\n    setIsDragOver(false);\n    onDrop(e);\n  };\n\n  // ── Context menu ─────────────────────────────────────────────────────────\n  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const openMenu = useCallback((x: number, y: number) => setMenu({ x, y }), []);\n  const closeMenu = useCallback(() => setMenu(null), []);\n\n  useEffect(() => {\n    if (!menu) {\n      return;\n    }\n\n    const handleClick = (e: globalThis.MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {\n        closeMenu();\n      }\n    };\n    const handleKey = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closeMenu();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n    document.addEventListener('keydown', handleKey);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n      document.removeEventListener('keydown', handleKey);\n    };\n  }, [menu, closeMenu]);\n\n  const handleContextMenu = (e: MouseEvent<HTMLButtonElement>) => {\n    if (!menuItems?.length) {\n      return;\n    }\n\n    e.preventDefault();\n    openMenu(e.clientX, e.clientY);\n  };\n\n  const handleMenuKey = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)) {\n      if (!menuItems?.length) {\n        return;\n      }\n\n      e.preventDefault();\n      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n\n      openMenu(rect.right, rect.top);\n    }\n  };\n\n  // ── Render ───────────────────────────────────────────────────────────────\n  const button = (\n    <button\n      type=\"button\"\n      aria-current={active ? 'page' : undefined}\n      aria-label={collapsed ? label : undefined}\n      className={[\n        styles.itemBtn,\n        active ? styles.active : null,\n        collapsed ? styles.itemCollapsed : null,\n        isDragOver ? styles.dragOver : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onContextMenu={handleContextMenu}\n      onKeyDown={handleMenuKey}\n      onDragOver={handleDragOver}\n      onDragLeave={handleDragLeave}\n      onDrop={handleDrop}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {!collapsed && <span className={styles.itemLabel}>{label}</span>}\n      {!collapsed && trailing && <span className={styles.itemSuffix}>{trailing}</span>}\n    </button>\n  );\n\n  return (\n    <li className={styles.item} hidden={isFiltered || undefined}>\n      {effectiveTooltip ? (\n        <Tooltip label={effectiveTooltip} placement=\"right\">\n          {button}\n        </Tooltip>\n      ) : (\n        button\n      )}\n\n      {menu &&\n        !!menuItems?.length &&\n        typeof document !== 'undefined' &&\n        createPortal(\n          <div\n            ref={menuRef}\n            className={styles.contextMenu}\n            style={{ top: menu.y, left: menu.x }}\n            role=\"menu\"\n          >\n            {menuItems.map((entry) => (\n              <button\n                key={entry.label}\n                type=\"button\"\n                role=\"menuitem\"\n                disabled={entry.disabled}\n                className={[\n                  styles.contextMenuItem,\n                  entry.destructive ? styles.contextMenuDestructive : null,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onClick={() => {\n                  entry.onClick();\n                  closeMenu();\n                }}\n              >\n                {entry.label}\n              </button>\n            ))}\n          </div>,\n          document.body,\n        )}\n    </li>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import { ButtonHTMLAttributes, DragEvent, ReactNode } from 'react';
 import { IconDefinition } from '@gnome-ui/icons';
+import { ButtonHTMLAttributes, DragEvent, ReactNode } from 'react';
 export interface SidebarMenuEntry {
     /** Label shown in the context menu. */
     label: string;
@@ -55,4 +55,4 @@ export interface SidebarItemProps extends ButtonHTMLAttributes<HTMLButtonElement
  *   and the `label` does not match (case-insensitive substring).
  * - `onDrop` / `acceptTypes` — HTML5 drag-and-drop target support.
  */
-export declare function SidebarItem({ label, icon, active, suffix, badge, tooltip, menuItems, onDrop, acceptTypes, className, ...props }: SidebarItemProps): import("react/jsx-runtime").JSX.Element;
+export declare const SidebarItem: ({ label, icon, active, suffix, badge, tooltip, menuItems, onDrop, acceptTypes, className, ...props }: SidebarItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Sidebar/SidebarItem.js

@@ -6,7 +6,7 @@ import { useCallback as a, useContext as o, useEffect as s, useRef as c, useStat
 import { createPortal as u } from "react-dom";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/Sidebar/SidebarItem.tsx
-function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v, menuItems: y, onDrop: b, acceptTypes: x, className: S, ...C }) {
+var p = ({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v, menuItems: y, onDrop: b, acceptTypes: x, className: S, ...C }) => {
 	let w = i(), T = o(r), E = g ?? _, D = w ? v ?? p : v, O = T.length > 0 && !p.toLowerCase().includes(T.toLowerCase()), [k, A] = l(!1), j = (e) => {
 		b && (x?.length && !x.some((t) => e.dataTransfer.types.includes(t)) || (e.preventDefault(), A(!0)));
 	}, M = () => A(!1), N = (e) => {
@@ -26,16 +26,7 @@ function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v,
 			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
 		};
 	}, [P, R]);
-	let z = (e) => {
-		y?.length && (e.preventDefault(), L(e.clientX, e.clientY));
-	}, B = (e) => {
-		if (e.key === "ContextMenu" || e.key === "F10" && e.shiftKey) {
-			if (!y?.length) return;
-			e.preventDefault();
-			let t = e.currentTarget.getBoundingClientRect();
-			L(t.right, t.top);
-		}
-	}, V = /* @__PURE__ */ f("button", {
+	let z = /* @__PURE__ */ f("button", {
 		type: "button",
 		"aria-current": h ? "page" : void 0,
 		"aria-label": w ? p : void 0,
@@ -46,8 +37,17 @@ function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v,
 			k ? n.dragOver : null,
 			S
 		].filter(Boolean).join(" "),
-		onContextMenu: z,
-		onKeyDown: B,
+		onContextMenu: (e) => {
+			y?.length && (e.preventDefault(), L(e.clientX, e.clientY));
+		},
+		onKeyDown: (e) => {
+			if (e.key === "ContextMenu" || e.key === "F10" && e.shiftKey) {
+				if (!y?.length) return;
+				e.preventDefault();
+				let t = e.currentTarget.getBoundingClientRect();
+				L(t.right, t.top);
+			}
+		},
 		onDragOver: j,
 		onDragLeave: M,
 		onDrop: N,
@@ -77,8 +77,8 @@ function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v,
 		children: [D ? /* @__PURE__ */ d(t, {
 			label: D,
 			placement: "right",
-			children: V
-		}) : V, P && y?.length && typeof document < "u" && u(/* @__PURE__ */ d("div", {
+			children: z
+		}) : z, P && !!y?.length && typeof document < "u" && u(/* @__PURE__ */ d("div", {
 			ref: I,
 			className: n.contextMenu,
 			style: {
@@ -98,7 +98,7 @@ function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v,
 			}, e.label))
 		}), document.body)]
 	});
-}
+};
 //#endregion
 export { p as SidebarItem };
 

package/dist/components/Sidebar/SidebarItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.js","names":[],"sources":["../../../src/components/Sidebar/SidebarItem.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  useContext,\n  type ButtonHTMLAttributes,\n  type DragEvent,\n  type ReactNode,\n  type MouseEvent,\n  type KeyboardEvent,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { Tooltip } from \"../Tooltip\";\nimport { useSidebarCollapsed, SidebarFilterContext } from \"./Sidebar\";\nimport styles from \"./Sidebar.module.css\";\n\nexport interface SidebarMenuEntry {\n  /** Label shown in the context menu. */\n  label: string;\n  /** Called when the entry is clicked. */\n  onClick: () => void;\n  /** Renders the entry in red. Use for destructive actions. */\n  destructive?: boolean;\n  /** Disables the entry. */\n  disabled?: boolean;\n}\n\nexport interface SidebarItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. */\n  label: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /** Marks this item as the currently active view. */\n  active?: boolean;\n  /**\n   * Trailing widget — any ReactNode (badge, button, icon…).\n   * Supersedes `badge` when both are provided.\n   */\n  suffix?: ReactNode;\n  /**\n   * @deprecated Use `suffix` instead.\n   */\n  badge?: ReactNode;\n  /**\n   * Short tooltip shown when hovering the item.\n   * Automatically shown when the sidebar is `collapsed`.\n   */\n  tooltip?: string;\n  /**\n   * Context-menu entries shown on right-click or the Menu key.\n   */\n  menuItems?: SidebarMenuEntry[];\n  /**\n   * Called when a dragged item is dropped onto this row.\n   * Mirrors `AdwSidebar` per-row drop target support (libadwaita 1.9).\n   */\n  onDrop?: (e: DragEvent<HTMLButtonElement>) => void;\n  /**\n   * MIME types this row accepts as drop targets (e.g. `[\"text/plain\"]`).\n   * When provided, drops of other types are rejected via `e.preventDefault()`.\n   * When omitted, all types are accepted.\n   */\n  acceptTypes?: string[];\n}\n\n/**\n * Individual navigation item inside a `Sidebar` or `SidebarSection`.\n *\n * **Tier 11 additions:**\n * - Automatically hidden when `Sidebar`'s `filter` / `searchable` is active\n *   and the `label` does not match (case-insensitive substring).\n * - `onDrop` / `acceptTypes` — HTML5 drag-and-drop target support.\n */\nexport function SidebarItem({\n  label,\n  icon,\n  active = false,\n  suffix,\n  badge,\n  tooltip,\n  menuItems,\n  onDrop,\n  acceptTypes,\n  className,\n  ...props\n}: SidebarItemProps) {\n  const collapsed = useSidebarCollapsed();\n  const filterValue = useContext(SidebarFilterContext);\n  const trailing = suffix ?? badge;\n  const effectiveTooltip = collapsed ? (tooltip ?? label) : tooltip;\n\n  // ── Filter visibility ────────────────────────────────────────────────────\n  const isFiltered =\n    filterValue.length > 0 &&\n    !label.toLowerCase().includes(filterValue.toLowerCase());\n\n  // ── Drag-and-drop ────────────────────────────────────────────────────────\n  const [isDragOver, setIsDragOver] = useState(false);\n\n  const handleDragOver = (e: DragEvent<HTMLButtonElement>) => {\n    if (!onDrop) return;\n    if (acceptTypes?.length) {\n      const accepted = acceptTypes.some((t) => e.dataTransfer.types.includes(t));\n      if (!accepted) return;\n    }\n    e.preventDefault();\n    setIsDragOver(true);\n  };\n\n  const handleDragLeave = () => setIsDragOver(false);\n\n  const handleDrop = (e: DragEvent<HTMLButtonElement>) => {\n    if (!onDrop) return;\n    e.preventDefault();\n    setIsDragOver(false);\n    onDrop(e);\n  };\n\n  // ── Context menu ─────────────────────────────────────────────────────────\n  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const openMenu = useCallback((x: number, y: number) => setMenu({ x, y }), []);\n  const closeMenu = useCallback(() => setMenu(null), []);\n\n  useEffect(() => {\n    if (!menu) return;\n    const handleClick = (e: globalThis.MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) closeMenu();\n    };\n    const handleKey = (e: globalThis.KeyboardEvent) => {\n      if (e.key === \"Escape\") closeMenu();\n    };\n    document.addEventListener(\"mousedown\", handleClick);\n    document.addEventListener(\"keydown\", handleKey);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClick);\n      document.removeEventListener(\"keydown\", handleKey);\n    };\n  }, [menu, closeMenu]);\n\n  const handleContextMenu = (e: MouseEvent<HTMLButtonElement>) => {\n    if (!menuItems?.length) return;\n    e.preventDefault();\n    openMenu(e.clientX, e.clientY);\n  };\n\n  const handleMenuKey = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === \"ContextMenu\" || (e.key === \"F10\" && e.shiftKey)) {\n      if (!menuItems?.length) return;\n      e.preventDefault();\n      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n      openMenu(rect.right, rect.top);\n    }\n  };\n\n  // ── Render ───────────────────────────────────────────────────────────────\n  const button = (\n    <button\n      type=\"button\"\n      aria-current={active ? \"page\" : undefined}\n      aria-label={collapsed ? label : undefined}\n      className={[\n        styles.itemBtn,\n        active ? styles.active : null,\n        collapsed ? styles.itemCollapsed : null,\n        isDragOver ? styles.dragOver : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      onContextMenu={handleContextMenu}\n      onKeyDown={handleMenuKey}\n      onDragOver={handleDragOver}\n      onDragLeave={handleDragLeave}\n      onDrop={handleDrop}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {!collapsed && <span className={styles.itemLabel}>{label}</span>}\n      {!collapsed && trailing && <span className={styles.itemSuffix}>{trailing}</span>}\n    </button>\n  );\n\n  return (\n    <li className={styles.item} hidden={isFiltered || undefined}>\n      {effectiveTooltip\n        ? <Tooltip label={effectiveTooltip} placement=\"right\">{button}</Tooltip>\n        : button}\n\n      {menu && menuItems?.length && typeof document !== \"undefined\" &&\n        createPortal(\n          <div\n            ref={menuRef}\n            className={styles.contextMenu}\n            style={{ top: menu.y, left: menu.x }}\n            role=\"menu\"\n          >\n            {menuItems.map((entry) => (\n              <button\n                key={entry.label}\n                type=\"button\"\n                role=\"menuitem\"\n                disabled={entry.disabled}\n                className={[\n                  styles.contextMenuItem,\n                  entry.destructive ? styles.contextMenuDestructive : null,\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\n                onClick={() => {\n                  entry.onClick();\n                  closeMenu();\n                }}\n              >\n                {entry.label}\n              </button>\n            ))}\n          </div>,\n          document.body,\n        )}\n    </li>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SidebarItem.js","names":[],"sources":["../../../src/components/Sidebar/SidebarItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport {\n  type ButtonHTMLAttributes,\n  type DragEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Icon } from '../Icon';\nimport { Tooltip } from '../Tooltip';\n\nimport { SidebarFilterContext, useSidebarCollapsed } from './Sidebar';\nimport styles from './Sidebar.module.css';\n\nexport interface SidebarMenuEntry {\n  /** Label shown in the context menu. */\n  label: string;\n  /** Called when the entry is clicked. */\n  onClick: () => void;\n  /** Renders the entry in red. Use for destructive actions. */\n  destructive?: boolean;\n  /** Disables the entry. */\n  disabled?: boolean;\n}\n\nexport interface SidebarItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. */\n  label: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /** Marks this item as the currently active view. */\n  active?: boolean;\n  /**\n   * Trailing widget — any ReactNode (badge, button, icon…).\n   * Supersedes `badge` when both are provided.\n   */\n  suffix?: ReactNode;\n  /**\n   * @deprecated Use `suffix` instead.\n   */\n  badge?: ReactNode;\n  /**\n   * Short tooltip shown when hovering the item.\n   * Automatically shown when the sidebar is `collapsed`.\n   */\n  tooltip?: string;\n  /**\n   * Context-menu entries shown on right-click or the Menu key.\n   */\n  menuItems?: SidebarMenuEntry[];\n  /**\n   * Called when a dragged item is dropped onto this row.\n   * Mirrors `AdwSidebar` per-row drop target support (libadwaita 1.9).\n   */\n  onDrop?: (e: DragEvent<HTMLButtonElement>) => void;\n  /**\n   * MIME types this row accepts as drop targets (e.g. `[\"text/plain\"]`).\n   * When provided, drops of other types are rejected via `e.preventDefault()`.\n   * When omitted, all types are accepted.\n   */\n  acceptTypes?: string[];\n}\n\n/**\n * Individual navigation item inside a `Sidebar` or `SidebarSection`.\n *\n * **Tier 11 additions:**\n * - Automatically hidden when `Sidebar`'s `filter` / `searchable` is active\n *   and the `label` does not match (case-insensitive substring).\n * - `onDrop` / `acceptTypes` — HTML5 drag-and-drop target support.\n */\nexport const SidebarItem = ({\n  label,\n  icon,\n  active = false,\n  suffix,\n  badge,\n  tooltip,\n  menuItems,\n  onDrop,\n  acceptTypes,\n  className,\n  ...props\n}: SidebarItemProps) => {\n  const collapsed = useSidebarCollapsed();\n  const filterValue = useContext(SidebarFilterContext);\n  const trailing = suffix ?? badge;\n  const effectiveTooltip = collapsed ? (tooltip ?? label) : tooltip;\n\n  // ── Filter visibility ────────────────────────────────────────────────────\n  const isFiltered =\n    filterValue.length > 0 && !label.toLowerCase().includes(filterValue.toLowerCase());\n\n  // ── Drag-and-drop ────────────────────────────────────────────────────────\n  const [isDragOver, setIsDragOver] = useState(false);\n\n  const handleDragOver = (e: DragEvent<HTMLButtonElement>) => {\n    if (!onDrop) {\n      return;\n    }\n\n    if (acceptTypes?.length) {\n      const accepted = acceptTypes.some((t) => e.dataTransfer.types.includes(t));\n\n      if (!accepted) {\n        return;\n      }\n    }\n\n    e.preventDefault();\n    setIsDragOver(true);\n  };\n\n  const handleDragLeave = () => setIsDragOver(false);\n\n  const handleDrop = (e: DragEvent<HTMLButtonElement>) => {\n    if (!onDrop) {\n      return;\n    }\n\n    e.preventDefault();\n    setIsDragOver(false);\n    onDrop(e);\n  };\n\n  // ── Context menu ─────────────────────────────────────────────────────────\n  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const openMenu = useCallback((x: number, y: number) => setMenu({ x, y }), []);\n  const closeMenu = useCallback(() => setMenu(null), []);\n\n  useEffect(() => {\n    if (!menu) {\n      return;\n    }\n\n    const handleClick = (e: globalThis.MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {\n        closeMenu();\n      }\n    };\n    const handleKey = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closeMenu();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n    document.addEventListener('keydown', handleKey);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n      document.removeEventListener('keydown', handleKey);\n    };\n  }, [menu, closeMenu]);\n\n  const handleContextMenu = (e: MouseEvent<HTMLButtonElement>) => {\n    if (!menuItems?.length) {\n      return;\n    }\n\n    e.preventDefault();\n    openMenu(e.clientX, e.clientY);\n  };\n\n  const handleMenuKey = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)) {\n      if (!menuItems?.length) {\n        return;\n      }\n\n      e.preventDefault();\n      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n\n      openMenu(rect.right, rect.top);\n    }\n  };\n\n  // ── Render ───────────────────────────────────────────────────────────────\n  const button = (\n    <button\n      type=\"button\"\n      aria-current={active ? 'page' : undefined}\n      aria-label={collapsed ? label : undefined}\n      className={[\n        styles.itemBtn,\n        active ? styles.active : null,\n        collapsed ? styles.itemCollapsed : null,\n        isDragOver ? styles.dragOver : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onContextMenu={handleContextMenu}\n      onKeyDown={handleMenuKey}\n      onDragOver={handleDragOver}\n      onDragLeave={handleDragLeave}\n      onDrop={handleDrop}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {!collapsed && <span className={styles.itemLabel}>{label}</span>}\n      {!collapsed && trailing && <span className={styles.itemSuffix}>{trailing}</span>}\n    </button>\n  );\n\n  return (\n    <li className={styles.item} hidden={isFiltered || undefined}>\n      {effectiveTooltip ? (\n        <Tooltip label={effectiveTooltip} placement=\"right\">\n          {button}\n        </Tooltip>\n      ) : (\n        button\n      )}\n\n      {menu &&\n        !!menuItems?.length &&\n        typeof document !== 'undefined' &&\n        createPortal(\n          <div\n            ref={menuRef}\n            className={styles.contextMenu}\n            style={{ top: menu.y, left: menu.x }}\n            role=\"menu\"\n          >\n            {menuItems.map((entry) => (\n              <button\n                key={entry.label}\n                type=\"button\"\n                role=\"menuitem\"\n                disabled={entry.disabled}\n                className={[\n                  styles.contextMenuItem,\n                  entry.destructive ? styles.contextMenuDestructive : null,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onClick={() => {\n                  entry.onClick();\n                  closeMenu();\n                }}\n              >\n                {entry.label}\n              </button>\n            ))}\n          </div>,\n          document.body,\n        )}\n    </li>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Sidebar/SidebarSection.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Icon/Icon.cjs`),t=require(`./Sidebar.module.css.cjs`),n=require(`./Sidebar.cjs`);let r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@gnome-ui/icons`);function o(e,t){let n=0;return r.Children.forEach(e,e=>{if(!(0,r.isValidElement)(e))return;let i=e.props;typeof i.label==`string`?i.label.toLowerCase().includes(t.toLowerCase())&&n++:i.children&&(n+=o(i.children,t))}),n}var s=(0,r.forwardRef)(function({title:s,icon:c,collapsible:l=!1,defaultOpen:u=!0,open:d,onOpenChange:f,children:p,className:m,...h},g){let[_,v]=(0,r.useState)(u),y=d!==void 0,b=y?d:_,x=n.useSidebarCollapsed(),S=(0,r.useContext)(n.SidebarFilterContext),C=(0,r.useId)(),w=e=>{y||v(e),f?.(e)};if((0,r.useImperativeHandle)(g,()=>({expand:()=>w(!0),collapse:()=>w(!1),toggle:()=>w(!b)})),!(S.length===0||o(p,S)>0))return null;let T=x?!0:b,E=!!(s||c||l&&!x);return(0,i.jsxs)(`section`,{className:[t.default.section,m].filter(Boolean).join(` `),...h,children:[E&&(l&&!x?(0,i.jsxs)(`button`,{type:`button`,className:t.default.sectionHeader,onClick:()=>w(!b),"aria-expanded":b,"aria-controls":C,children:[c&&(0,i.jsx)(`span`,{className:t.default.sectionHeaderIcon,children:(0,i.jsx)(e.Icon,{icon:c,size:`sm`,"aria-hidden":!0})}),s&&(0,i.jsx)(`span`,{className:t.default.sectionTitle,children:s}),(0,i.jsx)(`span`,{className:t.default.sectionChevron,children:(0,i.jsx)(e.Icon,{icon:b?a.PanUp:a.PanDown,size:`sm`,"aria-hidden":!0})})]}):(0,i.jsxs)(`div`,{className:t.default.sectionHeader,children:[c&&(0,i.jsx)(`span`,{className:t.default.sectionHeaderIcon,children:(0,i.jsx)(e.Icon,{icon:c,size:`sm`,"aria-hidden":!0})}),s&&(0,i.jsx)(`span`,{className:t.default.sectionTitle,children:s})]})),(0,i.jsx)(`div`,{id:C,className:[t.default.sectionBody,T?null:t.default.sectionBodyCollapsed].filter(Boolean).join(` `),"aria-hidden":!T||void 0,children:(0,i.jsx)(`div`,{className:t.default.sectionBodyInner,children:(0,i.jsx)(`ul`,{role:`list`,className:t.default.list,children:p})})})]})});exports.SidebarSection=s;
+const e=require("../Icon/Icon.cjs"),t=require("./Sidebar.module.css.cjs"),n=require("./Sidebar.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@gnome-ui/icons");function o(e,t){let n=0;return r.Children.forEach(e,e=>{if(!(0,r.isValidElement)(e))return;let i=e.props;typeof i.label==`string`?i.label.toLowerCase().includes(t.toLowerCase())&&n++:i.children&&(n+=o(i.children,t))}),n}var s=(0,r.forwardRef)(function({title:s,icon:c,collapsible:l=!1,defaultOpen:u=!0,open:d,onOpenChange:f,children:p,className:m,...h},g){let[_,v]=(0,r.useState)(u),y=d!==void 0,b=y?d:_,x=n.useSidebarCollapsed(),S=(0,r.useContext)(n.SidebarFilterContext),C=(0,r.useId)(),w=e=>{y||v(e),f?.(e)};if((0,r.useImperativeHandle)(g,()=>({expand:()=>w(!0),collapse:()=>w(!1),toggle:()=>w(!b)})),!(S.length===0||o(p,S)>0))return null;let T=x?!0:b,E=!!(s||c||l&&!x);return(0,i.jsxs)(`section`,{className:[t.default.section,m].filter(Boolean).join(` `),...h,children:[E&&(l&&!x?(0,i.jsxs)(`button`,{type:`button`,className:t.default.sectionHeader,onClick:()=>w(!b),"aria-expanded":b,"aria-controls":C,children:[c&&(0,i.jsx)(`span`,{className:t.default.sectionHeaderIcon,children:(0,i.jsx)(e.Icon,{icon:c,size:`sm`,"aria-hidden":!0})}),s&&(0,i.jsx)(`span`,{className:t.default.sectionTitle,children:s}),(0,i.jsx)(`span`,{className:t.default.sectionChevron,children:(0,i.jsx)(e.Icon,{icon:b?a.PanUp:a.PanDown,size:`sm`,"aria-hidden":!0})})]}):(0,i.jsxs)(`div`,{className:t.default.sectionHeader,children:[c&&(0,i.jsx)(`span`,{className:t.default.sectionHeaderIcon,children:(0,i.jsx)(e.Icon,{icon:c,size:`sm`,"aria-hidden":!0})}),s&&(0,i.jsx)(`span`,{className:t.default.sectionTitle,children:s})]})),(0,i.jsx)(`div`,{id:C,className:[t.default.sectionBody,T?null:t.default.sectionBodyCollapsed].filter(Boolean).join(` `),"aria-hidden":!T||void 0,children:(0,i.jsx)(`div`,{className:t.default.sectionBodyInner,children:(0,i.jsx)(`ul`,{className:t.default.list,children:p})})})]})});exports.SidebarSection=s;
 //# sourceMappingURL=SidebarSection.cjs.map

package/dist/components/Sidebar/SidebarSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarSection.cjs","names":[],"sources":["../../../src/components/Sidebar/SidebarSection.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useImperativeHandle,\n  useState,\n  useContext,\n  useId,\n  isValidElement,\n  Children,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { PanDown, PanUp } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { useSidebarCollapsed, SidebarFilterContext } from \"./Sidebar\";\nimport styles from \"./Sidebar.module.css\";\n\n// ─── Filter helper ────────────────────────────────────────────────────────────\n\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) return;\n    const props = child.props as Record<string, unknown>;\n    if (typeof props.label === \"string\") {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) count++;\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n  return count;\n}\n\n// ─── Handle ───────────────────────────────────────────────────────────────────\n\nexport interface SidebarSectionHandle {\n  expand: () => void;\n  collapse: () => void;\n  toggle: () => void;\n}\n\n// ─── Props ────────────────────────────────────────────────────────────────────\n\nexport interface SidebarSectionProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Section heading. Rendered in small caps above the items.\n   * Omit for an untitled section (e.g. the first group in a sidebar).\n   */\n  title?: string;\n  /** Icon rendered left of the title. Same type as `SidebarItem.icon`. */\n  icon?: IconDefinition;\n  /** Whether the section body can be toggled open/closed. Defaults to `false`. */\n  collapsible?: boolean;\n  /** Initial open state when `collapsible` is true. Defaults to `true`. */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when open state changes. */\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Named group of `SidebarItem` entries inside a `Sidebar`.\n *\n * Sections are separated by a thin divider. The title and icon are optional.\n * When `collapsible` is true the body can be toggled via the header button or\n * imperatively via a `ref` (`expand`, `collapse`, `toggle`).\n *\n * In rail (icon-only) mode the body is always visible regardless of open state.\n * When a sidebar filter is active and no children match, the section is hidden.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport const SidebarSection = forwardRef<SidebarSectionHandle, SidebarSectionProps>(\n  function SidebarSection(\n    {\n      title,\n      icon,\n      collapsible = false,\n      defaultOpen = true,\n      open: controlledOpen,\n      onOpenChange,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n    const isControlled = controlledOpen !== undefined;\n    const open = isControlled ? controlledOpen : internalOpen;\n\n    const sidebarCollapsed = useSidebarCollapsed();\n    const filterValue = useContext(SidebarFilterContext);\n    const bodyId = useId();\n\n    const setAndNotify = (next: boolean) => {\n      if (!isControlled) setInternalOpen(next);\n      onOpenChange?.(next);\n    };\n\n    useImperativeHandle(ref, () => ({\n      expand: () => setAndNotify(true),\n      collapse: () => setAndNotify(false),\n      toggle: () => setAndNotify(!open),\n    }));\n\n    // Hide section entirely when filter is active and no children match\n    const hasVisibleChildren =\n      filterValue.length === 0 || countMatchingItems(children, filterValue) > 0;\n\n    if (!hasVisibleChildren) return null;\n\n    // In rail mode the body is always visible\n    const isOpen = sidebarCollapsed ? true : open;\n\n    const showHeader = !!(title || icon || (collapsible && !sidebarCollapsed));\n\n    return (\n      <section\n        className={[styles.section, className].filter(Boolean).join(\" \")}\n        {...props}\n      >\n        {showHeader && (\n          collapsible && !sidebarCollapsed ? (\n            <button\n              type=\"button\"\n              className={styles.sectionHeader}\n              onClick={() => setAndNotify(!open)}\n              aria-expanded={open}\n              aria-controls={bodyId}\n            >\n              {icon && (\n                <span className={styles.sectionHeaderIcon}>\n                  <Icon icon={icon} size=\"sm\" aria-hidden />\n                </span>\n              )}\n              {title && <span className={styles.sectionTitle}>{title}</span>}\n              <span className={styles.sectionChevron}>\n                <Icon icon={open ? PanUp : PanDown} size=\"sm\" aria-hidden />\n              </span>\n            </button>\n          ) : (\n            <div className={styles.sectionHeader}>\n              {icon && (\n                <span className={styles.sectionHeaderIcon}>\n                  <Icon icon={icon} size=\"sm\" aria-hidden />\n                </span>\n              )}\n              {title && <span className={styles.sectionTitle}>{title}</span>}\n            </div>\n          )\n        )}\n\n        <div\n          id={bodyId}\n          className={[\n            styles.sectionBody,\n            !isOpen ? styles.sectionBodyCollapsed : null,\n          ]\n            .filter(Boolean)\n            .join(\" \")}\n          aria-hidden={!isOpen || undefined}\n        >\n          <div className={styles.sectionBodyInner}>\n            <ul role=\"list\" className={styles.list}>\n              {children}\n            </ul>\n          </div>\n        </div>\n      </section>\n    );\n  },\n);\n"],"mappings":"wLAmBA,SAAS,EAAmB,EAAqB,EAAwB,CACvE,IAAI,EAAQ,EAUZ,OATA,EAAA,SAAS,QAAQ,EAAW,GAAU,CACpC,GAAI,EAAA,EAAA,EAAA,gBAAgB,EAAM,CAAE,OAC5B,IAAM,EAAQ,EAAM,MAChB,OAAO,EAAM,OAAU,SACrB,EAAM,MAAM,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,EAAE,IACrD,EAAM,WACf,GAAS,EAAmB,EAAM,SAAuB,EAAO,GAElE,CACK,EA8CT,IAAa,GAAA,EAAA,EAAA,YACX,SACE,CACE,QACA,OACA,cAAc,GACd,cAAc,GACd,KAAM,EACN,eACA,WACA,YACA,GAAG,GAEL,EACA,CACA,GAAM,CAAC,EAAc,IAAA,EAAA,EAAA,UAA4B,EAAY,CACvD,EAAe,IAAmB,IAAA,GAClC,EAAO,EAAe,EAAiB,EAEvC,EAAmB,EAAA,qBAAqB,CACxC,GAAA,EAAA,EAAA,YAAyB,EAAA,qBAAqB,CAC9C,GAAA,EAAA,EAAA,QAAgB,CAEhB,EAAgB,GAAkB,CACjC,GAAc,EAAgB,EAAK,CACxC,IAAe,EAAK,EAatB,IAVA,EAAA,EAAA,qBAAoB,OAAY,CAC9B,WAAc,EAAa,GAAK,CAChC,aAAgB,EAAa,GAAM,CACnC,WAAc,EAAa,CAAC,EAAK,CAClC,EAAE,CAMC,EAFF,EAAY,SAAW,GAAK,EAAmB,EAAU,EAAY,CAAG,GAEjD,OAAO,KAGhC,IAAM,EAAS,EAAmB,GAAO,EAEnC,EAAa,CAAC,EAAE,GAAS,GAAS,GAAe,CAAC,GAExD,OACE,EAAA,EAAA,MAAC,UAAD,CACE,UAAW,CAAC,EAAA,QAAO,QAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAChE,GAAI,WAFN,CAIG,IACC,GAAe,CAAC,GACd,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,cAClB,YAAe,EAAa,CAAC,EAAK,CAClC,gBAAe,EACf,gBAAe,WALjB,CAOG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,4BACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,GAAc,CAAA,CACrC,CAAA,CAER,IAAS,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,sBAAe,EAAa,CAAA,EAC9D,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,yBACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAM,EAAO,EAAA,MAAQ,EAAA,QAAS,KAAK,KAAK,cAAA,GAAc,CAAA,CACvD,CAAA,CACA,IAET,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,uBAAvB,CACG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,4BACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,GAAc,CAAA,CACrC,CAAA,CAER,IAAS,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,sBAAe,EAAa,CAAA,CAC1D,KAIV,EAAA,EAAA,KAAC,MAAD,CACE,GAAI,EACJ,UAAW,CACT,EAAA,QAAO,YACN,EAAuC,KAA9B,EAAA,QAAO,qBAClB,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAa,CAAC,GAAU,IAAA,aAExB,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,2BACrB,EAAA,EAAA,KAAC,KAAD,CAAI,KAAK,OAAO,UAAW,EAAA,QAAO,KAC/B,WACE,CAAA,CACD,CAAA,CACF,CAAA,CACE,IAGf"}
+{"version":3,"file":"SidebarSection.cjs","names":[],"sources":["../../../src/components/Sidebar/SidebarSection.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport { PanDown, PanUp } from '@gnome-ui/icons';\nimport {\n  Children,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useContext,\n  useId,\n  useImperativeHandle,\n  useState,\n} from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { SidebarFilterContext, useSidebarCollapsed } from './Sidebar';\nimport styles from './Sidebar.module.css';\n\n// ─── Filter helper ────────────────────────────────────────────────────────────\n\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const props = child.props as Record<string, unknown>;\n\n    if (typeof props.label === 'string') {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) {\n        count++;\n      }\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n\n  return count;\n}\n\n// ─── Handle ───────────────────────────────────────────────────────────────────\n\nexport interface SidebarSectionHandle {\n  expand: () => void;\n  collapse: () => void;\n  toggle: () => void;\n}\n\n// ─── Props ────────────────────────────────────────────────────────────────────\n\nexport interface SidebarSectionProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Section heading. Rendered in small caps above the items.\n   * Omit for an untitled section (e.g. the first group in a sidebar).\n   */\n  title?: string;\n  /** Icon rendered left of the title. Same type as `SidebarItem.icon`. */\n  icon?: IconDefinition;\n  /** Whether the section body can be toggled open/closed. Defaults to `false`. */\n  collapsible?: boolean;\n  /** Initial open state when `collapsible` is true. Defaults to `true`. */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when open state changes. */\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Named group of `SidebarItem` entries inside a `Sidebar`.\n *\n * Sections are separated by a thin divider. The title and icon are optional.\n * When `collapsible` is true the body can be toggled via the header button or\n * imperatively via a `ref` (`expand`, `collapse`, `toggle`).\n *\n * In rail (icon-only) mode the body is always visible regardless of open state.\n * When a sidebar filter is active and no children match, the section is hidden.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport const SidebarSection = forwardRef<SidebarSectionHandle, SidebarSectionProps>(\n  function SidebarSection(\n    {\n      title,\n      icon,\n      collapsible = false,\n      defaultOpen = true,\n      open: controlledOpen,\n      onOpenChange,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n    const isControlled = controlledOpen !== undefined;\n    const open = isControlled ? controlledOpen : internalOpen;\n\n    const sidebarCollapsed = useSidebarCollapsed();\n    const filterValue = useContext(SidebarFilterContext);\n    const bodyId = useId();\n\n    const setAndNotify = (next: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(next);\n      }\n\n      onOpenChange?.(next);\n    };\n\n    useImperativeHandle(ref, () => ({\n      expand: () => setAndNotify(true),\n      collapse: () => setAndNotify(false),\n      toggle: () => setAndNotify(!open),\n    }));\n\n    // Hide section entirely when filter is active and no children match\n    const hasVisibleChildren =\n      filterValue.length === 0 || countMatchingItems(children, filterValue) > 0;\n\n    if (!hasVisibleChildren) {\n      return null;\n    }\n\n    // In rail mode the body is always visible\n    const isOpen = sidebarCollapsed ? true : open;\n\n    const showHeader = !!(title || icon || (collapsible && !sidebarCollapsed));\n\n    return (\n      <section className={[styles.section, className].filter(Boolean).join(' ')} {...props}>\n        {showHeader &&\n          (collapsible && !sidebarCollapsed ? (\n            <button\n              type=\"button\"\n              className={styles.sectionHeader}\n              onClick={() => setAndNotify(!open)}\n              aria-expanded={open}\n              aria-controls={bodyId}\n            >\n              {icon && (\n                <span className={styles.sectionHeaderIcon}>\n                  <Icon icon={icon} size=\"sm\" aria-hidden />\n                </span>\n              )}\n              {title && <span className={styles.sectionTitle}>{title}</span>}\n              <span className={styles.sectionChevron}>\n                <Icon icon={open ? PanUp : PanDown} size=\"sm\" aria-hidden />\n              </span>\n            </button>\n          ) : (\n            <div className={styles.sectionHeader}>\n              {icon && (\n                <span className={styles.sectionHeaderIcon}>\n                  <Icon icon={icon} size=\"sm\" aria-hidden />\n                </span>\n              )}\n              {title && <span className={styles.sectionTitle}>{title}</span>}\n            </div>\n          ))}\n\n        <div\n          id={bodyId}\n          className={[styles.sectionBody, !isOpen ? styles.sectionBodyCollapsed : null]\n            .filter(Boolean)\n            .join(' ')}\n          aria-hidden={!isOpen || undefined}\n        >\n          <div className={styles.sectionBodyInner}>\n            <ul className={styles.list}>{children}</ul>\n          </div>\n        </div>\n      </section>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/Sidebar/SidebarSection.d.ts

@@ -1,5 +1,5 @@
-import { HTMLAttributes, ReactNode } from 'react';
 import { IconDefinition } from '@gnome-ui/icons';
+import { HTMLAttributes, ReactNode } from 'react';
 export interface SidebarSectionHandle {
     expand: () => void;
     collapse: () => void;

package/dist/components/Sidebar/SidebarSection.js

@@ -74,7 +74,6 @@ var g = a(function({ title: i, icon: a, collapsible: o = !1, defaultOpen: g = !0
 			children: /* @__PURE__ */ d("div", {
 				className: t.sectionBodyInner,
 				children: /* @__PURE__ */ d("ul", {
-					role: "list",
 					className: t.list,
 					children: y
 				})