@opencode-ai/ui 0.0.0-dev-202608041127 → 0.0.0-dev-202608041149

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "0.0.0-dev-202608041127",
+  "version": "0.0.0-dev-202608041149",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/components/dropdown-menu.css

@@ -60,7 +60,7 @@
 
   [data-slot="dropdown-menu-checkbox-item"],
   [data-slot="dropdown-menu-radio-item"] {
-    padding-right: 28px;
+    padding-inline-end: 28px;
   }
 
   [data-slot="dropdown-menu-sub-trigger"] {
@@ -76,7 +76,7 @@
     width: 16px;
     height: 16px;
     position: absolute;
-    right: 8px;
+    inset-inline-end: 8px;
     top: 50%;
     transform: translateY(-50%);
   }

package/src/components/icon.tsx

@@ -154,7 +154,14 @@ export function Icon(props: IconProps) {
     <div
       data-component="icon"
       data-size={local.size || "normal"}
-      data-directional={local.name === "chevron-left" || local.name === "chevron-right" ? true : undefined}
+      data-directional={
+        local.name === "arrow-left" ||
+        local.name === "arrow-right" ||
+        local.name === "chevron-left" ||
+        local.name === "chevron-right"
+          ? true
+          : undefined
+      }
     >
       <svg
         data-slot="icon-svg"

package/src/components/resize-handle.css

@@ -14,7 +14,7 @@
     opacity: 1;
   }
 
-  &[data-direction="horizontal"] {
+  &:where([data-direction="horizontal"]) {
     inset-block: 0;
     inset-inline-end: 0;
     width: 8px;
@@ -33,9 +33,21 @@
       inset-inline-start: 50%;
       transform: translateX(-50%);
     }
+
+    &:dir(rtl) {
+      transform: translateX(-50%);
+
+      &[data-edge="start"] {
+        transform: translateX(50%);
+      }
+
+      &::after {
+        transform: translateX(50%);
+      }
+    }
   }
 
-  &[data-direction="vertical"] {
+  &:where([data-direction="vertical"]) {
     inset-inline: 0;
     inset-block-start: 0;
     height: 8px;

package/src/components/resize-handle.tsx

@@ -33,6 +33,10 @@ export function ResizeHandle(props: ResizeHandleProps) {
     e.preventDefault()
     const edge = local.edge ?? (local.direction === "vertical" ? "start" : "end")
     const start = local.direction === "horizontal" ? e.clientX : e.clientY
+    const rtl =
+      local.direction === "horizontal" &&
+      e.currentTarget instanceof Element &&
+      getComputedStyle(e.currentTarget).direction === "rtl"
     const startSize = local.size
     const min = local.min
     const max = local.max
@@ -53,7 +57,7 @@ export function ResizeHandle(props: ResizeHandleProps) {
           ? edge === "end"
             ? pos - start
             : start - pos
-          : edge === "start"
+          : (edge === "start") !== rtl
             ? start - pos
             : pos - start
       current = startSize + delta

package/src/components/scroll-view.css

@@ -21,7 +21,7 @@
 
 .scroll-view__thumb {
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
   top: 0;
   width: 12px;
   transition: opacity 200ms ease;

package/src/components/select.css

@@ -1,6 +1,7 @@
 [data-component="select"] {
   [data-slot="select-select-trigger"] {
-    padding: 0 4px 0 8px;
+    padding-block: 0;
+    padding-inline: 8px 4px;
     box-shadow: none;
 
     [data-slot="select-select-trigger-value"] {
@@ -46,7 +47,8 @@
 
   &[data-trigger-style="settings"] {
     [data-slot="select-select-trigger"] {
-      padding: 6px 6px 6px 12px;
+      padding-block: 6px;
+      padding-inline: 12px 6px;
       box-shadow: none;
       border-radius: 6px;
       min-width: 160px;
@@ -154,7 +156,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-left: auto;
+      margin-inline-start: auto;
       width: 16px;
       height: 16px;
     }

package/src/components/switch.css

@@ -103,6 +103,10 @@
     background-color: var(--icon-invert-base);
   }
 
+  &:dir(rtl)[data-checked] [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-color: var(--surface-hover);

package/src/components/tabs.css

@@ -61,7 +61,7 @@
     flex-shrink: 0;
     max-width: 280px;
     border-bottom: 1px solid var(--border-weak-base);
-    border-right: 1px solid var(--border-weak-base);
+    border-inline-end: 1px solid var(--border-weak-base);
     background-color: var(--background-base);
 
     [data-slot="tabs-trigger"] {
@@ -111,10 +111,10 @@
       color: var(--text-strong);
     }
     &:has([data-slot="tabs-trigger-close-button"]) {
-      padding-right: 12px;
+      padding-inline-end: 12px;
 
       [data-slot="tabs-trigger"] {
-        padding-right: 0;
+        padding-inline-end: 0;
       }
     }
   }
@@ -141,8 +141,8 @@
 
     [data-slot="tabs-list"] {
       height: var(--tabs-bar-height);
-      padding-left: 12px;
-      padding-right: 0;
+      padding-inline-start: 12px;
+      padding-inline-end: 0;
       --tabs-review-gap: 16px;
       --tabs-review-fade: 16px;
       gap: var(--tabs-review-gap);
@@ -162,11 +162,15 @@
           position: absolute;
           top: 0;
           bottom: 0;
-          left: calc(var(--tabs-review-fade) * -1);
+          inset-inline-end: 100%;
           width: var(--tabs-review-fade);
           pointer-events: none;
           background: linear-gradient(90deg, transparent, var(--background-stronger));
         }
+
+        &:dir(rtl)::before {
+          background: linear-gradient(270deg, transparent, var(--background-stronger));
+        }
       }
     }
 
@@ -213,9 +217,9 @@
       }
 
       &:has([data-slot="tabs-trigger-close-button"]) {
-        padding-right: 5px;
+        padding-inline-end: 5px;
         [data-slot="tabs-trigger"] {
-          padding-right: 0 !important;
+          padding-inline-end: 0 !important;
         }
       }
 
@@ -271,7 +275,7 @@
   #terminal-panel &[data-variant="normal"][data-orientation="horizontal"] {
     [data-slot="tabs-list"] {
       height: 52px;
-      padding-right: 12px;
+      padding-inline-end: 12px;
       gap: 8px;
     }
 
@@ -291,7 +295,7 @@
       }
 
       &:has([data-slot="tabs-trigger-close-button"]) {
-        padding-right: 8px;
+        padding-inline-end: 8px;
       }
 
       &:has([data-selected]) {
@@ -378,9 +382,9 @@
       }
 
       &:has([data-slot="tabs-trigger-close-button"]) {
-        padding-right: 0;
+        padding-inline-end: 0;
         [data-slot="tabs-trigger"] {
-          padding-right: 0;
+          padding-inline-end: 0;
         }
       }
     }
@@ -490,7 +494,7 @@
       padding: 8px;
       gap: 4px;
       background-color: var(--background-base);
-      border-right: 1px solid var(--border-weak-base);
+      border-inline-end: 1px solid var(--border-weak-base);
 
       &::after {
         display: none;
@@ -572,7 +576,7 @@
         padding: 12px;
         gap: 0;
         background-color: var(--background-base);
-        border-right: 1px solid var(--border-weak-base);
+        border-inline-end: 1px solid var(--border-weak-base);
 
         &::after {
           display: none;
@@ -581,7 +585,8 @@
 
       [data-slot="tabs-section-title"] {
         width: 100%;
-        padding: 0 0 0 4px;
+        padding: 0;
+        padding-inline-start: 4px;
         font-family: var(--font-family-sans);
         font-size: var(--font-size-small);
         font-weight: var(--font-weight-medium);
@@ -695,6 +700,10 @@ body[data-new-layout] #terminal-panel [data-component="tabs"][data-variant="norm
       &::before {
         background: linear-gradient(90deg, transparent, var(--v2-background-bg-base));
       }
+
+      &:dir(rtl)::before {
+        background: linear-gradient(270deg, transparent, var(--v2-background-bg-base));
+      }
     }
   }
 }
@@ -702,7 +711,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"] {
   [data-slot="tabs-list"] {
     height: 52px;
-    padding-right: 12px;
+    padding-inline-end: 12px;
     gap: 8px;
     --tabs-review-fade: 8px;
   }
@@ -723,10 +732,10 @@ body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal
     }
 
     &:has([data-slot="tabs-trigger-close-button"]) {
-      padding-right: 8px;
+      padding-inline-end: 8px;
 
       [data-slot="tabs-trigger-close-button"] {
-        margin-left: 2px;
+        margin-inline-start: 2px;
       }
     }
 
@@ -754,7 +763,7 @@ body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal
     .tab-fileicon-color,
     .tab-fileicon-mono,
     [data-slot="icon-svg"] {
-      margin-left: -2px;
+      margin-inline-start: -2px;
     }
   }
 
@@ -792,7 +801,7 @@ body[data-new-layout]
   .session-review-v2-tabs-bar
   [data-slot="tabs-list"]
   > .sticky {
-  padding-right: 0;
+  padding-inline-end: 0;
 
   [data-component="icon-button-v2"] {
     position: relative;
@@ -800,7 +809,7 @@ body[data-new-layout]
     &::after {
       content: "";
       position: absolute;
-      left: 100%;
+      inset-inline-start: 100%;
       top: 50%;
       transform: translateY(-50%);
       width: 20px;
@@ -811,21 +820,35 @@ body[data-new-layout]
   }
 }
 
+body[data-new-layout]
+  #review-panel
+  [data-component="tabs"]
+  .session-review-v2-tabs-bar
+  [data-slot="tabs-list"]
+  > .sticky:not(.session-review-v2-sidebar-toggle-slot) {
+  left: auto;
+  right: auto;
+  inset-inline-end: 0;
+}
+
 body[data-new-layout]
   #review-panel
   [data-component="tabs"]
   .session-review-v2-tabs-bar
   [data-slot="tabs-list"]
   > .session-review-v2-sidebar-toggle-slot.sticky {
-  padding-right: 0;
+  left: auto;
+  right: auto;
+  inset-inline-start: 0;
+  padding-inline-end: 0;
 
   &::before {
     content: "";
     position: absolute;
     top: 50%;
     bottom: auto;
-    left: auto;
-    right: 100%;
+    inset-inline-start: auto;
+    inset-inline-end: 100%;
     transform: translateY(-50%);
     width: 12px;
     height: 28px;
@@ -838,7 +861,8 @@ body[data-new-layout]
     content: "";
     position: absolute;
     top: 50%;
-    left: 100%;
+    inset-inline-start: 100%;
+    inset-inline-end: auto;
     transform: translateY(-50%);
     width: 8px;
     height: 28px;
@@ -846,6 +870,10 @@ body[data-new-layout]
     background: linear-gradient(90deg, var(--v2-background-bg-base), transparent);
   }
 
+  &:dir(rtl)::after {
+    background: linear-gradient(270deg, var(--v2-background-bg-base), transparent);
+  }
+
   [data-component="icon-button-v2"]::after {
     display: none;
   }
@@ -853,7 +881,7 @@ body[data-new-layout]
 
 body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-open-in-app-slot {
   flex-shrink: 0;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-open-in-app {

package/src/components/tabs.tsx

@@ -80,6 +80,7 @@ function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
     >
       <Kobalte.Trigger
         {...rest}
+        dir={rest.dir ?? "auto"}
         data-slot="tabs-trigger"
         data-value={props.value}
         classList={{ [split.classes?.button ?? ""]: split.classes?.button }}

package/src/components/text-field.css

@@ -45,7 +45,7 @@
       align-items: start;
       justify-content: space-between;
       width: 100%;
-      padding-right: 4px;
+      padding-inline-end: 4px;
 
       border-radius: var(--radius-md);
       border: 1px solid var(--border-weak-base);
@@ -68,7 +68,7 @@
       }
 
       &:not(:has([data-slot="input-copy-button"])) {
-        padding-right: 0;
+        padding-inline-end: 0;
       }
     }
 

package/src/v2/components/file-tree-v2.css

@@ -13,13 +13,13 @@
   align-items: center;
   justify-content: flex-start;
   gap: 6px;
-  padding-right: 8px;
+  padding-inline-end: 8px;
   overflow: visible;
   border: none;
   border-radius: 6px;
   background-color: transparent;
   color: var(--v2-text-text-muted);
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   scroll-margin-block: 8px;
   transition:
@@ -87,6 +87,10 @@
   transform: rotate(-90deg);
 }
 
+[data-component="file-tree-v2"]:dir(rtl) [data-slot="file-tree-v2-chevron"]:not([data-expanded]) svg {
+  transform: rotate(90deg);
+}
+
 [data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected] [data-slot="file-tree-v2-chevron"] {
   color: var(--v2-text-text-base);
 }

package/src/v2/components/select-v2.css

@@ -52,7 +52,8 @@
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  padding: 0 6px 0 0;
+  padding-block: 0;
+  padding-inline: 0 6px;
   gap: 8px;
   width: 280px;
   height: 28px;
@@ -74,7 +75,8 @@
 
 [data-component="select-v2"][data-appearance="large"] {
   height: 32px;
-  padding: 0 8px 0 0;
+  padding-block: 0;
+  padding-inline: 0 8px;
 }
 
 [data-component="select-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within):not(
@@ -126,12 +128,13 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding: 0 0 0 8px;
+  padding-block: 0;
+  padding-inline: 8px 0;
   margin: 0;
   border: 0;
   background: transparent;
   outline: none;
-  text-align: left;
+  text-align: start;
   font-style: normal;
   font-weight: 440;
   font-size: 13px;
@@ -188,7 +191,8 @@
   width: fit-content;
   max-width: 100%;
   height: 24px;
-  padding: 4px 4px 4px 8px;
+  padding-block: 4px;
+  padding-inline: 8px 4px;
   gap: 4px;
   border-radius: 4px;
   background: transparent;
@@ -278,6 +282,13 @@
   color: var(--menu-v2-accent);
 }
 
+[data-slot="select-v2-listbox"]
+  [data-component="menu-v2-item"][data-selected]
+  [data-slot="menu-v2-item-indicator"]
+  svg {
+  visibility: visible;
+}
+
 [data-slot="select-v2-listbox"]
   [data-component="menu-v2-item"]:not([data-selected])
   [data-slot="menu-v2-item-indicator"]

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

@@ -121,6 +121,10 @@
       var(--v2-grey-300);
   }
 
+  &:dir(rtl)[data-checked] [data-slot="switch-thumb"] {
+    transform: translateX(-8px);
+  }
+
   &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
     background:
       linear-gradient(
@@ -135,6 +139,10 @@
     transform: translateX(7px);
   }
 
+  &:dir(rtl)[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    transform: translateX(-7px);
+  }
+
   &[data-disabled] {
     cursor: not-allowed;
   }

package/src/v2/components/text-input-v2.css

@@ -3,7 +3,8 @@
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  padding: 0 8px 0 0;
+  padding-block: 0;
+  padding-inline: 0 8px;
   gap: 8px;
   width: 280px;
   height: 28px;
@@ -64,7 +65,7 @@
   flex: none;
   align-items: center;
   justify-content: center;
-  padding-left: 8px;
+  padding-inline-start: 8px;
   color: var(--v2-icon-icon-muted);
 }
 
@@ -74,7 +75,7 @@
 }
 
 [data-component="text-input-v2"][data-leading-icon] [data-slot="text-input-v2-input"] {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 [data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
@@ -82,7 +83,8 @@
   width: 100%;
   min-width: 0;
   height: 100%;
-  padding: 0 0 0 8px;
+  padding-block: 0;
+  padding-inline: 8px 0;
   margin: 0;
   border: 0;
   background: transparent;
@@ -165,7 +167,7 @@
   height: 28px;
   padding: 0;
   border-radius: 6px;
-  margin-right: -8px;
+  margin-inline-end: -8px;
 }
 
 [data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"] {