seven-minute-tabs

Seven Minute Tabs

npm install @zachleat/seven-minute-tabs

Code converted to be a web component.
All styles have been removed and this component operates correctly without CSS. For longevity of the code all styling is left to independent project-specific themes.
Progressively enhances from <a> with anchor links pointing to content panels.
Adds hidden attribute to panels using JavaScript so that content still shows when JavaScript is not available.
Adds tabindex using JavaScript so that content remains accessibile without JavaScript.
Arrow key support. Adjusts for vertical aria-orientation values.
Home/end key support.
(Option to delete tabs was removed from the original example)

v3.0.3 Add autoheight attribute to set a --smt-height CSS Custom Property (maximum height across all tabs) to maintain a consistent component height when switching tabs (e.g. seven-minute-tabs [role="tabpanel"]) { min-height: var(--smt-height); })
v3.0.1 Add sync attribute to activate all other matching tabs (in other tab groups) with the same data-tab-persist="group:value".
v3.0.0 New tab selection persistence (via persist attribute) logic with data-tab-persist="group:value". Defaults to localStorage. Use persist="session" for sessionStorage.
v2.0.2 Add prune attribute option to remove buttons that don’t have a matching panel.
v2.0.1 Add persist attribute option to persist selected tab to sessionStorage.
v2.0.0 Previous versions of this component required the aria-selected, aria-labelledby, aria-controls, and button/tab id attributes to exist in server rendered markup. If they don’t exist, they are now added automatically.