@opencode/ui 2.0.24 → 2.0.25

package/dist/context/marked-parser.d.ts

@@ -1 +1,3 @@
+import type { MarkedExtension } from "marked";
 export declare function createMarkdownParser(highlight: (code: string, language: string) => string | Promise<string>): import("marked").Marked<string, string>;
+export declare const markdownMath: MarkedExtension;

package/dist/icons/catalog.d.ts

@@ -184,6 +184,38 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "outline-arrow-left": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-arrow-right": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-arrow-up-right": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-rotate-clockwise": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-globe": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-globe-plus": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-cookie": {
+        viewBox: string;
+        body: string;
+    };
+    "outline-browser-annotate": {
+        viewBox: string;
+        body: string;
+    };
     "arrow-up-right": {
         viewBox: string;
         body: string;

package/dist/navigation/segmented-control/segmented-control.d.ts

@@ -1,7 +1,20 @@
-import { type JSX, type ParentProps } from "solid-js";
-import type { ComponentProps } from "solid-js";
+import { type Transition } from "@kitlangton/solid-motion";
+import { type ComponentProps, type JSX, type ParentProps } from "solid-js";
 import "./segmented-control.css";
 type OnChange = (value: string | null) => void;
+export declare const SEGMENTED_CONTROL_SPRING: Transition;
+export type OffsetElement = {
+    offsetLeft: number;
+    offsetWidth: number;
+    offsetParent: Element | OffsetElement | null;
+    getBoundingClientRect: () => {
+        left: number;
+    };
+};
+export declare function measureOffset(root: OffsetElement, button: OffsetElement): {
+    x: number;
+    width: number;
+};
 export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> & ParentProps<{
     /** Selected value when controlled (including `null` when empty). Omit key for uncontrolled. */
     value?: string | null;
@@ -11,6 +24,8 @@ export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> & Pa
     /** When true, clicking the active segment clears selection (`onChange(null)`). Default false. */
     allowDeselect?: boolean;
     disabled?: boolean;
+    /** Motion transition for the active indicator pill. */
+    transition?: Transition;
 }>;
 export declare function SegmentedControl(props: SegmentedControlProps): JSX.Element;
 export type SegmentedControlItemProps = Omit<ComponentProps<"button">, "type" | "children"> & ParentProps<{
@@ -18,4 +33,8 @@ export type SegmentedControlItemProps = Omit<ComponentProps<"button">, "type" |
     children: JSX.Element;
 }>;
 export declare function SegmentedControlItem(props: SegmentedControlItemProps): JSX.Element;
+export declare const SegmentedControlV2: typeof SegmentedControl;
+export declare const SegmentedControlItemV2: typeof SegmentedControlItem;
+export type SegmentedControlV2Props = SegmentedControlProps;
+export type SegmentedControlItemV2Props = SegmentedControlItemProps;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode/ui",
-  "version": "2.0.24",
+  "version": "2.0.25",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -244,6 +244,7 @@
     "vite-plugin-solid": "2.11.10"
   },
   "dependencies": {
+    "@kitlangton/solid-motion": "0.2.2",
     "@kobalte/core": "0.13.13",
     "@pierre/diffs": "1.5.1",
     "@solid-primitives/event-listener": "2.4.6",

package/src/actions/button/button.css

@@ -1,12 +1,8 @@
 @import "../submit.css";
 
-* {
+[data-component="button-v2"] {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-rendering: geometricPrecision;
-}
-
-[data-component="button-v2"] {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -26,6 +22,10 @@
   outline: none;
 }
 
+[data-component="button-v2"] > * {
+  pointer-events: none;
+}
+
 [data-component="button-v2"]:focus {
   outline: none;
 }
@@ -240,10 +240,12 @@
   color: var(--v2-icon-icon-muted);
 }
 
-[data-component="button-v2"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"]):not(:disabled):not(
-    [data-expanded]
-  ) {
-  background-color: var(--v2-overlay-simple-overlay-hover);
+@media (hover: hover) {
+  [data-component="button-v2"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"]):not(:disabled):not(
+      [data-expanded]
+    ) {
+    background-color: var(--v2-overlay-simple-overlay-hover);
+  }
 }
 
 [data-component="button-v2"][data-variant="ghost-muted"]:is(:active, [data-state="pressed"]):not(:disabled) {

package/src/actions/icon-button/icon-button.css

@@ -1,12 +1,8 @@
 @import "../submit.css";
 
-* {
+[data-component="icon-button-v2"] {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-rendering: geometricPrecision;
-}
-
-[data-component="icon-button-v2"] {
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/src/actions/submit.css

@@ -33,18 +33,20 @@
   color: var(--v2-icon-icon-inverse);
 }
 
-:is(
-    [data-component="button-v2"][data-variant="submit"],
-    [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
-  ):is(:hover, [data-state="hover"]):not(:disabled) {
-  background-image:
-    linear-gradient(90deg, var(--submit-hover) 0%, var(--submit-hover) 100%),
-    linear-gradient(180deg, var(--submit-highlight) 0%, var(--v2-alpha-light-0) 100%),
-    linear-gradient(
-      90deg,
-      var(--v2-background-bg-icon-button-contrast) 0%,
-      var(--v2-background-bg-icon-button-contrast) 100%
-    );
+@media (hover: hover) {
+  :is(
+      [data-component="button-v2"][data-variant="submit"],
+      [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
+    ):is(:hover, [data-state="hover"]):not(:disabled) {
+    background-image:
+      linear-gradient(90deg, var(--submit-hover) 0%, var(--submit-hover) 100%),
+      linear-gradient(180deg, var(--submit-highlight) 0%, var(--v2-alpha-light-0) 100%),
+      linear-gradient(
+        90deg,
+        var(--v2-background-bg-icon-button-contrast) 0%,
+        var(--v2-background-bg-icon-button-contrast) 100%
+      );
+  }
 }
 
 :is(

package/src/context/marked-base.tsx

@@ -16,7 +16,8 @@ let smallParser: Marked | undefined
 
 export function parseSmallMarkdown(text: string) {
   // Any possible KaTeX delimiter stays on the worker, including escaped ones.
-  if (text.length > 1024 || text.includes("\\(") || text.includes("$$")) return
+  // Dollar math needs a pair, so a lone price such as `$5` can stay on this path.
+  if (text.length > 1024 || text.includes("\\(") || text.indexOf("$") !== text.lastIndexOf("$")) return
 
   // Ordinary prose does not need the block/inline lexer's cold regular expressions.
   // Keep every possible Markdown construct, autolink, and hard break on that lexer.

package/src/context/marked-parser.tsx

@@ -4,17 +4,56 @@ import markedShiki from "marked-shiki"
 import { createMarkdownBase } from "./marked-base"
 
 export function createMarkdownParser(highlight: (code: string, language: string) => string | Promise<string>) {
-  return createMarkdownBase().use(katexExtension, markedShiki({ highlight }))
+  return createMarkdownBase().use(markdownMath, markedShiki({ highlight }))
 }
 
-const inlineMathRegex = /^\\\(((?:\\.|[^\\\n])*?)\\\)/
+// `$$...$$` renders as display math anywhere in a line.
+// `$...$` follows Pandoc's boundaries so prices and shell variables stay text: the opening `$` needs a non-space
+// after it, the closing `$` needs a non-space before it and no letter, digit, or underscore after it.
+// Neither form spans a newline, and `$...$` cannot contain an unescaped `$`, so a failed `$...$` attempt stops at
+// the next `$` and a failed `$$...$$` attempt stops at the end of the line.
+const inlineDollarMathRegex =
+  /\$\$(?!\$)((?:\\.|[^\\\n])*?(?:\\.|[^\\\n$]))\$\$|\$(?=[^\s$])((?:\\.|[^\\\n$])*?(?:\\\S|[^\s\\$]))\$(?!\w)/y
 
-const blockMathRegex = /^\$\$\n([\s\S]+?)\n\$\$(?:\n|$)/
+const inlineParenMathRegex = /^\\\(((?:\\.|[^\\\n])*?)\\\)/
 
-const katexExtension: MarkedExtension = {
+const blockMathRegex = /^(\${1,2})\n((?:\\[^]|[^\\])+?)\n\1(?:\n|$)/
+
+function renderMath(token: Tokens.Generic) {
+  return katex.renderToString(token.text, { throwOnError: false, displayMode: token.displayMode })
+}
+
+export const markdownMath: MarkedExtension = {
   extensions: [
     {
-      name: "inlineKatex",
+      name: "inlineDollarKatex",
+      level: "inline",
+      // marked calls `start` again for every text token with the rest of the paragraph, so it must not try the
+      // regex at each `$`; a `$` that fails the tokenizer just stays in the merged text.
+      start(src) {
+        const index = src.indexOf("$")
+
+        if (index === -1) return
+
+        return index
+      },
+      tokenizer(src) {
+        inlineDollarMathRegex.lastIndex = 0
+        const match = inlineDollarMathRegex.exec(src)
+
+        if (!match) return
+
+        return {
+          type: "inlineDollarKatex",
+          raw: match[0],
+          text: (match[1] ?? match[2]).trim(),
+          displayMode: match[1] !== undefined,
+        }
+      },
+      renderer: renderMath,
+    },
+    {
+      name: "inlineParenKatex",
       level: "inline",
       start(src) {
         const index = src.indexOf("\\(")
@@ -24,18 +63,18 @@ const katexExtension: MarkedExtension = {
         return index
       },
       tokenizer(src) {
-        const match = src.match(inlineMathRegex)
+        const match = src.match(inlineParenMathRegex)
 
         if (!match) return
 
         return {
-          type: "inlineKatex",
+          type: "inlineParenKatex",
           raw: match[0],
           text: match[1].trim(),
           displayMode: false,
         }
       },
-      renderer: renderKatexToken,
+      renderer: renderMath,
     },
     {
       name: "blockKatex",
@@ -48,18 +87,11 @@ const katexExtension: MarkedExtension = {
         return {
           type: "blockKatex",
           raw: match[0],
-          text: match[1].trim(),
-          displayMode: true,
+          text: match[2].trim(),
+          displayMode: match[1].length === 2,
         }
       },
-      renderer: renderKatexToken,
+      renderer: (token) => renderMath(token) + "\n",
     },
   ],
 }
-
-function renderKatexToken(token: Tokens.Generic) {
-  return katex.renderToString(typeof token.text === "string" ? token.text : "", {
-    displayMode: token.displayMode === true,
-    throwOnError: false,
-  })
-}

package/src/icons/catalog.ts

@@ -186,6 +186,38 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M4.14908 11.0081H1.76282V1.51758H9.1038V2.55588M14.2225 4.99681H6.75397V14.4873H14.2225V4.99681Z" stroke="currentColor"/>`,
   },
+  "outline-arrow-left": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M2.44442 7.99999H13.5555M6.22221 4.22222L2.44442 7.99999L6.22221 11.7778" stroke="currentColor"/>`,
+  },
+  "outline-arrow-right": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M13.5555 7.99999H2.4444M9.77773 11.7778L13.5555 7.99999L9.77773 4.22222" stroke="currentColor"/>`,
+  },
+  "outline-arrow-up-right": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M12.5 3.5L3.5 12.5M12.5 9.62L12.5 3.5L6.38 3.5" stroke="currentColor"/>`,
+  },
+  "outline-rotate-clockwise": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M14.1992 8C14.1992 9.18669 13.8473 10.3467 13.188 11.3334C12.5288 12.3201 11.5917 13.0892 10.4953 13.5433C9.39897 13.9974 8.19257 14.1162 7.02868 13.8847C5.86479 13.6532 4.7957 13.0818 3.95658 12.2426C3.11747 11.4035 2.54602 10.3344 2.31451 9.17054C2.083 8.00666 2.20182 6.80026 2.65594 5.7039C3.11007 4.60754 3.87911 3.67047 4.8658 3.01118C5.85249 2.35189 7.01253 2 8.19922 2C9.87922 2 11.4859 2.66667 12.6926 3.82667L14.1992 5.33333M10.866 5.33333L14.1992 5.33333L14.1993 2" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/>`,
+  },
+  "outline-globe": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M8.00001 14.4445C9.47277 14.4445 10.6667 11.5592 10.6667 8.00001C10.6667 4.44085 9.47277 1.55557 8.00001 1.55557M8.00001 14.4445C6.52725 14.4445 5.33335 11.5592 5.33335 8.00001C5.33335 4.44085 6.52725 1.55557 8.00001 1.55557M8.00001 14.4445C11.5592 14.4445 14.4444 11.5592 14.4444 8C14.4444 4.44083 11.5592 1.55557 8.00001 1.55557M8.00001 14.4445C4.44085 14.4445 1.55556 11.5592 1.55556 8C1.55556 4.44083 4.44085 1.55557 8.00001 1.55557M1.87203 6.00001H14.128M2.03555 10.4445H13.9644" stroke="currentColor"/>`,
+  },
+  "outline-globe-plus": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M7 12.6667C5.71133 12.6667 4.66667 10.1296 4.66667 7C4.66667 3.87039 5.71133 1.33333 7 1.33333C8.2426 1.33333 9.25833 3.69221 9.32933 6.66667" stroke="currentColor" stroke-miterlimit="10"/><path d="M12.6667 6.66667H1.33333" stroke="currentColor"/><path d="M12.6667 7.72825V7C12.6667 3.87039 10.1296 1.33333 7 1.33333C3.8704 1.33333 1.33333 3.87039 1.33333 7C1.33333 10.1296 3.8704 12.6667 7 12.6667H7.58694" stroke="currentColor" stroke-miterlimit="10"/><path d="M9.5 11.5H13.5M11.5 9.5V13.5" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>`,
+  },
+  "outline-cookie": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M14 8.5A6 6 0 1 1 7.5 2a2 2 0 0 0 2.5 2.5 2 2 0 0 0 2.5 2.5c.4.6.9 1.1 1.5 1.5Z" stroke="currentColor" stroke-linejoin="round"/><path d="M5.5 6.5h.01M5.5 10h.01M8.5 9h.01M10.5 11.5h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>`,
+  },
+  "outline-browser-annotate": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M10.6667 2H14V5.33333M2 5.33333V2H5.33333M2 10.6667V14H5.33333" stroke="currentColor" stroke-linecap="square"/><path d="M11.8571 11.8572L14 14M6.50008 6.50033L14.0001 9.00033L9.00008 14.0003L6.50008 6.50033Z" stroke="currentColor" stroke-linecap="square"/>`,
+  },
   "arrow-up-right": {
     viewBox: "0 0 16 16",
     body: `<path d="M11 9.56V5H6.44M11 5L5 11" stroke="currentColor"/>`,

package/src/icons/icon/icon.tsx

@@ -63,6 +63,8 @@ export function Icon(props: IconProps) {
       data-directional={
         iconName() === "arrow-left" ||
         iconName() === "arrow-right" ||
+        iconName() === "outline-arrow-left" ||
+        iconName() === "outline-arrow-right" ||
         iconName() === "chevron-left" ||
         iconName() === "chevron-right"
           ? ""

package/src/navigation/segmented-control/segmented-control.css

@@ -3,6 +3,8 @@
 }
 
 [data-slot="segmented-control-v2"] {
+  position: relative;
+  isolation: isolate;
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
@@ -16,9 +18,28 @@
   border-radius: 6px;
   box-shadow: 0 0 0 0.5px var(--v2-border-border-base);
   flex: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+[data-slot="segmented-control-v2-indicator"] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 6px;
+  background: var(--v2-background-bg-base);
+  box-shadow: 0 0 0 0.5px var(--v2-border-border-strong);
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+  z-index: 0;
+  will-change: transform, width;
 }
 
 [data-slot="segmented-control-v2-item"] {
+  position: relative;
+  z-index: 1;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -34,20 +55,26 @@
   background: transparent;
   box-shadow: none;
   cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
   font-style: normal;
   font-weight: 440;
   font-size: 13px;
-  line-height: var(--line-height-compact);
+  line-height: 100%;
   letter-spacing: -0.04px;
   font-variant-numeric: tabular-nums;
   font-variation-settings: "slnt" 0;
   color: var(--v2-text-text-muted);
   transition:
+    color 0.15s ease,
     background-color 0.12s ease,
-    color 0.12s ease,
     box-shadow 0.12s ease;
 }
 
+[data-slot="segmented-control-v2-item"]:where(:hover:not(:disabled):not([data-pressed])) {
+  color: var(--v2-text-text-base);
+}
+
 [data-slot="segmented-control-v2-item"]:where(:disabled) {
   cursor: not-allowed;
   opacity: 0.45;
@@ -60,12 +87,15 @@
 }
 
 [data-slot="segmented-control-v2-item"]:where([data-pressed]) {
-  background: var(--v2-background-bg-base);
   color: var(--v2-text-text-base);
-  box-shadow: 0 0 0 0.5px var(--v2-border-border-strong);
   z-index: 1;
 }
 
+[data-slot="segmented-control-v2"]:not([data-ready]) [data-slot="segmented-control-v2-item"]:where([data-pressed]) {
+  background: var(--v2-background-bg-base);
+  box-shadow: 0 0 0 0.5px var(--v2-border-border-strong);
+}
+
 [data-slot="segmented-control-v2-item-label"] {
   display: flex;
   flex-direction: row;
@@ -77,4 +107,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
 }

package/src/navigation/segmented-control/segmented-control.tsx

@@ -1,25 +1,37 @@
+import { animate, motion, useMotionValue, type Transition } from "@kitlangton/solid-motion"
 import {
   createContext,
+  createEffect,
   createMemo,
   createSignal,
   mergeProps,
+  onCleanup,
+  onMount,
+  Show,
   splitProps,
   useContext,
   type Accessor,
+  type ComponentProps,
   type JSX,
   type ParentProps,
 } from "solid-js"
-import type { ComponentProps } from "solid-js"
 import "./segmented-control.css"
 
 type OnChange = (value: string | null) => void
 
+export const SEGMENTED_CONTROL_SPRING: Transition = {
+  type: "spring",
+  visualDuration: 0.15,
+  bounce: 0,
+}
+
 type SegmentedControlContextValue = {
   selected: Accessor<string | null>
   groupDisabled: Accessor<boolean>
   select: (value: string) => void
   clearIfAllowed: (value: string) => void
   focusNext: (from: HTMLButtonElement, direction: 1 | -1) => void
+  registerItem: (value: string, el: HTMLButtonElement) => () => void
 }
 
 const SegmentedControlContext = createContext<SegmentedControlContextValue>()
@@ -32,6 +44,33 @@ function useSegmentedControlContext() {
   return ctx
 }
 
+export type OffsetElement = {
+  offsetLeft: number
+  offsetWidth: number
+  offsetParent: Element | OffsetElement | null
+  getBoundingClientRect: () => { left: number }
+}
+
+function isOffsetElement(node: Element | OffsetElement | null): node is OffsetElement {
+  return node !== null && "offsetLeft" in node && "offsetParent" in node
+}
+
+export function measureOffset(root: OffsetElement, button: OffsetElement) {
+  let offset = 0
+  let node: OffsetElement | null = button
+
+  while (node && node !== root) {
+    offset += node.offsetLeft
+    node = isOffsetElement(node.offsetParent) ? node.offsetParent : null
+  }
+
+  if (node !== root) {
+    offset = button.getBoundingClientRect().left - root.getBoundingClientRect().left
+  }
+
+  return { x: offset, width: button.offsetWidth }
+}
+
 export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> &
   ParentProps<{
     /** Selected value when controlled (including `null` when empty). Omit key for uncontrolled. */
@@ -42,10 +81,12 @@ export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> &
     /** When true, clicking the active segment clears selection (`onChange(null)`). Default false. */
     allowDeselect?: boolean
     disabled?: boolean
+    /** Motion transition for the active indicator pill. */
+    transition?: Transition
   }>
 
 export function SegmentedControl(props: SegmentedControlProps) {
-  const isControlled = createMemo(() => Object.hasOwn(props as object, "value"))
+  const isControlled = createMemo(() => Object.hasOwn(props, "value"))
   const merged = mergeProps({ allowDeselect: false, disabled: false }, props)
 
   const [local, rest] = splitProps(merged, [
@@ -57,13 +98,88 @@ export function SegmentedControl(props: SegmentedControlProps) {
     "onChange",
     "allowDeselect",
     "disabled",
+    "transition",
     "ref",
   ])
 
   const [internal, setInternal] = createSignal<string | null>(local.defaultValue ?? null)
+  const [layoutVersion, setLayoutVersion] = createSignal(0)
+  const [ready, setReady] = createSignal(false)
 
   const selected = createMemo(() => (isControlled() ? (local.value ?? null) : internal()))
 
+  const reducedMotion = () => globalThis.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches === true
+
+  const x = useMotionValue(0)
+  const width = useMotionValue(0)
+
+  let rootEl: HTMLDivElement | undefined
+  let observer: ResizeObserver | undefined
+  const items = new Map<string, HTMLButtonElement>()
+  let target = { x: 0, width: 0 }
+  let lastSelected: string | null = null
+
+  const syncIndicator = (shouldAnimate: boolean) => {
+    const current = selected()
+    const button = current !== null ? items.get(current) : undefined
+
+    if (!rootEl || !button) {
+      setReady(false)
+
+      return
+    }
+
+    const next = measureOffset(rootEl, button)
+
+    if (next.width === 0) return
+
+    target = next
+
+    if (!ready() || !shouldAnimate || reducedMotion()) {
+      x.jump(next.x)
+      width.jump(next.width)
+      setReady(true)
+
+      return
+    }
+
+    const transition = local.transition ?? SEGMENTED_CONTROL_SPRING
+    animate(x, next.x, transition)
+    animate(width, next.width, transition)
+  }
+
+  onMount(() => {
+    if (!("ResizeObserver" in globalThis)) return
+
+    observer = new ResizeObserver(() => {
+      const current = selected()
+      const button = current !== null ? items.get(current) : undefined
+
+      if (!rootEl || !button) return
+
+      const next = measureOffset(rootEl, button)
+
+      if (next.width === 0) return
+
+      if (ready() && next.x === target.x && next.width === target.width) return
+
+      syncIndicator(false)
+    })
+
+    if (rootEl) observer.observe(rootEl)
+
+    items.forEach((button) => observer?.observe(button))
+    onCleanup(() => observer?.disconnect())
+  })
+
+  createEffect(() => {
+    const current = selected()
+    layoutVersion()
+    const shouldAnimate = ready() && lastSelected !== null && current !== null && current !== lastSelected
+    lastSelected = current
+    syncIndicator(shouldAnimate)
+  })
+
   const setSelected = (next: string | null) => {
     if (!isControlled()) setInternal(next)
     local.onChange?.(next)
@@ -92,19 +208,32 @@ export function SegmentedControl(props: SegmentedControlProps) {
     next?.focus()
   }
 
+  const registerItem = (value: string, el: HTMLButtonElement) => {
+    items.set(value, el)
+    observer?.observe(el)
+    setLayoutVersion((v) => v + 1)
+
+    return () => {
+      if (items.get(value) === el) items.delete(value)
+      observer?.unobserve(el)
+      setLayoutVersion((v) => v + 1)
+    }
+  }
+
   const ctx: SegmentedControlContextValue = {
     selected,
     groupDisabled: () => !!local.disabled,
     select,
     clearIfAllowed,
     focusNext,
+    registerItem,
   }
 
-  const assignRef = (el: HTMLDivElement | undefined) => {
+  const assignRef = (el: HTMLDivElement) => {
+    rootEl = el
     const r = local.ref
 
-    if (typeof r === "function") (r as (el: HTMLDivElement | undefined) => void)(el)
-    else if (r != null && typeof r === "object" && "value" in r) (r as { value: HTMLDivElement | undefined }).value = el
+    if (r instanceof Function) r(el)
   }
 
   return (
@@ -115,11 +244,15 @@ export function SegmentedControl(props: SegmentedControlProps) {
         role="group"
         data-component="segmented-control-v2"
         data-slot="segmented-control-v2"
+        data-ready={ready() ? "" : undefined}
         classList={{
           ...local.classList,
           [local.class ?? ""]: !!local.class,
         }}
       >
+        <Show when={ready() && selected() !== null}>
+          <motion.span data-slot="segmented-control-v2-indicator" aria-hidden="true" style={{ x, width }} />
+        </Show>
         {local.children}
       </div>
     </SegmentedControlContext.Provider>
@@ -134,9 +267,17 @@ export type SegmentedControlItemProps = Omit<ComponentProps<"button">, "type" |
 
 function invokeButtonHandler<E extends Event>(
   handler: JSX.EventHandlerUnion<HTMLButtonElement, E> | undefined,
-  e: E & { currentTarget: HTMLButtonElement },
+  e: Parameters<JSX.EventHandler<HTMLButtonElement, E>>[0],
 ) {
-  if (typeof handler === "function") (handler as (ev: typeof e) => void)(e)
+  if (handler instanceof Function) {
+    handler(e)
+
+    return
+  }
+
+  if (Array.isArray(handler)) {
+    handler[0](handler[1], e)
+  }
 }
 
 export function SegmentedControlItem(props: SegmentedControlItemProps) {
@@ -150,10 +291,18 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
     "disabled",
     "onClick",
     "onKeyDown",
+    "ref",
   ])
 
   const ctx = useSegmentedControlContext()
 
+  let buttonEl: HTMLButtonElement | undefined
+  createEffect(() => {
+    if (!buttonEl) return
+    const cleanup = ctx.registerItem(local.value, buttonEl)
+    onCleanup(cleanup)
+  })
+
   const pressed = createMemo(() => ctx.selected() === local.value)
   const disabled = createMemo(() => ctx.groupDisabled() || !!local.disabled)
 
@@ -162,27 +311,38 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
 
     if (e.defaultPrevented || disabled()) return
 
-    if (pressed()) ctx.clearIfAllowed(local.value)
-    else ctx.select(local.value)
+    if (pressed()) {
+      ctx.clearIfAllowed(local.value)
+
+      return
+    }
+
+    ctx.select(local.value)
   }
 
   const onKeyDown: JSX.EventHandlerUnion<HTMLButtonElement, KeyboardEvent> = (e) => {
     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, horizontal)
-    } else if (e.key === "ArrowLeft") {
+
+      return
+    }
+
+    if (e.key === "ArrowLeft") {
       e.preventDefault()
-      ctx.focusNext(t, -horizontal as 1 | -1)
+      ctx.focusNext(t, horizontal === 1 ? -1 : 1)
+
+      return
     }
 
-    // accessibility stuff
-    else if (e.key === "Home") {
+    if (e.key === "Home") {
       e.preventDefault()
       const root = t.closest(`[data-slot="segmented-control-v2"]`)
 
@@ -191,7 +351,11 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
       )
 
       first?.focus()
-    } else if (e.key === "End") {
+
+      return
+    }
+
+    if (e.key === "End") {
       e.preventDefault()
       const root = t.closest(`[data-slot="segmented-control-v2"]`)
 
@@ -204,9 +368,17 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
     }
   }
 
+  const assignRef = (el: HTMLButtonElement) => {
+    buttonEl = el
+    const r = local.ref
+
+    if (r instanceof Function) r(el)
+  }
+
   return (
     <button
       {...rest}
+      ref={assignRef}
       type="button"
       data-slot="segmented-control-v2-item"
       data-pressed={pressed() ? "" : undefined}
@@ -223,3 +395,11 @@ export function SegmentedControlItem(props: SegmentedControlItemProps) {
     </button>
   )
 }
+
+export const SegmentedControlV2 = SegmentedControl
+
+export const SegmentedControlItemV2 = SegmentedControlItem
+
+export type SegmentedControlV2Props = SegmentedControlProps
+
+export type SegmentedControlItemV2Props = SegmentedControlItemProps

package/src/navigation/tabs/tabs-current.css

@@ -1,10 +1,6 @@
-* {
+[data-component="tabs-v2"] {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-rendering: geometricPrecision;
-}
-
-[data-component="tabs-v2"] {
   width: 100%;
   height: 100%;
   display: flex;