@ds-mo/ui 15.0.0 → 15.1.1

package/dist/agent.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "15.0.0",
+  "packageVersion": "15.1.1",
   "kind": "components",
   "entries": [
     {
@@ -44,7 +44,12 @@
             "label": "Storybook examples",
             "path": "src/wc/components/MessageScroller/MessageScroller.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "Disclosure composition owns its rows; the host remains an application layout box.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -134,7 +139,12 @@
             "label": "Agent chat composition",
             "path": "agent/patterns/agent-chat/pattern.agent.json"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "Question and action components own their recipes; the questionnaire host remains a responsive layout box.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -254,7 +264,18 @@
             "label": "Prose distribution decision",
             "path": "docs/prose-foundation.md"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "Structured response parts own their recipes; the host permits application layout and the public prose measure.",
+          "protected": [],
+          "customProperties": [
+            {
+              "name": "--ds-prose-text-max-inline-size",
+              "source": "src/wc/styles/prose.css",
+              "reason": "Application-owned readable prose measure."
+            }
+          ]
+        }
       },
       "api": {
         "props": {
@@ -354,7 +375,12 @@
             "label": "Source safety and disclosure stories",
             "path": "src/wc/components/AgentSourceList/AgentSourceList.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "Source rows own their recipes; the disclosure host remains an application layout box.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -445,7 +471,12 @@
             "label": "Font ownership and loading",
             "path": "docs/font-ownership.md"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "Slotted tool summaries and results retain application-owned styling and layout.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -543,7 +574,12 @@
             "label": "Storybook examples",
             "path": "src/wc/components/MessageScroller/MessageScroller.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "Attachment items own their recipes; the list host permits application layout.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -609,7 +645,27 @@
             "label": "Storybook examples",
             "path": "src/wc/components/Avatar/Avatar.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "width",
+                "height",
+                "min-width",
+                "min-height",
+                "max-width",
+                "max-height"
+              ],
+              "reason": "The primitive owns its size recipe; select size and position it through the parent layout.",
+              "props": [
+                "size"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -729,7 +785,35 @@
             "label": "Storybook examples",
             "path": "src/wc/components/Badge/Badge.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "background",
+                "surface",
+                "variant",
+                "hasRing"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -871,7 +955,33 @@
             "label": "Application shell contract",
             "path": "agent/patterns/application-shell/pattern.agent.json"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "intent",
+                "contrast"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -1015,7 +1125,30 @@
             "label": "Rendered behavior coverage",
             "path": "tests/e2e/bar-action.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": []
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -1161,7 +1294,12 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The host participates in shell-owned layout; internal tabs and chrome own their recipes.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -1320,7 +1458,30 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": []
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -1529,7 +1690,32 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "variant"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -1734,7 +1920,30 @@
             "label": "Cross-browser workflow behavior",
             "path": "tests/e2e/bar-workflow.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": []
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -1892,7 +2101,12 @@
             "label": "Expanded page-header composition",
             "path": "src/wc/components/BarTitle/BarTitle.tsx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The breadcrumb owns internal truncation; the application supplies the host width and placement.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -2031,7 +2245,74 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "height",
+                "min-height",
+                "max-height",
+                "padding",
+                "gap"
+              ],
+              "reason": "The control density is one atomic recipe; use the size and inset props instead of replacing internal metrics.",
+              "props": [
+                "size",
+                "isInset",
+                "insetDepth",
+                "labelEmphasis"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its corner treatment; select the supported radius treatment.",
+              "props": [
+                "rounded",
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "width",
+                "min-width",
+                "max-width"
+              ],
+              "reason": "The button owns hug/fill sizing and its minimum square geometry; use width and constrain the surrounding layout.",
+              "props": [
+                "width",
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "intent",
+                "contrast",
+                "background",
+                "variant",
+                "hasBorder",
+                "size"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -2259,7 +2540,70 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "height",
+                "min-height",
+                "max-height",
+                "padding",
+                "gap"
+              ],
+              "reason": "The control density is one atomic recipe; use the size and inset props instead of replacing internal metrics.",
+              "props": [
+                "size",
+                "isInset",
+                "insetDepth",
+                "labelEmphasis"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its corner treatment; select the supported radius treatment.",
+              "props": [
+                "rounded",
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "width",
+                "min-width",
+                "max-width"
+              ],
+              "reason": "The button owns hug/fill sizing and its minimum square geometry; use width and constrain the surrounding layout.",
+              "props": [
+                "width",
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "variant",
+                "size"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -2486,7 +2830,72 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "height",
+                "min-height",
+                "max-height",
+                "padding",
+                "gap"
+              ],
+              "reason": "The control density is one atomic recipe; use the size and inset props instead of replacing internal metrics.",
+              "props": [
+                "size",
+                "isInset",
+                "insetDepth",
+                "labelEmphasis"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its corner treatment; select the supported radius treatment.",
+              "props": [
+                "rounded",
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "width",
+                "min-width",
+                "max-width"
+              ],
+              "reason": "The button owns hug/fill sizing and its minimum square geometry; use width and constrain the surrounding layout.",
+              "props": [
+                "width",
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "background",
+                "variant",
+                "hasBorder",
+                "size"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -2714,7 +3123,20 @@
             "label": "Storybook examples",
             "path": "src/wc/components/Calendar/Calendar.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "gap"
+              ],
+              "reason": "The component owns spacing between its immediate content regions; the application controls surrounding margins and placement.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -2844,7 +3266,30 @@
             "label": "Rendered semantics, interaction, and geometry coverage",
             "path": "tests/e2e/card-action-center.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": []
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -2946,7 +3391,42 @@
             "label": "Storybook examples",
             "path": "src/wc/components/CardChart/CardChart.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "variant"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            },
+            {
+              "properties": [
+                "width",
+                "min-height"
+              ],
+              "reason": "Card width selects the component geometry; use cardWidth and let the parent constrain available space.",
+              "props": [
+                "cardWidth"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -3074,7 +3554,42 @@
             "label": "Rendered navigation and interaction coverage",
             "path": "tests/e2e/card-navigation.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "variant"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            },
+            {
+              "properties": [
+                "width",
+                "min-height"
+              ],
+              "reason": "Card width selects the component geometry; use cardWidth and let the parent constrain available space.",
+              "props": [
+                "cardWidth"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -3221,7 +3736,32 @@
             "label": "Trend resolution unit coverage",
             "path": "tests/metric-change.test.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "variant"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -3387,7 +3927,40 @@
             "label": "Cross-browser shell and action coverage",
             "path": "tests/e2e/card-setting.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": []
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            },
+            {
+              "properties": [
+                "width",
+                "min-height"
+              ],
+              "reason": "Card width selects the component geometry; use cardWidth and let the parent constrain available space.",
+              "props": [
+                "cardWidth"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -3487,7 +4060,30 @@
             "label": "Storybook examples",
             "path": "src/wc/components/CardSettingsScope/CardSettingsScope.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": []
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -3619,7 +4215,12 @@
             "label": "Chart guide",
             "path": "src/docs/Charts.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The renderer observes the host; application-supplied dimensions and chart definition remain authoritative.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -3749,7 +4350,12 @@
             "label": "Rendered interaction tests",
             "path": "tests/e2e/chart-legend.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "Legend content owns internal rows; application layout may constrain and position its host.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -3893,7 +4499,43 @@
             "label": "Cross-browser form and accessibility coverage",
             "path": "tests/e2e/forms.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "padding",
+                "border-radius"
+              ],
+              "reason": "The field primitive owns its density and selection anatomy; use size and presentation props without replacing the recipe.",
+              "props": [
+                "size",
+                "presentation"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "size",
+                "presentation"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -4046,7 +4688,56 @@
             "label": "Storybook examples",
             "path": "src/wc/components/Chip/Chip.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "height",
+                "min-height",
+                "max-height",
+                "padding",
+                "gap"
+              ],
+              "reason": "The control density is one atomic recipe; use the size and inset props instead of replacing internal metrics.",
+              "props": [
+                "size",
+                "isInset",
+                "insetDepth"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its corner treatment; select the supported radius treatment.",
+              "props": [
+                "rounded",
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "size"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -4152,7 +4843,36 @@
             "label": "Font ownership and loading",
             "path": "docs/font-ownership.md"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": []
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": [
+            {
+              "name": "--ds-code-font-variant-ligatures",
+              "source": "src/wc/components/CodeBlock/CodeBlock.css",
+              "reason": "Application-owned code ligature preference."
+            }
+          ]
+        }
       },
       "api": {
         "props": {
@@ -4231,7 +4951,12 @@
             "label": "Storybook examples",
             "path": "src/wc/components/ConversationList/ConversationList.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The application supplies the bounded list region; internal scroll and action geometry are implementation-owned.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {},
@@ -4298,7 +5023,30 @@
             "label": "Storybook examples",
             "path": "src/wc/components/ConversationList/ConversationList.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": []
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -4398,7 +5146,20 @@
             "label": "Storybook examples",
             "path": "src/wc/components/ConversationList/ConversationList.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "gap"
+              ],
+              "reason": "The component owns spacing between its immediate content regions; the application controls surrounding margins and placement.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -4499,7 +5260,32 @@
             "label": "Shared catalog state",
             "path": "src/wc/utils/list-customizer.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "hasBorder"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -4654,7 +5440,32 @@
             "label": "Toolbar composition owner",
             "path": "src/wc/components/DataToolbar/DataToolbar.agent.json"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "hasBorder"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -4836,7 +5647,32 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "hasBorder"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -4951,7 +5787,32 @@
           "component:ds-menu",
           "component:ds-data-group",
           "component:ds-tab-group"
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "hasBorder"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -5173,7 +6034,32 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "hasBorder"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -5342,7 +6228,32 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "hasBorder"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -5500,7 +6411,32 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "hasBorder"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -5616,7 +6552,20 @@
             "label": "Table composition owner",
             "path": "src/wc/components/Table/Table.agent.json"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "gap"
+              ],
+              "reason": "The component owns spacing between its immediate content regions; the application controls surrounding margins and placement.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -5717,7 +6666,12 @@
             "label": "Storybook examples",
             "path": "src/wc/components/Divider/Divider.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "Orientation and length are public props; the host supports application layout around the internal divider.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -5839,7 +6793,12 @@
             "label": "Shared layout recipe foundation",
             "path": "docs/layout-recipe-foundation.md"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The application explicitly owns available width, height and surrounding padding.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -5953,7 +6912,20 @@
             "label": "Cross-browser form and accessibility coverage",
             "path": "tests/e2e/forms.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "gap"
+              ],
+              "reason": "The component owns spacing between its immediate content regions; the application controls surrounding margins and placement.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -6084,7 +7056,54 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "height",
+                "min-height",
+                "max-height",
+                "padding",
+                "gap"
+              ],
+              "reason": "The control density is one atomic recipe; use the size and inset props instead of replacing internal metrics.",
+              "props": [
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its corner treatment; select the supported radius treatment.",
+              "props": [
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "hasBorder",
+                "size"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -6371,7 +7390,27 @@
             "label": "Preload API guidance",
             "path": "src/wc/components/Icon/icon-cache.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "width",
+                "height",
+                "min-width",
+                "min-height",
+                "max-width",
+                "max-height"
+              ],
+              "reason": "The primitive owns its size recipe; select size and position it through the parent layout.",
+              "props": [
+                "size"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -6518,7 +7557,54 @@
             "label": "Cross-browser form and accessibility coverage",
             "path": "tests/e2e/forms.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "height",
+                "min-height",
+                "max-height",
+                "padding",
+                "gap"
+              ],
+              "reason": "The control density is one atomic recipe; use the size and inset props instead of replacing internal metrics.",
+              "props": [
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its corner treatment; select the supported radius treatment.",
+              "props": [
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "hasBorder",
+                "size"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -6784,7 +7870,54 @@
             "label": "Cross-browser form and accessibility coverage",
             "path": "tests/e2e/forms.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "height",
+                "min-height",
+                "max-height",
+                "padding",
+                "gap"
+              ],
+              "reason": "The control density is one atomic recipe; use the size and inset props instead of replacing internal metrics.",
+              "props": [
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its corner treatment; select the supported radius treatment.",
+              "props": [
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "hasBorder",
+                "size"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -6993,7 +8126,54 @@
             "label": "Cross-browser form and accessibility coverage",
             "path": "tests/e2e/forms.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "height",
+                "min-height",
+                "max-height",
+                "padding",
+                "gap"
+              ],
+              "reason": "The control density is one atomic recipe; use the size and inset props instead of replacing internal metrics.",
+              "props": [
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its corner treatment; select the supported radius treatment.",
+              "props": [
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "hasBorder",
+                "size"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -7185,7 +8365,27 @@
             "label": "Storybook examples",
             "path": "src/wc/components/Loader/Loader.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "width",
+                "height",
+                "min-width",
+                "min-height",
+                "max-width",
+                "max-height"
+              ],
+              "reason": "The primitive owns its size recipe; select size and position it through the parent layout.",
+              "props": [
+                "size"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -7263,7 +8463,23 @@
             "label": "Prose distribution decision",
             "path": "docs/prose-foundation.md"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The public prose stylesheet intentionally owns typography and exposes consumer customization.",
+          "protected": [],
+          "customProperties": [
+            {
+              "name": "--ds-prose-text-max-inline-size",
+              "source": "src/wc/styles/prose.css",
+              "reason": "Application-owned readable prose measure."
+            },
+            {
+              "name": "--ds-code-font-variant-ligatures",
+              "source": "src/wc/styles/prose.css",
+              "reason": "Application-owned code ligature preference."
+            }
+          ]
+        }
       },
       "api": {
         "props": {
@@ -7396,7 +8612,32 @@
             "label": "Framework integration",
             "path": "docs/framework-integration.md"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -7567,7 +8808,12 @@
             "label": "Storybook examples",
             "path": "src/wc/components/MessageScroller/MessageScroller.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The row composes content whose presentation is owned by its children and the transcript layout.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -7673,7 +8919,12 @@
             "label": "Message metadata composition",
             "path": "src/wc/components/Message/Message.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The application may position the action group; child buttons own their appearance.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -7759,7 +9010,32 @@
             "label": "Storybook examples",
             "path": "src/wc/components/MessageScroller/MessageScroller.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "variant"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -7835,7 +9111,30 @@
             "label": "Scroller overlay composition",
             "path": "src/wc/components/MessageScroller/MessageScroller.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": []
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -7954,7 +9253,18 @@
             "label": "Storybook examples",
             "path": "src/wc/components/MessageScroller/MessageScroller.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The application owns host dimensions and may customize the transcript measure through its public hook.",
+          "protected": [],
+          "customProperties": [
+            {
+              "name": "--ds-message-scroller-content-max-width",
+              "source": "src/wc/components/MessageScroller/MessageScroller.css",
+              "reason": "Readable transcript measure inside a full-width scrollport."
+            }
+          ]
+        }
       },
       "api": {
         "props": {
@@ -8045,7 +9355,30 @@
             "label": "Storybook",
             "path": "src/wc/components/MobileBarNav/MobileBarNav.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": []
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -8198,7 +9531,32 @@
             "label": "Storybook",
             "path": "src/wc/components/MobileHeader/MobileHeader.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "tone"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -8331,7 +9689,32 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "presentation"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -8429,7 +9812,32 @@
             "label": "Storybook",
             "path": "src/wc/components/MobileSheetNav/MobileSheetNav.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "presentation"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -8627,7 +10035,30 @@
             "label": "Reduced-motion overlay coverage",
             "path": "tests/e2e/reduced-motion.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": []
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -8744,7 +10175,12 @@
             "label": "Storybook review states",
             "path": "src/wc/components/Pagination/Pagination.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The host is a layout composition of controls; individual controls own their recipes.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -8957,7 +10393,33 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "presentation",
+                "navStyle"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -9185,6 +10647,31 @@
           "angular": [
             "Bind items and a valid value as properties, and handle dsChange to synchronize the visible panel."
           ]
+        },
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "background"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
         }
       },
       "api": {
@@ -9279,7 +10766,30 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": []
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -9424,7 +10934,30 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": []
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -9646,7 +11179,31 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "presentation"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -9797,7 +11354,12 @@
             "label": "Storybook parameter playground",
             "path": "src/wc/components/PaperTexture/PaperTexture.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The decorative shader intentionally accepts custom parameters and observes application-owned host dimensions.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -9904,7 +11466,41 @@
             "label": "Cross-browser form and accessibility coverage",
             "path": "tests/e2e/forms.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "padding",
+                "border-radius"
+              ],
+              "reason": "The field primitive owns its density and selection anatomy; use size and presentation props without replacing the recipe.",
+              "props": [
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "size"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -10050,7 +11646,44 @@
             "label": "Safety-score level unit coverage",
             "path": "tests/score-model.test.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "height",
+                "padding",
+                "border-radius"
+              ],
+              "reason": "The selected presentation owns its metric canvas; use the supported size or variant props and keep placement in the parent.",
+              "props": [
+                "size",
+                "variant"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "variant",
+                "size"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -10148,7 +11781,12 @@
             "label": "Storybook examples",
             "path": "src/wc/components/ScrollOverlay/ScrollOverlay.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The application explicitly owns responsive sizing and overlay insets.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -10298,7 +11936,58 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "height",
+                "min-height",
+                "max-height",
+                "padding",
+                "gap"
+              ],
+              "reason": "The control density is one atomic recipe; use the size and inset props instead of replacing internal metrics.",
+              "props": [
+                "size",
+                "isInset",
+                "insetDepth"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its corner treatment; select the supported radius treatment.",
+              "props": [
+                "rounded",
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "background",
+                "hasBorder",
+                "size"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -10672,7 +12361,32 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "navStyle",
+                "gradientPreset"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -10925,7 +12639,12 @@
             "label": "Reusable framework composition",
             "path": "agent/patterns/shell-page/pattern.agent.json"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "Content insets and surfaces are public props; the host remains part of the application-owned bounded layout.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -11063,7 +12782,31 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "presentation"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -11239,7 +12982,47 @@
             "label": "Storybook examples",
             "path": "src/wc/components/Skeleton/Skeleton.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "height",
+                "padding",
+                "border-radius"
+              ],
+              "reason": "The selected presentation owns its metric canvas; use the supported size or variant props and keep placement in the parent.",
+              "props": [
+                "variant",
+                "textVariant",
+                "iconSize",
+                "controlSize",
+                "rounded"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "background",
+                "variant"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -11378,7 +13161,48 @@
             "label": "Cross-browser form and interaction coverage",
             "path": "tests/e2e/forms.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "padding",
+                "border-radius"
+              ],
+              "reason": "The field primitive owns its density and selection anatomy; use size and presentation props without replacing the recipe.",
+              "props": [
+                "size",
+                "orientation"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "size"
+              ]
+            }
+          ],
+          "customProperties": [
+            {
+              "name": "--ds-slider-vertical-length",
+              "source": "src/wc/components/Slider/Slider.css",
+              "reason": "Application-owned length of a vertical slider."
+            }
+          ]
+        }
       },
       "api": {
         "props": {
@@ -11596,7 +13420,30 @@
             "label": "Executable stories",
             "path": "src/wc/components/SwatchPicker/SwatchPicker.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": []
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -11723,7 +13570,43 @@
             "label": "Cross-browser form and accessibility coverage",
             "path": "tests/e2e/forms.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "padding",
+                "border-radius"
+              ],
+              "reason": "The field primitive owns its density and selection anatomy; use size and presentation props without replacing the recipe.",
+              "props": [
+                "size",
+                "presentation"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "size",
+                "presentation"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -11889,7 +13772,55 @@
             "label": "Storybook examples",
             "path": "src/wc/components/TabGroup/TabGroup.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "height",
+                "min-height",
+                "max-height",
+                "padding",
+                "gap"
+              ],
+              "reason": "The control density is one atomic recipe; use the size and inset props instead of replacing internal metrics.",
+              "props": [
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its corner treatment; select the supported radius treatment.",
+              "props": [
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "background",
+                "size",
+                "presentation"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -12074,7 +14005,108 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The public table stylesheet intentionally supports product-specific styling through documented custom properties and stable element classes.",
+          "protected": [],
+          "customProperties": [
+            {
+              "name": "--ds-table-border",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-border-strong",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-cell-padding-block",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-cell-padding-inline",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-collapse-all-block-offset",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-column-border",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-header-min-block-size",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-header-surface",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-inline-scroll-max-offset",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-max-block-size",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-radius",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-row-hover",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-row-min-block-size",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-row-pressed",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-row-selected",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-sticky-border",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-sticky-header-offset",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-surface",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            },
+            {
+              "name": "--ds-table-visible-inline-size",
+              "source": "src/wc/styles/table.css",
+              "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
+            }
+          ]
+        }
       },
       "api": {
         "props": {
@@ -12500,7 +14532,58 @@
             "label": "Surface ownership and trigger state",
             "path": "src/docs/SurfaceOwnership.mdx"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "height",
+                "min-height",
+                "max-height",
+                "padding",
+                "gap"
+              ],
+              "reason": "The control density is one atomic recipe; use the size and inset props instead of replacing internal metrics.",
+              "props": [
+                "size",
+                "isInset",
+                "insetDepth"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its corner treatment; select the supported radius treatment.",
+              "props": [
+                "rounded",
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "intent",
+                "contrast",
+                "size"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -12670,7 +14753,28 @@
             "label": "Typography contract",
             "path": "AGENTS.md"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing"
+              ],
+              "reason": "Typography metrics form one atomic variant; choose variant and emphasis. Layout and inherited foreground remain consumer-owned.",
+              "props": [
+                "variant",
+                "emphasis"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -12819,7 +14923,44 @@
             "label": "Cross-browser form and accessibility coverage",
             "path": "tests/e2e/forms.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "font",
+                "font-size",
+                "font-weight",
+                "font-family",
+                "line-height",
+                "letter-spacing",
+                "padding",
+                "border-radius"
+              ],
+              "reason": "Size selects the text and inset recipe; rows and resize retain their documented height ownership.",
+              "props": [
+                "size",
+                "rows",
+                "resize"
+              ]
+            },
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "hasBorder",
+                "size"
+              ]
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -13012,7 +15153,20 @@
             "label": "Storybook examples",
             "path": "src/wc/components/TimePicker/TimePicker.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "gap"
+              ],
+              "reason": "The component owns spacing between its immediate content regions; the application controls surrounding margins and placement.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -13164,7 +15318,30 @@
             "label": "Cross-browser behavior coverage",
             "path": "tests/e2e/toast.spec.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": []
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -13321,7 +15498,32 @@
             "label": "Positioning unit coverage",
             "path": "tests/anchored-position.test.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": [
+                "size"
+              ]
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -13463,7 +15665,30 @@
             "label": "Storybook example",
             "path": "src/wc/components/TooltipChart/TooltipChart.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The component owns the protected recipes below; unspecified host properties and application layout remain customizable.",
+          "protected": [
+            {
+              "properties": [
+                "background",
+                "border",
+                "box-shadow",
+                "color"
+              ],
+              "reason": "The component owns its surface and interaction treatment; use its semantic presentation props or compose an application-owned surrounding surface.",
+              "props": []
+            },
+            {
+              "properties": [
+                "border-radius"
+              ],
+              "reason": "The component owns its surface radius; retain the shared recipe and customize an outer wrapper when needed.",
+              "props": []
+            }
+          ],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {
@@ -13554,7 +15779,12 @@
             "label": "Storybook example",
             "path": "src/wc/components/TypingIndicator/TypingIndicator.stories.ts"
           }
-        ]
+        ],
+        "styling": {
+          "rationale": "The indicator composes loader and text recipes inside an application-positioned host.",
+          "protected": [],
+          "customProperties": []
+        }
       },
       "api": {
         "props": {