@ctrliq/quantic-components 1.67.1 → 1.67.2

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

@@ -2,12 +2,16 @@ import { 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 hasNavbarSlot;
+    private hasLogoSlot;
     private asideElement?;
     private toggleButtonElement?;
     private focusTrap?;
@@ -23,7 +27,6 @@ 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;
     private get isAsideCollapsible();
     private get hasSidebar();

package/dist/layout/layout.component.js

@@ -5,11 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css } from 'lit';
-import { query } from 'lit/decorators.js';
+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,14 @@ 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.hasNavbarSlot = false;
+        this.hasLogoSlot = false;
         this._isAsideExpanded = true;
         this.handleAsideExpand = (event) => {
             this.isAsideExpanded = event.detail.expanded;
@@ -33,10 +38,6 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement) {
                 this.isAsideExpanded = false;
             }
         };
-        this.handleSlotChange = (event) => {
-            this.handleAutoHide(event);
-            this.requestUpdate();
-        };
     }
     get isAsideExpanded() {
         return this._isAsideExpanded;
@@ -119,14 +120,16 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement) {
         return this.isSmallViewport && this.hasSidebar;
     }
     get hasSidebar() {
-        return !this.isSlotEmpty('sidebar');
+        return this.hasSidebarSlot;
     }
     get hasTitlebar() {
-        return !this.isSlotEmpty('titlebar');
+        return this.hasTitlebarSlot;
     }
     get hasHeader() {
         return (this.isAsideCollapsible ||
-            ['titlebar', 'navbar', 'logo'].some((slot) => !this.isSlotEmpty(slot)));
+            this.hasTitlebarSlot ||
+            this.hasNavbarSlot ||
+            this.hasLogoSlot);
     }
     render() {
         const toggleButton = html `<quantic-button
@@ -143,12 +146,12 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement) {
         const logo = html `<slot
       name="logo"
       class="logo"
-      @slotchange=${this.handleSlotChange}
+      @slotchange=${onSlotChange((has) => (this.hasLogoSlot = has))}
     ></slot>`;
         const titlebar = html `<slot
       class="titlebar"
       name="titlebar"
-      @slotchange=${this.handleSlotChange}
+      @slotchange=${onSlotChange((has) => (this.hasTitlebarSlot = has))}
     ></slot> `;
         return html `
       <div
@@ -167,7 +170,7 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement) {
           <slot
             class="navbar"
             name="navbar"
-            @slotchange=${this.handleSlotChange}
+            @slotchange=${onSlotChange((has) => (this.hasNavbarSlot = has))}
           ></slot>
         </header>
 
@@ -176,7 +179,6 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement) {
         <slot
           name="toolbar"
           class="toolbar"
-          @slotchange=${this.handleSlotChange}
         ></slot>
 
         <div
@@ -196,7 +198,7 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement) {
           <slot
             class="sidebar"
             name="sidebar"
-            @slotchange=${this.handleSlotChange}
+            @slotchange=${onSlotChange((has) => (this.hasSidebarSlot = has))}
           ></slot>
         </aside>
 
@@ -482,6 +484,18 @@ __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([
+    state()
+], Layout.prototype, "hasNavbarSlot", void 0);
+__decorate([
+    state()
+], Layout.prototype, "hasLogoSlot", 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;
     }