@gnome-ui/react 1.44.0 → 1.45.1

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

@@ -1,16 +1,16 @@
 //#region src/components/Dialog/Dialog.module.css
-var e = "_backdrop_gg1yz_3", t = "_dialog_gg1yz_26", n = "_title_gg1yz_56", r = "_body_gg1yz_68", i = "_footer_gg1yz_89", a = "_btn_gg1yz_96", o = {
+var e = "_backdrop_1hnot_3", t = "_dialog_1hnot_30", n = "_title_1hnot_60", r = "_body_1hnot_72", i = "_footer_1hnot_93", a = "_btn_1hnot_100", o = {
 	backdrop: e,
-	"backdrop-in": "_backdrop-in_gg1yz_1",
+	"backdrop-in": "_backdrop-in_1hnot_1",
 	dialog: t,
-	"dialog-in": "_dialog-in_gg1yz_1",
+	"dialog-in": "_dialog-in_1hnot_1",
 	title: n,
 	body: r,
 	footer: i,
 	btn: a,
-	"btn-default": "_btn-default_gg1yz_144",
-	"btn-suggested": "_btn-suggested_gg1yz_148",
-	"btn-destructive": "_btn-destructive_gg1yz_153"
+	"btn-default": "_btn-default_1hnot_148",
+	"btn-suggested": "_btn-suggested_1hnot_152",
+	"btn-destructive": "_btn-destructive_1hnot_157"
 };
 //#endregion
 export { o as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.module.css.js","names":[],"sources":["../../../src/components/Dialog/Dialog.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@keyframes backdrop-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n  position: relative;\n  width: min(480px, calc(100vw - 48px));\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 32px rgba(0, 0, 0, 0.25),\n    0 0 0 1px rgba(0, 0, 0, 0.08);\n\n  overflow: hidden;\n\n  animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    transform: scale(0.92) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n.title {\n  padding: var(--gnome-space-4, 24px);\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  text-align: center;\n}\n\n.dialog:has(.body) .title {\n  padding: var(--gnome-space-4, 24px) var(--gnome-space-4, 24px) 0 !important;\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.body {\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px) var(--gnome-space-3, 16px);\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-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.7);\n\n  text-align: center;\n}\n\n/* ─── Footer (buttons) ──────────────────────────────────────────────────────── */\n\n.footer {\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n}\n\n/* Each button gets a full-width row separated by hairlines */\n.btn {\n  appearance: none;\n  border: none;\n  border-bottom: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.08));\n  background: transparent;\n  width: 100%;\n  padding: 14px var(--gnome-space-4, 24px);\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  text-align: center;\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.btn:last-child {\n  border-bottom: none;\n}\n\n.btn:hover:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 6%, transparent);\n}\n\n.btn:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 12%, 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: -3px;\n}\n\n.btn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Button variants ───────────────────────────────────────────────────────── */\n\n.btn-default {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.btn-suggested {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.btn-destructive {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .dialog {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .footer {\n    border-top-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .btn {\n    border-bottom-color: rgba(255, 255, 255, 0.06);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .dialog {\n    animation: none;\n  }\n\n  .btn {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Dialog.module.css.js","names":[],"sources":["../../../src/components/Dialog/Dialog.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@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n  position: relative;\n  width: min(480px, calc(100vw - 48px));\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 32px rgba(0, 0, 0, 0.25),\n    0 0 0 1px rgba(0, 0, 0, 0.08);\n\n  overflow: hidden;\n\n  animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    transform: scale(0.92) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n.title {\n  padding: var(--gnome-space-4, 24px);\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  text-align: center;\n}\n\n.dialog:has(.body) .title {\n  padding: var(--gnome-space-4, 24px) var(--gnome-space-4, 24px) 0;\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.body {\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px) var(--gnome-space-3, 16px);\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-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.7);\n\n  text-align: center;\n}\n\n/* ─── Footer (buttons) ──────────────────────────────────────────────────────── */\n\n.footer {\n  display: flex;\n  flex-direction: column;\n  border-top: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n}\n\n/* Each button gets a full-width row separated by hairlines */\n.btn {\n  appearance: none;\n  border: none;\n  border-bottom: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.08));\n  background: transparent;\n  width: 100%;\n  padding: 14px var(--gnome-space-4, 24px);\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  text-align: center;\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.btn:last-child {\n  border-bottom: none;\n}\n\n.btn:hover:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 6%, transparent);\n}\n\n.btn:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 12%, 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: -3px;\n}\n\n.btn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Button variants ───────────────────────────────────────────────────────── */\n\n.btn-default {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.btn-suggested {\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.btn-destructive {\n  color: var(--gnome-destructive-color, #e01b24);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .dialog {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .footer {\n    border-top-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .btn {\n    border-bottom-color: rgba(255, 255, 255, 0.06);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .dialog {\n    animation: none;\n  }\n\n  .btn {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/Dialog/dialogUtils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialogUtils.cjs","names":[],"sources":["../../../src/components/Dialog/dialogUtils.ts"],"sourcesContent":["import { useState, useEffect, type CSSProperties, type KeyboardEvent, RefObject } from \"react\";\n\nexport const FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Returns inline styles that anchor a `position:fixed` backdrop to the visual\n * viewport so the dialog stays centered when the virtual keyboard is open on\n * mobile (iOS Safari / Android Chrome shrink `visualViewport` but not the\n * layout viewport that `position:fixed` is relative to).\n */\nexport function useVisualViewport(): CSSProperties {\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  useEffect(() => {\n    const { visualViewport } = window;\n\n    if (!visualViewport) {\n      return;\n    }\n\n    const update = (): void => {\n      const { offsetLeft: left, offsetTop: top, width, height } = visualViewport;\n      setStyle({\n        top,\n        left,\n        width,\n        height,\n      });\n    };\n\n    update();\n    visualViewport.addEventListener(\"resize\", update);\n    visualViewport.addEventListener(\"scroll\", update);\n\n    return () => {\n      visualViewport.removeEventListener(\"resize\", update);\n      visualViewport.removeEventListener(\"scroll\", update);\n    };\n  }, []);\n\n  return style;\n}\n\nexport function trapFocus(e: KeyboardEvent<HTMLDivElement>, ref: RefObject<HTMLDivElement | null>) {\n  if (e.key !== \"Tab\") {\n    return;\n  }\n\n  const focusable = Array.from(ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []);\n\n  if (!focusable.length) {\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n\n  if (e.shiftKey) {\n    if (document.activeElement === first) {\n      e.preventDefault();\n      last.focus();\n    }\n  } else {\n    if (document.activeElement === last) {\n      e.preventDefault();\n      first.focus();\n    }\n  }\n}\n"],"mappings":"uBAEA,IAAa,EACX,2IAQF,SAAgB,GAAmC,CACjD,GAAM,CAAC,EAAO,IAAA,EAAA,EAAA,UAAoC,EAAE,CAAC,CA6BrD,OA3BA,EAAA,EAAA,eAAgB,CACd,GAAM,CAAE,kBAAmB,OAE3B,GAAI,CAAC,EACH,OAGF,IAAM,MAAqB,CACzB,GAAM,CAAE,WAAY,EAAM,UAAW,EAAK,QAAO,UAAW,EAC5D,EAAS,CACP,MACA,OACA,QACA,SACD,CAAC,EAOJ,OAJA,GAAQ,CACR,EAAe,iBAAiB,SAAU,EAAO,CACjD,EAAe,iBAAiB,SAAU,EAAO,KAEpC,CACX,EAAe,oBAAoB,SAAU,EAAO,CACpD,EAAe,oBAAoB,SAAU,EAAO,GAErD,EAAE,CAAC,CAEC,EAGT,SAAgB,EAAU,EAAkC,EAAuC,CACjG,GAAI,EAAE,MAAQ,MACZ,OAGF,IAAM,EAAY,MAAM,KAAK,EAAI,SAAS,iBAAA,2IAAwC,EAAI,EAAE,CAAC,CAEzF,GAAI,CAAC,EAAU,OACb,OAGF,IAAM,EAAQ,EAAU,GAClB,EAAO,EAAU,EAAU,OAAS,GAEtC,EAAE,SACA,SAAS,gBAAkB,IAC7B,EAAE,gBAAgB,CAClB,EAAK,OAAO,EAGV,SAAS,gBAAkB,IAC7B,EAAE,gBAAgB,CAClB,EAAM,OAAO"}
+{"version":3,"file":"dialogUtils.cjs","names":[],"sources":["../../../src/components/Dialog/dialogUtils.ts"],"sourcesContent":["import { type CSSProperties, type KeyboardEvent, type RefObject, useEffect, useState } from 'react';\n\nexport const FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Returns inline styles that anchor a `position:fixed` backdrop to the visual\n * viewport so the dialog stays centered when the virtual keyboard is open on\n * mobile (iOS Safari / Android Chrome shrink `visualViewport` but not the\n * layout viewport that `position:fixed` is relative to).\n */\nexport function useVisualViewport(): CSSProperties {\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  useEffect(() => {\n    const { visualViewport } = window;\n\n    if (!visualViewport) {\n      return;\n    }\n\n    const update = (): void => {\n      const { offsetLeft: left, offsetTop: top, width, height } = visualViewport;\n\n      setStyle({\n        top,\n        left,\n        width,\n        height,\n      });\n    };\n\n    update();\n    visualViewport.addEventListener('resize', update);\n    visualViewport.addEventListener('scroll', update);\n\n    return () => {\n      visualViewport.removeEventListener('resize', update);\n      visualViewport.removeEventListener('scroll', update);\n    };\n  }, []);\n\n  return style;\n}\n\nexport function trapFocus(e: KeyboardEvent<HTMLDivElement>, ref: RefObject<HTMLDivElement | null>) {\n  if (e.key !== 'Tab') {\n    return;\n  }\n\n  const focusable = Array.from(ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []);\n\n  if (!focusable.length) {\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n\n  if (e.shiftKey) {\n    if (document.activeElement === first) {\n      e.preventDefault();\n      last.focus();\n    }\n  } else {\n    if (document.activeElement === last) {\n      e.preventDefault();\n      first.focus();\n    }\n  }\n}\n"],"mappings":"uBAEA,IAAa,EACX,2IAQF,SAAgB,GAAmC,CACjD,GAAM,CAAC,EAAO,IAAA,EAAA,EAAA,UAAoC,EAAE,CAAC,CA8BrD,OA5BA,EAAA,EAAA,eAAgB,CACd,GAAM,CAAE,kBAAmB,OAE3B,GAAI,CAAC,EACH,OAGF,IAAM,MAAqB,CACzB,GAAM,CAAE,WAAY,EAAM,UAAW,EAAK,QAAO,UAAW,EAE5D,EAAS,CACP,MACA,OACA,QACA,SACD,CAAC,EAOJ,OAJA,GAAQ,CACR,EAAe,iBAAiB,SAAU,EAAO,CACjD,EAAe,iBAAiB,SAAU,EAAO,KAEpC,CACX,EAAe,oBAAoB,SAAU,EAAO,CACpD,EAAe,oBAAoB,SAAU,EAAO,GAErD,EAAE,CAAC,CAEC,EAGT,SAAgB,EAAU,EAAkC,EAAuC,CACjG,GAAI,EAAE,MAAQ,MACZ,OAGF,IAAM,EAAY,MAAM,KAAK,EAAI,SAAS,iBAAA,2IAAwC,EAAI,EAAE,CAAC,CAEzF,GAAI,CAAC,EAAU,OACb,OAGF,IAAM,EAAQ,EAAU,GAClB,EAAO,EAAU,EAAU,OAAS,GAEtC,EAAE,SACA,SAAS,gBAAkB,IAC7B,EAAE,gBAAgB,CAClB,EAAK,OAAO,EAGV,SAAS,gBAAkB,IAC7B,EAAE,gBAAgB,CAClB,EAAM,OAAO"}

package/dist/components/Dialog/dialogUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialogUtils.js","names":[],"sources":["../../../src/components/Dialog/dialogUtils.ts"],"sourcesContent":["import { useState, useEffect, type CSSProperties, type KeyboardEvent, RefObject } from \"react\";\n\nexport const FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Returns inline styles that anchor a `position:fixed` backdrop to the visual\n * viewport so the dialog stays centered when the virtual keyboard is open on\n * mobile (iOS Safari / Android Chrome shrink `visualViewport` but not the\n * layout viewport that `position:fixed` is relative to).\n */\nexport function useVisualViewport(): CSSProperties {\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  useEffect(() => {\n    const { visualViewport } = window;\n\n    if (!visualViewport) {\n      return;\n    }\n\n    const update = (): void => {\n      const { offsetLeft: left, offsetTop: top, width, height } = visualViewport;\n      setStyle({\n        top,\n        left,\n        width,\n        height,\n      });\n    };\n\n    update();\n    visualViewport.addEventListener(\"resize\", update);\n    visualViewport.addEventListener(\"scroll\", update);\n\n    return () => {\n      visualViewport.removeEventListener(\"resize\", update);\n      visualViewport.removeEventListener(\"scroll\", update);\n    };\n  }, []);\n\n  return style;\n}\n\nexport function trapFocus(e: KeyboardEvent<HTMLDivElement>, ref: RefObject<HTMLDivElement | null>) {\n  if (e.key !== \"Tab\") {\n    return;\n  }\n\n  const focusable = Array.from(ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []);\n\n  if (!focusable.length) {\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n\n  if (e.shiftKey) {\n    if (document.activeElement === first) {\n      e.preventDefault();\n      last.focus();\n    }\n  } else {\n    if (document.activeElement === last) {\n      e.preventDefault();\n      first.focus();\n    }\n  }\n}\n"],"mappings":";;AAEA,IAAa,IACX;AAQF,SAAgB,IAAmC;CACjD,IAAM,CAAC,GAAO,KAAY,EAAwB,EAAE,CAAC;AA6BrD,QA3BA,QAAgB;EACd,IAAM,EAAE,sBAAmB;AAE3B,MAAI,CAAC,EACH;EAGF,IAAM,UAAqB;GACzB,IAAM,EAAE,YAAY,GAAM,WAAW,GAAK,UAAO,cAAW;AAC5D,KAAS;IACP;IACA;IACA;IACA;IACD,CAAC;;AAOJ,SAJA,GAAQ,EACR,EAAe,iBAAiB,UAAU,EAAO,EACjD,EAAe,iBAAiB,UAAU,EAAO,QAEpC;AAEX,GADA,EAAe,oBAAoB,UAAU,EAAO,EACpD,EAAe,oBAAoB,UAAU,EAAO;;IAErD,EAAE,CAAC,EAEC;;AAGT,SAAgB,EAAU,GAAkC,GAAuC;AACjG,KAAI,EAAE,QAAQ,MACZ;CAGF,IAAM,IAAY,MAAM,KAAK,EAAI,SAAS,iBAAA,6IAAwC,IAAI,EAAE,CAAC;AAEzF,KAAI,CAAC,EAAU,OACb;CAGF,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;AAE1C,CAAI,EAAE,WACA,SAAS,kBAAkB,MAC7B,EAAE,gBAAgB,EAClB,EAAK,OAAO,IAGV,SAAS,kBAAkB,MAC7B,EAAE,gBAAgB,EAClB,EAAM,OAAO"}
+{"version":3,"file":"dialogUtils.js","names":[],"sources":["../../../src/components/Dialog/dialogUtils.ts"],"sourcesContent":["import { type CSSProperties, type KeyboardEvent, type RefObject, useEffect, useState } from 'react';\n\nexport const FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Returns inline styles that anchor a `position:fixed` backdrop to the visual\n * viewport so the dialog stays centered when the virtual keyboard is open on\n * mobile (iOS Safari / Android Chrome shrink `visualViewport` but not the\n * layout viewport that `position:fixed` is relative to).\n */\nexport function useVisualViewport(): CSSProperties {\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  useEffect(() => {\n    const { visualViewport } = window;\n\n    if (!visualViewport) {\n      return;\n    }\n\n    const update = (): void => {\n      const { offsetLeft: left, offsetTop: top, width, height } = visualViewport;\n\n      setStyle({\n        top,\n        left,\n        width,\n        height,\n      });\n    };\n\n    update();\n    visualViewport.addEventListener('resize', update);\n    visualViewport.addEventListener('scroll', update);\n\n    return () => {\n      visualViewport.removeEventListener('resize', update);\n      visualViewport.removeEventListener('scroll', update);\n    };\n  }, []);\n\n  return style;\n}\n\nexport function trapFocus(e: KeyboardEvent<HTMLDivElement>, ref: RefObject<HTMLDivElement | null>) {\n  if (e.key !== 'Tab') {\n    return;\n  }\n\n  const focusable = Array.from(ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []);\n\n  if (!focusable.length) {\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n\n  if (e.shiftKey) {\n    if (document.activeElement === first) {\n      e.preventDefault();\n      last.focus();\n    }\n  } else {\n    if (document.activeElement === last) {\n      e.preventDefault();\n      first.focus();\n    }\n  }\n}\n"],"mappings":";;AAEA,IAAa,IACX;AAQF,SAAgB,IAAmC;CACjD,IAAM,CAAC,GAAO,KAAY,EAAwB,EAAE,CAAC;AA8BrD,QA5BA,QAAgB;EACd,IAAM,EAAE,sBAAmB;AAE3B,MAAI,CAAC,EACH;EAGF,IAAM,UAAqB;GACzB,IAAM,EAAE,YAAY,GAAM,WAAW,GAAK,UAAO,cAAW;AAE5D,KAAS;IACP;IACA;IACA;IACA;IACD,CAAC;;AAOJ,SAJA,GAAQ,EACR,EAAe,iBAAiB,UAAU,EAAO,EACjD,EAAe,iBAAiB,UAAU,EAAO,QAEpC;AAEX,GADA,EAAe,oBAAoB,UAAU,EAAO,EACpD,EAAe,oBAAoB,UAAU,EAAO;;IAErD,EAAE,CAAC,EAEC;;AAGT,SAAgB,EAAU,GAAkC,GAAuC;AACjG,KAAI,EAAE,QAAQ,MACZ;CAGF,IAAM,IAAY,MAAM,KAAK,EAAI,SAAS,iBAAA,6IAAwC,IAAI,EAAE,CAAC;AAEzF,KAAI,CAAC,EAAU,OACb;CAGF,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;AAE1C,CAAI,EAAE,WACA,SAAS,kBAAkB,MAC7B,EAAE,gBAAgB,EAClB,EAAK,OAAO,IAGV,SAAS,kBAAkB,MAC7B,EAAE,gBAAgB,EAClB,EAAM,OAAO"}

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

@@ -1,2 +1,2 @@
+export type { AlertDialogResponse, AlertDialogResponseVariant, DialogButton, DialogProps, } from './Dialog';
 export { Dialog } from './Dialog';
-export type { DialogProps, DialogButton, AlertDialogResponse, AlertDialogResponseVariant, } from './Dialog';

package/dist/components/Drawer/Drawer.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Dialog/dialogUtils.cjs`),t=require(`./Drawer.module.css.cjs`);let n=require(`react`),r=require(`react-dom`),i=require(`react/jsx-runtime`);function a({open:a,side:o=`right`,size:s=`classic`,title:c,content:l,children:u,onClose:d,closeOnBackdrop:f=!0,className:p,...m}){let h=(0,n.useRef)(null),g=(0,n.useId)(),_=(0,n.useRef)(null),v=e.useVisualViewport(),y=l===void 0?u:l;(0,n.useEffect)(()=>{a?(_.current=document.activeElement,h.current?.querySelector(e.FOCUSABLE)?.focus()):_.current?.focus()},[a]);let b=(0,n.useCallback)(t=>{if(t.key===`Escape`){t.preventDefault(),d?.();return}e.trapFocus(t,h)},[d]);if(!a)return null;let x=(0,i.jsx)(`div`,{className:t.default.backdrop,style:v,onClick:f?d:void 0,children:(0,i.jsxs)(`div`,{ref:h,role:`dialog`,"aria-modal":`true`,"aria-labelledby":c?g:void 0,"data-side":o,"data-size":s,className:[t.default.drawer,o===`left`?t.default.left:t.default.right,s===`wide`?t.default.wide:t.default.classic,p].filter(Boolean).join(` `),onKeyDown:b,onClick:e=>e.stopPropagation(),...m,children:[c&&(0,i.jsx)(`div`,{id:g,className:t.default.title,children:c}),y!==void 0&&(0,i.jsx)(`div`,{className:t.default.content,children:y})]})});return typeof document>`u`?x:(0,r.createPortal)(x,document.body)}exports.Drawer=a;
+const e=require(`../Dialog/dialogUtils.cjs`),t=require(`../Button/Button.cjs`),n=require(`./Drawer.module.css.cjs`);let r=require(`react`),i=require(`react-dom`),a=require(`react/jsx-runtime`);function o({open:o,side:s=`right`,size:c=`classic`,title:l,content:u,children:d,onClose:f,closeOnBackdrop:p=!0,className:m,...h}){let g=(0,r.useRef)(null),_=(0,r.useId)(),v=(0,r.useRef)(null),y=e.useVisualViewport(),b=u===void 0?d:u;(0,r.useEffect)(()=>{o?(v.current=document.activeElement,g.current?.querySelector(e.FOCUSABLE)?.focus()):v.current?.focus()},[o]);let x=(0,r.useCallback)(t=>{if(t.key===`Escape`){t.preventDefault(),f?.();return}e.trapFocus(t,g)},[f]);if(!o)return null;let S=(0,a.jsx)(`div`,{className:n.default.backdrop,style:y,onClick:p?f:void 0,children:(0,a.jsxs)(`div`,{ref:g,role:`dialog`,"aria-modal":`true`,"aria-labelledby":l?_:void 0,"data-side":s,"data-size":c,className:[n.default.drawer,s===`left`?n.default.left:n.default.right,c===`wide`?n.default.wide:n.default.classic,m].filter(Boolean).join(` `),onKeyDown:x,onClick:e=>e.stopPropagation(),...h,children:[l&&(0,a.jsxs)(`div`,{id:_,className:n.default.title,children:[(0,a.jsx)(`span`,{className:n.default.titleText,children:l}),f&&(0,a.jsx)(t.Button,{variant:`flat`,shape:`circular`,size:`sm`,"aria-label":`Close`,onClick:f,children:`✕`})]}),b!==void 0&&(0,a.jsx)(`div`,{className:n.default.content,children:b})]})});return typeof document>`u`?S:(0,i.createPortal)(S,document.body)}exports.Drawer=o;
 //# sourceMappingURL=Drawer.cjs.map

package/dist/components/Drawer/Drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { FOCUSABLE, trapFocus, useVisualViewport } from \"../Dialog/dialogUtils\";\nimport styles from \"./Drawer.module.css\";\n\nexport type DrawerSide = \"left\" | \"right\";\nexport type DrawerSize = \"classic\" | \"wide\";\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, \"content\" | \"title\"> {\n  /** Whether the drawer is visible. */\n  open: boolean;\n  /** Edge that the drawer slides in from. Defaults to `\"right\"`. */\n  side?: DrawerSide;\n  /** Preset drawer width. Defaults to `\"classic\"`. */\n  size?: DrawerSize;\n  /** Optional drawer heading. */\n  title?: ReactNode;\n  /** Drawer content when a prop is preferred over `children`. */\n  content?: ReactNode;\n  /** Drawer content. Used when `content` is not provided. */\n  children?: ReactNode;\n  /** Called when the user dismisses the drawer with Escape or the backdrop. */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the drawer. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Slide-over panel for supplementary content.\n *\n * The drawer is controlled through `open`, renders into `document.body`, and\n * accepts its body as either `content` or `children`.\n */\nexport function Drawer({\n  open,\n  side = \"right\",\n  size = \"classic\",\n  title,\n  content,\n  children,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: DrawerProps) {\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n  const viewportStyle = useVisualViewport();\n  const body = content !== undefined ? content : children;\n\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      drawerRef.current?.querySelector<HTMLElement>(FOCUSABLE)?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        onClose?.();\n        return;\n      }\n\n      trapFocus(event, drawerRef);\n    },\n    [onClose],\n  );\n\n  if (!open) return null;\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      style={viewportStyle}\n      onClick={closeOnBackdrop ? onClose : undefined}\n    >\n      <div\n        ref={drawerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        data-side={side}\n        data-size={size}\n        className={[\n          styles.drawer,\n          side === \"left\" ? styles.left : styles.right,\n          size === \"wide\" ? styles.wide : styles.classic,\n          className,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        onKeyDown={handleKeyDown}\n        onClick={(event) => event.stopPropagation()}\n        {...props}\n      >\n        {title && <div id={titleId} className={styles.title}>{title}</div>}\n        {body !== undefined && <div className={styles.content}>{body}</div>}\n      </div>\n    </div>\n  );\n\n  if (typeof document === \"undefined\") return node;\n  return createPortal(node, document.body);\n}\n"],"mappings":"+JAyCA,SAAgB,EAAO,CACrB,OACA,OAAO,QACP,OAAO,UACP,QACA,UACA,WACA,UACA,kBAAkB,GAClB,YACA,GAAG,GACW,CACd,IAAM,GAAA,EAAA,EAAA,QAAmC,KAAK,CACxC,GAAA,EAAA,EAAA,QAAiB,CACjB,GAAA,EAAA,EAAA,QAA2C,KAAK,CAChD,EAAgB,EAAA,mBAAmB,CACnC,EAAO,IAAY,IAAA,GAAsB,EAAV,GAErC,EAAA,EAAA,eAAgB,CACV,GACF,EAAkB,QAAU,SAAS,cACrC,EAAU,SAAS,cAA2B,EAAA,UAAU,EAAE,OAAO,EAEhE,EAAkB,SAAgC,OAAO,EAE3D,CAAC,EAAK,CAAC,CAEV,IAAM,GAAA,EAAA,EAAA,aACH,GAAyC,CACxC,GAAI,EAAM,MAAQ,SAAU,CAC1B,EAAM,gBAAgB,CACtB,KAAW,CACX,OAGF,EAAA,UAAU,EAAO,EAAU,EAE7B,CAAC,EAAQ,CACV,CAED,GAAI,CAAC,EAAM,OAAO,KAElB,IAAM,GACJ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,QAAO,SAClB,MAAO,EACP,QAAS,EAAkB,EAAU,IAAA,aAErC,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,KAAK,SACL,aAAW,OACX,kBAAiB,EAAQ,EAAU,IAAA,GACnC,YAAW,EACX,YAAW,EACX,UAAW,CACT,EAAA,QAAO,OACP,IAAS,OAAS,EAAA,QAAO,KAAO,EAAA,QAAO,MACvC,IAAS,OAAS,EAAA,QAAO,KAAO,EAAA,QAAO,QACvC,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,UAAW,EACX,QAAU,GAAU,EAAM,iBAAiB,CAC3C,GAAI,WAjBN,CAmBG,IAAS,EAAA,EAAA,KAAC,MAAD,CAAK,GAAI,EAAS,UAAW,EAAA,QAAO,eAAQ,EAAY,CAAA,CACjE,IAAS,IAAA,KAAa,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBAAU,EAAW,CAAA,CAC/D,GACF,CAAA,CAIR,OADI,OAAO,SAAa,IAAoB,GAC5C,EAAA,EAAA,cAAoB,EAAM,SAAS,KAAK"}
+{"version":3,"file":"Drawer.cjs","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { Button } from '../Button/Button';\nimport { FOCUSABLE, trapFocus, useVisualViewport } from '../Dialog/dialogUtils';\n\nimport styles from './Drawer.module.css';\n\nexport type DrawerSide = 'left' | 'right';\nexport type DrawerSize = 'classic' | 'wide';\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content' | 'title'> {\n  /** Whether the drawer is visible. */\n  open: boolean;\n  /** Edge that the drawer slides in from. Defaults to `\"right\"`. */\n  side?: DrawerSide;\n  /** Preset drawer width. Defaults to `\"classic\"`. */\n  size?: DrawerSize;\n  /** Optional drawer heading. */\n  title?: ReactNode;\n  /** Drawer content when a prop is preferred over `children`. */\n  content?: ReactNode;\n  /** Drawer content. Used when `content` is not provided. */\n  children?: ReactNode;\n  /** Called when the user dismisses the drawer with Escape or the backdrop. */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the drawer. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Slide-over panel for supplementary content.\n *\n * The drawer is controlled through `open`, renders into `document.body`, and\n * accepts its body as either `content` or `children`.\n */\nexport function Drawer({\n  open,\n  side = 'right',\n  size = 'classic',\n  title,\n  content,\n  children,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: DrawerProps) {\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n  const viewportStyle = useVisualViewport();\n  const body = content !== undefined ? content : children;\n\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      drawerRef.current?.querySelector<HTMLElement>(FOCUSABLE)?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        onClose?.();\n\n        return;\n      }\n\n      trapFocus(event, drawerRef);\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      style={viewportStyle}\n      onClick={closeOnBackdrop ? onClose : undefined}\n    >\n      <div\n        ref={drawerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        data-side={side}\n        data-size={size}\n        className={[\n          styles.drawer,\n          side === 'left' ? styles.left : styles.right,\n          size === 'wide' ? styles.wide : styles.classic,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(event) => event.stopPropagation()}\n        {...props}\n      >\n        {title && (\n          <div id={titleId} className={styles.title}>\n            <span className={styles.titleText}>{title}</span>\n            {onClose && (\n              <Button\n                variant=\"flat\"\n                shape=\"circular\"\n                size=\"sm\"\n                aria-label=\"Close\"\n                onClick={onClose}\n              >\n                ✕\n              </Button>\n            )}\n          </div>\n        )}\n        {body !== undefined && <div className={styles.content}>{body}</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":"iMA6CA,SAAgB,EAAO,CACrB,OACA,OAAO,QACP,OAAO,UACP,QACA,UACA,WACA,UACA,kBAAkB,GAClB,YACA,GAAG,GACW,CACd,IAAM,GAAA,EAAA,EAAA,QAAmC,KAAK,CACxC,GAAA,EAAA,EAAA,QAAiB,CACjB,GAAA,EAAA,EAAA,QAA2C,KAAK,CAChD,EAAgB,EAAA,mBAAmB,CACnC,EAAO,IAAY,IAAA,GAAsB,EAAV,GAErC,EAAA,EAAA,eAAgB,CACV,GACF,EAAkB,QAAU,SAAS,cACrC,EAAU,SAAS,cAA2B,EAAA,UAAU,EAAE,OAAO,EAEhE,EAAkB,SAAgC,OAAO,EAE3D,CAAC,EAAK,CAAC,CAEV,IAAM,GAAA,EAAA,EAAA,aACH,GAAyC,CACxC,GAAI,EAAM,MAAQ,SAAU,CAC1B,EAAM,gBAAgB,CACtB,KAAW,CAEX,OAGF,EAAA,UAAU,EAAO,EAAU,EAE7B,CAAC,EAAQ,CACV,CAED,GAAI,CAAC,EACH,OAAO,KAGT,IAAM,GACJ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,QAAO,SAClB,MAAO,EACP,QAAS,EAAkB,EAAU,IAAA,aAErC,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,KAAK,SACL,aAAW,OACX,kBAAiB,EAAQ,EAAU,IAAA,GACnC,YAAW,EACX,YAAW,EACX,UAAW,CACT,EAAA,QAAO,OACP,IAAS,OAAS,EAAA,QAAO,KAAO,EAAA,QAAO,MACvC,IAAS,OAAS,EAAA,QAAO,KAAO,EAAA,QAAO,QACvC,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,UAAW,EACX,QAAU,GAAU,EAAM,iBAAiB,CAC3C,GAAI,WAjBN,CAmBG,IACC,EAAA,EAAA,MAAC,MAAD,CAAK,GAAI,EAAS,UAAW,EAAA,QAAO,eAApC,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,EAAa,CAAA,CAChD,IACC,EAAA,EAAA,KAAC,EAAA,OAAD,CACE,QAAQ,OACR,MAAM,WACN,KAAK,KACL,aAAW,QACX,QAAS,WACV,IAEQ,CAAA,CAEP,GAEP,IAAS,IAAA,KAAa,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBAAU,EAAW,CAAA,CAC/D,GACF,CAAA,CAOR,OAJI,OAAO,SAAa,IACf,GAGT,EAAA,EAAA,cAAoB,EAAM,SAAS,KAAK"}

package/dist/components/Drawer/Drawer.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export type DrawerSide = "left" | "right";
-export type DrawerSize = "classic" | "wide";
-export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "content" | "title"> {
+export type DrawerSide = 'left' | 'right';
+export type DrawerSize = 'classic' | 'wide';
+export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content' | 'title'> {
     /** Whether the drawer is visible. */
     open: boolean;
     /** Edge that the drawer slides in from. Defaults to `"right"`. */

package/dist/components/Drawer/Drawer.js

@@ -1,55 +1,66 @@
 import { FOCUSABLE as e, trapFocus as t, useVisualViewport as n } from "../Dialog/dialogUtils.js";
-import r from "./Drawer.module.css.js";
-import { useCallback as i, useEffect as a, useId as o, useRef as s } from "react";
-import { createPortal as c } from "react-dom";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Button as r } from "../Button/Button.js";
+import i from "./Drawer.module.css.js";
+import { useCallback as a, useEffect as o, useId as s, useRef as c } from "react";
+import { createPortal as l } from "react-dom";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/Drawer/Drawer.tsx
-function d({ open: d, side: f = "right", size: p = "classic", title: m, content: h, children: g, onClose: _, closeOnBackdrop: v = !0, className: y, ...b }) {
-	let x = s(null), S = o(), C = s(null), w = n(), T = h === void 0 ? g : h;
-	a(() => {
-		d ? (C.current = document.activeElement, x.current?.querySelector(e)?.focus()) : C.current?.focus();
-	}, [d]);
-	let E = i((e) => {
+function f({ open: f, side: p = "right", size: m = "classic", title: h, content: g, children: _, onClose: v, closeOnBackdrop: y = !0, className: b, ...x }) {
+	let S = c(null), C = s(), w = c(null), T = n(), E = g === void 0 ? _ : g;
+	o(() => {
+		f ? (w.current = document.activeElement, S.current?.querySelector(e)?.focus()) : w.current?.focus();
+	}, [f]);
+	let D = a((e) => {
 		if (e.key === "Escape") {
-			e.preventDefault(), _?.();
+			e.preventDefault(), v?.();
 			return;
 		}
-		t(e, x);
-	}, [_]);
-	if (!d) return null;
-	let D = /* @__PURE__ */ l("div", {
-		className: r.backdrop,
-		style: w,
-		onClick: v ? _ : void 0,
-		children: /* @__PURE__ */ u("div", {
-			ref: x,
+		t(e, S);
+	}, [v]);
+	if (!f) return null;
+	let O = /* @__PURE__ */ u("div", {
+		className: i.backdrop,
+		style: T,
+		onClick: y ? v : void 0,
+		children: /* @__PURE__ */ d("div", {
+			ref: S,
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-labelledby": m ? S : void 0,
-			"data-side": f,
-			"data-size": p,
+			"aria-labelledby": h ? C : void 0,
+			"data-side": p,
+			"data-size": m,
 			className: [
-				r.drawer,
-				f === "left" ? r.left : r.right,
-				p === "wide" ? r.wide : r.classic,
-				y
+				i.drawer,
+				p === "left" ? i.left : i.right,
+				m === "wide" ? i.wide : i.classic,
+				b
 			].filter(Boolean).join(" "),
-			onKeyDown: E,
+			onKeyDown: D,
 			onClick: (e) => e.stopPropagation(),
-			...b,
-			children: [m && /* @__PURE__ */ l("div", {
-				id: S,
-				className: r.title,
-				children: m
-			}), T !== void 0 && /* @__PURE__ */ l("div", {
-				className: r.content,
-				children: T
+			...x,
+			children: [h && /* @__PURE__ */ d("div", {
+				id: C,
+				className: i.title,
+				children: [/* @__PURE__ */ u("span", {
+					className: i.titleText,
+					children: h
+				}), v && /* @__PURE__ */ u(r, {
+					variant: "flat",
+					shape: "circular",
+					size: "sm",
+					"aria-label": "Close",
+					onClick: v,
+					children: "✕"
+				})]
+			}), E !== void 0 && /* @__PURE__ */ u("div", {
+				className: i.content,
+				children: E
 			})]
 		})
 	});
-	return typeof document > "u" ? D : c(D, document.body);
+	return typeof document > "u" ? O : l(O, document.body);
 }
 //#endregion
-export { d as Drawer };
+export { f as Drawer };
 
 //# sourceMappingURL=Drawer.js.map

package/dist/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { FOCUSABLE, trapFocus, useVisualViewport } from \"../Dialog/dialogUtils\";\nimport styles from \"./Drawer.module.css\";\n\nexport type DrawerSide = \"left\" | \"right\";\nexport type DrawerSize = \"classic\" | \"wide\";\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, \"content\" | \"title\"> {\n  /** Whether the drawer is visible. */\n  open: boolean;\n  /** Edge that the drawer slides in from. Defaults to `\"right\"`. */\n  side?: DrawerSide;\n  /** Preset drawer width. Defaults to `\"classic\"`. */\n  size?: DrawerSize;\n  /** Optional drawer heading. */\n  title?: ReactNode;\n  /** Drawer content when a prop is preferred over `children`. */\n  content?: ReactNode;\n  /** Drawer content. Used when `content` is not provided. */\n  children?: ReactNode;\n  /** Called when the user dismisses the drawer with Escape or the backdrop. */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the drawer. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Slide-over panel for supplementary content.\n *\n * The drawer is controlled through `open`, renders into `document.body`, and\n * accepts its body as either `content` or `children`.\n */\nexport function Drawer({\n  open,\n  side = \"right\",\n  size = \"classic\",\n  title,\n  content,\n  children,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: DrawerProps) {\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n  const viewportStyle = useVisualViewport();\n  const body = content !== undefined ? content : children;\n\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      drawerRef.current?.querySelector<HTMLElement>(FOCUSABLE)?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        onClose?.();\n        return;\n      }\n\n      trapFocus(event, drawerRef);\n    },\n    [onClose],\n  );\n\n  if (!open) return null;\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      style={viewportStyle}\n      onClick={closeOnBackdrop ? onClose : undefined}\n    >\n      <div\n        ref={drawerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        data-side={side}\n        data-size={size}\n        className={[\n          styles.drawer,\n          side === \"left\" ? styles.left : styles.right,\n          size === \"wide\" ? styles.wide : styles.classic,\n          className,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        onKeyDown={handleKeyDown}\n        onClick={(event) => event.stopPropagation()}\n        {...props}\n      >\n        {title && <div id={titleId} className={styles.title}>{title}</div>}\n        {body !== undefined && <div className={styles.content}>{body}</div>}\n      </div>\n    </div>\n  );\n\n  if (typeof document === \"undefined\") return node;\n  return createPortal(node, document.body);\n}\n"],"mappings":";;;;;;AAyCA,SAAgB,EAAO,EACrB,SACA,UAAO,SACP,UAAO,WACP,UACA,YACA,aACA,YACA,qBAAkB,IAClB,cACA,GAAG,KACW;CACd,IAAM,IAAY,EAAuB,KAAK,EACxC,IAAU,GAAO,EACjB,IAAoB,EAAuB,KAAK,EAChD,IAAgB,GAAmB,EACnC,IAAO,MAAY,KAAA,IAAsB,IAAV;AAErC,SAAgB;AACd,EAAI,KACF,EAAkB,UAAU,SAAS,eACrC,EAAU,SAAS,cAA2B,EAAU,EAAE,OAAO,IAEhE,EAAkB,SAAgC,OAAO;IAE3D,CAAC,EAAK,CAAC;CAEV,IAAM,IAAgB,GACnB,MAAyC;AACxC,MAAI,EAAM,QAAQ,UAAU;AAE1B,GADA,EAAM,gBAAgB,EACtB,KAAW;AACX;;AAGF,IAAU,GAAO,EAAU;IAE7B,CAAC,EAAQ,CACV;AAED,KAAI,CAAC,EAAM,QAAO;CAElB,IAAM,IACJ,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,OAAO;EACP,SAAS,IAAkB,IAAU,KAAA;YAErC,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,aAAW;GACX,aAAW;GACX,WAAW;IACT,EAAO;IACP,MAAS,SAAS,EAAO,OAAO,EAAO;IACvC,MAAS,SAAS,EAAO,OAAO,EAAO;IACvC;IACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;GACZ,WAAW;GACX,UAAU,MAAU,EAAM,iBAAiB;GAC3C,GAAI;aAjBN,CAmBG,KAAS,kBAAC,OAAD;IAAK,IAAI;IAAS,WAAW,EAAO;cAAQ;IAAY,CAAA,EACjE,MAAS,KAAA,KAAa,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAU;IAAW,CAAA,CAC/D;;EACF,CAAA;AAIR,QADI,OAAO,WAAa,MAAoB,IACrC,EAAa,GAAM,SAAS,KAAK"}
+{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { Button } from '../Button/Button';\nimport { FOCUSABLE, trapFocus, useVisualViewport } from '../Dialog/dialogUtils';\n\nimport styles from './Drawer.module.css';\n\nexport type DrawerSide = 'left' | 'right';\nexport type DrawerSize = 'classic' | 'wide';\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content' | 'title'> {\n  /** Whether the drawer is visible. */\n  open: boolean;\n  /** Edge that the drawer slides in from. Defaults to `\"right\"`. */\n  side?: DrawerSide;\n  /** Preset drawer width. Defaults to `\"classic\"`. */\n  size?: DrawerSize;\n  /** Optional drawer heading. */\n  title?: ReactNode;\n  /** Drawer content when a prop is preferred over `children`. */\n  content?: ReactNode;\n  /** Drawer content. Used when `content` is not provided. */\n  children?: ReactNode;\n  /** Called when the user dismisses the drawer with Escape or the backdrop. */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the drawer. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Slide-over panel for supplementary content.\n *\n * The drawer is controlled through `open`, renders into `document.body`, and\n * accepts its body as either `content` or `children`.\n */\nexport function Drawer({\n  open,\n  side = 'right',\n  size = 'classic',\n  title,\n  content,\n  children,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: DrawerProps) {\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n  const viewportStyle = useVisualViewport();\n  const body = content !== undefined ? content : children;\n\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      drawerRef.current?.querySelector<HTMLElement>(FOCUSABLE)?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        onClose?.();\n\n        return;\n      }\n\n      trapFocus(event, drawerRef);\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      style={viewportStyle}\n      onClick={closeOnBackdrop ? onClose : undefined}\n    >\n      <div\n        ref={drawerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        data-side={side}\n        data-size={size}\n        className={[\n          styles.drawer,\n          side === 'left' ? styles.left : styles.right,\n          size === 'wide' ? styles.wide : styles.classic,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(event) => event.stopPropagation()}\n        {...props}\n      >\n        {title && (\n          <div id={titleId} className={styles.title}>\n            <span className={styles.titleText}>{title}</span>\n            {onClose && (\n              <Button\n                variant=\"flat\"\n                shape=\"circular\"\n                size=\"sm\"\n                aria-label=\"Close\"\n                onClick={onClose}\n              >\n                ✕\n              </Button>\n            )}\n          </div>\n        )}\n        {body !== undefined && <div className={styles.content}>{body}</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":";;;;;;;AA6CA,SAAgB,EAAO,EACrB,SACA,UAAO,SACP,UAAO,WACP,UACA,YACA,aACA,YACA,qBAAkB,IAClB,cACA,GAAG,KACW;CACd,IAAM,IAAY,EAAuB,KAAK,EACxC,IAAU,GAAO,EACjB,IAAoB,EAAuB,KAAK,EAChD,IAAgB,GAAmB,EACnC,IAAO,MAAY,KAAA,IAAsB,IAAV;AAErC,SAAgB;AACd,EAAI,KACF,EAAkB,UAAU,SAAS,eACrC,EAAU,SAAS,cAA2B,EAAU,EAAE,OAAO,IAEhE,EAAkB,SAAgC,OAAO;IAE3D,CAAC,EAAK,CAAC;CAEV,IAAM,IAAgB,GACnB,MAAyC;AACxC,MAAI,EAAM,QAAQ,UAAU;AAE1B,GADA,EAAM,gBAAgB,EACtB,KAAW;AAEX;;AAGF,IAAU,GAAO,EAAU;IAE7B,CAAC,EAAQ,CACV;AAED,KAAI,CAAC,EACH,QAAO;CAGT,IAAM,IACJ,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,OAAO;EACP,SAAS,IAAkB,IAAU,KAAA;YAErC,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,aAAW;GACX,aAAW;GACX,WAAW;IACT,EAAO;IACP,MAAS,SAAS,EAAO,OAAO,EAAO;IACvC,MAAS,SAAS,EAAO,OAAO,EAAO;IACvC;IACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;GACZ,WAAW;GACX,UAAU,MAAU,EAAM,iBAAiB;GAC3C,GAAI;aAjBN,CAmBG,KACC,kBAAC,OAAD;IAAK,IAAI;IAAS,WAAW,EAAO;cAApC,CACE,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAY;KAAa,CAAA,EAChD,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,cAAW;KACX,SAAS;eACV;KAEQ,CAAA,CAEP;OAEP,MAAS,KAAA,KAAa,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAU;IAAW,CAAA,CAC/D;;EACF,CAAA;AAOR,QAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,SAAS,KAAK"}

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

@@ -1,2 +1,2 @@
-var e=`_backdrop_iw6h1_3`,t=`_drawer_iw6h1_24`,n=`_classic_iw6h1_36`,r=`_wide_iw6h1_40`,i=`_left_iw6h1_44`,a=`_right_iw6h1_53`,o=`_title_iw6h1_72`,s=`_content_iw6h1_82`,c={backdrop:e,"backdrop-in":`_backdrop-in_iw6h1_1`,drawer:t,classic:n,wide:r,left:i,"drawer-in-left":`_drawer-in-left_iw6h1_1`,right:a,"drawer-in-right":`_drawer-in-right_iw6h1_1`,title:o,content:s};exports.default=c;
+var e=`_backdrop_z2wwe_3`,t=`_drawer_z2wwe_28`,n=`_classic_z2wwe_40`,r=`_wide_z2wwe_44`,i=`_left_z2wwe_48`,a=`_right_z2wwe_58`,o=`_title_z2wwe_86`,s=`_titleText_z2wwe_94`,c=`_content_z2wwe_104`,l={backdrop:e,"backdrop-in":`_backdrop-in_z2wwe_1`,drawer:t,classic:n,wide:r,left:i,"drawer-in-left":`_drawer-in-left_z2wwe_1`,right:a,"drawer-in-right":`_drawer-in-right_z2wwe_1`,title:o,titleText:s,content:c};exports.default=l;
 //# sourceMappingURL=Drawer.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.module.css.cjs","names":[],"sources":["../../../src/components/Drawer/Drawer.module.css"],"sourcesContent":["/* ─── Backdrop ─────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n/* ─── Drawer ──────────────────────────────────────────────────────────────── */\n\n.drawer {\n  display: flex;\n  flex-direction: column;\n  width: min(var(--gnome-drawer-width, var(--gnome-drawer-preset-width, 420px)), 100vw);\n  height: 100dvh;\n  min-width: 0;\n  overflow: hidden;\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\n.classic {\n  --gnome-drawer-preset-width: 420px;\n}\n\n.wide {\n  --gnome-drawer-preset-width: 640px;\n}\n\n.left {\n  margin-right: auto;\n  border-radius: 0 var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0;\n  box-shadow:\n    4px 0 24px rgba(0, 0, 0, 0.18),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n  animation: drawer-in-left var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.right {\n  margin-left: auto;\n  border-radius: var(--gnome-radius-xl, 16px) 0 0 var(--gnome-radius-xl, 16px);\n  box-shadow:\n    -4px 0 24px rgba(0, 0, 0, 0.18),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n  animation: drawer-in-right var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes drawer-in-left {\n  from { transform: translateX(-100%); }\n  to   { transform: translateX(0); }\n}\n\n@keyframes drawer-in-right {\n  from { transform: translateX(100%); }\n  to   { transform: translateX(0); }\n}\n\n.title {\n  flex-shrink: 0;\n  padding: var(--gnome-space-4, 24px) var(--gnome-space-4, 24px) var(--gnome-space-2, 12px);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: var(--gnome-line-height-title, 1.3);\n}\n\n.content {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: var(--gnome-space-4, 24px);\n}\n\n.title + .content {\n  padding-top: 0;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .drawer {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n  }\n\n  .left {\n    box-shadow:\n      4px 0 24px rgba(0, 0, 0, 0.45),\n      0 0 0 1px rgba(255, 255, 255, 0.06);\n  }\n\n  .right {\n    box-shadow:\n      -4px 0 24px rgba(0, 0, 0, 0.45),\n      0 0 0 1px rgba(255, 255, 255, 0.06);\n  }\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .left,\n  .right {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Drawer.module.css.cjs","names":[],"sources":["../../../src/components/Drawer/Drawer.module.css"],"sourcesContent":["/* ─── Backdrop ─────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─── Drawer ──────────────────────────────────────────────────────────────── */\n\n.drawer {\n  display: flex;\n  flex-direction: column;\n  width: min(var(--gnome-drawer-width, var(--gnome-drawer-preset-width, 420px)), 100vw);\n  height: 100dvh;\n  min-width: 0;\n  overflow: hidden;\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\n.classic {\n  --gnome-drawer-preset-width: 420px;\n}\n\n.wide {\n  --gnome-drawer-preset-width: 640px;\n}\n\n.left {\n  margin-right: auto;\n  border-radius: 0 var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0;\n  box-shadow:\n    4px 0 24px rgba(0, 0, 0, 0.18),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n  animation: drawer-in-left var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease)\n    both;\n}\n\n.right {\n  margin-left: auto;\n  border-radius: var(--gnome-radius-xl, 16px) 0 0 var(--gnome-radius-xl, 16px);\n  box-shadow:\n    -4px 0 24px rgba(0, 0, 0, 0.18),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n  animation: drawer-in-right var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease)\n    both;\n}\n\n@keyframes drawer-in-left {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes drawer-in-right {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n.title {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-4, 24px) var(--gnome-space-4, 24px) var(--gnome-space-2, 12px);\n}\n\n.titleText {\n  flex: 1;\n  min-width: 0;\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}\n\n.content {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: var(--gnome-space-4, 24px);\n}\n\n.title + .content {\n  padding-top: 0;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .drawer {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n  }\n\n  .left {\n    box-shadow:\n      4px 0 24px rgba(0, 0, 0, 0.45),\n      0 0 0 1px rgba(255, 255, 255, 0.06);\n  }\n\n  .right {\n    box-shadow:\n      -4px 0 24px rgba(0, 0, 0, 0.45),\n      0 0 0 1px rgba(255, 255, 255, 0.06);\n  }\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .left,\n  .right {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,18 +1,19 @@
 //#region src/components/Drawer/Drawer.module.css
-var e = "_backdrop_iw6h1_3", t = "_drawer_iw6h1_24", n = "_classic_iw6h1_36", r = "_wide_iw6h1_40", i = "_left_iw6h1_44", a = "_right_iw6h1_53", o = "_title_iw6h1_72", s = "_content_iw6h1_82", c = {
+var e = "_backdrop_z2wwe_3", t = "_drawer_z2wwe_28", n = "_classic_z2wwe_40", r = "_wide_z2wwe_44", i = "_left_z2wwe_48", a = "_right_z2wwe_58", o = "_title_z2wwe_86", s = "_titleText_z2wwe_94", c = "_content_z2wwe_104", l = {
 	backdrop: e,
-	"backdrop-in": "_backdrop-in_iw6h1_1",
+	"backdrop-in": "_backdrop-in_z2wwe_1",
 	drawer: t,
 	classic: n,
 	wide: r,
 	left: i,
-	"drawer-in-left": "_drawer-in-left_iw6h1_1",
+	"drawer-in-left": "_drawer-in-left_z2wwe_1",
 	right: a,
-	"drawer-in-right": "_drawer-in-right_iw6h1_1",
+	"drawer-in-right": "_drawer-in-right_z2wwe_1",
 	title: o,
-	content: s
+	titleText: s,
+	content: c
 };
 //#endregion
-export { c as default };
+export { l as default };
 
 //# sourceMappingURL=Drawer.module.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.module.css.js","names":[],"sources":["../../../src/components/Drawer/Drawer.module.css"],"sourcesContent":["/* ─── Backdrop ─────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n/* ─── Drawer ──────────────────────────────────────────────────────────────── */\n\n.drawer {\n  display: flex;\n  flex-direction: column;\n  width: min(var(--gnome-drawer-width, var(--gnome-drawer-preset-width, 420px)), 100vw);\n  height: 100dvh;\n  min-width: 0;\n  overflow: hidden;\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\n.classic {\n  --gnome-drawer-preset-width: 420px;\n}\n\n.wide {\n  --gnome-drawer-preset-width: 640px;\n}\n\n.left {\n  margin-right: auto;\n  border-radius: 0 var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0;\n  box-shadow:\n    4px 0 24px rgba(0, 0, 0, 0.18),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n  animation: drawer-in-left var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.right {\n  margin-left: auto;\n  border-radius: var(--gnome-radius-xl, 16px) 0 0 var(--gnome-radius-xl, 16px);\n  box-shadow:\n    -4px 0 24px rgba(0, 0, 0, 0.18),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n  animation: drawer-in-right var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes drawer-in-left {\n  from { transform: translateX(-100%); }\n  to   { transform: translateX(0); }\n}\n\n@keyframes drawer-in-right {\n  from { transform: translateX(100%); }\n  to   { transform: translateX(0); }\n}\n\n.title {\n  flex-shrink: 0;\n  padding: var(--gnome-space-4, 24px) var(--gnome-space-4, 24px) var(--gnome-space-2, 12px);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: var(--gnome-line-height-title, 1.3);\n}\n\n.content {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: var(--gnome-space-4, 24px);\n}\n\n.title + .content {\n  padding-top: 0;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .drawer {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n  }\n\n  .left {\n    box-shadow:\n      4px 0 24px rgba(0, 0, 0, 0.45),\n      0 0 0 1px rgba(255, 255, 255, 0.06);\n  }\n\n  .right {\n    box-shadow:\n      -4px 0 24px rgba(0, 0, 0, 0.45),\n      0 0 0 1px rgba(255, 255, 255, 0.06);\n  }\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .left,\n  .right {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Drawer.module.css.js","names":[],"sources":["../../../src/components/Drawer/Drawer.module.css"],"sourcesContent":["/* ─── Backdrop ─────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─── Drawer ──────────────────────────────────────────────────────────────── */\n\n.drawer {\n  display: flex;\n  flex-direction: column;\n  width: min(var(--gnome-drawer-width, var(--gnome-drawer-preset-width, 420px)), 100vw);\n  height: 100dvh;\n  min-width: 0;\n  overflow: hidden;\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\n.classic {\n  --gnome-drawer-preset-width: 420px;\n}\n\n.wide {\n  --gnome-drawer-preset-width: 640px;\n}\n\n.left {\n  margin-right: auto;\n  border-radius: 0 var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0;\n  box-shadow:\n    4px 0 24px rgba(0, 0, 0, 0.18),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n  animation: drawer-in-left var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease)\n    both;\n}\n\n.right {\n  margin-left: auto;\n  border-radius: var(--gnome-radius-xl, 16px) 0 0 var(--gnome-radius-xl, 16px);\n  box-shadow:\n    -4px 0 24px rgba(0, 0, 0, 0.18),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n  animation: drawer-in-right var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease)\n    both;\n}\n\n@keyframes drawer-in-left {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n@keyframes drawer-in-right {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n.title {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-4, 24px) var(--gnome-space-4, 24px) var(--gnome-space-2, 12px);\n}\n\n.titleText {\n  flex: 1;\n  min-width: 0;\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}\n\n.content {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: var(--gnome-space-4, 24px);\n}\n\n.title + .content {\n  padding-top: 0;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .drawer {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n  }\n\n  .left {\n    box-shadow:\n      4px 0 24px rgba(0, 0, 0, 0.45),\n      0 0 0 1px rgba(255, 255, 255, 0.06);\n  }\n\n  .right {\n    box-shadow:\n      -4px 0 24px rgba(0, 0, 0, 0.45),\n      0 0 0 1px rgba(255, 255, 255, 0.06);\n  }\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .left,\n  .right {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { Drawer } from './Drawer';
 export type { DrawerProps, DrawerSide, DrawerSize } from './Drawer';
+export { Drawer } from './Drawer';

package/dist/components/Dropdown/Dropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.cjs","names":[],"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useId,\n  useEffect,\n  useCallback,\n  type KeyboardEvent,\n  type HTMLAttributes,\n} from \"react\";\nimport { PanDown, Check } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport styles from \"./Dropdown.module.css\";\n\nexport interface DropdownOption<V extends string = string> {\n  /** The value submitted / returned on selection. */\n  value: V;\n  /** Display label shown in the list and trigger. */\n  label: string;\n  /** Optional descriptive text shown below the label. */\n  description?: string;\n  /** Whether the option is selectable. */\n  disabled?: boolean;\n}\n\nexport interface DropdownProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** The list of selectable options. */\n  options: DropdownOption<V>[];\n  /** The currently selected value. */\n  value?: V;\n  /** Called when the user selects an option. */\n  onChange?: (value: V) => void;\n  /** Placeholder shown when no option is selected. */\n  placeholder?: string;\n  /** Accessible label for the control (used as `aria-label`). */\n  \"aria-label\"?: string;\n  /** Disables the entire control. */\n  disabled?: boolean;\n}\n\n/**\n * Expandable option list following the Adwaita combo-row / drop-down pattern.\n *\n * - Fully keyboard-navigable: Space/Enter opens; ↑/↓ navigate; Enter selects; Escape closes.\n * - Uses `role=\"combobox\"` + `role=\"listbox\"` + `role=\"option\"` ARIA pattern.\n * - Closes when clicking outside or pressing Escape.\n * - The list flips above the trigger when there is not enough space below.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html\n */\nexport function Dropdown<V extends string = string>({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select an option\",\n  disabled,\n  className,\n  ...props\n}: DropdownProps<V>) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId  = useId();\n  const listboxId  = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef    = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  // Compute flip direction when opening\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) return;\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 48 + 8, 280);\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) return;\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: DropdownOption<V>) => {\n      if (opt.disabled) return;\n      onChange?.(opt.value);\n      closeList();\n    },\n    [onChange, closeList]\n  );\n\n  // Scroll active item into view\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) return;\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n    item?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex, open]);\n\n  // Close on outside click\n  useEffect(() => {\n    if (!open) return;\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open, closeList]);\n\n  // Trigger keyboard handler\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case \"Enter\":\n        case \" \":\n        case \"ArrowDown\":\n          e.preventDefault();\n          openList();\n          break;\n        case \"ArrowUp\":\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(\n            options.reduce(\n              (last, o, i) => (!o.disabled ? i : last),\n              -1\n            )\n          );\n          break;\n      }\n    },\n    [openList, computeFlip, options]\n  );\n\n  // Listbox keyboard handler\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case \"ArrowDown\": {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case \"ArrowUp\": {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case \"Home\":\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case \"End\":\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case \"Enter\":\n        case \" \": {\n          e.preventDefault();\n          if (activeIndex >= 0) selectOption(options[activeIndex]);\n          break;\n        }\n        case \"Escape\":\n        case \"Tab\":\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList]\n  );\n\n  return (\n    <div\n      className={[styles.wrapper, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      {/* Trigger button */}\n      <button\n        ref={triggerRef}\n        id={triggerId}\n        type=\"button\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={listboxId}\n        aria-activedescendant={\n          open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n        }\n        disabled={disabled}\n        className={[styles.trigger, open ? styles.triggerOpen : null]\n          .filter(Boolean)\n          .join(\" \")}\n        onClick={() => (open ? closeList() : openList())}\n        onKeyDown={handleTriggerKeyDown}\n      >\n        <span className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n          .filter(Boolean).join(\" \")}>\n          {selected?.label ?? placeholder}\n        </span>\n        <Icon\n          icon={PanDown}\n          size=\"md\"\n          aria-hidden\n          className={[styles.chevron, open ? styles.chevronOpen : null]\n            .filter(Boolean).join(\" \")}\n        />\n      </button>\n\n      {/* Listbox */}\n      {open && (\n        <ul\n          ref={listRef}\n          id={listboxId}\n          role=\"listbox\"\n          aria-labelledby={triggerId}\n          tabIndex={-1}\n          className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n            .filter(Boolean)\n            .join(\" \")}\n          onKeyDown={handleListKeyDown}\n        >\n          {options.map((opt, i) => (\n            <li\n              key={opt.value}\n              id={`${listboxId}-opt-${i}`}\n              role=\"option\"\n              aria-selected={opt.value === value}\n              aria-disabled={opt.disabled}\n              className={[\n                styles.option,\n                opt.value === value   ? styles.optionSelected : null,\n                i === activeIndex     ? styles.optionActive   : null,\n                opt.disabled          ? styles.optionDisabled : null,\n              ]\n                .filter(Boolean)\n                .join(\" \")}\n              onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n              onClick={() => selectOption(opt)}\n            >\n              <span className={styles.optionText}>\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.description && (\n                  <span className={styles.optionDesc}>{opt.description}</span>\n                )}\n              </span>\n              {opt.value === value && (\n                <Icon icon={Check} size=\"md\" aria-hidden className={styles.checkIcon} />\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Dropdown.cjs","names":[],"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { Check, PanDown } from '@gnome-ui/icons';\nimport {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Icon } from '../Icon';\n\nimport styles from './Dropdown.module.css';\n\nexport interface DropdownOption<V extends string = string> {\n  /** The value submitted / returned on selection. */\n  value: V;\n  /** Display label shown in the list and trigger. */\n  label: string;\n  /** Optional descriptive text shown below the label. */\n  description?: string;\n  /** Whether the option is selectable. */\n  disabled?: boolean;\n}\n\nexport interface DropdownProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** The list of selectable options. */\n  options: DropdownOption<V>[];\n  /** The currently selected value. */\n  value?: V;\n  /** Called when the user selects an option. */\n  onChange?: (value: V) => void;\n  /** Placeholder shown when no option is selected. */\n  placeholder?: string;\n  /** Accessible label for the control (used as `aria-label`). */\n  'aria-label'?: string;\n  /** Disables the entire control. */\n  disabled?: boolean;\n}\n\n/**\n * Expandable option list following the Adwaita combo-row / drop-down pattern.\n *\n * - Fully keyboard-navigable: Space/Enter opens; ↑/↓ navigate; Enter selects; Escape closes.\n * - Uses `role=\"combobox\"` + `role=\"listbox\"` + `role=\"option\"` ARIA pattern.\n * - Closes when clicking outside or pressing Escape.\n * - The list flips above the trigger when there is not enough space below.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html\n */\nexport function Dropdown<V extends string = string>({\n  options,\n  value,\n  onChange,\n  placeholder = 'Select an option',\n  disabled,\n  className,\n  ...props\n}: DropdownProps<V>) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId = useId();\n  const listboxId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  // Compute flip direction when opening\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 48 + 8, 280);\n\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: DropdownOption<V>) => {\n      if (opt.disabled) {\n        return;\n      }\n\n      onChange?.(opt.value);\n      closeList();\n    },\n    [onChange, closeList],\n  );\n\n  // Scroll active item into view\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) {\n      return;\n    }\n\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n\n    item?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, open]);\n\n  // Close on outside click\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n\n    document.addEventListener('mousedown', handler);\n\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open, closeList]);\n\n  // Trigger keyboard handler\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n        case 'ArrowDown':\n          e.preventDefault();\n          openList();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(options.reduce((last, o, i) => (!o.disabled ? i : last), -1));\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\n  // Listbox keyboard handler\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case 'Home':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case 'End':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case 'Enter':\n        case ' ': {\n          e.preventDefault();\n          if (activeIndex >= 0) {\n            selectOption(options[activeIndex]);\n          }\n\n          break;\n        }\n        case 'Escape':\n        case 'Tab':\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList],\n  );\n\n  return (\n    <div className={[styles.wrapper, className].filter(Boolean).join(' ')} {...props}>\n      {/* Trigger button */}\n      <button\n        ref={triggerRef}\n        id={triggerId}\n        type=\"button\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={listboxId}\n        aria-activedescendant={\n          open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n        }\n        disabled={disabled}\n        className={[styles.trigger, open ? styles.triggerOpen : null].filter(Boolean).join(' ')}\n        onClick={() => (open ? closeList() : openList())}\n        onKeyDown={handleTriggerKeyDown}\n      >\n        <span\n          className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {selected?.label ?? placeholder}\n        </span>\n        <Icon\n          icon={PanDown}\n          size=\"md\"\n          aria-hidden\n          className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(' ')}\n        />\n      </button>\n\n      {/* Listbox */}\n      {open && (\n        <ul\n          ref={listRef}\n          id={listboxId}\n          role=\"listbox\"\n          aria-labelledby={triggerId}\n          tabIndex={-1}\n          className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n            .filter(Boolean)\n            .join(' ')}\n          onKeyDown={handleListKeyDown}\n        >\n          {options.map((opt, i) => (\n            <li\n              key={opt.value}\n              id={`${listboxId}-opt-${i}`}\n              role=\"option\"\n              aria-selected={opt.value === value}\n              aria-disabled={opt.disabled}\n              className={[\n                styles.option,\n                opt.value === value ? styles.optionSelected : null,\n                i === activeIndex ? styles.optionActive : null,\n                opt.disabled ? styles.optionDisabled : null,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n              onClick={() => selectOption(opt)}\n            >\n              <span className={styles.optionText}>\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.description && <span className={styles.optionDesc}>{opt.description}</span>}\n              </span>\n              {opt.value === value && (\n                <Icon icon={Check} size=\"md\" aria-hidden className={styles.checkIcon} />\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/Dropdown/Dropdown.d.ts

@@ -9,7 +9,7 @@ export interface DropdownOption<V extends string = string> {
     /** Whether the option is selectable. */
     disabled?: boolean;
 }
-export interface DropdownProps<V extends string = string> extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+export interface DropdownProps<V extends string = string> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** The list of selectable options. */
     options: DropdownOption<V>[];
     /** The currently selected value. */
@@ -19,7 +19,7 @@ export interface DropdownProps<V extends string = string> extends Omit<HTMLAttri
     /** Placeholder shown when no option is selected. */
     placeholder?: string;
     /** Accessible label for the control (used as `aria-label`). */
-    "aria-label"?: string;
+    'aria-label'?: string;
     /** Disables the entire control. */
     disabled?: boolean;
 }

package/dist/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","names":[],"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useId,\n  useEffect,\n  useCallback,\n  type KeyboardEvent,\n  type HTMLAttributes,\n} from \"react\";\nimport { PanDown, Check } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport styles from \"./Dropdown.module.css\";\n\nexport interface DropdownOption<V extends string = string> {\n  /** The value submitted / returned on selection. */\n  value: V;\n  /** Display label shown in the list and trigger. */\n  label: string;\n  /** Optional descriptive text shown below the label. */\n  description?: string;\n  /** Whether the option is selectable. */\n  disabled?: boolean;\n}\n\nexport interface DropdownProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** The list of selectable options. */\n  options: DropdownOption<V>[];\n  /** The currently selected value. */\n  value?: V;\n  /** Called when the user selects an option. */\n  onChange?: (value: V) => void;\n  /** Placeholder shown when no option is selected. */\n  placeholder?: string;\n  /** Accessible label for the control (used as `aria-label`). */\n  \"aria-label\"?: string;\n  /** Disables the entire control. */\n  disabled?: boolean;\n}\n\n/**\n * Expandable option list following the Adwaita combo-row / drop-down pattern.\n *\n * - Fully keyboard-navigable: Space/Enter opens; ↑/↓ navigate; Enter selects; Escape closes.\n * - Uses `role=\"combobox\"` + `role=\"listbox\"` + `role=\"option\"` ARIA pattern.\n * - Closes when clicking outside or pressing Escape.\n * - The list flips above the trigger when there is not enough space below.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html\n */\nexport function Dropdown<V extends string = string>({\n  options,\n  value,\n  onChange,\n  placeholder = \"Select an option\",\n  disabled,\n  className,\n  ...props\n}: DropdownProps<V>) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId  = useId();\n  const listboxId  = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef    = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  // Compute flip direction when opening\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) return;\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 48 + 8, 280);\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) return;\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: DropdownOption<V>) => {\n      if (opt.disabled) return;\n      onChange?.(opt.value);\n      closeList();\n    },\n    [onChange, closeList]\n  );\n\n  // Scroll active item into view\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) return;\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n    item?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex, open]);\n\n  // Close on outside click\n  useEffect(() => {\n    if (!open) return;\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open, closeList]);\n\n  // Trigger keyboard handler\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case \"Enter\":\n        case \" \":\n        case \"ArrowDown\":\n          e.preventDefault();\n          openList();\n          break;\n        case \"ArrowUp\":\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(\n            options.reduce(\n              (last, o, i) => (!o.disabled ? i : last),\n              -1\n            )\n          );\n          break;\n      }\n    },\n    [openList, computeFlip, options]\n  );\n\n  // Listbox keyboard handler\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case \"ArrowDown\": {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case \"ArrowUp\": {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case \"Home\":\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case \"End\":\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case \"Enter\":\n        case \" \": {\n          e.preventDefault();\n          if (activeIndex >= 0) selectOption(options[activeIndex]);\n          break;\n        }\n        case \"Escape\":\n        case \"Tab\":\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList]\n  );\n\n  return (\n    <div\n      className={[styles.wrapper, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      {/* Trigger button */}\n      <button\n        ref={triggerRef}\n        id={triggerId}\n        type=\"button\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={listboxId}\n        aria-activedescendant={\n          open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n        }\n        disabled={disabled}\n        className={[styles.trigger, open ? styles.triggerOpen : null]\n          .filter(Boolean)\n          .join(\" \")}\n        onClick={() => (open ? closeList() : openList())}\n        onKeyDown={handleTriggerKeyDown}\n      >\n        <span className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n          .filter(Boolean).join(\" \")}>\n          {selected?.label ?? placeholder}\n        </span>\n        <Icon\n          icon={PanDown}\n          size=\"md\"\n          aria-hidden\n          className={[styles.chevron, open ? styles.chevronOpen : null]\n            .filter(Boolean).join(\" \")}\n        />\n      </button>\n\n      {/* Listbox */}\n      {open && (\n        <ul\n          ref={listRef}\n          id={listboxId}\n          role=\"listbox\"\n          aria-labelledby={triggerId}\n          tabIndex={-1}\n          className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n            .filter(Boolean)\n            .join(\" \")}\n          onKeyDown={handleListKeyDown}\n        >\n          {options.map((opt, i) => (\n            <li\n              key={opt.value}\n              id={`${listboxId}-opt-${i}`}\n              role=\"option\"\n              aria-selected={opt.value === value}\n              aria-disabled={opt.disabled}\n              className={[\n                styles.option,\n                opt.value === value   ? styles.optionSelected : null,\n                i === activeIndex     ? styles.optionActive   : null,\n                opt.disabled          ? styles.optionDisabled : null,\n              ]\n                .filter(Boolean)\n                .join(\" \")}\n              onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n              onClick={() => selectOption(opt)}\n            >\n              <span className={styles.optionText}>\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.description && (\n                  <span className={styles.optionDesc}>{opt.description}</span>\n                )}\n              </span>\n              {opt.value === value && (\n                <Icon icon={Check} size=\"md\" aria-hidden className={styles.checkIcon} />\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","names":[],"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { Check, PanDown } from '@gnome-ui/icons';\nimport {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Icon } from '../Icon';\n\nimport styles from './Dropdown.module.css';\n\nexport interface DropdownOption<V extends string = string> {\n  /** The value submitted / returned on selection. */\n  value: V;\n  /** Display label shown in the list and trigger. */\n  label: string;\n  /** Optional descriptive text shown below the label. */\n  description?: string;\n  /** Whether the option is selectable. */\n  disabled?: boolean;\n}\n\nexport interface DropdownProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** The list of selectable options. */\n  options: DropdownOption<V>[];\n  /** The currently selected value. */\n  value?: V;\n  /** Called when the user selects an option. */\n  onChange?: (value: V) => void;\n  /** Placeholder shown when no option is selected. */\n  placeholder?: string;\n  /** Accessible label for the control (used as `aria-label`). */\n  'aria-label'?: string;\n  /** Disables the entire control. */\n  disabled?: boolean;\n}\n\n/**\n * Expandable option list following the Adwaita combo-row / drop-down pattern.\n *\n * - Fully keyboard-navigable: Space/Enter opens; ↑/↓ navigate; Enter selects; Escape closes.\n * - Uses `role=\"combobox\"` + `role=\"listbox\"` + `role=\"option\"` ARIA pattern.\n * - Closes when clicking outside or pressing Escape.\n * - The list flips above the trigger when there is not enough space below.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html\n */\nexport function Dropdown<V extends string = string>({\n  options,\n  value,\n  onChange,\n  placeholder = 'Select an option',\n  disabled,\n  className,\n  ...props\n}: DropdownProps<V>) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId = useId();\n  const listboxId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  // Compute flip direction when opening\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 48 + 8, 280);\n\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: DropdownOption<V>) => {\n      if (opt.disabled) {\n        return;\n      }\n\n      onChange?.(opt.value);\n      closeList();\n    },\n    [onChange, closeList],\n  );\n\n  // Scroll active item into view\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) {\n      return;\n    }\n\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n\n    item?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, open]);\n\n  // Close on outside click\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n\n    document.addEventListener('mousedown', handler);\n\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open, closeList]);\n\n  // Trigger keyboard handler\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n        case 'ArrowDown':\n          e.preventDefault();\n          openList();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(options.reduce((last, o, i) => (!o.disabled ? i : last), -1));\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\n  // Listbox keyboard handler\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case 'Home':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case 'End':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case 'Enter':\n        case ' ': {\n          e.preventDefault();\n          if (activeIndex >= 0) {\n            selectOption(options[activeIndex]);\n          }\n\n          break;\n        }\n        case 'Escape':\n        case 'Tab':\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList],\n  );\n\n  return (\n    <div className={[styles.wrapper, className].filter(Boolean).join(' ')} {...props}>\n      {/* Trigger button */}\n      <button\n        ref={triggerRef}\n        id={triggerId}\n        type=\"button\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={listboxId}\n        aria-activedescendant={\n          open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n        }\n        disabled={disabled}\n        className={[styles.trigger, open ? styles.triggerOpen : null].filter(Boolean).join(' ')}\n        onClick={() => (open ? closeList() : openList())}\n        onKeyDown={handleTriggerKeyDown}\n      >\n        <span\n          className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {selected?.label ?? placeholder}\n        </span>\n        <Icon\n          icon={PanDown}\n          size=\"md\"\n          aria-hidden\n          className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(' ')}\n        />\n      </button>\n\n      {/* Listbox */}\n      {open && (\n        <ul\n          ref={listRef}\n          id={listboxId}\n          role=\"listbox\"\n          aria-labelledby={triggerId}\n          tabIndex={-1}\n          className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n            .filter(Boolean)\n            .join(' ')}\n          onKeyDown={handleListKeyDown}\n        >\n          {options.map((opt, i) => (\n            <li\n              key={opt.value}\n              id={`${listboxId}-opt-${i}`}\n              role=\"option\"\n              aria-selected={opt.value === value}\n              aria-disabled={opt.disabled}\n              className={[\n                styles.option,\n                opt.value === value ? styles.optionSelected : null,\n                i === activeIndex ? styles.optionActive : null,\n                opt.disabled ? styles.optionDisabled : null,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n              onClick={() => selectOption(opt)}\n            >\n              <span className={styles.optionText}>\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.description && <span className={styles.optionDesc}>{opt.description}</span>}\n              </span>\n              {opt.value === value && (\n                <Icon icon={Check} size=\"md\" aria-hidden className={styles.checkIcon} />\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e=`_wrapper_1hi05_3`,t=`_trigger_1hi05_11`,n=`_triggerOpen_1hi05_63`,r=`_triggerLabel_1hi05_73`,i=`_placeholder_1hi05_81`,a=`_chevron_1hi05_87`,o=`_chevronOpen_1hi05_94`,s=`_list_1hi05_100`,c=`_listDown_1hi05_129`,l=`_listUp_1hi05_133`,u=`_option_1hi05_145`,d=`_optionActive_1hi05_162`,f=`_optionSelected_1hi05_166`,p=`_optionDisabled_1hi05_170`,m=`_optionText_1hi05_178`,h=`_optionLabel_1hi05_186`,g=`_optionDesc_1hi05_192`,_=`_checkIcon_1hi05_202`,v={wrapper:e,trigger:t,triggerOpen:n,triggerLabel:r,placeholder:i,chevron:a,chevronOpen:o,list:s,"list-in":`_list-in_1hi05_1`,listDown:c,listUp:l,"list-in-up":`_list-in-up_1hi05_1`,option:u,optionActive:d,optionSelected:f,optionDisabled:p,optionText:m,optionLabel:h,optionDesc:g,checkIcon:_};exports.default=v;
+var e=`_wrapper_15m1u_3`,t=`_trigger_15m1u_11`,n=`_triggerOpen_15m1u_63`,r=`_triggerLabel_15m1u_73`,i=`_placeholder_15m1u_81`,a=`_chevron_15m1u_87`,o=`_chevronOpen_15m1u_94`,s=`_list_15m1u_100`,c=`_listDown_15m1u_137`,l=`_listUp_15m1u_141`,u=`_option_15m1u_161`,d=`_optionActive_15m1u_178`,f=`_optionSelected_15m1u_182`,p=`_optionDisabled_15m1u_186`,m=`_optionText_15m1u_194`,h=`_optionLabel_15m1u_202`,g=`_optionDesc_15m1u_208`,_=`_checkIcon_15m1u_218`,v={wrapper:e,trigger:t,triggerOpen:n,triggerLabel:r,placeholder:i,chevron:a,chevronOpen:o,list:s,"list-in":`_list-in_15m1u_1`,listDown:c,listUp:l,"list-in-up":`_list-in-up_15m1u_1`,option:u,optionActive:d,optionSelected:f,optionDisabled:p,optionText:m,optionLabel:h,optionDesc:g,checkIcon:_};exports.default=v;
 //# sourceMappingURL=Dropdown.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.module.css.cjs","names":[],"sources":["../../../src/components/Dropdown/Dropdown.module.css"],"sourcesContent":["/* ─── Wrapper ────────────────────────────────────────────────────────────────── */\n\n.wrapper {\n  position: relative;\n  display: inline-block;\n  min-width: 160px;\n}\n\n/* ─── Trigger button ─────────────────────────────────────────────────────────── */\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-1, 6px);\n  width: 100%;\n\n  padding: 7px var(--gnome-space-2, 12px);\n  min-height: 36px;\n\n  appearance: none;\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0,0,0,0.08));\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\n  cursor: pointer;\n  user-select: none;\n  text-align: left;\n\n  transition:\n    background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    border-color     var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    box-shadow       var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 90%, black 10%);\n}\n\n.trigger:focus {\n  outline: none;\n}\n\n.trigger:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\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, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.trigger:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.triggerOpen {\n  border-color: var(--gnome-accent-color, #3584e4);\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, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Trigger label ──────────────────────────────────────────────────────────── */\n\n.triggerLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.placeholder {\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Chevron icon ───────────────────────────────────────────────────────────── */\n\n.chevron {\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  transition: transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.chevronOpen {\n  transform: rotate(180deg);\n}\n\n/* ─── Listbox ────────────────────────────────────────────────────────────────── */\n\n.list {\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n\n  margin: 0;\n  padding: 4px 0;\n  list-style: none;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow:\n    0 4px 16px rgba(0, 0, 0, 0.12),\n    0 1px 3px  rgba(0, 0, 0, 0.08);\n\n  max-height: 280px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n\n  animation: list-in var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes list-in {\n  from { opacity: 0; transform: scaleY(0.95); transform-origin: top center; }\n  to   { opacity: 1; transform: scaleY(1);    transform-origin: top center; }\n}\n\n.listDown {\n  top: calc(100% + 4px);\n}\n\n.listUp {\n  bottom: calc(100% + 4px);\n  animation-name: list-in-up;\n}\n\n@keyframes list-in-up {\n  from { opacity: 0; transform: scaleY(0.95); transform-origin: bottom center; }\n  to   { opacity: 1; transform: scaleY(1);    transform-origin: bottom center; }\n}\n\n/* ─── Option ─────────────────────────────────────────────────────────────────── */\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: 8px var(--gnome-space-2, 12px);\n  min-height: 40px;\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\n  cursor: pointer;\n  user-select: none;\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.optionActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 12%, transparent);\n}\n\n.optionSelected {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.optionDisabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Option text block ──────────────────────────────────────────────────────── */\n\n.optionText {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.optionLabel {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.optionDesc {\n  font-size: var(--gnome-font-size-caption, 0.8125rem);\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Check icon (selected) ──────────────────────────────────────────────────── */\n\n.checkIcon {\n  flex-shrink: 0;\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .trigger {\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  .trigger:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 16px rgba(0, 0, 0, 0.4),\n      0 1px 3px  rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .trigger,\n  .chevron {\n    transition: none;\n  }\n\n  .list {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Dropdown.module.css.cjs","names":[],"sources":["../../../src/components/Dropdown/Dropdown.module.css"],"sourcesContent":["/* ─── Wrapper ────────────────────────────────────────────────────────────────── */\n\n.wrapper {\n  position: relative;\n  display: inline-block;\n  min-width: 160px;\n}\n\n/* ─── Trigger button ─────────────────────────────────────────────────────────── */\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-1, 6px);\n  width: 100%;\n\n  padding: 7px var(--gnome-space-2, 12px);\n  min-height: 36px;\n\n  appearance: none;\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));\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\n  cursor: pointer;\n  user-select: none;\n  text-align: left;\n\n  transition:\n    background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    border-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 90%, black 10%);\n}\n\n.trigger:focus {\n  outline: none;\n}\n\n.trigger:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\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, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.trigger:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.triggerOpen {\n  border-color: var(--gnome-accent-color, #3584e4);\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, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Trigger label ──────────────────────────────────────────────────────────── */\n\n.triggerLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.placeholder {\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Chevron icon ───────────────────────────────────────────────────────────── */\n\n.chevron {\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  transition: transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.chevronOpen {\n  transform: rotate(180deg);\n}\n\n/* ─── Listbox ────────────────────────────────────────────────────────────────── */\n\n.list {\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n\n  margin: 0;\n  padding: 4px 0;\n  list-style: none;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow:\n    0 4px 16px rgba(0, 0, 0, 0.12),\n    0 1px 3px rgba(0, 0, 0, 0.08);\n\n  max-height: 280px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n\n  animation: list-in var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes list-in {\n  from {\n    opacity: 0;\n    transform: scaleY(0.95);\n    transform-origin: top center;\n  }\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n    transform-origin: top center;\n  }\n}\n\n.listDown {\n  top: calc(100% + 4px);\n}\n\n.listUp {\n  bottom: calc(100% + 4px);\n  animation-name: list-in-up;\n}\n\n@keyframes list-in-up {\n  from {\n    opacity: 0;\n    transform: scaleY(0.95);\n    transform-origin: bottom center;\n  }\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n    transform-origin: bottom center;\n  }\n}\n\n/* ─── Option ─────────────────────────────────────────────────────────────────── */\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: 8px var(--gnome-space-2, 12px);\n  min-height: 40px;\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\n  cursor: pointer;\n  user-select: none;\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.optionActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 12%, transparent);\n}\n\n.optionSelected {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.optionDisabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Option text block ──────────────────────────────────────────────────────── */\n\n.optionText {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.optionLabel {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.optionDesc {\n  font-size: var(--gnome-font-size-caption, 0.8125rem);\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Check icon (selected) ──────────────────────────────────────────────────── */\n\n.checkIcon {\n  flex-shrink: 0;\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .trigger {\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  .trigger:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 16px rgba(0, 0, 0, 0.4),\n      0 1px 3px rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .trigger,\n  .chevron {\n    transition: none;\n  }\n\n  .list {\n    animation: none;\n  }\n}\n"],"mappings":""}