All examples / Component family

History and gates

Signed-out history and subscription gate patterns.

Live component context

history-gate

Activate Sign in to inspect the local account boundary. No account is opened.

headingexplanatory copysign-in actionwatch/search history controls

Isolated specimen

Product context

Open history 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="history-gate"]
selectors	.history-gate .history-actions
authority	reconstructed local contract
inputs	Sign in action
defaults	signedIn: false
events	click sign in
outputs	public sign-in boundary dialog
focus	Sign-in action remains a native button.
errors	personal history rows are not fabricated
motion	No scripted animation.
invariants	signed-out gate has no private history data
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

signed out

Measured local geometry at 390 px

root	`.history-gate` 342 × 691.15625 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-history-17	`#control-history-17` 182 × 51.1875 px; border-box; flex / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 6px / 6px / 6px / 6px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-history-18	`#control-history-18` 182 × 36 px; border-box; flex / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 6px / 6px / 6px / 6px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-history-19	`#control-history-19` 182 × 51.1875 px; border-box; flex / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 6px / 6px / 6px / 6px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-history-20	`#control-history-20` 182 × 36 px; border-box; flex / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 6px / 6px / 6px / 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
h1-4	`.history-gate h1` 342 × 89.59375 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 8px / 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: 32px; font-weight: undefined; line-height: 44.8px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-5	`.history-gate p` 280.546875 × 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-history-21	`#control-history-21` 63.921875 × 35.59375 px; border-box; block / static margin top/right/bottom/left: 18px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 7px / 10px / 7px / 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

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

Measured local geometry at 1440 px

root	`.history-gate` 1152 × 460 px; border-box; grid / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-history-17	`#control-history-17` 369 × 36 px; border-box; flex / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 6px / 6px / 6px / 6px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-history-18	`#control-history-18` 369 × 36 px; border-box; flex / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 6px / 6px / 6px / 6px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-history-19	`#control-history-19` 369 × 36 px; border-box; flex / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 6px / 6px / 6px / 6px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-history-20	`#control-history-20` 369 × 36 px; border-box; flex / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 6px / 6px / 6px / 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
h1-4	`.history-gate h1` 421.984375 × 44.796875 px; border-box; block / static margin top/right/bottom/left: 0px / 0px / 8px / 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: 32px; font-weight: undefined; line-height: 44.8px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
p-5	`.history-gate p` 280.546875 × 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-history-21	`#control-history-21` 71.921875 × 37.59375 px; border-box; block / static margin top/right/bottom/left: 18px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 8px / 14px / 8px / 14px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined

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

shorts-player

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

vertical Shortcontinuous feedoverlay controls not captured

Isolated specimen

Product context

Open shorts viewer 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="shorts-player"]
selectors	.shorts-viewer .short-frame .short-overlay .short-actions
authority	reconstructed local contract
inputs	like dislike share next
defaults	selected: false currentItem: 1
events	click toggle click Share click next
outputs	aria-pressed toggles Share dialog opens fixture title/image/status changes
focus	Every action has an accessible name.
errors	continuous feed runtime and playback controls remain unverified
motion	No scripted animation.
invariants	vertical frame remains distinct from normal video player
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

continuous advance documented
Clear Screen staged rollout

Measured local geometry at 390 px

root	`.shorts-viewer` 342 × 720 px; border-box; grid / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
vertical-frame	`.shorts-viewer div` 274 × 720 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-1	`.shorts-viewer img` 274 × 720 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
short-state	`#short-state` 226 × 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
actions	`.shorts-viewer aside` 52 × 240 px; border-box; grid / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-shorts-viewer-17	`#control-shorts-viewer-17` 48 × 48 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: 18px; font-weight: undefined; line-height: 25.2px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-shorts-viewer-18	`#control-shorts-viewer-18` 48 × 48 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: 18px; font-weight: undefined; line-height: 25.2px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
share-action	`#share-action` 48 × 48 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: 18px; font-weight: undefined; line-height: 25.2px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
next-short	`#next-short` 48 × 48 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: 18px; font-weight: undefined; line-height: 25.2px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined

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

Measured local geometry at 1440 px

root	`.shorts-viewer` 740 × 720 px; border-box; grid / static margin top/right/bottom/left: 0px / 206px / 0px / 206px; 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
vertical-frame	`.shorts-viewer div` 420 × 720 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-1	`.shorts-viewer img` 420 × 720 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
short-state	`#short-state` 372 × 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
actions	`.shorts-viewer aside` 80 × 256 px; border-box; grid / static margin top/right/bottom/left: 0px / 0px / 0px / 0px; border top/right/bottom/left: / / / ; padding top/right/bottom/left: 0px / 0px / 0px / 0px row gap ; column gap ; align ; overflow visible / visible font-family: undefined; font-size: 14px; font-weight: undefined; line-height: 19.6px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-shorts-viewer-17	`#control-shorts-viewer-17` 80 × 52 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: 18px; font-weight: undefined; line-height: 25.2px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
control-shorts-viewer-18	`#control-shorts-viewer-18` 80 × 52 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: 18px; font-weight: undefined; line-height: 25.2px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
share-action	`#share-action` 80 × 52 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: 18px; font-weight: undefined; line-height: 25.2px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined
next-short	`#next-short` 80 × 52 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: 18px; font-weight: undefined; line-height: 25.2px; letter-spacing: undefined; white-space: undefined; overflow-wrap: undefined

Probe evidence/local-contracts/examples_shorts-viewer.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

premium-plan-faq

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

hero and exact Premium logomembership plan cards and native choicesPremium Lite benefit boundarypublic feature sectionsloaded public feature mediamembership comparisonmembership CTAspublic Help and terms linksContact us sign-in boundaryseven FAQ disclosuresalternate Lite explainer introalternate Lite explainer four-feature group

Isolated specimen

Product context

Open premium recipe · API and source trace

Open the alternate Lite explainer offer. Separate first-party responses included this four-benefit introduction. Resizing the same response preserved it at every width; it is modeled as a content variant.

Reconstructed local contract. Its source appearance and local behavior have different authority. Interactive account boundaries never perform remote writes.

root	[data-denominator="premium-plan-faq"]
selectors	.premium .premium-hero .premium-logo .premium-plan-grid .premium-plan .premium-plan-option .premium-lite-card .premium-features .premium-feature-media .premium-lite-explainer .premium-lite-features .premium-lite-feature-image .premium-compare-grid .premium-compare-head .premium-compare-plan-title .premium-compare-cancel .premium-check .premium-compare-note .premium-ready .premium-inline-link .premium-external-cue .premium-faq .premium-faq-item button .premium-faq-answer
authority	reconstructed local contract
inputs	monthly or annual Individual plan radio membership CTA public Terms and Help link Contact us signed-out link FAQ disclosure explicit alternate Lite explainer query
defaults	signedIn: false individualPlan: monthly faq: all seven disclosures collapsed offerVariant: primary; Lite explainer is selected only by ?offer=lite-explainer
events	load explicit alternate Lite explainer query change Individual plan radio click membership CTA follow observed public Terms or Help link click Contact us keyboard or pointer activate FAQ disclosure
outputs	selected Individual plan status and CTA label observed public Terms and Help destinations Contact us and membership CTAs open the public sign-in boundary FAQ target hidden state and aria-expanded change alternate Lite intro and four illustration cards when the explicit local query is selected
focus	Plan choices are native radios. Membership, Contact us, and FAQ actions are native buttons; the FAQ button retains focus after it expands.
errors	Checkout, payment, entitlement, account eligibility, cancellation, and live billing prices are private or time-sensitive boundaries. Captured amounts and trials are dated examples only. Contact us retains the captured signed-out account boundary; it does not claim a support outcome.
motion	FAQ chevron rotation is disabled under reduced motion. Animated Premium feature illustrations use exact first-frame PNG posters under prefers-reduced-motion; this is a verified local addition.
invariants	Inline public links are underlined so their meaning does not depend on color; this is a local accessibility addition. The signed-out public landing keeps its source-recovered hero, cards, loaded feature media, comparison, public Help and Terms links, and seven disclosed questions. The explicit Lite-explainer query represents the separately observed signed-out response family; it is a local content selector, not a claimed production URL contract. The local plan choice and sign-in boundaries prove only the static reconstruction; they do not claim private purchase, account, or support behavior.
stateOwnership	FAQ disclosure and the Individual plan radio status are owned by site/examples/premium.js. Membership CTAs use the existing site/examples/product.js sign-in boundary. CSS ownership is site/examples/premium.css after product.css and control-overrides.css.
responsiveOwnership	@media (max-width:700px) in site/examples/premium.css
semantics	Use native button, input, form, link, dialog, tablist, and tab semantics when the part is interactive. Preserve the captured aria-* state on the control that owns the action.

Variants and content

public signed-out landing
plan selection monthly
plan selection annual
FAQ collapsed
FAQ expanded
sign-in purchase boundary
alternate Lite explainer query variant

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 .lpHeaderSectionViewModelHost, .lpHeaderSectionViewModelLpHeaderLogo, .lpHeaderSectionViewModelLpHeaderSubtitleSection, .lpHeaderSectionViewModelLpHeaderTitle, .lpHeaderSectionViewModelLpHeaderButtonSection, .ytmLpOfferCardViewModelHost, .ytmLpHeadlineSectionViewModelHost, .ytmLpHeadlineSectionViewModelTitleText, .ytmLpHeadlineSectionViewModelSubtitleText, .ytmLpSmallFeatureSectionGroupViewModelHost, .ytmLpSmallFeatureSectionViewModelHost, .ytmLpSmallFeatureSectionViewModelFeatureImageContainer, .ytmLpLargeFeatureSectionViewModelHost, .ytCoreImageHost, .ytSectionGroupViewModelHost, .ytLpOfferTableViewModelHost, .ytLpOfferTableRowViewModelHost, .ytLpOfferTableRowViewModelLpOfferTableFirstRowContentCell, .ytLpOfferTableCellContentViewModelHost, .ytLpOfferTableCellContentViewModelLpOfferTableCellTitle, .ytLpOfferTableCellContentViewModelLpOfferTableCellSubtitle, .ytLpOfferTableCellContentViewModelLpOfferTableCellDescription, .ytLpOfferTableCellContentViewModelLpOfferTableCellPurchaseButton, .ytLpFaqSectionViewModelFaqContainer, .ytLpFaqSectionViewModelLpFaqSectionHeader, .ytLpFaqEntryViewModelHost.

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.