Building an Accordion the Browser Can Search

import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';

/**
 * The stylesheet for the light-DOM fixture, injected as a plain `<style>` element.
 *
 * The harness renders into the light DOM so find-in-page reaches the fixture, which means there is no shadow root to scope `static styles`, so the CSS ships as a text child of a `<style>` tag instead.
 */
const STYLES = `
	.naive-demo {
		font-family: var( --font-sans, system-ui, sans-serif );
		color: var( --ink, #17171a );
		padding: 22px;
	}
	.naive-demo code {
		font-family: var( --font-mono, monospace );
	}
	.naive-demo .hint {
		margin: 0 0 14px;
		border-radius: 9px;
		border: 1px solid #f1d27a;
		background: #fdf6e3;
		padding: 10px 12px;
		font-size: 13px;
		line-height: 1.5;
		color: #8a6d1f;
	}
	.naive-demo .phrase {
		display: flex;
		gap: 8px;
		align-items: center;
		margin-top: 8px;
	}
	.naive-demo .phrase button,
	.naive-demo .open-tab {
		font: inherit;
		font-size: 12px;
		cursor: pointer;
		padding: 6px 10px;
		border-radius: 6px;
		border: 1px solid var( --line, #e7e6e2 );
		background: var( --bg, #fcfcfb );
		color: var( --ink, #17171a );
	}
	.naive-demo .open-tab {
		margin-bottom: 16px;
	}
	.naive-demo .item {
		border: 1px solid var( --line, #e7e6e2 );
		border-radius: 10px;
		margin-bottom: 10px;
		background: var( --surface, #fff );
		overflow: hidden;
	}
	.naive-demo .item > button {
		width: 100%;
		text-align: left;
		font: inherit;
		font-weight: 600;
		cursor: pointer;
		padding: 13px 15px;
		border: 0;
		background: transparent;
		color: var( --ink, #17171a );
	}
	.naive-demo .answer {
		padding: 0 15px 13px;
		font-size: 14.5px;
		line-height: 1.6;
		color: var( --ink-soft, #56565c );
	}
	.naive-demo .answer[hidden] {
		display: none;
	}
	.naive-demo .result {
		margin-top: 6px;
		font-size: 12.5px;
		line-height: 1.5;
		color: var( --ink-faint, #71717b );
	}
`;

/**
 * Demo harness for the naive `display: none` FAQ that fails a find-in-page search.
 *
 * It renders the FAQ into the light DOM so the reader's own find-in-page can reach it, and it hides each collapsed answer with `display: none`, which the browser's Find cannot reveal.
 * The search phrase lives only inside a collapsed answer, and it is never rendered into any visible element, so the reader copies it from a copy-only button rather than reading it off the page, and a search can only ever succeed by matching the collapsed answer itself.
 * The find test runs in the demo's own tab, opened from the button, so the surrounding article prose and code panel can never satisfy the search in place of the collapsed content.
 *
 * @element demo-searchable-accordions-searchable-naive
 */
@customElement( 'demo-searchable-accordions-searchable-naive' )
export class SearchableNaiveDemo extends LitElement {

	/**
	 * The id of the answer currently expanded by a click, or null when all are collapsed.
	 */
	@state()
	private openId: string | null = null;

	/**
	 * The clipboard copy outcome, for the button's honest confirmation label.
	 *
	 * It reads `copied` on a successful write and `failed` when the clipboard write throws or is unavailable, so the button never claims success the reader cannot act on.
	 */
	@state()
	private copyState: 'idle' | 'copied' | 'failed' = 'idle';

	/**
	 * The phrase tucked inside a closed answer, which only a find match on that answer could surface.
	 *
	 * It is deliberately absent from the article prose, so the only place a search could match it is the collapsed answer.
	 */
	private readonly phrase = 'ozone kestrel drift';

	/**
	 * The FAQ entries, each with an answer hidden by `display: none` when collapsed.
	 */
	private readonly faqs = [
		{
			id: 'answer-refunds',
			question: 'How do refunds work?',
			answer: 'Refunds are available within 30 days. Quote the phrase ozone kestrel drift to support for a faster turnaround.',
		},
		{
			id: 'answer-plans',
			question: 'Can I change my plan?',
			answer: 'You can switch plans at any time from billing, and the new rate starts on your next cycle.',
		},
	];

	/**
	 * Renders into the light DOM so find-in-page and the reveal algorithm treat the fixture as ordinary document content.
	 *
	 * @returns This element, so Lit renders the template as light-DOM children instead of into a shadow root.
	 */
	protected createRenderRoot(): HTMLElement {
		return this;
	}

	/**
	 * Copies the search phrase so the reader can paste it into their browser's find bar.
	 *
	 * It reports the real outcome, recording `copied` only when the clipboard write resolves and `failed` when it rejects or is unavailable, because the reader must actually hold the phrase to run the find test.
	 */
	private copyPhrase = async (): Promise<void> => {
		try {
			await navigator.clipboard.writeText( this.phrase );
			this.copyState = 'copied';
		} catch {
			this.copyState = 'failed';
		}
	};

	/**
	 * Opens this same demo in its own tab, where the only searchable text is the fixture.
	 */
	private openInTab = (): void => {
		window.open( window.location.href, '_blank', 'noopener' );
	};

	/**
	 * Toggles an answer open or closed on a click, revealing `display: none` content that Find still cannot reach on its own.
	 *
	 * @param id - The answer to toggle.
	 */
	private toggle( id: string ): void {
		this.openId = this.openId === id ? null : id;
	}

	/**
	 * Renders the copy-only phrase control, the open-in-tab control, and the `display: none` FAQ.
	 */
	render() {
		return html`
			<style>${ STYLES }</style>
			<div class="naive-demo">
				<div class="hint">
					Copy the test phrase, open the demo in its own tab, press <kbd>Cmd/Ctrl F</kbd>, and paste to search.
					The browser finds nothing, because the answer is <code>display: none</code>.
					<div class="phrase">
						<button @click=${ this.copyPhrase }>${ this.copyState === 'copied' ? 'Copied' : this.copyState === 'failed' ? 'Copy failed' : 'Copy test phrase' }</button>
					</div>
				</div>

				<button class="open-tab" @click=${ this.openInTab }>Open this demo in its own tab</button>

				${ this.faqs.map(
					( faq ) => html`
						<div class="item">
							<button
								aria-expanded=${ this.openId === faq.id }
								aria-controls=${ faq.id }
								@click=${ () => this.toggle( faq.id ) }
							>
								${ faq.question }
							</button>
							<div class="answer" id=${ faq.id } ?hidden=${ this.openId !== faq.id }>${ faq.answer }</div>
						</div>
					`,
				) }

				<p class="result">
					Click a question and its answer appears, so the content is really there.
					Search for it with Find while it is closed and the browser cannot reach it.
				</p>
			</div>
		`;
	}
}

declare global {
	interface HTMLElementTagNameMap {
		'demo-searchable-accordions-searchable-naive': SearchableNaiveDemo;
	}
}

import { LitElement, html } from 'lit';
import { customElement, state, query } from 'lit/decorators.js';

/**
 * The stylesheet for the light-DOM fixture, injected as a plain `<style>` element.
 *
 * The harness renders into the light DOM so find-in-page reaches the sample panel, which means there is no shadow root to scope `static styles`, so the CSS ships as a text child of a `<style>` tag instead.
 */
const STYLES = `
	.hidden-lab {
		font-family: var( --font-sans, system-ui, sans-serif );
		color: var( --ink, #17171a );
		padding: 22px;
	}
	.hidden-lab code {
		font-family: var( --font-mono, monospace );
	}
	.hidden-lab .hint {
		margin: 0 0 14px;
		border-radius: 9px;
		border: 1px solid #f1d27a;
		background: #fdf6e3;
		padding: 10px 12px;
		font-size: 13px;
		line-height: 1.5;
		color: #8a6d1f;
	}
	.hidden-lab .phrase {
		display: flex;
		gap: 8px;
		align-items: center;
		margin-top: 8px;
	}
	.hidden-lab .phrase button,
	.hidden-lab .open-tab {
		font: inherit;
		font-size: 12px;
		cursor: pointer;
		padding: 6px 10px;
		border-radius: 6px;
		border: 1px solid var( --line, #e7e6e2 );
		background: var( --bg, #fcfcfb );
		color: var( --ink, #17171a );
	}
	.hidden-lab .open-tab {
		margin-bottom: 16px;
	}
	.hidden-lab .switch {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-bottom: 16px;
	}
	.hidden-lab .switch button {
		font: inherit;
		font-family: var( --font-mono, monospace );
		font-size: 12px;
		cursor: pointer;
		padding: 7px 10px;
		border-radius: 7px;
		border: 1px solid var( --line, #e7e6e2 );
		background: var( --bg, #fcfcfb );
		color: var( --ink-soft, #56565c );
	}
	.hidden-lab .switch button[aria-pressed='true'] {
		border-color: var( --accent, #2257e6 );
		background: color-mix( in srgb, var( --accent, #2257e6 ) 12%, var( --surface, #fff ) );
		color: var( --ink, #17171a );
		font-weight: 600;
	}
	.hidden-lab .stage {
		border: 1px dashed var( --line, #e7e6e2 );
		border-radius: 10px;
		padding: 14px;
		margin-bottom: 16px;
		min-height: 64px;
	}
	.hidden-lab .stage > p {
		margin: 0 0 8px;
		font-size: 13px;
		color: var( --ink-faint, #71717b );
	}
	.hidden-lab .panel {
		border-radius: 8px;
		background: color-mix( in srgb, var( --accent, #2257e6 ) 8%, var( --surface, #fff ) );
		padding: 12px 14px;
		font-size: 14px;
		line-height: 1.55;
		color: var( --ink, #17171a );
	}
	.hidden-lab .cols {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.hidden-lab .col {
		border: 1px solid var( --line, #e7e6e2 );
		border-radius: 10px;
		padding: 12px 14px;
	}
	.hidden-lab .col h4 {
		margin: 0 0 8px;
		font-family: var( --font-mono, monospace );
		font-size: 10.5px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var( --ink-faint, #71717b );
	}
	.hidden-lab .row {
		display: flex;
		justify-content: space-between;
		gap: 10px;
		font-size: 13px;
		padding: 4px 0;
	}
	.hidden-lab .row .k {
		color: var( --ink-soft, #56565c );
	}
	.hidden-lab .row .v {
		font-family: var( --font-mono, monospace );
		font-weight: 600;
	}
	.hidden-lab .test {
		margin-top: 12px;
		font-size: 12.5px;
		line-height: 1.5;
		color: var( --ink-faint, #71717b );
	}
	.hidden-lab .test code {
		font-family: var( --font-mono, monospace );
		color: var( --ink, #17171a );
	}
	@media ( max-width: 560px ) {
		.hidden-lab .cols {
			grid-template-columns: 1fr;
		}
	}
`;

/**
 * One hiding technique the lab can apply to the sample panel.
 *
 * `id` keys the switch, `label` shows in the control, and `apply` mutates the panel to match the technique under test.
 */
interface Technique {

	/**
	 * The stable key for the technique, used by the segmented control.
	 */
	id: string;

	/**
	 * The human label shown on the control.
	 */
	label: string;

	/**
	 * Applies the technique to the sample panel, clearing whatever the last one set.
	 *
	 * @param $panel - The panel whose hiding the lab is demonstrating.
	 */
	apply: ( $panel: HTMLElement ) => void;
}

/**
 * Demo harness for the hiding-technique lab.
 *
 * It renders the sample panel into the light DOM so the reader's own find-in-page can reach it, then applies one technique at a time to that panel, from `display: none` through `hidden="until-found"`, and reports two honest columns.
 * The left column reads what page JavaScript can actually detect: the computed `display`, a box-generation approximation from `getClientRects()`, and whether `beforematch` fired since the last technique change.
 * The right column states the expected collapsed-state behavior, whether the panel is found by Find and present in the accessibility tree, which page script cannot reliably introspect and the reader confirms in the demo's own tab.
 *
 * @element demo-searchable-accordions-searchable-hidden-lab
 */
@customElement( 'demo-searchable-accordions-searchable-hidden-lab' )
export class SearchableHiddenLabDemo extends LitElement {

	/**
	 * The id of the technique currently applied to the sample panel.
	 */
	@state()
	private current = 'display-none';

	/**
	 * Whether the panel's `beforematch` has fired since the last technique change.
	 *
	 * Only `hidden="until-found"` can ever set this true, which is the point of showing it.
	 */
	@state()
	private matched = false;

	/**
	 * The clipboard copy outcome, for the button's honest confirmation label.
	 *
	 * It reads `copied` on a successful write and `failed` when the clipboard write throws or is unavailable, so the button never claims success the reader cannot act on.
	 */
	@state()
	private copyState: 'idle' | 'copied' | 'failed' = 'idle';

	/**
	 * A render counter bumped after each technique applies, so the detected readout recomputes from the live panel.
	 */
	@state()
	private tick = 0;

	/**
	 * The sample panel the lab hides and reveals.
	 */
	@query( '.panel' )
	private $panel!: HTMLElement;

	/**
	 * The phrase tucked inside the sample panel, which the reader searches for to test find-in-page against the current technique.
	 *
	 * It is deliberately absent from every visible element, and it reaches the reader only by copying it to the clipboard, so a search can only ever succeed by matching the sample panel itself.
	 */
	private readonly phrase = 'cobalt meadow wren';

	/**
	 * The techniques the lab can switch between, in the order the contracts table lists them.
	 */
	private readonly techniques: Technique[] = [
		{
			id: 'display-none',
			label: 'display: none',
			apply: ( $panel ) => {
				$panel.removeAttribute( 'hidden' );
				$panel.style.cssText = 'display: none;';
			},
		},
		{
			id: 'hidden',
			label: 'hidden (boolean)',
			apply: ( $panel ) => {
				$panel.style.cssText = '';
				$panel.setAttribute( 'hidden', '' );
			},
		},
		{
			id: 'cv-hidden',
			label: 'content-visibility: hidden',
			apply: ( $panel ) => {
				$panel.removeAttribute( 'hidden' );
				$panel.style.cssText = 'content-visibility: hidden;';
			},
		},
		{
			id: 'cv-auto',
			label: 'content-visibility: auto',
			apply: ( $panel ) => {
				$panel.removeAttribute( 'hidden' );
				$panel.style.cssText = 'content-visibility: auto;';
			},
		},
		{
			id: 'until-found',
			label: 'hidden="until-found"',
			apply: ( $panel ) => {
				$panel.style.cssText = '';
				$panel.setAttribute( 'hidden', 'until-found' );
			},
		},
		{
			id: 'visually-hidden',
			label: 'visually hidden (clip)',
			apply: ( $panel ) => {
				$panel.removeAttribute( 'hidden' );
				$panel.style.cssText =
					'position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;';
			},
		},
	];

	/**
	 * Renders into the light DOM so find-in-page and the reveal algorithm treat the sample panel as ordinary document content.
	 *
	 * @returns This element, so Lit renders the template as light-DOM children instead of into a shadow root.
	 */
	protected createRenderRoot(): HTMLElement {
		return this;
	}

	/**
	 * Installs the single `beforematch` listener on the host as the element enters the document.
	 *
	 * The listener lives on the host rather than the panel so a detach-then-reattach re-registers it, since `connectedCallback` runs on every insertion where `firstUpdated` would run only once.
	 * The panel's `beforematch` bubbles to the host, so a host listener still hears it and confirms the target in `onBeforeMatch`.
	 */
	connectedCallback(): void {
		super.connectedCallback();
		this.addEventListener( 'beforematch', this.onBeforeMatch );
	}

	/**
	 * Applies the starting technique once the first render has produced the sample panel.
	 */
	protected firstUpdated(): void {
		this.applyCurrent();
	}

	/**
	 * Removes the `beforematch` listener when the element leaves the document, matching the add in `connectedCallback`.
	 */
	disconnectedCallback(): void {
		super.disconnectedCallback();
		this.removeEventListener( 'beforematch', this.onBeforeMatch );
	}

	/**
	 * Switches the lab to a technique, resets the match flag, and applies it.
	 *
	 * @param id - The technique to apply.
	 */
	private select( id: string ): void {
		this.current = id;
		this.matched = false;
		this.applyCurrent();
	}

	/**
	 * Applies the current technique to the panel and bumps the readout.
	 *
	 * Runs after the update so the queried panel is present, and only mutates the panel, since the `beforematch` listener is installed once in `connectedCallback` rather than re-added here.
	 */
	private applyCurrent(): void {
		void this.updateComplete.then( () => {
			const technique = this.techniques.find( ( t ) => t.id === this.current );
			if ( ! technique || ! this.$panel ) {
				return;
			}

			technique.apply( this.$panel );
			this.tick += 1;
		} );
	}

	/**
	 * Records that the browser fired `beforematch` on the sample panel, which only `hidden="until-found"` can do.
	 *
	 * The listener sits on the host, so it confirms the event came from the panel before recording the match rather than trusting any bubbled `beforematch`.
	 *
	 * @param event - The `beforematch` event bubbling from the panel to the host.
	 */
	private onBeforeMatch = ( event: Event ): void => {
		if ( event.target === this.$panel ) {
			this.matched = true;
		}
	};

	/**
	 * Copies the search phrase so the reader can paste it into their browser's find bar.
	 *
	 * It reports the real outcome, recording `copied` only when the clipboard write resolves and `failed` when it rejects or is unavailable, because the reader must actually hold the phrase to run the find test.
	 */
	private copyPhrase = async (): Promise<void> => {
		try {
			await navigator.clipboard.writeText( this.phrase );
			this.copyState = 'copied';
		} catch {
			this.copyState = 'failed';
		}
	};

	/**
	 * Opens this same demo in its own tab, where the only searchable text is the sample panel.
	 */
	private openInTab = (): void => {
		window.open( window.location.href, '_blank', 'noopener' );
	};

	/**
	 * Reads the panel's computed display for the detected column.
	 *
	 * @returns The current computed `display`, or a placeholder before the panel mounts.
	 */
	private readDisplay(): string {
		if ( ! this.$panel ) {
			return '...';
		}
		return getComputedStyle( this.$panel ).display;
	}

	/**
	 * Approximates whether the panel still generates a box, using its client rectangles.
	 *
	 * This is a demo approximation, not a universal layout oracle: a clipped or `content-visibility: hidden` box still reports rects, while `display: none` reports none.
	 *
	 * @returns A short yes or no string for the readout.
	 */
	private readBox(): string {
		if ( ! this.$panel ) {
			return '...';
		}
		return this.$panel.getClientRects().length > 0 ? 'yes' : 'no';
	}

	/**
	 * Renders the copy-phrase control, the open-in-tab control, the segmented control, the sample panel, and the honest two-column readout.
	 */
	render() {
		// Read off `tick` so the detected column recomputes whenever a technique applies.
		void this.tick;
		const expectations: Record<string, { find: string; tree: string }> = {
			'display-none': { find: 'no', tree: 'no' },
			hidden: { find: 'no', tree: 'no' },
			'cv-hidden': { find: 'no', tree: 'no' },
			'cv-auto': { find: 'yes', tree: 'yes' },
			'visually-hidden': { find: 'browser-dependent', tree: 'yes' },
			'until-found': { find: 'yes, reveals', tree: 'no until revealed' },
		};
		const expected = expectations[ this.current ];

		return html`
			<style>${ STYLES }</style>
			<div class="hidden-lab">
				<div class="hint">
					Pick a hiding technique below and it is applied to the sample panel.
					Copy the test phrase, open the demo in its own tab, press <kbd>Cmd/Ctrl F</kbd>, and paste to search, so the surrounding article prose and code panel can never satisfy the search in place of the panel.
					<div class="phrase">
						<button @click=${ this.copyPhrase }>${ this.copyState === 'copied' ? 'Copied' : this.copyState === 'failed' ? 'Copy failed' : 'Copy test phrase' }</button>
					</div>
				</div>

				<button class="open-tab" @click=${ this.openInTab }>Open this demo in its own tab</button>

				<div class="switch">
					${ this.techniques.map(
						( technique ) => html`
							<button
								aria-pressed=${ this.current === technique.id }
								@click=${ () => this.select( technique.id ) }
							>
								${ technique.label }
							</button>
						`,
					) }
				</div>

				<div class="stage">
					<p>Sample answer (the hiding technique is applied to it):</p>
					<div class="panel">This answer holds the phrase ${ this.phrase } so you can test the browser's own find against each technique.</div>
				</div>

				<div class="cols">
					<div class="col">
						<h4>Live detected (page can read)</h4>
						<div class="row"><span class="k">computed display</span><span class="v">${ this.readDisplay() }</span></div>
						<div class="row"><span class="k">generates a box</span><span class="v">${ this.readBox() }</span></div>
						<div class="row"><span class="k">beforematch fired</span><span class="v">${ this.matched ? 'yes' : 'no' }</span></div>
					</div>
					<div class="col">
						<h4>Expected collapsed-state behavior, test it yourself</h4>
						<div class="row"><span class="k">found by Find</span><span class="v">${ expected.find }</span></div>
						<div class="row"><span class="k">in a11y tree</span><span class="v">${ expected.tree }</span></div>
						<p class="test">
							In the demo's own tab, press <code>Cmd/Ctrl F</code>, search the copied phrase, and see whether this technique lets the browser match it.
						</p>
					</div>
				</div>
			</div>
		`;
	}
}

declare global {
	interface HTMLElementTagNameMap {
		'demo-searchable-accordions-searchable-hidden-lab': SearchableHiddenLabDemo;
	}
}

import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';

/**
 * The stylesheet for the light-DOM fixture, injected as a plain `<style>` element.
 *
 * The harness renders into the light DOM so find-in-page, a `#id` fragment, and a `#:~:text=` directive reach the fixture, which means there is no shadow root to scope `static styles`, so the CSS ships as a text child of a `<style>` tag instead.
 * The native `<details>` marker is left untouched, because dropping the disclosure triangle removes the visible open and closed affordance and can disturb assistive-tech state, which would undercut an article about native browser contracts.
 */
const STYLES = `
	.native-demo {
		font-family: var( --font-sans, system-ui, sans-serif );
		color: var( --ink, #17171a );
		padding: 22px;
	}
	.native-demo code {
		font-family: var( --font-mono, monospace );
		font-weight: 600;
	}
	.native-demo .note {
		margin: 0 0 14px;
		border-radius: 9px;
		border: 1px solid #f1d27a;
		background: #fdf6e3;
		padding: 10px 12px;
		font-size: 13px;
		line-height: 1.5;
		color: #8a6d1f;
	}
	.native-demo .phrase {
		display: flex;
		gap: 8px;
		align-items: center;
		margin-top: 8px;
	}
	.native-demo .phrase button,
	.native-demo .open-tab {
		font: inherit;
		font-size: 12px;
		cursor: pointer;
		padding: 6px 10px;
		border-radius: 6px;
		border: 1px solid var( --line, #e7e6e2 );
		background: var( --bg, #fcfcfb );
		color: var( --ink, #17171a );
	}
	.native-demo .open-tab {
		margin-bottom: 16px;
	}
	.native-demo details {
		border: 1px solid var( --line, #e7e6e2 );
		border-radius: 10px;
		margin-bottom: 10px;
		background: var( --surface, #fff );
		overflow: hidden;
	}
	.native-demo summary {
		cursor: pointer;
		font-weight: 600;
		padding: 13px 15px;
	}
	.native-demo details[open] summary {
		border-bottom: 1px solid var( --line, #e7e6e2 );
	}
	.native-demo .answer {
		padding: 13px 15px;
		font-size: 14.5px;
		line-height: 1.6;
		color: var( --ink-soft, #56565c );
	}
	.native-demo .links {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: 16px;
	}
	.native-demo .link {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}
	.native-demo .link button {
		align-self: flex-start;
		font: inherit;
		font-size: 12px;
		cursor: pointer;
		padding: 7px 11px;
		border-radius: 7px;
		border: 1px solid var( --line, #e7e6e2 );
		background: var( --bg, #fcfcfb );
		color: var( --accent, #2257e6 );
	}
	.native-demo .link .url {
		font-family: var( --font-mono, monospace );
		font-size: 11.5px;
		word-break: break-all;
		color: var( --ink-faint, #71717b );
	}
`;

/**
 * Demo harness for the native disclosure baseline.
 *
 * The FAQ is built from `<details name="faq">` items rendered into the light DOM, so the browser gives single-open grouping, find-in-page reveal, `#id` fragment reveal, and `#:~:text=` scroll-to-text with no component JavaScript in the accordion itself.
 * There is no toggle handler, no open-state bookkeeping, and no grouping logic here; the native markup is the whole accordion, and the default disclosure triangle is left in place as the visible open and closed affordance.
 * The two buttons open the demo's own url in a fresh tab with a fragment appended, because a same-document hash change never re-runs a text directive, so the reveal has to ride a real navigation with user activation.
 *
 * @element demo-searchable-accordions-searchable-native-details
 */
@customElement( 'demo-searchable-accordions-searchable-native-details' )
export class SearchableNativeDetailsDemo extends LitElement {

	/**
	 * The clipboard copy outcome, for the button's honest confirmation label.
	 *
	 * It reads `copied` on a successful write and `failed` when the clipboard write throws or is unavailable, so the button never claims success the reader cannot act on.
	 */
	@state()
	private copyState: 'idle' | 'copied' | 'failed' = 'idle';

	/**
	 * The phrase tucked inside one closed answer, which the find test, the `#id` link, and the `#:~:text=` link all target.
	 *
	 * It is deliberately absent from the article prose and from every visible element, and reaches the reader only by the copy button, so the only place a search could match it is that one collapsed answer.
	 */
	private readonly phrase = 'slate harbor finch';

	/**
	 * The FAQ entries rendered as native `<details name="faq">` disclosures.
	 *
	 * The entry carrying the search phrase gets the stable `id="answer-data"` on its answer, so find-in-page, the `#id` fragment, and the `#:~:text=` directive all reveal the same closed answer.
	 */
	private readonly faqs = [
		{
			id: 'answer-refunds',
			question: 'How do refunds work?',
			answer: 'Refunds are available within 30 days, and the new rate on a downgrade starts on your next billing cycle.',
		},
		{
			id: 'answer-plans',
			question: 'Can I change my plan?',
			answer: 'You can switch plans at any time from billing, and the change takes effect the moment you confirm it.',
		},
		{
			id: 'answer-data',
			question: 'Where is my data stored?',
			answer: 'Your data stays in the region you chose at signup, and the recovery code slate harbor finch unlocks a one-click export in settings.',
		},
	];

	/**
	 * Renders into the light DOM so find-in-page, the `#id` fragment, and the reveal algorithm treat the fixture as ordinary document content whose ids live in the iframe document.
	 *
	 * @returns This element, so Lit renders the template as light-DOM children instead of into a shadow root.
	 */
	protected createRenderRoot(): HTMLElement {
		return this;
	}

	/**
	 * The demo's own url with any existing hash or text directive stripped, so a fresh fragment can be appended cleanly.
	 *
	 * @returns The current href up to but not including the first `#`, which is the base every reveal link navigates to.
	 */
	private get baseUrl(): string {
		return window.location.href.split( '#' )[ 0 ];
	}

	/**
	 * The url the `#id` button navigates to, revealing the closed answer that carries `id="answer-data"`.
	 */
	private get fragmentUrl(): string {
		return `${ this.baseUrl }#answer-data`;
	}

	/**
	 * The url the `#:~:text=` button navigates to, scrolling to the phrase inside the closed answer.
	 */
	private get textFragmentUrl(): string {
		return `${ this.baseUrl }#:~:text=${ encodeURIComponent( this.phrase ) }`;
	}

	/**
	 * Copies the search phrase so the reader can paste it into their browser's find bar.
	 *
	 * It reports the real outcome, recording `copied` only when the clipboard write resolves and `failed` when it rejects or is unavailable, because the reader must actually hold the phrase to run the find test.
	 */
	private copyPhrase = async (): Promise<void> => {
		try {
			await navigator.clipboard.writeText( this.phrase );
			this.copyState = 'copied';
		} catch {
			this.copyState = 'failed';
		}
	};

	/**
	 * Opens this same demo in its own tab, where the only searchable text is the fixture, for the find-in-page test.
	 */
	private openInTab = (): void => {
		window.open( this.baseUrl, '_blank', 'noopener' );
	};

	/**
	 * Opens the demo's own url in a fresh tab with the `#answer-data` fragment appended, so the browser reveals the light-DOM `<details>` holding that id on the new navigation.
	 */
	private openFragment = (): void => {
		window.open( this.fragmentUrl, '_blank', 'noopener' );
	};

	/**
	 * Opens the demo's own url in a fresh tab with the `#:~:text=` directive appended, because a text fragment only runs on a full navigation with user activation.
	 */
	private openTextFragment = (): void => {
		window.open( this.textFragmentUrl, '_blank', 'noopener' );
	};

	/**
	 * Renders the copy-only phrase control, the find-in-page control, the native `<details>` FAQ, and the two reveal buttons with the exact url each one produces.
	 */
	render() {
		return html`
			<style>${ STYLES }</style>
			<div class="native-demo">
				<div class="note">
					This FAQ is native <code>&lt;details name="faq"&gt;</code> with no component JavaScript.
					Copy the test phrase, open the demo in its own tab, press <kbd>Cmd/Ctrl F</kbd>, and paste to search, and the browser reveals the closed answer.
					A text fragment only runs on a full navigation with user activation, which is why the reveal buttons open a new tab, and Safari 26.2 reveals the answer without scrolling to the exact match.
					This fixture is client-rendered, so the fresh-load fragment reveal is part of the cross-browser publication check.
					<div class="phrase">
						<button @click=${ this.copyPhrase }>${ this.copyState === 'copied' ? 'Copied' : this.copyState === 'failed' ? 'Copy failed' : 'Copy test phrase' }</button>
					</div>
				</div>

				<button class="open-tab" @click=${ this.openInTab }>Open this demo in its own tab</button>

				${ this.faqs.map(
					( faq ) => html`
						<details name="faq">
							<summary>${ faq.question }</summary>
							<div class="answer" id=${ faq.id }>${ faq.answer }</div>
						</details>
					`,
				) }

				<div class="links">
					<div class="link">
						<button @click=${ this.openFragment }>Open #answer-data in a new tab</button>
						<span class="url">${ this.fragmentUrl }</span>
					</div>
					<div class="link">
						<button @click=${ this.openTextFragment }>Open #:~:text= in a new tab</button>
						<span class="url">${ this.textFragmentUrl }</span>
					</div>
				</div>
			</div>
		`;
	}
}

declare global {
	interface HTMLElementTagNameMap {
		'demo-searchable-accordions-searchable-native-details': SearchableNativeDetailsDemo;
	}
}

import { LitElement, html, css } from 'lit';
import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
import type { RegionToggleDetail, FindAwareRegionEventMap } from './types';
import { supportsHiddenUntilFound } from './supports';

/**
 * A monotonic counter that gives slotted content a stable id for `aria-controls` when it has none of its own.
 */
let contentIdSeq = 0;

/**
 * A collapsible region whose collapsed content stays findable by the browser.
 *
 * Keeps a custom disclosure's collapsed content discoverable by find-in-page, fragment links, and scroll-to-text, hiding it with `hidden="until-found"` instead of `display: none`, for when you're building the disclosure yourself rather than reaching for a native `<details>`.
 * The collapsible content is slotted in the light DOM so it stays in the document's flat tree for find-in-page and so `beforematch` bubbles to this host.
 * The trigger and its content are wired together with `aria-expanded` and `aria-controls`, so the disclosure control is the reachable path for someone who never runs find-in-page.
 * Where the browser lacks basic `hidden="until-found"` support, it degrades to a plain click-to-open disclosure that hides the content the ordinary way.
 *
 * @element find-aware-region
 * @slot trigger - The disclosure control, a button, that toggles the region.
 * @slot - The collapsible content, hidden with `hidden="until-found"` when closed.
 * @fires region-toggle - Fired when a trigger click or a browser find-in-page reveal changes the open state, carrying the new state; setting the `open` property directly reconciles the DOM without firing it.
 */
@customElement( 'find-aware-region' )
export class FindAwareRegion extends LitElement {

	/**
	 * Whether the region is open.
	 *
	 * Reflected so styling and tests can read the state, and reconciled in the `beforematch` handler when the browser reveals the content out of band.
	 * Setting it directly reconciles the slotted DOM through `updated()` without emitting `region-toggle`, since the caller already knows the new state; the event is reserved for trigger clicks and browser reveals.
	 */
	@property( { type: Boolean, reflect: true } )
	open = false;

	/**
	 * Whether the browser has basic `hidden="until-found"` support.
	 *
	 * Resolved once when the element is created and read while reconciling to choose between the enhanced reveal and the plain-disclosure fallback.
	 * A field, not a `@state`, because it never changes for the life of the element.
	 */
	private readonly supported = supportsHiddenUntilFound();

	/**
	 * The slotted trigger button, resolved by Lit from the `trigger` slot.
	 *
	 * The component reads only the first assigned button, so a single control owns the region.
	 */
	@queryAssignedElements( { slot: 'trigger', selector: 'button' } )
	private $triggers!: HTMLButtonElement[];

	/**
	 * The slotted collapsible content, resolved by Lit from the default slot.
	 *
	 * These are the light-DOM children the component hides and reveals, so `hidden="until-found"` and the bubbling `beforematch` both reach them.
	 */
	@queryAssignedElements()
	private $content!: HTMLElement[];

	/**
	 * Whether a browser-driven reveal is in flight between `beforematch` and the reveal algorithm's own attribute removal.
	 *
	 * While set, `reconcile()` leaves an `until-found` attribute in place for the user agent, because the specified event loop can run a scheduled update between the event and the algorithm's post-event recheck, and removing the attribute there would cut an ancestor reveal chain short.
	 */
	private revealInFlight = false;

	/**
	 * Styles for the component, scoped to its shadow root.
	 *
	 * The host lays the trigger and the content out in a column; the visible hiding is driven by the `hidden` attribute on the slotted content, not by these styles.
	 */
	static styles = css`
		:host {
			display: block;
		}

		.region {
			display: flex;
			flex-direction: column;
			gap: var( --space-2, 8px );
		}
	`;

	/**
	 * Wires the host as the listener for the bubbling `beforematch` event once the element connects.
	 *
	 * The event is `composed: false`, so it never crosses a shadow boundary; the host hears it only because the content is slotted light DOM and the event bubbles up that tree.
	 */
	connectedCallback(): void {
		super.connectedCallback();
		this.addEventListener( 'beforematch', this.handleBeforeMatch );
	}

	/**
	 * Removes the `beforematch` listener when the element disconnects, so a detached region leaks nothing.
	 */
	disconnectedCallback(): void {
		this.removeEventListener( 'beforematch', this.handleBeforeMatch );
		super.disconnectedCallback();
	}

	/**
	 * Reconciles the initial DOM state once the slots have resolved their assigned elements.
	 */
	protected firstUpdated(): void {
		this.reconcile();
	}

	/**
	 * Reconciles again after a property-driven update, so an external `open` change still settles the slotted DOM.
	 *
	 * A programmatic toggle already reconciles synchronously before it emits, so on that path this pass only re-affirms the same state.
	 */
	protected updated(): void {
		this.reconcile();
	}

	/**
	 * Types `addEventListener( 'region-toggle', ... )` so the listener receives a `CustomEvent<RegionToggleDetail>` with no cast.
	 * Falls through to the standard signature for every other event.
	 */
	addEventListener<K extends keyof FindAwareRegionEventMap>(
		type: K,
		listener: ( this: FindAwareRegion, ev: FindAwareRegionEventMap[ K ] ) => void,
		options?: boolean | AddEventListenerOptions,
	): void;
	addEventListener(
		type: string,
		listener: EventListenerOrEventListenerObject,
		options?: boolean | AddEventListenerOptions,
	): void {
		super.addEventListener( type, listener, options );
	}

	/**
	 * Renders the trigger slot above the collapsible-content slot.
	 *
	 * Both slots reconcile on `slotchange`, so content added or replaced after the first render still gets the right hidden and ARIA state.
	 */
	render() {
		return html`
			<div class="region">
				<slot name="trigger" @slotchange=${ this.handleSlotChange } @click=${ this.handleTriggerClick }></slot>
				<slot @slotchange=${ this.handleSlotChange }></slot>
			</div>
		`;
	}

	/**
	 * Brings the slotted content's `hidden` state and the trigger's `aria-expanded` and `aria-controls` in line with `open`.
	 *
	 * Runs synchronously so a caller can read committed ARIA and hidden state right after a toggle, and every element without an id is given one so `aria-controls` can point at it.
	 * When supported and closed, the content is hidden with `until-found` so the browser can still find and reveal it; when unsupported and closed, it falls back to plain `hidden`.
	 * During an in-flight browser reveal it leaves an `until-found` attribute for the user agent, so the algorithm's post-event recheck still passes and any outer ancestors in the reveal chain get their turn.
	 */
	private reconcile(): void {
		const ids: string[] = [];

		for ( const $el of this.$content ) {
			if ( ! $el.id ) {
				$el.id = `find-aware-region-content-${ contentIdSeq++ }`;
			}
			ids.push( $el.id );

			if ( this.open ) {
				if ( ! this.revealInFlight || $el.getAttribute( 'hidden' ) !== 'until-found' ) {
					$el.removeAttribute( 'hidden' );
				}
			} else if ( this.supported ) {
				$el.setAttribute( 'hidden', 'until-found' );
			} else {
				$el.setAttribute( 'hidden', '' );
			}
		}

		const $trigger = this.$triggers.at( 0 );
		if ( $trigger ) {
			$trigger.setAttribute( 'aria-expanded', String( this.open ) );
			if ( ids.length > 0 ) {
				$trigger.setAttribute( 'aria-controls', ids.join( ' ' ) );
			} else {
				$trigger.removeAttribute( 'aria-controls' );
			}
		}
	}

	/**
	 * Re-reconciles when slotted content is added, removed, or replaced after the first render.
	 */
	private handleSlotChange = (): void => {
		this.reconcile();
	};

	/**
	 * Toggles the region when the slotted trigger is clicked, then settles the new state.
	 *
	 * @param event - A click that originated inside the trigger slot.
	 */
	private handleTriggerClick = ( event: Event ): void => {
		const $button = event
			.composedPath()
			.find( ( el ): el is HTMLButtonElement => el instanceof HTMLButtonElement );

		if ( ! $button || $button !== this.$triggers.at( 0 ) ) {
			return;
		}

		this.toggle( ! this.open );
	};

	/**
	 * Handles the browser's pre-reveal `beforematch`, settling `open` and the trigger's `aria-expanded` before the reveal completes.
	 *
	 * The handler deliberately does not touch the content's `hidden` attribute, and `reconcile()` stands down mid-reveal too, so the user agent's own removal completes the reveal and any outer ancestors in the chain get revealed after this one.
	 * So it settles the state it owns, the trigger and the open flag, and a queued task then clears the in-flight window and re-reconciles, a fallback for an engine that fired the event but never finished the removal.
	 *
	 * @param event - The native `beforematch` event bubbling up from the revealed content.
	 */
	private handleBeforeMatch = ( event: Event ): void => {
		if ( this.open ) {
			return;
		}

		const $target = event.target;
		const fromContent = this.$content.some( ( $el ) => $el === $target );
		if ( ! fromContent ) {
			return;
		}

		this.revealInFlight = true;
		setTimeout( () => {
			this.revealInFlight = false;
			this.reconcile();
		}, 0 );

		this.open = true;

		const $trigger = this.$triggers.at( 0 );
		if ( $trigger ) {
			$trigger.setAttribute( 'aria-expanded', 'true' );
		}

		this.emitToggle( true );
	};

	/**
	 * Sets the open state, commits the slotted DOM synchronously, then emits `region-toggle`, so a consumer that reads `aria-expanded` or the `hidden` attribute in the handler sees the settled state.
	 *
	 * Skips both the DOM work and the event when the state does not actually change, so the event fires once per real change and never on a no-op.
	 *
	 * @param next - The state to move to.
	 */
	private toggle( next: boolean ): void {
		if ( this.open === next ) {
			return;
		}

		this.open = next;
		this.reconcile();
		this.emitToggle( next );
	}

	/**
	 * Dispatches the `region-toggle` event carrying the new open state.
	 *
	 * @param open - The new open state.
	 */
	private emitToggle( open: boolean ): void {
		this.dispatchEvent(
			new CustomEvent<RegionToggleDetail>( 'region-toggle', {
				detail: { open },
				bubbles: true,
				composed: true,
			} ),
		);
	}
}

/**
 * Re-exported so this file is the component's single public entry, and a consumer imports the element, the support probe, and the types from one place.
 */
export { detectHiddenUntilFound, supportsHiddenUntilFound } from './supports';
export type { RegionToggleDetail, FindAwareRegionEventMap, HiddenUntilFoundSupport } from './types';

declare global {
	interface HTMLElementTagNameMap {
		'find-aware-region': FindAwareRegion;
	}
}

import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '../library/find-aware-region';

/**
 * The stylesheet for the light-DOM fixture, injected as a plain `<style>` element.
 *
 * The harness renders into the light DOM so the browser's fragment reveal and scroll-to-text reach the target, which means there is no shadow root to scope `static styles`, so the CSS ships as a text child of a `<style>` tag instead.
 */
const STYLES = `
	.deep-link-demo {
		font-family: var( --font-sans, system-ui, sans-serif );
		color: var( --ink, #17171a );
		padding: 22px;
	}
	.deep-link-demo code {
		font-family: var( --font-mono, monospace );
	}
	.deep-link-demo .hint {
		margin: 0 0 14px;
		border-radius: 9px;
		border: 1px solid var( --line, #e7e6e2 );
		background: var( --surface, #fff );
		padding: 10px 12px;
		font-size: 13px;
		line-height: 1.5;
		color: var( --ink-soft, #56565c );
	}
	.deep-link-demo .phrase {
		display: flex;
		gap: 8px;
		align-items: center;
		margin-top: 8px;
	}
	.deep-link-demo .phrase button {
		font: inherit;
		font-size: 12px;
		cursor: pointer;
		padding: 6px 10px;
		border-radius: 6px;
		border: 1px solid var( --line, #e7e6e2 );
		background: var( --bg, #fcfcfb );
		color: var( --ink, #17171a );
	}
	.deep-link-demo .controls {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 12px;
	}
	.deep-link-demo .controls button {
		font: inherit;
		font-size: 13px;
		cursor: pointer;
		padding: 8px 12px;
		border-radius: 7px;
		border: 1px solid var( --line, #e7e6e2 );
		background: var( --bg, #fcfcfb );
		color: var( --ink, #17171a );
	}
	.deep-link-demo .url {
		margin-bottom: 14px;
		border-radius: 8px;
		border: 1px solid var( --line, #e7e6e2 );
		background: var( --surface, #fff );
		padding: 10px 12px;
		font-family: var( --font-mono, monospace );
		font-size: 12px;
		line-height: 1.6;
		color: var( --ink, #17171a );
		word-break: break-all;
	}
	.deep-link-demo .url .lbl {
		color: var( --ink-faint, #71717b );
	}
	.deep-link-demo .fixture {
		margin-top: 4px;
		border: 1px solid var( --line, #e7e6e2 );
		border-radius: 10px;
		padding: 12px 14px;
		background: var( --surface, #fff );
	}
	.deep-link-demo .fixture > button {
		width: 100%;
		text-align: left;
		font: inherit;
		font-weight: 600;
		cursor: pointer;
		padding: 4px 0;
		border: 0;
		background: transparent;
		color: var( --ink, #17171a );
	}
	.deep-link-demo button[slot='trigger'] {
		font: inherit;
		font-weight: 600;
		cursor: pointer;
		width: 100%;
		text-align: left;
		padding: 10px 14px;
		border-radius: 8px;
		border: 1px solid var( --line, #e7e6e2 );
		background: var( --bg, #fcfcfb );
		color: var( --ink, #17171a );
	}
	.deep-link-demo button[slot='trigger']::before {
		content: '\\25B8';
		display: inline-block;
		margin-right: 8px;
		color: var( --accent, #2257e6 );
	}
	.deep-link-demo button[slot='trigger'][aria-expanded='true']::before {
		rotate: 90deg;
	}
	.deep-link-demo .answer {
		font-size: 14px;
		line-height: 1.6;
		color: var( --ink, #17171a );
	}
	.deep-link-demo .answer:not([hidden]) {
		margin-top: 8px;
		border-radius: 8px;
		background: color-mix( in srgb, var( --accent, #2257e6 ) 7%, var( --surface, #fff ) );
		padding: 12px 14px;
	}
	.deep-link-demo .rule {
		margin: 14px 0 0;
		font-size: 12.5px;
		line-height: 1.5;
		color: var( --ink-faint, #71717b );
	}
	.deep-link-demo .rule code {
		font-family: var( --font-mono, monospace );
		color: var( --ink, #17171a );
	}
`;

/**
 * Demo harness for the deep-link and scroll-to-text lab.
 *
 * It renders a real target fixture into the light DOM, a find-aware-region whose slotted panel carries a stable `id="answer-billing"` and stays collapsed on load, so the browser's own fragment reveal has something real to open.
 * The two controls each perform a real navigation, opening this demo's own url in a new tab with a fragment appended, because a same-document hash change does not re-run a text directive and only a full navigation with user activation makes the scroll-to-text match run.
 * The `#id` control appends `#answer-billing`, the `#:~:text=` control appends the encoded phrase, and both URLs are shown exactly as generated from the live base so the reader sees the real link, not a hardcoded article path.
 * The search phrase lives only inside the target panel and reaches the reader through a copy-only button, never as visible prose, so the only place a scroll-to-text link can land is the collapsed answer itself.
 *
 * @element demo-searchable-accordions-searchable-deep-link
 */
@customElement( 'demo-searchable-accordions-searchable-deep-link' )
export class SearchableDeepLinkDemo extends LitElement {

	/**
	 * The clipboard copy outcome, for the button's honest confirmation label.
	 *
	 * It reads `copied` on a successful write and `failed` when the clipboard write throws or is unavailable, so the button never claims success the reader cannot act on.
	 */
	@state()
	private copyState: 'idle' | 'copied' | 'failed' = 'idle';

	/**
	 * The id of the panel both links target, stable so the fresh-tab fragment reveal can find it.
	 */
	private readonly panelId = 'answer-billing';

	/**
	 * The phrase the scroll-to-text link matches inside the closed panel.
	 *
	 * It is deliberately absent from the surrounding prose, so a `#:~:text=` link can only ever land on the panel that holds it.
	 */
	private readonly phrase = 'amber lantern fox';

	/**
	 * Renders into the light DOM so the browser's fragment reveal and scroll-to-text treat the fixture as ordinary document content.
	 *
	 * @returns This element, so Lit renders the template as light-DOM children instead of into a shadow root.
	 */
	protected createRenderRoot(): HTMLElement {
		return this;
	}

	/**
	 * Copies the search phrase so the reader can compare it against the generated scroll-to-text URL.
	 *
	 * It reports the real outcome, recording `copied` only when the clipboard write resolves and `failed` when it rejects or is unavailable, because the reader must actually hold the phrase to run the find test.
	 */
	private copyPhrase = async (): Promise<void> => {
		try {
			await navigator.clipboard.writeText( this.phrase );
			this.copyState = 'copied';
		} catch {
			this.copyState = 'failed';
		}
	};

	/**
	 * Strips any existing hash or text directive from the current location, giving a clean base to append a fragment to.
	 *
	 * @returns This demo's own url with everything from the first `#` removed.
	 */
	private baseUrl(): string {
		const href = window.location.href;
		const hashIndex = href.indexOf( '#' );
		return hashIndex === -1 ? href : href.slice( 0, hashIndex );
	}

	/**
	 * The `#id` fragment link to the closed panel, built from the live base.
	 */
	private get idLink(): string {
		return `${ this.baseUrl() }#${ this.panelId }`;
	}

	/**
	 * The `#:~:text=` scroll-to-text link to the phrase inside the closed panel, built from the live base.
	 */
	private get textLink(): string {
		return `${ this.baseUrl() }#:~:text=${ encodeURIComponent( this.phrase ) }`;
	}

	/**
	 * Opens this demo's own url in a new tab with the `#id` fragment appended, so the browser reveals the closed panel on a real navigation.
	 */
	private openIdLink = (): void => {
		window.open( this.idLink, '_blank', 'noopener' );
	};

	/**
	 * Opens this demo's own url in a new tab with the encoded `#:~:text=` directive appended, so the scroll-to-text match runs under the user activation a full navigation provides.
	 */
	private openTextLink = (): void => {
		window.open( this.textLink, '_blank', 'noopener' );
	};

	/**
	 * Renders the link generators, the exact URLs they produce, and the collapsed target fixture.
	 */
	render() {
		return html`
			<style>${ STYLES }</style>
			<div class="deep-link-demo">
				<div class="hint">
					This lab links to a closed panel two ways and opens each link in its own tab, because a text
					fragment only runs on a full navigation, not on a hash change inside this page.
					The test phrase lives only inside that panel; copy it to compare it against the scroll-to-text URL.
					<div class="phrase">
						<button @click=${ this.copyPhrase }>${ this.copyState === 'copied' ? 'Copied' : this.copyState === 'failed' ? 'Copy failed' : 'Copy test phrase' }</button>
					</div>
				</div>

				<div class="controls">
					<button @click=${ this.openIdLink }>Open #id link in a new tab</button>
					<button @click=${ this.openTextLink }>Open #:~:text= link in a new tab</button>
				</div>

				<div class="url">
					<span class="lbl">#id fragment</span><br />${ this.idLink }
				</div>
				<div class="url">
					<span class="lbl">#:~:text= scroll-to-text</span><br />${ this.textLink }
				</div>

				<find-aware-region>
					<button slot="trigger">Billing question</button>
					<div id=${ this.panelId } class="answer">
						Invoices send on the first of the month. The phrase ${ this.phrase } lives here so a
						<code>#:~:text=</code> link can target this exact sentence inside the closed panel.
					</div>
				</find-aware-region>

				<p class="rule">
					Both buttons open this demo's own url in a new tab with the fragment appended, and on that fresh
					page the browser reveals the closed panel and, in the engines that support it, scrolls to the
					target, while some partial implementations (Safari 26.2) reveal without positioning the match
					precisely.
					A text fragment only runs on a full navigation with user activation, which is why these open a new
					tab; a same-document hash change inside a single page does not re-trigger the match.
				</p>
			</div>
		`;
	}
}

declare global {
	interface HTMLElementTagNameMap {
		'demo-searchable-accordions-searchable-deep-link': SearchableDeepLinkDemo;
	}
}

import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { detectHiddenUntilFound } from '../library/find-aware-region';
import type { RegionToggleDetail } from '../library/find-aware-region';

/**
 * The stylesheet for the light-DOM fixture, injected as a plain `<style>` element.
 *
 * The harness renders into the light DOM so find-in-page and fragment navigation reach the fixture, which means there is no shadow root to scope `static styles`, so the CSS ships as a text child of a `<style>` tag instead.
 * The native `<summary>` marker is left alone, so the disclosure triangle stays the browser's own affordance rather than a restyled one.
 */
const STYLES = `
	.review-demo {
		font-family: var( --font-sans, system-ui, sans-serif );
		color: var( --ink, #17171a );
		padding: 22px;
	}
	.review-demo code {
		font-family: var( --font-mono, monospace );
	}
	.review-demo .challenge {
		margin: 0 0 14px;
		border-radius: 9px;
		border: 1px solid #f1d27a;
		background: #fdf6e3;
		padding: 10px 12px;
		font-size: 13px;
		line-height: 1.5;
		color: #8a6d1f;
	}
	.review-demo .challenge code {
		font-weight: 600;
	}
	.review-demo .phrase {
		display: flex;
		gap: 8px;
		align-items: center;
		margin-top: 8px;
	}
	.review-demo .phrase button {
		font: inherit;
		font-size: 12px;
		cursor: pointer;
		padding: 6px 10px;
		border-radius: 6px;
		border: 1px solid var( --line, #e7e6e2 );
		background: var( --bg, #fcfcfb );
		color: var( --ink, #17171a );
	}
	.review-demo .controls {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 16px;
	}
	.review-demo .controls button {
		font: inherit;
		font-size: 12px;
		cursor: pointer;
		padding: 6px 10px;
		border-radius: 6px;
		border: 1px solid var( --line, #e7e6e2 );
		background: var( --bg, #fcfcfb );
		color: var( --ink, #17171a );
	}
	.review-demo details {
		border: 1px solid var( --line, #e7e6e2 );
		border-radius: 10px;
		margin-bottom: 10px;
		background: var( --surface, #fff );
		overflow: hidden;
	}
	.review-demo summary {
		cursor: pointer;
		font-weight: 600;
		padding: 13px 15px;
	}
	.review-demo .body {
		padding: 13px 15px;
		font-size: 14.5px;
		line-height: 1.6;
		color: var( --ink-soft, #56565c );
	}
	.review-demo .more-wrap {
		border: 1px solid var( --line, #e7e6e2 );
		border-radius: 10px;
		padding: 13px 15px;
		margin: 0 0 16px;
		background: var( --surface, #fff );
	}
	.review-demo .more-wrap > p {
		margin: 0 0 8px;
		font-size: 14.5px;
		line-height: 1.6;
		color: var( --ink-soft, #56565c );
	}
	.review-demo button.more {
		font: inherit;
		font-size: 13px;
		font-weight: 600;
		cursor: pointer;
		padding: 7px 12px;
		border-radius: 7px;
		border: 1px solid var( --line, #e7e6e2 );
		background: var( --bg, #fcfcfb );
		color: var( --accent, #2257e6 );
	}
	.review-demo .more-body {
		margin-top: 10px;
		font-size: 14px;
		line-height: 1.6;
		color: var( --ink, #17171a );
	}
	.review-demo .decision {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		margin-bottom: 14px;
	}
	.review-demo .card {
		border: 1px solid var( --line, #e7e6e2 );
		border-radius: 10px;
		padding: 12px 14px;
	}
	.review-demo .card h4 {
		margin: 0 0 6px;
		font-size: 13px;
	}
	.review-demo .card p {
		margin: 0 0 6px;
		font-size: 12.5px;
		line-height: 1.5;
		color: var( --ink-soft, #56565c );
	}
	.review-demo .card p:last-child {
		margin-bottom: 0;
	}
	.review-demo .card code {
		font-family: var( --font-mono, monospace );
	}
	.review-demo .support {
		border: 1px solid var( --line, #e7e6e2 );
		border-radius: 10px;
		padding: 12px 14px;
	}
	.review-demo .support h4 {
		margin: 0 0 8px;
		font-family: var( --font-mono, monospace );
		font-size: 10.5px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var( --ink-faint, #71717b );
	}
	.review-demo .row {
		display: flex;
		justify-content: space-between;
		gap: 10px;
		font-size: 13px;
		padding: 4px 0;
	}
	.review-demo .row .v {
		font-family: var( --font-mono, monospace );
		font-weight: 600;
	}
	.review-demo .row.manual .v {
		color: var( --ink-faint, #71717b );
	}
	@media ( max-width: 560px ) {
		.review-demo .decision {
			grid-template-columns: 1fr;
		}
	}
`;

/**
 * Demo harness for the review playground.
 *
 * It combines both layers of the build in one light-DOM fixture: native `<details name="faq">` disclosures for the plain answers, and a `<find-aware-region>` for a non-disclosure "show more" block, with a built-in Find challenge, a real deep-link generator, a decision panel, and a precise support readout.
 * The fixture renders into the light DOM so the `<details>` ids and the slotted region content are in the iframe document, which lets the reader's own find-in-page cycle through the matches and lets a fragment link navigate to an answer.
 * The support readout reports the two capabilities separately from the structured probe, so it shows that the `until-found` value parses and that the `beforematch` hook is present as distinct rows, and it labels scroll-to-match and accessibility exposure as things to test in your own browser, because page script cannot confirm them.
 *
 * @element demo-searchable-accordions-searchable-review
 */
@customElement( 'demo-searchable-accordions-searchable-review' )
export class SearchableReviewDemo extends LitElement {

	/**
	 * The structured `hidden="until-found"` support result, resolved once for the readout.
	 *
	 * Its fields are shown as separate rows, because a browser can parse the value without exposing the event, and a single shared boolean would hide that.
	 */
	private readonly support = detectHiddenUntilFound();

	/**
	 * Whether the find-aware-region "show more" block is open, mirrored for the decision panel.
	 */
	@state()
	private moreOpen = false;

	/**
	 * The phrase tucked inside a closed answer and the collapsed "show more" block, for the built-in Find challenge.
	 *
	 * It is deliberately absent from every visible element and reaches the reader only through the clipboard, so a search can succeed only by matching the collapsed content itself.
	 */
	private readonly phrase = 'violet cinder stag';

	/**
	 * The clipboard copy outcome, for the copy button's honest label.
	 *
	 * It reads `copied` on a successful write and `failed` when the clipboard write throws or is unavailable, so the button never claims success the reader cannot act on.
	 */
	@state()
	private copyState: 'idle' | 'copied' | 'failed' = 'idle';

	/**
	 * The plain FAQ answers, rendered as native `<details name="faq">` disclosures.
	 */
	private readonly faqs = [
		{
			id: 'answer-refunds',
			question: 'How do refunds work?',
			answer: 'Refunds are available within 30 days from the billing screen, no questions asked.',
		},
		{
			id: 'answer-security',
			question: 'How do you handle security?',
			answer: `We encrypt data in transit and at rest. Mention the phrase ${ this.phrase } to support for the full audit summary.`,
		},
	];

	/**
	 * Renders into the light DOM so find-in-page, fragment navigation, and the reveal algorithm treat the fixture as ordinary document content.
	 *
	 * @returns This element, so Lit renders the template as light-DOM children instead of into a shadow root.
	 */
	protected createRenderRoot(): HTMLElement {
		return this;
	}

	/**
	 * Mirrors the "show more" region's open state from its typed toggle event.
	 *
	 * @param event - The region's typed toggle event.
	 */
	private onMore = ( event: CustomEvent<RegionToggleDetail> ): void => {
		this.moreOpen = event.detail.open;
	};

	/**
	 * Opens this same demo in its own tab, where the only searchable text is the fixture.
	 */
	private openInTab = (): void => {
		window.open( window.location.href, '_blank', 'noopener' );
	};

	/**
	 * Copies the test phrase to the clipboard so the reader can carry it into their browser's Find bar.
	 *
	 * The phrase never appears in a visible element, so copying it is the only way the reader can run the find test, and the handler reports the real outcome, recording `copied` only when the clipboard write resolves and `failed` when it rejects or is unavailable.
	 */
	private copyPhrase = async (): Promise<void> => {
		try {
			await navigator.clipboard.writeText( this.phrase );
			this.copyState = 'copied';
		} catch {
			this.copyState = 'failed';
		}
	};

	/**
	 * Opens this same demo in a new tab with a fragment appended, so the browser really navigates to the security answer and reveals it.
	 *
	 * The base is `window.location.href` stripped of any existing hash, so a re-run does not stack fragments, and the new tab lands on `#answer-security` in a document where that id exists in the light DOM.
	 */
	private openDeepLink = (): void => {
		const base = window.location.href.split( '#' )[ 0 ];
		window.open( `${ base }#answer-security`, '_blank', 'noopener' );
	};

	/**
	 * Renders the Find challenge, the combined FAQ, the "show more" region, the decision panel, and the structured support readout.
	 */
	render() {
		return html`
			<style>${ STYLES }</style>
			<div class="review-demo">
				<p class="challenge">
					Find challenge: copy the test phrase, open this demo in its own tab, press <kbd>Cmd/Ctrl F</kbd>, and paste it into the Find bar.
					It lives in a closed answer and in the collapsed "show more" block.
					Cycle through the matches with your browser's Find and watch each region reveal as it becomes the active match.
					<span class="phrase">
						<button @click=${ this.copyPhrase }>${ this.copyState === 'copied' ? 'Copied' : this.copyState === 'failed' ? 'Copy failed' : 'Copy test phrase' }</button>
						<button @click=${ this.openInTab }>Open in own tab</button>
					</span>
				</p>

				<div class="controls">
					<button @click=${ this.openDeepLink }>Open the security answer via #answer-security</button>
				</div>

				${ this.faqs.map(
					( faq ) => html`
						<details name="faq">
							<summary>${ faq.question }</summary>
							<div class="body" id=${ faq.id }>${ faq.answer }</div>
						</details>
					`,
				) }

				<div class="more-wrap">
					<p>Our uptime last quarter was 99.98 percent across all regions.</p>
					<find-aware-region @region-toggle=${ this.onMore }>
						<button slot="trigger" class="more">Show the regional breakdown</button>
						<div class="more-body">
							Every region cleared 99.9 percent, and the phrase ${ this.phrase } sits in this collapsed block, so the browser's Find can reveal a "show more" that is not a plain native disclosure.
						</div>
					</find-aware-region>
				</div>

				<div class="decision">
					<div class="card">
						<h4>Reach for &lt;details name&gt;</h4>
						<p>The plain answers are summary-and-content pairs, so the native disclosure already owns find, deep links, and single-open grouping.</p>
						<p>Use it whenever the element's semantics and DOM shape fit the content.</p>
					</div>
					<div class="card">
						<h4>Reach for &lt;find-aware-region&gt;</h4>
						<p>The "show more" stands in for a custom disclosure you own, so <code>find-aware-region</code> with <code>hidden="until-found"</code> keeps it findable while you keep control of the trigger and state.</p>
						<p><code>show more open: ${ String( this.moreOpen ) }</code></p>
					</div>
				</div>

				<div class="support">
					<h4>Support readout</h4>
					<div class="row"><span>until-found value parses</span><span class="v">${ this.support.parsesValue ? 'yes' : 'no' }</span></div>
					<div class="row"><span>beforematch hook present</span><span class="v">${ this.support.exposesEvent ? 'yes' : 'no' }</span></div>
					<div class="row"><span>enhanced path enabled</span><span class="v">${ this.support.supported ? 'yes' : 'fallback' }</span></div>
					<div class="row manual"><span>scrolls to match</span><span class="v">test in your browser</span></div>
					<div class="row manual"><span>a11y exposure on reveal</span><span class="v">test in your browser</span></div>
				</div>
			</div>
		`;
	}
}

declare global {
	interface HTMLElementTagNameMap {
		'demo-searchable-accordions-searchable-review': SearchableReviewDemo;
	}
}