@gnome-ui/react 1.47.0 → 1.49.0

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}\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\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 .active {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  box-shadow: inset 0 0 0 1px\n    color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 40%, transparent);\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 .active {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n    box-shadow: inset 0 0 0 1px\n      color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\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 .active {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\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 .active {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\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 .active {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  color: var(--gnome-accent-fg-color, #ffffff);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  box-shadow: none;\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 .active {\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  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 .active {\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/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .item {\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  -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":""}

package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.cjs

@@ -1,2 +1,2 @@
-const e=require("../Icon/Icon.cjs"),t=require("./InlineViewSwitcher.module.css.cjs"),n=require("./InlineViewSwitcher.cjs");let r=require("react/jsx-runtime");var i=({name:i,label:a,icon:o,disabled:s,className:c,...l})=>{let{value:u,onValueChange:d}=n.useInlineViewSwitcher(),f=u===i,p=o&&!a;return(0,r.jsxs)(`button`,{type:`button`,role:`radio`,"aria-checked":f,tabIndex:f?0:-1,disabled:s,onClick:()=>d(i),className:[t.default.item,f?t.default.active:null,p?t.default.iconOnly:null,c].filter(Boolean).join(` `),...l,children:[o&&(0,r.jsx)(`span`,{className:t.default.itemIcon,children:(0,r.jsx)(e.Icon,{icon:o,size:`md`,"aria-hidden":!0})}),a&&(0,r.jsx)(`span`,{className:t.default.itemLabel,children:a})]})};exports.InlineViewSwitcherItem=i;
+const e=require("../Icon/Icon.cjs"),t=require("./InlineViewSwitcher.module.css.cjs"),n=require("./InlineViewSwitcher.cjs");let r=require("react/jsx-runtime");var i=({name:i,label:a,icon:o,disabled:s,className:c,...l})=>{let{value:u,onValueChange:d,compact:f}=n.useInlineViewSwitcher(),p=u===i,m=!!a&&!(f&&o),h=!!o&&!m;return(0,r.jsxs)(`button`,{type:`button`,role:`radio`,"aria-checked":p,tabIndex:p?0:-1,disabled:s,onClick:()=>d(i),className:[t.default.item,p?t.default.active:null,h?t.default.iconOnly:null,c].filter(Boolean).join(` `),...l,children:[o&&(0,r.jsx)(`span`,{className:t.default.itemIcon,children:(0,r.jsx)(e.Icon,{icon:o,size:`md`,"aria-hidden":!0})}),m&&(0,r.jsx)(`span`,{className:t.default.itemLabel,children:a})]})};i.displayName=`InlineViewSwitcherItem`,exports.InlineViewSwitcherItem=i;
 //# sourceMappingURL=InlineViewSwitcherItem.cjs.map

package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineViewSwitcherItem.cjs","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcherItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { useInlineViewSwitcher } from './InlineViewSwitcher';\nimport styles from './InlineViewSwitcher.module.css';\n\nexport interface InlineViewSwitcherItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** String identifier — used as the switcher's `value` when this item is active. */\n  name: string;\n  /** Visible label. */\n  label?: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n}\n\n/**\n * Individual view option inside an `InlineViewSwitcher`.\n *\n * Can be icon-only, label-only, or icon + label. For icon-only items always\n * provide an `aria-label` so screen readers can identify the view.\n */\nexport const InlineViewSwitcherItem = ({\n  name,\n  label,\n  icon,\n  disabled,\n  className,\n  ...props\n}: InlineViewSwitcherItemProps) => {\n  const { value, onValueChange } = useInlineViewSwitcher();\n  const active = value === name;\n  const iconOnly = icon && !label;\n\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={active}\n      tabIndex={active ? 0 : -1}\n      disabled={disabled}\n      onClick={() => onValueChange(name)}\n      className={[\n        styles.item,\n        active ? styles.active : null,\n        iconOnly ? styles.iconOnly : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {label && <span className={styles.itemLabel}>{label}</span>}\n    </button>\n  );\n};\n"],"mappings":"8JAuBA,IAAa,GAA0B,CACrC,OACA,QACA,OACA,WACA,YACA,GAAG,KAC8B,CACjC,GAAM,CAAE,QAAO,iBAAkB,EAAA,sBAAsB,EACjD,EAAS,IAAU,EACnB,EAAW,GAAQ,CAAC,EAE1B,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,KAAK,QACL,eAAc,EACd,SAAU,EAAS,EAAI,GACb,WACV,YAAe,EAAc,CAAI,EACjC,UAAW,CACT,EAAA,QAAO,KACP,EAAS,EAAA,QAAO,OAAS,KACzB,EAAW,EAAA,QAAO,SAAW,KAC7B,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,WAfN,CAiBG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,EAAa,CAAA,CACrC,CAAA,EAEP,IAAS,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,CAAY,CAAA,CACpD,GAEZ"}
+{"version":3,"file":"InlineViewSwitcherItem.cjs","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcherItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { useInlineViewSwitcher } from './InlineViewSwitcher';\nimport styles from './InlineViewSwitcher.module.css';\n\nexport interface InlineViewSwitcherItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** String identifier — used as the switcher's `value` when this item is active. */\n  name: string;\n  /** Visible label. */\n  label?: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n}\n\n/**\n * Individual view option inside an `InlineViewSwitcher`.\n *\n * Can be icon-only, label-only, or icon + label. For icon-only items always\n * provide an `aria-label` so screen readers can identify the view.\n */\nexport const InlineViewSwitcherItem = ({\n  name,\n  label,\n  icon,\n  disabled,\n  className,\n  ...props\n}: InlineViewSwitcherItemProps) => {\n  const { value, onValueChange, compact } = useInlineViewSwitcher();\n  const active = value === name;\n  // In compact mode, hide the label when an icon is present as a fallback\n  const showLabel = !!label && !(compact && icon);\n  const isIconOnly = !!icon && !showLabel;\n\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={active}\n      tabIndex={active ? 0 : -1}\n      disabled={disabled}\n      onClick={() => onValueChange(name)}\n      className={[\n        styles.item,\n        active ? styles.active : null,\n        isIconOnly ? styles.iconOnly : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {showLabel && <span className={styles.itemLabel}>{label}</span>}\n    </button>\n  );\n};\n\nInlineViewSwitcherItem.displayName = 'InlineViewSwitcherItem';\n"],"mappings":"8JAuBA,IAAa,GAA0B,CACrC,OACA,QACA,OACA,WACA,YACA,GAAG,KAC8B,CACjC,GAAM,CAAE,QAAO,gBAAe,WAAY,EAAA,sBAAsB,EAC1D,EAAS,IAAU,EAEnB,EAAY,CAAC,CAAC,GAAS,EAAE,GAAW,GACpC,EAAa,CAAC,CAAC,GAAQ,CAAC,EAE9B,OACE,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,KAAK,QACL,eAAc,EACd,SAAU,EAAS,EAAI,GACb,WACV,YAAe,EAAc,CAAI,EACjC,UAAW,CACT,EAAA,QAAO,KACP,EAAS,EAAA,QAAO,OAAS,KACzB,EAAa,EAAA,QAAO,SAAW,KAC/B,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,WAfN,CAiBG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,EAAa,CAAA,CACrC,CAAA,EAEP,IAAa,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,CAAY,CAAA,CACxD,GAEZ,EAEA,EAAuB,YAAc"}

package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.d.ts

@@ -14,4 +14,7 @@ export interface InlineViewSwitcherItemProps extends ButtonHTMLAttributes<HTMLBu
  * Can be icon-only, label-only, or icon + label. For icon-only items always
  * provide an `aria-label` so screen readers can identify the view.
  */
-export declare const InlineViewSwitcherItem: ({ name, label, icon, disabled, className, ...props }: InlineViewSwitcherItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineViewSwitcherItem: {
+    ({ name, label, icon, disabled, className, ...props }: InlineViewSwitcherItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.js

@@ -4,18 +4,18 @@ import { useInlineViewSwitcher as n } from "./InlineViewSwitcher.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/InlineViewSwitcher/InlineViewSwitcherItem.tsx
 var a = ({ name: a, label: o, icon: s, disabled: c, className: l, ...u }) => {
-	let { value: d, onValueChange: f } = n(), p = d === a, m = s && !o;
+	let { value: d, onValueChange: f, compact: p } = n(), m = d === a, h = !!o && !(p && s), g = !!s && !h;
 	return /* @__PURE__ */ i("button", {
 		type: "button",
 		role: "radio",
-		"aria-checked": p,
-		tabIndex: p ? 0 : -1,
+		"aria-checked": m,
+		tabIndex: m ? 0 : -1,
 		disabled: c,
 		onClick: () => f(a),
 		className: [
 			t.item,
-			p ? t.active : null,
-			m ? t.iconOnly : null,
+			m ? t.active : null,
+			g ? t.iconOnly : null,
 			l
 		].filter(Boolean).join(" "),
 		...u,
@@ -26,12 +26,13 @@ var a = ({ name: a, label: o, icon: s, disabled: c, className: l, ...u }) => {
 				size: "md",
 				"aria-hidden": !0
 			})
-		}), o && /* @__PURE__ */ r("span", {
+		}), h && /* @__PURE__ */ r("span", {
 			className: t.itemLabel,
 			children: o
 		})]
 	});
 };
+a.displayName = "InlineViewSwitcherItem";
 //#endregion
 export { a as InlineViewSwitcherItem };
 

package/dist/components/InlineViewSwitcher/InlineViewSwitcherItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineViewSwitcherItem.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcherItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { useInlineViewSwitcher } from './InlineViewSwitcher';\nimport styles from './InlineViewSwitcher.module.css';\n\nexport interface InlineViewSwitcherItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** String identifier — used as the switcher's `value` when this item is active. */\n  name: string;\n  /** Visible label. */\n  label?: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n}\n\n/**\n * Individual view option inside an `InlineViewSwitcher`.\n *\n * Can be icon-only, label-only, or icon + label. For icon-only items always\n * provide an `aria-label` so screen readers can identify the view.\n */\nexport const InlineViewSwitcherItem = ({\n  name,\n  label,\n  icon,\n  disabled,\n  className,\n  ...props\n}: InlineViewSwitcherItemProps) => {\n  const { value, onValueChange } = useInlineViewSwitcher();\n  const active = value === name;\n  const iconOnly = icon && !label;\n\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={active}\n      tabIndex={active ? 0 : -1}\n      disabled={disabled}\n      onClick={() => onValueChange(name)}\n      className={[\n        styles.item,\n        active ? styles.active : null,\n        iconOnly ? styles.iconOnly : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {label && <span className={styles.itemLabel}>{label}</span>}\n    </button>\n  );\n};\n"],"mappings":";;;;;AAuBA,IAAa,KAA0B,EACrC,SACA,UACA,SACA,aACA,cACA,GAAG,QAC8B;CACjC,IAAM,EAAE,UAAO,qBAAkB,EAAsB,GACjD,IAAS,MAAU,GACnB,IAAW,KAAQ,CAAC;CAE1B,OACE,kBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,gBAAc;EACd,UAAU,IAAS,IAAI;EACb;EACV,eAAe,EAAc,CAAI;EACjC,WAAW;GACT,EAAO;GACP,IAAS,EAAO,SAAS;GACzB,IAAW,EAAO,WAAW;GAC7B;EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;EACX,GAAI;YAfN,CAiBG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD;IAAY;IAAM,MAAK;IAAK,eAAA;GAAa,CAAA;EACrC,CAAA,GAEP,KAAS,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAY;EAAY,CAAA,CACpD;;AAEZ"}
+{"version":3,"file":"InlineViewSwitcherItem.js","names":[],"sources":["../../../src/components/InlineViewSwitcher/InlineViewSwitcherItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport type { ButtonHTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { useInlineViewSwitcher } from './InlineViewSwitcher';\nimport styles from './InlineViewSwitcher.module.css';\n\nexport interface InlineViewSwitcherItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** String identifier — used as the switcher's `value` when this item is active. */\n  name: string;\n  /** Visible label. */\n  label?: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n}\n\n/**\n * Individual view option inside an `InlineViewSwitcher`.\n *\n * Can be icon-only, label-only, or icon + label. For icon-only items always\n * provide an `aria-label` so screen readers can identify the view.\n */\nexport const InlineViewSwitcherItem = ({\n  name,\n  label,\n  icon,\n  disabled,\n  className,\n  ...props\n}: InlineViewSwitcherItemProps) => {\n  const { value, onValueChange, compact } = useInlineViewSwitcher();\n  const active = value === name;\n  // In compact mode, hide the label when an icon is present as a fallback\n  const showLabel = !!label && !(compact && icon);\n  const isIconOnly = !!icon && !showLabel;\n\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={active}\n      tabIndex={active ? 0 : -1}\n      disabled={disabled}\n      onClick={() => onValueChange(name)}\n      className={[\n        styles.item,\n        active ? styles.active : null,\n        isIconOnly ? styles.iconOnly : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {showLabel && <span className={styles.itemLabel}>{label}</span>}\n    </button>\n  );\n};\n\nInlineViewSwitcherItem.displayName = 'InlineViewSwitcherItem';\n"],"mappings":";;;;;AAuBA,IAAa,KAA0B,EACrC,SACA,UACA,SACA,aACA,cACA,GAAG,QAC8B;CACjC,IAAM,EAAE,UAAO,kBAAe,eAAY,EAAsB,GAC1D,IAAS,MAAU,GAEnB,IAAY,CAAC,CAAC,KAAS,EAAE,KAAW,IACpC,IAAa,CAAC,CAAC,KAAQ,CAAC;CAE9B,OACE,kBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,gBAAc;EACd,UAAU,IAAS,IAAI;EACb;EACV,eAAe,EAAc,CAAI;EACjC,WAAW;GACT,EAAO;GACP,IAAS,EAAO,SAAS;GACzB,IAAa,EAAO,WAAW;GAC/B;EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;EACX,GAAI;YAfN,CAiBG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD;IAAY;IAAM,MAAK;IAAK,eAAA;GAAa,CAAA;EACrC,CAAA,GAEP,KAAa,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAY;EAAY,CAAA,CACxD;;AAEZ;AAEA,EAAuB,cAAc"}

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

@@ -1,4 +1,4 @@
-export type { InlineViewSwitcherProps, InlineViewSwitcherVariant, } from './InlineViewSwitcher';
+export type { InlineViewSwitcherOverflow, InlineViewSwitcherProps, InlineViewSwitcherVariant, } from './InlineViewSwitcher';
 export { InlineViewSwitcher } from './InlineViewSwitcher';
 export type { InlineViewSwitcherItemProps } from './InlineViewSwitcherItem';
 export { InlineViewSwitcherItem } from './InlineViewSwitcherItem';

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":"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"}

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":"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"}

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

@@ -0,0 +1,2 @@
+var e={backdrop:`_backdrop_1g4xm_3`,"backdrop-in":`_backdrop-in_1g4xm_1`,closing:`_closing_1g4xm_19`,"backdrop-out":`_backdrop-out_1g4xm_1`,modal:`_modal_1g4xm_43`,entering:`_entering_1g4xm_60`,"modal-in":`_modal-in_1g4xm_1`,"modal-out":`_modal-out_1g4xm_1`,header:`_header_1g4xm_92`,closeBtn:`_closeBtn_1g4xm_103`,title:`_title_1g4xm_144`,actions:`_actions_1g4xm_156`,btn:`_btn_1g4xm_165`,"btn-default":`_btn-default_1g4xm_210`,"btn-suggested":`_btn-suggested_1g4xm_214`,"btn-destructive":`_btn-destructive_1g4xm_228`,body:`_body_1g4xm_236`};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\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: var(--gnome-dialog-backdrop-color, rgba(0, 0, 0, 0.5));\n  backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n  -webkit-backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.backdrop.closing {\n  animation: backdrop-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes backdrop-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n/* ─── Modal card ────────────────────────────────────────────────────────────── */\n\n.modal {\n  width: min(720px, calc(100vw - 48px));\n  max-height: 90dvh;\n  display: flex;\n  flex-direction: column;\n\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 40px rgba(0, 0, 0, 0.22),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n\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  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  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, rgba(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\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  font-size: 1.25rem;\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\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\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: var(--gnome-line-height-title, 1.3);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\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\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\n  cursor: pointer;\n  white-space: nowrap;\n\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/* stylelint-disable selector-class-pattern */\n\n.btn-default {\n  color: var(--gnome-window-fg-color, rgba(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/* stylelint-enable selector-class-pattern */\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 rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .header {\n    border-bottom-color: rgba(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_1g4xm_3",
+	"backdrop-in": "_backdrop-in_1g4xm_1",
+	closing: "_closing_1g4xm_19",
+	"backdrop-out": "_backdrop-out_1g4xm_1",
+	modal: "_modal_1g4xm_43",
+	entering: "_entering_1g4xm_60",
+	"modal-in": "_modal-in_1g4xm_1",
+	"modal-out": "_modal-out_1g4xm_1",
+	header: "_header_1g4xm_92",
+	closeBtn: "_closeBtn_1g4xm_103",
+	title: "_title_1g4xm_144",
+	actions: "_actions_1g4xm_156",
+	btn: "_btn_1g4xm_165",
+	"btn-default": "_btn-default_1g4xm_210",
+	"btn-suggested": "_btn-suggested_1g4xm_214",
+	"btn-destructive": "_btn-destructive_1g4xm_228",
+	body: "_body_1g4xm_236"
+};
+//#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\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: var(--gnome-dialog-backdrop-color, rgba(0, 0, 0, 0.5));\n  backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n  -webkit-backdrop-filter: blur(var(--gnome-dialog-backdrop-blur, 4px));\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.backdrop.closing {\n  animation: backdrop-out var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes backdrop-out {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n/* ─── Modal card ────────────────────────────────────────────────────────────── */\n\n.modal {\n  width: min(720px, calc(100vw - 48px));\n  max-height: 90dvh;\n  display: flex;\n  flex-direction: column;\n\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 40px rgba(0, 0, 0, 0.22),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n\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  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  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, rgba(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\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  font-size: 1.25rem;\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\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\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: var(--gnome-line-height-title, 1.3);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\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\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\n  cursor: pointer;\n  white-space: nowrap;\n\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/* stylelint-disable selector-class-pattern */\n\n.btn-default {\n  color: var(--gnome-window-fg-color, rgba(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/* stylelint-enable selector-class-pattern */\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 rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .header {\n    border-bottom-color: rgba(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/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./components/AboutDialog/AboutDialog.cjs"),ee=require("./components/ActionRow/ActionRow.cjs"),t=require("./components/Avatar/Avatar.cjs"),n=require("./components/AvatarRotator/AvatarRotator.cjs"),r=require("./components/Badge/Badge.cjs"),i=require("./components/Banner/Banner.cjs"),a=require("./components/Bin/Bin.cjs"),te=require("./components/Blockquote/Blockquote.cjs"),o=require("./components/BottomSheet/BottomSheet.cjs"),s=require("./components/Box/Box.cjs"),c=require("./components/Separator/Separator.cjs"),l=require("./components/BoxedList/BoxedList.cjs"),u=require("./components/BreakpointBin/BreakpointBin.cjs"),d=require("./components/Button/Button.cjs"),f=require("./components/ButtonContent/ButtonContent.cjs"),p=require("./components/ButtonRow/ButtonRow.cjs"),m=require("./components/Card/Card.cjs"),h=require("./components/Carousel/Carousel.cjs"),g=require("./components/CheckRow/CheckRow.cjs"),_=require("./components/Checkbox/Checkbox.cjs"),v=require("./components/Icon/Icon.cjs"),y=require("./components/Chip/Chip.cjs"),b=require("./components/Clamp/Clamp.cjs"),x=require("./components/ColorPicker/ColorPicker.cjs"),S=require("./components/ColumnView/ColumnView.cjs"),C=require("./components/ComboRow/ComboRow.cjs"),w=require("./components/GnomeProvider/GnomeContext.cjs"),T=require("./components/ContributionGraph/ContributionGraph.cjs"),E=require("./components/CountDownTimer/CountDownTimer.cjs"),D=require("./components/Dialog/Dialog.cjs"),O=require("./components/Drawer/Drawer.cjs"),k=require("./components/Dropdown/Dropdown.cjs"),A=require("./components/EntryRow/EntryRow.cjs"),j=require("./components/ExpanderRow/ExpanderRow.cjs"),M=require("./components/Footer/Footer.cjs"),N=require("./components/Frame/Frame.cjs"),P=require("./components/GnomeProvider/GnomeProvider.cjs"),F=require("./components/HeaderBar/HeaderBar.cjs"),I=require("./components/Tooltip/Tooltip.cjs"),L=require("./components/IconButton/IconButton.cjs"),R=require("./components/InlineViewSwitcher/InlineViewSwitcher.cjs"),z=require("./components/InlineViewSwitcher/InlineViewSwitcherItem.cjs"),B=require("./components/Link/Link.cjs"),V=require("./components/LinkedGroup/LinkedGroup.cjs"),H=require("./hooks/useBreakpoint.cjs"),U=require("./components/NavigationSplitView/NavigationSplitView.cjs"),W=require("./components/NavigationView/NavigationView.cjs"),G=require("./components/OverlaySplitView/OverlaySplitView.cjs"),K=require("./components/PasswordEntryRow/PasswordEntryRow.cjs"),q=require("./components/PathBar/PathBar.cjs"),J=require("./components/Popover/Popover.cjs"),Y=require("./components/PreferencesDialog/PreferencesDialog.cjs"),X=require("./components/PreferencesGroup/PreferencesGroup.cjs"),Z=require("./components/PreferencesPage/PreferencesPage.cjs"),Q=require("./components/ProgressBar/ProgressBar.cjs"),ne=require("./components/RadioButton/RadioButton.cjs"),re=require("./components/ScrollToTop/ScrollToTop.cjs"),ie=require("./components/Spinner/Spinner.cjs"),ae=require("./components/SearchBar/SearchBar.cjs"),oe=require("./components/SegmentedBar/SegmentedBar.cjs"),se=require("./components/ShortcutLabel/ShortcutLabel.cjs"),ce=require("./components/ShortcutsDialog/ShortcutsDialog.cjs"),le=require("./components/StatusPage/StatusPage.cjs"),$=require("./components/Sidebar/Sidebar.cjs"),ue=require("./components/Sidebar/SidebarItem.cjs"),de=require("./components/Sidebar/SidebarSection.cjs"),fe=require("./components/Skeleton/Skeleton.cjs"),pe=require("./components/Slider/Slider.cjs"),me=require("./components/SpinButton/SpinButton.cjs"),he=require("./components/SpinRow/SpinRow.cjs"),ge=require("./components/SplitButton/SplitButton.cjs"),_e=require("./components/StatusBadge/StatusBadge.cjs"),ve=require("./components/Switch/Switch.cjs"),ye=require("./components/SwitchRow/SwitchRow.cjs"),be=require("./components/Tabs/TabBar.cjs"),xe=require("./components/Tabs/TabItem.cjs"),Se=require("./components/Tabs/TabPanel.cjs"),Ce=require("./components/TerminalView/TerminalView.cjs"),we=require("./components/Text/Text.cjs"),Te=require("./components/TextField/TextField.cjs"),Ee=require("./components/Timeline/Timeline.cjs"),De=require("./components/Toast/Toast.cjs"),Oe=require("./components/Toast/Toaster.cjs"),ke=require("./components/ToggleGroup/ToggleGroup.cjs"),Ae=require("./components/ToggleGroup/ToggleGroupItem.cjs"),je=require("./components/Toolbar/Spacer.cjs"),Me=require("./components/Toolbar/Toolbar.cjs"),Ne=require("./components/ToolbarView/ToolbarView.cjs"),Pe=require("./components/ViewSwitcher/ViewSwitcher.cjs"),Fe=require("./components/ViewSwitcher/ViewSwitcherItem.cjs"),Ie=require("./components/ViewSwitcherBar/ViewSwitcherBar.cjs"),Le=require("./components/ViewSwitcherSidebar/ViewSwitcherSidebar.cjs"),Re=require("./components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.cjs"),ze=require("./components/WindowTitle/WindowTitle.cjs"),Be=require("./components/WrapBox/WrapBox.cjs");exports.AboutDialog=e.AboutDialog,exports.ActionRow=ee.ActionRow,exports.Avatar=t.Avatar,exports.AvatarRotator=n.AvatarRotator,exports.Badge=r.Badge,exports.Banner=i.Banner,exports.Bin=a.Bin,exports.Blockquote=te.Blockquote,exports.BottomSheet=o.BottomSheet,exports.Box=s.Box,exports.BoxedList=l.BoxedList,exports.BreakpointBin=u.BreakpointBin,exports.Button=d.Button,exports.ButtonContent=f.ButtonContent,exports.ButtonRow=p.ButtonRow,exports.Card=m.Card,exports.Carousel=h.Carousel,exports.CarouselIndicatorDots=h.CarouselIndicatorDots,exports.CarouselIndicatorLines=h.CarouselIndicatorLines,exports.CheckRow=g.CheckRow,exports.Checkbox=_.Checkbox,exports.Chip=y.Chip,exports.Clamp=b.Clamp,exports.ColorPicker=x.ColorPicker,exports.ColorSwatch=x.ColorSwatch,exports.ColumnView=S.ColumnView,exports.ComboRow=C.ComboRow,exports.ContributionGraph=T.ContributionGraph,exports.CountDownTimer=E.CountDownTimer,exports.Dialog=D.Dialog,exports.Drawer=O.Drawer,exports.Dropdown=k.Dropdown,exports.EntryRow=A.EntryRow,exports.ExpanderRow=j.ExpanderRow,exports.Footer=M.Footer,exports.Frame=N.Frame,exports.GNOME_BREAKPOINTS=H.GNOME_BREAKPOINTS,exports.GNOME_PALETTE=x.GNOME_PALETTE,exports.GnomeProvider=P.GnomeProvider,exports.HeaderBar=F.HeaderBar,exports.Icon=v.Icon,exports.IconButton=L.IconButton,exports.InlineViewSwitcher=R.InlineViewSwitcher,exports.InlineViewSwitcherItem=z.InlineViewSwitcherItem,exports.Link=B.Link,exports.LinkedGroup=V.LinkedGroup,exports.NavigationPage=W.NavigationPage,exports.NavigationSplitView=U.NavigationSplitView,exports.NavigationView=W.NavigationView,exports.OverlaySplitView=G.OverlaySplitView,exports.PasswordEntryRow=K.PasswordEntryRow,exports.PathBar=q.PathBar,exports.Popover=J.Popover,exports.PreferencesDialog=Y.PreferencesDialog,exports.PreferencesGroup=X.PreferencesGroup,exports.PreferencesPage=Z.PreferencesPage,exports.ProgressBar=Q.ProgressBar,exports.RadioButton=ne.RadioButton,exports.ScrollToTop=re.ScrollToTop,exports.SearchBar=ae.SearchBar,exports.SegmentedBar=oe.SegmentedBar,exports.Separator=c.Separator,exports.ShortcutLabel=se.ShortcutLabel,exports.ShortcutsDialog=ce.ShortcutsDialog,exports.Sidebar=$.Sidebar,exports.SidebarCollapsedContext=$.SidebarCollapsedContext,exports.SidebarItem=ue.SidebarItem,exports.SidebarSection=de.SidebarSection,exports.Skeleton=fe.Skeleton,exports.Slider=pe.Slider,exports.Spacer=je.Spacer,exports.SpinButton=me.SpinButton,exports.SpinRow=he.SpinRow,exports.Spinner=ie.Spinner,exports.SplitButton=ge.SplitButton,exports.StatusBadge=_e.StatusBadge,exports.StatusPage=le.StatusPage,exports.Switch=ve.Switch,exports.SwitchRow=ye.SwitchRow,exports.TabBar=be.TabBar,exports.TabItem=xe.TabItem,exports.TabPanel=Se.TabPanel,exports.TerminalView=Ce.TerminalView,exports.Text=we.Text,exports.TextField=Te.TextField,exports.Timeline=Ee.Timeline,exports.Toast=De.Toast,exports.Toaster=Oe.Toaster,exports.ToggleGroup=ke.ToggleGroup,exports.ToggleGroupItem=Ae.ToggleGroupItem,exports.Toolbar=Me.Toolbar,exports.ToolbarView=Ne.ToolbarView,exports.Tooltip=I.Tooltip,exports.ViewSwitcher=Pe.ViewSwitcher,exports.ViewSwitcherBar=Ie.ViewSwitcherBar,exports.ViewSwitcherItem=Fe.ViewSwitcherItem,exports.ViewSwitcherSidebar=Le.ViewSwitcherSidebar,exports.ViewSwitcherSidebarItem=Re.ViewSwitcherSidebarItem,exports.WindowTitle=ze.WindowTitle,exports.WrapBox=Be.WrapBox,exports.useAccentColor=w.useAccentColor,exports.useBreakpoint=H.useBreakpoint,exports.useColorScheme=w.useColorScheme,exports.useDateTimeFormatter=w.useDateTimeFormatter,exports.useDir=w.useDir,exports.useLocale=w.useLocale,exports.useNavigation=W.useNavigation,exports.useNumberFormatter=w.useNumberFormatter,exports.useResolvedColorScheme=w.useResolvedColorScheme,exports.useSidebarCollapsed=$.useSidebarCollapsed;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const ee=require("./components/AboutDialog/AboutDialog.cjs"),te=require("./components/ActionRow/ActionRow.cjs"),e=require("./components/Avatar/Avatar.cjs"),t=require("./components/AvatarGroup/AvatarGroup.cjs"),n=require("./components/AvatarRotator/AvatarRotator.cjs"),r=require("./components/Badge/Badge.cjs"),i=require("./components/Banner/Banner.cjs"),ne=require("./components/Bin/Bin.cjs"),a=require("./components/Blockquote/Blockquote.cjs"),o=require("./components/BottomSheet/BottomSheet.cjs"),s=require("./components/Box/Box.cjs"),c=require("./components/Separator/Separator.cjs"),l=require("./components/BoxedList/BoxedList.cjs"),u=require("./components/BreakpointBin/BreakpointBin.cjs"),d=require("./components/Button/Button.cjs"),f=require("./components/ButtonContent/ButtonContent.cjs"),p=require("./components/ButtonRow/ButtonRow.cjs"),m=require("./components/Card/Card.cjs"),h=require("./components/Carousel/Carousel.cjs"),g=require("./components/CheckRow/CheckRow.cjs"),_=require("./components/Checkbox/Checkbox.cjs"),v=require("./components/Icon/Icon.cjs"),y=require("./components/Chip/Chip.cjs"),b=require("./components/Clamp/Clamp.cjs"),x=require("./components/ColorPicker/ColorPicker.cjs"),S=require("./components/ColumnView/ColumnView.cjs"),C=require("./components/ComboRow/ComboRow.cjs"),w=require("./components/GnomeProvider/GnomeContext.cjs"),T=require("./components/ContributionGraph/ContributionGraph.cjs"),E=require("./components/CountDownTimer/CountDownTimer.cjs"),D=require("./components/Dialog/Dialog.cjs"),O=require("./components/Drawer/Drawer.cjs"),k=require("./components/Dropdown/Dropdown.cjs"),A=require("./components/EntryRow/EntryRow.cjs"),j=require("./components/ExpanderRow/ExpanderRow.cjs"),M=require("./components/Footer/Footer.cjs"),N=require("./components/Frame/Frame.cjs"),P=require("./components/GnomeProvider/GnomeProvider.cjs"),F=require("./components/HeaderBar/HeaderBar.cjs"),I=require("./components/Tooltip/Tooltip.cjs"),L=require("./components/IconButton/IconButton.cjs"),R=require("./components/InlineViewSwitcher/InlineViewSwitcher.cjs"),z=require("./components/InlineViewSwitcher/InlineViewSwitcherItem.cjs"),B=require("./components/Link/Link.cjs"),V=require("./components/LinkedGroup/LinkedGroup.cjs"),H=require("./components/Modal/Modal.cjs"),U=require("./hooks/useBreakpoint.cjs"),W=require("./components/NavigationSplitView/NavigationSplitView.cjs"),G=require("./components/NavigationView/NavigationView.cjs"),K=require("./components/OverlaySplitView/OverlaySplitView.cjs"),q=require("./components/PasswordEntryRow/PasswordEntryRow.cjs"),J=require("./components/PathBar/PathBar.cjs"),Y=require("./components/Popover/Popover.cjs"),X=require("./components/PreferencesDialog/PreferencesDialog.cjs"),Z=require("./components/PreferencesGroup/PreferencesGroup.cjs"),Q=require("./components/PreferencesPage/PreferencesPage.cjs"),re=require("./components/ProgressBar/ProgressBar.cjs"),ie=require("./components/RadioButton/RadioButton.cjs"),ae=require("./components/ScrollToTop/ScrollToTop.cjs"),oe=require("./components/Spinner/Spinner.cjs"),se=require("./components/SearchBar/SearchBar.cjs"),ce=require("./components/SegmentedBar/SegmentedBar.cjs"),le=require("./components/ShortcutLabel/ShortcutLabel.cjs"),ue=require("./components/ShortcutsDialog/ShortcutsDialog.cjs"),de=require("./components/StatusPage/StatusPage.cjs"),$=require("./components/Sidebar/Sidebar.cjs"),fe=require("./components/Sidebar/SidebarItem.cjs"),pe=require("./components/Sidebar/SidebarSection.cjs"),me=require("./components/Skeleton/Skeleton.cjs"),he=require("./components/Slider/Slider.cjs"),ge=require("./components/SpinButton/SpinButton.cjs"),_e=require("./components/SpinRow/SpinRow.cjs"),ve=require("./components/SplitButton/SplitButton.cjs"),ye=require("./components/StatusBadge/StatusBadge.cjs"),be=require("./components/Switch/Switch.cjs"),xe=require("./components/SwitchRow/SwitchRow.cjs"),Se=require("./components/Tabs/TabBar.cjs"),Ce=require("./components/Tabs/TabItem.cjs"),we=require("./components/Tabs/TabPanel.cjs"),Te=require("./components/TerminalView/TerminalView.cjs"),Ee=require("./components/Text/Text.cjs"),De=require("./components/TextField/TextField.cjs"),Oe=require("./components/Timeline/Timeline.cjs"),ke=require("./components/Toast/Toast.cjs"),Ae=require("./components/Toast/Toaster.cjs"),je=require("./components/ToggleGroup/ToggleGroup.cjs"),Me=require("./components/ToggleGroup/ToggleGroupItem.cjs"),Ne=require("./components/Toolbar/Spacer.cjs"),Pe=require("./components/Toolbar/Toolbar.cjs"),Fe=require("./components/ToolbarView/ToolbarView.cjs"),Ie=require("./components/ViewSwitcher/ViewSwitcher.cjs"),Le=require("./components/ViewSwitcher/ViewSwitcherItem.cjs"),Re=require("./components/ViewSwitcherBar/ViewSwitcherBar.cjs"),ze=require("./components/ViewSwitcherSidebar/ViewSwitcherSidebar.cjs"),Be=require("./components/ViewSwitcherSidebar/ViewSwitcherSidebarItem.cjs"),Ve=require("./components/WindowTitle/WindowTitle.cjs"),He=require("./components/WrapBox/WrapBox.cjs");exports.AboutDialog=ee.AboutDialog,exports.ActionRow=te.ActionRow,exports.Avatar=e.Avatar,exports.AvatarGroup=t.AvatarGroup,exports.AvatarRotator=n.AvatarRotator,exports.Badge=r.Badge,exports.Banner=i.Banner,exports.Bin=ne.Bin,exports.Blockquote=a.Blockquote,exports.BottomSheet=o.BottomSheet,exports.Box=s.Box,exports.BoxedList=l.BoxedList,exports.BreakpointBin=u.BreakpointBin,exports.Button=d.Button,exports.ButtonContent=f.ButtonContent,exports.ButtonRow=p.ButtonRow,exports.Card=m.Card,exports.Carousel=h.Carousel,exports.CarouselIndicatorDots=h.CarouselIndicatorDots,exports.CarouselIndicatorLines=h.CarouselIndicatorLines,exports.CheckRow=g.CheckRow,exports.Checkbox=_.Checkbox,exports.Chip=y.Chip,exports.Clamp=b.Clamp,exports.ColorPicker=x.ColorPicker,exports.ColorSwatch=x.ColorSwatch,exports.ColumnView=S.ColumnView,exports.ComboRow=C.ComboRow,exports.ContributionGraph=T.ContributionGraph,exports.CountDownTimer=E.CountDownTimer,exports.Dialog=D.Dialog,exports.Drawer=O.Drawer,exports.Dropdown=k.Dropdown,exports.EntryRow=A.EntryRow,exports.ExpanderRow=j.ExpanderRow,exports.Footer=M.Footer,exports.Frame=N.Frame,exports.GNOME_BREAKPOINTS=U.GNOME_BREAKPOINTS,exports.GNOME_PALETTE=x.GNOME_PALETTE,exports.GnomeProvider=P.GnomeProvider,exports.HeaderBar=F.HeaderBar,exports.Icon=v.Icon,exports.IconButton=L.IconButton,exports.InlineViewSwitcher=R.InlineViewSwitcher,exports.InlineViewSwitcherItem=z.InlineViewSwitcherItem,exports.Link=B.Link,exports.LinkedGroup=V.LinkedGroup,exports.Modal=H.Modal,exports.NavigationPage=G.NavigationPage,exports.NavigationSplitView=W.NavigationSplitView,exports.NavigationView=G.NavigationView,exports.OverlaySplitView=K.OverlaySplitView,exports.PasswordEntryRow=q.PasswordEntryRow,exports.PathBar=J.PathBar,exports.Popover=Y.Popover,exports.PreferencesDialog=X.PreferencesDialog,exports.PreferencesGroup=Z.PreferencesGroup,exports.PreferencesPage=Q.PreferencesPage,exports.ProgressBar=re.ProgressBar,exports.RadioButton=ie.RadioButton,exports.ScrollToTop=ae.ScrollToTop,exports.SearchBar=se.SearchBar,exports.SegmentedBar=ce.SegmentedBar,exports.Separator=c.Separator,exports.ShortcutLabel=le.ShortcutLabel,exports.ShortcutsDialog=ue.ShortcutsDialog,exports.Sidebar=$.Sidebar,exports.SidebarCollapsedContext=$.SidebarCollapsedContext,exports.SidebarItem=fe.SidebarItem,exports.SidebarSection=pe.SidebarSection,exports.Skeleton=me.Skeleton,exports.Slider=he.Slider,exports.Spacer=Ne.Spacer,exports.SpinButton=ge.SpinButton,exports.SpinRow=_e.SpinRow,exports.Spinner=oe.Spinner,exports.SplitButton=ve.SplitButton,exports.StatusBadge=ye.StatusBadge,exports.StatusPage=de.StatusPage,exports.Switch=be.Switch,exports.SwitchRow=xe.SwitchRow,exports.TabBar=Se.TabBar,exports.TabItem=Ce.TabItem,exports.TabPanel=we.TabPanel,exports.TerminalView=Te.TerminalView,exports.Text=Ee.Text,exports.TextField=De.TextField,exports.Timeline=Oe.Timeline,exports.Toast=ke.Toast,exports.Toaster=Ae.Toaster,exports.ToggleGroup=je.ToggleGroup,exports.ToggleGroupItem=Me.ToggleGroupItem,exports.Toolbar=Pe.Toolbar,exports.ToolbarView=Fe.ToolbarView,exports.Tooltip=I.Tooltip,exports.ViewSwitcher=Ie.ViewSwitcher,exports.ViewSwitcherBar=Re.ViewSwitcherBar,exports.ViewSwitcherItem=Le.ViewSwitcherItem,exports.ViewSwitcherSidebar=ze.ViewSwitcherSidebar,exports.ViewSwitcherSidebarItem=Be.ViewSwitcherSidebarItem,exports.WindowTitle=Ve.WindowTitle,exports.WrapBox=He.WrapBox,exports.useAccentColor=w.useAccentColor,exports.useBreakpoint=U.useBreakpoint,exports.useColorScheme=w.useColorScheme,exports.useDateTimeFormatter=w.useDateTimeFormatter,exports.useDir=w.useDir,exports.useLocale=w.useLocale,exports.useNavigation=G.useNavigation,exports.useNumberFormatter=w.useNumberFormatter,exports.useResolvedColorScheme=w.useResolvedColorScheme,exports.useSidebarCollapsed=$.useSidebarCollapsed;

package/dist/index.d.ts

@@ -4,6 +4,8 @@ export type { ActionRowProps } from './components/ActionRow';
 export { ActionRow } from './components/ActionRow';
 export type { AvatarColor, AvatarProps, AvatarSize } from './components/Avatar';
 export { Avatar } from './components/Avatar';
+export type { AvatarGroupItem, AvatarGroupProps } from './components/AvatarGroup';
+export { AvatarGroup } from './components/AvatarGroup';
 export type { AvatarRotatorProps } from './components/AvatarRotator';
 export { AvatarRotator } from './components/AvatarRotator';
 export type { BadgeProps, BadgeVariant } from './components/Badge';
@@ -70,7 +72,7 @@ export type { GnomeProviderProps } from './components/GnomeProvider/GnomeProvide
 export { GnomeProvider } from './components/GnomeProvider/GnomeProvider';
 export type { HeaderBarProps } from './components/HeaderBar';
 export { HeaderBar } from './components/HeaderBar';
-export type { IconProps, IconSize } from './components/Icon';
+export type { IconColor, IconProps, IconSize } from './components/Icon';
 export { Icon } from './components/Icon';
 export type { IconButtonProps, IconButtonSize, IconButtonVariant } from './components/IconButton';
 export { IconButton } from './components/IconButton';
@@ -80,6 +82,8 @@ export type { LinkProps } from './components/Link';
 export { Link } from './components/Link';
 export type { LinkedGroupProps } from './components/LinkedGroup';
 export { LinkedGroup } from './components/LinkedGroup';
+export type { ModalAction, ModalProps } from './components/Modal';
+export { Modal } from './components/Modal';
 export type { NavigationSplitViewProps } from './components/NavigationSplitView';
 export { NavigationSplitView } from './components/NavigationSplitView';
 export type { NavigationPageProps, NavigationViewProps } from './components/NavigationView';