Merge branch 'main' into austin/user-profile-03-avatar-button

Author: austincalvelage

.changeset/clear-mosaic-user-button-layout.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/mosaic-card-owns-branding.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/mosaic-item-title-to-label.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/mosaic-menu-dark-mode-outline.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/settings-block.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/DocsViewer.tsx

@@ -42,6 +42,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
     icon: dynamic(() => import('../stories/icon.mdx')),
     menu: dynamic(() => import('../stories/menu.component.mdx')),
     popover: dynamic(() => import('../stories/popover.component.mdx')),
+    settings: dynamic(() => import('../stories/settings.mdx')),
     tabs: dynamic(() => import('../stories/tabs.component.mdx')),
     text: dynamic(() => import('../stories/text.mdx')),
     field: dynamic(() => import('../stories/field.component.mdx')),

packages/swingset/src/lib/registry.ts

@@ -107,6 +107,13 @@ import {
   ThemedScrollbar as ScrollAreaThemedScrollbar,
 } from '../stories/scroll-area.stories';
 import { meta as selectMeta } from '../stories/select.stories';
+import {
+  ConnectedAccounts as SettingsConnectedAccounts,
+  Default as SettingsDefault,
+  Destructive as SettingsDestructive,
+  meta as settingsMeta,
+  MultipleEmailAndPhoneNumbers as SettingsMultipleEmailAndPhoneNumbers,
+} from '../stories/settings.stories';
 import { Default as TabsComponentDefault, meta as tabsComponentMeta } from '../stories/tabs.component.stories';
 import { meta as tabsMeta } from '../stories/tabs.stories';
 import {
@@ -127,6 +134,13 @@ import { toSlug } from './slug';
 import type { StoryModule } from './types';
 
 const destructiveModule: StoryModule = { meta: destructiveMeta, Default: DestructiveDefault };
+const settingsModule: StoryModule = {
+  meta: settingsMeta,
+  Default: SettingsDefault,
+  MultipleEmailAndPhoneNumbers: SettingsMultipleEmailAndPhoneNumbers,
+  ConnectedAccounts: SettingsConnectedAccounts,
+  Destructive: SettingsDestructive,
+};
 const organizationProfileLeaveSectionModule: StoryModule = {
   meta: organizationProfileLeaveSectionMeta,
   Default: OrganizationProfileLeaveSectionDefault,
@@ -283,6 +297,7 @@ export const registry: StoryModule[] = [
   iconModule,
   menuComponentModule,
   popoverComponentModule,
+  settingsModule,
   tabsComponentModule,
   textModule,
   fieldModule,

packages/swingset/src/stories/card.component.stories.tsx

@@ -20,10 +20,12 @@ export const meta: StoryMeta = {
     _variants: {
       alignment: { start: {}, center: {} },
       elevation: { card: {}, flush: {}, overlay: {} },
+      renderBranding: { true: {}, false: {} },
     },
     _defaultVariants: {
       alignment: 'start',
       elevation: 'card',
+      renderBranding: true,
     },
   },
 };

packages/swingset/src/stories/item.mdx

@@ -2,7 +2,7 @@ import * as ItemStories from './item.stories';
 
 # Item
 
-Item is a flexible row for lists of accounts, organizations, and settings in Mosaic. It's composed from parts via dot syntax (`Item.Root`, `Item.Media`, `Item.Content`, `Item.Title`, …). `Item.Root` renders as a `<div>` by default; pass it a `render` prop to make a row an interactive link or button, which adds hover and cursor affordances.
+Item is a flexible row for lists of accounts, organizations, and settings in Mosaic. It's composed from parts via dot syntax (`Item.Root`, `Item.Media`, `Item.Content`, `Item.Label`, …). `Item.Root` renders as a `<div>` by default; pass it a `render` prop to make a row an interactive link or button, which adds hover and cursor affordances.
 
 Set `size` once on `Item.Root` and the row scales as a unit: it fixes the row's height and gap, and `Item.Media` picks the matching column width up from context rather than taking a size of its own.
 
@@ -76,7 +76,7 @@ import { Item } from '@clerk/ui/mosaic/components/item';
       </Avatar.Root>
     </Item.Media>
     <Item.Content>
-      <Item.Title>Test Organization</Item.Title>
+      <Item.Label>Test Organization</Item.Label>
       <Item.Description>Member</Item.Description>
     </Item.Content>
     <Item.Actions>
@@ -86,38 +86,43 @@ import { Item } from '@clerk/ui/mosaic/components/item';
 </Item.Group>;
 ```
 
-Media sizes itself from the row, so give it a child that fills its column — an `Avatar.Root` with `size='fit'`, or an `Icon`. An action row that has no secondary text uses `Item.Label` in place of `Item.Title`:
+Media sizes itself from the row, so give it a child that fills its column — an `Avatar.Root` with `size='fit'`, or an `Icon`. A row whose text _is_ the row, rather than naming a subject, uses `Item.Label` with `variant='secondary'`:
 
 ```tsx
 <Item.Root size='xs' render={({ children, ...props }) => <button type='button' {...props}>{children}</button>}>
   <Item.Media>
     <Icon name='log-out' size='sm' />
   </Item.Media>
   <Item.Content>
-    <Item.Label>Sign out of all accounts</Item.Label>
+    <Item.Label variant='secondary'>Sign out of all accounts</Item.Label>
   </Item.Content>
 </Item.Root>;
 ```
 
 ## Parts
 
-| Part               | Class                 | Description                                                                      |
-| ------------------ | --------------------- | -------------------------------------------------------------------------------- |
-| `Item.Root`        | `cl-item`             | Root row. Renders a `<div>`, or a custom element via `render`.                   |
-| `Item.Media`       | `cl-item-media`       | Square leading column: icon, image, or avatar. Sized by the root's `size`.       |
-| `Item.Content`     | `cl-item-content`     | Vertical stack that grows to fill the row between media and actions.             |
-| `Item.Title`       | `cl-item-title`       | Primary label. Truncates to a single line.                                       |
-| `Item.Description` | `cl-item-description` | Secondary text beneath the title. Truncates to a single line.                    |
-| `Item.Label`       | `cl-item-label`       | Sole label on an action row, in place of a title. Inherits the row's text color. |
-| `Item.Actions`     | `cl-item-actions`     | Trailing controls (buttons, badges).                                             |
-| `Item.Group`       | `cl-item-group`       | Vertical wrapper around a set of rows (layout only, no role).                    |
-| `Item.Separator`   | `cl-item-separator`   | Thin divider (`<hr>`) between rows.                                              |
+| Part               | Class                 | Description                                                                |
+| ------------------ | --------------------- | -------------------------------------------------------------------------- |
+| `Item.Root`        | `cl-item`             | Root row. Renders a `<div>`, or a custom element via `render`.             |
+| `Item.Media`       | `cl-item-media`       | Square leading column: icon, image, or avatar. Sized by the root's `size`. |
+| `Item.Content`     | `cl-item-content`     | Vertical stack that grows to fill the row between media and actions.       |
+| `Item.Label`       | `cl-item-label`       | The row's label. Truncates to a single line.                               |
+| `Item.Description` | `cl-item-description` | Secondary text beneath the label. Truncates to a single line.              |
+| `Item.Actions`     | `cl-item-actions`     | Trailing controls (buttons, badges).                                       |
+| `Item.Group`       | `cl-item-group`       | Vertical wrapper around a set of rows (layout only, no role).              |
+| `Item.Separator`   | `cl-item-separator`   | Thin divider (`<hr>`) between rows.                                        |
 
 Every part accepts a `render` prop for element polymorphism and forwards a ref.
 
 ## Styling
 
-The row carries the text color and, through `--_cl-icon-color`, the strength of any `Icon` inside it: faded at rest, full-strength while hovered. Only interactive rows promote — a static row isn't pointing at anything, so its icon and `Item.Label` hold their resting color. A `Button` in `Item.Actions` sets its own icon color and is unaffected.
+The row carries the text color and, through `--_cl-icon-color`, the strength of any `Icon` inside it: faded at rest, full-strength while hovered. Only interactive rows promote — a static row isn't pointing at anything, so its icon holds its resting color. A `Button` in `Item.Actions` sets its own icon color and is unaffected.
+
+`Item.Label` chooses whether it joins that promotion. `variant='primary'` sets its own color and holds it, so a subject the row names reads at full strength either way. `variant='secondary'` sets none and inherits the row's, so it fades and brightens with the row:
+
+| Prop      | Attribute      | Values                   | Default   |
+| --------- | -------------- | ------------------------ | --------- |
+| `variant` | `data-variant` | `primary` \| `secondary` | `primary` |
 
 The root reflects its state as `data-*` attributes on `.cl-item`, so consumers can scope overrides without touching StyleX's hashed atoms:
 

packages/swingset/src/stories/item.stories.tsx

@@ -32,7 +32,7 @@ export function Default() {
         </Avatar.Root>
       </Item.Media>
       <Item.Content>
-        <Item.Title>Test Organization</Item.Title>
+        <Item.Label>Test Organization</Item.Label>
         <Item.Description>Member</Item.Description>
       </Item.Content>
       <Item.Actions>
@@ -68,7 +68,7 @@ export function Interactive() {
         </Avatar.Root>
       </Item.Media>
       <Item.Content>
-        <Item.Title>Test Organization</Item.Title>
+        <Item.Label>Test Organization</Item.Label>
         <Item.Description>Member</Item.Description>
       </Item.Content>
     </Item.Root>
@@ -92,7 +92,7 @@ export function Sizes() {
             </Avatar.Root>
           </Item.Media>
           <Item.Content>
-            <Item.Title>Test Organization</Item.Title>
+            <Item.Label>Test Organization</Item.Label>
           </Item.Content>
         </Item.Root>
       ))}
@@ -114,7 +114,7 @@ export function Group() {
             </Avatar.Root>
           </Item.Media>
           <Item.Content>
-            <Item.Title>Cameron Walker</Item.Title>
+            <Item.Label>Cameron Walker</Item.Label>
             <Item.Description>cameron@clerk.com</Item.Description>
           </Item.Content>
           <Item.Actions>
@@ -158,7 +158,7 @@ export function Group() {
             </Avatar.Root>
           </Item.Media>
           <Item.Content>
-            <Item.Title>Clerk</Item.Title>
+            <Item.Label>Clerk</Item.Label>
           </Item.Content>
           <Icon
             name='check'
@@ -189,7 +189,7 @@ export function Group() {
             </Avatar.Root>
           </Item.Media>
           <Item.Content>
-            <Item.Title>Clerk</Item.Title>
+            <Item.Label>Clerk</Item.Label>
           </Item.Content>
         </Item.Root>
       </Item.Group>
@@ -215,7 +215,7 @@ export function Group() {
             </Avatar.Root>
           </Item.Media>
           <Item.Content>
-            <Item.Title>DesignCloud</Item.Title>
+            <Item.Label>DesignCloud</Item.Label>
           </Item.Content>
         </Item.Root>
       </Item.Group>
@@ -239,7 +239,7 @@ export function Group() {
             />
           </Item.Media>
           <Item.Content>
-            <Item.Label>Add account</Item.Label>
+            <Item.Label variant='secondary'>Add account</Item.Label>
           </Item.Content>
         </Item.Root>
         <Item.Root
@@ -260,7 +260,7 @@ export function Group() {
             />
           </Item.Media>
           <Item.Content>
-            <Item.Label>Sign out of all accounts</Item.Label>
+            <Item.Label variant='secondary'>Sign out of all accounts</Item.Label>
           </Item.Content>
         </Item.Root>
       </Item.Group>
@@ -324,7 +324,7 @@ export function Scrolling() {
               </Avatar.Root>
             </Item.Media>
             <Item.Content>
-              <Item.Title>{name}</Item.Title>
+              <Item.Label>{name}</Item.Label>
             </Item.Content>
           </Item.Root>
         ))}