@gnome-ui/react 1.49.0 → 1.49.1

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

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

@@ -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":""}
+{"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

@@ -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=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[0],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;
+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

@@ -1 +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[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  // 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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"}
+{"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.js

@@ -20,7 +20,7 @@ var u = "button:not([disabled]), [href], input:not([disabled]), select:not([disa
 		if (e.key !== "Tab") return;
 		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());
 	}, [g]);
 	r(() => {

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

@@ -1 +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[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  // 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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"}
+{"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

@@ -1,2 +1,2 @@
-var e={backdrop:`_backdrop_mrs02_3`,"backdrop-in":`_backdrop-in_mrs02_1`,closing:`_closing_mrs02_19`,"backdrop-out":`_backdrop-out_mrs02_1`,sheet:`_sheet_mrs02_43`,entering:`_entering_mrs02_61`,"sheet-in":`_sheet-in_mrs02_1`,"sheet-out":`_sheet-out_mrs02_1`,dragging:`_dragging_mrs02_70`,handle:`_handle_mrs02_94`,handleBar:`_handleBar_mrs02_108`,title:`_title_mrs02_119`,content:`_content_mrs02_132`};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

@@ -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.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  to {\n    opacity: 1;\n  }\n}\n\n@keyframes backdrop-out {\n  from {\n    opacity: 1;\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\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  /* 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  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes sheet-out {\n  from {\n    transform: translateY(0);\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  /* 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, rgba(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\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  .backdrop.closing,\n  .sheet.entering,\n  .sheet.closing,\n  .sheet.dragging {\n    animation: none;\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"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

@@ -1,17 +1,17 @@
 var e = {
-	backdrop: "_backdrop_mrs02_3",
-	"backdrop-in": "_backdrop-in_mrs02_1",
-	closing: "_closing_mrs02_19",
-	"backdrop-out": "_backdrop-out_mrs02_1",
-	sheet: "_sheet_mrs02_43",
-	entering: "_entering_mrs02_61",
-	"sheet-in": "_sheet-in_mrs02_1",
-	"sheet-out": "_sheet-out_mrs02_1",
-	dragging: "_dragging_mrs02_70",
-	handle: "_handle_mrs02_94",
-	handleBar: "_handleBar_mrs02_108",
-	title: "_title_mrs02_119",
-	content: "_content_mrs02_132"
+	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

@@ -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.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  to {\n    opacity: 1;\n  }\n}\n\n@keyframes backdrop-out {\n  from {\n    opacity: 1;\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\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  /* 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  to {\n    transform: translateY(0);\n  }\n}\n\n@keyframes sheet-out {\n  from {\n    transform: translateY(0);\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  /* 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, rgba(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\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  .backdrop.closing,\n  .sheet.entering,\n  .sheet.closing,\n  .sheet.dragging {\n    animation: none;\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"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

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

@@ -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":""}
+{"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

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

@@ -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":""}
+{"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

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

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

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

package/dist/components/BreakpointBin/BreakpointBin.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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