@ctrliq/quantic-components 1.67.2 → 1.67.3

package/dist/quantic-components.js

@@ -63492,8 +63492,6 @@
             this.variant = LayoutVariant.Default;
             this.hasSidebarSlot = false;
             this.hasTitlebarSlot = false;
-            this.hasNavbarSlot = false;
-            this.hasLogoSlot = false;
             this._isAsideExpanded = true;
             this.handleAsideExpand = (event) => {
                 this.isAsideExpanded = event.detail.expanded;
@@ -63581,6 +63579,24 @@
             }
             this.previousIsSmallViewport = this.isSmallViewport;
         }
+        static finalizeStyles(styles) {
+            const base = super.finalizeStyles(styles) ?? [];
+            return [
+                ...base,
+                r$6(`@layer quantic-header-visibility {
+        .header { display: none; }
+        .header.collapsible,
+        :host(:has([slot="navbar"])) .header,
+        :host(:has([slot="titlebar"])) .header,
+        :host(:has([slot="logo"])) .header { display: revert-layer; }
+        @scope {
+          :scope:has([slot="navbar"]) .header,
+          :scope:has([slot="titlebar"]) .header,
+          :scope:has([slot="logo"]) .header { display: revert-layer; }
+        }
+      }`),
+            ];
+        }
         get isAsideCollapsible() {
             return this.isSmallViewport && this.hasSidebar;
         }
@@ -63590,12 +63606,6 @@
         get hasTitlebar() {
             return this.hasTitlebarSlot;
         }
-        get hasHeader() {
-            return (this.isAsideCollapsible ||
-                this.hasTitlebarSlot ||
-                this.hasNavbarSlot ||
-                this.hasLogoSlot);
-        }
         render() {
             const toggleButton = u$2 `<quantic-button
       class="toggle-button"
@@ -63611,7 +63621,6 @@
             const logo = u$2 `<slot
       name="logo"
       class="logo"
-      @slotchange=${onSlotChange((has) => (this.hasLogoSlot = has))}
     ></slot>`;
             const titlebar = u$2 `<slot
       class="titlebar"
@@ -63628,14 +63637,13 @@
         })}
         @expanded-changed=${this.handleAsideExpand}
       >
-        <header class="header" ?hidden=${!this.hasHeader}>
+        <header class=${e$3({ header: true, collapsible: this.isAsideCollapsible })}>
           ${!this.hasSidebar ? logo : null}
           ${this.isAsideCollapsible ? toggleButton : null}
           ${this.isSmallViewport ? null : titlebar}
           <slot
             class="navbar"
             name="navbar"
-            @slotchange=${onSlotChange((has) => (this.hasNavbarSlot = has))}
           ></slot>
         </header>
 
@@ -63648,7 +63656,6 @@
 
         <div
           class="aside-backdrop"
-          ?hidden=${!this.hasSidebar}
           aria-hidden="true"
           @click=${this.toggleAsideExpanded}
         ></div>
@@ -63839,7 +63846,7 @@
       opacity: 0;
     }
 
-    .is-aside-expanded .aside-backdrop {
+    .has-sidebar.is-aside-expanded .aside-backdrop {
       display: block;
       pointer-events: auto;
       opacity: var(--quantic-component-layout-aside-backdrop-opacity);
@@ -63864,8 +63871,6 @@
 
       .header {
         grid-area: header;
-        display: flex;
-        align-items: center;
       }
 
       .logo {
@@ -63892,7 +63897,7 @@
         pointer-events: auto;
       }
 
-      .is-aside-expanded .aside-backdrop {
+      .has-sidebar.is-aside-expanded .aside-backdrop {
         display: none;
       }
 
@@ -63955,12 +63960,6 @@
     __decorate([
         r$2()
     ], exports.Layout.prototype, "hasTitlebarSlot", void 0);
-    __decorate([
-        r$2()
-    ], exports.Layout.prototype, "hasNavbarSlot", void 0);
-    __decorate([
-        r$2()
-    ], exports.Layout.prototype, "hasLogoSlot", void 0);
     __decorate([
         e$5('.aside')
     ], exports.Layout.prototype, "asideElement", void 0);