@brickclay-org/ui 0.1.92 → 0.1.94

package/fesm2022/brickclay-org-ui.mjs

@@ -14078,165 +14078,173 @@ const BK_TABLE = [
 ];
 
 /**
- * Content-agnostic kanban board: column layout, card positioning and
- * drag-and-drop, and nothing about what a card contains or what a click on
- * one should do.
+ * Kanban board: column layout, item positioning and drag-and-drop, add and
+ * remove, and nothing about what an item's *body* renders as beyond the
+ * fixed `id` / `label` / `sortOrder` / `parentId` every `ColumnItem` carries.
  *
- * The board never renders a card's insides itself — `cardTemplate` does that,
- * receiving the card and its column as context:
+ * Columns own their items — a single nested tree is the source of truth:
  *
  *   <bk-kanban
- *     [columns]="columns"
- *     [cards]="cards()"
+ *     [columns]="columns()"
  *     [cardTemplate]="card"
- *     (cardMoved)="onCardMoved($event)"
- *     (cardClicked)="onCardClicked($event)"
+ *     [showAddItem]="true"
+ *     [showRemoveItem]="true"
+ *     (columnsChanged)="onColumnsChanged($event)"
+ *     (itemClicked)="onItemClicked($event)"
  *   ></bk-kanban>
  *
  *   <ng-template #card let-card let-column="column">
  *     <div [bkKanbanClickTarget]="'hours'">{{ card.hours }}h</div>
- *     {{ card.title }}
+ *     {{ card.label }}
  *   </ng-template>
  *
- * That is deliberate, not an oversight — see the package spec's Design
- * Principles. Three consequences fall out of it directly:
+ * Three consequences fall out of that directly:
  *
- * - **Data ownership stays with the caller.** A move is reported through
- *   `cardMoved`, not applied to some copy of `cards` this component keeps to
- *   itself. Internally it *does* mutate the card objects it was handed
- *   (`columnIdField`'s field, and an `order` field used to remember position
- *   within a column) so the board redraws in the right place immediately,
- *   exactly the way `bk-grid`'s own row-drag mutates `result` in place and
- *   renumbers `sortOrder` — but persistence, and reverting the view if a
- *   save fails, are the host's job. Reverting is just handing back a
- *   `cards` array (or updated objects) that reflect the pre-move state; nothing
+ * - **Data ownership stays with the caller.** Every operation is reported
+ *   through `columnsChanged` (only the column(s) actually affected, each
+ *   with its complete current `items` — column reordering aside, see
+ *   `columnReorderPayload`), not applied to some copy of `columns` this
+ *   component keeps to itself. Internally it *does* mutate the column/item
+ *   objects it was handed (`items`, `sortOrder`, `parentId`) so the board
+ *   redraws in the right place immediately — but persistence, and reverting
+ *   the view if a save fails, are the host's job. Reverting is just handing
+ *   back a `columns` array that reflects the pre-operation state; nothing
  *   further to undo on this end.
- * - **Clicks are reported, never acted on.** `cardClicked` says which card and
- *   which named region (see `[bkKanbanClickTarget]`); opening a popup or
+ * - **A cross-column move commits immediately by default** — same as a
+ *   same-column reorder, nothing to bind. Turn on
+ *   `validateMove` and that flips: dragging an item onto a
+ *   different column then doesn't touch `columns()` at all until the
+ *   consumer answers `itemMoveBetweenColumns` — see that event's doc comment
+ *   and `onItemDrop` below for the full flow.
+ * - **Clicks are reported, never acted on.** `itemClicked` says which item
+ *   and which named region (see `[bkKanbanClickTarget]`); opening a popup or
  *   doing nothing at all is entirely up to whoever is listening.
- * - **A card's own shape is never inspected**, beyond the two fields above.
- *   Tags, hours, avatars, due dates — the board doesn't know they exist.
+ * - **An item's own shape past the four required fields is never
+ *   inspected.** Tags, hours, avatars, due dates — the board doesn't know
+ *   they exist. `label` is the one exception: the board reads it for the
+ *   built-in add/remove buttons' aria-labels and as the default label an
+ *   add gets when no custom `columnHeaderActionsTemplate` supplies one.
  */
 class BkKanban {
     /* ================= Inputs ================= */
-    /** Column/status definitions. Unlimited — the board renders whatever it's given. */
+    /** Columns, each owning its own `items` — the single source of truth.
+     *  Unlimited columns, unlimited items per column; the board renders
+     *  whatever it's given. Mutated in place on every drag/add/remove — see
+     *  the component doc. */
     columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
-    /** Flat card list. Grouped into columns via `columnIdField`, ordered within
-     *  a column by an `order` field when the cards carry one, otherwise left in
-     *  the sequence they appear here. */
-    cards = input.required(...(ngDevMode ? [{ debugName: "cards" }] : []));
-    /** Renders a card's body. Receives `{ $implicit: card, card, column, index }`. */
+    /** Renders an item's body. Receives `{ $implicit: card, card, column,
+     *  index, removeItem }`. */
     cardTemplate = input.required(...(ngDevMode ? [{ debugName: "cardTemplate" }] : []));
-    /** Field name, or a resolver function, that gives a card's column id.
-     *
-     *  A field name can be both read and written, so a cross-column drop
-     *  updates it directly. A resolver function is read-only — the board still
-     *  reports the move via `cardMoved`, but leaves updating the source data to
-     *  the host, since there's nowhere on a function to write the new value. */
-    columnIdField = input('columnId', ...(ngDevMode ? [{ debugName: "columnIdField" }] : []));
-    dragEnabled = input(true, ...(ngDevMode ? [{ debugName: "dragEnabled" }] : []));
-    dragScope = input('both', ...(ngDevMode ? [{ debugName: "dragScope" }] : []));
+    /** How far (and whether at all) a card can be dragged — see
+     *  `BkKanbanMovementRestriction`. One control instead of a separate
+     *  on/off switch plus a restriction, so there's nothing to keep in sync
+     *  between two inputs: `'none'` is what used to be `dragEnabled: false`. */
+    movementRestriction = input('both', ...(ngDevMode ? [{ debugName: "movementRestriction" }] : []));
     wipLimitBehavior = input('warn', ...(ngDevMode ? [{ debugName: "wipLimitBehavior" }] : []));
     /** Lets columns themselves be dragged into a new order, via their header
-     *  (`.bk-kanban-column-header` is the drag handle — a card's own drag
+     *  (`.bk-kanban-column-header` is the drag handle — an item's own drag
      *  keeps working independently, since it's a separate, unconnected drop
      *  list one level down). Off by default: reordering the board's own
-     *  columns is a bigger commitment than reordering cards within it, and not
+     *  columns is a bigger commitment than reordering items within it, and not
      *  every consumer wants a "To do / In progress / Done" pipeline to be
-     *  rearrangeable. `columns` is mutated in place the same way `cards` is
-     *  (see the component doc) — persisting the new order, if it needs to be,
-     *  is the host's job, done from `columnMoved`. */
-    columnDragEnabled = input(false, ...(ngDevMode ? [{ debugName: "columnDragEnabled" }] : []));
+     *  rearrangeable. */
+    dragColumn = input(false, ...(ngDevMode ? [{ debugName: "dragColumn" }] : []));
+    /** How much a column-reorder `columnsChanged` emission carries — see
+     *  `BkKanbanColumnReorderPayload`. Only affects column reordering; every
+     *  other operation always emits complete columns regardless. */
+    columnReorderPayload = input('complete', ...(ngDevMode ? [{ debugName: "columnReorderPayload" }] : []));
+    /** Off by default: a cross-column drop commits immediately, exactly like
+     *  a same-column reorder — `itemMoveBetweenColumns` never fires, and
+     *  there's nothing to bind. Turn this on to gate cross-column moves behind
+     *  that event instead — see its own doc comment and `onItemDrop` for the
+     *  full validate-before-commit flow this switches on. */
+    validateMove = input(false, ...(ngDevMode ? [{ debugName: "validateMove" }] : []));
     /** See `BkKanbanColumnScrollMode`. */
-    columnScrollMode = input('body', ...(ngDevMode ? [{ debugName: "columnScrollMode" }] : []));
-    /** Extra class(es) appended to the board's own wrapper — `.bk-kanban-board`
-     *  in `kanban.html`, the element that directly contains the scrollable
-     *  region holding every column. Same idea as `columnClass`/`colHeaderClass`
-     *  one level down: it only adds classes, nothing here replaces bk-kanban's
-     *  own layout.
+    columnScrollMode = input('column', ...(ngDevMode ? [{ debugName: "columnScrollMode" }] : []));
+    /** Extra class(es) appended to the board's own wrapper — the element that
+     *  directly contains the scrollable region holding every column. Same
+     *  idea as `columnClass`/`colHeaderClass` one level down: it only adds
+     *  classes, nothing here replaces bk-kanban's own layout.
      *
-     *  Deliberately kept off the *scrolling* element itself
-     *  (`.bk-kanban`, one level further in): a `padding` or `border` in here
-     *  would otherwise become part of what has to be scrolled past, and change
-     *  where the scrollbar itself ends up sitting relative to the columns —
-     *  this wrapper exists specifically so `boardClass` can decorate (a
-     *  background, a border, padding around the whole board) without ever
-     *  touching the box CDK and `columnScrollMode` are actually scrolling. */
+     *  Deliberately kept off the *scrolling* element itself: a `padding` or
+     *  `border` in here would otherwise become part of what has to be
+     *  scrolled past, and change where the scrollbar itself ends up sitting
+     *  relative to the columns — this wrapper exists specifically so
+     *  `boardClass` can decorate (a background, a border, padding around the
+     *  whole board) without ever touching the box CDK and `columnScrollMode`
+     *  are actually scrolling. */
     boardClass = input('', ...(ngDevMode ? [{ debugName: "boardClass" }] : []));
-    /** Identity for `@for`'s `track`. Defaults to position in the rendered column. */
+    /** Identity for `@for`'s `track`. Defaults to `card.id` — every
+     *  `ColumnItem` is guaranteed to have one. */
     trackBy = input(null, ...(ngDevMode ? [{ debugName: "trackBy" }] : []));
-    /** Rendered in a fixed slot in every column's header — e.g. an "add card"
-     *  button. Receives `BkKanbanColumnActionsContext`. The board owns where it
-     *  sits; the consumer owns what it does. */
+    /** Rendered in a fixed slot in every column's header, alongside the
+     *  built-in add button when `showAddItem` is on. Receives
+     *  `BkKanbanColumnActionsContext` — its `addItem` is the same logic the
+     *  built-in button calls, so a fully custom header action can drive it
+     *  too instead of reimplementing id generation / limit checks. */
     columnHeaderActionsTemplate = input(null, ...(ngDevMode ? [{ debugName: "columnHeaderActionsTemplate" }] : []));
-    /** Overrides the built-in "No cards" placeholder for an empty column.
-     *  Receives `BkKanbanEmptyStateContext`. Takes priority over both
-     *  `noDataText` and a column's own `noDataText` — see `emptyStateText`. */
+    /** Overrides the built-in empty-column placeholder. Receives
+     *  `BkKanbanEmptyStateContext`. Takes priority over both `emptyMessage`
+     *  and a column's own `emptyMessage`. */
     emptyStateTemplate = input(null, ...(ngDevMode ? [{ debugName: "emptyStateTemplate" }] : []));
-    /** Board-wide placeholder text for an empty column, used whenever a column
-     *  doesn't set its own `noDataText`. Only read when `emptyStateTemplate`
-     *  isn't supplied — see `emptyStateText`. */
-    noDataText = input('No cards', ...(ngDevMode ? [{ debugName: "noDataText" }] : []));
-    /** Whether a column flags an over-limit drop while still dragging (`'live'`)
-     *  or only once the drop is attempted (`'on-drop'`). See the doc block on
-     *  `isLiveOverLimit` for how the two relate to `wipLimitBehavior`. */
+    /** Board-wide placeholder text for an empty column, used whenever a
+     *  column doesn't set its own `emptyMessage`. Only read when
+     *  `emptyStateTemplate` isn't supplied. */
+    emptyMessage = input('No cards', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    /** Whether a column flags an over-limit drop while still dragging
+     *  (`'live'`) or only once the drop is attempted (`'on-drop'`). */
     dragPreviewMode = input('live', ...(ngDevMode ? [{ debugName: "dragPreviewMode" }] : []));
+    /** Shows a built-in "+" button in every column's header (unless that
+     *  column's own `allowAdd` is `false`) when true. It calls the same
+     *  `addItem` logic exposed to `columnHeaderActionsTemplate` — with a
+     *  default `{ label: 'New item' }` — so out-of-the-box adding works with
+     *  zero template configuration. Renders alongside, not instead of,
+     *  `columnHeaderActionsTemplate` when both are supplied. */
+    showAddItem = input(false, ...(ngDevMode ? [{ debugName: "showAddItem" }] : []));
+    /** Shows a built-in remove button on every card (unless that card's
+     *  column has `allowRemove: false`) when true — board-owned chrome, not
+     *  part of `cardTemplate`, so click/drag isolation is guaranteed by the
+     *  board itself rather than left to every consumer's own template to get
+     *  right. */
+    showRemoveItem = input(false, ...(ngDevMode ? [{ debugName: "showRemoveItem" }] : []));
     /* ================= Outputs ================= */
-    cardMoved = output();
-    cardClicked = output();
+    /** Fires after any operation that changes the board. See
+     *  `BkKanbanColumnsChangedEvent`'s doc comment for how to tell which
+     *  operation happened from the metadata field a returned column carries. */
+    columnsChanged = output();
     columnLimitExceeded = output();
-    /** A column reorder completed — see `columnDragEnabled`. */
-    columnMoved = output();
+    itemClicked = output();
+    /** Fires for a cross-column drag before any state changes — only when
+     *  `validateMove` is on; see the event's own doc comment
+     *  and `onItemDrop`. Must be bound (and resolved) once that's on, or
+     *  cross-column drag-and-drop stops having any effect. */
+    itemMoveBetweenColumns = output();
     /** Reserved — see `BkKanbanColumnActionsContext.trigger`. Most consumers
      *  bind a click handler directly on their own header-actions template and
      *  never reach for this. */
     columnActionTriggered = output();
-    /* ================= Grouping ================= */
+    /* ================= Board state ================= */
     /**
-     * Bumped after every in-place mutation (`setColumnId`, `renumber`) so
-     * `grouped` re-runs even though neither `cards()`'s array identity nor any
-     * card's object identity changed — the same trick as the table demo's
-     * `pgSelectionTick`, needed for exactly the same reason: signals only
-     * notice a new reference, and mutating fields in place is what lets a drop
-     * redraw in the right place without waiting on the host to hand back a
-     * whole new array.
+     * Bumped after every in-place mutation so the template re-reads
+     * `boardColumns()` even though neither `columns()`'s own array identity
+     * nor any column/item's object identity necessarily changed — mutating
+     * fields in place is what lets a drop/add/remove redraw in the right
+     * place without waiting on the host to hand back a whole new array.
      */
     structureTick = signal(0, ...(ngDevMode ? [{ debugName: "structureTick" }] : []));
-    /** Cards grouped by column id, each group in `order` order when present
-     *  (falling back to their sequence in `cards()` otherwise). Cards whose
-     *  resolved column id matches no known column are dropped silently rather
-     *  than rendered nowhere. */
-    grouped = computed(() => {
+    /** What the template actually iterates — a signal that re-evaluates on
+     *  every `structureTick` bump, so in-place mutations to `columns()`'s own
+     *  items/sortOrder are always picked up. */
+    boardColumns = computed(() => {
         this.structureTick();
-        const map = new Map();
-        for (const column of this.columns())
-            map.set(column.id, []);
-        for (const card of this.cards()) {
-            const list = map.get(this.resolveColumnId(card));
-            list?.push(card);
-        }
-        for (const list of map.values()) {
-            if (list.some((c) => this.cardOrder(c) !== null)) {
-                list.sort((a, b) => (this.cardOrder(a) ?? 0) - (this.cardOrder(b) ?? 0));
-            }
-        }
-        return map;
-    }, ...(ngDevMode ? [{ debugName: "grouped" }] : []));
-    /** The cards to render for one column, in display order. */
-    cardsFor(columnId) {
-        return this.grouped().get(columnId) ?? [];
-    }
-    resolveColumnId(card) {
-        const field = this.columnIdField();
-        return typeof field === 'function' ? field(card) : card[field];
-    }
-    cardOrder(card) {
-        const value = card['order'];
-        return typeof value === 'number' ? value : null;
-    }
+        return this.columns();
+    }, ...(ngDevMode ? [{ debugName: "boardColumns" }] : []));
     resolveTrackBy(card, index) {
         const fn = this.trackBy();
-        return fn ? fn(card) : index;
+        return fn ? fn(card) : card.id;
+    }
+    columnById(id) {
+        return this.boardColumns().find((c) => c.id === id);
     }
     /* ================= Column-level view state ================= */
     /** Column-header count badge, flagged once the column is over its limit —
@@ -14244,18 +14252,29 @@ class BkKanban {
      *  column get there and `'none'` treats the number as pure information. */
     isColumnOverLimit(column) {
         return (this.wipLimitBehavior() === 'warn' &&
-            column.wipLimit != null &&
-            this.cardsFor(column.id).length > column.wipLimit);
+            column.limit != null &&
+            column.items.length > column.limit);
     }
     /** "3" with no limit, "3 / 5" with one — the header count badge's label. */
     columnCountLabel(column) {
-        const count = this.cardsFor(column.id).length;
-        return column.wipLimit != null ? `${count} / ${column.wipLimit}` : `${count}`;
+        return column.limit != null ? `${column.items.length} / ${column.limit}` : `${column.items.length}`;
+    }
+    /** Whether the built-in "+" button should render for this column —
+     *  `showAddItem` board-wide, unless this column opted itself out. */
+    showAddButton(column) {
+        return this.showAddItem() && column.allowAdd !== false;
+    }
+    /** Whether the built-in remove button should render for this card's
+     *  column — `showRemoveItem` board-wide, unless this column opted
+     *  itself out. */
+    showRemoveButton(column) {
+        return this.showRemoveItem() && column.allowRemove !== false;
     }
     columnActionsContext(column) {
         return {
             $implicit: column,
             column,
+            addItem: (item) => this.addItem(column.id, item),
             trigger: () => this.columnActionTriggered.emit({ columnId: column.id })
         };
     }
@@ -14263,49 +14282,65 @@ class BkKanban {
         return { $implicit: column, column };
     }
     /** Text for the built-in empty-column placeholder: a column's own
-     *  `noDataText` when it sets one, else the board-wide `noDataText` input.
-     *  Only consulted when `emptyStateTemplate` isn't supplied — the template
-     *  wins outright once given, exactly like `emptyStateContext` itself. */
-    emptyStateText(column) {
-        return column.noDataText ?? this.noDataText();
+     *  `emptyMessage` when it sets one, else the board-wide `emptyMessage`
+     *  input. Only consulted when `emptyStateTemplate` isn't supplied. */
+    emptyMessageFor(column) {
+        return column.emptyMessage ?? this.emptyMessage();
     }
     cardContext(card, column, index) {
-        return { $implicit: card, card, column, index };
+        return {
+            $implicit: card,
+            card,
+            column,
+            index,
+            removeItem: () => this.removeItem(column.id, card.id)
+        };
     }
-    /** Which columns a column's drop list connects to, per `dragScope`. */
+    /** Whether any card dragging is active at all — false only for
+     *  `movementRestriction: 'none'`. Drives both the column body's own
+     *  `cdkDropListDisabled` and each card's own `cdkDragDisabled`. */
+    dragActive = computed(() => this.movementRestriction() !== 'none', ...(ngDevMode ? [{ debugName: "dragActive" }] : []));
+    /** Which columns a column's drop list connects to, per `movementRestriction`. */
     connectedListIds(columnId) {
-        if (!this.dragEnabled() || this.dragScope() === 'same')
+        const restriction = this.movementRestriction();
+        if (restriction === 'none' || restriction === 'within')
             return [];
-        return this.columns()
+        return this.boardColumns()
             .filter((c) => c.id !== columnId)
             .map((c) => c.id);
     }
-    /** `'cross'` means *only* moves between columns — reordering within one has
-     *  to be switched off at the list level, since a scoped-out `connectedTo`
-     *  alone still leaves the list free to sort itself. */
-    sortingDisabled = computed(() => this.dragScope() === 'cross', ...(ngDevMode ? [{ debugName: "sortingDisabled" }] : []));
+    /** `'between'` means *only* moves between columns — reordering
+     *  within one has to be switched off at the list level, since a
+     *  scoped-out `connectedTo` alone still leaves the list free to sort
+     *  itself. `'none'` doesn't need to appear here too: `cdkDropListDisabled`
+     *  (bound to `dragActive`) already switches the whole list off, so whether
+     *  sorting specifically is "disabled" on top of that is moot. */
+    sortingDisabled = computed(() => this.movementRestriction() === 'between', ...(ngDevMode ? [{ debugName: "sortingDisabled" }] : []));
     /* ================= Column-level drag (reordering columns) ================= */
     /**
-     * `columns` is reordered in place — same trick as `cards` (see the
+     * `columns` is reordered in place — same trick as items (see the
      * component doc): the array reference the host handed in is mutated
-     * directly (`moveItemInArray`) rather than swapped for a new one, so the
-     * next render just reflects the new order. There's no `structureTick`-style
-     * signal to bump here the way card moves need one — nothing derives
-     * columns through a `computed()` the way `cardsFor` derives through
-     * `grouped`; the template reads `columns()` directly in its `@for`, so the
-     * drop event's own change detection pass is enough.
+     * directly (`moveItemInArray`) rather than swapped for a new one.
+     * `sortOrder` is then renumbered for the whole array, and — unlike every
+     * other operation, which reports only the column(s) actually affected —
+     * *every* column in the board is reported here, in its resulting order,
+     * shaped per `columnReorderPayload`: consumers persisting a full column
+     * order need to see the whole list, not just the entries that happened to
+     * shift.
      */
     onColumnDrop(event) {
-        if (!this.columnDragEnabled() || event.previousIndex === event.currentIndex)
+        if (!this.dragColumn() || event.previousIndex === event.currentIndex)
             return;
         const columns = this.columns();
-        const moved = columns[event.previousIndex];
         moveItemInArray(columns, event.previousIndex, event.currentIndex);
-        this.columnMoved.emit({
-            columnId: moved.id,
-            fromIndex: event.previousIndex,
-            toIndex: event.currentIndex
+        columns.forEach((c, i) => {
+            c.sortOrder = i + 1;
         });
+        this.structureTick.update((n) => n + 1);
+        const payload = this.columnReorderPayload() === 'summary'
+            ? columns.map((c) => ({ id: c.id, sortOrder: c.sortOrder }))
+            : columns.map((c) => ({ ...c }));
+        this.columnsChanged.emit({ columns: payload });
     }
     /* ================= Drag state (for the live WIP preview) ================= */
     dragSourceColumnId = signal(null, ...(ngDevMode ? [{ debugName: "dragSourceColumnId" }] : []));
@@ -14318,19 +14353,19 @@ class BkKanban {
         this.hoveredOverLimitColumnId.set(null);
     }
     /**
-     * Live WIP-limit preview (§12 of the spec): as the dragged card enters a
-     * column, work out whether *landing* here would exceed its `wipLimit` and
-     * flag it immediately — before release, and independent of
-     * `wipLimitBehavior`, which only governs what happens once the card is
-     * actually dropped. A card re-entering its own source column doesn't grow
-     * that column's count, so only a genuine cross-column entry counts as +1.
+     * Live WIP-limit preview: as the dragged item enters a column, work out
+     * whether *landing* here would exceed its `limit` and flag it immediately
+     * — before release, and independent of `wipLimitBehavior`, which only
+     * governs what happens once the item is actually dropped. An item
+     * re-entering its own source column doesn't grow that column's count, so
+     * only a genuine cross-column entry counts as +1.
      */
     onListEntered(event, column) {
-        if (this.dragPreviewMode() !== 'live' || column.wipLimit == null)
+        if (this.dragPreviewMode() !== 'live' || column.limit == null)
             return;
         const enteringFromElsewhere = this.dragSourceColumnId() !== column.id;
         const wouldBeCount = event.container.data.length + (enteringFromElsewhere ? 1 : 0);
-        this.hoveredOverLimitColumnId.set(wouldBeCount > column.wipLimit ? column.id : null);
+        this.hoveredOverLimitColumnId.set(wouldBeCount > column.limit ? column.id : null);
     }
     onListExited(column) {
         if (this.hoveredOverLimitColumnId() === column.id)
@@ -14339,87 +14374,233 @@ class BkKanban {
     isLiveOverLimit(column) {
         return this.hoveredOverLimitColumnId() === column.id;
     }
-    /* ================= Drop handling ================= */
-    onDrop(event, column) {
+    /* ================= Item drop handling ================= */
+    renumber(items) {
+        items.forEach((item, index) => {
+            item.sortOrder = index + 1;
+        });
+    }
+    /**
+     * Same-column reorder commits immediately (nothing to validate — the
+     * column's own membership never changes) and reports the one affected
+     * column with its complete, re-ordered `items`. A genuine cross-column
+     * drop is a different story: see the second half of this method and
+     * `itemMoveBetweenColumns`'s own doc comment for why it does *not*
+     * mutate anything here.
+     */
+    onItemDrop(event, column) {
         this.dragSourceColumnId.set(null);
         this.hoveredOverLimitColumnId.set(null);
-        if (!this.dragEnabled())
+        if (!this.dragActive())
             return;
         const fromColumnId = event.previousContainer.id;
         const toColumnId = event.container.id;
-        const card = event.item.data;
+        const item = event.item.data;
         if (fromColumnId === toColumnId) {
             if (event.previousIndex === event.currentIndex)
                 return;
-            const list = this.cardsFor(toColumnId);
-            moveItemInArray(list, event.previousIndex, event.currentIndex);
-            this.renumber(list);
+            const items = column.items;
+            moveItemInArray(items, event.previousIndex, event.currentIndex);
+            this.renumber(items);
             this.structureTick.update((n) => n + 1);
-            this.cardMoved.emit({ card, fromColumnId, toColumnId, newIndex: event.currentIndex });
+            this.columnsChanged.emit({ columns: [{ ...column }] });
             return;
         }
-        const targetList = this.cardsFor(toColumnId);
-        const attemptedCount = targetList.length + 1;
-        const wipLimit = column.wipLimit;
-        const wouldExceed = wipLimit != null && attemptedCount > wipLimit;
+        const fromColumn = this.columnById(fromColumnId);
+        const toColumn = this.columnById(toColumnId) ?? column;
+        if (!fromColumn)
+            return;
+        const attemptedCount = toColumn.items.length + 1;
+        const limit = toColumn.limit;
+        const wouldExceed = limit != null && attemptedCount > limit;
         if (wouldExceed) {
-            this.columnLimitExceeded.emit({ columnId: toColumnId, wipLimit: wipLimit, attemptedCount });
+            this.columnLimitExceeded.emit({ columnId: toColumnId, limit: limit, attemptedCount });
         }
         if (wouldExceed && this.wipLimitBehavior() === 'block') {
-            // Rejected: nothing below is mutated, so the next render finds the card
-            // still exactly where `cards()` says it is — the same "snap back" any
-            // cancelled CDK drag shows, not a bespoke undo.
-            return;
-        }
-        const sourceList = this.cardsFor(fromColumnId);
-        const fromIndex = sourceList.indexOf(card);
+            // Rejected before validation is even asked for: nothing below runs,
+            // so the next render finds the item still exactly where `columns()`
+            // says it is — the same "snap back" any cancelled CDK drag shows.
+            return;
+        }
+        const targetIndex = event.currentIndex;
+        // Opt-in gate: off by default, a cross-column drop commits right here,
+        // same as a same-column reorder — no event, nothing to wait for.
+        if (!this.validateMove()) {
+            this.commitCrossColumnMove(fromColumn, toColumn, item, targetIndex);
+            return;
+        }
+        // ---- Pre-drop validation (§5-§9, §23), only once opted into ----
+        //
+        // Everything needed to describe the move is worked out now, from
+        // `event`'s own indices — CDK reports `currentIndex` as the intended
+        // position within the destination list purely from the drag's visual
+        // state, so it's already meaningful even though `toColumn.items` itself
+        // hasn't been touched yet. Nothing below this point mutates board state
+        // — that only happens inside `commitCrossColumnMove`, and only once
+        // `resolve` is actually called. Until then (and forever, if it's never
+        // called) `fromColumn`/`toColumn` are untouched, so the item simply
+        // stays rendered exactly where `columns()` already says it is — "restore
+        // to original position" on failure is this doing nothing, not a
+        // separate undo step.
+        const targetItem = toColumn.items[targetIndex] ?? toColumn.items[targetIndex - 1] ?? null;
+        let settled = false;
+        this.itemMoveBetweenColumns.emit({
+            item,
+            sourceColumn: { ...fromColumn },
+            destinationColumn: { ...toColumn },
+            targetItem,
+            targetIndex,
+            resolve: (result) => {
+                if (settled)
+                    return;
+                settled = true;
+                if (result?.success) {
+                    this.commitCrossColumnMove(fromColumn, toColumn, item, targetIndex);
+                }
+                // Failure: intentionally nothing else to do — see comment above.
+            }
+        });
+    }
+    /** The actual cross-column mutation, run only once `resolve({ success:
+     *  true })` comes back from `itemMoveBetweenColumns` — see `onItemDrop`. */
+    commitCrossColumnMove(fromColumn, toColumn, item, targetIndex) {
+        const fromIndex = fromColumn.items.indexOf(item);
         if (fromIndex < 0)
-            return; // Column and card disagree about where it lives; leave state alone.
-        sourceList.splice(fromIndex, 1);
-        targetList.splice(event.currentIndex, 0, card);
-        this.setColumnId(card, toColumnId);
-        this.renumber(sourceList);
-        this.renumber(targetList);
+            return; // Column and item disagree about where it lives; leave state alone.
+        fromColumn.items.splice(fromIndex, 1);
+        const insertIndex = Math.min(targetIndex, toColumn.items.length);
+        toColumn.items.splice(insertIndex, 0, item);
+        item.parentId = toColumn.id;
+        this.renumber(fromColumn.items);
+        this.renumber(toColumn.items);
+        this.structureTick.update((n) => n + 1);
+        this.columnsChanged.emit({
+            columns: [
+                { ...fromColumn, sentChildId: item.id },
+                { ...toColumn, receivedChildId: item.id }
+            ]
+        });
+    }
+    /* ================= Add / remove ================= */
+    generateId() {
+        return typeof crypto !== 'undefined' && crypto.randomUUID
+            ? crypto.randomUUID()
+            : `item-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    }
+    /** Adds a new item to a column — the logic backing both the built-in "+"
+     *  button (`showAddItem`) and `BkKanbanColumnActionsContext.addItem`
+     *  for a fully custom header template. Supply at least `label`; an `id`
+     *  given is used as-is, otherwise one is generated. Respects
+     *  `wipLimitBehavior` exactly like a cross-column drop does, and does
+     *  nothing at all for a column with `allowAdd: false` or an empty/missing
+     *  `label` — see §11. */
+    addItem(columnId, data) {
+        const column = this.columnById(columnId);
+        if (!column || column.allowAdd === false)
+            return;
+        if (!data?.label || !data.label.trim())
+            return;
+        const attemptedCount = column.items.length + 1;
+        const limit = column.limit;
+        const wouldExceed = limit != null && attemptedCount > limit;
+        if (wouldExceed) {
+            this.columnLimitExceeded.emit({ columnId, limit: limit, attemptedCount });
+        }
+        if (wouldExceed && this.wipLimitBehavior() === 'block')
+            return;
+        const id = data.id ?? this.generateId();
+        const item = { ...data, id, sortOrder: column.items.length + 1, parentId: columnId };
+        column.items.push(item);
         this.structureTick.update((n) => n + 1);
-        this.cardMoved.emit({ card, fromColumnId, toColumnId, newIndex: event.currentIndex });
-    }
-    setColumnId(card, columnId) {
-        const field = this.columnIdField();
-        // A resolver function has nowhere to write back to — the host owns that
-        // mapping and is expected to apply the move from `cardMoved` itself.
-        if (typeof field === 'string')
-            card[field] = columnId;
-    }
-    renumber(list) {
-        list.forEach((card, index) => {
-            card['order'] = index;
+        this.columnsChanged.emit({
+            columns: [{ ...column, newAddedItemId: id, newItemCreated: true }]
         });
     }
-    /* ================= Click handling (§5) ================= */
+    /** Removes an item from a column — the logic backing both the built-in
+     *  remove button (`showRemoveItem`) and `BkKanbanCardContext.removeItem`
+     *  for a fully custom card body. Does nothing for a column with
+     *  `allowRemove: false`, or if the item isn't actually there. */
+    removeItem(columnId, itemId) {
+        const column = this.columnById(columnId);
+        if (!column || column.allowRemove === false)
+            return;
+        const index = column.items.findIndex((i) => i.id === itemId);
+        if (index < 0)
+            return;
+        column.items.splice(index, 1);
+        this.renumber(column.items);
+        this.structureTick.update((n) => n + 1);
+        this.columnsChanged.emit({ columns: [{ ...column, removedItemId: itemId }] });
+    }
+    onAddButtonClick(column) {
+        this.addItem(column.id, { label: 'New item' });
+    }
+    /** The remove button's own click handler. It's a `bk-icon-button`, so its
+     *  own `(clicked)` output only ever carries a boolean, not the originating
+     *  event — isolation happens entirely in the template instead, via native
+     *  `mousedown`/`pointerdown`/`click` listeners bound directly on the
+     *  `<bk-icon-button>` host: `mousedown`/`pointerdown` are stopped before
+     *  CDK's drag-start detection (which listens on the card itself, an
+     *  ancestor of this button) ever sees the press, and stopping `click` too
+     *  keeps it from also reaching `onItemClick` on the card underneath. See
+     *  §18/§12 of the spec this shipped against. */
+    onRemoveButtonClick(column, card) {
+        this.removeItem(column.id, card.id);
+    }
+    /* ================= Remove button hover (icon swap) =================
+     *
+     * `bk-icon-button`'s own stylesheet defines no real `:hover` state (only
+     * `active:`/`focus-visible:`) — the pattern this codebase already uses
+     * instead, for the same "×" affordance elsewhere (see the fleet module's
+     * own close button), is to swap `variant` (from `'none'`, transparent, to
+     * `'primary'`, solid) *and* the icon asset itself (a black icon in the
+     * `'none'` state needs to become the white variant once the background
+     * goes solid) on `(hovered)`, rather than reaching for a CSS override.
+     *
+     * Tracked per item id, not a single shared boolean: there's one remove
+     * button per card, all sharing this same board instance, so "which one"
+     * has to be part of the state. The add button stays a plain `bk-button`
+     * (see kanban.html) and doesn't need this.
+     */
+    hoveredRemoveItemId = signal(null, ...(ngDevMode ? [{ debugName: "hoveredRemoveItemId" }] : []));
+    removeButtonVariant(card) {
+        return this.hoveredRemoveItemId() === card.id ? 'primary' : 'none';
+    }
+    removeButtonIcon(card) {
+        return this.hoveredRemoveItemId() === card.id
+            ? '../../../../assets/images/icons/global/popup-cross-white.svg'
+            : '../../../../assets/images/icons/global/popup-cross.svg';
+    }
+    onRemoveButtonHover(card, hovered) {
+        this.hoveredRemoveItemId.set(hovered ? card.id : null);
+    }
+    /* ================= Click handling ================= */
     /**
      * One listener per card resolves both the whole-card click and every
      * `[bkKanbanClickTarget]` region: `closest()` from the actual event target
      * finds the nearest marked ancestor within this card, or there isn't one
      * and it's a plain card click. Either way this fires exactly once — never
-     * once for the region and again for the card underneath it.
+     * once for the region and again for the card underneath it. The remove
+     * button (when shown) stops its own click from ever reaching here — see
+     * `onRemoveButtonClick`.
      */
-    onCardClick(event, card) {
+    onItemClick(event, card) {
         const wrapper = event.currentTarget;
         const marked = event.target?.closest('[data-bk-kanban-click-target]');
         const target = marked && wrapper.contains(marked)
             ? (marked.dataset['bkKanbanClickTarget'] ?? 'card')
             : 'card';
-        this.cardClicked.emit({ card, target });
+        this.itemClicked.emit({ item: card, target });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkKanban, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkKanban, isStandalone: true, selector: "bk-kanban", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, cards: { classPropertyName: "cards", publicName: "cards", isSignal: true, isRequired: true, transformFunction: null }, cardTemplate: { classPropertyName: "cardTemplate", publicName: "cardTemplate", isSignal: true, isRequired: true, transformFunction: null }, columnIdField: { classPropertyName: "columnIdField", publicName: "columnIdField", isSignal: true, isRequired: false, transformFunction: null }, dragEnabled: { classPropertyName: "dragEnabled", publicName: "dragEnabled", isSignal: true, isRequired: false, transformFunction: null }, dragScope: { classPropertyName: "dragScope", publicName: "dragScope", isSignal: true, isRequired: false, transformFunction: null }, wipLimitBehavior: { classPropertyName: "wipLimitBehavior", publicName: "wipLimitBehavior", isSignal: true, isRequired: false, transformFunction: null }, columnDragEnabled: { classPropertyName: "columnDragEnabled", publicName: "columnDragEnabled", isSignal: true, isRequired: false, transformFunction: null }, columnScrollMode: { classPropertyName: "columnScrollMode", publicName: "columnScrollMode", isSignal: true, isRequired: false, transformFunction: null }, boardClass: { classPropertyName: "boardClass", publicName: "boardClass", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, columnHeaderActionsTemplate: { classPropertyName: "columnHeaderActionsTemplate", publicName: "columnHeaderActionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyStateTemplate: { classPropertyName: "emptyStateTemplate", publicName: "emptyStateTemplate", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, dragPreviewMode: { classPropertyName: "dragPreviewMode", publicName: "dragPreviewMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardMoved: "cardMoved", cardClicked: "cardClicked", columnLimitExceeded: "columnLimitExceeded", columnMoved: "columnMoved", columnActionTriggered: "columnActionTriggered" }, host: { classAttribute: "bk-kanban-host" }, exportAs: ["bkKanban"], ngImport: i0, template: "<div class=\"bk-kanban-board\" [class]=\"boardClass()\">\r\n  <div\r\n    class=\"bk-kanban\"\r\n    [class.bk-kanban--scroll-wrapper]=\"columnScrollMode() === 'wrapper'\"\r\n    cdkDropList\r\n    cdkDropListOrientation=\"horizontal\"\r\n    [cdkDropListData]=\"columns()\"\r\n    [cdkDropListDisabled]=\"!columnDragEnabled()\"\r\n    (cdkDropListDropped)=\"onColumnDrop($event)\"\r\n  >\r\n    @for (column of columns(); track column.id) {\r\n      <div\r\n        class=\"bk-kanban-column\"\r\n        cdkDrag\r\n        [cdkDragData]=\"column\"\r\n        [cdkDragDisabled]=\"!columnDragEnabled()\"\r\n        [class]=\"column.columnClass\"\r\n        [class.bk-kanban-column-warn]=\"isColumnOverLimit(column)\"\r\n        [class.bk-kanban-column-live-over]=\"isLiveOverLimit(column)\"\r\n      >\r\n        <div class=\"bk-kanban-column-header\" cdkDragHandle [class]=\"column.colHeaderClass\">\r\n          <span class=\"bk-kanban-column-title\">{{ column.label }}</span>\r\n          <bk-badge\r\n            class=\"bk-kanban-column-count\"\r\n            [label]=\"columnCountLabel(column)\"\r\n            size=\"sm\"\r\n            [color]=\"isColumnOverLimit(column) || isLiveOverLimit(column) ? 'Warning' : 'Gray'\"\r\n          ></bk-badge>\r\n\r\n          @if (columnHeaderActionsTemplate(); as actionsTpl) {\r\n            <div class=\"bk-kanban-column-actions\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"actionsTpl\"\r\n                [ngTemplateOutletContext]=\"columnActionsContext(column)\"\r\n              ></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        <div\r\n          class=\"bk-kanban-column-body\"\r\n          cdkDropList\r\n          [id]=\"column.id\"\r\n          [cdkDropListData]=\"cardsFor(column.id)\"\r\n          [cdkDropListConnectedTo]=\"connectedListIds(column.id)\"\r\n          [cdkDropListSortingDisabled]=\"sortingDisabled()\"\r\n          [cdkDropListDisabled]=\"!dragEnabled()\"\r\n          (cdkDropListDropped)=\"onDrop($event, column)\"\r\n          (cdkDropListEntered)=\"onListEntered($event, column)\"\r\n          (cdkDropListExited)=\"onListExited(column)\"\r\n        >\r\n          @if (cardsFor(column.id).length === 0) {\r\n            <div class=\"bk-kanban-empty\">\r\n              @if (emptyStateTemplate(); as emptyTpl) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"emptyTpl\"\r\n                  [ngTemplateOutletContext]=\"emptyStateContext(column)\"\r\n                ></ng-container>\r\n              } @else {\r\n                <span class=\"bk-kanban-empty-text\">{{ emptyStateText(column) }}</span>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @for (card of cardsFor(column.id); track resolveTrackBy(card, $index); let i = $index) {\r\n            <div\r\n              class=\"bk-kanban-card\"\r\n              cdkDrag\r\n              [cdkDragData]=\"card\"\r\n              [cdkDragDisabled]=\"!dragEnabled()\"\r\n              (cdkDragStarted)=\"onDragStarted(column)\"\r\n              (cdkDragEnded)=\"onDragEnded()\"\r\n              (click)=\"onCardClick($event, card)\"\r\n            >\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"cardTemplate()\"\r\n                [ngTemplateOutletContext]=\"cardContext(card, column, i)\"\r\n              ></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".bk-kanban-host,.bk-kanban-board{display:block;height:100%}.bk-kanban{@apply flex items-stretch gap-4 w-full h-full overflow-x-auto;scroll-snap-type:x proximity}.bk-kanban--scroll-wrapper{align-items:flex-start;overflow-y:auto}.bk-kanban--scroll-wrapper .bk-kanban-column-body{overflow-y:visible}.bk-kanban-column{@apply flex flex-col shrink-0 w-[300px] max-w-[85vw] rounded-xl border border-[#EBEDF3] overflow-hidden;background:var(--bk-kanban-column-bg, #f9fafa);scroll-snap-align:start}.bk-kanban-column-header{@apply flex items-center justify-between gap-2 px-3 py-2.5;background:var(--bk-kanban-header-bg, #f9fafa);border-bottom:1px solid #ebedf3}.bk-kanban-column:not(.cdk-drag-disabled)>.bk-kanban-column-header{cursor:grab}.bk-kanban-column.cdk-drag-dragging>.bk-kanban-column-header{cursor:grabbing}.bk-kanban-column-title{@apply text-[13px] font-semibold text-[#15191E] truncate;}.bk-kanban-column-count{@apply shrink-0;}.bk-kanban-column-actions{@apply shrink-0 flex items-center;}.bk-kanban-column-body{@apply flex-1 flex flex-col gap-2 p-2.5 overflow-y-auto;min-height:96px}.bk-kanban-empty{@apply flex flex-1 flex-col items-center justify-center py-6 text-center;}.bk-kanban-empty-text{@apply text-xs font-medium text-[#78829D];}.bk-kanban-card{@apply bg-white rounded-lg border border-[#EBEDF3] p-3 cursor-pointer;box-shadow:0 1px 2px #1018280a;transition:box-shadow .15s ease,border-color .15s ease}.bk-kanban-card:hover{@apply border-[#C4CADA];box-shadow:0 2px 6px #10182814}.bk-kanban-card.cdk-drag-dragging{transition:none}.bk-kanban-column-warn{@apply border-amber-300 bg-amber-50;}.bk-kanban-column-warn .bk-kanban-column-header{@apply bg-amber-50 border-amber-200;}.bk-kanban-column-live-over{@apply border-amber-400 bg-amber-50;outline:2px dashed theme(\"colors.amber.400\");outline-offset:-2px}.bk-kanban-column-live-over .bk-kanban-column-header{@apply bg-amber-50 border-amber-200;}.bk-kanban-card.cdk-drag-preview{@apply rounded-lg;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:grabbing}.bk-kanban-card.cdk-drag-placeholder{@apply border-dashed border-[#C4CADA] bg-[#F1F2F4];box-shadow:none;opacity:.6}.bk-kanban-column-body.cdk-drop-list-dragging .bk-kanban-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.bk-kanban-column.cdk-drag-preview{box-shadow:0 8px 10px -6px #0003,0 20px 25px -5px #00000024}.bk-kanban-column.cdk-drag-placeholder{@apply border-dashed border-[#C4CADA] bg-[#F1F2F4];box-shadow:none;opacity:.5}.bk-kanban-column.cdk-drag-placeholder .bk-kanban-column-header,.bk-kanban-column.cdk-drag-placeholder .bk-kanban-column-body{visibility:hidden}.bk-kanban.cdk-drop-list-dragging .bk-kanban-column:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}@media (max-width: 640px){.bk-kanban-column{width:86vw}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: BkBadge, selector: "bk-badge", inputs: ["label", "variant", "color", "size", "dot", "removable", "customClass", "customBg", "customBorder", "customText"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkKanban, isStandalone: true, selector: "bk-kanban", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, cardTemplate: { classPropertyName: "cardTemplate", publicName: "cardTemplate", isSignal: true, isRequired: true, transformFunction: null }, movementRestriction: { classPropertyName: "movementRestriction", publicName: "movementRestriction", isSignal: true, isRequired: false, transformFunction: null }, wipLimitBehavior: { classPropertyName: "wipLimitBehavior", publicName: "wipLimitBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragColumn: { classPropertyName: "dragColumn", publicName: "dragColumn", isSignal: true, isRequired: false, transformFunction: null }, columnReorderPayload: { classPropertyName: "columnReorderPayload", publicName: "columnReorderPayload", isSignal: true, isRequired: false, transformFunction: null }, validateMove: { classPropertyName: "validateMove", publicName: "validateMove", isSignal: true, isRequired: false, transformFunction: null }, columnScrollMode: { classPropertyName: "columnScrollMode", publicName: "columnScrollMode", isSignal: true, isRequired: false, transformFunction: null }, boardClass: { classPropertyName: "boardClass", publicName: "boardClass", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, columnHeaderActionsTemplate: { classPropertyName: "columnHeaderActionsTemplate", publicName: "columnHeaderActionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyStateTemplate: { classPropertyName: "emptyStateTemplate", publicName: "emptyStateTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, dragPreviewMode: { classPropertyName: "dragPreviewMode", publicName: "dragPreviewMode", isSignal: true, isRequired: false, transformFunction: null }, showAddItem: { classPropertyName: "showAddItem", publicName: "showAddItem", isSignal: true, isRequired: false, transformFunction: null }, showRemoveItem: { classPropertyName: "showRemoveItem", publicName: "showRemoveItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnsChanged: "columnsChanged", columnLimitExceeded: "columnLimitExceeded", itemClicked: "itemClicked", itemMoveBetweenColumns: "itemMoveBetweenColumns", columnActionTriggered: "columnActionTriggered" }, host: { classAttribute: "bk-kanban-host" }, exportAs: ["bkKanban"], ngImport: i0, template: "<div class=\"bk-kanban-board\" [class]=\"boardClass()\">\r\n  <div\r\n    class=\"bk-kanban\"\r\n    [class.bk-kanban--scroll-wrapper]=\"columnScrollMode() === 'wrapper'\"\r\n    cdkDropList\r\n    cdkDropListOrientation=\"horizontal\"\r\n    [cdkDropListData]=\"boardColumns()\"\r\n    [cdkDropListDisabled]=\"!dragColumn()\"\r\n    (cdkDropListDropped)=\"onColumnDrop($event)\"\r\n  >\r\n    @for (column of boardColumns(); track column.id) {\r\n      <div\r\n        class=\"bk-kanban-column\"\r\n        cdkDrag\r\n        [cdkDragData]=\"column\"\r\n        [cdkDragDisabled]=\"!dragColumn()\"\r\n        [class]=\"column.columnClass\"\r\n        [class.bk-kanban-column-warn]=\"isColumnOverLimit(column)\"\r\n        [class.bk-kanban-column-live-over]=\"isLiveOverLimit(column)\"\r\n      >\r\n        <div class=\"bk-kanban-column-header\" cdkDragHandle [class]=\"column.colHeaderClass\">\r\n          <span class=\"bk-kanban-column-title\">{{ column.label }}</span>\r\n          <bk-badge\r\n            class=\"bk-kanban-column-count\"\r\n            [label]=\"columnCountLabel(column)\"\r\n            size=\"sm\"\r\n            [color]=\"isColumnOverLimit(column) || isLiveOverLimit(column) ? 'Warning' : 'Gray'\"\r\n          ></bk-badge>\r\n\r\n          @if (columnHeaderActionsTemplate(); as actionsTpl) {\r\n            <div class=\"bk-kanban-column-actions\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"actionsTpl\"\r\n                [ngTemplateOutletContext]=\"columnActionsContext(column)\"\r\n              ></ng-container>\r\n            </div>\r\n          }\r\n          @if (showAddButton(column)) {\r\n            <bk-button\r\n              class=\"bk-kanban-add-btn\"\r\n              variant=\"primary\"\r\n              size=\"xxsm\"\r\n              [shadow]=\"false\"\r\n              label=\"+\"\r\n              [buttonClass]=\"'size-6 hover:bg-[#242424]'\"\r\n              [attr.aria-label]=\"'Add item to ' + column.label\"\r\n              (clicked)=\"onAddButtonClick(column)\"\r\n            ></bk-button>\r\n          }\r\n        </div>\r\n\r\n        <div\r\n          class=\"bk-kanban-column-body\"\r\n          cdkDropList\r\n          [id]=\"column.id\"\r\n          [cdkDropListData]=\"column.items\"\r\n          [cdkDropListConnectedTo]=\"connectedListIds(column.id)\"\r\n          [cdkDropListSortingDisabled]=\"sortingDisabled()\"\r\n          [cdkDropListDisabled]=\"!dragActive()\"\r\n          (cdkDropListDropped)=\"onItemDrop($event, column)\"\r\n          (cdkDropListEntered)=\"onListEntered($event, column)\"\r\n          (cdkDropListExited)=\"onListExited(column)\"\r\n        >\r\n          @if (column.items.length === 0) {\r\n            <div class=\"bk-kanban-empty\">\r\n              @if (emptyStateTemplate(); as emptyTpl) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"emptyTpl\"\r\n                  [ngTemplateOutletContext]=\"emptyStateContext(column)\"\r\n                ></ng-container>\r\n              } @else {\r\n                <span class=\"bk-kanban-empty-text\">{{ emptyMessageFor(column) }}</span>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @for (card of column.items; track resolveTrackBy(card, $index); let i = $index) {\r\n            <div\r\n              class=\"bk-kanban-card\"\r\n              cdkDrag\r\n              [cdkDragData]=\"card\"\r\n              [cdkDragDisabled]=\"!dragActive()\"\r\n              (cdkDragStarted)=\"onDragStarted(column)\"\r\n              (cdkDragEnded)=\"onDragEnded()\"\r\n              (click)=\"onItemClick($event, card)\"\r\n            >\r\n              @if (showRemoveButton(column)) {\r\n                <bk-icon-button\r\n                  class=\"bk-kanban-remove-btn\"\r\n                  [icon]=\"removeButtonIcon(card)\"\r\n                  [alt]=\"'Remove ' + card.label\"\r\n                  [variant]=\"removeButtonVariant(card)\"\r\n                  size=\"xxxsm\"\r\n                  (hovered)=\"onRemoveButtonHover(card, $event)\"\r\n                  (mousedown)=\"$event.stopPropagation()\"\r\n                  (pointerdown)=\"$event.stopPropagation()\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (clicked)=\"onRemoveButtonClick(column, card)\"\r\n                ></bk-icon-button>\r\n              }\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"cardTemplate()\"\r\n                [ngTemplateOutletContext]=\"cardContext(card, column, i)\"\r\n              ></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".bk-kanban-host{display:block;height:100%}:where(.bk-kanban-board){display:block;height:100%}.bk-kanban{@apply flex items-stretch gap-4 w-full h-full overflow-x-auto;scroll-snap-type:x proximity}.bk-kanban--scroll-wrapper{align-items:flex-start;overflow-y:auto}.bk-kanban--scroll-wrapper .bk-kanban-column-body{overflow-y:visible}:where(.bk-kanban-column){@apply flex flex-col shrink-0 w-[300px] max-w-[85vw] rounded-xl border border-[#EBEDF3] overflow-hidden;background:var(--bk-kanban-column-bg, #f9fafa);scroll-snap-align:start}:where(.bk-kanban-column-header){@apply flex items-center justify-between gap-2 px-3 py-2.5;background:var(--bk-kanban-header-bg, #f9fafa);border-bottom:1px solid #ebedf3}.bk-kanban-column:not(.cdk-drag-disabled)>.bk-kanban-column-header{cursor:grab}.bk-kanban-column.cdk-drag-dragging>.bk-kanban-column-header{cursor:grabbing}.bk-kanban-column-title{@apply text-[13px] font-semibold text-[#15191E] truncate;}.bk-kanban-column-count{@apply shrink-0;}.bk-kanban-column-actions{@apply shrink-0 flex items-center;}.bk-kanban-column-body{@apply flex-1 flex flex-col gap-2 p-2.5 overflow-y-auto;min-height:96px}.bk-kanban-empty{@apply flex flex-1 flex-col items-center justify-center py-6 text-center;}.bk-kanban-empty-text{@apply text-xs font-medium text-[#78829D];}.bk-kanban-add-btn{@apply shrink-0;}.bk-kanban-card{@apply relative bg-white rounded-lg border border-[#EBEDF3] p-3 cursor-pointer;box-shadow:0 1px 2px #1018280a;transition:box-shadow .15s ease,border-color .15s ease}.bk-kanban-remove-btn{@apply absolute top-1.5 right-1.5 z-10;}.bk-kanban-card:hover{@apply border-[#C4CADA];box-shadow:0 2px 6px #10182814}.bk-kanban-card.cdk-drag-dragging{transition:none}.bk-kanban-column-warn{@apply border-amber-300 bg-amber-50;}.bk-kanban-column-warn .bk-kanban-column-header{@apply bg-amber-50 border-amber-200;}.bk-kanban-column-live-over{@apply border-amber-400 bg-amber-50;outline:2px dashed theme(\"colors.amber.400\");outline-offset:-2px}.bk-kanban-column-live-over .bk-kanban-column-header{@apply bg-amber-50 border-amber-200;}.bk-kanban-card.cdk-drag-preview{@apply rounded-lg;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:grabbing}.bk-kanban-card.cdk-drag-placeholder{@apply border-dashed border-[#C4CADA] bg-[#F1F2F4];box-shadow:none;opacity:.6}.bk-kanban-column-body.cdk-drop-list-dragging .bk-kanban-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.bk-kanban-column.cdk-drag-preview{box-shadow:0 8px 10px -6px #0003,0 20px 25px -5px #00000024}.bk-kanban-column.cdk-drag-placeholder{@apply border-dashed border-[#C4CADA] bg-[#F1F2F4];box-shadow:none;opacity:.5}.bk-kanban-column.cdk-drag-placeholder .bk-kanban-column-header,.bk-kanban-column.cdk-drag-placeholder .bk-kanban-column-body{visibility:hidden}.bk-kanban.cdk-drop-list-dragging .bk-kanban-column:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}@media (max-width: 640px){.bk-kanban-column{width:86vw}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: BkBadge, selector: "bk-badge", inputs: ["label", "variant", "color", "size", "dot", "removable", "customClass", "customBg", "customBorder", "customText"], outputs: ["clicked"] }, { kind: "component", type: BkButton, selector: "bk-button", inputs: ["variant", "size", "shadow", "label", "leftIcon", "rightIcon", "iconAlt", "type", "loading", "disabled", "buttonClass", "textClass", "spinnerClass"], outputs: ["clicked"] }, { kind: "component", type: BkIconButton, selector: "bk-icon-button", inputs: ["icon", "alt", "variant", "size", "disabled", "buttonClass"], outputs: ["clicked", "hovered"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkKanban, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-kanban', standalone: true, exportAs: 'bkKanban', imports: [NgTemplateOutlet, DragDropModule, BkBadge], encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'bk-kanban', standalone: true, exportAs: 'bkKanban', imports: [NgTemplateOutlet, DragDropModule, BkBadge, BkButton, BkIconButton], encapsulation: ViewEncapsulation.None, host: {
                         class: 'bk-kanban-host'
-                    }, template: "<div class=\"bk-kanban-board\" [class]=\"boardClass()\">\r\n  <div\r\n    class=\"bk-kanban\"\r\n    [class.bk-kanban--scroll-wrapper]=\"columnScrollMode() === 'wrapper'\"\r\n    cdkDropList\r\n    cdkDropListOrientation=\"horizontal\"\r\n    [cdkDropListData]=\"columns()\"\r\n    [cdkDropListDisabled]=\"!columnDragEnabled()\"\r\n    (cdkDropListDropped)=\"onColumnDrop($event)\"\r\n  >\r\n    @for (column of columns(); track column.id) {\r\n      <div\r\n        class=\"bk-kanban-column\"\r\n        cdkDrag\r\n        [cdkDragData]=\"column\"\r\n        [cdkDragDisabled]=\"!columnDragEnabled()\"\r\n        [class]=\"column.columnClass\"\r\n        [class.bk-kanban-column-warn]=\"isColumnOverLimit(column)\"\r\n        [class.bk-kanban-column-live-over]=\"isLiveOverLimit(column)\"\r\n      >\r\n        <div class=\"bk-kanban-column-header\" cdkDragHandle [class]=\"column.colHeaderClass\">\r\n          <span class=\"bk-kanban-column-title\">{{ column.label }}</span>\r\n          <bk-badge\r\n            class=\"bk-kanban-column-count\"\r\n            [label]=\"columnCountLabel(column)\"\r\n            size=\"sm\"\r\n            [color]=\"isColumnOverLimit(column) || isLiveOverLimit(column) ? 'Warning' : 'Gray'\"\r\n          ></bk-badge>\r\n\r\n          @if (columnHeaderActionsTemplate(); as actionsTpl) {\r\n            <div class=\"bk-kanban-column-actions\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"actionsTpl\"\r\n                [ngTemplateOutletContext]=\"columnActionsContext(column)\"\r\n              ></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        <div\r\n          class=\"bk-kanban-column-body\"\r\n          cdkDropList\r\n          [id]=\"column.id\"\r\n          [cdkDropListData]=\"cardsFor(column.id)\"\r\n          [cdkDropListConnectedTo]=\"connectedListIds(column.id)\"\r\n          [cdkDropListSortingDisabled]=\"sortingDisabled()\"\r\n          [cdkDropListDisabled]=\"!dragEnabled()\"\r\n          (cdkDropListDropped)=\"onDrop($event, column)\"\r\n          (cdkDropListEntered)=\"onListEntered($event, column)\"\r\n          (cdkDropListExited)=\"onListExited(column)\"\r\n        >\r\n          @if (cardsFor(column.id).length === 0) {\r\n            <div class=\"bk-kanban-empty\">\r\n              @if (emptyStateTemplate(); as emptyTpl) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"emptyTpl\"\r\n                  [ngTemplateOutletContext]=\"emptyStateContext(column)\"\r\n                ></ng-container>\r\n              } @else {\r\n                <span class=\"bk-kanban-empty-text\">{{ emptyStateText(column) }}</span>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @for (card of cardsFor(column.id); track resolveTrackBy(card, $index); let i = $index) {\r\n            <div\r\n              class=\"bk-kanban-card\"\r\n              cdkDrag\r\n              [cdkDragData]=\"card\"\r\n              [cdkDragDisabled]=\"!dragEnabled()\"\r\n              (cdkDragStarted)=\"onDragStarted(column)\"\r\n              (cdkDragEnded)=\"onDragEnded()\"\r\n              (click)=\"onCardClick($event, card)\"\r\n            >\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"cardTemplate()\"\r\n                [ngTemplateOutletContext]=\"cardContext(card, column, i)\"\r\n              ></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".bk-kanban-host,.bk-kanban-board{display:block;height:100%}.bk-kanban{@apply flex items-stretch gap-4 w-full h-full overflow-x-auto;scroll-snap-type:x proximity}.bk-kanban--scroll-wrapper{align-items:flex-start;overflow-y:auto}.bk-kanban--scroll-wrapper .bk-kanban-column-body{overflow-y:visible}.bk-kanban-column{@apply flex flex-col shrink-0 w-[300px] max-w-[85vw] rounded-xl border border-[#EBEDF3] overflow-hidden;background:var(--bk-kanban-column-bg, #f9fafa);scroll-snap-align:start}.bk-kanban-column-header{@apply flex items-center justify-between gap-2 px-3 py-2.5;background:var(--bk-kanban-header-bg, #f9fafa);border-bottom:1px solid #ebedf3}.bk-kanban-column:not(.cdk-drag-disabled)>.bk-kanban-column-header{cursor:grab}.bk-kanban-column.cdk-drag-dragging>.bk-kanban-column-header{cursor:grabbing}.bk-kanban-column-title{@apply text-[13px] font-semibold text-[#15191E] truncate;}.bk-kanban-column-count{@apply shrink-0;}.bk-kanban-column-actions{@apply shrink-0 flex items-center;}.bk-kanban-column-body{@apply flex-1 flex flex-col gap-2 p-2.5 overflow-y-auto;min-height:96px}.bk-kanban-empty{@apply flex flex-1 flex-col items-center justify-center py-6 text-center;}.bk-kanban-empty-text{@apply text-xs font-medium text-[#78829D];}.bk-kanban-card{@apply bg-white rounded-lg border border-[#EBEDF3] p-3 cursor-pointer;box-shadow:0 1px 2px #1018280a;transition:box-shadow .15s ease,border-color .15s ease}.bk-kanban-card:hover{@apply border-[#C4CADA];box-shadow:0 2px 6px #10182814}.bk-kanban-card.cdk-drag-dragging{transition:none}.bk-kanban-column-warn{@apply border-amber-300 bg-amber-50;}.bk-kanban-column-warn .bk-kanban-column-header{@apply bg-amber-50 border-amber-200;}.bk-kanban-column-live-over{@apply border-amber-400 bg-amber-50;outline:2px dashed theme(\"colors.amber.400\");outline-offset:-2px}.bk-kanban-column-live-over .bk-kanban-column-header{@apply bg-amber-50 border-amber-200;}.bk-kanban-card.cdk-drag-preview{@apply rounded-lg;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:grabbing}.bk-kanban-card.cdk-drag-placeholder{@apply border-dashed border-[#C4CADA] bg-[#F1F2F4];box-shadow:none;opacity:.6}.bk-kanban-column-body.cdk-drop-list-dragging .bk-kanban-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.bk-kanban-column.cdk-drag-preview{box-shadow:0 8px 10px -6px #0003,0 20px 25px -5px #00000024}.bk-kanban-column.cdk-drag-placeholder{@apply border-dashed border-[#C4CADA] bg-[#F1F2F4];box-shadow:none;opacity:.5}.bk-kanban-column.cdk-drag-placeholder .bk-kanban-column-header,.bk-kanban-column.cdk-drag-placeholder .bk-kanban-column-body{visibility:hidden}.bk-kanban.cdk-drop-list-dragging .bk-kanban-column:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}@media (max-width: 640px){.bk-kanban-column{width:86vw}}\n"] }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], cards: [{ type: i0.Input, args: [{ isSignal: true, alias: "cards", required: true }] }], cardTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardTemplate", required: true }] }], columnIdField: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnIdField", required: false }] }], dragEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragEnabled", required: false }] }], dragScope: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragScope", required: false }] }], wipLimitBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "wipLimitBehavior", required: false }] }], columnDragEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDragEnabled", required: false }] }], columnScrollMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnScrollMode", required: false }] }], boardClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "boardClass", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], columnHeaderActionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnHeaderActionsTemplate", required: false }] }], emptyStateTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateTemplate", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], dragPreviewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragPreviewMode", required: false }] }], cardMoved: [{ type: i0.Output, args: ["cardMoved"] }], cardClicked: [{ type: i0.Output, args: ["cardClicked"] }], columnLimitExceeded: [{ type: i0.Output, args: ["columnLimitExceeded"] }], columnMoved: [{ type: i0.Output, args: ["columnMoved"] }], columnActionTriggered: [{ type: i0.Output, args: ["columnActionTriggered"] }] } });
+                    }, template: "<div class=\"bk-kanban-board\" [class]=\"boardClass()\">\r\n  <div\r\n    class=\"bk-kanban\"\r\n    [class.bk-kanban--scroll-wrapper]=\"columnScrollMode() === 'wrapper'\"\r\n    cdkDropList\r\n    cdkDropListOrientation=\"horizontal\"\r\n    [cdkDropListData]=\"boardColumns()\"\r\n    [cdkDropListDisabled]=\"!dragColumn()\"\r\n    (cdkDropListDropped)=\"onColumnDrop($event)\"\r\n  >\r\n    @for (column of boardColumns(); track column.id) {\r\n      <div\r\n        class=\"bk-kanban-column\"\r\n        cdkDrag\r\n        [cdkDragData]=\"column\"\r\n        [cdkDragDisabled]=\"!dragColumn()\"\r\n        [class]=\"column.columnClass\"\r\n        [class.bk-kanban-column-warn]=\"isColumnOverLimit(column)\"\r\n        [class.bk-kanban-column-live-over]=\"isLiveOverLimit(column)\"\r\n      >\r\n        <div class=\"bk-kanban-column-header\" cdkDragHandle [class]=\"column.colHeaderClass\">\r\n          <span class=\"bk-kanban-column-title\">{{ column.label }}</span>\r\n          <bk-badge\r\n            class=\"bk-kanban-column-count\"\r\n            [label]=\"columnCountLabel(column)\"\r\n            size=\"sm\"\r\n            [color]=\"isColumnOverLimit(column) || isLiveOverLimit(column) ? 'Warning' : 'Gray'\"\r\n          ></bk-badge>\r\n\r\n          @if (columnHeaderActionsTemplate(); as actionsTpl) {\r\n            <div class=\"bk-kanban-column-actions\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"actionsTpl\"\r\n                [ngTemplateOutletContext]=\"columnActionsContext(column)\"\r\n              ></ng-container>\r\n            </div>\r\n          }\r\n          @if (showAddButton(column)) {\r\n            <bk-button\r\n              class=\"bk-kanban-add-btn\"\r\n              variant=\"primary\"\r\n              size=\"xxsm\"\r\n              [shadow]=\"false\"\r\n              label=\"+\"\r\n              [buttonClass]=\"'size-6 hover:bg-[#242424]'\"\r\n              [attr.aria-label]=\"'Add item to ' + column.label\"\r\n              (clicked)=\"onAddButtonClick(column)\"\r\n            ></bk-button>\r\n          }\r\n        </div>\r\n\r\n        <div\r\n          class=\"bk-kanban-column-body\"\r\n          cdkDropList\r\n          [id]=\"column.id\"\r\n          [cdkDropListData]=\"column.items\"\r\n          [cdkDropListConnectedTo]=\"connectedListIds(column.id)\"\r\n          [cdkDropListSortingDisabled]=\"sortingDisabled()\"\r\n          [cdkDropListDisabled]=\"!dragActive()\"\r\n          (cdkDropListDropped)=\"onItemDrop($event, column)\"\r\n          (cdkDropListEntered)=\"onListEntered($event, column)\"\r\n          (cdkDropListExited)=\"onListExited(column)\"\r\n        >\r\n          @if (column.items.length === 0) {\r\n            <div class=\"bk-kanban-empty\">\r\n              @if (emptyStateTemplate(); as emptyTpl) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"emptyTpl\"\r\n                  [ngTemplateOutletContext]=\"emptyStateContext(column)\"\r\n                ></ng-container>\r\n              } @else {\r\n                <span class=\"bk-kanban-empty-text\">{{ emptyMessageFor(column) }}</span>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @for (card of column.items; track resolveTrackBy(card, $index); let i = $index) {\r\n            <div\r\n              class=\"bk-kanban-card\"\r\n              cdkDrag\r\n              [cdkDragData]=\"card\"\r\n              [cdkDragDisabled]=\"!dragActive()\"\r\n              (cdkDragStarted)=\"onDragStarted(column)\"\r\n              (cdkDragEnded)=\"onDragEnded()\"\r\n              (click)=\"onItemClick($event, card)\"\r\n            >\r\n              @if (showRemoveButton(column)) {\r\n                <bk-icon-button\r\n                  class=\"bk-kanban-remove-btn\"\r\n                  [icon]=\"removeButtonIcon(card)\"\r\n                  [alt]=\"'Remove ' + card.label\"\r\n                  [variant]=\"removeButtonVariant(card)\"\r\n                  size=\"xxxsm\"\r\n                  (hovered)=\"onRemoveButtonHover(card, $event)\"\r\n                  (mousedown)=\"$event.stopPropagation()\"\r\n                  (pointerdown)=\"$event.stopPropagation()\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                  (clicked)=\"onRemoveButtonClick(column, card)\"\r\n                ></bk-icon-button>\r\n              }\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"cardTemplate()\"\r\n                [ngTemplateOutletContext]=\"cardContext(card, column, i)\"\r\n              ></ng-container>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".bk-kanban-host{display:block;height:100%}:where(.bk-kanban-board){display:block;height:100%}.bk-kanban{@apply flex items-stretch gap-4 w-full h-full overflow-x-auto;scroll-snap-type:x proximity}.bk-kanban--scroll-wrapper{align-items:flex-start;overflow-y:auto}.bk-kanban--scroll-wrapper .bk-kanban-column-body{overflow-y:visible}:where(.bk-kanban-column){@apply flex flex-col shrink-0 w-[300px] max-w-[85vw] rounded-xl border border-[#EBEDF3] overflow-hidden;background:var(--bk-kanban-column-bg, #f9fafa);scroll-snap-align:start}:where(.bk-kanban-column-header){@apply flex items-center justify-between gap-2 px-3 py-2.5;background:var(--bk-kanban-header-bg, #f9fafa);border-bottom:1px solid #ebedf3}.bk-kanban-column:not(.cdk-drag-disabled)>.bk-kanban-column-header{cursor:grab}.bk-kanban-column.cdk-drag-dragging>.bk-kanban-column-header{cursor:grabbing}.bk-kanban-column-title{@apply text-[13px] font-semibold text-[#15191E] truncate;}.bk-kanban-column-count{@apply shrink-0;}.bk-kanban-column-actions{@apply shrink-0 flex items-center;}.bk-kanban-column-body{@apply flex-1 flex flex-col gap-2 p-2.5 overflow-y-auto;min-height:96px}.bk-kanban-empty{@apply flex flex-1 flex-col items-center justify-center py-6 text-center;}.bk-kanban-empty-text{@apply text-xs font-medium text-[#78829D];}.bk-kanban-add-btn{@apply shrink-0;}.bk-kanban-card{@apply relative bg-white rounded-lg border border-[#EBEDF3] p-3 cursor-pointer;box-shadow:0 1px 2px #1018280a;transition:box-shadow .15s ease,border-color .15s ease}.bk-kanban-remove-btn{@apply absolute top-1.5 right-1.5 z-10;}.bk-kanban-card:hover{@apply border-[#C4CADA];box-shadow:0 2px 6px #10182814}.bk-kanban-card.cdk-drag-dragging{transition:none}.bk-kanban-column-warn{@apply border-amber-300 bg-amber-50;}.bk-kanban-column-warn .bk-kanban-column-header{@apply bg-amber-50 border-amber-200;}.bk-kanban-column-live-over{@apply border-amber-400 bg-amber-50;outline:2px dashed theme(\"colors.amber.400\");outline-offset:-2px}.bk-kanban-column-live-over .bk-kanban-column-header{@apply bg-amber-50 border-amber-200;}.bk-kanban-card.cdk-drag-preview{@apply rounded-lg;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;cursor:grabbing}.bk-kanban-card.cdk-drag-placeholder{@apply border-dashed border-[#C4CADA] bg-[#F1F2F4];box-shadow:none;opacity:.6}.bk-kanban-column-body.cdk-drop-list-dragging .bk-kanban-card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.bk-kanban-column.cdk-drag-preview{box-shadow:0 8px 10px -6px #0003,0 20px 25px -5px #00000024}.bk-kanban-column.cdk-drag-placeholder{@apply border-dashed border-[#C4CADA] bg-[#F1F2F4];box-shadow:none;opacity:.5}.bk-kanban-column.cdk-drag-placeholder .bk-kanban-column-header,.bk-kanban-column.cdk-drag-placeholder .bk-kanban-column-body{visibility:hidden}.bk-kanban.cdk-drop-list-dragging .bk-kanban-column:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}@media (max-width: 640px){.bk-kanban-column{width:86vw}}\n"] }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], cardTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardTemplate", required: true }] }], movementRestriction: [{ type: i0.Input, args: [{ isSignal: true, alias: "movementRestriction", required: false }] }], wipLimitBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "wipLimitBehavior", required: false }] }], dragColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragColumn", required: false }] }], columnReorderPayload: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnReorderPayload", required: false }] }], validateMove: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateMove", required: false }] }], columnScrollMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnScrollMode", required: false }] }], boardClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "boardClass", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], columnHeaderActionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnHeaderActionsTemplate", required: false }] }], emptyStateTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyStateTemplate", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], dragPreviewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragPreviewMode", required: false }] }], showAddItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddItem", required: false }] }], showRemoveItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRemoveItem", required: false }] }], columnsChanged: [{ type: i0.Output, args: ["columnsChanged"] }], columnLimitExceeded: [{ type: i0.Output, args: ["columnLimitExceeded"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], itemMoveBetweenColumns: [{ type: i0.Output, args: ["itemMoveBetweenColumns"] }], columnActionTriggered: [{ type: i0.Output, args: ["columnActionTriggered"] }] } });
 
 /**
  * Marks an element inside a `cardTemplate` as its own click region.
@@ -14461,10 +14642,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 /**
  * Types for bk-kanban.
  *
- * The board is content-agnostic by design (see the component's own doc
- * comment): it only ever moves opaque `T` values between columns and reports
- * what happened. Every type here describes either a column, or one of the
- * events the board reports — never anything about what a card renders as.
+ * Columns own their items — a single nested tree is the source of truth:
+ * `columns: KanbanColumn<T>[]`, each carrying its own `items: T[]`. There is
+ * no separate flat cards array anywhere; grouping, ordering, and lookup all
+ * fall out of the tree itself.
+ *
+ * Every drag, add, and remove operation emits only the column(s) actually
+ * affected — never the whole board — each with its complete, current
+ * `items` (column *reordering* is the one exception — see
+ * `BkKanbanColumnReorderPayload`). There's deliberately no
+ * `itemsMovedWithin` / `itemsMovedBetween` pair of "what changed" fields:
+ * the consumer already gets the complete, ordered `items` for every affected
+ * column, so diffing that against whatever it had before tells it exactly
+ * what moved and where without the board also maintaining a second,
+ * redundant description of the same fact.
  */
 
 /*