Bridgeman-Accessible/ba-web-components
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added tabs components and refactored stuff to work properly with composed / nested elements etc...
All checks were successful
Build, Test, and Publish (to Private NPM Registry) UI Components Library / publish (push) Successful in 58s
Details

Browse source
This commit is contained in:
Alan Bridgeman 2026-05-18 13:56:31 -05:00
parent 1c2d794a18
commit d2e99cc280
27 changed files with 1579 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

129
src/components/tabs/tabs.css Normal file
View file

@ -0,0 +1,129 @@
:where(ba-tabs) {
display: block;
min-width: 100%;
max-width: 100%;
}
:where(ba-tablist) {
display: block;
min-width: 100%;
max-width: 100%;
}
/* ======================================
TABLIST CONTAINER (<nav class="tabs">)
====================================== */
:where(.tabs) {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
list-style-type: none;
margin: 0;
padding: 0;
border-bottom: 2px solid light-dark(#E2E8F0, #334155); /* Default bottom track */
margin-bottom: 2rem;
overflow-x: auto;
}
/* =========================================
TAB BUTTONS (<button class="tabs-title">)
========================================= */
:where(.tabs) button.tabs-title {
background: transparent;
border: none;
border-bottom: 3px solid transparent; /* Placeholder for the active underline */
padding: 0.75rem 1.5rem;
font-size: 1.05rem;
font-weight: 600;
color: light-dark(#64748B, #94A3B8);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: -2px; /* Pull down to overlap the container's bottom border */
transition: all 0.2s ease;
/* Hover State */
&:hover {
color: light-dark(#0F172A, #F8FAFC);
background-color: light-dark(#F1F5F9, #1E293B);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
/* Keyboard Focus (Accessibility) */
&:focus-visible {
outline: 2px solid var(--primary-background-colour, #0ea5e9);
outline-offset: -2px;
border-radius: 6px;
}
/* Active/Selected State */
&[aria-selected="true"],
&.is-active {
color: var(--primary-background-colour, #0ea5e9);
border-bottom-color: var(--primary-background-colour, #0ea5e9);
}
}
/* ========================================
VARIANTS (Optional classes added to nav)
======================================== */
/* Filled Variant: <nav class="tabs filled"> */
:where(nav.tabs.filled) {
border-bottom: none;
background-color: light-dark(#F1F5F9, #1E293B);
border-radius: 8px;
padding: 0.5rem;
width: fit-content;
button.tabs-title {
border: none;
margin-bottom: 0;
border-radius: 6px;
&:hover {
background-color: light-dark(#E2E8F0, #334155);
}
&[aria-selected="true"],
&.is-active {
background-color: light-dark(#FFFFFF, #0F172A);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
color: var(--primary-background-colour, #0ea5e9);
}
}
}
:where(ba-tab-panels) {
display: block;
min-width: 100%;
max-width: 100%;
}
/* =====================================
TAB PANELS (<div class="tabs-panel">)
===================================== */
.tabs-panel {
display: none; /* Hidden by default */
}
.tabs-panel.is-active {
display: block; /* Shown when JS adds .is-active */
animation: fadeInTab 0.3s ease-in-out forwards;
}
/* =========
KEYFRAMES
========= */
@keyframes fadeInTab {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}