From ffe7dd478aa7020d22b969bc959890712f58306e Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Fri, 11 Sep 2026 13:24:40 -0400
Subject: [PATCH 1/3] feat(ui): replace className/style on Mosaic parts with
 xstyle

---
 .changeset/mosaic-xstyle-props.md             |  2 +
 .claude/skills/mosaic/SKILL.md                |  3 +-
 .claude/skills/mosaic/references/stylex.md    | 78 +++++++++++-----
 eslint.config.mjs                             | 12 +++
 .../ui/src/mosaic/__tests__/props.test.ts     | 42 ++++-----
 .../reverification-method-picker.tsx          | 21 +++--
 .../mosaic/components/avatar/avatar.test.tsx  | 22 +++--
 .../src/mosaic/components/avatar/avatar.tsx   | 33 +++----
 .../mosaic/components/badge/badge.test.tsx    | 24 ++---
 .../ui/src/mosaic/components/badge/badge.tsx  |  8 +-
 .../mosaic/components/banner/banner.test.tsx  | 38 +++++---
 .../src/mosaic/components/banner/banner.tsx   | 26 ++----
 .../mosaic/components/branding/branding.tsx   |  5 +-
 .../mosaic/components/button/button.test.tsx  | 13 +--
 .../src/mosaic/components/button/button.tsx   |  8 +-
 .../components/button/submit-button.test.tsx  | 13 +--
 .../components/button/submit-button.tsx       |  6 +-
 .../src/mosaic/components/card/card.test.tsx  | 54 +++++++----
 .../ui/src/mosaic/components/card/card.tsx    | 42 ++++-----
 .../mosaic/components/combobox/combobox.tsx   | 41 ++++-----
 .../components/dialog/alert-dialog.test.tsx   | 37 ++++++--
 .../mosaic/components/dialog/dialog.test.tsx  | 27 +++---
 .../src/mosaic/components/dialog/dialog.tsx   | 54 +++++------
 .../mosaic/components/drawer/drawer.test.tsx  | 23 +++++
 .../src/mosaic/components/drawer/drawer.tsx   | 69 +++++++++++---
 .../mosaic/components/field/field.test.tsx    | 59 ++++++------
 .../ui/src/mosaic/components/field/field.tsx  | 28 +++---
 .../ui/src/mosaic/components/flow/flow.tsx    | 13 ++-
 .../components/heading/heading.test.tsx       | 18 ++--
 .../src/mosaic/components/heading/heading.tsx | 23 ++---
 .../components/icon/icon-frame.test.tsx       | 23 +++--
 .../src/mosaic/components/icon/icon-frame.tsx | 15 ++--
 .../src/mosaic/components/icon/icon.test.tsx  | 16 ++--
 .../ui/src/mosaic/components/icon/icon.tsx    | 13 ++-
 .../components/input-group/input-group.tsx    | 16 ++--
 .../mosaic/components/input/input.test.tsx    | 23 +++--
 .../ui/src/mosaic/components/input/input.tsx  |  8 +-
 .../src/mosaic/components/item/item.test.tsx  | 28 +++---
 .../ui/src/mosaic/components/item/item.tsx    | 59 +++++-------
 .../src/mosaic/components/menu/menu.test.tsx  | 40 ++++++---
 .../ui/src/mosaic/components/menu/menu.tsx    | 65 ++++++--------
 .../phone-input/phone-input.styles.ts         |  3 +
 .../components/phone-input/phone-input.tsx    | 19 ++--
 .../components/popover/popover.test.tsx       | 41 +++++----
 .../src/mosaic/components/popover/popover.tsx | 42 +++++----
 .../components/profile/profile.test.tsx       | 15 +++-
 .../src/mosaic/components/profile/profile.tsx | 53 ++++-------
 .../components/section/section.test.tsx       | 44 ++++++---
 .../src/mosaic/components/section/section.tsx | 90 ++++++-------------
 .../components/spinner/spinner.test.tsx       | 17 ++--
 .../src/mosaic/components/spinner/spinner.tsx |  5 +-
 .../src/mosaic/components/text/text.test.tsx  | 18 ++--
 .../ui/src/mosaic/components/text/text.tsx    | 16 ++--
 .../visually-hidden/visually-hidden.test.tsx  | 21 ++++-
 .../visually-hidden/visually-hidden.tsx       | 10 +--
 packages/ui/src/mosaic/props.test-d.ts        | 67 ++++++++++++++
 packages/ui/src/mosaic/props.ts               | 90 +++++++++++--------
 .../mosaic/user-button/user-button.styles.ts  |  3 +
 .../mosaic/user-button/user-button.view.tsx   |  9 +-
 references/mosaic-architecture.md             | 83 +++++++++--------
 60 files changed, 1035 insertions(+), 759 deletions(-)
 create mode 100644 .changeset/mosaic-xstyle-props.md
 create mode 100644 packages/ui/src/mosaic/props.test-d.ts

diff --git a/.changeset/mosaic-xstyle-props.md b/.changeset/mosaic-xstyle-props.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/mosaic-xstyle-props.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.claude/skills/mosaic/SKILL.md b/.claude/skills/mosaic/SKILL.md
index 6a9f74da1ed..c876dbb6c20 100644
--- a/.claude/skills/mosaic/SKILL.md
+++ b/.claude/skills/mosaic/SKILL.md
@@ -19,7 +19,8 @@ Two things live under Mosaic, and this skill covers the how-to for both:
 - **Styled components** are authored with **StyleX** — `stylex.create` declares
   the styles, `themeProps` emits the part's public identity (the `.cl-<slot>`
   class plus `data-<axis>` attrs), and `mergeStyleProps` fuses the two with the
-  consumer's `className`/`style`.
+  props the part was called with. A part takes `xstyle` (StyleX atoms for its
+  root), never `className`/`style`.
 - **Flows** follow a **model → controller → view** split — _where the data comes
   from_ → _what the user is doing to it_ → _what that looks like_. What crosses
   each boundary is plain data: no Clerk resource reaches the controller, no
diff --git a/.claude/skills/mosaic/references/stylex.md b/.claude/skills/mosaic/references/stylex.md
index 5c6675e468a..d1e6bf20535 100644
--- a/.claude/skills/mosaic/references/stylex.md
+++ b/.claude/skills/mosaic/references/stylex.md
@@ -25,7 +25,7 @@ conventions to follow by hand, not guarantees the toolchain makes for you.
 | `utils/`                          | everything shared across components — styles and non-style helpers alike                   |
 | `<comp>/<comp>.markers.stylex.ts` | `stylex.defineMarker()` results for scoped ancestor states                                 |
 | `<comp>/<comp>.tsx`               | component; spreads `stylex.props(...)` via `mergeStyleProps`                               |
-| `props.ts`                        | `themeProps` (`.cl-<slot>` + `data-<axis>`) + `mergeStyleProps`                            |
+| `props.ts`                        | `themeProps` (`.cl-<slot>` + `data-<axis>`), `mergeStyleProps`, the `Mosaic*Props` types   |
 | `styles/index.ts`                 | isolated-build barrel; derives `*VarName` types                                            |
 
 The `@stylexjs` eslint rules run on `src/mosaic/**`. The `enforce-extension`
@@ -577,28 +577,66 @@ The element carries three things, and nothing else is a contract:
 plus a kebab-cased `data-<axis>` reflection of the visual props, so consumers
 target stable data-attribute selectors, not collision-prone class names.
 
-`mergeStyleProps` fuses everything in precedence order — **theme props → StyleX atoms →
-consumer `className`/`style`** — so the consumer always wins. It concatenates
-className left-to-right and merges `style` with the consumer object spread last:
+`mergeStyleProps` fuses its bags left to right — **theme props → StyleX atoms →
+the props the part was called with** — concatenating `className`, shallow-merging
+`style` with the later bag winning, and letting the later bag overwrite anything else:
 
 ```tsx
-<button
-  {...mergeStyleProps(
-    themeProps('button', { intent, variant }),
-    stylex.props(styles.base, variants[variant], xstyle),
-    className,
-    style,
-  )}
-/>
+function Button({ intent, variant, xstyle, ...rest }: ButtonProps) {
+  return (
+    <button
+      {...mergeStyleProps(
+        themeProps('button', { intent, variant }),
+        stylex.props(styles.base, variants[variant], xstyle),
+        rest,
+      )}
+    />
+  );
+}
 ```
 
-- **DO** put consumer `xstyle` **last** inside `stylex.props(...)` (so their atoms
-  win the cascade) and consumer `className`/`style` last inside `mergeStyleProps` (so
-  their raw CSS wins).
+- **DO** put the caller's `xstyle` **last** inside `stylex.props(...)` so its atoms
+  win the cascade, and pass `rest` as the **last** bag to `mergeStyleProps` so the
+  caller's other props (`id`, handlers, `aria-*`) land as usual.
 - **DON'T** forward `xstyle` down to internal slot elements — it targets the slot
-  the consumer named, not your private structure.
-- **DON'T** call `stylex.props` twice on one element or spread `{...props}` after
-  the merge result — fuse everything through the one `mergeStyleProps` call.
+  the caller named, not your private structure.
+- **DON'T** call `stylex.props` twice on one element or spread `{...rest}` after
+  the merge result — fuse everything through the one `mergeStyleProps` call. A
+  trailing `{...rest}` would clobber the part's own `className` when the part is
+  the target of another part's `render`.
+
+### `xstyle`, not `className`/`style`
+
+A Mosaic part has no `className` or `style` prop. `MosaicComponentProps` and
+`MosaicElementProps` (`props.ts`) omit the pair and add `xstyle?: StyleXStyles`,
+so every part inherits the contract by typing its props off one of them. A lint
+rule in the `packages/ui/mosaic` eslint block names the replacement when either
+attribute shows up on a capitalized element.
+
+- **Inside `packages/ui`** a flow author who needs to nudge a part declares the
+  atoms in the view's own `stylex.create` and passes them as `xstyle`:
+
+  ```tsx
+  const styles = stylex.create({ helpText: { textAlign: 'center', marginBlockStart: space['1'] } });
+
+  <Text
+    size='xs'
+    xstyle={styles.helpText}
+  >
+    {messages.helpText}
+  </Text>;
+  ```
+
+- **Outside `packages/ui`** a theme targets the `.cl-<slot>` class, `data-<axis>`
+  attrs, and `--cl-*` vars in CSS. No prop is involved.
+- **`render` composition still delivers the pair at runtime.** `Dialog.Title
+render={<Heading />}` clones the title's merged `className`/`style` onto the
+  `Heading`, which is why a part passes its `rest` bag through `mergeStyleProps`:
+  the helper merges the incoming pair instead of letting it overwrite the part's
+  own class. The public prop types stay closed; only the merge is tolerant.
+- `xstyle` is typed as the unconstrained `StyleXStyles`. Narrow it per part
+  (`StyleXStyles<{ marginBlockStart?: string }>`) only once a part needs to fence
+  what a caller may override.
 
 ### Type every part with `MosaicComponentProps`
 
@@ -664,8 +702,8 @@ token colors aren't down-leveled into an invalid polyfill.
 - Avoid manual `@layer` / `@property` inside `create` (StyleX owns layering;
   `@property` compiles but emits invalid output).
 - No need for `stylex.firstThatWorks` or `stylex.attrs` — a proven full library
-  ships without either; reach for conditional-value objects and `mergeStyleProps`
-  instead.
+  ships without either; reach for conditional-value objects, `xstyle`, and
+  `mergeStyleProps` instead.
 - Dynamic functions-in-`create` are allowed but exceptional — see "Dynamic styles"
   above. Default to static atoms, variant maps, and conditional-value objects; use
   a dynamic function only for a continuous runtime value, and prefer writing a
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 0edfe0d6b60..1e43d3a8ccc 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -572,6 +572,18 @@ export default tseslint.config([
           message:
             "Use motionSafe() from mosaic/utils instead of raw '@media (prefers-reduced-motion: no-preference)'.",
         },
+        // A Mosaic part takes `xstyle`, not `className`/`style`; its prop types already reject the pair,
+        // this names the replacement. Native elements (lowercase) are unaffected.
+        {
+          selector:
+            "JSXOpeningElement[name.type='JSXIdentifier'][name.name=/^[A-Z]/] > JSXAttribute[name.name=/^(className|style)$/]",
+          message: 'Mosaic parts take `xstyle` (StyleX atoms) instead of `className`/`style`.',
+        },
+        {
+          selector:
+            "JSXOpeningElement[name.type='JSXMemberExpression'] > JSXAttribute[name.name=/^(className|style)$/]",
+          message: 'Mosaic parts take `xstyle` (StyleX atoms) instead of `className`/`style`.',
+        },
       ],
     },
   },
diff --git a/packages/ui/src/mosaic/__tests__/props.test.ts b/packages/ui/src/mosaic/__tests__/props.test.ts
index bbd9e3ec0e8..922abac52a9 100644
--- a/packages/ui/src/mosaic/__tests__/props.test.ts
+++ b/packages/ui/src/mosaic/__tests__/props.test.ts
@@ -4,8 +4,8 @@ import { mergeStyleProps, themeProps } from '../props';
 
 // The public styling contract lives here, not in any one component: the stable
 // `.cl-<slot>` class, `data-<axis>` variant reflection, and the class/style merge
-// order that lets a consumer's `className`/`style` win. Components just wire their
-// props into these helpers, so this is where the contract is exhaustively pinned.
+// order that lets a later bag win. Components just wire their props into these
+// helpers, so this is where the contract is exhaustively pinned.
 
 describe('themeProps', () => {
   it('returns the stable slot class', () => {
@@ -43,32 +43,34 @@ describe('mergeStyleProps', () => {
     expect(merged.className).toBe('cl-button x1 x2');
   });
 
-  it('accepts a trailing string as an appended className', () => {
-    const merged = mergeStyleProps({ className: 'cl-button' }, { className: 'x1' }, 'consumer');
-    expect(merged.className).toBe('cl-button x1 consumer');
-  });
-
-  it('accepts a trailing object as a style and lets it win', () => {
-    const merged = mergeStyleProps({ style: { marginTop: '2px', color: 'red' } }, undefined, { marginTop: '8px' });
+  it('shallow-merges style with the later bag winning', () => {
+    const merged = mergeStyleProps({ style: { marginTop: '2px', color: 'red' } }, { style: { marginTop: '8px' } });
     expect(merged.style).toEqual({ marginTop: '8px', color: 'red' });
   });
 
-  it('disambiguates the trailing className and style pair by position', () => {
-    const merged = mergeStyleProps({ className: 'cl-button' }, undefined, 'consumer', { marginTop: '8px' });
-    expect(merged.className).toBe('cl-button consumer');
-    expect(merged.style).toEqual({ marginTop: '8px' });
-  });
-
-  it('treats a string second argument as a className', () => {
-    expect(mergeStyleProps({ className: 'cl-button' }, 'consumer').className).toBe('cl-button consumer');
+  it('skips undefined bags', () => {
+    const merged = mergeStyleProps({ className: 'cl-button' }, undefined, { className: 'x1' });
+    expect(merged.className).toBe('cl-button x1');
   });
 
   it('drops className entirely when nothing contributes one', () => {
     expect(mergeStyleProps({ 'data-color': 'primary' }, {})).not.toHaveProperty('className');
   });
 
-  it('preserves non-class/style props from both bags', () => {
-    const merged = mergeStyleProps({ 'data-color': 'primary' }, { role: 'button' });
-    expect(merged).toMatchObject({ 'data-color': 'primary', role: 'button' });
+  it('preserves non-class/style props from every bag, later bags winning', () => {
+    const merged = mergeStyleProps({ 'data-color': 'primary', role: 'note' }, { role: 'button' }, { id: 'x' });
+    expect(merged).toMatchObject({ 'data-color': 'primary', role: 'button', id: 'x' });
+  });
+
+  it("merges a render source's className/style out of the incoming prop bag", () => {
+    // `Dialog.Title render={<Heading />}` hands Heading the title's merged pair through its
+    // props; passing that bag last must merge them rather than clobber the part's own class.
+    const rest = { className: 'cl-dialog-title', style: { color: 'red' }, id: 'title' };
+    const merged = mergeStyleProps({ className: 'cl-heading' }, { className: 'x1', style: { margin: 0 } }, rest);
+    expect(merged).toEqual({
+      className: 'cl-heading x1 cl-dialog-title',
+      style: { margin: 0, color: 'red' },
+      id: 'title',
+    });
   });
 });
diff --git a/packages/ui/src/mosaic/blocks/reverification/reverification-method-picker.tsx b/packages/ui/src/mosaic/blocks/reverification/reverification-method-picker.tsx
index 9d481bbe504..a49566d1141 100644
--- a/packages/ui/src/mosaic/blocks/reverification/reverification-method-picker.tsx
+++ b/packages/ui/src/mosaic/blocks/reverification/reverification-method-picker.tsx
@@ -1,3 +1,5 @@
+import * as stylex from '@stylexjs/stylex';
+
 import { Button } from '../../components/button';
 import { Card } from '../../components/card';
 import type { IconProps } from '../../components/icon';
@@ -7,6 +9,16 @@ import { Spinner } from '../../components/spinner';
 import { Text } from '../../components/text';
 import { space } from '../../tokens.stylex';
 
+const styles = stylex.create({
+  backButton: {
+    marginBlockStart: space['2'],
+  },
+  helpText: {
+    marginBlockStart: space['1'],
+    textAlign: 'center',
+  },
+});
+
 export interface ReverificationMethod {
   id: string;
   label: string;
@@ -81,9 +93,7 @@ export function ReverificationMethodPicker({
             variant='ghost'
             fullWidth
             onClick={onBack}
-            style={{
-              marginBlockStart: space['2'],
-            }}
+            xstyle={styles.backButton}
           >
             {messages.backButton}
           </Button>
@@ -91,10 +101,7 @@ export function ReverificationMethodPicker({
         <Text
           size='xs'
           color='neutral'
-          style={{
-            textAlign: 'center',
-            marginBlockStart: space['1'],
-          }}
+          xstyle={styles.helpText}
         >
           {messages.helpText}{' '}
           <Button
diff --git a/packages/ui/src/mosaic/components/avatar/avatar.test.tsx b/packages/ui/src/mosaic/components/avatar/avatar.test.tsx
index bdd628c92f0..e654a254d83 100644
--- a/packages/ui/src/mosaic/components/avatar/avatar.test.tsx
+++ b/packages/ui/src/mosaic/components/avatar/avatar.test.tsx
@@ -1,3 +1,4 @@
+import * as stylex from '@stylexjs/stylex';
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { flushSync } from 'react-dom';
@@ -263,22 +264,33 @@ describe('Mosaic Avatar', () => {
     expect(screen.getByTestId('fallback')).not.toHaveAttribute('data-pending');
   });
 
-  it('wires consumer className/style/ref through to the root', () => {
+  it('wires consumer xstyle and ref through to the root', () => {
+    const caller = stylex.create({ root: { marginTop: '8px' } });
     const ref = React.createRef<HTMLSpanElement>();
     render(
       <Avatar.Root
         ref={ref}
         data-testid='avatar'
-        className='my-avatar'
-        style={{ marginTop: '8px' }}
+        xstyle={caller.root}
       >
         <Avatar.Fallback>CN</Avatar.Fallback>
       </Avatar.Root>,
     );
     const avatar = screen.getByTestId('avatar');
     expect(ref.current).toBe(avatar);
-    expect(avatar).toHaveClass('cl-avatar', 'my-avatar');
-    expect(avatar).toHaveStyle({ marginTop: '8px' });
+    expect(avatar).toHaveClass('cl-avatar', stylex.props(caller.root).className ?? '');
+  });
+
+  it('merges the className a render source hands the root', () => {
+    render(
+      <Avatar.Root
+        data-testid='avatar'
+        render={<span className='from-render' />}
+      >
+        <Avatar.Fallback>CN</Avatar.Fallback>
+      </Avatar.Root>,
+    );
+    expect(screen.getByTestId('avatar')).toHaveClass('cl-avatar', 'from-render');
   });
 
   it('composes its root onto another element and renders an icon affordance', () => {
diff --git a/packages/ui/src/mosaic/components/avatar/avatar.tsx b/packages/ui/src/mosaic/components/avatar/avatar.tsx
index 1aeeab8de50..bd02dad24eb 100644
--- a/packages/ui/src/mosaic/components/avatar/avatar.tsx
+++ b/packages/ui/src/mosaic/components/avatar/avatar.tsx
@@ -3,7 +3,7 @@ import { useSafeLayoutEffect } from '@clerk/shared/react';
 import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
-import type { MosaicComponentProps } from '../../props';
+import type { MosaicComponentProps, MosaicElementProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { focusOutline } from '../../utils/focus-outline.styles';
 import { reset } from '../../utils/reset.styles';
@@ -32,7 +32,7 @@ export interface AvatarProps extends MosaicComponentProps<'span'> {
 }
 
 const AvatarRoot = React.forwardRef<HTMLSpanElement, AvatarProps>(function MosaicAvatarRoot(
-  { shape = 'circle', size = 'md', render, className, style, ...rest },
+  { shape = 'circle', size = 'md', render, xstyle, ...rest },
   ref,
 ) {
   const [status, setStatus] = React.useState<ImageLoadingStatus>('idle');
@@ -52,21 +52,20 @@ const AvatarRoot = React.forwardRef<HTMLSpanElement, AvatarProps>(function Mosai
           sizes[size],
           interactive && styles.interactive,
           interactive && focusOutline.visible,
+          xstyle,
         ),
-        className,
-        style,
+        rest,
       ),
-      ...rest,
     },
   });
 
   return <AvatarContext.Provider value={value}>{element}</AvatarContext.Provider>;
 });
 
-export type AvatarImageProps = React.ComponentPropsWithRef<'img'>;
+export type AvatarImageProps = MosaicElementProps<'img'>;
 
 const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(function MosaicAvatarImage(
-  { src, alt = '', className, style, ...rest },
+  { src, alt = '', xstyle, ...rest },
   ref,
 ) {
   const { status, onStatusChange } = useAvatarContext('Avatar.Image');
@@ -112,19 +111,18 @@ const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(functio
       // An avatar is an identity mark, not content to pull out of the page — dragging one
       // only ever produces a stray ghost image mid-interaction.
       draggable={false}
-      {...mergeStyleProps(themeProps('avatar-image'), stylex.props(reset.base, styles.image), className, style)}
-      {...rest}
+      {...mergeStyleProps(themeProps('avatar-image'), stylex.props(reset.base, styles.image, xstyle), rest)}
     />
   );
 });
 
-export interface AvatarFallbackProps extends React.ComponentPropsWithRef<'span'> {
+export interface AvatarFallbackProps extends MosaicElementProps<'span'> {
   /** Wait this many ms before showing the fallback, to avoid a flash on fast connections. */
   delayMs?: number;
 }
 
 const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallbackProps>(function MosaicAvatarFallback(
-  { delayMs, className, style, children, ...rest },
+  { delayMs, xstyle, children, ...rest },
   ref,
 ) {
   const { status } = useAvatarContext('Avatar.Fallback');
@@ -149,11 +147,9 @@ const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallbackProps>(fu
       ref={ref}
       {...mergeStyleProps(
         themeProps('avatar-fallback', { pending }),
-        stylex.props(reset.base, styles.fallback, pending && styles.fallbackPending),
-        className,
-        style,
+        stylex.props(reset.base, styles.fallback, pending && styles.fallbackPending, xstyle),
+        rest,
       )}
-      {...rest}
     >
       <span {...mergeStyleProps(themeProps('avatar-fallback-content'), stylex.props(styles.fallbackContent))}>
         {children}
@@ -162,10 +158,10 @@ const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallbackProps>(fu
   );
 });
 
-export type AvatarIconProps = React.ComponentPropsWithRef<'span'>;
+export type AvatarIconProps = MosaicElementProps<'span'>;
 
 const AvatarIcon = React.forwardRef<HTMLSpanElement, AvatarIconProps>(function MosaicAvatarIcon(
-  { className, style, ...rest },
+  { xstyle, ...rest },
   ref,
 ) {
   useAvatarContext('Avatar.Icon');
@@ -174,8 +170,7 @@ const AvatarIcon = React.forwardRef<HTMLSpanElement, AvatarIconProps>(function M
     <span
       ref={ref}
       aria-hidden
-      {...mergeStyleProps(themeProps('avatar-icon'), stylex.props(reset.base, styles.icon), className, style)}
-      {...rest}
+      {...mergeStyleProps(themeProps('avatar-icon'), stylex.props(reset.base, styles.icon, xstyle), rest)}
     />
   );
 });
diff --git a/packages/ui/src/mosaic/components/badge/badge.test.tsx b/packages/ui/src/mosaic/components/badge/badge.test.tsx
index fa664e5cae9..d33d1b032a3 100644
--- a/packages/ui/src/mosaic/components/badge/badge.test.tsx
+++ b/packages/ui/src/mosaic/components/badge/badge.test.tsx
@@ -1,9 +1,14 @@
+import * as stylex from '@stylexjs/stylex';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { Badge } from './badge';
 
+const atoms = stylex.create({
+  spaced: { marginTop: '8px' },
+});
+
 describe('Mosaic Badge', () => {
   it('renders its children', () => {
     render(<Badge>Active</Badge>);
@@ -22,18 +27,15 @@ describe('Mosaic Badge', () => {
     expect(screen.getByText('Active')).toHaveAttribute('data-color', color);
   });
 
-  it('lets the consumer className and style win', () => {
-    render(
-      <Badge
-        className='my-badge'
-        style={{ marginTop: '8px' }}
-      >
-        Active
-      </Badge>,
-    );
+  it('merges xstyle atoms after the slot atoms', () => {
+    render(<Badge xstyle={atoms.spaced}>Active</Badge>);
     const badge = screen.getByText('Active');
-    expect(badge).toHaveClass('cl-badge', 'my-badge');
-    expect(badge).toHaveStyle({ marginTop: '8px' });
+    expect(badge).toHaveClass('cl-badge', stylex.props(atoms.spaced).className ?? '');
+  });
+
+  it('merges a className carried by the render element instead of clobbering the slot class', () => {
+    render(<Badge render={<span className='from-source' />}>Active</Badge>);
+    expect(screen.getByText('Active')).toHaveClass('cl-badge', 'from-source');
   });
 
   it('forwards arbitrary span props and the ref', () => {
diff --git a/packages/ui/src/mosaic/components/badge/badge.tsx b/packages/ui/src/mosaic/components/badge/badge.tsx
index fa18dcb42b3..87a0d673a6a 100644
--- a/packages/ui/src/mosaic/components/badge/badge.tsx
+++ b/packages/ui/src/mosaic/components/badge/badge.tsx
@@ -30,7 +30,7 @@ export type BadgeProps = MosaicComponentProps<'span'> & {
  * <Badge render={<a href='/billing' />}>Upgrade</Badge>
  */
 export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function MosaicBadge(
-  { color = 'primary', render, className, style, ...rest },
+  { color = 'primary', render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -40,11 +40,9 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Mosa
     props: {
       ...mergeStyleProps(
         themeProps('badge', { color }),
-        stylex.props(reset.base, styles.base, colors[color]),
-        className,
-        style,
+        stylex.props(reset.base, styles.base, colors[color], xstyle),
+        rest,
       ),
-      ...rest,
     },
   });
 });
diff --git a/packages/ui/src/mosaic/components/banner/banner.test.tsx b/packages/ui/src/mosaic/components/banner/banner.test.tsx
index 55fc3cba129..13f34c95e67 100644
--- a/packages/ui/src/mosaic/components/banner/banner.test.tsx
+++ b/packages/ui/src/mosaic/components/banner/banner.test.tsx
@@ -1,9 +1,19 @@
+import * as stylex from '@stylexjs/stylex';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { Banner } from './banner';
 
+const overrides = stylex.create({
+  root: { marginTop: '8px' },
+  label: { fontWeight: 700 },
+  description: { opacity: 0.8 },
+});
+
+const atoms = (style: stylex.StyleXStyles) =>
+  (stylex.props(style).className ?? '').split(' ').filter(name => /^x[a-z0-9]+$/.test(name));
+
 const COLORS = ['neutral', 'warning', 'negative'] as const;
 
 describe('Mosaic Banner', () => {
@@ -60,21 +70,25 @@ describe('Mosaic Banner', () => {
     expect(container.querySelector('.cl-banner-root > .cl-icon')).toBeInTheDocument();
   });
 
-  it('lets the consumer className and style win on every part', () => {
+  it('applies xstyle on every part', () => {
     const { container } = render(
-      <Banner.Root
-        className='my-banner'
-        style={{ marginTop: '8px' }}
-      >
-        <Banner.Label className='my-label'>Label</Banner.Label>
-        <Banner.Description className='my-description'>Description</Banner.Description>
+      <Banner.Root xstyle={overrides.root}>
+        <Banner.Label xstyle={overrides.label}>Label</Banner.Label>
+        <Banner.Description xstyle={overrides.description}>Description</Banner.Description>
+      </Banner.Root>,
+    );
+    expect(container.querySelector('.cl-banner-root')).toHaveClass('cl-banner-root', ...atoms(overrides.root));
+    expect(screen.getByText('Label')).toHaveClass('cl-banner-label', ...atoms(overrides.label));
+    expect(screen.getByText('Description')).toHaveClass('cl-banner-description', ...atoms(overrides.description));
+  });
+
+  it('merges a render-sourced className instead of clobbering its own', () => {
+    render(
+      <Banner.Root>
+        <Banner.Label render={<Banner.Description />}>Label</Banner.Label>
       </Banner.Root>,
     );
-    const root = container.querySelector('.cl-banner-root');
-    expect(root).toHaveClass('cl-banner-root', 'my-banner');
-    expect(root).toHaveStyle({ marginTop: '8px' });
-    expect(screen.getByText('Label')).toHaveClass('cl-banner-label', 'my-label');
-    expect(screen.getByText('Description')).toHaveClass('cl-banner-description', 'my-description');
+    expect(screen.getByText('Label')).toHaveClass('cl-banner-label', 'cl-banner-description');
   });
 
   it('forwards arbitrary props and refs', () => {
diff --git a/packages/ui/src/mosaic/components/banner/banner.tsx b/packages/ui/src/mosaic/components/banner/banner.tsx
index 5424f499600..5c200215093 100644
--- a/packages/ui/src/mosaic/components/banner/banner.tsx
+++ b/packages/ui/src/mosaic/components/banner/banner.tsx
@@ -28,7 +28,7 @@ export interface BannerRootProps extends MosaicComponentProps<'div'> {
 }
 
 const Root = React.forwardRef<HTMLDivElement, BannerRootProps>(function MosaicBannerRoot(
-  { color = DEFAULT_COLOR, render, className, style, children, ...rest },
+  { color = DEFAULT_COLOR, render, xstyle, children, ...rest },
   ref,
 ) {
   const element = useRender({
@@ -38,11 +38,9 @@ const Root = React.forwardRef<HTMLDivElement, BannerRootProps>(function MosaicBa
     props: {
       ...mergeStyleProps(
         themeProps('banner-root', { color }),
-        stylex.props(reset.base, styles.root, rootColors[color]),
-        className,
-        style,
+        stylex.props(reset.base, styles.root, rootColors[color], xstyle),
+        rest,
       ),
-      ...rest,
       children: (
         <>
           <Icon
@@ -66,7 +64,7 @@ const Root = React.forwardRef<HTMLDivElement, BannerRootProps>(function MosaicBa
 export type BannerLabelProps = MosaicComponentProps<'p'>;
 
 const Label = React.forwardRef<HTMLSpanElement, BannerLabelProps>(function MosaicBannerLabel(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   const color = React.useContext(BannerColorContext);
@@ -75,13 +73,7 @@ const Label = React.forwardRef<HTMLSpanElement, BannerLabelProps>(function Mosai
     render,
     ref,
     props: {
-      ...mergeStyleProps(
-        themeProps('banner-label', { color }),
-        stylex.props(reset.base, styles.label),
-        className,
-        style,
-      ),
-      ...rest,
+      ...mergeStyleProps(themeProps('banner-label', { color }), stylex.props(reset.base, styles.label, xstyle), rest),
     },
   });
 });
@@ -90,7 +82,7 @@ const Label = React.forwardRef<HTMLSpanElement, BannerLabelProps>(function Mosai
 export type BannerDescriptionProps = MosaicComponentProps<'p'>;
 
 const Description = React.forwardRef<HTMLParagraphElement, BannerDescriptionProps>(function MosaicBannerDescription(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   const color = React.useContext(BannerColorContext);
@@ -101,11 +93,9 @@ const Description = React.forwardRef<HTMLParagraphElement, BannerDescriptionProp
     props: {
       ...mergeStyleProps(
         themeProps('banner-description', { color }),
-        stylex.props(reset.base, styles.description, descriptionColors[color]),
-        className,
-        style,
+        stylex.props(reset.base, styles.description, descriptionColors[color], xstyle),
+        rest,
       ),
-      ...rest,
     },
   });
 });
diff --git a/packages/ui/src/mosaic/components/branding/branding.tsx b/packages/ui/src/mosaic/components/branding/branding.tsx
index 25d0fd76249..afdd7a74014 100644
--- a/packages/ui/src/mosaic/components/branding/branding.tsx
+++ b/packages/ui/src/mosaic/components/branding/branding.tsx
@@ -17,7 +17,7 @@ export type BrandingProps = Omit<MosaicComponentProps<'span'>, 'children'>;
  * `renderBranding`. The logo names the link, so a screen reader reaches "Clerk", not an unnamed link.
  */
 export const Branding = React.forwardRef<HTMLSpanElement, BrandingProps>(function Branding(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -25,8 +25,7 @@ export const Branding = React.forwardRef<HTMLSpanElement, BrandingProps>(functio
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('branding'), stylex.props(reset.base, styles.base), className, style),
-      ...rest,
+      ...mergeStyleProps(themeProps('branding'), stylex.props(reset.base, styles.base, xstyle), rest),
       children: (
         <>
           Secured by{' '}
diff --git a/packages/ui/src/mosaic/components/button/button.test.tsx b/packages/ui/src/mosaic/components/button/button.test.tsx
index 503b1c50d8c..9a34258cc71 100644
--- a/packages/ui/src/mosaic/components/button/button.test.tsx
+++ b/packages/ui/src/mosaic/components/button/button.test.tsx
@@ -1,3 +1,4 @@
+import * as stylex from '@stylexjs/stylex';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
@@ -5,6 +6,10 @@ import { describe, expect, it, vi } from 'vitest';
 
 import { Button } from './button';
 
+const atoms = stylex.create({
+  spaced: { marginTop: '8px' },
+});
+
 describe('Mosaic Button', () => {
   it('renders a button with its children', () => {
     render(<Button>Hi</Button>);
@@ -60,7 +65,7 @@ describe('Mosaic Button', () => {
     expect(screen.getByRole('button')).not.toHaveAttribute('touchtarget');
   });
 
-  it('wires variant props and consumer className/style through to the element', () => {
+  it('wires variant props and xstyle atoms through to the element', () => {
     render(
       <Button
         color='negative'
@@ -68,8 +73,7 @@ describe('Mosaic Button', () => {
         size='sm'
         shape='circle'
         fullWidth
-        className='my-button'
-        style={{ marginTop: '8px' }}
+        xstyle={atoms.spaced}
       >
         Hi
       </Button>,
@@ -80,8 +84,7 @@ describe('Mosaic Button', () => {
     expect(button).toHaveAttribute('data-size', 'sm');
     expect(button).toHaveAttribute('data-shape', 'circle');
     expect(button).toHaveAttribute('data-full-width', '');
-    expect(button).toHaveClass('cl-button', 'my-button');
-    expect(button).toHaveStyle({ marginTop: '8px' });
+    expect(button).toHaveClass('cl-button', stylex.props(atoms.spaced).className ?? '');
   });
 
   it.each(['primary', 'neutral', 'negative'] as const)('reflects the %s color', color => {
diff --git a/packages/ui/src/mosaic/components/button/button.tsx b/packages/ui/src/mosaic/components/button/button.tsx
index 5ed6e0f63e9..ae516872c93 100644
--- a/packages/ui/src/mosaic/components/button/button.tsx
+++ b/packages/ui/src/mosaic/components/button/button.tsx
@@ -104,8 +104,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
     touchTarget = true,
     disabled: disabledProp,
     focusableWhenDisabled = false,
-    className,
-    style,
+    xstyle,
     children,
     ...rest
   },
@@ -144,11 +143,10 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
           fullWidth && styles.fullWidth,
           disabled && styles.disabled,
           defaults.styles,
+          xstyle,
         ),
-        className,
-        style,
+        rest,
       )}
-      {...rest}
     >
       {withTruncatableLabel(children)}
     </HeadlessButton>
diff --git a/packages/ui/src/mosaic/components/button/submit-button.test.tsx b/packages/ui/src/mosaic/components/button/submit-button.test.tsx
index c9ce86b091f..ccbb7f99a01 100644
--- a/packages/ui/src/mosaic/components/button/submit-button.test.tsx
+++ b/packages/ui/src/mosaic/components/button/submit-button.test.tsx
@@ -1,3 +1,4 @@
+import * as stylex from '@stylexjs/stylex';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
@@ -5,6 +6,10 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { SubmitButton } from './submit-button';
 
+const consumerAtoms = stylex.create({
+  spaced: { marginTop: '8px' },
+});
+
 /** The spinner is decorative, so it has no role or name to query — only its slot class. */
 const spinner = () => document.querySelector('.cl-spinner');
 const content = () => screen.getByRole('button').firstElementChild;
@@ -193,15 +198,14 @@ describe('Mosaic SubmitButton', () => {
     expect(spinner()).toHaveAttribute('data-size', expected);
   });
 
-  it('wires the button variant props and consumer className/style through', () => {
+  it('wires the button variant props and xstyle atoms through', () => {
     render(
       <SubmitButton
         color='negative'
         variant='outline'
         size='sm'
         fullWidth
-        className='my-button'
-        style={{ marginTop: '8px' }}
+        xstyle={consumerAtoms.spaced}
       >
         Save
       </SubmitButton>,
@@ -211,8 +215,7 @@ describe('Mosaic SubmitButton', () => {
     expect(button).toHaveAttribute('data-variant', 'outline');
     expect(button).toHaveAttribute('data-size', 'sm');
     expect(button).toHaveAttribute('data-full-width', '');
-    expect(button).toHaveClass('cl-button', 'my-button');
-    expect(button).toHaveStyle({ marginTop: '8px' });
+    expect(button).toHaveClass('cl-button', stylex.props(consumerAtoms.spaced).className ?? '');
   });
 
   it('keeps the isPending prop off the element', () => {
diff --git a/packages/ui/src/mosaic/components/button/submit-button.tsx b/packages/ui/src/mosaic/components/button/submit-button.tsx
index 29f0b6996ad..3d0f3fa141a 100644
--- a/packages/ui/src/mosaic/components/button/submit-button.tsx
+++ b/packages/ui/src/mosaic/components/button/submit-button.tsx
@@ -58,7 +58,7 @@ const DEFAULT_SPIN_DELAY = 300;
  * <SubmitButton color='negative' isPending={isDeleting}>Delete</SubmitButton>
  */
 export const SubmitButton = React.forwardRef<HTMLButtonElement, SubmitButtonProps>(function MosaicSubmitButton(
-  { isPending = false, pendingLabel = 'pending', size = 'md', spinDelay, className, children, onClick, ...rest },
+  { isPending = false, pendingLabel = 'pending', size = 'md', spinDelay, xstyle, children, onClick, ...rest },
   ref,
 ) {
   const { delay = DEFAULT_SPIN_DELAY, minDuration } = spinDelay ?? {};
@@ -93,7 +93,7 @@ export const SubmitButton = React.forwardRef<HTMLButtonElement, SubmitButtonProp
       // puts there when the button is disabled but not pending.
       {...(isPending ? { 'aria-busy': true, 'aria-disabled': true, 'data-pending': '' } : null)}
       onClick={handleClick}
-      {...mergeStyleProps(stylex.props(styles.root, isPending && styles.rootPending), className)}
+      xstyle={[styles.root, isPending && styles.rootPending, xstyle]}
       {...rest}
     >
       <span
@@ -116,7 +116,7 @@ export const SubmitButton = React.forwardRef<HTMLButtonElement, SubmitButtonProp
           aria-hidden={undefined}
           aria-label={pendingLabel}
           size={spinnerSizes[size]}
-          {...stylex.props(styles.spinner, !showPending && styles.spinnerHidden)}
+          xstyle={[styles.spinner, !showPending && styles.spinnerHidden]}
         />
       ) : null}
     </Button>
diff --git a/packages/ui/src/mosaic/components/card/card.test.tsx b/packages/ui/src/mosaic/components/card/card.test.tsx
index 2e1d6eec3f0..065cb094ed4 100644
--- a/packages/ui/src/mosaic/components/card/card.test.tsx
+++ b/packages/ui/src/mosaic/components/card/card.test.tsx
@@ -9,6 +9,13 @@ import { Card } from './card';
 
 const compactCard = '@container card (max-width: 20rem)' as const;
 
+const callerStyles = stylex.create({
+  root: { width: '20rem' },
+  header: { textAlign: 'right' },
+  content: { paddingInline: 0 },
+  footer: { paddingBlockEnd: 0 },
+});
+
 const responsiveLayout = stylex.create({
   root: {
     containerName: 'card',
@@ -80,39 +87,52 @@ describe('Mosaic Card', () => {
     expect(screen.getByTestId('footer')).toHaveAttribute('data-elevation', 'overlay');
   });
 
-  it('lets consumer className and style win on every slot', () => {
+  it('composes caller xstyle onto every slot', () => {
     render(
       <Card.Root
-        className='my-card'
-        style={{ width: '20rem' }}
+        xstyle={callerStyles.root}
         data-testid='root'
       >
         <Card.Header
-          className='my-header'
-          style={{ textAlign: 'right' }}
+          xstyle={callerStyles.header}
           data-testid='header'
         />
         <Card.Content
-          className='my-content'
-          style={{ paddingInline: 0 }}
+          xstyle={callerStyles.content}
           data-testid='content'
         />
         <Card.Footer
-          className='my-footer'
-          style={{ paddingBlockEnd: 0 }}
+          xstyle={callerStyles.footer}
           data-testid='footer'
         />
       </Card.Root>,
     );
 
-    expect(screen.getByTestId('root')).toHaveClass('cl-card-root', 'my-card');
-    expect(screen.getByTestId('root')).toHaveStyle({ width: '20rem' });
-    expect(screen.getByTestId('header')).toHaveClass('cl-card-header', 'my-header');
-    expect(screen.getByTestId('header')).toHaveStyle({ textAlign: 'right' });
-    expect(screen.getByTestId('content')).toHaveClass('cl-card-content', 'my-content');
-    expect(screen.getByTestId('content')).toHaveStyle({ paddingInline: 0 });
-    expect(screen.getByTestId('footer')).toHaveClass('cl-card-footer', 'my-footer');
-    expect(screen.getByTestId('footer')).toHaveStyle({ paddingBlockEnd: 0 });
+    expect(screen.getByTestId('root')).toHaveClass('cl-card-root', stylex.props(callerStyles.root).className ?? '');
+    expect(screen.getByTestId('header')).toHaveClass(
+      'cl-card-header',
+      stylex.props(callerStyles.header).className ?? '',
+    );
+    expect(screen.getByTestId('content')).toHaveClass(
+      'cl-card-content',
+      stylex.props(callerStyles.content).className ?? '',
+    );
+    expect(screen.getByTestId('footer')).toHaveClass(
+      'cl-card-footer',
+      stylex.props(callerStyles.footer).className ?? '',
+    );
+  });
+
+  it('merges the className and style a render source hands a slot', () => {
+    render(
+      <Card.Root data-testid='root'>
+        <Card.Header render={<Card.Content data-testid='header' />} />
+      </Card.Root>,
+    );
+
+    // `Card.Header` clones its merged class onto the `Card.Content` it renders; the content
+    // keeps its own slot class rather than being overwritten by the incoming one.
+    expect(screen.getByTestId('header')).toHaveClass('cl-card-header', 'cl-card-content');
   });
 
   it('forwards refs and arbitrary props from compound slots', () => {
diff --git a/packages/ui/src/mosaic/components/card/card.tsx b/packages/ui/src/mosaic/components/card/card.tsx
index 727239cb8ac..8b4c6a0f1ac 100644
--- a/packages/ui/src/mosaic/components/card/card.tsx
+++ b/packages/ui/src/mosaic/components/card/card.tsx
@@ -39,7 +39,7 @@ export interface CardProps extends MosaicComponentProps<'div'> {
 }
 
 const Root = React.forwardRef<HTMLDivElement, CardProps>(function CardRoot(
-  { elevation = DEFAULT_ELEVATION, renderBranding = true, render, className, style, children, ...rest },
+  { elevation = DEFAULT_ELEVATION, renderBranding = true, render, xstyle, children, ...rest },
   ref,
 ) {
   const element = useRender({
@@ -49,11 +49,9 @@ const Root = React.forwardRef<HTMLDivElement, CardProps>(function CardRoot(
     props: {
       ...mergeStyleProps(
         themeProps('card-root', { elevation }),
-        stylex.props(reset.base, slots.root.base, slots.root[elevation]),
-        className,
-        style,
+        stylex.props(reset.base, slots.root.base, slots.root[elevation], xstyle),
+        rest,
       ),
-      ...rest,
       children: (
         <>
           {children}
@@ -90,7 +88,7 @@ function HeaderCloseButton() {
 }
 
 const Header = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(function CardHeader(
-  { render, className, style, children, ...rest },
+  { render, xstyle, children, ...rest },
   ref,
 ) {
   const dialog = React.useContext(DialogContext);
@@ -99,8 +97,7 @@ const Header = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(fun
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('card-header'), stylex.props(reset.base, slots.header.base), className, style),
-      ...rest,
+      ...mergeStyleProps(themeProps('card-header'), stylex.props(reset.base, slots.header.base, xstyle), rest),
       children: (
         <>
           {/* First in the DOM, so it is the first tabbable element and takes the dialog's opening
@@ -121,7 +118,7 @@ const Header = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(fun
  * `aria-labelledby` at, so the card names the dialog without knowing it is in one.
  */
 const Title = React.forwardRef<HTMLHeadingElement, MosaicComponentProps<'h2'>>(function CardTitle(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   const dialog = React.useContext(DialogContext);
@@ -130,8 +127,7 @@ const Title = React.forwardRef<HTMLHeadingElement, MosaicComponentProps<'h2'>>(f
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('card-title'), stylex.props(reset.base, slots.header.title), className, style),
-      ...rest,
+      ...mergeStyleProps(themeProps('card-title'), stylex.props(reset.base, slots.header.title, xstyle), rest),
       // The popup points `aria-labelledby` at this id, so the surface outranks the caller: an id
       // that displaced it would leave the dialog with no accessible name.
       ...(dialog && { id: dialog.labelId }),
@@ -141,7 +137,7 @@ const Title = React.forwardRef<HTMLHeadingElement, MosaicComponentProps<'h2'>>(f
 
 /** Describes the card. The `aria-describedby` counterpart to {@link Title}. */
 const Description = React.forwardRef<HTMLParagraphElement, MosaicComponentProps<'p'>>(function CardDescription(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   const dialog = React.useContext(DialogContext);
@@ -152,18 +148,16 @@ const Description = React.forwardRef<HTMLParagraphElement, MosaicComponentProps<
     props: {
       ...mergeStyleProps(
         themeProps('card-description'),
-        stylex.props(reset.base, slots.header.description),
-        className,
-        style,
+        stylex.props(reset.base, slots.header.description, xstyle),
+        rest,
       ),
-      ...rest,
       ...(dialog && { id: dialog.descriptionId }),
     },
   });
 });
 
 const Content = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(function CardContent(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -173,17 +167,15 @@ const Content = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(fu
     props: {
       ...mergeStyleProps(
         themeProps('card-content'),
-        stylex.props(reset.base, slots.content.base, cardContentMarker),
-        className,
-        style,
+        stylex.props(reset.base, slots.content.base, cardContentMarker, xstyle),
+        rest,
       ),
-      ...rest,
     },
   });
 });
 
 const Footer = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(function CardFooter(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   const elevation = React.useContext(CardElevationContext);
@@ -194,11 +186,9 @@ const Footer = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(fun
     props: {
       ...mergeStyleProps(
         themeProps('card-footer', { elevation }),
-        stylex.props(reset.base, slots.footer.base),
-        className,
-        style,
+        stylex.props(reset.base, slots.footer.base, xstyle),
+        rest,
       ),
-      ...rest,
     },
   });
 });
diff --git a/packages/ui/src/mosaic/components/combobox/combobox.tsx b/packages/ui/src/mosaic/components/combobox/combobox.tsx
index fc275a1ac7e..931740225ca 100644
--- a/packages/ui/src/mosaic/components/combobox/combobox.tsx
+++ b/packages/ui/src/mosaic/components/combobox/combobox.tsx
@@ -39,14 +39,13 @@ export function ComboboxRoot({ sideOffset = 8, ...props }: ComboboxRootProps) {
 }
 
 export const ComboboxTrigger = React.forwardRef<HTMLButtonElement, ComboboxTriggerProps>(function MosaicComboboxTrigger(
-  { className, style, ...props },
+  { xstyle, ...rest },
   ref,
 ) {
   return (
     <HeadlessCombobox.Trigger
       ref={ref}
-      {...mergeStyleProps(themeProps('combobox-trigger'), className, style)}
-      {...props}
+      {...mergeStyleProps(themeProps('combobox-trigger'), stylex.props(xstyle), rest)}
     />
   );
 });
@@ -57,7 +56,7 @@ export interface ComboboxInputProps extends Omit<MosaicComponentProps<'input'>,
 }
 
 export const ComboboxInput = React.forwardRef<HTMLInputElement, ComboboxInputProps>(function MosaicComboboxInput(
-  { size: sizeProp, variant: variantProp, render, className, style, ...rest },
+  { size: sizeProp, variant: variantProp, render, xstyle, ...rest },
   ref,
 ) {
   const inputGroup = useOptionalInputGroupContext();
@@ -81,8 +80,7 @@ export const ComboboxInput = React.forwardRef<HTMLInputElement, ComboboxInputPro
           />
         )
       }
-      {...mergeStyleProps(themeProps('combobox-input', { size, variant }), className, style)}
-      {...rest}
+      {...mergeStyleProps(themeProps('combobox-input', { size, variant }), stylex.props(xstyle), rest)}
     />
   );
 });
@@ -96,7 +94,7 @@ export interface ComboboxPopupProps extends MosaicComponentProps<'div'> {
 
 /** Floating listbox surface. Portal and positioning are handled internally. */
 export const ComboboxPopup = React.forwardRef<HTMLDivElement, ComboboxPopupProps>(function MosaicComboboxPopup(
-  { anchor, portalRoot, className, style, children, ...rest },
+  { anchor, portalRoot, xstyle, children, ...rest },
   ref,
 ) {
   const context = React.useContext(ComboboxAnchorContext);
@@ -110,11 +108,9 @@ export const ComboboxPopup = React.forwardRef<HTMLDivElement, ComboboxPopupProps
           ref={ref}
           {...mergeStyleProps(
             themeProps('combobox-popup'),
-            stylex.props(reset.base, scrollAreaRoot, styles.popup),
-            className,
-            style,
+            stylex.props(reset.base, scrollAreaRoot, styles.popup, xstyle),
+            rest,
           )}
-          {...rest}
         >
           <div
             {...mergeStyleProps(
@@ -134,7 +130,7 @@ export type ComboboxListProps = MosaicComponentProps<'div'>;
 
 /** Scrollable listbox used when the combobox is embedded in another surface. */
 export const ComboboxList = React.forwardRef<HTMLDivElement, ComboboxListProps>(function MosaicComboboxList(
-  { className, style, ...rest },
+  { xstyle, ...rest },
   ref,
 ) {
   return (
@@ -142,11 +138,9 @@ export const ComboboxList = React.forwardRef<HTMLDivElement, ComboboxListProps>(
       ref={ref}
       {...mergeStyleProps(
         themeProps('combobox-list'),
-        stylex.props(reset.base, scrollAreaRoot, ...scrollAreaViewport(), styles.list),
-        className,
-        style,
+        stylex.props(reset.base, scrollAreaRoot, ...scrollAreaViewport(), styles.list, xstyle),
+        rest,
       )}
-      {...rest}
     />
   );
 });
@@ -158,14 +152,13 @@ export interface ComboboxOptionProps extends MosaicComponentProps<'div'> {
 }
 
 export const ComboboxOption = React.forwardRef<HTMLDivElement, ComboboxOptionProps>(function MosaicComboboxOption(
-  { className, style, ...rest },
+  { xstyle, ...rest },
   ref,
 ) {
   return (
     <HeadlessCombobox.Option
       ref={ref}
-      {...mergeStyleProps(themeProps('combobox-option'), stylex.props(reset.base, styles.option), className, style)}
-      {...rest}
+      {...mergeStyleProps(themeProps('combobox-option'), stylex.props(reset.base, styles.option, xstyle), rest)}
     />
   );
 });
@@ -175,12 +168,11 @@ export type ComboboxEmptyProps = MosaicComponentProps<'p'>;
 export type ComboboxOptionIndicatorProps = MosaicComponentProps<'span'>;
 
 export const ComboboxOptionIndicator = React.forwardRef<HTMLSpanElement, ComboboxOptionIndicatorProps>(
-  function MosaicComboboxOptionIndicator({ className, style, children, ...props }, ref) {
+  function MosaicComboboxOptionIndicator({ xstyle, children, ...rest }, ref) {
     return (
       <HeadlessCombobox.OptionIndicator
         ref={ref}
-        {...mergeStyleProps(themeProps('combobox-option-indicator'), stylex.props(styles.indicator), className, style)}
-        {...props}
+        {...mergeStyleProps(themeProps('combobox-option-indicator'), stylex.props(styles.indicator, xstyle), rest)}
       >
         {children ?? (
           <Icon
@@ -194,7 +186,7 @@ export const ComboboxOptionIndicator = React.forwardRef<HTMLSpanElement, Combobo
 );
 
 export const ComboboxEmpty = React.forwardRef<HTMLParagraphElement, ComboboxEmptyProps>(function MosaicComboboxEmpty(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -202,8 +194,7 @@ export const ComboboxEmpty = React.forwardRef<HTMLParagraphElement, ComboboxEmpt
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('combobox-empty'), stylex.props(reset.base, styles.empty), className, style),
-      ...rest,
+      ...mergeStyleProps(themeProps('combobox-empty'), stylex.props(reset.base, styles.empty, xstyle), rest),
     },
   });
 });
diff --git a/packages/ui/src/mosaic/components/dialog/alert-dialog.test.tsx b/packages/ui/src/mosaic/components/dialog/alert-dialog.test.tsx
index a6f6272aa34..3783da325af 100644
--- a/packages/ui/src/mosaic/components/dialog/alert-dialog.test.tsx
+++ b/packages/ui/src/mosaic/components/dialog/alert-dialog.test.tsx
@@ -1,3 +1,4 @@
+import * as stylex from '@stylexjs/stylex';
 import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
@@ -300,7 +301,8 @@ describe('dev warnings', () => {
 });
 
 describe('Dialog.Actions', () => {
-  it('merges consumer className and style', () => {
+  it('composes consumer xstyle onto the row', () => {
+    const caller = stylex.create({ actions: { marginBlockStart: '2rem' } });
     render(
       <Dialog.Root
         defaultOpen
@@ -310,8 +312,7 @@ describe('Dialog.Actions', () => {
           <Dialog.Title>Discard changes?</Dialog.Title>
           <Dialog.Description>This address has not been saved.</Dialog.Description>
           <Dialog.Actions
-            className='custom'
-            style={{ marginBlockStart: '2rem' }}
+            xstyle={caller.actions}
             data-testid='actions'
           >
             <Dialog.Close>Keep editing</Dialog.Close>
@@ -320,10 +321,32 @@ describe('Dialog.Actions', () => {
       </Dialog.Root>,
     );
 
-    const actions = screen.getByTestId('actions');
-    expect(actions).toHaveClass('cl-dialog-actions');
-    expect(actions).toHaveClass('custom');
-    expect(actions).toHaveStyle({ marginBlockStart: '2rem' });
+    expect(screen.getByTestId('actions')).toHaveClass(
+      'cl-dialog-actions',
+      stylex.props(caller.actions).className ?? '',
+    );
+  });
+
+  it('merges the className a render source hands the row', () => {
+    render(
+      <Dialog.Root
+        defaultOpen
+        role='alertdialog'
+      >
+        <Dialog.Popup>
+          <Dialog.Title>Discard changes?</Dialog.Title>
+          <Dialog.Description>This address has not been saved.</Dialog.Description>
+          <Dialog.Actions
+            render={<div className='from-render' />}
+            data-testid='actions'
+          >
+            <Dialog.Close>Keep editing</Dialog.Close>
+          </Dialog.Actions>
+        </Dialog.Popup>
+      </Dialog.Root>,
+    );
+
+    expect(screen.getByTestId('actions')).toHaveClass('cl-dialog-actions', 'from-render');
   });
 
   it('renders as another element through render', () => {
diff --git a/packages/ui/src/mosaic/components/dialog/dialog.test.tsx b/packages/ui/src/mosaic/components/dialog/dialog.test.tsx
index f64848c53b0..5b92bdf8d7b 100644
--- a/packages/ui/src/mosaic/components/dialog/dialog.test.tsx
+++ b/packages/ui/src/mosaic/components/dialog/dialog.test.tsx
@@ -81,21 +81,28 @@ describe('Mosaic Dialog', () => {
     expect(document.querySelector('.cl-dialog-viewport')).toHaveAttribute('data-size', 'profile');
   });
 
-  it('merges consumer className and style onto the popup', () => {
+  it('composes consumer xstyle onto the popup', () => {
+    const caller = stylex.create({ popup: { marginTop: '8px' } });
     render(
       <Dialog.Root defaultOpen>
-        <Dialog.Popup
-          className='my-popup'
-          style={{ marginTop: '8px' }}
-        >
-          Body
-        </Dialog.Popup>
+        <Dialog.Popup xstyle={caller.popup}>Body</Dialog.Popup>
+      </Dialog.Root>,
+    );
+
+    expect(document.querySelector('.cl-dialog-popup')).toHaveClass(
+      'cl-dialog-popup',
+      stylex.props(caller.popup).className ?? '',
+    );
+  });
+
+  it('merges the className a render source hands the popup', () => {
+    render(
+      <Dialog.Root defaultOpen>
+        <Dialog.Popup render={<div className='from-render' />}>Body</Dialog.Popup>
       </Dialog.Root>,
     );
 
-    const popup = document.querySelector('.cl-dialog-popup');
-    expect(popup).toHaveClass('cl-dialog-popup', 'my-popup');
-    expect(popup).toHaveStyle({ marginTop: '8px' });
+    expect(document.querySelector('.cl-dialog-popup')).toHaveClass('cl-dialog-popup', 'from-render');
   });
 
   it('closes on Dialog.Close, reporting it through onOpenChange', async () => {
diff --git a/packages/ui/src/mosaic/components/dialog/dialog.tsx b/packages/ui/src/mosaic/components/dialog/dialog.tsx
index b7d17b9831f..b0099a512d0 100644
--- a/packages/ui/src/mosaic/components/dialog/dialog.tsx
+++ b/packages/ui/src/mosaic/components/dialog/dialog.tsx
@@ -185,11 +185,14 @@ function Root<Payload = unknown>({
 }
 
 /** Opens the dialog. Renders a `<button>`; `render` swaps in another element. */
-const Trigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(function DialogTrigger(props, ref) {
+const Trigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(function DialogTrigger(
+  { xstyle, ...rest },
+  ref,
+) {
   return (
     <Primitive.Trigger
       ref={ref}
-      {...props}
+      {...mergeStyleProps(stylex.props(xstyle), rest)}
     />
   );
 }) as <Payload = unknown>(
@@ -197,36 +200,37 @@ const Trigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(function
 ) => React.ReactElement;
 
 /** Dismisses the dialog. Renders a `<button>`; `render` swaps in another element. */
-const Close = React.forwardRef<HTMLButtonElement, DialogCloseProps>(function DialogClose(props, ref) {
+const Close = React.forwardRef<HTMLButtonElement, DialogCloseProps>(function DialogClose({ xstyle, ...rest }, ref) {
   return (
     <Primitive.Close
       ref={ref}
-      {...props}
+      {...mergeStyleProps(stylex.props(xstyle), rest)}
     />
   );
 });
 
 /** Names the dialog. Renders an `<h2>` wired to the popup's `aria-labelledby`. */
-const Title = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(function DialogTitle(props, ref) {
+const Title = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(function DialogTitle({ xstyle, ...rest }, ref) {
   return (
     <Primitive.Title
       ref={ref}
-      {...props}
+      {...mergeStyleProps(stylex.props(xstyle), rest)}
     />
   );
 });
 
 /** Describes the dialog. Renders a `<p>` wired to the popup's `aria-describedby`. */
-const Description = React.forwardRef<HTMLParagraphElement, DialogDescriptionProps>(
-  function DialogDescription(props, ref) {
-    return (
-      <Primitive.Description
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
+const Description = React.forwardRef<HTMLParagraphElement, DialogDescriptionProps>(function DialogDescription(
+  { xstyle, ...rest },
+  ref,
+) {
+  return (
+    <Primitive.Description
+      ref={ref}
+      {...mergeStyleProps(stylex.props(xstyle), rest)}
+    />
+  );
+});
 
 /**
  * Warns when the corner dismiss is rendered where it has no business being: inside an alert
@@ -256,7 +260,7 @@ function useCloseButtonWarning(isAlert: boolean, inline: boolean) {
  * choice away from the consumer.
  */
 const CloseButton = React.forwardRef<HTMLButtonElement, DialogCloseButtonProps>(function DialogCloseButton(
-  { 'aria-label': ariaLabel = 'Close', className, style, ...rest },
+  { 'aria-label': ariaLabel = 'Close', xstyle, ...rest },
   ref,
 ) {
   const surface = React.useContext(DialogContext);
@@ -280,8 +284,7 @@ const CloseButton = React.forwardRef<HTMLButtonElement, DialogCloseButtonProps>(
             {...props}
           />
         )}
-        {...mergeStyleProps(themeProps('dialog-close-button'), className, style)}
-        {...rest}
+        {...mergeStyleProps(themeProps('dialog-close-button'), stylex.props(xstyle), rest)}
       >
         <Icon name='close' />
       </Primitive.Close>
@@ -381,7 +384,7 @@ function useAlertSizeWarning(isAlert: boolean, size: DialogSize | undefined) {
  * part a consumer composes, so they stay out of the public API.
  */
 const Popup = React.forwardRef<HTMLDivElement, DialogPopupProps>(function DialogPopup(
-  { size: sizeProp, initialFocus, finalFocus, className, style, ...rest },
+  { size: sizeProp, initialFocus, finalFocus, xstyle, ...rest },
   ref,
 ) {
   const { inline } = React.useContext(DialogPresentationContext);
@@ -427,11 +430,9 @@ const Popup = React.forwardRef<HTMLDivElement, DialogPopupProps>(function Dialog
         finalFocus={inline ? (finalFocus ?? false) : finalFocus}
         {...mergeStyleProps(
           themeProps('dialog-popup', { size, inline }),
-          stylex.props(reset.base, styles.popup, sizes[size], popupMotion[size]),
-          className,
-          style,
+          stylex.props(reset.base, styles.popup, sizes[size], popupMotion[size], xstyle),
+          rest,
         )}
-        {...rest}
         // After the spread on purpose: `mergeProps` lets consumer props win, so a `role` passed
         // here would otherwise downgrade the alert back to a plain dialog.
         {...(isAlert ? { role: 'alertdialog' } : null)}
@@ -476,7 +477,7 @@ const Popup = React.forwardRef<HTMLDivElement, DialogPopupProps>(function Dialog
  * why that ordering is what focuses it on open.
  */
 const Actions = React.forwardRef<HTMLDivElement, DialogActionsProps>(function DialogActions(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -484,8 +485,7 @@ const Actions = React.forwardRef<HTMLDivElement, DialogActionsProps>(function Di
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('dialog-actions'), stylex.props(reset.base, styles.actions), className, style),
-      ...rest,
+      ...mergeStyleProps(themeProps('dialog-actions'), stylex.props(reset.base, styles.actions, xstyle), rest),
     },
   });
 });
diff --git a/packages/ui/src/mosaic/components/drawer/drawer.test.tsx b/packages/ui/src/mosaic/components/drawer/drawer.test.tsx
index b83bc6f7de0..7104e7f7648 100644
--- a/packages/ui/src/mosaic/components/drawer/drawer.test.tsx
+++ b/packages/ui/src/mosaic/components/drawer/drawer.test.tsx
@@ -1,3 +1,4 @@
+import * as stylex from '@stylexjs/stylex';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, expect, it } from 'vitest';
@@ -19,7 +20,29 @@ function Sheet({ defaultOpen = true }: { defaultOpen?: boolean }) {
   );
 }
 
+const callerStyles = stylex.create({
+  trigger: { marginBlockStart: 8 },
+  title: { textAlign: 'center' },
+});
+
 describe('Drawer', () => {
+  it('composes caller xstyle onto the passthrough parts', () => {
+    render(
+      <MosaicProvider>
+        <Drawer.Root defaultOpen>
+          <Drawer.Trigger xstyle={callerStyles.trigger}>Open</Drawer.Trigger>
+          <Drawer.Popup>
+            <Drawer.Title xstyle={callerStyles.title}>Filters</Drawer.Title>
+          </Drawer.Popup>
+        </Drawer.Root>
+      </MosaicProvider>,
+    );
+
+    // The open sheet hides the trigger from the accessibility tree, so query it by text.
+    expect(screen.getByText('Open')).toHaveClass(stylex.props(callerStyles.trigger).className ?? '');
+    expect(screen.getByText('Filters')).toHaveClass(stylex.props(callerStyles.title).className ?? '');
+  });
+
   it('renders a named, described sheet with a grip, over a scrim', () => {
     render(
       <MosaicProvider>
diff --git a/packages/ui/src/mosaic/components/drawer/drawer.tsx b/packages/ui/src/mosaic/components/drawer/drawer.tsx
index e6d892d9b84..67229a61c1f 100644
--- a/packages/ui/src/mosaic/components/drawer/drawer.tsx
+++ b/packages/ui/src/mosaic/components/drawer/drawer.tsx
@@ -3,17 +3,21 @@ import { Drawer as Primitive, registerDrawerCssVars } from '@clerk/headless/draw
 import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
-import type { MosaicComponentProps } from '../../props';
+import type { MosaicComponentProps, MosaicStyleProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { reset } from '../../utils/reset.styles';
 import { DialogContext, isOverlayDialog } from '../dialog';
 import { styles } from './drawer.styles';
 
 export type DrawerRootProps = HeadlessDrawerProps;
-export type DrawerTriggerProps = React.ComponentPropsWithoutRef<typeof Primitive.Trigger>;
-export type DrawerCloseProps = React.ComponentPropsWithoutRef<typeof Primitive.Close>;
-export type DrawerTitleProps = React.ComponentPropsWithoutRef<typeof Primitive.Title>;
-export type DrawerDescriptionProps = React.ComponentPropsWithoutRef<typeof Primitive.Description>;
+// The headless parts pass through, minus `className`/`style` and plus `xstyle`, like every Mosaic part.
+type Passthrough<Part extends React.ElementType> = Omit<React.ComponentPropsWithoutRef<Part>, 'className' | 'style'> &
+  MosaicStyleProps;
+
+export type DrawerTriggerProps = Passthrough<typeof Primitive.Trigger>;
+export type DrawerCloseProps = Passthrough<typeof Primitive.Close>;
+export type DrawerTitleProps = Passthrough<typeof Primitive.Title>;
+export type DrawerDescriptionProps = Passthrough<typeof Primitive.Description>;
 
 export interface DrawerPopupProps extends MosaicComponentProps<'div'> {
   /** Where focus returns when the sheet closes. Default: the trigger. */
@@ -38,7 +42,7 @@ function Root(props: DrawerRootProps) {
  * `card` dialog it takes the nested scrim, the way a prompt does there.
  */
 const Popup = React.forwardRef<HTMLDivElement, DrawerPopupProps>(function DrawerPopup(
-  { finalFocus, children, render, className, style, ...rest },
+  { finalFocus, children, render, xstyle, ...rest },
   ref,
 ) {
   const host = React.useContext(DialogContext);
@@ -58,8 +62,7 @@ const Popup = React.forwardRef<HTMLDivElement, DrawerPopupProps>(function Drawer
           ref={ref}
           render={render}
           finalFocus={finalFocus}
-          {...mergeStyleProps(themeProps('drawer-popup'), stylex.props(reset.base, styles.popup), className, style)}
-          {...rest}
+          {...mergeStyleProps(themeProps('drawer-popup'), stylex.props(reset.base, styles.popup, xstyle), rest)}
         >
           <Primitive.Handle {...mergeStyleProps(themeProps('drawer-handle'), stylex.props(reset.base, styles.handle))}>
             <span {...mergeStyleProps(themeProps('drawer-grip'), stylex.props(reset.base, styles.grip))} />
@@ -73,6 +76,48 @@ const Popup = React.forwardRef<HTMLDivElement, DrawerPopupProps>(function Drawer
   );
 });
 
+const Trigger = React.forwardRef<HTMLButtonElement, DrawerTriggerProps>(function DrawerTrigger(
+  { xstyle, ...rest },
+  ref,
+) {
+  return (
+    <Primitive.Trigger
+      ref={ref}
+      {...mergeStyleProps(stylex.props(xstyle), rest)}
+    />
+  );
+});
+
+const Close = React.forwardRef<HTMLButtonElement, DrawerCloseProps>(function DrawerClose({ xstyle, ...rest }, ref) {
+  return (
+    <Primitive.Close
+      ref={ref}
+      {...mergeStyleProps(stylex.props(xstyle), rest)}
+    />
+  );
+});
+
+const Title = React.forwardRef<HTMLHeadingElement, DrawerTitleProps>(function DrawerTitle({ xstyle, ...rest }, ref) {
+  return (
+    <Primitive.Title
+      ref={ref}
+      {...mergeStyleProps(stylex.props(xstyle), rest)}
+    />
+  );
+});
+
+const Description = React.forwardRef<HTMLParagraphElement, DrawerDescriptionProps>(function DrawerDescription(
+  { xstyle, ...rest },
+  ref,
+) {
+  return (
+    <Primitive.Description
+      ref={ref}
+      {...mergeStyleProps(stylex.props(xstyle), rest)}
+    />
+  );
+});
+
 /**
  * A bottom sheet: `Drawer.Root` holds the state, `Drawer.Trigger` opens it, and `Drawer.Popup`
  * renders the sheet with its scrim, portal and grip. `Drawer.Title` and `Drawer.Description` name
@@ -82,8 +127,8 @@ const Popup = React.forwardRef<HTMLDivElement, DrawerPopupProps>(function Drawer
 export const Drawer = {
   Root,
   Popup,
-  Trigger: Primitive.Trigger,
-  Title: Primitive.Title,
-  Description: Primitive.Description,
-  Close: Primitive.Close,
+  Trigger,
+  Title,
+  Description,
+  Close,
 };
diff --git a/packages/ui/src/mosaic/components/field/field.test.tsx b/packages/ui/src/mosaic/components/field/field.test.tsx
index f910bd4ecec..b7a3c26d484 100644
--- a/packages/ui/src/mosaic/components/field/field.test.tsx
+++ b/packages/ui/src/mosaic/components/field/field.test.tsx
@@ -1,3 +1,4 @@
+import * as stylex from '@stylexjs/stylex';
 import { act, render, screen } from '@testing-library/react';
 import React from 'react';
 import { hydrateRoot } from 'react-dom/client';
@@ -7,6 +8,16 @@ import { describe, expect, it, vi } from 'vitest';
 import { Input } from '../input';
 import { Field } from './field';
 
+const overrides = stylex.create({
+  root: { display: 'grid' },
+  label: { fontWeight: 700 },
+  description: { opacity: 0.8 },
+  error: { fontWeight: 600 },
+});
+
+const atoms = (style: stylex.StyleXStyles) =>
+  (stylex.props(style).className ?? '').split(' ').filter(name => /^x[a-z0-9]+$/.test(name));
+
 describe('Mosaic Field', () => {
   it('generates native label and message relationships', () => {
     render(
@@ -288,42 +299,32 @@ describe('Mosaic Field', () => {
     expect(errorRef.current).toHaveAttribute('role', 'status');
   });
 
-  it('lets caller styling win without prescribing layout', () => {
+  it('applies xstyle on every part without prescribing layout', () => {
     render(
       <Field.Root
-        className='root'
-        style={{ display: 'grid' }}
+        xstyle={overrides.root}
         data-testid='root'
       >
-        <Field.Label
-          className='label'
-          style={{ fontWeight: 700 }}
-        >
-          Email
-        </Field.Label>
-        <Field.Description
-          className='description'
-          style={{ opacity: 0.8 }}
-        >
-          Description
-        </Field.Description>
-        <Field.Error
-          className='error'
-          style={{ fontWeight: 600 }}
-        >
-          Error
-        </Field.Error>
+        <Field.Label xstyle={overrides.label}>Email</Field.Label>
+        <Field.Description xstyle={overrides.description}>Description</Field.Description>
+        <Field.Error xstyle={overrides.error}>Error</Field.Error>
+      </Field.Root>,
+    );
+
+    expect(screen.getByTestId('root')).toHaveClass('cl-field-root', ...atoms(overrides.root));
+    expect(screen.getByText('Email')).toHaveClass('cl-field-label', ...atoms(overrides.label));
+    expect(screen.getByText('Description')).toHaveClass('cl-field-description', ...atoms(overrides.description));
+    expect(screen.getByText('Error').closest('p')).toHaveClass('cl-field-error', ...atoms(overrides.error));
+  });
+
+  it('merges a render-sourced className instead of clobbering its own', () => {
+    render(
+      <Field.Root>
+        <Field.Description render={<Field.Error />}>Description</Field.Description>
       </Field.Root>,
     );
 
-    expect(screen.getByTestId('root')).toHaveClass('cl-field-root', 'root');
-    expect(screen.getByTestId('root')).toHaveStyle({ display: 'grid' });
-    expect(screen.getByText('Email')).toHaveClass('cl-field-label', 'label');
-    expect(screen.getByText('Email')).toHaveStyle({ fontWeight: 700 });
-    expect(screen.getByText('Description')).toHaveClass('cl-field-description', 'description');
-    expect(screen.getByText('Description')).toHaveStyle({ opacity: 0.8 });
-    expect(screen.getByText('Error').closest('p')).toHaveClass('cl-field-error', 'error');
-    expect(screen.getByText('Error').closest('p')).toHaveStyle({ fontWeight: 600 });
+    expect(screen.getByText('Description').closest('p')).toHaveClass('cl-field-description', 'cl-field-error');
   });
 
   it('hides the label visually while keeping it associated with the control', () => {
diff --git a/packages/ui/src/mosaic/components/field/field.tsx b/packages/ui/src/mosaic/components/field/field.tsx
index 7a870cf75c4..83d59ab7d2b 100644
--- a/packages/ui/src/mosaic/components/field/field.tsx
+++ b/packages/ui/src/mosaic/components/field/field.tsx
@@ -27,7 +27,7 @@ export interface FieldRootProps extends MosaicComponentProps<'div'> {
 }
 
 const Root = React.forwardRef<HTMLDivElement, FieldRootProps>(function MosaicFieldRoot(
-  { render, className, style, disabled = false, required = false, invalid = false, ...rest },
+  { render, xstyle, disabled = false, required = false, invalid = false, ...rest },
   ref,
 ) {
   const element = useRender({
@@ -35,8 +35,7 @@ const Root = React.forwardRef<HTMLDivElement, FieldRootProps>(function MosaicFie
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('field-root'), stylex.props(reset.base, styles.root), className, style),
-      ...rest,
+      ...mergeStyleProps(themeProps('field-root'), stylex.props(reset.base, styles.root, xstyle), rest),
     },
   });
 
@@ -58,7 +57,7 @@ export interface FieldLabelProps extends MosaicComponentProps<'label'> {
 }
 
 const Label = React.forwardRef<HTMLLabelElement, FieldLabelProps>(function MosaicFieldLabel(
-  { render, className, style, id: idProp, htmlFor: htmlForProp, visuallyHidden: isVisuallyHidden = false, ...rest },
+  { render, xstyle, id: idProp, htmlFor: htmlForProp, visuallyHidden: isVisuallyHidden = false, ...rest },
   ref,
 ) {
   const context = useOptionalFieldContext();
@@ -81,11 +80,10 @@ const Label = React.forwardRef<HTMLLabelElement, FieldLabelProps>(function Mosai
           typographySizes.sm,
           styles.label,
           isVisuallyHidden && visuallyHidden.base,
+          xstyle,
         ),
-        className,
-        style,
+        rest,
       ),
-      ...rest,
       id,
       htmlFor,
     },
@@ -96,7 +94,7 @@ const Label = React.forwardRef<HTMLLabelElement, FieldLabelProps>(function Mosai
 export type FieldDescriptionProps = MosaicComponentProps<'p'>;
 
 const Description = React.forwardRef<HTMLParagraphElement, FieldDescriptionProps>(function MosaicFieldDescription(
-  { render, className, style, id: idProp, ...rest },
+  { render, xstyle, id: idProp, ...rest },
   ref,
 ) {
   const context = useOptionalFieldContext();
@@ -110,11 +108,9 @@ const Description = React.forwardRef<HTMLParagraphElement, FieldDescriptionProps
     props: {
       ...mergeStyleProps(
         themeProps('field-description'),
-        stylex.props(reset.base, typographyStyles.base, typographySizes.xs, styles.message, styles.description),
-        className,
-        style,
+        stylex.props(reset.base, typographyStyles.base, typographySizes.xs, styles.message, styles.description, xstyle),
+        rest,
       ),
-      ...rest,
       id,
     },
   });
@@ -124,7 +120,7 @@ const Description = React.forwardRef<HTMLParagraphElement, FieldDescriptionProps
 export type FieldErrorProps = MosaicComponentProps<'p'>;
 
 const FieldError = React.forwardRef<HTMLParagraphElement, FieldErrorProps>(function MosaicFieldError(
-  { render, className, style, id: idProp, children, ...rest },
+  { render, xstyle, id: idProp, children, ...rest },
   ref,
 ) {
   const context = useOptionalFieldContext();
@@ -138,11 +134,9 @@ const FieldError = React.forwardRef<HTMLParagraphElement, FieldErrorProps>(funct
     props: {
       ...mergeStyleProps(
         themeProps('field-error'),
-        stylex.props(reset.base, typographyStyles.base, typographySizes.xs, styles.message, styles.error),
-        className,
-        style,
+        stylex.props(reset.base, typographyStyles.base, typographySizes.xs, styles.message, styles.error, xstyle),
+        rest,
       ),
-      ...rest,
       id,
       children: (
         <>
diff --git a/packages/ui/src/mosaic/components/flow/flow.tsx b/packages/ui/src/mosaic/components/flow/flow.tsx
index 78234056581..8430a8be3eb 100644
--- a/packages/ui/src/mosaic/components/flow/flow.tsx
+++ b/packages/ui/src/mosaic/components/flow/flow.tsx
@@ -23,13 +23,12 @@ export interface FlowStepProps extends Omit<MosaicComponentProps<'div'>, 'id'> {
 }
 
 function FlowRoot<State>(
-  { value, direction, state, render, className, style, children, ...rest }: FlowRootProps<State>,
+  { value, direction, state, render, xstyle, children, ...rest }: FlowRootProps<State>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ): JSX.Element {
   return (
     <HeadlessFlow.Root
-      {...mergeStyleProps(themeProps('flow-root', { value }), stylex.props(reset.base, styles.root), className, style)}
-      {...rest}
+      {...mergeStyleProps(themeProps('flow-root', { value }), stylex.props(reset.base, styles.root, xstyle), rest)}
       ref={ref}
       render={render}
       value={value}
@@ -47,18 +46,16 @@ type FlowRootComponent = <State>(
 const Root = React.forwardRef(FlowRoot) as FlowRootComponent;
 
 const Step = React.forwardRef<HTMLDivElement, FlowStepProps>(function FlowStep(
-  { ids, render, className, style, children, ...rest },
+  { ids, render, xstyle, children, ...rest },
   ref,
 ) {
   return (
     <HeadlessFlow.Step
       {...mergeStyleProps(
         themeProps('flow-step', { step: ids[0] }),
-        stylex.props(reset.base, styles.step),
-        className,
-        style,
+        stylex.props(reset.base, styles.step, xstyle),
+        rest,
       )}
-      {...rest}
       ref={ref}
       render={render}
       ids={ids}
diff --git a/packages/ui/src/mosaic/components/heading/heading.test.tsx b/packages/ui/src/mosaic/components/heading/heading.test.tsx
index 69eb58fdc97..00867d84652 100644
--- a/packages/ui/src/mosaic/components/heading/heading.test.tsx
+++ b/packages/ui/src/mosaic/components/heading/heading.test.tsx
@@ -1,9 +1,14 @@
+import * as stylex from '@stylexjs/stylex';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { Heading, HeadingContext } from './heading';
 
+const atoms = stylex.create({
+  spaced: { marginTop: '8px' },
+});
+
 describe('Mosaic Heading', () => {
   it('renders an h2 with its children', () => {
     render(<Heading>Title</Heading>);
@@ -18,13 +23,12 @@ describe('Mosaic Heading', () => {
     expect(heading).toHaveAttribute('data-color', 'primary');
   });
 
-  it('wires variant props and consumer className/style through to the element', () => {
+  it('wires variant props and xstyle atoms through to the element', () => {
     render(
       <Heading
         size='2xl'
         color='negative'
-        className='my-heading'
-        style={{ marginTop: '8px' }}
+        xstyle={atoms.spaced}
       >
         Title
       </Heading>,
@@ -32,8 +36,12 @@ describe('Mosaic Heading', () => {
     const heading = screen.getByRole('heading');
     expect(heading).toHaveAttribute('data-size', '2xl');
     expect(heading).toHaveAttribute('data-color', 'negative');
-    expect(heading).toHaveClass('cl-heading', 'my-heading');
-    expect(heading).toHaveStyle({ marginTop: '8px' });
+    expect(heading).toHaveClass('cl-heading', stylex.props(atoms.spaced).className ?? '');
+  });
+
+  it('merges a className carried by the render element instead of clobbering the slot class', () => {
+    render(<Heading render={<h3 className='from-source' />}>Title</Heading>);
+    expect(screen.getByRole('heading')).toHaveClass('cl-heading', 'from-source');
   });
 
   it('renders a different element through the render prop, keeping the slot props', () => {
diff --git a/packages/ui/src/mosaic/components/heading/heading.tsx b/packages/ui/src/mosaic/components/heading/heading.tsx
index 810cb58c7ca..7c2c4a0acd6 100644
--- a/packages/ui/src/mosaic/components/heading/heading.tsx
+++ b/packages/ui/src/mosaic/components/heading/heading.tsx
@@ -22,24 +22,13 @@ export const HeadingContext = React.createContext<Partial<HeadingProps> | null>(
  * `size` and `color` variants. Pass `render` for a different heading level.
  */
 export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(function MosaicHeading(rawProps, ref) {
-  const {
-    size = 'base',
-    color = 'primary',
-    render,
-    className,
-    style,
-    ...rest
-  } = useContextProps(rawProps, HeadingContext);
+  const { size = 'base', color = 'primary', render, xstyle, ...rest } = useContextProps(rawProps, HeadingContext);
 
-  const props = {
-    ...mergeStyleProps(
-      themeProps('heading', { size, color }),
-      stylex.props(reset.base, typographyStyles.base, headingStyles.base, sizes[size], colors[color]),
-      className,
-      style,
-    ),
-    ...rest,
-  };
+  const props = mergeStyleProps(
+    themeProps('heading', { size, color }),
+    stylex.props(reset.base, typographyStyles.base, headingStyles.base, sizes[size], colors[color], xstyle),
+    rest,
+  );
 
   // useRender only runs for `render` (function or element); Emotion processes `css`
   // inside the consumer's own JSX there. The no-render fallback must stay JSX —
diff --git a/packages/ui/src/mosaic/components/icon/icon-frame.test.tsx b/packages/ui/src/mosaic/components/icon/icon-frame.test.tsx
index 0735e3ab18d..74473dfbd0f 100644
--- a/packages/ui/src/mosaic/components/icon/icon-frame.test.tsx
+++ b/packages/ui/src/mosaic/components/icon/icon-frame.test.tsx
@@ -1,3 +1,4 @@
+import * as stylex from '@stylexjs/stylex';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
@@ -5,6 +6,10 @@ import { describe, expect, it } from 'vitest';
 import { Icon } from './icon';
 import { IconFrame } from './icon-frame';
 
+const atoms = stylex.create({
+  tinted: { backgroundColor: 'rgb(255, 0, 0)' },
+});
+
 describe('Mosaic IconFrame', () => {
   it('renders its children in a span by default', () => {
     render(<IconFrame>Framed</IconFrame>);
@@ -56,17 +61,25 @@ describe('Mosaic IconFrame', () => {
     expect(frame).toHaveAttribute('aria-label', 'Status icon');
   });
 
-  it('lets the consumer className and style win', () => {
+  it('merges xstyle atoms after the slot atoms', () => {
     render(
       <IconFrame
         data-testid='frame'
-        className='my-frame'
-        style={{ backgroundColor: 'rgb(255, 0, 0)' }}
+        xstyle={atoms.tinted}
       />,
     );
     const frame = screen.getByTestId('frame');
-    expect(frame).toHaveClass('cl-icon-frame', 'my-frame');
-    expect(frame).toHaveStyle({ backgroundColor: 'rgb(255, 0, 0)' });
+    expect(frame).toHaveClass('cl-icon-frame', stylex.props(atoms.tinted).className ?? '');
+  });
+
+  it('merges a className carried by the render element instead of clobbering the slot class', () => {
+    render(
+      <IconFrame
+        data-testid='frame'
+        render={<div className='from-source' />}
+      />,
+    );
+    expect(screen.getByTestId('frame')).toHaveClass('cl-icon-frame', 'from-source');
   });
 
   it('renders a custom element via render, keeping styles and props', () => {
diff --git a/packages/ui/src/mosaic/components/icon/icon-frame.tsx b/packages/ui/src/mosaic/components/icon/icon-frame.tsx
index 3181cf78a2e..9e4478e59f1 100644
--- a/packages/ui/src/mosaic/components/icon/icon-frame.tsx
+++ b/packages/ui/src/mosaic/components/icon/icon-frame.tsx
@@ -14,7 +14,7 @@ export interface IconFrameProps extends MosaicComponentProps<'span'> {
 }
 
 export const IconFrame = React.forwardRef<HTMLSpanElement, IconFrameProps>(function MosaicIconFrame(
-  { bordered = true, filled = false, size = 'xl', render, className, style, ...rest },
+  { bordered = true, filled = false, size = 'xl', render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -24,11 +24,16 @@ export const IconFrame = React.forwardRef<HTMLSpanElement, IconFrameProps>(funct
     props: {
       ...mergeStyleProps(
         themeProps('icon-frame', { bordered, filled, size }),
-        stylex.props(reset.base, styles.base, sizes[size], bordered && styles.bordered, filled && styles.filled),
-        className,
-        style,
+        stylex.props(
+          reset.base,
+          styles.base,
+          sizes[size],
+          bordered && styles.bordered,
+          filled && styles.filled,
+          xstyle,
+        ),
+        rest,
       ),
-      ...rest,
     },
   });
 });
diff --git a/packages/ui/src/mosaic/components/icon/icon.test.tsx b/packages/ui/src/mosaic/components/icon/icon.test.tsx
index ddd356d9c5a..74b41b3e026 100644
--- a/packages/ui/src/mosaic/components/icon/icon.test.tsx
+++ b/packages/ui/src/mosaic/components/icon/icon.test.tsx
@@ -53,19 +53,17 @@ describe('Mosaic Icon', () => {
     expect(container.querySelector('svg')).toHaveAttribute('data-size', 'md');
   });
 
-  it('wires the size variant and consumer className/style through to the element', () => {
+  it('wires the size variant and xstyle atoms through to the element', () => {
     const { container } = wrap(
       <Icon
         name='chevron-right'
         size='lg'
-        className='my-icon'
-        style={{ marginTop: '8px' }}
+        xstyle={containerStyles.lineBox}
       />,
     );
     const svg = container.querySelector('svg');
     expect(svg).toHaveAttribute('data-size', 'lg');
-    expect(svg).toHaveClass('cl-icon', 'my-icon');
-    expect(svg).toHaveStyle({ marginTop: '8px' });
+    expect(svg).toHaveClass('cl-icon', stylex.props(containerStyles.lineBox).className ?? '');
   });
 
   it('lets a container xstyle override the size atoms instead of stacking a second class', () => {
@@ -141,7 +139,7 @@ describe('Mosaic Icon', () => {
     const { getByTestId } = wrap(
       <Icon
         name='chevron-right'
-        className='call-site'
+        xstyle={containerStyles.lineBox}
       />,
       {
         'chevron-right': (
@@ -152,7 +150,11 @@ describe('Mosaic Icon', () => {
         ),
       },
     );
-    expect(getByTestId('override')).toHaveClass('cl-icon', 'call-site', 'consumer-glyph');
+    expect(getByTestId('override')).toHaveClass(
+      'cl-icon',
+      stylex.props(containerStyles.lineBox).className ?? '',
+      'consumer-glyph',
+    );
   });
 
   it('forwards svg props from the Icon call site onto the override element', () => {
diff --git a/packages/ui/src/mosaic/components/icon/icon.tsx b/packages/ui/src/mosaic/components/icon/icon.tsx
index f774d8a1c31..25497e616ac 100644
--- a/packages/ui/src/mosaic/components/icon/icon.tsx
+++ b/packages/ui/src/mosaic/components/icon/icon.tsx
@@ -4,17 +4,16 @@ import React from 'react';
 import { useMosaicIcons } from '../../icons/overrides';
 import type { IconName } from '../../icons/registry';
 import { iconRegistry } from '../../icons/registry';
+import type { MosaicElementProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { reset } from '../../utils/reset.styles';
 import { iconScope } from './icon.markers.stylex';
 import { sizes, styles } from './icon.styles';
 
-export interface IconProps extends React.ComponentPropsWithRef<'svg'> {
+export interface IconProps extends MosaicElementProps<'svg'> {
   name: IconName;
   size?: 'sm' | 'md' | 'lg' | 'inherit';
   placement?: 'inline-start' | 'inline-end';
-  /** StyleX atoms from the container; merged last so they win over the icon's own size atoms. */
-  xstyle?: stylex.StyleXStyles;
 }
 
 /**
@@ -28,7 +27,7 @@ export interface IconProps extends React.ComponentPropsWithRef<'svg'> {
  * follow the writing mode rather than naming a physical edge.
  */
 export const Icon = React.forwardRef<SVGSVGElement, IconProps>(function MosaicIcon(
-  { name, size = 'md', placement, xstyle, className, style, ...rest },
+  { name, size = 'md', placement, xstyle, ...rest },
   ref,
 ) {
   const override = useMosaicIcons()[name];
@@ -37,8 +36,7 @@ export const Icon = React.forwardRef<SVGSVGElement, IconProps>(function MosaicIc
   const props = mergeStyleProps(
     themeProps('icon', { size, icon: placement }),
     stylex.props(reset.base, styles.base, sizes[size], iconScope, xstyle),
-    className,
-    style,
+    rest,
   );
 
   if (override) {
@@ -48,7 +46,7 @@ export const Icon = React.forwardRef<SVGSVGElement, IconProps>(function MosaicIc
     // SAFETY: React 18 types `ReactElement.props` as `any`; we only read an optional className.
     // cloneElement re-validates the merged props against the element's real type at render.
     const overrideClassName = (override.props as { className?: string }).className;
-    return React.cloneElement(override, { ...rest, ...mergeStyleProps(props, overrideClassName) });
+    return React.cloneElement(override, mergeStyleProps(props, { className: overrideClassName }));
   }
 
   const Glyph = iconRegistry[name];
@@ -56,7 +54,6 @@ export const Icon = React.forwardRef<SVGSVGElement, IconProps>(function MosaicIc
     <Glyph
       ref={ref}
       {...props}
-      {...rest}
     />
   );
 });
diff --git a/packages/ui/src/mosaic/components/input-group/input-group.tsx b/packages/ui/src/mosaic/components/input-group/input-group.tsx
index 44cf873cb50..8ff0d4abbc4 100644
--- a/packages/ui/src/mosaic/components/input-group/input-group.tsx
+++ b/packages/ui/src/mosaic/components/input-group/input-group.tsx
@@ -22,7 +22,7 @@ export interface InputGroupRootProps extends MosaicComponentProps<'div'> {
 }
 
 const Root = React.forwardRef<HTMLDivElement, InputGroupRootProps>(function MosaicInputGroupRoot(
-  { render, className, style, onClick, disabled: disabledProp, invalid: invalidProp, size = 'md', ...otherProps },
+  { render, xstyle, onClick, disabled: disabledProp, invalid: invalidProp, size = 'md', ...otherProps },
   ref,
 ) {
   const field = useOptionalFieldContext();
@@ -44,11 +44,9 @@ const Root = React.forwardRef<HTMLDivElement, InputGroupRootProps>(function Mosa
     props: {
       ...mergeStyleProps(
         themeProps('input-group', { size, disabled, invalid }),
-        stylex.props(reset.base, inputStyles.group, styles.root, sizes[size], disabled && inputStyles.disabled),
-        className,
-        style,
+        stylex.props(reset.base, inputStyles.group, styles.root, sizes[size], disabled && inputStyles.disabled, xstyle),
+        otherProps,
       ),
-      ...otherProps,
       onClick: (event: React.MouseEvent<HTMLDivElement>) => {
         onClick?.(event);
         if (event.defaultPrevented || disabled || !(event.target instanceof Element)) {
@@ -77,7 +75,7 @@ const addonButtonSizes = { sm: 'xs', md: 'sm', lg: 'md' } as const;
 
 function useAddon(
   side: 'start' | 'end',
-  { render, className, style, ...props }: InputGroupAddonProps,
+  { render, xstyle, ...props }: InputGroupAddonProps,
   ref: React.ForwardedRef<HTMLSpanElement>,
 ) {
   const group = useInputGroupContext();
@@ -105,11 +103,9 @@ function useAddon(
           size: group.size,
           disabled: group.disabled,
         }),
-        stylex.props(reset.base, styles.addon, textSizes[group.size], styles[side]),
-        className,
-        style,
+        stylex.props(reset.base, styles.addon, textSizes[group.size], styles[side], xstyle),
+        props,
       ),
-      ...props,
     },
   });
   return <ButtonContext.Provider value={defaults}>{element}</ButtonContext.Provider>;
diff --git a/packages/ui/src/mosaic/components/input/input.test.tsx b/packages/ui/src/mosaic/components/input/input.test.tsx
index 7cc1a522ecb..05d7c7cd6b6 100644
--- a/packages/ui/src/mosaic/components/input/input.test.tsx
+++ b/packages/ui/src/mosaic/components/input/input.test.tsx
@@ -1,9 +1,14 @@
+import * as stylex from '@stylexjs/stylex';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { Input } from './input';
 
+const atoms = stylex.create({
+  spaced: { marginTop: '8px' },
+});
+
 describe('Mosaic Input', () => {
   it('applies the default size', () => {
     render(<Input aria-label='Name' />);
@@ -67,17 +72,25 @@ describe('Mosaic Input', () => {
     expect(screen.getByRole('textbox', { name: 'Browser invalid' })).not.toHaveAttribute('aria-invalid');
   });
 
-  it('merges consumer className and inline styles', () => {
+  it('merges xstyle atoms after the slot atoms', () => {
     render(
       <Input
-        className='my-input'
-        style={{ marginTop: '8px' }}
+        xstyle={atoms.spaced}
         aria-label='Name'
       />,
     );
     const input = screen.getByRole('textbox', { name: 'Name' });
-    expect(input).toHaveClass('cl-input', 'my-input');
-    expect(input).toHaveStyle({ marginTop: '8px' });
+    expect(input).toHaveClass('cl-input', stylex.props(atoms.spaced).className ?? '');
+  });
+
+  it('merges a className carried by the render element instead of clobbering the slot class', () => {
+    render(
+      <Input
+        aria-label='Name'
+        render={<input className='from-source' />}
+      />,
+    );
+    expect(screen.getByRole('textbox', { name: 'Name' })).toHaveClass('cl-input', 'from-source');
   });
 
   it('forwards native props and the ref', () => {
diff --git a/packages/ui/src/mosaic/components/input/input.tsx b/packages/ui/src/mosaic/components/input/input.tsx
index 8743ebc0047..4aac8dcda8a 100644
--- a/packages/ui/src/mosaic/components/input/input.tsx
+++ b/packages/ui/src/mosaic/components/input/input.tsx
@@ -26,8 +26,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(function Mos
     disabled: disabledProp,
     required: requiredProp,
     render,
-    className,
-    style,
+    xstyle,
     id,
     'aria-invalid': ariaInvalid,
     'aria-labelledby': ariaLabelledBy,
@@ -71,11 +70,10 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(function Mos
           variant === 'default' && inputStyles.base,
           variant === 'ghost' && styles.ghost,
           variant === 'default' && disabled && inputStyles.disabled,
+          xstyle,
         ),
-        className,
-        style,
+        rest,
       ),
-      ...rest,
     },
   });
 });
diff --git a/packages/ui/src/mosaic/components/item/item.test.tsx b/packages/ui/src/mosaic/components/item/item.test.tsx
index f6ce8a3ac86..25cf0034ecb 100644
--- a/packages/ui/src/mosaic/components/item/item.test.tsx
+++ b/packages/ui/src/mosaic/components/item/item.test.tsx
@@ -1,9 +1,17 @@
+import * as stylex from '@stylexjs/stylex';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { Item } from './item';
 
+const overrides = stylex.create({
+  root: { marginTop: '8px' },
+});
+
+const atoms = (style: stylex.StyleXStyles) =>
+  (stylex.props(style).className ?? '').split(' ').filter(name => /^x[a-z0-9]+$/.test(name));
+
 describe('Mosaic Item', () => {
   it('renders a div with its children', () => {
     render(<Item.Root>Hi</Item.Root>);
@@ -70,18 +78,14 @@ describe('Mosaic Item', () => {
     expect(inherited('Interactive')).toHaveLength(inherited('Default').length + 1);
   });
 
-  it('wires consumer className/style through to the element', () => {
-    render(
-      <Item.Root
-        className='my-item'
-        style={{ marginTop: '8px' }}
-      >
-        Hi
-      </Item.Root>,
-    );
-    const item = screen.getByText('Hi');
-    expect(item).toHaveClass('cl-item', 'my-item');
-    expect(item).toHaveStyle({ marginTop: '8px' });
+  it('applies xstyle to the root element', () => {
+    render(<Item.Root xstyle={overrides.root}>Hi</Item.Root>);
+    expect(screen.getByText('Hi')).toHaveClass('cl-item', ...atoms(overrides.root));
+  });
+
+  it('merges a render-sourced className instead of clobbering its own', () => {
+    render(<Item.Content render={<Item.Actions />}>Hi</Item.Content>);
+    expect(screen.getByText('Hi')).toHaveClass('cl-item-content', 'cl-item-actions');
   });
 
   it('renders a custom element via render and marks it interactive', () => {
diff --git a/packages/ui/src/mosaic/components/item/item.tsx b/packages/ui/src/mosaic/components/item/item.tsx
index 5a6076e98cd..d3a22459f2a 100644
--- a/packages/ui/src/mosaic/components/item/item.tsx
+++ b/packages/ui/src/mosaic/components/item/item.tsx
@@ -57,7 +57,7 @@ export type ItemProps = MosaicComponentProps<'div'> & {
  * </Item.Root>
  */
 const Root = React.forwardRef<HTMLDivElement, ItemProps>(function MosaicItem(
-  { size = DEFAULT_SIZE, variant: variantProp, render, className, style, ...rest },
+  { size = DEFAULT_SIZE, variant: variantProp, render, xstyle, ...rest },
   ref,
 ) {
   // A custom render (link/button row) opts into hover + cursor affordances.
@@ -80,11 +80,10 @@ const Root = React.forwardRef<HTMLDivElement, ItemProps>(function MosaicItem(
           slots.item[size],
           variant === 'outline' && slots.item.outline,
           interactive && slots.item.interactive,
+          xstyle,
         ),
-        className,
-        style,
+        rest,
       ),
-      ...rest,
     },
   });
 
@@ -97,7 +96,7 @@ const Root = React.forwardRef<HTMLDivElement, ItemProps>(function MosaicItem(
  * default when rendered on its own.
  */
 const Media = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(function MosaicItemMedia(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   const size = React.useContext(ItemContext);
@@ -108,18 +107,16 @@ const Media = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(func
     props: {
       ...mergeStyleProps(
         themeProps('item-media', { size }),
-        stylex.props(reset.base, slots.media.base, slots.media[size]),
-        className,
-        style,
+        stylex.props(reset.base, slots.media.base, slots.media[size], xstyle),
+        rest,
       ),
-      ...rest,
     },
   });
 });
 
 /** Vertical stack (label + description) that grows to fill the row between media and actions. */
 const Content = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(function MosaicItemContent(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -127,8 +124,7 @@ const Content = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(fu
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('item-content'), stylex.props(reset.base, slots.content.base), className, style),
-      ...rest,
+      ...mergeStyleProps(themeProps('item-content'), stylex.props(reset.base, slots.content.base, xstyle), rest),
     },
   });
 });
@@ -153,7 +149,7 @@ export type ItemLabelProps = MosaicComponentProps<'div'> & {
 
 /** The row's label. Truncates to a single line. */
 const Label = React.forwardRef<HTMLDivElement, ItemLabelProps>(function MosaicItemLabel(
-  { variant = DEFAULT_LABEL_VARIANT, render, className, style, ...rest },
+  { variant = DEFAULT_LABEL_VARIANT, render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -163,18 +159,16 @@ const Label = React.forwardRef<HTMLDivElement, ItemLabelProps>(function MosaicIt
     props: {
       ...mergeStyleProps(
         themeProps('item-label', { variant }),
-        stylex.props(reset.base, slots.label.base, slots.label[variant], truncationStyles.singleLine),
-        className,
-        style,
+        stylex.props(reset.base, slots.label.base, slots.label[variant], truncationStyles.singleLine, xstyle),
+        rest,
       ),
-      ...rest,
     },
   });
 });
 
 /** Secondary text beneath the label. Truncates to a single line. */
 const Description = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(function MosaicItemDescription(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -184,18 +178,16 @@ const Description = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>
     props: {
       ...mergeStyleProps(
         themeProps('item-description'),
-        stylex.props(reset.base, slots.description.base, truncationStyles.singleLine),
-        className,
-        style,
+        stylex.props(reset.base, slots.description.base, truncationStyles.singleLine, xstyle),
+        rest,
       ),
-      ...rest,
     },
   });
 });
 
 /** Trailing controls (buttons, badges). */
 const Actions = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(function MosaicItemActions(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -203,8 +195,7 @@ const Actions = React.forwardRef<HTMLDivElement, MosaicComponentProps<'div'>>(fu
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('item-actions'), stylex.props(reset.base, slots.actions.base), className, style),
-      ...rest,
+      ...mergeStyleProps(themeProps('item-actions'), stylex.props(reset.base, slots.actions.base, xstyle), rest),
     },
   });
 });
@@ -227,7 +218,7 @@ export type ItemGroupProps = MosaicComponentProps<'div'> & {
  * semantics. Provides its `variant` to the rows nested within it.
  */
 const Group = React.forwardRef<HTMLDivElement, ItemGroupProps>(function MosaicItemGroup(
-  { variant = DEFAULT_VARIANT, render, className, style, ...rest },
+  { variant = DEFAULT_VARIANT, render, xstyle, ...rest },
   ref,
 ) {
   const element = useRender({
@@ -237,11 +228,9 @@ const Group = React.forwardRef<HTMLDivElement, ItemGroupProps>(function MosaicIt
     props: {
       ...mergeStyleProps(
         themeProps('item-group', { variant }),
-        stylex.props(reset.base, slots.group.base, slots.group[variant]),
-        className,
-        style,
+        stylex.props(reset.base, slots.group.base, slots.group[variant], xstyle),
+        rest,
       ),
-      ...rest,
     },
   });
 
@@ -250,7 +239,7 @@ const Group = React.forwardRef<HTMLDivElement, ItemGroupProps>(function MosaicIt
 
 /** Thin divider (`<hr>`) between rows or groups. */
 const Separator = React.forwardRef<HTMLHRElement, MosaicComponentProps<'hr'>>(function MosaicItemSeparator(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -258,13 +247,7 @@ const Separator = React.forwardRef<HTMLHRElement, MosaicComponentProps<'hr'>>(fu
     render,
     ref,
     props: {
-      ...mergeStyleProps(
-        themeProps('item-separator'),
-        stylex.props(reset.base, slots.separator.base),
-        className,
-        style,
-      ),
-      ...rest,
+      ...mergeStyleProps(themeProps('item-separator'), stylex.props(reset.base, slots.separator.base, xstyle), rest),
     },
   });
 });
diff --git a/packages/ui/src/mosaic/components/menu/menu.test.tsx b/packages/ui/src/mosaic/components/menu/menu.test.tsx
index 6b6e62137d4..eb0060c0c2a 100644
--- a/packages/ui/src/mosaic/components/menu/menu.test.tsx
+++ b/packages/ui/src/mosaic/components/menu/menu.test.tsx
@@ -181,18 +181,16 @@ describe('Mosaic Menu', () => {
     expect(screen.getByTestId('delete-icon').closest('.cl-menu-item')).toBeInTheDocument();
   });
 
-  it('merges consumer className and style onto the popup and items', async () => {
+  it('composes consumer xstyle onto the popup and items', async () => {
+    const caller = stylex.create({ popup: { marginTop: '8px' }, item: { paddingInline: 0 } });
     const user = userEvent.setup();
     render(
       <Menu.Root>
         <Menu.Trigger />
-        <Menu.Popup
-          className='my-popup'
-          style={{ marginTop: '8px' }}
-        >
+        <Menu.Popup xstyle={caller.popup}>
           <Menu.Item
             label='Sign out'
-            className='my-item'
+            xstyle={caller.item}
           >
             <Menu.Label>Sign out</Menu.Label>
           </Menu.Item>
@@ -202,10 +200,32 @@ describe('Mosaic Menu', () => {
 
     await user.click(screen.getByRole('button'));
 
-    const popup = screen.getByRole('menu').querySelector('.cl-menu-popup');
-    expect(popup).toHaveClass('cl-menu-popup', 'my-popup');
-    expect(popup).toHaveStyle({ marginTop: '8px' });
-    expect(screen.getByRole('menuitem', { name: 'Sign out' })).toHaveClass('cl-menu-item', 'my-item');
+    expect(screen.getByRole('menu').querySelector('.cl-menu-popup')).toHaveClass(
+      'cl-menu-popup',
+      stylex.props(caller.popup).className ?? '',
+    );
+    expect(screen.getByRole('menuitem', { name: 'Sign out' })).toHaveClass(
+      'cl-menu-item',
+      stylex.props(caller.item).className ?? '',
+    );
+  });
+
+  it('merges the className a render source hands an item', () => {
+    render(
+      <Menu.Root defaultOpen>
+        <Menu.Trigger />
+        <Menu.Popup>
+          <Menu.Item
+            label='Sign out'
+            render={<div className='from-render' />}
+          >
+            <Menu.Label>Sign out</Menu.Label>
+          </Menu.Item>
+        </Menu.Popup>
+      </Menu.Root>,
+    );
+
+    expect(screen.getByRole('menuitem', { name: 'Sign out' })).toHaveClass('cl-menu-item', 'from-render');
   });
 
   it('renders the media slot as a span, so it is valid inside the item button', () => {
diff --git a/packages/ui/src/mosaic/components/menu/menu.tsx b/packages/ui/src/mosaic/components/menu/menu.tsx
index b54b5af77d0..95dd54ec77d 100644
--- a/packages/ui/src/mosaic/components/menu/menu.tsx
+++ b/packages/ui/src/mosaic/components/menu/menu.tsx
@@ -3,14 +3,14 @@ import type {
   MenuPopupProps as PrimitiveMenuPopupProps,
   MenuPortalProps,
   MenuProps,
-  MenuSeparatorProps,
+  MenuSeparatorProps as PrimitiveMenuSeparatorProps,
 } from '@clerk/headless/menu';
 import { Menu as Primitive } from '@clerk/headless/menu';
 import { useRender } from '@clerk/headless/utils';
 import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
-import type { MosaicComponentProps } from '../../props';
+import type { MosaicComponentProps, MosaicStyleProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { focusOutline } from '../../utils/focus-outline.styles';
 import { reset } from '../../utils/reset.styles';
@@ -20,7 +20,7 @@ import { Icon } from '../icon';
 import { scrollAreaRoot, scrollAreaViewport } from '../scroll-area';
 import * as slots from './menu.styles';
 
-export type { MenuProps, MenuSeparatorProps };
+export type { MenuProps };
 
 export type MenuTriggerProps = MosaicComponentProps<'button'>;
 
@@ -29,7 +29,7 @@ export type MenuTriggerProps = MosaicComponentProps<'button'>;
  * pass `children` for a labelled trigger, or `render` to supply your own element.
  */
 export const MenuTrigger = React.forwardRef<HTMLButtonElement, MenuTriggerProps>(function MosaicMenuTrigger(
-  { render, className, style, children, ...rest },
+  { render, xstyle, children, ...rest },
   ref,
 ) {
   const trigger: MenuTriggerProps['render'] =
@@ -47,15 +47,14 @@ export const MenuTrigger = React.forwardRef<HTMLButtonElement, MenuTriggerProps>
     <Primitive.Trigger
       ref={ref}
       render={trigger}
-      {...mergeStyleProps(themeProps('menu-trigger'), className, style)}
-      {...rest}
+      {...mergeStyleProps(themeProps('menu-trigger'), stylex.props(xstyle), rest)}
     >
       {children ?? <Icon name='ellipsis' />}
     </Primitive.Trigger>
   );
 });
 
-export interface MenuPopupProps extends PrimitiveMenuPopupProps {
+export interface MenuPopupProps extends Omit<PrimitiveMenuPopupProps, 'className' | 'style'>, MosaicStyleProps {
   /** Container the menu portals into. Defaults to `document.body`. */
   portalRoot?: MenuPortalProps['root'];
 }
@@ -65,7 +64,7 @@ export interface MenuPopupProps extends PrimitiveMenuPopupProps {
  * positioner are not parts a consumer composes, so they stay out of the public API.
  */
 export const MenuPopup = React.forwardRef<HTMLDivElement, MenuPopupProps>(function MosaicMenuPopup(
-  { portalRoot, className, style, children, ...rest },
+  { portalRoot, xstyle, children, ...rest },
   ref,
 ) {
   return (
@@ -77,11 +76,9 @@ export const MenuPopup = React.forwardRef<HTMLDivElement, MenuPopupProps>(functi
           ref={ref}
           {...mergeStyleProps(
             themeProps('menu-popup'),
-            stylex.props(reset.base, scrollAreaRoot, slots.popup.base),
-            className,
-            style,
+            stylex.props(reset.base, scrollAreaRoot, slots.popup.base, xstyle),
+            rest,
           )}
-          {...rest}
         >
           <div
             {...mergeStyleProps(
@@ -117,7 +114,7 @@ export type MenuMediaProps = MosaicComponentProps<'span'> & {
  * text starts on the same line whatever each one leads with.
  */
 export const MenuMedia = React.forwardRef<HTMLSpanElement, MenuMediaProps>(function MosaicMenuMedia(
-  { size = 'sm', render, className, style, ...rest },
+  { size = 'sm', render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -127,11 +124,9 @@ export const MenuMedia = React.forwardRef<HTMLSpanElement, MenuMediaProps>(funct
     props: {
       ...mergeStyleProps(
         themeProps('menu-media', { size }),
-        stylex.props(reset.base, slots.media.base, slots.media[size]),
-        className,
-        style,
+        stylex.props(reset.base, slots.media.base, slots.media[size], xstyle),
+        rest,
       ),
-      ...rest,
     },
   });
 });
@@ -145,7 +140,7 @@ export type MenuLabelProps = MosaicComponentProps<'span'>;
  * built from the parts has to write it.
  */
 export const MenuLabel = React.forwardRef<HTMLSpanElement, MenuLabelProps>(function MosaicMenuLabel(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -155,16 +150,14 @@ export const MenuLabel = React.forwardRef<HTMLSpanElement, MenuLabelProps>(funct
     props: {
       ...mergeStyleProps(
         themeProps('menu-label'),
-        stylex.props(reset.base, slots.label.base, truncationStyles.singleLine),
-        className,
-        style,
+        stylex.props(reset.base, slots.label.base, truncationStyles.singleLine, xstyle),
+        rest,
       ),
-      ...rest,
     },
   });
 });
 
-export interface MenuItemProps extends PrimitiveMenuItemProps {
+export interface MenuItemProps extends Omit<PrimitiveMenuItemProps, 'className' | 'style'>, MosaicStyleProps {
   /** Semantic color of the action. */
   color?: 'neutral' | 'negative';
   /**
@@ -180,7 +173,7 @@ export interface MenuItemProps extends PrimitiveMenuItemProps {
  * shows is whatever `Menu.Media` and `Menu.Label` are composed into it.
  */
 export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(function MosaicMenuItem(
-  { color = 'neutral', label, className, style, children, ...rest },
+  { color = 'neutral', label, xstyle, children, ...rest },
   ref,
 ) {
   return (
@@ -189,28 +182,28 @@ export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(funct
       label={label}
       {...mergeStyleProps(
         themeProps('menu-item', { color }),
-        stylex.props(reset.base, focusOutline.visible, slots.item.base, color === 'negative' && slots.item.negative),
-        className,
-        style,
+        stylex.props(
+          reset.base,
+          focusOutline.visible,
+          slots.item.base,
+          color === 'negative' && slots.item.negative,
+          xstyle,
+        ),
+        rest,
       )}
-      {...rest}
     >
       {children}
     </Primitive.Item>
   );
 });
 
+export type MenuSeparatorProps = Omit<PrimitiveMenuSeparatorProps, 'className' | 'style'> & MosaicStyleProps;
+
 /** A full-bleed divider between groups of items. */
-export function MenuSeparator({ className, style, ...rest }: MenuSeparatorProps): React.ReactElement {
+export function MenuSeparator({ xstyle, ...rest }: MenuSeparatorProps): React.ReactElement {
   return (
     <Primitive.Separator
-      {...mergeStyleProps(
-        themeProps('menu-separator'),
-        stylex.props(reset.base, slots.separator.base),
-        className,
-        style,
-      )}
-      {...rest}
+      {...mergeStyleProps(themeProps('menu-separator'), stylex.props(reset.base, slots.separator.base, xstyle), rest)}
     />
   );
 }
diff --git a/packages/ui/src/mosaic/components/phone-input/phone-input.styles.ts b/packages/ui/src/mosaic/components/phone-input/phone-input.styles.ts
index d1978669800..a8644fe3623 100644
--- a/packages/ui/src/mosaic/components/phone-input/phone-input.styles.ts
+++ b/packages/ui/src/mosaic/components/phone-input/phone-input.styles.ts
@@ -29,7 +29,10 @@ export const styles = stylex.create({
   },
   prefix: {
     gap: space['2'],
+    color: colorVars['--cl-color-primary'],
     fontVariantNumeric: 'tabular-nums',
+    paddingInlineEnd: 0,
+    paddingInlineStart: space['2'],
   },
   control: {
     fontVariantNumeric: 'tabular-nums',
diff --git a/packages/ui/src/mosaic/components/phone-input/phone-input.tsx b/packages/ui/src/mosaic/components/phone-input/phone-input.tsx
index 3071c5a0b01..62168a3f13c 100644
--- a/packages/ui/src/mosaic/components/phone-input/phone-input.tsx
+++ b/packages/ui/src/mosaic/components/phone-input/phone-input.tsx
@@ -14,7 +14,6 @@ import {
 } from '../../../utils/phoneUtils';
 import type { MosaicElementProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
-import { colorVars, space } from '../../tokens.stylex';
 import { reset } from '../../utils/reset.styles';
 import { Button } from '../button';
 import { Combobox } from '../combobox';
@@ -52,7 +51,7 @@ function toE164(country: CountryEntry, nationalNumber: string): string {
 
 export interface PhoneInputProps extends Omit<
   MosaicElementProps<'input'>,
-  'className' | 'style' | 'type' | 'size' | 'value' | 'defaultValue' | 'onChange'
+  'type' | 'size' | 'value' | 'defaultValue' | 'onChange'
 > {
   /** The normalized E.164 value. */
   value?: string;
@@ -94,8 +93,7 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
     inputMode = 'tel',
     maxLength = 25,
     spellCheck = false,
-    className,
-    style,
+    xstyle,
     'aria-invalid': ariaInvalidProp,
     'aria-labelledby': ariaLabelledBy,
     'aria-describedby': ariaDescribedBy,
@@ -188,7 +186,8 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
         size={size}
         disabled={disabled}
         invalid={invalid}
-        {...mergeStyleProps(themeProps('phone-input', { size, disabled, invalid }), className, style)}
+        {...themeProps('phone-input', { size, disabled, invalid })}
+        xstyle={xstyle}
       >
         <Popover.Root
           open={open}
@@ -232,7 +231,8 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
             anchor={anchor}
             aria-label='Choose a country'
             size='anchor'
-            {...mergeStyleProps(themeProps('phone-input-popup'), stylex.props(reset.base, styles.popup))}
+            {...themeProps('phone-input-popup')}
+            xstyle={[reset.base, styles.popup]}
           >
             <Combobox.Root
               open
@@ -297,8 +297,8 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
 
         <InputGroup.Start
           aria-hidden='true'
-          {...mergeStyleProps(themeProps('phone-input-prefix'), stylex.props(styles.prefix))}
-          style={{ color: colorVars['--cl-color-primary'], paddingInlineStart: space['2'], paddingInlineEnd: 0 }}
+          {...themeProps('phone-input-prefix')}
+          xstyle={styles.prefix}
         >
           <span
             aria-hidden='true'
@@ -308,7 +308,8 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
         </InputGroup.Start>
         <InputGroup.Input
           ref={mergedInputRef}
-          {...mergeStyleProps(themeProps('phone-input-control'), stylex.props(styles.control))}
+          {...themeProps('phone-input-control')}
+          xstyle={styles.control}
           {...inputProps}
           id={id}
           type='tel'
diff --git a/packages/ui/src/mosaic/components/popover/popover.test.tsx b/packages/ui/src/mosaic/components/popover/popover.test.tsx
index 3933ca72ed9..e048c10988c 100644
--- a/packages/ui/src/mosaic/components/popover/popover.test.tsx
+++ b/packages/ui/src/mosaic/components/popover/popover.test.tsx
@@ -1,3 +1,4 @@
+import * as stylex from '@stylexjs/stylex';
 import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
@@ -90,17 +91,30 @@ describe('Mosaic Popover', () => {
     expect(document.querySelector('.cl-popover-popup')).toBeInTheDocument();
   });
 
-  it('keeps a consumer className on the trigger alongside the slot class', () => {
+  it('composes consumer xstyle onto the trigger alongside the slot class', () => {
+    const caller = stylex.create({ trigger: { marginInlineStart: '4px' } });
     render(
       <Popover.Root>
-        <Popover.Trigger className='mine'>Open</Popover.Trigger>
+        <Popover.Trigger xstyle={caller.trigger}>Open</Popover.Trigger>
         <Popover.Popup>Body</Popover.Popup>
       </Popover.Root>,
     );
 
-    const trigger = screen.getByRole('button', { name: 'Open' });
-    expect(trigger).toHaveClass('cl-popover-trigger');
-    expect(trigger).toHaveClass('mine');
+    expect(screen.getByRole('button', { name: 'Open' })).toHaveClass(
+      'cl-popover-trigger',
+      stylex.props(caller.trigger).className ?? '',
+    );
+  });
+
+  it('merges the className a render source hands the trigger', () => {
+    render(
+      <Popover.Root>
+        <Popover.Trigger render={<button className='from-render' />}>Open</Popover.Trigger>
+        <Popover.Popup>Body</Popover.Popup>
+      </Popover.Root>,
+    );
+
+    expect(screen.getByRole('button', { name: 'Open' })).toHaveClass('cl-popover-trigger', 'from-render');
   });
 
   it('defaults the popup to the md size and reflects it as data-size', () => {
@@ -125,22 +139,19 @@ describe('Mosaic Popover', () => {
     expect(document.querySelector('.cl-popover-popup')).toHaveAttribute('data-size', 'lg');
   });
 
-  it('merges consumer className and style onto the popup', () => {
+  it('composes consumer xstyle onto the popup', () => {
+    const caller = stylex.create({ popup: { marginTop: '8px' } });
     render(
       <Popover.Root defaultOpen>
         <Popover.Trigger>Open</Popover.Trigger>
-        <Popover.Popup
-          className='my-popup'
-          style={{ marginTop: '8px' }}
-        >
-          Body
-        </Popover.Popup>
+        <Popover.Popup xstyle={caller.popup}>Body</Popover.Popup>
       </Popover.Root>,
     );
 
-    const popup = document.querySelector('.cl-popover-popup');
-    expect(popup).toHaveClass('cl-popover-popup', 'my-popup');
-    expect(popup).toHaveStyle({ marginTop: '8px' });
+    expect(document.querySelector('.cl-popover-popup')).toHaveClass(
+      'cl-popover-popup',
+      stylex.props(caller.popup).className ?? '',
+    );
   });
 
   it('closes via Popover.Close', async () => {
diff --git a/packages/ui/src/mosaic/components/popover/popover.tsx b/packages/ui/src/mosaic/components/popover/popover.tsx
index d2995fbf544..27fa3e9089e 100644
--- a/packages/ui/src/mosaic/components/popover/popover.tsx
+++ b/packages/ui/src/mosaic/components/popover/popover.tsx
@@ -27,49 +27,49 @@ export type PopoverDescriptionProps = MosaicComponentProps<'p'>;
 
 /** The anchor. Renders a `<button>`; `render` swaps in another element. */
 const Trigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(function PopoverTrigger(
-  { className, style, ...props },
+  { xstyle, ...rest },
   ref,
 ) {
   return (
     <Primitive.Trigger
       ref={ref}
-      {...mergeStyleProps(themeProps('popover-trigger'), className, style)}
-      {...props}
+      {...mergeStyleProps(themeProps('popover-trigger'), stylex.props(xstyle), rest)}
     />
   );
 });
 
 /** Dismisses the popover. Renders a `<button>`; `render` swaps in another element. */
-const Close = React.forwardRef<HTMLButtonElement, PopoverCloseProps>(function PopoverClose(props, ref) {
+const Close = React.forwardRef<HTMLButtonElement, PopoverCloseProps>(function PopoverClose({ xstyle, ...rest }, ref) {
   return (
     <Primitive.Close
       ref={ref}
-      {...props}
+      {...mergeStyleProps(stylex.props(xstyle), rest)}
     />
   );
 });
 
 /** Names the dialog. Renders an `<h2>` wired to the popup's `aria-labelledby`. */
-const Title = React.forwardRef<HTMLHeadingElement, PopoverTitleProps>(function PopoverTitle(props, ref) {
+const Title = React.forwardRef<HTMLHeadingElement, PopoverTitleProps>(function PopoverTitle({ xstyle, ...rest }, ref) {
   return (
     <Primitive.Title
       ref={ref}
-      {...props}
+      {...mergeStyleProps(stylex.props(xstyle), rest)}
     />
   );
 });
 
 /** Describes the dialog. Renders a `<p>` wired to the popup's `aria-describedby`. */
-const Description = React.forwardRef<HTMLParagraphElement, PopoverDescriptionProps>(
-  function PopoverDescription(props, ref) {
-    return (
-      <Primitive.Description
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
+const Description = React.forwardRef<HTMLParagraphElement, PopoverDescriptionProps>(function PopoverDescription(
+  { xstyle, ...rest },
+  ref,
+) {
+  return (
+    <Primitive.Description
+      ref={ref}
+      {...mergeStyleProps(stylex.props(xstyle), rest)}
+    />
+  );
+});
 
 /**
  * Mosaic Popover: a floating box anchored to a trigger, built on the
@@ -125,7 +125,7 @@ export interface PopoverPopupProps extends MosaicComponentProps<'div'> {
  * `Popover.Trigger`; supply the surface inside it, usually a `Card`.
  */
 const Popup = React.forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(
-  { anchor, className, style, size = 'md', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...rest },
+  { anchor, xstyle, size = 'md', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...rest },
   ref,
 ) {
   return (
@@ -146,11 +146,9 @@ const Popup = React.forwardRef<HTMLDivElement, PopoverPopupProps>(function Popov
           ref={ref}
           {...mergeStyleProps(
             themeProps('popover-popup', { size }),
-            stylex.props(reset.base, styles.popup, sizes[size]),
-            className,
-            style,
+            stylex.props(reset.base, styles.popup, sizes[size], xstyle),
+            rest,
           )}
-          {...rest}
         />
       </Positioner>
     </Primitive.Portal>
diff --git a/packages/ui/src/mosaic/components/profile/profile.test.tsx b/packages/ui/src/mosaic/components/profile/profile.test.tsx
index 846327276fc..6358a522a6d 100644
--- a/packages/ui/src/mosaic/components/profile/profile.test.tsx
+++ b/packages/ui/src/mosaic/components/profile/profile.test.tsx
@@ -84,10 +84,13 @@ describe('Profile', () => {
   });
 
   it('exposes its parts through stable slots and state attributes', () => {
-    const { container } = renderSurface({ value: 'security', className: 'custom', style: { maxWidth: 900 } });
+    const probe = stylex.create({ root: { maxWidth: '900px' } });
+    const { container } = renderSurface({ value: 'security', xstyle: probe.root });
 
-    expect(container.firstChild).toHaveClass('cl-profile', 'custom');
-    expect(container.firstChild).toHaveStyle({ maxWidth: '900px' });
+    expect(container.firstChild).toHaveClass('cl-profile');
+    expect(Array.from(container.firstChild instanceof Element ? container.firstChild.classList : [])).toEqual(
+      expect.arrayContaining(atomsOf(probe.root)),
+    );
     expect(screen.getByRole('navigation')).toHaveClass('cl-profile-nav');
     expect(screen.getByRole('tablist')).toHaveClass('cl-profile-nav-list');
     const security = screen.getByRole('tab', { name: 'Security' });
@@ -99,6 +102,12 @@ describe('Profile', () => {
     expect(container.querySelector('.cl-profile-content')).toContainElement(screen.getByRole('tabpanel'));
   });
 
+  it('merges the className a render source hands the root', () => {
+    const { container } = renderSurface({ render: <section className='from-render' /> });
+
+    expect(container.firstChild).toHaveClass('cl-profile', 'from-render');
+  });
+
   // The profile is often the content of the host's own `main`, or of a dialog.
   it('claims no main landmark', () => {
     renderSurface();
diff --git a/packages/ui/src/mosaic/components/profile/profile.tsx b/packages/ui/src/mosaic/components/profile/profile.tsx
index 26af13735e7..4ada1cde041 100644
--- a/packages/ui/src/mosaic/components/profile/profile.tsx
+++ b/packages/ui/src/mosaic/components/profile/profile.tsx
@@ -113,8 +113,7 @@ const Root = React.forwardRef<HTMLDivElement, ProfileRootProps>(function Profile
     elevation = 'card',
     children,
     render,
-    className,
-    style,
+    xstyle,
     ...rest
   },
   ref,
@@ -168,11 +167,9 @@ const Root = React.forwardRef<HTMLDivElement, ProfileRootProps>(function Profile
     props: {
       ...mergeStyleProps(
         themeProps('profile', { elevation: inline ? 'flush' : 'card' }),
-        stylex.props(reset.base, styles.root, isOverlayDialog(dialog) && styles.rootInDialog),
-        className,
-        style,
+        stylex.props(reset.base, styles.root, isOverlayDialog(dialog) && styles.rootInDialog, xstyle),
+        rest,
       ),
-      ...rest,
       children: (
         <>
           <span
@@ -225,7 +222,7 @@ export type ProfileTitleProps = MosaicComponentProps<'h2'>;
  * surface whose visible headings belong to its pages.
  */
 const Title = React.forwardRef<HTMLHeadingElement, ProfileTitleProps>(function ProfileTitle(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   const { titleId } = useProfileContext('Profile.Title');
@@ -233,8 +230,7 @@ const Title = React.forwardRef<HTMLHeadingElement, ProfileTitleProps>(function P
     <VisuallyHidden
       ref={ref as React.Ref<HTMLSpanElement>}
       render={render ?? <h2 />}
-      {...mergeStyleProps(themeProps('profile-title'), className, style)}
-      {...rest}
+      {...mergeStyleProps(themeProps('profile-title'), stylex.props(xstyle), rest)}
       // The ids the navigation and the dialog point at, so the caller's cannot displace it.
       id={titleId}
     />
@@ -261,7 +257,7 @@ function NavBranding() {
  * two sets of tabs for one set of pages.
  */
 const Nav = React.forwardRef<HTMLElement, ProfileNavProps>(function ProfileNav(
-  { children, render, className, style, ...rest },
+  { children, render, xstyle, ...rest },
   ref,
 ) {
   const profile = useProfileContext('Profile.Nav');
@@ -283,11 +279,9 @@ const Nav = React.forwardRef<HTMLElement, ProfileNavProps>(function ProfileNav(
       'aria-labelledby': titleId,
       ...mergeStyleProps(
         themeProps('profile-nav', { compact }),
-        stylex.props(reset.base, styles.nav, (inline || compact) && styles.navFlush),
-        className,
-        style,
+        stylex.props(reset.base, styles.nav, (inline || compact) && styles.navFlush, xstyle),
+        rest,
       ),
-      ...rest,
       children: (
         <>
           {list}
@@ -329,7 +323,7 @@ export interface ProfileNavItemProps extends MosaicComponentProps<'button'> {
 
 /** A destination. Selecting it shows the `Profile.ContentPanel` sharing its `value`. */
 const NavItem = React.forwardRef<HTMLButtonElement, ProfileNavItemProps>(function ProfileNavItem(
-  { value, icon, disabled, children, render, className, style, onClick, ...rest },
+  { value, icon, disabled, children, render, xstyle, onClick, ...rest },
   ref,
 ) {
   const { compact, closeNav } = useProfileContext('Profile.NavItem');
@@ -348,11 +342,9 @@ const NavItem = React.forwardRef<HTMLButtonElement, ProfileNavItemProps>(functio
       }}
       {...mergeStyleProps(
         themeProps('profile-nav-item'),
-        stylex.props(reset.base, styles.navItem, focusOutline.visible),
-        className,
-        style,
+        stylex.props(reset.base, styles.navItem, focusOutline.visible, xstyle),
+        rest,
       )}
-      {...rest}
     >
       {icon ? (
         <span
@@ -379,7 +371,7 @@ export type ProfilePageTitleProps = MosaicComponentProps<'div'>;
  * line box. That needs an inline formatting context, so the button is `display: inline`.
  */
 const PageTitle = React.forwardRef<HTMLDivElement, ProfilePageTitleProps>(function ProfilePageTitle(
-  { children, render, className, style, ...rest },
+  { children, render, xstyle, ...rest },
   ref,
 ) {
   const profile = React.useContext(ProfileContext);
@@ -400,13 +392,7 @@ const PageTitle = React.forwardRef<HTMLDivElement, ProfilePageTitleProps>(functi
     render,
     ref,
     props: {
-      ...mergeStyleProps(
-        themeProps('profile-page-title'),
-        stylex.props(reset.base, styles.pageTitle),
-        className,
-        style,
-      ),
-      ...rest,
+      ...mergeStyleProps(themeProps('profile-page-title'), stylex.props(reset.base, styles.pageTitle, xstyle), rest),
       children: (
         <Heading
           id={panel?.titleId}
@@ -451,7 +437,7 @@ export type ProfileContentProps = MosaicComponentProps<'div'>;
  * own `main`, or of a dialog, so it claims no landmark.
  */
 const Content = React.forwardRef<HTMLDivElement, ProfileContentProps>(function ProfileContent(
-  { children, render, className, style, ...rest },
+  { children, render, xstyle, ...rest },
   ref,
 ) {
   const { inline, compact, renderBranding } = useProfileContext('Profile.Content');
@@ -462,11 +448,9 @@ const Content = React.forwardRef<HTMLDivElement, ProfileContentProps>(function P
     props: {
       ...mergeStyleProps(
         themeProps('profile-content', { inline }),
-        stylex.props(reset.base, styles.content, inline ? styles.contentInline : contentScroll),
-        className,
-        style,
+        stylex.props(reset.base, styles.content, inline ? styles.contentInline : contentScroll, xstyle),
+        rest,
       ),
-      ...rest,
       children: (
         <div
           {...mergeStyleProps(
@@ -515,7 +499,7 @@ export interface ProfileContentPanelProps extends MosaicComponentProps<'div'> {
  * `--cl-tab-transition-direction` — so a page transition is a styling change rather than a new part.
  */
 const ContentPanel = React.forwardRef<HTMLDivElement, ProfileContentPanelProps>(function ProfileContentPanel(
-  { value, shouldForceMount, className, style, ...rest },
+  { value, shouldForceMount, xstyle, ...rest },
   ref,
 ) {
   const { compact } = useProfileContext('Profile.ContentPanel');
@@ -531,8 +515,7 @@ const ContentPanel = React.forwardRef<HTMLDivElement, ProfileContentPanelProps>(
         // is named by its own title instead — `Profile.PageTitle` takes this id. Spread only then:
         // an explicit `undefined` would displace the primitive's own `aria-labelledby`.
         {...(compact ? { 'aria-labelledby': titleId } : null)}
-        {...mergeStyleProps(themeProps('profile-content-panel', { value }), className, style)}
-        {...rest}
+        {...mergeStyleProps(themeProps('profile-content-panel', { value }), stylex.props(xstyle), rest)}
       />
     </ContentPanelContext.Provider>
   );
diff --git a/packages/ui/src/mosaic/components/section/section.test.tsx b/packages/ui/src/mosaic/components/section/section.test.tsx
index 0de00309e56..10afc633570 100644
--- a/packages/ui/src/mosaic/components/section/section.test.tsx
+++ b/packages/ui/src/mosaic/components/section/section.test.tsx
@@ -1,9 +1,20 @@
+import * as stylex from '@stylexjs/stylex';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { Section } from './section';
 
+const overrides = stylex.create({
+  root: { containerType: 'inline-size' },
+  group: { borderWidth: 2 },
+  item: { minHeight: 80 },
+  label: { color: 'red' },
+});
+
+const atoms = (style: stylex.StyleXStyles) =>
+  (stylex.props(style).className ?? '').split(' ').filter(name => /^x[a-z0-9]+$/.test(name));
+
 describe('Section', () => {
   it('renders an accessible section and every compound part', () => {
     render(
@@ -109,7 +120,7 @@ describe('Section', () => {
     expect(screen.getByText('two@example.com')).toHaveAttribute('data-nested');
   });
 
-  it('lets consumer props win and forwards refs and custom elements', () => {
+  it('applies xstyle on every part and forwards refs and custom elements', () => {
     const rootRef = React.createRef<HTMLElement>();
     const groupRef = React.createRef<HTMLDivElement>();
     const itemRef = React.createRef<HTMLDivElement>();
@@ -120,21 +131,20 @@ describe('Section', () => {
       <Section.Root
         ref={rootRef}
         render={props => <article {...props} />}
-        className='custom-root'
+        xstyle={overrides.root}
       >
         <Section.Title>Account</Section.Title>
         <Section.Group
           ref={groupRef}
-          className='custom-group'
-          style={{ borderWidth: 2 }}
+          xstyle={overrides.group}
         >
           <Section.Row>
             <Section.Item
               ref={itemRef}
-              style={{ minHeight: 80 }}
+              xstyle={overrides.item}
             >
               <Section.Content ref={contentRef}>
-                <Section.Label style={{ color: 'red' }}>Name</Section.Label>
+                <Section.Label xstyle={overrides.label}>Name</Section.Label>
               </Section.Content>
               <Section.Actions ref={actionsRef} />
             </Section.Item>
@@ -144,16 +154,26 @@ describe('Section', () => {
     );
 
     expect(rootRef.current?.tagName).toBe('ARTICLE');
-    expect(rootRef.current).toHaveClass('cl-section', 'custom-root');
-    expect(groupRef.current).toHaveClass('cl-section-group', 'custom-group');
-    expect(groupRef.current).toHaveStyle({ borderWidth: '2px' });
-    expect(itemRef.current).toHaveClass('cl-section-item');
-    expect(itemRef.current).toHaveStyle({ minHeight: '80px' });
+    expect(rootRef.current).toHaveClass('cl-section', ...atoms(overrides.root));
+    expect(groupRef.current).toHaveClass('cl-section-group', ...atoms(overrides.group));
+    expect(itemRef.current).toHaveClass('cl-section-item', ...atoms(overrides.item));
     expect(contentRef.current).toHaveClass('cl-section-content');
-    expect(screen.getByText('Name')).toHaveStyle({ color: 'rgb(255, 0, 0)' });
+    expect(screen.getByText('Name')).toHaveClass('cl-section-label', ...atoms(overrides.label));
     expect(actionsRef.current).toHaveClass('cl-section-actions');
   });
 
+  it('merges a render-sourced className instead of clobbering its own', () => {
+    render(
+      <Section.Root>
+        <Section.Group render={<Section.Row />}>
+          <Section.Label>Name</Section.Label>
+        </Section.Group>
+      </Section.Root>,
+    );
+
+    expect(screen.getByText('Name').parentElement).toHaveClass('cl-section-group', 'cl-section-row');
+  });
+
   it('renders a row-level error as a sibling of the item, with the alert glyph', () => {
     render(
       <Section.Root>
diff --git a/packages/ui/src/mosaic/components/section/section.tsx b/packages/ui/src/mosaic/components/section/section.tsx
index e9c895e33a7..c0e89d700d1 100644
--- a/packages/ui/src/mosaic/components/section/section.tsx
+++ b/packages/ui/src/mosaic/components/section/section.tsx
@@ -38,7 +38,7 @@ const SectionTitleContext = React.createContext<React.Dispatch<React.SetStateAct
 const SectionItemsContext = React.createContext(false);
 
 const Root = React.forwardRef<HTMLElement, SectionRootProps>(function SectionRoot(
-  { render, className, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...rest },
+  { render, xstyle, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...rest },
   ref,
 ) {
   const [titleIds, setTitleIds] = React.useState<string[]>([]);
@@ -48,8 +48,7 @@ const Root = React.forwardRef<HTMLElement, SectionRootProps>(function SectionRoo
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('section'), stylex.props(reset.base, styles.root), className, style),
-      ...rest,
+      ...mergeStyleProps(themeProps('section'), stylex.props(reset.base, styles.root, xstyle), rest),
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledBy ?? (ariaLabel ? undefined : titleIds.join(' ') || undefined),
     },
@@ -59,7 +58,7 @@ const Root = React.forwardRef<HTMLElement, SectionRootProps>(function SectionRoo
 });
 
 const Title = React.forwardRef<HTMLHeadingElement, SectionTitleProps>(function SectionTitle(
-  { id: idProp, render, className, style, ...rest },
+  { id: idProp, render, xstyle, ...rest },
   ref,
 ) {
   const setTitleIds = React.useContext(SectionTitleContext);
@@ -81,14 +80,13 @@ const Title = React.forwardRef<HTMLHeadingElement, SectionTitleProps>(function S
       id={id}
       render={render ?? (props => <h4 {...props} />)}
       size='base'
-      {...mergeStyleProps(themeProps('section-title'), stylex.props(styles.title), className, style)}
-      {...rest}
+      {...mergeStyleProps(themeProps('section-title'), stylex.props(styles.title, xstyle), rest)}
     />
   );
 });
 
 const Group = React.forwardRef<HTMLDivElement, SectionGroupProps>(function SectionGroup(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -96,14 +94,13 @@ const Group = React.forwardRef<HTMLDivElement, SectionGroupProps>(function Secti
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('section-group'), stylex.props(reset.base, styles.group), className, style),
-      ...rest,
+      ...mergeStyleProps(themeProps('section-group'), stylex.props(reset.base, styles.group, xstyle), rest),
     },
   });
 });
 
 const Items = React.forwardRef<HTMLDivElement, SectionItemsProps>(function SectionItems(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   const element = useRender({
@@ -113,36 +110,27 @@ const Items = React.forwardRef<HTMLDivElement, SectionItemsProps>(function Secti
     props: {
       ...mergeStyleProps(
         themeProps('section-items', { nested: true }),
-        stylex.props(reset.base, styles.items, sectionItemsMarker),
-        className,
-        style,
+        stylex.props(reset.base, styles.items, sectionItemsMarker, xstyle),
+        rest,
       ),
-      ...rest,
     },
   });
 
   return <SectionItemsContext.Provider value>{element}</SectionItemsContext.Provider>;
 });
 
-const Row = React.forwardRef<HTMLDivElement, SectionRowProps>(function SectionRow(
-  { render, className, style, ...rest },
-  ref,
-) {
+const Row = React.forwardRef<HTMLDivElement, SectionRowProps>(function SectionRow({ render, xstyle, ...rest }, ref) {
   return useRender({
     defaultTagName: 'div',
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('section-row'), stylex.props(reset.base, styles.row), className, style),
-      ...rest,
+      ...mergeStyleProps(themeProps('section-row'), stylex.props(reset.base, styles.row, xstyle), rest),
     },
   });
 });
 
-const Item = React.forwardRef<HTMLDivElement, SectionItemProps>(function SectionItem(
-  { render, className, style, ...rest },
-  ref,
-) {
+const Item = React.forwardRef<HTMLDivElement, SectionItemProps>(function SectionItem({ render, xstyle, ...rest }, ref) {
   const nested = React.useContext(SectionItemsContext);
 
   return useRender({
@@ -150,19 +138,13 @@ const Item = React.forwardRef<HTMLDivElement, SectionItemProps>(function Section
     render,
     ref,
     props: {
-      ...mergeStyleProps(
-        themeProps('section-item', { nested }),
-        stylex.props(reset.base, styles.item),
-        className,
-        style,
-      ),
-      ...rest,
+      ...mergeStyleProps(themeProps('section-item', { nested }), stylex.props(reset.base, styles.item, xstyle), rest),
     },
   });
 });
 
 const Media = React.forwardRef<HTMLDivElement, SectionMediaProps>(function SectionMedia(
-  { size = 'md', render, className, style, ...rest },
+  { size = 'md', render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -172,17 +154,15 @@ const Media = React.forwardRef<HTMLDivElement, SectionMediaProps>(function Secti
     props: {
       ...mergeStyleProps(
         themeProps('section-media', { size }),
-        stylex.props(reset.base, styles.mediaBase, mediaSizes[size]),
-        className,
-        style,
+        stylex.props(reset.base, styles.mediaBase, mediaSizes[size], xstyle),
+        rest,
       ),
-      ...rest,
     },
   });
 });
 
 const Content = React.forwardRef<HTMLDivElement, SectionContentProps>(function SectionContent(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   const nested = React.useContext(SectionItemsContext);
@@ -194,17 +174,15 @@ const Content = React.forwardRef<HTMLDivElement, SectionContentProps>(function S
     props: {
       ...mergeStyleProps(
         themeProps('section-content', { nested }),
-        stylex.props(reset.base, styles.content),
-        className,
-        style,
+        stylex.props(reset.base, styles.content, xstyle),
+        rest,
       ),
-      ...rest,
     },
   });
 });
 
 const Label = React.forwardRef<HTMLDivElement, SectionLabelProps>(function SectionLabel(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -212,14 +190,13 @@ const Label = React.forwardRef<HTMLDivElement, SectionLabelProps>(function Secti
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('section-label'), stylex.props(reset.base, styles.label), className, style),
-      ...rest,
+      ...mergeStyleProps(themeProps('section-label'), stylex.props(reset.base, styles.label, xstyle), rest),
     },
   });
 });
 
 const Description = React.forwardRef<HTMLDivElement, SectionDescriptionProps>(function SectionDescription(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -227,19 +204,13 @@ const Description = React.forwardRef<HTMLDivElement, SectionDescriptionProps>(fu
     render,
     ref,
     props: {
-      ...mergeStyleProps(
-        themeProps('section-description'),
-        stylex.props(reset.base, styles.description),
-        className,
-        style,
-      ),
-      ...rest,
+      ...mergeStyleProps(themeProps('section-description'), stylex.props(reset.base, styles.description, xstyle), rest),
     },
   });
 });
 
 const Actions = React.forwardRef<HTMLDivElement, SectionActionsProps>(function SectionActions(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -247,8 +218,7 @@ const Actions = React.forwardRef<HTMLDivElement, SectionActionsProps>(function S
     render,
     ref,
     props: {
-      ...mergeStyleProps(themeProps('section-actions'), stylex.props(reset.base, styles.actions), className, style),
-      ...rest,
+      ...mergeStyleProps(themeProps('section-actions'), stylex.props(reset.base, styles.actions, xstyle), rest),
     },
   });
 });
@@ -260,7 +230,7 @@ const Actions = React.forwardRef<HTMLDivElement, SectionActionsProps>(function S
  * Carries `role='alert'` for the announcement a `Field.Root` would otherwise wire up.
  */
 const SectionError = React.forwardRef<HTMLParagraphElement, SectionErrorProps>(function SectionError(
-  { render, className, style, children, ...rest },
+  { render, xstyle, children, ...rest },
   ref,
 ) {
   return useRender({
@@ -268,14 +238,12 @@ const SectionError = React.forwardRef<HTMLParagraphElement, SectionErrorProps>(f
     render,
     ref,
     props: {
+      role: 'alert',
       ...mergeStyleProps(
         themeProps('section-error'),
-        stylex.props(reset.base, typographyStyles.base, typographySizes.xs, styles.error),
-        className,
-        style,
+        stylex.props(reset.base, typographyStyles.base, typographySizes.xs, styles.error, xstyle),
+        rest,
       ),
-      role: 'alert',
-      ...rest,
       children: (
         <>
           <Icon
diff --git a/packages/ui/src/mosaic/components/spinner/spinner.test.tsx b/packages/ui/src/mosaic/components/spinner/spinner.test.tsx
index 24127752350..f185ef37ee5 100644
--- a/packages/ui/src/mosaic/components/spinner/spinner.test.tsx
+++ b/packages/ui/src/mosaic/components/spinner/spinner.test.tsx
@@ -1,9 +1,14 @@
+import * as stylex from '@stylexjs/stylex';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { Spinner } from './spinner';
 
+const atoms = stylex.create({
+  spaced: { marginTop: '8px' },
+});
+
 /** The spinner is decorative, so it has no role or name to query — only its slot class. */
 const spinner = (container: HTMLElement) => container.querySelector('.cl-spinner');
 
@@ -25,16 +30,10 @@ describe('Mosaic Spinner', () => {
     expect(spinner(container)).toHaveAttribute('data-size', size);
   });
 
-  it('lets the consumer className and style win', () => {
-    const { container } = render(
-      <Spinner
-        className='my-spinner'
-        style={{ marginTop: '8px' }}
-      />,
-    );
+  it('merges xstyle atoms after the slot atoms', () => {
+    const { container } = render(<Spinner xstyle={atoms.spaced} />);
     const el = spinner(container);
-    expect(el).toHaveClass('cl-spinner', 'my-spinner');
-    expect(el).toHaveStyle({ marginTop: '8px' });
+    expect(el).toHaveClass('cl-spinner', stylex.props(atoms.spaced).className ?? '');
   });
 
   it('forwards arbitrary span props and the ref', () => {
diff --git a/packages/ui/src/mosaic/components/spinner/spinner.tsx b/packages/ui/src/mosaic/components/spinner/spinner.tsx
index ce034983030..bfb16853c53 100644
--- a/packages/ui/src/mosaic/components/spinner/spinner.tsx
+++ b/packages/ui/src/mosaic/components/spinner/spinner.tsx
@@ -22,15 +22,14 @@ export type SpinnerProps = MosaicElementProps<'span'> & {
  * <Spinner size='sm' />
  */
 export const Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(function MosaicSpinner(
-  { size = 'md', className, style, ...rest },
+  { size = 'md', xstyle, ...rest },
   ref,
 ) {
   return (
     <span
       ref={ref}
       aria-hidden
-      {...mergeStyleProps(themeProps('spinner', { size }), stylex.props(styles.base, sizes[size]), className, style)}
-      {...rest}
+      {...mergeStyleProps(themeProps('spinner', { size }), stylex.props(styles.base, sizes[size], xstyle), rest)}
     />
   );
 });
diff --git a/packages/ui/src/mosaic/components/text/text.test.tsx b/packages/ui/src/mosaic/components/text/text.test.tsx
index f09da10ba3b..fa2d3455895 100644
--- a/packages/ui/src/mosaic/components/text/text.test.tsx
+++ b/packages/ui/src/mosaic/components/text/text.test.tsx
@@ -1,9 +1,14 @@
+import * as stylex from '@stylexjs/stylex';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { Text, TextContext } from './text';
 
+const atoms = stylex.create({
+  spaced: { marginTop: '8px' },
+});
+
 describe('Mosaic Text', () => {
   it('renders a p with its children', () => {
     render(<Text>Body copy</Text>);
@@ -19,13 +24,12 @@ describe('Mosaic Text', () => {
     expect(text).toHaveAttribute('data-color', 'primary');
   });
 
-  it('wires variant props and consumer className/style through to the element', () => {
+  it('wires variant props and xstyle atoms through to the element', () => {
     render(
       <Text
         size='lg'
         color='neutral'
-        className='my-text'
-        style={{ marginTop: '8px' }}
+        xstyle={atoms.spaced}
       >
         Body copy
       </Text>,
@@ -33,8 +37,12 @@ describe('Mosaic Text', () => {
     const text = screen.getByText('Body copy');
     expect(text).toHaveAttribute('data-size', 'lg');
     expect(text).toHaveAttribute('data-color', 'neutral');
-    expect(text).toHaveClass('cl-text', 'my-text');
-    expect(text).toHaveStyle({ marginTop: '8px' });
+    expect(text).toHaveClass('cl-text', stylex.props(atoms.spaced).className ?? '');
+  });
+
+  it('merges a className carried by the render element instead of clobbering the slot class', () => {
+    render(<Text render={<span className='from-source' />}>Body copy</Text>);
+    expect(screen.getByText('Body copy')).toHaveClass('cl-text', 'from-source');
   });
 
   it('renders a different element through the render prop, keeping the slot props', () => {
diff --git a/packages/ui/src/mosaic/components/text/text.tsx b/packages/ui/src/mosaic/components/text/text.tsx
index 8e47f2e4613..ab315f5defa 100644
--- a/packages/ui/src/mosaic/components/text/text.tsx
+++ b/packages/ui/src/mosaic/components/text/text.tsx
@@ -21,17 +21,13 @@ export const TextContext = React.createContext<Partial<TextProps> | null>(null);
  * `size` and `color` variants. Pass `render` for inline copy (`<span>`).
  */
 export const Text = React.forwardRef<HTMLParagraphElement, TextProps>(function MosaicText(rawProps, ref) {
-  const { size = 'sm', color = 'primary', render, className, style, ...rest } = useContextProps(rawProps, TextContext);
+  const { size = 'sm', color = 'primary', render, xstyle, ...rest } = useContextProps(rawProps, TextContext);
 
-  const props = {
-    ...mergeStyleProps(
-      themeProps('text', { size, color }),
-      stylex.props(reset.base, styles.base, sizes[size], colors[color]),
-      className,
-      style,
-    ),
-    ...rest,
-  };
+  const props = mergeStyleProps(
+    themeProps('text', { size, color }),
+    stylex.props(reset.base, styles.base, sizes[size], colors[color], xstyle),
+    rest,
+  );
 
   // useRender only runs for `render` (function or element); Emotion processes `css`
   // inside the consumer's own JSX there. The no-render fallback must stay JSX —
diff --git a/packages/ui/src/mosaic/components/visually-hidden/visually-hidden.test.tsx b/packages/ui/src/mosaic/components/visually-hidden/visually-hidden.test.tsx
index adf6d00ba6d..65e6ca4bb94 100644
--- a/packages/ui/src/mosaic/components/visually-hidden/visually-hidden.test.tsx
+++ b/packages/ui/src/mosaic/components/visually-hidden/visually-hidden.test.tsx
@@ -1,9 +1,14 @@
+import * as stylex from '@stylexjs/stylex';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
 import { VisuallyHidden } from './visually-hidden';
 
+const atoms = stylex.create({
+  spaced: { marginTop: '8px' },
+});
+
 describe('Mosaic VisuallyHidden', () => {
   it('renders a span with its children', () => {
     render(<VisuallyHidden>Saved</VisuallyHidden>);
@@ -33,7 +38,7 @@ describe('Mosaic VisuallyHidden', () => {
         ref={ref}
         role='status'
         aria-live='polite'
-        className='my-hidden'
+        xstyle={atoms.spaced}
       >
         Saved
       </VisuallyHidden>,
@@ -41,6 +46,18 @@ describe('Mosaic VisuallyHidden', () => {
     const hidden = screen.getByRole('status');
     expect(ref.current).toBe(hidden);
     expect(hidden).toHaveAttribute('aria-live', 'polite');
-    expect(hidden).toHaveClass('cl-visually-hidden', 'my-hidden');
+    expect(hidden).toHaveClass('cl-visually-hidden', stylex.props(atoms.spaced).className ?? '');
+  });
+
+  it('merges a className carried by the render element instead of clobbering the slot class', () => {
+    render(
+      <VisuallyHidden
+        role='status'
+        render={<span className='from-source' />}
+      >
+        Saved
+      </VisuallyHidden>,
+    );
+    expect(screen.getByRole('status')).toHaveClass('cl-visually-hidden', 'from-source');
   });
 });
diff --git a/packages/ui/src/mosaic/components/visually-hidden/visually-hidden.tsx b/packages/ui/src/mosaic/components/visually-hidden/visually-hidden.tsx
index 4dc793db439..1b146fa02f0 100644
--- a/packages/ui/src/mosaic/components/visually-hidden/visually-hidden.tsx
+++ b/packages/ui/src/mosaic/components/visually-hidden/visually-hidden.tsx
@@ -20,7 +20,7 @@ export type VisuallyHiddenProps = MosaicComponentProps<'span'>;
  * <VisuallyHidden render={<div role='status' aria-live='polite' />}>{feedback}</VisuallyHidden>
  */
 export const VisuallyHidden = React.forwardRef<HTMLSpanElement, VisuallyHiddenProps>(function MosaicVisuallyHidden(
-  { render, className, style, ...rest },
+  { render, xstyle, ...rest },
   ref,
 ) {
   return useRender({
@@ -28,13 +28,7 @@ export const VisuallyHidden = React.forwardRef<HTMLSpanElement, VisuallyHiddenPr
     render,
     ref,
     props: {
-      ...mergeStyleProps(
-        themeProps('visually-hidden'),
-        stylex.props(reset.base, visuallyHidden.base),
-        className,
-        style,
-      ),
-      ...rest,
+      ...mergeStyleProps(themeProps('visually-hidden'), stylex.props(reset.base, visuallyHidden.base, xstyle), rest),
     },
   });
 });
diff --git a/packages/ui/src/mosaic/props.test-d.ts b/packages/ui/src/mosaic/props.test-d.ts
new file mode 100644
index 00000000000..6e61a73ade6
--- /dev/null
+++ b/packages/ui/src/mosaic/props.test-d.ts
@@ -0,0 +1,67 @@
+import type * as stylex from '@stylexjs/stylex';
+import type React from 'react';
+import { describe, expectTypeOf, test } from 'vitest';
+
+import type { MosaicComponentProps, MosaicElementProps } from './props';
+import { mergeStyleProps, themeProps } from './props';
+
+// A Mosaic part is styled from inside `packages/ui` through `xstyle`, and from outside through
+// the `.cl-<slot>` / `data-<axis>` / `--cl-*` CSS contract. Neither path is `className` or
+// `style`, so the canonical prop types drop both; every part inherits the omission from here.
+
+describe('MosaicComponentProps', () => {
+  test('accepts xstyle', () => {
+    expectTypeOf<MosaicComponentProps<'div'>>()
+      .toHaveProperty('xstyle')
+      .toEqualTypeOf<stylex.StyleXStyles | undefined>();
+  });
+
+  test('rejects className and style', () => {
+    expectTypeOf<MosaicComponentProps<'div'>>().not.toHaveProperty('className');
+    expectTypeOf<MosaicComponentProps<'div'>>().not.toHaveProperty('style');
+  });
+
+  test('keeps render and the native props', () => {
+    expectTypeOf<MosaicComponentProps<'button'>>().toHaveProperty('render');
+    expectTypeOf<MosaicComponentProps<'button'>>().toHaveProperty('onClick');
+    expectTypeOf<MosaicComponentProps<'button'>>().toHaveProperty('ref');
+  });
+});
+
+describe('MosaicElementProps', () => {
+  test('accepts xstyle', () => {
+    expectTypeOf<MosaicElementProps<'button'>>()
+      .toHaveProperty('xstyle')
+      .toEqualTypeOf<stylex.StyleXStyles | undefined>();
+  });
+
+  test('rejects className and style', () => {
+    expectTypeOf<MosaicElementProps<'button'>>().not.toHaveProperty('className');
+    expectTypeOf<MosaicElementProps<'button'>>().not.toHaveProperty('style');
+  });
+
+  test('has no render', () => {
+    expectTypeOf<MosaicElementProps<'button'>>().not.toHaveProperty('render');
+  });
+});
+
+declare const optionRest: Omit<MosaicComponentProps<'div'>, 'xstyle'> & { value: string };
+
+describe('mergeStyleProps', () => {
+  // The last bag is a part's `rest`, so the merged result must stay as strictly typed as the part's
+  // props: a required prop the part forwards (Combobox.Option's `value`) is still checked by the
+  // element it lands on.
+  test('keeps the incoming bag typed and adds the merged className/style', () => {
+    const merged = mergeStyleProps(themeProps('combobox-option'), { className: 'x1' }, optionRest);
+
+    expectTypeOf(merged).toHaveProperty('value').toEqualTypeOf<string>();
+    expectTypeOf(merged).toHaveProperty('onClick').toEqualTypeOf<MosaicComponentProps<'div'>['onClick']>();
+    expectTypeOf(merged).toHaveProperty('className').toEqualTypeOf<string | undefined>();
+    expectTypeOf(merged).toHaveProperty('style').toEqualTypeOf<React.CSSProperties | undefined>();
+  });
+
+  test('accepts a bag that only carries className/style', () => {
+    const merged = mergeStyleProps(themeProps('icon'), { className: 'x1' });
+    expectTypeOf(merged).toHaveProperty('className').toEqualTypeOf<string | undefined>();
+  });
+});
diff --git a/packages/ui/src/mosaic/props.ts b/packages/ui/src/mosaic/props.ts
index 8289cfea83b..80057484c02 100644
--- a/packages/ui/src/mosaic/props.ts
+++ b/packages/ui/src/mosaic/props.ts
@@ -1,25 +1,44 @@
 import type { ComponentProps } from '@clerk/headless/utils';
+import type * as stylex from '@stylexjs/stylex';
 import type React from 'react';
 
 /**
- * The native props for a tag, minus the non-standard HTML `color` attribute. That
- * attribute is typed `string`, so leaving it in widens any component that exposes
- * `color` as a variant union. Use for a component that has no `render`.
+ * The one styling prop a Mosaic part takes from the code that renders it: StyleX atoms
+ * for the part's root element, composed last in its `stylex.props(...)` call so they win.
+ *
+ * `className` and `style` are deliberately absent. Inside `packages/ui` a flow author
+ * styles a part with `xstyle`; outside it, a theme targets the `.cl-<slot>` class,
+ * `data-<axis>` attrs, and `--cl-*` vars in CSS. Neither path needs raw CSS on the part.
+ */
+export interface MosaicStyleProps {
+  xstyle?: stylex.StyleXStyles;
+}
+
+/**
+ * The native props for a tag, minus the non-standard HTML `color` attribute and the
+ * `className`/`style` pair, plus `xstyle`. `color` is typed `string`, so leaving it in
+ * widens any component that exposes `color` as a variant union. Use for a component
+ * that has no `render`.
  */
 export type MosaicElementProps<Tag extends keyof React.JSX.IntrinsicElements> = Omit<
   React.ComponentPropsWithRef<Tag>,
-  'color'
->;
+  'color' | 'className' | 'style'
+> &
+  MosaicStyleProps;
 
 /**
  * The base props every Mosaic component accepts: the native props for its default
- * tag, plus the `render` escape hatch that swaps the rendered element.
+ * tag, the `render` escape hatch that swaps the rendered element, and `xstyle`.
  *
- * Mosaic's name for the headless part contract, which already drops `color` and
- * hands `render` callbacks tag-agnostic props. Aliased rather than rebuilt so the
- * two layers cannot drift, and so `@clerk/ui` consumers have a name to import.
+ * Derived from the headless part contract, which already drops `color` and hands
+ * `render` callbacks tag-agnostic props, so the two layers cannot drift. Mosaic
+ * additionally drops `className`/`style` in favour of `xstyle` (see `MosaicStyleProps`).
  */
-export type MosaicComponentProps<Tag extends keyof React.JSX.IntrinsicElements> = ComponentProps<Tag>;
+export type MosaicComponentProps<Tag extends keyof React.JSX.IntrinsicElements> = Omit<
+  ComponentProps<Tag>,
+  'className' | 'style'
+> &
+  MosaicStyleProps;
 
 // The public styling contract, emitted onto a component's root element:
 //   1. `--cl-*` vars      — from `tokens.stylex.ts` (`:root { --cl-color-primary: … }`)
@@ -89,38 +108,33 @@ function mergeTwoProps(base: PropsObject, overrides: PropsObject): PropsObject {
 }
 
 /**
- * Fuse `themeProps(...)`, `stylex.props(...)`, and the consumer's incoming
- * `className`/`style` into one spreadable object. Positional, mirroring astryx's
- * helper so the consumer's `className` and `style` can be passed raw:
+ * Fuse a part's `themeProps(...)`, its `stylex.props(...)` result, and the props it was
+ * called with into one spreadable object, left to right: `className` concatenates,
+ * `style` shallow-merges with the later bag winning, everything else is overwritten by
+ * the later bag.
+ *
+ *   mergeStyleProps(themeProps('button', { variant }), stylex.props(styles.base, xstyle), rest)
  *
- *   mergeStyleProps(themeProps('button', { variant }), stylex.props(...), className, style)
+ * A part's public props carry no `className`/`style` (flow authors pass `xstyle`), but a
+ * `render` source hands its own merged pair to the part it renders, so the incoming bag
+ * can still hold them at runtime. Passing the bag through here merges that pair; a
+ * trailing `{...rest}` spread would clobber the part's own class instead.
  *
- * The trailing pair disambiguates by type — a string is a `className`, an object
- * is a `style` — which is why `style` is accepted directly rather than wrapped.
- * Order is deliberate: stable class + data-attrs, then StyleX atoms, then the
- * consumer's `className`/`style` last so they win.
+ * The result keeps the last bag's prop types (minus the pair, which comes back merged), so a
+ * required prop the part forwards through `rest` is still checked by the element it lands on.
  *
- * Distinct from `@clerk/headless`'s `mergeProps`: this only fuses styling output
- * (className/style) and does not chain event handlers.
+ * Distinct from `@clerk/headless`'s `mergeProps`: this only fuses `className`/`style`
+ * and does not chain event handlers.
  */
-export function mergeStyleProps(
-  first: PropsObject,
-  second?: PropsObject | string,
-  classNameOrStyle?: string | React.CSSProperties,
-  style?: React.CSSProperties,
-): PropsObject {
-  const secondObject = typeof second === 'string' ? { className: second } : (second ?? {});
-  let merged = mergeTwoProps(first, secondObject);
-
-  if (typeof classNameOrStyle === 'string') {
-    merged = mergeTwoProps(merged, { className: classNameOrStyle });
-  } else if (classNameOrStyle != null) {
-    merged = mergeTwoProps(merged, { style: classNameOrStyle });
-  }
-
-  if (style != null) {
-    merged = mergeTwoProps(merged, { style });
+export function mergeStyleProps<Rest extends PropsObject>(
+  ...bags: [...Array<PropsObject | undefined>, Rest]
+): Omit<Rest, 'className' | 'style'> & Pick<PropsObject, 'className' | 'style'>;
+export function mergeStyleProps(...bags: Array<PropsObject | undefined>): PropsObject {
+  let merged: PropsObject = {};
+  for (const bag of bags) {
+    if (bag) {
+      merged = mergeTwoProps(merged, bag);
+    }
   }
-
   return merged;
 }
diff --git a/packages/ui/src/mosaic/user-button/user-button.styles.ts b/packages/ui/src/mosaic/user-button/user-button.styles.ts
index 779142151f7..b08f0b7e023 100644
--- a/packages/ui/src/mosaic/user-button/user-button.styles.ts
+++ b/packages/ui/src/mosaic/user-button/user-button.styles.ts
@@ -3,6 +3,9 @@ import * as stylex from '@stylexjs/stylex';
 import { colorVars, fontWeightVars, radiusVars, space, typeScaleVars } from '../tokens.stylex';
 
 export const styles = stylex.create({
+  accountIdentifier: {
+    fontWeight: fontWeightVars['--cl-font-medium'],
+  },
   // The avatar is the trigger, so the button paints nothing of its own.
   trigger: {
     padding: 0,
diff --git a/packages/ui/src/mosaic/user-button/user-button.view.tsx b/packages/ui/src/mosaic/user-button/user-button.view.tsx
index a2d34b53b1f..6843ad0a307 100644
--- a/packages/ui/src/mosaic/user-button/user-button.view.tsx
+++ b/packages/ui/src/mosaic/user-button/user-button.view.tsx
@@ -18,7 +18,6 @@ import { Popover } from '../components/popover';
 import { scrollAreaViewport } from '../components/scroll-area';
 import { Spinner } from '../components/spinner';
 import type { IconName } from '../icons/registry';
-import { fontWeightVars } from '../tokens.stylex';
 import { applyOrder } from '../utils/apply-order';
 import { focusOutline } from '../utils/focus-outline.styles';
 import { truncationStyles } from '../utils/typography.styles';
@@ -504,13 +503,7 @@ function OrganizationsHeading() {
   return (
     <Item.Root size='xs'>
       <Item.Content>
-        <Item.Description
-          style={{
-            fontWeight: fontWeightVars['--cl-font-medium'],
-          }}
-        >
-          {identifier}
-        </Item.Description>
+        <Item.Description xstyle={styles.accountIdentifier}>{identifier}</Item.Description>
       </Item.Content>
       {busy ? (
         <Trailing>
diff --git a/references/mosaic-architecture.md b/references/mosaic-architecture.md
index d00d6427612..6ac6d764a09 100644
--- a/references/mosaic-architecture.md
+++ b/references/mosaic-architecture.md
@@ -39,10 +39,9 @@ Every Mosaic part carries a **stable class** and reflects its variants and state
 
 Consumers target the class and its attributes, never StyleX's hashed `x…` atoms.
 
-Two ways to style a part — both hit the same class + attributes:
+A theme styles a part from CSS, against that class and its attributes:
 
 ```css
-/* 1. Plain CSS / stylesheet */
 .cl-button {
   border-radius: 8px;
 }
@@ -54,15 +53,20 @@ Two ways to style a part — both hit the same class + attributes:
 }
 ```
 
+A part exposes no `className` or `style` prop. Inside `packages/ui`, code that renders a part and needs to nudge it passes StyleX atoms through `xstyle`, declared in its own `stylex.create` and composed last so they win:
+
 ```tsx
-// 2. className / style props — merged onto the element by `mergeStyleProps`, applied last so they win
-<Button
-  className='MyButton'
-  style={{ borderRadius: 12 }}
-/>
+const styles = stylex.create({ helpText: { textAlign: 'center' } });
+
+<Text
+  size='xs'
+  xstyle={styles.helpText}
+>
+  {helpText}
+</Text>;
 ```
 
-Tokens are a third, independent lever: every `--cl-*` custom property (`--cl-color-*`, `--cl-radius-*`, `--cl-font-family-sans`, `--cl-spacing`) can be overridden in plain CSS at `:root` or any scope to re-theme without touching a component.
+Tokens are a second, independent lever: every `--cl-*` custom property (`--cl-color-*`, `--cl-radius-*`, `--cl-font-family-sans`, `--cl-spacing`) can be overridden in plain CSS at `:root` or any scope to re-theme without touching a component.
 
 State styling uses real class + attribute-selector specificity — no `&&` boost, no data-attr-vs-class ambiguity.
 
@@ -80,7 +84,7 @@ import { MosaicProvider } from '../mosaic/MosaicProvider';
 
 ## Component authoring pattern
 
-Styles are declared once per component with `stylex.create`, keyed off the same axes the component exposes as props, then fused with `themeProps` output and the consumer's `className`/`style`:
+Styles are declared once per component with `stylex.create`, keyed off the same axes the component exposes as props, then fused with `themeProps` output and the props the component was called with:
 
 ```tsx
 const styles = stylex.create({
@@ -97,27 +101,27 @@ const variants = stylex.create({
 });
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { color = 'primary', variant = 'filled', size = 'md', disabled, className, style, ...rest },
+  { color = 'primary', variant = 'filled', size = 'md', disabled, xstyle, ...rest },
   ref,
 ) {
   const props = mergeStyleProps(
     themeProps('button', { color, variant, size, disabled }),
-    stylex.props(reset.base, styles.base, variants[`${variant}-${color}`]),
-    className,
-    style,
+    stylex.props(reset.base, styles.base, variants[`${variant}-${color}`], xstyle),
+    rest,
   );
   return (
     <button
       ref={ref}
       disabled={disabled}
       {...props}
-      {...rest}
     />
   );
 });
 ```
 
-`mergeStyleProps` applies its arguments in order — stable class + data attrs, then StyleX atoms, then the consumer's `className` and `style`. Only `style` wins by that ordering: it is an inline style, which outranks any stylesheet rule. A consumer's `className` wins for a different reason — class order inside the attribute has no effect on the cascade, so the consumer's rule wins because the Mosaic sheet is imported into a cascade layer (`@import '@clerk/ui/styles.css' layer(components)`) and an unlayered rule beats any layered one.
+`mergeStyleProps` applies its bags in order — stable class + data attrs, then StyleX atoms, then the props the component was called with — concatenating `className`, shallow-merging `style`, and letting the later bag overwrite anything else. `ButtonProps` extends `MosaicElementProps<'button'>`, which omits `className`/`style` and adds `xstyle`, so the caller's only styling lever is StyleX atoms composed last inside `stylex.props`. The `rest` bag still goes through the merge rather than a trailing spread because a `render` source (`Dialog.Title render={<Heading />}`) hands its own merged `className`/`style` to the part it renders; the merge fuses that pair, a spread would clobber the part's own class.
+
+A theme's CSS wins over the Mosaic sheet without any prop: the sheet is imported into a cascade layer (`@import '@clerk/ui/styles.css' layer(components)`) and an unlayered rule beats any layered one.
 
 `utils/reset.styles.ts` holds the per-element resets so a component does not re-declare UA-normalization; `utils/typography.styles.ts` and `utils/focus-outline.styles.ts` do the same for the treatments several components share.
 
@@ -411,6 +415,7 @@ the only test that mocks Clerk, and the view needs no machinery at all. See the
 ### Rules
 
 - **Do** author components with StyleX (`stylex.create` + `themeProps` / `mergeStyleProps`)
+- **Do** type a part's props off `MosaicComponentProps` / `MosaicElementProps`; a part takes `xstyle`, never `className` / `style`
 - **Do not** use Emotion in Mosaic — no `css` prop, no `styled`, no theme callbacks
 - **Do** export every new component from `styles/index.ts`, or its CSS never ships
 - **Do** import from `src/mosaic/` directly (no barrel files) inside `packages/ui`
@@ -428,7 +433,7 @@ the only test that mocks Clerk, and the view needs no machinery at all. See the
 To migrate a component from the old system to Mosaic:
 
 1. Replace `createVariants` with `stylex.create` — one style key per variant value, selected by the prop at render time instead of merged by a runtime engine.
-2. Replace `applyVariants(props)` with `mergeStyleProps(themeProps(slot, variants), stylex.props(...), className, style)` and spread the result onto the element.
+2. Replace `applyVariants(props)` with `mergeStyleProps(themeProps(slot, variants), stylex.props(..., xstyle), rest)` and spread the result onto the element. Drop any `className` / `style` props the legacy component accepted; callers pass `xstyle`.
 3. Move stateful styling (disabled/hover/focus/invalid) into StyleX conditions. A condition is a key _inside a property's value object_ alongside `default`, never a top-level style key, and an attribute selector must be wrapped in `:is(...)`:
 
    ```ts
@@ -442,29 +447,29 @@ The steps above cover the **styling** migration. For **flow** components — whe
 
 ## Files
 
-| File                                           | Purpose                                                                   |
-| ---------------------------------------------- | ------------------------------------------------------------------------- |
-| `src/mosaic/tokens.stylex.ts`                  | `--cl-*` token groups declared with `stylex.defineVars`                   |
-| `src/mosaic/props.ts`                          | `themeProps`, `mergeStyleProps`, `MosaicComponentProps`                   |
-| `src/mosaic/MosaicProvider.tsx`                | Provider for the `icons` prop (per-name glyph overrides)                  |
-| `src/mosaic/icons/overrides.ts`                | `MosaicIconOverrides` type + `useMosaicIcons()` context                   |
-| `src/mosaic/icons/registry.tsx`                | Built-in glyphs and the `IconName` union                                  |
-| `src/mosaic/components/`                       | One subdirectory per component, and nothing else                          |
-| `src/mosaic/blocks/`                           | View fragments that own one piece of state of their own (`destructive`)   |
-| `src/mosaic/utils/*.styles.ts`                 | Atoms shared across components: `reset`, `typography`, `focus-outline`    |
-| `src/mosaic/hooks/`                            | Mosaic-only hooks (`useMosaicEnvironment`, `useMosaicRouter`, …)          |
-| `src/mosaic/styles/index.ts`                   | StyleX-only barrel — the entry the CSS build walks                        |
-| `src/mosaic/machine/`                          | State-machine runtime (`createMachine`, `createActor`, `useMachine`)      |
-| `src/mosaic/machines/`                         | Standalone machines and the shared `__tests__/test-utils.ts`              |
-| `src/mosaic/<feature>/*.model.tsx`             | Clerk adapter — the only file in a feature that may import Clerk          |
-| `src/mosaic/<feature>/*.controller.tsx`        | Local state and action wrapping; holds the feature's machine              |
-| `src/mosaic/<feature>/*.view.tsx`              | Clerk-free rendering from plain props                                     |
-| `src/mosaic/<feature>/*.types.ts`              | The data contract the model and the view both agree on                    |
-| `src/mosaic/<feature>/*.messages.ts`           | Every string the surface renders, shaped the way `@clerk/i18n` takes them |
-| `src/mosaic/utils/reset.test.tsx`              | Reset specs                                                               |
-| `src/mosaic/__tests__/MosaicProvider.test.tsx` | Icon-override context specs                                               |
-| `src/mosaic/components/button/button.test.tsx` | Component-level slot/state/variant specs                                  |
-| `src/mosaic/user-button/__tests__/`            | The canonical per-layer test set to copy from                             |
+| File                                           | Purpose                                                                     |
+| ---------------------------------------------- | --------------------------------------------------------------------------- |
+| `src/mosaic/tokens.stylex.ts`                  | `--cl-*` token groups declared with `stylex.defineVars`                     |
+| `src/mosaic/props.ts`                          | `themeProps`, `mergeStyleProps`, `MosaicComponentProps`, `MosaicStyleProps` |
+| `src/mosaic/MosaicProvider.tsx`                | Provider for the `icons` prop (per-name glyph overrides)                    |
+| `src/mosaic/icons/overrides.ts`                | `MosaicIconOverrides` type + `useMosaicIcons()` context                     |
+| `src/mosaic/icons/registry.tsx`                | Built-in glyphs and the `IconName` union                                    |
+| `src/mosaic/components/`                       | One subdirectory per component, and nothing else                            |
+| `src/mosaic/blocks/`                           | View fragments that own one piece of state of their own (`destructive`)     |
+| `src/mosaic/utils/*.styles.ts`                 | Atoms shared across components: `reset`, `typography`, `focus-outline`      |
+| `src/mosaic/hooks/`                            | Mosaic-only hooks (`useMosaicEnvironment`, `useMosaicRouter`, …)            |
+| `src/mosaic/styles/index.ts`                   | StyleX-only barrel — the entry the CSS build walks                          |
+| `src/mosaic/machine/`                          | State-machine runtime (`createMachine`, `createActor`, `useMachine`)        |
+| `src/mosaic/machines/`                         | Standalone machines and the shared `__tests__/test-utils.ts`                |
+| `src/mosaic/<feature>/*.model.tsx`             | Clerk adapter — the only file in a feature that may import Clerk            |
+| `src/mosaic/<feature>/*.controller.tsx`        | Local state and action wrapping; holds the feature's machine                |
+| `src/mosaic/<feature>/*.view.tsx`              | Clerk-free rendering from plain props                                       |
+| `src/mosaic/<feature>/*.types.ts`              | The data contract the model and the view both agree on                      |
+| `src/mosaic/<feature>/*.messages.ts`           | Every string the surface renders, shaped the way `@clerk/i18n` takes them   |
+| `src/mosaic/utils/reset.test.tsx`              | Reset specs                                                                 |
+| `src/mosaic/__tests__/MosaicProvider.test.tsx` | Icon-override context specs                                                 |
+| `src/mosaic/components/button/button.test.tsx` | Component-level slot/state/variant specs                                    |
+| `src/mosaic/user-button/__tests__/`            | The canonical per-layer test set to copy from                               |
 
 `machine/` is the runtime; `machines/` is machines written with it. The one-letter
 difference is easy to misread — a feature's own machine belongs in its

From 5fc09cc0a182e971351960a63a7890c0fc8cc51f Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Fri, 11 Sep 2026 13:33:03 -0400
Subject: [PATCH 2/3] feat(ui): group cl-* slot classes ahead of hashed atoms
 in mergeStyleProps

---
 .../ui/src/mosaic/__tests__/props.test.ts     | 11 +++++++++-
 packages/ui/src/mosaic/props.ts               | 20 ++++++++++++++++---
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/mosaic/__tests__/props.test.ts b/packages/ui/src/mosaic/__tests__/props.test.ts
index 922abac52a9..b07f279c07f 100644
--- a/packages/ui/src/mosaic/__tests__/props.test.ts
+++ b/packages/ui/src/mosaic/__tests__/props.test.ts
@@ -68,9 +68,18 @@ describe('mergeStyleProps', () => {
     const rest = { className: 'cl-dialog-title', style: { color: 'red' }, id: 'title' };
     const merged = mergeStyleProps({ className: 'cl-heading' }, { className: 'x1', style: { margin: 0 } }, rest);
     expect(merged).toEqual({
-      className: 'cl-heading x1 cl-dialog-title',
+      className: 'cl-heading cl-dialog-title x1',
       style: { margin: 0, color: 'red' },
       id: 'title',
     });
   });
+
+  it('groups the cl-* slot classes ahead of the hashed atoms, keeping each group in order', () => {
+    const merged = mergeStyleProps(
+      { className: 'cl-heading' },
+      { className: 'x1 x2' },
+      { className: 'cl-dialog-title x3' },
+    );
+    expect(merged.className).toBe('cl-heading cl-dialog-title x1 x2 x3');
+  });
 });
diff --git a/packages/ui/src/mosaic/props.ts b/packages/ui/src/mosaic/props.ts
index 80057484c02..b9e25186f71 100644
--- a/packages/ui/src/mosaic/props.ts
+++ b/packages/ui/src/mosaic/props.ts
@@ -109,9 +109,9 @@ function mergeTwoProps(base: PropsObject, overrides: PropsObject): PropsObject {
 
 /**
  * Fuse a part's `themeProps(...)`, its `stylex.props(...)` result, and the props it was
- * called with into one spreadable object, left to right: `className` concatenates,
- * `style` shallow-merges with the later bag winning, everything else is overwritten by
- * the later bag.
+ * called with into one spreadable object, left to right: `className` concatenates (the
+ * `cl-*` slot classes grouped first), `style` shallow-merges with the later bag winning,
+ * everything else is overwritten by the later bag.
  *
  *   mergeStyleProps(themeProps('button', { variant }), stylex.props(styles.base, xstyle), rest)
  *
@@ -136,5 +136,19 @@ export function mergeStyleProps(...bags: Array<PropsObject | undefined>): PropsO
       merged = mergeTwoProps(merged, bag);
     }
   }
+  if (merged.className) {
+    merged.className = groupSlotClasses(merged.className);
+  }
   return merged;
 }
+
+// Order carries no cascade meaning; the slot classes lead so `class="cl-heading cl-dialog-title x1…"`
+// reads in devtools without hunting for them between the hashed atoms.
+function groupSlotClasses(className: string): string {
+  const slots: string[] = [];
+  const atoms: string[] = [];
+  for (const token of className.split(' ')) {
+    (token.startsWith('cl-') ? slots : atoms).push(token);
+  }
+  return [...slots, ...atoms].join(' ');
+}

From df2ec980b75dd7245c3ada2b770bd9825fabbed8 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Fri, 11 Sep 2026 14:08:15 -0400
Subject: [PATCH 3/3] fix(ui,swingset): move the stories and remaining internal
 parts to xstyle

The swingset build type-checks the stories against the Mosaic props, so
`style=` on a part failed CI. Stories now declare their one-off atoms with
`stylex.create` and pass them as `xstyle`.

- `xstyle` is typed as `XStyle`, exactly what `stylex.props` accepts.
  StyleX's `StyleXStyles` rejects real atoms such as the scroll area's
  `::-webkit-scrollbar` rules.
- Lint now flags `{...stylex.props()}` spreads on parts; the eight
  internal sites pass `xstyle` instead.
- Stories import tokens from `tokens.stylex` directly and both StyleX
  passes alias `@clerk/ui/mosaic/*`, since StyleX resolves `defineVars`
  imports itself and needs the `.stylex.ts` file, not the barrel.
---
 .claude/skills/mosaic/references/stylex.md    | 14 +++++---
 eslint.config.mjs                             | 12 +++++++
 packages/swingset/next.config.mjs             |  2 ++
 packages/swingset/postcss.config.mjs          |  1 +
 .../swingset/src/stories/combobox.stories.tsx |  9 ++++--
 .../src/stories/field.component.stories.tsx   | 17 ++++++----
 .../src/stories/icon-frame.stories.tsx        | 17 ++++++----
 .../src/stories/input-group.stories.tsx       | 32 ++++++++++---------
 packages/swingset/src/stories/item.mdx        |  2 +-
 .../swingset/src/stories/item.stories.tsx     | 18 ++++++-----
 .../src/stories/otp.component.stories.tsx     | 19 ++++++-----
 .../src/stories/phone-input.stories.tsx       | 21 ++++++------
 .../src/stories/popover.component.stories.tsx |  9 +++++-
 packages/swingset/src/stories/scroll-area.mdx |  5 +--
 .../src/stories/scroll-area.stories.tsx       | 28 +++++++++-------
 .../swingset/src/stories/section.stories.tsx  | 26 +++++++++++----
 .../components/phone-input/phone-input.tsx    |  2 +-
 .../scroll-area/scroll-area.styles.ts         |  4 +--
 packages/ui/src/mosaic/props.test-d.ts        | 24 +++++++++-----
 packages/ui/src/mosaic/props.ts               | 11 ++++++-
 .../mosaic/user-button/user-button.view.tsx   |  8 ++---
 .../user-profile-account-section.view.tsx     |  4 +--
 ...er-profile-active-devices-section.view.tsx |  2 +-
 .../user-profile-api-keys-panel.view.tsx      |  2 +-
 24 files changed, 186 insertions(+), 103 deletions(-)

diff --git a/.claude/skills/mosaic/references/stylex.md b/.claude/skills/mosaic/references/stylex.md
index d1e6bf20535..47c03e5e9fb 100644
--- a/.claude/skills/mosaic/references/stylex.md
+++ b/.claude/skills/mosaic/references/stylex.md
@@ -608,8 +608,8 @@ function Button({ intent, variant, xstyle, ...rest }: ButtonProps) {
 ### `xstyle`, not `className`/`style`
 
 A Mosaic part has no `className` or `style` prop. `MosaicComponentProps` and
-`MosaicElementProps` (`props.ts`) omit the pair and add `xstyle?: StyleXStyles`,
-so every part inherits the contract by typing its props off one of them. A lint
+`MosaicElementProps` (`props.ts`) omit the pair and add `xstyle?: XStyle`, so
+every part inherits the contract by typing its props off one of them. A lint
 rule in the `packages/ui/mosaic` eslint block names the replacement when either
 attribute shows up on a capitalized element.
 
@@ -634,9 +634,13 @@ render={<Heading />}` clones the title's merged `className`/`style` onto the
   `Heading`, which is why a part passes its `rest` bag through `mergeStyleProps`:
   the helper merges the incoming pair instead of letting it overwrite the part's
   own class. The public prop types stay closed; only the merge is tolerant.
-- `xstyle` is typed as the unconstrained `StyleXStyles`. Narrow it per part
-  (`StyleXStyles<{ marginBlockStart?: string }>`) only once a part needs to fence
-  what a caller may override.
+- `xstyle` is typed as `XStyle`: whatever `stylex.props(...)` accepts, since that
+  is where the part passes it on. StyleX's narrower `StyleXStyles` only admits
+  property names it knows and rejects real atoms (the scroll area's
+  `::-webkit-scrollbar` rules), so parts do not use it.
+- `{...stylex.props(atoms)}` on a part is the same pair by another route and the
+  lint rule flags it too. Pass the atoms as `xstyle`; only native elements spread
+  `stylex.props`.
 
 ### Type every part with `MosaicComponentProps`
 
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 1e43d3a8ccc..325bcc948d7 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -584,6 +584,18 @@ export default tseslint.config([
             "JSXOpeningElement[name.type='JSXMemberExpression'] > JSXAttribute[name.name=/^(className|style)$/]",
           message: 'Mosaic parts take `xstyle` (StyleX atoms) instead of `className`/`style`.',
         },
+        // `{...stylex.props(x)}` is the same pair by another route; the types miss it because a
+        // spread's optional keys skip excess-property checks.
+        {
+          selector:
+            "JSXOpeningElement[name.type='JSXIdentifier'][name.name=/^[A-Z]/] > JSXSpreadAttribute > CallExpression[callee.object.name='stylex'][callee.property.name='props']",
+          message: 'Mosaic parts take the atoms as `xstyle`, not a `stylex.props(...)` spread.',
+        },
+        {
+          selector:
+            "JSXOpeningElement[name.type='JSXMemberExpression'] > JSXSpreadAttribute > CallExpression[callee.object.name='stylex'][callee.property.name='props']",
+          message: 'Mosaic parts take the atoms as `xstyle`, not a `stylex.props(...)` spread.',
+        },
       ],
     },
   },
diff --git a/packages/swingset/next.config.mjs b/packages/swingset/next.config.mjs
index a9c62bc3fb7..e78d500f965 100644
--- a/packages/swingset/next.config.mjs
+++ b/packages/swingset/next.config.mjs
@@ -78,6 +78,8 @@ const nextConfig = {
         dev: isDev,
         runtimeInjection: isDev,
         unstable_moduleResolution: { type: 'commonJS', rootDir: resolve(__dirname, '../ui') },
+        // Stories reach `tokens.stylex.ts` through the same alias; StyleX resolves it itself.
+        aliases: { '@clerk/ui/mosaic/*': [resolve(__dirname, '../ui/src/mosaic/*')] },
         useCSSLayers: true,
         lightningcssOptions: { targets: mosaicLightningCssTargets },
       }),
diff --git a/packages/swingset/postcss.config.mjs b/packages/swingset/postcss.config.mjs
index 6a9d09bc734..c3747ea8547 100644
--- a/packages/swingset/postcss.config.mjs
+++ b/packages/swingset/postcss.config.mjs
@@ -36,6 +36,7 @@ const stylexExtraction = {
             dev: isDev,
             runtimeInjection: false,
             unstable_moduleResolution: { type: 'commonJS', rootDir: uiRoot },
+            aliases: { '@clerk/ui/mosaic/*': [resolve(uiRoot, 'src/mosaic/*')] },
           },
         ],
       ],
diff --git a/packages/swingset/src/stories/combobox.stories.tsx b/packages/swingset/src/stories/combobox.stories.tsx
index b6717050cb6..353272ee350 100644
--- a/packages/swingset/src/stories/combobox.stories.tsx
+++ b/packages/swingset/src/stories/combobox.stories.tsx
@@ -5,9 +5,14 @@ import { Combobox } from '@clerk/ui/mosaic/components/combobox';
 import { Field } from '@clerk/ui/mosaic/components/field';
 import { Icon } from '@clerk/ui/mosaic/components/icon';
 import { InputGroup } from '@clerk/ui/mosaic/components/input-group';
+import * as stylex from '@stylexjs/stylex';
 
 import type { StoryMeta } from '@/lib/types';
 
+const styles = stylex.create({
+  fieldWidth: { width: 320 },
+});
+
 export { default as __source } from './combobox.stories?raw';
 
 export const meta: StoryMeta = {
@@ -22,7 +27,7 @@ export function Default() {
 
   return (
     <Combobox.Root>
-      <Field.Root style={{ width: 320 }}>
+      <Field.Root xstyle={styles.fieldWidth}>
         <Field.Label>Fruit</Field.Label>
         <InputGroup.Root>
           <Combobox.Input placeholder='Search fruit…' />
@@ -67,7 +72,7 @@ export function Scrolling() {
 
   return (
     <Combobox.Root>
-      <Field.Root style={{ width: 320 }}>
+      <Field.Root xstyle={styles.fieldWidth}>
         <Field.Label>Fruit</Field.Label>
         <InputGroup.Root>
           <Combobox.Input placeholder='Search fruit…' />
diff --git a/packages/swingset/src/stories/field.component.stories.tsx b/packages/swingset/src/stories/field.component.stories.tsx
index f1e3f7a798d..069d9a5284d 100644
--- a/packages/swingset/src/stories/field.component.stories.tsx
+++ b/packages/swingset/src/stories/field.component.stories.tsx
@@ -1,5 +1,6 @@
 import { Field } from '@clerk/ui/mosaic/components/field';
 import { Input } from '@clerk/ui/mosaic/components/input';
+import * as stylex from '@stylexjs/stylex';
 
 import type { StoryMeta } from '@/lib/types';
 
@@ -14,15 +15,17 @@ export const meta: StoryMeta = {
   source: 'packages/ui/src/mosaic/components/field/field.tsx',
 };
 
-const stackStyles = {
-  display: 'grid',
-  gap: 8,
-  maxWidth: 384,
-} as const;
+const styles = stylex.create({
+  stack: {
+    display: 'grid',
+    gap: 8,
+    maxWidth: 384,
+  },
+});
 
 export function Default() {
   return (
-    <Field.Root style={stackStyles}>
+    <Field.Root xstyle={styles.stack}>
       <Field.Label>Email address</Field.Label>
       <Input
         name='email'
@@ -36,7 +39,7 @@ export function Default() {
 
 export function VisuallyHiddenLabel() {
   return (
-    <Field.Root style={stackStyles}>
+    <Field.Root xstyle={styles.stack}>
       <Field.Label visuallyHidden>Search members</Field.Label>
       <Input
         name='search'
diff --git a/packages/swingset/src/stories/icon-frame.stories.tsx b/packages/swingset/src/stories/icon-frame.stories.tsx
index 376070f31e7..2242150d5fe 100644
--- a/packages/swingset/src/stories/icon-frame.stories.tsx
+++ b/packages/swingset/src/stories/icon-frame.stories.tsx
@@ -1,11 +1,19 @@
 import type { IconFrameProps } from '@clerk/ui/mosaic/components/icon';
 import { Icon, IconFrame } from '@clerk/ui/mosaic/components/icon';
-import { colorVars, space } from '@clerk/ui/mosaic/styles';
+import { colorVars, space } from '@clerk/ui/mosaic/tokens.stylex';
+import * as stylex from '@stylexjs/stylex';
 
 import type { StoryMeta } from '@/lib/types';
 
 export { default as __source } from './icon-frame.stories?raw';
 
+const styles = stylex.create({
+  customSurface: {
+    backgroundColor: colorVars['--cl-color-primary'],
+    color: colorVars['--cl-color-primary-foreground'],
+  },
+});
+
 const providerIconUrl = (provider: string) => `https://img.clerk.com/static/${provider}.svg`;
 
 function ProviderLogo({ provider }: { provider: string }) {
@@ -111,12 +119,7 @@ export function Treatments() {
 
 export function CustomSurface() {
   return (
-    <IconFrame
-      style={{
-        backgroundColor: colorVars['--cl-color-primary'],
-        color: colorVars['--cl-color-primary-foreground'],
-      }}
-    >
+    <IconFrame xstyle={styles.customSurface}>
       <Icon
         name='check'
         size='lg'
diff --git a/packages/swingset/src/stories/input-group.stories.tsx b/packages/swingset/src/stories/input-group.stories.tsx
index aef8af82eb6..62e263cb80a 100644
--- a/packages/swingset/src/stories/input-group.stories.tsx
+++ b/packages/swingset/src/stories/input-group.stories.tsx
@@ -3,7 +3,8 @@ import { Field } from '@clerk/ui/mosaic/components/field';
 import { Icon } from '@clerk/ui/mosaic/components/icon';
 import type { InputGroupRootProps } from '@clerk/ui/mosaic/components/input-group';
 import { InputGroup } from '@clerk/ui/mosaic/components/input-group';
-import { colorVars } from '@clerk/ui/mosaic/styles';
+import { colorVars } from '@clerk/ui/mosaic/tokens.stylex';
+import * as stylex from '@stylexjs/stylex';
 import { useState } from 'react';
 
 import type { StoryMeta } from '@/lib/types';
@@ -25,6 +26,15 @@ export const meta: StoryMeta = {
   },
 };
 
+const styles = stylex.create({
+  fieldWidth: {
+    width: 320,
+  },
+  tintedAddon: {
+    backgroundColor: `color-mix(in srgb, ${colorVars['--cl-color-neutral']} 8%, transparent)`,
+  },
+});
+
 function knobsAsProps(props: Record<string, unknown>) {
   return props as unknown as InputGroupRootProps;
 }
@@ -34,7 +44,7 @@ export function Default(props: Record<string, unknown>) {
   const groupProps = knobsAsProps(props);
 
   return (
-    <Field.Root style={{ width: 320 }}>
+    <Field.Root xstyle={styles.fieldWidth}>
       <Field.Label>Password</Field.Label>
       <InputGroup.Root {...groupProps}>
         <InputGroup.Input
@@ -78,20 +88,12 @@ export function Sizes(props: Record<string, unknown>) {
 
 export function TextAddons(props: Record<string, unknown>) {
   return (
-    <Field.Root style={{ width: 320 }}>
+    <Field.Root xstyle={styles.fieldWidth}>
       <Field.Label>Website</Field.Label>
       <InputGroup.Root {...knobsAsProps(props)}>
-        <InputGroup.Start
-          style={{ backgroundColor: `color-mix(in srgb, ${colorVars['--cl-color-neutral']} 8%, transparent)` }}
-        >
-          https://
-        </InputGroup.Start>
+        <InputGroup.Start xstyle={styles.tintedAddon}>https://</InputGroup.Start>
         <InputGroup.Input placeholder='example' />
-        <InputGroup.End
-          style={{ backgroundColor: `color-mix(in srgb, ${colorVars['--cl-color-neutral']} 8%, transparent)` }}
-        >
-          .com
-        </InputGroup.End>
+        <InputGroup.End xstyle={styles.tintedAddon}>.com</InputGroup.End>
       </InputGroup.Root>
     </Field.Root>
   );
@@ -101,7 +103,7 @@ export function Disabled(props: Record<string, unknown>) {
   return (
     <Field.Root
       disabled
-      style={{ width: 320 }}
+      xstyle={styles.fieldWidth}
     >
       <Field.Label>Email address</Field.Label>
       <InputGroup.Root {...knobsAsProps(props)}>
@@ -119,7 +121,7 @@ export function Invalid(props: Record<string, unknown>) {
   return (
     <Field.Root
       invalid
-      style={{ width: 320 }}
+      xstyle={styles.fieldWidth}
     >
       <Field.Label>Password</Field.Label>
       <InputGroup.Root {...groupProps}>
diff --git a/packages/swingset/src/stories/item.mdx b/packages/swingset/src/stories/item.mdx
index 2cf5d28c847..3dc335f555f 100644
--- a/packages/swingset/src/stories/item.mdx
+++ b/packages/swingset/src/stories/item.mdx
@@ -74,7 +74,7 @@ import * as stylex from '@stylexjs/stylex';
   {...stylex.props(scrollAreaRoot)}
   style={{ height: 260 }}
 >
-  <Item.Group {...stylex.props(...scrollAreaViewport())}>{organizations}</Item.Group>
+  <Item.Group xstyle={scrollAreaViewport()}>{organizations}</Item.Group>
 </div>;
 ```
 
diff --git a/packages/swingset/src/stories/item.stories.tsx b/packages/swingset/src/stories/item.stories.tsx
index ed2a356c06e..6284e16da8e 100644
--- a/packages/swingset/src/stories/item.stories.tsx
+++ b/packages/swingset/src/stories/item.stories.tsx
@@ -3,7 +3,7 @@ import { Button } from '@clerk/ui/mosaic/components/button';
 import { Icon } from '@clerk/ui/mosaic/components/icon';
 import { Item } from '@clerk/ui/mosaic/components/item';
 import { scrollAreaRoot, scrollAreaViewport } from '@clerk/ui/mosaic/components/scroll-area';
-import { radiusVars, space } from '@clerk/ui/mosaic/styles';
+import { radiusVars, space } from '@clerk/ui/mosaic/tokens.stylex';
 import * as stylex from '@stylexjs/stylex';
 
 import type { StoryMeta } from '@/lib/types';
@@ -12,6 +12,12 @@ import type { StoryMeta } from '@/lib/types';
 // renders a code footer with its function's source. See `StoryModule.__source`.
 export { default as __source } from './item.stories?raw';
 
+const styles = stylex.create({
+  iconWidth: {
+    width: space['7'],
+  },
+});
+
 export const meta: StoryMeta = {
   group: 'Components',
   status: 'stable',
@@ -162,9 +168,7 @@ export function Group() {
           <Icon
             name='check'
             size='md'
-            style={{
-              width: space['7'],
-            }}
+            xstyle={styles.iconWidth}
           />
         </Item.Root>
         <Item.Root
@@ -356,9 +360,7 @@ export function OutlineGroup() {
           <Icon
             name='chevron-right'
             size='md'
-            style={{
-              width: space['7'],
-            }}
+            xstyle={styles.iconWidth}
           />
         </Item.Root>
       </Item.Group>
@@ -395,7 +397,7 @@ export function Scrolling() {
       className={`${root.className} border-border w-full border`}
       style={{ height: 200, borderRadius: radiusVars['--cl-radius-sm'] }}
     >
-      <Item.Group {...stylex.props(...scrollAreaViewport())}>
+      <Item.Group xstyle={scrollAreaViewport()}>
         {organizations.map(name => (
           <Item.Root
             key={name}
diff --git a/packages/swingset/src/stories/otp.component.stories.tsx b/packages/swingset/src/stories/otp.component.stories.tsx
index 4984c2376cb..2b1ec5ba2d6 100644
--- a/packages/swingset/src/stories/otp.component.stories.tsx
+++ b/packages/swingset/src/stories/otp.component.stories.tsx
@@ -1,6 +1,7 @@
 import { Field } from '@clerk/ui/mosaic/components/field';
 import type { OtpProps } from '@clerk/ui/mosaic/components/otp';
 import { Otp } from '@clerk/ui/mosaic/components/otp';
+import * as stylex from '@stylexjs/stylex';
 
 import type { StoryMeta } from '@/lib/types';
 
@@ -23,11 +24,13 @@ export const meta: StoryMeta = {
   },
 };
 
-const stackStyles = {
-  display: 'grid',
-  gap: 8,
-  justifyItems: 'start',
-} as const;
+const styles = stylex.create({
+  stack: {
+    display: 'grid',
+    gap: 8,
+    justifyItems: 'start',
+  },
+});
 
 function knobsAsProps(props: Record<string, unknown>) {
   return props as unknown as OtpProps;
@@ -46,7 +49,7 @@ export function WithField() {
   return (
     <Field.Root
       required
-      style={stackStyles}
+      xstyle={styles.stack}
     >
       <Field.Label>Verification code</Field.Label>
       <Otp name='code' />
@@ -57,7 +60,7 @@ export function WithField() {
 
 export function Success() {
   return (
-    <Field.Root style={stackStyles}>
+    <Field.Root xstyle={styles.stack}>
       <Otp
         status='success'
         defaultValue='123456'
@@ -72,7 +75,7 @@ export function Error() {
   return (
     <Field.Root
       invalid
-      style={stackStyles}
+      xstyle={styles.stack}
     >
       <Otp
         defaultValue='123456'
diff --git a/packages/swingset/src/stories/phone-input.stories.tsx b/packages/swingset/src/stories/phone-input.stories.tsx
index 8ca71a9dd25..4eb44f5f828 100644
--- a/packages/swingset/src/stories/phone-input.stories.tsx
+++ b/packages/swingset/src/stories/phone-input.stories.tsx
@@ -3,6 +3,7 @@
 import { Field } from '@clerk/ui/mosaic/components/field';
 import type { PhoneInputProps } from '@clerk/ui/mosaic/components/phone-input';
 import { PhoneInput } from '@clerk/ui/mosaic/components/phone-input';
+import * as stylex from '@stylexjs/stylex';
 
 import type { StoryMeta } from '@/lib/types';
 
@@ -25,11 +26,13 @@ export const meta: StoryMeta = {
   },
 };
 
-const stackStyles = {
-  display: 'grid',
-  gap: 8,
-  width: 320,
-} as const;
+const styles = stylex.create({
+  stack: {
+    display: 'grid',
+    gap: 8,
+    width: 320,
+  },
+});
 
 function knobsAsProps(props: Record<string, unknown>) {
   return props as unknown as PhoneInputProps;
@@ -37,7 +40,7 @@ function knobsAsProps(props: Record<string, unknown>) {
 
 export function Default(props: Record<string, unknown>) {
   return (
-    <Field.Root style={stackStyles}>
+    <Field.Root xstyle={styles.stack}>
       <Field.Label>Phone number</Field.Label>
       <PhoneInput
         {...knobsAsProps(props)}
@@ -73,7 +76,7 @@ export function Sizes() {
 
 export function Prefilled() {
   return (
-    <Field.Root style={stackStyles}>
+    <Field.Root xstyle={styles.stack}>
       <Field.Label>Phone number</Field.Label>
       <PhoneInput defaultValue='+306901234567' />
       <Field.Description>Paste an international number to update the detected country.</Field.Description>
@@ -85,7 +88,7 @@ export function Disabled() {
   return (
     <Field.Root
       disabled
-      style={stackStyles}
+      xstyle={styles.stack}
     >
       <Field.Label>Phone number</Field.Label>
       <PhoneInput defaultValue='+12025550123' />
@@ -97,7 +100,7 @@ export function Invalid() {
   return (
     <Field.Root
       invalid
-      style={stackStyles}
+      xstyle={styles.stack}
     >
       <Field.Label>Phone number</Field.Label>
       <PhoneInput defaultValue='+1202' />
diff --git a/packages/swingset/src/stories/popover.component.stories.tsx b/packages/swingset/src/stories/popover.component.stories.tsx
index 4665a3a216f..9decee751a4 100644
--- a/packages/swingset/src/stories/popover.component.stories.tsx
+++ b/packages/swingset/src/stories/popover.component.stories.tsx
@@ -3,6 +3,7 @@ import { Card } from '@clerk/ui/mosaic/components/card';
 import { Heading } from '@clerk/ui/mosaic/components/heading';
 import { Popover } from '@clerk/ui/mosaic/components/popover';
 import { Text } from '@clerk/ui/mosaic/components/text';
+import * as stylex from '@stylexjs/stylex';
 
 import type { StoryMeta } from '@/lib/types';
 
@@ -17,6 +18,12 @@ export const meta: StoryMeta = {
   source: 'packages/ui/src/mosaic/components/popover/popover.tsx',
 };
 
+const styles = stylex.create({
+  cardContentPadding: {
+    paddingBlock: '1rem',
+  },
+});
+
 export function Default() {
   return (
     <Popover.Root>
@@ -48,7 +55,7 @@ const labelledTrigger = (label: string) => <Button variant='outline'>{label}</Bu
 
 const panel = (label: string) => (
   <Card.Root>
-    <Card.Content style={{ paddingBlock: '1rem' }}>
+    <Card.Content xstyle={styles.cardContentPadding}>
       <Text>{label}</Text>
     </Card.Content>
   </Card.Root>
diff --git a/packages/swingset/src/stories/scroll-area.mdx b/packages/swingset/src/stories/scroll-area.mdx
index 4056873218d..61101e5a27a 100644
--- a/packages/swingset/src/stories/scroll-area.mdx
+++ b/packages/swingset/src/stories/scroll-area.mdx
@@ -17,7 +17,8 @@ slot class, which stays the hook a theme targets.
 
 ## Usage
 
-`scrollAreaViewport()` returns an array, hence the `...` spread.
+`scrollAreaViewport()` returns an array of atoms. A Mosaic part takes it as `xstyle`; a native element
+spreads it into `stylex.props`.
 
 ```tsx
 import { scrollAreaRoot, scrollAreaViewport } from '@clerk/ui/mosaic/components/scroll-area';
@@ -27,7 +28,7 @@ import * as stylex from '@stylexjs/stylex';
   {...stylex.props(scrollAreaRoot)}
   style={{ height: 260 }}
 >
-  <Item.Group {...stylex.props(...scrollAreaViewport())}>{organizations}</Item.Group>
+  <Item.Group xstyle={scrollAreaViewport()}>{organizations}</Item.Group>
 </div>;
 ```
 
diff --git a/packages/swingset/src/stories/scroll-area.stories.tsx b/packages/swingset/src/stories/scroll-area.stories.tsx
index 8226bdaf329..cca746f5f27 100644
--- a/packages/swingset/src/stories/scroll-area.stories.tsx
+++ b/packages/swingset/src/stories/scroll-area.stories.tsx
@@ -2,7 +2,7 @@ import { Avatar } from '@clerk/ui/mosaic/components/avatar';
 import { Button } from '@clerk/ui/mosaic/components/button';
 import { Item } from '@clerk/ui/mosaic/components/item';
 import { scrollAreaRoot, scrollAreaViewport } from '@clerk/ui/mosaic/components/scroll-area';
-import { radiusVars, space } from '@clerk/ui/mosaic/styles';
+import { radiusVars, space } from '@clerk/ui/mosaic/tokens.stylex';
 import * as stylex from '@stylexjs/stylex';
 import * as React from 'react';
 
@@ -12,6 +12,15 @@ import type { StoryMeta } from '@/lib/types';
 // renders a code footer with its function's source. See `StoryModule.__source`.
 export { default as __source } from './scroll-area.stories?raw';
 
+const styles = stylex.create({
+  separatorMargin: {
+    marginBlock: space['2'],
+  },
+  noMask: {
+    maskImage: 'none',
+  },
+});
+
 export const meta: StoryMeta = {
   group: 'Styles',
   title: 'Scroll Area',
@@ -70,10 +79,10 @@ export function Default() {
       className={`${root.className} border-border w-full border`}
       style={{ height: 260, borderRadius: radiusVars['--cl-radius-sm'] }}
     >
-      <Item.Group {...stylex.props(...scrollAreaViewport())}>
+      <Item.Group xstyle={scrollAreaViewport()}>
         {accounts.map(({ email, organizations }, index) => (
           <React.Fragment key={email}>
-            {index > 0 ? <Item.Separator style={{ marginBlock: space['2'] }} /> : null}
+            {index > 0 ? <Item.Separator xstyle={styles.separatorMargin} /> : null}
             <Item.Root size='xs'>
               <Item.Content>
                 <Item.Description>{email}</Item.Description>
@@ -102,7 +111,7 @@ export function NotScrollable() {
       className={`${root.className} border-border w-full border`}
       style={{ height: 260, borderRadius: radiusVars['--cl-radius-sm'] }}
     >
-      <Item.Group {...stylex.props(...scrollAreaViewport())}>
+      <Item.Group xstyle={scrollAreaViewport()}>
         {accounts[0].organizations.map(name => (
           <OrganizationRow
             key={name}
@@ -147,7 +156,7 @@ export function Gutter() {
               className={`${root.className} border-border border`}
               style={{ height: 140, borderRadius: radiusVars['--cl-radius-sm'] }}
             >
-              <Item.Group {...stylex.props(...scrollAreaViewport(gutter))}>
+              <Item.Group xstyle={scrollAreaViewport(gutter)}>
                 {names.map(name => (
                   <Item.Root
                     key={name}
@@ -218,7 +227,7 @@ export function HoverReveal() {
         '--cl-scrollbar-thumb-idle': 'oklch(from var(--cl-scrollbar-thumb) l c h / 0)',
       }}
     >
-      <Item.Group {...stylex.props(...scrollAreaViewport())}>
+      <Item.Group xstyle={scrollAreaViewport()}>
         {manyRows.map(name => (
           <OrganizationRow
             key={name}
@@ -259,7 +268,7 @@ export function ThemedScrollbar() {
           '--cl-scrollbar-thumb-active': 'oklch(0.55 0.25 295)',
         }}
       >
-        <Item.Group {...stylex.props(...scrollAreaViewport())}>
+        <Item.Group xstyle={scrollAreaViewport()}>
           {manyRows.map(name => (
             <OrganizationRow
               key={name}
@@ -318,10 +327,7 @@ export function ShadowIndicators() {
         className={`${root.className} demo-scroll-shadows border-border w-full overflow-hidden border`}
         style={{ height: 260, borderRadius: radiusVars['--cl-radius-sm'] }}
       >
-        <Item.Group
-          {...stylex.props(...scrollAreaViewport())}
-          style={{ maskImage: 'none' }}
-        >
+        <Item.Group xstyle={[scrollAreaViewport(), styles.noMask]}>
           {manyRows.map(name => (
             <OrganizationRow
               key={name}
diff --git a/packages/swingset/src/stories/section.stories.tsx b/packages/swingset/src/stories/section.stories.tsx
index ce11fe5c51a..d1d2cbe3076 100644
--- a/packages/swingset/src/stories/section.stories.tsx
+++ b/packages/swingset/src/stories/section.stories.tsx
@@ -3,12 +3,24 @@ import { Badge } from '@clerk/ui/mosaic/components/badge';
 import { Button } from '@clerk/ui/mosaic/components/button';
 import { Icon, IconFrame } from '@clerk/ui/mosaic/components/icon';
 import { Section } from '@clerk/ui/mosaic/components/section';
-import { space } from '@clerk/ui/mosaic/styles';
+import { space } from '@clerk/ui/mosaic/tokens.stylex';
+import * as stylex from '@stylexjs/stylex';
 
 import type { StoryMeta } from '@/lib/types';
 
 export { default as __source } from './section.stories?raw';
 
+const styles = stylex.create({
+  rootMax: {
+    maxWidth: 560,
+  },
+  descriptionFlex: {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 4,
+  },
+});
+
 const providerIconUrl = (provider: string) => `https://img.clerk.com/static/${provider}.svg`;
 
 function ProviderMedia({ provider }: { provider: string }) {
@@ -34,7 +46,7 @@ export const meta: StoryMeta = {
 
 export function Default() {
   return (
-    <Section.Root style={{ maxWidth: 560 }}>
+    <Section.Root xstyle={styles.rootMax}>
       <Section.Title>Profile</Section.Title>
       <Section.Group>
         <Section.Row>
@@ -124,7 +136,7 @@ export function Default() {
 
 export function MultipleEmailAndPhoneNumbers() {
   return (
-    <Section.Root style={{ maxWidth: 560 }}>
+    <Section.Root xstyle={styles.rootMax}>
       <Section.Title>Profile</Section.Title>
       <Section.Group>
         <Section.Row>
@@ -208,7 +220,7 @@ export function MultipleEmailAndPhoneNumbers() {
           <Section.Items>
             <Section.Item>
               <Section.Content>
-                <Section.Description style={{ alignItems: 'center', display: 'flex', gap: 4 }}>
+                <Section.Description xstyle={styles.descriptionFlex}>
                   item1@clerk.dev
                   <Badge color='neutral'>Primary</Badge>
                 </Section.Description>
@@ -262,7 +274,7 @@ export function MultipleEmailAndPhoneNumbers() {
           <Section.Items>
             <Section.Item>
               <Section.Content>
-                <Section.Description style={{ alignItems: 'center', display: 'flex', gap: 4 }}>
+                <Section.Description xstyle={styles.descriptionFlex}>
                   +1 801-888-8181
                   <Badge color='neutral'>Primary</Badge>
                 </Section.Description>
@@ -288,7 +300,7 @@ export function MultipleEmailAndPhoneNumbers() {
 
 export function ConnectedAccounts() {
   return (
-    <Section.Root style={{ maxWidth: 560 }}>
+    <Section.Root xstyle={styles.rootMax}>
       <Section.Title>Connected accounts</Section.Title>
       <Section.Group>
         <Section.Row>
@@ -340,7 +352,7 @@ export function ConnectedAccounts() {
 
 export function IconFrameMedia() {
   return (
-    <Section.Root style={{ maxWidth: 560 }}>
+    <Section.Root xstyle={styles.rootMax}>
       <Section.Title>Team</Section.Title>
       <Section.Group>
         <Section.Row>
diff --git a/packages/ui/src/mosaic/components/phone-input/phone-input.tsx b/packages/ui/src/mosaic/components/phone-input/phone-input.tsx
index 62168a3f13c..2da0ace3210 100644
--- a/packages/ui/src/mosaic/components/phone-input/phone-input.tsx
+++ b/packages/ui/src/mosaic/components/phone-input/phone-input.tsx
@@ -246,7 +246,7 @@ export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(fu
                 }
               }}
             >
-              <Field.Root {...stylex.props(styles.countrySearchContainer)}>
+              <Field.Root xstyle={styles.countrySearchContainer}>
                 <InputGroup.Root
                   size='md'
                   {...themeProps('phone-input-country-search')}
diff --git a/packages/ui/src/mosaic/components/scroll-area/scroll-area.styles.ts b/packages/ui/src/mosaic/components/scroll-area/scroll-area.styles.ts
index 272b6e88d0e..91891adae0d 100644
--- a/packages/ui/src/mosaic/components/scroll-area/scroll-area.styles.ts
+++ b/packages/ui/src/mosaic/components/scroll-area/scroll-area.styles.ts
@@ -53,7 +53,7 @@ const maskImage = `linear-gradient(to bottom, transparent 0, #000 calc(${progres
 
 // Split by concern rather than one object per slot: the sort-keys rule reorders within an
 // object, so a large one ends up interleaving unrelated properties and stranding the comments
-// that explain them. `scrollAreaViewport()` recomposes them, so callers spread one thing.
+// that explain them. `scrollAreaViewport()` recomposes them, so callers pass one thing.
 const styles = stylex.create({
   root: {
     display: 'flex',
@@ -282,7 +282,7 @@ export type ScrollAreaGutter = keyof typeof gutters;
  *
  * ```tsx
  * <div {...stylex.props(scrollAreaRoot)}>
- *   <Item.Group {...stylex.props(...scrollAreaViewport())}>{rows}</Item.Group>
+ *   <Item.Group xstyle={scrollAreaViewport()}>{rows}</Item.Group>
  * </div>
  * ```
  *
diff --git a/packages/ui/src/mosaic/props.test-d.ts b/packages/ui/src/mosaic/props.test-d.ts
index 6e61a73ade6..9c3c6a7819c 100644
--- a/packages/ui/src/mosaic/props.test-d.ts
+++ b/packages/ui/src/mosaic/props.test-d.ts
@@ -1,19 +1,28 @@
-import type * as stylex from '@stylexjs/stylex';
+import * as stylex from '@stylexjs/stylex';
 import type React from 'react';
 import { describe, expectTypeOf, test } from 'vitest';
 
-import type { MosaicComponentProps, MosaicElementProps } from './props';
+import { scrollAreaViewport } from './components/scroll-area/scroll-area.styles';
+import type { MosaicComponentProps, MosaicElementProps, XStyle } from './props';
 import { mergeStyleProps, themeProps } from './props';
 
 // A Mosaic part is styled from inside `packages/ui` through `xstyle`, and from outside through
 // the `.cl-<slot>` / `data-<axis>` / `--cl-*` CSS contract. Neither path is `className` or
 // `style`, so the canonical prop types drop both; every part inherits the omission from here.
 
+describe('XStyle', () => {
+  // StyleX's own `StyleXStyles` only admits property names it knows, which rejects real atoms such as
+  // the scroll area's `::-webkit-scrollbar` rules. `xstyle` is spread into `stylex.props`, so it takes
+  // exactly what that accepts.
+  test('accepts every atom stylex.props does', () => {
+    stylex.props(xstyle);
+    expectTypeOf(scrollAreaViewport()).toExtend<XStyle>();
+  });
+});
+
 describe('MosaicComponentProps', () => {
   test('accepts xstyle', () => {
-    expectTypeOf<MosaicComponentProps<'div'>>()
-      .toHaveProperty('xstyle')
-      .toEqualTypeOf<stylex.StyleXStyles | undefined>();
+    expectTypeOf<MosaicComponentProps<'div'>>().toHaveProperty('xstyle').toEqualTypeOf<XStyle | undefined>();
   });
 
   test('rejects className and style', () => {
@@ -30,9 +39,7 @@ describe('MosaicComponentProps', () => {
 
 describe('MosaicElementProps', () => {
   test('accepts xstyle', () => {
-    expectTypeOf<MosaicElementProps<'button'>>()
-      .toHaveProperty('xstyle')
-      .toEqualTypeOf<stylex.StyleXStyles | undefined>();
+    expectTypeOf<MosaicElementProps<'button'>>().toHaveProperty('xstyle').toEqualTypeOf<XStyle | undefined>();
   });
 
   test('rejects className and style', () => {
@@ -45,6 +52,7 @@ describe('MosaicElementProps', () => {
   });
 });
 
+declare const xstyle: XStyle;
 declare const optionRest: Omit<MosaicComponentProps<'div'>, 'xstyle'> & { value: string };
 
 describe('mergeStyleProps', () => {
diff --git a/packages/ui/src/mosaic/props.ts b/packages/ui/src/mosaic/props.ts
index b9e25186f71..858ea73f62b 100644
--- a/packages/ui/src/mosaic/props.ts
+++ b/packages/ui/src/mosaic/props.ts
@@ -2,6 +2,15 @@ import type { ComponentProps } from '@clerk/headless/utils';
 import type * as stylex from '@stylexjs/stylex';
 import type React from 'react';
 
+/**
+ * What `xstyle` accepts: exactly what `stylex.props(...)` does, since that is where a part
+ * passes it on. StyleX's narrower `StyleXStyles` only admits property names it knows, which
+ * rejects real atoms such as the scroll area's `::-webkit-scrollbar` rules.
+ */
+export type XStyle = stylex.StyleXArray<
+  null | undefined | boolean | stylex.CompiledStyles | Readonly<[stylex.CompiledStyles, stylex.InlineStyles]>
+>;
+
 /**
  * The one styling prop a Mosaic part takes from the code that renders it: StyleX atoms
  * for the part's root element, composed last in its `stylex.props(...)` call so they win.
@@ -11,7 +20,7 @@ import type React from 'react';
  * `data-<axis>` attrs, and `--cl-*` vars in CSS. Neither path needs raw CSS on the part.
  */
 export interface MosaicStyleProps {
-  xstyle?: stylex.StyleXStyles;
+  xstyle?: XStyle;
 }
 
 /**
diff --git a/packages/ui/src/mosaic/user-button/user-button.view.tsx b/packages/ui/src/mosaic/user-button/user-button.view.tsx
index 6843ad0a307..0be85e39744 100644
--- a/packages/ui/src/mosaic/user-button/user-button.view.tsx
+++ b/packages/ui/src/mosaic/user-button/user-button.view.tsx
@@ -188,7 +188,7 @@ const rowButton = (disabled = false) => (
 
 /** A row's trailing column, sized and centred so every state lands on the `⋯` button's centre line. */
 function Trailing({ children }: { children: ReactNode }) {
-  return <Item.Actions {...stylex.props(styles.trailing)}>{children}</Item.Actions>;
+  return <Item.Actions xstyle={styles.trailing}>{children}</Item.Actions>;
 }
 
 interface SwitcherRowProps {
@@ -886,7 +886,7 @@ function OrganizationSection() {
       {/* `auto` rather than `stable`: a reserved gutter insets the rows whether or not the list
           overflows, so short lists would sit their avatars and icons off the edge the header and
           footer align to. */}
-      <Item.Group {...stylex.props(...scrollAreaViewport('auto'), styles.scroll)}>
+      <Item.Group xstyle={[scrollAreaViewport('auto'), styles.scroll]}>
         {showOrganizationsHeading ? <OrganizationsHeading /> : null}
         {/* Memberships, invitations and suggestions are three separate requests landing at three
             different moments. Rendering each as it arrives walks the list in in stages, so the
@@ -1075,12 +1075,12 @@ export function UserButtonTrigger({
   return (
     <Popover.Trigger
       aria-label={fill(m.trigger.open, { name })}
-      {...stylex.props(
+      xstyle={[
         focusOutline.visible,
         styles.trigger,
         renderTriggerLabel ? styles.triggerLabelled : null,
         triggerShapes[shape],
-      )}
+      ]}
     >
       <RowAvatar
         name={name}
diff --git a/packages/ui/src/mosaic/user-profile/user-profile-account-section.view.tsx b/packages/ui/src/mosaic/user-profile/user-profile-account-section.view.tsx
index aeedf789db6..67595d40b69 100644
--- a/packages/ui/src/mosaic/user-profile/user-profile-account-section.view.tsx
+++ b/packages/ui/src/mosaic/user-profile/user-profile-account-section.view.tsx
@@ -322,7 +322,7 @@ function SingleContactRow({ kind, label, items, onAdd, onManage }: ContactSectio
         <Section.Content>
           <Section.Label>{label}</Section.Label>
           {item ? (
-            <Section.Description {...stylex.props(styles.contactValue)}>
+            <Section.Description xstyle={styles.contactValue}>
               <span>{item.value}</span>
               {item.isDefault ? <Badge color='neutral'>{m.primary}</Badge> : null}
             </Section.Description>
@@ -411,7 +411,7 @@ function ContactRow({ kind, label, items, onAdd, onManage, onVerify, onSetPrimar
             return (
               <Section.Item key={item.id}>
                 <Section.Content>
-                  <Section.Description {...stylex.props(styles.contactValue)}>
+                  <Section.Description xstyle={styles.contactValue}>
                     <span>{item.value}</span>
                     {item.isDefault ? <Badge color='neutral'>{m.primary}</Badge> : null}
                   </Section.Description>
diff --git a/packages/ui/src/mosaic/user-profile/user-profile-active-devices-section.view.tsx b/packages/ui/src/mosaic/user-profile/user-profile-active-devices-section.view.tsx
index 176bcaa3ca8..6aeef4b0f63 100644
--- a/packages/ui/src/mosaic/user-profile/user-profile-active-devices-section.view.tsx
+++ b/packages/ui/src/mosaic/user-profile/user-profile-active-devices-section.view.tsx
@@ -118,7 +118,7 @@ function DeviceItem({
       <Section.Content>
         <Section.Label>{device.name}</Section.Label>
         {device.isCurrent || device.description ? (
-          <Section.Description {...stylex.props(styles.descriptionLine)}>
+          <Section.Description xstyle={styles.descriptionLine}>
             {device.isCurrent ? <span {...stylex.props(styles.currentDevice)}>This device</span> : null}
             {device.isCurrent && device.description ? <span>·</span> : null}
             {device.description ? <span>{device.description}</span> : null}
diff --git a/packages/ui/src/mosaic/user-profile/user-profile-api-keys-panel.view.tsx b/packages/ui/src/mosaic/user-profile/user-profile-api-keys-panel.view.tsx
index 055d75ea7a7..73b648b812f 100644
--- a/packages/ui/src/mosaic/user-profile/user-profile-api-keys-panel.view.tsx
+++ b/packages/ui/src/mosaic/user-profile/user-profile-api-keys-panel.view.tsx
@@ -81,7 +81,7 @@ export function UserProfileApiKeysPanelView({
             size='sm'
             type='search'
             value={searchValue}
-            {...stylex.props(styles.search)}
+            xstyle={styles.search}
             onChange={event => onSearchChange(event.currentTarget.value)}
           />
         </div>