All examples / Component family
Playlist controls
Playlist content types and source-derived viewing list.
Live component context
playlist-save-flow
Open the linked recipe for keyboard interaction and its full responsive composition. The embedded frames show the same live component.
playlist identity and coverordered playlist rowstype filtersmore actionsave account gatepublic sign-in boundary
Isolated specimen
Product context
Open playlist recipe · API and source trace
Reconstructed local contract. Its source appearance and local behavior have different authority. Interactive account boundaries never perform remote writes.
| root | [data-denominator="playlist-save-flow"] |
|---|---|
| selectors | .playlist .playlist-cover .playlist-row |
| authority | reconstructed local contract |
| inputs | playlist type filter More action Save action |
| defaults | signedIn: false filter: All |
| events | click filter click More click Save |
| outputs | public ordered rows filter Save opens the public sign-in boundary |
| focus | Filters and actions remain native buttons; the boundary dialog receives focus. |
| errors | Authenticated playlist creation, naming, privacy editing, and reordering are retained boundaries rather than fabricated public UI. |
| motion | No scripted animation. |
| invariants | The local contract covers public playlist identity, ordered rows, type filters, More, and account-gated Save only. The dynamic sign-in boundary proves the signed-out path without asserting an authenticated playlist editor. |
| stateOwnership | data-action and ARIA state are owned by site/examples/product.js. CSS ownership is site/examples/product.css followed by site/examples/control-overrides.css. A state without an implemented matching denominator is explicitly unverified. |
| responsiveOwnership | @media (max-width:900px) and @media (max-width:560px) in site/examples/product.css |
| semantics | Use native button, input, form, link, dialog, tablist, and tab semantics when the part is interactive. Preserve the captured aria-* state on the control that owns the action. |
Variants and content
public signed-out viewing
account-gated save
Keep parent-owned gaps outside the component. Preserve per-side padding and text line boxes; use the rule’s responsive condition before copying a single measured width. Source selectors ytd-playlist-panel-renderer, ytd-add-to-playlist-renderer.
Measured local geometry at 390 px
| root | .playlist342 × 1019.84375 px; border-box; grid / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
|---|---|
| p-0 | .playlist p294 × 19.59375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| h1-1 | .playlist h1294 × 39.1875 px; border-box; block / static margin top/right/bottom/left: 18.76px / 0px / 18.76px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 28px; font-weight: undefined; line-height: 39.2px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-2 | .playlist p294 × 19.59375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-playlist-18 | #control-playlist-18100.28125 × 44 px; border-box; inline-block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 10px / 16px / 10px / 16px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-4 | .playlist img24 × 24 px; border-box; inline-block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow clip / clip font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-5 | .playlist p294 × 39.1875 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-playlist-19 | #control-playlist-19268.640625 × 31.59375 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 6px / 12px / 6px / 12px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-playlist-20 | #control-playlist-2065.359375 × 31.59375 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 6px / 12px / 6px / 12px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-playlist-21 | #control-playlist-21268.640625 × 31.59375 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 6px / 12px / 6px / 12px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| playlist-filter-status | #playlist-filter-status342 × 19.59375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-10 | .playlist img120 × 67.5 px; border-box; block / relative margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow hidden / hidden font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-11 | .playlist p158 × 19.59375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-playlist-22 | #control-playlist-2224 × 40 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 8px / 8px / 8px / 8px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-13 | .playlist img24 × 24 px; border-box; inline-block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow clip / clip font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-14 | .playlist img120 × 67.5 px; border-box; block / relative margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow hidden / hidden font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-15 | .playlist p158 × 19.59375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-playlist-23 | #control-playlist-2324 × 40 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 8px / 8px / 8px / 8px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-17 | .playlist img24 × 24 px; border-box; inline-block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow clip / clip font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-18 | .playlist img120 × 67.5 px; border-box; block / relative margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow hidden / hidden font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-19 | .playlist p158 × 19.59375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-playlist-24 | #control-playlist-2424 × 40 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 8px / 8px / 8px / 8px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-21 | .playlist img24 × 24 px; border-box; inline-block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow clip / clip font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-22 | .playlist img120 × 67.5 px; border-box; block / relative margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow hidden / hidden font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-23 | .playlist p158 × 19.59375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-playlist-25 | #control-playlist-2524 × 40 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 8px / 8px / 8px / 8px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-25 | .playlist img24 × 24 px; border-box; inline-block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow clip / clip font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
Probe evidence/local-contracts/examples_playlist.html-390.json. This measures the actual local recipe, not the documentation frame.
Measured local geometry at 1440 px
| root | .playlist1152 × 549.1875 px; border-box; grid / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
|---|---|
| p-0 | .playlist p292 × 19.59375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| h1-1 | .playlist h1292 × 39.1875 px; border-box; block / static margin top/right/bottom/left: 18.76px / 0px / 18.76px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 28px; font-weight: undefined; line-height: 39.2px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-2 | .playlist p292 × 19.59375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-playlist-18 | #control-playlist-18100.28125 × 44 px; border-box; inline-block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 10px / 16px / 10px / 16px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-4 | .playlist img24 × 24 px; border-box; inline-block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow clip / clip font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-5 | .playlist p292 × 39.1875 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-playlist-19 | #control-playlist-1940.421875 × 31.59375 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 6px / 12px / 6px / 12px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-playlist-20 | #control-playlist-2065.359375 × 31.59375 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 6px / 12px / 6px / 12px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-playlist-21 | #control-playlist-2167.15625 × 31.59375 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 6px / 12px / 6px / 12px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| playlist-filter-status | #playlist-filter-status784 × 19.59375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-10 | .playlist img168 × 94.5 px; border-box; block / relative margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow hidden / hidden font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-11 | .playlist p502 × 19.59375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-playlist-22 | #control-playlist-2232 × 40 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 8px / 8px / 8px / 8px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-13 | .playlist img24 × 24 px; border-box; inline-block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow clip / clip font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-14 | .playlist img168 × 94.5 px; border-box; block / relative margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow hidden / hidden font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-15 | .playlist p502 × 19.59375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-playlist-23 | #control-playlist-2332 × 40 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 8px / 8px / 8px / 8px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-17 | .playlist img24 × 24 px; border-box; inline-block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow clip / clip font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-18 | .playlist img168 × 94.5 px; border-box; block / relative margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow hidden / hidden font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-19 | .playlist p502 × 19.59375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-playlist-24 | #control-playlist-2432 × 40 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 8px / 8px / 8px / 8px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-21 | .playlist img24 × 24 px; border-box; inline-block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow clip / clip font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-22 | .playlist img168 × 94.5 px; border-box; block / relative margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow hidden / hidden font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-23 | .playlist p502 × 19.59375 px; border-box; block / static margin top/right/bottom/left: 14px / 0px / 14px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-playlist-25 | #control-playlist-2532 × 40 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 8px / 8px / 8px / 8px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| img-25 | .playlist img24 × 24 px; border-box; inline-block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow clip / clip font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
Probe evidence/local-contracts/examples_playlist.html-1440.json. This measures the actual local recipe, not the documentation frame.
Retrieve base CSS, cascade corrections, and behavior. Use these together. Avoid replacing the recorded glyph with text or inventing a success state for a private operation.