@stisocial/ui 0.2.1 → 0.3.0

package/dist/components/TreeTable/TreeTable.css

@@ -0,0 +1,122 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-TreeTable-table-2554e {
+    --sti-tree-table-indent: 1.5rem;
+  }
+
+  .sti-TreeTable-table-2554e .sti-TreeTable-treeCell-92944 {
+    --sti-tree-level: var(--table-row-level, 1);
+    padding-inline-start: calc(var(--sti-datatable-px) +
+      (var(--sti-tree-level) - 1) *
+      var(--sti-tree-table-indent) -
+      var(--sti-space-1));
+  }
+
+  .sti-TreeTable-treeCell-92944[data-level="1"] {
+    --sti-tree-level: 1;
+  }
+
+  .sti-TreeTable-treeCell-92944[data-level="2"] {
+    --sti-tree-level: 2;
+  }
+
+  .sti-TreeTable-treeCell-92944[data-level="3"] {
+    --sti-tree-level: 3;
+  }
+
+  .sti-TreeTable-treeCell-92944[data-level="4"] {
+    --sti-tree-level: 4;
+  }
+
+  .sti-TreeTable-treeCell-92944[data-level="5"] {
+    --sti-tree-level: 5;
+  }
+
+  .sti-TreeTable-treeCell-92944[data-level="6"] {
+    --sti-tree-level: 6;
+  }
+
+  .sti-TreeTable-treeCell-92944[data-level="7"] {
+    --sti-tree-level: 7;
+  }
+
+  .sti-TreeTable-treeCell-92944[data-level="8"] {
+    --sti-tree-level: 8;
+  }
+
+  .sti-TreeTable-treeCell-92944[data-level="9"] {
+    --sti-tree-level: 9;
+  }
+
+  .sti-TreeTable-treeCell-92944[data-level="10"] {
+    --sti-tree-level: 10;
+  }
+
+  .sti-TreeTable-treeInner-52710 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-TreeTable-treeLabel-0c709 {
+    align-items: center;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-TreeTable-chevron-dd66a, .sti-TreeTable-leafSpacer-d2e01 {
+    inline-size: var(--sti-space-6);
+    block-size: var(--sti-space-6);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-TreeTable-chevron-dd66a {
+    border-radius: var(--sti-radius-sm);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-sm);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    outline: none;
+    padding: 0;
+  }
+
+  @media (hover: hover) {
+    .sti-TreeTable-chevron-dd66a[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+      color: var(--sti-fg);
+    }
+  }
+
+  .sti-TreeTable-chevron-dd66a[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-TreeTable-chevronIcon-db410 {
+    transition: rotate var(--sti-duration-fast) var(--sti-ease-out);
+  }
+
+  .sti-TreeTable-chevronIcon-db410:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+    rotate: 180deg;
+  }
+
+  .sti-TreeTable-treeCell-92944[data-expanded] .sti-TreeTable-chevronIcon-db410 {
+    rotate: 90deg;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-TreeTable-chevronIcon-db410 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-TreeTable-chevron-dd66a[data-focus-visible] {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/components/TreeTable/TreeTable.d.ts

@@ -0,0 +1,38 @@
+import { ScrollAreaMaxHeight } from "../ScrollArea/ScrollArea.js";
+import { DataTableSort } from "../DataTable/tableData.js";
+import { DataTableColumn } from "../DataTable/DataTable.js";
+import { ReactNode } from "react";
+export interface TreeTableProps<T> {
+  rows: readonly T[];
+  columns: readonly DataTableColumn<T>[];
+  getRowId: (row: T) => string;
+  /** Satırın alt satırları (yoksa yaprak). */
+  getChildren: (row: T) => readonly T[] | undefined;
+  /** Tablonun adı (zorunlu). */
+  label: string;
+  expandedKeys?: readonly string[];
+  defaultExpandedKeys?: readonly string[];
+  onExpandedChange?: (keys: string[]) => void;
+  /** Üstte "Tümünü genişlet" ve "Tümünü daralt" düğmeleri. */
+  showExpandAll?: boolean;
+  selectionMode?: "none" | "single" | "multiple";
+  selectedKeys?: readonly string[];
+  defaultSelectedKeys?: readonly string[];
+  onSelectionChange?: (keys: string[]) => void;
+  onRowAction?: (id: string) => void;
+  /** Sıralama her düzeyde kardeşler arasında uygulanır (ağaç yapısı korunur). */
+  sort?: DataTableSort | null;
+  defaultSort?: DataTableSort | null;
+  onSortChange?: (sort: DataTableSort | null) => void;
+  emptyState?: ReactNode;
+  size?: "sm" | "md" | "lg";
+  maxHeight?: ScrollAreaMaxHeight;
+  className?: string;
+  id?: string;
+}
+/**
+ * Ağaç tablo (APG Treegrid, React Aria Table): ağaç sütununda açma oku ve düzeye göre girinti,
+ * öteki sütunlarda değerler; → açar, ← kapatır ya da üst satıra çıkar. Sıralama her düzeyde
+ * kardeşler arasındadır. Bütçe kırılımı, klasör boyutları, kampanya → reklam grubu → reklam.
+ */
+export declare function TreeTable<T>({ rows, columns, getRowId, getChildren, label, expandedKeys, defaultExpandedKeys, onExpandedChange, showExpandAll, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, onRowAction, sort: sortProp, defaultSort, onSortChange, emptyState, size, maxHeight, className, id }: TreeTableProps<T>): import("react").JSX.Element;

package/dist/components/TreeTable/TreeTable.js

@@ -0,0 +1,226 @@
+"use client";
+import { useFormatter, useLocale, useMessages } from "../../provider/UIProvider.js";
+import { Button as Button$1 } from "../Button/Button.js";
+import { CheckIcon } from "../../icons/generated/CheckIcon.js";
+import { ChevronRightIcon } from "../../icons/generated/ChevronRightIcon.js";
+import { MinusIcon } from "../../icons/generated/MinusIcon.js";
+import { ScrollArea } from "../ScrollArea/ScrollArea.js";
+import { ArrowDownIcon } from "../../icons/generated/ArrowDownIcon.js";
+import { ArrowUpIcon } from "../../icons/generated/ArrowUpIcon.js";
+import { ChevronsUpDownIcon } from "../../icons/generated/ChevronsUpDownIcon.js";
+import DataTable_module_default from "../DataTable/DataTable.module.js";
+import { sortRows } from "../DataTable/tableData.js";
+import TreeTable_module_default from "./TreeTable.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Button, Cell, Checkbox, Collection, Column, Row, Table, TableBody, TableHeader } from "react-aria-components";
+// src/components/TreeTable/TreeTable.tsx
+/**
+* Ağaç tablo (APG Treegrid, React Aria Table): ağaç sütununda açma oku ve düzeye göre girinti,
+* öteki sütunlarda değerler; → açar, ← kapatır ya da üst satıra çıkar. Sıralama her düzeyde
+* kardeşler arasındadır. Bütçe kırılımı, klasör boyutları, kampanya → reklam grubu → reklam.
+*/
+function TreeTable({ rows, columns, getRowId, getChildren, label, expandedKeys, defaultExpandedKeys, onExpandedChange, showExpandAll = false, selectionMode = "none", selectedKeys, defaultSelectedKeys, onSelectionChange, onRowAction, sort: sortProp, defaultSort = null, onSortChange, emptyState, size = "md", maxHeight, className, id }) {
+	const t = useMessages();
+	const fmt = useFormatter();
+	const locale = useLocale();
+	const [innerExpanded, setInnerExpanded] = useState(() => new Set(defaultExpandedKeys ?? []));
+	const expanded = expandedKeys ? new Set(expandedKeys) : innerExpanded;
+	const [innerSort, setInnerSort] = useState(defaultSort);
+	const sort = sortProp !== void 0 ? sortProp : innerSort;
+	const treeColumnId = (columns.find((c) => c.isRowHeader) ?? columns[0])?.id;
+	const setExpanded = (next) => {
+		if (!expandedKeys) setInnerExpanded(next);
+		onExpandedChange?.([...next]);
+	};
+	const sorted = useMemo(() => {
+		const col = sort ? columns.find((c) => c.id === sort.column) : void 0;
+		const order = (list) => col?.value ? sortRows(list, col.value, sort?.direction ?? "ascending", locale) : list;
+		const walk = (list) => order(list).map((row) => {
+			const kids = getChildren(row);
+			return {
+				row,
+				id: getRowId(row),
+				children: kids?.length ? walk(kids) : void 0
+			};
+		});
+		return walk(rows);
+	}, [
+		rows,
+		columns,
+		sort,
+		locale,
+		getChildren,
+		getRowId
+	]);
+	const branchIds = useMemo(() => {
+		const out = [];
+		const walk = (list) => {
+			for (const n of list) if (n.children) {
+				out.push(n.id);
+				walk(n.children);
+			}
+		};
+		walk(sorted);
+		return out;
+	}, [sorted]);
+	const display = (c, row) => {
+		if (c.cell) return c.cell(row);
+		const v = c.value?.(row);
+		if (v === null || v === void 0 || v === "") return /* @__PURE__ */ jsx("span", {
+			className: DataTable_module_default.none,
+			children: "—"
+		});
+		if (v instanceof Date) return fmt.date(v);
+		if (typeof v === "number") return fmt.number(v);
+		if (typeof v === "boolean") return v ? t.dataTableYes : t.dataTableNo;
+		return v;
+	};
+	const renderNode = (n) => /* @__PURE__ */ jsxs(Row, {
+		id: n.id,
+		hasChildItems: Boolean(n.children),
+		className: DataTable_module_default.row,
+		children: [
+			selectionMode === "multiple" ? /* @__PURE__ */ jsx(Cell, {
+				className: DataTable_module_default.checkCell,
+				children: /* @__PURE__ */ jsx(Checkbox, {
+					slot: "selection",
+					className: DataTable_module_default.check,
+					children: ({ isSelected }) => /* @__PURE__ */ jsx("span", {
+						className: DataTable_module_default.box,
+						"aria-hidden": "true",
+						children: isSelected ? /* @__PURE__ */ jsx(CheckIcon, { className: DataTable_module_default.mark }) : null
+					})
+				})
+			}) : null,
+			columns.map((c) => /* @__PURE__ */ jsx(Cell, {
+				className: [DataTable_module_default.cell, c.id === treeColumnId ? TreeTable_module_default.treeCell : ""].join(" "),
+				"data-align": c.align ?? (c.isNumeric ? "end" : void 0),
+				"data-numeric": c.isNumeric ? "" : void 0,
+				"data-row-header": c.id === treeColumnId ? "" : void 0,
+				children: c.id === treeColumnId ? /* @__PURE__ */ jsxs("span", {
+					className: TreeTable_module_default.treeInner,
+					children: [n.children ? /* @__PURE__ */ jsx(Button, {
+						slot: "chevron",
+						className: TreeTable_module_default.chevron,
+						children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: TreeTable_module_default.chevronIcon })
+					}) : /* @__PURE__ */ jsx("span", {
+						className: TreeTable_module_default.leafSpacer,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", {
+						className: TreeTable_module_default.treeLabel,
+						children: display(c, n.row)
+					})]
+				}) : display(c, n.row)
+			}, c.id)),
+			n.children ? /* @__PURE__ */ jsx(Collection, {
+				items: n.children,
+				children: renderNode
+			}) : null
+		]
+	}, n.id);
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [DataTable_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		children: [showExpandAll && branchIds.length > 0 ? /* @__PURE__ */ jsx("div", {
+			className: DataTable_module_default.toolbar,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: DataTable_module_default.tools,
+				children: [/* @__PURE__ */ jsx(Button$1, {
+					variant: "secondary",
+					size: "sm",
+					onPress: () => setExpanded(new Set(branchIds)),
+					isDisabled: branchIds.every((k) => expanded.has(k)),
+					children: t.treeTableExpandAll
+				}), /* @__PURE__ */ jsx(Button$1, {
+					variant: "secondary",
+					size: "sm",
+					onPress: () => setExpanded(/* @__PURE__ */ new Set()),
+					isDisabled: expanded.size === 0,
+					children: t.treeTableCollapseAll
+				})]
+			})
+		}) : null, /* @__PURE__ */ jsx(ScrollArea, {
+			label,
+			orientation: maxHeight ? "both" : "horizontal",
+			maxHeight,
+			className: DataTable_module_default.scroll,
+			children: /* @__PURE__ */ jsxs(Table, {
+				"aria-label": label,
+				className: [DataTable_module_default.table, TreeTable_module_default.table].join(" "),
+				"data-size": size,
+				"data-sticky": maxHeight ? "" : void 0,
+				treeColumn: treeColumnId,
+				expandedKeys: expanded,
+				onExpandedChange: (keys) => setExpanded(new Set([...keys].map(String))),
+				selectionMode,
+				selectionBehavior: "toggle",
+				selectedKeys,
+				defaultSelectedKeys,
+				onSelectionChange: (keys) => onSelectionChange?.(keys === "all" ? allIds(sorted) : [...keys].map(String)),
+				sortDescriptor: sort ? {
+					column: sort.column,
+					direction: sort.direction
+				} : void 0,
+				onSortChange: (d) => {
+					const next = {
+						column: String(d.column),
+						direction: d.direction ?? "ascending"
+					};
+					if (sortProp === void 0) setInnerSort(next);
+					onSortChange?.(next);
+				},
+				onRowAction: onRowAction ? (key) => onRowAction(String(key)) : void 0,
+				children: [/* @__PURE__ */ jsxs(TableHeader, {
+					className: DataTable_module_default.head,
+					children: [selectionMode === "multiple" ? /* @__PURE__ */ jsx(Column, {
+						className: DataTable_module_default.checkColumn,
+						children: /* @__PURE__ */ jsx(Checkbox, {
+							slot: "selection",
+							className: DataTable_module_default.check,
+							children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsx("span", {
+								className: DataTable_module_default.box,
+								"aria-hidden": "true",
+								children: isIndeterminate ? /* @__PURE__ */ jsx(MinusIcon, { className: DataTable_module_default.mark }) : isSelected ? /* @__PURE__ */ jsx(CheckIcon, { className: DataTable_module_default.mark }) : null
+							})
+						})
+					}) : null, columns.map((c) => {
+						const sortable = c.allowsSorting ?? Boolean(c.value);
+						return /* @__PURE__ */ jsx(Column, {
+							id: c.id,
+							isRowHeader: c.id === treeColumnId,
+							allowsSorting: sortable,
+							className: DataTable_module_default.heading,
+							"data-align": c.align ?? (c.isNumeric ? "end" : void 0),
+							children: ({ sortDirection }) => /* @__PURE__ */ jsxs("span", {
+								className: DataTable_module_default.headingInner,
+								children: [/* @__PURE__ */ jsx("span", {
+									className: c.isHeaderHidden ? DataTable_module_default.hidden : void 0,
+									children: c.header
+								}), sortable ? /* @__PURE__ */ jsx("span", {
+									className: DataTable_module_default.sortIcon,
+									"data-active": sortDirection ? "" : void 0,
+									"aria-hidden": "true",
+									children: sortDirection === "ascending" ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : sortDirection === "descending" ? /* @__PURE__ */ jsx(ArrowDownIcon, {}) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, {})
+								}) : null]
+							})
+						}, c.id);
+					})]
+				}), /* @__PURE__ */ jsx(TableBody, {
+					className: DataTable_module_default.body,
+					items: sorted,
+					renderEmptyState: () => /* @__PURE__ */ jsx("div", {
+						className: DataTable_module_default.empty,
+						children: emptyState ?? t.listViewEmpty
+					}),
+					children: renderNode
+				})]
+			})
+		})]
+	});
+}
+function allIds(list) {
+	return list.flatMap((n) => [n.id, ...n.children ? allIds(n.children) : []]);
+}
+export { TreeTable };

package/dist/components/TreeTable/TreeTable.module.js

@@ -0,0 +1,12 @@
+import './TreeTable.css';
+// src/components/TreeTable/TreeTable.module.css
+var TreeTable_module_default = {
+	"table": "sti-TreeTable-table-2554e",
+	"treeCell": "sti-TreeTable-treeCell-92944",
+	"treeInner": "sti-TreeTable-treeInner-52710",
+	"treeLabel": "sti-TreeTable-treeLabel-0c709",
+	"chevron": "sti-TreeTable-chevron-dd66a",
+	"leafSpacer": "sti-TreeTable-leafSpacer-d2e01",
+	"chevronIcon": "sti-TreeTable-chevronIcon-db410"
+};
+export { TreeTable_module_default as default };

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

@@ -0,0 +1,2 @@
+import { TreeTable, TreeTableProps } from "./TreeTable.js";
+export { TreeTable, TreeTableProps };

package/dist/components/TreeView/TreeView.css

@@ -1,10 +1,10 @@
 @layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
 @layer sti.components {
-  .sti-TreeView-keys-7d559 {
+  .sti-TreeView-keys-5fc06 {
     display: contents;
   }
 
-  .sti-TreeView-root-64a03 {
+  .sti-TreeView-root-4df6d {
     align-content: start;
     gap: var(--sti-space-0-5);
     inline-size: 100%;
@@ -14,13 +14,13 @@
     display: grid;
   }
 
-  .sti-TreeView-root-64a03[data-focus-visible] {
+  .sti-TreeView-root-4df6d[data-focus-visible] {
     outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
     outline-offset: var(--sti-focus-ring-offset);
     border-radius: var(--sti-radius-md);
   }
 
-  .sti-TreeView-item-f6540 {
+  .sti-TreeView-item-3536c {
     border-radius: var(--sti-radius-md);
     color: var(--sti-fg);
     font-size: var(--sti-font-size-sm);
@@ -31,49 +31,101 @@
   }
 
   @media (hover: hover) {
-    .sti-TreeView-item-f6540[data-hovered]:not([data-selected], [data-disabled]) {
+    .sti-TreeView-item-3536c[data-hovered]:not([data-selected], [data-disabled]) {
       background: var(--sti-bg-surface-hover);
     }
   }
 
-  .sti-TreeView-item-f6540[data-focus-visible] {
+  .sti-TreeView-item-3536c[data-focus-visible] {
     outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
     outline-offset: calc(var(--sti-focus-ring-width) * -1);
   }
 
-  .sti-TreeView-item-f6540[data-selected] {
+  .sti-TreeView-item-3536c[data-selected] {
     background: var(--sti-bg-accent-subtle);
     color: var(--sti-fg-accent-strong);
   }
 
-  .sti-TreeView-item-f6540[data-selected] .sti-TreeView-label-e88eb {
+  .sti-TreeView-item-3536c[data-selected] .sti-TreeView-label-55a7a {
     font-weight: var(--sti-font-weight-semibold);
   }
 
-  .sti-TreeView-item-f6540[data-disabled] {
+  .sti-TreeView-item-3536c[data-disabled] {
     cursor: default;
   }
 
-  .sti-TreeView-item-f6540[data-disabled] .sti-TreeView-label-e88eb, .sti-TreeView-item-f6540[data-disabled] .sti-TreeView-icon-98cc2 {
+  .sti-TreeView-item-3536c[data-disabled] .sti-TreeView-label-55a7a, .sti-TreeView-item-3536c[data-disabled] .sti-TreeView-icon-e3c6f {
     opacity: var(--sti-opacity-disabled);
   }
 
-  .sti-TreeView-row-62108 {
+  .sti-TreeView-item-3536c {
+    --sti-tree-level: var(--tree-item-level, 1);
+  }
+
+  .sti-TreeView-item-3536c[data-level="1"] {
+    --sti-tree-level: 1;
+  }
+
+  .sti-TreeView-item-3536c[data-level="2"] {
+    --sti-tree-level: 2;
+  }
+
+  .sti-TreeView-item-3536c[data-level="3"] {
+    --sti-tree-level: 3;
+  }
+
+  .sti-TreeView-item-3536c[data-level="4"] {
+    --sti-tree-level: 4;
+  }
+
+  .sti-TreeView-item-3536c[data-level="5"] {
+    --sti-tree-level: 5;
+  }
+
+  .sti-TreeView-item-3536c[data-level="6"] {
+    --sti-tree-level: 6;
+  }
+
+  .sti-TreeView-item-3536c[data-level="7"] {
+    --sti-tree-level: 7;
+  }
+
+  .sti-TreeView-item-3536c[data-level="8"] {
+    --sti-tree-level: 8;
+  }
+
+  .sti-TreeView-item-3536c[data-level="9"] {
+    --sti-tree-level: 9;
+  }
+
+  .sti-TreeView-item-3536c[data-level="10"] {
+    --sti-tree-level: 10;
+  }
+
+  .sti-TreeView-item-3536c[data-level="11"] {
+    --sti-tree-level: 11;
+  }
+
+  .sti-TreeView-item-3536c[data-level="12"] {
+    --sti-tree-level: 12;
+  }
+
+  .sti-TreeView-row-1fb60 {
     align-items: center;
     gap: var(--sti-space-2);
     min-block-size: var(--sti-control-h-sm);
-    padding-inline-start: calc((var(--tree-item-level, 1) - 1) * 1.25rem + var(--sti-space-1));
+    padding-inline-start: calc((var(--sti-tree-level) - 1) * 1.25rem + var(--sti-space-1));
     padding-inline-end: var(--sti-space-2);
     display: flex;
   }
 
   @media (pointer: coarse) {
-    .sti-TreeView-row-62108 {
+    .sti-TreeView-row-1fb60 {
       min-block-size: var(--sti-control-h-md);
     }
   }
 
-  .sti-TreeView-chevron-97a97, .sti-TreeView-spacer-29b18 {
+  .sti-TreeView-chevron-f1432, .sti-TreeView-spacer-ca971 {
     flex: none;
     place-items: center;
     block-size: 1.5rem;
@@ -81,7 +133,7 @@
     display: inline-grid;
   }
 
-  .sti-TreeView-chevron-97a97 {
+  .sti-TreeView-chevron-f1432 {
     border-radius: var(--sti-radius-sm);
     color: var(--sti-fg-muted);
     font-size: var(--sti-icon-sm);
@@ -93,49 +145,49 @@
   }
 
   @media (hover: hover) {
-    .sti-TreeView-chevron-97a97[data-hovered] {
+    .sti-TreeView-chevron-f1432[data-hovered] {
       background: var(--sti-bg-surface-active);
       color: var(--sti-fg);
     }
   }
 
-  .sti-TreeView-chevron-97a97[data-expanded] {
+  .sti-TreeView-chevron-f1432[data-expanded] {
     rotate: 90deg;
   }
 
-  .sti-TreeView-chevron-97a97:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  .sti-TreeView-chevron-f1432:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
     rotate: 180deg;
   }
 
-  .sti-TreeView-chevron-97a97[data-expanded]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+  .sti-TreeView-chevron-f1432[data-expanded]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
     rotate: 90deg;
   }
 
-  .sti-TreeView-icon-98cc2 {
+  .sti-TreeView-icon-e3c6f {
     color: var(--sti-fg-muted);
     font-size: var(--sti-icon-sm);
     flex: none;
     display: inline-flex;
   }
 
-  .sti-TreeView-item-f6540[data-selected] .sti-TreeView-icon-98cc2 {
+  .sti-TreeView-item-3536c[data-selected] .sti-TreeView-icon-e3c6f {
     color: inherit;
   }
 
-  .sti-TreeView-label-e88eb {
+  .sti-TreeView-label-55a7a {
     overflow-wrap: anywhere;
     flex: auto;
     min-inline-size: 0;
   }
 
-  .sti-TreeView-meta-2e0e4 {
+  .sti-TreeView-meta-8d932 {
     color: var(--sti-fg-muted);
     font-size: var(--sti-font-size-xs);
     font-variant-numeric: tabular-nums;
     flex: none;
   }
 
-  .sti-TreeView-box-a209f {
+  .sti-TreeView-box-2a8da {
     border: var(--sti-border-width) solid var(--sti-border-control);
     border-radius: var(--sti-radius-xs);
     background: var(--sti-bg-canvas);
@@ -148,12 +200,12 @@
     display: inline-grid;
   }
 
-  .sti-TreeView-box-a209f[data-checked] {
+  .sti-TreeView-box-2a8da[data-checked], .sti-TreeView-box-2a8da[data-partial] {
     border-color: var(--sti-fg-accent);
     background: var(--sti-fill-accent);
   }
 
-  .sti-TreeView-empty-da3a0 {
+  .sti-TreeView-empty-44656 {
     padding: var(--sti-space-4);
     color: var(--sti-fg-muted);
     font-size: var(--sti-font-size-sm);
@@ -162,11 +214,11 @@
   }
 
   @media (forced-colors: active) {
-    .sti-TreeView-item-f6540[data-selected] {
+    .sti-TreeView-item-3536c[data-selected] {
       outline: var(--sti-border-width) solid Highlight;
     }
 
-    .sti-TreeView-box-a209f[data-checked] {
+    .sti-TreeView-box-2a8da[data-checked], .sti-TreeView-box-2a8da[data-partial] {
       background: highlight;
     }
   }