API reference

Here's the full contract for board: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

No inputs documented yet.

Outputs

No outputs documented yet.

Templates

No templates documented yet.

CSS variables

Theme every pixel with 24 CSS variables. Override them at :root or scope them to a wrapper.

Column Layout & Structure

Control the overall layout, spacing, and structure of board columns

Variable	Default	Type	Description
`--hub-column-bg`	`#f8f9fa`	color	Background color for board columns `#ffffff#f8f9fatransparent`
`--hub-column-color`	`#212529`	color	Text color within board columns `#333333rgb(33, 37, 41)var(--bs-body-color)`
`--hub-column-border-color`	`#dee2e6`	color	Border color around board columns `#e9ecefvar(--bs-border-color)transparent`
`--hub-column-border-width`	`1px`	length	Width of column borders `02px0.5rem`
`--hub-column-border-radius`	`0.375rem`	length	Border radius for column corners `00.5rem1rem16px`
`--hub-column-gap`	`1rem`	length	Spacing between columns `0.5rem1.5rem2rem`
`--hub-column-padding`	`1rem`	length	Internal padding within columns `0.75rem1.25rem1.5rem`

Column Headers & Footers

Customize the appearance of column headers and footers

Variable	Default	Type	Description
`--hub-column-cap-bg`	`#ffffff`	color	Background color for column headers `#f8f9favar(--bs-light)transparent`
`--hub-column-cap-color`	`#212529`	color	Text color for column headers `#495057var(--bs-dark)#333`
`--hub-column-cap-padding`	`0.75rem 1rem`	length	Padding inside column headers `0.5rem 1rem1rem 1.25rem1rem`
`--hub-column-cap-border-bottom`	`1px solid #dee2e6`	border	Bottom border for column headers `2px solid #dee2e6none1px dashed #ccc`

Card Styling

Customize the appearance of individual cards within columns

Variable	Default	Type	Description
`--hub-card-bg`	`#ffffff`	color	Background color for cards `#f8f9fargba(255,255,255,0.9)transparent`
`--hub-card-color`	`#212529`	color	Text color for cards `#333333var(--bs-body-color)#495057`
`--hub-card-border`	`1px solid #dee2e6`	border	Border around cards `2px solid #dee2e6none1px dashed #ccc`
`--hub-card-border-radius`	`0.375rem`	length	Border radius for card corners `00.5rem0.75rem12px`
`--hub-card-padding`	`1rem`	length	Internal padding within cards `0.75rem1.25rem1rem 1.5rem`
`--hub-card-margin`	`0.5rem 0`	length	Margin around cards `0.25rem 00.75rem 01rem 0`
`--hub-card-shadow`	`0 2px 4px rgba(0,0,0,0.1)`	shadow	Box shadow for cards `0 1px 3px rgba(0,0,0,0.1)0 4px 8px rgba(0,0,0,0.15)none`

Drag & Drop States

Visual feedback and states for drag-and-drop interactions

Variable	Default	Type	Description
`--hub-card-hover-shadow`	`0 4px 8px rgba(0,0,0,0.15)`	shadow	Enhanced shadow when hovering over cards `0 6px 12px rgba(0,0,0,0.2)0 2px 6px rgba(0,0,0,0.1)none`
`--hub-card-dragging-opacity`	`0.5`	number	Opacity of cards while being dragged `0.30.70.8`
`--hub-drop-zone-bg`	`rgba(0,123,255,0.1)`	color	Background color for active drop zones `rgba(40,167,69,0.1)rgba(255,193,7,0.1)transparent`
`--hub-drop-zone-border`	`2px dashed #007bff`	border	Border style for active drop zones `3px solid #28a7451px dotted #ffc107none`

Animations & Transitions

Control timing and easing for animations and transitions

Variable	Default	Type	Description
`--hub-transition-duration`	`0.2s`	string	Duration for standard transitions `0.15s0.3s0.4s`
`--hub-transition-easing`	`ease-in-out`	string	Easing function for transitions `easelinearcubic-bezier(0.4, 0, 0.2, 1)`

Styling and theming

No styling examples are documented yet. This section will include customization recipes and theming examples.