@gnome-ui/react 1.45.0 → 1.45.2

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;CAiBZ,OAhBA,EAAS,QAAQ,IAAW,MAAU;EACpC,IAAI,CAAC,EAAe,CAAK,GACvB;EAGF,IAAM,IAAQ,EAAM;EAEpB,AAAI,OAAO,EAAM,SAAU,WACrB,EAAM,MAAM,YAAY,EAAE,SAAS,EAAO,YAAY,CAAC,KACzD,MAEO,EAAM,aACf,KAAS,EAAmB,EAAM,UAAuB,CAAM;CAEnE,CAAC,GAEM;AACT;AA6CA,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,CAAW,GACtD,IAAe,MAAmB,KAAA,GAClC,IAAO,IAAe,IAAiB,GAEvC,IAAmB,EAAoB,GACvC,IAAc,EAAW,CAAoB,GAC7C,IAAS,EAAM,GAEf,KAAgB,MAAkB;EAKtC,AAJK,KACH,EAAgB,CAAI,GAGtB,IAAe,CAAI;CACrB;CAYA,IAVA,EAAoB,UAAY;EAC9B,cAAc,EAAa,EAAI;EAC/B,gBAAgB,EAAa,EAAK;EAClC,cAAc,EAAa,CAAC,CAAI;CAClC,EAAE,GAME,EAFF,EAAY,WAAW,KAAK,EAAmB,GAAU,CAAW,IAAI,IAGxE,OAAO;CAIT,IAAM,IAAS,IAAmB,KAAO,GAEnC,IAAa,CAAC,EAAE,KAAS,KAAS,KAAe,CAAC;CAExD,OACE,kBAAC,WAAD;EAAS,WAAW,CAAC,EAAO,SAAS,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;EAAG,GAAI;YAA/E,CACG,MACE,KAAe,CAAC,IACf,kBAAC,UAAD;GACE,MAAK;GACL,WAAW,EAAO;GAClB,eAAe,EAAa,CAAC,CAAI;GACjC,iBAAe;GACf,iBAAe;aALjB;IAOG,KACC,kBAAC,QAAD;KAAM,WAAW,EAAO;eACtB,kBAAC,GAAD;MAAY;MAAM,MAAK;MAAK,eAAA;KAAa,CAAA;IACrC,CAAA;IAEP,KAAS,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAe;IAAY,CAAA;IAC7D,kBAAC,QAAD;KAAM,WAAW,EAAO;eACtB,kBAAC,GAAD;MAAM,MAAM,IAAO,IAAQ;MAAS,MAAK;MAAK,eAAA;KAAa,CAAA;IACvD,CAAA;GACA;OAER,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAO;cACtB,kBAAC,GAAD;KAAY;KAAM,MAAK;KAAK,eAAA;IAAa,CAAA;GACrC,CAAA,GAEP,KAAS,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAe;GAAY,CAAA,CAC1D;OAGT,kBAAC,OAAD;GACE,IAAI;GACJ,WAAW,CAAC,EAAO,aAAc,IAAuC,OAA9B,EAAO,oBAA2B,EACzE,OAAO,OAAO,EACd,KAAK,GAAG;GACX,eAAa,CAAC,KAAU,KAAA;aAExB,kBAAC,OAAD;IAAK,WAAW,EAAO;cACrB,kBAAC,MAAD;KAAI,WAAW,EAAO;KAAO;IAAa,CAAA;GACvC,CAAA;EACF,CAAA,CACE;;AAEb,CACF"}

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

@@ -1,2 +1,2 @@
-const e=require(`./Skeleton.module.css.cjs`);let t=require(`react/jsx-runtime`);function n(e){return typeof e==`number`?`${e}px`:e}function r({variant:r=`rect`,width:i=`100%`,height:a=16,size:o=40,lines:s=3,animated:c=!0,className:l,style:u,...d}){let f=[e.default.skeleton,e.default[r],c?e.default.animated:null,l].filter(Boolean).join(` `);if(r===`text`){let n=Math.max(1,Math.floor(s));return(0,t.jsx)(`div`,{"aria-hidden":`true`,className:f,style:u,...d,children:Array.from({length:n},(r,i)=>(0,t.jsx)(`div`,{className:e.default.line,style:i===n-1?{"--skeleton-line-width":`60%`}:void 0},i))})}let p=r===`circle`?{width:`${o}px`,height:`${o}px`}:{width:n(i),height:n(a)};return(0,t.jsx)(`div`,{"aria-hidden":`true`,className:f,style:{...p,...u},...d})}exports.Skeleton=r;
+const e=require("./Skeleton.module.css.cjs");let t=require("react/jsx-runtime");function n(e){return typeof e==`number`?`${e}px`:e}var r=({variant:r=`rect`,width:i=`100%`,height:a=16,size:o=40,lines:s=3,animated:c=!0,className:l,style:u,...d})=>{let f=[e.default.skeleton,e.default[r],c?e.default.animated:null,l].filter(Boolean).join(` `);if(r===`text`){let n=Math.max(1,Math.floor(s));return(0,t.jsx)(`div`,{"aria-hidden":`true`,className:f,style:u,...d,children:Array.from({length:n},(r,i)=>(0,t.jsx)(`div`,{className:e.default.line,style:i===n-1?{"--skeleton-line-width":`60%`}:void 0},i))})}return(0,t.jsx)(`div`,{"aria-hidden":`true`,className:f,style:{...r===`circle`?{width:`${o}px`,height:`${o}px`}:{width:n(i),height:n(a)},...u},...d})};exports.Skeleton=r;
 //# sourceMappingURL=Skeleton.cjs.map

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 const 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,CACpD,CAQA,IAAa,GAAY,CACvB,UAAU,OACV,QAAQ,OACR,SAAS,GACT,OAAO,GACP,QAAQ,EACR,WAAW,GACX,YACA,QACA,GAAG,KACgB,CACnB,IAAM,EAAU,CAAC,EAAA,QAAO,SAAU,EAAA,QAAO,GAAU,EAAW,EAAA,QAAO,SAAW,KAAM,CAAS,EAC5F,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,GAAI,IAAY,OAAQ,CACtB,IAAM,EAAY,KAAK,IAAI,EAAG,KAAK,MAAM,CAAK,CAAC,EAE/C,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,cAAY,OAAO,UAAW,EAAgB,QAAO,GAAI,WAC3D,MAAM,KAAK,CAAE,OAAQ,CAAU,GAAI,EAAG,KACrC,EAAA,EAAA,KAAC,MAAD,CAEE,UAAW,EAAA,QAAO,KAClB,MACE,IAAU,EAAY,EACjB,CAAE,wBAAyB,KAAM,EAClC,IAAA,EAEP,EAPM,CAON,CACF,CACE,CAAA,CAET,CAOA,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,cAAY,OAAO,UAAW,EAAS,MAAO,CAAE,GALrD,IAAY,SACR,CAAE,MAAO,GAAG,EAAK,IAAK,OAAQ,GAAG,EAAK,GAAI,EAC1C,CAAE,MAAO,EAAU,CAAK,EAAG,OAAQ,EAAU,CAAM,CAAE,EAGW,GAAG,CAAM,EAAG,GAAI,CAAQ,CAAA,CAEhG"}

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;
@@ -23,4 +23,4 @@ export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
  * GNOME HIG recommends `Spinner` or `ProgressBar` for loading states; this is a
  * pragmatic web-style extension for layouts that benefit from placeholder shape.
  */
-export declare function Skeleton({ variant, width, height, size, lines, animated, className, style, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare const Skeleton: ({ variant, width, height, size, lines, animated, className, style, ...props }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Skeleton.js

@@ -4,7 +4,7 @@ import { jsx as t } from "react/jsx-runtime";
 function n(e) {
 	return typeof e == "number" ? `${e}px` : e;
 }
-function r({ variant: r = "rect", width: i = "100%", height: a = 16, size: o = 40, lines: s = 3, animated: c = !0, className: l, style: u, ...d }) {
+var r = ({ variant: r = "rect", width: i = "100%", height: a = 16, size: o = 40, lines: s = 3, animated: c = !0, className: l, style: u, ...d }) => {
 	let f = [
 		e.skeleton,
 		e[r],
@@ -24,23 +24,22 @@ function r({ variant: r = "rect", width: i = "100%", height: a = 16, size: o = 4
 			}, i))
 		});
 	}
-	let p = r === "circle" ? {
-		width: `${o}px`,
-		height: `${o}px`
-	} : {
-		width: n(i),
-		height: n(a)
-	};
 	return /* @__PURE__ */ t("div", {
 		"aria-hidden": "true",
 		className: f,
 		style: {
-			...p,
+			...r === "circle" ? {
+				width: `${o}px`,
+				height: `${o}px`
+			} : {
+				width: n(i),
+				height: n(a)
+			},
 			...u
 		},
 		...d
 	});
-}
+};
 //#endregion
 export { r as Skeleton };
 

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 const 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;CACzC,OAAO,OAAO,KAAU,WAAW,GAAG,EAAM,MAAM;AACpD;AAQA,IAAa,KAAY,EACvB,aAAU,QACV,WAAQ,QACR,YAAS,IACT,UAAO,IACP,WAAQ,GACR,cAAW,IACX,cACA,UACA,GAAG,QACgB;CACnB,IAAM,IAAU;EAAC,EAAO;EAAU,EAAO;EAAU,IAAW,EAAO,WAAW;EAAM;CAAS,EAC5F,OAAO,OAAO,EACd,KAAK,GAAG;CAEX,IAAI,MAAY,QAAQ;EACtB,IAAM,IAAY,KAAK,IAAI,GAAG,KAAK,MAAM,CAAK,CAAC;EAE/C,OACE,kBAAC,OAAD;GAAK,eAAY;GAAO,WAAW;GAAgB;GAAO,GAAI;aAC3D,MAAM,KAAK,EAAE,QAAQ,EAAU,IAAI,GAAG,MACrC,kBAAC,OAAD;IAEE,WAAW,EAAO;IAClB,OACE,MAAU,IAAY,IACjB,EAAE,yBAAyB,MAAM,IAClC,KAAA;GAEP,GAPM,CAON,CACF;EACE,CAAA;CAET;CAOA,OACE,kBAAC,OAAD;EAAK,eAAY;EAAO,WAAW;EAAS,OAAO;GAAE,GALrD,MAAY,WACR;IAAE,OAAO,GAAG,EAAK;IAAK,QAAQ,GAAG,EAAK;GAAI,IAC1C;IAAE,OAAO,EAAU,CAAK;IAAG,QAAQ,EAAU,CAAM;GAAE;GAGW,GAAG;EAAM;EAAG,GAAI;CAAQ,CAAA;AAEhG"}

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/Skeleton.cjs

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

package/dist/components/Slider/Slider.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Slider.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);function r(e,t,n){return Math.min(n,Math.max(t,e))}function i(e,t,n,r){return parseFloat((Math.round((e-t)/n)*n+t).toFixed(r))}function a(e){let t=e.toString(),n=t.indexOf(`.`);return n===-1?0:t.length-n-1}function o({value:o,onChange:s,min:c=0,max:l=100,step:u=1,disabled:d=!1,marks:f,className:p,"aria-label":m,"aria-labelledby":h,"aria-describedby":g,..._}){let v=(0,t.useRef)(null),y=a(u),b=(r(o,c,l)-c)/(l-c)*100,x=(0,t.useCallback)(e=>{if(!v.current)return;let{left:t,width:n}=v.current.getBoundingClientRect();s(r(i((e-t)/n*(l-c)+c,c,u,y),c,l))},[c,l,u,y,s]),S=(0,t.useCallback)(e=>{d||(e.currentTarget.setPointerCapture(e.pointerId),x(e.clientX))},[d,x]),C=(0,t.useCallback)(e=>{e.currentTarget.hasPointerCapture(e.pointerId)&&x(e.clientX)},[x]),w=(0,t.useCallback)(e=>{let t=t=>{e.preventDefault(),s(r(i(t,c,u,y),c,l))};switch(e.key){case`ArrowRight`:case`ArrowUp`:t(o+u);break;case`ArrowLeft`:case`ArrowDown`:t(o-u);break;case`PageUp`:t(o+u*10);break;case`PageDown`:t(o-u*10);break;case`Home`:t(c);break;case`End`:t(l);break}},[o,u,c,l,y,s]),T=f&&f.length>0,E=T&&f.some(e=>e.label);return(0,n.jsxs)(`div`,{className:[e.default.wrapper,E?e.default.hasLabels:null,p].filter(Boolean).join(` `),..._,children:[(0,n.jsxs)(`div`,{ref:v,role:`slider`,tabIndex:d?-1:0,"aria-valuemin":c,"aria-valuemax":l,"aria-valuenow":o,"aria-label":m,"aria-labelledby":h,"aria-describedby":g,"aria-disabled":d||void 0,className:[e.default.track,d?e.default.disabled:null].filter(Boolean).join(` `),onPointerDown:S,onPointerMove:C,onKeyDown:d?void 0:w,children:[(0,n.jsx)(`div`,{className:e.default.fill,style:{width:`${b}%`}}),(0,n.jsx)(`div`,{className:e.default.thumb,style:{left:`${b}%`},"aria-hidden":`true`}),T&&f.map(t=>{let i=(r(t.value,c,l)-c)/(l-c)*100;return(0,n.jsx)(`div`,{className:e.default.tick,style:{left:`${i}%`},"aria-hidden":`true`},t.value)})]}),E&&(0,n.jsx)(`div`,{className:e.default.labels,"aria-hidden":`true`,children:f.map(t=>{let i=(r(t.value,c,l)-c)/(l-c)*100;return(0,n.jsx)(`span`,{className:e.default.markLabel,style:{left:`${i}%`},children:t.label},t.value)})})]})}exports.Slider=o;
+const e=require("./Slider.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(e,t,n){return Math.min(n,Math.max(t,e))}function i(e,t,n,r){return parseFloat((Math.round((e-t)/n)*n+t).toFixed(r))}function a(e){let t=e.toString(),n=t.indexOf(`.`);return n===-1?0:t.length-n-1}var o=({value:o,onChange:s,min:c=0,max:l=100,step:u=1,disabled:d=!1,marks:f,className:p,"aria-label":m,"aria-labelledby":h,"aria-describedby":g,..._})=>{let v=(0,t.useRef)(null),y=a(u),b=(r(o,c,l)-c)/(l-c)*100,x=(0,t.useCallback)(e=>{if(!v.current)return;let{left:t,width:n}=v.current.getBoundingClientRect();s(r(i((e-t)/n*(l-c)+c,c,u,y),c,l))},[c,l,u,y,s]),S=(0,t.useCallback)(e=>{d||(e.currentTarget.setPointerCapture(e.pointerId),x(e.clientX))},[d,x]),C=(0,t.useCallback)(e=>{e.currentTarget.hasPointerCapture(e.pointerId)&&x(e.clientX)},[x]),w=(0,t.useCallback)(e=>{let t=t=>{e.preventDefault(),s(r(i(t,c,u,y),c,l))};switch(e.key){case`ArrowRight`:case`ArrowUp`:t(o+u);break;case`ArrowLeft`:case`ArrowDown`:t(o-u);break;case`PageUp`:t(o+u*10);break;case`PageDown`:t(o-u*10);break;case`Home`:t(c);break;case`End`:t(l);break}},[o,u,c,l,y,s]),T=f&&f.length>0,E=T&&f.some(e=>e.label);return(0,n.jsxs)(`div`,{className:[e.default.wrapper,E?e.default.hasLabels:null,p].filter(Boolean).join(` `),..._,children:[(0,n.jsxs)(`div`,{ref:v,role:`slider`,tabIndex:d?-1:0,"aria-valuemin":c,"aria-valuemax":l,"aria-valuenow":o,"aria-label":m,"aria-labelledby":h,"aria-describedby":g,"aria-disabled":d||void 0,className:[e.default.track,d?e.default.disabled:null].filter(Boolean).join(` `),onPointerDown:S,onPointerMove:C,onKeyDown:d?void 0:w,children:[(0,n.jsx)(`div`,{className:e.default.fill,style:{width:`${b}%`}}),(0,n.jsx)(`div`,{className:e.default.thumb,style:{left:`${b}%`},"aria-hidden":`true`}),T&&f.map(t=>{let i=(r(t.value,c,l)-c)/(l-c)*100;return(0,n.jsx)(`div`,{className:e.default.tick,style:{left:`${i}%`},"aria-hidden":`true`},t.value)})]}),E&&(0,n.jsx)(`div`,{className:e.default.labels,"aria-hidden":`true`,children:f.map(t=>{let i=(r(t.value,c,l)-c)/(l-c)*100;return(0,n.jsx)(`span`,{className:e.default.markLabel,style:{left:`${i}%`},children:t.label},t.value)})})]})};exports.Slider=o;
 //# sourceMappingURL=Slider.cjs.map

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 const 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 const 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

@@ -12,7 +12,7 @@ function s(e) {
 	let t = e.toString(), n = t.indexOf(".");
 	return n === -1 ? 0 : t.length - n - 1;
 }
-function c({ value: c, onChange: l, min: u = 0, max: d = 100, step: f = 1, disabled: p = !1, marks: m, className: h, "aria-label": g, "aria-labelledby": _, "aria-describedby": v, ...y }) {
+var c = ({ value: c, onChange: l, min: u = 0, max: d = 100, step: f = 1, disabled: p = !1, marks: m, className: h, "aria-label": g, "aria-labelledby": _, "aria-describedby": v, ...y }) => {
 	let b = n(null), x = s(f), S = (a(c, u, d) - u) / (d - u) * 100, C = t((e) => {
 		if (!b.current) return;
 		let { left: t, width: n } = b.current.getBoundingClientRect();
@@ -115,7 +115,7 @@ function c({ value: c, onChange: l, min: u = 0, max: d = 100, step: f = 1, disab
 			})
 		})]
 	});
-}
+};
 //#endregion
 export { c as Slider };
 

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 const 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';

package/dist/components/Slider.cjs

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

package/dist/components/SpinButton/SpinButton.cjs

@@ -1,2 +1,2 @@
-const e=require(`./SpinButton.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);function r(e){let t=e.toString(),n=t.indexOf(`.`);return n===-1?0:t.length-n-1}function i(e,t,n){return Math.min(n,Math.max(t,e))}function a({value:a,onChange:o,min:s=0,max:c=100,step:l=1,decimals:u,disabled:d=!1,className:f,"aria-label":p,"aria-labelledby":m,...h}){let g=u??r(l),_=(0,t.useCallback)(e=>o(parseFloat(i(e,s,c).toFixed(g))),[o,s,c,g]),v=(0,t.useCallback)(e=>{switch(e.key){case`ArrowUp`:e.preventDefault(),_(a+l);break;case`ArrowDown`:e.preventDefault(),_(a-l);break;case`PageUp`:e.preventDefault(),_(a+l*10);break;case`PageDown`:e.preventDefault(),_(a-l*10);break;case`Home`:e.preventDefault(),_(s);break;case`End`:e.preventDefault(),_(c);break}},[a,l,s,c,_]);return(0,n.jsxs)(`div`,{role:`spinbutton`,"aria-valuenow":a,"aria-valuemin":s,"aria-valuemax":c,"aria-label":p,"aria-labelledby":m,"aria-disabled":d||void 0,tabIndex:d?-1:0,onKeyDown:d?void 0:v,className:[e.default.spin,d?e.default.disabled:null,f].filter(Boolean).join(` `),...h,children:[(0,n.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-hidden":`true`,disabled:d||a<=s,className:e.default.btn,onClick:()=>_(a-l),children:`−`}),(0,n.jsx)(`span`,{className:e.default.value,"aria-hidden":`true`,children:a.toFixed(g)}),(0,n.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-hidden":`true`,disabled:d||a>=c,className:e.default.btn,onClick:()=>_(a+l),children:`+`})]})}exports.SpinButton=a;
+const e=require("./SpinButton.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(e){let t=e.toString(),n=t.indexOf(`.`);return n===-1?0:t.length-n-1}function i(e,t,n){return Math.min(n,Math.max(t,e))}var a=({value:a,onChange:o,min:s=0,max:c=100,step:l=1,decimals:u,disabled:d=!1,className:f,"aria-label":p,"aria-labelledby":m,...h})=>{let g=u??r(l),_=(0,t.useCallback)(e=>o(parseFloat(i(e,s,c).toFixed(g))),[o,s,c,g]),v=(0,t.useCallback)(e=>{switch(e.key){case`ArrowUp`:e.preventDefault(),_(a+l);break;case`ArrowDown`:e.preventDefault(),_(a-l);break;case`PageUp`:e.preventDefault(),_(a+l*10);break;case`PageDown`:e.preventDefault(),_(a-l*10);break;case`Home`:e.preventDefault(),_(s);break;case`End`:e.preventDefault(),_(c);break}},[a,l,s,c,_]);return(0,n.jsxs)(`div`,{role:`spinbutton`,"aria-valuenow":a,"aria-valuemin":s,"aria-valuemax":c,"aria-label":p,"aria-labelledby":m,"aria-disabled":d||void 0,tabIndex:d?-1:0,onKeyDown:d?void 0:v,className:[e.default.spin,d?e.default.disabled:null,f].filter(Boolean).join(` `),...h,children:[(0,n.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-hidden":`true`,disabled:d||a<=s,className:e.default.btn,onClick:()=>_(a-l),children:`−`}),(0,n.jsx)(`span`,{className:e.default.value,"aria-hidden":`true`,children:a.toFixed(g)}),(0,n.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-hidden":`true`,disabled:d||a>=c,className:e.default.btn,onClick:()=>_(a+l),children:`+`})]})};exports.SpinButton=a;
 //# sourceMappingURL=SpinButton.cjs.map

package/dist/components/SpinButton/SpinButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SpinButton.cjs","names":[],"sources":["../../../src/components/SpinButton/SpinButton.tsx"],"sourcesContent":["import { useCallback, type KeyboardEvent, type HTMLAttributes } from \"react\";\nimport styles from \"./SpinButton.module.css\";\n\nexport interface SpinButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Current value. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum allowed value. Defaults to `0`. */\n  min?: number;\n  /** Maximum allowed value. Defaults to `100`. */\n  max?: number;\n  /** Amount to increment/decrement per step. Defaults to `1`. */\n  step?: number;\n  /** Number of decimal places shown. Derived from `step` when omitted. */\n  decimals?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /** Accessible label. Required when no visible `<label>` is associated. */\n  \"aria-label\"?: string;\n  /** Associates the control with a visible label element. */\n  \"aria-labelledby\"?: string;\n}\n\nfunction countDecimals(n: number): number {\n  const s = n.toString();\n  const dot = s.indexOf(\".\");\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\n/**\n * Numeric input with − and + buttons following the Adwaita `GtkSpinButton` style.\n *\n * Supports keyboard interaction: ↑/↓ increment by one step,\n * Page Up/Down increment by 10×, Home/End jump to min/max.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/spin-buttons.html\n */\nexport function SpinButton({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  decimals,\n  disabled = false,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...props\n}: SpinButtonProps) {\n  const dp = decimals ?? countDecimals(step);\n\n  const set = useCallback(\n    (next: number) => onChange(parseFloat(clamp(next, min, max).toFixed(dp))),\n    [onChange, min, max, dp],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      switch (e.key) {\n        case \"ArrowUp\":   e.preventDefault(); set(value + step); break;\n        case \"ArrowDown\": e.preventDefault(); set(value - step); break;\n        case \"PageUp\":    e.preventDefault(); set(value + step * 10); break;\n        case \"PageDown\":  e.preventDefault(); set(value - step * 10); break;\n        case \"Home\":      e.preventDefault(); set(min); break;\n        case \"End\":       e.preventDefault(); set(max); break;\n      }\n    },\n    [value, step, min, max, set],\n  );\n\n  return (\n    <div\n      role=\"spinbutton\"\n      aria-valuenow={value}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-disabled={disabled || undefined}\n      tabIndex={disabled ? -1 : 0}\n      onKeyDown={disabled ? undefined : handleKeyDown}\n      className={[styles.spin, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        disabled={disabled || value <= min}\n        className={styles.btn}\n        onClick={() => set(value - step)}\n      >\n        −\n      </button>\n\n      <span className={styles.value} aria-hidden=\"true\">\n        {value.toFixed(dp)}\n      </span>\n\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        disabled={disabled || value >= max}\n        className={styles.btn}\n        onClick={() => set(value + step)}\n      >\n        +\n      </button>\n    </div>\n  );\n}\n"],"mappings":"qGAyBA,SAAS,EAAc,EAAmB,CACxC,IAAM,EAAI,EAAE,UAAU,CAChB,EAAM,EAAE,QAAQ,IAAI,CAC1B,OAAO,IAAQ,GAAK,EAAI,EAAE,OAAS,EAAM,EAG3C,SAAS,EAAM,EAAe,EAAa,EAAqB,CAC9D,OAAO,KAAK,IAAI,EAAK,KAAK,IAAI,EAAK,EAAM,CAAC,CAW5C,SAAgB,EAAW,CACzB,QACA,WACA,MAAM,EACN,MAAM,IACN,OAAO,EACP,WACA,WAAW,GACX,YACA,aAAc,EACd,kBAAmB,EACnB,GAAG,GACe,CAClB,IAAM,EAAK,GAAY,EAAc,EAAK,CAEpC,GAAA,EAAA,EAAA,aACH,GAAiB,EAAS,WAAW,EAAM,EAAM,EAAK,EAAI,CAAC,QAAQ,EAAG,CAAC,CAAC,CACzE,CAAC,EAAU,EAAK,EAAK,EAAG,CACzB,CAEK,GAAA,EAAA,EAAA,aACH,GAAqC,CACpC,OAAQ,EAAE,IAAV,CACE,IAAK,UAAa,EAAE,gBAAgB,CAAE,EAAI,EAAQ,EAAK,CAAE,MACzD,IAAK,YAAa,EAAE,gBAAgB,CAAE,EAAI,EAAQ,EAAK,CAAE,MACzD,IAAK,SAAa,EAAE,gBAAgB,CAAE,EAAI,EAAQ,EAAO,GAAG,CAAE,MAC9D,IAAK,WAAa,EAAE,gBAAgB,CAAE,EAAI,EAAQ,EAAO,GAAG,CAAE,MAC9D,IAAK,OAAa,EAAE,gBAAgB,CAAE,EAAI,EAAI,CAAE,MAChD,IAAK,MAAa,EAAE,gBAAgB,CAAE,EAAI,EAAI,CAAE,QAGpD,CAAC,EAAO,EAAM,EAAK,EAAK,EAAI,CAC7B,CAED,OACE,EAAA,EAAA,MAAC,MAAD,CACE,KAAK,aACL,gBAAe,EACf,gBAAe,EACf,gBAAe,EACf,aAAY,EACZ,kBAAiB,EACjB,gBAAe,GAAY,IAAA,GAC3B,SAAU,EAAW,GAAK,EAC1B,UAAW,EAAW,IAAA,GAAY,EAClC,UAAW,CAAC,EAAA,QAAO,KAAM,EAAW,EAAA,QAAO,SAAW,KAAM,EAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAbN,EAeE,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,cAAY,OACZ,SAAU,GAAY,GAAS,EAC/B,UAAW,EAAA,QAAO,IAClB,YAAe,EAAI,EAAQ,EAAK,UACjC,IAEQ,CAAA,EAET,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAO,cAAY,gBACxC,EAAM,QAAQ,EAAG,CACb,CAAA,EAEP,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,cAAY,OACZ,SAAU,GAAY,GAAS,EAC/B,UAAW,EAAA,QAAO,IAClB,YAAe,EAAI,EAAQ,EAAK,UACjC,IAEQ,CAAA,CACL"}
+{"version":3,"file":"SpinButton.cjs","names":[],"sources":["../../../src/components/SpinButton/SpinButton.tsx"],"sourcesContent":["import { type HTMLAttributes, type KeyboardEvent, useCallback } from 'react';\n\nimport styles from './SpinButton.module.css';\n\nexport interface SpinButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current value. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum allowed value. Defaults to `0`. */\n  min?: number;\n  /** Maximum allowed value. Defaults to `100`. */\n  max?: number;\n  /** Amount to increment/decrement per step. Defaults to `1`. */\n  step?: number;\n  /** Number of decimal places shown. Derived from `step` when omitted. */\n  decimals?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /** Accessible label. Required when no visible `<label>` is associated. */\n  'aria-label'?: string;\n  /** Associates the control with a visible label element. */\n  'aria-labelledby'?: string;\n}\n\nfunction countDecimals(n: number): number {\n  const s = n.toString();\n  const dot = s.indexOf('.');\n\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\n/**\n * Numeric input with − and + buttons following the Adwaita `GtkSpinButton` style.\n *\n * Supports keyboard interaction: ↑/↓ increment by one step,\n * Page Up/Down increment by 10×, Home/End jump to min/max.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/spin-buttons.html\n */\nexport const SpinButton = ({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  decimals,\n  disabled = false,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: SpinButtonProps) => {\n  const dp = decimals ?? countDecimals(step);\n\n  const set = useCallback(\n    (next: number) => onChange(parseFloat(clamp(next, min, max).toFixed(dp))),\n    [onChange, min, max, dp],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      switch (e.key) {\n        case 'ArrowUp':\n          e.preventDefault();\n          set(value + step);\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          set(value - step);\n          break;\n        case 'PageUp':\n          e.preventDefault();\n          set(value + step * 10);\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          set(value - step * 10);\n          break;\n        case 'Home':\n          e.preventDefault();\n          set(min);\n          break;\n        case 'End':\n          e.preventDefault();\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, set],\n  );\n\n  return (\n    <div\n      role=\"spinbutton\"\n      aria-valuenow={value}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-disabled={disabled || undefined}\n      tabIndex={disabled ? -1 : 0}\n      onKeyDown={disabled ? undefined : handleKeyDown}\n      className={[styles.spin, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        disabled={disabled || value <= min}\n        className={styles.btn}\n        onClick={() => set(value - step)}\n      >\n        −\n      </button>\n\n      <span className={styles.value} aria-hidden=\"true\">\n        {value.toFixed(dp)}\n      </span>\n\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        disabled={disabled || value >= max}\n        className={styles.btn}\n        onClick={() => set(value + step)}\n      >\n        +\n      </button>\n    </div>\n  );\n};\n"],"mappings":"qGAyBA,SAAS,EAAc,EAAmB,CACxC,IAAM,EAAI,EAAE,SAAS,EACf,EAAM,EAAE,QAAQ,GAAG,EAEzB,OAAO,IAAQ,GAAK,EAAI,EAAE,OAAS,EAAM,CAC3C,CAEA,SAAS,EAAM,EAAe,EAAa,EAAqB,CAC9D,OAAO,KAAK,IAAI,EAAK,KAAK,IAAI,EAAK,CAAK,CAAC,CAC3C,CAUA,IAAa,GAAc,CACzB,QACA,WACA,MAAM,EACN,MAAM,IACN,OAAO,EACP,WACA,WAAW,GACX,YACA,aAAc,EACd,kBAAmB,EACnB,GAAG,KACkB,CACrB,IAAM,EAAK,GAAY,EAAc,CAAI,EAEnC,GAAA,EAAA,EAAA,aACH,GAAiB,EAAS,WAAW,EAAM,EAAM,EAAK,CAAG,EAAE,QAAQ,CAAE,CAAC,CAAC,EACxE,CAAC,EAAU,EAAK,EAAK,CAAE,CACzB,EAEM,GAAA,EAAA,EAAA,aACH,GAAqC,CACpC,OAAQ,EAAE,IAAV,CACE,IAAK,UACH,EAAE,eAAe,EACjB,EAAI,EAAQ,CAAI,EAChB,MACF,IAAK,YACH,EAAE,eAAe,EACjB,EAAI,EAAQ,CAAI,EAChB,MACF,IAAK,SACH,EAAE,eAAe,EACjB,EAAI,EAAQ,EAAO,EAAE,EACrB,MACF,IAAK,WACH,EAAE,eAAe,EACjB,EAAI,EAAQ,EAAO,EAAE,EACrB,MACF,IAAK,OACH,EAAE,eAAe,EACjB,EAAI,CAAG,EACP,MACF,IAAK,MACH,EAAE,eAAe,EACjB,EAAI,CAAG,EACP,KACJ,CACF,EACA,CAAC,EAAO,EAAM,EAAK,EAAK,CAAG,CAC7B,EAEA,OACE,EAAA,EAAA,MAAC,MAAD,CACE,KAAK,aACL,gBAAe,EACf,gBAAe,EACf,gBAAe,EACf,aAAY,EACZ,kBAAiB,EACjB,gBAAe,GAAY,IAAA,GAC3B,SAAU,EAAW,GAAK,EAC1B,UAAW,EAAW,IAAA,GAAY,EAClC,UAAW,CAAC,EAAA,QAAO,KAAM,EAAW,EAAA,QAAO,SAAW,KAAM,CAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,WAbN,EAeE,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,cAAY,OACZ,SAAU,GAAY,GAAS,EAC/B,UAAW,EAAA,QAAO,IAClB,YAAe,EAAI,EAAQ,CAAI,WAChC,GAEO,CAAA,GAER,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAO,cAAY,gBACxC,EAAM,QAAQ,CAAE,CACb,CAAA,GAEN,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,cAAY,OACZ,SAAU,GAAY,GAAS,EAC/B,UAAW,EAAA,QAAO,IAClB,YAAe,EAAI,EAAQ,CAAI,WAChC,GAEO,CAAA,CACL,GAET"}