@ctrliq/quantic-components 1.68.0 → 1.68.1

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

@@ -2,7 +2,12 @@ import { QuanticElement } from '../shared/quantic-element';
 import type { ComponentMeta } from '../shared/meta.types';
 export declare class LayoutLogo extends QuanticElement {
     static meta: ComponentMeta;
-    expanded?: boolean;
+    expanded: boolean;
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-layout-logo': LayoutLogo;
+    }
+}

package/dist/layout/layout-logo.component.js

@@ -9,10 +9,15 @@ import { consume } from '@lit/context';
 import { QuanticElement, quanticElement } from '../shared/quantic-element';
 import { asideExpandedContext } from './index.context';
 let LayoutLogo = class LayoutLogo extends QuanticElement {
+    constructor() {
+        super(...arguments);
+        this.expanded = true;
+    }
     render() {
-        return this.expanded === true
-            ? html `<slot name="expanded"></slot>`
-            : html `<slot name="collapsed"></slot>`;
+        return html `
+      <slot name="expanded" ?hidden=${this.expanded !== true}></slot>
+      <slot name="collapsed" ?hidden=${this.expanded === true}></slot>
+    `;
     }
 };
 LayoutLogo.meta = {
@@ -29,6 +34,9 @@ LayoutLogo.styles = css `
     :host {
       display: contents;
     }
+    [hidden] {
+      display: none;
+    }
   `;
 __decorate([
     consume({ context: asideExpandedContext, subscribe: true })

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

@@ -8,6 +8,9 @@ export declare class Layout extends Layout_base {
     variant: LayoutVariant;
     private isSmallViewport;
     private previousIsSmallViewport?;
+    private _initializedInBrowser;
+    private _asideStateInitialized;
+    private ssrHasSidebar;
     private hasSidebarSlot;
     private hasTitlebarSlot;
     private asideElement?;
@@ -27,9 +30,12 @@ export declare class Layout extends Layout_base {
     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();
     render(): import("lit").TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-layout': Layout;
+    }
+}
 export {};

package/dist/layout/layout.component.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, unsafeCSS } from 'lit';
-import { query, state } from 'lit/decorators.js';
+import { property, 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';
@@ -25,9 +25,12 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
     constructor() {
         super(...arguments);
         this.variant = LayoutVariant.Default;
+        this._initializedInBrowser = false;
+        this._asideStateInitialized = false;
+        this.ssrHasSidebar = false;
         this.hasSidebarSlot = false;
         this.hasTitlebarSlot = false;
-        this._isAsideExpanded = true;
+        this._isAsideExpanded = false;
         this.handleAsideExpand = (event) => {
             this.isAsideExpanded = event.detail.expanded;
         };
@@ -106,14 +109,31 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
         this.deactivateFocusTrap();
     }
     willUpdate(_props) {
-        if (this.previousIsSmallViewport === undefined) {
-            this._isAsideExpanded = !this.isSmallViewport;
+        const isFirstEver = this.previousIsSmallViewport === undefined;
+        const isFirstBrowser = !this._initializedInBrowser && typeof window !== 'undefined';
+        if (isFirstEver) {
             this.previousIsSmallViewport = this.isSmallViewport;
         }
+        if (isFirstBrowser) {
+            // Do NOT set _isAsideExpanded here — see updated() for the reason.
+            this._initializedInBrowser = true;
+        }
     }
     updated(props) {
         super.updated(props);
-        if (this.previousIsSmallViewport !== this.isSmallViewport) {
+        // Set initial aside state after the first browser render, not in willUpdate.
+        //
+        // Reason: Lit DSD hydration uses the first render output as the diff baseline.
+        // If _isAsideExpanded is set to true in willUpdate, cycle 1 renders true,
+        // cycle 2 also renders true — the diff sees no change and never writes the
+        // class to the DOM. Setting it here means cycle 1 renders false (matching the
+        // SSR DOM), then the setter triggers cycle 2 which diffs false→true and
+        // actually commits the class.
+        if (this._initializedInBrowser && !this._asideStateInitialized) {
+            this._asideStateInitialized = true;
+            this.isAsideExpanded = !this.isSmallViewport;
+        }
+        else if (this._initializedInBrowser && this.previousIsSmallViewport !== this.isSmallViewport) {
             this.isAsideExpanded = !this.isSmallViewport;
         }
         this.previousIsSmallViewport = this.isSmallViewport;
@@ -124,7 +144,7 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
             ...base,
             unsafeCSS(`@layer quantic-header-visibility {
         .header { display: none; }
-        .header.collapsible { display: revert-layer; }
+        @media (max-width: 1023px) { .has-sidebar .header { display: revert-layer; } }
       }`),
             whenSlotPresent('navbar', css `
         @layer quantic-header-visibility {
@@ -151,11 +171,11 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
             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;
           }
+          .wrapper.hydrated:not(.is-aside-expanded) {
+            grid-template-columns: var(--quantic-component-layout-aside-width-collapsed) 1fr;
+          }
           .aside {
             grid-area: aside;
             position: sticky;
@@ -165,12 +185,12 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
             opacity: 1;
             pointer-events: auto;
           }
-          .is-aside-expanded.wrapper .aside,
-          .is-aside-expanded.wrapper .logo {
+          .wrapper .aside,
+          .wrapper .logo {
             width: var(--quantic-component-layout-aside-width);
           }
-          .wrapper:not(.is-aside-expanded) .aside,
-          .wrapper:not(.is-aside-expanded) .logo {
+          .wrapper.hydrated:not(.is-aside-expanded) .aside,
+          .wrapper.hydrated:not(.is-aside-expanded) .logo {
             width: var(--quantic-component-layout-aside-width-collapsed);
             padding-inline: 0;
           }
@@ -180,14 +200,8 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
       `),
         ];
     }
-    get isAsideCollapsible() {
-        return this.isSmallViewport && this.hasSidebar;
-    }
     get hasSidebar() {
-        return this.hasSidebarSlot;
-    }
-    get hasTitlebar() {
-        return this.hasTitlebarSlot;
+        return this.hasSidebarSlot || this.ssrHasSidebar;
     }
     render() {
         const toggleButton = html `<quantic-button
@@ -210,28 +224,35 @@ let Layout = class Layout extends AutoHideEmptySlotsMixin(QuanticElement, ['logo
       name="titlebar"
       @slotchange=${onSlotChange((has) => (this.hasTitlebarSlot = has))}
     ></slot> `;
-        return html `
-      <div
-        class=${classMap({
+        // `hydrated` gates collapsed-width CSS so it only applies after the
+        // browser has determined the viewport and set the initial aside state.
+        // Uses a wrapper class (not :host attribute) because whenSlotPresent()
+        // wraps rules in :host(:has(...)) / @scope — nesting :host([attr])
+        // inside those wrappers produces invalid CSS selectors. Tied to
+        // _asideStateInitialized (set in updated()) so the class change
+        // produces a real diff after DSD hydration.
+        const wrapperClasses = {
             wrapper: true,
+            hydrated: this._asideStateInitialized,
             'has-sidebar': this.hasSidebar,
             'is-aside-expanded': this.isAsideExpanded,
             [`variant--${this.variant}`]: true,
-        })}
+        };
+        return html `
+      <div
+        class=${classMap(wrapperClasses)}
         @expanded-changed=${this.handleAsideExpand}
       >
-        <header class=${classMap({ header: true, collapsible: this.isAsideCollapsible })}>
+        <header class="header">
           ${!this.hasSidebar ? logo : null}
-          ${this.isAsideCollapsible ? toggleButton : null}
-          ${this.isSmallViewport ? null : titlebar}
+          ${toggleButton}
+          ${titlebar}
           <slot
             class="navbar"
             name="navbar"
           ></slot>
         </header>
 
-        ${this.isSmallViewport && this.hasTitlebar ? titlebar : null}
-
         <slot
           name="toolbar"
           class="toolbar"
@@ -337,6 +358,13 @@ Layout.styles = css `
 
     .toggle-button {
       flex-shrink: 0;
+      display: none;
+    }
+
+    @media (max-width: 1023px) {
+      .has-sidebar .toggle-button {
+        display: revert-layer;
+      }
     }
 
     .header {
@@ -443,12 +471,12 @@ Layout.styles = css `
           'aside main';
         grid-template-rows: auto auto 1fr;
         grid-template-columns:
-          var(--quantic-component-layout-aside-width-collapsed)
+          var(--quantic-component-layout-aside-width)
           1fr;
       }
 
-      .is-aside-expanded.wrapper.has-sidebar {
-        grid-template-columns: var(--quantic-component-layout-aside-width) 1fr;
+      .wrapper.hydrated.has-sidebar:not(.is-aside-expanded) {
+        grid-template-columns: var(--quantic-component-layout-aside-width-collapsed) 1fr;
       }
 
       .header {
@@ -483,8 +511,8 @@ Layout.styles = css `
         display: none;
       }
 
-      .has-sidebar:not(.is-aside-expanded) .aside,
-      .has-sidebar:not(.is-aside-expanded) .logo {
+      .has-sidebar.hydrated:not(.is-aside-expanded) .aside,
+      .has-sidebar.hydrated:not(.is-aside-expanded) .logo {
         width: var(--quantic-component-layout-aside-width-collapsed);
         padding-inline: 0;
       }
@@ -536,6 +564,9 @@ __decorate([
 __decorate([
     respond(Breakpoint.below(1024))
 ], Layout.prototype, "isSmallViewport", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'ssr-has-sidebar' })
+], Layout.prototype, "ssrHasSidebar", void 0);
 __decorate([
     state()
 ], Layout.prototype, "hasSidebarSlot", void 0);

package/dist/layout/navbar-menu-item.component.d.ts

@@ -8,3 +8,8 @@ export declare class NavbarMenuItem extends QuanticElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-navbar-menu-item': NavbarMenuItem;
+    }
+}

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

@@ -6,3 +6,8 @@ export declare class Navbar extends QuanticElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-navbar': Navbar;
+    }
+}

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

@@ -8,3 +8,8 @@ export declare class Page extends QuanticElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-page': Page;
+    }
+}

package/dist/layout/page.component.js

@@ -33,31 +33,34 @@ Page.meta = {
 Page.styles = css `
     :host {
       --quantic-component-page-padding: var(--quantic-spacing-4);
+      --quantic-component-page-padding-block-end: var(--quantic-spacing-10);
       --quantic-component-page-max-width: 80rem;
       --quantic-component-page-contained-padding-inline: calc(2 * var(--quantic-component-page-padding));
       display: block;
       width: 100%;
-      height: 100%;
-      min-height: 0;
     }
 
     :host([fill]) {
+      height: 100%;
+      min-height: 0;
       overflow: hidden;
     }
 
     :host([bleeds]) {
       --quantic-component-page-padding: 0;
+      --quantic-component-page-padding-block-end: 0;
     }
 
     .main {
       width: 100%;
-      height: 100%;
-      min-height: 0;
       box-sizing: border-box;
       padding: var(--quantic-component-page-padding);
+      padding-block-end: var(--quantic-component-page-padding-block-end);
     }
 
     :host([fill]) .main {
+      height: 100%;
+      min-height: 0;
       overflow: hidden;
     }
 

package/dist/layout/sidebar-menu-item-group.component.d.ts

@@ -7,3 +7,8 @@ export declare class SidebarMenuItemGroup extends QuanticElement {
     static styles: import("lit").CSSResult;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-sidebar-menu-item-group': SidebarMenuItemGroup;
+    }
+}

package/dist/layout/sidebar-menu-item.component.d.ts

@@ -13,3 +13,8 @@ export declare class SidebarMenuItem extends QuanticElement {
     private hasIcon;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-sidebar-menu-item': SidebarMenuItem;
+    }
+}

package/dist/layout/sidebar-menu-item.component.js

@@ -191,7 +191,7 @@ __decorate([
     consume({ context: asideExpandedContext, subscribe: true })
 ], SidebarMenuItem.prototype, "isAsideExpanded", void 0);
 __decorate([
-    respond(Breakpoint.above(1024))
+    respond(Breakpoint.above(1024), true)
 ], SidebarMenuItem.prototype, "isDesktopViewport", void 0);
 __decorate([
     prop({ type: 'boolean', default: 'false', reflect: true, description: 'Highlights the item as the currently active route.' })

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

@@ -8,7 +8,13 @@ export declare class Sidebar extends Sidebar_base {
     collapsible: boolean;
     private isDesktopViewport;
     static styles: import("lit").CSSResult;
+    connectedCallback(): void;
     private handleToggle;
     render(): import("lit").TemplateResult;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-sidebar': Sidebar;
+    }
+}
 export {};

package/dist/layout/sidebar.component.js

@@ -36,6 +36,18 @@ let Sidebar = class Sidebar extends AutoHideEmptySlotsMixin(QuanticElement, [
             }));
         };
     }
+    connectedCallback() {
+        super.connectedCallback();
+        // @astrojs/lit stamps defer-hydration on all nested Lit components in SSR
+        // output but only removes it from island root elements. Slotted children of
+        // this sidebar are never unblocked by astro-island, so their connectedCallback
+        // is permanently suppressed and they never receive context. Remove it here so
+        // they hydrate immediately after the sidebar connects (by which point
+        // quantic-layout is already providing context).
+        for (const child of this.querySelectorAll('[defer-hydration]')) {
+            child.removeAttribute('defer-hydration');
+        }
+    }
     render() {
         return html `
       <nav
@@ -65,15 +77,16 @@ let Sidebar = class Sidebar extends AutoHideEmptySlotsMixin(QuanticElement, [
                     label=${this.isAsideExpanded ? 'Collapse' : 'Expand sidebar'}
                     variant=${SidebarMenuItemVariant.Secondary}
                   >
-                    ${this.isAsideExpanded
-                ? html `<quantic-icon-lucide-panel-left-close
-                          slot="icon"
-                          size="sm"
-                        ></quantic-icon-lucide-panel-left-close>`
-                : html `<quantic-icon-lucide-panel-left
-                          slot="icon"
-                          size="sm"
-                        ></quantic-icon-lucide-panel-left>`}
+                    <quantic-icon-lucide-panel-left-close
+                      slot="icon"
+                      size="sm"
+                      ?hidden=${!this.isAsideExpanded}
+                    ></quantic-icon-lucide-panel-left-close>
+                    <quantic-icon-lucide-panel-left
+                      slot="icon"
+                      size="sm"
+                      ?hidden=${this.isAsideExpanded}
+                    ></quantic-icon-lucide-panel-left>
                   </quantic-sidebar-menu-item>
                 </div>`
             : null}
@@ -202,11 +215,12 @@ __decorate([
         type: 'boolean',
         default: 'false',
         attribute: 'collapsible',
+        reflect: true,
         description: 'When true, shows a toggle button at the bottom of the sidebar on desktop viewports.',
     })
 ], Sidebar.prototype, "collapsible", void 0);
 __decorate([
-    respond(Breakpoint.above(1024))
+    respond(Breakpoint.above(1024), true)
 ], Sidebar.prototype, "isDesktopViewport", void 0);
 Sidebar = __decorate([
     quanticElement('quantic-sidebar')