@gnome-ui/react 1.45.0 → 1.45.2

package/dist/components/SearchBar/SearchBar.cjs

@@ -1,2 +1,2 @@
-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;
+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");var 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,"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}`,"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 { Close, Search } from '@gnome-ui/icons';\nimport {\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Icon } from '../Icon';\nimport { Spinner } from '../Spinner';\n\nimport styles from './SearchBar.module.css';\n\nexport interface Suggestion {\n  id: string;\n  label: string;\n}\n\nexport interface SearchBarProps 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 const 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(() => {\n    setActiveIndex(-1);\n  }, []);\n\n  // Auto-focus when opening\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => inputRef.current?.focus());\n\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\n      return;\n    }\n\n    function updatePos() {\n      if (!wrapperRef.current) {\n        return;\n      }\n\n      const r = wrapperRef.current.getBoundingClientRect();\n\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\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) {\n      return;\n    }\n\n    (listboxRef.current.children[activeIndex] as HTMLElement | undefined)?.scrollIntoView({\n      block: 'nearest',\n    });\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\n          return;\n        }\n\n        if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          setActiveIndex((i) => Math.max(i - 1, -1));\n\n          return;\n        }\n\n        if (e.key === 'Enter' && activeIndex >= 0) {\n          e.preventDefault();\n          onSuggestionSelect?.(suggestions[activeIndex]);\n\n          return;\n        }\n      }\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n      }\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 =\n    activeIndex >= 0 && suggestions?.[activeIndex]\n      ? `${optionIdPrefix}-${suggestions[activeIndex].id}`\n      : undefined;\n\n  const dropdown =\n    showDropdown && dropdownPos\n      ? createPortal(\n          <ul\n            ref={listboxRef}\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                  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].filter(Boolean).join(' ')}\n        aria-hidden={!open}\n      >\n        <div\n          className={[styles.bar, inline ? styles.inline : null, disabled ? styles.disabled : null]\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.d.ts

@@ -3,7 +3,7 @@ export interface Suggestion {
     id: string;
     label: string;
 }
-export interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+export interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     /**
      * Whether the search bar is visible/expanded.
      * When `false` the bar collapses to zero height and is hidden from AT.
@@ -47,4 +47,4 @@ export interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElemen
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html
  */
-export declare function SearchBar({ open, onClose, onClear, children, value, onChange, placeholder, disabled, inline, className, suggestions, onSuggestionSelect, loadingSuggestions, renderSuggestion, suggestionsLabel, ...props }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export declare const SearchBar: ({ open, onClose, onClear, children, value, onChange, placeholder, disabled, inline, className, suggestions, onSuggestionSelect, loadingSuggestions, renderSuggestion, suggestionsLabel, ...props }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SearchBar/SearchBar.js

@@ -6,11 +6,11 @@ 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 }) {
+var 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 = 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]), i(() => {
+	}, []), i(() => {
 		if (m) {
 			let e = requestAnimationFrame(() => A.current?.focus());
 			return () => cancelAnimationFrame(e);
@@ -64,7 +64,6 @@ function m({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y
 		T
 	]), 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: n.suggestionsPanel,
@@ -83,7 +82,6 @@ function m({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y
 			})
 		}), !E && w?.map((e, t) => /* @__PURE__ */ u("li", {
 			id: `${P}-${e.id}`,
-			role: "option",
 			"aria-selected": t === F,
 			className: [n.suggestionItem, t === F ? n.suggestionItemActive : null].filter(Boolean).join(" "),
 			onMouseEnter: () => I(t),
@@ -152,7 +150,7 @@ function m({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y
 			children: _
 		})]
 	}), typeof document < "u" && W] });
-}
+};
 //#endregion
 export { m as SearchBar };
 

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 { Close, Search } from '@gnome-ui/icons';\nimport {\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Icon } from '../Icon';\nimport { Spinner } from '../Spinner';\n\nimport styles from './SearchBar.module.css';\n\nexport interface Suggestion {\n  id: string;\n  label: string;\n}\n\nexport interface SearchBarProps 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 const 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(() => {\n    setActiveIndex(-1);\n  }, []);\n\n  // Auto-focus when opening\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => inputRef.current?.focus());\n\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\n      return;\n    }\n\n    function updatePos() {\n      if (!wrapperRef.current) {\n        return;\n      }\n\n      const r = wrapperRef.current.getBoundingClientRect();\n\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\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) {\n      return;\n    }\n\n    (listboxRef.current.children[activeIndex] as HTMLElement | undefined)?.scrollIntoView({\n      block: 'nearest',\n    });\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\n          return;\n        }\n\n        if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          setActiveIndex((i) => Math.max(i - 1, -1));\n\n          return;\n        }\n\n        if (e.key === 'Enter' && activeIndex >= 0) {\n          e.preventDefault();\n          onSuggestionSelect?.(suggestions[activeIndex]);\n\n          return;\n        }\n      }\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n      }\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 =\n    activeIndex >= 0 && suggestions?.[activeIndex]\n      ? `${optionIdPrefix}-${suggestions[activeIndex].id}`\n      : undefined;\n\n  const dropdown =\n    showDropdown && dropdownPos\n      ? createPortal(\n          <ul\n            ref={listboxRef}\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                  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].filter(Boolean).join(' ')}\n        aria-hidden={!open}\n      >\n        <div\n          className={[styles.bar, inline ? styles.inline : null, disabled ? styles.disabled : null]\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.module.css.cjs

@@ -1,2 +1,2 @@
-var e={wrapper:`_wrapper_ld6g1_3`,open:`_open_ld6g1_13`,bar:`_bar_ld6g1_20`,disabled:`_disabled_ld6g1_31`,searchIcon:`_searchIcon_ld6g1_37`,input:`_input_ld6g1_47`,clearButton:`_clearButton_ld6g1_82`,filterRow:`_filterRow_ld6g1_124`,suggestionsPanel:`_suggestionsPanel_ld6g1_136`,suggestionsLoading:`_suggestionsLoading_ld6g1_160`,suggestionItem:`_suggestionItem_ld6g1_166`,suggestionItemActive:`_suggestionItemActive_ld6g1_176`,inline:`_inline_ld6g1_202`};exports.default=e;
+var e={wrapper:`_wrapper_1812f_3`,open:`_open_1812f_13`,bar:`_bar_1812f_20`,disabled:`_disabled_1812f_31`,searchIcon:`_searchIcon_1812f_37`,input:`_input_1812f_47`,clearButton:`_clearButton_1812f_82`,filterRow:`_filterRow_1812f_124`,suggestionsPanel:`_suggestionsPanel_1812f_136`,suggestionsLoading:`_suggestionsLoading_1812f_160`,suggestionItem:`_suggestionItem_1812f_166`,suggestionItemActive:`_suggestionItemActive_1812f_176`,inline:`_inline_1812f_202`};exports.default=e;
 //# sourceMappingURL=SearchBar.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.module.css.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.module.css"],"sourcesContent":["/* ─── Collapsible wrapper ───────────────────────────────────────────────────── */\n\n.wrapper {\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n\n  transition:\n    max-height var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease),\n    opacity    var(--gnome-duration-fast,   100ms) var(--gnome-easing-default, ease);\n}\n\n.open {\n  max-height: 120px; /* enough for bar + filter row */\n  opacity: 1;\n}\n\n/* ─── Inner bar ─────────────────────────────────────────────────────────────── */\n\n.bar {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Search icon ───────────────────────────────────────────────────────────── */\n\n.searchIcon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Input ─────────────────────────────────────────────────────────────────── */\n\n.input {\n  flex: 1;\n  min-width: 0;\n\n  /* Reset browser search input */\n  appearance: none;\n  -webkit-appearance: none;\n\n  border: none;\n  background: transparent;\n  outline: none;\n\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  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.input::placeholder {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* Hide webkit search cancel button — we render our own */\n.input::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n}\n\n.input:focus {\n  outline: none;\n}\n\n/* ─── Clear button ──────────────────────────────────────────────────────────── */\n\n.clearButton {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 24px;\n  height: 24px;\n\n  appearance: none;\n  border: none;\n  background: transparent;\n  border-radius: var(--gnome-radius-sm, 6px);\n  padding: 0;\n  cursor: pointer;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  transition: opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.clearButton:hover:not(:disabled) {\n  opacity: 1;\n  background-color: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n.clearButton:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 18%, transparent);\n}\n\n.clearButton:focus {\n  outline: none;\n}\n\n.clearButton:focus-visible {\n  opacity: 1;\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: var(--gnome-focus-ring-offset, 2px);\n}\n\n/* ─── Filter row (optional children) ───────────────────────────────────────── */\n\n.filterRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gnome-space-1, 6px);\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Suggestions popover ───────────────────────────────────────────────────── */\n\n.suggestionsPanel {\n  position: fixed;\n  z-index: 10200;\n  margin: 0;\n  padding: var(--gnome-space-1, 6px);\n  list-style: none;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  border-top: none;\n  border-radius: 0 0 var(--gnome-radius-lg, 12px) var(--gnome-radius-lg, 12px);\n  box-shadow:\n    0 4px 20px rgba(0, 0, 0, 0.14),\n    0 1px 4px  rgba(0, 0, 0, 0.08);\n\n  max-height: 280px;\n  overflow-y: auto;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n}\n\n.suggestionsLoading {\n  display: flex;\n  justify-content: center;\n  padding: var(--gnome-space-2, 12px);\n}\n\n.suggestionItem {\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-sm, 6px);\n  cursor: pointer;\n  user-select: none;\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.suggestionItem:hover,\n.suggestionItemActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 12%, transparent);\n}\n\n.suggestionItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n@media (prefers-color-scheme: dark) {\n  .suggestionsPanel {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 24px rgba(0, 0, 0, 0.4),\n      0 1px 4px  rgba(0, 0, 0, 0.3);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .suggestionItem {\n    transition: none;\n  }\n}\n\n/* ─── Inline variant ────────────────────────────────────────────────────────── */\n\n.inline {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .bar,\n  .filterRow {\n    background-color: var(--gnome-headerbar-bg-color, #303030);\n    border-bottom-color: rgba(0, 0, 0, 0.35);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .wrapper {\n    transition: none;\n  }\n\n  .clearButton {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SearchBar.module.css.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.module.css"],"sourcesContent":["/* ─── Collapsible wrapper ───────────────────────────────────────────────────── */\n\n.wrapper {\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n\n  transition:\n    max-height var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease),\n    opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.open {\n  max-height: 120px; /* enough for bar + filter row */\n  opacity: 1;\n}\n\n/* ─── Inner bar ─────────────────────────────────────────────────────────────── */\n\n.bar {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Search icon ───────────────────────────────────────────────────────────── */\n\n.searchIcon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Input ─────────────────────────────────────────────────────────────────── */\n\n.input {\n  flex: 1;\n  min-width: 0;\n\n  /* Reset browser search input */\n  appearance: none;\n  -webkit-appearance: none;\n\n  border: none;\n  background: transparent;\n  outline: none;\n\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  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.input::placeholder {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* Hide webkit search cancel button — we render our own */\n.input::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n}\n\n.input:focus {\n  outline: none;\n}\n\n/* ─── Clear button ──────────────────────────────────────────────────────────── */\n\n.clearButton {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 24px;\n  height: 24px;\n\n  appearance: none;\n  border: none;\n  background: transparent;\n  border-radius: var(--gnome-radius-sm, 6px);\n  padding: 0;\n  cursor: pointer;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  transition: opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.clearButton:hover:not(:disabled) {\n  opacity: 1;\n  background-color: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n.clearButton:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 18%, transparent);\n}\n\n.clearButton:focus {\n  outline: none;\n}\n\n.clearButton:focus-visible {\n  opacity: 1;\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: var(--gnome-focus-ring-offset, 2px);\n}\n\n/* ─── Filter row (optional children) ───────────────────────────────────────── */\n\n.filterRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gnome-space-1, 6px);\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Suggestions popover ───────────────────────────────────────────────────── */\n\n.suggestionsPanel {\n  position: fixed;\n  z-index: 10200;\n  margin: 0;\n  padding: var(--gnome-space-1, 6px);\n  list-style: none;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  border-top: none;\n  border-radius: 0 0 var(--gnome-radius-lg, 12px) var(--gnome-radius-lg, 12px);\n  box-shadow:\n    0 4px 20px rgba(0, 0, 0, 0.14),\n    0 1px 4px rgba(0, 0, 0, 0.08);\n\n  max-height: 280px;\n  overflow-y: auto;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n}\n\n.suggestionsLoading {\n  display: flex;\n  justify-content: center;\n  padding: var(--gnome-space-2, 12px);\n}\n\n.suggestionItem {\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-sm, 6px);\n  cursor: pointer;\n  user-select: none;\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.suggestionItem:hover,\n.suggestionItemActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 12%, transparent);\n}\n\n.suggestionItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n@media (prefers-color-scheme: dark) {\n  .suggestionsPanel {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 24px rgba(0, 0, 0, 0.4),\n      0 1px 4px rgba(0, 0, 0, 0.3);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .suggestionItem {\n    transition: none;\n  }\n}\n\n/* ─── Inline variant ────────────────────────────────────────────────────────── */\n\n.inline {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .bar,\n  .filterRow {\n    background-color: var(--gnome-headerbar-bg-color, #303030);\n    border-bottom-color: rgba(0, 0, 0, 0.35);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .wrapper {\n    transition: none;\n  }\n\n  .clearButton {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,17 +1,17 @@
 var e = {
-	wrapper: "_wrapper_ld6g1_3",
-	open: "_open_ld6g1_13",
-	bar: "_bar_ld6g1_20",
-	disabled: "_disabled_ld6g1_31",
-	searchIcon: "_searchIcon_ld6g1_37",
-	input: "_input_ld6g1_47",
-	clearButton: "_clearButton_ld6g1_82",
-	filterRow: "_filterRow_ld6g1_124",
-	suggestionsPanel: "_suggestionsPanel_ld6g1_136",
-	suggestionsLoading: "_suggestionsLoading_ld6g1_160",
-	suggestionItem: "_suggestionItem_ld6g1_166",
-	suggestionItemActive: "_suggestionItemActive_ld6g1_176",
-	inline: "_inline_ld6g1_202"
+	wrapper: "_wrapper_1812f_3",
+	open: "_open_1812f_13",
+	bar: "_bar_1812f_20",
+	disabled: "_disabled_1812f_31",
+	searchIcon: "_searchIcon_1812f_37",
+	input: "_input_1812f_47",
+	clearButton: "_clearButton_1812f_82",
+	filterRow: "_filterRow_1812f_124",
+	suggestionsPanel: "_suggestionsPanel_1812f_136",
+	suggestionsLoading: "_suggestionsLoading_1812f_160",
+	suggestionItem: "_suggestionItem_1812f_166",
+	suggestionItemActive: "_suggestionItemActive_1812f_176",
+	inline: "_inline_1812f_202"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.module.css.js","names":[],"sources":["../../../src/components/SearchBar/SearchBar.module.css"],"sourcesContent":["/* ─── Collapsible wrapper ───────────────────────────────────────────────────── */\n\n.wrapper {\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n\n  transition:\n    max-height var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease),\n    opacity    var(--gnome-duration-fast,   100ms) var(--gnome-easing-default, ease);\n}\n\n.open {\n  max-height: 120px; /* enough for bar + filter row */\n  opacity: 1;\n}\n\n/* ─── Inner bar ─────────────────────────────────────────────────────────────── */\n\n.bar {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Search icon ───────────────────────────────────────────────────────────── */\n\n.searchIcon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Input ─────────────────────────────────────────────────────────────────── */\n\n.input {\n  flex: 1;\n  min-width: 0;\n\n  /* Reset browser search input */\n  appearance: none;\n  -webkit-appearance: none;\n\n  border: none;\n  background: transparent;\n  outline: none;\n\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  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.input::placeholder {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* Hide webkit search cancel button — we render our own */\n.input::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n}\n\n.input:focus {\n  outline: none;\n}\n\n/* ─── Clear button ──────────────────────────────────────────────────────────── */\n\n.clearButton {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 24px;\n  height: 24px;\n\n  appearance: none;\n  border: none;\n  background: transparent;\n  border-radius: var(--gnome-radius-sm, 6px);\n  padding: 0;\n  cursor: pointer;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  transition: opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.clearButton:hover:not(:disabled) {\n  opacity: 1;\n  background-color: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n.clearButton:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 18%, transparent);\n}\n\n.clearButton:focus {\n  outline: none;\n}\n\n.clearButton:focus-visible {\n  opacity: 1;\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: var(--gnome-focus-ring-offset, 2px);\n}\n\n/* ─── Filter row (optional children) ───────────────────────────────────────── */\n\n.filterRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gnome-space-1, 6px);\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Suggestions popover ───────────────────────────────────────────────────── */\n\n.suggestionsPanel {\n  position: fixed;\n  z-index: 10200;\n  margin: 0;\n  padding: var(--gnome-space-1, 6px);\n  list-style: none;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  border-top: none;\n  border-radius: 0 0 var(--gnome-radius-lg, 12px) var(--gnome-radius-lg, 12px);\n  box-shadow:\n    0 4px 20px rgba(0, 0, 0, 0.14),\n    0 1px 4px  rgba(0, 0, 0, 0.08);\n\n  max-height: 280px;\n  overflow-y: auto;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n}\n\n.suggestionsLoading {\n  display: flex;\n  justify-content: center;\n  padding: var(--gnome-space-2, 12px);\n}\n\n.suggestionItem {\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-sm, 6px);\n  cursor: pointer;\n  user-select: none;\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.suggestionItem:hover,\n.suggestionItemActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 12%, transparent);\n}\n\n.suggestionItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n@media (prefers-color-scheme: dark) {\n  .suggestionsPanel {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 24px rgba(0, 0, 0, 0.4),\n      0 1px 4px  rgba(0, 0, 0, 0.3);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .suggestionItem {\n    transition: none;\n  }\n}\n\n/* ─── Inline variant ────────────────────────────────────────────────────────── */\n\n.inline {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .bar,\n  .filterRow {\n    background-color: var(--gnome-headerbar-bg-color, #303030);\n    border-bottom-color: rgba(0, 0, 0, 0.35);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .wrapper {\n    transition: none;\n  }\n\n  .clearButton {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SearchBar.module.css.js","names":[],"sources":["../../../src/components/SearchBar/SearchBar.module.css"],"sourcesContent":["/* ─── Collapsible wrapper ───────────────────────────────────────────────────── */\n\n.wrapper {\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n\n  transition:\n    max-height var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease),\n    opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.open {\n  max-height: 120px; /* enough for bar + filter row */\n  opacity: 1;\n}\n\n/* ─── Inner bar ─────────────────────────────────────────────────────────────── */\n\n.bar {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Search icon ───────────────────────────────────────────────────────────── */\n\n.searchIcon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Input ─────────────────────────────────────────────────────────────────── */\n\n.input {\n  flex: 1;\n  min-width: 0;\n\n  /* Reset browser search input */\n  appearance: none;\n  -webkit-appearance: none;\n\n  border: none;\n  background: transparent;\n  outline: none;\n\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  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.input::placeholder {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* Hide webkit search cancel button — we render our own */\n.input::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n}\n\n.input:focus {\n  outline: none;\n}\n\n/* ─── Clear button ──────────────────────────────────────────────────────────── */\n\n.clearButton {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 24px;\n  height: 24px;\n\n  appearance: none;\n  border: none;\n  background: transparent;\n  border-radius: var(--gnome-radius-sm, 6px);\n  padding: 0;\n  cursor: pointer;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  transition: opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.clearButton:hover:not(:disabled) {\n  opacity: 1;\n  background-color: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n.clearButton:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 18%, transparent);\n}\n\n.clearButton:focus {\n  outline: none;\n}\n\n.clearButton:focus-visible {\n  opacity: 1;\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: var(--gnome-focus-ring-offset, 2px);\n}\n\n/* ─── Filter row (optional children) ───────────────────────────────────────── */\n\n.filterRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gnome-space-1, 6px);\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Suggestions popover ───────────────────────────────────────────────────── */\n\n.suggestionsPanel {\n  position: fixed;\n  z-index: 10200;\n  margin: 0;\n  padding: var(--gnome-space-1, 6px);\n  list-style: none;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  border-top: none;\n  border-radius: 0 0 var(--gnome-radius-lg, 12px) var(--gnome-radius-lg, 12px);\n  box-shadow:\n    0 4px 20px rgba(0, 0, 0, 0.14),\n    0 1px 4px rgba(0, 0, 0, 0.08);\n\n  max-height: 280px;\n  overflow-y: auto;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n}\n\n.suggestionsLoading {\n  display: flex;\n  justify-content: center;\n  padding: var(--gnome-space-2, 12px);\n}\n\n.suggestionItem {\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-sm, 6px);\n  cursor: pointer;\n  user-select: none;\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.suggestionItem:hover,\n.suggestionItemActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 12%, transparent);\n}\n\n.suggestionItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n@media (prefers-color-scheme: dark) {\n  .suggestionsPanel {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 24px rgba(0, 0, 0, 0.4),\n      0 1px 4px rgba(0, 0, 0, 0.3);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .suggestionItem {\n    transition: none;\n  }\n}\n\n/* ─── Inline variant ────────────────────────────────────────────────────────── */\n\n.inline {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .bar,\n  .filterRow {\n    background-color: var(--gnome-headerbar-bg-color, #303030);\n    border-bottom-color: rgba(0, 0, 0, 0.35);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .wrapper {\n    transition: none;\n  }\n\n  .clearButton {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { SearchBar } from './SearchBar';
 export type { SearchBarProps, Suggestion } from './SearchBar';
+export { SearchBar } from './SearchBar';

package/dist/components/SearchBar.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./SearchBar/SearchBar.cjs`);exports.SearchBar=e.SearchBar;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./SearchBar/SearchBar.cjs");exports.SearchBar=e.SearchBar;

package/dist/components/SegmentedBar/SegmentedBar.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Tooltip/Tooltip.cjs`),t=require(`./SegmentedBar.module.css.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);var i=8,a=(0,n.memo)(function({values:a,className:o,"aria-label":s,...c}){let[l,u]=(0,n.useState)(null),d=a.reduce((e,t)=>e+t.value,0)||100,f=a.map(e=>`${e.label} ${e.value}%`).join(`, `);return(0,r.jsx)(`div`,{role:`img`,"aria-label":s??f,className:[t.default.track,o].filter(Boolean).join(` `),...c,children:a.map((n,a)=>{let o=`${n.value/d*100}%`,s=n.value%1==0?n.value:n.value.toFixed(1);return(0,r.jsx)(e.Tooltip,{label:`${n.label}: ${s}%`,placement:`top`,delay:200,children:(0,r.jsx)(`div`,{className:[t.default.segment,n.color?null:t.default[`color${a%i}`],l!==null&&l!==a?t.default.dimmed:null,l===a?t.default.highlighted:null].filter(Boolean).join(` `),style:{width:o,...n.color?{backgroundColor:n.color}:{}},onMouseEnter:()=>u(a),onMouseLeave:()=>u(null)})},n.label)})})});exports.SegmentedBar=a;
+const e=require("../Tooltip/Tooltip.cjs"),t=require("./SegmentedBar.module.css.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=8,a=(0,n.memo)(function({values:a,className:o,"aria-label":s,...c}){let[l,u]=(0,n.useState)(null),d=a.reduce((e,t)=>e+t.value,0)||100,f=a.map(e=>`${e.label} ${e.value}%`).join(`, `);return(0,r.jsx)(`div`,{role:`img`,"aria-label":s??f,className:[t.default.track,o].filter(Boolean).join(` `),...c,children:a.map((n,a)=>{let o=`${n.value/d*100}%`,s=n.value%1==0?n.value:n.value.toFixed(1);return(0,r.jsx)(e.Tooltip,{label:`${n.label}: ${s}%`,placement:`top`,delay:200,children:(0,r.jsx)(`div`,{className:[t.default.segment,n.color?null:t.default[`color${a%i}`],l!==null&&l!==a?t.default.dimmed:null,l===a?t.default.highlighted:null].filter(Boolean).join(` `),style:{width:o,...n.color?{backgroundColor:n.color}:{}},onMouseEnter:()=>u(a),onMouseLeave:()=>u(null)})},n.label)})})});exports.SegmentedBar=a;
 //# sourceMappingURL=SegmentedBar.cjs.map

package/dist/components/SegmentedBar/SegmentedBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedBar.cjs","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.tsx"],"sourcesContent":["import { useState, memo } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { Tooltip } from \"../Tooltip\";\nimport styles from \"./SegmentedBar.module.css\";\n\nexport interface SegmentedBarSegment {\n  /** Category name shown in the tooltip. */\n  label: string;\n  /**\n   * Percentage value 0–100.\n   * The sum of all segments should equal 100.\n   * If it does not, values are redistributed proportionally.\n   */\n  value: number;\n  /**\n   * CSS color string for this segment.\n   * When omitted, a cycling palette of GNOME design tokens is used.\n   */\n  color?: string;\n}\n\nexport interface SegmentedBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Segments to display. Each segment contributes its share of the full bar width. */\n  values: SegmentedBarSegment[];\n  /**\n   * Accessible label for the bar as a whole.\n   * Auto-generated from `values` when omitted (e.g. \"TypeScript 45%, JavaScript 30%\").\n   */\n  \"aria-label\"?: string;\n}\n\nconst COLOR_COUNT = 8;\n\n/**\n * Horizontal bar split into proportional segments, one per category.\n *\n * Hover a segment to highlight it and see its tooltip with label and percentage.\n * Typical use case: repository language distribution.\n *\n * ```tsx\n * <SegmentedBar\n *   values={[\n *     { label: \"TypeScript\", value: 60, color: \"#3178c6\" },\n *     { label: \"JavaScript\", value: 30, color: \"#f7df1e\" },\n *     { label: \"CSS\",        value: 10, color: \"#563d7c\" },\n *   ]}\n * />\n * ```\n */\nexport const SegmentedBar = memo(function SegmentedBar({\n  values,\n  className,\n  \"aria-label\": ariaLabel,\n  ...props\n}: SegmentedBarProps) {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const total = values.reduce((sum, s) => sum + s.value, 0) || 100;\n\n  const defaultLabel = values.map((s) => `${s.label} ${s.value}%`).join(\", \");\n\n  return (\n    <div\n      role=\"img\"\n      aria-label={ariaLabel ?? defaultLabel}\n      className={[styles.track, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      {values.map((segment, i) => {\n        const width = `${(segment.value / total) * 100}%`;\n        const pct = segment.value % 1 === 0 ? segment.value : segment.value.toFixed(1);\n        const tooltipLabel = `${segment.label}: ${pct}%`;\n\n        return (\n          <Tooltip key={segment.label} label={tooltipLabel} placement=\"top\" delay={200}>\n            <div\n              className={[\n                styles.segment,\n                !segment.color ? styles[`color${i % COLOR_COUNT}`] : null,\n                activeIndex !== null && activeIndex !== i ? styles.dimmed : null,\n                activeIndex === i ? styles.highlighted : null,\n              ]\n                .filter(Boolean)\n                .join(\" \")}\n              style={{\n                width,\n                ...(segment.color ? { backgroundColor: segment.color } : {}),\n              }}\n              onMouseEnter={() => setActiveIndex(i)}\n              onMouseLeave={() => setActiveIndex(null)}\n            />\n          </Tooltip>\n        );\n      })}\n    </div>\n  );\n});\n"],"mappings":"2IA+BA,IAAM,EAAc,EAkBP,GAAA,EAAA,EAAA,MAAoB,SAAsB,CACrD,SACA,YACA,aAAc,EACd,GAAG,GACiB,CACpB,GAAM,CAAC,EAAa,IAAA,EAAA,EAAA,UAA0C,KAAK,CAE7D,EAAQ,EAAO,QAAQ,EAAK,IAAM,EAAM,EAAE,MAAO,EAAE,EAAI,IAEvD,EAAe,EAAO,IAAK,GAAM,GAAG,EAAE,MAAM,GAAG,EAAE,MAAM,GAAG,CAAC,KAAK,KAAK,CAE3E,OACE,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,MACL,aAAY,GAAa,EACzB,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC9D,GAAI,WAEH,EAAO,KAAK,EAAS,IAAM,CAC1B,IAAM,EAAQ,GAAI,EAAQ,MAAQ,EAAS,IAAI,GACzC,EAAM,EAAQ,MAAQ,GAAM,EAAI,EAAQ,MAAQ,EAAQ,MAAM,QAAQ,EAAE,CAG9E,OACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAA6B,MAHV,GAAG,EAAQ,MAAM,IAAI,EAAI,GAGM,UAAU,MAAM,MAAO,cACvE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,QACN,EAAQ,MAA4C,KAApC,EAAA,QAAO,QAAQ,EAAI,KACpC,IAAgB,MAAQ,IAAgB,EAAI,EAAA,QAAO,OAAS,KAC5D,IAAgB,EAAI,EAAA,QAAO,YAAc,KAC1C,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,MAAO,CACL,QACA,GAAI,EAAQ,MAAQ,CAAE,gBAAiB,EAAQ,MAAO,CAAG,EAAE,CAC5D,CACD,iBAAoB,EAAe,EAAE,CACrC,iBAAoB,EAAe,KAAK,CACxC,CAAA,CACM,CAjBI,EAAQ,MAiBZ,EAEZ,CACE,CAAA,EAER"}
+{"version":3,"file":"SegmentedBar.cjs","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { memo, useState } from 'react';\n\nimport { Tooltip } from '../Tooltip';\n\nimport styles from './SegmentedBar.module.css';\n\nexport interface SegmentedBarSegment {\n  /** Category name shown in the tooltip. */\n  label: string;\n  /**\n   * Percentage value 0–100.\n   * The sum of all segments should equal 100.\n   * If it does not, values are redistributed proportionally.\n   */\n  value: number;\n  /**\n   * CSS color string for this segment.\n   * When omitted, a cycling palette of GNOME design tokens is used.\n   */\n  color?: string;\n}\n\nexport interface SegmentedBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Segments to display. Each segment contributes its share of the full bar width. */\n  values: SegmentedBarSegment[];\n  /**\n   * Accessible label for the bar as a whole.\n   * Auto-generated from `values` when omitted (e.g. \"TypeScript 45%, JavaScript 30%\").\n   */\n  'aria-label'?: string;\n}\n\nconst COLOR_COUNT = 8;\n\n/**\n * Horizontal bar split into proportional segments, one per category.\n *\n * Hover a segment to highlight it and see its tooltip with label and percentage.\n * Typical use case: repository language distribution.\n *\n * ```tsx\n * <SegmentedBar\n *   values={[\n *     { label: \"TypeScript\", value: 60, color: \"#3178c6\" },\n *     { label: \"JavaScript\", value: 30, color: \"#f7df1e\" },\n *     { label: \"CSS\",        value: 10, color: \"#563d7c\" },\n *   ]}\n * />\n * ```\n */\nexport const SegmentedBar = memo(function SegmentedBar({\n  values,\n  className,\n  'aria-label': ariaLabel,\n  ...props\n}: SegmentedBarProps) {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const total = values.reduce((sum, s) => sum + s.value, 0) || 100;\n\n  const defaultLabel = values.map((s) => `${s.label} ${s.value}%`).join(', ');\n\n  return (\n    <div\n      role=\"img\"\n      aria-label={ariaLabel ?? defaultLabel}\n      className={[styles.track, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      {values.map((segment, i) => {\n        const width = `${(segment.value / total) * 100}%`;\n        const pct = segment.value % 1 === 0 ? segment.value : segment.value.toFixed(1);\n        const tooltipLabel = `${segment.label}: ${pct}%`;\n\n        return (\n          <Tooltip key={segment.label} label={tooltipLabel} placement=\"top\" delay={200}>\n            <div\n              className={[\n                styles.segment,\n                !segment.color ? styles[`color${i % COLOR_COUNT}`] : null,\n                activeIndex !== null && activeIndex !== i ? styles.dimmed : null,\n                activeIndex === i ? styles.highlighted : null,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              style={{\n                width,\n                ...(segment.color ? { backgroundColor: segment.color } : {}),\n              }}\n              onMouseEnter={() => setActiveIndex(i)}\n              onMouseLeave={() => setActiveIndex(null)}\n            />\n          </Tooltip>\n        );\n      })}\n    </div>\n  );\n});\n"],"mappings":"2IAiCA,IAAM,EAAc,EAkBP,GAAA,EAAA,EAAA,MAAoB,SAAsB,CACrD,SACA,YACA,aAAc,EACd,GAAG,GACiB,CACpB,GAAM,CAAC,EAAa,IAAA,EAAA,EAAA,UAA0C,IAAI,EAE5D,EAAQ,EAAO,QAAQ,EAAK,IAAM,EAAM,EAAE,MAAO,CAAC,GAAK,IAEvD,EAAe,EAAO,IAAK,GAAM,GAAG,EAAE,MAAM,GAAG,EAAE,MAAM,EAAE,EAAE,KAAK,IAAI,EAE1E,OACE,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,MACL,aAAY,GAAa,EACzB,UAAW,CAAC,EAAA,QAAO,MAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7D,GAAI,WAEH,EAAO,KAAK,EAAS,IAAM,CAC1B,IAAM,EAAQ,GAAI,EAAQ,MAAQ,EAAS,IAAI,GACzC,EAAM,EAAQ,MAAQ,GAAM,EAAI,EAAQ,MAAQ,EAAQ,MAAM,QAAQ,CAAC,EAG7E,OACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAA6B,MAAO,GAHd,EAAQ,MAAM,IAAI,EAAI,GAGM,UAAU,MAAM,MAAO,cACvE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,QACN,EAAQ,MAA4C,KAApC,EAAA,QAAO,QAAQ,EAAI,KACpC,IAAgB,MAAQ,IAAgB,EAAI,EAAA,QAAO,OAAS,KAC5D,IAAgB,EAAI,EAAA,QAAO,YAAc,IAC3C,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,MAAO,CACL,QACA,GAAI,EAAQ,MAAQ,CAAE,gBAAiB,EAAQ,KAAM,EAAI,CAAC,CAC5D,EACA,iBAAoB,EAAe,CAAC,EACpC,iBAAoB,EAAe,IAAI,CACxC,CAAA,CACM,EAjBK,EAAQ,KAiBb,CAEb,CAAC,CACE,CAAA,CAET,CAAC"}

package/dist/components/SegmentedBar/SegmentedBar.d.ts

@@ -21,7 +21,7 @@ export interface SegmentedBarProps extends HTMLAttributes<HTMLDivElement> {
      * Accessible label for the bar as a whole.
      * Auto-generated from `values` when omitted (e.g. "TypeScript 45%, JavaScript 30%").
      */
-    "aria-label"?: string;
+    'aria-label'?: string;
 }
 /**
  * Horizontal bar split into proportional segments, one per category.

package/dist/components/SegmentedBar/SegmentedBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedBar.js","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.tsx"],"sourcesContent":["import { useState, memo } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { Tooltip } from \"../Tooltip\";\nimport styles from \"./SegmentedBar.module.css\";\n\nexport interface SegmentedBarSegment {\n  /** Category name shown in the tooltip. */\n  label: string;\n  /**\n   * Percentage value 0–100.\n   * The sum of all segments should equal 100.\n   * If it does not, values are redistributed proportionally.\n   */\n  value: number;\n  /**\n   * CSS color string for this segment.\n   * When omitted, a cycling palette of GNOME design tokens is used.\n   */\n  color?: string;\n}\n\nexport interface SegmentedBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Segments to display. Each segment contributes its share of the full bar width. */\n  values: SegmentedBarSegment[];\n  /**\n   * Accessible label for the bar as a whole.\n   * Auto-generated from `values` when omitted (e.g. \"TypeScript 45%, JavaScript 30%\").\n   */\n  \"aria-label\"?: string;\n}\n\nconst COLOR_COUNT = 8;\n\n/**\n * Horizontal bar split into proportional segments, one per category.\n *\n * Hover a segment to highlight it and see its tooltip with label and percentage.\n * Typical use case: repository language distribution.\n *\n * ```tsx\n * <SegmentedBar\n *   values={[\n *     { label: \"TypeScript\", value: 60, color: \"#3178c6\" },\n *     { label: \"JavaScript\", value: 30, color: \"#f7df1e\" },\n *     { label: \"CSS\",        value: 10, color: \"#563d7c\" },\n *   ]}\n * />\n * ```\n */\nexport const SegmentedBar = memo(function SegmentedBar({\n  values,\n  className,\n  \"aria-label\": ariaLabel,\n  ...props\n}: SegmentedBarProps) {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const total = values.reduce((sum, s) => sum + s.value, 0) || 100;\n\n  const defaultLabel = values.map((s) => `${s.label} ${s.value}%`).join(\", \");\n\n  return (\n    <div\n      role=\"img\"\n      aria-label={ariaLabel ?? defaultLabel}\n      className={[styles.track, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      {values.map((segment, i) => {\n        const width = `${(segment.value / total) * 100}%`;\n        const pct = segment.value % 1 === 0 ? segment.value : segment.value.toFixed(1);\n        const tooltipLabel = `${segment.label}: ${pct}%`;\n\n        return (\n          <Tooltip key={segment.label} label={tooltipLabel} placement=\"top\" delay={200}>\n            <div\n              className={[\n                styles.segment,\n                !segment.color ? styles[`color${i % COLOR_COUNT}`] : null,\n                activeIndex !== null && activeIndex !== i ? styles.dimmed : null,\n                activeIndex === i ? styles.highlighted : null,\n              ]\n                .filter(Boolean)\n                .join(\" \")}\n              style={{\n                width,\n                ...(segment.color ? { backgroundColor: segment.color } : {}),\n              }}\n              onMouseEnter={() => setActiveIndex(i)}\n              onMouseLeave={() => setActiveIndex(null)}\n            />\n          </Tooltip>\n        );\n      })}\n    </div>\n  );\n});\n"],"mappings":";;;;;AA+BA,IAAM,IAAc,GAkBP,IAAe,EAAK,SAAsB,EACrD,WACA,cACA,cAAc,GACd,GAAG,KACiB;CACpB,IAAM,CAAC,GAAa,KAAkB,EAAwB,KAAK,EAE7D,IAAQ,EAAO,QAAQ,GAAK,MAAM,IAAM,EAAE,OAAO,EAAE,IAAI,KAEvD,IAAe,EAAO,KAAK,MAAM,GAAG,EAAE,MAAM,GAAG,EAAE,MAAM,GAAG,CAAC,KAAK,KAAK;AAE3E,QACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAY,KAAa;EACzB,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC9D,GAAI;YAEH,EAAO,KAAK,GAAS,MAAM;GAC1B,IAAM,IAAQ,GAAI,EAAQ,QAAQ,IAAS,IAAI,IACzC,IAAM,EAAQ,QAAQ,KAAM,IAAI,EAAQ,QAAQ,EAAQ,MAAM,QAAQ,EAAE;AAG9E,UACE,kBAAC,GAAD;IAA6B,OAHV,GAAG,EAAQ,MAAM,IAAI,EAAI;IAGM,WAAU;IAAM,OAAO;cACvE,kBAAC,OAAD;KACE,WAAW;MACT,EAAO;MACN,EAAQ,QAA4C,OAApC,EAAO,QAAQ,IAAI;MACpC,MAAgB,QAAQ,MAAgB,IAAI,EAAO,SAAS;MAC5D,MAAgB,IAAI,EAAO,cAAc;MAC1C,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;KACZ,OAAO;MACL;MACA,GAAI,EAAQ,QAAQ,EAAE,iBAAiB,EAAQ,OAAO,GAAG,EAAE;MAC5D;KACD,oBAAoB,EAAe,EAAE;KACrC,oBAAoB,EAAe,KAAK;KACxC,CAAA;IACM,EAjBI,EAAQ,MAiBZ;IAEZ;EACE,CAAA;EAER"}
+{"version":3,"file":"SegmentedBar.js","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { memo, useState } from 'react';\n\nimport { Tooltip } from '../Tooltip';\n\nimport styles from './SegmentedBar.module.css';\n\nexport interface SegmentedBarSegment {\n  /** Category name shown in the tooltip. */\n  label: string;\n  /**\n   * Percentage value 0–100.\n   * The sum of all segments should equal 100.\n   * If it does not, values are redistributed proportionally.\n   */\n  value: number;\n  /**\n   * CSS color string for this segment.\n   * When omitted, a cycling palette of GNOME design tokens is used.\n   */\n  color?: string;\n}\n\nexport interface SegmentedBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Segments to display. Each segment contributes its share of the full bar width. */\n  values: SegmentedBarSegment[];\n  /**\n   * Accessible label for the bar as a whole.\n   * Auto-generated from `values` when omitted (e.g. \"TypeScript 45%, JavaScript 30%\").\n   */\n  'aria-label'?: string;\n}\n\nconst COLOR_COUNT = 8;\n\n/**\n * Horizontal bar split into proportional segments, one per category.\n *\n * Hover a segment to highlight it and see its tooltip with label and percentage.\n * Typical use case: repository language distribution.\n *\n * ```tsx\n * <SegmentedBar\n *   values={[\n *     { label: \"TypeScript\", value: 60, color: \"#3178c6\" },\n *     { label: \"JavaScript\", value: 30, color: \"#f7df1e\" },\n *     { label: \"CSS\",        value: 10, color: \"#563d7c\" },\n *   ]}\n * />\n * ```\n */\nexport const SegmentedBar = memo(function SegmentedBar({\n  values,\n  className,\n  'aria-label': ariaLabel,\n  ...props\n}: SegmentedBarProps) {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const total = values.reduce((sum, s) => sum + s.value, 0) || 100;\n\n  const defaultLabel = values.map((s) => `${s.label} ${s.value}%`).join(', ');\n\n  return (\n    <div\n      role=\"img\"\n      aria-label={ariaLabel ?? defaultLabel}\n      className={[styles.track, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      {values.map((segment, i) => {\n        const width = `${(segment.value / total) * 100}%`;\n        const pct = segment.value % 1 === 0 ? segment.value : segment.value.toFixed(1);\n        const tooltipLabel = `${segment.label}: ${pct}%`;\n\n        return (\n          <Tooltip key={segment.label} label={tooltipLabel} placement=\"top\" delay={200}>\n            <div\n              className={[\n                styles.segment,\n                !segment.color ? styles[`color${i % COLOR_COUNT}`] : null,\n                activeIndex !== null && activeIndex !== i ? styles.dimmed : null,\n                activeIndex === i ? styles.highlighted : null,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              style={{\n                width,\n                ...(segment.color ? { backgroundColor: segment.color } : {}),\n              }}\n              onMouseEnter={() => setActiveIndex(i)}\n              onMouseLeave={() => setActiveIndex(null)}\n            />\n          </Tooltip>\n        );\n      })}\n    </div>\n  );\n});\n"],"mappings":";;;;;AAiCA,IAAM,IAAc,GAkBP,IAAe,EAAK,SAAsB,EACrD,WACA,cACA,cAAc,GACd,GAAG,KACiB;CACpB,IAAM,CAAC,GAAa,KAAkB,EAAwB,IAAI,GAE5D,IAAQ,EAAO,QAAQ,GAAK,MAAM,IAAM,EAAE,OAAO,CAAC,KAAK,KAEvD,IAAe,EAAO,KAAK,MAAM,GAAG,EAAE,MAAM,GAAG,EAAE,MAAM,EAAE,EAAE,KAAK,IAAI;CAE1E,OACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAY,KAAa;EACzB,WAAW,CAAC,EAAO,OAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;EAC7D,GAAI;YAEH,EAAO,KAAK,GAAS,MAAM;GAC1B,IAAM,IAAQ,GAAI,EAAQ,QAAQ,IAAS,IAAI,IACzC,IAAM,EAAQ,QAAQ,KAAM,IAAI,EAAQ,QAAQ,EAAQ,MAAM,QAAQ,CAAC;GAG7E,OACE,kBAAC,GAAD;IAA6B,OAAO,GAHd,EAAQ,MAAM,IAAI,EAAI;IAGM,WAAU;IAAM,OAAO;cACvE,kBAAC,OAAD;KACE,WAAW;MACT,EAAO;MACN,EAAQ,QAA4C,OAApC,EAAO,QAAQ,IAAI;MACpC,MAAgB,QAAQ,MAAgB,IAAI,EAAO,SAAS;MAC5D,MAAgB,IAAI,EAAO,cAAc;KAC3C,EACG,OAAO,OAAO,EACd,KAAK,GAAG;KACX,OAAO;MACL;MACA,GAAI,EAAQ,QAAQ,EAAE,iBAAiB,EAAQ,MAAM,IAAI,CAAC;KAC5D;KACA,oBAAoB,EAAe,CAAC;KACpC,oBAAoB,EAAe,IAAI;IACxC,CAAA;GACM,GAjBK,EAAQ,KAiBb;EAEb,CAAC;CACE,CAAA;AAET,CAAC"}

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

@@ -1,2 +1,2 @@
-var e={track:`_track_1ahtp_3`,segment:`_segment_1ahtp_16`,dimmed:`_dimmed_1ahtp_24`,highlighted:`_highlighted_1ahtp_25`,color0:`_color0_1ahtp_29`,color1:`_color1_1ahtp_30`,color2:`_color2_1ahtp_31`,color3:`_color3_1ahtp_32`,color4:`_color4_1ahtp_33`,color5:`_color5_1ahtp_34`,color6:`_color6_1ahtp_35`,color7:`_color7_1ahtp_36`};exports.default=e;
+var e={track:`_track_4b608_3`,segment:`_segment_4b608_16`,dimmed:`_dimmed_4b608_24`,highlighted:`_highlighted_4b608_27`,color0:`_color0_4b608_33`,color1:`_color1_4b608_36`,color2:`_color2_4b608_39`,color3:`_color3_4b608_42`,color4:`_color4_4b608_45`,color5:`_color5_4b608_48`,color6:`_color6_4b608_51`,color7:`_color7_4b608_54`};exports.default=e;
 //# sourceMappingURL=SegmentedBar.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedBar.module.css.cjs","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.module.css"],"sourcesContent":["/* ─── Track ─────────────────────────────────────────────────────────────────── */\n\n.track {\n  display: flex;\n  width: 100%;\n  height: 8px;\n  border-radius: var(--gnome-radius-pill);\n  overflow: hidden;\n  gap: 2px;\n  /* Track color is visible in the 2 px gaps between segments */\n  background-color: var(--gnome-light-3, #deddda);\n}\n\n/* ─── Segment ───────────────────────────────────────────────────────────────── */\n\n.segment {\n  height: 100%;\n  cursor: default;\n  transition:\n    opacity var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease),\n    filter  var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease);\n}\n\n.dimmed      { opacity: 0.35; }\n.highlighted { filter: brightness(1.15); }\n\n/* ─── Default palette (GNOME tokens, cycling across color families) ─────────── */\n\n.color0 { background-color: var(--gnome-blue-3,   #3584e4); }\n.color1 { background-color: var(--gnome-green-3,  #33d17a); }\n.color2 { background-color: var(--gnome-purple-3, #9141ac); }\n.color3 { background-color: var(--gnome-orange-3, #ff7800); }\n.color4 { background-color: var(--gnome-red-3,    #e01b24); }\n.color5 { background-color: var(--gnome-brown-3,  #986a44); }\n.color6 { background-color: var(--gnome-blue-5,   #1a5fb4); }\n.color7 { background-color: var(--gnome-green-5,  #26a269); }\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: var(--gnome-dark-2, #5e5c64);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .segment {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SegmentedBar.module.css.cjs","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.module.css"],"sourcesContent":["/* ─── Track ─────────────────────────────────────────────────────────────────── */\n\n.track {\n  display: flex;\n  width: 100%;\n  height: 8px;\n  border-radius: var(--gnome-radius-pill);\n  overflow: hidden;\n  gap: 2px;\n  /* Track color is visible in the 2 px gaps between segments */\n  background-color: var(--gnome-light-3, #deddda);\n}\n\n/* ─── Segment ───────────────────────────────────────────────────────────────── */\n\n.segment {\n  height: 100%;\n  cursor: default;\n  transition:\n    opacity var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease),\n    filter var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease);\n}\n\n.dimmed {\n  opacity: 0.35;\n}\n.highlighted {\n  filter: brightness(1.15);\n}\n\n/* ─── Default palette (GNOME tokens, cycling across color families) ─────────── */\n\n.color0 {\n  background-color: var(--gnome-blue-3, #3584e4);\n}\n.color1 {\n  background-color: var(--gnome-green-3, #33d17a);\n}\n.color2 {\n  background-color: var(--gnome-purple-3, #9141ac);\n}\n.color3 {\n  background-color: var(--gnome-orange-3, #ff7800);\n}\n.color4 {\n  background-color: var(--gnome-red-3, #e01b24);\n}\n.color5 {\n  background-color: var(--gnome-brown-3, #986a44);\n}\n.color6 {\n  background-color: var(--gnome-blue-5, #1a5fb4);\n}\n.color7 {\n  background-color: var(--gnome-green-5, #26a269);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: var(--gnome-dark-2, #5e5c64);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .segment {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,16 +1,16 @@
 var e = {
-	track: "_track_1ahtp_3",
-	segment: "_segment_1ahtp_16",
-	dimmed: "_dimmed_1ahtp_24",
-	highlighted: "_highlighted_1ahtp_25",
-	color0: "_color0_1ahtp_29",
-	color1: "_color1_1ahtp_30",
-	color2: "_color2_1ahtp_31",
-	color3: "_color3_1ahtp_32",
-	color4: "_color4_1ahtp_33",
-	color5: "_color5_1ahtp_34",
-	color6: "_color6_1ahtp_35",
-	color7: "_color7_1ahtp_36"
+	track: "_track_4b608_3",
+	segment: "_segment_4b608_16",
+	dimmed: "_dimmed_4b608_24",
+	highlighted: "_highlighted_4b608_27",
+	color0: "_color0_4b608_33",
+	color1: "_color1_4b608_36",
+	color2: "_color2_4b608_39",
+	color3: "_color3_4b608_42",
+	color4: "_color4_4b608_45",
+	color5: "_color5_4b608_48",
+	color6: "_color6_4b608_51",
+	color7: "_color7_4b608_54"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedBar.module.css.js","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.module.css"],"sourcesContent":["/* ─── Track ─────────────────────────────────────────────────────────────────── */\n\n.track {\n  display: flex;\n  width: 100%;\n  height: 8px;\n  border-radius: var(--gnome-radius-pill);\n  overflow: hidden;\n  gap: 2px;\n  /* Track color is visible in the 2 px gaps between segments */\n  background-color: var(--gnome-light-3, #deddda);\n}\n\n/* ─── Segment ───────────────────────────────────────────────────────────────── */\n\n.segment {\n  height: 100%;\n  cursor: default;\n  transition:\n    opacity var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease),\n    filter  var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease);\n}\n\n.dimmed      { opacity: 0.35; }\n.highlighted { filter: brightness(1.15); }\n\n/* ─── Default palette (GNOME tokens, cycling across color families) ─────────── */\n\n.color0 { background-color: var(--gnome-blue-3,   #3584e4); }\n.color1 { background-color: var(--gnome-green-3,  #33d17a); }\n.color2 { background-color: var(--gnome-purple-3, #9141ac); }\n.color3 { background-color: var(--gnome-orange-3, #ff7800); }\n.color4 { background-color: var(--gnome-red-3,    #e01b24); }\n.color5 { background-color: var(--gnome-brown-3,  #986a44); }\n.color6 { background-color: var(--gnome-blue-5,   #1a5fb4); }\n.color7 { background-color: var(--gnome-green-5,  #26a269); }\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: var(--gnome-dark-2, #5e5c64);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .segment {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SegmentedBar.module.css.js","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.module.css"],"sourcesContent":["/* ─── Track ─────────────────────────────────────────────────────────────────── */\n\n.track {\n  display: flex;\n  width: 100%;\n  height: 8px;\n  border-radius: var(--gnome-radius-pill);\n  overflow: hidden;\n  gap: 2px;\n  /* Track color is visible in the 2 px gaps between segments */\n  background-color: var(--gnome-light-3, #deddda);\n}\n\n/* ─── Segment ───────────────────────────────────────────────────────────────── */\n\n.segment {\n  height: 100%;\n  cursor: default;\n  transition:\n    opacity var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease),\n    filter var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease);\n}\n\n.dimmed {\n  opacity: 0.35;\n}\n.highlighted {\n  filter: brightness(1.15);\n}\n\n/* ─── Default palette (GNOME tokens, cycling across color families) ─────────── */\n\n.color0 {\n  background-color: var(--gnome-blue-3, #3584e4);\n}\n.color1 {\n  background-color: var(--gnome-green-3, #33d17a);\n}\n.color2 {\n  background-color: var(--gnome-purple-3, #9141ac);\n}\n.color3 {\n  background-color: var(--gnome-orange-3, #ff7800);\n}\n.color4 {\n  background-color: var(--gnome-red-3, #e01b24);\n}\n.color5 {\n  background-color: var(--gnome-brown-3, #986a44);\n}\n.color6 {\n  background-color: var(--gnome-blue-5, #1a5fb4);\n}\n.color7 {\n  background-color: var(--gnome-green-5, #26a269);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: var(--gnome-dark-2, #5e5c64);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .segment {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { SegmentedBar } from './SegmentedBar';
 export type { SegmentedBarProps, SegmentedBarSegment } from './SegmentedBar';
+export { SegmentedBar } from './SegmentedBar';

package/dist/components/SegmentedBar.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./SegmentedBar/SegmentedBar.cjs`);exports.SegmentedBar=e.SegmentedBar;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./SegmentedBar/SegmentedBar.cjs");exports.SegmentedBar=e.SegmentedBar;

package/dist/components/Separator/Separator.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Separator.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({orientation:n=`horizontal`,className:r,...i}){let a=[e.default.separator,n===`vertical`?e.default.vertical:e.default.horizontal,r].filter(Boolean).join(` `);return n===`vertical`?(0,t.jsx)(`div`,{role:`separator`,"aria-orientation":`vertical`,className:a,...i}):(0,t.jsx)(`hr`,{className:a,...i})}exports.Separator=n;
+const e=require("./Separator.module.css.cjs");let t=require("react/jsx-runtime");var n=({orientation:n=`horizontal`,className:r,...i})=>{let a=[e.default.separator,n===`vertical`?e.default.vertical:e.default.horizontal,r].filter(Boolean).join(` `);return n===`vertical`?(0,t.jsx)(`div`,{role:`separator`,"aria-orientation":`vertical`,className:a,...i}):(0,t.jsx)(`hr`,{className:a,...i})};exports.Separator=n;
 //# sourceMappingURL=Separator.cjs.map

package/dist/components/Separator/Separator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.cjs","names":[],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport styles from \"./Separator.module.css\";\n\nexport type SeparatorOrientation = \"horizontal\" | \"vertical\";\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {\n  /** Direction of the dividing line. Defaults to `\"horizontal\"`. */\n  orientation?: SeparatorOrientation;\n}\n\n/**\n * Thin dividing line that separates groups of content.\n *\n * Renders as `<hr>` (horizontal) or a `<div role=\"separator\">` (vertical).\n * Color is driven entirely by design tokens and adapts to dark mode automatically.\n *\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function Separator({\n  orientation = \"horizontal\",\n  className,\n  ...props\n}: SeparatorProps) {\n  const classes = [\n    styles.separator,\n    orientation === \"vertical\" ? styles.vertical : styles.horizontal,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  if (orientation === \"vertical\") {\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={classes}\n        {...(props as HTMLAttributes<HTMLDivElement>)}\n      />\n    );\n  }\n\n  return <hr className={classes} {...props} />;\n}\n"],"mappings":"iFAkBA,SAAgB,EAAU,CACxB,cAAc,aACd,YACA,GAAG,GACc,CACjB,IAAM,EAAU,CACd,EAAA,QAAO,UACP,IAAgB,WAAa,EAAA,QAAO,SAAW,EAAA,QAAO,WACtD,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAaZ,OAXI,IAAgB,YAEhB,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,YACL,mBAAiB,WACjB,UAAW,EACX,GAAK,EACL,CAAA,EAIC,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAS,GAAI,EAAS,CAAA"}
+{"version":3,"file":"Separator.cjs","names":[],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './Separator.module.css';\n\nexport type SeparatorOrientation = 'horizontal' | 'vertical';\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {\n  /** Direction of the dividing line. Defaults to `\"horizontal\"`. */\n  orientation?: SeparatorOrientation;\n}\n\n/**\n * Thin dividing line that separates groups of content.\n *\n * Renders as `<hr>` (horizontal) or a `<div role=\"separator\">` (vertical).\n * Color is driven entirely by design tokens and adapts to dark mode automatically.\n *\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport const Separator = ({ orientation = 'horizontal', className, ...props }: SeparatorProps) => {\n  const classes = [\n    styles.separator,\n    orientation === 'vertical' ? styles.vertical : styles.horizontal,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  if (orientation === 'vertical') {\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={classes}\n        {...(props as HTMLAttributes<HTMLDivElement>)}\n      />\n    );\n  }\n\n  return <hr className={classes} {...props} />;\n};\n"],"mappings":"iFAmBA,IAAa,GAAa,CAAE,cAAc,aAAc,YAAW,GAAG,KAA4B,CAChG,IAAM,EAAU,CACd,EAAA,QAAO,UACP,IAAgB,WAAa,EAAA,QAAO,SAAW,EAAA,QAAO,WACtD,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EAaX,OAXI,IAAgB,YAEhB,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,YACL,mBAAiB,WACjB,UAAW,EACX,GAAK,CACN,CAAA,GAIE,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAS,GAAI,CAAQ,CAAA,CAC7C"}

package/dist/components/Separator/Separator.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export type SeparatorOrientation = "horizontal" | "vertical";
+export type SeparatorOrientation = 'horizontal' | 'vertical';
 export interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {
     /** Direction of the dividing line. Defaults to `"horizontal"`. */
     orientation?: SeparatorOrientation;
@@ -12,4 +12,4 @@ export interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {
  *
  * @see https://developer.gnome.org/hig/patterns/containers.html
  */
-export declare function Separator({ orientation, className, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
+export declare const Separator: ({ orientation, className, ...props }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Separator/Separator.js

@@ -1,7 +1,7 @@
 import e from "./Separator.module.css.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/Separator/Separator.tsx
-function n({ orientation: n = "horizontal", className: r, ...i }) {
+var n = ({ orientation: n = "horizontal", className: r, ...i }) => {
 	let a = [
 		e.separator,
 		n === "vertical" ? e.vertical : e.horizontal,
@@ -16,7 +16,7 @@ function n({ orientation: n = "horizontal", className: r, ...i }) {
 		className: a,
 		...i
 	});
-}
+};
 //#endregion
 export { n as Separator };
 

package/dist/components/Separator/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","names":[],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport styles from \"./Separator.module.css\";\n\nexport type SeparatorOrientation = \"horizontal\" | \"vertical\";\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {\n  /** Direction of the dividing line. Defaults to `\"horizontal\"`. */\n  orientation?: SeparatorOrientation;\n}\n\n/**\n * Thin dividing line that separates groups of content.\n *\n * Renders as `<hr>` (horizontal) or a `<div role=\"separator\">` (vertical).\n * Color is driven entirely by design tokens and adapts to dark mode automatically.\n *\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function Separator({\n  orientation = \"horizontal\",\n  className,\n  ...props\n}: SeparatorProps) {\n  const classes = [\n    styles.separator,\n    orientation === \"vertical\" ? styles.vertical : styles.horizontal,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  if (orientation === \"vertical\") {\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={classes}\n        {...(props as HTMLAttributes<HTMLDivElement>)}\n      />\n    );\n  }\n\n  return <hr className={classes} {...props} />;\n}\n"],"mappings":";;;AAkBA,SAAgB,EAAU,EACxB,iBAAc,cACd,cACA,GAAG,KACc;CACjB,IAAM,IAAU;EACd,EAAO;EACP,MAAgB,aAAa,EAAO,WAAW,EAAO;EACtD;EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;AAaZ,QAXI,MAAgB,aAEhB,kBAAC,OAAD;EACE,MAAK;EACL,oBAAiB;EACjB,WAAW;EACX,GAAK;EACL,CAAA,GAIC,kBAAC,MAAD;EAAI,WAAW;EAAS,GAAI;EAAS,CAAA"}
+{"version":3,"file":"Separator.js","names":[],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './Separator.module.css';\n\nexport type SeparatorOrientation = 'horizontal' | 'vertical';\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {\n  /** Direction of the dividing line. Defaults to `\"horizontal\"`. */\n  orientation?: SeparatorOrientation;\n}\n\n/**\n * Thin dividing line that separates groups of content.\n *\n * Renders as `<hr>` (horizontal) or a `<div role=\"separator\">` (vertical).\n * Color is driven entirely by design tokens and adapts to dark mode automatically.\n *\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport const Separator = ({ orientation = 'horizontal', className, ...props }: SeparatorProps) => {\n  const classes = [\n    styles.separator,\n    orientation === 'vertical' ? styles.vertical : styles.horizontal,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  if (orientation === 'vertical') {\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={classes}\n        {...(props as HTMLAttributes<HTMLDivElement>)}\n      />\n    );\n  }\n\n  return <hr className={classes} {...props} />;\n};\n"],"mappings":";;;AAmBA,IAAa,KAAa,EAAE,iBAAc,cAAc,cAAW,GAAG,QAA4B;CAChG,IAAM,IAAU;EACd,EAAO;EACP,MAAgB,aAAa,EAAO,WAAW,EAAO;EACtD;CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;CAaX,OAXI,MAAgB,aAEhB,kBAAC,OAAD;EACE,MAAK;EACL,oBAAiB;EACjB,WAAW;EACX,GAAK;CACN,CAAA,IAIE,kBAAC,MAAD;EAAI,WAAW;EAAS,GAAI;CAAQ,CAAA;AAC7C"}

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

@@ -1,2 +1,2 @@
+export type { SeparatorOrientation, SeparatorProps } from './Separator';
 export { Separator } from './Separator';
-export type { SeparatorProps, SeparatorOrientation } from './Separator';

package/dist/components/Separator.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Separator/Separator.cjs`);exports.Separator=e.Separator;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./Separator/Separator.cjs");exports.Separator=e.Separator;

package/dist/components/ShortcutLabel/ShortcutLabel.cjs

@@ -1,2 +1,2 @@
-const e=require(`./ShortcutLabel.module.css.cjs`);let t=require(`react/jsx-runtime`);var n={ctrl:`⌃`,control:`⌃`,shift:`⇧`,alt:`⌥`,option:`⌥`,super:`⊞`,win:`⊞`,cmd:`⌘`,command:`⌘`,meta:`⌘`,up:`↑`,down:`↓`,left:`←`,right:`→`,enter:`↵`,return:`↵`,backspace:`⌫`,delete:`⌦`,escape:`⎋`,esc:`⎋`,tab:`⇥`,space:`␣`,pageup:`⇞`,pagedown:`⇟`,home:`⇱`,end:`⇲`};function r({shortcut:r,symbols:i=!0,className:a,...o}){let s=r.split(`+`).map(e=>e.trim()).filter(Boolean);return(0,t.jsx)(`span`,{className:[e.default.label,a].filter(Boolean).join(` `),"aria-label":r,...o,children:s.map((r,a)=>{let o=i?n[r.toLowerCase()]??r:r;return(0,t.jsx)(`kbd`,{className:e.default.key,children:o},a)})})}exports.ShortcutLabel=r;
+const e=require("./ShortcutLabel.module.css.cjs");let t=require("react/jsx-runtime");var n={ctrl:`⌃`,control:`⌃`,shift:`⇧`,alt:`⌥`,option:`⌥`,super:`⊞`,win:`⊞`,cmd:`⌘`,command:`⌘`,meta:`⌘`,up:`↑`,down:`↓`,left:`←`,right:`→`,enter:`↵`,return:`↵`,backspace:`⌫`,delete:`⌦`,escape:`⎋`,esc:`⎋`,tab:`⇥`,space:`␣`,pageup:`⇞`,pagedown:`⇟`,home:`⇱`,end:`⇲`},r=({shortcut:r,symbols:i=!0,className:a,...o})=>{let s=r.split(`+`).map(e=>e.trim()).filter(Boolean);return(0,t.jsx)(`span`,{className:[e.default.label,a].filter(Boolean).join(` `),"aria-label":r,...o,children:s.map((r,a)=>{let o=i?n[r.toLowerCase()]??r:r;return(0,t.jsx)(`kbd`,{className:e.default.key,children:o},a)})})};exports.ShortcutLabel=r;
 //# sourceMappingURL=ShortcutLabel.cjs.map