npm - @gnome-ui/react - Versions diffs - 1.49.0 → 1.49.1 - Mend

@gnome-ui/react 1.49.0 → 1.49.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (343) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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":""}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":""}
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, #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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":""}
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, #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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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 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 CHANGED Viewed

@@ -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;

package/dist/components/Carousel/Carousel.js CHANGED Viewed

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

package/dist/components/Carousel/Carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Carousel.js","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":";;;;AA4BA,IAAa,KAAyB,EACpC,UACA,gBACA,mBACA,cACA,GAAG,QAGD,kBAAC,OAAD;CACE,WAAW,CAAC,EAAO,eAAe,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;CACrE,MAAK;CACL,cAAW;CACX,GAAI;WAEH,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MACjC,kBAAC,UAAD;EAEE,MAAK;EACL,MAAK;EACL,iBAAe,MAAM;EACrB,cAAY,QAAQ,IAAI;EACxB,WAAW,CAAC,EAAO,KAAK,MAAM,IAAc,EAAO,YAAY,IAAI,EAChE,OAAO,OAAO,EACd,KAAK,GAAG;EACX,eAAe,IAAiB,CAAC;CAClC,GATM,CASN,CACF;AACE,CAAA,GAmBI,KAA0B,EACrC,UACA,gBACA,mBACA,cACA,GAAG,QAGD,kBAAC,OAAD;CACE,WAAW,CAAC,EAAO,gBAAgB,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;CACtE,MAAK;CACL,cAAW;CACX,GAAI;WAEH,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MACjC,kBAAC,UAAD;EAEE,MAAK;EACL,MAAK;EACL,iBAAe,MAAM;EACrB,cAAY,QAAQ,IAAI;EACxB,WAAW,CAAC,EAAO,MAAM,MAAM,IAAc,EAAO,aAAa,IAAI,EAClE,OAAO,OAAO,EACd,KAAK,GAAG;EACX,eAAe,IAAiB,CAAC;CAClC,GATM,CASN,CACF;AACE,CAAA,GA2CI,KAAY,EACvB,aACA,iBAAc,cACd,aAAU,GACV,UAAO,IACP,kBACA,MAAM,GACN,cACA,GAAG,QACgB;CACnB,IAAM,IAAY,EAAuB,IAAI,GACvC,IAAY,EAAS,MAAM,CAAQ,GACnC,CAAC,GAAc,KAAmB,EAAS,CAAC,GAC5C,IAAe,MAAmB,KAAA,GAClC,IAAc,IAAe,IAAiB,GAE9C,IAAe,GAClB,GAAe,IAA2B,aAAa;EACtD,IAAM,IAAK,EAAU;EAEhB,MAID,MAAgB,eAClB,EAAG,SAAS;GAAE,MAAM,EAAG,cAAc;GAAO;EAAS,CAAC,IAEtD,EAAG,SAAS;GAAE,KAAK,EAAG,eAAe;GAAO;EAAS,CAAC;CAE1D,GACA,CAAC,CAAW,CACd;CAYA,AATA,QAAgB;EACT,KAIL,EAAa,GAAgB,QAAQ;CACvC,GAAG;EAAC;EAAgB;EAAc;CAAY,CAAC,GAG/C,QAAgB;EACd,IAAM,IAAK,EAAU;EAErB,IAAI,CAAC,GACH;EAGF,IAAM,UAAqB;GACX,MAAM,KAAK,EAAG,QAAQ;GACpC,IAAM,IAAO,MAAgB,eAAe,EAAG,cAAc,EAAG,cAC1D,IAAS,MAAgB,eAAe,EAAG,aAAa,EAAG,WAC3D,IAAM,KAAK,MAAM,KAAU,KAAQ,EAAE,GACrC,IAAU,KAAK,IAAI,GAAG,KAAK,IAAI,GAAK,IAAY,CAAC,CAAC;GAMxD,AAJK,KACH,EAAgB,CAAO,GAGzB,IAAgB,CAAO;EAEzB;EAIA,OAFA,EAAG,iBAAiB,UAAU,GAAc,EAAE,SAAS,GAAK,CAAC,SAEhD,EAAG,oBAAoB,UAAU,CAAY;CAC5D,GAAG;EAAC;EAAa;EAAW;EAAc;CAAa,CAAC;CAGxD,IAAM,IAAgB,GACnB,MAAqB;EACpB,IAAM,IACJ,MAAgB,eAAe,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAC9D,IAAS,MAAgB,eAAe,EAAE,QAAQ,cAAc,EAAE,QAAQ;EAEhF,IAAI,GAAW;GACb,EAAE,eAAe;GACjB,IAAM,IAAO,KACR,IAAc,KAAK,IACpB,KAAK,IAAI,IAAc,GAAG,IAAY,CAAC;GAO3C,AALA,EAAa,CAAI,GACZ,KACH,EAAgB,CAAI,GAGtB,IAAgB,CAAI;EACtB,OAAO,IAAI,GAAQ;GACjB,EAAE,eAAe;GACjB,IAAM,IAAO,KACR,IAAc,IAAI,KAAa,IAChC,KAAK,IAAI,IAAc,GAAG,CAAC;GAO/B,AALA,EAAa,CAAI,GACZ,KACH,EAAgB,CAAI,GAGtB,IAAgB,CAAI;EACtB;CACF,GACA;EAAC;EAAa;EAAW;EAAM;EAAa;EAAc;EAAc;CAAa,CACvF,GAEM,IAAe,MAAgB;CAErC,OACE,kBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,wBAAqB;EACrB,WAAW;GAAC,EAAO;GAAU,IAAe,EAAO,aAAa,EAAO;GAAU;EAAS,EACvF,OAAO,OAAO,EACd,KAAK,GAAG;EACX,OAAO,IAAe,EAAE,WAAW,KAAW,KAAA,EAAU,IAAI,EAAE,QAAQ,KAAW,KAAA,EAAU;EAC3F,WAAW;EACX,GAAI;YAEH,EAAS,IAAI,IAAW,GAAO,MAC9B,kBAAC,OAAD;GAEE,WAAW,EAAO;GAClB,MAAK;GACL,wBAAqB;GACrB,cAAY,GAAG,IAAI,EAAE,MAAM;aAE1B;EACE,GAPE,CAOF,CACN;CACE,CAAA;AAET"}
1	+ {"version":3,"file":"Carousel.js","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":";;;;AA8BA,IAAa,KAAyB,EACpC,UACA,gBACA,mBACA,cACA,GAAG,QAGD,kBAAC,OAAD;CACE,WAAW,CAAC,EAAO,eAAe,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;CACrE,MAAK;CACL,cAAW;CACX,GAAI;WAEH,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MACjC,kBAAC,UAAD;EAEE,MAAK;EACL,MAAK;EACL,iBAAe,MAAM;EACrB,cAAY,QAAQ,IAAI;EACxB,WAAW,CAAC,EAAO,KAAK,MAAM,IAAc,EAAO,YAAY,IAAI,EAChE,OAAO,OAAO,EACd,KAAK,GAAG;EACX,eAAe,IAAiB,CAAC;CAClC,GATM,CASN,CACF;AACE,CAAA,GAmBI,KAA0B,EACrC,UACA,gBACA,mBACA,cACA,GAAG,QAGD,kBAAC,OAAD;CACE,WAAW,CAAC,EAAO,gBAAgB,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;CACtE,MAAK;CACL,cAAW;CACX,GAAI;WAEH,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MACjC,kBAAC,UAAD;EAEE,MAAK;EACL,MAAK;EACL,iBAAe,MAAM;EACrB,cAAY,QAAQ,IAAI;EACxB,WAAW,CAAC,EAAO,MAAM,MAAM,IAAc,EAAO,aAAa,IAAI,EAClE,OAAO,OAAO,EACd,KAAK,GAAG;EACX,eAAe,IAAiB,CAAC;CAClC,GATM,CASN,CACF;AACE,CAAA,GAiDI,KAAY,EACvB,aACA,iBAAc,cACd,aAAU,GACV,UAAO,IACP,mBAAgB,GAChB,kBACA,MAAM,GACN,cACA,GAAG,QACgB;CACnB,IAAM,IAAY,EAAuB,IAAI,GACvC,IAAY,EAAS,MAAM,CAAQ,GACnC,CAAC,GAAc,KAAmB,EAAS,CAAC,GAC5C,CAAC,GAAY,KAAiB,EAAS,EAAK,GAC5C,IAAe,MAAmB,KAAA,GAClC,IAAc,IAAe,IAAiB,GAG9C,IAAc,EAAO,EAAK,GAC1B,IAAgB,EAAO,EAAK,GAC5B,IAAe,EAAO;EAAE,KAAK;EAAG,QAAQ;EAAG,MAAM;CAAE,CAAC,GACpD,IAAsB,EAAO,CAAC,GAI9B,IAAc,QAAkB;EACpC,IAAM,IAAK,EAAU;EAKrB,OAJK,MAGiB,MAAgB,eAAe,EAAG,cAAc,EAAG,gBACjD,KAAW,IAH1B;CAIX,GAAG;EAAC;EAAa;EAAS;CAAa,CAAC,GAElC,IAAe,GAClB,GAAe,IAA2B,aAAa;EACtD,IAAM,IAAK,EAAU;EACrB,IAAI,CAAC,GACH;EAEF,IAAM,IAAS,EAAY,IAAI;EAC/B,AAAI,MAAgB,eAClB,EAAG,SAAS;GAAE,MAAM;GAAQ;EAAS,CAAC,IAEtC,EAAG,SAAS;GAAE,KAAK;GAAQ;EAAS,CAAC;CAEzC,GACA,CAAC,GAAa,CAAW,CAC3B;CAWA,AARA,QAAgB;EACT,KAGL,EAAa,GAAgB,QAAQ;CACvC,GAAG;EAAC;EAAgB;EAAc;CAAY,CAAC,GAG/C,QAAgB;EACd,IAAM,IAAK,EAAU;EACrB,IAAI,CAAC,GACH;EAGF,IAAM,UAAqB;GACzB,IAAI,EAAY,SACd;GAEF,IAAM,IAAW,EAAY,GACvB,IAAS,MAAgB,eAAe,EAAG,aAAa,EAAG,WAC3D,IAAM,KAAK,MAAM,IAAS,CAAQ,GAClC,IAAU,KAAK,IAAI,GAAG,KAAK,IAAI,GAAK,IAAY,CAAC,CAAC;GAIxD,AAHK,KACH,EAAgB,CAAO,GAEzB,IAAgB,CAAO;EACzB;EAGA,OADA,EAAG,iBAAiB,UAAU,GAAc,EAAE,SAAS,GAAK,CAAC,SAChD,EAAG,oBAAoB,UAAU,CAAY;CAC5D,GAAG;EAAC;EAAa;EAAW;EAAc;EAAe;CAAW,CAAC;CAIrE,IAAM,IAAgB,GACnB,MAAqC;EACpC,IAAM,IACJ,MAAgB,eAAe,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAC9D,IAAS,MAAgB,eAAe,EAAE,QAAQ,cAAc,EAAE,QAAQ;EAEhF,IAAI,CAAC,KAAa,CAAC,GACjB;EAEF,EAAE,eAAe;EAEjB,IAAM,IAAO,IACT,KACG,IAAc,KAAK,IACpB,KAAK,IAAI,IAAc,GAAG,IAAY,CAAC,IACzC,KACG,IAAc,IAAI,KAAa,IAChC,KAAK,IAAI,IAAc,GAAG,CAAC;EAMjC,AAJA,EAAa,CAAI,GACZ,KACH,EAAgB,CAAI,GAEtB,IAAgB,CAAI;CACtB,GACA;EAAC;EAAa;EAAW;EAAM;EAAa;EAAc;EAAc;CAAa,CACvF,GAIM,IAAoB,GACvB,MAAoC;EAEnC,IAAI,EAAE,gBAAgB,WAAW,EAAE,WAAW,GAC5C;EAEF,IAAM,IAAK,EAAU;EAChB,MAML,OAAO,aAAa,EAAoB,OAAO,GAC/C,EAAG,MAAM,iBAAiB,QAG1B,EAAE,cAAc,kBAAkB,EAAE,SAAS,GAC7C,EAAY,UAAU,IACtB,EAAc,UAAU,IACxB,EAAc,EAAI,GAClB,EAAa,UAAU;GACrB,KAAK,MAAgB,eAAe,EAAE,UAAU,EAAE;GAClD,QAAQ,MAAgB,eAAe,EAAG,aAAa,EAAG;GAC1D,MAAM,KAAK,IAAI;EACjB;CACF,GACA,CAAC,CAAW,CACd,GAEM,IAAoB,GACvB,MAAoC;EACnC,IAAI,CAAC,EAAY,SACf;EAEF,IAAM,IAAK,EAAU;EACrB,IAAI,CAAC,GACH;EAGF,IAAM,IAAM,MAAgB,eAAe,EAAE,UAAU,EAAE,SACnD,IAAQ,EAAa,QAAQ,MAAM;EAEzC,AAAI,KAAK,IAAI,CAAK,IAAI,MACpB,EAAc,UAAU;EAI1B,IAAM,IACJ,MAAgB,eACZ,EAAG,cAAc,EAAG,cACpB,EAAG,eAAe,EAAG,cACvB,IAAY,EAAa,QAAQ,SAAS;EAQ9C,AANI,IAAY,IACd,KAAa,KACJ,IAAY,MACrB,IAAY,KAAa,IAAY,KAAa,KAGhD,MAAgB,eAClB,EAAG,aAAa,IAEhB,EAAG,YAAY;CAEnB,GACA,CAAC,CAAW,CACd,GAEM,IAAkB,GACrB,MAAoC;EACnC,IAAI,CAAC,EAAY,SACf;EAIF,AADA,EAAY,UAAU,IACtB,EAAc,EAAK;EAEnB,IAAM,IAAK,EAAU;EAErB,IAAI,CAAC,EAAc,WAAW,CAAC,GAAI;GAEjC,GAAI,MAAM,eAAe,kBAAkB;GAC3C;EACF;EAEA,IAAM,IAAW,EAAE,SAAS,iBACtB,IAAM,IACR,EAAa,QAAQ,MACrB,MAAgB,eACd,EAAE,UACF,EAAE,SAEF,IAAQ,EAAa,QAAQ,MAAM,GACnC,IAAU,KAAK,IAAI,KAAK,IAAI,IAAI,EAAa,QAAQ,MAAM,CAAC,GAC5D,IAAW,IAAW,IAAI,IAAQ,GAClC,IAAW,EAAY,GACvB,IAAS,MAAgB,eAAe,EAAG,aAAa,EAAG,WAE7D;EAuBJ,AAtBA,AAKE,IALE,KAAK,IAAI,CAAQ,IAAI,KAEd,IAAW,IAAI,KAAK,KAAK,IAAS,CAAQ,IAAI,KAAK,MAAM,IAAS,CAAQ,IAG1E,KAAK,MAAM,IAAS,CAAQ,GAGvC,AAGE,IAHE,KACS,IAAS,IAAa,KAAa,IAErC,KAAK,IAAI,GAAG,KAAK,IAAI,GAAQ,IAAY,CAAC,CAAC,GAItD,EAAa,CAAM,GACd,KACH,EAAgB,CAAM,GAExB,IAAgB,CAAM,GAGtB,EAAoB,UAAU,OAAO,iBAAiB;GACpD,EAAG,MAAM,eAAe,kBAAkB;EAC5C,GAAG,GAAG;CACR,GACA;EAAC;EAAa;EAAa;EAAM;EAAW;EAAc;EAAc;CAAa,CACvF;CAGA,cACe,OAAO,aAAa,EAAoB,OAAO,GAC3D,CAAC,CAAC;CAGL,IAAM,IAAc,GAAa,MAAkB;EACjD,AAGE,EAAc,aAFd,EAAE,eAAe,GACjB,EAAE,gBAAgB,GACM;CAE5B,GAAG,CAAC,CAAC,GAEC,IAAe,MAAgB,cAG/B,IACJ,MAAkB,IAEd,KAAA,IADA,gBAAgB,KAAW,IAAgB,GAAG,QAAQ,EAAc;CAG1E,OACE,kBAAC,OAAD;EACE,KAAK;EACL,MAAK;EACL,wBAAqB;EACrB,UAAU;EACV,WAAW;GACT,EAAO;GACP,IAAe,EAAO,aAAa,EAAO;GAC1C,IAAa,EAAO,WAAW;GAC/B;EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;EACX,OAAO,IAAe,EAAE,WAAW,KAAW,KAAA,EAAU,IAAI,EAAE,QAAQ,KAAW,KAAA,EAAU;EAC3F,WAAW;EACX,eAAe;EACf,eAAe;EACf,aAAa;EACb,iBAAiB;EACjB,SAAS;EACT,GAAI;YAEH,EAAS,IAAI,IAAW,GAAO,MAC9B,kBAAC,OAAD;GAEE,WAAW,EAAO;GAClB,MAAK;GACL,wBAAqB;GACrB,cAAY,GAAG,IAAI,EAAE,MAAM;GAC3B,OAAO,IAAiB,EAAE,MAAM,OAAO,IAAiB,IAAI,KAAA;aAE3D;EACE,GARE,CAQF,CACN;CACE,CAAA;AAET"}

package/dist/components/Carousel/Carousel.module.css.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={carousel:`_carousel_1tci2_3`,horizontal:`_horizontal_1tci2_20`,vertical:`_vertical_1tci2_27`,slide:`_slide_1tci2_36`,indicatorDots:`_indicatorDots_1tci2_46`,dot:`_dot_1tci2_54`,dotActive:`_dotActive_1tci2_73`,indicatorLines:`_indicatorLines_1tci2_85`,line:`_line_1tci2_93`,lineActive:`_lineActive_1tci2_110`};exports.default=e;
+var e={carousel:`_carousel_1yojd_3`,horizontal:`_horizontal_1yojd_25`,vertical:`_vertical_1yojd_34`,dragging:`_dragging_1yojd_44`,slide:`_slide_1yojd_53`,indicatorDots:`_indicatorDots_1yojd_62`,dot:`_dot_1yojd_70`,dotActive:`_dotActive_1yojd_89`,indicatorLines:`_indicatorLines_1yojd_101`,line:`_line_1yojd_109`,lineActive:`_lineActive_1yojd_126`};exports.default=e;
 //# sourceMappingURL=Carousel.module.css.cjs.map

package/dist/components/Carousel/Carousel.module.css.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Carousel.module.css.cjs","names":[],"sources":["../../../src/components/Carousel/Carousel.module.css"],"sourcesContent":["/* ─── Carousel container ────────────────────────────────────────────────────── /\n\n.carousel {\n display: flex;\n overflow: hidden;\n ~~scroll~~-~~snap-type~~: ~~both mandatory~~;\n ~~-webkit-overflow-scrolling~~: ~~touch~~;\n ~~outline~~: ~~none~~;\n width: ~~100%;\~~n}\n\n.carousel:focus-visible {\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n border-radius: var(--gnome-radius-md, 8px);\n}\n\n.horizontal {\n flex-direction: row;\n overflow-x: scroll~~;\n overflow-y:~~ hidden;\n scroll-snap-type: x mandatory;\n}\n\n.vertical {\n flex-direction: column;\n overflow-y: scroll;\n ~~overflow~~-x: ~~hidden~~;\n scroll-snap-type: y ~~mandatory;\~~n}\n\n/ ─── Slide ─────────────────────────────────────────────────────────────────── /\n\n.slide {\n flex: 0 0 100%;\n scroll-snap-align: start;\n ~~scroll-snap-stop: always;\n~~ min-width: 0;\n min-height: 0;\n}\n\n/ ─── Dot indicators ────────────────────────────────────────────────────────── /\n\n.indicatorDots {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: var(--gnome-space-2, 12px) 0;\n}\n\n.dot {\n appearance: none;\n border: none;\n padding: 0;\n cursor: pointer;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--gnome-window-fg-color, ~~rgba~~(0, 0, 0, 0.8));\n opacity: 0.2;\n transition:\n opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.dot:hover {\n opacity: 0.5;\n}\n\n.dotActive {\n opacity: 1;\n transform: scale(1.15);\n}\n\n.dot:focus-visible {\n outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n outline-offset: 2px;\n}\n\n/ ─── Line indicators ───────────────────────────────────────────────────────── /\n\n.indicatorLines {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: var(--gnome-space-2, 12px) 0;\n}\n\n.line {\n appearance: none;\n border: none;\n padding: 0;\n cursor: pointer;\n width: 24px;\n height: 3px;\n border-radius: 2px;\n background-color: var(--gnome-window-fg-color, ~~rgba~~(0, 0, 0, 0.8));\n opacity: 0.2;\n transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.line:hover {\n opacity: 0.5;\n}\n\n.lineActive {\n opacity: 1;\n}\n\n.line:focus-visible {\n outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n outline-offset: 2px;\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .carousel {\n scroll-behavior: auto;\n }\n\n .dot,\n .line {\n transition: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Carousel.module.css.cjs","names":[],"sources":["../../../src/components/Carousel/Carousel.module.css"],"sourcesContent":["/* ─── Carousel container ────────────────────────────────────────────────────── /\n\n.carousel {\n display: flex;\n overflow: hidden;\n overscroll-behavior: contain;\n outline: none;\n width: 100%;\n cursor: grab;\n scrollbar-width: none; / Firefox /\n}\n\n.carousel::-webkit-scrollbar {\n display: none; / Chrome / Safari / Edge /\n}\n\n.carousel:focus-visible {\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n border-radius: var(--gnome-radius-md, 8px);\n}\n\n.horizontal {\n flex-direction: row;\n overflow: scroll hidden;\n scroll-snap-type: x mandatory;\n\n / pan-y: browser handles vertical page scroll; we handle horizontal drag /\n touch-action: pan-y;\n}\n\n.vertical {\n flex-direction: column;\n overflow: hidden scroll;\n scroll-snap-type: y mandatory;\n\n / pan-x: browser handles horizontal page scroll; we handle vertical drag /\n touch-action: pan-x;\n}\n\n/ Active mouse drag state /\n.dragging {\n cursor: grabbing;\n user-select: none;\n\n / scroll-snap-type is disabled via inline style during drag /\n}\n\n/ ─── Slide ─────────────────────────────────────────────────────────────────── /\n\n.slide {\n flex: 0 0 100%;\n scroll-snap-align: start;\n min-width: 0;\n min-height: 0;\n}\n\n/ ─── Dot indicators ────────────────────────────────────────────────────────── /\n\n.indicatorDots {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: var(--gnome-space-2, 12px) 0;\n}\n\n.dot {\n appearance: none;\n border: none;\n padding: 0;\n cursor: pointer;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n opacity: 0.2;\n transition:\n opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.dot:hover {\n opacity: 0.5;\n}\n\n.dotActive {\n opacity: 1;\n transform: scale(1.15);\n}\n\n.dot:focus-visible {\n outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n outline-offset: 2px;\n}\n\n/ ─── Line indicators ───────────────────────────────────────────────────────── /\n\n.indicatorLines {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: var(--gnome-space-2, 12px) 0;\n}\n\n.line {\n appearance: none;\n border: none;\n padding: 0;\n cursor: pointer;\n width: 24px;\n height: 3px;\n border-radius: 2px;\n background-color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n opacity: 0.2;\n transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.line:hover {\n opacity: 0.5;\n}\n\n.lineActive {\n opacity: 1;\n}\n\n.line:focus-visible {\n outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n outline-offset: 2px;\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .carousel {\n scroll-behavior: auto;\n }\n\n .dot,\n .line {\n transition: none;\n }\n}\n"],"mappings":""}

package/dist/components/Carousel/Carousel.module.css.js CHANGED Viewed

@@ -1,14 +1,15 @@
 var e = {
-	carousel: "_carousel_1tci2_3",
-	horizontal: "_horizontal_1tci2_20",
-	vertical: "_vertical_1tci2_27",
-	slide: "_slide_1tci2_36",
-	indicatorDots: "_indicatorDots_1tci2_46",
-	dot: "_dot_1tci2_54",
-	dotActive: "_dotActive_1tci2_73",
-	indicatorLines: "_indicatorLines_1tci2_85",
-	line: "_line_1tci2_93",
-	lineActive: "_lineActive_1tci2_110"
+	carousel: "_carousel_1yojd_3",
+	horizontal: "_horizontal_1yojd_25",
+	vertical: "_vertical_1yojd_34",
+	dragging: "_dragging_1yojd_44",
+	slide: "_slide_1yojd_53",
+	indicatorDots: "_indicatorDots_1yojd_62",
+	dot: "_dot_1yojd_70",
+	dotActive: "_dotActive_1yojd_89",
+	indicatorLines: "_indicatorLines_1yojd_101",
+	line: "_line_1yojd_109",
+	lineActive: "_lineActive_1yojd_126"
 };
 //#endregion
 export { e as default };

package/dist/components/Carousel/Carousel.module.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Carousel.module.css.js","names":[],"sources":["../../../src/components/Carousel/Carousel.module.css"],"sourcesContent":["/* ─── Carousel container ────────────────────────────────────────────────────── /\n\n.carousel {\n display: flex;\n overflow: hidden;\n ~~scroll~~-~~snap-type~~: ~~both mandatory~~;\n ~~-webkit-overflow-scrolling~~: ~~touch~~;\n ~~outline~~: ~~none~~;\n width: ~~100%;\~~n}\n\n.carousel:focus-visible {\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n border-radius: var(--gnome-radius-md, 8px);\n}\n\n.horizontal {\n flex-direction: row;\n overflow-x: scroll~~;\n overflow-y:~~ hidden;\n scroll-snap-type: x mandatory;\n}\n\n.vertical {\n flex-direction: column;\n overflow-y: scroll;\n ~~overflow~~-x: ~~hidden~~;\n scroll-snap-type: y ~~mandatory;\~~n}\n\n/ ─── Slide ─────────────────────────────────────────────────────────────────── /\n\n.slide {\n flex: 0 0 100%;\n scroll-snap-align: start;\n ~~scroll-snap-stop: always;\n~~ min-width: 0;\n min-height: 0;\n}\n\n/ ─── Dot indicators ────────────────────────────────────────────────────────── /\n\n.indicatorDots {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: var(--gnome-space-2, 12px) 0;\n}\n\n.dot {\n appearance: none;\n border: none;\n padding: 0;\n cursor: pointer;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--gnome-window-fg-color, ~~rgba~~(0, 0, 0, 0.8));\n opacity: 0.2;\n transition:\n opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.dot:hover {\n opacity: 0.5;\n}\n\n.dotActive {\n opacity: 1;\n transform: scale(1.15);\n}\n\n.dot:focus-visible {\n outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n outline-offset: 2px;\n}\n\n/ ─── Line indicators ───────────────────────────────────────────────────────── /\n\n.indicatorLines {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: var(--gnome-space-2, 12px) 0;\n}\n\n.line {\n appearance: none;\n border: none;\n padding: 0;\n cursor: pointer;\n width: 24px;\n height: 3px;\n border-radius: 2px;\n background-color: var(--gnome-window-fg-color, ~~rgba~~(0, 0, 0, 0.8));\n opacity: 0.2;\n transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.line:hover {\n opacity: 0.5;\n}\n\n.lineActive {\n opacity: 1;\n}\n\n.line:focus-visible {\n outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n outline-offset: 2px;\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .carousel {\n scroll-behavior: auto;\n }\n\n .dot,\n .line {\n transition: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Carousel.module.css.js","names":[],"sources":["../../../src/components/Carousel/Carousel.module.css"],"sourcesContent":["/* ─── Carousel container ────────────────────────────────────────────────────── /\n\n.carousel {\n display: flex;\n overflow: hidden;\n overscroll-behavior: contain;\n outline: none;\n width: 100%;\n cursor: grab;\n scrollbar-width: none; / Firefox /\n}\n\n.carousel::-webkit-scrollbar {\n display: none; / Chrome / Safari / Edge /\n}\n\n.carousel:focus-visible {\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n var(--gnome-focus-ring-color, #3584e4);\n border-radius: var(--gnome-radius-md, 8px);\n}\n\n.horizontal {\n flex-direction: row;\n overflow: scroll hidden;\n scroll-snap-type: x mandatory;\n\n / pan-y: browser handles vertical page scroll; we handle horizontal drag /\n touch-action: pan-y;\n}\n\n.vertical {\n flex-direction: column;\n overflow: hidden scroll;\n scroll-snap-type: y mandatory;\n\n / pan-x: browser handles horizontal page scroll; we handle vertical drag /\n touch-action: pan-x;\n}\n\n/ Active mouse drag state /\n.dragging {\n cursor: grabbing;\n user-select: none;\n\n / scroll-snap-type is disabled via inline style during drag /\n}\n\n/ ─── Slide ─────────────────────────────────────────────────────────────────── /\n\n.slide {\n flex: 0 0 100%;\n scroll-snap-align: start;\n min-width: 0;\n min-height: 0;\n}\n\n/ ─── Dot indicators ────────────────────────────────────────────────────────── /\n\n.indicatorDots {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: var(--gnome-space-2, 12px) 0;\n}\n\n.dot {\n appearance: none;\n border: none;\n padding: 0;\n cursor: pointer;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n opacity: 0.2;\n transition:\n opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.dot:hover {\n opacity: 0.5;\n}\n\n.dotActive {\n opacity: 1;\n transform: scale(1.15);\n}\n\n.dot:focus-visible {\n outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n outline-offset: 2px;\n}\n\n/ ─── Line indicators ───────────────────────────────────────────────────────── /\n\n.indicatorLines {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: var(--gnome-space-2, 12px) 0;\n}\n\n.line {\n appearance: none;\n border: none;\n padding: 0;\n cursor: pointer;\n width: 24px;\n height: 3px;\n border-radius: 2px;\n background-color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n opacity: 0.2;\n transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.line:hover {\n opacity: 0.5;\n}\n\n.lineActive {\n opacity: 1;\n}\n\n.line:focus-visible {\n outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n outline-offset: 2px;\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .carousel {\n scroll-behavior: auto;\n }\n\n .dot,\n .line {\n transition: none;\n }\n}\n"],"mappings":""}

package/dist/components/CheckRow/CheckRow.module.css.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={row:`_row_1ckav_3`,disabled:`_disabled_1ckav_41`,checkboxWrap:`_checkboxWrap_1ckav_49`,checkbox:`_checkbox_1ckav_49`,checkboxChecked:`_checkboxChecked_1ckav_71`,checkmark:`_checkmark_1ckav_77`,leading:`_leading_1ckav_84`,content:`_content_1ckav_93`,title:`_title_1ckav_101`,subtitle:`_subtitle_1ckav_112`};exports.default=e;
+var e={row:`_row_rq5l1_3`,disabled:`_disabled_rq5l1_38`,checkboxWrap:`_checkboxWrap_rq5l1_46`,checkbox:`_checkbox_rq5l1_46`,checkboxChecked:`_checkboxChecked_rq5l1_68`,checkmark:`_checkmark_rq5l1_74`,leading:`_leading_rq5l1_81`,content:`_content_rq5l1_90`,title:`_title_rq5l1_98`,subtitle:`_subtitle_rq5l1_109`};exports.default=e;
 //# sourceMappingURL=CheckRow.module.css.cjs.map

package/dist/components/CheckRow/CheckRow.module.css.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckRow.module.css.cjs","names":[],"sources":["../../../src/components/CheckRow/CheckRow.module.css"],"sourcesContent":["/* ─── Row button ────────────────────────────────────────────────────────────── /\n\n.row {\n display: flex;\n align-items: 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 appearance: none;\n ~~-webkit-appearance: none;\n~~ background: transparent;\n border: none;\n font: inherit;\n outline: none;\n cursor: pointer;\n text-align: start;\n color: var(--gnome-card-fg-color, ~~rgba~~(0, 0, 0, 0.8));\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/ ─── Disabled ──────────────────────────────────────────────────────────────── /\n\n.disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/ ─── Checkbox visual ───────────────────────────────────────────────────────── /\n\n.checkboxWrap {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.checkbox {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: var(--gnome-radius-sm, 4px);\n border: 1.5px solid var(--gnome-border-subtle, ~~rgba~~(0, 0, 0, 0.25));\n background-color: transparent;\n color: transparent;\n transition:\n background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n border-color var(--gnome-duration-fast) var(--gnome-easing-default),\n color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkboxChecked {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n border-color: var(--gnome-accent-bg-color, #3584e4);\n color: #~~ffffff~~;\n}\n\n.checkmark {\n display: block;\n flex-shrink: 0;\n}\n\n/ ─── Leading icon/avatar ───────────────────────────────────────────────────── /\n\n.leading {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--gnome-window-fg-color, ~~rgba~~(0, 0, 0, 0.8));\n}\n\n/ ─── Text content ──────────────────────────────────────────────────────────── /\n\n.content {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n gap: 2px;\n}\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-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-card-fg-color, ~~rgba~~(0, 0, 0, 0.8));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.subtitle {\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-window-fg-color, ~~rgba~~(0, 0, 0, 0.55));\n opacity: var(--gnome-opacity-dim, 0.55);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\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 .checkbox {\n border-width: 2px;\n }\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .checkbox {\n transition: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"CheckRow.module.css.cjs","names":[],"sources":["../../../src/components/CheckRow/CheckRow.module.css"],"sourcesContent":["/* ─── Row button ────────────────────────────────────────────────────────────── /\n\n.row {\n display: flex;\n align-items: 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 appearance: none;\n background: transparent;\n border: none;\n font: inherit;\n outline: none;\n cursor: pointer;\n text-align: start;\n color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\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/ ─── Disabled ──────────────────────────────────────────────────────────────── /\n\n.disabled {\n opacity: var(--gnome-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/ ─── Checkbox visual ───────────────────────────────────────────────────────── /\n\n.checkboxWrap {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n\n.checkbox {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: var(--gnome-radius-sm, 4px);\n border: 1.5px solid var(--gnome-border-subtle, rgb(0 0 0 / 0.25));\n background-color: transparent;\n color: transparent;\n transition:\n background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n border-color var(--gnome-duration-fast) var(--gnome-easing-default),\n color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkboxChecked {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n border-color: var(--gnome-accent-bg-color, #3584e4);\n color: #fff;\n}\n\n.checkmark {\n display: block;\n flex-shrink: 0;\n}\n\n/ ─── Leading icon/avatar ───────────────────────────────────────────────────── /\n\n.leading {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n/ ─── Text content ──────────────────────────────────────────────────────────── /\n\n.content {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n gap: 2px;\n}\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-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.subtitle {\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n font-weight: var(--gnome-font-weight-normal, 400);\n line-height: var(--gnome-line-height-body, 1.5);\n color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.55));\n opacity: var(--gnome-opacity-dim, 0.55);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\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 .checkbox {\n border-width: 2px;\n }\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .checkbox {\n transition: none;\n }\n}\n"],"mappings":""}