@opencode-ai/ui 0.0.0-next-17078 → 0.0.0-next-17079

package/src/v2/components/inline-input-v2.tsx

@@ -1,5 +1,6 @@
 import { type ComponentProps, type JSX, Show, splitProps } from "solid-js"
 import { Icon } from "./icon"
+import { useI18n } from "../../context/i18n"
 import "./inline-input-v2.css"
 
 export interface InlineInputV2Props extends Omit<ComponentProps<"input">, "type" | "prefix"> {
@@ -22,6 +23,7 @@ export interface InlineInputV2Props extends Omit<ComponentProps<"input">, "type"
 }
 
 export function InlineInputV2(props: InlineInputV2Props) {
+  const i18n = useI18n()
   const [local, inputProps] = splitProps(props, [
     "class",
     "classList",
@@ -92,7 +94,7 @@ export function InlineInputV2(props: InlineInputV2Props) {
           <button
             type="button"
             data-slot="inline-input-v2-icon-button"
-            aria-label={local.copyLabel ?? "Copy"}
+            aria-label={local.copyLabel ?? i18n.t("ui.message.copy")}
             disabled={local.disabled}
             onClick={local.onCopyClick}
           >

package/src/v2/components/line-comment-v2.css

@@ -228,7 +228,7 @@
   border-radius: 4px;
   background: transparent;
   color: var(--v2-text-text-base);
-  text-align: left;
+  text-align: start;
   cursor: pointer;
 }
 

package/src/v2/components/line-comment-v2.tsx

@@ -1,5 +1,6 @@
 import { For, Show, createSignal, onMount, splitProps, type ComponentProps, type JSX } from "solid-js"
 import { FileIcon } from "../../components/file-icon"
+import { useI18n } from "../../context/i18n"
 import { useFilteredList } from "../../hooks"
 import { ButtonV2 } from "./button-v2"
 import "./line-comment-v2.css"
@@ -86,6 +87,7 @@ function pathDirectory(path: string) {
 }
 
 export function LineCommentEditorV2(props: LineCommentEditorV2Props) {
+  const i18n = useI18n()
   let textareaRef: HTMLTextAreaElement | undefined
   const [mentionOpen, setMentionOpen] = createSignal(false)
 
@@ -106,7 +108,7 @@ export function LineCommentEditorV2(props: LineCommentEditorV2Props) {
     "classList",
   ])
 
-  const heading = () => local.heading ?? "Comment"
+  const heading = () => local.heading ?? i18n.t("ui.lineComment.submit")
   const canSubmit = () => local.value.trim().length > 0
 
   const closeMention = () => {
@@ -211,7 +213,7 @@ export function LineCommentEditorV2(props: LineCommentEditorV2Props) {
             }}
             data-slot="line-comment-v2-textarea"
             rows={local.rows ?? 3}
-            placeholder={local.placeholder ?? "Add context for this change"}
+            placeholder={local.placeholder ?? i18n.t("ui.lineComment.contextPlaceholder")}
             value={local.value}
             onInput={(e) => {
               local.onInput(e.currentTarget.value)
@@ -291,10 +293,10 @@ export function LineCommentEditorV2(props: LineCommentEditorV2Props) {
           <div data-slot="line-comment-v2-footer-meta">{local.selection}</div>
           <div data-slot="line-comment-v2-footer-actions">
             <ButtonV2 type="button" size="normal" variant="neutral" onClick={() => local.onCancel()}>
-              {local.cancelLabel ?? "Cancel"}
+              {local.cancelLabel ?? i18n.t("ui.lineComment.cancel")}
             </ButtonV2>
             <ButtonV2 type="button" size="normal" variant="contrast" disabled={!canSubmit()} onClick={submit}>
-              {local.submitLabel ?? "Comment"}
+              {local.submitLabel ?? i18n.t("ui.lineComment.submit")}
             </ButtonV2>
           </div>
         </div>

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/tabs-v2.css

@@ -71,7 +71,7 @@
 [data-component="tabs-v2"] [data-slot="tabs-v2-close-button"] {
   width: 20px;
   height: 20px;
-  margin-left: -5px;
+  margin-inline-start: -5px;
   flex: none;
   display: flex;
   align-items: center;
@@ -109,7 +109,7 @@
   background-color: var(--v2-border-border-base);
   position: absolute;
   bottom: 0px;
-  left: -8px;
+  inset-inline-start: -8px;
 }
 
 [data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-list"] {
@@ -183,12 +183,12 @@
   padding: 12px;
   gap: 4px;
   overflow-y: auto;
-  border-right: 1px solid var(--v2-border-border-base);
+  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"] {
   width: 100%;
-  padding-left: 4px;
+  padding-inline-start: 4px;
   color: var(--v2-text-text-muted);
   font-size: 12px;
   font-weight: 500;
@@ -199,7 +199,6 @@
   width: 100%;
   height: 28px;
   border-radius: 4px;
-  border: 0.5px solid transparent;
   box-sizing: border-box;
   color: var(--v2-text-text-muted);
 }
@@ -222,5 +221,4 @@
   [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
   background-color: var(--v2-background-bg-layer-03);
   color: var(--v2-text-text-base);
-  border: 0.5px solid var(--v2-border-border-muted);
 }

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

@@ -1,6 +1,7 @@
 import { Tabs as Kobalte } from "@kobalte/core/tabs"
 import { Show, splitProps, type JSX } from "solid-js"
 import type { ComponentProps, ParentProps, Component } from "solid-js"
+import { useI18n } from "../../context/i18n"
 import "./tabs-v2.css"
 
 export interface TabsV2Props extends ComponentProps<typeof Kobalte> {
@@ -74,7 +75,7 @@ function TabsV2Trigger(props: ParentProps<TabsV2TriggerProps>) {
           {split.children}
           <Show when={split.subtext}>
             {(subtext) => (
-              <span data-slot="tabs-v2-subtext" class="ml-2 text-xs text-text-weak">
+              <span data-slot="tabs-v2-subtext" class="ms-2 text-xs text-text-weak">
                 {subtext()}
               </span>
             )}
@@ -86,12 +87,13 @@ function TabsV2Trigger(props: ParentProps<TabsV2TriggerProps>) {
 }
 
 function TabsV2CloseButton(props: TabsV2CloseButtonProps) {
+  const i18n = useI18n()
   const [split, rest] = splitProps(props, ["class", "classList", "onClick"])
   return (
     <div
       role="button"
       tabindex={0}
-      aria-label="Close tab"
+      aria-label={i18n.t("ui.tabs.close")}
       data-slot="tabs-v2-close-button"
       {...rest}
       classList={{

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"] {

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

@@ -1,5 +1,6 @@
 import { type ComponentProps, type JSX, Show, splitProps } from "solid-js"
 import { Icon } from "./icon"
+import { useI18n } from "../../context/i18n"
 import "./text-input-v2.css"
 
 export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type"> {
@@ -25,6 +26,7 @@ export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type">
 }
 
 export function TextInputV2(props: TextInputV2Props) {
+  const i18n = useI18n()
   const [local, inputProps] = splitProps(props, [
     "class",
     "classList",
@@ -71,7 +73,11 @@ export function TextInputV2(props: TextInputV2Props) {
           type="button"
           data-slot="text-input-v2-icon-button"
           data-variant={local.showClearButton ? "clear" : "copy"}
-          aria-label={local.showClearButton ? (local.clearLabel ?? "Clear") : (local.copyLabel ?? "Copy")}
+          aria-label={
+            local.showClearButton
+              ? (local.clearLabel ?? i18n.t("ui.common.clear"))
+              : (local.copyLabel ?? i18n.t("ui.message.copy"))
+          }
           disabled={local.disabled}
           onMouseDown={(event) => {
             if (!local.showClearButton) return

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

@@ -1,114 +1,133 @@
-[data-component="toast-v2-region"] {
-  position: fixed;
-  bottom: 48px;
-  right: 32px;
+.toast-v2-region {
   z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
   max-width: min(320px, calc(100vw - 64px));
-  max-height: none;
-  width: 100%;
-  overflow: visible;
   pointer-events: none;
-
-  [data-slot="toast-v2-list"] {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    max-height: none;
-    overflow-y: visible;
-    overflow-x: visible;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
+  user-select: none;
+  -webkit-user-select: none;
 }
 
-[data-component="toast-v2"] {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+.toast-v2 {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 20px;
+  column-gap: 12px;
+  row-gap: 12px;
   width: 320px;
+  max-width: 100%;
   padding: 12px;
   max-height: min(420px, calc(100dvh - 96px));
   overflow: hidden;
   pointer-events: auto;
-  transition: transform 140ms ease-out;
-
+  box-sizing: border-box;
+  outline: none;
+  user-select: none;
+  -webkit-user-select: none;
   border-radius: 8px;
   color: var(--v2-text-text-base);
   background: var(--v2-background-bg-layer-01);
   box-shadow: var(--v2-elevation-floating);
+  transition:
+    transform 280ms cubic-bezier(0.2, 0, 0, 1),
+    opacity 160ms ease-out,
+    height 280ms cubic-bezier(0.2, 0, 0, 1),
+    box-shadow 160ms ease-out;
+
+  &:has(> [data-icon]) {
+    grid-template-columns: 16px minmax(0, 1fr) 20px;
+  }
 
-  &[data-opened] {
-    animation: toastV2PopIn 140ms ease-out;
+  &:focus-visible {
+    box-shadow:
+      var(--v2-elevation-floating),
+      0 0 0 2px var(--v2-border-border-focus);
   }
 
-  &[data-closed] {
-    animation: toastV2PopOut 100ms ease-in forwards;
+  &[data-expanded="true"] {
+    overflow: visible;
   }
 
-  [data-slot="toast-v2-header"] {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    width: 100%;
+  &[data-expanded="false"][data-front="false"] > * {
+    opacity: 0;
   }
 
-  [data-slot="toast-v2-icon"] {
-    flex-shrink: 0;
+  &[data-expanded="false"][data-front="false"] {
+    --y: translateY(calc(-1 * var(--toasts-before) * 9.5px)) scale(calc(1 - var(--toasts-before) * 0.05));
+  }
+
+  > [data-icon] {
+    grid-column: 1;
+    grid-row: 1;
+    align-self: start;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 16px;
     height: 20px;
-    min-width: 16px;
-    min-height: 20px;
     color: var(--v2-icon-icon-base);
-
-    [data-component="icon"] {
-      color: var(--v2-icon-icon-base);
-      width: 16px;
-      height: 16px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    > * {
-      width: 16px;
-      height: 16px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-    }
-
-    svg {
-      width: 16px;
-      height: 16px;
-      display: block;
-      flex-shrink: 0;
-    }
   }
 
-  [data-slot="toast-v2-content"] {
-    flex: 1;
+  > [data-content] {
+    grid-column: 1;
+    grid-row: 1;
     display: flex;
     flex-direction: column;
     gap: 4px;
-    min-height: 0;
     min-width: 0;
     overflow: hidden;
   }
 
+  &:has(> [data-icon]) > [data-content] {
+    grid-column: 2;
+  }
+
+  > [data-close-button] {
+    grid-column: 2;
+    grid-row: 1;
+    position: static;
+    align-self: start;
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    min-height: 20px;
+    padding: 0;
+    border: 0;
+    border-radius: 4px;
+    transform: none;
+    background: transparent;
+    color: var(--v2-icon-icon-muted);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &:has(> [data-icon]) > [data-close-button] {
+    grid-column: 3;
+  }
+
+  > [data-close-button]:hover {
+    background: var(--v2-overlay-simple-overlay-hover);
+    color: var(--v2-icon-icon-base);
+  }
+
+  > [data-close-button]:active {
+    background: var(--v2-overlay-simple-overlay-pressed);
+  }
+
+  > [data-close-button]:focus-visible {
+    outline: 2px solid var(--v2-border-border-focus);
+    outline-offset: 2px;
+  }
+
+  > [data-icon] > *,
+  > [data-icon] svg,
+  > [data-close-button] svg {
+    width: 16px;
+    height: 16px;
+    display: block;
+    flex-shrink: 0;
+  }
+
+  [data-title],
   [data-slot="toast-v2-title"] {
     color: var(--v2-text-text-base);
     overflow: hidden;
@@ -123,6 +142,7 @@
     margin: 0;
   }
 
+  [data-description],
   [data-slot="toast-v2-description"] {
     color: var(--v2-text-text-muted);
     text-wrap-style: pretty;
@@ -138,10 +158,15 @@
   }
 
   [data-slot="toast-v2-actions"] {
+    grid-column: 1;
+    grid-row: 2;
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
-    padding-left: 28px;
+  }
+
+  &:has(> [data-icon]) [data-slot="toast-v2-actions"] {
+    grid-column: 2;
   }
 
   [data-slot="toast-v2-actions"] [data-component="button-v2"] {
@@ -154,62 +179,47 @@
     font-synthesis: none;
   }
 
-  [data-slot="toast-v2-close-button"] {
+  [data-slot="toast-v2-header"] {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    width: 100%;
+  }
+
+  [data-slot="toast-v2-icon"] {
     flex-shrink: 0;
-    width: 20px;
-    height: 20px;
-    min-width: 20px;
-    min-height: 20px;
-    padding: 0;
-    border: 0;
-    border-radius: 4px;
-    background: transparent;
-    color: var(--v2-icon-icon-muted);
-    cursor: pointer;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
+    width: 16px;
+    height: 20px;
+    color: var(--v2-icon-icon-base);
+  }
 
-    &:hover {
-      background: var(--v2-overlay-simple-overlay-hover);
-      color: var(--v2-icon-icon-base);
-    }
-
-    &:active {
-      background: var(--v2-overlay-simple-overlay-pressed);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--v2-border-border-focus);
-      outline-offset: 2px;
-    }
-
-    svg {
-      width: 16px;
-      height: 16px;
-      display: block;
-    }
+  [data-slot="toast-v2-content"] {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    overflow: hidden;
   }
 }
 
-@keyframes toastV2PopIn {
-  from {
-    opacity: 0.8;
-    transform: translateY(6px);
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
+@media (prefers-reduced-motion: reduce) {
+  .toast-v2,
+  .toast-v2 > * {
+    animation: none !important;
+    transition: none !important;
   }
 }
 
-@keyframes toastV2PopOut {
-  from {
-    transform: translateY(0);
-    opacity: 1;
+@media (max-width: 600px) {
+  .toast-v2-region {
+    max-width: calc(100vw - 32px);
   }
-  to {
-    transform: translateY(6px);
-    opacity: 0.8;
+
+  .toast-v2 {
+    width: 100%;
   }
 }