YouTubeDesign referenceComponent inventory

All examples / Component family

Guide and tabs

Selected and unselected navigation selection states.

Live component context

desktop-guide

Open the linked recipe for keyboard interaction and its full responsive composition. The embedded frames show the same live component.

guide triggerprimary route entriesexplore groupingmore-from-YouTube groupingsign-in promptcollapseshow-more

Isolated specimen

Product context

Open search 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="desktop-guide"]
selectors.guide
.guide a
.guide h2
authorityreconstructed local contract
inputsdrawer trigger
defaultsdesktop: expanded
narrow: off-canvas
eventsclick drawer
outputsguide open or collapsed class and matching aria-expanded
focusThe trigger retains normal button focus.
errors
motionNarrow guide transform is 150ms except under reduced motion.
invariantsguide is 240px wide when open
navigation links remain native anchors
stateOwnershipdata-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
semanticsUse 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

expanded
collapsed
signed-out

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-guide-renderer, ytd-guide-entry-renderer.

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

appearance-menu

Open Appearance in the masthead, then choose Light or Dark.

settings triggerappearance choice menu

Isolated specimen

Product context

Open search 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="appearance-menu"]
selectors.settings
.popover
authorityreconstructed local contract
inputsSettings trigger
appearance choice
defaultsopen: false
localTheme: light unless a prior local choice is retained
eventsclick Settings
click Light appearance
click Dark appearance
outputsmenu hidden state changes
document data-theme changes
local logo asset updates
local theme choice is retained in localStorage
focusThe trigger and choices are native buttons with menu/menuitem roles.
errorsProduction persistence, every production appearance choice, and preference retrieval errors are not asserted by this local reconstruction.
motionNo scripted animation.
invariantsThe retained public opened-state capture establishes Appearance Back and the selected Light-theme check.
The local Light/Dark selection and persistence contract is a reconstruction tested at 390px and 1440px.
stateOwnershipdata-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
semanticsUse 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

menu open
appearance open
light option
dark option

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-multi-page-menu-renderer, tp-yt-paper-item.

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

search-filter-tab-row

Choose a chip, open Filters, and try the editable search field.

scroll previousfilter tabsscroll nextFilters trigger

Isolated specimen

Product context

Open search 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="search-filter-tab-row"]
selectors.chip-row
.chip
.filters
.filters-panel
authorityreconstructed local contract
inputsselected filter tab
Filters trigger
defaultsselected: All
panel: closed
eventsclick filter tab
click Filters
outputsaria-selected moves to selected tab
matching result cards hide
status text announces filter
filter panel hidden state changes
focusTabs are native buttons with role=tab.
errors
motionNo scripted animation.
invariantsone filter tab has aria-selected=true
chip order is fixture data, not a production claim
stateOwnershipdata-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
semanticsUse 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

aria-selected=true
aria-selected=false
overflow controls

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 yt-chip-cloud-chip-renderer, ytd-feed-filter-chip-bar-renderer.

Measured local geometry at 390 px

root.status
342 × 1741.71875 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
tab-row.status div
342 × 56 px; border-box; grid / static
margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 4px / 0px / 20px / 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
filter-all#filter-all
40.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-search-17#control-search-17
65.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-search-18#control-search-18
94.03125 × 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-search-19#control-search-19
0 × 0 px; border-box; none / 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-search-20#control-search-20
0 × 0 px; border-box; none / 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-search-21#control-search-21
0 × 0 px; border-box; none / 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
overflow-controls.status div
0 × 0 px; border-box; none / 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
control-search-22#control-search-22
0 × 0 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: 0px; font-weight: undefined; line-height: 0px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-search-23#control-search-23
0 × 0 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: 0px; font-weight: undefined; line-height: 0px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
filters-trigger#control-search-24
32 × 32 px; border-box; block / static
margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 4px / 4px / 4px / 4px
row gap ; column gap ; align ; overflow visible / visible
font-family: undefined; font-size: 0px; font-weight: undefined; line-height: 0px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
img-11.status img
20 × 20 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: 0px; font-weight: undefined; line-height: 0px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-12.status p
0 × 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
status#filter-status
342 × 0 px; border-box; block / static
margin top/right/bottom/left: 7px / 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
control-search-25#control-search-25
0 × 0 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 / 10px / 10px / 10px
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-search-26#control-search-26
0 × 0 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 / 10px / 10px / 10px
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-search-27#control-search-27
0 × 0 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 / 10px / 10px / 10px
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-search-28#control-search-28
240 × 135 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.status img
240 × 135 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
h2-19.status h2
50 × 45 px; border-box; flow-root / static
margin top/right/bottom/left: 0px / 36px / 4px / 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: 18px; font-weight: undefined; line-height: 22.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-20.status p
86 × 78.375 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
p-21.status p
86 × 39.1875 px; border-box; flow-root / 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 hidden / hidden
font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-search-29#control-search-29
40 × 40 px; border-box; block / absolute
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-23.status img
24 × 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
control-search-30#control-search-30
240 × 135 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-25.status img
240 × 135 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
h2-26.status h2
50 × 45 px; border-box; flow-root / static
margin top/right/bottom/left: 0px / 36px / 4px / 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: 18px; font-weight: undefined; line-height: 22.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-27.status p
86 × 58.78125 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
p-28.status p
86 × 39.1875 px; border-box; flow-root / 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 hidden / hidden
font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-search-31#control-search-31
40 × 40 px; border-box; block / absolute
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-30.status img
24 × 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
control-search-32#control-search-32
240 × 135 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-32.status img
240 × 135 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
h2-33.status h2
50 × 45 px; border-box; flow-root / static
margin top/right/bottom/left: 0px / 36px / 4px / 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: 18px; font-weight: undefined; line-height: 22.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-34.status p
86 × 117.5625 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
p-35.status p
86 × 39.1875 px; border-box; flow-root / 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 hidden / hidden
font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-search-33#control-search-33
40 × 40 px; border-box; block / absolute
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-37.status img
24 × 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
control-search-34#control-search-34
240 × 135 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-39.status img
240 × 135 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
h2-40.status h2
50 × 45 px; border-box; flow-root / static
margin top/right/bottom/left: 0px / 36px / 4px / 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: 18px; font-weight: undefined; line-height: 22.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-41.status p
86 × 117.5625 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
p-42.status p
86 × 39.1875 px; border-box; flow-root / 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 hidden / hidden
font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-search-35#control-search-35
40 × 40 px; border-box; block / absolute
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-44.status img
24 × 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
h2-45.status h2
342 × 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
p-46.status p
342 × 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
h2-47.status h2
50 × 45 px; border-box; flow-root / static
margin top/right/bottom/left: 0px / 36px / 4px / 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: 18px; font-weight: undefined; line-height: 22.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-48.status p
86 × 97.96875 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
p-49.status p
86 × 39.1875 px; border-box; flow-root / 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 hidden / hidden
font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
h2-50.status h2
50 × 45 px; border-box; flow-root / static
margin top/right/bottom/left: 0px / 36px / 4px / 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: 18px; font-weight: undefined; line-height: 22.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-51.status p
86 × 78.375 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
p-52.status p
86 × 39.1875 px; border-box; flow-root / 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 hidden / hidden
font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
h2-53.status h2
50 × 45 px; border-box; flow-root / static
margin top/right/bottom/left: 0px / 36px / 4px / 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: 18px; font-weight: undefined; line-height: 22.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-54.status p
86 × 58.78125 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
p-55.status p
86 × 39.1875 px; border-box; flow-root / 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 hidden / hidden
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_search.html-390.json. This measures the actual local recipe, not the documentation frame.

Measured local geometry at 1440 px

root.status
1152 × 2240.75 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
tab-row.status div
1152 × 56 px; border-box; flex / static
margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 4px / 0px / 20px / 0px
row gap ; column gap ; align ; overflow auto / auto
font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
filter-all#filter-all
40.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-search-17#control-search-17
65.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-search-18#control-search-18
94.03125 × 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-search-19#control-search-19
67.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
control-search-20#control-search-20
139.46875 × 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-search-21#control-search-21
49.484375 × 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
overflow-controls.status div
68 × 32 px; border-box; flex / 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
control-search-22#control-search-22
32 × 32 px; border-box; 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: 0px; font-weight: undefined; line-height: 0px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-search-23#control-search-23
32 × 32 px; border-box; 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: 0px; font-weight: undefined; line-height: 0px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
filters-trigger#control-search-24
78.65625 × 26 px; border-box; block / static
margin top/right/bottom/left: 0px / 0px / 0px / 493.422px; 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
img-11.status img
24 × 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-12.status p
1152 × 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
status#filter-status
1152 × 0 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-search-25#control-search-25
0 × 0 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 / 10px / 10px / 10px
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-search-26#control-search-26
0 × 0 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 / 10px / 10px / 10px
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-search-27#control-search-27
0 × 0 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 / 10px / 10px / 10px
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-search-28#control-search-28
500 × 281.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.status img
500 × 281.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
h2-19.status h2
600 × 22.5 px; border-box; block / static
margin top/right/bottom/left: 0px / 36px / 4px / 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: 18px; font-weight: undefined; line-height: 22.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-20.status p
636 × 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
p-21.status p
636 × 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-search-29#control-search-29
40 × 40 px; border-box; block / absolute
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-23.status img
24 × 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
control-search-30#control-search-30
500 × 281.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-25.status img
500 × 281.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
h2-26.status h2
600 × 22.5 px; border-box; block / static
margin top/right/bottom/left: 0px / 36px / 4px / 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: 18px; font-weight: undefined; line-height: 22.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-27.status p
636 × 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
p-28.status p
636 × 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-search-31#control-search-31
40 × 40 px; border-box; block / absolute
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-30.status img
24 × 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
control-search-32#control-search-32
500 × 281.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-32.status img
500 × 281.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
h2-33.status h2
600 × 22.5 px; border-box; block / static
margin top/right/bottom/left: 0px / 36px / 4px / 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: 18px; font-weight: undefined; line-height: 22.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-34.status p
636 × 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
p-35.status p
636 × 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-search-33#control-search-33
40 × 40 px; border-box; block / absolute
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-37.status img
24 × 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
control-search-34#control-search-34
500 × 281.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-39.status img
500 × 281.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
h2-40.status h2
600 × 22.5 px; border-box; block / static
margin top/right/bottom/left: 0px / 36px / 4px / 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: 18px; font-weight: undefined; line-height: 22.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-41.status p
636 × 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
p-42.status p
636 × 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-search-35#control-search-35
40 × 40 px; border-box; block / absolute
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-44.status img
24 × 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
h2-45.status h2
1152 × 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
p-46.status p
1152 × 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-47.status h2
600 × 45 px; border-box; block / static
margin top/right/bottom/left: 0px / 36px / 4px / 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: 18px; font-weight: undefined; line-height: 22.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-48.status p
636 × 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
p-49.status p
636 × 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-50.status h2
600 × 22.5 px; border-box; block / static
margin top/right/bottom/left: 0px / 36px / 4px / 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: 18px; font-weight: undefined; line-height: 22.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-51.status p
636 × 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
p-52.status p
636 × 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-53.status h2
600 × 22.5 px; border-box; block / static
margin top/right/bottom/left: 0px / 36px / 4px / 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: 18px; font-weight: undefined; line-height: 22.5px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-54.status p
636 × 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
p-55.status p
636 × 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_search.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]
authorityreconstructed local contract
inputsselected channel tab
defaultsselected: Home
eventsclick tab
outputsaria-selected moves
local shelf heading and cards update
status text changes
focusTabs are native buttons with role=tab.
errors
motionNo scripted animation.
invariantsexactly one tab is selected
tabs overflow horizontally rather than wrapping
stateOwnershipdata-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
semanticsUse 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.