@gnome-ui/react 1.45.0 → 1.45.2

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":[],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import {\n  useEffect,\n  useRef,\n  useCallback,\n  useId,\n  type KeyboardEvent,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { trapFocus, FOCUSABLE, useVisualViewport } from \"./dialogUtils\";\nimport styles from \"./Dialog.module.css\";\n\n// ─── AlertDialog types ────────────────────────────────────────────────────────\n\nexport type AlertDialogResponseVariant = \"default\" | \"suggested\" | \"destructive\";\n\nexport interface AlertDialogResponse {\n  /**\n   * Unique identifier returned via `onResponse`.\n   * Use `\"cancel\"` by convention for the dismissive action.\n   */\n  id: string;\n  /** Button label. */\n  label: string;\n  /** Visual emphasis. Defaults to `\"default\"`. */\n  variant?: AlertDialogResponseVariant;\n  /** Disables the button. */\n  disabled?: boolean;\n}\n\n// ─── Dialog ───────────────────────────────────────────────────────────────────\n\nexport interface DialogButton {\n  /** Button label. */\n  label: string;\n  /** Visual variant. Defaults to `\"default\"`. */\n  variant?: \"default\" | \"suggested\" | \"destructive\";\n  /** Called when the button is clicked. */\n  onClick: () => void;\n  /** Whether the button is disabled. */\n  disabled?: boolean;\n}\n\nexport interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Whether the dialog is visible. */\n  open: boolean;\n\n  // ── Standard dialog ──────────────────────────────────────────────────────\n\n  /** Dialog heading. */\n  title?: ReactNode;\n  /** Body content. */\n  children?: ReactNode;\n  /** Action buttons (standard dialog API). */\n  buttons?: DialogButton[];\n  /** Called on Escape or backdrop click. */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the dialog. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n\n  // ── AlertDialog extension ─────────────────────────────────────────────────\n\n  /**\n   * ARIA role. Use `\"alertdialog\"` for confirmations and destructive warnings —\n   * screen readers announce it immediately. Defaults to `\"dialog\"`.\n   *\n   * When using `role=\"alertdialog\"`, prefer the `responses`/`onResponse` API\n   * over `buttons`/`onClick` for semantic clarity.\n   */\n  role?: \"dialog\" | \"alertdialog\";\n\n  /**\n   * Response buttons (AlertDialog API). Alternative to `buttons` — each\n   * response has a semantic `id` returned via `onResponse`.\n   * Escape and backdrop click fire the first non-destructive response.\n   */\n  responses?: AlertDialogResponse[];\n\n  /**\n   * Called with the `id` of the response button clicked.\n   * Required when `responses` is provided.\n   */\n  onResponse?: (id: string) => void;\n}\n\n/**\n * Blocking modal dialog following the Adwaita pattern.\n *\n * **Standard** — `title` + `children` + `buttons[]`.\n *\n * **Alert** — add `role=\"alertdialog\"` + `responses[]` + `onResponse`.\n * Uses a semantic response id instead of per-button `onClick`.\n * Escape / backdrop fire the first non-destructive response.\n * Mirrors `AdwAlertDialog`.\n *\n * For the app-info dialog, use `<AboutDialog />` instead.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Dialog.html\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AlertDialog.html\n */\nexport function Dialog({\n  open,\n  title,\n  children,\n  buttons = [],\n  onClose,\n  closeOnBackdrop = true,\n  role = \"dialog\",\n  responses,\n  onResponse,\n  className,\n  ...props\n}: DialogProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n\n  const isAlert = !!responses;\n  const viewportStyle = useVisualViewport();\n\n  // ── Focus management ───────────────────────────────────────────────────────\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = dialogRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // ── Dismiss helpers ────────────────────────────────────────────────────────\n  const dismissAlert = useCallback(() => {\n    const cancel = responses?.find((r) => r.variant !== \"destructive\" && !r.disabled);\n    if (cancel) onResponse?.(cancel.id);\n  }, [responses, onResponse]);\n\n  const handleBackdrop = isAlert ? dismissAlert : closeOnBackdrop ? onClose : undefined;\n\n  // ── Keyboard ───────────────────────────────────────────────────────────────\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        if (isAlert) dismissAlert();\n        else onClose?.();\n        return;\n      }\n      trapFocus(e, dialogRef);\n    },\n    [isAlert, dismissAlert, onClose]\n  );\n\n  if (!open) return null;\n\n  // ── Render buttons (standard or alert) ────────────────────────────────────\n  const renderButtons = () => {\n    if (isAlert && responses) {\n      return (\n        <div className={styles.footer}>\n          {responses.map((r) => (\n            <button\n              key={r.id}\n              type=\"button\"\n              disabled={r.disabled}\n              className={[styles.btn, styles[`btn-${r.variant ?? \"default\"}`]].filter(Boolean).join(\" \")}\n              onClick={() => onResponse?.(r.id)}\n            >\n              {r.label}\n            </button>\n          ))}\n        </div>\n      );\n    }\n    if (buttons.length > 0) {\n      return (\n        <div className={styles.footer}>\n          {buttons.map((btn) => (\n            <button\n              key={btn.label}\n              type=\"button\"\n              disabled={btn.disabled}\n              className={[styles.btn, styles[`btn-${btn.variant ?? \"default\"}`]].filter(Boolean).join(\" \")}\n              onClick={btn.onClick}\n            >\n              {btn.label}\n            </button>\n          ))}\n        </div>\n      );\n    }\n    return null;\n  };\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      style={viewportStyle}\n      onClick={handleBackdrop}\n      aria-hidden=\"true\"\n    >\n      <div\n        ref={dialogRef}\n        role={role}\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={[styles.dialog, className].filter(Boolean).join(\" \")}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {title && <div id={titleId} className={styles.title}>{title}</div>}\n        {children && <div className={styles.body}>{children}</div>}\n        {renderButtons()}\n      </div>\n    </div>\n  );\n\n  if (typeof document === \"undefined\") return node;\n  return createPortal(node, document.body);\n}\n"],"mappings":";;;;;;AAqGA,SAAgB,EAAO,EACrB,SACA,UACA,aACA,aAAU,EAAE,EACZ,YACA,qBAAkB,IAClB,UAAO,UACP,cACA,eACA,cACA,GAAG,KACW;CACd,IAAM,IAAY,EAAuB,KAAK,EACxC,IAAU,GAAO,EACjB,IAAoB,EAAuB,KAAK,EAEhD,IAAU,CAAC,CAAC,GACZ,IAAgB,GAAmB;AAGzC,SAAgB;AACd,EAAI,KACF,EAAkB,UAAU,SAAS,gBAC1B,EAAU,SAAS,cAA2B,EAAU,GAC/D,OAAO,IAEV,EAAkB,SAAgC,OAAO;IAE3D,CAAC,EAAK,CAAC;CAGV,IAAM,IAAe,QAAkB;EACrC,IAAM,IAAS,GAAW,MAAM,MAAM,EAAE,YAAY,iBAAiB,CAAC,EAAE,SAAS;AACjF,EAAI,KAAQ,IAAa,EAAO,GAAG;IAClC,CAAC,GAAW,EAAW,CAAC,EAErB,IAAiB,IAAU,IAAe,IAAkB,IAAU,KAAA,GAGtE,IAAgB,GACnB,MAAqC;AACpC,MAAI,EAAE,QAAQ,UAAU;AAEtB,GADA,EAAE,gBAAgB,EACd,IAAS,GAAc,GACtB,KAAW;AAChB;;AAEF,IAAU,GAAG,EAAU;IAEzB;EAAC;EAAS;EAAc;EAAQ,CACjC;AAED,KAAI,CAAC,EAAM,QAAO;CAGlB,IAAM,UACA,KAAW,IAEX,kBAAC,OAAD;EAAK,WAAW,EAAO;YACpB,EAAU,KAAK,MACd,kBAAC,UAAD;GAEE,MAAK;GACL,UAAU,EAAE;GACZ,WAAW,CAAC,EAAO,KAAK,EAAO,OAAO,EAAE,WAAW,aAAa,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC1F,eAAe,IAAa,EAAE,GAAG;aAEhC,EAAE;GACI,EAPF,EAAE,GAOA,CACT;EACE,CAAA,GAGN,EAAQ,SAAS,IAEjB,kBAAC,OAAD;EAAK,WAAW,EAAO;YACpB,EAAQ,KAAK,MACZ,kBAAC,UAAD;GAEE,MAAK;GACL,UAAU,EAAI;GACd,WAAW,CAAC,EAAO,KAAK,EAAO,OAAO,EAAI,WAAW,aAAa,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC5F,SAAS,EAAI;aAEZ,EAAI;GACE,EAPF,EAAI,MAOF,CACT;EACE,CAAA,GAGH,MAGH,IACJ,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,OAAO;EACP,SAAS;EACT,eAAY;YAEZ,kBAAC,OAAD;GACE,KAAK;GACC;GACN,cAAW;GACX,mBAAiB;GACjB,WAAW,CAAC,EAAO,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC/D,WAAW;GACX,UAAU,MAAM,EAAE,iBAAiB;GACnC,GAAI;aARN;IAUG,KAAS,kBAAC,OAAD;KAAK,IAAI;KAAS,WAAW,EAAO;eAAQ;KAAY,CAAA;IACjE,KAAY,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAO;KAAe,CAAA;IACzD,GAAe;IACZ;;EACF,CAAA;AAIR,QADI,OAAO,WAAa,MAAoB,IACrC,EAAa,GAAM,SAAS,KAAK"}
+{"version":3,"file":"Dialog.js","names":[],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport styles from './Dialog.module.css';\nimport { FOCUSABLE, trapFocus, useVisualViewport } from './dialogUtils';\n\n// ─── AlertDialog types ────────────────────────────────────────────────────────\n\nexport type AlertDialogResponseVariant = 'default' | 'suggested' | 'destructive';\n\nexport interface AlertDialogResponse {\n  /**\n   * Unique identifier returned via `onResponse`.\n   * Use `\"cancel\"` by convention for the dismissive action.\n   */\n  id: string;\n  /** Button label. */\n  label: string;\n  /** Visual emphasis. Defaults to `\"default\"`. */\n  variant?: AlertDialogResponseVariant;\n  /** Disables the button. */\n  disabled?: boolean;\n}\n\n// ─── Dialog ───────────────────────────────────────────────────────────────────\n\nexport interface DialogButton {\n  /** Button label. */\n  label: string;\n  /** Visual variant. Defaults to `\"default\"`. */\n  variant?: 'default' | 'suggested' | 'destructive';\n  /** Called when the button is clicked. */\n  onClick: () => void;\n  /** Whether the button is disabled. */\n  disabled?: boolean;\n}\n\nexport interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the dialog is visible. */\n  open: boolean;\n\n  // ── Standard dialog ──────────────────────────────────────────────────────\n\n  /** Dialog heading. */\n  title?: ReactNode;\n  /** Body content. */\n  children?: ReactNode;\n  /** Action buttons (standard dialog API). */\n  buttons?: DialogButton[];\n  /** Called on Escape or backdrop click. */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the dialog. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n\n  // ── AlertDialog extension ─────────────────────────────────────────────────\n\n  /**\n   * ARIA role. Use `\"alertdialog\"` for confirmations and destructive warnings —\n   * screen readers announce it immediately. Defaults to `\"dialog\"`.\n   *\n   * When using `role=\"alertdialog\"`, prefer the `responses`/`onResponse` API\n   * over `buttons`/`onClick` for semantic clarity.\n   */\n  role?: 'dialog' | 'alertdialog';\n\n  /**\n   * Response buttons (AlertDialog API). Alternative to `buttons` — each\n   * response has a semantic `id` returned via `onResponse`.\n   * Escape and backdrop click fire the first non-destructive response.\n   */\n  responses?: AlertDialogResponse[];\n\n  /**\n   * Called with the `id` of the response button clicked.\n   * Required when `responses` is provided.\n   */\n  onResponse?: (id: string) => void;\n}\n\n/**\n * Blocking modal dialog following the Adwaita pattern.\n *\n * **Standard** — `title` + `children` + `buttons[]`.\n *\n * **Alert** — add `role=\"alertdialog\"` + `responses[]` + `onResponse`.\n * Uses a semantic response id instead of per-button `onClick`.\n * Escape / backdrop fire the first non-destructive response.\n * Mirrors `AdwAlertDialog`.\n *\n * For the app-info dialog, use `<AboutDialog />` instead.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Dialog.html\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AlertDialog.html\n */\nexport const Dialog = ({\n  open,\n  title,\n  children,\n  buttons = [],\n  onClose,\n  closeOnBackdrop = true,\n  role = 'dialog',\n  responses,\n  onResponse,\n  className,\n  ...props\n}: DialogProps) => {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n\n  const isAlert = !!responses;\n  const viewportStyle = useVisualViewport();\n\n  // ── Focus management ───────────────────────────────────────────────────────\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = dialogRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // ── Dismiss helpers ────────────────────────────────────────────────────────\n  const dismissAlert = useCallback(() => {\n    const cancel = responses?.find((r) => r.variant !== 'destructive' && !r.disabled);\n\n    if (cancel) {\n      onResponse?.(cancel.id);\n    }\n  }, [responses, onResponse]);\n\n  const handleBackdrop = isAlert ? dismissAlert : closeOnBackdrop ? onClose : undefined;\n\n  // ── Keyboard ───────────────────────────────────────────────────────────────\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        if (isAlert) {\n          dismissAlert();\n        } else {\n          onClose?.();\n        }\n\n        return;\n      }\n\n      trapFocus(e, dialogRef);\n    },\n    [isAlert, dismissAlert, onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  // ── Render buttons (standard or alert) ────────────────────────────────────\n  const renderButtons = () => {\n    if (isAlert && responses) {\n      return (\n        <div className={styles.footer}>\n          {responses.map((r) => (\n            <button\n              key={r.id}\n              type=\"button\"\n              disabled={r.disabled}\n              className={[styles.btn, styles[`btn-${r.variant ?? 'default'}`]]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={() => onResponse?.(r.id)}\n            >\n              {r.label}\n            </button>\n          ))}\n        </div>\n      );\n    }\n\n    if (buttons.length > 0) {\n      return (\n        <div className={styles.footer}>\n          {buttons.map((btn) => (\n            <button\n              key={btn.label}\n              type=\"button\"\n              disabled={btn.disabled}\n              className={[styles.btn, styles[`btn-${btn.variant ?? 'default'}`]]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={btn.onClick}\n            >\n              {btn.label}\n            </button>\n          ))}\n        </div>\n      );\n    }\n\n    return null;\n  };\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      style={viewportStyle}\n      onClick={handleBackdrop}\n      aria-hidden=\"true\"\n    >\n      <div\n        ref={dialogRef}\n        role={role}\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={[styles.dialog, className].filter(Boolean).join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {title && (\n          <div id={titleId} className={styles.title}>\n            {title}\n          </div>\n        )}\n        {children && <div className={styles.body}>{children}</div>}\n        {renderButtons()}\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":";;;;;;AAuGA,IAAa,KAAU,EACrB,SACA,UACA,aACA,aAAU,CAAC,GACX,YACA,qBAAkB,IAClB,UAAO,UACP,cACA,eACA,cACA,GAAG,QACc;CACjB,IAAM,IAAY,EAAuB,IAAI,GACvC,IAAU,EAAM,GAChB,IAAoB,EAAuB,IAAI,GAE/C,IAAU,CAAC,CAAC,GACZ,IAAgB,EAAkB;CAGxC,QAAgB;EACd,AAAI,KACF,EAAkB,UAAU,SAAS,gBAC1B,EAAU,SAAS,cAA2B,CAAS,IAE9D,MAAM,KAEV,EAAmB,SAAgC,MAAM;CAE7D,GAAG,CAAC,CAAI,CAAC;CAGT,IAAM,IAAe,QAAkB;EACrC,IAAM,IAAS,GAAW,MAAM,MAAM,EAAE,YAAY,iBAAiB,CAAC,EAAE,QAAQ;EAEhF,AAAI,KACF,IAAa,EAAO,EAAE;CAE1B,GAAG,CAAC,GAAW,CAAU,CAAC,GAEpB,IAAiB,IAAU,IAAe,IAAkB,IAAU,KAAA,GAGtE,IAAgB,GACnB,MAAqC;EACpC,IAAI,EAAE,QAAQ,UAAU;GAEtB,AADA,EAAE,eAAe,GACb,IACF,EAAa,IAEb,IAAU;GAGZ;EACF;EAEA,EAAU,GAAG,CAAS;CACxB,GACA;EAAC;EAAS;EAAc;CAAO,CACjC;CAEA,IAAI,CAAC,GACH,OAAO;CAIT,IAAM,UACA,KAAW,IAEX,kBAAC,OAAD;EAAK,WAAW,EAAO;YACpB,EAAU,KAAK,MACd,kBAAC,UAAD;GAEE,MAAK;GACL,UAAU,EAAE;GACZ,WAAW,CAAC,EAAO,KAAK,EAAO,OAAO,EAAE,WAAW,YAAY,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG;GACX,eAAe,IAAa,EAAE,EAAE;aAE/B,EAAE;EACG,GATD,EAAE,EASD,CACT;CACE,CAAA,IAIL,EAAQ,SAAS,IAEjB,kBAAC,OAAD;EAAK,WAAW,EAAO;YACpB,EAAQ,KAAK,MACZ,kBAAC,UAAD;GAEE,MAAK;GACL,UAAU,EAAI;GACd,WAAW,CAAC,EAAO,KAAK,EAAO,OAAO,EAAI,WAAW,YAAY,EAC9D,OAAO,OAAO,EACd,KAAK,GAAG;GACX,SAAS,EAAI;aAEZ,EAAI;EACC,GATD,EAAI,KASH,CACT;CACE,CAAA,IAIF,MAGH,IACJ,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,OAAO;EACP,SAAS;EACT,eAAY;YAEZ,kBAAC,OAAD;GACE,KAAK;GACC;GACN,cAAW;GACX,mBAAiB;GACjB,WAAW,CAAC,EAAO,QAAQ,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;GAC9D,WAAW;GACX,UAAU,MAAM,EAAE,gBAAgB;GAClC,GAAI;aARN;IAUG,KACC,kBAAC,OAAD;KAAK,IAAI;KAAS,WAAW,EAAO;eACjC;IACE,CAAA;IAEN,KAAY,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAO;IAAc,CAAA;IACxD,EAAc;GACZ;;CACF,CAAA;CAOP,OAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,SAAS,IAAI;AACzC"}

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

@@ -1,2 +1,2 @@
-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={backdrop:e,"backdrop-in":`_backdrop-in_gg1yz_1`,dialog:t,"dialog-in":`_dialog-in_gg1yz_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`};exports.default=o;
+var e={backdrop:`_backdrop_1hnot_3`,"backdrop-in":`_backdrop-in_1hnot_1`,dialog:`_dialog_1hnot_30`,"dialog-in":`_dialog-in_1hnot_1`,title:`_title_1hnot_60`,body:`_body_1hnot_72`,footer:`_footer_1hnot_93`,btn:`_btn_1hnot_100`,"btn-default":`_btn-default_1hnot_148`,"btn-suggested":`_btn-suggested_1hnot_152`,"btn-destructive":`_btn-destructive_1hnot_157`};exports.default=e;
 //# sourceMappingURL=Dialog.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.module.css.cjs","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.cjs","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/Dialog.module.css.js

@@ -1,18 +1,17 @@
-//#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 = {
-	backdrop: e,
-	"backdrop-in": "_backdrop-in_gg1yz_1",
-	dialog: t,
-	"dialog-in": "_dialog-in_gg1yz_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"
+var e = {
+	backdrop: "_backdrop_1hnot_3",
+	"backdrop-in": "_backdrop-in_1hnot_1",
+	dialog: "_dialog_1hnot_30",
+	"dialog-in": "_dialog-in_1hnot_1",
+	title: "_title_1hnot_60",
+	body: "_body_1hnot_72",
+	footer: "_footer_1hnot_93",
+	btn: "_btn_1hnot_100",
+	"btn-default": "_btn-default_1hnot_148",
+	"btn-suggested": "_btn-suggested_1hnot_152",
+	"btn-destructive": "_btn-destructive_1hnot_157"
 };
 //#endregion
-export { o as default };
+export { e as default };
 
 //# sourceMappingURL=Dialog.module.css.js.map

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

@@ -1,2 +1,2 @@
-let e=require(`react`);var t=`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`;function n(){let[t,n]=(0,e.useState)({});return(0,e.useEffect)(()=>{let{visualViewport:e}=window;if(!e)return;let t=()=>{let{offsetLeft:t,offsetTop:r,width:i,height:a}=e;n({top:r,left:t,width:i,height:a})};return t(),e.addEventListener(`resize`,t),e.addEventListener(`scroll`,t),()=>{e.removeEventListener(`resize`,t),e.removeEventListener(`scroll`,t)}},[]),t}function r(e,t){if(e.key!==`Tab`)return;let n=Array.from(t.current?.querySelectorAll(`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`)??[]);if(!n.length)return;let r=n[0],i=n[n.length-1];e.shiftKey?document.activeElement===r&&(e.preventDefault(),i.focus()):document.activeElement===i&&(e.preventDefault(),r.focus())}exports.FOCUSABLE=t,exports.trapFocus=r,exports.useVisualViewport=n;
+let e=require("react");var t=`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`;function n(){let[t,n]=(0,e.useState)({});return(0,e.useEffect)(()=>{let{visualViewport:e}=window;if(!e)return;let t=()=>{let{offsetLeft:t,offsetTop:r,width:i,height:a}=e;n({top:r,left:t,width:i,height:a})};return t(),e.addEventListener(`resize`,t),e.addEventListener(`scroll`,t),()=>{e.removeEventListener(`resize`,t),e.removeEventListener(`scroll`,t)}},[]),t}function r(e,t){if(e.key!==`Tab`)return;let n=Array.from(t.current?.querySelectorAll(`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`)??[]);if(!n.length)return;let r=n[0],i=n[n.length-1];e.shiftKey?document.activeElement===r&&(e.preventDefault(),i.focus()):document.activeElement===i&&(e.preventDefault(),r.focus())}exports.FOCUSABLE=t,exports.trapFocus=r,exports.useVisualViewport=n;
 //# sourceMappingURL=dialogUtils.cjs.map

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,CAAC,CAAC,EA8BpD,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,QACF,CAAC,CACH,EAMA,OAJA,EAAO,EACP,EAAe,iBAAiB,SAAU,CAAM,EAChD,EAAe,iBAAiB,SAAU,CAAM,MAEnC,CACX,EAAe,oBAAoB,SAAU,CAAM,EACnD,EAAe,oBAAoB,SAAU,CAAM,CACrD,CACF,EAAG,CAAC,CAAC,EAEE,CACT,CAEA,SAAgB,EAAU,EAAkC,EAAuC,CACjG,GAAI,EAAE,MAAQ,MACZ,OAGF,IAAM,EAAY,MAAM,KAAK,EAAI,SAAS,iBAAA,0IAAuC,GAAK,CAAC,CAAC,EAExF,GAAI,CAAC,EAAU,OACb,OAGF,IAAM,EAAQ,EAAU,GAClB,EAAO,EAAU,EAAU,OAAS,GAEtC,EAAE,SACA,SAAS,gBAAkB,IAC7B,EAAE,eAAe,EACjB,EAAK,MAAM,GAGT,SAAS,gBAAkB,IAC7B,EAAE,eAAe,EACjB,EAAM,MAAM,EAGlB"}

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,CAAC,CAAC;CA8BpD,OA5BA,QAAgB;EACd,IAAM,EAAE,sBAAmB;EAE3B,IAAI,CAAC,GACH;EAGF,IAAM,UAAqB;GACzB,IAAM,EAAE,YAAY,GAAM,WAAW,GAAK,UAAO,cAAW;GAE5D,EAAS;IACP;IACA;IACA;IACA;GACF,CAAC;EACH;EAMA,OAJA,EAAO,GACP,EAAe,iBAAiB,UAAU,CAAM,GAChD,EAAe,iBAAiB,UAAU,CAAM,SAEnC;GAEX,AADA,EAAe,oBAAoB,UAAU,CAAM,GACnD,EAAe,oBAAoB,UAAU,CAAM;EACrD;CACF,GAAG,CAAC,CAAC,GAEE;AACT;AAEA,SAAgB,EAAU,GAAkC,GAAuC;CACjG,IAAI,EAAE,QAAQ,OACZ;CAGF,IAAM,IAAY,MAAM,KAAK,EAAI,SAAS,iBAAA,4IAAuC,KAAK,CAAC,CAAC;CAExF,IAAI,CAAC,EAAU,QACb;CAGF,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;CAE1C,AAAI,EAAE,WACA,SAAS,kBAAkB,MAC7B,EAAE,eAAe,GACjB,EAAK,MAAM,KAGT,SAAS,kBAAkB,MAC7B,EAAE,eAAe,GACjB,EAAM,MAAM;AAGlB"}

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/Dialog.cjs

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

package/dist/components/Drawer/Drawer.cjs

@@ -1,2 +1,2 @@
-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;
+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");var 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 { Button } from \"../Button/Button\";\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 && (\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\") return node;\n  return createPortal(node, document.body);\n}\n"],"mappings":"iMA0CA,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,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,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 const 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,IAAa,GAAU,CACrB,OACA,OAAO,QACP,OAAO,UACP,QACA,UACA,WACA,UACA,kBAAkB,GAClB,YACA,GAAG,KACc,CACjB,IAAM,GAAA,EAAA,EAAA,QAAmC,IAAI,EACvC,GAAA,EAAA,EAAA,OAAgB,EAChB,GAAA,EAAA,EAAA,QAA2C,IAAI,EAC/C,EAAgB,EAAA,kBAAkB,EAClC,EAAO,IAAY,IAAA,GAAsB,EAAV,GAErC,EAAA,EAAA,eAAgB,CACV,GACF,EAAkB,QAAU,SAAS,cACrC,EAAU,SAAS,cAA2B,EAAA,SAAS,GAAG,MAAM,GAEhE,EAAmB,SAAgC,MAAM,CAE7D,EAAG,CAAC,CAAI,CAAC,EAET,IAAM,GAAA,EAAA,EAAA,aACH,GAAyC,CACxC,GAAI,EAAM,MAAQ,SAAU,CAC1B,EAAM,eAAe,EACrB,IAAU,EAEV,MACF,CAEA,EAAA,UAAU,EAAO,CAAS,CAC5B,EACA,CAAC,CAAO,CACV,EAEA,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,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,UAAW,EACX,QAAU,GAAU,EAAM,gBAAgB,EAC1C,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,CAAY,CAAA,EAC/C,IACC,EAAA,EAAA,KAAC,EAAA,OAAD,CACE,QAAQ,OACR,MAAM,WACN,KAAK,KACL,aAAW,QACX,QAAS,WACV,GAEO,CAAA,CAEP,IAEN,IAAS,IAAA,KAAa,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBAAU,CAAU,CAAA,CAC/D,GACF,CAAA,EAOP,OAJI,OAAO,SAAa,IACf,GAGT,EAAA,EAAA,cAAoB,EAAM,SAAS,IAAI,CACzC"}

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"`. */
@@ -25,4 +25,4 @@ export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "conte
  * The drawer is controlled through `open`, renders into `document.body`, and
  * accepts its body as either `content` or `children`.
  */
-export declare function Drawer({ open, side, size, title, content, children, onClose, closeOnBackdrop, className, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const Drawer: ({ open, side, size, title, content, children, onClose, closeOnBackdrop, className, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Drawer/Drawer.js

@@ -5,7 +5,7 @@ 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 f({ open: f, side: p = "right", size: m = "classic", title: h, content: g, children: _, onClose: v, closeOnBackdrop: y = !0, className: b, ...x }) {
+var 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();
@@ -59,7 +59,7 @@ function f({ open: f, side: p = "right", size: m = "classic", title: h, content:
 		})
 	});
 	return typeof document > "u" ? O : l(O, document.body);
-}
+};
 //#endregion
 export { f as Drawer };
 

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 { Button } from \"../Button/Button\";\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 && (\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\") return node;\n  return createPortal(node, document.body);\n}\n"],"mappings":";;;;;;;AA0CA,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,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;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 const 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,IAAa,KAAU,EACrB,SACA,UAAO,SACP,UAAO,WACP,UACA,YACA,aACA,YACA,qBAAkB,IAClB,cACA,GAAG,QACc;CACjB,IAAM,IAAY,EAAuB,IAAI,GACvC,IAAU,EAAM,GAChB,IAAoB,EAAuB,IAAI,GAC/C,IAAgB,EAAkB,GAClC,IAAO,MAAY,KAAA,IAAsB,IAAV;CAErC,QAAgB;EACd,AAAI,KACF,EAAkB,UAAU,SAAS,eACrC,EAAU,SAAS,cAA2B,CAAS,GAAG,MAAM,KAEhE,EAAmB,SAAgC,MAAM;CAE7D,GAAG,CAAC,CAAI,CAAC;CAET,IAAM,IAAgB,GACnB,MAAyC;EACxC,IAAI,EAAM,QAAQ,UAAU;GAE1B,AADA,EAAM,eAAe,GACrB,IAAU;GAEV;EACF;EAEA,EAAU,GAAO,CAAS;CAC5B,GACA,CAAC,CAAO,CACV;CAEA,IAAI,CAAC,GACH,OAAO;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;GACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;GACX,WAAW;GACX,UAAU,MAAU,EAAM,gBAAgB;GAC1C,GAAI;aAjBN,CAmBG,KACC,kBAAC,OAAD;IAAK,IAAI;IAAS,WAAW,EAAO;cAApC,CACE,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAY;IAAY,CAAA,GAC/C,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,cAAW;KACX,SAAS;eACV;IAEO,CAAA,CAEP;OAEN,MAAS,KAAA,KAAa,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAU;GAAU,CAAA,CAC/D;;CACF,CAAA;CAOP,OAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,SAAS,IAAI;AACzC"}

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

@@ -1,2 +1,2 @@
-var e=`_backdrop_om06g_3`,t=`_drawer_om06g_24`,n=`_classic_om06g_36`,r=`_wide_om06g_40`,i=`_left_om06g_44`,a=`_right_om06g_53`,o=`_title_om06g_72`,s=`_titleText_om06g_80`,c=`_content_om06g_90`,l={backdrop:e,"backdrop-in":`_backdrop-in_om06g_1`,drawer:t,classic:n,wide:r,left:i,"drawer-in-left":`_drawer-in-left_om06g_1`,right:a,"drawer-in-right":`_drawer-in-right_om06g_1`,title:o,titleText:s,content:c};exports.default=l;
+var e={backdrop:`_backdrop_z2wwe_3`,"backdrop-in":`_backdrop-in_z2wwe_1`,drawer:`_drawer_z2wwe_28`,classic:`_classic_z2wwe_40`,wide:`_wide_z2wwe_44`,left:`_left_z2wwe_48`,"drawer-in-left":`_drawer-in-left_z2wwe_1`,right:`_right_z2wwe_58`,"drawer-in-right":`_drawer-in-right_z2wwe_1`,title:`_title_z2wwe_86`,titleText:`_titleText_z2wwe_94`,content:`_content_z2wwe_104`};exports.default=e;
 //# 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  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\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,19 +1,18 @@
-//#region src/components/Drawer/Drawer.module.css
-var e = "_backdrop_om06g_3", t = "_drawer_om06g_24", n = "_classic_om06g_36", r = "_wide_om06g_40", i = "_left_om06g_44", a = "_right_om06g_53", o = "_title_om06g_72", s = "_titleText_om06g_80", c = "_content_om06g_90", l = {
-	backdrop: e,
-	"backdrop-in": "_backdrop-in_om06g_1",
-	drawer: t,
-	classic: n,
-	wide: r,
-	left: i,
-	"drawer-in-left": "_drawer-in-left_om06g_1",
-	right: a,
-	"drawer-in-right": "_drawer-in-right_om06g_1",
-	title: o,
-	titleText: s,
-	content: c
+var e = {
+	backdrop: "_backdrop_z2wwe_3",
+	"backdrop-in": "_backdrop-in_z2wwe_1",
+	drawer: "_drawer_z2wwe_28",
+	classic: "_classic_z2wwe_40",
+	wide: "_wide_z2wwe_44",
+	left: "_left_z2wwe_48",
+	"drawer-in-left": "_drawer-in-left_z2wwe_1",
+	right: "_right_z2wwe_58",
+	"drawer-in-right": "_drawer-in-right_z2wwe_1",
+	title: "_title_z2wwe_86",
+	titleText: "_titleText_z2wwe_94",
+	content: "_content_z2wwe_104"
 };
 //#endregion
-export { l as default };
+export { e 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  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\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/Drawer.cjs

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

package/dist/components/Dropdown/Dropdown.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Icon/Icon.cjs`),t=require(`./Dropdown.module.css.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`),i=require(`@gnome-ui/icons`);function a({options:a,value:o,onChange:s,placeholder:c=`Select an option`,disabled:l,className:u,...d}){let[f,p]=(0,n.useState)(!1),[m,h]=(0,n.useState)(-1),[g,_]=(0,n.useState)(!1),v=(0,n.useId)(),y=(0,n.useId)(),b=(0,n.useRef)(null),x=(0,n.useRef)(null),S=a.find(e=>e.value===o),C=(0,n.useCallback)(()=>{if(!b.current)return;let e=b.current.getBoundingClientRect(),t=window.innerHeight-e.bottom,n=Math.min(a.length*48+8,280);_(t<n&&e.top>n)},[a.length]),w=(0,n.useCallback)(()=>{if(l)return;C(),p(!0);let e=a.findIndex(e=>e.value===o&&!e.disabled);h(e>=0?e:a.findIndex(e=>!e.disabled))},[l,C,a,o]),T=(0,n.useCallback)(()=>{p(!1),h(-1),b.current?.focus()},[]),E=(0,n.useCallback)(e=>{e.disabled||(s?.(e.value),T())},[s,T]);(0,n.useEffect)(()=>{!f||m<0||!x.current||x.current.children[m]?.scrollIntoView({block:`nearest`})},[m,f]),(0,n.useEffect)(()=>{if(!f)return;let e=e=>{!b.current?.contains(e.target)&&!x.current?.contains(e.target)&&T()};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[f,T]);let D=(0,n.useCallback)(e=>{switch(e.key){case`Enter`:case` `:case`ArrowDown`:e.preventDefault(),w();break;case`ArrowUp`:e.preventDefault(),C(),p(!0),h(a.reduce((e,t,n)=>t.disabled?e:n,-1));break}},[w,C,a]),O=(0,n.useCallback)(e=>{let t=a.map((e,t)=>({o:e,i:t})).filter(({o:e})=>!e.disabled).map(({i:e})=>e),n=t.indexOf(m);switch(e.key){case`ArrowDown`:{e.preventDefault();let r=t[Math.min(n+1,t.length-1)];h(r??m);break}case`ArrowUp`:{e.preventDefault();let r=t[Math.max(n-1,0)];h(r??m);break}case`Home`:e.preventDefault(),h(t[0]??-1);break;case`End`:e.preventDefault(),h(t[t.length-1]??-1);break;case`Enter`:case` `:e.preventDefault(),m>=0&&E(a[m]);break;case`Escape`:case`Tab`:T();break}},[a,m,E,T]);return(0,r.jsxs)(`div`,{className:[t.default.wrapper,u].filter(Boolean).join(` `),...d,children:[(0,r.jsxs)(`button`,{ref:b,id:v,type:`button`,role:`combobox`,"aria-haspopup":`listbox`,"aria-expanded":f,"aria-controls":y,"aria-activedescendant":f&&m>=0?`${y}-opt-${m}`:void 0,disabled:l,className:[t.default.trigger,f?t.default.triggerOpen:null].filter(Boolean).join(` `),onClick:()=>f?T():w(),onKeyDown:D,children:[(0,r.jsx)(`span`,{className:[t.default.triggerLabel,S?null:t.default.placeholder].filter(Boolean).join(` `),children:S?.label??c}),(0,r.jsx)(e.Icon,{icon:i.PanDown,size:`md`,"aria-hidden":!0,className:[t.default.chevron,f?t.default.chevronOpen:null].filter(Boolean).join(` `)})]}),f&&(0,r.jsx)(`ul`,{ref:x,id:y,role:`listbox`,"aria-labelledby":v,tabIndex:-1,className:[t.default.list,g?t.default.listUp:t.default.listDown].filter(Boolean).join(` `),onKeyDown:O,children:a.map((n,a)=>(0,r.jsxs)(`li`,{id:`${y}-opt-${a}`,role:`option`,"aria-selected":n.value===o,"aria-disabled":n.disabled,className:[t.default.option,n.value===o?t.default.optionSelected:null,a===m?t.default.optionActive:null,n.disabled?t.default.optionDisabled:null].filter(Boolean).join(` `),onMouseEnter:()=>!n.disabled&&h(a),onClick:()=>E(n),children:[(0,r.jsxs)(`span`,{className:t.default.optionText,children:[(0,r.jsx)(`span`,{className:t.default.optionLabel,children:n.label}),n.description&&(0,r.jsx)(`span`,{className:t.default.optionDesc,children:n.description})]}),n.value===o&&(0,r.jsx)(e.Icon,{icon:i.Check,size:`md`,"aria-hidden":!0,className:t.default.checkIcon})]},n.value))})]})}exports.Dropdown=a;
+const e=require("../Icon/Icon.cjs"),t=require("./Dropdown.module.css.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("@gnome-ui/icons");var a=({options:a,value:o,onChange:s,placeholder:c=`Select an option`,disabled:l,className:u,...d})=>{let[f,p]=(0,n.useState)(!1),[m,h]=(0,n.useState)(-1),[g,_]=(0,n.useState)(!1),v=(0,n.useId)(),y=(0,n.useId)(),b=(0,n.useRef)(null),x=(0,n.useRef)(null),S=a.find(e=>e.value===o),C=(0,n.useCallback)(()=>{if(!b.current)return;let e=b.current.getBoundingClientRect(),t=window.innerHeight-e.bottom,n=Math.min(a.length*48+8,280);_(t<n&&e.top>n)},[a.length]),w=(0,n.useCallback)(()=>{if(l)return;C(),p(!0);let e=a.findIndex(e=>e.value===o&&!e.disabled);h(e>=0?e:a.findIndex(e=>!e.disabled))},[l,C,a,o]),T=(0,n.useCallback)(()=>{p(!1),h(-1),b.current?.focus()},[]),E=(0,n.useCallback)(e=>{e.disabled||(s?.(e.value),T())},[s,T]);(0,n.useEffect)(()=>{!f||m<0||!x.current||x.current.children[m]?.scrollIntoView({block:`nearest`})},[m,f]),(0,n.useEffect)(()=>{if(!f)return;let e=e=>{!b.current?.contains(e.target)&&!x.current?.contains(e.target)&&T()};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[f,T]);let D=(0,n.useCallback)(e=>{switch(e.key){case`Enter`:case` `:case`ArrowDown`:e.preventDefault(),w();break;case`ArrowUp`:e.preventDefault(),C(),p(!0),h(a.reduce((e,t,n)=>t.disabled?e:n,-1));break}},[w,C,a]),O=(0,n.useCallback)(e=>{let t=a.map((e,t)=>({o:e,i:t})).filter(({o:e})=>!e.disabled).map(({i:e})=>e),n=t.indexOf(m);switch(e.key){case`ArrowDown`:{e.preventDefault();let r=t[Math.min(n+1,t.length-1)];h(r??m);break}case`ArrowUp`:{e.preventDefault();let r=t[Math.max(n-1,0)];h(r??m);break}case`Home`:e.preventDefault(),h(t[0]??-1);break;case`End`:e.preventDefault(),h(t[t.length-1]??-1);break;case`Enter`:case` `:e.preventDefault(),m>=0&&E(a[m]);break;case`Escape`:case`Tab`:T();break}},[a,m,E,T]);return(0,r.jsxs)(`div`,{className:[t.default.wrapper,u].filter(Boolean).join(` `),...d,children:[(0,r.jsxs)(`button`,{ref:b,id:v,type:`button`,role:`combobox`,"aria-haspopup":`listbox`,"aria-expanded":f,"aria-controls":y,"aria-activedescendant":f&&m>=0?`${y}-opt-${m}`:void 0,disabled:l,className:[t.default.trigger,f?t.default.triggerOpen:null].filter(Boolean).join(` `),onClick:()=>f?T():w(),onKeyDown:D,children:[(0,r.jsx)(`span`,{className:[t.default.triggerLabel,S?null:t.default.placeholder].filter(Boolean).join(` `),children:S?.label??c}),(0,r.jsx)(e.Icon,{icon:i.PanDown,size:`md`,"aria-hidden":!0,className:[t.default.chevron,f?t.default.chevronOpen:null].filter(Boolean).join(` `)})]}),f&&(0,r.jsx)(`ul`,{ref:x,id:y,role:`listbox`,"aria-labelledby":v,tabIndex:-1,className:[t.default.list,g?t.default.listUp:t.default.listDown].filter(Boolean).join(` `),onKeyDown:O,children:a.map((n,a)=>(0,r.jsxs)(`li`,{id:`${y}-opt-${a}`,role:`option`,"aria-selected":n.value===o,"aria-disabled":n.disabled,className:[t.default.option,n.value===o?t.default.optionSelected:null,a===m?t.default.optionActive:null,n.disabled?t.default.optionDisabled:null].filter(Boolean).join(` `),onMouseEnter:()=>!n.disabled&&h(a),onClick:()=>E(n),children:[(0,r.jsxs)(`span`,{className:t.default.optionText,children:[(0,r.jsx)(`span`,{className:t.default.optionLabel,children:n.label}),n.description&&(0,r.jsx)(`span`,{className:t.default.optionDesc,children:n.description})]}),n.value===o&&(0,r.jsx)(e.Icon,{icon:i.Check,size:`md`,"aria-hidden":!0,className:t.default.checkIcon})]},n.value))})]})};exports.Dropdown=a;
 //# sourceMappingURL=Dropdown.cjs.map

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 const 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;
 }
@@ -33,4 +33,4 @@ export interface DropdownProps<V extends string = string> extends Omit<HTMLAttri
  *
  * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html
  */
-export declare function Dropdown<V extends string = string>({ options, value, onChange, placeholder, disabled, className, ...props }: DropdownProps<V>): import("react/jsx-runtime").JSX.Element;
+export declare const Dropdown: <V extends string = string>({ options, value, onChange, placeholder, disabled, className, ...props }: DropdownProps<V>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dropdown/Dropdown.js

@@ -4,7 +4,7 @@ import { useCallback as n, useEffect as r, useId as i, useRef as a, useState as
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { Check as l, PanDown as u } from "@gnome-ui/icons";
 //#region src/components/Dropdown/Dropdown.tsx
-function d({ options: d, value: f, onChange: p, placeholder: m = "Select an option", disabled: h, className: g, ..._ }) {
+var d = ({ options: d, value: f, onChange: p, placeholder: m = "Select an option", disabled: h, className: g, ..._ }) => {
 	let [v, y] = o(!1), [b, x] = o(-1), [S, C] = o(!1), w = i(), T = i(), E = a(null), D = a(null), O = d.find((e) => e.value === f), k = n(() => {
 		if (!E.current) return;
 		let e = E.current.getBoundingClientRect(), t = window.innerHeight - e.bottom, n = Math.min(d.length * 48 + 8, 280);
@@ -151,7 +151,7 @@ function d({ options: d, value: f, onChange: p, placeholder: m = "Select an opti
 			}, n.value))
 		})]
 	});
-}
+};
 //#endregion
 export { d as Dropdown };