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

Slight adjustment to tab styles + added spinner component
All checks were successful
Build, Test, and Publish (to Private NPM Registry) UI Components Library / publish (push) Successful in 1m2s
Details

Browse source
This commit is contained in:
Alan Bridgeman 2026-05-19 21:36:00 -05:00
parent d85419a0d8
commit d95bdda9ec
11 changed files with 407 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

72
src/components/tabs/tabs.css
View file

@ -1,3 +1,29 @@
:host {
/* Light Mode Variables */
--tabs-bottom-border-colour__light: #E2E8F0;
--tabs-tab-title-colour__light: #64748B;
--tabs-tab-title-hover-colour__light: #0F172A;
--tabs-tab-title-hover-background-colour__light: #F1F5F9;
--tabs-tab-title-focus-colour__light: #0EA5E9;
--tabs-tab-title-active-colour__light: #0EA5E9;
--tabs-tab-title-active-border-colour__light: #0EA5E9;
--tabs-filled-background-colour__light: #F1F5F9;
--tabs-filled-tab-hover-background-colour__light: #E2E8F0;
--tabs-filled-tab-active-background-colour__light: #FFFFFF;
/* Dark Mode Variables */
--tabs-bottom-border-colour__dark: #334155;
--tabs-tab-title-colour__dark: #94A3B8;
--tabs-tab-title-hover-colour__dark: #F8FAFC;
--tabs-tab-title-hover-background-colour__dark: #1E293B;
--tabs-tab-title-focus-colour__dark: #0EA5E9;
--tabs-tab-title-active-colour__dark: #0EA5E9;
--tabs-tab-title-active-border-colour__dark: #0EA5E9;
--tabs-filled-background-colour__dark: #1E293B;
--tabs-filled-tab-hover-background-colour__dark: #334155;
--tabs-filled-tab-active-background-colour__dark: #0F172A;
}
:where(ba-tabs) {
display: block;
min-width: 100%;
@ -20,9 +46,10 @@
list-style-type: none;
margin: 0;
padding: 0;
border-bottom: 2px solid light-dark(#E2E8F0, #334155); /* Default bottom track */
border-bottom: 2px solid light-dark(var(--tabs-bottom-border-colour__light), var(--tabs-bottom-border-colour__dark)); /* Default bottom track */
margin-bottom: 2rem;
overflow-x: auto;
overflow-y: hidden;
}
/* =========================================
@ -31,11 +58,10 @@
: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);
color: light-dark(var(--tabs-tab-title-colour__light), var(--tabs-tab-title-colour__dark));
cursor: pointer;
display: flex;
align-items: center;
@ -45,15 +71,15 @@
/* Hover State */
&:hover {
color: light-dark(#0F172A, #F8FAFC);
background-color: light-dark(#F1F5F9, #1E293B);
color: light-dark(var(--tabs-tab-title-hover-colour__light), var(--tabs-tab-title-hover-colour__dark));
background-color: light-dark(var(--tabs-tab-title-hover-background-colour__light), var(--tabs-tab-title-hover-background-colour__dark));
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
/* Keyboard Focus (Accessibility) */
&:focus-visible {
outline: 2px solid var(--primary-background-colour, #0ea5e9);
outline: 2px solid light-dark(var(--primary-background-color, var(--tabs-tab-title-focus-colour__light)), var(--primary-background-color, var(--tabs-tab-title-focus-colour__dark)));
outline-offset: -2px;
border-radius: 6px;
}
@ -61,19 +87,37 @@
/* Active/Selected State */
&[aria-selected="true"],
&.is-active {
color: var(--primary-background-colour, #0ea5e9);
border-bottom-color: var(--primary-background-colour, #0ea5e9);
color: light-dark(var(--primary-background-color, var(--tabs-tab-title-active-colour__light)), var(--primary-background-color, var(--tabs-tab-title-active-colour__dark)));
border-bottom-color: light-dark(var(--primary-background-color, var(--tabs-tab-title-active-border-colour__light)), var(--primary-background-color, var(--tabs-tab-title-active-border-colour__dark)));
}
}
/* ========================================
VARIANTS (Optional classes added to nav)
======================================== */
/* -------------------------------------------------------------------------------
Underline (Bottom border / "underline" tab style)
------------------------------------------------------------------------------- */
:where(.tabs.underline) button.tabs-title {
border-bottom: 3px solid transparent; /* Placeholder for the active underline */
/* Active/Selected State */
&[aria-selected="true"],
&.is-active {
border-bottom-color: light-dark(var(--primary-background-color, var(--tabs-tab-title-active-border-colour__light)), var(--primary-background-color, var(--tabs-tab-title-active-border-colour__dark)));
}
}
/* -------------------------------------------------------------------------------
Filled (Non-transparent "filled" tab style with background and rounded corners)
------------------------------------------------------------------------------- */
/* Filled Variant: <nav class="tabs filled"> */
:where(nav.tabs.filled) {
:where(.tabs.filled) {
border-bottom: none;
background-color: light-dark(#F1F5F9, #1E293B);
background-color: light-dark(var(--tabs-filled-background-colour__light), var(--tabs-filled-background-colour__dark));
border-radius: 8px;
padding: 0.5rem;
width: fit-content;
@ -84,14 +128,14 @@
border-radius: 6px;
&:hover {
background-color: light-dark(#E2E8F0, #334155);
background-color: light-dark(var(--tabs-filled-tab-hover-background-colour__light), var(--tabs-filled-tab-hover-background-colour__dark));
}
&[aria-selected="true"],
&.is-active {
background-color: light-dark(#FFFFFF, #0F172A);
background-color: light-dark(var(--tabs-filled-tab-active-background-colour__light), var(--tabs-filled-tab-active-background-colour__dark));
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
color: var(--primary-background-colour, #0ea5e9);
color: light-dark(var(--primary-background-colour, var(--tabs-tab-title-active-colour__light)), var(--primary-background-color, var(--tabs-tab-title-active-colour__dark)));
}
}
}