The parts that build every BCS screen

Today <x-ui.button> takes variant primary, secondary or danger and size sm or md; other attributes merge onto the <button>. Ghost, success, lg and icon-only are kit patterns, written as plain buttons with the same classes until they become props. Icons go in the slot. The onboarding wizard's Back and Continue are this component: Back keeps its leading arrow because it navigates, Continue has no arrow, and while a step saves Continue is disabled and reads "Saving…" with a spinner. Never append an arrow to an action's label.

Focus a field to see the ring. Every text field in the kit is a .bcs-input: the adaptive, icon, search and textarea fields too, so focus is always the action colour and never the frame colour. Size it with h-control-* and text-*; don't add border, shadow or focus utilities, which would cancel its states.

Type or paste 482913 to see it verify; any other six digits show the error state. Classes live in the auth block of bcs-kit.css: .bcs-otp (add .is-error, .is-success or .is-disabled), .bcs-otp-slot, .bcs-otp-cell, .bcs-otp-caret and .bcs-otp-sep. Give each cell placeholder=" " so empty and filled cells style themselves. Behaviour comes from Alpine.data('bcsOtp') in assets/js/bcs-kit.js (in the app, resources/js/app.js); its options are listed there.

Bug found in the source: app.js checks e.target.classList.contains('filter-chip'), so clicking the icon inside a chip does nothing. This showcase uses e.target.closest('.filter-chip') instead.

Behaviour comes from Alpine.data('bcsListbox') in assets/js/bcs-kit.js (in the app, resources/js/app.js). Without JavaScript, keep the native <select> the component renders today: the global select rule gives it the same chevron, and .bcs-select gives it the same border and focus ring.

Behaviour comes from Alpine.data('bcsMenu') in assets/js/bcs-kit.js (in the app, resources/js/app.js). The source uses fa-hand-wave for Greeting, which is not in Font Awesome 6.4 Free and renders blank; this showcase uses fa-hand.

The active option is marked with ARIA, not a class: aria-pressed="true" on buttons in a role="group", aria-selected="true" on role="tab" buttons in a role="tablist", or a checked radio inside each label.bcs-seg-item in a form. Used for the calendar view (Appointments), the appointment channel and Sign in as (subtle), the profile and list-page switches, the email preview width and the app frame's sidebar role.

Bug found in the source: module-profile calls showTab(key, 'profile-tab-area'), but that id belongs to the panes wrapper and the buttons sit outside it. The panels switch but the underline never moves. Passing the outer profile-tabs id, as this demo does, fixes it.

Stat card or KPI strip? A stat card is a dashboard tile: each figure stands alone, with its own icon chip and a trend or live line, read across a grid. A KPI strip describes one record: up to four figures inside that record's card, without icons or trends. Don't mix the two in one row. The strip is a <dl>: each item is a <div> with the label (dt) first in the source and the value shown above it. Used in the Profile header and profile card.

Select with the row checkboxes, the header checkbox (all rows; it shows a dash when only some are selected), a click on the row, or Space on a focused row; Up and Down move between rows. The behaviour is x-data="bcsRowSelect(ids, selected)" from assets/js/bcs-kit.js. The look is .bcs-list (columns and card layout; .bcs-list--actions places the row actions) plus .bcs-table-row. The row's checkbox is its selection state, so rows carry no aria-selected: that is only valid inside role="grid", which would promise cell-by-cell arrow keys. Today <x-ui.data-table> renders a plain table that scrolls sideways on a phone; the markup here is what it should render, so the kit has one table system.

Colours here are computed with the same crc32(name) % 8 rule as the Blade component.

The tile only changes the avatar's corners, so colour, initials and the photo all come from <x-ui.avatar>. It's unlayered in bcs-kit.css on purpose: it has to beat the avatar's rounded-full. Seen on the Profile header and job post and review rows, and in the List page's job posts.

Say which case it is: "nothing yet" tells people where rows come from, "no matches" tells them to change the filters. The classes are .bcs-empty, .bcs-empty-icon, .bcs-empty-title, .bcs-empty-desc and .bcs-empty-actions in bcs-kit.css; .is-compact trims the padding for side panels. The list page's empty rows use the same classes: List empty state.

Colour rule for every progress and score bar: primary by default (in progress or neutral), success when complete or on target, danger when failing, over a limit or critical. No other colours. The component's default colour is a raw blue, so always pass color.

Click Continue and Back to move through the steps. These are the pieces of the Onboarding wizard: its brand pane shows the vertical list while the card is 760px or wider and the compact band below that. Steps are numbered because they really are a sequence. The current step carries aria-current="step" and done steps read "(done)" to screen readers; the compact bar is decorative, since its line names the step.