@zeix/ui-element

<tab-group> <div role="tablist"> <button type="button" role="tab" id="trigger_my-slider.html" aria-controls="panel_my-slider.html" aria-selected="false" tabindex="-1">HTML</button> <button type="button" role="tab" id="trigger_my-slider.css" aria-controls="panel_my-slider.css" aria-selected="false" tabindex="-1">CSS</button> <button type="button" role="tab" id="trigger_my-slider.ts" aria-controls="panel_my-slider.ts" aria-selected="true" tabindex="0">TypeScript</button> </div> <div role="tabpanel" id="panel_my-slider.html" aria-labelledby="trigger_my-slider.html" hidden> <code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> my-slider.html html <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><my-slider> <h2 class="visually-hidden">Slides</h2> <div class="slides"> <div class="slide active" data-index="0"> <h3>Slide 1</h3> <hello-world> <label >Your name<br /> <input type="text" /> </label> <p>Hello, <span>World</span>!</p> </hello-world> </div> <div class="slide" data-index="1"> <h3>Slide 2</h3> <calc-table rows="3" columns="3"> <div class="rows"> <p>Number of rows:</p> <spin-button value="3" zero-label="Add Row" increment-label="Increment" > <button type="button" class="decrement" aria-label="Decrement" > − </button> <p class="value">3</p> <button type="button" class="increment" aria-label="Increment" > + </button> </spin-button> </div> <div class="columns"> <p>Number of columns:</p> <spin-button value="3" zero-label="Add Column" increment-label="Increment" > <button type="button" class="decrement" aria-label="Decrement" > − </button> <p class="value">3</p> <button type="button" class="increment" aria-label="Increment" > + </button> </spin-button> </div> <table> <thead> <tr> <th scope="col">Row</th> </tr> </thead> <tbody></tbody> <tfoot> <tr> <th scope="row">Sum</th> </tr> </tfoot> </table> <template class="calc-table-row"> <tr> <th scope="row"><slot></slot></th> </tr> </template> <template class="calc-table-colhead"> <th scope="col"><slot></slot></th> </template> <template class="calc-table-cell"> <td> <label> <span class="visually-hidden"><slot></slot></span> <input type="number" min="0" max="100" step="1" value="" /> </label> </td> </template> </calc-table> </div> <div class="slide" data-index="2"> <h3>Slide 3</h3> <rating-feedback> <form> <rating-stars> <fieldset> <legend class="visually-hidden">Rate</legend> <label> <input type="radio" class="visually-hidden" name="rating" value="1" /> <span class="label">☆</span> </label> <label> <input type="radio" class="visually-hidden" name="rating" value="2" /> <span class="label">☆</span> </label> <label> <input type="radio" class="visually-hidden" name="rating" value="3" /> <span class="label">☆</span> </label> <label> <input type="radio" class="visually-hidden" name="rating" value="4" /> <span class="label">☆</span> </label> <label> <input type="radio" class="visually-hidden" name="rating" value="5" /> <span class="label">☆</span> </label> </fieldset> </rating-stars> <div class="feedback" hidden> <header> <button button="button" class="hide" aria-label="Hide" > × </button> <p hidden> We're sorry to hear that! Your feedback is important, and we'd love to improve. Let us know how we can do better. </p> <p hidden> Thank you for your honesty. We appreciate your feedback and will work on making things better. </p> <p hidden> Thanks for your rating! If there's anything we can improve, we'd love to hear your thoughts. </p> <p hidden> We're glad you had a good experience! If there's anything that could make it even better, let us know. </p> <p hidden> Thank you for your support! We're thrilled you had a great experience. Your feedback keeps us motivated! </p> </header> <fieldset> <label for="rating-feedback" >Describe your experience (optional)</label > <textarea id="rating-feedback"></textarea> <input-button disabled> <button type="submit" class="primary" disabled> Submit </button> </input-button> </fieldset> </div> </form> </rating-feedback> </div> </div> <button type="button" class="prev" aria-label="Previous">‹</button> <button type="button" class="next" aria-label="Next">›</button> <div class="dots"> <span class="active"></span> <span></span> <span></span> </div> </my-slider> </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-slider.css" aria-labelledby="trigger_my-slider.css" hidden> <code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> my-slider.css css <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>my-slider { display: flex; overflow: hidden; aspect-ratio: 16 / 9; position: relative; .slides { display: flex; align-items: center; justify-content: center; width: 100%; } .slide { min-width: 100%; text-align: center; &:not(.active) { display: none; } } .dots { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; justify-content: center; gap: var(--space-xs); padding-block: var(--space-s); > span { width: var(--space-s); height: var(--space-s); border-radius: 50%; background-color: var(--color-text); opacity: var(--opacity-translucent); &.active { opacity: var(--opacity-solid); } } } > button { position: absolute; top: 2%; height: 96%; border: 0; border-radius: var(--space-xs); background: transparent; padding: var(--space-m); font-size: var(--font-size-xxl); color: var(--color-text); opacity: var(--opacity-dimmed); transition: opacity var(--transition-short) var(--easing-inout); &:hover, &:active, &:focus { opacity: var(--opacity-solid); background-color: rgba(0, 0, 0, 0.05); } &:active {</