Getting started

Install and import

Install the package in your application:

pnpm add @barbajoe/css-lib

Import the stylesheet once from your application entry point:

import "@barbajoe/css-lib";

The explicit @barbajoe/css-lib/dist/barbajoe.css import remains supported. Both imports use the same global stylesheet.

What the library owns

Start with semantic HTML. The library supplies typography, colors, form controls, and documented visual patterns. Applications own state, events, validation, focus transitions, announcements, and persistence. Working examples on this site use synthetic, local data; their scripts and specimen layout styles do not ship in the package.

Customize public --barba- tokens and application selectors. Applications choose table overflow, image sizing, and content-specific layout. Read the source versus installed-package theme guidance before copying a theme example.

API quick reference

The package supplies CSS only. Applications supply state, events, validation, focus, live announcements, and persistence. Full markup, state, and customization reference.

Shell and navigation

.app-shell has a direct main and optional header/footer. .site-header, .site-header-brand, .site-header-links arrange native links and buttons; use aria-current="page" for the current destination. .skip-link targets main.

Buttons and X actions

data-barba-variant: primary, secondary, tertiary, text, and icon. data-barba-intent="danger" supplies destructive appearance. Icon actions also use data-barba-shape="icon"; data-barba-size="compact" reduces the face. Removable chips use the expanded target described in the Chips section; standalone compact icons retain their 44px minimum target. Native type, name, and disabled state remain required.

Fields

.inline-field has a direct visible label. .input-row wraps a field/group and action. .input-action requires a direct-child text/search input and icon button; nested component inputs and textareas need application layout. Hide clear when empty; restore focus before hiding it.

Chips

.chip-list wraps. Informational .chip stays noninteractive. A selectable button needs aria-pressed and a .chip-face child. .chip-removable contains a label span and separate compact X button; applications restore focus after removal.

Disclosures

details.disclosure has a direct summary with .disclosure-label, .disclosure-title, optional .disclosure-description, then .disclosure-content. Add .disclosure--filled for a filled header, shared inward/downward chevron, and an accent body border. Native open owns expansion; both variants share markup.

Dialogs

A named native dialog contains a direct .dialog-content-container with .dialog-header, .dialog-body, .dialog-footer. Add .dialog-header-actions for a close row. Optional data-barba-dialog-*: spacing=compact, height=content, room=extra, dividers=full. Applications own cancellation and initial/restored focus.

Visibility and customization

.visually-hidden retains supplemental text for assistive technology. Ordinary hidden suppresses rendering and tab stops; remove the attribute to reveal (the string “false” still hides). hidden="until-found" remains browser-managed. Customize public --barba- tokens; private --_barba- and compiler properties are not API. Decorative .text-gradient and .scaleup-on-hover are optional. Recheck contrast, focus, and target sizes after overrides.