@zeix/ui-element/docs/examples/module-codeblock.html

UIElement - a HTML-first library for reactive Web Components

<module-tabgroup>
	<div role="tablist">
		
			<button
				type="button"
				role="tab"
				id="trigger_module-codeblock.html"
				aria-controls="panel_module-codeblock.html"
				aria-selected="false"
				tabindex="-1"
			>HTML</button>
		
			<button
				type="button"
				role="tab"
				id="trigger_module-codeblock.css"
				aria-controls="panel_module-codeblock.css"
				aria-selected="false"
				tabindex="-1"
			>CSS</button>
		
			<button
				type="button"
				role="tab"
				id="trigger_module-codeblock.ts"
				aria-controls="panel_module-codeblock.ts"
				aria-selected="true"
				tabindex="0"
			>TypeScript</button>
	</div>
	
<div role="tabpanel" id="panel_module-codeblock.html" aria-labelledby="trigger_module-codeblock.html" hidden>
	<module-codeblock language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">module-codeblock.html</span>
			<span class="language">html</span>
		</p>
		<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F8F8F2">&#x3C;</span><span style="color:#F92672">module-codeblock</span></span>
<span class="line"><span style="color:#A6E22E">	collapsed</span></span>
<span class="line"><span style="color:#A6E22E">	language</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"html"</span></span>
<span class="line"><span style="color:#A6E22E">	copy-success</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Copied!"</span></span>
<span class="line"><span style="color:#A6E22E">	copy-error</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"Error trying to copy to clipboard!"</span></span>
<span class="line"><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">p</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"meta"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">span</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"file"</span><span style="color:#F8F8F2">>module-codeblock.html&#x3C;/</span><span style="color:#F92672">span</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">span</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"language"</span><span style="color:#F8F8F2">>html&#x3C;/</span><span style="color:#F92672">span</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;/</span><span style="color:#F92672">p</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">pre</span><span style="color:#F8F8F2">>&#x3C;</span><span style="color:#F92672">code</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"language-html"</span><span style="color:#F8F8F2">>&#x3C;/</span><span style="color:#F92672">code</span><span style="color:#F8F8F2">>&#x3C;/</span><span style="color:#F92672">pre</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">basic-button</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"copy"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;</span><span style="color:#F92672">button</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"button"</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"secondary small"</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">			&#x3C;</span><span style="color:#F92672">span</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"label"</span><span style="color:#F8F8F2">>Copy&#x3C;/</span><span style="color:#F92672">span</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">		&#x3C;/</span><span style="color:#F92672">button</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;/</span><span style="color:#F92672">basic-button</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	&#x3C;</span><span style="color:#F92672">button</span><span style="color:#A6E22E"> type</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"button"</span><span style="color:#A6E22E"> class</span><span style="color:#F8F8F2">=</span><span style="color:#E6DB74">"overlay"</span><span style="color:#F8F8F2">>Expand&#x3C;/</span><span style="color:#F92672">button</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">&#x3C;/</span><span style="color:#F92672">module-codeblock</span><span style="color:#F8F8F2">></span></span>
<span class="line"></span></code></pre>
		<basic-button class="copy">
			<button type="button" class="secondary small">
				<span class="label">Copy</span>
			</button>
		</basic-button>
	</module-codeblock>
</div>

<div role="tabpanel" id="panel_module-codeblock.css" aria-labelledby="trigger_module-codeblock.css" hidden>
	<module-codeblock language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">module-codeblock.css</span>
			<span class="language">css</span>
		</p>
		<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">module-codeblock</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	position</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">relative</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">block</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	margin</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#AE81FF"> 0</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--space-l);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	.meta {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">flex</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		margin-bottom</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		font-size</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--font-size-s);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-text-soft);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;:not(:has(.file)) .language {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			margin-block-start</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">calc</span><span style="color:#F8F8F2">(</span><span style="color:#AE81FF">-1</span><span style="color:#F92672"> *</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--space-m));</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">	.language</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		margin-left</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">auto</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		text-transform</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">uppercase</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	&#x26; </span><span style="color:#F92672">pre</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		font-size</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--font-size-s);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-neutral-10);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-neutral-90);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		padding</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		margin</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs) </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		overflow</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">auto</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		border-radius</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs);</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">	.copy</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		position</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">absolute</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		right</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		bottom</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s);</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">	.overlay</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">none</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">	&#x26;[</span><span style="color:#A6E22E">collapsed</span><span style="color:#F8F8F2">] {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		max-height</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">12</span><span style="color:#F92672">rem</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		overflow</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">hidden</span><span style="color:#F8F8F2">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">		&#x26;::after {</span></span>
<span class="line"><span style="color:#66D9EF">			content</span><span style="color:#F8F8F2">: </span><span style="color:#E6DB74">""</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">block</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			position</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">absolute</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			bottom</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			width</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">100</span><span style="color:#F92672">%</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			height</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-m);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			background</span><span style="color:#F8F8F2">:</span></span>
<span class="line"><span style="color:#66D9EF">				linear-gradient</span><span style="color:#F8F8F2">(</span><span style="color:#AE81FF">-135</span><span style="color:#F92672">deg</span><span style="color:#F8F8F2">, </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-secondary) </span><span style="color:#AE81FF">0.5</span><span style="color:#F92672">rem</span><span style="color:#F8F8F2">, </span><span style="color:#66D9EF">transparent</span><span style="color:#AE81FF"> 0</span><span style="color:#F8F8F2">) </span><span style="color:#AE81FF">0</span></span>
<span class="line"><span style="color:#AE81FF">				0.5</span><span style="color:#F92672">rem</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#66D9EF">				linear-gradient</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#AE81FF">					135</span><span style="color:#F92672">deg</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#66D9EF">					var</span><span style="color:#F8F8F2">(--color-secondary) </span><span style="color:#AE81FF">0.5</span><span style="color:#F92672">rem</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#66D9EF">					var</span><span style="color:#F8F8F2">(--color-background) </span><span style="color:#AE81FF">0</span></span>
<span class="line"><span style="color:#F8F8F2">				)</span></span>
<span class="line"><span style="color:#AE81FF">				0</span><span style="color:#AE81FF"> 0.5</span><span style="color:#F92672">rem</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			background-color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-secondary);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			background-size</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-m) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-m);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			background-position</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">bottom</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">		.copy</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">none</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6E22E">		.overlay</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			display</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">flex</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			flex-direction</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">column-reverse</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			align-items</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">center</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			position</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">absolute</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			bottom</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			left</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			width</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">100</span><span style="color:#F92672">%</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			height</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">6</span><span style="color:#F92672">rem</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			color</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-text);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			background</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">linear-gradient</span><span style="color:#F8F8F2">(</span><span style="color:#66D9EF">transparent</span><span style="color:#F8F8F2">, </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-secondary));</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			border</span><span style="color:#F8F8F2">: </span><span style="color:#AE81FF">0</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			cursor</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">pointer</span><span style="color:#F8F8F2">;</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			padding</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-s);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			margin-bottom</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-m);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			font-size</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--font-size-s);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			transition</span><span style="color:#F8F8F2">: background-color </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--transition-short) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--easing-inout);</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">			text-shadow</span><span style="color:#F8F8F2">: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-background) </span><span style="color:#AE81FF">1</span><span style="color:#F92672">px</span><span style="color:#AE81FF"> 0</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--space-xs);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F8F8F2">			&#x26;:hover,</span></span>
<span class="line"><span style="color:#F8F8F2">			&#x26;:</span><span style="color:#66D9EF">active</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F8F8F2">				text-shadow: </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--color-text-inverted) </span><span style="color:#66D9EF">var</span><span style="color:#F8F8F2">(--space-xs) </span><span style="color:#AE81FF">0</span><span style="color:#66D9EF"> var</span><span style="color:#F8F8F2">(--space-s);</span></span>
<span class="line"><span style="color:#F8F8F2">			}</span></span>
<span class="line"><span style="color:#F8F8F2">		}</span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span>
<span class="line"></span></code></pre>
		<basic-button class="copy">
			<button type="button" class="secondary small">
				<span class="label">Copy</span>
			</button>
		</basic-button>
	</module-codeblock>
</div>

<div role="tabpanel" id="panel_module-codeblock.ts" aria-labelledby="trigger_module-codeblock.ts">
	<module-codeblock language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
		<p class="meta">
			<span class="file">module-codeblock.ts</span>
			<span class="language">ts</span>
		</p>
		<pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><span class="line"><span style="color:#F92672">import</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F92672">	type</span><span style="color:#F8F8F2"> Component,</span></span>
<span class="line"><span style="color:#F8F8F2">	asBoolean,</span></span>
<span class="line"><span style="color:#F8F8F2">	component,</span></span>
<span class="line"><span style="color:#F8F8F2">	on,</span></span>
<span class="line"><span style="color:#F8F8F2">	requireDescendant,</span></span>
<span class="line"><span style="color:#F8F8F2">	toggleAttribute,</span></span>
<span class="line"><span style="color:#F8F8F2">} </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> '../../..'</span></span>
<span class="line"><span style="color:#F92672">import</span><span style="color:#F8F8F2"> { copyToClipboard } </span><span style="color:#F92672">from</span><span style="color:#E6DB74"> '../../functions/event-listener/copy-to-clipboard'</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">export</span><span style="color:#66D9EF;font-style:italic"> type</span><span> </span><span style="color:#A6E22E;text-decoration:underline">ModuleCodeblockProps</span><span style="color:#F92672"> =</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F8F8F2">	collapsed</span><span style="color:#F92672">:</span><span style="color:#66D9EF;font-style:italic"> boolean</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">export</span><span style="color:#F92672"> default</span><span style="color:#A6E22E"> component</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">	'module-codeblock'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">	{</span></span>
<span class="line"><span style="color:#F8F8F2">		collapsed: </span><span style="color:#A6E22E">asBoolean</span><span style="color:#F8F8F2">(),</span></span>
<span class="line"><span style="color:#F8F8F2">	},</span></span>
<span class="line"><span style="color:#F8F8F2">	(</span><span style="color:#FD971F;font-style:italic">el</span><span style="color:#F8F8F2">, { </span><span style="color:#FD971F;font-style:italic">first</span><span style="color:#F8F8F2"> }) </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">		const</span><span style="color:#F8F8F2"> code </span><span style="color:#F92672">=</span><span style="color:#A6E22E"> requireDescendant</span><span style="color:#F8F8F2">(el, </span><span style="color:#E6DB74">'code'</span><span style="color:#F8F8F2">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">		return</span><span style="color:#F8F8F2"> [</span></span>
<span class="line"><span style="color:#A6E22E">			toggleAttribute</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'collapsed'</span><span style="color:#F8F8F2">),</span></span>
<span class="line"><span style="color:#A6E22E">			first</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">				'.overlay'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">				on</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'click'</span><span style="color:#F8F8F2">, () </span><span style="color:#66D9EF;font-style:italic">=></span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#F8F8F2">					el.collapsed </span><span style="color:#F92672">=</span><span style="color:#AE81FF"> false</span></span>
<span class="line"><span style="color:#F8F8F2">				}),</span></span>
<span class="line"><span style="color:#F8F8F2">			),</span></span>
<span class="line"><span style="color:#A6E22E">			first</span><span style="color:#F8F8F2">(</span></span>
<span class="line"><span style="color:#E6DB74">				'.copy'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#A6E22E">				copyToClipboard</span><span style="color:#F8F8F2">(code, {</span></span>
<span class="line"><span style="color:#F8F8F2">					success: el.</span><span style="color:#A6E22E">getAttribute</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'copy-success'</span><span style="color:#F8F8F2">) </span><span style="color:#F92672">||</span><span style="color:#E6DB74"> 'Copied!'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">					error:</span></span>
<span class="line"><span style="color:#F8F8F2">						el.</span><span style="color:#A6E22E">getAttribute</span><span style="color:#F8F8F2">(</span><span style="color:#E6DB74">'copy-success'</span><span style="color:#F8F8F2">) </span><span style="color:#F92672">||</span></span>
<span class="line"><span style="color:#E6DB74">						'Error trying to copy to clipboard!'</span><span style="color:#F8F8F2">,</span></span>
<span class="line"><span style="color:#F8F8F2">				}),</span></span>
<span class="line"><span style="color:#F8F8F2">			),</span></span>
<span class="line"><span style="color:#F8F8F2">		]</span></span>
<span class="line"><span style="color:#F8F8F2">	},</span></span>
<span class="line"><span style="color:#F8F8F2">)</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F92672">declare</span><span style="color:#F8F8F2"> global {</span></span>
<span class="line"><span style="color:#66D9EF;font-style:italic">	interface</span><span> </span><span style="color:#A6E22E;text-decoration:underline">HTMLElementTagNameMap</span><span style="color:#F8F8F2"> {</span></span>
<span class="line"><span style="color:#E6DB74">		'module-codeblock'</span><span style="color:#F92672">:</span><span> </span><span style="color:#A6E22E;text-decoration:underline">Component</span><span style="color:#F8F8F2">&#x3C;</span><span style="color:#A6E22E;text-decoration:underline">ModuleCodeblockProps</span><span style="color:#F8F8F2">></span></span>
<span class="line"><span style="color:#F8F8F2">	}</span></span>
<span class="line"><span style="color:#F8F8F2">}</span></span>
<span class="line"></span></code></pre>
		<basic-button class="copy">
			<button type="button" class="secondary small">
				<span class="label">Copy</span>
			</button>
		</basic-button>
	</module-codeblock>
</div>
</module-tabgroup>