@nocoo/basalt 3.0.0 → 3.1.0

package/dist/components/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":["React","Table","props","cn","BASALT_UI_CLASS","className","TableHeader","TableBody","TableFooter","TableRow","variant","TableHead","TableCell","TableCaption"],"sources":["../../src/components/table.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport type TableProps = {\n\t/**\n\t * Additional classes for the table.\n\t */\n\tclassName?: string;\n};\n\nexport const Table = React.forwardRef<\n\tHTMLTableElement,\n\tTableProps & React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n\t<table\n\t\tref={ref}\n\t\tdata-basalt-table=\"\"\n\t\tclassName={cn(\n\t\t\tBASALT_UI_CLASS,\n\t\t\t\"w-full border-separate border-spacing-0 caption-bottom text-left text-basalt-code leading-[var(--basalt-line-body)] text-basalt-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTable.displayName = \"Table\";\n\nexport interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableHeader = (props: TableHeaderProps) => <thead {...props} />;\n\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableBody = (props: TableBodyProps) => <tbody {...props} />;\n\nexport interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableFooter = (props: TableFooterProps) => <tfoot {...props} />;\n\nexport type TableRowVariant = \"default\" | \"selected\";\n\nexport type TableRowProps = {\n\t/**\n\t * Highlight the row as selected.\n\t * @default \"default\"\n\t */\n\tvariant?: TableRowVariant;\n\t/**\n\t * Additional classes for the row.\n\t */\n\tclassName?: string;\n};\n\nexport const TableRow = ({\n\tclassName,\n\tvariant = \"default\",\n\t...props\n}: TableRowProps & React.HTMLAttributes<HTMLTableRowElement>) => (\n\t<tr\n\t\t{...props}\n\t\taria-selected={variant === \"selected\" ? true : props[\"aria-selected\"]}\n\t\tclassName={className}\n\t/>\n);\n\nexport type TableHeadProps = {\n\t/**\n\t * Additional classes for the header cell.\n\t */\n\tclassName?: string;\n};\n\nexport const TableHead = ({\n\tclassName,\n\t...props\n}: TableHeadProps & React.ThHTMLAttributes<HTMLTableCellElement>) => (\n\t<th\n\t\tclassName={cn(\n\t\t\t\"relative h-basalt-table-row whitespace-nowrap border-b border-basalt-border px-basalt-table-x py-basalt-table-y text-left align-middle text-basalt-sm font-medium text-basalt-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\nexport type TableCellProps = {\n\t/**\n\t * Additional classes for the cell.\n\t */\n\tclassName?: string;\n};\n\nexport const TableCell = ({\n\tclassName,\n\t...props\n}: TableCellProps & React.TdHTMLAttributes<HTMLTableCellElement>) => (\n\t<td\n\t\tclassName={cn(\n\t\t\t\"relative h-basalt-table-row px-basalt-table-x py-basalt-table-y align-middle\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\nexport type TableCaptionProps = {\n\t/**\n\t * Additional classes for the caption.\n\t */\n\tclassName?: string;\n};\n\nexport function TableCaption({\n\tclassName,\n\t...props\n}: TableCaptionProps & React.HTMLAttributes<HTMLTableCaptionElement>) {\n\treturn (\n\t\t<caption\n\t\t\tclassName={cn(\"mt-basalt-space-lg text-basalt-base text-basalt-muted-foreground\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AAWA,IAAaC,IAAQD,EAAM,YAGxB,EAAE,cAAW,GAAGE,KAAS,MAC3B,kBAAC,SAAD;CACM;CACL,qBAAkB;CAClB,WAAWC,EACVC,GACA,8IACAC,CACD;CACA,GAAIH;AACJ,CAAA,CACD;AACD,EAAM,cAAc;AAIpB,IAAaI,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAIJ,EAAQ,CAAA,GAI9DK,KAAa,MAA0B,kBAAC,SAAD,EAAO,GAAIL,EAAQ,CAAA,GAI1DM,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAIN,EAAQ,CAAA,GAgB9DO,KAAY,EACxB,cACA,aAAU,WACV,GAAGP,QAEH,kBAAC,MAAD;CACC,GAAIA;CACJ,iBAAeQ,MAAY,cAAoBR,EAAM;CAC1C;AACX,CAAA,GAUWS,KAAa,EACzB,cACA,GAAGT,QAEH,kBAAC,MAAD;CACC,WAAWC,EACV,kMACAE,CACD;CACA,GAAIH;AACJ,CAAA,GAUWU,KAAa,EACzB,cACA,GAAGV,QAEH,kBAAC,MAAD;CACC,WAAWC,EACV,gFACAE,CACD;CACA,GAAIH;AACJ,CAAA;AAUF,SAAgBW,EAAa,EAC5B,cACA,GAAGX,KACkE;CACrE,OACC,kBAAC,WAAD;EACC,WAAWC,EAAG,oEAAoEE,CAAS;EAC3F,GAAIH;CACJ,CAAA;AAEH"}
+{"version":3,"file":"table.js","names":["_Fragment","React","Fragment$1","Table","props","cn","BASALT_UI_CLASS","className","TableHeader","TableBody","TableFooter","TableRow","variant","textAlignClass","textAlign","TableHead","align","TableCell","TableCaption","SortIcon","sorted","ArrowUp","ArrowDown","ArrowUpDown","trailing","TableSortableHeader","label","icon"],"sources":["../../src/components/table.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, ArrowUpDown } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\n/** Logical inline alignment. Maps to CSS `text-align: start | end`. */\nexport type TableTextAlign = \"start\" | \"end\";\nexport type TableSortDirection = \"asc\" | \"desc\";\n\nexport type TableProps = {\n\t/**\n\t * Additional classes for the table.\n\t */\n\tclassName?: string;\n};\n\nexport const Table = React.forwardRef<\n\tHTMLTableElement,\n\tTableProps & React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n\t<table\n\t\tref={ref}\n\t\tdata-basalt-table=\"\"\n\t\tclassName={cn(\n\t\t\tBASALT_UI_CLASS,\n\t\t\t\"w-full border-separate border-spacing-0 caption-bottom text-start text-basalt-code leading-[var(--basalt-line-body)] text-basalt-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTable.displayName = \"Table\";\n\nexport interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableHeader = (props: TableHeaderProps) => <thead {...props} />;\n\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableBody = (props: TableBodyProps) => <tbody {...props} />;\n\nexport interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableFooter = (props: TableFooterProps) => <tfoot {...props} />;\n\nexport type TableRowVariant = \"default\" | \"selected\";\n\nexport type TableRowProps = {\n\t/**\n\t * Highlight the row as selected.\n\t * @default \"default\"\n\t */\n\tvariant?: TableRowVariant;\n\t/**\n\t * Additional classes for the row.\n\t */\n\tclassName?: string;\n};\n\nexport const TableRow = ({\n\tclassName,\n\tvariant = \"default\",\n\t...props\n}: TableRowProps & React.HTMLAttributes<HTMLTableRowElement>) => (\n\t<tr\n\t\t{...props}\n\t\taria-selected={variant === \"selected\" ? true : props[\"aria-selected\"]}\n\t\tclassName={className}\n\t/>\n);\n\nfunction textAlignClass(textAlign?: TableTextAlign) {\n\tif (textAlign === \"end\") return \"text-end tabular-nums\";\n\tif (textAlign === \"start\") return \"text-start\";\n}\n\nexport type TableHeadProps = {\n\t/**\n\t * Additional classes for the header cell.\n\t */\n\tclassName?: string;\n\t/**\n\t * Logical inline alignment. Omitted headers keep `text-start` unless native `align` is set.\n\t */\n\ttextAlign?: TableTextAlign;\n};\n\nexport const TableHead = ({\n\tclassName,\n\ttextAlign,\n\talign,\n\t...props\n}: TableHeadProps & React.ThHTMLAttributes<HTMLTableCellElement>) => (\n\t<th\n\t\tclassName={cn(\n\t\t\t\"relative h-basalt-table-row whitespace-nowrap border-b border-basalt-border ps-basalt-table-x pe-basalt-table-x py-basalt-table-y align-middle text-basalt-sm font-medium text-basalt-muted-foreground\",\n\t\t\ttextAlignClass(textAlign) ?? (align == null ? \"text-start\" : undefined),\n\t\t\tclassName,\n\t\t)}\n\t\talign={align}\n\t\t{...props}\n\t/>\n);\n\nexport type TableCellProps = {\n\t/**\n\t * Additional classes for the cell.\n\t */\n\tclassName?: string;\n\t/**\n\t * Logical inline alignment. Omitted cells inherit from the table or row. Native HTML `align` is unchanged.\n\t */\n\ttextAlign?: TableTextAlign;\n};\n\nexport const TableCell = ({\n\tclassName,\n\ttextAlign,\n\t...props\n}: TableCellProps & React.TdHTMLAttributes<HTMLTableCellElement>) => (\n\t<td\n\t\tclassName={cn(\n\t\t\t\"relative h-basalt-table-row ps-basalt-table-x pe-basalt-table-x py-basalt-table-y align-middle\",\n\t\t\ttextAlignClass(textAlign),\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\nexport type TableCaptionProps = {\n\t/**\n\t * Additional classes for the caption.\n\t */\n\tclassName?: string;\n};\n\nexport function TableCaption({\n\tclassName,\n\t...props\n}: TableCaptionProps & React.HTMLAttributes<HTMLTableCaptionElement>) {\n\treturn (\n\t\t<caption\n\t\t\tclassName={cn(\n\t\t\t\t\"px-basalt-panel-x py-basalt-panel-y text-basalt-base text-basalt-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type TableSortableHeaderProps = {\n\tchildren: React.ReactNode;\n\t/**\n\t * Logical control layout. `end` places the sort icon inward of the label.\n\t * @default \"start\"\n\t */\n\ttextAlign?: TableTextAlign;\n\t/**\n\t * Current sort direction when this column is sorted.\n\t */\n\tsorted?: TableSortDirection;\n\tclassName?: string;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\" | \"className\">;\n\nfunction SortIcon({ sorted, trailing }: { sorted?: TableSortDirection; trailing: boolean }) {\n\tconst Icon = sorted === \"asc\" ? ArrowUp : sorted === \"desc\" ? ArrowDown : ArrowUpDown;\n\treturn (\n\t\t<Icon\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn(\n\t\t\t\t\"size-basalt-icon-sm shrink-0\",\n\t\t\t\ttrailing && \"ms-auto\",\n\t\t\t\t!sorted &&\n\t\t\t\t\t\"opacity-0 transition-opacity basalt-motion group-hover:opacity-60 group-focus-visible:opacity-60 motion-reduce:transition-none\",\n\t\t\t)}\n\t\t\tstrokeWidth={1.5}\n\t\t/>\n\t);\n}\n\nexport const TableSortableHeader = React.forwardRef<HTMLButtonElement, TableSortableHeaderProps>(\n\t({ children, textAlign = \"start\", sorted, className, ...props }, ref) => {\n\t\tconst label = (\n\t\t\t<span className=\"flex min-w-0 items-center gap-basalt-control-gap truncate\">{children}</span>\n\t\t);\n\t\tconst icon = <SortIcon sorted={sorted} trailing={textAlign !== \"end\"} />;\n\t\treturn (\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"group flex w-full cursor-pointer items-center gap-basalt-control-gap rounded-basalt-sm border-0 bg-transparent p-0 font-inherit text-inherit font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-basalt-primary\",\n\t\t\t\t\ttextAlign === \"end\" ? \"justify-end text-end\" : \"text-start\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{textAlign === \"end\" ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon}\n\t\t\t\t\t\t{label}\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{label}\n\t\t\t\t\t\t{icon}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</button>\n\t\t);\n\t},\n);\nTableSortableHeader.displayName = \"TableSortableHeader\";\n"],"mappings":";;;;;;;AAgBA,IAAaG,IAAQF,EAAM,YAGxB,EAAE,cAAW,GAAGG,KAAS,MAC3B,kBAAC,SAAD;CACM;CACL,qBAAkB;CAClB,WAAWC,EACVC,GACA,+IACAC,CACD;CACA,GAAIH;AACJ,CAAA,CACD;AACD,EAAM,cAAc;AAIpB,IAAaI,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAIJ,EAAQ,CAAA,GAI9DK,KAAa,MAA0B,kBAAC,SAAD,EAAO,GAAIL,EAAQ,CAAA,GAI1DM,KAAe,MAA4B,kBAAC,SAAD,EAAO,GAAIN,EAAQ,CAAA,GAgB9DO,KAAY,EACxB,cACA,aAAU,WACV,GAAGP,QAEH,kBAAC,MAAD;CACC,GAAIA;CACJ,iBAAeQ,MAAY,cAAoBR,EAAM;CAC1C;AACX,CAAA;AAGF,SAASS,EAAe,GAA4B;CACnD,IAAIC,MAAc,OAAO,OAAO;CAChC,IAAIA,MAAc,SAAS,OAAO;AACnC;AAaA,IAAaC,KAAa,EACzB,cACA,cACA,UACA,GAAGX,QAEH,kBAAC,MAAD;CACC,WAAWC,EACV,0MACAQ,EAAeC,CAAS,MAAME,KAAS,OAAO,eAAe,KAAA,IAC7DT,CACD;CACO;CACP,GAAIH;AACJ,CAAA,GAcWa,KAAa,EACzB,cACA,cACA,GAAGb,QAEH,kBAAC,MAAD;CACC,WAAWC,EACV,kGACAQ,EAAeC,CAAS,GACxBP,CACD;CACA,GAAIH;AACJ,CAAA;AAUF,SAAgBc,EAAa,EAC5B,cACA,GAAGd,KACkE;CACrE,OACC,kBAAC,WAAD;EACC,WAAWC,EACV,qFACAE,CACD;EACA,GAAIH;CACJ,CAAA;AAEH;AAgBA,SAASe,EAAS,EAAE,WAAQ,eAAgE;CAE3F,OACC,kBAFYC,MAAW,QAAQC,IAAUD,MAAW,SAASE,IAAYC,GAEzE;EACC,eAAY;EACZ,WAAWlB,EACV,gCACAmB,KAAY,WACZ,CAACJ,KACA,gIACF;EACA,aAAa;CACb,CAAA;AAEH;AAEA,IAAaK,IAAsBxB,EAAM,YACvC,EAAE,aAAU,eAAY,SAAS,WAAQ,cAAW,GAAGG,KAAS,MAAQ;CACxE,IAAMsB,IACL,kBAAC,QAAD;EAAM,WAAU;EAA6D;CAAe,CAAA,GAEvFC,IAAO,kBAACR,GAAD;EAAkB;EAAQ,UAAUL,MAAc;CAAQ,CAAA;CACvE,OACC,kBAAC,UAAD;EACC,MAAK;EACA;EACL,WAAWT,EACV,wPACAS,MAAc,QAAQ,yBAAyB,cAC/CP,CACD;EACA,GAAIH;EAEH,UAAAU,MAAc,QACd,kBAAAd,GAAA,EAAA,UAAA,CACE2B,GACAD,CACA,EAAA,CAAA,IAEF,kBAAA1B,GAAA,EAAA,UAAA,CACE0B,GACAC,CACA,EAAA,CAAA;CAEI,CAAA;AAEV,CACD;AACA,EAAoB,cAAc"}

package/dist/styles/standalone.css

@@ -132,6 +132,7 @@
   --basalt-space-overlay: var(--basalt-space-lg);
   --basalt-space-panel-x: var(--basalt-space-card);
   --basalt-space-panel-y: var(--basalt-space-card-sm);
+  --basalt-space-table-edge: var(--basalt-space-panel-x);
   --basalt-space-content-gap: var(--basalt-space-lg);
   --basalt-space-row-x: var(--basalt-space-lg);
   --basalt-space-row-y: var(--basalt-space-md);
@@ -623,6 +624,7 @@
     border-radius: var(--basalt-radius-md);
     background: linear-gradient(90deg, var(--basalt-hover), var(--basalt-hover-end));
     opacity: 0;
+    transition: none;
   }
   .basalt-hover-list[data-hover-visible="true"]::before {
     opacity: 1;
@@ -1369,12 +1371,18 @@
   .my-basalt-layout-xl {
     margin-block: var(--basalt-space-layout-xl);
   }
+  .ms-auto {
+    margin-inline-start: auto;
+  }
   .mt-auto {
     margin-top: auto;
   }
   .mt-basalt-content-gap {
     margin-top: var(--basalt-space-content-gap);
   }
+  .mt-basalt-layout {
+    margin-top: var(--basalt-space-layout);
+  }
   .mt-basalt-space-lg {
     margin-top: var(--basalt-space-lg);
   }
@@ -1609,6 +1617,9 @@
   .min-h-\[calc\(1lh\+var\(--basalt-space-2\)\)\] {
     min-height: calc(1lh + var(--basalt-space-2));
   }
+  .min-h-\[calc\(var\(--basalt-line-row\)\+2\*var\(--basalt-space-lg\)\)\] {
+    min-height: calc(var(--basalt-line-row) + 2 * var(--basalt-space-lg));
+  }
   .min-h-basalt-action {
     min-height: var(--basalt-size-action);
   }
@@ -2609,9 +2620,6 @@
   .px-basalt-space-sm {
     padding-inline: var(--basalt-space-sm);
   }
-  .px-basalt-table-x {
-    padding-inline: var(--basalt-space-table-x);
-  }
   .py-basalt-card {
     padding-block: var(--basalt-space-card);
   }
@@ -2669,6 +2677,18 @@
   .py-basalt-table-y {
     padding-block: var(--basalt-space-table-y);
   }
+  .ps-basalt-table-edge {
+    padding-inline-start: var(--basalt-space-table-edge);
+  }
+  .ps-basalt-table-x {
+    padding-inline-start: var(--basalt-space-table-x);
+  }
+  .pe-basalt-table-edge {
+    padding-inline-end: var(--basalt-space-table-edge);
+  }
+  .pe-basalt-table-x {
+    padding-inline-end: var(--basalt-space-table-x);
+  }
   .pt-basalt-layout {
     padding-top: var(--basalt-space-layout);
   }
@@ -2717,12 +2737,18 @@
   .text-center {
     text-align: center;
   }
+  .text-end {
+    text-align: end;
+  }
   .text-left {
     text-align: left;
   }
   .text-right {
     text-align: right;
   }
+  .text-start {
+    text-align: start;
+  }
   .align-middle {
     vertical-align: middle;
   }
@@ -2768,10 +2794,6 @@
     font-size: var(--basalt-text-xs);
     line-height: var(--tw-leading, var(--basalt-leading-body));
   }
-  .leading-\[calc\(var\(--basalt-size-control\)-2\*var\(--basalt-space-lg\)\)\] {
-    --tw-leading: calc(var(--basalt-size-control) - 2 * var(--basalt-space-lg));
-    line-height: calc(var(--basalt-size-control) - 2 * var(--basalt-space-lg));
-  }
   .leading-\[var\(--basalt-leading-banner\)\] {
     --tw-leading: var(--basalt-leading-banner);
     line-height: var(--basalt-leading-banner);

package/dist/styles/tailwind.css

@@ -146,6 +146,7 @@
 	--spacing-basalt-field-gap: var(--basalt-space-field-gap);
 	--spacing-basalt-table-x: var(--basalt-space-table-x);
 	--spacing-basalt-table-y: var(--basalt-space-table-y);
+	--spacing-basalt-table-edge: var(--basalt-space-table-edge);
 	--spacing-basalt-overlay: var(--basalt-space-overlay);
 	--spacing-basalt-panel-x: var(--basalt-space-panel-x);
 	--spacing-basalt-panel-y: var(--basalt-space-panel-y);

package/dist/styles/tokens.css

@@ -110,6 +110,7 @@
 	--basalt-space-overlay: var(--basalt-space-lg);
 	--basalt-space-panel-x: var(--basalt-space-card);
 	--basalt-space-panel-y: var(--basalt-space-card-sm);
+	--basalt-space-table-edge: var(--basalt-space-panel-x);
 	--basalt-space-content-gap: var(--basalt-space-lg);
 	--basalt-space-row-x: var(--basalt-space-lg);
 	--basalt-space-row-y: var(--basalt-space-md);
@@ -616,6 +617,7 @@
 		border-radius: var(--basalt-radius-md);
 		background: linear-gradient(90deg, var(--basalt-hover), var(--basalt-hover-end));
 		opacity: 0;
+		transition: none;
 	}
 	.basalt-hover-list[data-hover-visible="true"]::before {
 		opacity: 1;

package/dist/utils/use-hover-highlight.js

@@ -6,53 +6,55 @@ var n = "[data-basalt-hover-item]", r = "[data-highlighted], [data-hover-active=
 function i(i, { restoreOnPointerLeave: a = !0 } = {}) {
 	return t((t) => {
 		if (e(i, t), !t) return;
-		let o = null, s = !1, c = null, l = null, u = null, d = null, f = !0, p = 0, m = "", h = !0, g = (e) => e && t.contains(e) && e.matches(n) && e.closest(".basalt-hover-list") === t && !e.closest("[hidden], [disabled], [aria-disabled=\"true\"], [data-disabled=\"\"], [data-disabled=\"true\"]") ? e : null, _ = (e) => g(e instanceof Element ? e.closest(n) : null), v = new ResizeObserver(() => {
-			h = !0, b();
-		}), y = () => {
-			if (p = 0, f) {
-				d = null, u = null;
-				for (let e of t.querySelectorAll(`${n}:is(${r})`)) if (g(e) && (u ||= e, e.matches("[data-highlighted], [data-hover-active=\"true\"]"))) {
-					d = e;
+		let o = null, s = !1, c = !1, l = null, u = null, d = null, f = null, p = !0, m = 0, h = "", g = !0, _ = (e) => e && t.contains(e) && e.matches(n) && e.closest(".basalt-hover-list") === t && !e.closest("[hidden], [disabled], [aria-disabled=\"true\"], [data-disabled=\"\"], [data-disabled=\"true\"]") ? e : null, v = (e) => _(e instanceof Element ? e.closest(n) : null), y = new ResizeObserver(() => {
+			g = !0, x();
+		}), b = () => {
+			if (m = 0, p) {
+				f = null, d = null;
+				for (let e of t.querySelectorAll(`${n}:is(${r})`)) if (_(e) && (d ||= e, e.matches("[data-highlighted], [data-hover-active=\"true\"]"))) {
+					f = e;
 					break;
 				}
-				f = !1;
+				p = !1;
 			}
-			let e = s ? null : g(d) ?? g(o) ?? g(c) ?? g(u);
-			if (e === l && !h) return;
-			e !== l && (l && v.unobserve(l), e && v.observe(e));
-			let i = e?.offsetWidth ?? 0, a = e?.offsetHeight ?? 0;
-			if (!e || !i || !a) {
-				s && (t.dataset.hoverAnimated = "true"), t.dataset.hoverVisible = "false", l = null, m = "", h = !1;
+			let e = c;
+			c = !1, e && (t.dataset.hoverAnimated = "false");
+			let i = s ? null : a ? _(f) ?? _(o) ?? _(l) ?? _(d) : _(o);
+			if (i === u && !g) return;
+			i !== u && (u && y.unobserve(u), i && y.observe(i));
+			let v = i?.offsetWidth ?? 0, b = i?.offsetHeight ?? 0;
+			if (!i || !v || !b) {
+				a || (t.dataset.hoverAnimated = "false"), t.dataset.hoverVisible = "false", u = null, h = "", g = !1;
 				return;
 			}
-			let _ = 0, y = 0;
-			for (let n = e; n && n !== t; n = n.offsetParent) _ += n.offsetLeft, y += n.offsetTop;
-			for (let n = e.parentElement; n && n !== t; n = n.parentElement) _ -= n.scrollLeft, y -= n.scrollTop;
-			let b = `${_},${y},${i},${a}`;
-			b !== m && (t.dataset.hoverAnimated = l && l !== e && !h ? "true" : "false", t.style.setProperty("--basalt-hover-x", `${_}px`), t.style.setProperty("--basalt-hover-y", `${y}px`), t.style.setProperty("--basalt-hover-width", `${i}px`), t.style.setProperty("--basalt-hover-height", `${a}px`), m = b), t.dataset.hoverVisible = "true", l = e, h = !1;
+			let x = 0, S = 0;
+			for (let e = i; e && e !== t; e = e.offsetParent) x += e.offsetLeft, S += e.offsetTop;
+			for (let e = i.parentElement; e && e !== t; e = e.parentElement) x -= e.scrollLeft, S -= e.scrollTop;
+			let C = `${x},${S},${v},${b}`;
+			C !== h && (t.dataset.hoverAnimated = u && u !== i && !g && !e ? "true" : "false", t.style.setProperty("--basalt-hover-x", `${x}px`), t.style.setProperty("--basalt-hover-y", `${S}px`), t.style.setProperty("--basalt-hover-width", `${v}px`), t.style.setProperty("--basalt-hover-height", `${b}px`), h = C), t.dataset.hoverVisible = "true", u = i, g = !1;
 		};
-		function b() {
-			p ||= requestAnimationFrame(y);
+		function x() {
+			m ||= requestAnimationFrame(b);
 		}
-		let x = (e) => {
+		let S = (e) => {
 			if (e.pointerType === "touch") return;
 			s = !1;
-			let t = _(e.target);
-			t !== o && (o = t, b());
-		}, S = () => {
-			o = null, s = !a, b();
-		}, C = (e) => {
-			s = !1, c = _(e.target), o = null, b();
+			let t = v(e.target);
+			t !== o && (!a && (!t || !o) && (c = !0), o = t, x());
+		}, C = () => {
+			o = null, s = !a, a || (c = !0), x();
 		}, w = (e) => {
-			c = _(e.relatedTarget), b();
+			l = v(e.target), a && (s = !1, o = null, x());
 		}, T = (e) => {
-			e.target instanceof Element && (t.contains(e.target) || t.id && e.target.getAttribute("aria-controls") === t.id) && (o = null, s = !1, b());
+			l = v(e.relatedTarget), a && x();
 		}, E = (e) => {
-			(e.target !== t || e.type === "scroll") && (h = !0, b());
-		}, D = new MutationObserver((e) => {
-			f = !0, e.some((e) => e.type === "childList" || e.attributeName === "hidden") && (h = !0), b();
+			e.target instanceof Element && (t.contains(e.target) || t.id && e.target.getAttribute("aria-controls") === t.id) && a && (o = null, s = !1, x());
+		}, D = (e) => {
+			(e.target !== t || e.type === "scroll") && (g = !0, x());
+		}, O = new MutationObserver((e) => {
+			p = !0, e.some((e) => e.type === "childList" || e.attributeName === "hidden") && (g = !0), x();
 		});
-		return D.observe(t, {
+		return O.observe(t, {
 			subtree: !0,
 			childList: !0,
 			attributes: !0,
@@ -69,8 +71,8 @@ function i(i, { restoreOnPointerLeave: a = !0 } = {}) {
 				"data-disabled",
 				"hidden"
 			]
-		}), v.observe(t), t.addEventListener("pointerover", x), t.addEventListener("pointerleave", S), t.addEventListener("focusin", C), t.addEventListener("focusout", w), t.ownerDocument.addEventListener("keydown", T), t.addEventListener("scroll", E, !0), t.addEventListener("animationend", E), t.addEventListener("transitionend", E), b(), () => {
-			cancelAnimationFrame(p), v.disconnect(), D.disconnect(), t.removeEventListener("pointerover", x), t.removeEventListener("pointerleave", S), t.removeEventListener("focusin", C), t.removeEventListener("focusout", w), t.ownerDocument.removeEventListener("keydown", T), t.removeEventListener("scroll", E, !0), t.removeEventListener("animationend", E), t.removeEventListener("transitionend", E), e(i, null);
+		}), y.observe(t), t.addEventListener("pointerover", S), t.addEventListener("pointerleave", C), t.addEventListener("focusin", w), t.addEventListener("focusout", T), t.ownerDocument.addEventListener("keydown", E), t.addEventListener("scroll", D, !0), t.addEventListener("animationend", D), t.addEventListener("transitionend", D), x(), () => {
+			cancelAnimationFrame(m), y.disconnect(), O.disconnect(), t.removeEventListener("pointerover", S), t.removeEventListener("pointerleave", C), t.removeEventListener("focusin", w), t.removeEventListener("focusout", T), t.ownerDocument.removeEventListener("keydown", E), t.removeEventListener("scroll", D, !0), t.removeEventListener("animationend", D), t.removeEventListener("transitionend", D), e(i, null);
 		};
 	}, [i, a]);
 }

package/dist/utils/use-hover-highlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-hover-highlight.js","names":["ROW","ACTIVE","useHoverHighlight","useCallback","assignRef","ref","root","hovered","pointerExited","focused","previous","selected","active","selectionDirty","frame","geometry","layoutChanged","eligible","node","row","target","resize","schedule","update","item","width","height","x","next","over","event","leave","restoreOnPointerLeave","focus","blur","keyboard","layout","mutations","records","record"],"sources":["../../src/utils/use-hover-highlight.ts"],"sourcesContent":["import { type Ref, useCallback } from \"react\";\nimport { assignRef } from \"./selection-indicator\";\n\nconst ROW = \"[data-basalt-hover-item]\";\nconst ACTIVE =\n\t'[data-highlighted], [data-hover-active=\"true\"], [aria-selected=\"true\"], [data-state=\"checked\"], [data-hover-selected=\"true\"], [data-selected=\"true\"]';\n\nexport function useHoverHighlight(\n\tref?: Ref<HTMLElement | null>,\n\t{ restoreOnPointerLeave = true }: { restoreOnPointerLeave?: boolean } = {},\n) {\n\treturn useCallback(\n\t\t(root: HTMLElement | null) => {\n\t\t\tassignRef(ref, root);\n\t\t\tif (!root) return;\n\t\t\tlet hovered: HTMLElement | null = null;\n\t\t\tlet pointerExited = false;\n\t\t\tlet focused: HTMLElement | null = null;\n\t\t\tlet previous: HTMLElement | null = null;\n\t\t\tlet selected: HTMLElement | null = null;\n\t\t\tlet active: HTMLElement | null = null;\n\t\t\tlet selectionDirty = true;\n\t\t\tlet frame = 0;\n\t\t\tlet geometry = \"\";\n\t\t\tlet layoutChanged = true;\n\t\t\tconst eligible = (node: HTMLElement | null) =>\n\t\t\t\tnode &&\n\t\t\t\troot.contains(node) &&\n\t\t\t\tnode.matches(ROW) &&\n\t\t\t\tnode.closest(\".basalt-hover-list\") === root &&\n\t\t\t\t!node.closest(\n\t\t\t\t\t'[hidden], [disabled], [aria-disabled=\"true\"], [data-disabled=\"\"], [data-disabled=\"true\"]',\n\t\t\t\t)\n\t\t\t\t\t? node\n\t\t\t\t\t: null;\n\t\t\tconst row = (target: EventTarget | null) =>\n\t\t\t\teligible(target instanceof Element ? target.closest<HTMLElement>(ROW) : null);\n\t\t\tconst resize = new ResizeObserver(() => {\n\t\t\t\tlayoutChanged = true;\n\t\t\t\tschedule();\n\t\t\t});\n\t\t\tconst update = () => {\n\t\t\t\tframe = 0;\n\t\t\t\tif (selectionDirty) {\n\t\t\t\t\tactive = null;\n\t\t\t\t\tselected = null;\n\t\t\t\t\tfor (const node of root.querySelectorAll<HTMLElement>(`${ROW}:is(${ACTIVE})`)) {\n\t\t\t\t\t\tif (!eligible(node)) continue;\n\t\t\t\t\t\tif (!selected) selected = node;\n\t\t\t\t\t\tif (node.matches('[data-highlighted], [data-hover-active=\"true\"]')) {\n\t\t\t\t\t\t\tactive = node;\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tselectionDirty = false;\n\t\t\t\t}\n\t\t\t\tconst item = pointerExited\n\t\t\t\t\t? null\n\t\t\t\t\t: (eligible(active) ?? eligible(hovered) ?? eligible(focused) ?? eligible(selected));\n\t\t\t\tif (item === previous && !layoutChanged) return;\n\t\t\t\tif (item !== previous) {\n\t\t\t\t\tif (previous) resize.unobserve(previous);\n\t\t\t\t\tif (item) resize.observe(item);\n\t\t\t\t}\n\t\t\t\tconst width = item?.offsetWidth ?? 0;\n\t\t\t\tconst height = item?.offsetHeight ?? 0;\n\t\t\t\tif (!item || !width || !height) {\n\t\t\t\t\tif (pointerExited) root.dataset.hoverAnimated = \"true\";\n\t\t\t\t\troot.dataset.hoverVisible = \"false\";\n\t\t\t\t\tprevious = null;\n\t\t\t\t\tgeometry = \"\";\n\t\t\t\t\tlayoutChanged = false;\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tlet x = 0,\n\t\t\t\t\ty = 0;\n\t\t\t\tfor (\n\t\t\t\t\tlet node: HTMLElement | null = item;\n\t\t\t\t\tnode && node !== root;\n\t\t\t\t\tnode = node.offsetParent as HTMLElement | null\n\t\t\t\t) {\n\t\t\t\t\tx += node.offsetLeft;\n\t\t\t\t\ty += node.offsetTop;\n\t\t\t\t}\n\t\t\t\tfor (let node = item.parentElement; node && node !== root; node = node.parentElement) {\n\t\t\t\t\tx -= node.scrollLeft;\n\t\t\t\t\ty -= node.scrollTop;\n\t\t\t\t}\n\t\t\t\tconst next = `${x},${y},${width},${height}`;\n\t\t\t\tif (next !== geometry) {\n\t\t\t\t\troot.dataset.hoverAnimated =\n\t\t\t\t\t\tprevious && previous !== item && !layoutChanged ? \"true\" : \"false\";\n\t\t\t\t\troot.style.setProperty(\"--basalt-hover-x\", `${x}px`);\n\t\t\t\t\troot.style.setProperty(\"--basalt-hover-y\", `${y}px`);\n\t\t\t\t\troot.style.setProperty(\"--basalt-hover-width\", `${width}px`);\n\t\t\t\t\troot.style.setProperty(\"--basalt-hover-height\", `${height}px`);\n\t\t\t\t\tgeometry = next;\n\t\t\t\t}\n\t\t\t\troot.dataset.hoverVisible = \"true\";\n\t\t\t\tprevious = item;\n\t\t\t\tlayoutChanged = false;\n\t\t\t};\n\t\t\tfunction schedule() {\n\t\t\t\tif (!frame) frame = requestAnimationFrame(update);\n\t\t\t}\n\t\t\tconst over = (event: PointerEvent) => {\n\t\t\t\tif (event.pointerType === \"touch\") return;\n\t\t\t\tpointerExited = false;\n\t\t\t\tconst next = row(event.target);\n\t\t\t\tif (next !== hovered) {\n\t\t\t\t\thovered = next;\n\t\t\t\t\tschedule();\n\t\t\t\t}\n\t\t\t};\n\t\t\tconst leave = () => {\n\t\t\t\thovered = null;\n\t\t\t\tpointerExited = !restoreOnPointerLeave;\n\t\t\t\tschedule();\n\t\t\t};\n\t\t\tconst focus = (event: FocusEvent) => {\n\t\t\t\tpointerExited = false;\n\t\t\t\tfocused = row(event.target);\n\t\t\t\thovered = null;\n\t\t\t\tschedule();\n\t\t\t};\n\t\t\tconst blur = (event: FocusEvent) => {\n\t\t\t\tfocused = row(event.relatedTarget);\n\t\t\t\tschedule();\n\t\t\t};\n\t\t\tconst keyboard = (event: KeyboardEvent) => {\n\t\t\t\tif (\n\t\t\t\t\t!(event.target instanceof Element) ||\n\t\t\t\t\t(!root.contains(event.target) &&\n\t\t\t\t\t\t(!root.id || event.target.getAttribute(\"aria-controls\") !== root.id))\n\t\t\t\t)\n\t\t\t\t\treturn;\n\t\t\t\thovered = null;\n\t\t\t\tpointerExited = false;\n\t\t\t\tschedule();\n\t\t\t};\n\t\t\tconst layout = (event: Event) => {\n\t\t\t\t// Our pseudo-element transition cannot change row geometry.\n\t\t\t\tif (event.target === root && event.type !== \"scroll\") return;\n\t\t\t\tlayoutChanged = true;\n\t\t\t\tschedule();\n\t\t\t};\n\t\t\tconst mutations = new MutationObserver((records) => {\n\t\t\t\tselectionDirty = true;\n\t\t\t\tif (\n\t\t\t\t\trecords.some((record) => record.type === \"childList\" || record.attributeName === \"hidden\")\n\t\t\t\t)\n\t\t\t\t\tlayoutChanged = true;\n\t\t\t\tschedule();\n\t\t\t});\n\t\t\tmutations.observe(root, {\n\t\t\t\tsubtree: true,\n\t\t\t\tchildList: true,\n\t\t\t\tattributes: true,\n\t\t\t\tattributeFilter: [\n\t\t\t\t\t\"data-basalt-hover-item\",\n\t\t\t\t\t\"data-highlighted\",\n\t\t\t\t\t\"data-state\",\n\t\t\t\t\t\"aria-selected\",\n\t\t\t\t\t\"data-selected\",\n\t\t\t\t\t\"data-hover-active\",\n\t\t\t\t\t\"data-hover-selected\",\n\t\t\t\t\t\"disabled\",\n\t\t\t\t\t\"aria-disabled\",\n\t\t\t\t\t\"data-disabled\",\n\t\t\t\t\t\"hidden\",\n\t\t\t\t],\n\t\t\t});\n\t\t\tresize.observe(root);\n\t\t\troot.addEventListener(\"pointerover\", over);\n\t\t\troot.addEventListener(\"pointerleave\", leave);\n\t\t\troot.addEventListener(\"focusin\", focus);\n\t\t\troot.addEventListener(\"focusout\", blur);\n\t\t\troot.ownerDocument.addEventListener(\"keydown\", keyboard);\n\t\t\troot.addEventListener(\"scroll\", layout, true);\n\t\t\troot.addEventListener(\"animationend\", layout);\n\t\t\troot.addEventListener(\"transitionend\", layout);\n\t\t\tschedule();\n\t\t\treturn () => {\n\t\t\t\tcancelAnimationFrame(frame);\n\t\t\t\tresize.disconnect();\n\t\t\t\tmutations.disconnect();\n\t\t\t\troot.removeEventListener(\"pointerover\", over);\n\t\t\t\troot.removeEventListener(\"pointerleave\", leave);\n\t\t\t\troot.removeEventListener(\"focusin\", focus);\n\t\t\t\troot.removeEventListener(\"focusout\", blur);\n\t\t\t\troot.ownerDocument.removeEventListener(\"keydown\", keyboard);\n\t\t\t\troot.removeEventListener(\"scroll\", layout, true);\n\t\t\t\troot.removeEventListener(\"animationend\", layout);\n\t\t\t\troot.removeEventListener(\"transitionend\", layout);\n\t\t\t\tassignRef(ref, null);\n\t\t\t};\n\t\t},\n\t\t[ref, restoreOnPointerLeave],\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-hover-highlight.js","names":["ROW","ACTIVE","useHoverHighlight","useCallback","assignRef","ref","root","hovered","pointerExited","sequenceBroken","focused","previous","selected","active","selectionDirty","frame","geometry","layoutChanged","eligible","node","row","target","resize","schedule","update","broken","item","restoreOnPointerLeave","width","height","y","next","over","event","leave","focus","blur","keyboard","layout","mutations","records","record"],"sources":["../../src/utils/use-hover-highlight.ts"],"sourcesContent":["import { type Ref, useCallback } from \"react\";\nimport { assignRef } from \"./selection-indicator\";\n\nconst ROW = \"[data-basalt-hover-item]\";\nconst ACTIVE =\n\t'[data-highlighted], [data-hover-active=\"true\"], [aria-selected=\"true\"], [data-state=\"checked\"], [data-hover-selected=\"true\"], [data-selected=\"true\"]';\n\nexport function useHoverHighlight(\n\tref?: Ref<HTMLElement | null>,\n\t{ restoreOnPointerLeave = true }: { restoreOnPointerLeave?: boolean } = {},\n) {\n\treturn useCallback(\n\t\t(root: HTMLElement | null) => {\n\t\t\tassignRef(ref, root);\n\t\t\tif (!root) return;\n\t\t\tlet hovered: HTMLElement | null = null;\n\t\t\tlet pointerExited = false;\n\t\t\tlet sequenceBroken = false;\n\t\t\tlet focused: HTMLElement | null = null;\n\t\t\tlet previous: HTMLElement | null = null;\n\t\t\tlet selected: HTMLElement | null = null;\n\t\t\tlet active: HTMLElement | null = null;\n\t\t\tlet selectionDirty = true;\n\t\t\tlet frame = 0;\n\t\t\tlet geometry = \"\";\n\t\t\tlet layoutChanged = true;\n\t\t\tconst eligible = (node: HTMLElement | null) =>\n\t\t\t\tnode &&\n\t\t\t\troot.contains(node) &&\n\t\t\t\tnode.matches(ROW) &&\n\t\t\t\tnode.closest(\".basalt-hover-list\") === root &&\n\t\t\t\t!node.closest(\n\t\t\t\t\t'[hidden], [disabled], [aria-disabled=\"true\"], [data-disabled=\"\"], [data-disabled=\"true\"]',\n\t\t\t\t)\n\t\t\t\t\t? node\n\t\t\t\t\t: null;\n\t\t\tconst row = (target: EventTarget | null) =>\n\t\t\t\teligible(target instanceof Element ? target.closest<HTMLElement>(ROW) : null);\n\t\t\tconst resize = new ResizeObserver(() => {\n\t\t\t\tlayoutChanged = true;\n\t\t\t\tschedule();\n\t\t\t});\n\t\t\tconst update = () => {\n\t\t\t\tframe = 0;\n\t\t\t\tif (selectionDirty) {\n\t\t\t\t\tactive = null;\n\t\t\t\t\tselected = null;\n\t\t\t\t\tfor (const node of root.querySelectorAll<HTMLElement>(`${ROW}:is(${ACTIVE})`)) {\n\t\t\t\t\t\tif (!eligible(node)) continue;\n\t\t\t\t\t\tif (!selected) selected = node;\n\t\t\t\t\t\tif (node.matches('[data-highlighted], [data-hover-active=\"true\"]')) {\n\t\t\t\t\t\t\tactive = node;\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tselectionDirty = false;\n\t\t\t\t}\n\t\t\t\tconst broken = sequenceBroken;\n\t\t\t\tsequenceBroken = false;\n\t\t\t\tif (broken) root.dataset.hoverAnimated = \"false\";\n\t\t\t\tconst item = pointerExited\n\t\t\t\t\t? null\n\t\t\t\t\t: restoreOnPointerLeave\n\t\t\t\t\t\t? (eligible(active) ?? eligible(hovered) ?? eligible(focused) ?? eligible(selected))\n\t\t\t\t\t\t: eligible(hovered);\n\t\t\t\tif (item === previous && !layoutChanged) return;\n\t\t\t\tif (item !== previous) {\n\t\t\t\t\tif (previous) resize.unobserve(previous);\n\t\t\t\t\tif (item) resize.observe(item);\n\t\t\t\t}\n\t\t\t\tconst width = item?.offsetWidth ?? 0;\n\t\t\t\tconst height = item?.offsetHeight ?? 0;\n\t\t\t\tif (!item || !width || !height) {\n\t\t\t\t\tif (!restoreOnPointerLeave) root.dataset.hoverAnimated = \"false\";\n\t\t\t\t\troot.dataset.hoverVisible = \"false\";\n\t\t\t\t\tprevious = null;\n\t\t\t\t\tgeometry = \"\";\n\t\t\t\t\tlayoutChanged = false;\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tlet x = 0,\n\t\t\t\t\ty = 0;\n\t\t\t\tfor (\n\t\t\t\t\tlet node: HTMLElement | null = item;\n\t\t\t\t\tnode && node !== root;\n\t\t\t\t\tnode = node.offsetParent as HTMLElement | null\n\t\t\t\t) {\n\t\t\t\t\tx += node.offsetLeft;\n\t\t\t\t\ty += node.offsetTop;\n\t\t\t\t}\n\t\t\t\tfor (let node = item.parentElement; node && node !== root; node = node.parentElement) {\n\t\t\t\t\tx -= node.scrollLeft;\n\t\t\t\t\ty -= node.scrollTop;\n\t\t\t\t}\n\t\t\t\tconst next = `${x},${y},${width},${height}`;\n\t\t\t\tif (next !== geometry) {\n\t\t\t\t\troot.dataset.hoverAnimated =\n\t\t\t\t\t\tprevious && previous !== item && !layoutChanged && !broken ? \"true\" : \"false\";\n\t\t\t\t\troot.style.setProperty(\"--basalt-hover-x\", `${x}px`);\n\t\t\t\t\troot.style.setProperty(\"--basalt-hover-y\", `${y}px`);\n\t\t\t\t\troot.style.setProperty(\"--basalt-hover-width\", `${width}px`);\n\t\t\t\t\troot.style.setProperty(\"--basalt-hover-height\", `${height}px`);\n\t\t\t\t\tgeometry = next;\n\t\t\t\t}\n\t\t\t\troot.dataset.hoverVisible = \"true\";\n\t\t\t\tprevious = item;\n\t\t\t\tlayoutChanged = false;\n\t\t\t};\n\t\t\tfunction schedule() {\n\t\t\t\tif (!frame) frame = requestAnimationFrame(update);\n\t\t\t}\n\t\t\tconst over = (event: PointerEvent) => {\n\t\t\t\tif (event.pointerType === \"touch\") return;\n\t\t\t\tpointerExited = false;\n\t\t\t\tconst next = row(event.target);\n\t\t\t\tif (next !== hovered) {\n\t\t\t\t\tif (!restoreOnPointerLeave && (!next || !hovered)) sequenceBroken = true;\n\t\t\t\t\thovered = next;\n\t\t\t\t\tschedule();\n\t\t\t\t}\n\t\t\t};\n\t\t\tconst leave = () => {\n\t\t\t\thovered = null;\n\t\t\t\tpointerExited = !restoreOnPointerLeave;\n\t\t\t\tif (!restoreOnPointerLeave) sequenceBroken = true;\n\t\t\t\tschedule();\n\t\t\t};\n\t\t\tconst focus = (event: FocusEvent) => {\n\t\t\t\tfocused = row(event.target);\n\t\t\t\tif (!restoreOnPointerLeave) return;\n\t\t\t\tpointerExited = false;\n\t\t\t\thovered = null;\n\t\t\t\tschedule();\n\t\t\t};\n\t\t\tconst blur = (event: FocusEvent) => {\n\t\t\t\tfocused = row(event.relatedTarget);\n\t\t\t\tif (!restoreOnPointerLeave) return;\n\t\t\t\tschedule();\n\t\t\t};\n\t\t\tconst keyboard = (event: KeyboardEvent) => {\n\t\t\t\tif (\n\t\t\t\t\t!(event.target instanceof Element) ||\n\t\t\t\t\t(!root.contains(event.target) &&\n\t\t\t\t\t\t(!root.id || event.target.getAttribute(\"aria-controls\") !== root.id))\n\t\t\t\t)\n\t\t\t\t\treturn;\n\t\t\t\tif (!restoreOnPointerLeave) return;\n\t\t\t\thovered = null;\n\t\t\t\tpointerExited = false;\n\t\t\t\tschedule();\n\t\t\t};\n\t\t\tconst layout = (event: Event) => {\n\t\t\t\t// Our pseudo-element transition cannot change row geometry.\n\t\t\t\tif (event.target === root && event.type !== \"scroll\") return;\n\t\t\t\tlayoutChanged = true;\n\t\t\t\tschedule();\n\t\t\t};\n\t\t\tconst mutations = new MutationObserver((records) => {\n\t\t\t\tselectionDirty = true;\n\t\t\t\tif (\n\t\t\t\t\trecords.some((record) => record.type === \"childList\" || record.attributeName === \"hidden\")\n\t\t\t\t)\n\t\t\t\t\tlayoutChanged = true;\n\t\t\t\tschedule();\n\t\t\t});\n\t\t\tmutations.observe(root, {\n\t\t\t\tsubtree: true,\n\t\t\t\tchildList: true,\n\t\t\t\tattributes: true,\n\t\t\t\tattributeFilter: [\n\t\t\t\t\t\"data-basalt-hover-item\",\n\t\t\t\t\t\"data-highlighted\",\n\t\t\t\t\t\"data-state\",\n\t\t\t\t\t\"aria-selected\",\n\t\t\t\t\t\"data-selected\",\n\t\t\t\t\t\"data-hover-active\",\n\t\t\t\t\t\"data-hover-selected\",\n\t\t\t\t\t\"disabled\",\n\t\t\t\t\t\"aria-disabled\",\n\t\t\t\t\t\"data-disabled\",\n\t\t\t\t\t\"hidden\",\n\t\t\t\t],\n\t\t\t});\n\t\t\tresize.observe(root);\n\t\t\troot.addEventListener(\"pointerover\", over);\n\t\t\troot.addEventListener(\"pointerleave\", leave);\n\t\t\troot.addEventListener(\"focusin\", focus);\n\t\t\troot.addEventListener(\"focusout\", blur);\n\t\t\troot.ownerDocument.addEventListener(\"keydown\", keyboard);\n\t\t\troot.addEventListener(\"scroll\", layout, true);\n\t\t\troot.addEventListener(\"animationend\", layout);\n\t\t\troot.addEventListener(\"transitionend\", layout);\n\t\t\tschedule();\n\t\t\treturn () => {\n\t\t\t\tcancelAnimationFrame(frame);\n\t\t\t\tresize.disconnect();\n\t\t\t\tmutations.disconnect();\n\t\t\t\troot.removeEventListener(\"pointerover\", over);\n\t\t\t\troot.removeEventListener(\"pointerleave\", leave);\n\t\t\t\troot.removeEventListener(\"focusin\", focus);\n\t\t\t\troot.removeEventListener(\"focusout\", blur);\n\t\t\t\troot.ownerDocument.removeEventListener(\"keydown\", keyboard);\n\t\t\t\troot.removeEventListener(\"scroll\", layout, true);\n\t\t\t\troot.removeEventListener(\"animationend\", layout);\n\t\t\t\troot.removeEventListener(\"transitionend\", layout);\n\t\t\t\tassignRef(ref, null);\n\t\t\t};\n\t\t},\n\t\t[ref, restoreOnPointerLeave],\n\t);\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nocoo/basalt",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"type": "module",
 	"license": "MIT",
 	"repository": {
@@ -52,36 +52,36 @@
 		"./styles/standalone": "./dist/styles/standalone.css"
 	},
 	"dependencies": {
-		"@radix-ui/react-accordion": "1.2.20",
-		"@radix-ui/react-alert-dialog": "1.1.23",
-		"@radix-ui/react-avatar": "1.2.6",
-		"@radix-ui/react-checkbox": "1.3.11",
-		"@radix-ui/react-collapsible": "1.1.20",
-		"@radix-ui/react-context-menu": "2.3.7",
-		"@radix-ui/react-dialog": "1.1.23",
-		"@radix-ui/react-dropdown-menu": "2.1.24",
-		"@radix-ui/react-hover-card": "1.1.23",
-		"@radix-ui/react-label": "2.1.15",
-		"@radix-ui/react-menubar": "1.1.24",
-		"@radix-ui/react-navigation-menu": "1.2.22",
-		"@radix-ui/react-popover": "1.1.23",
-		"@radix-ui/react-progress": "1.1.16",
-		"@radix-ui/react-radio-group": "1.4.7",
-		"@radix-ui/react-scroll-area": "1.2.18",
-		"@radix-ui/react-select": "2.3.7",
-		"@radix-ui/react-separator": "1.1.15",
-		"@radix-ui/react-slider": "1.4.7",
-		"@radix-ui/react-slot": "1.3.3",
-		"@radix-ui/react-switch": "1.3.7",
-		"@radix-ui/react-tabs": "1.1.21",
-		"@radix-ui/react-toggle": "1.1.18",
-		"@radix-ui/react-toggle-group": "1.1.19",
-		"@radix-ui/react-tooltip": "1.2.16",
+		"@radix-ui/react-accordion": "1.3.1",
+		"@radix-ui/react-alert-dialog": "1.2.1",
+		"@radix-ui/react-avatar": "1.3.1",
+		"@radix-ui/react-checkbox": "1.4.1",
+		"@radix-ui/react-collapsible": "1.2.1",
+		"@radix-ui/react-context-menu": "2.4.1",
+		"@radix-ui/react-dialog": "1.3.1",
+		"@radix-ui/react-dropdown-menu": "2.2.1",
+		"@radix-ui/react-hover-card": "1.2.1",
+		"@radix-ui/react-label": "2.1.17",
+		"@radix-ui/react-menubar": "1.2.1",
+		"@radix-ui/react-navigation-menu": "1.4.1",
+		"@radix-ui/react-popover": "1.3.1",
+		"@radix-ui/react-progress": "1.2.1",
+		"@radix-ui/react-radio-group": "1.5.1",
+		"@radix-ui/react-scroll-area": "1.4.0",
+		"@radix-ui/react-select": "2.4.1",
+		"@radix-ui/react-separator": "1.2.0",
+		"@radix-ui/react-slider": "1.6.1",
+		"@radix-ui/react-slot": "1.5.0",
+		"@radix-ui/react-switch": "1.4.1",
+		"@radix-ui/react-tabs": "1.2.1",
+		"@radix-ui/react-toggle": "1.2.1",
+		"@radix-ui/react-toggle-group": "1.2.1",
+		"@radix-ui/react-tooltip": "1.4.1",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.1",
-		"entities": "8.0.0",
-		"marked": "18.0.14",
+		"entities": "8.1.0",
+		"marked": "18.1.1",
 		"sonner": "2.0.8",
 		"tailwind-merge": "3.7.0"
 	},