@gnome-ui/react 1.48.0 → 1.49.1

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

@@ -1 +1 @@
-{"version":3,"file":"InlineViewSwitcher.module.css.cjs","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.module.css"],"sourcesContent":["/* ─── Switcher container ────────────────────────────────────────────────────── */\n\n.switcher {\n  display: inline-flex;\n  align-items: stretch;\n  position: relative;\n}\n\n/* ─── Sliding indicator ─────────────────────────────────────────────────────── */\n\n.indicator {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  left: 0;\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  pointer-events: none;\n  z-index: 0;\n  transition:\n    transform 160ms cubic-bezier(0.34, 1.2, 0.64, 1),\n    width 160ms var(--gnome-easing-default, ease);\n}\n\n/* ─── Item base ─────────────────────────────────────────────────────────────── */\n\n.item {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: 4px var(--gnome-space-2, 12px);\n  min-height: 28px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n\n  position: relative;\n  z-index: 1;\n}\n\n.iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.itemLabel {\n  line-height: 1;\n}\n\n/* ─── Variant: default ──────────────────────────────────────────────────────── */\n\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.default .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n}\n\n.default .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.default .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.default .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.default .indicator {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  box-shadow: inset 0 0 0 1px\n    color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 40%, transparent);\n}\n\n.default .active {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\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 .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .default .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .default .indicator {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    box-shadow: inset 0 0 0 1px\n      color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  }\n\n  .default .active {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: flat ─────────────────────────────────────────────────────────── */\n\n.flat {\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  border-radius: var(--gnome-radius-md);\n  padding: 2px;\n  gap: 2px;\n}\n\n.flat .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.6));\n}\n\n.flat .item:hover:not(:disabled):not(.active) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat .item:active:not(:disabled):not(.active) {\n  background-color: var(--gnome-active-overlay);\n}\n\n.flat .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.flat .indicator {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n}\n\n.flat .active {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .flat .item {\n    color: var(--gnome-window-fg-color, rgba(255, 255, 255, 0.6));\n  }\n\n  .flat .indicator {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n  }\n\n  .flat .active {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: round ────────────────────────────────────────────────────────── */\n\n.round {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.round .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 4px var(--gnome-space-2, 12px);\n}\n\n.round .iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.round .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.round .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.round .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.round .indicator {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-radius: var(--gnome-radius-pill, 9999px);\n}\n\n.round .active {\n  color: var(--gnome-accent-fg-color, #ffffff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .round {\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  .round .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .round .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .round .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Variant: pill ─────────────────────────────────────────────────────────── */\n\n.pill {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.06));\n  border: none;\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: none;\n  padding: 3px;\n  gap: 2px;\n}\n\n.pill .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 5px var(--gnome-space-2, 16px);\n  color: var(--gnome-window-fg-color);\n}\n\n.pill .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.pill .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n\n.pill .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.pill .indicator {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.12));\n  border-radius: var(--gnome-radius-pill, 9999px);\n  top: 3px;\n  bottom: 3px;\n}\n\n.pill .active {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n  .pill {\n    background-color: var(--gnome-hover-overlay, rgba(255, 255, 255, 0.08));\n  }\n\n  .pill .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .pill .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .pill .indicator {\n    background-color: var(--gnome-card-bg-color, #383838);\n    box-shadow: none;\n  }\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.item:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Overflow: detect (compact / menu) — must be display:flex so clientWidth is constrained ── */\n\n.overflowDetect {\n  display: flex;\n  min-width: 0;\n  width: 100%;\n}\n\n/* ─── Overflow: scroll ──────────────────────────────────────────────────────── */\n\n.overflowScroll {\n  max-width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n\n.overflowScroll::-webkit-scrollbar {\n  display: none;\n}\n\n.overflowScroll .item {\n  scroll-snap-align: start;\n  flex-shrink: 0;\n}\n\n/* ─── Overflow: compact (icon-only) ─────────────────────────────────────────── */\n\n.compact .itemLabel {\n  display: none;\n}\n\n/* ─── Overflow: menu trigger ────────────────────────────────────────────────── */\n\n.menuTrigger {\n  gap: var(--gnome-space-1, 6px);\n}\n\n.menuChevron {\n  font-size: 0.75rem;\n  opacity: 0.6;\n  margin-left: 2px;\n}\n\n/* ─── Overflow: menu BottomSheet list ───────────────────────────────────────── */\n\n.menuList {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n}\n\n.menuListItem {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-3, 16px);\n  border-radius: var(--gnome-radius-md);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: left;\n  width: 100%;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.menuListItem:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.menuListItem:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.menuListItem:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.menuListItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.menuListItemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.menuListItemLabel {\n  flex: 1;\n}\n\n.menuListItemCheck {\n  color: var(--gnome-accent-color, #3584e4);\n  font-size: 1rem;\n  flex-shrink: 0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .menuListItem:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .menuListItem:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .menuListItem:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #1e1e1e),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .menuListItemActive {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .menuListItemCheck {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .item,\n  .indicator,\n  .menuListItem {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"InlineViewSwitcher.module.css.cjs","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.module.css"],"sourcesContent":["/* ─── Switcher container ────────────────────────────────────────────────────── */\n\n.switcher {\n  display: inline-flex;\n  align-items: stretch;\n  position: relative;\n}\n\n/* ─── Sliding indicator ─────────────────────────────────────────────────────── */\n\n.indicator {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  left: 0;\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  pointer-events: none;\n  z-index: 0;\n  transition:\n    transform 160ms cubic-bezier(0.34, 1.2, 0.64, 1),\n    width 160ms var(--gnome-easing-default, ease);\n}\n\n/* ─── Item base ─────────────────────────────────────────────────────────────── */\n\n.item {\n  appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1, 6px);\n  padding: 4px var(--gnome-space-2, 12px);\n  min-height: 28px;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  white-space: nowrap;\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  position: relative;\n  z-index: 1;\n}\n\n.iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.itemLabel {\n  line-height: 1;\n}\n\n/* ─── Variant: default ──────────────────────────────────────────────────────── */\n\n.default {\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.default .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n}\n\n.default .item:hover:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.06);\n}\n\n.default .item:active:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.12);\n}\n\n.default .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #fff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.default .indicator {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  box-shadow: inset 0 0 0 1px\n    color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 40%, transparent);\n}\n\n.default .active {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n    box-shadow: none;\n  }\n\n  .default .item:hover:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .default .item:active:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.14);\n  }\n\n  .default .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .default .indicator {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    box-shadow: inset 0 0 0 1px\n      color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  }\n\n  .default .active {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: flat ─────────────────────────────────────────────────────────── */\n\n.flat {\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  border-radius: var(--gnome-radius-md);\n  padding: 2px;\n  gap: 2px;\n}\n\n.flat .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.6));\n}\n\n.flat .item:hover:not(:disabled, .active) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat .item:active:not(:disabled, .active) {\n  background-color: var(--gnome-active-overlay);\n}\n\n.flat .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.flat .indicator {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n}\n\n.flat .active {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .flat .item {\n    color: var(--gnome-window-fg-color, rgb(255 255 255 / 0.6));\n  }\n\n  .flat .indicator {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n  }\n\n  .flat .active {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: round ────────────────────────────────────────────────────────── */\n\n.round {\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.round .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 4px var(--gnome-space-2, 12px);\n}\n\n.round .iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.round .item:hover:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.06);\n}\n\n.round .item:active:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.12);\n}\n\n.round .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #fff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.round .indicator {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-radius: var(--gnome-radius-pill, 9999px);\n}\n\n.round .active {\n  color: var(--gnome-accent-fg-color, #fff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .round {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n    box-shadow: none;\n  }\n\n  .round .item:hover:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .round .item:active:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.14);\n  }\n\n  .round .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Variant: pill ─────────────────────────────────────────────────────────── */\n\n.pill {\n  background-color: var(--gnome-hover-overlay, rgb(0 0 0 / 0.06));\n  border: none;\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: none;\n  padding: 3px;\n  gap: 2px;\n}\n\n.pill .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 5px var(--gnome-space-2, 16px);\n  color: var(--gnome-window-fg-color);\n}\n\n.pill .item:hover:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.04);\n}\n\n.pill .item:active:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.08);\n}\n\n.pill .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.pill .indicator {\n  background-color: var(--gnome-card-bg-color, #fff);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.12));\n  border-radius: var(--gnome-radius-pill, 9999px);\n  top: 3px;\n  bottom: 3px;\n}\n\n.pill .active {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n  .pill {\n    background-color: var(--gnome-hover-overlay, rgb(255 255 255 / 0.08));\n  }\n\n  .pill .item:hover:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.05);\n  }\n\n  .pill .item:active:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.1);\n  }\n\n  .pill .indicator {\n    background-color: var(--gnome-card-bg-color, #383838);\n    box-shadow: none;\n  }\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.item:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Overflow: detect (compact / menu) — must be display:flex so clientWidth is constrained ── */\n\n.overflowDetect {\n  display: flex;\n  min-width: 0;\n  width: 100%;\n}\n\n/* ─── Overflow: scroll ──────────────────────────────────────────────────────── */\n\n.overflowScroll {\n  max-width: 100%;\n  overflow: auto hidden;\n  scrollbar-width: none;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n\n.overflowScroll::-webkit-scrollbar {\n  display: none;\n}\n\n.overflowScroll .item {\n  scroll-snap-align: start;\n  flex-shrink: 0;\n}\n\n/* ─── Overflow: compact (icon-only) ─────────────────────────────────────────── */\n\n.compact .itemLabel {\n  display: none;\n}\n\n/* ─── Overflow: menu trigger ────────────────────────────────────────────────── */\n\n.menuTrigger {\n  gap: var(--gnome-space-1, 6px);\n}\n\n.menuChevron {\n  font-size: 0.75rem;\n  opacity: 0.6;\n  margin-left: 2px;\n}\n\n/* ─── Overflow: menu BottomSheet list ───────────────────────────────────────── */\n\n.menuList {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n}\n\n.menuListItem {\n  appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-3, 16px);\n  border-radius: var(--gnome-radius-md);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  text-align: left;\n  width: 100%;\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.menuListItem:hover:not(:disabled) {\n  background-color: rgb(0 0 0 / 0.06);\n}\n\n.menuListItem:active:not(:disabled) {\n  background-color: rgb(0 0 0 / 0.12);\n}\n\n.menuListItem:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.menuListItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.menuListItemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.menuListItemLabel {\n  flex: 1;\n}\n\n.menuListItemCheck {\n  color: var(--gnome-accent-color, #3584e4);\n  font-size: 1rem;\n  flex-shrink: 0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .menuListItem:hover:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .menuListItem:active:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.14);\n  }\n\n  .menuListItem:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #1e1e1e),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .menuListItemActive {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .menuListItemCheck {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .item,\n  .indicator,\n  .menuListItem {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,26 +1,26 @@
 var e = {
-	switcher: "_switcher_l6v4v_3",
-	indicator: "_indicator_l6v4v_11",
-	item: "_item_l6v4v_26",
-	iconOnly: "_iconOnly_l6v4v_57",
-	itemIcon: "_itemIcon_l6v4v_62",
-	itemLabel: "_itemLabel_l6v4v_68",
-	default: "_default_l6v4v_74",
-	active: "_active_l6v4v_87",
-	flat: "_flat_l6v4v_148",
-	round: "_round_l6v4v_202",
-	pill: "_pill_l6v4v_271",
-	overflowDetect: "_overflowDetect_l6v4v_342",
-	overflowScroll: "_overflowScroll_l6v4v_350",
-	compact: "_compact_l6v4v_370",
-	menuTrigger: "_menuTrigger_l6v4v_376",
-	menuChevron: "_menuChevron_l6v4v_380",
-	menuList: "_menuList_l6v4v_388",
-	menuListItem: "_menuListItem_l6v4v_395",
-	menuListItemActive: "_menuListItemActive_l6v4v_434",
-	menuListItemIcon: "_menuListItemIcon_l6v4v_439",
-	menuListItemLabel: "_menuListItemLabel_l6v4v_445",
-	menuListItemCheck: "_menuListItemCheck_l6v4v_449"
+	switcher: "_switcher_1pziq_3",
+	indicator: "_indicator_1pziq_11",
+	item: "_item_1pziq_26",
+	iconOnly: "_iconOnly_1pziq_51",
+	itemIcon: "_itemIcon_1pziq_56",
+	itemLabel: "_itemLabel_1pziq_62",
+	default: "_default_1pziq_68",
+	active: "_active_1pziq_81",
+	flat: "_flat_1pziq_142",
+	round: "_round_1pziq_196",
+	pill: "_pill_1pziq_265",
+	overflowDetect: "_overflowDetect_1pziq_336",
+	overflowScroll: "_overflowScroll_1pziq_344",
+	compact: "_compact_1pziq_363",
+	menuTrigger: "_menuTrigger_1pziq_369",
+	menuChevron: "_menuChevron_1pziq_373",
+	menuList: "_menuList_1pziq_381",
+	menuListItem: "_menuListItem_1pziq_388",
+	menuListItemActive: "_menuListItemActive_1pziq_423",
+	menuListItemIcon: "_menuListItemIcon_1pziq_428",
+	menuListItemLabel: "_menuListItemLabel_1pziq_434",
+	menuListItemCheck: "_menuListItemCheck_1pziq_438"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"InlineViewSwitcher.module.css.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.module.css"],"sourcesContent":["/* ─── Switcher container ────────────────────────────────────────────────────── */\n\n.switcher {\n  display: inline-flex;\n  align-items: stretch;\n  position: relative;\n}\n\n/* ─── Sliding indicator ─────────────────────────────────────────────────────── */\n\n.indicator {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  left: 0;\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  pointer-events: none;\n  z-index: 0;\n  transition:\n    transform 160ms cubic-bezier(0.34, 1.2, 0.64, 1),\n    width 160ms var(--gnome-easing-default, ease);\n}\n\n/* ─── Item base ─────────────────────────────────────────────────────────────── */\n\n.item {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: 4px var(--gnome-space-2, 12px);\n  min-height: 28px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n\n  position: relative;\n  z-index: 1;\n}\n\n.iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.itemLabel {\n  line-height: 1;\n}\n\n/* ─── Variant: default ──────────────────────────────────────────────────────── */\n\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.default .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n}\n\n.default .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.default .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.default .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.default .indicator {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  box-shadow: inset 0 0 0 1px\n    color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 40%, transparent);\n}\n\n.default .active {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\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 .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .default .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .default .indicator {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    box-shadow: inset 0 0 0 1px\n      color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  }\n\n  .default .active {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: flat ─────────────────────────────────────────────────────────── */\n\n.flat {\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  border-radius: var(--gnome-radius-md);\n  padding: 2px;\n  gap: 2px;\n}\n\n.flat .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.6));\n}\n\n.flat .item:hover:not(:disabled):not(.active) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat .item:active:not(:disabled):not(.active) {\n  background-color: var(--gnome-active-overlay);\n}\n\n.flat .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.flat .indicator {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n}\n\n.flat .active {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .flat .item {\n    color: var(--gnome-window-fg-color, rgba(255, 255, 255, 0.6));\n  }\n\n  .flat .indicator {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n  }\n\n  .flat .active {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: round ────────────────────────────────────────────────────────── */\n\n.round {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.round .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 4px var(--gnome-space-2, 12px);\n}\n\n.round .iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.round .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.round .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.round .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #ffffff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.round .indicator {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-radius: var(--gnome-radius-pill, 9999px);\n}\n\n.round .active {\n  color: var(--gnome-accent-fg-color, #ffffff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .round {\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  .round .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .round .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .round .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Variant: pill ─────────────────────────────────────────────────────────── */\n\n.pill {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.06));\n  border: none;\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: none;\n  padding: 3px;\n  gap: 2px;\n}\n\n.pill .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 5px var(--gnome-space-2, 16px);\n  color: var(--gnome-window-fg-color);\n}\n\n.pill .item:hover:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n\n.pill .item:active:not(:disabled):not(.active) {\n  background-color: rgba(0, 0, 0, 0.08);\n}\n\n.pill .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.pill .indicator {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.12));\n  border-radius: var(--gnome-radius-pill, 9999px);\n  top: 3px;\n  bottom: 3px;\n}\n\n.pill .active {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n  .pill {\n    background-color: var(--gnome-hover-overlay, rgba(255, 255, 255, 0.08));\n  }\n\n  .pill .item:hover:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.05);\n  }\n\n  .pill .item:active:not(:disabled):not(.active) {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .pill .indicator {\n    background-color: var(--gnome-card-bg-color, #383838);\n    box-shadow: none;\n  }\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.item:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Overflow: detect (compact / menu) — must be display:flex so clientWidth is constrained ── */\n\n.overflowDetect {\n  display: flex;\n  min-width: 0;\n  width: 100%;\n}\n\n/* ─── Overflow: scroll ──────────────────────────────────────────────────────── */\n\n.overflowScroll {\n  max-width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n\n.overflowScroll::-webkit-scrollbar {\n  display: none;\n}\n\n.overflowScroll .item {\n  scroll-snap-align: start;\n  flex-shrink: 0;\n}\n\n/* ─── Overflow: compact (icon-only) ─────────────────────────────────────────── */\n\n.compact .itemLabel {\n  display: none;\n}\n\n/* ─── Overflow: menu trigger ────────────────────────────────────────────────── */\n\n.menuTrigger {\n  gap: var(--gnome-space-1, 6px);\n}\n\n.menuChevron {\n  font-size: 0.75rem;\n  opacity: 0.6;\n  margin-left: 2px;\n}\n\n/* ─── Overflow: menu BottomSheet list ───────────────────────────────────────── */\n\n.menuList {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n}\n\n.menuListItem {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-3, 16px);\n  border-radius: var(--gnome-radius-md);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: left;\n  width: 100%;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.menuListItem:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.06);\n}\n\n.menuListItem:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.12);\n}\n\n.menuListItem:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.menuListItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.menuListItemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.menuListItemLabel {\n  flex: 1;\n}\n\n.menuListItemCheck {\n  color: var(--gnome-accent-color, #3584e4);\n  font-size: 1rem;\n  flex-shrink: 0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .menuListItem:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .menuListItem:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n\n  .menuListItem:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #1e1e1e),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .menuListItemActive {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .menuListItemCheck {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .item,\n  .indicator,\n  .menuListItem {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"InlineViewSwitcher.module.css.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcher.module.css"],"sourcesContent":["/* ─── Switcher container ────────────────────────────────────────────────────── */\n\n.switcher {\n  display: inline-flex;\n  align-items: stretch;\n  position: relative;\n}\n\n/* ─── Sliding indicator ─────────────────────────────────────────────────────── */\n\n.indicator {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  left: 0;\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  pointer-events: none;\n  z-index: 0;\n  transition:\n    transform 160ms cubic-bezier(0.34, 1.2, 0.64, 1),\n    width 160ms var(--gnome-easing-default, ease);\n}\n\n/* ─── Item base ─────────────────────────────────────────────────────────────── */\n\n.item {\n  appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1, 6px);\n  padding: 4px var(--gnome-space-2, 12px);\n  min-height: 28px;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  white-space: nowrap;\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  position: relative;\n  z-index: 1;\n}\n\n.iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.itemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.itemLabel {\n  line-height: 1;\n}\n\n/* ─── Variant: default ──────────────────────────────────────────────────────── */\n\n.default {\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.default .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n}\n\n.default .item:hover:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.06);\n}\n\n.default .item:active:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.12);\n}\n\n.default .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #fff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.default .indicator {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  box-shadow: inset 0 0 0 1px\n    color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 40%, transparent);\n}\n\n.default .active {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n    box-shadow: none;\n  }\n\n  .default .item:hover:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .default .item:active:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.14);\n  }\n\n  .default .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .default .indicator {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    box-shadow: inset 0 0 0 1px\n      color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  }\n\n  .default .active {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: flat ─────────────────────────────────────────────────────────── */\n\n.flat {\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  border-radius: var(--gnome-radius-md);\n  padding: 2px;\n  gap: 2px;\n}\n\n.flat .item {\n  border-radius: calc(var(--gnome-radius-md) - 2px);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.6));\n}\n\n.flat .item:hover:not(:disabled, .active) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat .item:active:not(:disabled, .active) {\n  background-color: var(--gnome-active-overlay);\n}\n\n.flat .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.flat .indicator {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n}\n\n.flat .active {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .flat .item {\n    color: var(--gnome-window-fg-color, rgb(255 255 255 / 0.6));\n  }\n\n  .flat .indicator {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n  }\n\n  .flat .active {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Variant: round ────────────────────────────────────────────────────────── */\n\n.round {\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: var(--gnome-shadow-sm);\n  padding: 2px;\n  gap: 2px;\n}\n\n.round .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 4px var(--gnome-space-2, 12px);\n}\n\n.round .iconOnly {\n  padding: 4px;\n  min-width: 28px;\n}\n\n.round .item:hover:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.06);\n}\n\n.round .item:active:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.12);\n}\n\n.round .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #fff),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.round .indicator {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-radius: var(--gnome-radius-pill, 9999px);\n}\n\n.round .active {\n  color: var(--gnome-accent-fg-color, #fff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n@media (prefers-color-scheme: dark) {\n  .round {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n    box-shadow: none;\n  }\n\n  .round .item:hover:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .round .item:active:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.14);\n  }\n\n  .round .item:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-card-bg-color, #383838),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Variant: pill ─────────────────────────────────────────────────────────── */\n\n.pill {\n  background-color: var(--gnome-hover-overlay, rgb(0 0 0 / 0.06));\n  border: none;\n  border-radius: var(--gnome-radius-pill, 9999px);\n  box-shadow: none;\n  padding: 3px;\n  gap: 2px;\n}\n\n.pill .item {\n  border-radius: var(--gnome-radius-pill, 9999px);\n  padding: 5px var(--gnome-space-2, 16px);\n  color: var(--gnome-window-fg-color);\n}\n\n.pill .item:hover:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.04);\n}\n\n.pill .item:active:not(:disabled, .active) {\n  background-color: rgb(0 0 0 / 0.08);\n}\n\n.pill .item:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) transparent,\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.pill .indicator {\n  background-color: var(--gnome-card-bg-color, #fff);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.12));\n  border-radius: var(--gnome-radius-pill, 9999px);\n  top: 3px;\n  bottom: 3px;\n}\n\n.pill .active {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n  .pill {\n    background-color: var(--gnome-hover-overlay, rgb(255 255 255 / 0.08));\n  }\n\n  .pill .item:hover:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.05);\n  }\n\n  .pill .item:active:not(:disabled, .active) {\n    background-color: rgb(255 255 255 / 0.1);\n  }\n\n  .pill .indicator {\n    background-color: var(--gnome-card-bg-color, #383838);\n    box-shadow: none;\n  }\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.item:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Overflow: detect (compact / menu) — must be display:flex so clientWidth is constrained ── */\n\n.overflowDetect {\n  display: flex;\n  min-width: 0;\n  width: 100%;\n}\n\n/* ─── Overflow: scroll ──────────────────────────────────────────────────────── */\n\n.overflowScroll {\n  max-width: 100%;\n  overflow: auto hidden;\n  scrollbar-width: none;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n}\n\n.overflowScroll::-webkit-scrollbar {\n  display: none;\n}\n\n.overflowScroll .item {\n  scroll-snap-align: start;\n  flex-shrink: 0;\n}\n\n/* ─── Overflow: compact (icon-only) ─────────────────────────────────────────── */\n\n.compact .itemLabel {\n  display: none;\n}\n\n/* ─── Overflow: menu trigger ────────────────────────────────────────────────── */\n\n.menuTrigger {\n  gap: var(--gnome-space-1, 6px);\n}\n\n.menuChevron {\n  font-size: 0.75rem;\n  opacity: 0.6;\n  margin-left: 2px;\n}\n\n/* ─── Overflow: menu BottomSheet list ───────────────────────────────────────── */\n\n.menuList {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 4px 0;\n}\n\n.menuListItem {\n  appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  cursor: pointer;\n  outline: none;\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-3, 16px);\n  border-radius: var(--gnome-radius-md);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  text-align: left;\n  width: 100%;\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.menuListItem:hover:not(:disabled) {\n  background-color: rgb(0 0 0 / 0.06);\n}\n\n.menuListItem:active:not(:disabled) {\n  background-color: rgb(0 0 0 / 0.12);\n}\n\n.menuListItem:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.menuListItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.menuListItemIcon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.menuListItemLabel {\n  flex: 1;\n}\n\n.menuListItemCheck {\n  color: var(--gnome-accent-color, #3584e4);\n  font-size: 1rem;\n  flex-shrink: 0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .menuListItem:hover:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .menuListItem:active:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.14);\n  }\n\n  .menuListItem:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #1e1e1e),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n\n  .menuListItemActive {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .menuListItemCheck {\n    color: var(--gnome-accent-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .item,\n  .indicator,\n  .menuListItem {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={link:`_link_1xc0b_1`,externalIcon:`_externalIcon_1xc0b_37`};exports.default=e;
+var e={link:`_link_1wyba_1`,externalIcon:`_externalIcon_1wyba_37`};exports.default=e;
 //# sourceMappingURL=Link.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.module.css.cjs","names":[],"sources":["../../../src/components/Link/Link.module.css"],"sourcesContent":[".link {\n  color: var(--gnome-accent-color);\n  text-decoration: none;\n  cursor: pointer;\n  outline: none;\n\n  /* Smooth underline on hover */\n  background-image: linear-gradient(currentColor, currentColor);\n  background-position: 0 100%;\n  background-repeat: no-repeat;\n  background-size: 0% 1px;\n  transition:\n    background-size var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.link:hover {\n  background-size: 100% 1px;\n}\n\n.link:active {\n  opacity: 0.7;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────── */\n\n.link:focus-visible {\n  border-radius: 2px;\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/* ─── External indicator ──────────────────────────────────────── */\n\n.externalIcon {\n  display: inline-block;\n  margin-inline-start: 0.15em;\n  font-size: 0.8em;\n  vertical-align: super;\n  line-height: 1;\n  /* don't underline the icon itself */\n  background-image: none;\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .link {\n    transition: none;\n  }\n\n  .link:hover {\n    text-decoration: underline;\n    background-size: 0%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Link.module.css.cjs","names":[],"sources":["../../../src/components/Link/Link.module.css"],"sourcesContent":[".link {\n  color: var(--gnome-accent-color);\n  text-decoration: none;\n  cursor: pointer;\n  outline: none;\n\n  /* Smooth underline on hover */\n  background-image: linear-gradient(currentcolor, currentcolor);\n  background-position: 0 100%;\n  background-repeat: no-repeat;\n  background-size: 0% 1px;\n  transition:\n    background-size var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.link:hover {\n  background-size: 100% 1px;\n}\n\n.link:active {\n  opacity: 0.7;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────── */\n\n.link:focus-visible {\n  border-radius: 2px;\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/* ─── External indicator ──────────────────────────────────────── */\n\n.externalIcon {\n  display: inline-block;\n  margin-inline-start: 0.15em;\n  font-size: 0.8em;\n  vertical-align: super;\n  line-height: 1;\n\n  /* don't underline the icon itself */\n  background-image: none;\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .link {\n    transition: none;\n  }\n\n  .link:hover {\n    text-decoration: underline;\n    background-size: 0%;\n  }\n}\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 var e = {
-	link: "_link_1xc0b_1",
-	externalIcon: "_externalIcon_1xc0b_37"
+	link: "_link_1wyba_1",
+	externalIcon: "_externalIcon_1wyba_37"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Link.module.css.js","names":[],"sources":["../../../src/components/Link/Link.module.css"],"sourcesContent":[".link {\n  color: var(--gnome-accent-color);\n  text-decoration: none;\n  cursor: pointer;\n  outline: none;\n\n  /* Smooth underline on hover */\n  background-image: linear-gradient(currentColor, currentColor);\n  background-position: 0 100%;\n  background-repeat: no-repeat;\n  background-size: 0% 1px;\n  transition:\n    background-size var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.link:hover {\n  background-size: 100% 1px;\n}\n\n.link:active {\n  opacity: 0.7;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────── */\n\n.link:focus-visible {\n  border-radius: 2px;\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/* ─── External indicator ──────────────────────────────────────── */\n\n.externalIcon {\n  display: inline-block;\n  margin-inline-start: 0.15em;\n  font-size: 0.8em;\n  vertical-align: super;\n  line-height: 1;\n  /* don't underline the icon itself */\n  background-image: none;\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .link {\n    transition: none;\n  }\n\n  .link:hover {\n    text-decoration: underline;\n    background-size: 0%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Link.module.css.js","names":[],"sources":["../../../src/components/Link/Link.module.css"],"sourcesContent":[".link {\n  color: var(--gnome-accent-color);\n  text-decoration: none;\n  cursor: pointer;\n  outline: none;\n\n  /* Smooth underline on hover */\n  background-image: linear-gradient(currentcolor, currentcolor);\n  background-position: 0 100%;\n  background-repeat: no-repeat;\n  background-size: 0% 1px;\n  transition:\n    background-size var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.link:hover {\n  background-size: 100% 1px;\n}\n\n.link:active {\n  opacity: 0.7;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────── */\n\n.link:focus-visible {\n  border-radius: 2px;\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/* ─── External indicator ──────────────────────────────────────── */\n\n.externalIcon {\n  display: inline-block;\n  margin-inline-start: 0.15em;\n  font-size: 0.8em;\n  vertical-align: super;\n  line-height: 1;\n\n  /* don't underline the icon itself */\n  background-image: none;\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .link {\n    transition: none;\n  }\n\n  .link:hover {\n    text-decoration: underline;\n    background-size: 0%;\n  }\n}\n"],"mappings":""}

package/dist/components/Modal/Modal.cjs

@@ -0,0 +1,2 @@
+const e=require("../Dialog/dialogUtils.cjs"),t=require("./Modal.module.css.cjs");let n=require("react"),r=require("react-dom"),i=require("react/jsx-runtime");var a=200,o=({open:o,title:s,children:c,primaryAction:l,secondaryActions:u,onClose:d,closeOnBackdrop:f=!0,className:p,...m})=>{let h=(0,n.useRef)(null),g=(0,n.useId)(),_=(0,n.useRef)(null),[v,y]=(0,n.useState)(o),[b,x]=(0,n.useState)(o),[S,C]=(0,n.useState)(!1),w=(0,n.useRef)(o),T=e.useVisualViewport();e.useBodyScrollLock(o),(0,n.useEffect)(()=>{let e=w.current;w.current=o,o?(y(!0),x(!0),C(!1)):e&&(x(!1),typeof window<`u`&&typeof window.matchMedia==`function`&&window.matchMedia(`(prefers-reduced-motion: reduce)`).matches?y(!1):C(!0))},[o]),(0,n.useEffect)(()=>{if(!S)return;let e=window.setTimeout(()=>{y(!1),C(!1)},a);return()=>window.clearTimeout(e)},[S]),(0,n.useEffect)(()=>{o?(_.current=document.activeElement,(h.current?.querySelector(e.FOCUSABLE))?.focus()):_.current?.focus()},[o]);let E=(0,n.useCallback)(t=>{if(t.key===`Escape`){t.preventDefault(),d?.();return}e.trapFocus(t,h)},[d]);if(!v)return null;let D=l??(u&&u.length>0),O=(0,i.jsx)(`div`,{className:[t.default.backdrop,S?t.default.closing:null].filter(Boolean).join(` `),style:T,onClick:f?d:void 0,children:(0,i.jsxs)(`div`,{ref:h,role:`dialog`,"aria-modal":`true`,"aria-labelledby":s?g:void 0,className:[t.default.modal,b?t.default.entering:null,S?t.default.closing:null,p].filter(Boolean).join(` `),onAnimationEnd:e=>{e.target===e.currentTarget&&b&&x(!1)},onKeyDown:E,onClick:e=>e.stopPropagation(),...m,children:[(0,i.jsxs)(`div`,{className:t.default.header,children:[(0,i.jsx)(`button`,{type:`button`,className:t.default.closeBtn,"aria-label":`Close`,onClick:d,children:`×`}),(0,i.jsx)(`div`,{id:s?g:void 0,className:t.default.title,children:s}),D&&(0,i.jsxs)(`div`,{className:t.default.actions,children:[u?.map(e=>(0,i.jsx)(`button`,{type:`button`,disabled:e.disabled,className:[t.default.btn,t.default[`btn-${e.variant??`default`}`]].filter(Boolean).join(` `),onClick:e.onClick,children:e.label},e.label)),l&&(0,i.jsx)(`button`,{type:`button`,disabled:l.disabled,className:[t.default.btn,t.default[`btn-${l.variant??`suggested`}`]].filter(Boolean).join(` `),onClick:l.onClick,children:l.label})]})]}),c&&(0,i.jsx)(`div`,{className:t.default.body,children:c})]})});return typeof document>`u`?O:(0,r.createPortal)(O,document.body)};exports.Modal=o;
+//# sourceMappingURL=Modal.cjs.map

package/dist/components/Modal/Modal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.cjs","names":[],"sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { FOCUSABLE, trapFocus, useBodyScrollLock, useVisualViewport } from '../Dialog/dialogUtils';\n\nimport styles from './Modal.module.css';\n\nconst CLOSE_ANIM_DURATION = 200;\n\nexport interface ModalAction {\n  label: string;\n  variant?: 'default' | 'suggested' | 'destructive';\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the modal is visible. */\n  open: boolean;\n  /** Modal heading — also used as the accessible name. */\n  title?: ReactNode;\n  /** Body content. Can be any React node; the body scrolls independently. */\n  children?: ReactNode;\n  /**\n   * Single primary action rendered rightmost in the header.\n   * Defaults to the `\"suggested\"` variant when `variant` is omitted.\n   */\n  primaryAction?: ModalAction;\n  /**\n   * One or more secondary actions rendered between the title and primary action.\n   * Defaults to the `\"default\"` variant when `variant` is omitted.\n   */\n  secondaryActions?: ModalAction[];\n  /** Called when the user closes the modal (× button, Escape, or backdrop click). */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the modal. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Large overlay for rich content, forms, and settings.\n *\n * Unlike `Dialog` (confirmations / alerts), `Modal` provides a wider card\n * (up to 720 px), a scrollable body region, and a header bar with an\n * integrated close button plus optional primary and secondary actions.\n *\n * Renders into a portal on `document.body`. Traps focus, closes on Escape,\n * and plays slide+fade animations on entry and exit.\n */\nexport const Modal = ({\n  open,\n  title,\n  children,\n  primaryAction,\n  secondaryActions,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: ModalProps) => {\n  const modalRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n\n  // Animation state\n  const [isVisible, setIsVisible] = useState(open);\n  const [isEntering, setIsEntering] = useState(open);\n  const [isClosing, setIsClosing] = useState(false);\n  const prevOpen = useRef(open);\n\n  const viewportStyle = useVisualViewport();\n  useBodyScrollLock(open);\n\n  // Track open ↔ closed transitions\n  useEffect(() => {\n    const wasOpen = prevOpen.current;\n    prevOpen.current = open;\n\n    if (open) {\n      setIsVisible(true);\n      setIsEntering(true);\n      setIsClosing(false);\n    } else if (wasOpen) {\n      setIsEntering(false);\n\n      const reducedMotion =\n        typeof window !== 'undefined' &&\n        typeof window.matchMedia === 'function' &&\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n      if (reducedMotion) {\n        setIsVisible(false);\n      } else {\n        setIsClosing(true);\n      }\n    }\n  }, [open]);\n\n  // Unmount after exit animation — using setTimeout instead of onAnimationEnd\n  // because React 18 portals render into document.body, outside the root\n  // container where event delegation is registered, so animationend events\n  // on portal children do not bubble through the synthetic event system.\n  useEffect(() => {\n    if (!isClosing) {\n      return;\n    }\n\n    const id = window.setTimeout(() => {\n      setIsVisible(false);\n      setIsClosing(false);\n    }, CLOSE_ANIM_DURATION);\n\n    return () => window.clearTimeout(id);\n  }, [isClosing]);\n\n  // Save / restore focus around open/close\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = modalRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n        return;\n      }\n\n      trapFocus(e, modalRef);\n    },\n    [onClose],\n  );\n\n  if (!isVisible) {\n    return null;\n  }\n\n  const hasActions = primaryAction ?? (secondaryActions && secondaryActions.length > 0);\n\n  const node = (\n    <div\n      className={[styles.backdrop, isClosing ? styles.closing : null].filter(Boolean).join(' ')}\n      style={viewportStyle}\n      onClick={closeOnBackdrop ? onClose : undefined}\n    >\n      <div\n        ref={modalRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        className={[\n          styles.modal,\n          isEntering ? styles.entering : null,\n          isClosing ? styles.closing : null,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onAnimationEnd={(e) => {\n          if (e.target === e.currentTarget && isEntering) {\n            setIsEntering(false);\n          }\n        }}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        <div className={styles.header}>\n          <button type=\"button\" className={styles.closeBtn} aria-label=\"Close\" onClick={onClose}>\n            ×\n          </button>\n\n          {/* Title grows to fill center — always rendered so actions stay right-aligned */}\n          <div id={title ? titleId : undefined} className={styles.title}>\n            {title}\n          </div>\n\n          {hasActions && (\n            <div className={styles.actions}>\n              {secondaryActions?.map((action) => (\n                <button\n                  key={action.label}\n                  type=\"button\"\n                  disabled={action.disabled}\n                  className={[styles.btn, styles[`btn-${action.variant ?? 'default'}`]]\n                    .filter(Boolean)\n                    .join(' ')}\n                  onClick={action.onClick}\n                >\n                  {action.label}\n                </button>\n              ))}\n              {primaryAction && (\n                <button\n                  type=\"button\"\n                  disabled={primaryAction.disabled}\n                  className={[styles.btn, styles[`btn-${primaryAction.variant ?? 'suggested'}`]]\n                    .filter(Boolean)\n                    .join(' ')}\n                  onClick={primaryAction.onClick}\n                >\n                  {primaryAction.label}\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n\n        {children && <div className={styles.body}>{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":"8JAiBA,IAAM,EAAsB,IA0Cf,GAAS,CACpB,OACA,QACA,WACA,gBACA,mBACA,UACA,kBAAkB,GAClB,YACA,GAAG,KACa,CAChB,IAAM,GAAA,EAAA,EAAA,QAAkC,IAAI,EACtC,GAAA,EAAA,EAAA,OAAgB,EAChB,GAAA,EAAA,EAAA,QAA2C,IAAI,EAG/C,CAAC,EAAW,IAAA,EAAA,EAAA,UAAyB,CAAI,EACzC,CAAC,EAAY,IAAA,EAAA,EAAA,UAA0B,CAAI,EAC3C,CAAC,EAAW,IAAA,EAAA,EAAA,UAAyB,EAAK,EAC1C,GAAA,EAAA,EAAA,QAAkB,CAAI,EAEtB,EAAgB,EAAA,kBAAkB,EACxC,EAAA,kBAAkB,CAAI,GAGtB,EAAA,EAAA,eAAgB,CACd,IAAM,EAAU,EAAS,QACzB,EAAS,QAAU,EAEf,GACF,EAAa,EAAI,EACjB,EAAc,EAAI,EAClB,EAAa,EAAK,GACT,IACT,EAAc,EAAK,EAGjB,OAAO,OAAW,KAClB,OAAO,OAAO,YAAe,YAC7B,OAAO,WAAW,kCAAkC,EAAE,QAGtD,EAAa,EAAK,EAElB,EAAa,EAAI,EAGvB,EAAG,CAAC,CAAI,CAAC,GAMT,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,EACH,OAGF,IAAM,EAAK,OAAO,eAAiB,CACjC,EAAa,EAAK,EAClB,EAAa,EAAK,CACpB,EAAG,CAAmB,EAEtB,UAAa,OAAO,aAAa,CAAE,CACrC,EAAG,CAAC,CAAS,CAAC,GAGd,EAAA,EAAA,eAAgB,CACV,GACF,EAAkB,QAAU,SAAS,eAC1B,EAAS,SAAS,cAA2B,EAAA,SAAS,IAC7D,MAAM,GAEV,EAAmB,SAAgC,MAAM,CAE7D,EAAG,CAAC,CAAI,CAAC,EAET,IAAM,GAAA,EAAA,EAAA,aACH,GAAqC,CACpC,GAAI,EAAE,MAAQ,SAAU,CACtB,EAAE,eAAe,EACjB,IAAU,EACV,MACF,CAEA,EAAA,UAAU,EAAG,CAAQ,CACvB,EACA,CAAC,CAAO,CACV,EAEA,GAAI,CAAC,EACH,OAAO,KAGT,IAAM,EAAa,IAAkB,GAAoB,EAAiB,OAAS,GAE7E,GACJ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,SAAU,EAAY,EAAA,QAAO,QAAU,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACxF,MAAO,EACP,QAAS,EAAkB,EAAU,IAAA,aAErC,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,KAAK,SACL,aAAW,OACX,kBAAiB,EAAQ,EAAU,IAAA,GACnC,UAAW,CACT,EAAA,QAAO,MACP,EAAa,EAAA,QAAO,SAAW,KAC/B,EAAY,EAAA,QAAO,QAAU,KAC7B,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,eAAiB,GAAM,CACjB,EAAE,SAAW,EAAE,eAAiB,GAClC,EAAc,EAAK,CAEvB,EACA,UAAW,EACX,QAAU,GAAM,EAAE,gBAAgB,EAClC,GAAI,WApBN,EAsBE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,gBAAvB,EACE,EAAA,EAAA,KAAC,SAAD,CAAQ,KAAK,SAAS,UAAW,EAAA,QAAO,SAAU,aAAW,QAAQ,QAAS,WAAS,GAE/E,CAAA,GAGR,EAAA,EAAA,KAAC,MAAD,CAAK,GAAI,EAAQ,EAAU,IAAA,GAAW,UAAW,EAAA,QAAO,eACrD,CACE,CAAA,EAEJ,IACC,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBAAvB,CACG,GAAkB,IAAK,IACtB,EAAA,EAAA,KAAC,SAAD,CAEE,KAAK,SACL,SAAU,EAAO,SACjB,UAAW,CAAC,EAAA,QAAO,IAAK,EAAA,QAAO,OAAO,EAAO,SAAW,YAAY,EACjE,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAAS,EAAO,iBAEf,EAAO,KACF,EATD,EAAO,KASN,CACT,EACA,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,SAAU,EAAc,SACxB,UAAW,CAAC,EAAA,QAAO,IAAK,EAAA,QAAO,OAAO,EAAc,SAAW,cAAc,EAC1E,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAAS,EAAc,iBAEtB,EAAc,KACT,CAAA,CAEP,GAEJ,IAEJ,IAAY,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,KAAO,UAAc,CAAA,CACtD,GACF,CAAA,EAOP,OAJI,OAAO,SAAa,IACf,GAGT,EAAA,EAAA,cAAoB,EAAM,SAAS,IAAI,CACzC"}

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ModalAction {
+    label: string;
+    variant?: 'default' | 'suggested' | 'destructive';
+    onClick: () => void;
+    disabled?: boolean;
+}
+export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Whether the modal is visible. */
+    open: boolean;
+    /** Modal heading — also used as the accessible name. */
+    title?: ReactNode;
+    /** Body content. Can be any React node; the body scrolls independently. */
+    children?: ReactNode;
+    /**
+     * Single primary action rendered rightmost in the header.
+     * Defaults to the `"suggested"` variant when `variant` is omitted.
+     */
+    primaryAction?: ModalAction;
+    /**
+     * One or more secondary actions rendered between the title and primary action.
+     * Defaults to the `"default"` variant when `variant` is omitted.
+     */
+    secondaryActions?: ModalAction[];
+    /** Called when the user closes the modal (× button, Escape, or backdrop click). */
+    onClose?: () => void;
+    /** Whether clicking the backdrop closes the modal. Defaults to `true`. */
+    closeOnBackdrop?: boolean;
+}
+/**
+ * Large overlay for rich content, forms, and settings.
+ *
+ * Unlike `Dialog` (confirmations / alerts), `Modal` provides a wider card
+ * (up to 720 px), a scrollable body region, and a header bar with an
+ * integrated close button plus optional primary and secondary actions.
+ *
+ * Renders into a portal on `document.body`. Traps focus, closes on Escape,
+ * and plays slide+fade animations on entry and exit.
+ */
+export declare const Modal: ({ open, title, children, primaryAction, secondaryActions, onClose, closeOnBackdrop, className, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Modal/Modal.js

@@ -0,0 +1,93 @@
+import { FOCUSABLE as e, trapFocus as t, useBodyScrollLock as n, useVisualViewport as r } from "../Dialog/dialogUtils.js";
+import i from "./Modal.module.css.js";
+import { useCallback as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
+import { createPortal as u } from "react-dom";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/Modal/Modal.tsx
+var p = 200, m = ({ open: m, title: h, children: g, primaryAction: _, secondaryActions: v, onClose: y, closeOnBackdrop: b = !0, className: x, ...S }) => {
+	let C = c(null), w = s(), T = c(null), [E, D] = l(m), [O, k] = l(m), [A, j] = l(!1), M = c(m), N = r();
+	n(m), o(() => {
+		let e = M.current;
+		M.current = m, m ? (D(!0), k(!0), j(!1)) : e && (k(!1), typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches ? D(!1) : j(!0));
+	}, [m]), o(() => {
+		if (!A) return;
+		let e = window.setTimeout(() => {
+			D(!1), j(!1);
+		}, p);
+		return () => window.clearTimeout(e);
+	}, [A]), o(() => {
+		m ? (T.current = document.activeElement, (C.current?.querySelector(e))?.focus()) : T.current?.focus();
+	}, [m]);
+	let P = a((e) => {
+		if (e.key === "Escape") {
+			e.preventDefault(), y?.();
+			return;
+		}
+		t(e, C);
+	}, [y]);
+	if (!E) return null;
+	let F = _ ?? (v && v.length > 0), I = /* @__PURE__ */ d("div", {
+		className: [i.backdrop, A ? i.closing : null].filter(Boolean).join(" "),
+		style: N,
+		onClick: b ? y : void 0,
+		children: /* @__PURE__ */ f("div", {
+			ref: C,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": h ? w : void 0,
+			className: [
+				i.modal,
+				O ? i.entering : null,
+				A ? i.closing : null,
+				x
+			].filter(Boolean).join(" "),
+			onAnimationEnd: (e) => {
+				e.target === e.currentTarget && O && k(!1);
+			},
+			onKeyDown: P,
+			onClick: (e) => e.stopPropagation(),
+			...S,
+			children: [/* @__PURE__ */ f("div", {
+				className: i.header,
+				children: [
+					/* @__PURE__ */ d("button", {
+						type: "button",
+						className: i.closeBtn,
+						"aria-label": "Close",
+						onClick: y,
+						children: "×"
+					}),
+					/* @__PURE__ */ d("div", {
+						id: h ? w : void 0,
+						className: i.title,
+						children: h
+					}),
+					F && /* @__PURE__ */ f("div", {
+						className: i.actions,
+						children: [v?.map((e) => /* @__PURE__ */ d("button", {
+							type: "button",
+							disabled: e.disabled,
+							className: [i.btn, i[`btn-${e.variant ?? "default"}`]].filter(Boolean).join(" "),
+							onClick: e.onClick,
+							children: e.label
+						}, e.label)), _ && /* @__PURE__ */ d("button", {
+							type: "button",
+							disabled: _.disabled,
+							className: [i.btn, i[`btn-${_.variant ?? "suggested"}`]].filter(Boolean).join(" "),
+							onClick: _.onClick,
+							children: _.label
+						})]
+					})
+				]
+			}), g && /* @__PURE__ */ d("div", {
+				className: i.body,
+				children: g
+			})]
+		})
+	});
+	return typeof document > "u" ? I : u(I, document.body);
+};
+//#endregion
+export { m as Modal };
+
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","names":[],"sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { FOCUSABLE, trapFocus, useBodyScrollLock, useVisualViewport } from '../Dialog/dialogUtils';\n\nimport styles from './Modal.module.css';\n\nconst CLOSE_ANIM_DURATION = 200;\n\nexport interface ModalAction {\n  label: string;\n  variant?: 'default' | 'suggested' | 'destructive';\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the modal is visible. */\n  open: boolean;\n  /** Modal heading — also used as the accessible name. */\n  title?: ReactNode;\n  /** Body content. Can be any React node; the body scrolls independently. */\n  children?: ReactNode;\n  /**\n   * Single primary action rendered rightmost in the header.\n   * Defaults to the `\"suggested\"` variant when `variant` is omitted.\n   */\n  primaryAction?: ModalAction;\n  /**\n   * One or more secondary actions rendered between the title and primary action.\n   * Defaults to the `\"default\"` variant when `variant` is omitted.\n   */\n  secondaryActions?: ModalAction[];\n  /** Called when the user closes the modal (× button, Escape, or backdrop click). */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the modal. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Large overlay for rich content, forms, and settings.\n *\n * Unlike `Dialog` (confirmations / alerts), `Modal` provides a wider card\n * (up to 720 px), a scrollable body region, and a header bar with an\n * integrated close button plus optional primary and secondary actions.\n *\n * Renders into a portal on `document.body`. Traps focus, closes on Escape,\n * and plays slide+fade animations on entry and exit.\n */\nexport const Modal = ({\n  open,\n  title,\n  children,\n  primaryAction,\n  secondaryActions,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: ModalProps) => {\n  const modalRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n\n  // Animation state\n  const [isVisible, setIsVisible] = useState(open);\n  const [isEntering, setIsEntering] = useState(open);\n  const [isClosing, setIsClosing] = useState(false);\n  const prevOpen = useRef(open);\n\n  const viewportStyle = useVisualViewport();\n  useBodyScrollLock(open);\n\n  // Track open ↔ closed transitions\n  useEffect(() => {\n    const wasOpen = prevOpen.current;\n    prevOpen.current = open;\n\n    if (open) {\n      setIsVisible(true);\n      setIsEntering(true);\n      setIsClosing(false);\n    } else if (wasOpen) {\n      setIsEntering(false);\n\n      const reducedMotion =\n        typeof window !== 'undefined' &&\n        typeof window.matchMedia === 'function' &&\n        window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n      if (reducedMotion) {\n        setIsVisible(false);\n      } else {\n        setIsClosing(true);\n      }\n    }\n  }, [open]);\n\n  // Unmount after exit animation — using setTimeout instead of onAnimationEnd\n  // because React 18 portals render into document.body, outside the root\n  // container where event delegation is registered, so animationend events\n  // on portal children do not bubble through the synthetic event system.\n  useEffect(() => {\n    if (!isClosing) {\n      return;\n    }\n\n    const id = window.setTimeout(() => {\n      setIsVisible(false);\n      setIsClosing(false);\n    }, CLOSE_ANIM_DURATION);\n\n    return () => window.clearTimeout(id);\n  }, [isClosing]);\n\n  // Save / restore focus around open/close\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = modalRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n        return;\n      }\n\n      trapFocus(e, modalRef);\n    },\n    [onClose],\n  );\n\n  if (!isVisible) {\n    return null;\n  }\n\n  const hasActions = primaryAction ?? (secondaryActions && secondaryActions.length > 0);\n\n  const node = (\n    <div\n      className={[styles.backdrop, isClosing ? styles.closing : null].filter(Boolean).join(' ')}\n      style={viewportStyle}\n      onClick={closeOnBackdrop ? onClose : undefined}\n    >\n      <div\n        ref={modalRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        className={[\n          styles.modal,\n          isEntering ? styles.entering : null,\n          isClosing ? styles.closing : null,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onAnimationEnd={(e) => {\n          if (e.target === e.currentTarget && isEntering) {\n            setIsEntering(false);\n          }\n        }}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        <div className={styles.header}>\n          <button type=\"button\" className={styles.closeBtn} aria-label=\"Close\" onClick={onClose}>\n            ×\n          </button>\n\n          {/* Title grows to fill center — always rendered so actions stay right-aligned */}\n          <div id={title ? titleId : undefined} className={styles.title}>\n            {title}\n          </div>\n\n          {hasActions && (\n            <div className={styles.actions}>\n              {secondaryActions?.map((action) => (\n                <button\n                  key={action.label}\n                  type=\"button\"\n                  disabled={action.disabled}\n                  className={[styles.btn, styles[`btn-${action.variant ?? 'default'}`]]\n                    .filter(Boolean)\n                    .join(' ')}\n                  onClick={action.onClick}\n                >\n                  {action.label}\n                </button>\n              ))}\n              {primaryAction && (\n                <button\n                  type=\"button\"\n                  disabled={primaryAction.disabled}\n                  className={[styles.btn, styles[`btn-${primaryAction.variant ?? 'suggested'}`]]\n                    .filter(Boolean)\n                    .join(' ')}\n                  onClick={primaryAction.onClick}\n                >\n                  {primaryAction.label}\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n\n        {children && <div className={styles.body}>{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":";;;;;;AAiBA,IAAM,IAAsB,KA0Cf,KAAS,EACpB,SACA,UACA,aACA,kBACA,qBACA,YACA,qBAAkB,IAClB,cACA,GAAG,QACa;CAChB,IAAM,IAAW,EAAuB,IAAI,GACtC,IAAU,EAAM,GAChB,IAAoB,EAAuB,IAAI,GAG/C,CAAC,GAAW,KAAgB,EAAS,CAAI,GACzC,CAAC,GAAY,KAAiB,EAAS,CAAI,GAC3C,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,IAAW,EAAO,CAAI,GAEtB,IAAgB,EAAkB;CA8CxC,AA7CA,EAAkB,CAAI,GAGtB,QAAgB;EACd,IAAM,IAAU,EAAS;EAGzB,AAFA,EAAS,UAAU,GAEf,KACF,EAAa,EAAI,GACjB,EAAc,EAAI,GAClB,EAAa,EAAK,KACT,MACT,EAAc,EAAK,GAGjB,OAAO,SAAW,OAClB,OAAO,OAAO,cAAe,cAC7B,OAAO,WAAW,kCAAkC,EAAE,UAGtD,EAAa,EAAK,IAElB,EAAa,EAAI;CAGvB,GAAG,CAAC,CAAI,CAAC,GAMT,QAAgB;EACd,IAAI,CAAC,GACH;EAGF,IAAM,IAAK,OAAO,iBAAiB;GAEjC,AADA,EAAa,EAAK,GAClB,EAAa,EAAK;EACpB,GAAG,CAAmB;EAEtB,aAAa,OAAO,aAAa,CAAE;CACrC,GAAG,CAAC,CAAS,CAAC,GAGd,QAAgB;EACd,AAAI,KACF,EAAkB,UAAU,SAAS,gBAC1B,EAAS,SAAS,cAA2B,CAAS,IAC7D,MAAM,KAEV,EAAmB,SAAgC,MAAM;CAE7D,GAAG,CAAC,CAAI,CAAC;CAET,IAAM,IAAgB,GACnB,MAAqC;EACpC,IAAI,EAAE,QAAQ,UAAU;GAEtB,AADA,EAAE,eAAe,GACjB,IAAU;GACV;EACF;EAEA,EAAU,GAAG,CAAQ;CACvB,GACA,CAAC,CAAO,CACV;CAEA,IAAI,CAAC,GACH,OAAO;CAGT,IAAM,IAAa,MAAkB,KAAoB,EAAiB,SAAS,IAE7E,IACJ,kBAAC,OAAD;EACE,WAAW,CAAC,EAAO,UAAU,IAAY,EAAO,UAAU,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;EACxF,OAAO;EACP,SAAS,IAAkB,IAAU,KAAA;YAErC,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,WAAW;IACT,EAAO;IACP,IAAa,EAAO,WAAW;IAC/B,IAAY,EAAO,UAAU;IAC7B;GACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;GACX,iBAAiB,MAAM;IACrB,AAAI,EAAE,WAAW,EAAE,iBAAiB,KAClC,EAAc,EAAK;GAEvB;GACA,WAAW;GACX,UAAU,MAAM,EAAE,gBAAgB;GAClC,GAAI;aApBN,CAsBE,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB;KACE,kBAAC,UAAD;MAAQ,MAAK;MAAS,WAAW,EAAO;MAAU,cAAW;MAAQ,SAAS;gBAAS;KAE/E,CAAA;KAGR,kBAAC,OAAD;MAAK,IAAI,IAAQ,IAAU,KAAA;MAAW,WAAW,EAAO;gBACrD;KACE,CAAA;KAEJ,KACC,kBAAC,OAAD;MAAK,WAAW,EAAO;gBAAvB,CACG,GAAkB,KAAK,MACtB,kBAAC,UAAD;OAEE,MAAK;OACL,UAAU,EAAO;OACjB,WAAW,CAAC,EAAO,KAAK,EAAO,OAAO,EAAO,WAAW,YAAY,EACjE,OAAO,OAAO,EACd,KAAK,GAAG;OACX,SAAS,EAAO;iBAEf,EAAO;MACF,GATD,EAAO,KASN,CACT,GACA,KACC,kBAAC,UAAD;OACE,MAAK;OACL,UAAU,EAAc;OACxB,WAAW,CAAC,EAAO,KAAK,EAAO,OAAO,EAAc,WAAW,cAAc,EAC1E,OAAO,OAAO,EACd,KAAK,GAAG;OACX,SAAS,EAAc;iBAEtB,EAAc;MACT,CAAA,CAEP;;IAEJ;OAEJ,KAAY,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAO;GAAc,CAAA,CACtD;;CACF,CAAA;CAOP,OAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,SAAS,IAAI;AACzC"}

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

@@ -0,0 +1,2 @@
+var e={backdrop:`_backdrop_y62af_3`,"backdrop-in":`_backdrop-in_y62af_1`,closing:`_closing_y62af_15`,"backdrop-out":`_backdrop-out_y62af_1`,modal:`_modal_y62af_41`,entering:`_entering_y62af_55`,"modal-in":`_modal-in_y62af_1`,"modal-out":`_modal-out_y62af_1`,header:`_header_y62af_89`,closeBtn:`_closeBtn_y62af_100`,title:`_title_y62af_138`,actions:`_actions_y62af_149`,btn:`_btn_y62af_158`,"btn-default":`_btn-default_y62af_198`,"btn-suggested":`_btn-suggested_y62af_202`,"btn-destructive":`_btn-destructive_y62af_216`,body:`_body_y62af_222`};exports.default=e;
+//# sourceMappingURL=Modal.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.module.css.cjs","names":[],"sources":["../../../src/components/Modal/Modal.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--gnome-dialog-backdrop-color, rgb(0 0 0 / 0.5));\n  backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.backdrop.closing {\n  animation: backdrop-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes backdrop-out {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n/* ─── Modal card ────────────────────────────────────────────────────────────── */\n\n.modal {\n  width: min(720px, calc(100vw - 48px));\n  max-height: 90dvh;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 40px rgb(0 0 0 / 0.22),\n    0 0 0 1px rgb(0 0 0 / 0.06);\n  overflow: hidden;\n}\n\n.modal.entering {\n  animation: modal-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.modal.closing {\n  animation: modal-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes modal-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n@keyframes modal-out {\n  from {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 8px);\n  padding: 10px var(--gnome-space-3, 16px);\n  border-bottom: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.08));\n  flex-shrink: 0;\n}\n\n/* ─── Close button ──────────────────────────────────────────────────────────── */\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.25rem;\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  cursor: pointer;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.closeBtn:hover {\n  background-color: color-mix(in srgb, currentcolor 10%, transparent);\n}\n\n.closeBtn:active {\n  background-color: color-mix(in srgb, currentcolor 18%, transparent);\n}\n\n.closeBtn:focus {\n  outline: none;\n}\n\n.closeBtn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n/* Grows to fill center space — always present to keep actions right-aligned */\n.title {\n  flex: 1 1 auto;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: var(--gnome-line-height-title, 1.3);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n/* ─── Actions ───────────────────────────────────────────────────────────────── */\n\n.actions {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  flex-shrink: 0;\n}\n\n/* ─── Action buttons ────────────────────────────────────────────────────────── */\n\n.btn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  padding: 6px 14px;\n  border-radius: var(--gnome-radius-sm, 6px);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-accent-color, #3584e4);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.btn:hover:not(:disabled) {\n  background-color: color-mix(in srgb, currentcolor 8%, transparent);\n}\n\n.btn:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentcolor 16%, transparent);\n}\n\n.btn:focus {\n  outline: none;\n}\n\n.btn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n.btn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Button variants ───────────────────────────────────────────────────────── */\n\n.btn-default {\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.btn-suggested {\n  background-color: var(--gnome-accent-color, #3584e4);\n  color: #fff;\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.btn-suggested:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 85%, #000);\n}\n\n.btn-suggested:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 70%, #000);\n}\n\n.btn-destructive {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.body {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: var(--gnome-space-4, 24px);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .modal {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 8px 40px rgb(0 0 0 / 0.5),\n      0 0 0 1px rgb(255 255 255 / 0.08);\n  }\n\n  .header {\n    border-bottom-color: rgb(255 255 255 / 0.08);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .backdrop.closing,\n  .modal.entering,\n  .modal.closing {\n    animation: none;\n  }\n\n  .btn,\n  .closeBtn {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,23 @@
+var e = {
+	backdrop: "_backdrop_y62af_3",
+	"backdrop-in": "_backdrop-in_y62af_1",
+	closing: "_closing_y62af_15",
+	"backdrop-out": "_backdrop-out_y62af_1",
+	modal: "_modal_y62af_41",
+	entering: "_entering_y62af_55",
+	"modal-in": "_modal-in_y62af_1",
+	"modal-out": "_modal-out_y62af_1",
+	header: "_header_y62af_89",
+	closeBtn: "_closeBtn_y62af_100",
+	title: "_title_y62af_138",
+	actions: "_actions_y62af_149",
+	btn: "_btn_y62af_158",
+	"btn-default": "_btn-default_y62af_198",
+	"btn-suggested": "_btn-suggested_y62af_202",
+	"btn-destructive": "_btn-destructive_y62af_216",
+	body: "_body_y62af_222"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=Modal.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.module.css.js","names":[],"sources":["../../../src/components/Modal/Modal.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--gnome-dialog-backdrop-color, rgb(0 0 0 / 0.5));\n  backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.backdrop.closing {\n  animation: backdrop-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes backdrop-out {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n\n/* ─── Modal card ────────────────────────────────────────────────────────────── */\n\n.modal {\n  width: min(720px, calc(100vw - 48px));\n  max-height: 90dvh;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 40px rgb(0 0 0 / 0.22),\n    0 0 0 1px rgb(0 0 0 / 0.06);\n  overflow: hidden;\n}\n\n.modal.entering {\n  animation: modal-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.modal.closing {\n  animation: modal-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes modal-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n@keyframes modal-out {\n  from {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 8px);\n  padding: 10px var(--gnome-space-3, 16px);\n  border-bottom: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.08));\n  flex-shrink: 0;\n}\n\n/* ─── Close button ──────────────────────────────────────────────────────────── */\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.25rem;\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  cursor: pointer;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.closeBtn:hover {\n  background-color: color-mix(in srgb, currentcolor 10%, transparent);\n}\n\n.closeBtn:active {\n  background-color: color-mix(in srgb, currentcolor 18%, transparent);\n}\n\n.closeBtn:focus {\n  outline: none;\n}\n\n.closeBtn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n/* Grows to fill center space — always present to keep actions right-aligned */\n.title {\n  flex: 1 1 auto;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: var(--gnome-line-height-title, 1.3);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n/* ─── Actions ───────────────────────────────────────────────────────────────── */\n\n.actions {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  flex-shrink: 0;\n}\n\n/* ─── Action buttons ────────────────────────────────────────────────────────── */\n\n.btn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  padding: 6px 14px;\n  border-radius: var(--gnome-radius-sm, 6px);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-accent-color, #3584e4);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.btn:hover:not(:disabled) {\n  background-color: color-mix(in srgb, currentcolor 8%, transparent);\n}\n\n.btn:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentcolor 16%, transparent);\n}\n\n.btn:focus {\n  outline: none;\n}\n\n.btn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n.btn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Button variants ───────────────────────────────────────────────────────── */\n\n.btn-default {\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.btn-suggested {\n  background-color: var(--gnome-accent-color, #3584e4);\n  color: #fff;\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.btn-suggested:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 85%, #000);\n}\n\n.btn-suggested:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 70%, #000);\n}\n\n.btn-destructive {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.body {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding: var(--gnome-space-4, 24px);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .modal {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 8px 40px rgb(0 0 0 / 0.5),\n      0 0 0 1px rgb(255 255 255 / 0.08);\n  }\n\n  .header {\n    border-bottom-color: rgb(255 255 255 / 0.08);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .backdrop.closing,\n  .modal.entering,\n  .modal.closing {\n    animation: none;\n  }\n\n  .btn,\n  .closeBtn {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export type { ModalAction, ModalProps } from './Modal';
+export { Modal } from './Modal';

package/dist/components/Modal.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./Modal/Modal.cjs");exports.Modal=e.Modal;

package/dist/components/Modal.d.ts

@@ -0,0 +1,2 @@
+export * from './Modal/index'
+export {}

package/dist/components/Modal.js

@@ -0,0 +1,2 @@
+import { Modal as e } from "./Modal/Modal.js";
+export { e as Modal };

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

@@ -1,2 +1,2 @@
-var e={root:`_root_16ve4_3`,expanded:`_expanded_16ve4_12`,sidebar:`_sidebar_16ve4_16`,contentPane:`_contentPane_16ve4_22`,collapsed:`_collapsed_16ve4_30`,paneVisible:`_paneVisible_16ve4_46`,paneHidden:`_paneHidden_16ve4_50`,divider:`_divider_16ve4_67`};exports.default=e;
+var e={root:`_root_1v9it_3`,expanded:`_expanded_1v9it_12`,sidebar:`_sidebar_1v9it_16`,contentPane:`_contentPane_1v9it_22`,collapsed:`_collapsed_1v9it_30`,paneVisible:`_paneVisible_1v9it_46`,paneHidden:`_paneHidden_1v9it_50`,divider:`_divider_1v9it_67`};exports.default=e;
 //# sourceMappingURL=NavigationSplitView.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationSplitView.module.css.cjs","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.module.css"],"sourcesContent":["/* ─── Root ───────────────────────────────────────────────────────────────────── */\n\n.root {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n/* ─── Wide (both panes visible) ──────────────────────────────────────────────── */\n\n.expanded {\n  flex-direction: row;\n}\n\n.expanded .sidebar {\n  width: var(--sidebar-width, var(--gnome-layout-sidebar-width, clamp(180px, 25%, 280px)));\n  flex-shrink: 0;\n  overflow-y: auto;\n}\n\n.expanded .contentPane {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n\n/* ─── Narrow (one pane at a time) ────────────────────────────────────────────── */\n\n.collapsed {\n  flex-direction: column;\n  position: relative;\n}\n\n.collapsed .sidebar,\n.collapsed .contentPane {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  transition: transform var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n/* Sidebar slides out to the left when content is shown */\n.collapsed .sidebar.paneVisible {\n  transform: translateX(0);\n}\n\n.collapsed .sidebar.paneHidden {\n  transform: translateX(-100%);\n  pointer-events: none;\n}\n\n/* Content slides in from the right when shown */\n.collapsed .contentPane.paneVisible {\n  transform: translateX(0);\n}\n\n.collapsed .contentPane.paneHidden {\n  transform: translateX(100%);\n  pointer-events: none;\n}\n\n/* ─── Divider ────────────────────────────────────────────────────────────────── */\n\n.divider {\n  width: 1px;\n  background-color: var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  flex-shrink: 0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .divider {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .collapsed .sidebar,\n  .collapsed .contentPane {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"NavigationSplitView.module.css.cjs","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.module.css"],"sourcesContent":["/* ─── Root ───────────────────────────────────────────────────────────────────── */\n\n.root {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n/* ─── Wide (both panes visible) ──────────────────────────────────────────────── */\n\n.expanded {\n  flex-direction: row;\n}\n\n.expanded .sidebar {\n  width: var(--sidebar-width, var(--gnome-layout-sidebar-width, clamp(180px, 25%, 280px)));\n  flex-shrink: 0;\n  overflow-y: auto;\n}\n\n.expanded .contentPane {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n\n/* ─── Narrow (one pane at a time) ────────────────────────────────────────────── */\n\n.collapsed {\n  flex-direction: column;\n  position: relative;\n}\n\n.collapsed .sidebar,\n.collapsed .contentPane {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  transition: transform var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n/* Sidebar slides out to the left when content is shown */\n.collapsed .sidebar.paneVisible {\n  transform: translateX(0);\n}\n\n.collapsed .sidebar.paneHidden {\n  transform: translateX(-100%);\n  pointer-events: none;\n}\n\n/* Content slides in from the right when shown */\n.collapsed .contentPane.paneVisible {\n  transform: translateX(0);\n}\n\n.collapsed .contentPane.paneHidden {\n  transform: translateX(100%);\n  pointer-events: none;\n}\n\n/* ─── Divider ────────────────────────────────────────────────────────────────── */\n\n.divider {\n  width: 1px;\n  background-color: var(--gnome-card-shade-color, rgb(0 0 0 / 0.1));\n  flex-shrink: 0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .divider {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .collapsed .sidebar,\n  .collapsed .contentPane {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,12 +1,12 @@
 var e = {
-	root: "_root_16ve4_3",
-	expanded: "_expanded_16ve4_12",
-	sidebar: "_sidebar_16ve4_16",
-	contentPane: "_contentPane_16ve4_22",
-	collapsed: "_collapsed_16ve4_30",
-	paneVisible: "_paneVisible_16ve4_46",
-	paneHidden: "_paneHidden_16ve4_50",
-	divider: "_divider_16ve4_67"
+	root: "_root_1v9it_3",
+	expanded: "_expanded_1v9it_12",
+	sidebar: "_sidebar_1v9it_16",
+	contentPane: "_contentPane_1v9it_22",
+	collapsed: "_collapsed_1v9it_30",
+	paneVisible: "_paneVisible_1v9it_46",
+	paneHidden: "_paneHidden_1v9it_50",
+	divider: "_divider_1v9it_67"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationSplitView.module.css.js","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.module.css"],"sourcesContent":["/* ─── Root ───────────────────────────────────────────────────────────────────── */\n\n.root {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n/* ─── Wide (both panes visible) ──────────────────────────────────────────────── */\n\n.expanded {\n  flex-direction: row;\n}\n\n.expanded .sidebar {\n  width: var(--sidebar-width, var(--gnome-layout-sidebar-width, clamp(180px, 25%, 280px)));\n  flex-shrink: 0;\n  overflow-y: auto;\n}\n\n.expanded .contentPane {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n\n/* ─── Narrow (one pane at a time) ────────────────────────────────────────────── */\n\n.collapsed {\n  flex-direction: column;\n  position: relative;\n}\n\n.collapsed .sidebar,\n.collapsed .contentPane {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  transition: transform var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n/* Sidebar slides out to the left when content is shown */\n.collapsed .sidebar.paneVisible {\n  transform: translateX(0);\n}\n\n.collapsed .sidebar.paneHidden {\n  transform: translateX(-100%);\n  pointer-events: none;\n}\n\n/* Content slides in from the right when shown */\n.collapsed .contentPane.paneVisible {\n  transform: translateX(0);\n}\n\n.collapsed .contentPane.paneHidden {\n  transform: translateX(100%);\n  pointer-events: none;\n}\n\n/* ─── Divider ────────────────────────────────────────────────────────────────── */\n\n.divider {\n  width: 1px;\n  background-color: var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  flex-shrink: 0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .divider {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .collapsed .sidebar,\n  .collapsed .contentPane {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"NavigationSplitView.module.css.js","names":[],"sources":["../../../src/components/NavigationSplitView/NavigationSplitView.module.css"],"sourcesContent":["/* ─── Root ───────────────────────────────────────────────────────────────────── */\n\n.root {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n/* ─── Wide (both panes visible) ──────────────────────────────────────────────── */\n\n.expanded {\n  flex-direction: row;\n}\n\n.expanded .sidebar {\n  width: var(--sidebar-width, var(--gnome-layout-sidebar-width, clamp(180px, 25%, 280px)));\n  flex-shrink: 0;\n  overflow-y: auto;\n}\n\n.expanded .contentPane {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n}\n\n/* ─── Narrow (one pane at a time) ────────────────────────────────────────────── */\n\n.collapsed {\n  flex-direction: column;\n  position: relative;\n}\n\n.collapsed .sidebar,\n.collapsed .contentPane {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  transition: transform var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease);\n}\n\n/* Sidebar slides out to the left when content is shown */\n.collapsed .sidebar.paneVisible {\n  transform: translateX(0);\n}\n\n.collapsed .sidebar.paneHidden {\n  transform: translateX(-100%);\n  pointer-events: none;\n}\n\n/* Content slides in from the right when shown */\n.collapsed .contentPane.paneVisible {\n  transform: translateX(0);\n}\n\n.collapsed .contentPane.paneHidden {\n  transform: translateX(100%);\n  pointer-events: none;\n}\n\n/* ─── Divider ────────────────────────────────────────────────────────────────── */\n\n.divider {\n  width: 1px;\n  background-color: var(--gnome-card-shade-color, rgb(0 0 0 / 0.1));\n  flex-shrink: 0;\n}\n\n@media (prefers-color-scheme: dark) {\n  .divider {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .collapsed .sidebar,\n  .collapsed .contentPane {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={view:`_view_18zs8_3`,page:`_page_18zs8_12`,pageHeader:`_pageHeader_18zs8_23`,pageTitle:`_pageTitle_18zs8_34`,pageContent:`_pageContent_18zs8_43`,enterForward:`_enterForward_18zs8_52`,"slide-in-right":`_slide-in-right_18zs8_1`,enterBack:`_enterBack_18zs8_57`,"slide-in-left":`_slide-in-left_18zs8_1`};exports.default=e;
+var e={view:`_view_jscgh_3`,page:`_page_jscgh_12`,pageHeader:`_pageHeader_jscgh_23`,pageTitle:`_pageTitle_jscgh_34`,pageContent:`_pageContent_jscgh_43`,enterForward:`_enterForward_jscgh_51`,"slide-in-right":`_slide-in-right_jscgh_1`,enterBack:`_enterBack_jscgh_56`,"slide-in-left":`_slide-in-left_jscgh_1`};exports.default=e;
 //# sourceMappingURL=NavigationView.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationView.module.css.cjs","names":[],"sources":["../../../src/components/NavigationView/NavigationView.module.css"],"sourcesContent":["/* ─── View container ────────────────────────────────────────────────────────── */\n\n.view {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n}\n\n/* ─── Page ──────────────────────────────────────────────────────────────────── */\n\n.page {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Page header (title bar) ────────────────────────────────────────────────── */\n\n.pageHeader {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 47px;\n  padding: 0 var(--gnome-space-4, 24px);\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgba(0, 0, 0, 0.12));\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  flex-shrink: 0;\n}\n\n.pageTitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-headerbar-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Page content ──────────────────────────────────────────────────────────── */\n\n.pageContent {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: var(--gnome-space-3, 16px);\n}\n\n/* ─── Enter animations ──────────────────────────────────────────────────────── */\n\n.enterForward {\n  animation: slide-in-right var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease)\n    both;\n}\n\n.enterBack {\n  animation: slide-in-left var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease)\n    both;\n}\n\n@keyframes slide-in-right {\n  from {\n    transform: translateX(40px);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes slide-in-left {\n  from {\n    transform: translateX(-40px);\n    opacity: 0;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .enterForward,\n  .enterBack {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"NavigationView.module.css.cjs","names":[],"sources":["../../../src/components/NavigationView/NavigationView.module.css"],"sourcesContent":["/* ─── View container ────────────────────────────────────────────────────────── */\n\n.view {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n}\n\n/* ─── Page ──────────────────────────────────────────────────────────────────── */\n\n.page {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n/* ─── Page header (title bar) ────────────────────────────────────────────────── */\n\n.pageHeader {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 47px;\n  padding: 0 var(--gnome-space-4, 24px);\n  border-bottom: 1px solid var(--gnome-headerbar-border-color, rgb(0 0 0 / 0.12));\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  flex-shrink: 0;\n}\n\n.pageTitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-headerbar-fg-color, rgb(0 0 0 / 0.8));\n}\n\n/* ─── Page content ──────────────────────────────────────────────────────────── */\n\n.pageContent {\n  flex: 1;\n  overflow: hidden auto;\n  padding: var(--gnome-space-3, 16px);\n}\n\n/* ─── Enter animations ──────────────────────────────────────────────────────── */\n\n.enterForward {\n  animation: slide-in-right var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease)\n    both;\n}\n\n.enterBack {\n  animation: slide-in-left var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease)\n    both;\n}\n\n@keyframes slide-in-right {\n  from {\n    transform: translateX(40px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes slide-in-left {\n  from {\n    transform: translateX(-40px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .enterForward,\n  .enterBack {\n    animation: none;\n  }\n}\n"],"mappings":""}