Components

57 elements, all plain Web Components. Attributes for simple values, one JS property for structured data. Every tile below is the real element.

Actions

1

The one button.

• Add fieldCancel
  baht-buttonVariants and sizes via attributes; content via children or label.

Data input

21

Controlled fields. Feed value, listen to baht-input.

• baht-inputSingle-line text or email field.
• baht-textStatic text block (type: "label"): no value, no emits.
• baht-textareaMulti-line text; rows from field.rows.
• baht-numberNumeric input; emits null when cleared.
• baht-currencyMoney input: plain digits while typing, thousands-separated on blur.
• baht-selectSingle-choice dropdown with its own listbox, identical on every OS.
• baht-multiselectCheckbox group; value is a string[] in option order.
• baht-checkboxSingle boolean checkbox with an inline label.
• baht-radioRadio group; value is the option key.
• baht-toggleSwitch with an inline label; boolean value.
• baht-datepickerCalendar picker on the tokens, never the OS date wheel.
• baht-fileFile capture, or upload through a registry function.
• baht-uploadUploads to your endpoint on pick; the returned URL is the value.
• baht-ratingStar rating; click the current value to clear.
• baht-otpOne-time-code boxes: auto-advance, paste distributes.
• baht-filterFilter chip group. Feed selected, listen to baht-change.
• baht-rangeRange slider, controlled.
• <baht-repeater>
  baht-repeaterArray-of-rows control: every row renders the same sub-fields.
• baht-reference-pickerRead-only input plus a lookup that opens a typeahead.
• baht-typeaheadText input with suggestions, static or async.
• baht-keyvalue-editorInline key = value rows for maps and config objects.

Data display

12

Read-only surfaces. Server-side contracts: you feed the page.

• baht-badgeStatus pill or tag. Status tones get a dot.
• baht-avatarSmall circular identity chip; initials derived from label.
• Last run 6 h ago.
  baht-cardSurface card: 1px border, no shadow at rest.
• baht-tablePaginated table: toolbar, selection, sortable headers, column picker. Never slices or fetches.
• baht-listDisplay list with the same server-side contract as the table.
• baht-timelineVertical timeline for run history and audit logs.
• baht-accordionCollapsible panels; multiple allows several open.
• npm i bank20baht-ui
  baht-codeMonospace code, inline chip or block. Not a highlighter.
• baht-skeletonLoading placeholder: opacity pulse, no shimmer.
• baht-empty-stateCentered "nothing here" placeholder.
• baht-error-stateCentered failure placeholder with an optional retry.
• baht-stepsWizard progress: numbered markers, current highlighted, done checked.

Charts

8

Pure SVG and DOM on the validated chart tokens; no chart library.

• baht-statFigure, delta vs a named period, sparkline.
• baht-sparklineMicro trend line, accent on the newest point.
• baht-bar-chartBars with a previous period and budget markers.
• baht-line-chartMulti-series lines with a crosshair tooltip.
• baht-heatmapCalendar heat on the sequential ramp.
• baht-meterSpent against budget, with a pace tick.
• baht-donut-chartDonut with legend; the centre defaults to the sum.
• baht-stat-chartBig single-number stat (superseded by baht-stat).

Feedback

8

Tell the user what happened.

• baht-alertInline alert or callout.
• baht-spinnerThe only animated icon the design system allows.
• baht-progressProgress bar; value null is indeterminate.
• baht-progress-ringCircular percent-used ring; the round counterpart to baht-progress.
• <baht-loading-overlay>
  baht-loading-overlayFull-viewport loading scrim with a centered spinner. Controlled by open.
• <baht-modal>
  baht-modalControlled dialog: you flip open, it asks to close.
• <baht-toast>
  baht-toastToast host, one per page; call show().
• Copy
  baht-tooltipHover and focus tooltip around its children. Pure CSS.

Navigation

3

Links and where you are.

• baht-linkStyled anchor with the underline treatment.
• baht-breadcrumbsTrail; the last item is the current page.
• baht-paginationServer-side pagination; the host fetches on page change.

Layout

2

Structure inside a form.

• baht-sectionSection divider inside a form: heading plus rule.
• baht-fieldsetNative fieldset and legend for related fields.

Engine

2

JSON in, UI out.

• baht-formL1: one controlled form. Emits baht-change and baht-validity.
• <baht-workflow>
  baht-workflowL2: multi-step wizard with show, hide, skip and compute rules.