@gnome-ui/react 1.45.0 → 1.45.1

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useCallback,\n  useId,\n  type KeyboardEvent,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styles from \"./BottomSheet.module.css\";\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Whether the sheet is visible. */\n  open: boolean;\n  /**\n   * Optional heading shown in the drag handle area.\n   */\n  title?: ReactNode;\n  children?: ReactNode;\n  /** Called when the user dismisses the sheet (Escape or backdrop click). */\n  onClose?: () => void;\n  /**\n   * Whether clicking the backdrop closes the sheet.\n   * Defaults to `true`.\n   */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Slide-up panel that overlays content from the bottom edge.\n *\n * Mirrors `AdwBottomSheet` (libadwaita 1.6+). Renders into a portal on\n * `document.body`. Traps focus, closes on Escape or backdrop click.\n * The handle bar is decorative — drag-to-close is not implemented.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html\n */\nexport function BottomSheet({\n  open,\n  title,\n  children,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: BottomSheetProps) {\n  const sheetRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = sheetRef.current?.querySelector<HTMLElement>(FOCUSABLE);\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        return;\n      }\n      if (e.key !== \"Tab\") return;\n      const focusable = Array.from(\n        sheetRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []\n      );\n      if (focusable.length === 0) return;\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      if (e.shiftKey) {\n        if (document.activeElement === first) { e.preventDefault(); last.focus(); }\n      } else {\n        if (document.activeElement === last) { e.preventDefault(); first.focus(); }\n      }\n    },\n    [onClose]\n  );\n\n  if (!open) return null;\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      onClick={closeOnBackdrop ? onClose : undefined}\n      aria-hidden=\"true\"\n    >\n      <div\n        ref={sheetRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        className={[styles.sheet, className].filter(Boolean).join(\" \")}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {/* Handle bar */}\n        <div className={styles.handle} aria-hidden=\"true\">\n          <div className={styles.handleBar} />\n        </div>\n\n        {/* Optional title */}\n        {title && (\n          <div id={titleId} className={styles.title}>{title}</div>\n        )}\n\n        {/* Content */}\n        {children && (\n          <div className={styles.content}>{children}</div>\n        )}\n      </div>\n    </div>\n  );\n\n  if (typeof document === \"undefined\") return node;\n  return createPortal(node, document.body);\n}\n"],"mappings":";;;;;AAYA,IAAM,IACJ;AA4BF,SAAgB,EAAY,EAC1B,SACA,UACA,aACA,YACA,qBAAkB,IAClB,cACA,GAAG,KACgB;CACnB,IAAM,IAAW,EAAuB,KAAK,EACvC,IAAU,GAAO,EACjB,IAAoB,EAAuB,KAAK;AAGtD,SAAgB;AACd,EAAI,KACF,EAAkB,UAAU,SAAS,gBAC1B,EAAS,SAAS,cAA2B,EAAU,GAC9D,OAAO,IAEV,EAAkB,SAAgC,OAAO;IAE3D,CAAC,EAAK,CAAC;CAGV,IAAM,IAAgB,GACnB,MAAqC;AACpC,MAAI,EAAE,QAAQ,UAAU;AAEtB,GADA,EAAE,gBAAgB,EAClB,KAAW;AACX;;AAEF,MAAI,EAAE,QAAQ,MAAO;EACrB,IAAM,IAAY,MAAM,KACtB,EAAS,SAAS,iBAA8B,EAAU,IAAI,EAAE,CACjE;AACD,MAAI,EAAU,WAAW,EAAG;EAC5B,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;AAC1C,EAAI,EAAE,WACA,SAAS,kBAAkB,MAAS,EAAE,gBAAgB,EAAE,EAAK,OAAO,IAEpE,SAAS,kBAAkB,MAAQ,EAAE,gBAAgB,EAAE,EAAM,OAAO;IAG5E,CAAC,EAAQ,CACV;AAED,KAAI,CAAC,EAAM,QAAO;CAElB,IAAM,IACJ,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,SAAS,IAAkB,IAAU,KAAA;EACrC,eAAY;YAEZ,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC9D,WAAW;GACX,UAAU,MAAM,EAAE,iBAAiB;GACnC,GAAI;aARN;IAWE,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAQ,eAAY;eACzC,kBAAC,OAAD,EAAK,WAAW,EAAO,WAAa,CAAA;KAChC,CAAA;IAGL,KACC,kBAAC,OAAD;KAAK,IAAI;KAAS,WAAW,EAAO;eAAQ;KAAY,CAAA;IAIzD,KACC,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAU;KAAe,CAAA;IAE9C;;EACF,CAAA;AAIR,QADI,OAAO,WAAa,MAAoB,IACrC,EAAa,GAAM,SAAS,KAAK"}
+{"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport styles from './BottomSheet.module.css';\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the sheet is visible. */\n  open: boolean;\n  /**\n   * Optional heading shown in the drag handle area.\n   */\n  title?: ReactNode;\n  children?: ReactNode;\n  /** Called when the user dismisses the sheet (Escape or backdrop click). */\n  onClose?: () => void;\n  /**\n   * Whether clicking the backdrop closes the sheet.\n   * Defaults to `true`.\n   */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Slide-up panel that overlays content from the bottom edge.\n *\n * Mirrors `AdwBottomSheet` (libadwaita 1.6+). Renders into a portal on\n * `document.body`. Traps focus, closes on Escape or backdrop click.\n * The handle bar is decorative — drag-to-close is not implemented.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html\n */\nexport function BottomSheet({\n  open,\n  title,\n  children,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: BottomSheetProps) {\n  const sheetRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = sheetRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n\n        return;\n      }\n\n      if (e.key !== 'Tab') {\n        return;\n      }\n\n      const focusable = Array.from(\n        sheetRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n\n      if (focusable.length === 0) {\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      onClick={closeOnBackdrop ? onClose : undefined}\n      aria-hidden=\"true\"\n    >\n      <div\n        ref={sheetRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        className={[styles.sheet, className].filter(Boolean).join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {/* Handle bar */}\n        <div className={styles.handle} aria-hidden=\"true\">\n          <div className={styles.handleBar} />\n        </div>\n\n        {/* Optional title */}\n        {title && (\n          <div id={titleId} className={styles.title}>\n            {title}\n          </div>\n        )}\n\n        {/* Content */}\n        {children && <div className={styles.content}>{children}</div>}\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n}\n"],"mappings":";;;;;AAcA,IAAM,IACJ;AA4BF,SAAgB,EAAY,EAC1B,SACA,UACA,aACA,YACA,qBAAkB,IAClB,cACA,GAAG,KACgB;CACnB,IAAM,IAAW,EAAuB,KAAK,EACvC,IAAU,GAAO,EACjB,IAAoB,EAAuB,KAAK;AAGtD,SAAgB;AACd,EAAI,KACF,EAAkB,UAAU,SAAS,gBAC1B,EAAS,SAAS,cAA2B,EAAU,GAE9D,OAAO,IAEV,EAAkB,SAAgC,OAAO;IAE3D,CAAC,EAAK,CAAC;CAGV,IAAM,IAAgB,GACnB,MAAqC;AACpC,MAAI,EAAE,QAAQ,UAAU;AAEtB,GADA,EAAE,gBAAgB,EAClB,KAAW;AAEX;;AAGF,MAAI,EAAE,QAAQ,MACZ;EAGF,IAAM,IAAY,MAAM,KACtB,EAAS,SAAS,iBAA8B,EAAU,IAAI,EAAE,CACjE;AAED,MAAI,EAAU,WAAW,EACvB;EAGF,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;AAE1C,EAAI,EAAE,WACA,SAAS,kBAAkB,MAC7B,EAAE,gBAAgB,EAClB,EAAK,OAAO,IAGV,SAAS,kBAAkB,MAC7B,EAAE,gBAAgB,EAClB,EAAM,OAAO;IAInB,CAAC,EAAQ,CACV;AAED,KAAI,CAAC,EACH,QAAO;CAGT,IAAM,IACJ,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,SAAS,IAAkB,IAAU,KAAA;EACrC,eAAY;YAEZ,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC9D,WAAW;GACX,UAAU,MAAM,EAAE,iBAAiB;GACnC,GAAI;aARN;IAWE,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAQ,eAAY;eACzC,kBAAC,OAAD,EAAK,WAAW,EAAO,WAAa,CAAA;KAChC,CAAA;IAGL,KACC,kBAAC,OAAD;KAAK,IAAI;KAAS,WAAW,EAAO;eACjC;KACG,CAAA;IAIP,KAAY,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAU;KAAe,CAAA;IACzD;;EACF,CAAA;AAOR,QAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,SAAS,KAAK"}

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

@@ -1,2 +1,2 @@
-var e=`_backdrop_zzv98_3`,t=`_sheet_zzv98_26`,n=`_handle_zzv98_49`,r=`_handleBar_zzv98_56`,i=`_title_zzv98_66`,a=`_content_zzv98_79`,o={backdrop:e,"backdrop-in":`_backdrop-in_zzv98_1`,sheet:t,"sheet-in":`_sheet-in_zzv98_1`,handle:n,handleBar:r,title:i,content:a};exports.default=o;
+var e=`_backdrop_1a57s_3`,t=`_sheet_1a57s_30`,n=`_handle_1a57s_57`,r=`_handleBar_1a57s_64`,i=`_title_1a57s_74`,a=`_content_1a57s_87`,o={backdrop:e,"backdrop-in":`_backdrop-in_1a57s_1`,sheet:t,"sheet-in":`_sheet-in_1a57s_1`,handle:n,handleBar:r,title:i,content:a};exports.default=o;
 //# 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@keyframes backdrop-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n/* ─── Sheet ─────────────────────────────────────────────────────────────────── */\n\n.sheet {\n  width: min(560px, 100vw);\n  max-height: 90dvh;\n  overflow-y: auto;\n\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0 0;\n  box-shadow:\n    0 -4px 24px rgba(0, 0, 0, 0.18),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n\n  animation: sheet-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes sheet-in {\n  from { transform: translateY(100%); }\n  to   { transform: translateY(0); }\n}\n\n/* ─── Handle bar ────────────────────────────────────────────────────────────── */\n\n.handle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--gnome-space-2, 12px) 0 var(--gnome-space-1, 6px);\n}\n\n.handleBar {\n  width: 36px;\n  height: 4px;\n  border-radius: 2px;\n  background-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.2;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n.title {\n  padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-2, 12px);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: var(--gnome-line-height-title, 1.3);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: center;\n}\n\n/* ─── Content ───────────────────────────────────────────────────────────────── */\n\n.content {\n  padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-4, 24px);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .sheet {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 -4px 24px rgba(0, 0, 0, 0.45),\n      0 0 0 1px rgba(255, 255, 255, 0.06);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .sheet {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"BottomSheet.module.css.cjs","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─── Sheet ─────────────────────────────────────────────────────────────────── */\n\n.sheet {\n  width: min(560px, 100vw);\n  max-height: 90dvh;\n  overflow-y: auto;\n\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0 0;\n  box-shadow:\n    0 -4px 24px rgba(0, 0, 0, 0.18),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n\n  animation: sheet-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes sheet-in {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n/* ─── Handle bar ────────────────────────────────────────────────────────────── */\n\n.handle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--gnome-space-2, 12px) 0 var(--gnome-space-1, 6px);\n}\n\n.handleBar {\n  width: 36px;\n  height: 4px;\n  border-radius: 2px;\n  background-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.2;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n.title {\n  padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-2, 12px);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: var(--gnome-line-height-title, 1.3);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: center;\n}\n\n/* ─── Content ───────────────────────────────────────────────────────────────── */\n\n.content {\n  padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-4, 24px);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .sheet {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 -4px 24px rgba(0, 0, 0, 0.45),\n      0 0 0 1px rgba(255, 255, 255, 0.06);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .sheet {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,9 +1,9 @@
 //#region src/components/BottomSheet/BottomSheet.module.css
-var e = "_backdrop_zzv98_3", t = "_sheet_zzv98_26", n = "_handle_zzv98_49", r = "_handleBar_zzv98_56", i = "_title_zzv98_66", a = "_content_zzv98_79", o = {
+var e = "_backdrop_1a57s_3", t = "_sheet_1a57s_30", n = "_handle_1a57s_57", r = "_handleBar_1a57s_64", i = "_title_1a57s_74", a = "_content_1a57s_87", o = {
 	backdrop: e,
-	"backdrop-in": "_backdrop-in_zzv98_1",
+	"backdrop-in": "_backdrop-in_1a57s_1",
 	sheet: t,
-	"sheet-in": "_sheet-in_zzv98_1",
+	"sheet-in": "_sheet-in_1a57s_1",
 	handle: n,
 	handleBar: r,
 	title: i,

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@keyframes backdrop-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n/* ─── Sheet ─────────────────────────────────────────────────────────────────── */\n\n.sheet {\n  width: min(560px, 100vw);\n  max-height: 90dvh;\n  overflow-y: auto;\n\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0 0;\n  box-shadow:\n    0 -4px 24px rgba(0, 0, 0, 0.18),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n\n  animation: sheet-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes sheet-in {\n  from { transform: translateY(100%); }\n  to   { transform: translateY(0); }\n}\n\n/* ─── Handle bar ────────────────────────────────────────────────────────────── */\n\n.handle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--gnome-space-2, 12px) 0 var(--gnome-space-1, 6px);\n}\n\n.handleBar {\n  width: 36px;\n  height: 4px;\n  border-radius: 2px;\n  background-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.2;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n.title {\n  padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-2, 12px);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: var(--gnome-line-height-title, 1.3);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: center;\n}\n\n/* ─── Content ───────────────────────────────────────────────────────────────── */\n\n.content {\n  padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-4, 24px);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .sheet {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 -4px 24px rgba(0, 0, 0, 0.45),\n      0 0 0 1px rgba(255, 255, 255, 0.06);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .sheet {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"BottomSheet.module.css.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─── Sheet ─────────────────────────────────────────────────────────────────── */\n\n.sheet {\n  width: min(560px, 100vw);\n  max-height: 90dvh;\n  overflow-y: auto;\n\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0 0;\n  box-shadow:\n    0 -4px 24px rgba(0, 0, 0, 0.18),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n\n  animation: sheet-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes sheet-in {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n/* ─── Handle bar ────────────────────────────────────────────────────────────── */\n\n.handle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--gnome-space-2, 12px) 0 var(--gnome-space-1, 6px);\n}\n\n.handleBar {\n  width: 36px;\n  height: 4px;\n  border-radius: 2px;\n  background-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.2;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n.title {\n  padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-2, 12px);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: var(--gnome-line-height-title, 1.3);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: center;\n}\n\n/* ─── Content ───────────────────────────────────────────────────────────────── */\n\n.content {\n  padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-4, 24px);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .sheet {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 -4px 24px rgba(0, 0, 0, 0.45),\n      0 0 0 1px rgba(255, 255, 255, 0.06);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .sheet {\n    animation: none;\n  }\n}\n"],"mappings":""}

package/dist/components/BottomSheet/index.d.ts

@@ -1,2 +1,2 @@
-export { BottomSheet } from './BottomSheet';
 export type { BottomSheetProps } from './BottomSheet';
+export { BottomSheet } from './BottomSheet';

package/dist/components/Box/Box.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Box.cjs","names":[],"sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\n\n/** GNOME HIG standard spacing values (matches GtkBox spacing tokens). */\nexport type BoxSpacing = 3 | 6 | 12 | 18 | 24 | 32 | 48;\n\n/** Alias of `BoxSpacing` for use as a padding scale. */\nexport type BoxPadding = BoxSpacing;\n\nexport type BoxOrientation = \"horizontal\" | \"vertical\";\nexport type BoxAlign = \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\nexport type BoxJustify =\n  | \"start\"\n  | \"center\"\n  | \"end\"\n  | \"space-between\"\n  | \"space-around\"\n  | \"space-evenly\";\n\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Direction children are arranged.\n   * `\"vertical\"` → `flex-direction: column` (default).\n   * `\"horizontal\"` → `flex-direction: row`.\n   */\n  orientation?: BoxOrientation;\n  /**\n   * Gap between children in pixels.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   * Defaults to `6` (the HIG \"standard\" inner spacing).\n   */\n  spacing?: BoxSpacing | number | string;\n  /**\n   * Cross-axis alignment (`align-items`).\n   * Defaults to `\"stretch\"` for vertical, `\"center\"` for horizontal.\n   */\n  align?: BoxAlign;\n  /**\n   * Main-axis distribution (`justify-content`).\n   * Defaults to `\"start\"`.\n   */\n  justify?: BoxJustify;\n  /**\n   * Inner padding applied to all sides.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   */\n  padding?: BoxPadding | number | string;\n  children?: ReactNode;\n}\n\n/**\n * Fundamental flex layout primitive — the web equivalent of `GtkBox`.\n *\n * Arranges children in a single row or column with consistent spacing\n * following the GNOME Human Interface Guidelines spacing scale:\n *\n * | Token | px | Use |\n * |-------|----|-----|\n * | tight | 3  | Dense UI, icon + label pairs |\n * | standard | 6 | Default inner spacing |\n * | medium | 12 | Between related groups |\n * | large | 18 | Between loosely related sections |\n * | section | 24 | Page-level section gaps |\n * | loose | 32 | Large content separation |\n * | jumbo | 48 | Hero / splash spacing |\n *\n * **Usage:**\n * ```tsx\n * // Vertical section (heading + content)\n * <Box spacing={8}>\n *   <Text variant=\"caption-heading\" color=\"dim\">Devices</Text>\n *   <BoxedList>…</BoxedList>\n * </Box>\n *\n * // Horizontal icon + label\n * <Box orientation=\"horizontal\" spacing={6} align=\"center\">\n *   <Icon name=\"folder\" />\n *   <Text>Documents</Text>\n * </Box>\n * ```\n *\n * @see https://developer.gnome.org/hig/guidelines/spacing.html\n */\nexport function Box({\n  orientation = \"vertical\",\n  spacing = 6,\n  align,\n  justify = \"start\",\n  padding,\n  className,\n  style,\n  children,\n  ...props\n}: BoxProps) {\n  const defaultAlign: BoxAlign =\n    orientation === \"horizontal\" ? \"center\" : \"stretch\";\n\n  const resolvedStyle: CSSProperties = {\n    display: \"flex\",\n    flexDirection: orientation === \"horizontal\" ? \"row\" : \"column\",\n    gap: typeof spacing === \"number\" ? `${spacing}px` : spacing,\n    alignItems: align ?? defaultAlign,\n    justifyContent: justify,\n    ...(padding !== undefined && { padding: typeof padding === \"number\" ? `${padding}px` : padding }),\n    ...style,\n  };\n\n  return (\n    <div className={className} style={resolvedStyle} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"mCAkFA,SAAgB,EAAI,CAClB,cAAc,WACd,UAAU,EACV,QACA,UAAU,QACV,UACA,YACA,QACA,WACA,GAAG,GACQ,CACX,IAAM,EACJ,IAAgB,aAAe,SAAW,UAY5C,OACE,EAAA,EAAA,KAAC,MAAD,CAAgB,YAAW,MAXQ,CACnC,QAAS,OACT,cAAe,IAAgB,aAAe,MAAQ,SACtD,IAAK,OAAO,GAAY,SAAW,GAAG,EAAQ,IAAM,EACpD,WAAY,GAAS,EACrB,eAAgB,EAChB,GAAI,IAAY,IAAA,IAAa,CAAE,QAAS,OAAO,GAAY,SAAW,GAAG,EAAQ,IAAM,EAAS,CAChG,GAAG,EACJ,CAGkD,GAAI,EAClD,WACG,CAAA"}
+{"version":3,"file":"Box.cjs","names":[],"sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\n/** GNOME HIG standard spacing values (matches GtkBox spacing tokens). */\nexport type BoxSpacing = 3 | 6 | 12 | 18 | 24 | 32 | 48;\n\n/** Alias of `BoxSpacing` for use as a padding scale. */\nexport type BoxPadding = BoxSpacing;\n\nexport type BoxOrientation = 'horizontal' | 'vertical';\nexport type BoxAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\nexport type BoxJustify =\n  | 'start'\n  | 'center'\n  | 'end'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly';\n\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Direction children are arranged.\n   * `\"vertical\"` → `flex-direction: column` (default).\n   * `\"horizontal\"` → `flex-direction: row`.\n   */\n  orientation?: BoxOrientation;\n  /**\n   * Gap between children in pixels.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   * Defaults to `6` (the HIG \"standard\" inner spacing).\n   */\n  spacing?: BoxSpacing | number | string;\n  /**\n   * Cross-axis alignment (`align-items`).\n   * Defaults to `\"stretch\"` for vertical, `\"center\"` for horizontal.\n   */\n  align?: BoxAlign;\n  /**\n   * Main-axis distribution (`justify-content`).\n   * Defaults to `\"start\"`.\n   */\n  justify?: BoxJustify;\n  /**\n   * Inner padding applied to all sides.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   */\n  padding?: BoxPadding | number | string;\n  children?: ReactNode;\n}\n\n/**\n * Fundamental flex layout primitive — the web equivalent of `GtkBox`.\n *\n * Arranges children in a single row or column with consistent spacing\n * following the GNOME Human Interface Guidelines spacing scale:\n *\n * | Token | px | Use |\n * |-------|----|-----|\n * | tight | 3  | Dense UI, icon + label pairs |\n * | standard | 6 | Default inner spacing |\n * | medium | 12 | Between related groups |\n * | large | 18 | Between loosely related sections |\n * | section | 24 | Page-level section gaps |\n * | loose | 32 | Large content separation |\n * | jumbo | 48 | Hero / splash spacing |\n *\n * **Usage:**\n * ```tsx\n * // Vertical section (heading + content)\n * <Box spacing={8}>\n *   <Text variant=\"caption-heading\" color=\"dim\">Devices</Text>\n *   <BoxedList>…</BoxedList>\n * </Box>\n *\n * // Horizontal icon + label\n * <Box orientation=\"horizontal\" spacing={6} align=\"center\">\n *   <Icon name=\"folder\" />\n *   <Text>Documents</Text>\n * </Box>\n * ```\n *\n * @see https://developer.gnome.org/hig/guidelines/spacing.html\n */\nexport function Box({\n  orientation = 'vertical',\n  spacing = 6,\n  align,\n  justify = 'start',\n  padding,\n  className,\n  style,\n  children,\n  ...props\n}: BoxProps) {\n  const defaultAlign: BoxAlign = orientation === 'horizontal' ? 'center' : 'stretch';\n\n  const resolvedStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: typeof spacing === 'number' ? `${spacing}px` : spacing,\n    alignItems: align ?? defaultAlign,\n    justifyContent: justify,\n    ...(padding !== undefined && {\n      padding: typeof padding === 'number' ? `${padding}px` : padding,\n    }),\n    ...style,\n  };\n\n  return (\n    <div className={className} style={resolvedStyle} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"mCAkFA,SAAgB,EAAI,CAClB,cAAc,WACd,UAAU,EACV,QACA,UAAU,QACV,UACA,YACA,QACA,WACA,GAAG,GACQ,CACX,IAAM,EAAyB,IAAgB,aAAe,SAAW,UAczE,OACE,EAAA,EAAA,KAAC,MAAD,CAAgB,YAAW,MAbQ,CACnC,QAAS,OACT,cAAe,IAAgB,aAAe,MAAQ,SACtD,IAAK,OAAO,GAAY,SAAW,GAAG,EAAQ,IAAM,EACpD,WAAY,GAAS,EACrB,eAAgB,EAChB,GAAI,IAAY,IAAA,IAAa,CAC3B,QAAS,OAAO,GAAY,SAAW,GAAG,EAAQ,IAAM,EACzD,CACD,GAAG,EACJ,CAGkD,GAAI,EAClD,WACG,CAAA"}

package/dist/components/Box/Box.d.ts

@@ -3,9 +3,9 @@ import { HTMLAttributes, ReactNode } from 'react';
 export type BoxSpacing = 3 | 6 | 12 | 18 | 24 | 32 | 48;
 /** Alias of `BoxSpacing` for use as a padding scale. */
 export type BoxPadding = BoxSpacing;
-export type BoxOrientation = "horizontal" | "vertical";
-export type BoxAlign = "start" | "center" | "end" | "stretch" | "baseline";
-export type BoxJustify = "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+export type BoxOrientation = 'horizontal' | 'vertical';
+export type BoxAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type BoxJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
 export interface BoxProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Direction children are arranged.

package/dist/components/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","names":[],"sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\n\n/** GNOME HIG standard spacing values (matches GtkBox spacing tokens). */\nexport type BoxSpacing = 3 | 6 | 12 | 18 | 24 | 32 | 48;\n\n/** Alias of `BoxSpacing` for use as a padding scale. */\nexport type BoxPadding = BoxSpacing;\n\nexport type BoxOrientation = \"horizontal\" | \"vertical\";\nexport type BoxAlign = \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\nexport type BoxJustify =\n  | \"start\"\n  | \"center\"\n  | \"end\"\n  | \"space-between\"\n  | \"space-around\"\n  | \"space-evenly\";\n\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Direction children are arranged.\n   * `\"vertical\"` → `flex-direction: column` (default).\n   * `\"horizontal\"` → `flex-direction: row`.\n   */\n  orientation?: BoxOrientation;\n  /**\n   * Gap between children in pixels.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   * Defaults to `6` (the HIG \"standard\" inner spacing).\n   */\n  spacing?: BoxSpacing | number | string;\n  /**\n   * Cross-axis alignment (`align-items`).\n   * Defaults to `\"stretch\"` for vertical, `\"center\"` for horizontal.\n   */\n  align?: BoxAlign;\n  /**\n   * Main-axis distribution (`justify-content`).\n   * Defaults to `\"start\"`.\n   */\n  justify?: BoxJustify;\n  /**\n   * Inner padding applied to all sides.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   */\n  padding?: BoxPadding | number | string;\n  children?: ReactNode;\n}\n\n/**\n * Fundamental flex layout primitive — the web equivalent of `GtkBox`.\n *\n * Arranges children in a single row or column with consistent spacing\n * following the GNOME Human Interface Guidelines spacing scale:\n *\n * | Token | px | Use |\n * |-------|----|-----|\n * | tight | 3  | Dense UI, icon + label pairs |\n * | standard | 6 | Default inner spacing |\n * | medium | 12 | Between related groups |\n * | large | 18 | Between loosely related sections |\n * | section | 24 | Page-level section gaps |\n * | loose | 32 | Large content separation |\n * | jumbo | 48 | Hero / splash spacing |\n *\n * **Usage:**\n * ```tsx\n * // Vertical section (heading + content)\n * <Box spacing={8}>\n *   <Text variant=\"caption-heading\" color=\"dim\">Devices</Text>\n *   <BoxedList>…</BoxedList>\n * </Box>\n *\n * // Horizontal icon + label\n * <Box orientation=\"horizontal\" spacing={6} align=\"center\">\n *   <Icon name=\"folder\" />\n *   <Text>Documents</Text>\n * </Box>\n * ```\n *\n * @see https://developer.gnome.org/hig/guidelines/spacing.html\n */\nexport function Box({\n  orientation = \"vertical\",\n  spacing = 6,\n  align,\n  justify = \"start\",\n  padding,\n  className,\n  style,\n  children,\n  ...props\n}: BoxProps) {\n  const defaultAlign: BoxAlign =\n    orientation === \"horizontal\" ? \"center\" : \"stretch\";\n\n  const resolvedStyle: CSSProperties = {\n    display: \"flex\",\n    flexDirection: orientation === \"horizontal\" ? \"row\" : \"column\",\n    gap: typeof spacing === \"number\" ? `${spacing}px` : spacing,\n    alignItems: align ?? defaultAlign,\n    justifyContent: justify,\n    ...(padding !== undefined && { padding: typeof padding === \"number\" ? `${padding}px` : padding }),\n    ...style,\n  };\n\n  return (\n    <div className={className} style={resolvedStyle} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;AAkFA,SAAgB,EAAI,EAClB,iBAAc,YACd,aAAU,GACV,UACA,aAAU,SACV,YACA,cACA,UACA,aACA,GAAG,KACQ;CACX,IAAM,IACJ,MAAgB,eAAe,WAAW;AAY5C,QACE,kBAAC,OAAD;EAAgB;EAAW,OAXQ;GACnC,SAAS;GACT,eAAe,MAAgB,eAAe,QAAQ;GACtD,KAAK,OAAO,KAAY,WAAW,GAAG,EAAQ,MAAM;GACpD,YAAY,KAAS;GACrB,gBAAgB;GAChB,GAAI,MAAY,KAAA,KAAa,EAAE,SAAS,OAAO,KAAY,WAAW,GAAG,EAAQ,MAAM,GAAS;GAChG,GAAG;GACJ;EAGkD,GAAI;EAClD;EACG,CAAA"}
+{"version":3,"file":"Box.js","names":[],"sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\n/** GNOME HIG standard spacing values (matches GtkBox spacing tokens). */\nexport type BoxSpacing = 3 | 6 | 12 | 18 | 24 | 32 | 48;\n\n/** Alias of `BoxSpacing` for use as a padding scale. */\nexport type BoxPadding = BoxSpacing;\n\nexport type BoxOrientation = 'horizontal' | 'vertical';\nexport type BoxAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\nexport type BoxJustify =\n  | 'start'\n  | 'center'\n  | 'end'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly';\n\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Direction children are arranged.\n   * `\"vertical\"` → `flex-direction: column` (default).\n   * `\"horizontal\"` → `flex-direction: row`.\n   */\n  orientation?: BoxOrientation;\n  /**\n   * Gap between children in pixels.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   * Defaults to `6` (the HIG \"standard\" inner spacing).\n   */\n  spacing?: BoxSpacing | number | string;\n  /**\n   * Cross-axis alignment (`align-items`).\n   * Defaults to `\"stretch\"` for vertical, `\"center\"` for horizontal.\n   */\n  align?: BoxAlign;\n  /**\n   * Main-axis distribution (`justify-content`).\n   * Defaults to `\"start\"`.\n   */\n  justify?: BoxJustify;\n  /**\n   * Inner padding applied to all sides.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   */\n  padding?: BoxPadding | number | string;\n  children?: ReactNode;\n}\n\n/**\n * Fundamental flex layout primitive — the web equivalent of `GtkBox`.\n *\n * Arranges children in a single row or column with consistent spacing\n * following the GNOME Human Interface Guidelines spacing scale:\n *\n * | Token | px | Use |\n * |-------|----|-----|\n * | tight | 3  | Dense UI, icon + label pairs |\n * | standard | 6 | Default inner spacing |\n * | medium | 12 | Between related groups |\n * | large | 18 | Between loosely related sections |\n * | section | 24 | Page-level section gaps |\n * | loose | 32 | Large content separation |\n * | jumbo | 48 | Hero / splash spacing |\n *\n * **Usage:**\n * ```tsx\n * // Vertical section (heading + content)\n * <Box spacing={8}>\n *   <Text variant=\"caption-heading\" color=\"dim\">Devices</Text>\n *   <BoxedList>…</BoxedList>\n * </Box>\n *\n * // Horizontal icon + label\n * <Box orientation=\"horizontal\" spacing={6} align=\"center\">\n *   <Icon name=\"folder\" />\n *   <Text>Documents</Text>\n * </Box>\n * ```\n *\n * @see https://developer.gnome.org/hig/guidelines/spacing.html\n */\nexport function Box({\n  orientation = 'vertical',\n  spacing = 6,\n  align,\n  justify = 'start',\n  padding,\n  className,\n  style,\n  children,\n  ...props\n}: BoxProps) {\n  const defaultAlign: BoxAlign = orientation === 'horizontal' ? 'center' : 'stretch';\n\n  const resolvedStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: typeof spacing === 'number' ? `${spacing}px` : spacing,\n    alignItems: align ?? defaultAlign,\n    justifyContent: justify,\n    ...(padding !== undefined && {\n      padding: typeof padding === 'number' ? `${padding}px` : padding,\n    }),\n    ...style,\n  };\n\n  return (\n    <div className={className} style={resolvedStyle} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;AAkFA,SAAgB,EAAI,EAClB,iBAAc,YACd,aAAU,GACV,UACA,aAAU,SACV,YACA,cACA,UACA,aACA,GAAG,KACQ;CACX,IAAM,IAAyB,MAAgB,eAAe,WAAW;AAczE,QACE,kBAAC,OAAD;EAAgB;EAAW,OAbQ;GACnC,SAAS;GACT,eAAe,MAAgB,eAAe,QAAQ;GACtD,KAAK,OAAO,KAAY,WAAW,GAAG,EAAQ,MAAM;GACpD,YAAY,KAAS;GACrB,gBAAgB;GAChB,GAAI,MAAY,KAAA,KAAa,EAC3B,SAAS,OAAO,KAAY,WAAW,GAAG,EAAQ,MAAM,GACzD;GACD,GAAG;GACJ;EAGkD,GAAI;EAClD;EACG,CAAA"}

package/dist/components/Box/index.d.ts

@@ -1,2 +1,2 @@
+export type { BoxAlign, BoxJustify, BoxOrientation, BoxPadding, BoxProps, BoxSpacing } from './Box';
 export { Box } from './Box';
-export type { BoxProps, BoxOrientation, BoxAlign, BoxJustify, BoxSpacing, BoxPadding } from './Box';

package/dist/components/BoxedList/BoxedList.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Separator/Separator.cjs`),t=require(`./BoxedList.module.css.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);function i({children:i,variant:a=`default`,className:o,...s}){let c=n.Children.toArray(i).filter(Boolean),l=a===`separate`;return(0,r.jsx)(`ul`,{role:`list`,className:[t.default.list,l?t.default.separate:null,o].filter(Boolean).join(` `),...s,children:c.map((n,i)=>(0,r.jsxs)(`li`,{className:l?t.default.separateItem:t.default.item,children:[!l&&i>0&&(0,r.jsx)(e.Separator,{"aria-hidden":`true`}),n]},i))})}exports.BoxedList=i;
+const e=require(`../Separator/Separator.cjs`),t=require(`./BoxedList.module.css.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);function i({children:i,variant:a=`default`,className:o,...s}){let c=n.Children.toArray(i).filter(Boolean),l=a===`separate`;return(0,r.jsx)(`ul`,{className:[t.default.list,l?t.default.separate:null,o].filter(Boolean).join(` `),...s,children:c.map((n,i)=>(0,r.jsxs)(`li`,{className:l?t.default.separateItem:t.default.item,children:[!l&&i>0&&(0,r.jsx)(e.Separator,{"aria-hidden":`true`}),n]},i))})}exports.BoxedList=i;
 //# sourceMappingURL=BoxedList.cjs.map

package/dist/components/BoxedList/BoxedList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BoxedList.cjs","names":[],"sources":["../../../src/components/BoxedList/BoxedList.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode } from \"react\";\nimport { Separator } from \"../Separator\";\nimport styles from \"./BoxedList.module.css\";\n\nexport type BoxedListVariant = \"default\" | \"separate\";\n\nexport interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {\n  children?: ReactNode;\n  /**\n   * `\"separate\"` renders each child as its own standalone rounded card\n   * instead of a single joined list — mirrors `.boxed-list-separate`.\n   * Use when rows are independent items rather than a continuous group.\n   */\n  variant?: BoxedListVariant;\n}\n\n/**\n * Rounded bordered list — the most common container pattern in GNOME apps.\n *\n * Mirrors the Adwaita `.boxed-list` style applied to a `GtkListBox`.\n * Separators between rows are inserted automatically.\n * Each child is wrapped in a `<li>` — use with `ActionRow` or any row-shaped element.\n *\n * Use `variant=\"separate\"` to render each child as its own card, mirroring\n * the `.boxed-list-separate` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#boxed-lists-cards\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function BoxedList({ children, variant = \"default\", className, ...props }: BoxedListProps) {\n  const items = Children.toArray(children).filter(Boolean);\n  const separate = variant === \"separate\";\n\n  return (\n    <ul\n      role=\"list\"\n      className={[styles.list, separate ? styles.separate : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {items.map((child, i) => (\n        <li key={i} className={separate ? styles.separateItem : styles.item}>\n          {!separate && i > 0 && <Separator aria-hidden=\"true\" />}\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":"4IA6BA,SAAgB,EAAU,CAAE,WAAU,UAAU,UAAW,YAAW,GAAG,GAAyB,CAChG,IAAM,EAAQ,EAAA,SAAS,QAAQ,EAAS,CAAC,OAAO,QAAQ,CAClD,EAAW,IAAY,WAE7B,OACE,EAAA,EAAA,KAAC,KAAD,CACE,KAAK,OACL,UAAW,CAAC,EAAA,QAAO,KAAM,EAAW,EAAA,QAAO,SAAW,KAAM,EAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAEH,EAAM,KAAK,EAAO,KACjB,EAAA,EAAA,MAAC,KAAD,CAAY,UAAW,EAAW,EAAA,QAAO,aAAe,EAAA,QAAO,cAA/D,CACG,CAAC,GAAY,EAAI,IAAK,EAAA,EAAA,KAAC,EAAA,UAAD,CAAW,cAAY,OAAS,CAAA,CACtD,EACE,EAHI,EAGJ,CACL,CACC,CAAA"}
+{"version":3,"file":"BoxedList.cjs","names":[],"sources":["../../../src/components/BoxedList/BoxedList.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { Separator } from '../Separator';\n\nimport styles from './BoxedList.module.css';\n\nexport type BoxedListVariant = 'default' | 'separate';\n\nexport interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {\n  children?: ReactNode;\n  /**\n   * `\"separate\"` renders each child as its own standalone rounded card\n   * instead of a single joined list — mirrors `.boxed-list-separate`.\n   * Use when rows are independent items rather than a continuous group.\n   */\n  variant?: BoxedListVariant;\n}\n\n/**\n * Rounded bordered list — the most common container pattern in GNOME apps.\n *\n * Mirrors the Adwaita `.boxed-list` style applied to a `GtkListBox`.\n * Separators between rows are inserted automatically.\n * Each child is wrapped in a `<li>` — use with `ActionRow` or any row-shaped element.\n *\n * Use `variant=\"separate\"` to render each child as its own card, mirroring\n * the `.boxed-list-separate` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#boxed-lists-cards\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function BoxedList({ children, variant = 'default', className, ...props }: BoxedListProps) {\n  const items = Children.toArray(children).filter(Boolean);\n  const separate = variant === 'separate';\n\n  return (\n    <ul\n      className={[styles.list, separate ? styles.separate : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {items.map((child, i) => (\n        <li key={i} className={separate ? styles.separateItem : styles.item}>\n          {!separate && i > 0 && <Separator aria-hidden=\"true\" />}\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":"4IA+BA,SAAgB,EAAU,CAAE,WAAU,UAAU,UAAW,YAAW,GAAG,GAAyB,CAChG,IAAM,EAAQ,EAAA,SAAS,QAAQ,EAAS,CAAC,OAAO,QAAQ,CAClD,EAAW,IAAY,WAE7B,OACE,EAAA,EAAA,KAAC,KAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAW,EAAA,QAAO,SAAW,KAAM,EAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAEH,EAAM,KAAK,EAAO,KACjB,EAAA,EAAA,MAAC,KAAD,CAAY,UAAW,EAAW,EAAA,QAAO,aAAe,EAAA,QAAO,cAA/D,CACG,CAAC,GAAY,EAAI,IAAK,EAAA,EAAA,KAAC,EAAA,UAAD,CAAW,cAAY,OAAS,CAAA,CACtD,EACE,EAHI,EAGJ,CACL,CACC,CAAA"}

package/dist/components/BoxedList/BoxedList.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export type BoxedListVariant = "default" | "separate";
+export type BoxedListVariant = 'default' | 'separate';
 export interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {
     children?: ReactNode;
     /**

package/dist/components/BoxedList/BoxedList.js

@@ -6,7 +6,6 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
 function a({ children: a, variant: o = "default", className: s, ...c }) {
 	let l = n.toArray(a).filter(Boolean), u = o === "separate";
 	return /* @__PURE__ */ r("ul", {
-		role: "list",
 		className: [
 			t.list,
 			u ? t.separate : null,

package/dist/components/BoxedList/BoxedList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BoxedList.js","names":[],"sources":["../../../src/components/BoxedList/BoxedList.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode } from \"react\";\nimport { Separator } from \"../Separator\";\nimport styles from \"./BoxedList.module.css\";\n\nexport type BoxedListVariant = \"default\" | \"separate\";\n\nexport interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {\n  children?: ReactNode;\n  /**\n   * `\"separate\"` renders each child as its own standalone rounded card\n   * instead of a single joined list — mirrors `.boxed-list-separate`.\n   * Use when rows are independent items rather than a continuous group.\n   */\n  variant?: BoxedListVariant;\n}\n\n/**\n * Rounded bordered list — the most common container pattern in GNOME apps.\n *\n * Mirrors the Adwaita `.boxed-list` style applied to a `GtkListBox`.\n * Separators between rows are inserted automatically.\n * Each child is wrapped in a `<li>` — use with `ActionRow` or any row-shaped element.\n *\n * Use `variant=\"separate\"` to render each child as its own card, mirroring\n * the `.boxed-list-separate` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#boxed-lists-cards\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function BoxedList({ children, variant = \"default\", className, ...props }: BoxedListProps) {\n  const items = Children.toArray(children).filter(Boolean);\n  const separate = variant === \"separate\";\n\n  return (\n    <ul\n      role=\"list\"\n      className={[styles.list, separate ? styles.separate : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {items.map((child, i) => (\n        <li key={i} className={separate ? styles.separateItem : styles.item}>\n          {!separate && i > 0 && <Separator aria-hidden=\"true\" />}\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";;;;;AA6BA,SAAgB,EAAU,EAAE,aAAU,aAAU,WAAW,cAAW,GAAG,KAAyB;CAChG,IAAM,IAAQ,EAAS,QAAQ,EAAS,CAAC,OAAO,QAAQ,EAClD,IAAW,MAAY;AAE7B,QACE,kBAAC,MAAD;EACE,MAAK;EACL,WAAW;GAAC,EAAO;GAAM,IAAW,EAAO,WAAW;GAAM;GAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAEH,EAAM,KAAK,GAAO,MACjB,kBAAC,MAAD;GAAY,WAAW,IAAW,EAAO,eAAe,EAAO;aAA/D,CACG,CAAC,KAAY,IAAI,KAAK,kBAAC,GAAD,EAAW,eAAY,QAAS,CAAA,EACtD,EACE;KAHI,EAGJ,CACL;EACC,CAAA"}
+{"version":3,"file":"BoxedList.js","names":[],"sources":["../../../src/components/BoxedList/BoxedList.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { Separator } from '../Separator';\n\nimport styles from './BoxedList.module.css';\n\nexport type BoxedListVariant = 'default' | 'separate';\n\nexport interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {\n  children?: ReactNode;\n  /**\n   * `\"separate\"` renders each child as its own standalone rounded card\n   * instead of a single joined list — mirrors `.boxed-list-separate`.\n   * Use when rows are independent items rather than a continuous group.\n   */\n  variant?: BoxedListVariant;\n}\n\n/**\n * Rounded bordered list — the most common container pattern in GNOME apps.\n *\n * Mirrors the Adwaita `.boxed-list` style applied to a `GtkListBox`.\n * Separators between rows are inserted automatically.\n * Each child is wrapped in a `<li>` — use with `ActionRow` or any row-shaped element.\n *\n * Use `variant=\"separate\"` to render each child as its own card, mirroring\n * the `.boxed-list-separate` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#boxed-lists-cards\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function BoxedList({ children, variant = 'default', className, ...props }: BoxedListProps) {\n  const items = Children.toArray(children).filter(Boolean);\n  const separate = variant === 'separate';\n\n  return (\n    <ul\n      className={[styles.list, separate ? styles.separate : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {items.map((child, i) => (\n        <li key={i} className={separate ? styles.separateItem : styles.item}>\n          {!separate && i > 0 && <Separator aria-hidden=\"true\" />}\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";;;;;AA+BA,SAAgB,EAAU,EAAE,aAAU,aAAU,WAAW,cAAW,GAAG,KAAyB;CAChG,IAAM,IAAQ,EAAS,QAAQ,EAAS,CAAC,OAAO,QAAQ,EAClD,IAAW,MAAY;AAE7B,QACE,kBAAC,MAAD;EACE,WAAW;GAAC,EAAO;GAAM,IAAW,EAAO,WAAW;GAAM;GAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAEH,EAAM,KAAK,GAAO,MACjB,kBAAC,MAAD;GAAY,WAAW,IAAW,EAAO,eAAe,EAAO;aAA/D,CACG,CAAC,KAAY,IAAI,KAAK,kBAAC,GAAD,EAAW,eAAY,QAAS,CAAA,EACtD,EACE;KAHI,EAGJ,CACL;EACC,CAAA"}

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

@@ -1,2 +1,2 @@
-var e={list:`_list_1m4lm_3`,item:`_item_1m4lm_16`,separate:`_separate_1m4lm_37`,separateItem:`_separateItem_1m4lm_47`,divider:`_divider_1m4lm_69`};exports.default=e;
+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;
 //# 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\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\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":""}

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

@@ -1,9 +1,9 @@
 var e = {
-	list: "_list_1m4lm_3",
-	item: "_item_1m4lm_16",
-	separate: "_separate_1m4lm_37",
-	separateItem: "_separateItem_1m4lm_47",
-	divider: "_divider_1m4lm_69"
+	list: "_list_ltjeu_3",
+	item: "_item_ltjeu_16",
+	separate: "_separate_ltjeu_36",
+	separateItem: "_separateItem_ltjeu_46",
+	divider: "_divider_ltjeu_68"
 };
 //#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\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\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":""}

package/dist/components/BoxedList/index.d.ts

@@ -1,2 +1,2 @@
-export { BoxedList } from './BoxedList';
 export type { BoxedListProps, BoxedListVariant } from './BoxedList';
+export { BoxedList } from './BoxedList';

package/dist/components/BreakpointBin/BreakpointBin.cjs

@@ -1,2 +1,2 @@
-let e=require(`react`),t=require(`react/jsx-runtime`);function 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()},[JSON.stringify(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`);function 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;
 //# 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  useState,\n  useEffect,\n  useRef,\n  type HTMLAttributes,\n  type ReactNode,\n  type CSSProperties,\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\n  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 function 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    if (!el) return;\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      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      if (!entry) return;\n      // contentBoxSize is more reliable than contentRect for inline-size\n      const width =\n        entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n      setState(evaluate(width));\n    });\n\n    observer.observe(el);\n    return () => observer.disconnect();\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(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":"sDAiFA,SAAgB,EAAc,CAC5B,cACA,WACA,YACA,QACA,GAAG,GACkB,CACrB,IAAM,GAAA,EAAA,EAAA,QAAsC,KAAK,CAC3C,CAAC,EAAO,IAAA,EAAA,EAAA,UAAyC,CACrD,iBAAkB,KAClB,MAAO,EACR,CAAC,CAsCF,OApCA,EAAA,EAAA,eAAgB,CACd,IAAM,EAAK,EAAa,QACxB,GAAI,CAAC,EAAI,OAGT,IAAM,EAAS,CAAC,GAAG,EAAY,CAAC,MAAM,EAAG,IAAM,EAAE,SAAW,EAAE,SAAS,CAEjE,EAAY,IAET,CAAE,kBADK,EAAO,KAAM,GAAO,GAAS,EAAG,SAAS,EAAI,OACzB,MAAQ,KAAM,QAAO,EAIzD,EAAS,EAAS,EAAG,YAAY,CAAC,CAElC,IAAM,EAAW,IAAI,eAAgB,GAAY,CAC/C,IAAM,EAAQ,EAAQ,GACjB,GAIL,EAAS,EADP,EAAM,iBAAiB,IAAI,YAAc,EAAM,YAAY,MACrC,CAAC,EACzB,CAGF,OADA,EAAS,QAAQ,EAAG,KACP,EAAS,YAAY,EAEjC,CAAC,KAAK,UAAU,EAAY,CAAC,CAAC,EAU/B,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACM,YACX,MAXkC,CAGpC,SAAU,EACV,GAAG,EACJ,CAOG,kBAAiB,EAAM,kBAAoB,IAAA,GAC3C,GAAI,WAEH,EAAS,EAAM,CACZ,CAAA"}
+{"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 function 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,SAAgB,EAAc,CAC5B,cACA,WACA,YACA,QACA,GAAG,GACkB,CACrB,IAAM,GAAA,EAAA,EAAA,QAAsC,KAAK,CAC3C,CAAC,EAAO,IAAA,EAAA,EAAA,UAAyC,CACrD,iBAAkB,KAClB,MAAO,EACR,CAAC,CA8CF,OA5CA,EAAA,EAAA,eAAgB,CACd,IAAM,EAAK,EAAa,QAExB,GAAI,CAAC,EACH,OAIF,IAAM,EAAS,CAAC,GAAG,EAAY,CAAC,MAAM,EAAG,IAAM,EAAE,SAAW,EAAE,SAAS,CAEjE,EAAY,IAGT,CAAE,kBAFK,EAAO,KAAM,GAAO,GAAS,EAAG,SAAS,EAAI,OAEzB,MAAQ,KAAM,QAAO,EAIzD,EAAS,EAAS,EAAG,YAAY,CAAC,CAElC,IAAM,EAAW,IAAI,eAAgB,GAAY,CAC/C,IAAM,EAAQ,EAAQ,GAEjB,GAOL,EAAS,EAFK,EAAM,iBAAiB,IAAI,YAAc,EAAM,YAAY,MAEjD,CAAC,EACzB,CAIF,OAFA,EAAS,QAAQ,EAAG,KAEP,EAAS,YAAY,EACjC,CAAC,EAAY,CAAC,EAUf,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACM,YACX,MAXkC,CAGpC,SAAU,EACV,GAAG,EACJ,CAOG,kBAAiB,EAAM,kBAAoB,IAAA,GAC3C,GAAI,WAEH,EAAS,EAAM,CACZ,CAAA"}

package/dist/components/BreakpointBin/BreakpointBin.d.ts

@@ -20,7 +20,7 @@ export interface BreakpointBinState {
     /** Current container width in px (from `ResizeObserver`). */
     width: number;
 }
-export interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+export interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /**
      * Breakpoint definitions sorted by `maxWidth` ascending.
      * The active breakpoint is the smallest `maxWidth` ≥ the container's current width.

package/dist/components/BreakpointBin/BreakpointBin.js

@@ -19,7 +19,7 @@ function i({ breakpoints: i, children: a, className: o, style: s, ...c }) {
 			t && d(n(t.contentBoxSize?.[0]?.inlineSize ?? t.contentRect.width));
 		});
 		return r.observe(e), () => r.disconnect();
-	}, [JSON.stringify(i)]), /* @__PURE__ */ r("div", {
+	}, [i]), /* @__PURE__ */ r("div", {
 		ref: l,
 		className: o,
 		style: {

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

@@ -1 +1 @@
-{"version":3,"file":"BreakpointBin.js","names":[],"sources":["../../../src/components/BreakpointBin/BreakpointBin.tsx"],"sourcesContent":["import {\n  useState,\n  useEffect,\n  useRef,\n  type HTMLAttributes,\n  type ReactNode,\n  type CSSProperties,\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\n  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 function 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    if (!el) return;\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      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      if (!entry) return;\n      // contentBoxSize is more reliable than contentRect for inline-size\n      const width =\n        entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n      setState(evaluate(width));\n    });\n\n    observer.observe(el);\n    return () => observer.disconnect();\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(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":";;;AAiFA,SAAgB,EAAc,EAC5B,gBACA,aACA,cACA,UACA,GAAG,KACkB;CACrB,IAAM,IAAe,EAAuB,KAAK,EAC3C,CAAC,GAAO,KAAY,EAA6B;EACrD,kBAAkB;EAClB,OAAO;EACR,CAAC;AAsCF,QApCA,QAAgB;EACd,IAAM,IAAK,EAAa;AACxB,MAAI,CAAC,EAAI;EAGT,IAAM,IAAS,CAAC,GAAG,EAAY,CAAC,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,SAAS,EAEjE,KAAY,OAET;GAAE,mBADK,EAAO,MAAM,MAAO,KAAS,EAAG,SAAS,IAAI,OACzB,QAAQ;GAAM;GAAO;AAIzD,IAAS,EAAS,EAAG,YAAY,CAAC;EAElC,IAAM,IAAW,IAAI,gBAAgB,MAAY;GAC/C,IAAM,IAAQ,EAAQ;AACjB,QAIL,EAAS,EADP,EAAM,iBAAiB,IAAI,cAAc,EAAM,YAAY,MACrC,CAAC;IACzB;AAGF,SADA,EAAS,QAAQ,EAAG,QACP,EAAS,YAAY;IAEjC,CAAC,KAAK,UAAU,EAAY,CAAC,CAAC,EAU/B,kBAAC,OAAD;EACE,KAAK;EACM;EACX,OAXkC;GAGpC,UAAU;GACV,GAAG;GACJ;EAOG,mBAAiB,EAAM,oBAAoB,KAAA;EAC3C,GAAI;YAEH,EAAS,EAAM;EACZ,CAAA"}
+{"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 function 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,SAAgB,EAAc,EAC5B,gBACA,aACA,cACA,UACA,GAAG,KACkB;CACrB,IAAM,IAAe,EAAuB,KAAK,EAC3C,CAAC,GAAO,KAAY,EAA6B;EACrD,kBAAkB;EAClB,OAAO;EACR,CAAC;AA8CF,QA5CA,QAAgB;EACd,IAAM,IAAK,EAAa;AAExB,MAAI,CAAC,EACH;EAIF,IAAM,IAAS,CAAC,GAAG,EAAY,CAAC,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,SAAS,EAEjE,KAAY,OAGT;GAAE,mBAFK,EAAO,MAAM,MAAO,KAAS,EAAG,SAAS,IAAI,OAEzB,QAAQ;GAAM;GAAO;AAIzD,IAAS,EAAS,EAAG,YAAY,CAAC;EAElC,IAAM,IAAW,IAAI,gBAAgB,MAAY;GAC/C,IAAM,IAAQ,EAAQ;AAEjB,QAOL,EAAS,EAFK,EAAM,iBAAiB,IAAI,cAAc,EAAM,YAAY,MAEjD,CAAC;IACzB;AAIF,SAFA,EAAS,QAAQ,EAAG,QAEP,EAAS,YAAY;IACjC,CAAC,EAAY,CAAC,EAUf,kBAAC,OAAD;EACE,KAAK;EACM;EACX,OAXkC;GAGpC,UAAU;GACV,GAAG;GACJ;EAOG,mBAAiB,EAAM,oBAAoB,KAAA;EAC3C,GAAI;YAEH,EAAS,EAAM;EACZ,CAAA"}

package/dist/components/BreakpointBin/index.d.ts

@@ -1,2 +1,2 @@
+export type { BreakpointBinProps, BreakpointBinState, BreakpointDefinition, } from './BreakpointBin';
 export { BreakpointBin } from './BreakpointBin';
-export type { BreakpointBinProps, BreakpointDefinition, BreakpointBinState, } from './BreakpointBin';

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

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport styles from \"./Button.module.css\";\n\nexport type ButtonVariant = \"default\" | \"suggested\" | \"destructive\" | \"flat\" | \"raised\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\nexport type ButtonShape = \"default\" | \"pill\" | \"circular\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style of the button. Follows GNOME HIG button types. */\n  variant?: ButtonVariant;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /** Shape of the button. \"pill\" for primary actions in open space, \"circular\" for icon-only buttons. */\n  shape?: ButtonShape;\n  /**\n   * Dark semi-transparent overlay style for buttons placed on top of\n   * media or images — mirrors the `.osd` style class.\n   */\n  osd?: boolean;\n  /** Icon placed before the label. */\n  leadingIcon?: ReactNode;\n  /** Icon placed after the label. */\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Button component following GNOME Human Interface Guidelines.\n *\n * Variants:\n * - `default`     — Standard action, flat appearance with subtle border.\n * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.\n * - `destructive` — Dangerous or irreversible action (red). Use sparingly.\n * - `flat`        — No border or background; ideal for header bars and toolbars.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/buttons.html\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({\n  variant = \"default\",\n  size = \"md\",\n  shape = \"default\",\n  osd = false,\n  leadingIcon,\n  trailingIcon,\n  children,\n  className,\n  ...props\n}: ButtonProps, ref) {\n  const classes = [\n    styles.button,\n    styles[variant],\n    size !== \"md\" ? styles[size] : null,\n    shape !== \"default\" ? styles[shape] : null,\n    osd ? styles.osd : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button ref={ref} className={classes} {...props}>\n      {leadingIcon}\n      {children}\n      {trailingIcon}\n    </button>\n  );\n});\n"],"mappings":"iGAqCA,IAAa,GAAA,EAAA,EAAA,YAAoD,SAAgB,CAC/E,UAAU,UACV,OAAO,KACP,QAAQ,UACR,MAAM,GACN,cACA,eACA,WACA,YACA,GAAG,GACW,EAAK,CAYnB,OACE,EAAA,EAAA,MAAC,SAAD,CAAa,MAAK,UAZJ,CACd,EAAA,QAAO,OACP,EAAA,QAAO,GACP,IAAS,KAAsB,KAAf,EAAA,QAAO,GACvB,IAAU,UAA4B,KAAhB,EAAA,QAAO,GAC7B,EAAM,EAAA,QAAO,IAAM,KACnB,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAG4B,GAAI,WAA1C,CACG,EACA,EACA,EACM,IAEX"}
+{"version":3,"file":"Button.cjs","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react';\n\nimport styles from './Button.module.css';\n\nexport type ButtonVariant = 'default' | 'suggested' | 'destructive' | 'flat' | 'raised';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonShape = 'default' | 'pill' | 'circular';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style of the button. Follows GNOME HIG button types. */\n  variant?: ButtonVariant;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /** Shape of the button. \"pill\" for primary actions in open space, \"circular\" for icon-only buttons. */\n  shape?: ButtonShape;\n  /**\n   * Dark semi-transparent overlay style for buttons placed on top of\n   * media or images — mirrors the `.osd` style class.\n   */\n  osd?: boolean;\n  /** Icon placed before the label. */\n  leadingIcon?: ReactNode;\n  /** Icon placed after the label. */\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Button component following GNOME Human Interface Guidelines.\n *\n * Variants:\n * - `default`     — Standard action, flat appearance with subtle border.\n * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.\n * - `destructive` — Dangerous or irreversible action (red). Use sparingly.\n * - `flat`        — No border or background; ideal for header bars and toolbars.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/buttons.html\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'default',\n    size = 'md',\n    shape = 'default',\n    osd = false,\n    leadingIcon,\n    trailingIcon,\n    children,\n    className,\n    ...props\n  }: ButtonProps,\n  ref,\n) {\n  const classes = [\n    styles.button,\n    styles[variant],\n    size !== 'md' ? styles[size] : null,\n    shape !== 'default' ? styles[shape] : null,\n    osd ? styles.osd : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button ref={ref} className={classes} {...props}>\n      {leadingIcon}\n      {children}\n      {trailingIcon}\n    </button>\n  );\n});\n"],"mappings":"iGAsCA,IAAa,GAAA,EAAA,EAAA,YAAoD,SAC/D,CACE,UAAU,UACV,OAAO,KACP,QAAQ,UACR,MAAM,GACN,cACA,eACA,WACA,YACA,GAAG,GAEL,EACA,CAYA,OACE,EAAA,EAAA,MAAC,SAAD,CAAa,MAAK,UAZJ,CACd,EAAA,QAAO,OACP,EAAA,QAAO,GACP,IAAS,KAAsB,KAAf,EAAA,QAAO,GACvB,IAAU,UAA4B,KAAhB,EAAA,QAAO,GAC7B,EAAM,EAAA,QAAO,IAAM,KACnB,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAG4B,GAAI,WAA1C,CACG,EACA,EACA,EACM,IAEX"}

package/dist/components/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
-export type ButtonVariant = "default" | "suggested" | "destructive" | "flat" | "raised";
-export type ButtonSize = "sm" | "md" | "lg";
-export type ButtonShape = "default" | "pill" | "circular";
+export type ButtonVariant = 'default' | 'suggested' | 'destructive' | 'flat' | 'raised';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonShape = 'default' | 'pill' | 'circular';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Visual style of the button. Follows GNOME HIG button types. */
     variant?: ButtonVariant;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport styles from \"./Button.module.css\";\n\nexport type ButtonVariant = \"default\" | \"suggested\" | \"destructive\" | \"flat\" | \"raised\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\nexport type ButtonShape = \"default\" | \"pill\" | \"circular\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style of the button. Follows GNOME HIG button types. */\n  variant?: ButtonVariant;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /** Shape of the button. \"pill\" for primary actions in open space, \"circular\" for icon-only buttons. */\n  shape?: ButtonShape;\n  /**\n   * Dark semi-transparent overlay style for buttons placed on top of\n   * media or images — mirrors the `.osd` style class.\n   */\n  osd?: boolean;\n  /** Icon placed before the label. */\n  leadingIcon?: ReactNode;\n  /** Icon placed after the label. */\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Button component following GNOME Human Interface Guidelines.\n *\n * Variants:\n * - `default`     — Standard action, flat appearance with subtle border.\n * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.\n * - `destructive` — Dangerous or irreversible action (red). Use sparingly.\n * - `flat`        — No border or background; ideal for header bars and toolbars.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/buttons.html\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({\n  variant = \"default\",\n  size = \"md\",\n  shape = \"default\",\n  osd = false,\n  leadingIcon,\n  trailingIcon,\n  children,\n  className,\n  ...props\n}: ButtonProps, ref) {\n  const classes = [\n    styles.button,\n    styles[variant],\n    size !== \"md\" ? styles[size] : null,\n    shape !== \"default\" ? styles[shape] : null,\n    osd ? styles.osd : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button ref={ref} className={classes} {...props}>\n      {leadingIcon}\n      {children}\n      {trailingIcon}\n    </button>\n  );\n});\n"],"mappings":";;;;AAqCA,IAAa,IAAS,EAA2C,SAAgB,EAC/E,aAAU,WACV,UAAO,MACP,WAAQ,WACR,SAAM,IACN,gBACA,iBACA,aACA,cACA,GAAG,KACW,GAAK;AAYnB,QACE,kBAAC,UAAD;EAAa;EAAK,WAZJ;GACd,EAAO;GACP,EAAO;GACP,MAAS,OAAsB,OAAf,EAAO;GACvB,MAAU,YAA4B,OAAhB,EAAO;GAC7B,IAAM,EAAO,MAAM;GACnB;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EAG4B,GAAI;YAA1C;GACG;GACA;GACA;GACM;;EAEX"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react';\n\nimport styles from './Button.module.css';\n\nexport type ButtonVariant = 'default' | 'suggested' | 'destructive' | 'flat' | 'raised';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonShape = 'default' | 'pill' | 'circular';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style of the button. Follows GNOME HIG button types. */\n  variant?: ButtonVariant;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /** Shape of the button. \"pill\" for primary actions in open space, \"circular\" for icon-only buttons. */\n  shape?: ButtonShape;\n  /**\n   * Dark semi-transparent overlay style for buttons placed on top of\n   * media or images — mirrors the `.osd` style class.\n   */\n  osd?: boolean;\n  /** Icon placed before the label. */\n  leadingIcon?: ReactNode;\n  /** Icon placed after the label. */\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Button component following GNOME Human Interface Guidelines.\n *\n * Variants:\n * - `default`     — Standard action, flat appearance with subtle border.\n * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.\n * - `destructive` — Dangerous or irreversible action (red). Use sparingly.\n * - `flat`        — No border or background; ideal for header bars and toolbars.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/buttons.html\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'default',\n    size = 'md',\n    shape = 'default',\n    osd = false,\n    leadingIcon,\n    trailingIcon,\n    children,\n    className,\n    ...props\n  }: ButtonProps,\n  ref,\n) {\n  const classes = [\n    styles.button,\n    styles[variant],\n    size !== 'md' ? styles[size] : null,\n    shape !== 'default' ? styles[shape] : null,\n    osd ? styles.osd : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button ref={ref} className={classes} {...props}>\n      {leadingIcon}\n      {children}\n      {trailingIcon}\n    </button>\n  );\n});\n"],"mappings":";;;;AAsCA,IAAa,IAAS,EAA2C,SAC/D,EACE,aAAU,WACV,UAAO,MACP,WAAQ,WACR,SAAM,IACN,gBACA,iBACA,aACA,cACA,GAAG,KAEL,GACA;AAYA,QACE,kBAAC,UAAD;EAAa;EAAK,WAZJ;GACd,EAAO;GACP,EAAO;GACP,MAAS,OAAsB,OAAf,EAAO;GACvB,MAAU,YAA4B,OAAhB,EAAO;GAC7B,IAAM,EAAO,MAAM;GACnB;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EAG4B,GAAI;YAA1C;GACG;GACA;GACA;GACM;;EAEX"}

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

@@ -1,2 +1,2 @@
-var e={button:`_button_mln0u_1`,pill:`_pill_mln0u_52`,circular:`_circular_mln0u_59`,default:`_default_mln0u_71`,suggested:`_suggested_mln0u_105`,destructive:`_destructive_mln0u_120`,flat:`_flat_mln0u_135`,raised:`_raised_mln0u_150`,osd:`_osd_mln0u_184`,sm:`_sm_mln0u_228`,lg:`_lg_mln0u_243`};exports.default=e;
+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;
 //# 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)) 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) !important;\n  color: rgba(255, 255, 255, 0.95) !important;\n  border-color: rgba(255, 255, 255, 0.12) !important;\n  box-shadow: none !important;\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) !important;\n  filter: none;\n}\n\n.osd:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.85) !important;\n  filter: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .osd {\n    background-color: rgba(0, 0, 0, 0.65) !important;\n    border-color: rgba(255, 255, 255, 0.1) !important;\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)) var(--gnome-focus-ring-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width) + 1px) 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, #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":""}

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

@@ -1,15 +1,15 @@
 var e = {
-	button: "_button_mln0u_1",
-	pill: "_pill_mln0u_52",
-	circular: "_circular_mln0u_59",
-	default: "_default_mln0u_71",
-	suggested: "_suggested_mln0u_105",
-	destructive: "_destructive_mln0u_120",
-	flat: "_flat_mln0u_135",
-	raised: "_raised_mln0u_150",
-	osd: "_osd_mln0u_184",
-	sm: "_sm_mln0u_228",
-	lg: "_lg_mln0u_243"
+	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"
 };
 //#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)) 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) !important;\n  color: rgba(255, 255, 255, 0.95) !important;\n  border-color: rgba(255, 255, 255, 0.12) !important;\n  box-shadow: none !important;\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) !important;\n  filter: none;\n}\n\n.osd:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.85) !important;\n  filter: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .osd {\n    background-color: rgba(0, 0, 0, 0.65) !important;\n    border-color: rgba(255, 255, 255, 0.1) !important;\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)) var(--gnome-focus-ring-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width) + 1px) 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, #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":""}

package/dist/components/Button/index.d.ts

@@ -1,2 +1,2 @@
+export type { ButtonProps, ButtonShape, ButtonSize, ButtonVariant } from './Button';
 export { Button } from './Button';
-export type { ButtonProps, ButtonVariant, ButtonSize, ButtonShape } from './Button';