@reforma/components 0.0.0 → 0.1.1

package/dist/LayoutGridControl/LayoutGridControl.module.css.js

@@ -1,4 +1,4 @@
-const o = "LayoutGridControl_root_IQJ2gv", t = "LayoutGridControl_cell_X3RCC0", l = "LayoutGridControl_glyph_btLPkY", r = "LayoutGridControl_previewGlyph_W5S3tZ", y = "LayoutGridControl_dot_Q6dzA5", e = "LayoutGridControl_glyphItem_QWPKYx", n = "LayoutGridControl_overlay_b0hLds", a = "LayoutGridControl_overlayBox_xXP6kY", _ = {
+const o = "LayoutGridControl_root_vjOvyd", t = "LayoutGridControl_cell_2mHxBF", l = "LayoutGridControl_glyph_DD6P0z", r = "LayoutGridControl_previewGlyph_RjMUxO", y = "LayoutGridControl_dot_3tAGuU", e = "LayoutGridControl_glyphItem_9FVJxh", n = "LayoutGridControl_overlay_FgZwpS", a = "LayoutGridControl_overlayBox_KbTfWf", _ = {
   root: o,
   cell: t,
   glyph: l,

package/dist/Lightbox/Lightbox.module.css

@@ -1 +1 @@
-.Lightbox_overlay_nnfcBO:before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.Lightbox_overlay_nnfcBO[data-modal-overlay].Lightbox_overlay_nnfcBO{--lightbox-inset: var(--spacing-xl);--lightbox-image-max-height: calc(100dvh - 2 * var(--lightbox-inset) - var(--modal-title-height));padding:var(--lightbox-inset);overflow:hidden}.Lightbox_overlay_nnfcBO[data-modal-overlay] .Lightbox_window_gwfyem[data-modal-window]{width:-moz-fit-content;width:fit-content;max-width:100%;height:auto;max-height:100%}.Lightbox_overlay_nnfcBO[data-modal-overlay] [data-modal-data]{min-width:0;max-width:100%;height:auto;max-height:none}.Lightbox_window_gwfyem[data-modal-window]{--modal-border: 0;outline:2px solid var(--color-secondary-muted-border);overflow:hidden}.Lightbox_window_gwfyem [data-modal-title]{width:0;min-width:100%}.Lightbox_window_gwfyem [data-modal-title]>:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Lightbox_image_782Yay{display:block;background-image:repeating-conic-gradient(color-mix(in srgb,var(--color-black) 14%,transparent) 0% 25%,transparent 0% 50%);background-size:1rem 1rem;background-color:var(--color-white);width:auto;max-width:100%;height:auto;max-height:var(--lightbox-image-max-height)}@media(max-width:639px){.Lightbox_overlay_nnfcBO[data-modal-overlay].Lightbox_overlay_nnfcBO{--lightbox-inset: var(--spacing-sm)}}
+.Lightbox_overlay_34X83O:before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.Lightbox_overlay_34X83O[data-modal-overlay].Lightbox_overlay_34X83O{--lightbox-inset: var(--spacing-xl);--lightbox-image-max-height: calc(100dvh - 2 * var(--lightbox-inset) - var(--modal-title-height));padding:var(--lightbox-inset);overflow:hidden}.Lightbox_overlay_34X83O[data-modal-overlay] .Lightbox_window_DLp2ZB[data-modal-window]{width:-moz-fit-content;width:fit-content;max-width:100%;height:auto;max-height:100%}.Lightbox_overlay_34X83O[data-modal-overlay] [data-modal-data]{min-width:0;max-width:100%;height:auto;max-height:none}.Lightbox_window_DLp2ZB[data-modal-window]{--modal-border: 0;outline:2px solid var(--color-secondary-muted-border);overflow:hidden}.Lightbox_window_DLp2ZB [data-modal-title]{width:0;min-width:100%}.Lightbox_window_DLp2ZB [data-modal-title]>:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Lightbox_image_QqCcRQ{display:block;background-image:repeating-conic-gradient(color-mix(in srgb,var(--color-black) 14%,transparent) 0% 25%,transparent 0% 50%);background-size:1rem 1rem;background-color:var(--color-white);width:auto;max-width:100%;height:auto;max-height:var(--lightbox-image-max-height)}@media(max-width:639px){.Lightbox_overlay_34X83O[data-modal-overlay].Lightbox_overlay_34X83O{--lightbox-inset: var(--spacing-sm)}}

package/dist/Lightbox/Lightbox.module.css.js

@@ -1,12 +1,12 @@
-const o = "Lightbox_overlay_nnfcBO", e = "Lightbox_window_gwfyem", t = "Lightbox_image_782Yay", a = {
+const o = "Lightbox_overlay_34X83O", t = "Lightbox_window_DLp2ZB", e = "Lightbox_image_QqCcRQ", i = {
   overlay: o,
-  window: e,
-  image: t
+  window: t,
+  image: e
 };
 export {
-  a as default,
-  t as image,
+  i as default,
+  e as image,
   o as overlay,
-  e as window
+  t as window
 };
 //# sourceMappingURL=Lightbox.module.css.js.map

package/dist/List/ListBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../src/List/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzE,OAAO,EAKH,KAAK,gBAAgB,IAAI,oBAAoB,EAC7C,KAAK,GAAG,EACR,KAAK,mBAAmB,EACxB,KAAK,YAAY,IAAI,eAAe,EACvC,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5D,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE/E,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C;;;GAGG;AACH,eAAO,MAAM,mBAAmB;aAC5B,SAAS,EAAE,YAAY;aACvB,YAAY,EAAE,eAAe;aAC7B,QAAQ,EAAE,WAAW;IACrB,wCAAwC;aACxC,QAAQ,EAAE,WAAW;CACf,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG,OAAO,mBAAmB,CAAC,MAAM,OAAO,mBAAmB,CAAC,CAAC;AAE/F,MAAM,WAAW,gBAAgB;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAC7E,gBAAgB,GAAG;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEJ,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC;IAC9G,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,yEAAyE;IACzE,YAAY,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IACnC,sGAAsG;IACtG,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,EACtC,SAAS,EACT,IAAW,EACX,aAAsB,EACtB,YAAY,EACZ,iBAA0B,EAC1B,WAAkB,EAClB,GAAG,EACH,GAAG,KAAK,EACX,EAAE,qBAAqB,CAAC,CAAC,CAAC,+BA0B1B;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EAC1C,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACX,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,+BAuBrD;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,+BAEhH;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BAE/F"}
+{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../src/List/ListBox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAEzE,OAAO,EAKH,KAAK,gBAAgB,IAAI,oBAAoB,EAC7C,KAAK,GAAG,EACR,KAAK,mBAAmB,EACxB,KAAK,YAAY,IAAI,eAAe,EACvC,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5D,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE/E,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C;;;GAGG;AACH,eAAO,MAAM,mBAAmB;aAC5B,SAAS,EAAE,YAAY;aACvB,YAAY,EAAE,eAAe;aAC7B,QAAQ,EAAE,WAAW;IACrB,wCAAwC;aACxC,QAAQ,EAAE,WAAW;CACf,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG,OAAO,mBAAmB,CAAC,MAAM,OAAO,mBAAmB,CAAC,CAAC;AAE/F,MAAM,WAAW,gBAAgB;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,GAC7E,gBAAgB,GAAG;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEJ,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC;IAC9G,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,yEAAyE;IACzE,YAAY,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IACnC,sGAAsG;IACtG,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAgBD;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,EACtC,SAAS,EACT,IAAW,EACX,aAAsB,EACtB,YAAY,EACZ,iBAA0B,EAC1B,WAAkB,EAClB,GAAG,EACH,GAAG,KAAK,EACX,EAAE,qBAAqB,CAAC,CAAC,CAAC,+BAuB1B;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EAC1C,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACX,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,+BAuBrD;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,+BAEhH;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BAE/F"}

package/dist/List/ListBox.js

@@ -1,100 +1,102 @@
-import { toSet as h, cn as c, mergeRefs as B } from "@reforma/lib";
-import { useRef as S, useMemo as p, useEffect as v } from "react";
-import { ListBox as g, Header as I, ListBoxItem as H, ListBoxSection as R } from "react-aria-components";
+import { toSet as y, cn as f, mergeRefs as S } from "@reforma/lib";
+import { useRef as B, useState as p } from "react";
+import { ListBox as v, Header as H, ListBoxItem as I, ListBoxSection as R } from "react-aria-components";
 import o from "./ListBox.module.css.js";
-import { renderListRowItemContent as y } from "./listRowItemContent.js";
-import { useListHoverHighlight as N } from "./useListHoverHighlight.js";
-import { useScrollActiveListItem as b } from "./useScrollActiveListItem.js";
+import { renderListRowItemContent as h } from "./listRowItemContent.js";
+import { useListHoverHighlight as K } from "./useListHoverHighlight.js";
+import { useScrollActiveListItem as g } from "./useScrollActiveListItem.js";
 import { jsx as l } from "react/jsx-runtime";
-const z = {
+const A = {
   itemHover: "item-hover",
   itemSelected: "item-selected",
   itemBoth: "item-both",
   /** Visible until the row is hovered. */
   itemRest: "item-rest"
 };
+function N(e, t) {
+  if (e.size !== t.size)
+    return !1;
+  for (const s of e)
+    if (!t.has(s))
+      return !1;
+  return !0;
+}
 function C({
-  className: t,
-  size: e = "sm",
-  selectionMode: i = "none",
-  selectedKeys: n,
-  escapeKeyBehavior: f = "none",
-  interactive: s = !0,
+  className: e,
+  size: t = "sm",
+  selectionMode: s = "none",
+  selectedKeys: u,
+  escapeKeyBehavior: x = "none",
+  interactive: i = !0,
   ref: r,
-  ...u
+  ...d
 }) {
-  const m = S(null), a = p(() => h(n), [n]);
-  return N(m, s), v(() => {
-    requestAnimationFrame(() => {
-      m.current?.querySelector("[data-highlighted], [data-selected], [data-focus-visible]")?.scrollIntoView({
-        block: "nearest"
-      });
-    });
-  }, [a]), /* @__PURE__ */ l(g, {
-    ref: B(m, r),
-    className: c(o.list, t),
-    selectionMode: i,
-    selectedKeys: a,
-    escapeKeyBehavior: f,
-    "data-size": e,
-    "data-interactive": s || void 0,
-    ...u
+  const a = B(null), m = y(u), [n, c] = p(m);
+  return N(n, m) || c(m), K(a, i), /* @__PURE__ */ l(v, {
+    ref: S(a, r),
+    className: f(o.list, e),
+    selectionMode: s,
+    selectedKeys: n,
+    escapeKeyBehavior: x,
+    "data-size": t,
+    "data-interactive": i || void 0,
+    ...d
   });
 }
-function E({
-  startAffix: t,
-  icon: e,
-  text: i,
-  description: n,
-  endAffix: f,
-  stacked: s,
+function q({
+  startAffix: e,
+  icon: t,
+  text: s,
+  description: u,
+  endAffix: x,
+  stacked: i,
   children: r,
-  className: u,
-  isDanger: m,
-  ref: a,
-  ...d
+  className: d,
+  isDanger: a,
+  ref: m,
+  ...n
 }) {
-  const x = S(null), L = i || d.textValue || (typeof r == "string" ? r : void 0);
-  return b(x), /* @__PURE__ */ l(H, {
-    ref: B(x, a),
-    className: c(o.item, s && o.itemStacked, m && o.itemDanger, u),
+  const c = B(null), L = s || n.textValue || (typeof r == "string" ? r : void 0);
+  return g(c), /* @__PURE__ */ l(I, {
+    ref: S(c, m),
+    className: f(o.item, i && o.itemStacked, a && o.itemDanger, d),
     textValue: L,
-    ...d,
-    children: y(r, {
-      icon: e,
-      description: n,
-      startAffix: t,
-      endAffix: f,
-      stacked: s,
+    ...n,
+    children: h(r, {
+      icon: t,
+      description: u,
+      startAffix: e,
+      endAffix: x,
+      stacked: i,
       textValue: L
     })
   });
 }
-function F({
-  className: t,
-  sticky: e,
-  ...i
+function E({
+  className: e,
+  sticky: t,
+  ...s
 }) {
-  return /* @__PURE__ */ l(I, {
-    className: c(o.sectionHeader, t),
-    ...i,
-    "data-sticky": e || void 0
+  return /* @__PURE__ */ l(H, {
+    className: f(o.sectionHeader, e),
+    ...s,
+    "data-sticky": t || void 0
   });
 }
-function K({
-  className: t,
-  ...e
+function F({
+  className: e,
+  ...t
 }) {
   return /* @__PURE__ */ l(R, {
-    className: c(o.section, t),
-    ...e
+    className: f(o.section, e),
+    ...t
   });
 }
 export {
   C as ListBox,
-  F as ListBoxHeader,
-  E as ListBoxItem,
-  K as ListBoxSection,
-  z as listBoxItemDataShow
+  E as ListBoxHeader,
+  q as ListBoxItem,
+  F as ListBoxSection,
+  A as listBoxItemDataShow
 };
 //# sourceMappingURL=ListBox.js.map

package/dist/List/ListBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.js","sources":["../../src/List/ListBox.tsx"],"sourcesContent":["import { cn, mergeRefs, toSet, type SelectionInput } from '@reforma/lib';\nimport { useEffect, useMemo, useRef } from 'react';\nimport {\n    Header as AriaHeader,\n    ListBox as AriaListBox,\n    ListBoxItem as AriaListBoxItem,\n    ListBoxSection as AriaListBoxSection,\n    type ListBoxItemProps as AriaListBoxItemProps,\n    type Key,\n    type ListBoxSectionProps,\n    type ListBoxProps as RACListBoxProps,\n} from 'react-aria-components';\n\nimport styles from './ListBox.module.css';\nimport { renderListRowItemContent } from './listRowItemContent';\nimport { useListHoverHighlight } from './useListHoverHighlight';\nimport { useScrollActiveListItem } from './useScrollActiveListItem';\n\nimport type { HTMLAttributes, ReactNode, Ref } from 'react';\n\nexport type { ListBoxProps, ListBoxSectionProps } from 'react-aria-components';\n\nexport type ListBoxSize = 'sm' | 'md' | 'lg';\n\n/**\n * Valid `data-show` values on any descendant of a shared list row (e.g. a control in `endAffix`).\n * {@link GridListItem} and {@link ListBoxItem} both use `ListBox.module.css` (`.item`); name is historical.\n */\nexport const listBoxItemDataShow = {\n    itemHover: 'item-hover',\n    itemSelected: 'item-selected',\n    itemBoth: 'item-both',\n    /** Visible until the row is hovered. */\n    itemRest: 'item-rest',\n} as const;\n\nexport type ListBoxItemDataShow = typeof listBoxItemDataShow[keyof typeof listBoxItemDataShow];\n\nexport interface ListBoxItemSlots {\n    icon?: ReactNode;\n    description?: ReactNode;\n    startAffix?: ReactNode;\n    endAffix?: ReactNode;\n    stacked?: boolean;\n}\n\nexport type ListBoxItemProps<T extends object = object> = AriaListBoxItemProps<T>\n  & ListBoxItemSlots & {\n      text?: string;\n      isDanger?: boolean;\n  };\n\nexport interface ListBoxComponentProps<T extends object = object> extends Omit<RACListBoxProps<T>, 'selectedKeys'> {\n    ref?: Ref<HTMLDivElement>;\n    size?: ListBoxSize;\n    /** Selected key(s). Pass a single Key, array, or Iterable (e.g. Set). */\n    selectedKeys?: SelectionInput<Key>;\n    /** When false, items do not show hover background. Use for plain/display-only lists. Default true. */\n    interactive?: boolean;\n}\n\n/**\n * **List surface for option-like rows** (arrow-key listbox UX, ComboBox / Select overlays). Rows should not contain nested widgets that require Tab —\n * use {@link GridList} with `keyboardNavigationBehavior=\"tab\"` instead.\n *\n * Styled like {@link GridList} via shared `ListBox.module.css`; choose by interaction model and RAC composition (Select renders `ListBox`, not GridList).\n */\nexport function ListBox<T extends object>({\n    className,\n    size = 'sm',\n    selectionMode = 'none',\n    selectedKeys,\n    escapeKeyBehavior = 'none',\n    interactive = true,\n    ref,\n    ...props\n}: ListBoxComponentProps<T>) {\n    const listRef = useRef<HTMLDivElement>(null);\n    const selectedKeysSet = useMemo(() => toSet(selectedKeys), [selectedKeys]);\n\n    useListHoverHighlight(listRef, interactive);\n\n    useEffect(() => {\n        requestAnimationFrame(() => {\n            listRef.current\n                ?.querySelector('[data-highlighted], [data-selected], [data-focus-visible]')\n                ?.scrollIntoView({ block: 'nearest' });\n        });\n    }, [selectedKeysSet]);\n\n    return (\n        <AriaListBox\n            ref={ mergeRefs(listRef, ref as Ref<HTMLDivElement>) }\n            className={ cn(styles.list, className) }\n            selectionMode={ selectionMode }\n            selectedKeys={ selectedKeysSet }\n            escapeKeyBehavior={ escapeKeyBehavior }\n            data-size={ size }\n            data-interactive={ interactive || undefined }\n            { ...props }\n        />\n    );\n}\n\nexport function ListBoxItem<T extends object>({\n    startAffix,\n    icon,\n    text,\n    description,\n    endAffix,\n    stacked,\n    children,\n    className,\n    isDanger,\n    ref,\n    ...props\n}: ListBoxItemProps<T> & { ref?: Ref<HTMLDivElement> }) {\n    const itemRef = useRef<HTMLDivElement>(null);\n    const textValue = text || props.textValue || (typeof children === 'string' ? children : undefined);\n\n    useScrollActiveListItem(itemRef);\n\n    return (\n        <AriaListBoxItem\n            ref={ mergeRefs(itemRef, ref) }\n            className={ cn(styles.item, stacked && styles.itemStacked, isDanger && styles.itemDanger, className) }\n            textValue={ textValue }\n            { ...props }\n        >\n            { renderListRowItemContent(children, {\n                icon,\n                description,\n                startAffix,\n                endAffix,\n                stacked,\n                textValue,\n            }) }\n        </AriaListBoxItem>\n    );\n}\n\nexport function ListBoxHeader({ className, sticky, ...props }: HTMLAttributes<HTMLElement> & { sticky?: boolean }) {\n    return <AriaHeader className={ cn(styles.sectionHeader, className) } { ...props } data-sticky={ sticky || undefined } />;\n}\n\nexport function ListBoxSection<T extends object>({ className, ...props }: ListBoxSectionProps<T>) {\n    return <AriaListBoxSection className={ cn(styles.section, className) } { ...props } />;\n}\n"],"names":["listBoxItemDataShow","ListBox","className","size","selectionMode","selectedKeys","escapeKeyBehavior","interactive","ref","props","listRef","useRef","selectedKeysSet","useMemo","toSet","useListHoverHighlight","useEffect","AriaListBox","mergeRefs","cn","styles","ListBoxItem","startAffix","icon","text","description","endAffix","stacked","children","isDanger","itemRef","textValue","useScrollActiveListItem","AriaListBoxItem","renderListRowItemContent","ListBoxHeader","sticky","AriaHeader","ListBoxSection","AriaListBoxSection"],"mappings":";;;;;;;;AAYO,MAAMA,IAAsB;AAAA,EACjC,WAAW;AAAA,EACX,cAAc;AAAA,EACd,UAAU;AAAA;AAAA,EAEV,UAAU;AACZ;AAOO,SAASC,EAAQ;AAAA,EACtB,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,eAAAC,IAAgB;AAAA,EAChB,cAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,aAAAC,IAAc;AAAA,EACd,KAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,QAAMC,IAAUC,EAAO,IAAI,GACrBC,IAAkBC,EAAQ,MAAMC,EAAMT,CAAY,GAAG,CAACA,CAAY,CAAC;AACzE,SAAAU,EAAsBL,GAASH,CAAW,GAC1CS,EAAU,MAAM;AACd,0BAAsB,MAAM;AAC1B,MAAAN,EAAQ,SAAS,cAAc,2DAA2D,GAAG,eAAe;AAAA,QAC1G,OAAO;AAAA,MAAA,CACR;AAAA,IACH,CAAC;AAAA,EACH,GAAG,CAACE,CAAe,CAAC,qBACKK,GAAa;AAAA,IACpC,KAAKC,EAAUR,GAASF,CAAG;AAAA,IAC3B,WAAWW,EAAGC,EAAO,MAAMlB,CAAS;AAAA,IACpC,eAAAE;AAAA,IACA,cAAcQ;AAAA,IACd,mBAAAN;AAAA,IACA,aAAaH;AAAA,IACb,oBAAoBI,KAAe;AAAA,IACnC,GAAGE;AAAA,EAAA,CACJ;AACH;AACO,SAASY,EAAY;AAAA,EAC1B,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAA1B;AAAA,EACA,UAAA2B;AAAA,EACA,KAAArB;AAAA,EACA,GAAGC;AACL,GAAG;AACD,QAAMqB,IAAUnB,EAAO,IAAI,GACrBoB,IAAYP,KAAQf,EAAM,cAAc,OAAOmB,KAAa,WAAWA,IAAW;AACxF,SAAAI,EAAwBF,CAAO,qBACNG,GAAiB;AAAA,IACxC,KAAKf,EAAUY,GAAStB,CAAG;AAAA,IAC3B,WAAWW,EAAGC,EAAO,MAAMO,KAAWP,EAAO,aAAaS,KAAYT,EAAO,YAAYlB,CAAS;AAAA,IAClG,WAAA6B;AAAA,IACA,GAAGtB;AAAA,IACH,UAAUyB,EAAyBN,GAAU;AAAA,MAC3C,MAAAL;AAAA,MACA,aAAAE;AAAA,MACA,YAAAH;AAAA,MACA,UAAAI;AAAA,MACA,SAAAC;AAAA,MACA,WAAAI;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AACH;AACO,SAASI,EAAc;AAAA,EAC5B,WAAAjC;AAAA,EACA,QAAAkC;AAAA,EACA,GAAG3B;AACL,GAAG;AACD,2BAAyB4B,GAAY;AAAA,IACnC,WAAWlB,EAAGC,EAAO,eAAelB,CAAS;AAAA,IAC7C,GAAGO;AAAA,IACH,eAAe2B,KAAU;AAAA,EAAA,CAC1B;AACH;AACO,SAASE,EAAe;AAAA,EAC7B,WAAApC;AAAA,EACA,GAAGO;AACL,GAAG;AACD,2BAAyB8B,GAAoB;AAAA,IAC3C,WAAWpB,EAAGC,EAAO,SAASlB,CAAS;AAAA,IACvC,GAAGO;AAAA,EAAA,CACJ;AACH;"}
+{"version":3,"file":"ListBox.js","sources":["../../src/List/ListBox.tsx"],"sourcesContent":["import { cn, mergeRefs, toSet, type SelectionInput } from '@reforma/lib';\nimport { useRef, useState } from 'react';\nimport {\n    Header as AriaHeader,\n    ListBox as AriaListBox,\n    ListBoxItem as AriaListBoxItem,\n    ListBoxSection as AriaListBoxSection,\n    type ListBoxItemProps as AriaListBoxItemProps,\n    type Key,\n    type ListBoxSectionProps,\n    type ListBoxProps as RACListBoxProps,\n} from 'react-aria-components';\n\nimport styles from './ListBox.module.css';\nimport { renderListRowItemContent } from './listRowItemContent';\nimport { useListHoverHighlight } from './useListHoverHighlight';\nimport { useScrollActiveListItem } from './useScrollActiveListItem';\n\nimport type { HTMLAttributes, ReactNode, Ref } from 'react';\n\nexport type { ListBoxProps, ListBoxSectionProps } from 'react-aria-components';\n\nexport type ListBoxSize = 'sm' | 'md' | 'lg';\n\n/**\n * Valid `data-show` values on any descendant of a shared list row (e.g. a control in `endAffix`).\n * {@link GridListItem} and {@link ListBoxItem} both use `ListBox.module.css` (`.item`); name is historical.\n */\nexport const listBoxItemDataShow = {\n    itemHover: 'item-hover',\n    itemSelected: 'item-selected',\n    itemBoth: 'item-both',\n    /** Visible until the row is hovered. */\n    itemRest: 'item-rest',\n} as const;\n\nexport type ListBoxItemDataShow = typeof listBoxItemDataShow[keyof typeof listBoxItemDataShow];\n\nexport interface ListBoxItemSlots {\n    icon?: ReactNode;\n    description?: ReactNode;\n    startAffix?: ReactNode;\n    endAffix?: ReactNode;\n    stacked?: boolean;\n}\n\nexport type ListBoxItemProps<T extends object = object> = AriaListBoxItemProps<T>\n  & ListBoxItemSlots & {\n      text?: string;\n      isDanger?: boolean;\n  };\n\nexport interface ListBoxComponentProps<T extends object = object> extends Omit<RACListBoxProps<T>, 'selectedKeys'> {\n    ref?: Ref<HTMLDivElement>;\n    size?: ListBoxSize;\n    /** Selected key(s). Pass a single Key, array, or Iterable (e.g. Set). */\n    selectedKeys?: SelectionInput<Key>;\n    /** When false, items do not show hover background. Use for plain/display-only lists. Default true. */\n    interactive?: boolean;\n}\n\nfunction sameKeys<T>(left: Set<T>, right: Set<T>): boolean {\n    if (left.size !== right.size) {\n        return false;\n    }\n\n    for (const key of left) {\n        if (!right.has(key)) {\n            return false;\n        }\n    }\n\n    return true;\n}\n\n/**\n * **List surface for option-like rows** (arrow-key listbox UX, ComboBox / Select overlays). Rows should not contain nested widgets that require Tab —\n * use {@link GridList} with `keyboardNavigationBehavior=\"tab\"` instead.\n *\n * Styled like {@link GridList} via shared `ListBox.module.css`; choose by interaction model and RAC composition (Select renders `ListBox`, not GridList).\n */\nexport function ListBox<T extends object>({\n    className,\n    size = 'sm',\n    selectionMode = 'none',\n    selectedKeys,\n    escapeKeyBehavior = 'none',\n    interactive = true,\n    ref,\n    ...props\n}: ListBoxComponentProps<T>) {\n    const listRef = useRef<HTMLDivElement>(null);\n    const nextKeys = toSet(selectedKeys);\n    const [ selectedKeysSet, setSelectedKeysSet ] = useState(nextKeys);\n\n    if (!sameKeys(selectedKeysSet, nextKeys)) {\n        setSelectedKeysSet(nextKeys);\n    }\n\n    useListHoverHighlight(listRef, interactive);\n\n    return (\n        <AriaListBox\n            ref={ mergeRefs(listRef, ref as Ref<HTMLDivElement>) }\n            className={ cn(styles.list, className) }\n            selectionMode={ selectionMode }\n            selectedKeys={ selectedKeysSet }\n            escapeKeyBehavior={ escapeKeyBehavior }\n            data-size={ size }\n            data-interactive={ interactive || undefined }\n            { ...props }\n        />\n    );\n}\n\nexport function ListBoxItem<T extends object>({\n    startAffix,\n    icon,\n    text,\n    description,\n    endAffix,\n    stacked,\n    children,\n    className,\n    isDanger,\n    ref,\n    ...props\n}: ListBoxItemProps<T> & { ref?: Ref<HTMLDivElement> }) {\n    const itemRef = useRef<HTMLDivElement>(null);\n    const textValue = text || props.textValue || (typeof children === 'string' ? children : undefined);\n\n    useScrollActiveListItem(itemRef);\n\n    return (\n        <AriaListBoxItem\n            ref={ mergeRefs(itemRef, ref) }\n            className={ cn(styles.item, stacked && styles.itemStacked, isDanger && styles.itemDanger, className) }\n            textValue={ textValue }\n            { ...props }\n        >\n            { renderListRowItemContent(children, {\n                icon,\n                description,\n                startAffix,\n                endAffix,\n                stacked,\n                textValue,\n            }) }\n        </AriaListBoxItem>\n    );\n}\n\nexport function ListBoxHeader({ className, sticky, ...props }: HTMLAttributes<HTMLElement> & { sticky?: boolean }) {\n    return <AriaHeader className={ cn(styles.sectionHeader, className) } { ...props } data-sticky={ sticky || undefined } />;\n}\n\nexport function ListBoxSection<T extends object>({ className, ...props }: ListBoxSectionProps<T>) {\n    return <AriaListBoxSection className={ cn(styles.section, className) } { ...props } />;\n}\n"],"names":["listBoxItemDataShow","sameKeys","left","right","key","ListBox","className","size","selectionMode","selectedKeys","escapeKeyBehavior","interactive","ref","props","listRef","useRef","nextKeys","toSet","selectedKeysSet","setSelectedKeysSet","useState","useListHoverHighlight","AriaListBox","mergeRefs","cn","styles","ListBoxItem","startAffix","icon","text","description","endAffix","stacked","children","isDanger","itemRef","textValue","useScrollActiveListItem","AriaListBoxItem","renderListRowItemContent","ListBoxHeader","sticky","AriaHeader","ListBoxSection","AriaListBoxSection"],"mappings":";;;;;;;;AAYO,MAAMA,IAAsB;AAAA,EACjC,WAAW;AAAA,EACX,cAAc;AAAA,EACd,UAAU;AAAA;AAAA,EAEV,UAAU;AACZ;AACA,SAASC,EAASC,GAAMC,GAAO;AAC7B,MAAID,EAAK,SAASC,EAAM;AACtB,WAAO;AAET,aAAWC,KAAOF;AAChB,QAAI,CAACC,EAAM,IAAIC,CAAG;AAChB,aAAO;AAGX,SAAO;AACT;AAQO,SAASC,EAAQ;AAAA,EACtB,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,eAAAC,IAAgB;AAAA,EAChB,cAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,aAAAC,IAAc;AAAA,EACd,KAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,QAAMC,IAAUC,EAAO,IAAI,GACrBC,IAAWC,EAAMR,CAAY,GAC7B,CAACS,GAAiBC,CAAkB,IAAIC,EAASJ,CAAQ;AAC/D,SAAKf,EAASiB,GAAiBF,CAAQ,KACrCG,EAAmBH,CAAQ,GAE7BK,EAAsBP,GAASH,CAAW,qBACjBW,GAAa;AAAA,IACpC,KAAKC,EAAUT,GAASF,CAAG;AAAA,IAC3B,WAAWY,EAAGC,EAAO,MAAMnB,CAAS;AAAA,IACpC,eAAAE;AAAA,IACA,cAAcU;AAAA,IACd,mBAAAR;AAAA,IACA,aAAaH;AAAA,IACb,oBAAoBI,KAAe;AAAA,IACnC,GAAGE;AAAA,EAAA,CACJ;AACH;AACO,SAASa,EAAY;AAAA,EAC1B,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAA3B;AAAA,EACA,UAAA4B;AAAA,EACA,KAAAtB;AAAA,EACA,GAAGC;AACL,GAAG;AACD,QAAMsB,IAAUpB,EAAO,IAAI,GACrBqB,IAAYP,KAAQhB,EAAM,cAAc,OAAOoB,KAAa,WAAWA,IAAW;AACxF,SAAAI,EAAwBF,CAAO,qBACNG,GAAiB;AAAA,IACxC,KAAKf,EAAUY,GAASvB,CAAG;AAAA,IAC3B,WAAWY,EAAGC,EAAO,MAAMO,KAAWP,EAAO,aAAaS,KAAYT,EAAO,YAAYnB,CAAS;AAAA,IAClG,WAAA8B;AAAA,IACA,GAAGvB;AAAA,IACH,UAAU0B,EAAyBN,GAAU;AAAA,MAC3C,MAAAL;AAAA,MACA,aAAAE;AAAA,MACA,YAAAH;AAAA,MACA,UAAAI;AAAA,MACA,SAAAC;AAAA,MACA,WAAAI;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AACH;AACO,SAASI,EAAc;AAAA,EAC5B,WAAAlC;AAAA,EACA,QAAAmC;AAAA,EACA,GAAG5B;AACL,GAAG;AACD,2BAAyB6B,GAAY;AAAA,IACnC,WAAWlB,EAAGC,EAAO,eAAenB,CAAS;AAAA,IAC7C,GAAGO;AAAA,IACH,eAAe4B,KAAU;AAAA,EAAA,CAC1B;AACH;AACO,SAASE,EAAe;AAAA,EAC7B,WAAArC;AAAA,EACA,GAAGO;AACL,GAAG;AACD,2BAAyB+B,GAAoB;AAAA,IAC3C,WAAWpB,EAAGC,EAAO,SAASnB,CAAS;AAAA,IACvC,GAAGO;AAAA,EAAA,CACJ;AACH;"}

package/dist/List/ListBox.module.css

@@ -1 +1 @@
-@layer components{.ListBox_list_Nv3ml2{--reforma-listbox-gap: var(--spacing-xxs);--reforma-listbox-item-radius: var(--radius-sm);--reforma-listbox-item-height: var(--spacing-30);--reforma-listbox-item-padding: var(--spacing-sm) var(--spacing-lg);--reforma-listbox-item-color: var(--color-text);--reforma-listbox-item-color--hover: var(--color-text);--reforma-listbox-item-bg--hover: var(--color-secondary-muted-light);--reforma-listbox-item-bg--selected: var(--color-secondary-muted);--reforma-listbox-item-color--selected: var(--color-secondary-content);--reforma-listbox-highlight-top: 0px;--reforma-listbox-highlight-left: 0px;--reforma-listbox-highlight-width: 0px;--reforma-listbox-highlight-height: 0px;--reforma-listbox-highlight-opacity: 0;--reforma-listbox-highlight-ease: cubic-bezier(.16, 1, .3, 1);--reforma-menu-separator-space: var(--spacing-xs);display:flex;position:relative;flex-direction:column;gap:var(--reforma-listbox-gap);width:100%}.ListBox_list_Nv3ml2[data-interactive]:before{position:absolute;top:var(--reforma-listbox-highlight-top);left:var(--reforma-listbox-highlight-left);opacity:var(--reforma-listbox-highlight-opacity);border-radius:calc(var(--reforma-listbox-item-radius) * var(--squircle-radius-factor));width:var(--reforma-listbox-highlight-width);height:var(--reforma-listbox-highlight-height);content:"";corner-shape:superellipse(var(--squircle-value));z-index:0;transition:opacity .1s;background-color:var(--reforma-listbox-item-bg--hover);pointer-events:none}.ListBox_list_Nv3ml2[data-interactive][data-highlight-ready]:before{transition:top var(--transition-duration-fast) var(--reforma-listbox-highlight-ease),left var(--transition-duration-fast) var(--reforma-listbox-highlight-ease),width var(--transition-duration-fast) var(--reforma-listbox-highlight-ease),height var(--transition-duration-fast) var(--reforma-listbox-highlight-ease),opacity .1s}.ListBox_list_Nv3ml2[data-interactive][data-highlight-danger]:before{background-color:var(--color-danger-muted-light)}.ListBox_scrollableContainer_aaQIbE{width:100%}.ListBox_menuList_dZBKtY{outline:none}.ListBox_list_Nv3ml2[data-empty]{justify-content:center;align-items:center;padding:var(--spacing-md) var(--spacing-lg);min-height:var(--reforma-listbox-item-height);color:var(--color-secondary-muted-text);font-weight:400;font-size:var(--text-sm);line-height:var(--leading-sm);font-family:Onest,sans-serif;letter-spacing:0;text-align:center}.ListBox_item_WInvVF{display:flex;position:relative;align-items:center;gap:var(--spacing-10);border-radius:calc(var(--reforma-listbox-item-radius) * var(--squircle-radius-factor));padding:var(--reforma-listbox-item-padding);width:100%;min-width:0;min-height:var(--reforma-listbox-item-height);corner-shape:superellipse(var(--squircle-value));z-index:1;cursor:pointer;outline:none;color:var(--reforma-listbox-item-color);-webkit-user-select:none;-moz-user-select:none;isolation:isolate;user-select:none;text-decoration:none}.ListBox_item_WInvVF:has([data-hotkey]){padding-inline-end:var(--spacing-sm)}.ListBox_item_WInvVF:has([slot=endAffix] button){padding-inline-end:calc((var(--reforma-listbox-item-height) - var(--spacing-24)) / 2)}.ListBox_item_WInvVF:before{position:absolute;inset:0;border-radius:inherit;content:"";corner-shape:inherit;z-index:-1;transition:background-color var(--transition-duration-fast),border-radius var(--transition-duration-fast)}.ListBox_list_Nv3ml2[data-size=sm]{--reforma-listbox-item-radius: var(--radius-sm);--reforma-listbox-item-height: var(--spacing-30);--reforma-listbox-item-padding: var(--spacing-sm) var(--spacing-lg)}.ListBox_list_Nv3ml2[data-size=sm] .ListBox_itemLabel_msTYbB{font-weight:400;font-size:var(--text-sm);line-height:var(--leading-sm);font-family:Onest,sans-serif;letter-spacing:0}.ListBox_list_Nv3ml2[data-size=md]{--reforma-listbox-item-radius: var(--radius-md);--reforma-listbox-item-height: var(--spacing-36);--reforma-listbox-item-padding: var(--spacing-sm) var(--spacing-lg)}.ListBox_list_Nv3ml2[data-size=md] .ListBox_itemLabel_msTYbB{font-weight:400;font-size:var(--text-md);line-height:var(--leading-md);font-family:Onest,sans-serif;letter-spacing:0}.ListBox_list_Nv3ml2[data-size=lg]{--reforma-listbox-item-radius: var(--radius-lg);--reforma-listbox-item-height: var(--spacing-56);--reforma-listbox-item-padding: var(--spacing-10) var(--spacing-16)}.ListBox_list_Nv3ml2[data-size=lg] .ListBox_item_WInvVF:has([data-hotkey]){padding-inline-end:var(--spacing-10)}.ListBox_list_Nv3ml2[data-size=lg] .ListBox_itemLabel_msTYbB{font-weight:400;font-size:var(--text-lg);line-height:var(--leading-lg);font-family:Onest,sans-serif;letter-spacing:0}.ListBox_list_Nv3ml2[data-interactive] .ListBox_item_WInvVF:hover:not([data-disabled]):not([data-selected]):not([data-highlighted]),.ListBox_item_WInvVF:is([data-hovered],[data-focus-visible]):not([data-disabled]):not([data-selected]):not([data-highlighted]),.ListBox_item_WInvVF[data-open]:not([data-disabled]):not([data-selected]):not([data-highlighted]){color:var(--reforma-listbox-item-color--hover)}.ListBox_item_WInvVF[data-selected]:before,.ListBox_item_WInvVF[data-highlighted]:before{background-color:var(--reforma-listbox-item-bg--selected)}.ListBox_item_WInvVF[data-selected],.ListBox_item_WInvVF[data-highlighted]{color:var(--reforma-listbox-item-color--selected)}.ListBox_list_Nv3ml2 .ListBox_item_WInvVF[data-selected]+.ListBox_item_WInvVF[data-selected]{border-start-start-radius:0;border-start-end-radius:0}:is(.ListBox_list_Nv3ml2 .ListBox_item_WInvVF[data-selected]+.ListBox_item_WInvVF[data-selected]):before{top:-1px}.ListBox_list_Nv3ml2 .ListBox_item_WInvVF[data-selected]:has(+.ListBox_item_WInvVF[data-selected]){border-end-start-radius:0;border-end-end-radius:0}:is(.ListBox_list_Nv3ml2 .ListBox_item_WInvVF[data-selected]:has(+.ListBox_item_WInvVF[data-selected])):before{bottom:-1px}.ListBox_item_WInvVF[data-disabled]{opacity:var(--opacity-disabled);cursor:default}.ListBox_item_WInvVF[data-focus-visible]{outline:none}.ListBox_item_WInvVF[data-dragging]{display:none}.ListBox_list_Nv3ml2 .react-aria-DropIndicator{margin-block:calc(var(--reforma-listbox-gap) * -1);padding:0;height:0;min-height:0;overflow:visible;pointer-events:none}.ListBox_itemDanger_vjD8WQ{--reforma-listbox-item-color: var(--color-danger-text);--reforma-listbox-item-color--hover: var(--color-danger-text);--reforma-listbox-item-bg--hover: var(--color-danger-muted-light)}.ListBox_itemStart_UuBrQG{display:flex;flex:1 1 0;align-items:center;gap:var(--spacing-md);min-width:0}.ListBox_itemStacked_UYUdsm{padding-block:var(--spacing-8);min-height:auto}.ListBox_itemStacked_UYUdsm .ListBox_itemStart_UuBrQG{align-items:flex-start}.ListBox_itemCopy_nrT5B9{display:flex;flex-direction:column;gap:1px;width:100%;min-width:0}.ListBox_itemCopy_nrT5B9 .ListBox_itemLabel_msTYbB{flex:0 1 auto;width:100%}.ListBox_itemEnd_qBBEeA{display:flex;flex:0 1 auto;justify-content:flex-end;align-items:center;gap:var(--spacing-md);min-width:0;max-width:60%}.ListBox_itemEnd_qBBEeA:empty{display:none}.ListBox_itemLabel_msTYbB{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ListBox_itemDescription_f2HmoW{min-width:0;overflow:hidden;color:var(--color-secondary-muted-text);font-weight:400;font-size:var(--text-sm);line-height:var(--leading-sm);font-family:Onest,sans-serif;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap}.ListBox_itemStartAffix_GePhYN{display:flex;flex-shrink:0;align-items:center;margin-left:calc(var(--spacing-md) * -1)}.ListBox_itemEnd_qBBEeA>*:not(button):not(:has(button)){min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ListBox_item_WInvVF [data-show=item-hover],.ListBox_item_WInvVF [data-show=item-selected],.ListBox_item_WInvVF [data-show=item-both]{opacity:0;transition:opacity var(--transition-duration-fast) ease;pointer-events:none}.ListBox_item_WInvVF [data-show=item-rest]{transition:opacity var(--transition-duration-fast) ease}.ListBox_item_WInvVF[data-hovered] [data-show=item-hover],.ListBox_item_WInvVF:hover [data-show=item-hover]{opacity:1;pointer-events:auto}.ListBox_item_WInvVF[data-hovered] [data-show=item-rest],.ListBox_item_WInvVF:hover [data-show=item-rest]{opacity:0;pointer-events:none}.ListBox_item_WInvVF[data-selected] [data-show=item-selected]{opacity:1;pointer-events:auto}.ListBox_item_WInvVF[data-hovered] [data-show=item-both],.ListBox_item_WInvVF:hover [data-show=item-both],.ListBox_item_WInvVF[data-selected] [data-show=item-both],.ListBox_item_WInvVF:focus-within [data-show=item-both],.ListBox_item_WInvVF[data-open] [data-show=item-both]{opacity:1;pointer-events:auto}.ListBox_menuSeparator_6aBd01{flex-shrink:0;margin-block:calc(var(--reforma-menu-separator-space) - var(--reforma-listbox-gap));border:none;background-color:var(--color-secondary-muted);padding:0;width:100%;height:1px}.ListBox_section_yPokRS{display:flex;flex-direction:column;gap:var(--reforma-listbox-gap)}.ListBox_sectionHeader_d3UiP1{cursor:default;padding:var(--spacing-6) var(--spacing-8) var(--spacing-4);color:var(--color-secondary-muted-text);font-weight:400;font-weight:500;font-size:var(--text-xs);line-height:var(--leading-xs);font-family:Onest,sans-serif;letter-spacing:0}.ListBox_sectionHeader_d3UiP1[data-sticky]{position:sticky;top:0;z-index:var(--z-raised);border-radius:calc(var(--radius-sm) * var(--squircle-radius-factor));background-color:var(--color-surface);corner-shape:superellipse(var(--squircle-value))}}
+@layer components{.ListBox_list_JpvdtZ{--reforma-listbox-gap: var(--spacing-xxs);--reforma-listbox-item-radius: var(--radius-sm);--reforma-listbox-item-height: var(--spacing-30);--reforma-listbox-item-padding-inline: var(--spacing-lg);--reforma-listbox-item-padding: var(--spacing-sm) var(--reforma-listbox-item-padding-inline);--reforma-listbox-item-color: var(--color-text);--reforma-listbox-item-color--hover: var(--color-text);--reforma-listbox-item-bg--hover: var(--color-secondary-muted-light);--reforma-listbox-item-bg--selected: var(--color-secondary-muted);--reforma-listbox-item-color--selected: var(--color-secondary-content);--reforma-listbox-highlight-top: 0px;--reforma-listbox-highlight-left: 0px;--reforma-listbox-highlight-width: 0px;--reforma-listbox-highlight-height: 0px;--reforma-listbox-highlight-opacity: 0;--reforma-listbox-highlight-ease: cubic-bezier(.16, 1, .3, 1);--reforma-menu-separator-space: var(--spacing-xs);display:flex;position:relative;flex-direction:column;gap:var(--reforma-listbox-gap);width:100%}.ListBox_list_JpvdtZ[data-interactive]:before{position:absolute;top:var(--reforma-listbox-highlight-top);left:var(--reforma-listbox-highlight-left);opacity:var(--reforma-listbox-highlight-opacity);border-radius:calc(var(--reforma-listbox-item-radius) * var(--squircle-radius-factor));width:var(--reforma-listbox-highlight-width);height:var(--reforma-listbox-highlight-height);content:"";corner-shape:superellipse(var(--squircle-value));z-index:0;transition:opacity .1s;background-color:var(--reforma-listbox-item-bg--hover);pointer-events:none}.ListBox_list_JpvdtZ[data-interactive][data-highlight-ready]:before{transition:top var(--transition-duration-fast) var(--reforma-listbox-highlight-ease),left var(--transition-duration-fast) var(--reforma-listbox-highlight-ease),width var(--transition-duration-fast) var(--reforma-listbox-highlight-ease),height var(--transition-duration-fast) var(--reforma-listbox-highlight-ease),opacity .1s}.ListBox_list_JpvdtZ[data-interactive][data-highlight-danger]:before{background-color:var(--color-danger-muted-light)}.ListBox_scrollableContainer_geIIr1{width:100%}.ListBox_menuList_sQN3eW{outline:none}.ListBox_list_JpvdtZ[data-empty]{justify-content:center;align-items:center;padding:var(--spacing-md) var(--spacing-lg);min-height:var(--reforma-listbox-item-height);color:var(--color-secondary-muted-text);font-weight:400;font-size:var(--text-sm);line-height:var(--leading-sm);font-family:Onest,sans-serif;letter-spacing:0;text-align:center}.ListBox_item_8cmHfh{display:flex;position:relative;align-items:center;gap:var(--spacing-10);border-radius:calc(var(--reforma-listbox-item-radius) * var(--squircle-radius-factor));padding:var(--reforma-listbox-item-padding);width:100%;min-width:0;min-height:var(--reforma-listbox-item-height);corner-shape:superellipse(var(--squircle-value));z-index:1;cursor:pointer;outline:none;color:var(--reforma-listbox-item-color);-webkit-user-select:none;-moz-user-select:none;isolation:isolate;user-select:none;text-decoration:none}.ListBox_item_8cmHfh:has([data-hotkey]){padding-inline-end:var(--spacing-sm)}.ListBox_item_8cmHfh:has([slot=endAffix] button){padding-inline-end:calc((var(--reforma-listbox-item-height) - var(--spacing-24)) / 2)}.ListBox_item_8cmHfh:before{position:absolute;inset:0;border-radius:inherit;content:"";corner-shape:inherit;z-index:-1;transition:background-color var(--transition-duration-fast),border-radius var(--transition-duration-fast)}.ListBox_list_JpvdtZ[data-size=sm]{--reforma-listbox-item-radius: var(--radius-sm);--reforma-listbox-item-height: var(--spacing-30);--reforma-listbox-item-padding-inline: var(--spacing-lg);--reforma-listbox-item-padding: var(--spacing-sm) var(--reforma-listbox-item-padding-inline)}.ListBox_list_JpvdtZ[data-size=sm] .ListBox_itemLabel_ctFOvE{font-weight:400;font-size:var(--text-sm);line-height:var(--leading-sm);font-family:Onest,sans-serif;letter-spacing:0}.ListBox_list_JpvdtZ[data-size=md]{--reforma-listbox-item-radius: var(--radius-md);--reforma-listbox-item-height: var(--spacing-36);--reforma-listbox-item-padding-inline: var(--spacing-lg);--reforma-listbox-item-padding: var(--spacing-sm) var(--reforma-listbox-item-padding-inline)}.ListBox_list_JpvdtZ[data-size=md] .ListBox_itemLabel_ctFOvE{font-weight:400;font-size:var(--text-md);line-height:var(--leading-md);font-family:Onest,sans-serif;letter-spacing:0}.ListBox_list_JpvdtZ[data-size=lg]{--reforma-listbox-item-radius: var(--radius-lg);--reforma-listbox-item-height: var(--spacing-56);--reforma-listbox-item-padding-inline: var(--spacing-16);--reforma-listbox-item-padding: var(--spacing-10) var(--reforma-listbox-item-padding-inline)}.ListBox_list_JpvdtZ[data-size=lg] .ListBox_item_8cmHfh:has([data-hotkey]){padding-inline-end:var(--spacing-10)}.ListBox_list_JpvdtZ[data-size=lg] .ListBox_itemLabel_ctFOvE{font-weight:400;font-size:var(--text-lg);line-height:var(--leading-lg);font-family:Onest,sans-serif;letter-spacing:0}.ListBox_list_JpvdtZ[data-interactive] .ListBox_item_8cmHfh:hover:not([data-disabled]):not([data-selected]):not([data-highlighted]),.ListBox_item_8cmHfh:is([data-hovered],[data-focus-visible]):not([data-disabled]):not([data-selected]):not([data-highlighted]),.ListBox_item_8cmHfh[data-open]:not([data-disabled]):not([data-selected]):not([data-highlighted]){color:var(--reforma-listbox-item-color--hover)}.ListBox_item_8cmHfh[data-selected]:before,.ListBox_item_8cmHfh[data-highlighted]:before{background-color:var(--reforma-listbox-item-bg--selected)}.ListBox_item_8cmHfh[data-selected],.ListBox_item_8cmHfh[data-highlighted]{color:var(--reforma-listbox-item-color--selected)}.ListBox_list_JpvdtZ .ListBox_item_8cmHfh[data-selected]+.ListBox_item_8cmHfh[data-selected]{border-start-start-radius:0;border-start-end-radius:0}:is(.ListBox_list_JpvdtZ .ListBox_item_8cmHfh[data-selected]+.ListBox_item_8cmHfh[data-selected]):before{top:-1px}.ListBox_list_JpvdtZ .ListBox_item_8cmHfh[data-selected]:has(+.ListBox_item_8cmHfh[data-selected]){border-end-start-radius:0;border-end-end-radius:0}:is(.ListBox_list_JpvdtZ .ListBox_item_8cmHfh[data-selected]:has(+.ListBox_item_8cmHfh[data-selected])):before{bottom:-1px}.ListBox_item_8cmHfh[data-disabled]{opacity:var(--opacity-disabled);cursor:default}.ListBox_item_8cmHfh[data-focus-visible]{outline:none}.ListBox_item_8cmHfh[data-dragging]{display:none}.ListBox_list_JpvdtZ .react-aria-DropIndicator{margin-block:calc(var(--reforma-listbox-gap) * -1);padding:0;height:0;min-height:0;overflow:visible;pointer-events:none}.ListBox_itemDanger_ttnXKb{--reforma-listbox-item-color: var(--color-danger-text);--reforma-listbox-item-color--hover: var(--color-danger-text);--reforma-listbox-item-bg--hover: var(--color-danger-muted-light)}.ListBox_itemStart_2AUJbr{display:flex;flex:1 1 0;align-items:center;gap:var(--spacing-md);min-width:0}.ListBox_itemStacked_Quxi99{padding-block:var(--spacing-8);min-height:auto}.ListBox_itemStacked_Quxi99 .ListBox_itemStart_2AUJbr{align-items:flex-start}.ListBox_itemCopy_GCZhjt{display:flex;flex-direction:column;gap:1px;width:100%;min-width:0}.ListBox_itemCopy_GCZhjt .ListBox_itemLabel_ctFOvE{flex:0 1 auto;width:100%}.ListBox_itemEnd_o6zHrW{display:flex;flex:0 1 auto;justify-content:flex-end;align-items:center;gap:var(--spacing-md);min-width:0;max-width:60%}.ListBox_itemEnd_o6zHrW:empty{display:none}.ListBox_itemLabel_ctFOvE{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ListBox_itemDescription_SoJbTP{min-width:0;overflow:hidden;color:var(--color-secondary-muted-text);font-weight:400;font-size:var(--text-sm);line-height:var(--leading-sm);font-family:Onest,sans-serif;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap}.ListBox_itemStartAffix_BjHXOp{display:flex;flex-shrink:0;align-items:center;margin-left:calc(var(--spacing-md) * -1)}.ListBox_itemEnd_o6zHrW>*:not(button):not(:has(button)){min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ListBox_item_8cmHfh [data-show=item-hover],.ListBox_item_8cmHfh [data-show=item-selected],.ListBox_item_8cmHfh [data-show=item-both]{opacity:0;transition:opacity var(--transition-duration-fast) ease;pointer-events:none}.ListBox_item_8cmHfh [data-show=item-rest]{transition:opacity var(--transition-duration-fast) ease}.ListBox_item_8cmHfh[data-hovered] [data-show=item-hover],.ListBox_item_8cmHfh:hover [data-show=item-hover]{opacity:1;pointer-events:auto}.ListBox_item_8cmHfh[data-hovered] [data-show=item-rest],.ListBox_item_8cmHfh:hover [data-show=item-rest]{opacity:0;pointer-events:none}.ListBox_item_8cmHfh[data-selected] [data-show=item-selected]{opacity:1;pointer-events:auto}.ListBox_item_8cmHfh[data-hovered] [data-show=item-both],.ListBox_item_8cmHfh:hover [data-show=item-both],.ListBox_item_8cmHfh[data-selected] [data-show=item-both],.ListBox_item_8cmHfh:focus-within [data-show=item-both],.ListBox_item_8cmHfh[data-open] [data-show=item-both]{opacity:1;pointer-events:auto}.ListBox_menuSeparator_6r56jX{flex-shrink:0;margin-block:calc(var(--reforma-menu-separator-space) - var(--reforma-listbox-gap));border:none;background-color:var(--color-secondary-muted);padding:0;width:100%;height:1px}.ListBox_section_fHSjC3{display:flex;flex-direction:column;gap:var(--reforma-listbox-gap)}.ListBox_section_fHSjC3+.ListBox_section_fHSjC3{margin-top:var(--spacing-md)}.ListBox_sectionHeader_iHoMut{cursor:default;padding-inline:var(--reforma-listbox-item-padding-inline);padding-block:var(--spacing-6) var(--spacing-4);color:var(--color-secondary-muted-text);font-weight:400;font-weight:500;font-size:var(--text-xs);line-height:var(--leading-xs);font-family:Onest,sans-serif;letter-spacing:0}.ListBox_sectionHeader_iHoMut[data-sticky]{position:sticky;top:0;z-index:var(--z-raised);border-radius:calc(var(--radius-sm) * var(--squircle-radius-factor));background-color:var(--color-surface);corner-shape:superellipse(var(--squircle-value))}}

package/dist/List/ListBox.module.css.js

@@ -1,4 +1,4 @@
-const t = "ListBox_list_Nv3ml2", e = "ListBox_scrollableContainer_aaQIbE", i = "ListBox_menuList_dZBKtY", o = "ListBox_item_WInvVF", s = "ListBox_itemLabel_msTYbB", n = "ListBox_itemDanger_vjD8WQ", m = "ListBox_itemStart_UuBrQG", a = "ListBox_itemStacked_UYUdsm", c = "ListBox_itemCopy_nrT5B9", r = "ListBox_itemEnd_qBBEeA", _ = "ListBox_itemDescription_f2HmoW", B = "ListBox_itemStartAffix_GePhYN", L = "ListBox_menuSeparator_6aBd01", l = "ListBox_section_yPokRS", x = "ListBox_sectionHeader_d3UiP1", d = {
+const t = "ListBox_list_JpvdtZ", e = "ListBox_scrollableContainer_geIIr1", i = "ListBox_menuList_sQN3eW", o = "ListBox_item_8cmHfh", s = "ListBox_itemLabel_ctFOvE", n = "ListBox_itemDanger_ttnXKb", m = "ListBox_itemStart_2AUJbr", c = "ListBox_itemStacked_Quxi99", a = "ListBox_itemCopy_GCZhjt", r = "ListBox_itemEnd_o6zHrW", _ = "ListBox_itemDescription_SoJbTP", L = "ListBox_itemStartAffix_BjHXOp", x = "ListBox_menuSeparator_6r56jX", l = "ListBox_section_fHSjC3", B = "ListBox_sectionHeader_iHoMut", S = {
   list: t,
   scrollableContainer: e,
   menuList: i,
@@ -6,31 +6,31 @@ const t = "ListBox_list_Nv3ml2", e = "ListBox_scrollableContainer_aaQIbE", i = "
   itemLabel: s,
   itemDanger: n,
   itemStart: m,
-  itemStacked: a,
-  itemCopy: c,
+  itemStacked: c,
+  itemCopy: a,
   itemEnd: r,
   itemDescription: _,
-  itemStartAffix: B,
-  menuSeparator: L,
+  itemStartAffix: L,
+  menuSeparator: x,
   section: l,
-  sectionHeader: x
+  sectionHeader: B
 };
 export {
-  d as default,
+  S as default,
   o as item,
-  c as itemCopy,
+  a as itemCopy,
   n as itemDanger,
   _ as itemDescription,
   r as itemEnd,
   s as itemLabel,
-  a as itemStacked,
+  c as itemStacked,
   m as itemStart,
-  B as itemStartAffix,
+  L as itemStartAffix,
   t as list,
   i as menuList,
-  L as menuSeparator,
+  x as menuSeparator,
   e as scrollableContainer,
   l as section,
-  x as sectionHeader
+  B as sectionHeader
 };
 //# sourceMappingURL=ListBox.module.css.js.map

package/dist/List/useListHoverHighlight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListHoverHighlight.d.ts","sourceRoot":"","sources":["../../src/List/useListHoverHighlight.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASlD,KAAK,UAAU,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,WAAW,GAAG,IAAI,CAAC;AAUrE;;GAEG;AACH,wBAAgB,qBAAqB,CACjC,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,OAAO,EAChB,YAAY,GAAE,MAAqB,QAsOtC"}
+{"version":3,"file":"useListHoverHighlight.d.ts","sourceRoot":"","sources":["../../src/List/useListHoverHighlight.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA0BlD,KAAK,UAAU,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,WAAW,GAAG,IAAI,CAAC;AAUrE;;GAEG;AACH,wBAAgB,qBAAqB,CACjC,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,OAAO,EAChB,YAAY,GAAE,MAAqB,QA8OtC"}

package/dist/List/useListHoverHighlight.js

@@ -1,92 +1,97 @@
-import { useEffect as Y } from "react";
-import T from "./ListBox.module.css.js";
-const M = `.${T.item}`, R = 16;
-function k(n) {
-  return n instanceof HTMLElement ? n : n?.current ?? null;
+import { useEffect as X } from "react";
+import F from "./ListBox.module.css.js";
+const k = `.${F.item}`, R = 16, q = 150;
+function D(o) {
+  let l = o.parentElement;
+  for (; l && l !== document.documentElement; ) {
+    const s = getComputedStyle(l).overflowY;
+    if (s === "auto" || s === "scroll")
+      return l;
+    l = l.parentElement;
+  }
+  return o;
 }
-function H(n, g, a = M) {
-  const $ = n instanceof HTMLElement ? n : null;
-  Y(() => {
-    const t = k(n);
-    if (!t || !g)
+function H(o) {
+  return o instanceof HTMLElement ? o : o?.current ?? null;
+}
+function O(o, l, s = k) {
+  const Y = o instanceof HTMLElement ? o : null;
+  X(() => {
+    const t = H(o);
+    if (!t || !l)
       return;
-    let h = !1, i = null, c = 0, d = 0, u = !1;
-    const m = (e) => {
+    let u = !1, c = !1, m = 0, n = null, g = 0, p = 0, d = !1;
+    const v = (e) => {
       if (!(e instanceof Element))
         return null;
-      const r = e.closest(a);
+      const r = e.closest(s);
       return !r || !t.contains(r) ? null : r;
-    }, X = (e) => e.hasAttribute("data-disabled") || e.hasAttribute("data-selected") || e.hasAttribute("data-highlighted") || e.hasAttribute("data-nested-selected"), p = () => t.querySelector(`${a}[data-focus-visible]`), y = (e, r) => {
-      if (!i)
+    }, $ = (e) => e.hasAttribute("data-disabled") || e.hasAttribute("data-selected") || e.hasAttribute("data-highlighted") || e.hasAttribute("data-nested-selected"), E = () => t.querySelector(`${s}[data-focus-visible]`), C = (e, r) => {
+      if (!n)
         return !1;
-      const o = i.getBoundingClientRect();
-      return e >= o.left && e <= o.right && r >= o.top - R && r <= o.bottom + R;
-    }, b = (e) => {
-      const r = t.getBoundingClientRect(), o = e.getBoundingClientRect();
-      t.style.setProperty("--reforma-listbox-highlight-top", `${o.top - r.top + t.scrollTop}px`), t.style.setProperty("--reforma-listbox-highlight-left", `${o.left - r.left + t.scrollLeft}px`), t.style.setProperty("--reforma-listbox-highlight-width", `${o.width}px`), t.style.setProperty("--reforma-listbox-highlight-height", `${o.height}px`);
-    }, s = () => {
-      i = null, t.style.setProperty("--reforma-listbox-highlight-opacity", "0"), t.removeAttribute("data-highlight-ready"), t.removeAttribute("data-highlight-danger");
-    }, l = (e) => {
-      if (!e || X(e)) {
-        s();
+      const i = n.getBoundingClientRect();
+      return e >= i.left && e <= i.right && r >= i.top - R && r <= i.bottom + R;
+    }, M = (e) => {
+      const r = t.getBoundingClientRect(), i = e.getBoundingClientRect();
+      t.style.setProperty("--reforma-listbox-highlight-top", `${i.top - r.top + t.scrollTop}px`), t.style.setProperty("--reforma-listbox-highlight-left", `${i.left - r.left + t.scrollLeft}px`), t.style.setProperty("--reforma-listbox-highlight-width", `${i.width}px`), t.style.setProperty("--reforma-listbox-highlight-height", `${i.height}px`);
+    }, h = () => {
+      n = null, t.style.setProperty("--reforma-listbox-highlight-opacity", "0"), t.removeAttribute("data-highlight-ready"), t.removeAttribute("data-highlight-danger");
+    }, a = (e) => {
+      if (!e || $(e)) {
+        h();
         return;
       }
-      const r = i == null;
-      r && t.removeAttribute("data-highlight-ready"), i = e, b(e), t.toggleAttribute("data-highlight-danger", e.classList.contains(T.itemDanger)), t.style.setProperty("--reforma-listbox-highlight-opacity", "1"), r && requestAnimationFrame(() => {
-        i && t.setAttribute("data-highlight-ready", "");
+      const r = n == null;
+      r && t.removeAttribute("data-highlight-ready"), n = e, M(e), t.toggleAttribute("data-highlight-danger", e.classList.contains(F.itemDanger)), t.style.setProperty("--reforma-listbox-highlight-opacity", "1"), r && requestAnimationFrame(() => {
+        n && t.setAttribute("data-highlight-ready", "");
       });
-    }, v = (e, r, o) => {
-      h = !1;
-      const f = m(e);
-      if (f) {
-        f !== i && l(f);
+    }, L = (e, r, i) => {
+      u = !1;
+      const b = v(e);
+      if (b) {
+        b !== n && a(b);
         return;
       }
-      y(r, o) || s();
-    }, E = (e) => {
-      c = e.clientX, d = e.clientY, u = !0, v(e.target, e.clientX, e.clientY);
-    }, L = (e) => {
-      c = e.clientX, d = e.clientY, u = !0, v(document.elementFromPoint(e.clientX, e.clientY), e.clientX, e.clientY);
+      C(r, i) || h();
     }, P = (e) => {
-      if (!(e.relatedTarget instanceof Node && t.contains(e.relatedTarget)) && (u = !1, !i?.hasAttribute("data-open"))) {
-        if (h) {
-          l(p());
+      g = e.clientX, p = e.clientY, d = !0, !c && L(e.target, e.clientX, e.clientY);
+    }, w = (e) => {
+      g = e.clientX, p = e.clientY, d = !0, !c && L(document.elementFromPoint(e.clientX, e.clientY), e.clientX, e.clientY);
+    }, x = (e) => {
+      if (!(e.relatedTarget instanceof Node && t.contains(e.relatedTarget)) && (d = !1, !n?.hasAttribute("data-open"))) {
+        if (u) {
+          a(E());
           return;
         }
-        s();
+        h();
       }
-    }, x = () => {
-      h = !0, requestAnimationFrame(() => {
-        h && l(p());
-      });
     }, A = () => {
-      if (t.removeAttribute("data-highlight-ready"), u) {
-        const e = m(document.elementFromPoint(c, d));
-        if (e) {
-          l(e);
-          return;
-        }
-        if (!y(c, d)) {
-          s();
-          return;
-        }
-      }
-      i && b(i);
-    }, w = () => {
-      i && t.setAttribute("data-highlight-ready", "");
-    }, F = new MutationObserver(() => {
-      i && l(i);
+      u = !0, requestAnimationFrame(() => {
+        u && a(E());
+      });
+    }, S = () => {
+      c = !1, d && a(v(document.elementFromPoint(g, p)));
+    }, f = () => {
+      window.clearTimeout(m), c || (c = !0, h()), m = window.setTimeout(S, q);
+    }, T = new MutationObserver(() => {
+      n && a(n);
     });
-    return F.observe(t, {
+    T.observe(t, {
       subtree: !0,
       attributes: !0,
       attributeFilter: ["data-selected", "data-disabled", "data-highlighted", "data-nested-selected"]
-    }), t.addEventListener("pointerenter", L), t.addEventListener("pointermove", E), t.addEventListener("pointerleave", P), t.addEventListener("keydown", x), t.addEventListener("scroll", A), t.addEventListener("scrollend", w), l(t.querySelector(`${a}:hover`)), () => {
-      F.disconnect(), t.removeEventListener("pointerenter", L), t.removeEventListener("pointermove", E), t.removeEventListener("pointerleave", P), t.removeEventListener("keydown", x), t.removeEventListener("scroll", A), t.removeEventListener("scrollend", w), s(), t.style.removeProperty("--reforma-listbox-highlight-top"), t.style.removeProperty("--reforma-listbox-highlight-left"), t.style.removeProperty("--reforma-listbox-highlight-width"), t.style.removeProperty("--reforma-listbox-highlight-height"), t.style.removeProperty("--reforma-listbox-highlight-opacity");
+    });
+    const y = D(t);
+    return t.addEventListener("pointerenter", w), t.addEventListener("pointermove", P), t.addEventListener("pointerleave", x), t.addEventListener("keydown", A), t.addEventListener("scroll", f, {
+      passive: !0
+    }), y !== t && y.addEventListener("scroll", f, {
+      passive: !0
+    }), a(t.querySelector(`${s}:hover`)), () => {
+      T.disconnect(), window.clearTimeout(m), t.removeEventListener("pointerenter", w), t.removeEventListener("pointermove", P), t.removeEventListener("pointerleave", x), t.removeEventListener("keydown", A), t.removeEventListener("scroll", f), y.removeEventListener("scroll", f), h(), t.style.removeProperty("--reforma-listbox-highlight-top"), t.style.removeProperty("--reforma-listbox-highlight-left"), t.style.removeProperty("--reforma-listbox-highlight-width"), t.style.removeProperty("--reforma-listbox-highlight-height"), t.style.removeProperty("--reforma-listbox-highlight-opacity");
     };
-  }, [g, a, n, $]);
+  }, [l, s, o, Y]);
 }
 export {
-  H as useListHoverHighlight
+  O as useListHoverHighlight
 };
 //# sourceMappingURL=useListHoverHighlight.js.map

package/dist/List/useListHoverHighlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"useListHoverHighlight.js","sources":["../../src/List/useListHoverHighlight.ts"],"sourcesContent":["import { useEffect, type RefObject } from 'react';\n\nimport styles from './ListBox.module.css';\n\nconst DEFAULT_ITEM = `.${ styles.item }`;\n\n/** Keep the plate across the few pixels between rows. Empty space is farther than this. */\nconst ROW_GAP = 16;\n\ntype ListTarget = RefObject<HTMLElement | null> | HTMLElement | null;\n\nfunction resolveList(target: ListTarget): HTMLElement | null {\n    if (target instanceof HTMLElement) {\n        return target;\n    }\n\n    return target?.current ?? null;\n}\n\n/**\n * Slides one highlight plate across list/menu rows (hover + keyboard), instead of painting each row.\n */\nexport function useListHoverHighlight(\n    list: ListTarget,\n    enabled: boolean,\n    itemSelector: string = DEFAULT_ITEM\n) {\n    const listEl = list instanceof HTMLElement ? list : null;\n\n    useEffect(() => {\n        const root = resolveList(list);\n\n        if (!root || !enabled) {\n            return;\n        }\n\n        let followKeyboard = false;\n        let current: HTMLElement | null = null;\n        let pointerX = 0;\n        let pointerY = 0;\n        let hasPointer = false;\n\n        const rowFrom = (target: EventTarget | null) => {\n            if (!(target instanceof Element)) {\n                return null;\n            }\n\n            const row = target.closest<HTMLElement>(itemSelector);\n\n            if (!row || !root.contains(row)) {\n                return null;\n            }\n\n            return row;\n        };\n\n        const blocked = (row: HTMLElement) => (\n            row.hasAttribute('data-disabled')\n            || row.hasAttribute('data-selected')\n            || row.hasAttribute('data-highlighted')\n            || row.hasAttribute('data-nested-selected')\n        );\n\n        const keyboardRow = () => (\n            root.querySelector<HTMLElement>(`${ itemSelector }[data-focus-visible]`)\n        );\n\n        const besideCurrent = (x: number, y: number) => {\n            if (!current) {\n                return false;\n            }\n\n            const box = current.getBoundingClientRect();\n\n            return x >= box.left && x <= box.right\n                && y >= box.top - ROW_GAP && y <= box.bottom + ROW_GAP;\n        };\n\n        const setGeometry = (row: HTMLElement) => {\n            const listRect = root.getBoundingClientRect();\n            const rowRect = row.getBoundingClientRect();\n\n            root.style.setProperty('--reforma-listbox-highlight-top', `${ rowRect.top - listRect.top + root.scrollTop }px`);\n            root.style.setProperty('--reforma-listbox-highlight-left', `${ rowRect.left - listRect.left + root.scrollLeft }px`);\n            root.style.setProperty('--reforma-listbox-highlight-width', `${ rowRect.width }px`);\n            root.style.setProperty('--reforma-listbox-highlight-height', `${ rowRect.height }px`);\n        };\n\n        const hide = () => {\n            current = null;\n            root.style.setProperty('--reforma-listbox-highlight-opacity', '0');\n            root.removeAttribute('data-highlight-ready');\n            root.removeAttribute('data-highlight-danger');\n        };\n\n        const show = (row: HTMLElement | null) => {\n            if (!row || blocked(row)) {\n                hide();\n\n                return;\n            }\n\n            const appeared = current == null;\n\n            if (appeared) {\n                root.removeAttribute('data-highlight-ready');\n            }\n\n            current = row;\n            setGeometry(row);\n            root.toggleAttribute('data-highlight-danger', row.classList.contains(styles.itemDanger));\n            root.style.setProperty('--reforma-listbox-highlight-opacity', '1');\n\n            if (appeared) {\n                requestAnimationFrame(() => {\n                    if (current) {\n                        root.setAttribute('data-highlight-ready', '');\n                    }\n                });\n            }\n        };\n\n        const followPointer = (target: EventTarget | null, x: number, y: number) => {\n            followKeyboard = false;\n            const row = rowFrom(target);\n\n            if (row) {\n                if (row !== current) {\n                    show(row);\n                }\n\n                return;\n            }\n\n            if (!besideCurrent(x, y)) {\n                hide();\n            }\n        };\n\n        const onPointerMove = (event: PointerEvent) => {\n            pointerX = event.clientX;\n            pointerY = event.clientY;\n            hasPointer = true;\n            followPointer(event.target, event.clientX, event.clientY);\n        };\n\n        const onPointerEnter = (event: PointerEvent) => {\n            pointerX = event.clientX;\n            pointerY = event.clientY;\n            hasPointer = true;\n            followPointer(\n                document.elementFromPoint(event.clientX, event.clientY),\n                event.clientX,\n                event.clientY\n            );\n        };\n\n        const onPointerLeave = (event: PointerEvent) => {\n            if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) {\n                return;\n            }\n\n            hasPointer = false;\n\n            if (current?.hasAttribute('data-open')) {\n                return;\n            }\n\n            if (followKeyboard) {\n                show(keyboardRow());\n\n                return;\n            }\n\n            hide();\n        };\n\n        const onKeyDown = () => {\n            followKeyboard = true;\n            requestAnimationFrame(() => {\n                if (followKeyboard) {\n                    show(keyboardRow());\n                }\n            });\n        };\n\n        const onScroll = () => {\n            root.removeAttribute('data-highlight-ready');\n\n            // Virtualized lists recycle the hovered node; re-hit-test instead of following `current`.\n            if (hasPointer) {\n                const row = rowFrom(document.elementFromPoint(pointerX, pointerY));\n\n                if (row) {\n                    show(row);\n\n                    return;\n                }\n\n                if (!besideCurrent(pointerX, pointerY)) {\n                    hide();\n\n                    return;\n                }\n            }\n\n            if (current) {\n                setGeometry(current);\n            }\n        };\n\n        const onScrollEnd = () => {\n            if (current) {\n                root.setAttribute('data-highlight-ready', '');\n            }\n        };\n\n        // Selection lands after pointerup. Re-run show so a blocked row drops the plate.\n        const rowState = new MutationObserver(() => {\n            if (current) {\n                show(current);\n            }\n        });\n\n        rowState.observe(root, {\n            subtree: true,\n            attributes: true,\n            attributeFilter: ['data-selected', 'data-disabled', 'data-highlighted', 'data-nested-selected'],\n        });\n\n        root.addEventListener('pointerenter', onPointerEnter);\n        root.addEventListener('pointermove', onPointerMove);\n        root.addEventListener('pointerleave', onPointerLeave);\n        root.addEventListener('keydown', onKeyDown);\n        root.addEventListener('scroll', onScroll);\n        root.addEventListener('scrollend', onScrollEnd);\n\n        show(root.querySelector<HTMLElement>(`${ itemSelector }:hover`));\n\n        return () => {\n            rowState.disconnect();\n            root.removeEventListener('pointerenter', onPointerEnter);\n            root.removeEventListener('pointermove', onPointerMove);\n            root.removeEventListener('pointerleave', onPointerLeave);\n            root.removeEventListener('keydown', onKeyDown);\n            root.removeEventListener('scroll', onScroll);\n            root.removeEventListener('scrollend', onScrollEnd);\n            hide();\n            root.style.removeProperty('--reforma-listbox-highlight-top');\n            root.style.removeProperty('--reforma-listbox-highlight-left');\n            root.style.removeProperty('--reforma-listbox-highlight-width');\n            root.style.removeProperty('--reforma-listbox-highlight-height');\n            root.style.removeProperty('--reforma-listbox-highlight-opacity');\n        };\n    }, [enabled, itemSelector, list, listEl]);\n}\n"],"names":["DEFAULT_ITEM","styles","ROW_GAP","resolveList","target","useListHoverHighlight","list","enabled","itemSelector","listEl","useEffect","root","followKeyboard","current","pointerX","pointerY","hasPointer","rowFrom","row","blocked","keyboardRow","besideCurrent","x","y","box","setGeometry","listRect","rowRect","hide","show","appeared","followPointer","onPointerMove","event","onPointerEnter","onPointerLeave","onKeyDown","onScroll","onScrollEnd","rowState"],"mappings":";;AAEA,MAAMA,IAAe,IAAIC,EAAO,IAAI,IAG9BC,IAAU;AAChB,SAASC,EAAYC,GAAQ;AAC3B,SAAIA,aAAkB,cACbA,IAEFA,GAAQ,WAAW;AAC5B;AAKO,SAASC,EAAsBC,GAAMC,GAASC,IAAeR,GAAc;AAChF,QAAMS,IAASH,aAAgB,cAAcA,IAAO;AACpD,EAAAI,EAAU,MAAM;AACd,UAAMC,IAAOR,EAAYG,CAAI;AAC7B,QAAI,CAACK,KAAQ,CAACJ;AACZ;AAEF,QAAIK,IAAiB,IACjBC,IAAU,MACVC,IAAW,GACXC,IAAW,GACXC,IAAa;AACjB,UAAMC,IAAU,CAAAb,MAAU;AACxB,UAAI,EAAEA,aAAkB;AACtB,eAAO;AAET,YAAMc,IAAMd,EAAO,QAAQI,CAAY;AACvC,aAAI,CAACU,KAAO,CAACP,EAAK,SAASO,CAAG,IACrB,OAEFA;AAAA,IACT,GACMC,IAAU,CAAAD,MAAOA,EAAI,aAAa,eAAe,KAAKA,EAAI,aAAa,eAAe,KAAKA,EAAI,aAAa,kBAAkB,KAAKA,EAAI,aAAa,sBAAsB,GAC1KE,IAAc,MAAMT,EAAK,cAAc,GAAGH,CAAY,sBAAsB,GAC5Ea,IAAgB,CAACC,GAAGC,MAAM;AAC9B,UAAI,CAACV;AACH,eAAO;AAET,YAAMW,IAAMX,EAAQ,sBAAA;AACpB,aAAOS,KAAKE,EAAI,QAAQF,KAAKE,EAAI,SAASD,KAAKC,EAAI,MAAMtB,KAAWqB,KAAKC,EAAI,SAAStB;AAAA,IACxF,GACMuB,IAAc,CAAAP,MAAO;AACzB,YAAMQ,IAAWf,EAAK,sBAAA,GAChBgB,IAAUT,EAAI,sBAAA;AACpB,MAAAP,EAAK,MAAM,YAAY,mCAAmC,GAAGgB,EAAQ,MAAMD,EAAS,MAAMf,EAAK,SAAS,IAAI,GAC5GA,EAAK,MAAM,YAAY,oCAAoC,GAAGgB,EAAQ,OAAOD,EAAS,OAAOf,EAAK,UAAU,IAAI,GAChHA,EAAK,MAAM,YAAY,qCAAqC,GAAGgB,EAAQ,KAAK,IAAI,GAChFhB,EAAK,MAAM,YAAY,sCAAsC,GAAGgB,EAAQ,MAAM,IAAI;AAAA,IACpF,GACMC,IAAO,MAAM;AACjB,MAAAf,IAAU,MACVF,EAAK,MAAM,YAAY,uCAAuC,GAAG,GACjEA,EAAK,gBAAgB,sBAAsB,GAC3CA,EAAK,gBAAgB,uBAAuB;AAAA,IAC9C,GACMkB,IAAO,CAAAX,MAAO;AAClB,UAAI,CAACA,KAAOC,EAAQD,CAAG,GAAG;AACxB,QAAAU,EAAA;AACA;AAAA,MACF;AACA,YAAME,IAAWjB,KAAW;AAC5B,MAAIiB,KACFnB,EAAK,gBAAgB,sBAAsB,GAE7CE,IAAUK,GACVO,EAAYP,CAAG,GACfP,EAAK,gBAAgB,yBAAyBO,EAAI,UAAU,SAASjB,EAAO,UAAU,CAAC,GACvFU,EAAK,MAAM,YAAY,uCAAuC,GAAG,GAC7DmB,KACF,sBAAsB,MAAM;AAC1B,QAAIjB,KACFF,EAAK,aAAa,wBAAwB,EAAE;AAAA,MAEhD,CAAC;AAAA,IAEL,GACMoB,IAAgB,CAAC3B,GAAQkB,GAAGC,MAAM;AACtC,MAAAX,IAAiB;AACjB,YAAMM,IAAMD,EAAQb,CAAM;AAC1B,UAAIc,GAAK;AACP,QAAIA,MAAQL,KACVgB,EAAKX,CAAG;AAEV;AAAA,MACF;AACA,MAAKG,EAAcC,GAAGC,CAAC,KACrBK,EAAA;AAAA,IAEJ,GACMI,IAAgB,CAAAC,MAAS;AAC7B,MAAAnB,IAAWmB,EAAM,SACjBlB,IAAWkB,EAAM,SACjBjB,IAAa,IACbe,EAAcE,EAAM,QAAQA,EAAM,SAASA,EAAM,OAAO;AAAA,IAC1D,GACMC,IAAiB,CAAAD,MAAS;AAC9B,MAAAnB,IAAWmB,EAAM,SACjBlB,IAAWkB,EAAM,SACjBjB,IAAa,IACbe,EAAc,SAAS,iBAAiBE,EAAM,SAASA,EAAM,OAAO,GAAGA,EAAM,SAASA,EAAM,OAAO;AAAA,IACrG,GACME,IAAiB,CAAAF,MAAS;AAC9B,UAAI,EAAAA,EAAM,yBAAyB,QAAQtB,EAAK,SAASsB,EAAM,aAAa,OAG5EjB,IAAa,IACT,CAAAH,GAAS,aAAa,WAAW,IAGrC;AAAA,YAAID,GAAgB;AAClB,UAAAiB,EAAKT,GAAa;AAClB;AAAA,QACF;AACA,QAAAQ,EAAA;AAAA;AAAA,IACF,GACMQ,IAAY,MAAM;AACtB,MAAAxB,IAAiB,IACjB,sBAAsB,MAAM;AAC1B,QAAIA,KACFiB,EAAKT,GAAa;AAAA,MAEtB,CAAC;AAAA,IACH,GACMiB,IAAW,MAAM;AAIrB,UAHA1B,EAAK,gBAAgB,sBAAsB,GAGvCK,GAAY;AACd,cAAME,IAAMD,EAAQ,SAAS,iBAAiBH,GAAUC,CAAQ,CAAC;AACjE,YAAIG,GAAK;AACP,UAAAW,EAAKX,CAAG;AACR;AAAA,QACF;AACA,YAAI,CAACG,EAAcP,GAAUC,CAAQ,GAAG;AACtC,UAAAa,EAAA;AACA;AAAA,QACF;AAAA,MACF;AACA,MAAIf,KACFY,EAAYZ,CAAO;AAAA,IAEvB,GACMyB,IAAc,MAAM;AACxB,MAAIzB,KACFF,EAAK,aAAa,wBAAwB,EAAE;AAAA,IAEhD,GAGM4B,IAAW,IAAI,iBAAiB,MAAM;AAC1C,MAAI1B,KACFgB,EAAKhB,CAAO;AAAA,IAEhB,CAAC;AACD,WAAA0B,EAAS,QAAQ5B,GAAM;AAAA,MACrB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,iBAAiB,CAAC,iBAAiB,iBAAiB,oBAAoB,sBAAsB;AAAA,IAAA,CAC/F,GACDA,EAAK,iBAAiB,gBAAgBuB,CAAc,GACpDvB,EAAK,iBAAiB,eAAeqB,CAAa,GAClDrB,EAAK,iBAAiB,gBAAgBwB,CAAc,GACpDxB,EAAK,iBAAiB,WAAWyB,CAAS,GAC1CzB,EAAK,iBAAiB,UAAU0B,CAAQ,GACxC1B,EAAK,iBAAiB,aAAa2B,CAAW,GAC9CT,EAAKlB,EAAK,cAAc,GAAGH,CAAY,QAAQ,CAAC,GACzC,MAAM;AACX,MAAA+B,EAAS,WAAA,GACT5B,EAAK,oBAAoB,gBAAgBuB,CAAc,GACvDvB,EAAK,oBAAoB,eAAeqB,CAAa,GACrDrB,EAAK,oBAAoB,gBAAgBwB,CAAc,GACvDxB,EAAK,oBAAoB,WAAWyB,CAAS,GAC7CzB,EAAK,oBAAoB,UAAU0B,CAAQ,GAC3C1B,EAAK,oBAAoB,aAAa2B,CAAW,GACjDV,EAAA,GACAjB,EAAK,MAAM,eAAe,iCAAiC,GAC3DA,EAAK,MAAM,eAAe,kCAAkC,GAC5DA,EAAK,MAAM,eAAe,mCAAmC,GAC7DA,EAAK,MAAM,eAAe,oCAAoC,GAC9DA,EAAK,MAAM,eAAe,qCAAqC;AAAA,IACjE;AAAA,EACF,GAAG,CAACJ,GAASC,GAAcF,GAAMG,CAAM,CAAC;AAC1C;"}
+{"version":3,"file":"useListHoverHighlight.js","sources":["../../src/List/useListHoverHighlight.ts"],"sourcesContent":["import { useEffect, type RefObject } from 'react';\n\nimport styles from './ListBox.module.css';\n\nconst DEFAULT_ITEM = `.${ styles.item }`;\n\n/** Keep the plate across the few pixels between rows. Empty space is farther than this. */\nconst ROW_GAP = 16;\nconst SCROLL_IDLE_MS = 150;\n\nfunction scrollPort(node: HTMLElement): HTMLElement {\n    let current = node.parentElement;\n\n    while (current && current !== document.documentElement) {\n        const overflow = getComputedStyle(current).overflowY;\n\n        if (overflow === 'auto' || overflow === 'scroll') {\n            return current;\n        }\n\n        current = current.parentElement;\n    }\n\n    return node;\n}\n\ntype ListTarget = RefObject<HTMLElement | null> | HTMLElement | null;\n\nfunction resolveList(target: ListTarget): HTMLElement | null {\n    if (target instanceof HTMLElement) {\n        return target;\n    }\n\n    return target?.current ?? null;\n}\n\n/**\n * Slides one highlight plate across list/menu rows (hover + keyboard), instead of painting each row.\n */\nexport function useListHoverHighlight(\n    list: ListTarget,\n    enabled: boolean,\n    itemSelector: string = DEFAULT_ITEM\n) {\n    const listEl = list instanceof HTMLElement ? list : null;\n\n    useEffect(() => {\n        const root = resolveList(list);\n\n        if (!root || !enabled) {\n            return;\n        }\n\n        let followKeyboard = false;\n        let scrolling = false;\n        let scrollTimer = 0;\n        let current: HTMLElement | null = null;\n        let pointerX = 0;\n        let pointerY = 0;\n        let hasPointer = false;\n\n        const rowFrom = (target: EventTarget | null) => {\n            if (!(target instanceof Element)) {\n                return null;\n            }\n\n            const row = target.closest<HTMLElement>(itemSelector);\n\n            if (!row || !root.contains(row)) {\n                return null;\n            }\n\n            return row;\n        };\n\n        const blocked = (row: HTMLElement) => (\n            row.hasAttribute('data-disabled')\n            || row.hasAttribute('data-selected')\n            || row.hasAttribute('data-highlighted')\n            || row.hasAttribute('data-nested-selected')\n        );\n\n        const keyboardRow = () => (\n            root.querySelector<HTMLElement>(`${ itemSelector }[data-focus-visible]`)\n        );\n\n        const besideCurrent = (x: number, y: number) => {\n            if (!current) {\n                return false;\n            }\n\n            const box = current.getBoundingClientRect();\n\n            return x >= box.left && x <= box.right\n                && y >= box.top - ROW_GAP && y <= box.bottom + ROW_GAP;\n        };\n\n        const setGeometry = (row: HTMLElement) => {\n            const listRect = root.getBoundingClientRect();\n            const rowRect = row.getBoundingClientRect();\n\n            root.style.setProperty('--reforma-listbox-highlight-top', `${ rowRect.top - listRect.top + root.scrollTop }px`);\n            root.style.setProperty('--reforma-listbox-highlight-left', `${ rowRect.left - listRect.left + root.scrollLeft }px`);\n            root.style.setProperty('--reforma-listbox-highlight-width', `${ rowRect.width }px`);\n            root.style.setProperty('--reforma-listbox-highlight-height', `${ rowRect.height }px`);\n        };\n\n        const hide = () => {\n            current = null;\n            root.style.setProperty('--reforma-listbox-highlight-opacity', '0');\n            root.removeAttribute('data-highlight-ready');\n            root.removeAttribute('data-highlight-danger');\n        };\n\n        const show = (row: HTMLElement | null) => {\n            if (!row || blocked(row)) {\n                hide();\n\n                return;\n            }\n\n            const appeared = current == null;\n\n            if (appeared) {\n                root.removeAttribute('data-highlight-ready');\n            }\n\n            current = row;\n            setGeometry(row);\n            root.toggleAttribute('data-highlight-danger', row.classList.contains(styles.itemDanger));\n            root.style.setProperty('--reforma-listbox-highlight-opacity', '1');\n\n            if (appeared) {\n                requestAnimationFrame(() => {\n                    if (current) {\n                        root.setAttribute('data-highlight-ready', '');\n                    }\n                });\n            }\n        };\n\n        const followPointer = (target: EventTarget | null, x: number, y: number) => {\n            followKeyboard = false;\n            const row = rowFrom(target);\n\n            if (row) {\n                if (row !== current) {\n                    show(row);\n                }\n\n                return;\n            }\n\n            if (!besideCurrent(x, y)) {\n                hide();\n            }\n        };\n\n        const onPointerMove = (event: PointerEvent) => {\n            pointerX = event.clientX;\n            pointerY = event.clientY;\n            hasPointer = true;\n\n            if (scrolling) {\n                return;\n            }\n\n            followPointer(event.target, event.clientX, event.clientY);\n        };\n\n        const onPointerEnter = (event: PointerEvent) => {\n            pointerX = event.clientX;\n            pointerY = event.clientY;\n            hasPointer = true;\n\n            if (scrolling) {\n                return;\n            }\n\n            followPointer(\n                document.elementFromPoint(event.clientX, event.clientY),\n                event.clientX,\n                event.clientY\n            );\n        };\n\n        const onPointerLeave = (event: PointerEvent) => {\n            if (event.relatedTarget instanceof Node && root.contains(event.relatedTarget)) {\n                return;\n            }\n\n            hasPointer = false;\n\n            if (current?.hasAttribute('data-open')) {\n                return;\n            }\n\n            if (followKeyboard) {\n                show(keyboardRow());\n\n                return;\n            }\n\n            hide();\n        };\n\n        const onKeyDown = () => {\n            followKeyboard = true;\n            requestAnimationFrame(() => {\n                if (followKeyboard) {\n                    show(keyboardRow());\n                }\n            });\n        };\n\n        const finishScroll = () => {\n            scrolling = false;\n\n            if (!hasPointer) {\n                return;\n            }\n\n            show(rowFrom(document.elementFromPoint(pointerX, pointerY)));\n        };\n\n        const onScroll = () => {\n            window.clearTimeout(scrollTimer);\n\n            if (!scrolling) {\n                scrolling = true;\n                hide();\n            }\n\n            scrollTimer = window.setTimeout(finishScroll, SCROLL_IDLE_MS);\n        };\n\n        // Selection lands after pointerup. Re-run show so a blocked row drops the plate.\n        const rowState = new MutationObserver(() => {\n            if (current) {\n                show(current);\n            }\n        });\n\n        rowState.observe(root, {\n            subtree: true,\n            attributes: true,\n            attributeFilter: ['data-selected', 'data-disabled', 'data-highlighted', 'data-nested-selected'],\n        });\n\n        const port = scrollPort(root);\n\n        root.addEventListener('pointerenter', onPointerEnter);\n        root.addEventListener('pointermove', onPointerMove);\n        root.addEventListener('pointerleave', onPointerLeave);\n        root.addEventListener('keydown', onKeyDown);\n        root.addEventListener('scroll', onScroll, { passive: true });\n\n        if (port !== root) {\n            port.addEventListener('scroll', onScroll, { passive: true });\n        }\n\n        show(root.querySelector<HTMLElement>(`${ itemSelector }:hover`));\n\n        return () => {\n            rowState.disconnect();\n            window.clearTimeout(scrollTimer);\n            root.removeEventListener('pointerenter', onPointerEnter);\n            root.removeEventListener('pointermove', onPointerMove);\n            root.removeEventListener('pointerleave', onPointerLeave);\n            root.removeEventListener('keydown', onKeyDown);\n            root.removeEventListener('scroll', onScroll);\n            port.removeEventListener('scroll', onScroll);\n            hide();\n            root.style.removeProperty('--reforma-listbox-highlight-top');\n            root.style.removeProperty('--reforma-listbox-highlight-left');\n            root.style.removeProperty('--reforma-listbox-highlight-width');\n            root.style.removeProperty('--reforma-listbox-highlight-height');\n            root.style.removeProperty('--reforma-listbox-highlight-opacity');\n        };\n    }, [enabled, itemSelector, list, listEl]);\n}\n"],"names":["DEFAULT_ITEM","styles","ROW_GAP","SCROLL_IDLE_MS","scrollPort","node","current","overflow","resolveList","target","useListHoverHighlight","list","enabled","itemSelector","listEl","useEffect","root","followKeyboard","scrolling","scrollTimer","pointerX","pointerY","hasPointer","rowFrom","row","blocked","keyboardRow","besideCurrent","x","y","box","setGeometry","listRect","rowRect","hide","show","appeared","followPointer","onPointerMove","event","onPointerEnter","onPointerLeave","onKeyDown","finishScroll","onScroll","rowState","port"],"mappings":"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"}

package/dist/Loader/Loader.module.css

@@ -1 +1 @@
-@layer components{.Loader_root_SBmmZJ{--loader-size: 1em;display:flex;flex-shrink:0;justify-content:center;align-items:center;width:var(--loader-size);height:var(--loader-size);color:var(--color-text-secondary)}.Loader_root_SBmmZJ svg{width:100%;height:100%}.Loader_root_SBmmZJ[data-size=xxs]{--loader-size: var(--spacing-12)}.Loader_root_SBmmZJ[data-size=xs]{--loader-size: var(--spacing-16)}.Loader_root_SBmmZJ[data-size=sm]{--loader-size: var(--spacing-20)}.Loader_root_SBmmZJ[data-size=md]{--loader-size: var(--spacing-24)}.Loader_root_SBmmZJ[data-size=lg]{--loader-size: var(--spacing-28)}.Loader_root_SBmmZJ[data-size=xl]{--loader-size: var(--spacing-32)}.Loader_root_SBmmZJ[data-size=xxl]{--loader-size: var(--spacing-36)}}
+@layer components{.Loader_root_aWwNUZ{--loader-size: 1em;display:flex;flex-shrink:0;justify-content:center;align-items:center;width:var(--loader-size);height:var(--loader-size);color:var(--color-text-secondary)}.Loader_root_aWwNUZ svg{width:100%;height:100%}.Loader_root_aWwNUZ[data-size=xxs]{--loader-size: var(--spacing-12)}.Loader_root_aWwNUZ[data-size=xs]{--loader-size: var(--spacing-16)}.Loader_root_aWwNUZ[data-size=sm]{--loader-size: var(--spacing-20)}.Loader_root_aWwNUZ[data-size=md]{--loader-size: var(--spacing-24)}.Loader_root_aWwNUZ[data-size=lg]{--loader-size: var(--spacing-28)}.Loader_root_aWwNUZ[data-size=xl]{--loader-size: var(--spacing-32)}.Loader_root_aWwNUZ[data-size=xxl]{--loader-size: var(--spacing-36)}}