@gnome-ui/react 1.45.0 → 1.45.1

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 function Drawer({\n  open,\n  side = 'right',\n  size = 'classic',\n  title,\n  content,\n  children,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: DrawerProps) {\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n  const viewportStyle = useVisualViewport();\n  const body = content !== undefined ? content : children;\n\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      drawerRef.current?.querySelector<HTMLElement>(FOCUSABLE)?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        onClose?.();\n\n        return;\n      }\n\n      trapFocus(event, drawerRef);\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      style={viewportStyle}\n      onClick={closeOnBackdrop ? onClose : undefined}\n    >\n      <div\n        ref={drawerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        data-side={side}\n        data-size={size}\n        className={[\n          styles.drawer,\n          side === 'left' ? styles.left : styles.right,\n          size === 'wide' ? styles.wide : styles.classic,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(event) => event.stopPropagation()}\n        {...props}\n      >\n        {title && (\n          <div id={titleId} className={styles.title}>\n            <span className={styles.titleText}>{title}</span>\n            {onClose && (\n              <Button\n                variant=\"flat\"\n                shape=\"circular\"\n                size=\"sm\"\n                aria-label=\"Close\"\n                onClick={onClose}\n              >\n                ✕\n              </Button>\n            )}\n          </div>\n        )}\n        {body !== undefined && <div className={styles.content}>{body}</div>}\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n}\n"],"mappings":";;;;;;;AA6CA,SAAgB,EAAO,EACrB,SACA,UAAO,SACP,UAAO,WACP,UACA,YACA,aACA,YACA,qBAAkB,IAClB,cACA,GAAG,KACW;CACd,IAAM,IAAY,EAAuB,KAAK,EACxC,IAAU,GAAO,EACjB,IAAoB,EAAuB,KAAK,EAChD,IAAgB,GAAmB,EACnC,IAAO,MAAY,KAAA,IAAsB,IAAV;AAErC,SAAgB;AACd,EAAI,KACF,EAAkB,UAAU,SAAS,eACrC,EAAU,SAAS,cAA2B,EAAU,EAAE,OAAO,IAEhE,EAAkB,SAAgC,OAAO;IAE3D,CAAC,EAAK,CAAC;CAEV,IAAM,IAAgB,GACnB,MAAyC;AACxC,MAAI,EAAM,QAAQ,UAAU;AAE1B,GADA,EAAM,gBAAgB,EACtB,KAAW;AAEX;;AAGF,IAAU,GAAO,EAAU;IAE7B,CAAC,EAAQ,CACV;AAED,KAAI,CAAC,EACH,QAAO;CAGT,IAAM,IACJ,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,OAAO;EACP,SAAS,IAAkB,IAAU,KAAA;YAErC,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,aAAW;GACX,aAAW;GACX,WAAW;IACT,EAAO;IACP,MAAS,SAAS,EAAO,OAAO,EAAO;IACvC,MAAS,SAAS,EAAO,OAAO,EAAO;IACvC;IACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;GACZ,WAAW;GACX,UAAU,MAAU,EAAM,iBAAiB;GAC3C,GAAI;aAjBN,CAmBG,KACC,kBAAC,OAAD;IAAK,IAAI;IAAS,WAAW,EAAO;cAApC,CACE,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAY;KAAa,CAAA,EAChD,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,cAAW;KACX,SAAS;eACV;KAEQ,CAAA,CAEP;OAEP,MAAS,KAAA,KAAa,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAU;IAAW,CAAA,CAC/D;;EACF,CAAA;AAOR,QAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,SAAS,KAAK"}

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

@@ -1,2 +1,2 @@
-var e=`_backdrop_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_z2wwe_3`,t=`_drawer_z2wwe_28`,n=`_classic_z2wwe_40`,r=`_wide_z2wwe_44`,i=`_left_z2wwe_48`,a=`_right_z2wwe_58`,o=`_title_z2wwe_86`,s=`_titleText_z2wwe_94`,c=`_content_z2wwe_104`,l={backdrop:e,"backdrop-in":`_backdrop-in_z2wwe_1`,drawer:t,classic:n,wide:r,left:i,"drawer-in-left":`_drawer-in-left_z2wwe_1`,right:a,"drawer-in-right":`_drawer-in-right_z2wwe_1`,title:o,titleText:s,content:c};exports.default=l;
 //# sourceMappingURL=Drawer.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.module.css.cjs","names":[],"sources":["../../../src/components/Drawer/Drawer.module.css"],"sourcesContent":["/* ─── Backdrop ─────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n/* ─── Drawer ──────────────────────────────────────────────────────────────── */\n\n.drawer {\n  display: flex;\n  flex-direction: column;\n  width: min(var(--gnome-drawer-width, var(--gnome-drawer-preset-width, 420px)), 100vw);\n  height: 100dvh;\n  min-width: 0;\n  overflow: hidden;\n\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.classic {\n  --gnome-drawer-preset-width: 420px;\n}\n\n.wide {\n  --gnome-drawer-preset-width: 640px;\n}\n\n.left {\n  margin-right: auto;\n  border-radius: 0 var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0;\n  box-shadow:\n    4px 0 24px rgba(0, 0, 0, 0.18),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n  animation: drawer-in-left var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n.right {\n  margin-left: auto;\n  border-radius: var(--gnome-radius-xl, 16px) 0 0 var(--gnome-radius-xl, 16px);\n  box-shadow:\n    -4px 0 24px rgba(0, 0, 0, 0.18),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n  animation: drawer-in-right var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes drawer-in-left {\n  from { transform: translateX(-100%); }\n  to   { transform: translateX(0); }\n}\n\n@keyframes drawer-in-right {\n  from { transform: translateX(100%); }\n  to   { transform: translateX(0); }\n}\n\n.title {\n  flex-shrink: 0;\n  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,14 +1,14 @@
 //#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 = {
+var e = "_backdrop_z2wwe_3", t = "_drawer_z2wwe_28", n = "_classic_z2wwe_40", r = "_wide_z2wwe_44", i = "_left_z2wwe_48", a = "_right_z2wwe_58", o = "_title_z2wwe_86", s = "_titleText_z2wwe_94", c = "_content_z2wwe_104", l = {
 	backdrop: e,
-	"backdrop-in": "_backdrop-in_om06g_1",
+	"backdrop-in": "_backdrop-in_z2wwe_1",
 	drawer: t,
 	classic: n,
 	wide: r,
 	left: i,
-	"drawer-in-left": "_drawer-in-left_om06g_1",
+	"drawer-in-left": "_drawer-in-left_z2wwe_1",
 	right: a,
-	"drawer-in-right": "_drawer-in-right_om06g_1",
+	"drawer-in-right": "_drawer-in-right_z2wwe_1",
 	title: o,
 	titleText: s,
 	content: c

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/Dropdown/Dropdown.cjs.map

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,2 +1,2 @@
+export type { DropdownOption, DropdownProps } from './Dropdown';
 export { Dropdown } from './Dropdown';
-export type { DropdownProps, DropdownOption } from './Dropdown';

package/dist/components/EntryRow/EntryRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EntryRow.cjs","names":[],"sources":["../../../src/components/EntryRow/EntryRow.tsx"],"sourcesContent":["import { useState, useId, useRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport styles from \"./EntryRow.module.css\";\n\nexport interface EntryRowProps extends InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Acts as a floating label: shown small above the input when the field has\n   * content or focus, shown as a placeholder when empty and unfocused.\n   */\n  title: string;\n  /** Called when the input value changes. */\n  onValueChange?: (value: string) => void;\n  /** Icon or widget placed at the leading edge. */\n  leading?: ReactNode;\n  /** Icon or widget placed at the trailing edge (e.g. a clear button, copy button). */\n  trailing?: ReactNode;\n}\n\n/**\n * Row with an inline text entry field.\n *\n * Mirrors `AdwEntryRow` — the `title` floats up as a small label when the\n * field is focused or has content, acting as a placeholder when empty and\n * unfocused. Use inside a `BoxedList` for inline settings that require text input.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.EntryRow.html\n */\nexport function EntryRow({\n  title,\n  value: controlledValue,\n  defaultValue = \"\",\n  onValueChange,\n  leading,\n  trailing,\n  disabled,\n  className,\n  id: externalId,\n  onChange,\n  ...props\n}: EntryRowProps) {\n  const generatedId = useId();\n  const inputId = externalId ?? generatedId;\n\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(String(defaultValue));\n  const inputValue = isControlled ? String(controlledValue) : uncontrolledValue;\n\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const floated = focused || inputValue.length > 0;\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) setUncontrolledValue(e.target.value);\n    onValueChange?.(e.target.value);\n    onChange?.(e);\n  };\n\n  return (\n    <div\n      className={[\n        styles.row,\n        focused ? styles.focused : null,\n        disabled ? styles.disabled : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      onClick={() => inputRef.current?.focus()}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.fieldWrap}>\n        <label\n          htmlFor={inputId}\n          className={[styles.label, floated ? styles.labelFloated : null].filter(Boolean).join(\" \")}\n        >\n          {title}\n        </label>\n        <input\n          ref={inputRef}\n          id={inputId}\n          className={[styles.input, floated ? styles.inputFloated : null].filter(Boolean).join(\" \")}\n          value={inputValue}\n          disabled={disabled}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          onChange={handleChange}\n          {...props}\n        />\n      </span>\n\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </div>\n  );\n}\n"],"mappings":"mGA0BA,SAAgB,EAAS,CACvB,QACA,MAAO,EACP,eAAe,GACf,gBACA,UACA,WACA,WACA,YACA,GAAI,EACJ,WACA,GAAG,GACa,CAChB,IAAM,GAAA,EAAA,EAAA,QAAqB,CACrB,EAAU,GAAc,EAExB,EAAe,IAAoB,IAAA,GACnC,CAAC,EAAmB,IAAA,EAAA,EAAA,UAAiC,OAAO,EAAa,CAAC,CAC1E,EAAa,EAAe,OAAO,EAAgB,CAAG,EAEtD,CAAC,EAAS,IAAA,EAAA,EAAA,UAAuB,GAAM,CACvC,GAAA,EAAA,EAAA,QAAoC,KAAK,CAEzC,EAAU,GAAW,EAAW,OAAS,EAQ/C,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,IACP,EAAU,EAAA,QAAO,QAAU,KAC3B,EAAW,EAAA,QAAO,SAAW,KAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,YAAe,EAAS,SAAS,OAAO,UAT1C,CAWG,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,EAAe,CAAA,EAE7D,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAxB,EACE,EAAA,EAAA,KAAC,QAAD,CACE,QAAS,EACT,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,EAAA,QAAO,aAAe,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,UAExF,EACK,CAAA,EACR,EAAA,EAAA,KAAC,QAAD,CACE,IAAK,EACL,GAAI,EACJ,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,EAAA,QAAO,aAAe,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CACzF,MAAO,EACG,WACV,YAAe,EAAW,GAAK,CAC/B,WAAc,EAAW,GAAM,CAC/B,SAnCc,GAA2C,CAC1D,GAAc,EAAqB,EAAE,OAAO,MAAM,CACvD,IAAgB,EAAE,OAAO,MAAM,CAC/B,IAAW,EAAE,EAiCP,GAAI,EACJ,CAAA,CACG,GAEN,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,CAC5D"}
+{"version":3,"file":"EntryRow.cjs","names":[],"sources":["../../../src/components/EntryRow/EntryRow.tsx"],"sourcesContent":["import {\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './EntryRow.module.css';\n\nexport interface EntryRowProps extends InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Acts as a floating label: shown small above the input when the field has\n   * content or focus, shown as a placeholder when empty and unfocused.\n   */\n  title: string;\n  /** Called when the input value changes. */\n  onValueChange?: (value: string) => void;\n  /** Icon or widget placed at the leading edge. */\n  leading?: ReactNode;\n  /** Icon or widget placed at the trailing edge (e.g. a clear button, copy button). */\n  trailing?: ReactNode;\n}\n\n/**\n * Row with an inline text entry field.\n *\n * Mirrors `AdwEntryRow` — the `title` floats up as a small label when the\n * field is focused or has content, acting as a placeholder when empty and\n * unfocused. Use inside a `BoxedList` for inline settings that require text input.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.EntryRow.html\n */\nexport function EntryRow({\n  title,\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  leading,\n  trailing,\n  disabled,\n  className,\n  id: externalId,\n  onChange,\n  ...props\n}: EntryRowProps) {\n  const generatedId = useId();\n  const inputId = externalId ?? generatedId;\n\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(String(defaultValue));\n  const inputValue = isControlled ? String(controlledValue) : uncontrolledValue;\n\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const floated = focused || inputValue.length > 0;\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setUncontrolledValue(e.target.value);\n    }\n\n    onValueChange?.(e.target.value);\n    onChange?.(e);\n  };\n\n  return (\n    <div\n      className={[\n        styles.row,\n        focused ? styles.focused : null,\n        disabled ? styles.disabled : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={() => inputRef.current?.focus()}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.fieldWrap}>\n        <label\n          htmlFor={inputId}\n          className={[styles.label, floated ? styles.labelFloated : null].filter(Boolean).join(' ')}\n        >\n          {title}\n        </label>\n        <input\n          ref={inputRef}\n          id={inputId}\n          className={[styles.input, floated ? styles.inputFloated : null].filter(Boolean).join(' ')}\n          value={inputValue}\n          disabled={disabled}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          onChange={handleChange}\n          {...props}\n        />\n      </span>\n\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </div>\n  );\n}\n"],"mappings":"mGAkCA,SAAgB,EAAS,CACvB,QACA,MAAO,EACP,eAAe,GACf,gBACA,UACA,WACA,WACA,YACA,GAAI,EACJ,WACA,GAAG,GACa,CAChB,IAAM,GAAA,EAAA,EAAA,QAAqB,CACrB,EAAU,GAAc,EAExB,EAAe,IAAoB,IAAA,GACnC,CAAC,EAAmB,IAAA,EAAA,EAAA,UAAiC,OAAO,EAAa,CAAC,CAC1E,EAAa,EAAe,OAAO,EAAgB,CAAG,EAEtD,CAAC,EAAS,IAAA,EAAA,EAAA,UAAuB,GAAM,CACvC,GAAA,EAAA,EAAA,QAAoC,KAAK,CAEzC,EAAU,GAAW,EAAW,OAAS,EAW/C,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,IACP,EAAU,EAAA,QAAO,QAAU,KAC3B,EAAW,EAAA,QAAO,SAAW,KAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,YAAe,EAAS,SAAS,OAAO,UAT1C,CAWG,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,EAAe,CAAA,EAE7D,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAxB,EACE,EAAA,EAAA,KAAC,QAAD,CACE,QAAS,EACT,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,EAAA,QAAO,aAAe,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,UAExF,EACK,CAAA,EACR,EAAA,EAAA,KAAC,QAAD,CACE,IAAK,EACL,GAAI,EACJ,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,EAAA,QAAO,aAAe,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CACzF,MAAO,EACG,WACV,YAAe,EAAW,GAAK,CAC/B,WAAc,EAAW,GAAM,CAC/B,SAtCc,GAAqC,CACpD,GACH,EAAqB,EAAE,OAAO,MAAM,CAGtC,IAAgB,EAAE,OAAO,MAAM,CAC/B,IAAW,EAAE,EAiCP,GAAI,EACJ,CAAA,CACG,GAEN,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,CAC5D"}

package/dist/components/EntryRow/EntryRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntryRow.js","names":[],"sources":["../../../src/components/EntryRow/EntryRow.tsx"],"sourcesContent":["import { useState, useId, useRef, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport styles from \"./EntryRow.module.css\";\n\nexport interface EntryRowProps extends InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Acts as a floating label: shown small above the input when the field has\n   * content or focus, shown as a placeholder when empty and unfocused.\n   */\n  title: string;\n  /** Called when the input value changes. */\n  onValueChange?: (value: string) => void;\n  /** Icon or widget placed at the leading edge. */\n  leading?: ReactNode;\n  /** Icon or widget placed at the trailing edge (e.g. a clear button, copy button). */\n  trailing?: ReactNode;\n}\n\n/**\n * Row with an inline text entry field.\n *\n * Mirrors `AdwEntryRow` — the `title` floats up as a small label when the\n * field is focused or has content, acting as a placeholder when empty and\n * unfocused. Use inside a `BoxedList` for inline settings that require text input.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.EntryRow.html\n */\nexport function EntryRow({\n  title,\n  value: controlledValue,\n  defaultValue = \"\",\n  onValueChange,\n  leading,\n  trailing,\n  disabled,\n  className,\n  id: externalId,\n  onChange,\n  ...props\n}: EntryRowProps) {\n  const generatedId = useId();\n  const inputId = externalId ?? generatedId;\n\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(String(defaultValue));\n  const inputValue = isControlled ? String(controlledValue) : uncontrolledValue;\n\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const floated = focused || inputValue.length > 0;\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) setUncontrolledValue(e.target.value);\n    onValueChange?.(e.target.value);\n    onChange?.(e);\n  };\n\n  return (\n    <div\n      className={[\n        styles.row,\n        focused ? styles.focused : null,\n        disabled ? styles.disabled : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      onClick={() => inputRef.current?.focus()}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.fieldWrap}>\n        <label\n          htmlFor={inputId}\n          className={[styles.label, floated ? styles.labelFloated : null].filter(Boolean).join(\" \")}\n        >\n          {title}\n        </label>\n        <input\n          ref={inputRef}\n          id={inputId}\n          className={[styles.input, floated ? styles.inputFloated : null].filter(Boolean).join(\" \")}\n          value={inputValue}\n          disabled={disabled}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          onChange={handleChange}\n          {...props}\n        />\n      </span>\n\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </div>\n  );\n}\n"],"mappings":";;;;AA0BA,SAAgB,EAAS,EACvB,UACA,OAAO,GACP,kBAAe,IACf,kBACA,YACA,aACA,aACA,cACA,IAAI,GACJ,aACA,GAAG,KACa;CAChB,IAAM,IAAc,GAAO,EACrB,IAAU,KAAc,GAExB,IAAe,MAAoB,KAAA,GACnC,CAAC,GAAmB,KAAwB,EAAS,OAAO,EAAa,CAAC,EAC1E,IAAa,IAAe,OAAO,EAAgB,GAAG,GAEtD,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,IAAW,EAAyB,KAAK,EAEzC,IAAU,KAAW,EAAW,SAAS;AAQ/C,QACE,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,IAAU,EAAO,UAAU;GAC3B,IAAW,EAAO,WAAW;GAC7B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,eAAe,EAAS,SAAS,OAAO;YAT1C;GAWG,KAAW,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAU;IAAe,CAAA;GAE7D,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,SAAD;KACE,SAAS;KACT,WAAW,CAAC,EAAO,OAAO,IAAU,EAAO,eAAe,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;eAExF;KACK,CAAA,EACR,kBAAC,SAAD;KACE,KAAK;KACL,IAAI;KACJ,WAAW,CAAC,EAAO,OAAO,IAAU,EAAO,eAAe,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;KACzF,OAAO;KACG;KACV,eAAe,EAAW,GAAK;KAC/B,cAAc,EAAW,GAAM;KAC/B,WAnCc,MAA2C;AAG/D,MAFK,KAAc,EAAqB,EAAE,OAAO,MAAM,EACvD,IAAgB,EAAE,OAAO,MAAM,EAC/B,IAAW,EAAE;;KAiCP,GAAI;KACJ,CAAA,CACG;;GAEN,KAAY,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAW;IAAgB,CAAA;GAC5D"}
+{"version":3,"file":"EntryRow.js","names":[],"sources":["../../../src/components/EntryRow/EntryRow.tsx"],"sourcesContent":["import {\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './EntryRow.module.css';\n\nexport interface EntryRowProps extends InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Acts as a floating label: shown small above the input when the field has\n   * content or focus, shown as a placeholder when empty and unfocused.\n   */\n  title: string;\n  /** Called when the input value changes. */\n  onValueChange?: (value: string) => void;\n  /** Icon or widget placed at the leading edge. */\n  leading?: ReactNode;\n  /** Icon or widget placed at the trailing edge (e.g. a clear button, copy button). */\n  trailing?: ReactNode;\n}\n\n/**\n * Row with an inline text entry field.\n *\n * Mirrors `AdwEntryRow` — the `title` floats up as a small label when the\n * field is focused or has content, acting as a placeholder when empty and\n * unfocused. Use inside a `BoxedList` for inline settings that require text input.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.EntryRow.html\n */\nexport function EntryRow({\n  title,\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  leading,\n  trailing,\n  disabled,\n  className,\n  id: externalId,\n  onChange,\n  ...props\n}: EntryRowProps) {\n  const generatedId = useId();\n  const inputId = externalId ?? generatedId;\n\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(String(defaultValue));\n  const inputValue = isControlled ? String(controlledValue) : uncontrolledValue;\n\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const floated = focused || inputValue.length > 0;\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setUncontrolledValue(e.target.value);\n    }\n\n    onValueChange?.(e.target.value);\n    onChange?.(e);\n  };\n\n  return (\n    <div\n      className={[\n        styles.row,\n        focused ? styles.focused : null,\n        disabled ? styles.disabled : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={() => inputRef.current?.focus()}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.fieldWrap}>\n        <label\n          htmlFor={inputId}\n          className={[styles.label, floated ? styles.labelFloated : null].filter(Boolean).join(' ')}\n        >\n          {title}\n        </label>\n        <input\n          ref={inputRef}\n          id={inputId}\n          className={[styles.input, floated ? styles.inputFloated : null].filter(Boolean).join(' ')}\n          value={inputValue}\n          disabled={disabled}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          onChange={handleChange}\n          {...props}\n        />\n      </span>\n\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </div>\n  );\n}\n"],"mappings":";;;;AAkCA,SAAgB,EAAS,EACvB,UACA,OAAO,GACP,kBAAe,IACf,kBACA,YACA,aACA,aACA,cACA,IAAI,GACJ,aACA,GAAG,KACa;CAChB,IAAM,IAAc,GAAO,EACrB,IAAU,KAAc,GAExB,IAAe,MAAoB,KAAA,GACnC,CAAC,GAAmB,KAAwB,EAAS,OAAO,EAAa,CAAC,EAC1E,IAAa,IAAe,OAAO,EAAgB,GAAG,GAEtD,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,IAAW,EAAyB,KAAK,EAEzC,IAAU,KAAW,EAAW,SAAS;AAW/C,QACE,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,IAAU,EAAO,UAAU;GAC3B,IAAW,EAAO,WAAW;GAC7B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,eAAe,EAAS,SAAS,OAAO;YAT1C;GAWG,KAAW,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAU;IAAe,CAAA;GAE7D,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,SAAD;KACE,SAAS;KACT,WAAW,CAAC,EAAO,OAAO,IAAU,EAAO,eAAe,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;eAExF;KACK,CAAA,EACR,kBAAC,SAAD;KACE,KAAK;KACL,IAAI;KACJ,WAAW,CAAC,EAAO,OAAO,IAAU,EAAO,eAAe,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;KACzF,OAAO;KACG;KACV,eAAe,EAAW,GAAK;KAC/B,cAAc,EAAW,GAAM;KAC/B,WAtCc,MAAqC;AAMzD,MALK,KACH,EAAqB,EAAE,OAAO,MAAM,EAGtC,IAAgB,EAAE,OAAO,MAAM,EAC/B,IAAW,EAAE;;KAiCP,GAAI;KACJ,CAAA,CACG;;GAEN,KAAY,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAW;IAAgB,CAAA;GAC5D"}

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

@@ -1,2 +1,2 @@
-var e={row:`_row_1kogj_3`,focused:`_focused_1kogj_16`,disabled:`_disabled_1kogj_25`,leading:`_leading_1kogj_33`,trailing:`_trailing_1kogj_40`,fieldWrap:`_fieldWrap_1kogj_49`,label:`_label_1kogj_61`,labelFloated:`_labelFloated_1kogj_82`,input:`_input_1kogj_91`,inputFloated:`_inputFloated_1kogj_114`};exports.default=e;
+var e={row:`_row_1m20y_3`,focused:`_focused_1m20y_16`,disabled:`_disabled_1m20y_25`,leading:`_leading_1m20y_33`,trailing:`_trailing_1m20y_40`,fieldWrap:`_fieldWrap_1m20y_49`,label:`_label_1m20y_61`,labelFloated:`_labelFloated_1m20y_82`,input:`_input_1m20y_91`,inputFloated:`_inputFloated_1m20y_114`};exports.default=e;
 //# sourceMappingURL=EntryRow.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"EntryRow.module.css.cjs","names":[],"sources":["../../../src/components/EntryRow/EntryRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: 0 var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  cursor: text;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.focused {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Leading / trailing ────────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.trailing {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--gnome-space-1, 6px);\n}\n\n/* ─── Field wrap ────────────────────────────────────────────────────────────── */\n\n.fieldWrap {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  min-width: 0;\n  min-height: 52px;\n}\n\n/* ─── Floating label ────────────────────────────────────────────────────────── */\n\n.label {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  pointer-events: none;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  transition:\n    top var(--gnome-duration-fast) var(--gnome-easing-default),\n    transform var(--gnome-duration-fast) var(--gnome-easing-default),\n    font-size var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* When floated (focused or has value) the label moves up */\n.labelFloated {\n  top: 10px;\n  transform: translateY(0);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  opacity: 0.7;\n}\n\n/* ─── Input field ───────────────────────────────────────────────────────────── */\n\n.input {\n  appearance: none;\n  background: transparent;\n  border: none;\n  outline: none;\n  padding: 0;\n  margin: 0;\n  width: 100%;\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-card-fg-color, rgba(0, 0, 0, 0.8));\n\n  /* Hide until floated — the label is the placeholder */\n  opacity: 0;\n  padding-top: 18px;\n  padding-bottom: 4px;\n\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.inputFloated {\n  opacity: 1;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .focused {\n    box-shadow:\n      inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n        var(--gnome-focus-ring-color, #3584e4),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n        var(--gnome-window-bg-color, #fafafa);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .row,\n  .label,\n  .input {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"EntryRow.module.css.cjs","names":[],"sources":["../../../src/components/EntryRow/EntryRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: 0 var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  cursor: text;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.focused {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Leading / trailing ────────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.trailing {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--gnome-space-1, 6px);\n}\n\n/* ─── Field wrap ────────────────────────────────────────────────────────────── */\n\n.fieldWrap {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  min-width: 0;\n  min-height: 52px;\n}\n\n/* ─── Floating label ────────────────────────────────────────────────────────── */\n\n.label {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  pointer-events: none;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  transition:\n    top var(--gnome-duration-fast) var(--gnome-easing-default),\n    transform var(--gnome-duration-fast) var(--gnome-easing-default),\n    font-size var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* When floated (focused or has value) the label moves up */\n.labelFloated {\n  top: 10px;\n  transform: translateY(0);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  opacity: 0.7;\n}\n\n/* ─── Input field ───────────────────────────────────────────────────────────── */\n\n.input {\n  appearance: none;\n  background: transparent;\n  border: none;\n  outline: none;\n  padding: 0;\n  margin: 0;\n  width: 100%;\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-card-fg-color, rgba(0, 0, 0, 0.8));\n\n  /* Hide until floated — the label is the placeholder */\n  opacity: 0;\n  padding-top: 18px;\n  padding-bottom: 4px;\n\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.inputFloated {\n  opacity: 1;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .focused {\n    box-shadow:\n      inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4),\n      inset 0 0 0\n      calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n      var(--gnome-window-bg-color, #fafafa);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .row,\n  .label,\n  .input {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,14 +1,14 @@
 var e = {
-	row: "_row_1kogj_3",
-	focused: "_focused_1kogj_16",
-	disabled: "_disabled_1kogj_25",
-	leading: "_leading_1kogj_33",
-	trailing: "_trailing_1kogj_40",
-	fieldWrap: "_fieldWrap_1kogj_49",
-	label: "_label_1kogj_61",
-	labelFloated: "_labelFloated_1kogj_82",
-	input: "_input_1kogj_91",
-	inputFloated: "_inputFloated_1kogj_114"
+	row: "_row_1m20y_3",
+	focused: "_focused_1m20y_16",
+	disabled: "_disabled_1m20y_25",
+	leading: "_leading_1m20y_33",
+	trailing: "_trailing_1m20y_40",
+	fieldWrap: "_fieldWrap_1m20y_49",
+	label: "_label_1m20y_61",
+	labelFloated: "_labelFloated_1m20y_82",
+	input: "_input_1m20y_91",
+	inputFloated: "_inputFloated_1m20y_114"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"EntryRow.module.css.js","names":[],"sources":["../../../src/components/EntryRow/EntryRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: 0 var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  cursor: text;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.focused {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Leading / trailing ────────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.trailing {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--gnome-space-1, 6px);\n}\n\n/* ─── Field wrap ────────────────────────────────────────────────────────────── */\n\n.fieldWrap {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  min-width: 0;\n  min-height: 52px;\n}\n\n/* ─── Floating label ────────────────────────────────────────────────────────── */\n\n.label {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  pointer-events: none;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  transition:\n    top var(--gnome-duration-fast) var(--gnome-easing-default),\n    transform var(--gnome-duration-fast) var(--gnome-easing-default),\n    font-size var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* When floated (focused or has value) the label moves up */\n.labelFloated {\n  top: 10px;\n  transform: translateY(0);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  opacity: 0.7;\n}\n\n/* ─── Input field ───────────────────────────────────────────────────────────── */\n\n.input {\n  appearance: none;\n  background: transparent;\n  border: none;\n  outline: none;\n  padding: 0;\n  margin: 0;\n  width: 100%;\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-card-fg-color, rgba(0, 0, 0, 0.8));\n\n  /* Hide until floated — the label is the placeholder */\n  opacity: 0;\n  padding-top: 18px;\n  padding-bottom: 4px;\n\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.inputFloated {\n  opacity: 1;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .focused {\n    box-shadow:\n      inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n        var(--gnome-focus-ring-color, #3584e4),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n        var(--gnome-window-bg-color, #fafafa);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .row,\n  .label,\n  .input {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"EntryRow.module.css.js","names":[],"sources":["../../../src/components/EntryRow/EntryRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: 0 var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  cursor: text;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.focused {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Leading / trailing ────────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.trailing {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--gnome-space-1, 6px);\n}\n\n/* ─── Field wrap ────────────────────────────────────────────────────────────── */\n\n.fieldWrap {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  min-width: 0;\n  min-height: 52px;\n}\n\n/* ─── Floating label ────────────────────────────────────────────────────────── */\n\n.label {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  pointer-events: none;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  transition:\n    top var(--gnome-duration-fast) var(--gnome-easing-default),\n    transform var(--gnome-duration-fast) var(--gnome-easing-default),\n    font-size var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* When floated (focused or has value) the label moves up */\n.labelFloated {\n  top: 10px;\n  transform: translateY(0);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  opacity: 0.7;\n}\n\n/* ─── Input field ───────────────────────────────────────────────────────────── */\n\n.input {\n  appearance: none;\n  background: transparent;\n  border: none;\n  outline: none;\n  padding: 0;\n  margin: 0;\n  width: 100%;\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-card-fg-color, rgba(0, 0, 0, 0.8));\n\n  /* Hide until floated — the label is the placeholder */\n  opacity: 0;\n  padding-top: 18px;\n  padding-bottom: 4px;\n\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.inputFloated {\n  opacity: 1;\n}\n\n.input:disabled {\n  cursor: not-allowed;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .focused {\n    box-shadow:\n      inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4),\n      inset 0 0 0\n      calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n      var(--gnome-window-bg-color, #fafafa);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .row,\n  .label,\n  .input {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { EntryRow } from './EntryRow';
 export type { EntryRowProps } from './EntryRow';
+export { EntryRow } from './EntryRow';

package/dist/components/ExpanderRow/ExpanderRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ExpanderRow.cjs","names":[],"sources":["../../../src/components/ExpanderRow/ExpanderRow.tsx"],"sourcesContent":["import { useState, Children, useId, type HTMLAttributes, type ReactNode } from \"react\";\nimport { Separator } from \"../Separator\";\nimport styles from \"./ExpanderRow.module.css\";\n\nexport interface ExpanderRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge of the header row. */\n  leading?: ReactNode;\n  /**\n   * Widget placed at the trailing edge of the header row, before the chevron\n   * (e.g. a value label or a Switch). Stop event propagation inside it so the\n   * row's toggle isn't triggered.\n   */\n  trailing?: ReactNode;\n  /**\n   * Nested rows revealed when expanded. Use `ActionRow`, `ButtonRow`, or any\n   * row-shaped element — separators are inserted automatically.\n   */\n  children?: ReactNode;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Initial expanded state when uncontrolled. Defaults to `false`. */\n  defaultExpanded?: boolean;\n  /** Called when the expanded state changes. */\n  onExpandedChange?: (expanded: boolean) => void;\n}\n\n/**\n * Collapsible `ActionRow` that reveals nested rows on activation.\n *\n * Mirrors `AdwExpanderRow` — the header row toggles a reveal animation exposing\n * child rows. Supports both controlled and uncontrolled expand state.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ExpanderRow.html\n */\nexport function ExpanderRow({\n  title,\n  subtitle,\n  leading,\n  trailing,\n  children,\n  expanded: controlledExpanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  className,\n  ...props\n}: ExpanderRowProps) {\n  const isControlled = controlledExpanded !== undefined;\n  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);\n  const expanded = isControlled ? controlledExpanded : uncontrolledExpanded;\n\n  const panelId = useId();\n  const headerId = useId();\n\n  const toggle = () => {\n    const next = !expanded;\n    if (!isControlled) setUncontrolledExpanded(next);\n    onExpandedChange?.(next);\n  };\n\n  const childItems = Children.toArray(children).filter(Boolean);\n\n  return (\n    <div\n      className={[styles.expanderRow, expanded ? styles.expanded : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {/* ─── Header (toggle button) ─────────────────────────────────────── */}\n      <button\n        id={headerId}\n        className={styles.header}\n        aria-expanded={expanded}\n        aria-controls={panelId}\n        onClick={toggle}\n      >\n        {leading && <span className={styles.leading}>{leading}</span>}\n\n        <span className={styles.content}>\n          <span className={styles.title}>{title}</span>\n          {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n        </span>\n\n        {trailing && <span className={styles.trailing}>{trailing}</span>}\n\n        <span className={[styles.chevronWrap, expanded ? styles.chevronOpen : null].filter(Boolean).join(\" \")} aria-hidden=\"true\">\n          <svg className={styles.chevron} width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" focusable=\"false\">\n            <path\n              d=\"M4 6l4 4 4-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </span>\n      </button>\n\n      {/* ─── Reveal panel ───────────────────────────────────────────────── */}\n      <div\n        id={panelId}\n        role=\"region\"\n        aria-labelledby={headerId}\n        className={styles.panel}\n      >\n        <div className={styles.panelInner}>\n          {childItems.map((child, i) => (\n            <div key={i} className={styles.childItem}>\n              <Separator aria-hidden=\"true\" />\n              {child}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"8IAsCA,SAAgB,EAAY,CAC1B,QACA,WACA,UACA,WACA,WACA,SAAU,EACV,kBAAkB,GAClB,mBACA,YACA,GAAG,GACgB,CACnB,IAAM,EAAe,IAAuB,IAAA,GACtC,CAAC,EAAsB,IAAA,EAAA,EAAA,UAAoC,EAAgB,CAC3E,EAAW,EAAe,EAAqB,EAE/C,GAAA,EAAA,EAAA,QAAiB,CACjB,GAAA,EAAA,EAAA,QAAkB,CAElB,MAAe,CACnB,IAAM,EAAO,CAAC,EACT,GAAc,EAAwB,EAAK,CAChD,IAAmB,EAAK,EAGpB,EAAa,EAAA,SAAS,QAAQ,EAAS,CAAC,OAAO,QAAQ,CAE7D,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,YAAa,EAAW,EAAA,QAAO,SAAW,KAAM,EAAU,CAC1E,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAJN,EAOE,EAAA,EAAA,MAAC,SAAD,CACE,GAAI,EACJ,UAAW,EAAA,QAAO,OAClB,gBAAe,EACf,gBAAe,EACf,QAAS,WALX,CAOG,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,EAAe,CAAA,EAE7D,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAa,CAAA,CAC5C,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,CAC3D,GAEN,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,EAEhE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,CAAC,EAAA,QAAO,YAAa,EAAW,EAAA,QAAO,YAAc,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAE,cAAY,iBACjH,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAS,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,UAAU,kBACnF,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,eACF,KAAK,OACL,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QACf,CAAA,CACE,CAAA,CACD,CAAA,CACA,IAGT,EAAA,EAAA,KAAC,MAAD,CACE,GAAI,EACJ,KAAK,SACL,kBAAiB,EACjB,UAAW,EAAA,QAAO,gBAElB,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,oBACpB,EAAW,KAAK,EAAO,KACtB,EAAA,EAAA,MAAC,MAAD,CAAa,UAAW,EAAA,QAAO,mBAA/B,EACE,EAAA,EAAA,KAAC,EAAA,UAAD,CAAW,cAAY,OAAS,CAAA,CAC/B,EACG,EAHI,EAGJ,CACN,CACE,CAAA,CACF,CAAA,CACF"}
+{"version":3,"file":"ExpanderRow.cjs","names":[],"sources":["../../../src/components/ExpanderRow/ExpanderRow.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode, useId, useState } from 'react';\n\nimport { Separator } from '../Separator';\n\nimport styles from './ExpanderRow.module.css';\n\nexport interface ExpanderRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge of the header row. */\n  leading?: ReactNode;\n  /**\n   * Widget placed at the trailing edge of the header row, before the chevron\n   * (e.g. a value label or a Switch). Stop event propagation inside it so the\n   * row's toggle isn't triggered.\n   */\n  trailing?: ReactNode;\n  /**\n   * Nested rows revealed when expanded. Use `ActionRow`, `ButtonRow`, or any\n   * row-shaped element — separators are inserted automatically.\n   */\n  children?: ReactNode;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Initial expanded state when uncontrolled. Defaults to `false`. */\n  defaultExpanded?: boolean;\n  /** Called when the expanded state changes. */\n  onExpandedChange?: (expanded: boolean) => void;\n}\n\n/**\n * Collapsible `ActionRow` that reveals nested rows on activation.\n *\n * Mirrors `AdwExpanderRow` — the header row toggles a reveal animation exposing\n * child rows. Supports both controlled and uncontrolled expand state.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ExpanderRow.html\n */\nexport function ExpanderRow({\n  title,\n  subtitle,\n  leading,\n  trailing,\n  children,\n  expanded: controlledExpanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  className,\n  ...props\n}: ExpanderRowProps) {\n  const isControlled = controlledExpanded !== undefined;\n  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);\n  const expanded = isControlled ? controlledExpanded : uncontrolledExpanded;\n\n  const panelId = useId();\n  const headerId = useId();\n\n  const toggle = () => {\n    const next = !expanded;\n\n    if (!isControlled) {\n      setUncontrolledExpanded(next);\n    }\n\n    onExpandedChange?.(next);\n  };\n\n  const childItems = Children.toArray(children).filter(Boolean);\n\n  return (\n    <div\n      className={[styles.expanderRow, expanded ? styles.expanded : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {/* ─── Header (toggle button) ─────────────────────────────────────── */}\n      <button\n        id={headerId}\n        className={styles.header}\n        aria-expanded={expanded}\n        aria-controls={panelId}\n        onClick={toggle}\n      >\n        {leading && <span className={styles.leading}>{leading}</span>}\n\n        <span className={styles.content}>\n          <span className={styles.title}>{title}</span>\n          {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n        </span>\n\n        {trailing && <span className={styles.trailing}>{trailing}</span>}\n\n        <span\n          className={[styles.chevronWrap, expanded ? styles.chevronOpen : null]\n            .filter(Boolean)\n            .join(' ')}\n          aria-hidden=\"true\"\n        >\n          <svg\n            className={styles.chevron}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M4 6l4 4 4-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </span>\n      </button>\n\n      {/* ─── Reveal panel ───────────────────────────────────────────────── */}\n      <div id={panelId} role=\"region\" aria-labelledby={headerId} className={styles.panel}>\n        <div className={styles.panelInner}>\n          {childItems.map((child, i) => (\n            <div key={i} className={styles.childItem}>\n              <Separator aria-hidden=\"true\" />\n              {child}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"8IAwCA,SAAgB,EAAY,CAC1B,QACA,WACA,UACA,WACA,WACA,SAAU,EACV,kBAAkB,GAClB,mBACA,YACA,GAAG,GACgB,CACnB,IAAM,EAAe,IAAuB,IAAA,GACtC,CAAC,EAAsB,IAAA,EAAA,EAAA,UAAoC,EAAgB,CAC3E,EAAW,EAAe,EAAqB,EAE/C,GAAA,EAAA,EAAA,QAAiB,CACjB,GAAA,EAAA,EAAA,QAAkB,CAElB,MAAe,CACnB,IAAM,EAAO,CAAC,EAET,GACH,EAAwB,EAAK,CAG/B,IAAmB,EAAK,EAGpB,EAAa,EAAA,SAAS,QAAQ,EAAS,CAAC,OAAO,QAAQ,CAE7D,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,YAAa,EAAW,EAAA,QAAO,SAAW,KAAM,EAAU,CAC1E,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAJN,EAOE,EAAA,EAAA,MAAC,SAAD,CACE,GAAI,EACJ,UAAW,EAAA,QAAO,OAClB,gBAAe,EACf,gBAAe,EACf,QAAS,WALX,CAOG,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,EAAe,CAAA,EAE7D,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAa,CAAA,CAC5C,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,CAC3D,GAEN,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,EAEhE,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,CAAC,EAAA,QAAO,YAAa,EAAW,EAAA,QAAO,YAAc,KAAK,CAClE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAY,iBAEZ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,QAAO,QAClB,MAAM,KACN,OAAO,KACP,QAAQ,YACR,UAAU,kBAEV,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,eACF,KAAK,OACL,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QACf,CAAA,CACE,CAAA,CACD,CAAA,CACA,IAGT,EAAA,EAAA,KAAC,MAAD,CAAK,GAAI,EAAS,KAAK,SAAS,kBAAiB,EAAU,UAAW,EAAA,QAAO,gBAC3E,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,oBACpB,EAAW,KAAK,EAAO,KACtB,EAAA,EAAA,MAAC,MAAD,CAAa,UAAW,EAAA,QAAO,mBAA/B,EACE,EAAA,EAAA,KAAC,EAAA,UAAD,CAAW,cAAY,OAAS,CAAA,CAC/B,EACG,EAHI,EAGJ,CACN,CACE,CAAA,CACF,CAAA,CACF"}