All examples / Component family
Shell and search
Search field, desktop guide and signed-out entry actions.
Live component context
global-header
Open the linked recipe for keyboard interaction and its full responsive composition. The embedded frames show the same live component.
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="global-header"] |
|---|---|
| selectors | .yt-header .searchbox .icon-button .signin |
| authority | reconstructed local contract |
| inputs | query string q |
| defaults | query: drawerExpanded: true on desktop fixture |
| events | submit search form click drawer click voice click sign in |
| outputs | search.html?q=<encoded query> native required-message for empty query local voice or sign-in boundary dialog |
| focus | The search input is tabbable. Boundary dialog receives focus and Escape restores the triggering control. |
| errors | empty query blocks navigation voice and sign-in stay within the public-evidence boundary |
| motion | Guide transform is 150ms except under reduced motion. |
| invariants | header is 56px high search uses a native form and named input buttons have accessible names |
| 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
empty query
populated query
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-masthead, ytd-searchbox.
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
desktop-guide
Open the linked recipe for keyboard interaction and its full responsive composition. The embedded frames show the same live component.
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 |
| authority | reconstructed local contract |
| inputs | drawer trigger |
| defaults | desktop: expanded narrow: off-canvas |
| events | click drawer |
| outputs | guide open or collapsed class and matching aria-expanded |
| focus | The trigger retains normal button focus. |
| errors | |
| motion | Narrow guide transform is 150ms except under reduced motion. |
| invariants | guide is 240px wide when open navigation links remain native anchors |
| 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
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.