@mhmo91/schmancy 0.9.4 → 0.9.6

package/dist/navigation-rail.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-BCfY8kxB.cjs`);const e=require(`./tailwind.mixin-BF1Huas7.cjs`),t=require(`./litElement.mixin-3llHwB-8.cjs`);require(`./mixins.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/when.js`);var s=class extends t.t(){constructor(...e){super(...e),this.hovering$=new n.BehaviorSubject(!1),this.pressing$=new n.BehaviorSubject(!1),this.active$=new n.BehaviorSubject(!1),this.icon=``,this.label=``,this.value=``,this.badge=``,this.badgeVariant=`error`,this.showLabel=!1,this.disabled=!1,this.nested=!1,this.group=!1,this.showRipple=!1}get active(){return this.active$.value}set active(e){this.active$.next(e)}get selected(){return this.active}set selected(e){this.active=e}connectedCallback(){super.connectedCallback(),(0,n.merge)((0,n.fromEvent)(this,`mouseenter`).pipe((0,r.tap)(()=>this.hovering$.next(!0))),(0,n.fromEvent)(this,`mouseleave`).pipe((0,r.tap)(()=>this.hovering$.next(!1)))).pipe((0,n.takeUntil)(this.disconnecting)).subscribe(),(0,n.merge)((0,n.fromEvent)(this,`mousedown`).pipe((0,r.tap)(()=>this.pressing$.next(!0))),(0,n.fromEvent)(this,`mouseup`).pipe((0,r.tap)(()=>this.pressing$.next(!1))),(0,n.fromEvent)(this,`mouseleave`).pipe((0,r.tap)(()=>this.pressing$.next(!1)))).pipe((0,n.takeUntil)(this.disconnecting)).subscribe(),this.pressing$.pipe((0,r.tap)(e=>{e&&!this.disabled&&(this.showRipple=!0)}),(0,r.delay)(600),(0,r.tap)(()=>this.showRipple=!1),(0,n.takeUntil)(this.disconnecting)).subscribe(),this.active$.pipe((0,r.distinctUntilChanged)(),(0,r.tap)(e=>{this.requestUpdate(),this.setAttribute(`aria-selected`,String(e)),this.setAttribute(`tabindex`,e?`0`:`-1`)}),(0,n.takeUntil)(this.disconnecting)).subscribe(),this.setAttribute(`role`,`listitem`),this.hasAttribute(`tabindex`)||this.setAttribute(`tabindex`,this.active?`0`:`-1`)}updated(e){super.updated(e),e.has(`disabled`)&&this.setAttribute(`aria-disabled`,String(this.disabled)),e.has(`label`)&&this.setAttribute(`aria-label`,this.label)}handleClick(e){if(this.disabled)return e.preventDefault(),void e.stopPropagation();this.dispatchEvent(new CustomEvent(`navigate`,{detail:this.value||this.label,bubbles:!0,composed:!0}))}handleKeyDown(e){this.disabled||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),this.click())}render(){let e=!!this.querySelector(`[slot="icon"]`),t=this.querySelector(`[slot="badge"]`),n=this.classMap({"flex flex-col items-center justify-center":!0,"min-h-14 w-full":!0,"py-3":!0,"gap-1":!0,"rounded-lg":!0,"cursor-pointer":!0,relative:!0,"select-none":!0,"box-border":!0,"text-surface-onVariant":!this.active,"text-secondary-onContainer":this.active,"hover:bg-surface-containerHighest":!0,"transition-all duration-150 ease-out":!0,"pointer-events-none opacity-38":this.disabled,"[&>.ripple]:scale-100":this.showRipple,"min-h-12 pl-8":this.nested,"mb-2 after:absolute after:bottom-[-4px] after:left-3 after:right-3 after:h-px after:bg-outline-variant after:opacity-12":this.group}),r=this.classMap({"flex items-center justify-center":!0,"w-auto min-w-14 h-8":!0,"shrink-0 relative z-10":!0}),i=this.classMap({"absolute top-1/2 left-1/2 opacity-30":!0,"w-14 h-8":!0,"rounded-lg":!0,"bg-secondary-container":!0,"transition-transform duration-150 ease-out":!0,"scale-0 -translate-x-1/2 -translate-y-1/2":!this.active,"scale-100 -translate-x-1/2 -translate-y-1/2":this.active}),s=this.classMap({"relative z-100":!0,"text-2xl leading-none":!this.nested,"text-xl leading-none":this.nested}),c=this.classMap({"text-xs font-medium leading-4":!0,"text-center":!0,"overflow-hidden text-ellipsis whitespace-nowrap":!0,"z-10 max-w-14 px-1":!0,hidden:!this.showLabel&&!this.label}),l=this.classMap({"absolute top-2 right-3":!0,"min-w-4 h-4":!0,"rounded-sm":!0,"text-xs font-semibold":!0,"flex items-center justify-center":!0,"px-1 box-border z-20":!0,"animate-pulse":!0,"bg-error-default text-error-on":this.badgeVariant===`error`,"bg-primary-default text-primary-on":this.badgeVariant===`primary`,"bg-secondary-default text-secondary-on":this.badgeVariant===`secondary`}),u=this.classMap({"absolute inset-0 rounded-lg overflow-hidden z-0":!0,'before:content-[""] before:absolute before:top-1/2 before:left-1/2':!0,"before:w-0 before:h-0 before:rounded-full":!0,"before:bg-current before:opacity-0":!0,"before:-translate-x-1/2 before:-translate-y-1/2":!0,"before:transition-all before:duration-300":!0,"before:w-[200%] before:h-[200%] before:opacity-12":this.showRipple});return a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-BCfY8kxB.cjs`);const e=require(`./decorate-F9CuyeHg.cjs`),t=require(`./litElement.mixin-Bj2q1yPw.cjs`);require(`./mixins.cjs`);let n=require(`rxjs`),r=require(`rxjs/operators`),i=require(`lit/decorators.js`),a=require(`lit`),o=require(`lit/directives/when.js`);var s=class extends t.t(){constructor(...e){super(...e),this.hovering$=new n.BehaviorSubject(!1),this.pressing$=new n.BehaviorSubject(!1),this.active$=new n.BehaviorSubject(!1),this.icon=``,this.label=``,this.value=``,this.badge=``,this.badgeVariant=`error`,this.showLabel=!1,this.disabled=!1,this.nested=!1,this.group=!1,this.showRipple=!1}get active(){return this.active$.value}set active(e){this.active$.next(e)}get selected(){return this.active}set selected(e){this.active=e}connectedCallback(){super.connectedCallback(),(0,n.merge)((0,n.fromEvent)(this,`mouseenter`).pipe((0,r.tap)(()=>this.hovering$.next(!0))),(0,n.fromEvent)(this,`mouseleave`).pipe((0,r.tap)(()=>this.hovering$.next(!1)))).pipe((0,n.takeUntil)(this.disconnecting)).subscribe(),(0,n.merge)((0,n.fromEvent)(this,`mousedown`).pipe((0,r.tap)(()=>this.pressing$.next(!0))),(0,n.fromEvent)(this,`mouseup`).pipe((0,r.tap)(()=>this.pressing$.next(!1))),(0,n.fromEvent)(this,`mouseleave`).pipe((0,r.tap)(()=>this.pressing$.next(!1)))).pipe((0,n.takeUntil)(this.disconnecting)).subscribe(),this.pressing$.pipe((0,r.tap)(e=>{e&&!this.disabled&&(this.showRipple=!0)}),(0,r.delay)(600),(0,r.tap)(()=>this.showRipple=!1),(0,n.takeUntil)(this.disconnecting)).subscribe(),this.active$.pipe((0,r.distinctUntilChanged)(),(0,r.tap)(e=>{this.requestUpdate(),this.setAttribute(`aria-selected`,String(e)),this.setAttribute(`tabindex`,e?`0`:`-1`)}),(0,n.takeUntil)(this.disconnecting)).subscribe(),this.setAttribute(`role`,`listitem`),this.hasAttribute(`tabindex`)||this.setAttribute(`tabindex`,this.active?`0`:`-1`)}updated(e){super.updated(e),e.has(`disabled`)&&this.setAttribute(`aria-disabled`,String(this.disabled)),e.has(`label`)&&this.setAttribute(`aria-label`,this.label)}handleClick(e){if(this.disabled)return e.preventDefault(),void e.stopPropagation();this.dispatchEvent(new CustomEvent(`navigate`,{detail:this.value||this.label,bubbles:!0,composed:!0}))}handleKeyDown(e){this.disabled||e.key!==`Enter`&&e.key!==` `||(e.preventDefault(),this.click())}render(){let e=!!this.querySelector(`[slot="icon"]`),t=this.querySelector(`[slot="badge"]`),n=this.classMap({"flex flex-col items-center justify-center":!0,"min-h-14 w-full":!0,"py-3":!0,"gap-1":!0,"rounded-lg":!0,"cursor-pointer":!0,relative:!0,"select-none":!0,"box-border":!0,"text-surface-onVariant":!this.active,"text-secondary-onContainer":this.active,"hover:bg-surface-containerHighest":!0,"transition-all duration-150 ease-out":!0,"pointer-events-none opacity-38":this.disabled,"[&>.ripple]:scale-100":this.showRipple,"min-h-12 pl-8":this.nested,"mb-2 after:absolute after:bottom-[-4px] after:left-3 after:right-3 after:h-px after:bg-outline-variant after:opacity-12":this.group}),r=this.classMap({"flex items-center justify-center":!0,"w-auto min-w-14 h-8":!0,"shrink-0 relative z-10":!0}),i=this.classMap({"absolute top-1/2 left-1/2 opacity-30":!0,"w-14 h-8":!0,"rounded-lg":!0,"bg-secondary-container":!0,"transition-transform duration-150 ease-out":!0,"scale-0 -translate-x-1/2 -translate-y-1/2":!this.active,"scale-100 -translate-x-1/2 -translate-y-1/2":this.active}),s=this.classMap({"relative z-100":!0,"text-2xl leading-none":!this.nested,"text-xl leading-none":this.nested}),c=this.classMap({"text-xs font-medium leading-4":!0,"text-center":!0,"overflow-hidden text-ellipsis whitespace-nowrap":!0,"z-10 max-w-14 px-1":!0,hidden:!this.showLabel&&!this.label}),l=this.classMap({"absolute top-2 right-3":!0,"min-w-4 h-4":!0,"rounded-sm":!0,"text-xs font-semibold":!0,"flex items-center justify-center":!0,"px-1 box-border z-20":!0,"animate-pulse":!0,"bg-error-default text-error-on":this.badgeVariant===`error`,"bg-primary-default text-primary-on":this.badgeVariant===`primary`,"bg-secondary-default text-secondary-on":this.badgeVariant===`secondary`}),u=this.classMap({"absolute inset-0 rounded-lg overflow-hidden z-0":!0,'before:content-[""] before:absolute before:top-1/2 before:left-1/2':!0,"before:w-0 before:h-0 before:rounded-full":!0,"before:bg-current before:opacity-0":!0,"before:-translate-x-1/2 before:-translate-y-1/2":!0,"before:transition-all before:duration-300":!0,"before:w-[200%] before:h-[200%] before:opacity-12":this.showRipple});return a.html`
 			<div
 				class=${n}
 				part="container"
@@ -46,7 +46,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 						</div>
 					`)}
 			</div>
-		`}};e.i([(0,i.property)({type:String})],s.prototype,`icon`,void 0),e.i([(0,i.property)({type:String})],s.prototype,`label`,void 0),e.i([(0,i.property)({type:String})],s.prototype,`value`,void 0),e.i([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`active`,null),e.i([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`selected`,null),e.i([(0,i.property)({type:String})],s.prototype,`badge`,void 0),e.i([(0,i.property)({type:String})],s.prototype,`badgeVariant`,void 0),e.i([(0,i.property)({type:Boolean,attribute:`show-label`})],s.prototype,`showLabel`,void 0),e.i([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`disabled`,void 0),e.i([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`nested`,void 0),e.i([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`group`,void 0),e.i([(0,i.state)()],s.prototype,`showRipple`,void 0),s=e.i([(0,i.customElement)(`schmancy-navigation-rail-item`)],s);var c=class extends t.t(){constructor(...e){super(...e),this.activeIndex$=new n.BehaviorSubject(-1),this._activeValue=``,this.labelVisibility=`all`,this.alignment=`top`,this.showTooltips=!0,this.keyboardNavigation=!0,this.expanded=!1,this.focusedIndex=-1,this.hasHeaderContent=!1,this.isFullscreen=!1}get activeIndex(){return this.activeIndex$.value}set activeIndex(e){this.activeIndex$.next(e)}get activeValue(){return this._activeValue}set activeValue(e){this._activeValue=e,this.updateActiveByValue(e)}get navigationItems(){return this.allElements.filter(e=>e.tagName===`SCHMANCY-NAVIGATION-RAIL-ITEM`)}connectedCallback(){super.connectedCallback(),this.keyboardNavigation&&this.addEventListener(`keydown`,this.handleKeyDown),this.activeIndex$.pipe((0,r.distinctUntilChanged)(),(0,r.tap)(e=>this.updateActiveStates(e)),(0,n.takeUntil)(this.disconnecting)).subscribe(),(0,n.fromEvent)(window,`fullscreen`).pipe((0,r.tap)(e=>{let t=e;this.isFullscreen=t.detail}),(0,n.takeUntil)(this.disconnecting)).subscribe(),this.setupNavigateListener(),this.updateLabelVisibility(),this.setAttribute(`role`,`navigation`),this.setAttribute(`aria-label`,`Main navigation`)}updated(e){super.updated(e),e.has(`labelVisibility`)&&this.updateLabelVisibility(),e.has(`activeValue`)&&this.updateActiveByValue(this.activeValue),e.has(`expanded`)&&this.updateLabelVisibility()}updateActiveStates(e){this.navigationItems.forEach((t,n)=>{let r=n===e;t.active=r,t.setAttribute(`aria-selected`,String(r)),t.setAttribute(`tabindex`,r?`0`:`-1`),r&&(this._activeValue=t.value||t.label||``)})}updateActiveByValue(e){let t=this.navigationItems.findIndex(t=>t.getAttribute(`value`)===e||t.label===e);t>=0&&(this.activeIndex=t)}updateLabelVisibility(){this.navigationItems.forEach((e,t)=>{let n=!1;n=!!this.expanded||this.labelVisibility===`all`||this.labelVisibility===`selected`&&t===this.activeIndex,e.showLabel=n,this.showTooltips&&!n&&!this.expanded&&e.label?e.setAttribute(`title`,e.label):e.removeAttribute(`title`)})}expand(){this.expanded=!0}collapse(){this.expanded=!1}addBoatItem(e){let t=this.querySelector(`[value="${e.id}"]`);if(t)return t;let n=document.createElement(`schmancy-navigation-rail-item`);n.setAttribute(`value`,e.id),n.innerHTML=`\n\t\t\t<schmancy-icon slot="icon">${e.icon||`widgets`}</schmancy-icon>\n\t\t\t${e.title}\n\t\t`;let r=this.querySelector(`[slot="footer"]`);return r?this.insertBefore(n,r):this.appendChild(n),n}toggle(){this.expanded=!this.expanded}handleKeyDown(e){let t=this.navigationItems;if(t.length===0)return;let n=this.focusedIndex>=0?this.focusedIndex:this.activeIndex;switch(e.key){case`ArrowDown`:e.preventDefault(),n=(n+1)%t.length;break;case`ArrowUp`:e.preventDefault(),n=n<=0?t.length-1:n-1;break;case`Home`:e.preventDefault(),n=0;break;case`End`:e.preventDefault(),n=t.length-1;break;case`Enter`:case` `:e.preventDefault(),n>=0&&t[n].click();return;default:return}this.focusedIndex=n,t[n].focus()}handleFabClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(`fab-click`,{bubbles:!0,composed:!0}))}handleMenuClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(`menu-click`,{bubbles:!0,composed:!0}))}render(){let e=this.classMap({"flex flex-col":!0,"h-full":!0,"box-border relative overflow-visible":!0,"z-10 hover:z-[100]":!0,"w-20":!this.isFullscreen,"w-0":this.isFullscreen,"transition-all duration-300 ease-emphasized":!0,"opacity-100":!this.isFullscreen,"opacity-0 pointer-events-none":this.isFullscreen,"overflow-hidden":this.isFullscreen}),t=this.classMap({"flex flex-col h-full":!0,"box-border relative":!0,"py-2":!0,"bg-container-lowest text-surface-on":!0,"transition-all duration-300 ease-emphasized":!0,"w-20":!this.expanded,"px-3":!this.expanded,"w-60":this.expanded,"px-4":this.expanded,"shadow-lg":this.expanded}),n=this.classMap({"flex flex-col items-center gap-1":!0,hidden:!this.hasHeaderContent}),r=this.classMap({"flex-1 flex flex-col gap-3":!0,"min-h-0":!0,"justify-start":this.alignment===`top`,"justify-center":this.alignment===`center`,"justify-end":this.alignment===`bottom`}),i=this.classMap({"flex flex-col items-center gap-1 mt-auto pt-2":!0});return a.html`
+		`}};e.t([(0,i.property)({type:String})],s.prototype,`icon`,void 0),e.t([(0,i.property)({type:String})],s.prototype,`label`,void 0),e.t([(0,i.property)({type:String})],s.prototype,`value`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`active`,null),e.t([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`selected`,null),e.t([(0,i.property)({type:String})],s.prototype,`badge`,void 0),e.t([(0,i.property)({type:String})],s.prototype,`badgeVariant`,void 0),e.t([(0,i.property)({type:Boolean,attribute:`show-label`})],s.prototype,`showLabel`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`disabled`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`nested`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],s.prototype,`group`,void 0),e.t([(0,i.state)()],s.prototype,`showRipple`,void 0),s=e.t([(0,i.customElement)(`schmancy-navigation-rail-item`)],s);var c=class extends t.t(){constructor(...e){super(...e),this.activeIndex$=new n.BehaviorSubject(-1),this._activeValue=``,this.labelVisibility=`all`,this.alignment=`top`,this.showTooltips=!0,this.keyboardNavigation=!0,this.expanded=!1,this.focusedIndex=-1,this.hasHeaderContent=!1,this.isFullscreen=!1}get activeIndex(){return this.activeIndex$.value}set activeIndex(e){this.activeIndex$.next(e)}get activeValue(){return this._activeValue}set activeValue(e){this._activeValue=e,this.updateActiveByValue(e)}get navigationItems(){return this.allElements.filter(e=>e.tagName===`SCHMANCY-NAVIGATION-RAIL-ITEM`)}connectedCallback(){super.connectedCallback(),this.keyboardNavigation&&this.addEventListener(`keydown`,this.handleKeyDown),this.activeIndex$.pipe((0,r.distinctUntilChanged)(),(0,r.tap)(e=>this.updateActiveStates(e)),(0,n.takeUntil)(this.disconnecting)).subscribe(),(0,n.fromEvent)(window,`fullscreen`).pipe((0,r.tap)(e=>{let t=e;this.isFullscreen=t.detail}),(0,n.takeUntil)(this.disconnecting)).subscribe(),this.setupNavigateListener(),this.updateLabelVisibility(),this.setAttribute(`role`,`navigation`),this.setAttribute(`aria-label`,`Main navigation`)}updated(e){super.updated(e),e.has(`labelVisibility`)&&this.updateLabelVisibility(),e.has(`activeValue`)&&this.updateActiveByValue(this.activeValue),e.has(`expanded`)&&this.updateLabelVisibility()}updateActiveStates(e){this.navigationItems.forEach((t,n)=>{let r=n===e;t.active=r,t.setAttribute(`aria-selected`,String(r)),t.setAttribute(`tabindex`,r?`0`:`-1`),r&&(this._activeValue=t.value||t.label||``)})}updateActiveByValue(e){let t=this.navigationItems.findIndex(t=>t.getAttribute(`value`)===e||t.label===e);t>=0&&(this.activeIndex=t)}updateLabelVisibility(){this.navigationItems.forEach((e,t)=>{let n=!1;n=!!this.expanded||this.labelVisibility===`all`||this.labelVisibility===`selected`&&t===this.activeIndex,e.showLabel=n,this.showTooltips&&!n&&!this.expanded&&e.label?e.setAttribute(`title`,e.label):e.removeAttribute(`title`)})}expand(){this.expanded=!0}collapse(){this.expanded=!1}addBoatItem(e){let t=this.querySelector(`[value="${e.id}"]`);if(t)return t;let n=document.createElement(`schmancy-navigation-rail-item`);n.setAttribute(`value`,e.id),n.innerHTML=`\n\t\t\t<schmancy-icon slot="icon">${e.icon||`widgets`}</schmancy-icon>\n\t\t\t${e.title}\n\t\t`;let r=this.querySelector(`[slot="footer"]`);return r?this.insertBefore(n,r):this.appendChild(n),n}toggle(){this.expanded=!this.expanded}handleKeyDown(e){let t=this.navigationItems;if(t.length===0)return;let n=this.focusedIndex>=0?this.focusedIndex:this.activeIndex;switch(e.key){case`ArrowDown`:e.preventDefault(),n=(n+1)%t.length;break;case`ArrowUp`:e.preventDefault(),n=n<=0?t.length-1:n-1;break;case`Home`:e.preventDefault(),n=0;break;case`End`:e.preventDefault(),n=t.length-1;break;case`Enter`:case` `:e.preventDefault(),n>=0&&t[n].click();return;default:return}this.focusedIndex=n,t[n].focus()}handleFabClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(`fab-click`,{bubbles:!0,composed:!0}))}handleMenuClick(e){e.stopPropagation(),this.dispatchEvent(new CustomEvent(`menu-click`,{bubbles:!0,composed:!0}))}render(){let e=this.classMap({"flex flex-col":!0,"h-full":!0,"box-border relative overflow-visible":!0,"z-10 hover:z-[100]":!0,"w-20":!this.isFullscreen,"w-0":this.isFullscreen,"transition-all duration-300 ease-emphasized":!0,"opacity-100":!this.isFullscreen,"opacity-0 pointer-events-none":this.isFullscreen,"overflow-hidden":this.isFullscreen}),t=this.classMap({"flex flex-col h-full":!0,"box-border relative":!0,"py-2":!0,"bg-container-lowest text-surface-on":!0,"transition-all duration-300 ease-emphasized":!0,"w-20":!this.expanded,"px-3":!this.expanded,"w-60":this.expanded,"px-4":this.expanded,"shadow-lg":this.expanded}),n=this.classMap({"flex flex-col items-center gap-1":!0,hidden:!this.hasHeaderContent}),r=this.classMap({"flex-1 flex flex-col gap-3":!0,"min-h-0":!0,"justify-start":this.alignment===`top`,"justify-center":this.alignment===`center`,"justify-end":this.alignment===`bottom`}),i=this.classMap({"flex flex-col items-center gap-1 mt-auto pt-2":!0});return a.html`
 			<div
 				class=${e}
 			>
@@ -68,4 +68,4 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 					</div>
 				</div>
 			</div>
-		`}setupNavigateListener(){this.addEventListener(`navigate`,e=>{if(e instanceof CustomEvent){let t=e.detail,n=this.navigationItems.findIndex(e=>e.value===t||e.label===t);n>=0&&(this.activeIndex=n,this._activeValue=t)}})}handleHeaderSlotChange(){let e=this.shadowRoot?.querySelector(`[part="header"]`);if(e){let t=e.querySelectorAll(`slot`);this.hasHeaderContent=Array.from(t).some(e=>e.assignedNodes({flatten:!0}).length>0)}}handleSlotChange(){this.updateLabelVisibility(),this.updateActiveStates(this.activeIndex),this.navigationItems.forEach((e,t)=>{e.setAttribute(`role`,`listitem`),e.hasAttribute(`tabindex`)||e.setAttribute(`tabindex`,t===this.activeIndex?`0`:`-1`)})}};e.i([(0,i.property)({type:Number})],c.prototype,`activeIndex`,null),e.i([(0,i.property)({type:String})],c.prototype,`activeValue`,null),e.i([(0,i.property)({type:String,attribute:`label-visibility`,reflect:!0})],c.prototype,`labelVisibility`,void 0),e.i([(0,i.property)({type:String,reflect:!0})],c.prototype,`alignment`,void 0),e.i([(0,i.property)({type:Boolean})],c.prototype,`showTooltips`,void 0),e.i([(0,i.property)({type:Boolean})],c.prototype,`keyboardNavigation`,void 0),e.i([(0,i.property)({type:Boolean,reflect:!0})],c.prototype,`expanded`,void 0),e.i([(0,i.state)()],c.prototype,`focusedIndex`,void 0),e.i([(0,i.state)()],c.prototype,`hasHeaderContent`,void 0),e.i([(0,i.state)()],c.prototype,`isFullscreen`,void 0),e.i([(0,i.queryAssignedElements)({flatten:!0})],c.prototype,`allElements`,void 0),c=e.i([(0,i.customElement)(`schmancy-navigation-rail`)],c),Object.defineProperty(exports,`SchmancyNavigationRail`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`SchmancyNavigationRailItem`,{enumerable:!0,get:function(){return s}});
+		`}setupNavigateListener(){this.addEventListener(`navigate`,e=>{if(e instanceof CustomEvent){let t=e.detail,n=this.navigationItems.findIndex(e=>e.value===t||e.label===t);n>=0&&(this.activeIndex=n,this._activeValue=t)}})}handleHeaderSlotChange(){let e=this.shadowRoot?.querySelector(`[part="header"]`);if(e){let t=e.querySelectorAll(`slot`);this.hasHeaderContent=Array.from(t).some(e=>e.assignedNodes({flatten:!0}).length>0)}}handleSlotChange(){this.updateLabelVisibility(),this.updateActiveStates(this.activeIndex),this.navigationItems.forEach((e,t)=>{e.setAttribute(`role`,`listitem`),e.hasAttribute(`tabindex`)||e.setAttribute(`tabindex`,t===this.activeIndex?`0`:`-1`)})}};e.t([(0,i.property)({type:Number})],c.prototype,`activeIndex`,null),e.t([(0,i.property)({type:String})],c.prototype,`activeValue`,null),e.t([(0,i.property)({type:String,attribute:`label-visibility`,reflect:!0})],c.prototype,`labelVisibility`,void 0),e.t([(0,i.property)({type:String,reflect:!0})],c.prototype,`alignment`,void 0),e.t([(0,i.property)({type:Boolean})],c.prototype,`showTooltips`,void 0),e.t([(0,i.property)({type:Boolean})],c.prototype,`keyboardNavigation`,void 0),e.t([(0,i.property)({type:Boolean,reflect:!0})],c.prototype,`expanded`,void 0),e.t([(0,i.state)()],c.prototype,`focusedIndex`,void 0),e.t([(0,i.state)()],c.prototype,`hasHeaderContent`,void 0),e.t([(0,i.state)()],c.prototype,`isFullscreen`,void 0),e.t([(0,i.queryAssignedElements)({flatten:!0})],c.prototype,`allElements`,void 0),c=e.t([(0,i.customElement)(`schmancy-navigation-rail`)],c),Object.defineProperty(exports,`SchmancyNavigationRail`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`SchmancyNavigationRailItem`,{enumerable:!0,get:function(){return s}});

package/dist/navigation-rail.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-rail.cjs","names":[],"sources":["../src/navigation-rail/navigation-rail-item.ts","../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { BehaviorSubject, fromEvent, merge, takeUntil } from 'rxjs'\nimport { delay, distinctUntilChanged, tap } from 'rxjs/operators'\n\nexport type NavigationRailItemClickEvent = CustomEvent<{\n\ticon: string\n\tlabel: string\n\tvalue: string\n\tactive: boolean\n}>\n\n/**\n * Material Design 3 Navigation Rail Item Component\n * @see https://m3.material.io/components/navigation-rail/overview\n *\n * `<schmancy-navigation-rail-item>` component\n *\n * Individual navigation item for use within a navigation rail.\n * Represents a single destination or action with an icon and optional label.\n *\n * @element schmancy-navigation-rail-item\n * @slot icon - Slot for the navigation item icon (e.g., schmancy-icon)\n * @slot - Default slot for custom content\n * @slot badge - Custom badge content\n *\n * @fires navigate - When the item is clicked\n *\n * @csspart container - The main item container\n * @csspart indicator - The active indicator\n * @csspart icon - The icon container\n * @csspart label - The label text\n * @csspart badge - The badge element\n *\n * @example\n * <schmancy-navigation-rail-item\n *   icon=\"home\"\n *   label=\"Home\"\n *   value=\"/home\"\n *   badge=\"3\"\n *   active>\n * </schmancy-navigation-rail-item>\n *\n * @example\n * <!-- Using 'selected' alias -->\n * <schmancy-navigation-rail-item\n *   icon=\"settings\"\n *   label=\"Settings\"\n *   value=\"/settings\"\n *   selected>\n * </schmancy-navigation-rail-item>\n *\n * @example\n * <!-- With custom icon -->\n * <schmancy-navigation-rail-item label=\"Dashboard\">\n *   <schmancy-icon slot=\"icon\">dashboard</schmancy-icon>\n * </schmancy-navigation-rail-item>\n */\n@customElement('schmancy-navigation-rail-item')\nexport class SchmancyNavigationRailItem extends $LitElement() {\n\t// Observable state\n\tprivate hovering$ = new BehaviorSubject<boolean>(false)\n\tprivate pressing$ = new BehaviorSubject<boolean>(false)\n\tprivate active$ = new BehaviorSubject<boolean>(false)\n\n\t// Properties\n\t/**\n\t * Icon name (Material Symbols icon)\n\t */\n\t@property({ type: String })\n\ticon = ''\n\n\t/**\n\t * Label text for the navigation item\n\t */\n\t@property({ type: String })\n\tlabel = ''\n\n\t/**\n\t * Value associated with this item (useful for routing)\n\t */\n\t@property({ type: String })\n\tvalue = ''\n\n\t/**\n\t * Whether this item is currently active/selected\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tget active() {\n\t\treturn this.active$.value\n\t}\n\tset active(value: boolean) {\n\t\tthis.active$.next(value)\n\t}\n\n\t/**\n\t * Whether this item is currently selected (alias for active)\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tget selected() {\n\t\treturn this.active\n\t}\n\tset selected(value: boolean) {\n\t\tthis.active = value\n\t}\n\n\t/**\n\t * Badge text or number to display\n\t */\n\t@property({ type: String })\n\tbadge = ''\n\n\t/**\n\t * Badge variant\n\t */\n\t@property({ type: String })\n\tbadgeVariant: 'error' | 'primary' | 'secondary' = 'error'\n\n\t/**\n\t * Whether to show the label (controlled by parent rail)\n\t * @default false\n\t */\n\t@property({ type: Boolean, attribute: 'show-label' })\n\tshowLabel = false\n\n\t/**\n\t * Whether this item is disabled\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false\n\n\t/**\n\t * Whether this is a nested item (sub-navigation)\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tnested = false\n\n\t/**\n\t * Whether this item represents a group separator\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tgroup = false\n\n\t// State\n\t@state()\n\tprivate showRipple = false\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Set up hover tracking\n\t\tmerge(\n\t\t\tfromEvent(this, 'mouseenter').pipe(tap(() => this.hovering$.next(true))),\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.hovering$.next(false))),\n\t\t)\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe()\n\n\t\t// Set up press tracking\n\t\tmerge(\n\t\t\tfromEvent(this, 'mousedown').pipe(tap(() => this.pressing$.next(true))),\n\t\t\tfromEvent(this, 'mouseup').pipe(tap(() => this.pressing$.next(false))),\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.pressing$.next(false))),\n\t\t)\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe()\n\n\t\t// Ripple effect with M3 timing\n\t\tthis.pressing$\n\t\t\t.pipe(\n\t\t\t\ttap(pressing => {\n\t\t\t\t\tif (pressing && !this.disabled) {\n\t\t\t\t\t\tthis.showRipple = true\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\t// M3 standard ripple duration\n\t\t\t\tdelay(600),\n\t\t\t\ttap(() => (this.showRipple = false)),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Subscribe to active state changes for reactive updates\n\t\tthis.active$\n\t\t\t.pipe(\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(isActive => {\n\t\t\t\t\tthis.requestUpdate()\n\t\t\t\t\t// Update ARIA attributes reactively\n\t\t\t\t\tthis.setAttribute('aria-selected', String(isActive))\n\t\t\t\t\tthis.setAttribute('tabindex', isActive ? '0' : '-1')\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Set ARIA attributes\n\t\tthis.setAttribute('role', 'listitem')\n\t\tif (!this.hasAttribute('tabindex')) {\n\t\t\tthis.setAttribute('tabindex', this.active ? '0' : '-1')\n\t\t}\n\t}\n\n\tupdated(changedProperties: PropertyValues) {\n\t\tsuper.updated(changedProperties)\n\n\t\t// Active state is now handled by the BehaviorSubject subscription\n\t\t// So we don't need to duplicate it here\n\n\t\tif (changedProperties.has('disabled')) {\n\t\t\tthis.setAttribute('aria-disabled', String(this.disabled))\n\t\t}\n\n\t\tif (changedProperties.has('label')) {\n\t\t\tthis.setAttribute('aria-label', this.label)\n\t\t}\n\t}\n\n\t/**\n\t * Handle click events\n\t */\n\tprivate handleClick(event: Event) {\n\t\tif (this.disabled) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\treturn\n\t\t}\n\n\t\t// Emit navigate event with the value\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('navigate', {\n\t\t\t\tdetail: this.value || this.label,\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t\t// Visual feedback is handled by the ripple effect in connectedCallback\n\t\t// The parent rail will confirm and update via activeIndex\n\t}\n\n\t/**\n\t * Handle keyboard events\n\t */\n\tprivate handleKeyDown(event: KeyboardEvent) {\n\t\tif (this.disabled) return\n\n\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\tevent.preventDefault()\n\t\t\tthis.click()\n\t\t}\n\t}\n\n\tprotected render() {\n\t\tconst hasCustomIcon = !!this.querySelector('[slot=\"icon\"]')\n\t\tconst hasCustomBadge = this.querySelector('[slot=\"badge\"]')\n\n\t\t// M3 Navigation Rail Item classes with theme integration\n\t\tconst containerClasses = this.classMap({\n\t\t\t// Layout & Spacing (M3 56px height, 12px vertical padding)\n\t\t\t'flex flex-col items-center justify-center': true,\n\t\t\t'min-h-14 w-full': true, // min-h-14 = 56px\n\t\t\t'py-3': true, // py-3 = 12px top/bottom\n\t\t\t'gap-1': true, // gap-1 = 4px\n\n\t\t\t// M3 Shape & Interaction\n\t\t\t'rounded-lg': true, // M3 large corner radius\n\t\t\t'cursor-pointer': true,\n\t\t\trelative: true,\n\t\t\t'select-none': true,\n\t\t\t'box-border': true,\n\n\t\t\t// Colors & States\n\t\t\t'text-surface-onVariant': !this.active,\n\t\t\t'text-secondary-onContainer': this.active,\n\t\t\t'hover:bg-surface-containerHighest': true,\n\n\t\t\t// Transitions (M3 emphasized motion)\n\t\t\t'transition-all duration-150 ease-out': true,\n\n\t\t\t// Disabled state\n\t\t\t'pointer-events-none opacity-38': this.disabled,\n\n\t\t\t// Active ripple effect\n\t\t\t'[&>.ripple]:scale-100': this.showRipple,\n\n\t\t\t// Nested item adjustments\n\t\t\t'min-h-12 pl-8': this.nested, // 48px height, 32px left padding for nested\n\n\t\t\t// Group separator\n\t\t\t'mb-2 after:absolute after:bottom-[-4px] after:left-3 after:right-3 after:h-px after:bg-outline-variant after:opacity-12':\n\t\t\t\tthis.group,\n\t\t})\n\n\t\t// Icon container with active indicator\n\t\tconst iconContainerClasses = this.classMap({\n\t\t\t'flex items-center justify-center': true,\n\t\t\t'w-auto min-w-14 h-8': true, // 56px min-width, 32px height\n\t\t\t'shrink-0 relative z-10': true,\n\t\t})\n\n\t\t// Active indicator behind icon\n\t\tconst indicatorClasses = this.classMap({\n\t\t\t'absolute top-1/2 left-1/2 opacity-30': true,\n\t\t\t'w-14 h-8': true, // 56px x 32px\n\t\t\t'rounded-lg': true, // M3 large corner radius\n\t\t\t'bg-secondary-container': true,\n\t\t\t'transition-transform duration-150 ease-out': true,\n\t\t\t// Transform based on active state\n\t\t\t'scale-0 -translate-x-1/2 -translate-y-1/2': !this.active,\n\t\t\t'scale-100 -translate-x-1/2 -translate-y-1/2': this.active,\n\t\t})\n\n\t\t// Icon styling\n\t\tconst iconClasses = this.classMap({\n\t\t\t'relative z-100': true,\n\t\t\t'text-2xl leading-none': !this.nested, // 24px icon for normal\n\t\t\t'text-xl leading-none': this.nested, // 20px icon for nested\n\t\t\t// Material Symbols font variations handled via CSS custom properties\n\t\t})\n\n\t\t// Label styling\n\t\tconst labelClasses = this.classMap({\n\t\t\t'text-xs font-medium leading-4': true, // 12px, medium weight, 16px line height\n\t\t\t'text-center': true,\n\t\t\t'overflow-hidden text-ellipsis whitespace-nowrap': true,\n\t\t\t'z-10 max-w-14 px-1': true, // max 56px width, 4px horizontal padding\n\t\t\thidden: !this.showLabel && !this.label, // Hide if not shown or no label\n\t\t})\n\n\t\t// Badge styling with dynamic colors\n\t\tconst badgeClasses = this.classMap({\n\t\t\t'absolute top-2 right-3': true, // 8px from top, 12px from right\n\t\t\t'min-w-4 h-4': true, // 16px min-width and height\n\t\t\t'rounded-sm': true, // M3 small corner radius\n\t\t\t'text-xs font-semibold': true, // 11px, 600 weight\n\t\t\t'flex items-center justify-center': true,\n\t\t\t'px-1 box-border z-20': true, // 4px padding\n\t\t\t'animate-pulse': true, // Pulse animation\n\t\t\t// Dynamic background based on variant\n\t\t\t'bg-error-default text-error-on': this.badgeVariant === 'error',\n\t\t\t'bg-primary-default text-primary-on': this.badgeVariant === 'primary',\n\t\t\t'bg-secondary-default text-secondary-on': this.badgeVariant === 'secondary',\n\t\t})\n\n\t\t// Ripple effect classes\n\t\tconst rippleClasses = this.classMap({\n\t\t\t'absolute inset-0 rounded-lg overflow-hidden z-0': true,\n\t\t\t'before:content-[\"\"] before:absolute before:top-1/2 before:left-1/2': true,\n\t\t\t'before:w-0 before:h-0 before:rounded-full': true,\n\t\t\t'before:bg-current before:opacity-0': true,\n\t\t\t'before:-translate-x-1/2 before:-translate-y-1/2': true,\n\t\t\t'before:transition-all before:duration-300': true,\n\t\t\t// Active state\n\t\t\t'before:w-[200%] before:h-[200%] before:opacity-12': this.showRipple,\n\t\t})\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${containerClasses}\n\t\t\t\tpart=\"container\"\n\t\t\t\t@click=${this.handleClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\tstyle=\"outline: ${this.matches(':focus-visible')\n\t\t\t\t\t? '2px solid var(--schmancy-sys-color-primary-default)'\n\t\t\t\t\t: 'none'}; outline-offset: 2px;\"\n\t\t\t>\n\t\t\t\t<span class=${rippleClasses} aria-hidden=\"true\"></span>\n\n\t\t\t\t<div class=${iconContainerClasses} part=\"icon\">\n\t\t\t\t\t<span class=${indicatorClasses} part=\"indicator\" aria-hidden=\"true\"></span>\n\t\t\t\t\t${when(\n\t\t\t\t\t\thasCustomIcon,\n\t\t\t\t\t\t() => html`<slot class=\"relative\" name=\"icon\"></slot>`,\n\t\t\t\t\t\t() =>\n\t\t\t\t\t\t\twhen(\n\t\t\t\t\t\t\t\tthis.icon,\n\t\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=${iconClasses}\n\t\t\t\t\t\t\t\t\t\tpart=\"icon-text\"\n\t\t\t\t\t\t\t\t\t\tstyle=\"font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' ${this.active\n\t\t\t\t\t\t\t\t\t\t\t? '1'\n\t\t\t\t\t\t\t\t\t\t\t: '0'}, 'wght' 400, 'GRAD' 0, 'opsz' ${this.nested ? '20' : '24'};\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t),\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t${when(this.label, () => html`<span class=${labelClasses} part=\"label\">${this.label}</span>`)}\n\t\t\t\t${when(\n\t\t\t\t\tthis.badge,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t${when(\n\t\t\t\t\t\t\thasCustomBadge,\n\t\t\t\t\t\t\t() => html`<slot name=\"badge\"></slot>`,\n\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t<span class=${badgeClasses} part=\"badge\" aria-label=\"${this.badge} notifications\"> ${this.badge} </span>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t`,\n\t\t\t\t)}\n\n\t\t\t\t<!-- Tooltip shown via title attribute -->\n\t\t\t\t${when(\n\t\t\t\t\tthis.hasAttribute('title'),\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"\n\t\t\t\t\t\t\tabsolute left-[calc(100%+8px)] top-1/2 -translate-y-1/2\n\t\t\t\t\t\t\tbg-surface-inverse text-surface-inverseOn\n\t\t\t\t\t\t\tpx-2 py-1 rounded-sm text-xs whitespace-nowrap\n\t\t\t\t\t\t\tz-1000 pointer-events-none opacity-0\n\t\t\t\t\t\t\thover:opacity-100 hover:translate-x-0\n\t\t\t\t\t\t\ttransition-all duration-150 ease-out\n\t\t\t\t\t\t\t-translate-x-1\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${this.getAttribute('title')}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-navigation-rail-item': SchmancyNavigationRailItem\n\t}\n}\n","import { $LitElement } from '@mixins/index'\r\nimport { html, PropertyValues } from 'lit'\r\nimport { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'\r\nimport { BehaviorSubject, fromEvent, takeUntil } from 'rxjs'\r\nimport { distinctUntilChanged, tap } from 'rxjs/operators'\r\nimport { SchmancyNavigationRailItem } from './navigation-rail-item'\r\n\r\nexport type NavigateEvent = CustomEvent<string>\r\n\r\nexport type NavigationRailMenuClickEvent = CustomEvent<void>\r\n\r\nexport type NavigationRailFabClickEvent = CustomEvent<void>\r\n\r\n\r\nexport type LabelVisibility = 'all' | 'selected' | 'none'\r\n\r\n/**\r\n * Material Design 3 Navigation Rail Component\r\n * @see https://m3.material.io/components/navigation-rail/overview\r\n *\r\n * `<schmancy-navigation-rail>` component\r\n *\r\n * A Material Design 3 vertical navigation component positioned on the left side of an application.\r\n * Navigation rails provide access to between 3-7 primary destinations with a compact footprint.\r\n * Automatically hides in fullscreen mode when triggered via schmancyTheme.next({ fullscreen: true }).\r\n *\r\n * @element schmancy-navigation-rail\r\n * @slot fab - Slot for a floating action button at the top\r\n * @slot menu - Slot for a menu icon or button below the FAB\r\n * @slot header - Custom header content slot\r\n * @slot footer - Custom footer content slot\r\n * @slot - Default slot for navigation rail items\r\n *\r\n * @fires navigate - When a navigation item is selected\r\n * @fires menu-click - When the menu button is clicked\r\n * @fires fab-click - When the FAB is clicked\r\n *\r\n * @csspart rail - The main rail container\r\n * @csspart header - The header section\r\n * @csspart nav - The navigation items container\r\n * @csspart footer - The footer section\r\n *\r\n * @example\r\n * <schmancy-navigation-rail activeIndex=\"0\">\r\n *   <schmancy-button slot=\"fab\" variant=\"filled\" aria-label=\"Compose\">\r\n *     <schmancy-icon>add</schmancy-icon>\r\n *   </schmancy-button>\r\n *   <schmancy-button slot=\"menu\" variant=\"text\" aria-label=\"Menu\">\r\n *     <schmancy-icon>menu</schmancy-icon>\r\n *   </schmancy-button>\r\n *   <schmancy-navigation-rail-item icon=\"home\" label=\"Home\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"search\" label=\"Search\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"favorite\" label=\"Favorites\" badge=\"3\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"settings\" label=\"Settings\"></schmancy-navigation-rail-item>\r\n * </schmancy-navigation-rail>\r\n */\r\n@customElement('schmancy-navigation-rail')\r\nexport class SchmancyNavigationRail extends $LitElement() {\r\n\t// Observable state\r\n\tprivate activeIndex$ = new BehaviorSubject<number>(-1)\r\n\r\n\t// Properties\r\n\t/**\r\n\t * The currently active item index\r\n\t * @default -1\r\n\t */\r\n\t@property({ type: Number })\r\n\tget activeIndex() {\r\n\t\treturn this.activeIndex$.value\r\n\t}\r\n\tset activeIndex(value: number) {\r\n\t\tthis.activeIndex$.next(value)\r\n\t}\r\n\r\n\t/**\r\n\t * The currently active item value (for programmatic selection)\r\n\t */\r\n\t@property({ type: String })\r\n\tget activeValue() {\r\n\t\treturn this._activeValue\r\n\t}\r\n\tset activeValue(value: string) {\r\n\t\tthis._activeValue = value\r\n\t\tthis.updateActiveByValue(value)\r\n\t}\r\n\tprivate _activeValue = ''\r\n\r\n\t/**\r\n\t * When to show labels for navigation items\r\n\t * 'all' - Always show labels for all items\r\n\t * 'selected' - Only show label for selected item\r\n\t * 'none' - Never show labels\r\n\t * @default 'all'\r\n\t */\r\n\t@property({ type: String, attribute: 'label-visibility', reflect: true })\r\n\tlabelVisibility: LabelVisibility = 'all'\r\n\r\n\t/**\r\n\t * Alignment of navigation items\r\n\t * @default 'top'\r\n\t */\r\n\t@property({ type: String, reflect: true })\r\n\talignment: 'top' | 'center' | 'bottom' = 'top'\r\n\r\n\t/**\r\n\t * Show tooltips when labels are hidden\r\n\t * @default true\r\n\t */\r\n\t@property({ type: Boolean })\r\n\tshowTooltips = true\r\n\r\n\t/**\r\n\t * Enable keyboard navigation\r\n\t * @default true\r\n\t */\r\n\t@property({ type: Boolean })\r\n\tkeyboardNavigation = true\r\n\r\n\t/**\r\n\t * Whether the navigation rail is expanded\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\texpanded = false\r\n\r\n\r\n\t// State\r\n\t@state()\r\n\tprivate focusedIndex = -1\r\n\r\n\t@state()\r\n\tprivate hasHeaderContent = false\r\n\r\n\t@state()\r\n\tprivate isFullscreen = false\r\n\r\n\t// Queries\r\n\r\n\t@queryAssignedElements({ flatten: true })\r\n\tprivate allElements!: Element[]\r\n\r\n\tprivate get navigationItems(): SchmancyNavigationRailItem[] {\r\n\t\treturn this.allElements.filter(el => el.tagName === 'SCHMANCY-NAVIGATION-RAIL-ITEM') as SchmancyNavigationRailItem[]\r\n\t}\r\n\r\n\tconnectedCallback() {\r\n\t\tsuper.connectedCallback()\r\n\r\n\t\t// Set up keyboard navigation if enabled\r\n\t\tif (this.keyboardNavigation) {\r\n\t\t\tthis.addEventListener('keydown', this.handleKeyDown)\r\n\t\t}\r\n\r\n\t\t// Subscribe to active index changes with distinct values only\r\n\t\tthis.activeIndex$\r\n\t\t\t.pipe(\r\n\t\t\t\tdistinctUntilChanged(),\r\n\t\t\t\ttap(index => this.updateActiveStates(index)),\r\n\t\t\t\ttakeUntil(this.disconnecting),\r\n\t\t\t)\r\n\t\t\t.subscribe()\r\n\r\n\t\t// Listen to fullscreen events\r\n\t\tfromEvent(window, 'fullscreen').pipe(\r\n\t\t\ttap((event: Event) => {\r\n\t\t\t\tconst customEvent = event as CustomEvent\r\n\t\t\t\tthis.isFullscreen = customEvent.detail\r\n\t\t\t}),\r\n\t\t\ttakeUntil(this.disconnecting)\r\n\t\t).subscribe()\r\n\r\n\t\t// Listen for navigate events from child items\r\n\t\tthis.setupNavigateListener()\r\n\r\n\t\t// Set up label visibility\r\n\t\tthis.updateLabelVisibility()\r\n\r\n\t\t// Update ARIA attributes\r\n\t\tthis.setAttribute('role', 'navigation')\r\n\t\tthis.setAttribute('aria-label', 'Main navigation')\r\n\t}\r\n\r\n\tupdated(changedProperties: PropertyValues) {\r\n\t\tsuper.updated(changedProperties)\r\n\r\n\t\tif (changedProperties.has('labelVisibility')) {\r\n\t\t\tthis.updateLabelVisibility()\r\n\t\t}\r\n\r\n\t\tif (changedProperties.has('activeValue')) {\r\n\t\t\tthis.updateActiveByValue(this.activeValue)\r\n\t\t}\r\n\r\n\t\tif (changedProperties.has('expanded')) {\r\n\t\t\tthis.updateLabelVisibility()\r\n\t\t}\r\n\t}\r\n\r\n\tprivate updateActiveStates(index: number) {\r\n\t\tthis.navigationItems.forEach((item, i) => {\r\n\t\t\tconst isActive = i === index\r\n\t\t\titem.active = isActive\r\n\t\t\titem.setAttribute('aria-selected', String(isActive))\r\n\t\t\titem.setAttribute('tabindex', isActive ? '0' : '-1')\r\n\r\n\t\t\t// Update activeValue when index changes\r\n\t\t\tif (isActive) {\r\n\t\t\t\tthis._activeValue = item.value || item.label || ''\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\tprivate updateActiveByValue(value: string) {\r\n\t\tconst index = this.navigationItems.findIndex(item => item.getAttribute('value') === value || item.label === value)\r\n\t\tif (index >= 0) {\r\n\t\t\tthis.activeIndex = index\r\n\t\t}\r\n\t}\r\n\r\n\tprivate updateLabelVisibility() {\r\n\t\tthis.navigationItems.forEach((item, i) => {\r\n\t\t\tlet shouldShowLabel = false\r\n\r\n\t\t\t// M3 Spec: In expanded state, always show all labels\r\n\t\t\tif (this.expanded) {\r\n\t\t\t\tshouldShowLabel = true\r\n\t\t\t} else {\r\n\t\t\t\t// In collapsed state, respect labelVisibility setting\r\n\t\t\t\tshouldShowLabel =\r\n\t\t\t\t\tthis.labelVisibility === 'all' || (this.labelVisibility === 'selected' && i === this.activeIndex)\r\n\t\t\t}\r\n\r\n\t\t\titem.showLabel = shouldShowLabel\r\n\r\n\t\t\t// Add tooltips when labels are hidden (only in collapsed state)\r\n\t\t\tif (this.showTooltips && !shouldShowLabel && !this.expanded && item.label) {\r\n\t\t\t\titem.setAttribute('title', item.label)\r\n\t\t\t} else {\r\n\t\t\t\titem.removeAttribute('title')\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\t// Note: Hover-based label showing removed for M3 compliance\r\n\t// Labels are now controlled via labelVisibility property and expanded state\r\n\r\n\t/**\r\n\t * Programmatically expand the navigation rail\r\n\t */\r\n\texpand() {\r\n\t\tthis.expanded = true\r\n\t}\r\n\r\n\t/**\r\n\t * Programmatically collapse the navigation rail\r\n\t */\r\n\tcollapse() {\r\n\t\tthis.expanded = false\r\n\t}\r\n\r\n\t/**\r\n\t * Add a boat item to the navigation rail\r\n\t * @param config Configuration for the boat item\r\n\t * @returns The created or existing navigation rail item element\r\n\t */\r\n\tpublic addBoatItem(config: { id: string; title: string; icon?: string }) {\r\n\t\t// Check if item already exists\r\n\t\tconst existingItem = this.querySelector(`[value=\"${config.id}\"]`) as HTMLElement\r\n\t\tif (existingItem) {\r\n\t\t\t// Item already exists, just return it\r\n\t\t\treturn existingItem\r\n\t\t}\r\n\r\n\t\t// Create new item\r\n\t\tconst item = document.createElement('schmancy-navigation-rail-item')\r\n\t\titem.setAttribute('value', config.id)\r\n\t\titem.innerHTML = `\r\n\t\t\t<schmancy-icon slot=\"icon\">${config.icon || 'widgets'}</schmancy-icon>\r\n\t\t\t${config.title}\r\n\t\t`\r\n\t\t// Add to the rail before any footer content\r\n\t\tconst footer = this.querySelector('[slot=\"footer\"]')\r\n\t\tif (footer) {\r\n\t\t\tthis.insertBefore(item, footer)\r\n\t\t} else {\r\n\t\t\tthis.appendChild(item)\r\n\t\t}\r\n\t\treturn item\r\n\t}\r\n\r\n\t/**\r\n\t * Toggle the navigation rail between expanded and collapsed states\r\n\t */\r\n\ttoggle() {\r\n\t\tthis.expanded = !this.expanded\r\n\t}\r\n\r\n\r\n\tprivate handleKeyDown(event: KeyboardEvent) {\r\n\t\tconst items = this.navigationItems\r\n\t\tif (items.length === 0) return\r\n\r\n\t\tlet newIndex = this.focusedIndex >= 0 ? this.focusedIndex : this.activeIndex\r\n\r\n\t\tswitch (event.key) {\r\n\t\t\tcase 'ArrowDown':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = (newIndex + 1) % items.length\r\n\t\t\t\tbreak\r\n\t\t\tcase 'ArrowUp':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = newIndex <= 0 ? items.length - 1 : newIndex - 1\r\n\t\t\t\tbreak\r\n\t\t\tcase 'Home':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = 0\r\n\t\t\t\tbreak\r\n\t\t\tcase 'End':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = items.length - 1\r\n\t\t\t\tbreak\r\n\t\t\tcase 'Enter':\r\n\t\t\tcase ' ':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tif (newIndex >= 0) {\r\n\t\t\t\t\titems[newIndex].click()\r\n\t\t\t\t}\r\n\t\t\t\treturn\r\n\t\t\tdefault:\r\n\t\t\t\treturn\r\n\t\t}\r\n\r\n\t\tthis.focusedIndex = newIndex\r\n\t\titems[newIndex].focus()\r\n\t}\r\n\r\n\tprivate handleFabClick(event: Event) {\r\n\t\tevent.stopPropagation()\r\n\t\tthis.dispatchEvent(\r\n\t\t\tnew CustomEvent('fab-click', {\r\n\t\t\t\tbubbles: true,\r\n\t\t\t\tcomposed: true,\r\n\t\t\t}),\r\n\t\t)\r\n\t}\r\n\r\n\tprivate handleMenuClick(event: Event) {\r\n\t\tevent.stopPropagation()\r\n\t\tthis.dispatchEvent(\r\n\t\t\tnew CustomEvent('menu-click', {\r\n\t\t\t\tbubbles: true,\r\n\t\t\t\tcomposed: true,\r\n\t\t\t}),\r\n\t\t)\r\n\t}\r\n\r\n\tprotected render() {\r\n\t\t// Host-level classes for the navigation rail\r\n\t\tconst hostClasses = this.classMap({\r\n\t\t\t// Layout & Structure - Fixed width to prevent layout shift\r\n\t\t\t'flex flex-col': true,\r\n\t\t\t'h-full': true,\r\n\t\t\t'box-border relative overflow-visible': true,\r\n\t\t\t'z-10 hover:z-[100]': true, // Base z-index, elevated on hover for overlay\r\n\r\n\t\t\t// Width - collapses to 0 when fullscreen\r\n\t\t\t'w-20': !this.isFullscreen, // w-20 = 80px fixed width (M3 spec: 80dp)\r\n\t\t\t'w-0': this.isFullscreen, // Collapse width to 0 in fullscreen\r\n\r\n\t\t\t// Visibility and transition\r\n\t\t\t'transition-all duration-300 ease-emphasized': true,\r\n\t\t\t'opacity-100': !this.isFullscreen,\r\n\t\t\t'opacity-0 pointer-events-none': this.isFullscreen,\r\n\t\t\t'overflow-hidden': this.isFullscreen, // Hide overflow when collapsed\r\n\t\t})\r\n\r\n\t\t// Rail container - programmatically controlled width\r\n\t\tconst railClasses = this.classMap({\r\n\t\t\t// Layout & Structure\r\n\t\t\t'flex flex-col h-full': true,\r\n\t\t\t'box-border relative': true,\r\n\t\t\t'py-2': true,\r\n\r\n\r\n\t\t\t// M3 Colors & Theme\r\n\t\t\t'bg-container-lowest text-surface-on': true,\r\n\r\n\t\t\t// M3 Motion - smooth transitions for width and shadow\r\n\t\t\t'transition-all duration-300 ease-emphasized': true,\r\n\r\n\t\t\t// Collapsed state (default) - M3 standard 80px width\r\n\t\t\t'w-20': !this.expanded, // w-20 = 80px (M3 spec: 80dp)\r\n\t\t\t'px-3': !this.expanded, // px-3 = 12px (M3 spec: 12px to center 56px items)\r\n\r\n\t\t\t// Expanded state - M3 expanded width with shadow\r\n\t\t\t'w-60': this.expanded, // w-60 = 240px expanded width\r\n\t\t\t'px-4': this.expanded, // Larger padding when expanded\r\n\t\t\t'shadow-lg': this.expanded, // M3 elevation 3 shadow when expanded\r\n\t\t})\r\n\r\n\t\t// Header section classes - hidden when no content\r\n\t\tconst headerClasses = this.classMap({\r\n\t\t\t'flex flex-col items-center gap-1': true,\r\n\t\t\t'hidden': !this.hasHeaderContent,\r\n\t\t})\r\n\r\n\t\t// Navigation container classes with alignment\r\n\t\tconst navClasses = this.classMap({\r\n\t\t\t'flex-1 flex flex-col gap-3': true, // gap-3 = 12px (M3 spec: 12px item spacing)\r\n\t\t\t'min-h-0': true, // Allow flex shrinking and proper scroll container height calculation\r\n\t\t\t// Alignment variants\r\n\t\t\t'justify-start': this.alignment === 'top',\r\n\t\t\t'justify-center': this.alignment === 'center',\r\n\t\t\t'justify-end': this.alignment === 'bottom',\r\n\t\t})\r\n\r\n\t\t// Footer section classes\r\n\t\tconst footerClasses = this.classMap({\r\n\t\t\t'flex flex-col items-center gap-1 mt-auto pt-2': true,\r\n\t\t})\r\n\r\n\t\treturn html`\r\n\t\t\t<div\r\n\t\t\t\tclass=${hostClasses}\r\n\t\t\t>\r\n\t\t\t\t<div class=${railClasses} part=\"rail\">\r\n\t\t\t\t\t<div class=${headerClasses} part=\"header\">\r\n\t\t\t\t\t\t<slot name=\"fab\" @click=${this.handleFabClick} @slotchange=${this.handleHeaderSlotChange}></slot>\r\n\t\t\t\t\t\t<slot name=\"menu\" @click=${this.handleMenuClick} @slotchange=${this.handleHeaderSlotChange}></slot>\r\n\t\t\t\t\t\t<slot name=\"header\" @slotchange=${this.handleHeaderSlotChange}></slot>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<nav class=${navClasses} part=\"nav\" role=\"list\">\r\n\t\t\t\t\t\t<schmancy-scroll hide direction=\"vertical\">\r\n\t\t\t\t\t\t\t<slot @slotchange=${this.handleSlotChange}></slot>\r\n\t\t\t\t\t\t</schmancy-scroll>\r\n\t\t\t\t\t</nav>\r\n\r\n\t\t\t\t\t<div class=${footerClasses} part=\"footer\">\r\n\t\t\t\t\t\t<slot name=\"footer\"></slot>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t`\r\n\t}\r\n\r\n\tprivate setupNavigateListener() {\r\n\t\t// Listen for navigate events from child items\r\n\t\tthis.addEventListener('navigate', (e: Event) => {\r\n\t\t\tif (e instanceof CustomEvent) {\r\n\t\t\t\tconst value = e.detail\r\n\t\t\t\t// Find the item that dispatched the event and update active state\r\n\t\t\t\tconst itemIndex = this.navigationItems.findIndex(item => item.value === value || item.label === value)\r\n\t\t\t\tif (itemIndex >= 0) {\r\n\t\t\t\t\tthis.activeIndex = itemIndex\r\n\t\t\t\t\tthis._activeValue = value\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\tprivate handleHeaderSlotChange() {\r\n\t\t// Check if any header slot has content\r\n\t\tconst headerDiv = this.shadowRoot?.querySelector('[part=\"header\"]')\r\n\t\tif (headerDiv) {\r\n\t\t\tconst allSlots = headerDiv.querySelectorAll('slot')\r\n\t\t\tthis.hasHeaderContent = Array.from(allSlots).some(s =>\r\n\t\t\t\ts.assignedNodes({ flatten: true }).length > 0\r\n\t\t\t)\r\n\t\t}\r\n\t}\r\n\r\n\tprivate handleSlotChange() {\r\n\t\t// Update items when slot content changes\r\n\t\tthis.updateLabelVisibility()\r\n\t\tthis.updateActiveStates(this.activeIndex)\r\n\r\n\t\t// Set ARIA attributes on items\r\n\t\tthis.navigationItems.forEach((item, index) => {\r\n\t\t\titem.setAttribute('role', 'listitem')\r\n\t\t\tif (!item.hasAttribute('tabindex')) {\r\n\t\t\t\titem.setAttribute('tabindex', index === this.activeIndex ? '0' : '-1')\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n}\r\n\r\ndeclare global {\r\n\tinterface HTMLElementTagNameMap {\r\n\t\t'schmancy-navigation-rail': SchmancyNavigationRail\r\n\t}\r\n}\r\n"],"mappings":"+VA6DO,IAAA,EAAA,cAAyC,EAAA,GAAA,AAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,EAAA,CAAA,KAAA,UAE3B,IAAI,EAAA,gBAAA,CAAyB,EAAA,CAAA,KAAA,UAC7B,IAAI,EAAA,gBAAA,CAAyB,EAAA,CAAA,KAAA,QAC/B,IAAI,EAAA,gBAAA,CAAyB,EAAA,CAAA,KAAA,KAOxC,GAAA,KAAA,MAMC,GAAA,KAAA,MAMA,GAAA,KAAA,MA8BA,GAAA,KAAA,aAM0C,QAAA,KAAA,UAAA,CAOtC,EAAA,KAAA,SAAA,CAOD,EAAA,KAAA,OAAA,CAOF,EAAA,KAAA,MAAA,CAOD,EAAA,KAAA,WAAA,CAIa,EA9DrB,IAAA,QACI,CACH,OAAO,KAAK,QAAQ,MAErB,IAAA,OAAW,EAAA,CACV,KAAK,QAAQ,KAAK,EAAA,CAOnB,IAAA,UACI,CACH,OAAO,KAAK,OAEb,IAAA,SAAa,EAAA,CACZ,KAAK,OAAS,EA+Cf,mBAAA,CACC,MAAM,mBAAA,EAGN,EAAA,EAAA,QAAA,EAAA,EAAA,WACW,KAAM,aAAA,CAAc,MAAA,EAAA,EAAA,SAAe,KAAK,UAAU,KAAA,CAAK,EAAA,CAAA,CAAA,EAAO,EAAA,EAAA,WAC9D,KAAM,aAAA,CAAc,MAAA,EAAA,EAAA,SAAe,KAAK,UAAU,KAAA,CAAK,EAAA,CAAA,CAAA,CAAA,CAEhE,MAAA,EAAA,EAAA,WAAe,KAAK,cAAA,CAAA,CACpB,WAAA,EAGF,EAAA,EAAA,QAAA,EAAA,EAAA,WACW,KAAM,YAAA,CAAa,MAAA,EAAA,EAAA,SAAe,KAAK,UAAU,KAAA,CAAK,EAAA,CAAA,CAAA,EAAO,EAAA,EAAA,WAC7D,KAAM,UAAA,CAAW,MAAA,EAAA,EAAA,SAAe,KAAK,UAAU,KAAA,CAAK,EAAA,CAAA,CAAA,EAAQ,EAAA,EAAA,WAC5D,KAAM,aAAA,CAAc,MAAA,EAAA,EAAA,SAAe,KAAK,UAAU,KAAA,CAAK,EAAA,CAAA,CAAA,CAAA,CAEhE,MAAA,EAAA,EAAA,WAAe,KAAK,cAAA,CAAA,CACpB,WAAA,CAGF,KAAK,UACH,MAAA,EAAA,EAAA,KACI,GAAA,CACC,GAAA,CAAa,KAAK,WACrB,KAAK,WAAA,CAAa,IAAA,EAElB,EAAA,EAAA,OAEI,IAAA,EAAI,EAAA,EAAA,SACC,KAAK,WAAA,CAAa,EAAA,EAAO,EAAA,EAAA,WAC1B,KAAK,cAAA,CAAA,CAEf,WAAA,CAGF,KAAK,QACH,MAAA,EAAA,EAAA,uBAAA,EACsB,EAAA,EAAA,KAClB,GAAA,CACH,KAAK,eAAA,CAEL,KAAK,aAAa,gBAAiB,OAAO,EAAA,CAAA,CAC1C,KAAK,aAAa,WAAY,EAAW,IAAM,KAAA,EAAA,EAC9C,EAAA,EAAA,WACQ,KAAK,cAAA,CAAA,CAEf,WAAA,CAGF,KAAK,aAAa,OAAQ,WAAA,CACrB,KAAK,aAAa,WAAA,EACtB,KAAK,aAAa,WAAY,KAAK,OAAS,IAAM,KAAA,CAIpD,QAAQ,EAAA,CACP,MAAM,QAAQ,EAAA,CAKV,EAAkB,IAAI,WAAA,EACzB,KAAK,aAAa,gBAAiB,OAAO,KAAK,SAAA,CAAA,CAG5C,EAAkB,IAAI,QAAA,EACzB,KAAK,aAAa,aAAc,KAAK,MAAA,CAOvC,YAAoB,EAAA,CACnB,GAAI,KAAK,SAGR,OAFA,EAAM,gBAAA,CAAA,KACN,EAAM,iBAAA,CAKP,KAAK,cACJ,IAAI,YAAY,WAAY,CAC3B,OAAQ,KAAK,OAAS,KAAK,MAC3B,QAAA,CAAS,EACT,SAAA,CAAU,EAAA,CAAA,CAAA,CAWb,cAAsB,EAAA,CACjB,KAAK,UAEL,EAAM,MAAQ,SAAW,EAAM,MAAQ,MAC1C,EAAM,gBAAA,CACN,KAAK,OAAA,EAIP,QAAA,CACC,IAAM,EAAA,CAAA,CAAkB,KAAK,cAAc,gBAAA,CACrC,EAAiB,KAAK,cAAc,iBAAA,CAGpC,EAAmB,KAAK,SAAS,CAEtC,4CAAA,CAA6C,EAC7C,kBAAA,CAAmB,EACnB,OAAA,CAAQ,EACR,QAAA,CAAS,EAGT,aAAA,CAAc,EACd,iBAAA,CAAkB,EAClB,SAAA,CAAU,EACV,cAAA,CAAe,EACf,aAAA,CAAc,EAGd,yBAAA,CAA2B,KAAK,OAChC,6BAA8B,KAAK,OACnC,oCAAA,CAAqC,EAGrC,uCAAA,CAAwC,EAGxC,iCAAkC,KAAK,SAGvC,wBAAyB,KAAK,WAG9B,gBAAiB,KAAK,OAGtB,0HACC,KAAK,MAAA,CAAA,CAID,EAAuB,KAAK,SAAS,CAC1C,mCAAA,CAAoC,EACpC,sBAAA,CAAuB,EACvB,yBAAA,CAA0B,EAAA,CAAA,CAIrB,EAAmB,KAAK,SAAS,CACtC,uCAAA,CAAwC,EACxC,WAAA,CAAY,EACZ,aAAA,CAAc,EACd,yBAAA,CAA0B,EAC1B,6CAAA,CAA8C,EAE9C,4CAAA,CAA8C,KAAK,OACnD,8CAA+C,KAAK,OAAA,CAAA,CAI/C,EAAc,KAAK,SAAS,CACjC,iBAAA,CAAkB,EAClB,wBAAA,CAA0B,KAAK,OAC/B,uBAAwB,KAAK,OAAA,CAAA,CAKxB,EAAe,KAAK,SAAS,CAClC,gCAAA,CAAiC,EACjC,cAAA,CAAe,EACf,kDAAA,CAAmD,EACnD,qBAAA,CAAsB,EACtB,OAAA,CAAS,KAAK,WAAA,CAAc,KAAK,MAAA,CAAA,CAI5B,EAAe,KAAK,SAAS,CAClC,yBAAA,CAA0B,EAC1B,cAAA,CAAe,EACf,aAAA,CAAc,EACd,wBAAA,CAAyB,EACzB,mCAAA,CAAoC,EACpC,uBAAA,CAAwB,EACxB,gBAAA,CAAiB,EAEjB,iCAAkC,KAAK,eAAiB,QACxD,qCAAsC,KAAK,eAAiB,UAC5D,yCAA0C,KAAK,eAAiB,YAAjB,CAAA,CAI1C,EAAgB,KAAK,SAAS,CACnC,kDAAA,CAAmD,EACnD,qEAAA,CAAsE,EACtE,4CAAA,CAA6C,EAC7C,qCAAA,CAAsC,EACtC,kDAAA,CAAmD,EACnD,4CAAA,CAA6C,EAE7C,oDAAqD,KAAK,WAAA,CAAA,CAG3D,MAAO,GAAA,IAAI;;YAED,EAAA;;aAEC,KAAK,YAAA;eACH,KAAK,cAAA;sBACE,KAAK,QAAQ,iBAAA,CAC5B,sDACA,OAAA;;kBAEW,EAAA;;iBAED,EAAA;mBACE,EAAA;kBAEb,MACM,EAAA,IAAI,kDAAA,EAAA,EAAA,MAGR,KAAK,SACC,EAAA,IAAI;;kBAEA,EAAA;;6FAE2E,KAAK,OACrF,IACA,IAAA,iCAAqC,KAAK,OAAS,KAAO,KAAA;;YAE3D,KAAK,KAAA;;;;;iBAON,KAAK,UAAa,EAAA,IAAI,eAAe,EAAA,gBAA6B,KAAK,MAAA,SAAA,CAAA;iBAE7E,KAAK,UACC,EAAA,IAAI;mBAER,MACM,EAAA,IAAI,iCACJ,EAAA,IAAI;sBACK,EAAA,4BAAyC,KAAK,MAAA,mBAAyB,KAAK,MAAA;;;;;iBAQ7F,KAAK,aAAa,QAAA,KACZ,EAAA,IAAI;;;;;;;;;;;;;SAaN,KAAK,aAAa,QAAA,CAAA;;;;0BAtWhB,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAMjB,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,QAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAMjB,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,QAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAOjB,CAAE,KAAM,QAAS,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,SAAA,KAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAYjC,CAAE,KAAM,QAAS,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,WAAA,KAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAWjC,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,QAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAMjB,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,eAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAOjB,CAAE,KAAM,QAAS,UAAW,aAAA,CAAA,CAAA,CAAe,EAAA,UAAA,YAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAO3C,CAAE,KAAM,QAAS,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,WAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAOjC,CAAE,KAAM,QAAS,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,SAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAOjC,CAAE,KAAM,QAAS,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,QAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,CAAA,CAInC,EAAA,UAAA,aAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eA3FM,gCAAA,CAAA,CAAgC,EAAA,CCHxC,IAAA,EAAA,cAAqC,EAAA,GAAA,AAAA,CAAA,YAAA,GAAA,EAAA,CAAA,MAAA,GAAA,EAAA,CAAA,KAAA,aAEpB,IAAI,EAAA,gBAAA,GAAwB,CAAA,KAAA,aA0B5B,GAAA,KAAA,gBAUY,MAAA,KAAA,UAOM,MAAA,KAAA,aAAA,CAO1B,EAAA,KAAA,mBAAA,CAOM,EAAA,KAAA,SAAA,CAOV,EAAA,KAAA,aAAA,GAKY,KAAA,iBAAA,CAGI,EAAA,KAAA,aAAA,CAGJ,EApEvB,IAAA,aACI,CACH,OAAO,KAAK,aAAa,MAE1B,IAAA,YAAgB,EAAA,CACf,KAAK,aAAa,KAAK,EAAA,CAMxB,IAAA,aACI,CACH,OAAO,KAAK,aAEb,IAAA,YAAgB,EAAA,CACf,KAAK,aAAe,EACpB,KAAK,oBAAoB,EAAA,CA0D1B,IAAA,iBAAY,CACX,OAAO,KAAK,YAAY,OAAO,GAAM,EAAG,UAAY,gCAAZ,CAGzC,mBAAA,CACC,MAAM,mBAAA,CAGF,KAAK,oBACR,KAAK,iBAAiB,UAAW,KAAK,cAAA,CAIvC,KAAK,aACH,MAAA,EAAA,EAAA,uBAAA,EACsB,EAAA,EAAA,KAClB,GAAS,KAAK,mBAAmB,EAAA,CAAA,EAAO,EAAA,EAAA,WAClC,KAAK,cAAA,CAAA,CAEf,WAAA,EAGF,EAAA,EAAA,WAAU,OAAQ,aAAA,CAAc,MAAA,EAAA,EAAA,KAC1B,GAAA,CACJ,IAAM,EAAc,EACpB,KAAK,aAAe,EAAY,QAAA,EAC/B,EAAA,EAAA,WACQ,KAAK,cAAA,CAAA,CACd,WAAA,CAGF,KAAK,uBAAA,CAGL,KAAK,uBAAA,CAGL,KAAK,aAAa,OAAQ,aAAA,CAC1B,KAAK,aAAa,aAAc,kBAAA,CAGjC,QAAQ,EAAA,CACP,MAAM,QAAQ,EAAA,CAEV,EAAkB,IAAI,kBAAA,EACzB,KAAK,uBAAA,CAGF,EAAkB,IAAI,cAAA,EACzB,KAAK,oBAAoB,KAAK,YAAA,CAG3B,EAAkB,IAAI,WAAA,EACzB,KAAK,uBAAA,CAIP,mBAA2B,EAAA,CAC1B,KAAK,gBAAgB,SAAS,EAAM,IAAA,CACnC,IAAM,EAAW,IAAM,EACvB,EAAK,OAAS,EACd,EAAK,aAAa,gBAAiB,OAAO,EAAA,CAAA,CAC1C,EAAK,aAAa,WAAY,EAAW,IAAM,KAAA,CAG3C,IACH,KAAK,aAAe,EAAK,OAAS,EAAK,OAAS,KAAA,CAKnD,oBAA4B,EAAA,CAC3B,IAAM,EAAQ,KAAK,gBAAgB,UAAU,GAAQ,EAAK,aAAa,QAAA,GAAa,GAAS,EAAK,QAAU,EAAA,CACxG,GAAS,IACZ,KAAK,YAAc,GAIrB,uBAAA,CACC,KAAK,gBAAgB,SAAS,EAAM,IAAA,CACnC,IAAI,EAAA,CAAkB,EAIrB,EAAA,CAAA,CADG,KAAK,UAKP,KAAK,kBAAoB,OAAU,KAAK,kBAAoB,YAAc,IAAM,KAAK,YAGvF,EAAK,UAAY,EAGb,KAAK,cAAA,CAAiB,GAAA,CAAoB,KAAK,UAAY,EAAK,MACnE,EAAK,aAAa,QAAS,EAAK,MAAA,CAEhC,EAAK,gBAAgB,QAAA,EAAA,CAWxB,QAAA,CACC,KAAK,SAAA,CAAW,EAMjB,UAAA,CACC,KAAK,SAAA,CAAW,EAQjB,YAAmB,EAAA,CAElB,IAAM,EAAe,KAAK,cAAc,WAAW,EAAO,GAAA,IAAA,CAC1D,GAAI,EAEH,OAAO,EAIR,IAAM,EAAO,SAAS,cAAc,gCAAA,CACpC,EAAK,aAAa,QAAS,EAAO,GAAA,CAClC,EAAK,UAAY,sCACa,EAAO,MAAQ,UAAA,0BAC1C,EAAO,MAAA,QAGV,IAAM,EAAS,KAAK,cAAc,kBAAA,CAMlC,OALI,EACH,KAAK,aAAa,EAAM,EAAA,CAExB,KAAK,YAAY,EAAA,CAEX,EAMR,QAAA,CACC,KAAK,SAAA,CAAY,KAAK,SAIvB,cAAsB,EAAA,CACrB,IAAM,EAAQ,KAAK,gBACnB,GAAI,EAAM,SAAW,EAAG,OAExB,IAAI,EAAW,KAAK,cAAgB,EAAI,KAAK,aAAe,KAAK,YAEjE,OAAQ,EAAM,IAAd,CACC,IAAK,YACJ,EAAM,gBAAA,CACN,GAAY,EAAW,GAAK,EAAM,OAClC,MACD,IAAK,UACJ,EAAM,gBAAA,CACN,EAAW,GAAY,EAAI,EAAM,OAAS,EAAI,EAAW,EACzD,MACD,IAAK,OACJ,EAAM,gBAAA,CACN,EAAW,EACX,MACD,IAAK,MACJ,EAAM,gBAAA,CACN,EAAW,EAAM,OAAS,EAC1B,MACD,IAAK,QACL,IAAK,IACJ,EAAM,gBAAA,CACF,GAAY,GACf,EAAM,GAAU,OAAA,CAEjB,OACD,QACC,OAGF,KAAK,aAAe,EACpB,EAAM,GAAU,OAAA,CAGjB,eAAuB,EAAA,CACtB,EAAM,iBAAA,CACN,KAAK,cACJ,IAAI,YAAY,YAAa,CAC5B,QAAA,CAAS,EACT,SAAA,CAAU,EAAA,CAAA,CAAA,CAKb,gBAAwB,EAAA,CACvB,EAAM,iBAAA,CACN,KAAK,cACJ,IAAI,YAAY,aAAc,CAC7B,QAAA,CAAS,EACT,SAAA,CAAU,EAAA,CAAA,CAAA,CAKb,QAAA,CAEC,IAAM,EAAc,KAAK,SAAS,CAEjC,gBAAA,CAAiB,EACjB,SAAA,CAAU,EACV,uCAAA,CAAwC,EACxC,qBAAA,CAAsB,EAGtB,OAAA,CAAS,KAAK,aACd,MAAO,KAAK,aAGZ,8CAAA,CAA+C,EAC/C,cAAA,CAAgB,KAAK,aACrB,gCAAiC,KAAK,aACtC,kBAAmB,KAAK,aAAA,CAAA,CAInB,EAAc,KAAK,SAAS,CAEjC,uBAAA,CAAwB,EACxB,sBAAA,CAAuB,EACvB,OAAA,CAAQ,EAIR,sCAAA,CAAuC,EAGvC,8CAAA,CAA+C,EAG/C,OAAA,CAAS,KAAK,SACd,OAAA,CAAS,KAAK,SAGd,OAAQ,KAAK,SACb,OAAQ,KAAK,SACb,YAAa,KAAK,SAAA,CAAA,CAIb,EAAgB,KAAK,SAAS,CACnC,mCAAA,CAAoC,EACpC,OAAA,CAAW,KAAK,iBAAA,CAAA,CAIX,EAAa,KAAK,SAAS,CAChC,6BAAA,CAA8B,EAC9B,UAAA,CAAW,EAEX,gBAAiB,KAAK,YAAc,MACpC,iBAAkB,KAAK,YAAc,SACrC,cAAe,KAAK,YAAc,SAAd,CAAA,CAIf,EAAgB,KAAK,SAAS,CACnC,gDAAA,CAAiD,EAAA,CAAA,CAGlD,MAAO,GAAA,IAAI;;YAED,EAAA;;iBAEK,EAAA;kBACC,EAAA;gCACc,KAAK,eAAA,eAA8B,KAAK,uBAAA;iCACvC,KAAK,gBAAA,eAA+B,KAAK,uBAAA;wCAClC,KAAK,uBAAA;;;kBAG3B,EAAA;;2BAES,KAAK,iBAAA;;;;kBAId,EAAA;;;;;IAQjB,uBAAA,CAEC,KAAK,iBAAiB,WAAa,GAAA,CAClC,GAAI,aAAa,YAAa,CAC7B,IAAM,EAAQ,EAAE,OAEV,EAAY,KAAK,gBAAgB,UAAU,GAAQ,EAAK,QAAU,GAAS,EAAK,QAAU,EAAA,CAC5F,GAAa,IAChB,KAAK,YAAc,EACnB,KAAK,aAAe,KAAA,CAMxB,wBAAA,CAEC,IAAM,EAAY,KAAK,YAAY,cAAc,kBAAA,CACjD,GAAI,EAAW,CACd,IAAM,EAAW,EAAU,iBAAiB,OAAA,CAC5C,KAAK,iBAAmB,MAAM,KAAK,EAAA,CAAU,KAAK,GACjD,EAAE,cAAc,CAAE,QAAA,CAAS,EAAA,CAAA,CAAQ,OAAS,EAAA,EAK/C,kBAAA,CAEC,KAAK,uBAAA,CACL,KAAK,mBAAmB,KAAK,YAAA,CAG7B,KAAK,gBAAgB,SAAS,EAAM,IAAA,CACnC,EAAK,aAAa,OAAQ,WAAA,CACrB,EAAK,aAAa,WAAA,EACtB,EAAK,aAAa,WAAY,IAAU,KAAK,YAAc,IAAM,KAAA,EAAA,GAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UA/Z1D,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,cAAA,KAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAWjB,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,cAAA,KAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAiBjB,CAAE,KAAM,OAAQ,UAAW,mBAAoB,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,kBAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAO/D,CAAE,KAAM,OAAQ,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,YAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAOhC,CAAE,KAAM,QAAA,CAAA,CAAA,CAAU,EAAA,UAAA,eAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAOlB,CAAE,KAAM,QAAA,CAAA,CAAA,CAAU,EAAA,UAAA,qBAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UAOlB,CAAE,KAAM,QAAS,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,WAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,CAAA,CAKnC,EAAA,UAAA,eAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,CAAA,CAGA,EAAA,UAAA,mBAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,QAAA,CAAA,CAGA,EAAA,UAAA,eAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,uBAKe,CAAE,QAAA,CAAS,EAAA,CAAA,CAAA,CAAO,EAAA,UAAA,cAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eAlF3B,2BAAA,CAAA,CAA2B,EAAA,CAAA,OAAA,eAAA,QAAA,yBAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA,CAAA,OAAA,eAAA,QAAA,6BAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}
+{"version":3,"file":"navigation-rail.cjs","names":[],"sources":["../src/navigation-rail/navigation-rail-item.ts","../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { $LitElement } from '@mixins/index'\nimport { html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { BehaviorSubject, fromEvent, merge, takeUntil } from 'rxjs'\nimport { delay, distinctUntilChanged, tap } from 'rxjs/operators'\n\nexport type NavigationRailItemClickEvent = CustomEvent<{\n\ticon: string\n\tlabel: string\n\tvalue: string\n\tactive: boolean\n}>\n\n/**\n * Material Design 3 Navigation Rail Item Component\n * @see https://m3.material.io/components/navigation-rail/overview\n *\n * `<schmancy-navigation-rail-item>` component\n *\n * Individual navigation item for use within a navigation rail.\n * Represents a single destination or action with an icon and optional label.\n *\n * @element schmancy-navigation-rail-item\n * @slot icon - Slot for the navigation item icon (e.g., schmancy-icon)\n * @slot - Default slot for custom content\n * @slot badge - Custom badge content\n *\n * @fires navigate - When the item is clicked\n *\n * @csspart container - The main item container\n * @csspart indicator - The active indicator\n * @csspart icon - The icon container\n * @csspart label - The label text\n * @csspart badge - The badge element\n *\n * @example\n * <schmancy-navigation-rail-item\n *   icon=\"home\"\n *   label=\"Home\"\n *   value=\"/home\"\n *   badge=\"3\"\n *   active>\n * </schmancy-navigation-rail-item>\n *\n * @example\n * <!-- Using 'selected' alias -->\n * <schmancy-navigation-rail-item\n *   icon=\"settings\"\n *   label=\"Settings\"\n *   value=\"/settings\"\n *   selected>\n * </schmancy-navigation-rail-item>\n *\n * @example\n * <!-- With custom icon -->\n * <schmancy-navigation-rail-item label=\"Dashboard\">\n *   <schmancy-icon slot=\"icon\">dashboard</schmancy-icon>\n * </schmancy-navigation-rail-item>\n */\n@customElement('schmancy-navigation-rail-item')\nexport class SchmancyNavigationRailItem extends $LitElement() {\n\t// Observable state\n\tprivate hovering$ = new BehaviorSubject<boolean>(false)\n\tprivate pressing$ = new BehaviorSubject<boolean>(false)\n\tprivate active$ = new BehaviorSubject<boolean>(false)\n\n\t// Properties\n\t/**\n\t * Icon name (Material Symbols icon)\n\t */\n\t@property({ type: String })\n\ticon = ''\n\n\t/**\n\t * Label text for the navigation item\n\t */\n\t@property({ type: String })\n\tlabel = ''\n\n\t/**\n\t * Value associated with this item (useful for routing)\n\t */\n\t@property({ type: String })\n\tvalue = ''\n\n\t/**\n\t * Whether this item is currently active/selected\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tget active() {\n\t\treturn this.active$.value\n\t}\n\tset active(value: boolean) {\n\t\tthis.active$.next(value)\n\t}\n\n\t/**\n\t * Whether this item is currently selected (alias for active)\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tget selected() {\n\t\treturn this.active\n\t}\n\tset selected(value: boolean) {\n\t\tthis.active = value\n\t}\n\n\t/**\n\t * Badge text or number to display\n\t */\n\t@property({ type: String })\n\tbadge = ''\n\n\t/**\n\t * Badge variant\n\t */\n\t@property({ type: String })\n\tbadgeVariant: 'error' | 'primary' | 'secondary' = 'error'\n\n\t/**\n\t * Whether to show the label (controlled by parent rail)\n\t * @default false\n\t */\n\t@property({ type: Boolean, attribute: 'show-label' })\n\tshowLabel = false\n\n\t/**\n\t * Whether this item is disabled\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false\n\n\t/**\n\t * Whether this is a nested item (sub-navigation)\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tnested = false\n\n\t/**\n\t * Whether this item represents a group separator\n\t * @default false\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tgroup = false\n\n\t// State\n\t@state()\n\tprivate showRipple = false\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\n\t\t// Set up hover tracking\n\t\tmerge(\n\t\t\tfromEvent(this, 'mouseenter').pipe(tap(() => this.hovering$.next(true))),\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.hovering$.next(false))),\n\t\t)\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe()\n\n\t\t// Set up press tracking\n\t\tmerge(\n\t\t\tfromEvent(this, 'mousedown').pipe(tap(() => this.pressing$.next(true))),\n\t\t\tfromEvent(this, 'mouseup').pipe(tap(() => this.pressing$.next(false))),\n\t\t\tfromEvent(this, 'mouseleave').pipe(tap(() => this.pressing$.next(false))),\n\t\t)\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe()\n\n\t\t// Ripple effect with M3 timing\n\t\tthis.pressing$\n\t\t\t.pipe(\n\t\t\t\ttap(pressing => {\n\t\t\t\t\tif (pressing && !this.disabled) {\n\t\t\t\t\t\tthis.showRipple = true\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t\t// M3 standard ripple duration\n\t\t\t\tdelay(600),\n\t\t\t\ttap(() => (this.showRipple = false)),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Subscribe to active state changes for reactive updates\n\t\tthis.active$\n\t\t\t.pipe(\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\ttap(isActive => {\n\t\t\t\t\tthis.requestUpdate()\n\t\t\t\t\t// Update ARIA attributes reactively\n\t\t\t\t\tthis.setAttribute('aria-selected', String(isActive))\n\t\t\t\t\tthis.setAttribute('tabindex', isActive ? '0' : '-1')\n\t\t\t\t}),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe()\n\n\t\t// Set ARIA attributes\n\t\tthis.setAttribute('role', 'listitem')\n\t\tif (!this.hasAttribute('tabindex')) {\n\t\t\tthis.setAttribute('tabindex', this.active ? '0' : '-1')\n\t\t}\n\t}\n\n\tupdated(changedProperties: PropertyValues) {\n\t\tsuper.updated(changedProperties)\n\n\t\t// Active state is now handled by the BehaviorSubject subscription\n\t\t// So we don't need to duplicate it here\n\n\t\tif (changedProperties.has('disabled')) {\n\t\t\tthis.setAttribute('aria-disabled', String(this.disabled))\n\t\t}\n\n\t\tif (changedProperties.has('label')) {\n\t\t\tthis.setAttribute('aria-label', this.label)\n\t\t}\n\t}\n\n\t/**\n\t * Handle click events\n\t */\n\tprivate handleClick(event: Event) {\n\t\tif (this.disabled) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\treturn\n\t\t}\n\n\t\t// Emit navigate event with the value\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('navigate', {\n\t\t\t\tdetail: this.value || this.label,\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t}),\n\t\t)\n\n\t\t// Visual feedback is handled by the ripple effect in connectedCallback\n\t\t// The parent rail will confirm and update via activeIndex\n\t}\n\n\t/**\n\t * Handle keyboard events\n\t */\n\tprivate handleKeyDown(event: KeyboardEvent) {\n\t\tif (this.disabled) return\n\n\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\tevent.preventDefault()\n\t\t\tthis.click()\n\t\t}\n\t}\n\n\tprotected render() {\n\t\tconst hasCustomIcon = !!this.querySelector('[slot=\"icon\"]')\n\t\tconst hasCustomBadge = this.querySelector('[slot=\"badge\"]')\n\n\t\t// M3 Navigation Rail Item classes with theme integration\n\t\tconst containerClasses = this.classMap({\n\t\t\t// Layout & Spacing (M3 56px height, 12px vertical padding)\n\t\t\t'flex flex-col items-center justify-center': true,\n\t\t\t'min-h-14 w-full': true, // min-h-14 = 56px\n\t\t\t'py-3': true, // py-3 = 12px top/bottom\n\t\t\t'gap-1': true, // gap-1 = 4px\n\n\t\t\t// M3 Shape & Interaction\n\t\t\t'rounded-lg': true, // M3 large corner radius\n\t\t\t'cursor-pointer': true,\n\t\t\trelative: true,\n\t\t\t'select-none': true,\n\t\t\t'box-border': true,\n\n\t\t\t// Colors & States\n\t\t\t'text-surface-onVariant': !this.active,\n\t\t\t'text-secondary-onContainer': this.active,\n\t\t\t'hover:bg-surface-containerHighest': true,\n\n\t\t\t// Transitions (M3 emphasized motion)\n\t\t\t'transition-all duration-150 ease-out': true,\n\n\t\t\t// Disabled state\n\t\t\t'pointer-events-none opacity-38': this.disabled,\n\n\t\t\t// Active ripple effect\n\t\t\t'[&>.ripple]:scale-100': this.showRipple,\n\n\t\t\t// Nested item adjustments\n\t\t\t'min-h-12 pl-8': this.nested, // 48px height, 32px left padding for nested\n\n\t\t\t// Group separator\n\t\t\t'mb-2 after:absolute after:bottom-[-4px] after:left-3 after:right-3 after:h-px after:bg-outline-variant after:opacity-12':\n\t\t\t\tthis.group,\n\t\t})\n\n\t\t// Icon container with active indicator\n\t\tconst iconContainerClasses = this.classMap({\n\t\t\t'flex items-center justify-center': true,\n\t\t\t'w-auto min-w-14 h-8': true, // 56px min-width, 32px height\n\t\t\t'shrink-0 relative z-10': true,\n\t\t})\n\n\t\t// Active indicator behind icon\n\t\tconst indicatorClasses = this.classMap({\n\t\t\t'absolute top-1/2 left-1/2 opacity-30': true,\n\t\t\t'w-14 h-8': true, // 56px x 32px\n\t\t\t'rounded-lg': true, // M3 large corner radius\n\t\t\t'bg-secondary-container': true,\n\t\t\t'transition-transform duration-150 ease-out': true,\n\t\t\t// Transform based on active state\n\t\t\t'scale-0 -translate-x-1/2 -translate-y-1/2': !this.active,\n\t\t\t'scale-100 -translate-x-1/2 -translate-y-1/2': this.active,\n\t\t})\n\n\t\t// Icon styling\n\t\tconst iconClasses = this.classMap({\n\t\t\t'relative z-100': true,\n\t\t\t'text-2xl leading-none': !this.nested, // 24px icon for normal\n\t\t\t'text-xl leading-none': this.nested, // 20px icon for nested\n\t\t\t// Material Symbols font variations handled via CSS custom properties\n\t\t})\n\n\t\t// Label styling\n\t\tconst labelClasses = this.classMap({\n\t\t\t'text-xs font-medium leading-4': true, // 12px, medium weight, 16px line height\n\t\t\t'text-center': true,\n\t\t\t'overflow-hidden text-ellipsis whitespace-nowrap': true,\n\t\t\t'z-10 max-w-14 px-1': true, // max 56px width, 4px horizontal padding\n\t\t\thidden: !this.showLabel && !this.label, // Hide if not shown or no label\n\t\t})\n\n\t\t// Badge styling with dynamic colors\n\t\tconst badgeClasses = this.classMap({\n\t\t\t'absolute top-2 right-3': true, // 8px from top, 12px from right\n\t\t\t'min-w-4 h-4': true, // 16px min-width and height\n\t\t\t'rounded-sm': true, // M3 small corner radius\n\t\t\t'text-xs font-semibold': true, // 11px, 600 weight\n\t\t\t'flex items-center justify-center': true,\n\t\t\t'px-1 box-border z-20': true, // 4px padding\n\t\t\t'animate-pulse': true, // Pulse animation\n\t\t\t// Dynamic background based on variant\n\t\t\t'bg-error-default text-error-on': this.badgeVariant === 'error',\n\t\t\t'bg-primary-default text-primary-on': this.badgeVariant === 'primary',\n\t\t\t'bg-secondary-default text-secondary-on': this.badgeVariant === 'secondary',\n\t\t})\n\n\t\t// Ripple effect classes\n\t\tconst rippleClasses = this.classMap({\n\t\t\t'absolute inset-0 rounded-lg overflow-hidden z-0': true,\n\t\t\t'before:content-[\"\"] before:absolute before:top-1/2 before:left-1/2': true,\n\t\t\t'before:w-0 before:h-0 before:rounded-full': true,\n\t\t\t'before:bg-current before:opacity-0': true,\n\t\t\t'before:-translate-x-1/2 before:-translate-y-1/2': true,\n\t\t\t'before:transition-all before:duration-300': true,\n\t\t\t// Active state\n\t\t\t'before:w-[200%] before:h-[200%] before:opacity-12': this.showRipple,\n\t\t})\n\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=${containerClasses}\n\t\t\t\tpart=\"container\"\n\t\t\t\t@click=${this.handleClick}\n\t\t\t\t@keydown=${this.handleKeyDown}\n\t\t\t\tstyle=\"outline: ${this.matches(':focus-visible')\n\t\t\t\t\t? '2px solid var(--schmancy-sys-color-primary-default)'\n\t\t\t\t\t: 'none'}; outline-offset: 2px;\"\n\t\t\t>\n\t\t\t\t<span class=${rippleClasses} aria-hidden=\"true\"></span>\n\n\t\t\t\t<div class=${iconContainerClasses} part=\"icon\">\n\t\t\t\t\t<span class=${indicatorClasses} part=\"indicator\" aria-hidden=\"true\"></span>\n\t\t\t\t\t${when(\n\t\t\t\t\t\thasCustomIcon,\n\t\t\t\t\t\t() => html`<slot class=\"relative\" name=\"icon\"></slot>`,\n\t\t\t\t\t\t() =>\n\t\t\t\t\t\t\twhen(\n\t\t\t\t\t\t\t\tthis.icon,\n\t\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclass=${iconClasses}\n\t\t\t\t\t\t\t\t\t\tpart=\"icon-text\"\n\t\t\t\t\t\t\t\t\t\tstyle=\"font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' ${this.active\n\t\t\t\t\t\t\t\t\t\t\t? '1'\n\t\t\t\t\t\t\t\t\t\t\t: '0'}, 'wght' 400, 'GRAD' 0, 'opsz' ${this.nested ? '20' : '24'};\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t${this.icon}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t),\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t${when(this.label, () => html`<span class=${labelClasses} part=\"label\">${this.label}</span>`)}\n\t\t\t\t${when(\n\t\t\t\t\tthis.badge,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t${when(\n\t\t\t\t\t\t\thasCustomBadge,\n\t\t\t\t\t\t\t() => html`<slot name=\"badge\"></slot>`,\n\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t<span class=${badgeClasses} part=\"badge\" aria-label=\"${this.badge} notifications\"> ${this.badge} </span>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t`,\n\t\t\t\t)}\n\n\t\t\t\t<!-- Tooltip shown via title attribute -->\n\t\t\t\t${when(\n\t\t\t\t\tthis.hasAttribute('title'),\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"\n\t\t\t\t\t\t\tabsolute left-[calc(100%+8px)] top-1/2 -translate-y-1/2\n\t\t\t\t\t\t\tbg-surface-inverse text-surface-inverseOn\n\t\t\t\t\t\t\tpx-2 py-1 rounded-sm text-xs whitespace-nowrap\n\t\t\t\t\t\t\tz-1000 pointer-events-none opacity-0\n\t\t\t\t\t\t\thover:opacity-100 hover:translate-x-0\n\t\t\t\t\t\t\ttransition-all duration-150 ease-out\n\t\t\t\t\t\t\t-translate-x-1\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${this.getAttribute('title')}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-navigation-rail-item': SchmancyNavigationRailItem\n\t}\n}\n","import { $LitElement } from '@mixins/index'\r\nimport { html, PropertyValues } from 'lit'\r\nimport { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'\r\nimport { BehaviorSubject, fromEvent, takeUntil } from 'rxjs'\r\nimport { distinctUntilChanged, tap } from 'rxjs/operators'\r\nimport { SchmancyNavigationRailItem } from './navigation-rail-item'\r\n\r\nexport type NavigateEvent = CustomEvent<string>\r\n\r\nexport type NavigationRailMenuClickEvent = CustomEvent<void>\r\n\r\nexport type NavigationRailFabClickEvent = CustomEvent<void>\r\n\r\n\r\nexport type LabelVisibility = 'all' | 'selected' | 'none'\r\n\r\n/**\r\n * Material Design 3 Navigation Rail Component\r\n * @see https://m3.material.io/components/navigation-rail/overview\r\n *\r\n * `<schmancy-navigation-rail>` component\r\n *\r\n * A Material Design 3 vertical navigation component positioned on the left side of an application.\r\n * Navigation rails provide access to between 3-7 primary destinations with a compact footprint.\r\n * Automatically hides in fullscreen mode when triggered via schmancyTheme.next({ fullscreen: true }).\r\n *\r\n * @element schmancy-navigation-rail\r\n * @slot fab - Slot for a floating action button at the top\r\n * @slot menu - Slot for a menu icon or button below the FAB\r\n * @slot header - Custom header content slot\r\n * @slot footer - Custom footer content slot\r\n * @slot - Default slot for navigation rail items\r\n *\r\n * @fires navigate - When a navigation item is selected\r\n * @fires menu-click - When the menu button is clicked\r\n * @fires fab-click - When the FAB is clicked\r\n *\r\n * @csspart rail - The main rail container\r\n * @csspart header - The header section\r\n * @csspart nav - The navigation items container\r\n * @csspart footer - The footer section\r\n *\r\n * @example\r\n * <schmancy-navigation-rail activeIndex=\"0\">\r\n *   <schmancy-button slot=\"fab\" variant=\"filled\" aria-label=\"Compose\">\r\n *     <schmancy-icon>add</schmancy-icon>\r\n *   </schmancy-button>\r\n *   <schmancy-button slot=\"menu\" variant=\"text\" aria-label=\"Menu\">\r\n *     <schmancy-icon>menu</schmancy-icon>\r\n *   </schmancy-button>\r\n *   <schmancy-navigation-rail-item icon=\"home\" label=\"Home\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"search\" label=\"Search\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"favorite\" label=\"Favorites\" badge=\"3\"></schmancy-navigation-rail-item>\r\n *   <schmancy-navigation-rail-item icon=\"settings\" label=\"Settings\"></schmancy-navigation-rail-item>\r\n * </schmancy-navigation-rail>\r\n */\r\n@customElement('schmancy-navigation-rail')\r\nexport class SchmancyNavigationRail extends $LitElement() {\r\n\t// Observable state\r\n\tprivate activeIndex$ = new BehaviorSubject<number>(-1)\r\n\r\n\t// Properties\r\n\t/**\r\n\t * The currently active item index\r\n\t * @default -1\r\n\t */\r\n\t@property({ type: Number })\r\n\tget activeIndex() {\r\n\t\treturn this.activeIndex$.value\r\n\t}\r\n\tset activeIndex(value: number) {\r\n\t\tthis.activeIndex$.next(value)\r\n\t}\r\n\r\n\t/**\r\n\t * The currently active item value (for programmatic selection)\r\n\t */\r\n\t@property({ type: String })\r\n\tget activeValue() {\r\n\t\treturn this._activeValue\r\n\t}\r\n\tset activeValue(value: string) {\r\n\t\tthis._activeValue = value\r\n\t\tthis.updateActiveByValue(value)\r\n\t}\r\n\tprivate _activeValue = ''\r\n\r\n\t/**\r\n\t * When to show labels for navigation items\r\n\t * 'all' - Always show labels for all items\r\n\t * 'selected' - Only show label for selected item\r\n\t * 'none' - Never show labels\r\n\t * @default 'all'\r\n\t */\r\n\t@property({ type: String, attribute: 'label-visibility', reflect: true })\r\n\tlabelVisibility: LabelVisibility = 'all'\r\n\r\n\t/**\r\n\t * Alignment of navigation items\r\n\t * @default 'top'\r\n\t */\r\n\t@property({ type: String, reflect: true })\r\n\talignment: 'top' | 'center' | 'bottom' = 'top'\r\n\r\n\t/**\r\n\t * Show tooltips when labels are hidden\r\n\t * @default true\r\n\t */\r\n\t@property({ type: Boolean })\r\n\tshowTooltips = true\r\n\r\n\t/**\r\n\t * Enable keyboard navigation\r\n\t * @default true\r\n\t */\r\n\t@property({ type: Boolean })\r\n\tkeyboardNavigation = true\r\n\r\n\t/**\r\n\t * Whether the navigation rail is expanded\r\n\t * @default false\r\n\t */\r\n\t@property({ type: Boolean, reflect: true })\r\n\texpanded = false\r\n\r\n\r\n\t// State\r\n\t@state()\r\n\tprivate focusedIndex = -1\r\n\r\n\t@state()\r\n\tprivate hasHeaderContent = false\r\n\r\n\t@state()\r\n\tprivate isFullscreen = false\r\n\r\n\t// Queries\r\n\r\n\t@queryAssignedElements({ flatten: true })\r\n\tprivate allElements!: Element[]\r\n\r\n\tprivate get navigationItems(): SchmancyNavigationRailItem[] {\r\n\t\treturn this.allElements.filter(el => el.tagName === 'SCHMANCY-NAVIGATION-RAIL-ITEM') as SchmancyNavigationRailItem[]\r\n\t}\r\n\r\n\tconnectedCallback() {\r\n\t\tsuper.connectedCallback()\r\n\r\n\t\t// Set up keyboard navigation if enabled\r\n\t\tif (this.keyboardNavigation) {\r\n\t\t\tthis.addEventListener('keydown', this.handleKeyDown)\r\n\t\t}\r\n\r\n\t\t// Subscribe to active index changes with distinct values only\r\n\t\tthis.activeIndex$\r\n\t\t\t.pipe(\r\n\t\t\t\tdistinctUntilChanged(),\r\n\t\t\t\ttap(index => this.updateActiveStates(index)),\r\n\t\t\t\ttakeUntil(this.disconnecting),\r\n\t\t\t)\r\n\t\t\t.subscribe()\r\n\r\n\t\t// Listen to fullscreen events\r\n\t\tfromEvent(window, 'fullscreen').pipe(\r\n\t\t\ttap((event: Event) => {\r\n\t\t\t\tconst customEvent = event as CustomEvent\r\n\t\t\t\tthis.isFullscreen = customEvent.detail\r\n\t\t\t}),\r\n\t\t\ttakeUntil(this.disconnecting)\r\n\t\t).subscribe()\r\n\r\n\t\t// Listen for navigate events from child items\r\n\t\tthis.setupNavigateListener()\r\n\r\n\t\t// Set up label visibility\r\n\t\tthis.updateLabelVisibility()\r\n\r\n\t\t// Update ARIA attributes\r\n\t\tthis.setAttribute('role', 'navigation')\r\n\t\tthis.setAttribute('aria-label', 'Main navigation')\r\n\t}\r\n\r\n\tupdated(changedProperties: PropertyValues) {\r\n\t\tsuper.updated(changedProperties)\r\n\r\n\t\tif (changedProperties.has('labelVisibility')) {\r\n\t\t\tthis.updateLabelVisibility()\r\n\t\t}\r\n\r\n\t\tif (changedProperties.has('activeValue')) {\r\n\t\t\tthis.updateActiveByValue(this.activeValue)\r\n\t\t}\r\n\r\n\t\tif (changedProperties.has('expanded')) {\r\n\t\t\tthis.updateLabelVisibility()\r\n\t\t}\r\n\t}\r\n\r\n\tprivate updateActiveStates(index: number) {\r\n\t\tthis.navigationItems.forEach((item, i) => {\r\n\t\t\tconst isActive = i === index\r\n\t\t\titem.active = isActive\r\n\t\t\titem.setAttribute('aria-selected', String(isActive))\r\n\t\t\titem.setAttribute('tabindex', isActive ? '0' : '-1')\r\n\r\n\t\t\t// Update activeValue when index changes\r\n\t\t\tif (isActive) {\r\n\t\t\t\tthis._activeValue = item.value || item.label || ''\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\tprivate updateActiveByValue(value: string) {\r\n\t\tconst index = this.navigationItems.findIndex(item => item.getAttribute('value') === value || item.label === value)\r\n\t\tif (index >= 0) {\r\n\t\t\tthis.activeIndex = index\r\n\t\t}\r\n\t}\r\n\r\n\tprivate updateLabelVisibility() {\r\n\t\tthis.navigationItems.forEach((item, i) => {\r\n\t\t\tlet shouldShowLabel = false\r\n\r\n\t\t\t// M3 Spec: In expanded state, always show all labels\r\n\t\t\tif (this.expanded) {\r\n\t\t\t\tshouldShowLabel = true\r\n\t\t\t} else {\r\n\t\t\t\t// In collapsed state, respect labelVisibility setting\r\n\t\t\t\tshouldShowLabel =\r\n\t\t\t\t\tthis.labelVisibility === 'all' || (this.labelVisibility === 'selected' && i === this.activeIndex)\r\n\t\t\t}\r\n\r\n\t\t\titem.showLabel = shouldShowLabel\r\n\r\n\t\t\t// Add tooltips when labels are hidden (only in collapsed state)\r\n\t\t\tif (this.showTooltips && !shouldShowLabel && !this.expanded && item.label) {\r\n\t\t\t\titem.setAttribute('title', item.label)\r\n\t\t\t} else {\r\n\t\t\t\titem.removeAttribute('title')\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\t// Note: Hover-based label showing removed for M3 compliance\r\n\t// Labels are now controlled via labelVisibility property and expanded state\r\n\r\n\t/**\r\n\t * Programmatically expand the navigation rail\r\n\t */\r\n\texpand() {\r\n\t\tthis.expanded = true\r\n\t}\r\n\r\n\t/**\r\n\t * Programmatically collapse the navigation rail\r\n\t */\r\n\tcollapse() {\r\n\t\tthis.expanded = false\r\n\t}\r\n\r\n\t/**\r\n\t * Add a boat item to the navigation rail\r\n\t * @param config Configuration for the boat item\r\n\t * @returns The created or existing navigation rail item element\r\n\t */\r\n\tpublic addBoatItem(config: { id: string; title: string; icon?: string }) {\r\n\t\t// Check if item already exists\r\n\t\tconst existingItem = this.querySelector(`[value=\"${config.id}\"]`) as HTMLElement\r\n\t\tif (existingItem) {\r\n\t\t\t// Item already exists, just return it\r\n\t\t\treturn existingItem\r\n\t\t}\r\n\r\n\t\t// Create new item\r\n\t\tconst item = document.createElement('schmancy-navigation-rail-item')\r\n\t\titem.setAttribute('value', config.id)\r\n\t\titem.innerHTML = `\r\n\t\t\t<schmancy-icon slot=\"icon\">${config.icon || 'widgets'}</schmancy-icon>\r\n\t\t\t${config.title}\r\n\t\t`\r\n\t\t// Add to the rail before any footer content\r\n\t\tconst footer = this.querySelector('[slot=\"footer\"]')\r\n\t\tif (footer) {\r\n\t\t\tthis.insertBefore(item, footer)\r\n\t\t} else {\r\n\t\t\tthis.appendChild(item)\r\n\t\t}\r\n\t\treturn item\r\n\t}\r\n\r\n\t/**\r\n\t * Toggle the navigation rail between expanded and collapsed states\r\n\t */\r\n\ttoggle() {\r\n\t\tthis.expanded = !this.expanded\r\n\t}\r\n\r\n\r\n\tprivate handleKeyDown(event: KeyboardEvent) {\r\n\t\tconst items = this.navigationItems\r\n\t\tif (items.length === 0) return\r\n\r\n\t\tlet newIndex = this.focusedIndex >= 0 ? this.focusedIndex : this.activeIndex\r\n\r\n\t\tswitch (event.key) {\r\n\t\t\tcase 'ArrowDown':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = (newIndex + 1) % items.length\r\n\t\t\t\tbreak\r\n\t\t\tcase 'ArrowUp':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = newIndex <= 0 ? items.length - 1 : newIndex - 1\r\n\t\t\t\tbreak\r\n\t\t\tcase 'Home':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = 0\r\n\t\t\t\tbreak\r\n\t\t\tcase 'End':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tnewIndex = items.length - 1\r\n\t\t\t\tbreak\r\n\t\t\tcase 'Enter':\r\n\t\t\tcase ' ':\r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t\tif (newIndex >= 0) {\r\n\t\t\t\t\titems[newIndex].click()\r\n\t\t\t\t}\r\n\t\t\t\treturn\r\n\t\t\tdefault:\r\n\t\t\t\treturn\r\n\t\t}\r\n\r\n\t\tthis.focusedIndex = newIndex\r\n\t\titems[newIndex].focus()\r\n\t}\r\n\r\n\tprivate handleFabClick(event: Event) {\r\n\t\tevent.stopPropagation()\r\n\t\tthis.dispatchEvent(\r\n\t\t\tnew CustomEvent('fab-click', {\r\n\t\t\t\tbubbles: true,\r\n\t\t\t\tcomposed: true,\r\n\t\t\t}),\r\n\t\t)\r\n\t}\r\n\r\n\tprivate handleMenuClick(event: Event) {\r\n\t\tevent.stopPropagation()\r\n\t\tthis.dispatchEvent(\r\n\t\t\tnew CustomEvent('menu-click', {\r\n\t\t\t\tbubbles: true,\r\n\t\t\t\tcomposed: true,\r\n\t\t\t}),\r\n\t\t)\r\n\t}\r\n\r\n\tprotected render() {\r\n\t\t// Host-level classes for the navigation rail\r\n\t\tconst hostClasses = this.classMap({\r\n\t\t\t// Layout & Structure - Fixed width to prevent layout shift\r\n\t\t\t'flex flex-col': true,\r\n\t\t\t'h-full': true,\r\n\t\t\t'box-border relative overflow-visible': true,\r\n\t\t\t'z-10 hover:z-[100]': true, // Base z-index, elevated on hover for overlay\r\n\r\n\t\t\t// Width - collapses to 0 when fullscreen\r\n\t\t\t'w-20': !this.isFullscreen, // w-20 = 80px fixed width (M3 spec: 80dp)\r\n\t\t\t'w-0': this.isFullscreen, // Collapse width to 0 in fullscreen\r\n\r\n\t\t\t// Visibility and transition\r\n\t\t\t'transition-all duration-300 ease-emphasized': true,\r\n\t\t\t'opacity-100': !this.isFullscreen,\r\n\t\t\t'opacity-0 pointer-events-none': this.isFullscreen,\r\n\t\t\t'overflow-hidden': this.isFullscreen, // Hide overflow when collapsed\r\n\t\t})\r\n\r\n\t\t// Rail container - programmatically controlled width\r\n\t\tconst railClasses = this.classMap({\r\n\t\t\t// Layout & Structure\r\n\t\t\t'flex flex-col h-full': true,\r\n\t\t\t'box-border relative': true,\r\n\t\t\t'py-2': true,\r\n\r\n\r\n\t\t\t// M3 Colors & Theme\r\n\t\t\t'bg-container-lowest text-surface-on': true,\r\n\r\n\t\t\t// M3 Motion - smooth transitions for width and shadow\r\n\t\t\t'transition-all duration-300 ease-emphasized': true,\r\n\r\n\t\t\t// Collapsed state (default) - M3 standard 80px width\r\n\t\t\t'w-20': !this.expanded, // w-20 = 80px (M3 spec: 80dp)\r\n\t\t\t'px-3': !this.expanded, // px-3 = 12px (M3 spec: 12px to center 56px items)\r\n\r\n\t\t\t// Expanded state - M3 expanded width with shadow\r\n\t\t\t'w-60': this.expanded, // w-60 = 240px expanded width\r\n\t\t\t'px-4': this.expanded, // Larger padding when expanded\r\n\t\t\t'shadow-lg': this.expanded, // M3 elevation 3 shadow when expanded\r\n\t\t})\r\n\r\n\t\t// Header section classes - hidden when no content\r\n\t\tconst headerClasses = this.classMap({\r\n\t\t\t'flex flex-col items-center gap-1': true,\r\n\t\t\t'hidden': !this.hasHeaderContent,\r\n\t\t})\r\n\r\n\t\t// Navigation container classes with alignment\r\n\t\tconst navClasses = this.classMap({\r\n\t\t\t'flex-1 flex flex-col gap-3': true, // gap-3 = 12px (M3 spec: 12px item spacing)\r\n\t\t\t'min-h-0': true, // Allow flex shrinking and proper scroll container height calculation\r\n\t\t\t// Alignment variants\r\n\t\t\t'justify-start': this.alignment === 'top',\r\n\t\t\t'justify-center': this.alignment === 'center',\r\n\t\t\t'justify-end': this.alignment === 'bottom',\r\n\t\t})\r\n\r\n\t\t// Footer section classes\r\n\t\tconst footerClasses = this.classMap({\r\n\t\t\t'flex flex-col items-center gap-1 mt-auto pt-2': true,\r\n\t\t})\r\n\r\n\t\treturn html`\r\n\t\t\t<div\r\n\t\t\t\tclass=${hostClasses}\r\n\t\t\t>\r\n\t\t\t\t<div class=${railClasses} part=\"rail\">\r\n\t\t\t\t\t<div class=${headerClasses} part=\"header\">\r\n\t\t\t\t\t\t<slot name=\"fab\" @click=${this.handleFabClick} @slotchange=${this.handleHeaderSlotChange}></slot>\r\n\t\t\t\t\t\t<slot name=\"menu\" @click=${this.handleMenuClick} @slotchange=${this.handleHeaderSlotChange}></slot>\r\n\t\t\t\t\t\t<slot name=\"header\" @slotchange=${this.handleHeaderSlotChange}></slot>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<nav class=${navClasses} part=\"nav\" role=\"list\">\r\n\t\t\t\t\t\t<schmancy-scroll hide direction=\"vertical\">\r\n\t\t\t\t\t\t\t<slot @slotchange=${this.handleSlotChange}></slot>\r\n\t\t\t\t\t\t</schmancy-scroll>\r\n\t\t\t\t\t</nav>\r\n\r\n\t\t\t\t\t<div class=${footerClasses} part=\"footer\">\r\n\t\t\t\t\t\t<slot name=\"footer\"></slot>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t`\r\n\t}\r\n\r\n\tprivate setupNavigateListener() {\r\n\t\t// Listen for navigate events from child items\r\n\t\tthis.addEventListener('navigate', (e: Event) => {\r\n\t\t\tif (e instanceof CustomEvent) {\r\n\t\t\t\tconst value = e.detail\r\n\t\t\t\t// Find the item that dispatched the event and update active state\r\n\t\t\t\tconst itemIndex = this.navigationItems.findIndex(item => item.value === value || item.label === value)\r\n\t\t\t\tif (itemIndex >= 0) {\r\n\t\t\t\t\tthis.activeIndex = itemIndex\r\n\t\t\t\t\tthis._activeValue = value\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n\r\n\tprivate handleHeaderSlotChange() {\r\n\t\t// Check if any header slot has content\r\n\t\tconst headerDiv = this.shadowRoot?.querySelector('[part=\"header\"]')\r\n\t\tif (headerDiv) {\r\n\t\t\tconst allSlots = headerDiv.querySelectorAll('slot')\r\n\t\t\tthis.hasHeaderContent = Array.from(allSlots).some(s =>\r\n\t\t\t\ts.assignedNodes({ flatten: true }).length > 0\r\n\t\t\t)\r\n\t\t}\r\n\t}\r\n\r\n\tprivate handleSlotChange() {\r\n\t\t// Update items when slot content changes\r\n\t\tthis.updateLabelVisibility()\r\n\t\tthis.updateActiveStates(this.activeIndex)\r\n\r\n\t\t// Set ARIA attributes on items\r\n\t\tthis.navigationItems.forEach((item, index) => {\r\n\t\t\titem.setAttribute('role', 'listitem')\r\n\t\t\tif (!item.hasAttribute('tabindex')) {\r\n\t\t\t\titem.setAttribute('tabindex', index === this.activeIndex ? '0' : '-1')\r\n\t\t\t}\r\n\t\t})\r\n\t}\r\n}\r\n\r\ndeclare global {\r\n\tinterface HTMLElementTagNameMap {\r\n\t\t'schmancy-navigation-rail': SchmancyNavigationRail\r\n\t}\r\n}\r\n"],"mappings":"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"}

package/dist/navigation-rail.js

@@ -1,5 +1,5 @@
-import { i as e } from "./tailwind.mixin-BCJOOX1_.js";
-import { t } from "./litElement.mixin-6jJYHCrZ.js";
+import { t as e } from "./decorate-D_utPUsC.js";
+import { t } from "./litElement.mixin-CncaUoxz.js";
 import "./mixins.js";
 import { BehaviorSubject as n, fromEvent as r, merge as i, takeUntil as a } from "rxjs";
 import { delay as o, distinctUntilChanged as s, tap as c } from "rxjs/operators";

package/dist/notification-DGpv8g2H.js

@@ -0,0 +1,304 @@
+import { t as e } from "./decorate-D_utPUsC.js";
+import { t } from "./litElement.mixin-CncaUoxz.js";
+import "./mixins.js";
+import { t as n } from "./audio-C7TzWI8M.js";
+import "./progress-CE1Pk2hi.js";
+import { BehaviorSubject as r, NEVER as i, catchError as a, finalize as o, interval as s, tap as c, timer as l } from "rxjs";
+import { distinctUntilChanged as u, map as d, switchMap as f, takeUntil as p, tap as m } from "rxjs/operators";
+import { customElement as h, property as g, state as _ } from "lit/decorators.js";
+import { html as v } from "lit";
+var y = class extends t(":host{display:block}.notification{background:var(--schmancy-sys-color-surface-container);border-radius:var(--schmancy-sys-shape-corner-extraLarge,16px);color:var(--schmancy-sys-color-surface-on);--notification-glow-color:var(--schmancy-sys-color-primary-default);max-width:320px;box-shadow:0 4px 24px -6px color-mix(in srgb, var(--notification-glow-color) 18%, transparent);border-left:2px solid color-mix(in srgb, var(--notification-glow-color) 50%, transparent);align-items:flex-start;gap:10px;padding:12px 32px 12px 12px;transition:box-shadow .3s,transform .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;overflow:hidden}.notification.info{--notification-glow-color:var(--schmancy-sys-color-primary-default)}.notification.success{--notification-glow-color:var(--schmancy-sys-color-success-default)}.notification.warning{--notification-glow-color:var(--schmancy-sys-color-warning-default)}.notification.error{--notification-glow-color:var(--schmancy-sys-color-error-default)}.notification.hovered{box-shadow:0 8px 32px -4px color-mix(in srgb, var(--notification-glow-color) 28%, transparent);transform:translateY(-2px)}@media (prefers-reduced-motion:reduce){.notification{transition:box-shadow .2s}.notification.hovered{transform:none}}.emoji{flex-shrink:0;margin-top:1px;font-size:20px;line-height:1}.content{flex:1;min-width:0}.title{letter-spacing:.01em;margin-bottom:2px;font-size:13px;font-weight:500;line-height:1.4}.info .title{color:var(--schmancy-sys-color-primary-default)}.success .title{color:var(--schmancy-sys-color-success-default)}.warning .title{color:var(--schmancy-sys-color-tertiary-default)}.error .title{color:var(--schmancy-sys-color-error-default)}.message{opacity:.75;letter-spacing:.01em;font-size:13px;line-height:1.4}.close{color:var(--schmancy-sys-color-surface-onVariant);cursor:pointer;opacity:.4;border-radius:var(--schmancy-sys-shape-corner-full,50%);background:0 0;border:none;padding:4px 6px;font-size:16px;font-weight:300;line-height:1;transition:opacity .2s;position:absolute;top:8px;right:6px}.close:hover{opacity:.8}.close:focus-visible{opacity:1;box-shadow:0 0 0 2px var(--schmancy-sys-color-primary-default), 0 0 8px -2px color-mix(in srgb, var(--schmancy-sys-color-primary-default) 25%, transparent);outline:none}.progress{position:absolute;bottom:0;left:0;right:0}") {
+	constructor(...e) {
+		super(...e), this.title = "", this.message = "", this.type = "info", this.closable = !0, this.duration = 5e3, this.id = `notification-${Date.now()}-${Math.floor(1e4 * Math.random())}`, this.playSound = !0, this.showProgress = !1, this.startPosition = {
+			x: 0,
+			y: 0
+		}, this._visible = !0, this._progress = 100, this._hovered = !1, this._closing = !1, this.paused$ = new r(!1), this.startTime = 0, this.pausedAt = 0, this.elapsedBeforePause = 0;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.style.position = "fixed", this.style.top = "16px", this.style.right = "16px", this.style.zIndex = "10001", this.style.opacity = "0", this.updateComplete.then(() => {
+			this.animateIn();
+		}), this.duration > 0 && (this.setupAutoClose(), this.setupProgressUpdates()), this.playSound && this._playSound();
+	}
+	async animateIn() {
+		let e = this.getBoundingClientRect(), t = e.left + e.width / 2, n = e.top + e.height / 2, r = function(e, t, n = "up", r = .3) {
+			let i = (e.x + t.x) / 2, a = (e.y + t.y) / 2, o = Math.sqrt((t.x - e.x) ** 2 + (t.y - e.y) ** 2), s = Math.min(o * r, 150);
+			return {
+				x: i,
+				y: n === "up" ? a - s : a + s
+			};
+		}(this.startPosition, {
+			x: t,
+			y: n
+		}, "up", .3);
+		await this.animate([
+			{
+				transform: `translate(${this.startPosition.x - t}px, ${this.startPosition.y - n}px) scale(0.1)`,
+				opacity: 0
+			},
+			{
+				transform: `translate(${r.x - t}px, ${r.y - n}px) scale(0.6)`,
+				opacity: .9,
+				offset: .5
+			},
+			{
+				transform: "translate(0, 0) scale(1)",
+				opacity: 1
+			}
+		], {
+			duration: 400,
+			easing: "cubic-bezier(0.34, 1.2, 0.64, 1)",
+			fill: "forwards"
+		}).finished;
+	}
+	setupAutoClose() {
+		this.duration <= 0 || (this.startTime = Date.now(), this.elapsedBeforePause = 0, this.paused$.pipe(f((e) => {
+			if (e) return this.pausedAt = Date.now(), this.elapsedBeforePause += this.pausedAt - this.startTime, i;
+			{
+				this.startTime = Date.now();
+				let e = this.duration - this.elapsedBeforePause;
+				return e <= 0 ? (this.close(), i) : l(e);
+			}
+		}), p(this.disconnecting)).subscribe(() => this.close()));
+	}
+	setupProgressUpdates() {
+		this.duration <= 0 || s(16).pipe(f(() => this.paused$.pipe(d((e) => {
+			if (e) return this._progress;
+			let t = this.elapsedBeforePause + (Date.now() - this.startTime);
+			return Math.max(0, this.duration - t) / this.duration * 100;
+		}))), u(), m((e) => {
+			this._progress = e;
+		}), p(this.disconnecting)).subscribe();
+	}
+	_playSound() {
+		this.dispatchEvent(new CustomEvent("playsound", {
+			detail: { type: this.type },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleMouseEnter() {
+		this._hovered = !0, this.paused$.next(!0);
+	}
+	_handleMouseLeave() {
+		this._hovered = !1, this.paused$.next(!1);
+	}
+	async close() {
+		this._closing || (this._closing = !0, this._visible = !1, await this.animate([{
+			transform: "translate(0, 0) scale(1)",
+			opacity: 1
+		}, {
+			transform: "translate(0, -20px) scale(0.8)",
+			opacity: 0
+		}], {
+			duration: 200,
+			easing: "cubic-bezier(0.4, 0, 1, 1)",
+			fill: "forwards"
+		}).finished, this.dispatchEvent(new CustomEvent("close", {
+			detail: { id: this.id },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	_getEmoji() {
+		switch (this.type) {
+			case "success": return "✅";
+			case "warning": return "⚠️";
+			case "error": return "❌";
+			default: return "💡";
+		}
+	}
+	render() {
+		return !this._visible && this._closing ? v`` : v`
+			<div
+				class="notification ${this.type} ${this._closing ? "closing" : ""} ${this._hovered ? "hovered" : ""}"
+				role="alert"
+				@mouseenter=${this._handleMouseEnter}
+				@mouseleave=${this._handleMouseLeave}
+			>
+				<span class="emoji">${this._getEmoji()}</span>
+				<div class="content">
+					${this.title ? v`<div class="title">${this.title}</div>` : ""}
+					<div class="message">${this.message}</div>
+				</div>
+				${this.closable ? v`
+							<button class="close" aria-label="Close notification" @click=${this.close}>x</button>
+						` : ""}
+				${this.showProgress || this.duration > 0 ? v`<schmancy-progress
+						class="progress"
+						size="xs"
+						.value=${this._progress}
+						?indeterminate=${this.showProgress && this.duration === 0}
+					></schmancy-progress>` : ""}
+			</div>
+		`;
+	}
+};
+e([g({ type: String })], y.prototype, "title", void 0), e([g({ type: String })], y.prototype, "message", void 0), e([g({ type: String })], y.prototype, "type", void 0), e([g({ type: Boolean })], y.prototype, "closable", void 0), e([g({ type: Number })], y.prototype, "duration", void 0), e([g({ type: String })], y.prototype, "id", void 0), e([g({ type: Boolean })], y.prototype, "playSound", void 0), e([g({ type: Boolean })], y.prototype, "showProgress", void 0), e([g({ type: Object })], y.prototype, "startPosition", void 0), e([_()], y.prototype, "_visible", void 0), e([_()], y.prototype, "_progress", void 0), e([_()], y.prototype, "_hovered", void 0), e([_()], y.prototype, "_closing", void 0);
+var b = y = e([h("sch-notification")], y), x = {
+	info: "curious",
+	success: "content",
+	warning: "anxious",
+	error: "disappointed"
+}, S = {
+	x: window.innerWidth - 100,
+	y: 50
+};
+typeof window < "u" && window.addEventListener("mousedown", (e) => {
+	S = {
+		x: e.clientX,
+		y: e.clientY
+	};
+}, {
+	capture: !0,
+	passive: !0
+});
+var C = null, w = class e {
+	static {
+		this.DEFAULT_OPTIONS = {
+			duration: 1e3,
+			closable: !0,
+			playSound: !0
+		};
+	}
+	static {
+		this.TYPE_DURATIONS = {
+			success: 1500,
+			info: 2e3,
+			warning: 2500,
+			error: 2500
+		};
+	}
+	constructor() {
+		this.notificationStack = [], this.audioVolume = .1, n.setVolume(this.audioVolume);
+	}
+	static getInstance() {
+		return e.instance ||= new e(), e.instance;
+	}
+	notify(t) {
+		let r = {
+			...e.DEFAULT_OPTIONS,
+			...t,
+			duration: t.duration ?? e.DEFAULT_OPTIONS.duration
+		}, i = r.id || `notification-${Date.now()}-${Math.floor(1e4 * Math.random())}`;
+		this.notificationStack.push(i), C &&= (C.remove(), null);
+		let a = document.createElement("sch-notification");
+		return a.id = i, a.title = r.title || "", a.message = r.message, a.type = r.type || "info", a.duration = r.duration ?? 1e3, a.closable = !1 !== r.closable, a.playSound = !1, a.showProgress = r.showProgress || !1, a.startPosition = { ...S }, !1 !== r.playSound && n.play(x[a.type]), a.addEventListener("close", () => {
+			let e = this.notificationStack.indexOf(i);
+			e > -1 && this.notificationStack.splice(e, 1), a.remove(), C === a && (C = null);
+		}), document.body.appendChild(a), C = a, i;
+	}
+	dismiss(e) {
+		let t;
+		if (e) {
+			let n = this.notificationStack.indexOf(e);
+			n > -1 && (this.notificationStack.splice(n, 1), t = e);
+		} else t = this.notificationStack.pop();
+		t && C && C.id === t && C.close();
+	}
+	update(e, t) {
+		C && C.id === e && (t.title !== void 0 && (C.title = t.title), t.message !== void 0 && (C.message = t.message), t.type !== void 0 && (C.type = t.type));
+	}
+	info(t, n = {}) {
+		return this.notify({
+			message: t ?? "",
+			type: "info",
+			duration: t ? n.duration ?? e.TYPE_DURATIONS.info : 1,
+			...n
+		});
+	}
+	success(t, n = {}) {
+		return this.notify({
+			message: t ?? "",
+			type: "success",
+			duration: t ? n.duration ?? e.TYPE_DURATIONS.success : 1,
+			...n
+		});
+	}
+	warning(t, n = {}) {
+		return this.notify({
+			message: t ?? "",
+			type: "warning",
+			duration: t ? n.duration ?? e.TYPE_DURATIONS.warning : 1,
+			...n
+		});
+	}
+	error(t, n = {}) {
+		return this.notify({
+			message: t ?? "",
+			type: "error",
+			duration: t ? n.duration ?? e.TYPE_DURATIONS.error : 1,
+			...n
+		});
+	}
+	customDuration(e, t, n = {}) {
+		return this.notify({
+			message: e,
+			duration: t,
+			...n
+		});
+	}
+	persistent(e, t = {}) {
+		return this.notify({
+			message: e,
+			duration: 0,
+			...t
+		});
+	}
+}, T = {
+	show: (e) => w.getInstance().notify(e),
+	info: (e, t = {}) => w.getInstance().info(e, t),
+	success: (e, t = {}) => w.getInstance().success(e, t),
+	warning: (e, t = {}) => w.getInstance().warning(e, t),
+	error: (e, t = {}) => w.getInstance().error(e, t),
+	customDuration: (e, t, n = {}) => w.getInstance().customDuration(e, t, n),
+	persistent: (e, t = {}) => w.getInstance().persistent(e, t),
+	dismiss: (e) => w.getInstance().dismiss(e),
+	update: (e, t) => w.getInstance().update(e, t)
+};
+function E(e) {
+	return (t) => {
+		let n;
+		return e.loadingMessage && (n = T.show({
+			message: e.loadingMessage,
+			type: e.loadingType || "info",
+			duration: 0,
+			showProgress: !0
+		})), t.pipe(c((t) => {
+			if (n && typeof t == "object" && t) {
+				let r;
+				if ("progress" in t && typeof t.progress == "number") r = t.progress;
+				else if ("loaded" in t && "total" in t) {
+					let e = t.loaded, n = t.total;
+					typeof e == "number" && typeof n == "number" && n > 0 && (r = e / n * 100);
+				}
+				r !== void 0 && T.update?.(n, { message: `${e.loadingMessage} (${Math.round(r)}%)` });
+			}
+			typeof t == "object" && t && ("progress" in t || "loaded" in t && "total" in t) || (n && !1 !== e.autoDismissLoading && (T.dismiss(n), n = void 0), e.successMessage && T.show({
+				message: e.successMessage,
+				type: e.successType || "success",
+				duration: e.successDuration ?? 2e3
+			}));
+		}), a((t) => {
+			if (n && !1 !== e.autoDismissLoading && (T.dismiss(n), n = void 0), e.errorMessage) {
+				let n = typeof e.errorMessage == "function" ? e.errorMessage(t) : e.errorMessage;
+				T.show({
+					message: n,
+					type: e.errorType || "error",
+					duration: e.errorDuration ?? 3e3
+				});
+			}
+			throw t;
+		}), o(() => {
+			n && !1 !== e.autoDismissLoading && T.dismiss(n);
+		}));
+	};
+}
+function D(e, t, n) {
+	return E({
+		loadingMessage: e,
+		successMessage: t || void 0,
+		errorMessage: n || void 0,
+		autoDismissLoading: !0
+	});
+}
+export { b as i, D as n, T as r, E as t };