All examples / Component family

Player and actions

Unavailable and locally playable player states, controls, engagement controls and share dialog.

Live component context

video-player

This instance is unavailable. Open the original local clip recipe for working playback controls.

playnextmuteseek barlive indicatorautoplayCCsettingstheatercastfullscreenlikedislikesharesavedownloadmore actions

Isolated specimen

Product context

Open watch unavailable 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="video-player"]
selectors	.player .unavailable .player-controls .seek
authority	reconstructed local contract
inputs	unavailable fixture: settings trigger local-media fixture: play or pause, mute, seek, settings, fullscreen
defaults	unavailableFixture: availability: unavailable settings: closed localMediaFixture: availability: original local media paused: true muted: true autoplay: false
events	click unavailable-fixture settings click local-media play or pause click local-media mute change local-media seek click local-media settings click local-media fullscreen
outputs	unavailable settings role=menu toggles local media play state and status update local mute state and status update local seek status updates local settings menu opens local fullscreen request updates aria-pressed
focus	Both settings triggers stay reachable; unavailable quality item is disabled.
errors	The unavailable fixture does not claim usable playback. The original local-media fixture does not claim YouTube stream playback, captions, quality, ads, or cast behavior.
motion	No scripted animation.
invariants	The unavailable fixture remains distinct from the public playable-player observation. The playable-local fixture uses original local media and never autoplays. The seek bar is functional only in the original local-media fixture.
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

paused
playing documented
unavailable observed
CC unavailable observed
settings collapsed
signed-out gated completion

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 .ytp-chrome-controls, .ytp-button, .ytp-progress-bar-container.

Measured local geometry at 390 px

root	`.player[data-denominator="video-player"],.playable-player` 342 × 192.375 px; border-box; flex / 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 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-0	`.player[data-denominator="video-player"],.playable-player img` 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 clip / clip font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
unavailable-dialog	`.player[data-denominator="video-player"],.playable-player div` 260.59375 × 88.984375 px; border-box; block / absolute 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
h1-2	`.player[data-denominator="video-player"],.playable-player h1` 260.59375 × 28 px; border-box; block / static margin top/right/bottom/left: 13.4px / 0px / 13.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: 20px; font-weight: undefined; line-height: 28px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-3	`.player[data-denominator="video-player"],.playable-player p` 260.59375 × 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
controls	`.player[data-denominator="video-player"],.playable-player div` 318 × 26 px; border-box; flex / absolute 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-watch-unavailable-18	`#control-watch-unavailable-18` 36 × 26 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: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
img-6	`.player[data-denominator="video-player"],.playable-player 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-watch-unavailable-19	`#control-watch-unavailable-19` 36 × 26 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: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
img-8	`.player[data-denominator="video-player"],.playable-player 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
seek	`.player[data-denominator="video-player"],.playable-player div` 142 × 4 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
control-watch-unavailable-20	`#control-watch-unavailable-20` 36 × 26 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: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
img-11	`.player[data-denominator="video-player"],.playable-player 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-watch-unavailable-21	`#control-watch-unavailable-21` 36 × 26 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: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
img-13	`.player[data-denominator="video-player"],.playable-player 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

Probe evidence/local-contracts/examples_watch-unavailable.html-390.json. This measures the actual local recipe, not the documentation frame.

Measured local geometry at 1440 px

root	`.player[data-denominator="video-player"],.playable-player` 748 × 420.75 px; border-box; flex / 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 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-0	`.player[data-denominator="video-player"],.playable-player img` 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 clip / clip font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
unavailable-dialog	`.player[data-denominator="video-player"],.playable-player div` 260.59375 × 88.984375 px; border-box; block / absolute 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
h1-2	`.player[data-denominator="video-player"],.playable-player h1` 260.59375 × 28 px; border-box; block / static margin top/right/bottom/left: 13.4px / 0px / 13.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: 20px; font-weight: undefined; line-height: 28px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-3	`.player[data-denominator="video-player"],.playable-player p` 260.59375 × 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
controls	`.player[data-denominator="video-player"],.playable-player div` 724 × 26 px; border-box; flex / absolute 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-watch-unavailable-18	`#control-watch-unavailable-18` 36 × 26 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: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
img-6	`.player[data-denominator="video-player"],.playable-player 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-watch-unavailable-19	`#control-watch-unavailable-19` 36 × 26 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: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
img-8	`.player[data-denominator="video-player"],.playable-player 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
seek	`.player[data-denominator="video-player"],.playable-player div` 548 × 4 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
control-watch-unavailable-20	`#control-watch-unavailable-20` 36 × 26 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: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
img-11	`.player[data-denominator="video-player"],.playable-player 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-watch-unavailable-21	`#control-watch-unavailable-21` 36 × 26 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: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
img-13	`.player[data-denominator="video-player"],.playable-player 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

Probe evidence/local-contracts/examples_watch-unavailable.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

playable-local-media

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

native videoplay or pausemuteseeksettingsfull screen

Isolated specimen

Product context

Open playable local 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="playable-local-media"]
selectors	.playable-player #local-video .player-controls [data-action="media-play"] [data-action="media-mute"] [data-action="media-seek"] [data-action="media-settings"] [data-action="media-fullscreen"]
authority	reconstructed local contract
inputs	play or pause mute seek value settings fullscreen
defaults	paused: true muted: true autoplay: false mediaAuthority: original local two-second clip
events	click play or pause click mute change seek click settings click fullscreen
outputs	native video play state changes mute state changes status announces seek value settings menu opens fullscreen request sets aria-pressed
focus	Every control has an accessible name.
errors	The clip is a local test fixture and makes no claim about YouTube playback content or production player behavior.
motion	No autoplay; native media progression begins only after an explicit play action.
invariants	Original local media only separate component from the public-derived video player the control test retains decoded dimensions and state transitions at 390px and 1440px
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

no autoplay
paused
playing
muted
unmuted
reduced motion

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

video-action-row

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

Like count and account actionShare triggerSave account actionDownload account action

Isolated specimen

Product context

Open watch unavailable 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 documented actions; included in the video-player and share-dialog contracts.
inputs	Visible action label and optional count; Share requires the sibling #share-dialog.
output	Share opens the local dialog. Like, Save and Download open the labelled account boundary.
layout	Parent owns placement beside channel identity. .actions wraps with a 10px gap. .action uses 8px 14px padding and a 20px radius.
accessibility	Native buttons retain visible names. Opening a dialog moves focus inside and Escape returns to its trigger.
content	Keep action verbs short. Counts are fixture data. Never imply that a private account write succeeded.

Variants and content

signed-out account boundary
share closed
share open
narrow wrapping

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

share-dialog

Activate Share below the video, then test its controls. Escape returns to Share.

dialogsocial-share target carouselcopy-link field and Copy actionStart at checkbox and timeclose

Isolated specimen

Product context

Open watch unavailable 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="share-dialog"]
selectors	.share-dialog .share-card .share-link
authority	reconstructed local contract
inputs	Share trigger Copy link trigger close or Escape
defaults	open: false externalShareTargets: not locally activated
events	click Share click Close Escape copy link
outputs	dialog hidden/aria-hidden changes focus moves into dialog then returns copy status reports success or fallback
focus	The dialog traps Tab between enabled controls.
errors	clipboard denial reports manual-copy fallback external social-share targets are observed public anatomy but local boundary previews never send messages or open third-party services
motion	No scripted animation.
invariants	role=dialog and aria-modal=true are on share card the observed public dialog contains a social-target carousel, Copy link field, Start at checkbox/time, and close control open-state geometry is separately compared to public Share dialog
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

opened
retrieval error observed

Measured local geometry at 390 px

root	`#share-dialog` 0 × 0 px; border-box; none / fixed 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
h2-0	`#share-dialog h2` 0 × 0 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-watch-unavailable-26	`#control-watch-unavailable-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: 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
social-target-carousel	`#share-dialog div` 0 × 0 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 / 4px / 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
control-watch-unavailable-27	`#control-watch-unavailable-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: 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-4	`#share-dialog img` 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: 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-watch-unavailable-28	`#control-watch-unavailable-28` 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: 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-6	`#share-dialog img` 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: 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-watch-unavailable-29	`#control-watch-unavailable-29` 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: 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-8	`#share-dialog img` 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: 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-watch-unavailable-30	`#control-watch-unavailable-30` 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: 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-10	`#share-dialog img` 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: 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-watch-unavailable-31	`#control-watch-unavailable-31` 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: 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-12	`#share-dialog img` 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: 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-watch-unavailable-32	`#control-watch-unavailable-32` 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: 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-14	`#share-dialog img` 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: 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-watch-unavailable-33	`#control-watch-unavailable-33` 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: 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-16	`#share-dialog img` 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: 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-watch-unavailable-34	`#control-watch-unavailable-34` 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: 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-18	`#share-dialog img` 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: 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-watch-unavailable-35	`#control-watch-unavailable-35` 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: 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-20	`#share-dialog img` 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: 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-watch-unavailable-36	`#control-watch-unavailable-36` 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: 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
start-at	`#control-watch-unavailable-37` 0 × 0 px; border-box; inline-block / static margin top/right/bottom/left: 3px / 3px / 3px / 4px; 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-watch-unavailable-38	`#control-watch-unavailable-38` 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 / 2px / 1px / 2px 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
share-status	`#share-status` 0 × 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
copy-status	`#copy-status` 0 × 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

Probe evidence/local-contracts/examples_watch-unavailable.html-390.json. This measures the actual local recipe, not the documentation frame.

Measured local geometry at 1440 px

root	`#share-dialog` 0 × 0 px; border-box; none / fixed 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
h2-0	`#share-dialog h2` 0 × 0 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-watch-unavailable-26	`#control-watch-unavailable-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: 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
social-target-carousel	`#share-dialog div` 0 × 0 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 / 4px / 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
control-watch-unavailable-27	`#control-watch-unavailable-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: 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-4	`#share-dialog img` 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: 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-watch-unavailable-28	`#control-watch-unavailable-28` 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: 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-6	`#share-dialog img` 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: 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-watch-unavailable-29	`#control-watch-unavailable-29` 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: 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-8	`#share-dialog img` 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: 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-watch-unavailable-30	`#control-watch-unavailable-30` 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: 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-10	`#share-dialog img` 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: 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-watch-unavailable-31	`#control-watch-unavailable-31` 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: 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-12	`#share-dialog img` 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: 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-watch-unavailable-32	`#control-watch-unavailable-32` 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: 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-14	`#share-dialog img` 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: 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-watch-unavailable-33	`#control-watch-unavailable-33` 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: 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-16	`#share-dialog img` 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: 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-watch-unavailable-34	`#control-watch-unavailable-34` 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: 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-18	`#share-dialog img` 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: 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-watch-unavailable-35	`#control-watch-unavailable-35` 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: 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-20	`#share-dialog img` 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: 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-watch-unavailable-36	`#control-watch-unavailable-36` 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: 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
start-at	`#control-watch-unavailable-37` 0 × 0 px; border-box; inline-block / static margin top/right/bottom/left: 3px / 3px / 3px / 4px; 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-watch-unavailable-38	`#control-watch-unavailable-38` 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 / 2px / 1px / 2px 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
share-status	`#share-status` 0 × 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
copy-status	`#copy-status` 0 × 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

Probe evidence/local-contracts/examples_watch-unavailable.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

metadata-description

Activate READ MORE. The description and expanded state change together.

summary copymore triggerless trigger

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="metadata-description"]
selectors	.description-toggle .watch-title .channel-line
authority	reconstructed local contract
inputs	READ MORE trigger
defaults	expanded: false
events	click expand
outputs	target hidden state toggles aria-expanded and label change
focus	The trigger keeps normal button focus.
errors
motion	No scripted animation.
invariants	description only appears when expanded
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

collapsed
expanded

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.