@design.estate/dees-catalog 13.0.1 → 13.0.2

package/readme.md

@@ -2642,9 +2642,15 @@ must enforce the same permissions.
 Provider reads receive an `AbortSignal`; obsolete reads cannot overwrite a newer
 selection. Reject mutations with an `Error` to show the failure and preserve the
 draft. Successful callbacks supply authoritative records to the component.
-Moves are awaited before changing the board; the provider must assign ordering
-atomically. Omitting `beforeTicketId` appends. Cards support drag-and-drop and a
-keyboard-accessible Move menu with within-column ordering and column selection.
+Moves are awaited before changing `.tickets` or emitting `kanban-change`; the
+provider must assign ordering atomically. Omitting `beforeTicketId` appends.
+Mouse and pen dragging shows a card-sized drop slot, animates neighboring cards,
+and lands the preview into position. A render-only placement stays visible while
+saving; slow saves show a status, and failures animate back to the saved position.
+Escape or dropping outside the board cancels. Edge scrolling works inside scroll
+containers, and reduced motion removes lift, rearrangement and landing animation.
+Touch retains normal scrolling. The keyboard-accessible Move menu supports both
+within-column ordering and column selection.
 
 Hierarchy is independent of workflow: tasks optionally belong to epics, and
 subtasks belong to tasks. Each ticket has its own `columnId`; moving a parent
@@ -2671,7 +2677,8 @@ Public methods and events:
 
 `dees-kanban-column` accepts `.column`, `.tickets`, `.allTickets`, `.columns`,
 `.movable`, `.canCreate`, `.pendingTicketId` and `.draggingTicketId`. It composes
-cards and emits `kanban-ticket-move` with the destination and insertion target.
+cards and forwards their open, create and Move menu requests. Standalone columns
+retain native dragging and emit `kanban-ticket-move` with the insertion target.
 Use it through `dees-kanban` for provider handling and board-local drag ownership.
 
 #### DeesKanbanCard

package/scripts/check-packed-consumer.mjs

@@ -30,7 +30,7 @@ writeFileSync(join(consumer, 'package.json'), JSON.stringify({
 }, null, 2));
 writeFileSync(join(consumer, 'pnpm-workspace.yaml'), 'packages:\n  - "."\n');
 // Run the same regressions against installed JavaScript, not sources.
-const browserTests = ['table-construction', 'datepicker-validation', 'textarea', 'composer-attachments', 'kanban'];
+const browserTests = ['table-construction', 'datepicker-validation', 'textarea', 'composer-attachments', 'kanban', 'kanban-motion'];
 for (const name of browserTests) {
   const browserTest = readFileSync(join(root, `test/test.${name}.browser.ts`), 'utf8')
     .replaceAll('../ts_web/', '@design.estate/dees-catalog/dist_ts_web/');

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '13.0.1',
+  version: '13.0.2',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

package/ts_web/elements/00group-kanban/dees-kanban/dees-kanban.ts

@@ -1,4 +1,4 @@
-import { DeesElement, customElement, property, state, html, css } from '@design.estate/dees-element';
+import { DeesElement, customElement, property, state, html, css, directives } from '@design.estate/dees-element';
 import type { IKanbanColumn, IKanbanComment, IKanbanCreate, IKanbanMove, IKanbanPerson, IKanbanProvider, IKanbanTicket, IKanbanTicketDraft } from '../interfaces.js';
 import type { TReferenceContent, TReferenceSearch } from '../../00group-input/dees-input-reference/interfaces.js';
 import type { DeesInputText } from '../../00group-input/dees-input-text/dees-input-text.js';
@@ -8,13 +8,14 @@ import { DeesKanbanTicketDetail } from '../dees-kanban-ticket-detail/dees-kanban
 import { kanbanStyles } from '../kanban.styles.js';
 import { kanbanError, kanbanEvent, sortKanbanTickets, ticketLabel } from '../kanban.helpers.js';
 import { demoFunc } from './dees-kanban.demo.js';
+import { KanbanDragController } from '../kanban.dragcontroller.js';
 import '../dees-kanban-column/dees-kanban-column.js';
 
 declare global { interface HTMLElementTagNameMap { 'dees-kanban': DeesKanban; } }
 
 const interactionEvents = ['kanban-ticket-open', 'kanban-ticket-move', 'kanban-ticket-create', 'kanban-move-menu',
   'kanban-ticket-save', 'kanban-ticket-draft', 'kanban-comment-draft', 'kanban-comment-added', 'kanban-comments-refresh',
-  'kanban-detail-back', 'kanban-drag-start', 'kanban-drag-end'] as const;
+  'kanban-detail-back'] as const;
 
 interface IKanbanInteractionMap {
   'kanban-ticket-open': { ticketId: string };
@@ -27,8 +28,6 @@ interface IKanbanInteractionMap {
   'kanban-comment-added': { comment: IKanbanComment; submittedBody: TReferenceContent };
   'kanban-comments-refresh': { ticketId: string };
   'kanban-detail-back': Record<string, never>;
-  'kanban-drag-start': { ticketId: string };
-  'kanban-drag-end': Record<string, never>;
 }
 type TKanbanInteraction = { [K in keyof IKanbanInteractionMap]: { type: K; detail: IKanbanInteractionMap[K] } }[keyof IKanbanInteractionMap];
 
@@ -47,7 +46,6 @@ export class DeesKanban extends DeesElement {
   @state() private accessor epicId = '';
   @state() private accessor operationError = '';
   @state() private accessor pendingTicketId = '';
-  @state() private accessor draggingTicketId = '';
   @state() private accessor openingTicket = false;
   private modal?: DeesModal;
   private modalOpening?: Promise<DeesModal>;
@@ -61,6 +59,8 @@ export class DeesKanban extends DeesElement {
   private commentDrafts = new Map<string, TReferenceContent>();
   private ticketDrafts = new Map<string, IKanbanTicketDraft>();
   private resolvedTickets = new Map<string, IKanbanTicket>();
+  private activeMove?: symbol;
+  private readonly dragController = new KanbanDragController(this, input => this.persistMove(input), () => !this.pendingTicketId);
 
   public static styles = [...kanbanStyles, css`
     :host { padding: 20px 24px; background: var(--dees-color-bg-canvas); min-height: 100%; }
@@ -89,9 +89,10 @@ export class DeesKanban extends DeesElement {
   public async connectedCallback(): Promise<void> {
     const connection = super.connectedCallback();
     for (const name of interactionEvents) this.addEventListener(name, this.handleInteraction);
+    this.dragController.connect();
     await connection;
   }
-  public updated(): void { this.syncDetail(); }
+  public updated(): void { this.syncDetail(); this.dragController.sync(); }
   public render() {
     const epics = sortKanbanTickets(this.tickets.filter(ticket => ticket.kind === 'epic'));
     const query = this.query.trim().toLocaleLowerCase();
@@ -114,10 +115,12 @@ export class DeesKanban extends DeesElement {
       ${this.loading || this.openingTicket ? html`<p class="caption" role="status">${this.loading ? 'Loading board…' : 'Opening ticket…'}</p>` : ''}
       ${this.error || this.operationError ? html`<p class="error" role="alert">${this.error || this.operationError}</p>` : ''}
       ${!this.columns.length ? html`<p class="empty">No columns configured.</p>` : html`<div class="columns" aria-label=${this.heading}>
-        ${this.columns.map(column => html`<dees-kanban-column .column=${column} .columns=${this.columns}
+        ${directives.repeat(this.columns, column => column.id, column => html`<dees-kanban-column .column=${column} .columns=${this.columns}
+          .pointerManaged=${true}
           .tickets=${tasks.filter(ticket => ticket.columnId === column.id)} .allTickets=${this.tickets}
-          .movable=${Boolean(this.provider.moveTicket) && !this.pendingTicketId} .canCreate=${Boolean(this.provider.createTicket)}
-          .pendingTicketId=${this.pendingTicketId} .draggingTicketId=${this.draggingTicketId}></dees-kanban-column>`)}</div>`}`;
+          .movable=${Boolean(this.provider.moveTicket)} .canCreate=${Boolean(this.provider.createTicket)}
+          .movesDisabled=${Boolean(this.pendingTicketId)}
+          .pendingTicketId=${this.pendingTicketId}></dees-kanban-column>`)}</div>`}`;
   }
 
   private findTicket(id: string): IKanbanTicket | undefined { return this.tickets.find(ticket => ticket.id === id) ?? this.resolvedTickets.get(id); }
@@ -227,18 +230,28 @@ export class DeesKanban extends DeesElement {
 
   /** Provider commits the move and supplies the new ordering. Hierarchy is never part of a move request. */
   public async moveTicket(input: IKanbanMove): Promise<void> {
+    if (this.dragController.busy) return;
+    await this.persistMove(input, true);
+  }
+
+  private async persistMove(input: IKanbanMove, animate = false): Promise<boolean> {
     const ticket = this.findTicket(input.ticketId);
-    if (!ticket || !this.provider.moveTicket || ticket.permissions?.move === false || this.pendingTicketId || input.beforeTicketId === ticket.id) return;
-    if (!this.columns.some(column => column.id === input.columnId)) { this.reportError(new Error('Unknown destination column.')); return; }
+    if (!ticket || !this.provider.moveTicket || ticket.permissions?.move === false || this.pendingTicketId || input.beforeTicketId === ticket.id) return false;
+    if (!this.columns.some(column => column.id === input.columnId)) { this.reportError(new Error('Unknown destination column.')); return false; }
     const before = input.beforeTicketId ? this.findTicket(input.beforeTicketId) : undefined;
-    if (input.beforeTicketId && (!before || before.columnId !== input.columnId || before.kind !== ticket.kind)) { this.reportError(new Error('Invalid insertion target.')); return; }
-    this.pendingTicketId = ticket.id; this.operationError = ''; this.draggingTicketId = '';
+    if (input.beforeTicketId && (!before || before.columnId !== input.columnId || before.kind !== ticket.kind)) { this.reportError(new Error('Invalid insertion target.')); return false; }
+    const operation = this.activeMove = Symbol();
+    this.pendingTicketId = ticket.id; this.operationError = '';
     try {
       const changed = await this.provider.moveTicket(input);
+      if (this.activeMove !== operation) return false;
       if (!changed.some(item => item.id === ticket.id)) throw new Error('The move provider did not return the moved ticket.');
+      const positions = animate ? this.dragController.capture() : undefined;
       this.mergeTickets(changed);
-    } catch (error) { this.reportError(error); }
-    finally { this.pendingTicketId = ''; this.syncDetail(); }
+      if (positions) { await this.updateComplete; await this.dragController.animateFrom(positions); }
+      return true;
+    } catch (error) { if (this.activeMove === operation) this.reportError(error); return false; }
+    finally { if (this.activeMove === operation) { this.activeMove = undefined; this.pendingTicketId = ''; this.syncDetail(); } }
   }
 
   private async saveTicket(ticketId: string, draft: IKanbanTicketDraft): Promise<void> {
@@ -315,13 +328,13 @@ export class DeesKanban extends DeesElement {
       }
       case 'kanban-comments-refresh': void this.refreshComments(detail.ticketId); break;
       case 'kanban-detail-back': { const previous = this.history.pop(); if (previous) void this.openTicket(previous, false); break; }
-      case 'kanban-drag-start': this.draggingTicketId = detail.ticketId; break;
-      case 'kanban-drag-end': this.draggingTicketId = ''; break;
     }
   };
 
   public async disconnectedCallback(): Promise<void> {
     for (const name of interactionEvents) this.removeEventListener(name, this.handleInteraction);
+    this.dragController.disconnect();
+    if (this.activeMove) { this.activeMove = undefined; this.pendingTicketId = ''; }
     this.openAbort?.abort(); this.commentsAbort?.abort();
     void this.modal?.destroy();
     await super.disconnectedCallback();

package/ts_web/elements/00group-kanban/dees-kanban-card/dees-kanban-card.ts

@@ -14,16 +14,22 @@ export class DeesKanbanCard extends DeesElement {
   @property({ attribute: false }) accessor subtasks: IKanbanTicket[] = [];
   @property({ attribute: false }) accessor columns: IKanbanColumn[] = [];
   @property({ type: Boolean }) accessor movable = false;
+  @property({ type: Boolean }) accessor moveDisabled = false;
   @property({ type: Boolean }) accessor pending = false;
+  @property({ type: Boolean }) accessor saving = false;
+  /** The assembled board owns pointer previews; standalone cards retain native drag events. */
+  @property({ attribute: false }) accessor pointerManaged = false;
   public static styles = [...kanbanStyles, css`
     article { padding: 12px; border: 1px solid var(--dees-color-border-subtle); border-radius: var(--dees-radius-xl); corner-shape: var(--dees-corner-shape); background: var(--dees-color-bg-primary); box-shadow: var(--dees-shadow-xs); }
     article:hover { border-color: var(--dees-color-border-strong); }
-    article[aria-busy=true] { opacity: .65; }
+    article[aria-busy=true] > :not(.meta), article[aria-busy=true] .meta > :not(.saving) { opacity: .65; }
+    article[data-movable=true] { cursor: grab; }
     .meta { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); }
     .key { flex-shrink: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
     .link.epic { min-width: 0; color: var(--dees-color-text-secondary); font-size: var(--dees-font-caption1-size); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
     .link.epic:hover { color: var(--dees-color-link); text-decoration: underline; }
     .move { flex-shrink: 0; margin-left: auto; }
+    .saving { margin-left: auto; font-size: var(--dees-font-caption1-size); white-space: nowrap; }
     .move::part(button) { width: 24px; height: 24px; min-height: 24px; }
     .title { display: block; width: 100%; border: 0; background: transparent; padding: 4px 0 0; color: inherit; text-align: left; cursor: pointer; font: inherit; font-weight: 600; line-height: 22px; overflow-wrap: anywhere; }
     .title:hover { color: var(--dees-color-link); }
@@ -48,16 +54,17 @@ export class DeesKanbanCard extends DeesElement {
     const ticket = this.ticket;
     if (!ticket) return html``;
     const completed = this.subtasks.filter(task => this.columns.some(column => column.id === task.columnId && column.done)).length;
-    return html`<article aria-busy=${String(this.pending)} draggable=${this.movable && !this.pending ? 'true' : 'false'}
+    return html`<article aria-busy=${String(this.pending)} data-movable=${String(this.movable && !this.moveDisabled && !this.pending)}
+      draggable=${String(this.movable && !this.moveDisabled && !this.pending && !this.pointerManaged)}
       @dragstart=${(event: DragEvent) => {
-        if (!this.movable || this.pending || !event.dataTransfer) { event.preventDefault(); return; }
+        if (this.pointerManaged || !this.movable || this.moveDisabled || this.pending || !event.dataTransfer) { event.preventDefault(); return; }
         event.dataTransfer.setData('application/x-dees-kanban-ticket', ticket.id);
         event.dataTransfer.effectAllowed = 'move';
         kanbanEvent(this, 'kanban-drag-start', { ticketId: ticket.id });
-      }} @dragend=${() => kanbanEvent(this, 'kanban-drag-end', {})}>
+      }} @dragend=${() => { if (!this.pointerManaged) kanbanEvent(this, 'kanban-drag-end', {}); }}>
       <div class="meta"><span class="key">${ticket.key}</span>
         ${this.epic ? html`<button class="link epic" title=${this.epic.title} @click=${() => this.open(this.epic!.id)}>${this.epic.title}</button>` : ''}
-        ${this.movable ? html`<dees-button class="move" size="icon" type="ghost" icon="lucide:Ellipsis" text="Move ticket" .disabled=${this.pending}
+        ${this.saving ? html`<span class="saving" role="status">Saving…</span>` : this.movable ? html`<dees-button class="move" size="icon" type="ghost" icon="lucide:Ellipsis" text="Move ticket" .disabled=${this.pending || this.moveDisabled}
           @clicked=${(event: Event) => kanbanEvent(this, 'kanban-move-menu', { ticketId: ticket.id, anchor: event.currentTarget as HTMLElement })}></dees-button>` : ''}
       </div>
       <button class="title" @click=${() => this.open(ticket.id)}>${ticket.title}</button>

package/ts_web/elements/00group-kanban/dees-kanban-column/dees-kanban-column.ts

@@ -1,5 +1,6 @@
-import { DeesElement, customElement, property, state, html, css } from '@design.estate/dees-element';
+import { DeesElement, customElement, property, state, html, css, directives } from '@design.estate/dees-element';
 import type { IKanbanColumn, IKanbanTicket } from '../interfaces.js';
+import type { IKanbanMotion } from '../kanban.dragcontroller.js';
 import { kanbanStyles } from '../kanban.styles.js';
 import { kanbanEvent, sortKanbanTickets } from '../kanban.helpers.js';
 import '../dees-kanban-card/dees-kanban-card.js';
@@ -13,14 +14,18 @@ export class DeesKanbanColumn extends DeesElement {
   @property({ attribute: false }) accessor allTickets: IKanbanTicket[] = [];
   @property({ attribute: false }) accessor columns: IKanbanColumn[] = [];
   @property({ type: Boolean }) accessor movable = false;
+  @property({ type: Boolean }) accessor movesDisabled = false;
   @property({ type: Boolean }) accessor canCreate = false;
   @property({ type: String }) accessor pendingTicketId = '';
   @property({ type: String }) accessor draggingTicketId = '';
-  @state() private accessor dropBefore: string | undefined;
-  @state() private accessor draggingOver = false;
+  @property({ attribute: false }) accessor pointerManaged = false;
+  @state() private accessor nativeDropBefore: string | undefined;
+  @state() private accessor nativeOver = false;
+  /** Internal render projection; provider-owned ticket data remains unchanged until saved. */
+  @property({ attribute: false }) accessor motion: IKanbanMotion | undefined;
   public static styles = [...kanbanStyles, css`
     :host { display: flex; flex-direction: column; min-width: 272px; max-width: 360px; flex: 1 0 272px; }
-    section { min-height: 220px; height: 100%; border-radius: var(--dees-radius-xl); }
+    section { min-height: 220px; height: 100%; border-radius: var(--dees-radius-xl); transition: background var(--dees-transition-default) var(--dees-ease-out); }
     header { display: flex; align-items: center; gap: 8px; min-height: 40px; margin-bottom: 10px; padding: 0 2px 8px; border-bottom: 1px solid var(--dees-color-border-subtle); }
     h3 { font-size: var(--dees-font-footnote-size); font-weight: 600; }
     header dees-button::part(button) { width: 24px; height: 24px; min-height: 24px; }
@@ -28,37 +33,48 @@ export class DeesKanbanColumn extends DeesElement {
     .status.done { background: var(--dees-color-accent-success); border-color: var(--dees-color-accent-success); }
     .stack { display: grid; gap: 8px; min-height: 120px; align-content: start; }
     .target { position: relative; }
-    .target.dragging { opacity: .4; }
-    .target.before::before, .end-target.before::before { content: ''; position: absolute; top: -5px; left: 0; right: 0; height: 2px; background: var(--dees-color-accent-primary); border-radius: 2px; }
+    .native-before::before { content: ''; position: absolute; top: -5px; left: 0; right: 0; height: 2px; background: var(--dees-color-accent-primary); border-radius: 2px; }
+    .placeholder { border-radius: var(--dees-radius-xl); background: var(--dees-color-fill-tertiary); box-shadow: inset 0 0 0 1px var(--dees-color-border-default); }
     .end-target { position: relative; min-height: 32px; margin-top: 8px; }
     section.over { background: var(--dees-color-row-hover); }
+    @media (prefers-reduced-motion: reduce) { section { transition: none; } }
     @media (pointer: coarse) { header dees-button::part(button) { width: 32px; height: 32px; min-height: 32px; } }
   `];
-  public updated(): void { if (!this.draggingTicketId) this.draggingOver = false; }
+  public updated(): void { if (!this.draggingTicketId) this.nativeOver = false; }
   public render() {
     if (!this.column) return html``;
-    return html`<section class=${this.draggingOver ? 'over' : ''} aria-label=${this.column.title}
-      @dragover=${(event: DragEvent) => { if (this.draggingTicketId && this.movable) { event.preventDefault(); this.draggingOver = true; if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'; } }}
-      @dragleave=${(event: DragEvent) => { if (!(event.relatedTarget instanceof Node) || !(event.currentTarget as Node).contains(event.relatedTarget)) this.draggingOver = false; }}
+    const motion = this.motion;
+    const tickets = sortKanbanTickets(this.tickets).filter(ticket => ticket.id !== motion?.move.ticketId);
+    const active = motion?.move.columnId === this.column.id;
+    if (motion && active) {
+      const index = tickets.findIndex(ticket => ticket.id === motion.move.beforeTicketId);
+      tickets.splice(index < 0 ? tickets.length : index, 0, motion.ticket);
+    }
+    return html`<section class=${active && motion?.placeholder || this.nativeOver ? 'over' : ''} aria-label=${this.column.title}
+      @dragover=${(event: DragEvent) => { if (!this.pointerManaged && this.draggingTicketId && this.movable && !this.movesDisabled) { event.preventDefault(); this.nativeOver = true; if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'; } }}
+      @dragleave=${(event: DragEvent) => { if (!(event.relatedTarget instanceof Node) || !(event.currentTarget as Node).contains(event.relatedTarget)) this.nativeOver = false; }}
       @drop=${(event: DragEvent) => {
-        event.preventDefault(); this.draggingOver = false;
-        if (this.movable && this.draggingTicketId && event.dataTransfer?.getData('application/x-dees-kanban-ticket') === this.draggingTicketId)
-          kanbanEvent(this, 'kanban-ticket-move', { ticketId: this.draggingTicketId, columnId: this.column!.id, beforeTicketId: this.dropBefore });
+        if (this.pointerManaged) return;
+        event.preventDefault(); this.nativeOver = false;
+        if (this.movable && !this.movesDisabled && this.draggingTicketId && event.dataTransfer?.getData('application/x-dees-kanban-ticket') === this.draggingTicketId)
+          kanbanEvent(this, 'kanban-ticket-move', { ticketId: this.draggingTicketId, columnId: this.column!.id, beforeTicketId: this.nativeDropBefore });
       }}>
-      <header><span class="status ${this.column.done ? 'done' : ''}" aria-hidden="true"></span><h3>${this.column.title}</h3><span class="count">${this.tickets.length}</span><span class="spacer"></span>
+      <header><span class="status ${this.column.done ? 'done' : ''}" aria-hidden="true"></span><h3>${this.column.title}</h3><span class="count">${tickets.length}</span><span class="spacer"></span>
         ${this.canCreate ? html`<dees-button type="ghost" size="icon" icon="lucide:Plus" text=${`Add task to ${this.column.title}`}
           @clicked=${() => kanbanEvent(this, 'kanban-ticket-create', { kind: 'task', columnId: this.column!.id })}></dees-button>` : ''}</header>
-      <div class="stack">${sortKanbanTickets(this.tickets).map(ticket => html`
-        <div class="target ${this.draggingOver && this.dropBefore === ticket.id ? 'before' : ''} ${this.draggingTicketId === ticket.id ? 'dragging' : ''}"
-          @dragover=${() => { this.dropBefore = ticket.id; }}>
-          <dees-kanban-card .ticket=${ticket} .columns=${this.columns}
+      <div class="stack">${directives.repeat(tickets, ticket => ticket.id, ticket => html`
+        <div class="target ${this.nativeOver && this.nativeDropBefore === ticket.id ? 'native-before' : ''}" data-ticket-id=${ticket.id}
+          @dragover=${() => { if (!this.pointerManaged) this.nativeDropBefore = ticket.id; }}>
+          ${motion?.move.ticketId === ticket.id && motion.placeholder ? html`<div class="placeholder" style=${`height: ${motion.height}px`} aria-label="Drop ticket here"></div>` : html`<dees-kanban-card .ticket=${ticket} .columns=${this.columns}
             .epic=${this.allTickets.find(item => item.id === ticket.parentId && item.kind === 'epic')}
             .subtasks=${sortKanbanTickets(this.allTickets.filter(item => item.parentId === ticket.id && item.kind === 'subtask'))}
-            .movable=${this.movable && ticket.permissions?.move !== false} .pending=${this.pendingTicketId === ticket.id}></dees-kanban-card>
+            .movable=${this.movable && ticket.permissions?.move !== false} .pending=${motion?.move.ticketId === ticket.id ? motion.dimmed : this.pendingTicketId === ticket.id}
+            .moveDisabled=${this.movesDisabled}
+            .saving=${motion?.move.ticketId === ticket.id && motion.saving} .pointerManaged=${this.pointerManaged}></dees-kanban-card>`}
         </div>`)}
-        ${!this.tickets.length ? html`<div class="empty" @dragover=${() => { this.dropBefore = undefined; }}>No tasks</div>` : ''}
+        ${!tickets.length ? html`<div class="empty" @dragover=${() => { this.nativeDropBefore = undefined; }}>No tasks</div>` : ''}
       </div>
-      <div class="end-target ${this.draggingOver && !this.dropBefore ? 'before' : ''}" @dragover=${() => { this.dropBefore = undefined; }}></div>
+      <div class="end-target ${this.nativeOver && !this.nativeDropBefore ? 'native-before' : ''}" @dragover=${() => { this.nativeDropBefore = undefined; }}></div>
     </section>`;
   }
 }