v2.12.4

changelog.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 2026-04-13 - 2.12.4 - fix(deps)
+bump @design.estate/dees-catalog to ^3.70.0
+
+- Updates @design.estate/dees-catalog from ^3.67.1 to ^3.70.0 in package.json
+
+## 2026-04-07 - 2.12.3 - fix(route-card)
+align route card with dees-tile layout and update header and footer styling
+
+- replace the custom card wrapper with dees-tile and move content into header, body, and footer slots
+- restyle header, route name, and action buttons to match shared tile design tokens and interaction states
+- wrap empty and populated route states consistently inside the tile component
+
 ## 2026-04-07 - 2.12.2 - fix(ts_web)
 adjust route card section background color in dark theme
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/catalog",
-  "version": "2.12.2",
+  "version": "2.12.4",
   "private": false,
   "description": "UI component catalog for serve.zone",
   "main": "dist_ts_web/index.js",
@@ -14,7 +14,7 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-catalog": "^3.67.1",
+    "@design.estate/dees-catalog": "^3.70.0",
     "@design.estate/dees-domtools": "^2.5.4",
     "@design.estate/dees-element": "^2.2.4",
     "@design.estate/dees-wcctools": "^3.8.0"

pnpm-lock.yaml

@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@design.estate/dees-catalog':
-        specifier: ^3.67.1
+        specifier: ^3.70.0
-        version: 3.67.1(@tiptap/pm@2.27.2)
+        version: 3.70.0(@tiptap/pm@2.27.2)
       '@design.estate/dees-domtools':
         specifier: ^2.5.4
         version: 2.5.4
@@ -256,8 +256,8 @@ packages:
   '@configvault.io/interfaces@1.0.17':
     resolution: {integrity: sha512-bEcCUR2VBDJsTin8HQh8Uw/mlYl2v8A3jMIaQ+MTB9Hrqd6CZL2dL7iJdWyFl/3EIX+LDxWFR+Oq7liIq7w+1Q==}
 
-  '@design.estate/dees-catalog@3.67.1':
+  '@design.estate/dees-catalog@3.70.0':
-    resolution: {integrity: sha512-8zaVNP70IbcB6pEmLoBxVA5WD0N5gQr12ylTdILtvds6rftKLCI1i2jx4RBztIy4FpZv0wIewJBtRvSUjK8Ysw==}
+    resolution: {integrity: sha512-bNqOxxl83FNCCV+7QoUj6oeRC0VTExWOClrLrHNMoLIU0TCtzhcmQqiuJhdWrcCwZ5RBhXHGMSFsR62d2RcWpw==}
 
   '@design.estate/dees-comms@1.0.30':
     resolution: {integrity: sha512-KchMlklJfKAjQiJiR0xmofXtQ27VgZtBIxcMwPE9d+h3jJRv+lPZxzBQVOM0eyM0uS44S5vJMZ11IeV4uDXSHg==}
@@ -4209,7 +4209,7 @@ snapshots:
       '@api.global/typedrequest-interfaces': 3.0.19
       '@api.global/typedsocket': 4.1.2(@push.rocks/smartserve@2.0.3)
       '@cloudflare/workers-types': 4.20260402.1
-      '@design.estate/dees-catalog': 3.67.1(@tiptap/pm@2.27.2)
+      '@design.estate/dees-catalog': 3.70.0(@tiptap/pm@2.27.2)
       '@design.estate/dees-comms': 1.0.30
       '@push.rocks/lik': 6.4.0
       '@push.rocks/smartdelay': 3.0.5
@@ -4775,7 +4775,7 @@ snapshots:
     dependencies:
       '@api.global/typedrequest-interfaces': 3.0.19
 
-  '@design.estate/dees-catalog@3.67.1(@tiptap/pm@2.27.2)':
+  '@design.estate/dees-catalog@3.70.0(@tiptap/pm@2.27.2)':
     dependencies:
       '@design.estate/dees-domtools': 2.5.4
       '@design.estate/dees-element': 2.2.4

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/catalog',
-  version: '2.12.2',
+  version: '2.12.4',
   description: 'UI component catalog for serve.zone'
 }

ts_web/elements/sz-route-card.ts

@@ -163,26 +163,25 @@ export class SzRouteCard extends DeesElement {
         display: block;
       }
 
-      .card {
+      dees-tile::part(outer) {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
-        border-radius: 8px;
-        padding: 20px;
         transition: border-color 200ms ease, box-shadow 200ms ease;
       }
 
-      .card:hover {
+      dees-tile:hover::part(outer) {
-        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+        border-color: var(--dees-color-border-strong);
         box-shadow: 0 2px 8px ${cssManager.bdTheme('rgba(0,0,0,0.06)', 'rgba(0,0,0,0.2)')};
       }
 
       /* Header */
       .header {
         display: flex;
-        align-items: flex-start;
+        align-items: center;
         justify-content: space-between;
         gap: 12px;
-        margin-bottom: 4px;
+        height: 40px;
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .header-left {
@@ -190,6 +189,7 @@ export class SzRouteCard extends DeesElement {
         align-items: center;
         gap: 8px;
         min-width: 0;
+        flex: 1;
       }
 
       .status-dot {
@@ -209,9 +209,10 @@ export class SzRouteCard extends DeesElement {
       }
 
       .route-name {
-        font-size: 15px;
+        font-size: 14px;
-        font-weight: 600;
+        font-weight: 500;
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        letter-spacing: -0.01em;
+        color: var(--dees-color-text-secondary);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -253,6 +254,10 @@ export class SzRouteCard extends DeesElement {
         color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
       }
 
+      .card-body {
+        padding: 16px 20px;
+      }
+
       .description {
         font-size: 13px;
         color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
@@ -503,43 +508,52 @@ export class SzRouteCard extends DeesElement {
         color: ${cssManager.bdTheme('#0e7490', '#22d3ee')};
       }
 
-      .card-actions {
+      .card-footer {
         display: flex;
-        gap: 8px;
+        flex-direction: row;
-        margin-top: 14px;
-        padding-top: 12px;
-        border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1a')};
         justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
-      .action-btn {
+      .tile-button {
-        display: inline-flex;
+        padding: 0 16px;
-        align-items: center;
+        height: 100%;
-        gap: 4px;
+        text-align: center;
-        padding: 5px 12px;
-        border-radius: 6px;
         font-size: 12px;
         font-weight: 500;
         cursor: pointer;
-        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
+        user-select: none;
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        transition: all 0.15s ease;
-        color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
+        background: transparent;
-        transition: all 150ms ease;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-family: inherit;
       }
 
-      .action-btn:hover {
+      .tile-button:first-child {
-        border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+        border-left: none;
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
-        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
       }
 
-      .action-btn.edit:hover {
+      .tile-button:hover {
-        border-color: ${cssManager.bdTheme('#93c5fd', 'rgba(59, 130, 246, 0.5)')};
+        background: var(--dees-color-hover);
-        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+        color: var(--dees-color-text-primary);
       }
 
-      .action-btn.delete:hover {
+      .tile-button.edit:hover {
-        border-color: ${cssManager.bdTheme('#fca5a5', 'rgba(239, 68, 68, 0.5)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+      }
+
+      .tile-button.delete:hover {
+        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.1)')};
         color: ${cssManager.bdTheme('#dc2626', '#f87171')};
       }
     `,
@@ -547,7 +561,11 @@ export class SzRouteCard extends DeesElement {
 
   public render(): TemplateResult {
     if (!this.route) {
-      return html`<div class="card"><div class="no-route">No route data</div></div>`;
+      return html`
+        <dees-tile>
+          <div class="card-body"><div class="no-route">No route data</div></div>
+        </dees-tile>
+      `;
     }
 
     const r = this.route;
@@ -557,9 +575,9 @@ export class SzRouteCard extends DeesElement {
     const security = r.security;
 
     return html`
-      <div class="card">
+      <dees-tile>
         <!-- Header -->
-        <div class="header">
+        <div slot="header" class="header">
           <div class="header-left">
             <span class="status-dot ${isEnabled ? 'enabled' : 'disabled'}"></span>
             <span class="route-name">${r.name || r.id || 'Unnamed Route'}</span>
@@ -570,16 +588,17 @@ export class SzRouteCard extends DeesElement {
           </div>
         </div>
 
-        ${r.description ? html`<div class="description">${r.description}</div>` : ''}
+        <div class="card-body">
+          ${r.description ? html`<div class="description">${r.description}</div>` : ''}
 
-        <div class="meta-row">
+          <div class="meta-row">
-          ${r.tags && r.tags.length > 0
+            ${r.tags && r.tags.length > 0
-            ? html`<div class="tags">${r.tags.map((t) => html`<span class="tag">${t}</span>`)}</div>`
+              ? html`<div class="tags">${r.tags.map((t) => html`<span class="tag">${t}</span>`)}</div>`
-            : html`<div></div>`}
+              : html`<div></div>`}
-          ${r.priority != null ? html`<span class="priority">Priority: ${r.priority}</span>` : ''}
+            ${r.priority != null ? html`<span class="priority">Priority: ${r.priority}</span>` : ''}
-        </div>
+          </div>
 
-        <!-- Match Section -->
+          <!-- Match Section -->
         <div class="section match">
           <div class="section-label">Match</div>
           <div class="field-row">
@@ -735,19 +754,20 @@ export class SzRouteCard extends DeesElement {
             `
           : ''}
 
-        <!-- VPN Section -->
+          <!-- VPN Section -->
-        ${this.renderVpn()}
+          ${this.renderVpn()}
 
-        <!-- Linked References Section -->
+          <!-- Linked References Section -->
-        ${this.renderLinked()}
+          ${this.renderLinked()}
 
-        <!-- Feature Icons Row -->
+          <!-- Feature Icons Row -->
-        ${this.renderFeatures()}
+          ${this.renderFeatures()}
+        </div>
 
         <!-- Action Buttons -->
         ${this.showActions ? html`
-          <div class="card-actions">
+          <div slot="footer" class="card-footer">
-            <button class="action-btn edit" @click=${(e: Event) => {
+            <button class="tile-button edit" @click=${(e: Event) => {
               e.stopPropagation();
               this.dispatchEvent(new CustomEvent('route-edit', {
                 detail: this.route,
@@ -755,7 +775,7 @@ export class SzRouteCard extends DeesElement {
                 composed: true,
               }));
             }}>Edit</button>
-            <button class="action-btn delete" @click=${(e: Event) => {
+            <button class="tile-button delete" @click=${(e: Event) => {
               e.stopPropagation();
               this.dispatchEvent(new CustomEvent('route-delete', {
                 detail: this.route,
@@ -765,7 +785,7 @@ export class SzRouteCard extends DeesElement {
             }}>Delete</button>
           </div>
         ` : ''}
-      </div>
+      </dees-tile>
     `;
   }