@design.estate/dees-catalog 12.5.0 → 13.0.1

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

@@ -1,7 +1,7 @@
 import { DeesElement, customElement, property, html, css } from '@design.estate/dees-element';
 import type { IKanbanTicket, IKanbanColumn } from '../interfaces.js';
 import { kanbanStyles } from '../kanban.styles.js';
-import { kanbanEvent } from '../kanban.helpers.js';
+import { kanbanEvent, kanbanInitials, kanbanPriorityIcon } from '../kanban.helpers.js';
 import '../../00group-button/dees-button/dees-button.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 
@@ -16,17 +16,32 @@ export class DeesKanbanCard extends DeesElement {
   @property({ type: Boolean }) accessor movable = false;
   @property({ type: Boolean }) accessor pending = false;
   public static styles = [...kanbanStyles, css`
-    article { padding: 14px; border: 1px solid var(--dees-color-border-default); border-radius: var(--dees-radius-lg); background: var(--dees-color-bg-primary); box-shadow: var(--dees-shadow-xs); }
+    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; }
-    .title { display: block; width: 100%; border: 0; background: transparent; padding: 8px 0 12px; color: inherit; text-align: left; cursor: pointer; font: inherit; font-weight: 550; line-height: 1.45; overflow-wrap: anywhere; }
-    .key { font-variant-numeric: tabular-nums; }
-    .link.epic { margin-bottom: 5px; max-width: 100%; font-size: var(--dees-font-caption1-size); }
-    .labels { margin-bottom: 10px; }
-    .priority[data-priority=urgent], .priority[data-priority=high] { color: var(--dees-color-text-warning); }
-    .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--dees-color-badge-default-bg); display: inline-grid; place-items: center; font-size: 10px; font-weight: 600; }
-    summary { cursor: pointer; padding: 10px 0 2px; font-size: var(--dees-font-footnote-size); color: var(--dees-color-text-secondary); }
-    .subtask { display: flex; gap: 6px; align-items: baseline; padding-top: 8px; font-size: var(--dees-font-footnote-size); }
+    .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; }
+    .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); }
+    .footer { margin-top: 10px; gap: 6px; }
+    .badge { padding: 1px 6px; }
+    .assignee { display: flex; align-items: center; gap: 5px; margin-left: auto; min-width: 0; color: var(--dees-color-text-secondary); font-size: var(--dees-font-caption1-size); }
+    .assignee-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .avatar { width: 20px; height: 20px; font-size: 9px; }
+    details { border-top: 1px solid var(--dees-color-border-subtle); margin-top: 10px; }
+    summary { cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 9px 0 0; font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); list-style: none; }
+    summary::-webkit-details-marker { display: none; }
+    summary .disclosure { margin-left: auto; }
+    details[open] summary .disclosure { transform: rotate(90deg); }
+    .subtask { display: flex; gap: 7px; align-items: center; padding-top: 8px; font-size: var(--dees-font-footnote-size); }
+    .subtask dees-icon { flex-shrink: 0; color: var(--dees-color-text-secondary); font-size: 14px; }
+    .subtask .link { color: var(--dees-color-text-primary); }
+    .subtask .link:hover { color: var(--dees-color-link); }
+    @media (pointer: coarse) { .move::part(button) { width: 32px; height: 32px; min-height: 32px; } summary { min-height: 36px; } }
   `];
   private open(ticketId: string): void { kanbanEvent(this, 'kanban-ticket-open', { ticketId }); }
   public render() {
@@ -40,18 +55,19 @@ export class DeesKanbanCard extends DeesElement {
         event.dataTransfer.effectAllowed = 'move';
         kanbanEvent(this, 'kanban-drag-start', { ticketId: ticket.id });
       }} @dragend=${() => kanbanEvent(this, 'kanban-drag-end', {})}>
-      ${this.epic ? html`<button class="link epic" @click=${() => this.open(this.epic!.id)}>${this.epic.title}</button>` : ''}
-      <div class="row caption"><span class="key">${ticket.key}</span><span class="spacer"></span>
-        ${ticket.priority && ticket.priority !== 'none' ? html`<span class="priority" data-priority=${ticket.priority}>${ticket.priority}</span>` : ''}</div>
-      <button class="title" @click=${() => this.open(ticket.id)}>${ticket.title}</button>
-      ${ticket.labels?.length ? html`<div class="row labels">${ticket.labels.map(label => html`<span class="badge">${label}</span>`)}</div>` : ''}
-      <div class="row caption"><span class="avatar" title=${ticket.assignee?.name ?? 'Unassigned'}>${ticket.assignee?.name.split(/\s+/).map(part => part[0]).join('').slice(0, 2) ?? '–'}</span>
-        <span>${ticket.assignee?.name ?? 'Unassigned'}</span><span class="spacer"></span>
-        ${this.movable ? html`<dees-button size="icon" type="ghost" icon="lucide:Ellipsis" text="Move ticket" .disabled=${this.pending}
+      <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}
           @clicked=${(event: Event) => kanbanEvent(this, 'kanban-move-menu', { ticketId: ticket.id, anchor: event.currentTarget as HTMLElement })}></dees-button>` : ''}
       </div>
-      ${this.subtasks.length ? html`<details><summary>${completed}/${this.subtasks.length} subtasks complete</summary>
-        ${this.subtasks.map(task => html`<div class="subtask"><span>${this.columns.some(column => column.id === task.columnId && column.done) ? '✓' : '○'}</span>
+      <button class="title" @click=${() => this.open(ticket.id)}>${ticket.title}</button>
+      <div class="row footer">
+        ${ticket.priority && ticket.priority !== 'none' ? html`<span class="priority" data-priority=${ticket.priority}><dees-icon .icon=${kanbanPriorityIcon(ticket.priority)} iconSize="13" aria-hidden="true"></dees-icon>${ticket.priority}</span>` : ''}
+        ${ticket.labels?.map(label => html`<span class="badge">${label}</span>`)}
+        <span class="assignee" title=${ticket.assignee?.name ?? 'Unassigned'}><span class="avatar" aria-hidden="true">${ticket.assignee ? kanbanInitials(ticket.assignee.name) : '–'}</span><span class="assignee-name">${ticket.assignee?.name ?? 'Unassigned'}</span></span>
+      </div>
+      ${this.subtasks.length ? html`<details><summary><dees-icon icon="lucide:ListChecks" iconSize="14" aria-hidden="true"></dees-icon>${completed}/${this.subtasks.length} subtasks complete<dees-icon class="disclosure" icon="lucide:ChevronRight" iconSize="14" aria-hidden="true"></dees-icon></summary>
+        ${this.subtasks.map(task => html`<div class="subtask"><dees-icon .icon=${this.columns.some(column => column.id === task.columnId && column.done) ? 'lucide:CircleCheck' : 'lucide:Circle'} iconSize="14" aria-hidden="true"></dees-icon>
           <button class="link" @click=${() => this.open(task.id)}>${task.title}</button></div>`)}</details>` : ''}
     </article>`;
   }

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

@@ -19,16 +19,20 @@ export class DeesKanbanColumn extends DeesElement {
   @state() private accessor dropBefore: string | undefined;
   @state() private accessor draggingOver = false;
   public static styles = [...kanbanStyles, css`
-    :host { display: flex; flex-direction: column; width: 300px; min-width: 270px; flex: 1 0 270px; }
-    section { min-height: 220px; height: 100%; border-radius: var(--dees-radius-lg); background: var(--dees-color-bg-secondary); padding: 10px; }
-    header { display: flex; align-items: center; gap: 8px; padding: 3px 3px 12px; }
-    h3 { font-size: var(--dees-font-body-size); font-weight: 600; }
-    .count { font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); }
-    .stack { display: grid; gap: 10px; min-height: 80px; align-content: start; }
+    :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); }
+    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; }
+    .status { width: 8px; height: 8px; border: 1.5px solid var(--dees-color-text-secondary); border-radius: 50%; flex-shrink: 0; }
+    .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.before::before, .end-target.before::before { content: ''; display: block; height: 3px; background: var(--dees-color-accent-primary); border-radius: 2px; margin-bottom: 7px; }
-    .end-target { min-height: 20px; padding-top: 10px; }
-    section.over { outline: 2px solid var(--dees-color-focus-ring); outline-offset: 1px; }
+    .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; }
+    .end-target { position: relative; min-height: 32px; margin-top: 8px; }
+    section.over { background: var(--dees-color-row-hover); }
+    @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 render() {
@@ -41,11 +45,11 @@ export class DeesKanbanColumn extends DeesElement {
         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 });
       }}>
-      <header><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">${this.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' : ''}"
+        <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}
             .epic=${this.allTickets.find(item => item.id === ticket.parentId && item.kind === 'epic')}

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

@@ -1,7 +1,7 @@
 import { DeesElement, customElement, property, state, html, css } from '@design.estate/dees-element';
 import type { IKanbanComment, IKanbanProvider } from '../interfaces.js';
 import { kanbanStyles } from '../kanban.styles.js';
-import { kanbanError, kanbanEvent } from '../kanban.helpers.js';
+import { kanbanError, kanbanEvent, kanbanInitials } from '../kanban.helpers.js';
 import { referenceText, type TReferenceContent, type TReferenceSearch } from '../../00group-input/dees-input-reference/index.js';
 import '../../00group-button/dees-button/dees-button.js';
 
@@ -20,31 +20,42 @@ export class DeesKanbanDiscussion extends DeesElement {
   @state() private accessor pending = new Set<string>();
   @state() private accessor failures = new Map<string, string>();
   public static styles = [...kanbanStyles, css`
-    header { display: flex; align-items: center; margin-bottom: 16px; }
-    h3 { font-size: var(--dees-font-body-size); font-weight: 600; }
+    header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+    h3 { font-size: var(--dees-font-footnote-size); font-weight: 600; }
+    .refresh::part(button) { width: 28px; height: 28px; min-height: 28px; }
     ol { list-style: none; padding: 0; margin: 0; }
-    li { padding: 0 0 20px; }
-    .author { font-weight: 550; font-size: var(--dees-font-footnote-size); }
+    li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 0; }
+    li > .avatar { width: 28px; height: 28px; margin-top: 1px; }
+    .author { font-weight: 600; font-size: var(--dees-font-footnote-size); }
+    .meta { gap: 4px 10px; }
     time { font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); }
-    .message { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; margin-top: 6px; }
-    .reference { display: inline; border: 0; border-radius: var(--dees-radius-sm); padding: 1px 4px; color: var(--dees-color-link); background: var(--dees-color-badge-default-bg); font: inherit; cursor: pointer; }
-    .compose { padding-top: 4px; }
-    .compose .row { padding-top: 8px; }
+    .message { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--dees-font-subhead-size); line-height: 22px; margin-top: 2px; }
+    .reference { display: inline; border: 0; border-radius: var(--dees-radius-sm); padding: 1px 5px; color: var(--dees-color-link); background: var(--dees-color-fill-tertiary); font: inherit; font-weight: 500; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
+    .compose { margin: 14px 0 0 38px; padding: 0; border: 1px solid var(--dees-color-control-border); border-radius: var(--dees-radius-xl); corner-shape: var(--dees-corner-shape); background: var(--dees-color-control-bg); }
+    .compose:has(dees-input-reference:focus-within) { outline: 2px solid var(--dees-color-focus-ring); outline-offset: 1px; }
+    dees-input-reference { --dees-reference-min-height: 64px; --dees-reference-font-size: var(--dees-font-subhead-size); }
+    dees-input-reference::part(editor) { border: 0; background: transparent; outline: none; }
+    .compose .row { padding: 4px 10px 10px; gap: 8px; }
+    .compose .caption { font-size: var(--dees-font-caption1-size); }
+    .shortcut { white-space: nowrap; }
+    .compose .error { padding: 0 12px 10px; }
+    @media (max-width: 600px) { .compose { margin-left: 0; } .compose .caption { flex-basis: 100%; } }
   `];
   public render() {
     const pending = this.pending.has(this.ticketId);
     const comments = this.comments.filter(comment => comment.ticketId === this.ticketId)
       .slice().sort((a, b) => Date.parse(a.createdAt) - Date.parse(b.createdAt));
-    return html`<header><h3>Discussion <span class="caption">${comments.length}</span></h3><span class="spacer"></span>
-      <dees-button size="sm" type="ghost" icon="lucide:RefreshCw" text="Refresh" .disabled=${this.loading}
+    return html`<header><h3>Discussion</h3><span class="count">${comments.length}</span><span class="spacer"></span>
+      <dees-button class="refresh" size="icon" type="ghost" icon="lucide:RefreshCw" text="Refresh" .disabled=${this.loading}
         @clicked=${() => kanbanEvent(this, 'kanban-comments-refresh', { ticketId: this.ticketId })}></dees-button></header>
       ${this.loading ? html`<p class="caption" role="status">Loading comments…</p>` : ''}
       ${this.error ? html`<p class="error" role="alert">${this.error}</p>` : ''}
       <ol aria-label="Comments">${comments.map(comment => html`<li>
-        <div class="row"><span class="author">${comment.author.name}</span><time datetime=${comment.createdAt}>${new Date(comment.createdAt).toLocaleString()}</time></div>
+        <span class="avatar" aria-hidden="true">${kanbanInitials(comment.author.name)}</span><div>
+        <div class="row meta"><span class="author">${comment.author.name}</span><time datetime=${comment.createdAt} title=${comment.createdAt}>${new Date(comment.createdAt).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })}</time></div>
         <div class="message">${comment.body.map(part => part.type === 'text' ? part.text : html`<button class="reference"
           @click=${() => kanbanEvent(this, 'kanban-ticket-open', { ticketId: part.id })}>${part.label}</button>`)}</div>
-      </li>`)}</ol>
+      </div></li>`)}</ol>
       ${!comments.length && !this.loading && !this.error ? html`<p class="empty">Start the conversation.</p>` : ''}
       ${this.addComment && !this.readOnly ? html`<div class="compose">
         <dees-input-reference label="Comment" placeholder="Write a comment…" .documentKey=${this.ticketId} .value=${this.draft} .disabled=${pending}
@@ -55,7 +66,7 @@ export class DeesKanbanDiscussion extends DeesElement {
           }}
           @reference-open=${(event: CustomEvent<{ id: string }>) => kanbanEvent(this, 'kanban-ticket-open', { ticketId: event.detail.id })}
           @reference-submit=${() => { void this.submit(); }}></dees-input-reference>
-        <div class="row"><span class="caption">Type #_ to link a ticket · Ctrl/⌘ Enter to send</span><span class="spacer"></span>
+        <div class="row"><span class="caption">Type <strong>#_</strong> to link a ticket · <span class="shortcut">Ctrl/⌘ Enter to send</span></span><span class="spacer"></span>
           <dees-button type="accent" size="sm" text="Comment" .disabled=${pending || !referenceText(this.draft).trim()}
             .status=${pending ? 'pending' : 'normal'} @clicked=${() => { void this.submit(); }}></dees-button></div>
         ${this.failures.get(this.ticketId) ? html`<p class="error" role="alert">${this.failures.get(this.ticketId)}</p>` : ''}

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

@@ -2,7 +2,7 @@ import { DeesElement, customElement, property, state, html, css } from '@design.
 import type { IKanbanColumn, IKanbanComment, IKanbanPerson, IKanbanProvider, IKanbanTicket, IKanbanTicketDraft, TKanbanPriority } from '../interfaces.js';
 import type { TReferenceContent, TReferenceSearch } from '../../00group-input/dees-input-reference/interfaces.js';
 import { kanbanStyles } from '../kanban.styles.js';
-import { kanbanEvent, sortKanbanTickets, ticketDraft, ticketLabel } from '../kanban.helpers.js';
+import { kanbanEvent, kanbanInitials, kanbanPriorityIcon, sortKanbanTickets, ticketDraft, ticketLabel } from '../kanban.helpers.js';
 import type { DeesInputText } from '../../00group-input/dees-input-text/dees-input-text.js';
 import type { DeesInputTextarea } from '../../00group-input/dees-input-textarea/dees-input-textarea.js';
 import '../../00group-input/dees-input-text/dees-input-text.js';
@@ -28,22 +28,44 @@ export class DeesKanbanTicketDetail extends DeesElement {
   @property({ type: String }) accessor error = '';
   @property({ type: Boolean }) accessor saving = false;
   @property({ type: Boolean }) accessor canGoBack = false;
+  /** Keep the identifier visible unless the containing surface already labels the ticket. */
+  @property({ type: Boolean }) accessor showTicketKey = true;
   @state() private accessor editing = false;
   public static styles = [...kanbanStyles, css`
-    .layout { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; }
-    .main { min-width: 0; }
-    .toolbar { margin-bottom: 16px; }
-    h2 { font-size: var(--dees-font-title2-size); line-height: 1.3; font-weight: 600; margin-bottom: 18px; overflow-wrap: anywhere; }
-    .description { white-space: pre-wrap; line-height: 1.65; overflow-wrap: anywhere; margin-bottom: 24px; }
-    aside { border-left: 1px solid var(--dees-color-border-subtle); padding-left: 22px; }
-    .fields { display: grid; gap: 16px; }
-    .fields label { display: block; margin-bottom: 6px; }
-    h3 { font-size: var(--dees-font-body-size); margin-bottom: 12px; }
+    :host { padding: 24px; }
+    .layout { display: grid; grid-template-columns: minmax(0, 1fr) 248px; grid-template-areas: 'lead props' 'body props'; gap: 24px; align-items: start; }
+    .lead { grid-area: lead; min-width: 0; }
+    .body { grid-area: body; min-width: 0; }
+    .toolbar { margin-bottom: 20px; flex-wrap: nowrap; min-width: 0; }
+    .toolbar .badge { text-transform: capitalize; flex-shrink: 0; }
+    .ticket-key { flex-shrink: 0; font-variant-numeric: tabular-nums; }
+    .link.parent { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--dees-font-footnote-size); }
+    .toolbar dees-button { flex-shrink: 0; }
+    h2 { font-size: var(--dees-font-title2-size); line-height: 1.3; font-weight: 600; margin-bottom: 12px; letter-spacing: -.015em; overflow-wrap: anywhere; }
+    .description { white-space: pre-wrap; font-size: var(--dees-font-subhead-size); line-height: 22px; overflow-wrap: anywhere; max-width: 64ch; }
+    aside { grid-area: props; min-width: 0; padding: 14px 16px; border-radius: var(--dees-radius-xl); corner-shape: var(--dees-corner-shape); background: var(--dees-color-settings-group); }
+    .fields { display: grid; gap: 14px; font-size: var(--dees-font-footnote-size); font-weight: 500; }
+    .fields label { display: block; margin-bottom: 5px; font-size: var(--dees-font-caption1-size); font-weight: 400; }
+    .value { min-height: var(--dees-control-height-lg); display: flex; align-items: center; }
+    .person { display: flex; align-items: center; gap: 7px; }
     .children { margin-bottom: 24px; }
-    .child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--dees-color-border-subtle); }
-    .discussion { border-top: 1px solid var(--dees-color-border-subtle); padding-top: 22px; }
-    .edit { display: grid; gap: 14px; margin-bottom: 22px; }
-    @media (max-width: 700px) { .layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } aside { grid-row: 1; border-left: 0; padding-left: 0; } .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+    .child-list { border-radius: var(--dees-radius-xl); corner-shape: var(--dees-corner-shape); background: var(--dees-color-settings-group); overflow: hidden; }
+    .child { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+    .child + .child { border-top: 1px solid var(--dees-color-border-subtle); }
+    .child:hover { background: var(--dees-color-row-hover); }
+    .child:focus-visible { outline-offset: -3px; }
+    .child-key { font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); font-variant-numeric: tabular-nums; flex-shrink: 0; }
+    .child-title { flex: 1; min-width: 0; font-size: var(--dees-font-footnote-size); font-weight: 500; overflow-wrap: anywhere; }
+    .child .badge { flex-shrink: 0; }
+    .discussion { border-top: 1px solid var(--dees-color-border-subtle); padding-top: 20px; }
+    .edit { display: grid; gap: 14px; }
+    @media (max-width: 700px) {
+      :host { padding: 16px; }
+      .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'lead' 'props' 'body'; gap: 20px; }
+      .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+      .toolbar { gap: 6px; margin-bottom: 16px; }
+      .child { gap: 7px; }
+    }
   `];
   public updated(changed: Map<string, unknown>): void {
     const previous = changed.get('ticket') as IKanbanTicket | undefined;
@@ -65,12 +87,13 @@ export class DeesKanbanTicketDetail extends DeesElement {
     const parents = this.tickets.filter(item => item.kind === (ticket.kind === 'subtask' ? 'task' : 'epic'));
     return html`<div class="toolbar row">
       ${this.canGoBack ? html`<dees-button size="sm" type="ghost" icon="lucide:ArrowLeft" text="Back" @clicked=${() => kanbanEvent(this, 'kanban-detail-back', {})}></dees-button>` : ''}
-      <span class="badge">${ticket.kind}</span><span class="caption">${ticket.key}</span>
-      ${parent ? html`<span class="caption">/</span><button class="link caption" @click=${() => kanbanEvent(this, 'kanban-ticket-open', { ticketId: parent.id })}>${parent.title}</button>` : ''}
+      <span class="badge">${ticket.kind}</span>
+      ${this.showTicketKey ? html`<span class="caption ticket-key">${ticket.key}</span>` : ''}
+      ${parent ? html`<span class="caption" aria-hidden="true">/</span><button class="link parent" title=${parent.title} @click=${() => kanbanEvent(this, 'kanban-ticket-open', { ticketId: parent.id })}>${parent.title}</button>` : ''}
       <span class="spacer"></span>${editable && !this.editing ? html`<dees-button size="sm" type="ghost" text="Edit ticket" icon="lucide:Pencil" @clicked=${() => { this.editing = true; this.changeDraft({}); }}></dees-button>` : ''}
     </div>
     ${this.error ? html`<p class="error" role="alert">${this.error}</p>` : ''}
-    <div class="layout"><div class="main">
+    <div class="layout"><section class="lead">
       ${this.editing && editable ? html`<div class="edit">
         <dees-input-text label="Title" .value=${draft.title} .disabled=${this.saving}
           @input=${(event: Event) => this.changeDraft({ title: String((event.currentTarget as DeesInputText).value ?? '') })}></dees-input-text>
@@ -82,33 +105,36 @@ export class DeesKanbanTicketDetail extends DeesElement {
             this.editing = false; this.draft = undefined; kanbanEvent(this, 'kanban-ticket-draft', { ticketId: ticket.id, draft: undefined });
           }}></dees-button></div>
       </div>` : html`<h2>${ticket.title}</h2><div class="description ${ticket.description ? '' : 'muted'}">${ticket.description || 'No description yet.'}</div>`}
-      ${ticket.kind !== 'subtask' ? html`<section class="children"><div class="row"><h3>${ticket.kind === 'epic' ? 'Tasks' : 'Subtasks'}</h3><span class="spacer"></span>
-        ${this.provider.createTicket && ticket.permissions?.createChild !== false ? html`<dees-button size="sm" type="ghost" icon="lucide:Plus" text=${ticket.kind === 'epic' ? 'Add task' : 'Add subtask'}
-          @clicked=${() => kanbanEvent(this, 'kanban-ticket-create', { kind: ticket.kind === 'epic' ? 'task' : 'subtask', parentId: ticket.id, columnId: this.columns[0]?.id ?? ticket.columnId })}></dees-button>` : ''}</div>
-        ${children.map(child => html`<div class="child"><button class="link" @click=${() => kanbanEvent(this, 'kanban-ticket-open', { ticketId: child.id })}>${ticketLabel(child)}</button>
-          <span class="badge">${this.columns.find(column => column.id === child.columnId)?.title ?? child.columnId}</span></div>`)}
-        ${!children.length ? html`<p class="caption">No ${ticket.kind === 'epic' ? 'tasks' : 'subtasks'} yet.</p>` : ''}</section>` : ''}
-      <dees-kanban-discussion class="discussion" .ticketId=${ticket.id} .comments=${this.comments} .draft=${this.commentDraft}
-        .loading=${this.loadingComments} .error=${this.commentsError} .readOnly=${ticket.permissions?.comment === false}
-        .searchTickets=${this.searchTickets} .addComment=${this.provider.addComment ? this.addComment : undefined}></dees-kanban-discussion>
-    </div><aside><div class="fields">
-      <dees-input-dropdown label="Status" .options=${this.columns.map(column => ({ key: column.id, option: column.title }))}
+    </section><aside><div class="fields">
+      <div><label class="caption">Status</label><dees-input-dropdown label="Status" .labelPosition=${'none'} .options=${this.columns.map(column => ({ key: column.id, option: column.title }))}
         .value=${{ key: ticket.columnId, option: this.columns.find(column => column.id === ticket.columnId)?.title ?? ticket.columnId }}
-        .disabled=${!movable || this.saving} @selectedOption=${(event: CustomEvent<{ key: string }>) => kanbanEvent(this, 'kanban-ticket-move', { ticketId: ticket.id, columnId: event.detail.key })}></dees-input-dropdown>
+        .disabled=${!movable || this.saving} @selectedOption=${(event: CustomEvent<{ key: string }>) => kanbanEvent(this, 'kanban-ticket-move', { ticketId: ticket.id, columnId: event.detail.key })}></dees-input-dropdown></div>
       ${this.editing && editable ? html`
-        <dees-input-dropdown label="Priority" .disabled=${this.saving} .value=${{ key: draft.priority, option: draft.priority }}
+        <div><label class="caption">Priority</label><dees-input-dropdown label="Priority" .labelPosition=${'none'} .disabled=${this.saving} .value=${{ key: draft.priority, option: draft.priority }}
           .options=${['none', 'low', 'normal', 'high', 'urgent'].map(key => ({ key, option: key }))}
-          @selectedOption=${(event: CustomEvent<{ key: TKanbanPriority }>) => this.changeDraft({ priority: event.detail.key })}></dees-input-dropdown>
-        <dees-input-dropdown label="Assignee" .disabled=${this.saving} .value=${{ key: draft.assigneeId, option: this.people.find(person => person.id === draft.assigneeId)?.name ?? ticket.assignee?.name ?? 'Unassigned' }}
+          @selectedOption=${(event: CustomEvent<{ key: TKanbanPriority }>) => this.changeDraft({ priority: event.detail.key })}></dees-input-dropdown></div>
+        <div><label class="caption">Assignee</label><dees-input-dropdown label="Assignee" .labelPosition=${'none'} .disabled=${this.saving} .value=${{ key: draft.assigneeId, option: this.people.find(person => person.id === draft.assigneeId)?.name ?? ticket.assignee?.name ?? 'Unassigned' }}
           .options=${[{ key: '', option: 'Unassigned' }, ...this.people.map(person => ({ key: person.id, option: person.name }))]}
-          @selectedOption=${(event: CustomEvent<{ key: string }>) => this.changeDraft({ assigneeId: event.detail.key })}></dees-input-dropdown>
-        ${ticket.kind !== 'epic' ? html`<dees-input-dropdown label=${ticket.kind === 'task' ? 'Epic' : 'Parent task'} .disabled=${this.saving}
+          @selectedOption=${(event: CustomEvent<{ key: string }>) => this.changeDraft({ assigneeId: event.detail.key })}></dees-input-dropdown></div>
+        ${ticket.kind !== 'epic' ? html`<div><label class="caption">${ticket.kind === 'task' ? 'Epic' : 'Parent task'}</label><dees-input-dropdown label=${ticket.kind === 'task' ? 'Epic' : 'Parent task'} .labelPosition=${'none'} .disabled=${this.saving}
           .value=${{ key: draft.parentId, option: parents.find(item => item.id === draft.parentId)?.title ?? 'None' }}
           .options=${[...(ticket.kind === 'task' ? [{ key: '', option: 'None' }] : []), ...parents.map(item => ({ key: item.id, option: ticketLabel(item) }))]}
-          @selectedOption=${(event: CustomEvent<{ key: string }>) => this.changeDraft({ parentId: event.detail.key })}></dees-input-dropdown>` : ''}
-      ` : html`<div><label class="caption">Priority</label>${ticket.priority ?? 'none'}</div><div><label class="caption">Assignee</label>${ticket.assignee?.name ?? 'Unassigned'}</div>`}
-      ${ticket.labels?.length ? html`<div><label class="caption">Labels</label><div class="row">${ticket.labels.map(label => html`<span class="badge">${label}</span>`)}</div></div>` : ''}
-    </div></aside></div>`;
+          @selectedOption=${(event: CustomEvent<{ key: string }>) => this.changeDraft({ parentId: event.detail.key })}></dees-input-dropdown></div>` : ''}
+      ` : html`<div><label class="caption">Priority</label><span class="priority value" data-priority=${ticket.priority ?? 'none'}><dees-icon .icon=${kanbanPriorityIcon(ticket.priority)} iconSize="13" aria-hidden="true"></dees-icon>${ticket.priority ?? 'none'}</span></div>
+        <div><label class="caption">Assignee</label><span class="person value"><span class="avatar" aria-hidden="true">${ticket.assignee ? kanbanInitials(ticket.assignee.name) : '–'}</span>${ticket.assignee?.name ?? 'Unassigned'}</span></div>`}
+      ${ticket.labels?.length ? html`<div><label class="caption">Labels</label><div class="row value">${ticket.labels.map(label => html`<span class="badge">${label}</span>`)}</div></div>` : ''}
+    </div></aside><div class="body">
+      ${ticket.kind !== 'subtask' ? html`<section class="children"><div class="section-title"><h3>${ticket.kind === 'epic' ? 'Tasks' : 'Subtasks'}</h3><span class="count">${children.length}</span><span class="spacer"></span>
+        ${this.provider.createTicket && ticket.permissions?.createChild !== false ? html`<dees-button size="sm" type="ghost" icon="lucide:Plus" text=${ticket.kind === 'epic' ? 'Add task' : 'Add subtask'}
+          @clicked=${() => kanbanEvent(this, 'kanban-ticket-create', { kind: ticket.kind === 'epic' ? 'task' : 'subtask', parentId: ticket.id, columnId: this.columns[0]?.id ?? ticket.columnId })}></dees-button>` : ''}</div>
+        <div class="child-list">${children.map(child => html`<button class="child" @click=${() => kanbanEvent(this, 'kanban-ticket-open', { ticketId: child.id })}>
+          <span class="child-key">${child.key}</span><span class="child-title">${child.title}</span>
+          <span class="badge">${this.columns.find(column => column.id === child.columnId)?.title ?? child.columnId}</span></button>`)}</div>
+        ${!children.length ? html`<p class="caption">No ${ticket.kind === 'epic' ? 'tasks' : 'subtasks'} yet.</p>` : ''}</section>` : ''}
+      <dees-kanban-discussion class="discussion" .ticketId=${ticket.id} .comments=${this.comments} .draft=${this.commentDraft}
+        .loading=${this.loadingComments} .error=${this.commentsError} .readOnly=${ticket.permissions?.comment === false}
+        .searchTickets=${this.searchTickets} .addComment=${this.provider.addComment ? this.addComment : undefined}></dees-kanban-discussion>
+    </div></div>`;
   }
   public finishEditing(): void { this.editing = false; }
 }

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

@@ -1,4 +1,8 @@
-import type { IKanbanTicket, IKanbanTicketDraft } from './interfaces.js';
+import type { IKanbanTicket, IKanbanTicketDraft, TKanbanPriority } from './interfaces.js';
+
+export const kanbanInitials = (name: string): string => name.trim().split(/\s+/).map(part => part[0]).join('').slice(0, 2);
+export const kanbanPriorityIcon = (priority?: TKanbanPriority): string =>
+  priority === 'urgent' ? 'lucide:ChevronsUp' : priority === 'high' ? 'lucide:ChevronUp' : priority === 'low' ? 'lucide:ChevronDown' : 'lucide:Minus';
 
 export const sortKanbanTickets = (tickets: readonly IKanbanTicket[]): IKanbanTicket[] =>
   [...tickets].sort((a, b) => a.order - b.order || a.id.localeCompare(b.id));

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

@@ -2,7 +2,7 @@ import { css, cssManager } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../00theme.js';
 
 export const kanbanStyles = [themeDefaultStyles, cssManager.defaultStyles, css`
-  :host { display: block; min-width: 0; font-family: var(--dees-font-family); color: var(--dees-color-text-primary); font-size: var(--dees-font-body-size); }
+  :host { display: block; min-width: 0; font-family: var(--dees-font-family); color: var(--dees-color-text-primary); font-size: var(--dees-font-subhead-size); line-height: 1.5; }
   * { box-sizing: border-box; }
   h2, h3, p { margin: 0; }
   .muted { color: var(--dees-color-text-secondary); }
@@ -14,5 +14,13 @@ export const kanbanStyles = [themeDefaultStyles, cssManager.defaultStyles, css`
   button.link { border: 0; background: transparent; font: inherit; color: var(--dees-color-link); padding: 2px 0; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
   button:focus-visible, summary:focus-visible { outline: 2px solid var(--dees-color-focus-ring); outline-offset: 3px; border-radius: var(--dees-radius-sm); }
   dees-icon { font-size: 16px; }
-  .badge { display: inline-flex; align-items: center; gap: 4px; background: var(--dees-color-badge-default-bg); padding: 3px 7px; border-radius: var(--dees-radius-sm); font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); }
+  .badge { display: inline-flex; align-items: center; gap: 4px; background: var(--dees-color-fill-tertiary); padding: 3px 7px; border-radius: var(--dees-radius-sm); font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); }
+  .avatar { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--dees-color-fill-secondary); color: var(--dees-color-text-secondary); display: inline-grid; place-items: center; font-size: 10px; font-weight: 600; line-height: 1; }
+  .priority { display: inline-flex; align-items: center; gap: 3px; font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); text-transform: capitalize; }
+  .priority[data-priority=urgent] { color: var(--dees-color-text-error); }
+  .priority[data-priority=high] { color: var(--dees-color-text-warning); }
+  .priority dees-icon { font-size: 13px; }
+  .section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
+  .section-title h3 { font-size: var(--dees-font-footnote-size); font-weight: 600; }
+  .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--dees-radius-sm); background: var(--dees-color-fill-tertiary); color: var(--dees-color-text-secondary); font-size: var(--dees-font-caption1-size); font-weight: 500; font-variant-numeric: tabular-nums; }
 `];