@ctrliq/quantic-components 1.67.2 → 1.67.4

package/dist/inline-edit/index.d.ts

@@ -5,10 +5,9 @@ export declare class InlineEdit extends QuanticElement {
     label: string;
     active: boolean;
     invalid: boolean;
-    private hasLabelSlot;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     private activate;
     private deactivate;
     private handleActivateClick;

package/dist/inline-edit/index.js

@@ -5,9 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html } from 'lit';
-import { state } from 'lit/decorators.js';
 import { quanticElement, QuanticElement } from '../shared/quantic-element';
-import { onSlotChange } from '../shared/slot-utils';
+import { whenSlotPresent } from '../shared/slot-utils';
 import { IconSize } from '../icon/index.constants';
 import { LucideIconPencil } from '../icon/__generated__/lucide/pencil';
 import { classMap } from 'lit/directives/class-map.js';
@@ -19,7 +18,6 @@ let InlineEdit = class InlineEdit extends QuanticElement {
         this.label = '';
         this.active = false;
         this.invalid = false;
-        this.hasLabelSlot = false;
         this.handleActivateClick = () => {
             if (!this.active)
                 this.activate();
@@ -77,7 +75,7 @@ let InlineEdit = class InlineEdit extends QuanticElement {
         }
     }
     render() {
-        const hasLabel = this.hasLabelSlot || !!this.label;
+        const hasLabel = !!this.label;
         return html `
       <div
         class="${classMap({
@@ -90,7 +88,7 @@ let InlineEdit = class InlineEdit extends QuanticElement {
         @keydown=${this.handleTriggerKey}
       >
         <span class=${classMap({ label: true, 'is-empty': !hasLabel })}
-          ><slot name="label" @slotchange=${onSlotChange((has) => (this.hasLabelSlot = has))}>${this.label}</slot></span
+          ><slot name="label">${this.label}</slot></span
         >
         <span class="value">
           <span class="display">
@@ -120,7 +118,7 @@ InlineEdit.meta = {
         editor: { description: 'Input element shown when the field is active.' },
     },
 };
-InlineEdit.styles = css `
+InlineEdit.styles = [css `
     :host {
       display: block;
       padding: var(
@@ -164,7 +162,6 @@ InlineEdit.styles = css `
       );
     }
 
-    /* The label renders unconditionally so its slot exists to fire slotchange. */
     .label.is-empty {
       display: none;
     }
@@ -234,7 +231,13 @@ InlineEdit.styles = css `
     .is-active .editor {
       display: block;
     }
-  `;
+  `,
+    whenSlotPresent('label', css `
+    .label.is-empty {
+      display: revert;
+    }
+  `),
+];
 __decorate([
     prop({ type: 'string', default: '', description: 'Fallback label text when no label slot content is provided.' })
 ], InlineEdit.prototype, "label", void 0);
@@ -244,9 +247,6 @@ __decorate([
 __decorate([
     prop({ type: 'boolean', default: 'false', description: 'When true, focusout does not close the editor. The editor stays open until the value is valid or the user cancels.' })
 ], InlineEdit.prototype, "invalid", void 0);
-__decorate([
-    state()
-], InlineEdit.prototype, "hasLabelSlot", void 0);
 InlineEdit = __decorate([
     event('cancel', { description: 'Fired on Escape. Consumer should revert optimistic state.' }),
     quanticElement('quantic-inline-edit')

package/dist/layout/index.stories.js

@@ -258,18 +258,28 @@ export const SidebarWithStickyHeader = story().render(({ html }) => html `
           slot="header"
           style="display: flex; align-items: center; gap: var(--quantic-spacing-2); padding: var(--quantic-spacing-2); border-bottom: 1px solid var(--quantic-border-secondary); margin-bottom: var(--quantic-spacing-2);"
         >
-          <quantic-icon-brand-fuzzball-solid size="sm"></quantic-icon-brand-fuzzball-solid>
-          <span style="font-weight: var(--quantic-font-weight-semibold); font-size: var(--quantic-font-size-sm);">CIQ Engineering</span>
+          <quantic-icon-brand-fuzzball-solid
+            size="sm"
+          ></quantic-icon-brand-fuzzball-solid>
+          <span
+            style="font-weight: var(--quantic-font-weight-semibold); font-size: var(--quantic-font-size-sm);"
+            >CIQ Engineering</span
+          >
         </div>
         ${Array.from({ length: 20 }, (_, i) => html `
             <quantic-sidebar-menu-item href="#" label="Nav item ${i + 1}">
-              <quantic-icon-lucide-circle slot="icon" size="sm"></quantic-icon-lucide-circle>
+              <quantic-icon-lucide-circle
+                slot="icon"
+                size="sm"
+              ></quantic-icon-lucide-circle>
             </quantic-sidebar-menu-item>
           `)}
       </quantic-sidebar>
       <quantic-page slot="body">
         <quantic-panel variant="solid">
-          <quantic-panel-header slot="header">Sticky sidebar header</quantic-panel-header>
+          <quantic-panel-header slot="header"
+            >Sticky sidebar header</quantic-panel-header
+          >
           Scroll the sidebar — the header above the nav items stays fixed.
         </quantic-panel>
       </quantic-page>

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,13 +4,13 @@ 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';
 import { provide } from '@lit/context';
 import { AutoHideEmptySlotsMixin } from '../shared/auto-hide-empty-slots.mixin';
-import { onSlotChange } from '../shared/slot-utils';
+import { onSlotChange, whenSlotPresent } from '../shared/slot-utils';
 import { respond, Breakpoint } from '../shared/respond.decorator';
 import { LayoutVariant } from './index.constants';
 import { asideExpandedContext } from './index.context';
@@ -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;
@@ -96,6 +94,10 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
     }
     connectedCallback() {
         super.connectedCallback();
+        if (this.hasAttribute('ssr-has-sidebar')) {
+            this.hasSidebarSlot = true;
+            this.removeAttribute('ssr-has-sidebar');
+        }
         document.addEventListener('keydown', this.handleKeydown);
     }
     disconnectedCallback() {
@@ -116,6 +118,68 @@ 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 { display: revert-layer; }
+      }`),
+            whenSlotPresent('navbar', css `
+        @layer quantic-header-visibility {
+          .header {
+            display: revert-layer;
+          }
+        }
+      `),
+            whenSlotPresent('titlebar', css `
+        @layer quantic-header-visibility {
+          .header {
+            display: revert-layer;
+          }
+        }
+      `),
+            unsafeCSS(`@layer quantic-header-visibility {
+        :host(:has([slot="logo"]):not(:has([slot="sidebar"]))) .header { display: revert-layer; }
+        @scope { :scope:has([slot="logo"]):not(:has([slot="sidebar"])) .header { display: revert-layer; } }
+      }`),
+            whenSlotPresent('sidebar', css `
+        .aside { display: flex; }
+        @media only screen and (min-width: 1024px) {
+          .wrapper {
+            display: grid;
+            grid-template-areas: 'aside header' 'aside toolbar' 'aside main';
+            grid-template-rows: auto auto 1fr;
+            grid-template-columns: var(--quantic-component-layout-aside-width-collapsed) 1fr;
+          }
+          .is-aside-expanded.wrapper {
+            grid-template-columns: var(--quantic-component-layout-aside-width) 1fr;
+          }
+          .aside {
+            grid-area: aside;
+            position: sticky;
+            top: 0;
+            align-self: start;
+            transform: translateX(0);
+            opacity: 1;
+            pointer-events: auto;
+          }
+          .is-aside-expanded.wrapper .aside,
+          .is-aside-expanded.wrapper .logo {
+            width: var(--quantic-component-layout-aside-width);
+          }
+          .wrapper:not(.is-aside-expanded) .aside,
+          .wrapper:not(.is-aside-expanded) .logo {
+            width: var(--quantic-component-layout-aside-width-collapsed);
+            padding-inline: 0;
+          }
+          .toolbar { grid-area: toolbar; min-width: 0; }
+          .body { grid-area: main; min-width: 0; }
+        }
+      `),
+        ];
+    }
     get isAsideCollapsible() {
         return this.isSmallViewport && this.hasSidebar;
     }
@@ -125,12 +189,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 +204,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 +220,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,14 +239,12 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
 
         <div
           class="aside-backdrop"
-          ?hidden=${!this.hasSidebar}
           aria-hidden="true"
           @click=${this.toggleAsideExpanded}
         ></div>
 
         <aside
           class="aside"
-          ?hidden=${!this.hasSidebar}
           tabindex="-1"
           ?inert=${this.isSmallViewport && !this.isAsideExpanded}
         >
@@ -331,7 +385,7 @@ Layout.styles = css `
       padding-block: var(--quantic-component-layout-aside-padding-block);
       border-right: 1px solid var(--quantic-component-layout-aside-border);
       overflow: visible;
-      display: flex;
+      display: none;
       flex-direction: column;
       gap: var(--quantic-component-layout-aside-padding-block);
       transform: translateX(
@@ -374,7 +428,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 +453,6 @@ Layout.styles = css `
 
       .header {
         grid-area: header;
-        display: flex;
-        align-items: center;
       }
 
       .logo {
@@ -427,7 +479,7 @@ Layout.styles = css `
         pointer-events: auto;
       }
 
-      .is-aside-expanded .aside-backdrop {
+      .has-sidebar.is-aside-expanded .aside-backdrop {
         display: none;
       }
 
@@ -490,12 +542,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);