@kubex/zinc 1.1.131 → 1.1.132

package/dist/custom-elements.json

@@ -23751,19 +23751,6 @@
                 "module": "components/panel/panel.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "bodySlot",
-              "type": {
-                "text": "HTMLSlotElement | null"
-              },
-              "privacy": "private",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "ZnPanel",
-                "module": "components/panel/panel.js"
-              }
-            },
             {
               "kind": "method",
               "name": "observeBodyContent",
@@ -31139,15 +31126,6 @@
               "privacy": "private",
               "default": "null"
             },
-            {
-              "kind": "field",
-              "name": "bodySlot",
-              "type": {
-                "text": "HTMLSlotElement | null"
-              },
-              "privacy": "private",
-              "readonly": true
-            },
             {
               "kind": "method",
               "name": "observeBodyContent",
@@ -51559,19 +51537,6 @@
                 "module": "components/panel/panel.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "bodySlot",
-              "type": {
-                "text": "HTMLSlotElement | null"
-              },
-              "privacy": "private",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "ZnPanel",
-                "module": "components/panel/panel.js"
-              }
-            },
             {
               "kind": "method",
               "name": "observeBodyContent",
@@ -52861,7 +52826,7 @@
   "package": {
     "name": "@kubex/zinc",
     "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
-    "version": "1.1.131",
+    "version": "1.1.132",
     "author": "",
     "license": "MIT"
   }

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@kubex/zinc",
-  "version": "1.1.131",
+  "version": "1.1.132",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/dist/zn.d.ts

@@ -3872,7 +3872,6 @@ declare module "components/panel/panel.component" {
         protected firstUpdated(_changedProperties: PropertyValues): void;
         connectedCallback(): void;
         disconnectedCallback(): void;
-        private get bodySlot();
         private observeBodyContent;
         private measureBodyContent;
         protected render(): unknown;

package/dist/zn.min.js

@@ -1163,7 +1163,7 @@ import{a as Fn,b as h3,c as _r,d as c,e as V}from"./chunks/zn.UBLZO6CI.js";var K
              aria-label="hover-container">
           <slot name="content">${this.content}</slot>
         </div>
-      </zn-popup>`}};It.styles=z(_0),c([F("slot:not([name])")],It.prototype,"defaultSlot",2),c([F(".hover-container__body")],It.prototype,"body",2),c([F("zn-popup")],It.prototype,"popup",2),c([d()],It.prototype,"content",2),c([d()],It.prototype,"placement",2),c([d({type:Boolean,reflect:!0})],It.prototype,"disabled",2),c([d({type:Number})],It.prototype,"distance",2),c([d({type:Boolean,reflect:!0})],It.prototype,"open",2),c([d({type:Number})],It.prototype,"skidding",2),c([d()],It.prototype,"trigger",2),c([d({type:Boolean})],It.prototype,"hoist",2),c([K("open",{waitUntilFirstUpdate:!0})],It.prototype,"handleOpenChange",1),c([K(["content","distance","hoist","placement","skidding"])],It.prototype,"handleOptionsChange",1),c([K("disabled")],It.prototype,"handleDisabledChange",1);var Ju=It;It.define("zn-hover-container");var k0=_`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host ::-webkit-scrollbar{width:5px;height:5px}:host{}:host ::-webkit-scrollbar-track{background:transparent}:host{}:host ::-webkit-scrollbar-thumb{background:rgba(var(--inverse-base),0.2);border-radius:5px}:host{}:host ::-webkit-scrollbar-thumb:hover{background:rgba(var(--inverse-base),0.6)}:host{flex-grow:1;overflow:visible;display:flex;max-width:100%;z-index:1;position:relative;min-width:var(--zn-spacing-small-panel);flex-basis:var(--zn-panel-basis);--zn-page-surface-background:var(--zn-panel);--zn-active-nav-background:var(--zn-panel)}.panel{position:relative;border:1px solid rgb(var(--zn-border-color));display:flex;border-radius:var(--zn-border-radius);flex-direction:column;flex-grow:1;flex-basis:var(--zn-spacing-small-panel);width:100%;background-color:rgba(var(--zn-panel),var(--zn-panel-opacity))}.panel__inner{overflow:hidden;display:flex;border-radius:var(--zn-border-radius);flex-direction:column;flex-grow:1}.panel__content{display:flex;flex-grow:1;overflow:hidden;position:relative}.panel__header{padding:var(--zn-panel-header-padding,var(--zn-base-gap))}.panel__header::part(base){border-bottom:0;overflow:visible}.panel__header--inline{border-bottom:0}.panel__header--underline{border-bottom:1px solid rgb(var(--zn-border-color))}.panel__header::part(content){padding:0}.panel__body{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1;padding:var(--zn-base-gap)}.panel__body>:not([hidden])~:not([hidden]){border:1px solid rgb(var(--zn-border-color))}.panel__footer{font-size:var(--zn-font-size-small);display:block;padding:var(--zn-panel-footer-padding,var(--zn-spacing-small) var(--zn-base-gap));background:rgb(var(--zn-body));border-bottom-left-radius:var(--zn-border-radius);border-bottom-right-radius:var(--zn-border-radius)}.panel--tabbed .panel__body{padding:0}.panel--transparent{background-color:transparent;border:none}.panel--transparent:before{display:none}.panel:not(.panel--flush,.panel--flush-x,.panel--flush-y) ::slotted(zn-sp){--zn-sp-padding:0 !important}.panel.panel--borderless-header:not(.panel--flush,.panel--flush-y) .panel__body{padding-top:0}.panel--empty .panel__body{padding:0}.panel--flush .panel__body{padding:0}.panel--flush-x .panel__body{padding-inline:0}.panel--flush-y .panel__body{padding-block:0}.panel--flush-footer .panel__footer{padding:0}.panel--transparent .panel__header{padding-left:0;padding-right:0}.panel--cosmic{border:1px solid transparent}.panel--cosmic:before{content:"";z-index:-1;position:absolute;top:-2px;left:-2px;height:calc(100% + 4px);width:calc(100% + 4px);filter:blur(var(--zn-blur,1px));opacity:0.9;border-radius:var(--zn-border-radius);background-image:conic-gradient(from var(--rotate) at 50% 50%,#71d9ff 0%,#a100ff 22%,#71d9ff 44%,#ff00ce 74%,#71d9ff 94%);animation:rotate-gradient 6s linear infinite}.panel--shadow{box-shadow:0 6px 20px 10px rgba(0,0,0,0.25)}`;var Ze=class extends k{constructor(){super(...arguments);this.hasSlotController=new Y(this,"[default]","actions","footer");this.bodyEmpty=!1;this.resizeObserver=null}firstUpdated(t){if(super.firstUpdated(t),this.observeBodyContent(),this.basis&&this.style.setProperty("--zn-panel-basis",this.basis.toString()+"px"),!this.tabbed){let r=this.querySelector("zn-tabs");if(r){r.setAttribute("flush-x","");let n=this.shadowRoot?.querySelector(".body");n&&n.classList.toggle("ntp",!0)}}}connectedCallback(){if(super.connectedCallback(),this.hasUpdated&&this.observeBodyContent(),window.CSS.registerProperty)try{window.CSS.registerProperty({inherits:!1,initialValue:"0deg",name:"--rotate",syntax:"<angle>"})}catch{}}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect(),this.resizeObserver=null}get bodySlot(){return this.renderRoot?.querySelector(".panel__body > slot")??null}observeBodyContent(){let t=this.bodySlot;t&&(this.resizeObserver??(this.resizeObserver=new ResizeObserver(()=>this.measureBodyContent())),this.resizeObserver.disconnect(),t.assignedElements({flatten:!0}).forEach(r=>this.resizeObserver.observe(r)),this.measureBodyContent())}measureBodyContent(){let t=this.bodySlot?.assignedNodes({flatten:!0})??[];this.bodyEmpty=!t.some(r=>r.nodeType===Node.TEXT_NODE?r.textContent.trim()!=="":r.getBoundingClientRect().height>0)}render(){let t=this.hasSlotController.test("actions"),r=this.hasSlotController.test("footer"),n=this.caption||t,a=!this.hasSlotController.test("[default]")||this.bodyEmpty,s=this.flush||this.tabbed||this.flushY,l=!this.headerBorderless&&!(this.transparent&&s)&&!a;return u`
+      </zn-popup>`}};It.styles=z(_0),c([F("slot:not([name])")],It.prototype,"defaultSlot",2),c([F(".hover-container__body")],It.prototype,"body",2),c([F("zn-popup")],It.prototype,"popup",2),c([d()],It.prototype,"content",2),c([d()],It.prototype,"placement",2),c([d({type:Boolean,reflect:!0})],It.prototype,"disabled",2),c([d({type:Number})],It.prototype,"distance",2),c([d({type:Boolean,reflect:!0})],It.prototype,"open",2),c([d({type:Number})],It.prototype,"skidding",2),c([d()],It.prototype,"trigger",2),c([d({type:Boolean})],It.prototype,"hoist",2),c([K("open",{waitUntilFirstUpdate:!0})],It.prototype,"handleOpenChange",1),c([K(["content","distance","hoist","placement","skidding"])],It.prototype,"handleOptionsChange",1),c([K("disabled")],It.prototype,"handleDisabledChange",1);var Ju=It;It.define("zn-hover-container");var k0=_`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host ::-webkit-scrollbar{width:5px;height:5px}:host{}:host ::-webkit-scrollbar-track{background:transparent}:host{}:host ::-webkit-scrollbar-thumb{background:rgba(var(--inverse-base),0.2);border-radius:5px}:host{}:host ::-webkit-scrollbar-thumb:hover{background:rgba(var(--inverse-base),0.6)}:host{flex-grow:1;overflow:visible;display:flex;max-width:100%;z-index:1;position:relative;min-width:var(--zn-spacing-small-panel);flex-basis:var(--zn-panel-basis);--zn-page-surface-background:var(--zn-panel);--zn-active-nav-background:var(--zn-panel)}.panel{position:relative;border:1px solid rgb(var(--zn-border-color));display:flex;border-radius:var(--zn-border-radius);flex-direction:column;flex-grow:1;flex-basis:var(--zn-spacing-small-panel);width:100%;background-color:rgba(var(--zn-panel),var(--zn-panel-opacity))}.panel__inner{overflow:hidden;display:flex;border-radius:var(--zn-border-radius);flex-direction:column;flex-grow:1}.panel__content{display:flex;flex-grow:1;overflow:hidden;position:relative}.panel__header{padding:var(--zn-panel-header-padding,var(--zn-base-gap))}.panel__header::part(base){border-bottom:0;overflow:visible}.panel__header--inline{border-bottom:0}.panel__header--underline{border-bottom:1px solid rgb(var(--zn-border-color))}.panel__header::part(content){padding:0}.panel__body{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1;padding:var(--zn-base-gap)}.panel__body>:not([hidden])~:not([hidden]){border:1px solid rgb(var(--zn-border-color))}.panel__footer{font-size:var(--zn-font-size-small);display:block;padding:var(--zn-panel-footer-padding,var(--zn-spacing-small) var(--zn-base-gap));background:rgb(var(--zn-body));border-bottom-left-radius:var(--zn-border-radius);border-bottom-right-radius:var(--zn-border-radius)}.panel--tabbed .panel__body{padding:0}.panel--transparent{background-color:transparent;border:none}.panel--transparent:before{display:none}.panel:not(.panel--flush,.panel--flush-x,.panel--flush-y) ::slotted(zn-sp){--zn-sp-padding:0 !important}.panel.panel--borderless-header:not(.panel--flush,.panel--flush-y) .panel__body{padding-top:0}.panel--empty .panel__body{padding:0}.panel--flush .panel__body{padding:0}.panel--flush-x .panel__body{padding-inline:0}.panel--flush-y .panel__body{padding-block:0}.panel--flush-footer .panel__footer{padding:0}.panel--transparent .panel__header{padding-left:0;padding-right:0}.panel--cosmic{border:1px solid transparent}.panel--cosmic:before{content:"";z-index:-1;position:absolute;top:-2px;left:-2px;height:calc(100% + 4px);width:calc(100% + 4px);filter:blur(var(--zn-blur,1px));opacity:0.9;border-radius:var(--zn-border-radius);background-image:conic-gradient(from var(--rotate) at 50% 50%,#71d9ff 0%,#a100ff 22%,#71d9ff 44%,#ff00ce 74%,#71d9ff 94%);animation:rotate-gradient 6s linear infinite}.panel--shadow{box-shadow:0 6px 20px 10px rgba(0,0,0,0.25)}`;var Ze=class extends k{constructor(){super(...arguments);this.hasSlotController=new Y(this,"[default]","actions","footer");this.bodyEmpty=!1;this.resizeObserver=null}firstUpdated(t){if(super.firstUpdated(t),this.observeBodyContent(),this.basis&&this.style.setProperty("--zn-panel-basis",this.basis.toString()+"px"),!this.tabbed){let r=this.querySelector("zn-tabs");if(r){r.setAttribute("flush-x","");let n=this.shadowRoot?.querySelector(".body");n&&n.classList.toggle("ntp",!0)}}}connectedCallback(){if(super.connectedCallback(),this.hasUpdated&&this.observeBodyContent(),window.CSS.registerProperty)try{window.CSS.registerProperty({inherits:!1,initialValue:"0deg",name:"--rotate",syntax:"<angle>"})}catch{}}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect(),this.resizeObserver=null}observeBodyContent(){let t=this.renderRoot?.querySelector(".panel__body");t&&(this.resizeObserver??(this.resizeObserver=new ResizeObserver(()=>this.measureBodyContent())),this.resizeObserver.disconnect(),this.resizeObserver.observe(t),this.measureBodyContent())}measureBodyContent(){let t=this.renderRoot?.querySelector(".panel__body");if(!t)return;let r=getComputedStyle(t),n=parseFloat(r.paddingTop)+parseFloat(r.paddingBottom);this.bodyEmpty=t.scrollHeight-n<=0}render(){let t=this.hasSlotController.test("actions"),r=this.hasSlotController.test("footer"),n=this.caption||t,a=!this.hasSlotController.test("[default]")||this.bodyEmpty,s=this.flush||this.tabbed||this.flushY,l=!this.headerBorderless&&!(this.transparent&&s)&&!a;return u`
       <div class="${M({panel:!0,"panel--flush":this.flush||this.tabbed,"panel--flush-x":this.flushX,"panel--flush-y":this.flushY,"panel--flush-footer":this.flushFooter,"panel--tabbed":this.tabbed,"panel--transparent":this.transparent,"panel--has-actions":t,"panel--has-footer":r,"panel--empty":a,"panel--has-header":n,"panel--borderless-header":this.headerBorderless,"panel--cosmic":this.cosmic,"panel--shadow":this.shadow})}">
 
         <div class="panel__inner">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.131",
+  "version": "1.1.132",
   "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

@@ -92,27 +92,25 @@ export default class ZnPanel extends ZincElement {
     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;
+    const body = this.renderRoot?.querySelector('.panel__body');
+    if (!body) return;
 
     this.resizeObserver ??= new ResizeObserver(() => this.measureBodyContent());
     this.resizeObserver.disconnect();
-    slot.assignedElements({flatten: true}).forEach(el => this.resizeObserver!.observe(el));
+    this.resizeObserver.observe(body);
     this.measureBodyContent();
   }
 
+  // Measured on the body, not on the slotted elements: `display: contents` hosts such as zn-stat
+  // render content but have no box of their own to read or observe.
   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);
+    const body = this.renderRoot?.querySelector('.panel__body');
+    if (!body) return;
+
+    const style = getComputedStyle(body);
+    const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+    this.bodyEmpty = body.scrollHeight - padding <= 0;
   }
 
   protected render(): unknown {

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

@@ -1,5 +1,5 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
 
 describe('<zn-panel>', () => {
   it('should render a component', async () => {
@@ -41,6 +41,20 @@ describe('<zn-panel>', () => {
     expect(el.shadowRoot!.querySelector('.panel')!.classList.contains('panel--empty')).to.be.true;
   });
 
+  it('keeps the padded body when slotted content has no box of its own', async () => {
+    const el = await fixture(html` <zn-panel caption="Example">
+      <div style="display: contents">
+        <div style="height: 20px"></div>
+      </div>
+    </zn-panel> `);
+    const header = el.shadowRoot!.querySelector('.panel__header')!;
+
+    await aTimeout(50);
+
+    expect(header.classList.contains('panel__header--underline')).to.be.true;
+    expect(el.shadowRoot!.querySelector('.panel')!.classList.contains('panel--empty')).to.be.false;
+  });
+
   it('restores the header underline when slotted content gains height', async () => {
     const el = await fixture(html` <zn-panel caption="Example">
       <div id="wrapper"></div>