@opencode-ai/ui 0.0.0-dev-19219 → 0.0.0-dev-202609070344

package/src/components/radio-group.css

@@ -0,0 +1,187 @@
+[data-component="radio-group"] {
+  --radio-group-height: 28px;
+  --radio-group-gap: 4px;
+  --radio-group-padding: 2px;
+
+  display: inline-flex;
+
+  [data-slot="radio-group-wrapper"] {
+    all: unset;
+    background-color: var(--surface-inset-base);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-xxs-border);
+    display: inline-flex;
+    height: var(--radio-group-height);
+    margin: 0;
+    overflow: visible;
+    padding: 0;
+    position: relative;
+    width: fit-content;
+  }
+
+  &[data-fill] [data-slot="radio-group-wrapper"] {
+    width: 100%;
+  }
+
+  [data-slot="radio-group-items"] {
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--radio-group-gap);
+    height: 100%;
+    list-style: none;
+    position: relative;
+    z-index: 1;
+  }
+
+  &[data-fill] [data-slot="radio-group-items"] {
+    width: 100%;
+  }
+
+  [data-slot="radio-group-indicator"] {
+    background: var(--button-secondary-base);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-xs-border-base);
+    content: "";
+    opacity: var(--indicator-opacity, 1);
+    pointer-events: none;
+    position: absolute;
+    transition:
+      opacity 200ms ease-out,
+      box-shadow 100ms ease-in-out,
+      width 200ms cubic-bezier(0.22, 1.2, 0.36, 1),
+      height 200ms cubic-bezier(0.22, 1.2, 0.36, 1),
+      transform 300ms cubic-bezier(0.22, 1.2, 0.36, 1);
+    will-change: transform;
+    z-index: 0;
+  }
+
+  [data-slot="radio-group-item"] {
+    display: flex;
+    height: 100%;
+    min-width: 0;
+    position: relative;
+  }
+
+  &[data-fill] [data-slot="radio-group-item"] {
+    flex: 1;
+  }
+
+  [data-slot="radio-group-item-input"] {
+    border-width: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  [data-slot="radio-group-item-label"] {
+    color: var(--text-weak);
+    cursor: default;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+    flex: 1;
+    height: 100%;
+    line-height: 1;
+    padding: var(--radio-group-padding);
+    position: relative;
+    transition:
+      color 200ms ease-out,
+      opacity 200ms ease-out;
+    user-select: none;
+  }
+
+  [data-slot="radio-group-item-control"] {
+    align-items: center;
+    border-radius: var(--radius-xs);
+    display: inline-flex;
+    height: 100%;
+    justify-content: center;
+    min-width: 0;
+    padding: var(--radio-group-control-padding, 0 10px);
+    transition: background-color 200ms ease-out;
+    width: 100%;
+  }
+
+  &[data-pad="none"] {
+    --radio-group-control-padding: 0;
+  }
+
+  &[data-pad="normal"] {
+    --radio-group-control-padding: 0 10px;
+  }
+
+  /* Checked state */
+  [data-slot="radio-group-item-input"][data-checked] + [data-slot="radio-group-item-label"] {
+    color: var(--text-strong);
+  }
+
+  /* Hover state: match the inset background (adds subtle density) */
+  [data-slot="radio-group-item-input"]:not([data-checked], [data-disabled])
+    + [data-slot="radio-group-item-label"]:hover
+    [data-slot="radio-group-item-control"] {
+    background-color: var(--surface-inset-base);
+  }
+
+  /* Do not overlay hover on the active segment */
+  [data-slot="radio-group-item-input"][data-checked]
+    + [data-slot="radio-group-item-label"]:hover
+    [data-slot="radio-group-item-control"] {
+    background-color: transparent;
+  }
+
+  /* Disabled state */
+  [data-slot="radio-group-item-input"][data-disabled] + [data-slot="radio-group-item-label"] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Focus state */
+  [data-slot="radio-group-wrapper"]:has([data-slot="radio-group-item-input"]:focus-visible)
+    [data-slot="radio-group-indicator"] {
+    box-shadow: var(--shadow-xs-border-focus);
+  }
+
+  /* Hide indicator when nothing is checked */
+  [data-slot="radio-group-wrapper"]:not(:has([data-slot="radio-group-item-input"][data-checked]))
+    [data-slot="radio-group-indicator"] {
+    --indicator-opacity: 0;
+  }
+
+  /* Vertical orientation */
+  &[aria-orientation="vertical"] [data-slot="radio-group-items"] {
+    flex-direction: column;
+  }
+
+  /* Small size variant */
+  &[data-size="small"] {
+    --radio-group-height: 24px;
+    --radio-group-gap: 3px;
+    --radio-group-padding: 2px;
+
+    [data-slot="radio-group-item-label"] {
+      font-size: 12px;
+    }
+
+    [data-slot="radio-group-item-control"] {
+      padding: var(--radio-group-control-padding, 0 8px);
+    }
+  }
+
+  &[data-size="small"][data-pad="normal"] {
+    --radio-group-control-padding: 0 8px;
+  }
+
+  /* Disabled root state */
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

package/src/components/radio-group.tsx

@@ -0,0 +1,83 @@
+import { SegmentedControl as Kobalte } from "@kobalte/core/segmented-control"
+import { For, splitProps } from "solid-js"
+import type { ComponentProps, JSX } from "solid-js"
+
+export type RadioGroupProps<T> = Omit<
+  ComponentProps<typeof Kobalte>,
+  "value" | "defaultValue" | "onChange" | "children"
+> & {
+  options: T[]
+  current?: T
+  defaultValue?: T
+  value?: (x: T) => string
+  label?: (x: T) => JSX.Element | string
+  onSelect?: (value: T | undefined) => void
+  class?: ComponentProps<"div">["class"]
+  classList?: ComponentProps<"div">["classList"]
+  size?: "small" | "medium"
+  fill?: boolean
+  pad?: "none" | "normal"
+}
+
+export function RadioGroup<T>(props: RadioGroupProps<T>) {
+  const [local, others] = splitProps(props, [
+    "class",
+    "classList",
+    "options",
+    "current",
+    "defaultValue",
+    "value",
+    "label",
+    "onSelect",
+    "size",
+    "fill",
+    "pad",
+  ])
+
+  const getValue = (item: T): string => {
+    if (local.value) return local.value(item)
+    return String(item)
+  }
+
+  const getLabel = (item: T): JSX.Element | string => {
+    if (local.label) return local.label(item)
+    return String(item)
+  }
+
+  const findOption = (v: string): T | undefined => {
+    return local.options.find((opt) => getValue(opt) === v)
+  }
+
+  return (
+    <Kobalte
+      {...others}
+      data-component="radio-group"
+      data-size={local.size ?? "medium"}
+      data-fill={local.fill ? "" : undefined}
+      data-pad={local.pad ?? "normal"}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+      value={local.current ? getValue(local.current) : undefined}
+      defaultValue={local.defaultValue ? getValue(local.defaultValue) : undefined}
+      onChange={(v) => local.onSelect?.(findOption(v))}
+    >
+      <div role="presentation" data-slot="radio-group-wrapper">
+        <Kobalte.Indicator data-slot="radio-group-indicator" />
+        <div role="presentation" data-slot="radio-group-items">
+          <For each={local.options}>
+            {(option) => (
+              <Kobalte.Item value={getValue(option)} data-slot="radio-group-item" data-value={getValue(option)}>
+                <Kobalte.ItemInput data-slot="radio-group-item-input" />
+                <Kobalte.ItemLabel data-slot="radio-group-item-label">
+                  <span data-slot="radio-group-item-control">{getLabel(option)}</span>
+                </Kobalte.ItemLabel>
+              </Kobalte.Item>
+            )}
+          </For>
+        </div>
+      </div>
+    </Kobalte>
+  )
+}

package/src/components/scroll-view.css

@@ -15,21 +15,15 @@
   outline: none;
 }
 
-.scroll-view[data-orientation="horizontal"] .scroll-view__viewport {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.scroll-view[data-orientation="both"] .scroll-view__viewport {
-  overflow: auto;
-}
-
 .scroll-view__viewport::-webkit-scrollbar {
   display: none;
 }
 
 .scroll-view__thumb {
   position: absolute;
+  inset-inline-end: 0;
+  top: 0;
+  width: 12px;
   transition: opacity 200ms ease;
   cursor: default;
   user-select: none;
@@ -37,19 +31,7 @@
   opacity: 0;
 }
 
-.scroll-view__thumb[data-orientation="vertical"] {
-  inset-inline-end: 0;
-  top: 0;
-  width: 12px;
-}
-
-.scroll-view__thumb[data-orientation="horizontal"] {
-  left: 0;
-  bottom: 0;
-  height: 12px;
-}
-
-.scroll-view__thumb[data-orientation="vertical"]::after {
+.scroll-view__thumb::after {
   content: "";
   position: absolute;
   left: 50%;
@@ -63,20 +45,6 @@
   transition: background-color 150ms ease;
 }
 
-.scroll-view__thumb[data-orientation="horizontal"]::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  height: 4px;
-  transform: translateY(-50%);
-  border-radius: 9999px;
-  background-color: var(--border-weak-base);
-  backdrop-filter: blur(4px);
-  transition: background-color 150ms ease;
-}
-
 .scroll-view__thumb:hover::after,
 .scroll-view__thumb[data-dragging="true"]::after {
   background-color: var(--border-strong-base);

package/src/components/scroll-view.tsx

@@ -1,4 +1,14 @@
-import { createEffect, mergeProps, onCleanup, onMount, Show, splitProps, type ComponentProps } from "solid-js"
+import {
+  createEffect,
+  createMemo,
+  mergeProps,
+  onCleanup,
+  onMount,
+  Show,
+  splitProps,
+  type Accessor,
+  type ComponentProps,
+} from "solid-js"
 import { Portal } from "solid-js/web"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { createStore } from "solid-js/store"
@@ -8,7 +18,7 @@ export type ScrollViewThumbVisibility = "hover" | "scroll"
 
 export interface ScrollViewProps extends ComponentProps<"div"> {
   viewportRef?: (el: HTMLDivElement) => void
-  orientation?: "vertical" | "horizontal" | "both"
+  orientation?: "vertical" | "horizontal" // currently only vertical is fully implemented for thumb
   /**
    * `hover`: show while hovered or scrolling. `scroll`: show only while scrolling.
    *
@@ -17,9 +27,9 @@ export interface ScrollViewProps extends ComponentProps<"div"> {
    * */
   thumbVisibility?: ScrollViewThumbVisibility
   /** Mount the thumb into an external track. Scroll metrics still come from this ScrollView. */
-  thumbContainer?: HTMLElement
+  thumbContainer?: HTMLElement | Accessor<HTMLElement | undefined>
   /** Element whose hover reveals the thumb. Defaults to the ScrollView root when unset. */
-  thumbHoverTarget?: HTMLElement
+  thumbHoverTarget?: HTMLElement | Accessor<HTMLElement | undefined>
 }
 
 export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => {
@@ -78,37 +88,12 @@ export function scrollTopFromThumbPointer(input: {
   thumbHeight: number
   /** Viewport height used for max scroll. Defaults to `clientHeight` (track == viewport). */
   scrollClientHeight?: number
-}) {
-  return scrollOffsetFromThumbPointer({
-    pointer: input.pointer,
-    viewportStart: input.viewportTop,
-    grabOffset: input.grabOffset,
-    clientSize: input.clientHeight,
-    scrollSize: input.scrollHeight,
-    thumbSize: input.thumbHeight,
-    scrollClientSize: input.scrollClientHeight,
-  })
-}
-
-export function scrollOffsetFromThumbPointer(input: {
-  pointer: number
-  viewportStart: number
-  grabOffset: number
-  clientSize: number
-  scrollSize: number
-  thumbSize: number
-  scrollClientSize?: number
-  reverse?: boolean
 }) {
   const padding = 8
-  const maxThumbStart = input.clientSize - padding * 2 - input.thumbSize
-  if (maxThumbStart <= 0) return 0
-  const thumbStart = Math.max(
-    0,
-    Math.min(input.pointer - input.viewportStart - padding - input.grabOffset, maxThumbStart),
-  )
-  const progress = input.reverse ? 1 - thumbStart / maxThumbStart : thumbStart / maxThumbStart
-  return progress * Math.max(0, input.scrollSize - (input.scrollClientSize ?? input.clientSize))
+  const maxThumbTop = input.clientHeight - padding * 2 - input.thumbHeight
+  if (maxThumbTop <= 0) return 0
+  const thumbTop = Math.max(0, Math.min(input.pointer - input.viewportTop - padding - input.grabOffset, maxThumbTop))
+  return (thumbTop / maxThumbTop) * Math.max(0, input.scrollHeight - (input.scrollClientHeight ?? input.clientHeight))
 }
 
 export function ScrollView(props: ScrollViewProps) {
@@ -141,29 +126,31 @@ export function ScrollView(props: ScrollViewProps) {
 
   let rootRef!: HTMLDivElement
   let viewportRef!: HTMLDivElement
-  let verticalThumbRef!: HTMLDivElement
-  let horizontalThumbRef!: HTMLDivElement
+  let thumbRef!: HTMLDivElement
+
+  const resolveEl = (value: HTMLElement | Accessor<HTMLElement | undefined> | undefined) => {
+    if (typeof value === "function") return value()
+    return value
+  }
 
-  const thumbMount = () => local.thumbContainer
-  const thumbHover = () => local.thumbHoverTarget
+  const thumbMount = createMemo(() => resolveEl(local.thumbContainer))
+  const thumbHover = createMemo(() => resolveEl(local.thumbHoverTarget))
   const hoverRoot = () => !local.thumbHoverTarget && !local.thumbContainer
 
   const [state, setState] = createStore({
     isHovered: false,
-    dragging: undefined as "vertical" | "horizontal" | undefined,
+    isDragging: false,
     isScrolling: false,
-    verticalThumbSize: 0,
-    verticalThumbStart: 0,
-    showVerticalThumb: false,
-    horizontalThumbSize: 0,
-    horizontalThumbStart: 0,
-    showHorizontalThumb: false,
+    thumbHeight: 0,
+    thumbTop: 0,
+    showThumb: false,
   })
   const isHovered = () => state.isHovered
-  const isDragging = () => state.dragging !== undefined
+  const isDragging = () => state.isDragging
   const isScrolling = () => state.isScrolling
-  const vertical = () => local.orientation === "vertical" || local.orientation === "both"
-  const horizontal = () => local.orientation === "horizontal" || local.orientation === "both"
+  const thumbHeight = () => state.thumbHeight
+  const thumbTop = () => state.thumbTop
+  const showThumb = () => state.showThumb
 
   let scrollIdleTimer: ReturnType<typeof setTimeout> | undefined
 
@@ -185,42 +172,33 @@ export function ScrollView(props: ScrollViewProps) {
 
   const updateThumb = () => {
     if (!viewportRef) return
-    const trackPadding = 8
-    const minThumbSize = 32
-
-    if (vertical()) {
-      const trackSize = Math.max(0, (thumbMount()?.clientHeight || viewportRef.clientHeight) - trackPadding * 2)
-      const size = trackSize
-        ? Math.min(trackSize, Math.max((viewportRef.clientHeight / viewportRef.scrollHeight) * trackSize, minThumbSize))
-        : 0
-      const maxScroll = viewportRef.scrollHeight - viewportRef.clientHeight
-      const maxStart = trackSize - size
-      setState("showVerticalThumb", maxScroll > 0)
-      setState("verticalThumbSize", size)
-      setState(
-        "verticalThumbStart",
-        trackPadding + (maxScroll > 0 ? (viewportRef.scrollTop / maxScroll) * maxStart : 0),
-      )
-    } else {
-      setState("showVerticalThumb", false)
-    }
+    const { scrollTop, scrollHeight, clientHeight } = viewportRef
 
-    if (horizontal()) {
-      const trackSize = Math.max(0, (thumbMount()?.clientWidth || viewportRef.clientWidth) - trackPadding * 2)
-      const size = trackSize
-        ? Math.min(trackSize, Math.max((viewportRef.clientWidth / viewportRef.scrollWidth) * trackSize, minThumbSize))
-        : 0
-      const maxScroll = viewportRef.scrollWidth - viewportRef.clientWidth
-      const maxStart = trackSize - size
-      const rtl = getComputedStyle(viewportRef).direction === "rtl"
-      const offset = Math.max(0, Math.min(rtl ? -viewportRef.scrollLeft : viewportRef.scrollLeft, maxScroll))
-      const start = maxScroll > 0 ? (offset / maxScroll) * maxStart : 0
-      setState("showHorizontalThumb", maxScroll > 0)
-      setState("horizontalThumbSize", size)
-      setState("horizontalThumbStart", trackPadding + (rtl ? maxStart - start : start))
-    } else {
-      setState("showHorizontalThumb", false)
+    if (scrollHeight <= clientHeight || scrollHeight === 0) {
+      setState("showThumb", false)
+      return
     }
+
+    setState("showThumb", true)
+    const trackPadding = 8
+    const trackClientHeight = thumbMount()?.clientHeight || clientHeight
+    const trackHeight = trackClientHeight - trackPadding * 2
+
+    const minThumbHeight = 32
+    // Calculate raw thumb height based on ratio
+    let height = (clientHeight / scrollHeight) * trackHeight
+    height = Math.max(height, minThumbHeight)
+
+    const maxScrollTop = scrollHeight - clientHeight
+    const maxThumbTop = trackHeight - height
+
+    const top = maxScrollTop > 0 ? (scrollTop / maxScrollTop) * maxThumbTop : 0
+
+    // Ensure thumb stays within bounds (shouldn't be necessary due to math above, but good for safety)
+    const boundedTop = trackPadding + Math.max(0, Math.min(top, maxThumbTop))
+
+    setState("thumbHeight", height)
+    setState("thumbTop", boundedTop)
   }
 
   onMount(() => {
@@ -241,13 +219,6 @@ export function ScrollView(props: ScrollViewProps) {
     updateThumb()
   })
 
-  createEffect(() => {
-    if (!horizontal() || !viewportRef) return
-    const observer = new MutationObserver(updateThumb)
-    observer.observe(viewportRef, { childList: true, subtree: true, characterData: true })
-    onCleanup(() => observer.disconnect())
-  })
-
   createEffect(() => {
     const target = thumbHover()
     if (!target) return
@@ -263,88 +234,58 @@ export function ScrollView(props: ScrollViewProps) {
     })
   })
 
-  const onThumbPointerDown = (axis: "vertical" | "horizontal", e: PointerEvent) => {
+  const onThumbPointerDown = (e: PointerEvent) => {
     e.preventDefault()
     e.stopPropagation()
-    setState("dragging", axis)
-    const thumb = axis === "vertical" ? verticalThumbRef : horizontalThumbRef
-    const grabOffset =
-      axis === "vertical"
-        ? e.clientY - thumb.getBoundingClientRect().top
-        : e.clientX - thumb.getBoundingClientRect().left
+    setState("isDragging", true)
+    const grabOffset = e.clientY - thumbRef.getBoundingClientRect().top
     const track = thumbMount() ?? viewportRef
 
-    thumb.setPointerCapture(e.pointerId)
+    thumbRef.setPointerCapture(e.pointerId)
 
     const onPointerMove = (e: PointerEvent) => {
-      const vertical = axis === "vertical"
-      const rtl = !vertical && getComputedStyle(viewportRef).direction === "rtl"
-      const offset = scrollOffsetFromThumbPointer({
-        pointer: vertical ? e.clientY : e.clientX,
-        viewportStart: vertical ? track.getBoundingClientRect().top : track.getBoundingClientRect().left,
+      const { scrollHeight, clientHeight } = viewportRef
+      viewportRef.scrollTop = scrollTopFromThumbPointer({
+        pointer: e.clientY,
+        viewportTop: track.getBoundingClientRect().top,
         grabOffset,
-        clientSize: vertical ? track.clientHeight : track.clientWidth,
-        scrollClientSize: vertical ? viewportRef.clientHeight : viewportRef.clientWidth,
-        scrollSize: vertical ? viewportRef.scrollHeight : viewportRef.scrollWidth,
-        thumbSize: vertical ? state.verticalThumbSize : state.horizontalThumbSize,
-        reverse: rtl,
+        clientHeight: track.clientHeight,
+        scrollClientHeight: clientHeight,
+        scrollHeight,
+        thumbHeight: thumbHeight(),
       })
-      if (vertical) {
-        viewportRef.scrollTop = offset
-        return
-      }
-      viewportRef.scrollLeft = rtl ? -offset : offset
     }
 
     const done = (e: PointerEvent) => {
-      setState("dragging", undefined)
-      thumb.releasePointerCapture(e.pointerId)
-      thumb.removeEventListener("pointermove", onPointerMove)
-      thumb.removeEventListener("pointerup", done)
-      thumb.removeEventListener("pointercancel", done)
+      setState("isDragging", false)
+      thumbRef.releasePointerCapture(e.pointerId)
+      thumbRef.removeEventListener("pointermove", onPointerMove)
+      thumbRef.removeEventListener("pointerup", done)
+      thumbRef.removeEventListener("pointercancel", done)
     }
 
-    thumb.addEventListener("pointermove", onPointerMove)
-    thumb.addEventListener("pointerup", done)
-    thumb.addEventListener("pointercancel", done)
+    thumbRef.addEventListener("pointermove", onPointerMove)
+    thumbRef.addEventListener("pointerup", done)
+    thumbRef.addEventListener("pointercancel", done)
   }
 
-  const renderVerticalThumb = () => (
+  const renderThumb = () => (
     <div
       ref={(el) => {
-        verticalThumbRef = el
+        thumbRef = el
       }}
-      onPointerDown={(event) => onThumbPointerDown("vertical", event)}
+      onPointerDown={onThumbPointerDown}
       class="scroll-view__thumb"
-      data-orientation="vertical"
       data-visible={thumbVisible()}
-      data-dragging={state.dragging === "vertical"}
+      data-dragging={isDragging()}
       style={{
-        height: `${state.verticalThumbSize}px`,
-        transform: `translateY(${state.verticalThumbStart}px)`,
+        height: `${thumbHeight()}px`,
+        transform: `translateY(${thumbTop()}px)`,
         "z-index": 100, // ensure it displays over content
       }}
     />
   )
 
-  const renderHorizontalThumb = () => (
-    <div
-      ref={(el) => {
-        horizontalThumbRef = el
-      }}
-      onPointerDown={(event) => onThumbPointerDown("horizontal", event)}
-      class="scroll-view__thumb"
-      data-orientation="horizontal"
-      data-visible={thumbVisible()}
-      data-dragging={state.dragging === "horizontal"}
-      style={{
-        width: `${state.horizontalThumbSize}px`,
-        transform: `translateX(${state.horizontalThumbStart}px)`,
-        "z-index": 100,
-      }}
-    />
-  )
-
   // Keybinds implementation
   // We ensure the viewport has a tabindex so it can receive focus
   // We can also explicitly catch PageUp/Down if we want smooth scroll or specific behavior,
@@ -394,7 +335,6 @@ export function ScrollView(props: ScrollViewProps) {
     <div
       ref={rootRef}
       class={`scroll-view ${local.class || ""}`}
-      data-orientation={local.orientation}
       style={local.style}
       onPointerEnter={() => {
         if (hoverRoot()) setState("isHovered", true)
@@ -438,14 +378,9 @@ export function ScrollView(props: ScrollViewProps) {
       </div>
 
       {/* Thumb Overlay — optionally portaled into an external track */}
-      <Show when={state.showVerticalThumb}>
-        <Show when={thumbMount()} fallback={renderVerticalThumb()}>
-          {(mount) => <Portal mount={mount()}>{renderVerticalThumb()}</Portal>}
-        </Show>
-      </Show>
-      <Show when={state.showHorizontalThumb}>
-        <Show when={thumbMount()} fallback={renderHorizontalThumb()}>
-          {(mount) => <Portal mount={mount()}>{renderHorizontalThumb()}</Portal>}
+      <Show when={showThumb()}>
+        <Show when={thumbMount()} fallback={renderThumb()}>
+          {(mount) => <Portal mount={mount()}>{renderThumb()}</Portal>}
         </Show>
       </Show>
     </div>