feat: updated doc site

Author: haoruikun-cb

apps/docs/docs/components/data-display/ListCell/_mobileExamples.mdx

@@ -2,7 +2,7 @@
 
 A ListCell row is divided into the following 5 columns:
 
-- Media
+- Start
 - Title & description
 - Intermediary
 - End (detail & subdetail or action)
@@ -60,10 +60,10 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
 </VStack>
 ```
 
-## Media
+## Start
 
 ::::note
-We have deprecated `CellMedia`; pass media directly as shown below.
+We have deprecated `CellMedia`; pass start content directly with the `start` prop as shown below.
 ::::
 
 ### Leading Icon
@@ -368,7 +368,7 @@ The ListCellFallback component provides loading state representations of ListCel
   {/* Basic loading state */}
   <ListCellFallback title description spacingVariant="condensed" />
 
-  {/* Loading state with media */}
+  {/* Loading state with start content */}
   <ListCellFallback title description start="icon" spacingVariant="condensed" />
 
   {/* Loading state with details */}
@@ -472,6 +472,10 @@ function PriorityContent() {
 }
 ```
 
+:::::note
+`start` priority applies to the title and description column, not the start slot content. The start slot always have `flexShrink={0}`.
+:::::
+
 ## Anatomy
 
 Without helper text (top-only layout):
@@ -484,7 +488,7 @@ Without helper text (top-only layout):
 ││┌───────────────────────────────────────────────────────────────────────┐││
 │││                contentContainer & mainContent (HStack)                │││
 │││  ┌─────┐ ┌────────────────┐ ┌────────────┐ ┌────────────┐ ┌─────────┐ │││
-│││  │media│ │  VStack        │ │intermediary│ │    end     │ │accessory│ │││
+│││  │start│ │  VStack        │ │intermediary│ │    end     │ │accessory│ │││
 │││  │     │ │ ┌──────────┐   │ │            │ │ (detail    │ │         │ │││
 │││  │     │ │ │  title   │   │ │            │ │    or      │ │         │ │││
 │││  │     │ │ └──────────┘   │ │            │ │  action)   │ │         │ │││
@@ -509,7 +513,7 @@ With helper text (top + bottom layout):
 │││┌───────────────────────────────────────────────────────────────────────┐│││
 ││││                          mainContent (HStack)                         ││││
 ││││  ┌─────┐ ┌────────────────┐ ┌────────────┐ ┌────────────┐ ┌─────────┐ ││││
-││││  │media│ │  VStack        │ │intermediary│ │    end     │ │accessory│ ││││
+││││  │start│ │  VStack        │ │intermediary│ │    end     │ │accessory│ ││││
 ││││  │     │ │ ┌──────────┐   │ │            │ │ (detail    │ │         │ ││││
 ││││  │     │ │ │  title   │   │ │            │ │    or      │ │         │ ││││
 ││││  │     │ │ └──────────┘   │ │            │ │  action)   │ │         │ ││││
@@ -533,7 +537,7 @@ Mapping to `styles` / `classNames` keys:
 - contentContainer: container around top and optional bottom content
 - mainContent: inner horizontal layout that holds the main pieces
 - title/description: stacked text column within `topContent`
-- media: leading media container
+- start: leading content container
 - intermediary: middle container between main and end
 - end: container for `detail` / `subdetail` or `end` prop you pass in
 - accessory: trailing accessory container

apps/docs/docs/components/data-display/ListCell/_webExamples.mdx

@@ -2,7 +2,7 @@
 
 A ListCell row is divided into the following 5 columns:
 
-- Media
+- Start
 - Title & description
 - Intermediary
 - End (detail & subdetail or action)
@@ -60,10 +60,10 @@ Prefer `spacingVariant="condensed"` for the new ListCell design. The `compact` m
 </VStack>
 ```
 
-## Media
+## Start
 
 ::::note
-We have deprecated `CellMedia`; pass media directly as shown below.
+We have deprecated `CellMedia`; pass start content directly with the `start` prop as shown below.
 ::::
 
 ### Leading Icon
@@ -368,7 +368,7 @@ The ListCellFallback component provides loading state representations of ListCel
   {/* Basic loading state */}
   <ListCellFallback title description spacingVariant="condensed" />
 
-  {/* Loading state with media */}
+  {/* Loading state with start content */}
   <ListCellFallback title description start="icon" spacingVariant="condensed" />
 
   {/* Loading state with details */}
@@ -472,6 +472,10 @@ function PriorityContent() {
 }
 ```
 
+:::::note
+`start` priority applies to the title and description column, not the start slot content. The start slot always have `flexShrink={0}`.
+:::::
+
 ## Anatomy
 
 Without helper text (top-only layout):
@@ -484,7 +488,7 @@ Without helper text (top-only layout):
 ││┌───────────────────────────────────────────────────────────────────────┐││
 │││                contentContainer & mainContent (HStack)                │││
 │││  ┌─────┐ ┌────────────────┐ ┌────────────┐ ┌────────────┐ ┌─────────┐ │││
-│││  │media│ │  VStack        │ │intermediary│ │    end     │ │accessory│ │││
+│││  │start│ │  VStack        │ │intermediary│ │    end     │ │accessory│ │││
 │││  │     │ │ ┌──────────┐   │ │            │ │ (detail    │ │         │ │││
 │││  │     │ │ │  title   │   │ │            │ │    or      │ │         │ │││
 │││  │     │ │ └──────────┘   │ │            │ │  action)   │ │         │ │││
@@ -509,7 +513,7 @@ With helper text (top + bottom layout):
 │││┌───────────────────────────────────────────────────────────────────────┐│││
 ││││                          mainContent (HStack)                         ││││
 ││││  ┌─────┐ ┌────────────────┐ ┌────────────┐ ┌────────────┐ ┌─────────┐ ││││
-││││  │media│ │  VStack        │ │intermediary│ │    end     │ │accessory│ ││││
+││││  │start│ │  VStack        │ │intermediary│ │    end     │ │accessory│ ││││
 ││││  │     │ │ ┌──────────┐   │ │            │ │ (detail    │ │         │ ││││
 ││││  │     │ │ │  title   │   │ │            │ │    or      │ │         │ ││││
 ││││  │     │ │ └──────────┘   │ │            │ │  action)   │ │         │ ││││
@@ -533,7 +537,7 @@ Mapping to `styles` / `classNames` keys:
 - contentContainer: container around top and optional bottom content
 - mainContent: inner horizontal layout that holds the main pieces
 - title/description: stacked text column within `topContent`
-- media: leading media container
+- start: leading content container
 - intermediary: middle container between main and end
 - end: container for `detail` / `subdetail` or `end` prop you pass in
 - accessory: trailing accessory container