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

@gnome-ui/react 1.48.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 (372) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Banner.module.css.cjs","names":[],"sources":["../../../src/components/Banner/Banner.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── /\n\n.banner {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-2, 12px);\n padding: 10px var(--gnome-space-4, 24px);\n min-height: 44px;\n width: 100%;\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n line-height: var(--gnome-line-height-body, 1.5);\n}\n\n/ ─── Message ──────────────────────────────────────────────────────────────── /\n\n.message {\n flex: 1;\n min-width: 0;\n}\n\n/ ─── Actions (action button + dismiss) ────────────────────────────────────── /\n\n.actions {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-1, 6px);\n flex-shrink: 0;\n}\n\n/ ─── Action button ────────────────────────────────────────────────────────── /\n\n.actionBtn {\n appearance: none;\n border: none;\n background: transparent;\n font: inherit;\n font-weight: var(--gnome-font-weight-semibold, 600);\n cursor: pointer;\n padding: 4px var(--gnome-space-2, 12px);\n border-radius: var(--gnome-radius-md, 8px);\n transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.actionBtn:focus-visible {\n outline: none;\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n ~~currentColor~~;\n}\n\n/ ─── Dismiss button ───────────────────────────────────────────────────────── /\n\n.dismissBtn {\n appearance: none;\n border: none;\n background: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px;\n border-radius: var(--gnome-radius-md, 8px);\n opacity: 0.6;\n transition:\n opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.dismissBtn:hover {\n opacity: 1;\n}\n.dismissBtn:active {\n opacity: 0.8;\n}\n\n.dismissBtn:focus-visible {\n outline: none;\n opacity: 1;\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n ~~currentColor~~;\n}\n\n/ ─── Variant: info ────────────────────────────────────────────────────────── /\n\n.info {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n color: var(--gnome-accent-fg-color, #~~ffffff~~);\n}\n\n.actionBtn-info:hover {\n background-color: ~~rgba~~(255, 255, 255, 0.15);\n}\n.actionBtn-info:active {\n background-color: ~~rgba~~(255, 255, 255, 0.25);\n}\n\n/ ─── Variant: warning ─────────────────────────────────────────────────────── /\n\n.warning {\n background-color: var(--gnome-warning-bg-color, #f6d32d);\n color: var(--gnome-warning-fg-color, ~~rgba~~(0, 0, 0, 0.8));\n}\n\n.actionBtn-warning:hover {\n background-color: ~~rgba~~(0, 0, 0, 0.08);\n}\n.actionBtn-warning:active {\n background-color: ~~rgba~~(0, 0, 0, 0.14);\n}\n\n/ ─── Variant: error ───────────────────────────────────────────────────────── /\n\n.error {\n background-color: var(--gnome-error-bg-color, #e01b24);\n color: var(--gnome-error-fg-color, #~~ffffff~~);\n}\n\n.actionBtn-error:hover {\n background-color: ~~rgba~~(255, 255, 255, 0.15);\n}\n.actionBtn-error:active {\n background-color: ~~rgba~~(255, 255, 255, 0.25);\n}\n\n/ ─── Variant: success ─────────────────────────────────────────────────────── */\n\n.success {\n background-color: var(--gnome-success-bg-color, #2ec27e);\n color: var(--gnome-success-fg-color, #~~ffffff~~);\n}\n\n.actionBtn-success:hover {\n background-color: ~~rgba~~(255, 255, 255, 0.15);\n}\n.actionBtn-success:active {\n background-color: ~~rgba~~(255, 255, 255, 0.25);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Banner.module.css.cjs","names":[],"sources":["../../../src/components/Banner/Banner.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── /\n\n.banner {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-2, 12px);\n padding: 10px var(--gnome-space-4, 24px);\n min-height: 44px;\n width: 100%;\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n line-height: var(--gnome-line-height-body, 1.5);\n}\n\n/ ─── Message ──────────────────────────────────────────────────────────────── /\n\n.message {\n flex: 1;\n min-width: 0;\n}\n\n/ ─── Actions (action button + dismiss) ────────────────────────────────────── /\n\n.actions {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-1, 6px);\n flex-shrink: 0;\n}\n\n/ ─── Action button ────────────────────────────────────────────────────────── /\n\n.actionBtn {\n appearance: none;\n border: none;\n background: transparent;\n font: inherit;\n font-weight: var(--gnome-font-weight-semibold, 600);\n cursor: pointer;\n padding: 4px var(--gnome-space-2, 12px);\n border-radius: var(--gnome-radius-md, 8px);\n transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.actionBtn:focus-visible {\n outline: none;\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n currentcolor;\n}\n\n/ ─── Dismiss button ───────────────────────────────────────────────────────── /\n\n.dismissBtn {\n appearance: none;\n border: none;\n background: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px;\n border-radius: var(--gnome-radius-md, 8px);\n opacity: 0.6;\n transition:\n opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.dismissBtn:hover {\n opacity: 1;\n}\n\n.dismissBtn:active {\n opacity: 0.8;\n}\n\n.dismissBtn:focus-visible {\n outline: none;\n opacity: 1;\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n currentcolor;\n}\n\n/ ─── Variant: info ────────────────────────────────────────────────────────── /\n\n.info {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n color: var(--gnome-accent-fg-color, #fff);\n}\n\n.actionBtn-info:hover {\n background-color: rgb(255 255 255 / 0.15);\n}\n\n.actionBtn-info:active {\n background-color: rgb(255 255 255 / 0.25);\n}\n\n/ ─── Variant: warning ─────────────────────────────────────────────────────── /\n\n.warning {\n background-color: var(--gnome-warning-bg-color, #f6d32d);\n color: var(--gnome-warning-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.actionBtn-warning:hover {\n background-color: rgb(0 0 0 / 0.08);\n}\n\n.actionBtn-warning:active {\n background-color: rgb(0 0 0 / 0.14);\n}\n\n/ ─── Variant: error ───────────────────────────────────────────────────────── /\n\n.error {\n background-color: var(--gnome-error-bg-color, #e01b24);\n color: var(--gnome-error-fg-color, #fff);\n}\n\n.actionBtn-error:hover {\n background-color: rgb(255 255 255 / 0.15);\n}\n\n.actionBtn-error:active {\n background-color: rgb(255 255 255 / 0.25);\n}\n\n/ ─── Variant: success ─────────────────────────────────────────────────────── */\n\n.success {\n background-color: var(--gnome-success-bg-color, #2ec27e);\n color: var(--gnome-success-fg-color, #fff);\n}\n\n.actionBtn-success:hover {\n background-color: rgb(255 255 255 / 0.15);\n}\n\n.actionBtn-success:active {\n background-color: rgb(255 255 255 / 0.25);\n}\n"],"mappings":""}

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

@@ -1,17 +1,17 @@
 var e = {
-	banner: "_banner_1w4m1_3",
-	message: "_message_1w4m1_17",
-	actions: "_actions_1w4m1_24",
-	actionBtn: "_actionBtn_1w4m1_33",
-	dismissBtn: "_dismissBtn_1w4m1_55",
-	info: "_info_1w4m1_89",
-	"actionBtn-info": "_actionBtn-info_1w4m1_94",
-	warning: "_warning_1w4m1_103",
-	"actionBtn-warning": "_actionBtn-warning_1w4m1_108",
-	error: "_error_1w4m1_117",
-	"actionBtn-error": "_actionBtn-error_1w4m1_122",
-	success: "_success_1w4m1_131",
-	"actionBtn-success": "_actionBtn-success_1w4m1_136"
+	banner: "_banner_1ks4d_3",
+	message: "_message_1ks4d_17",
+	actions: "_actions_1ks4d_24",
+	actionBtn: "_actionBtn_1ks4d_33",
+	dismissBtn: "_dismissBtn_1ks4d_55",
+	info: "_info_1ks4d_90",
+	"actionBtn-info": "_actionBtn-info_1ks4d_95",
+	warning: "_warning_1ks4d_105",
+	"actionBtn-warning": "_actionBtn-warning_1ks4d_110",
+	error: "_error_1ks4d_120",
+	"actionBtn-error": "_actionBtn-error_1ks4d_125",
+	success: "_success_1ks4d_135",
+	"actionBtn-success": "_actionBtn-success_1ks4d_140"
 };
 //#endregion
 export { e as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Banner.module.css.js","names":[],"sources":["../../../src/components/Banner/Banner.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── /\n\n.banner {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-2, 12px);\n padding: 10px var(--gnome-space-4, 24px);\n min-height: 44px;\n width: 100%;\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n line-height: var(--gnome-line-height-body, 1.5);\n}\n\n/ ─── Message ──────────────────────────────────────────────────────────────── /\n\n.message {\n flex: 1;\n min-width: 0;\n}\n\n/ ─── Actions (action button + dismiss) ────────────────────────────────────── /\n\n.actions {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-1, 6px);\n flex-shrink: 0;\n}\n\n/ ─── Action button ────────────────────────────────────────────────────────── /\n\n.actionBtn {\n appearance: none;\n border: none;\n background: transparent;\n font: inherit;\n font-weight: var(--gnome-font-weight-semibold, 600);\n cursor: pointer;\n padding: 4px var(--gnome-space-2, 12px);\n border-radius: var(--gnome-radius-md, 8px);\n transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.actionBtn:focus-visible {\n outline: none;\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n ~~currentColor~~;\n}\n\n/ ─── Dismiss button ───────────────────────────────────────────────────────── /\n\n.dismissBtn {\n appearance: none;\n border: none;\n background: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px;\n border-radius: var(--gnome-radius-md, 8px);\n opacity: 0.6;\n transition:\n opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.dismissBtn:hover {\n opacity: 1;\n}\n.dismissBtn:active {\n opacity: 0.8;\n}\n\n.dismissBtn:focus-visible {\n outline: none;\n opacity: 1;\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n ~~currentColor~~;\n}\n\n/ ─── Variant: info ────────────────────────────────────────────────────────── /\n\n.info {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n color: var(--gnome-accent-fg-color, #~~ffffff~~);\n}\n\n.actionBtn-info:hover {\n background-color: ~~rgba~~(255, 255, 255, 0.15);\n}\n.actionBtn-info:active {\n background-color: ~~rgba~~(255, 255, 255, 0.25);\n}\n\n/ ─── Variant: warning ─────────────────────────────────────────────────────── /\n\n.warning {\n background-color: var(--gnome-warning-bg-color, #f6d32d);\n color: var(--gnome-warning-fg-color, ~~rgba~~(0, 0, 0, 0.8));\n}\n\n.actionBtn-warning:hover {\n background-color: ~~rgba~~(0, 0, 0, 0.08);\n}\n.actionBtn-warning:active {\n background-color: ~~rgba~~(0, 0, 0, 0.14);\n}\n\n/ ─── Variant: error ───────────────────────────────────────────────────────── /\n\n.error {\n background-color: var(--gnome-error-bg-color, #e01b24);\n color: var(--gnome-error-fg-color, #~~ffffff~~);\n}\n\n.actionBtn-error:hover {\n background-color: ~~rgba~~(255, 255, 255, 0.15);\n}\n.actionBtn-error:active {\n background-color: ~~rgba~~(255, 255, 255, 0.25);\n}\n\n/ ─── Variant: success ─────────────────────────────────────────────────────── */\n\n.success {\n background-color: var(--gnome-success-bg-color, #2ec27e);\n color: var(--gnome-success-fg-color, #~~ffffff~~);\n}\n\n.actionBtn-success:hover {\n background-color: ~~rgba~~(255, 255, 255, 0.15);\n}\n.actionBtn-success:active {\n background-color: ~~rgba~~(255, 255, 255, 0.25);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Banner.module.css.js","names":[],"sources":["../../../src/components/Banner/Banner.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── /\n\n.banner {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-2, 12px);\n padding: 10px var(--gnome-space-4, 24px);\n min-height: 44px;\n width: 100%;\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n line-height: var(--gnome-line-height-body, 1.5);\n}\n\n/ ─── Message ──────────────────────────────────────────────────────────────── /\n\n.message {\n flex: 1;\n min-width: 0;\n}\n\n/ ─── Actions (action button + dismiss) ────────────────────────────────────── /\n\n.actions {\n display: flex;\n align-items: center;\n gap: var(--gnome-space-1, 6px);\n flex-shrink: 0;\n}\n\n/ ─── Action button ────────────────────────────────────────────────────────── /\n\n.actionBtn {\n appearance: none;\n border: none;\n background: transparent;\n font: inherit;\n font-weight: var(--gnome-font-weight-semibold, 600);\n cursor: pointer;\n padding: 4px var(--gnome-space-2, 12px);\n border-radius: var(--gnome-radius-md, 8px);\n transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.actionBtn:focus-visible {\n outline: none;\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n currentcolor;\n}\n\n/ ─── Dismiss button ───────────────────────────────────────────────────────── /\n\n.dismissBtn {\n appearance: none;\n border: none;\n background: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px;\n border-radius: var(--gnome-radius-md, 8px);\n opacity: 0.6;\n transition:\n opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.dismissBtn:hover {\n opacity: 1;\n}\n\n.dismissBtn:active {\n opacity: 0.8;\n}\n\n.dismissBtn:focus-visible {\n outline: none;\n opacity: 1;\n box-shadow:\n 0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n currentcolor;\n}\n\n/ ─── Variant: info ────────────────────────────────────────────────────────── /\n\n.info {\n background-color: var(--gnome-accent-bg-color, #3584e4);\n color: var(--gnome-accent-fg-color, #fff);\n}\n\n.actionBtn-info:hover {\n background-color: rgb(255 255 255 / 0.15);\n}\n\n.actionBtn-info:active {\n background-color: rgb(255 255 255 / 0.25);\n}\n\n/ ─── Variant: warning ─────────────────────────────────────────────────────── /\n\n.warning {\n background-color: var(--gnome-warning-bg-color, #f6d32d);\n color: var(--gnome-warning-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.actionBtn-warning:hover {\n background-color: rgb(0 0 0 / 0.08);\n}\n\n.actionBtn-warning:active {\n background-color: rgb(0 0 0 / 0.14);\n}\n\n/ ─── Variant: error ───────────────────────────────────────────────────────── /\n\n.error {\n background-color: var(--gnome-error-bg-color, #e01b24);\n color: var(--gnome-error-fg-color, #fff);\n}\n\n.actionBtn-error:hover {\n background-color: rgb(255 255 255 / 0.15);\n}\n\n.actionBtn-error:active {\n background-color: rgb(255 255 255 / 0.25);\n}\n\n/ ─── Variant: success ─────────────────────────────────────────────────────── */\n\n.success {\n background-color: var(--gnome-success-bg-color, #2ec27e);\n color: var(--gnome-success-fg-color, #fff);\n}\n\n.actionBtn-success:hover {\n background-color: rgb(255 255 255 / 0.15);\n}\n\n.actionBtn-success:active {\n background-color: rgb(255 255 255 / 0.25);\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={blockquote:`_blockquote_mmiw1_3`,body:`_body_mmiw1_15`,icon:`_icon_mmiw1_21`,content:`_content_mmiw1_28`,footer:`_footer_mmiw1_36`,cite:`_cite_mmiw1_42`,default:`_default_mmiw1_48`,info:`_info_mmiw1_52`,warning:`_warning_mmiw1_57`,error:`_error_mmiw1_62`,success:`_success_mmiw1_67`};exports.default=e;
+var e={blockquote:`_blockquote_1lpyh_3`,body:`_body_1lpyh_15`,icon:`_icon_1lpyh_21`,content:`_content_1lpyh_28`,footer:`_footer_1lpyh_36`,cite:`_cite_1lpyh_42`,default:`_default_1lpyh_48`,info:`_info_1lpyh_52`,warning:`_warning_1lpyh_57`,error:`_error_1lpyh_62`,success:`_success_1lpyh_67`};exports.default=e;
 //# sourceMappingURL=Blockquote.module.css.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Blockquote.module.css.cjs","names":[],"sources":["../../../src/components/Blockquote/Blockquote.module.css"],"sourcesContent":["/* ─── Base ────────────────────────────────────────────────────────────────── /\n\n.blockquote {\n margin: 0;\n padding: var(--gnome-space-2, 12px) var(--gnome-space-3, 18px);\n border-left: var(--gnome-blockquote-border-width, 3px) solid;\n border-radius: 0 var(--gnome-radius-sm, 4px) var(--gnome-radius-sm, 4px) 0;\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n line-height: var(--gnome-line-height-body, 1.5);\n}\n\n/ ─── Body (icon + text) ──────────────────────────────────────────────────── /\n\n.body {\n display: flex;\n align-items: flex-start;\n gap: var(--gnome-space-2, 12px);\n}\n\n.icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n margin-top: 2px; / optical alignment with first text baseline /\n}\n\n.content {\n margin: 0;\n flex: 1;\n min-width: 0;\n}\n\n/ ─── Attribution ─────────────────────────────────────────────────────────── /\n\n.footer {\n margin-top: var(--gnome-space-1, 6px);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n.cite {\n font-style: normal;\n}\n\n/ ─── Variants ────────────────────────────────────────────────────────────── */\n\n.default {\n border-color: var(--gnome-border-subtle, ~~rgba~~(0, 0, 0, 0.15));\n}\n\n.info {\n border-color: var(--gnome-accent-bg-color, #3584e4);\n background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 8%, transparent);\n}\n\n.warning {\n border-color: var(--gnome-warning-bg-color, #f6d32d);\n background-color: color-mix(in srgb, var(--gnome-warning-bg-color, #f6d32d) 14%, transparent);\n}\n\n.error {\n border-color: var(--gnome-error-bg-color, #e01b24);\n background-color: color-mix(in srgb, var(--gnome-error-bg-color, #e01b24) 8%, transparent);\n}\n\n.success {\n border-color: var(--gnome-success-bg-color, #2ec27e);\n background-color: color-mix(in srgb, var(--gnome-success-bg-color, #2ec27e) 8%, transparent);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Blockquote.module.css.cjs","names":[],"sources":["../../../src/components/Blockquote/Blockquote.module.css"],"sourcesContent":["/* ─── Base ────────────────────────────────────────────────────────────────── /\n\n.blockquote {\n margin: 0;\n padding: var(--gnome-space-2, 12px) var(--gnome-space-3, 18px);\n border-left: var(--gnome-blockquote-border-width, 3px) solid;\n border-radius: 0 var(--gnome-radius-sm, 4px) var(--gnome-radius-sm, 4px) 0;\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n line-height: var(--gnome-line-height-body, 1.5);\n}\n\n/ ─── Body (icon + text) ──────────────────────────────────────────────────── /\n\n.body {\n display: flex;\n align-items: flex-start;\n gap: var(--gnome-space-2, 12px);\n}\n\n.icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n margin-top: 2px; / optical alignment with first text baseline /\n}\n\n.content {\n margin: 0;\n flex: 1;\n min-width: 0;\n}\n\n/ ─── Attribution ─────────────────────────────────────────────────────────── /\n\n.footer {\n margin-top: var(--gnome-space-1, 6px);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n.cite {\n font-style: normal;\n}\n\n/ ─── Variants ────────────────────────────────────────────────────────────── */\n\n.default {\n border-color: var(--gnome-border-subtle, rgb(0 0 0 / 0.15));\n}\n\n.info {\n border-color: var(--gnome-accent-bg-color, #3584e4);\n background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 8%, transparent);\n}\n\n.warning {\n border-color: var(--gnome-warning-bg-color, #f6d32d);\n background-color: color-mix(in srgb, var(--gnome-warning-bg-color, #f6d32d) 14%, transparent);\n}\n\n.error {\n border-color: var(--gnome-error-bg-color, #e01b24);\n background-color: color-mix(in srgb, var(--gnome-error-bg-color, #e01b24) 8%, transparent);\n}\n\n.success {\n border-color: var(--gnome-success-bg-color, #2ec27e);\n background-color: color-mix(in srgb, var(--gnome-success-bg-color, #2ec27e) 8%, transparent);\n}\n"],"mappings":""}

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

@@ -1,15 +1,15 @@
 var e = {
-	blockquote: "_blockquote_mmiw1_3",
-	body: "_body_mmiw1_15",
-	icon: "_icon_mmiw1_21",
-	content: "_content_mmiw1_28",
-	footer: "_footer_mmiw1_36",
-	cite: "_cite_mmiw1_42",
-	default: "_default_mmiw1_48",
-	info: "_info_mmiw1_52",
-	warning: "_warning_mmiw1_57",
-	error: "_error_mmiw1_62",
-	success: "_success_mmiw1_67"
+	blockquote: "_blockquote_1lpyh_3",
+	body: "_body_1lpyh_15",
+	icon: "_icon_1lpyh_21",
+	content: "_content_1lpyh_28",
+	footer: "_footer_1lpyh_36",
+	cite: "_cite_1lpyh_42",
+	default: "_default_1lpyh_48",
+	info: "_info_1lpyh_52",
+	warning: "_warning_1lpyh_57",
+	error: "_error_1lpyh_62",
+	success: "_success_1lpyh_67"
 };
 //#endregion
 export { e as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Blockquote.module.css.js","names":[],"sources":["../../../src/components/Blockquote/Blockquote.module.css"],"sourcesContent":["/* ─── Base ────────────────────────────────────────────────────────────────── /\n\n.blockquote {\n margin: 0;\n padding: var(--gnome-space-2, 12px) var(--gnome-space-3, 18px);\n border-left: var(--gnome-blockquote-border-width, 3px) solid;\n border-radius: 0 var(--gnome-radius-sm, 4px) var(--gnome-radius-sm, 4px) 0;\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n line-height: var(--gnome-line-height-body, 1.5);\n}\n\n/ ─── Body (icon + text) ──────────────────────────────────────────────────── /\n\n.body {\n display: flex;\n align-items: flex-start;\n gap: var(--gnome-space-2, 12px);\n}\n\n.icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n margin-top: 2px; / optical alignment with first text baseline /\n}\n\n.content {\n margin: 0;\n flex: 1;\n min-width: 0;\n}\n\n/ ─── Attribution ─────────────────────────────────────────────────────────── /\n\n.footer {\n margin-top: var(--gnome-space-1, 6px);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n.cite {\n font-style: normal;\n}\n\n/ ─── Variants ────────────────────────────────────────────────────────────── */\n\n.default {\n border-color: var(--gnome-border-subtle, ~~rgba~~(0, 0, 0, 0.15));\n}\n\n.info {\n border-color: var(--gnome-accent-bg-color, #3584e4);\n background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 8%, transparent);\n}\n\n.warning {\n border-color: var(--gnome-warning-bg-color, #f6d32d);\n background-color: color-mix(in srgb, var(--gnome-warning-bg-color, #f6d32d) 14%, transparent);\n}\n\n.error {\n border-color: var(--gnome-error-bg-color, #e01b24);\n background-color: color-mix(in srgb, var(--gnome-error-bg-color, #e01b24) 8%, transparent);\n}\n\n.success {\n border-color: var(--gnome-success-bg-color, #2ec27e);\n background-color: color-mix(in srgb, var(--gnome-success-bg-color, #2ec27e) 8%, transparent);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Blockquote.module.css.js","names":[],"sources":["../../../src/components/Blockquote/Blockquote.module.css"],"sourcesContent":["/* ─── Base ────────────────────────────────────────────────────────────────── /\n\n.blockquote {\n margin: 0;\n padding: var(--gnome-space-2, 12px) var(--gnome-space-3, 18px);\n border-left: var(--gnome-blockquote-border-width, 3px) solid;\n border-radius: 0 var(--gnome-radius-sm, 4px) var(--gnome-radius-sm, 4px) 0;\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-body, 1rem);\n line-height: var(--gnome-line-height-body, 1.5);\n}\n\n/ ─── Body (icon + text) ──────────────────────────────────────────────────── /\n\n.body {\n display: flex;\n align-items: flex-start;\n gap: var(--gnome-space-2, 12px);\n}\n\n.icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n margin-top: 2px; / optical alignment with first text baseline /\n}\n\n.content {\n margin: 0;\n flex: 1;\n min-width: 0;\n}\n\n/ ─── Attribution ─────────────────────────────────────────────────────────── /\n\n.footer {\n margin-top: var(--gnome-space-1, 6px);\n font-size: var(--gnome-font-size-caption, 0.75rem);\n opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n.cite {\n font-style: normal;\n}\n\n/ ─── Variants ────────────────────────────────────────────────────────────── */\n\n.default {\n border-color: var(--gnome-border-subtle, rgb(0 0 0 / 0.15));\n}\n\n.info {\n border-color: var(--gnome-accent-bg-color, #3584e4);\n background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 8%, transparent);\n}\n\n.warning {\n border-color: var(--gnome-warning-bg-color, #f6d32d);\n background-color: color-mix(in srgb, var(--gnome-warning-bg-color, #f6d32d) 14%, transparent);\n}\n\n.error {\n border-color: var(--gnome-error-bg-color, #e01b24);\n background-color: color-mix(in srgb, var(--gnome-error-bg-color, #e01b24) 8%, transparent);\n}\n\n.success {\n border-color: var(--gnome-success-bg-color, #2ec27e);\n background-color: color-mix(in srgb, var(--gnome-success-bg-color, #2ec27e) 8%, transparent);\n}\n"],"mappings":""}

package/dist/components/BottomSheet/BottomSheet.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=require("../Dialog/dialogUtils.cjs"),t=require("./BottomSheet.module.css.cjs");let n=require("react"),r=require("react-dom"),i=require("react/jsx-runtime");var a=`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`,o=({open:o,title:s,children:c,onClose:l,closeOnBackdrop:u=!0,className:d,...f})=>{let p=(0,n.useRef)(null),m=(0,n.useId)(),h=(0,n.useRef)(null);e.useBodyScrollLock(o),(0,n.useEffect)(()=>{o?(h.current=document.activeElement,(p.current?.querySelector(a))?.focus()):h.current?.focus()},[o]);let g=(0,n.useCallback)(e=>{if(e.key===`Escape`){e.preventDefault(),l?.();return}if(e.key!==`Tab`)return;let t=Array.from(p.current?.querySelectorAll(a)??[]);if(t.length===0)return;let n=t[0],r=t[t.length-1];e.shiftKey?document.activeElement===n&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),n.focus())},[l]);if(!o)return null;let _=(0,i.jsx)(`div`,{className:t.default.backdrop,onClick:u?l:void 0,children:(0,i.jsxs)(`div`,{ref:p,role:`dialog`,"aria-modal":`true`,"aria-labelledby":s?m:void 0,className:[t.default.sheet,d].filter(Boolean).join(` `),onKeyDown:g,onClick:e=>e.stopPropagation(),...f,children:[(0,i.jsx)(`div`,{className:t.default.handle,"aria-hidden":`true`,children:(0,i.jsx)(`div`,{className:t.default.handleBar})}),s&&(0,i.jsx)(`div`,{id:m,className:t.default.title,children:s}),c&&(0,i.jsx)(`div`,{className:t.default.content,children:c})]})});return typeof document>`u`?_:(0,r.createPortal)(_,document.body)};exports.BottomSheet=o;
+const e=require("../Dialog/dialogUtils.cjs"),t=require("./BottomSheet.module.css.cjs");let n=require("react"),r=require("react-dom"),i=require("react/jsx-runtime");var a=`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`,o=150,s=200,c=({open:c,title:l,children:u,onClose:d,closeOnBackdrop:f=!0,className:p,...m})=>{let h=(0,n.useRef)(null),g=(0,n.useRef)(null),_=(0,n.useId)(),v=(0,n.useRef)(null),[y,b]=(0,n.useState)(c),[x,S]=(0,n.useState)(c),[C,w]=(0,n.useState)(!1),T=(0,n.useRef)(c),E=(0,n.useRef)(!1),D=(0,n.useRef)(!1),O=(0,n.useRef)(0),k=(0,n.useRef)(0);e.useBodyScrollLock(c),(0,n.useEffect)(()=>{let e=T.current;T.current=c,c?(b(!0),S(!0),w(!1)):e&&!E.current?(S(!1),typeof window<`u`&&typeof window.matchMedia==`function`&&window.matchMedia(`(prefers-reduced-motion: reduce)`).matches?b(!1):w(!0)):e&&E.current&&(E.current=!1,S(!1),b(!1))},[c]),(0,n.useEffect)(()=>{c?(v.current=document.activeElement,(h.current?.querySelector(a))?.focus()):v.current?.focus()},[c]);let A=(0,n.useCallback)(e=>{if(e.key===`Escape`){e.preventDefault(),d?.();return}if(e.key!==`Tab`)return;let t=Array.from(h.current?.querySelectorAll(a)??[]);if(t.length===0)return;let[n]=t,r=t[t.length-1];e.shiftKey?document.activeElement===n&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),n.focus())},[d]);(0,n.useEffect)(()=>{if(!C)return;let e=window.setTimeout(()=>{b(!1),w(!1)},s);return()=>window.clearTimeout(e)},[C]);let j=(0,n.useCallback)(e=>{D.current=!0,O.current=e.clientY,k.current=0,e.currentTarget.setPointerCapture(e.pointerId),h.current&&(h.current.style.animation=`none`,h.current.classList.add(t.default.dragging)),S(!1)},[]),M=(0,n.useCallback)(e=>{if(!D.current)return;let t=Math.max(0,e.clientY-O.current);k.current=t,h.current&&(h.current.style.transform=`translateY(${t}px)`)},[]),N=(0,n.useCallback)(()=>{if(!D.current)return;D.current=!1;let e=k.current;if(k.current=0,h.current?.classList.remove(t.default.dragging),e>=o){E.current=!0;let e=typeof window<`u`&&typeof window.matchMedia==`function`&&window.matchMedia(`(prefers-reduced-motion: reduce)`).matches,t=h.current,n=g.current;!e&&t&&n?(t.style.transition=`transform ${s}ms ease`,t.style.transform=`translateY(100%)`,n.style.transition=`opacity ${s}ms ease`,n.style.opacity=`0`,setTimeout(()=>{t.style.transition=``,t.style.transform=``,n.style.transition=``,n.style.opacity=``,d?.()},s)):d?.()}else h.current&&(h.current.style.animation=``,h.current.style.transform=``)},[d]);if(!y)return null;let P=(0,i.jsx)(`div`,{ref:g,className:[t.default.backdrop,C?t.default.closing:null].filter(Boolean).join(` `),onClick:f?d:void 0,children:(0,i.jsxs)(`div`,{ref:h,role:`dialog`,"aria-modal":`true`,"aria-labelledby":l?_:void 0,className:[t.default.sheet,x?t.default.entering:null,C?t.default.closing:null,p].filter(Boolean).join(` `),onAnimationEnd:e=>{e.target===e.currentTarget&&x&&S(!1)},onKeyDown:A,onClick:e=>e.stopPropagation(),...m,children:[(0,i.jsx)(`div`,{className:t.default.handle,"aria-hidden":`true`,onPointerDown:j,onPointerMove:M,onPointerUp:N,onPointerCancel:N,children:(0,i.jsx)(`div`,{className:t.default.handleBar})}),l&&(0,i.jsx)(`div`,{id:_,className:t.default.title,children:l}),u&&(0,i.jsx)(`div`,{className:t.default.content,children:u})]})});return typeof document>`u`?P:(0,r.createPortal)(P,document.body)};exports.BottomSheet=c;
 //# sourceMappingURL=BottomSheet.cjs.map

package/dist/components/BottomSheet/BottomSheet.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BottomSheet.cjs","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { useBodyScrollLock } from '../Dialog/dialogUtils';\n\nimport styles from './BottomSheet.module.css';\n\nconst FOCUSABLE =\n 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /** Whether the sheet is visible. /\n open: boolean;\n /\n Optional heading shown in the drag handle area.\n /\n title?: ReactNode;\n children?: ReactNode;\n /* Called when the user dismisses the sheet (Escape or backdrop click). /\n onClose?: () => void;\n /\n Whether clicking the backdrop closes the sheet.\n * Defaults to `true`.\n /\n closeOnBackdrop?: boolean;\n}\n\n/\n Slide-up panel that overlays content from the bottom edge.\n \n Mirrors `AdwBottomSheet` (libadwaita 1.6+). Renders into a portal on\n * `document.body`. Traps focus, closes on Escape or backdrop click.\n * The handle bar is decorative — drag-to-close is not implemented.\n \n @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html\n /\nexport const BottomSheet = ({\n open,\n title,\n children,\n onClose,\n closeOnBackdrop = true,\n className,\n ...props\n}: BottomSheetProps) => {\n const sheetRef = useRef<HTMLDivElement>(null);\n const titleId = useId();\n const previouslyFocused = useRef<Element \| null>(null);\n\n useBodyScrollLock(open);\n\n // Save / restore focus\n useEffect(() => {\n if (open) {\n previouslyFocused.current = document.activeElement;\n const el = sheetRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n el?.focus();\n } else {\n (previouslyFocused.current as HTMLElement \| null)?.focus();\n }\n }, [open]);\n\n // Focus trap + Escape\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape') {\n e.preventDefault();\n onClose?.();\n\n return;\n }\n\n if (e.key !== 'Tab') {\n return;\n }\n\n const focusable = Array.from(\n sheetRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n );\n\n if (focusable.length === 0) {\n return;\n }\n\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === first) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n }\n },\n [onClose],\n );\n\n if (!open) {\n return null;\n }\n\n const node = (\n <div className={styles.backdrop} onClick={closeOnBackdrop ? onClose : undefined}>\n <div\n ref={sheetRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n className={[styles.sheet, className].filter(Boolean).join(' ')}\n onKeyDown={handleKeyDown}\n onClick={(e) => e.stopPropagation()}\n {...props}\n >\n {/ Handle bar /}\n <div className={styles.handle} aria-hidden=\"true\">\n <div className={styles.handleBar} />\n </div>\n\n {/ Optional title /}\n {title && (\n <div id={titleId} className={styles.title}>\n {title}\n </div>\n )}\n\n {/ Content */}\n {children && <div className={styles.content}>{children}</div>}\n </div>\n </div>\n );\n\n if (typeof document === 'undefined') {\n return node;\n }\n\n return createPortal(node, document.body);\n};\n"],"mappings":"oKAgBA,IAAM,EACJ,2IA4BW,GAAe,CAC1B,OACA,QACA,WACA,UACA,kBAAkB,GAClB,YACA,GAAG,KACmB,CACtB,IAAM,GAAA,EAAA,EAAA,QAAkC,IAAI,EACtC,GAAA,EAAA,EAAA,OAAgB,EAChB,GAAA,EAAA,EAAA,QAA2C,IAAI,EAErD,EAAA,kBAAkB,CAAI,GAGtB,EAAA,EAAA,eAAgB,CACV,GACF,EAAkB,QAAU,SAAS,eAC1B,EAAS,SAAS,cAA2B,CAAS,IAE7D,MAAM,GAEV,EAAmB,SAAgC,MAAM,CAE7D,EAAG,CAAC,CAAI,CAAC,EAGT,IAAM,GAAA,EAAA,EAAA,aACH,GAAqC,CACpC,GAAI,EAAE,MAAQ,SAAU,CACtB,EAAE,eAAe,EACjB,IAAU,EAEV,MACF,CAEA,GAAI,EAAE,MAAQ,MACZ,OAGF,IAAM,EAAY,MAAM,KACtB,EAAS,SAAS,iBAA8B,CAAS,GAAK,CAAC,CACjE,EAEA,GAAI,EAAU,SAAW,EACvB,OAGF,IAAM,EAAQ,EAAU,GAClB,EAAO,EAAU,EAAU,OAAS,GAEtC,EAAE,SACA,SAAS,gBAAkB,IAC7B,EAAE,eAAe,EACjB,EAAK,MAAM,GAGT,SAAS,gBAAkB,IAC7B,EAAE,eAAe,EACjB,EAAM,MAAM,EAGlB,EACA,CAAC,CAAO,CACV,EAEA,GAAI,CAAC,EACH,OAAO,KAGT,IAAM,GACJ,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,SAAU,QAAS,EAAkB,EAAU,IAAA,aACpE,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,KAAK,SACL,aAAW,OACX,kBAAiB,EAAQ,EAAU,IAAA,GACnC,UAAW,CAAC,EAAA,QAAO,MAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7D,UAAW,EACX,QAAU,GAAM,EAAE,gBAAgB,EAClC,GAAI,WARN,EAWE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAQ,cAAY,iBACzC,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,SAAY,CAAA,CAChC,CAAA,EAGJ,IACC,EAAA,EAAA,KAAC,MAAD,CAAK,GAAI,EAAS,UAAW,EAAA,QAAO,eACjC,CACE,CAAA,EAIN,IAAY,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,UAAc,CAAA,CACzD,GACF,CAAA,EAOP,OAJI,OAAO,SAAa,IACf,GAGT,EAAA,EAAA,cAAoB,EAAM,SAAS,IAAI,CACzC"}
1	+ {"version":3,"file":"BottomSheet.cjs","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n type HTMLAttributes,\n type KeyboardEvent,\n type PointerEvent,\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { useBodyScrollLock } from '../Dialog/dialogUtils';\n\nimport styles from './BottomSheet.module.css';\n\nconst FOCUSABLE =\n 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nconst DRAG_CLOSE_THRESHOLD = 150;\nconst CLOSE_ANIM_DURATION = 200;\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /** Whether the sheet is visible. /\n open: boolean;\n /\n Optional heading shown in the drag handle area.\n /\n title?: ReactNode;\n children?: ReactNode;\n /* Called when the user dismisses the sheet (Escape, backdrop click, or drag down). /\n onClose?: () => void;\n /\n Whether clicking the backdrop closes the sheet.\n * Defaults to `true`.\n /\n closeOnBackdrop?: boolean;\n}\n\n/\n Slide-up panel that overlays content from the bottom edge.\n \n Mirrors `AdwBottomSheet` (libadwaita 1.6+). Renders into a portal on\n * `document.body`. Traps focus, closes on Escape, backdrop click, or by\n * dragging the handle bar downward past 150 px. Plays slide-out animation on close.\n \n @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html\n /\nexport const BottomSheet = ({\n open,\n title,\n children,\n onClose,\n closeOnBackdrop = true,\n className,\n ...props\n}: BottomSheetProps) => {\n const sheetRef = useRef<HTMLDivElement>(null);\n const backdropRef = useRef<HTMLDivElement>(null);\n const titleId = useId();\n const previouslyFocused = useRef<Element \| null>(null);\n\n // Animation state\n const [isVisible, setIsVisible] = useState(open);\n const [isEntering, setIsEntering] = useState(open);\n const [isClosing, setIsClosing] = useState(false);\n const prevOpen = useRef(open);\n const dragClosing = useRef(false);\n\n // Drag state (refs avoid re-renders during drag)\n const isDragging = useRef(false);\n const dragStartY = useRef(0);\n const sheetDragY = useRef(0);\n\n useBodyScrollLock(open);\n\n // Track open → closed transitions\n useEffect(() => {\n const wasOpen = prevOpen.current;\n prevOpen.current = open;\n\n if (open) {\n setIsVisible(true);\n setIsEntering(true);\n setIsClosing(false);\n } else if (wasOpen && !dragClosing.current) {\n setIsEntering(false);\n\n const reducedMotion =\n typeof window !== 'undefined' &&\n typeof window.matchMedia === 'function' &&\n window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n if (reducedMotion) {\n setIsVisible(false);\n } else {\n setIsClosing(true);\n }\n } else if (wasOpen && dragClosing.current) {\n dragClosing.current = false;\n setIsEntering(false);\n setIsVisible(false);\n }\n }, [open]);\n\n // Save / restore focus\n useEffect(() => {\n if (open) {\n previouslyFocused.current = document.activeElement;\n const el = sheetRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n el?.focus();\n } else {\n (previouslyFocused.current as HTMLElement \| null)?.focus();\n }\n }, [open]);\n\n // Focus trap + Escape\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape') {\n e.preventDefault();\n onClose?.();\n\n return;\n }\n\n if (e.key !== 'Tab') {\n return;\n }\n\n const focusable = Array.from(\n sheetRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n );\n\n if (focusable.length === 0) {\n return;\n }\n\n const [first] = focusable;\n const last = focusable[focusable.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === first) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n }\n },\n [onClose],\n );\n\n // Unmount after exit animation duration elapses\n useEffect(() => {\n if (!isClosing) {\n return;\n }\n\n const id = window.setTimeout(() => {\n setIsVisible(false);\n setIsClosing(false);\n }, CLOSE_ANIM_DURATION);\n\n return () => window.clearTimeout(id);\n }, [isClosing]);\n\n // ─── Drag-to-dismiss ─────────────────────────────────────────────────────────\n\n const handlePointerDown = useCallback((e: PointerEvent<HTMLDivElement>) => {\n isDragging.current = true;\n dragStartY.current = e.clientY;\n sheetDragY.current = 0;\n e.currentTarget.setPointerCapture(e.pointerId);\n\n if (sheetRef.current) {\n // Cancel any active entry animation immediately so inline style.transform\n // takes effect. CSS animations sit above the author cascade layer and would\n // otherwise override the inline transform set during drag.\n sheetRef.current.style.animation = 'none';\n sheetRef.current.classList.add(styles.dragging);\n }\n\n setIsEntering(false);\n }, []);\n\n const handlePointerMove = useCallback((e: PointerEvent<HTMLDivElement>) => {\n if (!isDragging.current) {\n return;\n }\n\n const delta = Math.max(0, e.clientY - dragStartY.current);\n\n sheetDragY.current = delta;\n\n if (sheetRef.current) {\n sheetRef.current.style.transform = `translateY(${delta}px)`;\n }\n }, []);\n\n const handlePointerUp = useCallback(() => {\n if (!isDragging.current) {\n return;\n }\n isDragging.current = false;\n\n const delta = sheetDragY.current;\n\n sheetDragY.current = 0;\n sheetRef.current?.classList.remove(styles.dragging);\n\n if (delta >= DRAG_CLOSE_THRESHOLD) {\n dragClosing.current = true;\n\n const reducedMotion =\n typeof window !== 'undefined' &&\n typeof window.matchMedia === 'function' &&\n window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n const sheet = sheetRef.current;\n const backdrop = backdropRef.current;\n\n if (!reducedMotion && sheet && backdrop) {\n sheet.style.transition = `transform ${CLOSE_ANIM_DURATION}ms ease`;\n sheet.style.transform = 'translateY(100%)';\n backdrop.style.transition = `opacity ${CLOSE_ANIM_DURATION}ms ease`;\n backdrop.style.opacity = '0';\n\n setTimeout(() => {\n sheet.style.transition = '';\n sheet.style.transform = '';\n backdrop.style.transition = '';\n backdrop.style.opacity = '';\n onClose?.();\n }, CLOSE_ANIM_DURATION);\n } else {\n onClose?.();\n }\n } else if (sheetRef.current) {\n // Snap back — restore animation override and clear transform so CSS transition animates to 0\n sheetRef.current.style.animation = '';\n sheetRef.current.style.transform = '';\n }\n }, [onClose]);\n\n if (!isVisible) {\n return null;\n }\n\n const node = (\n <div\n ref={backdropRef}\n className={[styles.backdrop, isClosing ? styles.closing : null].filter(Boolean).join(' ')}\n onClick={closeOnBackdrop ? onClose : undefined}\n >\n <div\n ref={sheetRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n className={[\n styles.sheet,\n isEntering ? styles.entering : null,\n isClosing ? styles.closing : null,\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n onAnimationEnd={(e) => {\n if (e.target === e.currentTarget && isEntering) {\n setIsEntering(false);\n }\n }}\n onKeyDown={handleKeyDown}\n onClick={(e) => e.stopPropagation()}\n {...props}\n >\n {/ Handle bar — drag downward to dismiss /}\n <div\n className={styles.handle}\n aria-hidden=\"true\"\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={handlePointerUp}\n onPointerCancel={handlePointerUp}\n >\n <div className={styles.handleBar} />\n </div>\n\n {/ Optional title /}\n {title && (\n <div id={titleId} className={styles.title}>\n {title}\n </div>\n )}\n\n {/ Content */}\n {children && <div className={styles.content}>{children}</div>}\n </div>\n </div>\n );\n\n if (typeof document === 'undefined') {\n return node;\n }\n\n return createPortal(node, document.body);\n};\n"],"mappings":"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"}

package/dist/components/BottomSheet/BottomSheet.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ export interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, '
      */
     title?: ReactNode;
     children?: ReactNode;
-    /** Called when the user dismisses the sheet (Escape or backdrop click). */
+    /** Called when the user dismisses the sheet (Escape, backdrop click, or drag down). */
     onClose?: () => void;
     /**
      * Whether clicking the backdrop closes the sheet.
@@ -19,8 +19,8 @@ export interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, '
  * Slide-up panel that overlays content from the bottom edge.
  *
  * Mirrors `AdwBottomSheet` (libadwaita 1.6+). Renders into a portal on
- * `document.body`. Traps focus, closes on Escape or backdrop click.
- * The handle bar is decorative — drag-to-close is not implemented.
+ * `document.body`. Traps focus, closes on Escape, backdrop click, or by
+ * dragging the handle bar downward past 150 px. Plays slide-out animation on close.
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html
  */

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

@@ -1,59 +1,100 @@
 import { useBodyScrollLock as e } from "../Dialog/dialogUtils.js";
 import t from "./BottomSheet.module.css.js";
-import { useCallback as n, useEffect as r, useId as i, useRef as a } from "react";
-import { createPortal as o } from "react-dom";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useCallback as n, useEffect as r, useId as i, useRef as a, useState as o } from "react";
+import { createPortal as s } from "react-dom";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/BottomSheet/BottomSheet.tsx
-var l = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", u = ({ open: u, title: d, children: f, onClose: p, closeOnBackdrop: m = !0, className: h, ...g }) => {
-	let _ = a(null), v = i(), y = a(null);
-	e(u), r(() => {
-		u ? (y.current = document.activeElement, (_.current?.querySelector(l))?.focus()) : y.current?.focus();
-	}, [u]);
-	let b = n((e) => {
+var u = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", d = 150, f = 200, p = ({ open: p, title: m, children: h, onClose: g, closeOnBackdrop: _ = !0, className: v, ...y }) => {
+	let b = a(null), x = a(null), S = i(), C = a(null), [w, T] = o(p), [E, D] = o(p), [O, k] = o(!1), A = a(p), j = a(!1), M = a(!1), N = a(0), P = a(0);
+	e(p), r(() => {
+		let e = A.current;
+		A.current = p, p ? (T(!0), D(!0), k(!1)) : e && !j.current ? (D(!1), typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches ? T(!1) : k(!0)) : e && j.current && (j.current = !1, D(!1), T(!1));
+	}, [p]), r(() => {
+		p ? (C.current = document.activeElement, (b.current?.querySelector(u))?.focus()) : C.current?.focus();
+	}, [p]);
+	let F = n((e) => {
 		if (e.key === "Escape") {
-			e.preventDefault(), p?.();
+			e.preventDefault(), g?.();
 			return;
 		}
 		if (e.key !== "Tab") return;
-		let t = Array.from(_.current?.querySelectorAll(l) ?? []);
+		let t = Array.from(b.current?.querySelectorAll(u) ?? []);
 		if (t.length === 0) return;
-		let n = t[0], r = t[t.length - 1];
+		let [n] = t, r = t[t.length - 1];
 		e.shiftKey ? document.activeElement === n && (e.preventDefault(), r.focus()) : document.activeElement === r && (e.preventDefault(), n.focus());
-	}, [p]);
-	if (!u) return null;
-	let x = /* @__PURE__ */ s("div", {
-		className: t.backdrop,
-		onClick: m ? p : void 0,
-		children: /* @__PURE__ */ c("div", {
-			ref: _,
+	}, [g]);
+	r(() => {
+		if (!O) return;
+		let e = window.setTimeout(() => {
+			T(!1), k(!1);
+		}, f);
+		return () => window.clearTimeout(e);
+	}, [O]);
+	let I = n((e) => {
+		M.current = !0, N.current = e.clientY, P.current = 0, e.currentTarget.setPointerCapture(e.pointerId), b.current && (b.current.style.animation = "none", b.current.classList.add(t.dragging)), D(!1);
+	}, []), L = n((e) => {
+		if (!M.current) return;
+		let t = Math.max(0, e.clientY - N.current);
+		P.current = t, b.current && (b.current.style.transform = `translateY(${t}px)`);
+	}, []), R = n(() => {
+		if (!M.current) return;
+		M.current = !1;
+		let e = P.current;
+		if (P.current = 0, b.current?.classList.remove(t.dragging), e >= d) {
+			j.current = !0;
+			let e = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, t = b.current, n = x.current;
+			!e && t && n ? (t.style.transition = `transform ${f}ms ease`, t.style.transform = "translateY(100%)", n.style.transition = `opacity ${f}ms ease`, n.style.opacity = "0", setTimeout(() => {
+				t.style.transition = "", t.style.transform = "", n.style.transition = "", n.style.opacity = "", g?.();
+			}, f)) : g?.();
+		} else b.current && (b.current.style.animation = "", b.current.style.transform = "");
+	}, [g]);
+	if (!w) return null;
+	let z = /* @__PURE__ */ c("div", {
+		ref: x,
+		className: [t.backdrop, O ? t.closing : null].filter(Boolean).join(" "),
+		onClick: _ ? g : void 0,
+		children: /* @__PURE__ */ l("div", {
+			ref: b,
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-labelledby": d ? v : void 0,
-			className: [t.sheet, h].filter(Boolean).join(" "),
-			onKeyDown: b,
+			"aria-labelledby": m ? S : void 0,
+			className: [
+				t.sheet,
+				E ? t.entering : null,
+				O ? t.closing : null,
+				v
+			].filter(Boolean).join(" "),
+			onAnimationEnd: (e) => {
+				e.target === e.currentTarget && E && D(!1);
+			},
+			onKeyDown: F,
 			onClick: (e) => e.stopPropagation(),
-			...g,
+			...y,
 			children: [
-				/* @__PURE__ */ s("div", {
+				/* @__PURE__ */ c("div", {
 					className: t.handle,
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ s("div", { className: t.handleBar })
+					onPointerDown: I,
+					onPointerMove: L,
+					onPointerUp: R,
+					onPointerCancel: R,
+					children: /* @__PURE__ */ c("div", { className: t.handleBar })
 				}),
-				d && /* @__PURE__ */ s("div", {
-					id: v,
+				m && /* @__PURE__ */ c("div", {
+					id: S,
 					className: t.title,
-					children: d
+					children: m
 				}),
-				f && /* @__PURE__ */ s("div", {
+				h && /* @__PURE__ */ c("div", {
 					className: t.content,
-					children: f
+					children: h
 				})
 			]
 		})
 	});
-	return typeof document > "u" ? x : o(x, document.body);
+	return typeof document > "u" ? z : s(z, document.body);
 };
 //#endregion
-export { u as BottomSheet };
+export { p as BottomSheet };
 //# sourceMappingURL=BottomSheet.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n type HTMLAttributes,\n type KeyboardEvent,\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { useBodyScrollLock } from '../Dialog/dialogUtils';\n\nimport styles from './BottomSheet.module.css';\n\nconst FOCUSABLE =\n 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /** Whether the sheet is visible. /\n open: boolean;\n /\n Optional heading shown in the drag handle area.\n /\n title?: ReactNode;\n children?: ReactNode;\n /* Called when the user dismisses the sheet (Escape or backdrop click). /\n onClose?: () => void;\n /\n Whether clicking the backdrop closes the sheet.\n * Defaults to `true`.\n /\n closeOnBackdrop?: boolean;\n}\n\n/\n Slide-up panel that overlays content from the bottom edge.\n \n Mirrors `AdwBottomSheet` (libadwaita 1.6+). Renders into a portal on\n * `document.body`. Traps focus, closes on Escape or backdrop click.\n * The handle bar is decorative — drag-to-close is not implemented.\n \n @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html\n /\nexport const BottomSheet = ({\n open,\n title,\n children,\n onClose,\n closeOnBackdrop = true,\n className,\n ...props\n}: BottomSheetProps) => {\n const sheetRef = useRef<HTMLDivElement>(null);\n const titleId = useId();\n const previouslyFocused = useRef<Element \| null>(null);\n\n useBodyScrollLock(open);\n\n // Save / restore focus\n useEffect(() => {\n if (open) {\n previouslyFocused.current = document.activeElement;\n const el = sheetRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n el?.focus();\n } else {\n (previouslyFocused.current as HTMLElement \| null)?.focus();\n }\n }, [open]);\n\n // Focus trap + Escape\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape') {\n e.preventDefault();\n onClose?.();\n\n return;\n }\n\n if (e.key !== 'Tab') {\n return;\n }\n\n const focusable = Array.from(\n sheetRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n );\n\n if (focusable.length === 0) {\n return;\n }\n\n const first = focusable[0];\n const last = focusable[focusable.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === first) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n }\n },\n [onClose],\n );\n\n if (!open) {\n return null;\n }\n\n const node = (\n <div className={styles.backdrop} onClick={closeOnBackdrop ? onClose : undefined}>\n <div\n ref={sheetRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n className={[styles.sheet, className].filter(Boolean).join(' ')}\n onKeyDown={handleKeyDown}\n onClick={(e) => e.stopPropagation()}\n {...props}\n >\n {/ Handle bar /}\n <div className={styles.handle} aria-hidden=\"true\">\n <div className={styles.handleBar} />\n </div>\n\n {/ Optional title /}\n {title && (\n <div id={titleId} className={styles.title}>\n {title}\n </div>\n )}\n\n {/ Content */}\n {children && <div className={styles.content}>{children}</div>}\n </div>\n </div>\n );\n\n if (typeof document === 'undefined') {\n return node;\n }\n\n return createPortal(node, document.body);\n};\n"],"mappings":";;;;;;AAgBA,IAAM,IACJ,8IA4BW,KAAe,EAC1B,SACA,UACA,aACA,YACA,qBAAkB,IAClB,cACA,GAAG,QACmB;CACtB,IAAM,IAAW,EAAuB,IAAI,GACtC,IAAU,EAAM,GAChB,IAAoB,EAAuB,IAAI;CAKrD,AAHA,EAAkB,CAAI,GAGtB,QAAgB;EACd,AAAI,KACF,EAAkB,UAAU,SAAS,gBAC1B,EAAS,SAAS,cAA2B,CAAS,IAE7D,MAAM,KAEV,EAAmB,SAAgC,MAAM;CAE7D,GAAG,CAAC,CAAI,CAAC;CAGT,IAAM,IAAgB,GACnB,MAAqC;EACpC,IAAI,EAAE,QAAQ,UAAU;GAEtB,AADA,EAAE,eAAe,GACjB,IAAU;GAEV;EACF;EAEA,IAAI,EAAE,QAAQ,OACZ;EAGF,IAAM,IAAY,MAAM,KACtB,EAAS,SAAS,iBAA8B,CAAS,KAAK,CAAC,CACjE;EAEA,IAAI,EAAU,WAAW,GACvB;EAGF,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;EAE1C,AAAI,EAAE,WACA,SAAS,kBAAkB,MAC7B,EAAE,eAAe,GACjB,EAAK,MAAM,KAGT,SAAS,kBAAkB,MAC7B,EAAE,eAAe,GACjB,EAAM,MAAM;CAGlB,GACA,CAAC,CAAO,CACV;CAEA,IAAI,CAAC,GACH,OAAO;CAGT,IAAM,IACJ,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAU,SAAS,IAAkB,IAAU,KAAA;YACpE,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,WAAW,CAAC,EAAO,OAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;GAC7D,WAAW;GACX,UAAU,MAAM,EAAE,gBAAgB;GAClC,GAAI;aARN;IAWE,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAQ,eAAY;eACzC,kBAAC,OAAD,EAAK,WAAW,EAAO,UAAY,CAAA;IAChC,CAAA;IAGJ,KACC,kBAAC,OAAD;KAAK,IAAI;KAAS,WAAW,EAAO;eACjC;IACE,CAAA;IAIN,KAAY,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAU;IAAc,CAAA;GACzD;;CACF,CAAA;CAOP,OAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,SAAS,IAAI;AACzC"}
1	+ {"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n type HTMLAttributes,\n type KeyboardEvent,\n type PointerEvent,\n type ReactNode,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { useBodyScrollLock } from '../Dialog/dialogUtils';\n\nimport styles from './BottomSheet.module.css';\n\nconst FOCUSABLE =\n 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nconst DRAG_CLOSE_THRESHOLD = 150;\nconst CLOSE_ANIM_DURATION = 200;\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n /** Whether the sheet is visible. /\n open: boolean;\n /\n Optional heading shown in the drag handle area.\n /\n title?: ReactNode;\n children?: ReactNode;\n /* Called when the user dismisses the sheet (Escape, backdrop click, or drag down). /\n onClose?: () => void;\n /\n Whether clicking the backdrop closes the sheet.\n * Defaults to `true`.\n /\n closeOnBackdrop?: boolean;\n}\n\n/\n Slide-up panel that overlays content from the bottom edge.\n \n Mirrors `AdwBottomSheet` (libadwaita 1.6+). Renders into a portal on\n * `document.body`. Traps focus, closes on Escape, backdrop click, or by\n * dragging the handle bar downward past 150 px. Plays slide-out animation on close.\n \n @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html\n /\nexport const BottomSheet = ({\n open,\n title,\n children,\n onClose,\n closeOnBackdrop = true,\n className,\n ...props\n}: BottomSheetProps) => {\n const sheetRef = useRef<HTMLDivElement>(null);\n const backdropRef = useRef<HTMLDivElement>(null);\n const titleId = useId();\n const previouslyFocused = useRef<Element \| null>(null);\n\n // Animation state\n const [isVisible, setIsVisible] = useState(open);\n const [isEntering, setIsEntering] = useState(open);\n const [isClosing, setIsClosing] = useState(false);\n const prevOpen = useRef(open);\n const dragClosing = useRef(false);\n\n // Drag state (refs avoid re-renders during drag)\n const isDragging = useRef(false);\n const dragStartY = useRef(0);\n const sheetDragY = useRef(0);\n\n useBodyScrollLock(open);\n\n // Track open → closed transitions\n useEffect(() => {\n const wasOpen = prevOpen.current;\n prevOpen.current = open;\n\n if (open) {\n setIsVisible(true);\n setIsEntering(true);\n setIsClosing(false);\n } else if (wasOpen && !dragClosing.current) {\n setIsEntering(false);\n\n const reducedMotion =\n typeof window !== 'undefined' &&\n typeof window.matchMedia === 'function' &&\n window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n if (reducedMotion) {\n setIsVisible(false);\n } else {\n setIsClosing(true);\n }\n } else if (wasOpen && dragClosing.current) {\n dragClosing.current = false;\n setIsEntering(false);\n setIsVisible(false);\n }\n }, [open]);\n\n // Save / restore focus\n useEffect(() => {\n if (open) {\n previouslyFocused.current = document.activeElement;\n const el = sheetRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n el?.focus();\n } else {\n (previouslyFocused.current as HTMLElement \| null)?.focus();\n }\n }, [open]);\n\n // Focus trap + Escape\n const handleKeyDown = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Escape') {\n e.preventDefault();\n onClose?.();\n\n return;\n }\n\n if (e.key !== 'Tab') {\n return;\n }\n\n const focusable = Array.from(\n sheetRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n );\n\n if (focusable.length === 0) {\n return;\n }\n\n const [first] = focusable;\n const last = focusable[focusable.length - 1];\n\n if (e.shiftKey) {\n if (document.activeElement === first) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (document.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n }\n },\n [onClose],\n );\n\n // Unmount after exit animation duration elapses\n useEffect(() => {\n if (!isClosing) {\n return;\n }\n\n const id = window.setTimeout(() => {\n setIsVisible(false);\n setIsClosing(false);\n }, CLOSE_ANIM_DURATION);\n\n return () => window.clearTimeout(id);\n }, [isClosing]);\n\n // ─── Drag-to-dismiss ─────────────────────────────────────────────────────────\n\n const handlePointerDown = useCallback((e: PointerEvent<HTMLDivElement>) => {\n isDragging.current = true;\n dragStartY.current = e.clientY;\n sheetDragY.current = 0;\n e.currentTarget.setPointerCapture(e.pointerId);\n\n if (sheetRef.current) {\n // Cancel any active entry animation immediately so inline style.transform\n // takes effect. CSS animations sit above the author cascade layer and would\n // otherwise override the inline transform set during drag.\n sheetRef.current.style.animation = 'none';\n sheetRef.current.classList.add(styles.dragging);\n }\n\n setIsEntering(false);\n }, []);\n\n const handlePointerMove = useCallback((e: PointerEvent<HTMLDivElement>) => {\n if (!isDragging.current) {\n return;\n }\n\n const delta = Math.max(0, e.clientY - dragStartY.current);\n\n sheetDragY.current = delta;\n\n if (sheetRef.current) {\n sheetRef.current.style.transform = `translateY(${delta}px)`;\n }\n }, []);\n\n const handlePointerUp = useCallback(() => {\n if (!isDragging.current) {\n return;\n }\n isDragging.current = false;\n\n const delta = sheetDragY.current;\n\n sheetDragY.current = 0;\n sheetRef.current?.classList.remove(styles.dragging);\n\n if (delta >= DRAG_CLOSE_THRESHOLD) {\n dragClosing.current = true;\n\n const reducedMotion =\n typeof window !== 'undefined' &&\n typeof window.matchMedia === 'function' &&\n window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n const sheet = sheetRef.current;\n const backdrop = backdropRef.current;\n\n if (!reducedMotion && sheet && backdrop) {\n sheet.style.transition = `transform ${CLOSE_ANIM_DURATION}ms ease`;\n sheet.style.transform = 'translateY(100%)';\n backdrop.style.transition = `opacity ${CLOSE_ANIM_DURATION}ms ease`;\n backdrop.style.opacity = '0';\n\n setTimeout(() => {\n sheet.style.transition = '';\n sheet.style.transform = '';\n backdrop.style.transition = '';\n backdrop.style.opacity = '';\n onClose?.();\n }, CLOSE_ANIM_DURATION);\n } else {\n onClose?.();\n }\n } else if (sheetRef.current) {\n // Snap back — restore animation override and clear transform so CSS transition animates to 0\n sheetRef.current.style.animation = '';\n sheetRef.current.style.transform = '';\n }\n }, [onClose]);\n\n if (!isVisible) {\n return null;\n }\n\n const node = (\n <div\n ref={backdropRef}\n className={[styles.backdrop, isClosing ? styles.closing : null].filter(Boolean).join(' ')}\n onClick={closeOnBackdrop ? onClose : undefined}\n >\n <div\n ref={sheetRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n className={[\n styles.sheet,\n isEntering ? styles.entering : null,\n isClosing ? styles.closing : null,\n className,\n ]\n .filter(Boolean)\n .join(' ')}\n onAnimationEnd={(e) => {\n if (e.target === e.currentTarget && isEntering) {\n setIsEntering(false);\n }\n }}\n onKeyDown={handleKeyDown}\n onClick={(e) => e.stopPropagation()}\n {...props}\n >\n {/ Handle bar — drag downward to dismiss /}\n <div\n className={styles.handle}\n aria-hidden=\"true\"\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={handlePointerUp}\n onPointerCancel={handlePointerUp}\n >\n <div className={styles.handleBar} />\n </div>\n\n {/ Optional title /}\n {title && (\n <div id={titleId} className={styles.title}>\n {title}\n </div>\n )}\n\n {/ Content */}\n {children && <div className={styles.content}>{children}</div>}\n </div>\n </div>\n );\n\n if (typeof document === 'undefined') {\n return node;\n }\n\n return createPortal(node, document.body);\n};\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={backdrop:`_backdrop_1a57s_3`,"backdrop-in":`_backdrop-in_1a57s_1`,sheet:`_sheet_1a57s_30`,"sheet-in":`_sheet-in_1a57s_1`,handle:`_handle_1a57s_57`,handleBar:`_handleBar_1a57s_64`,title:`_title_1a57s_74`,content:`_content_1a57s_87`};exports.default=e;
+var e={backdrop:`_backdrop_1v9gq_3`,"backdrop-in":`_backdrop-in_1v9gq_1`,closing:`_closing_1v9gq_15`,"backdrop-out":`_backdrop-out_1v9gq_1`,sheet:`_sheet_1v9gq_41`,entering:`_entering_1v9gq_57`,"sheet-in":`_sheet-in_1v9gq_1`,"sheet-out":`_sheet-out_1v9gq_1`,dragging:`_dragging_1v9gq_66`,handle:`_handle_1v9gq_92`,handleBar:`_handleBar_1v9gq_107`,title:`_title_1v9gq_118`,content:`_content_1v9gq_130`};exports.default=e;
 //# sourceMappingURL=BottomSheet.module.css.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BottomSheet.module.css.cjs","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── /\n\n.backdrop {\n position: fixed;\n inset: 0;\n z-index: 10000;\n\n display: flex;\n align-items: flex-end;\n justify-content: center;\n\n background-color: ~~rgba~~(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n -~~webkit~~-~~backdrop~~-~~filter:~~ ~~blur~~(~~4px~~);\n\n animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/ ─── Sheet ─────────────────────────────────────────────────────────────────── /\n\n.sheet {\n width: min(560px, 100vw);\n max-height: 90dvh;\n overflow-y: auto;\n\n background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n color: var(--gnome-window-fg-color, ~~rgba~~(0, 0, 0, 0.8));\n\n border-radius: var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0 0;\n box-shadow:\n 0 -4px 24px ~~rgba~~(0, 0, 0, 0.18),\n 0 0 0 1px ~~rgba~~(0, 0, 0, 0.06);\n\n animation: sheet-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes sheet-in {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n\n/ ─── Handle bar ────────────────────────────────────────────────────────────── /\n\n.handle {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--gnome-space-2, 12px) 0 var(--gnome-space-1, 6px);\n}\n\n.handleBar {\n width: 36px;\n height: 4px;\n border-radius: 2px;\n background-color: var(--gnome-window-fg-color, ~~rgba~~(0, 0, 0, 0.8));\n opacity: 0.2;\n}\n\n/ ─── Title ─────────────────────────────────────────────────────────────────── /\n\n.title {\n padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-2, 12px);\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-title-4, 1.125rem);\n font-weight: var(--gnome-font-weight-bold, 700);\n line-height: var(--gnome-line-height-title, 1.3);\n color: var(--gnome-window-fg-color, ~~rgba~~(0, 0, 0, 0.8));\n text-align: center;\n}\n\n/ ─── Content ───────────────────────────────────────────────────────────────── /\n\n.content {\n padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-4, 24px);\n}\n\n/ ─── Dark mode ─────────────────────────────────────────────────────────────── /\n\n@media (prefers-color-scheme: dark) {\n .backdrop {\n background-color: ~~rgba~~(0, 0, 0, 0.65);\n }\n\n .sheet {\n background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n box-shadow:\n 0 -4px 24px ~~rgba~~(0, 0, 0, 0.45),\n 0 0 0 1px ~~rgba~~(255, 255, 255, 0.06);\n }\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .backdrop,\n .sheet {\n animation: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"BottomSheet.module.css.cjs","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── /\n\n.backdrop {\n position: fixed;\n inset: 0;\n z-index: 10000;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n background-color: rgb(0 0 0 / 0.5);\n backdrop-filter: blur(4px);\n animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.backdrop.closing {\n animation: backdrop-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes backdrop-out {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n/ ─── Sheet ─────────────────────────────────────────────────────────────────── /\n\n.sheet {\n width: min(560px, 100vw);\n max-height: 90dvh;\n overflow-y: auto;\n background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n border-radius: var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0 0;\n box-shadow:\n 0 -4px 24px rgb(0 0 0 / 0.18),\n 0 0 0 1px rgb(0 0 0 / 0.06);\n\n / Snap-back transition after releasing a partial drag /\n transition: transform 200ms var(--gnome-easing-default, ease);\n will-change: transform;\n}\n\n.sheet.entering {\n animation: sheet-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.sheet.closing {\n animation: sheet-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n/ Disable transition while actively dragging so the sheet follows the pointer instantly /\n.sheet.dragging {\n transition: none;\n}\n\n@keyframes sheet-in {\n from {\n transform: translateY(100%);\n }\n\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes sheet-out {\n from {\n transform: translateY(0);\n }\n\n to {\n transform: translateY(100%);\n }\n}\n\n/ ─── Handle bar ────────────────────────────────────────────────────────────── /\n\n.handle {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--gnome-space-2, 12px) 0 var(--gnome-space-1, 6px);\n cursor: grab;\n\n / Prevents the browser from hijacking the pointer for scroll while dragging /\n touch-action: none;\n}\n\n.handle:active {\n cursor: grabbing;\n}\n\n.handleBar {\n width: 36px;\n height: 4px;\n border-radius: 2px;\n background-color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n opacity: 0.2;\n pointer-events: none;\n}\n\n/ ─── Title ─────────────────────────────────────────────────────────────────── /\n\n.title {\n padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-2, 12px);\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-title-4, 1.125rem);\n font-weight: var(--gnome-font-weight-bold, 700);\n line-height: var(--gnome-line-height-title, 1.3);\n color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n text-align: center;\n}\n\n/ ─── Content ───────────────────────────────────────────────────────────────── /\n\n.content {\n padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-4, 24px);\n}\n\n/ ─── Dark mode ─────────────────────────────────────────────────────────────── /\n\n@media (prefers-color-scheme: dark) {\n .backdrop {\n background-color: rgb(0 0 0 / 0.65);\n }\n\n .sheet {\n background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n box-shadow:\n 0 -4px 24px rgb(0 0 0 / 0.45),\n 0 0 0 1px rgb(255 255 255 / 0.06);\n }\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .backdrop,\n .sheet,\n .backdrop.closing,\n .sheet.entering,\n .sheet.closing,\n .sheet.dragging {\n animation: none;\n transition: none;\n }\n}\n"],"mappings":""}

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

@@ -1,12 +1,17 @@
 var e = {
-	backdrop: "_backdrop_1a57s_3",
-	"backdrop-in": "_backdrop-in_1a57s_1",
-	sheet: "_sheet_1a57s_30",
-	"sheet-in": "_sheet-in_1a57s_1",
-	handle: "_handle_1a57s_57",
-	handleBar: "_handleBar_1a57s_64",
-	title: "_title_1a57s_74",
-	content: "_content_1a57s_87"
+	backdrop: "_backdrop_1v9gq_3",
+	"backdrop-in": "_backdrop-in_1v9gq_1",
+	closing: "_closing_1v9gq_15",
+	"backdrop-out": "_backdrop-out_1v9gq_1",
+	sheet: "_sheet_1v9gq_41",
+	entering: "_entering_1v9gq_57",
+	"sheet-in": "_sheet-in_1v9gq_1",
+	"sheet-out": "_sheet-out_1v9gq_1",
+	dragging: "_dragging_1v9gq_66",
+	handle: "_handle_1v9gq_92",
+	handleBar: "_handleBar_1v9gq_107",
+	title: "_title_1v9gq_118",
+	content: "_content_1v9gq_130"
 };
 //#endregion
 export { e as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BottomSheet.module.css.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── /\n\n.backdrop {\n position: fixed;\n inset: 0;\n z-index: 10000;\n\n display: flex;\n align-items: flex-end;\n justify-content: center;\n\n background-color: ~~rgba~~(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n -~~webkit~~-~~backdrop~~-~~filter:~~ ~~blur~~(~~4px~~);\n\n animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/ ─── Sheet ─────────────────────────────────────────────────────────────────── /\n\n.sheet {\n width: min(560px, 100vw);\n max-height: 90dvh;\n overflow-y: auto;\n\n background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n color: var(--gnome-window-fg-color, ~~rgba~~(0, 0, 0, 0.8));\n\n border-radius: var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0 0;\n box-shadow:\n 0 -4px 24px ~~rgba~~(0, 0, 0, 0.18),\n 0 0 0 1px ~~rgba~~(0, 0, 0, 0.06);\n\n animation: sheet-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes sheet-in {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n\n/ ─── Handle bar ────────────────────────────────────────────────────────────── /\n\n.handle {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--gnome-space-2, 12px) 0 var(--gnome-space-1, 6px);\n}\n\n.handleBar {\n width: 36px;\n height: 4px;\n border-radius: 2px;\n background-color: var(--gnome-window-fg-color, ~~rgba~~(0, 0, 0, 0.8));\n opacity: 0.2;\n}\n\n/ ─── Title ─────────────────────────────────────────────────────────────────── /\n\n.title {\n padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-2, 12px);\n\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-title-4, 1.125rem);\n font-weight: var(--gnome-font-weight-bold, 700);\n line-height: var(--gnome-line-height-title, 1.3);\n color: var(--gnome-window-fg-color, ~~rgba~~(0, 0, 0, 0.8));\n text-align: center;\n}\n\n/ ─── Content ───────────────────────────────────────────────────────────────── /\n\n.content {\n padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-4, 24px);\n}\n\n/ ─── Dark mode ─────────────────────────────────────────────────────────────── /\n\n@media (prefers-color-scheme: dark) {\n .backdrop {\n background-color: ~~rgba~~(0, 0, 0, 0.65);\n }\n\n .sheet {\n background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n box-shadow:\n 0 -4px 24px ~~rgba~~(0, 0, 0, 0.45),\n 0 0 0 1px ~~rgba~~(255, 255, 255, 0.06);\n }\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .backdrop,\n .sheet {\n animation: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"BottomSheet.module.css.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── /\n\n.backdrop {\n position: fixed;\n inset: 0;\n z-index: 10000;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n background-color: rgb(0 0 0 / 0.5);\n backdrop-filter: blur(4px);\n animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.backdrop.closing {\n animation: backdrop-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes backdrop-out {\n from {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n }\n}\n\n/ ─── Sheet ─────────────────────────────────────────────────────────────────── /\n\n.sheet {\n width: min(560px, 100vw);\n max-height: 90dvh;\n overflow-y: auto;\n background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n border-radius: var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0 0;\n box-shadow:\n 0 -4px 24px rgb(0 0 0 / 0.18),\n 0 0 0 1px rgb(0 0 0 / 0.06);\n\n / Snap-back transition after releasing a partial drag /\n transition: transform 200ms var(--gnome-easing-default, ease);\n will-change: transform;\n}\n\n.sheet.entering {\n animation: sheet-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.sheet.closing {\n animation: sheet-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n/ Disable transition while actively dragging so the sheet follows the pointer instantly /\n.sheet.dragging {\n transition: none;\n}\n\n@keyframes sheet-in {\n from {\n transform: translateY(100%);\n }\n\n to {\n transform: translateY(0);\n }\n}\n\n@keyframes sheet-out {\n from {\n transform: translateY(0);\n }\n\n to {\n transform: translateY(100%);\n }\n}\n\n/ ─── Handle bar ────────────────────────────────────────────────────────────── /\n\n.handle {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--gnome-space-2, 12px) 0 var(--gnome-space-1, 6px);\n cursor: grab;\n\n / Prevents the browser from hijacking the pointer for scroll while dragging /\n touch-action: none;\n}\n\n.handle:active {\n cursor: grabbing;\n}\n\n.handleBar {\n width: 36px;\n height: 4px;\n border-radius: 2px;\n background-color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n opacity: 0.2;\n pointer-events: none;\n}\n\n/ ─── Title ─────────────────────────────────────────────────────────────────── /\n\n.title {\n padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-2, 12px);\n font-family: var(--gnome-font-family);\n font-size: var(--gnome-font-size-title-4, 1.125rem);\n font-weight: var(--gnome-font-weight-bold, 700);\n line-height: var(--gnome-line-height-title, 1.3);\n color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n text-align: center;\n}\n\n/ ─── Content ───────────────────────────────────────────────────────────────── /\n\n.content {\n padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-4, 24px);\n}\n\n/ ─── Dark mode ─────────────────────────────────────────────────────────────── /\n\n@media (prefers-color-scheme: dark) {\n .backdrop {\n background-color: rgb(0 0 0 / 0.65);\n }\n\n .sheet {\n background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n box-shadow:\n 0 -4px 24px rgb(0 0 0 / 0.45),\n 0 0 0 1px rgb(255 255 255 / 0.06);\n }\n}\n\n/ ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .backdrop,\n .sheet,\n .backdrop.closing,\n .sheet.entering,\n .sheet.closing,\n .sheet.dragging {\n animation: none;\n transition: none;\n }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={list:`_list_ltjeu_3`,item:`_item_ltjeu_16`,separate:`_separate_ltjeu_36`,separateItem:`_separateItem_ltjeu_46`,divider:`_divider_ltjeu_68`};exports.default=e;
+var e={list:`_list_fbr65_3`,item:`_item_fbr65_15`,separate:`_separate_fbr65_35`,separateItem:`_separateItem_fbr65_45`,divider:`_divider_fbr65_67`};exports.default=e;
 //# sourceMappingURL=BoxedList.module.css.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BoxedList.module.css.cjs","names":[],"sources":["../../../src/components/BoxedList/BoxedList.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── /\n\n.list {\n list-style: none;\n margin: 0;\n padding: 0;\n\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-divider-color);\n border-radius: var(--gnome-radius-lg);\n}\n\n/ ─── Row wrapper ──────────────────────────────────────────────────────────── /\n\n.item {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n\n.item:first-child > {\n border-radius: var(--gnome-radius-lg) var(--gnome-radius-lg) 0 0;\n}\n\n.item:last-child > * {\n border-radius: 0 0 var(--gnome-radius-lg) var(--gnome-radius-lg);\n}\n\n.item:only-child > * {\n border-radius: var(--gnome-radius-lg);\n}\n\n/* ─── Separate variant ─────────────────────────────────────────────────────── /\n\n.separate {\n background: none;\n border: none;\n border-radius: 0;\n display: flex;\n flex-direction: column;\n gap: var(--gnome-space-2, 12px);\n overflow: visible;\n}\n\n.separateItem {\n background-color: var(--gnome-card-bg-color, #~~ffffff~~);\n border: 1px solid var(--gnome-divider-color);\n border-radius: var(--gnome-radius-lg);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n@media (prefers-color-scheme: dark) {\n .separateItem {\n background-color: var(--gnome-card-bg-color, #2d2d2d);\n }\n}\n\n/ ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n .list {\n border-width: 2px;\n }\n\n .divider {\n height: 2px;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"BoxedList.module.css.cjs","names":[],"sources":["../../../src/components/BoxedList/BoxedList.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── /\n\n.list {\n list-style: none;\n margin: 0;\n padding: 0;\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-divider-color);\n border-radius: var(--gnome-radius-lg);\n}\n\n/ ─── Row wrapper ──────────────────────────────────────────────────────────── /\n\n.item {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n\n.item:first-child > {\n border-radius: var(--gnome-radius-lg) var(--gnome-radius-lg) 0 0;\n}\n\n.item:last-child > * {\n border-radius: 0 0 var(--gnome-radius-lg) var(--gnome-radius-lg);\n}\n\n.item:only-child > * {\n border-radius: var(--gnome-radius-lg);\n}\n\n/* ─── Separate variant ─────────────────────────────────────────────────────── /\n\n.separate {\n background: none;\n border: none;\n border-radius: 0;\n display: flex;\n flex-direction: column;\n gap: var(--gnome-space-2, 12px);\n overflow: visible;\n}\n\n.separateItem {\n background-color: var(--gnome-card-bg-color, #fff);\n border: 1px solid var(--gnome-divider-color);\n border-radius: var(--gnome-radius-lg);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n@media (prefers-color-scheme: dark) {\n .separateItem {\n background-color: var(--gnome-card-bg-color, #2d2d2d);\n }\n}\n\n/ ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n .list {\n border-width: 2px;\n }\n\n .divider {\n height: 2px;\n }\n}\n"],"mappings":""}

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

@@ -1,9 +1,9 @@
 var e = {
-	list: "_list_ltjeu_3",
-	item: "_item_ltjeu_16",
-	separate: "_separate_ltjeu_36",
-	separateItem: "_separateItem_ltjeu_46",
-	divider: "_divider_ltjeu_68"
+	list: "_list_fbr65_3",
+	item: "_item_fbr65_15",
+	separate: "_separate_fbr65_35",
+	separateItem: "_separateItem_fbr65_45",
+	divider: "_divider_fbr65_67"
 };
 //#endregion
 export { e as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BoxedList.module.css.js","names":[],"sources":["../../../src/components/BoxedList/BoxedList.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── /\n\n.list {\n list-style: none;\n margin: 0;\n padding: 0;\n\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-divider-color);\n border-radius: var(--gnome-radius-lg);\n}\n\n/ ─── Row wrapper ──────────────────────────────────────────────────────────── /\n\n.item {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n\n.item:first-child > {\n border-radius: var(--gnome-radius-lg) var(--gnome-radius-lg) 0 0;\n}\n\n.item:last-child > * {\n border-radius: 0 0 var(--gnome-radius-lg) var(--gnome-radius-lg);\n}\n\n.item:only-child > * {\n border-radius: var(--gnome-radius-lg);\n}\n\n/* ─── Separate variant ─────────────────────────────────────────────────────── /\n\n.separate {\n background: none;\n border: none;\n border-radius: 0;\n display: flex;\n flex-direction: column;\n gap: var(--gnome-space-2, 12px);\n overflow: visible;\n}\n\n.separateItem {\n background-color: var(--gnome-card-bg-color, #~~ffffff~~);\n border: 1px solid var(--gnome-divider-color);\n border-radius: var(--gnome-radius-lg);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n@media (prefers-color-scheme: dark) {\n .separateItem {\n background-color: var(--gnome-card-bg-color, #2d2d2d);\n }\n}\n\n/ ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n .list {\n border-width: 2px;\n }\n\n .divider {\n height: 2px;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"BoxedList.module.css.js","names":[],"sources":["../../../src/components/BoxedList/BoxedList.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── /\n\n.list {\n list-style: none;\n margin: 0;\n padding: 0;\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-divider-color);\n border-radius: var(--gnome-radius-lg);\n}\n\n/ ─── Row wrapper ──────────────────────────────────────────────────────────── /\n\n.item {\n position: relative;\n display: flex;\n flex-direction: column;\n}\n\n.item:first-child > {\n border-radius: var(--gnome-radius-lg) var(--gnome-radius-lg) 0 0;\n}\n\n.item:last-child > * {\n border-radius: 0 0 var(--gnome-radius-lg) var(--gnome-radius-lg);\n}\n\n.item:only-child > * {\n border-radius: var(--gnome-radius-lg);\n}\n\n/* ─── Separate variant ─────────────────────────────────────────────────────── /\n\n.separate {\n background: none;\n border: none;\n border-radius: 0;\n display: flex;\n flex-direction: column;\n gap: var(--gnome-space-2, 12px);\n overflow: visible;\n}\n\n.separateItem {\n background-color: var(--gnome-card-bg-color, #fff);\n border: 1px solid var(--gnome-divider-color);\n border-radius: var(--gnome-radius-lg);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n@media (prefers-color-scheme: dark) {\n .separateItem {\n background-color: var(--gnome-card-bg-color, #2d2d2d);\n }\n}\n\n/ ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n .list {\n border-width: 2px;\n }\n\n .divider {\n height: 2px;\n }\n}\n"],"mappings":""}

package/dist/components/BreakpointBin/BreakpointBin.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-let e=require("react"),t=require("react/jsx-runtime");var n=({breakpoints:n,children:r,className:i,style:a,...o})=>{let s=(0,e.useRef)(null),[c,l]=(0,e.useState)({activeBreakpoint:null,width:0});return(0,e.useEffect)(()=>{let e=s.current;if(!e)return;let t=[...n].sort((e,t)=>e.maxWidth-t.maxWidth),r=e=>({activeBreakpoint:(t.find(t=>e<=t.maxWidth)??null)?.name??null,width:e});l(r(e.offsetWidth));let i=new ResizeObserver(e=>{let t=e[0];t&&l(r(t.contentBoxSize?.[0]?.inlineSize??t.contentRect.width))});return i.observe(e),()=>i.disconnect()},[n]),(0,t.jsx)(`div`,{ref:s,className:i,style:{minWidth:0,...a},"data-breakpoint":c.activeBreakpoint??void 0,...o,children:r(c)})};exports.BreakpointBin=n;
+let e=require("react"),t=require("react/jsx-runtime");var n=({breakpoints:n,children:r,className:i,style:a,...o})=>{let s=(0,e.useRef)(null),[c,l]=(0,e.useState)({activeBreakpoint:null,width:0});return(0,e.useEffect)(()=>{let e=s.current;if(!e)return;let t=[...n].sort((e,t)=>e.maxWidth-t.maxWidth),r=e=>({activeBreakpoint:(t.find(t=>e<=t.maxWidth)??null)?.name??null,width:e});l(r(e.offsetWidth));let i=new ResizeObserver(e=>{let[t]=e;t&&l(r(t.contentBoxSize?.[0]?.inlineSize??t.contentRect.width))});return i.observe(e),()=>i.disconnect()},[n]),(0,t.jsx)(`div`,{ref:s,className:i,style:{minWidth:0,...a},"data-breakpoint":c.activeBreakpoint??void 0,...o,children:r(c)})};exports.BreakpointBin=n;
 //# sourceMappingURL=BreakpointBin.cjs.map