chore: generate

packages/ui/src/v2/components/accordion-v2.css

@@ -15,7 +15,7 @@
   box-shadow: 0 0 0 0.5px var(--accordion-v2-border);
   overflow: hidden;
 
-  font-family: var(--font-family-sans), 'Inter', system-ui, sans-serif;
+  font-family: var(--font-family-sans), "Inter", system-ui, sans-serif;
   color: var(--accordion-v2-fg);
 
   -webkit-font-smoothing: antialiased;

packages/ui/src/v2/components/accordion-v2.stories.tsx

@@ -161,7 +161,9 @@ export const NoChevron = {
           <AccordionV2.Header>
             <AccordionV2.Trigger hideChevron>Trigger without chevron</AccordionV2.Trigger>
           </AccordionV2.Header>
-          <AccordionV2.Content>Pass <code>hideChevron</code> on the trigger.</AccordionV2.Content>
+          <AccordionV2.Content>
+            Pass <code>hideChevron</code> on the trigger.
+          </AccordionV2.Content>
         </AccordionV2.Item>
         <AccordionV2.Item value="y">
           <AccordionV2.Header>

packages/ui/src/v2/components/accordion-v2.tsx

@@ -26,13 +26,7 @@ export interface AccordionV2ContentProps extends ComponentProps<typeof Kobalte.C
 
 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 }}
-    />
-  )
+  return <Kobalte {...r} data-component="accordion-v2" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }} />
 }
 
 function AccordionV2Item(props: ParentProps<AccordionV2ItemProps>) {
@@ -49,11 +43,7 @@ function AccordionV2Item(props: ParentProps<AccordionV2ItemProps>) {
 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 }}
-    >
+    <Kobalte.Header {...r} data-slot="accordion-v2-header" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
       {s.children}
     </Kobalte.Header>
   )

packages/ui/src/v2/components/basic-tool-v2.stories.tsx

@@ -91,7 +91,9 @@ export const NoChildren = {
 export const CustomTrigger = {
   render: () => (
     <BasicToolV2
-      trigger={<span style={{ color: "#161616", "font-size": "13px", "font-weight": "440" }}>Custom trigger content</span>}
+      trigger={
+        <span style={{ color: "#161616", "font-size": "13px", "font-weight": "440" }}>Custom trigger content</span>
+      }
     >
       Expandable detail for custom trigger.
     </BasicToolV2>

packages/ui/src/v2/components/basic-tool-v2.tsx

@@ -1,12 +1,5 @@
 import { Collapsible } from "@kobalte/core/collapsible"
-import {
-  type ComponentProps,
-  type JSX,
-  For,
-  Show,
-  createMemo,
-  splitProps,
-} from "solid-js"
+import { type ComponentProps, type JSX, For, Show, createMemo, splitProps } from "solid-js"
 import { DiffChanges } from "./diff-changes-v2"
 import { TextShimmerV2 } from "./text-shimmer-v2"
 import "./basic-tool-v2.css"
@@ -39,10 +32,7 @@ export interface BasicToolV2TriggerTitle {
 }
 
 const isTriggerTitle = (val: unknown): val is BasicToolV2TriggerTitle =>
-  typeof val === "object" &&
-  val !== null &&
-  "title" in val &&
-  (typeof Node === "undefined" || !(val instanceof Node))
+  typeof val === "object" && val !== null && "title" in val && (typeof Node === "undefined" || !(val instanceof Node))
 
 export interface BasicToolV2Props extends Omit<ComponentProps<"div">, "children" | "title"> {
   trigger: BasicToolV2TriggerTitle | JSX.Element
@@ -95,23 +85,18 @@ export function BasicToolV2(props: BasicToolV2Props) {
         [local.class ?? ""]: !!local.class,
       }}
     >
-      <Collapsible.Trigger
-        as="div"
-        role="button"
-        data-slot="basic-tool-v2-trigger"
-      >
+      <Collapsible.Trigger as="div" role="button" data-slot="basic-tool-v2-trigger">
         <div data-slot="basic-tool-v2-labels">
-          <Show
-            when={isTriggerTitle(local.trigger) && local.trigger}
-            fallback={local.trigger as JSX.Element}
-          >
+          <Show when={isTriggerTitle(local.trigger) && local.trigger} fallback={local.trigger as JSX.Element}>
             {(title) => (
               <>
                 <span data-slot="basic-tool-v2-title">
                   <TextShimmerV2 text={title().title} active={pending()} />
                 </span>
                 <Show when={!pending() && title().subtitle}>
-                  <span data-slot="basic-tool-v2-sep" aria-hidden="true">·</span>
+                  <span data-slot="basic-tool-v2-sep" aria-hidden="true">
+                    ·
+                  </span>
                   <span
                     data-slot="basic-tool-v2-subtitle"
                     style={local.onSubtitleClick ? { cursor: "pointer" } : undefined}
@@ -126,20 +111,14 @@ export function BasicToolV2(props: BasicToolV2Props) {
                   </span>
                 </Show>
                 <Show when={!pending() && title().args?.length}>
-                  <For each={title().args}>
-                    {(arg) => (
-                      <span data-slot="basic-tool-v2-arg">{arg}</span>
-                    )}
-                  </For>
+                  <For each={title().args}>{(arg) => <span data-slot="basic-tool-v2-arg">{arg}</span>}</For>
                 </Show>
                 <Show when={!pending() && title().changes}>
                   <span data-slot="basic-tool-v2-diff">
                     <DiffChanges changes={title().changes!} />
                   </span>
                 </Show>
-                <Show when={!pending() && title().action}>
-                  {(action) => action()}
-                </Show>
+                <Show when={!pending() && title().action}>{(action) => action()}</Show>
               </>
             )}
           </Show>

packages/ui/src/v2/components/button-v2.css

@@ -102,14 +102,22 @@
 
 [data-component="button-v2"][data-variant="contrast"]:is(:hover, [data-state="hover"]):not(:disabled) {
   background-image:
-    linear-gradient(90deg, var(--overlay-simple-overlay-contrast-hover) 0%, var(--overlay-simple-overlay-contrast-hover) 100%),
+    linear-gradient(
+      90deg,
+      var(--overlay-simple-overlay-contrast-hover) 0%,
+      var(--overlay-simple-overlay-contrast-hover) 100%
+    ),
     linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
     linear-gradient(90deg, var(--background-bg-contrast) 0%, var(--background-bg-contrast) 100%);
 }
 
 [data-component="button-v2"][data-variant="contrast"]:is(:active, [data-state="pressed"]):not(:disabled) {
   background-image:
-    linear-gradient(90deg, var(--overlay-simple-overlay-contrast-pressed) 0%, var(--overlay-simple-overlay-contrast-pressed) 100%),
+    linear-gradient(
+      90deg,
+      var(--overlay-simple-overlay-contrast-pressed) 0%,
+      var(--overlay-simple-overlay-contrast-pressed) 100%
+    ),
     linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
     linear-gradient(90deg, var(--background-bg-contrast) 0%, var(--background-bg-contrast) 100%);
 }

packages/ui/src/v2/components/button-v2.stories.tsx

@@ -1,4 +1,4 @@
-import { ButtonV2 } from "./button-v2";
+import { ButtonV2 } from "./button-v2"
 
 const docs = `### Overview
 Button v2 with three visual variants and two sizes.
@@ -12,7 +12,7 @@ Button v2 with three visual variants and two sizes.
 ### States
 - default, hover, pressed, focus, disabled.
 - State selectors are available via pseudo-classes and \`[data-state]\`.
-`;
+`
 
 export default {
   title: "UI V2/Button",
@@ -46,9 +46,9 @@ export default {
       options: ["normal", "large"],
     },
   },
-};
+}
 
-export const Playground = {};
+export const Playground = {}
 
 export const Variants = {
   render: () => (
@@ -65,7 +65,7 @@ export const Variants = {
       <ButtonV2 variant="ghost">Ghost</ButtonV2>
     </div>
   ),
-};
+}
 
 export const Sizes = {
   render: () => (
@@ -88,7 +88,7 @@ export const Sizes = {
       </ButtonV2>
     </div>
   ),
-};
+}
 
 export const Icon = {
   render: () => (
@@ -100,40 +100,21 @@ export const Icon = {
         "flex-wrap": "wrap",
       }}
     >
-      <ButtonV2
-        variant="neutral"
-        size="normal"
-        icon="plus"
-      >
+      <ButtonV2 variant="neutral" size="normal" icon="plus">
         Normal
       </ButtonV2>
-      <ButtonV2
-        variant="contrast"
-        size="large"
-        icon="plus"
-      >
+      <ButtonV2 variant="contrast" size="large" icon="plus">
         Large
       </ButtonV2>
     </div>
   ),
-};
+}
 
 export const AllStates = {
   render: () => {
-    const variants = [
-      "neutral",
-      "contrast",
-      "ghost",
-    ] as const;
-    const states = [
-      "default",
-      "hover",
-      "pressed",
-      "focus",
-      "disabled",
-    ] as const;
-    const toTitleCase = (value: string) =>
-      value.charAt(0).toUpperCase() + value.slice(1);
+    const variants = ["neutral", "contrast", "ghost"] as const
+    const states = ["default", "hover", "pressed", "focus", "disabled"] as const
+    const toTitleCase = (value: string) => value.charAt(0).toUpperCase() + value.slice(1)
     return (
       <div style={{ display: "grid", gap: "12px" }}>
         {variants.map((variant) => (
@@ -161,6 +142,6 @@ export const AllStates = {
           </div>
         ))}
       </div>
-    );
+    )
   },
-};
+}

packages/ui/src/v2/components/checkbox-v2.css

@@ -62,9 +62,7 @@
     border: none;
     box-shadow: inset 0 0 0 0.5px var(--border-border-strong);
 
-    background:
-      linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%),
-      var(--background-bg-base);
+    background: linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
     transition:
       background 170ms ease-out,
       opacity 170ms ease-out,
@@ -135,8 +133,7 @@
   [data-slot="checkbox-v2-control"] {
   background:
     linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
-    linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%),
-    var(--background-bg-base);
+    linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
 }
 
 [data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-control"] {
@@ -144,9 +141,7 @@
 }
 
 [data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]) [data-slot="checkbox-v2-control"] {
-  background:
-    linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
-    var(--background-bg-accent);
+  background: linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%), var(--background-bg-accent);
 }
 
 [data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]):where(:hover):where(
@@ -155,8 +150,7 @@
   [data-slot="checkbox-v2-control"] {
   background:
     linear-gradient(0deg, var(--overlay-simple-overlay-contrast-hover), var(--overlay-simple-overlay-contrast-hover)),
-    linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
-    var(--background-bg-accent);
+    linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%), var(--background-bg-accent);
 }
 
 [data-slot="checkbox-v2"]:where([data-invalid]):where(:not([data-checked], [data-indeterminate]))

packages/ui/src/v2/components/checkbox-v2.stories.tsx

@@ -86,13 +86,7 @@ export const States = {
       <CheckboxV2 name="s4" disabled label="Disabled" />
       <CheckboxV2 name="s5" disabled defaultChecked label="Checked disabled" />
       <CheckboxV2 name="s6" disabled indeterminate label="Indeterminate disabled" />
-      <CheckboxV2
-        name="s7"
-        label="Invalid"
-        description="Must be checked."
-        required
-        validationState="invalid"
-      />
+      <CheckboxV2 name="s7" label="Invalid" description="Must be checked." required validationState="invalid" />
     </div>
   ),
 }

packages/ui/src/v2/components/checkbox-v2.tsx

@@ -54,9 +54,7 @@ export function CheckboxV2(props: CheckboxV2Props) {
           <div data-slot="checkbox-v2-text">
             <span data-slot="checkbox-v2-label-text">{local.label}</span>
             <Show when={local.description}>
-              {(description) => (
-                <span data-slot="checkbox-v2-description">{description()}</span>
-              )}
+              {(description) => <span data-slot="checkbox-v2-description">{description()}</span>}
             </Show>
           </div>
         </Kobalte.Label>

packages/ui/src/v2/components/dialog-v2.css

@@ -64,23 +64,23 @@
 
         [data-slot="dialog-title"] {
           margin: 0;
-          font-family: 'Inter', var(--font-family-sans);
+          font-family: "Inter", var(--font-family-sans);
           font-weight: 530;
           font-size: 15px;
           line-height: 100%;
           letter-spacing: -0.13px;
           color: var(--text-text-base);
-          font-variation-settings: 'slnt' 0;
+          font-variation-settings: "slnt" 0;
         }
 
         [data-slot="dialog-description"] {
-          font-family: 'Inter', var(--font-family-sans);
+          font-family: "Inter", var(--font-family-sans);
           font-weight: 440;
           font-size: 13px;
           line-height: 100%;
           letter-spacing: -0.04px;
           color: var(--text-text-muted);
-          font-variation-settings: 'slnt' 0;
+          font-variation-settings: "slnt" 0;
         }
 
         [data-slot="dialog-close-button"] {

packages/ui/src/v2/components/dialog-v2.stories.tsx

@@ -103,7 +103,11 @@ export const CustomAction = {
         <Dialog
           title="Custom action"
           description="Dialog with a custom header action"
-          action={<ButtonV2 variant="neutral" size="small">Help</ButtonV2>}
+          action={
+            <ButtonV2 variant="neutral" size="small">
+              Help
+            </ButtonV2>
+          }
         >
           Dialog body content.
         </Dialog>

packages/ui/src/v2/components/dialog-v2.tsx

@@ -17,27 +17,14 @@ export function DialogFooter(props: ParentProps) {
 }
 
 export function Dialog(props: DialogProps) {
-  const [local] = splitProps(props, [
-    "title",
-    "description",
-    "action",
-    "size",
-    "class",
-    "classList",
-    "fit",
-    "children",
-  ])
+  const [local] = splitProps(props, ["title", "description", "action", "size", "class", "classList", "fit", "children"])
   const title = children(() => local.title)
   const description = children(() => local.description)
   const action = children(() => local.action)
   const hasHeader = () => title() || action()
 
   return (
-    <div
-      data-component="dialog"
-      data-fit={local.fit ? true : undefined}
-      data-size={local.size || "normal"}
-    >
+    <div data-component="dialog" data-fit={local.fit ? true : undefined} data-size={local.size || "normal"}>
       <div data-slot="dialog-container">
         <Kobalte.Content
           data-slot="dialog-content"
@@ -58,19 +45,26 @@ export function Dialog(props: DialogProps) {
           <Show when={hasHeader()}>
             <div data-slot="dialog-header">
               <div data-slot="dialog-title-group">
-                <Show when={title()}>
-                  {(t) => <Kobalte.Title data-slot="dialog-title">{t()}</Kobalte.Title>}
-                </Show>
+                <Show when={title()}>{(t) => <Kobalte.Title data-slot="dialog-title">{t()}</Kobalte.Title>}</Show>
                 <Show when={description()}>
-                  {(d) => (
-                    <Kobalte.Description data-slot="dialog-description">{d()}</Kobalte.Description>
-                  )}
+                  {(d) => <Kobalte.Description data-slot="dialog-description">{d()}</Kobalte.Description>}
                 </Show>
               </div>
               <Show when={action()}>{(a) => a()}</Show>
               <Kobalte.CloseButton data-slot="dialog-close-button" aria-label="Close">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-                  <path d="M12.4446 3.55469L3.55566 12.4436M3.55566 3.55469L12.4446 12.4436" stroke="#808080" stroke-linejoin="round" />
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                >
+                  <path
+                    d="M12.4446 3.55469L3.55566 12.4436M3.55566 3.55469L12.4446 12.4436"
+                    stroke="#808080"
+                    stroke-linejoin="round"
+                  />
                 </svg>
               </Kobalte.CloseButton>
             </div>

packages/ui/src/v2/components/field-v2.stories.tsx

@@ -125,12 +125,7 @@ export const Controlled = {
         <Field>
           <Field.Label>Amount</Field.Label>
           <Field.Control>
-            <TextInputV2
-              placeholder="0.00"
-              value={value()}
-              onInput={(e) => setValue(e.currentTarget.value)}
-              numeric
-            />
+            <TextInputV2 placeholder="0.00" value={value()} onInput={(e) => setValue(e.currentTarget.value)} numeric />
           </Field.Control>
           <Field.Suffix>{value() ? `Entered: ${value()}` : "Suffix"}</Field.Suffix>
         </Field>

packages/ui/src/v2/components/field-v2.tsx

@@ -82,10 +82,7 @@ function FieldV2Root(props: ParentProps<FieldV2Props>) {
     const root = rootRef
     if (!root) return
 
-    const control = root.querySelector(CONTROL_SELECTOR) as
-      | HTMLInputElement
-      | HTMLTextAreaElement
-      | null
+    const control = root.querySelector(CONTROL_SELECTOR) as HTMLInputElement | HTMLTextAreaElement | null
     if (!control) return
 
     const shell = control.closest(
@@ -142,14 +139,7 @@ function FieldV2Root(props: ParentProps<FieldV2Props>) {
 
 function FieldLabelInfoIcon() {
   return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
       <path
         fill-rule="evenodd"
         clip-rule="evenodd"

packages/ui/src/v2/components/inline-input-v2.css

@@ -10,9 +10,7 @@
   border-radius: 6px;
   outline: 1px solid transparent;
   outline-offset: 0;
-  background:
-    linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
-    var(--background-bg-base);
+  background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
   box-shadow: var(--elevation-button-neutral);
   flex: none;
   align-self: stretch;
@@ -30,8 +28,7 @@
 [data-component="inline-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
   background:
     linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
-    linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
-    var(--background-bg-base);
+    linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
 }
 
 [data-component="inline-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within)
@@ -177,11 +174,13 @@
   outline: none;
 }
 
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
+[data-component="inline-input-v2"]
+  [data-slot="inline-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
   background-color: var(--overlay-simple-overlay-hover);
 }
 
-[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
+[data-component="inline-input-v2"]
+  [data-slot="inline-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
   background-color: var(--overlay-simple-overlay-pressed);
 }
 

packages/ui/src/v2/components/keybind-v2.css

@@ -53,14 +53,14 @@
   padding: 0px;
   flex: 1 1 auto;
   align-self: stretch;
-  font-family: 'Inter', var(--font-family-sans), var(--sans), system-ui, sans-serif;
+  font-family: "Inter", var(--font-family-sans), var(--sans), system-ui, sans-serif;
   font-style: normal;
   font-weight: 530;
   font-size: 11px;
   line-height: 100%;
   text-align: center;
   letter-spacing: 0.05px;
-  font-variation-settings: 'slnt' 0;
+  font-variation-settings: "slnt" 0;
   user-select: none;
 }
 

packages/ui/src/v2/components/line-comment-v2.css

@@ -154,9 +154,7 @@
   resize: vertical;
   border: 1px solid var(--border-border-base);
   border-radius: 6px;
-  background:
-    linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
-    var(--background-bg-base);
+  background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
   font-family: inherit;
   font-size: 13px;
   font-style: normal;

packages/ui/src/v2/components/line-comment-v2.stories.tsx

@@ -1,10 +1,6 @@
 // @ts-nocheck
 import { createSignal } from "solid-js"
-import {
-  LineCommentEditorV2,
-  LineCommentV2,
-  LineCommentV2OverflowIcon,
-} from "./line-comment-v2"
+import { LineCommentEditorV2, LineCommentV2, LineCommentV2OverflowIcon } from "./line-comment-v2"
 
 const docs = `### Overview
 Line comment **display** and **editor** cards aligned with OpenCode line-comment specs (raised \`#FAFAFA\` surface, footer line context, \`ButtonV2\` neutral + contrast actions).

packages/ui/src/v2/components/line-comment-v2.tsx

@@ -47,16 +47,13 @@ export function LineCommentV2(props: LineCommentV2Props) {
           <div data-slot="line-comment-v2-text">{local.comment}</div>
           <div data-slot="line-comment-v2-meta">{local.selection}</div>
         </div>
-        <Show when={local.actions}>
-          {(actions) => <div data-slot="line-comment-v2-tools">{actions()}</div>}
-        </Show>
+        <Show when={local.actions}>{(actions) => <div data-slot="line-comment-v2-tools">{actions()}</div>}</Show>
       </div>
     </div>
   )
 }
 
-export interface LineCommentEditorV2Props
-  extends Omit<ComponentProps<"div">, "children" | "onInput" | "onSubmit"> {
+export interface LineCommentEditorV2Props extends Omit<ComponentProps<"div">, "children" | "onInput" | "onSubmit"> {
   /** Visible field label above the textarea (default: “Comment”). */
   heading?: JSX.Element | string
   value: string
@@ -147,13 +144,7 @@ export function LineCommentEditorV2(props: LineCommentEditorV2Props) {
             <ButtonV2 type="button" size="normal" variant="neutral" onClick={() => local.onCancel()}>
               {local.cancelLabel ?? "Cancel"}
             </ButtonV2>
-            <ButtonV2
-              type="button"
-              size="normal"
-              variant="contrast"
-              disabled={!canSubmit()}
-              onClick={submit}
-            >
+            <ButtonV2 type="button" size="normal" variant="contrast" disabled={!canSubmit()} onClick={submit}>
               {local.submitLabel ?? "Comment"}
             </ButtonV2>
           </div>

packages/ui/src/v2/components/menu-v2.css

@@ -11,7 +11,7 @@
   box-shadow: var(--elevation-floating);
 
   outline: none;
-  font-family: var(--font-family-sans), 'Inter', system-ui, sans-serif;
+  font-family: var(--font-family-sans), "Inter", system-ui, sans-serif;
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -52,8 +52,8 @@
   cursor: default;
   user-select: none;
 
-  font-family: var(--font-family-sans), 'Inter', system-ui, sans-serif;
-  font-variation-settings: 'slnt' 0;
+  font-family: var(--font-family-sans), "Inter", system-ui, sans-serif;
+  font-variation-settings: "slnt" 0;
   font-variant-numeric: tabular-nums;
   color: var(--menu-v2-fg);
 
@@ -164,7 +164,7 @@
   height: 28px;
   padding: 0 12px;
 
-  font-family: var(--font-family-sans), 'Inter', system-ui, sans-serif;
+  font-family: var(--font-family-sans), "Inter", system-ui, sans-serif;
   font-size: 11px;
   font-weight: 530;
   line-height: 100%;

packages/ui/src/v2/components/menu-v2.tsx

@@ -18,14 +18,7 @@ const ChevronRight: Component = () => (
 )
 
 const CheckMark: Component = () => (
-  <svg
-    width="14"
-    height="14"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-  >
+  <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path
       d="M3.53564 8.17857L6.39279 11.75L12.4642 4.25"
       stroke="currentColor"
@@ -46,12 +39,8 @@ function ItemBody(
   return (
     <>
       <span data-slot="menu-v2-item-content">{props.children}</span>
-      <Show when={props.shortcut}>
-        {(shortcut) => <span data-slot="menu-v2-item-shortcut">{shortcut()}</span>}
-      </Show>
-      <Show when={props.badge}>
-        {(badge) => <span data-slot="menu-v2-item-badge">{badge()}</span>}
-      </Show>
+      <Show when={props.shortcut}>{(shortcut) => <span data-slot="menu-v2-item-shortcut">{shortcut()}</span>}</Show>
+      <Show when={props.badge}>{(badge) => <span data-slot="menu-v2-item-badge">{badge()}</span>}</Show>
       {props.trailing}
     </>
   )
@@ -65,11 +54,7 @@ export interface MenuV2ItemProps extends ComponentProps<typeof DropdownMenu.Item
 function MenuV2Item(props: ParentProps<MenuV2ItemProps>) {
   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" classList={{ ...s.classList, [s.class ?? ""]: !!s.class }}>
       <ItemBody shortcut={s.shortcut} badge={s.badge}>
         {s.children}
       </ItemBody>

packages/ui/src/v2/components/radio-v2.css

@@ -91,9 +91,7 @@
     border: none;
     box-shadow: inset 0 0 0 0.5px var(--border-border-strong);
 
-    background:
-      linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%),
-      var(--background-bg-base);
+    background: linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
     transition:
       background 170ms ease-out,
       opacity 170ms ease-out,
@@ -112,8 +110,7 @@
     [data-slot="radio-v2-item-control"] {
     background:
       linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
-      linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%),
-      var(--background-bg-base);
+      linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
   }
 
   &:where([data-disabled]) [data-slot="radio-v2-item-control"] {
@@ -122,16 +119,14 @@
 
   &:where([data-checked]) [data-slot="radio-v2-item-control"] {
     background:
-      linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
-      var(--background-bg-accent);
+      linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%), var(--background-bg-accent);
   }
 
   &:where([data-checked]):where(:hover):where(:not([data-disabled], [data-readonly]))
     [data-slot="radio-v2-item-control"] {
     background:
       linear-gradient(0deg, var(--overlay-simple-overlay-contrast-hover), var(--overlay-simple-overlay-contrast-hover)),
-      linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%),
-      var(--background-bg-accent);
+      linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%), var(--background-bg-accent);
   }
 
   &:where([data-checked][data-disabled]) [data-slot="radio-v2-item-control"] {

packages/ui/src/v2/components/radio-v2.stories.tsx

@@ -45,12 +45,7 @@ export const Controlled = {
     const [value, setValue] = createSignal("weekly")
     return (
       <div style={{ display: "grid", gap: "12px" }}>
-        <RadioGroupV2
-          label="Controlled"
-          value={value()}
-          onChange={(v) => setValue(v)}
-          name="controlled-frequency"
-        >
+        <RadioGroupV2 label="Controlled" value={value()} onChange={(v) => setValue(v)} name="controlled-frequency">
           <RadioItemV2 value="daily" label="Daily" />
           <RadioItemV2 value="weekly" label="Weekly" />
           <RadioItemV2 value="never" label="Never" />
@@ -95,4 +90,3 @@ export const States = {
     </div>
   ),
 }
-

packages/ui/src/v2/components/radio-v2.tsx

@@ -28,9 +28,7 @@ export function RadioGroupV2(props: RadioGroupV2Props) {
         )}
       </Show>
       <Show when={local.description}>
-        {(description) => (
-          <Kobalte.Description data-slot="radio-v2-description">{description()}</Kobalte.Description>
-        )}
+        {(description) => <Kobalte.Description data-slot="radio-v2-description">{description()}</Kobalte.Description>}
       </Show>
       <div data-slot="radio-v2-items">{local.children}</div>
       <Kobalte.ErrorMessage data-slot="radio-v2-error" />
@@ -65,13 +63,10 @@ export function RadioItemV2(props: RadioItemV2Props) {
         <div data-slot="radio-v2-item-text">
           <span data-slot="radio-v2-item-label-text">{local.label}</span>
           <Show when={local.description}>
-            {(description) => (
-              <span data-slot="radio-v2-item-description">{description()}</span>
-            )}
+            {(description) => <span data-slot="radio-v2-item-description">{description()}</span>}
           </Show>
         </div>
       </Kobalte.ItemLabel>
     </Kobalte.Item>
   )
 }
-

packages/ui/src/v2/components/segmented-control-v2.tsx

@@ -59,7 +59,7 @@ export function SegmentedControlV2(props: SegmentedControlV2Props) {
 
   const [internal, setInternal] = createSignal<string | null>(local.defaultValue ?? null)
 
-  const selected = createMemo(() => (isControlled() ? local.value ?? null : internal()))
+  const selected = createMemo(() => (isControlled() ? (local.value ?? null) : internal()))
 
   const setSelected = (next: string | null) => {
     if (!isControlled()) setInternal(next)
@@ -78,9 +78,9 @@ export function SegmentedControlV2(props: SegmentedControlV2Props) {
   const focusNext = (from: HTMLButtonElement, direction: 1 | -1) => {
     const root = from.closest(`[data-slot="segmented-control-v2"]`)
     if (!root) return
-    const buttons = Array.from(root.querySelectorAll<HTMLButtonElement>(`button[data-slot="segmented-control-v2-item"]`)).filter(
-      (b) => !b.disabled,
-    )
+    const buttons = Array.from(
+      root.querySelectorAll<HTMLButtonElement>(`button[data-slot="segmented-control-v2-item"]`),
+    ).filter((b) => !b.disabled)
     const i = buttons.indexOf(from)
     const next = buttons[i + direction]
     next?.focus()
@@ -134,7 +134,15 @@ function invokeButtonHandler<E extends Event>(
 
 export function SegmentedControlItemV2(props: SegmentedControlItemV2Props) {
   const merged = mergeProps({ disabled: false }, props)
-  const [local, rest] = splitProps(merged, ["class", "classList", "children", "value", "disabled", "onClick", "onKeyDown"])
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "classList",
+    "children",
+    "value",
+    "disabled",
+    "onClick",
+    "onKeyDown",
+  ])
   const ctx = useSegmentedControlContext()
 
   const pressed = createMemo(() => ctx.selected() === local.value)
@@ -151,25 +159,29 @@ export function SegmentedControlItemV2(props: SegmentedControlItemV2Props) {
     invokeButtonHandler(local.onKeyDown, e)
     if (e.defaultPrevented || disabled()) return
     const t = e.currentTarget
-    
+
     if (e.key === "ArrowRight") {
       e.preventDefault()
       ctx.focusNext(t, 1)
     } else if (e.key === "ArrowLeft") {
       e.preventDefault()
       ctx.focusNext(t, -1)
-    } 
-    
+    }
+
     // accessibility stuff
     else if (e.key === "Home") {
       e.preventDefault()
       const root = t.closest(`[data-slot="segmented-control-v2"]`)
-      const first = root?.querySelector<HTMLButtonElement>(`button[data-slot="segmented-control-v2-item"]:not(:disabled)`)
+      const first = root?.querySelector<HTMLButtonElement>(
+        `button[data-slot="segmented-control-v2-item"]:not(:disabled)`,
+      )
       first?.focus()
     } else if (e.key === "End") {
       e.preventDefault()
       const root = t.closest(`[data-slot="segmented-control-v2"]`)
-      const buttons = root?.querySelectorAll<HTMLButtonElement>(`button[data-slot="segmented-control-v2-item"]:not(:disabled)`)
+      const buttons = root?.querySelectorAll<HTMLButtonElement>(
+        `button[data-slot="segmented-control-v2-item"]:not(:disabled)`,
+      )
       const last = buttons?.[buttons.length - 1]
       last?.focus()
     }

packages/ui/src/v2/components/select-v2.css

@@ -46,9 +46,7 @@
   border-radius: 6px;
   outline: 1px solid transparent;
   outline-offset: 0;
-  background:
-    linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
-    var(--background-bg-base);
+  background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
   box-shadow: var(--elevation-button-neutral);
   flex: none;
   align-self: stretch;
@@ -63,11 +61,12 @@
   padding: 0 8px 0 0;
 }
 
-[data-component="select-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within):not([data-expanded]) {
+[data-component="select-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within):not(
+    [data-expanded]
+  ) {
   background:
     linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
-    linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
-    var(--background-bg-base);
+    linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
 }
 
 [data-component="select-v2"]:where(:focus-within):not([data-disabled], [data-invalid]),
@@ -189,6 +188,9 @@
   color: var(--menu-v2-accent);
 }
 
-[data-slot="select-v2-listbox"] [data-component="menu-v2-item"]:not([data-selected]) [data-slot="menu-v2-item-indicator"] svg {
+[data-slot="select-v2-listbox"]
+  [data-component="menu-v2-item"]:not([data-selected])
+  [data-slot="menu-v2-item-indicator"]
+  svg {
   visibility: hidden;
 }

packages/ui/src/v2/components/select-v2.tsx

@@ -1,12 +1,5 @@
 import { Select as Kobalte } from "@kobalte/core/select"
-import {
-  Show,
-  createMemo,
-  onCleanup,
-  splitProps,
-  type ComponentProps,
-  type JSX,
-} from "solid-js"
+import { Show, createMemo, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
 import "./select-v2.css"
 
 function groupOptions<T>(options: T[], groupBy?: (x: T) => string): { category: string; options: T[] }[] {
@@ -49,14 +42,7 @@ const CheckSmall = () => (
 
 export type SelectV2Props<T> = Omit<
   ComponentProps<typeof Kobalte<T, { category: string; options: T[] }>>,
-  | "value"
-  | "onChange"
-  | "children"
-  | "options"
-  | "itemComponent"
-  | "sectionComponent"
-  | "defaultValue"
-  | "multiple"
+  "value" | "onChange" | "children" | "options" | "itemComponent" | "sectionComponent" | "defaultValue" | "multiple"
 > & {
   placeholder?: string
   options: T[]
@@ -163,7 +149,7 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
         </Kobalte.Item>
       )}
       onChange={(next) => {
-        const v = next == null ? null : (Array.isArray(next) ? (next[0] as T) ?? null : (next as T))
+        const v = next == null ? null : Array.isArray(next) ? ((next[0] as T) ?? null) : (next as T)
         local.onSelect?.(v)
         stop()
       }}
@@ -199,10 +185,7 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
         </span>
       </Kobalte.Trigger>
       <Kobalte.Portal>
-        <Kobalte.Content
-          data-component="menu-v2-content"
-          data-slot="select-v2-content"
-        >
+        <Kobalte.Content data-component="menu-v2-content" data-slot="select-v2-content">
           <Kobalte.Listbox data-slot="select-v2-listbox" />
         </Kobalte.Content>
       </Kobalte.Portal>

packages/ui/src/v2/components/switch-v2.css

@@ -29,8 +29,7 @@
     border-radius: 4px;
     border: none;
     background:
-      linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-20) 100%),
-      var(--background-bg-layer-03);
+      linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-20) 100%), var(--background-bg-layer-03);
     box-shadow: var(--elevation-switch-off);
     transition:
       background 90ms ease-out,
@@ -46,7 +45,11 @@
     border-radius: 2px;
     border: 0.5px solid var(--overlay-gradient-depth-overlay-depth-top);
     background:
-      linear-gradient(180deg, var(--overlay-gradient-depth-overlay-depth-top) 0%, var(--overlay-gradient-depth-overlay-depth-bot) 100%),
+      linear-gradient(
+        180deg,
+        var(--overlay-gradient-depth-overlay-depth-top) 0%,
+        var(--overlay-gradient-depth-overlay-depth-bot) 100%
+      ),
       var(--grey-200);
     box-shadow: var(--elevation-elements);
     transition:
@@ -87,8 +90,7 @@
   &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
     background:
       linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
-      linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-20) 100%),
-      var(--background-bg-layer-03);
+      linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-20) 100%), var(--background-bg-layer-03);
   }
 
   &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
@@ -103,8 +105,7 @@
 
   &[data-checked] [data-slot="switch-control"] {
     background:
-      linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-10) 100%),
-      var(--background-bg-accent);
+      linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-10) 100%), var(--background-bg-accent);
     box-shadow: var(--elevation-switch-on);
   }
 
@@ -112,15 +113,18 @@
     transform: translateX(8px);
     border-radius: 2px;
     background:
-      linear-gradient(180deg, var(--overlay-gradient-depth-overlay-depth-top) 0%, var(--overlay-gradient-depth-overlay-depth-bot) 100%),
+      linear-gradient(
+        180deg,
+        var(--overlay-gradient-depth-overlay-depth-top) 0%,
+        var(--overlay-gradient-depth-overlay-depth-bot) 100%
+      ),
       var(--grey-300);
   }
 
   &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
     background:
       linear-gradient(0deg, var(--overlay-simple-overlay-contrast-hover), var(--overlay-simple-overlay-contrast-hover)),
-      linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-10) 100%),
-      var(--background-bg-accent);
+      linear-gradient(180deg, var(--alpha-light-0) 0%, var(--alpha-light-10) 100%), var(--background-bg-accent);
   }
 
   &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {

packages/ui/src/v2/components/tabs-v2.css

@@ -128,16 +128,19 @@
   padding: 6px;
 }
 
-[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not([data-selected]) {
+[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
+  [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not([data-selected]) {
   color: var(--text-text-base);
 }
 
-[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
+[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
+  [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
   border-bottom-color: var(--text-text-faint);
   color: var(--text-text-base);
 }
 
-[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"]:not(:has([data-selected])) {
+[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
+  [data-slot="tabs-v2-trigger-wrapper"]:not(:has([data-selected])) {
   color: var(--text-text-muted);
 }
 
@@ -157,13 +160,15 @@
   border: 0.5px solid transparent;
 }
 
-[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
+[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"]
+  [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
   background-color: var(--background-bg-layer-01);
   color: var(--text-text-base);
   border: 0.5px solid var(--border-border-muted);
 }
 
-[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
+[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"]
+  [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
   background-color: var(--background-bg-layer-02);
   color: var(--text-text-base);
   border: 0.5px solid var(--border-border-muted);
@@ -205,11 +210,13 @@
   padding: 0 6px;
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
+  [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
   color: var(--text-text-base);
 }
 
-[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
+  [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
   background-color: var(--background-bg-layer-02);
   color: var(--text-text-base);
   border: 0.5px solid var(--border-border-muted);

packages/ui/src/v2/components/tabs-v2.stories.tsx

@@ -80,10 +80,10 @@ export const Settings = {
         </mod.TabsV2.Trigger>
       </mod.TabsV2.List>
       <mod.TabsV2.Content value="general">
-      <p class="text-[12px] text-[#5c5c5c] mx-4 my-3.5">General settings</p>
+        <p class="text-[12px] text-[#5c5c5c] mx-4 my-3.5">General settings</p>
       </mod.TabsV2.Content>
       <mod.TabsV2.Content value="appearance">
-      <p class="text-[12px] text-[#5c5c5c] mx-4 my-3.5">Appearance settings</p>
+        <p class="text-[12px] text-[#5c5c5c] mx-4 my-3.5">Appearance settings</p>
       </mod.TabsV2.Content>
     </mod.TabsV2>
   ),

packages/ui/src/v2/components/tabs-v2.tsx

@@ -69,11 +69,7 @@ function TabsV2Trigger(props: ParentProps<TabsV2TriggerProps>) {
         }
       }}
     >
-      <Kobalte.Trigger
-        {...rest}
-        data-slot="tabs-v2-trigger"
-        data-value={props.value}
-      >
+      <Kobalte.Trigger {...rest} data-slot="tabs-v2-trigger" data-value={props.value}>
         <span class="inline-flex items-center gap-2" data-slot="tabs-v2-trigger-content">
           {split.children}
           <Show when={split.subtext}>

packages/ui/src/v2/components/text-input-v2.css

@@ -11,9 +11,7 @@
   border-radius: 6px;
   outline: 1px solid transparent;
   outline-offset: 0;
-  background:
-    linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
-    var(--background-bg-base);
+  background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
   box-shadow: var(--elevation-button-neutral);
   flex: none;
   align-self: stretch;
@@ -30,8 +28,7 @@
 [data-component="text-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
   background:
     linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
-    linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
-    var(--background-bg-base);
+    linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
 }
 
 [data-component="text-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
@@ -107,11 +104,13 @@
   outline: none;
 }
 
-[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
+[data-component="text-input-v2"]
+  [data-slot="text-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
   background-color: var(--overlay-simple-overlay-hover);
 }
 
-[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
+[data-component="text-input-v2"]
+  [data-slot="text-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
   background-color: var(--overlay-simple-overlay-pressed);
 }
 

packages/ui/src/v2/components/text-input-v2.stories.tsx

@@ -82,11 +82,7 @@ export const Controlled = {
     const [value, setValue] = createSignal("Controlled value")
     return (
       <div style={{ display: "grid", gap: "12px" }}>
-        <TextInputV2
-          value={value()}
-          onInput={(e) => setValue(e.currentTarget.value)}
-          placeholder="Type here…"
-        />
+        <TextInputV2 value={value()} onInput={(e) => setValue(e.currentTarget.value)} placeholder="Type here…" />
         <div
           style={{
             "font-family": "var(--font-family-sans)",

packages/ui/src/v2/components/text-shimmer-v2.stories.tsx

@@ -52,7 +52,16 @@ export const Inactive = {
 
 export const WithOffset = {
   render: () => (
-    <div style={{ display: "flex", "flex-direction": "column", gap: "8px", "font-size": "13px", "font-weight": "440", "font-family": "Inter, system-ui, sans-serif" }}>
+    <div
+      style={{
+        display: "flex",
+        "flex-direction": "column",
+        gap: "8px",
+        "font-size": "13px",
+        "font-weight": "440",
+        "font-family": "Inter, system-ui, sans-serif",
+      }}
+    >
       <TextShimmerV2 text="First line" active={true} offset={0} />
       <TextShimmerV2 text="Second line" active={true} offset={5} />
       <TextShimmerV2 text="Third line" active={true} offset={10} />

packages/ui/src/v2/components/textarea-v2.css

@@ -10,9 +10,7 @@
   border-radius: 6px;
   outline: 1px solid transparent;
   outline-offset: 0;
-  background:
-    linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
-    var(--background-bg-base);
+  background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
   box-shadow: var(--elevation-button-neutral);
   flex: none;
   align-self: stretch;
@@ -25,8 +23,7 @@
 [data-component="textarea-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
   background:
     linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
-    linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%),
-    var(--background-bg-base);
+    linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
 }
 
 [data-component="textarea-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {

packages/ui/src/v2/components/textarea-v2.stories.tsx

@@ -63,11 +63,7 @@ export const Controlled = {
     const [value, setValue] = createSignal("Controlled value")
     return (
       <div style={{ display: "grid", gap: "12px", width: "280px" }}>
-        <TextareaV2
-          value={value()}
-          onInput={(e) => setValue(e.currentTarget.value)}
-          placeholder="Type here…"
-        />
+        <TextareaV2 value={value()} onInput={(e) => setValue(e.currentTarget.value)} placeholder="Type here…" />
         <div
           style={{
             "font-family": "var(--font-family-sans)",

packages/ui/src/v2/components/textarea-v2.tsx

@@ -7,13 +7,7 @@ export interface TextareaV2Props extends ComponentProps<"textarea"> {
 }
 
 export function TextareaV2(props: TextareaV2Props) {
-  const [local, textareaProps] = splitProps(props, [
-    "class",
-    "classList",
-    "invalid",
-    "disabled",
-    "rows",
-  ])
+  const [local, textareaProps] = splitProps(props, ["class", "classList", "invalid", "disabled", "rows"])
 
   return (
     <div

packages/ui/src/v2/components/toast-v2.css

@@ -55,7 +55,6 @@
     animation: toastV2PopOut 100ms ease-in forwards;
   }
 
-
   [data-slot="toast-v2-header"] {
     display: flex;
     align-items: flex-start;
@@ -177,7 +176,6 @@
       display: block;
     }
   }
-
 }
 
 @keyframes toastV2PopIn {

packages/ui/src/v2/components/toast-v2.stories.tsx

@@ -1,5 +1,5 @@
-import * as mod from "./toast-v2";
-import { ButtonV2 } from "./button-v2";
+import * as mod from "./toast-v2"
+import { ButtonV2 } from "./button-v2"
 
 const docs = `### Overview
 Toast notifications with optional icons, actions, and progress.
@@ -24,7 +24,7 @@ Use brief titles/descriptions; limit actions to 1-2.
 ### Theming/tokens
 - Uses \`data-component="toast-v2"\` and slot data attributes.
 
-`;
+`
 
 export default {
   title: "UI V2/Toast",
@@ -40,7 +40,7 @@ export default {
       },
     },
   },
-};
+}
 
 export const AllExamples = {
   render: () => (
@@ -54,21 +54,12 @@ export const AllExamples = {
             title: "Download started...",
             description: "23% · 2 min left",
             icon: (
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M13.5554 10.4453V13.5564H11.7777H4.22211C3.23989 13.5564 2.44434 13.5564 2.44434 13.5564V10.4453"
                   stroke="var(--icon-icon-base)"
                 />
-                <path
-                  d="M4.88867 6L7.99978 9.11111L11.1109 6"
-                  stroke="var(--icon-icon-base)"
-                />
+                <path d="M4.88867 6L7.99978 9.11111L11.1109 6" stroke="var(--icon-icon-base)" />
                 <path d="M8 9.11198V2.44531" stroke="var(--icon-icon-base)" />
               </svg>
             ),
@@ -93,21 +84,12 @@ export const AllExamples = {
             title: "Saved",
             description: "Your changes are stored",
             icon: (
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M8.00011 14.4436C11.5593 14.4436 14.4446 11.5583 14.4446 7.99913C14.4446 4.43996 11.5593 1.55469 8.00011 1.55469C4.44094 1.55469 1.55566 4.43996 1.55566 7.99913C1.55566 11.5583 4.44094 14.4436 8.00011 14.4436Z"
                   stroke="#198B43"
                 />
-                <path
-                  d="M5.11133 8.22135L7.11133 10.4436L10.8891 5.55469"
-                  stroke="#198B43"
-                />
+                <path d="M5.11133 8.22135L7.11133 10.4436L10.8891 5.55469" stroke="#198B43" />
               </svg>
             ),
           })
@@ -122,49 +104,15 @@ export const AllExamples = {
           mod.showToastV2({
             title: "Saving...",
             icon: (
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <rect x="8.75" y="5.25" width="2" height="2" fill="#3A3A3A" />
                 <rect x="8.75" y="8.75" width="2" height="2" fill="#3A3A3A" />
                 <rect x="8.75" y="12.25" width="2" height="2" fill="#3A3A3A" />
                 <rect x="5.25" y="12.25" width="2" height="2" fill="#3A3A3A" />
-                <rect
-                  opacity="0.3"
-                  x="5.25"
-                  y="1.75"
-                  width="2"
-                  height="2"
-                  fill="#3A3A3A"
-                />
-                <rect
-                  opacity="0.3"
-                  x="5.25"
-                  y="5.25"
-                  width="2"
-                  height="2"
-                  fill="#3A3A3A"
-                />
-                <rect
-                  opacity="0.3"
-                  x="5.25"
-                  y="8.75"
-                  width="2"
-                  height="2"
-                  fill="#3A3A3A"
-                />
-                <rect
-                  opacity="0.3"
-                  x="8.75"
-                  y="1.75"
-                  width="2"
-                  height="2"
-                  fill="#3A3A3A"
-                />
+                <rect opacity="0.3" x="5.25" y="1.75" width="2" height="2" fill="#3A3A3A" />
+                <rect opacity="0.3" x="5.25" y="5.25" width="2" height="2" fill="#3A3A3A" />
+                <rect opacity="0.3" x="5.25" y="8.75" width="2" height="2" fill="#3A3A3A" />
+                <rect opacity="0.3" x="8.75" y="1.75" width="2" height="2" fill="#3A3A3A" />
               </svg>
             ),
             persistent: true,
@@ -181,13 +129,7 @@ export const AllExamples = {
             title: "Unsaved changes",
             description: "You have made 4 edits...",
             icon: (
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M8 6.33334V8.99392M7.78099 10.9934H8.23448M8 2L1.5 13H14.5L8 2Z"
                   stroke="#CB9F34"
@@ -206,4 +148,4 @@ export const AllExamples = {
       </ButtonV2>
     </div>
   ),
-};
+}

packages/ui/src/v2/components/toast-v2.tsx

@@ -59,11 +59,7 @@ function ToastV2Actions(props: ComponentProps<"div">) {
 
 function ToastV2CloseButton(props: ToastCloseButtonProps & ComponentProps<"button">) {
   return (
-    <Kobalte.CloseButton
-      data-slot="toast-v2-close-button"
-      aria-label="Dismiss"
-      {...props}
-    >
+    <Kobalte.CloseButton data-slot="toast-v2-close-button" aria-label="Dismiss" {...props}>
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
         <path d="M4.25 11.75L11.75 4.25" stroke="#FAFAFA" />
         <path d="M11.75 11.75L4.25 4.25" stroke="#FAFAFA" />

packages/ui/src/v2/components/tool-error-card-v2.tsx

@@ -1,11 +1,5 @@
 import { Collapsible } from "@kobalte/core/collapsible"
-import {
-  type ComponentProps,
-  type JSX,
-  Show,
-  createMemo,
-  splitProps,
-} from "solid-js"
+import { type ComponentProps, type JSX, Show, createMemo, splitProps } from "solid-js"
 import "./tool-error-card-v2.css"
 
 function BanIcon() {
@@ -129,11 +123,7 @@ export function ToolErrorCardV2(props: ToolErrorCardV2Props) {
         [local.class ?? ""]: !!local.class,
       }}
     >
-      <Collapsible.Trigger
-        as="div"
-        role="button"
-        data-slot="tool-error-card-trigger"
-      >
+      <Collapsible.Trigger as="div" role="button" data-slot="tool-error-card-trigger">
         <span data-slot="tool-error-card-icon-wrap">
           <Show when={local.loading} fallback={<BanIcon />}>
             <LoaderIcon />

packages/ui/src/v2/components/tooltip-v2.stories.tsx

@@ -59,7 +59,13 @@ export const WithKeybind = {
 export const Path = {
   render: () => (
     <div style={{ padding: "80px", display: "flex", "justify-content": "center" }}>
-      <TooltipV2 value={<>Components <span style={{ color: "var(--text-text-faint)" }}>/</span> Tooltip</>}>
+      <TooltipV2
+        value={
+          <>
+            Components <span style={{ color: "var(--text-text-faint)" }}>/</span> Tooltip
+          </>
+        }
+      >
         <span>Hover me</span>
       </TooltipV2>
     </div>

packages/ui/src/v2/styles/colors.css

@@ -1,171 +1,171 @@
 @layer theme {
   :root {
     /* ── Grey ── */
-    --v2-grey-100: #FFFFFFFF;
-    --v2-grey-200: #FAFAFAFF;
-    --v2-grey-300: #EEEEEEFF;
-    --v2-grey-400: #D4D4D4FF;
-    --v2-grey-500: #AEAEAEFF;
-    --v2-grey-600: #808080FF;
-    --v2-grey-700: #5C5C5CFF;
-    --v2-grey-800: #3A3A3AFF;
-    --v2-grey-900: #242424FF;
-    --v2-grey-1000: #161616FF;
-    --v2-grey-1100: #080808FF;
-    --v2-grey-1200: #000000FF;
+    --v2-grey-100: #ffffffff;
+    --v2-grey-200: #fafafaff;
+    --v2-grey-300: #eeeeeeff;
+    --v2-grey-400: #d4d4d4ff;
+    --v2-grey-500: #aeaeaeff;
+    --v2-grey-600: #808080ff;
+    --v2-grey-700: #5c5c5cff;
+    --v2-grey-800: #3a3a3aff;
+    --v2-grey-900: #242424ff;
+    --v2-grey-1000: #161616ff;
+    --v2-grey-1100: #080808ff;
+    --v2-grey-1200: #000000ff;
 
     /* ── Alpha Dark ── */
-    --v2-alpha-dark-100: #000000FF;
-    --v2-alpha-dark-90: #000000E5;
-    --v2-alpha-dark-80: #000000CC;
-    --v2-alpha-dark-70: #000000B2;
+    --v2-alpha-dark-100: #000000ff;
+    --v2-alpha-dark-90: #000000e5;
+    --v2-alpha-dark-80: #000000cc;
+    --v2-alpha-dark-70: #000000b2;
     --v2-alpha-dark-60: #00000099;
     --v2-alpha-dark-50: #00000080;
     --v2-alpha-dark-40: #00000066;
-    --v2-alpha-dark-30: #0000004D;
-    --v2-alpha-dark-24: #0000003D;
+    --v2-alpha-dark-30: #0000004d;
+    --v2-alpha-dark-24: #0000003d;
     --v2-alpha-dark-20: #00000033;
     --v2-alpha-dark-16: #00000029;
     --v2-alpha-dark-14: #00000024;
-    --v2-alpha-dark-12: #0000001F;
-    --v2-alpha-dark-10: #0000001A;
+    --v2-alpha-dark-12: #0000001f;
+    --v2-alpha-dark-10: #0000001a;
     --v2-alpha-dark-8: #00000014;
-    --v2-alpha-dark-6: #0000000F;
-    --v2-alpha-dark-4: #0000000A;
+    --v2-alpha-dark-6: #0000000f;
+    --v2-alpha-dark-4: #0000000a;
     --v2-alpha-dark-2: #00000005;
     --v2-alpha-dark-0: #00000000;
 
     /* ── Alpha Light ── */
-    --v2-alpha-light-100: #FFFFFFFF;
-    --v2-alpha-light-90: #FFFFFFE5;
-    --v2-alpha-light-80: #FFFFFFCC;
-    --v2-alpha-light-70: #FFFFFFB2;
-    --v2-alpha-light-60: #FFFFFF99;
-    --v2-alpha-light-50: #FFFFFF80;
-    --v2-alpha-light-40: #FFFFFF66;
-    --v2-alpha-light-30: #FFFFFF4D;
-    --v2-alpha-light-24: #FFFFFF3D;
-    --v2-alpha-light-20: #FFFFFF33;
-    --v2-alpha-light-16: #FFFFFF29;
-    --v2-alpha-light-14: #FFFFFF24;
-    --v2-alpha-light-12: #FFFFFF1F;
-    --v2-alpha-light-10: #FFFFFF1A;
-    --v2-alpha-light-8: #FFFFFF14;
-    --v2-alpha-light-6: #FFFFFF0F;
-    --v2-alpha-light-4: #FFFFFF0A;
-    --v2-alpha-light-2: #FFFFFF05;
-    --v2-alpha-light-0: #FFFFFF00;
+    --v2-alpha-light-100: #ffffffff;
+    --v2-alpha-light-90: #ffffffe5;
+    --v2-alpha-light-80: #ffffffcc;
+    --v2-alpha-light-70: #ffffffb2;
+    --v2-alpha-light-60: #ffffff99;
+    --v2-alpha-light-50: #ffffff80;
+    --v2-alpha-light-40: #ffffff66;
+    --v2-alpha-light-30: #ffffff4d;
+    --v2-alpha-light-24: #ffffff3d;
+    --v2-alpha-light-20: #ffffff33;
+    --v2-alpha-light-16: #ffffff29;
+    --v2-alpha-light-14: #ffffff24;
+    --v2-alpha-light-12: #ffffff1f;
+    --v2-alpha-light-10: #ffffff1a;
+    --v2-alpha-light-8: #ffffff14;
+    --v2-alpha-light-6: #ffffff0f;
+    --v2-alpha-light-4: #ffffff0a;
+    --v2-alpha-light-2: #ffffff05;
+    --v2-alpha-light-0: #ffffff00;
 
     /* ── Red ── */
-    --v2-red-100: #FCECEBFF;
-    --v2-red-200: #F6D5D3FF;
-    --v2-red-300: #F2BBB7FF;
-    --v2-red-400: #F29B96FF;
-    --v2-red-500: #F17471FF;
-    --v2-red-600: #F1484FFF;
-    --v2-red-700: #D92E3CFF;
-    --v2-red-800: #B82D35FF;
-    --v2-red-900: #97252BFF;
-    --v2-red-1000: #7A1F23FF;
-    --v2-red-1100: #5F1A1CFF;
-    --v2-red-1200: #461516FF;
+    --v2-red-100: #fcecebff;
+    --v2-red-200: #f6d5d3ff;
+    --v2-red-300: #f2bbb7ff;
+    --v2-red-400: #f29b96ff;
+    --v2-red-500: #f17471ff;
+    --v2-red-600: #f1484fff;
+    --v2-red-700: #d92e3cff;
+    --v2-red-800: #b82d35ff;
+    --v2-red-900: #97252bff;
+    --v2-red-1000: #7a1f23ff;
+    --v2-red-1100: #5f1a1cff;
+    --v2-red-1200: #461516ff;
 
     /* ── Orange ── */
-    --v2-orange-100: #FDF2EDFF;
-    --v2-orange-200: #FFE7DCFF;
-    --v2-orange-300: #FFD8C6FF;
-    --v2-orange-400: #FFC1A4FF;
-    --v2-orange-500: #FFA478FF;
-    --v2-orange-600: #FF8648FF;
-    --v2-orange-700: #EE7330FF;
-    --v2-orange-800: #D16427FF;
-    --v2-orange-900: #B35624FF;
-    --v2-orange-1000: #954C27FF;
-    --v2-orange-1100: #723D22FF;
-    --v2-orange-1200: #5A2C14FF;
+    --v2-orange-100: #fdf2edff;
+    --v2-orange-200: #ffe7dcff;
+    --v2-orange-300: #ffd8c6ff;
+    --v2-orange-400: #ffc1a4ff;
+    --v2-orange-500: #ffa478ff;
+    --v2-orange-600: #ff8648ff;
+    --v2-orange-700: #ee7330ff;
+    --v2-orange-800: #d16427ff;
+    --v2-orange-900: #b35624ff;
+    --v2-orange-1000: #954c27ff;
+    --v2-orange-1100: #723d22ff;
+    --v2-orange-1200: #5a2c14ff;
 
     /* ── Yellow ── */
-    --v2-yellow-100: #FEFAECFF;
-    --v2-yellow-200: #FCEFD0FF;
-    --v2-yellow-300: #F7E5B5FF;
-    --v2-yellow-400: #F3DA9BFF;
-    --v2-yellow-500: #F2CF76FF;
-    --v2-yellow-600: #F6C251FF;
-    --v2-yellow-700: #E7AF36FF;
-    --v2-yellow-800: #CB9F34FF;
-    --v2-yellow-900: #AC8833FF;
-    --v2-yellow-1000: #8E7231FF;
-    --v2-yellow-1100: #68552BFF;
-    --v2-yellow-1200: #4B4025FF;
+    --v2-yellow-100: #fefaecff;
+    --v2-yellow-200: #fcefd0ff;
+    --v2-yellow-300: #f7e5b5ff;
+    --v2-yellow-400: #f3da9bff;
+    --v2-yellow-500: #f2cf76ff;
+    --v2-yellow-600: #f6c251ff;
+    --v2-yellow-700: #e7af36ff;
+    --v2-yellow-800: #cb9f34ff;
+    --v2-yellow-900: #ac8833ff;
+    --v2-yellow-1000: #8e7231ff;
+    --v2-yellow-1100: #68552bff;
+    --v2-yellow-1200: #4b4025ff;
 
     /* ── Green ── */
-    --v2-green-100: #E7F9EAFF;
-    --v2-green-200: #D0F0D5FF;
-    --v2-green-300: #B8E9C1FF;
-    --v2-green-400: #96E3A6FF;
-    --v2-green-500: #6BD586FF;
-    --v2-green-600: #49C970FF;
-    --v2-green-700: #2EAF5AFF;
-    --v2-green-800: #198B43FF;
-    --v2-green-900: #1D783CFF;
-    --v2-green-1000: #196130FF;
-    --v2-green-1100: #164C26FF;
-    --v2-green-1200: #14361DFF;
+    --v2-green-100: #e7f9eaff;
+    --v2-green-200: #d0f0d5ff;
+    --v2-green-300: #b8e9c1ff;
+    --v2-green-400: #96e3a6ff;
+    --v2-green-500: #6bd586ff;
+    --v2-green-600: #49c970ff;
+    --v2-green-700: #2eaf5aff;
+    --v2-green-800: #198b43ff;
+    --v2-green-900: #1d783cff;
+    --v2-green-1000: #196130ff;
+    --v2-green-1100: #164c26ff;
+    --v2-green-1200: #14361dff;
 
     /* ── Cyan ── */
-    --v2-cyan-100: #E2F7FBFF;
-    --v2-cyan-200: #C4EDF4FF;
-    --v2-cyan-300: #A3E4EFFF;
-    --v2-cyan-400: #65D9EBFF;
-    --v2-cyan-500: #00C5DFFF;
-    --v2-cyan-600: #00ABCFFF;
-    --v2-cyan-700: #0096B8FF;
-    --v2-cyan-800: #007D9BFF;
-    --v2-cyan-900: #006C85FF;
-    --v2-cyan-1000: #005A6EFF;
-    --v2-cyan-1100: #004756FF;
-    --v2-cyan-1200: #00353FFF;
+    --v2-cyan-100: #e2f7fbff;
+    --v2-cyan-200: #c4edf4ff;
+    --v2-cyan-300: #a3e4efff;
+    --v2-cyan-400: #65d9ebff;
+    --v2-cyan-500: #00c5dfff;
+    --v2-cyan-600: #00abcfff;
+    --v2-cyan-700: #0096b8ff;
+    --v2-cyan-800: #007d9bff;
+    --v2-cyan-900: #006c85ff;
+    --v2-cyan-1000: #005a6eff;
+    --v2-cyan-1100: #004756ff;
+    --v2-cyan-1200: #00353fff;
 
     /* ── Blue ── */
-    --v2-blue-100: #ECF1FEFF;
-    --v2-blue-200: #D7E2FCFF;
-    --v2-blue-300: #C3D4FDFF;
-    --v2-blue-400: #A2BCFFFF;
-    --v2-blue-500: #7698FDFF;
-    --v2-blue-600: #3B5CF6FF;
-    --v2-blue-700: #3250DFFF;
-    --v2-blue-800: #2C47C8FF;
-    --v2-blue-900: #263FA9FF;
-    --v2-blue-1000: #22388FFF;
-    --v2-blue-1100: #1C2E70FF;
-    --v2-blue-1200: #1B2852FF;
+    --v2-blue-100: #ecf1feff;
+    --v2-blue-200: #d7e2fcff;
+    --v2-blue-300: #c3d4fdff;
+    --v2-blue-400: #a2bcffff;
+    --v2-blue-500: #7698fdff;
+    --v2-blue-600: #3b5cf6ff;
+    --v2-blue-700: #3250dfff;
+    --v2-blue-800: #2c47c8ff;
+    --v2-blue-900: #263fa9ff;
+    --v2-blue-1000: #22388fff;
+    --v2-blue-1100: #1c2e70ff;
+    --v2-blue-1200: #1b2852ff;
 
     /* ── Purple ── */
-    --v2-purple-100: #EBECFEFF;
-    --v2-purple-200: #D5D5FCFF;
-    --v2-purple-300: #B9B8F5FF;
-    --v2-purple-400: #9E99F7FF;
-    --v2-purple-500: #8271F8FF;
-    --v2-purple-600: #7152F4FF;
-    --v2-purple-700: #623BE2FF;
-    --v2-purple-800: #5230C2FF;
-    --v2-purple-900: #442AA1FF;
-    --v2-purple-1000: #361F83FF;
-    --v2-purple-1100: #2B1B6AFF;
-    --v2-purple-1200: #221358FF;
+    --v2-purple-100: #ebecfeff;
+    --v2-purple-200: #d5d5fcff;
+    --v2-purple-300: #b9b8f5ff;
+    --v2-purple-400: #9e99f7ff;
+    --v2-purple-500: #8271f8ff;
+    --v2-purple-600: #7152f4ff;
+    --v2-purple-700: #623be2ff;
+    --v2-purple-800: #5230c2ff;
+    --v2-purple-900: #442aa1ff;
+    --v2-purple-1000: #361f83ff;
+    --v2-purple-1100: #2b1b6aff;
+    --v2-purple-1200: #221358ff;
 
     /* ── Pink ── */
-    --v2-pink-100: #FDECF3FF;
-    --v2-pink-200: #F7D5E4FF;
-    --v2-pink-300: #FABCD8FF;
-    --v2-pink-400: #F799C6FF;
-    --v2-pink-500: #F26CB2FF;
-    --v2-pink-600: #F64AABFF;
-    --v2-pink-700: #E4429EFF;
-    --v2-pink-800: #C83D8BFF;
-    --v2-pink-900: #AA3576FF;
-    --v2-pink-1000: #8C2D61FF;
-    --v2-pink-1100: #6F284FFF;
-    --v2-pink-1200: #5C1D3FFF;
+    --v2-pink-100: #fdecf3ff;
+    --v2-pink-200: #f7d5e4ff;
+    --v2-pink-300: #fabcd8ff;
+    --v2-pink-400: #f799c6ff;
+    --v2-pink-500: #f26cb2ff;
+    --v2-pink-600: #f64aabff;
+    --v2-pink-700: #e4429eff;
+    --v2-pink-800: #c83d8bff;
+    --v2-pink-900: #aa3576ff;
+    --v2-pink-1000: #8c2d61ff;
+    --v2-pink-1100: #6f284fff;
+    --v2-pink-1200: #5c1d3fff;
   }
 }