@zeix/ui-element

<tab-group> <div role="tablist"> <button type="button" role="tab" id="trigger_my-counter.html" aria-controls="panel_my-counter.html" aria-selected="false" tabindex="-1">HTML</button> <button type="button" role="tab" id="trigger_my-counter.css" aria-controls="panel_my-counter.css" aria-selected="false" tabindex="-1">CSS</button> <button type="button" role="tab" id="trigger_my-counter.ts" aria-controls="panel_my-counter.ts" aria-selected="true" tabindex="0">TypeScript</button> </div> <div role="tabpanel" id="panel_my-counter.html" aria-labelledby="trigger_my-counter.html" hidden> <code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> my-counter.html html <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><my-counter count="42"> <p> Count: <span class="count"></span><br> Parity: <span class="parity"></span> </p> <button type="button" class="decrement">−</button> <button type="button" class="increment">+</button> </my-counter></code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_my-counter.css" aria-labelledby="trigger_my-counter.css" hidden> <code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> my-counter.css css <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>my-counter { display: flex; gap: 0.5rem; margin-block: 1rem; p { display: inline-block; margin: 0; flex: 1; } span { margin-right: 0.5rem; } button { padding: 0.25rem 0.5rem; flex: 0; } } </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_my-counter.ts" aria-labelledby="trigger_my-counter.ts"> <code-block language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> my-counter.ts ts <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>import { type Component, asInteger, component, first, on, setText, } from "../../../"; export type MyCounterProps = { count: number; }; export default component( "my-counter", { count: asInteger(), }, (el) => [ first(".count", setText("count")), first( ".parity", setText(() => (el.count % 2 ? "odd" : "even")), ), first( ".increment", on("click", () => { el.count++; }), ), first( ".decrement", on("click", () => { el.count--; }), ), ], ); declare global { interface HTMLElementTagNameMap { "my-counter": Component<MyCounterProps>; } } </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> </tab-group>