@zeix/ui-element

<module-tabgroup> <div role="tablist"> <button type="button" role="tab" id="trigger_module-carousel.html" aria-controls="panel_module-carousel.html" aria-selected="false" tabindex="-1" >HTML</button> <button type="button" role="tab" id="trigger_module-carousel.css" aria-controls="panel_module-carousel.css" aria-selected="false" tabindex="-1" >CSS</button> <button type="button" role="tab" id="trigger_module-carousel.ts" aria-controls="panel_module-carousel.ts" aria-selected="true" tabindex="0" >TypeScript</button> </div> <div role="tabpanel" id="panel_module-carousel.html" aria-labelledby="trigger_module-carousel.html" hidden> <module-codeblock language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> module-carousel.html html <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><module-carousel> <h2 class="visually-hidden">Slides</h2> <div class="slides"> <div id="slide1" role="tabpanel" aria-current="true"> <h3>Slide 1</h3> <hello-world> <label> Your name<br /> <input type="text" /> </label> <p>Hello, <span>World</span>!</p> </hello-world> </div> <div id="slide2" role="tabpanel" aria-current="false"> <h3>Slide 2</h3> <calc-table rows="3" columns="3"> <div class="rows"> <p>Number of rows:</p> <form-spinbutton 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> </form-spinbutton> </div> <div class="columns"> <p>Number of columns:</p> <form-spinbutton 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> </form-spinbutton> </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 id="slide3" role="tabpanel" aria-current="false"> <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> <basic-button disabled> <button type="submit" class="primary" disabled> Submit </button> </basic-button> </fieldset> </div> </form> </rating-feedback> </div> </div> <nav aria-label="Carousel Navigation"> <button type="button" class="prev" aria-label="Previous">❮</button> <button type="button" class="next" aria-label="Next">❯</button> <div role="tablist"> <button role="tab" aria-selected="true" aria-controls="slide1" aria-label="Slide1" data-index="0" tabindex="0" > ● </button> <button role="tab" aria-selected="false" aria-controls="slide2" aria-label="Slide 2" data-index="1" tabindex="-1" > ● </button> <button role="tab" aria-selected="false" aria-controls="slide3" aria-label="Slide 3" data-index="2" tabindex="-1" > ● </button> </div> </nav> </module-carousel> </code></pre> <basic-button class="copy"> <button type="button" class="secondary small"> Copy </button> </basic-button> </module-codeblock> </div> <div role="tabpanel" id="panel_module-carousel.css" aria-labelledby="trigger_module-carousel.css" hidden> <module-codeblock language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> module-carousel.css css <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>module-carousel { display: flex; overflow: hidden; aspect-ratio: 16 / 9; position: relative; .slides { display: flex; align-items: center; justify-content: center; width: 100%; } [role="tabpanel"] { width: 100%; height: 100%; text-align: center; &[aria-current="false"] { display: none; } & h3 { display: block; } } > nav { > 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-xl); color: var(--color-text); opacity: var(--opacity-dimmed); transition: opacity var(--transition-short) var(--easing-inout); cursor<span st