@zeix/ui-element

<tab-group> <div role="tablist"> <button type="button" role="tab" id="trigger_product-catalog.html" aria-controls="panel_product-catalog.html" aria-selected="false" tabindex="-1">HTML</button> <button type="button" role="tab" id="trigger_product-catalog.css" aria-controls="panel_product-catalog.css" aria-selected="false" tabindex="-1">CSS</button> <button type="button" role="tab" id="trigger_product-catalog.ts" aria-controls="panel_product-catalog.ts" aria-selected="true" tabindex="0">TypeScript</button> </div> <div role="tabpanel" id="panel_product-catalog.html" aria-labelledby="trigger_product-catalog.html" hidden> <code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> product-catalog.html html <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><product-catalog> <header> <p>Shop</p> <input-button disabled> <button type="button" disabled> <span class="label">🛒 Shopping Cart</span> <span class="badge"></span> </button> </input-button> </header> <ul> <li> <p>Product 1</p> <spin-button value="0" zero-label="Add to Cart" increment-label="Increment" > <button type="button" class="decrement" aria-label="Decrement" hidden > − </button> <p class="value" hidden>0</p> <button type="button" class="increment">Add to Cart</button> </spin-button> </li> <li> <p>Product 2</p> <spin-button value="0" zero-label="Add to Cart" increment-label="Increment" > <button type="button" class="decrement" aria-label="Decrement" hidden > − </button> <p class="value" hidden>0</p> <button type="button" class="increment">Add to Cart</button> </spin-button> </li> <li> <p>Product 3</p> <spin-button value="0" zero-label="Add to Cart" increment-label="Increment" > <button type="button" class="decrement" aria-label="Decrement" hidden > − </button> <p class="value" hidden>0</p> <button type="button" class="increment">Add to Cart</button> </spin-button> </li> </ul> </product-catalog> </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_product-catalog.css" aria-labelledby="trigger_product-catalog.css" hidden> <code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> product-catalog.css css <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>product-catalog { display: flex; flex-direction: column; gap: var(--space-l); > header, p { margin: 0; } & ul { padding: 0; margin: 0; } & header, li { display: flex; gap: var(--space-m); justify-content: space-between; } }</code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_product-catalog.ts" aria-labelledby="trigger_product-catalog.ts"> <code-block language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> product-catalog.ts ts <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>import { type Component, type SignalProducer, component, first, selection, pass, } from "../../../"; import { SpinButtonProps } from "../spin-button/spin-button"; export type ProductCatalogProps = { total: number; }; export default component( "product-catalog", { total: ((el) => () => selection<Component<SpinButtonProps>>(el, "spin-button") .get() .reduce((sum, item) => sum + item.value, 0) ) as SignalProducer<HTMLElement, number>, }, (el) => [ first( "input-button", pass({ badge: () => (el.total > 0 ? String(el.total) : ""), disabled: () => !el.total, }), ), ], ); declare global { interface HTMLElementTagNameMap { "product-catalog": Component<ProductCatalogProps>; } } </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> </tab-group>