@kubex/zinc 1.1.130 → 1.1.131

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.130",
+  "version": "1.1.131",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/panel/panel.component.ts

@@ -1,7 +1,7 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {HasSlotController} from "../../internal/slot";
-import {property} from 'lit/decorators.js';
+import {property, state} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './panel.scss';
@@ -43,8 +43,13 @@ export default class ZnPanel extends ZincElement {
   @property({type: Boolean}) transparent: boolean;
   @property({type: Boolean}) shadow: boolean;
 
+  @state() private bodyEmpty = false;
+
+  private resizeObserver: ResizeObserver | null = null;
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
+    this.observeBodyContent();
     if (this.basis) {
       this.style.setProperty('--zn-panel-basis', this.basis.toString() + 'px');
     }
@@ -63,6 +68,10 @@ export default class ZnPanel extends ZincElement {
 
   connectedCallback() {
     super.connectedCallback();
+    if (this.hasUpdated) {
+      this.observeBodyContent();
+    }
+
     if (window.CSS.registerProperty) {
       try {
         window.CSS.registerProperty({
@@ -77,14 +86,42 @@ export default class ZnPanel extends ZincElement {
     }
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+  }
+
+  private get bodySlot(): HTMLSlotElement | null {
+    return this.renderRoot?.querySelector('.panel__body > slot') ?? null;
+  }
+
+  // Slotted content can grow without the body's own box changing, so the observers go on the
+  // slotted elements rather than the body.
+  private observeBodyContent() {
+    const slot = this.bodySlot;
+    if (!slot) return;
+
+    this.resizeObserver ??= new ResizeObserver(() => this.measureBodyContent());
+    this.resizeObserver.disconnect();
+    slot.assignedElements({flatten: true}).forEach(el => this.resizeObserver!.observe(el));
+    this.measureBodyContent();
+  }
+
+  private measureBodyContent() {
+    const nodes = this.bodySlot?.assignedNodes({flatten: true}) ?? [];
+    this.bodyEmpty = !nodes.some(node => node.nodeType === Node.TEXT_NODE
+      ? node.textContent!.trim() !== ''
+      : (node as Element).getBoundingClientRect().height > 0);
+  }
+
   protected render(): unknown {
     const hasActionSlot = this.hasSlotController.test('actions');
     const hasFooterSlot = this.hasSlotController.test('footer');
     const hasHeader = this.caption || hasActionSlot;
-    // Transparent panels with no vertical body padding have nothing to separate the header from,
-    // so the underline is just a stray rule across the page.
+    const isBodyEmpty = !this.hasSlotController.test('[default]') || this.bodyEmpty;
     const isFlushY = this.flush || this.tabbed || this.flushY;
-    const underlineHeader = !this.headerBorderless && !(this.transparent && isFlushY);
+    const underlineHeader = !this.headerBorderless && !(this.transparent && isFlushY) && !isBodyEmpty;
 
     return html`
       <div class="${classMap({
@@ -97,6 +134,7 @@ export default class ZnPanel extends ZincElement {
         'panel--transparent': this.transparent,
         'panel--has-actions': hasActionSlot,
         'panel--has-footer': hasFooterSlot,
+        'panel--empty': isBodyEmpty,
         'panel--has-header': hasHeader,
         'panel--borderless-header': this.headerBorderless,
         'panel--cosmic': this.cosmic,
@@ -120,7 +158,7 @@ export default class ZnPanel extends ZincElement {
 
           <div class="panel__content">
             <div class="panel__body">
-              <slot></slot>
+              <slot @slotchange="${this.observeBodyContent}"></slot>
             </div>
           </div>
 

package/src/components/panel/panel.scss

@@ -111,6 +111,12 @@
     padding-top: 0;
   }
 
+  &--empty {
+    .panel__body {
+      padding: 0;
+    }
+  }
+
   &--flush {
     .panel__body {
       padding: 0;

package/src/components/panel/panel.test.ts

@@ -1,5 +1,5 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 
 describe('<zn-panel>', () => {
   it('should render a component', async () => {
@@ -9,16 +9,52 @@ describe('<zn-panel>', () => {
   });
 
   it('underlines panel headers by default', async () => {
-    const el = await fixture(html` <zn-panel caption="Example"></zn-panel> `);
+    const el = await fixture(html` <zn-panel caption="Example"><p>Content</p></zn-panel> `);
     const header = el.shadowRoot!.querySelector('.panel__header')!;
 
     expect(header.classList.contains('panel__header--underline')).to.be.true;
   });
 
   it('removes the header underline when header-borderless is set', async () => {
-    const el = await fixture(html` <zn-panel caption="Example" header-borderless></zn-panel> `);
+    const el = await fixture(html` <zn-panel caption="Example" header-borderless><p>Content</p></zn-panel> `);
+    const header = el.shadowRoot!.querySelector('.panel__header')!;
+
+    expect(header.classList.contains('panel__header--underline')).to.be.false;
+  });
+
+  it('removes the header underline and body padding when there is no content', async () => {
+    const el = await fixture(html` <zn-panel caption="Example"></zn-panel> `);
     const header = el.shadowRoot!.querySelector('.panel__header')!;
 
     expect(header.classList.contains('panel__header--underline')).to.be.false;
+    expect(el.shadowRoot!.querySelector('.panel')!.classList.contains('panel--empty')).to.be.true;
+  });
+
+  it('removes the header underline when slotted content renders nothing', async () => {
+    const el = await fixture(html` <zn-panel caption="Example">
+      <div id="wrapper"></div>
+    </zn-panel> `);
+    const header = el.shadowRoot!.querySelector('.panel__header')!;
+
+    await waitUntil(() => !header.classList.contains('panel__header--underline'));
+
+    expect(el.shadowRoot!.querySelector('.panel')!.classList.contains('panel--empty')).to.be.true;
+  });
+
+  it('restores the header underline when slotted content gains height', async () => {
+    const el = await fixture(html` <zn-panel caption="Example">
+      <div id="wrapper"></div>
+    </zn-panel> `);
+    const header = el.shadowRoot!.querySelector('.panel__header')!;
+
+    await waitUntil(() => !header.classList.contains('panel__header--underline'));
+
+    const child = document.createElement('div');
+    child.style.height = '20px';
+    el.querySelector('#wrapper')!.append(child);
+
+    await waitUntil(() => header.classList.contains('panel__header--underline'));
+
+    expect(el.shadowRoot!.querySelector('.panel')!.classList.contains('panel--empty')).to.be.false;
   });
 });