<bmx-task-board>

<bmx-task-board
  id="ex-task-board"
  label="Office move board"
  lane-by="assignee"
  editable
  tasks='[
    {"id":"1","name":"Survey the new site","status":"Done","assignee":"Ada Lovelace","duration":3,"progress":100},
    {"id":"2","name":"Agree the floor plan","status":"In progress","assignee":"Grace Hopper","duration":4,"progress":60},
    {"id":"3","name":"Network cabling","status":"In progress","assignee":"Ada Lovelace","duration":6,"progress":20},
    {"id":"4","name":"Furniture delivery","status":"To do","assignee":"Grace Hopper","duration":2},
    {"id":"5","name":"Meeting rooms AV","status":"To do","duration":5,"category":"Facilities"}
  ]'
  links='[{"from":"1","to":"2"},{"from":"2","to":"3"},{"from":"2","to":"4"},{"from":"3","to":"5"}]'
></bmx-task-board>

<script type="module">
  await customElements.whenDefined('bmx-task-board');

  // A column with a limit is an object; from markup, `columns="To do,In progress,Done"` works without one.
  document.getElementById('ex-task-board').columns = ['To do', { id: 'In progress', limit: 2 }, 'Done'];
</script>

<div class="row" style="margin-block-start: 1rem">
  <span class="note">
    <strong>A column is a status and a lane is a person</strong> &mdash; or a category, or a phase, with
    <code>lane-by</code>. Moving a card changes those fields on the task, so a Gantt chart given the same list
    sees the move. The board schedules the plan too, so every card knows its dates and a critical one says so.
  </span>
</div>

<div class="row" style="margin-block-start: 1rem">
  <span class="note">
    <strong>Carry a card from the keyboard.</strong> <kbd>Space</kbd> picks it up; the arrows carry it &mdash;
    <kbd>Shift</kbd> with <kbd>&uarr;</kbd> and <kbd>&darr;</kbd> between lanes &mdash; and <kbd>Space</kbd> drops
    it or <kbd>Esc</kbd> puts it back, each step announced. The In progress column has a limit of two;
    <code>strict-limits</code> would refuse a third card.
  </span>
</div>