@ctrliq/quantic-components 1.67.1 → 1.67.3

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

@@ -1,11 +1,11 @@
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
-declare const InlineEdit_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/slot-content.mixin").SlotContentInterface>;
-export declare class InlineEdit extends InlineEdit_base {
+export declare class InlineEdit extends QuanticElement {
     static meta: ComponentMeta;
     label: string;
     active: boolean;
     invalid: boolean;
+    private hasLabelSlot;
     connectedCallback(): void;
     disconnectedCallback(): void;
     static styles: import("lit").CSSResult;
@@ -17,4 +17,3 @@ export declare class InlineEdit extends InlineEdit_base {
     private handleFocusOut;
     render(): import("lit").TemplateResult<1>;
 }
-export {};

package/dist/inline-edit/index.js

@@ -5,19 +5,21 @@ 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 { SlotContentMixin } from '../shared/slot-content.mixin';
+import { onSlotChange } 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';
 import { event, prop } from '../shared/component-meta.decorators';
 LucideIconPencil.ensureDefined();
-let InlineEdit = class InlineEdit extends SlotContentMixin(QuanticElement) {
+let InlineEdit = class InlineEdit extends QuanticElement {
     constructor() {
         super(...arguments);
         this.label = '';
         this.active = false;
         this.invalid = false;
+        this.hasLabelSlot = false;
         this.handleActivateClick = () => {
             if (!this.active)
                 this.activate();
@@ -75,7 +77,7 @@ let InlineEdit = class InlineEdit extends SlotContentMixin(QuanticElement) {
         }
     }
     render() {
-        const hasLabel = this.hasSlotContent('label') || !!this.label;
+        const hasLabel = this.hasLabelSlot || !!this.label;
         return html `
       <div
         class="${classMap({
@@ -87,11 +89,9 @@ let InlineEdit = class InlineEdit extends SlotContentMixin(QuanticElement) {
         @click=${this.handleActivateClick}
         @keydown=${this.handleTriggerKey}
       >
-        ${hasLabel
-            ? html `<span class="label"
-              ><slot name="label">${this.label}</slot></span
-            >`
-            : ''}
+        <span class=${classMap({ label: true, 'is-empty': !hasLabel })}
+          ><slot name="label" @slotchange=${onSlotChange((has) => (this.hasLabelSlot = has))}>${this.label}</slot></span
+        >
         <span class="value">
           <span class="display">
             <slot name="display"><span>—</span></slot>
@@ -164,6 +164,11 @@ InlineEdit.styles = css `
       );
     }
 
+    /* The label renders unconditionally so its slot exists to fire slotchange. */
+    .label.is-empty {
+      display: none;
+    }
+
     .value {
       min-width: 0;
       display: flex;
@@ -239,6 +244,9 @@ __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/layout.component.d.ts

@@ -1,13 +1,15 @@
-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';
-declare const Layout_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+declare const Layout_base: typeof QuanticElement;
 export declare class Layout extends Layout_base {
     static meta: ComponentMeta;
     variant: LayoutVariant;
     private isSmallViewport;
     private previousIsSmallViewport?;
+    private hasSidebarSlot;
+    private hasTitlebarSlot;
     private asideElement?;
     private toggleButtonElement?;
     private focusTrap?;
@@ -23,12 +25,11 @@ export declare class Layout extends Layout_base {
     disconnectedCallback(): void;
     protected willUpdate(_props: PropertyValues): void;
     protected updated(props: PropertyValues): void;
-    private handleSlotChange;
     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,12 +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 { query } from 'lit/decorators.js';
+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 { respond, Breakpoint } from '../shared/respond.decorator';
 import { LayoutVariant } from './index.constants';
 import { asideExpandedContext } from './index.context';
@@ -20,10 +21,12 @@ import { QuanticElement, quanticElement } from '../shared/quantic-element';
 import { prop } from '../shared/component-meta.decorators';
 Button.ensureDefined();
 LucideIconMenu.ensureDefined();
-let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement) {
+let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo', 'titlebar', 'toolbar', 'navbar', 'sidebar']) {
     constructor() {
         super(...arguments);
         this.variant = LayoutVariant.Default;
+        this.hasSidebarSlot = false;
+        this.hasTitlebarSlot = false;
         this._isAsideExpanded = true;
         this.handleAsideExpand = (event) => {
             this.isAsideExpanded = event.detail.expanded;
@@ -33,10 +36,6 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement) {
                 this.isAsideExpanded = false;
             }
         };
-        this.handleSlotChange = (event) => {
-            this.handleAutoHide(event);
-            this.requestUpdate();
-        };
     }
     get isAsideExpanded() {
         return this._isAsideExpanded;
@@ -115,18 +114,32 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement) {
         }
         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;
     }
     get hasSidebar() {
-        return !this.isSlotEmpty('sidebar');
+        return this.hasSidebarSlot;
     }
     get hasTitlebar() {
-        return !this.isSlotEmpty('titlebar');
-    }
-    get hasHeader() {
-        return (this.isAsideCollapsible ||
-            ['titlebar', 'navbar', 'logo'].some((slot) => !this.isSlotEmpty(slot)));
+        return this.hasTitlebarSlot;
     }
     render() {
         const toggleButton = html `<quantic-button
@@ -143,12 +156,11 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement) {
         const logo = html `<slot
       name="logo"
       class="logo"
-      @slotchange=${this.handleSlotChange}
     ></slot>`;
         const titlebar = html `<slot
       class="titlebar"
       name="titlebar"
-      @slotchange=${this.handleSlotChange}
+      @slotchange=${onSlotChange((has) => (this.hasTitlebarSlot = has))}
     ></slot> `;
         return html `
       <div
@@ -160,14 +172,13 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement) {
         })}
         @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=${this.handleSlotChange}
           ></slot>
         </header>
 
@@ -176,12 +187,10 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement) {
         <slot
           name="toolbar"
           class="toolbar"
-          @slotchange=${this.handleSlotChange}
         ></slot>
 
         <div
           class="aside-backdrop"
-          ?hidden=${!this.hasSidebar}
           aria-hidden="true"
           @click=${this.toggleAsideExpanded}
         ></div>
@@ -196,7 +205,7 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement) {
           <slot
             class="sidebar"
             name="sidebar"
-            @slotchange=${this.handleSlotChange}
+            @slotchange=${onSlotChange((has) => (this.hasSidebarSlot = has))}
           ></slot>
         </aside>
 
@@ -372,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);
@@ -397,8 +406,6 @@ Layout.styles = css `
 
       .header {
         grid-area: header;
-        display: flex;
-        align-items: center;
       }
 
       .logo {
@@ -425,7 +432,7 @@ Layout.styles = css `
         pointer-events: auto;
       }
 
-      .is-aside-expanded .aside-backdrop {
+      .has-sidebar.is-aside-expanded .aside-backdrop {
         display: none;
       }
 
@@ -482,6 +489,12 @@ __decorate([
 __decorate([
     respond(Breakpoint.below(1024))
 ], Layout.prototype, "isSmallViewport", void 0);
+__decorate([
+    state()
+], Layout.prototype, "hasSidebarSlot", void 0);
+__decorate([
+    state()
+], Layout.prototype, "hasTitlebarSlot", void 0);
 __decorate([
     query('.aside')
 ], Layout.prototype, "asideElement", void 0);

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

@@ -1,6 +1,6 @@
 import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
-declare const Sidebar_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+declare const Sidebar_base: typeof QuanticElement;
 export declare class Sidebar extends Sidebar_base {
     static meta: ComponentMeta;
     isAsideExpanded?: boolean;

package/dist/layout/sidebar.component.js

@@ -20,7 +20,7 @@ import { prop } from '../shared/component-meta.decorators';
 SidebarMenuItem.ensureDefined();
 LucideIconPanelLeftClose.ensureDefined();
 LucideIconPanelLeft.ensureDefined();
-let Sidebar = class Sidebar extends AutoHideEmptySlotsMixin(QuanticElement) {
+let Sidebar = class Sidebar extends AutoHideEmptySlotsMixin(QuanticElement, ['header', 'footer']) {
     constructor() {
         super(...arguments);
         this.ariaLabel = 'Sidebar navigation';
@@ -42,16 +42,16 @@ let Sidebar = class Sidebar extends AutoHideEmptySlotsMixin(QuanticElement) {
         aria-expanded=${this.isAsideExpanded !== false ? 'true' : 'false'}
       >
         <div class="header">
-          <slot name="header" @slotchange=${this.handleAutoHide}></slot>
+          <slot name="header"></slot>
         </div>
 
         <div class="scroll-area">
           <div class="body">
-            <slot @slotchange=${this.handleAutoHide}></slot>
+            <slot></slot>
           </div>
 
           <div class="footer">
-            <slot name="footer" @slotchange=${this.handleAutoHide}></slot>
+            <slot name="footer"></slot>
           </div>
 
           ${this.isDesktopViewport && this.collapsible
@@ -114,7 +114,7 @@ Sidebar.styles = css `
       flex-shrink: 0;
     }
 
-    .header:has(slot[hidden]) {
+    :host(:not(:has([slot="header"]))) .header {
       display: none;
     }