# Kanban

Composable kanban board primitives inspired by Flux Kanban and implemented with local shadcn-style Angular patterns.

## Import

```ts
import {
  KanbanCardComponent,
  KanbanCardFooterComponent,
  KanbanCardHeaderComponent,
  KanbanColumnActionsComponent,
  KanbanColumnCardsComponent,
  KanbanColumnComponent,
  KanbanColumnFooterComponent,
  KanbanColumnHeaderComponent,
  KanbanComponent,
} from '@edsis/component/kanban';
```

## Usage

```html
<Kanban>
  <KanbanColumn>
    <KanbanColumnHeader heading="Planned" count="4" />
    <KanbanColumnCards>
      <KanbanCard heading="Update privacy policy in app" />
      <button KanbanCard type="button" heading="Search suggestions are broken"></button>
    </KanbanColumnCards>
  </KanbanColumn>
</Kanban>
```

## Composition

- `Kanban` owns horizontal board layout and column width variables.
- `KanbanColumn` frames one workflow stage.
- `KanbanColumnHeader` accepts `heading`, `subheading`, `count`, and `badge` inputs.
- `KanbanColumnActions` projects action buttons into the column header.
- `KanbanColumnCards` contains cards and handles vertical scrolling.
- `KanbanColumnFooter` is for add-card forms or secondary actions.
- `KanbanCard` renders a static card; use `button[KanbanCard]` or `a[KanbanCard]` for clickable cards.
- `KanbanCardHeader` and `KanbanCardFooter` project tags, metadata, avatars, or actions into a card.

## Inputs

### KanbanComponent

| Input         | Type                        | Default     | Description                               |
| ------------- | --------------------------- | ----------- | ----------------------------------------- |
| `columnWidth` | `'sm' \| 'default' \| 'lg'` | `'default'` | Sets the board column width CSS variable. |
| `dense`       | `boolean`                   | `false`     | Reduces column and card gaps.             |
| `class`       | `string`                    | `''`        | Additional host classes.                  |

### KanbanColumnHeaderComponent

| Input        | Type                       | Default | Description                                   |
| ------------ | -------------------------- | ------- | --------------------------------------------- |
| `heading`    | `string`                   | `''`    | Primary column title.                         |
| `subheading` | `string`                   | `''`    | Secondary column text.                        |
| `count`      | `string \| number \| null` | `null`  | Optional card count shown beside the heading. |
| `badge`      | `string`                   | `''`    | Optional badge text shown beside the heading. |
| `class`      | `string`                   | `''`    | Additional host classes.                      |

### KanbanCardComponent

| Input      | Type      | Default | Description                                        |
| ---------- | --------- | ------- | -------------------------------------------------- |
| `heading`  | `string`  | `''`    | Default card title when no custom body is needed.  |
| `selected` | `boolean` | `false` | Marks a card as selected/current.                  |
| `disabled` | `boolean` | `false` | Disables interaction and applies disabled styling. |
| `class`    | `string`  | `''`    | Additional host classes.                           |

## Accessibility

- Use `button[KanbanCard]` for cards that trigger an action.
- Provide `type="button"` on button cards inside forms.
- Keep card titles visible and descriptive.
- Give icon-only column actions an `aria-label`.
- Preserve DOM order to match the workflow order announced to assistive technology.