@gnome-ui/react 1.48.0 → 1.49.1

package/dist/components/BreakpointBin/BreakpointBin.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BreakpointBin.cjs","names":[],"sources":["../../../src/components/BreakpointBin/BreakpointBin.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface BreakpointDefinition {\n  /**\n   * Identifier for this breakpoint, e.g. `\"compact\"` or `\"narrow\"`.\n   * Exposed as `data-breakpoint` on the container element for CSS targeting.\n   */\n  name: string;\n  /**\n   * Container width threshold in pixels.\n   * This breakpoint becomes active when the container width is ≤ this value.\n   */\n  maxWidth: number;\n}\n\nexport interface BreakpointBinState {\n  /**\n   * Name of the currently active breakpoint, or `null` when the container\n   * is wider than all defined breakpoints.\n   */\n  activeBreakpoint: string | null;\n  /** Current container width in px (from `ResizeObserver`). */\n  width: number;\n}\n\nexport interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /**\n   * Breakpoint definitions sorted by `maxWidth` ascending.\n   * The active breakpoint is the smallest `maxWidth` ≥ the container's current width.\n   */\n  breakpoints: BreakpointDefinition[];\n  /**\n   * Render prop that receives the current breakpoint state.\n   *\n   * @example\n   * ```tsx\n   * <BreakpointBin breakpoints={[{ name: \"compact\", maxWidth: 400 }]}>\n   *   {({ activeBreakpoint }) =>\n   *     activeBreakpoint === \"compact\" ? <CompactLayout /> : <WideLayout />\n   *   }\n   * </BreakpointBin>\n   * ```\n   */\n  children: (state: BreakpointBinState) => ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Container that fires layout changes when **its own width** crosses defined\n * thresholds — the CSS container-query equivalent of `AdwBreakpointBin`\n * (libadwaita 1.9 / GNOME 50).\n *\n * Unlike `useBreakpoint` (which watches the viewport), `BreakpointBin` uses\n * `ResizeObserver` to watch the element itself. This makes it composable:\n * the same component can behave differently depending on how much space it\n * is given by its parent, regardless of the viewport size.\n *\n * ### How it works\n * - Breakpoints are evaluated in ascending `maxWidth` order.\n * - The active breakpoint is the first one whose `maxWidth` ≥ the container width.\n * - When no breakpoint matches (container is wider than all), `activeBreakpoint` is `null`.\n * - The active name is set as `data-breakpoint` on the wrapper `<div>` for CSS targeting.\n *\n * ### CSS targeting\n * ```css\n * .myWidget[data-breakpoint=\"compact\"] .layout { flex-direction: column; }\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html\n */\nexport const BreakpointBin = ({\n  breakpoints,\n  children,\n  className,\n  style,\n  ...props\n}: BreakpointBinProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [state, setState] = useState<BreakpointBinState>({\n    activeBreakpoint: null,\n    width: 0,\n  });\n\n  useEffect(() => {\n    const el = containerRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    // Sort breakpoints ascending so we find the smallest matching threshold\n    const sorted = [...breakpoints].sort((a, b) => a.maxWidth - b.maxWidth);\n\n    const evaluate = (width: number): BreakpointBinState => {\n      const match = sorted.find((bp) => width <= bp.maxWidth) ?? null;\n\n      return { activeBreakpoint: match?.name ?? null, width };\n    };\n\n    // Initial measurement\n    setState(evaluate(el.offsetWidth));\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n\n      if (!entry) {\n        return;\n      }\n\n      // contentBoxSize is more reliable than contentRect for inline-size\n      const width = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n\n      setState(evaluate(width));\n    });\n\n    observer.observe(el);\n\n    return () => observer.disconnect();\n  }, [breakpoints]);\n\n  const containerStyle: CSSProperties = {\n    // Ensure the container establishes a containing block\n    // so ResizeObserver reflects actual layout width\n    minWidth: 0,\n    ...style,\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={containerStyle}\n      data-breakpoint={state.activeBreakpoint ?? undefined}\n      {...props}\n    >\n      {children(state)}\n    </div>\n  );\n};\n"],"mappings":"sDAgFA,IAAa,GAAiB,CAC5B,cACA,WACA,YACA,QACA,GAAG,KACqB,CACxB,IAAM,GAAA,EAAA,EAAA,QAAsC,IAAI,EAC1C,CAAC,EAAO,IAAA,EAAA,EAAA,UAAyC,CACrD,iBAAkB,KAClB,MAAO,CACT,CAAC,EA8CD,OA5CA,EAAA,EAAA,eAAgB,CACd,IAAM,EAAK,EAAa,QAExB,GAAI,CAAC,EACH,OAIF,IAAM,EAAS,CAAC,GAAG,CAAW,EAAE,MAAM,EAAG,IAAM,EAAE,SAAW,EAAE,QAAQ,EAEhE,EAAY,IAGT,CAAE,kBAFK,EAAO,KAAM,GAAO,GAAS,EAAG,QAAQ,GAAK,OAEzB,MAAQ,KAAM,OAAM,GAIxD,EAAS,EAAS,EAAG,WAAW,CAAC,EAEjC,IAAM,EAAW,IAAI,eAAgB,GAAY,CAC/C,IAAM,EAAQ,EAAQ,GAEjB,GAOL,EAAS,EAFK,EAAM,iBAAiB,IAAI,YAAc,EAAM,YAAY,KAElD,CAAC,CAC1B,CAAC,EAID,OAFA,EAAS,QAAQ,CAAE,MAEN,EAAS,WAAW,CACnC,EAAG,CAAC,CAAW,CAAC,GAUd,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACM,YACX,MAAO,CART,SAAU,EACV,GAAG,CAOM,EACP,kBAAiB,EAAM,kBAAoB,IAAA,GAC3C,GAAI,WAEH,EAAS,CAAK,CACZ,CAAA,CAET"}
+{"version":3,"file":"BreakpointBin.cjs","names":[],"sources":["../../../src/components/BreakpointBin/BreakpointBin.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface BreakpointDefinition {\n  /**\n   * Identifier for this breakpoint, e.g. `\"compact\"` or `\"narrow\"`.\n   * Exposed as `data-breakpoint` on the container element for CSS targeting.\n   */\n  name: string;\n  /**\n   * Container width threshold in pixels.\n   * This breakpoint becomes active when the container width is ≤ this value.\n   */\n  maxWidth: number;\n}\n\nexport interface BreakpointBinState {\n  /**\n   * Name of the currently active breakpoint, or `null` when the container\n   * is wider than all defined breakpoints.\n   */\n  activeBreakpoint: string | null;\n  /** Current container width in px (from `ResizeObserver`). */\n  width: number;\n}\n\nexport interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /**\n   * Breakpoint definitions sorted by `maxWidth` ascending.\n   * The active breakpoint is the smallest `maxWidth` ≥ the container's current width.\n   */\n  breakpoints: BreakpointDefinition[];\n  /**\n   * Render prop that receives the current breakpoint state.\n   *\n   * @example\n   * ```tsx\n   * <BreakpointBin breakpoints={[{ name: \"compact\", maxWidth: 400 }]}>\n   *   {({ activeBreakpoint }) =>\n   *     activeBreakpoint === \"compact\" ? <CompactLayout /> : <WideLayout />\n   *   }\n   * </BreakpointBin>\n   * ```\n   */\n  children: (state: BreakpointBinState) => ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Container that fires layout changes when **its own width** crosses defined\n * thresholds — the CSS container-query equivalent of `AdwBreakpointBin`\n * (libadwaita 1.9 / GNOME 50).\n *\n * Unlike `useBreakpoint` (which watches the viewport), `BreakpointBin` uses\n * `ResizeObserver` to watch the element itself. This makes it composable:\n * the same component can behave differently depending on how much space it\n * is given by its parent, regardless of the viewport size.\n *\n * ### How it works\n * - Breakpoints are evaluated in ascending `maxWidth` order.\n * - The active breakpoint is the first one whose `maxWidth` ≥ the container width.\n * - When no breakpoint matches (container is wider than all), `activeBreakpoint` is `null`.\n * - The active name is set as `data-breakpoint` on the wrapper `<div>` for CSS targeting.\n *\n * ### CSS targeting\n * ```css\n * .myWidget[data-breakpoint=\"compact\"] .layout { flex-direction: column; }\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html\n */\nexport const BreakpointBin = ({\n  breakpoints,\n  children,\n  className,\n  style,\n  ...props\n}: BreakpointBinProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [state, setState] = useState<BreakpointBinState>({\n    activeBreakpoint: null,\n    width: 0,\n  });\n\n  useEffect(() => {\n    const el = containerRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    // Sort breakpoints ascending so we find the smallest matching threshold\n    const sorted = [...breakpoints].sort((a, b) => a.maxWidth - b.maxWidth);\n\n    const evaluate = (width: number): BreakpointBinState => {\n      const match = sorted.find((bp) => width <= bp.maxWidth) ?? null;\n\n      return { activeBreakpoint: match?.name ?? null, width };\n    };\n\n    // Initial measurement\n    setState(evaluate(el.offsetWidth));\n\n    const observer = new ResizeObserver((entries) => {\n      const [entry] = entries;\n\n      if (!entry) {\n        return;\n      }\n\n      // contentBoxSize is more reliable than contentRect for inline-size\n      const width = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n\n      setState(evaluate(width));\n    });\n\n    observer.observe(el);\n\n    return () => observer.disconnect();\n  }, [breakpoints]);\n\n  const containerStyle: CSSProperties = {\n    // Ensure the container establishes a containing block\n    // so ResizeObserver reflects actual layout width\n    minWidth: 0,\n    ...style,\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={containerStyle}\n      data-breakpoint={state.activeBreakpoint ?? undefined}\n      {...props}\n    >\n      {children(state)}\n    </div>\n  );\n};\n"],"mappings":"sDAgFA,IAAa,GAAiB,CAC5B,cACA,WACA,YACA,QACA,GAAG,KACqB,CACxB,IAAM,GAAA,EAAA,EAAA,QAAsC,IAAI,EAC1C,CAAC,EAAO,IAAA,EAAA,EAAA,UAAyC,CACrD,iBAAkB,KAClB,MAAO,CACT,CAAC,EA8CD,OA5CA,EAAA,EAAA,eAAgB,CACd,IAAM,EAAK,EAAa,QAExB,GAAI,CAAC,EACH,OAIF,IAAM,EAAS,CAAC,GAAG,CAAW,EAAE,MAAM,EAAG,IAAM,EAAE,SAAW,EAAE,QAAQ,EAEhE,EAAY,IAGT,CAAE,kBAFK,EAAO,KAAM,GAAO,GAAS,EAAG,QAAQ,GAAK,OAEzB,MAAQ,KAAM,OAAM,GAIxD,EAAS,EAAS,EAAG,WAAW,CAAC,EAEjC,IAAM,EAAW,IAAI,eAAgB,GAAY,CAC/C,GAAM,CAAC,GAAS,EAEX,GAOL,EAAS,EAFK,EAAM,iBAAiB,IAAI,YAAc,EAAM,YAAY,KAElD,CAAC,CAC1B,CAAC,EAID,OAFA,EAAS,QAAQ,CAAE,MAEN,EAAS,WAAW,CACnC,EAAG,CAAC,CAAW,CAAC,GAUd,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACM,YACX,MAAO,CART,SAAU,EACV,GAAG,CAOM,EACP,kBAAiB,EAAM,kBAAoB,IAAA,GAC3C,GAAI,WAEH,EAAS,CAAK,CACZ,CAAA,CAET"}

package/dist/components/BreakpointBin/BreakpointBin.js

@@ -15,7 +15,7 @@ var i = ({ breakpoints: i, children: a, className: o, style: s, ...c }) => {
 		});
 		d(n(e.offsetWidth));
 		let r = new ResizeObserver((e) => {
-			let t = e[0];
+			let [t] = e;
 			t && d(n(t.contentBoxSize?.[0]?.inlineSize ?? t.contentRect.width));
 		});
 		return r.observe(e), () => r.disconnect();

package/dist/components/BreakpointBin/BreakpointBin.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreakpointBin.js","names":[],"sources":["../../../src/components/BreakpointBin/BreakpointBin.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface BreakpointDefinition {\n  /**\n   * Identifier for this breakpoint, e.g. `\"compact\"` or `\"narrow\"`.\n   * Exposed as `data-breakpoint` on the container element for CSS targeting.\n   */\n  name: string;\n  /**\n   * Container width threshold in pixels.\n   * This breakpoint becomes active when the container width is ≤ this value.\n   */\n  maxWidth: number;\n}\n\nexport interface BreakpointBinState {\n  /**\n   * Name of the currently active breakpoint, or `null` when the container\n   * is wider than all defined breakpoints.\n   */\n  activeBreakpoint: string | null;\n  /** Current container width in px (from `ResizeObserver`). */\n  width: number;\n}\n\nexport interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /**\n   * Breakpoint definitions sorted by `maxWidth` ascending.\n   * The active breakpoint is the smallest `maxWidth` ≥ the container's current width.\n   */\n  breakpoints: BreakpointDefinition[];\n  /**\n   * Render prop that receives the current breakpoint state.\n   *\n   * @example\n   * ```tsx\n   * <BreakpointBin breakpoints={[{ name: \"compact\", maxWidth: 400 }]}>\n   *   {({ activeBreakpoint }) =>\n   *     activeBreakpoint === \"compact\" ? <CompactLayout /> : <WideLayout />\n   *   }\n   * </BreakpointBin>\n   * ```\n   */\n  children: (state: BreakpointBinState) => ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Container that fires layout changes when **its own width** crosses defined\n * thresholds — the CSS container-query equivalent of `AdwBreakpointBin`\n * (libadwaita 1.9 / GNOME 50).\n *\n * Unlike `useBreakpoint` (which watches the viewport), `BreakpointBin` uses\n * `ResizeObserver` to watch the element itself. This makes it composable:\n * the same component can behave differently depending on how much space it\n * is given by its parent, regardless of the viewport size.\n *\n * ### How it works\n * - Breakpoints are evaluated in ascending `maxWidth` order.\n * - The active breakpoint is the first one whose `maxWidth` ≥ the container width.\n * - When no breakpoint matches (container is wider than all), `activeBreakpoint` is `null`.\n * - The active name is set as `data-breakpoint` on the wrapper `<div>` for CSS targeting.\n *\n * ### CSS targeting\n * ```css\n * .myWidget[data-breakpoint=\"compact\"] .layout { flex-direction: column; }\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html\n */\nexport const BreakpointBin = ({\n  breakpoints,\n  children,\n  className,\n  style,\n  ...props\n}: BreakpointBinProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [state, setState] = useState<BreakpointBinState>({\n    activeBreakpoint: null,\n    width: 0,\n  });\n\n  useEffect(() => {\n    const el = containerRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    // Sort breakpoints ascending so we find the smallest matching threshold\n    const sorted = [...breakpoints].sort((a, b) => a.maxWidth - b.maxWidth);\n\n    const evaluate = (width: number): BreakpointBinState => {\n      const match = sorted.find((bp) => width <= bp.maxWidth) ?? null;\n\n      return { activeBreakpoint: match?.name ?? null, width };\n    };\n\n    // Initial measurement\n    setState(evaluate(el.offsetWidth));\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n\n      if (!entry) {\n        return;\n      }\n\n      // contentBoxSize is more reliable than contentRect for inline-size\n      const width = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n\n      setState(evaluate(width));\n    });\n\n    observer.observe(el);\n\n    return () => observer.disconnect();\n  }, [breakpoints]);\n\n  const containerStyle: CSSProperties = {\n    // Ensure the container establishes a containing block\n    // so ResizeObserver reflects actual layout width\n    minWidth: 0,\n    ...style,\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={containerStyle}\n      data-breakpoint={state.activeBreakpoint ?? undefined}\n      {...props}\n    >\n      {children(state)}\n    </div>\n  );\n};\n"],"mappings":";;;AAgFA,IAAa,KAAiB,EAC5B,gBACA,aACA,cACA,UACA,GAAG,QACqB;CACxB,IAAM,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAO,KAAY,EAA6B;EACrD,kBAAkB;EAClB,OAAO;CACT,CAAC;CA8CD,OA5CA,QAAgB;EACd,IAAM,IAAK,EAAa;EAExB,IAAI,CAAC,GACH;EAIF,IAAM,IAAS,CAAC,GAAG,CAAW,EAAE,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ,GAEhE,KAAY,OAGT;GAAE,mBAFK,EAAO,MAAM,MAAO,KAAS,EAAG,QAAQ,KAAK,OAEzB,QAAQ;GAAM;EAAM;EAIxD,EAAS,EAAS,EAAG,WAAW,CAAC;EAEjC,IAAM,IAAW,IAAI,gBAAgB,MAAY;GAC/C,IAAM,IAAQ,EAAQ;GAEjB,KAOL,EAAS,EAFK,EAAM,iBAAiB,IAAI,cAAc,EAAM,YAAY,KAElD,CAAC;EAC1B,CAAC;EAID,OAFA,EAAS,QAAQ,CAAE,SAEN,EAAS,WAAW;CACnC,GAAG,CAAC,CAAW,CAAC,GAUd,kBAAC,OAAD;EACE,KAAK;EACM;EACX,OAAO;GART,UAAU;GACV,GAAG;EAOM;EACP,mBAAiB,EAAM,oBAAoB,KAAA;EAC3C,GAAI;YAEH,EAAS,CAAK;CACZ,CAAA;AAET"}
+{"version":3,"file":"BreakpointBin.js","names":[],"sources":["../../../src/components/BreakpointBin/BreakpointBin.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface BreakpointDefinition {\n  /**\n   * Identifier for this breakpoint, e.g. `\"compact\"` or `\"narrow\"`.\n   * Exposed as `data-breakpoint` on the container element for CSS targeting.\n   */\n  name: string;\n  /**\n   * Container width threshold in pixels.\n   * This breakpoint becomes active when the container width is ≤ this value.\n   */\n  maxWidth: number;\n}\n\nexport interface BreakpointBinState {\n  /**\n   * Name of the currently active breakpoint, or `null` when the container\n   * is wider than all defined breakpoints.\n   */\n  activeBreakpoint: string | null;\n  /** Current container width in px (from `ResizeObserver`). */\n  width: number;\n}\n\nexport interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /**\n   * Breakpoint definitions sorted by `maxWidth` ascending.\n   * The active breakpoint is the smallest `maxWidth` ≥ the container's current width.\n   */\n  breakpoints: BreakpointDefinition[];\n  /**\n   * Render prop that receives the current breakpoint state.\n   *\n   * @example\n   * ```tsx\n   * <BreakpointBin breakpoints={[{ name: \"compact\", maxWidth: 400 }]}>\n   *   {({ activeBreakpoint }) =>\n   *     activeBreakpoint === \"compact\" ? <CompactLayout /> : <WideLayout />\n   *   }\n   * </BreakpointBin>\n   * ```\n   */\n  children: (state: BreakpointBinState) => ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Container that fires layout changes when **its own width** crosses defined\n * thresholds — the CSS container-query equivalent of `AdwBreakpointBin`\n * (libadwaita 1.9 / GNOME 50).\n *\n * Unlike `useBreakpoint` (which watches the viewport), `BreakpointBin` uses\n * `ResizeObserver` to watch the element itself. This makes it composable:\n * the same component can behave differently depending on how much space it\n * is given by its parent, regardless of the viewport size.\n *\n * ### How it works\n * - Breakpoints are evaluated in ascending `maxWidth` order.\n * - The active breakpoint is the first one whose `maxWidth` ≥ the container width.\n * - When no breakpoint matches (container is wider than all), `activeBreakpoint` is `null`.\n * - The active name is set as `data-breakpoint` on the wrapper `<div>` for CSS targeting.\n *\n * ### CSS targeting\n * ```css\n * .myWidget[data-breakpoint=\"compact\"] .layout { flex-direction: column; }\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html\n */\nexport const BreakpointBin = ({\n  breakpoints,\n  children,\n  className,\n  style,\n  ...props\n}: BreakpointBinProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [state, setState] = useState<BreakpointBinState>({\n    activeBreakpoint: null,\n    width: 0,\n  });\n\n  useEffect(() => {\n    const el = containerRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    // Sort breakpoints ascending so we find the smallest matching threshold\n    const sorted = [...breakpoints].sort((a, b) => a.maxWidth - b.maxWidth);\n\n    const evaluate = (width: number): BreakpointBinState => {\n      const match = sorted.find((bp) => width <= bp.maxWidth) ?? null;\n\n      return { activeBreakpoint: match?.name ?? null, width };\n    };\n\n    // Initial measurement\n    setState(evaluate(el.offsetWidth));\n\n    const observer = new ResizeObserver((entries) => {\n      const [entry] = entries;\n\n      if (!entry) {\n        return;\n      }\n\n      // contentBoxSize is more reliable than contentRect for inline-size\n      const width = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n\n      setState(evaluate(width));\n    });\n\n    observer.observe(el);\n\n    return () => observer.disconnect();\n  }, [breakpoints]);\n\n  const containerStyle: CSSProperties = {\n    // Ensure the container establishes a containing block\n    // so ResizeObserver reflects actual layout width\n    minWidth: 0,\n    ...style,\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={containerStyle}\n      data-breakpoint={state.activeBreakpoint ?? undefined}\n      {...props}\n    >\n      {children(state)}\n    </div>\n  );\n};\n"],"mappings":";;;AAgFA,IAAa,KAAiB,EAC5B,gBACA,aACA,cACA,UACA,GAAG,QACqB;CACxB,IAAM,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAO,KAAY,EAA6B;EACrD,kBAAkB;EAClB,OAAO;CACT,CAAC;CA8CD,OA5CA,QAAgB;EACd,IAAM,IAAK,EAAa;EAExB,IAAI,CAAC,GACH;EAIF,IAAM,IAAS,CAAC,GAAG,CAAW,EAAE,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ,GAEhE,KAAY,OAGT;GAAE,mBAFK,EAAO,MAAM,MAAO,KAAS,EAAG,QAAQ,KAAK,OAEzB,QAAQ;GAAM;EAAM;EAIxD,EAAS,EAAS,EAAG,WAAW,CAAC;EAEjC,IAAM,IAAW,IAAI,gBAAgB,MAAY;GAC/C,IAAM,CAAC,KAAS;GAEX,KAOL,EAAS,EAFK,EAAM,iBAAiB,IAAI,cAAc,EAAM,YAAY,KAElD,CAAC;EAC1B,CAAC;EAID,OAFA,EAAS,QAAQ,CAAE,SAEN,EAAS,WAAW;CACnC,GAAG,CAAC,CAAW,CAAC,GAUd,kBAAC,OAAD;EACE,KAAK;EACM;EACX,OAAO;GART,UAAU;GACV,GAAG;EAOM;EACP,mBAAiB,EAAM,oBAAoB,KAAA;EAC3C,GAAI;YAEH,EAAS,CAAK;CACZ,CAAA;AAET"}

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

@@ -1,2 +1,2 @@
-var e={button:`_button_plhd2_1`,pill:`_pill_plhd2_53`,circular:`_circular_plhd2_60`,default:`_default_plhd2_72`,suggested:`_suggested_plhd2_106`,destructive:`_destructive_plhd2_121`,flat:`_flat_plhd2_136`,raised:`_raised_plhd2_151`,osd:`_osd_plhd2_185`,sm:`_sm_plhd2_231`,lg:`_lg_plhd2_246`};exports.default=e;
+var e={button:`_button_ienn0_1`,pill:`_pill_ienn0_53`,circular:`_circular_ienn0_60`,default:`_default_ienn0_72`,suggested:`_suggested_ienn0_106`,destructive:`_destructive_ienn0_121`,flat:`_flat_ienn0_136`,raised:`_raised_ienn0_151`,osd:`_osd_ienn0_185`,sm:`_sm_ienn0_230`,lg:`_lg_ienn0_245`};exports.default=e;
 //# sourceMappingURL=Button.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.module.css.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1);\n\n  /* Typography */\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  white-space: nowrap;\n\n  /* Shape */\n  border-radius: var(--gnome-radius-md);\n  border: 1px solid transparent;\n  padding: var(--gnome-space-1) var(--gnome-space-2);\n  min-height: 34px;\n  min-width: 5.5rem;\n\n  /* Behavior */\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  vertical-align: middle;\n  outline: none;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Focus ───────────────────────────────────────────────────── */\n\n.button:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n    var(--gnome-focus-ring-color);\n}\n\n/* ─── Disabled ────────────────────────────────────────────────── */\n\n.button:disabled,\n.button[aria-disabled=\"true\"] {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Pill shape ──────────────────────────────────────────────── */\n\n.pill {\n  border-radius: var(--gnome-radius-pill);\n  padding-inline: var(--gnome-space-3);\n}\n\n/* ─── Circular shape ──────────────────────────────────────────── */\n\n.circular {\n  border-radius: var(--gnome-radius-pill);\n  padding: var(--gnome-space-1);\n  min-width: 34px;\n  min-height: 34px;\n  width: 34px;\n  height: 34px;\n}\n\n/* ─── Variants ────────────────────────────────────────────────── */\n\n/* Default — slight raised appearance with visible border */\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.default:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.default:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .default:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* Suggested — accent color for primary / affirmative actions */\n.suggested {\n  background-color: var(--gnome-accent-bg-color);\n  color: var(--gnome-accent-fg-color);\n  border-color: transparent;\n}\n\n.suggested:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.suggested:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Destructive — red for dangerous / irreversible actions */\n.destructive {\n  background-color: var(--gnome-destructive-bg-color);\n  color: var(--gnome-destructive-fg-color);\n  border-color: transparent;\n}\n\n.destructive:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.destructive:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Flat — no border, no background. Used inside header bars */\n.flat {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.flat:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n/* Raised — explicit raised look inside flat/toolbar contexts */\n.raised {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.raised:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.raised:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .raised {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: var(--gnome-shadow-sm);\n  }\n\n  .raised:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .raised:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* OSD — dark semi-transparent overlay style for media/image contexts */\n.osd {\n  background-color: rgba(0, 0, 0, 0.65);\n  color: rgba(255, 255, 255, 0.95);\n  border-color: rgba(255, 255, 255, 0.12);\n  box-shadow: none;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n\n.osd:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.75);\n  filter: none;\n}\n\n.osd:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.85);\n  filter: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .osd {\n    background-color: rgba(0, 0, 0, 0.65);\n    border-color: rgba(255, 255, 255, 0.1);\n  }\n}\n\n/* ─── High contrast ───────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .default {\n    border-width: 2px;\n    box-shadow: none;\n  }\n\n  .button:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n      var(--gnome-focus-ring-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width) + 1px)\n      var(--gnome-window-bg-color);\n  }\n}\n\n/* ─── Sizes ───────────────────────────────────────────────────── */\n\n.sm {\n  font-size: var(--gnome-font-size-caption);\n  min-height: 28px;\n  padding: 4px var(--gnome-space-1);\n  min-width: 4rem;\n}\n\n.sm.circular {\n  min-width: 28px;\n  min-height: 28px;\n  width: 28px;\n  height: 28px;\n  padding: 4px;\n}\n\n.lg {\n  font-size: var(--gnome-font-size-title-4);\n  min-height: 42px;\n  padding: var(--gnome-space-1) var(--gnome-space-3);\n}\n\n.lg.circular {\n  min-width: 42px;\n  min-height: 42px;\n  width: 42px;\n  height: 42px;\n  padding: var(--gnome-space-1);\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.css.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1);\n\n  /* Typography */\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  white-space: nowrap;\n\n  /* Shape */\n  border-radius: var(--gnome-radius-md);\n  border: 1px solid transparent;\n  padding: var(--gnome-space-1) var(--gnome-space-2);\n  min-height: 34px;\n  min-width: 5.5rem;\n\n  /* Behavior */\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  vertical-align: middle;\n  outline: none;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Focus ───────────────────────────────────────────────────── */\n\n.button:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n    var(--gnome-focus-ring-color);\n}\n\n/* ─── Disabled ────────────────────────────────────────────────── */\n\n.button:disabled,\n.button[aria-disabled=\"true\"] {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Pill shape ──────────────────────────────────────────────── */\n\n.pill {\n  border-radius: var(--gnome-radius-pill);\n  padding-inline: var(--gnome-space-3);\n}\n\n/* ─── Circular shape ──────────────────────────────────────────── */\n\n.circular {\n  border-radius: var(--gnome-radius-pill);\n  padding: var(--gnome-space-1);\n  min-width: 34px;\n  min-height: 34px;\n  width: 34px;\n  height: 34px;\n}\n\n/* ─── Variants ────────────────────────────────────────────────── */\n\n/* Default — slight raised appearance with visible border */\n.default {\n  background-color: var(--gnome-card-bg-color, #fff);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.default:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.default:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n    box-shadow: none;\n  }\n\n  .default:hover:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .default:active:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.14);\n    box-shadow: none;\n  }\n}\n\n/* Suggested — accent color for primary / affirmative actions */\n.suggested {\n  background-color: var(--gnome-accent-bg-color);\n  color: var(--gnome-accent-fg-color);\n  border-color: transparent;\n}\n\n.suggested:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.suggested:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Destructive — red for dangerous / irreversible actions */\n.destructive {\n  background-color: var(--gnome-destructive-bg-color);\n  color: var(--gnome-destructive-fg-color);\n  border-color: transparent;\n}\n\n.destructive:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.destructive:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Flat — no border, no background. Used inside header bars */\n.flat {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.flat:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n/* Raised — explicit raised look inside flat/toolbar contexts */\n.raised {\n  background-color: var(--gnome-card-bg-color, #fff);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.raised:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.raised:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .raised {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n    box-shadow: var(--gnome-shadow-sm);\n  }\n\n  .raised:hover:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .raised:active:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.14);\n    box-shadow: none;\n  }\n}\n\n/* OSD — dark semi-transparent overlay style for media/image contexts */\n.osd {\n  background-color: rgb(0 0 0 / 0.65);\n  color: rgb(255 255 255 / 0.95);\n  border-color: rgb(255 255 255 / 0.12);\n  box-shadow: none;\n  backdrop-filter: blur(4px);\n}\n\n.osd:hover:not(:disabled) {\n  background-color: rgb(0 0 0 / 0.75);\n  filter: none;\n}\n\n.osd:active:not(:disabled) {\n  background-color: rgb(0 0 0 / 0.85);\n  filter: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .osd {\n    background-color: rgb(0 0 0 / 0.65);\n    border-color: rgb(255 255 255 / 0.1);\n  }\n}\n\n/* ─── High contrast ───────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .default {\n    border-width: 2px;\n    box-shadow: none;\n  }\n\n  .button:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n      var(--gnome-focus-ring-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width) + 1px)\n      var(--gnome-window-bg-color);\n  }\n}\n\n/* ─── Sizes ───────────────────────────────────────────────────── */\n\n.sm {\n  font-size: var(--gnome-font-size-caption);\n  min-height: 28px;\n  padding: 4px var(--gnome-space-1);\n  min-width: 4rem;\n}\n\n.sm.circular {\n  min-width: 28px;\n  min-height: 28px;\n  width: 28px;\n  height: 28px;\n  padding: 4px;\n}\n\n.lg {\n  font-size: var(--gnome-font-size-title-4);\n  min-height: 42px;\n  padding: var(--gnome-space-1) var(--gnome-space-3);\n}\n\n.lg.circular {\n  min-width: 42px;\n  min-height: 42px;\n  width: 42px;\n  height: 42px;\n  padding: var(--gnome-space-1);\n}\n"],"mappings":""}

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

@@ -1,15 +1,15 @@
 var e = {
-	button: "_button_plhd2_1",
-	pill: "_pill_plhd2_53",
-	circular: "_circular_plhd2_60",
-	default: "_default_plhd2_72",
-	suggested: "_suggested_plhd2_106",
-	destructive: "_destructive_plhd2_121",
-	flat: "_flat_plhd2_136",
-	raised: "_raised_plhd2_151",
-	osd: "_osd_plhd2_185",
-	sm: "_sm_plhd2_231",
-	lg: "_lg_plhd2_246"
+	button: "_button_ienn0_1",
+	pill: "_pill_ienn0_53",
+	circular: "_circular_ienn0_60",
+	default: "_default_ienn0_72",
+	suggested: "_suggested_ienn0_106",
+	destructive: "_destructive_ienn0_121",
+	flat: "_flat_ienn0_136",
+	raised: "_raised_ienn0_151",
+	osd: "_osd_ienn0_185",
+	sm: "_sm_ienn0_230",
+	lg: "_lg_ienn0_245"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Button.module.css.js","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1);\n\n  /* Typography */\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  white-space: nowrap;\n\n  /* Shape */\n  border-radius: var(--gnome-radius-md);\n  border: 1px solid transparent;\n  padding: var(--gnome-space-1) var(--gnome-space-2);\n  min-height: 34px;\n  min-width: 5.5rem;\n\n  /* Behavior */\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  vertical-align: middle;\n  outline: none;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Focus ───────────────────────────────────────────────────── */\n\n.button:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n    var(--gnome-focus-ring-color);\n}\n\n/* ─── Disabled ────────────────────────────────────────────────── */\n\n.button:disabled,\n.button[aria-disabled=\"true\"] {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Pill shape ──────────────────────────────────────────────── */\n\n.pill {\n  border-radius: var(--gnome-radius-pill);\n  padding-inline: var(--gnome-space-3);\n}\n\n/* ─── Circular shape ──────────────────────────────────────────── */\n\n.circular {\n  border-radius: var(--gnome-radius-pill);\n  padding: var(--gnome-space-1);\n  min-width: 34px;\n  min-height: 34px;\n  width: 34px;\n  height: 34px;\n}\n\n/* ─── Variants ────────────────────────────────────────────────── */\n\n/* Default — slight raised appearance with visible border */\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.default:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.default:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .default:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* Suggested — accent color for primary / affirmative actions */\n.suggested {\n  background-color: var(--gnome-accent-bg-color);\n  color: var(--gnome-accent-fg-color);\n  border-color: transparent;\n}\n\n.suggested:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.suggested:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Destructive — red for dangerous / irreversible actions */\n.destructive {\n  background-color: var(--gnome-destructive-bg-color);\n  color: var(--gnome-destructive-fg-color);\n  border-color: transparent;\n}\n\n.destructive:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.destructive:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Flat — no border, no background. Used inside header bars */\n.flat {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.flat:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n/* Raised — explicit raised look inside flat/toolbar contexts */\n.raised {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.raised:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.raised:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .raised {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: var(--gnome-shadow-sm);\n  }\n\n  .raised:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .raised:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* OSD — dark semi-transparent overlay style for media/image contexts */\n.osd {\n  background-color: rgba(0, 0, 0, 0.65);\n  color: rgba(255, 255, 255, 0.95);\n  border-color: rgba(255, 255, 255, 0.12);\n  box-shadow: none;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n\n.osd:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.75);\n  filter: none;\n}\n\n.osd:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.85);\n  filter: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .osd {\n    background-color: rgba(0, 0, 0, 0.65);\n    border-color: rgba(255, 255, 255, 0.1);\n  }\n}\n\n/* ─── High contrast ───────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .default {\n    border-width: 2px;\n    box-shadow: none;\n  }\n\n  .button:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n      var(--gnome-focus-ring-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width) + 1px)\n      var(--gnome-window-bg-color);\n  }\n}\n\n/* ─── Sizes ───────────────────────────────────────────────────── */\n\n.sm {\n  font-size: var(--gnome-font-size-caption);\n  min-height: 28px;\n  padding: 4px var(--gnome-space-1);\n  min-width: 4rem;\n}\n\n.sm.circular {\n  min-width: 28px;\n  min-height: 28px;\n  width: 28px;\n  height: 28px;\n  padding: 4px;\n}\n\n.lg {\n  font-size: var(--gnome-font-size-title-4);\n  min-height: 42px;\n  padding: var(--gnome-space-1) var(--gnome-space-3);\n}\n\n.lg.circular {\n  min-width: 42px;\n  min-height: 42px;\n  width: 42px;\n  height: 42px;\n  padding: var(--gnome-space-1);\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.css.js","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1);\n\n  /* Typography */\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  white-space: nowrap;\n\n  /* Shape */\n  border-radius: var(--gnome-radius-md);\n  border: 1px solid transparent;\n  padding: var(--gnome-space-1) var(--gnome-space-2);\n  min-height: 34px;\n  min-width: 5.5rem;\n\n  /* Behavior */\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  vertical-align: middle;\n  outline: none;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Focus ───────────────────────────────────────────────────── */\n\n.button:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n    var(--gnome-focus-ring-color);\n}\n\n/* ─── Disabled ────────────────────────────────────────────────── */\n\n.button:disabled,\n.button[aria-disabled=\"true\"] {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Pill shape ──────────────────────────────────────────────── */\n\n.pill {\n  border-radius: var(--gnome-radius-pill);\n  padding-inline: var(--gnome-space-3);\n}\n\n/* ─── Circular shape ──────────────────────────────────────────── */\n\n.circular {\n  border-radius: var(--gnome-radius-pill);\n  padding: var(--gnome-space-1);\n  min-width: 34px;\n  min-height: 34px;\n  width: 34px;\n  height: 34px;\n}\n\n/* ─── Variants ────────────────────────────────────────────────── */\n\n/* Default — slight raised appearance with visible border */\n.default {\n  background-color: var(--gnome-card-bg-color, #fff);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.default:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.default:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n    box-shadow: none;\n  }\n\n  .default:hover:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .default:active:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.14);\n    box-shadow: none;\n  }\n}\n\n/* Suggested — accent color for primary / affirmative actions */\n.suggested {\n  background-color: var(--gnome-accent-bg-color);\n  color: var(--gnome-accent-fg-color);\n  border-color: transparent;\n}\n\n.suggested:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.suggested:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Destructive — red for dangerous / irreversible actions */\n.destructive {\n  background-color: var(--gnome-destructive-bg-color);\n  color: var(--gnome-destructive-fg-color);\n  border-color: transparent;\n}\n\n.destructive:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.destructive:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Flat — no border, no background. Used inside header bars */\n.flat {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.flat:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n/* Raised — explicit raised look inside flat/toolbar contexts */\n.raised {\n  background-color: var(--gnome-card-bg-color, #fff);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.raised:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.raised:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .raised {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n    box-shadow: var(--gnome-shadow-sm);\n  }\n\n  .raised:hover:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .raised:active:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.14);\n    box-shadow: none;\n  }\n}\n\n/* OSD — dark semi-transparent overlay style for media/image contexts */\n.osd {\n  background-color: rgb(0 0 0 / 0.65);\n  color: rgb(255 255 255 / 0.95);\n  border-color: rgb(255 255 255 / 0.12);\n  box-shadow: none;\n  backdrop-filter: blur(4px);\n}\n\n.osd:hover:not(:disabled) {\n  background-color: rgb(0 0 0 / 0.75);\n  filter: none;\n}\n\n.osd:active:not(:disabled) {\n  background-color: rgb(0 0 0 / 0.85);\n  filter: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .osd {\n    background-color: rgb(0 0 0 / 0.65);\n    border-color: rgb(255 255 255 / 0.1);\n  }\n}\n\n/* ─── High contrast ───────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .default {\n    border-width: 2px;\n    box-shadow: none;\n  }\n\n  .button:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n      var(--gnome-focus-ring-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width) + 1px)\n      var(--gnome-window-bg-color);\n  }\n}\n\n/* ─── Sizes ───────────────────────────────────────────────────── */\n\n.sm {\n  font-size: var(--gnome-font-size-caption);\n  min-height: 28px;\n  padding: 4px var(--gnome-space-1);\n  min-width: 4rem;\n}\n\n.sm.circular {\n  min-width: 28px;\n  min-height: 28px;\n  width: 28px;\n  height: 28px;\n  padding: 4px;\n}\n\n.lg {\n  font-size: var(--gnome-font-size-title-4);\n  min-height: 42px;\n  padding: var(--gnome-space-1) var(--gnome-space-3);\n}\n\n.lg.circular {\n  min-width: 42px;\n  min-height: 42px;\n  width: 42px;\n  height: 42px;\n  padding: var(--gnome-space-1);\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={row:`_row_1877a_3`,title:`_title_1877a_48`,leading:`_leading_1877a_59`,trailing:`_trailing_1877a_60`,default:`_default_1877a_68`,suggested:`_suggested_1877a_77`,destructive:`_destructive_1877a_86`};exports.default=e;
+var e={row:`_row_i8gww_3`,title:`_title_i8gww_46`,leading:`_leading_i8gww_57`,trailing:`_trailing_i8gww_58`,default:`_default_i8gww_66`,suggested:`_suggested_i8gww_75`,destructive:`_destructive_i8gww_84`};exports.default=e;
 //# sourceMappingURL=ButtonRow.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonRow.module.css.cjs","names":[],"sources":["../../../src/components/ButtonRow/ButtonRow.module.css"],"sourcesContent":["/* ─── Base row ─────────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n\n  /* Reset button */\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  border: none;\n  font: inherit;\n  outline: none;\n  cursor: pointer;\n  text-align: center;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.row:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.row:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.row:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 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.row:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: var(--gnome-line-height-body, 1.5);\n  flex: 1;\n  text-align: center;\n}\n\n/* ─── Leading / trailing icons ─────────────────────────────────────────────── */\n\n.leading,\n.trailing {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Variants ─────────────────────────────────────────────────────────────── */\n\n.default .title {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.default .leading,\n.default .trailing {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.suggested .title {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.suggested .leading,\n.suggested .trailing {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.destructive .title {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n.destructive .leading,\n.destructive .trailing {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .row:focus-visible {\n    box-shadow:\n      inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4),\n      inset 0 0 0\n      calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n      var(--gnome-window-bg-color, #fafafa);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ButtonRow.module.css.cjs","names":[],"sources":["../../../src/components/ButtonRow/ButtonRow.module.css"],"sourcesContent":["/* ─── Base row ─────────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n\n  /* Reset button */\n  appearance: none;\n  background: transparent;\n  border: none;\n  font: inherit;\n  outline: none;\n  cursor: pointer;\n  text-align: center;\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.row:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.row:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.row:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 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.row:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: var(--gnome-line-height-body, 1.5);\n  flex: 1;\n  text-align: center;\n}\n\n/* ─── Leading / trailing icons ─────────────────────────────────────────────── */\n\n.leading,\n.trailing {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Variants ─────────────────────────────────────────────────────────────── */\n\n.default .title {\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.default .leading,\n.default .trailing {\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.suggested .title {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.suggested .leading,\n.suggested .trailing {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.destructive .title {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n.destructive .leading,\n.destructive .trailing {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .row:focus-visible {\n    box-shadow:\n      inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4),\n      inset 0 0 0\n      calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n      var(--gnome-window-bg-color, #fafafa);\n  }\n}\n"],"mappings":""}

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

@@ -1,11 +1,11 @@
 var e = {
-	row: "_row_1877a_3",
-	title: "_title_1877a_48",
-	leading: "_leading_1877a_59",
-	trailing: "_trailing_1877a_60",
-	default: "_default_1877a_68",
-	suggested: "_suggested_1877a_77",
-	destructive: "_destructive_1877a_86"
+	row: "_row_i8gww_3",
+	title: "_title_i8gww_46",
+	leading: "_leading_i8gww_57",
+	trailing: "_trailing_i8gww_58",
+	default: "_default_i8gww_66",
+	suggested: "_suggested_i8gww_75",
+	destructive: "_destructive_i8gww_84"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonRow.module.css.js","names":[],"sources":["../../../src/components/ButtonRow/ButtonRow.module.css"],"sourcesContent":["/* ─── Base row ─────────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n\n  /* Reset button */\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  border: none;\n  font: inherit;\n  outline: none;\n  cursor: pointer;\n  text-align: center;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.row:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.row:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.row:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 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.row:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: var(--gnome-line-height-body, 1.5);\n  flex: 1;\n  text-align: center;\n}\n\n/* ─── Leading / trailing icons ─────────────────────────────────────────────── */\n\n.leading,\n.trailing {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Variants ─────────────────────────────────────────────────────────────── */\n\n.default .title {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.default .leading,\n.default .trailing {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.suggested .title {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.suggested .leading,\n.suggested .trailing {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.destructive .title {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n.destructive .leading,\n.destructive .trailing {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .row:focus-visible {\n    box-shadow:\n      inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4),\n      inset 0 0 0\n      calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n      var(--gnome-window-bg-color, #fafafa);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ButtonRow.module.css.js","names":[],"sources":["../../../src/components/ButtonRow/ButtonRow.module.css"],"sourcesContent":["/* ─── Base row ─────────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n\n  /* Reset button */\n  appearance: none;\n  background: transparent;\n  border: none;\n  font: inherit;\n  outline: none;\n  cursor: pointer;\n  text-align: center;\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.row:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.row:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.row:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 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.row:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  line-height: var(--gnome-line-height-body, 1.5);\n  flex: 1;\n  text-align: center;\n}\n\n/* ─── Leading / trailing icons ─────────────────────────────────────────────── */\n\n.leading,\n.trailing {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Variants ─────────────────────────────────────────────────────────────── */\n\n.default .title {\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.default .leading,\n.default .trailing {\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.suggested .title {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.suggested .leading,\n.suggested .trailing {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.destructive .title {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n.destructive .leading,\n.destructive .trailing {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .row:focus-visible {\n    box-shadow:\n      inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4),\n      inset 0 0 0\n      calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n      var(--gnome-window-bg-color, #fafafa);\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={card:`_card_12nxd_1`,"padding-none":`_padding-none_12nxd_12`,"padding-sm":`_padding-sm_12nxd_15`,"padding-md":`_padding-md_12nxd_18`,"padding-lg":`_padding-lg_12nxd_21`,interactive:`_interactive_12nxd_27`};exports.default=e;
+var e={card:`_card_vvaqp_1`,"padding-none":`_padding-none_vvaqp_12`,"padding-sm":`_padding-sm_vvaqp_16`,"padding-md":`_padding-md_vvaqp_20`,"padding-lg":`_padding-lg_vvaqp_24`,interactive:`_interactive_vvaqp_30`};exports.default=e;
 //# sourceMappingURL=Card.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.module.css.cjs","names":[],"sources":["../../../src/components/Card/Card.module.css"],"sourcesContent":[".card {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  border-radius: var(--gnome-radius-lg);\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Padding ─────────────────────────────────────────────────── */\n\n.padding-none {\n  padding: 0;\n}\n.padding-sm {\n  padding: var(--gnome-space-2);\n}\n.padding-md {\n  padding: var(--gnome-space-4);\n}\n.padding-lg {\n  padding: var(--gnome-space-5);\n}\n\n/* ─── Interactive (activatable) ───────────────────────────────── */\n\n.interactive {\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  /* Reset button styles when rendered as <button> */\n  appearance: none;\n  -webkit-appearance: none;\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  font: inherit;\n  text-align: inherit;\n  width: 100%;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.interactive:hover {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 94%, black 6%);\n}\n\n.interactive:active {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 88%, black 12%);\n}\n\n.interactive:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.interactive:disabled {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n\n[data-theme=\"dark\"] {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Card.module.css.cjs","names":[],"sources":["../../../src/components/Card/Card.module.css"],"sourcesContent":[".card {\n  background-color: var(--gnome-card-bg-color, #fff);\n  color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n  border: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.07));\n  border-radius: var(--gnome-radius-lg);\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Padding ─────────────────────────────────────────────────── */\n\n.padding-none {\n  padding: 0;\n}\n\n.padding-sm {\n  padding: var(--gnome-space-2);\n}\n\n.padding-md {\n  padding: var(--gnome-space-4);\n}\n\n.padding-lg {\n  padding: var(--gnome-space-5);\n}\n\n/* ─── Interactive (activatable) ───────────────────────────────── */\n\n.interactive {\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  /* Reset button styles when rendered as <button> */\n  appearance: none;\n  border: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.07));\n  font: inherit;\n  text-align: inherit;\n  width: 100%;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.interactive:hover {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 94%, black 6%);\n}\n\n.interactive:active {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 88%, black 12%);\n}\n\n.interactive:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.interactive:disabled {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n\n[data-theme=\"dark\"] {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n"],"mappings":""}

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

@@ -1,10 +1,10 @@
 var e = {
-	card: "_card_12nxd_1",
-	"padding-none": "_padding-none_12nxd_12",
-	"padding-sm": "_padding-sm_12nxd_15",
-	"padding-md": "_padding-md_12nxd_18",
-	"padding-lg": "_padding-lg_12nxd_21",
-	interactive: "_interactive_12nxd_27"
+	card: "_card_vvaqp_1",
+	"padding-none": "_padding-none_vvaqp_12",
+	"padding-sm": "_padding-sm_vvaqp_16",
+	"padding-md": "_padding-md_vvaqp_20",
+	"padding-lg": "_padding-lg_vvaqp_24",
+	interactive: "_interactive_vvaqp_30"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Card.module.css.js","names":[],"sources":["../../../src/components/Card/Card.module.css"],"sourcesContent":[".card {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  border-radius: var(--gnome-radius-lg);\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Padding ─────────────────────────────────────────────────── */\n\n.padding-none {\n  padding: 0;\n}\n.padding-sm {\n  padding: var(--gnome-space-2);\n}\n.padding-md {\n  padding: var(--gnome-space-4);\n}\n.padding-lg {\n  padding: var(--gnome-space-5);\n}\n\n/* ─── Interactive (activatable) ───────────────────────────────── */\n\n.interactive {\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  /* Reset button styles when rendered as <button> */\n  appearance: none;\n  -webkit-appearance: none;\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  font: inherit;\n  text-align: inherit;\n  width: 100%;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.interactive:hover {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 94%, black 6%);\n}\n\n.interactive:active {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 88%, black 12%);\n}\n\n.interactive:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.interactive:disabled {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n\n[data-theme=\"dark\"] {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Card.module.css.js","names":[],"sources":["../../../src/components/Card/Card.module.css"],"sourcesContent":[".card {\n  background-color: var(--gnome-card-bg-color, #fff);\n  color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n  border: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.07));\n  border-radius: var(--gnome-radius-lg);\n  overflow: hidden;\n  position: relative;\n}\n\n/* ─── Padding ─────────────────────────────────────────────────── */\n\n.padding-none {\n  padding: 0;\n}\n\n.padding-sm {\n  padding: var(--gnome-space-2);\n}\n\n.padding-md {\n  padding: var(--gnome-space-4);\n}\n\n.padding-lg {\n  padding: var(--gnome-space-5);\n}\n\n/* ─── Interactive (activatable) ───────────────────────────────── */\n\n.interactive {\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  /* Reset button styles when rendered as <button> */\n  appearance: none;\n  border: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.07));\n  font: inherit;\n  text-align: inherit;\n  width: 100%;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.interactive:hover {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 94%, black 6%);\n}\n\n.interactive:active {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 88%, black 12%);\n}\n\n.interactive:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.interactive:disabled {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n\n[data-theme=\"dark\"] {\n  .interactive:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 85%,\n      white 15%\n    );\n  }\n\n  .interactive:active {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 75%,\n      white 25%\n    );\n  }\n}\n"],"mappings":""}

package/dist/components/Carousel/Carousel.cjs

@@ -1,2 +1,2 @@
-const e=require("./Carousel.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=({pages:t,currentPage:r,onPageSelected:i,className:a,...o})=>(0,n.jsx)(`div`,{className:[e.default.indicatorDots,a].filter(Boolean).join(` `),role:`tablist`,"aria-label":`Carousel pages`,...o,children:Array.from({length:t},(t,a)=>(0,n.jsx)(`button`,{type:`button`,role:`tab`,"aria-selected":a===r,"aria-label":`Page ${a+1}`,className:[e.default.dot,a===r?e.default.dotActive:null].filter(Boolean).join(` `),onClick:()=>i?.(a)},a))}),i=({pages:t,currentPage:r,onPageSelected:i,className:a,...o})=>(0,n.jsx)(`div`,{className:[e.default.indicatorLines,a].filter(Boolean).join(` `),role:`tablist`,"aria-label":`Carousel pages`,...o,children:Array.from({length:t},(t,a)=>(0,n.jsx)(`button`,{type:`button`,role:`tab`,"aria-selected":a===r,"aria-label":`Page ${a+1}`,className:[e.default.line,a===r?e.default.lineActive:null].filter(Boolean).join(` `),onClick:()=>i?.(a)},a))}),a=({children:r,orientation:i=`horizontal`,spacing:a=0,loop:o=!1,onPageChanged:s,page:c,className:l,...u})=>{let d=(0,t.useRef)(null),f=t.Children.count(r),[p,m]=(0,t.useState)(0),h=c!==void 0,g=h?c:p,_=(0,t.useCallback)((e,t=`smooth`)=>{let n=d.current;n&&(i===`horizontal`?n.scrollTo({left:n.clientWidth*e,behavior:t}):n.scrollTo({top:n.clientHeight*e,behavior:t}))},[i]);(0,t.useEffect)(()=>{h&&_(c,`smooth`)},[c,_,h]),(0,t.useEffect)(()=>{let e=d.current;if(!e)return;let t=()=>{Array.from(e.children);let t=i===`horizontal`?e.clientWidth:e.clientHeight,n=i===`horizontal`?e.scrollLeft:e.scrollTop,r=Math.round(n/(t||1)),a=Math.max(0,Math.min(r,f-1));h||m(a),s?.(a)};return e.addEventListener(`scroll`,t,{passive:!0}),()=>e.removeEventListener(`scroll`,t)},[i,f,h,s]);let v=(0,t.useCallback)(e=>{let t=i===`horizontal`?e.key===`ArrowRight`:e.key===`ArrowDown`,n=i===`horizontal`?e.key===`ArrowLeft`:e.key===`ArrowUp`;if(t){e.preventDefault();let t=o?(g+1)%f:Math.min(g+1,f-1);_(t),h||m(t),s?.(t)}else if(n){e.preventDefault();let t=o?(g-1+f)%f:Math.max(g-1,0);_(t),h||m(t),s?.(t)}},[g,f,o,i,_,h,s]),y=i===`horizontal`;return(0,n.jsx)(`div`,{ref:d,role:`region`,"aria-roledescription":`carousel`,className:[e.default.carousel,y?e.default.horizontal:e.default.vertical,l].filter(Boolean).join(` `),style:y?{columnGap:a||void 0}:{rowGap:a||void 0},onKeyDown:v,...u,children:t.Children.map(r,(t,r)=>(0,n.jsx)(`div`,{className:e.default.slide,role:`group`,"aria-roledescription":`slide`,"aria-label":`${r+1} of ${f}`,children:t},r))})};exports.Carousel=a,exports.CarouselIndicatorDots=r,exports.CarouselIndicatorLines=i;
+const e=require("./Carousel.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=({pages:t,currentPage:r,onPageSelected:i,className:a,...o})=>(0,n.jsx)(`div`,{className:[e.default.indicatorDots,a].filter(Boolean).join(` `),role:`tablist`,"aria-label":`Carousel pages`,...o,children:Array.from({length:t},(t,a)=>(0,n.jsx)(`button`,{type:`button`,role:`tab`,"aria-selected":a===r,"aria-label":`Page ${a+1}`,className:[e.default.dot,a===r?e.default.dotActive:null].filter(Boolean).join(` `),onClick:()=>i?.(a)},a))}),i=({pages:t,currentPage:r,onPageSelected:i,className:a,...o})=>(0,n.jsx)(`div`,{className:[e.default.indicatorLines,a].filter(Boolean).join(` `),role:`tablist`,"aria-label":`Carousel pages`,...o,children:Array.from({length:t},(t,a)=>(0,n.jsx)(`button`,{type:`button`,role:`tab`,"aria-selected":a===r,"aria-label":`Page ${a+1}`,className:[e.default.line,a===r?e.default.lineActive:null].filter(Boolean).join(` `),onClick:()=>i?.(a)},a))}),a=({children:r,orientation:i=`horizontal`,spacing:a=0,loop:o=!1,visibleSlides:s=1,onPageChanged:c,page:l,className:u,...d})=>{let f=(0,t.useRef)(null),p=t.Children.count(r),[m,h]=(0,t.useState)(0),[g,_]=(0,t.useState)(!1),v=l!==void 0,y=v?l:m,b=(0,t.useRef)(!1),x=(0,t.useRef)(!1),S=(0,t.useRef)({pos:0,scroll:0,time:0}),C=(0,t.useRef)(0),w=(0,t.useCallback)(()=>{let e=f.current;return e?((i===`horizontal`?e.clientWidth:e.clientHeight)+a)/s:1},[i,a,s]),T=(0,t.useCallback)((e,t=`smooth`)=>{let n=f.current;if(!n)return;let r=w()*e;i===`horizontal`?n.scrollTo({left:r,behavior:t}):n.scrollTo({top:r,behavior:t})},[i,w]);(0,t.useEffect)(()=>{v&&T(l,`smooth`)},[l,T,v]),(0,t.useEffect)(()=>{let e=f.current;if(!e)return;let t=()=>{if(b.current)return;let t=w(),n=i===`horizontal`?e.scrollLeft:e.scrollTop,r=Math.round(n/t),a=Math.max(0,Math.min(r,p-1));v||h(a),c?.(a)};return e.addEventListener(`scroll`,t,{passive:!0}),()=>e.removeEventListener(`scroll`,t)},[i,p,v,c,w]);let E=(0,t.useCallback)(e=>{let t=i===`horizontal`?e.key===`ArrowRight`:e.key===`ArrowDown`,n=i===`horizontal`?e.key===`ArrowLeft`:e.key===`ArrowUp`;if(!t&&!n)return;e.preventDefault();let r=t?o?(y+1)%p:Math.min(y+1,p-1):o?(y-1+p)%p:Math.max(y-1,0);T(r),v||h(r),c?.(r)},[y,p,o,i,T,v,c]),D=(0,t.useCallback)(e=>{if(e.pointerType===`mouse`&&e.button!==0)return;let t=f.current;t&&(window.clearTimeout(C.current),t.style.scrollSnapType=`none`,e.currentTarget.setPointerCapture(e.pointerId),b.current=!0,x.current=!1,_(!0),S.current={pos:i===`horizontal`?e.clientX:e.clientY,scroll:i===`horizontal`?t.scrollLeft:t.scrollTop,time:Date.now()})},[i]),O=(0,t.useCallback)(e=>{if(!b.current)return;let t=f.current;if(!t)return;let n=i===`horizontal`?e.clientX:e.clientY,r=S.current.pos-n;Math.abs(r)>4&&(x.current=!0);let a=i===`horizontal`?t.scrollWidth-t.clientWidth:t.scrollHeight-t.clientHeight,o=S.current.scroll+r;o<0?o*=.3:o>a&&(o=a+(o-a)*.3),i===`horizontal`?t.scrollLeft=o:t.scrollTop=o},[i]),k=(0,t.useCallback)(e=>{if(!b.current)return;b.current=!1,_(!1);let t=f.current;if(!x.current||!t){t?.style.removeProperty(`scroll-snap-type`);return}let n=e.type===`pointercancel`,r=n?S.current.pos:i===`horizontal`?e.clientX:e.clientY,a=S.current.pos-r,s=Math.max(Date.now()-S.current.time,1),l=n?0:a/s,u=w(),d=i===`horizontal`?t.scrollLeft:t.scrollTop,m;m=Math.abs(l)>.3?l>0?Math.ceil(d/u):Math.floor(d/u):Math.round(d/u),m=o?(m%p+p)%p:Math.max(0,Math.min(m,p-1)),T(m),v||h(m),c?.(m),C.current=window.setTimeout(()=>{t.style.removeProperty(`scroll-snap-type`)},350)},[i,w,o,p,T,v,c]);(0,t.useEffect)(()=>()=>window.clearTimeout(C.current),[]);let A=(0,t.useCallback)(e=>{x.current&&=(e.preventDefault(),e.stopPropagation(),!1)},[]),j=i===`horizontal`,M=s===1?void 0:`calc((100% - ${a*(s-1)}px) / ${s})`;return(0,n.jsx)(`div`,{ref:f,role:`region`,"aria-roledescription":`carousel`,tabIndex:0,className:[e.default.carousel,j?e.default.horizontal:e.default.vertical,g?e.default.dragging:null,u].filter(Boolean).join(` `),style:j?{columnGap:a||void 0}:{rowGap:a||void 0},onKeyDown:E,onPointerDown:D,onPointerMove:O,onPointerUp:k,onPointerCancel:k,onClick:A,...d,children:t.Children.map(r,(t,r)=>(0,n.jsx)(`div`,{className:e.default.slide,role:`group`,"aria-roledescription":`slide`,"aria-label":`${r+1} of ${p}`,style:M?{flex:`0 0 ${M}`}:void 0,children:t},r))})};exports.Carousel=a,exports.CarouselIndicatorDots=r,exports.CarouselIndicatorLines=i;
 //# sourceMappingURL=Carousel.cjs.map

package/dist/components/Carousel/Carousel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.cjs","names":[],"sources":["../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import {\n  Children,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './Carousel.module.css';\n\n// ─── CarouselIndicatorDots ────────────────────────────────────────────────────\n\nexport interface CarouselIndicatorDotsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Total number of pages. */\n  pages: number;\n  /** Zero-based index of the current page. */\n  currentPage: number;\n  /** Called when the user clicks a dot. */\n  onPageSelected?: (index: number) => void;\n}\n\n/**\n * Dot-style page indicator for `Carousel`.\n * Mirrors `AdwCarouselIndicatorDots`.\n */\nexport const CarouselIndicatorDots = ({\n  pages,\n  currentPage,\n  onPageSelected,\n  className,\n  ...props\n}: CarouselIndicatorDotsProps) => {\n  return (\n    <div\n      className={[styles.indicatorDots, className].filter(Boolean).join(' ')}\n      role=\"tablist\"\n      aria-label=\"Carousel pages\"\n      {...props}\n    >\n      {Array.from({ length: pages }, (_, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={i === currentPage}\n          aria-label={`Page ${i + 1}`}\n          className={[styles.dot, i === currentPage ? styles.dotActive : null]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={() => onPageSelected?.(i)}\n        />\n      ))}\n    </div>\n  );\n};\n\n// ─── CarouselIndicatorLines ───────────────────────────────────────────────────\n\nexport interface CarouselIndicatorLinesProps extends HTMLAttributes<HTMLDivElement> {\n  /** Total number of pages. */\n  pages: number;\n  /** Zero-based index of the current page. */\n  currentPage: number;\n  /** Called when the user clicks a line. */\n  onPageSelected?: (index: number) => void;\n}\n\n/**\n * Line-style page indicator for `Carousel`.\n * Mirrors `AdwCarouselIndicatorLines`.\n */\nexport const CarouselIndicatorLines = ({\n  pages,\n  currentPage,\n  onPageSelected,\n  className,\n  ...props\n}: CarouselIndicatorLinesProps) => {\n  return (\n    <div\n      className={[styles.indicatorLines, className].filter(Boolean).join(' ')}\n      role=\"tablist\"\n      aria-label=\"Carousel pages\"\n      {...props}\n    >\n      {Array.from({ length: pages }, (_, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={i === currentPage}\n          aria-label={`Page ${i + 1}`}\n          className={[styles.line, i === currentPage ? styles.lineActive : null]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={() => onPageSelected?.(i)}\n        />\n      ))}\n    </div>\n  );\n};\n\n// ─── Carousel ─────────────────────────────────────────────────────────────────\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n  /**\n   * Scroll orientation.\n   * @default \"horizontal\"\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Gap between pages in px.\n   * @default 0\n   */\n  spacing?: number;\n  /**\n   * Allow infinite looping (wraps around on the last/first page).\n   * @default false\n   */\n  loop?: boolean;\n  /** Called whenever the visible page changes. */\n  onPageChanged?: (index: number) => void;\n  /**\n   * Controlled current page index.\n   * When omitted the carousel manages page state internally.\n   */\n  page?: number;\n}\n\n/**\n * Swipeable content carousel.\n *\n * Mirrors `AdwCarousel`. Uses CSS scroll-snapping for smooth, native-feeling\n * page transitions. Supports keyboard navigation (arrow keys) and touch/mouse\n * drag via the browser's native scroll handling.\n *\n * Pair with `CarouselIndicatorDots` or `CarouselIndicatorLines` for pagination UI.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Carousel.html\n */\nexport const Carousel = ({\n  children,\n  orientation = 'horizontal',\n  spacing = 0,\n  loop = false,\n  onPageChanged,\n  page: controlledPage,\n  className,\n  ...props\n}: CarouselProps) => {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const pageCount = Children.count(children);\n  const [internalPage, setInternalPage] = useState(0);\n  const isControlled = controlledPage !== undefined;\n  const currentPage = isControlled ? controlledPage : internalPage;\n\n  const scrollToPage = useCallback(\n    (index: number, behavior: ScrollBehavior = 'smooth') => {\n      const el = scrollRef.current;\n\n      if (!el) {\n        return;\n      }\n\n      if (orientation === 'horizontal') {\n        el.scrollTo({ left: el.clientWidth * index, behavior });\n      } else {\n        el.scrollTo({ top: el.clientHeight * index, behavior });\n      }\n    },\n    [orientation],\n  );\n\n  // Scroll to the controlled page when it changes externally\n  useEffect(() => {\n    if (!isControlled) {\n      return;\n    }\n\n    scrollToPage(controlledPage, 'smooth');\n  }, [controlledPage, scrollToPage, isControlled]);\n\n  // Detect page changes via IntersectionObserver on each child\n  useEffect(() => {\n    const el = scrollRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    const handleScroll = () => {\n      const pages = Array.from(el.children) as HTMLElement[];\n      const size = orientation === 'horizontal' ? el.clientWidth : el.clientHeight;\n      const scroll = orientation === 'horizontal' ? el.scrollLeft : el.scrollTop;\n      const idx = Math.round(scroll / (size || 1));\n      const clamped = Math.max(0, Math.min(idx, pageCount - 1));\n\n      if (!isControlled) {\n        setInternalPage(clamped);\n      }\n\n      onPageChanged?.(clamped);\n      void pages; // suppress lint\n    };\n\n    el.addEventListener('scroll', handleScroll, { passive: true });\n\n    return () => el.removeEventListener('scroll', handleScroll);\n  }, [orientation, pageCount, isControlled, onPageChanged]);\n\n  // Keyboard navigation\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      const isForward =\n        orientation === 'horizontal' ? e.key === 'ArrowRight' : e.key === 'ArrowDown';\n      const isBack = orientation === 'horizontal' ? e.key === 'ArrowLeft' : e.key === 'ArrowUp';\n\n      if (isForward) {\n        e.preventDefault();\n        const next = loop\n          ? (currentPage + 1) % pageCount\n          : Math.min(currentPage + 1, pageCount - 1);\n\n        scrollToPage(next);\n        if (!isControlled) {\n          setInternalPage(next);\n        }\n\n        onPageChanged?.(next);\n      } else if (isBack) {\n        e.preventDefault();\n        const prev = loop\n          ? (currentPage - 1 + pageCount) % pageCount\n          : Math.max(currentPage - 1, 0);\n\n        scrollToPage(prev);\n        if (!isControlled) {\n          setInternalPage(prev);\n        }\n\n        onPageChanged?.(prev);\n      }\n    },\n    [currentPage, pageCount, loop, orientation, scrollToPage, isControlled, onPageChanged],\n  );\n\n  const isHorizontal = orientation === 'horizontal';\n\n  return (\n    <div\n      ref={scrollRef}\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      className={[styles.carousel, isHorizontal ? styles.horizontal : styles.vertical, className]\n        .filter(Boolean)\n        .join(' ')}\n      style={isHorizontal ? { columnGap: spacing || undefined } : { rowGap: spacing || undefined }}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {Children.map(children, (child, i) => (\n        <div\n          key={i}\n          className={styles.slide}\n          role=\"group\"\n          aria-roledescription=\"slide\"\n          aria-label={`${i + 1} of ${pageCount}`}\n        >\n          {child}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Carousel.cjs","names":[],"sources":["../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import {\n  Children,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './Carousel.module.css';\n\n// ─── CarouselIndicatorDots ────────────────────────────────────────────────────\n\nexport interface CarouselIndicatorDotsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Total number of pages. */\n  pages: number;\n  /** Zero-based index of the current page. */\n  currentPage: number;\n  /** Called when the user clicks a dot. */\n  onPageSelected?: (index: number) => void;\n}\n\n/**\n * Dot-style page indicator for `Carousel`.\n * Mirrors `AdwCarouselIndicatorDots`.\n */\nexport const CarouselIndicatorDots = ({\n  pages,\n  currentPage,\n  onPageSelected,\n  className,\n  ...props\n}: CarouselIndicatorDotsProps) => {\n  return (\n    <div\n      className={[styles.indicatorDots, className].filter(Boolean).join(' ')}\n      role=\"tablist\"\n      aria-label=\"Carousel pages\"\n      {...props}\n    >\n      {Array.from({ length: pages }, (_, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={i === currentPage}\n          aria-label={`Page ${i + 1}`}\n          className={[styles.dot, i === currentPage ? styles.dotActive : null]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={() => onPageSelected?.(i)}\n        />\n      ))}\n    </div>\n  );\n};\n\n// ─── CarouselIndicatorLines ───────────────────────────────────────────────────\n\nexport interface CarouselIndicatorLinesProps extends HTMLAttributes<HTMLDivElement> {\n  /** Total number of pages. */\n  pages: number;\n  /** Zero-based index of the current page. */\n  currentPage: number;\n  /** Called when the user clicks a line. */\n  onPageSelected?: (index: number) => void;\n}\n\n/**\n * Line-style page indicator for `Carousel`.\n * Mirrors `AdwCarouselIndicatorLines`.\n */\nexport const CarouselIndicatorLines = ({\n  pages,\n  currentPage,\n  onPageSelected,\n  className,\n  ...props\n}: CarouselIndicatorLinesProps) => {\n  return (\n    <div\n      className={[styles.indicatorLines, className].filter(Boolean).join(' ')}\n      role=\"tablist\"\n      aria-label=\"Carousel pages\"\n      {...props}\n    >\n      {Array.from({ length: pages }, (_, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={i === currentPage}\n          aria-label={`Page ${i + 1}`}\n          className={[styles.line, i === currentPage ? styles.lineActive : null]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={() => onPageSelected?.(i)}\n        />\n      ))}\n    </div>\n  );\n};\n\n// ─── Carousel ─────────────────────────────────────────────────────────────────\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n  /**\n   * Scroll orientation.\n   * @default \"horizontal\"\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Gap between pages in px.\n   * @default 0\n   */\n  spacing?: number;\n  /**\n   * Allow infinite looping (wraps around on the last/first page).\n   * @default false\n   */\n  loop?: boolean;\n  /**\n   * Number of slides visible at once. Supports fractional values (e.g. `1.5`)\n   * to peek at the edge of the next slide.\n   * @default 1\n   */\n  visibleSlides?: number;\n  /** Called whenever the visible page changes. */\n  onPageChanged?: (index: number) => void;\n  /**\n   * Controlled current page index.\n   * When omitted the carousel manages page state internally.\n   */\n  page?: number;\n}\n\n/**\n * Swipeable content carousel.\n *\n * Mirrors `AdwCarousel`. Uses CSS scroll-snapping for smooth, native-feeling\n * page transitions. Supports keyboard navigation (arrow keys), touch/mouse drag,\n * and velocity-based flick gestures.\n *\n * Pair with `CarouselIndicatorDots` or `CarouselIndicatorLines` for pagination UI.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Carousel.html\n */\nexport const Carousel = ({\n  children,\n  orientation = 'horizontal',\n  spacing = 0,\n  loop = false,\n  visibleSlides = 1,\n  onPageChanged,\n  page: controlledPage,\n  className,\n  ...props\n}: CarouselProps) => {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const pageCount = Children.count(children);\n  const [internalPage, setInternalPage] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n  const isControlled = controlledPage !== undefined;\n  const currentPage = isControlled ? controlledPage : internalPage;\n\n  // Refs for drag state — avoids stale closures in pointer handlers\n  const draggingRef = useRef(false);\n  const hasDraggedRef = useRef(false);\n  const dragStartRef = useRef({ pos: 0, scroll: 0, time: 0 });\n  const snapRestoreTimerRef = useRef(0);\n\n  // Scroll distance per page: (containerSize - spacing*(visibleSlides-1)) / visibleSlides + spacing\n  // Simplifies to: (containerSize + spacing) / visibleSlides\n  const getPageSize = useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) {\n      return 1;\n    }\n    const containerSize = orientation === 'horizontal' ? el.clientWidth : el.clientHeight;\n    return (containerSize + spacing) / visibleSlides;\n  }, [orientation, spacing, visibleSlides]);\n\n  const scrollToPage = useCallback(\n    (index: number, behavior: ScrollBehavior = 'smooth') => {\n      const el = scrollRef.current;\n      if (!el) {\n        return;\n      }\n      const offset = getPageSize() * index;\n      if (orientation === 'horizontal') {\n        el.scrollTo({ left: offset, behavior });\n      } else {\n        el.scrollTo({ top: offset, behavior });\n      }\n    },\n    [orientation, getPageSize],\n  );\n\n  // Scroll to the controlled page when it changes externally\n  useEffect(() => {\n    if (!isControlled) {\n      return;\n    }\n    scrollToPage(controlledPage, 'smooth');\n  }, [controlledPage, scrollToPage, isControlled]);\n\n  // Detect page changes from native scroll (touch) — skipped during mouse drag\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) {\n      return;\n    }\n\n    const handleScroll = () => {\n      if (draggingRef.current) {\n        return;\n      }\n      const pageSize = getPageSize();\n      const scroll = orientation === 'horizontal' ? el.scrollLeft : el.scrollTop;\n      const idx = Math.round(scroll / pageSize);\n      const clamped = Math.max(0, Math.min(idx, pageCount - 1));\n      if (!isControlled) {\n        setInternalPage(clamped);\n      }\n      onPageChanged?.(clamped);\n    };\n\n    el.addEventListener('scroll', handleScroll, { passive: true });\n    return () => el.removeEventListener('scroll', handleScroll);\n  }, [orientation, pageCount, isControlled, onPageChanged, getPageSize]);\n\n  // ── Keyboard navigation ───────────────────────────────────────────────────\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const isForward =\n        orientation === 'horizontal' ? e.key === 'ArrowRight' : e.key === 'ArrowDown';\n      const isBack = orientation === 'horizontal' ? e.key === 'ArrowLeft' : e.key === 'ArrowUp';\n\n      if (!isForward && !isBack) {\n        return;\n      }\n      e.preventDefault();\n\n      const next = isForward\n        ? loop\n          ? (currentPage + 1) % pageCount\n          : Math.min(currentPage + 1, pageCount - 1)\n        : loop\n          ? (currentPage - 1 + pageCount) % pageCount\n          : Math.max(currentPage - 1, 0);\n\n      scrollToPage(next);\n      if (!isControlled) {\n        setInternalPage(next);\n      }\n      onPageChanged?.(next);\n    },\n    [currentPage, pageCount, loop, orientation, scrollToPage, isControlled, onPageChanged],\n  );\n\n  // ── Drag (mouse + touch + pen) ───────────────────────────────────────────\n\n  const handlePointerDown = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      // Ignore non-primary mouse buttons\n      if (e.pointerType === 'mouse' && e.button !== 0) {\n        return;\n      }\n      const el = scrollRef.current;\n      if (!el) {\n        return;\n      }\n\n      // Disable scroll-snap immediately via DOM — not via React state, which would\n      // only apply after the next render, letting scroll-snap fight the first moves.\n      window.clearTimeout(snapRestoreTimerRef.current);\n      el.style.scrollSnapType = 'none';\n\n      // Capture so pointermove/up fire even when the pointer leaves the element\n      e.currentTarget.setPointerCapture(e.pointerId);\n      draggingRef.current = true;\n      hasDraggedRef.current = false;\n      setIsDragging(true);\n      dragStartRef.current = {\n        pos: orientation === 'horizontal' ? e.clientX : e.clientY,\n        scroll: orientation === 'horizontal' ? el.scrollLeft : el.scrollTop,\n        time: Date.now(),\n      };\n    },\n    [orientation],\n  );\n\n  const handlePointerMove = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!draggingRef.current) {\n        return;\n      }\n      const el = scrollRef.current;\n      if (!el) {\n        return;\n      }\n\n      const pos = orientation === 'horizontal' ? e.clientX : e.clientY;\n      const delta = dragStartRef.current.pos - pos;\n\n      if (Math.abs(delta) > 4) {\n        hasDraggedRef.current = true;\n      }\n\n      // Apply boundary resistance: dampen movement past first/last slide\n      const maxScroll =\n        orientation === 'horizontal'\n          ? el.scrollWidth - el.clientWidth\n          : el.scrollHeight - el.clientHeight;\n      let newScroll = dragStartRef.current.scroll + delta;\n\n      if (newScroll < 0) {\n        newScroll *= 0.3;\n      } else if (newScroll > maxScroll) {\n        newScroll = maxScroll + (newScroll - maxScroll) * 0.3;\n      }\n\n      if (orientation === 'horizontal') {\n        el.scrollLeft = newScroll;\n      } else {\n        el.scrollTop = newScroll;\n      }\n    },\n    [orientation],\n  );\n\n  const handlePointerUp = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!draggingRef.current) {\n        return;\n      }\n\n      draggingRef.current = false;\n      setIsDragging(false);\n\n      const el = scrollRef.current;\n\n      if (!hasDraggedRef.current || !el) {\n        // No real drag — restore snap immediately\n        el?.style.removeProperty('scroll-snap-type');\n        return;\n      }\n\n      const isCancel = e.type === 'pointercancel';\n      const pos = isCancel\n        ? dragStartRef.current.pos\n        : orientation === 'horizontal'\n          ? e.clientX\n          : e.clientY;\n\n      const delta = dragStartRef.current.pos - pos;\n      const elapsed = Math.max(Date.now() - dragStartRef.current.time, 1);\n      const velocity = isCancel ? 0 : delta / elapsed; // px/ms, positive = forward\n      const pageSize = getPageSize();\n      const scroll = orientation === 'horizontal' ? el.scrollLeft : el.scrollTop;\n\n      let target: number;\n      if (Math.abs(velocity) > 0.3) {\n        // Flick gesture — advance in the swipe direction\n        target = velocity > 0 ? Math.ceil(scroll / pageSize) : Math.floor(scroll / pageSize);\n      } else {\n        // Slow drag — snap to nearest page\n        target = Math.round(scroll / pageSize);\n      }\n\n      if (loop) {\n        target = ((target % pageCount) + pageCount) % pageCount;\n      } else {\n        target = Math.max(0, Math.min(target, pageCount - 1));\n      }\n\n      // Scroll to target while snap is still disabled, then re-enable once settled\n      scrollToPage(target);\n      if (!isControlled) {\n        setInternalPage(target);\n      }\n      onPageChanged?.(target);\n\n      // Re-enable snap after the smooth scroll animation completes (~300 ms)\n      snapRestoreTimerRef.current = window.setTimeout(() => {\n        el.style.removeProperty('scroll-snap-type');\n      }, 350);\n    },\n    [orientation, getPageSize, loop, pageCount, scrollToPage, isControlled, onPageChanged],\n  );\n\n  // Clean up the snap-restore timer on unmount\n  useEffect(() => {\n    return () => window.clearTimeout(snapRestoreTimerRef.current);\n  }, []);\n\n  // Prevent click events that fire after a drag (e.g. links/buttons inside slides)\n  const handleClick = useCallback((e: MouseEvent) => {\n    if (hasDraggedRef.current) {\n      e.preventDefault();\n      e.stopPropagation();\n      hasDraggedRef.current = false;\n    }\n  }, []);\n\n  const isHorizontal = orientation === 'horizontal';\n\n  // Slide width when showing more than one at a time\n  const slideFlexBasis =\n    visibleSlides !== 1\n      ? `calc((100% - ${spacing * (visibleSlides - 1)}px) / ${visibleSlides})`\n      : undefined;\n\n  return (\n    <div\n      ref={scrollRef}\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      tabIndex={0}\n      className={[\n        styles.carousel,\n        isHorizontal ? styles.horizontal : styles.vertical,\n        isDragging ? styles.dragging : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={isHorizontal ? { columnGap: spacing || undefined } : { rowGap: spacing || undefined }}\n      onKeyDown={handleKeyDown}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerUp}\n      onClick={handleClick}\n      {...props}\n    >\n      {Children.map(children, (child, i) => (\n        <div\n          key={i}\n          className={styles.slide}\n          role=\"group\"\n          aria-roledescription=\"slide\"\n          aria-label={`${i + 1} of ${pageCount}`}\n          style={slideFlexBasis ? { flex: `0 0 ${slideFlexBasis}` } : undefined}\n        >\n          {child}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Carousel/Carousel.d.ts

@@ -42,6 +42,12 @@ export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
      * @default false
      */
     loop?: boolean;
+    /**
+     * Number of slides visible at once. Supports fractional values (e.g. `1.5`)
+     * to peek at the edge of the next slide.
+     * @default 1
+     */
+    visibleSlides?: number;
     /** Called whenever the visible page changes. */
     onPageChanged?: (index: number) => void;
     /**
@@ -54,11 +60,11 @@ export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
  * Swipeable content carousel.
  *
  * Mirrors `AdwCarousel`. Uses CSS scroll-snapping for smooth, native-feeling
- * page transitions. Supports keyboard navigation (arrow keys) and touch/mouse
- * drag via the browser's native scroll handling.
+ * page transitions. Supports keyboard navigation (arrow keys), touch/mouse drag,
+ * and velocity-based flick gestures.
  *
  * Pair with `CarouselIndicatorDots` or `CarouselIndicatorLines` for pagination UI.
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Carousel.html
  */
-export declare const Carousel: ({ children, orientation, spacing, loop, onPageChanged, page: controlledPage, className, ...props }: CarouselProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Carousel: ({ children, orientation, spacing, loop, visibleSlides, onPageChanged, page: controlledPage, className, ...props }: CarouselProps) => import("react/jsx-runtime").JSX.Element;