@opencode-ai/ui 0.0.0-dev-18424 → 0.0.0-dev-202608272004

package/src/i18n/tk.ts

@@ -69,7 +69,7 @@ export const dict: Record<string, string> = {
   "ui.sessionTurn.error.addCredits": "Karz goşuň",
   "dialog.usageExceeded.freeTier.title": "Mugt çäk ýetdi",
   "dialog.usageExceeded.freeTier.description":
-    "Iň oňat açyk çeşme modellerine ygtybarly girmek üçin aýda 5 $ -dan başlap, OpenCode Go-a ýazylyň.",
+    "Iň oňat açyk çeşme modellerine ygtybarly girmek üçin aýda 10 $ töläp, OpenCode Go-a ýazylyň.",
   "dialog.usageExceeded.freeTier.actionLabel": "Abuna ýazylyň",
   "dialog.usageExceeded.accountRateLimit.title": "Çäklendirildi",
   "dialog.usageExceeded.accountRateLimit.description":
@@ -143,6 +143,8 @@ export const dict: Record<string, string> = {
   "ui.tool.websearch.provider": "{{provider}} Web gözlegi",
   "ui.tool.shell": "Shell",
   "ui.tool.patch": "Patch",
+  "ui.tool.todos": "Edilmeli işler",
+  "ui.tool.todos.read": "Edilmeli zatlary okaň",
   "ui.tool.questions": "Soraglar",
   "ui.tool.questions.numbered": "Soraglar {{number}}",
   "ui.tool.agent": "{{type}} Agenti",

package/src/i18n/tr.ts

@@ -79,7 +79,7 @@ export const dict = {
 
   "dialog.usageExceeded.freeTier.title": "Ücretsiz sınıra ulaşıldı",
   "dialog.usageExceeded.freeTier.description":
-    "En iyi açık kaynaklı modellere güvenilir erişim için OpenCode Go'ya abone olun. Aylık $5'ten başlar.",
+    "En iyi açık kaynaklı modellere güvenilir erişim için aylık $10 karşılığında OpenCode Go'ya abone olun.",
   "dialog.usageExceeded.freeTier.actionLabel": "Abone ol",
   "dialog.usageExceeded.accountRateLimit.title": "Go sınırına ulaşıldı",
   "dialog.usageExceeded.accountRateLimit.description":
@@ -157,6 +157,8 @@ export const dict = {
   "ui.tool.websearch.provider": "{{provider}} Web araması",
   "ui.tool.shell": "Kabuk",
   "ui.tool.patch": "Yama",
+  "ui.tool.todos": "Görevler",
+  "ui.tool.todos.read": "Görevleri oku",
   "ui.tool.questions": "Sorular",
   "ui.tool.questions.numbered": "Sorular {{number}}",
   "ui.tool.agent": "{{type}} ajanı",

package/src/i18n/uk.ts

@@ -77,7 +77,7 @@ export const dict: Record<string, string> = {
 
   "dialog.usageExceeded.freeTier.title": "Безкоштовний ліміт вичерпано",
   "dialog.usageExceeded.freeTier.description":
-    "Підпишіться на OpenCode Go для надійного доступу до найкращих моделей із відкритим кодом від $5 на місяць.",
+    "Підпишіться на OpenCode Go за $10 на місяць для надійного доступу до найкращих моделей із відкритим кодом.",
   "dialog.usageExceeded.freeTier.actionLabel": "Підписатися",
   "dialog.usageExceeded.accountRateLimit.title": "Ліміт Go вичерпано",
   "dialog.usageExceeded.accountRateLimit.description":
@@ -167,6 +167,8 @@ export const dict: Record<string, string> = {
   "ui.tool.websearch.provider": "{{provider}} Веб-пошук",
   "ui.tool.shell": "Оболонка",
   "ui.tool.patch": "Патч",
+  "ui.tool.todos": "Завдання",
+  "ui.tool.todos.read": "Читати завдання",
   "ui.tool.questions": "Запитання",
   "ui.tool.questions.numbered": "Запитання {{number}}",
   "ui.tool.agent": "Агент {{type}}",

package/src/i18n/ur.ts

@@ -70,7 +70,7 @@ export const dict: Record<string, string> = {
   "ui.sessionTurn.error.addCredits": "کریڈٹ شامل کریں۔",
   "dialog.usageExceeded.freeTier.title": "مفت استعمال کی حد پوری ہو گئی",
   "dialog.usageExceeded.freeTier.description":
-    "$5/ماہ سے شروع ہونے والے بہترین اوپن سورس ماڈلز تک قابل اعتماد رسائی کے لیے OpenCode Go کو سبسکرائب کریں۔",
+    "$10/ماہ میں بہترین اوپن سورس ماڈلز تک قابل اعتماد رسائی کے لیے OpenCode Go کو سبسکرائب کریں۔",
   "dialog.usageExceeded.freeTier.actionLabel": "سبسکرائب کریں۔",
   "dialog.usageExceeded.accountRateLimit.title": "Go حد تک پہنچ گئی۔",
   "dialog.usageExceeded.accountRateLimit.description":
@@ -144,6 +144,8 @@ export const dict: Record<string, string> = {
   "ui.tool.websearch.provider": "{{provider}} ویب تلاش",
   "ui.tool.shell": "شیل",
   "ui.tool.patch": "پیچ",
+  "ui.tool.todos": "زیر التوا کام",
+  "ui.tool.todos.read": "زیر التوا کام پڑھیں",
   "ui.tool.questions": "سوالات",
   "ui.tool.questions.numbered": "سوالات {{number}}",
   "ui.tool.agent": "{{type}} ایجنٹ",

package/src/i18n/uz.ts

@@ -71,7 +71,7 @@ export const dict: Record<string, string> = {
   "ui.sessionTurn.error.addCredits": "Kredit qo'shing",
   "dialog.usageExceeded.freeTier.title": "Bepul chegaraga yetdi",
   "dialog.usageExceeded.freeTier.description":
-    "Oyiga $5 dan boshlab eng yaxshi ochiq kodli modellarga ishonchli kirish uchun OpenCode Go ga obuna bo'ling.",
+    "Oyiga $10 evaziga eng yaxshi ochiq kodli modellarga ishonchli kirish uchun OpenCode Go ga obuna bo'ling.",
   "dialog.usageExceeded.freeTier.actionLabel": "Obuna boʻling",
   "dialog.usageExceeded.accountRateLimit.title": "Oʻtish chegarasiga yetdi",
   "dialog.usageExceeded.accountRateLimit.description":
@@ -146,6 +146,8 @@ export const dict: Record<string, string> = {
   "ui.tool.websearch.provider": "{{provider}} veb-qidiruv",
   "ui.tool.shell": "Shell",
   "ui.tool.patch": "Yamoq",
+  "ui.tool.todos": "Vazifalar",
+  "ui.tool.todos.read": "Vazifalarni o'qing",
   "ui.tool.questions": "Savollar",
   "ui.tool.questions.numbered": "Savollar {{number}}",
   "ui.tool.agent": "{{type}} agenti",

package/src/i18n/vi.ts

@@ -69,7 +69,7 @@ export const dict: Record<string, string> = {
   "ui.sessionTurn.error.addCredits": "Thêm số dư",
   "dialog.usageExceeded.freeTier.title": "Đã đạt đến giới hạn miễn phí",
   "dialog.usageExceeded.freeTier.description":
-    "Đăng ký OpenCode Go để có quyền truy cập đáng tin cậy vào các mô hình nguồn mở tốt nhất, bắt đầu từ $5/tháng.",
+    "Đăng ký OpenCode Go với giá $10/tháng để có quyền truy cập đáng tin cậy vào các mô hình nguồn mở tốt nhất.",
   "dialog.usageExceeded.freeTier.actionLabel": "Đăng ký",
   "dialog.usageExceeded.accountRateLimit.title": "Đã đạt giới hạn Go",
   "dialog.usageExceeded.accountRateLimit.description":
@@ -143,6 +143,8 @@ export const dict: Record<string, string> = {
   "ui.tool.websearch.provider": "{{provider}} Tìm kiếm trên web",
   "ui.tool.shell": "Shell",
   "ui.tool.patch": "Bản vá",
+  "ui.tool.todos": "Việc cần làm",
+  "ui.tool.todos.read": "Đọc việc cần làm",
   "ui.tool.questions": "Câu hỏi",
   "ui.tool.questions.numbered": "Câu hỏi {{number}}",
   "ui.tool.agent": "Tác nhân {{type}}",

package/src/i18n/zh.ts

@@ -76,7 +76,7 @@ export const dict = {
   "ui.sessionTurn.error.addCredits": "充值",
 
   "dialog.usageExceeded.freeTier.title": "免费额度已用完",
-  "dialog.usageExceeded.freeTier.description": "订阅 OpenCode Go，可靠地使用最佳开源模型，每月 $5 起。",
+  "dialog.usageExceeded.freeTier.description": "每月 $10 订阅 OpenCode Go，可靠地使用最佳开源模型。",
   "dialog.usageExceeded.freeTier.actionLabel": "订阅",
   "dialog.usageExceeded.accountRateLimit.title": "Go 额度已用完",
   "dialog.usageExceeded.accountRateLimit.description": "使用额度已达上限。如需立即继续使用此模型，请启用余额付费",
@@ -153,6 +153,8 @@ export const dict = {
   "ui.tool.websearch.provider": "{{provider}} 网页搜索",
   "ui.tool.shell": "Shell",
   "ui.tool.patch": "补丁",
+  "ui.tool.todos": "待办",
+  "ui.tool.todos.read": "读取待办",
   "ui.tool.questions": "问题",
   "ui.tool.questions.numbered": "问题 {{number}}",
   "ui.tool.agent": "{{type}} 智能体",

package/src/i18n/zht.ts

@@ -76,7 +76,7 @@ export const dict = {
   "ui.sessionTurn.error.addCredits": "新增點數",
 
   "dialog.usageExceeded.freeTier.title": "已達免費額度上限",
-  "dialog.usageExceeded.freeTier.description": "訂閱 OpenCode Go，可靠地使用最佳開源模型，每月 $5 起。",
+  "dialog.usageExceeded.freeTier.description": "每月 $10 訂閱 OpenCode Go，可靠地使用最佳開源模型。",
   "dialog.usageExceeded.freeTier.actionLabel": "訂閱",
   "dialog.usageExceeded.accountRateLimit.title": "已達 Go 額度上限",
   "dialog.usageExceeded.accountRateLimit.description": "已達使用額度上限。若要立即繼續使用此模型，請啟用可用餘額計費",
@@ -153,6 +153,8 @@ export const dict = {
   "ui.tool.websearch.provider": "{{provider}} 網頁搜尋",
   "ui.tool.shell": "Shell",
   "ui.tool.patch": "修補",
+  "ui.tool.todos": "待辦",
+  "ui.tool.todos.read": "讀取待辦",
   "ui.tool.questions": "問題",
   "ui.tool.questions.numbered": "問題 {{number}}",
   "ui.tool.agent": "{{type}} 代理程式",

package/src/styles/index.css

@@ -6,31 +6,47 @@
 @import "./base.css" layer(base);
 @import "katex/dist/katex.min.css" layer(base);
 
-@import "../data-display/accordion/accordion.css" layer(components);
+@import "../components/accordion.css" layer(components);
 @import "../components/animated-number.css" layer(components);
 @import "../components/app-icon.css" layer(components);
+@import "../components/avatar.css" layer(components);
+@import "../components/button.css" layer(components);
 @import "../components/card.css" layer(components);
-@import "../forms/checkbox/checkbox.css" layer(components);
+@import "../components/checkbox.css" layer(components);
 @import "../components/collapsible.css" layer(components);
+@import "../components/diff-changes.css" layer(components);
 @import "../components/context-menu.css" layer(components);
+@import "../components/dropdown-menu.css" layer(components);
+@import "../components/dialog.css" layer(components);
 @import "../components/file-icon.css" layer(components);
 @import "../components/hover-card.css" layer(components);
 @import "../components/provider-icon.css" layer(components);
 @import "../components/dock-surface.css" layer(components);
+@import "../components/icon.css" layer(components);
+@import "../components/icon-button.css" layer(components);
 @import "../components/image-preview.css" layer(components);
-@import "../forms/inline-input/inline-input.css" layer(components);
+@import "../components/keybind.css" layer(components);
 @import "../components/text-field.css" layer(components);
+@import "../components/inline-input.css" layer(components);
 @import "../components/list.css" layer(components);
 @import "../components/logo.css" layer(components);
 @import "../components/popover.css" layer(components);
 @import "../components/progress.css" layer(components);
+@import "../components/progress-circle.css" layer(components);
+@import "../components/radio-group.css" layer(components);
 @import "../components/resize-handle.css" layer(components);
+@import "../components/select.css" layer(components);
 @import "../components/spinner.css" layer(components);
+@import "../components/switch.css" layer(components);
 @import "../components/scroll-view.css" layer(components);
 @import "../components/sticky-accordion-header.css" layer(components);
-@import "../navigation/tabs/tabs.css" layer(components);
+@import "../components/tabs.css" layer(components);
+@import "../components/tag.css" layer(components);
 @import "../components/text-reveal.css" layer(components);
 @import "../components/text-strikethrough.css" layer(components);
+@import "../components/text-shimmer.css" layer(components);
+@import "../components/toast.css" layer(components);
+@import "../components/tooltip.css" layer(components);
 @import "../components/typewriter.css" layer(components);
 
 @import "./utilities.css" layer(utilities);

package/src/styles/tailwind/colors.css

@@ -252,7 +252,6 @@
   --color-v2-text-text-code-accent: var(--v2-text-text-code-accent);
   --color-v2-icon-icon-base: var(--v2-icon-icon-base);
   --color-v2-icon-icon-muted: var(--v2-icon-icon-muted);
-  --color-v2-icon-icon-faint: var(--v2-icon-icon-faint);
   --color-v2-icon-icon-inverse: var(--v2-icon-icon-inverse);
   --color-v2-icon-icon-contrast: var(--v2-icon-icon-contrast);
   --color-v2-icon-icon-accent: var(--v2-icon-icon-accent);

package/src/styles/tailwind/index.css

@@ -1,21 +1,7 @@
 @layer theme, base, components, utilities;
 
 @import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities) source(none);
-@source "../../../../app/src";
-@source "../../../../app/index.html";
-@source not "../../../../app/src/i18n";
-@source not "../../../../app/src/**/*.test.{ts,tsx}";
-@source "../../../../desktop/src/renderer";
-@source not "../../../../desktop/src/renderer/**/*.test.{ts,tsx}";
-@source "../../../../enterprise/src";
-@source "../../../../session-ui/src";
-@source not "../../../../session-ui/src/**/*.test.{ts,tsx}";
-@source "../../../../storybook";
-@source "../../../src";
-@source not "../../../src/assets";
-@source not "../../../src/i18n";
-@source not "../../../src/**/*.test.{ts,tsx}";
+@import "tailwindcss/utilities.css" layer(utilities) source("../../../../");
 @import "./utilities.css";
 
 @import "../index.css";
@@ -65,9 +51,6 @@
   --leading-lg: var(--line-height-large);
   --leading-xl: var(--line-height-x-large);
   --leading-2xl: var(--line-height-2x-large);
-  --leading-text-tight: var(--line-height-tight);
-  --leading-text-compact: var(--line-height-compact);
-  --leading-text-base: var(--line-height-base);
 
   --tracking-normal: var(--letter-spacing-normal);
   --tracking-tight: var(--letter-spacing-tight);

package/src/styles/theme.css

@@ -1,8 +1,8 @@
 :root {
-  --font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-family-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-family-sans--font-feature-settings: normal;
   --font-family-mono:
-    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --font-family-mono--font-feature-settings: normal;
 
   --font-size-small: 13px;

package/src/theme/context.tsx

@@ -84,9 +84,8 @@ const names: Record<string, string> = {
 }
 const oc2Theme = oc2ThemeJson as DesktopTheme
 
-function resolveStoredTheme(id: string | null | undefined, registered?: Record<string, DesktopTheme>) {
-  if (id === "oc-2" || (id && (knownThemes().has(id) || registered?.[id]))) return id
-  return "oc-2"
+function normalize(id: string | null | undefined) {
+  return id === "oc-1" ? "oc-2" : id
 }
 
 function read(key: string) {
@@ -178,12 +177,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     defaultTheme?: string
     onThemeApplied?: (theme: DesktopTheme, mode: "light" | "dark", scheme: ColorScheme) => void
   }) => {
-    const rawTheme = read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme
-    const themeId = resolveStoredTheme(rawTheme)
-    if (rawTheme && rawTheme !== themeId) {
-      write(STORAGE_KEYS.THEME_ID, themeId)
-      clear()
-    }
+    const themeId = normalize(read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme) ?? "oc-2"
     const colorScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
     const mode = colorScheme === "system" ? getSystemMode() : colorScheme
     const [store, setStore] = createStore({
@@ -200,7 +194,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     const loads = new Map<string, Promise<DesktopTheme | undefined>>()
 
     const load = (id: string) => {
-      const next = id
+      const next = normalize(id)
       if (!next) return Promise.resolve(undefined)
       const hit = store.themes[next]
       if (hit) return Promise.resolve(hit)
@@ -239,11 +233,9 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
 
     const onStorage = (e: StorageEvent) => {
       if (e.key === STORAGE_KEYS.THEME_ID && e.newValue) {
-        const next = resolveStoredTheme(e.newValue, store.themes)
-        if (next !== e.newValue) {
-          write(STORAGE_KEYS.THEME_ID, next)
-          clear()
-        }
+        const next = normalize(e.newValue)
+        if (!next) return
+        if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
         setStore("themeId", next)
         if (next === "oc-2") {
           clear()
@@ -270,8 +262,8 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       }
       makeEventListener(mediaQuery, "change", onMedia)
 
-      const rawTheme = read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme
-      const savedTheme = resolveStoredTheme(rawTheme, store.themes)
+      const rawTheme = read(STORAGE_KEYS.THEME_ID)
+      const savedTheme = normalize(rawTheme ?? props.defaultTheme) ?? "oc-2"
       const savedScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
       if (rawTheme && rawTheme !== savedTheme) {
         write(STORAGE_KEYS.THEME_ID, savedTheme)
@@ -293,7 +285,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     })
 
     const setTheme = (id: string) => {
-      const next = id
+      const next = normalize(id)
       if (!next) {
         console.warn(`Theme "${id}" not found`)
         return
@@ -333,7 +325,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       setColorScheme,
       registerTheme: (theme: DesktopTheme) => setStore("themes", theme.id, theme),
       previewTheme: (id: string) => {
-        const next = id
+        const next = normalize(id)
         if (!next) return
         if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
         setStore("previewThemeId", next)

package/src/theme/themes/oc-2.json

@@ -25,7 +25,7 @@
       "border-weak-base": "#DBDBDB",
       "border-weaker-base": "#E8E8E8",
       "icon-base": "#8F8F8F",
-      "icon-weak-base": "C7C7C7",
+      "icon-weak-base": "#C7C7C7",
       "surface-raised-base": "#F3F3F3",
       "surface-raised-base-hover": "#EDEDED",
       "surface-base": "#F8F8F8",
@@ -176,7 +176,6 @@
       "v2-text-text-code-accent": "var(--v2-blue-900)",
       "v2-icon-icon-base": "var(--v2-grey-800)",
       "v2-icon-icon-muted": "var(--v2-grey-600)",
-      "v2-icon-icon-faint": "var(--v2-grey-500)",
       "v2-icon-icon-inverse": "var(--v2-grey-50)",
       "v2-icon-icon-contrast": "var(--v2-grey-100)",
       "v2-icon-icon-accent": "var(--v2-blue-600)",
@@ -412,7 +411,6 @@
       "v2-text-text-code-accent": "var(--v2-blue-400)",
       "v2-icon-icon-base": "var(--v2-grey-400)",
       "v2-icon-icon-muted": "var(--v2-grey-600)",
-      "v2-icon-icon-faint": "var(--v2-grey-500)",
       "v2-icon-icon-inverse": "var(--v2-grey-1100)",
       "v2-icon-icon-contrast": "var(--v2-grey-100)",
       "v2-icon-icon-accent": "var(--v2-blue-400)",

package/src/theme/v2/foreground.ts

@@ -52,7 +52,6 @@ export function mapV2Foreground(
     "v2-text-text-faint": shift(body, { l: isDark ? -0.2 : 0.21, c: isDark ? 0.78 : 0.72 }),
     "v2-icon-icon-base": greyRef(pickGrey(primitives, bgBase, 7, isDark ? 400 : 800)),
     "v2-icon-icon-muted": greyRef(pickGrey(primitives, bgBase, 3, 600)),
-    "v2-icon-icon-faint": greyRef(pickGrey(primitives, bgBase, 1.5, 500)),
     "v2-icon-icon-inverse": greyRef(pickGrey(primitives, bgInverse, 7, inverseTarget)),
     "v2-icon-icon-contrast": greyRef(pickGrey(primitives, bgContrast, 7, 100)),
     "v2-icon-icon-accent": isDark ? "var(--v2-blue-400)" : "var(--v2-blue-600)",

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

@@ -0,0 +1,139 @@
+[data-component="accordion-v2"] {
+  --accordion-v2-fg: var(--v2-text-text-base);
+  --accordion-v2-icon: var(--v2-icon-icon-base);
+  --accordion-v2-border: var(--v2-border-border-strong);
+  --accordion-v2-bg: var(--v2-background-bg-base);
+
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  width: 100%;
+  background: var(--accordion-v2-bg);
+  border-radius: 6px;
+  box-shadow: 0 0 0 0.5px var(--accordion-v2-border);
+  overflow: hidden;
+
+  color: var(--accordion-v2-fg);
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="accordion-v2-item"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  background: var(--accordion-v2-bg);
+  box-shadow: inset 0 -0.5px 0 var(--accordion-v2-border);
+}
+
+[data-component="accordion-v2-item"]:last-child {
+  box-shadow: none;
+}
+
+[data-slot="accordion-v2-header"] {
+  display: flex;
+  margin: 0;
+}
+
+[data-component="accordion-v2-trigger"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+
+  width: 100%;
+  min-height: 30px;
+  padding: 0 12px;
+
+  background: transparent;
+  border: 0;
+  outline: none;
+  cursor: default;
+  user-select: none;
+
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 100%;
+  letter-spacing: -0.04px;
+  color: var(--accordion-v2-fg);
+  text-align: left;
+}
+
+[data-component="accordion-v2-trigger"] [data-slot="accordion-v2-trigger-content"] {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  height: 30px;
+}
+
+[data-component="accordion-v2-trigger"] [data-slot="accordion-v2-chevron"] {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  color: var(--accordion-v2-icon);
+  transition: transform 150ms ease;
+}
+
+[data-component="accordion-v2-trigger"][data-expanded] [data-slot="accordion-v2-chevron"] {
+  transform: rotate(180deg);
+}
+
+[data-component="accordion-v2-item"][data-expanded] [data-component="accordion-v2-trigger"] {
+  box-shadow: inset 0 -0.5px 0 var(--accordion-v2-border);
+}
+
+[data-component="accordion-v2-trigger"][data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+[data-component="accordion-v2-content"] {
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 140%;
+  color: var(--accordion-v2-fg);
+}
+
+[data-component="accordion-v2-content"][data-expanded] {
+  animation: accordion-v2-down 180ms ease-out;
+}
+
+[data-component="accordion-v2-content"][data-closed] {
+  animation: accordion-v2-up 180ms ease-out;
+}
+
+[data-component="accordion-v2-content"] [data-slot="accordion-v2-content-inner"] {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  padding: 12px;
+}
+
+@keyframes accordion-v2-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-collapsible-content-height);
+  }
+}
+
+@keyframes accordion-v2-up {
+  from {
+    height: var(--kb-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

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

@@ -0,0 +1,86 @@
+import { Accordion as Kobalte } from "@kobalte/core/accordion"
+import { Show, splitProps, type Component, type ComponentProps, type ParentProps } from "solid-js"
+import "./accordion-v2.css"
+
+const ChevronDown: Component = () => (
+  <svg
+    data-slot="accordion-v2-chevron"
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path d="M4 5.5L7 8.5L10 5.5" stroke="currentColor" />
+  </svg>
+)
+
+export interface AccordionV2Props extends ComponentProps<typeof Kobalte> {}
+export interface AccordionV2ItemProps extends ComponentProps<typeof Kobalte.Item> {}
+export interface AccordionV2HeaderProps extends ComponentProps<typeof Kobalte.Header> {}
+export interface AccordionV2TriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
+  hideChevron?: boolean
+}
+export interface AccordionV2ContentProps extends ComponentProps<typeof Kobalte.Content> {}
+
+function AccordionV2Root(props: ParentProps<AccordionV2Props>) {
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return <Kobalte {...r} data-component="accordion-v2" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }} />
+}
+
+function AccordionV2Item(props: ParentProps<AccordionV2ItemProps>) {
+  const [s, r] = splitProps(props, ["class", "classList"])
+  return (
+    <Kobalte.Item
+      {...r}
+      data-component="accordion-v2-item"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    />
+  )
+}
+
+function AccordionV2Header(props: ParentProps<AccordionV2HeaderProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Header {...r} data-slot="accordion-v2-header" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
+      {s.children}
+    </Kobalte.Header>
+  )
+}
+
+function AccordionV2Trigger(props: ParentProps<AccordionV2TriggerProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children", "hideChevron"])
+  return (
+    <Kobalte.Trigger
+      {...r}
+      data-component="accordion-v2-trigger"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
+      <span data-slot="accordion-v2-trigger-content">{s.children}</span>
+      <Show when={!s.hideChevron}>
+        <ChevronDown />
+      </Show>
+    </Kobalte.Trigger>
+  )
+}
+
+function AccordionV2Content(props: ParentProps<AccordionV2ContentProps>) {
+  const [s, r] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Content
+      {...r}
+      data-component="accordion-v2-content"
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
+      <div data-slot="accordion-v2-content-inner">{s.children}</div>
+    </Kobalte.Content>
+  )
+}
+
+export const AccordionV2 = Object.assign(AccordionV2Root, {
+  Item: AccordionV2Item,
+  Header: AccordionV2Header,
+  Trigger: AccordionV2Trigger,
+  Content: AccordionV2Content,
+})

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

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

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

@@ -31,22 +31,3 @@
   background: var(--v2-background-bg-accent);
   color: var(--v2-text-text-contrast);
 }
-
-[data-component="tag"][data-appearance="standard"] {
-  height: 18px;
-  padding: 0 6px;
-  border-radius: var(--radius-xs);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-small);
-  font-style: normal;
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-large);
-  letter-spacing: var(--letter-spacing-normal);
-  font-variant-numeric: normal;
-}
-
-[data-component="tag"][data-appearance="standard"][data-variant="neutral"] {
-  border: 0.5px solid var(--border-weak-base);
-  background: var(--surface-raised-base);
-  color: var(--text-base);
-}

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

@@ -1,18 +1,16 @@
 import { type ComponentProps, splitProps } from "solid-js"
-import "./badge.css"
+import "./badge-v2.css"
 
-export interface BadgeProps extends ComponentProps<"span"> {
-  appearance?: "standard" | "compact"
+export interface TagProps extends ComponentProps<"span"> {
   variant?: "neutral" | "accent"
 }
 
-export function Badge(props: BadgeProps) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children", "appearance", "variant"])
+export function Tag(props: TagProps) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children", "variant"])
   return (
     <span
       {...rest}
       data-component="tag"
-      data-appearance={split.appearance ?? "compact"}
       data-variant={split.variant ?? "neutral"}
       classList={{
         ...split.classList,