@opencode-ai/ui 0.0.0-dev-202608201855 → 0.0.0-dev-17751

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

@@ -10,7 +10,7 @@ import {
   type ParentProps,
 } from "solid-js"
 import type { ComponentProps } from "solid-js"
-import "./segmented-control-v2.css"
+import "./segmented-control.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("SegmentedControlItemV2 must be used inside SegmentedControlV2")
+  if (!ctx) throw new Error("SegmentedControlItem must be used inside SegmentedControl")
   return ctx
 }
 
-export type SegmentedControlV2Props = Omit<ComponentProps<"div">, "onChange"> &
+export type SegmentedControlProps = 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 SegmentedControlV2Props = Omit<ComponentProps<"div">, "onChange"> &
     disabled?: boolean
   }>
 
-export function SegmentedControlV2(props: SegmentedControlV2Props) {
+export function SegmentedControl(props: SegmentedControlProps) {
   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 SegmentedControlV2(props: SegmentedControlV2Props) {
   )
 }
 
-export type SegmentedControlItemV2Props = Omit<ComponentProps<"button">, "type" | "children"> &
+export type SegmentedControlItemProps = 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 SegmentedControlItemV2(props: SegmentedControlItemV2Props) {
+export function SegmentedControlItem(props: SegmentedControlItemProps) {
   const merged = mergeProps({ disabled: false }, props)
   const [local, rest] = splitProps(merged, [
     "class",
@@ -159,13 +159,14 @@ export function SegmentedControlItemV2(props: SegmentedControlItemV2Props) {
     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, 1)
+      ctx.focusNext(t, horizontal)
     } else if (e.key === "ArrowLeft") {
       e.preventDefault()
-      ctx.focusNext(t, -1)
+      ctx.focusNext(t, -horizontal as 1 | -1)
     }
 
     // accessibility stuff

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

@@ -68,22 +68,29 @@
   box-shadow: none;
 }
 
-[data-component="tabs-v2"] [data-slot="tabs-v2-close-button"] {
-  width: 20px;
-  height: 20px;
+[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"] {
+  width: 20px;
+  height: 20px;
+  padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--v2-text-text-faint);
 }
 
-[data-component="tabs-v2"] [data-slot="tabs-v2-close-button"]:hover {
+[data-slot="tabs-v2-trigger-close-button"] [data-slot="tabs-close-button"]:hover {
   color: var(--v2-text-text-muted);
 }
 
-[data-component="tabs-v2"] [data-component="icon-button"] {
+[data-component="tabs-v2"] [data-component="icon-button-v2"] {
   margin: 0;
 }
 
@@ -175,7 +182,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;
@@ -186,7 +193,9 @@
   border-inline-end: 1px solid var(--v2-border-border-base);
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-section-title"] {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
+  > [data-slot="tabs-v2-list"]
+  [data-slot="tabs-v2-section-title"] {
   width: 100%;
   padding-inline-start: 4px;
   color: var(--v2-text-text-muted);
@@ -195,7 +204,9 @@
   user-select: none;
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-trigger-wrapper"] {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
+  > [data-slot="tabs-v2-list"]
+  [data-slot="tabs-v2-trigger-wrapper"] {
   width: 100%;
   height: 28px;
   border-radius: 4px;
@@ -203,7 +214,9 @@
   color: var(--v2-text-text-muted);
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-trigger"] {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
+  > [data-slot="tabs-v2-list"]
+  [data-slot="tabs-v2-trigger"] {
   width: 100%;
   height: 100%;
   justify-content: flex-start;
@@ -212,12 +225,14 @@
 }
 
 [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);

package/src/{components → navigation/tabs}/tabs.css

@@ -18,15 +18,13 @@
     display: flex;
     align-items: center;
     overflow-x: auto;
-
-    /* Hide scrollbar */
     scrollbar-width: none;
     -ms-overflow-style: none;
+
     &::-webkit-scrollbar {
       display: none;
     }
 
-    /* After element to fill remaining space */
     &::after {
       content: "";
       display: block;
@@ -48,15 +46,12 @@
     align-items: center;
     gap: 12px;
     color: var(--text-base);
-
-    /* text-14-medium */
     font-family: var(--font-family-sans);
     font-size: 14px;
     font-style: normal;
     font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 142.857% */
+    line-height: var(--line-height-large);
     letter-spacing: var(--letter-spacing-normal);
-
     white-space: nowrap;
     flex-shrink: 0;
     max-width: 280px;
@@ -86,6 +81,13 @@
       justify-content: center;
     }
 
+    [data-slot="tabs-close-button"] {
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
     [data-component="icon-button"] {
       margin: -0.25rem;
     }
@@ -94,14 +96,17 @@
       pointer-events: none;
       color: var(--text-weaker);
     }
+
     &:focus-visible {
       outline: none;
       box-shadow: none;
     }
+
     &:has([data-selected]) {
       color: var(--text-strong);
       background-color: transparent;
       border-bottom-color: transparent;
+
       [data-slot="tabs-trigger-close-button"] {
         opacity: 1;
       }
@@ -110,6 +115,7 @@
     &:hover:not(:disabled):not([data-selected]) {
       color: var(--text-strong);
     }
+
     &:has([data-slot="tabs-trigger-close-button"]) {
       padding-inline-end: 12px;
 
@@ -122,10 +128,9 @@
   [data-slot="tabs-content"] {
     overflow-y: auto;
     flex: 1;
-
-    /* Hide scrollbar */
     scrollbar-width: none;
     -ms-overflow-style: none;
+
     &::-webkit-scrollbar {
       display: none;
     }
@@ -218,6 +223,7 @@
 
       &:has([data-slot="tabs-trigger-close-button"]) {
         padding-inline-end: 5px;
+
         [data-slot="tabs-trigger"] {
           padding-inline-end: 0 !important;
         }
@@ -239,10 +245,6 @@
         background-color: var(--surface-base-hover);
       }
 
-      /*
-        File tabs: use monochrome icon by default.
-        Full-color icon is shown on hover/selected.
-      */
       [data-slot="tabs-trigger"] {
         .tab-fileicon-color,
         .tab-fileicon-mono {
@@ -329,9 +331,6 @@
         border: none;
         background-color: transparent;
       }
-      &:empty::after {
-        display: none;
-      }
     }
 
     [data-slot="tabs-trigger-wrapper"] {
@@ -342,13 +341,11 @@
       border-bottom-style: solid;
       border-bottom-color: transparent;
       gap: 4px;
-
-      /* text-14-regular */
       font-family: var(--font-family-sans);
       font-size: var(--font-size-base);
       font-style: normal;
       font-weight: var(--font-weight-regular);
-      line-height: var(--line-height-x-large); /* 171.429% */
+      line-height: var(--line-height-x-large);
       letter-spacing: var(--letter-spacing-normal);
 
       [data-slot="tabs-trigger"] {
@@ -359,18 +356,6 @@
         border-bottom-color: transparent;
       }
 
-      [data-slot="tabs-trigger-close-button"] {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      [data-component="icon-button"] {
-        width: 16px;
-        height: 16px;
-        margin: 0;
-      }
-
       &:has([data-selected]) {
         color: var(--text-strong);
         background-color: transparent;
@@ -383,14 +368,12 @@
 
       &:has([data-slot="tabs-trigger-close-button"]) {
         padding-inline-end: 0;
+
         [data-slot="tabs-trigger"] {
           padding-inline-end: 0;
         }
       }
     }
-
-    /* [data-slot="tabs-content"] { */
-    /* } */
   }
 
   &[data-variant="pill"][data-orientation="horizontal"] {
@@ -413,8 +396,6 @@
       border-radius: var(--radius-sm);
       background-color: transparent;
       gap: 0;
-
-      /* text-13-medium */
       font-family: var(--font-family-sans);
       font-size: var(--font-size-small);
       font-style: normal;
@@ -434,17 +415,13 @@
         color: var(--text-strong);
       }
 
-      &:active:not(:disabled) {
+      &:active:not(:disabled),
+      &:has([data-selected]) {
         background-color: var(--surface-base-active);
       }
 
       &:has([data-selected]) {
-        background-color: var(--surface-base-active);
         color: var(--text-strong);
-
-        &:hover:not(:disabled) {
-          background-color: var(--surface-base-active);
-        }
       }
     }
   }
@@ -481,170 +458,6 @@
       }
     }
   }
-
-  &[data-orientation="vertical"] {
-    flex-direction: row;
-
-    [data-slot="tabs-list"] {
-      flex-direction: column;
-      width: auto;
-      height: 100%;
-      overflow-x: hidden;
-      overflow-y: auto;
-      padding: 8px;
-      gap: 4px;
-      background-color: var(--background-base);
-      border-inline-end: 1px solid var(--border-weak-base);
-
-      &::after {
-        display: none;
-      }
-    }
-
-    [data-slot="tabs-trigger-wrapper"] {
-      width: 100%;
-      height: 32px;
-      border: none;
-      border-radius: 8px;
-      background-color: transparent;
-
-      [data-slot="tabs-trigger"] {
-        height: 100%;
-        padding: 0 8px;
-        gap: 8px;
-        justify-content: flex-start;
-      }
-
-      &:hover:not(:disabled) {
-        background-color: var(--surface-base-hover);
-      }
-
-      &:has([data-selected]) {
-        background-color: var(--surface-base-active);
-        color: var(--text-strong);
-      }
-    }
-
-    [data-slot="tabs-content"] {
-      overflow-x: auto;
-      overflow-y: auto;
-    }
-
-    &[data-variant="alt"] {
-      [data-slot="tabs-list"] {
-        padding: 8px;
-        gap: 4px;
-        border: none;
-
-        &::after {
-          display: none;
-        }
-      }
-
-      [data-slot="tabs-trigger-wrapper"] {
-        height: 32px;
-        border: none;
-        border-radius: 8px;
-
-        [data-slot="tabs-trigger"] {
-          border: none;
-          padding: 0 8px;
-          gap: 8px;
-          justify-content: flex-start;
-        }
-
-        &:hover:not(:disabled) {
-          background-color: var(--surface-base-hover);
-        }
-
-        &:has([data-selected]) {
-          background-color: var(--surface-base-hover);
-          color: var(--text-strong);
-        }
-      }
-    }
-
-    &[data-variant="settings"] {
-      [data-slot="tabs-list"] {
-        width: 150px;
-        min-width: 150px;
-
-        @media (min-width: 640px) {
-          width: 200px;
-          min-width: 200px;
-        }
-        padding: 12px;
-        gap: 0;
-        background-color: var(--background-base);
-        border-inline-end: 1px solid var(--border-weak-base);
-
-        &::after {
-          display: none;
-        }
-      }
-
-      [data-slot="tabs-section-title"] {
-        width: 100%;
-        padding: 0;
-        padding-inline-start: 4px;
-        font-family: var(--font-family-sans);
-        font-size: var(--font-size-small);
-        font-weight: var(--font-weight-medium);
-        color: var(--text-weak);
-      }
-
-      [data-slot="tabs-trigger-wrapper"] {
-        height: 32px;
-        border: none;
-        border-radius: var(--radius-md);
-
-        /* text-14-medium */
-        font-family: var(--font-family-sans);
-        font-size: var(--font-size-base);
-        font-weight: var(--font-weight-medium);
-        line-height: var(--line-height-large);
-
-        [data-slot="tabs-trigger"] {
-          border: none;
-          padding: 0 8px;
-          gap: 12px;
-          justify-content: flex-start;
-          width: 100%;
-          height: 100%;
-        }
-
-        [data-component="icon"] {
-          color: var(--icon-base);
-        }
-
-        &:hover:not(:disabled) {
-          background-color: var(--surface-base-hover);
-        }
-
-        &:has([data-slot="tabs-trigger"]:focus-visible) {
-          background-color: var(--surface-base-hover);
-          box-shadow: var(--shadow-xs-border-focus);
-        }
-
-        &:has([data-selected]) {
-          background-color: var(--surface-base-active);
-          color: var(--text-strong);
-
-          [data-component="icon"] {
-            color: var(--icon-strong-base);
-          }
-
-          &:hover:not(:disabled) {
-            background-color: var(--surface-base-active);
-          }
-        }
-      }
-
-      [data-slot="tabs-content"] {
-        background-color: var(--surface-stronger-non-alpha);
-      }
-    }
-  }
 }
 
 [data-component="tabs-drag-preview"] {
@@ -685,10 +498,10 @@
   position: relative;
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"],
-body[data-new-layout] #terminal-panel [data-component="tabs"],
-body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"],
-body[data-new-layout] #terminal-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
+:root body #review-panel [data-component="tabs"],
+:root body #terminal-panel [data-component="tabs"],
+:root body #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"],
+:root body #terminal-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
   background-color: var(--v2-background-bg-base);
 
   [data-slot="tabs-list"] {
@@ -708,7 +521,7 @@ body[data-new-layout] #terminal-panel [data-component="tabs"][data-variant="norm
   }
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
+:root body #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
   [data-slot="tabs-list"] {
     height: 52px;
     padding-inline-end: 12px;
@@ -765,16 +578,15 @@ body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal
     [data-slot="icon-svg"] {
       margin-inline-start: -2px;
     }
-  }
 
-  /* Preview/temporary tabs: beat trigger + .text-14-medium upright defaults */
-  [data-slot="tabs-trigger"] .italic {
-    font-style: italic !important;
-    font-variation-settings: "slnt" -10 !important;
+    .italic {
+      font-style: italic !important;
+      font-variation-settings: "slnt" -10 !important;
+    }
   }
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-tabs-bar {
+:root body #review-panel [data-component="tabs"] .session-review-v2-tabs-bar {
   width: 100%;
   min-width: 0;
   gap: 8px;
@@ -783,8 +595,9 @@ body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-t
   background-color: var(--v2-background-bg-base);
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-tabs-bar [data-slot="tabs-list"],
-body[data-new-layout]
+:root body #review-panel [data-component="tabs"] .session-review-v2-tabs-bar [data-slot="tabs-list"],
+:root
+  body
   #review-panel
   [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"]
   .session-review-v2-tabs-bar
@@ -795,12 +608,7 @@ body[data-new-layout]
   border-bottom: none;
 }
 
-body[data-new-layout]
-  #review-panel
-  [data-component="tabs"]
-  .session-review-v2-tabs-bar
-  [data-slot="tabs-list"]
-  > .sticky {
+:root body #review-panel [data-component="tabs"] .session-review-v2-tabs-bar [data-slot="tabs-list"] > .sticky {
   padding-inline-end: 0;
 
   [data-component="icon-button-v2"] {
@@ -820,7 +628,8 @@ body[data-new-layout]
   }
 }
 
-body[data-new-layout]
+:root
+  body
   #review-panel
   [data-component="tabs"]
   .session-review-v2-tabs-bar
@@ -831,7 +640,8 @@ body[data-new-layout]
   inset-inline-end: 0;
 }
 
-body[data-new-layout]
+:root
+  body
   #review-panel
   [data-component="tabs"]
   .session-review-v2-tabs-bar
@@ -879,11 +689,11 @@ body[data-new-layout]
   }
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-open-in-app-slot {
+:root body #review-panel [data-component="tabs"] .session-review-v2-open-in-app-slot {
   flex-shrink: 0;
   margin-inline-start: auto;
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-open-in-app {
+:root body #review-panel [data-component="tabs"] .session-review-v2-open-in-app {
   flex-shrink: 0;
 }