All examples / Component family
Channel and shelves
Channel header, description disclosure, tabs and content cards.
Live component context
channel-header
Open the linked recipe for keyboard interaction and its full responsive composition. The embedded frames show the same live component.
avatar or banner not measurednamehandlecountsdescriptionlinks disclosuresubscribe
Isolated specimen
Product context
Open channel home 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="channel-header"] |
|---|---|
| selectors | .channel-hero .channel-cover .channel-head .subscribe |
| authority | reconstructed local contract |
| inputs | description disclosure Subscribe |
| defaults | description: collapsed signedIn: false |
| events | click description click Subscribe |
| outputs | description state toggles Subscribe opens sign-in boundary |
| focus | Disclosure and Subscribe are native buttons. |
| errors | channel editing and Studio behavior are outside scope |
| motion | No scripted animation. |
| invariants | local title and tab geometry retain mismatch evidence until repaired |
| 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
description collapsed
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-channel-name, ytd-channel-tagline-renderer.
Measured local geometry at 390 px
| root | .channel-hero342 × 1595.671875 px; border-box; 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 visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
|---|---|
| banner | .channel-hero div342 × 100 px; border-box; 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 visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| avatar | .channel-hero img68 × 68 px; border-box; 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 |
| h1-2 | .channel-hero h1258 × 33.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: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 24px; font-weight: undefined; line-height: 33.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-3 | .channel-hero p258 × 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 |
| disclosure | #description-toggle88.828125 × 21.59375 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: 1px / 6px / 1px / 6px 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-channel-home-18 | #control-channel-home-1893.890625 × 39.59375 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 248.109px; 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 |
| description | #channel-description0 × 0 px; border-box; none / 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-channel-home-19 | #control-channel-home-1937.484375 × 47 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 12px / 0px / 12px / 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-channel-home-20 | #control-channel-home-2042.859375 × 47 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 12px / 0px / 12px / 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-channel-home-21 | #control-channel-home-2140.90625 × 47 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 12px / 0px / 12px / 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-channel-home-22 | #control-channel-home-2225.0625 × 47 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 12px / 0px / 12px / 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-channel-home-23 | #control-channel-home-2358.609375 × 47 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 12px / 0px / 12px / 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-channel-home-24 | #control-channel-home-2452.21875 × 47 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 12px / 0px / 12px / 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-channel-home-25 | #control-channel-home-2535.765625 × 47 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 12px / 0px / 12px / 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 |
| tab-status | #tab-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 |
| h2-15 | .channel-hero h2266.390625 × 29.390625 px; border-box; block / static margin top/right/bottom/left: 17.43px / 0px / 17.43px / 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: 21px; font-weight: undefined; line-height: 29.4px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-channel-home-26 | #control-channel-home-2672.96875 × 35.59375 px; border-box; flex / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 8px / 14px / 8px / 14px 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-channel-home-27 | #control-channel-home-27342 × 192.375 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 |
| img-18 | .channel-hero img342 × 192.375 px; border-box; inline / 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 |
| h3-19 | .channel-hero h3342 × 17.5 px; border-box; block / static margin top/right/bottom/left: 8px / 0px / 2px / 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: 17.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-20 | .channel-hero p342 × 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-channel-home-28 | #control-channel-home-28342 × 192.375 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 |
| img-22 | .channel-hero img342 × 192.375 px; border-box; inline / 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 |
| h3-23 | .channel-hero h3342 × 17.5 px; border-box; block / static margin top/right/bottom/left: 8px / 0px / 2px / 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: 17.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-24 | .channel-hero p342 × 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-channel-home-29 | #control-channel-home-29342 × 192.375 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 |
| img-26 | .channel-hero img342 × 192.375 px; border-box; inline / 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 |
| h3-27 | .channel-hero h3342 × 17.5 px; border-box; block / static margin top/right/bottom/left: 8px / 0px / 2px / 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: 17.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-28 | .channel-hero p342 × 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-channel-home-30 | #control-channel-home-30342 × 192.375 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 |
| img-30 | .channel-hero img342 × 192.375 px; border-box; inline / 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 |
| h3-31 | .channel-hero h3342 × 17.5 px; border-box; block / static margin top/right/bottom/left: 8px / 0px / 2px / 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: 17.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-32 | .channel-hero p342 × 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 |
Probe evidence/local-contracts/examples_channel-home.html-390.json. This measures the actual local recipe, not the documentation frame.
Measured local geometry at 1440 px
| root | .channel-hero1152 × 772.4375 px; border-box; 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 visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
|---|---|
| banner | .channel-hero div1152 × 180 px; border-box; 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 visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| avatar | .channel-hero img96 × 96 px; border-box; 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 |
| h1-2 | .channel-hero h1276.3125 × 50.390625 px; border-box; 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 visible / visible font-family: undefined; font-size: 36px; font-weight: undefined; line-height: 50.4px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-3 | .channel-hero p276.3125 × 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 |
| disclosure | #description-toggle88.828125 × 21.59375 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: 1px / 6px / 1px / 6px 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-channel-home-18 | #control-channel-home-1893.890625 × 39.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: 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 |
| description | #channel-description0 × 0 px; border-box; none / 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-channel-home-19 | #control-channel-home-1937.484375 × 46.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: 12px / 0px / 12px / 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-channel-home-20 | #control-channel-home-2042.859375 × 46.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: 12px / 0px / 12px / 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-channel-home-21 | #control-channel-home-2140.90625 × 46.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: 12px / 0px / 12px / 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-channel-home-22 | #control-channel-home-2225.0625 × 46.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: 12px / 0px / 12px / 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-channel-home-23 | #control-channel-home-2358.609375 × 46.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: 12px / 0px / 12px / 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-channel-home-24 | #control-channel-home-2452.21875 × 46.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: 12px / 0px / 12px / 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-channel-home-25 | #control-channel-home-2535.765625 × 46.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: 12px / 0px / 12px / 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 |
| tab-status | #tab-status1152 × 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 |
| h2-15 | .channel-hero h2266.390625 × 29.390625 px; border-box; block / static margin top/right/bottom/left: 17.43px / 0px / 17.43px / 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: 21px; font-weight: undefined; line-height: 29.4px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| control-channel-home-26 | #control-channel-home-2672.96875 × 35.59375 px; border-box; flex / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 8px / 14px / 8px / 14px 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-channel-home-27 | #control-channel-home-27276 × 155.25 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 |
| img-18 | .channel-hero img276 × 155.25 px; border-box; inline / 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 |
| h3-19 | .channel-hero h3276 × 35 px; border-box; block / static margin top/right/bottom/left: 8px / 0px / 2px / 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: 17.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-20 | .channel-hero p276 × 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-channel-home-28 | #control-channel-home-28276 × 155.25 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 |
| img-22 | .channel-hero img276 × 155.25 px; border-box; inline / 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 |
| h3-23 | .channel-hero h3276 × 17.5 px; border-box; block / static margin top/right/bottom/left: 8px / 0px / 2px / 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: 17.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-24 | .channel-hero p276 × 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-channel-home-29 | #control-channel-home-29276 × 155.25 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 |
| img-26 | .channel-hero img276 × 155.25 px; border-box; inline / 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 |
| h3-27 | .channel-hero h3276 × 17.5 px; border-box; block / static margin top/right/bottom/left: 8px / 0px / 2px / 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: 17.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-28 | .channel-hero p276 × 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-channel-home-30 | #control-channel-home-30276 × 155.25 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 |
| img-30 | .channel-hero img276 × 155.25 px; border-box; inline / 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 |
| h3-31 | .channel-hero h3276 × 17.5 px; border-box; block / static margin top/right/bottom/left: 8px / 0px / 2px / 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: 17.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined |
| p-32 | .channel-hero p276 × 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 |
Probe evidence/local-contracts/examples_channel-home.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.
Live component context
channel-tabs
Open the linked recipe for keyboard interaction and its full responsive composition. The embedded frames show the same live component.
HomeVideosShortsLivePodcastsPlaylistsPosts
Isolated specimen
Product context
Open channel home 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="channel-tabs"] |
|---|---|
| selectors | .tabs .tabs button .tabs button[aria-selected=true] |
| authority | reconstructed local contract |
| inputs | selected channel tab |
| defaults | selected: Home |
| events | click tab |
| outputs | aria-selected moves local shelf heading and cards update status text changes |
| focus | Tabs are native buttons with role=tab. |
| errors | |
| motion | No scripted animation. |
| invariants | exactly one tab is selected tabs overflow horizontally rather than wrapping |
| 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
one selected
remaining unselected
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 tp-yt-paper-tab.
Exact rules are available in the linked shared CSS and API contract. The geometry ledger preserves per-part probes and source boundaries.
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.
Live component context
content-shelf
Open the linked recipe for keyboard interaction and its full responsive composition. The embedded frames show the same live component.
section headingPlay all fixture toggleresponsive card gridthumbnailvideo titlechannel and view metadata
Isolated specimen
Product context
Open channel home recipe · API and source trace
Reconstructed local contract. Its source appearance and local behavior have different authority. Interactive account boundaries never perform remote writes.
| authority | Composition of channel context, local video cards and an explicit fixture toggle. |
|---|---|
| inputs | Section title and ordered fixture cards with thumbnail, title, creator, view count and destination. |
| output | A thumbnail link opens the local watch recipe. Play all toggles its local selected state and announces it; it does not start a playlist. |
| layout | Parent owns the top gap. .shelf-head aligns its heading and action. .card-grid defines responsive columns with minmax(0,1fr); each thumbnail retains a 16:9 frame. |
| accessibility | One section heading precedes its ordered cards. Link names come from the image alternative; adjacent metadata remains readable. |
| content | Use distinct fixture titles and preserve long-title wrapping. Label missing media without replacing the title. |
Variants and content
channel Home collection
Videos collection
Shorts-labelled collection
long title
narrow grid
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 are mapped in the shared player contract.
Exact rules are available in the linked shared CSS and API contract. The geometry ledger preserves per-part probes and source boundaries.
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.