@gnome-ui/react 1.36.1 → 1.36.3

package/dist/components/ColumnView/ColumnView.js

@@ -0,0 +1,153 @@
+import e from "./ColumnView.module.css.js";
+import { useRef as t, useState as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/ColumnView/ColumnView.tsx
+var o = {
+	start: e.alignStart,
+	center: e.alignCenter,
+	end: e.alignEnd
+};
+function s({ direction: t }) {
+	return /* @__PURE__ */ i("svg", {
+		width: "10",
+		height: "10",
+		viewBox: "0 0 10 10",
+		"aria-hidden": "true",
+		className: t ? e.sortActive : e.sortNeutral,
+		children: t === "asc" ? /* @__PURE__ */ i("path", {
+			d: "M5 2 L9 8 L1 8 Z",
+			fill: "currentColor"
+		}) : t === "desc" ? /* @__PURE__ */ i("path", {
+			d: "M5 8 L1 2 L9 2 Z",
+			fill: "currentColor"
+		}) : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("path", {
+			d: "M5 1 L8 5 L2 5 Z",
+			fill: "currentColor",
+			opacity: "0.4"
+		}), /* @__PURE__ */ i("path", {
+			d: "M5 9 L2 5 L8 5 Z",
+			fill: "currentColor",
+			opacity: "0.4"
+		})] })
+	});
+}
+function c({ columns: r, rows: c, rowKey: l, selectionMode: u = "none", selectedRows: d = [], onSelectionChange: f, sortState: p, onSort: m, height: h, emptyState: g, className: _, ariaLabel: v }) {
+	let y = t(null), [b, x] = n(0), S = new Set(d), C = u === "multiple", w = r.length + (C ? 1 : 0);
+	function T(e) {
+		m && m(e, p?.columnId === e && p.direction === "asc" ? "desc" : "asc");
+	}
+	function E(e) {
+		if (!(u === "none" || !f)) if (u === "single") f(S.has(e) ? [] : [e]);
+		else {
+			let t = new Set(S);
+			t.has(e) ? t.delete(e) : t.add(e), f([...t]);
+		}
+	}
+	function D(e, t, n) {
+		let r = y.current?.querySelectorAll("tr") ?? [];
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			let n = Math.min(c.length - 1, t + 1);
+			x(n), r[n]?.focus();
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			let n = Math.max(0, t - 1);
+			x(n), r[n]?.focus();
+		} else (e.key === " " || e.key === "Enter") && (e.preventDefault(), E(n));
+	}
+	function O(e) {
+		f && f(e ? c.map(l) : []);
+	}
+	let k = h ? { height: typeof h == "number" ? `${h}px` : h } : {};
+	return /* @__PURE__ */ i("div", {
+		className: [e.outer, _].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ i("div", {
+			className: e.scroll,
+			style: k,
+			children: /* @__PURE__ */ a("table", {
+				className: e.table,
+				role: "grid",
+				"aria-label": v,
+				"aria-multiselectable": u === "multiple" || void 0,
+				children: [/* @__PURE__ */ i("thead", {
+					className: e.thead,
+					children: /* @__PURE__ */ a("tr", { children: [C && /* @__PURE__ */ i("th", {
+						className: [e.th, e.checkboxCol].join(" "),
+						children: /* @__PURE__ */ i("input", {
+							type: "checkbox",
+							className: e.checkbox,
+							checked: c.length > 0 && d.length === c.length,
+							ref: (e) => {
+								e && (e.indeterminate = d.length > 0 && d.length < c.length);
+							},
+							onChange: (e) => O(e.target.checked),
+							"aria-label": "Select all rows"
+						})
+					}), r.map((t) => {
+						let n = p?.columnId === t.id;
+						return /* @__PURE__ */ i("th", {
+							className: [e.th, t.align ? o[t.align] : null].filter(Boolean).join(" "),
+							style: t.width ? { width: t.width } : void 0,
+							"aria-sort": n ? p.direction === "asc" ? "ascending" : "descending" : t.sortable ? "none" : void 0,
+							children: t.sortable && m ? /* @__PURE__ */ a("button", {
+								type: "button",
+								className: [e.sortBtn, n ? e.sortBtnActive : null].filter(Boolean).join(" "),
+								onClick: () => T(t.id),
+								children: [/* @__PURE__ */ i("span", { children: t.header }), /* @__PURE__ */ i(s, { direction: n ? p.direction : null })]
+							}) : /* @__PURE__ */ i("span", {
+								className: e.headerLabel,
+								children: t.header
+							})
+						}, t.id);
+					})] })
+				}), /* @__PURE__ */ i("tbody", {
+					ref: y,
+					className: e.tbody,
+					children: c.length === 0 ? /* @__PURE__ */ i("tr", { children: /* @__PURE__ */ i("td", {
+						colSpan: w,
+						className: e.emptyCell,
+						children: g ?? /* @__PURE__ */ i("span", {
+							className: e.emptyLabel,
+							children: "No items"
+						})
+					}) }) : c.map((t, n) => {
+						let s = l(t), c = S.has(s);
+						return /* @__PURE__ */ a("tr", {
+							className: [
+								e.row,
+								c ? e.rowSelected : null,
+								u === "none" ? null : e.rowSelectable
+							].filter(Boolean).join(" "),
+							role: "row",
+							"aria-selected": u === "none" ? void 0 : c,
+							tabIndex: b === n ? 0 : -1,
+							onClick: () => E(s),
+							onKeyDown: (e) => D(e, n, s),
+							onFocus: () => x(n),
+							children: [C && /* @__PURE__ */ i("td", {
+								className: [e.td, e.checkboxCol].join(" "),
+								children: /* @__PURE__ */ i("input", {
+									type: "checkbox",
+									className: e.checkbox,
+									checked: c,
+									onChange: () => E(s),
+									onClick: (e) => e.stopPropagation(),
+									tabIndex: -1,
+									"aria-label": `Select row ${n + 1}`
+								})
+							}), r.map((r) => /* @__PURE__ */ i("td", {
+								className: [e.td, r.align ? o[r.align] : null].filter(Boolean).join(" "),
+								role: "gridcell",
+								children: r.cell(t, n)
+							}, r.id))]
+						}, s);
+					})
+				})]
+			})
+		})
+	});
+}
+//#endregion
+export { c as ColumnView };
+
+//# sourceMappingURL=ColumnView.js.map

package/dist/components/ColumnView/ColumnView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnView.js","names":[],"sources":["../../../src/components/ColumnView/ColumnView.tsx"],"sourcesContent":["import { type ReactNode, useRef, useState } from \"react\";\nimport styles from \"./ColumnView.module.css\";\n\nexport interface ColumnDef<TRow> {\n  id: string;\n  header: ReactNode;\n  cell: (row: TRow, index: number) => ReactNode;\n  sortable?: boolean;\n  /** CSS width value — e.g. \"200px\", \"30%\". */\n  width?: string;\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport interface ColumnViewSortState {\n  columnId: string;\n  direction: SortDirection;\n}\n\nexport type ColumnViewSelectionMode = \"none\" | \"single\" | \"multiple\";\n\nexport interface ColumnViewProps<TRow extends object = Record<string, unknown>> {\n  columns: ColumnDef<TRow>[];\n  rows: TRow[];\n  /** Extract a stable unique key per row. */\n  rowKey: (row: TRow) => string | number;\n  /** @default \"none\" */\n  selectionMode?: ColumnViewSelectionMode;\n  /** Controlled set of selected row keys. */\n  selectedRows?: (string | number)[];\n  onSelectionChange?: (keys: (string | number)[]) => void;\n  /** Controlled sort state. */\n  sortState?: ColumnViewSortState;\n  onSort?: (columnId: string, direction: SortDirection) => void;\n  /** Constrains height and enables vertical scroll. */\n  height?: string | number;\n  /** Rendered when `rows` is empty. */\n  emptyState?: ReactNode;\n  className?: string;\n  ariaLabel?: string;\n}\n\nconst ALIGN: Record<string, string> = {\n  start: styles.alignStart,\n  center: styles.alignCenter,\n  end: styles.alignEnd,\n};\n\nfunction SortChevron({ direction }: { direction: SortDirection | null }) {\n  return (\n    <svg\n      width=\"10\"\n      height=\"10\"\n      viewBox=\"0 0 10 10\"\n      aria-hidden=\"true\"\n      className={direction ? styles.sortActive : styles.sortNeutral}\n    >\n      {direction === \"asc\" ? (\n        <path d=\"M5 2 L9 8 L1 8 Z\" fill=\"currentColor\" />\n      ) : direction === \"desc\" ? (\n        <path d=\"M5 8 L1 2 L9 2 Z\" fill=\"currentColor\" />\n      ) : (\n        <>\n          <path d=\"M5 1 L8 5 L2 5 Z\" fill=\"currentColor\" opacity=\"0.4\" />\n          <path d=\"M5 9 L2 5 L8 5 Z\" fill=\"currentColor\" opacity=\"0.4\" />\n        </>\n      )}\n    </svg>\n  );\n}\n\nexport function ColumnView<TRow extends object = Record<string, unknown>>({\n  columns,\n  rows,\n  rowKey,\n  selectionMode = \"none\",\n  selectedRows = [],\n  onSelectionChange,\n  sortState,\n  onSort,\n  height,\n  emptyState,\n  className,\n  ariaLabel,\n}: ColumnViewProps<TRow>) {\n  const tbodyRef = useRef<HTMLTableSectionElement>(null);\n  const [focusedIndex, setFocusedIndex] = useState(0);\n  const selectedSet = new Set(selectedRows);\n  const hasCheckbox = selectionMode === \"multiple\";\n  const colSpan = columns.length + (hasCheckbox ? 1 : 0);\n\n  function handleSort(colId: string) {\n    if (!onSort) return;\n    const next: SortDirection =\n      sortState?.columnId === colId && sortState.direction === \"asc\"\n        ? \"desc\"\n        : \"asc\";\n    onSort(colId, next);\n  }\n\n  function toggleRow(key: string | number) {\n    if (selectionMode === \"none\" || !onSelectionChange) return;\n    if (selectionMode === \"single\") {\n      onSelectionChange(selectedSet.has(key) ? [] : [key]);\n    } else {\n      const next = new Set(selectedSet);\n      next.has(key) ? next.delete(key) : next.add(key);\n      onSelectionChange([...next]);\n    }\n  }\n\n  function handleRowKey(\n    e: React.KeyboardEvent,\n    index: number,\n    key: string | number,\n  ) {\n    const rows_els =\n      tbodyRef.current?.querySelectorAll<HTMLTableRowElement>(\"tr\") ?? [];\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      const next = Math.min(rows.length - 1, index + 1);\n      setFocusedIndex(next);\n      rows_els[next]?.focus();\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      const prev = Math.max(0, index - 1);\n      setFocusedIndex(prev);\n      rows_els[prev]?.focus();\n    } else if (e.key === \" \" || e.key === \"Enter\") {\n      e.preventDefault();\n      toggleRow(key);\n    }\n  }\n\n  function handleSelectAll(checked: boolean) {\n    if (!onSelectionChange) return;\n    onSelectionChange(checked ? rows.map(rowKey) : []);\n  }\n\n  const containerStyle: React.CSSProperties = height\n    ? { height: typeof height === \"number\" ? `${height}px` : height }\n    : {};\n\n  return (\n    <div className={[styles.outer, className].filter(Boolean).join(\" \")}>\n      <div className={styles.scroll} style={containerStyle}>\n        <table\n          className={styles.table}\n          role=\"grid\"\n          aria-label={ariaLabel}\n          aria-multiselectable={selectionMode === \"multiple\" || undefined}\n        >\n          <thead className={styles.thead}>\n            <tr>\n              {hasCheckbox && (\n                <th className={[styles.th, styles.checkboxCol].join(\" \")}>\n                  <input\n                    type=\"checkbox\"\n                    className={styles.checkbox}\n                    checked={\n                      rows.length > 0 && selectedRows.length === rows.length\n                    }\n                    ref={(el) => {\n                      if (el)\n                        el.indeterminate =\n                          selectedRows.length > 0 &&\n                          selectedRows.length < rows.length;\n                    }}\n                    onChange={(e) => handleSelectAll(e.target.checked)}\n                    aria-label=\"Select all rows\"\n                  />\n                </th>\n              )}\n              {columns.map((col) => {\n                const isSorted = sortState?.columnId === col.id;\n                return (\n                  <th\n                    key={col.id}\n                    className={[styles.th, col.align ? ALIGN[col.align] : null]\n                      .filter(Boolean)\n                      .join(\" \")}\n                    style={col.width ? { width: col.width } : undefined}\n                    aria-sort={\n                      isSorted\n                        ? sortState!.direction === \"asc\"\n                          ? \"ascending\"\n                          : \"descending\"\n                        : col.sortable\n                          ? \"none\"\n                          : undefined\n                    }\n                  >\n                    {col.sortable && onSort ? (\n                      <button\n                        type=\"button\"\n                        className={[\n                          styles.sortBtn,\n                          isSorted ? styles.sortBtnActive : null,\n                        ]\n                          .filter(Boolean)\n                          .join(\" \")}\n                        onClick={() => handleSort(col.id)}\n                      >\n                        <span>{col.header}</span>\n                        <SortChevron\n                          direction={isSorted ? sortState!.direction : null}\n                        />\n                      </button>\n                    ) : (\n                      <span className={styles.headerLabel}>{col.header}</span>\n                    )}\n                  </th>\n                );\n              })}\n            </tr>\n          </thead>\n\n          <tbody ref={tbodyRef} className={styles.tbody}>\n            {rows.length === 0 ? (\n              <tr>\n                <td colSpan={colSpan} className={styles.emptyCell}>\n                  {emptyState ?? (\n                    <span className={styles.emptyLabel}>No items</span>\n                  )}\n                </td>\n              </tr>\n            ) : (\n              rows.map((row, index) => {\n                const key = rowKey(row);\n                const isSelected = selectedSet.has(key);\n                return (\n                  <tr\n                    key={key}\n                    className={[\n                      styles.row,\n                      isSelected ? styles.rowSelected : null,\n                      selectionMode !== \"none\" ? styles.rowSelectable : null,\n                    ]\n                      .filter(Boolean)\n                      .join(\" \")}\n                    role=\"row\"\n                    aria-selected={\n                      selectionMode !== \"none\" ? isSelected : undefined\n                    }\n                    tabIndex={focusedIndex === index ? 0 : -1}\n                    onClick={() => toggleRow(key)}\n                    onKeyDown={(e) => handleRowKey(e, index, key)}\n                    onFocus={() => setFocusedIndex(index)}\n                  >\n                    {hasCheckbox && (\n                      <td className={[styles.td, styles.checkboxCol].join(\" \")}>\n                        <input\n                          type=\"checkbox\"\n                          className={styles.checkbox}\n                          checked={isSelected}\n                          onChange={() => toggleRow(key)}\n                          onClick={(e) => e.stopPropagation()}\n                          tabIndex={-1}\n                          aria-label={`Select row ${index + 1}`}\n                        />\n                      </td>\n                    )}\n                    {columns.map((col) => (\n                      <td\n                        key={col.id}\n                        className={[\n                          styles.td,\n                          col.align ? ALIGN[col.align] : null,\n                        ]\n                          .filter(Boolean)\n                          .join(\" \")}\n                        role=\"gridcell\"\n                      >\n                        {col.cell(row, index)}\n                      </td>\n                    ))}\n                  </tr>\n                );\n              })\n            )}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+var e={outer:`_outer_1pg3h_3`,scroll:`_scroll_1pg3h_13`,table:`_table_1pg3h_20`,thead:`_thead_1pg3h_28`,th:`_th_1pg3h_28`,headerLabel:`_headerLabel_1pg3h_48`,sortBtn:`_sortBtn_1pg3h_55`,sortBtnActive:`_sortBtnActive_1pg3h_84`,sortActive:`_sortActive_1pg3h_89`,sortNeutral:`_sortNeutral_1pg3h_93`,tbody:`_tbody_1pg3h_99`,row:`_row_1pg3h_105`,rowSelectable:`_rowSelectable_1pg3h_114`,rowSelected:`_rowSelected_1pg3h_126`,td:`_td_1pg3h_144`,alignStart:`_alignStart_1pg3h_156`,alignCenter:`_alignCenter_1pg3h_160`,alignEnd:`_alignEnd_1pg3h_164`,checkboxCol:`_checkboxCol_1pg3h_170`,checkbox:`_checkbox_1pg3h_170`,emptyCell:`_emptyCell_1pg3h_186`,emptyLabel:`_emptyLabel_1pg3h_191`};exports.default=e;
+//# sourceMappingURL=ColumnView.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnView.module.css.cjs","names":[],"sources":["../../../src/components/ColumnView/ColumnView.module.css"],"sourcesContent":["/* ─── Outer container (border + radius, no overflow to preserve sticky) ────── */\n\n.outer {\n  border: 1px solid var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-lg, 12px);\n  background: var(--gnome-card-bg-color, #ffffff);\n  /* overflow:clip clips to border-radius without creating a scroll ctx */\n  overflow: clip;\n}\n\n/* ─── Scroll container ──────────────────────────────────────────────────────── */\n\n.scroll {\n  overflow-y: auto;\n  width: 100%;\n}\n\n/* ─── Table ─────────────────────────────────────────────────────────────────── */\n\n.table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: auto;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.thead {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  background: var(--gnome-card-bg-color, #ffffff);\n  /* Separator below sticky header */\n  box-shadow: 0 1px 0 var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n}\n\n.th {\n  padding: 0 var(--gnome-space-4, 24px);\n  height: 40px;\n  text-align: start;\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: 700;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\n.headerLabel {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.55;\n}\n\n/* ─── Sort button ───────────────────────────────────────────────────────────── */\n\n.sortBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  appearance: none;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: 700;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.55;\n  outline: none;\n  border-radius: var(--gnome-radius-sm, 4px);\n  transition: opacity var(--gnome-transition-fast, 100ms) ease;\n}\n\n.sortBtn:hover {\n  opacity: 0.8;\n}\n\n.sortBtn:focus-visible {\n  outline: 2px solid var(--gnome-accent-color, #3584e4);\n  outline-offset: 2px;\n  opacity: 0.8;\n}\n\n.sortBtnActive {\n  opacity: 1;\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortActive {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortNeutral {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.tbody {\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Row ───────────────────────────────────────────────────────────────────── */\n\n.row {\n  outline: none;\n  transition: background-color var(--gnome-transition-fast, 100ms) ease;\n}\n\n.row:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--gnome-accent-color, #3584e4);\n}\n\n.rowSelectable {\n  cursor: pointer;\n}\n\n.rowSelectable:hover {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.07));\n}\n\n.rowSelectable:active {\n  background-color: var(--gnome-active-overlay, rgba(0, 0, 0, 0.12));\n}\n\n.rowSelected {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-accent-color, #3584e4) 15%,\n    transparent\n  );\n}\n\n.rowSelected:hover {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-accent-color, #3584e4) 22%,\n    transparent\n  );\n}\n\n/* ─── Cell ──────────────────────────────────────────────────────────────────── */\n\n.td {\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-body, 1rem);\n  vertical-align: middle;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Alignment ─────────────────────────────────────────────────────────────── */\n\n.alignStart {\n  text-align: start;\n}\n\n.alignCenter {\n  text-align: center;\n}\n\n.alignEnd {\n  text-align: end;\n}\n\n/* ─── Checkbox column ───────────────────────────────────────────────────────── */\n\n.checkboxCol {\n  width: 48px;\n  padding-inline: var(--gnome-space-3, 18px);\n  text-align: center;\n}\n\n.checkbox {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--gnome-accent-color, #3584e4);\n  vertical-align: middle;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.emptyCell {\n  padding: var(--gnome-space-6, 36px) var(--gnome-space-4, 24px);\n  text-align: center;\n}\n\n.emptyLabel {\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.55;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .outer {\n    border-width: 2px;\n  }\n\n  .row + .row .td {\n    border-top: 1px solid var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n  }\n\n  .sortBtn {\n    text-decoration: underline;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,28 @@
+var e = {
+	outer: "_outer_1pg3h_3",
+	scroll: "_scroll_1pg3h_13",
+	table: "_table_1pg3h_20",
+	thead: "_thead_1pg3h_28",
+	th: "_th_1pg3h_28",
+	headerLabel: "_headerLabel_1pg3h_48",
+	sortBtn: "_sortBtn_1pg3h_55",
+	sortBtnActive: "_sortBtnActive_1pg3h_84",
+	sortActive: "_sortActive_1pg3h_89",
+	sortNeutral: "_sortNeutral_1pg3h_93",
+	tbody: "_tbody_1pg3h_99",
+	row: "_row_1pg3h_105",
+	rowSelectable: "_rowSelectable_1pg3h_114",
+	rowSelected: "_rowSelected_1pg3h_126",
+	td: "_td_1pg3h_144",
+	alignStart: "_alignStart_1pg3h_156",
+	alignCenter: "_alignCenter_1pg3h_160",
+	alignEnd: "_alignEnd_1pg3h_164",
+	checkboxCol: "_checkboxCol_1pg3h_170",
+	checkbox: "_checkbox_1pg3h_170",
+	emptyCell: "_emptyCell_1pg3h_186",
+	emptyLabel: "_emptyLabel_1pg3h_191"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=ColumnView.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnView.module.css.js","names":[],"sources":["../../../src/components/ColumnView/ColumnView.module.css"],"sourcesContent":["/* ─── Outer container (border + radius, no overflow to preserve sticky) ────── */\n\n.outer {\n  border: 1px solid var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-lg, 12px);\n  background: var(--gnome-card-bg-color, #ffffff);\n  /* overflow:clip clips to border-radius without creating a scroll ctx */\n  overflow: clip;\n}\n\n/* ─── Scroll container ──────────────────────────────────────────────────────── */\n\n.scroll {\n  overflow-y: auto;\n  width: 100%;\n}\n\n/* ─── Table ─────────────────────────────────────────────────────────────────── */\n\n.table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: auto;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.thead {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  background: var(--gnome-card-bg-color, #ffffff);\n  /* Separator below sticky header */\n  box-shadow: 0 1px 0 var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n}\n\n.th {\n  padding: 0 var(--gnome-space-4, 24px);\n  height: 40px;\n  text-align: start;\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: 700;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\n.headerLabel {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.55;\n}\n\n/* ─── Sort button ───────────────────────────────────────────────────────────── */\n\n.sortBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  appearance: none;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: 700;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.55;\n  outline: none;\n  border-radius: var(--gnome-radius-sm, 4px);\n  transition: opacity var(--gnome-transition-fast, 100ms) ease;\n}\n\n.sortBtn:hover {\n  opacity: 0.8;\n}\n\n.sortBtn:focus-visible {\n  outline: 2px solid var(--gnome-accent-color, #3584e4);\n  outline-offset: 2px;\n  opacity: 0.8;\n}\n\n.sortBtnActive {\n  opacity: 1;\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortActive {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortNeutral {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.tbody {\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Row ───────────────────────────────────────────────────────────────────── */\n\n.row {\n  outline: none;\n  transition: background-color var(--gnome-transition-fast, 100ms) ease;\n}\n\n.row:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--gnome-accent-color, #3584e4);\n}\n\n.rowSelectable {\n  cursor: pointer;\n}\n\n.rowSelectable:hover {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.07));\n}\n\n.rowSelectable:active {\n  background-color: var(--gnome-active-overlay, rgba(0, 0, 0, 0.12));\n}\n\n.rowSelected {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-accent-color, #3584e4) 15%,\n    transparent\n  );\n}\n\n.rowSelected:hover {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-accent-color, #3584e4) 22%,\n    transparent\n  );\n}\n\n/* ─── Cell ──────────────────────────────────────────────────────────────────── */\n\n.td {\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-body, 1rem);\n  vertical-align: middle;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Alignment ─────────────────────────────────────────────────────────────── */\n\n.alignStart {\n  text-align: start;\n}\n\n.alignCenter {\n  text-align: center;\n}\n\n.alignEnd {\n  text-align: end;\n}\n\n/* ─── Checkbox column ───────────────────────────────────────────────────────── */\n\n.checkboxCol {\n  width: 48px;\n  padding-inline: var(--gnome-space-3, 18px);\n  text-align: center;\n}\n\n.checkbox {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--gnome-accent-color, #3584e4);\n  vertical-align: middle;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.emptyCell {\n  padding: var(--gnome-space-6, 36px) var(--gnome-space-4, 24px);\n  text-align: center;\n}\n\n.emptyLabel {\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.55;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .outer {\n    border-width: 2px;\n  }\n\n  .row + .row .td {\n    border-top: 1px solid var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n  }\n\n  .sortBtn {\n    text-decoration: underline;\n  }\n}\n"],"mappings":""}

package/dist/components/ColumnView.cjs

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

package/dist/components/ColumnView.d.ts

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

package/dist/components/ColumnView.js

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

package/dist/components/ComboRow/ComboRow.cjs

@@ -0,0 +1,2 @@
+const e=require(`./ComboRow.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);function r({title:r,subtitle:i,leading:a,options:o,value:s,defaultValue:c,onValueChange:l,disabled:u=!1,className:d,...f}){let p=s!==void 0,[m,h]=(0,t.useState)(c),g=p?s:m,[_,v]=(0,t.useState)(!1),[y,b]=(0,t.useState)(-1),[x,S]=(0,t.useState)(!1),C=(0,t.useId)(),w=(0,t.useId)(),T=(0,t.useRef)(null),E=(0,t.useRef)(null),D=o.find(e=>e.value===g),O=(0,t.useCallback)(()=>{if(!T.current)return;let e=T.current.getBoundingClientRect(),t=window.innerHeight-e.bottom,n=Math.min(o.length*44+8,260);S(t<n&&e.top>n)},[o.length]),k=(0,t.useCallback)(()=>{if(u)return;O(),v(!0);let e=o.findIndex(e=>e.value===g&&!e.disabled);b(e>=0?e:o.findIndex(e=>!e.disabled))},[u,O,o,g]),A=(0,t.useCallback)(()=>{v(!1),b(-1),T.current?.focus()},[]),j=(0,t.useCallback)(e=>{e.disabled||(p||h(e.value),l?.(e.value),A())},[p,l,A]);(0,t.useEffect)(()=>{!_||y<0||!E.current||E.current.children[y]?.scrollIntoView({block:`nearest`})},[y,_]),(0,t.useEffect)(()=>{if(!_)return;let e=e=>{!T.current?.contains(e.target)&&!E.current?.contains(e.target)&&A()};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[_,A]);let M=(0,t.useCallback)(e=>{switch(e.key){case`Enter`:case` `:case`ArrowDown`:e.preventDefault(),k();break;case`ArrowUp`:e.preventDefault(),O(),v(!0),b(o.reduce((e,t,n)=>t.disabled?e:n,-1));break}},[k,O,o]),N=(0,t.useCallback)(e=>{let t=o.map((e,t)=>({o:e,i:t})).filter(({o:e})=>!e.disabled).map(({i:e})=>e),n=t.indexOf(y);switch(e.key){case`ArrowDown`:{e.preventDefault();let r=t[Math.min(n+1,t.length-1)];b(r??y);break}case`ArrowUp`:{e.preventDefault();let r=t[Math.max(n-1,0)];b(r??y);break}case`Home`:e.preventDefault(),b(t[0]??-1);break;case`End`:e.preventDefault(),b(t[t.length-1]??-1);break;case`Enter`:case` `:e.preventDefault(),y>=0&&j(o[y]);break;case`Escape`:case`Tab`:A();break}},[o,y,j,A]);return(0,n.jsxs)(`div`,{className:[e.default.row,u?e.default.disabled:null,d].filter(Boolean).join(` `),...f,children:[a&&(0,n.jsx)(`span`,{className:e.default.leading,children:a}),(0,n.jsxs)(`span`,{className:e.default.content,children:[(0,n.jsx)(`span`,{className:e.default.title,children:r}),i&&(0,n.jsx)(`span`,{className:e.default.subtitle,children:i})]}),(0,n.jsxs)(`div`,{className:e.default.comboWrap,children:[(0,n.jsxs)(`button`,{ref:T,id:C,type:`button`,role:`combobox`,"aria-haspopup":`listbox`,"aria-expanded":_,"aria-controls":w,"aria-activedescendant":_&&y>=0?`${w}-opt-${y}`:void 0,disabled:u,className:[e.default.trigger,_?e.default.triggerOpen:null].filter(Boolean).join(` `),onClick:()=>_?A():k(),onKeyDown:M,children:[(0,n.jsx)(`span`,{className:[e.default.triggerLabel,D?null:e.default.placeholder].filter(Boolean).join(` `),children:D?.label??`—`}),(0,n.jsx)(`svg`,{className:[e.default.chevron,_?e.default.chevronOpen:null].filter(Boolean).join(` `),width:`16`,height:`16`,viewBox:`0 0 16 16`,"aria-hidden":`true`,focusable:`false`,children:(0,n.jsx)(`path`,{d:`M4 6l4 4 4-4`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})})]}),_&&(0,n.jsx)(`ul`,{ref:E,id:w,role:`listbox`,"aria-labelledby":C,tabIndex:-1,className:[e.default.list,x?e.default.listUp:e.default.listDown].filter(Boolean).join(` `),onKeyDown:N,children:o.map((t,r)=>(0,n.jsxs)(`li`,{id:`${w}-opt-${r}`,role:`option`,"aria-selected":t.value===g,"aria-disabled":t.disabled,className:[e.default.option,t.value===g?e.default.optionSelected:null,r===y?e.default.optionActive:null,t.disabled?e.default.optionDisabled:null].filter(Boolean).join(` `),onMouseEnter:()=>!t.disabled&&b(r),onClick:()=>j(t),children:[(0,n.jsx)(`span`,{className:e.default.optionLabel,children:t.label}),t.value===g&&(0,n.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,"aria-hidden":`true`,focusable:`false`,className:e.default.checkIcon,children:(0,n.jsx)(`path`,{d:`M3 8l4 4 6-6`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.75`,strokeLinecap:`round`,strokeLinejoin:`round`})})]},t.value))})]})]})}exports.ComboRow=r;
+//# sourceMappingURL=ComboRow.cjs.map

package/dist/components/ComboRow/ComboRow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboRow.cjs","names":[],"sources":["../../../src/components/ComboRow/ComboRow.tsx"],"sourcesContent":["import { useState, useRef, useId, useEffect, useCallback, type HTMLAttributes, type KeyboardEvent, type ReactNode } from \"react\";\nimport styles from \"./ComboRow.module.css\";\n\nexport interface ComboRowOption<V extends string = string> {\n  value: V;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface ComboRowProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /** The list of selectable options. */\n  options: ComboRowOption<V>[];\n  /** The currently selected value (controlled). */\n  value?: V;\n  /** Initial value when uncontrolled. */\n  defaultValue?: V;\n  /** Called when the user selects an option. */\n  onValueChange?: (value: V) => void;\n  /** Disables the row. */\n  disabled?: boolean;\n}\n\n/**\n * Settings row with an inline combo selector at the trailing edge.\n *\n * Mirrors `AdwComboRow` — a standard `ActionRow` layout with a dropdown\n * for choosing among a set of options. The dropdown opens inline in the row\n * and follows the same keyboard patterns as the standalone `Dropdown`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ComboRow.html\n */\nexport function ComboRow<V extends string = string>({\n  title,\n  subtitle,\n  leading,\n  options,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  disabled = false,\n  className,\n  ...props\n}: ComboRowProps<V>) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState<V | undefined>(defaultValue);\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-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  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 * 44 + 8, 260);\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: ComboRowOption<V>) => {\n      if (opt.disabled) return;\n      if (!isControlled) setUncontrolledValue(opt.value);\n      onValueChange?.(opt.value);\n      closeList();\n    },\n    [isControlled, onValueChange, closeList],\n  );\n\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  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  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((last, o, i) => (!o.disabled ? i : last), -1),\n          );\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\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      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.row, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\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      {/* Combo trigger button */}\n      <div className={styles.comboWrap}>\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 className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n            .filter(Boolean).join(\" \")}>\n            {selected?.label ?? \"—\"}\n          </span>\n          <svg\n            className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(\" \")}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            aria-hidden=\"true\"\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        </button>\n\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.optionLabel}>{opt.label}</span>\n                {opt.value === value && (\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\" className={styles.checkIcon}>\n                    <path\n                      d=\"M3 8l4 4 6-6\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.75\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                )}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/ComboRow/ComboRow.js

@@ -0,0 +1,197 @@
+import e from "./ComboRow.module.css.js";
+import { useCallback as t, useEffect as n, useId as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/ComboRow/ComboRow.tsx
+function c({ title: c, subtitle: l, leading: u, options: d, value: f, defaultValue: p, onValueChange: m, disabled: h = !1, className: g, ..._ }) {
+	let v = f !== void 0, [y, b] = a(p), x = v ? f : y, [S, C] = a(!1), [w, T] = a(-1), [E, D] = a(!1), O = r(), k = r(), A = i(null), j = i(null), M = d.find((e) => e.value === x), N = t(() => {
+		if (!A.current) return;
+		let e = A.current.getBoundingClientRect(), t = window.innerHeight - e.bottom, n = Math.min(d.length * 44 + 8, 260);
+		D(t < n && e.top > n);
+	}, [d.length]), P = t(() => {
+		if (h) return;
+		N(), C(!0);
+		let e = d.findIndex((e) => e.value === x && !e.disabled);
+		T(e >= 0 ? e : d.findIndex((e) => !e.disabled));
+	}, [
+		h,
+		N,
+		d,
+		x
+	]), F = t(() => {
+		C(!1), T(-1), A.current?.focus();
+	}, []), I = t((e) => {
+		e.disabled || (v || b(e.value), m?.(e.value), F());
+	}, [
+		v,
+		m,
+		F
+	]);
+	n(() => {
+		!S || w < 0 || !j.current || j.current.children[w]?.scrollIntoView({ block: "nearest" });
+	}, [w, S]), n(() => {
+		if (!S) return;
+		let e = (e) => {
+			!A.current?.contains(e.target) && !j.current?.contains(e.target) && F();
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [S, F]);
+	let L = t((e) => {
+		switch (e.key) {
+			case "Enter":
+			case " ":
+			case "ArrowDown":
+				e.preventDefault(), P();
+				break;
+			case "ArrowUp":
+				e.preventDefault(), N(), C(!0), T(d.reduce((e, t, n) => t.disabled ? e : n, -1));
+				break;
+		}
+	}, [
+		P,
+		N,
+		d
+	]), R = t((e) => {
+		let t = d.map((e, t) => ({
+			o: e,
+			i: t
+		})).filter(({ o: e }) => !e.disabled).map(({ i: e }) => e), n = t.indexOf(w);
+		switch (e.key) {
+			case "ArrowDown": {
+				e.preventDefault();
+				let r = t[Math.min(n + 1, t.length - 1)];
+				T(r ?? w);
+				break;
+			}
+			case "ArrowUp": {
+				e.preventDefault();
+				let r = t[Math.max(n - 1, 0)];
+				T(r ?? w);
+				break;
+			}
+			case "Home":
+				e.preventDefault(), T(t[0] ?? -1);
+				break;
+			case "End":
+				e.preventDefault(), T(t[t.length - 1] ?? -1);
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault(), w >= 0 && I(d[w]);
+				break;
+			case "Escape":
+			case "Tab":
+				F();
+				break;
+		}
+	}, [
+		d,
+		w,
+		I,
+		F
+	]);
+	return /* @__PURE__ */ s("div", {
+		className: [
+			e.row,
+			h ? e.disabled : null,
+			g
+		].filter(Boolean).join(" "),
+		..._,
+		children: [
+			u && /* @__PURE__ */ o("span", {
+				className: e.leading,
+				children: u
+			}),
+			/* @__PURE__ */ s("span", {
+				className: e.content,
+				children: [/* @__PURE__ */ o("span", {
+					className: e.title,
+					children: c
+				}), l && /* @__PURE__ */ o("span", {
+					className: e.subtitle,
+					children: l
+				})]
+			}),
+			/* @__PURE__ */ s("div", {
+				className: e.comboWrap,
+				children: [/* @__PURE__ */ s("button", {
+					ref: A,
+					id: O,
+					type: "button",
+					role: "combobox",
+					"aria-haspopup": "listbox",
+					"aria-expanded": S,
+					"aria-controls": k,
+					"aria-activedescendant": S && w >= 0 ? `${k}-opt-${w}` : void 0,
+					disabled: h,
+					className: [e.trigger, S ? e.triggerOpen : null].filter(Boolean).join(" "),
+					onClick: () => S ? F() : P(),
+					onKeyDown: L,
+					children: [/* @__PURE__ */ o("span", {
+						className: [e.triggerLabel, M ? null : e.placeholder].filter(Boolean).join(" "),
+						children: M?.label ?? "—"
+					}), /* @__PURE__ */ o("svg", {
+						className: [e.chevron, S ? e.chevronOpen : null].filter(Boolean).join(" "),
+						width: "16",
+						height: "16",
+						viewBox: "0 0 16 16",
+						"aria-hidden": "true",
+						focusable: "false",
+						children: /* @__PURE__ */ o("path", {
+							d: "M4 6l4 4 4-4",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "1.5",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})
+					})]
+				}), S && /* @__PURE__ */ o("ul", {
+					ref: j,
+					id: k,
+					role: "listbox",
+					"aria-labelledby": O,
+					tabIndex: -1,
+					className: [e.list, E ? e.listUp : e.listDown].filter(Boolean).join(" "),
+					onKeyDown: R,
+					children: d.map((t, n) => /* @__PURE__ */ s("li", {
+						id: `${k}-opt-${n}`,
+						role: "option",
+						"aria-selected": t.value === x,
+						"aria-disabled": t.disabled,
+						className: [
+							e.option,
+							t.value === x ? e.optionSelected : null,
+							n === w ? e.optionActive : null,
+							t.disabled ? e.optionDisabled : null
+						].filter(Boolean).join(" "),
+						onMouseEnter: () => !t.disabled && T(n),
+						onClick: () => I(t),
+						children: [/* @__PURE__ */ o("span", {
+							className: e.optionLabel,
+							children: t.label
+						}), t.value === x && /* @__PURE__ */ o("svg", {
+							width: "16",
+							height: "16",
+							viewBox: "0 0 16 16",
+							"aria-hidden": "true",
+							focusable: "false",
+							className: e.checkIcon,
+							children: /* @__PURE__ */ o("path", {
+								d: "M3 8l4 4 6-6",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "1.75",
+								strokeLinecap: "round",
+								strokeLinejoin: "round"
+							})
+						})]
+					}, t.value))
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { c as ComboRow };
+
+//# sourceMappingURL=ComboRow.js.map

package/dist/components/ComboRow/ComboRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboRow.js","names":[],"sources":["../../../src/components/ComboRow/ComboRow.tsx"],"sourcesContent":["import { useState, useRef, useId, useEffect, useCallback, type HTMLAttributes, type KeyboardEvent, type ReactNode } from \"react\";\nimport styles from \"./ComboRow.module.css\";\n\nexport interface ComboRowOption<V extends string = string> {\n  value: V;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface ComboRowProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /** The list of selectable options. */\n  options: ComboRowOption<V>[];\n  /** The currently selected value (controlled). */\n  value?: V;\n  /** Initial value when uncontrolled. */\n  defaultValue?: V;\n  /** Called when the user selects an option. */\n  onValueChange?: (value: V) => void;\n  /** Disables the row. */\n  disabled?: boolean;\n}\n\n/**\n * Settings row with an inline combo selector at the trailing edge.\n *\n * Mirrors `AdwComboRow` — a standard `ActionRow` layout with a dropdown\n * for choosing among a set of options. The dropdown opens inline in the row\n * and follows the same keyboard patterns as the standalone `Dropdown`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ComboRow.html\n */\nexport function ComboRow<V extends string = string>({\n  title,\n  subtitle,\n  leading,\n  options,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  disabled = false,\n  className,\n  ...props\n}: ComboRowProps<V>) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState<V | undefined>(defaultValue);\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-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  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 * 44 + 8, 260);\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: ComboRowOption<V>) => {\n      if (opt.disabled) return;\n      if (!isControlled) setUncontrolledValue(opt.value);\n      onValueChange?.(opt.value);\n      closeList();\n    },\n    [isControlled, onValueChange, closeList],\n  );\n\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  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  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((last, o, i) => (!o.disabled ? i : last), -1),\n          );\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\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      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.row, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\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      {/* Combo trigger button */}\n      <div className={styles.comboWrap}>\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 className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n            .filter(Boolean).join(\" \")}>\n            {selected?.label ?? \"—\"}\n          </span>\n          <svg\n            className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(\" \")}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            aria-hidden=\"true\"\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        </button>\n\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.optionLabel}>{opt.label}</span>\n                {opt.value === value && (\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\" className={styles.checkIcon}>\n                    <path\n                      d=\"M3 8l4 4 6-6\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.75\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                )}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+var e=`_row_46mn8_3`,t=`_disabled_46mn8_16`,n=`_leading_46mn8_23`,r=`_content_46mn8_32`,i=`_title_46mn8_40`,a=`_subtitle_46mn8_51`,o=`_comboWrap_46mn8_65`,s=`_trigger_46mn8_73`,c=`_triggerOpen_46mn8_126`,l=`_triggerLabel_46mn8_136`,u=`_placeholder_46mn8_144`,d=`_chevron_46mn8_150`,f=`_chevronOpen_46mn8_157`,p=`_list_46mn8_163`,m=`_listDown_46mn8_192`,h=`_listUp_46mn8_196`,g=`_option_46mn8_208`,_=`_optionActive_46mn8_225`,v=`_optionSelected_46mn8_229`,y=`_optionDisabled_46mn8_233`,b=`_optionLabel_46mn8_239`,x=`_checkIcon_46mn8_247`,S={row:e,disabled:t,leading:n,content:r,title:i,subtitle:a,comboWrap:o,trigger:s,triggerOpen:c,triggerLabel:l,placeholder:u,chevron:d,chevronOpen:f,list:p,"list-in":`_list-in_46mn8_1`,listDown:m,listUp:h,"list-in-up":`_list-in-up_46mn8_1`,option:g,optionActive:_,optionSelected:v,optionDisabled:y,optionLabel:b,checkIcon:x};exports.default=S;
+//# sourceMappingURL=ComboRow.module.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboRow.module.css.cjs","names":[],"sources":["../../../src/components/ComboRow/ComboRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: start;\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  pointer-events: none;\n}\n\n/* ─── Leading icon/avatar ───────────────────────────────────────────────────── */\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/* ─── Text content ──────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\n}\n\n.title {\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  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Combo wrapper ─────────────────────────────────────────────────────────── */\n\n.comboWrap {\n  position: relative;\n  flex-shrink: 0;\n  min-width: 120px;\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: 5px var(--gnome-space-2, 12px);\n  min-height: 32px;\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  white-space: nowrap;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\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 ───────────────────────────────────────────────────────────────── */\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) var(--gnome-easing-default);\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: 260px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n\n  animation: list-in var(--gnome-duration-fast) var(--gnome-easing-default) 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: 6px var(--gnome-space-2, 12px);\n  min-height: 36px;\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) var(--gnome-easing-default);\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.optionLabel {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\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/ComboRow/ComboRow.module.css.js

@@ -0,0 +1,31 @@
+//#region src/components/ComboRow/ComboRow.module.css
+var e = "_row_46mn8_3", t = "_disabled_46mn8_16", n = "_leading_46mn8_23", r = "_content_46mn8_32", i = "_title_46mn8_40", a = "_subtitle_46mn8_51", o = "_comboWrap_46mn8_65", s = "_trigger_46mn8_73", c = "_triggerOpen_46mn8_126", l = "_triggerLabel_46mn8_136", u = "_placeholder_46mn8_144", d = "_chevron_46mn8_150", f = "_chevronOpen_46mn8_157", p = "_list_46mn8_163", m = "_listDown_46mn8_192", h = "_listUp_46mn8_196", g = "_option_46mn8_208", _ = "_optionActive_46mn8_225", v = "_optionSelected_46mn8_229", y = "_optionDisabled_46mn8_233", b = "_optionLabel_46mn8_239", x = "_checkIcon_46mn8_247", S = {
+	row: e,
+	disabled: t,
+	leading: n,
+	content: r,
+	title: i,
+	subtitle: a,
+	comboWrap: o,
+	trigger: s,
+	triggerOpen: c,
+	triggerLabel: l,
+	placeholder: u,
+	chevron: d,
+	chevronOpen: f,
+	list: p,
+	"list-in": "_list-in_46mn8_1",
+	listDown: m,
+	listUp: h,
+	"list-in-up": "_list-in-up_46mn8_1",
+	option: g,
+	optionActive: _,
+	optionSelected: v,
+	optionDisabled: y,
+	optionLabel: b,
+	checkIcon: x
+};
+//#endregion
+export { S as default };
+
+//# sourceMappingURL=ComboRow.module.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboRow.module.css.js","names":[],"sources":["../../../src/components/ComboRow/ComboRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: start;\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  pointer-events: none;\n}\n\n/* ─── Leading icon/avatar ───────────────────────────────────────────────────── */\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/* ─── Text content ──────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\n}\n\n.title {\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  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Combo wrapper ─────────────────────────────────────────────────────────── */\n\n.comboWrap {\n  position: relative;\n  flex-shrink: 0;\n  min-width: 120px;\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: 5px var(--gnome-space-2, 12px);\n  min-height: 32px;\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  white-space: nowrap;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\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 ───────────────────────────────────────────────────────────────── */\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) var(--gnome-easing-default);\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: 260px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n\n  animation: list-in var(--gnome-duration-fast) var(--gnome-easing-default) 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: 6px var(--gnome-space-2, 12px);\n  min-height: 36px;\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) var(--gnome-easing-default);\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.optionLabel {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\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/ComboRow.cjs

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