@ctrliq/quantic-components 1.67.2 → 1.67.3

package/dist/quantic-components.min.js

@@ -37027,7 +37027,7 @@ const io="important",no=" !"+io,oo=Fe(class extends Re{constructor(e){if(super(e
       flex-shrink: 0;
       display: flex;
     }
-  `,t([Ie({type:"boolean",default:"false",reflect:!0,description:"Highlights the item as the currently active route."})],e.NavbarMenuItem.prototype,"selected",void 0),t([Ie({type:"string",default:"",description:"URL to navigate to. When set the element renders as an <a> tag."})],e.NavbarMenuItem.prototype,"href",void 0),t([Ie({type:"string",default:"",attribute:"aria-label",description:"Accessible label for the nav item (required for icon-only items)."})],e.NavbarMenuItem.prototype,"ariaLabel",void 0),e.NavbarMenuItem=t([be("quantic-navbar-menu-item")],e.NavbarMenuItem);class Po{constructor(e,t){this.host=e,this.matchesValue=!1,this.handleChange=e=>{this.matchesValue=e.matches,this.host.requestUpdate()},"undefined"!=typeof window&&window.matchMedia&&(this.mediaQuery=window.matchMedia(t),this.matchesValue=this.mediaQuery.matches),this.host.addController(this)}hostConnected(){this.mediaQuery?.addEventListener("change",this.handleChange)}hostDisconnected(){this.mediaQuery?.removeEventListener("change",this.handleChange)}get matches(){return!!this.mediaQuery&&this.matchesValue}}class jo{static below(e){return`(max-width: ${e-1}px)`}static above(e){return`(min-width: ${e}px)`}static between(e,t){return`(min-width: ${e}px) and (max-width: ${t-1}px)`}}function zo(e){return function(t,i){const n=Symbol(i);Object.defineProperty(t,i,{get(){return this[n]||(this[n]=new Po(this,e)),this[n].matches},enumerable:!0,configurable:!0})}}const Ho="aside.expanded";e.Button.ensureDefined(),e.LucideIconMenu.ensureDefined(),e.Layout=class extends(Me(Ce,["logo","titlebar","toolbar","navbar","sidebar"])){constructor(){super(...arguments),this.variant=Ao.Default,this.hasSidebarSlot=!1,this.hasTitlebarSlot=!1,this.hasNavbarSlot=!1,this.hasLogoSlot=!1,this._isAsideExpanded=!0,this.handleAsideExpand=e=>{this.isAsideExpanded=e.detail.expanded},this.handleKeydown=e=>{"Escape"===e.key&&this.isAsideExpanded&&(this.isAsideExpanded=!1)}}get isAsideExpanded(){return this._isAsideExpanded}set isAsideExpanded(e){const t=this._isAsideExpanded;this._isAsideExpanded=e,t!==e&&(this.requestUpdate("isAsideExpanded",t),e?this.activateFocusTrap():this.deactivateFocusTrap())}toggleAsideExpanded(){this.isAsideExpanded=!this.isAsideExpanded}async activateFocusTrap(){if(this.isSmallViewport&&this.asideElement){await this.updateComplete;try{this.focusTrap=Jn(this.asideElement,{escapeDeactivates:!1,clickOutsideDeactivates:!1,allowOutsideClick:!0,initialFocus:!1,returnFocusOnDeactivate:!0,setReturnFocus:()=>this.toggleButtonElement||document.body,tabbableOptions:{getShadowRoot:!0}}),this.focusTrap.activate()}catch(e){console.error("Failed to activate focus trap:",e),this.focusTrap=null}}}deactivateFocusTrap(){if(this.focusTrap)try{this.focusTrap.deactivate()}catch(e){console.error("Failed to deactivate focus trap:",e)}finally{this.focusTrap=null}}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeydown),this.deactivateFocusTrap()}willUpdate(e){void 0===this.previousIsSmallViewport&&(this._isAsideExpanded=!this.isSmallViewport,this.previousIsSmallViewport=this.isSmallViewport)}updated(e){super.updated(e),this.previousIsSmallViewport!==this.isSmallViewport&&(this.isAsideExpanded=!this.isSmallViewport),this.previousIsSmallViewport=this.isSmallViewport}get isAsideCollapsible(){return this.isSmallViewport&&this.hasSidebar}get hasSidebar(){return this.hasSidebarSlot}get hasTitlebar(){return this.hasTitlebarSlot}get hasHeader(){return this.isAsideCollapsible||this.hasTitlebarSlot||this.hasNavbarSlot||this.hasLogoSlot}render(){const e=je`<quantic-button
+  `,t([Ie({type:"boolean",default:"false",reflect:!0,description:"Highlights the item as the currently active route."})],e.NavbarMenuItem.prototype,"selected",void 0),t([Ie({type:"string",default:"",description:"URL to navigate to. When set the element renders as an <a> tag."})],e.NavbarMenuItem.prototype,"href",void 0),t([Ie({type:"string",default:"",attribute:"aria-label",description:"Accessible label for the nav item (required for icon-only items)."})],e.NavbarMenuItem.prototype,"ariaLabel",void 0),e.NavbarMenuItem=t([be("quantic-navbar-menu-item")],e.NavbarMenuItem);class Po{constructor(e,t){this.host=e,this.matchesValue=!1,this.handleChange=e=>{this.matchesValue=e.matches,this.host.requestUpdate()},"undefined"!=typeof window&&window.matchMedia&&(this.mediaQuery=window.matchMedia(t),this.matchesValue=this.mediaQuery.matches),this.host.addController(this)}hostConnected(){this.mediaQuery?.addEventListener("change",this.handleChange)}hostDisconnected(){this.mediaQuery?.removeEventListener("change",this.handleChange)}get matches(){return!!this.mediaQuery&&this.matchesValue}}class jo{static below(e){return`(max-width: ${e-1}px)`}static above(e){return`(min-width: ${e}px)`}static between(e,t){return`(min-width: ${e}px) and (max-width: ${t-1}px)`}}function zo(e){return function(t,i){const n=Symbol(i);Object.defineProperty(t,i,{get(){return this[n]||(this[n]=new Po(this,e)),this[n].matches},enumerable:!0,configurable:!0})}}const Ho="aside.expanded";e.Button.ensureDefined(),e.LucideIconMenu.ensureDefined(),e.Layout=class extends(Me(Ce,["logo","titlebar","toolbar","navbar","sidebar"])){constructor(){super(...arguments),this.variant=Ao.Default,this.hasSidebarSlot=!1,this.hasTitlebarSlot=!1,this._isAsideExpanded=!0,this.handleAsideExpand=e=>{this.isAsideExpanded=e.detail.expanded},this.handleKeydown=e=>{"Escape"===e.key&&this.isAsideExpanded&&(this.isAsideExpanded=!1)}}get isAsideExpanded(){return this._isAsideExpanded}set isAsideExpanded(e){const t=this._isAsideExpanded;this._isAsideExpanded=e,t!==e&&(this.requestUpdate("isAsideExpanded",t),e?this.activateFocusTrap():this.deactivateFocusTrap())}toggleAsideExpanded(){this.isAsideExpanded=!this.isAsideExpanded}async activateFocusTrap(){if(this.isSmallViewport&&this.asideElement){await this.updateComplete;try{this.focusTrap=Jn(this.asideElement,{escapeDeactivates:!1,clickOutsideDeactivates:!1,allowOutsideClick:!0,initialFocus:!1,returnFocusOnDeactivate:!0,setReturnFocus:()=>this.toggleButtonElement||document.body,tabbableOptions:{getShadowRoot:!0}}),this.focusTrap.activate()}catch(e){console.error("Failed to activate focus trap:",e),this.focusTrap=null}}}deactivateFocusTrap(){if(this.focusTrap)try{this.focusTrap.deactivate()}catch(e){console.error("Failed to deactivate focus trap:",e)}finally{this.focusTrap=null}}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.handleKeydown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.handleKeydown),this.deactivateFocusTrap()}willUpdate(e){void 0===this.previousIsSmallViewport&&(this._isAsideExpanded=!this.isSmallViewport,this.previousIsSmallViewport=this.isSmallViewport)}updated(e){super.updated(e),this.previousIsSmallViewport!==this.isSmallViewport&&(this.isAsideExpanded=!this.isSmallViewport),this.previousIsSmallViewport=this.isSmallViewport}static finalizeStyles(e){return[...super.finalizeStyles(e)??[],r('@layer quantic-header-visibility {\n        .header { display: none; }\n        .header.collapsible,\n        :host(:has([slot="navbar"])) .header,\n        :host(:has([slot="titlebar"])) .header,\n        :host(:has([slot="logo"])) .header { display: revert-layer; }\n        @scope {\n          :scope:has([slot="navbar"]) .header,\n          :scope:has([slot="titlebar"]) .header,\n          :scope:has([slot="logo"]) .header { display: revert-layer; }\n        }\n      }')]}get isAsideCollapsible(){return this.isSmallViewport&&this.hasSidebar}get hasSidebar(){return this.hasSidebarSlot}get hasTitlebar(){return this.hasTitlebarSlot}render(){const e=je`<quantic-button
       class="toggle-button"
       variant="outline"
       size="sm"
@@ -37040,7 +37040,6 @@ const io="important",no=" !"+io,oo=Fe(class extends Re{constructor(e){if(super(e
     </quantic-button>`,t=je`<slot
       name="logo"
       class="logo"
-      @slotchange=${nn(e=>this.hasLogoSlot=e)}
     ></slot>`,i=je`<slot
       class="titlebar"
       name="titlebar"
@@ -37050,14 +37049,13 @@ const io="important",no=" !"+io,oo=Fe(class extends Re{constructor(e){if(super(e
         class=${Oe({wrapper:!0,"has-sidebar":this.hasSidebar,"is-aside-expanded":this.isAsideExpanded,[`variant--${this.variant}`]:!0})}
         @expanded-changed=${this.handleAsideExpand}
       >
-        <header class="header" ?hidden=${!this.hasHeader}>
+        <header class=${Oe({header:!0,collapsible:this.isAsideCollapsible})}>
           ${this.hasSidebar?null:t}
           ${this.isAsideCollapsible?e:null}
           ${this.isSmallViewport?null:i}
           <slot
             class="navbar"
             name="navbar"
-            @slotchange=${nn(e=>this.hasNavbarSlot=e)}
           ></slot>
         </header>
 
@@ -37070,7 +37068,6 @@ const io="important",no=" !"+io,oo=Fe(class extends Re{constructor(e){if(super(e
 
         <div
           class="aside-backdrop"
-          ?hidden=${!this.hasSidebar}
           aria-hidden="true"
           @click=${this.toggleAsideExpanded}
         ></div>
@@ -37237,7 +37234,7 @@ const io="important",no=" !"+io,oo=Fe(class extends Re{constructor(e){if(super(e
       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);
@@ -37262,8 +37259,6 @@ const io="important",no=" !"+io,oo=Fe(class extends Re{constructor(e){if(super(e
 
       .header {
         grid-area: header;
-        display: flex;
-        align-items: center;
       }
 
       .logo {
@@ -37290,7 +37285,7 @@ const io="important",no=" !"+io,oo=Fe(class extends Re{constructor(e){if(super(e
         pointer-events: auto;
       }
 
-      .is-aside-expanded .aside-backdrop {
+      .has-sidebar.is-aside-expanded .aside-backdrop {
         display: none;
       }
 
@@ -37334,7 +37329,7 @@ const io="important",no=" !"+io,oo=Fe(class extends Re{constructor(e){if(super(e
       min-width: var(--quantic-spacing-80);
       max-width: var(--quantic-spacing-160);
     }
-  `,t([Ie({type:"LayoutVariant",options:Object.values(Ao),default:Ao.Default,reflect:!0,description:'Layout mode. "default" uses full-bleed content; "focused" centres content with a max-width cap.'})],e.Layout.prototype,"variant",void 0),t([zo(jo.below(1024))],e.Layout.prototype,"isSmallViewport",void 0),t([we()],e.Layout.prototype,"hasSidebarSlot",void 0),t([we()],e.Layout.prototype,"hasTitlebarSlot",void 0),t([we()],e.Layout.prototype,"hasNavbarSlot",void 0),t([we()],e.Layout.prototype,"hasLogoSlot",void 0),t([ke(".aside")],e.Layout.prototype,"asideElement",void 0),t([ke(".toggle-button")],e.Layout.prototype,"toggleButtonElement",void 0),t([Qi({context:Ho})],e.Layout.prototype,"_isAsideExpanded",void 0),e.Layout=t([be("quantic-layout")],e.Layout),e.LayoutLogo=class extends Ce{render(){return!0===this.expanded?G`<slot name="expanded"></slot>`:G`<slot name="collapsed"></slot>`}},e.LayoutLogo.meta={tag:"quantic-layout-logo",description:"Logo area that lives inside the quantic-layout header or sidebar. Automatically switches between expanded and collapsed slots based on the sidebar state consumed from context.",category:"layout",slots:{expanded:{description:"Logo shown when the sidebar is expanded (full wordmark)."},collapsed:{description:"Logo shown when the sidebar is collapsed (icon only)."}}},e.LayoutLogo.styles=l`
+  `,t([Ie({type:"LayoutVariant",options:Object.values(Ao),default:Ao.Default,reflect:!0,description:'Layout mode. "default" uses full-bleed content; "focused" centres content with a max-width cap.'})],e.Layout.prototype,"variant",void 0),t([zo(jo.below(1024))],e.Layout.prototype,"isSmallViewport",void 0),t([we()],e.Layout.prototype,"hasSidebarSlot",void 0),t([we()],e.Layout.prototype,"hasTitlebarSlot",void 0),t([ke(".aside")],e.Layout.prototype,"asideElement",void 0),t([ke(".toggle-button")],e.Layout.prototype,"toggleButtonElement",void 0),t([Qi({context:Ho})],e.Layout.prototype,"_isAsideExpanded",void 0),e.Layout=t([be("quantic-layout")],e.Layout),e.LayoutLogo=class extends Ce{render(){return!0===this.expanded?G`<slot name="expanded"></slot>`:G`<slot name="collapsed"></slot>`}},e.LayoutLogo.meta={tag:"quantic-layout-logo",description:"Logo area that lives inside the quantic-layout header or sidebar. Automatically switches between expanded and collapsed slots based on the sidebar state consumed from context.",category:"layout",slots:{expanded:{description:"Logo shown when the sidebar is expanded (full wordmark)."},collapsed:{description:"Logo shown when the sidebar is collapsed (icon only)."}}},e.LayoutLogo.styles=l`
     :host {
       display: contents;
     }