@opencode-ai/ui 0.0.0-dev-202609071625 → 0.0.0-dev-19270

package/src/components/scroll-view.tsx

@@ -1,14 +1,4 @@
-import {
-  createEffect,
-  createMemo,
-  mergeProps,
-  onCleanup,
-  onMount,
-  Show,
-  splitProps,
-  type Accessor,
-  type ComponentProps,
-} from "solid-js"
+import { createEffect, mergeProps, onCleanup, onMount, Show, splitProps, type ComponentProps } from "solid-js"
 import { Portal } from "solid-js/web"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { createStore } from "solid-js/store"
@@ -18,7 +8,7 @@ export type ScrollViewThumbVisibility = "hover" | "scroll"
 
 export interface ScrollViewProps extends ComponentProps<"div"> {
   viewportRef?: (el: HTMLDivElement) => void
-  orientation?: "vertical" | "horizontal" // currently only vertical is fully implemented for thumb
+  orientation?: "vertical" | "horizontal" | "both"
   /**
    * `hover`: show while hovered or scrolling. `scroll`: show only while scrolling.
    *
@@ -27,9 +17,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 | Accessor<HTMLElement | undefined>
+  thumbContainer?: HTMLElement
   /** Element whose hover reveals the thumb. Defaults to the ScrollView root when unset. */
-  thumbHoverTarget?: HTMLElement | Accessor<HTMLElement | undefined>
+  thumbHoverTarget?: HTMLElement
 }
 
 export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => {
@@ -88,12 +78,37 @@ 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 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))
+  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))
 }
 
 export function ScrollView(props: ScrollViewProps) {
@@ -126,31 +141,29 @@ export function ScrollView(props: ScrollViewProps) {
 
   let rootRef!: HTMLDivElement
   let viewportRef!: HTMLDivElement
-  let thumbRef!: HTMLDivElement
-
-  const resolveEl = (value: HTMLElement | Accessor<HTMLElement | undefined> | undefined) => {
-    if (typeof value === "function") return value()
-    return value
-  }
+  let verticalThumbRef!: HTMLDivElement
+  let horizontalThumbRef!: HTMLDivElement
 
-  const thumbMount = createMemo(() => resolveEl(local.thumbContainer))
-  const thumbHover = createMemo(() => resolveEl(local.thumbHoverTarget))
+  const thumbMount = () => local.thumbContainer
+  const thumbHover = () => local.thumbHoverTarget
   const hoverRoot = () => !local.thumbHoverTarget && !local.thumbContainer
 
   const [state, setState] = createStore({
     isHovered: false,
-    isDragging: false,
+    dragging: undefined as "vertical" | "horizontal" | undefined,
     isScrolling: false,
-    thumbHeight: 0,
-    thumbTop: 0,
-    showThumb: false,
+    verticalThumbSize: 0,
+    verticalThumbStart: 0,
+    showVerticalThumb: false,
+    horizontalThumbSize: 0,
+    horizontalThumbStart: 0,
+    showHorizontalThumb: false,
   })
   const isHovered = () => state.isHovered
-  const isDragging = () => state.isDragging
+  const isDragging = () => state.dragging !== undefined
   const isScrolling = () => state.isScrolling
-  const thumbHeight = () => state.thumbHeight
-  const thumbTop = () => state.thumbTop
-  const showThumb = () => state.showThumb
+  const vertical = () => local.orientation === "vertical" || local.orientation === "both"
+  const horizontal = () => local.orientation === "horizontal" || local.orientation === "both"
 
   let scrollIdleTimer: ReturnType<typeof setTimeout> | undefined
 
@@ -172,33 +185,42 @@ export function ScrollView(props: ScrollViewProps) {
 
   const updateThumb = () => {
     if (!viewportRef) return
-    const { scrollTop, scrollHeight, clientHeight } = viewportRef
-
-    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))
+    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)
+    }
 
-    setState("thumbHeight", height)
-    setState("thumbTop", boundedTop)
+    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)
+    }
   }
 
   onMount(() => {
@@ -219,6 +241,13 @@ 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
@@ -234,58 +263,88 @@ export function ScrollView(props: ScrollViewProps) {
     })
   })
 
-  const onThumbPointerDown = (e: PointerEvent) => {
+  const onThumbPointerDown = (axis: "vertical" | "horizontal", e: PointerEvent) => {
     e.preventDefault()
     e.stopPropagation()
-    setState("isDragging", true)
-    const grabOffset = e.clientY - thumbRef.getBoundingClientRect().top
+    setState("dragging", axis)
+    const thumb = axis === "vertical" ? verticalThumbRef : horizontalThumbRef
+    const grabOffset =
+      axis === "vertical"
+        ? e.clientY - thumb.getBoundingClientRect().top
+        : e.clientX - thumb.getBoundingClientRect().left
     const track = thumbMount() ?? viewportRef
 
-    thumbRef.setPointerCapture(e.pointerId)
+    thumb.setPointerCapture(e.pointerId)
 
     const onPointerMove = (e: PointerEvent) => {
-      const { scrollHeight, clientHeight } = viewportRef
-      viewportRef.scrollTop = scrollTopFromThumbPointer({
-        pointer: e.clientY,
-        viewportTop: track.getBoundingClientRect().top,
+      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,
         grabOffset,
-        clientHeight: track.clientHeight,
-        scrollClientHeight: clientHeight,
-        scrollHeight,
-        thumbHeight: thumbHeight(),
+        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,
       })
+      if (vertical) {
+        viewportRef.scrollTop = offset
+        return
+      }
+      viewportRef.scrollLeft = rtl ? -offset : offset
     }
 
     const done = (e: PointerEvent) => {
-      setState("isDragging", false)
-      thumbRef.releasePointerCapture(e.pointerId)
-      thumbRef.removeEventListener("pointermove", onPointerMove)
-      thumbRef.removeEventListener("pointerup", done)
-      thumbRef.removeEventListener("pointercancel", done)
+      setState("dragging", undefined)
+      thumb.releasePointerCapture(e.pointerId)
+      thumb.removeEventListener("pointermove", onPointerMove)
+      thumb.removeEventListener("pointerup", done)
+      thumb.removeEventListener("pointercancel", done)
     }
 
-    thumbRef.addEventListener("pointermove", onPointerMove)
-    thumbRef.addEventListener("pointerup", done)
-    thumbRef.addEventListener("pointercancel", done)
+    thumb.addEventListener("pointermove", onPointerMove)
+    thumb.addEventListener("pointerup", done)
+    thumb.addEventListener("pointercancel", done)
   }
 
-  const renderThumb = () => (
+  const renderVerticalThumb = () => (
     <div
       ref={(el) => {
-        thumbRef = el
+        verticalThumbRef = el
       }}
-      onPointerDown={onThumbPointerDown}
+      onPointerDown={(event) => onThumbPointerDown("vertical", event)}
       class="scroll-view__thumb"
+      data-orientation="vertical"
       data-visible={thumbVisible()}
-      data-dragging={isDragging()}
+      data-dragging={state.dragging === "vertical"}
       style={{
-        height: `${thumbHeight()}px`,
-        transform: `translateY(${thumbTop()}px)`,
+        height: `${state.verticalThumbSize}px`,
+        transform: `translateY(${state.verticalThumbStart}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,
@@ -335,6 +394,7 @@ 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)
@@ -378,9 +438,14 @@ export function ScrollView(props: ScrollViewProps) {
       </div>
 
       {/* Thumb Overlay — optionally portaled into an external track */}
-      <Show when={showThumb()}>
-        <Show when={thumbMount()} fallback={renderThumb()}>
-          {(mount) => <Portal mount={mount()}>{renderThumb()}</Portal>}
+      <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>
       </Show>
     </div>

package/src/components/sticky-accordion-header.tsx

@@ -1,4 +1,4 @@
-import { Accordion } from "./accordion"
+import { Accordion } from "@opencode-ai/ui/accordion"
 import { ParentProps } from "solid-js"
 
 export function StickyAccordionHeader(

package/src/components/text-field.tsx

@@ -2,8 +2,9 @@ import { TextField as Kobalte } from "@kobalte/core/text-field"
 import { createSignal, Show, splitProps } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { useI18n } from "../context/i18n"
-import { IconButton } from "./icon-button"
-import { Tooltip } from "./tooltip"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
 
 export interface TextFieldProps
   extends ComponentProps<typeof Kobalte.Input>,
@@ -106,10 +107,17 @@ export function TextField(props: TextFieldProps) {
           <Kobalte.TextArea {...others} autoResize data-slot="input-input" class={local.class} />
         </Show>
         <Show when={local.copyable}>
-          <Tooltip value={label()} placement="top" gutter={4} forceOpen={copied()} skipDelayDuration={0}>
+          <Tooltip
+            appearance="standard"
+            value={label()}
+            placement="top"
+            gutter={4}
+            forceOpen={copied() ? true : undefined}
+            skipDelayDuration={0}
+          >
             <IconButton
               type="button"
-              icon={icon()}
+              icon={<Icon name={icon()} />}
               variant="ghost"
               onClick={handleCopy}
               tabIndex={-1}

package/src/context/dialog.tsx

@@ -81,6 +81,7 @@ function init() {
     let dispose: (() => void) | undefined
     let setClosing: ((closing: boolean) => void) | undefined
 
+    // Stacked dialogs render as sibling portals, so only the top layer may own the focus trap.
     const node = runWithOwner(owner, () =>
       createRoot((d: () => void) => {
         dispose = d

package/src/context/i18n.tsx

@@ -1,26 +1,24 @@
 import { createContext, useContext, type Accessor, type ParentProps } from "solid-js"
 import { I18nProvider } from "@kobalte/core/i18n"
 import { dict as en } from "../i18n/en"
+import type { Key, LocaleKey, PluralCategory, PluralKey, PluralLookupKey } from "../i18n/en"
 
-export type UiI18nKey = keyof typeof en
-
-export const UI_PLURAL_KEYS = [
-  "ui.sessionTurn.diffs.changed",
-  "ui.messagePart.context.read",
-  "ui.messagePart.context.search",
-  "ui.messagePart.context.list",
-] as const
-export type UiI18nPluralKey = (typeof UI_PLURAL_KEYS)[number]
-export type UiPluralCategory = "zero" | "one" | "two" | "few" | "many" | "other"
-export type UiI18nPluralLookupKey = `${UiI18nPluralKey}.${UiPluralCategory}`
+export type UiI18nKey = Key
+export type UiI18nPluralKey = PluralKey
+export type UiPluralCategory = PluralCategory
+export type UiI18nPluralLookupKey = PluralLookupKey
+export type UiI18nLocaleKey = LocaleKey
+type UiTranslationKey<Value extends string> = Value extends UiI18nPluralLookupKey ? never : Value
 
 export type UiI18nParams = Record<string, string | number | boolean>
+export type UiTranslate = <Value extends string>(key: UiTranslationKey<Value>, params?: UiI18nParams) => string
 
 export type UiI18n = {
   locale: Accessor<string>
   layoutLocale?: Accessor<string>
-  t: (key: UiI18nKey, params?: UiI18nParams) => string
+  t: UiTranslate
   plural: (key: UiI18nPluralKey, count: number, params?: UiI18nParams) => string
+  pluralForm?: (key: UiI18nPluralKey, category: UiPluralCategory, params?: UiI18nParams) => string
 }
 
 const rules = new Map<string, Intl.PluralRules>()
@@ -50,11 +48,16 @@ function resolveTemplate(text: string, params?: UiI18nParams) {
 const fallback: UiI18n = {
   locale: () => "en",
   t: (key, params) => {
-    const value = en[key] ?? String(key)
+    const value = en[key as UiI18nKey] ?? String(key)
     return resolveTemplate(value, params)
   },
   plural: (key, count, params) =>
-    fallback.t(pluralKey(key, pluralCategory(fallback.locale(), count)), { ...params, count }),
+    fallback.pluralForm!(key, pluralCategory(fallback.locale(), count), { ...params, count }),
+  pluralForm: (key, category, params) => {
+    const values = en as Partial<Record<UiI18nLocaleKey, string>>
+    const value = values[pluralKey(key, category)] ?? values[`${key}.other`] ?? `${key}.other`
+    return resolveTemplate(value, params)
+  },
 }
 
 const Context = createContext<UiI18n>(fallback)

package/src/context/marked-base.tsx

@@ -0,0 +1,27 @@
+import { Marked } from "marked"
+
+export function createMarkdownBase() {
+  return new Marked({
+    renderer: {
+      link({ href, title, text }) {
+        const titleAttr = title ? ` title="${title}"` : ""
+        return `<a href="${href}"${titleAttr} class="external-link" target="_blank" rel="noopener noreferrer">${text}</a>`
+      },
+    },
+  })
+}
+
+let smallParser: Marked | undefined
+
+export function parseSmallMarkdown(text: string) {
+  // Any possible KaTeX delimiter stays on the worker, including escaped ones.
+  if (text.length > 1024 || text.includes("\\(") || text.includes("$$")) return
+  const parser = (smallParser ??= createMarkdownBase())
+  const tokens = parser.lexer(text)
+  let code = false
+  parser.walkTokens(tokens, (token) => {
+    if (token.type === "code") code = true
+  })
+  if (code) return
+  return parser.parser(tokens)
+}

package/src/context/marked-parser.tsx

@@ -1,20 +1,10 @@
 import katex from "katex"
-import { Marked, type MarkedExtension, type Tokens } from "marked"
+import type { MarkedExtension, Tokens } from "marked"
 import markedShiki from "marked-shiki"
+import { createMarkdownBase } from "./marked-base"
 
 export function createMarkdownParser(highlight: (code: string, language: string) => string | Promise<string>) {
-  return new Marked(
-    {
-      renderer: {
-        link({ href, title, text }) {
-          const titleAttr = title ? ` title="${title}"` : ""
-          return `<a href="${href}"${titleAttr} class="external-link" target="_blank" rel="noopener noreferrer">${text}</a>`
-        },
-      },
-    },
-    katexExtension,
-    markedShiki({ highlight }),
-  )
+  return createMarkdownBase().use(katexExtension, markedShiki({ highlight }))
 }
 
 const inlineMathRegex = /^\\\(((?:\\.|[^\\\n])*?)\\\)/

package/src/{components → data-display/accordion}/accordion.css

@@ -36,26 +36,24 @@
         user-select: none;
 
         background-color: var(--v2-background-bg-base);
-        border: 0.5px solid var(--v2-border-border-base);
+        border: 1px solid var(--v2-border-border-base);
         border-radius: 0;
         box-shadow: none;
         overflow: clip;
         color: var(--v2-text-text-base);
         transition: background-color 0.15s ease;
 
-        /* text-12-regular */
         font-family: var(--font-family-sans);
         font-size: var(--font-size-small);
         font-style: normal;
         font-weight: var(--font-weight-regular);
-        line-height: var(--line-height-large); /* 166.667% */
+        line-height: var(--line-height-large);
         letter-spacing: var(--letter-spacing-normal);
 
-        &:hover:not([data-disabled]) {
-          background-color: var(--v2-overlay-simple-overlay-hover);
-        }
-        &:active:not([data-disabled]) {
-          background-color: var(--v2-overlay-simple-overlay-pressed);
+        @media (hover: hover) {
+          &:hover:not([data-disabled]) {
+            background-color: var(--v2-overlay-simple-overlay-hover);
+          }
         }
         &:focus-visible {
           outline: none;
@@ -82,7 +80,7 @@
 
     &[data-expanded] {
       [data-slot="accordion-content"] {
-        border: 0.5px solid var(--v2-border-border-base);
+        border: 1px solid var(--v2-border-border-base);
         border-top: 0;
         background-color: var(--v2-background-bg-layer-01);
       }
@@ -104,30 +102,6 @@
   }
 }
 
-body:not([data-new-layout]) [data-component="accordion"] {
-  [data-slot="accordion-item"] [data-slot="accordion-header"] [data-slot="accordion-trigger"] {
-    background-color: var(--background-stronger);
-    border-width: 1px;
-    border-color: var(--border-weak-base);
-    color: var(--text-strong);
-
-    &:hover:not([data-disabled]) {
-      background-color: var(--surface-base-hover);
-    }
-
-    &:active:not([data-disabled]) {
-      background-color: var(--surface-base-active);
-    }
-  }
-
-  [data-slot="accordion-item"][data-expanded] [data-slot="accordion-content"] {
-    border-width: 1px;
-    border-color: var(--border-weak-base);
-    border-top: 0;
-    background-color: var(--background-stronger);
-  }
-}
-
 @keyframes slideDown {
   from {
     height: 0;

package/src/{components → data-display/accordion}/accordion.tsx

@@ -1,17 +1,17 @@
-import { Accordion as Kobalte } from "@kobalte/core/accordion"
+import { Content, Header, Item, Root, Trigger } from "@kobalte/core/accordion"
 import { splitProps } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
 
-export interface AccordionProps extends ComponentProps<typeof Kobalte> {}
-export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {}
-export interface AccordionHeaderProps extends ComponentProps<typeof Kobalte.Header> {}
-export interface AccordionTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
-export interface AccordionContentProps extends ComponentProps<typeof Kobalte.Content> {}
+export interface AccordionProps extends ComponentProps<typeof Root> {}
+export interface AccordionItemProps extends ComponentProps<typeof Item> {}
+export interface AccordionHeaderProps extends ComponentProps<typeof Header> {}
+export interface AccordionTriggerProps extends ComponentProps<typeof Trigger> {}
+export interface AccordionContentProps extends ComponentProps<typeof Content> {}
 
 function AccordionRoot(props: AccordionProps) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
-    <Kobalte
+    <Root
       {...rest}
       data-component="accordion"
       classList={{
@@ -25,7 +25,7 @@ function AccordionRoot(props: AccordionProps) {
 function AccordionItem(props: AccordionItemProps) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
-    <Kobalte.Item
+    <Item
       {...rest}
       data-slot="accordion-item"
       classList={{
@@ -39,7 +39,7 @@ function AccordionItem(props: AccordionItemProps) {
 function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
-    <Kobalte.Header
+    <Header
       {...rest}
       data-slot="accordion-header"
       classList={{
@@ -48,14 +48,14 @@ function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
       }}
     >
       {split.children}
-    </Kobalte.Header>
+    </Header>
   )
 }
 
 function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
-    <Kobalte.Trigger
+    <Trigger
       {...rest}
       data-slot="accordion-trigger"
       classList={{
@@ -64,14 +64,14 @@ function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
       }}
     >
       {split.children}
-    </Kobalte.Trigger>
+    </Trigger>
   )
 }
 
 function AccordionContent(props: ParentProps<AccordionContentProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
-    <Kobalte.Content
+    <Content
       {...rest}
       data-slot="accordion-content"
       classList={{
@@ -80,7 +80,7 @@ function AccordionContent(props: ParentProps<AccordionContentProps>) {
       }}
     >
       {split.children}
-    </Kobalte.Content>
+    </Content>
   )
 }
 

package/src/{v2/components/avatar-v2.tsx → data-display/avatar/avatar.tsx}

@@ -1,5 +1,5 @@
 import { type ComponentProps, splitProps, Show } from "solid-js"
-import "./avatar-v2.css"
+import "./avatar.css"
 
 const segmenter =
   typeof Intl !== "undefined" && "Segmenter" in Intl