@gnome-ui/react 1.44.0 → 1.45.1

package/dist/components/ShortcutsDialog/ShortcutsDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutsDialog.js","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.tsx"],"sourcesContent":["import {\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n  type KeyboardEvent,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styles from \"./ShortcutsDialog.module.css\";\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface ShortcutEntry {\n  /**\n   * Key combination tokens, e.g. `[\"Ctrl\", \"S\"]` or `[\"F5\"]`.\n   * Each token is rendered as a styled `<kbd>` key cap.\n   */\n  keys: string[];\n  /** Human-readable description of what the shortcut does. */\n  description: string;\n}\n\nexport interface ShortcutsSection {\n  /** Section heading, e.g. \"File\", \"Edit\". */\n  title: string;\n  shortcuts: ShortcutEntry[];\n}\n\nexport interface ShortcutsDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called when the dialog is dismissed (Escape, close button). */\n  onClose: () => void;\n  /** Dialog heading. Defaults to `\"Keyboard Shortcuts\"`. */\n  title?: string;\n  /** Shortcut sections to display. */\n  sections: ShortcutsSection[];\n}\n\n// ─── Focusable selector (reused from Dialog) ─────────────────────────────────\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Modal dialog listing keyboard shortcuts, grouped in sections, with\n * integrated search to filter by description or key name.\n *\n * Mirrors `AdwShortcutsDialog` (libadwaita 1.8 / GNOME 49).\n *\n * - Renders into a portal (`document.body`).\n * - Traps focus; Escape closes.\n * - Search filters across all sections in real time.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ShortcutsDialog.html\n */\nexport function ShortcutsDialog({\n  open,\n  onClose,\n  title = \"Keyboard Shortcuts\",\n  sections,\n}: ShortcutsDialogProps) {\n  const [query, setQuery] = useState(\"\");\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const previouslyFocused = useRef<Element | null>(null);\n  const titleId = useRef(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      // Focus the search field after mount\n      requestAnimationFrame(() => searchRef.current?.focus());\n    } else {\n      setQuery(\"\");\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        onClose();\n        return;\n      }\n      if (e.key !== \"Tab\") return;\n\n      const focusable = Array.from(\n        dialogRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n      if (focusable.length === 0) return;\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    },\n    [onClose],\n  );\n\n  if (!open) return null;\n\n  // Filter sections by query\n  const q = query.trim().toLowerCase();\n  const filtered = sections\n    .map((section) => ({\n      ...section,\n      shortcuts: section.shortcuts.filter(\n        ({ description, keys }) =>\n          !q ||\n          description.toLowerCase().includes(q) ||\n          keys.some((k) => k.toLowerCase().includes(q)),\n      ),\n    }))\n    .filter((s) => s.shortcuts.length > 0);\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      onClick={onClose}\n      aria-hidden=\"true\"\n    >\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId.current}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* ── Header ── */}\n        <div className={styles.header}>\n          <span id={titleId.current} className={styles.title}>\n            {title}\n          </span>\n          <button\n            type=\"button\"\n            className={styles.closeBtn}\n            aria-label=\"Close\"\n            onClick={onClose}\n          >\n            ×\n          </button>\n        </div>\n\n        {/* ── Search ── */}\n        <div className={styles.searchRow}>\n          <span className={styles.searchIcon} aria-hidden=\"true\">⌕</span>\n          <input\n            ref={searchRef}\n            type=\"search\"\n            className={styles.searchInput}\n            placeholder=\"Search shortcuts…\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            aria-label=\"Search shortcuts\"\n          />\n          {query && (\n            <button\n              type=\"button\"\n              className={styles.searchClear}\n              aria-label=\"Clear search\"\n              onClick={() => { setQuery(\"\"); searchRef.current?.focus(); }}\n            >\n              ×\n            </button>\n          )}\n        </div>\n\n        {/* ── Shortcut list ── */}\n        <div className={styles.body} role=\"list\">\n          {filtered.length === 0 ? (\n            <p className={styles.empty}>No shortcuts match \"{query}\"</p>\n          ) : (\n            filtered.map((section) => (\n              <section key={section.title} className={styles.section}>\n                <h3 className={styles.sectionTitle}>{section.title}</h3>\n                <ul className={styles.list}>\n                  {section.shortcuts.map((shortcut) => (\n                    <li key={shortcut.description} className={styles.row} role=\"listitem\">\n                      <span className={styles.keys} aria-label={shortcut.keys.join(\" + \")}>\n                        {shortcut.keys.map((key, i) => (\n                          <span key={i} className={styles.keyCap}>\n                            <kbd>{key}</kbd>\n                            {i < shortcut.keys.length - 1 && (\n                              <span className={styles.plus} aria-hidden=\"true\">+</span>\n                            )}\n                          </span>\n                        ))}\n                      </span>\n                      <span className={styles.description}>{shortcut.description}</span>\n                    </li>\n                  ))}\n                </ul>\n              </section>\n            ))\n          )}\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === \"undefined\") return node;\n  return createPortal(node, document.body);\n}\n"],"mappings":"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"}
+{"version":3,"file":"ShortcutsDialog.js","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.tsx"],"sourcesContent":["import { type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport styles from './ShortcutsDialog.module.css';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface ShortcutEntry {\n  /**\n   * Key combination tokens, e.g. `[\"Ctrl\", \"S\"]` or `[\"F5\"]`.\n   * Each token is rendered as a styled `<kbd>` key cap.\n   */\n  keys: string[];\n  /** Human-readable description of what the shortcut does. */\n  description: string;\n}\n\nexport interface ShortcutsSection {\n  /** Section heading, e.g. \"File\", \"Edit\". */\n  title: string;\n  shortcuts: ShortcutEntry[];\n}\n\nexport interface ShortcutsDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called when the dialog is dismissed (Escape, close button). */\n  onClose: () => void;\n  /** Dialog heading. Defaults to `\"Keyboard Shortcuts\"`. */\n  title?: string;\n  /** Shortcut sections to display. */\n  sections: ShortcutsSection[];\n}\n\n// ─── Focusable selector (reused from Dialog) ─────────────────────────────────\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Modal dialog listing keyboard shortcuts, grouped in sections, with\n * integrated search to filter by description or key name.\n *\n * Mirrors `AdwShortcutsDialog` (libadwaita 1.8 / GNOME 49).\n *\n * - Renders into a portal (`document.body`).\n * - Traps focus; Escape closes.\n * - Search filters across all sections in real time.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ShortcutsDialog.html\n */\nexport function ShortcutsDialog({\n  open,\n  onClose,\n  title = 'Keyboard Shortcuts',\n  sections,\n}: ShortcutsDialogProps) {\n  const [query, setQuery] = useState('');\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const previouslyFocused = useRef<Element | null>(null);\n  const titleId = useRef(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      // Focus the search field after mount\n      requestAnimationFrame(() => searchRef.current?.focus());\n    } else {\n      setQuery('');\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n\n        return;\n      }\n\n      if (e.key !== 'Tab') {\n        return;\n      }\n\n      const focusable = Array.from(\n        dialogRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n\n      if (focusable.length === 0) {\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  // Filter sections by query\n  const q = query.trim().toLowerCase();\n  const filtered = sections\n    .map((section) => ({\n      ...section,\n      shortcuts: section.shortcuts.filter(\n        ({ description, keys }) =>\n          !q ||\n          description.toLowerCase().includes(q) ||\n          keys.some((k) => k.toLowerCase().includes(q)),\n      ),\n    }))\n    .filter((s) => s.shortcuts.length > 0);\n\n  const node = (\n    <div className={styles.backdrop} onClick={onClose} aria-hidden=\"true\">\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId.current}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* ── Header ── */}\n        <div className={styles.header}>\n          <span id={titleId.current} className={styles.title}>\n            {title}\n          </span>\n          <button type=\"button\" className={styles.closeBtn} aria-label=\"Close\" onClick={onClose}>\n            ×\n          </button>\n        </div>\n\n        {/* ── Search ── */}\n        <div className={styles.searchRow}>\n          <span className={styles.searchIcon} aria-hidden=\"true\">\n            ⌕\n          </span>\n          <input\n            ref={searchRef}\n            type=\"search\"\n            className={styles.searchInput}\n            placeholder=\"Search shortcuts…\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            aria-label=\"Search shortcuts\"\n          />\n          {query && (\n            <button\n              type=\"button\"\n              className={styles.searchClear}\n              aria-label=\"Clear search\"\n              onClick={() => {\n                setQuery('');\n                searchRef.current?.focus();\n              }}\n            >\n              ×\n            </button>\n          )}\n        </div>\n\n        {/* ── Shortcut list ── */}\n        <div className={styles.body} role=\"list\">\n          {filtered.length === 0 ? (\n            <p className={styles.empty}>No shortcuts match \"{query}\"</p>\n          ) : (\n            filtered.map((section) => (\n              <section key={section.title} className={styles.section}>\n                <h3 className={styles.sectionTitle}>{section.title}</h3>\n                <ul className={styles.list}>\n                  {section.shortcuts.map((shortcut) => (\n                    <li key={shortcut.description} className={styles.row}>\n                      <span className={styles.keys} aria-label={shortcut.keys.join(' + ')}>\n                        {shortcut.keys.map((key, i) => (\n                          <span key={i} className={styles.keyCap}>\n                            <kbd>{key}</kbd>\n                            {i < shortcut.keys.length - 1 && (\n                              <span className={styles.plus} aria-hidden=\"true\">\n                                +\n                              </span>\n                            )}\n                          </span>\n                        ))}\n                      </span>\n                      <span className={styles.description}>{shortcut.description}</span>\n                    </li>\n                  ))}\n                </ul>\n              </section>\n            ))\n          )}\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e=`_backdrop_zvuhh_3`,t=`_dialog_zvuhh_26`,n=`_header_zvuhh_59`,r=`_title_zvuhh_67`,i=`_closeBtn_zvuhh_74`,a=`_searchRow_zvuhh_112`,o=`_searchIcon_zvuhh_124`,s=`_searchInput_zvuhh_132`,c=`_searchClear_zvuhh_151`,l=`_body_zvuhh_174`,u=`_empty_zvuhh_182`,d=`_section_zvuhh_193`,f=`_sectionTitle_zvuhh_199`,p=`_list_zvuhh_209`,m=`_row_zvuhh_225`,h=`_keys_zvuhh_240`,g=`_keyCap_zvuhh_247`,_=`_plus_zvuhh_277`,v=`_description_zvuhh_284`,y={backdrop:e,"backdrop-in":`_backdrop-in_zvuhh_1`,dialog:t,"dialog-in":`_dialog-in_zvuhh_1`,header:n,title:r,closeBtn:i,searchRow:a,searchIcon:o,searchInput:s,searchClear:c,body:l,empty:u,section:d,sectionTitle:f,list:p,row:m,keys:h,keyCap:g,plus:_,description:v};exports.default=y;
+var e=`_backdrop_16tbw_3`,t=`_dialog_16tbw_30`,n=`_header_16tbw_63`,r=`_title_16tbw_71`,i=`_closeBtn_16tbw_78`,a=`_searchRow_16tbw_117`,o=`_searchIcon_16tbw_129`,s=`_searchInput_16tbw_137`,c=`_searchClear_16tbw_158`,l=`_body_16tbw_183`,u=`_empty_16tbw_191`,d=`_section_16tbw_202`,f=`_sectionTitle_16tbw_208`,p=`_list_16tbw_218`,m=`_row_16tbw_234`,h=`_keys_16tbw_249`,g=`_keyCap_16tbw_256`,_=`_plus_16tbw_286`,v=`_description_16tbw_293`,y={backdrop:e,"backdrop-in":`_backdrop-in_16tbw_1`,dialog:t,"dialog-in":`_dialog-in_16tbw_1`,header:n,title:r,closeBtn:i,searchRow:a,searchIcon:o,searchInput:s,searchClear:c,body:l,empty:u,section:d,sectionTitle:f,list:p,row:m,keys:h,keyCap:g,plus:_,description:v};exports.default=y;
 //# sourceMappingURL=ShortcutsDialog.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ShortcutsDialog.module.css.cjs","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n  display: flex;\n  flex-direction: column;\n\n  width: min(580px, calc(100vw - 48px));\n  max-height: min(640px, calc(100vh - 80px));\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 32px rgba(0, 0, 0, 0.25),\n    0 0 0 1px rgba(0, 0, 0, 0.08);\n\n  overflow: hidden;\n\n  animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--gnome-space-3, 18px) var(--gnome-space-3, 18px) var(--gnome-space-2, 12px);\n  flex-shrink: 0;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: 1.3;\n}\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 32px;\n  height: 32px;\n  border-radius: var(--gnome-radius-pill);\n\n  font-size: 1.25rem;\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.6;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n              opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.closeBtn:hover {\n  background-color: rgba(0, 0, 0, 0.07);\n  opacity: 1;\n}\n\n.closeBtn:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Search ────────────────────────────────────────────────────────────────── */\n\n.searchRow {\n  position: relative;\n  display: flex;\n  align-items: center;\n  margin: 0 var(--gnome-space-3, 18px) var(--gnome-space-2, 12px);\n  flex-shrink: 0;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md, 8px);\n}\n\n.searchIcon {\n  padding: 0 var(--gnome-space-1, 6px) 0 var(--gnome-space-2, 12px);\n  font-size: 1.1rem;\n  opacity: 0.5;\n  pointer-events: none;\n  user-select: none;\n}\n\n.searchInput {\n  flex: 1;\n  border: none;\n  background: transparent;\n  outline: none;\n  padding: 7px 0;\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\n.searchInput::placeholder {\n  opacity: 0.5;\n}\n\n/* hide browser-native × */\n.searchInput::-webkit-search-cancel-button { display: none; }\n\n.searchClear {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n  padding: 0 var(--gnome-space-2, 12px);\n\n  font-size: 1rem;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.5;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.searchClear:hover { opacity: 1; }\n\n.searchRow:focus-within {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gnome-accent-color, #3584e4) 25%, transparent);\n}\n\n/* ─── Scrollable body ───────────────────────────────────────────────────────── */\n\n.body {\n  overflow-y: auto;\n  padding: 0 var(--gnome-space-3, 18px) var(--gnome-space-3, 18px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-3, 18px);\n}\n\n.empty {\n  text-align: center;\n  padding: var(--gnome-space-4, 24px) 0;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  opacity: 0.5;\n  margin: 0;\n}\n\n/* ─── Section ───────────────────────────────────────────────────────────────── */\n\n.section {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sectionTitle {\n  margin: 0 0 var(--gnome-space-1, 6px);\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}\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: var(--gnome-radius-md, 8px);\n  overflow: hidden;\n}\n\n/* ─── Shortcut row ──────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-3, 18px);\n  padding: 8px var(--gnome-space-2, 12px);\n  border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n}\n\n.row:last-child {\n  border-bottom: none;\n}\n\n/* ─── Key caps ──────────────────────────────────────────────────────────────── */\n\n.keys {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.keyCap {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.keyCap kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: 2px 7px;\n  min-width: 24px;\n\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  font-style: normal;\n  line-height: 1.6;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  border: 1px solid rgba(0, 0, 0, 0.18);\n  border-bottom-width: 2px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);\n\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n}\n\n.plus {\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  opacity: 0.4;\n}\n\n/* ─── Description ───────────────────────────────────────────────────────────── */\n\n.description {\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  text-align: end;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .dialog {\n    background-color: var(--gnome-window-bg-color, #242424);\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .closeBtn:hover {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .searchRow {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .row {\n    border-bottom-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .keyCap kbd {\n    background-color: var(--gnome-window-bg-color, #242424);\n    border-color: rgba(255, 255, 255, 0.2);\n    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .dialog {\n    animation: none;\n  }\n\n  .closeBtn,\n  .searchClear {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ShortcutsDialog.module.css.cjs","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n  display: flex;\n  flex-direction: column;\n\n  width: min(580px, calc(100vw - 48px));\n  max-height: min(640px, calc(100vh - 80px));\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 32px rgba(0, 0, 0, 0.25),\n    0 0 0 1px rgba(0, 0, 0, 0.08);\n\n  overflow: hidden;\n\n  animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--gnome-space-3, 18px) var(--gnome-space-3, 18px) var(--gnome-space-2, 12px);\n  flex-shrink: 0;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: 1.3;\n}\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 32px;\n  height: 32px;\n  border-radius: var(--gnome-radius-pill);\n\n  font-size: 1.25rem;\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.6;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.closeBtn:hover {\n  background-color: rgba(0, 0, 0, 0.07);\n  opacity: 1;\n}\n\n.closeBtn:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Search ────────────────────────────────────────────────────────────────── */\n\n.searchRow {\n  position: relative;\n  display: flex;\n  align-items: center;\n  margin: 0 var(--gnome-space-3, 18px) var(--gnome-space-2, 12px);\n  flex-shrink: 0;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md, 8px);\n}\n\n.searchIcon {\n  padding: 0 var(--gnome-space-1, 6px) 0 var(--gnome-space-2, 12px);\n  font-size: 1.1rem;\n  opacity: 0.5;\n  pointer-events: none;\n  user-select: none;\n}\n\n.searchInput {\n  flex: 1;\n  border: none;\n  background: transparent;\n  outline: none;\n  padding: 7px 0;\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\n.searchInput::placeholder {\n  opacity: 0.5;\n}\n\n/* hide browser-native × */\n.searchInput::-webkit-search-cancel-button {\n  display: none;\n}\n\n.searchClear {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n  padding: 0 var(--gnome-space-2, 12px);\n\n  font-size: 1rem;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.5;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.searchClear:hover {\n  opacity: 1;\n}\n\n.searchRow:focus-within {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gnome-accent-color, #3584e4) 25%, transparent);\n}\n\n/* ─── Scrollable body ───────────────────────────────────────────────────────── */\n\n.body {\n  overflow-y: auto;\n  padding: 0 var(--gnome-space-3, 18px) var(--gnome-space-3, 18px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-3, 18px);\n}\n\n.empty {\n  text-align: center;\n  padding: var(--gnome-space-4, 24px) 0;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  opacity: 0.5;\n  margin: 0;\n}\n\n/* ─── Section ───────────────────────────────────────────────────────────────── */\n\n.section {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sectionTitle {\n  margin: 0 0 var(--gnome-space-1, 6px);\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}\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: var(--gnome-radius-md, 8px);\n  overflow: hidden;\n}\n\n/* ─── Shortcut row ──────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-3, 18px);\n  padding: 8px var(--gnome-space-2, 12px);\n  border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n}\n\n.row:last-child {\n  border-bottom: none;\n}\n\n/* ─── Key caps ──────────────────────────────────────────────────────────────── */\n\n.keys {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.keyCap {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.keyCap kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: 2px 7px;\n  min-width: 24px;\n\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  font-style: normal;\n  line-height: 1.6;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  border: 1px solid rgba(0, 0, 0, 0.18);\n  border-bottom-width: 2px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);\n\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n}\n\n.plus {\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  opacity: 0.4;\n}\n\n/* ─── Description ───────────────────────────────────────────────────────────── */\n\n.description {\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  text-align: end;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .dialog {\n    background-color: var(--gnome-window-bg-color, #242424);\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .closeBtn:hover {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .searchRow {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .row {\n    border-bottom-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .keyCap kbd {\n    background-color: var(--gnome-window-bg-color, #242424);\n    border-color: rgba(255, 255, 255, 0.2);\n    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .dialog {\n    animation: none;\n  }\n\n  .closeBtn,\n  .searchClear {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,9 +1,9 @@
 //#region src/components/ShortcutsDialog/ShortcutsDialog.module.css
-var e = "_backdrop_zvuhh_3", t = "_dialog_zvuhh_26", n = "_header_zvuhh_59", r = "_title_zvuhh_67", i = "_closeBtn_zvuhh_74", a = "_searchRow_zvuhh_112", o = "_searchIcon_zvuhh_124", s = "_searchInput_zvuhh_132", c = "_searchClear_zvuhh_151", l = "_body_zvuhh_174", u = "_empty_zvuhh_182", d = "_section_zvuhh_193", f = "_sectionTitle_zvuhh_199", p = "_list_zvuhh_209", m = "_row_zvuhh_225", h = "_keys_zvuhh_240", g = "_keyCap_zvuhh_247", _ = "_plus_zvuhh_277", v = "_description_zvuhh_284", y = {
+var e = "_backdrop_16tbw_3", t = "_dialog_16tbw_30", n = "_header_16tbw_63", r = "_title_16tbw_71", i = "_closeBtn_16tbw_78", a = "_searchRow_16tbw_117", o = "_searchIcon_16tbw_129", s = "_searchInput_16tbw_137", c = "_searchClear_16tbw_158", l = "_body_16tbw_183", u = "_empty_16tbw_191", d = "_section_16tbw_202", f = "_sectionTitle_16tbw_208", p = "_list_16tbw_218", m = "_row_16tbw_234", h = "_keys_16tbw_249", g = "_keyCap_16tbw_256", _ = "_plus_16tbw_286", v = "_description_16tbw_293", y = {
 	backdrop: e,
-	"backdrop-in": "_backdrop-in_zvuhh_1",
+	"backdrop-in": "_backdrop-in_16tbw_1",
 	dialog: t,
-	"dialog-in": "_dialog-in_zvuhh_1",
+	"dialog-in": "_dialog-in_16tbw_1",
 	header: n,
 	title: r,
 	closeBtn: i,

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

@@ -1 +1 @@
-{"version":3,"file":"ShortcutsDialog.module.css.js","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n  display: flex;\n  flex-direction: column;\n\n  width: min(580px, calc(100vw - 48px));\n  max-height: min(640px, calc(100vh - 80px));\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 32px rgba(0, 0, 0, 0.25),\n    0 0 0 1px rgba(0, 0, 0, 0.08);\n\n  overflow: hidden;\n\n  animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--gnome-space-3, 18px) var(--gnome-space-3, 18px) var(--gnome-space-2, 12px);\n  flex-shrink: 0;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: 1.3;\n}\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 32px;\n  height: 32px;\n  border-radius: var(--gnome-radius-pill);\n\n  font-size: 1.25rem;\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.6;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n              opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.closeBtn:hover {\n  background-color: rgba(0, 0, 0, 0.07);\n  opacity: 1;\n}\n\n.closeBtn:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Search ────────────────────────────────────────────────────────────────── */\n\n.searchRow {\n  position: relative;\n  display: flex;\n  align-items: center;\n  margin: 0 var(--gnome-space-3, 18px) var(--gnome-space-2, 12px);\n  flex-shrink: 0;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md, 8px);\n}\n\n.searchIcon {\n  padding: 0 var(--gnome-space-1, 6px) 0 var(--gnome-space-2, 12px);\n  font-size: 1.1rem;\n  opacity: 0.5;\n  pointer-events: none;\n  user-select: none;\n}\n\n.searchInput {\n  flex: 1;\n  border: none;\n  background: transparent;\n  outline: none;\n  padding: 7px 0;\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\n.searchInput::placeholder {\n  opacity: 0.5;\n}\n\n/* hide browser-native × */\n.searchInput::-webkit-search-cancel-button { display: none; }\n\n.searchClear {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n  padding: 0 var(--gnome-space-2, 12px);\n\n  font-size: 1rem;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.5;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.searchClear:hover { opacity: 1; }\n\n.searchRow:focus-within {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gnome-accent-color, #3584e4) 25%, transparent);\n}\n\n/* ─── Scrollable body ───────────────────────────────────────────────────────── */\n\n.body {\n  overflow-y: auto;\n  padding: 0 var(--gnome-space-3, 18px) var(--gnome-space-3, 18px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-3, 18px);\n}\n\n.empty {\n  text-align: center;\n  padding: var(--gnome-space-4, 24px) 0;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  opacity: 0.5;\n  margin: 0;\n}\n\n/* ─── Section ───────────────────────────────────────────────────────────────── */\n\n.section {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sectionTitle {\n  margin: 0 0 var(--gnome-space-1, 6px);\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}\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: var(--gnome-radius-md, 8px);\n  overflow: hidden;\n}\n\n/* ─── Shortcut row ──────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-3, 18px);\n  padding: 8px var(--gnome-space-2, 12px);\n  border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n}\n\n.row:last-child {\n  border-bottom: none;\n}\n\n/* ─── Key caps ──────────────────────────────────────────────────────────────── */\n\n.keys {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.keyCap {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.keyCap kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: 2px 7px;\n  min-width: 24px;\n\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  font-style: normal;\n  line-height: 1.6;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  border: 1px solid rgba(0, 0, 0, 0.18);\n  border-bottom-width: 2px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);\n\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n}\n\n.plus {\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  opacity: 0.4;\n}\n\n/* ─── Description ───────────────────────────────────────────────────────────── */\n\n.description {\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  text-align: end;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .dialog {\n    background-color: var(--gnome-window-bg-color, #242424);\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .closeBtn:hover {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .searchRow {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .row {\n    border-bottom-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .keyCap kbd {\n    background-color: var(--gnome-window-bg-color, #242424);\n    border-color: rgba(255, 255, 255, 0.2);\n    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .dialog {\n    animation: none;\n  }\n\n  .closeBtn,\n  .searchClear {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ShortcutsDialog.module.css.js","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n  display: flex;\n  flex-direction: column;\n\n  width: min(580px, calc(100vw - 48px));\n  max-height: min(640px, calc(100vh - 80px));\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 32px rgba(0, 0, 0, 0.25),\n    0 0 0 1px rgba(0, 0, 0, 0.08);\n\n  overflow: hidden;\n\n  animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--gnome-space-3, 18px) var(--gnome-space-3, 18px) var(--gnome-space-2, 12px);\n  flex-shrink: 0;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: 1.3;\n}\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 32px;\n  height: 32px;\n  border-radius: var(--gnome-radius-pill);\n\n  font-size: 1.25rem;\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.6;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.closeBtn:hover {\n  background-color: rgba(0, 0, 0, 0.07);\n  opacity: 1;\n}\n\n.closeBtn:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Search ────────────────────────────────────────────────────────────────── */\n\n.searchRow {\n  position: relative;\n  display: flex;\n  align-items: center;\n  margin: 0 var(--gnome-space-3, 18px) var(--gnome-space-2, 12px);\n  flex-shrink: 0;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md, 8px);\n}\n\n.searchIcon {\n  padding: 0 var(--gnome-space-1, 6px) 0 var(--gnome-space-2, 12px);\n  font-size: 1.1rem;\n  opacity: 0.5;\n  pointer-events: none;\n  user-select: none;\n}\n\n.searchInput {\n  flex: 1;\n  border: none;\n  background: transparent;\n  outline: none;\n  padding: 7px 0;\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\n.searchInput::placeholder {\n  opacity: 0.5;\n}\n\n/* hide browser-native × */\n.searchInput::-webkit-search-cancel-button {\n  display: none;\n}\n\n.searchClear {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  outline: none;\n  padding: 0 var(--gnome-space-2, 12px);\n\n  font-size: 1rem;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.5;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.searchClear:hover {\n  opacity: 1;\n}\n\n.searchRow:focus-within {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gnome-accent-color, #3584e4) 25%, transparent);\n}\n\n/* ─── Scrollable body ───────────────────────────────────────────────────────── */\n\n.body {\n  overflow-y: auto;\n  padding: 0 var(--gnome-space-3, 18px) var(--gnome-space-3, 18px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-3, 18px);\n}\n\n.empty {\n  text-align: center;\n  padding: var(--gnome-space-4, 24px) 0;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  opacity: 0.5;\n  margin: 0;\n}\n\n/* ─── Section ───────────────────────────────────────────────────────────────── */\n\n.section {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.sectionTitle {\n  margin: 0 0 var(--gnome-space-1, 6px);\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}\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: var(--gnome-radius-md, 8px);\n  overflow: hidden;\n}\n\n/* ─── Shortcut row ──────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-3, 18px);\n  padding: 8px var(--gnome-space-2, 12px);\n  border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n}\n\n.row:last-child {\n  border-bottom: none;\n}\n\n/* ─── Key caps ──────────────────────────────────────────────────────────────── */\n\n.keys {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  flex-shrink: 0;\n}\n\n.keyCap {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.keyCap kbd {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  padding: 2px 7px;\n  min-width: 24px;\n\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  font-style: normal;\n  line-height: 1.6;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  border: 1px solid rgba(0, 0, 0, 0.18);\n  border-bottom-width: 2px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);\n\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n}\n\n.plus {\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  opacity: 0.4;\n}\n\n/* ─── Description ───────────────────────────────────────────────────────────── */\n\n.description {\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  text-align: end;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .dialog {\n    background-color: var(--gnome-window-bg-color, #242424);\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .closeBtn:hover {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .searchRow {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .row {\n    border-bottom-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .keyCap kbd {\n    background-color: var(--gnome-window-bg-color, #242424);\n    border-color: rgba(255, 255, 255, 0.2);\n    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .dialog {\n    animation: none;\n  }\n\n  .closeBtn,\n  .searchClear {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/ShortcutsDialog/index.d.ts

@@ -1,2 +1,2 @@
+export type { ShortcutEntry, ShortcutsDialogProps, ShortcutsSection } from './ShortcutsDialog';
 export { ShortcutsDialog } from './ShortcutsDialog';
-export type { ShortcutsDialogProps, ShortcutsSection, ShortcutEntry } from './ShortcutsDialog';

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.cjs","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":"+NAiBA,IAAa,GAAA,EAAA,EAAA,eAAwC,GAAM,CAG3D,SAAgB,GAAsB,CACpC,OAAA,EAAA,EAAA,YAAkB,EAAwB,CAI5C,IAAa,GAAA,EAAA,EAAA,eAAqC,GAAG,CAKrD,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,EAKT,IAAM,EAAuC,CAC3C,KAAM,cACN,MAAO,eACP,IAAK,aACL,OAAQ,gBACR,MAAO,eACP,YAAa,qBACb,QAAS,iBACV,CAwDD,SAAgB,EAAQ,CACtB,WACA,YAAY,GACZ,aACA,OAAQ,EACR,iBACA,OACA,UAAU,UACV,YACA,GAAG,GACY,CACf,GAAM,CAAC,EAAgB,IAAA,EAAA,EAAA,UAA8B,GAAG,CAClD,CAAE,YAAa,EAAA,eAAe,CAE9B,EAAe,IAAqB,IAAA,GACpC,EAAc,EAAe,EAAmB,EAEhD,EAAsB,GAAc,CACnC,GAAc,EAAkB,EAAE,CACvC,IAAiB,EAAE,EAGf,EAAiB,EAAY,OAAS,EACtC,EAAgB,IAAS,EAAW,OAAS,WAC7C,EAAa,CAAC,GAAkB,EAAmB,EAAU,EAAY,CAAG,EAElF,OACE,EAAA,EAAA,KAAC,EAAwB,SAAzB,CAAkC,MAAO,YACvC,EAAA,EAAA,KAAC,EAAqB,SAAtB,CAA+B,MAAO,YACpC,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,QACP,EAAY,EAAA,QAAO,UAAY,KAC/B,IAAkB,OAAS,EAAA,QAAO,SAAW,KAC7C,IAAY,UAA4C,KAAhC,EAAA,QAAO,EAAa,IAC5C,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAVN,CAYG,IACC,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,qBACrB,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,KAAA,GACA,MAAO,EACP,SAAW,GAAM,EAAmB,EAAE,OAAO,MAAM,CACnD,YAAe,EAAmB,GAAG,CACrC,YAAe,EAAmB,GAAG,CACrC,OAAA,GACA,CAAA,CACE,CAAA,CAGP,GAAkB,CAAC,GAClB,EAAA,EAAA,KAAC,EAAA,WAAD,CACE,MAAM,aACN,YAAY,8BACZ,QAAA,GACA,CAAA,CAEF,EAEE,GACwB,CAAA,CACC,CAAA"}
+{"version":3,"file":"Sidebar.cjs","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 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) {\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":"+NAoBA,IAAa,GAAA,EAAA,EAAA,eAAwC,GAAM,CAI3D,SAAgB,GAAsB,CACpC,OAAA,EAAA,EAAA,YAAkB,EAAwB,CAK5C,IAAa,GAAA,EAAA,EAAA,eAAqC,GAAG,CAKrD,SAAS,EAAmB,EAAqB,EAAwB,CACvE,IAAI,EAAQ,EAiBZ,OAhBA,EAAA,SAAS,QAAQ,EAAW,GAAU,CACpC,GAAI,EAAA,EAAA,EAAA,gBAAgB,EAAM,CACxB,OAGF,IAAM,EAAQ,EAAM,MAEhB,OAAO,EAAM,OAAU,SACrB,EAAM,MAAM,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,EAC1D,IAEO,EAAM,WACf,GAAS,EAAmB,EAAM,SAAuB,EAAO,GAElE,CAEK,EAKT,IAAM,EAAuC,CAC3C,KAAM,cACN,MAAO,eACP,IAAK,aACL,OAAQ,gBACR,MAAO,eACP,YAAa,qBACb,QAAS,iBACV,CAwDD,SAAgB,EAAQ,CACtB,WACA,YAAY,GACZ,aACA,OAAQ,EACR,iBACA,OACA,UAAU,UACV,YACA,GAAG,GACY,CACf,GAAM,CAAC,EAAgB,IAAA,EAAA,EAAA,UAA8B,GAAG,CAClD,CAAE,YAAa,EAAA,eAAe,CAE9B,EAAe,IAAqB,IAAA,GACpC,EAAc,EAAe,EAAmB,EAEhD,EAAsB,GAAc,CACnC,GACH,EAAkB,EAAE,CAGtB,IAAiB,EAAE,EAGf,EAAiB,EAAY,OAAS,EACtC,EAAgB,IAAS,EAAW,OAAS,WAC7C,EAAa,CAAC,GAAkB,EAAmB,EAAU,EAAY,CAAG,EAElF,OACE,EAAA,EAAA,KAAC,EAAwB,SAAzB,CAAkC,MAAO,YACvC,EAAA,EAAA,KAAC,EAAqB,SAAtB,CAA+B,MAAO,YACpC,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,QACP,EAAY,EAAA,QAAO,UAAY,KAC/B,IAAkB,OAAS,EAAA,QAAO,SAAW,KAC7C,IAAY,UAA4C,KAAhC,EAAA,QAAO,EAAa,IAC5C,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAVN,CAYG,IACC,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,qBACrB,EAAA,EAAA,KAAC,EAAA,UAAD,CACE,KAAA,GACA,MAAO,EACP,SAAW,GAAM,EAAmB,EAAE,OAAO,MAAM,CACnD,YAAe,EAAmB,GAAG,CACrC,YAAe,EAAmB,GAAG,CACrC,OAAA,GACA,CAAA,CACE,CAAA,CAGP,GAAkB,CAAC,GAClB,EAAA,EAAA,KAAC,EAAA,WAAD,CAAY,MAAM,aAAa,YAAY,8BAA8B,QAAA,GAAU,CAAA,CAEnF,EAEE,GACwB,CAAA,CACC,CAAA"}

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

@@ -34,7 +34,7 @@ export interface SidebarProps extends HTMLAttributes<HTMLElement> {
      * When omitted the sidebar auto-switches to `"page"` at ≤ 400 sp,
      * mirroring `AdwSidebar` mobile behaviour.
      */
-    mode?: "sidebar" | "page";
+    mode?: 'sidebar' | 'page';
     /**
      * Visual style variant for the sidebar background.
      * - `"classic"` — default GNOME gray
@@ -43,7 +43,7 @@ export interface SidebarProps extends HTMLAttributes<HTMLElement> {
      * - `"transparent"` — no background, inherits parent
      * - `"blurred"` — frosted glass (backdrop-filter blur), like macOS
      */
-    variant?: "classic" | "blue" | "green" | "red" | "yellow" | "black" | "transparent" | "blurred";
+    variant?: 'classic' | 'blue' | 'green' | 'red' | 'yellow' | 'black' | 'transparent' | 'blurred';
 }
 /**
  * Lateral navigation panel following the Adwaita `.navigation-sidebar` style.

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 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) {\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,GAAM;AAI3D,SAAgB,IAAsB;AACpC,QAAO,EAAW,EAAwB;;AAK5C,IAAa,IAAuB,EAAc,GAAG;AAKrD,SAAS,EAAmB,GAAqB,GAAwB;CACvE,IAAI,IAAQ;AAiBZ,QAhBA,EAAS,QAAQ,IAAW,MAAU;AACpC,MAAI,CAAC,EAAe,EAAM,CACxB;EAGF,IAAM,IAAQ,EAAM;AAEpB,EAAI,OAAO,EAAM,SAAU,WACrB,EAAM,MAAM,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,IAC1D,MAEO,EAAM,aACf,KAAS,EAAmB,EAAM,UAAuB,EAAO;GAElE,EAEK;;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;AAKxC,EAJK,KACH,EAAkB,EAAE,EAGtB,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;KAAY,OAAM;KAAa,aAAY;KAA8B,SAAA;KAAU,CAAA,GAEnF,EAEE;;GACwB,CAAA;EACC,CAAA"}

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_156vz_3`,t=`_section_156vz_21`,n=`_sectionHeader_156vz_35`,r=`_sectionHeaderIcon_156vz_71`,i=`_sectionTitle_156vz_78`,a=`_sectionChevron_156vz_94`,o=`_sectionBody_156vz_104`,s=`_sectionBodyCollapsed_156vz_110`,c=`_sectionBodyInner_156vz_114`,l=`_list_156vz_120`,u=`_item_156vz_131`,d=`_itemBtn_156vz_137`,f=`_active_156vz_184`,p=`_itemIcon_156vz_200`,m=`_itemLabel_156vz_213`,h=`_itemSuffix_156vz_223`,g=`_contextMenu_156vz_232`,_=`_contextMenuItem_156vz_262`,v=`_contextMenuDestructive_156vz_298`,y=`_searchWrap_156vz_304`,b=`_variantBlue_156vz_315`,x=`_variantGreen_156vz_324`,S=`_variantRed_156vz_333`,C=`_variantYellow_156vz_342`,w=`_variantBlack_156vz_351`,T=`_variantTransparent_156vz_360`,E=`_variantBlurred_156vz_365`,D=`_pageMode_156vz_381`,O=`_dragOver_156vz_388`,k=`_collapsed_156vz_396`,A=`_itemCollapsed_156vz_407`,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_156vz_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;
 //# 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,5 +1,5 @@
 //#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 = {
+var e = "_sidebar_156vz_3", t = "_section_156vz_21", n = "_sectionHeader_156vz_35", r = "_sectionHeaderIcon_156vz_71", i = "_sectionTitle_156vz_78", a = "_sectionChevron_156vz_94", o = "_sectionBody_156vz_104", s = "_sectionBodyCollapsed_156vz_110", c = "_sectionBodyInner_156vz_114", l = "_list_156vz_120", u = "_item_156vz_131", d = "_itemBtn_156vz_137", f = "_active_156vz_184", p = "_itemIcon_156vz_200", m = "_itemLabel_156vz_213", h = "_itemSuffix_156vz_223", g = "_contextMenu_156vz_232", _ = "_contextMenuItem_156vz_262", v = "_contextMenuDestructive_156vz_298", y = "_searchWrap_156vz_304", b = "_variantBlue_156vz_315", x = "_variantGreen_156vz_324", S = "_variantRed_156vz_333", C = "_variantYellow_156vz_342", w = "_variantBlack_156vz_351", T = "_variantTransparent_156vz_360", E = "_variantBlurred_156vz_365", D = "_pageMode_156vz_381", O = "_dragOver_156vz_388", k = "_collapsed_156vz_396", A = "_itemCollapsed_156vz_407", j = {
 	sidebar: e,
 	section: t,
 	sectionHeader: n,
@@ -17,7 +17,7 @@ var e = "_sidebar_1sdji_3", t = "_section_1sdji_21", n = "_sectionHeader_1sdji_3
 	itemLabel: m,
 	itemSuffix: h,
 	contextMenu: g,
-	"menu-in": "_menu-in_1sdji_1",
+	"menu-in": "_menu-in_156vz_1",
 	contextMenuItem: _,
 	contextMenuDestructive: v,
 	searchWrap: y,

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.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 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 && !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;