@zeix/ui-element

<tab-group> <div role="tablist"> <button type="button" role="tab" id="trigger_tab-group.html" aria-controls="panel_tab-group.html" aria-selected="false" tabindex="-1">HTML</button> <button type="button" role="tab" id="trigger_tab-group.css" aria-controls="panel_tab-group.css" aria-selected="false" tabindex="-1">CSS</button> <button type="button" role="tab" id="trigger_tab-group.ts" aria-controls="panel_tab-group.ts" aria-selected="true" tabindex="0">TypeScript</button> </div> <div role="tabpanel" id="panel_tab-group.html" aria-labelledby="trigger_tab-group.html" hidden> <code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> tab-group.html html <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code><tab-group> <div role="tablist"> <button type="button" role="tab" id="trigger1" aria-controls="panel1" aria-selected="true" tabindex="0" > Tab 1 </button> <button type="button" role="tab" id="trigger2" aria-controls="panel2" aria-selected="false" tabindex="-1" > Tab 2 </button> <button type="button" role="tab" id="trigger3" aria-controls="panel3" aria-selected="false" tabindex="-1" > Tab 3 </button> </div> <div role="tabpanel" id="panel1" aria-labelledby="trigger1"> Tab 1 content </div> <div role="tabpanel" id="panel2" aria-labelledby="trigger2" hidden> Tab 2 content </div> <div role="tabpanel" id="panel3" aria-labelledby="trigger3" hidden> Tab 3 content </div> </tab-group> </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_tab-group.css" aria-labelledby="trigger_tab-group.css" hidden> <code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> tab-group.css css <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>tab-group { display: block; margin-bottom: var(--space-l); > [role="tablist"] { display: flex; border-bottom: 1px solid var(--color-gray-50); padding: 0; margin-bottom: 0; & button { border: 0; border-top: 2px solid transparent; border-bottom-width: 0; font-family: var(--font-family-sans); font-size: var(--font-size-s); font-weight: var(--font-weight-bold); padding: var(--space-s) var(--space-m); color: var(--color-text-soft); background-color: var(--color-secondary); cursor: pointer; transition: all var(--transition-short) var(--easing-inout); &:hover, &:focus { color: var(--color-text); background-color: var(--color-secondary-hover); } &:active { color: var(--color-text); background-color: var(--color-secondary-active); } &[aria-selected="true"] { color: var(--color-primary-active); border-top: 3px solid var(--color-primary); background-color: var(--color-background); margin-bottom: -1px; } } } > [role="tabpanel"] { font-family: sans-serif; font-size: var(--font-size-m); background: var(--color-background); margin-block: var(--space-l); } } </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> <div role="tabpanel" id="panel_tab-group.ts" aria-labelledby="trigger_tab-group.ts"> <code-block language="ts" copy-success="Copied!" copy-error="Error trying to copy to clipboard!"> tab-group.ts ts <pre class="shiki monokai" style="background-color:#272822;color:#F8F8F2" tabindex="0"><code>import { type Component, all, component, first, on, setProperty, } from "../../.."; export type TabGroupProps = { selected: string; }; const manageArrowKeyFocus = (elements: HTMLElement[], index: number) => (e: Event) => { if (!(e instanceof KeyboardEvent)) throw new TypeError("Event is not a KeyboardEvent"); const handledKeys = [ "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", ]; if (handledKeys.includes(e.key)) { e.preventDefault(); switch (e.key) { case "ArrowLeft": case "ArrowUp": index = index < 1 ? elements.length - 1 : index - 1; break; case "ArrowRight": case "ArrowDown": index = index >= elements.length - 1 ? 0 : index + 1; break; case "Home": index = 0; break; case "End": index = elements.length - 1; break; } if (elements[index]) elements[index].focus(); } }; export default component( "tab-group", { selected: "", }, (el) => { el.selected = el .querySelector('[role="tab"][aria-selected="true"]') ?.getAttribute("aria-controls") ?? ""; const isSelected = (target: Element) => el.selected === target.getAttribute("aria-controls"); const tabs = Array.from( el.querySelectorAll<HTMLButtonElement>('[role="tab"]'), ); let focusIndex = 0; return [ first( '[role="tablist"]', on("keydown", manageArrowKeyFocus(tabs, focusIndex)), ), all<TabGroupProps, HTMLButtonElement>( '[role="tab"]', on("click", (e: Event) => { el.selected = (e.currentTarget as HTMLElement).getAttribute( "aria-controls", ) ?? ""; focusIndex = tabs.findIndex((tab) => isSelected(tab)); }), setProperty("ariaSelected", (target) => String(isSelected(target)), ), setProperty("tabIndex", (target) => isSelected(target) ? 0 : -1, ), ), all<TabGroupProps, HTMLElement>( '[role="tabpanel"]', setProperty("hidden", (target) => el.selected !== target.id), ), ]; }, ); declare global { interface HTMLElementTagNameMap { "tab-list": Component<TabGroupProps>; } } </code></pre> <input-button class="copy"> <button type="button" class="secondary small"> Copy </button> </input-button> </code-block> </div> </tab-group>