fix(ts_web): handle slotted config section content visibility and field row borders correctly

changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2026-04-07 - 2.12.1 - fix(ts_web)
+handle slotted config section content visibility and field row borders correctly
+
+- track whether the default slot has assigned content and hide the slot container when empty
+- wrap rendered fields in a dedicated list so the last field row border is removed correctly when slot content is present
+
 ## 2026-04-07 - 2.12.0 - feat(elements)
 standardize dashboard and detail views on dees tile and stats grid components
 

ts_web/00_commitinfo_data.ts

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

ts_web/elements/sz-config-section.ts

@@ -126,6 +126,9 @@ export class SzConfigSection extends DeesElement {
   @state()
   accessor isCollapsed: boolean = false;
 
+  @state()
+  accessor hasSlottedContent: boolean = false;
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -347,6 +350,11 @@ export class SzConfigSection extends DeesElement {
         padding: 0;
       }
 
+      .fields-list {
+        display: flex;
+        flex-direction: column;
+      }
+
       /* Field rows */
       .field-row {
         display: flex;
@@ -357,7 +365,7 @@ export class SzConfigSection extends DeesElement {
         gap: 16px;
       }
 
-      .field-row:last-child {
+      .fields-list .field-row:last-child {
         border-bottom: none;
       }
 
@@ -472,9 +480,8 @@ export class SzConfigSection extends DeesElement {
         border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1e')};
       }
 
-      .slot-content:empty {
+      .slot-content.empty {
         display: none;
-        border-top: none;
       }
 
       /* Badge type */
@@ -506,6 +513,11 @@ export class SzConfigSection extends DeesElement {
     }
   }
 
+  private onSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    this.hasSlottedContent = slot.assignedNodes({ flatten: true }).length > 0;
+  }
+
   public render(): TemplateResult {
     const statusLabels: Record<string, string> = {
       'enabled': 'Enabled',
@@ -551,9 +563,13 @@ export class SzConfigSection extends DeesElement {
           </div>
         </div>
         <div class="section-content">
-          ${this.fields.map(field => this.renderField(field))}
+          ${this.fields.length > 0 ? html`
-          <div class="slot-content">
+            <div class="fields-list">
-            <slot></slot>
+              ${this.fields.map(field => this.renderField(field))}
+            </div>
+          ` : ''}
+          <div class="slot-content ${!this.hasSlottedContent ? 'empty' : ''}">
+            <slot @slotchange=${this.onSlotChange}></slot>
           </div>
         </div>
         ${this.links.length > 0 || this.actions.length > 0 ? html`