npm - atomicuilibrary - Versions diffs - 0.1.0 → 0.1.3 - Mend

atomicuilibrary 0.1.0 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (618) hide show

package/dist/components/loader.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as i,HTMLElement as e,createEvent as a,h as r,transformTag as t}from"@stencil/core/internal/client";const o=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.uiShow=a(this,"uiShow",7),this.uiHide=a(this,"uiHide",7)}get element(){return this}ariaLabel="Loading...";ariaLive="polite";backdropBlur=!1;enableBlur=!1;color="primary";fullscreen=!1;label;description;labelPosition="bottom";overlay=!1;overlayOpacity=.5;overlayBackground;size="md";speed="normal";thickness=3;type="spinner";visible=!0;variant="standard";value;predictive=!1;messages;messageInterval=2500;image;rainText;rainColumns=5;trapFocus=!1;status="loading";activeLabel;currentProgress=0;uiShow;uiHide;messageTimer;predictiveTimer;activeMessageIndex=0;parsedMessages=[];originalFocusedElement=null;focusableElements=[];canvasElement;canvasAnimationId;canvasColumnsDrops=[];handleVisibilityChange(i){i?(this.uiShow.emit(),this.startTimers(),this.trapFocus&&this.setupFocusTrap()):(this.uiHide.emit(),this.stopTimers(),this.releaseFocusTrap())}parseMessagesProp(){if(this.messages){if("string"==typeof this.messages)try{this.parsedMessages=JSON.parse(this.messages)}catch{this.parsedMessages=this.messages.includes(",")?this.messages.split(",").map((i=>i.trim())):[this.messages]}else Array.isArray(this.messages)&&(this.parsedMessages=this.messages);this.activeMessageIndex=0,this.updateActiveLabel()}else this.parsedMessages=[]}handleStatusChange(i){"success"===i&&this.predictive&&(clearInterval(this.predictiveTimer),this.predictiveTimer=setInterval((()=>{this.currentProgress<100?this.currentProgress=Math.min(100,this.currentProgress+5):clearInterval(this.predictiveTimer)}),30))}componentWillLoad(){this.parseMessagesProp(),this.activeLabel=this.label,void 0!==this.value&&(this.currentProgress=this.value)}componentDidLoad(){this.visible&&(this.uiShow.emit(),this.startTimers(),this.trapFocus&&this.setupFocusTrap(),"raining-letters"===this.type&&this.initMatrixRain())}componentDidUpdate(){"raining-letters"!==this.type\|\|this.canvasAnimationId?"raining-letters"!==this.type&&this.canvasAnimationId&&this.stopMatrixRain():this.initMatrixRain()}disconnectedCallback(){this.stopTimers(),this.releaseFocusTrap(),this.stopMatrixRain()}startTimers(){this.stopTimers(),this.parsedMessages.length>0&&(this.updateActiveLabel(),this.messageTimer=setInterval((()=>{this.activeMessageIndex=(this.activeMessageIndex+1)%this.parsedMessages.length,this.updateActiveLabel()}),this.messageInterval)),this.predictive&&"loading"===this.status&&(this.currentProgress=0,this.predictiveTimer=setInterval((()=>{if(this.currentProgress<95){const i=Math.max(.1,.05(95-this.currentProgress)Math.random());this.currentProgress=parseFloat((this.currentProgress+i).toFixed(1))}}),350))}stopTimers(){this.messageTimer&&(clearInterval(this.messageTimer),this.messageTimer=void 0),this.predictiveTimer&&(clearInterval(this.predictiveTimer),this.predictiveTimer=void 0)}updateActiveLabel(){this.activeLabel=this.parsedMessages.length>0&&this.activeMessageIndex<this.parsedMessages.length?this.parsedMessages[this.activeMessageIndex]:this.label}setupFocusTrap(){this.originalFocusedElement=document.activeElement,setTimeout((()=>{this.focusableElements=this.getFocusableElements(),this.focusableElements.length>0&&this.focusableElements[0].focus()}),50),document.addEventListener("keydown",this.handleKeyDown)}releaseFocusTrap(){document.removeEventListener("keydown",this.handleKeyDown),this.originalFocusedElement&&(this.originalFocusedElement.focus(),this.originalFocusedElement=null)}getFocusableElements(){return this.element.shadowRoot?Array.from(this.element.shadowRoot.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]')):[]}handleKeyDown=i=>{if(this.visible&&this.trapFocus&&"Tab"===i.key){if(this.focusableElements=this.getFocusableElements(),0===this.focusableElements.length)return void i.preventDefault();const e=this.focusableElements[0],a=this.focusableElements[this.focusableElements.length-1],r=this.element.shadowRoot?.activeElement;i.shiftKey?r!==e&&r!==document.body\|\|(a.focus(),i.preventDefault()):r===a&&(e.focus(),i.preventDefault())}};initMatrixRain(){if(!this.canvasElement)return;this.stopMatrixRain();const i=this.canvasElement,e=i.getContext("2d");if(!e)return;i.width=160,i.height=120;const a=this.rainText\|\|"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",r=Math.max(3,this.rainColumns),t=Math.floor(160/r);this.canvasColumnsDrops=[];for(let i=0;i<r;i++)this.canvasColumnsDrops.push(-10Math.random());const o=()=>{e.fillStyle="rgba(255, 255, 255, 0.15)",e.fillRect(0,0,160,120);let i="#10b981";this.color&&!["primary","secondary","success","danger","warning","info"].includes(this.color)?i=this.color:"primary"===this.color?i="#3b82f6":"danger"===this.color?i="#ef4444":"success"===this.color?i="#10b981":"warning"===this.color?i="#f59e0b":"info"===this.color&&(i="#06b6d4"),e.fillStyle=i,e.font=`${t}px monospace`;for(let i=0;i<this.canvasColumnsDrops.length;i++){const r=a[Math.floor(Math.random()a.length)],o=this.canvasColumnsDrops[i]t;e.fillText(r,it+t/4,o),o>120&&Math.random()>.96?this.canvasColumnsDrops[i]=0:this.canvasColumnsDrops[i]+=.45}this.canvasAnimationId=requestAnimationFrame(o)};o()}stopMatrixRain(){this.canvasAnimationId&&(cancelAnimationFrame(this.canvasAnimationId),this.canvasAnimationId=void 0)}getStyles(){const i={};return this.color&&(this.color.startsWith("#")\|\|this.color.startsWith("rgb")\|\|this.color.includes("gradient"))&&(i["--loader-color"]=this.color),this.size&&!["3xs","2xs","xs","small","md","large","xl","2xl","3xl","jumbo"].includes(this.size)&&(i["--loader-size"]=this.size),(this.overlay\|\|this.fullscreen)&&(i["--overlay-opacity"]=`${this.overlayOpacity}`,this.overlayBackground&&(i["--overlay-background"]=this.overlayBackground)),this.speed&&(i["--loader-speed"]={slow:"2s",normal:"1s",fast:"0.5s"}[this.speed]\|\|"1s"),this.thickness&&(i["--loader-thickness"]=`${this.thickness}px`),i}render(){if(!this.visible)return null;const i=this.overlay\|\|this.fullscreen,e=["3xs","2xs","xs","small","md","large","xl","2xl","3xl","jumbo"].includes(this.size),a=["primary","secondary","success","danger","warning","info"].includes(this.color),t={"loader-wrapper":!0,"loader-overlay":i,"loader-fullscreen":this.fullscreen,"loader-blur":this.backdropBlur\|\|this.enableBlur,[`loader-variant-${this.variant}`]:!0},o={"loader-container":!0,[`loader-size-${this.size}`]:e,[`loader-color-${this.color}`]:a,[`loader-label-${this.labelPosition}`]:!0,"loader-status-success":"success"===this.status,"loader-status-error":"error"===this.status};return r("div",{class:t,style:this.getStyles(),role:i?"dialog":"status","aria-modal":i?"true":void 0,"aria-label":this.ariaLabel,"aria-live":this.ariaLive},i&&this.trapFocus&&r("div",{tabIndex:0,class:"focus-trap-sentinel"}),r("div",{class:o},r("div",{class:"loader-visual"},"success"===this.status?this.renderStatusIcon("success"):"error"===this.status?this.renderStatusIcon("error"):this.renderAnimation()),(this.activeLabel\|\|this.description\|\|this.predictive)&&r("div",{class:"loader-text-block"},this.activeLabel&&r("span",{class:"loader-label-text"},this.activeLabel),this.description&&r("span",{class:"loader-desc-text"},this.description),this.predictive&&r("div",{class:"loader-predictive-bar"},r("div",{class:"loader-predictive-fill",style:{width:`${this.currentProgress}%`}}),r("span",{class:"loader-predictive-percentage"},Math.round(this.currentProgress),"%")))),i&&this.trapFocus&&r("div",{tabIndex:0,class:"focus-trap-sentinel"}))}renderStatusIcon(i){return"success"===i?r("div",{class:"status-icon-wrapper success"},r("svg",{viewBox:"0 0 52 52",class:"status-svg"},r("circle",{cx:"26",cy:"26",r:"25",fill:"none",class:"status-circle-bg"}),r("path",{fill:"none",d:"M14.1 27.2l7.1 7.2 16.7-16.8",class:"status-check-path"}))):r("div",{class:"status-icon-wrapper error"},r("svg",{viewBox:"0 0 52 52",class:"status-svg"},r("circle",{cx:"26",cy:"26",r:"25",fill:"none",class:"status-circle-bg"}),r("path",{fill:"none",d:"M16 16l20 20M36 16L16 36",class:"status-cross-path"})))}renderAnimation(){switch(this.type){case"dots":return r("div",{class:"anim-dots"},r("div",null),r("div",null),r("div",null));case"bar":return r("div",{class:"anim-bar"},r("div",void 0!==this.value?{class:"bar-determinate",style:{width:`${this.value}%`}}:{class:"bar-indeterminate"}));case"pulse":return r("div",{class:"anim-pulse"});case"ring":return r("div",{class:"anim-ring"});case"bounce":return r("div",{class:"anim-bounce"},r("div",null),r("div",null));case"grid":return r("div",{class:"anim-grid"},r("div",null),r("div",null),r("div",null),r("div",null),r("div",null),r("div",null),r("div",null),r("div",null),r("div",null));case"wave":return r("div",{class:"anim-wave"},r("div",null),r("div",null),r("div",null),r("div",null),r("div",null));case"dual-ring":return r("div",{class:"anim-dual-ring"});case"heartbeat":return r("div",{class:"anim-heartbeat"},r("svg",{viewBox:"0 0 32 32",class:"heart-svg"},r("path",{d:"M16 28.5S2 18.2 2 10.5a6.5 6.5 0 0 1 11-4.8 6.5 6.5 0 0 1 11 4.8c0 7.7-14 18-14 18z"})));case"clock":return r("div",{class:"anim-clock"},r("div",{class:"clock-hour"}),r("div",{class:"clock-minute"}));case"raining-letters":return r("div",{class:"anim-raining-letters"},r("canvas",{ref:i=>this.canvasElement=i}));case"ripple":return r("div",{class:"anim-ripple"},r("div",null),r("div",null),r("div",null));case"infinite":return r("div",{class:"anim-infinite"},r("svg",{viewBox:"0 0 100 50"},r("path",{d:"M30 15c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15zm40 0c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z",class:"infinity-bg"}),r("path",{d:"M30 15c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15zm40 0c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z",class:"infinity-loop"})));case"wifi":return r("div",{class:"anim-wifi"},r("div",{class:"wifi-dot"}),r("div",{class:"wifi-arc-1"}),r("div",{class:"wifi-arc-2"}),r("div",{class:"wifi-arc-3"}));case"rainbow":return r("div",{class:"anim-rainbow"});case"square-shuffle":return r("div",{class:"anim-square-shuffle"},r("div",null),r("div",null),r("div",null),r("div",null));case"dna-helix":return r("div",{class:"anim-dna-helix"},Array.from({length:12}).map(((i,e)=>r("div",{class:"dna-strand",style:{"--i":`${e}`}},r("div",{class:"dna-dot dot-top"}),r("div",{class:"dna-bar"}),r("div",{class:"dna-dot dot-bottom"})))));case"atom-sphere":return r("div",{class:"anim-atom-sphere"},r("div",{class:"atom-nucleus"}),r("div",{class:"atom-orbit orbit-1"},r("div",{class:"atom-electron"})),r("div",{class:"atom-orbit orbit-2"},r("div",{class:"atom-electron"})),r("div",{class:"atom-orbit orbit-3"},r("div",{class:"atom-electron"})));case"staircase":return r("div",{class:"anim-staircase"},r("div",{class:"stair-climber"}),r("div",{class:"stairs"},r("div",null),r("div",null),r("div",null),r("div",null)));case"radar":return r("div",{class:"anim-radar"},r("div",{class:"radar-scanner"}),r("div",{class:"radar-ring"}),r("div",{class:"radar-ring-mid"}),r("div",{class:"radar-dot"}));case"liquid-drop":return r("div",{class:"anim-liquid-drop"},r("div",{class:"drop-nozzle"}),r("div",{class:"drop-droplet"}),r("div",{class:"drop-surface"}));case"neon-path":return r("div",{class:"anim-neon-path"},r("div",null));case"neuro-pulse":return r("div",{class:"anim-neuro-pulse"},r("svg",{viewBox:"0 0 100 100",class:"neuro-svg"},r("path",{d:"M50 50 L20 20 M50 50 L80 20 M50 50 L50 80 M50 50 L20 70 M50 50 L80 70",class:"neuro-branch"}),r("circle",{cx:"50",cy:"50",r:"8",class:"neuro-center"}),r("circle",{cx:"20",cy:"20",r:"4",class:"neuro-terminal"}),r("circle",{cx:"80",cy:"20",r:"4",class:"neuro-terminal"}),r("circle",{cx:"50",cy:"80",r:"4",class:"neuro-terminal"}),r("circle",{cx:"20",cy:"70",r:"4",class:"neuro-terminal"}),r("circle",{cx:"80",cy:"70",r:"4",class:"neuro-terminal"}),r("circle",{cx:"50",cy:"50",class:"neuro-active-pulse pulse-1"}),r("circle",{cx:"50",cy:"50",class:"neuro-active-pulse pulse-2"})));case"vortex-ring":return r("div",{class:"anim-vortex-ring"},r("div",null),r("div",null),r("div",null));case"cube-fold":return r("div",{class:"anim-cube-fold"},r("div",{class:"fold-cube cube-1"}),r("div",{class:"fold-cube cube-2"}),r("div",{class:"fold-cube cube-4"}),r("div",{class:"fold-cube cube-3"}));case"breathing":return r("div",{class:"anim-breathing"});case"glitch-text":return r("div",{class:"anim-glitch-text","data-text":"LOADING"},"LOADING");case"plc-module":return r("div",{class:"anim-plc-module"},r("div",{class:"plc-header"},"CPU"),r("div",{class:"plc-leds"},r("div",{class:"plc-row"},r("span",{class:"led-label"},"RUN"),r("span",{class:"plc-led led-green blinking"})),r("div",{class:"plc-row"},r("span",{class:"led-label"},"ERR"),r("span",{class:"plc-led led-red off"})),r("div",{class:"plc-row"},r("span",{class:"led-label"},"COM"),r("span",{class:"plc-led led-amber flicker"})),r("div",{class:"plc-row"},r("span",{class:"led-label"},"I/O"),r("span",{class:"plc-led led-green flicker-delayed"}))));case"m580-signal":return r("div",{class:"anim-m580-signal"},r("div",null),r("div",null),r("div",null),r("div",null),r("div",null));case"circuit-board":return r("div",{class:"anim-circuit-board"},r("svg",{viewBox:"0 0 100 100"},r("path",{d:"M10 50 L40 50 L50 40 L90 40 M40 50 L50 60 L80 60",class:"circuit-path",fill:"none"}),r("circle",{cx:"10",cy:"50",r:"3",class:"circuit-node"}),r("circle",{cx:"90",cy:"40",r:"3",class:"circuit-node"}),r("circle",{cx:"80",cy:"60",r:"3",class:"circuit-node"}),r("circle",{cx:"0",cy:"0",r:"2.5",class:"circuit-pulse pulse-a"},r("animateMotion",{dur:"2s",repeatCount:"indefinite",path:"M10 50 L40 50 L50 40 L90 40"})),r("circle",{cx:"0",cy:"0",r:"2.5",class:"circuit-pulse pulse-b"},r("animateMotion",{dur:"2s",repeatCount:"indefinite",path:"M40 50 L50 60 L80 60",begin:"0.5s"}))));case"callout-rotate":return r("div",{class:"anim-callout-rotate"},r("div",{class:"callout-ring"}),r("div",{class:"callout-arrow"}));case"infinite-roller":return r("div",{class:"anim-infinite-roller"},r("div",null),r("div",null),r("div",null));case"image":return r("div",{class:"anim-image"},r("img",{src:this.image,alt:"loading-graphic"}));default:return r("div",{class:"anim-spinner"})}}static get watchers(){return{visible:[{handleVisibilityChange:0}],messages:[{parseMessagesProp:0}],status:[{handleStatusChange:0}]}}static get style(){return'.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:inline-block;box-sizing:border-box;--ui-primary-color:#3b82f6;--ui-secondary-color:#64748b;--ui-success-color:#10b981;--ui-danger-color:#ef4444;--ui-warning-color:#f59e0b;--ui-info-color:#06b6d4;--loader-color:var(--ui-primary-color);--loader-size:40px;--loader-speed:1s;--loader-thickness:3px;--overlay-opacity:0.5;--overlay-background:rgba(255, 255, 255, var(--overlay-opacity))}.loader-wrapper{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;transition:opacity 0.3s ease}.loader-wrapper.loader-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1000;background:var(--overlay-background);display:flex;align-items:center;justify-content:center}.loader-wrapper.loader-fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:9999}.loader-wrapper.loader-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.loader-wrapper.loader-variant-glass{background:rgba(255, 255, 255, 0.15);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border:1px solid rgba(255, 255, 255, 0.2);box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.1)}.loader-wrapper.loader-variant-neon{background:rgba(10, 10, 12, 0.95);box-shadow:inset 0 0 40px color-mix(in srgb, var(--loader-color) 20%, transparent), 0 0 20px color-mix(in srgb, var(--loader-color) 10%, transparent);--loader-color:#a855f7}.loader-wrapper.loader-variant-minimal{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}.loader-wrapper.loader-variant-linear-strip{position:absolute;top:0;left:0;width:100%;height:4px;background:transparent;z-index:1001}.loader-container{display:flex;align-items:center;justify-content:center;box-sizing:border-box;gap:16px}.loader-container.loader-size-3xs{--loader-size:12px}.loader-container.loader-size-2xs{--loader-size:16px}.loader-container.loader-size-xs{--loader-size:20px}.loader-container.loader-size-small{--loader-size:28px}.loader-container.loader-size-md{--loader-size:40px}.loader-container.loader-size-large{--loader-size:56px}.loader-container.loader-size-xl{--loader-size:72px}.loader-container.loader-size-2xl{--loader-size:96px}.loader-container.loader-size-3xl{--loader-size:120px}.loader-container.loader-size-jumbo{--loader-size:160px}.loader-container.loader-color-primary{--loader-color:var(--ui-primary-color)}.loader-container.loader-color-secondary{--loader-color:var(--ui-secondary-color)}.loader-container.loader-color-success{--loader-color:var(--ui-success-color)}.loader-container.loader-color-danger{--loader-color:var(--ui-danger-color)}.loader-container.loader-color-warning{--loader-color:var(--ui-warning-color)}.loader-container.loader-color-info{--loader-color:var(--ui-info-color)}.loader-container.loader-label-bottom{flex-direction:column;text-align:center}.loader-container.loader-label-top{flex-direction:column-reverse;text-align:center}.loader-container.loader-label-left{flex-direction:row-reverse;text-align:right}.loader-container.loader-label-right{flex-direction:row;text-align:left}.loader-visual{display:flex;align-items:center;justify-content:center;position:relative;width:var(--loader-size);height:var(--loader-size);min-width:var(--loader-size);min-height:var(--loader-size)}.loader-text-block{display:flex;flex-direction:column;gap:4px}.loader-label-text{font-family:system-ui, -apple-system, sans-serif;font-size:14px;font-weight:600;color:#1e293b;letter-spacing:0.02em;animation:breathe 2s ease-in-out infinite}.loader-variant-neon .loader-label-text{color:#e9d5ff;text-shadow:0 0 10px rgba(168, 85, 247, 0.8)}.loader-desc-text{font-family:system-ui, -apple-system, sans-serif;font-size:12px;color:#64748b}.loader-variant-neon .loader-desc-text{color:#c084fc}.loader-predictive-bar{display:flex;align-items:center;gap:8px;width:140px;margin-top:4px}.loader-predictive-bar .loader-predictive-fill{height:4px;background:var(--loader-color);border-radius:2px;transition:width 0.3s cubic-bezier(0.1, 0.8, 0.3, 1)}.loader-predictive-bar .loader-predictive-percentage{font-size:11px;font-weight:700;color:var(--loader-color)}.focus-trap-sentinel{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.status-icon-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.status-icon-wrapper .status-svg{width:var(--loader-size);height:var(--loader-size)}.status-icon-wrapper .status-circle-bg{stroke-width:4;stroke-miterlimit:10;animation:status-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards}.status-icon-wrapper .status-check-path{transform-origin:50% 50%;stroke-width:4;stroke-linecap:round;stroke-dasharray:48;stroke-dashoffset:48;animation:status-stroke-offset 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards}.status-icon-wrapper .status-cross-path{transform-origin:50% 50%;stroke-width:4;stroke-linecap:round;stroke-dasharray:48;stroke-dashoffset:48;animation:status-stroke-offset 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards}.status-icon-wrapper.success .status-circle-bg{stroke:var(--ui-success-color);fill:none}.status-icon-wrapper.success .status-check-path{stroke:var(--ui-success-color)}.status-icon-wrapper.error .status-circle-bg{stroke:var(--ui-danger-color);fill:none}.status-icon-wrapper.error .status-cross-path{stroke:var(--ui-danger-color)}.anim-spinner{width:100%;height:100%;border:var(--loader-thickness) solid color-mix(in srgb, var(--loader-color) 15%, transparent);border-left-color:var(--loader-color);border-radius:50%;box-sizing:border-box;animation:spin var(--loader-speed) linear infinite}.loader-variant-neon .anim-spinner{box-shadow:0 0 10px var(--loader-color), inset 0 0 5px var(--loader-color)}.anim-dots{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%}.anim-dots div{width:25%;height:25%;background-color:var(--loader-color);border-radius:50%;animation:dots-pulse var(--loader-speed) ease-in-out infinite}.anim-dots div:nth-child(2){animation-delay:calc(var(--loader-speed) / 6)}.anim-dots div:nth-child(3){animation-delay:calc(var(--loader-speed) / 3)}.anim-bar{width:100%;height:var(--loader-thickness);background:rgba(120, 120, 120, 0.15);border-radius:calc(var(--loader-thickness) / 2);overflow:hidden;position:relative}.anim-bar .bar-indeterminate{position:absolute;height:100%;background:var(--loader-color);left:-50%;width:50%;border-radius:calc(var(--loader-thickness) / 2);animation:bar-slide calc(var(--loader-speed) * 1.5) cubic-bezier(0.4, 0, 0.2, 1) infinite}.anim-bar .bar-determinate{height:100%;background:var(--loader-color);border-radius:calc(var(--loader-thickness) / 2);transition:width 0.3s ease}.anim-pulse{width:80%;height:80%;background-color:var(--loader-color);border-radius:50%;animation:pulse-grow var(--loader-speed) ease-in-out infinite}.anim-ring{width:100%;height:100%;border:var(--loader-thickness) solid transparent;border-top-color:var(--loader-color);border-bottom-color:var(--loader-color);border-radius:50%;box-sizing:border-box;animation:spin var(--loader-speed) cubic-bezier(0.5, 0, 0.5, 1) infinite}.anim-bounce{width:100%;height:100%;position:relative}.anim-bounce div{width:100%;height:100%;border-radius:50%;background-color:var(--loader-color);opacity:0.6;position:absolute;top:0;left:0;animation:bounce-scale calc(var(--loader-speed) * 2) ease-in-out infinite}.anim-bounce div:nth-child(2){animation-delay:calc(var(--loader-speed) * -1)}.anim-grid{display:grid;grid-template-columns:repeat(3, 1fr);grid-gap:15%;width:100%;height:100%}.anim-grid div{background-color:var(--loader-color);border-radius:50%;animation:grid-fade calc(var(--loader-speed) * 1.2) ease-in-out infinite}.anim-grid div:nth-child(1){animation-delay:0s}.anim-grid div:nth-child(2){animation-delay:0.1s}.anim-grid div:nth-child(3){animation-delay:0.2s}.anim-grid div:nth-child(4){animation-delay:0.1s}.anim-grid div:nth-child(5){animation-delay:0.2s}.anim-grid div:nth-child(6){animation-delay:0.3s}.anim-grid div:nth-child(7){animation-delay:0.2s}.anim-grid div:nth-child(8){animation-delay:0.3s}.anim-grid div:nth-child(9){animation-delay:0.4s}.anim-wave{display:flex;align-items:center;justify-content:space-between;width:100%;height:80%}.anim-wave div{width:12%;height:100%;background-color:var(--loader-color);border-radius:4px;animation:wave-stretch var(--loader-speed) ease-in-out infinite}.anim-wave div:nth-child(1){animation-delay:-0.45s}.anim-wave div:nth-child(2){animation-delay:-0.3s}.anim-wave div:nth-child(3){animation-delay:-0.15s}.anim-wave div:nth-child(4){animation-delay:-0.3s}.anim-wave div:nth-child(5){animation-delay:-0.45s}.anim-dual-ring{width:100%;height:100%;border:var(--loader-thickness) solid transparent;border-left-color:var(--loader-color);border-right-color:var(--loader-color);border-radius:50%;animation:spin var(--loader-speed) linear infinite}.anim-heartbeat{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.anim-heartbeat .heart-svg{width:90%;height:90%;fill:var(--loader-color);animation:pulse-heart calc(var(--loader-speed) * 1.2) ease infinite}.anim-clock{width:100%;height:100%;border:var(--loader-thickness) solid var(--loader-color);border-radius:50%;position:relative;box-sizing:border-box}.anim-clock .clock-hour,.anim-clock .clock-minute{position:absolute;background-color:var(--loader-color);width:var(--loader-thickness);left:calc(50% - var(--loader-thickness) / 2);transform-origin:bottom center;border-radius:4px}.anim-clock .clock-hour{height:30%;top:20%;animation:spin calc(var(--loader-speed) * 6) linear infinite}.anim-clock .clock-minute{height:40%;top:10%;animation:spin var(--loader-speed) linear infinite}.anim-raining-letters{width:100%;height:100%;overflow:hidden;border-radius:8px;border:1px solid rgba(120, 120, 120, 0.15);box-sizing:border-box}.anim-raining-letters canvas{width:100% !important;height:100% !important;background:transparent}.anim-ripple{width:100%;height:100%;position:relative}.anim-ripple div{position:absolute;border:var(--loader-thickness) solid var(--loader-color);border-radius:50%;opacity:1;width:0;height:0;top:50%;left:50%;transform:translate(-50%, -50%);animation:ripple-grow var(--loader-speed) cubic-bezier(0, 0.2, 0.8, 1) infinite}.anim-ripple div:nth-child(2){animation-delay:-0.33s}.anim-ripple div:nth-child(3){animation-delay:-0.66s}.anim-infinite{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.anim-infinite svg{width:100%;height:60%}.anim-infinite .infinity-bg{stroke:rgba(120, 120, 120, 0.1);stroke-width:4;fill:none}.anim-infinite .infinity-loop{stroke:var(--loader-color);stroke-width:4;stroke-linecap:round;stroke-dasharray:120 200;fill:none;animation:loop-crawl calc(var(--loader-speed) * 1.5) linear infinite}.anim-wifi{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.anim-wifi div{border:var(--loader-thickness) solid transparent;border-top-color:var(--loader-color);border-radius:50%;position:absolute;transform-origin:center center;box-sizing:border-box}.anim-wifi .wifi-dot{width:15%;height:15%;background-color:var(--loader-color);border:none}.anim-wifi .wifi-arc-1{width:45%;height:45%;animation:wifi-pulse var(--loader-speed) ease-in-out infinite 0.1s}.anim-wifi .wifi-arc-2{width:70%;height:70%;animation:wifi-pulse var(--loader-speed) ease-in-out infinite 0.2s}.anim-wifi .wifi-arc-3{width:95%;height:95%;animation:wifi-pulse var(--loader-speed) ease-in-out infinite 0.3s}.anim-rainbow{width:100%;height:100%;border-radius:50%;padding:var(--loader-thickness);background:linear-gradient(90deg, #ff007f, #7f00ff, #00f0ff, #00ff7f, #ffef00, #ff007f);background-size:300% 300%;box-sizing:border-box;mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask-composite:xor;mask-composite:exclude;animation:spin var(--loader-speed) linear infinite, gradient-move 3s ease infinite}.anim-square-shuffle{width:100%;height:100%;position:relative}.anim-square-shuffle div{width:35%;height:35%;background-color:var(--loader-color);position:absolute;animation:shuffle-move calc(var(--loader-speed) * 2) cubic-bezier(0.25, 1, 0.5, 1) infinite}.anim-square-shuffle div:nth-child(1){top:10%;left:10%}.anim-square-shuffle div:nth-child(2){top:10%;left:55%;animation-delay:-0.5s}.anim-square-shuffle div:nth-child(3){top:55%;left:55%;animation-delay:-1s}.anim-square-shuffle div:nth-child(4){top:55%;left:10%;animation-delay:-1.5s}.anim-dna-helix{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%}.anim-dna-helix .dna-strand{height:100%;width:6%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;animation:dna-twist calc(var(--loader-speed) * 1.5) ease-in-out infinite;animation-delay:calc(var(--i) * -0.12s)}.anim-dna-helix .dna-strand .dna-dot{width:150%;height:6%;background:var(--loader-color);border-radius:50%}.anim-dna-helix .dna-strand .dna-bar{width:30%;height:80%;background:rgba(120, 120, 120, 0.15);border-radius:2px}.anim-atom-sphere{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.anim-atom-sphere .atom-nucleus{width:20%;height:20%;background:var(--loader-color);border-radius:50%;box-shadow:0 0 10px var(--loader-color)}.anim-atom-sphere .atom-orbit{position:absolute;width:100%;height:40%;border:1.5px solid color-mix(in srgb, var(--loader-color) 35%, transparent);border-radius:50%}.anim-atom-sphere .atom-orbit .atom-electron{width:var(--loader-thickness);height:var(--loader-thickness);background:var(--loader-color);border-radius:50%;position:absolute;top:-3px;left:50%;box-shadow:0 0 6px var(--loader-color)}.anim-atom-sphere .atom-orbit.orbit-1{transform:rotate(0deg)}.anim-atom-sphere .atom-orbit.orbit-1 .atom-electron{animation:orbit-spin var(--loader-speed) linear infinite}.anim-atom-sphere .atom-orbit.orbit-2{transform:rotate(60deg)}.anim-atom-sphere .atom-orbit.orbit-2 .atom-electron{animation:orbit-spin var(--loader-speed) linear infinite -0.33s}.anim-atom-sphere .atom-orbit.orbit-3{transform:rotate(-60deg)}.anim-atom-sphere .atom-orbit.orbit-3 .atom-electron{animation:orbit-spin var(--loader-speed) linear infinite -0.66s}.anim-staircase{width:100%;height:100%;position:relative}.anim-staircase .stair-climber{width:25%;height:25%;background-color:var(--loader-color);border-radius:4px;position:absolute;top:10%;left:10%;animation:stair-climb var(--loader-speed) cubic-bezier(0.25, 1, 0.5, 1) infinite}.anim-staircase .stairs{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;width:100%;height:100%}.anim-staircase .stairs div{background:rgba(120, 120, 120, 0.15);height:20%;border-radius:2px;margin-top:5%}.anim-staircase .stairs div:nth-child(1){width:100%}.anim-staircase .stairs div:nth-child(2){width:75%}.anim-staircase .stairs div:nth-child(3){width:50%}.anim-staircase .stairs div:nth-child(4){width:25%}.anim-radar{width:100%;height:100%;border-radius:50%;border:1.5px solid rgba(120, 120, 120, 0.1);box-sizing:border-box;position:relative;overflow:hidden}.anim-radar .radar-scanner{position:absolute;top:50%;left:50%;width:100%;height:100%;background:conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--loader-color) 15%, transparent) 0%, transparent 40%, transparent 100%);transform:translate(-50%, -50%);animation:spin var(--loader-speed) linear infinite;transform-origin:50% 50%}.anim-radar .radar-ring,.anim-radar .radar-ring-mid{position:absolute;border:1px dashed color-mix(in srgb, var(--loader-color) 25%, transparent);border-radius:50%;top:50%;left:50%;transform:translate(-50%, -50%)}.anim-radar .radar-ring{width:70%;height:70%}.anim-radar .radar-ring-mid{width:40%;height:40%}.anim-radar .radar-dot{width:8%;height:8%;background:var(--loader-color);border-radius:50%;position:absolute;top:30%;left:65%;box-shadow:0 0 8px var(--loader-color);animation:blink 1.2s infinite}.anim-liquid-drop{width:100%;height:100%;position:relative}.anim-liquid-drop .drop-nozzle{width:20%;height:10%;background:rgba(120, 120, 120, 0.2);border-radius:0 0 4px 4px;margin:0 auto}.anim-liquid-drop .drop-droplet{width:14%;height:20%;background:var(--loader-color);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;position:absolute;top:10%;left:43%;animation:drop-fall var(--loader-speed) cubic-bezier(0.5, 0, 0.7, 0.4) infinite}.anim-liquid-drop .drop-surface{width:80%;height:8%;background:color-mix(in srgb, var(--loader-color) 30%, transparent);border-radius:50%;position:absolute;bottom:10%;left:10%;animation:surface-ripple var(--loader-speed) ease infinite}.anim-neon-path{width:100%;height:100%;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 0 15px color-mix(in srgb, var(--loader-color) 15%, transparent);box-sizing:border-box}.anim-neon-path div{width:100%;height:100%;border:var(--loader-thickness) solid var(--loader-color);border-radius:12px;box-sizing:border-box;animation:neon-glow-scale 1.5s ease-in-out infinite alternate}.anim-neuro-pulse{width:100%;height:100%}.anim-neuro-pulse .neuro-svg{width:100%;height:100%}.anim-neuro-pulse .neuro-branch{stroke:rgba(120, 120, 120, 0.15);stroke-width:2}.anim-neuro-pulse .neuro-center{fill:var(--loader-color)}.anim-neuro-pulse .neuro-terminal{fill:rgba(120, 120, 120, 0.4)}.anim-neuro-pulse .neuro-active-pulse{fill:var(--loader-color);animation:neuro-pulse-scale 2s ease-out infinite}.anim-neuro-pulse .neuro-active-pulse.pulse-2{animation-delay:1s}.anim-vortex-ring{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.anim-vortex-ring div{position:absolute;border:var(--loader-thickness) solid transparent;border-top-color:var(--loader-color);border-radius:50%;animation:spin var(--loader-speed) cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite}.anim-vortex-ring div:nth-child(1){width:100%;height:100%}.anim-vortex-ring div:nth-child(2){width:70%;height:70%;animation-delay:-0.2s;animation-direction:reverse}.anim-vortex-ring div:nth-child(3){width:40%;height:40%;animation-delay:-0.4s}.anim-cube-fold{width:70%;height:70%;transform:rotateZ(45deg);position:relative}.anim-cube-fold .fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.anim-cube-fold .fold-cube::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--loader-color);animation:cube-fold-anim calc(var(--loader-speed) * 2.4) linear infinite both;transform-origin:100% 100%}.anim-cube-fold .fold-cube.cube-2{transform:scale(1.1) rotateZ(90deg)}.anim-cube-fold .fold-cube.cube-2::before{animation-delay:0.3s}.anim-cube-fold .fold-cube.cube-3{transform:scale(1.1) rotateZ(270deg)}.anim-cube-fold .fold-cube.cube-3::before{animation-delay:0.9s}.anim-cube-fold .fold-cube.cube-4{transform:scale(1.1) rotateZ(180deg)}.anim-cube-fold .fold-cube.cube-4::before{animation-delay:0.6s}.anim-breathing{width:60%;height:60%;background-color:var(--loader-color);border-radius:50%;animation:breathe 2s ease-in-out infinite;box-shadow:0 0 15px var(--loader-color)}.anim-glitch-text{font-family:"Courier New", Courier, monospace;font-size:16px;font-weight:900;color:#fff;position:relative;text-shadow:0.05em 0 0 rgba(255, 0, 0, 0.75), -0.025em -0.05em 0 rgba(0, 255, 0, 0.75), 0.025em 0.05em 0 rgba(0, 0, 255, 0.75);animation:glitch 1s infinite}.anim-glitch-text::before,.anim-glitch-text::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;background:transparent}.anim-glitch-text::before{animation:glitch-anim-1 0.7s infinite linear alternate-reverse;text-shadow:-2px 0 #ff00c1;clip:rect(44px, 450px, 56px, 0)}.anim-glitch-text::after{animation:glitch-anim-2 0.7s infinite linear alternate-reverse;text-shadow:-2px 0 #00fff9, 2px 2px #ff00c1;clip:rect(85px, 450px, 140px, 0)}.anim-plc-module{background:#27272a;border:1.5px solid #3f3f46;border-radius:6px;width:90%;height:90%;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;font-family:monospace;font-size:8px;color:#a1a1aa}.anim-plc-module .plc-header{background:#3f3f46;color:#fff;font-weight:bold;text-align:center;padding:2px 0}.anim-plc-module .plc-leds{display:flex;flex-direction:column;gap:4px;padding:6px;flex:1;justify-content:center}.anim-plc-module .plc-row{display:flex;justify-content:space-between;align-items:center}.anim-plc-module .plc-led{width:6px;height:6px;border-radius:50%}.anim-plc-module .plc-led.led-green{background:#22c55e;box-shadow:0 0 4px #22c55e}.anim-plc-module .plc-led.led-amber{background:#f59e0b;box-shadow:0 0 4px #f59e0b}.anim-plc-module .plc-led.led-red{background:#ef4444}.anim-plc-module .plc-led.blinking{animation:blink 0.8s infinite}.anim-plc-module .plc-led.flicker{animation:blink 0.25s infinite}.anim-plc-module .plc-led.flicker-delayed{animation:blink 0.35s infinite 0.15s}.anim-plc-module .plc-led.off{background:#52525b;box-shadow:none}.anim-m580-signal{display:flex;align-items:flex-end;justify-content:space-between;width:80%;height:60%}.anim-m580-signal div{width:14%;background-color:#22c55e;border-radius:1px;box-shadow:0 0 3px #22c55e;animation:signal-rise 1.5s ease-in-out infinite}.anim-m580-signal div:nth-child(1){height:20%;animation-delay:0.1s}.anim-m580-signal div:nth-child(2){height:40%;animation-delay:0.2s}.anim-m580-signal div:nth-child(3){height:60%;animation-delay:0.3s}.anim-m580-signal div:nth-child(4){height:80%;animation-delay:0.4s}.anim-m580-signal div:nth-child(5){height:100%;animation-delay:0.5s}.anim-circuit-board{width:100%;height:100%}.anim-circuit-board svg{width:100%;height:100%}.anim-circuit-board .circuit-path{stroke:rgba(120, 120, 120, 0.15);stroke-width:3px}.anim-circuit-board .circuit-node{fill:none;stroke:var(--loader-color);stroke-width:2.5px}.anim-circuit-board .circuit-pulse{fill:var(--loader-color);box-shadow:0 0 8px var(--loader-color)}.anim-callout-rotate{width:100%;height:100%;position:relative}.anim-callout-rotate .callout-ring{width:100%;height:100%;border:var(--loader-thickness) dashed color-mix(in srgb, var(--loader-color) 40%, transparent);border-radius:50%;box-sizing:border-box;animation:spin calc(var(--loader-speed) * 3) linear infinite}.anim-callout-rotate .callout-arrow{position:absolute;width:30%;height:30%;border:var(--loader-thickness) solid var(--loader-color);border-top:none;border-left:none;top:35%;left:35%;transform:rotate(-45deg);animation:spin var(--loader-speed) ease-in-out infinite}.anim-infinite-roller{display:flex;align-items:center;justify-content:space-around;width:100%;height:30%;border-radius:10px;background:rgba(120, 120, 120, 0.1);padding:0 4px;box-sizing:border-box}.anim-infinite-roller div{width:16%;height:60%;background-color:var(--loader-color);border-radius:50%;animation:roll-slide 1.5s ease-in-out infinite}.anim-infinite-roller div:nth-child(1){animation-delay:0s}.anim-infinite-roller div:nth-child(2){animation-delay:0.25s}.anim-infinite-roller div:nth-child(3){animation-delay:0.5s}.anim-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.anim-image img{max-width:90%;max-height:90%;object-fit:contain;animation:pulse-grow 2s ease-in-out infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes breathe{0%,100%{opacity:0.45;transform:scale(0.95)}50%{opacity:1;transform:scale(1.05)}}@keyframes dots-pulse{0%,100%{transform:scale(0.3);opacity:0.2}50%{transform:scale(1);opacity:1}}@keyframes bar-slide{0%{left:-50%}100%{left:100%}}@keyframes pulse-grow{0%,100%{transform:scale(0);opacity:0.8}50%{transform:scale(1);opacity:0.2}}@keyframes bounce-scale{0%,100%{transform:scale(0)}50%{transform:scale(1)}}@keyframes grid-fade{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.3;transform:scale(0.7)}}@keyframes wave-stretch{0%,100%{transform:scaleY(0.3)}50%{transform:scaleY(1)}}@keyframes pulse-heart{0%{transform:scale(0.9)}25%{transform:scale(1.1)}35%{transform:scale(1)}55%{transform:scale(1.15)}70%{transform:scale(1)}100%{transform:scale(0.9)}}@keyframes ripple-grow{0%{width:0;height:0;opacity:1}100%{width:100%;height:100%;opacity:0}}@keyframes loop-crawl{0%{stroke-dashoffset:320}100%{stroke-dashoffset:0}}@keyframes wifi-pulse{0%,100%{opacity:0.25}50%{opacity:1}}@keyframes gradient-move{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes shuffle-move{0%,100%{transform:translate(0, 0)}25%{transform:translate(120%, 0)}50%{transform:translate(120%, 120%)}75%{transform:translate(0, 120%)}}@keyframes dna-twist{0%,100%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}}@keyframes orbit-spin{0%{transform:rotate(0deg) translateX(0px)}100%{transform:rotate(360deg) translateX(0px)}}@keyframes stair-climb{0%{transform:translate(0, 0)}20%{transform:translate(0, -25%)}40%{transform:translate(25%, -25%)}60%{transform:translate(25%, -50%)}80%{transform:translate(50%, -50%)}100%{transform:translate(50%, -25%)}}@keyframes drop-fall{0%{transform:scale(0) translateY(0);opacity:0}10%{transform:scale(1) translateY(0);opacity:1}80%{transform:scale(1) translateY(250%);opacity:1}90%,100%{transform:scale(0) translateY(250%);opacity:0}}@keyframes surface-ripple{0%,75%{transform:scale(0.2);opacity:0}82%{opacity:1}100%{transform:scale(1.2);opacity:0}}@keyframes neon-glow-scale{0%{box-shadow:0 0 10px color-mix(in srgb, var(--loader-color) 30%, transparent)}100%{box-shadow:0 0 25px color-mix(in srgb, var(--loader-color) 75%, transparent)}}@keyframes neuro-pulse-scale{0%{transform:scale(0.6);opacity:0.8}100%{transform:scale(4.5);opacity:0}}@keyframes cube-fold-anim{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0deg);opacity:1}90%,100%{transform:perspective(140px) rotateY(180deg);opacity:0}}@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-2px, 2px)}40%{transform:translate(-2px, -2px)}60%{transform:translate(2px, 2px)}80%{transform:translate(2px, -2px)}100%{transform:translate(0)}}@keyframes glitch-anim-1{0%{clip:rect(15px, 9999px, 66px, 0)}5%{clip:rect(85px, 9999px, 5px, 0)}10%{clip:rect(34px, 9999px, 78px, 0)}15%{clip:rect(67px, 9999px, 12px, 0)}20%{clip:rect(12px, 9999px, 115px, 0)}25%{clip:rect(98px, 9999px, 94px, 0)}30%{clip:rect(5px, 9999px, 22px, 0)}35%{clip:rect(143px, 9999px, 87px, 0)}40%{clip:rect(61px, 9999px, 140px, 0)}45%{clip:rect(72px, 9999px, 34px, 0)}50%{clip:rect(110px, 9999px, 99px, 0)}55%{clip:rect(2px, 9999px, 45px, 0)}60%{clip:rect(89px, 9999px, 112px, 0)}65%{clip:rect(30px, 9999px, 5px, 0)}70%{clip:rect(122px, 9999px, 80px, 0)}75%{clip:rect(56px, 9999px, 18px, 0)}80%{clip:rect(95px, 9999px, 134px, 0)}85%{clip:rect(14px, 9999px, 49px, 0)}90%{clip:rect(68px, 9999px, 91px, 0)}95%{clip:rect(104px, 9999px, 120px, 0)}100%{clip:rect(40px, 9999px, 10px, 0)}}@keyframes glitch-anim-2{0%{clip:rect(112px, 9999px, 76px, 0)}5%{clip:rect(25px, 9999px, 5px, 0)}10%{clip:rect(98px, 9999px, 34px, 0)}15%{clip:rect(5px, 9999px, 145px, 0)}20%{clip:rect(87px, 9999px, 67px, 0)}25%{clip:rect(120px, 9999px, 10px, 0)}30%{clip:rect(43px, 9999px, 89px, 0)}35%{clip:rect(72px, 9999px, 120px, 0)}40%{clip:rect(2px, 9999px, 54px, 0)}45%{clip:rect(134px, 9999px, 98px, 0)}50%{clip:rect(61px, 9999px, 15px, 0)}55%{clip:rect(95px, 9999px, 130px, 0)}60%{clip:rect(14px, 9999px, 45px, 0)}65%{clip:rect(80px, 9999px, 112px, 0)}70%{clip:rect(34px, 9999px, 2px, 0)}75%{clip:rect(104px, 9999px, 80px, 0)}80%{clip:rect(44px, 9999px, 91px, 0)}85%{clip:rect(122px, 9999px, 5px, 0)}90%{clip:rect(56px, 9999px, 140px, 0)}95%{clip:rect(89px, 9999px, 22px, 0)}100%{clip:rect(110px, 9999px, 99px, 0)}}@keyframes blink{0%,100%{opacity:0.25}50%{opacity:1}}@keyframes signal-rise{0%,100%{opacity:0.2;transform:scaleY(0.7)}50%{opacity:1;transform:scaleY(1)}}@keyframes roll-slide{0%,100%{transform:translateX(-30%)}50%{transform:translateX(30%)}}@keyframes status-stroke{100%{stroke-dashoffset:0}}@keyframes status-stroke-offset{100%{stroke-dashoffset:0}}'}},[513,"ui-loader",{ariaLabel:[1,"aria-label"],ariaLive:[1,"aria-live"],backdropBlur:[4,"blur"],enableBlur:[4,"enable-blur"],color:[1],fullscreen:[4],label:[1],description:[1],labelPosition:[1,"label-position"],overlay:[4],overlayOpacity:[2,"overlay-opacity"],overlayBackground:[1,"overlay-background"],size:[1],speed:[1],thickness:[2],type:[1],visible:[516],variant:[1],value:[2],predictive:[4],messages:[1025],messageInterval:[2,"message-interval"],image:[1],rainText:[1,"rain-text"],rainColumns:[2,"rain-columns"],trapFocus:[4,"trap-focus"],status:[1537],activeLabel:[32],currentProgress:[32]},void 0,{visible:[{handleVisibilityChange:0}],messages:[{parseMessagesProp:0}],status:[{handleStatusChange:0}]}]);function s(){"undefined"!=typeof customElements&&["ui-loader"].forEach((i=>{"ui-loader"===i&&(customElements.get(t(i))\|\|customElements.define(t(i),o))}))}export{o as L,s as d}
1	+ import{proxyCustomElement as i,HTMLElement as e,createEvent as a,h as r,transformTag as t}from"@stencil/core/internal/client";const o=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.uiShow=a(this,"uiShow",7),this.uiHide=a(this,"uiHide",7)}get element(){return this}ariaLabel="Loading...";ariaLive="polite";backdropBlur=!1;enableBlur=!1;color="success";fullscreen=!1;label;description;labelPosition="bottom";overlay=!1;overlayOpacity=.5;overlayBackground;size="md";speed="normal";thickness=3;type="spinner";visible=!0;variant="standard";value;predictive=!1;messages;messageInterval=2500;image;rainText;rainColumns=5;trapFocus=!1;status="loading";activeLabel;currentProgress=0;uiShow;uiHide;messageTimer;predictiveTimer;activeMessageIndex=0;parsedMessages=[];originalFocusedElement=null;focusableElements=[];canvasElement;canvasAnimationId;canvasColumnsDrops=[];handleVisibilityChange(i){i?(this.uiShow.emit(),this.startTimers(),this.trapFocus&&this.setupFocusTrap()):(this.uiHide.emit(),this.stopTimers(),this.releaseFocusTrap())}parseMessagesProp(){if(this.messages){if("string"==typeof this.messages)try{this.parsedMessages=JSON.parse(this.messages)}catch{this.parsedMessages=this.messages.includes(",")?this.messages.split(",").map((i=>i.trim())):[this.messages]}else Array.isArray(this.messages)&&(this.parsedMessages=this.messages);this.activeMessageIndex=0,this.updateActiveLabel()}else this.parsedMessages=[]}handleStatusChange(i){"success"===i&&this.predictive&&(clearInterval(this.predictiveTimer),this.predictiveTimer=setInterval((()=>{this.currentProgress<100?this.currentProgress=Math.min(100,this.currentProgress+5):clearInterval(this.predictiveTimer)}),30))}componentWillLoad(){this.parseMessagesProp(),this.activeLabel=this.label,void 0!==this.value&&(this.currentProgress=this.value)}componentDidLoad(){this.visible&&(this.uiShow.emit(),this.startTimers(),this.trapFocus&&this.setupFocusTrap(),"raining-letters"===this.type&&this.initMatrixRain())}componentDidUpdate(){"raining-letters"!==this.type\|\|this.canvasAnimationId?"raining-letters"!==this.type&&this.canvasAnimationId&&this.stopMatrixRain():this.initMatrixRain()}disconnectedCallback(){this.stopTimers(),this.releaseFocusTrap(),this.stopMatrixRain()}startTimers(){this.stopTimers(),this.parsedMessages.length>0&&(this.updateActiveLabel(),this.messageTimer=setInterval((()=>{this.activeMessageIndex=(this.activeMessageIndex+1)%this.parsedMessages.length,this.updateActiveLabel()}),this.messageInterval)),this.predictive&&"loading"===this.status&&(this.currentProgress=0,this.predictiveTimer=setInterval((()=>{if(this.currentProgress<95){const i=Math.max(.1,.05(95-this.currentProgress)Math.random());this.currentProgress=parseFloat((this.currentProgress+i).toFixed(1))}}),350))}stopTimers(){this.messageTimer&&(clearInterval(this.messageTimer),this.messageTimer=void 0),this.predictiveTimer&&(clearInterval(this.predictiveTimer),this.predictiveTimer=void 0)}updateActiveLabel(){this.activeLabel=this.parsedMessages.length>0&&this.activeMessageIndex<this.parsedMessages.length?this.parsedMessages[this.activeMessageIndex]:this.label}setupFocusTrap(){this.originalFocusedElement=document.activeElement,setTimeout((()=>{this.focusableElements=this.getFocusableElements(),this.focusableElements.length>0&&this.focusableElements[0].focus()}),50),document.addEventListener("keydown",this.handleKeyDown)}releaseFocusTrap(){document.removeEventListener("keydown",this.handleKeyDown),this.originalFocusedElement&&(this.originalFocusedElement.focus(),this.originalFocusedElement=null)}getFocusableElements(){return this.element.shadowRoot?Array.from(this.element.shadowRoot.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]')):[]}handleKeyDown=i=>{if(this.visible&&this.trapFocus&&"Tab"===i.key){if(this.focusableElements=this.getFocusableElements(),0===this.focusableElements.length)return void i.preventDefault();const e=this.focusableElements[0],a=this.focusableElements[this.focusableElements.length-1],r=this.element.shadowRoot?.activeElement;i.shiftKey?r!==e&&r!==document.body\|\|(a.focus(),i.preventDefault()):r===a&&(e.focus(),i.preventDefault())}};initMatrixRain(){if(!this.canvasElement)return;this.stopMatrixRain();const i=this.canvasElement,e=i.getContext("2d");if(!e)return;i.width=160,i.height=120;const a=this.rainText\|\|"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",r=Math.max(3,this.rainColumns),t=Math.floor(160/r);this.canvasColumnsDrops=[];for(let i=0;i<r;i++)this.canvasColumnsDrops.push(-10Math.random());const o=()=>{e.fillStyle="rgba(255, 255, 255, 0.15)",e.fillRect(0,0,160,120);let i="#10b981";this.color&&!["primary","secondary","success","danger","warning","info"].includes(this.color)?i=this.color:"primary"===this.color?i="#3b82f6":"danger"===this.color?i="#ef4444":"success"===this.color?i="#10b981":"warning"===this.color?i="#f59e0b":"info"===this.color&&(i="#06b6d4"),e.fillStyle=i,e.font=`${t}px monospace`;for(let i=0;i<this.canvasColumnsDrops.length;i++){const r=a[Math.floor(Math.random()a.length)],o=this.canvasColumnsDrops[i]t;e.fillText(r,it+t/4,o),o>120&&Math.random()>.96?this.canvasColumnsDrops[i]=0:this.canvasColumnsDrops[i]+=.45}this.canvasAnimationId=requestAnimationFrame(o)};o()}stopMatrixRain(){this.canvasAnimationId&&(cancelAnimationFrame(this.canvasAnimationId),this.canvasAnimationId=void 0)}getStyles(){const i={};return this.color&&(this.color.startsWith("#")\|\|this.color.startsWith("rgb")\|\|this.color.includes("gradient"))&&(i["--loader-color"]=this.color),this.size&&!["3xs","2xs","xs","small","md","large","xl","2xl","3xl","jumbo"].includes(this.size)&&(i["--loader-size"]=this.size),(this.overlay\|\|this.fullscreen)&&(i["--overlay-opacity"]=`${this.overlayOpacity}`,this.overlayBackground&&(i["--overlay-background"]=this.overlayBackground)),this.speed&&(i["--loader-speed"]={slow:"2s",normal:"1s",fast:"0.5s"}[this.speed]\|\|"1s"),this.thickness&&(i["--loader-thickness"]=`${this.thickness}px`),i}render(){if(!this.visible)return null;const i=this.overlay\|\|this.fullscreen,e=["3xs","2xs","xs","small","md","large","xl","2xl","3xl","jumbo"].includes(this.size),a=["primary","secondary","success","danger","warning","info"].includes(this.color),t={"loader-wrapper":!0,"loader-overlay":i,"loader-fullscreen":this.fullscreen,"loader-blur":this.backdropBlur\|\|this.enableBlur,[`loader-variant-${this.variant}`]:!0},o={"loader-container":!0,[`loader-size-${this.size}`]:e,[`loader-color-${this.color}`]:a,[`loader-label-${this.labelPosition}`]:!0,"loader-status-success":"success"===this.status,"loader-status-error":"error"===this.status};return r("div",{class:t,style:this.getStyles(),role:i?"dialog":"status","aria-modal":i?"true":void 0,"aria-label":this.ariaLabel,"aria-live":this.ariaLive},i&&this.trapFocus&&r("div",{tabIndex:0,class:"focus-trap-sentinel"}),r("div",{class:o},r("div",{class:"loader-visual"},"success"===this.status?this.renderStatusIcon("success"):"error"===this.status?this.renderStatusIcon("error"):this.renderAnimation()),(this.activeLabel\|\|this.description\|\|this.predictive)&&r("div",{class:"loader-text-block"},this.activeLabel&&r("span",{class:"loader-label-text"},this.activeLabel),this.description&&r("span",{class:"loader-desc-text"},this.description),this.predictive&&r("div",{class:"loader-predictive-bar"},r("div",{class:"loader-predictive-fill",style:{width:`${this.currentProgress}%`}}),r("span",{class:"loader-predictive-percentage"},Math.round(this.currentProgress),"%")))),i&&this.trapFocus&&r("div",{tabIndex:0,class:"focus-trap-sentinel"}))}renderStatusIcon(i){return"success"===i?r("div",{class:"status-icon-wrapper success"},r("svg",{viewBox:"0 0 52 52",class:"status-svg"},r("circle",{cx:"26",cy:"26",r:"25",fill:"none",class:"status-circle-bg"}),r("path",{fill:"none",d:"M14.1 27.2l7.1 7.2 16.7-16.8",class:"status-check-path"}))):r("div",{class:"status-icon-wrapper error"},r("svg",{viewBox:"0 0 52 52",class:"status-svg"},r("circle",{cx:"26",cy:"26",r:"25",fill:"none",class:"status-circle-bg"}),r("path",{fill:"none",d:"M16 16l20 20M36 16L16 36",class:"status-cross-path"})))}renderAnimation(){switch(this.type){case"dots":return r("div",{class:"anim-dots"},r("div",null),r("div",null),r("div",null));case"bar":return r("div",{class:"anim-bar"},r("div",void 0!==this.value?{class:"bar-determinate",style:{width:`${this.value}%`}}:{class:"bar-indeterminate"}));case"pulse":return r("div",{class:"anim-pulse"});case"ring":return r("div",{class:"anim-ring"});case"bounce":return r("div",{class:"anim-bounce"},r("div",null),r("div",null));case"grid":return r("div",{class:"anim-grid"},r("div",null),r("div",null),r("div",null),r("div",null),r("div",null),r("div",null),r("div",null),r("div",null),r("div",null));case"wave":return r("div",{class:"anim-wave"},r("div",null),r("div",null),r("div",null),r("div",null),r("div",null));case"dual-ring":return r("div",{class:"anim-dual-ring"});case"heartbeat":return r("div",{class:"anim-heartbeat"},r("svg",{viewBox:"0 0 32 32",class:"heart-svg"},r("path",{d:"M16 28.5S2 18.2 2 10.5a6.5 6.5 0 0 1 11-4.8 6.5 6.5 0 0 1 11 4.8c0 7.7-14 18-14 18z"})));case"clock":return r("div",{class:"anim-clock"},r("div",{class:"clock-hour"}),r("div",{class:"clock-minute"}));case"raining-letters":return r("div",{class:"anim-raining-letters"},r("canvas",{ref:i=>this.canvasElement=i}));case"ripple":return r("div",{class:"anim-ripple"},r("div",null),r("div",null),r("div",null));case"infinite":return r("div",{class:"anim-infinite"},r("svg",{viewBox:"0 0 100 50"},r("path",{d:"M30 15c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15zm40 0c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z",class:"infinity-bg"}),r("path",{d:"M30 15c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15zm40 0c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z",class:"infinity-loop"})));case"wifi":return r("div",{class:"anim-wifi"},r("div",{class:"wifi-dot"}),r("div",{class:"wifi-arc-1"}),r("div",{class:"wifi-arc-2"}),r("div",{class:"wifi-arc-3"}));case"rainbow":return r("div",{class:"anim-rainbow"});case"square-shuffle":return r("div",{class:"anim-square-shuffle"},r("div",null),r("div",null),r("div",null),r("div",null));case"dna-helix":return r("div",{class:"anim-dna-helix"},Array.from({length:12}).map(((i,e)=>r("div",{class:"dna-strand",style:{"--i":`${e}`}},r("div",{class:"dna-dot dot-top"}),r("div",{class:"dna-bar"}),r("div",{class:"dna-dot dot-bottom"})))));case"atom-sphere":return r("div",{class:"anim-atom-sphere"},r("div",{class:"atom-nucleus"}),r("div",{class:"atom-orbit orbit-1"},r("div",{class:"atom-electron"})),r("div",{class:"atom-orbit orbit-2"},r("div",{class:"atom-electron"})),r("div",{class:"atom-orbit orbit-3"},r("div",{class:"atom-electron"})));case"staircase":return r("div",{class:"anim-staircase"},r("div",{class:"stair-climber"}),r("div",{class:"stairs"},r("div",null),r("div",null),r("div",null),r("div",null)));case"radar":return r("div",{class:"anim-radar"},r("div",{class:"radar-scanner"}),r("div",{class:"radar-ring"}),r("div",{class:"radar-ring-mid"}),r("div",{class:"radar-dot"}));case"liquid-drop":return r("div",{class:"anim-liquid-drop"},r("div",{class:"drop-nozzle"}),r("div",{class:"drop-droplet"}),r("div",{class:"drop-surface"}));case"neon-path":return r("div",{class:"anim-neon-path"},r("div",null));case"neuro-pulse":return r("div",{class:"anim-neuro-pulse"},r("svg",{viewBox:"0 0 100 100",class:"neuro-svg"},r("path",{d:"M50 50 L20 20 M50 50 L80 20 M50 50 L50 80 M50 50 L20 70 M50 50 L80 70",class:"neuro-branch"}),r("circle",{cx:"50",cy:"50",r:"8",class:"neuro-center"}),r("circle",{cx:"20",cy:"20",r:"4",class:"neuro-terminal"}),r("circle",{cx:"80",cy:"20",r:"4",class:"neuro-terminal"}),r("circle",{cx:"50",cy:"80",r:"4",class:"neuro-terminal"}),r("circle",{cx:"20",cy:"70",r:"4",class:"neuro-terminal"}),r("circle",{cx:"80",cy:"70",r:"4",class:"neuro-terminal"}),r("circle",{cx:"50",cy:"50",class:"neuro-active-pulse pulse-1"}),r("circle",{cx:"50",cy:"50",class:"neuro-active-pulse pulse-2"})));case"vortex-ring":return r("div",{class:"anim-vortex-ring"},r("div",null),r("div",null),r("div",null));case"cube-fold":return r("div",{class:"anim-cube-fold"},r("div",{class:"fold-cube cube-1"}),r("div",{class:"fold-cube cube-2"}),r("div",{class:"fold-cube cube-4"}),r("div",{class:"fold-cube cube-3"}));case"breathing":return r("div",{class:"anim-breathing"});case"glitch-text":return r("div",{class:"anim-glitch-text","data-text":"LOADING"},"LOADING");case"plc-module":return r("div",{class:"anim-plc-module"},r("div",{class:"plc-header"},"CPU"),r("div",{class:"plc-leds"},r("div",{class:"plc-row"},r("span",{class:"led-label"},"RUN"),r("span",{class:"plc-led led-green blinking"})),r("div",{class:"plc-row"},r("span",{class:"led-label"},"ERR"),r("span",{class:"plc-led led-red off"})),r("div",{class:"plc-row"},r("span",{class:"led-label"},"COM"),r("span",{class:"plc-led led-amber flicker"})),r("div",{class:"plc-row"},r("span",{class:"led-label"},"I/O"),r("span",{class:"plc-led led-green flicker-delayed"}))));case"m580-signal":return r("div",{class:"anim-m580-signal"},r("div",null),r("div",null),r("div",null),r("div",null),r("div",null));case"circuit-board":return r("div",{class:"anim-circuit-board"},r("svg",{viewBox:"0 0 100 100"},r("path",{d:"M10 50 L40 50 L50 40 L90 40 M40 50 L50 60 L80 60",class:"circuit-path",fill:"none"}),r("circle",{cx:"10",cy:"50",r:"3",class:"circuit-node"}),r("circle",{cx:"90",cy:"40",r:"3",class:"circuit-node"}),r("circle",{cx:"80",cy:"60",r:"3",class:"circuit-node"}),r("circle",{cx:"0",cy:"0",r:"2.5",class:"circuit-pulse pulse-a"},r("animateMotion",{dur:"2s",repeatCount:"indefinite",path:"M10 50 L40 50 L50 40 L90 40"})),r("circle",{cx:"0",cy:"0",r:"2.5",class:"circuit-pulse pulse-b"},r("animateMotion",{dur:"2s",repeatCount:"indefinite",path:"M40 50 L50 60 L80 60",begin:"0.5s"}))));case"callout-rotate":return r("div",{class:"anim-callout-rotate"},r("div",{class:"callout-ring"}),r("div",{class:"callout-arrow"}));case"infinite-roller":return r("div",{class:"anim-infinite-roller"},r("div",null),r("div",null),r("div",null));case"image":return r("div",{class:"anim-image"},r("img",{src:this.image,alt:"loading-graphic"}));default:return r("div",{class:"anim-spinner"})}}static get watchers(){return{visible:[{handleVisibilityChange:0}],messages:[{parseMessagesProp:0}],status:[{handleStatusChange:0}]}}static get style(){return'.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:inline-block;box-sizing:border-box;--ui-primary-color:#3b82f6;--ui-secondary-color:#64748b;--ui-success-color:#10b981;--ui-danger-color:#ef4444;--ui-warning-color:#f59e0b;--ui-info-color:#06b6d4;--loader-color:var(--ui-success-color);--loader-size:40px;--loader-speed:1s;--loader-thickness:3px;--overlay-opacity:0.5;--overlay-background:rgba(255, 255, 255, var(--overlay-opacity))}.loader-wrapper{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;transition:opacity 0.3s ease}.loader-wrapper.loader-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1000;background:var(--overlay-background);display:flex;align-items:center;justify-content:center}.loader-wrapper.loader-fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:9999}.loader-wrapper.loader-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.loader-wrapper.loader-variant-glass{background:rgba(255, 255, 255, 0.15);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border:1px solid rgba(255, 255, 255, 0.2);box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.1)}.loader-wrapper.loader-variant-neon{background:rgba(10, 10, 12, 0.95);box-shadow:inset 0 0 40px color-mix(in srgb, var(--loader-color) 20%, transparent), 0 0 20px color-mix(in srgb, var(--loader-color) 10%, transparent);--loader-color:#a855f7}.loader-wrapper.loader-variant-minimal{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}.loader-wrapper.loader-variant-linear-strip{position:absolute;top:0;left:0;width:100%;height:4px;background:transparent;z-index:1001}.loader-container{display:flex;align-items:center;justify-content:center;box-sizing:border-box;gap:16px}.loader-container.loader-size-3xs{--loader-size:12px}.loader-container.loader-size-2xs{--loader-size:16px}.loader-container.loader-size-xs{--loader-size:20px}.loader-container.loader-size-small{--loader-size:28px}.loader-container.loader-size-md{--loader-size:40px}.loader-container.loader-size-large{--loader-size:56px}.loader-container.loader-size-xl{--loader-size:72px}.loader-container.loader-size-2xl{--loader-size:96px}.loader-container.loader-size-3xl{--loader-size:120px}.loader-container.loader-size-jumbo{--loader-size:160px}.loader-container.loader-color-primary{--loader-color:var(--ui-primary-color)}.loader-container.loader-color-secondary{--loader-color:var(--ui-secondary-color)}.loader-container.loader-color-success{--loader-color:var(--ui-success-color)}.loader-container.loader-color-danger{--loader-color:var(--ui-danger-color)}.loader-container.loader-color-warning{--loader-color:var(--ui-warning-color)}.loader-container.loader-color-info{--loader-color:var(--ui-info-color)}.loader-container.loader-label-bottom{flex-direction:column;text-align:center}.loader-container.loader-label-top{flex-direction:column-reverse;text-align:center}.loader-container.loader-label-left{flex-direction:row-reverse;text-align:right}.loader-container.loader-label-right{flex-direction:row;text-align:left}.loader-visual{display:flex;align-items:center;justify-content:center;position:relative;width:var(--loader-size);height:var(--loader-size);min-width:var(--loader-size);min-height:var(--loader-size)}.loader-text-block{display:flex;flex-direction:column;gap:4px}.loader-label-text{font-family:system-ui, -apple-system, sans-serif;font-size:14px;font-weight:600;color:#1e293b;letter-spacing:0.02em;animation:breathe 2s ease-in-out infinite}.loader-variant-neon .loader-label-text{color:#e9d5ff;text-shadow:0 0 10px rgba(168, 85, 247, 0.8)}.loader-desc-text{font-family:system-ui, -apple-system, sans-serif;font-size:12px;color:#64748b}.loader-variant-neon .loader-desc-text{color:#c084fc}.loader-predictive-bar{display:flex;align-items:center;gap:8px;width:140px;margin-top:4px}.loader-predictive-bar .loader-predictive-fill{height:4px;background:var(--loader-color);border-radius:2px;transition:width 0.3s cubic-bezier(0.1, 0.8, 0.3, 1)}.loader-predictive-bar .loader-predictive-percentage{font-size:11px;font-weight:700;color:var(--loader-color)}.focus-trap-sentinel{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.status-icon-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.status-icon-wrapper .status-svg{width:var(--loader-size);height:var(--loader-size)}.status-icon-wrapper .status-circle-bg{stroke-width:4;stroke-miterlimit:10;animation:status-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards}.status-icon-wrapper .status-check-path{transform-origin:50% 50%;stroke-width:4;stroke-linecap:round;stroke-dasharray:48;stroke-dashoffset:48;animation:status-stroke-offset 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards}.status-icon-wrapper .status-cross-path{transform-origin:50% 50%;stroke-width:4;stroke-linecap:round;stroke-dasharray:48;stroke-dashoffset:48;animation:status-stroke-offset 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards}.status-icon-wrapper.success .status-circle-bg{stroke:var(--ui-success-color);fill:none}.status-icon-wrapper.success .status-check-path{stroke:var(--ui-success-color)}.status-icon-wrapper.error .status-circle-bg{stroke:var(--ui-danger-color);fill:none}.status-icon-wrapper.error .status-cross-path{stroke:var(--ui-danger-color)}.anim-spinner{width:100%;height:100%;border:var(--loader-thickness) solid color-mix(in srgb, var(--loader-color) 15%, transparent);border-left-color:var(--loader-color);border-radius:50%;box-sizing:border-box;animation:spin var(--loader-speed) linear infinite}.loader-variant-neon .anim-spinner{box-shadow:0 0 10px var(--loader-color), inset 0 0 5px var(--loader-color)}.anim-dots{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%}.anim-dots div{width:25%;height:25%;background-color:var(--loader-color);border-radius:50%;animation:dots-pulse var(--loader-speed) ease-in-out infinite}.anim-dots div:nth-child(2){animation-delay:calc(var(--loader-speed) / 6)}.anim-dots div:nth-child(3){animation-delay:calc(var(--loader-speed) / 3)}.anim-bar{width:100%;height:var(--loader-thickness);background:rgba(120, 120, 120, 0.15);border-radius:calc(var(--loader-thickness) / 2);overflow:hidden;position:relative}.anim-bar .bar-indeterminate{position:absolute;height:100%;background:var(--loader-color);left:-50%;width:50%;border-radius:calc(var(--loader-thickness) / 2);animation:bar-slide calc(var(--loader-speed) * 1.5) cubic-bezier(0.4, 0, 0.2, 1) infinite}.anim-bar .bar-determinate{height:100%;background:var(--loader-color);border-radius:calc(var(--loader-thickness) / 2);transition:width 0.3s ease}.anim-pulse{width:80%;height:80%;background-color:var(--loader-color);border-radius:50%;animation:pulse-grow var(--loader-speed) ease-in-out infinite}.anim-ring{width:100%;height:100%;border:var(--loader-thickness) solid transparent;border-top-color:var(--loader-color);border-bottom-color:var(--loader-color);border-radius:50%;box-sizing:border-box;animation:spin var(--loader-speed) cubic-bezier(0.5, 0, 0.5, 1) infinite}.anim-bounce{width:100%;height:100%;position:relative}.anim-bounce div{width:100%;height:100%;border-radius:50%;background-color:var(--loader-color);opacity:0.6;position:absolute;top:0;left:0;animation:bounce-scale calc(var(--loader-speed) * 2) ease-in-out infinite}.anim-bounce div:nth-child(2){animation-delay:calc(var(--loader-speed) * -1)}.anim-grid{display:grid;grid-template-columns:repeat(3, 1fr);grid-gap:15%;width:100%;height:100%}.anim-grid div{background-color:var(--loader-color);border-radius:50%;animation:grid-fade calc(var(--loader-speed) * 1.2) ease-in-out infinite}.anim-grid div:nth-child(1){animation-delay:0s}.anim-grid div:nth-child(2){animation-delay:0.1s}.anim-grid div:nth-child(3){animation-delay:0.2s}.anim-grid div:nth-child(4){animation-delay:0.1s}.anim-grid div:nth-child(5){animation-delay:0.2s}.anim-grid div:nth-child(6){animation-delay:0.3s}.anim-grid div:nth-child(7){animation-delay:0.2s}.anim-grid div:nth-child(8){animation-delay:0.3s}.anim-grid div:nth-child(9){animation-delay:0.4s}.anim-wave{display:flex;align-items:center;justify-content:space-between;width:100%;height:80%}.anim-wave div{width:12%;height:100%;background-color:var(--loader-color);border-radius:4px;animation:wave-stretch var(--loader-speed) ease-in-out infinite}.anim-wave div:nth-child(1){animation-delay:-0.45s}.anim-wave div:nth-child(2){animation-delay:-0.3s}.anim-wave div:nth-child(3){animation-delay:-0.15s}.anim-wave div:nth-child(4){animation-delay:-0.3s}.anim-wave div:nth-child(5){animation-delay:-0.45s}.anim-dual-ring{width:100%;height:100%;border:var(--loader-thickness) solid transparent;border-left-color:var(--loader-color);border-right-color:var(--loader-color);border-radius:50%;animation:spin var(--loader-speed) linear infinite}.anim-heartbeat{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.anim-heartbeat .heart-svg{width:90%;height:90%;fill:var(--loader-color);animation:pulse-heart calc(var(--loader-speed) * 1.2) ease infinite}.anim-clock{width:100%;height:100%;border:var(--loader-thickness) solid var(--loader-color);border-radius:50%;position:relative;box-sizing:border-box}.anim-clock .clock-hour,.anim-clock .clock-minute{position:absolute;background-color:var(--loader-color);width:var(--loader-thickness);left:calc(50% - var(--loader-thickness) / 2);transform-origin:bottom center;border-radius:4px}.anim-clock .clock-hour{height:30%;top:20%;animation:spin calc(var(--loader-speed) * 6) linear infinite}.anim-clock .clock-minute{height:40%;top:10%;animation:spin var(--loader-speed) linear infinite}.anim-raining-letters{width:100%;height:100%;overflow:hidden;border-radius:8px;border:1px solid rgba(120, 120, 120, 0.15);box-sizing:border-box}.anim-raining-letters canvas{width:100% !important;height:100% !important;background:transparent}.anim-ripple{width:100%;height:100%;position:relative}.anim-ripple div{position:absolute;border:var(--loader-thickness) solid var(--loader-color);border-radius:50%;opacity:1;width:0;height:0;top:50%;left:50%;transform:translate(-50%, -50%);animation:ripple-grow var(--loader-speed) cubic-bezier(0, 0.2, 0.8, 1) infinite}.anim-ripple div:nth-child(2){animation-delay:-0.33s}.anim-ripple div:nth-child(3){animation-delay:-0.66s}.anim-infinite{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.anim-infinite svg{width:100%;height:60%}.anim-infinite .infinity-bg{stroke:rgba(120, 120, 120, 0.1);stroke-width:4;fill:none}.anim-infinite .infinity-loop{stroke:var(--loader-color);stroke-width:4;stroke-linecap:round;stroke-dasharray:120 200;fill:none;animation:loop-crawl calc(var(--loader-speed) * 1.5) linear infinite}.anim-wifi{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.anim-wifi div{border:var(--loader-thickness) solid transparent;border-top-color:var(--loader-color);border-radius:50%;position:absolute;transform-origin:center center;box-sizing:border-box}.anim-wifi .wifi-dot{width:15%;height:15%;background-color:var(--loader-color);border:none}.anim-wifi .wifi-arc-1{width:45%;height:45%;animation:wifi-pulse var(--loader-speed) ease-in-out infinite 0.1s}.anim-wifi .wifi-arc-2{width:70%;height:70%;animation:wifi-pulse var(--loader-speed) ease-in-out infinite 0.2s}.anim-wifi .wifi-arc-3{width:95%;height:95%;animation:wifi-pulse var(--loader-speed) ease-in-out infinite 0.3s}.anim-rainbow{width:100%;height:100%;border-radius:50%;padding:var(--loader-thickness);background:linear-gradient(90deg, #ff007f, #7f00ff, #00f0ff, #00ff7f, #ffef00, #ff007f);background-size:300% 300%;box-sizing:border-box;mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask-composite:xor;mask-composite:exclude;animation:spin var(--loader-speed) linear infinite, gradient-move 3s ease infinite}.anim-square-shuffle{width:100%;height:100%;position:relative}.anim-square-shuffle div{width:35%;height:35%;background-color:var(--loader-color);position:absolute;animation:shuffle-move calc(var(--loader-speed) * 2) cubic-bezier(0.25, 1, 0.5, 1) infinite}.anim-square-shuffle div:nth-child(1){top:10%;left:10%}.anim-square-shuffle div:nth-child(2){top:10%;left:55%;animation-delay:-0.5s}.anim-square-shuffle div:nth-child(3){top:55%;left:55%;animation-delay:-1s}.anim-square-shuffle div:nth-child(4){top:55%;left:10%;animation-delay:-1.5s}.anim-dna-helix{display:flex;justify-content:space-between;align-items:center;width:100%;height:100%}.anim-dna-helix .dna-strand{height:100%;width:6%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;animation:dna-twist calc(var(--loader-speed) * 1.5) ease-in-out infinite;animation-delay:calc(var(--i) * -0.12s)}.anim-dna-helix .dna-strand .dna-dot{width:150%;height:6%;background:var(--loader-color);border-radius:50%}.anim-dna-helix .dna-strand .dna-bar{width:30%;height:80%;background:rgba(120, 120, 120, 0.15);border-radius:2px}.anim-atom-sphere{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.anim-atom-sphere .atom-nucleus{width:20%;height:20%;background:var(--loader-color);border-radius:50%;box-shadow:0 0 10px var(--loader-color)}.anim-atom-sphere .atom-orbit{position:absolute;width:100%;height:40%;border:1.5px solid color-mix(in srgb, var(--loader-color) 35%, transparent);border-radius:50%}.anim-atom-sphere .atom-orbit .atom-electron{width:var(--loader-thickness);height:var(--loader-thickness);background:var(--loader-color);border-radius:50%;position:absolute;top:-3px;left:50%;box-shadow:0 0 6px var(--loader-color)}.anim-atom-sphere .atom-orbit.orbit-1{transform:rotate(0deg)}.anim-atom-sphere .atom-orbit.orbit-1 .atom-electron{animation:orbit-spin var(--loader-speed) linear infinite}.anim-atom-sphere .atom-orbit.orbit-2{transform:rotate(60deg)}.anim-atom-sphere .atom-orbit.orbit-2 .atom-electron{animation:orbit-spin var(--loader-speed) linear infinite -0.33s}.anim-atom-sphere .atom-orbit.orbit-3{transform:rotate(-60deg)}.anim-atom-sphere .atom-orbit.orbit-3 .atom-electron{animation:orbit-spin var(--loader-speed) linear infinite -0.66s}.anim-staircase{width:100%;height:100%;position:relative}.anim-staircase .stair-climber{width:25%;height:25%;background-color:var(--loader-color);border-radius:4px;position:absolute;top:10%;left:10%;animation:stair-climb var(--loader-speed) cubic-bezier(0.25, 1, 0.5, 1) infinite}.anim-staircase .stairs{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;width:100%;height:100%}.anim-staircase .stairs div{background:rgba(120, 120, 120, 0.15);height:20%;border-radius:2px;margin-top:5%}.anim-staircase .stairs div:nth-child(1){width:100%}.anim-staircase .stairs div:nth-child(2){width:75%}.anim-staircase .stairs div:nth-child(3){width:50%}.anim-staircase .stairs div:nth-child(4){width:25%}.anim-radar{width:100%;height:100%;border-radius:50%;border:1.5px solid rgba(120, 120, 120, 0.1);box-sizing:border-box;position:relative;overflow:hidden}.anim-radar .radar-scanner{position:absolute;top:50%;left:50%;width:100%;height:100%;background:conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--loader-color) 15%, transparent) 0%, transparent 40%, transparent 100%);transform:translate(-50%, -50%);animation:spin var(--loader-speed) linear infinite;transform-origin:50% 50%}.anim-radar .radar-ring,.anim-radar .radar-ring-mid{position:absolute;border:1px dashed color-mix(in srgb, var(--loader-color) 25%, transparent);border-radius:50%;top:50%;left:50%;transform:translate(-50%, -50%)}.anim-radar .radar-ring{width:70%;height:70%}.anim-radar .radar-ring-mid{width:40%;height:40%}.anim-radar .radar-dot{width:8%;height:8%;background:var(--loader-color);border-radius:50%;position:absolute;top:30%;left:65%;box-shadow:0 0 8px var(--loader-color);animation:blink 1.2s infinite}.anim-liquid-drop{width:100%;height:100%;position:relative}.anim-liquid-drop .drop-nozzle{width:20%;height:10%;background:rgba(120, 120, 120, 0.2);border-radius:0 0 4px 4px;margin:0 auto}.anim-liquid-drop .drop-droplet{width:14%;height:20%;background:var(--loader-color);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;position:absolute;top:10%;left:43%;animation:drop-fall var(--loader-speed) cubic-bezier(0.5, 0, 0.7, 0.4) infinite}.anim-liquid-drop .drop-surface{width:80%;height:8%;background:color-mix(in srgb, var(--loader-color) 30%, transparent);border-radius:50%;position:absolute;bottom:10%;left:10%;animation:surface-ripple var(--loader-speed) ease infinite}.anim-neon-path{width:100%;height:100%;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 0 15px color-mix(in srgb, var(--loader-color) 15%, transparent);box-sizing:border-box}.anim-neon-path div{width:100%;height:100%;border:var(--loader-thickness) solid var(--loader-color);border-radius:12px;box-sizing:border-box;animation:neon-glow-scale 1.5s ease-in-out infinite alternate}.anim-neuro-pulse{width:100%;height:100%}.anim-neuro-pulse .neuro-svg{width:100%;height:100%}.anim-neuro-pulse .neuro-branch{stroke:rgba(120, 120, 120, 0.15);stroke-width:2}.anim-neuro-pulse .neuro-center{fill:var(--loader-color)}.anim-neuro-pulse .neuro-terminal{fill:rgba(120, 120, 120, 0.4)}.anim-neuro-pulse .neuro-active-pulse{fill:var(--loader-color);animation:neuro-pulse-scale 2s ease-out infinite}.anim-neuro-pulse .neuro-active-pulse.pulse-2{animation-delay:1s}.anim-vortex-ring{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.anim-vortex-ring div{position:absolute;border:var(--loader-thickness) solid transparent;border-top-color:var(--loader-color);border-radius:50%;animation:spin var(--loader-speed) cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite}.anim-vortex-ring div:nth-child(1){width:100%;height:100%}.anim-vortex-ring div:nth-child(2){width:70%;height:70%;animation-delay:-0.2s;animation-direction:reverse}.anim-vortex-ring div:nth-child(3){width:40%;height:40%;animation-delay:-0.4s}.anim-cube-fold{width:70%;height:70%;transform:rotateZ(45deg);position:relative}.anim-cube-fold .fold-cube{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.anim-cube-fold .fold-cube::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--loader-color);animation:cube-fold-anim calc(var(--loader-speed) * 2.4) linear infinite both;transform-origin:100% 100%}.anim-cube-fold .fold-cube.cube-2{transform:scale(1.1) rotateZ(90deg)}.anim-cube-fold .fold-cube.cube-2::before{animation-delay:0.3s}.anim-cube-fold .fold-cube.cube-3{transform:scale(1.1) rotateZ(270deg)}.anim-cube-fold .fold-cube.cube-3::before{animation-delay:0.9s}.anim-cube-fold .fold-cube.cube-4{transform:scale(1.1) rotateZ(180deg)}.anim-cube-fold .fold-cube.cube-4::before{animation-delay:0.6s}.anim-breathing{width:60%;height:60%;background-color:var(--loader-color);border-radius:50%;animation:breathe 2s ease-in-out infinite;box-shadow:0 0 15px var(--loader-color)}.anim-glitch-text{font-family:"Courier New", Courier, monospace;font-size:16px;font-weight:900;color:#fff;position:relative;text-shadow:0.05em 0 0 rgba(255, 0, 0, 0.75), -0.025em -0.05em 0 rgba(0, 255, 0, 0.75), 0.025em 0.05em 0 rgba(0, 0, 255, 0.75);animation:glitch 1s infinite}.anim-glitch-text::before,.anim-glitch-text::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;background:transparent}.anim-glitch-text::before{animation:glitch-anim-1 0.7s infinite linear alternate-reverse;text-shadow:-2px 0 #ff00c1;clip:rect(44px, 450px, 56px, 0)}.anim-glitch-text::after{animation:glitch-anim-2 0.7s infinite linear alternate-reverse;text-shadow:-2px 0 #00fff9, 2px 2px #ff00c1;clip:rect(85px, 450px, 140px, 0)}.anim-plc-module{background:#27272a;border:1.5px solid #3f3f46;border-radius:6px;width:90%;height:90%;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;font-family:monospace;font-size:8px;color:#a1a1aa}.anim-plc-module .plc-header{background:#3f3f46;color:#fff;font-weight:bold;text-align:center;padding:2px 0}.anim-plc-module .plc-leds{display:flex;flex-direction:column;gap:4px;padding:6px;flex:1;justify-content:center}.anim-plc-module .plc-row{display:flex;justify-content:space-between;align-items:center}.anim-plc-module .plc-led{width:6px;height:6px;border-radius:50%}.anim-plc-module .plc-led.led-green{background:#22c55e;box-shadow:0 0 4px #22c55e}.anim-plc-module .plc-led.led-amber{background:#f59e0b;box-shadow:0 0 4px #f59e0b}.anim-plc-module .plc-led.led-red{background:#ef4444}.anim-plc-module .plc-led.blinking{animation:blink 0.8s infinite}.anim-plc-module .plc-led.flicker{animation:blink 0.25s infinite}.anim-plc-module .plc-led.flicker-delayed{animation:blink 0.35s infinite 0.15s}.anim-plc-module .plc-led.off{background:#52525b;box-shadow:none}.anim-m580-signal{display:flex;align-items:flex-end;justify-content:space-between;width:80%;height:60%}.anim-m580-signal div{width:14%;background-color:#22c55e;border-radius:1px;box-shadow:0 0 3px #22c55e;animation:signal-rise 1.5s ease-in-out infinite}.anim-m580-signal div:nth-child(1){height:20%;animation-delay:0.1s}.anim-m580-signal div:nth-child(2){height:40%;animation-delay:0.2s}.anim-m580-signal div:nth-child(3){height:60%;animation-delay:0.3s}.anim-m580-signal div:nth-child(4){height:80%;animation-delay:0.4s}.anim-m580-signal div:nth-child(5){height:100%;animation-delay:0.5s}.anim-circuit-board{width:100%;height:100%}.anim-circuit-board svg{width:100%;height:100%}.anim-circuit-board .circuit-path{stroke:rgba(120, 120, 120, 0.15);stroke-width:3px}.anim-circuit-board .circuit-node{fill:none;stroke:var(--loader-color);stroke-width:2.5px}.anim-circuit-board .circuit-pulse{fill:var(--loader-color);box-shadow:0 0 8px var(--loader-color)}.anim-callout-rotate{width:100%;height:100%;position:relative}.anim-callout-rotate .callout-ring{width:100%;height:100%;border:var(--loader-thickness) dashed color-mix(in srgb, var(--loader-color) 40%, transparent);border-radius:50%;box-sizing:border-box;animation:spin calc(var(--loader-speed) * 3) linear infinite}.anim-callout-rotate .callout-arrow{position:absolute;width:30%;height:30%;border:var(--loader-thickness) solid var(--loader-color);border-top:none;border-left:none;top:35%;left:35%;transform:rotate(-45deg);animation:spin var(--loader-speed) ease-in-out infinite}.anim-infinite-roller{display:flex;align-items:center;justify-content:space-around;width:100%;height:30%;border-radius:10px;background:rgba(120, 120, 120, 0.1);padding:0 4px;box-sizing:border-box}.anim-infinite-roller div{width:16%;height:60%;background-color:var(--loader-color);border-radius:50%;animation:roll-slide 1.5s ease-in-out infinite}.anim-infinite-roller div:nth-child(1){animation-delay:0s}.anim-infinite-roller div:nth-child(2){animation-delay:0.25s}.anim-infinite-roller div:nth-child(3){animation-delay:0.5s}.anim-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.anim-image img{max-width:90%;max-height:90%;object-fit:contain;animation:pulse-grow 2s ease-in-out infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes breathe{0%,100%{opacity:0.45;transform:scale(0.95)}50%{opacity:1;transform:scale(1.05)}}@keyframes dots-pulse{0%,100%{transform:scale(0.3);opacity:0.2}50%{transform:scale(1);opacity:1}}@keyframes bar-slide{0%{left:-50%}100%{left:100%}}@keyframes pulse-grow{0%,100%{transform:scale(0);opacity:0.8}50%{transform:scale(1);opacity:0.2}}@keyframes bounce-scale{0%,100%{transform:scale(0)}50%{transform:scale(1)}}@keyframes grid-fade{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.3;transform:scale(0.7)}}@keyframes wave-stretch{0%,100%{transform:scaleY(0.3)}50%{transform:scaleY(1)}}@keyframes pulse-heart{0%{transform:scale(0.9)}25%{transform:scale(1.1)}35%{transform:scale(1)}55%{transform:scale(1.15)}70%{transform:scale(1)}100%{transform:scale(0.9)}}@keyframes ripple-grow{0%{width:0;height:0;opacity:1}100%{width:100%;height:100%;opacity:0}}@keyframes loop-crawl{0%{stroke-dashoffset:320}100%{stroke-dashoffset:0}}@keyframes wifi-pulse{0%,100%{opacity:0.25}50%{opacity:1}}@keyframes gradient-move{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes shuffle-move{0%,100%{transform:translate(0, 0)}25%{transform:translate(120%, 0)}50%{transform:translate(120%, 120%)}75%{transform:translate(0, 120%)}}@keyframes dna-twist{0%,100%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}}@keyframes orbit-spin{0%{transform:rotate(0deg) translateX(0px)}100%{transform:rotate(360deg) translateX(0px)}}@keyframes stair-climb{0%{transform:translate(0, 0)}20%{transform:translate(0, -25%)}40%{transform:translate(25%, -25%)}60%{transform:translate(25%, -50%)}80%{transform:translate(50%, -50%)}100%{transform:translate(50%, -25%)}}@keyframes drop-fall{0%{transform:scale(0) translateY(0);opacity:0}10%{transform:scale(1) translateY(0);opacity:1}80%{transform:scale(1) translateY(250%);opacity:1}90%,100%{transform:scale(0) translateY(250%);opacity:0}}@keyframes surface-ripple{0%,75%{transform:scale(0.2);opacity:0}82%{opacity:1}100%{transform:scale(1.2);opacity:0}}@keyframes neon-glow-scale{0%{box-shadow:0 0 10px color-mix(in srgb, var(--loader-color) 30%, transparent)}100%{box-shadow:0 0 25px color-mix(in srgb, var(--loader-color) 75%, transparent)}}@keyframes neuro-pulse-scale{0%{transform:scale(0.6);opacity:0.8}100%{transform:scale(4.5);opacity:0}}@keyframes cube-fold-anim{0%,10%{transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{transform:perspective(140px) rotateX(0deg);opacity:1}90%,100%{transform:perspective(140px) rotateY(180deg);opacity:0}}@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-2px, 2px)}40%{transform:translate(-2px, -2px)}60%{transform:translate(2px, 2px)}80%{transform:translate(2px, -2px)}100%{transform:translate(0)}}@keyframes glitch-anim-1{0%{clip:rect(15px, 9999px, 66px, 0)}5%{clip:rect(85px, 9999px, 5px, 0)}10%{clip:rect(34px, 9999px, 78px, 0)}15%{clip:rect(67px, 9999px, 12px, 0)}20%{clip:rect(12px, 9999px, 115px, 0)}25%{clip:rect(98px, 9999px, 94px, 0)}30%{clip:rect(5px, 9999px, 22px, 0)}35%{clip:rect(143px, 9999px, 87px, 0)}40%{clip:rect(61px, 9999px, 140px, 0)}45%{clip:rect(72px, 9999px, 34px, 0)}50%{clip:rect(110px, 9999px, 99px, 0)}55%{clip:rect(2px, 9999px, 45px, 0)}60%{clip:rect(89px, 9999px, 112px, 0)}65%{clip:rect(30px, 9999px, 5px, 0)}70%{clip:rect(122px, 9999px, 80px, 0)}75%{clip:rect(56px, 9999px, 18px, 0)}80%{clip:rect(95px, 9999px, 134px, 0)}85%{clip:rect(14px, 9999px, 49px, 0)}90%{clip:rect(68px, 9999px, 91px, 0)}95%{clip:rect(104px, 9999px, 120px, 0)}100%{clip:rect(40px, 9999px, 10px, 0)}}@keyframes glitch-anim-2{0%{clip:rect(112px, 9999px, 76px, 0)}5%{clip:rect(25px, 9999px, 5px, 0)}10%{clip:rect(98px, 9999px, 34px, 0)}15%{clip:rect(5px, 9999px, 145px, 0)}20%{clip:rect(87px, 9999px, 67px, 0)}25%{clip:rect(120px, 9999px, 10px, 0)}30%{clip:rect(43px, 9999px, 89px, 0)}35%{clip:rect(72px, 9999px, 120px, 0)}40%{clip:rect(2px, 9999px, 54px, 0)}45%{clip:rect(134px, 9999px, 98px, 0)}50%{clip:rect(61px, 9999px, 15px, 0)}55%{clip:rect(95px, 9999px, 130px, 0)}60%{clip:rect(14px, 9999px, 45px, 0)}65%{clip:rect(80px, 9999px, 112px, 0)}70%{clip:rect(34px, 9999px, 2px, 0)}75%{clip:rect(104px, 9999px, 80px, 0)}80%{clip:rect(44px, 9999px, 91px, 0)}85%{clip:rect(122px, 9999px, 5px, 0)}90%{clip:rect(56px, 9999px, 140px, 0)}95%{clip:rect(89px, 9999px, 22px, 0)}100%{clip:rect(110px, 9999px, 99px, 0)}}@keyframes blink{0%,100%{opacity:0.25}50%{opacity:1}}@keyframes signal-rise{0%,100%{opacity:0.2;transform:scaleY(0.7)}50%{opacity:1;transform:scaleY(1)}}@keyframes roll-slide{0%,100%{transform:translateX(-30%)}50%{transform:translateX(30%)}}@keyframes status-stroke{100%{stroke-dashoffset:0}}@keyframes status-stroke-offset{100%{stroke-dashoffset:0}}'}},[513,"ui-loader",{ariaLabel:[1,"aria-label"],ariaLive:[1,"aria-live"],backdropBlur:[4,"blur"],enableBlur:[4,"enable-blur"],color:[1],fullscreen:[4],label:[1],description:[1],labelPosition:[1,"label-position"],overlay:[4],overlayOpacity:[2,"overlay-opacity"],overlayBackground:[1,"overlay-background"],size:[1],speed:[1],thickness:[2],type:[1],visible:[516],variant:[1],value:[2],predictive:[4],messages:[1025],messageInterval:[2,"message-interval"],image:[1],rainText:[1,"rain-text"],rainColumns:[2,"rain-columns"],trapFocus:[4,"trap-focus"],status:[1537],activeLabel:[32],currentProgress:[32]},void 0,{visible:[{handleVisibilityChange:0}],messages:[{parseMessagesProp:0}],status:[{handleStatusChange:0}]}]);function s(){"undefined"!=typeof customElements&&["ui-loader"].forEach((i=>{"ui-loader"===i&&(customElements.get(t(i))\|\|customElements.define(t(i),o))}))}export{o as L,s as d}

package/dist/components/my-step.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as t,HTMLElement as e,h as i,transformTag as n}from"@stencil/core/internal/client";const o=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}stepTitle="";icon="";subtitle="";badge="";tooltip="";disabled=!1;status="";index=0;validate;async renderContent(){return i("slot",null)}render(){return i("slot",{key:"~~44701e8e4f9dfe6e74f8b9581a80ef6b2c9a5880~~"})}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}"}},[769,"my-step",{stepTitle:[1,"step-title"],icon:[1],subtitle:[1],badge:[1],tooltip:[1],disabled:[4],status:[1],index:[2],validate:[16],renderContent:[64]}]),r=o,p=function(){"undefined"!=typeof customElements&&["my-step"].forEach((t=>{"my-step"===t&&(customElements.get(n(t))\|\|customElements.define(n(t),o))}))};export{r as MyStep,p as defineCustomElement}
1	+ import{proxyCustomElement as t,HTMLElement as e,h as i,transformTag as n}from"@stencil/core/internal/client";const o=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}stepTitle="";icon="";subtitle="";badge="";tooltip="";disabled=!1;status="";index=0;validate;async renderContent(){return i("slot",null)}render(){return i("slot",{key:"07c09e3d2857a1d05a6e96a4b1d8aede882ea1f5"})}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}"}},[769,"my-step",{stepTitle:[1,"step-title"],icon:[1],subtitle:[1],badge:[1],tooltip:[1],disabled:[4],status:[1],index:[2],validate:[16],renderContent:[64]}]),r=o,a=function(){"undefined"!=typeof customElements&&["my-step"].forEach((t=>{"my-step"===t&&(customElements.get(n(t))\|\|customElements.define(n(t),o))}))};export{r as MyStep,a as defineCustomElement}

package/dist/components/nav-bar.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{proxyCustomElement as e,HTMLElement as a,h as t,Fragment as i,createEvent as n,Host as o,transformTag as r}from"@stencil/core/internal/client";import{d as s}from"./icon.js";import{d as l}from"./loader.js";const d=e(class extends a{topItems=[];bottomItems=[];bottomItemsSecondary=[];collapsed=!0;showHamburger=!0;logoUrl;logoAlt="Logo";appTitle;showSearch=!1;searchPlaceholder="Search...";iconLibrary="default";maxVisibleItems=0;navItemClicked;navToggled;expandedItems=new Set;searchQuery="";showOverflowMenu=!1;isHoveringMenu=!1;overflowMenuPosition={top:"0px",left:"0px"};hoveredIcon=null;tooltipPos={top:0,left:0};overflowTriggerRef;async toggle(){this.collapsed=!this.collapsed,this.navToggled.emit({collapsed:this.collapsed})}async expand(){this.collapsed=!1,this.navToggled.emit({collapsed:this.collapsed})}async collapse(){this.collapsed=!0,this.navToggled.emit({collapsed:this.collapsed})}componentWillLoad(){}handleHamburgerClick=()=>{this.toggle()};handleSearchInput=e=>{this.searchQuery=e.target.value.toLowerCase()};filterItems=e=>this.searchQuery?e.filter((e=>{const a=e.label.toLowerCase().includes(this.searchQuery),t=e.children?.some((e=>e.label.toLowerCase().includes(this.searchQuery)));return a\|\|t})):e;splitItemsByVisibility=e=>0===this.maxVisibleItems\|\|e.length<=this.maxVisibleItems?{visible:e,overflow:[]}:{visible:e.slice(0,this.maxVisibleItems),overflow:e.slice(this.maxVisibleItems)};calculateOverflowMenuPosition=()=>{if(!this.overflowTriggerRef)return;const e=this.overflowTriggerRef.getBoundingClientRect();let a=e.right+8,t=e.top;a+280>window.innerWidth&&(a=e.left-280-8),t+500>window.innerHeight&&(t=Math.max(8,window.innerHeight-500-8)),t=Math.max(8,t),this.overflowMenuPosition={top:t+"px",left:a+"px"}};handleOverflowTriggerEnter=()=>{this.calculateOverflowMenuPosition(),this.showOverflowMenu=!0};toggleSubitems=e=>{const a=new Set(this.expandedItems);a.has(e)?a.delete(e):a.add(e),this.expandedItems=a};handleItemClick=(e,a,t=!1)=>{e.disabled?a.preventDefault():e.children&&e.children.length>0?(a.preventDefault(),this.toggleSubitems(e.id)):this.navItemClicked.emit({item:e,isChild:t})};handleIconEnter=(e,a)=>{if(this.collapsed&&(!e.children\|\|0===e.children.length)){const t=a.currentTarget.getBoundingClientRect();this.hoveredIcon=e.id,this.tooltipPos={top:t.top+t.height/2,left:t.right+12}}};handleIconLeave=()=>{this.hoveredIcon&&(this.hoveredIcon=null)};renderNavItem=(e,a=!1)=>{const n=e.children&&e.children.length>0,o=this.expandedItems.has(e.id),r={"nav-item":!0,active:e.active,disabled:e.disabled,"has-children":n,expanded:o,"is-child":a},s={"nav-item-link":!0,"no-icon":!e.icon};return t("div",{key:e.id},e.sectionHeader&&!this.collapsed&&t("div",{class:"nav-section-header"},e.sectionHeader),t("div",{class:r},t("a",{href:e.href\|\|"#",class:s,onClick:t=>this.handleItemClick(e,t,a)},e.icon&&t("span",{class:"nav-item-icon",onMouseEnter:a=>this.handleIconEnter(e,a),onMouseLeave:this.handleIconLeave},t("ui-icon",{name:e.icon,library:e.iconLibrary\|\|this.iconLibrary,size:"1.25rem"})),!this.collapsed&&t(i,null,t("span",{class:"nav-item-label"},e.label),e.badge&&t("span",{class:"nav-item-badge"},e.badge),n&&t("span",{class:"nav-item-arrow"},t("ui-icon",{name:"chevron-down",library:this.iconLibrary,size:"1rem"})))),n&&o&&t("div",{class:"nav-children"},e.children.map((e=>this.renderNavItem(e,!0))))))};constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.navItemClicked=n(this,"navItemClicked",7),this.navToggled=n(this,"navToggled",7)}connectedCallback(){}render(){return t(o,{key:"18e3c8af7dbb483dff73b88a1f355a0e3b6605f9",collapsed:this.collapsed},t("nav",{key:"ddf81e32206bfae3fb517a8c3b48444401d8ab28",class:"nav-bar "+(this.collapsed?"collapsed":"expanded")},t("div",{key:"b4c7aebc1bfbc9ecb60123d6114efdefd07a3b5b",class:"nav-header"},this.logoUrl&&t("img",{key:"c7ae8fda61df03e604e275d92368b0fddb6089fa",src:this.logoUrl,alt:this.logoAlt,class:"nav-logo"}),this.appTitle&&t("span",{key:"be00df3ab559af0244bc5d8aaa2def21a93eb404",class:"nav-title"},this.appTitle),this.showHamburger&&t("button",{key:"948f1574a82f4d4e10ae160e6c2e211e8d839c77",class:"nav-hamburger",onClick:this.handleHamburgerClick,"aria-label":this.collapsed?"Expand navigation":"Collapse navigation"},t("ui-icon",this.collapsed?{name:"menu",library:this.iconLibrary,size:"1.5rem"}:{name:"x",library:this.iconLibrary,size:"1.5rem"}))),this.showSearch&&!this.collapsed&&t("div",{key:"f83cfa8d13441a86ea9db30b91364efb8041e865",class:"nav-search"},t("input",{key:"50a802fc2e85124866ad4d2d19d845cfe60b9ee3",type:"text",class:"nav-search-input",placeholder:this.searchPlaceholder,onInput:this.handleSearchInput})),t("div",{key:"ff8a5604ad82dd2ebca182c2d56d62a9abd79bed",class:"nav-content"},this.renderSection(this.topItems,"nav-section-top")),this.hoveredIcon&&t("div",{key:"6fe4b41539a4cd1d81c63846c25c26a8d452c9b9",class:"nav-tooltip visible",style:{top:this.tooltipPos.top+"px",left:this.tooltipPos.left+"px"}},[...this.topItems,...this.bottomItems,...this.bottomItemsSecondary].flatMap((e=>[e,...e.children\|\|[]])).find((e=>e.id===this.hoveredIcon))?.label),t("div",{key:"8f6d53da23fbe4fc12151683fc0dca55bf33ab5c",class:"nav-footer"},this.renderSection(this.bottomItems,"nav-section-bottom"),this.renderSection(this.bottomItemsSecondary,"nav-section-bottom-secondary"))))}renderSection(e,a){if(!e\|\|0===e.length)return null;const i=this.filterItems(e),{visible:n,overflow:o}=this.splitItemsByVisibility(i);return t("div",{class:"nav-section "+a},n.map((e=>this.renderNavItem(e))),o.length>0&&t("div",{class:"nav-overflow"},t("div",{class:"nav-overflow-trigger",ref:e=>this.overflowTriggerRef=e,onMouseEnter:this.handleOverflowTriggerEnter,onMouseLeave:()=>{setTimeout((()=>{this.isHoveringMenu\|\|(this.showOverflowMenu=!1)}),100)}},t("span",{class:"nav-item-icon"},t("ui-icon",{name:"more-horizontal",library:this.iconLibrary,size:"1.25rem"})),t("span",{class:"nav-item-label"},"More (",o.length,")")),this.showOverflowMenu&&t("div",{class:"nav-overflow-menu",onMouseEnter:()=>{this.isHoveringMenu=!0,this.showOverflowMenu=!0},onMouseLeave:()=>{this.isHoveringMenu=!1,setTimeout((()=>{this.showOverflowMenu=!1}),100)},style:{left:this.overflowMenuPosition.left,top:this.overflowMenuPosition.top}},o.map((e=>this.renderNavItem(e))))))}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;height:100%;width:var(--nav-width-expanded, 280px);transition:width var(--nav-transition, 0.4s cubic-bezier(0.4, 0, 0.2, 1));flex-shrink:0;overflow:hidden;--nav-bg:#0f172a;--nav-text:#f8fafc;--nav-text-muted:#94a3b8;--nav-accent:#3b82f6;--nav-accent-glow:rgba(59, 130, 246, 0.4);--nav-hover-bg:rgba(255, 255, 255, 0.05);--nav-active-bg:linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);--nav-border:rgba(255, 255, 255, 0.08);--nav-width-expanded:280px;--nav-width-collapsed:80px;--nav-transition:0.4s cubic-bezier(0.4, 0, 0.2, 1)}:host([collapsed]){width:var(--nav-width-collapsed, 80px)}.nav-bar{display:flex;flex-direction:column;height:100%;background:var(--nav-bg);color:var(--nav-text);width:100%;border-right:1px solid var(--nav-border);position:relative;box-sizing:border-box}.nav-bar.collapsed{width:var(--nav-width-collapsed)}.nav-header{display:flex;align-items:center;justify-content:center;gap:16px;padding:24px;min-height:80px;border-bottom:1px solid var(--nav-border)}.collapsed .nav-header{padding:24px 0;justify-content:center}.nav-logo{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255, 255, 255, 0.2))}.nav-title{font-size:18px;font-weight:700;white-space:nowrap;letter-spacing:-0.5px;background:linear-gradient(to right, #fff, #94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.collapsed .nav-title{display:none}.nav-hamburger{background:var(--nav-hover-bg);border:1px solid var(--nav-border);color:white;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all 0.2s ease;margin-left:auto}.collapsed .nav-hamburger{margin-left:0}.collapsed .nav-header{flex-direction:column;padding:16px 0;height:auto;min-height:100px;gap:12px}.nav-hamburger:hover{background:var(--nav-accent);border-color:var(--nav-accent)}.nav-search{padding:16px;position:relative}.nav-search-input{width:100%;padding:10px 12px 10px 38px;background:rgba(255, 255, 255, 0.03);border:1px solid var(--nav-border);border-radius:10px;color:white;font-size:13px;outline:none;transition:all 0.3s ease}.nav-search-input:focus{border-color:var(--nav-accent);background:rgba(255, 255, 255, 0.05);box-shadow:0 0 15px var(--nav-accent-glow)}.nav-search::before{content:\"\";position:absolute;left:28px;top:50%;transform:translateY(-50%);width:16px;height:16px;background:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='M21 21l-4.35-4.35'%3E%3C/path%3E%3C/svg%3E\") no-repeat center;pointer-events:none}.nav-content{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:12px;gap:8px}.collapsed .nav-content{padding:12px 0}.nav-section{display:flex;flex-direction:column;gap:4px}.nav-section-bottom{}.nav-footer{padding:12px;border-top:1px solid var(--nav-border);flex-shrink:0}.collapsed .nav-footer{padding:12px 0}.nav-section-header{padding:12px 12px 8px 12px;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--nav-text-muted);letter-spacing:1px;opacity:0.8}.nav-item .nav-section-header{padding-left:12px;margin-top:12px;border-top:1px solid rgba(255, 255, 255, 0.05)}.collapsed .nav-section-header{display:none}.nav-item{position:relative}.nav-item-link{display:flex;align-items:center;gap:12px;padding:12px;color:var(--nav-text-muted);text-decoration:none;border-radius:12px;transition:all 0.3s ease;font-size:14px;font-weight:500;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.nav-item-link.no-icon{font-size:13px;padding-left:16px}.nav-item-link.no-icon .nav-item-label{opacity:0.9;font-weight:400}.collapsed .nav-item-link{justify-content:center;padding:12px 0;gap:0}.nav-item-link:hover{background:var(--nav-hover-bg);color:white}.active>.nav-item-link{background:var(--nav-active-bg);color:var(--nav-accent);box-shadow:inset 0 0 0 1px rgba(59, 130, 246, 0.3)}.active>.nav-item-link::after{content:\"\";position:absolute;left:0;top:15%;bottom:15%;width:4px;background:var(--nav-accent);border-radius:0 4px 4px 0;box-shadow:0 0 15px var(--nav-accent)}.nav-item-arrow{margin-left:auto;transition:transform 0.3s ease;color:var(--nav-text-muted)}.expanded>.nav-item-link .nav-item-arrow{transform:rotate(180deg)}.nav-item-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;transition:transform 0.3s ease}.nav-item-link:hover .nav-item-icon{transform:scale(1.1)}.active .nav-item-icon{color:var(--nav-accent)}.collapsed .nav-item-label{display:none}.nav-item-badge{background:var(--nav-accent);color:white;padding:2px 6px;border-radius:6px;font-size:10px;font-weight:700;margin-left:auto}.collapsed .nav-item-badge{position:absolute;top:8px;right:8px;width:8px;height:8px;padding:0;font-size:0;box-shadow:0 0 10px var(--nav-accent)}.nav-children{padding-left:24px;margin-top:4px;display:flex;flex-direction:column;gap:2px;border-left:1px solid rgba(255, 255, 255, 0.05);margin-left:24px;padding-left:12px}.is-child .nav-item-link{padding:8px 12px;font-size:13px;border-radius:10px}.collapsed .nav-children{display:none}.nav-overflow{position:relative;margin:2px 0}.nav-overflow-trigger{display:flex;align-items:center;gap:12px;padding:12px;color:var(--nav-text-muted);cursor:pointer;border-radius:12px;transition:all 0.3s ease}.nav-overflow-trigger:hover{background:var(--nav-hover-bg);color:white}.nav-overflow-menu{position:fixed;background:var(--nav-bg);border:1px solid var(--nav-border);border-radius:16px;padding:8px;min-width:220px;box-shadow:0 20px 50px rgba(0, 0, 0, 0.5);z-index:10000;display:flex;flex-direction:column;gap:4px;animation:slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1)}@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideMenu{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}.expanded .nav-item{animation:slideMenu 0.4s ease forwards}.nav-content::-webkit-scrollbar{width:4px}.nav-content::-webkit-scrollbar-thumb{background:var(--nav-border);border-radius:4px}.nav-tooltip{position:fixed;background:#1e293b;color:white;padding:6px 12px;border-radius:6px;font-size:12px;pointer-events:none;z-index:10000;white-space:nowrap;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);border:1px solid rgba(255, 255, 255, 0.1);transform:translateY(-50%);opacity:0;transition:opacity 0.2s}.nav-tooltip.visible{opacity:1}"}},[513,"nav-bar",{topItems:[16],bottomItems:[16],bottomItemsSecondary:[16],collapsed:[1540],showHamburger:[4,"show-hamburger"],logoUrl:[1,"logo-url"],logoAlt:[1,"logo-alt"],appTitle:[1,"app-title"],showSearch:[4,"show-search"],searchPlaceholder:[1,"search-placeholder"],iconLibrary:[1,"icon-library"],maxVisibleItems:[2,"max-visible-items"],expandedItems:[32],searchQuery:[32],showOverflowMenu:[32],isHoveringMenu:[32],overflowMenuPosition:[32],hoveredIcon:[32],tooltipPos:[32],toggle:[64],expand:[64],collapse:[64]}]),p=d,c=function(){"undefined"!=typeof customElements&&["nav-bar","ui-icon","ui-loader"].forEach((e=>{switch(e){case"nav-bar":customElements.get(r(e))\|\|customElements.define(r(e),d);break;case"ui-icon":customElements.get(r(e))\|\|s();break;case"ui-loader":customElements.get(r(e))\|\|l()}}))};export{p as NavBar,c as defineCustomElement}
1	+ import{proxyCustomElement as e,HTMLElement as a,h as t,Fragment as i,createEvent as n,Host as o,transformTag as r}from"@stencil/core/internal/client";import{d as s}from"./icon.js";import{d as l}from"./loader.js";const d=e(class extends a{topItems=[];bottomItems=[];bottomItemsSecondary=[];collapsed=!0;showHamburger=!0;logoUrl;logoAlt="Logo";appTitle;showSearch=!1;searchPlaceholder="Search...";iconLibrary="default";maxVisibleItems=0;navItemClicked;navToggled;expandedItems=new Set;searchQuery="";showOverflowMenu=!1;isHoveringMenu=!1;overflowMenuPosition={top:"0px",left:"0px"};hoveredIcon=null;tooltipPos={top:0,left:0};overflowTriggerRef;async toggle(){this.collapsed=!this.collapsed,this.navToggled.emit({collapsed:this.collapsed})}async expand(){this.collapsed=!1,this.navToggled.emit({collapsed:this.collapsed})}async collapse(){this.collapsed=!0,this.navToggled.emit({collapsed:this.collapsed})}componentWillLoad(){}handleHamburgerClick=()=>{this.toggle()};handleSearchInput=e=>{this.searchQuery=e.target.value.toLowerCase()};filterItems=e=>this.searchQuery?e.filter((e=>{const a=e.label.toLowerCase().includes(this.searchQuery),t=e.children?.some((e=>e.label.toLowerCase().includes(this.searchQuery)));return a\|\|t})):e;splitItemsByVisibility=e=>0===this.maxVisibleItems\|\|e.length<=this.maxVisibleItems?{visible:e,overflow:[]}:{visible:e.slice(0,this.maxVisibleItems),overflow:e.slice(this.maxVisibleItems)};calculateOverflowMenuPosition=()=>{if(!this.overflowTriggerRef)return;const e=this.overflowTriggerRef.getBoundingClientRect();let a=e.right+8,t=e.top;a+280>window.innerWidth&&(a=e.left-280-8),t+500>window.innerHeight&&(t=Math.max(8,window.innerHeight-500-8)),t=Math.max(8,t),this.overflowMenuPosition={top:t+"px",left:a+"px"}};handleOverflowTriggerEnter=()=>{this.calculateOverflowMenuPosition(),this.showOverflowMenu=!0};toggleSubitems=e=>{const a=new Set(this.expandedItems);a.has(e)?a.delete(e):a.add(e),this.expandedItems=a};handleItemClick=(e,a,t=!1)=>{e.disabled?a.preventDefault():e.children&&e.children.length>0?(a.preventDefault(),this.toggleSubitems(e.id)):this.navItemClicked.emit({item:e,isChild:t})};handleIconEnter=(e,a)=>{if(this.collapsed&&(!e.children\|\|0===e.children.length)){const t=a.currentTarget.getBoundingClientRect();this.hoveredIcon=e.id,this.tooltipPos={top:t.top+t.height/2,left:t.right+12}}};handleIconLeave=()=>{this.hoveredIcon&&(this.hoveredIcon=null)};renderNavItem=(e,a=!1)=>{const n=e.children&&e.children.length>0,o=this.expandedItems.has(e.id),r={"nav-item":!0,active:e.active,disabled:e.disabled,"has-children":n,expanded:o,"is-child":a},s={"nav-item-link":!0,"no-icon":!e.icon};return t("div",{key:e.id},e.sectionHeader&&!this.collapsed&&t("div",{class:"nav-section-header"},e.sectionHeader),t("div",{class:r},t("a",{href:e.href\|\|"#",class:s,onClick:t=>this.handleItemClick(e,t,a)},e.icon&&t("span",{class:"nav-item-icon",onMouseEnter:a=>this.handleIconEnter(e,a),onMouseLeave:this.handleIconLeave},t("ui-icon",{name:e.icon,library:e.iconLibrary\|\|this.iconLibrary,size:"1.25rem"})),!this.collapsed&&t(i,null,t("span",{class:"nav-item-label"},e.label),e.badge&&t("span",{class:"nav-item-badge"},e.badge),n&&t("span",{class:"nav-item-arrow"},t("ui-icon",{name:"chevron-down",library:this.iconLibrary,size:"1rem"})))),n&&o&&t("div",{class:"nav-children"},e.children.map((e=>this.renderNavItem(e,!0))))))};constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.navItemClicked=n(this,"navItemClicked",7),this.navToggled=n(this,"navToggled",7)}connectedCallback(){}render(){return t(o,{key:"1ca084a87b49b22d83f87e90cd0cadffbc311eae",collapsed:this.collapsed},t("nav",{key:"bcc0a9d86c7191111ed9997c40eef0a0b5c236e4",class:"nav-bar "+(this.collapsed?"collapsed":"expanded")},t("div",{key:"c18e36e8919eb471554111e7d5ee690f044519d3",class:"nav-header"},this.logoUrl&&t("img",{key:"3ef3c38c0a156bbda0890bba01df49a06afdb0b9",src:this.logoUrl,alt:this.logoAlt,class:"nav-logo"}),this.appTitle&&t("span",{key:"4140fce5cca693439044369924ba42f80bfd3148",class:"nav-title"},this.appTitle),this.showHamburger&&t("button",{key:"58f7a102b5185528ac328c47318fa4caf83ae154",class:"nav-hamburger",onClick:this.handleHamburgerClick,"aria-label":this.collapsed?"Expand navigation":"Collapse navigation"},t("ui-icon",this.collapsed?{name:"menu",library:this.iconLibrary,size:"1.5rem"}:{name:"x",library:this.iconLibrary,size:"1.5rem"}))),this.showSearch&&!this.collapsed&&t("div",{key:"8145564546ad325086238964931b4a48e81ee805",class:"nav-search"},t("input",{key:"61a66f0f1ef1e759205994c1dc0139b4c89f8dac",type:"text",class:"nav-search-input",placeholder:this.searchPlaceholder,onInput:this.handleSearchInput})),t("div",{key:"aab420232ec9816e08926d1ca7b057741e5dc2f6",class:"nav-content"},this.renderSection(this.topItems,"nav-section-top")),this.hoveredIcon&&t("div",{key:"f1cd79267d143e1b4f2ade642da7199b380741d8",class:"nav-tooltip visible",style:{top:this.tooltipPos.top+"px",left:this.tooltipPos.left+"px"}},[...this.topItems,...this.bottomItems,...this.bottomItemsSecondary].flatMap((e=>[e,...e.children\|\|[]])).find((e=>e.id===this.hoveredIcon))?.label),t("div",{key:"993ce0f63b1ad5acf1226741f65437208d6bd3b9",class:"nav-footer"},this.renderSection(this.bottomItems,"nav-section-bottom"),this.renderSection(this.bottomItemsSecondary,"nav-section-bottom-secondary"))))}renderSection(e,a){if(!e\|\|0===e.length)return null;const i=this.filterItems(e),{visible:n,overflow:o}=this.splitItemsByVisibility(i);return t("div",{class:"nav-section "+a},n.map((e=>this.renderNavItem(e))),o.length>0&&t("div",{class:"nav-overflow"},t("div",{class:"nav-overflow-trigger",ref:e=>this.overflowTriggerRef=e,onMouseEnter:this.handleOverflowTriggerEnter,onMouseLeave:()=>{setTimeout((()=>{this.isHoveringMenu\|\|(this.showOverflowMenu=!1)}),100)}},t("span",{class:"nav-item-icon"},t("ui-icon",{name:"more-horizontal",library:this.iconLibrary,size:"1.25rem"})),t("span",{class:"nav-item-label"},"More (",o.length,")")),this.showOverflowMenu&&t("div",{class:"nav-overflow-menu",onMouseEnter:()=>{this.isHoveringMenu=!0,this.showOverflowMenu=!0},onMouseLeave:()=>{this.isHoveringMenu=!1,setTimeout((()=>{this.showOverflowMenu=!1}),100)},style:{left:this.overflowMenuPosition.left,top:this.overflowMenuPosition.top}},o.map((e=>this.renderNavItem(e))))))}static get style(){return".sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;height:100%;width:var(--nav-width-expanded, 280px);transition:width var(--nav-transition, 0.4s cubic-bezier(0.4, 0, 0.2, 1));flex-shrink:0;overflow:hidden;--nav-bg:#0f172a;--nav-text:#f8fafc;--nav-text-muted:#94a3b8;--nav-accent:var(--color-primary, #3b82f6);--nav-accent-glow:var(--color-primary-subtle, rgba(59, 130, 246, 0.4));--nav-hover-bg:rgba(255, 255, 255, 0.05);--nav-active-bg:linear-gradient(135deg, var(--color-primary-subtle, rgba(59, 130, 246, 0.2)) 0%, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1) 100%);--nav-border:rgba(255, 255, 255, 0.08);--nav-width-expanded:280px;--nav-width-collapsed:80px;--nav-transition:0.4s cubic-bezier(0.4, 0, 0.2, 1)}:host([collapsed]){width:var(--nav-width-collapsed, 80px)}.nav-bar{display:flex;flex-direction:column;height:100%;background:var(--nav-bg);color:var(--nav-text);width:100%;border-right:1px solid var(--nav-border);position:relative;box-sizing:border-box}.nav-bar.collapsed{width:var(--nav-width-collapsed)}.nav-header{display:flex;align-items:center;justify-content:center;gap:16px;padding:24px;min-height:80px;border-bottom:1px solid var(--nav-border)}.collapsed .nav-header{padding:24px 0;justify-content:center}.nav-logo{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255, 255, 255, 0.2))}.nav-title{font-size:18px;font-weight:700;white-space:nowrap;letter-spacing:-0.5px;background:linear-gradient(to right, #fff, #94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.collapsed .nav-title{display:none}.nav-hamburger{background:var(--nav-hover-bg);border:1px solid var(--nav-border);color:white;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all 0.2s ease;margin-left:auto}.collapsed .nav-hamburger{margin-left:0}.collapsed .nav-header{flex-direction:column;padding:16px 0;height:auto;min-height:100px;gap:12px}.nav-hamburger:hover{background:var(--nav-accent);border-color:var(--nav-accent)}.nav-search{padding:16px;position:relative}.nav-search-input{width:100%;padding:10px 12px 10px 38px;background:rgba(255, 255, 255, 0.03);border:1px solid var(--nav-border);border-radius:10px;color:white;font-size:13px;outline:none;transition:all 0.3s ease}.nav-search-input:focus{border-color:var(--nav-accent);background:rgba(255, 255, 255, 0.05);box-shadow:0 0 15px var(--nav-accent-glow)}.nav-search::before{content:\"\";position:absolute;left:28px;top:50%;transform:translateY(-50%);width:16px;height:16px;background:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='M21 21l-4.35-4.35'%3E%3C/path%3E%3C/svg%3E\") no-repeat center;pointer-events:none}.nav-content{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:12px;gap:8px}.collapsed .nav-content{padding:12px 0}.nav-section{display:flex;flex-direction:column;gap:4px}.nav-section-bottom{}.nav-footer{padding:12px;border-top:1px solid var(--nav-border);flex-shrink:0}.collapsed .nav-footer{padding:12px 0}.nav-section-header{padding:12px 12px 8px 12px;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--nav-text-muted);letter-spacing:1px;opacity:0.8}.nav-item .nav-section-header{padding-left:12px;margin-top:12px;border-top:1px solid rgba(255, 255, 255, 0.05)}.collapsed .nav-section-header{display:none}.nav-item{position:relative}.nav-item-link{display:flex;align-items:center;gap:12px;padding:12px;color:var(--nav-text-muted);text-decoration:none;border-radius:12px;transition:all 0.3s ease;font-size:14px;font-weight:500;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.nav-item-link.no-icon{font-size:13px;padding-left:16px}.nav-item-link.no-icon .nav-item-label{opacity:0.9;font-weight:400}.collapsed .nav-item-link{justify-content:center;padding:12px 0;gap:0}.nav-item-link:hover{background:var(--nav-hover-bg);color:white}.active>.nav-item-link{background:var(--nav-active-bg);color:var(--nav-accent);box-shadow:inset 0 0 0 1px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3)}.active>.nav-item-link::after{content:\"\";position:absolute;left:0;top:15%;bottom:15%;width:4px;background:var(--nav-accent);border-radius:0 4px 4px 0;box-shadow:0 0 15px var(--nav-accent)}.nav-item-arrow{margin-left:auto;transition:transform 0.3s ease;color:var(--nav-text-muted)}.expanded>.nav-item-link .nav-item-arrow{transform:rotate(180deg)}.nav-item-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;transition:transform 0.3s ease}.nav-item-link:hover .nav-item-icon{transform:scale(1.1)}.active .nav-item-icon{color:var(--nav-accent)}.collapsed .nav-item-label{display:none}.nav-item-badge{background:var(--nav-accent);color:white;padding:2px 6px;border-radius:6px;font-size:10px;font-weight:700;margin-left:auto}.collapsed .nav-item-badge{position:absolute;top:8px;right:8px;width:8px;height:8px;padding:0;font-size:0;box-shadow:0 0 10px var(--nav-accent)}.nav-children{padding-left:24px;margin-top:4px;display:flex;flex-direction:column;gap:2px;border-left:1px solid rgba(255, 255, 255, 0.05);margin-left:24px;padding-left:12px}.is-child .nav-item-link{padding:8px 12px;font-size:13px;border-radius:10px}.collapsed .nav-children{display:none}.nav-overflow{position:relative;margin:2px 0}.nav-overflow-trigger{display:flex;align-items:center;gap:12px;padding:12px;color:var(--nav-text-muted);cursor:pointer;border-radius:12px;transition:all 0.3s ease}.nav-overflow-trigger:hover{background:var(--nav-hover-bg);color:white}.nav-overflow-menu{position:fixed;background:var(--nav-bg);border:1px solid var(--nav-border);border-radius:16px;padding:8px;min-width:220px;box-shadow:0 20px 50px rgba(0, 0, 0, 0.5);z-index:10000;display:flex;flex-direction:column;gap:4px;animation:slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1)}@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideMenu{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}.expanded .nav-item{animation:slideMenu 0.4s ease forwards}.nav-content::-webkit-scrollbar{width:4px}.nav-content::-webkit-scrollbar-thumb{background:var(--nav-border);border-radius:4px}.nav-tooltip{position:fixed;background:#1e293b;color:white;padding:6px 12px;border-radius:6px;font-size:12px;pointer-events:none;z-index:10000;white-space:nowrap;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);border:1px solid rgba(255, 255, 255, 0.1);transform:translateY(-50%);opacity:0;transition:opacity 0.2s}.nav-tooltip.visible{opacity:1}"}},[513,"nav-bar",{topItems:[16],bottomItems:[16],bottomItemsSecondary:[16],collapsed:[1540],showHamburger:[4,"show-hamburger"],logoUrl:[1,"logo-url"],logoAlt:[1,"logo-alt"],appTitle:[1,"app-title"],showSearch:[4,"show-search"],searchPlaceholder:[1,"search-placeholder"],iconLibrary:[1,"icon-library"],maxVisibleItems:[2,"max-visible-items"],expandedItems:[32],searchQuery:[32],showOverflowMenu:[32],isHoveringMenu:[32],overflowMenuPosition:[32],hoveredIcon:[32],tooltipPos:[32],toggle:[64],expand:[64],collapse:[64]}]),c=d,p=function(){"undefined"!=typeof customElements&&["nav-bar","ui-icon","ui-loader"].forEach((e=>{switch(e){case"nav-bar":customElements.get(r(e))\|\|customElements.define(r(e),d);break;case"ui-icon":customElements.get(r(e))\|\|s();break;case"ui-loader":customElements.get(r(e))\|\|l()}}))};export{c as NavBar,p as defineCustomElement}