@gnome-ui/react 1.40.1 → 1.42.0

package/dist/components/PasswordEntryRow/PasswordEntryRow.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Icon/Icon.cjs`),t=require(`../../icons/dist/icons/ViewReveal.cjs`),n=require(`../../icons/dist/icons/ViewConceal.cjs`),r=require(`../EntryRow/EntryRow.cjs`),i=require(`./PasswordEntryRow.module.css.cjs`);let a=require(`react`),o=require(`react/jsx-runtime`);function s({trailing:s,disabled:c,...l}){let[u,d]=(0,a.useState)(!1),f=(0,o.jsx)(`button`,{type:`button`,className:i.default.revealButton,onClick:e=>{e.stopPropagation(),d(e=>!e)},"aria-label":u?`Conceal password`:`Reveal password`,"aria-pressed":u,disabled:c,children:(0,o.jsx)(e.Icon,{icon:u?n.e:t.e,size:`md`,"aria-hidden":!0})});return(0,o.jsx)(r.EntryRow,{...l,type:u?`text`:`password`,disabled:c,trailing:(0,o.jsxs)(o.Fragment,{children:[s,f]})})}exports.PasswordEntryRow=s;
+const e=require(`../Icon/Icon.cjs`),t=require(`../EntryRow/EntryRow.cjs`),n=require(`./PasswordEntryRow.module.css.cjs`);let r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@gnome-ui/icons`);function o({trailing:o,disabled:s,...c}){let[l,u]=(0,r.useState)(!1),d=(0,i.jsx)(`button`,{type:`button`,className:n.default.revealButton,onClick:e=>{e.stopPropagation(),u(e=>!e)},"aria-label":l?`Conceal password`:`Reveal password`,"aria-pressed":l,disabled:s,children:(0,i.jsx)(e.Icon,{icon:l?a.ViewConceal:a.ViewReveal,size:`md`,"aria-hidden":!0})});return(0,i.jsx)(t.EntryRow,{...c,type:l?`text`:`password`,disabled:s,trailing:(0,i.jsxs)(i.Fragment,{children:[o,d]})})}exports.PasswordEntryRow=o;
 //# sourceMappingURL=PasswordEntryRow.cjs.map

package/dist/components/PasswordEntryRow/PasswordEntryRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordEntryRow.cjs","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { ViewReveal, ViewConceal } from \"@gnome-ui/icons\";\nimport { EntryRow, type EntryRowProps } from \"../EntryRow\";\nimport styles from \"./PasswordEntryRow.module.css\";\n\nexport interface PasswordEntryRowProps extends Omit<EntryRowProps, \"type\" | \"trailing\"> {\n  /** Additional trailing widgets placed before the reveal button. */\n  trailing?: ReactNode;\n}\n\n/**\n * Password entry row with a built-in reveal/conceal toggle.\n *\n * Mirrors `AdwPasswordEntryRow` — an `EntryRow` variant that defaults to\n * `type=\"password\"` and provides a trailing icon button to reveal or conceal\n * the entered text. Use inside a `BoxedList` for password settings fields.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html\n */\nexport function PasswordEntryRow({ trailing, disabled, ...props }: PasswordEntryRowProps) {\n  const [revealed, setRevealed] = useState(false);\n\n  const revealButton = (\n    <button\n      type=\"button\"\n      className={styles.revealButton}\n      onClick={(e) => {\n        e.stopPropagation();\n        setRevealed((v) => !v);\n      }}\n      aria-label={revealed ? \"Conceal password\" : \"Reveal password\"}\n      aria-pressed={revealed}\n      disabled={disabled}\n    >\n      <Icon\n        icon={revealed ? ViewConceal : ViewReveal}\n        size=\"md\"\n        aria-hidden\n      />\n    </button>\n  );\n\n  return (\n    <EntryRow\n      {...props}\n      type={revealed ? \"text\" : \"password\"}\n      disabled={disabled}\n      trailing={\n        <>\n          {trailing}\n          {revealButton}\n        </>\n      }\n    />\n  );\n}\n"],"mappings":"sRAoBA,SAAgB,EAAiB,CAAE,WAAU,WAAU,GAAG,GAAgC,CACxF,GAAM,CAAC,EAAU,IAAA,EAAA,EAAA,UAAwB,GAAM,CAEzC,GACJ,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,aAClB,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,EAAa,GAAM,CAAC,EAAE,EAExB,aAAY,EAAW,mBAAqB,kBAC5C,eAAc,EACJ,qBAEV,EAAA,EAAA,KAAC,EAAA,KAAD,CACE,KAAM,EAAW,EAAA,EAAc,EAAA,EAC/B,KAAK,KACL,cAAA,GACA,CAAA,CACK,CAAA,CAGX,OACE,EAAA,EAAA,KAAC,EAAA,SAAD,CACE,GAAI,EACJ,KAAM,EAAW,OAAS,WAChB,WACV,UACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,EACA,EACA,CAAA,CAAA,CAEL,CAAA"}
+{"version":3,"file":"PasswordEntryRow.cjs","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { ViewReveal, ViewConceal } from \"@gnome-ui/icons\";\nimport { EntryRow, type EntryRowProps } from \"../EntryRow\";\nimport styles from \"./PasswordEntryRow.module.css\";\n\nexport interface PasswordEntryRowProps extends Omit<EntryRowProps, \"type\" | \"trailing\"> {\n  /** Additional trailing widgets placed before the reveal button. */\n  trailing?: ReactNode;\n}\n\n/**\n * Password entry row with a built-in reveal/conceal toggle.\n *\n * Mirrors `AdwPasswordEntryRow` — an `EntryRow` variant that defaults to\n * `type=\"password\"` and provides a trailing icon button to reveal or conceal\n * the entered text. Use inside a `BoxedList` for password settings fields.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html\n */\nexport function PasswordEntryRow({ trailing, disabled, ...props }: PasswordEntryRowProps) {\n  const [revealed, setRevealed] = useState(false);\n\n  const revealButton = (\n    <button\n      type=\"button\"\n      className={styles.revealButton}\n      onClick={(e) => {\n        e.stopPropagation();\n        setRevealed((v) => !v);\n      }}\n      aria-label={revealed ? \"Conceal password\" : \"Reveal password\"}\n      aria-pressed={revealed}\n      disabled={disabled}\n    >\n      <Icon\n        icon={revealed ? ViewConceal : ViewReveal}\n        size=\"md\"\n        aria-hidden\n      />\n    </button>\n  );\n\n  return (\n    <EntryRow\n      {...props}\n      type={revealed ? \"text\" : \"password\"}\n      disabled={disabled}\n      trailing={\n        <>\n          {trailing}\n          {revealButton}\n        </>\n      }\n    />\n  );\n}\n"],"mappings":"4MAoBA,SAAgB,EAAiB,CAAE,WAAU,WAAU,GAAG,GAAgC,CACxF,GAAM,CAAC,EAAU,IAAA,EAAA,EAAA,UAAwB,GAAM,CAEzC,GACJ,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,aAClB,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,EAAa,GAAM,CAAC,EAAE,EAExB,aAAY,EAAW,mBAAqB,kBAC5C,eAAc,EACJ,qBAEV,EAAA,EAAA,KAAC,EAAA,KAAD,CACE,KAAM,EAAW,EAAA,YAAc,EAAA,WAC/B,KAAK,KACL,cAAA,GACA,CAAA,CACK,CAAA,CAGX,OACE,EAAA,EAAA,KAAC,EAAA,SAAD,CACE,GAAI,EACJ,KAAM,EAAW,OAAS,WAChB,WACV,UACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,EACA,EACA,CAAA,CAAA,CAEL,CAAA"}

package/dist/components/PasswordEntryRow/PasswordEntryRow.js

@@ -1,32 +1,31 @@
 import { Icon as e } from "../Icon/Icon.js";
-import { e as t } from "../../icons/dist/icons/ViewReveal.js";
-import { e as n } from "../../icons/dist/icons/ViewConceal.js";
-import { EntryRow as r } from "../EntryRow/EntryRow.js";
-import i from "./PasswordEntryRow.module.css.js";
-import { useState as a } from "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { EntryRow as t } from "../EntryRow/EntryRow.js";
+import n from "./PasswordEntryRow.module.css.js";
+import { useState as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { ViewConceal as s, ViewReveal as c } from "@gnome-ui/icons";
 //#region src/components/PasswordEntryRow/PasswordEntryRow.tsx
 function l({ trailing: l, disabled: u, ...d }) {
-	let [f, p] = a(!1), m = /* @__PURE__ */ s("button", {
+	let [f, p] = r(!1), m = /* @__PURE__ */ a("button", {
 		type: "button",
-		className: i.revealButton,
+		className: n.revealButton,
 		onClick: (e) => {
 			e.stopPropagation(), p((e) => !e);
 		},
 		"aria-label": f ? "Conceal password" : "Reveal password",
 		"aria-pressed": f,
 		disabled: u,
-		children: /* @__PURE__ */ s(e, {
-			icon: f ? n : t,
+		children: /* @__PURE__ */ a(e, {
+			icon: f ? s : c,
 			size: "md",
 			"aria-hidden": !0
 		})
 	});
-	return /* @__PURE__ */ s(r, {
+	return /* @__PURE__ */ a(t, {
 		...d,
 		type: f ? "text" : "password",
 		disabled: u,
-		trailing: /* @__PURE__ */ c(o, { children: [l, m] })
+		trailing: /* @__PURE__ */ o(i, { children: [l, m] })
 	});
 }
 //#endregion

package/dist/components/PasswordEntryRow/PasswordEntryRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordEntryRow.js","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { ViewReveal, ViewConceal } from \"@gnome-ui/icons\";\nimport { EntryRow, type EntryRowProps } from \"../EntryRow\";\nimport styles from \"./PasswordEntryRow.module.css\";\n\nexport interface PasswordEntryRowProps extends Omit<EntryRowProps, \"type\" | \"trailing\"> {\n  /** Additional trailing widgets placed before the reveal button. */\n  trailing?: ReactNode;\n}\n\n/**\n * Password entry row with a built-in reveal/conceal toggle.\n *\n * Mirrors `AdwPasswordEntryRow` — an `EntryRow` variant that defaults to\n * `type=\"password\"` and provides a trailing icon button to reveal or conceal\n * the entered text. Use inside a `BoxedList` for password settings fields.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html\n */\nexport function PasswordEntryRow({ trailing, disabled, ...props }: PasswordEntryRowProps) {\n  const [revealed, setRevealed] = useState(false);\n\n  const revealButton = (\n    <button\n      type=\"button\"\n      className={styles.revealButton}\n      onClick={(e) => {\n        e.stopPropagation();\n        setRevealed((v) => !v);\n      }}\n      aria-label={revealed ? \"Conceal password\" : \"Reveal password\"}\n      aria-pressed={revealed}\n      disabled={disabled}\n    >\n      <Icon\n        icon={revealed ? ViewConceal : ViewReveal}\n        size=\"md\"\n        aria-hidden\n      />\n    </button>\n  );\n\n  return (\n    <EntryRow\n      {...props}\n      type={revealed ? \"text\" : \"password\"}\n      disabled={disabled}\n      trailing={\n        <>\n          {trailing}\n          {revealButton}\n        </>\n      }\n    />\n  );\n}\n"],"mappings":";;;;;;;;AAoBA,SAAgB,EAAiB,EAAE,aAAU,aAAU,GAAG,KAAgC;CACxF,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM,EAEzC,IACJ,kBAAC,UAAD;EACE,MAAK;EACL,WAAW,EAAO;EAClB,UAAU,MAAM;AAEd,GADA,EAAE,iBAAiB,EACnB,GAAa,MAAM,CAAC,EAAE;;EAExB,cAAY,IAAW,qBAAqB;EAC5C,gBAAc;EACJ;YAEV,kBAAC,GAAD;GACE,MAAM,IAAW,IAAc;GAC/B,MAAK;GACL,eAAA;GACA,CAAA;EACK,CAAA;AAGX,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,MAAM,IAAW,SAAS;EAChB;EACV,UACE,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,EACA,EAAA,CAAA;EAEL,CAAA"}
+{"version":3,"file":"PasswordEntryRow.js","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { ViewReveal, ViewConceal } from \"@gnome-ui/icons\";\nimport { EntryRow, type EntryRowProps } from \"../EntryRow\";\nimport styles from \"./PasswordEntryRow.module.css\";\n\nexport interface PasswordEntryRowProps extends Omit<EntryRowProps, \"type\" | \"trailing\"> {\n  /** Additional trailing widgets placed before the reveal button. */\n  trailing?: ReactNode;\n}\n\n/**\n * Password entry row with a built-in reveal/conceal toggle.\n *\n * Mirrors `AdwPasswordEntryRow` — an `EntryRow` variant that defaults to\n * `type=\"password\"` and provides a trailing icon button to reveal or conceal\n * the entered text. Use inside a `BoxedList` for password settings fields.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html\n */\nexport function PasswordEntryRow({ trailing, disabled, ...props }: PasswordEntryRowProps) {\n  const [revealed, setRevealed] = useState(false);\n\n  const revealButton = (\n    <button\n      type=\"button\"\n      className={styles.revealButton}\n      onClick={(e) => {\n        e.stopPropagation();\n        setRevealed((v) => !v);\n      }}\n      aria-label={revealed ? \"Conceal password\" : \"Reveal password\"}\n      aria-pressed={revealed}\n      disabled={disabled}\n    >\n      <Icon\n        icon={revealed ? ViewConceal : ViewReveal}\n        size=\"md\"\n        aria-hidden\n      />\n    </button>\n  );\n\n  return (\n    <EntryRow\n      {...props}\n      type={revealed ? \"text\" : \"password\"}\n      disabled={disabled}\n      trailing={\n        <>\n          {trailing}\n          {revealButton}\n        </>\n      }\n    />\n  );\n}\n"],"mappings":";;;;;;;AAoBA,SAAgB,EAAiB,EAAE,aAAU,aAAU,GAAG,KAAgC;CACxF,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM,EAEzC,IACJ,kBAAC,UAAD;EACE,MAAK;EACL,WAAW,EAAO;EAClB,UAAU,MAAM;AAEd,GADA,EAAE,iBAAiB,EACnB,GAAa,MAAM,CAAC,EAAE;;EAExB,cAAY,IAAW,qBAAqB;EAC5C,gBAAc;EACJ;YAEV,kBAAC,GAAD;GACE,MAAM,IAAW,IAAc;GAC/B,MAAK;GACL,eAAA;GACA,CAAA;EACK,CAAA;AAGX,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,MAAM,IAAW,SAAS;EAChB;EACV,UACE,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,EACA,EAAA,CAAA;EAEL,CAAA"}

package/dist/components/SearchBar/SearchBar.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Icon/Icon.cjs`),t=require(`../../icons/dist/icons/Close.cjs`),n=require(`../../icons/dist/icons/Search.cjs`),r=require(`../Spinner/Spinner.cjs`),i=require(`./SearchBar.module.css.cjs`);let a=require(`react`),o=require(`react-dom`),s=require(`react/jsx-runtime`);function c({open:c,onClose:l,onClear:u,children:d,value:f,onChange:p,placeholder:m=`Search…`,disabled:h,inline:g=!1,className:_,suggestions:v,onSuggestionSelect:y,loadingSuggestions:b=!1,renderSuggestion:x,suggestionsLabel:S=`Suggestions`,...C}){let w=(0,a.useRef)(null),T=(0,a.useRef)(null),E=(0,a.useRef)(null),D=(0,a.useId)(),O=(0,a.useId)(),[k,A]=(0,a.useState)(-1),[j,M]=(0,a.useState)(null),N=(v?.length??0)>0,P=c&&(b||N);(0,a.useEffect)(()=>{A(-1)},[v]),(0,a.useEffect)(()=>{if(c){let e=requestAnimationFrame(()=>w.current?.focus());return()=>cancelAnimationFrame(e)}},[c]),(0,a.useEffect)(()=>{if(!P||!T.current){M(null);return}function e(){if(!T.current)return;let e=T.current.getBoundingClientRect();M({top:e.bottom,left:e.left,width:e.width})}return e(),window.addEventListener(`scroll`,e,{passive:!0,capture:!0}),window.addEventListener(`resize`,e,{passive:!0}),()=>{window.removeEventListener(`scroll`,e,{capture:!0}),window.removeEventListener(`resize`,e)}},[P]),(0,a.useEffect)(()=>{k<0||!E.current||E.current.children[k]?.scrollIntoView({block:`nearest`})},[k]);let F=(0,a.useCallback)(e=>{if(P&&N&&v){if(e.key===`ArrowDown`){e.preventDefault(),A(e=>Math.min(e+1,v.length-1));return}if(e.key===`ArrowUp`){e.preventDefault(),A(e=>Math.max(e-1,-1));return}if(e.key===`Enter`&&k>=0){e.preventDefault(),y?.(v[k]);return}}e.key===`Escape`&&(e.preventDefault(),l?.()),C.onKeyDown?.(e)},[l,C,P,N,v,k,y]),I=f!==void 0&&f!==``,L=k>=0&&v?.[k]?`${O}-${v[k].id}`:void 0,R=P&&j?(0,o.createPortal)((0,s.jsxs)(`ul`,{ref:E,role:`listbox`,"aria-label":S,id:D,className:i.default.suggestionsPanel,style:{top:j.top,left:j.left,width:j.width},onMouseDown:e=>e.preventDefault(),children:[b&&(0,s.jsx)(`li`,{role:`presentation`,className:i.default.suggestionsLoading,children:(0,s.jsx)(r.Spinner,{size:`sm`,label:`Loading suggestions…`})}),!b&&v?.map((e,t)=>(0,s.jsx)(`li`,{id:`${O}-${e.id}`,role:`option`,"aria-selected":t===k,className:[i.default.suggestionItem,t===k?i.default.suggestionItemActive:null].filter(Boolean).join(` `),onMouseEnter:()=>A(t),onMouseLeave:()=>A(-1),onClick:()=>y?.(e),children:x?x(e):e.label},e.id))]}),document.body):null;return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(`div`,{ref:T,className:[i.default.wrapper,c?i.default.open:null,_].filter(Boolean).join(` `),"aria-hidden":!c,children:[(0,s.jsxs)(`div`,{className:[i.default.bar,g?i.default.inline:null,h?i.default.disabled:null].filter(Boolean).join(` `),children:[(0,s.jsx)(`span`,{className:i.default.searchIcon,"aria-hidden":!0,children:(0,s.jsx)(e.Icon,{icon:n.e,size:`md`})}),(0,s.jsx)(`input`,{ref:w,type:`search`,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":P,"aria-controls":P?D:void 0,"aria-activedescendant":L,value:f,onChange:p,placeholder:m,disabled:h,tabIndex:c?void 0:-1,className:i.default.input,onKeyDown:F,...C}),I&&(0,s.jsx)(`button`,{type:`button`,className:i.default.clearButton,"aria-label":`Clear search`,tabIndex:c?void 0:-1,disabled:h,onClick:()=>{u?.(),w.current?.focus()},children:(0,s.jsx)(e.Icon,{icon:t.e,size:`md`})})]}),d&&(0,s.jsx)(`div`,{className:i.default.filterRow,children:d})]}),typeof document<`u`&&R]})}exports.SearchBar=c;
+const e=require(`../Icon/Icon.cjs`),t=require(`../Spinner/Spinner.cjs`),n=require(`./SearchBar.module.css.cjs`);let r=require(`react`),i=require(`react-dom`),a=require(`react/jsx-runtime`),o=require(`@gnome-ui/icons`);function s({open:s,onClose:c,onClear:l,children:u,value:d,onChange:f,placeholder:p=`Search…`,disabled:m,inline:h=!1,className:g,suggestions:_,onSuggestionSelect:v,loadingSuggestions:y=!1,renderSuggestion:b,suggestionsLabel:x=`Suggestions`,...S}){let C=(0,r.useRef)(null),w=(0,r.useRef)(null),T=(0,r.useRef)(null),E=(0,r.useId)(),D=(0,r.useId)(),[O,k]=(0,r.useState)(-1),[A,j]=(0,r.useState)(null),M=(_?.length??0)>0,N=s&&(y||M);(0,r.useEffect)(()=>{k(-1)},[_]),(0,r.useEffect)(()=>{if(s){let e=requestAnimationFrame(()=>C.current?.focus());return()=>cancelAnimationFrame(e)}},[s]),(0,r.useEffect)(()=>{if(!N||!w.current){j(null);return}function e(){if(!w.current)return;let e=w.current.getBoundingClientRect();j({top:e.bottom,left:e.left,width:e.width})}return e(),window.addEventListener(`scroll`,e,{passive:!0,capture:!0}),window.addEventListener(`resize`,e,{passive:!0}),()=>{window.removeEventListener(`scroll`,e,{capture:!0}),window.removeEventListener(`resize`,e)}},[N]),(0,r.useEffect)(()=>{O<0||!T.current||T.current.children[O]?.scrollIntoView({block:`nearest`})},[O]);let P=(0,r.useCallback)(e=>{if(N&&M&&_){if(e.key===`ArrowDown`){e.preventDefault(),k(e=>Math.min(e+1,_.length-1));return}if(e.key===`ArrowUp`){e.preventDefault(),k(e=>Math.max(e-1,-1));return}if(e.key===`Enter`&&O>=0){e.preventDefault(),v?.(_[O]);return}}e.key===`Escape`&&(e.preventDefault(),c?.()),S.onKeyDown?.(e)},[c,S,N,M,_,O,v]),F=d!==void 0&&d!==``,I=O>=0&&_?.[O]?`${D}-${_[O].id}`:void 0,L=N&&A?(0,i.createPortal)((0,a.jsxs)(`ul`,{ref:T,role:`listbox`,"aria-label":x,id:E,className:n.default.suggestionsPanel,style:{top:A.top,left:A.left,width:A.width},onMouseDown:e=>e.preventDefault(),children:[y&&(0,a.jsx)(`li`,{role:`presentation`,className:n.default.suggestionsLoading,children:(0,a.jsx)(t.Spinner,{size:`sm`,label:`Loading suggestions…`})}),!y&&_?.map((e,t)=>(0,a.jsx)(`li`,{id:`${D}-${e.id}`,role:`option`,"aria-selected":t===O,className:[n.default.suggestionItem,t===O?n.default.suggestionItemActive:null].filter(Boolean).join(` `),onMouseEnter:()=>k(t),onMouseLeave:()=>k(-1),onClick:()=>v?.(e),children:b?b(e):e.label},e.id))]}),document.body):null;return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(`div`,{ref:w,className:[n.default.wrapper,s?n.default.open:null,g].filter(Boolean).join(` `),"aria-hidden":!s,children:[(0,a.jsxs)(`div`,{className:[n.default.bar,h?n.default.inline:null,m?n.default.disabled:null].filter(Boolean).join(` `),children:[(0,a.jsx)(`span`,{className:n.default.searchIcon,"aria-hidden":!0,children:(0,a.jsx)(e.Icon,{icon:o.Search,size:`md`})}),(0,a.jsx)(`input`,{ref:C,type:`search`,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":N,"aria-controls":N?E:void 0,"aria-activedescendant":I,value:d,onChange:f,placeholder:p,disabled:m,tabIndex:s?void 0:-1,className:n.default.input,onKeyDown:P,...S}),F&&(0,a.jsx)(`button`,{type:`button`,className:n.default.clearButton,"aria-label":`Clear search`,tabIndex:s?void 0:-1,disabled:m,onClick:()=>{l?.(),C.current?.focus()},children:(0,a.jsx)(e.Icon,{icon:o.Close,size:`md`})})]}),u&&(0,a.jsx)(`div`,{className:n.default.filterRow,children:u})]}),typeof document<`u`&&L]})}exports.SearchBar=s;
 //# sourceMappingURL=SearchBar.cjs.map

package/dist/components/SearchBar/SearchBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useCallback,\n  useId,\n  useState,\n  type KeyboardEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search, Close } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { Spinner } from \"../Spinner\";\nimport styles from \"./SearchBar.module.css\";\n\nexport interface Suggestion {\n  id: string;\n  label: string;\n}\n\nexport interface SearchBarProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  /**\n   * Whether the search bar is visible/expanded.\n   * When `false` the bar collapses to zero height and is hidden from AT.\n   */\n  open: boolean;\n  /** Called when the user presses Escape or clicks the clear button with empty value. */\n  onClose?: () => void;\n  /** Called when the clear (×) button is clicked. Also clears the input value. */\n  onClear?: () => void;\n  /**\n   * Content to render below the search bar (e.g. filter chips).\n   * Only visible while `open` is true.\n   */\n  children?: ReactNode;\n  /**\n   * Removes the header-bar background so the bar blends into any surface.\n   * Mirrors the `.inline` style class.\n   */\n  inline?: boolean;\n  /** Suggestion items to show in the autocomplete popover. */\n  suggestions?: Suggestion[];\n  /** Called when the user selects a suggestion. */\n  onSuggestionSelect?: (item: Suggestion) => void;\n  /** Shows a spinner inside the suggestions popover while fetching async results. */\n  loadingSuggestions?: boolean;\n  /** Custom row renderer for each suggestion. */\n  renderSuggestion?: (item: Suggestion) => ReactNode;\n  /** `aria-label` for the suggestions listbox. Defaults to `\"Suggestions\"`. */\n  suggestionsLabel?: string;\n}\n\ninterface DropdownPos {\n  top: number;\n  left: number;\n  width: number;\n}\n\n/**\n * Collapsible search bar following the Adwaita `AdwSearchBar` pattern.\n *\n * - Slides in/out with a CSS height transition.\n * - Auto-focuses the input when `open` becomes `true`.\n * - Escape key calls `onClose`.\n * - Shows a clear (×) button whenever the input has a value.\n * - Optional `suggestions` / `loadingSuggestions` props show an autocomplete\n *   popover anchored below the bar — follows the GTK4 pattern of\n *   `AdwSearchBar` + `GtkPopover` + `GtkListView` (replaces `GtkEntryCompletion`).\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html\n */\nexport function SearchBar({\n  open,\n  onClose,\n  onClear,\n  children,\n  value,\n  onChange,\n  placeholder = \"Search…\",\n  disabled,\n  inline = false,\n  className,\n  suggestions,\n  onSuggestionSelect,\n  loadingSuggestions = false,\n  renderSuggestion,\n  suggestionsLabel = \"Suggestions\",\n  ...props\n}: SearchBarProps) {\n  const inputRef   = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n\n  const listboxId      = useId();\n  const optionIdPrefix = useId();\n\n  const [activeIndex,  setActiveIndex]  = useState(-1);\n  const [dropdownPos,  setDropdownPos]  = useState<DropdownPos | null>(null);\n\n  const hasSuggestions = (suggestions?.length ?? 0) > 0;\n  const showDropdown   = open && (loadingSuggestions || hasSuggestions);\n\n  // Reset active index whenever the suggestion list changes\n  useEffect(() => { setActiveIndex(-1); }, [suggestions]);\n\n  // Auto-focus when opening\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => inputRef.current?.focus());\n      return () => cancelAnimationFrame(id);\n    }\n  }, [open]);\n\n  // Position the suggestions dropdown below the wrapper\n  useEffect(() => {\n    if (!showDropdown || !wrapperRef.current) {\n      setDropdownPos(null);\n      return;\n    }\n    function updatePos() {\n      if (!wrapperRef.current) return;\n      const r = wrapperRef.current.getBoundingClientRect();\n      setDropdownPos({ top: r.bottom, left: r.left, width: r.width });\n    }\n    updatePos();\n    window.addEventListener(\"scroll\", updatePos, { passive: true, capture: true });\n    window.addEventListener(\"resize\", updatePos, { passive: true });\n    return () => {\n      window.removeEventListener(\"scroll\", updatePos, { capture: true });\n      window.removeEventListener(\"resize\", updatePos);\n    };\n  }, [showDropdown]);\n\n  // Scroll the active option into view\n  useEffect(() => {\n    if (activeIndex < 0 || !listboxRef.current) return;\n    (listboxRef.current.children[activeIndex] as HTMLElement | undefined)\n      ?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (showDropdown && hasSuggestions && suggestions) {\n        if (e.key === \"ArrowDown\") {\n          e.preventDefault();\n          setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));\n          return;\n        }\n        if (e.key === \"ArrowUp\") {\n          e.preventDefault();\n          setActiveIndex((i) => Math.max(i - 1, -1));\n          return;\n        }\n        if (e.key === \"Enter\" && activeIndex >= 0) {\n          e.preventDefault();\n          onSuggestionSelect?.(suggestions[activeIndex]);\n          return;\n        }\n      }\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        onClose?.();\n      }\n      props.onKeyDown?.(e);\n    },\n    [onClose, props, showDropdown, hasSuggestions, suggestions, activeIndex, onSuggestionSelect]\n  );\n\n  const hasValue       = value !== undefined && value !== \"\";\n  const activeOptionId = activeIndex >= 0 && suggestions?.[activeIndex]\n    ? `${optionIdPrefix}-${suggestions[activeIndex].id}`\n    : undefined;\n\n  const dropdown = showDropdown && dropdownPos\n    ? createPortal(\n        <ul\n          ref={listboxRef}\n          role=\"listbox\"\n          aria-label={suggestionsLabel}\n          id={listboxId}\n          className={styles.suggestionsPanel}\n          style={{ top: dropdownPos.top, left: dropdownPos.left, width: dropdownPos.width }}\n          onMouseDown={(e) => e.preventDefault()} // keep focus on input\n        >\n          {loadingSuggestions && (\n            <li role=\"presentation\" className={styles.suggestionsLoading}>\n              <Spinner size=\"sm\" label=\"Loading suggestions…\" />\n            </li>\n          )}\n          {!loadingSuggestions &&\n            suggestions?.map((item, index) => (\n              <li\n                key={item.id}\n                id={`${optionIdPrefix}-${item.id}`}\n                role=\"option\"\n                aria-selected={index === activeIndex}\n                className={[\n                  styles.suggestionItem,\n                  index === activeIndex ? styles.suggestionItemActive : null,\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\n                onMouseEnter={() => setActiveIndex(index)}\n                onMouseLeave={() => setActiveIndex(-1)}\n                onClick={() => onSuggestionSelect?.(item)}\n              >\n                {renderSuggestion ? renderSuggestion(item) : item.label}\n              </li>\n            ))}\n        </ul>,\n        document.body\n      )\n    : null;\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={[styles.wrapper, open ? styles.open : null, className]\n          .filter(Boolean)\n          .join(\" \")}\n        aria-hidden={!open}\n      >\n        <div\n          className={[\n            styles.bar,\n            inline   ? styles.inline   : null,\n            disabled ? styles.disabled : null,\n          ]\n            .filter(Boolean)\n            .join(\" \")}\n        >\n          <span className={styles.searchIcon} aria-hidden>\n            <Icon icon={Search} size=\"md\" />\n          </span>\n\n          <input\n            ref={inputRef}\n            type=\"search\"\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-expanded={showDropdown}\n            aria-controls={showDropdown ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            value={value}\n            onChange={onChange}\n            placeholder={placeholder}\n            disabled={disabled}\n            tabIndex={open ? undefined : -1}\n            className={styles.input}\n            onKeyDown={handleKeyDown}\n            {...props}\n          />\n\n          {hasValue && (\n            <button\n              type=\"button\"\n              className={styles.clearButton}\n              aria-label=\"Clear search\"\n              tabIndex={open ? undefined : -1}\n              disabled={disabled}\n              onClick={() => {\n                onClear?.();\n                inputRef.current?.focus();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" />\n            </button>\n          )}\n        </div>\n\n        {children && <div className={styles.filterRow}>{children}</div>}\n      </div>\n\n      {typeof document !== \"undefined\" && dropdown}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useCallback,\n  useId,\n  useState,\n  type KeyboardEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search, Close } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { Spinner } from \"../Spinner\";\nimport styles from \"./SearchBar.module.css\";\n\nexport interface Suggestion {\n  id: string;\n  label: string;\n}\n\nexport interface SearchBarProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  /**\n   * Whether the search bar is visible/expanded.\n   * When `false` the bar collapses to zero height and is hidden from AT.\n   */\n  open: boolean;\n  /** Called when the user presses Escape or clicks the clear button with empty value. */\n  onClose?: () => void;\n  /** Called when the clear (×) button is clicked. Also clears the input value. */\n  onClear?: () => void;\n  /**\n   * Content to render below the search bar (e.g. filter chips).\n   * Only visible while `open` is true.\n   */\n  children?: ReactNode;\n  /**\n   * Removes the header-bar background so the bar blends into any surface.\n   * Mirrors the `.inline` style class.\n   */\n  inline?: boolean;\n  /** Suggestion items to show in the autocomplete popover. */\n  suggestions?: Suggestion[];\n  /** Called when the user selects a suggestion. */\n  onSuggestionSelect?: (item: Suggestion) => void;\n  /** Shows a spinner inside the suggestions popover while fetching async results. */\n  loadingSuggestions?: boolean;\n  /** Custom row renderer for each suggestion. */\n  renderSuggestion?: (item: Suggestion) => ReactNode;\n  /** `aria-label` for the suggestions listbox. Defaults to `\"Suggestions\"`. */\n  suggestionsLabel?: string;\n}\n\ninterface DropdownPos {\n  top: number;\n  left: number;\n  width: number;\n}\n\n/**\n * Collapsible search bar following the Adwaita `AdwSearchBar` pattern.\n *\n * - Slides in/out with a CSS height transition.\n * - Auto-focuses the input when `open` becomes `true`.\n * - Escape key calls `onClose`.\n * - Shows a clear (×) button whenever the input has a value.\n * - Optional `suggestions` / `loadingSuggestions` props show an autocomplete\n *   popover anchored below the bar — follows the GTK4 pattern of\n *   `AdwSearchBar` + `GtkPopover` + `GtkListView` (replaces `GtkEntryCompletion`).\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html\n */\nexport function SearchBar({\n  open,\n  onClose,\n  onClear,\n  children,\n  value,\n  onChange,\n  placeholder = \"Search…\",\n  disabled,\n  inline = false,\n  className,\n  suggestions,\n  onSuggestionSelect,\n  loadingSuggestions = false,\n  renderSuggestion,\n  suggestionsLabel = \"Suggestions\",\n  ...props\n}: SearchBarProps) {\n  const inputRef   = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n\n  const listboxId      = useId();\n  const optionIdPrefix = useId();\n\n  const [activeIndex,  setActiveIndex]  = useState(-1);\n  const [dropdownPos,  setDropdownPos]  = useState<DropdownPos | null>(null);\n\n  const hasSuggestions = (suggestions?.length ?? 0) > 0;\n  const showDropdown   = open && (loadingSuggestions || hasSuggestions);\n\n  // Reset active index whenever the suggestion list changes\n  useEffect(() => { setActiveIndex(-1); }, [suggestions]);\n\n  // Auto-focus when opening\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => inputRef.current?.focus());\n      return () => cancelAnimationFrame(id);\n    }\n  }, [open]);\n\n  // Position the suggestions dropdown below the wrapper\n  useEffect(() => {\n    if (!showDropdown || !wrapperRef.current) {\n      setDropdownPos(null);\n      return;\n    }\n    function updatePos() {\n      if (!wrapperRef.current) return;\n      const r = wrapperRef.current.getBoundingClientRect();\n      setDropdownPos({ top: r.bottom, left: r.left, width: r.width });\n    }\n    updatePos();\n    window.addEventListener(\"scroll\", updatePos, { passive: true, capture: true });\n    window.addEventListener(\"resize\", updatePos, { passive: true });\n    return () => {\n      window.removeEventListener(\"scroll\", updatePos, { capture: true });\n      window.removeEventListener(\"resize\", updatePos);\n    };\n  }, [showDropdown]);\n\n  // Scroll the active option into view\n  useEffect(() => {\n    if (activeIndex < 0 || !listboxRef.current) return;\n    (listboxRef.current.children[activeIndex] as HTMLElement | undefined)\n      ?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (showDropdown && hasSuggestions && suggestions) {\n        if (e.key === \"ArrowDown\") {\n          e.preventDefault();\n          setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));\n          return;\n        }\n        if (e.key === \"ArrowUp\") {\n          e.preventDefault();\n          setActiveIndex((i) => Math.max(i - 1, -1));\n          return;\n        }\n        if (e.key === \"Enter\" && activeIndex >= 0) {\n          e.preventDefault();\n          onSuggestionSelect?.(suggestions[activeIndex]);\n          return;\n        }\n      }\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        onClose?.();\n      }\n      props.onKeyDown?.(e);\n    },\n    [onClose, props, showDropdown, hasSuggestions, suggestions, activeIndex, onSuggestionSelect]\n  );\n\n  const hasValue       = value !== undefined && value !== \"\";\n  const activeOptionId = activeIndex >= 0 && suggestions?.[activeIndex]\n    ? `${optionIdPrefix}-${suggestions[activeIndex].id}`\n    : undefined;\n\n  const dropdown = showDropdown && dropdownPos\n    ? createPortal(\n        <ul\n          ref={listboxRef}\n          role=\"listbox\"\n          aria-label={suggestionsLabel}\n          id={listboxId}\n          className={styles.suggestionsPanel}\n          style={{ top: dropdownPos.top, left: dropdownPos.left, width: dropdownPos.width }}\n          onMouseDown={(e) => e.preventDefault()} // keep focus on input\n        >\n          {loadingSuggestions && (\n            <li role=\"presentation\" className={styles.suggestionsLoading}>\n              <Spinner size=\"sm\" label=\"Loading suggestions…\" />\n            </li>\n          )}\n          {!loadingSuggestions &&\n            suggestions?.map((item, index) => (\n              <li\n                key={item.id}\n                id={`${optionIdPrefix}-${item.id}`}\n                role=\"option\"\n                aria-selected={index === activeIndex}\n                className={[\n                  styles.suggestionItem,\n                  index === activeIndex ? styles.suggestionItemActive : null,\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\n                onMouseEnter={() => setActiveIndex(index)}\n                onMouseLeave={() => setActiveIndex(-1)}\n                onClick={() => onSuggestionSelect?.(item)}\n              >\n                {renderSuggestion ? renderSuggestion(item) : item.label}\n              </li>\n            ))}\n        </ul>,\n        document.body\n      )\n    : null;\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={[styles.wrapper, open ? styles.open : null, className]\n          .filter(Boolean)\n          .join(\" \")}\n        aria-hidden={!open}\n      >\n        <div\n          className={[\n            styles.bar,\n            inline   ? styles.inline   : null,\n            disabled ? styles.disabled : null,\n          ]\n            .filter(Boolean)\n            .join(\" \")}\n        >\n          <span className={styles.searchIcon} aria-hidden>\n            <Icon icon={Search} size=\"md\" />\n          </span>\n\n          <input\n            ref={inputRef}\n            type=\"search\"\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-expanded={showDropdown}\n            aria-controls={showDropdown ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            value={value}\n            onChange={onChange}\n            placeholder={placeholder}\n            disabled={disabled}\n            tabIndex={open ? undefined : -1}\n            className={styles.input}\n            onKeyDown={handleKeyDown}\n            {...props}\n          />\n\n          {hasValue && (\n            <button\n              type=\"button\"\n              className={styles.clearButton}\n              aria-label=\"Clear search\"\n              tabIndex={open ? undefined : -1}\n              disabled={disabled}\n              onClick={() => {\n                onClear?.();\n                inputRef.current?.focus();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" />\n            </button>\n          )}\n        </div>\n\n        {children && <div className={styles.filterRow}>{children}</div>}\n      </div>\n\n      {typeof document !== \"undefined\" && dropdown}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/SearchBar/SearchBar.js

@@ -1,22 +1,21 @@
 import { Icon as e } from "../Icon/Icon.js";
-import { e as t } from "../../icons/dist/icons/Close.js";
-import { e as n } from "../../icons/dist/icons/Search.js";
-import { Spinner as r } from "../Spinner/Spinner.js";
-import i from "./SearchBar.module.css.js";
-import { useCallback as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
-import { createPortal as u } from "react-dom";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Spinner as t } from "../Spinner/Spinner.js";
+import n from "./SearchBar.module.css.js";
+import { useCallback as r, useEffect as i, useId as a, useRef as o, useState as s } from "react";
+import { createPortal as c } from "react-dom";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Close as f, Search as p } from "@gnome-ui/icons";
 //#region src/components/SearchBar/SearchBar.tsx
 function m({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y, placeholder: b = "Search…", disabled: x, inline: S = !1, className: C, suggestions: w, onSuggestionSelect: T, loadingSuggestions: E = !1, renderSuggestion: D, suggestionsLabel: O = "Suggestions", ...k }) {
-	let A = c(null), j = c(null), M = c(null), N = s(), P = s(), [F, I] = l(-1), [L, R] = l(null), z = (w?.length ?? 0) > 0, B = m && (E || z);
-	o(() => {
+	let A = o(null), j = o(null), M = o(null), N = a(), P = a(), [F, I] = s(-1), [L, R] = s(null), z = (w?.length ?? 0) > 0, B = m && (E || z);
+	i(() => {
 		I(-1);
-	}, [w]), o(() => {
+	}, [w]), i(() => {
 		if (m) {
 			let e = requestAnimationFrame(() => A.current?.focus());
 			return () => cancelAnimationFrame(e);
 		}
-	}, [m]), o(() => {
+	}, [m]), i(() => {
 		if (!B || !j.current) {
 			R(null);
 			return;
@@ -36,10 +35,10 @@ function m({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y
 		}), window.addEventListener("resize", e, { passive: !0 }), () => {
 			window.removeEventListener("scroll", e, { capture: !0 }), window.removeEventListener("resize", e);
 		};
-	}, [B]), o(() => {
+	}, [B]), i(() => {
 		F < 0 || !M.current || M.current.children[F]?.scrollIntoView({ block: "nearest" });
 	}, [F]);
-	let V = a((e) => {
+	let V = r((e) => {
 		if (B && z && w) {
 			if (e.key === "ArrowDown") {
 				e.preventDefault(), I((e) => Math.min(e + 1, w.length - 1));
@@ -63,60 +62,60 @@ function m({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y
 		w,
 		F,
 		T
-	]), H = v !== void 0 && v !== "", U = F >= 0 && w?.[F] ? `${P}-${w[F].id}` : void 0, W = B && L ? u(/* @__PURE__ */ p("ul", {
+	]), H = v !== void 0 && v !== "", U = F >= 0 && w?.[F] ? `${P}-${w[F].id}` : void 0, W = B && L ? c(/* @__PURE__ */ d("ul", {
 		ref: M,
 		role: "listbox",
 		"aria-label": O,
 		id: N,
-		className: i.suggestionsPanel,
+		className: n.suggestionsPanel,
 		style: {
 			top: L.top,
 			left: L.left,
 			width: L.width
 		},
 		onMouseDown: (e) => e.preventDefault(),
-		children: [E && /* @__PURE__ */ f("li", {
+		children: [E && /* @__PURE__ */ u("li", {
 			role: "presentation",
-			className: i.suggestionsLoading,
-			children: /* @__PURE__ */ f(r, {
+			className: n.suggestionsLoading,
+			children: /* @__PURE__ */ u(t, {
 				size: "sm",
 				label: "Loading suggestions…"
 			})
-		}), !E && w?.map((e, t) => /* @__PURE__ */ f("li", {
+		}), !E && w?.map((e, t) => /* @__PURE__ */ u("li", {
 			id: `${P}-${e.id}`,
 			role: "option",
 			"aria-selected": t === F,
-			className: [i.suggestionItem, t === F ? i.suggestionItemActive : null].filter(Boolean).join(" "),
+			className: [n.suggestionItem, t === F ? n.suggestionItemActive : null].filter(Boolean).join(" "),
 			onMouseEnter: () => I(t),
 			onMouseLeave: () => I(-1),
 			onClick: () => T?.(e),
 			children: D ? D(e) : e.label
 		}, e.id))]
 	}), document.body) : null;
-	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("div", {
+	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ d("div", {
 		ref: j,
 		className: [
-			i.wrapper,
-			m ? i.open : null,
+			n.wrapper,
+			m ? n.open : null,
 			C
 		].filter(Boolean).join(" "),
 		"aria-hidden": !m,
-		children: [/* @__PURE__ */ p("div", {
+		children: [/* @__PURE__ */ d("div", {
 			className: [
-				i.bar,
-				S ? i.inline : null,
-				x ? i.disabled : null
+				n.bar,
+				S ? n.inline : null,
+				x ? n.disabled : null
 			].filter(Boolean).join(" "),
 			children: [
-				/* @__PURE__ */ f("span", {
-					className: i.searchIcon,
+				/* @__PURE__ */ u("span", {
+					className: n.searchIcon,
 					"aria-hidden": !0,
-					children: /* @__PURE__ */ f(e, {
-						icon: n,
+					children: /* @__PURE__ */ u(e, {
+						icon: p,
 						size: "md"
 					})
 				}),
-				/* @__PURE__ */ f("input", {
+				/* @__PURE__ */ u("input", {
 					ref: A,
 					type: "search",
 					role: "combobox",
@@ -129,27 +128,27 @@ function m({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y
 					placeholder: b,
 					disabled: x,
 					tabIndex: m ? void 0 : -1,
-					className: i.input,
+					className: n.input,
 					onKeyDown: V,
 					...k
 				}),
-				H && /* @__PURE__ */ f("button", {
+				H && /* @__PURE__ */ u("button", {
 					type: "button",
-					className: i.clearButton,
+					className: n.clearButton,
 					"aria-label": "Clear search",
 					tabIndex: m ? void 0 : -1,
 					disabled: x,
 					onClick: () => {
 						g?.(), A.current?.focus();
 					},
-					children: /* @__PURE__ */ f(e, {
-						icon: t,
+					children: /* @__PURE__ */ u(e, {
+						icon: f,
 						size: "md"
 					})
 				})
 			]
-		}), _ && /* @__PURE__ */ f("div", {
-			className: i.filterRow,
+		}), _ && /* @__PURE__ */ u("div", {
+			className: n.filterRow,
 			children: _
 		})]
 	}), typeof document < "u" && W] });

package/dist/components/SearchBar/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useCallback,\n  useId,\n  useState,\n  type KeyboardEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search, Close } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { Spinner } from \"../Spinner\";\nimport styles from \"./SearchBar.module.css\";\n\nexport interface Suggestion {\n  id: string;\n  label: string;\n}\n\nexport interface SearchBarProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  /**\n   * Whether the search bar is visible/expanded.\n   * When `false` the bar collapses to zero height and is hidden from AT.\n   */\n  open: boolean;\n  /** Called when the user presses Escape or clicks the clear button with empty value. */\n  onClose?: () => void;\n  /** Called when the clear (×) button is clicked. Also clears the input value. */\n  onClear?: () => void;\n  /**\n   * Content to render below the search bar (e.g. filter chips).\n   * Only visible while `open` is true.\n   */\n  children?: ReactNode;\n  /**\n   * Removes the header-bar background so the bar blends into any surface.\n   * Mirrors the `.inline` style class.\n   */\n  inline?: boolean;\n  /** Suggestion items to show in the autocomplete popover. */\n  suggestions?: Suggestion[];\n  /** Called when the user selects a suggestion. */\n  onSuggestionSelect?: (item: Suggestion) => void;\n  /** Shows a spinner inside the suggestions popover while fetching async results. */\n  loadingSuggestions?: boolean;\n  /** Custom row renderer for each suggestion. */\n  renderSuggestion?: (item: Suggestion) => ReactNode;\n  /** `aria-label` for the suggestions listbox. Defaults to `\"Suggestions\"`. */\n  suggestionsLabel?: string;\n}\n\ninterface DropdownPos {\n  top: number;\n  left: number;\n  width: number;\n}\n\n/**\n * Collapsible search bar following the Adwaita `AdwSearchBar` pattern.\n *\n * - Slides in/out with a CSS height transition.\n * - Auto-focuses the input when `open` becomes `true`.\n * - Escape key calls `onClose`.\n * - Shows a clear (×) button whenever the input has a value.\n * - Optional `suggestions` / `loadingSuggestions` props show an autocomplete\n *   popover anchored below the bar — follows the GTK4 pattern of\n *   `AdwSearchBar` + `GtkPopover` + `GtkListView` (replaces `GtkEntryCompletion`).\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html\n */\nexport function SearchBar({\n  open,\n  onClose,\n  onClear,\n  children,\n  value,\n  onChange,\n  placeholder = \"Search…\",\n  disabled,\n  inline = false,\n  className,\n  suggestions,\n  onSuggestionSelect,\n  loadingSuggestions = false,\n  renderSuggestion,\n  suggestionsLabel = \"Suggestions\",\n  ...props\n}: SearchBarProps) {\n  const inputRef   = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n\n  const listboxId      = useId();\n  const optionIdPrefix = useId();\n\n  const [activeIndex,  setActiveIndex]  = useState(-1);\n  const [dropdownPos,  setDropdownPos]  = useState<DropdownPos | null>(null);\n\n  const hasSuggestions = (suggestions?.length ?? 0) > 0;\n  const showDropdown   = open && (loadingSuggestions || hasSuggestions);\n\n  // Reset active index whenever the suggestion list changes\n  useEffect(() => { setActiveIndex(-1); }, [suggestions]);\n\n  // Auto-focus when opening\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => inputRef.current?.focus());\n      return () => cancelAnimationFrame(id);\n    }\n  }, [open]);\n\n  // Position the suggestions dropdown below the wrapper\n  useEffect(() => {\n    if (!showDropdown || !wrapperRef.current) {\n      setDropdownPos(null);\n      return;\n    }\n    function updatePos() {\n      if (!wrapperRef.current) return;\n      const r = wrapperRef.current.getBoundingClientRect();\n      setDropdownPos({ top: r.bottom, left: r.left, width: r.width });\n    }\n    updatePos();\n    window.addEventListener(\"scroll\", updatePos, { passive: true, capture: true });\n    window.addEventListener(\"resize\", updatePos, { passive: true });\n    return () => {\n      window.removeEventListener(\"scroll\", updatePos, { capture: true });\n      window.removeEventListener(\"resize\", updatePos);\n    };\n  }, [showDropdown]);\n\n  // Scroll the active option into view\n  useEffect(() => {\n    if (activeIndex < 0 || !listboxRef.current) return;\n    (listboxRef.current.children[activeIndex] as HTMLElement | undefined)\n      ?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (showDropdown && hasSuggestions && suggestions) {\n        if (e.key === \"ArrowDown\") {\n          e.preventDefault();\n          setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));\n          return;\n        }\n        if (e.key === \"ArrowUp\") {\n          e.preventDefault();\n          setActiveIndex((i) => Math.max(i - 1, -1));\n          return;\n        }\n        if (e.key === \"Enter\" && activeIndex >= 0) {\n          e.preventDefault();\n          onSuggestionSelect?.(suggestions[activeIndex]);\n          return;\n        }\n      }\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        onClose?.();\n      }\n      props.onKeyDown?.(e);\n    },\n    [onClose, props, showDropdown, hasSuggestions, suggestions, activeIndex, onSuggestionSelect]\n  );\n\n  const hasValue       = value !== undefined && value !== \"\";\n  const activeOptionId = activeIndex >= 0 && suggestions?.[activeIndex]\n    ? `${optionIdPrefix}-${suggestions[activeIndex].id}`\n    : undefined;\n\n  const dropdown = showDropdown && dropdownPos\n    ? createPortal(\n        <ul\n          ref={listboxRef}\n          role=\"listbox\"\n          aria-label={suggestionsLabel}\n          id={listboxId}\n          className={styles.suggestionsPanel}\n          style={{ top: dropdownPos.top, left: dropdownPos.left, width: dropdownPos.width }}\n          onMouseDown={(e) => e.preventDefault()} // keep focus on input\n        >\n          {loadingSuggestions && (\n            <li role=\"presentation\" className={styles.suggestionsLoading}>\n              <Spinner size=\"sm\" label=\"Loading suggestions…\" />\n            </li>\n          )}\n          {!loadingSuggestions &&\n            suggestions?.map((item, index) => (\n              <li\n                key={item.id}\n                id={`${optionIdPrefix}-${item.id}`}\n                role=\"option\"\n                aria-selected={index === activeIndex}\n                className={[\n                  styles.suggestionItem,\n                  index === activeIndex ? styles.suggestionItemActive : null,\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\n                onMouseEnter={() => setActiveIndex(index)}\n                onMouseLeave={() => setActiveIndex(-1)}\n                onClick={() => onSuggestionSelect?.(item)}\n              >\n                {renderSuggestion ? renderSuggestion(item) : item.label}\n              </li>\n            ))}\n        </ul>,\n        document.body\n      )\n    : null;\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={[styles.wrapper, open ? styles.open : null, className]\n          .filter(Boolean)\n          .join(\" \")}\n        aria-hidden={!open}\n      >\n        <div\n          className={[\n            styles.bar,\n            inline   ? styles.inline   : null,\n            disabled ? styles.disabled : null,\n          ]\n            .filter(Boolean)\n            .join(\" \")}\n        >\n          <span className={styles.searchIcon} aria-hidden>\n            <Icon icon={Search} size=\"md\" />\n          </span>\n\n          <input\n            ref={inputRef}\n            type=\"search\"\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-expanded={showDropdown}\n            aria-controls={showDropdown ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            value={value}\n            onChange={onChange}\n            placeholder={placeholder}\n            disabled={disabled}\n            tabIndex={open ? undefined : -1}\n            className={styles.input}\n            onKeyDown={handleKeyDown}\n            {...props}\n          />\n\n          {hasValue && (\n            <button\n              type=\"button\"\n              className={styles.clearButton}\n              aria-label=\"Clear search\"\n              tabIndex={open ? undefined : -1}\n              disabled={disabled}\n              onClick={() => {\n                onClear?.();\n                inputRef.current?.focus();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" />\n            </button>\n          )}\n        </div>\n\n        {children && <div className={styles.filterRow}>{children}</div>}\n      </div>\n\n      {typeof document !== \"undefined\" && dropdown}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.js","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useCallback,\n  useId,\n  useState,\n  type KeyboardEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search, Close } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { Spinner } from \"../Spinner\";\nimport styles from \"./SearchBar.module.css\";\n\nexport interface Suggestion {\n  id: string;\n  label: string;\n}\n\nexport interface SearchBarProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  /**\n   * Whether the search bar is visible/expanded.\n   * When `false` the bar collapses to zero height and is hidden from AT.\n   */\n  open: boolean;\n  /** Called when the user presses Escape or clicks the clear button with empty value. */\n  onClose?: () => void;\n  /** Called when the clear (×) button is clicked. Also clears the input value. */\n  onClear?: () => void;\n  /**\n   * Content to render below the search bar (e.g. filter chips).\n   * Only visible while `open` is true.\n   */\n  children?: ReactNode;\n  /**\n   * Removes the header-bar background so the bar blends into any surface.\n   * Mirrors the `.inline` style class.\n   */\n  inline?: boolean;\n  /** Suggestion items to show in the autocomplete popover. */\n  suggestions?: Suggestion[];\n  /** Called when the user selects a suggestion. */\n  onSuggestionSelect?: (item: Suggestion) => void;\n  /** Shows a spinner inside the suggestions popover while fetching async results. */\n  loadingSuggestions?: boolean;\n  /** Custom row renderer for each suggestion. */\n  renderSuggestion?: (item: Suggestion) => ReactNode;\n  /** `aria-label` for the suggestions listbox. Defaults to `\"Suggestions\"`. */\n  suggestionsLabel?: string;\n}\n\ninterface DropdownPos {\n  top: number;\n  left: number;\n  width: number;\n}\n\n/**\n * Collapsible search bar following the Adwaita `AdwSearchBar` pattern.\n *\n * - Slides in/out with a CSS height transition.\n * - Auto-focuses the input when `open` becomes `true`.\n * - Escape key calls `onClose`.\n * - Shows a clear (×) button whenever the input has a value.\n * - Optional `suggestions` / `loadingSuggestions` props show an autocomplete\n *   popover anchored below the bar — follows the GTK4 pattern of\n *   `AdwSearchBar` + `GtkPopover` + `GtkListView` (replaces `GtkEntryCompletion`).\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html\n */\nexport function SearchBar({\n  open,\n  onClose,\n  onClear,\n  children,\n  value,\n  onChange,\n  placeholder = \"Search…\",\n  disabled,\n  inline = false,\n  className,\n  suggestions,\n  onSuggestionSelect,\n  loadingSuggestions = false,\n  renderSuggestion,\n  suggestionsLabel = \"Suggestions\",\n  ...props\n}: SearchBarProps) {\n  const inputRef   = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n\n  const listboxId      = useId();\n  const optionIdPrefix = useId();\n\n  const [activeIndex,  setActiveIndex]  = useState(-1);\n  const [dropdownPos,  setDropdownPos]  = useState<DropdownPos | null>(null);\n\n  const hasSuggestions = (suggestions?.length ?? 0) > 0;\n  const showDropdown   = open && (loadingSuggestions || hasSuggestions);\n\n  // Reset active index whenever the suggestion list changes\n  useEffect(() => { setActiveIndex(-1); }, [suggestions]);\n\n  // Auto-focus when opening\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => inputRef.current?.focus());\n      return () => cancelAnimationFrame(id);\n    }\n  }, [open]);\n\n  // Position the suggestions dropdown below the wrapper\n  useEffect(() => {\n    if (!showDropdown || !wrapperRef.current) {\n      setDropdownPos(null);\n      return;\n    }\n    function updatePos() {\n      if (!wrapperRef.current) return;\n      const r = wrapperRef.current.getBoundingClientRect();\n      setDropdownPos({ top: r.bottom, left: r.left, width: r.width });\n    }\n    updatePos();\n    window.addEventListener(\"scroll\", updatePos, { passive: true, capture: true });\n    window.addEventListener(\"resize\", updatePos, { passive: true });\n    return () => {\n      window.removeEventListener(\"scroll\", updatePos, { capture: true });\n      window.removeEventListener(\"resize\", updatePos);\n    };\n  }, [showDropdown]);\n\n  // Scroll the active option into view\n  useEffect(() => {\n    if (activeIndex < 0 || !listboxRef.current) return;\n    (listboxRef.current.children[activeIndex] as HTMLElement | undefined)\n      ?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (showDropdown && hasSuggestions && suggestions) {\n        if (e.key === \"ArrowDown\") {\n          e.preventDefault();\n          setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));\n          return;\n        }\n        if (e.key === \"ArrowUp\") {\n          e.preventDefault();\n          setActiveIndex((i) => Math.max(i - 1, -1));\n          return;\n        }\n        if (e.key === \"Enter\" && activeIndex >= 0) {\n          e.preventDefault();\n          onSuggestionSelect?.(suggestions[activeIndex]);\n          return;\n        }\n      }\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        onClose?.();\n      }\n      props.onKeyDown?.(e);\n    },\n    [onClose, props, showDropdown, hasSuggestions, suggestions, activeIndex, onSuggestionSelect]\n  );\n\n  const hasValue       = value !== undefined && value !== \"\";\n  const activeOptionId = activeIndex >= 0 && suggestions?.[activeIndex]\n    ? `${optionIdPrefix}-${suggestions[activeIndex].id}`\n    : undefined;\n\n  const dropdown = showDropdown && dropdownPos\n    ? createPortal(\n        <ul\n          ref={listboxRef}\n          role=\"listbox\"\n          aria-label={suggestionsLabel}\n          id={listboxId}\n          className={styles.suggestionsPanel}\n          style={{ top: dropdownPos.top, left: dropdownPos.left, width: dropdownPos.width }}\n          onMouseDown={(e) => e.preventDefault()} // keep focus on input\n        >\n          {loadingSuggestions && (\n            <li role=\"presentation\" className={styles.suggestionsLoading}>\n              <Spinner size=\"sm\" label=\"Loading suggestions…\" />\n            </li>\n          )}\n          {!loadingSuggestions &&\n            suggestions?.map((item, index) => (\n              <li\n                key={item.id}\n                id={`${optionIdPrefix}-${item.id}`}\n                role=\"option\"\n                aria-selected={index === activeIndex}\n                className={[\n                  styles.suggestionItem,\n                  index === activeIndex ? styles.suggestionItemActive : null,\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\n                onMouseEnter={() => setActiveIndex(index)}\n                onMouseLeave={() => setActiveIndex(-1)}\n                onClick={() => onSuggestionSelect?.(item)}\n              >\n                {renderSuggestion ? renderSuggestion(item) : item.label}\n              </li>\n            ))}\n        </ul>,\n        document.body\n      )\n    : null;\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={[styles.wrapper, open ? styles.open : null, className]\n          .filter(Boolean)\n          .join(\" \")}\n        aria-hidden={!open}\n      >\n        <div\n          className={[\n            styles.bar,\n            inline   ? styles.inline   : null,\n            disabled ? styles.disabled : null,\n          ]\n            .filter(Boolean)\n            .join(\" \")}\n        >\n          <span className={styles.searchIcon} aria-hidden>\n            <Icon icon={Search} size=\"md\" />\n          </span>\n\n          <input\n            ref={inputRef}\n            type=\"search\"\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-expanded={showDropdown}\n            aria-controls={showDropdown ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            value={value}\n            onChange={onChange}\n            placeholder={placeholder}\n            disabled={disabled}\n            tabIndex={open ? undefined : -1}\n            className={styles.input}\n            onKeyDown={handleKeyDown}\n            {...props}\n          />\n\n          {hasValue && (\n            <button\n              type=\"button\"\n              className={styles.clearButton}\n              aria-label=\"Clear search\"\n              tabIndex={open ? undefined : -1}\n              disabled={disabled}\n              onClick={() => {\n                onClear?.();\n                inputRef.current?.focus();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" />\n            </button>\n          )}\n        </div>\n\n        {children && <div className={styles.filterRow}>{children}</div>}\n      </div>\n\n      {typeof document !== \"undefined\" && dropdown}\n    </>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e=`_sidebar_537se_3`,t=`_section_537se_21`,n=`_sectionHeader_537se_35`,r=`_sectionHeaderIcon_537se_71`,i=`_sectionTitle_537se_78`,a=`_sectionChevron_537se_94`,o=`_sectionBody_537se_104`,s=`_sectionBodyCollapsed_537se_110`,c=`_sectionBodyInner_537se_114`,l=`_list_537se_120`,u=`_item_537se_131`,d=`_itemBtn_537se_137`,f=`_active_537se_184`,p=`_itemIcon_537se_200`,m=`_itemLabel_537se_213`,h=`_itemSuffix_537se_223`,g=`_contextMenu_537se_232`,_=`_contextMenuItem_537se_256`,v=`_contextMenuDestructive_537se_292`,y=`_searchWrap_537se_298`,b=`_variantBlue_537se_309`,x=`_variantGreen_537se_318`,S=`_variantRed_537se_327`,C=`_variantYellow_537se_336`,w=`_variantBlack_537se_345`,T=`_variantTransparent_537se_354`,E=`_variantBlurred_537se_359`,D=`_pageMode_537se_375`,O=`_dragOver_537se_382`,k=`_collapsed_537se_390`,A=`_itemCollapsed_537se_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_537se_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_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;
 //# 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: 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: 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 { 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":""}

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

@@ -1,5 +1,5 @@
 //#region src/components/Sidebar/Sidebar.module.css
-var e = "_sidebar_537se_3", t = "_section_537se_21", n = "_sectionHeader_537se_35", r = "_sectionHeaderIcon_537se_71", i = "_sectionTitle_537se_78", a = "_sectionChevron_537se_94", o = "_sectionBody_537se_104", s = "_sectionBodyCollapsed_537se_110", c = "_sectionBodyInner_537se_114", l = "_list_537se_120", u = "_item_537se_131", d = "_itemBtn_537se_137", f = "_active_537se_184", p = "_itemIcon_537se_200", m = "_itemLabel_537se_213", h = "_itemSuffix_537se_223", g = "_contextMenu_537se_232", _ = "_contextMenuItem_537se_256", v = "_contextMenuDestructive_537se_292", y = "_searchWrap_537se_298", b = "_variantBlue_537se_309", x = "_variantGreen_537se_318", S = "_variantRed_537se_327", C = "_variantYellow_537se_336", w = "_variantBlack_537se_345", T = "_variantTransparent_537se_354", E = "_variantBlurred_537se_359", D = "_pageMode_537se_375", O = "_dragOver_537se_382", k = "_collapsed_537se_390", A = "_itemCollapsed_537se_401", j = {
+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,
@@ -17,7 +17,7 @@ var e = "_sidebar_537se_3", t = "_section_537se_21", n = "_sectionHeader_537se_3
 	itemLabel: m,
 	itemSuffix: h,
 	contextMenu: g,
-	"menu-in": "_menu-in_537se_1",
+	"menu-in": "_menu-in_1sdji_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: 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: 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 { 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":""}

package/dist/components/Sidebar/SidebarSection.cjs

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