diff --git a/apps/www/src/components/docs/search.tsx b/apps/www/src/components/docs/search.tsx
index e66779c03..d3c644915 100644
--- a/apps/www/src/components/docs/search.tsx
+++ b/apps/www/src/components/docs/search.tsx
@@ -231,7 +231,7 @@ export default function DocsSearch({ pageTree }: { pageTree: Root }) {
                 <Spinner size={5} aria-label='Searching docs' />
               ) : (
                 <EmptyState
-                  variant='empty1'
+                  variant='compact'
                   heading='No result found'
                   subHeading='The keyword you’re searching for isn’t in the document. Try a different term.'
                   icon={<WarningIcon />}
diff --git a/apps/www/src/content/docs/(overview)/upgrading.mdx b/apps/www/src/content/docs/(overview)/upgrading.mdx
index 82f756aad..f61d6da0f 100644
--- a/apps/www/src/content/docs/(overview)/upgrading.mdx
+++ b/apps/www/src/content/docs/(overview)/upgrading.mdx
@@ -7,6 +7,43 @@ One section per release, newest first, with only the changes that need action
 from you. The full record of every release, features and fixes included, is
 on [GitHub releases](https://github.com/raystack/apsara/releases).
 
+## Unreleased: variant and enum values are renamed
+
+Prop values are kebab-case, and a variant uses the same name as on other
+components. `Grid` takes `align` and `justify`, as `Flex` does.
+
+| Component | Before | After |
+|---|---|---|
+| `Input`, `TextArea`, `Search` `variant` | `default`, `borderless` | `outline`, `text` |
+| `FilterChip` `variant` | `default`, `text` | `outline`, `text` |
+| `Chip` `variant` | `outline`, `filled` | `outline`, `solid` |
+| `EmptyState` `variant` | `empty1`, `empty2` | `compact`, `page` |
+| `Grid` props | `alignItems`, `justifyContent` | `align`, `justify` |
+| `Grid` `justify` and `alignContent` values | `space-between`, `space-around`, `space-evenly` | `between`, `around`, `evenly` |
+| `CalendarPreview` scale | `halfYear` | `half-year` |
+
+```tsx
+// Before
+<Search variant="borderless" />
+<Chip variant="filled">Label</Chip>
+<EmptyState variant="empty2" icon={<Bell />} heading="No projects" />
+<Grid alignItems="center" justifyContent="space-between" />
+<CalendarPreview scales={['quarter', 'halfYear']} />
+
+// After
+<Search variant="text" />
+<Chip variant="solid">Label</Chip>
+<EmptyState variant="page" icon={<Bell />} heading="No projects" />
+<Grid align="center" justify="between" />
+<CalendarPreview scales={['quarter', 'half-year']} />
+```
+
+The scale name changes in `scales`, `scale`, `defaultScale`, `onScaleChange`,
+the `scale` field of a value, and the `data-scale` attribute. `scales` drops a
+name it does not know, so `'halfYear'` hides the half-year view without an
+error. Convert stored values that hold `scale: 'halfYear'`, and update CSS that
+selects `[data-scale="halfYear"]`.
+
 ## Unreleased: date filters compare whole days
 
 `DataView`, `DataTable` and `FilterChip` read and compare dates as calendar
diff --git a/apps/www/src/content/docs/ai-elements/prompt-input/index.mdx b/apps/www/src/content/docs/ai-elements/prompt-input/index.mdx
index 5e1089aac..cf74b20f5 100644
--- a/apps/www/src/content/docs/ai-elements/prompt-input/index.mdx
+++ b/apps/www/src/content/docs/ai-elements/prompt-input/index.mdx
@@ -215,7 +215,7 @@ arrive with their ids and your own `data` next to the text:
 
 ### Textarea
 
-The text field, built on `TextArea variant="borderless"`. It grows with its
+The text field, built on `TextArea variant="text"`. It grows with its
 content up to a max-height cap (override with
 `--prompt-input-textarea-max-height`), then scrolls.
 
@@ -308,7 +308,7 @@ Every rendered part carries a stable `data-slot` attribute for [styling and test
   usual.
 - Each chip has an accessible name, like `"mention: DataTable"`.
 - The composer frame carries the focus treatment, so the border tints when a
-  child has visible focus (`:has(:focus-visible)`), while the borderless
+  child has visible focus (`:has(:focus-visible)`), while the `text` variant
   input suppresses its own duplicate focus ring.
 - Click-to-focus runs on `mousedown` and cancels the default focus shift, so
   focus never leaves the input and back again, a round trip that would dismiss
diff --git a/apps/www/src/content/docs/components/calendar-preview/demo.ts b/apps/www/src/content/docs/components/calendar-preview/demo.ts
index e7b290e2a..a4ee93dfd 100644
--- a/apps/www/src/content/docs/components/calendar-preview/demo.ts
+++ b/apps/www/src/content/docs/components/calendar-preview/demo.ts
@@ -173,7 +173,7 @@ export const periodsDemo = {
     {
       name: 'All scales',
       code: `<CalendarPreview
-              scales={['day', 'month', 'quarter', 'halfYear', 'year']}
+              scales={['day', 'month', 'quarter', 'half-year', 'year']}
               defaultMonth={new Date(2026, 7, 1)}
               defaultScale="quarter"
             >
@@ -183,7 +183,7 @@ export const periodsDemo = {
     {
       name: 'In a popover',
       code: `<CalendarPreview
-              scales={['day', 'month', 'quarter', 'halfYear', 'year']}
+              scales={['day', 'month', 'quarter', 'half-year', 'year']}
               defaultMonth={new Date(2026, 7, 1)}
             >
               <CalendarPreview.Trigger placeholder="Add start date" />
@@ -218,7 +218,7 @@ export const periodsDemo = {
     {
       name: 'Trailing value',
       code: `function CalendarPreviewTrailingExample() {
-  const scales = ['day', 'month', 'quarter', 'halfYear', 'year'];
+  const scales = ['day', 'month', 'quarter', 'half-year', 'year'];
   const [start, setStart] = React.useState({ date: '2026-07-01', scale: 'quarter' });
   const [end, setEnd] = React.useState({ date: '2026-09-30', scale: 'quarter' });
 
@@ -294,7 +294,7 @@ export const limitsDemo = {
     {
       name: 'Bounded periods',
       code: `<CalendarPreview
-              scales={['month', 'quarter', 'halfYear']}
+              scales={['month', 'quarter', 'half-year']}
               defaultScale="quarter"
               trailingValue
               minDate={new Date(2026, 6, 15)}
diff --git a/apps/www/src/content/docs/components/calendar-preview/props.ts b/apps/www/src/content/docs/components/calendar-preview/props.ts
index ca71b6958..4e3454876 100644
--- a/apps/www/src/content/docs/components/calendar-preview/props.ts
+++ b/apps/www/src/content/docs/components/calendar-preview/props.ts
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-type Scale = 'day' | 'month' | 'quarter' | 'halfYear' | 'year';
+type Scale = 'day' | 'month' | 'quarter' | 'half-year' | 'year';
 
 export interface CalendarPreviewProps {
   /**
@@ -331,7 +331,7 @@ export interface UseCalendarReturn {
    * The granularity the value is committed at. Read-only — switching scale is
    * `.Scales` and `.Scale`, which take `render` for custom chrome.
    */
-  scale: 'day' | 'month' | 'quarter' | 'halfYear' | 'year';
+  scale: 'day' | 'month' | 'quarter' | 'half-year' | 'year';
 
   /** The range mid-build, at `selection="range"`. Never emitted. */
   draft: { from?: Date; to?: Date } | null;
diff --git a/apps/www/src/content/docs/components/chip/demo.ts b/apps/www/src/content/docs/components/chip/demo.ts
index b6303e8d5..273ab08b4 100644
--- a/apps/www/src/content/docs/components/chip/demo.ts
+++ b/apps/www/src/content/docs/components/chip/demo.ts
@@ -14,7 +14,7 @@ export const playground = {
   controls: {
     variant: {
       type: 'select',
-      options: ['outline', 'filled'],
+      options: ['outline', 'solid'],
       defaultValue: 'outline'
     },
     size: {
@@ -46,7 +46,7 @@ export const variantsDemo = {
   code: `
   <Flex gap={9}>
     <Chip variant="outline">Outline</Chip>
-    <Chip variant="filled">Filled</Chip>
+    <Chip variant="solid">Solid</Chip>
   </Flex>`
 };
 
@@ -71,11 +71,11 @@ export const colorDemo = {
       <Chip color="warning" variant="outline">Warning</Chip>
     </Flex>
     <Flex gap={9}>
-      <Chip color="neutral" variant="filled">Neutral</Chip>
-      <Chip color="accent" variant="filled">Accent</Chip>
-      <Chip color="danger" variant="filled">Danger</Chip>
-      <Chip color="success" variant="filled">Success</Chip>
-      <Chip color="warning" variant="filled">Warning</Chip>
+      <Chip color="neutral" variant="solid">Neutral</Chip>
+      <Chip color="accent" variant="solid">Accent</Chip>
+      <Chip color="danger" variant="solid">Danger</Chip>
+      <Chip color="success" variant="solid">Success</Chip>
+      <Chip color="warning" variant="solid">Warning</Chip>
     </Flex>
   </Flex>`
 };
@@ -86,7 +86,7 @@ export const dismissableDemo = {
   <Flex gap={9}>
     <Chip isDismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
     <Chip variant="outline" color="accent" isDismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
-    <Chip variant="filled" color="accent" isDismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
+    <Chip variant="solid" color="accent" isDismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
   </Flex>`
 };
 
@@ -98,7 +98,7 @@ export const iconsDemo = {
       code: `
       <div style={{ display: 'flex', gap: '10px' }}>
         <Chip leadingIcon={'O'}>Add Item</Chip>
-        <Chip variant="filled" leadingIcon={'O'} data-state="active">Selected</Chip>
+        <Chip variant="solid" leadingIcon={'O'} data-state="active">Selected</Chip>
       </div>`
     },
     {
@@ -106,7 +106,7 @@ export const iconsDemo = {
       code: `
       <div style={{ display: 'flex', gap: '10px' }}>
         <Chip trailingIcon={'O'}>Next</Chip>
-        <Chip variant="filled" trailingIcon={'O'}>Open</Chip>
+        <Chip variant="solid" trailingIcon={'O'}>Open</Chip>
       </div>`
     },
     {
@@ -114,7 +114,7 @@ export const iconsDemo = {
       code: `
       <div style={{ display: 'flex', gap: '10px' }}>
         <Chip leadingIcon={'O'} trailingIcon={'O'}>Download</Chip>
-        <Chip variant="filled" leadingIcon={'O'} trailingIcon={'O'}>Edit Profile</Chip>
+        <Chip variant="solid" leadingIcon={'O'} trailingIcon={'O'}>Edit Profile</Chip>
       </div>`
     }
   ]
diff --git a/apps/www/src/content/docs/components/chip/index.mdx b/apps/www/src/content/docs/components/chip/index.mdx
index dfc3c1bb4..874d21ff7 100644
--- a/apps/www/src/content/docs/components/chip/index.mdx
+++ b/apps/www/src/content/docs/components/chip/index.mdx
@@ -31,7 +31,7 @@ Appearance first, meaning variant, size and color, then the two things a chip ca
 
 ### Variant
 
-Choose between outline and filled variants to match your design needs.
+Choose between `outline` and `solid` variants. `solid` fills the chip with the base background.
 
 <Demo data={variantsDemo} />
 
diff --git a/apps/www/src/content/docs/components/chip/props.ts b/apps/www/src/content/docs/components/chip/props.ts
index 09aff3b13..0cfdf14d0 100644
--- a/apps/www/src/content/docs/components/chip/props.ts
+++ b/apps/www/src/content/docs/components/chip/props.ts
@@ -3,7 +3,7 @@ export interface ChipProps {
    * Visual style variant
    * @defaultValue "outline"
    */
-  variant?: 'outline' | 'filled';
+  variant?: 'outline' | 'solid';
 
   /**
    * Size of the chip
diff --git a/apps/www/src/content/docs/components/empty-state/demo.ts b/apps/www/src/content/docs/components/empty-state/demo.ts
index 63d430a17..0954cdd9e 100644
--- a/apps/www/src/content/docs/components/empty-state/demo.ts
+++ b/apps/www/src/content/docs/components/empty-state/demo.ts
@@ -22,8 +22,8 @@ export const playground = {
   controls: {
     variant: {
       type: 'select',
-      initialValue: 'empty1',
-      options: ['empty1', 'empty2']
+      defaultValue: 'compact',
+      options: ['compact', 'page']
     },
     heading: {
       type: 'text',
@@ -57,7 +57,7 @@ export const variantsDemo = {
   code: `
   <Flex gap={9}>
     <EmptyState
-      variant="empty1"
+      variant="compact"
       icon={<Bell size={16} strokeWidth={1.5} />}
       heading="No notifications yet"
       subHeading="When you have notifications, they will appear here"
@@ -69,7 +69,7 @@ export const variantsDemo = {
       }
     />
     <EmptyState
-      variant="empty2"
+      variant="page"
       icon={<Bell size={16} strokeWidth={1.5} />}
       heading="Organization"
       subHeading="An organization in Aurora is a shared workspace where teams manage projects, AOIs, and image orders. It streamlines collaboration, analysis, and decision-making across industries."
diff --git a/apps/www/src/content/docs/components/empty-state/index.mdx b/apps/www/src/content/docs/components/empty-state/index.mdx
index f8986d236..d26845d48 100644
--- a/apps/www/src/content/docs/components/empty-state/index.mdx
+++ b/apps/www/src/content/docs/components/empty-state/index.mdx
@@ -14,7 +14,7 @@ import { playground, variantsDemo,
 
 `EmptyState` fills a view that has no content yet: an empty inbox, zero search results, a feature that needs setup. It pairs a required `icon` with an optional `heading`, `subHeading`, and up to two action slots (`primaryAction`, `secondaryAction`) so users always have a next step.
 
-Use `empty1`, the default, for compact centered placeholders inside panels and lists. Use `empty2` for full-page states, which left-align the content and put the actions in a side-by-side row.
+Use `compact`, the default, for centered placeholders inside panels and lists. Use `page` for full-page states, which left-align the content and put the actions in a side-by-side row.
 
 ## Anatomy
 
@@ -33,7 +33,7 @@ Pick the variant that suits the space, then fill in the icon, the message and up
 
 ### Variants
 
-`empty1` (the default) centers everything and stacks the actions vertically, which suits panels, tables, and lists. `empty2` left-aligns the content, uses a larger icon, and places both actions in a row, which suits full-page states.
+`compact` (the default) centers everything and stacks the actions vertically, which suits panels, tables, and lists. `page` left-aligns the content, uses a larger icon, and places both actions in a row, which suits full-page states.
 
 <Demo data={variantsDemo} />
 
@@ -61,7 +61,7 @@ Every rendered part carries a stable `data-slot` attribute for [styling and test
 | `empty-state-content` | Wrapper around the heading and subheading |
 | `empty-state-heading` | The heading text (when `heading` is set) |
 | `empty-state-subheading` | The subheading text (when `subHeading` is set) |
-| `empty-state-actions` | Wrapper around the action buttons (`empty2` variant only) |
+| `empty-state-actions` | Wrapper around the action buttons (`page` variant only) |
 
 ## Accessibility
 
diff --git a/apps/www/src/content/docs/components/empty-state/props.ts b/apps/www/src/content/docs/components/empty-state/props.ts
index 5bbab566a..eab9329b1 100644
--- a/apps/www/src/content/docs/components/empty-state/props.ts
+++ b/apps/www/src/content/docs/components/empty-state/props.ts
@@ -14,8 +14,8 @@ export interface EmptyStateProps {
   /** Secondary action to show in empty state like button or link */
   secondaryAction?: React.ReactNode;
 
-  /** Visual style variant of the empty state
-   * @default "empty1"
+  /** Layout of the empty state
+   * @default "compact"
    */
-  variant?: 'empty1' | 'empty2';
+  variant?: 'compact' | 'page';
 }
diff --git a/apps/www/src/content/docs/components/filter-chip/demo.ts b/apps/www/src/content/docs/components/filter-chip/demo.ts
index 3bd964aba..9dda3768e 100644
--- a/apps/www/src/content/docs/components/filter-chip/demo.ts
+++ b/apps/www/src/content/docs/components/filter-chip/demo.ts
@@ -29,8 +29,8 @@ export const playground = {
     },
     variant: {
       type: 'select',
-      options: ['default', 'text'],
-      defaultValue: 'default'
+      options: ['outline', 'text'],
+      defaultValue: 'outline'
     },
     label: {
       type: 'text',
diff --git a/apps/www/src/content/docs/components/filter-chip/props.ts b/apps/www/src/content/docs/components/filter-chip/props.ts
index 161f1f715..c71fd2f52 100644
--- a/apps/www/src/content/docs/components/filter-chip/props.ts
+++ b/apps/www/src/content/docs/components/filter-chip/props.ts
@@ -16,9 +16,9 @@ export interface FilterChipProps {
   columnType?: 'select' | 'multiselect' | 'date' | 'string' | 'number';
 
   /** Filterchip variant
-   * @default "default"
+   * @default "outline"
    */
-  variant?: 'default' | 'text';
+  variant?: 'outline' | 'text';
 
   /** Array of options for the select and multiselect type inputs */
   options?: { label: string; value: string | number | boolean }[];
diff --git a/apps/www/src/content/docs/components/grid/demo.ts b/apps/www/src/content/docs/components/grid/demo.ts
index 6f7eb6644..ddec9ea4d 100644
--- a/apps/www/src/content/docs/components/grid/demo.ts
+++ b/apps/www/src/content/docs/components/grid/demo.ts
@@ -41,7 +41,7 @@ export const playground = {
       options: ['start', 'end', 'center', 'stretch'],
       initialValue: 'center'
     },
-    alignItems: {
+    align: {
       type: 'select',
       options: ['start', 'end', 'center', 'stretch'],
       initialValue: 'center'
@@ -94,7 +94,7 @@ export const areasDemo = {
 export const alignmentDemo = {
   type: 'code',
   code: `
-<Grid columns={3} gap={3} rows="80px" alignItems="center" justifyItems="center">
+<Grid columns={3} gap={3} rows="80px" align="center" justifyItems="center">
   <Grid.Item style={{ background: 'var(--rs-color-background-base-primary-hover)', border: '1px solid var(--rs-color-border-base-primary)', borderRadius: 4, padding: 12, fontSize: 13 }}>centered</Grid.Item>
   <Grid.Item alignSelf="start" style={{ background: 'var(--rs-color-background-base-primary-hover)', border: '1px solid var(--rs-color-border-base-primary)', borderRadius: 4, padding: 12, fontSize: 13 }}>alignSelf start</Grid.Item>
   <Grid.Item alignSelf="end" style={{ background: 'var(--rs-color-background-base-primary-hover)', border: '1px solid var(--rs-color-border-base-primary)', borderRadius: 4, padding: 12, fontSize: 13 }}>alignSelf end</Grid.Item>
diff --git a/apps/www/src/content/docs/components/grid/index.mdx b/apps/www/src/content/docs/components/grid/index.mdx
index 48d9516d4..76cff8b36 100644
--- a/apps/www/src/content/docs/components/grid/index.mdx
+++ b/apps/www/src/content/docs/components/grid/index.mdx
@@ -60,7 +60,7 @@ Reach for Grid when the layout is two-dimensional: rows *and* columns that have
 
 ### Alignment
 
-`justifyItems` and `alignItems` position every item inside its own cell. `justifySelf` and `alignSelf` override that for one item.
+`justifyItems` and `align` position every item inside its own cell. `justifySelf` and `alignSelf` override that for one item.
 
 <Demo data={alignmentDemo} />
 
diff --git a/apps/www/src/content/docs/components/grid/props.ts b/apps/www/src/content/docs/components/grid/props.ts
index f909e3c5b..297b2451e 100644
--- a/apps/www/src/content/docs/components/grid/props.ts
+++ b/apps/www/src/content/docs/components/grid/props.ts
@@ -111,21 +111,21 @@ export interface GridProps {
   justifyItems?: 'start' | 'end' | 'center' | 'stretch';
 
   /**
-   * Aligns grid items along the block (column) axis.
+   * Aligns grid items along the block (column) axis. Sets `align-items`.
    */
-  alignItems?: 'start' | 'end' | 'center' | 'stretch';
+  align?: 'start' | 'end' | 'center' | 'stretch';
 
   /**
-   * Aligns the entire grid along the inline (row) axis.
+   * Aligns the entire grid along the inline (row) axis. Sets `justify-content`.
    */
-  justifyContent?:
+  justify?:
     | 'start'
     | 'end'
     | 'center'
     | 'stretch'
-    | 'space-around'
-    | 'space-between'
-    | 'space-evenly';
+    | 'between'
+    | 'around'
+    | 'evenly';
 
   /**
    * Aligns the entire grid along the block (column) axis.
@@ -135,9 +135,9 @@ export interface GridProps {
     | 'end'
     | 'center'
     | 'stretch'
-    | 'space-around'
-    | 'space-between'
-    | 'space-evenly';
+    | 'between'
+    | 'around'
+    | 'evenly';
 
   /**
    * Renders the grid as an inline element instead of a block element.
diff --git a/apps/www/src/content/docs/components/input/props.ts b/apps/www/src/content/docs/components/input/props.ts
index cd5a5dba4..95658ca34 100644
--- a/apps/www/src/content/docs/components/input/props.ts
+++ b/apps/www/src/content/docs/components/input/props.ts
@@ -33,9 +33,9 @@ export interface InputProps {
 
   /**
    * Visual variant of the input.
-   * @defaultValue "default"
+   * @defaultValue "outline"
    */
-  variant?: 'default' | 'borderless';
+  variant?: 'outline' | 'text';
 
   /** Ref to the outer container div. */
   containerRef?: React.RefObject<HTMLDivElement | null>;
diff --git a/apps/www/src/content/docs/components/search/props.ts b/apps/www/src/content/docs/components/search/props.ts
index 91fff7996..14e9b88bc 100644
--- a/apps/www/src/content/docs/components/search/props.ts
+++ b/apps/www/src/content/docs/components/search/props.ts
@@ -11,6 +11,12 @@ export interface SearchProps {
   /** Whether the search input is disabled. */
   disabled?: boolean;
 
+  /**
+   * Visual variant of the search input.
+   * @default outline
+   */
+  variant?: 'outline' | 'text';
+
   /**
    * Icon before the input. Pass `null` to hide it.
    * @default <SearchIcon />
diff --git a/apps/www/src/content/docs/components/textarea/demo.ts b/apps/www/src/content/docs/components/textarea/demo.ts
index c0db36fab..129d8ecf0 100644
--- a/apps/www/src/content/docs/components/textarea/demo.ts
+++ b/apps/www/src/content/docs/components/textarea/demo.ts
@@ -21,8 +21,8 @@ export const playground = {
     },
     variant: {
       type: 'select',
-      options: ['default', 'borderless'],
-      defaultValue: 'default'
+      options: ['outline', 'text'],
+      defaultValue: 'outline'
     },
     rows: {
       type: 'number',
@@ -95,8 +95,8 @@ export const sizeDemo = {
 export const variantDemo = {
   type: 'code',
   code: `<Flex direction="column" gap={5} style={{ width: 400 }}>
-  <TextArea placeholder="Default variant" />
-  <TextArea placeholder="Borderless variant" variant="borderless" />
+  <TextArea placeholder="Outline variant (default)" />
+  <TextArea placeholder="Text variant" variant="text" />
 </Flex>`
 };
 
diff --git a/apps/www/src/content/docs/components/textarea/index.mdx b/apps/www/src/content/docs/components/textarea/index.mdx
index 4f013617e..3d0c36135 100644
--- a/apps/www/src/content/docs/components/textarea/index.mdx
+++ b/apps/www/src/content/docs/components/textarea/index.mdx
@@ -55,7 +55,7 @@ TextArea comes in two sizes: `large` (default) and `small`.
 
 ### Visual variants
 
-TextArea supports `default` and `borderless` visual variants.
+TextArea supports `outline` (default) and `text` visual variants. `text` has no border.
 
 <Demo data={variantDemo} />
 
diff --git a/apps/www/src/content/docs/components/textarea/props.ts b/apps/www/src/content/docs/components/textarea/props.ts
index 90b2bcb32..4c53f8a0c 100644
--- a/apps/www/src/content/docs/components/textarea/props.ts
+++ b/apps/www/src/content/docs/components/textarea/props.ts
@@ -7,9 +7,9 @@ export interface TextAreaProps {
 
   /**
    * Visual variant of the textarea.
-   * @defaultValue "default"
+   * @defaultValue "outline"
    */
-  variant?: 'default' | 'borderless';
+  variant?: 'outline' | 'text';
 
   /** Whether the textarea is disabled. */
   disabled?: boolean;
diff --git a/packages/react/components/calendar-preview/__tests__/calendar-preview.test.tsx b/packages/react/components/calendar-preview/__tests__/calendar-preview.test.tsx
index 5943618d2..b2e4cd882 100644
--- a/packages/react/components/calendar-preview/__tests__/calendar-preview.test.tsx
+++ b/packages/react/components/calendar-preview/__tests__/calendar-preview.test.tsx
@@ -1442,10 +1442,10 @@ describe('defaultFormatValue', () => {
     const value = { date: '2026-08-31', scale: 'month' as const };
     expect(defaultFormatValue(value, 'month')).toBe('Aug 2026');
     expect(defaultFormatValue(value, 'quarter')).toBe('Q3 2026');
-    expect(defaultFormatValue(value, 'halfYear')).toBe('H2 2026');
+    expect(defaultFormatValue(value, 'half-year')).toBe('H2 2026');
     expect(defaultFormatValue(value, 'year')).toBe('2026');
     expect(
-      defaultFormatValue({ date: '2026-02-01', scale: 'day' }, 'halfYear')
+      defaultFormatValue({ date: '2026-02-01', scale: 'day' }, 'half-year')
     ).toBe('H1 2026');
   });
 });
diff --git a/packages/react/components/calendar-preview/__tests__/parse.test.ts b/packages/react/components/calendar-preview/__tests__/parse.test.ts
index 6dd4eb1f5..e2ca1903b 100644
--- a/packages/react/components/calendar-preview/__tests__/parse.test.ts
+++ b/packages/react/components/calendar-preview/__tests__/parse.test.ts
@@ -110,18 +110,18 @@ describe('parseScaleInput — half-year', () => {
   ])('reads %s at both edges', (input, leading, trailing) => {
     expect(parseScaleInput(input, IN_2026)).toEqual({
       date: leading,
-      scale: 'halfYear'
+      scale: 'half-year'
     });
     expect(parseScaleInput(input, { ...IN_2026, trailing: true })).toEqual({
       date: trailing,
-      scale: 'halfYear'
+      scale: 'half-year'
     });
   });
 
   it('is case-insensitive', () => {
     expect(parseScaleInput('h2 2026', IN_2026)).toEqual({
       date: '2026-07-01',
-      scale: 'halfYear'
+      scale: 'half-year'
     });
   });
 });
@@ -146,8 +146,8 @@ describe('parseScaleInput — year inference for a bare period', () => {
   it.each([
     ['Q4', { date: '2026-10-01', scale: 'quarter' }],
     ['Q1', { date: '2026-01-01', scale: 'quarter' }],
-    ['H1', { date: '2026-01-01', scale: 'halfYear' }],
-    ['H2', { date: '2026-07-01', scale: 'halfYear' }],
+    ['H1', { date: '2026-01-01', scale: 'half-year' }],
+    ['H2', { date: '2026-07-01', scale: 'half-year' }],
     ['May', { date: '2026-05-01', scale: 'month' }],
     ['Dec', { date: '2026-12-01', scale: 'month' }]
   ])('resolves %s into the reference year', (input, expected) => {
@@ -242,7 +242,7 @@ describe('parseScaleInput reads what defaultFormatValue displays', () => {
     { date: '2026-08-15', scale: 'day' },
     { date: '2026-08-01', scale: 'month' },
     { date: '2026-07-01', scale: 'quarter' },
-    { date: '2026-07-01', scale: 'halfYear' },
+    { date: '2026-07-01', scale: 'half-year' },
     { date: '2026-01-01', scale: 'year' }
   ] as const)('round-trips $scale', value => {
     expect(parseScaleInput(defaultFormatValue(value, value.scale))).toEqual(
diff --git a/packages/react/components/calendar-preview/__tests__/scale-selection.test.tsx b/packages/react/components/calendar-preview/__tests__/scale-selection.test.tsx
index 75b1b9ed7..3dd5c4295 100644
--- a/packages/react/components/calendar-preview/__tests__/scale-selection.test.tsx
+++ b/packages/react/components/calendar-preview/__tests__/scale-selection.test.tsx
@@ -6,7 +6,7 @@ import { CalendarPreview } from '../calendar-preview';
 import type { Scale } from '../lib/scale';
 
 const TODAY = new Date(2026, 7, 15);
-const ALL: Scale[] = ['day', 'month', 'quarter', 'halfYear', 'year'];
+const ALL: Scale[] = ['day', 'month', 'quarter', 'half-year', 'year'];
 
 function renderBody(props = {}) {
   return render(
@@ -69,7 +69,7 @@ describe('CalendarPreview trailingValue', () => {
   it.each([
     ['month', 'Aug', '2026-08-01', '2026-08-31'],
     ['quarter', 'Q3', '2026-07-01', '2026-09-30'],
-    ['halfYear', 'H2', '2026-07-01', '2026-12-31'],
+    ['half-year', 'H2', '2026-07-01', '2026-12-31'],
     ['year', '2026', '2026-01-01', '2026-12-31']
   ] as const)('flips the emitted edge for %s', (scale, label, lead, trail) => {
     for (const [trailing, expected] of [
@@ -124,7 +124,7 @@ describe('CalendarPreview availability differs by field', () => {
 
   it('disables H1 2026 for an end field, which would emit 30 June', () => {
     const { container } = renderBody({ ...bounded, trailingValue: true });
-    switchTo(container, 'halfYear');
+    switchTo(container, 'half-year');
     expect(period(container, 'H1')).toBeDisabled();
     expect(period(container, 'H2')).not.toBeDisabled();
   });
@@ -397,7 +397,7 @@ describe('CalendarPreview period views mount alone', () => {
   it.each([
     ['quarter', CalendarPreview.Quarters, 'calendar-preview-quarters'],
     ['month', CalendarPreview.Months, 'calendar-preview-months'],
-    ['halfYear', CalendarPreview.HalfYears, 'calendar-preview-half-years'],
+    ['half-year', CalendarPreview.HalfYears, 'calendar-preview-half-years'],
     ['year', CalendarPreview.Years, 'calendar-preview-years']
   ] as const)('%s renders with no other view in the tree', (scale, View, slot) => {
     const { container } = render(
@@ -422,7 +422,7 @@ describe('CalendarPreview.Trigger annotation', () => {
     ['day', '2026-07-02', '02 Jul 2026'],
     ['month', '2026-06-01', 'Jun 2026'],
     ['quarter', '2026-07-01', 'Q3 2026'],
-    ['halfYear', '2026-01-01', 'H1 2026'],
+    ['half-year', '2026-01-01', 'H1 2026'],
     ['year', '2025-01-01', '2025']
   ] as const)('formats %s with no popover open', (scale, date, expected) => {
     const { container } = render(
@@ -1143,7 +1143,7 @@ describe('CalendarPreview period cells match the value scale', () => {
   it('does not light a quarter for a half-year value', () => {
     const { container } = renderBody({
       defaultScale: 'quarter',
-      value: { date: '2028-01-01', scale: 'halfYear' }
+      value: { date: '2028-01-01', scale: 'half-year' }
     });
     expect(marked(container)).toEqual([]);
   });
diff --git a/packages/react/components/calendar-preview/__tests__/scale.test.ts b/packages/react/components/calendar-preview/__tests__/scale.test.ts
index 3a55cc1b4..2854ae564 100644
--- a/packages/react/components/calendar-preview/__tests__/scale.test.ts
+++ b/packages/react/components/calendar-preview/__tests__/scale.test.ts
@@ -15,7 +15,7 @@ const TRAILING = true;
 
 describe('SCALES / isScale', () => {
   it('lists the five scales finest first', () => {
-    expect(SCALES).toEqual(['day', 'month', 'quarter', 'halfYear', 'year']);
+    expect(SCALES).toEqual(['day', 'month', 'quarter', 'half-year', 'year']);
   });
 
   it.each(SCALES)('accepts %s', scale => {
@@ -60,7 +60,7 @@ describe('periodOf', () => {
     ['2026-07-01', { start: '2026-07-01', end: '2026-12-31' }],
     ['2026-12-31', { start: '2026-07-01', end: '2026-12-31' }]
   ])('splits the half-year at 30 June for %s', (day, expected) => {
-    expect(periodOf(day, 'halfYear')).toEqual(expected);
+    expect(periodOf(day, 'half-year')).toEqual(expected);
   });
 
   it.each([
@@ -112,7 +112,7 @@ describe('periodOf — leap years and month ends', () => {
   });
 
   it('keeps the half-year and year edges fixed across a leap year', () => {
-    expect(periodOf('2028-02-29', 'halfYear')).toEqual({
+    expect(periodOf('2028-02-29', 'half-year')).toEqual({
       start: '2028-01-01',
       end: '2028-06-30'
     });
@@ -140,14 +140,14 @@ describe('convertScale — every direction', () => {
     day: '2026-08-15',
     month: '2026-08-01',
     quarter: '2026-07-01',
-    halfYear: '2026-07-01',
+    'half-year': '2026-07-01',
     year: '2026-01-01'
   };
   const trailing: Record<Scale, string> = {
     day: '2026-08-15',
     month: '2026-08-31',
     quarter: '2026-09-30',
-    halfYear: '2026-12-31',
+    'half-year': '2026-12-31',
     year: '2026-12-31'
   };
 
@@ -194,9 +194,9 @@ describe('convertScale — every direction', () => {
       date: '2026-12-31',
       scale: 'quarter'
     });
-    expect(convertScale(december, 'halfYear', LEADING)).toEqual({
+    expect(convertScale(december, 'half-year', LEADING)).toEqual({
       date: '2026-07-01',
-      scale: 'halfYear'
+      scale: 'half-year'
     });
   });
 
@@ -268,8 +268,8 @@ describe('isAvailable', () => {
     const trailing = TRAILING;
 
     it('disables H1 2026, which emits 30 June', () => {
-      expect(periodOf('2026-01-01', 'halfYear').end).toBe('2026-06-30');
-      expect(isAvailable('2026-01-01', 'halfYear', { trailing, min })).toBe(
+      expect(periodOf('2026-01-01', 'half-year').end).toBe('2026-06-30');
+      expect(isAvailable('2026-01-01', 'half-year', { trailing, min })).toBe(
         false
       );
     });
@@ -292,7 +292,7 @@ describe('isAvailable', () => {
 
     it('tests the produced date, not the period start', () => {
       for (const [day, scale] of [
-        ['2026-01-01', 'halfYear'],
+        ['2026-01-01', 'half-year'],
         ['2026-07-01', 'month'],
         ['2026-07-01', 'quarter']
       ] as const) {
@@ -304,7 +304,7 @@ describe('isAvailable', () => {
   it('agrees with the period-start rule whenever trailing is false', () => {
     const min = '2026-07-15';
     for (const [day, scale] of [
-      ['2026-01-01', 'halfYear'],
+      ['2026-01-01', 'half-year'],
       ['2026-07-01', 'month'],
       ['2026-07-01', 'quarter'],
       ['2026-08-01', 'month']
diff --git a/packages/react/components/calendar-preview/calendar-preview-periods.tsx b/packages/react/components/calendar-preview/calendar-preview-periods.tsx
index c8256d108..f894e10fc 100644
--- a/packages/react/components/calendar-preview/calendar-preview-periods.tsx
+++ b/packages/react/components/calendar-preview/calendar-preview-periods.tsx
@@ -36,7 +36,7 @@ function cellsFor(scale: Scale, year: number): Cell[] {
     );
   } else if (scale === 'quarter') {
     cells = [0, 1, 2, 3].map(q => at(`${year}-q${q}`, `Q${q + 1}`, q * 3 + 1));
-  } else if (scale === 'halfYear') {
+  } else if (scale === 'half-year') {
     cells = [0, 1].map(h => at(`${year}-h${h}`, `H${h + 1}`, h * 6 + 1));
   } else {
     cells = [at(`${year}`, String(year), 1)];
@@ -217,7 +217,7 @@ export function CalendarPreviewHalfYears(
   return (
     <PeriodView
       {...props}
-      scale='halfYear'
+      scale='half-year'
       columns={2}
       slot='calendar-preview-half-years'
     />
diff --git a/packages/react/components/calendar-preview/calendar-preview-scales.tsx b/packages/react/components/calendar-preview/calendar-preview-scales.tsx
index d8a340191..a9b38bdaf 100644
--- a/packages/react/components/calendar-preview/calendar-preview-scales.tsx
+++ b/packages/react/components/calendar-preview/calendar-preview-scales.tsx
@@ -9,7 +9,7 @@ const LABELS: Record<Scale, string> = {
   day: 'Day',
   month: 'Month',
   quarter: 'Quarter',
-  halfYear: 'Half-year',
+  'half-year': 'Half-year',
   year: 'Year'
 };
 
diff --git a/packages/react/components/calendar-preview/lib/parse.ts b/packages/react/components/calendar-preview/lib/parse.ts
index 9a0de8033..06cbf7560 100644
--- a/packages/react/components/calendar-preview/lib/parse.ts
+++ b/packages/react/components/calendar-preview/lib/parse.ts
@@ -62,7 +62,7 @@ export function parseScaleInput(
   const half = HALF_YEAR.exec(text);
   if (half) {
     const year = yearFrom(half[2], referenceDate);
-    return at(year, half[1] === '1' ? 1 : 7, 'halfYear', trailing);
+    return at(year, half[1] === '1' ? 1 : 7, 'half-year', trailing);
   }
 
   const year = YEAR.exec(text);
diff --git a/packages/react/components/calendar-preview/lib/scale.ts b/packages/react/components/calendar-preview/lib/scale.ts
index 84098f31b..9a9333ddf 100644
--- a/packages/react/components/calendar-preview/lib/scale.ts
+++ b/packages/react/components/calendar-preview/lib/scale.ts
@@ -7,7 +7,7 @@ import {
   startOfMonthKey
 } from '../date-adapter';
 
-export type Scale = 'day' | 'month' | 'quarter' | 'halfYear' | 'year';
+export type Scale = 'day' | 'month' | 'quarter' | 'half-year' | 'year';
 
 export interface ScaleValue {
   date: DayKey;
@@ -23,7 +23,7 @@ export const SCALES: readonly Scale[] = [
   'day',
   'month',
   'quarter',
-  'halfYear',
+  'half-year',
   'year'
 ];
 
@@ -55,7 +55,7 @@ const FIXED_EDGES: Record<
   (month: number) => readonly [string, string]
 > = {
   quarter: month => QUARTERS[Math.floor((month - 1) / 3)],
-  halfYear: month => (month <= 6 ? ['01-01', '06-30'] : ['07-01', '12-31']),
+  'half-year': month => (month <= 6 ? ['01-01', '06-30'] : ['07-01', '12-31']),
   year: () => ['01-01', '12-31']
 };
 
diff --git a/packages/react/components/chip/__tests__/chip.test.tsx b/packages/react/components/chip/__tests__/chip.test.tsx
index b5e9ad76a..6002bc417 100644
--- a/packages/react/components/chip/__tests__/chip.test.tsx
+++ b/packages/react/components/chip/__tests__/chip.test.tsx
@@ -60,7 +60,7 @@ describe('Chip', () => {
   });
 
   describe('Variants', () => {
-    const variants = ['outline', 'filled'] as const;
+    const variants = ['outline', 'solid'] as const;
 
     it.each(variants)('renders %s variant correctly', variant => {
       render(<Chip variant={variant}>Test Chip</Chip>);
diff --git a/packages/react/components/chip/chip.module.css b/packages/react/components/chip/chip.module.css
index b87320265..a874423d5 100644
--- a/packages/react/components/chip/chip.module.css
+++ b/packages/react/components/chip/chip.module.css
@@ -38,9 +38,9 @@
   --chip-fg-hover: var(--rs-color-foreground-base-primary);
   --chip-fg-active: var(--rs-color-foreground-base-primary);
   /* A foreground token as the border color. */
-  --chip-filled-border-hover: var(--rs-color-foreground-base-primary);
-  --chip-filled-fg-hover: var(--rs-color-foreground-base-primary);
-  --chip-filled-bg-active: var(--rs-color-background-neutral-primary);
+  --chip-solid-border-hover: var(--rs-color-foreground-base-primary);
+  --chip-solid-fg-hover: var(--rs-color-foreground-base-primary);
+  --chip-solid-bg-active: var(--rs-color-background-neutral-primary);
 }
 
 .chip-color-accent {
@@ -50,10 +50,10 @@
   --chip-fg: var(--rs-color-foreground-accent-primary);
   --chip-fg-hover: var(--rs-color-foreground-accent-primary-hover);
   --chip-fg-active: var(--rs-color-foreground-accent-primary);
-  --chip-filled-border-hover: var(--rs-color-border-accent-emphasis);
-  /* Accent filled hover changes the border only, not the text. */
-  --chip-filled-fg-hover: var(--rs-color-foreground-accent-primary);
-  --chip-filled-bg-active: var(--rs-color-background-accent-primary);
+  --chip-solid-border-hover: var(--rs-color-border-accent-emphasis);
+  /* Accent solid hover changes the border only, not the text. */
+  --chip-solid-fg-hover: var(--rs-color-foreground-accent-primary);
+  --chip-solid-bg-active: var(--rs-color-background-accent-primary);
 }
 
 .chip-color-danger {
@@ -63,9 +63,9 @@
   --chip-fg: var(--rs-color-foreground-danger-primary);
   --chip-fg-hover: var(--rs-color-foreground-danger-primary-hover);
   --chip-fg-active: var(--rs-color-foreground-danger-primary);
-  --chip-filled-border-hover: var(--rs-color-border-danger-emphasis);
-  --chip-filled-fg-hover: var(--rs-color-foreground-danger-primary);
-  --chip-filled-bg-active: var(--rs-color-background-danger-primary);
+  --chip-solid-border-hover: var(--rs-color-border-danger-emphasis);
+  --chip-solid-fg-hover: var(--rs-color-foreground-danger-primary);
+  --chip-solid-bg-active: var(--rs-color-background-danger-primary);
 }
 
 .chip-color-success {
@@ -75,9 +75,9 @@
   --chip-fg: var(--rs-color-foreground-success-primary);
   --chip-fg-hover: var(--rs-color-foreground-success-primary-hover);
   --chip-fg-active: var(--rs-color-foreground-success-primary);
-  --chip-filled-border-hover: var(--rs-color-border-success-emphasis);
-  --chip-filled-fg-hover: var(--rs-color-foreground-success-primary);
-  --chip-filled-bg-active: var(--rs-color-background-success-primary);
+  --chip-solid-border-hover: var(--rs-color-border-success-emphasis);
+  --chip-solid-fg-hover: var(--rs-color-foreground-success-primary);
+  --chip-solid-bg-active: var(--rs-color-background-success-primary);
 }
 
 /* The public value is `warning`, backed by the `attention` tokens, as in Badge. */
@@ -88,9 +88,9 @@
   --chip-fg: var(--rs-color-foreground-attention-primary);
   --chip-fg-hover: var(--rs-color-foreground-attention-primary-hover);
   --chip-fg-active: var(--rs-color-foreground-attention-primary);
-  --chip-filled-border-hover: var(--rs-color-border-attention-emphasis);
-  --chip-filled-fg-hover: var(--rs-color-foreground-attention-primary);
-  --chip-filled-bg-active: var(--rs-color-background-attention-primary);
+  --chip-solid-border-hover: var(--rs-color-border-attention-emphasis);
+  --chip-solid-fg-hover: var(--rs-color-foreground-attention-primary);
+  --chip-solid-bg-active: var(--rs-color-background-attention-primary);
 }
 
 /* Variants */
@@ -111,21 +111,21 @@
   color: var(--chip-fg-active);
 }
 
-.chip-variant-filled {
+.chip-variant-solid {
   background: var(--rs-color-background-base-primary);
   border: 0.5px solid var(--chip-border);
   color: var(--chip-fg);
 }
 
-.chip-variant-filled:hover {
-  border-color: var(--chip-filled-border-hover);
-  color: var(--chip-filled-fg-hover);
+.chip-variant-solid:hover {
+  border-color: var(--chip-solid-border-hover);
+  color: var(--chip-solid-fg-hover);
   background: var(--rs-color-background-base-primary-hover);
 }
 
-.chip-variant-filled:active,
-.chip-variant-filled[data-state="active"] {
-  background: var(--chip-filled-bg-active);
+.chip-variant-solid:active,
+.chip-variant-solid[data-state="active"] {
+  background: var(--chip-solid-bg-active);
   color: var(--chip-fg-active);
 }
 
diff --git a/packages/react/components/chip/chip.tsx b/packages/react/components/chip/chip.tsx
index cd0b11a7c..3630a16eb 100644
--- a/packages/react/components/chip/chip.tsx
+++ b/packages/react/components/chip/chip.tsx
@@ -11,7 +11,7 @@ const chip = cva(styles.chip, {
     ...radiusVariants,
     variant: {
       outline: styles['chip-variant-outline'],
-      filled: styles['chip-variant-filled']
+      solid: styles['chip-variant-solid']
     },
     size: {
       large: styles['chip-size-large'],
diff --git a/packages/react/components/command/command-input.tsx b/packages/react/components/command/command-input.tsx
index 4543e18b7..9563b2c09 100644
--- a/packages/react/components/command/command-input.tsx
+++ b/packages/react/components/command/command-input.tsx
@@ -34,7 +34,7 @@ export const CommandInput = ({
             containerRef={inputContainerRef}
             classNames={{ container: styles.commandInputContainer }}
             leadingIcon={leadingIcon}
-            variant='borderless'
+            variant='text'
             size={size}
             autoFocus={autoFocus}
             placeholder={placeholder}
diff --git a/packages/react/components/command/command.module.css b/packages/react/components/command/command.module.css
index 26f41997d..ccf0b0d87 100644
--- a/packages/react/components/command/command.module.css
+++ b/packages/react/components/command/command.module.css
@@ -15,7 +15,7 @@
   background-color: var(--rs-color-background-base-primary);
 }
 
-/* The search bar sits in its own dialog panel, so the borderless input's
+/* The search bar sits in its own dialog panel, so the `text` variant input's
    keyboard focus ring is redundant here. The doubled class outranks the base
    ring rule without needing !important. */
 .commandInputContainer.commandInputContainer:has(input:focus-visible) {
diff --git a/packages/react/components/editor/editor-link-form.tsx b/packages/react/components/editor/editor-link-form.tsx
index 78d5e0b33..1ed6fd106 100644
--- a/packages/react/components/editor/editor-link-form.tsx
+++ b/packages/react/components/editor/editor-link-form.tsx
@@ -38,7 +38,7 @@ export function EditorLinkForm({ onDone }: EditorLinkFormProps) {
     <div className={styles['link-form']} data-slot='editor-link-form'>
       <Input
         size='small'
-        variant='borderless'
+        variant='text'
         data-slot='editor-link-input'
         aria-label='Link URL'
         placeholder='Paste a link…'
diff --git a/packages/react/components/empty-state/__tests__/data-slots.test.tsx b/packages/react/components/empty-state/__tests__/data-slots.test.tsx
index 0a104fafc..a02ce2070 100644
--- a/packages/react/components/empty-state/__tests__/data-slots.test.tsx
+++ b/packages/react/components/empty-state/__tests__/data-slots.test.tsx
@@ -4,7 +4,7 @@ import { expectSlots, getSlot } from '~/test-utils/data-slots';
 import { EmptyState } from '../empty-state';
 
 describe('EmptyState data-slot contract', () => {
-  it('exposes slots for every rendered part (empty1 variant)', () => {
+  it('exposes slots for every rendered part (compact variant)', () => {
     const { container } = render(
       <EmptyState
         icon={<div>Icon</div>}
@@ -28,7 +28,7 @@ describe('EmptyState data-slot contract', () => {
     expect(getSlot(container, 'empty-state-subheading')).toBeNull();
   });
 
-  it('exposes slots for every rendered part (empty2 variant)', () => {
+  it('exposes slots for every rendered part (page variant)', () => {
     const { container } = render(
       <EmptyState
         icon={<div>Icon</div>}
@@ -36,7 +36,7 @@ describe('EmptyState data-slot contract', () => {
         subHeading='Try adjusting your filters'
         primaryAction={<button type='button'>Retry</button>}
         secondaryAction={<button type='button'>Cancel</button>}
-        variant='empty2'
+        variant='page'
       />
     );
     expectSlots(container, [
diff --git a/packages/react/components/empty-state/__tests__/empty-state.test.tsx b/packages/react/components/empty-state/__tests__/empty-state.test.tsx
index 7939458d5..ff94c163d 100644
--- a/packages/react/components/empty-state/__tests__/empty-state.test.tsx
+++ b/packages/react/components/empty-state/__tests__/empty-state.test.tsx
@@ -39,7 +39,7 @@ describe('EmptyState', () => {
   });
 
   describe('Variants', () => {
-    it('renders empty1 variant by default', () => {
+    it('renders compact variant by default', () => {
       const { container } = render(<EmptyState icon={<div>Icon</div>} />);
       expect(
         container.querySelector(`.${styles.emptyState}`)
@@ -49,9 +49,9 @@ describe('EmptyState', () => {
       ).not.toBeInTheDocument();
     });
 
-    it('renders empty2 variant correctly', () => {
+    it('renders page variant correctly', () => {
       const { container } = render(
-        <EmptyState icon={<div>Icon</div>} variant='empty2' />
+        <EmptyState icon={<div>Icon</div>} variant='page' />
       );
       expect(
         container.querySelector(`.${styles.emptyStatePage}`)
diff --git a/packages/react/components/empty-state/empty-state.module.css b/packages/react/components/empty-state/empty-state.module.css
index 4e890de84..9ab51c732 100644
--- a/packages/react/components/empty-state/empty-state.module.css
+++ b/packages/react/components/empty-state/empty-state.module.css
@@ -64,7 +64,7 @@
   max-width: 360px;
 }
 
-/* Empty2 */
+/* Page variant */
 
 .emptyStateContent {
   width: 366px;
diff --git a/packages/react/components/empty-state/empty-state.tsx b/packages/react/components/empty-state/empty-state.tsx
index faddad338..c4a7a9459 100644
--- a/packages/react/components/empty-state/empty-state.tsx
+++ b/packages/react/components/empty-state/empty-state.tsx
@@ -26,7 +26,7 @@ export interface EmptyStateProps extends ComponentProps<typeof Flex> {
    * `[data-slot="empty-state-subheading"]`.
    */
   classNames?: Partial<Record<classNameKeys, string>>;
-  variant?: 'empty1' | 'empty2';
+  variant?: 'compact' | 'page';
 }
 
 export function EmptyState({
@@ -36,10 +36,10 @@ export function EmptyState({
   primaryAction,
   secondaryAction,
   classNames,
-  variant = 'empty1',
+  variant = 'compact',
   ...props
 }: EmptyStateProps) {
-  if (variant === 'empty2') {
+  if (variant === 'page') {
     return (
       <Flex
         align='center'
diff --git a/packages/react/components/filter-chip/__tests__/filter-chip.test.tsx b/packages/react/components/filter-chip/__tests__/filter-chip.test.tsx
index ef8061735..c9779eae8 100644
--- a/packages/react/components/filter-chip/__tests__/filter-chip.test.tsx
+++ b/packages/react/components/filter-chip/__tests__/filter-chip.test.tsx
@@ -15,11 +15,11 @@ describe('FilterChip', () => {
       expect(screen.getByText('Name')).toBeInTheDocument();
     });
 
-    it('applies default variant classes', () => {
+    it('applies outline variant classes by default', () => {
       const { container } = render(<FilterChip label='Test' />);
       const chip = container.querySelector(`.${styles.chip}`);
       expect(chip).toBeInTheDocument();
-      expect(chip).toHaveClass(styles['chip-default']);
+      expect(chip).toHaveClass(styles['variant-outline']);
     });
 
     it('applies text variant', () => {
diff --git a/packages/react/components/filter-chip/filter-chip.module.css b/packages/react/components/filter-chip/filter-chip.module.css
index 75eaef08a..55c6729ca 100644
--- a/packages/react/components/filter-chip/filter-chip.module.css
+++ b/packages/react/components/filter-chip/filter-chip.module.css
@@ -15,7 +15,7 @@
   overflow: clip;
 }
 
-.chip-default {
+.variant-outline {
   border: 1px solid var(--rs-color-border-base-tertiary);
 }
 
diff --git a/packages/react/components/filter-chip/filter-chip.tsx b/packages/react/components/filter-chip/filter-chip.tsx
index ee5b34a71..e4f2dd13b 100644
--- a/packages/react/components/filter-chip/filter-chip.tsx
+++ b/packages/react/components/filter-chip/filter-chip.tsx
@@ -38,12 +38,12 @@ import { Operation } from './filter-chip-operation';
 const chip = cva(styles.chip, {
   variants: {
     variant: {
-      default: styles['chip-default'],
+      outline: styles['variant-outline'],
       text: null
     }
   },
   defaultVariants: {
-    variant: 'default'
+    variant: 'outline'
   }
 });
 
@@ -328,7 +328,7 @@ export const FilterChip = ({
             data-slot='filter-chip-value'
           >
             <Input
-              variant={variant === 'text' ? 'borderless' : 'default'}
+              variant={variant === 'text' ? 'text' : 'outline'}
               classNames={{ container: styles.inputField }}
               value={filterValue.toString()}
               onChange={e => handleTextInputChange(e.target.value)}
diff --git a/packages/react/components/grid/__tests__/grid.test.tsx b/packages/react/components/grid/__tests__/grid.test.tsx
index e4f264086..06da8d7c6 100644
--- a/packages/react/components/grid/__tests__/grid.test.tsx
+++ b/packages/react/components/grid/__tests__/grid.test.tsx
@@ -149,10 +149,11 @@ describe('Grid', () => {
 
   describe('Alignment', () => {
     const alignments = ['start', 'end', 'center', 'stretch'] as const;
-    const extendedAlignments = [
-      'space-around',
-      'space-between',
-      'space-evenly'
+    const contentAlignments = [
+      ...alignments.map(align => [align, align] as const),
+      ['around', 'space-around'],
+      ['between', 'space-between'],
+      ['evenly', 'space-evenly']
     ] as const;
 
     it.each(alignments)('renders %s justify items correctly', align => {
@@ -161,28 +162,24 @@ describe('Grid', () => {
       expect(grid).toHaveStyle({ justifyItems: align });
     });
 
-    it.each(alignments)('renders %s align items correctly', align => {
-      const { container } = render(<Grid alignItems={align}>Content</Grid>);
+    it.each(alignments)('renders %s align correctly', align => {
+      const { container } = render(<Grid align={align}>Content</Grid>);
       const grid = container.firstChild as HTMLElement;
       expect(grid).toHaveStyle({ alignItems: align });
     });
 
-    it.each([
-      ...alignments,
-      ...extendedAlignments
-    ])('renders %s justify content correctly', align => {
-      const { container } = render(<Grid justifyContent={align}>Content</Grid>);
+    it.each(contentAlignments)('renders %s justify correctly', (align, css) => {
+      const { container } = render(<Grid justify={align}>Content</Grid>);
       const grid = container.firstChild as HTMLElement;
-      expect(grid).toHaveStyle({ justifyContent: align });
+      expect(grid).toHaveStyle({ justifyContent: css });
     });
 
-    it.each([
-      ...alignments,
-      ...extendedAlignments
-    ])('renders %s align content correctly', align => {
+    it.each(
+      contentAlignments
+    )('renders %s align content correctly', (align, css) => {
       const { container } = render(<Grid alignContent={align}>Content</Grid>);
       const grid = container.firstChild as HTMLElement;
-      expect(grid).toHaveStyle({ alignContent: align });
+      expect(grid).toHaveStyle({ alignContent: css });
     });
   });
 
diff --git a/packages/react/components/grid/grid.tsx b/packages/react/components/grid/grid.tsx
index ae178b8a6..48a00f9fc 100644
--- a/packages/react/components/grid/grid.tsx
+++ b/packages/react/components/grid/grid.tsx
@@ -17,6 +17,11 @@ const grid = cva(styles.grid, {
   }
 });
 
+const toCssAlignment = (value?: AlignExtendedType) =>
+  value === 'between' || value === 'around' || value === 'evenly'
+    ? `space-${value}`
+    : value;
+
 export type GridProps = useRender.ComponentProps<'div'> &
   VariantProps<typeof grid> & {
     /**
@@ -53,8 +58,8 @@ export type GridProps = useRender.ComponentProps<'div'> &
      */
     rows?: string | number;
     justifyItems?: AlignType;
-    alignItems?: AlignType;
-    justifyContent?: AlignExtendedType;
+    align?: AlignType;
+    justify?: AlignExtendedType;
     alignContent?: AlignExtendedType;
     inline?: boolean;
   };
@@ -70,8 +75,8 @@ export function Grid({
   columnGap,
   rowGap,
   justifyItems,
-  alignItems,
-  justifyContent,
+  align,
+  justify,
   alignContent,
   inline = false,
   className,
@@ -103,9 +108,9 @@ export function Grid({
     gridTemplateColumns,
     gridTemplateRows,
     justifyItems,
-    alignItems,
-    justifyContent,
-    alignContent,
+    alignItems: align,
+    justifyContent: toCssAlignment(justify),
+    alignContent: toCssAlignment(alignContent),
     ...style
   };
 
diff --git a/packages/react/components/grid/types.ts b/packages/react/components/grid/types.ts
index af024e97e..40fb03cbd 100644
--- a/packages/react/components/grid/types.ts
+++ b/packages/react/components/grid/types.ts
@@ -1,6 +1,2 @@
 export type AlignType = 'start' | 'end' | 'center' | 'stretch';
-export type AlignExtendedType =
-  | AlignType
-  | 'space-around'
-  | 'space-between'
-  | 'space-evenly';
+export type AlignExtendedType = AlignType | 'between' | 'around' | 'evenly';
diff --git a/packages/react/components/input/__tests__/input.test.tsx b/packages/react/components/input/__tests__/input.test.tsx
index 5b6d46d41..f5c9a239d 100644
--- a/packages/react/components/input/__tests__/input.test.tsx
+++ b/packages/react/components/input/__tests__/input.test.tsx
@@ -52,16 +52,16 @@ describe('Input', () => {
   });
 
   describe('Variants', () => {
-    it('renders default variant by default', () => {
+    it('renders outline variant by default', () => {
       const { container } = render(<Input />);
       const wrapper = container.querySelector(`.${styles['input-wrapper']}`);
-      expect(wrapper).toHaveClass(styles['variant-default']);
+      expect(wrapper).not.toHaveClass(styles['variant-text']);
     });
 
-    it('renders borderless variant when specified', () => {
-      const { container } = render(<Input variant='borderless' />);
+    it('renders text variant when specified', () => {
+      const { container } = render(<Input variant='text' />);
       const wrapper = container.querySelector(`.${styles['input-wrapper']}`);
-      expect(wrapper).toHaveClass(styles['variant-borderless']);
+      expect(wrapper).toHaveClass(styles['variant-text']);
     });
   });
 
diff --git a/packages/react/components/input/input.module.css b/packages/react/components/input/input.module.css
index 36424cf37..54f4992f3 100644
--- a/packages/react/components/input/input.module.css
+++ b/packages/react/components/input/input.module.css
@@ -221,16 +221,16 @@
   padding-right: var(--rs-space-2);
 }
 
-.variant-borderless {
+.variant-text {
   border-color: transparent;
 }
 
-.variant-borderless:focus-within {
+.variant-text:focus-within {
   border-color: transparent;
   outline: none;
 }
 
 /* Keyboard focus must still be visible on the chromeless variant. */
-.variant-borderless:has(.input-field:focus-visible) {
+.variant-text:has(.input-field:focus-visible) {
   box-shadow: var(--rs-focus-ring-shadow);
 }
diff --git a/packages/react/components/input/input.tsx b/packages/react/components/input/input.tsx
index 2199c9597..a6480eadb 100644
--- a/packages/react/components/input/input.tsx
+++ b/packages/react/components/input/input.tsx
@@ -14,13 +14,13 @@ const inputWrapper = cva(styles['input-wrapper'], {
       large: styles['size-large']
     },
     variant: {
-      default: styles['variant-default'],
-      borderless: styles['variant-borderless']
+      outline: null,
+      text: styles['variant-text']
     }
   },
   defaultVariants: {
     size: 'large',
-    variant: 'default'
+    variant: 'outline'
   }
 });
 
@@ -34,7 +34,7 @@ export interface InputProps
   suffix?: string;
   chips?: Array<{ label: string; onRemove?: () => void }>;
   maxChipsVisible?: number;
-  variant?: 'default' | 'borderless';
+  variant?: 'outline' | 'text';
   containerRef?: RefObject<HTMLDivElement | null>;
   /** @deprecated Use `[data-slot="input-container"]` instead. */
   classNames?: { container?: string };
@@ -52,7 +52,7 @@ export function Input({
   maxChipsVisible = 2,
   size,
   radius,
-  variant = 'default',
+  variant = 'outline',
   containerRef,
   classNames,
   required,
diff --git a/packages/react/components/prompt-input/prompt-input-textarea.tsx b/packages/react/components/prompt-input/prompt-input-textarea.tsx
index 5dd3d87ca..a3d33ec92 100644
--- a/packages/react/components/prompt-input/prompt-input-textarea.tsx
+++ b/packages/react/components/prompt-input/prompt-input-textarea.tsx
@@ -86,7 +86,7 @@ export function PromptInputTextarea({
     <TextArea
       ref={mergedRef}
       rows={1}
-      variant='borderless'
+      variant='text'
       size='small'
       className={cx(styles.textarea, className)}
       value={context.value}
diff --git a/packages/react/components/prompt-input/prompt-input.module.css b/packages/react/components/prompt-input/prompt-input.module.css
index c325260c4..b5b760d3f 100644
--- a/packages/react/components/prompt-input/prompt-input.module.css
+++ b/packages/react/components/prompt-input/prompt-input.module.css
@@ -41,8 +41,8 @@
   display: none;
 }
 
-/* The textarea is borderless inside the composer frame; the frame itself
-   carries the focus treatment, so suppress the field's own focus ring. */
+/* The textarea uses the `text` variant inside the composer frame; the frame
+   itself carries the focus treatment, so suppress the field's own focus ring. */
 .root .textarea:focus-visible:not(:disabled) {
   box-shadow: none;
 }
diff --git a/packages/react/components/search/__tests__/search.test.tsx b/packages/react/components/search/__tests__/search.test.tsx
index beb941d91..74a252eb3 100644
--- a/packages/react/components/search/__tests__/search.test.tsx
+++ b/packages/react/components/search/__tests__/search.test.tsx
@@ -1,6 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
+import inputStyles from '../../input/input.module.css';
 import { Search } from '../search';
 import styles from '../search.module.css';
 
@@ -181,16 +182,18 @@ describe('Search', () => {
   });
 
   describe('Variants', () => {
-    it('defaults to default variant', () => {
-      render(<Search />);
-      const input = screen.getByRole('searchbox');
-      expect(input).toBeInTheDocument();
+    it('defaults to outline variant', () => {
+      const { container } = render(<Search />);
+      expect(
+        container.querySelector('[data-slot="input-container"]')
+      ).not.toHaveClass(inputStyles['variant-text']);
     });
 
-    it('renders borderless variant', () => {
-      render(<Search variant='borderless' />);
-      const input = screen.getByRole('searchbox');
-      expect(input).toBeInTheDocument();
+    it('renders text variant', () => {
+      const { container } = render(<Search variant='text' />);
+      expect(
+        container.querySelector('[data-slot="input-container"]')
+      ).toHaveClass(inputStyles['variant-text']);
     });
   });
 
diff --git a/packages/react/components/search/search.tsx b/packages/react/components/search/search.tsx
index fc0390275..5ab93d46c 100644
--- a/packages/react/components/search/search.tsx
+++ b/packages/react/components/search/search.tsx
@@ -14,7 +14,6 @@ export interface SearchProps extends InputProps {
   onClear?: (
     event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLInputElement>
   ) => void;
-  variant?: 'default' | 'borderless';
   /**
    * Clears the input when Escape is pressed and the input has a value.
    * @default true
@@ -47,7 +46,6 @@ export function Search({
   onKeyDown,
   value,
   width = '100%',
-  variant = 'default',
   ref,
   leadingIcon = <SearchIcon />,
   clearOnEscape = true,
@@ -118,7 +116,6 @@ export function Search({
         value={value}
         size={size}
         aria-label={placeholder}
-        variant={variant}
         role='searchbox'
         enterKeyHint='search'
         ref={mergedRef}
diff --git a/packages/react/components/text-area/__tests__/text-area.test.tsx b/packages/react/components/text-area/__tests__/text-area.test.tsx
index a8d6e274e..b57a029d5 100644
--- a/packages/react/components/text-area/__tests__/text-area.test.tsx
+++ b/packages/react/components/text-area/__tests__/text-area.test.tsx
@@ -149,16 +149,16 @@ describe('TextArea', () => {
   });
 
   describe('Variants', () => {
-    it('renders default variant by default', () => {
+    it('renders outline variant by default', () => {
       render(<TextArea />);
       const textarea = screen.getByRole('textbox');
-      expect(textarea).toHaveClass(styles['variant-default']);
+      expect(textarea).not.toHaveClass(styles['variant-text']);
     });
 
-    it('renders borderless variant when specified', () => {
-      render(<TextArea variant='borderless' />);
+    it('renders text variant when specified', () => {
+      render(<TextArea variant='text' />);
       const textarea = screen.getByRole('textbox');
-      expect(textarea).toHaveClass(styles['variant-borderless']);
+      expect(textarea).toHaveClass(styles['variant-text']);
     });
   });
 
diff --git a/packages/react/components/text-area/text-area.module.css b/packages/react/components/text-area/text-area.module.css
index ff414b7d0..fb7fe42a1 100644
--- a/packages/react/components/text-area/text-area.module.css
+++ b/packages/react/components/text-area/text-area.module.css
@@ -62,15 +62,15 @@
 }
 
 /* Variant styles */
-.variant-borderless {
+.variant-text {
   border-color: transparent;
 }
 
-.variant-borderless:focus:not(:disabled) {
+.variant-text:focus:not(:disabled) {
   border-color: transparent;
   outline: none;
 }
 
-.variant-borderless:focus-visible:not(:disabled) {
+.variant-text:focus-visible:not(:disabled) {
   box-shadow: var(--rs-focus-ring-shadow);
 }
diff --git a/packages/react/components/text-area/text-area.tsx b/packages/react/components/text-area/text-area.tsx
index 33c2ad180..62ca7b0e9 100644
--- a/packages/react/components/text-area/text-area.tsx
+++ b/packages/react/components/text-area/text-area.tsx
@@ -14,13 +14,13 @@ const textAreaVariants = cva(styles.textarea, {
       large: styles['size-large']
     },
     variant: {
-      default: styles['variant-default'],
-      borderless: styles['variant-borderless']
+      outline: null,
+      text: styles['variant-text']
     }
   },
   defaultVariants: {
     size: 'large',
-    variant: 'default'
+    variant: 'outline'
   }
 });
 
diff --git a/packages/react/figma/chip.figma.ts b/packages/react/figma/chip.figma.ts
index 89b2561be..514afd86c 100644
--- a/packages/react/figma/chip.figma.ts
+++ b/packages/react/figma/chip.figma.ts
@@ -5,7 +5,7 @@
 import figma from 'figma';
 
 const variant = figma.selectedInstance.getEnum('Variant', {
-  Filled: 'filled'
+  Filled: 'solid'
 });
 const size = figma.selectedInstance.getEnum('Size', {
   Large: 'large'
diff --git a/packages/react/figma/empty-state.figma.ts b/packages/react/figma/empty-state.figma.ts
index a639feb58..bad0ad3ef 100644
--- a/packages/react/figma/empty-state.figma.ts
+++ b/packages/react/figma/empty-state.figma.ts
@@ -6,9 +6,9 @@ import figma from 'figma';
 
 const instance = figma.selectedInstance;
 
-// Default variant 'empty1' (Figma "Empty") is omitted; only Zero → 'empty2'.
+// Default variant 'compact' (Figma "Empty") is omitted; only Zero → 'page'.
 const variant = instance.getEnum('Variant', {
-  Zero: 'empty2'
+  Zero: 'page'
 });
 
 const findTextContent = (name: string) => {
@@ -41,8 +41,8 @@ const secondaryAction = instance.getBoolean('Secondary Action', {
   false: undefined
 });
 
-// Icon: the "empty1" variant wraps it in ".state icon" (instance-swap "Icon");
-// the "empty2" variant uses a direct icon instance. Try the wrapper first, then
+// Icon: the "compact" variant wraps it in ".state icon" (instance-swap "Icon");
+// the "page" variant uses a direct icon instance. Try the wrapper first, then
 // fall back to the first connected instance that isn't an action button.
 const icon = (function () {
   const stateIcon = instance.findInstance('.state icon');
diff --git a/packages/react/figma/search.figma.ts b/packages/react/figma/search.figma.ts
index baabc83ab..b036a86d4 100644
--- a/packages/react/figma/search.figma.ts
+++ b/packages/react/figma/search.figma.ts
@@ -26,7 +26,7 @@ const size = figma.selectedInstance.getEnum('Size', {
   Large: 'large'
 });
 const variant = figma.selectedInstance.getEnum('Outline', {
-  False: 'borderless'
+  False: 'text'
 });
 
 export default {