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

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))}
-          <div class="slot-content">
-            <slot></slot>
+          ${this.fields.length > 0 ? html`
+            <div class="fields-list">
+              ${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`