@ctrliq/quantic-components 1.67.3 → 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.js

@@ -10,7 +10,7 @@ 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';
@@ -94,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() {
@@ -120,16 +124,60 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
             ...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; }
+        .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() {
@@ -197,7 +245,6 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
 
         <aside
           class="aside"
-          ?hidden=${!this.hasSidebar}
           tabindex="-1"
           ?inert=${this.isSmallViewport && !this.isAsideExpanded}
         >
@@ -338,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(