@opencode-ai/ui 0.0.0-dev-202609020429 → 0.0.0-dev-18874

package/src/{v2/components → icons/icon}/icon.tsx

@@ -1,5 +1,8 @@
 import { onMount, type ComponentProps, splitProps } from "solid-js"
+import { additionalIcons, additionalIconViewBox } from "./additional-icons"
+import "./icon.css"
 
+// Consumers center the SVG viewport, so each icon must center its artwork within its viewBox.
 const icons = {
   edit: {
     viewBox: "0 0 16 16",
@@ -17,6 +20,10 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M5.118 5.686V10.314M5.118 5.686C5.97 5.686 6.661 4.995 6.661 4.143C6.661 3.291 5.97 2.6 5.118 2.6C4.266 2.6 3.575 3.291 3.575 4.143C3.575 4.995 4.266 5.686 5.118 5.686ZM5.118 10.314C4.266 10.314 3.575 11.005 3.575 11.857C3.575 12.709 4.266 13.4 5.118 13.4C5.97 13.4 6.661 12.709 6.661 11.857M5.118 10.314C5.97 10.314 6.661 11.005 6.661 11.857M10.882 5.686C11.734 5.686 12.425 4.995 12.425 4.143C12.425 3.291 11.734 2.6 10.882 2.6C10.03 2.6 9.339 3.291 9.339 4.143C9.339 4.995 10.03 5.686 10.882 5.686ZM10.882 5.686V9.457C10.882 10.783 9.807 11.857 8.482 11.857H6.661" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>`,
   },
+  "branch-out": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M10.4225 3.35355L12.9024 5.83344L10.4225 8.31333" stroke="currentColor"/><path d="M1 12.2852H4.23042C4.89912 12.2852 5.52359 11.951 5.89452 11.3946L9.00783 6.72462C8.37877 6.16823 10.0032 5.83402 10.6719 5.83402H12.9024" stroke="currentColor"/><path d="M8.5 12.2852H14" stroke="currentColor" stroke-linejoin="round"/>`,
+  },
   "grid-plus": {
     viewBox: "0 0 16 16",
     body: `<path d="M13.9948 11.668H9.32812M11.6641 9.33203V13.9987M6.66667 9.33203V13.9987H2V9.33203H6.66667ZM6.66667 2V6.66667H2V2H6.66667ZM13.9948 2V6.66667H9.32812V2H13.9948Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>`,
@@ -25,6 +32,10 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M6.33345 6.33349V5.00015H9.66679V7.00015L8.00015 8.00015V9.66679M8.27485 11.6819H7.71897M14.4446 8.00011C14.4446 11.5593 11.5593 14.4446 8.00011 14.4446C4.44094 14.4446 1.55566 11.5593 1.55566 8.00011C1.55566 4.44094 4.44094 1.55566 8.00011 1.55566C11.5593 1.55566 14.4446 4.44094 14.4446 8.00011Z" stroke="currentColor" stroke-linecap="square"/>`,
   },
+  "circle-exclamation": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M8.75 11.75H7.25V10.25H8.75V11.75Z" fill="currentColor"/><path d="M8.75 9.25H7.25V4.25H8.75V9.25Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1C9.93286 1 11.684 1.7836 12.9502 3.0498C14.2164 4.31601 15 6.06714 15 8C15 11.866 11.866 15 8 15C6.06714 15 4.31601 14.2164 3.0498 12.9502C1.7836 11.684 1 9.93286 1 8C1 4.13401 4.13401 1 8 1ZM8 2C4.68629 2 2 4.68629 2 8C2 9.65699 2.67148 11.1559 3.75781 12.2422C4.84415 13.3285 6.34301 14 8 14C11.3137 14 14 11.3137 14 8C14 6.34301 13.3285 4.84415 12.2422 3.75781C11.1559 2.67148 9.65699 2 8 2Z" fill="currentColor"/>`,
+  },
   "sidebar-right": {
     viewBox: "0 0 20 20",
     body: `<path d="M2.91536 2.91406H2.36536V2.36406H2.91536V2.91406ZM2.91536 17.0807V17.6307H2.36536V17.0807H2.91536ZM17.082 17.0807H17.632V17.6307H17.082V17.0807ZM17.082 2.91406V2.36406H17.632V2.91406H17.082ZM6.9987 2.91406H6.4487V2.36406H6.9987V2.91406ZM6.9987 17.0807V17.6307H6.4487V17.0807H6.9987ZM2.91536 2.91406H3.46536V17.0807H2.91536H2.36536V2.91406H2.91536ZM2.91536 17.0807V16.5307H17.082V17.0807V17.6307H2.91536V17.0807ZM17.082 17.0807H16.532V2.91406H17.082H17.632V17.0807H17.082ZM17.082 2.91406V3.46406H2.91536V2.91406V2.36406H17.082V2.91406ZM6.9987 2.91406H7.5487V17.0807H6.9987H6.4487V2.91406H6.9987ZM17.082 17.0807L17.082 17.6307L6.9987 17.6307V17.0807V16.5307L17.082 16.5307L17.082 17.0807ZM6.9987 2.91406V2.36406H17.082V2.91406V3.46406H6.9987V2.91406Z" fill="currentColor"/>`,
@@ -121,6 +132,14 @@ const icons = {
     viewBox: "0 0 20 20",
     body: `<path d="M7 14.5H13M7 7.99512H10.0049M10.0049 7.99512H13M10.0049 7.99512V5M10.0049 7.99512V11M18 18V2L2 2L2 18H18Z" stroke="currentColor"/>`,
   },
+  "window-analytics": {
+    viewBox: "0 0 16 16",
+    body: `<g transform="translate(1 2)"><path d="M7 4H11M7 8H11M0.5 0.5V11.5H13.5V0.5H0.5ZM3.5 3.5H4.5V4.5H3.5V3.5ZM3.5 7.5H4.5V8.5H3.5V7.5Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/></g>`,
+  },
+  trash: {
+    viewBox: "0 0 20 20",
+    body: `<path d="M4.58342 17.9134L4.58369 17.4134L4.22787 17.5384L4.22766 18.0384H4.58342V17.9134ZM15.4167 17.9134V18.0384H15.7725L15.7723 17.5384L15.4167 17.9134ZM2.08342 3.95508V3.45508H1.58342V3.95508H2.08342V4.45508V3.95508ZM17.9167 4.45508V4.95508H18.4167V4.45508H17.9167V3.95508V4.45508ZM4.16677 4.58008L3.66701 4.5996L4.22816 17.5379L4.72792 17.4934L5.22767 17.4489L4.66652 4.54055L4.16677 4.58008ZM4.58342 18.0384V17.9134H15.4167V18.0384V18.5384H4.58342V18.0384ZM15.4167 17.9134L15.8332 17.5379L16.2498 4.5996L15.7501 4.58008L15.2503 4.56055L14.8337 17.4989L15.4167 17.9134ZM15.8334 4.58008V4.08008H4.16677V4.58008V5.08008H15.8334V4.58008ZM2.08342 4.45508V4.95508H4.16677V4.58008V4.08008H2.08342V4.45508ZM15.8334 4.58008V5.08008H17.9167V4.45508V3.95508H15.8334V4.58008ZM6.83951 4.35149L7.432 4.55047C7.79251 3.47701 8.80699 2.70508 10.0001 2.70508V2.20508V1.70508C8.25392 1.70508 6.77335 2.83539 6.24702 4.15251L6.83951 4.35149ZM10.0001 2.20508V2.70508C11.1932 2.70508 12.2077 3.47701 12.5682 4.55047L13.1607 4.35149L13.7532 4.15251C13.2269 2.83539 11.7463 1.70508 10.0001 1.70508V2.20508Z" fill="currentColor"/>`,
+  },
   "outline-sliders": {
     viewBox: "0 0 16 16",
     body: `<path d="M11.7779 4.66675H14.4446M11.7779 4.66675C11.7779 5.77132 10.8825 6.66675 9.77789 6.66675C8.67332 6.66675 7.77789 5.77132 7.77789 4.66675M11.7779 4.66675C11.7779 3.56218 10.8825 2.66675 9.77789 2.66675C8.67332 2.66675 7.77789 3.56218 7.77789 4.66675M1.55566 4.66675H7.77789M4.22233 11.3334H1.55566M4.22233 11.3334C4.22233 12.438 5.11776 13.3334 6.22233 13.3334C7.3269 13.3334 8.22233 12.438 8.22233 11.3334M4.22233 11.3334C4.22233 10.2288 5.11776 9.33341 6.22233 9.33341C7.3269 9.33341 8.22233 10.2288 8.22233 11.3334M14.4446 11.3334H8.22233" stroke="currentColor"/>`,
@@ -145,16 +164,29 @@ const icons = {
     viewBox: "0 0 20 20",
     body: `<path d="M5.83333 4.16406L2.5 7.4974L5.83333 10.8307M3.33333 7.4974H17.9167V15.4141H10" stroke="currentColor" stroke-linecap="square"/>`,
   },
+  "fill-triangle-down": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M5.37624 6.75194C5.1818 6.41861 5.42223 6 5.80813 6H10.1921C10.578 6 10.8184 6.41861 10.624 6.75194L8.43199 10.5096C8.23905 10.8404 7.76115 10.8404 7.56821 10.5096L5.37624 6.75194Z" fill="currentColor"/>`,
+  },
   archive: {
     viewBox: "0 0 16 16",
     body: `<path d="M13.1112 13.5555V14.0555H13.6112V13.5555H13.1112ZM2.889 13.5555H2.389L2.389 14.0555H2.889V13.5555ZM3.38901 5.55546L3.38901 5.05546L2.38901 5.05546L2.38901 5.55546L2.88901 5.55546L3.38901 5.55546ZM14.4446 2.44434H14.9446V1.94434L14.4446 1.94434L14.4446 2.44434ZM14.4446 5.55545L14.4446 6.05545L14.9446 6.05545V5.55545H14.4446ZM1.55566 5.55546L1.05566 5.55545L1.05566 6.05546L1.55566 6.05546L1.55566 5.55546ZM1.5557 2.44436L1.5557 1.94436L1.05571 1.94436L1.0557 2.44435L1.5557 2.44436ZM13.1112 5.55546H12.6112V13.5555H13.1112H13.6112V5.55546H13.1112ZM2.889 13.5555H3.389L3.38901 5.55546L2.88901 5.55546L2.38901 5.55546L2.389 13.5555H2.889ZM14.4446 2.44434H13.9446V5.55545H14.4446H14.9446V2.44434H14.4446ZM1.55566 5.55546L2.05566 5.55547L2.0557 2.44436L1.5557 2.44436L1.0557 2.44435L1.05566 5.55545L1.55566 5.55546ZM6.22234 8.22213V8.72213H9.7779V8.22213V7.72213H6.22234V8.22213ZM13.1112 13.5555V13.0555H2.889V13.5555V14.0555H13.1112V13.5555ZM1.5557 2.44436L1.5557 2.94436L14.4446 2.94434L14.4446 2.44434L14.4446 1.94434L1.5557 1.94436L1.5557 2.44436ZM14.4446 5.55545L14.4446 5.05545L1.55566 5.05546L1.55566 5.55546L1.55566 6.05546L14.4446 6.05545L14.4446 5.55545Z" fill="currentColor"/>`,
   },
 }
 
+type IconName = keyof typeof icons | keyof typeof additionalIcons
+
 const spriteID = "opencode-v2-icon-sprite"
-const symbol = (name: keyof typeof icons) => `opencode-v2-icon-${name}`
+const symbol = (name: IconName) => `opencode-v2-icon-${name}`
 let spriteInserted = false
 
+function getIcon(name: IconName) {
+  const icon = icons[name as keyof typeof icons]
+  if (icon) return icon
+  const body = additionalIcons[name as keyof typeof additionalIcons]
+  return { body, viewBox: additionalIconViewBox(name as keyof typeof additionalIcons) }
+}
+
 function ensureSprite() {
   if (spriteInserted) return
   if (typeof document === "undefined") return
@@ -170,25 +202,26 @@ function ensureSprite() {
   svg.setAttribute("height", "0")
   svg.style.position = "absolute"
   svg.style.overflow = "hidden"
-  svg.innerHTML = Object.entries(icons)
-    .map(
-      ([name, icon]) =>
-        `<symbol id="${symbol(name as keyof typeof icons)}" viewBox="${icon.viewBox}">${icon.body}</symbol>`,
-    )
+  svg.innerHTML = Array.from(new Set<IconName>([...Object.keys(additionalIcons), ...Object.keys(icons)] as IconName[]))
+    .map((name) => `<symbol id="${symbol(name)}" viewBox="${getIcon(name).viewBox}">${getIcon(name).body}</symbol>`)
     .join("")
   document.body.insertBefore(svg, document.body.firstChild)
   spriteInserted = true
 }
 
 export interface IconProps extends ComponentProps<"svg"> {
-  name: keyof typeof icons | (string & {})
+  name: IconName | (string & {})
   size?: "small" | "normal" | "large"
 }
 
 export function Icon(props: IconProps) {
   const [split, rest] = splitProps(props, ["name", "size"])
-  const iconName = () => (icons[split.name as keyof typeof icons] ? (split.name as keyof typeof icons) : "plus")
-  const icon = () => icons[iconName()]
+  const iconName = (): IconName => {
+    if (icons[split.name as keyof typeof icons]) return split.name as keyof typeof icons
+    if (additionalIcons[split.name as keyof typeof additionalIcons]) return split.name as keyof typeof additionalIcons
+    return "plus"
+  }
+  const icon = () => getIcon(iconName())
   const pixelSize = split.size === "small" ? 14 : split.size === "large" ? 20 : 16
   onMount(ensureSprite)
 
@@ -196,6 +229,14 @@ export function Icon(props: IconProps) {
     <svg
       {...rest}
       data-slot="icon-svg"
+      data-directional={
+        iconName() === "arrow-left" ||
+        iconName() === "arrow-right" ||
+        iconName() === "chevron-left" ||
+        iconName() === "chevron-right"
+          ? ""
+          : undefined
+      }
       width={pixelSize}
       height={pixelSize}
       viewBox={icon().viewBox}

package/src/{v2/components/divider-v2.tsx → layout/divider/divider.tsx}

@@ -1,9 +1,9 @@
 import { type ComponentProps, splitProps } from "solid-js"
-import "./divider-v2.css"
+import "./divider.css"
 
-export interface DividerV2Props extends ComponentProps<"div"> {}
+export interface DividerProps extends ComponentProps<"div"> {}
 
-export function DividerV2(props: DividerV2Props) {
+export function Divider(props: DividerProps) {
   const [local, rest] = splitProps(props, ["class", "classList"])
   return (
     <div

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

@@ -31,6 +31,10 @@
   }
 }
 
+:dir(rtl) [data-slot="menu-v2-item-chevron"] {
+  transform: scaleX(-1);
+}
+
 [data-component="menu-v2-item"] {
   --menu-v2-fg: var(--v2-text-text-base);
   --menu-v2-fg-muted: var(--v2-text-text-faint);
@@ -47,6 +51,7 @@
 
   box-sizing: border-box;
   display: flex;
+  flex-shrink: 0;
   flex-direction: row;
   align-items: center;
   gap: 8px;
@@ -72,7 +77,7 @@
 
     font-size: 13px;
     font-weight: 440;
-    line-height: 100%;
+    line-height: var(--line-height-compact);
     letter-spacing: -0.04px;
     color: var(--menu-v2-fg);
   }
@@ -171,13 +176,129 @@
 
   font-size: 11px;
   font-weight: 530;
-  line-height: 100%;
   letter-spacing: 0.05px;
   color: var(--v2-text-text-faint);
   user-select: none;
   font-variant-numeric: tabular-nums;
 }
 
+[data-component="menu-v2-content"][data-appearance="standard"] {
+  min-width: 8rem;
+  padding: 4px;
+  overflow: hidden;
+  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
+  border-radius: var(--radius-md);
+  background: var(--surface-raised-stronger-non-alpha);
+  background-clip: padding-box;
+  box-shadow: var(--shadow-md);
+  z-index: 60;
+  animation: dropdown-menu-open 150ms ease-out;
+
+  &[data-closed] {
+    animation: dropdown-menu-close 150ms ease-out;
+  }
+
+  [data-component="menu-v2-item"] {
+    position: relative;
+    height: auto;
+    min-height: 0;
+    padding: 4px 8px;
+    border-radius: var(--radius-sm);
+    color: var(--text-strong);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    font-variant-numeric: normal;
+    -webkit-font-smoothing: auto;
+    text-rendering: auto;
+
+    [data-slot="menu-v2-item-content"] {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      letter-spacing: inherit;
+      color: inherit;
+    }
+
+    &[data-highlighted] {
+      background: var(--surface-raised-base-hover);
+    }
+
+    &[data-disabled] {
+      color: var(--text-weak);
+      opacity: 1;
+    }
+
+    &[data-checked] {
+      padding-inline-end: 28px;
+    }
+
+    &[data-checked] [data-slot="menu-v2-item-content"] {
+      font-weight: inherit;
+      color: inherit;
+    }
+
+    [data-slot="menu-v2-item-indicator"] {
+      position: absolute;
+      inset-inline-end: 8px;
+      top: 50%;
+      width: 16px;
+      height: 16px;
+      transform: translateY(-50%);
+      color: var(--icon-base);
+    }
+
+    [data-slot="menu-v2-item-chevron"] {
+      margin-inline-start: auto;
+      color: var(--icon-base);
+    }
+  }
+
+  [data-slot="menu-v2-separator"] {
+    width: calc(100% + 8px);
+    height: 1px;
+    margin: 4px -4px;
+    background: var(--border-weak-base);
+  }
+
+  [data-slot="menu-v2-group-label"] {
+    height: auto;
+    padding: 4px 8px;
+    color: var(--text-weak);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-x-small);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    font-variant-numeric: normal;
+  }
+}
+
+@keyframes dropdown-menu-open {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dropdown-menu-close {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
 @keyframes menu-v2-in {
   from {
     opacity: 0;

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

@@ -1,7 +1,17 @@
 import { DropdownMenu } from "@kobalte/core/dropdown-menu"
 import { ContextMenu } from "@kobalte/core/context-menu"
-import { Show, splitProps, type Component, type ComponentProps, type JSX, type ParentProps } from "solid-js"
-import "./menu-v2.css"
+import {
+  createContext,
+  Show,
+  splitProps,
+  useContext,
+  type Accessor,
+  type Component,
+  type ComponentProps,
+  type JSX,
+  type ParentProps,
+} from "solid-js"
+import "./menu.css"
 
 const ChevronRight: Component = () => (
   <svg
@@ -29,6 +39,18 @@ const CheckMark: Component = () => (
   </svg>
 )
 
+export type MenuAppearance = "standard" | "compact"
+
+const MenuAppearanceContext = createContext<{ appearance: Accessor<MenuAppearance> }>({
+  appearance: (): MenuAppearance => "compact",
+})
+
+function useMenuContext() {
+  const ctx = useContext(MenuAppearanceContext)
+  if (!ctx) throw new Error("Menu components must be used inside Menu or Menu.Context")
+  return ctx
+}
+
 function ItemBody(
   props: ParentProps<{
     shortcut?: JSX.Element | string
@@ -46,15 +68,21 @@ function ItemBody(
   )
 }
 
-export interface MenuV2ItemProps extends ComponentProps<typeof DropdownMenu.Item> {
+export interface MenuItemProps extends ComponentProps<typeof DropdownMenu.Item> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuV2Item(props: ParentProps<MenuV2ItemProps>) {
+function MenuItem(props: ParentProps<MenuItemProps>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
   return (
-    <DropdownMenu.Item {...r} data-component="menu-v2-item" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
+    <DropdownMenu.Item
+      {...r}
+      data-component="menu-v2-item"
+      data-appearance={ctx.appearance()}
+      classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
+    >
       <ItemBody shortcut={s.shortcut} badge={s.badge}>
         {s.children}
       </ItemBody>
@@ -62,17 +90,19 @@ function MenuV2Item(props: ParentProps<MenuV2ItemProps>) {
   )
 }
 
-export interface MenuV2CheckboxItemProps extends ComponentProps<typeof DropdownMenu.CheckboxItem> {
+export interface MenuCheckboxItemProps extends ComponentProps<typeof DropdownMenu.CheckboxItem> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuV2CheckboxItem(props: ParentProps<MenuV2CheckboxItemProps>) {
+function MenuCheckboxItem(props: ParentProps<MenuCheckboxItemProps>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
   return (
     <DropdownMenu.CheckboxItem
       {...r}
       data-component="menu-v2-item"
+      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     >
       <ItemBody
@@ -90,17 +120,19 @@ function MenuV2CheckboxItem(props: ParentProps<MenuV2CheckboxItemProps>) {
   )
 }
 
-export interface MenuV2RadioItemProps extends ComponentProps<typeof DropdownMenu.RadioItem> {
+export interface MenuRadioItemProps extends ComponentProps<typeof DropdownMenu.RadioItem> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuV2RadioItem(props: ParentProps<MenuV2RadioItemProps>) {
+function MenuRadioItem(props: ParentProps<MenuRadioItemProps>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
   return (
     <DropdownMenu.RadioItem
       {...r}
       data-component="menu-v2-item"
+      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     >
       <ItemBody
@@ -118,17 +150,19 @@ function MenuV2RadioItem(props: ParentProps<MenuV2RadioItemProps>) {
   )
 }
 
-export interface MenuV2SubTriggerProps extends ComponentProps<typeof DropdownMenu.SubTrigger> {
+export interface MenuSubTriggerProps extends ComponentProps<typeof DropdownMenu.SubTrigger> {
   shortcut?: JSX.Element | string
   badge?: JSX.Element | string
 }
 
-function MenuV2SubTrigger(props: ParentProps<MenuV2SubTriggerProps>) {
+function MenuSubTrigger(props: ParentProps<MenuSubTriggerProps>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList", "children", "shortcut", "badge"])
   return (
     <DropdownMenu.SubTrigger
       {...r}
       data-component="menu-v2-item"
+      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     >
       <ItemBody shortcut={s.shortcut} badge={s.badge} trailing={<ChevronRight />}>
@@ -138,88 +172,118 @@ function MenuV2SubTrigger(props: ParentProps<MenuV2SubTriggerProps>) {
   )
 }
 
-function MenuV2SubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
+function MenuSubContent(props: ComponentProps<typeof DropdownMenu.SubContent>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
   return (
     <DropdownMenu.SubContent
       {...r}
       data-component="menu-v2-content"
+      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     />
   )
 }
 
-function MenuV2GroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>) {
+function MenuGroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
   return (
     <DropdownMenu.GroupLabel
       {...r}
       data-slot="menu-v2-group-label"
+      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     />
   )
 }
 
-function MenuV2Separator(props: ComponentProps<typeof DropdownMenu.Separator>) {
+function MenuSeparator(props: ComponentProps<typeof DropdownMenu.Separator>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
   return (
     <DropdownMenu.Separator
       {...r}
       data-slot="menu-v2-separator"
+      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     />
   )
 }
 
-function MenuV2Content(props: ComponentProps<typeof DropdownMenu.Content>) {
+function MenuContent(props: ComponentProps<typeof DropdownMenu.Content>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
   return (
     <DropdownMenu.Content
       {...r}
       data-component="menu-v2-content"
+      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     />
   )
 }
 
-function MenuV2Root(props: ComponentProps<typeof DropdownMenu>) {
-  return <DropdownMenu {...props} />
+export interface MenuProps extends ComponentProps<typeof DropdownMenu> {
+  appearance?: MenuAppearance
 }
 
-function MenuV2ContextRoot(props: ComponentProps<typeof ContextMenu>) {
-  return <ContextMenu {...props} />
+function MenuRoot(props: MenuProps) {
+  const [local, rest] = splitProps(props, ["appearance", "children"])
+  const appearance = () => local.appearance ?? "compact"
+  return (
+    <MenuAppearanceContext.Provider value={{ appearance }}>
+      <DropdownMenu {...rest}>{local.children}</DropdownMenu>
+    </MenuAppearanceContext.Provider>
+  )
+}
+
+export interface MenuContextProps extends ComponentProps<typeof ContextMenu> {
+  appearance?: MenuAppearance
+}
+
+function MenuContextRoot(props: MenuContextProps) {
+  const [local, rest] = splitProps(props, ["appearance", "children"])
+  const appearance = () => local.appearance ?? "compact"
+  return (
+    <MenuAppearanceContext.Provider value={{ appearance }}>
+      <ContextMenu {...rest}>{local.children}</ContextMenu>
+    </MenuAppearanceContext.Provider>
+  )
 }
 
-function MenuV2ContextContent(props: ComponentProps<typeof ContextMenu.Content>) {
+function MenuContextContent(props: ComponentProps<typeof ContextMenu.Content>) {
+  const ctx = useMenuContext()
   const [s, r] = splitProps(props, ["class", "classList"])
   return (
     <ContextMenu.Content
       {...r}
       data-component="menu-v2-content"
+      data-appearance={ctx.appearance()}
       classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}
     />
   )
 }
 
-const MenuV2Context = Object.assign(MenuV2ContextRoot, {
+const MenuContext = Object.assign(MenuContextRoot, {
   Trigger: ContextMenu.Trigger,
   Portal: ContextMenu.Portal,
-  Content: MenuV2ContextContent,
+  Content: MenuContextContent,
 })
 
-export const MenuV2 = Object.assign(MenuV2Root, {
+export const Menu = Object.assign(MenuRoot, {
   Trigger: DropdownMenu.Trigger,
   Portal: DropdownMenu.Portal,
-  Content: MenuV2Content,
-  Item: MenuV2Item,
-  CheckboxItem: MenuV2CheckboxItem,
+  Content: MenuContent,
+  Item: MenuItem,
+  CheckboxItem: MenuCheckboxItem,
   RadioGroup: DropdownMenu.RadioGroup,
-  RadioItem: MenuV2RadioItem,
+  RadioItem: MenuRadioItem,
   Group: DropdownMenu.Group,
-  GroupLabel: MenuV2GroupLabel,
-  Separator: MenuV2Separator,
+  GroupLabel: MenuGroupLabel,
+  Separator: MenuSeparator,
   Sub: DropdownMenu.Sub,
-  SubTrigger: MenuV2SubTrigger,
-  SubContent: MenuV2SubContent,
-  Context: MenuV2Context,
+  SubTrigger: MenuSubTrigger,
+  SubContent: MenuSubContent,
+  Context: MenuContext,
 })

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

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

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