@exponential_app/eui 0.2.1 → 0.4.0

package/fixtures/catalog-macros.json

@@ -2070,6 +2070,7 @@
           "display": "flex",
           "flexDirection": "row",
           "alignItems": "stretch",
+          "gap": "$spacing.lg",
           "width": "100%",
           "minHeight": 0
         },
@@ -2170,6 +2171,7 @@
           "display": "flex",
           "flexDirection": "row",
           "alignItems": "stretch",
+          "gap": "$spacing.lg",
           "width": "100%",
           "minHeight": 0
         },
@@ -2270,6 +2272,7 @@
           "display": "flex",
           "flexDirection": "row-reverse",
           "alignItems": "stretch",
+          "gap": "$spacing.lg",
           "width": "100%",
           "minHeight": 0
         },
@@ -2367,6 +2370,7 @@
           "display": "flex",
           "flexDirection": "row",
           "alignItems": "stretch",
+          "gap": "$spacing.lg",
           "width": "100%",
           "minHeight": 0
         },
@@ -2467,6 +2471,7 @@
           "display": "flex",
           "flexDirection": "row",
           "alignItems": "stretch",
+          "gap": "$spacing.lg",
           "width": "100%",
           "minHeight": 0
         },
@@ -2567,6 +2572,7 @@
           "display": "flex",
           "flexDirection": "row",
           "alignItems": "stretch",
+          "gap": "$spacing.lg",
           "width": "100%",
           "minHeight": 0
         },
@@ -2667,6 +2673,7 @@
           "display": "flex",
           "flexDirection": "row",
           "alignItems": "stretch",
+          "gap": "$spacing.lg",
           "width": "100%",
           "minHeight": 0
         },
@@ -2767,6 +2774,7 @@
           "display": "flex",
           "flexDirection": "row",
           "alignItems": "stretch",
+          "gap": "$spacing.lg",
           "width": "100%",
           "minHeight": 0
         },
@@ -2842,6 +2850,7 @@
           "display": "flex",
           "flexDirection": "row",
           "alignItems": "stretch",
+          "gap": "$spacing.lg",
           "width": "100%",
           "minHeight": 0
         },
@@ -2943,6 +2952,7 @@
           "display": "flex",
           "flexDirection": "row",
           "alignItems": "stretch",
+          "gap": "$spacing.lg",
           "width": "100%",
           "minHeight": 0
         },
@@ -7826,237 +7836,525 @@
       }
     },
     {
-      "name": "Collapsible/example",
+      "name": "Mosaic/example",
       "input": {
-        "id": "collapsible",
-        "component": "Collapsible",
+        "id": "mosaic",
+        "component": "Mosaic",
         "props": {
-          "title": "Advanced",
-          "open": false
-        },
-        "children": [
-          {
-            "id": "collapsible-child",
-            "component": "Text",
-            "props": {
-              "text": "Child"
+          "pictures": [
+            {
+              "src": "https://example.com/editor.png",
+              "alt": "Editor"
+            },
+            {
+              "src": "https://example.com/preview.png",
+              "alt": "Preview"
+            },
+            {
+              "src": "https://example.com/data.png",
+              "alt": "Data"
+            },
+            {
+              "src": "https://example.com/versions.png",
+              "alt": "Versions"
             }
-          }
-        ]
+          ]
+        }
       },
       "expected": {
-        "id": "collapsible",
+        "id": "mosaic",
         "component": "Box",
         "props": {},
         "children": [
           {
-            "id": "collapsible.trigger",
+            "id": "mosaic.lead",
             "component": "Box",
             "props": {
               "pressable": true
             },
             "children": [
               {
-                "id": "collapsible.trigger.chevron",
-                "component": "Icon",
-                "props": {
-                  "name": "ui-chevron-right",
-                  "size": "sm",
-                  "tone": "neutral"
-                },
-                "children": [],
-                "recipe": {
-                  "macro": "Collapsible",
-                  "part": "chevron",
-                  "props": {
-                    "open": false
-                  }
-                }
-              },
-              {
-                "id": "collapsible.trigger.title",
-                "component": "Text",
+                "id": "mosaic.lead.image",
+                "component": "Image",
                 "props": {
-                  "text": "Advanced",
-                  "variant": "label",
-                  "lines": 1
+                  "src": "https://example.com/editor.png",
+                  "alt": "Editor",
+                  "fit": "cover"
                 },
                 "children": [],
                 "style": {
-                  "flexGrow": 1,
-                  "minWidth": 0
+                  "position": "absolute",
+                  "inset": 0,
+                  "width": "100%",
+                  "height": "100%"
                 },
                 "recipe": {
-                  "macro": "Collapsible",
-                  "part": "title",
+                  "macro": "Mosaic",
+                  "part": "image",
                   "props": {}
+                },
+                "accessibility": {
+                  "hidden": true
                 }
               }
             ],
             "style": {
-              "display": "flex",
-              "flexDirection": "row",
-              "alignItems": "center",
-              "gap": "$spacing.sm",
-              "minHeight": "$control.row",
-              "paddingHorizontal": "$spacing.sm",
-              "borderRadius": "$radius.md"
+              "position": "relative",
+              "overflow": "hidden",
+              "minWidth": 0,
+              "minHeight": 0,
+              "cursor": "pointer",
+              "flexGrow": 0,
+              "flexShrink": 0,
+              "flexBasis": "60%",
+              "height": "100%"
             },
             "recipe": {
-              "macro": "Collapsible",
-              "part": "trigger",
+              "macro": "Mosaic",
+              "part": "lead",
               "props": {
-                "open": false
+                "size": "large"
               }
             },
             "accessibility": {
               "role": "button",
-              "expanded": false
+              "label": "Editor"
             }
-          }
-        ],
-        "style": {
-          "display": "flex",
-          "flexDirection": "column",
-          "gap": "$spacing.xs"
-        },
-        "recipe": {
-          "macro": "Collapsible",
-          "part": "root",
-          "props": {}
-        }
-      }
-    },
-    {
-      "name": "Collapsible/open=true",
-      "input": {
-        "id": "collapsible",
-        "component": "Collapsible",
-        "props": {
-          "title": "Advanced",
-          "open": true
-        },
-        "children": [
-          {
-            "id": "collapsible-child",
-            "component": "Text",
-            "props": {
-              "text": "Child"
-            }
-          }
-        ]
-      },
-      "expected": {
-        "id": "collapsible",
-        "component": "Box",
-        "props": {},
-        "children": [
+          },
           {
-            "id": "collapsible.trigger",
+            "id": "mosaic.side",
             "component": "Box",
-            "props": {
-              "pressable": true
-            },
+            "props": {},
             "children": [
               {
-                "id": "collapsible.trigger.chevron",
-                "component": "Icon",
+                "id": "mosaic.side.top",
+                "component": "Box",
                 "props": {
-                  "name": "ui-chevron-right",
-                  "size": "sm",
-                  "tone": "neutral"
+                  "pressable": true
+                },
+                "children": [
+                  {
+                    "id": "mosaic.side.top.image",
+                    "component": "Image",
+                    "props": {
+                      "src": "https://example.com/preview.png",
+                      "alt": "Preview",
+                      "fit": "cover"
+                    },
+                    "children": [],
+                    "style": {
+                      "position": "absolute",
+                      "inset": 0,
+                      "width": "100%",
+                      "height": "100%"
+                    },
+                    "recipe": {
+                      "macro": "Mosaic",
+                      "part": "image",
+                      "props": {}
+                    },
+                    "accessibility": {
+                      "hidden": true
+                    }
+                  }
+                ],
+                "style": {
+                  "position": "relative",
+                  "overflow": "hidden",
+                  "minWidth": 0,
+                  "minHeight": 0,
+                  "cursor": "pointer",
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                  "flexBasis": 0,
+                  "width": "100%"
                 },
-                "children": [],
                 "recipe": {
-                  "macro": "Collapsible",
-                  "part": "chevron",
+                  "macro": "Mosaic",
+                  "part": "top",
                   "props": {
-                    "open": true
+                    "size": "small"
                   }
+                },
+                "accessibility": {
+                  "role": "button",
+                  "label": "Preview"
                 }
               },
               {
-                "id": "collapsible.trigger.title",
-                "component": "Text",
+                "id": "mosaic.side.bottom",
+                "component": "Box",
                 "props": {
-                  "text": "Advanced",
-                  "variant": "label",
-                  "lines": 1
+                  "pressable": true
                 },
-                "children": [],
+                "children": [
+                  {
+                    "id": "mosaic.side.bottom.image",
+                    "component": "Image",
+                    "props": {
+                      "src": "https://example.com/data.png",
+                      "alt": "Data",
+                      "fit": "cover"
+                    },
+                    "children": [],
+                    "style": {
+                      "position": "absolute",
+                      "inset": 0,
+                      "width": "100%",
+                      "height": "100%"
+                    },
+                    "recipe": {
+                      "macro": "Mosaic",
+                      "part": "image",
+                      "props": {}
+                    },
+                    "accessibility": {
+                      "hidden": true
+                    }
+                  },
+                  {
+                    "id": "mosaic.side.bottom.more",
+                    "component": "Box",
+                    "props": {},
+                    "children": [
+                      {
+                        "id": "mosaic.side.bottom.more.moreLabel",
+                        "component": "Text",
+                        "props": {
+                          "text": {
+                            "call": "fill",
+                            "args": {
+                              "template": "$string.morePictures",
+                              "params": {
+                                "count": 1
+                              }
+                            }
+                          },
+                          "lines": 1
+                        },
+                        "children": [],
+                        "recipe": {
+                          "macro": "Mosaic",
+                          "part": "moreLabel",
+                          "props": {}
+                        }
+                      }
+                    ],
+                    "style": {
+                      "position": "absolute",
+                      "inset": 0,
+                      "display": "flex",
+                      "alignItems": "center",
+                      "justifyContent": "center"
+                    },
+                    "recipe": {
+                      "macro": "Mosaic",
+                      "part": "more",
+                      "props": {}
+                    },
+                    "accessibility": {
+                      "hidden": true
+                    }
+                  }
+                ],
                 "style": {
+                  "position": "relative",
+                  "overflow": "hidden",
+                  "minWidth": 0,
+                  "minHeight": 0,
+                  "cursor": "pointer",
                   "flexGrow": 1,
-                  "minWidth": 0
+                  "flexShrink": 1,
+                  "flexBasis": 0,
+                  "width": "100%"
                 },
                 "recipe": {
-                  "macro": "Collapsible",
-                  "part": "title",
-                  "props": {}
-                }
-              }
-            ],
-            "style": {
-              "display": "flex",
-              "flexDirection": "row",
-              "alignItems": "center",
-              "gap": "$spacing.sm",
-              "minHeight": "$control.row",
-              "paddingHorizontal": "$spacing.sm",
-              "borderRadius": "$radius.md"
-            },
-            "recipe": {
-              "macro": "Collapsible",
-              "part": "trigger",
-              "props": {
-                "open": true
-              }
-            },
-            "accessibility": {
-              "role": "button",
-              "expanded": true
-            }
-          },
-          {
-            "id": "collapsible.body",
-            "component": "Box",
-            "props": {},
-            "children": [
-              {
-                "id": "collapsible-child",
-                "component": "Text",
-                "props": {
-                  "text": "Child"
+                  "macro": "Mosaic",
+                  "part": "bottom",
+                  "props": {
+                    "size": "small"
+                  }
                 },
-                "children": []
+                "accessibility": {
+                  "role": "button",
+                  "label": {
+                    "call": "fill",
+                    "args": {
+                      "template": "$string.morePicturesLabel",
+                      "params": {
+                        "alt": "Data",
+                        "count": 1
+                      }
+                    }
+                  }
+                }
               }
             ],
             "style": {
               "display": "flex",
               "flexDirection": "column",
-              "gap": "$spacing.md",
-              "paddingHorizontal": "$spacing.sm"
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "flexBasis": 0,
+              "minWidth": 0,
+              "height": "100%"
             },
             "recipe": {
-              "macro": "Collapsible",
-              "part": "body",
+              "macro": "Mosaic",
+              "part": "side",
               "props": {}
             }
           }
         ],
         "style": {
           "display": "flex",
-          "flexDirection": "column",
-          "gap": "$spacing.xs"
+          "flexDirection": "row",
+          "width": "100%",
+          "aspectRatio": 1.6,
+          "minWidth": 0
         },
         "recipe": {
-          "macro": "Collapsible",
+          "macro": "Mosaic",
           "part": "root",
           "props": {}
+        },
+        "accessibility": {
+          "role": "group"
         }
       }
     },
     {
-      "name": "Collapsible/open=false",
+      "name": "Collapsible/example",
+      "input": {
+        "id": "collapsible",
+        "component": "Collapsible",
+        "props": {
+          "title": "Advanced",
+          "open": false
+        },
+        "children": [
+          {
+            "id": "collapsible-child",
+            "component": "Text",
+            "props": {
+              "text": "Child"
+            }
+          }
+        ]
+      },
+      "expected": {
+        "id": "collapsible",
+        "component": "Box",
+        "props": {},
+        "children": [
+          {
+            "id": "collapsible.trigger",
+            "component": "Box",
+            "props": {
+              "pressable": true
+            },
+            "children": [
+              {
+                "id": "collapsible.trigger.chevron",
+                "component": "Icon",
+                "props": {
+                  "name": "ui-chevron-right",
+                  "size": "sm",
+                  "tone": "neutral"
+                },
+                "children": [],
+                "recipe": {
+                  "macro": "Collapsible",
+                  "part": "chevron",
+                  "props": {
+                    "open": false
+                  }
+                }
+              },
+              {
+                "id": "collapsible.trigger.title",
+                "component": "Text",
+                "props": {
+                  "text": "Advanced",
+                  "variant": "label",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexGrow": 1,
+                  "minWidth": 0
+                },
+                "recipe": {
+                  "macro": "Collapsible",
+                  "part": "title",
+                  "props": {}
+                }
+              }
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": "$spacing.sm",
+              "minHeight": "$control.row",
+              "paddingHorizontal": "$spacing.sm",
+              "borderRadius": "$radius.md"
+            },
+            "recipe": {
+              "macro": "Collapsible",
+              "part": "trigger",
+              "props": {
+                "open": false
+              }
+            },
+            "accessibility": {
+              "role": "button",
+              "expanded": false
+            }
+          }
+        ],
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "gap": "$spacing.xs"
+        },
+        "recipe": {
+          "macro": "Collapsible",
+          "part": "root",
+          "props": {}
+        }
+      }
+    },
+    {
+      "name": "Collapsible/open=true",
+      "input": {
+        "id": "collapsible",
+        "component": "Collapsible",
+        "props": {
+          "title": "Advanced",
+          "open": true
+        },
+        "children": [
+          {
+            "id": "collapsible-child",
+            "component": "Text",
+            "props": {
+              "text": "Child"
+            }
+          }
+        ]
+      },
+      "expected": {
+        "id": "collapsible",
+        "component": "Box",
+        "props": {},
+        "children": [
+          {
+            "id": "collapsible.trigger",
+            "component": "Box",
+            "props": {
+              "pressable": true
+            },
+            "children": [
+              {
+                "id": "collapsible.trigger.chevron",
+                "component": "Icon",
+                "props": {
+                  "name": "ui-chevron-right",
+                  "size": "sm",
+                  "tone": "neutral"
+                },
+                "children": [],
+                "recipe": {
+                  "macro": "Collapsible",
+                  "part": "chevron",
+                  "props": {
+                    "open": true
+                  }
+                }
+              },
+              {
+                "id": "collapsible.trigger.title",
+                "component": "Text",
+                "props": {
+                  "text": "Advanced",
+                  "variant": "label",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexGrow": 1,
+                  "minWidth": 0
+                },
+                "recipe": {
+                  "macro": "Collapsible",
+                  "part": "title",
+                  "props": {}
+                }
+              }
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": "$spacing.sm",
+              "minHeight": "$control.row",
+              "paddingHorizontal": "$spacing.sm",
+              "borderRadius": "$radius.md"
+            },
+            "recipe": {
+              "macro": "Collapsible",
+              "part": "trigger",
+              "props": {
+                "open": true
+              }
+            },
+            "accessibility": {
+              "role": "button",
+              "expanded": true
+            }
+          },
+          {
+            "id": "collapsible.body",
+            "component": "Box",
+            "props": {},
+            "children": [
+              {
+                "id": "collapsible-child",
+                "component": "Text",
+                "props": {
+                  "text": "Child"
+                },
+                "children": []
+              }
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "gap": "$spacing.md",
+              "paddingHorizontal": "$spacing.sm"
+            },
+            "recipe": {
+              "macro": "Collapsible",
+              "part": "body",
+              "props": {}
+            }
+          }
+        ],
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "gap": "$spacing.xs"
+        },
+        "recipe": {
+          "macro": "Collapsible",
+          "part": "root",
+          "props": {}
+        }
+      }
+    },
+    {
+      "name": "Collapsible/open=false",
       "input": {
         "id": "collapsible",
         "component": "Collapsible",
@@ -13492,6 +13790,319 @@
         }
       }
     },
+    {
+      "name": "Outline/example",
+      "input": {
+        "id": "outline",
+        "component": "Outline",
+        "props": {
+          "caption": "Outline",
+          "value": "part-a",
+          "items": [
+            {
+              "id": "current",
+              "title": "Current state"
+            },
+            {
+              "id": "part-a",
+              "title": "Part A: editor-first creation",
+              "count": 5
+            },
+            {
+              "id": "part-b",
+              "title": "Part B: MCP for eApps",
+              "count": 2
+            }
+          ]
+        }
+      },
+      "expected": {
+        "id": "outline",
+        "component": "Box",
+        "props": {},
+        "children": [
+          {
+            "id": "outline.caption",
+            "component": "Text",
+            "props": {
+              "text": "Outline",
+              "variant": "caption",
+              "lines": 1
+            },
+            "children": [],
+            "recipe": {
+              "macro": "Outline",
+              "part": "caption",
+              "props": {}
+            },
+            "accessibility": {
+              "hidden": true
+            }
+          },
+          {
+            "id": "outline.row.0",
+            "component": "Box",
+            "props": {
+              "pressable": true
+            },
+            "children": [
+              {
+                "id": "outline.row.0.title",
+                "component": "Text",
+                "props": {
+                  "text": "Current state",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                  "flexBasis": 0,
+                  "minWidth": 0
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "title",
+                  "props": {
+                    "active": false
+                  }
+                }
+              }
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": "$spacing.xs",
+              "position": "relative",
+              "height": "$control.rowCompact",
+              "paddingHorizontal": "$spacing.sm",
+              "minWidth": 0,
+              "overflow": "hidden",
+              "cursor": "pointer"
+            },
+            "recipe": {
+              "macro": "Outline",
+              "part": "row",
+              "props": {
+                "active": false
+              }
+            },
+            "accessibility": {
+              "role": "link",
+              "label": "Current state",
+              "current": false
+            }
+          },
+          {
+            "id": "outline.row.1",
+            "component": "Box",
+            "props": {
+              "pressable": true
+            },
+            "children": [
+              {
+                "id": "outline.row.1.bar",
+                "component": "Box",
+                "props": {},
+                "children": [],
+                "style": {
+                  "position": "absolute",
+                  "insetInlineStart": 0,
+                  "top": 0,
+                  "bottom": 0,
+                  "width": 2
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "bar",
+                  "props": {}
+                },
+                "accessibility": {
+                  "hidden": true
+                }
+              },
+              {
+                "id": "outline.row.1.title",
+                "component": "Text",
+                "props": {
+                  "text": "Part A: editor-first creation",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                  "flexBasis": 0,
+                  "minWidth": 0
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "title",
+                  "props": {
+                    "active": true
+                  }
+                }
+              },
+              {
+                "id": "outline.row.1.count",
+                "component": "Text",
+                "props": {
+                  "text": "· 5",
+                  "variant": "caption",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexShrink": 0
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "count",
+                  "props": {}
+                },
+                "accessibility": {
+                  "hidden": true
+                }
+              }
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": "$spacing.xs",
+              "position": "relative",
+              "height": "$control.rowCompact",
+              "paddingHorizontal": "$spacing.sm",
+              "minWidth": 0,
+              "overflow": "hidden",
+              "cursor": "pointer"
+            },
+            "recipe": {
+              "macro": "Outline",
+              "part": "row",
+              "props": {
+                "active": true
+              }
+            },
+            "accessibility": {
+              "role": "link",
+              "label": {
+                "call": "fill",
+                "args": {
+                  "template": "$string.outlineRow",
+                  "params": {
+                    "title": "Part A: editor-first creation",
+                    "count": 5
+                  }
+                }
+              },
+              "current": "location"
+            }
+          },
+          {
+            "id": "outline.row.2",
+            "component": "Box",
+            "props": {
+              "pressable": true
+            },
+            "children": [
+              {
+                "id": "outline.row.2.title",
+                "component": "Text",
+                "props": {
+                  "text": "Part B: MCP for eApps",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                  "flexBasis": 0,
+                  "minWidth": 0
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "title",
+                  "props": {
+                    "active": false
+                  }
+                }
+              },
+              {
+                "id": "outline.row.2.count",
+                "component": "Text",
+                "props": {
+                  "text": "· 2",
+                  "variant": "caption",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexShrink": 0
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "count",
+                  "props": {}
+                },
+                "accessibility": {
+                  "hidden": true
+                }
+              }
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": "$spacing.xs",
+              "position": "relative",
+              "height": "$control.rowCompact",
+              "paddingHorizontal": "$spacing.sm",
+              "minWidth": 0,
+              "overflow": "hidden",
+              "cursor": "pointer"
+            },
+            "recipe": {
+              "macro": "Outline",
+              "part": "row",
+              "props": {
+                "active": false
+              }
+            },
+            "accessibility": {
+              "role": "link",
+              "label": {
+                "call": "fill",
+                "args": {
+                  "template": "$string.outlineRow",
+                  "params": {
+                    "title": "Part B: MCP for eApps",
+                    "count": 2
+                  }
+                }
+              },
+              "current": false
+            }
+          }
+        ],
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "gap": "$spacing.xxs",
+          "minWidth": 0
+        },
+        "recipe": {
+          "macro": "Outline",
+          "part": "root",
+          "props": {}
+        },
+        "accessibility": {
+          "role": "navigation",
+          "label": "Outline"
+        }
+      }
+    },
     {
       "name": "Stepper/example",
       "input": {
@@ -32536,6 +33147,7 @@
           "display": "flex",
           "flexDirection": "row",
           "alignItems": "stretch",
+          "gap": "$spacing.lg",
           "width": "100%",
           "minHeight": 0
         },
@@ -37335,6 +37947,516 @@
         }
       }
     },
+    {
+      "name": "Outline/bound:value",
+      "input": {
+        "id": "outline",
+        "component": "Outline",
+        "props": {
+          "caption": "Outline",
+          "value": {
+            "path": "/value"
+          },
+          "items": [
+            {
+              "id": "current",
+              "title": "Current state"
+            },
+            {
+              "id": "part-a",
+              "title": "Part A: editor-first creation",
+              "count": 5
+            },
+            {
+              "id": "part-b",
+              "title": "Part B: MCP for eApps",
+              "count": 2
+            }
+          ]
+        }
+      },
+      "expected": {
+        "id": "outline",
+        "component": "Box",
+        "props": {},
+        "children": [
+          {
+            "id": "outline.caption",
+            "component": "Text",
+            "props": {
+              "text": "Outline",
+              "variant": "caption",
+              "lines": 1
+            },
+            "children": [],
+            "recipe": {
+              "macro": "Outline",
+              "part": "caption",
+              "props": {}
+            },
+            "accessibility": {
+              "hidden": true
+            }
+          },
+          {
+            "id": "outline.row.0",
+            "component": "Box",
+            "props": {
+              "pressable": true
+            },
+            "children": [
+              {
+                "id": "outline.row.0.bar",
+                "component": "Box",
+                "props": {},
+                "children": [],
+                "style": {
+                  "position": "absolute",
+                  "insetInlineStart": 0,
+                  "top": 0,
+                  "bottom": 0,
+                  "width": 2
+                },
+                "visible": {
+                  "call": "eq",
+                  "args": {
+                    "a": "current",
+                    "b": {
+                      "path": "/value"
+                    }
+                  }
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "bar",
+                  "props": {}
+                },
+                "accessibility": {
+                  "hidden": true
+                }
+              },
+              {
+                "id": "outline.row.0.title",
+                "component": "Text",
+                "props": {
+                  "text": "Current state",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                  "flexBasis": 0,
+                  "minWidth": 0
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "title",
+                  "props": {
+                    "active": {
+                      "call": "eq",
+                      "args": {
+                        "a": "current",
+                        "b": {
+                          "path": "/value"
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": "$spacing.xs",
+              "position": "relative",
+              "height": "$control.rowCompact",
+              "paddingHorizontal": "$spacing.sm",
+              "minWidth": 0,
+              "overflow": "hidden",
+              "cursor": "pointer"
+            },
+            "recipe": {
+              "macro": "Outline",
+              "part": "row",
+              "props": {
+                "active": {
+                  "call": "eq",
+                  "args": {
+                    "a": "current",
+                    "b": {
+                      "path": "/value"
+                    }
+                  }
+                }
+              }
+            },
+            "on": {
+              "press": {
+                "functionCall": {
+                  "call": "set",
+                  "args": {
+                    "path": "/value",
+                    "value": "current"
+                  }
+                }
+              }
+            },
+            "accessibility": {
+              "role": "link",
+              "label": "Current state",
+              "current": {
+                "call": "cond",
+                "args": {
+                  "if": {
+                    "call": "eq",
+                    "args": {
+                      "a": "current",
+                      "b": {
+                        "path": "/value"
+                      }
+                    }
+                  },
+                  "then": "location",
+                  "else": false
+                }
+              }
+            }
+          },
+          {
+            "id": "outline.row.1",
+            "component": "Box",
+            "props": {
+              "pressable": true
+            },
+            "children": [
+              {
+                "id": "outline.row.1.bar",
+                "component": "Box",
+                "props": {},
+                "children": [],
+                "style": {
+                  "position": "absolute",
+                  "insetInlineStart": 0,
+                  "top": 0,
+                  "bottom": 0,
+                  "width": 2
+                },
+                "visible": {
+                  "call": "eq",
+                  "args": {
+                    "a": "part-a",
+                    "b": {
+                      "path": "/value"
+                    }
+                  }
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "bar",
+                  "props": {}
+                },
+                "accessibility": {
+                  "hidden": true
+                }
+              },
+              {
+                "id": "outline.row.1.title",
+                "component": "Text",
+                "props": {
+                  "text": "Part A: editor-first creation",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                  "flexBasis": 0,
+                  "minWidth": 0
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "title",
+                  "props": {
+                    "active": {
+                      "call": "eq",
+                      "args": {
+                        "a": "part-a",
+                        "b": {
+                          "path": "/value"
+                        }
+                      }
+                    }
+                  }
+                }
+              },
+              {
+                "id": "outline.row.1.count",
+                "component": "Text",
+                "props": {
+                  "text": "· 5",
+                  "variant": "caption",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexShrink": 0
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "count",
+                  "props": {}
+                },
+                "accessibility": {
+                  "hidden": true
+                }
+              }
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": "$spacing.xs",
+              "position": "relative",
+              "height": "$control.rowCompact",
+              "paddingHorizontal": "$spacing.sm",
+              "minWidth": 0,
+              "overflow": "hidden",
+              "cursor": "pointer"
+            },
+            "recipe": {
+              "macro": "Outline",
+              "part": "row",
+              "props": {
+                "active": {
+                  "call": "eq",
+                  "args": {
+                    "a": "part-a",
+                    "b": {
+                      "path": "/value"
+                    }
+                  }
+                }
+              }
+            },
+            "on": {
+              "press": {
+                "functionCall": {
+                  "call": "set",
+                  "args": {
+                    "path": "/value",
+                    "value": "part-a"
+                  }
+                }
+              }
+            },
+            "accessibility": {
+              "role": "link",
+              "label": {
+                "call": "fill",
+                "args": {
+                  "template": "$string.outlineRow",
+                  "params": {
+                    "title": "Part A: editor-first creation",
+                    "count": 5
+                  }
+                }
+              },
+              "current": {
+                "call": "cond",
+                "args": {
+                  "if": {
+                    "call": "eq",
+                    "args": {
+                      "a": "part-a",
+                      "b": {
+                        "path": "/value"
+                      }
+                    }
+                  },
+                  "then": "location",
+                  "else": false
+                }
+              }
+            }
+          },
+          {
+            "id": "outline.row.2",
+            "component": "Box",
+            "props": {
+              "pressable": true
+            },
+            "children": [
+              {
+                "id": "outline.row.2.bar",
+                "component": "Box",
+                "props": {},
+                "children": [],
+                "style": {
+                  "position": "absolute",
+                  "insetInlineStart": 0,
+                  "top": 0,
+                  "bottom": 0,
+                  "width": 2
+                },
+                "visible": {
+                  "call": "eq",
+                  "args": {
+                    "a": "part-b",
+                    "b": {
+                      "path": "/value"
+                    }
+                  }
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "bar",
+                  "props": {}
+                },
+                "accessibility": {
+                  "hidden": true
+                }
+              },
+              {
+                "id": "outline.row.2.title",
+                "component": "Text",
+                "props": {
+                  "text": "Part B: MCP for eApps",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                  "flexBasis": 0,
+                  "minWidth": 0
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "title",
+                  "props": {
+                    "active": {
+                      "call": "eq",
+                      "args": {
+                        "a": "part-b",
+                        "b": {
+                          "path": "/value"
+                        }
+                      }
+                    }
+                  }
+                }
+              },
+              {
+                "id": "outline.row.2.count",
+                "component": "Text",
+                "props": {
+                  "text": "· 2",
+                  "variant": "caption",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexShrink": 0
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "count",
+                  "props": {}
+                },
+                "accessibility": {
+                  "hidden": true
+                }
+              }
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": "$spacing.xs",
+              "position": "relative",
+              "height": "$control.rowCompact",
+              "paddingHorizontal": "$spacing.sm",
+              "minWidth": 0,
+              "overflow": "hidden",
+              "cursor": "pointer"
+            },
+            "recipe": {
+              "macro": "Outline",
+              "part": "row",
+              "props": {
+                "active": {
+                  "call": "eq",
+                  "args": {
+                    "a": "part-b",
+                    "b": {
+                      "path": "/value"
+                    }
+                  }
+                }
+              }
+            },
+            "on": {
+              "press": {
+                "functionCall": {
+                  "call": "set",
+                  "args": {
+                    "path": "/value",
+                    "value": "part-b"
+                  }
+                }
+              }
+            },
+            "accessibility": {
+              "role": "link",
+              "label": {
+                "call": "fill",
+                "args": {
+                  "template": "$string.outlineRow",
+                  "params": {
+                    "title": "Part B: MCP for eApps",
+                    "count": 2
+                  }
+                }
+              },
+              "current": {
+                "call": "cond",
+                "args": {
+                  "if": {
+                    "call": "eq",
+                    "args": {
+                      "a": "part-b",
+                      "b": {
+                        "path": "/value"
+                      }
+                    }
+                  },
+                  "then": "location",
+                  "else": false
+                }
+              }
+            }
+          }
+        ],
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "gap": "$spacing.xxs",
+          "minWidth": 0
+        },
+        "recipe": {
+          "macro": "Outline",
+          "part": "root",
+          "props": {}
+        },
+        "accessibility": {
+          "role": "navigation",
+          "label": "Outline"
+        }
+      }
+    },
     {
       "name": "Stepper/bound:current",
       "input": {