@gnome-ui/react 1.44.0 → 1.45.1

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

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

package/dist/components/Sidebar/SidebarSection.cjs

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

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

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

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

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

package/dist/components/Sidebar/SidebarSection.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarSection.js","names":[],"sources":["../../../src/components/Sidebar/SidebarSection.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useImperativeHandle,\n  useState,\n  useContext,\n  useId,\n  isValidElement,\n  Children,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { PanDown, PanUp } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { useSidebarCollapsed, SidebarFilterContext } from \"./Sidebar\";\nimport styles from \"./Sidebar.module.css\";\n\n// ─── Filter helper ────────────────────────────────────────────────────────────\n\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) return;\n    const props = child.props as Record<string, unknown>;\n    if (typeof props.label === \"string\") {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) count++;\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n  return count;\n}\n\n// ─── Handle ───────────────────────────────────────────────────────────────────\n\nexport interface SidebarSectionHandle {\n  expand: () => void;\n  collapse: () => void;\n  toggle: () => void;\n}\n\n// ─── Props ────────────────────────────────────────────────────────────────────\n\nexport interface SidebarSectionProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Section heading. Rendered in small caps above the items.\n   * Omit for an untitled section (e.g. the first group in a sidebar).\n   */\n  title?: string;\n  /** Icon rendered left of the title. Same type as `SidebarItem.icon`. */\n  icon?: IconDefinition;\n  /** Whether the section body can be toggled open/closed. Defaults to `false`. */\n  collapsible?: boolean;\n  /** Initial open state when `collapsible` is true. Defaults to `true`. */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when open state changes. */\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Named group of `SidebarItem` entries inside a `Sidebar`.\n *\n * Sections are separated by a thin divider. The title and icon are optional.\n * When `collapsible` is true the body can be toggled via the header button or\n * imperatively via a `ref` (`expand`, `collapse`, `toggle`).\n *\n * In rail (icon-only) mode the body is always visible regardless of open state.\n * When a sidebar filter is active and no children match, the section is hidden.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport const SidebarSection = forwardRef<SidebarSectionHandle, SidebarSectionProps>(\n  function SidebarSection(\n    {\n      title,\n      icon,\n      collapsible = false,\n      defaultOpen = true,\n      open: controlledOpen,\n      onOpenChange,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n    const isControlled = controlledOpen !== undefined;\n    const open = isControlled ? controlledOpen : internalOpen;\n\n    const sidebarCollapsed = useSidebarCollapsed();\n    const filterValue = useContext(SidebarFilterContext);\n    const bodyId = useId();\n\n    const setAndNotify = (next: boolean) => {\n      if (!isControlled) setInternalOpen(next);\n      onOpenChange?.(next);\n    };\n\n    useImperativeHandle(ref, () => ({\n      expand: () => setAndNotify(true),\n      collapse: () => setAndNotify(false),\n      toggle: () => setAndNotify(!open),\n    }));\n\n    // Hide section entirely when filter is active and no children match\n    const hasVisibleChildren =\n      filterValue.length === 0 || countMatchingItems(children, filterValue) > 0;\n\n    if (!hasVisibleChildren) return null;\n\n    // In rail mode the body is always visible\n    const isOpen = sidebarCollapsed ? true : open;\n\n    const showHeader = !!(title || icon || (collapsible && !sidebarCollapsed));\n\n    return (\n      <section\n        className={[styles.section, className].filter(Boolean).join(\" \")}\n        {...props}\n      >\n        {showHeader && (\n          collapsible && !sidebarCollapsed ? (\n            <button\n              type=\"button\"\n              className={styles.sectionHeader}\n              onClick={() => setAndNotify(!open)}\n              aria-expanded={open}\n              aria-controls={bodyId}\n            >\n              {icon && (\n                <span className={styles.sectionHeaderIcon}>\n                  <Icon icon={icon} size=\"sm\" aria-hidden />\n                </span>\n              )}\n              {title && <span className={styles.sectionTitle}>{title}</span>}\n              <span className={styles.sectionChevron}>\n                <Icon icon={open ? PanUp : PanDown} size=\"sm\" aria-hidden />\n              </span>\n            </button>\n          ) : (\n            <div className={styles.sectionHeader}>\n              {icon && (\n                <span className={styles.sectionHeaderIcon}>\n                  <Icon icon={icon} size=\"sm\" aria-hidden />\n                </span>\n              )}\n              {title && <span className={styles.sectionTitle}>{title}</span>}\n            </div>\n          )\n        )}\n\n        <div\n          id={bodyId}\n          className={[\n            styles.sectionBody,\n            !isOpen ? styles.sectionBodyCollapsed : null,\n          ]\n            .filter(Boolean)\n            .join(\" \")}\n          aria-hidden={!isOpen || undefined}\n        >\n          <div className={styles.sectionBodyInner}>\n            <ul role=\"list\" className={styles.list}>\n              {children}\n            </ul>\n          </div>\n        </div>\n      </section>\n    );\n  },\n);\n"],"mappings":";;;;;;;AAmBA,SAAS,EAAmB,GAAqB,GAAwB;CACvE,IAAI,IAAQ;AAUZ,QATA,EAAS,QAAQ,IAAW,MAAU;AACpC,MAAI,CAAC,EAAe,EAAM,CAAE;EAC5B,IAAM,IAAQ,EAAM;AACpB,EAAI,OAAO,EAAM,SAAU,WACrB,EAAM,MAAM,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,IAAE,MACrD,EAAM,aACf,KAAS,EAAmB,EAAM,UAAuB,EAAO;GAElE,EACK;;AA8CT,IAAa,IAAiB,EAC5B,SACE,EACE,UACA,SACA,iBAAc,IACd,iBAAc,IACd,MAAM,GACN,iBACA,aACA,cACA,GAAG,KAEL,GACA;CACA,IAAM,CAAC,GAAc,KAAmB,EAAS,EAAY,EACvD,IAAe,MAAmB,KAAA,GAClC,IAAO,IAAe,IAAiB,GAEvC,IAAmB,GAAqB,EACxC,IAAc,EAAW,EAAqB,EAC9C,IAAS,GAAO,EAEhB,KAAgB,MAAkB;AAEtC,EADK,KAAc,EAAgB,EAAK,EACxC,IAAe,EAAK;;AAatB,KAVA,EAAoB,UAAY;EAC9B,cAAc,EAAa,GAAK;EAChC,gBAAgB,EAAa,GAAM;EACnC,cAAc,EAAa,CAAC,EAAK;EAClC,EAAE,EAMC,EAFF,EAAY,WAAW,KAAK,EAAmB,GAAU,EAAY,GAAG,GAEjD,QAAO;CAGhC,IAAM,IAAS,IAAmB,KAAO,GAEnC,IAAa,CAAC,EAAE,KAAS,KAAS,KAAe,CAAC;AAExD,QACE,kBAAC,WAAD;EACE,WAAW,CAAC,EAAO,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAChE,GAAI;YAFN,CAIG,MACC,KAAe,CAAC,IACd,kBAAC,UAAD;GACE,MAAK;GACL,WAAW,EAAO;GAClB,eAAe,EAAa,CAAC,EAAK;GAClC,iBAAe;GACf,iBAAe;aALjB;IAOG,KACC,kBAAC,QAAD;KAAM,WAAW,EAAO;eACtB,kBAAC,GAAD;MAAY;MAAM,MAAK;MAAK,eAAA;MAAc,CAAA;KACrC,CAAA;IAER,KAAS,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAe;KAAa,CAAA;IAC9D,kBAAC,QAAD;KAAM,WAAW,EAAO;eACtB,kBAAC,GAAD;MAAM,MAAM,IAAO,IAAQ;MAAS,MAAK;MAAK,eAAA;MAAc,CAAA;KACvD,CAAA;IACA;OAET,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAO;cACtB,kBAAC,GAAD;KAAY;KAAM,MAAK;KAAK,eAAA;KAAc,CAAA;IACrC,CAAA,EAER,KAAS,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAe;IAAa,CAAA,CAC1D;OAIV,kBAAC,OAAD;GACE,IAAI;GACJ,WAAW,CACT,EAAO,aACN,IAAuC,OAA9B,EAAO,qBAClB,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;GACZ,eAAa,CAAC,KAAU,KAAA;aAExB,kBAAC,OAAD;IAAK,WAAW,EAAO;cACrB,kBAAC,MAAD;KAAI,MAAK;KAAO,WAAW,EAAO;KAC/B;KACE,CAAA;IACD,CAAA;GACF,CAAA,CACE;;EAGf"}
+{"version":3,"file":"SidebarSection.js","names":[],"sources":["../../../src/components/Sidebar/SidebarSection.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport { PanDown, PanUp } from '@gnome-ui/icons';\nimport {\n  Children,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useContext,\n  useId,\n  useImperativeHandle,\n  useState,\n} from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { SidebarFilterContext, useSidebarCollapsed } from './Sidebar';\nimport styles from './Sidebar.module.css';\n\n// ─── Filter helper ────────────────────────────────────────────────────────────\n\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const props = child.props as Record<string, unknown>;\n\n    if (typeof props.label === 'string') {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) {\n        count++;\n      }\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n\n  return count;\n}\n\n// ─── Handle ───────────────────────────────────────────────────────────────────\n\nexport interface SidebarSectionHandle {\n  expand: () => void;\n  collapse: () => void;\n  toggle: () => void;\n}\n\n// ─── Props ────────────────────────────────────────────────────────────────────\n\nexport interface SidebarSectionProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Section heading. Rendered in small caps above the items.\n   * Omit for an untitled section (e.g. the first group in a sidebar).\n   */\n  title?: string;\n  /** Icon rendered left of the title. Same type as `SidebarItem.icon`. */\n  icon?: IconDefinition;\n  /** Whether the section body can be toggled open/closed. Defaults to `false`. */\n  collapsible?: boolean;\n  /** Initial open state when `collapsible` is true. Defaults to `true`. */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when open state changes. */\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Named group of `SidebarItem` entries inside a `Sidebar`.\n *\n * Sections are separated by a thin divider. The title and icon are optional.\n * When `collapsible` is true the body can be toggled via the header button or\n * imperatively via a `ref` (`expand`, `collapse`, `toggle`).\n *\n * In rail (icon-only) mode the body is always visible regardless of open state.\n * When a sidebar filter is active and no children match, the section is hidden.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport const SidebarSection = forwardRef<SidebarSectionHandle, SidebarSectionProps>(\n  function SidebarSection(\n    {\n      title,\n      icon,\n      collapsible = false,\n      defaultOpen = true,\n      open: controlledOpen,\n      onOpenChange,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n    const isControlled = controlledOpen !== undefined;\n    const open = isControlled ? controlledOpen : internalOpen;\n\n    const sidebarCollapsed = useSidebarCollapsed();\n    const filterValue = useContext(SidebarFilterContext);\n    const bodyId = useId();\n\n    const setAndNotify = (next: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(next);\n      }\n\n      onOpenChange?.(next);\n    };\n\n    useImperativeHandle(ref, () => ({\n      expand: () => setAndNotify(true),\n      collapse: () => setAndNotify(false),\n      toggle: () => setAndNotify(!open),\n    }));\n\n    // Hide section entirely when filter is active and no children match\n    const hasVisibleChildren =\n      filterValue.length === 0 || countMatchingItems(children, filterValue) > 0;\n\n    if (!hasVisibleChildren) {\n      return null;\n    }\n\n    // In rail mode the body is always visible\n    const isOpen = sidebarCollapsed ? true : open;\n\n    const showHeader = !!(title || icon || (collapsible && !sidebarCollapsed));\n\n    return (\n      <section className={[styles.section, className].filter(Boolean).join(' ')} {...props}>\n        {showHeader &&\n          (collapsible && !sidebarCollapsed ? (\n            <button\n              type=\"button\"\n              className={styles.sectionHeader}\n              onClick={() => setAndNotify(!open)}\n              aria-expanded={open}\n              aria-controls={bodyId}\n            >\n              {icon && (\n                <span className={styles.sectionHeaderIcon}>\n                  <Icon icon={icon} size=\"sm\" aria-hidden />\n                </span>\n              )}\n              {title && <span className={styles.sectionTitle}>{title}</span>}\n              <span className={styles.sectionChevron}>\n                <Icon icon={open ? PanUp : PanDown} size=\"sm\" aria-hidden />\n              </span>\n            </button>\n          ) : (\n            <div className={styles.sectionHeader}>\n              {icon && (\n                <span className={styles.sectionHeaderIcon}>\n                  <Icon icon={icon} size=\"sm\" aria-hidden />\n                </span>\n              )}\n              {title && <span className={styles.sectionTitle}>{title}</span>}\n            </div>\n          ))}\n\n        <div\n          id={bodyId}\n          className={[styles.sectionBody, !isOpen ? styles.sectionBodyCollapsed : null]\n            .filter(Boolean)\n            .join(' ')}\n          aria-hidden={!isOpen || undefined}\n        >\n          <div className={styles.sectionBodyInner}>\n            <ul className={styles.list}>{children}</ul>\n          </div>\n        </div>\n      </section>\n    );\n  },\n);\n"],"mappings":";;;;;;;AAqBA,SAAS,EAAmB,GAAqB,GAAwB;CACvE,IAAI,IAAQ;AAiBZ,QAhBA,EAAS,QAAQ,IAAW,MAAU;AACpC,MAAI,CAAC,EAAe,EAAM,CACxB;EAGF,IAAM,IAAQ,EAAM;AAEpB,EAAI,OAAO,EAAM,SAAU,WACrB,EAAM,MAAM,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,IAC1D,MAEO,EAAM,aACf,KAAS,EAAmB,EAAM,UAAuB,EAAO;GAElE,EAEK;;AA8CT,IAAa,IAAiB,EAC5B,SACE,EACE,UACA,SACA,iBAAc,IACd,iBAAc,IACd,MAAM,GACN,iBACA,aACA,cACA,GAAG,KAEL,GACA;CACA,IAAM,CAAC,GAAc,KAAmB,EAAS,EAAY,EACvD,IAAe,MAAmB,KAAA,GAClC,IAAO,IAAe,IAAiB,GAEvC,IAAmB,GAAqB,EACxC,IAAc,EAAW,EAAqB,EAC9C,IAAS,GAAO,EAEhB,KAAgB,MAAkB;AAKtC,EAJK,KACH,EAAgB,EAAK,EAGvB,IAAe,EAAK;;AAatB,KAVA,EAAoB,UAAY;EAC9B,cAAc,EAAa,GAAK;EAChC,gBAAgB,EAAa,GAAM;EACnC,cAAc,EAAa,CAAC,EAAK;EAClC,EAAE,EAMC,EAFF,EAAY,WAAW,KAAK,EAAmB,GAAU,EAAY,GAAG,GAGxE,QAAO;CAIT,IAAM,IAAS,IAAmB,KAAO,GAEnC,IAAa,CAAC,EAAE,KAAS,KAAS,KAAe,CAAC;AAExD,QACE,kBAAC,WAAD;EAAS,WAAW,CAAC,EAAO,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAE,GAAI;YAA/E,CACG,MACE,KAAe,CAAC,IACf,kBAAC,UAAD;GACE,MAAK;GACL,WAAW,EAAO;GAClB,eAAe,EAAa,CAAC,EAAK;GAClC,iBAAe;GACf,iBAAe;aALjB;IAOG,KACC,kBAAC,QAAD;KAAM,WAAW,EAAO;eACtB,kBAAC,GAAD;MAAY;MAAM,MAAK;MAAK,eAAA;MAAc,CAAA;KACrC,CAAA;IAER,KAAS,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAe;KAAa,CAAA;IAC9D,kBAAC,QAAD;KAAM,WAAW,EAAO;eACtB,kBAAC,GAAD;MAAM,MAAM,IAAO,IAAQ;MAAS,MAAK;MAAK,eAAA;MAAc,CAAA;KACvD,CAAA;IACA;OAET,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAO;cACtB,kBAAC,GAAD;KAAY;KAAM,MAAK;KAAK,eAAA;KAAc,CAAA;IACrC,CAAA,EAER,KAAS,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAe;IAAa,CAAA,CAC1D;OAGV,kBAAC,OAAD;GACE,IAAI;GACJ,WAAW,CAAC,EAAO,aAAc,IAAuC,OAA9B,EAAO,qBAA4B,CAC1E,OAAO,QAAQ,CACf,KAAK,IAAI;GACZ,eAAa,CAAC,KAAU,KAAA;aAExB,kBAAC,OAAD;IAAK,WAAW,EAAO;cACrB,kBAAC,MAAD;KAAI,WAAW,EAAO;KAAO;KAAc,CAAA;IACvC,CAAA;GACF,CAAA,CACE;;EAGf"}

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

@@ -1,6 +1,6 @@
-export { Sidebar, SidebarCollapsedContext, useSidebarCollapsed } from './Sidebar';
 export type { SidebarProps } from './Sidebar';
-export { SidebarSection } from './SidebarSection';
-export type { SidebarSectionProps, SidebarSectionHandle } from './SidebarSection';
-export { SidebarItem } from './SidebarItem';
+export { Sidebar, SidebarCollapsedContext, useSidebarCollapsed } from './Sidebar';
 export type { SidebarItemProps, SidebarMenuEntry } from './SidebarItem';
+export { SidebarItem } from './SidebarItem';
+export type { SidebarSectionHandle, SidebarSectionProps } from './SidebarSection';
+export { SidebarSection } from './SidebarSection';

package/dist/components/Sidebar.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Sidebar/Sidebar.cjs`),t=require(`./Sidebar/SidebarSection.cjs`),n=require(`./Sidebar/SidebarItem.cjs`);exports.Sidebar=e.Sidebar,exports.SidebarCollapsedContext=e.SidebarCollapsedContext,exports.SidebarItem=n.SidebarItem,exports.SidebarSection=t.SidebarSection,exports.useSidebarCollapsed=e.useSidebarCollapsed;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Sidebar/Sidebar.cjs`),t=require(`./Sidebar/SidebarItem.cjs`),n=require(`./Sidebar/SidebarSection.cjs`);exports.Sidebar=e.Sidebar,exports.SidebarCollapsedContext=e.SidebarCollapsedContext,exports.SidebarItem=t.SidebarItem,exports.SidebarSection=n.SidebarSection,exports.useSidebarCollapsed=e.useSidebarCollapsed;

package/dist/components/Sidebar.js

@@ -1,4 +1,4 @@
 import { Sidebar as e, SidebarCollapsedContext as t, useSidebarCollapsed as n } from "./Sidebar/Sidebar.js";
-import { SidebarSection as r } from "./Sidebar/SidebarSection.js";
-import { SidebarItem as i } from "./Sidebar/SidebarItem.js";
-export { e as Sidebar, t as SidebarCollapsedContext, i as SidebarItem, r as SidebarSection, n as useSidebarCollapsed };
+import { SidebarItem as r } from "./Sidebar/SidebarItem.js";
+import { SidebarSection as i } from "./Sidebar/SidebarSection.js";
+export { e as Sidebar, t as SidebarCollapsedContext, r as SidebarItem, i as SidebarSection, n as useSidebarCollapsed };

package/dist/components/Skeleton/Skeleton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.cjs","names":[],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes } from \"react\";\nimport styles from \"./Skeleton.module.css\";\n\nexport type SkeletonVariant = \"rect\" | \"circle\" | \"text\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  /** Shape of the placeholder. Defaults to `\"rect\"`. */\n  variant?: SkeletonVariant;\n  /** Width for rectangular placeholders. Defaults to `\"100%\"`. */\n  width?: number | string;\n  /** Height for rectangular placeholders. Defaults to `16`. */\n  height?: number | string;\n  /** Diameter for circular placeholders. Defaults to `40`. */\n  size?: number;\n  /** Number of rows for text placeholders. Defaults to `3`. */\n  lines?: number;\n  /**\n   * Enables the shimmer animation.\n   * Respects `prefers-reduced-motion`. Defaults to `true`.\n   */\n  animated?: boolean;\n}\n\nfunction toCssSize(value: number | string) {\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\n/**\n * Loading placeholder for content-shaped skeleton screens.\n *\n * GNOME HIG recommends `Spinner` or `ProgressBar` for loading states; this is a\n * pragmatic web-style extension for layouts that benefit from placeholder shape.\n */\nexport function Skeleton({\n  variant = \"rect\",\n  width = \"100%\",\n  height = 16,\n  size = 40,\n  lines = 3,\n  animated = true,\n  className,\n  style,\n  ...props\n}: SkeletonProps) {\n  const classes = [\n    styles.skeleton,\n    styles[variant],\n    animated ? styles.animated : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  if (variant === \"text\") {\n    const lineCount = Math.max(1, Math.floor(lines));\n\n    return (\n      <div\n        aria-hidden=\"true\"\n        className={classes}\n        style={style}\n        {...props}\n      >\n        {Array.from({ length: lineCount }, (_, index) => (\n          <div\n            key={index}\n            className={styles.line}\n            style={\n              index === lineCount - 1\n                ? ({ \"--skeleton-line-width\": \"60%\" } as CSSProperties)\n                : undefined\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n\n  const shapeStyle: CSSProperties =\n    variant === \"circle\"\n      ? { width: `${size}px`, height: `${size}px` }\n      : { width: toCssSize(width), height: toCssSize(height) };\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={classes}\n      style={{ ...shapeStyle, ...style }}\n      {...props}\n    />\n  );\n}\n"],"mappings":"gFAuBA,SAAS,EAAU,EAAwB,CACzC,OAAO,OAAO,GAAU,SAAW,GAAG,EAAM,IAAM,EASpD,SAAgB,EAAS,CACvB,UAAU,OACV,QAAQ,OACR,SAAS,GACT,OAAO,GACP,QAAQ,EACR,WAAW,GACX,YACA,QACA,GAAG,GACa,CAChB,IAAM,EAAU,CACd,EAAA,QAAO,SACP,EAAA,QAAO,GACP,EAAW,EAAA,QAAO,SAAW,KAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAEZ,GAAI,IAAY,OAAQ,CACtB,IAAM,EAAY,KAAK,IAAI,EAAG,KAAK,MAAM,EAAM,CAAC,CAEhD,OACE,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,OACZ,UAAW,EACJ,QACP,GAAI,WAEH,MAAM,KAAK,CAAE,OAAQ,EAAW,EAAG,EAAG,KACrC,EAAA,EAAA,KAAC,MAAD,CAEE,UAAW,EAAA,QAAO,KAClB,MACE,IAAU,EAAY,EACjB,CAAE,wBAAyB,MAAO,CACnC,IAAA,GAEN,CAPK,EAOL,CACF,CACE,CAAA,CAIV,IAAM,EACJ,IAAY,SACR,CAAE,MAAO,GAAG,EAAK,IAAK,OAAQ,GAAG,EAAK,IAAK,CAC3C,CAAE,MAAO,EAAU,EAAM,CAAE,OAAQ,EAAU,EAAO,CAAE,CAE5D,OACE,EAAA,EAAA,KAAC,MAAD,CACE,cAAY,OACZ,UAAW,EACX,MAAO,CAAE,GAAG,EAAY,GAAG,EAAO,CAClC,GAAI,EACJ,CAAA"}
+{"version":3,"file":"Skeleton.cjs","names":[],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\n\nimport styles from './Skeleton.module.css';\n\nexport type SkeletonVariant = 'rect' | 'circle' | 'text';\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  /** Shape of the placeholder. Defaults to `\"rect\"`. */\n  variant?: SkeletonVariant;\n  /** Width for rectangular placeholders. Defaults to `\"100%\"`. */\n  width?: number | string;\n  /** Height for rectangular placeholders. Defaults to `16`. */\n  height?: number | string;\n  /** Diameter for circular placeholders. Defaults to `40`. */\n  size?: number;\n  /** Number of rows for text placeholders. Defaults to `3`. */\n  lines?: number;\n  /**\n   * Enables the shimmer animation.\n   * Respects `prefers-reduced-motion`. Defaults to `true`.\n   */\n  animated?: boolean;\n}\n\nfunction toCssSize(value: number | string) {\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\n/**\n * Loading placeholder for content-shaped skeleton screens.\n *\n * GNOME HIG recommends `Spinner` or `ProgressBar` for loading states; this is a\n * pragmatic web-style extension for layouts that benefit from placeholder shape.\n */\nexport function Skeleton({\n  variant = 'rect',\n  width = '100%',\n  height = 16,\n  size = 40,\n  lines = 3,\n  animated = true,\n  className,\n  style,\n  ...props\n}: SkeletonProps) {\n  const classes = [styles.skeleton, styles[variant], animated ? styles.animated : null, className]\n    .filter(Boolean)\n    .join(' ');\n\n  if (variant === 'text') {\n    const lineCount = Math.max(1, Math.floor(lines));\n\n    return (\n      <div aria-hidden=\"true\" className={classes} style={style} {...props}>\n        {Array.from({ length: lineCount }, (_, index) => (\n          <div\n            key={index}\n            className={styles.line}\n            style={\n              index === lineCount - 1\n                ? ({ '--skeleton-line-width': '60%' } as CSSProperties)\n                : undefined\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n\n  const shapeStyle: CSSProperties =\n    variant === 'circle'\n      ? { width: `${size}px`, height: `${size}px` }\n      : { width: toCssSize(width), height: toCssSize(height) };\n\n  return (\n    <div aria-hidden=\"true\" className={classes} style={{ ...shapeStyle, ...style }} {...props} />\n  );\n}\n"],"mappings":"gFAwBA,SAAS,EAAU,EAAwB,CACzC,OAAO,OAAO,GAAU,SAAW,GAAG,EAAM,IAAM,EASpD,SAAgB,EAAS,CACvB,UAAU,OACV,QAAQ,OACR,SAAS,GACT,OAAO,GACP,QAAQ,EACR,WAAW,GACX,YACA,QACA,GAAG,GACa,CAChB,IAAM,EAAU,CAAC,EAAA,QAAO,SAAU,EAAA,QAAO,GAAU,EAAW,EAAA,QAAO,SAAW,KAAM,EAAU,CAC7F,OAAO,QAAQ,CACf,KAAK,IAAI,CAEZ,GAAI,IAAY,OAAQ,CACtB,IAAM,EAAY,KAAK,IAAI,EAAG,KAAK,MAAM,EAAM,CAAC,CAEhD,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,cAAY,OAAO,UAAW,EAAgB,QAAO,GAAI,WAC3D,MAAM,KAAK,CAAE,OAAQ,EAAW,EAAG,EAAG,KACrC,EAAA,EAAA,KAAC,MAAD,CAEE,UAAW,EAAA,QAAO,KAClB,MACE,IAAU,EAAY,EACjB,CAAE,wBAAyB,MAAO,CACnC,IAAA,GAEN,CAPK,EAOL,CACF,CACE,CAAA,CAIV,IAAM,EACJ,IAAY,SACR,CAAE,MAAO,GAAG,EAAK,IAAK,OAAQ,GAAG,EAAK,IAAK,CAC3C,CAAE,MAAO,EAAU,EAAM,CAAE,OAAQ,EAAU,EAAO,CAAE,CAE5D,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,cAAY,OAAO,UAAW,EAAS,MAAO,CAAE,GAAG,EAAY,GAAG,EAAO,CAAE,GAAI,EAAS,CAAA"}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export type SkeletonVariant = "rect" | "circle" | "text";
+export type SkeletonVariant = 'rect' | 'circle' | 'text';
 export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
     /** Shape of the placeholder. Defaults to `"rect"`. */
     variant?: SkeletonVariant;

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes } from \"react\";\nimport styles from \"./Skeleton.module.css\";\n\nexport type SkeletonVariant = \"rect\" | \"circle\" | \"text\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  /** Shape of the placeholder. Defaults to `\"rect\"`. */\n  variant?: SkeletonVariant;\n  /** Width for rectangular placeholders. Defaults to `\"100%\"`. */\n  width?: number | string;\n  /** Height for rectangular placeholders. Defaults to `16`. */\n  height?: number | string;\n  /** Diameter for circular placeholders. Defaults to `40`. */\n  size?: number;\n  /** Number of rows for text placeholders. Defaults to `3`. */\n  lines?: number;\n  /**\n   * Enables the shimmer animation.\n   * Respects `prefers-reduced-motion`. Defaults to `true`.\n   */\n  animated?: boolean;\n}\n\nfunction toCssSize(value: number | string) {\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\n/**\n * Loading placeholder for content-shaped skeleton screens.\n *\n * GNOME HIG recommends `Spinner` or `ProgressBar` for loading states; this is a\n * pragmatic web-style extension for layouts that benefit from placeholder shape.\n */\nexport function Skeleton({\n  variant = \"rect\",\n  width = \"100%\",\n  height = 16,\n  size = 40,\n  lines = 3,\n  animated = true,\n  className,\n  style,\n  ...props\n}: SkeletonProps) {\n  const classes = [\n    styles.skeleton,\n    styles[variant],\n    animated ? styles.animated : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  if (variant === \"text\") {\n    const lineCount = Math.max(1, Math.floor(lines));\n\n    return (\n      <div\n        aria-hidden=\"true\"\n        className={classes}\n        style={style}\n        {...props}\n      >\n        {Array.from({ length: lineCount }, (_, index) => (\n          <div\n            key={index}\n            className={styles.line}\n            style={\n              index === lineCount - 1\n                ? ({ \"--skeleton-line-width\": \"60%\" } as CSSProperties)\n                : undefined\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n\n  const shapeStyle: CSSProperties =\n    variant === \"circle\"\n      ? { width: `${size}px`, height: `${size}px` }\n      : { width: toCssSize(width), height: toCssSize(height) };\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={classes}\n      style={{ ...shapeStyle, ...style }}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;AAuBA,SAAS,EAAU,GAAwB;AACzC,QAAO,OAAO,KAAU,WAAW,GAAG,EAAM,MAAM;;AASpD,SAAgB,EAAS,EACvB,aAAU,QACV,WAAQ,QACR,YAAS,IACT,UAAO,IACP,WAAQ,GACR,cAAW,IACX,cACA,UACA,GAAG,KACa;CAChB,IAAM,IAAU;EACd,EAAO;EACP,EAAO;EACP,IAAW,EAAO,WAAW;EAC7B;EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;AAEZ,KAAI,MAAY,QAAQ;EACtB,IAAM,IAAY,KAAK,IAAI,GAAG,KAAK,MAAM,EAAM,CAAC;AAEhD,SACE,kBAAC,OAAD;GACE,eAAY;GACZ,WAAW;GACJ;GACP,GAAI;aAEH,MAAM,KAAK,EAAE,QAAQ,GAAW,GAAG,GAAG,MACrC,kBAAC,OAAD;IAEE,WAAW,EAAO;IAClB,OACE,MAAU,IAAY,IACjB,EAAE,yBAAyB,OAAO,GACnC,KAAA;IAEN,EAPK,EAOL,CACF;GACE,CAAA;;CAIV,IAAM,IACJ,MAAY,WACR;EAAE,OAAO,GAAG,EAAK;EAAK,QAAQ,GAAG,EAAK;EAAK,GAC3C;EAAE,OAAO,EAAU,EAAM;EAAE,QAAQ,EAAU,EAAO;EAAE;AAE5D,QACE,kBAAC,OAAD;EACE,eAAY;EACZ,WAAW;EACX,OAAO;GAAE,GAAG;GAAY,GAAG;GAAO;EAClC,GAAI;EACJ,CAAA"}
+{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\n\nimport styles from './Skeleton.module.css';\n\nexport type SkeletonVariant = 'rect' | 'circle' | 'text';\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  /** Shape of the placeholder. Defaults to `\"rect\"`. */\n  variant?: SkeletonVariant;\n  /** Width for rectangular placeholders. Defaults to `\"100%\"`. */\n  width?: number | string;\n  /** Height for rectangular placeholders. Defaults to `16`. */\n  height?: number | string;\n  /** Diameter for circular placeholders. Defaults to `40`. */\n  size?: number;\n  /** Number of rows for text placeholders. Defaults to `3`. */\n  lines?: number;\n  /**\n   * Enables the shimmer animation.\n   * Respects `prefers-reduced-motion`. Defaults to `true`.\n   */\n  animated?: boolean;\n}\n\nfunction toCssSize(value: number | string) {\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\n/**\n * Loading placeholder for content-shaped skeleton screens.\n *\n * GNOME HIG recommends `Spinner` or `ProgressBar` for loading states; this is a\n * pragmatic web-style extension for layouts that benefit from placeholder shape.\n */\nexport function Skeleton({\n  variant = 'rect',\n  width = '100%',\n  height = 16,\n  size = 40,\n  lines = 3,\n  animated = true,\n  className,\n  style,\n  ...props\n}: SkeletonProps) {\n  const classes = [styles.skeleton, styles[variant], animated ? styles.animated : null, className]\n    .filter(Boolean)\n    .join(' ');\n\n  if (variant === 'text') {\n    const lineCount = Math.max(1, Math.floor(lines));\n\n    return (\n      <div aria-hidden=\"true\" className={classes} style={style} {...props}>\n        {Array.from({ length: lineCount }, (_, index) => (\n          <div\n            key={index}\n            className={styles.line}\n            style={\n              index === lineCount - 1\n                ? ({ '--skeleton-line-width': '60%' } as CSSProperties)\n                : undefined\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n\n  const shapeStyle: CSSProperties =\n    variant === 'circle'\n      ? { width: `${size}px`, height: `${size}px` }\n      : { width: toCssSize(width), height: toCssSize(height) };\n\n  return (\n    <div aria-hidden=\"true\" className={classes} style={{ ...shapeStyle, ...style }} {...props} />\n  );\n}\n"],"mappings":";;;AAwBA,SAAS,EAAU,GAAwB;AACzC,QAAO,OAAO,KAAU,WAAW,GAAG,EAAM,MAAM;;AASpD,SAAgB,EAAS,EACvB,aAAU,QACV,WAAQ,QACR,YAAS,IACT,UAAO,IACP,WAAQ,GACR,cAAW,IACX,cACA,UACA,GAAG,KACa;CAChB,IAAM,IAAU;EAAC,EAAO;EAAU,EAAO;EAAU,IAAW,EAAO,WAAW;EAAM;EAAU,CAC7F,OAAO,QAAQ,CACf,KAAK,IAAI;AAEZ,KAAI,MAAY,QAAQ;EACtB,IAAM,IAAY,KAAK,IAAI,GAAG,KAAK,MAAM,EAAM,CAAC;AAEhD,SACE,kBAAC,OAAD;GAAK,eAAY;GAAO,WAAW;GAAgB;GAAO,GAAI;aAC3D,MAAM,KAAK,EAAE,QAAQ,GAAW,GAAG,GAAG,MACrC,kBAAC,OAAD;IAEE,WAAW,EAAO;IAClB,OACE,MAAU,IAAY,IACjB,EAAE,yBAAyB,OAAO,GACnC,KAAA;IAEN,EAPK,EAOL,CACF;GACE,CAAA;;CAIV,IAAM,IACJ,MAAY,WACR;EAAE,OAAO,GAAG,EAAK;EAAK,QAAQ,GAAG,EAAK;EAAK,GAC3C;EAAE,OAAO,EAAU,EAAM;EAAE,QAAQ,EAAU,EAAO;EAAE;AAE5D,QACE,kBAAC,OAAD;EAAK,eAAY;EAAO,WAAW;EAAS,OAAO;GAAE,GAAG;GAAY,GAAG;GAAO;EAAE,GAAI;EAAS,CAAA"}

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

@@ -1,2 +1,2 @@
-var e={skeleton:`_skeleton_wkug0_3`,line:`_line_wkug0_15`,animated:`_animated_wkug0_28`,shimmer:`_shimmer_wkug0_1`,rect:`_rect_wkug0_35`,circle:`_circle_wkug0_39`,text:`_text_wkug0_43`};exports.default=e;
+var e={skeleton:`_skeleton_sxiec_3`,line:`_line_sxiec_15`,animated:`_animated_sxiec_23`,shimmer:`_shimmer_sxiec_1`,rect:`_rect_sxiec_30`,circle:`_circle_sxiec_34`,text:`_text_sxiec_38`};exports.default=e;
 //# sourceMappingURL=Skeleton.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.module.css.cjs","names":[],"sources":["../../../src/components/Skeleton/Skeleton.module.css"],"sourcesContent":["/* Base */\n\n.skeleton {\n  --skeleton-base: var(--gnome-skeleton-base-color, rgba(0, 0, 0, 0.09));\n  --skeleton-highlight: var(--gnome-skeleton-highlight-color, rgba(255, 255, 255, 0.55));\n\n  position: relative;\n  display: block;\n  flex-shrink: 0;\n  overflow: hidden;\n  background-color: var(--skeleton-base);\n}\n\n.skeleton::after,\n.line::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  transform: translateX(-100%);\n  background: linear-gradient(\n    90deg,\n    transparent,\n    var(--skeleton-highlight),\n    transparent\n  );\n}\n\n.animated::after,\n.animated .line::after {\n  animation: shimmer 1.4s var(--gnome-easing-default, ease) infinite;\n}\n\n/* Variants */\n\n.rect {\n  border-radius: var(--gnome-radius-md, 6px);\n}\n\n.circle {\n  border-radius: 50%;\n}\n\n.text {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 8px;\n  background-color: transparent;\n}\n\n.text::after {\n  display: none;\n}\n\n.line {\n  position: relative;\n  width: var(--skeleton-line-width, 100%);\n  height: 12px;\n  overflow: hidden;\n  border-radius: var(--gnome-radius-pill, 999px);\n  background-color: var(--skeleton-base);\n}\n\n/* Keyframes */\n\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n/* Dark mode */\n\n@media (prefers-color-scheme: dark) {\n  .skeleton {\n    --skeleton-base: var(--gnome-skeleton-base-color, rgba(255, 255, 255, 0.12));\n    --skeleton-highlight: var(--gnome-skeleton-highlight-color, rgba(255, 255, 255, 0.18));\n  }\n}\n\n/* Reduced motion */\n\n@media (prefers-reduced-motion: reduce) {\n  .animated::after,\n  .animated .line::after {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Skeleton.module.css.cjs","names":[],"sources":["../../../src/components/Skeleton/Skeleton.module.css"],"sourcesContent":["/* Base */\n\n.skeleton {\n  --skeleton-base: var(--gnome-skeleton-base-color, rgba(0, 0, 0, 0.09));\n  --skeleton-highlight: var(--gnome-skeleton-highlight-color, rgba(255, 255, 255, 0.55));\n\n  position: relative;\n  display: block;\n  flex-shrink: 0;\n  overflow: hidden;\n  background-color: var(--skeleton-base);\n}\n\n.skeleton::after,\n.line::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  transform: translateX(-100%);\n  background: linear-gradient(90deg, transparent, var(--skeleton-highlight), transparent);\n}\n\n.animated::after,\n.animated .line::after {\n  animation: shimmer 1.4s var(--gnome-easing-default, ease) infinite;\n}\n\n/* Variants */\n\n.rect {\n  border-radius: var(--gnome-radius-md, 6px);\n}\n\n.circle {\n  border-radius: 50%;\n}\n\n.text {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 8px;\n  background-color: transparent;\n}\n\n.text::after {\n  display: none;\n}\n\n.line {\n  position: relative;\n  width: var(--skeleton-line-width, 100%);\n  height: 12px;\n  overflow: hidden;\n  border-radius: var(--gnome-radius-pill, 999px);\n  background-color: var(--skeleton-base);\n}\n\n/* Keyframes */\n\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n/* Dark mode */\n\n@media (prefers-color-scheme: dark) {\n  .skeleton {\n    --skeleton-base: var(--gnome-skeleton-base-color, rgba(255, 255, 255, 0.12));\n    --skeleton-highlight: var(--gnome-skeleton-highlight-color, rgba(255, 255, 255, 0.18));\n  }\n}\n\n/* Reduced motion */\n\n@media (prefers-reduced-motion: reduce) {\n  .animated::after,\n  .animated .line::after {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,11 +1,11 @@
 var e = {
-	skeleton: "_skeleton_wkug0_3",
-	line: "_line_wkug0_15",
-	animated: "_animated_wkug0_28",
-	shimmer: "_shimmer_wkug0_1",
-	rect: "_rect_wkug0_35",
-	circle: "_circle_wkug0_39",
-	text: "_text_wkug0_43"
+	skeleton: "_skeleton_sxiec_3",
+	line: "_line_sxiec_15",
+	animated: "_animated_sxiec_23",
+	shimmer: "_shimmer_sxiec_1",
+	rect: "_rect_sxiec_30",
+	circle: "_circle_sxiec_34",
+	text: "_text_sxiec_38"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.module.css.js","names":[],"sources":["../../../src/components/Skeleton/Skeleton.module.css"],"sourcesContent":["/* Base */\n\n.skeleton {\n  --skeleton-base: var(--gnome-skeleton-base-color, rgba(0, 0, 0, 0.09));\n  --skeleton-highlight: var(--gnome-skeleton-highlight-color, rgba(255, 255, 255, 0.55));\n\n  position: relative;\n  display: block;\n  flex-shrink: 0;\n  overflow: hidden;\n  background-color: var(--skeleton-base);\n}\n\n.skeleton::after,\n.line::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  transform: translateX(-100%);\n  background: linear-gradient(\n    90deg,\n    transparent,\n    var(--skeleton-highlight),\n    transparent\n  );\n}\n\n.animated::after,\n.animated .line::after {\n  animation: shimmer 1.4s var(--gnome-easing-default, ease) infinite;\n}\n\n/* Variants */\n\n.rect {\n  border-radius: var(--gnome-radius-md, 6px);\n}\n\n.circle {\n  border-radius: 50%;\n}\n\n.text {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 8px;\n  background-color: transparent;\n}\n\n.text::after {\n  display: none;\n}\n\n.line {\n  position: relative;\n  width: var(--skeleton-line-width, 100%);\n  height: 12px;\n  overflow: hidden;\n  border-radius: var(--gnome-radius-pill, 999px);\n  background-color: var(--skeleton-base);\n}\n\n/* Keyframes */\n\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n/* Dark mode */\n\n@media (prefers-color-scheme: dark) {\n  .skeleton {\n    --skeleton-base: var(--gnome-skeleton-base-color, rgba(255, 255, 255, 0.12));\n    --skeleton-highlight: var(--gnome-skeleton-highlight-color, rgba(255, 255, 255, 0.18));\n  }\n}\n\n/* Reduced motion */\n\n@media (prefers-reduced-motion: reduce) {\n  .animated::after,\n  .animated .line::after {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Skeleton.module.css.js","names":[],"sources":["../../../src/components/Skeleton/Skeleton.module.css"],"sourcesContent":["/* Base */\n\n.skeleton {\n  --skeleton-base: var(--gnome-skeleton-base-color, rgba(0, 0, 0, 0.09));\n  --skeleton-highlight: var(--gnome-skeleton-highlight-color, rgba(255, 255, 255, 0.55));\n\n  position: relative;\n  display: block;\n  flex-shrink: 0;\n  overflow: hidden;\n  background-color: var(--skeleton-base);\n}\n\n.skeleton::after,\n.line::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  transform: translateX(-100%);\n  background: linear-gradient(90deg, transparent, var(--skeleton-highlight), transparent);\n}\n\n.animated::after,\n.animated .line::after {\n  animation: shimmer 1.4s var(--gnome-easing-default, ease) infinite;\n}\n\n/* Variants */\n\n.rect {\n  border-radius: var(--gnome-radius-md, 6px);\n}\n\n.circle {\n  border-radius: 50%;\n}\n\n.text {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  gap: 8px;\n  background-color: transparent;\n}\n\n.text::after {\n  display: none;\n}\n\n.line {\n  position: relative;\n  width: var(--skeleton-line-width, 100%);\n  height: 12px;\n  overflow: hidden;\n  border-radius: var(--gnome-radius-pill, 999px);\n  background-color: var(--skeleton-base);\n}\n\n/* Keyframes */\n\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n/* Dark mode */\n\n@media (prefers-color-scheme: dark) {\n  .skeleton {\n    --skeleton-base: var(--gnome-skeleton-base-color, rgba(255, 255, 255, 0.12));\n    --skeleton-highlight: var(--gnome-skeleton-highlight-color, rgba(255, 255, 255, 0.18));\n  }\n}\n\n/* Reduced motion */\n\n@media (prefers-reduced-motion: reduce) {\n  .animated::after,\n  .animated .line::after {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { Skeleton } from './Skeleton';
 export type { SkeletonProps, SkeletonVariant } from './Skeleton';
+export { Skeleton } from './Skeleton';

package/dist/components/Slider/Slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.cjs","names":[],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import {\n  useRef,\n  useCallback,\n  type PointerEvent,\n  type KeyboardEvent,\n  type HTMLAttributes,\n} from \"react\";\nimport styles from \"./Slider.module.css\";\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Current value. Must be between `min` and `max`. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum value. Defaults to `0`. */\n  min?: number;\n  /** Maximum value. Defaults to `100`. */\n  max?: number;\n  /**\n   * Granularity of each step.\n   * - Arrow keys move by one step.\n   * - Page Up/Down move by 10 steps.\n   * Defaults to `1`.\n   */\n  step?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /**\n   * Marks to display along the track.\n   * Each mark can have an optional label rendered below the track.\n   */\n  marks?: Array<{ value: number; label?: string }>;\n  /** Accessible label. Required when no visible `<label>` is present. */\n  \"aria-label\"?: string;\n  /** Associates the control with a visible label element. */\n  \"aria-labelledby\"?: string;\n  /** `id` of an element that describes the current value (e.g. a live region). */\n  \"aria-describedby\"?: string;\n}\n\nfunction clamp(v: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, v));\n}\n\nfunction snapToStep(v: number, min: number, step: number, decimals: number) {\n  return parseFloat((Math.round((v - min) / step) * step + min).toFixed(decimals));\n}\n\nfunction countDecimals(n: number) {\n  const s = n.toString();\n  const dot = s.indexOf(\".\");\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\n/**\n * Draggable range slider following the Adwaita `GtkScale` pattern.\n *\n * - Pointer (mouse / touch / pen) drag to set value continuously.\n * - Keyboard: ← / → move by one step; Page Up/Down by 10 steps; Home/End jump to bounds.\n * - Optional tick marks with labels.\n * - Fills the track from the left up to the thumb (accent colour).\n *\n * @see https://developer.gnome.org/hig/patterns/controls/sliders.html\n */\nexport function Slider({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  marks,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...props\n}: SliderProps) {\n  const trackRef = useRef<HTMLDivElement>(null);\n  const dp = countDecimals(step);\n\n  const pct = ((clamp(value, min, max) - min) / (max - min)) * 100;\n\n  const setFromX = useCallback(\n    (clientX: number) => {\n      if (!trackRef.current) return;\n      const { left, width } = trackRef.current.getBoundingClientRect();\n      const raw = ((clientX - left) / width) * (max - min) + min;\n      onChange(clamp(snapToStep(raw, min, step, dp), min, max));\n    },\n    [min, max, step, dp, onChange]\n  );\n\n  // Pointer drag — capture on the thumb, move anywhere\n  const handlePointerDown = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      e.currentTarget.setPointerCapture(e.pointerId);\n      setFromX(e.clientX);\n    },\n    [disabled, setFromX]\n  );\n\n  const handlePointerMove = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.hasPointerCapture(e.pointerId)) return;\n      setFromX(e.clientX);\n    },\n    [setFromX]\n  );\n\n  // Keyboard\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const set = (next: number) => {\n        e.preventDefault();\n        onChange(clamp(snapToStep(next, min, step, dp), min, max));\n      };\n      switch (e.key) {\n        case \"ArrowRight\":\n        case \"ArrowUp\":\n          set(value + step);\n          break;\n        case \"ArrowLeft\":\n        case \"ArrowDown\":\n          set(value - step);\n          break;\n        case \"PageUp\":\n          set(value + step * 10);\n          break;\n        case \"PageDown\":\n          set(value - step * 10);\n          break;\n        case \"Home\":\n          set(min);\n          break;\n        case \"End\":\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, dp, onChange]\n  );\n\n  const hasMarks   = marks && marks.length > 0;\n  const hasLabels  = hasMarks && marks.some((m) => m.label);\n\n  return (\n    <div\n      className={[\n        styles.wrapper,\n        hasLabels ? styles.hasLabels : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {/* Accessible slider */}\n      <div\n        ref={trackRef}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-disabled={disabled || undefined}\n        className={[styles.track, disabled ? styles.disabled : null]\n          .filter(Boolean)\n          .join(\" \")}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onKeyDown={disabled ? undefined : handleKeyDown}\n      >\n        {/* Filled portion */}\n        <div className={styles.fill} style={{ width: `${pct}%` }} />\n\n        {/* Thumb */}\n        <div\n          className={styles.thumb}\n          style={{ left: `${pct}%` }}\n          aria-hidden=\"true\"\n        />\n\n        {/* Tick marks */}\n        {hasMarks &&\n          marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n            return (\n              <div\n                key={m.value}\n                className={styles.tick}\n                style={{ left: `${mPct}%` }}\n                aria-hidden=\"true\"\n              />\n            );\n          })}\n      </div>\n\n      {/* Mark labels */}\n      {hasLabels && (\n        <div className={styles.labels} aria-hidden=\"true\">\n          {marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n            return (\n              <span\n                key={m.value}\n                className={styles.markLabel}\n                style={{ left: `${mPct}%` }}\n              >\n                {m.label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Slider.cjs","names":[],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type PointerEvent,\n  useCallback,\n  useRef,\n} from 'react';\n\nimport styles from './Slider.module.css';\n\nexport interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current value. Must be between `min` and `max`. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum value. Defaults to `0`. */\n  min?: number;\n  /** Maximum value. Defaults to `100`. */\n  max?: number;\n  /**\n   * Granularity of each step.\n   * - Arrow keys move by one step.\n   * - Page Up/Down move by 10 steps.\n   * Defaults to `1`.\n   */\n  step?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /**\n   * Marks to display along the track.\n   * Each mark can have an optional label rendered below the track.\n   */\n  marks?: Array<{ value: number; label?: string }>;\n  /** Accessible label. Required when no visible `<label>` is present. */\n  'aria-label'?: string;\n  /** Associates the control with a visible label element. */\n  'aria-labelledby'?: string;\n  /** `id` of an element that describes the current value (e.g. a live region). */\n  'aria-describedby'?: string;\n}\n\nfunction clamp(v: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, v));\n}\n\nfunction snapToStep(v: number, min: number, step: number, decimals: number) {\n  return parseFloat((Math.round((v - min) / step) * step + min).toFixed(decimals));\n}\n\nfunction countDecimals(n: number) {\n  const s = n.toString();\n  const dot = s.indexOf('.');\n\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\n/**\n * Draggable range slider following the Adwaita `GtkScale` pattern.\n *\n * - Pointer (mouse / touch / pen) drag to set value continuously.\n * - Keyboard: ← / → move by one step; Page Up/Down by 10 steps; Home/End jump to bounds.\n * - Optional tick marks with labels.\n * - Fills the track from the left up to the thumb (accent colour).\n *\n * @see https://developer.gnome.org/hig/patterns/controls/sliders.html\n */\nexport function Slider({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  marks,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: SliderProps) {\n  const trackRef = useRef<HTMLDivElement>(null);\n  const dp = countDecimals(step);\n\n  const pct = ((clamp(value, min, max) - min) / (max - min)) * 100;\n\n  const setFromX = useCallback(\n    (clientX: number) => {\n      if (!trackRef.current) {\n        return;\n      }\n\n      const { left, width } = trackRef.current.getBoundingClientRect();\n      const raw = ((clientX - left) / width) * (max - min) + min;\n\n      onChange(clamp(snapToStep(raw, min, step, dp), min, max));\n    },\n    [min, max, step, dp, onChange],\n  );\n\n  // Pointer drag — capture on the thumb, move anywhere\n  const handlePointerDown = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (disabled) {\n        return;\n      }\n\n      e.currentTarget.setPointerCapture(e.pointerId);\n      setFromX(e.clientX);\n    },\n    [disabled, setFromX],\n  );\n\n  const handlePointerMove = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.hasPointerCapture(e.pointerId)) {\n        return;\n      }\n\n      setFromX(e.clientX);\n    },\n    [setFromX],\n  );\n\n  // Keyboard\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const set = (next: number) => {\n        e.preventDefault();\n        onChange(clamp(snapToStep(next, min, step, dp), min, max));\n      };\n\n      switch (e.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n          set(value + step);\n          break;\n        case 'ArrowLeft':\n        case 'ArrowDown':\n          set(value - step);\n          break;\n        case 'PageUp':\n          set(value + step * 10);\n          break;\n        case 'PageDown':\n          set(value - step * 10);\n          break;\n        case 'Home':\n          set(min);\n          break;\n        case 'End':\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, dp, onChange],\n  );\n\n  const hasMarks = marks && marks.length > 0;\n  const hasLabels = hasMarks && marks.some((m) => m.label);\n\n  return (\n    <div\n      className={[styles.wrapper, hasLabels ? styles.hasLabels : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {/* Accessible slider */}\n      <div\n        ref={trackRef}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-disabled={disabled || undefined}\n        className={[styles.track, disabled ? styles.disabled : null].filter(Boolean).join(' ')}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onKeyDown={disabled ? undefined : handleKeyDown}\n      >\n        {/* Filled portion */}\n        <div className={styles.fill} style={{ width: `${pct}%` }} />\n\n        {/* Thumb */}\n        <div className={styles.thumb} style={{ left: `${pct}%` }} aria-hidden=\"true\" />\n\n        {/* Tick marks */}\n        {hasMarks &&\n          marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n\n            return (\n              <div\n                key={m.value}\n                className={styles.tick}\n                style={{ left: `${mPct}%` }}\n                aria-hidden=\"true\"\n              />\n            );\n          })}\n      </div>\n\n      {/* Mark labels */}\n      {hasLabels && (\n        <div className={styles.labels} aria-hidden=\"true\">\n          {marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n\n            return (\n              <span key={m.value} className={styles.markLabel} style={{ left: `${mPct}%` }}>\n                {m.label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/Slider/Slider.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Current value. Must be between `min` and `max`. */
     value: number;
     /** Called when the value changes. */
@@ -26,11 +26,11 @@ export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCha
         label?: string;
     }>;
     /** Accessible label. Required when no visible `<label>` is present. */
-    "aria-label"?: string;
+    'aria-label'?: string;
     /** Associates the control with a visible label element. */
-    "aria-labelledby"?: string;
+    'aria-labelledby'?: string;
     /** `id` of an element that describes the current value (e.g. a live region). */
-    "aria-describedby"?: string;
+    'aria-describedby'?: string;
 }
 /**
  * Draggable range slider following the Adwaita `GtkScale` pattern.
@@ -42,4 +42,4 @@ export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCha
  *
  * @see https://developer.gnome.org/hig/patterns/controls/sliders.html
  */
-export declare function Slider({ value, onChange, min, max, step, disabled, marks, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Slider({ value, onChange, min, max, step, disabled, marks, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import {\n  useRef,\n  useCallback,\n  type PointerEvent,\n  type KeyboardEvent,\n  type HTMLAttributes,\n} from \"react\";\nimport styles from \"./Slider.module.css\";\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Current value. Must be between `min` and `max`. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum value. Defaults to `0`. */\n  min?: number;\n  /** Maximum value. Defaults to `100`. */\n  max?: number;\n  /**\n   * Granularity of each step.\n   * - Arrow keys move by one step.\n   * - Page Up/Down move by 10 steps.\n   * Defaults to `1`.\n   */\n  step?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /**\n   * Marks to display along the track.\n   * Each mark can have an optional label rendered below the track.\n   */\n  marks?: Array<{ value: number; label?: string }>;\n  /** Accessible label. Required when no visible `<label>` is present. */\n  \"aria-label\"?: string;\n  /** Associates the control with a visible label element. */\n  \"aria-labelledby\"?: string;\n  /** `id` of an element that describes the current value (e.g. a live region). */\n  \"aria-describedby\"?: string;\n}\n\nfunction clamp(v: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, v));\n}\n\nfunction snapToStep(v: number, min: number, step: number, decimals: number) {\n  return parseFloat((Math.round((v - min) / step) * step + min).toFixed(decimals));\n}\n\nfunction countDecimals(n: number) {\n  const s = n.toString();\n  const dot = s.indexOf(\".\");\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\n/**\n * Draggable range slider following the Adwaita `GtkScale` pattern.\n *\n * - Pointer (mouse / touch / pen) drag to set value continuously.\n * - Keyboard: ← / → move by one step; Page Up/Down by 10 steps; Home/End jump to bounds.\n * - Optional tick marks with labels.\n * - Fills the track from the left up to the thumb (accent colour).\n *\n * @see https://developer.gnome.org/hig/patterns/controls/sliders.html\n */\nexport function Slider({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  marks,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...props\n}: SliderProps) {\n  const trackRef = useRef<HTMLDivElement>(null);\n  const dp = countDecimals(step);\n\n  const pct = ((clamp(value, min, max) - min) / (max - min)) * 100;\n\n  const setFromX = useCallback(\n    (clientX: number) => {\n      if (!trackRef.current) return;\n      const { left, width } = trackRef.current.getBoundingClientRect();\n      const raw = ((clientX - left) / width) * (max - min) + min;\n      onChange(clamp(snapToStep(raw, min, step, dp), min, max));\n    },\n    [min, max, step, dp, onChange]\n  );\n\n  // Pointer drag — capture on the thumb, move anywhere\n  const handlePointerDown = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      e.currentTarget.setPointerCapture(e.pointerId);\n      setFromX(e.clientX);\n    },\n    [disabled, setFromX]\n  );\n\n  const handlePointerMove = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.hasPointerCapture(e.pointerId)) return;\n      setFromX(e.clientX);\n    },\n    [setFromX]\n  );\n\n  // Keyboard\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const set = (next: number) => {\n        e.preventDefault();\n        onChange(clamp(snapToStep(next, min, step, dp), min, max));\n      };\n      switch (e.key) {\n        case \"ArrowRight\":\n        case \"ArrowUp\":\n          set(value + step);\n          break;\n        case \"ArrowLeft\":\n        case \"ArrowDown\":\n          set(value - step);\n          break;\n        case \"PageUp\":\n          set(value + step * 10);\n          break;\n        case \"PageDown\":\n          set(value - step * 10);\n          break;\n        case \"Home\":\n          set(min);\n          break;\n        case \"End\":\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, dp, onChange]\n  );\n\n  const hasMarks   = marks && marks.length > 0;\n  const hasLabels  = hasMarks && marks.some((m) => m.label);\n\n  return (\n    <div\n      className={[\n        styles.wrapper,\n        hasLabels ? styles.hasLabels : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {/* Accessible slider */}\n      <div\n        ref={trackRef}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-disabled={disabled || undefined}\n        className={[styles.track, disabled ? styles.disabled : null]\n          .filter(Boolean)\n          .join(\" \")}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onKeyDown={disabled ? undefined : handleKeyDown}\n      >\n        {/* Filled portion */}\n        <div className={styles.fill} style={{ width: `${pct}%` }} />\n\n        {/* Thumb */}\n        <div\n          className={styles.thumb}\n          style={{ left: `${pct}%` }}\n          aria-hidden=\"true\"\n        />\n\n        {/* Tick marks */}\n        {hasMarks &&\n          marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n            return (\n              <div\n                key={m.value}\n                className={styles.tick}\n                style={{ left: `${mPct}%` }}\n                aria-hidden=\"true\"\n              />\n            );\n          })}\n      </div>\n\n      {/* Mark labels */}\n      {hasLabels && (\n        <div className={styles.labels} aria-hidden=\"true\">\n          {marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n            return (\n              <span\n                key={m.value}\n                className={styles.markLabel}\n                style={{ left: `${mPct}%` }}\n              >\n                {m.label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type PointerEvent,\n  useCallback,\n  useRef,\n} from 'react';\n\nimport styles from './Slider.module.css';\n\nexport interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current value. Must be between `min` and `max`. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum value. Defaults to `0`. */\n  min?: number;\n  /** Maximum value. Defaults to `100`. */\n  max?: number;\n  /**\n   * Granularity of each step.\n   * - Arrow keys move by one step.\n   * - Page Up/Down move by 10 steps.\n   * Defaults to `1`.\n   */\n  step?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /**\n   * Marks to display along the track.\n   * Each mark can have an optional label rendered below the track.\n   */\n  marks?: Array<{ value: number; label?: string }>;\n  /** Accessible label. Required when no visible `<label>` is present. */\n  'aria-label'?: string;\n  /** Associates the control with a visible label element. */\n  'aria-labelledby'?: string;\n  /** `id` of an element that describes the current value (e.g. a live region). */\n  'aria-describedby'?: string;\n}\n\nfunction clamp(v: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, v));\n}\n\nfunction snapToStep(v: number, min: number, step: number, decimals: number) {\n  return parseFloat((Math.round((v - min) / step) * step + min).toFixed(decimals));\n}\n\nfunction countDecimals(n: number) {\n  const s = n.toString();\n  const dot = s.indexOf('.');\n\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\n/**\n * Draggable range slider following the Adwaita `GtkScale` pattern.\n *\n * - Pointer (mouse / touch / pen) drag to set value continuously.\n * - Keyboard: ← / → move by one step; Page Up/Down by 10 steps; Home/End jump to bounds.\n * - Optional tick marks with labels.\n * - Fills the track from the left up to the thumb (accent colour).\n *\n * @see https://developer.gnome.org/hig/patterns/controls/sliders.html\n */\nexport function Slider({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  marks,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: SliderProps) {\n  const trackRef = useRef<HTMLDivElement>(null);\n  const dp = countDecimals(step);\n\n  const pct = ((clamp(value, min, max) - min) / (max - min)) * 100;\n\n  const setFromX = useCallback(\n    (clientX: number) => {\n      if (!trackRef.current) {\n        return;\n      }\n\n      const { left, width } = trackRef.current.getBoundingClientRect();\n      const raw = ((clientX - left) / width) * (max - min) + min;\n\n      onChange(clamp(snapToStep(raw, min, step, dp), min, max));\n    },\n    [min, max, step, dp, onChange],\n  );\n\n  // Pointer drag — capture on the thumb, move anywhere\n  const handlePointerDown = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (disabled) {\n        return;\n      }\n\n      e.currentTarget.setPointerCapture(e.pointerId);\n      setFromX(e.clientX);\n    },\n    [disabled, setFromX],\n  );\n\n  const handlePointerMove = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.hasPointerCapture(e.pointerId)) {\n        return;\n      }\n\n      setFromX(e.clientX);\n    },\n    [setFromX],\n  );\n\n  // Keyboard\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const set = (next: number) => {\n        e.preventDefault();\n        onChange(clamp(snapToStep(next, min, step, dp), min, max));\n      };\n\n      switch (e.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n          set(value + step);\n          break;\n        case 'ArrowLeft':\n        case 'ArrowDown':\n          set(value - step);\n          break;\n        case 'PageUp':\n          set(value + step * 10);\n          break;\n        case 'PageDown':\n          set(value - step * 10);\n          break;\n        case 'Home':\n          set(min);\n          break;\n        case 'End':\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, dp, onChange],\n  );\n\n  const hasMarks = marks && marks.length > 0;\n  const hasLabels = hasMarks && marks.some((m) => m.label);\n\n  return (\n    <div\n      className={[styles.wrapper, hasLabels ? styles.hasLabels : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {/* Accessible slider */}\n      <div\n        ref={trackRef}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-disabled={disabled || undefined}\n        className={[styles.track, disabled ? styles.disabled : null].filter(Boolean).join(' ')}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onKeyDown={disabled ? undefined : handleKeyDown}\n      >\n        {/* Filled portion */}\n        <div className={styles.fill} style={{ width: `${pct}%` }} />\n\n        {/* Thumb */}\n        <div className={styles.thumb} style={{ left: `${pct}%` }} aria-hidden=\"true\" />\n\n        {/* Tick marks */}\n        {hasMarks &&\n          marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n\n            return (\n              <div\n                key={m.value}\n                className={styles.tick}\n                style={{ left: `${mPct}%` }}\n                aria-hidden=\"true\"\n              />\n            );\n          })}\n      </div>\n\n      {/* Mark labels */}\n      {hasLabels && (\n        <div className={styles.labels} aria-hidden=\"true\">\n          {marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n\n            return (\n              <span key={m.value} className={styles.markLabel} style={{ left: `${mPct}%` }}>\n                {m.label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={wrapper:`_wrapper_11zhs_3`,hasLabels:`_hasLabels_11zhs_11`,track:`_track_11zhs_17`,disabled:`_disabled_11zhs_42`,fill:`_fill_11zhs_50`,thumb:`_thumb_11zhs_64`,tick:`_tick_11zhs_97`,labels:`_labels_11zhs_112`,markLabel:`_markLabel_11zhs_119`};exports.default=e;
+var e={wrapper:`_wrapper_qpwn3_3`,hasLabels:`_hasLabels_qpwn3_11`,track:`_track_qpwn3_17`,disabled:`_disabled_qpwn3_42`,fill:`_fill_qpwn3_50`,thumb:`_thumb_qpwn3_64`,tick:`_tick_qpwn3_97`,labels:`_labels_qpwn3_112`,markLabel:`_markLabel_qpwn3_119`};exports.default=e;
 //# sourceMappingURL=Slider.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.module.css.cjs","names":[],"sources":["../../../src/components/Slider/Slider.module.css"],"sourcesContent":["/* ─── Outer wrapper ──────────────────────────────────────────────────────────── */\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  /* Vertical space for thumb overflow */\n  padding: 10px 0;\n}\n\n.hasLabels {\n  padding-bottom: 0;\n}\n\n/* ─── Track ──────────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: 6px;\n\n  background-color: var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  cursor: pointer;\n  touch-action: none; /* prevent scroll interference during drag */\n  user-select: none;\n\n  outline: none;\n}\n\n.track:focus-visible {\n  /* Focus ring on the track itself as a fallback */\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ───────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Filled section (left of thumb) ────────────────────────────────────────── */\n\n.fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n\n  pointer-events: none;\n}\n\n/* ─── Thumb ──────────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  /* Translate left by half thumb width so it centres on the left edge of .fill */\n  transform: translate(-50%, -50%);\n\n  width: 22px;\n  height: 22px;\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  box-shadow:\n    0 1px 3px rgba(0, 0, 0, 0.25),\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n\n  pointer-events: none;\n\n  transition:\n    transform  var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n/* Slightly larger thumb on focus / active drag */\n.track:focus-visible .thumb,\n.track:active .thumb {\n  transform: translate(-50%, -50%) scale(1.18);\n  box-shadow:\n    0 2px 6px rgba(0, 0, 0, 0.3),\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n}\n\n/* ─── Tick marks ─────────────────────────────────────────────────────────────── */\n\n.tick {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  pointer-events: none;\n}\n\n/* ─── Labels row ─────────────────────────────────────────────────────────────── */\n\n.labels {\n  position: relative;\n  width: 100%;\n  height: 20px;\n  margin-top: var(--gnome-space-1, 6px);\n}\n\n.markLabel {\n  position: absolute;\n  transform: translateX(-50%);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.8125rem);\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  white-space: nowrap;\n  pointer-events: none;\n  user-select: none;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  .thumb {\n    box-shadow:\n      0 1px 4px rgba(0, 0, 0, 0.5),\n      0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .track:focus-visible .thumb,\n  .track:active .thumb {\n    box-shadow:\n      0 2px 8px rgba(0, 0, 0, 0.6),\n      0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .tick {\n    background-color: var(--gnome-window-bg-color, #242424);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .thumb {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Slider.module.css.cjs","names":[],"sources":["../../../src/components/Slider/Slider.module.css"],"sourcesContent":["/* ─── Outer wrapper ──────────────────────────────────────────────────────────── */\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  /* Vertical space for thumb overflow */\n  padding: 10px 0;\n}\n\n.hasLabels {\n  padding-bottom: 0;\n}\n\n/* ─── Track ──────────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: 6px;\n\n  background-color: var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  cursor: pointer;\n  touch-action: none; /* prevent scroll interference during drag */\n  user-select: none;\n\n  outline: none;\n}\n\n.track:focus-visible {\n  /* Focus ring on the track itself as a fallback */\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ───────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Filled section (left of thumb) ────────────────────────────────────────── */\n\n.fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n\n  pointer-events: none;\n}\n\n/* ─── Thumb ──────────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  /* Translate left by half thumb width so it centres on the left edge of .fill */\n  transform: translate(-50%, -50%);\n\n  width: 22px;\n  height: 22px;\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  box-shadow:\n    0 1px 3px rgba(0, 0, 0, 0.25),\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n\n  pointer-events: none;\n\n  transition:\n    transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n/* Slightly larger thumb on focus / active drag */\n.track:focus-visible .thumb,\n.track:active .thumb {\n  transform: translate(-50%, -50%) scale(1.18);\n  box-shadow:\n    0 2px 6px rgba(0, 0, 0, 0.3),\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n}\n\n/* ─── Tick marks ─────────────────────────────────────────────────────────────── */\n\n.tick {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  pointer-events: none;\n}\n\n/* ─── Labels row ─────────────────────────────────────────────────────────────── */\n\n.labels {\n  position: relative;\n  width: 100%;\n  height: 20px;\n  margin-top: var(--gnome-space-1, 6px);\n}\n\n.markLabel {\n  position: absolute;\n  transform: translateX(-50%);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.8125rem);\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  white-space: nowrap;\n  pointer-events: none;\n  user-select: none;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  .thumb {\n    box-shadow:\n      0 1px 4px rgba(0, 0, 0, 0.5),\n      0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .track:focus-visible .thumb,\n  .track:active .thumb {\n    box-shadow:\n      0 2px 8px rgba(0, 0, 0, 0.6),\n      0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .tick {\n    background-color: var(--gnome-window-bg-color, #242424);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .thumb {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,13 +1,13 @@
 var e = {
-	wrapper: "_wrapper_11zhs_3",
-	hasLabels: "_hasLabels_11zhs_11",
-	track: "_track_11zhs_17",
-	disabled: "_disabled_11zhs_42",
-	fill: "_fill_11zhs_50",
-	thumb: "_thumb_11zhs_64",
-	tick: "_tick_11zhs_97",
-	labels: "_labels_11zhs_112",
-	markLabel: "_markLabel_11zhs_119"
+	wrapper: "_wrapper_qpwn3_3",
+	hasLabels: "_hasLabels_qpwn3_11",
+	track: "_track_qpwn3_17",
+	disabled: "_disabled_qpwn3_42",
+	fill: "_fill_qpwn3_50",
+	thumb: "_thumb_qpwn3_64",
+	tick: "_tick_qpwn3_97",
+	labels: "_labels_qpwn3_112",
+	markLabel: "_markLabel_qpwn3_119"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.module.css.js","names":[],"sources":["../../../src/components/Slider/Slider.module.css"],"sourcesContent":["/* ─── Outer wrapper ──────────────────────────────────────────────────────────── */\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  /* Vertical space for thumb overflow */\n  padding: 10px 0;\n}\n\n.hasLabels {\n  padding-bottom: 0;\n}\n\n/* ─── Track ──────────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: 6px;\n\n  background-color: var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  cursor: pointer;\n  touch-action: none; /* prevent scroll interference during drag */\n  user-select: none;\n\n  outline: none;\n}\n\n.track:focus-visible {\n  /* Focus ring on the track itself as a fallback */\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ───────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Filled section (left of thumb) ────────────────────────────────────────── */\n\n.fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n\n  pointer-events: none;\n}\n\n/* ─── Thumb ──────────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  /* Translate left by half thumb width so it centres on the left edge of .fill */\n  transform: translate(-50%, -50%);\n\n  width: 22px;\n  height: 22px;\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  box-shadow:\n    0 1px 3px rgba(0, 0, 0, 0.25),\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n\n  pointer-events: none;\n\n  transition:\n    transform  var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n/* Slightly larger thumb on focus / active drag */\n.track:focus-visible .thumb,\n.track:active .thumb {\n  transform: translate(-50%, -50%) scale(1.18);\n  box-shadow:\n    0 2px 6px rgba(0, 0, 0, 0.3),\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n}\n\n/* ─── Tick marks ─────────────────────────────────────────────────────────────── */\n\n.tick {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  pointer-events: none;\n}\n\n/* ─── Labels row ─────────────────────────────────────────────────────────────── */\n\n.labels {\n  position: relative;\n  width: 100%;\n  height: 20px;\n  margin-top: var(--gnome-space-1, 6px);\n}\n\n.markLabel {\n  position: absolute;\n  transform: translateX(-50%);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.8125rem);\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  white-space: nowrap;\n  pointer-events: none;\n  user-select: none;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  .thumb {\n    box-shadow:\n      0 1px 4px rgba(0, 0, 0, 0.5),\n      0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .track:focus-visible .thumb,\n  .track:active .thumb {\n    box-shadow:\n      0 2px 8px rgba(0, 0, 0, 0.6),\n      0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .tick {\n    background-color: var(--gnome-window-bg-color, #242424);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .thumb {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Slider.module.css.js","names":[],"sources":["../../../src/components/Slider/Slider.module.css"],"sourcesContent":["/* ─── Outer wrapper ──────────────────────────────────────────────────────────── */\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  /* Vertical space for thumb overflow */\n  padding: 10px 0;\n}\n\n.hasLabels {\n  padding-bottom: 0;\n}\n\n/* ─── Track ──────────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: 6px;\n\n  background-color: var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  cursor: pointer;\n  touch-action: none; /* prevent scroll interference during drag */\n  user-select: none;\n\n  outline: none;\n}\n\n.track:focus-visible {\n  /* Focus ring on the track itself as a fallback */\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ───────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Filled section (left of thumb) ────────────────────────────────────────── */\n\n.fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n\n  pointer-events: none;\n}\n\n/* ─── Thumb ──────────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  /* Translate left by half thumb width so it centres on the left edge of .fill */\n  transform: translate(-50%, -50%);\n\n  width: 22px;\n  height: 22px;\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  box-shadow:\n    0 1px 3px rgba(0, 0, 0, 0.25),\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n\n  pointer-events: none;\n\n  transition:\n    transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n/* Slightly larger thumb on focus / active drag */\n.track:focus-visible .thumb,\n.track:active .thumb {\n  transform: translate(-50%, -50%) scale(1.18);\n  box-shadow:\n    0 2px 6px rgba(0, 0, 0, 0.3),\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n}\n\n/* ─── Tick marks ─────────────────────────────────────────────────────────────── */\n\n.tick {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  pointer-events: none;\n}\n\n/* ─── Labels row ─────────────────────────────────────────────────────────────── */\n\n.labels {\n  position: relative;\n  width: 100%;\n  height: 20px;\n  margin-top: var(--gnome-space-1, 6px);\n}\n\n.markLabel {\n  position: absolute;\n  transform: translateX(-50%);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.8125rem);\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  white-space: nowrap;\n  pointer-events: none;\n  user-select: none;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  .thumb {\n    box-shadow:\n      0 1px 4px rgba(0, 0, 0, 0.5),\n      0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .track:focus-visible .thumb,\n  .track:active .thumb {\n    box-shadow:\n      0 2px 8px rgba(0, 0, 0, 0.6),\n      0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .tick {\n    background-color: var(--gnome-window-bg-color, #242424);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .thumb {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { Slider } from './Slider';
 export type { SliderProps } from './Slider';
+export { Slider } from './Slider';