@design.estate/dees-catalog 12.5.0 → 13.0.1

package/dist_bundle/bundle.js

@@ -140107,7 +140107,7 @@ var renderChartArea = /* @__PURE__ */ __name((component) => {
           <div class="chartContainer">
             <div class="rangeSelectionOverlay" aria-hidden="true"></div>
           </div>
-          ${!component.chartSeries.some((series) => series.data.length) ? b2`<div class="chartState" role="status">No data for this period</div>` : ""}
+          ${!component.chartSeries.some((series) => series.data.some((point4) => point4.y !== null)) ? b2`<div class="chartState" role="status">No data for this period</div>` : ""}
           ${component.seriesStats.length > 0 && !component.hideLegend ? b2`
             <div slot="footer" class="statsBar">
               ${component.seriesStats.map((s9) => b2`
@@ -140115,7 +140115,7 @@ var renderChartArea = /* @__PURE__ */ __name((component) => {
                   <span class="statsColor" style="background:${s9.color}"></span>
                   <span class="statsName">${s9.name}</span>
                   ${component.legendStats.filter((key2) => key2 === "latest" || key2 === "min" || key2 === "max" || key2 === "avg").map((key2) => b2`
-                      <span class="statsItem">${key2} <strong>${component.yAxisFormatter(s9[key2])}</strong></span>
+                      <span class="statsItem">${key2} <strong>${s9[key2] === null ? "\u2014" : component.yAxisFormatter(s9[key2])}</strong></span>
                     `)}
                 </div>
               `)}
@@ -140173,7 +140173,7 @@ var planRealtimeChartUpdates = /* @__PURE__ */ __name((renderedData, canonicalDa
       updates.push({ point: canonicalPoint, historicalUpdate: false });
       continue;
     }
-    if (renderedPoint.value !== canonicalPoint.value) {
+    if (renderedPoint.value !== canonicalPoint.value || "value" in renderedPoint !== "value" in canonicalPoint) {
       updates.push({
         point: canonicalPoint,
         historicalUpdate: canonicalPoint.time < renderedLastTime
@@ -140302,6 +140302,9 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
     __publicField(this, "autoScrollTimer", null);
     __publicField(this, "lcBundle", null);
     __publicField(this, "seriesApis", /* @__PURE__ */ new Map());
+    /** LC's data() omits whitespace; this mirrors the exact points sent to each series API. */
+    __publicField(this, "renderedSeriesData", /* @__PURE__ */ new Map());
+    __publicField(this, "renderedSegments", []);
     __publicField(this, "priceLines", /* @__PURE__ */ new Map());
     __publicField(this, "tooltipEl", null);
     __publicField(this, "crosshairActive", false);
@@ -140404,6 +140407,8 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
         console.error("Error destroying chart:", error);
       } finally {
         this.seriesApis.clear();
+        this.renderedSeriesData.clear();
+        this.renderedSegments = [];
         this.priceLines.clear();
       }
     });
@@ -140498,8 +140503,8 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
     for (const point4 of data) {
       const ms = typeof point4.x === "number" ? point4.x : new Date(point4.x).getTime();
       const time = Math.floor(ms / 1e3);
-      if (!Number.isFinite(time) || !Number.isFinite(point4.y)) continue;
-      pointsByTime.set(time, { time, value: point4.y });
+      if (!Number.isFinite(time) || point4.y !== null && !Number.isFinite(point4.y)) continue;
+      pointsByTime.set(time, point4.y === null ? { time } : { time, value: point4.y });
     }
     return [...pointsByTime.values()].sort((a4, b4) => a4.time - b4.time);
   }
@@ -140509,6 +140514,41 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
   getSeriesKey(series, index3) {
     return `${index3}:${this.getSeriesName(series, index3)}`;
   }
+  /**
+   * Lightweight Charts joins Area points across whitespace. Render each
+   * uninterrupted numeric run as its own Area series instead. All missing
+   * timestamps stay on the first real series so the time scale keeps them;
+   * there is no synthetic numeric value or extra public legend series.
+   */
+  getRenderedSegments(chartSeries) {
+    const renderedSegments = [];
+    chartSeries.forEach((series, logicalIndex) => {
+      const points = this.convertDataToLC(series.data);
+      const missingPoints = points.filter((point4) => !("value" in point4));
+      const numericRuns = [];
+      let currentRun = [];
+      for (const point4 of points) {
+        if ("value" in point4) {
+          currentRun.push(point4);
+        } else if (currentRun.length > 0) {
+          numericRuns.push(currentRun);
+          currentRun = [];
+        }
+      }
+      if (currentRun.length > 0) numericRuns.push(currentRun);
+      if (numericRuns.length === 0) numericRuns.push([]);
+      const baseKey = this.getSeriesKey(series, logicalIndex);
+      numericRuns.forEach((run3, segmentIndex) => {
+        const data = segmentIndex === 0 ? [...run3, ...missingPoints].sort((left, right) => left.time - right.time) : run3;
+        renderedSegments.push({
+          key: segmentIndex === 0 ? baseKey : `${baseKey}#${segmentIndex}`,
+          logicalIndex,
+          data
+        });
+      });
+    });
+    return renderedSegments;
+  }
   getCanonicalChartSeries(chartSeries) {
     const cutoffTime = Date.now() - this.rollingWindow;
     return chartSeries.map((series) => ({
@@ -140519,12 +140559,27 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
         return ms > cutoffTime;
       })).map((point4) => ({
         x: point4.time * 1e3,
-        y: point4.value
+        y: "value" in point4 ? point4.value : null
       }))
     }));
   }
-  getRenderedSeriesData(api) {
-    return api.data().filter((point4) => "value" in point4).map((point4) => ({ time: point4.time, value: point4.value }));
+  getRenderedSeriesData(segmentKey) {
+    const renderedData = this.renderedSeriesData.get(segmentKey);
+    if (!renderedData) throw new Error(`Missing rendered chart data for ${segmentKey}`);
+    return renderedData;
+  }
+  rememberRenderedSeriesData(segmentKey, data) {
+    this.renderedSeriesData.set(segmentKey, data.map((point4) => "value" in point4 ? { time: point4.time, value: point4.value } : { time: point4.time }));
+  }
+  rememberIncrementalUpdate(segmentKey, point4) {
+    const renderedData = this.getRenderedSeriesData(segmentKey);
+    const existingIndex = renderedData.findIndex((entry) => entry.time === point4.time);
+    if (existingIndex >= 0) renderedData[existingIndex] = point4;
+    else renderedData.push(point4);
+  }
+  toLcPoint(point4) {
+    const time = point4.time;
+    return point4.value === void 0 ? { time } : { time, value: point4.value };
   }
   colorToRgba(color2, alpha2) {
     if (/^#[0-9a-fA-F]{6}$/.test(color2)) {
@@ -140583,27 +140638,34 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
         horzLines: { color: getThemeColors(this.goBright).borderSubtle }
       }
     });
-    let idx = 0;
-    for (const [, api] of this.seriesApis) {
-      const color2 = this.resolveSeriesColor(this.chartSeries[idx], idx, isDark);
+    for (const segment of this.renderedSegments) {
+      const api = this.seriesApis.get(segment.key);
+      if (!api) continue;
+      const color2 = this.resolveSeriesColor(
+        this.chartSeries[segment.logicalIndex],
+        segment.logicalIndex,
+        isDark
+      );
       api.applyOptions({
         topColor: this.colorToRgba(color2, isDark ? 0.4 : 0.5),
         bottomColor: this.colorToRgba(color2, 0),
         lineColor: color2
       });
-      idx++;
     }
   }
-  recreateSeries(chartSeries) {
+  recreateSeries(chartSeries, renderedSegments = this.getRenderedSegments(chartSeries)) {
     if (!this.chart || !this.lcBundle) return;
     const isDark = !this.goBright;
     for (const [, api] of this.seriesApis) {
       this.chart.removeSeries(api);
     }
     this.seriesApis.clear();
+    this.renderedSeriesData.clear();
     this.priceLines.clear();
-    chartSeries.forEach((s9, index3) => {
-      const color2 = this.resolveSeriesColor(s9, index3, isDark);
+    this.renderedSegments = renderedSegments;
+    renderedSegments.forEach((segment) => {
+      const series = chartSeries[segment.logicalIndex];
+      const color2 = this.resolveSeriesColor(series, segment.logicalIndex, isDark);
       const api = this.chart.addSeries(this.lcBundle.AreaSeries, {
         topColor: this.colorToRgba(color2, isDark ? 0.4 : 0.5),
         bottomColor: this.colorToRgba(color2, 0),
@@ -140615,9 +140677,12 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
         crosshairMarkerVisible: true,
         crosshairMarkerRadius: 4
       });
-      api.setData(this.convertDataToLC(s9.data));
-      this.updatePriceLines(this.getSeriesKey(s9, index3), api, s9.data, color2);
-      this.seriesApis.set(this.getSeriesKey(s9, index3), api);
+      api.setData(segment.data);
+      this.seriesApis.set(segment.key, api);
+      this.rememberRenderedSeriesData(segment.key, segment.data);
+      if (segment.key === this.getSeriesKey(series, segment.logicalIndex)) {
+        this.updatePriceLines(segment.key, api, series.data, color2);
+      }
     });
     this.applyYAxisScale(chartSeries);
     this.computeStats(chartSeries);
@@ -140630,17 +140695,19 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
   }
   updateSeriesPresentation(chartSeries) {
     const isDark = !this.goBright;
-    chartSeries.forEach((series, index3) => {
-      const seriesKey = this.getSeriesKey(series, index3);
-      const api = this.seriesApis.get(seriesKey);
+    this.renderedSegments.forEach((segment) => {
+      const series = chartSeries[segment.logicalIndex];
+      const api = this.seriesApis.get(segment.key);
       if (!api) return;
-      const color2 = this.resolveSeriesColor(series, index3, isDark);
+      const color2 = this.resolveSeriesColor(series, segment.logicalIndex, isDark);
       api.applyOptions({
         topColor: this.colorToRgba(color2, isDark ? 0.4 : 0.5),
         bottomColor: this.colorToRgba(color2, 0),
         lineColor: color2
       });
-      this.updatePriceLines(seriesKey, api, series.data, color2);
+      if (segment.key === this.getSeriesKey(series, segment.logicalIndex)) {
+        this.updatePriceLines(segment.key, api, series.data, color2);
+      }
     });
     this.computeStats(chartSeries);
     this.applyYAxisScale(chartSeries);
@@ -140651,7 +140718,7 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
     if (this.yAxisScaling === "dynamic") {
       maxValue = 1;
       for (const entry of series) for (const point4 of entry.data) {
-        if (!Number.isFinite(point4.y)) continue;
+        if (point4.y === null || !Number.isFinite(point4.y)) continue;
         minValue = Math.min(minValue, Math.floor(point4.y * 1.1));
         maxValue = Math.max(maxValue, Math.ceil(point4.y * 1.1));
       }
@@ -140674,21 +140741,37 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
   flushPendingRealtimePrune() {
     if (!this.pendingRealtimePrune || this.crosshairActive || !this.chart || !this.realtimeMode || this.rollingWindow <= 0) return;
     const canonicalSeries = this.getCanonicalChartSeries(this.internalChartData);
-    canonicalSeries.forEach((series, index3) => {
-      const api = this.seriesApis.get(this.getSeriesKey(series, index3));
-      if (api) api.setData(this.convertDataToLC(series.data));
+    const canonicalSegments = this.getRenderedSegments(canonicalSeries);
+    if (!haveSameSeriesLayout(
+      [...this.seriesApis.keys()],
+      canonicalSegments.map((segment) => segment.key)
+    )) {
+      this.clearCrosshairForDataReplacement();
+      this.internalChartData = canonicalSeries;
+      this.recreateSeries(canonicalSeries, canonicalSegments);
+      return;
+    }
+    canonicalSegments.forEach((segment) => {
+      const api = this.seriesApis.get(segment.key);
+      if (api) {
+        api.setData(segment.data);
+        this.rememberRenderedSeriesData(segment.key, segment.data);
+      }
     });
+    this.internalChartData = canonicalSeries;
+    this.renderedSegments = canonicalSegments;
     this.pendingRealtimePrune = false;
+    this.updateSeriesPresentation(canonicalSeries);
   }
   computeStats(chartSeries) {
     const isDark = !this.goBright;
     this.seriesStats = chartSeries.map((s9, index3) => {
       const color2 = this.resolveSeriesColor(s9, index3, isDark);
-      const values = s9.data.map((d5) => d5.y);
+      const values = s9.data.map((point4) => point4.y).filter((value2) => value2 !== null && Number.isFinite(value2));
+      const latest = s9.data.length > 0 ? s9.data[s9.data.length - 1].y : null;
       if (values.length === 0) {
-        return { name: s9.name || `series-${index3}`, latest: 0, min: 0, max: 0, avg: 0, color: color2 };
+        return { name: s9.name || `series-${index3}`, latest: null, min: null, max: null, avg: null, color: color2 };
       }
-      const latest = values[values.length - 1];
       const min3 = Math.min(...values);
       const max3 = Math.max(...values);
       const avg = Math.round(values.reduce((sum, v4) => sum + v4, 0) / values.length * 100) / 100;
@@ -140702,11 +140785,11 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
         api.removePriceLine(line);
       }
     }
-    if (data.length === 0) {
+    const values = data.map((point4) => point4.y).filter((value2) => value2 !== null && Number.isFinite(value2));
+    if (values.length === 0) {
       this.priceLines.set(name, []);
       return;
     }
-    const values = data.map((d5) => d5.y);
     const avg = values.reduce((sum, v4) => sum + v4, 0) / values.length;
     const max3 = Math.max(...values);
     const lines = [];
@@ -140754,23 +140837,24 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
       const textColor = isDark ? "hsl(0 0% 95%)" : "hsl(0 0% 9%)";
       const borderColor = isDark ? "hsl(0 0% 14.9%)" : "hsl(0 0% 89.8%)";
       let html8 = "";
-      let idx = 0;
       let hasData = false;
-      for (const api of this.seriesApis.values()) {
+      for (const segment of this.renderedSegments) {
+        const api = this.seriesApis.get(segment.key);
+        if (!api) continue;
         const data = param.seriesData.get(api);
-        if (data && "value" in data && data.value !== void 0) {
+        if (data && "value" in data && typeof data.value === "number") {
+          const marginTop = hasData ? "6px" : "0";
           hasData = true;
-          const series = this.internalChartData[idx];
-          const name = series ? this.getSeriesName(series, idx) : `series-${idx}`;
-          const color2 = this.resolveSeriesColor(series, idx, isDark);
+          const series = this.internalChartData[segment.logicalIndex];
+          const name = this.getSeriesName(series, segment.logicalIndex);
+          const color2 = this.resolveSeriesColor(series, segment.logicalIndex, isDark);
           const formatted = this.yAxisFormatter(data.value);
-          html8 += `<div style="display:flex;align-items:center;gap:8px;margin:${idx > 0 ? "6px" : "0"} 0;">
+          html8 += `<div style="display:flex;align-items:center;gap:8px;margin:${marginTop} 0;">
             <span style="display:inline-block;width:10px;height:10px;background:${color2};border-radius:2px;"></span>
             <span style="font-weight:500;">${name}:</span>
             <span style="margin-left:auto;font-weight:600;">${formatted}</span>
           </div>`;
         }
-        idx++;
       }
       if (!hasData) {
         this.tooltipEl.style.display = "none";
@@ -140887,69 +140971,65 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
     try {
       void animate;
       const canonicalSeries = this.getCanonicalChartSeries(newSeries);
+      const renderedSegments = this.getRenderedSegments(canonicalSeries);
       this.internalChartData = canonicalSeries;
       const renderedKeys = [...this.seriesApis.keys()];
-      const canonicalKeys = canonicalSeries.map((series, index3) => this.getSeriesKey(series, index3));
+      const canonicalKeys = renderedSegments.map((segment) => segment.key);
       if (!haveSameSeriesLayout(renderedKeys, canonicalKeys)) {
         this.clearCrosshairForDataReplacement();
-        this.recreateSeries(canonicalSeries);
+        this.recreateSeries(canonicalSeries, renderedSegments);
         this.updateSeriesPresentation(canonicalSeries);
         return;
       }
+      this.renderedSegments = renderedSegments;
       if (!this.realtimeMode || this.rollingWindow <= 0) {
         this.clearCrosshairForDataReplacement();
-        canonicalSeries.forEach((series, index3) => {
-          this.seriesApis.get(this.getSeriesKey(series, index3)).setData(this.convertDataToLC(series.data));
+        renderedSegments.forEach((segment) => {
+          this.seriesApis.get(segment.key).setData(segment.data);
+          this.rememberRenderedSeriesData(segment.key, segment.data);
         });
         this.pendingRealtimePrune = false;
         this.updateSeriesPresentation(canonicalSeries);
         return;
       }
-      const plannedUpdates = canonicalSeries.map((series, index3) => {
-        const api = this.seriesApis.get(this.getSeriesKey(series, index3));
-        const canonicalData = this.convertDataToLC(series.data).map((point4) => ({ time: point4.time, value: point4.value }));
+      const plannedUpdates = renderedSegments.map((segment) => {
+        const api = this.seriesApis.get(segment.key);
+        const canonicalData = segment.data.map((point4) => "value" in point4 ? { time: point4.time, value: point4.value } : { time: point4.time });
         return {
+          key: segment.key,
           api,
           canonicalData,
-          plan: planRealtimeChartUpdates(this.getRenderedSeriesData(api), canonicalData)
+          plan: planRealtimeChartUpdates(this.getRenderedSeriesData(segment.key), canonicalData)
         };
       });
       if (plannedUpdates.some(({ plan }) => plan.replacementRequired)) {
         this.clearCrosshairForDataReplacement();
-        for (const { api, canonicalData } of plannedUpdates) {
-          api.setData(canonicalData.map((point4) => ({
-            time: point4.time,
-            value: point4.value
-          })));
+        for (const { key: key2, api, canonicalData } of plannedUpdates) {
+          api.setData(canonicalData.map((point4) => this.toLcPoint(point4)));
+          this.renderedSeriesData.set(key2, [...canonicalData]);
         }
         this.pendingRealtimePrune = false;
       } else {
-        for (const { api, plan } of plannedUpdates) {
+        for (const { key: key2, api, plan } of plannedUpdates) {
           for (const update of plan.updates) {
-            api.update({
-              time: update.point.time,
-              value: update.point.value
-            }, update.historicalUpdate);
+            api.update(this.toLcPoint(update.point), update.historicalUpdate);
+            this.rememberIncrementalUpdate(key2, update.point);
           }
         }
         const pruneRequired = plannedUpdates.some(({ plan }) => plan.pruneRequired);
         const pruneRecommended = plannedUpdates.some(({ plan }) => plan.pruneRecommended);
         if (pruneRequired) {
           this.clearCrosshairForDataReplacement();
-          for (const { api, canonicalData } of plannedUpdates) {
-            api.setData(canonicalData.map((point4) => ({
-              time: point4.time,
-              value: point4.value
-            })));
+          for (const { key: key2, api, canonicalData } of plannedUpdates) {
+            api.setData(canonicalData.map((point4) => this.toLcPoint(point4)));
+            this.renderedSeriesData.set(key2, [...canonicalData]);
           }
         } else if (pruneRecommended && this.crosshairActive) {
           this.pendingRealtimePrune = true;
         } else if (pruneRecommended) {
-          for (const { api, canonicalData } of plannedUpdates) {
-            api.setData(canonicalData.map((point4) => ({
-              time: point4.time,
-              value: point4.value
-            })));
+          for (const { key: key2, api, canonicalData } of plannedUpdates) {
+            api.setData(canonicalData.map((point4) => this.toLcPoint(point4)));
+            this.renderedSeriesData.set(key2, [...canonicalData]);
           }
           this.pendingRealtimePrune = false;
         }
@@ -183699,7 +183779,7 @@ var DeesTerminalView = _DeesTerminalView;
 init_dist_ts26();
 init_theme();
 var kanbanStyles = [themeDefaultStyles, cssManager.defaultStyles, i`
-  :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); }
@@ -183711,10 +183791,20 @@ var kanbanStyles = [themeDefaultStyles, cssManager.defaultStyles, i`
   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; }
 `];
 
 // ts_web/elements/00group-kanban/kanban.helpers.ts
+var kanbanInitials = /* @__PURE__ */ __name((name) => name.trim().split(/\s+/).map((part) => part[0]).join("").slice(0, 2), "kanbanInitials");
+var kanbanPriorityIcon = /* @__PURE__ */ __name((priority) => priority === "urgent" ? "lucide:ChevronsUp" : priority === "high" ? "lucide:ChevronUp" : priority === "low" ? "lucide:ChevronDown" : "lucide:Minus", "kanbanPriorityIcon");
 var sortKanbanTickets = /* @__PURE__ */ __name((tickets) => [...tickets].sort((a4, b4) => a4.order - b4.order || a4.id.localeCompare(b4.id)), "sortKanbanTickets");
 var ticketLabel = /* @__PURE__ */ __name((ticket) => `#${ticket.key} ${ticket.title}`, "ticketLabel");
 var ticketDraft = /* @__PURE__ */ __name((ticket) => ({
@@ -183808,7 +183898,7 @@ var _DeesInputReference = class _DeesInputReference extends (_a104 = DeesElement
     __publicField(this, "serializedValue", "");
   }
   render() {
-    return b2`<div class="editor"></div>${this.loadError ? b2`<p class="error" role="alert">${this.loadError}</p>` : ""}`;
+    return b2`<div class="editor" part="editor"></div>${this.loadError ? b2`<p class="error" role="alert">${this.loadError}</p>` : ""}`;
   }
   async connectedCallback() {
     const connection = super.connectedCallback();
@@ -184022,11 +184112,11 @@ __publicField(_DeesInputReference, "styles", [themeDefaultStyles, cssManager.def
     :host { display: block; min-width: 0; color: var(--dees-color-text-primary); font-family: var(--dees-font-family); }
     .editor { border: 1px solid var(--dees-color-border-default); border-radius: var(--dees-radius-lg); background: var(--dees-color-bg-primary); }
     .editor:focus-within { outline: 2px solid var(--dees-color-focus-ring); outline-offset: 1px; }
-    .ProseMirror { padding: 12px; min-height: 84px; max-height: 260px; overflow: auto; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--dees-font-body-size); line-height: 1.6; }
+    .ProseMirror { padding: 12px; min-height: var(--dees-reference-min-height, 84px); max-height: 260px; overflow: auto; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--dees-reference-font-size, var(--dees-font-body-size)); line-height: 1.6; }
     .ProseMirror p { margin: 0; }
     .ProseMirror p + p { margin-top: 0; }
     .ProseMirror:has(> p:only-child > br:only-child)::before { content: attr(data-placeholder); float: left; color: var(--dees-color-text-muted); pointer-events: none; height: 0; }
-    .ProseMirror [data-reference-id] { display: inline; padding: 1px 5px; border-radius: var(--dees-radius-sm); color: var(--dees-color-link); background: var(--dees-color-badge-default-bg); cursor: pointer; font-weight: 500; }
+    .ProseMirror [data-reference-id] { display: inline; padding: 1px 5px; border-radius: var(--dees-radius-sm); color: var(--dees-color-link); background: var(--dees-color-fill-tertiary); cursor: pointer; font-weight: 500; }
     .ProseMirror [data-reference-id]:focus-visible, .ProseMirror .ProseMirror-selectednode { outline: 2px solid var(--dees-color-focus-ring); }
     .ProseMirror[contenteditable=false] { opacity: .65; }
     .error { color: var(--dees-color-text-error); font-size: var(--dees-font-footnote-size); }
@@ -184056,16 +184146,17 @@ var _DeesKanbanDiscussion = class _DeesKanbanDiscussion extends (_a105 = DeesEle
   render() {
     const pending = this.pending.has(this.ticketId);
     const comments = this.comments.filter((comment3) => comment3.ticketId === this.ticketId).slice().sort((a4, b4) => Date.parse(a4.createdAt) - Date.parse(b4.createdAt));
-    return b2`<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 b2`<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 ? b2`<p class="caption" role="status">Loading comments…</p>` : ""}
       ${this.error ? b2`<p class="error" role="alert">${this.error}</p>` : ""}
       <ol aria-label="Comments">${comments.map((comment3) => b2`<li>
-        <div class="row"><span class="author">${comment3.author.name}</span><time datetime=${comment3.createdAt}>${new Date(comment3.createdAt).toLocaleString()}</time></div>
+        <span class="avatar" aria-hidden="true">${kanbanInitials(comment3.author.name)}</span><div>
+        <div class="row meta"><span class="author">${comment3.author.name}</span><time datetime=${comment3.createdAt} title=${comment3.createdAt}>${new Date(comment3.createdAt).toLocaleString(void 0, { dateStyle: "medium", timeStyle: "short" })}</time></div>
         <div class="message">${comment3.body.map((part) => part.type === "text" ? part.text : b2`<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 ? b2`<p class="empty">Start the conversation.</p>` : ""}
       ${this.addComment && !this.readOnly ? b2`<div class="compose">
         <dees-input-reference label="Comment" placeholder="Write a comment…" .documentKey=${this.ticketId} .value=${this.draft} .disabled=${pending}
@@ -184078,7 +184169,7 @@ var _DeesKanbanDiscussion = class _DeesKanbanDiscussion extends (_a105 = DeesEle
           @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();
@@ -184130,16 +184221,26 @@ __decorateElement(_init107, 4, "failures", _failures_dec, _DeesKanbanDiscussion,
 _DeesKanbanDiscussion = __decorateElement(_init107, 0, "DeesKanbanDiscussion", _DeesKanbanDiscussion_decorators, _DeesKanbanDiscussion);
 __name(_DeesKanbanDiscussion, "DeesKanbanDiscussion");
 __publicField(_DeesKanbanDiscussion, "styles", [...kanbanStyles, i`
-    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%; } }
   `]);
 __runInitializers(_init107, 1, _DeesKanbanDiscussion);
 var DeesKanbanDiscussion = _DeesKanbanDiscussion;
@@ -184147,9 +184248,9 @@ var DeesKanbanDiscussion = _DeesKanbanDiscussion;
 // ts_web/elements/00group-kanban/dees-kanban-ticket-detail/dees-kanban-ticket-detail.ts
 init_dist_ts26();
 init_dees_input_text();
-var _editing_dec3, _canGoBack_dec, _saving_dec2, _error_dec3, _commentsError_dec, _loadingComments_dec, _searchTickets_dec2, _comments_dec2, _commentDraft_dec, _draft_dec3, _provider_dec2, _people_dec, _columns_dec3, _tickets_dec, _ticket_dec, _a106, _DeesKanbanTicketDetail_decorators, _init108, _ticket, _tickets, _columns3, _people, _provider2, _draft3, _commentDraft, _comments2, _searchTickets2, _loadingComments, _commentsError, _error3, _saving2, _canGoBack, _editing3;
+var _editing_dec3, _showTicketKey_dec, _canGoBack_dec, _saving_dec2, _error_dec3, _commentsError_dec, _loadingComments_dec, _searchTickets_dec2, _comments_dec2, _commentDraft_dec, _draft_dec3, _provider_dec2, _people_dec, _columns_dec3, _tickets_dec, _ticket_dec, _a106, _DeesKanbanTicketDetail_decorators, _init108, _ticket, _tickets, _columns3, _people, _provider2, _draft3, _commentDraft, _comments2, _searchTickets2, _loadingComments, _commentsError, _error3, _saving2, _canGoBack, _showTicketKey, _editing3;
 _DeesKanbanTicketDetail_decorators = [customElement("dees-kanban-ticket-detail")];
-var _DeesKanbanTicketDetail = class _DeesKanbanTicketDetail extends (_a106 = DeesElement, _ticket_dec = [n5({ attribute: false })], _tickets_dec = [n5({ attribute: false })], _columns_dec3 = [n5({ attribute: false })], _people_dec = [n5({ attribute: false })], _provider_dec2 = [n5({ attribute: false })], _draft_dec3 = [n5({ attribute: false })], _commentDraft_dec = [n5({ attribute: false })], _comments_dec2 = [n5({ attribute: false })], _searchTickets_dec2 = [n5({ attribute: false })], _loadingComments_dec = [n5({ type: Boolean })], _commentsError_dec = [n5({ type: String })], _error_dec3 = [n5({ type: String })], _saving_dec2 = [n5({ type: Boolean })], _canGoBack_dec = [n5({ type: Boolean })], _editing_dec3 = [r5()], _a106) {
+var _DeesKanbanTicketDetail = class _DeesKanbanTicketDetail extends (_a106 = DeesElement, _ticket_dec = [n5({ attribute: false })], _tickets_dec = [n5({ attribute: false })], _columns_dec3 = [n5({ attribute: false })], _people_dec = [n5({ attribute: false })], _provider_dec2 = [n5({ attribute: false })], _draft_dec3 = [n5({ attribute: false })], _commentDraft_dec = [n5({ attribute: false })], _comments_dec2 = [n5({ attribute: false })], _searchTickets_dec2 = [n5({ attribute: false })], _loadingComments_dec = [n5({ type: Boolean })], _commentsError_dec = [n5({ type: String })], _error_dec3 = [n5({ type: String })], _saving_dec2 = [n5({ type: Boolean })], _canGoBack_dec = [n5({ type: Boolean })], _showTicketKey_dec = [n5({ type: Boolean })], _editing_dec3 = [r5()], _a106) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _ticket, __runInitializers(_init108, 8, this)), __runInitializers(_init108, 11, this);
@@ -184166,7 +184267,8 @@ var _DeesKanbanTicketDetail = class _DeesKanbanTicketDetail extends (_a106 = Dee
     __privateAdd(this, _error3, __runInitializers(_init108, 52, this, "")), __runInitializers(_init108, 55, this);
     __privateAdd(this, _saving2, __runInitializers(_init108, 56, this, false)), __runInitializers(_init108, 59, this);
     __privateAdd(this, _canGoBack, __runInitializers(_init108, 60, this, false)), __runInitializers(_init108, 63, this);
-    __privateAdd(this, _editing3, __runInitializers(_init108, 64, this, false)), __runInitializers(_init108, 67, this);
+    __privateAdd(this, _showTicketKey, __runInitializers(_init108, 64, this, true)), __runInitializers(_init108, 67, this);
+    __privateAdd(this, _editing3, __runInitializers(_init108, 68, this, false)), __runInitializers(_init108, 71, this);
     __publicField(this, "addComment", /* @__PURE__ */ __name((input) => this.provider.addComment(input), "addComment"));
   }
   updated(changed2) {
@@ -184188,15 +184290,16 @@ var _DeesKanbanTicketDetail = class _DeesKanbanTicketDetail extends (_a106 = Dee
     const parents = this.tickets.filter((item) => item.kind === (ticket.kind === "subtask" ? "task" : "epic"));
     return b2`<div class="toolbar row">
       ${this.canGoBack ? b2`<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 ? b2`<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 ? b2`<span class="caption ticket-key">${ticket.key}</span>` : ""}
+      ${parent ? b2`<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 ? b2`<dees-button size="sm" type="ghost" text="Edit ticket" icon="lucide:Pencil" @clicked=${() => {
       this.editing = true;
       this.changeDraft({});
     }}></dees-button>` : ""}
     </div>
     ${this.error ? b2`<p class="error" role="alert">${this.error}</p>` : ""}
-    <div class="layout"><div class="main">
+    <div class="layout"><section class="lead">
       ${this.editing && editable ? b2`<div class="edit">
         <dees-input-text label="Title" .value=${draft.title} .disabled=${this.saving}
           @input=${(event) => this.changeDraft({ title: String(event.currentTarget.value ?? "") })}></dees-input-text>
@@ -184210,33 +184313,36 @@ var _DeesKanbanTicketDetail = class _DeesKanbanTicketDetail extends (_a106 = Dee
       kanbanEvent(this, "kanban-ticket-draft", { ticketId: ticket.id, draft: void 0 });
     }}></dees-button></div>
       </div>` : b2`<h2>${ticket.title}</h2><div class="description ${ticket.description ? "" : "muted"}">${ticket.description || "No description yet."}</div>`}
-      ${ticket.kind !== "subtask" ? b2`<section class="children"><div class="row"><h3>${ticket.kind === "epic" ? "Tasks" : "Subtasks"}</h3><span class="spacer"></span>
-        ${this.provider.createTicket && ticket.permissions?.createChild !== false ? b2`<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>
-        ${children2.map((child) => b2`<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>`)}
-        ${!children2.length ? b2`<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 : void 0}></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) => kanbanEvent(this, "kanban-ticket-move", { ticketId: ticket.id, columnId: event.detail.key })}></dees-input-dropdown>
+        .disabled=${!movable || this.saving} @selectedOption=${(event) => kanbanEvent(this, "kanban-ticket-move", { ticketId: ticket.id, columnId: event.detail.key })}></dees-input-dropdown></div>
       ${this.editing && editable ? b2`
-        <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((key2) => ({ key: key2, option: key2 }))}
-          @selectedOption=${(event) => 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) => 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) => this.changeDraft({ assigneeId: event.detail.key })}></dees-input-dropdown>
-        ${ticket.kind !== "epic" ? b2`<dees-input-dropdown label=${ticket.kind === "task" ? "Epic" : "Parent task"} .disabled=${this.saving}
+          @selectedOption=${(event) => this.changeDraft({ assigneeId: event.detail.key })}></dees-input-dropdown></div>
+        ${ticket.kind !== "epic" ? b2`<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) => this.changeDraft({ parentId: event.detail.key })}></dees-input-dropdown>` : ""}
-      ` : b2`<div><label class="caption">Priority</label>${ticket.priority ?? "none"}</div><div><label class="caption">Assignee</label>${ticket.assignee?.name ?? "Unassigned"}</div>`}
-      ${ticket.labels?.length ? b2`<div><label class="caption">Labels</label><div class="row">${ticket.labels.map((label) => b2`<span class="badge">${label}</span>`)}</div></div>` : ""}
-    </div></aside></div>`;
+          @selectedOption=${(event) => this.changeDraft({ parentId: event.detail.key })}></dees-input-dropdown></div>` : ""}
+      ` : b2`<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) : "\u2013"}</span>${ticket.assignee?.name ?? "Unassigned"}</span></div>`}
+      ${ticket.labels?.length ? b2`<div><label class="caption">Labels</label><div class="row value">${ticket.labels.map((label) => b2`<span class="badge">${label}</span>`)}</div></div>` : ""}
+    </div></aside><div class="body">
+      ${ticket.kind !== "subtask" ? b2`<section class="children"><div class="section-title"><h3>${ticket.kind === "epic" ? "Tasks" : "Subtasks"}</h3><span class="count">${children2.length}</span><span class="spacer"></span>
+        ${this.provider.createTicket && ticket.permissions?.createChild !== false ? b2`<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">${children2.map((child) => b2`<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>
+        ${!children2.length ? b2`<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 : void 0}></dees-kanban-discussion>
+    </div></div>`;
   }
   finishEditing() {
     this.editing = false;
@@ -184257,6 +184363,7 @@ _commentsError = new WeakMap();
 _error3 = new WeakMap();
 _saving2 = new WeakMap();
 _canGoBack = new WeakMap();
+_showTicketKey = new WeakMap();
 _editing3 = new WeakMap();
 __decorateElement(_init108, 4, "ticket", _ticket_dec, _DeesKanbanTicketDetail, _ticket);
 __decorateElement(_init108, 4, "tickets", _tickets_dec, _DeesKanbanTicketDetail, _tickets);
@@ -184272,24 +184379,45 @@ __decorateElement(_init108, 4, "commentsError", _commentsError_dec, _DeesKanbanT
 __decorateElement(_init108, 4, "error", _error_dec3, _DeesKanbanTicketDetail, _error3);
 __decorateElement(_init108, 4, "saving", _saving_dec2, _DeesKanbanTicketDetail, _saving2);
 __decorateElement(_init108, 4, "canGoBack", _canGoBack_dec, _DeesKanbanTicketDetail, _canGoBack);
+__decorateElement(_init108, 4, "showTicketKey", _showTicketKey_dec, _DeesKanbanTicketDetail, _showTicketKey);
 __decorateElement(_init108, 4, "editing", _editing_dec3, _DeesKanbanTicketDetail, _editing3);
 _DeesKanbanTicketDetail = __decorateElement(_init108, 0, "DeesKanbanTicketDetail", _DeesKanbanTicketDetail_decorators, _DeesKanbanTicketDetail);
 __name(_DeesKanbanTicketDetail, "DeesKanbanTicketDetail");
 __publicField(_DeesKanbanTicketDetail, "styles", [...kanbanStyles, i`
-    .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; }
+    }
   `]);
 __runInitializers(_init108, 1, _DeesKanbanTicketDetail);
 var DeesKanbanTicketDetail = _DeesKanbanTicketDetail;
@@ -184399,18 +184527,19 @@ var _DeesKanbanCard = class _DeesKanbanCard extends (_a107 = DeesElement, _ticke
       event.dataTransfer.effectAllowed = "move";
       kanbanEvent(this, "kanban-drag-start", { ticketId: ticket.id });
     }} @dragend=${() => kanbanEvent(this, "kanban-drag-end", {})}>
-      ${this.epic ? b2`<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" ? b2`<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 ? b2`<div class="row labels">${ticket.labels.map((label) => b2`<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) ?? "\u2013"}</span>
-        <span>${ticket.assignee?.name ?? "Unassigned"}</span><span class="spacer"></span>
-        ${this.movable ? b2`<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 ? b2`<button class="link epic" title=${this.epic.title} @click=${() => this.open(this.epic.id)}>${this.epic.title}</button>` : ""}
+        ${this.movable ? b2`<dees-button class="move" size="icon" type="ghost" icon="lucide:Ellipsis" text="Move ticket" .disabled=${this.pending}
           @clicked=${(event) => kanbanEvent(this, "kanban-move-menu", { ticketId: ticket.id, anchor: event.currentTarget })}></dees-button>` : ""}
       </div>
-      ${this.subtasks.length ? b2`<details><summary>${completed}/${this.subtasks.length} subtasks complete</summary>
-        ${this.subtasks.map((task) => b2`<div class="subtask"><span>${this.columns.some((column) => column.id === task.columnId && column.done) ? "\u2713" : "\u25CB"}</span>
+      <button class="title" @click=${() => this.open(ticket.id)}>${ticket.title}</button>
+      <div class="row footer">
+        ${ticket.priority && ticket.priority !== "none" ? b2`<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) => b2`<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) : "\u2013"}</span><span class="assignee-name">${ticket.assignee?.name ?? "Unassigned"}</span></span>
+      </div>
+      ${this.subtasks.length ? b2`<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) => b2`<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>`;
   }
@@ -184431,17 +184560,32 @@ __decorateElement(_init109, 4, "pending", _pending_dec3, _DeesKanbanCard, _pendi
 _DeesKanbanCard = __decorateElement(_init109, 0, "DeesKanbanCard", _DeesKanbanCard_decorators, _DeesKanbanCard);
 __name(_DeesKanbanCard, "DeesKanbanCard");
 __publicField(_DeesKanbanCard, "styles", [...kanbanStyles, i`
-    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; } }
   `]);
 __runInitializers(_init109, 1, _DeesKanbanCard);
 var DeesKanbanCard = _DeesKanbanCard;
@@ -184486,11 +184630,11 @@ var _DeesKanbanColumn = class _DeesKanbanColumn extends (_a108 = DeesElement, _c
       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 ? b2`<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) => b2`
-        <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;
     }}>
@@ -184533,16 +184677,20 @@ __decorateElement(_init110, 4, "draggingOver", _draggingOver_dec, _DeesKanbanCol
 _DeesKanbanColumn = __decorateElement(_init110, 0, "DeesKanbanColumn", _DeesKanbanColumn_decorators, _DeesKanbanColumn);
 __name(_DeesKanbanColumn, "DeesKanbanColumn");
 __publicField(_DeesKanbanColumn, "styles", [...kanbanStyles, i`
-    :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; } }
   `]);
 __runInitializers(_init110, 1, _DeesKanbanColumn);
 var DeesKanbanColumn = _DeesKanbanColumn;
@@ -184672,28 +184820,28 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
       ...this.tickets.filter((child) => child.parentId === ticket.id).map((child) => `${child.key} ${child.title}`)
     ].join(" ").toLocaleLowerCase().includes(query3)));
     const epic = epics.find((ticket) => ticket.id === this.epicId);
-    return b2`<header class="heading"><h2>${this.heading}</h2><span class="caption">${tasks.length} tasks · ${epics.length} epics</span><span class="spacer"></span>
-      ${this.provider.createTicket ? b2`<dees-button type="ghost" size="sm" text="New epic" .disabled=${!this.columns.length}
-        @clicked=${() => {
-      void this.createTicket({ kind: "epic", columnId: this.columns[0].id });
-    }}></dees-button>
-        <dees-button type="accent" size="sm" icon="lucide:Plus" text="New task" .disabled=${!this.columns.length}
-          @clicked=${() => {
-      void this.createTicket({ kind: "task", columnId: this.columns[0].id, parentId: this.epicId || void 0 });
-    }}></dees-button>` : ""}</header>
-      <div class="filters"><dees-input-text label="Search tickets" placeholder="Title, ticket number, assignee…" .value=${this.query}
+    return b2`<header class="heading"><div class="identity"><h2>${this.heading}</h2><span class="totals">${tasks.length} tasks · ${epics.length} epics</span></div>
+      <div class="filters"><dees-input-text label="Search tickets" .labelPosition=${"none"} placeholder="Search tickets…" .value=${this.query}
         @input=${(event) => {
       this.query = String(event.currentTarget.value ?? "");
     }}></dees-input-text>
-        <dees-input-dropdown label="Epic" .value=${{ key: this.epicId, option: epic?.title ?? "All epics" }}
+        <dees-input-dropdown label="Epic" .labelPosition=${"none"} .value=${{ key: this.epicId, option: epic?.title ?? "All epics" }}
           .options=${[{ key: "", option: "All epics" }, ...epics.map((ticket) => ({ key: ticket.id, option: ticket.title }))]}
           @selectedOption=${(event) => {
       this.epicId = event.detail.key;
     }}></dees-input-dropdown>
-        ${epic ? b2`<dees-button type="ghost" size="sm" text="Open epic" @clicked=${() => {
+        ${epic ? b2`<dees-button type="ghost" text="Open epic" @clicked=${() => {
       void this.openTicket(epic.id);
     }}></dees-button>` : ""}
       </div>
+      ${this.provider.createTicket ? b2`<div class="actions"><dees-button type="secondary" text="New epic" .disabled=${!this.columns.length}
+        @clicked=${() => {
+      void this.createTicket({ kind: "epic", columnId: this.columns[0].id });
+    }}></dees-button>
+        <dees-button type="accent" icon="lucide:Plus" text="New task" .disabled=${!this.columns.length}
+          @clicked=${() => {
+      void this.createTicket({ kind: "task", columnId: this.columns[0].id, parentId: this.epicId || void 0 });
+    }}></dees-button></div>` : ""}</header>
       ${this.loading || this.openingTicket ? b2`<p class="caption" role="status">${this.loading ? "Loading board\u2026" : "Opening ticket\u2026"}</p>` : ""}
       ${this.error || this.operationError ? b2`<p class="error" role="alert">${this.error || this.operationError}</p>` : ""}
       ${!this.columns.length ? b2`<p class="empty">No columns configured.</p>` : b2`<div class="columns" aria-label=${this.heading}>
@@ -184721,6 +184869,7 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
       this.selectedId = id;
       if (!this.detail) {
         this.detail = new DeesKanbanTicketDetail();
+        this.detail.showTicketKey = false;
         for (const name of interactionEvents) this.detail.addEventListener(name, this.handleInteraction);
       }
       this.detail.ticket = ticket;
@@ -184732,6 +184881,7 @@ var _DeesKanban = class _DeesKanban extends (_a109 = DeesElement, _heading_dec8
           width: 1e3,
           maxWidth: 1040,
           mobileFullscreen: true,
+          contentPadding: 0,
           content: b2`${this.detail}`,
           menuOptions: []
         });
@@ -184957,14 +185107,27 @@ __name(_DeesKanban, "DeesKanban");
 __publicField(_DeesKanban, "demo", demoFunc72);
 __publicField(_DeesKanban, "demoGroups", ["Kanban"]);
 __publicField(_DeesKanban, "styles", [...kanbanStyles, i`
-    :host { padding: 24px; background: var(--dees-color-bg-canvas); min-height: 100%; }
-    .heading { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
-    h2 { font-size: var(--dees-font-title1-size); font-weight: 650; letter-spacing: -.02em; }
-    .filters { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
-    .filters dees-input-text { flex: 1; min-width: 200px; max-width: 360px; }
-    .filters dees-input-dropdown { min-width: 200px; max-width: 320px; flex: 1; }
-    .columns { display: flex; gap: 16px; overflow-x: auto; padding: 3px 3px 16px; align-items: stretch; }
-    @media (max-width: 600px) { :host { padding: 16px; } .filters { gap: 10px; } .columns { scroll-snap-type: x proximity; } dees-kanban-column { scroll-snap-align: start; flex-basis: 85vw; } }
+    :host { padding: 20px 24px; background: var(--dees-color-bg-canvas); min-height: 100%; }
+    .heading { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
+    .identity { display: flex; gap: 12px; align-items: baseline; flex: 1; min-width: 220px; flex-wrap: wrap; }
+    h2 { font-size: var(--dees-font-title3-size); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; overflow-wrap: anywhere; }
+    .totals { font-size: var(--dees-font-caption1-size); color: var(--dees-color-text-secondary); white-space: nowrap; }
+    .filters { display: flex; align-items: center; gap: 8px; }
+    .filters dees-input-text { width: 230px; min-width: 140px; }
+    .filters dees-input-dropdown { width: 180px; min-width: 140px; }
+    .actions { display: flex; gap: 8px; margin-left: auto; }
+    .columns { display: flex; gap: 20px; overflow-x: auto; padding: 3px 2px 16px; align-items: stretch; }
+    @media (max-width: 1100px) { .filters { order: 3; flex-basis: 100%; } .filters dees-input-text { flex: 1; max-width: 320px; } }
+    @media (max-width: 600px) {
+      :host { padding: 12px 16px; }
+      .heading { gap: 12px 8px; }
+      .identity { min-width: 100%; gap: 6px 10px; }
+      .actions { margin-left: 0; }
+      .filters { flex-wrap: wrap; }
+      .filters dees-input-text, .filters dees-input-dropdown { flex: 1; width: auto; min-width: 130px; }
+      .columns { margin: 0 -16px; padding: 3px 16px 16px; scroll-snap-type: x proximity; scroll-padding-inline: 16px; gap: 14px; }
+      dees-kanban-column { scroll-snap-align: start; flex: 0 0 86%; min-width: 0; max-width: none; }
+    }
   `]);
 __runInitializers(_init111, 1, _DeesKanban);
 var DeesKanban = _DeesKanban;
@@ -226370,7 +226533,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "12.5.0",
+  version: "13.0.1",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };