@opencode-ai/ui 0.0.0-dev-19174 → 0.0.0-dev-202609060432

package/src/{forms/radio/radio.tsx → v2/components/radio-v2.tsx}

@@ -1,28 +1,18 @@
-import {
-  Description,
-  ErrorMessage,
-  Item,
-  ItemControl,
-  ItemIndicator,
-  ItemInput,
-  ItemLabel,
-  Label,
-  Root,
-} from "@kobalte/core/radio-group"
+import { RadioGroup as Kobalte } from "@kobalte/core/radio-group"
 import { Show, splitProps, type JSX } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
-import "./radio.css"
+import "./radio-v2.css"
 
-export interface RadioGroupProps extends ParentProps<ComponentProps<typeof Root>> {
+export interface RadioGroupV2Props extends ParentProps<ComponentProps<typeof Kobalte>> {
   label?: JSX.Element
   description?: JSX.Element
   hideLabel?: boolean
 }
 
-export function RadioGroup(props: RadioGroupProps) {
+export function RadioGroupV2(props: RadioGroupV2Props) {
   const [local, others] = splitProps(props, ["class", "classList", "children", "label", "description", "hideLabel"])
   return (
-    <Root
+    <Kobalte
       {...others}
       data-component="radio-v2"
       classList={{
@@ -32,30 +22,30 @@ export function RadioGroup(props: RadioGroupProps) {
     >
       <Show when={local.label}>
         {(label) => (
-          <Label data-slot="radio-v2-label" classList={{ "sr-only": local.hideLabel }}>
+          <Kobalte.Label data-slot="radio-v2-label" classList={{ "sr-only": local.hideLabel }}>
             {label()}
-          </Label>
+          </Kobalte.Label>
         )}
       </Show>
       <Show when={local.description}>
-        {(description) => <Description data-slot="radio-v2-description">{description()}</Description>}
+        {(description) => <Kobalte.Description data-slot="radio-v2-description">{description()}</Kobalte.Description>}
       </Show>
       <div data-slot="radio-v2-items">{local.children}</div>
-      <ErrorMessage data-slot="radio-v2-error" />
-    </Root>
+      <Kobalte.ErrorMessage data-slot="radio-v2-error" />
+    </Kobalte>
   )
 }
 
-export interface RadioItemProps extends ComponentProps<typeof Item> {
+export interface RadioItemV2Props extends ComponentProps<typeof Kobalte.Item> {
   label: JSX.Element
   description?: JSX.Element
   hideLabel?: boolean
 }
 
-export function RadioItem(props: RadioItemProps) {
+export function RadioItemV2(props: RadioItemV2Props) {
   const [local, others] = splitProps(props, ["class", "classList", "label", "description", "hideLabel"])
   return (
-    <Item
+    <Kobalte.Item
       {...others}
       data-slot="radio-v2-item"
       classList={{
@@ -63,20 +53,20 @@ export function RadioItem(props: RadioItemProps) {
         [local.class ?? ""]: !!local.class,
       }}
     >
-      <ItemInput data-slot="radio-v2-item-input" />
+      <Kobalte.ItemInput data-slot="radio-v2-item-input" />
       <div data-slot="radio-v2-item-control-stack">
-        <ItemControl data-slot="radio-v2-item-control">
-          <ItemIndicator data-slot="radio-v2-item-indicator" />
-        </ItemControl>
+        <Kobalte.ItemControl data-slot="radio-v2-item-control">
+          <Kobalte.ItemIndicator data-slot="radio-v2-item-indicator" />
+        </Kobalte.ItemControl>
       </div>
-      <ItemLabel data-slot="radio-v2-item-label" classList={{ "sr-only": local.hideLabel }}>
+      <Kobalte.ItemLabel data-slot="radio-v2-item-label" classList={{ "sr-only": local.hideLabel }}>
         <div data-slot="radio-v2-item-text">
           <span data-slot="radio-v2-item-label-text">{local.label}</span>
           <Show when={local.description}>
             {(description) => <span data-slot="radio-v2-item-description">{description()}</span>}
           </Show>
         </div>
-      </ItemLabel>
-    </Item>
+      </Kobalte.ItemLabel>
+    </Kobalte.Item>
   )
 }

package/src/{navigation/segmented-control/segmented-control.css → v2/components/segmented-control-v2.css}

@@ -37,7 +37,7 @@
   font-style: normal;
   font-weight: 440;
   font-size: 13px;
-  line-height: var(--line-height-compact);
+  line-height: 100%;
   letter-spacing: -0.04px;
   font-variant-numeric: tabular-nums;
   font-variation-settings: "slnt" 0;

package/src/{navigation/segmented-control/segmented-control.tsx → v2/components/segmented-control-v2.tsx}

@@ -10,7 +10,7 @@ import {
   type ParentProps,
 } from "solid-js"
 import type { ComponentProps } from "solid-js"
-import "./segmented-control.css"
+import "./segmented-control-v2.css"
 
 type OnChange = (value: string | null) => void
 
@@ -26,11 +26,11 @@ const SegmentedControlContext = createContext<SegmentedControlContextValue>()
 
 function useSegmentedControlContext() {
   const ctx = useContext(SegmentedControlContext)
-  if (!ctx) throw new Error("SegmentedControlItem must be used inside SegmentedControl")
+  if (!ctx) throw new Error("SegmentedControlItemV2 must be used inside SegmentedControlV2")
   return ctx
 }
 
-export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> &
+export type SegmentedControlV2Props = Omit<ComponentProps<"div">, "onChange"> &
   ParentProps<{
     /** Selected value when controlled (including `null` when empty). Omit key for uncontrolled. */
     value?: string | null
@@ -42,7 +42,7 @@ export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> &
     disabled?: boolean
   }>
 
-export function SegmentedControl(props: SegmentedControlProps) {
+export function SegmentedControlV2(props: SegmentedControlV2Props) {
   const isControlled = createMemo(() => Object.hasOwn(props as object, "value"))
   const merged = mergeProps({ allowDeselect: false, disabled: false }, props)
   const [local, rest] = splitProps(merged, [
@@ -119,7 +119,7 @@ export function SegmentedControl(props: SegmentedControlProps) {
   )
 }
 
-export type SegmentedControlItemProps = Omit<ComponentProps<"button">, "type" | "children"> &
+export type SegmentedControlItemV2Props = Omit<ComponentProps<"button">, "type" | "children"> &
   ParentProps<{
     value: string
     children: JSX.Element
@@ -132,7 +132,7 @@ function invokeButtonHandler<E extends Event>(
   if (typeof handler === "function") (handler as (ev: typeof e) => void)(e)
 }
 
-export function SegmentedControlItem(props: SegmentedControlItemProps) {
+export function SegmentedControlItemV2(props: SegmentedControlItemV2Props) {
   const merged = mergeProps({ disabled: false }, props)
   const [local, rest] = splitProps(merged, [
     "class",
@@ -159,14 +159,13 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
     invokeButtonHandler(local.onKeyDown, e)
     if (e.defaultPrevented || disabled()) return
     const t = e.currentTarget
-    const horizontal = t.closest(`[data-slot="segmented-control-v2"]`)?.matches(":dir(rtl)") ? -1 : 1
 
     if (e.key === "ArrowRight") {
       e.preventDefault()
-      ctx.focusNext(t, horizontal)
+      ctx.focusNext(t, 1)
     } else if (e.key === "ArrowLeft") {
       e.preventDefault()
-      ctx.focusNext(t, -horizontal as 1 | -1)
+      ctx.focusNext(t, -1)
     }
 
     // accessibility stuff

package/src/{forms/select/select.css → v2/components/select-v2.css}

@@ -1,4 +1,4 @@
-@import "../../navigation/menu/menu.css";
+@import "./menu-v2.css";
 
 /* Above modal dialogs (z-index 50); matches legacy select-content. */
 [data-popper-positioner]:has([data-slot="select-v2-content"]) {
@@ -46,7 +46,7 @@
   }
 }
 
-/* Shared trigger structure for the inline control. */
+/* Trigger shell — aligned with text-input-v2 */
 [data-component="select-v2"] {
   box-sizing: border-box;
   display: flex;
@@ -73,6 +73,12 @@
     box-shadow 85ms ease-out;
 }
 
+[data-component="select-v2"][data-appearance="large"] {
+  height: 32px;
+  padding-block: 0;
+  padding-inline: 0 8px;
+}
+
 [data-component="select-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within):not(
     [data-expanded]
   ) {

package/src/{forms/select/select.tsx → v2/components/select-v2.tsx}

@@ -1,17 +1,6 @@
-import {
-  Content,
-  Item,
-  ItemIndicator,
-  ItemLabel,
-  Listbox,
-  Portal,
-  Root,
-  Section,
-  Trigger,
-  Value,
-} from "@kobalte/core/select"
+import { Select as Kobalte } from "@kobalte/core/select"
 import { Show, createMemo, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
-import "./select.css"
+import "./select-v2.css"
 
 function groupOptions<T>(options: T[], groupBy?: (x: T) => string): { category: string; options: T[] }[] {
   if (!groupBy) {
@@ -51,8 +40,8 @@ const CheckSmall = () => (
   </svg>
 )
 
-export type SelectProps<T> = Omit<
-  ComponentProps<typeof Root<T, { category: string; options: T[] }>>,
+export type SelectV2Props<T> = Omit<
+  ComponentProps<typeof Kobalte<T, { category: string; options: T[] }>>,
   "value" | "onSelect" | "children" | "options" | "itemComponent" | "sectionComponent" | "defaultValue" | "multiple"
 > & {
   placeholder?: string
@@ -64,13 +53,15 @@ export type SelectProps<T> = Omit<
   groupBy?: (x: T) => string
   onSelect?: (value: T | null) => void
   onHighlight?: (value: T | undefined) => void | (() => void)
+  /** `base` / `large` match text-input-v2; `inline` is a compact settings-row trigger. */
+  appearance?: "base" | "large" | "inline"
   invalid?: boolean
   numeric?: boolean
   children?: (item: T) => JSX.Element
   valueClass?: string
 }
 
-export function Select<T>(props: SelectProps<T>) {
+export function SelectV2<T>(props: SelectV2Props<T>) {
   const [local, others] = splitProps(props, [
     "class",
     "classList",
@@ -84,6 +75,7 @@ export function Select<T>(props: SelectProps<T>) {
     "onHighlight",
     "onOpenChange",
     "children",
+    "appearance",
     "invalid",
     "numeric",
     "disabled",
@@ -96,6 +88,8 @@ export function Select<T>(props: SelectProps<T>) {
     "fitViewport",
   ])
 
+  const inline = () => (local.appearance ?? "base") === "inline"
+
   const state: { key?: string; cleanup?: void | (() => void) } = {}
 
   const stop = () => {
@@ -124,15 +118,15 @@ export function Select<T>(props: SelectProps<T>) {
   const grouped = createMemo(() => groupOptions(local.options, local.groupBy))
 
   return (
-    <Root<T, { category: string; options: T[] }>
+    <Kobalte<T, { category: string; options: T[] }>
       {...others}
       multiple={false}
       allowDuplicateSelectionEvents={false}
       disabled={local.disabled}
       data-component="select-v2-root"
-      placement={local.placement ?? "bottom-end"}
+      placement={local.placement ?? (inline() ? "bottom-end" : "bottom-start")}
       gutter={local.gutter ?? 4}
-      sameWidth={local.sameWidth ?? false}
+      sameWidth={local.sameWidth ?? !inline()}
       flip={local.flip ?? true}
       slide={local.slide ?? true}
       fitViewport={local.fitViewport ?? false}
@@ -143,31 +137,31 @@ export function Select<T>(props: SelectProps<T>) {
       optionGroupChildren="options"
       placeholder={local.placeholder}
       sectionComponent={(sectionProps) => (
-        <Section>
+        <Kobalte.Section>
           <Show when={sectionProps.section.rawValue.category}>
             <div data-slot="menu-v2-group-label">{sectionProps.section.rawValue.category}</div>
           </Show>
-        </Section>
+        </Kobalte.Section>
       )}
       itemComponent={(itemProps) => (
-        <Item
+        <Kobalte.Item
           {...itemProps}
           data-component="menu-v2-item"
           onPointerEnter={() => move(itemProps.item.rawValue)}
           onPointerMove={() => move(itemProps.item.rawValue)}
           onFocus={() => move(itemProps.item.rawValue)}
         >
-          <ItemLabel data-slot="menu-v2-item-content" as="span">
+          <Kobalte.ItemLabel data-slot="menu-v2-item-content" as="span">
             {local.children
               ? local.children(itemProps.item.rawValue)
               : local.label
                 ? local.label(itemProps.item.rawValue)
                 : String(itemProps.item.rawValue as string)}
-          </ItemLabel>
-          <ItemIndicator data-slot="menu-v2-item-indicator" forceMount>
+          </Kobalte.ItemLabel>
+          <Kobalte.ItemIndicator data-slot="menu-v2-item-indicator" forceMount>
             <CheckSmall />
-          </ItemIndicator>
-        </Item>
+          </Kobalte.ItemIndicator>
+        </Kobalte.Item>
       )}
       onChange={(next) => {
         const v = next == null ? null : Array.isArray(next) ? ((next[0] as T) ?? null) : (next as T)
@@ -179,12 +173,10 @@ export function Select<T>(props: SelectProps<T>) {
         if (!open) stop()
       }}
     >
-      <Trigger
+      <Kobalte.Trigger
         as="div"
-        aria-label={props["aria-label"]}
-        aria-labelledby={props["aria-labelledby"]}
         data-component="select-v2"
-        data-appearance="inline"
+        data-appearance={local.appearance ?? "base"}
         data-invalid={local.invalid ? "" : undefined}
         data-numeric={local.numeric ? "" : undefined}
         disabled={local.disabled}
@@ -195,23 +187,23 @@ export function Select<T>(props: SelectProps<T>) {
         }}
       >
         <div data-slot="select-v2-value">
-          <Value<T> data-slot="select-v2-value-text" class={local.valueClass}>
+          <Kobalte.Value<T> data-slot="select-v2-value-text" class={local.valueClass}>
             {(st) => {
               const selected = st.selectedOption()
               if (local.label && selected != null) return local.label(selected)
               return selected != null ? (selected as string) : ""
             }}
-          </Value>
+          </Kobalte.Value>
         </div>
         <span data-slot="select-v2-chevron" aria-hidden="true">
           <ChevronDown />
         </span>
-      </Trigger>
-      <Portal>
-        <Content data-component="menu-v2-content" data-slot="select-v2-content">
-          <Listbox data-slot="select-v2-listbox" />
-        </Content>
-      </Portal>
-    </Root>
+      </Kobalte.Trigger>
+      <Kobalte.Portal>
+        <Kobalte.Content data-component="menu-v2-content" data-slot="select-v2-content">
+          <Kobalte.Listbox data-slot="select-v2-listbox" />
+        </Kobalte.Content>
+      </Kobalte.Portal>
+    </Kobalte>
   )
 }

package/src/{actions/split-button/split-button.css → v2/components/split-button-v2.css}

@@ -9,7 +9,6 @@
   overflow: hidden;
 }
 
-[data-component="split-button-v2"].session-review-v2-open-in-app,
 [data-component="split-button-v2"]:is(:hover, :has([data-component="split-button-v2-menu-trigger"][data-expanded])) {
   box-shadow: inset 0 0 0 1px var(--v2-border-border-muted);
 }
@@ -88,8 +87,13 @@
   flex-shrink: 0;
 }
 
-[data-component="menu-v2-content"].open-in-app-v2-menu [data-slot="icon-svg"] {
+[data-component="menu-v2-content"].open-in-app-v2-menu [data-component="icon"] {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
 }
+
+[data-component="menu-v2-content"].open-in-app-v2-menu [data-component="icon"] [data-slot="icon-svg"] {
+  width: 16px;
+  height: 16px;
+}

package/src/{actions/split-button/split-button.tsx → v2/components/split-button-v2.tsx}

@@ -1,7 +1,7 @@
 import { splitProps, type ComponentProps, type ParentProps } from "solid-js"
-import "./split-button.css"
+import "./split-button-v2.css"
 
-export function SplitButton(props: ParentProps<ComponentProps<"div">>) {
+export function SplitButtonV2(props: ParentProps<ComponentProps<"div">>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
     <div
@@ -17,7 +17,7 @@ export function SplitButton(props: ParentProps<ComponentProps<"div">>) {
   )
 }
 
-export function SplitButtonAction(props: ComponentProps<"button">) {
+export function SplitButtonV2Action(props: ComponentProps<"button">) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
     <button
@@ -32,7 +32,7 @@ export function SplitButtonAction(props: ComponentProps<"button">) {
   )
 }
 
-export function SplitButtonMenuTrigger(props: ComponentProps<"button">) {
+export function SplitButtonV2MenuTrigger(props: ComponentProps<"button">) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
     <button

package/src/{forms/switch/switch.css → v2/components/switch-v2.css}

@@ -160,113 +160,3 @@
     pointer-events: none;
   }
 }
-
-[data-component="switch"][data-appearance="standard"] {
-  [data-slot="switch-control"] {
-    padding: 0;
-    width: 28px;
-    height: 16px;
-    border-radius: 3px;
-    border: 1px solid var(--border-weak-base);
-    background: var(--surface-base);
-    box-shadow: none;
-    transition:
-      background-color 150ms,
-      border-color 150ms;
-  }
-
-  [data-slot="switch-thumb"] {
-    box-sizing: content-box;
-    width: 14px;
-    height: 14px;
-    border-radius: 2px;
-    border: 1px solid var(--border-base);
-    background: var(--icon-invert-base);
-    box-shadow:
-      0 1px 2px -1px rgba(19, 16, 16, 0.04),
-      0 1px 2px 0 rgba(19, 16, 16, 0.06),
-      0 1px 3px 0 rgba(19, 16, 16, 0.08);
-    transform: translateX(-1px);
-    transition:
-      transform 150ms,
-      background-color 150ms;
-  }
-
-  [data-slot="switch-label"] {
-    color: var(--text-base);
-    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);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  [data-slot="switch-description"] {
-    color: var(--text-base);
-    font-family: var(--font-family-sans);
-    font-size: 12px;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  [data-slot="switch-error"] {
-    color: var(--text-error);
-  }
-
-  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
-    border-color: var(--border-hover);
-    background: var(--surface-hover);
-  }
-
-  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
-    width: 14px;
-    border-radius: 2px;
-  }
-
-  &:not([data-readonly]) [data-slot="switch-input"]:focus-visible ~ [data-slot="switch-control"] {
-    border-color: var(--border-focus);
-    outline: none;
-    box-shadow: var(--shadow-xs-border-focus);
-  }
-
-  &[data-checked] [data-slot="switch-control"] {
-    border-color: var(--icon-strong-base);
-    background: var(--icon-strong-base);
-    box-shadow: none;
-  }
-
-  &[data-checked] [data-slot="switch-thumb"],
-  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
-    width: 14px;
-    border: none;
-    border-radius: 2px;
-    transform: translateX(12px);
-    background: var(--icon-invert-base);
-  }
-
-  &:dir(rtl)[data-checked] [data-slot="switch-thumb"],
-  &:dir(rtl)[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
-    transform: translateX(-12px);
-  }
-
-  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
-    border-color: var(--border-hover);
-    background: var(--surface-hover);
-  }
-
-  &[data-disabled] [data-slot="switch-control"] {
-    border-color: var(--border-disabled);
-    background: var(--surface-disabled);
-    opacity: 1;
-  }
-
-  &[data-disabled] [data-slot="switch-thumb"] {
-    background: var(--icon-disabled);
-  }
-
-  &[data-invalid] [data-slot="switch-control"] {
-    border-color: var(--border-error);
-  }
-}

package/src/v2/components/switch-v2.tsx

@@ -0,0 +1,28 @@
+import { Switch as Kobalte } from "@kobalte/core/switch"
+import { Show, splitProps } from "solid-js"
+import type { ComponentProps, ParentProps } from "solid-js"
+import "./switch-v2.css"
+
+export interface SwitchProps extends ParentProps<ComponentProps<typeof Kobalte>> {
+  hideLabel?: boolean
+}
+
+export function Switch(props: SwitchProps) {
+  const [local, others] = splitProps(props, ["children", "class", "hideLabel"])
+  return (
+    <Kobalte {...others} class={local.class} data-component="switch">
+      <Kobalte.Input data-slot="switch-input" />
+      <Show when={local.children}>
+        {(label) => (
+          <Kobalte.Label data-slot="switch-label" classList={{ "sr-only": local.hideLabel }}>
+            {label()}
+          </Kobalte.Label>
+        )}
+      </Show>
+      <Kobalte.Control data-slot="switch-control">
+        <Kobalte.Thumb data-slot="switch-thumb" />
+      </Kobalte.Control>
+      <Kobalte.ErrorMessage data-slot="switch-error" />
+    </Kobalte>
+  )
+}

package/src/{navigation/tabs/tabs-current.css → v2/components/tabs-v2.css}

@@ -59,7 +59,7 @@
 
   font-size: 13px;
   font-weight: 440;
-  line-height: var(--line-height-compact);
+  line-height: 100%;
   letter-spacing: -0.04px;
 }
 
@@ -68,29 +68,22 @@
   box-shadow: none;
 }
 
-[data-slot="tabs-v2-trigger-close-button"] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-inline-start: -5px;
-  flex: none;
-}
-
-[data-slot="tabs-v2-trigger-close-button"] [data-slot="tabs-close-button"] {
+[data-component="tabs-v2"] [data-slot="tabs-v2-close-button"] {
   width: 20px;
   height: 20px;
-  padding: 0;
+  margin-inline-start: -5px;
+  flex: none;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--v2-text-text-faint);
 }
 
-[data-slot="tabs-v2-trigger-close-button"] [data-slot="tabs-close-button"]:hover {
+[data-component="tabs-v2"] [data-slot="tabs-v2-close-button"]:hover {
   color: var(--v2-text-text-muted);
 }
 
-[data-component="tabs-v2"] [data-component="icon-button-v2"] {
+[data-component="tabs-v2"] [data-component="icon-button"] {
   margin: 0;
 }
 
@@ -182,7 +175,7 @@
   border: 0.5px solid var(--v2-border-border-muted);
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] > [data-slot="tabs-v2-list"] {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-list"] {
   flex-direction: column;
   width: 240px;
   min-width: 200px;
@@ -193,9 +186,7 @@
   border-inline-end: 1px solid var(--v2-border-border-base);
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
-  > [data-slot="tabs-v2-list"]
-  [data-slot="tabs-v2-section-title"] {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-section-title"] {
   width: 100%;
   padding-inline-start: 4px;
   color: var(--v2-text-text-muted);
@@ -204,9 +195,7 @@
   user-select: none;
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
-  > [data-slot="tabs-v2-list"]
-  [data-slot="tabs-v2-trigger-wrapper"] {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-trigger-wrapper"] {
   width: 100%;
   height: 28px;
   border-radius: 4px;
@@ -214,9 +203,7 @@
   color: var(--v2-text-text-muted);
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
-  > [data-slot="tabs-v2-list"]
-  [data-slot="tabs-v2-trigger"] {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-trigger"] {
   width: 100%;
   height: 100%;
   justify-content: flex-start;
@@ -225,14 +212,12 @@
 }
 
 [data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
-  > [data-slot="tabs-v2-list"]
   [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
   background-color: var(--v2-background-bg-layer-03);
   color: var(--v2-text-text-base);
 }
 
 [data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
-  > [data-slot="tabs-v2-list"]
   [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
   background-color: var(--v2-background-bg-layer-03);
   color: var(--v2-text-text-base);