feat(sz-config-section): add header action buttons to sz-config-section allowing configurable actions/events

changelog.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 2026-02-23 - 2.5.0 - feat(sz-config-section)
+add header action buttons to sz-config-section allowing configurable actions/events
+
+- Introduce IConfigSectionAction interface (label, icon, event, detail).
+- Add actions property to SzConfigSection and render header action buttons in the component template.
+- Add styles for .header-action and hover state to match design system.
+- Dispatch CustomEvent when an action is clicked, using action.event (defaults to 'action') and action.detail.
+- Update demo (sz-demo-view-config) to include a sample 'View Routes' action showing usage.
+
 ## 2026-02-23 - 2.4.0 - feat(elements)
 add configuration overview and section components with demo view and index exports
 

ts_web/00_commitinfo_data.ts

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

ts_web/elements/sz-config-section.ts

@@ -17,6 +17,13 @@ export interface IConfigField {
   linkTo?: string;
 }
 
+export interface IConfigSectionAction {
+  label: string;
+  icon?: string;
+  event?: string;
+  detail?: any;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'sz-config-section': SzConfigSection;
@@ -81,6 +88,9 @@ export class SzConfigSection extends DeesElement {
   @property({ type: Array })
   public accessor fields: IConfigField[] = [];
 
+  @property({ type: Array })
+  public accessor actions: IConfigSectionAction[] = [];
+
   @property({ type: Boolean })
   public accessor collapsible: boolean = false;
 
@@ -226,6 +236,32 @@ export class SzConfigSection extends DeesElement {
         background: ${cssManager.bdTheme('#f59e0b', '#fbbf24')};
       }
 
+      /* Action buttons */
+      .header-action {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        padding: 4px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        transition: background 150ms ease;
+        white-space: nowrap;
+        font-family: inherit;
+      }
+
+      .header-action:hover {
+        background: ${cssManager.bdTheme('rgba(37,99,235,0.08)', 'rgba(96,165,250,0.1)')};
+      }
+
+      .header-action dees-icon {
+        font-size: 14px;
+      }
+
       /* Chevron */
       .chevron {
         display: flex;
@@ -439,6 +475,19 @@ export class SzConfigSection extends DeesElement {
                 ${statusLabels[this.status] || this.status}
               </span>
             ` : ''}
+            ${this.actions.map(action => html`
+              <button class="header-action" @click=${(e: Event) => {
+                e.stopPropagation();
+                this.dispatchEvent(new CustomEvent(action.event || 'action', {
+                  detail: action.detail || { label: action.label },
+                  bubbles: true,
+                  composed: true,
+                }));
+              }}>
+                ${action.icon ? html`<dees-icon .icon=${action.icon}></dees-icon>` : ''}
+                ${action.label}
+              </button>
+            `)}
             ${this.collapsible ? html`
               <span class="chevron ${this.isCollapsed ? 'collapsed' : ''}">
                 <dees-icon .icon=${'lucide:chevronDown'}></dees-icon>

ts_web/elements/sz-demo-view-config.ts

@@ -6,7 +6,7 @@ import {
   cssManager,
   type TemplateResult,
 } from '@design.estate/dees-element';
-import type { IConfigField } from './sz-config-section.js';
+import type { IConfigField, IConfigSectionAction } from './sz-config-section.js';
 import './index.js';
 
 declare global {
@@ -109,6 +109,7 @@ export class SzDemoViewConfig extends DeesElement {
           icon="lucide:network"
           status="enabled"
           .fields=${proxyFields}
+          .actions=${[{ label: 'View Routes', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'routes' } }] as IConfigSectionAction[]}
         ></sz-config-section>
 
         <sz-config-section