@adia-ai/gen-ui 0.8.39 → 0.8.41

package/corpus/chunks/date-range-picker-comparison.json

@@ -0,0 +1,50 @@
+{
+  "name": "date-range-picker-comparison",
+  "kind": "block",
+  "primary": "field-ui",
+  "page": "/packages/web-components/components/date-range-picker/date-range-picker.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "label": "Analytics period"
+  },
+  "html": "<field-ui\n                label=\"Analytics period\">\n        <date-range-picker-ui\n          name=\"period\"\n          comparison\n          value='{\"from\":\"2026-05-01\",\"to\":\"2026-05-31\"}'\n          compare-value='{\"from\":\"2026-04-01\",\"to\":\"2026-04-30\"}'>\n        </date-range-picker-ui>\n      </field-ui>",
+  "source": "packages/web-components/components/date-range-picker/date-range-picker.examples.html",
+  "metadata": {
+    "domain": "data",
+    "description": "Analytics comparison filter — field-ui wrapping a comparison-mode date-range-picker, pairing a primary period with a 'Previous period' compare value. Standard analytics/report filter pattern.",
+    "keywords": [
+      "date",
+      "range",
+      "picker",
+      "comparison",
+      "analytics",
+      "period",
+      "previous",
+      "compare",
+      "filter",
+      "dashboard",
+      "report",
+      "field"
+    ]
+  },
+  "captured_at": "2026-08-17T03:07:15.316Z",
+  "template": [
+    {
+      "id": "period",
+      "component": "DateRangePicker",
+      "compareValue": "{\"from\":\"2026-04-01\",\"to\":\"2026-04-30\"}",
+      "comparison": true,
+      "name": "period",
+      "value": "{\"from\":\"2026-05-01\",\"to\":\"2026-05-31\"}"
+    },
+    {
+      "id": "root",
+      "component": "Field",
+      "label": "Analytics period",
+      "children": [
+        "period"
+      ]
+    }
+  ]
+}

package/corpus/chunks/date-time-picker-form.json

@@ -8,7 +8,7 @@
     "radio-button-group"
   ],
   "attrs": {},
-  "html": "<card-ui>\n      <header>\n        <h3>Schedule meeting</h3>\n      </header>\n      <section>\n        <col-ui gap=\"4\">\n          <grid-ui columns=\"1 2@sm\" gap=\"3\">\n            <field-ui label=\"Date\">\n              <calendar-picker-ui></calendar-picker-ui>\n            </field-ui>\n            <field-ui label=\"Time\">\n              <input-ui type=\"time\" value=\"14:30\"></input-ui>\n            </field-ui>\n          </grid-ui>\n          <field-ui label=\"Timezone\">\n            <select-ui>\n              <option>America/New_York</option>\n              <option>America/Los_Angeles</option>\n              <option>Europe/London</option>\n              <option>Asia/Tokyo</option>\n            </select-ui>\n          </field-ui>\n          <field-ui label=\"Repeats\"><!-- nested: radio-button-group --></field-ui>\n        </col-ui>\n      </section>\n      <footer>\n        <row-ui gap=\"3\">\n          <button-ui text=\"Cancel\" variant=\"outline\"></button-ui>\n          <button-ui text=\"Schedule\" variant=\"primary\"></button-ui>\n        </row-ui>\n      </footer>\n  </card-ui>",
+  "html": "<card-ui>\n      <header>\n        <h3>Schedule meeting</h3>\n      </header>\n      <section>\n        <col-ui gap=\"4\">\n          <grid-ui columns=\"1 2@sm\" gap=\"3\">\n            <field-ui label=\"Date\">\n              <calendar-picker-ui></calendar-picker-ui>\n            </field-ui>\n            <field-ui label=\"Time\">\n              <time-picker-ui value=\"14:30\"></time-picker-ui>\n            </field-ui>\n          </grid-ui>\n          <field-ui label=\"Timezone\">\n            <select-ui>\n              <option>America/New_York</option>\n              <option>America/Los_Angeles</option>\n              <option>Europe/London</option>\n              <option>Asia/Tokyo</option>\n            </select-ui>\n          </field-ui>\n          <field-ui label=\"Repeats\"><!-- nested: radio-button-group --></field-ui>\n        </col-ui>\n      </section>\n      <footer>\n        <row-ui gap=\"3\">\n          <button-ui text=\"Cancel\" variant=\"outline\"></button-ui>\n          <button-ui text=\"Schedule\" variant=\"primary\"></button-ui>\n        </row-ui>\n      </footer>\n  </card-ui>",
   "source": "catalog/ui-patterns/v050-form-blocks/v050-form-blocks.contents.html",
   "metadata": {
     "domain": "forms",
@@ -27,7 +27,7 @@
       "card"
     ]
   },
-  "captured_at": "2026-07-17T20:08:04.842Z",
+  "captured_at": "2026-08-16T23:54:36.437Z",
   "template": [
     {
       "id": "text",
@@ -55,9 +55,8 @@
       ]
     },
     {
-      "id": "input",
-      "component": "Input",
-      "type": "time",
+      "id": "time-picker",
+      "component": "TimePicker",
       "value": "14:30"
     },
     {
@@ -65,7 +64,7 @@
       "component": "Field",
       "label": "Time",
       "children": [
-        "input"
+        "time-picker"
       ]
     },
     {

package/corpus/chunks/drawer-report.json

@@ -9,7 +9,7 @@
     "side": "right",
     "size": "md"
   },
-  "html": "<drawer-ui id=\"drawer-report\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"chart-line\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong data-report-name>Report</text-ui>\n      <badge-ui data-report-status text=\"Active\" variant=\"success\"></badge-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\" data-report-meta>Scheduled delivery configuration.</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <grid-ui columns=\"1 2@sm\" gap=\"3\">\n        <card-ui\n          ><section><stat-ui label=\"Last run\" data-report-last value=\"—\"></stat-ui></section\n        ></card-ui>\n        <card-ui\n          ><section><stat-ui label=\"Recipients\" data-report-recipients value=\"—\"></stat-ui></section\n        ></card-ui>\n      </grid-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Schedule</text-ui>\n        <field-ui label=\"Frequency\">\n          <select-ui value=\"weekly\">\n            <option value=\"hourly\">Hourly</option>\n            <option value=\"daily\">Daily</option>\n            <option value=\"weekly\">Weekly</option>\n            <option value=\"monthly\">Monthly</option>\n            <option value=\"realtime\">Real-time (triggered)</option>\n          </select-ui>\n        </field-ui>\n        <row-ui gap=\"2\">\n          <field-ui label=\"Day\">\n            <select-ui value=\"mon\" grow>\n              <option value=\"mon\">Monday</option>\n              <option value=\"tue\">Tuesday</option>\n              <option value=\"wed\">Wednesday</option>\n              <option value=\"thu\">Thursday</option>\n              <option value=\"fri\">Friday</option>\n            </select-ui>\n          </field-ui>\n          <field-ui label=\"Time\">\n            <input-ui value=\"09:00\" type=\"time\" grow></input-ui>\n          </field-ui>\n          <field-ui label=\"Timezone\">\n            <select-ui value=\"utc\" grow>\n              <option value=\"utc\">UTC</option>\n              <option value=\"pst\">PST</option>\n              <option value=\"est\">EST</option>\n              <option value=\"cet\">CET</option>\n            </select-ui>\n          </field-ui>\n        </row-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Delivery</text-ui>\n        <field-ui label=\"Recipients\">\n          <textarea-ui rows=\"2\" value=\"alex@acme.com, sarah@acme.com, finance@acme.com\" hint=\"Comma-separated email addresses.\"></textarea-ui>\n        </field-ui>\n        <field-ui label=\"Format\">\n          <select-ui value=\"pdf\">\n            <option value=\"pdf\">PDF</option>\n            <option value=\"csv\">CSV</option>\n            <option value=\"xlsx\">Excel (xlsx)</option>\n            <option value=\"slack\">Post to Slack</option>\n          </select-ui>\n        </field-ui>\n        <field-ui label=\"Attach raw data export\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"Include AI summary\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Scope</text-ui>\n        <field-ui label=\"Date range\">\n          <select-ui value=\"last-7-days\">\n            <option value=\"last-24h\">Last 24 hours</option>\n            <option value=\"last-7-days\">Last 7 days</option>\n            <option value=\"last-30-days\">Last 30 days</option>\n            <option value=\"mtd\">Month-to-date</option>\n            <option value=\"custom\">Custom range</option>\n          </select-ui>\n        </field-ui>\n      </col-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Pause\" icon=\"pause\" variant=\"ghost\"></button-ui>\n      <button-ui text=\"Run now\" icon=\"play\" variant=\"outline\"></button-ui>\n      <button-ui text=\"Save changes\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
+  "html": "<drawer-ui id=\"drawer-report\" side=\"right\" size=\"md\">\n  <header>\n    <span slot=\"icon\">\n      <avatar-ui icon=\"chart-line\"></avatar-ui>\n    </span>\n    <span slot=\"heading\">\n      <text-ui strong data-report-name>Report</text-ui>\n      <badge-ui data-report-status text=\"Active\" variant=\"success\"></badge-ui>\n    </span>\n    <span slot=\"action\"></span>\n  </header>\n  <section>\n    <text-ui color=\"subtle\" size=\"sm\" data-report-meta>Scheduled delivery configuration.</text-ui>\n  </section>\n  <section>\n    <col-ui gap=\"4\">\n      <grid-ui columns=\"1 2@sm\" gap=\"3\">\n        <card-ui\n          ><section><stat-ui label=\"Last run\" data-report-last value=\"—\"></stat-ui></section\n        ></card-ui>\n        <card-ui\n          ><section><stat-ui label=\"Recipients\" data-report-recipients value=\"—\"></stat-ui></section\n        ></card-ui>\n      </grid-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Schedule</text-ui>\n        <field-ui label=\"Frequency\">\n          <select-ui value=\"weekly\">\n            <option value=\"hourly\">Hourly</option>\n            <option value=\"daily\">Daily</option>\n            <option value=\"weekly\">Weekly</option>\n            <option value=\"monthly\">Monthly</option>\n            <option value=\"realtime\">Real-time (triggered)</option>\n          </select-ui>\n        </field-ui>\n        <row-ui gap=\"2\">\n          <field-ui label=\"Day\">\n            <select-ui value=\"mon\" grow>\n              <option value=\"mon\">Monday</option>\n              <option value=\"tue\">Tuesday</option>\n              <option value=\"wed\">Wednesday</option>\n              <option value=\"thu\">Thursday</option>\n              <option value=\"fri\">Friday</option>\n            </select-ui>\n          </field-ui>\n          <field-ui label=\"Time\">\n            <time-picker-ui value=\"09:00\" grow></time-picker-ui>\n          </field-ui>\n          <field-ui label=\"Timezone\">\n            <select-ui value=\"utc\" grow>\n              <option value=\"utc\">UTC</option>\n              <option value=\"pst\">PST</option>\n              <option value=\"est\">EST</option>\n              <option value=\"cet\">CET</option>\n            </select-ui>\n          </field-ui>\n        </row-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Delivery</text-ui>\n        <field-ui label=\"Recipients\">\n          <textarea-ui rows=\"2\" value=\"alex@acme.com, sarah@acme.com, finance@acme.com\" hint=\"Comma-separated email addresses.\"></textarea-ui>\n        </field-ui>\n        <field-ui label=\"Format\">\n          <select-ui value=\"pdf\">\n            <option value=\"pdf\">PDF</option>\n            <option value=\"csv\">CSV</option>\n            <option value=\"xlsx\">Excel (xlsx)</option>\n            <option value=\"slack\">Post to Slack</option>\n          </select-ui>\n        </field-ui>\n        <field-ui label=\"Attach raw data export\" inline>\n          <switch-ui checked></switch-ui>\n        </field-ui>\n        <field-ui label=\"Include AI summary\" inline>\n          <switch-ui></switch-ui>\n        </field-ui>\n      </col-ui>\n      <divider-ui></divider-ui>\n      <col-ui gap=\"3\">\n        <text-ui strong>Scope</text-ui>\n        <field-ui label=\"Date range\">\n          <select-ui value=\"last-7-days\">\n            <option value=\"last-24h\">Last 24 hours</option>\n            <option value=\"last-7-days\">Last 7 days</option>\n            <option value=\"last-30-days\">Last 30 days</option>\n            <option value=\"mtd\">Month-to-date</option>\n            <option value=\"custom\">Custom range</option>\n          </select-ui>\n        </field-ui>\n      </col-ui>\n    </col-ui>\n  </section>\n  <footer slot=\"footer\">\n    <grid-ui>\n      <button-ui text=\"Pause\" icon=\"pause\" variant=\"ghost\"></button-ui>\n      <button-ui text=\"Run now\" icon=\"play\" variant=\"outline\"></button-ui>\n      <button-ui text=\"Save changes\" variant=\"primary\" onclick=\"this.closest('drawer-ui').open = false\"></button-ui>\n    </grid-ui>\n  </footer>\n</drawer-ui>",
   "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
   "metadata": {
     "domain": "data",
@@ -24,7 +24,7 @@
       "analytics"
     ]
   },
-  "captured_at": "2026-07-17T20:08:04.842Z",
+  "captured_at": "2026-08-16T23:54:36.437Z",
   "template": [
     {
       "id": "avatar",
@@ -241,9 +241,8 @@
       ]
     },
     {
-      "id": "input",
-      "component": "Input",
-      "type": "time",
+      "id": "time-picker",
+      "component": "TimePicker",
       "value": "09:00"
     },
     {
@@ -251,7 +250,7 @@
       "component": "Field",
       "label": "Time",
       "children": [
-        "input"
+        "time-picker"
       ]
     },
     {

package/corpus/chunks/filter-bar-filter-bar-with-table.json

@@ -30,7 +30,7 @@
       "query"
     ]
   },
-  "captured_at": "2026-08-13T16:17:52.286Z",
+  "captured_at": "2026-08-17T00:21:29.018Z",
   "template": [
     {
       "id": "tag",
@@ -66,8 +66,8 @@
       ]
     },
     {
-      "id": "search-ui",
-      "component": "search-ui",
+      "id": "search",
+      "component": "Search",
       "placeholder": "Search…"
     },
     {
@@ -76,7 +76,7 @@
       "overflow": "none",
       "children": [
         "row",
-        "search-ui"
+        "search"
       ]
     },
     {

package/corpus/chunks/form-system-live-demo.json

@@ -29,7 +29,7 @@
       "inline"
     ]
   },
-  "captured_at": "2026-07-29T09:15:19.217Z",
+  "captured_at": "2026-08-17T04:06:20.963Z",
   "template": [
     {
       "id": "fullname",

package/corpus/chunks/image-thumbnail-grid.json

@@ -9,7 +9,7 @@
     "columns": "1 3@md",
     "gap": "3"
   },
-  "html": "<grid-ui\n        columns=\"1 3@md\"\n        gap=\"3\">\n        <image-ui src=\"https://picsum.photos/seed/rev-1/480/320\" alt=\"Quarterly chart export\" radius=\"md\" style=\"aspect-ratio: 3/2\"></image-ui>\n        <image-ui src=\"https://picsum.photos/seed/rev-2/480/320\" alt=\"Top account visualization\" radius=\"md\" style=\"aspect-ratio: 3/2\"></image-ui>\n        <image-ui src=\"https://picsum.photos/seed/rev-3/480/320\" alt=\"Regional breakdown\" radius=\"md\" style=\"aspect-ratio: 3/2\"></image-ui>\n      </grid-ui>",
+  "html": "<grid-ui\n        columns=\"1 3@md\"\n        gap=\"3\">\n        <image-ui src=\"https://picsum.photos/seed/rev-1/480/320\" alt=\"Quarterly chart export\" corner-radius=\"md\" style=\"aspect-ratio: 3/2\"></image-ui>\n        <image-ui src=\"https://picsum.photos/seed/rev-2/480/320\" alt=\"Top account visualization\" corner-radius=\"md\" style=\"aspect-ratio: 3/2\"></image-ui>\n        <image-ui src=\"https://picsum.photos/seed/rev-3/480/320\" alt=\"Regional breakdown\" corner-radius=\"md\" style=\"aspect-ratio: 3/2\"></image-ui>\n      </grid-ui>",
   "source": "apps/genui/app/gen-ui-feed/gen-ui-feed.contents.html",
   "metadata": {
     "domain": "display",
@@ -39,27 +39,27 @@
       "grid"
     ]
   },
-  "captured_at": "2026-07-17T20:08:04.842Z",
+  "captured_at": "2026-08-17T03:17:46.002Z",
   "template": [
     {
       "id": "image",
       "component": "Image",
       "alt": "Quarterly chart export",
-      "radius": "md",
+      "cornerRadius": "md",
       "src": "https://picsum.photos/seed/rev-1/480/320"
     },
     {
       "id": "image-2",
       "component": "Image",
       "alt": "Top account visualization",
-      "radius": "md",
+      "cornerRadius": "md",
       "src": "https://picsum.photos/seed/rev-2/480/320"
     },
     {
       "id": "image-3",
       "component": "Image",
       "alt": "Regional breakdown",
-      "radius": "md",
+      "cornerRadius": "md",
       "src": "https://picsum.photos/seed/rev-3/480/320"
     },
     {

package/corpus/chunks/inline-dialog-schedule.json

@@ -8,7 +8,7 @@
   "attrs": {
     "placement": "bottom-start"
   },
-  "html": "<popover-ui placement=\"bottom-start\">\n          <button-ui slot=\"trigger\" icon=\"caret-down\" variant=\"primary\" size=\"sm\" aria-label=\"More send options\"></button-ui>\n          <card-ui slot=\"content\" style=\"min-width: 320px;\">\n            <header>\n              <span slot=\"heading\" variant=\"section\">Schedule send</span>\n              <text-ui slot=\"description\" color=\"subtle\">Picks the next available slot in your timezone</text-ui>\n            </header>\n            <section>\n              <col-ui gap=\"3\">\n                <field-ui label=\"Date\">\n                  <input-ui type=\"date\" name=\"date\" value=\"2026-03-15\"></input-ui>\n                </field-ui>\n                <field-ui label=\"Time\">\n                  <input-ui type=\"time\" name=\"time\" value=\"09:00\"></input-ui>\n                </field-ui>\n              </col-ui>\n            </section>\n            <footer divider>\n              <button-ui slot=\"action\" text=\"Cancel\" variant=\"ghost\" data-popover-close></button-ui>\n              <button-ui slot=\"action\" text=\"Schedule\" variant=\"primary\" icon-leading=\"clock\"></button-ui>\n            </footer>\n          </card-ui>\n        </popover-ui>",
+  "html": "<popover-ui placement=\"bottom-start\">\n          <button-ui slot=\"trigger\" icon=\"caret-down\" variant=\"primary\" size=\"sm\" aria-label=\"More send options\"></button-ui>\n          <card-ui slot=\"content\" style=\"min-width: 320px;\">\n            <header>\n              <span slot=\"heading\" variant=\"section\">Schedule send</span>\n              <text-ui slot=\"description\" color=\"subtle\">Picks the next available slot in your timezone</text-ui>\n            </header>\n            <section>\n              <col-ui gap=\"3\">\n                <field-ui label=\"Date\">\n                  <calendar-picker-ui name=\"date\" value=\"2026-03-15\"></calendar-picker-ui>\n                </field-ui>\n                <field-ui label=\"Time\">\n                  <time-picker-ui name=\"time\" value=\"09:00\"></time-picker-ui>\n                </field-ui>\n              </col-ui>\n            </section>\n            <footer divider>\n              <button-ui slot=\"action\" text=\"Cancel\" variant=\"ghost\" data-popover-close></button-ui>\n              <button-ui slot=\"action\" text=\"Schedule\" variant=\"primary\" icon-leading=\"clock\"></button-ui>\n            </footer>\n          </card-ui>\n        </popover-ui>",
   "source": "packages/web-components/patterns/inline-dialog/inline-dialog.examples.html",
   "metadata": {
     "domain": "overlay",
@@ -29,7 +29,7 @@
       "quick"
     ]
   },
-  "captured_at": "2026-07-29T09:15:19.217Z",
+  "captured_at": "2026-08-16T23:54:36.437Z",
   "template": [
     {
       "id": "more-send-options",
@@ -64,8 +64,7 @@
     },
     {
       "id": "date",
-      "component": "Input",
-      "type": "date",
+      "component": "CalendarPicker",
       "name": "date",
       "value": "2026-03-15"
     },
@@ -79,8 +78,7 @@
     },
     {
       "id": "time",
-      "component": "Input",
-      "type": "time",
+      "component": "TimePicker",
       "name": "time",
       "value": "09:00"
     },

package/corpus/chunks/list-window-chat-thread.json

@@ -0,0 +1,76 @@
+{
+  "name": "list-window-chat-thread",
+  "kind": "block",
+  "primary": "list-window-ui",
+  "page": "/packages/web-components/components/list-window/list-window.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "item-size": "56",
+    "pin-bottom": "",
+    "overscan": "4"
+  },
+  "html": "<list-window-ui id=\"lw-chat-thread\" item-size=\"56\" pin-bottom overscan=\"4\"\n                      style=\"height: 320px; border: 1px solid var(--md-sys-color-neutral-outline-variant); border-radius: var(--a-radius-md);\">\n        <template>\n          <row-ui gap=\"2\" style=\"padding: var(--a-space-2) var(--a-space-3);\">\n            <col-ui gap=\"0\">\n              <text-ui weight=\"medium\" size=\"sm\">${item.author}</text-ui>\n              <text-ui size=\"sm\">${item.body}</text-ui>\n            </col-ui>\n          </row-ui>\n        </template>\n        <div slot=\"after\" style=\"padding: var(--a-space-2) var(--a-space-3); border-block-start: 1px solid var(--md-sys-color-neutral-outline-variant);\">\n          <row-ui gap=\"2\">\n            <input-ui placeholder=\"Message…\" style=\"flex:1\"></input-ui>\n            <button-ui text=\"Send\" variant=\"primary\" size=\"sm\"></button-ui>\n          </row-ui>\n        </div>\n      </list-window-ui>",
+  "source": "packages/web-components/components/list-window/list-window.examples.html",
+  "metadata": {
+    "domain": "agent",
+    "description": "Chat-thread window — pin-bottom virtualized list templated to message rows (author + body), with a docked composer below via the after slot. Canonical pattern for large conversation histories.",
+    "keywords": [
+      "list",
+      "window",
+      "chat",
+      "thread",
+      "messages",
+      "conversation",
+      "virtualized",
+      "pin",
+      "bottom",
+      "composer",
+      "send",
+      "scroll",
+      "agent"
+    ]
+  },
+  "captured_at": "2026-08-17T03:07:15.316Z",
+  "template": [
+    {
+      "id": "input",
+      "component": "Input",
+      "placeholder": "Message…"
+    },
+    {
+      "id": "button",
+      "component": "Button",
+      "size": "sm",
+      "text": "Send",
+      "variant": "primary"
+    },
+    {
+      "id": "row",
+      "component": "Row",
+      "gap": "2",
+      "children": [
+        "input",
+        "button"
+      ]
+    },
+    {
+      "id": "column",
+      "component": "Column",
+      "slot": "after",
+      "children": [
+        "row"
+      ]
+    },
+    {
+      "id": "root",
+      "component": "ListWindow",
+      "itemSize": 56,
+      "overscan": 4,
+      "pinBottom": true,
+      "children": [
+        "column"
+      ]
+    }
+  ]
+}

package/corpus/chunks/list-window-loading.json

@@ -0,0 +1,39 @@
+{
+  "name": "list-window-loading",
+  "kind": "block",
+  "primary": "list-window-ui",
+  "page": "/packages/web-components/components/list-window/list-window.examples.html",
+  "slots": [],
+  "nested": [],
+  "attrs": {
+    "item-size": "48",
+    "loading": ""
+  },
+  "html": "<list-window-ui id=\"lw-loading\" item-size=\"48\" loading\n                      style=\"height: 240px; border: 1px solid var(--md-sys-color-neutral-outline-variant); border-radius: var(--a-radius-md);\"></list-window-ui>",
+  "source": "packages/web-components/components/list-window/list-window.examples.html",
+  "metadata": {
+    "domain": "data",
+    "description": "Windowed list loading state — list-window in the [loading] attribute state, rendering skeleton placeholder rows while the backing data fetches. Use for large-list initial-load states.",
+    "keywords": [
+      "list",
+      "window",
+      "loading",
+      "skeleton",
+      "placeholder",
+      "fetch",
+      "data",
+      "virtualized",
+      "aria-busy",
+      "initial-load"
+    ]
+  },
+  "captured_at": "2026-08-17T03:07:15.316Z",
+  "template": [
+    {
+      "id": "root",
+      "component": "ListWindow",
+      "itemSize": 48,
+      "loading": true
+    }
+  ]
+}

package/corpus/chunks/loading-skeleton-placeholder.json

@@ -6,7 +6,7 @@
   "slots": [],
   "nested": [],
   "attrs": {},
-  "html": "<section>\n  <col-ui gap=\"4\">\n    <card-ui>\n      <header>\n        <skeleton-ui slot=\"icon\" width=\"40px\" height=\"40px\" radius=\"full\"></skeleton-ui>\n        <span slot=\"heading\"><skeleton-ui width=\"55%\" height=\"1em\"></skeleton-ui></span>\n        <span slot=\"description\"><skeleton-ui width=\"35%\" height=\"0.8em\"></skeleton-ui></span>\n      </header>\n      <section>\n        <col-ui gap=\"3\">\n          <skeleton-ui width=\"100%\" height=\"1em\"></skeleton-ui>\n          <skeleton-ui width=\"92%\" height=\"1em\"></skeleton-ui>\n          <skeleton-ui width=\"78%\" height=\"1em\"></skeleton-ui>\n        </col-ui>\n      </section>\n      <footer>\n        <row-ui gap=\"2\">\n          <skeleton-ui width=\"80px\" height=\"2em\" radius=\"md\"></skeleton-ui>\n          <skeleton-ui width=\"80px\" height=\"2em\" radius=\"md\"></skeleton-ui>\n        </row-ui>\n      </footer>\n    </card-ui>\n\n    <card-ui>\n      <header>\n        <span slot=\"heading\"><skeleton-ui width=\"40%\" height=\"1em\"></skeleton-ui></span>\n      </header>\n      <section bleed>\n        <list-ui divider>\n          <list-item-ui>\n            <row-ui slot=\"content\" gap=\"3\" align=\"center\">\n              <skeleton-ui width=\"36px\" height=\"36px\" radius=\"full\"></skeleton-ui>\n              <col-ui gap=\"2\" style=\"flex:1\">\n                <skeleton-ui width=\"48%\" height=\"0.9em\"></skeleton-ui>\n                <skeleton-ui width=\"30%\" height=\"0.75em\"></skeleton-ui>\n              </col-ui>\n              <skeleton-ui width=\"60px\" height=\"1.5em\" radius=\"md\"></skeleton-ui>\n            </row-ui>\n          </list-item-ui>\n          <list-item-ui>\n            <row-ui slot=\"content\" gap=\"3\" align=\"center\">\n              <skeleton-ui width=\"36px\" height=\"36px\" radius=\"full\"></skeleton-ui>\n              <col-ui gap=\"2\" style=\"flex:1\">\n                <skeleton-ui width=\"62%\" height=\"0.9em\"></skeleton-ui>\n                <skeleton-ui width=\"40%\" height=\"0.75em\"></skeleton-ui>\n              </col-ui>\n              <skeleton-ui width=\"60px\" height=\"1.5em\" radius=\"md\"></skeleton-ui>\n            </row-ui>\n          </list-item-ui>\n          <list-item-ui>\n            <row-ui slot=\"content\" gap=\"3\" align=\"center\">\n              <skeleton-ui width=\"36px\" height=\"36px\" radius=\"full\"></skeleton-ui>\n              <col-ui gap=\"2\" style=\"flex:1\">\n                <skeleton-ui width=\"52%\" height=\"0.9em\"></skeleton-ui>\n                <skeleton-ui width=\"25%\" height=\"0.75em\"></skeleton-ui>\n              </col-ui>\n              <skeleton-ui width=\"60px\" height=\"1.5em\" radius=\"md\"></skeleton-ui>\n            </row-ui>\n          </list-item-ui>\n        </list-ui>\n      </section>\n    </card-ui>\n  </col-ui>\n</section>",
+  "html": "<section>\n  <col-ui gap=\"4\">\n    <card-ui>\n      <header>\n        <skeleton-ui slot=\"icon\" width=\"40px\" height=\"40px\" corner-radius=\"full\"></skeleton-ui>\n        <span slot=\"heading\"><skeleton-ui width=\"55%\" height=\"1em\"></skeleton-ui></span>\n        <span slot=\"description\"><skeleton-ui width=\"35%\" height=\"0.8em\"></skeleton-ui></span>\n      </header>\n      <section>\n        <col-ui gap=\"3\">\n          <skeleton-ui width=\"100%\" height=\"1em\"></skeleton-ui>\n          <skeleton-ui width=\"92%\" height=\"1em\"></skeleton-ui>\n          <skeleton-ui width=\"78%\" height=\"1em\"></skeleton-ui>\n        </col-ui>\n      </section>\n      <footer>\n        <row-ui gap=\"2\">\n          <skeleton-ui width=\"80px\" height=\"2em\" corner-radius=\"md\"></skeleton-ui>\n          <skeleton-ui width=\"80px\" height=\"2em\" corner-radius=\"md\"></skeleton-ui>\n        </row-ui>\n      </footer>\n    </card-ui>\n\n    <card-ui>\n      <header>\n        <span slot=\"heading\"><skeleton-ui width=\"40%\" height=\"1em\"></skeleton-ui></span>\n      </header>\n      <section bleed>\n        <list-ui divider>\n          <list-item-ui>\n            <row-ui slot=\"content\" gap=\"3\" align=\"center\">\n              <skeleton-ui width=\"36px\" height=\"36px\" corner-radius=\"full\"></skeleton-ui>\n              <col-ui gap=\"2\" style=\"flex:1\">\n                <skeleton-ui width=\"48%\" height=\"0.9em\"></skeleton-ui>\n                <skeleton-ui width=\"30%\" height=\"0.75em\"></skeleton-ui>\n              </col-ui>\n              <skeleton-ui width=\"60px\" height=\"1.5em\" corner-radius=\"md\"></skeleton-ui>\n            </row-ui>\n          </list-item-ui>\n          <list-item-ui>\n            <row-ui slot=\"content\" gap=\"3\" align=\"center\">\n              <skeleton-ui width=\"36px\" height=\"36px\" corner-radius=\"full\"></skeleton-ui>\n              <col-ui gap=\"2\" style=\"flex:1\">\n                <skeleton-ui width=\"62%\" height=\"0.9em\"></skeleton-ui>\n                <skeleton-ui width=\"40%\" height=\"0.75em\"></skeleton-ui>\n              </col-ui>\n              <skeleton-ui width=\"60px\" height=\"1.5em\" corner-radius=\"md\"></skeleton-ui>\n            </row-ui>\n          </list-item-ui>\n          <list-item-ui>\n            <row-ui slot=\"content\" gap=\"3\" align=\"center\">\n              <skeleton-ui width=\"36px\" height=\"36px\" corner-radius=\"full\"></skeleton-ui>\n              <col-ui gap=\"2\" style=\"flex:1\">\n                <skeleton-ui width=\"52%\" height=\"0.9em\"></skeleton-ui>\n                <skeleton-ui width=\"25%\" height=\"0.75em\"></skeleton-ui>\n              </col-ui>\n              <skeleton-ui width=\"60px\" height=\"1.5em\" corner-radius=\"md\"></skeleton-ui>\n            </row-ui>\n          </list-item-ui>\n        </list-ui>\n      </section>\n    </card-ui>\n  </col-ui>\n</section>",
   "source": "catalog/ui-patterns/app/loading-skeleton-placeholder/loading-skeleton-placeholder.contents.html",
   "metadata": {
     "domain": "agent",
@@ -27,14 +27,14 @@
       "rows"
     ]
   },
-  "captured_at": "2026-08-12T01:38:48.830Z",
+  "captured_at": "2026-08-17T03:17:46.002Z",
   "template": [
     {
       "id": "skeleton",
       "component": "Skeleton",
       "slot": "icon",
+      "cornerRadius": "full",
       "height": "40px",
-      "radius": "full",
       "width": "40px"
     },
     {
@@ -114,15 +114,15 @@
     {
       "id": "skeleton-7",
       "component": "Skeleton",
+      "cornerRadius": "md",
       "height": "2em",
-      "radius": "md",
       "width": "80px"
     },
     {
       "id": "skeleton-8",
       "component": "Skeleton",
+      "cornerRadius": "md",
       "height": "2em",
-      "radius": "md",
       "width": "80px"
     },
     {
@@ -175,8 +175,8 @@
     {
       "id": "skeleton-10",
       "component": "Skeleton",
+      "cornerRadius": "full",
       "height": "36px",
-      "radius": "full",
       "width": "36px"
     },
     {
@@ -203,8 +203,8 @@
     {
       "id": "skeleton-13",
       "component": "Skeleton",
+      "cornerRadius": "md",
       "height": "1.5em",
-      "radius": "md",
       "width": "60px"
     },
     {
@@ -229,8 +229,8 @@
     {
       "id": "skeleton-14",
       "component": "Skeleton",
+      "cornerRadius": "full",
       "height": "36px",
-      "radius": "full",
       "width": "36px"
     },
     {
@@ -257,8 +257,8 @@
     {
       "id": "skeleton-17",
       "component": "Skeleton",
+      "cornerRadius": "md",
       "height": "1.5em",
-      "radius": "md",
       "width": "60px"
     },
     {
@@ -283,8 +283,8 @@
     {
       "id": "skeleton-18",
       "component": "Skeleton",
+      "cornerRadius": "full",
       "height": "36px",
-      "radius": "full",
       "width": "36px"
     },
     {
@@ -311,8 +311,8 @@
     {
       "id": "skeleton-21",
       "component": "Skeleton",
+      "cornerRadius": "md",
       "height": "1.5em",
-      "radius": "md",
       "width": "60px"
     },
     {

package/corpus/chunks/map-with-location-list.json

@@ -9,7 +9,7 @@
     "columns": "1 5@md",
     "gap": "4"
   },
-  "html": "<grid-ui\n        columns=\"1 5@md\"\n        gap=\"4\">\n        <image-ui span=\"3\" src=\"https://picsum.photos/seed/map-q4/640/480\" alt=\"Map of field-visit locations\" radius=\"md\" style=\"aspect-ratio: 4/3\"></image-ui>\n        <card-ui span=\"2\">\n          <header>\n            <h3>Field visits · Q4</h3>\n          </header>\n          <section>\n            <list-ui divider>\n              <list-item-ui>\n                <row-ui gap=\"2\" align=\"center\">\n                  <icon-ui name=\"map-pin\" color=\"accent\"></icon-ui>\n                  <col-ui gap=\"0\">\n                    <text-ui strong>San Francisco</text-ui>\n                    <text-ui color=\"subtle\" size=\"sm\">Acme Corp · Globex · 3 more</text-ui>\n                  </col-ui>\n                </row-ui>\n              </list-item-ui>\n              <list-item-ui>\n                <row-ui gap=\"2\" align=\"center\">\n                  <icon-ui name=\"map-pin\" color=\"accent\"></icon-ui>\n                  <col-ui gap=\"0\">\n                    <text-ui strong>New York</text-ui>\n                    <text-ui color=\"subtle\" size=\"sm\">Stark Industries · 2 more</text-ui>\n                  </col-ui>\n                </row-ui>\n              </list-item-ui>\n              <list-item-ui>\n                <row-ui gap=\"2\" align=\"center\">\n                  <icon-ui name=\"map-pin\" color=\"accent\"></icon-ui>\n                  <col-ui gap=\"0\">\n                    <text-ui strong>London</text-ui>\n                    <text-ui color=\"subtle\" size=\"sm\">Umbrella Corp</text-ui>\n                  </col-ui>\n                </row-ui>\n              </list-item-ui>\n              <list-item-ui>\n                <row-ui gap=\"2\" align=\"center\">\n                  <icon-ui name=\"map-pin\" color=\"accent\"></icon-ui>\n                  <col-ui gap=\"0\">\n                    <text-ui strong>Berlin</text-ui>\n                    <text-ui color=\"subtle\" size=\"sm\">Wayne Enterprises</text-ui>\n                  </col-ui>\n                </row-ui>\n              </list-item-ui>\n            </list-ui>\n          </section>\n        </card-ui>\n      </grid-ui>",
+  "html": "<grid-ui\n        columns=\"1 5@md\"\n        gap=\"4\">\n        <image-ui span=\"3\" src=\"https://picsum.photos/seed/map-q4/640/480\" alt=\"Map of field-visit locations\" corner-radius=\"md\" style=\"aspect-ratio: 4/3\"></image-ui>\n        <card-ui span=\"2\">\n          <header>\n            <h3>Field visits · Q4</h3>\n          </header>\n          <section>\n            <list-ui divider>\n              <list-item-ui>\n                <row-ui gap=\"2\" align=\"center\">\n                  <icon-ui name=\"map-pin\" color=\"accent\"></icon-ui>\n                  <col-ui gap=\"0\">\n                    <text-ui strong>San Francisco</text-ui>\n                    <text-ui color=\"subtle\" size=\"sm\">Acme Corp · Globex · 3 more</text-ui>\n                  </col-ui>\n                </row-ui>\n              </list-item-ui>\n              <list-item-ui>\n                <row-ui gap=\"2\" align=\"center\">\n                  <icon-ui name=\"map-pin\" color=\"accent\"></icon-ui>\n                  <col-ui gap=\"0\">\n                    <text-ui strong>New York</text-ui>\n                    <text-ui color=\"subtle\" size=\"sm\">Stark Industries · 2 more</text-ui>\n                  </col-ui>\n                </row-ui>\n              </list-item-ui>\n              <list-item-ui>\n                <row-ui gap=\"2\" align=\"center\">\n                  <icon-ui name=\"map-pin\" color=\"accent\"></icon-ui>\n                  <col-ui gap=\"0\">\n                    <text-ui strong>London</text-ui>\n                    <text-ui color=\"subtle\" size=\"sm\">Umbrella Corp</text-ui>\n                  </col-ui>\n                </row-ui>\n              </list-item-ui>\n              <list-item-ui>\n                <row-ui gap=\"2\" align=\"center\">\n                  <icon-ui name=\"map-pin\" color=\"accent\"></icon-ui>\n                  <col-ui gap=\"0\">\n                    <text-ui strong>Berlin</text-ui>\n                    <text-ui color=\"subtle\" size=\"sm\">Wayne Enterprises</text-ui>\n                  </col-ui>\n                </row-ui>\n              </list-item-ui>\n            </list-ui>\n          </section>\n        </card-ui>\n      </grid-ui>",
   "source": "apps/genui/app/gen-ui-feed/gen-ui-feed.contents.html",
   "metadata": {
     "domain": "data",
@@ -46,14 +46,14 @@
       "directory"
     ]
   },
-  "captured_at": "2026-07-17T20:08:04.842Z",
+  "captured_at": "2026-08-17T03:17:46.002Z",
   "template": [
     {
       "id": "image",
       "component": "Image",
       "span": "3",
       "alt": "Map of field-visit locations",
-      "radius": "md",
+      "cornerRadius": "md",
       "src": "https://picsum.photos/seed/map-q4/640/480"
     },
     {

package/corpus/chunks/members-active-table-search-filter.json

@@ -10,7 +10,7 @@
     "data-members-pane": "",
     "data-members-state": "ready"
   },
-  "html": "<div data-col data-members-pane data-members-state=\"ready\">\n      <!-- Error: rendered when fetch fails. Spec §11.\n           alert-ui only supports `leading|content|close` slots — so the\n           retry affordance lives as a sibling button-ui inside a col-ui\n           wrapper rather than a (non-existent) `slot=\"action\"`. -->\n      <col-ui id=\"members-error-block\" gap=\"2\" hidden>\n        <alert-ui id=\"members-error\" variant=\"danger\" icon=\"warning\" text=\"Couldn't load members. Something went wrong fetching your team.\"></alert-ui>\n        <row-ui justify=\"end\">\n          <button-ui id=\"members-retry\" text=\"Retry\" variant=\"outline\" size=\"sm\" icon=\"arrow-clockwise\"></button-ui>\n        </row-ui>\n      </col-ui>\n      <!-- Empty: rendered when no members have accepted yet. Spec §11.\n           Inline anchor matches the established `<a href=\"#…\">` pattern\n           in other example pages (registration/invite, auth/sign-up). -->\n      <text-ui id=\"members-empty-hint\" color=\"subtle\" size=\"sm\" hidden>\n        No one has accepted an invite yet — see <a href=\"#pending\">Pending invites</a> below.\n      </text-ui>\n      <row-ui align=\"center\" gap=\"2\">\n        <input-ui id=\"members-search\" type=\"search\" placeholder=\"Search members…\" prefix=\"magnifying-glass\" grow></input-ui>\n        <select-ui id=\"members-role-filter\" value=\"all\">\n          <option value=\"all\">All roles</option>\n          <option value=\"admin\">Admin</option>\n          <option value=\"member\">Member</option>\n          <option value=\"viewer\">Viewer</option>\n        </select-ui>\n      </row-ui>\n      <card-ui>\n        <section bleed>\n          <table-ui id=\"members-table\" sortable striped></table-ui>\n        </section>\n      </card-ui>\n    </div>",
+  "html": "<div data-col data-members-pane data-members-state=\"ready\">\n      <!-- Error: rendered when fetch fails. Spec §11.\n           alert-ui only supports `leading|content|close` slots — so the\n           retry affordance lives as a sibling button-ui inside a col-ui\n           wrapper rather than a (non-existent) `slot=\"action\"`. -->\n      <col-ui id=\"members-error-block\" gap=\"2\" hidden>\n        <alert-ui id=\"members-error\" variant=\"danger\" icon=\"warning\" text=\"Couldn't load members. Something went wrong fetching your team.\"></alert-ui>\n        <row-ui justify=\"end\">\n          <button-ui id=\"members-retry\" text=\"Retry\" variant=\"outline\" size=\"sm\" icon=\"arrow-clockwise\"></button-ui>\n        </row-ui>\n      </col-ui>\n      <!-- Empty: rendered when no members have accepted yet. Spec §11.\n           Inline anchor matches the established `<a href=\"#…\">` pattern\n           in other example pages (registration/invite, auth/sign-up). -->\n      <text-ui id=\"members-empty-hint\" color=\"subtle\" size=\"sm\" hidden>\n        No one has accepted an invite yet — see <a href=\"#pending\">Pending invites</a> below.\n      </text-ui>\n      <row-ui align=\"center\" gap=\"2\">\n        <search-ui id=\"members-search\" placeholder=\"Search members…\" grow></search-ui>\n        <select-ui id=\"members-role-filter\" value=\"all\">\n          <option value=\"all\">All roles</option>\n          <option value=\"admin\">Admin</option>\n          <option value=\"member\">Member</option>\n          <option value=\"viewer\">Viewer</option>\n        </select-ui>\n      </row-ui>\n      <card-ui>\n        <section bleed>\n          <table-ui id=\"members-table\" sortable striped></table-ui>\n        </section>\n      </card-ui>\n    </div>",
   "source": "apps/saas/app/members/members.contents.html",
   "metadata": {
     "domain": "data",
@@ -40,7 +40,7 @@
       "data"
     ]
   },
-  "captured_at": "2026-07-17T20:08:04.842Z",
+  "captured_at": "2026-08-17T00:21:29.018Z",
   "template": [
     {
       "id": "members-error",
@@ -101,10 +101,8 @@
     },
     {
       "id": "members-search",
-      "component": "Input",
-      "type": "search",
-      "placeholder": "Search members…",
-      "prefix": "magnifying-glass"
+      "component": "Search",
+      "placeholder": "Search members…"
     },
     {
       "id": "members-role-filter",

package/corpus/chunks/patient-visit-shell.json

@@ -25,7 +25,7 @@
       "hydration"
     ]
   },
-  "captured_at": "2026-08-07T18:29:29.529Z",
+  "captured_at": "2026-08-17T04:06:20.963Z",
   "template": [
     {
       "id": "pv-patient-chip",

package/corpus/chunks/permissions-share-people.json

@@ -27,7 +27,7 @@
       "manage"
     ]
   },
-  "captured_at": "2026-08-13T16:17:52.286Z",
+  "captured_at": "2026-08-17T00:21:29.018Z",
   "template": [
     {
       "id": "text",
@@ -44,8 +44,8 @@
       ]
     },
     {
-      "id": "search-ui",
-      "component": "search-ui",
+      "id": "search",
+      "component": "Search",
       "placeholder": "Add by name or email"
     },
     {
@@ -81,7 +81,7 @@
       "align": "center",
       "gap": "2",
       "children": [
-        "search-ui",
+        "search",
         "choice-picker",
         "button"
       ]