@ctrliq/quantic-components 1.67.2 → 1.67.3

package/dist/layout/layout.component.d.ts

@@ -1,4 +1,4 @@
-import { type PropertyValues } from 'lit';
+import { type CSSResultGroup, type PropertyValues } from 'lit';
 import { LayoutVariant } from './index.constants';
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
@@ -10,8 +10,6 @@ export declare class Layout extends Layout_base {
     private previousIsSmallViewport?;
     private hasSidebarSlot;
     private hasTitlebarSlot;
-    private hasNavbarSlot;
-    private hasLogoSlot;
     private asideElement?;
     private toggleButtonElement?;
     private focusTrap?;
@@ -28,10 +26,10 @@ export declare class Layout extends Layout_base {
     protected willUpdate(_props: PropertyValues): void;
     protected updated(props: PropertyValues): void;
     static styles: import("lit").CSSResult;
+    static finalizeStyles(styles?: CSSResultGroup): import("lit").CSSResultOrNative[];
     private get isAsideCollapsible();
     private get hasSidebar();
     private get hasTitlebar();
-    private get hasHeader();
     render(): import("lit").TemplateResult;
 }
 export {};

package/dist/layout/layout.component.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -27,8 +27,6 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
         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;
@@ -116,6 +114,24 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
         }
         this.previousIsSmallViewport = this.isSmallViewport;
     }
+    static finalizeStyles(styles) {
+        const base = super.finalizeStyles(styles) ?? [];
+        return [
+            ...base,
+            unsafeCSS(`@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;
     }
@@ -125,12 +141,6 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
     get hasTitlebar() {
         return this.hasTitlebarSlot;
     }
-    get hasHeader() {
-        return (this.isAsideCollapsible ||
-            this.hasTitlebarSlot ||
-            this.hasNavbarSlot ||
-            this.hasLogoSlot);
-    }
     render() {
         const toggleButton = html `<quantic-button
       class="toggle-button"
@@ -146,7 +156,6 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
         const logo = html `<slot
       name="logo"
       class="logo"
-      @slotchange=${onSlotChange((has) => (this.hasLogoSlot = has))}
     ></slot>`;
         const titlebar = html `<slot
       class="titlebar"
@@ -163,14 +172,13 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
         })}
         @expanded-changed=${this.handleAsideExpand}
       >
-        <header class="header" ?hidden=${!this.hasHeader}>
+        <header class=${classMap({ 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>
 
@@ -183,7 +191,6 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
 
         <div
           class="aside-backdrop"
-          ?hidden=${!this.hasSidebar}
           aria-hidden="true"
           @click=${this.toggleAsideExpanded}
         ></div>
@@ -374,7 +381,7 @@ Layout.styles = css `
       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);
@@ -399,8 +406,6 @@ Layout.styles = css `
 
       .header {
         grid-area: header;
-        display: flex;
-        align-items: center;
       }
 
       .logo {
@@ -427,7 +432,7 @@ Layout.styles = css `
         pointer-events: auto;
       }
 
-      .is-aside-expanded .aside-backdrop {
+      .has-sidebar.is-aside-expanded .aside-backdrop {
         display: none;
       }
 
@@ -490,12 +495,6 @@ __decorate([
 __decorate([
     state()
 ], Layout.prototype, "hasTitlebarSlot", void 0);
-__decorate([
-    state()
-], Layout.prototype, "hasNavbarSlot", void 0);
-__decorate([
-    state()
-], Layout.prototype, "hasLogoSlot", void 0);
 __decorate([
     query('.aside')
 ], Layout.prototype, "asideElement", void 0);