@epilot/zenith-react 0.2.0-next.3 → 0.2.0-next.4

package/dist/components/scroll-area/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","sources":["../../../src/components/scroll-area/scroll-area.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as Primitive from \"@radix-ui/react-scroll-area\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { useScrollbarStyles } from \"./scrollbar-styles\"\n\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\"\nexport type ScrollAreaVisibility = \"interaction\" | \"always\"\nexport type ScrollAreaProps = Omit<\n  React.ComponentPropsWithoutRef<typeof Primitive.Root>,\n  \"asChild\" | \"type\" | \"scrollHideDelay\"\n> & {\n  orientation?: ScrollAreaOrientation\n  visibility?: ScrollAreaVisibility\n}\nexport type ScrollAreaViewportProps = Omit<\n  React.ComponentPropsWithoutRef<typeof Primitive.Viewport>,\n  \"asChild\"\n>\n\nconst Context = React.createContext<{\n  orientation: ScrollAreaOrientation\n  onScroll: () => void\n} | null>(null)\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    position: \"relative\",\n    minWidth: 0,\n    minHeight: 0,\n    ...shorthands.overflow(\"hidden\"),\n    [`&[data-revealed='true'] > [${SLOT_ATTR}='scroll-area-scrollbar']`]: {\n      opacity: 1,\n      pointerEvents: \"auto\",\n    },\n    \"@media (forced-colors: active)\": {\n      [`& > [${SLOT_ATTR}='scroll-area-scrollbar']`]: {\n        opacity: 1,\n        pointerEvents: \"auto\",\n        backgroundColor: \"Canvas\",\n      },\n    },\n  },\n  viewport: {\n    width: \"100%\",\n    height: \"100%\",\n    minWidth: 0,\n    minHeight: 0,\n    boxSizing: \"border-box\",\n    borderRadius: \"inherit\",\n    \":focus-visible\": {\n      outlineWidth: \"3px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n      outlineOffset: \"-3px\",\n    },\n  },\n  verticalContent: {\n    ...boxModel,\n    // Radix's measurement wrapper defaults to display:table, which expands long lines.\n    \"& > div\": { display: \"block\", minWidth: \"100%\" },\n  },\n  reserveVertical: { paddingInlineEnd: \"12px\" },\n  reserveHorizontal: { paddingBottom: \"12px\" },\n  track: {\n    boxSizing: \"border-box\",\n    ...shorthands.padding(\"3px\"),\n    backgroundColor: \"transparent\",\n    opacity: 0,\n    pointerEvents: \"none\",\n    transitionProperty: \"opacity\",\n    transitionDuration: \"120ms\",\n    \"@media (prefers-reduced-motion: reduce)\": { transitionDuration: \"0s\" },\n    [`&:hover > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n      backgroundColor: tokens.grayA10,\n    },\n    [`&:active > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n      backgroundColor: tokens.grayA11,\n    },\n    \"@media (forced-colors: active)\": {\n      [`& > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n        backgroundColor: \"ButtonText\",\n        forcedColorAdjust: \"none\",\n      },\n    },\n  },\n  vertical: { width: \"12px\" },\n  horizontal: { height: \"12px\", flexDirection: \"column\" },\n  thumb: { backgroundColor: tokens.grayA9 },\n  // Radix owns thumb length (including its 18px minimum) and uses it in drag math.\n  // A CSS-only minimum overrides the paint but not that math, overshooting the track.\n  corner: { backgroundColor: \"transparent\", pointerEvents: \"none\" },\n})\n\n/** Native scrolling with Radix tracks. Dimensions belong here; scroll refs belong to the viewport. */\nexport const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  function ScrollArea(\n    {\n      orientation = \"vertical\",\n      visibility = \"interaction\",\n      className,\n      children,\n      onPointerEnter,\n      onPointerLeave,\n      onFocusCapture,\n      onBlurCapture,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const scrollbar = useScrollbarStyles()\n    const root = React.useRef<HTMLDivElement | null>(null)\n    const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(\n      undefined\n    )\n    const interaction = React.useRef({\n      hover: false,\n      focus: false,\n      drag: false,\n    })\n    const [revealed, setRevealed] = React.useState(false)\n    const clear = React.useCallback(() => {\n      clearTimeout(timer.current)\n    }, [])\n    const reveal = React.useCallback(() => {\n      clear()\n      setRevealed(true)\n    }, [clear])\n    const settle = React.useCallback(() => {\n      clear()\n      if (!Object.values(interaction.current).some(Boolean)) {\n        timer.current = setTimeout(() => setRevealed(false), 600)\n      }\n    }, [clear])\n    const pulse = React.useCallback(() => {\n      reveal()\n      settle()\n    }, [reveal, settle])\n    React.useEffect(() => {\n      const doc = root.current?.ownerDocument\n      const endDrag = () => {\n        if (interaction.current.drag) {\n          interaction.current.drag = false\n          settle()\n        }\n      }\n      doc?.addEventListener(\"pointerup\", endDrag, true)\n      doc?.addEventListener(\"pointercancel\", endDrag, true)\n      return () => {\n        clear()\n        doc?.removeEventListener(\"pointerup\", endDrag, true)\n        doc?.removeEventListener(\"pointercancel\", endDrag, true)\n      }\n    }, [clear, settle])\n    const context = React.useMemo(\n      () => ({ orientation, onScroll: pulse }),\n      [orientation, pulse]\n    )\n    const tracks =\n      orientation === \"both\"\n        ? ([\"vertical\", \"horizontal\"] as const)\n        : [orientation]\n    return (\n      <Context.Provider value={context}>\n        <Primitive.Root\n          {...props}\n          type=\"auto\"\n          ref={(node) => {\n            root.current = node\n            if (typeof ref === \"function\") ref(node)\n            else if (ref) ref.current = node\n          }}\n          data-slot=\"scroll-area\"\n          {...{ [SLOT_ATTR]: \"scroll-area\" }}\n          data-orientation={orientation}\n          data-revealed={visibility === \"always\" || revealed}\n          className={mergeClasses(styles.root, className)}\n          onPointerEnter={(event) => {\n            if (event.pointerType !== \"touch\") {\n              interaction.current.hover = true\n              reveal()\n            }\n            onPointerEnter?.(event)\n          }}\n          onPointerLeave={(event) => {\n            interaction.current.hover = false\n            settle()\n            onPointerLeave?.(event)\n          }}\n          onFocusCapture={(event) => {\n            interaction.current.focus = true\n            reveal()\n            onFocusCapture?.(event)\n          }}\n          onBlurCapture={(event) => {\n            if (!event.currentTarget.contains(event.relatedTarget)) {\n              interaction.current.focus = false\n              settle()\n            }\n            onBlurCapture?.(event)\n          }}\n        >\n          {children}\n          {tracks.map((axis) => (\n            <Primitive.Scrollbar\n              key={axis}\n              orientation={axis}\n              data-slot=\"scroll-area-scrollbar\"\n              {...{ [SLOT_ATTR]: \"scroll-area-scrollbar\" }}\n              className={mergeClasses(\n                scrollbar.track,\n                styles.track,\n                styles[axis]\n              )}\n              onPointerDown={() => {\n                interaction.current.drag = true\n                reveal()\n              }}\n            >\n              <Primitive.Thumb\n                data-slot=\"scroll-area-thumb\"\n                {...{ [SLOT_ATTR]: \"scroll-area-thumb\" }}\n                className={mergeClasses(scrollbar.thumb, styles.thumb)}\n              />\n            </Primitive.Scrollbar>\n          ))}\n          {orientation === \"both\" && (\n            <Primitive.Corner className={styles.corner} />\n          )}\n        </Primitive.Root>\n      </Context.Provider>\n    )\n  }\n)\n\n/** Put keyboard focus, accessible naming and onScroll on this actual scroll element. */\nexport const ScrollAreaViewport = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaViewportProps\n>(function ScrollAreaViewport({ className, onScroll, ...props }, ref) {\n  const context = React.useContext(Context)\n  const styles = useStyles()\n  if (!context)\n    throw new Error(\"ScrollAreaViewport requires a ScrollArea parent\")\n  return (\n    <Primitive.Viewport\n      {...props}\n      ref={ref}\n      data-slot=\"scroll-area-viewport\"\n      {...{ [SLOT_ATTR]: \"scroll-area-viewport\" }}\n      className={mergeClasses(\n        styles.viewport,\n        context.orientation === \"vertical\" && styles.verticalContent,\n        context.orientation !== \"horizontal\" && styles.reserveVertical,\n        context.orientation !== \"vertical\" && styles.reserveHorizontal,\n        className\n      )}\n      onScroll={(event) => {\n        if (event.target === event.currentTarget) {\n          context.onScroll()\n          onScroll?.(event)\n        }\n      }}\n    />\n  )\n})\n"],"names":["Context","React","useStyles","makeZenithStyles","boxModel","shorthands","SLOT_ATTR","tokens.focusRing","tokens.grayA10","tokens.grayA11","tokens.grayA9","ScrollArea","orientation","visibility","className","children","onPointerEnter","onPointerLeave","onFocusCapture","onBlurCapture","props","ref","styles","scrollbar","useScrollbarStyles","root","timer","interaction","revealed","setRevealed","clear","reveal","settle","pulse","doc","_a","endDrag","context","tracks","jsx","jsxs","Primitive.Root","node","mergeClasses","event","axis","Primitive.Scrollbar","Primitive.Thumb","Primitive.Corner","ScrollAreaViewport","onScroll","Primitive.Viewport"],"mappings":";;;;;;;;AAuBA,MAAMA,IAAUC,EAAM,cAGZ,IAAI,GAERC,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IACX,GAAGC,EAAW,SAAS,QAAQ;AAAA,IAC/B,CAAC,8BAA8BC,CAAS,2BAA2B,GAAG;AAAA,MACpE,SAAS;AAAA,MACT,eAAe;AAAA,IAAA;AAAA,IAEjB,kCAAkC;AAAA,MAChC,CAAC,QAAQA,CAAS,2BAA2B,GAAG;AAAA,QAC9C,SAAS;AAAA,QACT,eAAe;AAAA,QACf,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA,EACF;AAAA,EAEF,UAAU;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,cAAcC;AAAAA,MACd,eAAe;AAAA,IAAA;AAAA,EACjB;AAAA,EAEF,iBAAiB;AAAA,IACf,GAAGH;AAAA;AAAA,IAEH,WAAW,EAAE,SAAS,SAAS,UAAU,OAAA;AAAA,EAAO;AAAA,EAElD,iBAAiB,EAAE,kBAAkB,OAAA;AAAA,EACrC,mBAAmB,EAAE,eAAe,OAAA;AAAA,EACpC,OAAO;AAAA,IACL,WAAW;AAAA,IACX,GAAGC,EAAW,QAAQ,KAAK;AAAA,IAC3B,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,2CAA2C,EAAE,oBAAoB,KAAA;AAAA,IACjE,CAAC,cAAcC,CAAS,uBAAuB,GAAG;AAAA,MAChD,iBAAiBE;AAAAA,IAAO;AAAA,IAE1B,CAAC,eAAeF,CAAS,uBAAuB,GAAG;AAAA,MACjD,iBAAiBG;AAAAA,IAAO;AAAA,IAE1B,kCAAkC;AAAA,MAChC,CAAC,QAAQH,CAAS,uBAAuB,GAAG;AAAA,QAC1C,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,MAAA;AAAA,IACrB;AAAA,EACF;AAAA,EAEF,UAAU,EAAE,OAAO,OAAA;AAAA,EACnB,YAAY,EAAE,QAAQ,QAAQ,eAAe,SAAA;AAAA,EAC7C,OAAO,EAAE,iBAAiBI,EAAO;AAAA;AAAA;AAAA,EAGjC,QAAQ,EAAE,iBAAiB,eAAe,eAAe,OAAA;AAC3D,CAAC,GAGYC,KAAaV,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,aAAAW,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAASpB,EAAA,GACTqB,IAAYC,EAAA,GACZC,IAAOxB,EAAM,OAA8B,IAAI,GAC/CyB,IAAQzB,EAAM;AAAA,MAClB;AAAA,IAAA,GAEI0B,IAAc1B,EAAM,OAAO;AAAA,MAC/B,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IAAA,CACP,GACK,CAAC2B,GAAUC,CAAW,IAAI5B,EAAM,SAAS,EAAK,GAC9C6B,IAAQ7B,EAAM,YAAY,MAAM;AACpC,mBAAayB,EAAM,OAAO;AAAA,IAC5B,GAAG,CAAA,CAAE,GACCK,IAAS9B,EAAM,YAAY,MAAM;AACrC,MAAA6B,EAAA,GACAD,EAAY,EAAI;AAAA,IAClB,GAAG,CAACC,CAAK,CAAC,GACJE,IAAS/B,EAAM,YAAY,MAAM;AACrC,MAAA6B,EAAA,GACK,OAAO,OAAOH,EAAY,OAAO,EAAE,KAAK,OAAO,MAClDD,EAAM,UAAU,WAAW,MAAMG,EAAY,EAAK,GAAG,GAAG;AAAA,IAE5D,GAAG,CAACC,CAAK,CAAC,GACJG,IAAQhC,EAAM,YAAY,MAAM;AACpC,MAAA8B,EAAA,GACAC,EAAA;AAAA,IACF,GAAG,CAACD,GAAQC,CAAM,CAAC;AACnB,IAAA/B,EAAM,UAAU,MAAM;;AACpB,YAAMiC,KAAMC,IAAAV,EAAK,YAAL,gBAAAU,EAAc,eACpBC,IAAU,MAAM;AACpB,QAAIT,EAAY,QAAQ,SACtBA,EAAY,QAAQ,OAAO,IAC3BK,EAAA;AAAA,MAEJ;AACA,aAAAE,KAAA,QAAAA,EAAK,iBAAiB,aAAaE,GAAS,KAC5CF,KAAA,QAAAA,EAAK,iBAAiB,iBAAiBE,GAAS,KACzC,MAAM;AACX,QAAAN,EAAA,GACAI,KAAA,QAAAA,EAAK,oBAAoB,aAAaE,GAAS,KAC/CF,KAAA,QAAAA,EAAK,oBAAoB,iBAAiBE,GAAS;AAAA,MACrD;AAAA,IACF,GAAG,CAACN,GAAOE,CAAM,CAAC;AAClB,UAAMK,IAAUpC,EAAM;AAAA,MACpB,OAAO,EAAE,aAAAW,GAAa,UAAUqB;MAChC,CAACrB,GAAaqB,CAAK;AAAA,IAAA,GAEfK,IACJ1B,MAAgB,SACX,CAAC,YAAY,YAAY,IAC1B,CAACA,CAAW;AAClB,WACE,gBAAA2B,EAACvC,EAAQ,UAAR,EAAiB,OAAOqC,GACvB,UAAA,gBAAAG;AAAA,MAACC;AAAAA,MAAA;AAAA,QACE,GAAGrB;AAAA,QACJ,MAAK;AAAA,QACL,KAAK,CAACsB,MAAS;AACb,UAAAjB,EAAK,UAAUiB,GACX,OAAOrB,KAAQ,aAAYA,EAAIqB,CAAI,IAC9BrB,QAAS,UAAUqB;AAAA,QAC9B;AAAA,QACA,aAAU;AAAA,QACJ,CAACpC,CAAS,GAAG;AAAA,QACnB,oBAAkBM;AAAA,QAClB,iBAAeC,MAAe,YAAYe;AAAA,QAC1C,WAAWe,EAAarB,EAAO,MAAMR,CAAS;AAAA,QAC9C,gBAAgB,CAAC8B,MAAU;AACzB,UAAIA,EAAM,gBAAgB,YACxBjB,EAAY,QAAQ,QAAQ,IAC5BI,EAAA,IAEFf,KAAA,QAAAA,EAAiB4B;AAAA,QACnB;AAAA,QACA,gBAAgB,CAACA,MAAU;AACzB,UAAAjB,EAAY,QAAQ,QAAQ,IAC5BK,EAAA,GACAf,KAAA,QAAAA,EAAiB2B;AAAA,QACnB;AAAA,QACA,gBAAgB,CAACA,MAAU;AACzB,UAAAjB,EAAY,QAAQ,QAAQ,IAC5BI,EAAA,GACAb,KAAA,QAAAA,EAAiB0B;AAAA,QACnB;AAAA,QACA,eAAe,CAACA,MAAU;AACxB,UAAKA,EAAM,cAAc,SAASA,EAAM,aAAa,MACnDjB,EAAY,QAAQ,QAAQ,IAC5BK,EAAA,IAEFb,KAAA,QAAAA,EAAgByB;AAAA,QAClB;AAAA,QAEC,UAAA;AAAA,UAAA7B;AAAA,UACAuB,EAAO,IAAI,CAACO,MACX,gBAAAN;AAAA,YAACO;AAAAA,YAAA;AAAA,cAEC,aAAaD;AAAA,cACb,aAAU;AAAA,cACJ,CAACvC,CAAS,GAAG;AAAA,cACnB,WAAWqC;AAAA,gBACTpB,EAAU;AAAA,gBACVD,EAAO;AAAA,gBACPA,EAAOuB,CAAI;AAAA,cAAA;AAAA,cAEb,eAAe,MAAM;AACnB,gBAAAlB,EAAY,QAAQ,OAAO,IAC3BI,EAAA;AAAA,cACF;AAAA,cAEA,UAAA,gBAAAQ;AAAA,gBAACQ;AAAAA,gBAAA;AAAA,kBACC,aAAU;AAAA,kBACJ,CAACzC,CAAS,GAAG;AAAA,kBACnB,WAAWqC,EAAapB,EAAU,OAAOD,EAAO,KAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,YACvD;AAAA,YAlBKuB;AAAA,UAAA,CAoBR;AAAA,UACAjC,MAAgB,UACf,gBAAA2B,EAACS,GAAA,EAAiB,WAAW1B,EAAO,OAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAGlD;AAAA,EAEJ;AACF,GAGa2B,KAAqBhD,EAAM,WAGtC,SAA4B,EAAE,WAAAa,GAAW,UAAAoC,GAAU,GAAG9B,EAAA,GAASC,GAAK;AACpE,QAAMgB,IAAUpC,EAAM,WAAWD,CAAO,GAClCsB,IAASpB,EAAA;AACf,MAAI,CAACmC;AACH,UAAM,IAAI,MAAM,iDAAiD;AACnE,SACE,gBAAAE;AAAA,IAACY;AAAAA,IAAA;AAAA,MACE,GAAG/B;AAAA,MACJ,KAAAC;AAAA,MACA,aAAU;AAAA,MACJ,CAACf,CAAS,GAAG;AAAA,MACnB,WAAWqC;AAAA,QACTrB,EAAO;AAAA,QACPe,EAAQ,gBAAgB,cAAcf,EAAO;AAAA,QAC7Ce,EAAQ,gBAAgB,gBAAgBf,EAAO;AAAA,QAC/Ce,EAAQ,gBAAgB,cAAcf,EAAO;AAAA,QAC7CR;AAAA,MAAA;AAAA,MAEF,UAAU,CAAC8B,MAAU;AACnB,QAAIA,EAAM,WAAWA,EAAM,kBACzBP,EAAQ,SAAA,GACRa,KAAA,QAAAA,EAAWN;AAAA,MAEf;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"scroll-area.js","sources":["../../../src/components/scroll-area/scroll-area.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { CSPProvider } from \"@base-ui/react/csp-provider\"\nimport { DirectionProvider } from \"@base-ui/react/direction-provider\"\nimport { ScrollArea as Primitive } from \"@base-ui/react/scroll-area\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\nimport { useScrollbarStyles } from \"./scrollbar-styles\"\n\nexport type ScrollAreaOrientation = \"vertical\" | \"horizontal\" | \"both\"\nexport type ScrollAreaVisibility = \"interaction\" | \"always\"\ntype Direction = \"ltr\" | \"rtl\"\n// Declared in Zenith in their Radix-era shape, a div's props, not derived from Base UI's, whose\n// types would carry its internals into the published declarations.\nexport type ScrollAreaProps = Omit<\n  React.ComponentPropsWithoutRef<\"div\">,\n  \"dir\"\n> & {\n  /** Text direction of the region and of its thumb positions. Defaults to `ltr`. */\n  dir?: Direction\n  orientation?: ScrollAreaOrientation\n  visibility?: ScrollAreaVisibility\n}\nexport type ScrollAreaViewportProps = React.ComponentPropsWithoutRef<\"div\">\n\nconst Context = React.createContext<{\n  orientation: ScrollAreaOrientation\n  onScroll: () => void\n} | null>(null)\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    position: \"relative\",\n    minWidth: 0,\n    minHeight: 0,\n    ...shorthands.overflow(\"hidden\"),\n    [`&[data-revealed='true'] > [${SLOT_ATTR}='scroll-area-scrollbar']`]: {\n      opacity: 1,\n      pointerEvents: \"auto\",\n    },\n    \"@media (forced-colors: active)\": {\n      [`& > [${SLOT_ATTR}='scroll-area-scrollbar']`]: {\n        opacity: 1,\n        pointerEvents: \"auto\",\n        backgroundColor: \"Canvas\",\n      },\n    },\n  },\n  viewport: {\n    width: \"100%\",\n    height: \"100%\",\n    minWidth: 0,\n    minHeight: 0,\n    boxSizing: \"border-box\",\n    borderRadius: \"inherit\",\n    // The tracks replace the native scrollbars. Zenith's stylesheet hides them, so no inline\n    // <style> needs a nonce (Radix's took the viewport's).\n    scrollbarWidth: \"none\",\n    \"::-webkit-scrollbar\": { display: \"none\" },\n    \":focus-visible\": {\n      outlineWidth: \"3px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.focusRing,\n      outlineOffset: \"-3px\",\n    },\n  },\n  // The content wrapper keeps Radix's display:table, which grows to the content's width...\n  content: { display: \"table\" },\n  // ...except in a vertical area, where that would expand long lines past the viewport.\n  verticalContent: { display: \"block\" },\n  reserveVertical: { paddingInlineEnd: \"12px\" },\n  reserveHorizontal: { paddingBottom: \"12px\" },\n  track: {\n    boxSizing: \"border-box\",\n    backgroundColor: \"transparent\",\n    opacity: 0,\n    pointerEvents: \"none\",\n    transitionProperty: \"opacity\",\n    transitionDuration: \"120ms\",\n    \"@media (prefers-reduced-motion: reduce)\": { transitionDuration: \"0s\" },\n    [`&:hover > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n      backgroundColor: tokens.grayA10,\n    },\n    [`&:active > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n      backgroundColor: tokens.grayA11,\n    },\n    \"@media (forced-colors: active)\": {\n      [`& > [${SLOT_ATTR}='scroll-area-thumb']`]: {\n        backgroundColor: \"ButtonText\",\n        forcedColorAdjust: \"none\",\n      },\n    },\n  },\n  // The 3px inset along the scroll axis is margin, not padding. With both tracks shown, Base UI\n  // 1.7.0 sizes the thumb from the track's offsetHeight/offsetWidth without subtracting its padding,\n  // which lengthened the thumb by the padding's share; a margin shrinks the track box instead, so\n  // the thumb keeps Radix's length on every orientation.\n  vertical: {\n    width: \"12px\",\n    ...shorthands.padding(\"0\", \"3px\"),\n    ...shorthands.margin(\"3px\", \"0\"),\n  },\n  horizontal: {\n    height: \"12px\",\n    flexDirection: \"column\",\n    ...shorthands.padding(\"3px\", \"0\"),\n    ...shorthands.margin(\"0\", \"3px\"),\n  },\n  thumb: { backgroundColor: tokens.grayA9 },\n  // Base UI owns thumb length (including its 16px minimum) and uses it in drag math.\n  // A CSS-only minimum overrides the paint but not that math, overshooting the track.\n  corner: { backgroundColor: \"transparent\", pointerEvents: \"none\" },\n})\n\n/** Native scrolling with Base UI tracks. Dimensions belong here; scroll refs belong to the viewport. */\nexport const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  function ScrollArea(\n    {\n      dir = \"ltr\",\n      orientation = \"vertical\",\n      visibility = \"interaction\",\n      className,\n      children,\n      onPointerEnter,\n      onPointerLeave,\n      onFocusCapture,\n      onBlurCapture,\n      ...props\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const scrollbar = useScrollbarStyles()\n    const root = React.useRef<HTMLDivElement | null>(null)\n    const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(\n      undefined\n    )\n    const interaction = React.useRef({\n      hover: false,\n      focus: false,\n      drag: false,\n    })\n    const [revealed, setRevealed] = React.useState(false)\n    const clear = React.useCallback(() => {\n      clearTimeout(timer.current)\n    }, [])\n    const reveal = React.useCallback(() => {\n      clear()\n      setRevealed(true)\n    }, [clear])\n    const settle = React.useCallback(() => {\n      clear()\n      if (!Object.values(interaction.current).some(Boolean)) {\n        timer.current = setTimeout(() => setRevealed(false), 600)\n      }\n    }, [clear])\n    const pulse = React.useCallback(() => {\n      reveal()\n      settle()\n    }, [reveal, settle])\n    React.useEffect(() => {\n      const doc = root.current?.ownerDocument\n      const endDrag = () => {\n        if (interaction.current.drag) {\n          interaction.current.drag = false\n          settle()\n        }\n      }\n      doc?.addEventListener(\"pointerup\", endDrag, true)\n      doc?.addEventListener(\"pointercancel\", endDrag, true)\n      return () => {\n        clear()\n        doc?.removeEventListener(\"pointerup\", endDrag, true)\n        doc?.removeEventListener(\"pointercancel\", endDrag, true)\n      }\n    }, [clear, settle])\n    const context = React.useMemo(\n      () => ({ orientation, onScroll: pulse }),\n      [orientation, pulse]\n    )\n    const tracks =\n      orientation === \"both\"\n        ? ([\"vertical\", \"horizontal\"] as const)\n        : [orientation]\n    return (\n      <Context.Provider value={context}>\n        {/* Radix stamped and computed with ltr unless told otherwise; Base UI reads context. */}\n        <DirectionProvider direction={dir}>\n          {/* The viewport's styles hide the native scrollbars, so Base UI's <style> is not rendered. */}\n          <CSPProvider disableStyleElements>\n            <Primitive.Root\n              {...props}\n              dir={dir}\n              ref={(node) => {\n                root.current = node\n                if (typeof ref === \"function\") ref(node)\n                else if (ref) ref.current = node\n              }}\n              data-slot=\"scroll-area\"\n              {...{ [SLOT_ATTR]: \"scroll-area\" }}\n              data-orientation={orientation}\n              data-revealed={visibility === \"always\" || revealed}\n              className={mergeClasses(styles.root, className)}\n              onPointerEnter={(event) => {\n                if (event.pointerType !== \"touch\") {\n                  interaction.current.hover = true\n                  reveal()\n                }\n                onPointerEnter?.(event)\n              }}\n              onPointerLeave={(event) => {\n                interaction.current.hover = false\n                settle()\n                onPointerLeave?.(event)\n              }}\n              onFocusCapture={(event) => {\n                interaction.current.focus = true\n                reveal()\n                onFocusCapture?.(event)\n              }}\n              onBlurCapture={(event) => {\n                if (!event.currentTarget.contains(event.relatedTarget)) {\n                  interaction.current.focus = false\n                  settle()\n                }\n                onBlurCapture?.(event)\n              }}\n            >\n              {/* Base UI parts the caller renders inside keep their own style elements. */}\n              <CSPProvider>\n                {children}\n                {tracks.map((axis) => (\n                  <Primitive.Scrollbar\n                    key={axis}\n                    orientation={axis}\n                    data-slot=\"scroll-area-scrollbar\"\n                    {...{ [SLOT_ATTR]: \"scroll-area-scrollbar\" }}\n                    className={mergeClasses(\n                      scrollbar.track,\n                      styles.track,\n                      styles[axis]\n                    )}\n                    onPointerDown={() => {\n                      interaction.current.drag = true\n                      reveal()\n                    }}\n                  >\n                    <Primitive.Thumb\n                      data-slot=\"scroll-area-thumb\"\n                      {...{ [SLOT_ATTR]: \"scroll-area-thumb\" }}\n                      className={mergeClasses(scrollbar.thumb, styles.thumb)}\n                    />\n                  </Primitive.Scrollbar>\n                ))}\n                {orientation === \"both\" && (\n                  <Primitive.Corner className={styles.corner} />\n                )}\n              </CSPProvider>\n            </Primitive.Root>\n          </CSPProvider>\n        </DirectionProvider>\n      </Context.Provider>\n    )\n  }\n)\n\n/** Put keyboard focus, accessible naming and onScroll on this actual scroll element. */\nexport const ScrollAreaViewport = React.forwardRef<\n  HTMLDivElement,\n  ScrollAreaViewportProps\n>(function ScrollAreaViewport(\n  // No inline <style> is rendered, so Radix's nonce has nothing left to unlock.\n  { className, style, onScroll, children, nonce: _nonce, ...props },\n  ref\n) {\n  const context = React.useContext(Context)\n  const styles = useStyles()\n  if (!context)\n    throw new Error(\"ScrollAreaViewport requires a ScrollArea parent\")\n  const { orientation } = context\n  return (\n    <Primitive.Viewport\n      {...props}\n      ref={ref}\n      data-slot=\"scroll-area-viewport\"\n      {...{ [SLOT_ATTR]: \"scroll-area-viewport\" }}\n      className={mergeClasses(\n        styles.viewport,\n        orientation !== \"horizontal\" && styles.reserveVertical,\n        orientation !== \"vertical\" && styles.reserveHorizontal,\n        className\n      )}\n      // Only axes with a track scroll, as Radix enabled overflow per mounted scrollbar.\n      style={{\n        overflowX: orientation === \"vertical\" ? \"hidden\" : \"scroll\",\n        overflowY: orientation === \"horizontal\" ? \"hidden\" : \"scroll\",\n        ...style,\n      }}\n      onScroll={(event) => {\n        if (event.target === event.currentTarget) {\n          context.onScroll()\n          onScroll?.(event)\n        }\n      }}\n    >\n      <Primitive.Content\n        className={mergeClasses(\n          styles.content,\n          orientation === \"vertical\" && styles.verticalContent\n        )}\n        // Over Base UI's fit-content, which would widen a vertical area to its widest line.\n        style={{ minWidth: \"100%\" }}\n      >\n        {children}\n      </Primitive.Content>\n    </Primitive.Viewport>\n  )\n})\n"],"names":["Context","React","useStyles","makeZenithStyles","boxModel","shorthands","SLOT_ATTR","tokens.focusRing","tokens.grayA10","tokens.grayA11","tokens.grayA9","ScrollArea","dir","orientation","visibility","className","children","onPointerEnter","onPointerLeave","onFocusCapture","onBlurCapture","props","ref","styles","scrollbar","useScrollbarStyles","root","timer","interaction","revealed","setRevealed","clear","reveal","settle","pulse","doc","_a","endDrag","context","tracks","jsx","DirectionProvider","CSPProvider","Primitive","node","mergeClasses","event","axis","ScrollAreaViewport","style","onScroll","_nonce"],"mappings":";;;;;;;;;;AA2BA,MAAMA,IAAUC,EAAM,cAGZ,IAAI,GAERC,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,GAAGC;AAAA,IACH,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IACX,GAAGC,EAAW,SAAS,QAAQ;AAAA,IAC/B,CAAC,8BAA8BC,CAAS,2BAA2B,GAAG;AAAA,MACpE,SAAS;AAAA,MACT,eAAe;AAAA,IAAA;AAAA,IAEjB,kCAAkC;AAAA,MAChC,CAAC,QAAQA,CAAS,2BAA2B,GAAG;AAAA,QAC9C,SAAS;AAAA,QACT,eAAe;AAAA,QACf,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA,EACF;AAAA,EAEF,UAAU;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA;AAAA;AAAA,IAGd,gBAAgB;AAAA,IAChB,uBAAuB,EAAE,SAAS,OAAA;AAAA,IAClC,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,cAAc;AAAA,MACd,cAAcC;AAAAA,MACd,eAAe;AAAA,IAAA;AAAA,EACjB;AAAA;AAAA,EAGF,SAAS,EAAE,SAAS,QAAA;AAAA;AAAA,EAEpB,iBAAiB,EAAE,SAAS,QAAA;AAAA,EAC5B,iBAAiB,EAAE,kBAAkB,OAAA;AAAA,EACrC,mBAAmB,EAAE,eAAe,OAAA;AAAA,EACpC,OAAO;AAAA,IACL,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,eAAe;AAAA,IACf,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,2CAA2C,EAAE,oBAAoB,KAAA;AAAA,IACjE,CAAC,cAAcD,CAAS,uBAAuB,GAAG;AAAA,MAChD,iBAAiBE;AAAAA,IAAO;AAAA,IAE1B,CAAC,eAAeF,CAAS,uBAAuB,GAAG;AAAA,MACjD,iBAAiBG;AAAAA,IAAO;AAAA,IAE1B,kCAAkC;AAAA,MAChC,CAAC,QAAQH,CAAS,uBAAuB,GAAG;AAAA,QAC1C,iBAAiB;AAAA,QACjB,mBAAmB;AAAA,MAAA;AAAA,IACrB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMF,UAAU;AAAA,IACR,OAAO;AAAA,IACP,GAAGD,EAAW,QAAQ,KAAK,KAAK;AAAA,IAChC,GAAGA,EAAW,OAAO,OAAO,GAAG;AAAA,EAAA;AAAA,EAEjC,YAAY;AAAA,IACV,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,GAAGA,EAAW,QAAQ,OAAO,GAAG;AAAA,IAChC,GAAGA,EAAW,OAAO,KAAK,KAAK;AAAA,EAAA;AAAA,EAEjC,OAAO,EAAE,iBAAiBK,EAAO;AAAA;AAAA;AAAA,EAGjC,QAAQ,EAAE,iBAAiB,eAAe,eAAe,OAAA;AAC3D,CAAC,GAGYC,KAAaV,EAAM;AAAA,EAC9B,SACE;AAAA,IACE,KAAAW,IAAM;AAAA,IACN,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAASrB,EAAA,GACTsB,IAAYC,EAAA,GACZC,IAAOzB,EAAM,OAA8B,IAAI,GAC/C0B,IAAQ1B,EAAM;AAAA,MAClB;AAAA,IAAA,GAEI2B,IAAc3B,EAAM,OAAO;AAAA,MAC/B,OAAO;AAAA,MACP,OAAO;AAAA,MACP,MAAM;AAAA,IAAA,CACP,GACK,CAAC4B,GAAUC,CAAW,IAAI7B,EAAM,SAAS,EAAK,GAC9C8B,IAAQ9B,EAAM,YAAY,MAAM;AACpC,mBAAa0B,EAAM,OAAO;AAAA,IAC5B,GAAG,CAAA,CAAE,GACCK,IAAS/B,EAAM,YAAY,MAAM;AACrC,MAAA8B,EAAA,GACAD,EAAY,EAAI;AAAA,IAClB,GAAG,CAACC,CAAK,CAAC,GACJE,IAAShC,EAAM,YAAY,MAAM;AACrC,MAAA8B,EAAA,GACK,OAAO,OAAOH,EAAY,OAAO,EAAE,KAAK,OAAO,MAClDD,EAAM,UAAU,WAAW,MAAMG,EAAY,EAAK,GAAG,GAAG;AAAA,IAE5D,GAAG,CAACC,CAAK,CAAC,GACJG,IAAQjC,EAAM,YAAY,MAAM;AACpC,MAAA+B,EAAA,GACAC,EAAA;AAAA,IACF,GAAG,CAACD,GAAQC,CAAM,CAAC;AACnB,IAAAhC,EAAM,UAAU,MAAM;;AACpB,YAAMkC,KAAMC,IAAAV,EAAK,YAAL,gBAAAU,EAAc,eACpBC,IAAU,MAAM;AACpB,QAAIT,EAAY,QAAQ,SACtBA,EAAY,QAAQ,OAAO,IAC3BK,EAAA;AAAA,MAEJ;AACA,aAAAE,KAAA,QAAAA,EAAK,iBAAiB,aAAaE,GAAS,KAC5CF,KAAA,QAAAA,EAAK,iBAAiB,iBAAiBE,GAAS,KACzC,MAAM;AACX,QAAAN,EAAA,GACAI,KAAA,QAAAA,EAAK,oBAAoB,aAAaE,GAAS,KAC/CF,KAAA,QAAAA,EAAK,oBAAoB,iBAAiBE,GAAS;AAAA,MACrD;AAAA,IACF,GAAG,CAACN,GAAOE,CAAM,CAAC;AAClB,UAAMK,IAAUrC,EAAM;AAAA,MACpB,OAAO,EAAE,aAAAY,GAAa,UAAUqB;MAChC,CAACrB,GAAaqB,CAAK;AAAA,IAAA,GAEfK,IACJ1B,MAAgB,SACX,CAAC,YAAY,YAAY,IAC1B,CAACA,CAAW;AAClB,WACE,gBAAA2B,EAACxC,EAAQ,UAAR,EAAiB,OAAOsC,GAEvB,UAAA,gBAAAE,EAACC,GAAA,EAAkB,WAAW7B,GAE5B,UAAA,gBAAA4B,EAACE,GAAA,EAAY,sBAAoB,IAC/B,UAAA,gBAAAF;AAAA,MAACG,EAAU;AAAA,MAAV;AAAA,QACE,GAAGtB;AAAA,QACJ,KAAAT;AAAA,QACA,KAAK,CAACgC,MAAS;AACb,UAAAlB,EAAK,UAAUkB,GACX,OAAOtB,KAAQ,aAAYA,EAAIsB,CAAI,IAC9BtB,QAAS,UAAUsB;AAAA,QAC9B;AAAA,QACA,aAAU;AAAA,QACJ,CAACtC,CAAS,GAAG;AAAA,QACnB,oBAAkBO;AAAA,QAClB,iBAAeC,MAAe,YAAYe;AAAA,QAC1C,WAAWgB,EAAatB,EAAO,MAAMR,CAAS;AAAA,QAC9C,gBAAgB,CAAC+B,MAAU;AACzB,UAAIA,EAAM,gBAAgB,YACxBlB,EAAY,QAAQ,QAAQ,IAC5BI,EAAA,IAEFf,KAAA,QAAAA,EAAiB6B;AAAA,QACnB;AAAA,QACA,gBAAgB,CAACA,MAAU;AACzB,UAAAlB,EAAY,QAAQ,QAAQ,IAC5BK,EAAA,GACAf,KAAA,QAAAA,EAAiB4B;AAAA,QACnB;AAAA,QACA,gBAAgB,CAACA,MAAU;AACzB,UAAAlB,EAAY,QAAQ,QAAQ,IAC5BI,EAAA,GACAb,KAAA,QAAAA,EAAiB2B;AAAA,QACnB;AAAA,QACA,eAAe,CAACA,MAAU;AACxB,UAAKA,EAAM,cAAc,SAASA,EAAM,aAAa,MACnDlB,EAAY,QAAQ,QAAQ,IAC5BK,EAAA,IAEFb,KAAA,QAAAA,EAAgB0B;AAAA,QAClB;AAAA,QAGA,4BAACJ,GAAA,EACE,UAAA;AAAA,UAAA1B;AAAA,UACAuB,EAAO,IAAI,CAACQ,MACX,gBAAAP;AAAA,YAACG,EAAU;AAAA,YAAV;AAAA,cAEC,aAAaI;AAAA,cACb,aAAU;AAAA,cACJ,CAACzC,CAAS,GAAG;AAAA,cACnB,WAAWuC;AAAA,gBACTrB,EAAU;AAAA,gBACVD,EAAO;AAAA,gBACPA,EAAOwB,CAAI;AAAA,cAAA;AAAA,cAEb,eAAe,MAAM;AACnB,gBAAAnB,EAAY,QAAQ,OAAO,IAC3BI,EAAA;AAAA,cACF;AAAA,cAEA,UAAA,gBAAAQ;AAAA,gBAACG,EAAU;AAAA,gBAAV;AAAA,kBACC,aAAU;AAAA,kBACJ,CAACrC,CAAS,GAAG;AAAA,kBACnB,WAAWuC,EAAarB,EAAU,OAAOD,EAAO,KAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,YACvD;AAAA,YAlBKwB;AAAA,UAAA,CAoBR;AAAA,UACAlC,MAAgB,UACf,gBAAA2B,EAACG,EAAU,QAAV,EAAiB,WAAWpB,EAAO,OAAA,CAAQ;AAAA,QAAA,EAAA,CAEhD;AAAA,MAAA;AAAA,IAAA,EACF,CACF,GACF,GACF;AAAA,EAEJ;AACF,GAGayB,KAAqB/C,EAAM,WAGtC,SAEA,EAAE,WAAAc,GAAW,OAAAkC,GAAO,UAAAC,GAAU,UAAAlC,GAAU,OAAOmC,GAAQ,GAAG9B,EAAA,GAC1DC,GACA;AACA,QAAMgB,IAAUrC,EAAM,WAAWD,CAAO,GAClCuB,IAASrB,EAAA;AACf,MAAI,CAACoC;AACH,UAAM,IAAI,MAAM,iDAAiD;AACnE,QAAM,EAAE,aAAAzB,MAAgByB;AACxB,SACE,gBAAAE;AAAA,IAACG,EAAU;AAAA,IAAV;AAAA,MACE,GAAGtB;AAAA,MACJ,KAAAC;AAAA,MACA,aAAU;AAAA,MACJ,CAAChB,CAAS,GAAG;AAAA,MACnB,WAAWuC;AAAA,QACTtB,EAAO;AAAA,QACPV,MAAgB,gBAAgBU,EAAO;AAAA,QACvCV,MAAgB,cAAcU,EAAO;AAAA,QACrCR;AAAA,MAAA;AAAA,MAGF,OAAO;AAAA,QACL,WAAWF,MAAgB,aAAa,WAAW;AAAA,QACnD,WAAWA,MAAgB,eAAe,WAAW;AAAA,QACrD,GAAGoC;AAAA,MAAA;AAAA,MAEL,UAAU,CAACH,MAAU;AACnB,QAAIA,EAAM,WAAWA,EAAM,kBACzBR,EAAQ,SAAA,GACRY,KAAA,QAAAA,EAAWJ;AAAA,MAEf;AAAA,MAEA,UAAA,gBAAAN;AAAA,QAACG,EAAU;AAAA,QAAV;AAAA,UACC,WAAWE;AAAA,YACTtB,EAAO;AAAA,YACPV,MAAgB,cAAcU,EAAO;AAAA,UAAA;AAAA,UAGvC,OAAO,EAAE,UAAU,OAAA;AAAA,UAElB,UAAAP;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}

package/dist/components/scroll-overflow/scroll-overflow.js

@@ -1,101 +1,103 @@
-import { jsxs as I, jsx as l } from "react/jsx-runtime";
+import { jsxs as M, jsx as t } from "react/jsx-runtime";
 import * as w from "react";
-import { Root as M, Viewport as O, Scrollbar as F, Thumb as W } from "../../vendor/.bun/@radix-ui_react-scroll-area@1.2.10_2b23df507bdda662/vendor/@radix-ui/react-scroll-area/dist/index.js";
-import { mergeClasses as f, SLOT_ATTR as s, shorthands as b } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as Z } from "../../styles/make-styles.js";
-import { boxModel as a, nativeControl as j } from "../../styles/host-reset.js";
-import { grayA8 as B, accentA8 as K, grayA12 as $, gray1 as G, radiusMd as U, radiusSm as P } from "../../tokens/index.js";
-import { useScrollbarStyles as _ } from "../scroll-area/scrollbar-styles.js";
-function D() {
+import { CSPProvider as K } from "../../_virtual/_zenith-runtime-family_csp-provider.js";
+import { DirectionProvider as P } from "../../_virtual/_zenith-runtime-family_direction-provider.js";
+import { ScrollArea as g } from "../../_virtual/_zenith-runtime-family_scroll-area.js";
+import { mergeClasses as f, SLOT_ATTR as s, shorthands as i } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as $ } from "../../styles/make-styles.js";
+import { boxModel as a, nativeControl as G } from "../../styles/host-reset.js";
+import { grayA8 as O, accentA8 as _, grayA12 as U, gray1 as X, radiusMd as Y, radiusSm as q } from "../../tokens/index.js";
+import { useScrollbarStyles as J } from "../scroll-area/scrollbar-styles.js";
+function W() {
   return typeof window > "u" || !window.matchMedia || window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
 }
-function q(c = {}) {
-  const { scrollStep: m = 200, orientation: y = "horizontal" } = c, h = w.useRef(null), [S, u] = w.useState(!1), [C, x] = w.useState(!1), [g, H] = w.useState(!1), n = y === "horizontal", p = w.useCallback(() => {
-    const t = h.current;
-    if (t)
+function Q(c = {}) {
+  const { scrollStep: m = 200, orientation: z = "horizontal" } = c, h = w.useRef(null), [S, u] = w.useState(!1), [b, C] = w.useState(!1), [y, H] = w.useState(!1), n = z === "horizontal", p = w.useCallback(() => {
+    const l = h.current;
+    if (l)
       if (n) {
-        const e = Math.round(t.scrollLeft), i = t.scrollWidth, d = t.clientWidth;
-        u(i > d), x(e > 0), H(e + d < i - 1);
+        const e = Math.round(l.scrollLeft), d = l.scrollWidth, o = l.clientWidth;
+        u(d > o), C(e > 0), H(e + o < d - 1);
       } else {
-        const e = Math.round(t.scrollTop), i = t.scrollHeight, d = t.clientHeight;
-        u(i > d), x(e > 0), H(e + d < i - 1);
+        const e = Math.round(l.scrollTop), d = l.scrollHeight, o = l.clientHeight;
+        u(d > o), C(e > 0), H(e + o < d - 1);
       }
   }, [n]);
   w.useEffect(() => {
-    const t = h.current;
-    if (!t) return;
+    const l = h.current;
+    if (!l) return;
     p();
     let e = null;
     if (typeof ResizeObserver < "u") {
       e = new ResizeObserver(() => {
         p();
-      }), e.observe(t);
-      for (const i of t.children)
-        e.observe(i);
+      }), e.observe(l);
+      for (const d of l.children)
+        e.observe(d);
     }
-    return t.addEventListener("scroll", p, { passive: !0 }), () => {
-      e == null || e.disconnect(), t.removeEventListener("scroll", p);
+    return l.addEventListener("scroll", p, { passive: !0 }), () => {
+      e == null || e.disconnect(), l.removeEventListener("scroll", p);
     };
   }, [p]);
-  const z = w.useCallback(() => {
-    var t;
-    (t = h.current) == null || t.scrollBy({
+  const k = w.useCallback(() => {
+    var l;
+    (l = h.current) == null || l.scrollBy({
       [n ? "left" : "top"]: -m,
-      behavior: D()
+      behavior: W()
     });
-  }, [m, n]), o = w.useCallback(() => {
-    var t;
-    (t = h.current) == null || t.scrollBy({
+  }, [m, n]), A = w.useCallback(() => {
+    var l;
+    (l = h.current) == null || l.scrollBy({
       [n ? "left" : "top"]: m,
-      behavior: D()
+      behavior: W()
     });
   }, [m, n]);
   return {
     scrollRef: h,
     hasOverflow: S,
-    canScrollStart: C,
-    canScrollEnd: g,
-    scrollToStart: z,
-    scrollToEnd: o
+    canScrollStart: b,
+    canScrollEnd: y,
+    scrollToStart: k,
+    scrollToEnd: A
   };
 }
-const J = (c) => /* @__PURE__ */ l(
+const oo = (c) => /* @__PURE__ */ t(
   "svg",
   {
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     ...c,
-    children: /* @__PURE__ */ l("path", { d: "M 8.86 10.51 C 8.94 10.51 9.02 10.49 9.08 10.43 C 9.14 10.38 9.17 10.3 9.17 10.21 V 5.79 C 9.17 5.7 9.14 5.62 9.08 5.57 C 9.01 5.51 8.94 5.49 8.86 5.49 C 8.84 5.49 8.77 5.52 8.65 5.58 L 6.55 7.68 C 6.5 7.73 6.47 7.78 6.44 7.83 C 6.42 7.88 6.41 7.94 6.41 8 C 6.41 8.06 6.42 8.12 6.44 8.17 C 6.47 8.22 6.5 8.27 6.55 8.32 L 8.65 10.42 C 8.68 10.45 8.71 10.47 8.75 10.49 C 8.78 10.51 8.82 10.51 8.86 10.51 Z" })
+    children: /* @__PURE__ */ t("path", { d: "M 8.86 10.51 C 8.94 10.51 9.02 10.49 9.08 10.43 C 9.14 10.38 9.17 10.3 9.17 10.21 V 5.79 C 9.17 5.7 9.14 5.62 9.08 5.57 C 9.01 5.51 8.94 5.49 8.86 5.49 C 8.84 5.49 8.77 5.52 8.65 5.58 L 6.55 7.68 C 6.5 7.73 6.47 7.78 6.44 7.83 C 6.42 7.88 6.41 7.94 6.41 8 C 6.41 8.06 6.42 8.12 6.44 8.17 C 6.47 8.22 6.5 8.27 6.55 8.32 L 8.65 10.42 C 8.68 10.45 8.71 10.47 8.75 10.49 C 8.78 10.51 8.82 10.51 8.86 10.51 Z" })
   }
-), Q = (c) => /* @__PURE__ */ l(
+), ro = (c) => /* @__PURE__ */ t(
   "svg",
   {
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     ...c,
-    children: /* @__PURE__ */ l("path", { d: "M7.14 10.51C7.06 10.51 6.98 10.49 6.92 10.43C6.86 10.38 6.83 10.3 6.83 10.21V5.79C6.83 5.7 6.86 5.62 6.92 5.57C6.99 5.51 7.06 5.49 7.14 5.49C7.16 5.49 7.23 5.52 7.35 5.58L9.45 7.68C9.5 7.73 9.53 7.78 9.56 7.83C9.58 7.88 9.59 7.94 9.59 8C9.59 8.06 9.58 8.12 9.56 8.17C9.53 8.22 9.5 8.27 9.45 8.32L7.35 10.42C7.32 10.45 7.29 10.47 7.25 10.49C7.22 10.51 7.18 10.51 7.14 10.51Z" })
+    children: /* @__PURE__ */ t("path", { d: "M7.14 10.51C7.06 10.51 6.98 10.49 6.92 10.43C6.86 10.38 6.83 10.3 6.83 10.21V5.79C6.83 5.7 6.86 5.62 6.92 5.57C6.99 5.51 7.06 5.49 7.14 5.49C7.16 5.49 7.23 5.52 7.35 5.58L9.45 7.68C9.5 7.73 9.53 7.78 9.56 7.83C9.58 7.88 9.59 7.94 9.59 8C9.59 8.06 9.58 8.12 9.56 8.17C9.53 8.22 9.5 8.27 9.45 8.32L7.35 10.42C7.32 10.45 7.29 10.47 7.25 10.49C7.22 10.51 7.18 10.51 7.14 10.51Z" })
   }
-), X = (c) => /* @__PURE__ */ l(
+), to = (c) => /* @__PURE__ */ t(
   "svg",
   {
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     ...c,
-    children: /* @__PURE__ */ l("path", { d: "M5.49 7.14C5.49 7.06 5.51 6.98 5.57 6.92C5.62 6.86 5.7 6.83 5.79 6.83H10.21C10.3 6.83 10.38 6.86 10.43 6.92C10.49 6.99 10.51 7.06 10.51 7.14C10.51 7.16 10.48 7.23 10.42 7.35L8.32 9.45C8.27 9.5 8.22 9.53 8.17 9.56C8.12 9.58 8.06 9.59 8 9.59C7.94 9.59 7.88 9.58 7.83 9.56C7.78 9.53 7.73 9.5 7.68 9.45L5.58 7.35C5.55 7.32 5.53 7.29 5.51 7.25C5.49 7.22 5.49 7.18 5.49 7.14Z" })
+    children: /* @__PURE__ */ t("path", { d: "M5.49 7.14C5.49 7.06 5.51 6.98 5.57 6.92C5.62 6.86 5.7 6.83 5.79 6.83H10.21C10.3 6.83 10.38 6.86 10.43 6.92C10.49 6.99 10.51 7.06 10.51 7.14C10.51 7.16 10.48 7.23 10.42 7.35L8.32 9.45C8.27 9.5 8.22 9.53 8.17 9.56C8.12 9.58 8.06 9.59 8 9.59C7.94 9.59 7.88 9.58 7.83 9.56C7.78 9.53 7.73 9.5 7.68 9.45L5.58 7.35C5.55 7.32 5.53 7.29 5.51 7.25C5.49 7.22 5.49 7.18 5.49 7.14Z" })
   }
-), Y = (c) => /* @__PURE__ */ l(
+), lo = (c) => /* @__PURE__ */ t(
   "svg",
   {
     viewBox: "0 0 16 16",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     ...c,
-    children: /* @__PURE__ */ l("path", { d: "M10.51 8.86C10.51 8.94 10.49 9.02 10.43 9.08C10.38 9.14 10.3 9.17 10.21 9.17H5.79C5.7 9.17 5.62 9.14 5.57 9.08C5.51 9.01 5.49 8.94 5.49 8.86C5.49 8.84 5.52 8.77 5.58 8.65L7.68 6.55C7.73 6.5 7.78 6.47 7.83 6.44C7.88 6.42 7.94 6.41 8 6.41C8.06 6.41 8.12 6.42 8.17 6.44C8.22 6.47 8.27 6.5 8.32 6.55L10.42 8.65C10.45 8.68 10.47 8.71 10.49 8.75C10.51 8.78 10.51 8.82 10.51 8.86Z" })
+    children: /* @__PURE__ */ t("path", { d: "M10.51 8.86C10.51 8.94 10.49 9.02 10.43 9.08C10.38 9.14 10.3 9.17 10.21 9.17H5.79C5.7 9.17 5.62 9.14 5.57 9.08C5.51 9.01 5.49 8.94 5.49 8.86C5.49 8.84 5.52 8.77 5.58 8.65L7.68 6.55C7.73 6.5 7.78 6.47 7.83 6.44C7.88 6.42 7.94 6.41 8 6.41C8.06 6.41 8.12 6.42 8.17 6.44C8.22 6.47 8.27 6.5 8.32 6.55L10.42 8.65C10.45 8.68 10.47 8.71 10.49 8.75C10.51 8.78 10.51 8.82 10.51 8.86Z" })
   }
-), oo = Z({
+), eo = $({
   container: {
     position: "relative",
     display: "flex"
@@ -144,7 +146,7 @@ const J = (c) => /* @__PURE__ */ l(
     boxShadow: "inset 0 -8px 6px -6px rgba(0,0,0,0.08)"
   },
   arrowButton: {
-    ...j,
+    ...G,
     position: "absolute",
     zIndex: 20,
     display: "flex",
@@ -152,9 +154,9 @@ const J = (c) => /* @__PURE__ */ l(
     justifyContent: "center",
     cursor: "pointer",
     backgroundColor: "transparent",
-    ...b.borderStyle("none"),
-    ...b.borderWidth(0),
-    ...b.padding(0)
+    ...i.borderStyle("none"),
+    ...i.borderWidth(0),
+    ...i.padding(0)
   },
   arrowHorizontalStart: {
     ...a,
@@ -189,12 +191,12 @@ const J = (c) => /* @__PURE__ */ l(
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: B,
-    ...b.borderRadius(P),
+    backgroundColor: O,
+    ...i.borderRadius(q),
     backdropFilter: "blur(4px)",
-    color: G,
+    color: X,
     ":hover": {
-      backgroundColor: $
+      backgroundColor: U
     }
   },
   arrowIcon: {
@@ -203,7 +205,7 @@ const J = (c) => /* @__PURE__ */ l(
     height: "1rem"
   },
   scrollAreaRoot: {
-    ...b.overflow("hidden"),
+    ...i.overflow("hidden"),
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: "0%"
@@ -228,14 +230,20 @@ const J = (c) => /* @__PURE__ */ l(
   },
   viewport: {
     ...a,
-    ...b.borderRadius(U),
+    ...i.borderRadius(Y),
+    // The tracks replace the native scrollbars. Zenith's stylesheet hides them, so no inline
+    // <style> needs a nonce (Radix's took the viewport's).
+    scrollbarWidth: "none",
+    "::-webkit-scrollbar": { display: "none" },
     ":focus-visible": {
       outlineWidth: "2px",
       outlineOffset: "2px",
       outlineStyle: "solid",
-      outlineColor: K
+      outlineColor: _
     }
   },
+  // The content wrapper keeps Radix's display:table, which grows to the content's width.
+  content: { display: "table" },
   viewportHorizontal: {
     "& > div": {
       display: "flex",
@@ -256,7 +264,6 @@ const J = (c) => /* @__PURE__ */ l(
   },
   scrollbar: {
     ...a,
-    ...b.padding("1px"),
     transitionProperty: "color, background-color, border-color",
     transitionDuration: "150ms"
   },
@@ -266,78 +273,89 @@ const J = (c) => /* @__PURE__ */ l(
   scrollbarHorizontal: {
     ...a,
     height: "0.5rem",
-    flexDirection: "column"
+    flexDirection: "column",
+    // The 1px inset along the scroll axis is margin, not padding: Base UI sizes the thumb from the
+    // track's offset size without subtracting padding (see ScrollArea's tracks).
+    ...i.padding("1px", "0"),
+    ...i.margin("0", "1px")
   },
   scrollbarVertical: {
     ...a,
     width: "0.5rem",
-    flexDirection: "row"
+    flexDirection: "row",
+    ...i.padding("0", "1px"),
+    ...i.margin("1px", "0")
   },
   thumb: {
-    backgroundColor: B
+    backgroundColor: O
   }
-}), co = w.forwardRef(function({
+}), uo = w.forwardRef(function({
   className: m,
-  children: y,
+  children: z,
   arrows: h = !1,
   gradients: S = !0,
   gradientWidth: u = 40,
-  gradientColor: C = "var(--volt-body)",
-  shadow: x = !0,
-  scrollbar: g = !1,
+  gradientColor: b = "var(--volt-body)",
+  shadow: C = !0,
+  scrollbar: y = !1,
   scrollStep: H,
   orientation: n = "horizontal",
-  ...p
-}, z) {
-  const o = oo(), t = _(), {
-    scrollRef: e,
-    hasOverflow: i,
-    canScrollStart: d,
-    canScrollEnd: k,
-    scrollToStart: V,
-    scrollToEnd: E
-  } = q({ scrollStep: H, orientation: n }), r = n === "horizontal", L = (v) => {
-    var R, A;
+  dir: p = "ltr",
+  // Radix-only: its visibility and slotting have no Base UI counterpart (see the prop docs).
+  type: k,
+  scrollHideDelay: A,
+  asChild: l,
+  ...e
+}, d) {
+  const o = eo(), D = J(), {
+    scrollRef: x,
+    hasOverflow: V,
+    canScrollStart: E,
+    canScrollEnd: R,
+    scrollToStart: I,
+    scrollToEnd: B
+  } = Q({ scrollStep: H, orientation: n }), r = n === "horizontal", N = y && !(k === "hover" && !V), F = (v) => {
+    var T, L;
     if (v.target !== v.currentTarget) return;
-    const N = r ? "ArrowLeft" : "ArrowUp", T = r ? "ArrowRight" : "ArrowDown";
+    const Z = r ? "ArrowLeft" : "ArrowUp", j = r ? "ArrowRight" : "ArrowDown";
     switch (v.key) {
-      case N:
-        v.preventDefault(), V();
+      case Z:
+        v.preventDefault(), I();
         break;
-      case T:
-        v.preventDefault(), E();
+      case j:
+        v.preventDefault(), B();
         break;
       case "Home":
-        v.preventDefault(), (R = e.current) == null || R.scrollTo({
+        v.preventDefault(), (T = x.current) == null || T.scrollTo({
           [r ? "left" : "top"]: 0,
           behavior: "smooth"
         });
         break;
       case "End":
-        v.preventDefault(), (A = e.current) == null || A.scrollTo({
-          [r ? "left" : "top"]: r ? e.current.scrollWidth : e.current.scrollHeight,
+        v.preventDefault(), (L = x.current) == null || L.scrollTo({
+          [r ? "left" : "top"]: r ? x.current.scrollWidth : x.current.scrollHeight,
           behavior: "smooth"
         });
         break;
     }
   };
-  return /* @__PURE__ */ I(
+  return /* @__PURE__ */ M(
     "div",
     {
-      ref: z,
+      ref: d,
       "data-slot": "scroll-overflow",
       [s]: "scroll-overflow",
       "data-orientation": n,
-      "data-has-overflow": i || void 0,
-      "data-can-scroll-start": d || void 0,
-      "data-can-scroll-end": k || void 0,
+      "data-has-overflow": V || void 0,
+      "data-can-scroll-start": E || void 0,
+      "data-can-scroll-end": R || void 0,
       className: f(
         o.container,
         r ? o.containerHorizontal : o.containerVertical,
         m
       ),
       children: [
-        S && d && /* @__PURE__ */ l(
+        S && E && /* @__PURE__ */ t(
           "div",
           {
             "data-slot": "scroll-overflow-fade-start",
@@ -346,18 +364,18 @@ const J = (c) => /* @__PURE__ */ l(
             className: f(
               o.fade,
               r ? o.fadeHorizontalStart : o.fadeVerticalStart,
-              x && (r ? o.shadowHorizontalStart : o.shadowVerticalStart)
+              C && (r ? o.shadowHorizontalStart : o.shadowVerticalStart)
             ),
             style: r ? {
               width: u,
-              background: `linear-gradient(to right, ${C}, transparent)`
+              background: `linear-gradient(to right, ${b}, transparent)`
             } : {
               height: u,
-              background: `linear-gradient(to bottom, ${C}, transparent)`
+              background: `linear-gradient(to bottom, ${b}, transparent)`
             }
           }
         ),
-        h && d && /* @__PURE__ */ l(
+        h && E && /* @__PURE__ */ t(
           "button",
           {
             "data-slot": "scroll-overflow-arrow-start",
@@ -365,78 +383,89 @@ const J = (c) => /* @__PURE__ */ l(
             type: "button",
             tabIndex: -1,
             "aria-label": r ? "Scroll left" : "Scroll up",
-            onClick: V,
+            onClick: I,
             className: f(
               o.arrowButton,
               r ? o.arrowHorizontalStart : o.arrowVerticalStart
             ),
-            children: /* @__PURE__ */ l(
+            children: /* @__PURE__ */ t(
               "span",
               {
                 "data-slot": "scroll-overflow-arrow-icon",
                 [s]: "scroll-overflow-arrow-icon",
                 className: o.arrowBadge,
-                children: r ? /* @__PURE__ */ l(J, { className: o.arrowIcon }) : /* @__PURE__ */ l(X, { className: o.arrowIcon })
+                children: r ? /* @__PURE__ */ t(oo, { className: o.arrowIcon }) : /* @__PURE__ */ t(to, { className: o.arrowIcon })
               }
             )
           }
         ),
-        /* @__PURE__ */ I(
-          M,
+        /* @__PURE__ */ t(P, { direction: p, children: /* @__PURE__ */ t(K, { disableStyleElements: !0, children: /* @__PURE__ */ M(
+          g.Root,
           {
             "data-slot": "scroll-overflow-root",
-            type: "scroll",
             [s]: "scroll-overflow-root",
+            ...e,
+            dir: p,
             className: f(
               o.scrollAreaRoot,
               r ? o.scrollAreaRootHorizontal : o.scrollAreaRootVertical,
-              g && (r ? o.scrollAreaRootScrollbarHorizontal : o.scrollAreaRootScrollbarVertical)
+              N && (r ? o.scrollAreaRootScrollbarHorizontal : o.scrollAreaRootScrollbarVertical)
             ),
-            ...p,
             children: [
-              /* @__PURE__ */ l(
-                O,
+              /* @__PURE__ */ t(
+                g.Viewport,
                 {
-                  ref: e,
+                  ref: x,
                   "data-slot": "scroll-overflow-viewport",
                   [s]: "scroll-overflow-viewport",
-                  tabIndex: i ? 0 : void 0,
-                  onKeyDown: L,
+                  tabIndex: V ? 0 : -1,
+                  onKeyDown: F,
                   className: f(
                     o.viewport,
                     r && o.viewportHorizontal,
-                    g && o.viewportFlex,
+                    y && o.viewportFlex,
                     !r && o.viewportVertical
                   ),
-                  children: y
+                  style: {
+                    overflowX: r ? "scroll" : "hidden",
+                    overflowY: r ? "hidden" : "scroll"
+                  },
+                  children: /* @__PURE__ */ t(
+                    g.Content,
+                    {
+                      className: o.content,
+                      style: { minWidth: "100%" },
+                      children: z
+                    }
+                  )
                 }
               ),
-              /* @__PURE__ */ l(
-                F,
+              /* @__PURE__ */ t(
+                g.Scrollbar,
                 {
-                  forceMount: !0,
+                  keepMounted: !0,
                   orientation: n,
                   "data-slot": "scroll-overflow-scrollbar",
                   [s]: "scroll-overflow-scrollbar",
                   className: f(
-                    t.track,
-                    g ? o.scrollbar : o.scrollbarHidden,
+                    D.track,
+                    N ? o.scrollbar : o.scrollbarHidden,
                     r ? o.scrollbarHorizontal : o.scrollbarVertical
                   ),
-                  children: /* @__PURE__ */ l(
-                    W,
+                  children: /* @__PURE__ */ t(
+                    g.Thumb,
                     {
                       "data-slot": "scroll-overflow-thumb",
                       [s]: "scroll-overflow-thumb",
-                      className: f(t.thumb, o.thumb)
+                      className: f(D.thumb, o.thumb)
                     }
                   )
                 }
               )
             ]
           }
-        ),
-        S && k && /* @__PURE__ */ l(
+        ) }) }),
+        S && R && /* @__PURE__ */ t(
           "div",
           {
             "data-slot": "scroll-overflow-fade-end",
@@ -445,18 +474,18 @@ const J = (c) => /* @__PURE__ */ l(
             className: f(
               o.fade,
               r ? o.fadeHorizontalEnd : o.fadeVerticalEnd,
-              x && (r ? o.shadowHorizontalEnd : o.shadowVerticalEnd)
+              C && (r ? o.shadowHorizontalEnd : o.shadowVerticalEnd)
             ),
             style: r ? {
               width: u,
-              background: `linear-gradient(to left, ${C}, transparent)`
+              background: `linear-gradient(to left, ${b}, transparent)`
             } : {
               height: u,
-              background: `linear-gradient(to top, ${C}, transparent)`
+              background: `linear-gradient(to top, ${b}, transparent)`
             }
           }
         ),
-        h && k && /* @__PURE__ */ l(
+        h && R && /* @__PURE__ */ t(
           "button",
           {
             "data-slot": "scroll-overflow-arrow-end",
@@ -464,18 +493,18 @@ const J = (c) => /* @__PURE__ */ l(
             type: "button",
             tabIndex: -1,
             "aria-label": r ? "Scroll right" : "Scroll down",
-            onClick: E,
+            onClick: B,
             className: f(
               o.arrowButton,
               r ? o.arrowHorizontalEnd : o.arrowVerticalEnd
             ),
-            children: /* @__PURE__ */ l(
+            children: /* @__PURE__ */ t(
               "span",
               {
                 "data-slot": "scroll-overflow-arrow-icon",
                 [s]: "scroll-overflow-arrow-icon",
                 className: o.arrowBadge,
-                children: r ? /* @__PURE__ */ l(Q, { className: o.arrowIcon }) : /* @__PURE__ */ l(Y, { className: o.arrowIcon })
+                children: r ? /* @__PURE__ */ t(ro, { className: o.arrowIcon }) : /* @__PURE__ */ t(lo, { className: o.arrowIcon })
               }
             )
           }
@@ -485,7 +514,7 @@ const J = (c) => /* @__PURE__ */ l(
   );
 });
 export {
-  co as ScrollOverflow,
-  q as useScrollOverflow
+  uo as ScrollOverflow,
+  Q as useScrollOverflow
 };
 //# sourceMappingURL=scroll-overflow.js.map